{
  "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. Contains an input section with three labeled fields: Loan Amount (currency input, default $10,000, min $100, max $100,000,000), Annual Interest Rate (percentage input, default 5.0%, min 0.01%, max 99.99%), and Loan Term (numeric input with a toggle/dropdown to switch between months and years, default 360 months / 30 years). Below the inputs are two action buttons: a prominent 'Calculate' button (primary color, enabled only when inputs are valid) and a 'Reset' button that restores defaults and clears results. Real-time inline validation displays red error messages below each field for invalid entries. The results section displays three summary stat cards: Monthly Payment (large bold text), Total Interest Paid (warning color), and Total Amount Paid. A pie chart shows Principal vs Interest breakdown visually. Below the summary is a full Amortization Schedule table with columns: Payment #, Payment Date, Payment Amount, Principal, Interest, Remaining Balance. The table supports pagination or virtual scrolling for up to 480 rows, highlights the first and last payments, and is responsive on mobile. A Summary Statistics panel shows: total number of payments, total interest as percentage of principal, average monthly interest, average monthly principal, and projected payoff date. An export/share section provides a 'Print' button (opens browser print dialog with print-friendly layout), a 'Copy Results' button (copies formatted text/CSV to clipboard with a success toast notification), and optionally a 'Download PDF' button. All monetary values are formatted with $ symbol and thousands separators. The calculator auto-calculates with 500ms debounce on input change as an alternative to the Calculate button. Tooltips with information icons explain each input field. The page is fully responsive, stacking vertically on mobile with touch-friendly 44x44px targets.",
      "navigates_to": []
    }
  ],
  "shared_state": [
    {
      "key": "calculationResult",
      "type": "{ calculationId: string; principalAmount: number; annualInterestRate: number; loanTermMonths: number; monthlyPayment: number; totalInterest: number; totalAmountPaid: number; amortizationSchedule: Array<{ paymentNumber: number; paymentDate: string; 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 for display and export"
    },
    {
      "key": "calculationSettings",
      "type": "{ defaultLoanAmount: number; defaultInterestRate: number; defaultLoanTerm: number; currencySymbol: string; decimalPrecision: number; dateFormat: string }",
      "initial_value": "{ \"defaultLoanAmount\": 10000, \"defaultInterestRate\": 5.0, \"defaultLoanTerm\": 360, \"currencySymbol\": \"$\", \"decimalPrecision\": 2, \"dateFormat\": \"MM/DD/YYYY\" }",
      "description": "Global calculator settings including defaults and display formatting preferences"
    }
  ],
  "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": {}
  }
}