{
  "page_ir": {
    "page_id": "stock_list",
    "page_goal": "Display a comprehensive, searchable, filterable list of all available stocks with table/grid view toggle, sorting, pagination, and navigation to stock detail pages",
    "style": {
      "tone": "professional",
      "theme": "light",
      "density": "comfortable",
      "color_intent": "financial"
    },
    "accessibility": {
      "required_labels": [
        "search_input",
        "filter_panel",
        "stocks_table",
        "pagination_controls",
        "view_toggle"
      ],
      "skip_navigation": true,
      "focus_management": true,
      "announce_changes": []
    },
    "responsive": {
      "breakpoints": {
        "sm": 576,
        "md": 768,
        "lg": 992,
        "xl": 1200
      },
      "collapse_rules": [
        "filter_sidebar_collapses_to_drawer_on_mobile",
        "table_becomes_card_grid_on_small"
      ],
      "hidden_on_small": [
        "market_cap_column",
        "volume_column",
        "exchange_column"
      ],
      "stack_on_small": []
    },
    "constraints": [
      "max_1000_search_results",
      "pagination_options_25_50_100",
      "autocomplete_max_10_suggestions"
    ],
    "seo_title": null,
    "seo_description": null
  },
  "data_ir": {
    "types": {},
    "state": {
      "stocks": {
        "type": "array",
        "initial": [],
        "required": true,
        "constraints": {},
        "item_type": null
      },
      "sectors": {
        "type": "array",
        "initial": [],
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "exchanges": {
        "type": "array",
        "initial": [],
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "totalCount": {
        "type": "number",
        "initial": 0,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "loading": {
        "type": "boolean",
        "initial": true,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "filterDrawerVisible": {
        "type": "boolean",
        "initial": false,
        "required": false,
        "constraints": {},
        "item_type": null
      },
      "autocompleteSuggestions": {
        "type": "array",
        "initial": [],
        "required": false,
        "constraints": {
          "maxLength": 10
        },
        "item_type": null
      },
      "lastUpdated": {
        "type": "string",
        "initial": null,
        "required": false,
        "constraints": {},
        "item_type": null
      }
    },
    "derived": {
      "activeFilterCount": {
        "type": "number",
        "expr": "(appContext.activeFilters.sectors.length > 0 ? 1 : 0) + (appContext.activeFilters.exchanges.length > 0 ? 1 : 0) + (appContext.activeFilters.priceMin !== null || appContext.activeFilters.priceMax !== null ? 1 : 0) + (appContext.activeFilters.marketCapRange !== null ? 1 : 0) + (appContext.activeFilters.volumeMin !== null || appContext.activeFilters.volumeMax !== null ? 1 : 0)",
        "deps": []
      },
      "paginationOffset": {
        "type": "number",
        "expr": "(appContext.currentPage - 1) * appContext.itemsPerPage",
        "deps": []
      }
    }
  },
  "data_fetch_ir": {
    "endpoints": {
      "97201e42811d4c2e862d9266636957a4": {
        "endpoint_id": "97201e42811d4c2e862d9266636957a4",
        "module": "Stock Management",
        "endpoint": "/stock-management/stocks",
        "method": "GET",
        "path_params": {},
        "query_params": {
          "limit": "$appContext.itemsPerPage",
          "offset": "$derived.paginationOffset",
          "search": "$appContext.searchQuery",
          "sector_id": "$appContext.activeFilters.sectors[0]",
          "exchange_id": "$appContext.activeFilters.exchanges[0]",
          "min_price": "$appContext.activeFilters.priceMin",
          "max_price": "$appContext.activeFilters.priceMax"
        },
        "body": null,
        "fields": [
          "id",
          "ticker_symbol",
          "company_name",
          "current_price",
          "opening_price",
          "closing_price",
          "high_price",
          "low_price",
          "volume",
          "market_cap",
          "sector_id",
          "exchange_id",
          "currency",
          "last_updated",
          "logo_url",
          "status"
        ],
        "response_target": "stocks",
        "response_transform": null,
        "trigger": "on_mount",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      },
      "507713aa82074aa3959c2c0181d8e521": {
        "endpoint_id": "507713aa82074aa3959c2c0181d8e521",
        "module": "Stock Management",
        "endpoint": "/stock-management/sectors",
        "method": "GET",
        "path_params": {},
        "query_params": {
          "limit": 100,
          "offset": 0
        },
        "body": null,
        "fields": [
          "id",
          "name",
          "icon_url",
          "display_order"
        ],
        "response_target": "sectors",
        "response_transform": null,
        "trigger": "on_mount",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      },
      "981ee57f3e684028bd8a25a64af2358c": {
        "endpoint_id": "981ee57f3e684028bd8a25a64af2358c",
        "module": "Stock Management",
        "endpoint": "/stock-management/exchanges",
        "method": "GET",
        "path_params": {},
        "query_params": {
          "limit": 100,
          "offset": 0
        },
        "body": null,
        "fields": [
          "id",
          "name",
          "code",
          "country"
        ],
        "response_target": "exchanges",
        "response_transform": null,
        "trigger": "on_mount",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      },
      "3c23f15f6a394353bf1c1614739926fb": {
        "endpoint_id": "3c23f15f6a394353bf1c1614739926fb",
        "module": "Stock Management",
        "endpoint": "/stock-management/stocks/search/autocomplete",
        "method": "GET",
        "path_params": {},
        "query_params": {
          "search": "$appContext.searchQuery"
        },
        "body": null,
        "fields": [
          "id",
          "ticker_symbol",
          "company_name",
          "current_price",
          "logo_url"
        ],
        "response_target": "autocompleteSuggestions",
        "response_transform": null,
        "trigger": "on_change",
        "depends_on": [],
        "debounce_ms": null,
        "loading_field": null,
        "error_field": null
      }
    }
  },
  "data_model_ir": {
    "entities": {
      "stock": {
        "name": "Stock",
        "backend_module": "Stock Management",
        "fields": [
          "id",
          "ticker_symbol",
          "company_name",
          "current_price",
          "opening_price",
          "closing_price",
          "high_price",
          "low_price",
          "volume",
          "market_cap",
          "sector_id",
          "industry",
          "exchange_id",
          "currency",
          "last_updated",
          "description",
          "logo_url",
          "website_url",
          "country",
          "ipo_date",
          "status",
          "created_at",
          "updated_at"
        ],
        "computed": [
          "price_change",
          "price_change_percentage"
        ],
        "display_fields": [
          "ticker_symbol",
          "company_name",
          "current_price",
          "volume",
          "market_cap",
          "sector_id",
          "exchange_id",
          "logo_url"
        ],
        "search_fields": [
          "ticker_symbol",
          "company_name"
        ],
        "filters": [
          "sector_id",
          "exchange_id",
          "status"
        ],
        "default_sort": null,
        "default_sort_dir": "asc"
      },
      "sector": {
        "name": "Sector",
        "backend_module": "Stock Management",
        "fields": [
          "id",
          "name",
          "description",
          "icon_url",
          "display_order",
          "created_at",
          "updated_at"
        ],
        "computed": [],
        "display_fields": [
          "name"
        ],
        "search_fields": [],
        "filters": [],
        "default_sort": null,
        "default_sort_dir": "asc"
      },
      "exchange": {
        "name": "Exchange",
        "backend_module": "Stock Management",
        "fields": [
          "id",
          "name",
          "code",
          "country",
          "timezone",
          "trading_hours",
          "currency",
          "website_url",
          "description",
          "created_at",
          "updated_at"
        ],
        "computed": [],
        "display_fields": [
          "name",
          "code"
        ],
        "search_fields": [],
        "filters": [
          "country"
        ],
        "default_sort": null,
        "default_sort_dir": "asc"
      }
    },
    "relationships": []
  },
  "behaviour_ir": {
    "events": {
      "onSearchChange": {
        "type": "mutation",
        "updates": [
          {
            "target": "appContext.searchQuery",
            "expr": "event.value"
          },
          {
            "target": "appContext.currentPage",
            "expr": "1"
          }
        ],
        "description": ""
      },
      "onPageChange": {
        "type": "mutation",
        "updates": [
          {
            "target": "appContext.currentPage",
            "expr": "event.page"
          }
        ],
        "description": ""
      },
      "onPageSizeChange": {
        "type": "mutation",
        "updates": [
          {
            "target": "appContext.itemsPerPage",
            "expr": "event.pageSize"
          },
          {
            "target": "appContext.currentPage",
            "expr": "1"
          }
        ],
        "description": ""
      },
      "onSortChange": {
        "type": "mutation",
        "updates": [
          {
            "target": "appContext.sortConfig",
            "expr": "{ field: event.field, direction: event.order === 'ascend' ? 'asc' : 'desc' }"
          }
        ],
        "description": ""
      },
      "onViewModeToggle": {
        "type": "mutation",
        "updates": [
          {
            "target": "appContext.viewMode",
            "expr": "appContext.viewMode === 'table' ? 'grid' : 'table'"
          }
        ],
        "description": ""
      },
      "onFilterDrawerOpen": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.filterDrawerVisible",
            "expr": "true"
          }
        ],
        "description": ""
      },
      "onFilterDrawerClose": {
        "type": "mutation",
        "updates": [
          {
            "target": "state.filterDrawerVisible",
            "expr": "false"
          }
        ],
        "description": ""
      },
      "onSectorFilterChange": {
        "type": "mutation",
        "updates": [
          {
            "target": "appContext.activeFilters.sectors",
            "expr": "event.value"
          },
          {
            "target": "appContext.currentPage",
            "expr": "1"
          }
        ],
        "description": ""
      },
      "onExchangeFilterChange": {
        "type": "mutation",
        "updates": [
          {
            "target": "appContext.activeFilters.exchanges",
            "expr": "event.value"
          },
          {
            "target": "appContext.currentPage",
            "expr": "1"
          }
        ],
        "description": ""
      },
      "onPriceRangeChange": {
        "type": "mutation",
        "updates": [
          {
            "target": "appContext.activeFilters.priceMin",
            "expr": "event.min"
          },
          {
            "target": "appContext.activeFilters.priceMax",
            "expr": "event.max"
          },
          {
            "target": "appContext.currentPage",
            "expr": "1"
          }
        ],
        "description": ""
      },
      "onMarketCapFilterChange": {
        "type": "mutation",
        "updates": [
          {
            "target": "appContext.activeFilters.marketCapRange",
            "expr": "event.value"
          },
          {
            "target": "appContext.currentPage",
            "expr": "1"
          }
        ],
        "description": ""
      },
      "onClearAllFilters": {
        "type": "mutation",
        "updates": [
          {
            "target": "appContext.activeFilters",
            "expr": "{ sectors: [], exchanges: [], priceMin: null, priceMax: null, marketCapRange: null, volumeMin: null, volumeMax: null }"
          },
          {
            "target": "appContext.currentPage",
            "expr": "1"
          }
        ],
        "description": ""
      }
    },
    "actions": {
      "c11ab09fe27643ab95a5f5a97fc85fa4": {
        "action_id": "c11ab09fe27643ab95a5f5a97fc85fa4",
        "trigger": "row_click",
        "target_component_id": "stocks_table",
        "operation": "custom",
        "description": "",
        "payload": {
          "stockId": "$event.record.id"
        },
        "guard": null,
        "requires_confirmation": false,
        "confirmation_message": null,
        "validation_rules": [],
        "validation_messages": {},
        "updates": [],
        "api_endpoint": null,
        "api_body": null,
        "side_effects": [
          {
            "type": "navigate",
            "config": {
              "path": "/stocks/${event.record.id}"
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      },
      "00152604a69443cb89ccfbbf9d24ddcf": {
        "action_id": "00152604a69443cb89ccfbbf9d24ddcf",
        "trigger": "button_click",
        "target_component_id": "search_input",
        "operation": "read",
        "description": "",
        "payload": {},
        "guard": null,
        "requires_confirmation": false,
        "confirmation_message": null,
        "validation_rules": [],
        "validation_messages": {},
        "updates": [
          {
            "target": "state.loading",
            "expr": "true"
          }
        ],
        "api_endpoint": "97201e42811d4c2e862d9266636957a4",
        "api_body": null,
        "side_effects": [
          {
            "type": "refresh",
            "config": {
              "target": "fetchStocks"
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      },
      "8b918fe01b1e48559e37e63ecc1acaae": {
        "action_id": "8b918fe01b1e48559e37e63ecc1acaae",
        "trigger": "button_click",
        "target_component_id": "apply_filters_button",
        "operation": "read",
        "description": "",
        "payload": {},
        "guard": null,
        "requires_confirmation": false,
        "confirmation_message": null,
        "validation_rules": [],
        "validation_messages": {},
        "updates": [
          {
            "target": "state.filterDrawerVisible",
            "expr": "false"
          },
          {
            "target": "state.loading",
            "expr": "true"
          }
        ],
        "api_endpoint": "97201e42811d4c2e862d9266636957a4",
        "api_body": null,
        "side_effects": [
          {
            "type": "refresh",
            "config": {
              "target": "fetchStocks"
            }
          },
          {
            "type": "drawer_close",
            "config": {
              "drawer_id": "filter_drawer"
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      },
      "413542edc06545c2b677f8d5f6cbcb9f": {
        "action_id": "413542edc06545c2b677f8d5f6cbcb9f",
        "trigger": "button_click",
        "target_component_id": "clear_filters_button",
        "operation": "custom",
        "description": "",
        "payload": {},
        "guard": null,
        "requires_confirmation": false,
        "confirmation_message": null,
        "validation_rules": [],
        "validation_messages": {},
        "updates": [
          {
            "target": "appContext.activeFilters",
            "expr": "{ sectors: [], exchanges: [], priceMin: null, priceMax: null, marketCapRange: null, volumeMin: null, volumeMax: null }"
          },
          {
            "target": "appContext.currentPage",
            "expr": "1"
          }
        ],
        "api_endpoint": null,
        "api_body": null,
        "side_effects": [
          {
            "type": "refresh",
            "config": {
              "target": "fetchStocks"
            }
          }
        ],
        "then": null,
        "catch": null,
        "data_action": null
      }
    },
    "feedback": {
      "c11ab09fe27643ab95a5f5a97fc85fa4": {
        "action_id": "c11ab09fe27643ab95a5f5a97fc85fa4",
        "loading_indicator": "none",
        "loading_text": null,
        "success_message": null,
        "error_message": null,
        "ui_updates": []
      },
      "00152604a69443cb89ccfbbf9d24ddcf": {
        "action_id": "00152604a69443cb89ccfbbf9d24ddcf",
        "loading_indicator": "skeleton",
        "loading_text": null,
        "success_message": null,
        "error_message": "Failed to load stocks. Please try again.",
        "ui_updates": [
          "state.loading = false"
        ]
      },
      "8b918fe01b1e48559e37e63ecc1acaae": {
        "action_id": "8b918fe01b1e48559e37e63ecc1acaae",
        "loading_indicator": "spinner",
        "loading_text": null,
        "success_message": null,
        "error_message": "Failed to apply filters.",
        "ui_updates": [
          "state.loading = false"
        ]
      },
      "413542edc06545c2b677f8d5f6cbcb9f": {
        "action_id": "413542edc06545c2b677f8d5f6cbcb9f",
        "loading_indicator": "none",
        "loading_text": null,
        "success_message": "Filters cleared",
        "error_message": null,
        "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": "Layout",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {
          "minHeight": "100vh",
          "width": "100%",
          "background": "#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": "div",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {
          "padding": "24px 24px 0 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
      },
      "header_title": {
        "type": "Typography.Title",
        "label": "Stocks",
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "level": 2
        },
        "dynamic_props": {},
        "styles": {
          "marginBottom": "0"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "header_meta": {
        "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",
          "marginTop": "8px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "result_count_text": {
        "type": "Typography.Text",
        "label": null,
        "description": null,
        "bind": "state.totalCount",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "secondary"
        },
        "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
      },
      "last_updated_text": {
        "type": "Typography.Text",
        "label": "Last updated",
        "description": null,
        "bind": "state.lastUpdated",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "secondary"
        },
        "dynamic_props": {},
        "styles": {
          "fontSize": "12px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "toolbar_section": {
        "type": "div",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {
          "padding": "16px 24px",
          "display": "flex",
          "gap": "12px",
          "alignItems": "center",
          "flexWrap": "wrap"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "search_input": {
        "type": "AutoComplete",
        "label": "Search stocks",
        "description": null,
        "bind": "appContext.searchQuery",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "placeholder": "Search by ticker symbol or company name...",
          "allowClear": true,
          "size": "large",
          "options": "state.autocompleteSuggestions"
        },
        "dynamic_props": {},
        "styles": {
          "flex": "1",
          "minWidth": "280px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "filter_button": {
        "type": "Button",
        "label": "Filters",
        "description": null,
        "bind": null,
        "onClick": "onFilterDrawerOpen",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "icon": "FilterOutlined",
          "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
      },
      "filter_badge": {
        "type": "Badge",
        "label": null,
        "description": null,
        "bind": "derived.activeFilterCount",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "count": "derived.activeFilterCount",
          "offset": [
            -5,
            5
          ]
        },
        "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
      },
      "view_toggle_group": {
        "type": "Radio.Group",
        "label": null,
        "description": null,
        "bind": "appContext.viewMode",
        "onClick": "onViewModeToggle",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "buttonStyle": "solid",
          "size": "large",
          "options": [
            {
              "label": "Table",
              "value": "table"
            },
            {
              "label": "Grid",
              "value": "grid"
            }
          ]
        },
        "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
      },
      "content_section": {
        "type": "div",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {
          "padding": "0 24px 24px 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
      },
      "stocks_table": {
        "type": "Table",
        "label": "Stocks Table",
        "description": null,
        "bind": "state.stocks",
        "onClick": "navigateToStockDetail",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "columns": [
            {
              "title": "",
              "dataIndex": "logo_url",
              "key": "logo",
              "width": 48,
              "render": "avatar"
            },
            {
              "title": "Ticker",
              "dataIndex": "ticker_symbol",
              "key": "ticker_symbol",
              "sorter": true,
              "width": 100
            },
            {
              "title": "Company Name",
              "dataIndex": "company_name",
              "key": "company_name",
              "sorter": true,
              "ellipsis": true
            },
            {
              "title": "Price",
              "dataIndex": "current_price",
              "key": "current_price",
              "sorter": true,
              "width": 120,
              "render": "currency"
            },
            {
              "title": "Change",
              "dataIndex": "price_change",
              "key": "price_change",
              "width": 140,
              "render": "price_change_indicator"
            },
            {
              "title": "Volume",
              "dataIndex": "volume",
              "key": "volume",
              "sorter": true,
              "width": 120,
              "render": "number_abbreviated"
            },
            {
              "title": "Market Cap",
              "dataIndex": "market_cap",
              "key": "market_cap",
              "sorter": true,
              "width": 130,
              "render": "number_abbreviated"
            },
            {
              "title": "Sector",
              "dataIndex": "sector_id",
              "key": "sector_id",
              "width": 130,
              "render": "sector_tag"
            },
            {
              "title": "Exchange",
              "dataIndex": "exchange_id",
              "key": "exchange_id",
              "width": 110,
              "render": "exchange_tag"
            }
          ],
          "rowKey": "id",
          "loading": "state.loading",
          "size": "middle",
          "scroll": {
            "x": 1000
          },
          "onRow": "navigateToStockDetail",
          "showSorterTooltip": true
        },
        "dynamic_props": {},
        "styles": {
          "cursor": "pointer"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "stocks_grid": {
        "type": "List",
        "label": "Stocks Grid",
        "description": null,
        "bind": "state.stocks",
        "onClick": "navigateToStockDetail",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "grid": {
            "gutter": 16,
            "xs": 1,
            "sm": 2,
            "md": 3,
            "lg": 4,
            "xl": 4
          },
          "loading": "state.loading",
          "renderItem": "stock_card"
        },
        "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
      },
      "stock_card": {
        "type": "Card",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": "navigateToStockDetail",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "hoverable": true,
          "size": "small"
        },
        "dynamic_props": {},
        "styles": {
          "cursor": "pointer"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "pagination_section": {
        "type": "div",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {
          "padding": "16px 24px",
          "display": "flex",
          "justifyContent": "center"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "pagination_controls": {
        "type": "Pagination",
        "label": "Pagination",
        "description": null,
        "bind": null,
        "onClick": "onPageChange",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "current": "appContext.currentPage",
          "pageSize": "appContext.itemsPerPage",
          "total": "state.totalCount",
          "showSizeChanger": true,
          "pageSizeOptions": [
            "25",
            "50",
            "100"
          ],
          "showTotal": true,
          "showQuickJumper": 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
      },
      "filter_drawer": {
        "type": "Drawer",
        "label": "Filters",
        "description": null,
        "bind": "state.filterDrawerVisible",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "title": "Filter Stocks",
          "placement": "right",
          "width": 360,
          "open": "state.filterDrawerVisible",
          "onClose": "onFilterDrawerClose"
        },
        "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
      },
      "sector_filter_select": {
        "type": "Select",
        "label": "Sector",
        "description": null,
        "bind": "appContext.activeFilters.sectors",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "mode": "multiple",
          "placeholder": "Select sectors",
          "allowClear": true,
          "options": "state.sectors",
          "fieldNames": {
            "label": "name",
            "value": "id"
          }
        },
        "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
      },
      "exchange_filter_select": {
        "type": "Select",
        "label": "Exchange",
        "description": null,
        "bind": "appContext.activeFilters.exchanges",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "mode": "multiple",
          "placeholder": "Select exchanges",
          "allowClear": true,
          "options": "state.exchanges",
          "fieldNames": {
            "label": "name",
            "value": "id"
          }
        },
        "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
      },
      "price_min_input": {
        "type": "InputNumber",
        "label": "Min Price",
        "description": null,
        "bind": "appContext.activeFilters.priceMin",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "placeholder": "Min",
          "min": 0,
          "prefix": "$"
        },
        "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
      },
      "price_max_input": {
        "type": "InputNumber",
        "label": "Max Price",
        "description": null,
        "bind": "appContext.activeFilters.priceMax",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "placeholder": "Max",
          "min": 0,
          "prefix": "$"
        },
        "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
      },
      "market_cap_filter": {
        "type": "Select",
        "label": "Market Cap",
        "description": null,
        "bind": "appContext.activeFilters.marketCapRange",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "placeholder": "Select market cap range",
          "allowClear": true,
          "options": [
            {
              "label": "Small Cap (< $2B)",
              "value": "small"
            },
            {
              "label": "Mid Cap ($2B - $10B)",
              "value": "mid"
            },
            {
              "label": "Large Cap (> $10B)",
              "value": "large"
            }
          ]
        },
        "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
      },
      "apply_filters_button": {
        "type": "Button",
        "label": "Apply Filters",
        "description": null,
        "bind": null,
        "onClick": "applyFilters",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "type": "primary",
          "block": 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_filters_button": {
        "type": "Button",
        "label": "Clear All",
        "description": null,
        "bind": null,
        "onClick": "clearFilters",
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "block": true
        },
        "dynamic_props": {},
        "styles": {
          "marginTop": "8px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "filter_form_container": {
        "type": "Space",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "direction": "vertical",
          "size": "middle"
        },
        "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
      },
      "price_range_row": {
        "type": "div",
        "label": null,
        "description": null,
        "bind": null,
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {},
        "dynamic_props": {},
        "styles": {
          "display": "flex",
          "gap": "8px"
        },
        "dynamic_styles": {},
        "class_name": null,
        "dynamic_class": null,
        "transitions": [],
        "visible_when": null,
        "disabled_when": null,
        "repeat": null,
        "slots": {},
        "a11y_role": null,
        "a11y_label": null
      },
      "skeleton_loader": {
        "type": "Skeleton",
        "label": null,
        "description": null,
        "bind": "state.loading",
        "onClick": null,
        "onChange": null,
        "onSubmit": null,
        "onHover": null,
        "onKeyPress": null,
        "props": {
          "active": true,
          "paragraph": {
            "rows": 10
          }
        },
        "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",
        "toolbar_section",
        "content_section",
        "pagination_section",
        "filter_drawer"
      ],
      "page_header": [
        "header_title",
        "header_meta"
      ],
      "header_meta": [
        "result_count_text",
        "last_updated_text"
      ],
      "toolbar_section": [
        "search_input",
        "filter_badge",
        "view_toggle_group"
      ],
      "filter_badge": [
        "filter_button"
      ],
      "content_section": [
        "stocks_table",
        "stocks_grid"
      ],
      "pagination_section": [
        "pagination_controls"
      ],
      "filter_drawer": [
        "filter_form_container"
      ],
      "filter_form_container": [
        "sector_filter_select",
        "exchange_filter_select",
        "price_range_row",
        "market_cap_filter",
        "apply_filters_button",
        "clear_filters_button"
      ],
      "price_range_row": [
        "price_min_input",
        "price_max_input"
      ]
    },
    "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
      },
      "page_header": {
        "type": "vertical",
        "gap": 4,
        "padding": null,
        "columns": null,
        "column_template": null,
        "row_template": null,
        "align_items": null,
        "justify_content": null,
        "wrap": false,
        "min_height": null,
        "overflow": null
      },
      "header_meta": {
        "type": "horizontal",
        "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
      },
      "toolbar_section": {
        "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
      },
      "content_section": {
        "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
      },
      "pagination_section": {
        "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
      },
      "filter_form_container": {
        "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
      },
      "price_range_row": {
        "type": "horizontal",
        "gap": 8,
        "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_content",
        "component": "content_section",
        "anchor": "center",
        "size_hint": "full-width",
        "z_layer": "base",
        "notes": "Main content area showing either table or grid view based on viewMode"
      },
      {
        "zone_id": "filter_overlay",
        "component": "filter_drawer",
        "anchor": "top-left",
        "size_hint": "auto",
        "z_layer": "overlay",
        "notes": "Filter drawer slides in from right side"
      }
    ],
    "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
}