{
  "page_ir": {
    "page_id": "seat_selection",
    "page_goal": "Allow users to view seat layout for a specific bus schedule, select available seats, create a 15-minute reservation, and proceed to payment with real-time seat status updates via WebSocket.",
    "style": {
      "tone": "functional",
      "theme": "light",
      "density": "comfortable",
      "color_intent": "blue primary with green/orange/red seat status indicators"
    },
    "accessibility": {
      "required_labels": [
        "seat_map",
        "selected_seats_summary",
        "countdown_timer",
        "reserve_button",
        "proceed_to_payment_button",
        "cancel_reservation_button"
      ],
      "skip_navigation": true,
      "focus_management": true,
      "announce_changes": []
    },
    "responsive": {
      "breakpoints": {
        "sm": 576,
        "md": 768,
        "lg": 992,
        "xl": 1200
      },
      "collapse_rules": [
        "sidebar_summary collapses to bottom panel on sm/md"
      ],
      "hidden_on_small": [],
      "stack_on_small": []
    },
    "constraints": [
      "Max 6 seats per reservation",
      "15-minute reservation timer",
      "Real-time WebSocket seat updates",
      "User must be authenticated"
    ],
    "seo_title": null,
    "seo_description": null
  },
  "data_ir": {
    "types": {},
    "state": {
      "scheduleDetails": {
        "type": "object",
        "initial": null,
        "required": true,
        "constraints": {},
        "item_type": null
      },
      "seats": {
        "type": "array",
        "initial": [],
        "required": true,
        "constraints": {},
        "item_type": null
      },
      "selectedSeatIds": {
        "type": "array",
        "initial": [],
        "required": false,
        "constraints": {
          "maxLength": 6
        },
        "item_type": null
      },
      "reservationId": {
        "type": "string",
        "initial": null,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "reservationStatus": {
        "type": "enum",
        "initial": null,
        "required": false,
        "constraints": {
          "values": [
            "ACTIVE",
            "EXPIRED",
            "CONFIRMED",
            "CANCELLED"
          ]
        },
        "item_type": null
      },
      "expiryDatetime": {
        "type": "string",
        "initial": null,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "countdownSeconds": {
        "type": "number",
        "initial": 0,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "loading": {
        "type": "boolean",
        "initial": true,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "reserving": {
        "type": "boolean",
        "initial": false,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "cancelling": {
        "type": "boolean",
        "initial": false,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "expiryModalVisible": {
        "type": "boolean",
        "initial": false,
        "required": false,
        "constraints": {},
        "item_type": null
      }
    },
    "derived": {
      "selectedSeats": {
        "type": "array",
        "expr": "state.seats.filter(s => state.selectedSeatIds.includes(s.id))",
        "deps": []
      },
      "totalPrice": {
        "type": "number",
        "expr": "state.selectedSeats.reduce((sum, seat) => sum + (state.scheduleDetails?.base_price || 0) * (1 + seat.price_modifier), 0)",
        "deps": []
      },
      "countdownDisplay": {
        "type": "string",
        "expr": "Math.floor(state.countdownSeconds / 60).toString().padStart(2, '0') + ':' + (state.countdownSeconds % 60).toString().padStart(2, '0')",
        "deps": []
      },
      "hasActiveReservation": {
        "type": "boolean",
        "expr": "state.reservationId !== null && state.reservationStatus === 'ACTIVE'",
        "deps": []
      },
      "canSelectSeats": {
        "type": "boolean",
        "expr": "!state.hasActiveReservation && state.selectedSeatIds.length < 6",
        "deps": []
      }
    }
  },
  "data_fetch_ir": {
    "endpoints": {
      "03f22dfc5a0b43068afbd86aa8ee92cd": {
        "endpoint_id": "03f22dfc5a0b43068afbd86aa8ee92cd",
        "module": "Schedule Management",
        "endpoint": "/schedules/{schedule_id}/details",
        "method": "GET",
        "path_params": {
          "schedule_id": "$route.scheduleId"
        },
        "query_params": {},
        "body": null,
        "fields": [
          "id",
          "departure_datetime",
          "arrival_datetime",
          "bus",
          "route"
        ],
        "response_target": "scheduleDetails",
        "response_transform": null,
        "trigger": "on_mount",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      },
      "464ca17ec2fa4555a7ddcb6e68a666b4": {
        "endpoint_id": "464ca17ec2fa4555a7ddcb6e68a666b4",
        "module": "Schedule Management",
        "endpoint": "/schedules/{schedule_id}/seats",
        "method": "GET",
        "path_params": {
          "schedule_id": "$route.scheduleId"
        },
        "query_params": {},
        "body": null,
        "fields": [
          "id",
          "schedule_id",
          "seat_number",
          "seat_type",
          "price_modifier",
          "status"
        ],
        "response_target": "seats",
        "response_transform": null,
        "trigger": "on_mount",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      },
      "d8abbfe93af84d7394609c1e5ded371d": {
        "endpoint_id": "d8abbfe93af84d7394609c1e5ded371d",
        "module": "Reservations",
        "endpoint": "/reservations/",
        "method": "POST",
        "path_params": {},
        "query_params": {},
        "body": {
          "user_id": "appContext.currentUser.userId",
          "schedule_id": "$route.scheduleId",
          "reservation_datetime": "new Date().toISOString()",
          "expiry_datetime": "new Date(Date.now() + 15 * 60 * 1000).toISOString()",
          "status": "ACTIVE",
          "total_amount": "$derived.totalPrice",
          "seat_ids": "$state.selectedSeatIds"
        },
        "fields": [
          "id",
          "user_id",
          "schedule_id",
          "reservation_datetime",
          "expiry_datetime",
          "status",
          "total_amount"
        ],
        "response_target": "reservation",
        "response_transform": null,
        "trigger": "manual",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      },
      "dca45f7f04ed44e5a1f405a0158550a9": {
        "endpoint_id": "dca45f7f04ed44e5a1f405a0158550a9",
        "module": "Reservations",
        "endpoint": "/reservations/{reservation_id}/release",
        "method": "POST",
        "path_params": {
          "reservation_id": "$state.reservationId"
        },
        "query_params": {},
        "body": null,
        "fields": [],
        "response_target": "releaseReservation_data",
        "response_transform": null,
        "trigger": "manual",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      }
    }
  },
  "data_model_ir": {
    "entities": {
      "schedule": {
        "name": "Schedule",
        "backend_module": "Schedule Management",
        "fields": [
          "id",
          "bus_id",
          "route_id",
          "departure_datetime",
          "arrival_datetime",
          "base_price",
          "available_seats",
          "status"
        ],
        "computed": [],
        "display_fields": [
          "departure_datetime",
          "arrival_datetime",
          "base_price",
          "available_seats",
          "status"
        ],
        "search_fields": [],
        "filters": [],
        "default_sort": null,
        "default_sort_dir": "asc"
      },
      "scheduleDetail": {
        "name": "ScheduleDetail",
        "backend_module": "Schedule Management",
        "fields": [
          "id",
          "departure_datetime",
          "arrival_datetime",
          "bus",
          "route"
        ],
        "computed": [],
        "display_fields": [
          "departure_datetime",
          "arrival_datetime"
        ],
        "search_fields": [],
        "filters": [],
        "default_sort": null,
        "default_sort_dir": "asc"
      },
      "seat": {
        "name": "Seat",
        "backend_module": "Schedule Management",
        "fields": [
          "id",
          "schedule_id",
          "seat_number",
          "seat_type",
          "price_modifier",
          "status",
          "created_at",
          "updated_at"
        ],
        "computed": [],
        "display_fields": [
          "seat_number",
          "seat_type",
          "price_modifier",
          "status"
        ],
        "search_fields": [],
        "filters": [
          "status"
        ],
        "default_sort": null,
        "default_sort_dir": "asc"
      },
      "reservation": {
        "name": "Reservation",
        "backend_module": "Reservations",
        "fields": [
          "id",
          "user_id",
          "schedule_id",
          "reservation_datetime",
          "expiry_datetime",
          "status",
          "total_amount",
          "seat_ids"
        ],
        "computed": [],
        "display_fields": [
          "status",
          "expiry_datetime",
          "total_amount"
        ],
        "search_fields": [],
        "filters": [
          "status"
        ],
        "default_sort": null,
        "default_sort_dir": "asc"
      }
    },
    "relationships": []
  },
  "behaviour_ir": {
    "events": {
      "toggleSeatSelection": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.selectedSeatIds",
            "expr": "state.selectedSeatIds.includes(seatId) ? state.selectedSeatIds.filter(id => id !== seatId) : [...state.selectedSeatIds, seatId]"
          }
        ],
        "description": ""
      },
      "updateSeatsFromWebSocket": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.seats",
            "expr": "state.seats.map(s => updatedSeats.find(u => u.id === s.id) || s)"
          }
        ],
        "description": ""
      },
      "decrementCountdown": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.countdownSeconds",
            "expr": "state.countdownSeconds - 1"
          }
        ],
        "description": ""
      },
      "showExpiryModal": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.expiryModalVisible",
            "expr": "true"
          },
          {
            "target": "state.reservationId",
            "expr": "null"
          },
          {
            "target": "state.reservationStatus",
            "expr": "null"
          },
          {
            "target": "state.selectedSeatIds",
            "expr": "[]"
          },
          {
            "target": "state.countdownSeconds",
            "expr": "0"
          }
        ],
        "description": ""
      },
      "closeExpiryModal": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.expiryModalVisible",
            "expr": "false"
          }
        ],
        "description": ""
      }
    },
    "actions": {
      "0607ee70f6a446c8b58f5df2dbbf48da": {
        "action_id": "0607ee70f6a446c8b58f5df2dbbf48da",
        "trigger": "button_click",
        "target_component_id": "reserve_button",
        "operation": "create",
        "description": "",
        "payload": {},
        "guard": null,
        "requires_confirmation": true,
        "confirmation_message": null,
        "validation_rules": [
          {
            "rule_id": "val_0",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"field\": \"selectedSeatIds\", \"message\": \"Please select at least one seat\", \"rule_id\": \"val_seats_selected\", \"type\": \"required\"}",
            "message": "{\"field\": \"selectedSeatIds\", \"message\": \"Please select at least one seat\", \"rule_id\": \"val_seats_selected\", \"type\": \"required\"}"
          },
          {
            "rule_id": "val_1",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"field\": \"selectedSeatIds\", \"message\": \"Maximum 6 seats allowed per reservation\", \"rule_id\": \"val_max_seats\", \"type\": \"max_length\", \"value\": 6}",
            "message": "{\"field\": \"selectedSeatIds\", \"message\": \"Maximum 6 seats allowed per reservation\", \"rule_id\": \"val_max_seats\", \"type\": \"max_length\", \"value\": 6}"
          }
        ],
        "validation_messages": {},
        "updates": [
          {
            "target": "state.reservationId",
            "expr": "response.id"
          },
          {
            "target": "state.reservationStatus",
            "expr": "'ACTIVE'"
          },
          {
            "target": "state.expiryDatetime",
            "expr": "response.expiry_datetime"
          },
          {
            "target": "state.countdownSeconds",
            "expr": "900"
          },
          {
            "target": "state.reserving",
            "expr": "false"
          }
        ],
        "api_endpoint": "d8abbfe93af84d7394609c1e5ded371d",
        "api_body": "{ user_id: appContext.currentUser.userId, schedule_id: routeParams.scheduleId, reservation_datetime: new Date().toISOString(), expiry_datetime: new Date(Date.now() + 15 * 60 * 1000).toISOString(), status: 'ACTIVE', total_amount: derived.totalPrice, seat_ids: state.selectedSeatIds }",
        "side_effects": [
          {
            "type": "toast",
            "config": {
              "message": "Seats reserved successfully! You have 15 minutes to complete payment.",
              "type": "success"
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      },
      "fb4c1772680747a2a9a42b44959c0f1e": {
        "action_id": "fb4c1772680747a2a9a42b44959c0f1e",
        "trigger": "button_click",
        "target_component_id": "cancel_reservation_button",
        "operation": "custom",
        "description": "",
        "payload": {},
        "guard": null,
        "requires_confirmation": true,
        "confirmation_message": null,
        "validation_rules": [],
        "validation_messages": {},
        "updates": [
          {
            "target": "state.reservationId",
            "expr": "null"
          },
          {
            "target": "state.reservationStatus",
            "expr": "null"
          },
          {
            "target": "state.expiryDatetime",
            "expr": "null"
          },
          {
            "target": "state.countdownSeconds",
            "expr": "0"
          },
          {
            "target": "state.selectedSeatIds",
            "expr": "[]"
          },
          {
            "target": "state.cancelling",
            "expr": "false"
          }
        ],
        "api_endpoint": "dca45f7f04ed44e5a1f405a0158550a9",
        "api_body": null,
        "side_effects": [
          {
            "type": "toast",
            "config": {
              "message": "Reservation cancelled. Seats have been released.",
              "type": "info"
            }
          },
          {
            "type": "refresh",
            "config": {
              "target": "fetchSeats"
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      },
      "4317e1d9a5f049dca77408baa7f14b10": {
        "action_id": "4317e1d9a5f049dca77408baa7f14b10",
        "trigger": "button_click",
        "target_component_id": "proceed_to_payment_button",
        "operation": "custom",
        "description": "",
        "payload": {},
        "guard": null,
        "requires_confirmation": false,
        "confirmation_message": null,
        "validation_rules": [],
        "validation_messages": {},
        "updates": [],
        "api_endpoint": null,
        "api_body": null,
        "side_effects": [
          {
            "type": "navigate",
            "config": {
              "path": "/reservations/${state.reservationId}/pay"
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      },
      "a65e86818a484731a88384e869428bf7": {
        "action_id": "a65e86818a484731a88384e869428bf7",
        "trigger": "button_click",
        "target_component_id": "back_to_search_button",
        "operation": "custom",
        "description": "",
        "payload": {},
        "guard": null,
        "requires_confirmation": false,
        "confirmation_message": null,
        "validation_rules": [],
        "validation_messages": {},
        "updates": [],
        "api_endpoint": null,
        "api_body": null,
        "side_effects": [
          {
            "type": "navigate",
            "config": {
              "path": "/"
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      }
    },
    "feedback": {
      "0607ee70f6a446c8b58f5df2dbbf48da": {
        "action_id": "0607ee70f6a446c8b58f5df2dbbf48da",
        "loading_indicator": "spinner",
        "loading_text": null,
        "success_message": "Seats reserved successfully!",
        "error_message": "Failed to reserve seats. Please try again.",
        "ui_updates": []
      },
      "fb4c1772680747a2a9a42b44959c0f1e": {
        "action_id": "fb4c1772680747a2a9a42b44959c0f1e",
        "loading_indicator": "spinner",
        "loading_text": null,
        "success_message": "Reservation cancelled successfully.",
        "error_message": "Failed to cancel reservation. Please try again.",
        "ui_updates": []
      },
      "4317e1d9a5f049dca77408baa7f14b10": {
        "action_id": "4317e1d9a5f049dca77408baa7f14b10",
        "loading_indicator": null,
        "loading_text": null,
        "success_message": null,
        "error_message": null,
        "ui_updates": []
      },
      "a65e86818a484731a88384e869428bf7": {
        "action_id": "a65e86818a484731a88384e869428bf7",
        "loading_indicator": null,
        "loading_text": null,
        "success_message": null,
        "error_message": null,
        "ui_updates": []
      }
    }
  },
  "component_ir": {
    "library": "antd",
    "theme": {
      "primaryColor": "#1677ff",
      "secondaryColor": "#52c41a",
      "successColor": null,
      "warningColor": null,
      "errorColor": null,
      "fontFamily": "sans-serif",
      "fontSize": null,
      "borderRadius": 6
    },
    "components": {
      "main_container": {
        "type": "div",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {
          "minHeight": "100vh",
          "width": "100%",
          "background": "#f5f5f5",
          "padding": "24px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "page_header": {
        "type": "div",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {
          "display": "flex",
          "justifyContent": "space-between",
          "alignItems": "center",
          "marginBottom": "24px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "back_to_search_button": {
        "type": "Button",
        "label": "← Back to Search",
        "description": null,
        "bind": null,
        "onClick": "navigateBackToSearch",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "link",
          "icon": "ArrowLeftOutlined"
        },
        "dynamic_props": {},
        "styles": {},
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "page_title": {
        "type": "Typography.Title",
        "label": "Select Seats",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "level": 3
        },
        "dynamic_props": {},
        "styles": {
          "margin": 0
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "schedule_summary_card": {
        "type": "Card",
        "label": "Schedule Summary",
        "description": null,
        "bind": "state.scheduleDetails",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "bordered": true
        },
        "dynamic_props": {},
        "styles": {
          "marginBottom": "24px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "schedule_info_row": {
        "type": "div",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {
          "display": "flex",
          "flexWrap": "wrap",
          "gap": "24px",
          "alignItems": "center"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "bus_number_tag": {
        "type": "Tag",
        "label": null,
        "description": null,
        "bind": "state.scheduleDetails.bus.bus_number",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "color": "blue"
        },
        "dynamic_props": {},
        "styles": {
          "fontSize": "14px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "bus_type_tag": {
        "type": "Tag",
        "label": null,
        "description": null,
        "bind": "state.scheduleDetails.bus.bus_type",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "color": "purple"
        },
        "dynamic_props": {},
        "styles": {},
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "route_display": {
        "type": "Typography.Text",
        "label": null,
        "description": null,
        "bind": "state.scheduleDetails.route.origin_city + ' → ' + state.scheduleDetails.route.destination_city",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "strong": true
        },
        "dynamic_props": {},
        "styles": {
          "fontSize": "16px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "departure_display": {
        "type": "Typography.Text",
        "label": "Departure",
        "description": null,
        "bind": "state.scheduleDetails.departure_datetime",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {},
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "arrival_display": {
        "type": "Typography.Text",
        "label": "Arrival",
        "description": null,
        "bind": "state.scheduleDetails.arrival_datetime",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {},
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "base_price_display": {
        "type": "Typography.Text",
        "label": "Base Price",
        "description": null,
        "bind": "state.scheduleDetails.base_price",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "strong": true,
          "type": "success"
        },
        "dynamic_props": {},
        "styles": {
          "fontSize": "18px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "content_area": {
        "type": "div",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {
          "display": "flex",
          "gap": "24px",
          "flexWrap": "wrap"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "seat_map_section": {
        "type": "Card",
        "label": "Seat Layout",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "bordered": true,
          "title": "Seat Layout"
        },
        "dynamic_props": {},
        "styles": {
          "flex": "1 1 600px",
          "minWidth": "300px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "legend_container": {
        "type": "div",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {
          "display": "flex",
          "gap": "16px",
          "marginBottom": "16px",
          "flexWrap": "wrap"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "legend_available": {
        "type": "Tag",
        "label": "Available",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "color": "green"
        },
        "dynamic_props": {},
        "styles": {},
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "legend_reserved": {
        "type": "Tag",
        "label": "Reserved",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "color": "orange"
        },
        "dynamic_props": {},
        "styles": {},
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "legend_booked": {
        "type": "Tag",
        "label": "Booked",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "color": "red"
        },
        "dynamic_props": {},
        "styles": {},
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "legend_selected": {
        "type": "Tag",
        "label": "Selected",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "color": "blue"
        },
        "dynamic_props": {},
        "styles": {},
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "seat_grid": {
        "type": "div",
        "label": "Seat Map",
        "description": null,
        "bind": "state.seats",
        "onClick": "toggleSeatSelection",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "role": "grid",
          "aria-label": "seat_map"
        },
        "dynamic_props": {},
        "styles": {
          "display": "grid",
          "gridTemplateColumns": "repeat(auto-fill, minmax(48px, 1fr))",
          "gap": "8px",
          "padding": "16px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "seat_type_info": {
        "type": "div",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {
          "display": "flex",
          "gap": "12px",
          "marginTop": "16px",
          "borderTop": "1px solid #f0f0f0",
          "paddingTop": "12px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "seat_type_standard": {
        "type": "Typography.Text",
        "label": "Standard",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "secondary"
        },
        "dynamic_props": {},
        "styles": {
          "fontSize": "12px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "seat_type_premium": {
        "type": "Typography.Text",
        "label": "Premium (+modifier)",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "warning"
        },
        "dynamic_props": {},
        "styles": {
          "fontSize": "12px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "seat_type_sleeper": {
        "type": "Typography.Text",
        "label": "Sleeper (+modifier)",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {
          "fontSize": "12px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "sidebar_panel": {
        "type": "Card",
        "label": "Booking Summary",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "bordered": true,
          "title": "Booking Summary"
        },
        "dynamic_props": {},
        "styles": {
          "flex": "0 0 360px",
          "minWidth": "300px",
          "position": "sticky",
          "top": "24px",
          "alignSelf": "flex-start"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "countdown_timer_container": {
        "type": "Alert",
        "label": null,
        "description": null,
        "bind": "derived.hasActiveReservation",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "warning",
          "showIcon": true,
          "banner": true
        },
        "dynamic_props": {},
        "styles": {
          "marginBottom": "16px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "countdown_timer_text": {
        "type": "Typography.Title",
        "label": null,
        "description": null,
        "bind": "derived.countdownDisplay",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "level": 2,
          "type": "danger"
        },
        "dynamic_props": {},
        "styles": {
          "textAlign": "center",
          "margin": "8px 0"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "countdown_label": {
        "type": "Typography.Text",
        "label": "Time remaining to complete payment",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "secondary"
        },
        "dynamic_props": {},
        "styles": {
          "textAlign": "center",
          "display": "block"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "selected_seats_list": {
        "type": "List",
        "label": "Selected Seats",
        "description": null,
        "bind": "derived.selectedSeats",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "size": "small",
          "bordered": true,
          "aria-label": "selected_seats_summary"
        },
        "dynamic_props": {},
        "styles": {
          "marginBottom": "16px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "total_price_display": {
        "type": "div",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {
          "display": "flex",
          "justifyContent": "space-between",
          "alignItems": "center",
          "padding": "12px 0",
          "borderTop": "2px solid #f0f0f0",
          "marginBottom": "16px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "total_label": {
        "type": "Typography.Text",
        "label": "Total Amount",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "strong": true
        },
        "dynamic_props": {},
        "styles": {
          "fontSize": "16px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "total_value": {
        "type": "Typography.Title",
        "label": null,
        "description": null,
        "bind": "derived.totalPrice",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "level": 3,
          "type": "success"
        },
        "dynamic_props": {},
        "styles": {
          "margin": 0
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "action_buttons_container": {
        "type": "div",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {
          "display": "flex",
          "flexDirection": "column",
          "gap": "12px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "reserve_button": {
        "type": "Button",
        "label": "Reserve Seats",
        "description": null,
        "bind": null,
        "onClick": "reserveSeats",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "primary",
          "size": "large",
          "block": true,
          "disabled": "state.selectedSeatIds.length === 0 || derived.hasActiveReservation",
          "loading": "state.reserving",
          "aria-label": "reserve_button"
        },
        "dynamic_props": {},
        "styles": {},
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "proceed_to_payment_button": {
        "type": "Button",
        "label": "Proceed to Payment",
        "description": null,
        "bind": null,
        "onClick": "proceedToPayment",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "primary",
          "size": "large",
          "block": true,
          "disabled": "!derived.hasActiveReservation",
          "aria-label": "proceed_to_payment_button"
        },
        "dynamic_props": {},
        "styles": {
          "background": "#52c41a",
          "borderColor": "#52c41a"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "cancel_reservation_button": {
        "type": "Button",
        "label": "Cancel Reservation",
        "description": null,
        "bind": null,
        "onClick": "cancelReservation",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "default",
          "danger": true,
          "size": "large",
          "block": true,
          "disabled": "!derived.hasActiveReservation",
          "loading": "state.cancelling",
          "aria-label": "cancel_reservation_button"
        },
        "dynamic_props": {},
        "styles": {},
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "expiry_modal": {
        "type": "Modal",
        "label": "Reservation Expired",
        "description": null,
        "bind": "state.expiryModalVisible",
        "onClick": "closeExpiryModal",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "title": "Reservation Expired",
          "okText": "OK",
          "cancelButtonProps": {
            "style": {
              "display": "none"
            }
          }
        },
        "dynamic_props": {},
        "styles": {},
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "expiry_modal_content": {
        "type": "Alert",
        "label": "Your reservation has expired. The seats have been released and are now available for other users. Please select your seats again.",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "error",
          "showIcon": true,
          "message": "Reservation Expired",
          "description": "Your reservation has expired. The seats have been released and are now available for other users. Please select your seats again."
        },
        "dynamic_props": {},
        "styles": {},
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      }
    }
  },
  "layout_ir": {
    "root": "main_container",
    "children": {
      "main_container": [
        "page_header",
        "schedule_summary_card",
        "content_area",
        "expiry_modal"
      ],
      "page_header": [
        "back_to_search_button",
        "page_title"
      ],
      "schedule_summary_card": [
        "schedule_info_row"
      ],
      "schedule_info_row": [
        "bus_number_tag",
        "bus_type_tag",
        "route_display",
        "departure_display",
        "arrival_display",
        "base_price_display"
      ],
      "content_area": [
        "seat_map_section",
        "sidebar_panel"
      ],
      "seat_map_section": [
        "legend_container",
        "seat_grid",
        "seat_type_info"
      ],
      "legend_container": [
        "legend_available",
        "legend_reserved",
        "legend_booked",
        "legend_selected"
      ],
      "seat_type_info": [
        "seat_type_standard",
        "seat_type_premium",
        "seat_type_sleeper"
      ],
      "sidebar_panel": [
        "countdown_timer_container",
        "selected_seats_list",
        "total_price_display",
        "action_buttons_container"
      ],
      "countdown_timer_container": [
        "countdown_timer_text",
        "countdown_label"
      ],
      "total_price_display": [
        "total_label",
        "total_value"
      ],
      "action_buttons_container": [
        "reserve_button",
        "proceed_to_payment_button",
        "cancel_reservation_button"
      ],
      "expiry_modal": [
        "expiry_modal_content"
      ]
    },
    "layout": {
      "main_container": {
        "type": "vertical",
        "gap": 0,
        "padding": null,
        "columns": null,
        "column_template": null,
        "row_template": null,
        "align_items": null,
        "justify_content": null,
        "wrap": false,
        "min_height": null,
        "overflow": null
      },
      "page_header": {
        "type": "horizontal",
        "gap": 16,
        "padding": null,
        "columns": null,
        "column_template": null,
        "row_template": null,
        "align_items": null,
        "justify_content": null,
        "wrap": false,
        "min_height": null,
        "overflow": null
      },
      "schedule_summary_card": {
        "type": "vertical",
        "gap": 12,
        "padding": null,
        "columns": null,
        "column_template": null,
        "row_template": null,
        "align_items": null,
        "justify_content": null,
        "wrap": false,
        "min_height": null,
        "overflow": null
      },
      "schedule_info_row": {
        "type": "horizontal",
        "gap": 24,
        "padding": null,
        "columns": null,
        "column_template": null,
        "row_template": null,
        "align_items": null,
        "justify_content": null,
        "wrap": false,
        "min_height": null,
        "overflow": null
      },
      "content_area": {
        "type": "horizontal",
        "gap": 24,
        "padding": null,
        "columns": null,
        "column_template": null,
        "row_template": null,
        "align_items": null,
        "justify_content": null,
        "wrap": false,
        "min_height": null,
        "overflow": null
      },
      "seat_map_section": {
        "type": "vertical",
        "gap": 16,
        "padding": null,
        "columns": null,
        "column_template": null,
        "row_template": null,
        "align_items": null,
        "justify_content": null,
        "wrap": false,
        "min_height": null,
        "overflow": null
      },
      "legend_container": {
        "type": "horizontal",
        "gap": 16,
        "padding": null,
        "columns": null,
        "column_template": null,
        "row_template": null,
        "align_items": null,
        "justify_content": null,
        "wrap": false,
        "min_height": null,
        "overflow": null
      },
      "seat_type_info": {
        "type": "horizontal",
        "gap": 12,
        "padding": null,
        "columns": null,
        "column_template": null,
        "row_template": null,
        "align_items": null,
        "justify_content": null,
        "wrap": false,
        "min_height": null,
        "overflow": null
      },
      "sidebar_panel": {
        "type": "vertical",
        "gap": 16,
        "padding": null,
        "columns": null,
        "column_template": null,
        "row_template": null,
        "align_items": null,
        "justify_content": null,
        "wrap": false,
        "min_height": null,
        "overflow": null
      },
      "countdown_timer_container": {
        "type": "vertical",
        "gap": 4,
        "padding": null,
        "columns": null,
        "column_template": null,
        "row_template": null,
        "align_items": null,
        "justify_content": null,
        "wrap": false,
        "min_height": null,
        "overflow": null
      },
      "total_price_display": {
        "type": "horizontal",
        "gap": 8,
        "padding": null,
        "columns": null,
        "column_template": null,
        "row_template": null,
        "align_items": null,
        "justify_content": null,
        "wrap": false,
        "min_height": null,
        "overflow": null
      },
      "action_buttons_container": {
        "type": "vertical",
        "gap": 12,
        "padding": null,
        "columns": null,
        "column_template": null,
        "row_template": null,
        "align_items": null,
        "justify_content": null,
        "wrap": false,
        "min_height": null,
        "overflow": null
      },
      "expiry_modal": {
        "type": "vertical",
        "gap": 0,
        "padding": null,
        "columns": null,
        "column_template": null,
        "row_template": null,
        "align_items": null,
        "justify_content": null,
        "wrap": false,
        "min_height": null,
        "overflow": null
      }
    },
    "layout_zones": [
      {
        "zone_id": "main_zone",
        "component": "main_container",
        "anchor": "top-left",
        "size_hint": "full-width",
        "z_layer": "base",
        "notes": "Root page container"
      },
      {
        "zone_id": "seat_map_zone",
        "component": "seat_map_section",
        "anchor": "center",
        "size_hint": "60%",
        "z_layer": "base",
        "notes": "Main seat layout area"
      },
      {
        "zone_id": "sidebar_zone",
        "component": "sidebar_panel",
        "anchor": "top-left",
        "size_hint": "40%",
        "z_layer": "base",
        "notes": "Booking summary sidebar"
      },
      {
        "zone_id": "expiry_overlay",
        "component": "expiry_modal",
        "anchor": "center",
        "size_hint": "auto",
        "z_layer": "overlay",
        "notes": "Reservation expiry notification modal"
      }
    ],
    "responsive_overrides": []
  },
  "navigation_ir": {
    "tabs": [],
    "modals": {},
    "drawers": {},
    "routes": [],
    "breadcrumb": null,
    "default_tab": null
  },
  "realtime_ir": {
    "timers": {},
    "polling": {}
  },
  "metadata": {
    "ir_version": "3.5",
    "generated_at": "",
    "source_prompt": null,
    "schema_session_id": null,
    "warnings": []
  },
  "page_data_contract": null,
  "schema_ir": null
}