{
  "app_name": "Stock Listing",
  "pages": [
    {
      "page_id": "stock_list",
      "page_title": "Stocks",
      "route_path": "/",
      "route_params": [],
      "image_indices": [],
      "description": "The main landing page displaying a comprehensive list of all available stocks. Features a responsive table/grid view with columns: Ticker Symbol, Company Name, Current Price, Price Change (amount and percentage with green/red color indicators), Volume, Market Cap, Sector, and Exchange. Includes a prominent search bar at the top for searching by ticker symbol or company name with autocomplete suggestions. A filter panel/sidebar allows filtering by sector (multi-select), exchange (multi-select), price range (min/max), market cap range (small/mid/large cap), and volume range. Active filter count badge is shown. Sorting is available on all column headers with visual sort indicators. Pagination controls at the bottom with configurable items per page (25, 50, 100). Supports toggling between grid view and table view. Each stock row shows the company logo when available. Displays total result count and last updated timestamp. Clicking a stock row navigates to the stock detail page. Loading state shows skeleton loaders.",
      "navigates_to": [
        "stock_detail"
      ]
    },
    {
      "page_id": "stock_detail",
      "page_title": "Stock Details",
      "route_path": "/stocks/:stockId",
      "route_params": [
        "stockId"
      ],
      "image_indices": [],
      "description": "Detailed view of a single stock showing comprehensive information. Displays prominently: ticker symbol, company name, company logo, current price with large font, price change amount and percentage with green/red indicator. Shows key metrics in stat cards: opening price, closing price, high price, low price, volume, market capitalization (formatted with abbreviations like B/M). Displays company description, sector and industry classification, exchange information, currency, country, IPO date and years since IPO, website link (opens in new tab). Includes a historical price line chart with time range toggles (1 month, 3 months, 6 months, 1 year, all time). Shows 52-week high and low prices. Breadcrumb navigation at the top (Home > Stocks > [Company Name]). Last updated timestamp displayed. Back button to return to stock list.",
      "navigates_to": [
        "stock_list"
      ]
    }
  ],
  "shared_state": [
    {
      "key": "searchQuery",
      "type": "string",
      "initial_value": "\"\"",
      "description": "Current search query text persisted so users can navigate to detail and back without losing search context"
    },
    {
      "key": "activeFilters",
      "type": "{ sectors: string[]; exchanges: string[]; priceMin: number | null; priceMax: number | null; marketCapRange: string | null; volumeMin: number | null; volumeMax: number | null }",
      "initial_value": "{ sectors: [], exchanges: [], priceMin: null, priceMax: null, marketCapRange: null, volumeMin: null, volumeMax: null }",
      "description": "Active filter selections persisted across navigation so users can return to filtered results"
    },
    {
      "key": "sortConfig",
      "type": "{ field: string; direction: 'asc' | 'desc' }",
      "initial_value": "{ field: 'ticker', direction: 'asc' }",
      "description": "Current sort configuration persisted across page navigation"
    },
    {
      "key": "viewMode",
      "type": "'table' | 'grid'",
      "initial_value": "\"table\"",
      "description": "User preference for list display mode persisted across sessions"
    },
    {
      "key": "currentPage",
      "type": "number",
      "initial_value": "1",
      "description": "Current pagination page so user can return to same page after viewing a stock detail"
    },
    {
      "key": "itemsPerPage",
      "type": "number",
      "initial_value": "25",
      "description": "User preference for number of items displayed per page"
    }
  ],
  "default_route": "stock_list",
  "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": {}
  }
}