wyreframe 0.4.3 → 0.5.0

package/package.json

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

package/src/renderer/Renderer.gen.tsx

@@ -19,6 +19,22 @@ export abstract class DomBindings_element { protected opaque!: any }; /* simulat
  * @param toScene The scene ID navigating to */
 export type onSceneChangeCallback = (_1:(undefined | string), _2:string) => void;
 
+/** * Dead end click info type.
+ * Contains information about the clicked element that has no navigation target. */
+export type deadEndClickInfo = {
+  readonly sceneId: string; 
+  readonly elementId: string; 
+  readonly elementText: string; 
+  readonly elementType: 
+    "link"
+  | "button"
+};
+
+/** * Dead end click callback type.
+ * Called when a button or link without navigation target is clicked.
+ * @param info Information about the clicked element and current scene */
+export type onDeadEndClickCallback = (_1:deadEndClickInfo) => void;
+
 /** * Configuration for the rendering process. */
 export type renderOptions = {
   readonly theme: (undefined | string); 
@@ -26,6 +42,7 @@ export type renderOptions = {
   readonly injectStyles: boolean; 
   readonly containerClass: (undefined | string); 
   readonly onSceneChange: (undefined | onSceneChangeCallback); 
+  readonly onDeadEndClick: (undefined | onDeadEndClickCallback); 
   readonly device: (undefined | Types_deviceType)
 };
 

package/src/renderer/Renderer.mjs

@@ -14,6 +14,7 @@ let defaultOptions = {
   injectStyles: true,
   containerClass: undefined,
   onSceneChange: undefined,
+  onDeadEndClick: undefined,
   device: undefined
 };
 
@@ -134,7 +135,24 @@ function deviceTypeToClass(device) {
   }
 }
 
-function renderElement(_elem, onAction) {
+function isNavigationAction(action) {
+  if (typeof action !== "object") {
+    return true;
+  }
+  switch (action.TAG) {
+    case "Validate" :
+    case "Call" :
+      return false;
+    default:
+      return true;
+  }
+}
+
+function hasNavigationAction(actions) {
+  return actions.some(isNavigationAction);
+}
+
+function renderElement(_elem, onAction, onDeadEnd) {
   while (true) {
     let elem = _elem;
     if (isInputOnlyBox(elem)) {
@@ -156,7 +174,7 @@ function renderElement(_elem, onAction) {
           div.dataset["name"] = name;
         }
         elem.children.forEach(child => {
-          let el = renderElement(child, onAction);
+          let el = renderElement(child, onAction, onDeadEnd);
           if (el !== undefined) {
             div.appendChild(Primitive_option.valFromOption(el));
             return;
@@ -165,18 +183,25 @@ function renderElement(_elem, onAction) {
         return Primitive_option.some(div);
       case "Button" :
         let actions = elem.actions;
+        let text = elem.text;
+        let id = elem.id;
         let btn = document.createElement("button");
         btn.className = "wf-button";
-        btn.id = elem.id;
-        btn.textContent = elem.text;
+        btn.id = id;
+        btn.textContent = text;
         applyAlignment(btn, elem.align);
-        if (actions.length > 0 && onAction !== undefined) {
-          btn.addEventListener("click", _event => {
-            let action = actions[0];
-            if (action !== undefined) {
-              return onAction(action);
-            }
-          });
+        let hasNavigation = actions.some(isNavigationAction);
+        if (hasNavigation) {
+          if (onAction !== undefined) {
+            btn.addEventListener("click", _event => {
+              let action = actions[0];
+              if (action !== undefined) {
+                return onAction(action);
+              }
+            });
+          }
+        } else if (onDeadEnd !== undefined) {
+          btn.addEventListener("click", _event => onDeadEnd(id, text, "button"));
         }
         return Primitive_option.some(btn);
       case "Input" :
@@ -190,19 +215,29 @@ function renderElement(_elem, onAction) {
         return Primitive_option.some(input$1);
       case "Link" :
         let actions$1 = elem.actions;
+        let text$1 = elem.text;
+        let id$1 = elem.id;
         let link = document.createElement("a");
         link.className = "wf-link";
-        link.id = elem.id;
+        link.id = id$1;
         link.href = "#";
-        link.textContent = elem.text;
+        link.textContent = text$1;
         applyAlignment(link, elem.align);
-        if (actions$1.length > 0 && onAction !== undefined) {
+        let hasNavigation$1 = actions$1.some(isNavigationAction);
+        if (hasNavigation$1) {
+          if (onAction !== undefined) {
+            link.addEventListener("click", event => {
+              event.preventDefault();
+              let action = actions$1[0];
+              if (action !== undefined) {
+                return onAction(action);
+              }
+            });
+          }
+        } else if (onDeadEnd !== undefined) {
           link.addEventListener("click", event => {
             event.preventDefault();
-            let action = actions$1[0];
-            if (action !== undefined) {
-              return onAction(action);
-            }
+            onDeadEnd(id$1, text$1, "link");
           });
         }
         return Primitive_option.some(link);
@@ -239,7 +274,7 @@ function renderElement(_elem, onAction) {
         row.className = "wf-row";
         applyAlignment(row, elem.align);
         elem.children.forEach(child => {
-          let el = renderElement(child, onAction);
+          let el = renderElement(child, onAction, onDeadEnd);
           if (el !== undefined) {
             row.appendChild(Primitive_option.valFromOption(el));
             return;
@@ -255,7 +290,7 @@ function renderElement(_elem, onAction) {
         let contentEl = document.createElement("div");
         contentEl.className = "wf-section-content";
         elem.children.forEach(child => {
-          let el = renderElement(child, onAction);
+          let el = renderElement(child, onAction, onDeadEnd);
           if (el !== undefined) {
             contentEl.appendChild(Primitive_option.valFromOption(el));
             return;
@@ -268,12 +303,12 @@ function renderElement(_elem, onAction) {
   };
 }
 
-function renderScene(scene, onAction) {
+function renderScene(scene, onAction, onDeadEnd) {
   let sceneEl = document.createElement("div");
   sceneEl.className = "wf-scene";
   sceneEl.dataset["scene"] = scene.id;
   scene.elements.forEach(elem => {
-    let el = renderElement(elem, onAction);
+    let el = renderElement(elem, onAction, onDeadEnd);
     if (el !== undefined) {
       sceneEl.appendChild(Primitive_option.valFromOption(el));
       return;
@@ -465,7 +500,14 @@ function render(ast, options) {
   };
   let sceneMap = new Map();
   ast.scenes.forEach(scene => {
-    let sceneEl = renderScene(scene, handleAction);
+    let callback = opts.onDeadEndClick;
+    let handleDeadEnd = callback !== undefined ? (elementId, elementText, elementType) => callback({
+        sceneId: scene.id,
+        elementId: elementId,
+        elementText: elementText,
+        elementType: elementType
+      }) : undefined;
+    let sceneEl = renderScene(scene, handleAction, handleDeadEnd);
     app.appendChild(sceneEl);
     sceneMap.set(scene.id, sceneEl);
   });
@@ -538,6 +580,8 @@ export {
   alignmentToClass,
   applyAlignment,
   deviceTypeToClass,
+  isNavigationAction,
+  hasNavigationAction,
   renderElement,
   renderScene,
   createSceneManager,

package/src/renderer/Renderer.res

@@ -56,6 +56,24 @@ module DomBindings = {
  */
 type onSceneChangeCallback = (option<string>, string) => unit
 
+/**
+ * Dead end click info type.
+ * Contains information about the clicked element that has no navigation target.
+ */
+type deadEndClickInfo = {
+  sceneId: string,
+  elementId: string,
+  elementText: string,
+  elementType: [#button | #link],
+}
+
+/**
+ * Dead end click callback type.
+ * Called when a button or link without navigation target is clicked.
+ * @param info Information about the clicked element and current scene
+ */
+type onDeadEndClickCallback = deadEndClickInfo => unit
+
 /**
  * Configuration for the rendering process.
  */
@@ -65,6 +83,7 @@ type renderOptions = {
   injectStyles: bool,
   containerClass: option<string>,
   onSceneChange: option<onSceneChangeCallback>,
+  onDeadEndClick: option<onDeadEndClickCallback>,
   device: option<deviceType>,
 }
 
@@ -77,6 +96,7 @@ let defaultOptions: renderOptions = {
   injectStyles: true,
   containerClass: None,
   onSceneChange: None,
+  onDeadEndClick: None,
   device: None,
 }
 
@@ -230,17 +250,44 @@ let deviceTypeToClass = (device: deviceType): string => {
  */
 type actionHandler = interactionAction => unit
 
+/**
+ * Dead end handler function type - called when an element without navigation is clicked.
+ * Receives element ID, text, and type.
+ */
+type deadEndHandler = (string, string, [#button | #link]) => unit
+
+/**
+ * Check if an action is a navigation action (Goto, Back, Forward).
+ */
+let isNavigationAction = (action: interactionAction): bool => {
+  switch action {
+  | Goto(_) | Back | Forward => true
+  | Validate(_) | Call(_) => false
+  }
+}
+
+/**
+ * Check if actions array has any navigation actions.
+ */
+let hasNavigationAction = (actions: array<interactionAction>): bool => {
+  actions->Array.some(isNavigationAction)
+}
+
 // ============================================================================
 // Element Rendering
 // ============================================================================
 
-let rec renderElement = (elem: element, ~onAction: option<actionHandler>=?): option<DomBindings.element> => {
+let rec renderElement = (
+  elem: element,
+  ~onAction: option<actionHandler>=?,
+  ~onDeadEnd: option<deadEndHandler>=?,
+): option<DomBindings.element> => {
   // Handle input-only boxes by rendering children directly in a wrapper
   if isInputOnlyBox(elem) {
     let inputs = getInputsFromBox(elem)
     // If only one input, render it directly
     switch inputs->Array.get(0) {
-    | Some(input) => renderElement(input, ~onAction?)
+    | Some(input) => renderElement(input, ~onAction?, ~onDeadEnd?)
     | None => None
     }
   } else {
@@ -258,7 +305,7 @@ let rec renderElement = (elem: element, ~onAction: option<actionHandler>=?): opt
         }
 
         children->Array.forEach(child => {
-          switch renderElement(child, ~onAction?) {
+          switch renderElement(child, ~onAction?, ~onDeadEnd?) {
           | Some(el) => div->DomBindings.appendChild(el)
           | None => ()
           }
@@ -274,8 +321,11 @@ let rec renderElement = (elem: element, ~onAction: option<actionHandler>=?): opt
       btn->DomBindings.setTextContent(text)
       applyAlignment(btn, align)
 
-      // Attach click handler for actions
-      if actions->Array.length > 0 {
+      // Check if button has navigation actions
+      let hasNavigation = hasNavigationAction(actions)
+
+      if hasNavigation {
+        // Attach click handler for navigation actions
         switch onAction {
         | Some(handler) => {
             btn->DomBindings.addEventListener("click", _event => {
@@ -288,6 +338,16 @@ let rec renderElement = (elem: element, ~onAction: option<actionHandler>=?): opt
           }
         | None => ()
         }
+      } else {
+        // No navigation - call dead end handler
+        switch onDeadEnd {
+        | Some(handler) => {
+            btn->DomBindings.addEventListener("click", _event => {
+              handler(id, text, #button)
+            })
+          }
+        | None => ()
+        }
       }
 
       Some(btn)
@@ -312,8 +372,11 @@ let rec renderElement = (elem: element, ~onAction: option<actionHandler>=?): opt
       link->DomBindings.setTextContent(text)
       applyAlignment(link, align)
 
-      // Attach click handler for actions
-      if actions->Array.length > 0 {
+      // Check if link has navigation actions
+      let hasNavigation = hasNavigationAction(actions)
+
+      if hasNavigation {
+        // Attach click handler for navigation actions
         switch onAction {
         | Some(handler) => {
             link->DomBindings.addEventListener("click", event => {
@@ -327,6 +390,17 @@ let rec renderElement = (elem: element, ~onAction: option<actionHandler>=?): opt
           }
         | None => ()
         }
+      } else {
+        // No navigation - call dead end handler
+        switch onDeadEnd {
+        | Some(handler) => {
+            link->DomBindings.addEventListener("click", event => {
+              DomBindings.preventDefault(event)
+              handler(id, text, #link)
+            })
+          }
+        | None => ()
+        }
       }
 
       Some(link)
@@ -376,7 +450,7 @@ let rec renderElement = (elem: element, ~onAction: option<actionHandler>=?): opt
       applyAlignment(row, align)
 
       children->Array.forEach(child => {
-        switch renderElement(child, ~onAction?) {
+        switch renderElement(child, ~onAction?, ~onDeadEnd?) {
         | Some(el) => row->DomBindings.appendChild(el)
         | None => ()
         }
@@ -397,7 +471,7 @@ let rec renderElement = (elem: element, ~onAction: option<actionHandler>=?): opt
       contentEl->DomBindings.setClassName("wf-section-content")
 
       children->Array.forEach(child => {
-        switch renderElement(child, ~onAction?) {
+        switch renderElement(child, ~onAction?, ~onDeadEnd?) {
         | Some(el) => contentEl->DomBindings.appendChild(el)
         | None => ()
         }
@@ -411,13 +485,17 @@ let rec renderElement = (elem: element, ~onAction: option<actionHandler>=?): opt
   }
 }
 
-let renderScene = (scene: scene, ~onAction: option<actionHandler>=?): DomBindings.element => {
+let renderScene = (
+  scene: scene,
+  ~onAction: option<actionHandler>=?,
+  ~onDeadEnd: option<deadEndHandler>=?,
+): DomBindings.element => {
   let sceneEl = DomBindings.document->DomBindings.createElement("div")
   sceneEl->DomBindings.setClassName("wf-scene")
   sceneEl->DomBindings.dataset->DomBindings.setDataAttr("scene", scene.id)
 
   scene.elements->Array.forEach(elem => {
-    switch renderElement(elem, ~onAction?) {
+    switch renderElement(elem, ~onAction?, ~onDeadEnd?) {
     | Some(el) => sceneEl->DomBindings.appendChild(el)
     | None => ()
     }
@@ -670,7 +748,21 @@ let render = (ast: ast, options: option<renderOptions>): renderResult => {
   let sceneMap = Map.make()
 
   ast.scenes->Array.forEach(scene => {
-    let sceneEl = renderScene(scene, ~onAction=handleAction)
+    // Create a scene-specific dead end handler that includes the scene ID
+    let handleDeadEnd = switch opts.onDeadEndClick {
+    | Some(callback) =>
+      Some((elementId: string, elementText: string, elementType: [#button | #link]) => {
+        callback({
+          sceneId: scene.id,
+          elementId,
+          elementText,
+          elementType,
+        })
+      })
+    | None => None
+    }
+
+    let sceneEl = renderScene(scene, ~onAction=handleAction, ~onDeadEnd=?handleDeadEnd)
     app->DomBindings.appendChild(sceneEl)
     sceneMap->Map.set(scene.id, sceneEl)
   })