@maestro_io/maestro-web-sdk 4.0.2 → 5.1.0

package/dist/src/services/StaticService/mocks.js

@@ -1,104 +1,119 @@
-export const MOCK_PAGE_CONFIG = {
-    panels: [
-        {
-            _id: '687e7d03f8d920eec4c8e90f',
-            slug: 'panel-6879b0f23af9e9c90b42a24b-401769973-espnStats-generated',
-            panel_name: 'Stats',
-            panel_type: 'espnStats',
-            icon_name: 'stats',
-        },
-        {
-            _id: '687e7d03f8d920eec4c8e910',
-            slug: 'panel-6879b0f23af9e9c90b42a24b-401769973-espnKeyPlays-generated',
-            panel_name: 'Key Plays',
-            panel_type: 'espnKeyPlays',
-            icon_name: 'keyPlays',
-        },
-        {
-            _id: '687e7d03f8d920eec4c8e911',
-            slug: 'panel-6879b0f23af9e9c90b42a24b-401769973-espnBet-generated',
-            panel_name: 'Bets',
-            panel_type: 'espnBet',
-            icon_name: 'bets',
-        },
-        {
-            _id: '687e7d03f8d920eec4c8e912',
-            slug: 'panel-6879b0f23af9e9c90b42a24b-401769973-espnFantasy-generated',
-            panel_name: 'Fantasy',
-            panel_type: 'espnFantasy',
-            icon_name: 'fantasy',
-        },
-        {
-            _id: '687e7d03f8d920eec4c8e913',
-            slug: 'panel-6879b0f23af9e9c90b42a24b-401769973-espnShop-generated',
-            panel_name: 'Espn Shop',
-            panel_type: 'espnShop',
-            icon_name: 'espnShop',
-        },
-    ],
-    page: {
-        _id: '687e7d05f8d920eec4c8e924',
-        slug: '401769973-1a5f0227-a13e-396c-8cea-8961bc288666',
-        type: 'channel',
-        name: 'NHL Test Game',
-        metadata: {
-            external_field_1: '401769973',
-            external_field_2: '2512ac76-a335-39cb-af51-b9afffc6571d',
-            external_field_3: '1a5f0227-a13e-396c-8cea-8961bc288666',
-            external_field_4: 'event',
-            external_field_5: '{"leagueId":"3040"}',
-        },
+// Shared page data for all mock configs
+const MOCK_PAGE = {
+    _id: '687e7d05f8d920eec4c8e924',
+    slug: '401769973-1a5f0227-a13e-396c-8cea-8961bc288666',
+    type: 'channel',
+    name: 'NHL Test Game',
+    metadata: {
+        external_field_1: '401769973',
+        external_field_2: '2512ac76-a335-39cb-af51-b9afffc6571d',
+        external_field_3: '1a5f0227-a13e-396c-8cea-8961bc288666',
+        external_field_4: 'event',
+        external_field_5: '{"leagueId":"3040"}',
     },
-    insights: {
-        _id: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkIjp7Il9pZCI6IjY2NGI5YzU3ZDU5YTdhNDMxNTQyZDgxNCIsImNyZWF0ZWQiOjE3MTYyMzEyNTguOTQ3LCJzbHVnIjoiZXNwbiIsInVpZCI6InNpdGVfdG9rZW4ifSwiaWF0IjoxNzE2MjMxMjU4fQ.Qtl9F3Cvk1wASCK0sycxwQcuih1exjTngfjqhb19oQA',
+};
+const MOCK_INSIGHTS = {
+    _id: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkIjp7Il9pZCI6IjY2NGI5YzU3ZDU5YTdhNDMxNTQyZDgxNCIsImNyZWF0ZWQiOjE3MTYyMzEyNTguOTQ3LCJzbHVnIjoiZXNwbiIsInVpZCI6InNpdGVfdG9rZW4ifSwiaWF0IjoxNzE2MjMxMjU4fQ.Qtl9F3Cvk1wASCK0sycxwQcuih1exjTngfjqhb19oQA',
+};
+const MOCK_SITE = {
+    _id: '664b9c57d59a7a431542d814',
+    domainUrl: 'www.maestro.io/espn',
+    package: {
+        version: '4.06.0',
+        id: 'maestro',
     },
-    site: {
-        _id: '664b9c57d59a7a431542d814',
-        domainUrl: 'www.maestro.io/espn',
-        package: {
-            version: '4.06.0',
-            id: 'maestro',
-        },
+    slug: 'mock-espn-site',
+};
+const MOCK_THEME = {
+    _id: '66db3b75f682a8c91436c8fc',
+    button: {
+        borderRadius: 'rounded',
+        textCapitalization: 'uppercase',
     },
-    theme: {
-        _id: '66db3b75f682a8c91436c8fc',
-        button: {
-            borderRadius: 'rounded',
-            textCapitalization: 'uppercase',
-        },
-        colors: {
-            accentPrimary: '#fbc010FF',
-            accentSecondary: '#AD850A',
-            accentTertiary: '#FFFFFF',
-            alertConfirmation: '#43D48F',
-            alertError: '#FF0000',
-            alertWarning: '#F4D73D',
-            highlightPrimary: '#F3F7FF',
-            highlightSecondary: '#9DA0A6',
-            highlightTertiary: '#0C0D0D',
-            surface1: '#000000',
-            surface2: '#0D0D0D',
-            surface3: '#1A1A1A',
-            surface4: '#262626',
-            surface5: '#404040',
-            surface6: '#4D4D4D',
-            text100: '#FFF2F2',
-            text200: '#CCC2C2',
-            text300: '#999191',
-            text400: '#666161',
-            text500: '#0D0C0C',
-        },
-        name: 'Landing Page',
-        siteId: '664b9c57d59a7a431542d814',
-        type: 'custom',
-        typography: {
-            body: 'helvetica-lt-std-roman',
-            headline: 'industry-demi',
-        },
-        creator: '664b9c6b70e9a56febd2dbab',
-        owner: '664b9c6b70e9a56febd2dbab',
-        created: 1725643637480,
-        modified: 1733600558188,
-        tags: [],
+    colors: {
+        accentPrimary: '#fbc010FF',
+        accentSecondary: '#AD850A',
+        accentTertiary: '#FFFFFF',
+        alertConfirmation: '#43D48F',
+        alertError: '#FF0000',
+        alertWarning: '#F4D73D',
+        highlightPrimary: '#F3F7FF',
+        highlightSecondary: '#9DA0A6',
+        highlightTertiary: '#0C0D0D',
+        surface1: '#000000',
+        surface2: '#0D0D0D',
+        surface3: '#1A1A1A',
+        surface4: '#262626',
+        surface5: '#404040',
+        surface6: '#4D4D4D',
+        text100: '#FFF2F2',
+        text200: '#CCC2C2',
+        text300: '#999191',
+        text400: '#666161',
+        text500: '#0D0C0C',
+    },
+    name: 'Landing Page',
+    siteId: '664b9c57d59a7a431542d814',
+    type: 'custom',
+    typography: {
+        body: 'helvetica-lt-std-roman',
+        headline: 'industry-demi',
+    },
+    creator: '664b9c6b70e9a56febd2dbab',
+    owner: '664b9c6b70e9a56febd2dbab',
+    created: 1725643637480,
+    modified: 1733600558188,
+    tags: [],
+};
+const MOCK_PANELS = [
+    {
+        _id: '687e7d03f8d920eec4c8e90f',
+        slug: 'panel-6879b0f23af9e9c90b42a24b-401769973-espnStats-generated',
+        panel_name: 'Stats',
+        panel_type: 'espnStats',
+        icon_name: 'stats',
     },
+    {
+        _id: '687e7d03f8d920eec4c8e910',
+        slug: 'panel-6879b0f23af9e9c90b42a24b-401769973-espnKeyPlays-generated',
+        panel_name: 'Key Plays',
+        panel_type: 'espnKeyPlays',
+        icon_name: 'keyPlays',
+    },
+    {
+        _id: '687e7d03f8d920eec4c8e911',
+        slug: 'panel-6879b0f23af9e9c90b42a24b-401769973-espnBet-generated',
+        panel_name: 'Bets',
+        panel_type: 'espnBet',
+        icon_name: 'bets',
+    },
+    {
+        _id: '687e7d03f8d920eec4c8e912',
+        slug: 'panel-6879b0f23af9e9c90b42a24b-401769973-espnFantasy-generated',
+        panel_name: 'Fantasy',
+        panel_type: 'espnFantasy',
+        icon_name: 'fantasy',
+    },
+    {
+        _id: '687e7d03f8d920eec4c8e913',
+        slug: 'panel-6879b0f23af9e9c90b42a24b-401769973-espnShop-generated',
+        panel_name: 'Espn Shop',
+        panel_type: 'espnShop',
+        icon_name: 'espnShop',
+    },
+];
+export const MOCK_PAGE_CONFIG = {
+    panels: MOCK_PANELS,
+    page: MOCK_PAGE,
+    insights: MOCK_INSIGHTS,
+    site: MOCK_SITE,
+    theme: MOCK_THEME,
+};
+// Page config without panels for test setup (avoids view model loading)
+export const MOCK_PAGE_CONFIG_NO_PANELS = {
+    panels: [],
+    page: MOCK_PAGE,
+    insights: MOCK_INSIGHTS,
+    site: MOCK_SITE,
+    theme: MOCK_THEME,
 };

package/dist/src/services/StaticService/types.d.ts

@@ -1,3 +1,4 @@
+import { MaestroPanelType } from '@/models/IPanel';
 import ITheme from '@/models/ITheme';
 type PlatformConfig = {
     analytics: {
@@ -13,7 +14,7 @@ interface PageConfigPanel<TRendererData = unknown, TBlockData = any> {
     _id: string;
     slug: string;
     panel_name?: string;
-    panel_type?: string;
+    panel_type?: MaestroPanelType;
     icon_name?: string;
     renderer?: {
         block_data?: TBlockData;
@@ -70,6 +71,7 @@ export interface PageConfig {
             version: string;
             id: string;
         };
+        slug: string;
     };
     theme?: ITheme | null;
 }

package/dist/src/services/UserSettingsManager.js

@@ -2,11 +2,11 @@ import { Observable } from '@/helpers/Observable';
 import { DEFAULT_USER_SETTINGS, } from '@/interfaces/IUserSettings';
 import { MaestroPanelType } from '@/models/IPanel';
 const PANEL_TYPE_SETTINGS_KEY_MAP = {
-    [MaestroPanelType.BETS]: 'bets',
-    [MaestroPanelType.STATS]: 'stats',
-    [MaestroPanelType.KEY_PLAYS]: 'keyPlays',
-    [MaestroPanelType.FANTASY]: 'fantasy',
-    [MaestroPanelType.SHOP]: 'shop',
+    [MaestroPanelType.ESPN_BETS]: 'bets',
+    [MaestroPanelType.ESPN_STATS]: 'stats',
+    [MaestroPanelType.ESPN_KEY_PLAYS]: 'keyPlays',
+    [MaestroPanelType.ESPN_FANTASY]: 'fantasy',
+    [MaestroPanelType.ESPN_SHOP]: 'shop',
 };
 /**
  * UserSettingsManager - Singleton service for managing user settings
@@ -150,6 +150,9 @@ export class UserSettingsManager {
      * @param panelType - Panel type from MaestroPanelType enum
      */
     mapPanelTypeToSettingsKey(panelType) {
-        return PANEL_TYPE_SETTINGS_KEY_MAP[panelType] || null;
+        if (panelType in PANEL_TYPE_SETTINGS_KEY_MAP) {
+            return PANEL_TYPE_SETTINGS_KEY_MAP[panelType];
+        }
+        return null;
     }
 }

package/dist/src/view-models/MaestroEventViewModel.d.ts

@@ -1,32 +1,66 @@
 import IMaestroEventDelegate from '../interfaces/IMaestroEventDelegate';
-import IMaestroEvent, { TestUseCase } from '../interfaces/IMaestroEvent';
+import IMaestroEvent from '../interfaces/IMaestroEvent';
 import { Observable } from '../helpers/Observable';
 import { ViewModel } from './ViewModel';
-import KeyPlaysViewModel from '../modules/key-plays/view-model/KeyPlaysViewModel';
-import BetsViewModel from '../modules/bets/view-model/BetsViewModel';
 import SpatialNavigation from '@/external/spatial-navigation/spatialNavigation';
-import StatsViewModel from '../modules/stats/view-model/StatsViewModel';
-import IMaestroKeyPlaysResponse from '../modules/key-plays/interfaces/IKeyPlaysResponse';
+import IMaestroKeyPlaysResponse from '../modules/espn/key-plays/interfaces/IKeyPlaysResponse';
 import { MaestroPanelType } from '@/models/IPanel';
 import { IUserSettings } from '../interfaces/IUserSettings';
 import { PanelManagerViewModel } from './PanelManagerViewModel';
-import FantasyViewModel from '@/modules/fantasy/view-model/FantasyViewModel';
-import ShopViewModel from '@/modules/shop/view-model/ShopViewModel';
+import AnalyticsService from '@/services/AnalyticsService/AnalyticsService';
+import { IKeyPlaysViewModel } from '../modules/espn/key-plays/interfaces/IKeyPlaysViewModel';
+import { IBetsViewModel } from '../modules/espn/bets/interfaces/IBetsViewModel';
+import { IStatsViewModel } from '../modules/espn/stats/interfaces/IStatsViewModel';
+import { IFantasyViewModel } from '@/modules/espn/fantasy/types';
+import { IShopViewModel } from '@/modules/espn/shop/types';
+import { BuilderPanelViewModel } from '@/modules/maestro/builder/view-model/BuilderPanelViewModel';
 export declare class MaestroEventViewModel extends ViewModel implements IMaestroEvent {
     private _eventId;
+    private _pageId;
     private _title;
     private _isLive;
     private _isShowingPanel;
     private playerTimeCode;
+    private analyticsService;
     delegate: IMaestroEventDelegate;
-    keyPlaysViewModel: KeyPlaysViewModel | null;
-    fantasyViewModel: FantasyViewModel | null;
-    betsViewModel: BetsViewModel | null;
-    statsViewModel: StatsViewModel | null;
-    shopViewModel: ShopViewModel | null;
+    keyPlaysViewModel: IKeyPlaysViewModel | null;
+    fantasyViewModel: IFantasyViewModel | null;
+    betsViewModel: IBetsViewModel | null;
+    statsViewModel: IStatsViewModel | null;
+    shopViewModel: IShopViewModel | null;
+    builderPanelViewModel: BuilderPanelViewModel | null;
     panelManagerViewModel: PanelManagerViewModel;
     navigation: SpatialNavigation;
-    constructor(eventId: string | undefined, delegate: IMaestroEventDelegate);
+    constructor(eventId: string | undefined, pageId: string | undefined, delegate: IMaestroEventDelegate, analyticsService: AnalyticsService);
+    /**
+     * Initializes view models for enabled panels using dynamic imports (code splitting).
+     *
+     * This method lazily loads view model modules based on the page configuration,
+     * reducing initial bundle size by only loading modules for panels that are enabled.
+     *
+     * @remarks
+     * - Must be called after SDK configuration and before interacting with any view models
+     * - Typically invoked during `userDidStartWatchingEvent()` flow
+     * - Each view model is loaded in parallel for optimal performance
+     *
+     * @remarks Error Handling
+     * - Individual view model loading failures are caught and logged as warnings
+     * - Failed view models remain `null`, allowing other panels to function normally
+     * - The method resolves successfully even if some view models fail to load
+     * - Callers should check for `null` before using any view model property
+     *
+     * @example
+     * ```typescript
+     * await maestroEventViewModel.initViewModels();
+     * // Check if view model loaded before use
+     * if (maestroEventViewModel.betsViewModel) {
+     *   maestroEventViewModel.betsViewModel.startPolling();
+     * }
+     * ```
+     *
+     * @returns Promise that resolves when all view model loading attempts complete
+     */
+    initViewModels(): Promise<void>;
     setActivePanel(panelType: MaestroPanelType): void;
     updatePlayerTimeCode(timestamp: number): void;
     getPlayerTimeCode(): number | null;
@@ -41,8 +75,6 @@ export declare class MaestroEventViewModel extends ViewModel implements IMaestro
     didUpdatePlaybackProgressOfClip(index: number, to: number): void;
     didShowPanel(): Promise<void>;
     didHidePanel(): Promise<void>;
-    didShowOverlay(): Promise<void>;
-    didHideOverlay(): Promise<void>;
     currentEventDoesNotSupportKeyPlays(): void;
     getCurrentEventID(): string;
     getCurrentlyPlayingClipIndex(): number | null;
@@ -54,7 +86,6 @@ export declare class MaestroEventViewModel extends ViewModel implements IMaestro
     get isLive(): Observable<boolean>;
     get isShowingPanel(): boolean;
     set isShowingPanel(value: boolean);
-    simulateUseCase<T = any>(useCase: TestUseCase, panelType: MaestroPanelType, testData?: T): void;
     /**
      * This method is called when the user navigates to the MaestroEventViewModel.
      * It will pause navigation and start focus management.

package/dist/src/view-models/MaestroEventViewModel.js

@@ -1,17 +1,12 @@
 import { Observable } from '../helpers/Observable';
 import { ViewModel } from './ViewModel';
-import KeyPlaysViewModel from '../modules/key-plays/view-model/KeyPlaysViewModel';
-import BetsViewModel from '../modules/bets/view-model/BetsViewModel';
 import SpatialNavigation from '@/external/spatial-navigation/spatialNavigation';
-import StatsViewModel from '../modules/stats/view-model/StatsViewModel';
 import { UserSettingsManager } from '../services/UserSettingsManager';
 import { PanelManagerViewModel } from './PanelManagerViewModel';
 import SDK from '..';
 import StaticService from '@/services/StaticService';
-import FantasyViewModel from '@/modules/fantasy/view-model/FantasyViewModel';
-import ShopViewModel from '@/modules/shop/view-model/ShopViewModel';
 export class MaestroEventViewModel extends ViewModel {
-    constructor(eventId = '', delegate) {
+    constructor(eventId = '', pageId = '', delegate, analyticsService) {
         super();
         Object.defineProperty(this, "_eventId", {
             enumerable: true,
@@ -19,6 +14,12 @@ export class MaestroEventViewModel extends ViewModel {
             writable: true,
             value: new Observable('')
         });
+        Object.defineProperty(this, "_pageId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable('')
+        });
         Object.defineProperty(this, "_title", {
             enumerable: true,
             configurable: true,
@@ -43,6 +44,12 @@ export class MaestroEventViewModel extends ViewModel {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "analyticsService", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "delegate", {
             enumerable: true,
             configurable: true,
@@ -53,31 +60,37 @@ export class MaestroEventViewModel extends ViewModel {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: null
         });
         Object.defineProperty(this, "fantasyViewModel", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: null
         });
         Object.defineProperty(this, "betsViewModel", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: null
         });
         Object.defineProperty(this, "statsViewModel", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: null
         });
         Object.defineProperty(this, "shopViewModel", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: null
+        });
+        Object.defineProperty(this, "builderPanelViewModel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
         });
         Object.defineProperty(this, "panelManagerViewModel", {
             enumerable: true,
@@ -91,28 +104,103 @@ export class MaestroEventViewModel extends ViewModel {
             writable: true,
             value: void 0
         });
+        this._pageId.value = pageId;
         this._eventId.value = eventId;
         this.delegate = delegate;
-        const pageConfig = SDK.getPageConfig();
-        // Conditionally instantiate view models based on page configuration
-        this.keyPlaysViewModel = StaticService.isPanelAvailable(pageConfig, 'espnKeyPlays')
-            ? new KeyPlaysViewModel()
-            : null;
-        this.betsViewModel = StaticService.isPanelAvailable(pageConfig, 'espnBet')
-            ? new BetsViewModel(eventId, delegate)
-            : null;
-        this.statsViewModel = StaticService.isPanelAvailable(pageConfig, 'espnStats')
-            ? new StatsViewModel(eventId, delegate)
-            : null;
-        this.fantasyViewModel = StaticService.isPanelAvailable(pageConfig, 'espnFantasy')
-            ? new FantasyViewModel(eventId, delegate)
-            : null;
-        this.shopViewModel = StaticService.isPanelAvailable(pageConfig, 'espnShop')
-            ? new ShopViewModel(eventId)
-            : null;
+        this.analyticsService = analyticsService;
         this.panelManagerViewModel = new PanelManagerViewModel();
         this.navigation = new SpatialNavigation();
     }
+    /**
+     * Initializes view models for enabled panels using dynamic imports (code splitting).
+     *
+     * This method lazily loads view model modules based on the page configuration,
+     * reducing initial bundle size by only loading modules for panels that are enabled.
+     *
+     * @remarks
+     * - Must be called after SDK configuration and before interacting with any view models
+     * - Typically invoked during `userDidStartWatchingEvent()` flow
+     * - Each view model is loaded in parallel for optimal performance
+     *
+     * @remarks Error Handling
+     * - Individual view model loading failures are caught and logged as warnings
+     * - Failed view models remain `null`, allowing other panels to function normally
+     * - The method resolves successfully even if some view models fail to load
+     * - Callers should check for `null` before using any view model property
+     *
+     * @example
+     * ```typescript
+     * await maestroEventViewModel.initViewModels();
+     * // Check if view model loaded before use
+     * if (maestroEventViewModel.betsViewModel) {
+     *   maestroEventViewModel.betsViewModel.startPolling();
+     * }
+     * ```
+     *
+     * @returns Promise that resolves when all view model loading attempts complete
+     */
+    async initViewModels() {
+        const pageConfig = SDK.getPageConfig();
+        const loadPromises = [];
+        if (StaticService.isPanelAvailable(pageConfig, 'espnKeyPlays')) {
+            loadPromises.push(import('../modules/espn/key-plays/view-model/KeyPlaysViewModel')
+                .then(({ default: KeyPlaysViewModel }) => {
+                this.keyPlaysViewModel = new KeyPlaysViewModel(this.analyticsService);
+            })
+                .catch((err) => {
+                console.warn('Failed to load KeyPlaysViewModel:', err);
+            }));
+        }
+        if (StaticService.isPanelAvailable(pageConfig, 'espnBet')) {
+            loadPromises.push(import('../modules/espn/bets/view-model/BetsViewModel')
+                .then(({ default: BetsViewModel }) => {
+                this.betsViewModel = new BetsViewModel(this._eventId.value, this.delegate, this.analyticsService);
+            })
+                .catch((err) => {
+                console.warn('Failed to load BetsViewModel:', err);
+            }));
+        }
+        if (StaticService.isPanelAvailable(pageConfig, 'espnStats')) {
+            loadPromises.push(import('../modules/espn/stats/view-model/StatsViewModel')
+                .then(({ default: StatsViewModel }) => {
+                this.statsViewModel = new StatsViewModel(this._eventId.value, this.delegate, this.analyticsService);
+            })
+                .catch((err) => {
+                console.warn('Failed to load StatsViewModel:', err);
+            }));
+        }
+        if (StaticService.isPanelAvailable(pageConfig, 'espnFantasy')) {
+            loadPromises.push(import('@/modules/espn/fantasy/view-model/FantasyViewModel')
+                .then(({ default: FantasyViewModel }) => {
+                this.fantasyViewModel = new FantasyViewModel(this._eventId.value, this.delegate, this.analyticsService);
+            })
+                .catch((err) => {
+                console.warn('Failed to load FantasyViewModel:', err);
+            }));
+        }
+        if (StaticService.isPanelAvailable(pageConfig, 'espnShop')) {
+            loadPromises.push(import('@/modules/espn/shop/view-model/ShopViewModel')
+                .then(({ default: ShopViewModel }) => {
+                this.shopViewModel = new ShopViewModel(this._eventId.value, this.analyticsService);
+            })
+                .catch((err) => {
+                console.warn('Failed to load ShopViewModel:', err);
+            }));
+        }
+        if (StaticService.isPanelAvailable(pageConfig, 'builderBlockPanel')) {
+            const builderPanel = pageConfig?.panels?.find((p) => p.panel_type === 'builderBlockPanel');
+            if (builderPanel) {
+                loadPromises.push(import('@/modules/maestro/builder/view-model/BuilderPanelViewModel')
+                    .then(({ BuilderPanelViewModel }) => {
+                    this.builderPanelViewModel = new BuilderPanelViewModel(builderPanel, this.analyticsService);
+                })
+                    .catch((err) => {
+                    console.warn('Failed to load BuilderPanelViewModel:', err);
+                }));
+            }
+        }
+        await Promise.all(loadPromises);
+    }
     setActivePanel(panelType) {
         const index = this.panelManagerViewModel.getIndex(panelType);
         if (index === null) {
@@ -149,6 +237,11 @@ export class MaestroEventViewModel extends ViewModel {
             espnKeyPlays: this.keyPlaysViewModel,
             espnFantasy: this.fantasyViewModel,
             espnShop: this.shopViewModel,
+            builderBlockPanel: this.builderPanelViewModel,
+            foxKeyPlays: null,
+            foxMultiview: null,
+            foxStats: null,
+            helloWorld: null,
         };
         for (const panelType of panelTypes) {
             const data = panelData[panelType];
@@ -161,7 +254,7 @@ export class MaestroEventViewModel extends ViewModel {
             }
             else {
                 // Panel exists, call its setDataToPanel method
-                if (panelType === 'espnStats' && viewModel.setDataToPanel) {
+                if (viewModel.setDataToPanel) {
                     viewModel.setDataToPanel(data);
                 }
             }
@@ -172,6 +265,7 @@ export class MaestroEventViewModel extends ViewModel {
         this.statsViewModel?.cleanup();
         this.fantasyViewModel?.cleanup();
         this.shopViewModel?.cleanup();
+        this.builderPanelViewModel?.cleanup();
         this.navigation.destroy();
         try {
             await this.didHidePanel();
@@ -193,7 +287,7 @@ export class MaestroEventViewModel extends ViewModel {
         });
     }
     startFocusManagement() {
-        this.navigation.setCurrentFocusedKey(this.navigation.focusKey || 'PANEL_NAV_BUTTON_0', {});
+        this.navigation.setCurrentFocusedKey(this.navigation.focusKey || 'PANEL_NAV_BUTTON_0');
         setTimeout(() => {
             this.navigation.resume();
         }, 0);
@@ -230,12 +324,6 @@ export class MaestroEventViewModel extends ViewModel {
         this.isShowingPanel = false;
         this.navigation.focusKey = null;
     }
-    didShowOverlay() {
-        throw new Error('Method not implemented.');
-    }
-    didHideOverlay() {
-        throw new Error('Method not implemented.');
-    }
     currentEventDoesNotSupportKeyPlays() {
         if (this.keyPlaysViewModel) {
             this.keyPlaysViewModel.errorState.value = 'unsupportedEvent';
@@ -271,28 +359,6 @@ export class MaestroEventViewModel extends ViewModel {
     set isShowingPanel(value) {
         this._isShowingPanel.value = value;
     }
-    simulateUseCase(useCase, panelType, testData) {
-        switch (panelType) {
-            case 'bets':
-                if (this.betsViewModel) {
-                    this.betsViewModel.simulateUseCase(useCase, testData);
-                }
-                else {
-                    console.warn('BetsViewModel is not initialized');
-                }
-                break;
-            case 'stats':
-                if (this.statsViewModel) {
-                    this.statsViewModel.simulateUseCase(useCase, testData);
-                }
-                else {
-                    console.warn('StatsViewModel is not initialized');
-                }
-                break;
-            default:
-                throw new Error(`Unsupported panel type: ${panelType}`);
-        }
-    }
     /**
      * This method is called when the user navigates to the MaestroEventViewModel.
      * It will pause navigation and start focus management.

package/dist/src/view-models/PanelManagerViewModel.d.ts

@@ -9,7 +9,6 @@ export declare class PanelManagerViewModel {
     private _currentPanel;
     private settingsManager;
     private settingsUnsubscribe;
-    private readonly ALL_PANELS;
     private getAvailablePanelsFromConfig;
     constructor();
     /**
@@ -43,4 +42,8 @@ export declare class PanelManagerViewModel {
     getPanelType(atIndex: number): MaestroPanelType | null;
     get panelTypeToLeft(): MaestroPanelType | null;
     get panelTypeToRight(): MaestroPanelType | null;
+    /**
+     * @returns Array of PanelInfo for panels defined in config but not listed in MaestroPanelType
+     */
+    getUnlistedPanels(): PanelInfo[];
 }