wyreframe 0.7.1 → 0.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wyreframe",
-  "version": "0.7.1",
+  "version": "0.7.4",
   "description": "ASCII wireframe + interaction DSL to HTML converter with scene transitions",
   "author": "wickedev",
   "repository": {

package/src/index.test.ts

@@ -352,9 +352,9 @@ describe('mixed text and link content (Issue #14)', () => {
     const wireframe = `
 @scene: test
 
-+------------------------------------+
-|  Please "click here" to continue  |
-+------------------------------------+
++---------------------------------+
+| Please "click here" to continue |
++---------------------------------+
 `;
 
     const result = parse(wireframe);

package/src/parser/Core/Types.mjs

@@ -402,6 +402,8 @@ function getElementType(elem) {
       return "Text";
     case "Divider" :
       return "Divider";
+    case "Spacer" :
+      return "Spacer";
     case "Row" :
       return "Row";
     case "Section" :

package/src/parser/Core/Types.res

@@ -180,6 +180,9 @@ and element =
   | Divider({
       position: Position.t,
     })
+  | Spacer({
+      position: Position.t,
+    })
   | Row({
       children: array<element>,
       align: alignment,
@@ -284,6 +287,7 @@ let getElementType = (elem: element): string => {
   | Checkbox(_) => "Checkbox"
   | Text(_) => "Text"
   | Divider(_) => "Divider"
+  | Spacer(_) => "Spacer"
   | Row(_) => "Row"
   | Section(_) => "Section"
   }

package/src/parser/Detector/BoxTracer.mjs

@@ -87,7 +87,24 @@ function findBottomRightCorner(grid, topLeft, topRight) {
       switch (match) {
         case "Corner" :
           lastCorner = pos;
-          row = row + 1 | 0;
+          let nextRow = row + 1 | 0;
+          if (nextRow < grid.height) {
+            let nextPos = Types.Position.make(nextRow, topRight.col);
+            let match$1 = Grid.get(grid, nextPos);
+            if (match$1 === "Corner" && typeof match$1 !== "object") {
+              let nextLeftPos = Types.Position.make(nextRow, topLeft.col);
+              let match$2 = Grid.get(grid, nextLeftPos);
+              if (match$2 === "Corner" && typeof match$2 !== "object") {
+                $$continue = false;
+              } else {
+                row = row + 1 | 0;
+              }
+            } else {
+              row = row + 1 | 0;
+            }
+          } else {
+            row = row + 1 | 0;
+          }
           break;
         case "VLine" :
           row = row + 1 | 0;
@@ -135,6 +152,57 @@ function traceBox(grid, topLeft) {
         })
       };
     }
+    let nextRow = topLeft.row + 1 | 0;
+    let isValidTopEdge;
+    if (nextRow < grid.height) {
+      let nextLeftPos = Types.Position.make(nextRow, topLeft.col);
+      let nextRightPos = Types.Position.make(nextRow, topRightOpt.col);
+      let leftChar = Grid.get(grid, nextLeftPos);
+      let rightChar = Grid.get(grid, nextRightPos);
+      if (leftChar !== undefined && typeof leftChar !== "object") {
+        switch (leftChar) {
+          case "Corner" :
+            if (rightChar !== undefined && typeof rightChar !== "object") {
+              switch (rightChar) {
+                case "Corner" :
+                  isValidTopEdge = false;
+                  break;
+                default:
+                  isValidTopEdge = true;
+              }
+            } else {
+              isValidTopEdge = true;
+            }
+            break;
+          case "VLine" :
+            if (rightChar !== undefined && typeof rightChar !== "object") {
+              switch (rightChar) {
+                default:
+                  isValidTopEdge = true;
+              }
+            } else {
+              isValidTopEdge = true;
+            }
+            break;
+          default:
+            isValidTopEdge = true;
+        }
+      } else {
+        isValidTopEdge = true;
+      }
+    } else {
+      isValidTopEdge = false;
+    }
+    if (!isValidTopEdge) {
+      return {
+        TAG: "Error",
+        _0: ErrorTypes.makeSimple({
+          TAG: "InvalidElement",
+          content: "Not a valid box top-left corner (adjacent box detected)",
+          position: topLeft
+        })
+      };
+    }
     let topEdgeChars = topEdgeScan.map(param => param[1]);
     if (isDividerOnlyEdge(topEdgeChars)) {
       return {

package/src/parser/Detector/BoxTracer.res

@@ -114,6 +114,7 @@ let rowHasVLineInRange = (grid: Grid.t, row: int, leftCol: int, rightCol: int):
  * - Continues through rows with misaligned VLines (records for warnings)
  * - Stops at rows with no VLine at all in the box's column range (box boundary)
  * - Handles internal dividers (+=====+) correctly by finding the last corner
+ * - IMPORTANT: Stops when detecting vertically adjacent boxes (Issue #18)
  *
  * @param grid - The 2D character grid
  * @param topLeft - Position of top-left corner (for determining left boundary)
@@ -132,7 +133,40 @@ let findBottomRightCorner = (grid: Grid.t, topLeft: Position.t, topRight: Positi
     | Some(Corner) => {
         // Found a corner at the expected column - remember it
         lastCorner := Some(pos)
-        row := row.contents + 1
+
+        // Issue #18 fix: Check if the NEXT row also has a Corner at the same column.
+        // If so, we've found the bottom of THIS box and the top of ANOTHER box.
+        // We should stop scanning here to avoid merging adjacent boxes.
+        let nextRow = row.contents + 1
+        if nextRow < grid.height {
+          let nextPos = Position.make(nextRow, topRight.col)
+          switch Grid.get(grid, nextPos) {
+          | Some(Corner) => {
+              // Next row also has a corner - this indicates adjacent boxes
+              // Also check if the next row starts a new box by checking left column
+              let nextLeftPos = Position.make(nextRow, topLeft.col)
+              switch Grid.get(grid, nextLeftPos) {
+              | Some(Corner) => {
+                  // Both corners present in next row = new box starting
+                  // Stop scanning - current corner is our bottom-right
+                  continue := false
+                }
+              | _ => {
+                  // Only right corner in next row - might be internal structure
+                  // Continue scanning
+                  row := row.contents + 1
+                }
+              }
+            }
+          | _ => {
+              // Next row doesn't have a corner - continue normally
+              row := row.contents + 1
+            }
+          }
+        } else {
+          // No more rows - we're done
+          row := row.contents + 1
+        }
       }
     | Some(VLine) => {
         // Found a VLine at the expected column - continue scanning
@@ -198,6 +232,41 @@ let traceBox = (grid: Grid.t, topLeft: Position.t): traceResult => {
           ),
         )
       | Some(topRight) => {
+          // Issue #18 fix: Validate this is a TRUE top edge, not a bottom edge
+          // of another box. A valid top edge should have VLine characters (|)
+          // in the next row at the left and right columns, NOT Corner characters (+).
+          // If the next row has corners at both positions, this is likely the
+          // bottom edge of one box immediately followed by the top edge of another.
+          let nextRow = topLeft.row + 1
+          let isValidTopEdge = if nextRow < grid.height {
+            let nextLeftPos = Position.make(nextRow, topLeft.col)
+            let nextRightPos = Position.make(nextRow, topRight.col)
+            let leftChar = Grid.get(grid, nextLeftPos)
+            let rightChar = Grid.get(grid, nextRightPos)
+            // Valid top edge: next row has VLine on both sides (content row)
+            // Invalid: next row has Corner on both sides (another box edge)
+            switch (leftChar, rightChar) {
+            | (Some(Corner), Some(Corner)) => false  // This is a bottom edge, not a top
+            | (Some(VLine), Some(VLine)) => true     // This is a valid top edge
+            | (Some(VLine), Some(Corner)) => true    // Could be valid with internal structure
+            | (Some(Corner), Some(VLine)) => true    // Could be valid with internal structure
+            | _ => true  // Be permissive for other cases
+            }
+          } else {
+            false  // No next row means this can't be a valid box top
+          }
+
+          if !isValidTopEdge {
+            // This corner is likely a bottom edge of another box, not a valid top-left
+            Error(
+              ErrorTypes.makeSimple(
+                ErrorTypes.InvalidElement({
+                  content: "Not a valid box top-left corner (adjacent box detected)",
+                  position: topLeft,
+                }),
+              ),
+            )
+          } else {
           // Step 3: Extract box name from top edge
           let topEdgeChars = Array.map(topEdgeScan, ((_, cell)) => cell)
 
@@ -427,6 +496,7 @@ let traceBox = (grid: Grid.t, topLeft: Position.t): traceResult => {
           }
         }
       } // Close else block for isDividerOnlyEdge
+      } // Close else block for isValidTopEdge
       }
     }
   | _ =>

package/src/parser/Interactions/InteractionMerger.res

@@ -61,6 +61,7 @@ let rec collectElementIds = (element: element): Belt.Set.String.t => {
   | Checkbox(_) => ids // Checkboxes don't have explicit IDs
   | Text(_) => ids // Text elements don't have explicit IDs
   | Divider(_) => ids // Dividers don't have IDs
+  | Spacer(_) => ids // Spacers don't have IDs
   | Row({children}) => {
       children->Array.reduce(ids, (acc, child) => {
         Belt.Set.String.union(acc, collectElementIds(child))
@@ -337,6 +338,7 @@ let rec attachInteractionsToElement = (
   | Checkbox(_) as el => el
   | Text(_) as el => el
   | Divider(_) as el => el
+  | Spacer(_) as el => el
   }
 }
 

package/src/parser/Semantic/SemanticParser.mjs

@@ -623,17 +623,40 @@ function segmentToElement(segment, basePosition, baseCol, bounds) {
   }
 }
 
+function isNoiseText(content) {
+  let trimmed = content.trim();
+  if (trimmed === "") {
+    return false;
+  }
+  let borderPattern = /^[+|=\-\s]+$/;
+  let hasPipeOrPlus = /[+|]/;
+  if (borderPattern.test(trimmed)) {
+    return true;
+  } else {
+    return hasPipeOrPlus.test(trimmed);
+  }
+}
+
 function parseContentLine(line, lineIndex, contentStartRow, box, registry) {
   let trimmed = line.trim();
   if (trimmed === "") {
+    let row = contentStartRow + lineIndex | 0;
+    let baseCol = box.bounds.left + 1 | 0;
+    let position = Types.Position.make(row, baseCol);
+    return {
+      TAG: "Spacer",
+      position: position
+    };
+  }
+  if (isNoiseText(trimmed)) {
     return;
   }
-  let row = contentStartRow + lineIndex | 0;
-  let baseCol = box.bounds.left + 1 | 0;
-  let basePosition = Types.Position.make(row, baseCol);
+  let row$1 = contentStartRow + lineIndex | 0;
+  let baseCol$1 = box.bounds.left + 1 | 0;
+  let basePosition = Types.Position.make(row$1, baseCol$1);
   let segments = splitInlineSegments(trimmed);
   if (segments.length > 1) {
-    let rowChildren = segments.map(segment => segmentToElement(segment, basePosition, baseCol, box.bounds));
+    let rowChildren = segments.map(segment => segmentToElement(segment, basePosition, baseCol$1, box.bounds));
     return {
       TAG: "Row",
       children: rowChildren,
@@ -649,24 +672,24 @@ function parseContentLine(line, lineIndex, contentStartRow, box, registry) {
         case "TextSegment" :
           break;
         case "ButtonSegment" :
-          let actualCol = (baseCol + leadingSpaces | 0) + match._1 | 0;
-          let position = Types.Position.make(row, actualCol);
+          let actualCol = (baseCol$1 + leadingSpaces | 0) + match._1 | 0;
+          let position$1 = Types.Position.make(row$1, actualCol);
           let buttonContent = "[ " + match._0 + " ]";
-          return ParserRegistry.parse(registry, buttonContent, position, box.bounds);
+          return ParserRegistry.parse(registry, buttonContent, position$1, box.bounds);
         case "LinkSegment" :
-          let actualCol$1 = (baseCol + leadingSpaces | 0) + match._1 | 0;
-          let position$1 = Types.Position.make(row, actualCol$1);
+          let actualCol$1 = (baseCol$1 + leadingSpaces | 0) + match._1 | 0;
+          let position$2 = Types.Position.make(row$1, actualCol$1);
           let linkContent = "\"" + match._0 + "\"";
-          return ParserRegistry.parse(registry, linkContent, position$1, box.bounds);
+          return ParserRegistry.parse(registry, linkContent, position$2, box.bounds);
       }
     }
-    let position$2 = Types.Position.make(row, baseCol + leadingSpaces | 0);
-    return ParserRegistry.parse(registry, trimmed, position$2, box.bounds);
+    let position$3 = Types.Position.make(row$1, baseCol$1 + leadingSpaces | 0);
+    return ParserRegistry.parse(registry, trimmed, position$3, box.bounds);
   }
   let trimmedStart$1 = line.trimStart();
   let leadingSpaces$1 = line.length - trimmedStart$1.length | 0;
-  let position$3 = Types.Position.make(row, baseCol + leadingSpaces$1 | 0);
-  return ParserRegistry.parse(registry, trimmed, position$3, box.bounds);
+  let position$4 = Types.Position.make(row$1, baseCol$1 + leadingSpaces$1 | 0);
+  return ParserRegistry.parse(registry, trimmed, position$4, box.bounds);
 }
 
 function parseBoxContent(box, gridCells, registry) {
@@ -831,6 +854,7 @@ function getElementRow(_elem) {
       case "Box" :
         return elem.bounds.top;
       case "Divider" :
+      case "Spacer" :
         return elem.position.row;
       case "Row" :
         let child = elem.children[0];
@@ -969,6 +993,7 @@ export {
   isSectionFooter,
   stripSectionBorders,
   segmentToElement,
+  isNoiseText,
   parseContentLine,
   parseBoxContent,
   getBoxColumn,

package/src/parser/Semantic/SemanticParser.res

@@ -1049,9 +1049,29 @@ let segmentToElement = (
   }
 }
 
+/**
+ * Noise text filter - filters out box border characters.
+ * This identifies text that is part of ASCII art borders, not actual content.
+ * Examples: "|", "+---+", "===", etc.
+ */
+let isNoiseText = (content: string): bool => {
+  let trimmed = content->String.trim
+  if trimmed === "" {
+    // Empty lines are not noise - they become Spacer elements
+    false
+  } else {
+    // Box border patterns: +---+, |, ===, etc.
+    let borderPattern = %re("/^[+|=\-\s]+$/")
+    let hasPipeOrPlus = %re("/[+|]/")
+
+    Js.Re.test_(borderPattern, trimmed) || Js.Re.test_(hasPipeOrPlus, trimmed)
+  }
+}
+
 /**
  * Parse a single content line into an element.
  * Handles buttons, links, inline elements, and regular text.
+ * Filters out noise (border characters) and creates Spacer for empty lines.
  */
 let parseContentLine = (
   line: string,
@@ -1062,8 +1082,14 @@ let parseContentLine = (
 ): option<element> => {
   let trimmed = line->String.trim
 
-  // Skip empty lines
+  // Issue #16: Preserve empty lines as Spacer elements for vertical spacing
   if trimmed === "" {
+    let row = contentStartRow + lineIndex
+    let baseCol = box.bounds.left + 1
+    let position = Position.make(row, baseCol)
+    Some(Spacer({position: position}))
+  } else if isNoiseText(trimmed) {
+    // Filter out border/noise text - don't create any element
     None
   } else {
     // Calculate position in grid
@@ -1349,6 +1375,7 @@ let rec getElementRow = (elem: element): int => {
   | Checkbox({position, _}) => position.row
   | Text({position, _}) => position.row
   | Divider({position}) => position.row
+  | Spacer({position}) => position.row
   | Row({children, _}) => {
       // Use the first child's row position
       switch children->Array.get(0) {

package/src/renderer/Renderer.mjs

@@ -42,6 +42,7 @@ let defaultStyles = `
   .wf-row .wf-link { display:inline; margin:0 8px; }
   .wf-text { margin:4px 0; line-height:1.4; }
   .wf-text.emphasis { font-weight:bold; }
+  .wf-spacer { min-height:1em; }
   .wf-divider { border:none; border-top:1px solid #333; margin:12px 0; }
   .wf-section { border:1px solid #333; margin:8px 0; }
   .wf-section-header { background:#fff; padding:4px 8px; font-size:12px; color:#666; border-bottom:1px solid #333; }
@@ -55,20 +56,6 @@ let defaultStyles = `
   .wf-button.align-right, .wf-link.align-right { margin-left:auto; margin-right:0; }
 `;
 
-function isNoiseText(content) {
-  let trimmed = content.trim();
-  if (trimmed === "") {
-    return false;
-  }
-  let borderPattern = /^[+|=\-\s]+$/;
-  let hasPipeOrPlus = /[+|]/;
-  if (borderPattern.test(trimmed)) {
-    return true;
-  } else {
-    return hasPipeOrPlus.test(trimmed);
-  }
-}
-
 function isInputOnlyBox(elem) {
   if (elem.TAG !== "Box") {
     return false;
@@ -253,22 +240,22 @@ function renderElement(_elem, onAction, onDeadEnd) {
         labelEl.appendChild(span);
         return Primitive_option.some(labelEl);
       case "Text" :
-        let content = elem.content;
-        if (isNoiseText(content)) {
-          return;
-        }
         let p = document.createElement("p");
         p.className = "wf-text";
         if (elem.emphasis) {
           p.classList.add("emphasis");
         }
         applyAlignment(p, elem.align);
-        p.textContent = content;
+        p.textContent = elem.content;
         return Primitive_option.some(p);
       case "Divider" :
         let hr = document.createElement("hr");
         hr.className = "wf-divider";
         return Primitive_option.some(hr);
+      case "Spacer" :
+        let spacer = document.createElement("div");
+        spacer.className = "wf-spacer";
+        return Primitive_option.some(spacer);
       case "Row" :
         let row = document.createElement("div");
         row.className = "wf-row";
@@ -574,7 +561,6 @@ export {
   DomBindings,
   defaultOptions,
   defaultStyles,
-  isNoiseText,
   isInputOnlyBox,
   getInputsFromBox,
   alignmentToClass,

package/src/renderer/Renderer.res

@@ -154,6 +154,7 @@ let defaultStyles = `
   .wf-row .wf-link { display:inline; margin:0 8px; }
   .wf-text { margin:4px 0; line-height:1.4; }
   .wf-text.emphasis { font-weight:bold; }
+  .wf-spacer { min-height:1em; }
   .wf-divider { border:none; border-top:1px solid #333; margin:12px 0; }
   .wf-section { border:1px solid #333; margin:8px 0; }
   .wf-section-header { background:#fff; padding:4px 8px; font-size:12px; color:#666; border-bottom:1px solid #333; }
@@ -171,23 +172,6 @@ let defaultStyles = `
 // Helper Functions
 // ============================================================================
 
-// Noise text filter - filters out box border characters
-// Note: Empty lines are NOT noise - they represent intentional vertical spacing (Issue #16)
-let isNoiseText = (content: string): bool => {
-  let trimmed = content->String.trim
-  if trimmed == "" {
-    // Empty lines should be preserved as vertical spacing
-    false
-  } else {
-    // Box border patterns: +---+, |, ===, etc.
-    let borderPattern = %re("/^[+|=\-\s]+$/")
-    let hasPipeOrPlus = %re("/[+|]/")
-
-    Js.Re.test_(borderPattern, trimmed) ||
-    Js.Re.test_(hasPipeOrPlus, trimmed)
-  }
-}
-
 // Check if a box contains only inputs (should unwrap and render as inputs directly)
 let isInputOnlyBox = (elem: element): bool => {
   switch elem {
@@ -425,19 +409,15 @@ let rec renderElement = (
     }
 
   | Text({content, emphasis, align, _}) => {
-      // Filter noise text (box borders, etc.)
-      if isNoiseText(content) {
-        None
-      } else {
-        let p = DomBindings.document->DomBindings.createElement("p")
-        p->DomBindings.setClassName("wf-text")
-        if emphasis {
-          p->DomBindings.classList->DomBindings.add("emphasis")
-        }
-        applyAlignment(p, align)
-        p->DomBindings.setTextContent(content)
-        Some(p)
+      // Note: Noise filtering is now done in SemanticParser
+      let p = DomBindings.document->DomBindings.createElement("p")
+      p->DomBindings.setClassName("wf-text")
+      if emphasis {
+        p->DomBindings.classList->DomBindings.add("emphasis")
       }
+      applyAlignment(p, align)
+      p->DomBindings.setTextContent(content)
+      Some(p)
     }
 
   | Divider(_) => {
@@ -446,6 +426,12 @@ let rec renderElement = (
       Some(hr)
     }
 
+  | Spacer(_) => {
+      let spacer = DomBindings.document->DomBindings.createElement("div")
+      spacer->DomBindings.setClassName("wf-spacer")
+      Some(spacer)
+    }
+
   | Row({children, align}) => {
       let row = DomBindings.document->DomBindings.createElement("div")
       row->DomBindings.setClassName("wf-row")