wyreframe 0.1.0

package/src/parser/Semantic/AlignmentCalc.res

@@ -0,0 +1,104 @@
+// AlignmentCalc.res
+// Alignment calculation module for determining element positioning within boxes
+
+open Types
+
+/**
+ * Calculates the horizontal alignment of an element based on its position
+ * within a box's boundaries.
+ *
+ * Algorithm:
+ * 1. Calculate the space to the left and right of the content
+ * 2. Convert these to ratios relative to the box interior width
+ * 3. Apply threshold rules to determine alignment:
+ *    - Left: Element is close to left edge (leftRatio < 0.2 && rightRatio > 0.3)
+ *    - Right: Element is close to right edge (rightRatio < 0.2 && leftRatio > 0.3)
+ *    - Center: Element is roughly centered (abs(leftRatio - rightRatio) < 0.15)
+ *    - Default to Left if no conditions match
+ *
+ * @param content The text content of the element
+ * @param position The grid position where the content starts
+ * @param boxBounds The bounding box containing the element
+ * @return alignment The calculated alignment (Left, Center, or Right)
+ */
+let calculate = (
+  content: string,
+  position: Position.t,
+  boxBounds: Bounds.t,
+): Types.alignment => {
+  // Trim content to get actual content length
+  let trimmed = content->String.trim
+  let contentStart = position.col
+  let contentEnd = contentStart + String.length(trimmed)
+
+  // Box interior bounds (excluding border characters '|' on both sides)
+  // boxBounds.left is the column of the left '|', so interior starts at left + 1
+  // boxBounds.right is the column of the right '|', so interior ends at right - 1
+  let boxLeft = boxBounds.left + 1
+  let boxRight = boxBounds.right - 1
+  let boxWidth = boxRight - boxLeft
+
+  // Handle edge case: box is too narrow (width <= 0)
+  if boxWidth <= 0 {
+    Left
+  } else {
+    // Calculate space on each side
+    let leftSpace = contentStart - boxLeft
+    let rightSpace = boxRight - contentEnd
+
+    // Convert to ratios (0.0 to 1.0) relative to box width
+    let leftRatio = Int.toFloat(leftSpace) /. Int.toFloat(boxWidth)
+    let rightRatio = Int.toFloat(rightSpace) /. Int.toFloat(boxWidth)
+
+    // Thresholds for alignment detection
+    let leftThreshold = 0.2
+    let rightThreshold = 0.2
+    let centerTolerance = 0.15
+
+    // Apply alignment rules
+    if leftRatio < leftThreshold && rightRatio > 0.3 {
+      // Element is close to left edge with significant space on right
+      Left
+    } else if rightRatio < rightThreshold && leftRatio > 0.3 {
+      // Element is close to right edge with significant space on left
+      Right
+    } else if Math.abs(leftRatio -. rightRatio) < centerTolerance {
+      // Element is roughly centered (ratios are similar)
+      Center
+    } else {
+      // Default to left alignment
+      Left
+    }
+  }
+}
+
+/**
+ * Alignment strategy determines how alignment should be calculated.
+ *
+ * - RespectPosition: Use position-based alignment calculation (buttons, links, emphasis)
+ * - AlwaysLeft: Always return Left alignment regardless of position (text, checkboxes, inputs)
+ */
+type alignmentStrategy =
+  | RespectPosition // Buttons, links, emphasis text
+  | AlwaysLeft // Regular text, checkboxes, inputs
+
+/**
+ * Calculates alignment with a specific strategy.
+ *
+ * @param content The text content of the element
+ * @param position The grid position where the content starts
+ * @param boxBounds The bounding box containing the element
+ * @param strategy The alignment strategy to use
+ * @return alignment The calculated alignment
+ */
+let calculateWithStrategy = (
+  content: string,
+  position: Position.t,
+  boxBounds: Bounds.t,
+  strategy: alignmentStrategy,
+): Types.alignment => {
+  switch strategy {
+  | RespectPosition => calculate(content, position, boxBounds)
+  | AlwaysLeft => Left
+  }
+}

package/src/parser/Semantic/Elements/ButtonParser.mjs

@@ -0,0 +1,58 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Types from "../../Core/Types.mjs";
+import * as AlignmentCalc from "../AlignmentCalc.mjs";
+import * as ElementParser from "./ElementParser.mjs";
+
+function slugify(text) {
+  return text.trim().toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "").replace(/-+/g, "-").replace(/^-+|-+$/g, "");
+}
+
+let buttonPattern = /^\s*\[\s*([^\]]+?)\s*\]\s*$/;
+
+let quickTestPattern = /\[.*\]/;
+
+function canParse(content) {
+  return quickTestPattern.test(content);
+}
+
+function parse(content, position, bounds) {
+  let result = buttonPattern.exec(content);
+  if (result == null) {
+    return;
+  }
+  let matches = result.slice(1);
+  let buttonText = matches[0];
+  if (buttonText === undefined) {
+    return;
+  }
+  let buttonText$1 = buttonText.trim();
+  let lowerText = buttonText$1.toLowerCase();
+  if (buttonText$1 === "" || lowerText === "x") {
+    return;
+  }
+  let buttonId = slugify(buttonText$1);
+  let align = AlignmentCalc.calculateWithStrategy(content, position, bounds, "RespectPosition");
+  return {
+    TAG: "Button",
+    id: buttonId,
+    text: buttonText$1,
+    position: Types.Position.make(position.row, position.col),
+    align: align,
+    actions: []
+  };
+}
+
+function make() {
+  return ElementParser.make(100, canParse, parse);
+}
+
+export {
+  slugify,
+  buttonPattern,
+  quickTestPattern,
+  canParse,
+  parse,
+  make,
+}
+/* Types Not a pure module */

package/src/parser/Semantic/Elements/ButtonParser.res

@@ -0,0 +1,131 @@
+// ButtonParser.res
+
+open Types
+// Parser for button syntax: [ Text ]
+//
+// Recognizes button elements in wireframes and extracts their text content.
+// Buttons are defined with square brackets containing text: [ Submit ], [ Cancel ], etc.
+
+/**
+ * Slugify a string to create a valid identifier.
+ * Converts text to lowercase, replaces spaces and special chars with hyphens.
+ *
+ * Examples:
+ * - "Submit Form" -> "submit-form"
+ * - "Log In" -> "log-in"
+ * - "Create Account!" -> "create-account"
+ *
+ * @param text - The text to slugify
+ * @return A slugified identifier string
+ */
+let slugify = (text: string): string => {
+  text
+  ->String.trim
+  ->String.toLowerCase
+  // Replace spaces with hyphens
+  ->Js.String2.replaceByRe(%re("/\s+/g"), "-")
+  // Remove non-alphanumeric characters (except hyphens)
+  ->Js.String2.replaceByRe(%re("/[^a-z0-9-]/g"), "")
+  // Remove consecutive hyphens
+  ->Js.String2.replaceByRe(%re("/-+/g"), "-")
+  // Remove leading/trailing hyphens
+  ->Js.String2.replaceByRe(%re("/^-+|-+$/g"), "")
+}
+
+/**
+ * Button pattern regex: \[\s*[^\]]+\s*\]
+ * Matches: [ Text ] with optional whitespace
+ * Examples:
+ * - [ Submit ]
+ * - [Login]
+ * - [  Create Account  ]
+ */
+let buttonPattern = %re("/^\s*\[\s*([^\]]+?)\s*\]\s*$/")
+
+/**
+ * Quick test pattern for canParse (optimized for speed).
+ * Just checks if content contains [ and ]
+ */
+let quickTestPattern = %re("/\[.*\]/")
+
+/**
+ * Check if content matches button syntax pattern.
+ *
+ * @param content - The text content to test
+ * @return true if content looks like a button
+ */
+let canParse = (content: string): bool => {
+  quickTestPattern->RegExp.test(content)
+}
+
+/**
+ * Parse button element from content.
+ *
+ * Extracts button text from [ Text ] syntax and creates a Button element.
+ * Returns None if:
+ * - Pattern doesn't match
+ * - Button text is empty after trimming
+ *
+ * @param content - The text content containing button syntax
+ * @param position - Grid position where button appears
+ * @param bounds - Bounding box of containing box (for alignment calculation)
+ * @return Some(Button element) or None
+ */
+let parse = (
+  content: string,
+  position: Position.t,
+  bounds: Bounds.t,
+): option<Types.element> => {
+  switch buttonPattern->RegExp.exec(content) {
+  | None => None
+  | Some(result) => {
+      let matches = result->RegExp.Result.matches
+      // RegExp.Result.matches slices off the full match, so matches[0] is the first captured group
+      switch matches[0] {
+      | None => None
+      | Some(buttonText) => {
+          let buttonText = buttonText->String.trim
+
+          // Return None for empty button text or single character 'x' (checkbox pattern)
+          // This allows [x] to be handled by CheckboxParser instead
+          let lowerText = buttonText->String.toLowerCase
+          if buttonText === "" || lowerText === "x" {
+            None
+          } else {
+            let buttonId = slugify(buttonText)
+
+            // Calculate alignment based on position within bounds
+            let align = AlignmentCalc.calculateWithStrategy(
+              content,
+              position,
+              bounds,
+              AlignmentCalc.RespectPosition,
+            )
+
+            // Create Button element
+            Some(
+              Types.Button({
+                id: buttonId,
+                text: buttonText,
+                position: Types.Position.make(position.row, position.col),
+                align: align,
+                actions: [],
+              }),
+            )
+          }
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Create a ButtonParser instance.
+ *
+ * Priority: 100 (high priority, checked early in the registry)
+ *
+ * @return An ElementParser configured for button recognition
+ */
+let make = (): ElementParser.elementParser => {
+  ElementParser.make(~priority=100, ~canParse, ~parse)
+}

package/src/parser/Semantic/Elements/CheckboxParser.mjs

@@ -0,0 +1,58 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Types from "../../Core/Types.mjs";
+import * as ElementParser from "./ElementParser.mjs";
+
+let checkedTestPattern = /\[x\]/i;
+
+let uncheckedTestPattern = /\[\s*\]/;
+
+let checkedParsePattern = /^\[x\]\s*(.*)/i;
+
+let uncheckedParsePattern = /^\[\s*\]\s*(.*)/;
+
+function make() {
+  return ElementParser.make(85, content => {
+    if (checkedTestPattern.test(content)) {
+      return true;
+    } else {
+      return uncheckedTestPattern.test(content);
+    }
+  }, (content, position, _bounds) => {
+    let trimmed = content.trim();
+    let result = checkedParsePattern.exec(trimmed);
+    if (result == null) {
+      let result$1 = uncheckedParsePattern.exec(trimmed);
+      if (result$1 == null) {
+        return;
+      }
+      let matches = result$1.slice(1);
+      let labelStr = matches[0];
+      let label = labelStr !== undefined ? labelStr.trim() : "";
+      return {
+        TAG: "Checkbox",
+        checked: false,
+        label: label,
+        position: Types.Position.make(position.row, position.col)
+      };
+    }
+    let matches$1 = result.slice(1);
+    let labelStr$1 = matches$1[0];
+    let label$1 = labelStr$1 !== undefined ? labelStr$1.trim() : "";
+    return {
+      TAG: "Checkbox",
+      checked: true,
+      label: label$1,
+      position: Types.Position.make(position.row, position.col)
+    };
+  });
+}
+
+export {
+  checkedTestPattern,
+  uncheckedTestPattern,
+  checkedParsePattern,
+  uncheckedParsePattern,
+  make,
+}
+/* Types Not a pure module */

package/src/parser/Semantic/Elements/CheckboxParser.res

@@ -0,0 +1,79 @@
+// CheckboxParser.res
+// Parser for checkbox syntax "[x]" (checked) and "[ ]" (unchecked)
+
+/**
+ * Creates a checkbox element parser.
+ *
+ * Recognizes:
+ * - "[x]" - Checked checkbox
+ * - "[ ]" - Unchecked checkbox
+ *
+ * Optionally followed by label text on the same line.
+ *
+ * Priority: 85 (high - should be checked before text parser but after buttons)
+ *
+ * Examples:
+ * - "[x] Accept terms" -> Checkbox(checked=true, label="Accept terms")
+ * - "[ ] Subscribe" -> Checkbox(checked=false, label="Subscribe")
+ * - "[x]" -> Checkbox(checked=true, label="")
+ */
+// Pattern for detecting checkboxes (used in canParse)
+let checkedTestPattern = %re("/\[x\]/i")
+let uncheckedTestPattern = %re("/\[\s*\]/")
+
+// Patterns for parsing (capturing label)
+let checkedParsePattern = %re("/^\[x\]\s*(.*)/i")
+let uncheckedParsePattern = %re("/^\[\s*\]\s*(.*)/")
+
+let make = (): ElementParser.elementParser => {
+  ElementParser.make(
+    ~priority=85,
+    ~canParse=content => {
+      // Match either [x] or [ ] patterns
+      checkedTestPattern->RegExp.test(content) || uncheckedTestPattern->RegExp.test(content)
+    },
+    ~parse=(content, position, _bounds) => {
+      let trimmed = content->String.trim
+
+      // Try to match checked checkbox [x]
+      switch checkedParsePattern->RegExp.exec(trimmed) {
+      | Some(result) => {
+          let matches = result->RegExp.Result.matches
+          let label = switch matches[0] {
+          | Some(labelStr) => labelStr->String.trim
+          | None => ""
+          }
+
+          Some(
+            Types.Checkbox({
+              checked: true,
+              label: label,
+              position: Types.Position.make(position.row, position.col),
+            })
+          )
+        }
+      | None => {
+          // Try to match unchecked checkbox [ ]
+          switch uncheckedParsePattern->RegExp.exec(trimmed) {
+          | Some(result) => {
+              let matches = result->RegExp.Result.matches
+              let label = switch matches[0] {
+              | Some(labelStr) => labelStr->String.trim
+              | None => ""
+              }
+
+              Some(
+                Types.Checkbox({
+                  checked: false,
+                  label: label,
+                  position: Types.Position.make(position.row, position.col),
+                })
+              )
+            }
+          | None => None
+          }
+        }
+      }
+    }
+  )
+}

package/src/parser/Semantic/Elements/CodeTextParser.mjs

@@ -0,0 +1,50 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Types from "../../Core/Types.mjs";
+import * as AlignmentCalc from "../AlignmentCalc.mjs";
+import * as ElementParser from "./ElementParser.mjs";
+
+let quotedPattern = /^\s*'([^']+)'\s*$/;
+
+let quickTestPattern = /'.+'/;
+
+function canParse(content) {
+  return quickTestPattern.test(content);
+}
+
+function parse(content, position, bounds) {
+  let result = quotedPattern.exec(content);
+  if (result == null) {
+    return;
+  }
+  let matches = result.slice(1);
+  let quotedText = matches[0];
+  if (quotedText === undefined) {
+    return;
+  }
+  let trimmedText = quotedText.trim();
+  if (trimmedText === "") {
+    return;
+  }
+  let align = AlignmentCalc.calculateWithStrategy(content, position, bounds, "RespectPosition");
+  return {
+    TAG: "Text",
+    content: trimmedText,
+    emphasis: true,
+    position: Types.Position.make(position.row, position.col),
+    align: align
+  };
+}
+
+function make() {
+  return ElementParser.make(75, canParse, parse);
+}
+
+export {
+  quotedPattern,
+  quickTestPattern,
+  canParse,
+  parse,
+  make,
+}
+/* Types Not a pure module */

package/src/parser/Semantic/Elements/CodeTextParser.res

@@ -0,0 +1,111 @@
+// CodeTextParser.res
+// Parser for aligned text syntax: 'text'
+//
+// Recognizes single-quote-wrapped text and applies position-based alignment.
+// Unlike regular text (which defaults to left), quoted text respects its
+// position within the parent container for alignment calculation.
+//
+// Examples:
+// - 'Submit' at center position -> Center aligned
+// - 'Cancel' at left position -> Left aligned
+// - 'Next' at right position -> Right aligned
+
+open Types
+
+/**
+ * Quoted text pattern regex: 'text'
+ * Matches text wrapped in single quotes
+ * Examples:
+ * - 'Submit'
+ * - 'Centered Text'
+ * - '  spaced  '
+ */
+let quotedPattern = %re("/^\s*'([^']+)'\s*$/")
+
+/**
+ * Quick test pattern for canParse (optimized for speed).
+ * Just checks if content contains single quotes wrapping text
+ */
+let quickTestPattern = %re("/'.+'/")
+
+/**
+ * Check if content matches quoted text syntax pattern.
+ *
+ * @param content - The text content to test
+ * @return true if content looks like quoted text
+ */
+let canParse = (content: string): bool => {
+  Js.Re.test_(quickTestPattern, content)
+}
+
+/**
+ * Parse quoted text element from content.
+ *
+ * Extracts text from 'text' syntax and creates a Text element with:
+ * - Position-based alignment (RespectPosition strategy)
+ * - emphasis: true (indicates special formatting)
+ *
+ * This allows single-quote-wrapped text to be centered or right-aligned
+ * based on its position within the parent container, unlike regular
+ * text which always defaults to left alignment.
+ *
+ * @param content - The text content containing quote syntax
+ * @param position - Grid position where quoted text appears
+ * @param bounds - Bounding box of containing box (for alignment calculation)
+ * @return Some(Text element) or None
+ */
+let parse = (
+  content: string,
+  position: Position.t,
+  bounds: Bounds.t,
+): option<Types.element> => {
+  switch quotedPattern->RegExp.exec(content) {
+  | None => None
+  | Some(result) => {
+      let matches = result->RegExp.Result.matches
+      // RegExp.Result.matches slices off the full match, so matches[0] is the first captured group
+      switch matches[0] {
+      | None => None
+      | Some(quotedText) => {
+          let trimmedText = quotedText->String.trim
+
+          // Return None for empty quoted text
+          if trimmedText === "" {
+            None
+          } else {
+            // Calculate alignment based on position within bounds
+            // Quoted text uses RespectPosition strategy for proper alignment
+            let align = AlignmentCalc.calculateWithStrategy(
+              content,
+              position,
+              bounds,
+              AlignmentCalc.RespectPosition,
+            )
+
+            // Create Text element with emphasis=true to indicate special formatting
+            Some(
+              Types.Text({
+                content: trimmedText,
+                emphasis: true,
+                position: Types.Position.make(position.row, position.col),
+                align: align,
+              }),
+            )
+          }
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Create a CodeTextParser instance.
+ *
+ * Priority: 75 (between EmphasisParser and LinkParser)
+ * Higher than emphasis but lower than links/buttons
+ *
+ * @return An ElementParser configured for quoted text recognition
+ */
+let make = (): ElementParser.elementParser => {
+  ElementParser.make(~priority=75, ~canParse, ~parse)
+}

package/src/parser/Semantic/Elements/ElementParser.mjs

@@ -0,0 +1,15 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+
+function make(priority, canParse, parse) {
+  return {
+    priority: priority,
+    canParse: canParse,
+    parse: parse
+  };
+}
+
+export {
+  make,
+}
+/* No side effect */

package/src/parser/Semantic/Elements/ElementParser.res

@@ -0,0 +1,83 @@
+// ElementParser.res
+// Interface for all element parsers in the semantic parsing stage
+//
+// This module defines the contract that all element parsers must implement
+// to be registered in the ParserRegistry and participate in element recognition.
+
+open Types
+
+/**
+ * Result type for parsing operations.
+ * Returns Some(element) if parsing succeeds, None if the pattern doesn't match.
+ */
+type parseResult<'element> = option<'element>
+
+/**
+ * ElementParser interface type.
+ *
+ * All element parsers (ButtonParser, InputParser, LinkParser, etc.) must
+ * implement this interface to be compatible with the ParserRegistry.
+ *
+ * Fields:
+ * - priority: Determines the order in which parsers are tried (higher = earlier)
+ *             Recommended ranges: 100 (buttons), 90 (inputs), 80 (links), 70 (emphasis), 1 (text fallback)
+ * - canParse: Quick check function to determine if this parser can handle the content
+ * - parse: Full parsing function that extracts element data from content
+ */
+type t<'position, 'bounds, 'element> = {
+  /**
+   * Priority value for parser ordering.
+   * Higher priority parsers are checked first.
+   * Use 1 for fallback parsers, 100+ for specific element types.
+   */
+  priority: int,
+
+  /**
+   * Quick pattern matching function.
+   * Returns true if this parser can handle the given content string.
+   * Should be fast and use simple pattern matching (regex test, string contains, etc.)
+   *
+   * @param content - The text content to check
+   * @return true if this parser should attempt to parse the content
+   */
+  canParse: string => bool,
+
+  /**
+   * Full parsing function.
+   * Extracts element data from content and returns a structured element.
+   * Only called if canParse() returns true.
+   *
+   * @param content - The text content to parse
+   * @param position - Position in the grid where this content was found
+   * @param bounds - Bounding box of the containing box (for alignment calculation)
+   * @return Some(element) if parsing succeeds, None if it fails
+   */
+  parse: (string, 'position, 'bounds) => parseResult<'element>,
+}
+
+/**
+ * Concrete type alias for element parsers using the actual types.
+ * This will be used by the ParserRegistry and concrete parser implementations.
+ *
+ * Note: This assumes Position.t, Bounds.t, and element types are defined in Core/Types.res
+ * The generic version above allows for testing without those dependencies.
+ */
+type elementParser = t<Position.t, Bounds.t, Types.element>
+
+/**
+ * Helper function to create an element parser.
+ *
+ * @param priority - Priority value for ordering
+ * @param canParse - Pattern matching function
+ * @param parse - Full parsing function
+ * @return An ElementParser.t instance
+ */
+let make = (
+  ~priority: int,
+  ~canParse: string => bool,
+  ~parse: (string, Position.t, Bounds.t) => parseResult<Types.element>,
+): elementParser => {
+  priority,
+  canParse,
+  parse,
+}