wyreframe 0.1.5 → 0.2.0

package/src/parser/Detector/BoxTracer.res

@@ -70,6 +70,90 @@ let isDividerOnlyEdge = (edgeChars: array<cellChar>): bool => {
   !hasHLineOrChar
 }
 
+/**
+ * Find the last Corner character below a given position in the same column.
+ * Simple version used for fallback width mismatch detection.
+ *
+ * @param grid - The 2D character grid
+ * @param startPos - Starting position (searches below this row)
+ * @returns Option of position where the last corner was found
+ */
+let findLastCornerInColumn = (grid: Grid.t, startPos: Position.t): option<Position.t> => {
+  let lastCorner = ref(None)
+  for row in startPos.row + 1 to grid.height - 1 {
+    let pos = Position.make(row, startPos.col)
+    switch Grid.get(grid, pos) {
+    | Some(Corner) => lastCorner := Some(pos)
+    | _ => ()
+    }
+  }
+  lastCorner.contents
+}
+
+/**
+ * Check if a row has any VLine character between left and right columns (inclusive).
+ * Used to determine if a row is part of a box (even with misaligned borders).
+ */
+let rowHasVLineInRange = (grid: Grid.t, row: int, leftCol: int, rightCol: int): bool => {
+  let found = ref(false)
+  let col = ref(leftCol)
+  while col.contents <= rightCol && !found.contents {
+    switch Grid.get(grid, Position.make(row, col.contents)) {
+    | Some(VLine) => found := true
+    | _ => ()
+    }
+    col := col.contents + 1
+  }
+  found.contents
+}
+
+/**
+ * Find the bottom-right corner of a box by scanning down from top-right.
+ *
+ * This is more tolerant than the strict scanDown approach:
+ * - 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
+ *
+ * @param grid - The 2D character grid
+ * @param topLeft - Position of top-left corner (for determining left boundary)
+ * @param topRight - Position of top-right corner (starting point for scan)
+ * @returns Option of position where the bottom-right corner was found
+ */
+let findBottomRightCorner = (grid: Grid.t, topLeft: Position.t, topRight: Position.t): option<Position.t> => {
+  let lastCorner = ref(None)
+  let row = ref(topRight.row + 1)
+  let continue = ref(true)
+
+  while row.contents < grid.height && continue.contents {
+    let pos = Position.make(row.contents, topRight.col)
+
+    switch Grid.get(grid, pos) {
+    | Some(Corner) => {
+        // Found a corner at the expected column - remember it
+        lastCorner := Some(pos)
+        row := row.contents + 1
+      }
+    | Some(VLine) => {
+        // Found a VLine at the expected column - continue scanning
+        row := row.contents + 1
+      }
+    | _ => {
+        // No VLine/Corner at expected column - check if row is part of this box
+        if rowHasVLineInRange(grid, row.contents, topLeft.col, topRight.col) {
+          // Row has a VLine somewhere (misaligned) - continue scanning
+          row := row.contents + 1
+        } else {
+          // No VLine in this row's box range - we've reached the end of the box
+          continue := false
+        }
+      }
+    }
+  }
+
+  lastCorner.contents
+}
+
 /**
  * Trace a box starting from the top-left corner position.
  *
@@ -134,38 +218,22 @@ let traceBox = (grid: Grid.t, topLeft: Position.t): traceResult => {
           // Calculate top width
           let topWidth = topRight.col - topLeft.col
 
-          // Step 4: Scan down from top-right to find bottom-right corner
-          let rightEdgeScan = Grid.scanDown(grid, topRight, isValidVerticalChar)
+          // Step 4: Find bottom-right corner by searching the column
+          // Use tolerant search that ignores interior rows with misaligned VLines
+          let bottomRightOpt = findBottomRightCorner(grid, topLeft, topRight)
 
-          let bottomRightOpt = {
-            let lastCorner = ref(None)
-            Array.forEach(rightEdgeScan, ((pos, cell)) => {
-              switch cell {
-              | Corner if !Position.equals(pos, topRight) => lastCorner := Some(pos)
-              | _ => ()
-              }
-            })
-            lastCorner.contents
-          }
+          // Store rightEdgeScan for later validation (after we know the box is valid)
+          let rightEdgeScan = Grid.scanDown(grid, topRight, isValidVerticalChar)
 
           switch bottomRightOpt {
           | None => {
-              // Right edge scan failed - could be width mismatch
-              // Try tracing from left side to detect width mismatch
-              let leftEdgeScan = Grid.scanDown(grid, topLeft, isValidVerticalChar)
-              let bottomLeftOpt = {
-                let lastCorner = ref(None)
-                Array.forEach(leftEdgeScan, ((pos, cell)) => {
-                  switch cell {
-                  | Corner if !Position.equals(pos, topLeft) => lastCorner := Some(pos)
-                  | _ => ()
-                  }
-                })
-                lastCorner.contents
-              }
+              // No corner found in the right column at topRight.col
+              // Try to detect width mismatch by finding bottom-left via left edge
+              let bottomLeftViaLeft = findLastCornerInColumn(grid, topLeft)
 
-              switch bottomLeftOpt {
+              switch bottomLeftViaLeft {
               | None =>
+                // No bottom-left corner found either - unclosed box
                 Error(
                   ErrorTypes.makeSimple(
                     ErrorTypes.UncloseBox({
@@ -212,7 +280,7 @@ let traceBox = (grid: Grid.t, topLeft: Position.t): traceResult => {
                           ),
                         )
                       } else {
-                        // Widths match but right edge still failed - unclosed box
+                        // Widths match but right edge corners don't align - unclosed box
                         Error(
                           ErrorTypes.makeSimple(
                             ErrorTypes.UncloseBox({
@@ -372,3 +440,80 @@ let traceBox = (grid: Grid.t, topLeft: Position.t): traceResult => {
     )
   }
 }
+
+/**
+ * Validate interior row alignment for a successfully traced box.
+ *
+ * Checks each row between the top and bottom borders to ensure:
+ * - The closing '|' character is at the expected column (bounds.right)
+ * - Generates MisalignedClosingBorder warnings for any misaligned rows
+ *
+ * This validation runs AFTER successful box tracing to detect visual
+ * alignment issues that don't prevent parsing but should be warned about.
+ *
+ * @param grid - The 2D character grid
+ * @param bounds - The bounds of the traced box
+ * @returns Array of warnings for any misaligned closing borders
+ */
+let validateInteriorAlignment = (grid: Grid.t, bounds: Bounds.t): array<ErrorTypes.t> => {
+  let warnings = []
+
+  // Check each interior row (excluding top and bottom border rows)
+  for row in bounds.top + 1 to bounds.bottom - 1 {
+    // Check if there's a VLine at the expected right border column
+    let expectedRightCol = bounds.right
+    let rightCell = Grid.get(grid, Position.make(row, expectedRightCol))
+
+    switch rightCell {
+    | Some(VLine) => () // Properly aligned, no warning needed
+    | Some(_) | None => {
+        // The expected column doesn't have a VLine
+        // Try to find where the actual closing '|' is on this row
+        // Search in both directions from the expected position
+        let actualCol = ref(None)
+
+        // First, search to the RIGHT of expectedRightCol (for pipes beyond the expected boundary)
+        // Search up to 50 chars beyond to catch misaligned pipes
+        let maxSearchRight = expectedRightCol + 50
+        let colRight = ref(expectedRightCol + 1)
+        while colRight.contents <= maxSearchRight && Option.isNone(actualCol.contents) {
+          switch Grid.get(grid, Position.make(row, colRight.contents)) {
+          | Some(VLine) => actualCol := Some(colRight.contents)
+          | _ => ()
+          }
+          colRight := colRight.contents + 1
+        }
+
+        // If not found to the right, search to the LEFT (for pipes before the expected boundary)
+        // But only if it's not the opening pipe (bounds.left)
+        if Option.isNone(actualCol.contents) {
+          let col = ref(expectedRightCol - 1)
+          while col.contents > bounds.left && Option.isNone(actualCol.contents) {
+            switch Grid.get(grid, Position.make(row, col.contents)) {
+            | Some(VLine) => actualCol := Some(col.contents)
+            | _ => ()
+            }
+            col := col.contents - 1
+          }
+        }
+
+        // If we found a VLine at a different position, generate a warning
+        switch actualCol.contents {
+        | Some(foundCol) if foundCol !== expectedRightCol => {
+            let warning = ErrorTypes.makeSimple(
+              ErrorTypes.MisalignedClosingBorder({
+                position: Position.make(row, foundCol),
+                expectedCol: expectedRightCol,
+                actualCol: foundCol,
+              }),
+            )
+            warnings->Array.push(warning)->ignore
+          }
+        | _ => () // No VLine found or it's at the correct position (already handled above)
+        }
+      }
+    }
+  }
+
+  warnings
+}

package/src/parser/Detector/ShapeDetector.mjs

@@ -47,10 +47,16 @@ function detect(grid) {
   let corners = grid.cornerIndex;
   let boxes = [];
   let traceFailures = [];
+  let warnings = [];
   corners.forEach(corner => {
     let box = BoxTracer.traceBox(grid, corner);
     if (box.TAG === "Ok") {
-      boxes.push(box._0);
+      let box$1 = box._0;
+      boxes.push(box$1);
+      let alignmentWarnings = BoxTracer.validateInteriorAlignment(grid, box$1.bounds);
+      alignmentWarnings.forEach(w => {
+        warnings.push(w);
+      });
       return;
     }
     traceFailures.push(box._0);
@@ -59,7 +65,10 @@ function detect(grid) {
     if (corners.length === 0) {
       return {
         TAG: "Ok",
-        _0: []
+        _0: [
+          [],
+          []
+        ]
       };
     } else if (traceFailures.length > 0) {
       return {
@@ -69,7 +78,10 @@ function detect(grid) {
     } else {
       return {
         TAG: "Ok",
-        _0: []
+        _0: [
+          [],
+          []
+        ]
       };
     }
   }
@@ -78,7 +90,10 @@ function detect(grid) {
   if (rootBoxes.TAG === "Ok") {
     return {
       TAG: "Ok",
-      _0: rootBoxes._0
+      _0: [
+        rootBoxes._0,
+        warnings
+      ]
     };
   }
   let parseError = hierarchyErrorToParseError(rootBoxes._0);
@@ -101,26 +116,29 @@ function flattenBoxes(boxes) {
 
 function getStats(result) {
   if (result.TAG === "Ok") {
-    let boxes = result._0;
+    let match = result._0;
+    let boxes = match[0];
     let rootCount = boxes.length;
     let totalCount = countBoxes(boxes);
+    let warningCount = match[1].length;
     return `Shape Detection Success:
   Root boxes: ` + rootCount.toString() + `
-  Total boxes (including nested): ` + totalCount.toString();
+  Total boxes (including nested): ` + totalCount.toString() + `
+  Warnings: ` + warningCount.toString();
   }
   let errors = result._0;
   let errorCount = errors.length;
-  let warningCount = Core__Array.reduce(errors, 0, (acc, err) => {
+  let warningCount$1 = Core__Array.reduce(errors, 0, (acc, err) => {
     if (ErrorTypes.isWarning(err)) {
       return acc + 1 | 0;
     } else {
       return acc;
     }
   });
-  let realErrorCount = errorCount - warningCount | 0;
+  let realErrorCount = errorCount - warningCount$1 | 0;
   return `Shape Detection Failed:
   Errors: ` + realErrorCount.toString() + `
-  Warnings: ` + warningCount.toString();
+  Warnings: ` + warningCount$1.toString();
 }
 
 export {

package/src/parser/Detector/ShapeDetector.res

@@ -19,10 +19,10 @@ open Types
 /**
  * Result type for shape detection.
  * Returns either:
- * - Ok(boxes): Array of root-level boxes with nested hierarchy
+ * - Ok((boxes, warnings)): Array of root-level boxes with nested hierarchy, plus any warnings
  * - Error(errors): Array of all errors encountered during detection
  */
-type detectResult = result<array<BoxTracer.box>, array<ErrorTypes.t>>
+type detectResult = result<(array<BoxTracer.box>, array<ErrorTypes.t>), array<ErrorTypes.t>>
 
 // ============================================================================
 // Helper Functions
@@ -121,12 +121,17 @@ let detect = (grid: Grid.t): detectResult => {
   // Only corners that are actually top-left of a box will trace successfully.
   let boxes = []
   let traceFailures = [] // Keep track of failures
+  let warnings = [] // Collect alignment warnings
 
   corners->Array.forEach(corner => {
     switch BoxTracer.traceBox(grid, corner) {
     | Ok(box) => {
         // Successfully traced a box - add to collection
         boxes->Array.push(box)
+
+        // Validate interior alignment and collect warnings
+        let alignmentWarnings = BoxTracer.validateInteriorAlignment(grid, box.bounds)
+        alignmentWarnings->Array.forEach(w => warnings->Array.push(w)->ignore)
       }
     | Error(traceError) => {
         // This corner failed to trace as a top-left corner.
@@ -141,14 +146,14 @@ let detect = (grid: Grid.t): detectResult => {
     // No boxes traced successfully
     if Array.length(corners) === 0 {
       // No corners at all - truly empty wireframe
-      Ok([])
+      Ok(([], []))
     } else if Array.length(traceFailures) > 0 {
       // Had corners but all traces failed - this indicates malformed boxes
       // Return all trace failures as errors
       Error(traceFailures)
     } else {
       // No corners and no failures - empty result
-      Ok([])
+      Ok(([], []))
     }
   } else {
     // Step 4: Detect dividers for each successfully traced box
@@ -160,8 +165,8 @@ let detect = (grid: Grid.t): detectResult => {
     // Step 6: Build hierarchy using HierarchyBuilder
     switch HierarchyBuilder.buildHierarchy(uniqueBoxes) {
     | Ok(rootBoxes) => {
-        // Hierarchy built successfully - return the boxes
-        Ok(rootBoxes)
+        // Hierarchy built successfully - return the boxes with any warnings
+        Ok((rootBoxes, warnings))
       }
     | Error(hierarchyError) => {
         // Hierarchy building failed (e.g., overlapping boxes)
@@ -210,12 +215,14 @@ let rec flattenBoxes = (boxes: array<BoxTracer.box>): array<BoxTracer.box> => {
  */
 let getStats = (result: detectResult): string => {
   switch result {
-  | Ok(boxes) => {
+  | Ok((boxes, warnings)) => {
       let rootCount = Array.length(boxes)
       let totalCount = countBoxes(boxes)
+      let warningCount = Array.length(warnings)
       `Shape Detection Success:
   Root boxes: ${Int.toString(rootCount)}
-  Total boxes (including nested): ${Int.toString(totalCount)}`
+  Total boxes (including nested): ${Int.toString(totalCount)}
+  Warnings: ${Int.toString(warningCount)}`
     }
   | Error(errors) => {
       let errorCount = Array.length(errors)

package/src/parser/Errors/ErrorMessages.mjs

@@ -218,6 +218,31 @@ Consider simplifying the structure:
 
 This is a warning - parsing will continue.`
       };
+    case "MisalignedClosingBorder" :
+      let actualCol$1 = code.actualCol;
+      let expectedCol$1 = code.expectedCol;
+      return {
+        title: "⚠️  Misaligned closing border",
+        message: `The closing '|' at ` + formatPosition(code.position) + ` is not aligned with the box border:
+• Expected column: ` + (expectedCol$1 + 1 | 0).toString() + `
+• Actual column: ` + (actualCol$1 + 1 | 0).toString() + `
+• Off by: ` + Math.abs(expectedCol$1 - actualCol$1 | 0).toString() + ` ` + (
+          Math.abs(expectedCol$1 - actualCol$1 | 0) === 1 ? "space" : "spaces"
+        ) + `
+
+The closing border character on this row is not aligned with the right edge of the box.`,
+        solution: `💡 Solution:
+Align the closing '|' to column ` + (expectedCol$1 + 1 | 0).toString() + `:
+• ` + (
+          expectedCol$1 > actualCol$1 ? "Add" : "Remove"
+        ) + ` ` + Math.abs(expectedCol$1 - actualCol$1 | 0).toString() + ` space` + (
+          Math.abs(expectedCol$1 - actualCol$1 | 0) === 1 ? "" : "s"
+        ) + ` before the closing '|'
+• Use a monospace font editor to ensure proper alignment
+• Check that all rows in this box have the closing '|' at the same column
+
+This is a warning - parsing will continue with the detected box structure.`
+      };
   }
 }
 

package/src/parser/Errors/ErrorMessages.res

@@ -198,6 +198,23 @@ Consider simplifying the structure:
 This is a warning - parsing will continue.`,
     }
 
+  | MisalignedClosingBorder({position, expectedCol, actualCol}) => {
+      title: "⚠️  Misaligned closing border",
+      message: `The closing '|' at ${formatPosition(position)} is not aligned with the box border:
+• Expected column: ${Int.toString(expectedCol + 1)}
+• Actual column: ${Int.toString(actualCol + 1)}
+• Off by: ${Int.toString(Js.Math.abs_int(expectedCol - actualCol))} ${Js.Math.abs_int(expectedCol - actualCol) === 1 ? "space" : "spaces"}
+
+The closing border character on this row is not aligned with the right edge of the box.`,
+      solution: `💡 Solution:
+Align the closing '|' to column ${Int.toString(expectedCol + 1)}:
+• ${expectedCol > actualCol ? "Add" : "Remove"} ${Int.toString(Js.Math.abs_int(expectedCol - actualCol))} space${Js.Math.abs_int(expectedCol - actualCol) === 1 ? "" : "s"} before the closing '|'
+• Use a monospace font editor to ensure proper alignment
+• Check that all rows in this box have the closing '|' at the same column
+
+This is a warning - parsing will continue with the detected box structure.`,
+    }
+
   | InvalidInput({message}) => {
       title: "❌ Invalid input",
       message: `${message}

package/src/parser/Errors/ErrorTypes.mjs

@@ -7,6 +7,7 @@ function getSeverity(code) {
   switch (code.TAG) {
     case "UnusualSpacing" :
     case "DeepNesting" :
+    case "MisalignedClosingBorder" :
       return "Warning";
     default:
       return "Error";
@@ -89,6 +90,8 @@ function getCodeName(code) {
       return "UnusualSpacing";
     case "DeepNesting" :
       return "DeepNesting";
+    case "MisalignedClosingBorder" :
+      return "MisalignedClosingBorder";
   }
 }
 

package/src/parser/Errors/ErrorTypes.res

@@ -59,6 +59,11 @@ type errorCode =
       depth: int,
       position: Position.t,
     }) // Nesting depth exceeds recommended level
+  | MisalignedClosingBorder({
+      position: Position.t,
+      expectedCol: int,
+      actualCol: int,
+    }) // Closing border '|' is not aligned with the box edge (REQ-7)
 
 /**
  * Complete parse error with error code, severity, and context
@@ -75,7 +80,7 @@ type t = {
  */
 let getSeverity = (code: errorCode): severity => {
   switch code {
-  | UnusualSpacing(_) | DeepNesting(_) => Warning
+  | UnusualSpacing(_) | DeepNesting(_) | MisalignedClosingBorder(_) => Warning
   | _ => Error
   }
 }
@@ -130,6 +135,7 @@ let getPosition = (code: errorCode): option<Position.t> => {
   | InvalidInteractionDSL({position}) => position
   | UnusualSpacing({position}) => Some(position)
   | DeepNesting({position}) => Some(position)
+  | MisalignedClosingBorder({position}) => Some(position)
   }
 }
 
@@ -165,5 +171,6 @@ let getCodeName = (code: errorCode): string => {
   | InvalidInteractionDSL(_) => "InvalidInteractionDSL"
   | UnusualSpacing(_) => "UnusualSpacing"
   | DeepNesting(_) => "DeepNesting"
+  | MisalignedClosingBorder(_) => "MisalignedClosingBorder"
   }
 }

package/src/parser/Parser.gen.tsx

@@ -11,10 +11,11 @@ import type {sceneInteractions as Types_sceneInteractions} from '../../src/parse
 
 import type {t as ErrorTypes_t} from '../../src/parser/Errors/ErrorTypes.gen';
 
-/** * Parse result type - either a successful AST or an array of parse errors.
+/** * Parse result type - either a successful (AST, warnings) tuple or an array of parse errors.
+ * Warnings are non-fatal issues like misaligned borders that don't prevent parsing.
  * This Result type is compatible with TypeScript through GenType. */
 export type parseResult = 
-    { TAG: "Ok"; _0: Types_ast }
+    { TAG: "Ok"; _0: Types_ast; _1: ErrorTypes_t[] }
   | { TAG: "Error"; _0: ErrorTypes_t[] };
 
 /** * Interaction parse result type. */

package/src/parser/Parser.mjs

@@ -76,7 +76,11 @@ function parseSingleScene(sceneContent, sceneMetadata, errors) {
     let shapesResult = ShapeDetector.detect(grid);
     let shapes;
     if (shapesResult.TAG === "Ok") {
-      shapes = shapesResult._0;
+      let match = shapesResult._0;
+      match[1].forEach(w => {
+        errors.push(w);
+      });
+      shapes = match[0];
     } else {
       shapesResult._0.forEach(err => {
         errors.push(err);
@@ -111,15 +115,18 @@ function parseSingleScene(sceneContent, sceneMetadata, errors) {
 }
 
 function parseInternal(wireframe, interactions) {
-  let allErrors = [];
+  let allIssues = [];
   let sceneBlocks = SemanticParser.splitSceneBlocks(wireframe);
   let trimmed = wireframe.trim();
   if (sceneBlocks.length === 0 && trimmed === "") {
     return {
       TAG: "Ok",
-      _0: {
-        scenes: []
-      }
+      _0: [
+        {
+          scenes: []
+        },
+        []
+      ]
     };
   }
   let scenes = [];
@@ -127,7 +134,7 @@ function parseInternal(wireframe, interactions) {
     let lines = block.split("\n");
     let match = SemanticParser.parseSceneDirectives(lines);
     let sceneContent = match[1].join("\n");
-    let scene = parseSingleScene(sceneContent, match[0], allErrors);
+    let scene = parseSingleScene(sceneContent, match[0], allIssues);
     if (scene !== undefined) {
       scenes.push(scene);
       return;
@@ -143,23 +150,28 @@ function parseInternal(wireframe, interactions) {
       finalAst = mergeInteractionsIntoAST(baseAst, interactionsResult._0);
     } else {
       interactionsResult._0.forEach(err => {
-        allErrors.push(err);
+        allIssues.push(err);
       });
       finalAst = baseAst;
     }
   } else {
     finalAst = baseAst;
   }
+  let errors = allIssues.filter(ErrorTypes.isError);
+  let warnings = allIssues.filter(ErrorTypes.isWarning);
   let totalElements = Core__Array.reduce(finalAst.scenes, 0, (acc, scene) => acc + scene.elements.length | 0);
-  if (allErrors.length > 0 && totalElements === 0) {
+  if (errors.length > 0 && totalElements === 0) {
     return {
       TAG: "Error",
-      _0: allErrors
+      _0: allIssues
     };
   } else {
     return {
       TAG: "Ok",
-      _0: finalAst
+      _0: [
+        finalAst,
+        warnings
+      ]
     };
   }
 }