@maestro_io/maestro-web-sdk 1.0.0

package/dist/index-DXErYNZH.js

@@ -0,0 +1,151 @@
+import t, { useSyncExternalStore as r } from "react";
+import { S as m, d as l, P as y } from "./index-BaSckwps.js";
+const u = {
+  borderRadius: 6,
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  cursor: "pointer",
+  width: "100%",
+  border: "none"
+}, d = (e) => {
+  const n = {
+    ...u,
+    ...e.style
+  };
+  return /* @__PURE__ */ t.createElement("button", { style: n, ...e }, e.children);
+}, E = t.lazy(() => import("./KeyPlaysIcon-Br9gu_Zu.js")), g = t.lazy(() => import("./PlayIcon-CNKWNaLP.js")), h = t.lazy(() => import("./BetsIcon-UrnN4lvP.js")), v = t.lazy(() => import("./StatsIcon-Ds4hriWX.js")), N = t.lazy(() => import("./FantasyIcon-DmloKsq_.js")), P = t.lazy(() => import("./WarningIcon-BuzZKL26.js")), b = {
+  keyPlays: E,
+  play: g,
+  bets: h,
+  stats: v,
+  fantasy: N,
+  warning: P
+}, i = (e) => /* @__PURE__ */ t.createElement("div", { style: { width: e.width, height: e.height } }), f = (e) => {
+  const n = b[e.iconName];
+  return n ? /* @__PURE__ */ t.createElement(
+    t.Suspense,
+    {
+      fallback: /* @__PURE__ */ t.createElement(i, { width: e.width, height: e.height })
+    },
+    /* @__PURE__ */ t.createElement(
+      n,
+      {
+        iconName: e.iconName,
+        height: e.height,
+        width: e.width
+      }
+    )
+  ) : /* @__PURE__ */ t.createElement(i, { width: e.width, height: e.height });
+}, S = 10009, w = ({ onBack: e, onLeft: n, active: a }) => {
+  t.useEffect(() => {
+    const s = new AbortController();
+    return window.addEventListener(
+      "keydown",
+      (o) => {
+        a && ((o.keyCode === S || o.key === "b") && (e == null || e(o)), (o.key === "ArrowLeft" || o.keyCode === 37) && (n == null || n(o)));
+      },
+      { signal: s.signal }
+    ), () => {
+      s.abort();
+    };
+  }, [a, e, n]);
+}, A = (e) => {
+  const n = m.getMaestroEventViewModel();
+  e.dataset.focused = "false", l.pause(), n.delegate.startFocusManagement();
+}, z = (e) => {
+  const { ref: n, focused: a } = l.useFocusable({
+    focusKey: `PANEL_NAV_BUTTON_${e.index}`,
+    onFocus: e.onEnter
+  });
+  return w({
+    active: e.index === 0 && a,
+    onLeft: () => {
+      A(n.current);
+    }
+  }), /* @__PURE__ */ t.createElement(
+    "div",
+    {
+      className: [
+        "panel-nav-button-container",
+        "T02",
+        e.active ? "panel-nav-button-active" : ""
+      ].join(" "),
+      ref: n
+    },
+    /* @__PURE__ */ t.createElement(d, null, /* @__PURE__ */ t.createElement(f, { iconName: e.iconName, height: 36, width: 36 })),
+    e.children
+  );
+}, I = (e) => {
+  const { ref: n, focusKey: a } = l.useFocusable({
+    focusKey: "PANEL_NAVIGATION"
+  });
+  return /* @__PURE__ */ t.createElement(l.FocusContext.Provider, { value: a }, /* @__PURE__ */ t.createElement("div", { className: "panel-navigation", ref: n }, e.items.map((s, o) => /* @__PURE__ */ t.createElement(
+    z,
+    {
+      iconName: s.iconName,
+      key: s.title,
+      index: o,
+      onEnter: s.onEnter,
+      active: s.active
+    },
+    s.title
+  ))));
+}, c = new y(), T = t.lazy(
+  () => import("./KeyPlaysView-Br-88ytG.js")
+), _ = {
+  keyPlays: /* @__PURE__ */ t.createElement(T, null),
+  bets: /* @__PURE__ */ t.createElement("div", { className: "panel-coming-soon T02" }, "Bets - Coming Soon"),
+  stats: /* @__PURE__ */ t.createElement("div", { className: "panel-coming-soon T02" }, "Stats - Coming Soon"),
+  fantasy: /* @__PURE__ */ t.createElement("div", { className: "panel-coming-soon T02" }, "Fantasy - Coming Soon")
+}, C = () => {
+  const e = r(
+    (a) => c.currentPanelObservable.subscribe(a),
+    () => c.currentPanel
+  ), n = [
+    {
+      iconName: "keyPlays",
+      onEnter: () => {
+        c.currentPanel = "keyPlays";
+      },
+      title: "KEY PLAYS",
+      active: e === "keyPlays"
+    },
+    {
+      iconName: "bets",
+      onEnter: () => {
+        c.currentPanel = "bets";
+      },
+      title: "BETS",
+      active: e === "bets"
+    },
+    {
+      iconName: "stats",
+      onEnter: () => {
+        c.currentPanel = "stats";
+      },
+      title: "STATS",
+      active: e === "stats"
+    },
+    {
+      iconName: "fantasy",
+      onEnter: () => {
+        c.currentPanel = "fantasy";
+      },
+      title: "FANTASY",
+      active: e === "fantasy"
+    }
+  ];
+  return /* @__PURE__ */ t.createElement("div", { className: "sdk--panel-manager" }, /* @__PURE__ */ t.createElement(I, { items: n }), /* @__PURE__ */ t.createElement("div", { className: "sdk--panel-wrapper" }, /* @__PURE__ */ t.createElement(t.Suspense, { fallback: null }, _[e])));
+}, L = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: C
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  d as B,
+  f as I,
+  A as d,
+  L as i,
+  w as u
+};
+//# sourceMappingURL=index-DXErYNZH.js.map

package/dist/index-DXErYNZH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-DXErYNZH.js","sources":["../src/components/atoms/BaseButton/BaseButton.tsx","../src/components/atoms/SvgIcon/Icon.tsx","../src/hooks/use-remote-control.ts","../src/helpers/deliver-focus.ts","../src/components/molecules/PanelNavButton/PanelNavButton.tsx","../src/components/organisms/PanelNavigation/PanelNavigation.tsx","../src/components/core/PanelManager/PanelManager.tsx"],"sourcesContent":["import React from 'react';\nimport { ButtonHTMLAttributes } from 'react';\n\nconst ButtonStyle: React.CSSProperties = {\n  borderRadius: 6,\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  cursor: 'pointer',\n  width: '100%',\n  border: 'none',\n};\n\ntype Props = {\n  ref?: React.RefObject<HTMLButtonElement>;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst BaseButton = (props: Props) => {\n  const style = {\n    ...ButtonStyle,\n    ...props.style,\n  };\n\n  return (\n    <button style={style} {...props}>\n      {props.children}\n    </button>\n  );\n};\n\nexport default BaseButton;\n","import React from 'react';\n\nconst LazyKeyPlaysIcon = React.lazy(() => import('./KeyPlaysIcon'));\nconst LazyPlayIcon = React.lazy(() => import('./PlayIcon'));\nconst LazyBetsIcon = React.lazy(() => import('./BetsIcon'));\nconst LazyStatsIcon = React.lazy(() => import('./StatsIcon'));\nconst LazyFantasyIcon = React.lazy(() => import('./FantasyIcon'));\nconst LazyWarningIcon = React.lazy(() => import('./WarningIcon'));\n\nconst ICONS_MAP = {\n  keyPlays: LazyKeyPlaysIcon,\n  play: LazyPlayIcon,\n  bets: LazyBetsIcon,\n  stats: LazyStatsIcon,\n  fantasy: LazyFantasyIcon,\n  warning: LazyWarningIcon,\n};\n\nexport type IconsName = keyof typeof ICONS_MAP;\n\nexport type IconProps = {\n  iconName: IconsName;\n  width: number;\n  height: number;\n};\n\nconst Skeleton = (props: Omit<IconProps, 'iconName'>) => (\n  <div style={{ width: props.width, height: props.height }} />\n);\n\nconst Icon = (props: IconProps) => {\n  const Icon = ICONS_MAP[props.iconName];\n  if (!Icon) {\n    return <Skeleton width={props.width} height={props.height} />;\n  }\n\n  return (\n    <React.Suspense\n      fallback={<Skeleton width={props.width} height={props.height} />}\n    >\n      <Icon\n        iconName={props.iconName}\n        height={props.height}\n        width={props.width}\n      />\n    </React.Suspense>\n  );\n};\n\nexport default Icon;\n","import React from 'react';\n\ntype Props = {\n  active: boolean;\n  onBack?: (e: KeyboardEvent) => void;\n  onLeft?: (e: KeyboardEvent) => void;\n};\n\nconst BACK_KEY_CODE = 10009;\n\nconst useRemoteControl = ({ onBack, onLeft, active }: Props) => {\n  React.useEffect(() => {\n    const abort = new AbortController();\n\n    window.addEventListener(\n      'keydown',\n      (e) => {\n        if (!active) {\n          return;\n        }\n\n        if (e.keyCode === BACK_KEY_CODE || e.key === 'b') {\n          onBack?.(e);\n        }\n\n        if (e.key === 'ArrowLeft' || e.keyCode === 37) {\n          onLeft?.(e);\n        }\n      },\n      { signal: abort.signal }\n    );\n\n    return () => {\n      abort.abort();\n    };\n  }, [active, onBack, onLeft]);\n};\n\nexport default useRemoteControl;\n","import { pause } from '@noriginmedia/norigin-spatial-navigation';\nimport SDK from '..';\n\n/**\n * @description Useful when you want to lose the focus of the SDK and delegate it to the Client App.\n */\nconst deliverFocus = (e: HTMLElement) => {\n  const eventVm = SDK.getMaestroEventViewModel();\n  e.dataset['focused'] = 'false';\n  pause();\n  eventVm.delegate.startFocusManagement();\n};\n\nexport default deliverFocus;\n","import { PropsWithChildren } from 'react';\nimport BaseButton from '@/components/atoms/BaseButton/BaseButton';\nimport Icon, { IconsName } from '@/components/atoms/SvgIcon/Icon';\nimport './PanelNavButton.styles.css';\nimport { useFocusable } from '@noriginmedia/norigin-spatial-navigation';\nimport useRemoteControl from '@/hooks/use-remote-control';\nimport deliverFocus from '@/helpers/deliver-focus';\nimport React from 'react';\n\ntype PanelNavButtonProps = {\n  iconName: IconsName;\n  index: number;\n  onEnter: () => void;\n  active: boolean;\n} & PropsWithChildren;\n\nconst PanelNavButton = (props: PanelNavButtonProps) => {\n  const { ref, focused } = useFocusable({\n    focusKey: `PANEL_NAV_BUTTON_${props.index}`,\n    onFocus: props.onEnter,\n  });\n\n  useRemoteControl({\n    active: props.index === 0 && focused,\n    onLeft: () => {\n      deliverFocus(ref.current as HTMLDivElement);\n    },\n  });\n\n  return (\n    <div\n      className={[\n        'panel-nav-button-container',\n        'T02',\n        props.active ? 'panel-nav-button-active' : '',\n      ].join(' ')}\n      ref={ref}\n    >\n      <BaseButton>\n        <Icon iconName={props.iconName} height={36} width={36} />\n      </BaseButton>\n      {props.children}\n    </div>\n  );\n};\n\nexport default PanelNavButton;\n","import PanelNavButton from '@/components/molecules/PanelNavButton';\nimport { IconsName } from '@/components/atoms/SvgIcon/Icon';\nimport './PanelNavigation.styles.css';\nimport {\n  FocusContext,\n  useFocusable,\n} from '@noriginmedia/norigin-spatial-navigation';\nimport React from 'react';\n\ntype PanelNavigationProps = {\n  items: {\n    title: string;\n    onEnter: () => void;\n    iconName: IconsName;\n    active: boolean;\n  }[];\n};\n\nconst PanelNavigation = (props: PanelNavigationProps) => {\n  const { ref, focusKey } = useFocusable({\n    focusKey: 'PANEL_NAVIGATION',\n  });\n\n  return (\n    <FocusContext.Provider value={focusKey}>\n      <div className=\"panel-navigation\" ref={ref}>\n        {props.items.map((item, index) => (\n          <PanelNavButton\n            iconName={item.iconName}\n            key={item.title}\n            index={index}\n            onEnter={item.onEnter}\n            active={item.active}\n          >\n            {item.title}\n          </PanelNavButton>\n        ))}\n      </div>\n    </FocusContext.Provider>\n  );\n};\n\nexport default PanelNavigation;\n","import React, { useSyncExternalStore } from 'react';\nimport { PanelManagerViewModel } from '@/view-models/PanelManagerViewModel';\nimport './PanelManager.styles.css';\nimport PanelNavigation from '@/components/organisms/PanelNavigation';\nimport { MaestroPanelType } from '@/models/IPanel';\n\nconst panelManagerViewModel = new PanelManagerViewModel();\n\nconst LazyKeyPlays = React.lazy(\n  () => import('@/modules/key-plays/view/KeyPlaysView')\n);\n\nconst PANELS_MAP: Record<MaestroPanelType, React.ReactNode> = {\n  keyPlays: <LazyKeyPlays />,\n  bets: <div className=\"panel-coming-soon T02\">Bets - Coming Soon</div>,\n  stats: <div className=\"panel-coming-soon T02\">Stats - Coming Soon</div>,\n  fantasy: <div className=\"panel-coming-soon T02\">Fantasy - Coming Soon</div>,\n};\n\nconst PanelManager = () => {\n  const activePanel = useSyncExternalStore(\n    (l) => panelManagerViewModel.currentPanelObservable.subscribe(l),\n    () => panelManagerViewModel.currentPanel\n  );\n\n  const PANEL_ITEMS: {\n    title: string;\n    onEnter: () => void;\n    iconName: MaestroPanelType;\n    active: boolean;\n  }[] = [\n    {\n      iconName: 'keyPlays',\n      onEnter: () => {\n        panelManagerViewModel.currentPanel = 'keyPlays';\n      },\n      title: 'KEY PLAYS',\n      active: activePanel === 'keyPlays',\n    },\n    {\n      iconName: 'bets',\n      onEnter: () => {\n        panelManagerViewModel.currentPanel = 'bets';\n      },\n      title: 'BETS',\n      active: activePanel === 'bets',\n    },\n    {\n      iconName: 'stats',\n      onEnter: () => {\n        panelManagerViewModel.currentPanel = 'stats';\n      },\n      title: 'STATS',\n      active: activePanel === 'stats',\n    },\n    {\n      iconName: 'fantasy',\n      onEnter: () => {\n        panelManagerViewModel.currentPanel = 'fantasy';\n      },\n      title: 'FANTASY',\n      active: activePanel === 'fantasy',\n    },\n  ];\n\n  return (\n    <div className=\"sdk--panel-manager\">\n      <PanelNavigation items={PANEL_ITEMS} />\n      <div className=\"sdk--panel-wrapper\">\n        <React.Suspense fallback={null}>\n          {PANELS_MAP[activePanel]}\n        </React.Suspense>\n      </div>\n    </div>\n  );\n};\n\nexport default PanelManager;\n"],"names":["ButtonStyle","BaseButton","props","style","LazyKeyPlaysIcon","React","LazyPlayIcon","LazyBetsIcon","LazyStatsIcon","LazyFantasyIcon","LazyWarningIcon","ICONS_MAP","Skeleton","Icon","BACK_KEY_CODE","useRemoteControl","onBack","onLeft","active","abort","e","deliverFocus","eventVm","SDK","pause","PanelNavButton","ref","focused","useFocusable","PanelNavigation","focusKey","FocusContext","item","index","panelManagerViewModel","PanelManagerViewModel","LazyKeyPlays","PANELS_MAP","PanelManager","activePanel","useSyncExternalStore","l","PANEL_ITEMS"],"mappings":"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"}

package/dist/index-q5GKgbOd.js

@@ -0,0 +1,56 @@
+import n, { useLayoutEffect as s } from "react";
+const o = "BentonSans-Medium", c = {
+  colors: {
+    // Accent colors
+    accentPrimary: "#FFFFFF",
+    // Secondary accent colors
+    accentSecondary: "#3C3F47",
+    // Tertiary accent colors
+    accentTertiary: "#0C0C0E",
+    // Surface Colors
+    surface1: "#080A0C",
+    surface2: "#12141A",
+    surface3: "#1B1E26",
+    surface4: "#242833",
+    surface5: "#363C4D",
+    surface6: "#3E4759",
+    // Highlight colors
+    highlightPrimary: "#FFFFFF",
+    highlightSecondary: "#9A9EA9",
+    highlightTertiary: "#0A0C0F",
+    // Alert colors
+    alertConfirmation: "#43D48F",
+    alertWarning: "#F58B00",
+    alertError: "#FF0000",
+    // Text colors
+    text100: "#F8F9FA",
+    text200: "#C2C5CB",
+    text300: "#8D919D",
+    text400: "#5C606B",
+    text500: "#0C0C0E"
+  },
+  typography: {
+    body: o,
+    headline: o
+  }
+}, t = c.colors, r = c.typography, F = (a) => (s(() => (Object.keys(t).forEach((e) => {
+  document.documentElement.style.setProperty(
+    `--sdk-${e}`,
+    t[e]
+  );
+}), Object.keys(r).forEach((e) => {
+  document.documentElement.style.setProperty(
+    `--sdk-font-${e}`,
+    r[e]
+  );
+}), () => {
+  Object.keys(t).forEach((e) => {
+    document.documentElement.style.removeProperty(`--sdk-${e}`);
+  }), Object.keys(r).forEach((e) => {
+    document.documentElement.style.removeProperty(`--sdk-font-${e}`);
+  });
+}), []), /* @__PURE__ */ n.createElement("div", { className: "sdk-wrapper" }, a.children));
+export {
+  F as default
+};
+//# sourceMappingURL=index-q5GKgbOd.js.map

package/dist/index-q5GKgbOd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-q5GKgbOd.js","sources":["../src/services/ThemeManager/constants.ts","../src/components/core/App/App.tsx"],"sourcesContent":["import ITheme, {\n  BORDER_RADIUS,\n  TEXT_CAPITALIZATION,\n  THEME_MODES,\n  THEME_TYPES,\n} from '@/models/ITheme';\n\nconst FONT_FAMILY = 'BentonSans-Medium';\n\nexport const DARK_THEME: ITheme = {\n  _id: '6274067af74b66a544018dac',\n  button: {\n    borderRadius: BORDER_RADIUS.rounded,\n    textCapitalization: TEXT_CAPITALIZATION.uppercase,\n  },\n  colors: {\n    // Accent colors\n    accentPrimary: '#FFFFFF',\n\n    // Secondary accent colors\n    accentSecondary: '#3C3F47',\n\n    // Tertiary accent colors\n    accentTertiary: '#0C0C0E',\n\n    // Surface Colors\n    surface1: '#080A0C',\n    surface2: '#12141A',\n    surface3: '#1B1E26',\n    surface4: '#242833',\n    surface5: '#363C4D',\n    surface6: '#3E4759',\n\n    // Highlight colors\n    highlightPrimary: '#FFFFFF',\n    highlightSecondary: '#9A9EA9',\n    highlightTertiary: '#0A0C0F',\n\n    // Alert colors\n    alertConfirmation: '#43D48F',\n    alertWarning: '#F58B00',\n    alertError: '#FF0000',\n\n    // Text colors\n    text100: '#F8F9FA',\n    text200: '#C2C5CB',\n    text300: '#8D919D',\n    text400: '#5C606B',\n    text500: '#0C0C0E',\n  },\n  creator: '016901e60000000000000000',\n  name: 'Dark Mode',\n  type: THEME_TYPES.CLASSIC,\n  mode: THEME_MODES.DARK,\n  owner: '016901e60000000000000000',\n  typography: {\n    body: FONT_FAMILY,\n    headline: FONT_FAMILY,\n  },\n};\n","import React, { PropsWithChildren, useLayoutEffect } from 'react';\nimport { DARK_THEME } from '@/services/ThemeManager/constants';\nimport './App.styles.css';\n\nconst colors = DARK_THEME.colors;\nconst typography = DARK_THEME.typography;\n\nconst App = (props: PropsWithChildren) => {\n  useLayoutEffect(() => {\n    Object.keys(colors).forEach((key) => {\n      document.documentElement.style.setProperty(\n        `--sdk-${key}`,\n        colors[key as keyof typeof DARK_THEME.colors]\n      );\n    });\n\n    Object.keys(typography).forEach((key) => {\n      document.documentElement.style.setProperty(\n        `--sdk-font-${key}`,\n        typography[key as keyof typeof DARK_THEME.typography]\n      );\n    });\n\n    return () => {\n      Object.keys(colors).forEach((key) => {\n        document.documentElement.style.removeProperty(`--sdk-${key}`);\n      });\n\n      Object.keys(typography).forEach((key) => {\n        document.documentElement.style.removeProperty(`--sdk-font-${key}`);\n      });\n    };\n  }, []);\n\n  return <div className=\"sdk-wrapper\">{props.children}</div>;\n};\n\nexport default App;\n"],"names":["FONT_FAMILY","DARK_THEME","colors","typography","App","props","useLayoutEffect","key","React"],"mappings":";AAOA,MAAMA,IAAc,qBAEPC,IAAqB;AAAA,EAMhC,QAAQ;AAAA;AAAA,IAEN,eAAe;AAAA;AAAA,IAGf,iBAAiB;AAAA;AAAA,IAGjB,gBAAgB;AAAA;AAAA,IAGhB,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA;AAAA,IAGV,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB,mBAAmB;AAAA;AAAA,IAGnB,mBAAmB;AAAA,IACnB,cAAc;AAAA,IACd,YAAY;AAAA;AAAA,IAGZ,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EAMA,YAAY;AAAA,IACV,MAAMD;AAAA,IACN,UAAUA;AAAA,EAAA;AAEd,GCvDME,IAASD,EAAW,QACpBE,IAAaF,EAAW,YAExBG,IAAM,CAACC,OACXC,EAAgB,OACd,OAAO,KAAKJ,CAAM,EAAE,QAAQ,CAACK,MAAQ;AACnC,WAAS,gBAAgB,MAAM;AAAA,IAC7B,SAASA,CAAG;AAAA,IACZL,EAAOK,CAAqC;AAAA,EAC9C;AAAA,CACD,GAED,OAAO,KAAKJ,CAAU,EAAE,QAAQ,CAACI,MAAQ;AACvC,WAAS,gBAAgB,MAAM;AAAA,IAC7B,cAAcA,CAAG;AAAA,IACjBJ,EAAWI,CAAyC;AAAA,EACtD;AAAA,CACD,GAEM,MAAM;AACX,SAAO,KAAKL,CAAM,EAAE,QAAQ,CAACK,MAAQ;AACnC,aAAS,gBAAgB,MAAM,eAAe,SAASA,CAAG,EAAE;AAAA,EAAA,CAC7D,GAED,OAAO,KAAKJ,CAAU,EAAE,QAAQ,CAACI,MAAQ;AACvC,aAAS,gBAAgB,MAAM,eAAe,cAAcA,CAAG,EAAE;AAAA,EAAA,CAClE;AACH,IACC,EAAE,GAEG,gBAAAC,EAAA,cAAA,OAAA,EAAI,WAAU,cAAA,GAAeH,EAAM,QAAS;"}

package/dist/index.d.ts

@@ -0,0 +1,382 @@
+declare type AthleteId = string;
+
+export declare type Environment = 'development' | 'staging' | 'production';
+
+declare interface IKeyPlay {
+    id: string;
+    description: string;
+    homeTeamName: string;
+    awayTeamName: string;
+    homeTeamScore?: number;
+    awayTeamScore?: number;
+    clipID: string;
+    teamImageUrl?: string;
+    playerImageUrl?: string;
+    thumbnailImageUrl?: string;
+    section?: string;
+}
+
+/**
+ * This is the public API that the app can use to make calls to the SDK related to the currently-loaded event.
+ */
+export declare interface IMaestroEvent {
+    /**
+     * @description Tells the SDK that the user just started playing a new key play clip at the given index.
+     */
+    didStartPlayingClip(index: number): void;
+    /**
+     * @description Tells the SDK that the user just stopped playing a key play clip at the given index.
+     */
+    didStopPlayingClip(index: number): void;
+    /**
+     * @description Tells the SDK that the user tried to play the clip but it failed to play back.
+     */
+    didFailToPlayClip(index: number): void;
+    /**
+     * @description Updates the SDK with the latest progress in the playback of the currently-played key play clip, from 0 to 1.
+     */
+    didUpdatePlaybackProgressOfClip(index: number, to: number): void;
+    /**
+     * @description Tells the SDK that the app displayed the MaestroPanel.
+     */
+    didShowPanel(): Promise<void>;
+    /**
+     * @description Tells the SDK that the app hid the MaestroPanel.
+     */
+    didHidePanel(): Promise<void>;
+    /**
+     * @description Alerts the SDK that the current event does not support key plays.
+     */
+    currentEventDoesNotSupportKeyPlays(): void;
+    /**
+     * @description Retrieves the event ID for the currently loaded event.
+     */
+    getCurrentEventID(): string | null;
+    /**
+     * @description Retrieves the array index of the key play clip that is currently being played.
+     */
+    getCurrentlyPlayingClipIndex(): number | null;
+    /**
+     * @description Retrieves the array index of the key plays clip that was most recently played.
+     */
+    getLastPlayedClipIndex(): number | null;
+    /**
+     * @description Retrieves the progress (between 0 and 1) of the currently-played key play clip.
+     */
+    getCurrentClipPlaybackProgress(): number | null;
+    /**
+     * @description Retrieves the number of key plays.
+     */
+    getKeyPlaysCount(): number | null;
+    /**
+     * @description Tells the SDK to start managing focus.
+     */
+    startFocusManagement(): Promise<void>;
+    /**
+     * @description Feeds the SDK new key plays data. A null value indicates a failure to retrieve the data.
+     */
+    updateKeyPlaysData(data: IMaestroKeyPlaysResponse | null): Promise<void>;
+}
+
+/**
+ * @description Interface for the client app to implement in order to handle Maestro TV SDK events.
+ */
+export declare interface IMaestroEventDelegate {
+    /**
+     * @description Allows the SDK to tell the client app that the user has encountered an error screen for lack of valid key
+     plays data, indicating the client app should call `updateKeyPlaysData` as soon as possible.
+     */
+    userRequestedNewKeyPlaysData(): Promise<void>;
+    /**
+     * Allows the SDK to request the client app play a particular key plays clip, given its array index in the key plays list.  Note that the `MaestroKeyPlaysResponse` subdivides the key plays by section, so the `index` referenced here assumes the client app has access to a flattened list of the key plays, disregarding the sectional subdivisions.
+     */
+    playClip(atIndex: number): void;
+    /**
+     * @description SDK can notify the client app when its time to handle the focus management
+     */
+    startFocusManagement(): Promise<void>;
+}
+
+export declare interface IMaestroKeyPlaysResponse {
+    entities: {
+        team: Record<TeamId, IMaestroKeyPlaysTeam>;
+        athlete: Record<AthleteId, MaestroKeyPlaysAthlete>;
+    };
+    sections: MaestroKeyPlaysSection[];
+}
+
+declare interface IMaestroKeyPlaysTeam {
+    id: string;
+    displayName: string;
+    shortName: string;
+    color: string;
+    alternateColor: string;
+    homeAway: string;
+    displayOrder: string;
+    logoRef: string;
+    logoDarkRef: string;
+}
+
+/**
+ This is the MaestroKit top-level API for initializing and configuring the framework.  It encompasses all functionality that is not specific to an event.
+ */
+declare interface IMaestroManager {
+    /**
+     * @description Configure the MaestroWebSDK.
+     * @param {SDKConfigParams} configParams - Configuration parameters
+     * @param {SDKConfigParams['environment']} configParams.environment - The type of environment to use. Defaults to 'development'.
+     * @param {SDKConfigParams['pollFrequency']} configParams.pollFrequency - The frequency in seconds to poll for updates. Defaults to 5.0.
+     * @param {SDKConfigParams['progressUpdateFrequency']} configParams.progressUpdateFrequency - The frequency in seconds to update progress. Defaults to 0.1.
+     * @param {SDKConfigParams['siteID']} configParams.siteID - The site ID to use for the SDK.
+     * @param {SDKConfigParams['jwt']} configParams.jwt - The JWT token to use for authentication.
+     * @param {SDKConfigParams['userID']} configParams.userID - The user ID of the logged account.
+     */
+    configure(configParams: SDKConfigParams): void;
+    /**
+     Tells the SDK the user has opened an event in the app's player.
+     Arguments:
+     - eventID: The Event ID for the event opened in the player.
+     - delegate: an instance of the app's implementation of IMaestroEventDelegate
+     The function returns an instance of MaestroEventViewModel, which includes an implementation of IMaestroEvent.  IMaestroEvent represents the app-facing portion of the MaestroKit API related to the currently-loaded event.  So after `userDidStartWatchingEvent` is called, the SDK has access to the API detailed in `MaestroEventDelegate` for making calls to the app, and the app has access to the API detailed in `IMaestroEvent` for making calls to the SDK.
+     */
+    userDidStartWatchingEvent(eventID: string, delegate: IMaestroEventDelegate): Promise<IMaestroEvent>;
+    /**
+     * @description Tells the SDK the user has closed an event that was open in the app's player.
+     * @param eventID
+     */
+    userDidStopWatchingEvent(eventID: string): void;
+    /**
+     * @description Authenticates user.
+     * @param id - The user's ID.
+     * @param jwt - The user's jwt.
+     */
+    authenticateUser(id: string, jwt: string): Promise<void>;
+    /**
+     * Logs out currently-authenticated user.
+     */
+    deauthenticateUser(): Promise<void>;
+    /**
+     * Gets the site ID for the SDK
+     * @returns The site ID
+     */
+    getSiteID(): string | undefined;
+    /**
+     * Gets the JWT token for authentication
+     * @returns The JWT token
+     */
+    getJwt(): string | undefined;
+    /**
+     * Gets the user ID for the SDK
+     * @returns The user ID
+     */
+    getUserID(): string | undefined;
+}
+
+declare const KEY_PLAYS_ERROR_STATE: {
+    readonly unsupportedEvent: "unsupportedEvent";
+    readonly unpopulatedEvent: "unpopulatedEvent";
+    readonly tabLoadFailure: "tabLoadFailure";
+};
+
+declare const KEY_PLAYS_LOAD_FAILURE_STATUS: {
+    readonly noFailure: "noFailure";
+    readonly recentFailure: "recentFailure";
+    readonly nonRecentFailure: "nonRecentFailure";
+};
+
+declare type KeyPlayItem = {
+    title: string;
+    items: IKeyPlay[];
+};
+
+declare type KeyPlayLoadFailureStatus = (typeof KEY_PLAYS_LOAD_FAILURE_STATUS)[keyof typeof KEY_PLAYS_LOAD_FAILURE_STATUS];
+
+declare type KeyPlaysErrorState = (typeof KEY_PLAYS_ERROR_STATE)[keyof typeof KEY_PLAYS_ERROR_STATE];
+
+declare class KeyPlaysViewModel {
+    currentlyPlayingClipIndex: Observable<number | null>;
+    lastPlayedClipIndex: Observable<number | null>;
+    currentClipPlaybackProgress: Observable<number | null>;
+    errorState: Observable<KeyPlaysErrorState | null>;
+    failedClips: Observable<{
+        [key: string]: KeyPlayLoadFailureStatus;
+    }>;
+    items: Observable<KeyPlayItem[]>;
+    isCurrentlyPlaying(index: number): boolean;
+    setKeyPlays(items: IMaestroKeyPlaysResponse | null): Promise<void>;
+    private cleanErrors;
+    playKeyPlay(atIndex: number): Promise<void>;
+    parseNetworkResponse(response: IMaestroKeyPlaysResponse): KeyPlayItem[];
+    get allItems(): IKeyPlay[];
+    clipID(forKeyPlayAtIndex: number): string | undefined;
+    handleKeyPlayLoadFailure(forKeyPlayAtIndex: number): void;
+    loadFailureStatus(forKeyPlayAtIndex: number): KeyPlayLoadFailureStatus;
+    clearLoadFailureStatus(forKeyPlayAtIndex: number): void;
+    userRequestedNewKeyPlaysData(): Promise<void>;
+}
+
+declare class MaestroEventViewModel extends ViewModel implements IMaestroEvent {
+    private _eventId;
+    private _title;
+    private _isLive;
+    delegate: IMaestroEventDelegate;
+    keyPlaysViewModel: KeyPlaysViewModel;
+    constructor(eventId: string | undefined, delegate: IMaestroEventDelegate);
+    deinit(): void;
+    updateKeyPlaysData(data: IMaestroKeyPlaysResponse | null): Promise<void>;
+    startFocusManagement(): Promise<void>;
+    didStartPlayingClip(index: number): void;
+    didStopPlayingClip(index: number): void;
+    didFailToPlayClip(index: number): void;
+    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;
+    getLastPlayedClipIndex(): number | null;
+    getCurrentClipPlaybackProgress(): number | null;
+    getKeyPlaysCount(): number;
+    get eventId(): Observable<string>;
+    get title(): Observable<string>;
+    get isLive(): Observable<boolean>;
+}
+
+declare interface MaestroKeyPlay {
+    description: string;
+    team: string;
+    wallClock: string;
+    displayClock: string;
+    shortPeriod: string;
+    scoringPlay: boolean;
+    athlete: string;
+    thumbnail: string;
+    thumbnailType: string;
+    clipID: string;
+    awayScore?: string;
+    homeScore?: string;
+}
+
+declare interface MaestroKeyPlaysAthlete {
+    id: string;
+    shortName: string;
+    headshot: string;
+}
+
+declare interface MaestroKeyPlaysSection {
+    title: string;
+    items: MaestroKeyPlay[];
+}
+
+/**
+ * Main SDK class that serves as the entry point for the Maestro TV SDK
+ * Follows a singleton pattern similar to the Swift implementation
+ */
+declare class MaestroWebSDK implements IMaestroManager {
+    private static instance;
+    private renderer;
+    private siteID?;
+    private jwt?;
+    private userID?;
+    private maestroEventViewModel;
+    private constructor();
+    userDidStartWatchingEvent(eventID: string, delegate: IMaestroEventDelegate): Promise<IMaestroEvent>;
+    userDidStopWatchingEvent(_: string): void;
+    authenticateUser(_: string, __: string): Promise<void>;
+    deauthenticateUser(): Promise<void>;
+    /**
+     * @description Returns the MaestroWebSDK instance
+     * @returns {MaestroWebSDK} - The MaestroWebSDK instance
+     */
+    static getInstance(): MaestroWebSDK;
+    configure(configParams: SDKConfigParams): void;
+    /**
+     * Checks if this is an authorized client based on siteID
+     */
+    get isAuthorizedClient(): boolean;
+    /**
+     * Sets the site ID for the SDK
+     * @param siteID The site ID to set
+     */
+    setSiteID(siteID?: string): void;
+    getSiteID(): string | undefined;
+    /**
+     * Sets the JWT token for authentication
+     * @param jwt The JWT token to set
+     */
+    setJwt(jwt: string): void;
+    getJwt(): string | undefined;
+    /**
+     * Sets the user ID for the SDK
+     * @param userID The user ID to set
+     */
+    setUserID(userID: string): void;
+    getUserID(): string | undefined;
+    /**
+     * Gets the event view model
+     * @returns The current event view model
+     */
+    getMaestroEventViewModel(): MaestroEventViewModel;
+    renderPanel(id: string): Promise<() => void>;
+}
+
+/**
+ * Basic observable implementation for view models
+ */
+declare class Observable<T> {
+    private listeners;
+    private _value;
+    constructor(initialValue: T);
+    get value(): T;
+    set value(newValue: T);
+    subscribe(listener: (value: T) => void): () => void;
+    private notify;
+}
+
+declare const SDK: MaestroWebSDK;
+export default SDK;
+
+declare type SDKConfigParams = {
+    /**
+     * The type of environment to use. Defaults to `development`. The available options are `development`, `staging`, and `production`.
+     */
+    environment?: 'development' | 'staging' | 'production';
+    /**
+     * The frequency in seconds to poll for updates. Defaults to 5.0.
+     */
+    pollFrequency?: number;
+    /**
+     * The frequency in seconds to update progress. Defaults to 0.1.
+     */
+    progressUpdateFrequency?: number;
+    /**
+     * The site ID to use for the SDK.
+     */
+    siteID?: string;
+    /**
+     * The JWT token to use for authentication.
+     */
+    jwt?: string;
+    /**
+     * The user ID of the logged account.
+     */
+    userID?: string;
+};
+
+declare type TeamId = string;
+
+/**
+ * Base view model that implements reactive properties
+ */
+declare abstract class ViewModel {
+    private _isLoading;
+    private _error;
+    get isLoading(): Observable<boolean>;
+    get error(): Observable<string | null>;
+    protected setLoading(loading: boolean): void;
+    protected setError(error: string | null): void;
+}
+
+export { }

package/dist/maestro-web-sdk.esm.js

@@ -0,0 +1,6 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.sdk-wrapper{font-family:Arial,Helvetica,sans-serif;color:var(--sdk-text100)}.T01{font-size:1.125rem;font-weight:400;line-height:1.5rem}.T02{font-size:1.125rem;font-weight:700;line-height:1.5rem}.T05_ALT{font-size:1.313rem;font-weight:700;line-height:1.75rem}.T10{font-size:1.438rem;font-weight:700;line-height:2rem}.T20{font-size:1.688rem;font-weight:500;line-height:2.25rem}.T30{font-size:1.813rem;font-weight:700;line-height:2.25rem}.T70{font-size:3rem;font-weight:900;line-height:3.5rem}.sdk--panel-manager{padding:3.75rem 3.75rem 3.75rem 3rem;padding-bottom:0;display:flex;flex-direction:column;gap:3.75rem}.sdk--panel-manager .panel-coming-soon{display:flex;justify-content:center}.panel-nav-button-container{display:flex;flex-direction:column;align-items:center;gap:.625rem;color:var(--sdk-text300);flex:1}.panel-nav-button-container path{fill:var(--sdk-highlightSecondary)}.panel-nav-button-container button{padding:8px 0;background-color:var(--sdk-surface3);min-width:6.5rem;transition:background-color .2s ease-in-out,color .3s ease-in-out}.panel-nav-button-container[data-focused=true],.panel-nav-button-container:hover,.panel-nav-button-active{color:var(--sdk-text100)}.panel-nav-button-container[data-focused=true] path,.panel-nav-button-container:hover path{fill:var(--sdk-highlightTertiary)}.panel-nav-button-container[data-focused=true] button,.panel-nav-button-container:hover button{background-color:var(--sdk-accentPrimary)}.panel-nav-button-active button{background-color:var(--sdk-surface5)}.panel-nav-button-active path{fill:var(--sdk-highlightPrimary)}.panel-navigation{display:flex;flex-direction:row;align-items:center;gap:.75rem;overflow-x:auto;scrollbar-width:none}.key-play-card{display:flex;flex-direction:column;border-radius:.625rem;background-color:var(--sdk-surface2);contain:content;border:.188rem solid transparent;transition:border-color .2s ease-in-out;position:relative}.key-play-card progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;background-color:var(--sdk-surface6);box-shadow:0 1px 3px #10111366 inset;overflow:hidden;border-radius:0;position:absolute;bottom:0}.key-play-card .error-state{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--sdk-surface2);gap:1rem}.key-play-card .error-state path{fill:var(--sdk-alertWarning)}.key-play-card .non-recent-error-state{position:absolute;top:1.125rem;right:1.125rem}.scrollable-gradient{position:relative}.scrollable-gradient:before{content:"";position:absolute;left:0;right:0;top:0;height:3.625rem;z-index:0;transition:z-index .3s ease}.scroll-container-scrolled:before{z-index:1;background:linear-gradient(0deg,#080a0c00 0%,var(--sdk-surface1) 100%)}.scrollable-gradient:after{content:"";position:absolute;left:0;right:0;bottom:0;height:6rem;background:linear-gradient(180deg,#080a0c00 0%,var(--sdk-surface1) 100%)}.key-plays-view{display:flex;flex-direction:column;gap:1rem;overflow-y:auto;max-height:calc(100vh - 86px - 7.5rem);scrollbar-width:none;scroll-behavior:smooth;overscroll-behavior:contain}.key-plays-view .key-plays-section:last-child{margin-bottom:4rem}.key-plays-view::-webkit-scrollbar{display:none}.key-plays-section{display:flex;flex-direction:column;gap:1rem;position:relative}.key-plays-section-title{position:sticky;top:0;z-index:1;margin:0}.key-plays-section-items{display:flex;flex-direction:column;gap:20px}.key-plays-section:last-of-type{margin-bottom:0}.key-plays-bottom-padding{height:calc(100vh - 240px);min-height:400px;width:100%}.key-play-card{display:flex;flex-direction:column;border-radius:.625rem;background-color:var(--sdk-surface2);contain:content;border:3px solid transparent;transition:border-color .2s ease-in-out}.key-play-card[data-focused=true]{border-color:var(--sdk-highlightPrimary)}.key-play-card-content{display:grid;grid-template-columns:1fr 2fr}.key-play-card-content .cardImage{width:100%;height:100%;object-fit:cover}.key-play-card-content .text-content{padding:2.75rem 2.25rem 2.75rem 1.5rem;align-items:center;display:flex}.key-play-card-content .multi-line{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;text-overflow:ellipsis}.key-play-card progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;background-color:var(--sdk-surface6);box-shadow:0 1px 3px #10111366 inset;overflow:hidden;border-radius:0}.key-play-card progress::-webkit-progress-bar,.key-play-card progress::-moz-progress-bar{background-color:var(--sdk-surface6)}.key-play-card progress::-webkit-progress-value{background-color:var(--sdk-highlightPrimary)}.key-play-card .score{display:flex;align-items:center;justify-content:center;padding:10px;gap:4rem;background-color:var(--sdk-surface4)}.key-play-card .score-team{display:flex;align-items:center;gap:1rem}.action-button{padding:23px 0;background-color:var(--sdk-accentSecondary);color:var(--sdk-text100)}.action-button:hover,.action-button[data-focused=true]{background-color:var(--sdk-accentPrimary);color:var(--sdk-text500)}.sdk--key-play-error-state-unsupportedEvent{padding:2.25rem 1.5rem 0;display:flex;flex-direction:column;gap:1rem}.sdk--key-play-error-state-unsupportedEvent:after{background:linear-gradient(180deg,#0000,#ffffff14)}.sdk--key-play-error-state-unsupportedEvent h3{margin:0}.sdk--key-play-error-state-unsupportedEvent p{margin:0;color:var(--sdk-text200)}.sdk--key-play-error-state-unpopulatedEvent{overflow-y:hidden;max-height:calc(100vh - 86px - 7.5rem);padding:2.25rem 1.5rem 0;scrollbar-width:none;display:flex;flex-direction:column;gap:6.25rem}.sdk--key-play-error-state-unpopulatedEvent h3{margin:0}.sdk--key-play-error-state-unpopulatedEvent p{margin:0;color:var(--sdk-text200)}.sdk--key-play-error-state-unpopulatedEvent .main-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.sdk--key-play-error-state-unpopulatedEvent .unpopulatedEvent-examples{display:flex;flex-direction:column;gap:1rem;position:relative}.sdk--key-play-error-state-unpopulatedEvent .unpopulatedEvent-examples:after{content:"";width:100%;height:100%;position:absolute;bottom:0;background:linear-gradient(0deg,#000,#0000 92.2%)}.sdk--key-play-error-state-unpopulatedEvent .unpopulatedEvent-examples .example{display:flex;gap:1rem;padding:1.75rem 1.5rem;border-radius:.625rem;background-color:var(--sdk-surface3);height:8rem}.sdk--key-play-error-state-tabLoadFailure{display:flex;flex-direction:column;gap:1rem;border-radius:.625rem;border:.188rem solid transparent;transition:border-color .2s ease-in-out;padding:1.5rem;background-color:var(--sdk-surface4)}.sdk--key-play-error-state-tabLoadFailure h3{margin:0}.sdk--key-play-error-state-tabLoadFailure p{margin:0;height:5.375rem}')),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
+import { S as f } from "./index-BaSckwps.js";
+export {
+  f as default
+};
+//# sourceMappingURL=maestro-web-sdk.esm.js.map

package/dist/maestro-web-sdk.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"maestro-web-sdk.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}