wyreframe 0.5.1 → 0.6.0

package/package.json

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

package/src/index.test.ts

@@ -251,6 +251,148 @@ describe('onSceneChange callback (Issue #2)', () => {
   });
 });
 
+describe('mixed text and link content (Issue #14)', () => {
+  // Regression test for issue #14: Text before link not rendering in mixed text-link line
+  // When a line contains both plain text and a link (e.g., "Don't have an account? "Sign up""),
+  // both parts should be rendered, not just the link.
+
+  const mixedTextLinkWireframe = `
+@scene: test
+
++---------------------------------------+
+|   Don't have an account? "Sign up"    |
++---------------------------------------+
+`;
+
+  test('parses both text and link from mixed text-link line', () => {
+    const result = parse(mixedTextLinkWireframe);
+
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.ast.scenes).toHaveLength(1);
+      const scene = result.ast.scenes[0];
+
+      // Should have elements (likely a Row containing Text and Link)
+      expect(scene.elements.length).toBeGreaterThan(0);
+
+      // Helper to recursively find elements
+      const findElements = (elements: any[], tags: string[]): any[] => {
+        const found: any[] = [];
+        for (const el of elements) {
+          if (tags.includes(el.TAG)) {
+            found.push(el);
+          }
+          if (el.children) {
+            found.push(...findElements(el.children, tags));
+          }
+        }
+        return found;
+      };
+
+      // Find all Text and Link elements
+      const textElements = findElements(scene.elements, ['Text']);
+      const linkElements = findElements(scene.elements, ['Link']);
+
+      // Should have at least one Text element containing "Don't have an account?"
+      const hasAccountText = textElements.some(
+        (t) => t.content && t.content.includes("Don't have an account?")
+      );
+      expect(hasAccountText).toBe(true);
+
+      // Should have the "Sign up" link
+      const hasSignUpLink = linkElements.some((l) => l.text === 'Sign up');
+      expect(hasSignUpLink).toBe(true);
+    }
+  });
+
+  test('parses link at start followed by text', () => {
+    const wireframe = `
+@scene: test
+
++----------------------------+
+|  "Click here" for details  |
++----------------------------+
+`;
+
+    const result = parse(wireframe);
+
+    expect(result.success).toBe(true);
+    if (result.success) {
+      const scene = result.ast.scenes[0];
+
+      const findElements = (elements: any[], tags: string[]): any[] => {
+        const found: any[] = [];
+        for (const el of elements) {
+          if (tags.includes(el.TAG)) {
+            found.push(el);
+          }
+          if (el.children) {
+            found.push(...findElements(el.children, tags));
+          }
+        }
+        return found;
+      };
+
+      const textElements = findElements(scene.elements, ['Text']);
+      const linkElements = findElements(scene.elements, ['Link']);
+
+      // Should have "Click here" link
+      const hasClickHereLink = linkElements.some((l) => l.text === 'Click here');
+      expect(hasClickHereLink).toBe(true);
+
+      // Should have "for details" text
+      const hasDetailsText = textElements.some(
+        (t) => t.content && t.content.includes('for details')
+      );
+      expect(hasDetailsText).toBe(true);
+    }
+  });
+
+  test('parses text with link in middle', () => {
+    const wireframe = `
+@scene: test
+
++------------------------------------+
+|  Please "click here" to continue  |
++------------------------------------+
+`;
+
+    const result = parse(wireframe);
+
+    expect(result.success).toBe(true);
+    if (result.success) {
+      const scene = result.ast.scenes[0];
+
+      const findElements = (elements: any[], tags: string[]): any[] => {
+        const found: any[] = [];
+        for (const el of elements) {
+          if (tags.includes(el.TAG)) {
+            found.push(el);
+          }
+          if (el.children) {
+            found.push(...findElements(el.children, tags));
+          }
+        }
+        return found;
+      };
+
+      const textElements = findElements(scene.elements, ['Text']);
+      const linkElements = findElements(scene.elements, ['Link']);
+
+      // Should have "click here" link
+      expect(linkElements.some((l) => l.text === 'click here')).toBe(true);
+
+      // Should have both text parts
+      const hasPlease = textElements.some((t) => t.content && t.content.includes('Please'));
+      const hasContinue = textElements.some(
+        (t) => t.content && t.content.includes('to continue')
+      );
+      expect(hasPlease).toBe(true);
+      expect(hasContinue).toBe(true);
+    }
+  });
+});
+
 describe('device option override (Issue #11)', () => {
   const desktopWireframe = `
 @scene: test

package/src/parser/Semantic/SemanticParser.mjs

@@ -431,6 +431,57 @@ function splitInlineSegments(line) {
         currentText = currentText + char;
         i = i + 1 | 0;
       }
+    } else if (char === "\"") {
+      let linkStart = i;
+      let start$1 = i + 1 | 0;
+      let endPos$1;
+      let j$1 = start$1;
+      while (j$1 < len && endPos$1 === undefined) {
+        let currentChar = line.charAt(j$1);
+        if (currentChar === "\"") {
+          let isEscaped = j$1 > start$1 && line.charAt(j$1 - 1 | 0) === "\\";
+          if (!isEscaped) {
+            endPos$1 = j$1;
+          }
+        }
+        j$1 = j$1 + 1 | 0;
+      };
+      let end$1 = endPos$1;
+      if (end$1 !== undefined) {
+        let quotedContent = line.slice(start$1, end$1);
+        let trimmedContent = quotedContent.trim();
+        if (trimmedContent !== "") {
+          let text$1 = currentText.trim();
+          if (text$1 !== "") {
+            let leadingSpaces$1 = currentText.length - currentText.trimStart().length | 0;
+            segments.push({
+              TAG: "TextSegment",
+              _0: text$1,
+              _1: currentTextStart + leadingSpaces$1 | 0
+            });
+          }
+          currentText = "";
+          segments.push({
+            TAG: "LinkSegment",
+            _0: trimmedContent,
+            _1: linkStart
+          });
+          i = end$1 + 1 | 0;
+          currentTextStart = i;
+        } else {
+          if (currentText === "") {
+            currentTextStart = i;
+          }
+          currentText = currentText + char;
+          i = i + 1 | 0;
+        }
+      } else {
+        if (currentText === "") {
+          currentTextStart = i;
+        }
+        currentText = currentText + char;
+        i = i + 1 | 0;
+      }
     } else {
       if (currentText === "") {
         currentTextStart = i;
@@ -439,13 +490,13 @@ function splitInlineSegments(line) {
       i = i + 1 | 0;
     }
   };
-  let text$1 = currentText.trim();
-  if (text$1 !== "") {
-    let leadingSpaces$1 = currentText.length - currentText.trimStart().length | 0;
+  let text$2 = currentText.trim();
+  if (text$2 !== "") {
+    let leadingSpaces$2 = currentText.length - currentText.trimStart().length | 0;
     segments.push({
       TAG: "TextSegment",
-      _0: text$1,
-      _1: currentTextStart + leadingSpaces$1 | 0
+      _0: text$2,
+      _1: currentTextStart + leadingSpaces$2 | 0
     });
   }
   return segments;
@@ -559,7 +610,7 @@ function segmentToElement(segment, basePosition, baseCol, bounds) {
       let text$2 = segment._0;
       let actualCol$2 = baseCol + segment._1 | 0;
       let position$2 = Types.Position.make(basePosition.row, actualCol$2);
-      let id$1 = text$2.trim().toLowerCase().replace(/\\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+      let id$1 = text$2.trim().toLowerCase().replace(/\\s+/g, "-").replace(/[^a-z0-9-]/g, "").replace(/-+/g, "-").replace(/^-+|-+$/g, "");
       let align$2 = AlignmentCalc.calculateWithStrategy(text$2, position$2, bounds, "RespectPosition");
       return {
         TAG: "Link",
@@ -603,23 +654,19 @@ function parseContentLine(line, lineIndex, contentStartRow, box, registry) {
           let buttonContent = "[ " + match._0 + " ]";
           return ParserRegistry.parse(registry, buttonContent, position, box.bounds);
         case "LinkSegment" :
-          let colOffset = match._1;
-          let actualCol$1 = (baseCol + leadingSpaces | 0) + colOffset | 0;
-          let adjustedPosition = Types.Position.make(basePosition.row, actualCol$1);
-          return segmentToElement({
-            TAG: "LinkSegment",
-            _0: match._0,
-            _1: colOffset
-          }, adjustedPosition, baseCol + leadingSpaces | 0, box.bounds);
+          let actualCol$1 = (baseCol + leadingSpaces | 0) + match._1 | 0;
+          let position$1 = Types.Position.make(row, actualCol$1);
+          let linkContent = "\"" + match._0 + "\"";
+          return ParserRegistry.parse(registry, linkContent, position$1, box.bounds);
       }
     }
-    let position$1 = Types.Position.make(row, baseCol + leadingSpaces | 0);
-    return ParserRegistry.parse(registry, trimmed, position$1, box.bounds);
+    let position$2 = Types.Position.make(row, baseCol + leadingSpaces | 0);
+    return ParserRegistry.parse(registry, trimmed, position$2, box.bounds);
   }
   let trimmedStart$1 = line.trimStart();
   let leadingSpaces$1 = line.length - trimmedStart$1.length | 0;
-  let position$2 = Types.Position.make(row, baseCol + leadingSpaces$1 | 0);
-  return ParserRegistry.parse(registry, trimmed, position$2, box.bounds);
+  let position$3 = Types.Position.make(row, baseCol + leadingSpaces$1 | 0);
+  return ParserRegistry.parse(registry, trimmed, position$3, box.bounds);
 }
 
 function parseBoxContent(box, gridCells, registry) {
@@ -712,6 +759,71 @@ function parseBoxContent(box, gridCells, registry) {
   return elements;
 }
 
+function getBoxColumn(elem) {
+  if (elem.TAG === "Box") {
+    return elem.bounds.left;
+  } else {
+    return 0;
+  }
+}
+
+function groupHorizontalBoxes(elements) {
+  let boxes = elements.filter(el => el.TAG === "Box");
+  let nonBoxes = elements.filter(el => el.TAG !== "Box");
+  if (boxes.length <= 1) {
+    return elements;
+  }
+  let boxesWithRow = boxes.map(box => {
+    let row;
+    row = box.TAG === "Box" ? box.bounds.top : 0;
+    return [
+      row,
+      box
+    ];
+  });
+  let sorted = boxesWithRow.toSorted((param, param$1) => {
+    let rowB = param$1[0];
+    let rowA = param[0];
+    if (rowA !== rowB) {
+      return rowA - rowB | 0;
+    } else {
+      return getBoxColumn(param[1]) - getBoxColumn(param$1[1]) | 0;
+    }
+  });
+  let groups = [];
+  sorted.forEach(param => {
+    let box = param[1];
+    let row = param[0];
+    let existingGroupIdx = groups.findIndex(param => param[0] === row);
+    if (existingGroupIdx >= 0) {
+      let match = groups[existingGroupIdx];
+      if (match !== undefined) {
+        match[1].push(box);
+        return;
+      } else {
+        return;
+      }
+    }
+    groups.push([
+      row,
+      [box]
+    ]);
+  });
+  let groupedElements = groups.map(param => {
+    let groupBoxes = param[1];
+    if (groupBoxes.length >= 2) {
+      return {
+        TAG: "Row",
+        children: groupBoxes,
+        align: "Left"
+      };
+    } else {
+      return groupBoxes[0];
+    }
+  });
+  return nonBoxes.concat(groupedElements);
+}
+
 function getElementRow(_elem) {
   while (true) {
     let elem = _elem;
@@ -743,7 +855,8 @@ function getElementRow(_elem) {
 function parseBoxRecursive(box, gridCells, registry) {
   let contentElements = parseBoxContent(box, gridCells, registry);
   let childBoxElements = box.children.map(childBox => parseBoxRecursive(childBox, gridCells, registry));
-  let allChildren = contentElements.concat(childBoxElements);
+  let groupedChildElements = groupHorizontalBoxes(childBoxElements);
+  let allChildren = contentElements.concat(groupedChildElements);
   let sortedChildren = allChildren.toSorted((a, b) => {
     let rowA = getElementRow(a);
     let rowB = getElementRow(b);
@@ -858,6 +971,8 @@ export {
   segmentToElement,
   parseContentLine,
   parseBoxContent,
+  getBoxColumn,
+  groupHorizontalBoxes,
   getElementRow,
   parseBoxRecursive,
   buildScene,

package/src/parser/Semantic/SemanticParser.res

@@ -727,6 +727,62 @@ let splitInlineSegments = (line: string): array<inlineSegment> => {
           i := i.contents + 1
         }
       }
+    } else if char === "\"" {
+      // Check for link pattern "..."
+      let linkStart = i.contents
+      let start = i.contents + 1
+      let endPos = ref(None)
+      let j = ref(start)
+      // Find matching closing quote, handling escaped quotes
+      while j.contents < len && endPos.contents === None {
+        let currentChar = line->String.charAt(j.contents)
+        if currentChar === "\"" {
+          // Check if this quote is escaped (preceded by backslash)
+          let isEscaped = j.contents > start && line->String.charAt(j.contents - 1) === "\\"
+          if !isEscaped {
+            endPos := Some(j.contents)
+          }
+        }
+        j := j.contents + 1
+      }
+
+      switch endPos.contents {
+      | Some(end) => {
+          let quotedContent = line->String.slice(~start, ~end)
+          let trimmedContent = quotedContent->String.trim
+
+          // Check if the quoted content is not empty
+          if trimmedContent !== "" {
+            // Flush any accumulated text before the link
+            let text = currentText.contents->String.trim
+            if text !== "" {
+              let leadingSpaces = String.length(currentText.contents) - String.length(currentText.contents->String.trimStart)
+              segments->Array.push(TextSegment(text, currentTextStart.contents + leadingSpaces))->ignore
+            }
+            currentText := ""
+
+            // Add the link segment
+            segments->Array.push(LinkSegment(trimmedContent, linkStart))->ignore
+            i := end + 1
+            currentTextStart := i.contents
+          } else {
+            // Empty quoted content, treat as regular text
+            if currentText.contents === "" {
+              currentTextStart := i.contents
+            }
+            currentText := currentText.contents ++ char
+            i := i.contents + 1
+          }
+        }
+      | None => {
+          // No matching closing quote, treat as regular text
+          if currentText.contents === "" {
+            currentTextStart := i.contents
+          }
+          currentText := currentText.contents ++ char
+          i := i.contents + 1
+        }
+      }
     } else {
       // Regular character
       if currentText.contents === "" {
@@ -965,11 +1021,14 @@ let segmentToElement = (
       let actualCol = baseCol + colOffset
       let position = Position.make(basePosition.row, actualCol)
 
+      // Use the same slugify logic as LinkParser for consistent ID generation
       let id = text
         ->String.trim
         ->String.toLowerCase
         ->Js.String2.replaceByRe(%re("/\\s+/g"), "-")
         ->Js.String2.replaceByRe(%re("/[^a-z0-9-]/g"), "")
+        ->Js.String2.replaceByRe(%re("/-+/g"), "-")
+        ->Js.String2.replaceByRe(%re("/^-+|-+$/g"), "")
 
       let align = AlignmentCalc.calculateWithStrategy(
         text,
@@ -1046,10 +1105,12 @@ let parseContentLine = (
           Some(registry->ParserRegistry.parse(buttonContent, position, box.bounds))
         }
       | Some(LinkSegment(text, colOffset)) => {
-          // For LinkSegment, we also need to account for leading spaces
+          // For single LinkSegment, pass through to ParserRegistry to use LinkParser's slugify
           let actualCol = baseCol + leadingSpaces + colOffset
-          let adjustedPosition = Position.make(basePosition.row, actualCol)
-          Some(segmentToElement(LinkSegment(text, colOffset), adjustedPosition, baseCol + leadingSpaces, box.bounds))
+          let position = Position.make(row, actualCol)
+          // Reconstruct the quoted text format for the parser
+          let linkContent = "\"" ++ text ++ "\""
+          Some(registry->ParserRegistry.parse(linkContent, position, box.bounds))
         }
       | Some(TextSegment(_, _)) | None => {
           // For single text segment, use original position calculation
@@ -1180,6 +1241,100 @@ let parseBoxContent = (
   elements
 }
 
+/**
+ * Get the column position of a Box element.
+ */
+let getBoxColumn = (elem: element): int => {
+  switch elem {
+  | Box({bounds, _}) => bounds.left
+  | _ => 0
+  }
+}
+
+/**
+ * Group horizontally aligned box elements into Row elements.
+ *
+ * Boxes are considered horizontally aligned if they share the same top row.
+ * Single boxes are returned as-is, while groups of 2+ are wrapped in a Row.
+ *
+ * @param elements - Array of elements (should be Box elements)
+ * @returns Array of elements with horizontal boxes wrapped in Rows
+ */
+let groupHorizontalBoxes = (elements: array<element>): array<element> => {
+  // Only process Box elements - separate them from non-boxes
+  let boxes = elements->Array.filter(el =>
+    switch el {
+    | Box(_) => true
+    | _ => false
+    }
+  )
+  let nonBoxes = elements->Array.filter(el =>
+    switch el {
+    | Box(_) => false
+    | _ => true
+    }
+  )
+
+  // If no boxes or only one box, return as-is
+  if Array.length(boxes) <= 1 {
+    elements
+  } else {
+    // Group boxes by their top row
+    let boxesWithRow = boxes->Array.map(box => {
+      let row = switch box {
+      | Box({bounds, _}) => bounds.top
+      | _ => 0
+      }
+      (row, box)
+    })
+
+    // Sort by row first, then by column within same row
+    let sorted = boxesWithRow->Array.toSorted(((rowA, boxA), (rowB, boxB)) => {
+      if rowA !== rowB {
+        Float.fromInt(rowA - rowB)
+      } else {
+        Float.fromInt(getBoxColumn(boxA) - getBoxColumn(boxB))
+      }
+    })
+
+    // Group boxes by row
+    let groups: array<(int, array<element>)> = []
+    sorted->Array.forEach(((row, box)) => {
+      // Find if there's already a group for this row
+      let existingGroupIdx = groups->Array.findIndex(((groupRow, _)) => groupRow === row)
+      if existingGroupIdx >= 0 {
+        // Add to existing group
+        switch groups->Array.get(existingGroupIdx) {
+        | Some((_, groupBoxes)) => {
+            groupBoxes->Array.push(box)
+          }
+        | None => ()
+        }
+      } else {
+        // Create new group
+        groups->Array.push((row, [box]))
+      }
+    })
+
+    // Convert groups to elements
+    let groupedElements = groups->Array.map(((_, groupBoxes)) => {
+      if Array.length(groupBoxes) >= 2 {
+        // Wrap multiple boxes in a Row
+        Row({
+          children: groupBoxes,
+          align: Left, // Default alignment
+        })
+      } else {
+        // Single box, return as-is
+        groupBoxes->Array.getUnsafe(0)
+      }
+    })
+
+    // Combine non-boxes with grouped elements
+    Array.concat(nonBoxes, groupedElements)
+  }
+}
+
 /**
  * Get the row position of an element for sorting purposes.
  */
@@ -1238,8 +1393,11 @@ let rec parseBoxRecursive = (
     parseBoxRecursive(childBox, gridCells, registry)
   })
 
-  // Combine content elements and child boxes
-  let allChildren = Array.concat(contentElements, childBoxElements)
+  // Group horizontally aligned child boxes into Row elements
+  let groupedChildElements = groupHorizontalBoxes(childBoxElements)
+
+  // Combine content elements and grouped child boxes
+  let allChildren = Array.concat(contentElements, groupedChildElements)
 
   // Sort elements by their row position to preserve visual order
   let sortedChildren = allChildren->Array.toSorted((a, b) => {