@goplasmatic/datalogic-ui 0.1.0 → 0.1.1

package/dist/index.js

@@ -21,172 +21,6 @@ let __tla = (async () => {
     error: "#F43F5E",
     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}/,
-      /^\d{2}\/\d{2}\/\d{4}/,
-      /^\d{2}-\d{2}-\d{4}/
-    ];
-    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;
-  }
   OPERATORS = {
     var: {
       name: "var",
@@ -801,14 +635,195 @@ let __tla = (async () => {
         "message"
       ]
     }
-  };
-  function getOperatorMeta(operator) {
-    return OPERATORS[operator] || {
-      name: operator,
-      category: "literal",
-      label: operator,
-      description: `Unknown operator: ${operator}`
-    };
+  };
+  function getOperatorMeta(operator) {
+    return OPERATORS[operator] || {
+      name: operator,
+      category: "literal",
+      label: 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}/,
+      /^\d{2}\/\d{2}\/\d{4}/,
+      /^\d{2}-\d{2}-\d{4}/
+    ];
+    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,
@@ -904,7 +919,7 @@ let __tla = (async () => {
     Component.displayName = toPascalCase(iconName);
     return Component;
   };
-  const __iconNode$v = [
+  const __iconNode$w = [
     [
       "path",
       {
@@ -922,8 +937,8 @@ let __tla = (async () => {
       }
     ]
   ];
-  const Ban = createLucideIcon("ban", __iconNode$v);
-  const __iconNode$u = [
+  const Ban = createLucideIcon("ban", __iconNode$w);
+  const __iconNode$v = [
     [
       "path",
       {
@@ -946,8 +961,8 @@ let __tla = (async () => {
       }
     ]
   ];
-  const Box = createLucideIcon("box", __iconNode$u);
-  const __iconNode$t = [
+  const Box = createLucideIcon("box", __iconNode$v);
+  const __iconNode$u = [
     [
       "path",
       {
@@ -1033,7 +1048,24 @@ let __tla = (async () => {
       }
     ]
   ];
-  const Boxes = createLucideIcon("boxes", __iconNode$t);
+  const Boxes = createLucideIcon("boxes", __iconNode$u);
+  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);
   const __iconNode$s = [
     [
       "path",
@@ -1945,7 +1977,8 @@ let __tla = (async () => {
     "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];
@@ -2516,7 +2549,8 @@ let __tla = (async () => {
         edges: context.edges,
         parentId: parentInfo.parentId,
         argIndex: parentInfo.argIndex,
-        branchType: parentInfo.branchType
+        branchType: parentInfo.branchType,
+        preserveStructure: context.preserveStructure
       });
     }
     const cells = [];
@@ -2531,7 +2565,8 @@ let __tla = (async () => {
         nodes: context.nodes,
         edges: context.edges,
         parentId: nodeId,
-        argIndex: idx
+        argIndex: idx,
+        preserveStructure: context.preserveStructure
       });
       context.edges.push({
         id: `${nodeId}-cond-${conditionBranchId}`,
@@ -2556,7 +2591,8 @@ let __tla = (async () => {
         edges: context.edges,
         parentId: nodeId,
         argIndex: idx + 1,
-        branchType: "yes"
+        branchType: "yes",
+        preserveStructure: context.preserveStructure
       });
       context.edges.push({
         id: `${nodeId}-then-${thenBranchId}`,
@@ -2586,7 +2622,8 @@ let __tla = (async () => {
         edges: context.edges,
         parentId: nodeId,
         argIndex: ifArgs.length - 1,
-        branchType: "no"
+        branchType: "no",
+        preserveStructure: context.preserveStructure
       });
       context.edges.push({
         id: `${nodeId}-else-${elseBranchId}`,
@@ -2665,7 +2702,8 @@ let __tla = (async () => {
           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);
@@ -2755,7 +2793,8 @@ let __tla = (async () => {
         nodes: context.nodes,
         edges: context.edges,
         parentId: nodeId,
-        argIndex: idx
+        argIndex: idx,
+        preserveStructure: context.preserveStructure
       });
       childIds.push(childId);
     });
@@ -2790,7 +2829,123 @@ let __tla = (async () => {
   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, convertValue2) {
+    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 = convertValue2(item, {
+          nodes: context.nodes,
+          edges: context.edges,
+          parentId: nodeId,
+          argIndex: expressionIndex,
+          preserveStructure: context.preserveStructure
+        });
+        elements.push({
+          type: "expression",
+          path,
+          key,
+          branchId,
+          startOffset: 0,
+          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);
     }
@@ -2823,7 +2978,7 @@ let __tla = (async () => {
     }
     return convertOperatorWithChildren(operator, operandArray, value, context, convertValue);
   }
-  jsonLogicToNodes = function(expr) {
+  jsonLogicToNodes = function(expr, options = {}) {
     if (expr === null || expr === void 0) {
       return {
         nodes: [],
@@ -2835,7 +2990,8 @@ let __tla = (async () => {
     const edges = [];
     const rootId = convertValue(expr, {
       nodes,
-      edges
+      edges,
+      preserveStructure: options.preserveStructure
     });
     return {
       nodes,
@@ -2870,7 +3026,7 @@ let __tla = (async () => {
     }
     return results;
   }
-  function traceToNodes(trace) {
+  function traceToNodes(trace, options = {}) {
     if (!trace.expression_tree) {
       return {
         nodes: [],
@@ -2882,11 +3038,13 @@ let __tla = (async () => {
     const nodes = [];
     const edges = [];
     const traceNodeMap = /* @__PURE__ */ new Map();
+    const rootExpression = options.originalValue ?? JSON.parse(trace.expression_tree.expression);
     processExpressionNode(trace.expression_tree, {
       nodes,
       edges,
-      traceNodeMap
-    });
+      traceNodeMap,
+      preserveStructure: options.preserveStructure ?? false
+    }, {}, rootExpression);
     return {
       nodes,
       edges,
@@ -2903,11 +3061,11 @@ let __tla = (async () => {
       }
     }
   }
-  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);
@@ -2924,10 +3082,39 @@ let __tla = (async () => {
       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";
     }
@@ -2975,6 +3162,9 @@ let __tla = (async () => {
       }
     };
     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) {
@@ -3010,6 +3200,9 @@ let __tla = (async () => {
       }
     };
     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;
@@ -3034,23 +3227,10 @@ let __tla = (async () => {
         });
       } 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);
@@ -3075,24 +3255,11 @@ let __tla = (async () => {
         });
       } 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);
@@ -3122,24 +3289,11 @@ let __tla = (async () => {
         });
       } 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);
@@ -3177,6 +3331,9 @@ let __tla = (async () => {
       }
     };
     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);
@@ -3245,6 +3402,10 @@ let __tla = (async () => {
           });
         } else {
           branchId = `${nodeId}-arg-${idx}`;
+          createFallbackNode(branchId, operand, context, {
+            parentId: nodeId,
+            argIndex: idx
+          });
         }
         const summary = generateArgSummary(operand);
         summary.label = generateExpressionText(operand, TRUNCATION_LIMITS.expressionText);
@@ -3283,6 +3444,9 @@ let __tla = (async () => {
       }
     };
     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;
@@ -3328,6 +3492,9 @@ let __tla = (async () => {
         }
       };
       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();
@@ -3336,37 +3503,113 @@ let __tla = (async () => {
         const match = findMatchingChild(operand, children, usedChildIndices);
         if (match) {
           usedChildIndices.add(match.index);
-          const childId = processExpressionNode(match.child, context, {
+          const childId = processExpressionNode(match.child, context, {
+            parentId: nodeId,
+            argIndex: idx
+          });
+          childIds.push(childId);
+        }
+      } else {
+        const match = findMatchingChild(operand, children, usedChildIndices);
+        if (match) {
+          usedChildIndices.add(match.index);
+          const traceId = traceIdToNodeId(match.child.id);
+          context.traceNodeMap.set(traceId, nodeId);
+          if (match.child.children && match.child.children.length > 0) {
+            mapInlinedChildren(match.child.children, nodeId, context.traceNodeMap);
+          }
+        }
+      }
+    });
+    const node = {
+      id: nodeId,
+      type: "operator",
+      position: {
+        x: 0,
+        y: 0
+      },
+      data: {
+        type: "operator",
+        operator,
+        category: meta.category,
+        label: meta.label,
+        childIds,
+        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));
+    }
+  }
+  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: idx
+            argIndex: expressionIndex
+          });
+        } else {
+          branchId = `${nodeId}-expr-${expressionIndex}`;
+          createFallbackNode(branchId, item, context, {
+            parentId: nodeId,
+            argIndex: expressionIndex,
+            branchType: "branch"
           });
-          childIds.push(childId);
-        }
-      } else {
-        const match = findMatchingChild(operand, children, usedChildIndices);
-        if (match) {
-          usedChildIndices.add(match.index);
-          const traceId = traceIdToNodeId(match.child.id);
-          context.traceNodeMap.set(traceId, nodeId);
-          if (match.child.children && match.child.children.length > 0) {
-            mapInlinedChildren(match.child.children, nodeId, context.traceNodeMap);
-          }
         }
+        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: "operator",
+      type: "structure",
       position: {
         x: 0,
         y: 0
       },
       data: {
-        type: "operator",
-        operator,
-        category: meta.category,
-        label: meta.label,
-        childIds,
+        type: "structure",
+        isArray,
+        formattedJson,
+        elements,
         collapsed: false,
         expressionText,
         expression,
@@ -3376,6 +3619,50 @@ let __tla = (async () => {
       }
     };
     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) {
     return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
@@ -6900,6 +7187,9 @@ let __tla = (async () => {
   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;
     return text.length * charWidth;
@@ -6938,12 +7228,31 @@ let __tla = (async () => {
         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,
+    collapsedBodyHeight: 30
+  };
   function getNodeDimensions(node) {
     const width = calculateNodeWidth(node);
     if (isVerticalCellNode(node)) {
@@ -6960,6 +7269,20 @@ let __tla = (async () => {
         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
@@ -6983,7 +7306,7 @@ let __tla = (async () => {
         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) => {
@@ -7016,7 +7339,7 @@ let __tla = (async () => {
       return node;
     });
   };
-  function buildEdgesFromNodes(nodes) {
+  function buildEdgesFromNodes$1(nodes) {
     const edges = [];
     nodes.forEach((node) => {
       if (isOperatorNode(node)) {
@@ -7037,38 +7360,34 @@ let __tla = (async () => {
         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++;
             }
           });
         }
@@ -7092,7 +7411,7 @@ let __tla = (async () => {
   const emptyResults$1 = /* @__PURE__ */ new Map();
   const emptySteps = [];
   const emptyTraceNodeMap = /* @__PURE__ */ new Map();
-  function useLogicEditor({ value, evaluateWithTrace, data }) {
+  function useLogicEditor({ value, evaluateWithTrace, data, preserveStructure = false }) {
     const [nodes, setNodes] = useState([]);
     const [edges, setEdges] = useState([]);
     const [error, setError] = useState(null);
@@ -7103,11 +7422,12 @@ let __tla = (async () => {
     const [lastExternalValue, setLastExternalValue] = useState("");
     const [lastData, setLastData] = useState("");
     const [lastHadTrace, setLastHadTrace] = useState(false);
+    const [lastPreserveStructure, setLastPreserveStructure] = useState(false);
     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 {
@@ -7122,12 +7442,16 @@ let __tla = (async () => {
           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);
@@ -7140,12 +7464,15 @@ let __tla = (async () => {
             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);
@@ -7167,13 +7494,16 @@ let __tla = (async () => {
       setLastExternalValue(valueStr);
       setLastData(dataStr);
       setLastHadTrace(hasTrace);
+      setLastPreserveStructure(preserveStructure);
     }, [
       value,
       data,
       evaluateWithTrace,
+      preserveStructure,
       lastExternalValue,
       lastData,
-      lastHadTrace
+      lastHadTrace,
+      lastPreserveStructure
     ]);
     return useMemo(() => ({
       nodes,
@@ -7564,7 +7894,8 @@ let __tla = (async () => {
       enabled
     ]);
   }
-  function useWasmEvaluator() {
+  function useWasmEvaluator(options = {}) {
+    const { preserveStructure = false } = options;
     const [ready, setReady] = useState(false);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -7575,7 +7906,7 @@ let __tla = (async () => {
         try {
           setLoading(true);
           setError(null);
-          const wasm = await import("./datalogic_wasm-r9jsW6oT.js");
+          const wasm = await import("./datalogic_wasm-Cl34E6jc.js");
           await wasm.default();
           if (!cancelled) {
             moduleRef.current = {
@@ -7605,12 +7936,14 @@ let __tla = (async () => {
       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 = useCallback((logic, data) => {
       if (!moduleRef.current) {
         throw new Error("WASM module not initialized");
@@ -7621,12 +7954,14 @@ let __tla = (async () => {
       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,
@@ -8188,13 +8523,14 @@ let __tla = (async () => {
       ]
     });
   });
-  const CellHandles = memo(function CellHandles2({ cell, branchIndex, color }) {
+  const CellHandles = memo(function CellHandles2({ cell, color }) {
+    const cellIndex = cell.index;
     return jsxs(Fragment, {
       children: [
         cell.conditionBranchId && jsx(Handle, {
           type: "source",
           position: Position.Right,
-          id: `branch-${branchIndex}`,
+          id: `branch-${cellIndex}-cond`,
           className: "cell-handle condition-handle",
           style: {
             background: color,
@@ -8204,7 +8540,7 @@ let __tla = (async () => {
         cell.thenBranchId && jsx(Handle, {
           type: "source",
           position: Position.Right,
-          id: `branch-${branchIndex + (cell.conditionBranchId ? 1 : 0)}`,
+          id: `branch-${cellIndex}-then`,
           className: "cell-handle then-handle",
           style: {
             background: "#22C55E",
@@ -8214,7 +8550,7 @@ let __tla = (async () => {
         cell.branchId && !cell.conditionBranchId && !cell.thenBranchId && jsx(Handle, {
           type: "source",
           position: Position.Right,
-          id: `branch-${branchIndex}`,
+          id: `branch-${cellIndex}`,
           className: "cell-handle",
           style: {
             background: color,
@@ -8224,25 +8560,12 @@ let __tla = (async () => {
       ]
     });
   });
-  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 = memo(function CellRow2({ cell, cells, collapsedIndices, color, onToggleCollapse }) {
+  const CellRow = memo(function CellRow2({ cell, collapsedIndices, color, onToggleCollapse }) {
     var _a;
     const isCellCollapsed = collapsedIndices.includes(cell.index);
     const isIfThenCell = cell.conditionBranchId || cell.thenBranchId;
     const hasAnyBranch = cell.type === "branch" || isIfThenCell;
     const isExpanded = hasAnyBranch && !isCellCollapsed;
-    const branchIndex = calculateBranchIndex(cells, cell.index);
     const handleToggle = useCallback((e) => {
       onToggleCollapse(cell.index, e);
     }, [
@@ -8277,7 +8600,6 @@ let __tla = (async () => {
         }),
         isExpanded && jsx(CellHandles, {
           cell,
-          branchIndex,
           color: isThenRow ? BRANCH_COLORS.yes : color
         })
       ]
@@ -8366,7 +8688,6 @@ let __tla = (async () => {
           className: "vertical-cell-body",
           children: data.cells.map((cell) => jsx(CellRow, {
             cell,
-            cells: data.cells,
             collapsedIndices,
             color,
             onToggleCollapse: toggleCellCollapse
@@ -8375,11 +8696,232 @@ let __tla = (async () => {
       ]
     });
   });
+  const STRUCTURE_COLOR = "#64748B";
+  const LINE_HEIGHT = 18;
+  const HEADER_HEIGHT = 32;
+  const BODY_PADDING = 8;
+  const StructureNode = memo(function StructureNode2({ id, data, selected }) {
+    const debugClassName = useDebugClassName(id);
+    const toggleNodeCollapse = useNodeCollapse(id);
+    const isCollapsed = data.collapsed ?? false;
+    const expressionElements = useMemo(() => data.elements.filter((e) => e.type === "expression"), [
+      data.elements
+    ]);
+    const hasExpressions = expressionElements.length > 0;
+    const expressionLineNumbers = 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 jsxs("div", {
+      className: `structure-node ${selected ? "selected" : ""} ${isCollapsed ? "collapsed" : ""} ${debugClassName}`,
+      style: {
+        borderColor: STRUCTURE_COLOR,
+        backgroundColor: `${STRUCTURE_COLOR}10`
+      },
+      children: [
+        jsx(NodeDebugBubble, {
+          nodeId: id,
+          position: "top"
+        }),
+        jsx(NodeInputHandles, {
+          nodeId: id,
+          color: STRUCTURE_COLOR
+        }),
+        jsxs("div", {
+          className: "structure-node-header",
+          style: {
+            backgroundColor: STRUCTURE_COLOR
+          },
+          children: [
+            jsx("span", {
+              className: "structure-node-icon",
+              children: jsx(Icon, {
+                name: data.isArray ? "list" : "braces",
+                size: 14
+              })
+            }),
+            jsx("span", {
+              className: "structure-node-label",
+              children: data.isArray ? "Array" : "Object"
+            }),
+            hasExpressions && jsx(CollapseToggleButton, {
+              isCollapsed,
+              onClick: toggleNodeCollapse
+            })
+          ]
+        }),
+        isCollapsed ? jsx("div", {
+          className: "structure-node-body collapsed-body",
+          children: jsx("div", {
+            className: "expression-text",
+            children: jsx(ExpressionSyntax, {
+              text: data.expressionText || "..."
+            })
+          })
+        }) : jsx("div", {
+          className: "structure-node-body",
+          children: 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 jsx(Handle, {
+            type: "source",
+            position: Position.Right,
+            id: `branch-${idx}`,
+            className: "structure-branch-handle",
+            style: {
+              background: "#3B82F6",
+              top: `${topPosition}px`,
+              right: "-4px"
+            }
+          }, `branch-${idx}`);
+        })
+      ]
+    });
+  });
+  function FormattedJson({ json: json2, elements }) {
+    const expressionElements = elements.filter((e) => e.type === "expression").sort((a, b) => a.startOffset - b.startOffset);
+    if (expressionElements.length === 0) {
+      return jsx(JsonSyntax, {
+        text: json2
+      });
+    }
+    const parts = [];
+    let lastEnd = 0;
+    let markerIndex = 0;
+    for (const element of expressionElements) {
+      if (element.startOffset > lastEnd) {
+        const textBefore = json2.slice(lastEnd, element.startOffset);
+        parts.push(jsx(JsonSyntax, {
+          text: textBefore
+        }, `text-${lastEnd}`));
+      }
+      parts.push(jsx("span", {
+        className: "structure-expression-marker",
+        children: element.key || `[${markerIndex}]`
+      }, `marker-${markerIndex}`));
+      lastEnd = element.endOffset;
+      markerIndex++;
+    }
+    if (lastEnd < json2.length) {
+      parts.push(jsx(JsonSyntax, {
+        text: json2.slice(lastEnd)
+      }, `text-${lastEnd}`));
+    }
+    return jsx(Fragment, {
+      children: parts
+    });
+  }
+  function JsonSyntax({ text }) {
+    const highlighted = highlightJson(text);
+    return jsx(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(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(jsx("span", {
+          className: "json-syntax-number",
+          children: num
+        }, `num-${i}`));
+        continue;
+      }
+      if (text.slice(i, i + 4) === "true") {
+        result.push(jsx("span", {
+          className: "json-syntax-boolean-true",
+          children: "true"
+        }, `bool-${i}`));
+        i += 4;
+        continue;
+      }
+      if (text.slice(i, i + 5) === "false") {
+        result.push(jsx("span", {
+          className: "json-syntax-boolean-false",
+          children: "false"
+        }, `bool-${i}`));
+        i += 5;
+        continue;
+      }
+      if (text.slice(i, i + 4) === "null") {
+        result.push(jsx("span", {
+          className: "json-syntax-null",
+          children: "null"
+        }, `null-${i}`));
+        i += 4;
+        continue;
+      }
+      if (/[{}[\]:,]/.test(char)) {
+        result.push(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) {
     if (cell.branchId) target.add(cell.branchId);
@@ -8443,6 +8985,79 @@ let __tla = (async () => {
     });
     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, play, pause, reset, stepForward, stepBackward, goToStep, setSpeed } = useDebuggerContext();
     const { steps, currentStepIndex, playbackState, playbackSpeed } = state;
@@ -8639,15 +9254,12 @@ let __tla = (async () => {
   function DataLogicEditorInner({ initialNodes, initialEdges, readOnly, evaluationResults, theme, showDebugger }) {
     const bgColor = theme === "dark" ? "#404040" : "#cccccc";
     const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+    const [, , onEdgesChange] = useEdgesState(initialEdges);
     useEffect(() => {
       setNodes(initialNodes);
-      setEdges(initialEdges);
     }, [
       initialNodes,
-      initialEdges,
-      setNodes,
-      setEdges
+      setNodes
     ]);
     const hiddenNodeIds = useMemo(() => getHiddenNodeIds(nodes), [
       nodes
@@ -8659,8 +9271,11 @@ let __tla = (async () => {
       nodes,
       hiddenNodeIds
     ]);
-    const visibleEdges = useMemo(() => edges.filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target) && !hiddenNodeIds.has(edge.source) && !hiddenNodeIds.has(edge.target)), [
-      edges,
+    const currentEdges = useMemo(() => buildEdgesFromNodes(nodes), [
+      nodes
+    ]);
+    const visibleEdges = useMemo(() => currentEdges.filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target) && !hiddenNodeIds.has(edge.source) && !hiddenNodeIds.has(edge.target)), [
+      currentEdges,
       nodeIds,
       hiddenNodeIds
     ]);
@@ -8719,20 +9334,24 @@ let __tla = (async () => {
       })
     });
   }
-  DataLogicEditor = function({ value, onChange: _onChange, data, mode = "visualize", theme: themeProp, className = "" }) {
+  DataLogicEditor = function({ value, onChange: _onChange, data, mode = "visualize", theme: themeProp, className = "", preserveStructure = false }) {
+    var _a;
     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.");
     }
     const systemTheme = useSystemTheme();
     const resolvedTheme = themeProp ?? systemTheme;
-    const { ready: wasmReady, evaluate, evaluateWithTrace } = useWasmEvaluator();
+    const { ready: wasmReady, evaluate, evaluateWithTrace } = 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}-${((_a = editor.nodes[0]) == null ? void 0 : _a.id) ?? "empty"}`;
     const fallbackResults = useDebugEvaluation({
       nodes: editor.nodes,
       data,
@@ -8760,7 +9379,7 @@ let __tla = (async () => {
       });
     }
     const showDebugger = debugEnabled && editor.usingTraceMode && editor.steps.length > 0;
-    const readOnly = mode !== "edit";
+    const readOnly = false;
     const editorInner = jsx(DataLogicEditorInner, {
       initialNodes: editor.nodes,
       initialEdges: editor.edges,