{
  "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 with three logical sections arranged vertically. Section 1 - Loan Input Form: Contains a numeric input field for Principal Amount (with $ prefix, placeholder e.g. 250,000, accepts values $1-$100,000,000 with thousand separators), a numeric input field for Annual Interest Rate (with % suffix, placeholder e.g. 6.5, accepts 0.01%-99.99%), a numeric input field for Loan Term with a toggle/dropdown to switch between Years and Months (accepts 1-50 years or 1-600 months, auto-converts between units), a prominent 'Calculate' button (primary color, enabled only when all fields are valid), and a 'Reset' button (secondary/outline style) that clears all inputs and results. Real-time field-level validation with error messages displayed below invalid fields (e.g. 'Principal must be between $1 and $100,000,000'). Placeholder text and helper tooltips (info icons) explaining terms like APR. Section 2 - Calculation Results Summary: Hidden until calculation is performed. Displays three stat cards in a row: Monthly Payment (largest/primary emphasis, formatted as currency e.g. $1,580.17), Total Amount Paid (formatted currency e.g. $568,861.20), and Total Interest Paid (formatted currency e.g. $318,861.20, optionally showing percentage of principal like '127.5% of loan amount'). Cards have clear labels and large typography for values. Section 3 - Amortization Schedule Table: Hidden until calculation is performed. A table with columns: Payment # (integer), Payment Amount (currency), Principal (currency), Interest (currency), Remaining Balance (currency). Alternating row colors for readability. Pagination with 12 rows per page or full scrollable table with option to expand/collapse. All currency values formatted with $ and 2 decimal places with thousand separators. An 'Export CSV' button and a 'Print' button above the table to download or print the schedule. The page is fully responsive, stacking sections vertically on mobile with touch-friendly inputs that trigger numeric keyboards.",
      "navigates_to": []
    }
  ],
  "shared_state": [
    {
      "key": "loanCalculation",
      "type": "{ calculationId: string; principalAmount: number; annualInterestRate: number; loanTermMonths: number; monthlyPayment: number; totalAmountPaid: number; totalInterestPaid: number; amortizationSchedule: Array<{ paymentNumber: number; paymentAmount: number; principalPortion: number; interestPortion: number; remainingBalance: number }> } | null",
      "initial_value": "null",
      "description": "Stores the current loan calculation results including inputs, computed summary values, and the full amortization schedule entries for display"
    }
  ],
  "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": {}
  }
}