wyreframe 0.7.7 → 0.7.9

package/package.json

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

package/src/parser/Semantic/AlignmentCalc.mjs

@@ -19,7 +19,7 @@ function calculate(content, position, boxBounds) {
     return "Left";
   } else if (rightRatio < 0.2 && leftRatio > 0.3) {
     return "Right";
-  } else if (Math.abs(leftRatio - rightRatio) < 0.15) {
+  } else if (Math.abs(leftRatio - rightRatio) < 0.2) {
     return "Center";
   } else {
     return "Left";

package/src/parser/Semantic/AlignmentCalc.res

@@ -52,9 +52,11 @@ let calculate = (
     let rightRatio = Int.toFloat(rightSpace) /. Int.toFloat(boxWidth)
 
     // Thresholds for alignment detection
+    // Note: centerTolerance increased from 0.15 to 0.2 to be more lenient
+    // This fixes issue #22 where visually centered buttons were detected as Left
     let leftThreshold = 0.2
     let rightThreshold = 0.2
-    let centerTolerance = 0.15
+    let centerTolerance = 0.2
 
     // Apply alignment rules
     if leftRatio < leftThreshold && rightRatio > 0.3 {

package/src/renderer/Renderer.mjs

@@ -1,6 +1,7 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
 import * as Parser from "../parser/Parser.mjs";
+import * as Core__Array from "@rescript/core/src/Core__Array.mjs";
 import * as Core__Option from "@rescript/core/src/Core__Option.mjs";
 import * as ErrorMessages from "../parser/Errors/ErrorMessages.mjs";
 import * as Stdlib_JsError from "@rescript/runtime/lib/es6/Stdlib_JsError.js";
@@ -52,6 +53,7 @@ let defaultStyles = `
   .align-right { text-align:right; }
   .wf-row.align-center { justify-content:center; }
   .wf-row.align-right { justify-content:flex-end; }
+  .wf-row.distribute { justify-content:space-between; }
   .wf-button.align-center, .wf-link.align-center { margin-left:auto; margin-right:auto; }
   .wf-button.align-right, .wf-link.align-right { margin-left:auto; margin-right:0; }
 `;
@@ -102,6 +104,35 @@ function applyAlignment(el, align) {
   }
 }
 
+function getElementAlignment(elem) {
+  switch (elem.TAG) {
+    case "Button" :
+    case "Link" :
+    case "Text" :
+      return elem.align;
+    default:
+      return;
+  }
+}
+
+function hasDistributedChildren(children) {
+  let alignments = Core__Array.filterMap(children, getElementAlignment);
+  if (alignments.length < 2) {
+    return false;
+  }
+  let hasLeft = alignments.some(a => a === "Left");
+  let hasCenter = alignments.some(a => a === "Center");
+  let hasRight = alignments.some(a => a === "Right");
+  let differentAlignmentCount = ((
+    hasLeft ? 1 : 0
+  ) + (
+    hasCenter ? 1 : 0
+  ) | 0) + (
+    hasRight ? 1 : 0
+  ) | 0;
+  return differentAlignmentCount >= 2;
+}
+
 function deviceTypeToClass(device) {
   if (typeof device === "object") {
     return "wf-device-custom-" + device._0.toString() + "x" + device._1.toString();
@@ -257,10 +288,15 @@ function renderElement(_elem, onAction, onDeadEnd) {
         spacer.className = "wf-spacer";
         return Primitive_option.some(spacer);
       case "Row" :
+        let children = elem.children;
         let row = document.createElement("div");
         row.className = "wf-row";
-        applyAlignment(row, elem.align);
-        elem.children.forEach(child => {
+        if (hasDistributedChildren(children)) {
+          row.classList.add("distribute");
+        } else {
+          applyAlignment(row, elem.align);
+        }
+        children.forEach(child => {
           let el = renderElement(child, onAction, onDeadEnd);
           if (el !== undefined) {
             row.appendChild(Primitive_option.valFromOption(el));
@@ -565,6 +601,8 @@ export {
   getInputsFromBox,
   alignmentToClass,
   applyAlignment,
+  getElementAlignment,
+  hasDistributedChildren,
   deviceTypeToClass,
   isNavigationAction,
   hasNavigationAction,

package/src/renderer/Renderer.res

@@ -164,6 +164,7 @@ let defaultStyles = `
   .align-right { text-align:right; }
   .wf-row.align-center { justify-content:center; }
   .wf-row.align-right { justify-content:flex-end; }
+  .wf-row.distribute { justify-content:space-between; }
   .wf-button.align-center, .wf-link.align-center { margin-left:auto; margin-right:auto; }
   .wf-button.align-right, .wf-link.align-right { margin-left:auto; margin-right:0; }
 `
@@ -211,6 +212,48 @@ let applyAlignment = (el: DomBindings.element, align: alignment): unit => {
   }
 }
 
+/**
+ * Get the alignment of an element (for buttons, links, text).
+ */
+let getElementAlignment = (elem: element): option<alignment> => {
+  switch elem {
+  | Button({align, _}) => Some(align)
+  | Link({align, _}) => Some(align)
+  | Text({align, _}) => Some(align)
+  | _ => None
+  }
+}
+
+/**
+ * Check if Row children have distributed alignments (Left/Center/Right pattern).
+ * This indicates the buttons should be distributed using justify-content: space-between.
+ *
+ * Issue #23: When buttons are positioned across a row with different alignments
+ * (e.g., [ Google ]  [ Apple ]  [ GitHub ] with Left/Center/Right),
+ * use flexbox space-between distribution instead of per-element alignment.
+ */
+let hasDistributedChildren = (children: array<element>): bool => {
+  // Get all child alignments
+  let alignments = children
+    ->Array.filterMap(getElementAlignment)
+
+  // Need at least 2 elements to be considered distributed
+  if alignments->Array.length < 2 {
+    false
+  } else {
+    // Check if we have different alignments
+    let hasLeft = alignments->Array.some(a => a == Left)
+    let hasCenter = alignments->Array.some(a => a == Center)
+    let hasRight = alignments->Array.some(a => a == Right)
+
+    // Distributed means we have at least 2 different alignments
+    let differentAlignmentCount =
+      (hasLeft ? 1 : 0) + (hasCenter ? 1 : 0) + (hasRight ? 1 : 0)
+
+    differentAlignmentCount >= 2
+  }
+}
+
 /**
  * Convert device type to CSS class name.
  */
@@ -435,7 +478,13 @@ let rec renderElement = (
   | Row({children, align}) => {
       let row = DomBindings.document->DomBindings.createElement("div")
       row->DomBindings.setClassName("wf-row")
-      applyAlignment(row, align)
+
+      // Issue #23: Use space-between distribution for rows with distributed alignments
+      if hasDistributedChildren(children) {
+        row->DomBindings.classList->DomBindings.add("distribute")
+      } else {
+        applyAlignment(row, align)
+      }
 
       children->Array.forEach(child => {
         switch renderElement(child, ~onAction?, ~onDeadEnd?) {