wyreframe 0.1.5 → 0.2.1

package/src/parser/Parser.mjs

@@ -69,17 +69,23 @@ function mergeInteractionsIntoAST(ast, sceneInteractions) {
   }
 }
 
-function parseSingleScene(sceneContent, sceneMetadata, errors) {
+function parseSingleScene(sceneContent, sceneMetadata, lineOffset, errors) {
   let gridResult = scanGrid(sceneContent);
   if (gridResult.TAG === "Ok") {
     let grid = gridResult._0;
     let shapesResult = ShapeDetector.detect(grid);
     let shapes;
     if (shapesResult.TAG === "Ok") {
-      shapes = shapesResult._0;
+      let match = shapesResult._0;
+      match[1].forEach(w => {
+        let adjusted = ErrorTypes.adjustLineOffset(w, lineOffset);
+        errors.push(adjusted);
+      });
+      shapes = match[0];
     } else {
       shapesResult._0.forEach(err => {
-        errors.push(err);
+        let adjusted = ErrorTypes.adjustLineOffset(err, lineOffset);
+        errors.push(adjusted);
       });
       shapes = [];
     }
@@ -106,28 +112,32 @@ function parseSingleScene(sceneContent, sceneMetadata, errors) {
     };
   }
   gridResult._0.forEach(err => {
-    errors.push(err);
+    let adjusted = ErrorTypes.adjustLineOffset(err, lineOffset);
+    errors.push(adjusted);
   });
 }
 
 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 = [];
   sceneBlocks.forEach(block => {
     let lines = block.split("\n");
-    let match = SemanticParser.parseSceneDirectives(lines);
-    let sceneContent = match[1].join("\n");
-    let scene = parseSingleScene(sceneContent, match[0], allErrors);
+    let match = SemanticParser.parseSceneDirectivesWithOffset(lines);
+    let sceneContent = match.contentLines.join("\n");
+    let scene = parseSingleScene(sceneContent, match.metadata, match.lineOffset, allIssues);
     if (scene !== undefined) {
       scenes.push(scene);
       return;
@@ -143,23 +153,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
+      ]
     };
   }
 }

package/src/parser/Parser.res

@@ -8,10 +8,11 @@
 // ============================================================================
 
 /**
- * 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.
  */
-type parseResult = result<Types.ast, array<ErrorTypes.t>>
+type parseResult = result<(Types.ast, array<ErrorTypes.t>), array<ErrorTypes.t>>
 
 /**
  * Interaction parse result type.
@@ -65,11 +66,11 @@ let scanGrid = (wireframe: string): result<Grid.t, array<ErrorTypes.t>> => {
  * and builds parent-child hierarchy.
  *
  * @param grid The 2D grid from Stage 1
- * @returns Result containing root boxes or errors
+ * @returns Result containing (root boxes, warnings) or errors
  *
  * Requirements: REQ-3, REQ-4, REQ-5, REQ-6, REQ-7 (Shape Detection)
  */
-let detectShapes = (grid: Grid.t): result<array<box>, array<ErrorTypes.t>> => {
+let detectShapes = (grid: Grid.t): result<(array<box>, array<ErrorTypes.t>), array<ErrorTypes.t>> => {
   // Use ShapeDetector to detect all shapes in the grid
   ShapeDetector.detect(grid)
 }
@@ -190,12 +191,14 @@ let mergeInteractionsIntoAST = (
  *
  * @param sceneContent ASCII wireframe content for one scene (without directives)
  * @param sceneMetadata Scene metadata from directives
+ * @param lineOffset Number of directive lines stripped (for adjusting error line numbers)
  * @param errors Accumulator for errors
  * @returns Parsed scene or None if parsing failed
  */
 let parseSingleScene = (
   sceneContent: string,
   sceneMetadata: SemanticParser.sceneMetadata,
+  lineOffset: int,
   errors: array<ErrorTypes.t>,
 ): option<Types.scene> => {
   // Stage 1: Grid Scanner
@@ -203,7 +206,11 @@ let parseSingleScene = (
 
   switch gridResult {
   | Error(gridErrors) => {
-      gridErrors->Array.forEach(err => errors->Array.push(err)->ignore)
+      // Adjust line numbers by offset before adding to errors
+      gridErrors->Array.forEach(err => {
+        let adjusted = ErrorTypes.adjustLineOffset(err, lineOffset)
+        errors->Array.push(adjusted)->ignore
+      })
       None
     }
   | Ok(grid) => {
@@ -212,10 +219,22 @@ let parseSingleScene = (
 
       let shapes = switch shapesResult {
       | Error(shapeErrors) => {
-          shapeErrors->Array.forEach(err => errors->Array.push(err)->ignore)
+          // Adjust line numbers by offset before adding to errors
+          shapeErrors->Array.forEach(err => {
+            let adjusted = ErrorTypes.adjustLineOffset(err, lineOffset)
+            errors->Array.push(adjusted)->ignore
+          })
           []
         }
-      | Ok(shapes) => shapes
+      | Ok((boxes, warnings)) => {
+          // Collect warnings (non-fatal issues like misaligned borders)
+          // Adjust line numbers by offset before adding to errors
+          warnings->Array.forEach(w => {
+            let adjusted = ErrorTypes.adjustLineOffset(w, lineOffset)
+            errors->Array.push(adjusted)->ignore
+          })
+          boxes
+        }
       }
 
       // Stage 3: Parse box content into elements
@@ -273,8 +292,8 @@ let parseSingleScene = (
  * @returns Result containing AST or array of parse errors
  */
 let parseInternal = (wireframe: string, interactions: option<string>): parseResult => {
-  // Accumulator for all errors across stages
-  let allErrors = []
+  // Accumulator for all issues (errors and warnings) across stages
+  let allIssues = []
 
   // Split wireframe into scene blocks
   let sceneBlocks = SemanticParser.splitSceneBlocks(wireframe)
@@ -282,22 +301,23 @@ let parseInternal = (wireframe: string, interactions: option<string>): parseResu
   // Check if wireframe is empty
   let trimmed = wireframe->String.trim
   if sceneBlocks->Array.length === 0 && trimmed === "" {
-    // Empty wireframe - return empty AST
-    Ok({scenes: []})
+    // Empty wireframe - return empty AST with no warnings
+    Ok(({scenes: []}: Types.ast, []))
   } else {
     // Parse each scene block
     let scenes = []
 
     sceneBlocks->Array.forEach(block => {
-      // Parse scene directives
+      // Parse scene directives and get line offset
       let lines = block->String.split("\n")
-      let (metadata, contentLines) = SemanticParser.parseSceneDirectives(lines)
+      let {metadata, contentLines, lineOffset} = SemanticParser.parseSceneDirectivesWithOffset(lines)
 
       // Rejoin content lines (without directives)
       let sceneContent = contentLines->Array.join("\n")
 
       // Parse this scene through 3-stage pipeline
-      switch parseSingleScene(sceneContent, metadata, allErrors) {
+      // Pass lineOffset to adjust error/warning line numbers
+      switch parseSingleScene(sceneContent, metadata, lineOffset, allIssues) {
       | Some(scene) => scenes->Array.push(scene)->ignore
       | None => () // Scene parsing failed, errors already collected
       }
@@ -314,7 +334,7 @@ let parseInternal = (wireframe: string, interactions: option<string>): parseResu
 
         switch interactionsResult {
         | Error(errors) => {
-            errors->Array.forEach(err => allErrors->Array.push(err)->ignore)
+            errors->Array.forEach(err => allIssues->Array.push(err)->ignore)
             baseAst // Return AST without interactions on error
           }
         | Ok(sceneInteractions) => {
@@ -325,19 +345,23 @@ let parseInternal = (wireframe: string, interactions: option<string>): parseResu
       }
     }
 
+    // Separate errors from warnings
+    let errors = allIssues->Array.filter(issue => ErrorTypes.isError(issue))
+    let warnings = allIssues->Array.filter(issue => ErrorTypes.isWarning(issue))
+
     // Return final result
-    // Return Error if all boxes failed to parse and we have errors
-    // Return Ok if at least some elements were parsed successfully
+    // Return Error if all boxes failed to parse and we have actual errors
+    // Return Ok with warnings if at least some elements were parsed successfully
     let totalElements = finalAst.scenes->Array.reduce(0, (acc, scene) => {
       acc + Array.length(scene.elements)
     })
 
-    if Array.length(allErrors) > 0 && totalElements === 0 {
-      // No elements parsed and we have errors - return error
-      Error(allErrors)
+    if Array.length(errors) > 0 && totalElements === 0 {
+      // No elements parsed and we have errors - return error (include warnings too)
+      Error(allIssues)
     } else {
-      // Either no errors, or some elements were parsed - return Ok
-      Ok(finalAst)
+      // Either no errors, or some elements were parsed - return Ok with warnings
+      Ok((finalAst, warnings))
     }
   }
 }

package/src/parser/Semantic/SemanticParser.mjs

@@ -141,7 +141,7 @@ function defaultSceneMetadata() {
   };
 }
 
-function parseSceneDirectives(lines) {
+function parseSceneDirectivesWithOffset(lines) {
   let sceneId = {
     contents: undefined
   };
@@ -155,7 +155,10 @@ function parseSceneDirectives(lines) {
     contents: undefined
   };
   let contentLines = [];
-  lines.forEach(line => {
+  let firstContentLineIndex = {
+    contents: undefined
+  };
+  lines.forEach((line, lineIndex) => {
     let trimmed = line.trim();
     if (trimmed.startsWith("@scene:")) {
       let id = trimmed.replace("@scene:", "").trim();
@@ -176,6 +179,9 @@ function parseSceneDirectives(lines) {
       if (trimmed.startsWith("@")) {
         return;
       } else {
+        if (firstContentLineIndex.contents === undefined) {
+          firstContentLineIndex.contents = lineIndex;
+        }
         contentLines.push(line);
         return;
       }
@@ -204,9 +210,20 @@ function parseSceneDirectives(lines) {
     transition: finalTransition,
     device: finalDevice
   };
+  let idx = firstContentLineIndex.contents;
+  let lineOffset = idx !== undefined ? idx : 0;
+  return {
+    metadata: metadata,
+    contentLines: contentLines,
+    lineOffset: lineOffset
+  };
+}
+
+function parseSceneDirectives(lines) {
+  let result = parseSceneDirectivesWithOffset(lines);
   return [
-    metadata,
-    contentLines
+    result.metadata,
+    result.contentLines
   ];
 }
 
@@ -824,6 +841,7 @@ export {
   hasContent,
   getContentLineCount,
   defaultSceneMetadata,
+  parseSceneDirectivesWithOffset,
   parseSceneDirectives,
   splitSceneBlocks,
   groupContentByScenes,

package/src/parser/Semantic/SemanticParser.res

@@ -261,7 +261,32 @@ let defaultSceneMetadata = (): sceneMetadata => {
  * ```
  * Returns: ({id: "login", title: "Login Page", transition: "slide"}, ["+--Login--+", ...])
  */
-let parseSceneDirectives = (lines: array<string>): (sceneMetadata, array<string>) => {
+/**
+ * Result type for parseSceneDirectives that includes line offset information.
+ * The lineOffset indicates how many lines were removed from the beginning
+ * before the first content line, which is needed to correctly report
+ * line numbers in warnings and errors.
+ */
+type directiveParseResult = {
+  metadata: sceneMetadata,
+  contentLines: array<string>,
+  lineOffset: int,  // Number of directive lines stripped from the beginning
+}
+
+/**
+ * Parse scene directives and track line offset.
+ * Returns metadata, content lines, and the number of lines stripped from the beginning.
+ *
+ * The lineOffset is calculated as the index of the first content line in the original
+ * input. This offset is needed to convert grid row numbers back to original file line numbers.
+ *
+ * Example:
+ * - Input: ["@scene: login", "", "+---+", ...]
+ * - Output: contentLines = ["", "+---+", ...], lineOffset = 1
+ *
+ * Grid row 0 corresponds to original line (0 + lineOffset + 1) = line 2 (1-indexed)
+ */
+let parseSceneDirectivesWithOffset = (lines: array<string>): directiveParseResult => {
   // Use mutable refs to accumulate directive values
   let sceneId = ref(None)
   let title = ref(None)
@@ -269,7 +294,10 @@ let parseSceneDirectives = (lines: array<string>): (sceneMetadata, array<string>
   let device = ref(None)
   let contentLines = []
 
-  lines->Array.forEach(line => {
+  // Track the index of the first content line (for line offset calculation)
+  let firstContentLineIndex = ref(None)
+
+  lines->Array.forEachWithIndex((line, lineIndex) => {
     let trimmed = line->String.trim
 
     if trimmed->String.startsWith("@scene:") {
@@ -301,6 +329,10 @@ let parseSceneDirectives = (lines: array<string>): (sceneMetadata, array<string>
       ()
     } else {
       // Non-directive line - add to content
+      // Track the index of the first content line
+      if firstContentLineIndex.contents === None {
+        firstContentLineIndex := Some(lineIndex)
+      }
       contentLines->Array.push(line)
     }
   })
@@ -334,7 +366,27 @@ let parseSceneDirectives = (lines: array<string>): (sceneMetadata, array<string>
     device: finalDevice,
   }
 
-  (metadata, contentLines)
+  // Calculate line offset: index of first content line
+  // If no content lines, offset is 0
+  let lineOffset = switch firstContentLineIndex.contents {
+  | Some(idx) => idx
+  | None => 0
+  }
+
+  {
+    metadata,
+    contentLines,
+    lineOffset,
+  }
+}
+
+/**
+ * Parse scene directives from an array of lines.
+ * This is the original API that returns just (metadata, contentLines) for backward compatibility.
+ */
+let parseSceneDirectives = (lines: array<string>): (sceneMetadata, array<string>) => {
+  let result = parseSceneDirectivesWithOffset(lines)
+  (result.metadata, result.contentLines)
 }
 
 /**

package/src/renderer/Renderer.gen.tsx

@@ -22,6 +22,11 @@ export type renderOptions = {
 /** * Scene management interface returned by render function. */
 export type sceneManager = {
   readonly goto: (_1:string) => void; 
+  readonly back: () => void; 
+  readonly forward: () => void; 
+  readonly refresh: () => void; 
+  readonly canGoBack: () => boolean; 
+  readonly canGoForward: () => boolean; 
   readonly getCurrentScene: () => (undefined | string); 
   readonly getSceneIds: () => string[]
 };
@@ -34,7 +39,8 @@ export type renderResult = { readonly root: DomBindings_element; readonly sceneM
 export type createUISuccessResult = {
   readonly root: DomBindings_element; 
   readonly sceneManager: sceneManager; 
-  readonly ast: Types_ast
+  readonly ast: Types_ast; 
+  readonly warnings: ErrorTypes_t[]
 };
 
 export type createUIResult = 

package/src/renderer/Renderer.mjs

@@ -284,7 +284,13 @@ function createSceneManager(scenes) {
   let currentScene = {
     contents: undefined
   };
-  let goto = id => {
+  let historyStack = {
+    contents: []
+  };
+  let forwardStack = {
+    contents: []
+  };
+  let switchToScene = id => {
     let currentId = currentScene.contents;
     if (currentId !== undefined) {
       let el = scenes.get(currentId);
@@ -299,10 +305,74 @@ function createSceneManager(scenes) {
       return;
     }
   };
+  let goto = id => {
+    let currentId = currentScene.contents;
+    if (currentId !== undefined && currentId !== id) {
+      historyStack.contents = historyStack.contents.concat([currentId]);
+      forwardStack.contents = [];
+    }
+    switchToScene(id);
+  };
+  let back = () => {
+    let history = historyStack.contents;
+    let len = history.length;
+    if (len <= 0) {
+      return;
+    }
+    let prevId = history[len - 1 | 0];
+    if (prevId === undefined) {
+      return;
+    }
+    let currentId = currentScene.contents;
+    if (currentId !== undefined) {
+      forwardStack.contents = forwardStack.contents.concat([currentId]);
+    }
+    historyStack.contents = history.slice(0, len - 1 | 0);
+    switchToScene(prevId);
+  };
+  let forward = () => {
+    let fwdStack = forwardStack.contents;
+    let len = fwdStack.length;
+    if (len <= 0) {
+      return;
+    }
+    let nextId = fwdStack[len - 1 | 0];
+    if (nextId === undefined) {
+      return;
+    }
+    let currentId = currentScene.contents;
+    if (currentId !== undefined) {
+      historyStack.contents = historyStack.contents.concat([currentId]);
+    }
+    forwardStack.contents = fwdStack.slice(0, len - 1 | 0);
+    switchToScene(nextId);
+  };
+  let refresh = () => {
+    let id = currentScene.contents;
+    if (id === undefined) {
+      return;
+    }
+    let el = scenes.get(id);
+    if (el === undefined) {
+      return;
+    }
+    let el$1 = Primitive_option.valFromOption(el);
+    el$1.classList.remove("active");
+    setTimeout(() => {
+      el$1.classList.add("active");
+    }, 0);
+  };
+  let canGoBack = () => historyStack.contents.length > 0;
+  let canGoForward = () => forwardStack.contents.length > 0;
   let getCurrentScene = () => currentScene.contents;
   let getSceneIds = () => Array.from(scenes.keys());
   return {
     goto: goto,
+    back: back,
+    forward: forward,
+    refresh: refresh,
+    canGoBack: canGoBack,
+    canGoForward: canGoForward,
     getCurrentScene: getCurrentScene,
     getSceneIds: getSceneIds
   };
@@ -338,16 +408,41 @@ function render(ast, options) {
   let gotoRef = {
     contents: undefined
   };
+  let backRef = {
+    contents: undefined
+  };
+  let forwardRef = {
+    contents: undefined
+  };
   let handleAction = action => {
     if (typeof action !== "object") {
-      return;
-    }
-    if (action.TAG !== "Goto") {
-      return;
-    }
-    let goto = gotoRef.contents;
-    if (goto !== undefined) {
-      return goto(action.target);
+      if (action === "Back") {
+        let back = backRef.contents;
+        if (back !== undefined) {
+          return back();
+        } else {
+          return;
+        }
+      }
+      let forward = forwardRef.contents;
+      if (forward !== undefined) {
+        return forward();
+      } else {
+        return;
+      }
+    } else {
+      switch (action.TAG) {
+        case "Goto" :
+          let goto = gotoRef.contents;
+          if (goto !== undefined) {
+            return goto(action.target);
+          } else {
+            return;
+          }
+        case "Validate" :
+        case "Call" :
+          return;
+      }
     }
   };
   let sceneMap = new Map();
@@ -358,6 +453,8 @@ function render(ast, options) {
   });
   let manager = createSceneManager(sceneMap);
   gotoRef.contents = manager.goto;
+  backRef.contents = manager.back;
+  forwardRef.contents = manager.forward;
   if (ast.scenes.length > 0) {
     let firstScene$1 = ast.scenes[0];
     if (firstScene$1 !== undefined) {
@@ -375,37 +472,41 @@ function toHTMLString(_ast, _options) {
 }
 
 function createUI(text, options) {
-  let ast = Parser.parse(text);
-  if (ast.TAG !== "Ok") {
+  let errors = Parser.parse(text);
+  if (errors.TAG !== "Ok") {
     return {
       TAG: "Error",
-      _0: ast._0
+      _0: errors._0
     };
   }
-  let ast$1 = ast._0;
-  let match = render(ast$1, options);
+  let match = errors._0;
+  let ast = match[0];
+  let match$1 = render(ast, options);
   return {
     TAG: "Ok",
     _0: {
-      root: match.root,
-      sceneManager: match.sceneManager,
-      ast: ast$1
+      root: match$1.root,
+      sceneManager: match$1.sceneManager,
+      ast: ast,
+      warnings: match[1]
     }
   };
 }
 
 function createUIOrThrow(text, options) {
-  let ast = Parser.parse(text);
-  if (ast.TAG === "Ok") {
-    let ast$1 = ast._0;
-    let match = render(ast$1, options);
+  let errors = Parser.parse(text);
+  if (errors.TAG === "Ok") {
+    let match = errors._0;
+    let ast = match[0];
+    let match$1 = render(ast, options);
     return {
-      root: match.root,
-      sceneManager: match.sceneManager,
-      ast: ast$1
+      root: match$1.root,
+      sceneManager: match$1.sceneManager,
+      ast: ast,
+      warnings: match[1]
     };
   }
-  let messages = ast._0.map(err => ErrorMessages.getTitle(err.code)).join("\n");
+  let messages = errors._0.map(err => ErrorMessages.getTitle(err.code)).join("\n");
   return Stdlib_JsError.throwWithMessage("Parse failed:\n" + messages);
 }