fix: complete empty line preservation in wireframe rendering (#16)

Completes the fix for issue #16 by addressing two root causes:

1. Parser fix (SemanticParser.res):
   - Modified parseContentLine to create Text elements with empty content
     for empty lines instead of skipping them
   - Empty lines now generate proper spacer Text elements in the AST

2. Renderer fix (Renderer.res):
   - Modified Text element rendering to use   for empty content
   - Added 'wf-spacer' CSS class for empty line styling
   - Empty lines now render with visible height in the UI

Tests:
- Added integration test verifying spacer elements are created (>=5)
- Parser now creates 15 spacer elements from login wireframe fixture
- All 619 tests pass

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: wickedev

src/parser/Semantic/SemanticParser.res

@@ -1062,9 +1062,20 @@ 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 === "" {
-    None
+    // Calculate position for the empty line
+    let row = contentStartRow + lineIndex
+    let baseCol = box.bounds.left + 1
+    let position = Position.make(row, baseCol)
+
+    // Create a Text element with empty content to act as a vertical spacer
+    Some(Text({
+      content: "",
+      emphasis: false,
+      position: position,
+      align: Left,
+    }))
   } else {
     // Calculate position in grid
     let row = contentStartRow + lineIndex

src/renderer/Renderer.res

@@ -435,7 +435,14 @@ let rec renderElement = (
           p->DomBindings.classList->DomBindings.add("emphasis")
         }
         applyAlignment(p, align)
-        p->DomBindings.setTextContent(content)
+        // Issue #16: Empty lines should render with visible height as spacers
+        let trimmed = content->String.trim
+        if trimmed === "" {
+          p->DomBindings.classList->DomBindings.add("wf-spacer")
+          p->DomBindings.setInnerHTML(" ")
+        } else {
+          p->DomBindings.setTextContent(content)
+        }
         Some(p)
       }
     }

src/renderer/__tests__/Renderer_test.res

@@ -261,6 +261,104 @@ describe("Renderer", () => {
     })
   })
 
+  describe("Issue #16: Empty lines should render as spacer elements", () => {
+    let loginWireframe = `
++------------------------------------------+
+|                                          |
+|              'Welcome Back'              |
+|                                          |
+|         +----------------------------+   |
+|         | #email                     |   |
+|         +----------------------------+   |
+|                                          |
+|         +----------------------------+   |
+|         | #password                  |   |
+|         +----------------------------+   |
+|                                          |
+|              [ Sign In ]                 |
+|                                          |
+|                   ---                    |
+|                                          |
+|           [ Continue with Google ]       |
+|                                          |
+|           [ Continue with GitHub ]       |
+|                                          |
+|            "Forgot password?"            |
+|                                          |
++------------------------------------------+
+`
+
+    test("parses wireframe and includes spacer elements for empty lines", t => {
+      let parseResult = Parser.parse(loginWireframe)
+
+      switch parseResult {
+      | Ok((ast, _warnings)) => {
+          // Get first scene's elements
+          switch ast.scenes->Array.get(0) {
+          | Some(scene) => {
+              // Count all Text elements and empty text elements
+              let (totalTextCount, spacerCount) =
+                scene.elements->Array.reduce((0, 0), ((totalAcc, spacerAcc), elem) => {
+                  switch elem {
+                  | Box({children}) =>
+                    // Count text elements inside the box
+                    children->Array.reduce((totalAcc, spacerAcc), ((tAcc, sAcc), child) => {
+                      switch child {
+                      | Text({content}) => {
+                          let isSpacer = content->String.trim == ""
+                          (tAcc + 1, isSpacer ? sAcc + 1 : sAcc)
+                        }
+                      | _ => (tAcc, sAcc)
+                      }
+                    })
+                  | Text({content}) => {
+                      let isSpacer = content->String.trim == ""
+                      (totalAcc + 1, isSpacer ? spacerAcc + 1 : spacerAcc)
+                    }
+                  | _ => (totalAcc, spacerAcc)
+                  }
+                })
+
+              // Log for debugging
+              Console.log2("Total Text elements:", totalTextCount)
+              Console.log2("Spacer (empty) elements:", spacerCount)
+
+              // The wireframe has multiple empty lines that should be preserved as spacers
+              // Expecting at least 5 empty lines between content elements
+              t->expect(spacerCount >= 5)->Expect.toBe(true)
+            }
+          | None => t->expect(true)->Expect.toBe(false) // Should have at least one scene
+          }
+        }
+      | Error(_) => t->expect(true)->Expect.toBe(false) // Parsing should succeed
+      }
+    })
+
+    // Note: renderElement tests require DOM environment (jsdom)
+    // These tests verify the logic using isNoiseText which is the filtering function
+    test("isNoiseText returns false for empty content (spacers should not be filtered)", t => {
+      // Empty content should NOT be considered noise
+      t->expect(Renderer.isNoiseText(""))->Expect.toBe(false)
+    })
+
+    test("isNoiseText returns false for whitespace content (spacers should not be filtered)", t => {
+      // Whitespace-only content should NOT be considered noise
+      t->expect(Renderer.isNoiseText("   "))->Expect.toBe(false)
+    })
+
+    test("empty Text elements are preserved in rendering logic", t => {
+      // Verify the isNoiseText check used in renderElement would preserve empty lines
+      let emptyContent = ""
+      let whitespaceContent = "   "
+
+      // Both should return false (NOT noise = should be rendered)
+      let emptyIsPreserved = !Renderer.isNoiseText(emptyContent)
+      let whitespaceIsPreserved = !Renderer.isNoiseText(whitespaceContent)
+
+      t->expect(emptyIsPreserved && whitespaceIsPreserved)->Expect.toBe(true)
+    })
+  })
+
   describe("navigation action edge cases", () => {
     test("Goto with condition is still a navigation action", t => {
       let action = Goto({