sample .branch:
{
  "meta": { "cw_version": "0.4", "title": "Jacked Beavers" },
  "body": [
    { "type": "header", "level": 1, "text": "Jacked Beavers" },
    { "type": "timer", "interval_ms": 2500, "invokes": "/cycle_art.ww", "repeat": true },
    {
      "type": "canvas",
      "id": "main_art_canvas",
      "width": 300,
      "height": 200,
      "elements": [
        { "shape": "rectangle", "coords": [0, 100, 300, 200], "fill": "#6495ED", "outline": "" },
        { "shape": "rectangle", "coords": [75, 80, 225, 150], "fill": "#8B4513", "outline": "black" },
        { "shape": "polygon", "points": [60, 80, 240, 80, 150, 40], "fill": "#A0522D", "outline": "black" },
        { "shape": "rectangle", "coords": [135, 110, 165, 150], "fill": "#F5DEB3", "outline": "black" },
        { "shape": "oval", "coords": [240, 20, 280, 60], "fill": "#FFD700", "outline": "yellow" }
      ]
    },
    { "type": "button", "text": "Skip to next image", "invokes": "/cycle_art.ww" },
    { "type": "link", "text": "Exodus", "url": "cryptic://{{HOST}}:{{PORT}}/" }
  ]
}



sample .ww:
import json

BEAVER_ART = [
    # Image 1: Beaver lodge
    {
        "type": "canvas", "id": "main_art_canvas", "width": 300, "height": 200,
        "elements": [
            { "shape": "rectangle", "coords": [0, 100, 300, 200], "fill": "#6495ED", "outline": ""},
            { "shape": "rectangle", "coords": [75, 80, 225, 150], "fill": "#8B4513", "outline": "black"},
            { "shape": "polygon", "points": [60, 80, 240, 80, 150, 40], "fill": "#A0522D", "outline": "black"},
            { "shape": "rectangle", "coords": [135, 110, 165, 150], "fill": "#F5DEB3", "outline": "black"},
            { "shape": "oval", "coords": [240, 20, 280, 60], "fill": "#FFD700", "outline": "yellow"}
        ]
    },
    # Image 2: Beaver face
    {
        "type": "canvas", "id": "main_art_canvas", "width": 300, "height": 200,
        "elements": [
        { "shape": "rectangle", "coords": [0, 100, 300, 200], "fill": "#6495ED", "outline": "" },
        { "shape": "rectangle", "coords": [75, 80, 225, 150], "fill": "#8B4513", "outline": "black" },
        { "shape": "polygon", "points": [60, 80, 240, 80, 150, 40], "fill": "#A0522D", "outline": "black" },
        { "shape": "rectangle", "coords": [135, 110, 165, 150], "fill": "#F5DEB3", "outline": "black" },
        { "shape": "oval", "coords": [240, 20, 280, 60], "fill": "#FFD700", "outline": "yellow" }
      ]
    }
]

def run(context):
    if not BEAVER_ART:
        # return blank if nothing to cycle through; else server crash until better guards
        return {"actions": []}

    client_state = json.loads(context.get("body", "{}"))
    current_index = client_state.get("current_image_index", 0)

    next_index = (current_index + 1) % len(BEAVER_ART)

    new_canvas_component = BEAVER_ART[next_index]

    patch = {
        "actions": [
            {
                "action": "replace",
                "target_id": "main_art_canvas",
                "component": new_canvas_component
            },
            {
                "action": "update_state",
                "state": {"current_image_index": next_index}
            }
        ]
    }

    return patch