{
  "app_name": "Simple Loan Calculator",
  "pages": [
    {
      "page_id": "loan_calculator",
      "page_title": "Loan Calculator",
      "route_path": "/",
      "route_params": [],
      "image_indices": [],
      "description": "Single-page loan calculator application. The layout is organized vertically into four sections: (1) A header/title bar displaying 'Loan Calculator' at the top. (2) An input form section containing three labeled input fields: 'Loan Amount' (numeric input with dollar sign prefix, placeholder '$250,000', accepts values $1 to $100,000,000 with 2 decimal places), 'Annual Interest Rate' (numeric input with percent suffix, placeholder '4.5%', accepts 0-30% with up to 3 decimal places), and 'Loan Term' (integer input with a dropdown/toggle unit selector for 'Months' or 'Years', range 1-360 months). Each field shows inline validation error messages in red text below the field with red border styling when invalid. Two action buttons appear below the inputs: a primary 'Calculate' button (disabled when inputs are invalid) and a secondary 'Clear' / 'Reset' button. (3) A results summary section displayed as a prominent card/panel showing: Monthly Payment in large bold currency format ($X,XXX.XX), Total Interest Paid in currency format, Total Amount Paid in currency format, Loan Term displayed in both months and years, and the Interest Rate as a percentage. This section only appears after a successful calculation. (4) An amortization schedule section displayed as a data table with fixed/sticky headers and alternating row colors. Table columns: Payment # (integer, left-aligned), Payment Date (MM/DD/YYYY, left-aligned), Beginning Balance (currency, right-aligned), Payment Amount (currency, right-aligned), Principal (currency, right-aligned), Interest (currency, right-aligned), Ending Balance (currency, right-aligned), Cumulative Interest (currency, right-aligned). The table supports vertical scrolling for long schedules (up to 360 rows) with virtualization. Optional export actions: an 'Export to CSV' button that triggers a browser download of the schedule as 'loan_schedule_YYYYMMDD.csv', and a 'Print' button that opens the browser print dialog with print-optimized CSS. These export/print actions appear as small icon buttons or text links near the schedule header. The form supports real-time validation on blur, and optionally auto-recalculates with a 300-500ms debounce after input changes. Previous inputs are optionally persisted to localStorage and restored on reload. The Clear/Reset button resets all fields and clears stored data. When no calculation has been performed yet, the results and schedule sections are hidden or show an empty state prompt like 'Enter loan details above and click Calculate to see your payment schedule.'",
      "navigates_to": []
    }
  ],
  "shared_state": [],
  "default_route": "loan_calculator",
  "design_system": {
    "theme_mode": "light",
    "density": "comfortable",
    "color_primary": "#1677ff",
    "color_success": "#52c41a",
    "color_warning": "#faad14",
    "color_error": "#ff4d4f",
    "color_bg_container": "#ffffff",
    "color_bg_layout": "#f5f5f5",
    "color_text": "#000000e0",
    "color_border": "#d9d9d9",
    "font_family": "Inter, -apple-system, sans-serif",
    "font_size_base": 14,
    "border_radius": 6,
    "component_overrides": {}
  }
}