{
  "page_ir": {
    "page_id": "calculator",
    "page_goal": "Single-page simple interest calculator with input form, results display, and calculation history",
    "style": {
      "tone": "professional",
      "theme": "light",
      "density": "comfortable",
      "color_intent": "blue primary with clean whites and subtle grays"
    },
    "accessibility": {
      "required_labels": [
        "Principal Amount",
        "Interest Rate",
        "Time Period",
        "Time Unit",
        "Calculate",
        "Clear",
        "Clear History"
      ],
      "skip_navigation": true,
      "focus_management": true,
      "announce_changes": []
    },
    "responsive": {
      "breakpoints": {
        "mobile": 320,
        "tablet": 768,
        "desktop": 1024
      },
      "collapse_rules": [
        "history_section stacks below calculator on mobile"
      ],
      "hidden_on_small": [],
      "stack_on_small": []
    },
    "constraints": [
      "WCAG AA compliant",
      "keyboard navigable",
      "mobile-friendly"
    ],
    "seo_title": null,
    "seo_description": null
  },
  "data_ir": {
    "types": {},
    "state": {
      "calculatedInterest": {
        "type": "number",
        "initial": null,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "calculatedTotal": {
        "type": "number",
        "initial": null,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "calculationBreakdown": {
        "type": "object",
        "initial": null,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "showResults": {
        "type": "boolean",
        "initial": false,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "historyExpanded": {
        "type": "boolean",
        "initial": true,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "clearHistoryModalVisible": {
        "type": "boolean",
        "initial": false,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "loading": {
        "type": "boolean",
        "initial": false,
        "required": false,
        "constraints": {},
        "item_type": null
      }
    },
    "derived": {
      "formattedInterest": {
        "type": "string",
        "expr": "state.calculatedInterest !== null ? '$' + state.calculatedInterest.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2}) : ''",
        "deps": []
      },
      "formattedTotal": {
        "type": "string",
        "expr": "state.calculatedTotal !== null ? '$' + state.calculatedTotal.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2}) : ''",
        "deps": []
      }
    }
  },
  "data_fetch_ir": {
    "endpoints": {
      "fcc39aaf89934d60b633798562e67011": {
        "endpoint_id": "fcc39aaf89934d60b633798562e67011",
        "module": "Calculator",
        "endpoint": "/sessions/",
        "method": "POST",
        "path_params": {},
        "query_params": {},
        "body": {
          "session_identifier": "$appContext.sessionId"
        },
        "fields": [
          "id",
          "session_identifier",
          "created_at",
          "updated_at"
        ],
        "response_target": "session",
        "response_transform": null,
        "trigger": "on_mount",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      },
      "7d5f197612054bb2b2f06bd6db3bcc58": {
        "endpoint_id": "7d5f197612054bb2b2f06bd6db3bcc58",
        "module": "Calculator",
        "endpoint": "/sessions/{session_identifier}/calculations",
        "method": "GET",
        "path_params": {
          "session_identifier": "$appContext.sessionId"
        },
        "query_params": {},
        "body": null,
        "fields": [
          "id",
          "session_identifier",
          "created_at",
          "updated_at",
          "calculations"
        ],
        "response_target": "calculationHistory",
        "response_transform": null,
        "trigger": "on_mount",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      },
      "3143c1e5ded549f397039d20bc6348c8": {
        "endpoint_id": "3143c1e5ded549f397039d20bc6348c8",
        "module": "Calculator",
        "endpoint": "/sessions/{session_identifier}/calculations",
        "method": "DELETE",
        "path_params": {
          "session_identifier": "$appContext.sessionId"
        },
        "query_params": {},
        "body": null,
        "fields": [],
        "response_target": "calculationHistory",
        "response_transform": null,
        "trigger": "manual",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      }
    }
  },
  "data_model_ir": {
    "entities": {
      "calculation": {
        "name": "Calculation",
        "backend_module": "Calculator",
        "fields": [
          "id",
          "session_identifier",
          "principal",
          "rate",
          "time",
          "time_unit",
          "interest",
          "total_amount",
          "created_at"
        ],
        "computed": [],
        "display_fields": [
          "principal",
          "rate",
          "time",
          "time_unit",
          "interest",
          "total_amount",
          "created_at"
        ],
        "search_fields": [],
        "filters": [],
        "default_sort": null,
        "default_sort_dir": "asc"
      },
      "session": {
        "name": "Session",
        "backend_module": "Calculator",
        "fields": [
          "id",
          "session_identifier",
          "created_at",
          "updated_at"
        ],
        "computed": [],
        "display_fields": [
          "session_identifier"
        ],
        "search_fields": [],
        "filters": [],
        "default_sort": null,
        "default_sort_dir": "asc"
      }
    },
    "relationships": []
  },
  "behaviour_ir": {
    "events": {
      "onHistoryItemClick": {
        "type": "mutation",
        "updates": [
          {
            "target": "form.principal",
            "expr": "event.item.principal"
          },
          {
            "target": "form.rate",
            "expr": "event.item.rate"
          },
          {
            "target": "form.time",
            "expr": "event.item.time"
          },
          {
            "target": "form.timeUnit",
            "expr": "event.item.time_unit"
          }
        ],
        "description": ""
      },
      "openClearHistoryModal": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.clearHistoryModalVisible",
            "expr": "true"
          }
        ],
        "description": ""
      },
      "closeClearHistoryModal": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.clearHistoryModalVisible",
            "expr": "false"
          }
        ],
        "description": ""
      }
    },
    "actions": {
      "623c79c89ef7465b9d8223cb82003682": {
        "action_id": "623c79c89ef7465b9d8223cb82003682",
        "trigger": "form_submit",
        "target_component_id": "calculate_button",
        "operation": "custom",
        "description": "",
        "payload": {},
        "guard": null,
        "requires_confirmation": false,
        "confirmation_message": null,
        "validation_rules": [
          {
            "rule_id": "val_0",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"field\": \"principal\", \"message\": \"Principal amount is required\", \"rule_id\": \"val_principal_required\", \"type\": \"required\"}",
            "message": "{\"field\": \"principal\", \"message\": \"Principal amount is required\", \"rule_id\": \"val_principal_required\", \"type\": \"required\"}"
          },
          {
            "rule_id": "val_1",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"field\": \"principal\", \"message\": \"Principal must be greater than 0\", \"rule_id\": \"val_principal_min\", \"type\": \"min\", \"value\": 0.01}",
            "message": "{\"field\": \"principal\", \"message\": \"Principal must be greater than 0\", \"rule_id\": \"val_principal_min\", \"type\": \"min\", \"value\": 0.01}"
          },
          {
            "rule_id": "val_2",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"field\": \"principal\", \"message\": \"Principal cannot exceed 999,999,999.99\", \"rule_id\": \"val_principal_max\", \"type\": \"max\", \"value\": 999999999.99}",
            "message": "{\"field\": \"principal\", \"message\": \"Principal cannot exceed 999,999,999.99\", \"rule_id\": \"val_principal_max\", \"type\": \"max\", \"value\": 999999999.99}"
          },
          {
            "rule_id": "val_3",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"field\": \"rate\", \"message\": \"Interest rate is required\", \"rule_id\": \"val_rate_required\", \"type\": \"required\"}",
            "message": "{\"field\": \"rate\", \"message\": \"Interest rate is required\", \"rule_id\": \"val_rate_required\", \"type\": \"required\"}"
          },
          {
            "rule_id": "val_4",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"field\": \"rate\", \"message\": \"Interest rate must be greater than 0\", \"rule_id\": \"val_rate_min\", \"type\": \"min\", \"value\": 0.01}",
            "message": "{\"field\": \"rate\", \"message\": \"Interest rate must be greater than 0\", \"rule_id\": \"val_rate_min\", \"type\": \"min\", \"value\": 0.01}"
          },
          {
            "rule_id": "val_5",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"field\": \"rate\", \"message\": \"Interest rate cannot exceed 100\", \"rule_id\": \"val_rate_max\", \"type\": \"max\", \"value\": 100}",
            "message": "{\"field\": \"rate\", \"message\": \"Interest rate cannot exceed 100\", \"rule_id\": \"val_rate_max\", \"type\": \"max\", \"value\": 100}"
          },
          {
            "rule_id": "val_6",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"field\": \"time\", \"message\": \"Time period is required\", \"rule_id\": \"val_time_required\", \"type\": \"required\"}",
            "message": "{\"field\": \"time\", \"message\": \"Time period is required\", \"rule_id\": \"val_time_required\", \"type\": \"required\"}"
          },
          {
            "rule_id": "val_7",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"field\": \"time\", \"message\": \"Time period must be greater than 0\", \"rule_id\": \"val_time_min\", \"type\": \"min\", \"value\": 0.01}",
            "message": "{\"field\": \"time\", \"message\": \"Time period must be greater than 0\", \"rule_id\": \"val_time_min\", \"type\": \"min\", \"value\": 0.01}"
          },
          {
            "rule_id": "val_8",
            "field": null,
            "type": "custom",
            "value": null,
            "expression": "{\"field\": \"time\", \"message\": \"Time period cannot exceed 100 years\", \"rule_id\": \"val_time_max\", \"type\": \"max\", \"value\": 1200}",
            "message": "{\"field\": \"time\", \"message\": \"Time period cannot exceed 100 years\", \"rule_id\": \"val_time_max\", \"type\": \"max\", \"value\": 1200}"
          }
        ],
        "validation_messages": {},
        "updates": [
          {
            "target": "state.calculatedInterest",
            "expr": "(form.principal * form.rate * (form.timeUnit === 'MONTHS' ? form.time / 12 : form.time)) / 100"
          },
          {
            "target": "state.calculatedTotal",
            "expr": "form.principal + state.calculatedInterest"
          },
          {
            "target": "state.calculationBreakdown",
            "expr": "{ principal: form.principal, rate: form.rate, time: form.time, timeUnit: form.timeUnit }"
          },
          {
            "target": "state.showResults",
            "expr": "true"
          }
        ],
        "api_endpoint": "7d5f197612054bb2b2f06bd6db3bcc58",
        "api_body": null,
        "side_effects": [
          {
            "type": "toast",
            "config": {
              "message": "Calculation completed successfully!",
              "type": "success"
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      },
      "94dca4c06e54452d99fa6d9d5f845590": {
        "action_id": "94dca4c06e54452d99fa6d9d5f845590",
        "trigger": "button_click",
        "target_component_id": "clear_button",
        "operation": "custom",
        "description": "",
        "payload": {},
        "guard": null,
        "requires_confirmation": false,
        "confirmation_message": null,
        "validation_rules": [],
        "validation_messages": {},
        "updates": [
          {
            "target": "state.showResults",
            "expr": "false"
          },
          {
            "target": "state.calculatedInterest",
            "expr": "null"
          },
          {
            "target": "state.calculatedTotal",
            "expr": "null"
          },
          {
            "target": "state.calculationBreakdown",
            "expr": "null"
          }
        ],
        "api_endpoint": null,
        "api_body": null,
        "side_effects": [
          {
            "type": "reset_state",
            "config": {
              "target": "form"
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      },
      "e29b324fcac44e57af98cff61c0a0eb1": {
        "action_id": "e29b324fcac44e57af98cff61c0a0eb1",
        "trigger": "button_click",
        "target_component_id": "confirm_clear_button",
        "operation": "delete",
        "description": "",
        "payload": {},
        "guard": null,
        "requires_confirmation": true,
        "confirmation_message": null,
        "validation_rules": [],
        "validation_messages": {},
        "updates": [
          {
            "target": "state.clearHistoryModalVisible",
            "expr": "false"
          }
        ],
        "api_endpoint": "3143c1e5ded549f397039d20bc6348c8",
        "api_body": null,
        "side_effects": [
          {
            "type": "toast",
            "config": {
              "message": "Calculation history cleared",
              "type": "success"
            }
          },
          {
            "type": "modal_close",
            "config": {
              "modal_id": "clear_history_modal"
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      },
      "1a43ea39002c4e58a21735b53225fab2": {
        "action_id": "1a43ea39002c4e58a21735b53225fab2",
        "trigger": "row_click",
        "target_component_id": "history_list",
        "operation": "read",
        "description": "",
        "payload": {},
        "guard": null,
        "requires_confirmation": false,
        "confirmation_message": null,
        "validation_rules": [],
        "validation_messages": {},
        "updates": [
          {
            "target": "state.showResults",
            "expr": "false"
          }
        ],
        "api_endpoint": null,
        "api_body": null,
        "side_effects": [
          {
            "type": "toast",
            "config": {
              "message": "Values loaded into calculator",
              "type": "info"
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      }
    },
    "feedback": {
      "623c79c89ef7465b9d8223cb82003682": {
        "action_id": "623c79c89ef7465b9d8223cb82003682",
        "loading_indicator": "spinner",
        "loading_text": null,
        "success_message": "Calculation completed successfully!",
        "error_message": "Failed to calculate. Please check your inputs.",
        "ui_updates": []
      },
      "94dca4c06e54452d99fa6d9d5f845590": {
        "action_id": "94dca4c06e54452d99fa6d9d5f845590",
        "loading_indicator": "none",
        "loading_text": null,
        "success_message": "Form cleared",
        "error_message": "",
        "ui_updates": []
      },
      "e29b324fcac44e57af98cff61c0a0eb1": {
        "action_id": "e29b324fcac44e57af98cff61c0a0eb1",
        "loading_indicator": "spinner",
        "loading_text": null,
        "success_message": "History cleared successfully",
        "error_message": "Failed to clear history",
        "ui_updates": []
      },
      "1a43ea39002c4e58a21735b53225fab2": {
        "action_id": "1a43ea39002c4e58a21735b53225fab2",
        "loading_indicator": "none",
        "loading_text": null,
        "success_message": "Values loaded into calculator",
        "error_message": "",
        "ui_updates": []
      }
    }
  },
  "component_ir": {
    "library": "antd",
    "theme": {
      "primaryColor": "#1677ff",
      "secondaryColor": "#000000",
      "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%",
          "padding": "24px",
          "backgroundColor": "#f5f5f5"
        },
        "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": "Typography.Title",
        "label": "Simple Interest Calculator",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "level": 2
        },
        "dynamic_props": {},
        "styles": {
          "textAlign": "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
      },
      "content_wrapper": {
        "type": "div",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {
          "maxWidth": "800px",
          "margin": "0 auto",
          "width": "100%"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "calculator_card": {
        "type": "Card",
        "label": "Calculator",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "title": "Calculate Simple Interest",
          "bordered": true
        },
        "dynamic_props": {},
        "styles": {
          "marginBottom": "24px",
          "borderRadius": "6px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "calculator_form": {
        "type": "Form",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "layout": "vertical",
          "name": "calculator_form"
        },
        "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
      },
      "principal_field": {
        "type": "Form.Item",
        "label": "Principal Amount",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "name": "principal",
          "rules": [
            {
              "required": true,
              "message": "Principal amount is required"
            }
          ]
        },
        "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
      },
      "principal_input": {
        "type": "InputNumber",
        "label": null,
        "description": null,
        "bind": "form.principal",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "prefix": "$",
          "placeholder": "e.g. 10,000",
          "min": 0.01,
          "max": 999999999.99,
          "precision": 2,
          "style": {
            "width": "100%"
          },
          "formatter": "value => `${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')",
          "parser": "value => value.replace(/\\$\\s?|(,*)/g, '')"
        },
        "dynamic_props": {},
        "styles": {
          "width": "100%"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "rate_field": {
        "type": "Form.Item",
        "label": "Interest Rate",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "name": "rate",
          "rules": [
            {
              "required": true,
              "message": "Interest rate is required"
            }
          ]
        },
        "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
      },
      "rate_input": {
        "type": "InputNumber",
        "label": null,
        "description": null,
        "bind": "form.rate",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "suffix": "%",
          "placeholder": "e.g. 5",
          "min": 0.01,
          "max": 100,
          "precision": 2,
          "style": {
            "width": "100%"
          }
        },
        "dynamic_props": {},
        "styles": {
          "width": "100%"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "time_field": {
        "type": "Form.Item",
        "label": "Time Period",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "name": "time",
          "rules": [
            {
              "required": true,
              "message": "Time period is required"
            }
          ]
        },
        "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
      },
      "time_input_group": {
        "type": "Space.Compact",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "style": {
            "width": "100%"
          }
        },
        "dynamic_props": {},
        "styles": {
          "width": "100%"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "time_input": {
        "type": "InputNumber",
        "label": null,
        "description": null,
        "bind": "form.time",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "placeholder": "e.g. 2",
          "min": 0.01,
          "max": 1200,
          "precision": 2,
          "style": {
            "width": "70%"
          }
        },
        "dynamic_props": {},
        "styles": {
          "width": "70%"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "time_unit_field": {
        "type": "Form.Item",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "name": "timeUnit",
          "initialValue": "YEARS",
          "noStyle": true
        },
        "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
      },
      "time_unit_select": {
        "type": "Select",
        "label": null,
        "description": null,
        "bind": "form.timeUnit",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "options": [
            {
              "label": "Years",
              "value": "YEARS"
            },
            {
              "label": "Months",
              "value": "MONTHS"
            }
          ],
          "style": {
            "width": "30%"
          }
        },
        "dynamic_props": {},
        "styles": {
          "width": "30%"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "button_group": {
        "type": "Space",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "size": "middle"
        },
        "dynamic_props": {},
        "styles": {
          "width": "100%",
          "justifyContent": "center",
          "display": "flex"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "calculate_button": {
        "type": "Button",
        "label": "Calculate",
        "description": null,
        "bind": null,
        "onClick": "calculateInterest",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "primary",
          "htmlType": "submit",
          "size": "large"
        },
        "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
      },
      "clear_button": {
        "type": "Button",
        "label": "Clear",
        "description": null,
        "bind": null,
        "onClick": "clearForm",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "default",
          "size": "large"
        },
        "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
      },
      "results_card": {
        "type": "Card",
        "label": "Results",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "title": "Calculation Results",
          "bordered": true
        },
        "dynamic_props": {},
        "styles": {
          "marginBottom": "24px",
          "borderRadius": "6px",
          "backgroundColor": "#f0f9ff",
          "borderColor": "#1677ff"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "results_content": {
        "type": "div",
        "label": null,
        "description": null,
        "bind": null,
        "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
      },
      "interest_result": {
        "type": "Statistic",
        "label": "Simple Interest",
        "description": null,
        "bind": "state.formattedInterest",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "title": "Simple Interest",
          "prefix": "$",
          "precision": 2,
          "valueStyle": {
            "color": "#1677ff"
          }
        },
        "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
      },
      "total_result": {
        "type": "Statistic",
        "label": "Total Amount",
        "description": null,
        "bind": "state.formattedTotal",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "title": "Total Amount",
          "prefix": "$",
          "precision": 2,
          "valueStyle": {
            "color": "#52c41a",
            "fontWeight": "bold"
          }
        },
        "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
      },
      "formula_breakdown": {
        "type": "Typography.Text",
        "label": null,
        "description": null,
        "bind": "state.calculationBreakdown",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "secondary"
        },
        "dynamic_props": {},
        "styles": {
          "display": "block",
          "marginTop": "16px",
          "padding": "12px",
          "backgroundColor": "#fafafa",
          "borderRadius": "4px",
          "fontFamily": "monospace"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "success_alert": {
        "type": "Alert",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "message": "Calculation completed successfully!",
          "type": "success",
          "showIcon": 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
      },
      "history_card": {
        "type": "Card",
        "label": "Calculation History",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "title": "Calculation History",
          "bordered": true
        },
        "dynamic_props": {},
        "styles": {
          "marginBottom": "24px",
          "borderRadius": "6px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "history_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": "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
      },
      "history_title": {
        "type": "Typography.Text",
        "label": "Recent Calculations",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "strong": true
        },
        "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
      },
      "clear_history_button": {
        "type": "Button",
        "label": "Clear History",
        "description": null,
        "bind": null,
        "onClick": "openClearHistoryModal",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "default",
          "danger": true,
          "size": "small"
        },
        "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
      },
      "history_list": {
        "type": "List",
        "label": null,
        "description": null,
        "bind": "appContext.calculationHistory",
        "onClick": "loadHistoryItem",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "size": "small",
          "bordered": true,
          "locale": {
            "emptyText": "No calculations yet. Perform a calculation to see it here."
          }
        },
        "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
      },
      "history_empty_state": {
        "type": "Empty",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "description": "No calculations yet. Perform a calculation to see it here."
        },
        "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
      },
      "clear_history_modal": {
        "type": "Modal",
        "label": "Clear History",
        "description": null,
        "bind": "state.clearHistoryModalVisible",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "title": "Clear Calculation History",
          "okText": "Confirm",
          "cancelText": "Cancel",
          "okButtonProps": {
            "danger": true
          }
        },
        "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
      },
      "modal_content": {
        "type": "Typography.Text",
        "label": "Are you sure you want to clear all history?",
        "description": null,
        "bind": null,
        "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
      },
      "confirm_clear_button": {
        "type": "Button",
        "label": "Confirm",
        "description": null,
        "bind": null,
        "onClick": "clearHistory",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "primary",
          "danger": true
        },
        "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
      },
      "cancel_clear_button": {
        "type": "Button",
        "label": "Cancel",
        "description": null,
        "bind": null,
        "onClick": "closeClearHistoryModal",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "default"
        },
        "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",
        "content_wrapper"
      ],
      "content_wrapper": [
        "calculator_card",
        "results_card",
        "history_card",
        "clear_history_modal"
      ],
      "calculator_card": [
        "calculator_form"
      ],
      "calculator_form": [
        "principal_field",
        "rate_field",
        "time_field",
        "button_group"
      ],
      "principal_field": [
        "principal_input"
      ],
      "rate_field": [
        "rate_input"
      ],
      "time_field": [
        "time_input_group"
      ],
      "time_input_group": [
        "time_input",
        "time_unit_field"
      ],
      "time_unit_field": [
        "time_unit_select"
      ],
      "button_group": [
        "calculate_button",
        "clear_button"
      ],
      "results_card": [
        "success_alert",
        "results_content",
        "formula_breakdown"
      ],
      "results_content": [
        "interest_result",
        "total_result"
      ],
      "history_card": [
        "history_header",
        "history_list"
      ],
      "history_header": [
        "history_title",
        "clear_history_button"
      ],
      "clear_history_modal": [
        "modal_content",
        "confirm_clear_button",
        "cancel_clear_button"
      ]
    },
    "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
      },
      "content_wrapper": {
        "type": "vertical",
        "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
      },
      "calculator_form": {
        "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
      },
      "time_input_group": {
        "type": "horizontal",
        "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
      },
      "button_group": {
        "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
      },
      "results_card": {
        "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
      },
      "results_content": {
        "type": "horizontal",
        "gap": 48,
        "padding": null,
        "columns": null,
        "column_template": null,
        "row_template": null,
        "align_items": null,
        "justify_content": null,
        "wrap": false,
        "min_height": null,
        "overflow": null
      },
      "history_card": {
        "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
      },
      "history_header": {
        "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
      },
      "clear_history_modal": {
        "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
      }
    },
    "layout_zones": [
      {
        "zone_id": "main_zone",
        "component": "main_container",
        "anchor": "center",
        "size_hint": "full-width",
        "z_layer": "base",
        "notes": "Full page container with centered content"
      },
      {
        "zone_id": "modal_zone",
        "component": "clear_history_modal",
        "anchor": "center",
        "size_hint": "auto",
        "z_layer": "overlay",
        "notes": "Confirmation modal overlay"
      }
    ],
    "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
}