wyreframe 0.5.1 → 0.7.0

package/README.md

@@ -1,6 +1,6 @@
 # Wyreframe
 
-> A library that converts ASCII wireframes into working HTML/UI
+> A library that converts ASCII wireframes into working HTML/UI with scene management
 
 [![npm version](https://img.shields.io/npm/v/wyreframe.svg)](https://www.npmjs.com/package/wyreframe)
 [![npm downloads](https://img.shields.io/npm/dm/wyreframe.svg)](https://www.npmjs.com/package/wyreframe)
@@ -19,6 +19,15 @@
 +---------------------------+
 ```
 
+## Features
+
+- **ASCII to HTML**: Convert simple ASCII art into interactive UI elements
+- **Scene Management**: Multi-screen prototypes with transitions (fade, slide, zoom)
+- **Interaction DSL**: Define button clicks, navigation, and form validation
+- **Device Preview**: Responsive previews for mobile, tablet, and desktop
+- **Auto-Fix**: Automatically correct common wireframe formatting issues
+- **TypeScript/ReScript**: Full type safety with both language support
+
 ## Installation
 
 ```bash
@@ -56,121 +65,284 @@ if (result.success) {
 }
 ```
 
-### ReScript
+## Syntax Reference
 
-```rescript
-let ui = `
-@scene: login
+### UI Elements
 
-+---------------------------+
-|       'WYREFRAME'         |
-|  +---------------------+  |
-|  | #email              |  |
-|  +---------------------+  |
-|       [ Login ]           |
-+---------------------------+
+| Syntax | Description | HTML Output |
+|--------|-------------|-------------|
+| `+---+` | Box/Container | `<div>` |
+| `[ Text ]` | Button | `<button>` |
+| `#id` | Input field | `<input>` |
+| `"text"` | Link | `<a>` |
+| `'text'` | Emphasis text | Title, Heading |
+| `[x]` / `[ ]` | Checkbox | `<input type="checkbox">` |
+| `---` | Divider | `<hr>` |
+
+### Scene Directives
+
+```yaml
+@scene: sceneId        # Scene identifier (required)
+@title: Page Title     # Optional page title
+@device: mobile        # Device type for sizing
+@transition: fade      # Default transition effect
+```
 
+### Device Types
+
+| Device | Dimensions | Description |
+|--------|------------|-------------|
+| `desktop` | 1440x900 | Desktop monitor |
+| `laptop` | 1280x800 | Laptop screen |
+| `tablet` | 768x1024 | Tablet portrait |
+| `tablet-landscape` | 1024x768 | Tablet landscape |
+| `mobile` | 375x812 | iPhone X ratio |
+| `mobile-landscape` | 812x375 | Mobile landscape |
+
+### Interactions
+
+```yaml
 #email:
-  placeholder: "Enter your email"
+  placeholder: "Email"
 
 [Login]:
+  variant: primary
   @click -> goto(dashboard, slide-left)
-`
 
-switch Renderer.createUI(ui, None) {
-| Ok({root, sceneManager, _}) => {
-    // Append root to DOM
-    sceneManager.goto("login")
-  }
-| Error(errors) => Console.error(errors)
-}
+"Forgot Password":
+  @click -> goto(reset)
 ```
 
-## Syntax Summary
+**Actions:**
 
-| Syntax | Description | Example |
-|------|------|------|
-| `+---+` | Box/Container | `<div>` |
-| `[ Text ]` | Button | `<button>` |
-| `#id` | Input field | `<input>` |
-| `"text"` | Link | `<a>` |
-| `'text'` | Emphasis text | Title, Heading |
-| `[x]` / `[ ]` | Checkbox | `<input type="checkbox">` |
-| `---` | Scene separator | Multi-scene |
+| Action | Description | Example |
+|--------|-------------|---------|
+| `goto(scene, transition?)` | Navigate to scene | `@click -> goto(home, fade)` |
+| `back()` | Navigate back | `@click -> back()` |
+| `forward()` | Navigate forward | `@click -> forward()` |
+| `validate(fields)` | Validate inputs | `@submit -> validate(email, password)` |
+| `call(fn, args)` | Custom function | `@click -> call(submit, form)` |
+
+**Transitions:** `fade`, `slide-left`, `slide-right`, `zoom`
+
+**Variants:** `primary`, `secondary`, `ghost`
 
 ## API
 
 ### JavaScript/TypeScript
 
 ```javascript
-import { parse, render, createUI, createUIOrThrow } from 'wyreframe';
+import {
+  parse,
+  parseOrThrow,
+  render,
+  createUI,
+  createUIOrThrow,
+  fix,
+  fixOnly
+} from 'wyreframe';
+
+// Parse only - returns { success, ast, warnings } or { success: false, errors }
+const parseResult = parse(text);
+
+// Parse and throw on error
+const ast = parseOrThrow(text);
+
+// Render AST to DOM (pass ast, not parseResult!)
+if (parseResult.success) {
+  const { root, sceneManager } = render(parseResult.ast, options);
+}
 
-// Parse only - returns { success, ast } or { success, errors }
-const result = parse(text);
+// Parse + Render combined (recommended)
+const result = createUI(text, options);
 
-// Render only - IMPORTANT: pass result.ast, not result directly!
-if (result.success) {
-  const { root, sceneManager } = render(result.ast);
-}
+// Parse + Render, throw on error
+const { root, sceneManager } = createUIOrThrow(text, options);
 
-// Parse + Render (recommended) - handles the wrapper automatically
-const result = createUI(text);
+// Auto-fix wireframe formatting issues
+const fixResult = fix(text);
+if (fixResult.success) {
+  console.log('Fixed:', fixResult.fixed.length, 'issues');
+  const cleanText = fixResult.text;
+}
 
-// Throw on error
-const { root, sceneManager } = createUIOrThrow(text);
+// Fix and return text only
+const fixedText = fixOnly(text);
 ```
 
-> **Note:** `parse()` returns a wrapper object `{ success: true, ast: AST }` or `{ success: false, errors: [] }`.
-> When using `render()` directly, make sure to pass `result.ast`, not the result object itself.
+### Render Options
 
-### ReScript
+```typescript
+const options = {
+  // Additional CSS class for container
+  containerClass: 'my-app',
 
-```rescript
-// Parse only
-let result = Parser.parse(text)
+  // Inject default styles (default: true)
+  injectStyles: true,
+
+  // Override device type for all scenes
+  device: 'mobile',
 
-// Render only
-let {root, sceneManager} = Renderer.render(ast, None)
+  // Scene change callback
+  onSceneChange: (fromScene, toScene) => {
+    console.log(`Navigated from ${fromScene} to ${toScene}`);
+  },
 
-// Parse + Render (recommended)
-let result = Renderer.createUI(text, None)
+  // Dead-end click callback (buttons/links without navigation)
+  onDeadEndClick: (info) => {
+    console.log(`Clicked: ${info.elementText} in scene ${info.sceneId}`);
+    // Show modal, custom logic, etc.
+  }
+};
 
-// Throw on error
-let {root, sceneManager, ast} = Renderer.createUIOrThrow(text, None)
+const result = createUI(text, options);
 ```
 
 ### SceneManager
 
 ```javascript
-sceneManager.goto('dashboard');           // Navigate to scene
-sceneManager.getCurrentScene();           // Get current scene
-sceneManager.getSceneIds();               // Get all scene IDs
+const { sceneManager } = result;
+
+sceneManager.goto('dashboard');        // Navigate to scene
+sceneManager.goto('home', 'fade');     // Navigate with transition
+sceneManager.back();                   // Go back in history
+sceneManager.forward();                // Go forward in history
+sceneManager.getCurrentScene();        // Get current scene ID
+sceneManager.getSceneIds();            // Get all scene IDs
 ```
 
+### ReScript
+
 ```rescript
-sceneManager.goto("dashboard")            // Navigate to scene
-sceneManager.getCurrentScene()            // Get current scene (option<string>)
-sceneManager.getSceneIds()                // Get all scene IDs (array<string>)
+// Parse + Render
+switch Renderer.createUI(ui, None) {
+| Ok({root, sceneManager, _}) =>
+    sceneManager.goto("login")
+| Error(errors) => Console.error(errors)
+}
+
+// With options
+let options = {
+  device: Some(#mobile),
+  onSceneChange: Some((from, to) => Console.log2(from, to)),
+  onDeadEndClick: None,
+  containerClass: None,
+  injectStyles: None,
+}
+switch Renderer.createUI(ui, Some(options)) {
+| Ok({root, sceneManager, _}) => ...
+| Error(errors) => ...
+}
 ```
 
-## Interactions
+## Auto-Fix
+
+Wyreframe can automatically fix common formatting issues:
+
+```javascript
+import { fix, fixOnly } from 'wyreframe';
+
+const messyWireframe = `
++----------+
+| Button  |    <- Misaligned pipe
++---------+    <- Width mismatch
+`;
+
+const result = fix(messyWireframe);
+if (result.success) {
+  console.log('Fixed issues:', result.fixed);
+  console.log('Remaining issues:', result.remaining);
+  console.log('Clean wireframe:', result.text);
+}
+
+// Or just get the fixed text
+const cleanText = fixOnly(messyWireframe);
+```
+
+**Fixable Issues:**
+- Misaligned pipes (|)
+- Mismatched border widths
+- Tabs instead of spaces
+- Unclosed brackets
+
+## Multi-Scene Example
+
+```javascript
+const app = `
+@scene: login
+@device: mobile
+
++---------------------------+
+|         'Login'           |
+|  +---------------------+  |
+|  | #email              |  |
+|  +---------------------+  |
+|  +---------------------+  |
+|  | #password           |  |
+|  +---------------------+  |
+|       [ Sign In ]         |
+|                           |
+|    "Create Account"       |
++---------------------------+
+
+---
+
+@scene: signup
+@device: mobile
+
++---------------------------+
+|       'Sign Up'           |
+|  +---------------------+  |
+|  | #name               |  |
+|  +---------------------+  |
+|  +---------------------+  |
+|  | #email              |  |
+|  +---------------------+  |
+|       [ Register ]        |
+|                           |
+|    "Back to Login"        |
++---------------------------+
 
-```yaml
 #email:
   placeholder: "Email"
+#password:
+  placeholder: "Password"
+#name:
+  placeholder: "Full Name"
 
-[Login]:
+[Sign In]:
   variant: primary
-  @click -> goto(dashboard, slide-left)
-```
+  @click -> goto(signup, slide-left)
+
+"Create Account":
+  @click -> goto(signup, slide-left)
+
+[Register]:
+  variant: primary
+  @click -> goto(login, slide-right)
+
+"Back to Login":
+  @click -> goto(login, slide-right)
+`;
+
+const result = createUI(app, {
+  onSceneChange: (from, to) => {
+    console.log(`Scene: ${from} -> ${to}`);
+  }
+});
 
-**Transition effects:** `fade`, `slide-left`, `slide-right`, `zoom`
+if (result.success) {
+  document.getElementById('app').appendChild(result.root);
+  result.sceneManager.goto('login');
+}
+```
 
 ## Documentation
 
 - [API Reference](docs/api.md)
-- [Developer Guide](docs/developer-guide.md)
+- [Type Definitions](docs/types.md)
 - [Examples](docs/examples.md)
+- [Developer Guide](docs/developer-guide.md)
 - [Testing Guide](docs/testing.md)
 - [Live Demo](examples/index.html)
 
@@ -179,10 +351,24 @@ sceneManager.getSceneIds()                // Get all scene IDs (array<string>)
 ```bash
 npm install
 npm run res:build    # ReScript build
+npm run ts:build     # TypeScript build
+npm run build        # Full build
 npm run dev          # Dev server (http://localhost:3000/examples)
 npm test             # Run tests
+npm run test:watch   # Test watch mode
+npm run test:coverage # Generate coverage report
 ```
 
+## Architecture
+
+Wyreframe uses a 3-stage parsing pipeline:
+
+1. **Grid Scanner**: Converts ASCII text to 2D character grid
+2. **Shape Detector**: Identifies boxes, nesting, and hierarchy
+3. **Semantic Parser**: Recognizes UI elements via pluggable parsers
+
+The renderer generates pure DOM elements with CSS-based scene visibility and transitions.
+
 ## License
 
 GPL-3.0 License - see [LICENSE](LICENSE) for details.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wyreframe",
-  "version": "0.5.1",
+  "version": "0.7.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;
@@ -544,7 +595,7 @@ function segmentToElement(segment, basePosition, baseCol, bounds) {
       let text$1 = segment._0;
       let actualCol$1 = baseCol + segment._1 | 0;
       let position$1 = Types.Position.make(basePosition.row, actualCol$1);
-      let id = text$1.trim().toLowerCase().replace(/\\s+/g, "-").replace(/[^a-z0-9-]/g, "").replace(/-+/g, "-").replace(/^-+|-+$/g, "");
+      let id = text$1.trim().toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "").replace(/-+/g, "-").replace(/^-+|-+$/g, "");
       let buttonContent = "[ " + text$1 + " ]";
       let align$1 = AlignmentCalc.calculateWithStrategy(buttonContent, position$1, bounds, "RespectPosition");
       return {
@@ -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 === "" {
@@ -936,13 +992,14 @@ let segmentToElement = (
       let position = Position.make(basePosition.row, actualCol)
 
       // Create button ID from text (slugified)
+      // Use String.replaceRegExp (modern API) to avoid escaping issues with %re
       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"), "")
+        ->String.replaceRegExp(%re("/\s+/g"), "-")
+        ->String.replaceRegExp(%re("/[^a-z0-9-]/g"), "")
+        ->String.replaceRegExp(%re("/-+/g"), "-")
+        ->String.replaceRegExp(%re("/^-+|-+$/g"), "")
 
       // Use "[ text ]" format (with spaces) to match visual button width for alignment
       let buttonContent = "[ " ++ text ++ " ]"
@@ -965,11 +1022,15 @@ let segmentToElement = (
       let actualCol = baseCol + colOffset
       let position = Position.make(basePosition.row, actualCol)
 
+      // Use the same slugify logic as LinkParser for consistent ID generation
+      // Use String.replaceRegExp (modern API) to avoid escaping issues with %re
       let id = text
         ->String.trim
         ->String.toLowerCase
-        ->Js.String2.replaceByRe(%re("/\\s+/g"), "-")
-        ->Js.String2.replaceByRe(%re("/[^a-z0-9-]/g"), "")
+        ->String.replaceRegExp(%re("/\s+/g"), "-")
+        ->String.replaceRegExp(%re("/[^a-z0-9-]/g"), "")
+        ->String.replaceRegExp(%re("/-+/g"), "-")
+        ->String.replaceRegExp(%re("/^-+|-+$/g"), "")
 
       let align = AlignmentCalc.calculateWithStrategy(
         text,
@@ -1046,10 +1107,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 +1243,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 +1395,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) => {