@cuemath/leap 3.0.10 → 3.0.11-as1

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

@@ -1,20 +1,17 @@
-import { createContext as e } from "react";
-import { CANVAS_COLORS as t } from "./constants/constants.js";
-const v = e({
+import { createContext as t } from "react";
+import { CANVAS_COLORS as o } from "./constants/constants.js";
+const c = t({
   activeInstance: void 0,
   setActiveInstance: () => {
   },
   activeTool: "pen",
   setActiveTool: () => {
   },
-  activeColor: Object.keys(t)[0],
+  activeColor: Object.keys(o)[0],
   setActiveColor: () => {
-  },
-  activeSidebar: void 0,
-  setActiveSidebar: () => {
   }
 });
 export {
-  v as default
+  c as default
 };
 //# sourceMappingURL=cue-canvas-context.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cue-canvas-context.js","sources":["../../../src/features/cue-canvas/cue-canvas-context.tsx"],"sourcesContent":["import type { TPolyContextValue } from './types/context';\nimport type { TCueCanvasColors } from './types/cue-canvas';\n\nimport { createContext } from 'react';\n\nimport { CANVAS_COLORS } from './constants/constants';\n\nconst PolyContext = createContext<TPolyContextValue>({\n  activeInstance: undefined,\n  setActiveInstance: () => undefined,\n  activeTool: 'pen',\n  setActiveTool: () => undefined,\n  activeColor: Object.keys(CANVAS_COLORS)[0] as TCueCanvasColors,\n  setActiveColor: () => undefined,\n  activeSidebar: undefined,\n  setActiveSidebar: () => undefined,\n});\n\nexport default PolyContext;\n"],"names":["PolyContext","createContext","CANVAS_COLORS"],"mappings":";;AAOA,MAAMA,IAAcC,EAAiC;AAAA,EACnD,gBAAgB;AAAA,EAChB,mBAAmB,MAAM;AAAA;AAAA,EACzB,YAAY;AAAA,EACZ,eAAe,MAAM;AAAA;AAAA,EACrB,aAAa,OAAO,KAAKC,CAAa,EAAE,CAAC;AAAA,EACzC,gBAAgB,MAAM;AAAA;AAAA,EACtB,eAAe;AAAA,EACf,kBAAkB,MAAM;AAAA;AAC1B,CAAC;"}
+{"version":3,"file":"cue-canvas-context.js","sources":["../../../src/features/cue-canvas/cue-canvas-context.tsx"],"sourcesContent":["import type { TPolyContextValue } from './types/context';\nimport type { TCueCanvasColors } from './types/cue-canvas';\n\nimport { createContext } from 'react';\n\nimport { CANVAS_COLORS } from './constants/constants';\n\nconst PolyContext = createContext<TPolyContextValue>({\n  activeInstance: undefined,\n  setActiveInstance: () => undefined,\n  activeTool: 'pen',\n  setActiveTool: () => undefined,\n  activeColor: Object.keys(CANVAS_COLORS)[0] as TCueCanvasColors,\n  setActiveColor: () => undefined,\n});\n\nexport default PolyContext;\n"],"names":["PolyContext","createContext","CANVAS_COLORS"],"mappings":";;AAOA,MAAMA,IAAcC,EAAiC;AAAA,EACnD,gBAAgB;AAAA,EAChB,mBAAmB,MAAM;AAAA;AAAA,EACzB,YAAY;AAAA,EACZ,eAAe,MAAM;AAAA;AAAA,EACrB,aAAa,OAAO,KAAKC,CAAa,EAAE,CAAC;AAAA,EACzC,gBAAgB,MAAM;AAAA;AACxB,CAAC;"}

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

@@ -1,38 +1,49 @@
 var d = Object.defineProperty;
-var u = (l, t, e) => t in l ? d(l, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[t] = e;
-var s = (l, t, e) => u(l, typeof t != "symbol" ? t + "" : t, e);
+var u = (r, t, e) => t in r ? d(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var s = (r, t, e) => u(r, typeof t != "symbol" ? t + "" : t, e);
 import v from "../../node_modules/lodash.debounce/index.js";
-import { removeTileButton as f, removeMask as g, checkTextOrEquationTool as y, getReverseMap as m, getToolAndSubtool as C } from "./cue-canvas-helpers.js";
-class I {
-  constructor(t, e, i, n, a, o, r, h, c, p) {
+import { removeTileButton as f, removeMask as g, checkTextOrEquationTool as y, getReverseMap as C, getToolAndSubtool as m } from "./cue-canvas-helpers.js";
+class b {
+  constructor({
+    onPublish: t,
+    onSubscribe: e,
+    onUpdateActiveTool: a,
+    onUpdateHeight: n,
+    uploadImageToS3: o,
+    height: i,
+    userId: l,
+    canvasId: h,
+    userType: c,
+    renderAs: p
+  }) {
     s(this, "polycanvas");
     s(this, "publish");
     s(this, "height");
     s(this, "onUpdateActiveTool");
     s(this, "onUpdateHeight");
     s(this, "userId");
-    s(this, "responseId");
+    s(this, "canvasId");
     s(this, "userType");
     s(this, "renderAs");
     s(this, "fileInput", null);
     s(this, "debouncedViewportChange");
     s(this, "uploadImageToS3");
-    s(this, "publishToChannel", (t, e, i) => {
+    s(this, "publishToChannel", (t, e, a) => {
       this.publish && this.publish({
         eventName: "cue_canvas_changed",
         eventPayload: {
           data: t,
           height: this.height,
           userId: this.userId,
-          responseId: this.responseId,
+          responseId: this.canvasId,
           gridName: e,
-          dimension: i
+          dimension: a
         }
       });
     });
     s(this, "onChange", (t) => {
-      const i = Object.fromEntries(t.entries());
-      y(i) && this.onUpdateActiveTool("move"), this.publishToChannel(i);
+      const a = Object.fromEntries(t.entries());
+      y(a) && this.onUpdateActiveTool("move"), this.publishToChannel(a);
     });
     s(this, "undo", () => {
       if (!this.polycanvas)
@@ -40,7 +51,7 @@ class I {
       const t = this.polycanvas.undo();
       if (!t)
         return;
-      const e = m(t);
+      const e = C(t);
       this.onChange(e);
     });
     s(this, "redo", () => {
@@ -69,8 +80,8 @@ class I {
       const e = document.createElement("a");
       e.href = t, e.download = `canvas-drawing-${Date.now()}.png`, e.click();
     });
-    s(this, "uploadFileToCanvas", async (t) => new Promise((e, i) => {
-      this.uploadImageToS3 ? e(this.uploadImageToS3(t)) : i(new Error("Upload function not provided"));
+    s(this, "uploadFileToCanvas", async (t) => new Promise((e, a) => {
+      this.uploadImageToS3 ? e(this.uploadImageToS3(t)) : a(new Error("Upload function not provided"));
     }));
     s(this, "onViewPortChange", (t) => {
       if (!this.publish) return;
@@ -82,30 +93,30 @@ class I {
     });
     s(this, "addImageToCanvas", async (t) => {
       var h;
-      const e = t.target, i = (h = e.files) == null ? void 0 : h[0];
-      if (!i || !this.polycanvas || !this.uploadImageToS3) return;
-      const n = await this.uploadImageToS3(i), a = this.polycanvas.getViewport(), o = {
+      const e = t.target, a = (h = e.files) == null ? void 0 : h[0];
+      if (!a || !this.polycanvas || !this.uploadImageToS3) return;
+      const n = await this.uploadImageToS3(a), o = this.polycanvas.getViewport(), i = {
         name: "image",
         href: n,
-        x: a.x + 88,
-        y: a.y + 88
-      }, r = this.polycanvas.add({
-        ...o
+        x: o.x + 88,
+        y: o.y + 88
+      }, l = this.polycanvas.add({
+        ...i
       });
       this.publishToChannel({
-        [r]: [void 0, { ...o, status: "locked" }]
+        [l]: [void 0, { ...i, status: "locked" }]
       }), e.value = "";
     });
-    s(this, "updateCanvasConfig", (t, e, i) => {
-      this.polycanvas && (t > this.height && this.updateHeight(t), e && this.polycanvas.setViewport(e.x, e.y, e.zoom), i && this.polycanvas.setOptions({
-        grid: i
+    s(this, "updateCanvasConfig", (t, e, a) => {
+      this.polycanvas && (t > this.height && this.updateHeight(t), e && this.polycanvas.setViewport(e.x, e.y, e.zoom), a && this.polycanvas.setOptions({
+        grid: a
       }));
     });
     s(this, "updateCanvas", ({ data: t, userId: e }) => {
-      const i = this.userType === "TEACHER" || e === this.userId;
-      Object.entries(t).forEach(([n, a]) => {
-        var o, r, h;
-        !a[0] && a[1] ? (o = this.polycanvas) == null || o.add({ ...a[1], cannotEdit: !i }, n) : a[0] && !a[1] ? (r = this.polycanvas) == null || r.delete(n) : a[0] && a[1] && ((h = this.polycanvas) == null || h.update(n, { ...a[1] }));
+      const a = this.userType === "TEACHER" || e === this.userId;
+      Object.entries(t).forEach(([n, o]) => {
+        var i, l, h;
+        !o[0] && o[1] ? (i = this.polycanvas) == null || i.add({ ...o[1], cannotEdit: !a }, n) : o[0] && !o[1] ? (l = this.polycanvas) == null || l.delete(n) : o[0] && o[1] && ((h = this.polycanvas) == null || h.update(n, { ...o[1] }));
       });
     });
     s(this, "toggleTiles", (t) => {
@@ -121,31 +132,44 @@ class I {
       }), this.publishToChannel({}, t));
     });
     s(this, "lockSelectedTiles", () => {
-      var i, n;
-      const { tiles: t } = ((i = this.polycanvas) == null ? void 0 : i.serialize()) || {}, e = ((n = this.polycanvas) == null ? void 0 : n.getSelection()) || [];
+      var a, n;
+      const { tiles: t } = ((a = this.polycanvas) == null ? void 0 : a.serialize()) || {}, e = ((n = this.polycanvas) == null ? void 0 : n.getSelection()) || [];
       if (e.length > 0 && t) {
-        const a = {};
-        e.forEach((o) => {
+        const o = {};
+        e.forEach((i) => {
           var h, c, p;
-          if (!((h = t[o]) != null && h.name)) return;
-          const r = { ...t[o], status: "locked" };
-          (c = this.polycanvas) == null || c.update(o, r), (p = t[o]) != null && p.name && (a[o] = [t[o], r]);
-        }), this.publishToChannel(a);
+          if (!((h = t[i]) != null && h.name)) return;
+          const l = { ...t[i], status: "locked" };
+          (c = this.polycanvas) == null || c.update(i, l), (p = t[i]) != null && p.name && (o[i] = [t[i], l]);
+        }), this.publishToChannel(o);
       }
     });
     s(this, "unlockAllTiles", () => {
       if (!this.polycanvas) return;
       const { tiles: t } = this.polycanvas.serialize(), e = {};
-      t && Object.entries(t).length > 0 && (Object.entries(t).forEach(([i, n]) => {
-        var o;
+      t && Object.entries(t).length > 0 && (Object.entries(t).forEach(([a, n]) => {
+        var i;
         if (n.status !== "locked") return;
-        const a = { ...n, status: void 0 };
-        (o = this.polycanvas) == null || o.update(i, a), e[i] = [n, a];
+        const o = { ...n, status: void 0 };
+        (i = this.polycanvas) == null || i.update(a, o), e[a] = [n, o];
       }), this.publishToChannel(e));
     });
+    s(this, "replaceCanvas", (t) => {
+      if (!this.polycanvas) return;
+      const { data: e, gridName: a } = t;
+      this.polycanvas.clear(), a && this.polycanvas.setOptions({
+        grid: a
+      }), Object.entries(e).forEach(([n, o]) => {
+        var i;
+        if (!o[0] && o[1]) {
+          (i = this.polycanvas) == null || i.add({ ...o[1] }, n);
+          return;
+        }
+      }), this.publishToChannel(e, a);
+    });
     s(this, "setTool", (t) => {
       if (this.polycanvas) {
-        const [e, i] = C(t);
+        const [e, a] = m(t);
         switch (e) {
           case "clearAll":
             this.clearCanvas();
@@ -180,7 +204,7 @@ class I {
           case "grid":
             break;
           default:
-            this.polycanvas.setTool(e, i);
+            this.polycanvas.setTool(e, a);
         }
       }
     });
@@ -198,8 +222,8 @@ class I {
      */
     s(this, "update", (t) => {
       if (Array.isArray(t)) {
-        const e = t.map((o) => o.height).filter(Boolean), i = Math.max(...e), n = t.map((o) => o.dimension).filter(Boolean)[t.length - 1], a = t.map((o) => o.gridName).filter(Boolean)[t.length - 1];
-        this.updateCanvasConfig(i, n, a), t.forEach((o) => this.updateCanvas(o));
+        const e = t.map((i) => i.height).filter(Boolean), a = Math.max(...e), n = t.map((i) => i.dimension).filter(Boolean)[t.length - 1], o = t.map((i) => i.gridName).filter(Boolean)[t.length - 1];
+        this.updateCanvasConfig(a, n, o), t.forEach((i) => this.updateCanvas(i));
       } else
         this.updateCanvasConfig(t.height, t.dimension, t == null ? void 0 : t.gridName), this.updateCanvas(t);
     });
@@ -207,26 +231,27 @@ class I {
       this.polycanvas && this.polycanvas.setColor(t);
     });
     s(this, "updateHeight", (t) => {
-      this.height = t, this.onUpdateHeight(t);
+      var e;
+      this.height = t, (e = this.onUpdateHeight) == null || e.call(this, t);
     });
     s(this, "destroy", () => {
       this.polycanvas && (this.polycanvas.off("change", this.onChange), this.polycanvas.destroy(), this.debouncedViewportChange.cancel(), this.renderAs === "whiteboard" && this.userType === "TEACHER" && this.polycanvas.off("viewport", this.debouncedViewportChange), this.polycanvas = void 0, this.fileInput && this.fileInput.parentNode && (this.fileInput.parentNode.removeChild(this.fileInput), this.fileInput = null));
     });
-    this.onUpdateHeight = n, this.onUpdateActiveTool = i, this.height = o, this.uploadImageToS3 = a, this.userId = r, this.responseId = h, this.publish = t, this.userType = c, this.renderAs = p, this.debouncedViewportChange = v(this.onViewPortChange, 300), e(this.responseId, this.update);
+    this.onUpdateHeight = n, this.onUpdateActiveTool = a, this.height = i, this.uploadImageToS3 = o, this.userId = l, this.canvasId = h, this.publish = t, this.userType = c, this.renderAs = p, this.debouncedViewportChange = v(this.onViewPortChange, 300), e == null || e(this.canvasId, this.update);
   }
-  async create({ canvasElementRef: t, canvasConfig: e, canvasSetting: i, initialData: n }) {
+  async create({ canvasElementRef: t, canvasConfig: e, canvasSetting: a, initialData: n }) {
     if (!t.current)
       throw new Error("PolyCanvas: Div Element Not found for canvas");
     this.polycanvas = await window.Polypad.create(t.current, {
       initial: {
         options: e
       },
-      ...i,
+      ...a,
       imageUpload: this.renderAs === "whiteboard" && this.userType === "TEACHER" ? this.uploadFileToCanvas : void 0
     }), this.renderAs === "whiteboard" && this.userType === "TEACHER" && (this.polycanvas.toggleSidebar(!1), f(t), this.polycanvas.on("viewport", this.debouncedViewportChange)), g(t), this.polycanvas.on("change", this.onChange), n && this.update(n);
   }
 }
 export {
-  I as CueCanvasCore
+  b 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  TSubscribe,\n  TCueCanvasChangeDataObject,\n} from './types/cue-canvas';\nimport type { ICreateOptions } from './types/cue-canvas';\nimport type { IPolypad, IPolyPadInstance } from './types/polypad';\n\nimport debounce from 'lodash.debounce';\n\nimport {\n  checkTextOrEquationTool,\n  getReverseMap,\n  getToolAndSubtool,\n  removeMask,\n  removeTileButton,\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 responseId: 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) => string;\n\n  constructor(\n    onPublish: TPublish,\n    onSubscribe: TSubscribe,\n    onUpdateActiveTool: (tool: TCueCanvasTool) => void,\n    onUpdateHeight: (height: number) => void,\n    uploadImageToS3: (file: File) => string,\n    height: number,\n    userId: string,\n    responseId: string,\n    userType: TUserTypes,\n    renderAs: TRenderAs,\n  ) {\n    this.onUpdateHeight = onUpdateHeight;\n    this.onUpdateActiveTool = onUpdateActiveTool;\n    this.height = height;\n    this.uploadImageToS3 = uploadImageToS3;\n    this.userId = userId;\n    this.responseId = responseId;\n    this.publish = onPublish;\n    this.userType = userType;\n    this.renderAs = renderAs;\n    this.debouncedViewportChange = debounce(this.onViewPortChange, 300);\n    onSubscribe(this.responseId, 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'\n          ? this.uploadFileToCanvas\n          : undefined,\n    });\n\n    if (this.renderAs === 'whiteboard' && this.userType === 'TEACHER') {\n      this.polycanvas.toggleSidebar(false);\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 = (\n    payload: TCueCanvasChangeDataObject,\n    gridName?: TCueCanvasGridName,\n    dimension?: IViewport,\n  ) => {\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.responseId,\n        gridName,\n        dimension,\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    }\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  private 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  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 uploadFileToCanvas = async (file: File): Promise<string> => {\n    return new Promise((resolve, reject) => {\n      this.uploadImageToS3\n        ? resolve(this.uploadImageToS3(file))\n        : reject(new Error('Upload function not provided'));\n    });\n  };\n\n  private onViewPortChange = (e: IViewport): void => {\n    if (!this.publish) return;\n\n    const data = e as IViewport;\n\n    this.publishToChannel({}, undefined, data);\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.addImageToCanvas;\n      document.body.appendChild(this.fileInput);\n    }\n\n    this.fileInput.click();\n  };\n\n  private addImageToCanvas = 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 imageBase64 = await this.uploadImageToS3(file);\n    const viewPort = this.polycanvas.getViewport();\n    const imgJson = {\n      name: 'image',\n      href: imageBase64,\n      x: viewPort.x + 88,\n      y: viewPort.y + 88,\n    };\n\n    const key = this.polycanvas.add({\n      ...imgJson,\n    });\n\n    this.publishToChannel({\n      [key]: [undefined, { ...imgJson, status: 'locked' }],\n    });\n\n    target.value = '';\n  };\n\n  private updateCanvasConfig = (\n    height: number,\n    dimension: IViewport | undefined,\n    gridName: TCueCanvasGridName | undefined,\n  ) => {\n    if (!this.polycanvas) return;\n\n    if (height > this.height) {\n      this.updateHeight(height);\n    }\n\n    if (dimension) {\n      this.polycanvas.setViewport(dimension.x, dimension.y, dimension.zoom);\n    }\n\n    if (gridName) {\n      this.polycanvas.setOptions({\n        grid: gridName,\n      });\n    }\n  };\n\n  private updateCanvas = ({ data, userId }: IActionData) => {\n    const canEditStroke = this.userType === 'TEACHER' || userId === this.userId;\n\n    Object.entries(data).forEach(([key, value]) => {\n      if (!value[0] && value[1]) {\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  };\n\n  toggleTiles = (val: boolean) => {\n    this.polycanvas?.toggleSidebar(val);\n  };\n\n  resetViewPort = () => {\n    if (this.polycanvas) {\n      this.polycanvas.resetViewport();\n    }\n  };\n\n  changeGrid = (gridName: TCueCanvasGridName) => {\n    if (!this.polycanvas) return;\n\n    this.polycanvas.setOptions({\n      grid: gridName,\n    });\n\n    this.publishToChannel({}, gridName);\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  setTool = (tool: TCueCanvasTool) => {\n    if (this.polycanvas) {\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    }\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      const lastDimension = payload.map(data => data.dimension).filter(Boolean)[payload.length - 1];\n      const lastGrid = payload.map(data => data.gridName).filter(Boolean)[payload.length - 1];\n\n      this.updateCanvasConfig(maxHeight, lastDimension, lastGrid);\n      payload.forEach(item => this.updateCanvas(item));\n    } else {\n      this.updateCanvasConfig(payload.height, payload.dimension, payload?.gridName);\n      this.updateCanvas(payload);\n    }\n  };\n\n  setColor = (color: string) => {\n    if (this.polycanvas) {\n      this.polycanvas.setColor(color);\n    }\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","responseId","userType","renderAs","__publicField","payload","gridName","dimension","e","checkTextOrEquationTool","data","undoData","getReverseMap","viewPort","image","downloadLink","file","resolve","reject","event","target","_a","imageBase64","imgJson","key","canEditStroke","value","_b","_c","val","allTiles","selectedItems","lockedTiles","updatedJson","unlockedTiles","item","tool","currTool","currSubTool","getToolAndSubtool","heights","maxHeight","lastDimension","lastGrid","color","debounce","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} from './types/cue-canvas';\nimport type { ICreateOptions } from './types/cue-canvas';\nimport type { IPolypad, IPolyPadInstance } from './types/polypad';\n\nimport debounce from 'lodash.debounce';\n\nimport {\n  checkTextOrEquationTool,\n  getReverseMap,\n  getToolAndSubtool,\n  removeMask,\n  removeTileButton,\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) => string;\n\n  constructor({\n    onPublish,\n    onSubscribe,\n    onUpdateActiveTool,\n    onUpdateHeight,\n    uploadImageToS3,\n    height,\n    userId,\n    canvasId,\n    userType,\n    renderAs,\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    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'\n          ? this.uploadFileToCanvas\n          : undefined,\n    });\n\n    if (this.renderAs === 'whiteboard' && this.userType === 'TEACHER') {\n      this.polycanvas.toggleSidebar(false);\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 = (\n    payload: TCueCanvasChangeDataObject,\n    gridName?: TCueCanvasGridName,\n    dimension?: IViewport,\n  ) => {\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        gridName,\n        dimension,\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    }\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  private 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  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 uploadFileToCanvas = async (file: File): Promise<string> => {\n    return new Promise((resolve, reject) => {\n      this.uploadImageToS3\n        ? resolve(this.uploadImageToS3(file))\n        : reject(new Error('Upload function not provided'));\n    });\n  };\n\n  private onViewPortChange = (e: IViewport): void => {\n    if (!this.publish) return;\n\n    const data = e as IViewport;\n\n    this.publishToChannel({}, undefined, data);\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.addImageToCanvas;\n      document.body.appendChild(this.fileInput);\n    }\n\n    this.fileInput.click();\n  };\n\n  private addImageToCanvas = 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 imageBase64 = await this.uploadImageToS3(file);\n    const viewPort = this.polycanvas.getViewport();\n    const imgJson = {\n      name: 'image',\n      href: imageBase64,\n      x: viewPort.x + 88,\n      y: viewPort.y + 88,\n    };\n\n    const key = this.polycanvas.add({\n      ...imgJson,\n    });\n\n    this.publishToChannel({\n      [key]: [undefined, { ...imgJson, status: 'locked' }],\n    });\n\n    target.value = '';\n  };\n\n  private updateCanvasConfig = (\n    height: number,\n    dimension: IViewport | undefined,\n    gridName: TCueCanvasGridName | undefined,\n  ) => {\n    if (!this.polycanvas) return;\n\n    if (height > this.height) {\n      this.updateHeight(height);\n    }\n\n    if (dimension) {\n      this.polycanvas.setViewport(dimension.x, dimension.y, dimension.zoom);\n    }\n\n    if (gridName) {\n      this.polycanvas.setOptions({\n        grid: gridName,\n      });\n    }\n  };\n\n  private updateCanvas = ({ data, userId }: IActionData) => {\n    const canEditStroke = this.userType === 'TEACHER' || userId === this.userId;\n\n    Object.entries(data).forEach(([key, value]) => {\n      if (!value[0] && value[1]) {\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  };\n\n  toggleTiles = (val: boolean) => {\n    this.polycanvas?.toggleSidebar(val);\n  };\n\n  resetViewPort = () => {\n    if (this.polycanvas) {\n      this.polycanvas.resetViewport();\n    }\n  };\n\n  changeGrid = (gridName: TCueCanvasGridName) => {\n    if (!this.polycanvas) return;\n\n    this.polycanvas.setOptions({\n      grid: gridName,\n    });\n\n    this.publishToChannel({}, gridName);\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\n    if (gridName) {\n      this.polycanvas.setOptions({\n        grid: gridName,\n      });\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, gridName);\n  };\n\n  setTool = (tool: TCueCanvasTool) => {\n    if (this.polycanvas) {\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    }\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      const lastDimension = payload.map(data => data.dimension).filter(Boolean)[payload.length - 1];\n      const lastGrid = payload.map(data => data.gridName).filter(Boolean)[payload.length - 1];\n\n      this.updateCanvasConfig(maxHeight, lastDimension, lastGrid);\n      payload.forEach(item => this.updateCanvas(item));\n    } else {\n      this.updateCanvasConfig(payload.height, payload.dimension, payload?.gridName);\n      this.updateCanvas(payload);\n    }\n  };\n\n  setColor = (color: string) => {\n    if (this.polycanvas) {\n      this.polycanvas.setColor(color);\n    }\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","__publicField","payload","gridName","dimension","e","checkTextOrEquationTool","data","undoData","getReverseMap","viewPort","image","downloadLink","file","resolve","reject","event","target","_a","imageBase64","imgJson","key","canEditStroke","value","_b","_c","val","allTiles","selectedItems","lockedTiles","updatedJson","unlockedTiles","item","canvasData","tool","currTool","currSubTool","getToolAndSubtool","heights","maxHeight","lastDimension","lastGrid","color","debounce","canvasElementRef","canvasConfig","canvasSetting","initialData","removeTileButton","removeMask"],"mappings":"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"}

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

@@ -1,25 +1,23 @@
-import { jsx as d } from "react/jsx-runtime";
-import { memo as f, useMemo as n, useState as o } from "react";
-import p from "./cue-canvas-context.js";
-import { getColorsForUser as x } from "./cue-canvas-helpers.js";
-const A = f(
-  ({ children: a, userType: t }) => {
-    const i = n(() => x(t), [t]), [e, v] = o(), [r, m] = o("pen"), [s, l] = o(), [c, C] = o(i[0]), u = n(
+import { jsx as C } from "react/jsx-runtime";
+import { memo as u, useMemo as c, useState as o } from "react";
+import f from "./cue-canvas-context.js";
+import { getColorsForUser as p } from "./cue-canvas-helpers.js";
+const d = u(
+  ({ children: n, userType: t }) => {
+    const a = c(() => p(t), [t]), [e, i] = o(), [r, v] = o("pen"), [s, m] = o(a[0]), l = c(
       () => ({
         activeInstance: e,
-        setActiveInstance: v,
+        setActiveInstance: i,
         activeTool: r,
-        setActiveTool: m,
-        activeColor: c,
-        setActiveColor: C,
-        activeSidebar: s,
-        setActiveSidebar: l
+        setActiveTool: v,
+        activeColor: s,
+        setActiveColor: m
       }),
-      [c, e, s, r]
+      [s, e, r]
     );
-    return /* @__PURE__ */ d(p.Provider, { value: u, children: a });
+    return /* @__PURE__ */ C(f.Provider, { value: l, children: n });
   }
-), g = A;
+), g = d;
 export {
   g as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"cue-canvas-provider.js","sources":["../../../src/features/cue-canvas/cue-canvas-provider.tsx"],"sourcesContent":["import type { TUserTypes } from '../ui/types';\nimport type { CueCanvasCore } from './cue-canvas-core';\nimport type { TCueCanvasColors, TCueCanvasSidebar, TCueCanvasTool } from './types/cue-canvas';\nimport type { FC, PropsWithChildren } from 'react';\n\nimport { useState, memo, useMemo } from 'react';\n\nimport CueCanvasContext from './cue-canvas-context';\nimport { getColorsForUser } from './cue-canvas-helpers';\n\nconst CueCanvasProvider: FC<PropsWithChildren<{ userType: TUserTypes }>> = memo(\n  ({ children, userType }) => {\n    const colors = useMemo(() => getColorsForUser(userType), [userType]);\n\n    const [activeInstance, setActiveInstance] = useState<CueCanvasCore>();\n    const [activeTool, setActiveTool] = useState<TCueCanvasTool>('pen');\n    const [activeSidebar, setActiveSidebar] = useState<TCueCanvasSidebar>();\n    const [activeColor, setActiveColor] = useState<TCueCanvasColors>(colors[0] as TCueCanvasColors);\n    const contextValue = useMemo(\n      () => ({\n        activeInstance: activeInstance,\n        setActiveInstance: setActiveInstance,\n        activeTool: activeTool,\n        setActiveTool: setActiveTool,\n        activeColor,\n        setActiveColor,\n        activeSidebar,\n        setActiveSidebar,\n      }),\n      [activeColor, activeInstance, activeSidebar, activeTool],\n    );\n\n    return <CueCanvasContext.Provider value={contextValue}>{children}</CueCanvasContext.Provider>;\n  },\n);\n\nexport default CueCanvasProvider;\n"],"names":["CueCanvasProvider","memo","children","userType","colors","useMemo","getColorsForUser","activeInstance","setActiveInstance","useState","activeTool","setActiveTool","activeSidebar","setActiveSidebar","activeColor","setActiveColor","contextValue","CueCanvasContext","CueCanvasProvider$1"],"mappings":";;;;AAUA,MAAMA,IAAqEC;AAAA,EACzE,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AACpB,UAAAC,IAASC,EAAQ,MAAMC,EAAiBH,CAAQ,GAAG,CAACA,CAAQ,CAAC,GAE7D,CAACI,GAAgBC,CAAiB,IAAIC,EAAwB,GAC9D,CAACC,GAAYC,CAAa,IAAIF,EAAyB,KAAK,GAC5D,CAACG,GAAeC,CAAgB,IAAIJ,EAA4B,GAChE,CAACK,GAAaC,CAAc,IAAIN,EAA2BL,EAAO,CAAC,CAAqB,GACxFY,IAAeX;AAAA,MACnB,OAAO;AAAA,QACL,gBAAAE;AAAA,QACA,mBAAAC;AAAA,QACA,YAAAE;AAAA,QACA,eAAAC;AAAA,QACA,aAAAG;AAAA,QACA,gBAAAC;AAAA,QACA,eAAAH;AAAA,QACA,kBAAAC;AAAA,MAAA;AAAA,MAEF,CAACC,GAAaP,GAAgBK,GAAeF,CAAU;AAAA,IAAA;AAGzD,6BAAQO,EAAiB,UAAjB,EAA0B,OAAOD,GAAe,UAAAd,EAAS,CAAA;AAAA,EACnE;AACF,GAEAgB,IAAelB;"}
+{"version":3,"file":"cue-canvas-provider.js","sources":["../../../src/features/cue-canvas/cue-canvas-provider.tsx"],"sourcesContent":["import type { TUserTypes } from '../ui/types';\nimport type { CueCanvasCore } from './cue-canvas-core';\nimport type { TCueCanvasColors, TCueCanvasTool } from './types/cue-canvas';\nimport type { FC, PropsWithChildren } from 'react';\n\nimport { useState, memo, useMemo } from 'react';\n\nimport CueCanvasContext from './cue-canvas-context';\nimport { getColorsForUser } from './cue-canvas-helpers';\n\nconst CueCanvasProvider: FC<PropsWithChildren<{ userType: TUserTypes }>> = memo(\n  ({ children, userType }) => {\n    const colors = useMemo(() => getColorsForUser(userType), [userType]);\n\n    const [activeInstance, setActiveInstance] = useState<CueCanvasCore>();\n    const [activeTool, setActiveTool] = useState<TCueCanvasTool>('pen');\n    const [activeColor, setActiveColor] = useState<TCueCanvasColors>(colors[0] as TCueCanvasColors);\n    const contextValue = useMemo(\n      () => ({\n        activeInstance: activeInstance,\n        setActiveInstance: setActiveInstance,\n        activeTool: activeTool,\n        setActiveTool: setActiveTool,\n        activeColor,\n        setActiveColor,\n      }),\n      [activeColor, activeInstance, activeTool],\n    );\n\n    return <CueCanvasContext.Provider value={contextValue}>{children}</CueCanvasContext.Provider>;\n  },\n);\n\nexport default CueCanvasProvider;\n"],"names":["CueCanvasProvider","memo","children","userType","colors","useMemo","getColorsForUser","activeInstance","setActiveInstance","useState","activeTool","setActiveTool","activeColor","setActiveColor","contextValue","CueCanvasContext","CueCanvasProvider$1"],"mappings":";;;;AAUA,MAAMA,IAAqEC;AAAA,EACzE,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AACpB,UAAAC,IAASC,EAAQ,MAAMC,EAAiBH,CAAQ,GAAG,CAACA,CAAQ,CAAC,GAE7D,CAACI,GAAgBC,CAAiB,IAAIC,EAAwB,GAC9D,CAACC,GAAYC,CAAa,IAAIF,EAAyB,KAAK,GAC5D,CAACG,GAAaC,CAAc,IAAIJ,EAA2BL,EAAO,CAAC,CAAqB,GACxFU,IAAeT;AAAA,MACnB,OAAO;AAAA,QACL,gBAAAE;AAAA,QACA,mBAAAC;AAAA,QACA,YAAAE;AAAA,QACA,eAAAC;AAAA,QACA,aAAAC;AAAA,QACA,gBAAAC;AAAA,MAAA;AAAA,MAEF,CAACD,GAAaL,GAAgBG,CAAU;AAAA,IAAA;AAG1C,6BAAQK,EAAiB,UAAjB,EAA0B,OAAOD,GAAe,UAAAZ,EAAS,CAAA;AAAA,EACnE;AACF,GAEAc,IAAehB;"}

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

@@ -7,7 +7,7 @@ import { useCueCanvasActions as M } from "./hooks/use-cue-canvas-actions.js";
 import T from "./hooks/use-height-extender.js";
 const U = V(
   ({
-    responseId: w,
+    canvasId: w,
     width: u,
     height: t,
     canRender: f,
@@ -39,18 +39,18 @@ const U = V(
       t && e.current && e.current.resetViewPort();
     }, [t, u]), o(() => {
       if (f && l && !e.current) {
-        const n = k(u, t, s, C), P = z(s, C), v = new j(
-          i,
-          p,
-          E,
-          x,
-          I,
-          t,
-          A,
-          w,
-          C,
-          s
-        );
+        const n = k(u, t, s, C), P = z(s, C), v = new j({
+          onPublish: i,
+          onSubscribe: p,
+          onUpdateActiveTool: E,
+          onUpdateHeight: x,
+          uploadImageToS3: I,
+          height: t,
+          userId: A,
+          canvasId: w,
+          userType: C,
+          renderAs: s
+        });
         (async () => {
           await v.create({
             canvasElementRef: m,

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

@@ -1 +1 @@
-{"version":3,"file":"cue-canvas.js","sources":["../../../src/features/cue-canvas/cue-canvas.tsx"],"sourcesContent":["import type { ICueCanvas, TCueCanvasTool } from './types/cue-canvas';\n\nimport { memo, useCallback, useEffect, useRef } from 'react';\n\nimport { CueCanvasCore } from './cue-canvas-core';\nimport { getCanvasConfig, getCanvasSettings } from './cue-canvas-helpers';\nimport { CueCanvasWrapper } from './cue-cavas-styled';\nimport { useCueCanvasActions } from './hooks/use-cue-canvas-actions';\nimport useHeightExtender from './hooks/use-height-extender';\n\nconst CueCanvas: React.FC<ICueCanvas> = memo(\n  ({\n    responseId,\n    width,\n    height,\n    canRender,\n    onUpdateHeight,\n    initialData,\n    onPublish,\n    onSubscribe,\n    userId,\n    appended,\n    canScribble,\n    userType,\n    renderAs = 'canvas',\n  }) => {\n    const canvasElementRef = useRef<HTMLDivElement>(null);\n    const { setActiveInstance: setActiveCueCanvas, setActiveTool } = useCueCanvasActions();\n\n    const cueCanvasRef = useRef<CueCanvasCore | null>(null);\n\n    const onUpdateActiveTool = useCallback(\n      (tool: TCueCanvasTool) => {\n        setActiveTool(tool);\n      },\n      [setActiveTool],\n    );\n\n    const uploadImageToS3 = useCallback((file: File) => {\n      // Todo @ayushsinghal1998: Update this once upload api is ready\n\n      // eslint-disable-next-line no-console\n      console.log(file, 'file to upload');\n\n      return 'https://cuemath-intel.s3.amazonaws.com/media/cuemath-whiteboard/2b0b9468-d6d4-11e8-9bfb-02420a000032:practice/Screenshot 2025-04-16 at 3.18.32 PM.png_b9079e2f-4ae6-439c-8edd-104dbfdc6100';\n    }, []);\n\n    useHeightExtender({\n      canvasElementRef,\n      cueCanvasRef,\n      canScribble,\n    });\n\n    useEffect(() => {\n      if (canScribble && cueCanvasRef.current) {\n        cueCanvasRef.current.resetViewPort();\n\n        setActiveCueCanvas(cueCanvasRef.current);\n      }\n    }, [canScribble, setActiveCueCanvas]);\n\n    useEffect(() => {\n      if (initialData && cueCanvasRef.current) {\n        cueCanvasRef.current.update(initialData);\n      }\n    }, [initialData]);\n\n    useEffect(() => {\n      if (height && cueCanvasRef.current) {\n        cueCanvasRef.current.resetViewPort();\n      }\n    }, [height, width]);\n\n    useEffect(() => {\n      if (canRender && appended && !cueCanvasRef.current) {\n        const canvasConfig = getCanvasConfig(width, height, renderAs, userType);\n        const canvasSetting = getCanvasSettings(renderAs, userType);\n        const cueCanvasCore = new CueCanvasCore(\n          onPublish,\n          onSubscribe,\n          onUpdateActiveTool,\n          onUpdateHeight,\n          uploadImageToS3,\n          height,\n          userId,\n          responseId,\n          userType,\n          renderAs,\n        );\n\n        const createCueCanvas = async () => {\n          await cueCanvasCore.create({\n            canvasElementRef,\n            canvasConfig,\n            canvasSetting,\n            initialData,\n          });\n          cueCanvasRef.current = cueCanvasCore;\n\n          if (canScribble) {\n            setActiveCueCanvas(cueCanvasCore);\n          }\n        };\n\n        createCueCanvas();\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [onPublish, onSubscribe, setActiveCueCanvas, canRender, appended]);\n\n    useEffect(() => {\n      return () => {\n        if (cueCanvasRef.current) {\n          cueCanvasRef.current.destroy();\n          cueCanvasRef.current = null;\n        }\n      };\n    }, []);\n\n    return (\n      <CueCanvasWrapper\n        ref={canvasElementRef}\n        $width={width}\n        $height={height}\n        $canScribble={canScribble}\n        $canRender={canRender}\n        $renderAs={renderAs}\n      />\n    );\n  },\n);\n\nexport default CueCanvas;\n"],"names":["CueCanvas","memo","responseId","width","height","canRender","onUpdateHeight","initialData","onPublish","onSubscribe","userId","appended","canScribble","userType","renderAs","canvasElementRef","useRef","setActiveCueCanvas","setActiveTool","useCueCanvasActions","cueCanvasRef","onUpdateActiveTool","useCallback","tool","uploadImageToS3","file","useHeightExtender","useEffect","canvasConfig","getCanvasConfig","canvasSetting","getCanvasSettings","cueCanvasCore","CueCanvasCore","jsx","CueCanvasWrapper","CueCanvas$1"],"mappings":";;;;;;;AAUA,MAAMA,IAAkCC;AAAA,EACtC,CAAC;AAAA,IACC,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,EAAA,MACP;AACE,UAAAC,IAAmBC,EAAuB,IAAI,GAC9C,EAAE,mBAAmBC,GAAoB,eAAAC,MAAkBC,EAAoB,GAE/EC,IAAeJ,EAA6B,IAAI,GAEhDK,IAAqBC;AAAA,MACzB,CAACC,MAAyB;AACxB,QAAAL,EAAcK,CAAI;AAAA,MACpB;AAAA,MACA,CAACL,CAAa;AAAA,IAAA,GAGVM,IAAkBF,EAAY,CAACG,OAI3B,QAAA,IAAIA,GAAM,gBAAgB,GAE3B,+LACN,CAAE,CAAA;AAEa,WAAAC,EAAA;AAAA,MAChB,kBAAAX;AAAA,MACA,cAAAK;AAAA,MACA,aAAAR;AAAA,IAAA,CACD,GAEDe,EAAU,MAAM;AACV,MAAAf,KAAeQ,EAAa,YAC9BA,EAAa,QAAQ,iBAErBH,EAAmBG,EAAa,OAAO;AAAA,IACzC,GACC,CAACR,GAAaK,CAAkB,CAAC,GAEpCU,EAAU,MAAM;AACV,MAAApB,KAAea,EAAa,WACjBA,EAAA,QAAQ,OAAOb,CAAW;AAAA,IACzC,GACC,CAACA,CAAW,CAAC,GAEhBoB,EAAU,MAAM;AACV,MAAAvB,KAAUgB,EAAa,WACzBA,EAAa,QAAQ;IACvB,GACC,CAAChB,GAAQD,CAAK,CAAC,GAElBwB,EAAU,MAAM;AACd,UAAItB,KAAaM,KAAY,CAACS,EAAa,SAAS;AAClD,cAAMQ,IAAeC,EAAgB1B,GAAOC,GAAQU,GAAUD,CAAQ,GAChEiB,IAAgBC,EAAkBjB,GAAUD,CAAQ,GACpDmB,IAAgB,IAAIC;AAAA,UACxBzB;AAAA,UACAC;AAAA,UACAY;AAAA,UACAf;AAAA,UACAkB;AAAA,UACApB;AAAA,UACAM;AAAA,UACAR;AAAA,UACAW;AAAA,UACAC;AAAA,QAAA;AAiBc,SAdQ,YAAY;AAClC,gBAAMkB,EAAc,OAAO;AAAA,YACzB,kBAAAjB;AAAA,YACA,cAAAa;AAAA,YACA,eAAAE;AAAA,YACA,aAAAvB;AAAA,UAAA,CACD,GACDa,EAAa,UAAUY,GAEnBpB,KACFK,EAAmBe,CAAa;AAAA,QAClC;MAIJ;AAAA,IAAA,GAEC,CAACxB,GAAWC,GAAaQ,GAAoBZ,GAAWM,CAAQ,CAAC,GAEpEgB,EAAU,MACD,MAAM;AACX,MAAIP,EAAa,YACfA,EAAa,QAAQ,WACrBA,EAAa,UAAU;AAAA,IACzB,GAED,CAAE,CAAA,GAGH,gBAAAc;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKpB;AAAA,QACL,QAAQZ;AAAA,QACR,SAASC;AAAA,QACT,cAAcQ;AAAA,QACd,YAAYP;AAAA,QACZ,WAAWS;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjB;AACF,GAEAsB,IAAepC;"}
+{"version":3,"file":"cue-canvas.js","sources":["../../../src/features/cue-canvas/cue-canvas.tsx"],"sourcesContent":["import type { ICueCanvas, TCueCanvasTool } from './types/cue-canvas';\n\nimport { memo, useCallback, useEffect, useRef } from 'react';\n\nimport { CueCanvasCore } from './cue-canvas-core';\nimport { getCanvasConfig, getCanvasSettings } from './cue-canvas-helpers';\nimport { CueCanvasWrapper } from './cue-cavas-styled';\nimport { useCueCanvasActions } from './hooks/use-cue-canvas-actions';\nimport useHeightExtender from './hooks/use-height-extender';\n\nconst CueCanvas: React.FC<ICueCanvas> = memo(\n  ({\n    canvasId,\n    width,\n    height,\n    canRender,\n    onUpdateHeight,\n    initialData,\n    onPublish,\n    onSubscribe,\n    userId,\n    appended,\n    canScribble,\n    userType,\n    renderAs = 'canvas',\n  }) => {\n    const canvasElementRef = useRef<HTMLDivElement>(null);\n    const { setActiveInstance: setActiveCueCanvas, setActiveTool } = useCueCanvasActions();\n\n    const cueCanvasRef = useRef<CueCanvasCore | null>(null);\n\n    const onUpdateActiveTool = useCallback(\n      (tool: TCueCanvasTool) => {\n        setActiveTool(tool);\n      },\n      [setActiveTool],\n    );\n\n    const uploadImageToS3 = useCallback((file: File) => {\n      // Todo @ayushsinghal1998: Update this once upload api is ready\n\n      // eslint-disable-next-line no-console\n      console.log(file, 'file to upload');\n\n      return 'https://cuemath-intel.s3.amazonaws.com/media/cuemath-whiteboard/2b0b9468-d6d4-11e8-9bfb-02420a000032:practice/Screenshot 2025-04-16 at 3.18.32 PM.png_b9079e2f-4ae6-439c-8edd-104dbfdc6100';\n    }, []);\n\n    useHeightExtender({\n      canvasElementRef,\n      cueCanvasRef,\n      canScribble,\n    });\n\n    useEffect(() => {\n      if (canScribble && cueCanvasRef.current) {\n        cueCanvasRef.current.resetViewPort();\n\n        setActiveCueCanvas(cueCanvasRef.current);\n      }\n    }, [canScribble, setActiveCueCanvas]);\n\n    useEffect(() => {\n      if (initialData && cueCanvasRef.current) {\n        cueCanvasRef.current.update(initialData);\n      }\n    }, [initialData]);\n\n    useEffect(() => {\n      if (height && cueCanvasRef.current) {\n        cueCanvasRef.current.resetViewPort();\n      }\n    }, [height, width]);\n\n    useEffect(() => {\n      if (canRender && appended && !cueCanvasRef.current) {\n        const canvasConfig = getCanvasConfig(width, height, renderAs, userType);\n        const canvasSetting = getCanvasSettings(renderAs, userType);\n        const cueCanvasCore = new CueCanvasCore({\n          onPublish,\n          onSubscribe,\n          onUpdateActiveTool,\n          onUpdateHeight,\n          uploadImageToS3,\n          height,\n          userId,\n          canvasId,\n          userType,\n          renderAs,\n        });\n\n        const createCueCanvas = async () => {\n          await cueCanvasCore.create({\n            canvasElementRef,\n            canvasConfig,\n            canvasSetting,\n            initialData,\n          });\n          cueCanvasRef.current = cueCanvasCore;\n\n          if (canScribble) {\n            setActiveCueCanvas(cueCanvasCore);\n          }\n        };\n\n        createCueCanvas();\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [onPublish, onSubscribe, setActiveCueCanvas, canRender, appended]);\n\n    useEffect(() => {\n      return () => {\n        if (cueCanvasRef.current) {\n          cueCanvasRef.current.destroy();\n          cueCanvasRef.current = null;\n        }\n      };\n    }, []);\n\n    return (\n      <CueCanvasWrapper\n        ref={canvasElementRef}\n        $width={width}\n        $height={height}\n        $canScribble={canScribble}\n        $canRender={canRender}\n        $renderAs={renderAs}\n      />\n    );\n  },\n);\n\nexport default CueCanvas;\n"],"names":["CueCanvas","memo","canvasId","width","height","canRender","onUpdateHeight","initialData","onPublish","onSubscribe","userId","appended","canScribble","userType","renderAs","canvasElementRef","useRef","setActiveCueCanvas","setActiveTool","useCueCanvasActions","cueCanvasRef","onUpdateActiveTool","useCallback","tool","uploadImageToS3","file","useHeightExtender","useEffect","canvasConfig","getCanvasConfig","canvasSetting","getCanvasSettings","cueCanvasCore","CueCanvasCore","jsx","CueCanvasWrapper","CueCanvas$1"],"mappings":";;;;;;;AAUA,MAAMA,IAAkCC;AAAA,EACtC,CAAC;AAAA,IACC,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,EAAA,MACP;AACE,UAAAC,IAAmBC,EAAuB,IAAI,GAC9C,EAAE,mBAAmBC,GAAoB,eAAAC,MAAkBC,EAAoB,GAE/EC,IAAeJ,EAA6B,IAAI,GAEhDK,IAAqBC;AAAA,MACzB,CAACC,MAAyB;AACxB,QAAAL,EAAcK,CAAI;AAAA,MACpB;AAAA,MACA,CAACL,CAAa;AAAA,IAAA,GAGVM,IAAkBF,EAAY,CAACG,OAI3B,QAAA,IAAIA,GAAM,gBAAgB,GAE3B,+LACN,CAAE,CAAA;AAEa,WAAAC,EAAA;AAAA,MAChB,kBAAAX;AAAA,MACA,cAAAK;AAAA,MACA,aAAAR;AAAA,IAAA,CACD,GAEDe,EAAU,MAAM;AACV,MAAAf,KAAeQ,EAAa,YAC9BA,EAAa,QAAQ,iBAErBH,EAAmBG,EAAa,OAAO;AAAA,IACzC,GACC,CAACR,GAAaK,CAAkB,CAAC,GAEpCU,EAAU,MAAM;AACV,MAAApB,KAAea,EAAa,WACjBA,EAAA,QAAQ,OAAOb,CAAW;AAAA,IACzC,GACC,CAACA,CAAW,CAAC,GAEhBoB,EAAU,MAAM;AACV,MAAAvB,KAAUgB,EAAa,WACzBA,EAAa,QAAQ;IACvB,GACC,CAAChB,GAAQD,CAAK,CAAC,GAElBwB,EAAU,MAAM;AACd,UAAItB,KAAaM,KAAY,CAACS,EAAa,SAAS;AAClD,cAAMQ,IAAeC,EAAgB1B,GAAOC,GAAQU,GAAUD,CAAQ,GAChEiB,IAAgBC,EAAkBjB,GAAUD,CAAQ,GACpDmB,IAAgB,IAAIC,EAAc;AAAA,UACtC,WAAAzB;AAAA,UACA,aAAAC;AAAA,UACA,oBAAAY;AAAA,UACA,gBAAAf;AAAA,UACA,iBAAAkB;AAAA,UACA,QAAApB;AAAA,UACA,QAAAM;AAAA,UACA,UAAAR;AAAA,UACA,UAAAW;AAAA,UACA,UAAAC;AAAA,QAAA,CACD;AAgBe,SAdQ,YAAY;AAClC,gBAAMkB,EAAc,OAAO;AAAA,YACzB,kBAAAjB;AAAA,YACA,cAAAa;AAAA,YACA,eAAAE;AAAA,YACA,aAAAvB;AAAA,UAAA,CACD,GACDa,EAAa,UAAUY,GAEnBpB,KACFK,EAAmBe,CAAa;AAAA,QAClC;MAIJ;AAAA,IAAA,GAEC,CAACxB,GAAWC,GAAaQ,GAAoBZ,GAAWM,CAAQ,CAAC,GAEpEgB,EAAU,MACD,MAAM;AACX,MAAIP,EAAa,YACfA,EAAa,QAAQ,WACrBA,EAAa,UAAU;AAAA,IACzB,GAED,CAAE,CAAA,GAGH,gBAAAc;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKpB;AAAA,QACL,QAAQZ;AAAA,QACR,SAASC;AAAA,QACT,cAAcQ;AAAA,QACd,YAAYP;AAAA,QACZ,WAAWS;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjB;AACF,GAEAsB,IAAepC;"}

package/dist/features/cue-canvas/cue-cavas-styled.js

@@ -42,7 +42,7 @@ const S = e(u)(({
       }
     `}
   `;
-}), W = e(g)(({
+}), G = e(g)(({
   theme: r,
   $active: o,
   $activeColor: t,
@@ -79,7 +79,7 @@ const S = e(u)(({
       }
     `}
   `;
-}), w = e(h)(({
+}), W = e(h)(({
   $active: r,
   theme: o,
   $activeColor: t,
@@ -123,7 +123,7 @@ const S = e(u)(({
       }
     `}
   `;
-}), G = e(x)(({
+}), Y = e(x)(({
   $active: r,
   theme: o,
   $activeColor: t,
@@ -169,7 +169,7 @@ const S = e(u)(({
       }
     `}
   `;
-}), Y = e(f)`
+}), w = e(f)`
   width: 20px;
   height: 20px;
 `, H = e(m)`
@@ -187,6 +187,7 @@ const S = e(u)(({
       border: 1px solid ${t.WHITE};
       border-radius: 50%;
       transition: all 100ms ease-in-out;
+      border: 1px solid ${t.GREY_1};
 
       ${!o && l`
         &:hover {
@@ -276,11 +277,11 @@ export {
   U as RedoIcon,
   T as StyledCheckIcon,
   V as StyledDownIcon,
-  w as StyledHighlighterWrapper,
-  Y as StyledLockIcon,
+  W as StyledHighlighterWrapper,
+  w as StyledLockIcon,
   S as StyledPencilIcon,
-  W as StyledRulerIcon,
-  G as StyledSketchWrapper,
+  G as StyledRulerIcon,
+  Y as StyledSketchWrapper,
   H as StyledUnlockIcon,
   P as StyledWrapper
 };

package/dist/features/cue-canvas/cue-cavas-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"cue-cavas-styled.js","sources":["../../../src/features/cue-canvas/cue-cavas-styled.tsx"],"sourcesContent":["import type { ICueCanvasWrapper, TCueCanvasColors } from './types/cue-canvas';\n\nimport styled, { css } from 'styled-components';\n\nimport TickIcon from '../../assets/line-icons/icons/check';\nimport DownIcon from '../../assets/line-icons/icons/down';\nimport HighlighterIcon from '../../assets/line-icons/icons/highlighter';\nimport LockIcon from '../../assets/line-icons/icons/lock';\nimport PencilIcon from '../../assets/line-icons/icons/pencil';\nimport RulerIcon from '../../assets/line-icons/icons/ruler';\nimport SketchIcon from '../../assets/line-icons/icons/sketch';\nimport UndoIcon from '../../assets/line-icons/icons/undo';\nimport UnlockIcon from '../../assets/line-icons/icons/unlock';\nimport FlexView from '../ui/layout/flex-view';\nimport { CANVAS_COLORS } from './constants/constants';\n\ninterface IToolProps {\n  $active: boolean;\n  $activeColor: TCueCanvasColors;\n  $shouldAnimate: boolean;\n}\n\nexport const StyledPencilIcon = styled(PencilIcon)<IToolProps>(({\n  theme,\n  $active,\n  $activeColor,\n  $shouldAnimate,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && $shouldAnimate ? '0px' : '8px'};\n    cursor: ${$active ? 'auto' : 'pointer'};\n    .pencil-dark-shade {\n      fill: ${$active ? color : colors.GREY_3};\n    }\n\n    .pencil-light-shade {\n      fill: ${$active ? color : colors.GREY_2};\n      opacity: ${$active ? 0.3 : 1};\n    }\n\n    ${!$active &&\n    css`\n      &:hover {\n        .pencil-dark-shade {\n          fill: ${colors.GREY_4};\n        }\n        .pencil-light-shade {\n          fill: ${colors.GREY_2};\n        }\n      }\n    `}\n  `;\n});\n\nexport const StyledRulerIcon = styled(RulerIcon)<IToolProps>(({\n  theme,\n  $active,\n  $activeColor,\n  $shouldAnimate,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && $shouldAnimate ? '0px' : '8px'};\n\n    .ruler-rect-color {\n      fill: ${$active ? color : colors.GREY_3};\n    }\n\n    .ruler-stripe-base {\n      fill: ${$active ? color : colors.GREY_2};\n      opacity: ${$active ? 0.2 : 1};\n    }\n\n    .ruler-small-stripe {\n      fill: ${colors.REAL_BLACK};\n    }\n\n    ${!$active &&\n    css`\n      &:hover {\n        .ruler-rect-color {\n          fill: ${colors.GREY_4};\n        }\n        .ruler-stripe-base {\n          fill: ${colors.GREY_3};\n        }\n      }\n    `}\n  `;\n});\n\nexport const StyledHighlighterWrapper = styled(HighlighterIcon)<IToolProps>(({\n  $active,\n  theme,\n  $activeColor,\n  $shouldAnimate,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && $shouldAnimate ? '0px' : '8px'};\n    ${!$active &&\n    css`\n      &:hover {\n        .highlighter-tip {\n          fill: ${theme.colors.BLACK};\n        }\n\n        .highlighter-stripe {\n          fill: ${theme.colors.BLACK_50};\n        }\n\n        .highlighter-light-body {\n          fill: ${theme.colors.BLACK_10};\n        }\n      }\n    `}\n\n    ${$active &&\n    css`\n      .highlighter-tip {\n        fill: ${color};\n      }\n\n      .highlighter-stripe {\n        fill: ${color};\n        opacity: 0.6;\n      }\n\n      .highlighter-light-body {\n        fill: ${color};\n        opacity: 0.2;\n      }\n    `}\n  `;\n});\n\nexport const StyledSketchWrapper = styled(SketchIcon)<IToolProps>(({\n  $active,\n  theme,\n  $activeColor,\n  $shouldAnimate,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && $shouldAnimate ? '0px' : '8px'};\n\n    ${!$active &&\n    css`\n      &:hover {\n        .pen-tip {\n          fill: ${theme.colors.BLACK};\n        }\n\n        .pen-dark-shade {\n          fill: ${theme.colors.BLACK_50};\n        }\n\n        .pen-light-shade {\n          fill: ${theme.colors.BLACK_10};\n        }\n      }\n    `}\n\n    ${$active &&\n    css`\n      cursor: ${$active ? 'auto' : 'pointer'};\n      .pen-tip {\n        fill: ${color};\n      }\n\n      .pen-dark-shade {\n        fill: ${color};\n        opacity: 0.6;\n      }\n\n      .pen-light-shade {\n        fill: ${color};\n        opacity: 0.4;\n      }\n    `}\n  `;\n});\n\nexport const StyledLockIcon = styled(LockIcon)`\n  width: 20px;\n  height: 20px;\n`;\n\nexport const StyledUnlockIcon = styled(UnlockIcon)`\n  width: 20px;\n  height: 20px;\n`;\n\nexport const StyledWrapper = styled(FlexView)<Omit<IToolProps, '$activeColor' | '$shouldAnimate'>>(\n  ({ theme, $active }) => {\n    const { colors } = theme;\n\n    return css`\n      cursor: ${$active ? 'auto' : 'pointer'};\n      width: 32px;\n      height: 32px;\n      justify-content: center;\n      align-items: center;\n      border: 1px solid ${colors.WHITE};\n      border-radius: 50%;\n      transition: all 100ms ease-in-out;\n\n      ${!$active &&\n      css`\n        &:hover {\n          border: 1px solid ${colors.REAL_BLACK};\n        }\n      `}\n\n      ${$active &&\n      css`\n        cursor: auto;\n        background: ${colors.BLACK};\n        .tile-icon {\n          fill: ${colors.BLACK};\n        }\n        svg {\n          path,\n          rect,\n          circle {\n            stroke: ${colors.WHITE};\n          }\n          .hover-eraser {\n            stroke: none;\n            fill: ${colors.WHITE};\n          }\n        }\n      `}\n    `;\n  },\n);\n\nexport const StyledCheckIcon = styled(TickIcon)`\n  path {\n    stroke: ${'white'};\n  }\n`;\n\nexport const RedoIcon = styled(UndoIcon)`\n  transform: scaleX(-1);\n`;\n\nexport const PaletteWrapper = styled(FlexView)`\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  top: -24px; //-16 for icon, -8 for gap\n  transition:\n    opacity 0.5s ease,\n    transform 0.5s ease;\n`;\n\nexport const CueCanvasWrapper = styled(FlexView)<ICueCanvasWrapper>(\n  ({ $canScribble, $canRender, $renderAs }) => `\n  display: ${$canRender ? 'block' : 'none'};\n  opacity: ${$canScribble ? 1 : 0.5};\n  pointer-events: ${$canScribble ? 'auto' : 'none'};\n\n  ${\n    $renderAs === 'canvas' &&\n    $canScribble &&\n    `\n    background-image: radial-gradient(rgb(43 43 43 / 8%) 2px, transparent 10%);\n    background-position:0 0,32px 32px;\n    background-size: 30px 32px;\n    `\n  }\n  \n`,\n);\n\nexport const ColorPicker = styled(FlexView)<{ $color: TCueCanvasColors }>(\n  ({ $color }) => `\nbackground: ${CANVAS_COLORS[$color]};\n`,\n);\n\nexport const StyledDownIcon = styled(DownIcon)<{ $isAnimating: boolean }>`\n  pointer-events: none;\n  transition: transform 0.5s ease;\n  transform: ${({ $isAnimating }) => ($isAnimating ? 'rotate(180deg)' : 'rotate(0deg)')};\n`;\n\nexport const PenIconWrapper = styled(FlexView)`\n  overflow: hidden;\n  border-right: 1px solid ${({ theme }) => theme.colors.GREY_1};\n`;\n\nexport const MenuWrapper = styled(FlexView)`\n  position: absolute;\n  padding: 8px 8px 0 8px;\n  overflow: hidden;\n  bottom: 58px;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  transition:\n    opacity 0.5s ease,\n    transform 0.5s ease;\n\n  :hover {\n    cursor: pointer;\n  }\n`;\n"],"names":["StyledPencilIcon","styled","PencilIcon","theme","$active","$activeColor","$shouldAnimate","colors","color","CANVAS_COLORS","css","StyledRulerIcon","RulerIcon","StyledHighlighterWrapper","HighlighterIcon","StyledSketchWrapper","SketchIcon","StyledLockIcon","LockIcon","StyledUnlockIcon","UnlockIcon","StyledWrapper","FlexView","StyledCheckIcon","TickIcon","RedoIcon","UndoIcon","PaletteWrapper","CueCanvasWrapper","$canScribble","$canRender","$renderAs","ColorPicker","$color","StyledDownIcon","DownIcon","$isAnimating","PenIconWrapper","MenuWrapper"],"mappings":"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"}
+{"version":3,"file":"cue-cavas-styled.js","sources":["../../../src/features/cue-canvas/cue-cavas-styled.tsx"],"sourcesContent":["import type { ICueCanvasWrapper, TCueCanvasColors } from './types/cue-canvas';\n\nimport styled, { css } from 'styled-components';\n\nimport TickIcon from '../../assets/line-icons/icons/check';\nimport DownIcon from '../../assets/line-icons/icons/down';\nimport HighlighterIcon from '../../assets/line-icons/icons/highlighter';\nimport LockIcon from '../../assets/line-icons/icons/lock';\nimport PencilIcon from '../../assets/line-icons/icons/pencil';\nimport RulerIcon from '../../assets/line-icons/icons/ruler';\nimport SketchIcon from '../../assets/line-icons/icons/sketch';\nimport UndoIcon from '../../assets/line-icons/icons/undo';\nimport UnlockIcon from '../../assets/line-icons/icons/unlock';\nimport FlexView from '../ui/layout/flex-view';\nimport { CANVAS_COLORS } from './constants/constants';\n\ninterface IToolProps {\n  $active: boolean;\n  $activeColor: TCueCanvasColors;\n  $shouldAnimate: boolean;\n}\n\nexport const StyledPencilIcon = styled(PencilIcon)<IToolProps>(({\n  theme,\n  $active,\n  $activeColor,\n  $shouldAnimate,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && $shouldAnimate ? '0px' : '8px'};\n    cursor: ${$active ? 'auto' : 'pointer'};\n    .pencil-dark-shade {\n      fill: ${$active ? color : colors.GREY_3};\n    }\n\n    .pencil-light-shade {\n      fill: ${$active ? color : colors.GREY_2};\n      opacity: ${$active ? 0.3 : 1};\n    }\n\n    ${!$active &&\n    css`\n      &:hover {\n        .pencil-dark-shade {\n          fill: ${colors.GREY_4};\n        }\n        .pencil-light-shade {\n          fill: ${colors.GREY_2};\n        }\n      }\n    `}\n  `;\n});\n\nexport const StyledRulerIcon = styled(RulerIcon)<IToolProps>(({\n  theme,\n  $active,\n  $activeColor,\n  $shouldAnimate,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && $shouldAnimate ? '0px' : '8px'};\n\n    .ruler-rect-color {\n      fill: ${$active ? color : colors.GREY_3};\n    }\n\n    .ruler-stripe-base {\n      fill: ${$active ? color : colors.GREY_2};\n      opacity: ${$active ? 0.2 : 1};\n    }\n\n    .ruler-small-stripe {\n      fill: ${colors.REAL_BLACK};\n    }\n\n    ${!$active &&\n    css`\n      &:hover {\n        .ruler-rect-color {\n          fill: ${colors.GREY_4};\n        }\n        .ruler-stripe-base {\n          fill: ${colors.GREY_3};\n        }\n      }\n    `}\n  `;\n});\n\nexport const StyledHighlighterWrapper = styled(HighlighterIcon)<IToolProps>(({\n  $active,\n  theme,\n  $activeColor,\n  $shouldAnimate,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && $shouldAnimate ? '0px' : '8px'};\n    ${!$active &&\n    css`\n      &:hover {\n        .highlighter-tip {\n          fill: ${theme.colors.BLACK};\n        }\n\n        .highlighter-stripe {\n          fill: ${theme.colors.BLACK_50};\n        }\n\n        .highlighter-light-body {\n          fill: ${theme.colors.BLACK_10};\n        }\n      }\n    `}\n\n    ${$active &&\n    css`\n      .highlighter-tip {\n        fill: ${color};\n      }\n\n      .highlighter-stripe {\n        fill: ${color};\n        opacity: 0.6;\n      }\n\n      .highlighter-light-body {\n        fill: ${color};\n        opacity: 0.2;\n      }\n    `}\n  `;\n});\n\nexport const StyledSketchWrapper = styled(SketchIcon)<IToolProps>(({\n  $active,\n  theme,\n  $activeColor,\n  $shouldAnimate,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && $shouldAnimate ? '0px' : '8px'};\n\n    ${!$active &&\n    css`\n      &:hover {\n        .pen-tip {\n          fill: ${theme.colors.BLACK};\n        }\n\n        .pen-dark-shade {\n          fill: ${theme.colors.BLACK_50};\n        }\n\n        .pen-light-shade {\n          fill: ${theme.colors.BLACK_10};\n        }\n      }\n    `}\n\n    ${$active &&\n    css`\n      cursor: ${$active ? 'auto' : 'pointer'};\n      .pen-tip {\n        fill: ${color};\n      }\n\n      .pen-dark-shade {\n        fill: ${color};\n        opacity: 0.6;\n      }\n\n      .pen-light-shade {\n        fill: ${color};\n        opacity: 0.4;\n      }\n    `}\n  `;\n});\n\nexport const StyledLockIcon = styled(LockIcon)`\n  width: 20px;\n  height: 20px;\n`;\n\nexport const StyledUnlockIcon = styled(UnlockIcon)`\n  width: 20px;\n  height: 20px;\n`;\n\nexport const StyledWrapper = styled(FlexView)<Omit<IToolProps, '$activeColor' | '$shouldAnimate'>>(\n  ({ theme, $active }) => {\n    const { colors } = theme;\n\n    return css`\n      cursor: ${$active ? 'auto' : 'pointer'};\n      width: 32px;\n      height: 32px;\n      justify-content: center;\n      align-items: center;\n      border: 1px solid ${colors.WHITE};\n      border-radius: 50%;\n      transition: all 100ms ease-in-out;\n      border: 1px solid ${colors.GREY_1};\n\n      ${!$active &&\n      css`\n        &:hover {\n          border: 1px solid ${colors.REAL_BLACK};\n        }\n      `}\n\n      ${$active &&\n      css`\n        cursor: auto;\n        background: ${colors.BLACK};\n        .tile-icon {\n          fill: ${colors.BLACK};\n        }\n        svg {\n          path,\n          rect,\n          circle {\n            stroke: ${colors.WHITE};\n          }\n          .hover-eraser {\n            stroke: none;\n            fill: ${colors.WHITE};\n          }\n        }\n      `}\n    `;\n  },\n);\n\nexport const StyledCheckIcon = styled(TickIcon)`\n  path {\n    stroke: ${'white'};\n  }\n`;\n\nexport const RedoIcon = styled(UndoIcon)`\n  transform: scaleX(-1);\n`;\n\nexport const PaletteWrapper = styled(FlexView)`\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  top: -24px; //-16 for icon, -8 for gap\n  transition:\n    opacity 0.5s ease,\n    transform 0.5s ease;\n`;\n\nexport const CueCanvasWrapper = styled(FlexView)<ICueCanvasWrapper>(\n  ({ $canScribble, $canRender, $renderAs }) => `\n  display: ${$canRender ? 'block' : 'none'};\n  opacity: ${$canScribble ? 1 : 0.5};\n  pointer-events: ${$canScribble ? 'auto' : 'none'};\n\n  ${\n    $renderAs === 'canvas' &&\n    $canScribble &&\n    `\n    background-image: radial-gradient(rgb(43 43 43 / 8%) 2px, transparent 10%);\n    background-position:0 0,32px 32px;\n    background-size: 30px 32px;\n    `\n  }\n  \n`,\n);\n\nexport const ColorPicker = styled(FlexView)<{ $color: TCueCanvasColors }>(\n  ({ $color }) => `\nbackground: ${CANVAS_COLORS[$color]};\n`,\n);\n\nexport const StyledDownIcon = styled(DownIcon)<{ $isAnimating: boolean }>`\n  pointer-events: none;\n  transition: transform 0.5s ease;\n  transform: ${({ $isAnimating }) => ($isAnimating ? 'rotate(180deg)' : 'rotate(0deg)')};\n`;\n\nexport const PenIconWrapper = styled(FlexView)`\n  overflow: hidden;\n  border-right: 1px solid ${({ theme }) => theme.colors.GREY_1};\n`;\n\nexport const MenuWrapper = styled(FlexView)`\n  position: absolute;\n  padding: 8px 8px 0 8px;\n  overflow: hidden;\n  bottom: 58px;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  transition:\n    opacity 0.5s ease,\n    transform 0.5s ease;\n\n  :hover {\n    cursor: pointer;\n  }\n`;\n"],"names":["StyledPencilIcon","styled","PencilIcon","theme","$active","$activeColor","$shouldAnimate","colors","color","CANVAS_COLORS","css","StyledRulerIcon","RulerIcon","StyledHighlighterWrapper","HighlighterIcon","StyledSketchWrapper","SketchIcon","StyledLockIcon","LockIcon","StyledUnlockIcon","UnlockIcon","StyledWrapper","FlexView","StyledCheckIcon","TickIcon","RedoIcon","UndoIcon","PaletteWrapper","CueCanvasWrapper","$canScribble","$canRender","$renderAs","ColorPicker","$color","StyledDownIcon","DownIcon","$isAnimating","PenIconWrapper","MenuWrapper"],"mappings":"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"}

package/dist/features/cue-canvas/hooks/use-cue-canvas-actions.js

@@ -1,16 +1,14 @@
-import { useContext as l, useMemo as v } from "react";
-import u from "../cue-canvas-context.js";
-const C = () => {
+import { useContext as c, useMemo as l } from "react";
+import a from "../cue-canvas-context.js";
+const m = () => {
   const {
     activeInstance: t,
     setActiveTool: o,
     activeTool: e,
     setActiveInstance: i,
-    activeColor: r,
-    setActiveColor: s,
-    setActiveSidebar: c,
-    activeSidebar: n
-  } = l(u), a = v(
+    activeColor: s,
+    setActiveColor: n
+  } = c(a), r = l(
     () => e ? ["pen", "ruler", "highlighter", "marker"].includes(e) : !1,
     [e]
   );
@@ -19,14 +17,12 @@ const C = () => {
     setActiveTool: o,
     activeTool: e,
     setActiveInstance: i,
-    activeColor: r,
-    setActiveColor: s,
-    isWritingToolActive: a,
-    setActiveSidebar: c,
-    activeSidebar: n
+    activeColor: s,
+    setActiveColor: n,
+    isWritingToolActive: r
   };
 };
 export {
-  C as useCueCanvasActions
+  m as useCueCanvasActions
 };
 //# sourceMappingURL=use-cue-canvas-actions.js.map

package/dist/features/cue-canvas/hooks/use-cue-canvas-actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-cue-canvas-actions.js","sources":["../../../../src/features/cue-canvas/hooks/use-cue-canvas-actions.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport PolyContext from '../cue-canvas-context';\n\nexport const useCueCanvasActions = () => {\n  const {\n    activeInstance,\n    setActiveTool,\n    activeTool,\n    setActiveInstance,\n    activeColor,\n    setActiveColor,\n    setActiveSidebar,\n    activeSidebar,\n  } = useContext(PolyContext);\n\n  const isWritingToolActive = useMemo(\n    () => (activeTool ? ['pen', 'ruler', 'highlighter', 'marker'].includes(activeTool) : false),\n    [activeTool],\n  );\n\n  return {\n    activeInstance,\n    setActiveTool,\n    activeTool,\n    setActiveInstance,\n    activeColor,\n    setActiveColor,\n    isWritingToolActive,\n    setActiveSidebar,\n    activeSidebar,\n  };\n};\n"],"names":["useCueCanvasActions","activeInstance","setActiveTool","activeTool","setActiveInstance","activeColor","setActiveColor","setActiveSidebar","activeSidebar","useContext","PolyContext","isWritingToolActive","useMemo"],"mappings":";;AAIO,MAAMA,IAAsB,MAAM;AACjC,QAAA;AAAA,IACJ,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,eAAAC;AAAA,EAAA,IACEC,EAAWC,CAAW,GAEpBC,IAAsBC;AAAA,IAC1B,MAAOT,IAAa,CAAC,OAAO,SAAS,eAAe,QAAQ,EAAE,SAASA,CAAU,IAAI;AAAA,IACrF,CAACA,CAAU;AAAA,EAAA;AAGN,SAAA;AAAA,IACL,gBAAAF;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,qBAAAK;AAAA,IACA,kBAAAJ;AAAA,IACA,eAAAC;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"use-cue-canvas-actions.js","sources":["../../../../src/features/cue-canvas/hooks/use-cue-canvas-actions.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport PolyContext from '../cue-canvas-context';\n\nexport const useCueCanvasActions = () => {\n  const {\n    activeInstance,\n    setActiveTool,\n    activeTool,\n    setActiveInstance,\n    activeColor,\n    setActiveColor,\n  } = useContext(PolyContext);\n\n  const isWritingToolActive = useMemo(\n    () => (activeTool ? ['pen', 'ruler', 'highlighter', 'marker'].includes(activeTool) : false),\n    [activeTool],\n  );\n\n  return {\n    activeInstance,\n    setActiveTool,\n    activeTool,\n    setActiveInstance,\n    activeColor,\n    setActiveColor,\n    isWritingToolActive,\n  };\n};\n"],"names":["useCueCanvasActions","activeInstance","setActiveTool","activeTool","setActiveInstance","activeColor","setActiveColor","useContext","PolyContext","isWritingToolActive","useMemo"],"mappings":";;AAIO,MAAMA,IAAsB,MAAM;AACjC,QAAA;AAAA,IACJ,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,EAAA,IACEC,EAAWC,CAAW,GAEpBC,IAAsBC;AAAA,IAC1B,MAAOP,IAAa,CAAC,OAAO,SAAS,eAAe,QAAQ,EAAE,SAASA,CAAU,IAAI;AAAA,IACrF,CAACA,CAAU;AAAA,EAAA;AAGN,SAAA;AAAA,IACL,gBAAAF;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,qBAAAG;AAAA,EAAA;AAEJ;"}

package/dist/features/ui/theme/tab.js

@@ -45,6 +45,32 @@ const o = (a) => ({ sizes: {
       hover: 500,
       disabled: 400
     }
+  },
+  secondary: {
+    backgroundColorName: {
+      inactive: "BLACK",
+      active: "WHITE",
+      hover: "WHITE",
+      disabled: "GREY_1"
+    },
+    colorName: {
+      inactive: "WHITE",
+      active: "BLACK",
+      hover: "BLACK",
+      disabled: "BLACK_50"
+    },
+    borderColorName: {
+      inactive: "WHITE",
+      active: "WHITE",
+      hover: "BLACK",
+      disabled: "GREY_1"
+    },
+    fontWeight: {
+      inactive: 400,
+      active: 500,
+      hover: 500,
+      disabled: 400
+    }
   }
 } });
 export {

package/dist/features/ui/theme/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../../../src/features/ui/theme/tab.ts"],"sourcesContent":["import type { ITabSizeConfig, ITabVariantConfig, TTabSizes, TTabVariants } from '../types';\n\ninterface IGetTabConfig {\n  (gutter: number): {\n    sizes: Record<TTabSizes, ITabSizeConfig>;\n    variants: Record<TTabVariants, ITabVariantConfig>;\n  };\n}\n\nconst getTabConfig: IGetTabConfig = (gutter: number) => {\n  const sizes: Record<TTabSizes, ITabSizeConfig> = {\n    xsmall: {\n      height: gutter * 1.625,\n      paddingHorizontal: gutter * 0.5,\n      textVariant: 'body3',\n    },\n    small: {\n      height: gutter * 2,\n      paddingHorizontal: gutter * 0.75,\n      textVariant: 'body2',\n    },\n    regular: {\n      height: gutter * 2.5,\n      paddingHorizontal: gutter,\n      textVariant: 'body1',\n    },\n    medium: {\n      height: gutter * 3,\n      paddingHorizontal: gutter,\n      textVariant: 'body1',\n    },\n  };\n\n  const variants: Record<TTabVariants, ITabVariantConfig> = {\n    primary: {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        hover: 'BLACK',\n        disabled: 'GREY_1',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        hover: 'WHITE',\n        disabled: 'BLACK_50',\n      },\n      borderColorName: {\n        inactive: 'GREY_3',\n        active: 'BLACK',\n        hover: 'BLACK',\n        disabled: 'GREY_1',\n      },\n      fontWeight: {\n        inactive: 400,\n        active: 500,\n        hover: 500,\n        disabled: 400,\n      },\n    },\n  };\n\n  return { sizes, variants };\n};\n\nexport default getTabConfig;\n"],"names":["getTabConfig","gutter"],"mappings":"AASM,MAAAA,IAA8B,CAACC,OAqD5B,EAAE,OApDwC;AAAA,EAC/C,QAAQ;AAAA,IACN,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAS;AAAA,IAC5B,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAS;AAAA,IAC5B,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,QAAQA,IAAS;AAAA,IACjB,mBAAmBA;AAAA,IACnB,aAAa;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,IACN,QAAQA,IAAS;AAAA,IACjB,mBAAmBA;AAAA,IACnB,aAAa;AAAA,EACf;AAAA,GAgCc,UA7B0C;AAAA,EACxD,SAAS;AAAA,IACP,qBAAqB;AAAA,MACnB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,EACF;AAAA;"}
+{"version":3,"file":"tab.js","sources":["../../../../src/features/ui/theme/tab.ts"],"sourcesContent":["import type { ITabSizeConfig, ITabVariantConfig, TTabSizes, TTabVariants } from '../types';\n\ninterface IGetTabConfig {\n  (gutter: number): {\n    sizes: Record<TTabSizes, ITabSizeConfig>;\n    variants: Record<TTabVariants, ITabVariantConfig>;\n  };\n}\n\nconst getTabConfig: IGetTabConfig = (gutter: number) => {\n  const sizes: Record<TTabSizes, ITabSizeConfig> = {\n    xsmall: {\n      height: gutter * 1.625,\n      paddingHorizontal: gutter * 0.5,\n      textVariant: 'body3',\n    },\n    small: {\n      height: gutter * 2,\n      paddingHorizontal: gutter * 0.75,\n      textVariant: 'body2',\n    },\n    regular: {\n      height: gutter * 2.5,\n      paddingHorizontal: gutter,\n      textVariant: 'body1',\n    },\n    medium: {\n      height: gutter * 3,\n      paddingHorizontal: gutter,\n      textVariant: 'body1',\n    },\n  };\n\n  const variants: Record<TTabVariants, ITabVariantConfig> = {\n    primary: {\n      backgroundColorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        hover: 'BLACK',\n        disabled: 'GREY_1',\n      },\n      colorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        hover: 'WHITE',\n        disabled: 'BLACK_50',\n      },\n      borderColorName: {\n        inactive: 'GREY_3',\n        active: 'BLACK',\n        hover: 'BLACK',\n        disabled: 'GREY_1',\n      },\n      fontWeight: {\n        inactive: 400,\n        active: 500,\n        hover: 500,\n        disabled: 400,\n      },\n    },\n    secondary: {\n      backgroundColorName: {\n        inactive: 'BLACK',\n        active: 'WHITE',\n        hover: 'WHITE',\n        disabled: 'GREY_1',\n      },\n      colorName: {\n        inactive: 'WHITE',\n        active: 'BLACK',\n        hover: 'BLACK',\n        disabled: 'BLACK_50',\n      },\n      borderColorName: {\n        inactive: 'WHITE',\n        active: 'WHITE',\n        hover: 'BLACK',\n        disabled: 'GREY_1',\n      },\n      fontWeight: {\n        inactive: 400,\n        active: 500,\n        hover: 500,\n        disabled: 400,\n      },\n    },\n  };\n\n  return { sizes, variants };\n};\n\nexport default getTabConfig;\n"],"names":["getTabConfig","gutter"],"mappings":"AASM,MAAAA,IAA8B,CAACC,OA+E5B,EAAE,OA9EwC;AAAA,EAC/C,QAAQ;AAAA,IACN,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAS;AAAA,IAC5B,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,QAAQA,IAAS;AAAA,IACjB,mBAAmBA,IAAS;AAAA,IAC5B,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,QAAQA,IAAS;AAAA,IACjB,mBAAmBA;AAAA,IACnB,aAAa;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,IACN,QAAQA,IAAS;AAAA,IACjB,mBAAmBA;AAAA,IACnB,aAAa;AAAA,EACf;AAAA,GA0Dc,UAvD0C;AAAA,EACxD,SAAS;AAAA,IACP,qBAAqB;AAAA,MACnB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,WAAW;AAAA,IACT,qBAAqB;AAAA,MACnB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,EACF;AAAA;"}

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

@@ -1,4 +1,4 @@
-import { jsxs as I, jsx as e, Fragment as Kt } from "react/jsx-runtime";
+import { jsxs as T, jsx as e, Fragment as Kt } from "react/jsx-runtime";
 import { memo as Vt, useMemo as R, useState as A, useRef as U, useCallback as Xt, useEffect as E, useLayoutEffect as Pt } from "react";
 import { IMAGES as jt } from "../../../../assets/images/images.js";
 import Gt from "../../../cue-canvas/cue-canvas.js";
@@ -23,8 +23,8 @@ const Ai = Vt(
     worksheetCompleted: f,
     question: n,
     response: i,
-    nextQuestionId: S,
-    isActive: v,
+    nextQuestionId: v,
+    isActive: S,
     isHidden: M,
     canRender: K,
     loggerRef: O,
@@ -38,7 +38,7 @@ const Ai = Vt(
     background: G = "paper",
     onMediaStateChange: Bt,
     onMarkForReview: xt,
-    userId: Lt,
+    userId: It,
     onPublishStrokes: Y,
     onReceiveStrokes: Z,
     isScribblingEnabled: J,
@@ -47,8 +47,8 @@ const Ai = Vt(
     onPublishMouseMove: k,
     onSubscribeMouseMove: tt,
     setActiveQuestionId: it,
-    canResolveDoubt: Tt,
-    onResolveDoubt: It,
+    canResolveDoubt: Lt,
+    onResolveDoubt: Tt,
     studentId: At,
     responses: Mt,
     subjectiveProps: et
@@ -86,7 +86,7 @@ const Ai = Vt(
       _t,
       H,
       c
-    ]), F = U({}), L = (i == null ? void 0 : i.hintsUsed) ?? 0, [$t] = A((i == null ? void 0 : i.validatedByTeacher) ?? !1), T = U(null), z = U(null), D = R(() => d == null ? void 0 : d.slice(0, L), [d, L]), pt = R(() => c === "TEACHER" || f ? !0 : !i || !i.response || i.responseEdited ? !1 : ot, [i, c, ot, f]), Rt = R(() => {
+    ]), F = U({}), I = (i == null ? void 0 : i.hintsUsed) ?? 0, [$t] = A((i == null ? void 0 : i.validatedByTeacher) ?? !1), L = U(null), z = U(null), D = R(() => d == null ? void 0 : d.slice(0, I), [d, I]), pt = R(() => c === "TEACHER" || f ? !0 : !i || !i.response || i.responseEdited ? !1 : ot, [i, c, ot, f]), Rt = R(() => {
       if (c === "TEACHER") return !0;
       if (Q) {
         const { attemptsHistory: t } = i ?? {};
@@ -96,14 +96,14 @@ const Ai = Vt(
     }, [ct, nt, i, Q, c]), zt = R(
       () => b && f && !at,
       [at, b, f]
-    ), [St, Dt] = A({
+    ), [vt, Dt] = A({
       width: 0,
       height: 0
     }), Ut = Xt((t) => {
       Nt(t);
     }, []);
     return E(() => {
-      T.current && j.observe(T.current);
+      L.current && j.observe(L.current);
     }, [j]), E(() => {
       if (a && (n.type === "clozeassociation" || n.type === "association" || n.type === "clozeformula")) {
         const t = document.querySelectorAll(
@@ -160,7 +160,7 @@ const Ai = Vt(
       r,
       lt
     ]), E(() => {
-      const t = T.current, s = (o) => {
+      const t = L.current, s = (o) => {
         const m = o.querySelector(".lrn_response_wrapper");
         if (!m)
           return 0;
@@ -176,37 +176,37 @@ const Ai = Vt(
           return Math.ceil(
             p + (W ? s(t) : 0)
           );
-        const vt = Math.ceil(
+        const St = Math.ceil(
           p + (W ? s(t) : 0)
         );
-        return Math.abs(vt - o) > 4 ? vt : o;
+        return Math.abs(St - o) > 4 ? St : o;
       });
     }), Pt(() => {
       !B && !M && Wt(r);
     }, [M, B, r, st]), E(() => {
-      (L || gt || b && f) && w.renderMath("mathjax");
-    }, [gt, L, w, b, f]), E(() => {
-      if (H && S && !$t && (i != null && i.validatedByTeacher)) {
+      (I || gt || b && f) && w.renderMath("mathjax");
+    }, [gt, I, w, b, f]), E(() => {
+      if (H && v && !$t && (i != null && i.validatedByTeacher)) {
         const t = setTimeout(() => {
-          B ? Wt(S) : it(S);
+          B ? Wt(v) : it(v);
         }, 1e3);
         return () => {
           clearTimeout(t);
         };
       }
     }, [
-      S,
+      v,
       H,
       $t,
       B,
       it,
       i == null ? void 0 : i.validatedByTeacher
-    ]), /* @__PURE__ */ I(
+    ]), /* @__PURE__ */ T(
       si,
       {
         "data-response-id": r,
         className: `widget-${r}`,
-        ref: T,
+        ref: L,
         $topOffset: st,
         $flexDirection: $ ? "row" : "column",
         $alignItems: $ ? "flex-start" : "center",
@@ -221,17 +221,17 @@ const Ai = Vt(
               }
             }
           ),
-          /* @__PURE__ */ I(
+          /* @__PURE__ */ T(
             li,
             {
               ref: z,
               $width: $ ? "50%" : `${V}px`,
               $minHeight: y ? Math.max(y - 72, rt ?? 0) : Qt,
-              $isActive: v,
+              $isActive: S,
               $paperColor: C,
-              $opacity: v ? 1 : 0.2,
+              $opacity: S ? 1 : 0.2,
               children: [
-                v && !!k && !!tt && q && /* @__PURE__ */ e(
+                S && !!k && !!tt && q && /* @__PURE__ */ e(
                   Yt,
                   {
                     containerRef: z,
@@ -240,12 +240,12 @@ const Ai = Vt(
                     responseId: r
                   }
                 ),
-                /* @__PURE__ */ I(
+                /* @__PURE__ */ T(
                   ui,
                   {
                     className: Ft,
-                    $dropzoneMinWidth: St.width,
-                    $dropzoneMinHeight: St.height,
+                    $dropzoneMinWidth: vt.width,
+                    $dropzoneMinHeight: vt.height,
                     children: [
                       !(x || l || g) && /* @__PURE__ */ e(
                         ti,
@@ -258,14 +258,14 @@ const Ai = Vt(
                           paperColor: C,
                           onMarkForReview: xt,
                           actionbarHeight: yt,
-                          canResolveDoubt: Tt,
-                          onResolveDoubt: It,
+                          canResolveDoubt: Lt,
+                          onResolveDoubt: Tt,
                           worksheetCompleted: f
                         }
                       ),
                       x && /* @__PURE__ */ e(fi, { src: jt.LESSON_OVERVIEW_BANNER }),
                       l && C && /* @__PURE__ */ e(ei, { paperColor: C }),
-                      g ? /* @__PURE__ */ I(Kt, { children: [
+                      g ? /* @__PURE__ */ T(Kt, { children: [
                         h === "practice-basic" && /* @__PURE__ */ e(ni, {}),
                         h === "practice-regular" && /* @__PURE__ */ e(ai, {}),
                         h === "exit-ticket" && /* @__PURE__ */ e(ci, {}),
@@ -278,7 +278,7 @@ const Ai = Vt(
                           appended: a,
                           question: n,
                           response: i == null ? void 0 : i.response,
-                          canRender: K || v,
+                          canRender: K || S,
                           learnosity: w,
                           canForceAppend: c === "TEACHER",
                           isConceptIntro: l,
@@ -290,15 +290,15 @@ const Ai = Vt(
                         Gt,
                         {
                           canRender: K,
-                          canScribble: J && v,
+                          canScribble: J && S,
                           appended: a,
-                          responseId: r,
+                          canvasId: r,
                           width: V,
                           height: Math.max(y, rt ?? 0),
                           onUpdateHeight: Ut,
                           onPublish: Y,
                           onSubscribe: Z,
-                          userId: Lt,
+                          userId: It,
                           initialData: N == null ? void 0 : N[r],
                           userType: c
                         }
@@ -345,7 +345,7 @@ const Ai = Vt(
                         {
                           responses: Mt,
                           response: i,
-                          nextQuestionId: S,
+                          nextQuestionId: v,
                           responseId: r,
                           studentId: At,
                           userType: c,

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

@@ -1 +1 @@
-{"version":3,"file":"worksheet-question.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-question/worksheet-question.tsx"],"sourcesContent":["import type { IWorksheetQuestionProps } from './worksheet-question-types';\n\nimport {\n  memo,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type FC,\n} from 'react';\n\nimport { IMAGES } from '../../../../assets/images/images';\nimport CueCanvas from '../../../cue-canvas/cue-canvas';\nimport Pointer from '../../../pointer-sync/pointer';\nimport FlexView from '../../../ui/layout/flex-view';\nimport EVENTS from '../../constants/events';\nimport { LEARNOSITY_KEYBOARD_HEIGHT, QUESTIONS_GAP } from '../constants';\nimport {\n  getPaperColorByQuestion,\n  isConceptIntroWidget,\n  scrollToQuestion,\n} from '../worksheet-helpers';\nimport QuestionHeader from './header/header';\nimport LearnosityQuestion from './learnosity-question';\nimport QuestionBackdrop from './question-backdrop/question-backdrop';\nimport SubjectiveQuestionReview from './subjective-review';\nimport AdvancedPracticeIntro from './system-intros/advanced-practice-intro';\nimport BasicPracticeIntro from './system-intros/basic-practice-intro';\nimport ExitTicketIntro from './system-intros/exit-ticket-intro';\nimport RegularPracticeIntro from './system-intros/regular-practice-intro';\nimport * as Styled from './worksheet-question-styled';\n\nconst WorksheetQuestion: FC<IWorksheetQuestionProps> = memo(\n  ({\n    userType,\n    signedRequest,\n    worksheetCompleted,\n    question,\n    response,\n    nextQuestionId,\n    isActive,\n    isHidden,\n    canRender,\n    loggerRef,\n    appended,\n    maxQuestionWidth,\n    behavior,\n    layout,\n    actionbarHeight,\n    learnosity,\n    intersectionObserver,\n    background = 'paper',\n    onMediaStateChange,\n    onMarkForReview,\n    userId,\n    onPublishStrokes,\n    onReceiveStrokes,\n    isScribblingEnabled,\n    initialStrokesData,\n    isCanvasEnabled,\n    onPublishMouseMove,\n    onSubscribeMouseMove,\n    setActiveQuestionId,\n    canResolveDoubt,\n    onResolveDoubt,\n    studentId,\n    responses,\n    subjectiveProps,\n  }) => {\n    const paperColor = useMemo(\n      () => (background === 'paper' ? getPaperColorByQuestion(question) : undefined),\n      [background, question],\n    );\n    const [questionHeight, setQuestionHeight] = useState<number | undefined>();\n    const [canvasHeight, setCanvasHeight] = useState<number | undefined>();\n    const {\n      validation,\n      review,\n      maximumAttempts,\n      canExceedAttempts,\n      teacherValidationEnabled,\n      solutionHidden,\n    } = behavior;\n    const { minQuestionHeight, topOffset, questionsScrollable } = layout;\n    const {\n      type: questionType,\n      response_id: responseId,\n      stimulus_review,\n      item_type,\n      instructor_stimulus,\n      metadata: { hints: hintsAvailable, solution, widget_reference },\n      item_reference,\n      question_number,\n      item_number,\n      item_display_number,\n    } = question;\n    const hasStimulusReview = !!stimulus_review;\n    const isLessonOverview = item_type === 'overview';\n    const isConceptIntro = isConceptIntroWidget(instructor_stimulus);\n    const isSystemIntro = instructor_stimulus === 'SystemIntro';\n    const isIntro = isConceptIntro || isSystemIntro;\n    const responseEdited = response?.responseEdited;\n    const wrapperClasses = useMemo(() => {\n      const classes = [];\n\n      if (responseEdited && userType === 'TEACHER') {\n        classes.push('attempting');\n      }\n\n      if (!appended) {\n        classes.push('hidden');\n      }\n\n      if (questionType === 'hotspot') {\n        classes.push('correct-answers-hidden');\n      }\n\n      if (appended && teacherValidationEnabled && questionType === 'clozetext') {\n        if (!isConceptIntro || userType === 'STUDENT') {\n          classes.push('response-hidden');\n        } else {\n          classes.push('response-code-hidden');\n        }\n      }\n\n      if (isLessonOverview) {\n        classes.push('lesson-overview');\n      }\n\n      if (isConceptIntro) {\n        classes.push('concept-intro');\n      }\n\n      if (isSystemIntro) {\n        classes.push('system-intro');\n      }\n\n      return classes.join(' ');\n    }, [\n      appended,\n      isConceptIntro,\n      isLessonOverview,\n      isSystemIntro,\n      questionType,\n      responseEdited,\n      teacherValidationEnabled,\n      userType,\n    ]);\n    const overflowDetectedRef = useRef<Record<string, boolean>>({});\n\n    const hintsUsed = response?.hintsUsed ?? 0;\n    const [validatedByTeacherOnMount] = useState(response?.validatedByTeacher ?? false);\n\n    const questionRef = useRef<HTMLDivElement>(null);\n    const pointerContainerRef = useRef<HTMLDivElement>(null);\n    const hints = useMemo(() => hintsAvailable?.slice(0, hintsUsed), [hintsAvailable, hintsUsed]);\n    const validateResponse = useMemo(() => {\n      if (userType === 'TEACHER') return true;\n\n      if (worksheetCompleted) return true;\n\n      if (!response) return false;\n\n      if (!response.response) return false;\n\n      if (response.responseEdited) return false;\n\n      return validation;\n    }, [response, userType, validation, worksheetCompleted]);\n\n    const showCorrectAnswers = useMemo(() => {\n      if (userType === 'TEACHER') return true;\n\n      if (review) {\n        const { attemptsHistory } = response ?? {};\n        const maximumAttemptsReached = (attemptsHistory?.length ?? 0) >= maximumAttempts;\n\n        return maximumAttemptsReached && !canExceedAttempts;\n      }\n\n      return false;\n    }, [canExceedAttempts, maximumAttempts, response, review, userType]);\n\n    const showSolution = useMemo(\n      () => solution && worksheetCompleted && !solutionHidden,\n      [solutionHidden, solution, worksheetCompleted],\n    );\n\n    const [dropZoneDimensions, setDropZoneDimensions] = useState({\n      width: 0,\n      height: 0,\n    });\n\n    const onUpdateHeight = useCallback((height: number) => {\n      setCanvasHeight(height);\n    }, []);\n\n    useEffect(() => {\n      if (questionRef.current) {\n        intersectionObserver.observe(questionRef.current);\n      }\n    }, [intersectionObserver]);\n\n    useEffect(() => {\n      if (\n        appended &&\n        (question.type === 'clozeassociation' ||\n          question.type === 'association' ||\n          question.type === 'clozeformula')\n      ) {\n        const draggableElements = document.querySelectorAll(\n          `.widget-${question.response_id} .lrn_draggable`,\n        );\n\n        let minWidth = 0;\n        let minHeight = 0;\n\n        draggableElements.forEach(draggableElement => {\n          minWidth = Math.max(minWidth, draggableElement.clientWidth + 33);\n          minHeight = Math.max(minHeight, draggableElement.clientHeight + 1);\n        });\n\n        setDropZoneDimensions({\n          width: question.type !== 'association' ? minWidth : 0,\n          height: minHeight,\n        });\n      }\n    }, [appended, question.response_id, question.type]);\n\n    useEffect(() => {\n      if (appended && validateResponse) {\n        const learnosityQuestion = learnosity.question(responseId);\n\n        if (learnosityQuestion) {\n          learnosityQuestion.validate({\n            showCorrectAnswers,\n          });\n        }\n      }\n    }, [appended, learnosity, responseId, review, showCorrectAnswers, userType, validateResponse]);\n\n    useEffect(() => {\n      const $questionEl = pointerContainerRef.current;\n\n      if (\n        appended &&\n        $questionEl &&\n        loggerRef.current &&\n        overflowDetectedRef.current[responseId] === undefined &&\n        !isConceptIntro &&\n        !isSystemIntro\n      ) {\n        const parentWidth = $questionEl.clientWidth;\n        const nestedElements = $questionEl.querySelectorAll('*');\n\n        for (let i = 0; i < nestedElements.length; i++) {\n          const element = nestedElements[i];\n\n          if (element?.closest('.resize-sensor')) {\n            continue;\n          }\n\n          const elementWidth = element?.clientWidth ?? 0;\n\n          if (elementWidth > parentWidth) {\n            overflowDetectedRef.current[responseId] = true;\n            loggerRef.current(EVENTS.WORKSHEET_V3_GREATER_WIDTH_ELEMENT, {\n              item_reference,\n              widget_reference,\n              question_type: questionType,\n              question_number,\n              responseId,\n              item_number,\n              item_display_number,\n            });\n            break;\n          }\n        }\n\n        overflowDetectedRef.current[responseId] = false;\n      }\n    }, [\n      appended,\n      isConceptIntro,\n      isSystemIntro,\n      item_display_number,\n      item_number,\n      item_reference,\n      loggerRef,\n      questionType,\n      question_number,\n      responseId,\n      widget_reference,\n    ]);\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    useEffect(() => {\n      const $questionEl = questionRef.current;\n\n      const getExtraSpaceNeedForFloatingKeyboard = (questionEl: HTMLDivElement) => {\n        const $responseWrapper = questionEl.querySelector('.lrn_response_wrapper');\n\n        if (!$responseWrapper) {\n          return 0;\n        }\n\n        const questionBottom = questionEl.getBoundingClientRect().bottom;\n        const responseWrapperBottom = $responseWrapper.getBoundingClientRect().bottom;\n        const spaceFromResponseToBottom = Math.abs(questionBottom - responseWrapperBottom);\n\n        if (spaceFromResponseToBottom < LEARNOSITY_KEYBOARD_HEIGHT) {\n          return LEARNOSITY_KEYBOARD_HEIGHT - spaceFromResponseToBottom;\n        }\n\n        return 0;\n      };\n\n      if (appended && $questionEl) {\n        setQuestionHeight(qHeight => {\n          const hasFloatingKeyboard = question.ui_style?.type === 'floating-keyboard';\n          const v3CodeHidden = teacherValidationEnabled && questionType === 'clozetext';\n          const hasKeyboard = hasFloatingKeyboard && !v3CodeHidden;\n          const height = $questionEl.clientHeight;\n\n          if (height === 0) {\n            return qHeight;\n          }\n\n          // If the question has a floating keyboard, we need to add the height of the keyboard to the question height\n          if (!qHeight) {\n            return Math.ceil(\n              height + (hasKeyboard ? getExtraSpaceNeedForFloatingKeyboard($questionEl) : 0),\n            );\n          }\n\n          const newQuestionHeight = Math.ceil(\n            height + (hasKeyboard ? getExtraSpaceNeedForFloatingKeyboard($questionEl) : 0),\n          );\n\n          if (Math.abs(newQuestionHeight - qHeight) > 4) {\n            return newQuestionHeight;\n          }\n\n          return qHeight;\n        });\n      }\n    });\n\n    useLayoutEffect(() => {\n      if (!questionsScrollable && !isHidden) {\n        scrollToQuestion(responseId);\n      }\n    }, [isHidden, questionsScrollable, responseId, topOffset]);\n\n    useEffect(() => {\n      if (hintsUsed || hasStimulusReview || (solution && worksheetCompleted)) {\n        learnosity.renderMath('mathjax');\n      }\n    }, [hasStimulusReview, hintsUsed, learnosity, solution, worksheetCompleted]);\n\n    useEffect(() => {\n      if (\n        teacherValidationEnabled &&\n        nextQuestionId &&\n        !validatedByTeacherOnMount &&\n        response?.validatedByTeacher\n      ) {\n        const timer = setTimeout(() => {\n          if (questionsScrollable) {\n            scrollToQuestion(nextQuestionId);\n          } else {\n            setActiveQuestionId(nextQuestionId);\n          }\n        }, 1000);\n\n        return () => {\n          clearTimeout(timer);\n        };\n      }\n    }, [\n      nextQuestionId,\n      teacherValidationEnabled,\n      validatedByTeacherOnMount,\n      questionsScrollable,\n      setActiveQuestionId,\n      response?.validatedByTeacher,\n    ]);\n\n    return (\n      <Styled.QuestionContainerWrapper\n        data-response-id={responseId}\n        className={`widget-${responseId}`}\n        ref={questionRef}\n        $topOffset={topOffset}\n        $flexDirection={stimulus_review ? 'row' : 'column'}\n        $alignItems={stimulus_review ? 'flex-start' : 'center'}\n        $hidden={isHidden}\n        $marginBottom={QUESTIONS_GAP}\n      >\n        {stimulus_review && (\n          <Styled.StimulusReview\n            dangerouslySetInnerHTML={{\n              __html: stimulus_review,\n            }}\n          />\n        )}\n        <Styled.QuestionContainer\n          ref={pointerContainerRef}\n          $width={stimulus_review ? '50%' : `${maxQuestionWidth}px`}\n          $minHeight={\n            questionHeight ? Math.max(questionHeight - 72, canvasHeight ?? 0) : minQuestionHeight\n          }\n          $isActive={isActive}\n          $paperColor={paperColor}\n          $opacity={isActive ? 1 : 0.2}\n        >\n          {isActive && !!onPublishMouseMove && !!onSubscribeMouseMove && isCanvasEnabled && (\n            <Pointer\n              containerRef={pointerContainerRef}\n              onPublish={onPublishMouseMove}\n              onSubscribe={onSubscribeMouseMove}\n              responseId={responseId}\n            />\n          )}\n          <Styled.QuestionWrapper\n            className={wrapperClasses}\n            $dropzoneMinWidth={dropZoneDimensions.width}\n            $dropzoneMinHeight={dropZoneDimensions.height}\n          >\n            {!(isLessonOverview || isConceptIntro || isSystemIntro) && (\n              <QuestionHeader\n                userType={userType}\n                question={question}\n                response={response}\n                behavior={behavior}\n                layout={layout}\n                paperColor={paperColor}\n                onMarkForReview={onMarkForReview}\n                actionbarHeight={actionbarHeight}\n                canResolveDoubt={canResolveDoubt}\n                onResolveDoubt={onResolveDoubt}\n                worksheetCompleted={worksheetCompleted}\n              />\n            )}\n            {isLessonOverview && (\n              <Styled.LessonOverviewBanner src={IMAGES.LESSON_OVERVIEW_BANNER} />\n            )}\n            {isConceptIntro && paperColor && <QuestionBackdrop paperColor={paperColor} />}\n            {isSystemIntro ? (\n              <>\n                {item_type === 'practice-basic' && <BasicPracticeIntro />}\n                {item_type === 'practice-regular' && <RegularPracticeIntro />}\n                {item_type === 'exit-ticket' && <ExitTicketIntro />}\n                {item_type?.startsWith('advanced-') && <AdvancedPracticeIntro />}\n              </>\n            ) : undefined}\n            <LearnosityQuestion\n              signedRequest={signedRequest}\n              appended={appended}\n              question={question}\n              response={response?.response}\n              canRender={canRender || isActive}\n              learnosity={learnosity}\n              canForceAppend={userType === 'TEACHER'}\n              isConceptIntro={isConceptIntro}\n              simState={response?.simState}\n              onMediaStateChange={onMediaStateChange}\n            />\n\n            {!isIntro &&\n              isCanvasEnabled &&\n              onPublishStrokes &&\n              onReceiveStrokes &&\n              questionHeight !== undefined && (\n                <Styled.CueCanvasWrapper $canScribble={isScribblingEnabled}>\n                  <CueCanvas\n                    canRender={canRender}\n                    canScribble={isScribblingEnabled && isActive}\n                    appended={appended}\n                    responseId={responseId}\n                    width={maxQuestionWidth}\n                    height={Math.max(questionHeight, canvasHeight ?? 0)}\n                    onUpdateHeight={onUpdateHeight}\n                    onPublish={onPublishStrokes}\n                    onSubscribe={onReceiveStrokes}\n                    userId={userId}\n                    initialData={initialStrokesData?.[responseId]}\n                    userType={userType}\n                  />\n                </Styled.CueCanvasWrapper>\n              )}\n            {!isIntro && hints && hints.length > 0 && (\n              <FlexView\n                $background=\"BLUE_1\"\n                $gutterX={1}\n                $gapX={0.5}\n                $borderRadiusX={0}\n                $borderColor=\"BLUE_2\"\n              >\n                {hints.map((hint, index) => (\n                  <Styled.Hint\n                    key={hint}\n                    dangerouslySetInnerHTML={{\n                      __html: `<span style=\"color: #DA5107; font-weight: 600;\">Hint${\n                        (hintsAvailable?.length ?? 0) > 1 ? ` ${index + 1}` : ''\n                      }:</span>&nbsp;${hint}`,\n                    }}\n                  />\n                ))}\n              </FlexView>\n            )}\n            {showSolution && (\n              <FlexView\n                $background=\"YELLOW_1\"\n                $gutterX={1}\n                $gapX={0.875}\n                $borderRadiusX={0}\n                $borderColor=\"YELLOW_2\"\n              >\n                <Styled.Solution\n                  dangerouslySetInnerHTML={{\n                    __html: `<div style=\"color: #DA5107; font-weight: 600;\">Solution:</div>${solution}`,\n                  }}\n                />\n              </FlexView>\n            )}\n            {!!subjectiveProps && (\n              <SubjectiveQuestionReview\n                responses={responses}\n                response={response}\n                nextQuestionId={nextQuestionId}\n                responseId={responseId}\n                studentId={studentId}\n                userType={userType}\n                {...subjectiveProps}\n              />\n            )}\n          </Styled.QuestionWrapper>\n        </Styled.QuestionContainer>\n      </Styled.QuestionContainerWrapper>\n    );\n  },\n);\n\nexport default WorksheetQuestion;\n"],"names":["WorksheetQuestion","memo","userType","signedRequest","worksheetCompleted","question","response","nextQuestionId","isActive","isHidden","canRender","loggerRef","appended","maxQuestionWidth","behavior","layout","actionbarHeight","learnosity","intersectionObserver","background","onMediaStateChange","onMarkForReview","userId","onPublishStrokes","onReceiveStrokes","isScribblingEnabled","initialStrokesData","isCanvasEnabled","onPublishMouseMove","onSubscribeMouseMove","setActiveQuestionId","canResolveDoubt","onResolveDoubt","studentId","responses","subjectiveProps","paperColor","useMemo","getPaperColorByQuestion","questionHeight","setQuestionHeight","useState","canvasHeight","setCanvasHeight","validation","review","maximumAttempts","canExceedAttempts","teacherValidationEnabled","solutionHidden","minQuestionHeight","topOffset","questionsScrollable","questionType","responseId","stimulus_review","item_type","instructor_stimulus","hintsAvailable","solution","widget_reference","item_reference","question_number","item_number","item_display_number","hasStimulusReview","isLessonOverview","isConceptIntro","isConceptIntroWidget","isSystemIntro","isIntro","responseEdited","wrapperClasses","classes","overflowDetectedRef","useRef","hintsUsed","validatedByTeacherOnMount","questionRef","pointerContainerRef","hints","validateResponse","showCorrectAnswers","attemptsHistory","showSolution","dropZoneDimensions","setDropZoneDimensions","onUpdateHeight","useCallback","height","useEffect","draggableElements","minWidth","minHeight","draggableElement","learnosityQuestion","$questionEl","parentWidth","nestedElements","i","element","EVENTS","getExtraSpaceNeedForFloatingKeyboard","questionEl","$responseWrapper","questionBottom","responseWrapperBottom","spaceFromResponseToBottom","LEARNOSITY_KEYBOARD_HEIGHT","qHeight","hasKeyboard","_a","newQuestionHeight","useLayoutEffect","scrollToQuestion","timer","jsxs","Styled.QuestionContainerWrapper","QUESTIONS_GAP","jsx","Styled.StimulusReview","Styled.QuestionContainer","Pointer","Styled.QuestionWrapper","QuestionHeader","Styled.LessonOverviewBanner","IMAGES","QuestionBackdrop","Fragment","BasicPracticeIntro","RegularPracticeIntro","ExitTicketIntro","AdvancedPracticeIntro","LearnosityQuestion","Styled.CueCanvasWrapper","CueCanvas","FlexView","hint","index","Styled.Hint","Styled.Solution","SubjectiveQuestionReview"],"mappings":";;;;;;;;;;;;;;;;;;AAkCA,MAAMA,KAAiDC;AAAA,EACrD,CAAC;AAAA,IACC,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,oBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,QAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,iBAAAC;AAAA,EAAA,MACI;AACJ,UAAMC,IAAaC;AAAA,MACjB,MAAOlB,MAAe,UAAUmB,GAAwBjC,CAAQ,IAAI;AAAA,MACpE,CAACc,GAAYd,CAAQ;AAAA,IAAA,GAEjB,CAACkC,GAAgBC,EAAiB,IAAIC,EAA6B,GACnE,CAACC,IAAcC,EAAe,IAAIF,EAA6B,GAC/D;AAAA,MACJ,YAAAG;AAAA,MACA,QAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,0BAAAC;AAAA,MACA,gBAAAC;AAAA,IACE,IAAAnC,GACE,EAAE,mBAAAoC,IAAmB,WAAAC,IAAW,qBAAAC,EAAA,IAAwBrC,GACxD;AAAA,MACJ,MAAMsC;AAAA,MACN,aAAaC;AAAA,MACb,iBAAAC;AAAA,MACA,WAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,UAAU,EAAE,OAAOC,GAAgB,UAAAC,GAAU,kBAAAC,GAAiB;AAAA,MAC9D,gBAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,aAAAC;AAAA,MACA,qBAAAC;AAAA,IACE,IAAA3D,GACE4D,KAAoB,CAAC,CAACV,GACtBW,IAAmBV,MAAc,YACjCW,IAAiBC,GAAqBX,EAAmB,GACzDY,IAAgBZ,OAAwB,eACxCa,KAAUH,KAAkBE,GAC5BE,KAAiBjE,KAAA,gBAAAA,EAAU,gBAC3BkE,KAAiBnC,EAAQ,MAAM;AACnC,YAAMoC,IAAU,CAAA;AAEZ,aAAAF,MAAkBrE,MAAa,aACjCuE,EAAQ,KAAK,YAAY,GAGtB7D,KACH6D,EAAQ,KAAK,QAAQ,GAGnBpB,MAAiB,aACnBoB,EAAQ,KAAK,wBAAwB,GAGnC7D,KAAYoC,KAA4BK,MAAiB,gBACvD,CAACc,KAAkBjE,MAAa,YAClCuE,EAAQ,KAAK,iBAAiB,IAE9BA,EAAQ,KAAK,sBAAsB,IAInCP,KACFO,EAAQ,KAAK,iBAAiB,GAG5BN,KACFM,EAAQ,KAAK,eAAe,GAG1BJ,KACFI,EAAQ,KAAK,cAAc,GAGtBA,EAAQ,KAAK,GAAG;AAAA,IAAA,GACtB;AAAA,MACD7D;AAAA,MACAuD;AAAA,MACAD;AAAA,MACAG;AAAA,MACAhB;AAAA,MACAkB;AAAA,MACAvB;AAAA,MACA9C;AAAA,IAAA,CACD,GACKwE,IAAsBC,EAAgC,CAAA,CAAE,GAExDC,KAAYtE,KAAA,gBAAAA,EAAU,cAAa,GACnC,CAACuE,EAAyB,IAAIpC,GAASnC,KAAA,gBAAAA,EAAU,uBAAsB,EAAK,GAE5EwE,IAAcH,EAAuB,IAAI,GACzCI,IAAsBJ,EAAuB,IAAI,GACjDK,IAAQ3C,EAAQ,MAAMqB,KAAA,gBAAAA,EAAgB,MAAM,GAAGkB,IAAY,CAAClB,GAAgBkB,CAAS,CAAC,GACtFK,KAAmB5C,EAAQ,MAC3BnC,MAAa,aAEbE,IAA2B,KAE3B,CAACE,KAED,CAACA,EAAS,YAEVA,EAAS,iBAAuB,KAE7BsC,IACN,CAACtC,GAAUJ,GAAU0C,IAAYxC,CAAkB,CAAC,GAEjD8E,KAAqB7C,EAAQ,MAAM;AACnC,UAAAnC,MAAa,UAAkB,QAAA;AAEnC,UAAI2C,GAAQ;AACV,cAAM,EAAE,iBAAAsC,EAAA,IAAoB7E,KAAY;AAGxC,iBAFgC6E,KAAA,gBAAAA,EAAiB,WAAU,MAAMrC,MAEhC,CAACC;AAAA,MACpC;AAEO,aAAA;AAAA,IAAA,GACN,CAACA,IAAmBD,IAAiBxC,GAAUuC,GAAQ3C,CAAQ,CAAC,GAE7DkF,KAAe/C;AAAA,MACnB,MAAMsB,KAAYvD,KAAsB,CAAC6C;AAAA,MACzC,CAACA,IAAgBU,GAAUvD,CAAkB;AAAA,IAAA,GAGzC,CAACiF,IAAoBC,EAAqB,IAAI7C,EAAS;AAAA,MAC3D,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA,CACT,GAEK8C,KAAiBC,GAAY,CAACC,MAAmB;AACrD,MAAA9C,GAAgB8C,CAAM;AAAA,IACxB,GAAG,CAAE,CAAA;AAEL,WAAAC,EAAU,MAAM;AACd,MAAIZ,EAAY,WACO5D,EAAA,QAAQ4D,EAAY,OAAO;AAAA,IAClD,GACC,CAAC5D,CAAoB,CAAC,GAEzBwE,EAAU,MAAM;AAEZ,UAAA9E,MACCP,EAAS,SAAS,sBACjBA,EAAS,SAAS,iBAClBA,EAAS,SAAS,iBACpB;AACA,cAAMsF,IAAoB,SAAS;AAAA,UACjC,WAAWtF,EAAS,WAAW;AAAA,QAAA;AAGjC,YAAIuF,IAAW,GACXC,IAAY;AAEhB,QAAAF,EAAkB,QAAQ,CAAoBG,MAAA;AAC5C,UAAAF,IAAW,KAAK,IAAIA,GAAUE,EAAiB,cAAc,EAAE,GAC/DD,IAAY,KAAK,IAAIA,GAAWC,EAAiB,eAAe,CAAC;AAAA,QAAA,CAClE,GAEqBR,GAAA;AAAA,UACpB,OAAOjF,EAAS,SAAS,gBAAgBuF,IAAW;AAAA,UACpD,QAAQC;AAAA,QAAA,CACT;AAAA,MACH;AAAA,IAAA,GACC,CAACjF,GAAUP,EAAS,aAAaA,EAAS,IAAI,CAAC,GAElDqF,EAAU,MAAM;AACd,UAAI9E,KAAYqE,IAAkB;AAC1B,cAAAc,IAAqB9E,EAAW,SAASqC,CAAU;AAEzD,QAAIyC,KACFA,EAAmB,SAAS;AAAA,UAC1B,oBAAAb;AAAA,QAAA,CACD;AAAA,MAEL;AAAA,IAAA,GACC,CAACtE,GAAUK,GAAYqC,GAAYT,GAAQqC,IAAoBhF,GAAU+E,EAAgB,CAAC,GAE7FS,EAAU,MAAM;AACd,YAAMM,IAAcjB,EAAoB;AAExC,UACEnE,KACAoF,KACArF,EAAU,WACV+D,EAAoB,QAAQpB,CAAU,MAAM,UAC5C,CAACa,KACD,CAACE,GACD;AACA,cAAM4B,IAAcD,EAAY,aAC1BE,IAAiBF,EAAY,iBAAiB,GAAG;AAEvD,iBAASG,IAAI,GAAGA,IAAID,EAAe,QAAQC,KAAK;AACxC,gBAAAC,IAAUF,EAAeC,CAAC;AAE5B,cAAAC,KAAA,QAAAA,EAAS,QAAQ;AACnB;AAKF,gBAFqBA,KAAA,gBAAAA,EAAS,gBAAe,KAE1BH,GAAa;AACV,YAAAvB,EAAA,QAAQpB,CAAU,IAAI,IAChC3C,EAAA,QAAQ0F,GAAO,oCAAoC;AAAA,cAC3D,gBAAAxC;AAAA,cACA,kBAAAD;AAAA,cACA,eAAeP;AAAA,cACf,iBAAAS;AAAA,cACA,YAAAR;AAAA,cACA,aAAAS;AAAA,cACA,qBAAAC;AAAA,YAAA,CACD;AACD;AAAA,UACF;AAAA,QACF;AAEoB,QAAAU,EAAA,QAAQpB,CAAU,IAAI;AAAA,MAC5C;AAAA,IAAA,GACC;AAAA,MACD1C;AAAA,MACAuD;AAAA,MACAE;AAAA,MACAL;AAAA,MACAD;AAAA,MACAF;AAAA,MACAlD;AAAA,MACA0C;AAAA,MACAS;AAAA,MACAR;AAAA,MACAM;AAAA,IAAA,CACD,GAGD8B,EAAU,MAAM;AACd,YAAMM,IAAclB,EAAY,SAE1BwB,IAAuC,CAACC,MAA+B;AACrE,cAAAC,IAAmBD,EAAW,cAAc,uBAAuB;AAEzE,YAAI,CAACC;AACI,iBAAA;AAGH,cAAAC,IAAiBF,EAAW,sBAAA,EAAwB,QACpDG,IAAwBF,EAAiB,sBAAA,EAAwB,QACjEG,IAA4B,KAAK,IAAIF,IAAiBC,CAAqB;AAEjF,eAAIC,IAA4BC,KACvBA,KAA6BD,IAG/B;AAAA,MAAA;AAGT,MAAI/F,KAAYoF,KACdxD,GAAkB,CAAWqE,MAAA;;AAGrB,cAAAC,MAFsBC,KAAA1G,EAAS,aAAT,gBAAA0G,GAAmB,UAAS,uBAEb,EADtB/D,KAA4BK,MAAiB,cAE5DoC,IAASO,EAAY;AAE3B,YAAIP,MAAW;AACN,iBAAAoB;AAIT,YAAI,CAACA;AACH,iBAAO,KAAK;AAAA,YACVpB,KAAUqB,IAAcR,EAAqCN,CAAW,IAAI;AAAA,UAAA;AAIhF,cAAMgB,KAAoB,KAAK;AAAA,UAC7BvB,KAAUqB,IAAcR,EAAqCN,CAAW,IAAI;AAAA,QAAA;AAG9E,eAAI,KAAK,IAAIgB,KAAoBH,CAAO,IAAI,IACnCG,KAGFH;AAAA,MAAA,CACR;AAAA,IACH,CACD,GAEDI,GAAgB,MAAM;AAChB,MAAA,CAAC7D,KAAuB,CAAC3C,KAC3ByG,GAAiB5D,CAAU;AAAA,OAE5B,CAAC7C,GAAU2C,GAAqBE,GAAYH,EAAS,CAAC,GAEzDuC,EAAU,MAAM;AACV,OAAAd,KAAaX,MAAsBN,KAAYvD,MACjDa,EAAW,WAAW,SAAS;AAAA,IACjC,GACC,CAACgD,IAAmBW,GAAW3D,GAAY0C,GAAUvD,CAAkB,CAAC,GAE3EsF,EAAU,MAAM;AACd,UACE1C,KACAzC,KACA,CAACsE,OACDvE,KAAA,QAAAA,EAAU,qBACV;AACM,cAAA6G,IAAQ,WAAW,MAAM;AAC7B,UAAI/D,IACF8D,GAAiB3G,CAAc,IAE/BuB,GAAoBvB,CAAc;AAAA,WAEnC,GAAI;AAEP,eAAO,MAAM;AACX,uBAAa4G,CAAK;AAAA,QAAA;AAAA,MAEtB;AAAA,IAAA,GACC;AAAA,MACD5G;AAAA,MACAyC;AAAA,MACA6B;AAAA,MACAzB;AAAA,MACAtB;AAAA,MACAxB,KAAA,gBAAAA,EAAU;AAAA,IAAA,CACX,GAGC,gBAAA8G;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,oBAAkB/D;AAAA,QAClB,WAAW,UAAUA,CAAU;AAAA,QAC/B,KAAKwB;AAAA,QACL,YAAY3B;AAAA,QACZ,gBAAgBI,IAAkB,QAAQ;AAAA,QAC1C,aAAaA,IAAkB,eAAe;AAAA,QAC9C,SAAS9C;AAAA,QACT,eAAe6G;AAAA,QAEd,UAAA;AAAA,UACC/D,KAAA,gBAAAgE;AAAA,YAACC;AAAAA,YAAA;AAAA,cACC,yBAAyB;AAAA,gBACvB,QAAQjE;AAAA,cACV;AAAA,YAAA;AAAA,UACF;AAAA,UAEF,gBAAA6D;AAAA,YAACK;AAAAA,YAAA;AAAA,cACC,KAAK1C;AAAA,cACL,QAAQxB,IAAkB,QAAQ,GAAG1C,CAAgB;AAAA,cACrD,YACE0B,IAAiB,KAAK,IAAIA,IAAiB,IAAIG,MAAgB,CAAC,IAAIQ;AAAA,cAEtE,WAAW1C;AAAA,cACX,aAAa4B;AAAA,cACb,UAAU5B,IAAW,IAAI;AAAA,cAExB,UAAA;AAAA,gBAAAA,KAAY,CAAC,CAACoB,KAAsB,CAAC,CAACC,MAAwBF,KAC7D,gBAAA4F;AAAA,kBAACG;AAAA,kBAAA;AAAA,oBACC,cAAc3C;AAAA,oBACd,WAAWnD;AAAA,oBACX,aAAaC;AAAA,oBACb,YAAAyB;AAAA,kBAAA;AAAA,gBACF;AAAA,gBAEF,gBAAA8D;AAAA,kBAACO;AAAAA,kBAAA;AAAA,oBACC,WAAWnD;AAAA,oBACX,mBAAmBa,GAAmB;AAAA,oBACtC,oBAAoBA,GAAmB;AAAA,oBAEtC,UAAA;AAAA,sBAAE,EAAAnB,KAAoBC,KAAkBE,MACvC,gBAAAkD;AAAA,wBAACK;AAAA,wBAAA;AAAA,0BACC,UAAA1H;AAAA,0BACA,UAAAG;AAAA,0BACA,UAAAC;AAAA,0BACA,UAAAQ;AAAA,0BACA,QAAAC;AAAA,0BACA,YAAAqB;AAAA,0BACA,iBAAAf;AAAA,0BACA,iBAAAL;AAAA,0BACA,iBAAAe;AAAA,0BACA,gBAAAC;AAAA,0BACA,oBAAA5B;AAAA,wBAAA;AAAA,sBACF;AAAA,sBAED8D,KACE,gBAAAqD,EAAAM,IAAA,EAA4B,KAAKC,GAAO,wBAAwB;AAAA,sBAElE3D,KAAkB/B,KAAe,gBAAAmF,EAAAQ,IAAA,EAAiB,YAAA3F,EAAwB,CAAA;AAAA,sBAC1EiC,IAEI,gBAAA+C,EAAAY,IAAA,EAAA,UAAA;AAAA,wBAAcxE,MAAA,sCAAqByE,IAAmB,CAAA,CAAA;AAAA,wBACtDzE,MAAc,sBAAsB,gBAAA+D,EAACW,IAAqB,CAAA,CAAA;AAAA,wBAC1D1E,MAAc,iBAAiB,gBAAA+D,EAACY,IAAgB,CAAA,CAAA;AAAA,yBAChD3E,KAAA,gBAAAA,EAAW,WAAW,mCAAiB4E,IAAsB,CAAA,CAAA;AAAA,sBAAA,EAChE,CAAA,IACE;AAAA,sBACJ,gBAAAb;AAAA,wBAACc;AAAA,wBAAA;AAAA,0BACC,eAAAlI;AAAA,0BACA,UAAAS;AAAA,0BACA,UAAAP;AAAA,0BACA,UAAUC,KAAA,gBAAAA,EAAU;AAAA,0BACpB,WAAWI,KAAaF;AAAA,0BACxB,YAAAS;AAAA,0BACA,gBAAgBf,MAAa;AAAA,0BAC7B,gBAAAiE;AAAA,0BACA,UAAU7D,KAAA,gBAAAA,EAAU;AAAA,0BACpB,oBAAAc;AAAA,wBAAA;AAAA,sBACF;AAAA,sBAEC,CAACkD,MACA3C,KACAJ,KACAC,KACAe,MAAmB,UACjB,gBAAAgF,EAACe,IAAA,EAAwB,cAAc7G,GACrC,UAAA,gBAAA8F;AAAA,wBAACgB;AAAA,wBAAA;AAAA,0BACC,WAAA7H;AAAA,0BACA,aAAae,KAAuBjB;AAAA,0BACpC,UAAAI;AAAA,0BACA,YAAA0C;AAAA,0BACA,OAAOzC;AAAA,0BACP,QAAQ,KAAK,IAAI0B,GAAgBG,MAAgB,CAAC;AAAA,0BAClD,gBAAA6C;AAAA,0BACA,WAAWhE;AAAA,0BACX,aAAaC;AAAA,0BACb,QAAAF;AAAA,0BACA,aAAaI,KAAA,gBAAAA,EAAqB4B;AAAA,0BAClC,UAAApD;AAAA,wBAAA;AAAA,sBAAA,GAEJ;AAAA,sBAEH,CAACoE,MAAWU,KAASA,EAAM,SAAS,KACnC,gBAAAuC;AAAA,wBAACiB;AAAA,wBAAA;AAAA,0BACC,aAAY;AAAA,0BACZ,UAAU;AAAA,0BACV,OAAO;AAAA,0BACP,gBAAgB;AAAA,0BAChB,cAAa;AAAA,0BAEZ,UAAMxD,EAAA,IAAI,CAACyD,GAAMC,MAChB,gBAAAnB;AAAA,4BAACoB;AAAAA,4BAAA;AAAA,8BAEC,yBAAyB;AAAA,gCACvB,QAAQ,yDACLjF,KAAA,gBAAAA,EAAgB,WAAU,KAAK,IAAI,IAAIgF,IAAQ,CAAC,KAAK,EACxD,iBAAiBD,CAAI;AAAA,8BACvB;AAAA,4BAAA;AAAA,4BALKA;AAAA,0BAAA,CAOR;AAAA,wBAAA;AAAA,sBACH;AAAA,sBAEDrD,MACC,gBAAAmC;AAAA,wBAACiB;AAAA,wBAAA;AAAA,0BACC,aAAY;AAAA,0BACZ,UAAU;AAAA,0BACV,OAAO;AAAA,0BACP,gBAAgB;AAAA,0BAChB,cAAa;AAAA,0BAEb,UAAA,gBAAAjB;AAAA,4BAACqB;AAAAA,4BAAA;AAAA,8BACC,yBAAyB;AAAA,gCACvB,QAAQ,iEAAiEjF,CAAQ;AAAA,8BACnF;AAAA,4BAAA;AAAA,0BACF;AAAA,wBAAA;AAAA,sBACF;AAAA,sBAED,CAAC,CAACxB,MACD,gBAAAoF;AAAA,wBAACsB;AAAA,wBAAA;AAAA,0BACC,WAAA3G;AAAA,0BACA,UAAA5B;AAAA,0BACA,gBAAAC;AAAA,0BACA,YAAA+C;AAAA,0BACA,WAAArB;AAAA,0BACA,UAAA/B;AAAA,0BACC,GAAGiC;AAAA,wBAAA;AAAA,sBACN;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAEJ;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"worksheet-question.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-question/worksheet-question.tsx"],"sourcesContent":["import type { IWorksheetQuestionProps } from './worksheet-question-types';\n\nimport {\n  memo,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type FC,\n} from 'react';\n\nimport { IMAGES } from '../../../../assets/images/images';\nimport CueCanvas from '../../../cue-canvas/cue-canvas';\nimport Pointer from '../../../pointer-sync/pointer';\nimport FlexView from '../../../ui/layout/flex-view';\nimport EVENTS from '../../constants/events';\nimport { LEARNOSITY_KEYBOARD_HEIGHT, QUESTIONS_GAP } from '../constants';\nimport {\n  getPaperColorByQuestion,\n  isConceptIntroWidget,\n  scrollToQuestion,\n} from '../worksheet-helpers';\nimport QuestionHeader from './header/header';\nimport LearnosityQuestion from './learnosity-question';\nimport QuestionBackdrop from './question-backdrop/question-backdrop';\nimport SubjectiveQuestionReview from './subjective-review';\nimport AdvancedPracticeIntro from './system-intros/advanced-practice-intro';\nimport BasicPracticeIntro from './system-intros/basic-practice-intro';\nimport ExitTicketIntro from './system-intros/exit-ticket-intro';\nimport RegularPracticeIntro from './system-intros/regular-practice-intro';\nimport * as Styled from './worksheet-question-styled';\n\nconst WorksheetQuestion: FC<IWorksheetQuestionProps> = memo(\n  ({\n    userType,\n    signedRequest,\n    worksheetCompleted,\n    question,\n    response,\n    nextQuestionId,\n    isActive,\n    isHidden,\n    canRender,\n    loggerRef,\n    appended,\n    maxQuestionWidth,\n    behavior,\n    layout,\n    actionbarHeight,\n    learnosity,\n    intersectionObserver,\n    background = 'paper',\n    onMediaStateChange,\n    onMarkForReview,\n    userId,\n    onPublishStrokes,\n    onReceiveStrokes,\n    isScribblingEnabled,\n    initialStrokesData,\n    isCanvasEnabled,\n    onPublishMouseMove,\n    onSubscribeMouseMove,\n    setActiveQuestionId,\n    canResolveDoubt,\n    onResolveDoubt,\n    studentId,\n    responses,\n    subjectiveProps,\n  }) => {\n    const paperColor = useMemo(\n      () => (background === 'paper' ? getPaperColorByQuestion(question) : undefined),\n      [background, question],\n    );\n    const [questionHeight, setQuestionHeight] = useState<number | undefined>();\n    const [canvasHeight, setCanvasHeight] = useState<number | undefined>();\n    const {\n      validation,\n      review,\n      maximumAttempts,\n      canExceedAttempts,\n      teacherValidationEnabled,\n      solutionHidden,\n    } = behavior;\n    const { minQuestionHeight, topOffset, questionsScrollable } = layout;\n    const {\n      type: questionType,\n      response_id: responseId,\n      stimulus_review,\n      item_type,\n      instructor_stimulus,\n      metadata: { hints: hintsAvailable, solution, widget_reference },\n      item_reference,\n      question_number,\n      item_number,\n      item_display_number,\n    } = question;\n    const hasStimulusReview = !!stimulus_review;\n    const isLessonOverview = item_type === 'overview';\n    const isConceptIntro = isConceptIntroWidget(instructor_stimulus);\n    const isSystemIntro = instructor_stimulus === 'SystemIntro';\n    const isIntro = isConceptIntro || isSystemIntro;\n    const responseEdited = response?.responseEdited;\n    const wrapperClasses = useMemo(() => {\n      const classes = [];\n\n      if (responseEdited && userType === 'TEACHER') {\n        classes.push('attempting');\n      }\n\n      if (!appended) {\n        classes.push('hidden');\n      }\n\n      if (questionType === 'hotspot') {\n        classes.push('correct-answers-hidden');\n      }\n\n      if (appended && teacherValidationEnabled && questionType === 'clozetext') {\n        if (!isConceptIntro || userType === 'STUDENT') {\n          classes.push('response-hidden');\n        } else {\n          classes.push('response-code-hidden');\n        }\n      }\n\n      if (isLessonOverview) {\n        classes.push('lesson-overview');\n      }\n\n      if (isConceptIntro) {\n        classes.push('concept-intro');\n      }\n\n      if (isSystemIntro) {\n        classes.push('system-intro');\n      }\n\n      return classes.join(' ');\n    }, [\n      appended,\n      isConceptIntro,\n      isLessonOverview,\n      isSystemIntro,\n      questionType,\n      responseEdited,\n      teacherValidationEnabled,\n      userType,\n    ]);\n    const overflowDetectedRef = useRef<Record<string, boolean>>({});\n\n    const hintsUsed = response?.hintsUsed ?? 0;\n    const [validatedByTeacherOnMount] = useState(response?.validatedByTeacher ?? false);\n\n    const questionRef = useRef<HTMLDivElement>(null);\n    const pointerContainerRef = useRef<HTMLDivElement>(null);\n    const hints = useMemo(() => hintsAvailable?.slice(0, hintsUsed), [hintsAvailable, hintsUsed]);\n    const validateResponse = useMemo(() => {\n      if (userType === 'TEACHER') return true;\n\n      if (worksheetCompleted) return true;\n\n      if (!response) return false;\n\n      if (!response.response) return false;\n\n      if (response.responseEdited) return false;\n\n      return validation;\n    }, [response, userType, validation, worksheetCompleted]);\n\n    const showCorrectAnswers = useMemo(() => {\n      if (userType === 'TEACHER') return true;\n\n      if (review) {\n        const { attemptsHistory } = response ?? {};\n        const maximumAttemptsReached = (attemptsHistory?.length ?? 0) >= maximumAttempts;\n\n        return maximumAttemptsReached && !canExceedAttempts;\n      }\n\n      return false;\n    }, [canExceedAttempts, maximumAttempts, response, review, userType]);\n\n    const showSolution = useMemo(\n      () => solution && worksheetCompleted && !solutionHidden,\n      [solutionHidden, solution, worksheetCompleted],\n    );\n\n    const [dropZoneDimensions, setDropZoneDimensions] = useState({\n      width: 0,\n      height: 0,\n    });\n\n    const onUpdateHeight = useCallback((height: number) => {\n      setCanvasHeight(height);\n    }, []);\n\n    useEffect(() => {\n      if (questionRef.current) {\n        intersectionObserver.observe(questionRef.current);\n      }\n    }, [intersectionObserver]);\n\n    useEffect(() => {\n      if (\n        appended &&\n        (question.type === 'clozeassociation' ||\n          question.type === 'association' ||\n          question.type === 'clozeformula')\n      ) {\n        const draggableElements = document.querySelectorAll(\n          `.widget-${question.response_id} .lrn_draggable`,\n        );\n\n        let minWidth = 0;\n        let minHeight = 0;\n\n        draggableElements.forEach(draggableElement => {\n          minWidth = Math.max(minWidth, draggableElement.clientWidth + 33);\n          minHeight = Math.max(minHeight, draggableElement.clientHeight + 1);\n        });\n\n        setDropZoneDimensions({\n          width: question.type !== 'association' ? minWidth : 0,\n          height: minHeight,\n        });\n      }\n    }, [appended, question.response_id, question.type]);\n\n    useEffect(() => {\n      if (appended && validateResponse) {\n        const learnosityQuestion = learnosity.question(responseId);\n\n        if (learnosityQuestion) {\n          learnosityQuestion.validate({\n            showCorrectAnswers,\n          });\n        }\n      }\n    }, [appended, learnosity, responseId, review, showCorrectAnswers, userType, validateResponse]);\n\n    useEffect(() => {\n      const $questionEl = pointerContainerRef.current;\n\n      if (\n        appended &&\n        $questionEl &&\n        loggerRef.current &&\n        overflowDetectedRef.current[responseId] === undefined &&\n        !isConceptIntro &&\n        !isSystemIntro\n      ) {\n        const parentWidth = $questionEl.clientWidth;\n        const nestedElements = $questionEl.querySelectorAll('*');\n\n        for (let i = 0; i < nestedElements.length; i++) {\n          const element = nestedElements[i];\n\n          if (element?.closest('.resize-sensor')) {\n            continue;\n          }\n\n          const elementWidth = element?.clientWidth ?? 0;\n\n          if (elementWidth > parentWidth) {\n            overflowDetectedRef.current[responseId] = true;\n            loggerRef.current(EVENTS.WORKSHEET_V3_GREATER_WIDTH_ELEMENT, {\n              item_reference,\n              widget_reference,\n              question_type: questionType,\n              question_number,\n              responseId,\n              item_number,\n              item_display_number,\n            });\n            break;\n          }\n        }\n\n        overflowDetectedRef.current[responseId] = false;\n      }\n    }, [\n      appended,\n      isConceptIntro,\n      isSystemIntro,\n      item_display_number,\n      item_number,\n      item_reference,\n      loggerRef,\n      questionType,\n      question_number,\n      responseId,\n      widget_reference,\n    ]);\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    useEffect(() => {\n      const $questionEl = questionRef.current;\n\n      const getExtraSpaceNeedForFloatingKeyboard = (questionEl: HTMLDivElement) => {\n        const $responseWrapper = questionEl.querySelector('.lrn_response_wrapper');\n\n        if (!$responseWrapper) {\n          return 0;\n        }\n\n        const questionBottom = questionEl.getBoundingClientRect().bottom;\n        const responseWrapperBottom = $responseWrapper.getBoundingClientRect().bottom;\n        const spaceFromResponseToBottom = Math.abs(questionBottom - responseWrapperBottom);\n\n        if (spaceFromResponseToBottom < LEARNOSITY_KEYBOARD_HEIGHT) {\n          return LEARNOSITY_KEYBOARD_HEIGHT - spaceFromResponseToBottom;\n        }\n\n        return 0;\n      };\n\n      if (appended && $questionEl) {\n        setQuestionHeight(qHeight => {\n          const hasFloatingKeyboard = question.ui_style?.type === 'floating-keyboard';\n          const v3CodeHidden = teacherValidationEnabled && questionType === 'clozetext';\n          const hasKeyboard = hasFloatingKeyboard && !v3CodeHidden;\n          const height = $questionEl.clientHeight;\n\n          if (height === 0) {\n            return qHeight;\n          }\n\n          // If the question has a floating keyboard, we need to add the height of the keyboard to the question height\n          if (!qHeight) {\n            return Math.ceil(\n              height + (hasKeyboard ? getExtraSpaceNeedForFloatingKeyboard($questionEl) : 0),\n            );\n          }\n\n          const newQuestionHeight = Math.ceil(\n            height + (hasKeyboard ? getExtraSpaceNeedForFloatingKeyboard($questionEl) : 0),\n          );\n\n          if (Math.abs(newQuestionHeight - qHeight) > 4) {\n            return newQuestionHeight;\n          }\n\n          return qHeight;\n        });\n      }\n    });\n\n    useLayoutEffect(() => {\n      if (!questionsScrollable && !isHidden) {\n        scrollToQuestion(responseId);\n      }\n    }, [isHidden, questionsScrollable, responseId, topOffset]);\n\n    useEffect(() => {\n      if (hintsUsed || hasStimulusReview || (solution && worksheetCompleted)) {\n        learnosity.renderMath('mathjax');\n      }\n    }, [hasStimulusReview, hintsUsed, learnosity, solution, worksheetCompleted]);\n\n    useEffect(() => {\n      if (\n        teacherValidationEnabled &&\n        nextQuestionId &&\n        !validatedByTeacherOnMount &&\n        response?.validatedByTeacher\n      ) {\n        const timer = setTimeout(() => {\n          if (questionsScrollable) {\n            scrollToQuestion(nextQuestionId);\n          } else {\n            setActiveQuestionId(nextQuestionId);\n          }\n        }, 1000);\n\n        return () => {\n          clearTimeout(timer);\n        };\n      }\n    }, [\n      nextQuestionId,\n      teacherValidationEnabled,\n      validatedByTeacherOnMount,\n      questionsScrollable,\n      setActiveQuestionId,\n      response?.validatedByTeacher,\n    ]);\n\n    return (\n      <Styled.QuestionContainerWrapper\n        data-response-id={responseId}\n        className={`widget-${responseId}`}\n        ref={questionRef}\n        $topOffset={topOffset}\n        $flexDirection={stimulus_review ? 'row' : 'column'}\n        $alignItems={stimulus_review ? 'flex-start' : 'center'}\n        $hidden={isHidden}\n        $marginBottom={QUESTIONS_GAP}\n      >\n        {stimulus_review && (\n          <Styled.StimulusReview\n            dangerouslySetInnerHTML={{\n              __html: stimulus_review,\n            }}\n          />\n        )}\n        <Styled.QuestionContainer\n          ref={pointerContainerRef}\n          $width={stimulus_review ? '50%' : `${maxQuestionWidth}px`}\n          $minHeight={\n            questionHeight ? Math.max(questionHeight - 72, canvasHeight ?? 0) : minQuestionHeight\n          }\n          $isActive={isActive}\n          $paperColor={paperColor}\n          $opacity={isActive ? 1 : 0.2}\n        >\n          {isActive && !!onPublishMouseMove && !!onSubscribeMouseMove && isCanvasEnabled && (\n            <Pointer\n              containerRef={pointerContainerRef}\n              onPublish={onPublishMouseMove}\n              onSubscribe={onSubscribeMouseMove}\n              responseId={responseId}\n            />\n          )}\n          <Styled.QuestionWrapper\n            className={wrapperClasses}\n            $dropzoneMinWidth={dropZoneDimensions.width}\n            $dropzoneMinHeight={dropZoneDimensions.height}\n          >\n            {!(isLessonOverview || isConceptIntro || isSystemIntro) && (\n              <QuestionHeader\n                userType={userType}\n                question={question}\n                response={response}\n                behavior={behavior}\n                layout={layout}\n                paperColor={paperColor}\n                onMarkForReview={onMarkForReview}\n                actionbarHeight={actionbarHeight}\n                canResolveDoubt={canResolveDoubt}\n                onResolveDoubt={onResolveDoubt}\n                worksheetCompleted={worksheetCompleted}\n              />\n            )}\n            {isLessonOverview && (\n              <Styled.LessonOverviewBanner src={IMAGES.LESSON_OVERVIEW_BANNER} />\n            )}\n            {isConceptIntro && paperColor && <QuestionBackdrop paperColor={paperColor} />}\n            {isSystemIntro ? (\n              <>\n                {item_type === 'practice-basic' && <BasicPracticeIntro />}\n                {item_type === 'practice-regular' && <RegularPracticeIntro />}\n                {item_type === 'exit-ticket' && <ExitTicketIntro />}\n                {item_type?.startsWith('advanced-') && <AdvancedPracticeIntro />}\n              </>\n            ) : undefined}\n            <LearnosityQuestion\n              signedRequest={signedRequest}\n              appended={appended}\n              question={question}\n              response={response?.response}\n              canRender={canRender || isActive}\n              learnosity={learnosity}\n              canForceAppend={userType === 'TEACHER'}\n              isConceptIntro={isConceptIntro}\n              simState={response?.simState}\n              onMediaStateChange={onMediaStateChange}\n            />\n\n            {!isIntro &&\n              isCanvasEnabled &&\n              onPublishStrokes &&\n              onReceiveStrokes &&\n              questionHeight !== undefined && (\n                <Styled.CueCanvasWrapper $canScribble={isScribblingEnabled}>\n                  <CueCanvas\n                    canRender={canRender}\n                    canScribble={isScribblingEnabled && isActive}\n                    appended={appended}\n                    canvasId={responseId}\n                    width={maxQuestionWidth}\n                    height={Math.max(questionHeight, canvasHeight ?? 0)}\n                    onUpdateHeight={onUpdateHeight}\n                    onPublish={onPublishStrokes}\n                    onSubscribe={onReceiveStrokes}\n                    userId={userId}\n                    initialData={initialStrokesData?.[responseId]}\n                    userType={userType}\n                  />\n                </Styled.CueCanvasWrapper>\n              )}\n            {!isIntro && hints && hints.length > 0 && (\n              <FlexView\n                $background=\"BLUE_1\"\n                $gutterX={1}\n                $gapX={0.5}\n                $borderRadiusX={0}\n                $borderColor=\"BLUE_2\"\n              >\n                {hints.map((hint, index) => (\n                  <Styled.Hint\n                    key={hint}\n                    dangerouslySetInnerHTML={{\n                      __html: `<span style=\"color: #DA5107; font-weight: 600;\">Hint${\n                        (hintsAvailable?.length ?? 0) > 1 ? ` ${index + 1}` : ''\n                      }:</span>&nbsp;${hint}`,\n                    }}\n                  />\n                ))}\n              </FlexView>\n            )}\n            {showSolution && (\n              <FlexView\n                $background=\"YELLOW_1\"\n                $gutterX={1}\n                $gapX={0.875}\n                $borderRadiusX={0}\n                $borderColor=\"YELLOW_2\"\n              >\n                <Styled.Solution\n                  dangerouslySetInnerHTML={{\n                    __html: `<div style=\"color: #DA5107; font-weight: 600;\">Solution:</div>${solution}`,\n                  }}\n                />\n              </FlexView>\n            )}\n            {!!subjectiveProps && (\n              <SubjectiveQuestionReview\n                responses={responses}\n                response={response}\n                nextQuestionId={nextQuestionId}\n                responseId={responseId}\n                studentId={studentId}\n                userType={userType}\n                {...subjectiveProps}\n              />\n            )}\n          </Styled.QuestionWrapper>\n        </Styled.QuestionContainer>\n      </Styled.QuestionContainerWrapper>\n    );\n  },\n);\n\nexport default WorksheetQuestion;\n"],"names":["WorksheetQuestion","memo","userType","signedRequest","worksheetCompleted","question","response","nextQuestionId","isActive","isHidden","canRender","loggerRef","appended","maxQuestionWidth","behavior","layout","actionbarHeight","learnosity","intersectionObserver","background","onMediaStateChange","onMarkForReview","userId","onPublishStrokes","onReceiveStrokes","isScribblingEnabled","initialStrokesData","isCanvasEnabled","onPublishMouseMove","onSubscribeMouseMove","setActiveQuestionId","canResolveDoubt","onResolveDoubt","studentId","responses","subjectiveProps","paperColor","useMemo","getPaperColorByQuestion","questionHeight","setQuestionHeight","useState","canvasHeight","setCanvasHeight","validation","review","maximumAttempts","canExceedAttempts","teacherValidationEnabled","solutionHidden","minQuestionHeight","topOffset","questionsScrollable","questionType","responseId","stimulus_review","item_type","instructor_stimulus","hintsAvailable","solution","widget_reference","item_reference","question_number","item_number","item_display_number","hasStimulusReview","isLessonOverview","isConceptIntro","isConceptIntroWidget","isSystemIntro","isIntro","responseEdited","wrapperClasses","classes","overflowDetectedRef","useRef","hintsUsed","validatedByTeacherOnMount","questionRef","pointerContainerRef","hints","validateResponse","showCorrectAnswers","attemptsHistory","showSolution","dropZoneDimensions","setDropZoneDimensions","onUpdateHeight","useCallback","height","useEffect","draggableElements","minWidth","minHeight","draggableElement","learnosityQuestion","$questionEl","parentWidth","nestedElements","i","element","EVENTS","getExtraSpaceNeedForFloatingKeyboard","questionEl","$responseWrapper","questionBottom","responseWrapperBottom","spaceFromResponseToBottom","LEARNOSITY_KEYBOARD_HEIGHT","qHeight","hasKeyboard","_a","newQuestionHeight","useLayoutEffect","scrollToQuestion","timer","jsxs","Styled.QuestionContainerWrapper","QUESTIONS_GAP","jsx","Styled.StimulusReview","Styled.QuestionContainer","Pointer","Styled.QuestionWrapper","QuestionHeader","Styled.LessonOverviewBanner","IMAGES","QuestionBackdrop","Fragment","BasicPracticeIntro","RegularPracticeIntro","ExitTicketIntro","AdvancedPracticeIntro","LearnosityQuestion","Styled.CueCanvasWrapper","CueCanvas","FlexView","hint","index","Styled.Hint","Styled.Solution","SubjectiveQuestionReview"],"mappings":"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"}

package/dist/index.d.ts

@@ -1094,19 +1094,19 @@ export declare interface ICreateUserResponseDal {
 }
 
 declare interface ICueCanvas {
-    responseId: string;
+    canvasId: string;
     width: number;
     height: number;
-    onUpdateHeight: (height: number) => void;
+    userId: string;
     canRender: boolean;
     appended: boolean;
     canScribble: boolean;
-    initialData?: IActionData[];
-    onPublish: TPublish;
-    onSubscribe: TSubscribe;
-    userId: string;
     userType: TUserTypes;
     renderAs?: TRenderAs_2;
+    initialData?: IActionData[];
+    onUpdateHeight?: TUpdateHeight;
+    onPublish?: TPublish;
+    onSubscribe?: TSubscribe;
 }
 
 declare interface ICueCanvasCallbackProps {
@@ -5230,7 +5230,7 @@ export declare type TTableMode = 'random' | 'sequence' | 'advance' | 'infinite';
 
 export declare type TTabSizes = 'xsmall' | 'small' | 'regular' | 'medium';
 
-export declare type TTabVariants = 'primary';
+export declare type TTabVariants = 'primary' | 'secondary';
 
 declare type TTestDifficultyLevel = 'EASY' | 'MODERATE' | 'DIFFICULT';
 
@@ -5273,6 +5273,8 @@ export declare type TTrialSessionMessage = {
     };
 };
 
+declare type TUpdateHeight = (height: number) => void;
+
 declare type TUserChapterStates = 'MASTERED' | 'PROFICIENT' | 'FAMILIAR' | 'STARTED';
 
 declare type TUserProgram = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.0.10",
+  "version": "3.0.11-as1",
   "type": "module",
   "files": [
     "dist"