wyreframe 0.7.8 → 0.7.10

package/package.json

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

package/src/renderer/Renderer.gen.tsx

@@ -11,6 +11,8 @@ import type {deviceType as Types_deviceType} from '../../src/parser/Core/Types.g
 
 import type {t as ErrorTypes_t} from '../../src/parser/Errors/ErrorTypes.gen';
 
+import type {t as Map_t} from './Map.gen';
+
 export abstract class DomBindings_element { protected opaque!: any }; /* simulate opaque types */
 
 /** * Scene change callback type.
@@ -48,7 +50,7 @@ export type renderOptions = {
 
 /** * Scene management interface returned by render function. */
 export type sceneManager = {
-  readonly goto: (_1:string) => void; 
+  readonly goto: (_1:string) => boolean; 
   readonly back: () => void; 
   readonly forward: () => void; 
   readonly refresh: () => void; 
@@ -74,6 +76,10 @@ export type createUIResult =
     { TAG: "Ok"; _0: createUISuccessResult }
   | { TAG: "Error"; _0: ErrorTypes_t[] };
 
+/** * Creates a scene manager for navigation between scenes.
+ * Exported for testing purposes. */
+export const createSceneManager: (scenes:Map_t<string,DomBindings_element>, onSceneChange:(undefined | onSceneChangeCallback)) => sceneManager = RendererJS.createSceneManager as any;
+
 export const render: (ast:Types_ast, options:(undefined | renderOptions)) => renderResult = RendererJS.render as any;
 
 export const toHTMLString: (_ast:Types_ast, _options:(undefined | renderOptions)) => string = RendererJS.toHTMLString as any;

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();
@@ -182,8 +213,12 @@ function renderElement(_elem, onAction, onDeadEnd) {
           if (onAction !== undefined) {
             btn.addEventListener("click", _event => {
               let action = actions[0];
-              if (action !== undefined) {
-                return onAction(action);
+              if (action === undefined) {
+                return;
+              }
+              let success = onAction(action);
+              if (!success && onDeadEnd !== undefined) {
+                return onDeadEnd(id, text, "button");
               }
             });
           }
@@ -216,8 +251,12 @@ function renderElement(_elem, onAction, onDeadEnd) {
             link.addEventListener("click", event => {
               event.preventDefault();
               let action = actions$1[0];
-              if (action !== undefined) {
-                return onAction(action);
+              if (action === undefined) {
+                return;
+              }
+              let success = onAction(action);
+              if (!success && onDeadEnd !== undefined) {
+                return onDeadEnd(id$1, text$1, "link");
               }
             });
           }
@@ -257,10 +296,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));
@@ -339,12 +383,16 @@ function createSceneManager(scenes, onSceneChange) {
     }
   };
   let goto = id => {
+    if (!scenes.has(id)) {
+      return false;
+    }
     let currentId = currentScene.contents;
     if (currentId !== undefined && currentId !== id) {
       historyStack.contents = historyStack.contents.concat([currentId]);
       forwardStack.contents = [];
     }
     switchToScene(id, undefined);
+    return true;
   };
   let back = () => {
     let history = historyStack.contents;
@@ -459,16 +507,18 @@ function render(ast, options) {
       if (action === "Back") {
         let back = backRef.contents;
         if (back !== undefined) {
-          return back();
+          back();
+          return true;
         } else {
-          return;
+          return false;
         }
       }
       let forward = forwardRef.contents;
       if (forward !== undefined) {
-        return forward();
+        forward();
+        return true;
       } else {
-        return;
+        return false;
       }
     } else {
       switch (action.TAG) {
@@ -477,11 +527,11 @@ function render(ast, options) {
           if (goto !== undefined) {
             return goto(action.target);
           } else {
-            return;
+            return false;
           }
         case "Validate" :
         case "Call" :
-          return;
+          return true;
       }
     }
   };
@@ -565,6 +615,8 @@ export {
   getInputsFromBox,
   alignmentToClass,
   applyAlignment,
+  getElementAlignment,
+  hasDistributedChildren,
   deviceTypeToClass,
   isNavigationAction,
   hasNavigationAction,

package/src/renderer/Renderer.res

@@ -108,7 +108,7 @@ let defaultOptions: renderOptions = {
  * Scene management interface returned by render function.
  */
 type sceneManager = {
-  goto: string => unit,
+  goto: string => bool,
   back: unit => unit,
   forward: unit => unit,
   refresh: unit => unit,
@@ -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.
  */
@@ -233,8 +276,9 @@ let deviceTypeToClass = (device: deviceType): string => {
 /**
  * Action handler function type - called when an element's action is triggered.
  * The function receives the action and should execute it (e.g., goto scene).
+ * Returns true if the action was successful, false if it failed (e.g., scene doesn't exist).
  */
-type actionHandler = interactionAction => unit
+type actionHandler = interactionAction => bool
 
 /**
  * Dead end handler function type - called when an element without navigation is clicked.
@@ -317,7 +361,17 @@ let rec renderElement = (
             btn->DomBindings.addEventListener("click", _event => {
               // Execute first action (most common case)
               switch actions->Array.get(0) {
-              | Some(action) => handler(action)
+              | Some(action) => {
+                  let success = handler(action)
+                  // If navigation failed (e.g., target scene doesn't exist),
+                  // treat it as a dead end (Issue #24)
+                  if !success {
+                    switch onDeadEnd {
+                    | Some(deadEndHandler) => deadEndHandler(id, text, #button)
+                    | None => ()
+                    }
+                  }
+                }
               | None => ()
               }
             })
@@ -369,7 +423,17 @@ let rec renderElement = (
               DomBindings.preventDefault(event)
               // Execute first action
               switch actions->Array.get(0) {
-              | Some(action) => handler(action)
+              | Some(action) => {
+                  let success = handler(action)
+                  // If navigation failed (e.g., target scene doesn't exist),
+                  // treat it as a dead end (Issue #24)
+                  if !success {
+                    switch onDeadEnd {
+                    | Some(deadEndHandler) => deadEndHandler(id, text, #link)
+                    | None => ()
+                    }
+                  }
+                }
               | None => ()
               }
             })
@@ -435,7 +499,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?) {
@@ -496,6 +566,11 @@ let renderScene = (
 // Scene Manager Implementation
 // ============================================================================
 
+/**
+ * Creates a scene manager for navigation between scenes.
+ * Exported for testing purposes.
+ */
+@genType
 let createSceneManager = (
   scenes: Map.t<string, DomBindings.element>,
   ~onSceneChange: option<onSceneChangeCallback>=?,
@@ -542,17 +617,25 @@ let createSceneManager = (
     }
   }
 
-  let goto = (id: string): unit => {
-    // Add current scene to history before navigating
-    switch currentScene.contents {
-    | Some(currentId) if currentId != id => {
-        historyStack := historyStack.contents->Array.concat([currentId])
-        // Clear forward stack when navigating to new scene
-        forwardStack := []
+  let goto = (id: string): bool => {
+    // Check if target scene exists first
+    if !(scenes->Map.has(id)) {
+      // Scene doesn't exist - return false to indicate failure
+      // Do NOT modify history or switch scenes
+      false
+    } else {
+      // Add current scene to history before navigating
+      switch currentScene.contents {
+      | Some(currentId) if currentId != id => {
+          historyStack := historyStack.contents->Array.concat([currentId])
+          // Clear forward stack when navigating to new scene
+          forwardStack := []
+        }
+      | _ => ()
       }
-    | _ => ()
+      switchToScene(id)
+      true
     }
-    switchToScene(id)
   }
 
   let back = (): unit => {
@@ -697,38 +780,45 @@ let render = (ast: ast, options: option<renderOptions>): renderResult => {
   }
 
   // Create refs to hold navigation functions (set after sceneManager is created)
-  let gotoRef: ref<option<string => unit>> = ref(None)
+  let gotoRef: ref<option<string => bool>> = ref(None)
   let backRef: ref<option<unit => unit>> = ref(None)
   let forwardRef: ref<option<unit => unit>> = ref(None)
 
   // Create action handler that uses the refs
-  let handleAction = (action: interactionAction): unit => {
+  // Returns true if action succeeded, false if it failed (e.g., target scene doesn't exist)
+  let handleAction = (action: interactionAction): bool => {
     switch action {
     | Goto({target, _}) => {
         switch gotoRef.contents {
         | Some(goto) => goto(target)
-        | None => ()
+        | None => false
         }
       }
     | Back => {
         switch backRef.contents {
-        | Some(back) => back()
-        | None => ()
+        | Some(back) => {
+            back()
+            true
+          }
+        | None => false
         }
       }
     | Forward => {
         switch forwardRef.contents {
-        | Some(forward) => forward()
-        | None => ()
+        | Some(forward) => {
+            forward()
+            true
+          }
+        | None => false
         }
       }
     | Validate(_) => {
         // TODO: Implement field validation
-        ()
+        true
       }
     | Call(_) => {
         // TODO: Implement custom function calls
-        ()
+        true
       }
     }
   }
@@ -764,7 +854,9 @@ let render = (ast: ast, options: option<renderOptions>): renderResult => {
 
   if ast.scenes->Array.length > 0 {
     switch ast.scenes->Array.get(0) {
-    | Some(firstScene) => manager.goto(firstScene.id)
+    | Some(firstScene) => {
+        let _ = manager.goto(firstScene.id)
+      }
     | None => ()
     }
   }