wyreframe 0.7.5 → 0.7.7

package/package.json

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

package/src/parser/Detector/BoxTracer.mjs

@@ -153,17 +153,30 @@ function traceBox(grid, topLeft) {
       };
     }
     let nextRow = topLeft.row + 1 | 0;
+    let prevRow = topLeft.row - 1 | 0;
+    let isMiddleDivider;
+    if (prevRow >= 0) {
+      let prevLeftPos = Types.Position.make(prevRow, topLeft.col);
+      let prevRightPos = Types.Position.make(prevRow, topRightOpt.col);
+      let leftChar = Grid.get(grid, prevLeftPos);
+      let rightChar = Grid.get(grid, prevRightPos);
+      isMiddleDivider = leftChar === "VLine" && typeof leftChar !== "object" ? rightChar === "VLine" && typeof rightChar !== "object" : false;
+    } else {
+      isMiddleDivider = false;
+    }
     let isValidTopEdge;
-    if (nextRow < grid.height) {
+    if (isMiddleDivider || nextRow >= grid.height) {
+      isValidTopEdge = false;
+    } else {
       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) {
+      let leftChar$1 = Grid.get(grid, nextLeftPos);
+      let rightChar$1 = Grid.get(grid, nextRightPos);
+      if (leftChar$1 !== undefined && typeof leftChar$1 !== "object") {
+        switch (leftChar$1) {
           case "Corner" :
-            if (rightChar !== undefined && typeof rightChar !== "object") {
-              switch (rightChar) {
+            if (rightChar$1 !== undefined && typeof rightChar$1 !== "object") {
+              switch (rightChar$1) {
                 case "Corner" :
                   isValidTopEdge = false;
                   break;
@@ -175,8 +188,8 @@ function traceBox(grid, topLeft) {
             }
             break;
           case "VLine" :
-            if (rightChar !== undefined && typeof rightChar !== "object") {
-              switch (rightChar) {
+            if (rightChar$1 !== undefined && typeof rightChar$1 !== "object") {
+              switch (rightChar$1) {
                 default:
                   isValidTopEdge = true;
               }
@@ -190,8 +203,6 @@ function traceBox(grid, topLeft) {
       } else {
         isValidTopEdge = true;
       }
-    } else {
-      isValidTopEdge = false;
     }
     if (!isValidTopEdge) {
       return {

package/src/parser/Detector/BoxTracer.res

@@ -237,8 +237,38 @@ let traceBox = (grid: Grid.t, topLeft: Position.t): traceResult => {
           // 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.
+          //
+          // Issue #20 fix: Also check if this corner is a MIDDLE divider of a table.
+          // A middle divider has VLine characters in the PREVIOUS row at both corners.
+          // Example table structure:
+          //   +-----------+-----------+    <- Row 3: Top edge (valid)
+          //   |  Header1  |  Header2  |    <- Row 4: Content row
+          //   +-----------+-----------+    <- Row 5: Middle divider (INVALID as top edge)
+          //   |  Cell 1   |  Cell 2   |    <- Row 6: Content row
+          //   +-----------+-----------+    <- Row 7: Bottom edge
+          // Row 5 has VLines in both previous (row 4) AND next (row 6) rows,
+          // so it's a middle divider, not a valid top edge.
           let nextRow = topLeft.row + 1
-          let isValidTopEdge = if nextRow < grid.height {
+          let prevRow = topLeft.row - 1
+
+          // Check if previous row has VLines at both corners (indicates middle divider)
+          let isMiddleDivider = if prevRow >= 0 {
+            let prevLeftPos = Position.make(prevRow, topLeft.col)
+            let prevRightPos = Position.make(prevRow, topRight.col)
+            let leftChar = Grid.get(grid, prevLeftPos)
+            let rightChar = Grid.get(grid, prevRightPos)
+            // If previous row has VLine at BOTH positions, this is a middle divider
+            switch (leftChar, rightChar) {
+            | (Some(VLine), Some(VLine)) => true  // Previous row has content = middle divider
+            | _ => false
+            }
+          } else {
+            false  // No previous row = could be valid top edge
+          }
+
+          let isValidTopEdge = if isMiddleDivider {
+            false  // Middle dividers are not valid top edges
+          } else if nextRow < grid.height {
             let nextLeftPos = Position.make(nextRow, topLeft.col)
             let nextRightPos = Position.make(nextRow, topRight.col)
             let leftChar = Grid.get(grid, nextLeftPos)

package/src/parser/Semantic/SemanticParser.mjs

@@ -577,6 +577,40 @@ function stripSectionBorders(line) {
   }
 }
 
+function getSegmentWidth(segment) {
+  switch (segment.TAG) {
+    case "ButtonSegment" :
+      return segment._0.length + 4 | 0;
+    case "TextSegment" :
+    case "LinkSegment" :
+      return segment._0.length;
+  }
+}
+
+function getSegmentOffset(segment) {
+  return segment._1;
+}
+
+function calculateRowAlignment(segments, baseCol, row, bounds) {
+  let match = segments[0];
+  let match$1 = segments[segments.length - 1 | 0];
+  if (match === undefined) {
+    return "Left";
+  }
+  if (match$1 === undefined) {
+    return "Left";
+  }
+  let firstOffset = getSegmentOffset(match);
+  let startCol = baseCol + firstOffset | 0;
+  let lastOffset = getSegmentOffset(match$1);
+  let lastWidth = getSegmentWidth(match$1);
+  let endCol = (baseCol + lastOffset | 0) + lastWidth | 0;
+  let rowWidth = endCol - startCol | 0;
+  let virtualContent = "x".repeat(rowWidth);
+  let position = Types.Position.make(row, startCol);
+  return AlignmentCalc.calculate(virtualContent, position, bounds);
+}
+
 function segmentToElement(segment, basePosition, baseCol, bounds) {
   switch (segment.TAG) {
     case "TextSegment" :
@@ -667,39 +701,43 @@ function parseContentLine(line, lineIndex, contentStartRow, box, registry) {
   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$1, box.bounds));
+    let trimmedStart = line.trimStart();
+    let leadingSpaces = line.length - trimmedStart.length | 0;
+    let actualBaseCol = baseCol$1 + leadingSpaces | 0;
+    let rowChildren = segments.map(segment => segmentToElement(segment, basePosition, actualBaseCol, box.bounds));
+    let rowAlign = calculateRowAlignment(segments, actualBaseCol, row$1, box.bounds);
     return {
       TAG: "Row",
       children: rowChildren,
-      align: "Left"
+      align: rowAlign
     };
   }
   if (segments.length === 1) {
-    let trimmedStart = line.trimStart();
-    let leadingSpaces = line.length - trimmedStart.length | 0;
+    let trimmedStart$1 = line.trimStart();
+    let leadingSpaces$1 = line.length - trimmedStart$1.length | 0;
     let match = segments[0];
     if (match !== undefined) {
       switch (match.TAG) {
         case "TextSegment" :
           break;
         case "ButtonSegment" :
-          let actualCol = (baseCol$1 + leadingSpaces | 0) + match._1 | 0;
+          let actualCol = (baseCol$1 + leadingSpaces$1 | 0) + match._1 | 0;
           let position$1 = Types.Position.make(row$1, actualCol);
           let buttonContent = "[ " + match._0 + " ]";
           return ParserRegistry.parse(registry, buttonContent, position$1, box.bounds);
         case "LinkSegment" :
-          let actualCol$1 = (baseCol$1 + leadingSpaces | 0) + match._1 | 0;
+          let actualCol$1 = (baseCol$1 + leadingSpaces$1 | 0) + match._1 | 0;
           let position$2 = Types.Position.make(row$1, actualCol$1);
           let linkContent = "\"" + match._0 + "\"";
           return ParserRegistry.parse(registry, linkContent, position$2, box.bounds);
       }
     }
-    let position$3 = Types.Position.make(row$1, baseCol$1 + leadingSpaces | 0);
+    let position$3 = Types.Position.make(row$1, baseCol$1 + leadingSpaces$1 | 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$4 = Types.Position.make(row$1, baseCol$1 + leadingSpaces$1 | 0);
+  let trimmedStart$2 = line.trimStart();
+  let leadingSpaces$2 = line.length - trimmedStart$2.length | 0;
+  let position$4 = Types.Position.make(row$1, baseCol$1 + leadingSpaces$2 | 0);
   return ParserRegistry.parse(registry, trimmed, position$4, box.bounds);
 }
 
@@ -1003,6 +1041,9 @@ export {
   extractSectionName,
   isSectionFooter,
   stripSectionBorders,
+  getSegmentWidth,
+  getSegmentOffset,
+  calculateRowAlignment,
   segmentToElement,
   isNoiseText,
   parseContentLine,

package/src/parser/Semantic/SemanticParser.res

@@ -955,6 +955,76 @@ let stripSectionBorders = (line: string): string => {
  *
  * Requirements: REQ-15 (Element parsing and AST generation)
  */
+/**
+ * Get the visual width of an inline segment.
+ * - ButtonSegment: "[ text ]" = text length + 4
+ * - LinkSegment: just the text length
+ * - TextSegment: just the text length
+ */
+let getSegmentWidth = (segment: inlineSegment): int => {
+  switch segment {
+  | TextSegment(text, _) => String.length(text)
+  | ButtonSegment(text, _) => String.length(text) + 4 // "[ " + text + " ]"
+  | LinkSegment(text, _) => String.length(text)
+  }
+}
+
+/**
+ * Get the column offset of an inline segment.
+ */
+let getSegmentOffset = (segment: inlineSegment): int => {
+  switch segment {
+  | TextSegment(_, offset) => offset
+  | ButtonSegment(_, offset) => offset
+  | LinkSegment(_, offset) => offset
+  }
+}
+
+/**
+ * Calculate the alignment for a Row element based on the combined span
+ * of all its segments within the container bounds.
+ *
+ * Algorithm:
+ * 1. Find the start position of the first segment
+ * 2. Find the end position of the last segment (offset + width)
+ * 3. Calculate the total content span
+ * 4. Use AlignmentCalc to determine alignment based on left/right space
+ *
+ * @param segments - Array of inline segments in the row
+ * @param baseCol - The base column (left border + 1)
+ * @param row - The row number in the grid
+ * @param bounds - The container bounds
+ * @returns The calculated alignment for the Row
+ */
+let calculateRowAlignment = (
+  segments: array<inlineSegment>,
+  baseCol: int,
+  row: int,
+  bounds: Bounds.t,
+): Types.alignment => {
+  switch (segments->Array.get(0), segments->Array.get(Array.length(segments) - 1)) {
+  | (Some(firstSegment), Some(lastSegment)) => {
+      // Calculate the start position (first segment's offset)
+      let firstOffset = getSegmentOffset(firstSegment)
+      let startCol = baseCol + firstOffset
+
+      // Calculate the end position (last segment's offset + width)
+      let lastOffset = getSegmentOffset(lastSegment)
+      let lastWidth = getSegmentWidth(lastSegment)
+      let endCol = baseCol + lastOffset + lastWidth
+
+      // Create a virtual content string with length equal to the row span
+      let rowWidth = endCol - startCol
+      let virtualContent = String.repeat("x", rowWidth)
+
+      // Use AlignmentCalc to calculate alignment based on position
+      let position = Position.make(row, startCol)
+      AlignmentCalc.calculate(virtualContent, position, bounds)
+    }
+  | _ => Left // Fallback to Left if no segments
+  }
+}
+
 /**
  * Convert inline segment to element.
  * Creates appropriate element type based on segment variant.
@@ -1119,13 +1189,22 @@ let parseContentLine = (
 
     if segments->Array.length > 1 {
       // Multiple segments - create a Row with all elements
-      // Each segment has its own column offset for correct alignment calculation
+      // Issue #21: Account for leading spaces in the original line for correct alignment
+      let leadingSpaces = {
+        let original = line
+        let trimmedStart = original->String.trimStart
+        original->String.length - trimmedStart->String.length
+      }
+      // Calculate actual column including leading spaces
+      let actualBaseCol = baseCol + leadingSpaces
       let rowChildren = segments->Array.map(segment => {
-        segmentToElement(segment, basePosition, baseCol, box.bounds)
+        segmentToElement(segment, basePosition, actualBaseCol, box.bounds)
       })
+      // Issue #21: Calculate Row alignment based on combined segment positions
+      let rowAlign = calculateRowAlignment(segments, actualBaseCol, row, box.bounds)
       Some(Row({
         children: rowChildren,
-        align: Left,
+        align: rowAlign,
       }))
     } else if segments->Array.length === 1 {
       // Single segment - check if it's a special element