@cuemath/leap 3.1.39 → 3.1.41-as2

package/dist/features/cue-canvas/cue-canvas-core.js

@@ -4,8 +4,8 @@ var s = (c, t, e) => g(c, typeof t != "symbol" ? t + "" : t, e);
 import { captureMessage as f } from "@sentry/browser";
 import y from "../../node_modules/lodash.debounce/index.js";
 import { CANVAS_COLORS as d } from "./constants/constants.js";
-import { getColorsForUser as C, removeTileButton as m, removeMask as T, checkTextOrEquationTool as w, getReverseMap as I, STATELESS_TOOLS as b, getToolAndSubtool as A } from "./cue-canvas-helpers.js";
-class U {
+import { getColorsForUser as C, removeTileButton as m, removeMusicTiles as T, removeMask as w, checkTextOrEquationTool as I, getReverseMap as b, STATELESS_TOOLS as A, getToolAndSubtool as E } from "./cue-canvas-helpers.js";
+class H {
   constructor({
     onPublish: t,
     onSubscribe: e,
@@ -48,7 +48,7 @@ class U {
     });
     s(this, "onChange", (t) => {
       const a = Object.fromEntries(t.entries());
-      w(a) && (this.onUpdateActiveTool("move"), this.setTool("move")), this.publishToChannel(a);
+      I(a) && (this.onUpdateActiveTool("move"), this.setTool("move")), this.publishToChannel(a);
     });
     s(this, "undo", () => {
       if (!this.polycanvas)
@@ -56,7 +56,7 @@ class U {
       const t = this.polycanvas.undo();
       if (!t)
         return;
-      const e = I(t);
+      const e = b(t);
       this.onChange(e);
     });
     s(this, "redo", () => {
@@ -182,7 +182,7 @@ class U {
     });
     s(this, "setTool", (t) => {
       if (!this.polycanvas || t === this.activeTool) return;
-      const [e, a] = A(t);
+      const [e, a] = E(t);
       switch (e) {
         case "clearAll":
           this.clearCanvas();
@@ -219,7 +219,7 @@ class U {
         default:
           this.polycanvas.setTool(e, a);
       }
-      b.has(t) || (this.activeTool = t);
+      A.has(t) || (this.activeTool = t);
     });
     /**
      * The `update` method is called in two cases:
@@ -269,10 +269,10 @@ class U {
       },
       ...a,
       imageUpload: this.renderAs === "whiteboard" && this.userType === "TEACHER" && this.uploadImageToS3 ? this.uploadImageToS3 : void 0
-    }), this.renderAs === "whiteboard" && this.userType === "TEACHER" && (this.polycanvas.toggleSidebar(!1), this.polycanvas.bindKeyboardEvents({}), m(t), this.polycanvas.on("viewport", this.debouncedViewportChange)), T(t), this.polycanvas.on("change", this.onChange), i && this.update(i);
+    }), this.renderAs === "whiteboard" && this.userType === "TEACHER" && (this.polycanvas.toggleSidebar(!1), this.polycanvas.bindKeyboardEvents({}), m(t), T(t), this.polycanvas.on("viewport", this.debouncedViewportChange)), w(t), this.polycanvas.on("change", this.onChange), i && this.update(i);
   }
 }
 export {
-  U as CueCanvasCore
+  H as CueCanvasCore
 };
 //# sourceMappingURL=cue-canvas-core.js.map

package/dist/features/cue-canvas/cue-canvas-core.js.map

@@ -1 +1 @@
-{"version":3,"file":"cue-canvas-core.js","sources":["../../../src/features/cue-canvas/cue-canvas-core.ts"],"sourcesContent":["import type { TUserTypes } from '../ui/types';\nimport type {\n  IActionData,\n  IViewport,\n  TCueCanvasChangeData,\n  TCueCanvasGridName,\n  TCueCanvasTool,\n  TPublish,\n  TRenderAs,\n  TCueCanvasChangeDataObject,\n  IReplaceCanvas,\n  ICueCanvasCoreProps,\n  TUpdateCanvasConfig,\n  TCueCanvasColors,\n} from './types/cue-canvas';\nimport type { ICreateOptions } from './types/cue-canvas';\nimport type { IPolypad, IPolyPadInstance } from './types/polypad';\n\nimport { captureMessage } from '@sentry/browser';\nimport debounce from 'lodash.debounce';\n\nimport { CANVAS_COLORS } from './constants/constants';\nimport {\n  checkTextOrEquationTool,\n  getColorsForUser,\n  getReverseMap,\n  getToolAndSubtool,\n  removeMask,\n  removeTileButton,\n  STATELESS_TOOLS,\n} from './cue-canvas-helpers';\n\ndeclare global {\n  interface Window {\n    Polypad: IPolypad;\n  }\n}\n\n/**\n * The CueCanvasCore class manages the canvas state and tool synchronization.\n * When text or equations are added, Polypad automatically switches to 'move' tool.\n * onUpdateActiveTool ensures the UI reflects this automatic tool change.\n */\n\nexport class CueCanvasCore {\n  private polycanvas: IPolyPadInstance | undefined;\n  private publish?: TPublish;\n  private height: number;\n  private onUpdateActiveTool: (tool: TCueCanvasTool) => void;\n  private onUpdateHeight?: (height: number) => void;\n  private userId: string;\n  private canvasId: string;\n  private userType: TUserTypes;\n  private renderAs: TRenderAs;\n  private fileInput: HTMLInputElement | null = null;\n  private debouncedViewportChange: ReturnType<typeof debounce>;\n  private uploadImageToS3?: (file: File) => Promise<string>;\n  private updateCanvasConfigChange?: TUpdateCanvasConfig;\n  private gridName?: TCueCanvasGridName;\n  private activeColor: TCueCanvasColors;\n  private activeTool: TCueCanvasTool | undefined;\n\n  constructor({\n    onPublish,\n    onSubscribe,\n    onUpdateActiveTool,\n    onUpdateHeight,\n    uploadImageToS3,\n    height,\n    userId,\n    canvasId,\n    userType,\n    renderAs,\n    updateCanvasConfig,\n  }: ICueCanvasCoreProps) {\n    this.onUpdateHeight = onUpdateHeight;\n    this.onUpdateActiveTool = onUpdateActiveTool;\n    this.height = height;\n    this.uploadImageToS3 = uploadImageToS3;\n    this.userId = userId;\n    this.canvasId = canvasId;\n    this.publish = onPublish;\n    this.userType = userType;\n    this.renderAs = renderAs;\n    this.debouncedViewportChange = debounce(this.onViewPortChange, 300);\n    this.updateCanvasConfigChange = updateCanvasConfig;\n    this.activeColor = getColorsForUser(userType, renderAs)[0] as TCueCanvasColors;\n    this.activeTool = undefined; // Default to first color in the palette\n    onSubscribe?.(this.canvasId, this.update);\n  }\n\n  async create({ canvasElementRef, canvasConfig, canvasSetting, initialData }: ICreateOptions) {\n    if (!canvasElementRef.current) {\n      throw new Error('PolyCanvas: Div Element Not found for canvas');\n    }\n    this.polycanvas = await window.Polypad.create(canvasElementRef.current, {\n      initial: {\n        options: canvasConfig,\n      },\n      ...canvasSetting,\n      imageUpload:\n        this.renderAs === 'whiteboard' && this.userType === 'TEACHER' && this.uploadImageToS3\n          ? this.uploadImageToS3\n          : undefined,\n    });\n\n    if (this.renderAs === 'whiteboard' && this.userType === 'TEACHER') {\n      this.polycanvas.toggleSidebar(false);\n      this.polycanvas.bindKeyboardEvents({});\n\n      removeTileButton(canvasElementRef);\n      this.polycanvas.on('viewport', this.debouncedViewportChange);\n    }\n\n    removeMask(canvasElementRef);\n    this.polycanvas.on('change', this.onChange);\n    if (initialData) {\n      this.update(initialData);\n    }\n  }\n\n  private publishToChannel = (payload: TCueCanvasChangeDataObject) => {\n    if (!this.publish) return;\n\n    this.publish({\n      eventName: 'cue_canvas_changed',\n      eventPayload: {\n        data: payload,\n        height: this.height,\n        userId: this.userId,\n        responseId: this.canvasId,\n      },\n    });\n  };\n\n  private onChange = (e: unknown) => {\n    const data = e as TCueCanvasChangeData;\n    const payload = Object.fromEntries(data.entries());\n\n    if (checkTextOrEquationTool(payload)) {\n      this.onUpdateActiveTool('move');\n      this.setTool('move');\n    }\n\n    this.publishToChannel(payload);\n  };\n\n  private undo = () => {\n    if (!this.polycanvas) {\n      return;\n    }\n\n    const data = this.polycanvas.undo() as TCueCanvasChangeData;\n\n    if (!data) {\n      return;\n    }\n\n    const undoData = getReverseMap(data);\n\n    this.onChange(undoData);\n  };\n\n  private redo = () => {\n    if (!this.polycanvas) {\n      return;\n    }\n\n    const data = this.polycanvas.redo() as TCueCanvasChangeData;\n\n    if (!data) {\n      return;\n    }\n\n    this.onChange(data);\n  };\n\n  clearCanvas = () => {\n    if (this.polycanvas) {\n      this.polycanvas.clear();\n    }\n  };\n\n  private zoomIn = () => {\n    if (!this.polycanvas) return;\n\n    const viewPort = this.polycanvas.getViewport();\n\n    this.polycanvas.setViewport(viewPort.x, viewPort.y, viewPort.zoom * 1.1);\n  };\n\n  private zoomOut = () => {\n    if (!this.polycanvas) return;\n\n    const viewPort = this.polycanvas.getViewport();\n\n    this.polycanvas.setViewport(viewPort.x, viewPort.y, viewPort.zoom * 0.9);\n  };\n\n  getCanvasAsImage = async () => {\n    if (!this.polycanvas) return;\n\n    const image = await this.polycanvas.image(3000, 3000, 'png');\n\n    return image;\n  };\n\n  private downloadCanvasAsImage = async () => {\n    if (!this.polycanvas) return;\n\n    const image = await this.polycanvas.image(3000, 3000, 'png');\n\n    if (!image) return;\n\n    const downloadLink = document.createElement('a');\n\n    downloadLink.href = image;\n    downloadLink.download = `canvas-drawing-${Date.now()}.png`;\n    downloadLink.click();\n  };\n\n  private onViewPortChange = (e: IViewport): void => {\n    if (!this.updateCanvasConfigChange) return;\n\n    this.updateCanvasConfigChange({ dimesion: e });\n  };\n\n  private openFileUpload = (): void => {\n    if (!this.fileInput) {\n      this.fileInput = document.createElement('input');\n      this.fileInput.type = 'file';\n      this.fileInput.accept = 'image/*';\n      this.fileInput.style.display = 'none';\n      this.fileInput.onchange = this.onSelectImage;\n      document.body.appendChild(this.fileInput);\n    }\n\n    this.fileInput.click();\n  };\n\n  addImageToCanvas = (imageUrl: string): void => {\n    if (!this.polycanvas) return;\n\n    const viewPort = this.polycanvas.getViewport();\n    const imgJson = {\n      name: 'image',\n      href: imageUrl,\n      x: viewPort.x + 24,\n      y: viewPort.y + 24,\n      width: 500,\n    };\n\n    const key = this.polycanvas.add({\n      ...imgJson,\n    });\n\n    this.publishToChannel({\n      [key]: [undefined, { ...imgJson, status: 'locked' }],\n    });\n    this.onUpdateActiveTool('move');\n    this.setTool('move');\n  };\n\n  private onSelectImage = async (event: Event): Promise<void> => {\n    const target = event.target as HTMLInputElement;\n    const file = target.files?.[0];\n\n    if (!file || !this.polycanvas || !this.uploadImageToS3) return;\n\n    const imageUrl = await this.uploadImageToS3(file);\n\n    if (imageUrl === 'error') {\n      return;\n    }\n\n    this.addImageToCanvas(imageUrl);\n\n    target.value = '';\n  };\n\n  private updateCanvas = ({ data, userId }: IActionData) => {\n    const canEditStroke = this.userType === 'TEACHER' || userId === this.userId;\n\n    try {\n      Object.entries(data).forEach(([key, value]) => {\n        if (!value[0] && value[1]) {\n          if ('name' in value[1] && value[1].name === 'image') {\n            value[1].status = this.userType === 'STUDENT' ? 'locked' : undefined; // Lock only images for students\n          }\n          this.polycanvas?.add({ ...value[1], cannotEdit: !canEditStroke }, key);\n        } else if (value[0] && !value[1]) {\n          this.polycanvas?.delete(key);\n        } else if (value[0] && value[1]) {\n          this.polycanvas?.update(key, { ...value[1] });\n        }\n      });\n    } catch (error) {\n      captureMessage('Error Updating Canvas', data);\n    }\n  };\n\n  toggleTiles = (val: boolean) => {\n    this.polycanvas?.toggleSidebar(val);\n  };\n\n  setViewPort = ({ x, y, zoom }: IViewport) => {\n    if (this.polycanvas) {\n      const cv = this.polycanvas?.getViewport();\n\n      if (cv.x === x && cv.y === y && cv.zoom === zoom) {\n        return; // No change needed\n      }\n\n      this.polycanvas.setViewport(x, y, zoom);\n    }\n  };\n\n  resetViewPort = () => {\n    if (this.polycanvas) {\n      this.polycanvas.resetViewport();\n    }\n  };\n\n  changeGrid = (gridName: TCueCanvasGridName) => {\n    if (!this.polycanvas || this.gridName === gridName) return;\n\n    this.polycanvas.setOptions({\n      grid: gridName,\n    });\n    this.gridName = gridName;\n    if (this.updateCanvasConfigChange) {\n      this.updateCanvasConfigChange({ gridName: gridName });\n    }\n  };\n\n  lockSelectedTiles = () => {\n    const { tiles: allTiles } = this.polycanvas?.serialize() || {};\n    const selectedItems = this.polycanvas?.getSelection() || [];\n\n    if (selectedItems.length > 0 && allTiles) {\n      const lockedTiles: TCueCanvasChangeDataObject = {};\n\n      selectedItems.forEach(key => {\n        if (!allTiles[key]?.name) return;\n\n        const updatedJson = { ...allTiles[key], status: 'locked' as const };\n\n        this.polycanvas?.update(key, updatedJson);\n        if (allTiles[key]?.name) lockedTiles[key] = [allTiles[key], updatedJson];\n      });\n\n      this.publishToChannel(lockedTiles);\n    }\n  };\n\n  unlockAllTiles = () => {\n    if (!this.polycanvas) return;\n\n    const { tiles: allTiles } = this.polycanvas.serialize();\n    const unlockedTiles: TCueCanvasChangeDataObject = {};\n\n    if (allTiles && Object.entries(allTiles).length > 0) {\n      Object.entries(allTiles).forEach(([key, item]) => {\n        if (item.status !== 'locked') return;\n\n        const updatedJson = { ...item, status: undefined };\n\n        this.polycanvas?.update(key, updatedJson);\n        unlockedTiles[key] = [item, updatedJson];\n      });\n\n      this.publishToChannel(unlockedTiles);\n    }\n  };\n\n  replaceCanvas = (data: IReplaceCanvas) => {\n    if (!this.polycanvas) return;\n\n    const { data: canvasData, gridName } = data;\n\n    this.polycanvas.clear();\n    if (gridName) {\n      this.changeGrid(gridName);\n    }\n\n    Object.entries(canvasData).forEach(([key, value]) => {\n      if (!value[0] && value[1]) {\n        this.polycanvas?.add({ ...value[1] }, key);\n\n        return;\n      }\n    });\n\n    this.publishToChannel(canvasData);\n  };\n\n  setTool = (tool: TCueCanvasTool) => {\n    if (!this.polycanvas || tool === this.activeTool) return;\n\n    const [currTool, currSubTool] = getToolAndSubtool(tool);\n\n    switch (currTool) {\n      case 'clearAll':\n        this.clearCanvas();\n        break;\n      case 'home':\n        this.resetViewPort();\n        break;\n      case 'undo':\n        this.undo();\n        break;\n      case 'redo':\n        this.redo();\n        break;\n      case 'lock':\n        this.lockSelectedTiles();\n        break;\n      case 'unlock':\n        this.unlockAllTiles();\n        break;\n      case 'zoomIn':\n        this.zoomIn();\n        break;\n      case 'zoomOut':\n        this.zoomOut();\n        break;\n      case 'upload':\n        this.openFileUpload();\n        break;\n      case 'download':\n        this.downloadCanvasAsImage();\n        break;\n      case 'grid':\n        break;\n      default:\n        this.polycanvas.setTool(currTool, currSubTool);\n    }\n    if (!STATELESS_TOOLS.has(tool)) {\n      this.activeTool = tool;\n    }\n  };\n\n  /**\n   * The `update` method is called in two cases:\n   * 1. When receiving initial data to update the canvas content.\n   * 2. When receiving strokes from other peers to update the canvas content.\n   * Each item can contain multiple actions, which are applied to the canvas.\n   *\n   * The method checks if the payload is an array or a single object.\n   * If it's an array, it iterates over each item and updates the canvas accordingly.\n   * If it's a single object, it directly updates the canvas.\n   *\n   * Additionally, if the payload contains a height greater than the current height of the canvas, the `updateHeight` method is called to update the canvas height.\n   */\n  update = (payload: IActionData | IActionData[]) => {\n    if (Array.isArray(payload)) {\n      const heights = payload.map(data => data.height).filter(Boolean);\n      const maxHeight = Math.max(...heights);\n\n      if (maxHeight > this.height) {\n        this.updateHeight(maxHeight);\n      }\n      payload.forEach(item => this.updateCanvas(item));\n    } else {\n      if (payload.height > this.height) {\n        this.updateHeight(payload.height);\n      }\n      this.updateCanvas(payload);\n    }\n  };\n\n  getSelections = () => {\n    return this.polycanvas ? this.polycanvas.getSelection() : [];\n  };\n\n  setColor = (color: TCueCanvasColors) => {\n    if (!this.polycanvas || !this.activeColor) return;\n\n    const selectedColor = CANVAS_COLORS[color];\n\n    const selections = this.getSelections();\n\n    if (selections && selections.length > 0) {\n      selections.forEach((key: string) => {\n        this.polycanvas?.update(key, { color: selectedColor });\n        this.onChange(\n          new Map([[key, [{ color: CANVAS_COLORS[this.activeColor] }, { color: selectedColor }]]]),\n        );\n      });\n    }\n    this.polycanvas.setColor(selectedColor);\n    this.activeColor = color;\n  };\n\n  updateHeight = (height: number) => {\n    this.height = height;\n    this.onUpdateHeight?.(height);\n  };\n\n  destroy = () => {\n    if (this.polycanvas) {\n      this.polycanvas.off('change', this.onChange);\n      this.polycanvas.destroy();\n      this.debouncedViewportChange.cancel();\n\n      if (this.renderAs === 'whiteboard' && this.userType === 'TEACHER') {\n        this.polycanvas.off('viewport', this.debouncedViewportChange);\n      }\n      this.polycanvas = undefined;\n\n      if (this.fileInput && this.fileInput.parentNode) {\n        this.fileInput.parentNode.removeChild(this.fileInput);\n        this.fileInput = null;\n      }\n    }\n  };\n}\n"],"names":["CueCanvasCore","onPublish","onSubscribe","onUpdateActiveTool","onUpdateHeight","uploadImageToS3","height","userId","canvasId","userType","renderAs","updateCanvasConfig","__publicField","payload","e","checkTextOrEquationTool","data","undoData","getReverseMap","viewPort","image","downloadLink","imageUrl","imgJson","key","event","target","file","_a","canEditStroke","value","_b","_c","captureMessage","val","x","y","zoom","cv","gridName","allTiles","selectedItems","lockedTiles","updatedJson","unlockedTiles","item","canvasData","tool","currTool","currSubTool","getToolAndSubtool","STATELESS_TOOLS","heights","maxHeight","color","selectedColor","CANVAS_COLORS","selections","debounce","getColorsForUser","canvasElementRef","canvasConfig","canvasSetting","initialData","removeTileButton","removeMask"],"mappings":"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"}
+{"version":3,"file":"cue-canvas-core.js","sources":["../../../src/features/cue-canvas/cue-canvas-core.ts"],"sourcesContent":["import type { TUserTypes } from '../ui/types';\nimport type {\n  IActionData,\n  IViewport,\n  TCueCanvasChangeData,\n  TCueCanvasGridName,\n  TCueCanvasTool,\n  TPublish,\n  TRenderAs,\n  TCueCanvasChangeDataObject,\n  IReplaceCanvas,\n  ICueCanvasCoreProps,\n  TUpdateCanvasConfig,\n  TCueCanvasColors,\n} from './types/cue-canvas';\nimport type { ICreateOptions } from './types/cue-canvas';\nimport type { IPolypad, IPolyPadInstance } from './types/polypad';\n\nimport { captureMessage } from '@sentry/browser';\nimport debounce from 'lodash.debounce';\n\nimport { CANVAS_COLORS } from './constants/constants';\nimport {\n  checkTextOrEquationTool,\n  getColorsForUser,\n  getReverseMap,\n  getToolAndSubtool,\n  removeMask,\n  removeMusicTiles,\n  removeTileButton,\n  STATELESS_TOOLS,\n} from './cue-canvas-helpers';\n\ndeclare global {\n  interface Window {\n    Polypad: IPolypad;\n  }\n}\n\n/**\n * The CueCanvasCore class manages the canvas state and tool synchronization.\n * When text or equations are added, Polypad automatically switches to 'move' tool.\n * onUpdateActiveTool ensures the UI reflects this automatic tool change.\n */\n\nexport class CueCanvasCore {\n  private polycanvas: IPolyPadInstance | undefined;\n  private publish?: TPublish;\n  private height: number;\n  private onUpdateActiveTool: (tool: TCueCanvasTool) => void;\n  private onUpdateHeight?: (height: number) => void;\n  private userId: string;\n  private canvasId: string;\n  private userType: TUserTypes;\n  private renderAs: TRenderAs;\n  private fileInput: HTMLInputElement | null = null;\n  private debouncedViewportChange: ReturnType<typeof debounce>;\n  private uploadImageToS3?: (file: File) => Promise<string>;\n  private updateCanvasConfigChange?: TUpdateCanvasConfig;\n  private gridName?: TCueCanvasGridName;\n  private activeColor: TCueCanvasColors;\n  private activeTool: TCueCanvasTool | undefined;\n\n  constructor({\n    onPublish,\n    onSubscribe,\n    onUpdateActiveTool,\n    onUpdateHeight,\n    uploadImageToS3,\n    height,\n    userId,\n    canvasId,\n    userType,\n    renderAs,\n    updateCanvasConfig,\n  }: ICueCanvasCoreProps) {\n    this.onUpdateHeight = onUpdateHeight;\n    this.onUpdateActiveTool = onUpdateActiveTool;\n    this.height = height;\n    this.uploadImageToS3 = uploadImageToS3;\n    this.userId = userId;\n    this.canvasId = canvasId;\n    this.publish = onPublish;\n    this.userType = userType;\n    this.renderAs = renderAs;\n    this.debouncedViewportChange = debounce(this.onViewPortChange, 300);\n    this.updateCanvasConfigChange = updateCanvasConfig;\n    this.activeColor = getColorsForUser(userType, renderAs)[0] as TCueCanvasColors;\n    this.activeTool = undefined; // Default to first color in the palette\n    onSubscribe?.(this.canvasId, this.update);\n  }\n\n  async create({ canvasElementRef, canvasConfig, canvasSetting, initialData }: ICreateOptions) {\n    if (!canvasElementRef.current) {\n      throw new Error('PolyCanvas: Div Element Not found for canvas');\n    }\n    this.polycanvas = await window.Polypad.create(canvasElementRef.current, {\n      initial: {\n        options: canvasConfig,\n      },\n      ...canvasSetting,\n      imageUpload:\n        this.renderAs === 'whiteboard' && this.userType === 'TEACHER' && this.uploadImageToS3\n          ? this.uploadImageToS3\n          : undefined,\n    });\n\n    if (this.renderAs === 'whiteboard' && this.userType === 'TEACHER') {\n      this.polycanvas.toggleSidebar(false);\n      this.polycanvas.bindKeyboardEvents({});\n\n      removeTileButton(canvasElementRef);\n      removeMusicTiles(canvasElementRef);\n      this.polycanvas.on('viewport', this.debouncedViewportChange);\n    }\n\n    removeMask(canvasElementRef);\n    this.polycanvas.on('change', this.onChange);\n    if (initialData) {\n      this.update(initialData);\n    }\n  }\n\n  private publishToChannel = (payload: TCueCanvasChangeDataObject) => {\n    if (!this.publish) return;\n\n    this.publish({\n      eventName: 'cue_canvas_changed',\n      eventPayload: {\n        data: payload,\n        height: this.height,\n        userId: this.userId,\n        responseId: this.canvasId,\n      },\n    });\n  };\n\n  private onChange = (e: unknown) => {\n    const data = e as TCueCanvasChangeData;\n    const payload = Object.fromEntries(data.entries());\n\n    if (checkTextOrEquationTool(payload)) {\n      this.onUpdateActiveTool('move');\n      this.setTool('move');\n    }\n\n    this.publishToChannel(payload);\n  };\n\n  private undo = () => {\n    if (!this.polycanvas) {\n      return;\n    }\n\n    const data = this.polycanvas.undo() as TCueCanvasChangeData;\n\n    if (!data) {\n      return;\n    }\n\n    const undoData = getReverseMap(data);\n\n    this.onChange(undoData);\n  };\n\n  private redo = () => {\n    if (!this.polycanvas) {\n      return;\n    }\n\n    const data = this.polycanvas.redo() as TCueCanvasChangeData;\n\n    if (!data) {\n      return;\n    }\n\n    this.onChange(data);\n  };\n\n  clearCanvas = () => {\n    if (this.polycanvas) {\n      this.polycanvas.clear();\n    }\n  };\n\n  private zoomIn = () => {\n    if (!this.polycanvas) return;\n\n    const viewPort = this.polycanvas.getViewport();\n\n    this.polycanvas.setViewport(viewPort.x, viewPort.y, viewPort.zoom * 1.1);\n  };\n\n  private zoomOut = () => {\n    if (!this.polycanvas) return;\n\n    const viewPort = this.polycanvas.getViewport();\n\n    this.polycanvas.setViewport(viewPort.x, viewPort.y, viewPort.zoom * 0.9);\n  };\n\n  getCanvasAsImage = async () => {\n    if (!this.polycanvas) return;\n\n    const image = await this.polycanvas.image(3000, 3000, 'png');\n\n    return image;\n  };\n\n  private downloadCanvasAsImage = async () => {\n    if (!this.polycanvas) return;\n\n    const image = await this.polycanvas.image(3000, 3000, 'png');\n\n    if (!image) return;\n\n    const downloadLink = document.createElement('a');\n\n    downloadLink.href = image;\n    downloadLink.download = `canvas-drawing-${Date.now()}.png`;\n    downloadLink.click();\n  };\n\n  private onViewPortChange = (e: IViewport): void => {\n    if (!this.updateCanvasConfigChange) return;\n\n    this.updateCanvasConfigChange({ dimesion: e });\n  };\n\n  private openFileUpload = (): void => {\n    if (!this.fileInput) {\n      this.fileInput = document.createElement('input');\n      this.fileInput.type = 'file';\n      this.fileInput.accept = 'image/*';\n      this.fileInput.style.display = 'none';\n      this.fileInput.onchange = this.onSelectImage;\n      document.body.appendChild(this.fileInput);\n    }\n\n    this.fileInput.click();\n  };\n\n  addImageToCanvas = (imageUrl: string): void => {\n    if (!this.polycanvas) return;\n\n    const viewPort = this.polycanvas.getViewport();\n    const imgJson = {\n      name: 'image',\n      href: imageUrl,\n      x: viewPort.x + 24,\n      y: viewPort.y + 24,\n      width: 500,\n    };\n\n    const key = this.polycanvas.add({\n      ...imgJson,\n    });\n\n    this.publishToChannel({\n      [key]: [undefined, { ...imgJson, status: 'locked' }],\n    });\n    this.onUpdateActiveTool('move');\n    this.setTool('move');\n  };\n\n  private onSelectImage = async (event: Event): Promise<void> => {\n    const target = event.target as HTMLInputElement;\n    const file = target.files?.[0];\n\n    if (!file || !this.polycanvas || !this.uploadImageToS3) return;\n\n    const imageUrl = await this.uploadImageToS3(file);\n\n    if (imageUrl === 'error') {\n      return;\n    }\n\n    this.addImageToCanvas(imageUrl);\n\n    target.value = '';\n  };\n\n  private updateCanvas = ({ data, userId }: IActionData) => {\n    const canEditStroke = this.userType === 'TEACHER' || userId === this.userId;\n\n    try {\n      Object.entries(data).forEach(([key, value]) => {\n        if (!value[0] && value[1]) {\n          if ('name' in value[1] && value[1].name === 'image') {\n            value[1].status = this.userType === 'STUDENT' ? 'locked' : undefined; // Lock only images for students\n          }\n          this.polycanvas?.add({ ...value[1], cannotEdit: !canEditStroke }, key);\n        } else if (value[0] && !value[1]) {\n          this.polycanvas?.delete(key);\n        } else if (value[0] && value[1]) {\n          this.polycanvas?.update(key, { ...value[1] });\n        }\n      });\n    } catch (error) {\n      captureMessage('Error Updating Canvas', data);\n    }\n  };\n\n  toggleTiles = (val: boolean) => {\n    this.polycanvas?.toggleSidebar(val);\n  };\n\n  setViewPort = ({ x, y, zoom }: IViewport) => {\n    if (this.polycanvas) {\n      const cv = this.polycanvas?.getViewport();\n\n      if (cv.x === x && cv.y === y && cv.zoom === zoom) {\n        return; // No change needed\n      }\n\n      this.polycanvas.setViewport(x, y, zoom);\n    }\n  };\n\n  resetViewPort = () => {\n    if (this.polycanvas) {\n      this.polycanvas.resetViewport();\n    }\n  };\n\n  changeGrid = (gridName: TCueCanvasGridName) => {\n    if (!this.polycanvas || this.gridName === gridName) return;\n\n    this.polycanvas.setOptions({\n      grid: gridName,\n    });\n    this.gridName = gridName;\n    if (this.updateCanvasConfigChange) {\n      this.updateCanvasConfigChange({ gridName: gridName });\n    }\n  };\n\n  lockSelectedTiles = () => {\n    const { tiles: allTiles } = this.polycanvas?.serialize() || {};\n    const selectedItems = this.polycanvas?.getSelection() || [];\n\n    if (selectedItems.length > 0 && allTiles) {\n      const lockedTiles: TCueCanvasChangeDataObject = {};\n\n      selectedItems.forEach(key => {\n        if (!allTiles[key]?.name) return;\n\n        const updatedJson = { ...allTiles[key], status: 'locked' as const };\n\n        this.polycanvas?.update(key, updatedJson);\n        if (allTiles[key]?.name) lockedTiles[key] = [allTiles[key], updatedJson];\n      });\n\n      this.publishToChannel(lockedTiles);\n    }\n  };\n\n  unlockAllTiles = () => {\n    if (!this.polycanvas) return;\n\n    const { tiles: allTiles } = this.polycanvas.serialize();\n    const unlockedTiles: TCueCanvasChangeDataObject = {};\n\n    if (allTiles && Object.entries(allTiles).length > 0) {\n      Object.entries(allTiles).forEach(([key, item]) => {\n        if (item.status !== 'locked') return;\n\n        const updatedJson = { ...item, status: undefined };\n\n        this.polycanvas?.update(key, updatedJson);\n        unlockedTiles[key] = [item, updatedJson];\n      });\n\n      this.publishToChannel(unlockedTiles);\n    }\n  };\n\n  replaceCanvas = (data: IReplaceCanvas) => {\n    if (!this.polycanvas) return;\n\n    const { data: canvasData, gridName } = data;\n\n    this.polycanvas.clear();\n    if (gridName) {\n      this.changeGrid(gridName);\n    }\n\n    Object.entries(canvasData).forEach(([key, value]) => {\n      if (!value[0] && value[1]) {\n        this.polycanvas?.add({ ...value[1] }, key);\n\n        return;\n      }\n    });\n\n    this.publishToChannel(canvasData);\n  };\n\n  setTool = (tool: TCueCanvasTool) => {\n    if (!this.polycanvas || tool === this.activeTool) return;\n\n    const [currTool, currSubTool] = getToolAndSubtool(tool);\n\n    switch (currTool) {\n      case 'clearAll':\n        this.clearCanvas();\n        break;\n      case 'home':\n        this.resetViewPort();\n        break;\n      case 'undo':\n        this.undo();\n        break;\n      case 'redo':\n        this.redo();\n        break;\n      case 'lock':\n        this.lockSelectedTiles();\n        break;\n      case 'unlock':\n        this.unlockAllTiles();\n        break;\n      case 'zoomIn':\n        this.zoomIn();\n        break;\n      case 'zoomOut':\n        this.zoomOut();\n        break;\n      case 'upload':\n        this.openFileUpload();\n        break;\n      case 'download':\n        this.downloadCanvasAsImage();\n        break;\n      case 'grid':\n        break;\n      default:\n        this.polycanvas.setTool(currTool, currSubTool);\n    }\n    if (!STATELESS_TOOLS.has(tool)) {\n      this.activeTool = tool;\n    }\n  };\n\n  /**\n   * The `update` method is called in two cases:\n   * 1. When receiving initial data to update the canvas content.\n   * 2. When receiving strokes from other peers to update the canvas content.\n   * Each item can contain multiple actions, which are applied to the canvas.\n   *\n   * The method checks if the payload is an array or a single object.\n   * If it's an array, it iterates over each item and updates the canvas accordingly.\n   * If it's a single object, it directly updates the canvas.\n   *\n   * Additionally, if the payload contains a height greater than the current height of the canvas, the `updateHeight` method is called to update the canvas height.\n   */\n  update = (payload: IActionData | IActionData[]) => {\n    if (Array.isArray(payload)) {\n      const heights = payload.map(data => data.height).filter(Boolean);\n      const maxHeight = Math.max(...heights);\n\n      if (maxHeight > this.height) {\n        this.updateHeight(maxHeight);\n      }\n      payload.forEach(item => this.updateCanvas(item));\n    } else {\n      if (payload.height > this.height) {\n        this.updateHeight(payload.height);\n      }\n      this.updateCanvas(payload);\n    }\n  };\n\n  getSelections = () => {\n    return this.polycanvas ? this.polycanvas.getSelection() : [];\n  };\n\n  setColor = (color: TCueCanvasColors) => {\n    if (!this.polycanvas || !this.activeColor) return;\n\n    const selectedColor = CANVAS_COLORS[color];\n\n    const selections = this.getSelections();\n\n    if (selections && selections.length > 0) {\n      selections.forEach((key: string) => {\n        this.polycanvas?.update(key, { color: selectedColor });\n        this.onChange(\n          new Map([[key, [{ color: CANVAS_COLORS[this.activeColor] }, { color: selectedColor }]]]),\n        );\n      });\n    }\n    this.polycanvas.setColor(selectedColor);\n    this.activeColor = color;\n  };\n\n  updateHeight = (height: number) => {\n    this.height = height;\n    this.onUpdateHeight?.(height);\n  };\n\n  destroy = () => {\n    if (this.polycanvas) {\n      this.polycanvas.off('change', this.onChange);\n      this.polycanvas.destroy();\n      this.debouncedViewportChange.cancel();\n\n      if (this.renderAs === 'whiteboard' && this.userType === 'TEACHER') {\n        this.polycanvas.off('viewport', this.debouncedViewportChange);\n      }\n      this.polycanvas = undefined;\n\n      if (this.fileInput && this.fileInput.parentNode) {\n        this.fileInput.parentNode.removeChild(this.fileInput);\n        this.fileInput = null;\n      }\n    }\n  };\n}\n"],"names":["CueCanvasCore","onPublish","onSubscribe","onUpdateActiveTool","onUpdateHeight","uploadImageToS3","height","userId","canvasId","userType","renderAs","updateCanvasConfig","__publicField","payload","e","checkTextOrEquationTool","data","undoData","getReverseMap","viewPort","image","downloadLink","imageUrl","imgJson","key","event","target","file","_a","canEditStroke","value","_b","_c","captureMessage","val","x","y","zoom","cv","gridName","allTiles","selectedItems","lockedTiles","updatedJson","unlockedTiles","item","canvasData","tool","currTool","currSubTool","getToolAndSubtool","STATELESS_TOOLS","heights","maxHeight","color","selectedColor","CANVAS_COLORS","selections","debounce","getColorsForUser","canvasElementRef","canvasConfig","canvasSetting","initialData","removeTileButton","removeMusicTiles","removeMask"],"mappings":"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"}

package/dist/features/cue-canvas/cue-canvas-helpers.js

@@ -1,5 +1,5 @@
 import { CANVAS_COLORS as u } from "./constants/constants.js";
-const E = [
+const h = [
   "none",
   "square2-grid",
   "square-checked",
@@ -20,64 +20,68 @@ const E = [
   "zoomOut",
   "upload",
   "download"
-]), m = (e) => {
-  var n;
-  const t = (n = e.current) == null ? void 0 : n.shadowRoot;
-  if (t) {
-    const o = t.querySelectorAll("x-polypad");
-    if (o[0]) {
-      const s = o[0].querySelector("svg.canvas"), r = s == null ? void 0 : s.querySelector("path.mask");
-      r == null || r.setAttribute("stroke", "transparent"), r == null || r.setAttribute("fill", "transparent"), r == null || r.removeAttribute("style");
+]), E = (n) => {
+  var t;
+  const e = (t = n.current) == null ? void 0 : t.shadowRoot;
+  if (e) {
+    const r = e.querySelectorAll("x-polypad");
+    if (r[0]) {
+      const s = r[0].querySelector("svg.canvas"), o = s == null ? void 0 : s.querySelector("path.mask");
+      o == null || o.setAttribute("stroke", "transparent"), o == null || o.setAttribute("fill", "transparent"), o == null || o.removeAttribute("style");
     }
   }
-}, b = (e) => {
-  var r;
-  const t = (r = e.current) == null ? void 0 : r.shadowRoot, n = t == null ? void 0 : t.querySelector("x-pp-sidebar"), o = n == null ? void 0 : n.getElementsByClassName("tabs-header"), s = n == null ? void 0 : n.getElementsByClassName("tabs-body");
-  if (n == null || n.setAttribute("style", "display: none;"), n == null || n.setAttribute("style", "height: 30px;"), o && o.length > 0) {
-    const a = o[0];
+}, y = (n) => {
+  var o;
+  const e = (o = n.current) == null ? void 0 : o.shadowRoot, t = e == null ? void 0 : e.querySelector("x-pp-sidebar"), r = t == null ? void 0 : t.getElementsByClassName("tabs-header"), s = t == null ? void 0 : t.getElementsByClassName("tabs-body");
+  if (t == null || t.setAttribute("style", "display: none;"), t == null || t.setAttribute("style", "height: 30px;"), r && r.length > 0) {
+    const a = r[0];
     a.style.display = "none";
   }
   if (s && s.length > 0) {
     const a = s[0];
     a.style.top = "48px";
   }
-  n == null || n.setAttribute("style", "display: block;");
-}, y = (e, t, n, o) => n === "canvas" ? {
+  t == null || t.setAttribute("style", "display: block;");
+}, b = (n) => {
+  var t;
+  const e = (t = n.current.shadowRoot) == null ? void 0 : t.querySelectorAll('[data-key="music"]')[0];
+  e && (e.style.display = "none");
+}, f = (n, e, t, r) => t === "canvas" ? {
   canvas: "notebook",
-  canvasX: e,
-  canvasY: t,
+  canvasX: n,
+  canvasY: e,
   noPinchPan: !0,
   grid: "none",
   background: "transparent",
   noSnapping: !0
 } : {
   canvas: "infinite",
-  canvasX: e,
-  canvasY: t,
+  canvasX: n,
+  canvasY: e,
   grid: "none",
-  noPinchPan: o === "STUDENT",
-  noDeleting: o === "STUDENT",
-  noCopyPaste: o === "STUDENT",
+  noPinchPan: r === "STUDENT",
+  noDeleting: r === "STUDENT",
+  noCopyPaste: r === "STUDENT",
   noMusic: !0,
   noAudio: !0
-}, f = (e, t) => e === "canvas" ? {
+}, C = (n, e) => n === "canvas" ? {
   sidebarTiles: !1,
   sidebarSettings: !1,
   settings: !1,
   toolbar: !1,
   canvasMargin: 0
 } : {
-  sidebarTiles: t === "TEACHER",
+  sidebarTiles: e === "TEACHER",
   sidebarSettings: !1,
   settings: !1,
   toolbar: !1
-}, d = (e) => [e[1], e[0]], C = (e) => {
-  const t = /* @__PURE__ */ new Map();
-  return e.forEach((n, o) => {
-    t.set(o, d(n));
-  }), t;
-}, v = (e) => {
-  switch (e) {
+}, d = (n) => [n[1], n[0]], v = (n) => {
+  const e = /* @__PURE__ */ new Map();
+  return n.forEach((t, r) => {
+    e.set(r, d(t));
+  }), e;
+}, O = (n) => {
+  switch (n) {
     case "pen":
       return ["pen", "pen"];
     case "marker":
@@ -89,7 +93,7 @@ const E = [
     case "equation":
       return ["text", "equation"];
     default:
-      return [e, void 0];
+      return [n, void 0];
   }
 }, g = [
   "pen",
@@ -132,28 +136,29 @@ const E = [
   "move",
   "undo",
   "redo"
-], T = ["pen", "ruler", "eraser", "move", "undo", "redo"], O = (e, t) => t === "whiteboard" ? e === "TEACHER" ? g : A : e === "TEACHER" ? p : T, R = (e, t = "canvas") => t === "whiteboard" ? Object.keys(u).filter(
-  (n) => !n.startsWith("CANVAS")
-) : e === "TEACHER" ? ["CANVAS_RED", "CANVAS_YELLOW", "CANVAS_GREEN"] : ["CANVAS_BLUE", "CANVAS_PURPLE", "CANVAS_PINK"], N = (e) => ["pen", "ruler", "marker", "highlighter"].includes(e), _ = (e) => Object.values(e).some((t) => !!(!t[0] && t[1] && "name" in t[1] && (t[1].name === "text" || t[1].name === "equation"))), k = (e) => {
-  const t = e.split(","), n = t[0] ?? "", o = t[1] ?? "", r = n.includes("base64") ? atob(o) : decodeURIComponent(o), a = n.match(/:(.*?);/), l = a ? a[1] : "application/octet-stream", i = new Uint8Array(r.length);
-  for (let c = 0; c < r.length; c++)
-    i[c] = r.charCodeAt(c);
+], T = ["pen", "ruler", "eraser", "move", "undo", "redo"], R = (n, e) => e === "whiteboard" ? n === "TEACHER" ? g : A : n === "TEACHER" ? p : T, N = (n, e = "canvas") => e === "whiteboard" ? Object.keys(u).filter(
+  (t) => !t.startsWith("CANVAS")
+) : n === "TEACHER" ? ["CANVAS_RED", "CANVAS_YELLOW", "CANVAS_GREEN"] : ["CANVAS_BLUE", "CANVAS_PURPLE", "CANVAS_PINK"], _ = (n) => ["pen", "ruler", "marker", "highlighter"].includes(n), k = (n) => Object.values(n).some((e) => !!(!e[0] && e[1] && "name" in e[1] && (e[1].name === "text" || e[1].name === "equation"))), q = (n) => {
+  const e = n.split(","), t = e[0] ?? "", r = e[1] ?? "", o = t.includes("base64") ? atob(r) : decodeURIComponent(r), a = t.match(/:(.*?);/), l = a ? a[1] : "application/octet-stream", i = new Uint8Array(o.length);
+  for (let c = 0; c < o.length; c++)
+    i[c] = o.charCodeAt(c);
   return new Blob([i], { type: l });
 };
 export {
-  E as GRID_NAMES,
+  h as GRID_NAMES,
   S as STATELESS_TOOLS,
-  _ as checkTextOrEquationTool,
-  k as dataURIToBlob,
-  y as getCanvasConfig,
-  f as getCanvasSettings,
-  R as getColorsForUser,
-  N as getIsWritingTool,
+  k as checkTextOrEquationTool,
+  q as dataURIToBlob,
+  f as getCanvasConfig,
+  C as getCanvasSettings,
+  N as getColorsForUser,
+  _ as getIsWritingTool,
   d as getReverseAction,
-  C as getReverseMap,
-  v as getToolAndSubtool,
-  O as getUserTools,
-  m as removeMask,
-  b as removeTileButton
+  v as getReverseMap,
+  O as getToolAndSubtool,
+  R as getUserTools,
+  E as removeMask,
+  b as removeMusicTiles,
+  y as removeTileButton
 };
 //# sourceMappingURL=cue-canvas-helpers.js.map

package/dist/features/cue-canvas/cue-canvas-helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"cue-canvas-helpers.js","sources":["../../../src/features/cue-canvas/cue-canvas-helpers.ts"],"sourcesContent":["import type { TUserTypes } from '../ui/types';\nimport type {\n  TCueCanvasColors,\n  TCueCanvasChangeData,\n  TCueCanvasTool,\n  TCueCanvasToolOption,\n  TDrawingData,\n  TRenderAs,\n  TCueCanvasGridName,\n  TCueCanvasChangeDataObject,\n} from './types/cue-canvas';\nimport type { IPolypadCreateOptions, IPolypadOptions } from './types/polypad';\n\nimport { CANVAS_COLORS } from './constants/constants';\n\nexport const GRID_NAMES: TCueCanvasGridName[] = [\n  'none',\n  'square2-grid',\n  'square-checked',\n  'square-dots',\n  'tri-dots',\n  'tri2-dots',\n  'square-grid',\n  'tri-grid',\n  'tri2-grid',\n];\n\nexport const STATELESS_TOOLS = new Set<TCueCanvasTool>([\n  'undo',\n  'redo',\n  'clearAll',\n  'home',\n  'lock',\n  'unlock',\n  'zoomIn',\n  'zoomOut',\n  'upload',\n  'download',\n]);\n\nexport const removeMask = (canvasElementRef: React.RefObject<HTMLDivElement>) => {\n  const shadowRoot = canvasElementRef.current?.shadowRoot;\n\n  if (shadowRoot) {\n    const xPolypad = shadowRoot.querySelectorAll('x-polypad');\n\n    if (xPolypad[0]) {\n      const svgCanvas = xPolypad[0].querySelector('svg.canvas');\n      const maskPath = svgCanvas?.querySelector('path.mask');\n\n      maskPath?.setAttribute('stroke', 'transparent');\n      maskPath?.setAttribute('fill', 'transparent');\n      maskPath?.removeAttribute('style');\n    }\n  }\n\n  return undefined;\n};\n\nexport const removeTileButton = (canvasElementRef: React.RefObject<HTMLDivElement>) => {\n  const shadowRoot = canvasElementRef.current?.shadowRoot;\n  const sidebar = shadowRoot?.querySelector('x-pp-sidebar') as HTMLElement;\n  const tabsHeader = sidebar?.getElementsByClassName('tabs-header');\n  const tabsBody = sidebar?.getElementsByClassName('tabs-body');\n\n  sidebar?.setAttribute('style', 'display: none;');\n  sidebar?.setAttribute('style', 'height: 30px;');\n\n  if (tabsHeader && tabsHeader.length > 0) {\n    const firstTabHeader = tabsHeader[0] as HTMLElement;\n\n    firstTabHeader.style.display = 'none';\n  }\n\n  if (tabsBody && tabsBody.length > 0) {\n    const firstTabBody = tabsBody[0] as HTMLElement;\n\n    firstTabBody.style.top = '48px';\n  }\n  sidebar?.setAttribute('style', 'display: block;');\n};\n\nexport const getCanvasConfig = (\n  width: number,\n  height: number,\n  renderAs: TRenderAs,\n  userType: TUserTypes,\n): IPolypadOptions => {\n  return renderAs === 'canvas'\n    ? {\n        canvas: 'notebook',\n        canvasX: width,\n        canvasY: height,\n        noPinchPan: true,\n        grid: 'none',\n        background: 'transparent',\n        noSnapping: true,\n      }\n    : {\n        canvas: 'infinite',\n        canvasX: width,\n        canvasY: height,\n        grid: 'none',\n        noPinchPan: userType === 'STUDENT',\n        noDeleting: userType === 'STUDENT',\n        noCopyPaste: userType === 'STUDENT',\n        noMusic: true,\n        noAudio: true,\n      };\n};\n\nexport const getCanvasSettings = (\n  renderAs: TRenderAs,\n  userType: TUserTypes,\n): IPolypadCreateOptions => {\n  return renderAs === 'canvas'\n    ? {\n        sidebarTiles: false,\n        sidebarSettings: false,\n        settings: false,\n        toolbar: false,\n        canvasMargin: 0,\n      }\n    : {\n        sidebarTiles: userType === 'TEACHER',\n        sidebarSettings: false,\n        settings: false,\n        toolbar: false,\n      };\n};\n\nexport const getReverseAction = (action: TDrawingData[]) => [action[1], action[0]];\n\nexport const getReverseMap = (data: TCueCanvasChangeData) => {\n  const newData = new Map<string, TDrawingData[]>();\n\n  data.forEach((value, key) => {\n    newData.set(key, getReverseAction(value));\n  });\n\n  return newData;\n};\n\nexport const getToolAndSubtool = (\n  tool: TCueCanvasTool,\n): [\n  Exclude<TCueCanvasTool, 'marker' | 'highlighter' | 'ruler' | 'equation'>,\n  TCueCanvasToolOption | undefined,\n] => {\n  switch (tool) {\n    case 'pen':\n      return ['pen', 'pen'];\n    case 'marker':\n      return ['pen', 'marker'];\n    case 'highlighter':\n      return ['pen', 'highlighter'];\n    case 'ruler':\n      return ['pen', 'ruler'];\n    case 'equation':\n      return ['text', 'equation'];\n    default:\n      return [tool, undefined];\n  }\n};\n\nconst TEACHER_WHITEBOARD_TOOLS: TCueCanvasTool[] = [\n  'pen',\n  'ruler',\n  'marker',\n  'highlighter',\n  'eraser',\n  'move',\n  'lock',\n  'unlock',\n  'zoomIn',\n  'zoomOut',\n  'pan',\n  'clearAll',\n  'text',\n  'equation',\n  'grid',\n  'home',\n  'undo',\n  'redo',\n\n  'upload',\n  'download',\n];\n\nconst STUDENT_WHITEBOARD_TOOLS: TCueCanvasTool[] = [\n  'pen',\n  'ruler',\n  'marker',\n  'highlighter',\n  'eraser',\n  'move',\n  'text',\n  'undo',\n  'redo',\n  'download',\n];\n\nconst TEACHER_DEFAULT_TOOLS: TCueCanvasTool[] = [\n  'pen',\n  'ruler',\n  'marker',\n  'highlighter',\n  'eraser',\n  'move',\n  'undo',\n  'redo',\n];\n\nconst STUDENT_DEFAULT_TOOLS: TCueCanvasTool[] = ['pen', 'ruler', 'eraser', 'move', 'undo', 'redo'];\n\nexport const getUserTools = (userType: TUserTypes, renderAs: TRenderAs): TCueCanvasTool[] => {\n  if (renderAs === 'whiteboard') {\n    return userType === 'TEACHER' ? TEACHER_WHITEBOARD_TOOLS : STUDENT_WHITEBOARD_TOOLS;\n  }\n\n  return userType === 'TEACHER' ? TEACHER_DEFAULT_TOOLS : STUDENT_DEFAULT_TOOLS;\n};\n\nexport const getColorsForUser = (userType: TUserTypes, renderAs: TRenderAs = 'canvas') => {\n  if (renderAs === 'whiteboard') {\n    return Object.keys(CANVAS_COLORS).filter(\n      color => !color.startsWith('CANVAS'),\n    ) as TCueCanvasColors[];\n  }\n\n  return userType === 'TEACHER'\n    ? (['CANVAS_RED', 'CANVAS_YELLOW', 'CANVAS_GREEN'] as TCueCanvasColors[])\n    : (['CANVAS_BLUE', 'CANVAS_PURPLE', 'CANVAS_PINK'] as TCueCanvasColors[]);\n};\n\nexport const getIsWritingTool = (penTool: string) => {\n  return ['pen', 'ruler', 'marker', 'highlighter'].includes(penTool);\n};\n\nexport const checkTextOrEquationTool = (payload: TCueCanvasChangeDataObject) => {\n  return Object.values(payload).some(value => {\n    if (\n      !value[0] &&\n      value[1] &&\n      'name' in value[1] &&\n      (value[1].name === 'text' || value[1].name === 'equation')\n    ) {\n      return true;\n    }\n\n    return false;\n  });\n};\n\nexport const dataURIToBlob = (dataURI: string): Blob => {\n  const parts = dataURI.split(',');\n  const metadata = parts[0] ?? '';\n  const base64Data = parts[1] ?? '';\n\n  const isBase64 = metadata.includes('base64');\n  const byteString = isBase64 ? atob(base64Data) : decodeURIComponent(base64Data);\n\n  const mimeTypeMatch = metadata.match(/:(.*?);/);\n  const mimeType = mimeTypeMatch ? mimeTypeMatch[1] : 'application/octet-stream';\n\n  const byteArray = new Uint8Array(byteString.length);\n\n  for (let i = 0; i < byteString.length; i++) {\n    byteArray[i] = byteString.charCodeAt(i);\n  }\n\n  return new Blob([byteArray], { type: mimeType });\n};\n\nexport const jsonToBlob = (json: unknown) => {\n  const data = JSON.stringify(json);\n\n  return new Blob([data], {\n    type: 'application/json',\n  });\n};\n"],"names":["GRID_NAMES","STATELESS_TOOLS","removeMask","canvasElementRef","shadowRoot","_a","xPolypad","svgCanvas","maskPath","removeTileButton","sidebar","tabsHeader","tabsBody","firstTabHeader","firstTabBody","getCanvasConfig","width","height","renderAs","userType","getCanvasSettings","getReverseAction","action","getReverseMap","data","newData","value","key","getToolAndSubtool","tool","TEACHER_WHITEBOARD_TOOLS","STUDENT_WHITEBOARD_TOOLS","TEACHER_DEFAULT_TOOLS","STUDENT_DEFAULT_TOOLS","getUserTools","getColorsForUser","CANVAS_COLORS","color","getIsWritingTool","penTool","checkTextOrEquationTool","payload","dataURIToBlob","dataURI","parts","metadata","base64Data","byteString","mimeTypeMatch","mimeType","byteArray","i"],"mappings":"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"}
+{"version":3,"file":"cue-canvas-helpers.js","sources":["../../../src/features/cue-canvas/cue-canvas-helpers.ts"],"sourcesContent":["import type { TUserTypes } from '../ui/types';\nimport type {\n  TCueCanvasColors,\n  TCueCanvasChangeData,\n  TCueCanvasTool,\n  TCueCanvasToolOption,\n  TDrawingData,\n  TRenderAs,\n  TCueCanvasGridName,\n  TCueCanvasChangeDataObject,\n} from './types/cue-canvas';\nimport type { IPolypadCreateOptions, IPolypadOptions } from './types/polypad';\n\nimport { CANVAS_COLORS } from './constants/constants';\n\nexport const GRID_NAMES: TCueCanvasGridName[] = [\n  'none',\n  'square2-grid',\n  'square-checked',\n  'square-dots',\n  'tri-dots',\n  'tri2-dots',\n  'square-grid',\n  'tri-grid',\n  'tri2-grid',\n];\n\nexport const STATELESS_TOOLS = new Set<TCueCanvasTool>([\n  'undo',\n  'redo',\n  'clearAll',\n  'home',\n  'lock',\n  'unlock',\n  'zoomIn',\n  'zoomOut',\n  'upload',\n  'download',\n]);\n\nexport const removeMask = (canvasElementRef: React.RefObject<HTMLDivElement>) => {\n  const shadowRoot = canvasElementRef.current?.shadowRoot;\n\n  if (shadowRoot) {\n    const xPolypad = shadowRoot.querySelectorAll('x-polypad');\n\n    if (xPolypad[0]) {\n      const svgCanvas = xPolypad[0].querySelector('svg.canvas');\n      const maskPath = svgCanvas?.querySelector('path.mask');\n\n      maskPath?.setAttribute('stroke', 'transparent');\n      maskPath?.setAttribute('fill', 'transparent');\n      maskPath?.removeAttribute('style');\n    }\n  }\n\n  return undefined;\n};\n\nexport const removeTileButton = (canvasElementRef: React.RefObject<HTMLDivElement>) => {\n  const shadowRoot = canvasElementRef.current?.shadowRoot;\n  const sidebar = shadowRoot?.querySelector('x-pp-sidebar') as HTMLElement;\n  const tabsHeader = sidebar?.getElementsByClassName('tabs-header');\n  const tabsBody = sidebar?.getElementsByClassName('tabs-body');\n\n  sidebar?.setAttribute('style', 'display: none;');\n  sidebar?.setAttribute('style', 'height: 30px;');\n\n  if (tabsHeader && tabsHeader.length > 0) {\n    const firstTabHeader = tabsHeader[0] as HTMLElement;\n\n    firstTabHeader.style.display = 'none';\n  }\n\n  if (tabsBody && tabsBody.length > 0) {\n    const firstTabBody = tabsBody[0] as HTMLElement;\n\n    firstTabBody.style.top = '48px';\n  }\n  sidebar?.setAttribute('style', 'display: block;');\n};\n\nexport const removeMusicTiles = (canvasElementRef: React.RefObject<HTMLDivElement>) => {\n  const musicTiles = canvasElementRef.current.shadowRoot?.querySelectorAll(`[data-key=\"music\"]`)[0];\n\n  // hiding music tiles\n  if (musicTiles) {\n    (musicTiles as HTMLElement).style.display = 'none';\n  }\n};\n\nexport const getCanvasConfig = (\n  width: number,\n  height: number,\n  renderAs: TRenderAs,\n  userType: TUserTypes,\n): IPolypadOptions => {\n  return renderAs === 'canvas'\n    ? {\n        canvas: 'notebook',\n        canvasX: width,\n        canvasY: height,\n        noPinchPan: true,\n        grid: 'none',\n        background: 'transparent',\n        noSnapping: true,\n      }\n    : {\n        canvas: 'infinite',\n        canvasX: width,\n        canvasY: height,\n        grid: 'none',\n        noPinchPan: userType === 'STUDENT',\n        noDeleting: userType === 'STUDENT',\n        noCopyPaste: userType === 'STUDENT',\n        noMusic: true,\n        noAudio: true,\n      };\n};\n\nexport const getCanvasSettings = (\n  renderAs: TRenderAs,\n  userType: TUserTypes,\n): IPolypadCreateOptions => {\n  return renderAs === 'canvas'\n    ? {\n        sidebarTiles: false,\n        sidebarSettings: false,\n        settings: false,\n        toolbar: false,\n        canvasMargin: 0,\n      }\n    : {\n        sidebarTiles: userType === 'TEACHER',\n        sidebarSettings: false,\n        settings: false,\n        toolbar: false,\n      };\n};\n\nexport const getReverseAction = (action: TDrawingData[]) => [action[1], action[0]];\n\nexport const getReverseMap = (data: TCueCanvasChangeData) => {\n  const newData = new Map<string, TDrawingData[]>();\n\n  data.forEach((value, key) => {\n    newData.set(key, getReverseAction(value));\n  });\n\n  return newData;\n};\n\nexport const getToolAndSubtool = (\n  tool: TCueCanvasTool,\n): [\n  Exclude<TCueCanvasTool, 'marker' | 'highlighter' | 'ruler' | 'equation'>,\n  TCueCanvasToolOption | undefined,\n] => {\n  switch (tool) {\n    case 'pen':\n      return ['pen', 'pen'];\n    case 'marker':\n      return ['pen', 'marker'];\n    case 'highlighter':\n      return ['pen', 'highlighter'];\n    case 'ruler':\n      return ['pen', 'ruler'];\n    case 'equation':\n      return ['text', 'equation'];\n    default:\n      return [tool, undefined];\n  }\n};\n\nconst TEACHER_WHITEBOARD_TOOLS: TCueCanvasTool[] = [\n  'pen',\n  'ruler',\n  'marker',\n  'highlighter',\n  'eraser',\n  'move',\n  'lock',\n  'unlock',\n  'zoomIn',\n  'zoomOut',\n  'pan',\n  'clearAll',\n  'text',\n  'equation',\n  'grid',\n  'home',\n  'undo',\n  'redo',\n\n  'upload',\n  'download',\n];\n\nconst STUDENT_WHITEBOARD_TOOLS: TCueCanvasTool[] = [\n  'pen',\n  'ruler',\n  'marker',\n  'highlighter',\n  'eraser',\n  'move',\n  'text',\n  'undo',\n  'redo',\n  'download',\n];\n\nconst TEACHER_DEFAULT_TOOLS: TCueCanvasTool[] = [\n  'pen',\n  'ruler',\n  'marker',\n  'highlighter',\n  'eraser',\n  'move',\n  'undo',\n  'redo',\n];\n\nconst STUDENT_DEFAULT_TOOLS: TCueCanvasTool[] = ['pen', 'ruler', 'eraser', 'move', 'undo', 'redo'];\n\nexport const getUserTools = (userType: TUserTypes, renderAs: TRenderAs): TCueCanvasTool[] => {\n  if (renderAs === 'whiteboard') {\n    return userType === 'TEACHER' ? TEACHER_WHITEBOARD_TOOLS : STUDENT_WHITEBOARD_TOOLS;\n  }\n\n  return userType === 'TEACHER' ? TEACHER_DEFAULT_TOOLS : STUDENT_DEFAULT_TOOLS;\n};\n\nexport const getColorsForUser = (userType: TUserTypes, renderAs: TRenderAs = 'canvas') => {\n  if (renderAs === 'whiteboard') {\n    return Object.keys(CANVAS_COLORS).filter(\n      color => !color.startsWith('CANVAS'),\n    ) as TCueCanvasColors[];\n  }\n\n  return userType === 'TEACHER'\n    ? (['CANVAS_RED', 'CANVAS_YELLOW', 'CANVAS_GREEN'] as TCueCanvasColors[])\n    : (['CANVAS_BLUE', 'CANVAS_PURPLE', 'CANVAS_PINK'] as TCueCanvasColors[]);\n};\n\nexport const getIsWritingTool = (penTool: string) => {\n  return ['pen', 'ruler', 'marker', 'highlighter'].includes(penTool);\n};\n\nexport const checkTextOrEquationTool = (payload: TCueCanvasChangeDataObject) => {\n  return Object.values(payload).some(value => {\n    if (\n      !value[0] &&\n      value[1] &&\n      'name' in value[1] &&\n      (value[1].name === 'text' || value[1].name === 'equation')\n    ) {\n      return true;\n    }\n\n    return false;\n  });\n};\n\nexport const dataURIToBlob = (dataURI: string): Blob => {\n  const parts = dataURI.split(',');\n  const metadata = parts[0] ?? '';\n  const base64Data = parts[1] ?? '';\n\n  const isBase64 = metadata.includes('base64');\n  const byteString = isBase64 ? atob(base64Data) : decodeURIComponent(base64Data);\n\n  const mimeTypeMatch = metadata.match(/:(.*?);/);\n  const mimeType = mimeTypeMatch ? mimeTypeMatch[1] : 'application/octet-stream';\n\n  const byteArray = new Uint8Array(byteString.length);\n\n  for (let i = 0; i < byteString.length; i++) {\n    byteArray[i] = byteString.charCodeAt(i);\n  }\n\n  return new Blob([byteArray], { type: mimeType });\n};\n\nexport const jsonToBlob = (json: unknown) => {\n  const data = JSON.stringify(json);\n\n  return new Blob([data], {\n    type: 'application/json',\n  });\n};\n"],"names":["GRID_NAMES","STATELESS_TOOLS","removeMask","canvasElementRef","shadowRoot","_a","xPolypad","svgCanvas","maskPath","removeTileButton","sidebar","tabsHeader","tabsBody","firstTabHeader","firstTabBody","removeMusicTiles","musicTiles","getCanvasConfig","width","height","renderAs","userType","getCanvasSettings","getReverseAction","action","getReverseMap","data","newData","value","key","getToolAndSubtool","tool","TEACHER_WHITEBOARD_TOOLS","STUDENT_WHITEBOARD_TOOLS","TEACHER_DEFAULT_TOOLS","STUDENT_DEFAULT_TOOLS","getUserTools","getColorsForUser","CANVAS_COLORS","color","getIsWritingTool","penTool","checkTextOrEquationTool","payload","dataURIToBlob","dataURI","parts","metadata","base64Data","byteString","mimeTypeMatch","mimeType","byteArray","i"],"mappings":"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"}

package/dist/features/hooks/use-audio-player.js

@@ -1,39 +1,50 @@
-import { useState as x, useMemo as y, useCallback as f, useEffect as _ } from "react";
-import { useUIContext as p } from "../ui/context/context.js";
-const C = (u) => {
-  const [a, s] = x({}), e = y(() => new (AudioContext || window.webkitAudioContext)(), []), { onEvent: o } = p(), c = f(
-    async (t, r) => {
+import { useState as l, useMemo as w, useCallback as s, useEffect as p } from "react";
+import { useUIContext as y } from "../ui/context/context.js";
+const b = (u) => {
+  const [f, c] = l({}), t = w(() => {
+    const e = window.AudioContext || window.webkitAudioContext;
+    return e ? new e() : null;
+  }, []), { onEvent: o } = y(), a = s(
+    async (e, r) => {
+      if (!t) {
+        o("audio_context_not_found", { name: r });
+        return;
+      }
       try {
-        const i = await (await fetch(t)).arrayBuffer(), d = await e.decodeAudioData(i);
-        s((l) => ({ ...l, [r]: d }));
+        const i = await (await fetch(e)).arrayBuffer(), d = await t.decodeAudioData(i);
+        c((_) => ({ ..._, [r]: d }));
       } catch (n) {
         o("audio_fetch_failed", { error: n });
       }
     },
-    [e, o]
+    [t, o]
   );
-  return _(() => (u.forEach(({ url: t, name: r }) => {
-    c(t, r);
+  return p(() => (u.forEach(({ url: e, name: r }) => {
+    a(e, r);
   }), () => {
     try {
-      e.close();
-    } catch (t) {
-      o("audio_context_closing_failed", { error: t });
+      t && (t.state === "running" || t.state === "suspended") && t.close();
+    } catch (e) {
+      o("audio_context_closing_failed", { error: e });
     }
-  }), [u, e, c, o]), f(
-    (t) => {
-      const r = a[t];
+  }), [u, t, a, o]), s(
+    (e) => {
+      const r = f[e];
+      if (!t) {
+        o("audio_context_not_found", { name: e });
+        return;
+      }
       if (!r) {
-        o("audio_buffer_not_found", { name: t });
+        o("audio_buffer_not_found", { name: e });
         return;
       }
-      const n = e.createBufferSource();
-      n.buffer = r, n.connect(e.destination), n.start();
+      const n = t == null ? void 0 : t.createBufferSource();
+      n.buffer = r, n.connect(t.destination), n.start();
     },
-    [a, e, o]
+    [f, t, o]
   );
 };
 export {
-  C as default
+  b as default
 };
 //# sourceMappingURL=use-audio-player.js.map

package/dist/features/hooks/use-audio-player.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-audio-player.js","sources":["../../../src/features/hooks/use-audio-player.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { useUIContext } from '../ui/context/context';\n\ndeclare global {\n  interface Window {\n    webkitAudioContext?: AudioContext;\n  }\n}\n\nconst useAudioPlayer = (audioUrls: { url: string; name: string }[]) => {\n  const [audioBuffers, setAudioBuffers] = useState<Record<string, AudioBuffer | null>>({});\n\n  const context = useMemo(() => {\n    const audioContext = new (AudioContext || window.webkitAudioContext)();\n\n    return audioContext;\n  }, []);\n\n  const { onEvent: trackEvent } = useUIContext();\n\n  const getAudioBuffer = useCallback(\n    async (url: string, name: string) => {\n      try {\n        const response = await fetch(url);\n        const arrayBuffer = await response.arrayBuffer();\n        const audioBuffer = await context.decodeAudioData(arrayBuffer);\n\n        setAudioBuffers(prev => ({ ...prev, [name]: audioBuffer }));\n      } catch (e) {\n        trackEvent('audio_fetch_failed', { error: e });\n      }\n    },\n    [context, trackEvent],\n  );\n\n  useEffect(() => {\n    audioUrls.forEach(({ url, name }) => {\n      getAudioBuffer(url, name);\n    });\n\n    return () => {\n      try {\n        context.close();\n      } catch (e) {\n        trackEvent('audio_context_closing_failed', { error: e });\n      }\n    };\n  }, [audioUrls, context, getAudioBuffer, trackEvent]);\n\n  const playSound = useCallback(\n    (name: string) => {\n      const buffer = audioBuffers[name];\n\n      if (!buffer) {\n        trackEvent('audio_buffer_not_found', { name });\n\n        return;\n      }\n\n      const source = context.createBufferSource();\n\n      source.buffer = buffer;\n      source.connect(context.destination);\n      source.start();\n    },\n    [audioBuffers, context, trackEvent],\n  );\n\n  return playSound;\n};\n\nexport default useAudioPlayer;\n"],"names":["useAudioPlayer","audioUrls","audioBuffers","setAudioBuffers","useState","context","useMemo","trackEvent","useUIContext","getAudioBuffer","useCallback","url","name","arrayBuffer","audioBuffer","prev","e","useEffect","buffer","source"],"mappings":";;AAUM,MAAAA,IAAiB,CAACC,MAA+C;AACrE,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAA6C,CAAE,CAAA,GAEjFC,IAAUC,EAAQ,MACD,KAAK,gBAAgB,OAAO,oBAAoB,GAGpE,CAAE,CAAA,GAEC,EAAE,SAASC,EAAW,IAAIC,EAAa,GAEvCC,IAAiBC;AAAA,IACrB,OAAOC,GAAaC,MAAiB;AAC/B,UAAA;AAEI,cAAAC,IAAc,OADH,MAAM,MAAMF,CAAG,GACG,eAC7BG,IAAc,MAAMT,EAAQ,gBAAgBQ,CAAW;AAE7C,QAAAV,EAAA,CAAAY,OAAS,EAAE,GAAGA,GAAM,CAACH,CAAI,GAAGE,EAAc,EAAA;AAAA,eACnDE,GAAG;AACV,QAAAT,EAAW,sBAAsB,EAAE,OAAOS,EAAG,CAAA;AAAA,MAC/C;AAAA,IACF;AAAA,IACA,CAACX,GAASE,CAAU;AAAA,EAAA;AAGtB,SAAAU,EAAU,OACRhB,EAAU,QAAQ,CAAC,EAAE,KAAAU,GAAK,MAAAC,QAAW;AACnC,IAAAH,EAAeE,GAAKC,CAAI;AAAA,EAAA,CACzB,GAEM,MAAM;AACP,QAAA;AACF,MAAAP,EAAQ,MAAM;AAAA,aACPW,GAAG;AACV,MAAAT,EAAW,gCAAgC,EAAE,OAAOS,EAAG,CAAA;AAAA,IACzD;AAAA,EAAA,IAED,CAACf,GAAWI,GAASI,GAAgBF,CAAU,CAAC,GAEjCG;AAAA,IAChB,CAACE,MAAiB;AACV,YAAAM,IAAShB,EAAaU,CAAI;AAEhC,UAAI,CAACM,GAAQ;AACA,QAAAX,EAAA,0BAA0B,EAAE,MAAAK,EAAA,CAAM;AAE7C;AAAA,MACF;AAEM,YAAAO,IAASd,EAAQ;AAEvB,MAAAc,EAAO,SAASD,GACTC,EAAA,QAAQd,EAAQ,WAAW,GAClCc,EAAO,MAAM;AAAA,IACf;AAAA,IACA,CAACjB,GAAcG,GAASE,CAAU;AAAA,EAAA;AAItC;"}
+{"version":3,"file":"use-audio-player.js","sources":["../../../src/features/hooks/use-audio-player.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { useUIContext } from '../ui/context/context';\n\ndeclare global {\n  interface Window {\n    webkitAudioContext?: AudioContext;\n  }\n}\n\nconst useAudioPlayer = (audioUrls: { url: string; name: string }[]) => {\n  const [audioBuffers, setAudioBuffers] = useState<Record<string, AudioBuffer | null>>({});\n\n  const context = useMemo(() => {\n    const Ctx = window.AudioContext || window.webkitAudioContext;\n\n    if (Ctx) {\n      return new Ctx();\n    }\n\n    return null;\n  }, []);\n\n  const { onEvent: trackEvent } = useUIContext();\n\n  const getAudioBuffer = useCallback(\n    async (url: string, name: string) => {\n      if (!context) {\n        trackEvent('audio_context_not_found', { name });\n\n        return;\n      }\n\n      try {\n        const response = await fetch(url);\n        const arrayBuffer = await response.arrayBuffer();\n        const audioBuffer = await context.decodeAudioData(arrayBuffer);\n\n        setAudioBuffers(prev => ({ ...prev, [name]: audioBuffer }));\n      } catch (e) {\n        trackEvent('audio_fetch_failed', { error: e });\n      }\n    },\n    [context, trackEvent],\n  );\n\n  useEffect(() => {\n    audioUrls.forEach(({ url, name }) => {\n      getAudioBuffer(url, name);\n    });\n\n    return () => {\n      try {\n        if (context && (context.state === 'running' || context.state === 'suspended')) {\n          context.close();\n        }\n      } catch (e) {\n        trackEvent('audio_context_closing_failed', { error: e });\n      }\n    };\n  }, [audioUrls, context, getAudioBuffer, trackEvent]);\n\n  const playSound = useCallback(\n    (name: string) => {\n      const buffer = audioBuffers[name];\n\n      if (!context) {\n        trackEvent('audio_context_not_found', { name });\n\n        return;\n      }\n\n      if (!buffer) {\n        trackEvent('audio_buffer_not_found', { name });\n\n        return;\n      }\n\n      const source = context?.createBufferSource();\n\n      source.buffer = buffer;\n      source.connect(context.destination);\n      source.start();\n    },\n    [audioBuffers, context, trackEvent],\n  );\n\n  return playSound;\n};\n\nexport default useAudioPlayer;\n"],"names":["useAudioPlayer","audioUrls","audioBuffers","setAudioBuffers","useState","context","useMemo","Ctx","trackEvent","useUIContext","getAudioBuffer","useCallback","url","name","arrayBuffer","audioBuffer","prev","e","useEffect","buffer","source"],"mappings":";;AAUM,MAAAA,IAAiB,CAACC,MAA+C;AACrE,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAA6C,CAAE,CAAA,GAEjFC,IAAUC,EAAQ,MAAM;AACtB,UAAAC,IAAM,OAAO,gBAAgB,OAAO;AAE1C,WAAIA,IACK,IAAIA,EAAI,IAGV;AAAA,EACT,GAAG,CAAE,CAAA,GAEC,EAAE,SAASC,EAAW,IAAIC,EAAa,GAEvCC,IAAiBC;AAAA,IACrB,OAAOC,GAAaC,MAAiB;AACnC,UAAI,CAACR,GAAS;AACD,QAAAG,EAAA,2BAA2B,EAAE,MAAAK,EAAA,CAAM;AAE9C;AAAA,MACF;AAEI,UAAA;AAEI,cAAAC,IAAc,OADH,MAAM,MAAMF,CAAG,GACG,eAC7BG,IAAc,MAAMV,EAAQ,gBAAgBS,CAAW;AAE7C,QAAAX,EAAA,CAAAa,OAAS,EAAE,GAAGA,GAAM,CAACH,CAAI,GAAGE,EAAc,EAAA;AAAA,eACnDE,GAAG;AACV,QAAAT,EAAW,sBAAsB,EAAE,OAAOS,EAAG,CAAA;AAAA,MAC/C;AAAA,IACF;AAAA,IACA,CAACZ,GAASG,CAAU;AAAA,EAAA;AAGtB,SAAAU,EAAU,OACRjB,EAAU,QAAQ,CAAC,EAAE,KAAAW,GAAK,MAAAC,QAAW;AACnC,IAAAH,EAAeE,GAAKC,CAAI;AAAA,EAAA,CACzB,GAEM,MAAM;AACP,QAAA;AACF,MAAIR,MAAYA,EAAQ,UAAU,aAAaA,EAAQ,UAAU,gBAC/DA,EAAQ,MAAM;AAAA,aAET,GAAG;AACV,MAAAG,EAAW,gCAAgC,EAAE,OAAO,EAAG,CAAA;AAAA,IACzD;AAAA,EAAA,IAED,CAACP,GAAWI,GAASK,GAAgBF,CAAU,CAAC,GAEjCG;AAAA,IAChB,CAACE,MAAiB;AACV,YAAAM,IAASjB,EAAaW,CAAI;AAEhC,UAAI,CAACR,GAAS;AACD,QAAAG,EAAA,2BAA2B,EAAE,MAAAK,EAAA,CAAM;AAE9C;AAAA,MACF;AAEA,UAAI,CAACM,GAAQ;AACA,QAAAX,EAAA,0BAA0B,EAAE,MAAAK,EAAA,CAAM;AAE7C;AAAA,MACF;AAEM,YAAAO,IAASf,KAAA,gBAAAA,EAAS;AAExB,MAAAe,EAAO,SAASD,GACTC,EAAA,QAAQf,EAAQ,WAAW,GAClCe,EAAO,MAAM;AAAA,IACf;AAAA,IACA,CAAClB,GAAcG,GAASG,CAAU;AAAA,EAAA;AAItC;"}

package/dist/features/worksheet/worksheet/question-tips.js

@@ -1,39 +1,39 @@
 import { jsx as n, jsxs as $ } from "react/jsx-runtime";
-import { memo as g, useRef as u, useState as C, useMemo as E, useCallback as T, useLayoutEffect as k, useEffect as I } from "react";
+import { memo as g, useRef as f, useState as C, useMemo as E, useCallback as T, useLayoutEffect as k, useEffect as I } from "react";
 import l from "styled-components";
 import w from "../../../assets/line-icons/icons/up.js";
 import y from "../../ui/buttons/clickable/clickable.js";
 import p from "../../ui/layout/flex-view.js";
-import { ACTION_BAR_HEIGHT as f } from "./constants.js";
+import { ACTION_BAR_HEIGHT as u } from "./constants.js";
 import { CustomElement as _ } from "./worksheet-question/worksheet-question-styled.js";
 const R = l(p)(({ $isExpanded: r, theme: t }) => {
-  const { layout: a, colors: e, zIndex: d } = t;
+  const { layout: a, colors: o, zIndex: d } = t;
   return `
     position: absolute;
     bottom: 0px;
     z-index: ${d.QUESTION_TIPS};
-    max-height: calc(${a.gutter * 2}px + ${f}px);
+    max-height: calc(${a.gutter * 2}px + ${u}px);
     
     border-radius: 6px 6px 0px 0px;
-    background: ${e.REAL_BLACK_60};
+    background: ${o.REAL_BLACK_60};
     backdrop-filter: blur(8px);
     align-self: center;
     
     ${r && `
-        max-height: calc(${a.gutter * 15.625}px + ${f}px);
+        max-height: calc(${a.gutter * 15.625}px + ${u}px);
         overflow-y: auto;
 
         @supports selector(::-webkit-scrollbar) {
           &::-webkit-scrollbar {
             border-top-right-radius: 6px;
             width: 8px;
-            background-color: ${e.WHITE};
+            background-color: ${o.WHITE};
           }
   
           &::-webkit-scrollbar-thumb {
             border-top-right-radius: 6px;
             border-bottom-right-radius: 6px;
-            background: ${e.REAL_BLACK_60};
+            background: ${o.REAL_BLACK_60};
           }
         }
       `}
@@ -47,7 +47,7 @@ const R = l(p)(({ $isExpanded: r, theme: t }) => {
 `, H = l(_)(
   ({ theme: r, $isExpanded: t }) => `
     color: ${r.colors.WHITE};
-    padding: 0px 0px ${f}px;
+    padding: 0px 0px ${u}px;
     ${t ? "" : "& > * { display: inline; }"}
     font-family: 'UntitledSans-Regular';
 
@@ -66,13 +66,15 @@ const R = l(p)(({ $isExpanded: r, theme: t }) => {
     transition: transform 0.3s ease;
     color: ${t.colors.WHITE};
     cursor: pointer;
-  `), G = g(({ width: r, question: t, userType: a, learnosity: e }) => {
-  const d = u(null), c = u(null), m = u(""), [i, x] = C(!1), { teacher_tips: o } = (t == null ? void 0 : t.metadata) || {}, s = E(() => o == null ? void 0 : o.toString(), [o]), b = T(() => {
+  `), G = g(({ width: r, question: t, userType: a, learnosity: o }) => {
+  const d = f(null), c = f(null), m = f(""), [i, x] = C(!1), { teacher_tips: e } = (t == null ? void 0 : t.metadata) || {};
+  e && o.renderMath("mathjax");
+  const s = E(() => e == null ? void 0 : e.toString(), [e]), b = T(() => {
     m.current && c.current && x((h) => !h);
   }, []);
   return k(() => {
-    c.current && o && (m.current = c.current.textContent, e.renderMath("mathjax"));
-  }, [e, o]), I(() => {
+    c.current && e && (m.current = c.current.textContent);
+  }, [o, e]), I(() => {
     s || x(!1);
   }, [s]), a !== "TEACHER" || !s ? null : /* @__PURE__ */ n(R, { ref: d, $width: r, $isExpanded: i, children: /* @__PURE__ */ n(y, { label: "Teacher Tip", onClick: i ? void 0 : b, children: /* @__PURE__ */ $(A, { $flexDirection: "row", $flexGap: 10, $justifyContent: "space-between", children: [
     /* @__PURE__ */ n(p, { $flexDirection: "row", $flexGap: 5, children: /* @__PURE__ */ n(

package/dist/features/worksheet/worksheet/question-tips.js.map

@@ -1 +1 @@
-{"version":3,"file":"question-tips.js","sources":["../../../../src/features/worksheet/worksheet/question-tips.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { ILearnosity, IWorksheetQuestion } from './worksheet-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport UpIcon from '../../../assets/line-icons/icons/up';\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { ACTION_BAR_HEIGHT } from './constants';\nimport { CustomElement } from './worksheet-question/worksheet-question-styled';\n\ntype TStyledComponentProps = {\n  $isExpanded: boolean;\n};\n\nconst Wrapper = styled(FlexView)<TStyledComponentProps>(({ $isExpanded, theme }) => {\n  const { layout, colors, zIndex } = theme;\n\n  return `\n    position: absolute;\n    bottom: 0px;\n    z-index: ${zIndex.QUESTION_TIPS};\n    max-height: calc(${layout.gutter * 2}px + ${ACTION_BAR_HEIGHT}px);\n    \n    border-radius: 6px 6px 0px 0px;\n    background: ${colors.REAL_BLACK_60};\n    backdrop-filter: blur(8px);\n    align-self: center;\n    \n    ${\n      $isExpanded &&\n      `\n        max-height: calc(${layout.gutter * 15.625}px + ${ACTION_BAR_HEIGHT}px);\n        overflow-y: auto;\n\n        @supports selector(::-webkit-scrollbar) {\n          &::-webkit-scrollbar {\n            border-top-right-radius: 6px;\n            width: 8px;\n            background-color: ${colors.WHITE};\n          }\n  \n          &::-webkit-scrollbar-thumb {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            background: ${colors.REAL_BLACK_60};\n          }\n        }\n      `\n    }\n  `;\n});\n\nconst Header = styled(FlexView)`\n  padding: 8px 12px;\n\n  & * {\n    background-color: transparent !important;\n  }\n`;\n\nconst TipText = styled(CustomElement)<TStyledComponentProps>(\n  ({ theme, $isExpanded }) => `\n    color: ${theme.colors.WHITE};\n    padding: 0px 0px ${ACTION_BAR_HEIGHT}px;\n    ${$isExpanded ? '' : `& > * { display: inline; }`}\n    font-family: 'UntitledSans-Regular';\n\n    &::before {\n      content: 'CUE DON’T TELL:';\n      font-family: 'Athletics-Bold';\n      margin-right: 8px;\n      ${$isExpanded ? ` display: block; margin-bottom: 8px;` : ''}\n    }\n  `,\n);\n\nconst ChevIconWrapper = styled(FlexView)`\n  position: sticky;\n  top: 8px;\n`;\n\nconst ChevIcon = styled(UpIcon)<TStyledComponentProps>(({ $isExpanded, theme }) => {\n  return `\n    transform: rotate(${$isExpanded ? 180 : 0}deg);\n    transition: transform 0.3s ease;\n    color: ${theme.colors.WHITE};\n    cursor: pointer;\n  `;\n});\n\ninterface IQuestionTips {\n  width: number | string;\n  userType: TUserTypes;\n  learnosity: ILearnosity;\n  question?: IWorksheetQuestion;\n}\n\nconst QuestionTips: FC<IQuestionTips> = memo(({ width, question, userType, learnosity }) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tipRef = useRef<HTMLDivElement>(null);\n  const tipContentRef = useRef<string | null>('');\n\n  const [menuVisible, setMenuVisible] = useState(false);\n\n  const { teacher_tips: tips } = question?.metadata || {};\n\n  const tipsMemoized = useMemo(() => {\n    return tips?.toString();\n  }, [tips]);\n\n  const handleClick = useCallback(() => {\n    if (tipContentRef.current && tipRef.current) {\n      setMenuVisible(prev => !prev);\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    if (tipRef.current && tips) {\n      tipContentRef.current = tipRef.current.textContent;\n\n      learnosity.renderMath('mathjax');\n    }\n  }, [learnosity, tips]);\n\n  useEffect(() => {\n    if (!tipsMemoized) {\n      setMenuVisible(false);\n    }\n  }, [tipsMemoized]);\n\n  if (userType !== 'TEACHER' || !tipsMemoized) return null;\n\n  return (\n    <Wrapper ref={containerRef} $width={width} $isExpanded={menuVisible}>\n      <Clickable label=\"Teacher Tip\" onClick={!menuVisible ? handleClick : undefined}>\n        <Header $flexDirection=\"row\" $flexGap={10} $justifyContent=\"space-between\">\n          <FlexView $flexDirection=\"row\" $flexGap={5}>\n            <TipText\n              ref={tipRef}\n              dangerouslySetInnerHTML={{ __html: tipsMemoized }}\n              $isExpanded={menuVisible}\n            />\n          </FlexView>\n\n          <ChevIconWrapper $width={20} $height={20}>\n            <ChevIcon $isExpanded={menuVisible} onClick={menuVisible ? handleClick : undefined} />\n          </ChevIconWrapper>\n        </Header>\n      </Clickable>\n    </Wrapper>\n  );\n});\n\nexport default QuestionTips;\n"],"names":["Wrapper","styled","FlexView","$isExpanded","theme","layout","colors","zIndex","ACTION_BAR_HEIGHT","Header","TipText","CustomElement","ChevIconWrapper","ChevIcon","UpIcon","QuestionTips","memo","width","question","userType","learnosity","containerRef","useRef","tipRef","tipContentRef","menuVisible","setMenuVisible","useState","tips","tipsMemoized","useMemo","handleClick","useCallback","prev","useLayoutEffect","useEffect","jsx","Clickable","jsxs"],"mappings":"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"}
+{"version":3,"file":"question-tips.js","sources":["../../../../src/features/worksheet/worksheet/question-tips.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { ILearnosity, IWorksheetQuestion } from './worksheet-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport UpIcon from '../../../assets/line-icons/icons/up';\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { ACTION_BAR_HEIGHT } from './constants';\nimport { CustomElement } from './worksheet-question/worksheet-question-styled';\n\ntype TStyledComponentProps = {\n  $isExpanded: boolean;\n};\n\nconst Wrapper = styled(FlexView)<TStyledComponentProps>(({ $isExpanded, theme }) => {\n  const { layout, colors, zIndex } = theme;\n\n  return `\n    position: absolute;\n    bottom: 0px;\n    z-index: ${zIndex.QUESTION_TIPS};\n    max-height: calc(${layout.gutter * 2}px + ${ACTION_BAR_HEIGHT}px);\n    \n    border-radius: 6px 6px 0px 0px;\n    background: ${colors.REAL_BLACK_60};\n    backdrop-filter: blur(8px);\n    align-self: center;\n    \n    ${\n      $isExpanded &&\n      `\n        max-height: calc(${layout.gutter * 15.625}px + ${ACTION_BAR_HEIGHT}px);\n        overflow-y: auto;\n\n        @supports selector(::-webkit-scrollbar) {\n          &::-webkit-scrollbar {\n            border-top-right-radius: 6px;\n            width: 8px;\n            background-color: ${colors.WHITE};\n          }\n  \n          &::-webkit-scrollbar-thumb {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            background: ${colors.REAL_BLACK_60};\n          }\n        }\n      `\n    }\n  `;\n});\n\nconst Header = styled(FlexView)`\n  padding: 8px 12px;\n\n  & * {\n    background-color: transparent !important;\n  }\n`;\n\nconst TipText = styled(CustomElement)<TStyledComponentProps>(\n  ({ theme, $isExpanded }) => `\n    color: ${theme.colors.WHITE};\n    padding: 0px 0px ${ACTION_BAR_HEIGHT}px;\n    ${$isExpanded ? '' : `& > * { display: inline; }`}\n    font-family: 'UntitledSans-Regular';\n\n    &::before {\n      content: 'CUE DON’T TELL:';\n      font-family: 'Athletics-Bold';\n      margin-right: 8px;\n      ${$isExpanded ? ` display: block; margin-bottom: 8px;` : ''}\n    }\n  `,\n);\n\nconst ChevIconWrapper = styled(FlexView)`\n  position: sticky;\n  top: 8px;\n`;\n\nconst ChevIcon = styled(UpIcon)<TStyledComponentProps>(({ $isExpanded, theme }) => {\n  return `\n    transform: rotate(${$isExpanded ? 180 : 0}deg);\n    transition: transform 0.3s ease;\n    color: ${theme.colors.WHITE};\n    cursor: pointer;\n  `;\n});\n\ninterface IQuestionTips {\n  width: number | string;\n  userType: TUserTypes;\n  learnosity: ILearnosity;\n  question?: IWorksheetQuestion;\n}\n\nconst QuestionTips: FC<IQuestionTips> = memo(({ width, question, userType, learnosity }) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tipRef = useRef<HTMLDivElement>(null);\n  const tipContentRef = useRef<string | null>('');\n\n  const [menuVisible, setMenuVisible] = useState(false);\n\n  const { teacher_tips: tips } = question?.metadata || {};\n\n  if (tips) {\n    learnosity.renderMath('mathjax');\n  }\n\n  const tipsMemoized = useMemo(() => {\n    return tips?.toString();\n  }, [tips]);\n\n  const handleClick = useCallback(() => {\n    if (tipContentRef.current && tipRef.current) {\n      setMenuVisible(prev => !prev);\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    if (tipRef.current && tips) {\n      tipContentRef.current = tipRef.current.textContent;\n    }\n  }, [learnosity, tips]);\n\n  useEffect(() => {\n    if (!tipsMemoized) {\n      setMenuVisible(false);\n    }\n  }, [tipsMemoized]);\n\n  if (userType !== 'TEACHER' || !tipsMemoized) return null;\n\n  return (\n    <Wrapper ref={containerRef} $width={width} $isExpanded={menuVisible}>\n      <Clickable label=\"Teacher Tip\" onClick={!menuVisible ? handleClick : undefined}>\n        <Header $flexDirection=\"row\" $flexGap={10} $justifyContent=\"space-between\">\n          <FlexView $flexDirection=\"row\" $flexGap={5}>\n            <TipText\n              ref={tipRef}\n              dangerouslySetInnerHTML={{ __html: tipsMemoized }}\n              $isExpanded={menuVisible}\n            />\n          </FlexView>\n\n          <ChevIconWrapper $width={20} $height={20}>\n            <ChevIcon $isExpanded={menuVisible} onClick={menuVisible ? handleClick : undefined} />\n          </ChevIconWrapper>\n        </Header>\n      </Clickable>\n    </Wrapper>\n  );\n});\n\nexport default QuestionTips;\n"],"names":["Wrapper","styled","FlexView","$isExpanded","theme","layout","colors","zIndex","ACTION_BAR_HEIGHT","Header","TipText","CustomElement","ChevIconWrapper","ChevIcon","UpIcon","QuestionTips","memo","width","question","userType","learnosity","containerRef","useRef","tipRef","tipContentRef","menuVisible","setMenuVisible","useState","tips","tipsMemoized","useMemo","handleClick","useCallback","prev","useLayoutEffect","useEffect","jsx","Clickable","jsxs"],"mappings":";;;;;;;;AAiBA,MAAMA,IAAUC,EAAOC,CAAQ,EAAyB,CAAC,EAAE,aAAAC,GAAa,OAAAC,QAAY;AAClF,QAAM,EAAE,QAAAC,GAAQ,QAAAC,GAAQ,QAAAC,EAAA,IAAWH;AAE5B,SAAA;AAAA;AAAA;AAAA,eAGMG,EAAO,aAAa;AAAA,uBACZF,EAAO,SAAS,CAAC,QAAQG,CAAiB;AAAA;AAAA;AAAA,kBAG/CF,EAAO,aAAa;AAAA;AAAA;AAAA;AAAA,MAKhCH,KACA;AAAA,2BACqBE,EAAO,SAAS,MAAM,QAAQG,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAO1CF,EAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMlBA,EAAO,aAAa;AAAA;AAAA;AAAA,OAI1C;AAAA;AAEJ,CAAC,GAEKG,IAASR,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQxBQ,IAAUT,EAAOU,CAAa;AAAA,EAClC,CAAC,EAAE,OAAAP,GAAO,aAAAD,EAAA,MAAkB;AAAA,aACjBC,EAAM,OAAO,KAAK;AAAA,uBACRI,CAAiB;AAAA,MAClCL,IAAc,KAAK,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAO7CA,IAAc,yCAAyC,EAAE;AAAA;AAAA;AAGjE,GAEMS,IAAkBX,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAKjCW,IAAWZ,EAAOa,CAAM,EAAyB,CAAC,EAAE,aAAAX,GAAa,OAAAC,QAC9D;AAAA,wBACeD,IAAc,MAAM,CAAC;AAAA;AAAA,aAEhCC,EAAM,OAAO,KAAK;AAAA;AAAA,GAG9B,GASKW,IAAkCC,EAAK,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,UAAAC,GAAU,YAAAC,QAAiB;AACpF,QAAAC,IAAeC,EAAuB,IAAI,GAC1CC,IAASD,EAAuB,IAAI,GACpCE,IAAgBF,EAAsB,EAAE,GAExC,CAACG,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAE9C,EAAE,cAAcC,EAAA,KAASV,KAAA,gBAAAA,EAAU,aAAY,CAAA;AAErD,EAAIU,KACFR,EAAW,WAAW,SAAS;AAG3B,QAAAS,IAAeC,EAAQ,MACpBF,KAAA,gBAAAA,EAAM,YACZ,CAACA,CAAI,CAAC,GAEHG,IAAcC,EAAY,MAAM;AAChC,IAAAR,EAAc,WAAWD,EAAO,WACnBG,EAAA,CAAAO,MAAQ,CAACA,CAAI;AAAA,EAEhC,GAAG,CAAE,CAAA;AAcL,SAZAC,EAAgB,MAAM;AAChB,IAAAX,EAAO,WAAWK,MACNJ,EAAA,UAAUD,EAAO,QAAQ;AAAA,EACzC,GACC,CAACH,GAAYQ,CAAI,CAAC,GAErBO,EAAU,MAAM;AACd,IAAKN,KACHH,EAAe,EAAK;AAAA,EACtB,GACC,CAACG,CAAY,CAAC,GAEbV,MAAa,aAAa,CAACU,IAAqB,OAGlD,gBAAAO,EAACpC,GAAQ,EAAA,KAAKqB,GAAc,QAAQJ,GAAO,aAAaQ,GACtD,UAAC,gBAAAW,EAAAC,GAAA,EAAU,OAAM,eAAc,SAAUZ,IAA4B,SAAdM,GACrD,UAAC,gBAAAO,EAAA7B,GAAA,EAAO,gBAAe,OAAM,UAAU,IAAI,iBAAgB,iBACzD,UAAA;AAAA,IAAA,gBAAA2B,EAAClC,GAAS,EAAA,gBAAe,OAAM,UAAU,GACvC,UAAA,gBAAAkC;AAAA,MAAC1B;AAAA,MAAA;AAAA,QACC,KAAKa;AAAA,QACL,yBAAyB,EAAE,QAAQM,EAAa;AAAA,QAChD,aAAaJ;AAAA,MAAA;AAAA,IAAA,GAEjB;AAAA,IAEC,gBAAAW,EAAAxB,GAAA,EAAgB,QAAQ,IAAI,SAAS,IACpC,UAAA,gBAAAwB,EAACvB,GAAS,EAAA,aAAaY,GAAa,SAASA,IAAcM,IAAc,OAAW,CAAA,GACtF;AAAA,EAAA,GACF,GACF,EACF,CAAA;AAEJ,CAAC;"}

package/dist/index.d.ts

@@ -5224,6 +5224,33 @@ export declare type TInclassMessage = {
     eventPayload: {
         chapterId: string;
     };
+} | {
+    eventName: 'TEACHER_BADGE';
+    eventPayload: {
+        data: {
+            selectedBadge: Record<string, string>;
+            badgeId: string;
+        };
+    };
+} | {
+    eventName: 'STUDENT_BADGE';
+    eventPayload: {
+        studentId: string;
+        badges: unknown[];
+    };
+} | {
+    eventName: 'OPEN_ADDITIONAL_CLASS_CONFIRMED_MODAL';
+    eventPayload: {
+        studentId: string;
+        teacherId: string;
+        timezone: string;
+        timestamp: null | string;
+    };
+} | {
+    eventName: 'DEMO_STUDENT_PROGRAM_CHANGE';
+    eventPayload: {
+        studentId: string;
+    };
 };
 
 export declare type TInputShapes = 'border' | 'borderLess' | 'curved';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.1.39",
+  "version": "3.1.41-as2",
   "type": "module",
   "files": [
     "dist"