wyreframe 0.7.0 → 0.7.3

package/README.md

@@ -344,7 +344,7 @@ if (result.success) {
 - [Examples](docs/examples.md)
 - [Developer Guide](docs/developer-guide.md)
 - [Testing Guide](docs/testing.md)
-- [Live Demo](examples/index.html)
+- [Live Demo](https://wyreframe.studio/)
 
 ## Development
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wyreframe",
-  "version": "0.7.0",
+  "version": "0.7.3",
   "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/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 true;
-  }
-  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,21 +172,6 @@ let defaultStyles = `
 // Helper Functions
 // ============================================================================
 
-// Noise text filter - filters out box border characters
-let isNoiseText = (content: string): bool => {
-  let trimmed = content->String.trim
-  if trimmed == "" {
-    true
-  } 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 {
@@ -423,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(_) => {
@@ -444,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")