@cuemath/leap 2.8.50-as1 → 2.8.50-as2

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

@@ -1,150 +1,125 @@
-var l = Object.defineProperty;
-var u = (r, e, t) => e in r ? l(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var i = (r, e, t) => u(r, typeof e != "symbol" ? e + "" : e, t);
-import f from "../../node_modules/lodash.debounce/index.js";
-import { removeMask as g, checkTextOrEquationTool as v, getReverseMap as y, getToolAndSubtool as m } from "./cue-canvas-helpers.js";
-class I {
-  constructor(e, t, s, o, a, n, d, h, p, c) {
-    i(this, "polycanvas");
-    i(this, "publish");
-    i(this, "height");
-    i(this, "onUpdateActiveTool");
-    i(this, "onUpdateHeight");
-    i(this, "userId");
-    i(this, "responseId");
-    i(this, "userType");
-    i(this, "renderAs");
-    i(this, "fileInput", null);
-    i(this, "debouncedViewportChange");
-    i(this, "uploadImageToS3");
-    i(this, "publishToChannel", (e, t, s) => {
+var d = Object.defineProperty;
+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 { removeMask as f, checkTextOrEquationTool as g, getReverseMap as y, getToolAndSubtool as m } from "./cue-canvas-helpers.js";
+class T {
+  constructor(t, e, i, n, o, a, p, h, c, l) {
+    s(this, "polycanvas");
+    s(this, "publish");
+    s(this, "height");
+    s(this, "onUpdateActiveTool");
+    s(this, "onUpdateHeight");
+    s(this, "userId");
+    s(this, "responseId");
+    s(this, "userType");
+    s(this, "renderAs");
+    s(this, "fileInput", null);
+    s(this, "debouncedViewportChange");
+    s(this, "uploadImageToS3");
+    s(this, "publishToChannel", (t, e, i) => {
       this.publish && this.publish({
         eventName: "cue_canvas_changed",
         eventPayload: {
-          data: e,
+          data: t,
           height: this.height,
           userId: this.userId,
           responseId: this.responseId,
-          gridName: t,
-          dimension: s
+          gridName: e,
+          dimension: i
         }
       });
     });
-    i(this, "onChange", (e) => {
-      const s = Object.fromEntries(e.entries());
-      v(s), this.publishToChannel(s);
+    s(this, "onChange", (t) => {
+      const i = Object.fromEntries(t.entries());
+      g(i) && this.onUpdateActiveTool("move"), this.publishToChannel(i);
     });
-    i(this, "undo", () => {
+    s(this, "undo", () => {
       if (!this.polycanvas)
         return;
-      const e = this.polycanvas.undo();
-      if (!e)
+      const t = this.polycanvas.undo();
+      if (!t)
         return;
-      const t = y(e);
-      this.onChange(t);
+      const e = y(t);
+      this.onChange(e);
     });
-    i(this, "redo", () => {
+    s(this, "redo", () => {
       if (!this.polycanvas)
         return;
-      const e = this.polycanvas.redo();
-      e && this.onChange(e);
+      const t = this.polycanvas.redo();
+      t && this.onChange(t);
     });
-    i(this, "clearCanvas", () => {
+    s(this, "clearCanvas", () => {
       this.polycanvas && this.polycanvas.clear();
     });
-    i(this, "zoomIn", () => {
+    s(this, "zoomIn", () => {
       if (!this.polycanvas) return;
-      const e = this.polycanvas.getViewport();
-      this.polycanvas.setViewport(e.x, e.y, e.zoom * 1.1);
+      const t = this.polycanvas.getViewport();
+      this.polycanvas.setViewport(t.x, t.y, t.zoom * 1.1);
     });
-    i(this, "zoomOut", () => {
+    s(this, "zoomOut", () => {
       if (!this.polycanvas) return;
-      const e = this.polycanvas.getViewport();
-      this.polycanvas.setViewport(e.x, e.y, e.zoom * 0.9);
+      const t = this.polycanvas.getViewport();
+      this.polycanvas.setViewport(t.x, t.y, t.zoom * 0.9);
     });
-    i(this, "downloadCanvasAsImage", async () => {
+    s(this, "downloadCanvasAsImage", async () => {
       if (!this.polycanvas) return;
-      const e = await this.polycanvas.image(3e3, 3e3, "png");
-      if (!e) return;
-      const t = document.createElement("a");
-      t.href = e, t.download = `canvas-drawing-${Date.now()}.png`, t.click();
+      const t = await this.polycanvas.image(3e3, 3e3, "png");
+      if (!t) return;
+      const e = document.createElement("a");
+      e.href = t, e.download = `canvas-drawing-${Date.now()}.png`, e.click();
     });
-    i(this, "uploadFileToCanvas", async (e) => new Promise((t, s) => {
-      this.uploadImageToS3 ? t(this.uploadImageToS3(e)) : s(new Error("Upload function not provided"));
+    s(this, "uploadFileToCanvas", async (t) => new Promise((e, i) => {
+      this.uploadImageToS3 ? e(this.uploadImageToS3(t)) : i(new Error("Upload function not provided"));
     }));
-    i(this, "onViewPortChange", (e) => {
+    s(this, "onViewPortChange", (t) => {
       if (!this.publish) return;
-      const t = e;
-      this.publishToChannel({}, void 0, t);
+      const e = t;
+      this.publishToChannel({}, void 0, e);
     });
-    i(this, "openFileUpload", () => {
+    s(this, "openFileUpload", () => {
       this.fileInput || (this.fileInput = document.createElement("input"), this.fileInput.type = "file", this.fileInput.accept = "image/*", this.fileInput.style.display = "none", this.fileInput.onchange = this.addImageToCanvas, document.body.appendChild(this.fileInput)), this.fileInput.click();
     });
-    i(this, "addImageToCanvas", async (e) => {
+    s(this, "addImageToCanvas", async (t) => {
       var h;
-      const t = e.target, s = (h = t.files) == null ? void 0 : h[0];
-      if (!s || !this.polycanvas || !this.uploadImageToS3) return;
-      const o = await this.uploadImageToS3(s), a = this.polycanvas.getViewport(), n = {
+      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), o = this.polycanvas.getViewport(), a = {
         name: "image",
-        href: o,
-        x: a.x + 88,
-        y: a.y + 88
-      }, d = this.polycanvas.add({
-        ...n
+        href: n,
+        x: o.x + 88,
+        y: o.y + 88
+      }, p = this.polycanvas.add({
+        ...a
       });
       this.publishToChannel({
-        [d]: [void 0, { ...n, status: "locked" }]
-      }), t.value = "";
-    });
-    i(this, "handleBatchUpdate", (e) => {
-      if (this.renderAs === "whiteboard") {
-        e.forEach((s) => this.handleWhiteboardUpdate(s));
-        return;
-      }
-      const t = e.map((s) => s.height).filter(Boolean);
-      if (t.length > 0) {
-        const s = Math.max(...t);
-        s > this.height && this.updateHeight(s);
-      }
-      e.forEach((s) => this.updateCanvas(s));
-    });
-    i(this, "handleSingleUpdate", (e) => {
-      if (this.renderAs === "whiteboard") {
-        this.handleWhiteboardUpdate(e);
-        return;
-      }
-      e.height > this.height && this.updateHeight(e.height), this.updateCanvas(e);
-    });
-    i(this, "handleWhiteboardUpdate", (e) => {
-      if (this.polycanvas) {
-        if (e.dimension) {
-          const t = e.dimension;
-          this.polycanvas.setViewport(t.x, t.y, t.zoom);
-        }
-        e.gridName && this.polycanvas.setOptions({
-          grid: e.gridName
-        }), this.updateCanvas(e);
-      }
-    });
-    i(this, "updateCanvas", ({ data: e, userId: t }) => {
-      const s = this.userType === "TEACHER" || t === this.userId;
-      Object.entries(e).forEach(([o, a]) => {
-        var n, d, h;
-        !a[0] && a[1] ? (n = this.polycanvas) == null || n.add({ ...a[1], cannotEdit: !s }, o) : a[0] && !a[1] ? (d = this.polycanvas) == null || d.delete(o) : a[0] && a[1] && ((h = this.polycanvas) == null || h.update(o, { ...a[1] }));
+        [p]: [void 0, { ...a, 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, "updateCanvas", ({ data: t, userId: e }) => {
+      const i = this.userType === "TEACHER" || e === this.userId;
+      Object.entries(t).forEach(([n, o]) => {
+        var a, p, h;
+        !o[0] && o[1] ? (a = this.polycanvas) == null || a.add({ ...o[1], cannotEdit: !i }, n) : o[0] && !o[1] ? (p = this.polycanvas) == null || p.delete(n) : o[0] && o[1] && ((h = this.polycanvas) == null || h.update(n, { ...o[1] }));
       });
     });
-    i(this, "resetViewPort", () => {
+    s(this, "resetViewPort", () => {
       this.polycanvas && this.polycanvas.resetViewport();
     });
-    i(this, "changeGrid", (e) => {
+    s(this, "changeGrid", (t) => {
       this.polycanvas && (this.polycanvas.setOptions({
-        grid: e
-      }), this.publishToChannel({}, e));
+        grid: t
+      }), this.publishToChannel({}, t));
     });
-    i(this, "setTool", (e) => {
+    s(this, "setTool", (t) => {
       if (this.polycanvas) {
-        const [t, s] = m(e);
-        switch (t) {
+        const [e, i] = m(t);
+        switch (e) {
           case "clearAll":
             this.clearCanvas();
             break;
@@ -172,7 +147,7 @@ class I {
           case "grid":
             break;
           default:
-            this.polycanvas.setTool(t, s);
+            this.polycanvas.setTool(e, i);
         }
       }
     });
@@ -188,33 +163,37 @@ class I {
      *
      * 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.
      */
-    i(this, "update", (e) => {
-      Array.isArray(e) ? this.handleBatchUpdate(e) : this.handleSingleUpdate(e);
+    s(this, "update", (t) => {
+      if (Array.isArray(t)) {
+        const e = t.map((a) => a.height).filter(Boolean), i = Math.max(...e), n = t.map((a) => a.dimension).filter(Boolean)[t.length - 1], o = t.map((a) => a.gridName).filter(Boolean)[t.length - 1];
+        this.updateCanvasConfig(i, n, o), t.forEach((a) => this.updateCanvas(a));
+      } else
+        this.updateCanvasConfig(t.height, t.dimension, t == null ? void 0 : t.gridName), this.updateCanvas(t);
     });
-    i(this, "setColor", (e) => {
-      this.polycanvas && this.polycanvas.setColor(e);
+    s(this, "setColor", (t) => {
+      this.polycanvas && this.polycanvas.setColor(t);
     });
-    i(this, "updateHeight", (e) => {
-      this.height = e, this.onUpdateHeight(e);
+    s(this, "updateHeight", (t) => {
+      this.height = t, this.onUpdateHeight(t);
     });
-    i(this, "destroy", () => {
+    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 = o, this.onUpdateActiveTool = s, this.height = n, this.uploadImageToS3 = a, this.userId = d, this.responseId = h, this.publish = e, this.userType = p, this.renderAs = c, this.debouncedViewportChange = f(this.onViewPortChange, 300), t(this.responseId, this.update);
+    this.onUpdateHeight = n, this.onUpdateActiveTool = i, this.height = a, this.uploadImageToS3 = o, this.userId = p, this.responseId = h, this.publish = t, this.userType = c, this.renderAs = l, this.debouncedViewportChange = v(this.onViewPortChange, 300), e(this.responseId, this.update);
   }
-  async create({ canvasElementRef: e, canvasConfig: t, canvasSetting: s, initialData: o }) {
-    if (!e.current)
+  async create({ canvasElementRef: t, canvasConfig: e, canvasSetting: i, initialData: n }) {
+    if (!t.current)
       throw new Error("PolyCanvas: Div Element Not found for canvas");
-    this.polycanvas = await window.Polypad.create(e.current, {
+    this.polycanvas = await window.Polypad.create(t.current, {
       initial: {
-        options: t
+        options: e
       },
-      ...s,
+      ...i,
       imageUpload: this.renderAs === "whiteboard" && this.userType === "TEACHER" ? this.uploadFileToCanvas : void 0
-    }), this.renderAs === "whiteboard" && this.userType === "TEACHER" && this.polycanvas.on("viewport", this.debouncedViewportChange), g(e), this.polycanvas.on("change", this.onChange), o && this.update(o);
+    }), this.renderAs === "whiteboard" && this.userType === "TEACHER" && this.polycanvas.on("viewport", this.debouncedViewportChange), f(t), this.polycanvas.on("change", this.onChange), n && this.update(n);
   }
 }
 export {
-  I as CueCanvasCore
+  T 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} 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.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 handleBatchUpdate = (payloads: IActionData[]) => {\n    if (this.renderAs === 'whiteboard') {\n      payloads.forEach(item => this.handleWhiteboardUpdate(item));\n\n      return;\n    }\n\n    const heights = payloads.map(data => data.height).filter(Boolean);\n\n    if (heights.length > 0) {\n      const maxHeight = Math.max(...heights);\n\n      if (maxHeight > this.height) {\n        this.updateHeight(maxHeight);\n      }\n    }\n\n    payloads.forEach(item => this.updateCanvas(item));\n  };\n\n  private handleSingleUpdate = (payload: IActionData) => {\n    if (this.renderAs === 'whiteboard') {\n      this.handleWhiteboardUpdate(payload);\n\n      return;\n    }\n\n    if (payload.height > this.height) {\n      this.updateHeight(payload.height);\n    }\n\n    this.updateCanvas(payload);\n  };\n\n  private handleWhiteboardUpdate = (payload: IActionData) => {\n    if (!this.polycanvas) return;\n\n    if (payload.dimension) {\n      const dimension = payload.dimension as IViewport;\n\n      this.polycanvas.setViewport(dimension.x, dimension.y, dimension.zoom);\n    }\n\n    if (payload.gridName) {\n      this.polycanvas.setOptions({\n        grid: payload.gridName,\n      });\n    }\n\n    this.updateCanvas(payload);\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  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  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 '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      this.handleBatchUpdate(payload);\n    } else {\n      this.handleSingleUpdate(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","checkTextOrEquationTool","data","undoData","getReverseMap","viewPort","image","downloadLink","file","resolve","reject","event","target","_a","imageBase64","imgJson","key","payloads","item","heights","maxHeight","canEditStroke","value","_b","_c","tool","currTool","currSubTool","getToolAndSubtool","color","debounce","canvasElementRef","canvasConfig","canvasSetting","initialData","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  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} 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.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  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  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 '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","tool","currTool","currSubTool","getToolAndSubtool","heights","maxHeight","lastDimension","lastGrid","item","color","debounce","canvasElementRef","canvasConfig","canvasSetting","initialData","removeMask"],"mappings":"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"}

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

@@ -115,13 +115,10 @@ const d = [
   "move",
   "undo",
   "redo"
-], l = ["pen", "ruler", "eraser", "move", "undo", "redo"], h = (e, r) => r === "whiteboard" ? e === "TEACHER" ? i : c : e === "TEACHER" ? u : l, f = (e) => e === "TEACHER" ? ["CANVAS_RED", "CANVAS_YELLOW", "CANVAS_GREEN"] : ["CANVAS_BLUE", "CANVAS_PURPLE", "CANVAS_PINK"], m = (e) => ["pen", "ruler", "marker", "highlighter"].includes(e), v = (e) => (Object.entries(e).forEach(([, r]) => {
-  if (!r[0] && r[1] && "name" in r[1] && (r[1].name === "text" || r[1].name === "equation"))
-    return !0;
-}), !1);
+], l = ["pen", "ruler", "eraser", "move", "undo", "redo"], h = (e, r) => r === "whiteboard" ? e === "TEACHER" ? i : c : e === "TEACHER" ? u : l, f = (e) => e === "TEACHER" ? ["CANVAS_RED", "CANVAS_YELLOW", "CANVAS_GREEN"] : ["CANVAS_BLUE", "CANVAS_PURPLE", "CANVAS_PINK"], m = (e) => ["pen", "ruler", "marker", "highlighter"].includes(e), v = (e) => Object.values(e).some((r) => !!(!r[0] && r[1] && "name" in r[1] && (r[1].name === "text" || r[1].name === "equation")));
 export {
   d as GRID_NAMES,
-  g as SINGLE_CLICK_TOOLS,
+  g as STATELESS_TOOLS,
   v as checkTextOrEquationTool,
   E as getCanvasConfig,
   T as getCanvasSettings,

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

@@ -1 +1 @@
-{"version":3,"file":"cue-canvas-helpers.js","sources":["../../../src/features/cue-canvas/cue-canvas-helpers.ts"],"sourcesContent":["import type { TUserTypes } from '../ui/types';\nimport type {\n  TCueCanvasColors,\n  TCueCanvasChangeData,\n  TCueCanvasTool,\n  TCueCanvasToolOption,\n  TDrawingData,\n  TRenderAs,\n  TCueCanvasGridName,\n  TCueCanvasChangeDataObject,\n} from './types/cue-canvas';\nimport type { IPolypadCreateOptions, IPolypadOptions } from './types/polypad';\n\nexport const GRID_NAMES: TCueCanvasGridName[] = [\n  'none',\n  'square2-grid',\n  'square-checked',\n  'square-dots',\n  'tri-dots',\n  'tri2-dots',\n  'square-grid',\n  'tri-grid',\n  'tri2-grid',\n];\n\nexport const SINGLE_CLICK_TOOLS = new Set<TCueCanvasTool>([\n  'undo',\n  'redo',\n  'clearAll',\n  'home',\n  'zoomIn',\n  'zoomOut',\n  'upload',\n  'download',\n]);\n\nexport const removeMask = (canvasElementRef: React.RefObject<HTMLDivElement>) => {\n  const shadowRoot = canvasElementRef.current?.shadowRoot;\n\n  if (shadowRoot) {\n    const xPolypad = shadowRoot.querySelectorAll('x-polypad');\n\n    if (xPolypad[0]) {\n      const svgCanvas = xPolypad[0].querySelector('svg.canvas');\n      const maskPath = svgCanvas?.querySelector('path.mask');\n\n      maskPath?.setAttribute('stroke', 'transparent');\n      maskPath?.setAttribute('fill', 'transparent');\n      maskPath?.removeAttribute('style');\n    }\n  }\n\n  return undefined;\n};\n\nexport const getCanvasConfig = (\n  width: number,\n  height: number,\n  renderAs: TRenderAs,\n  userType: TUserTypes,\n): IPolypadOptions => {\n  return renderAs === 'canvas'\n    ? {\n        canvas: 'notebook',\n        canvasX: width,\n        canvasY: height,\n        noPinchPan: true,\n        grid: 'none',\n        background: 'transparent',\n        noSnapping: true,\n      }\n    : {\n        canvas: 'infinite',\n        canvasX: width,\n        canvasY: height,\n        grid: 'none',\n        noPinchPan: userType === 'STUDENT',\n        noDeleting: userType === 'STUDENT',\n        noCopyPaste: userType === 'STUDENT',\n        noMusic: true,\n        noAudio: true,\n      };\n};\n\nexport const getCanvasSettings = (renderAs: TRenderAs): IPolypadCreateOptions => {\n  return renderAs === 'canvas'\n    ? {\n        sidebarTiles: false,\n        sidebarSettings: false,\n        settings: false,\n        toolbar: false,\n        canvasMargin: 0,\n      }\n    : {\n        sidebarTiles: false, //userType === 'TEACHER'\n        sidebarSettings: false,\n        settings: false,\n        toolbar: false,\n      };\n};\n\nexport const getReverseAction = (action: TDrawingData[]) => [action[1], action[0]];\n\nexport const getReverseMap = (data: TCueCanvasChangeData) => {\n  const newData = new Map<string, TDrawingData[]>();\n\n  data.forEach((value, key) => {\n    newData.set(key, getReverseAction(value));\n  });\n\n  return newData;\n};\n\nexport const getToolAndSubtool = (\n  tool: TCueCanvasTool,\n): [\n  Exclude<TCueCanvasTool, 'marker' | 'highlighter' | 'ruler' | 'equation'>,\n  TCueCanvasToolOption | undefined,\n] => {\n  switch (tool) {\n    case 'pen':\n      return ['pen', 'pen'];\n    case 'marker':\n      return ['pen', 'marker'];\n    case 'highlighter':\n      return ['pen', 'highlighter'];\n    case 'ruler':\n      return ['pen', 'ruler'];\n    case 'equation':\n      return ['text', 'equation'];\n    default:\n      return [tool, undefined];\n  }\n};\n\nconst TEACHER_WHITEBOARD_TOOLS: TCueCanvasTool[] = [\n  'pen',\n  'ruler',\n  'marker',\n  'highlighter',\n  'eraser',\n  'move',\n  'pan',\n  'clearAll',\n  'text',\n  'equation',\n  'grid',\n  'home',\n  'undo',\n  'redo',\n  'zoomIn',\n  'zoomOut',\n  'upload',\n  'download',\n];\n\nconst STUDENT_WHITEBOARD_TOOLS: TCueCanvasTool[] = [\n  'pen',\n  'ruler',\n  'marker',\n  'highlighter',\n  'move',\n  'text',\n  'undo',\n  'redo',\n  'download',\n];\n\nconst TEACHER_DEFAULT_TOOLS: TCueCanvasTool[] = [\n  'pen',\n  'ruler',\n  'marker',\n  'highlighter',\n  'eraser',\n  'move',\n  'undo',\n  'redo',\n];\n\nconst STUDENT_DEFAULT_TOOLS: TCueCanvasTool[] = ['pen', 'ruler', 'eraser', 'move', 'undo', 'redo'];\n\nexport const getUserTools = (userType: TUserTypes, renderAs: TRenderAs): TCueCanvasTool[] => {\n  if (renderAs === 'whiteboard') {\n    return userType === 'TEACHER' ? TEACHER_WHITEBOARD_TOOLS : STUDENT_WHITEBOARD_TOOLS;\n  }\n\n  return userType === 'TEACHER' ? TEACHER_DEFAULT_TOOLS : STUDENT_DEFAULT_TOOLS;\n};\n\nexport const getColorsForUser = (userType: TUserTypes) => {\n  return userType === 'TEACHER'\n    ? (['CANVAS_RED', 'CANVAS_YELLOW', 'CANVAS_GREEN'] as TCueCanvasColors[])\n    : (['CANVAS_BLUE', 'CANVAS_PURPLE', 'CANVAS_PINK'] as TCueCanvasColors[]);\n};\n\nexport const getIsWritingTool = (penTool: string) => {\n  return ['pen', 'ruler', 'marker', 'highlighter'].includes(penTool);\n};\n\nexport const checkTextOrEquationTool = (payload: TCueCanvasChangeDataObject) => {\n  Object.entries(payload).forEach(([, value]) => {\n    if (\n      !value[0] &&\n      value[1] &&\n      'name' in value[1] &&\n      (value[1].name === 'text' || value[1].name === 'equation')\n    ) {\n      return true;\n    }\n  });\n\n  return false;\n};\n"],"names":["GRID_NAMES","SINGLE_CLICK_TOOLS","removeMask","canvasElementRef","_a","shadowRoot","xPolypad","svgCanvas","maskPath","getCanvasConfig","width","height","renderAs","userType","getCanvasSettings","getReverseAction","action","getReverseMap","data","newData","value","key","getToolAndSubtool","tool","TEACHER_WHITEBOARD_TOOLS","STUDENT_WHITEBOARD_TOOLS","TEACHER_DEFAULT_TOOLS","STUDENT_DEFAULT_TOOLS","getUserTools","getColorsForUser","getIsWritingTool","penTool","checkTextOrEquationTool","payload"],"mappings":"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"}
+{"version":3,"file":"cue-canvas-helpers.js","sources":["../../../src/features/cue-canvas/cue-canvas-helpers.ts"],"sourcesContent":["import type { TUserTypes } from '../ui/types';\nimport type {\n  TCueCanvasColors,\n  TCueCanvasChangeData,\n  TCueCanvasTool,\n  TCueCanvasToolOption,\n  TDrawingData,\n  TRenderAs,\n  TCueCanvasGridName,\n  TCueCanvasChangeDataObject,\n} from './types/cue-canvas';\nimport type { IPolypadCreateOptions, IPolypadOptions } from './types/polypad';\n\nexport const GRID_NAMES: TCueCanvasGridName[] = [\n  'none',\n  'square2-grid',\n  'square-checked',\n  'square-dots',\n  'tri-dots',\n  'tri2-dots',\n  'square-grid',\n  'tri-grid',\n  'tri2-grid',\n];\n\nexport const STATELESS_TOOLS = new Set<TCueCanvasTool>([\n  'undo',\n  'redo',\n  'clearAll',\n  'home',\n  'zoomIn',\n  'zoomOut',\n  'upload',\n  'download',\n]);\n\nexport const removeMask = (canvasElementRef: React.RefObject<HTMLDivElement>) => {\n  const shadowRoot = canvasElementRef.current?.shadowRoot;\n\n  if (shadowRoot) {\n    const xPolypad = shadowRoot.querySelectorAll('x-polypad');\n\n    if (xPolypad[0]) {\n      const svgCanvas = xPolypad[0].querySelector('svg.canvas');\n      const maskPath = svgCanvas?.querySelector('path.mask');\n\n      maskPath?.setAttribute('stroke', 'transparent');\n      maskPath?.setAttribute('fill', 'transparent');\n      maskPath?.removeAttribute('style');\n    }\n  }\n\n  return undefined;\n};\n\nexport const getCanvasConfig = (\n  width: number,\n  height: number,\n  renderAs: TRenderAs,\n  userType: TUserTypes,\n): IPolypadOptions => {\n  return renderAs === 'canvas'\n    ? {\n        canvas: 'notebook',\n        canvasX: width,\n        canvasY: height,\n        noPinchPan: true,\n        grid: 'none',\n        background: 'transparent',\n        noSnapping: true,\n      }\n    : {\n        canvas: 'infinite',\n        canvasX: width,\n        canvasY: height,\n        grid: 'none',\n        noPinchPan: userType === 'STUDENT',\n        noDeleting: userType === 'STUDENT',\n        noCopyPaste: userType === 'STUDENT',\n        noMusic: true,\n        noAudio: true,\n      };\n};\n\nexport const getCanvasSettings = (renderAs: TRenderAs): IPolypadCreateOptions => {\n  return renderAs === 'canvas'\n    ? {\n        sidebarTiles: false,\n        sidebarSettings: false,\n        settings: false,\n        toolbar: false,\n        canvasMargin: 0,\n      }\n    : {\n        sidebarTiles: false, //userType === 'TEACHER'\n        sidebarSettings: false,\n        settings: false,\n        toolbar: false,\n      };\n};\n\nexport const getReverseAction = (action: TDrawingData[]) => [action[1], action[0]];\n\nexport const getReverseMap = (data: TCueCanvasChangeData) => {\n  const newData = new Map<string, TDrawingData[]>();\n\n  data.forEach((value, key) => {\n    newData.set(key, getReverseAction(value));\n  });\n\n  return newData;\n};\n\nexport const getToolAndSubtool = (\n  tool: TCueCanvasTool,\n): [\n  Exclude<TCueCanvasTool, 'marker' | 'highlighter' | 'ruler' | 'equation'>,\n  TCueCanvasToolOption | undefined,\n] => {\n  switch (tool) {\n    case 'pen':\n      return ['pen', 'pen'];\n    case 'marker':\n      return ['pen', 'marker'];\n    case 'highlighter':\n      return ['pen', 'highlighter'];\n    case 'ruler':\n      return ['pen', 'ruler'];\n    case 'equation':\n      return ['text', 'equation'];\n    default:\n      return [tool, undefined];\n  }\n};\n\nconst TEACHER_WHITEBOARD_TOOLS: TCueCanvasTool[] = [\n  'pen',\n  'ruler',\n  'marker',\n  'highlighter',\n  'eraser',\n  'move',\n  'pan',\n  'clearAll',\n  'text',\n  'equation',\n  'grid',\n  'home',\n  'undo',\n  'redo',\n  'zoomIn',\n  'zoomOut',\n  'upload',\n  'download',\n];\n\nconst STUDENT_WHITEBOARD_TOOLS: TCueCanvasTool[] = [\n  'pen',\n  'ruler',\n  'marker',\n  'highlighter',\n  'move',\n  'text',\n  'undo',\n  'redo',\n  'download',\n];\n\nconst TEACHER_DEFAULT_TOOLS: TCueCanvasTool[] = [\n  'pen',\n  'ruler',\n  'marker',\n  'highlighter',\n  'eraser',\n  'move',\n  'undo',\n  'redo',\n];\n\nconst STUDENT_DEFAULT_TOOLS: TCueCanvasTool[] = ['pen', 'ruler', 'eraser', 'move', 'undo', 'redo'];\n\nexport const getUserTools = (userType: TUserTypes, renderAs: TRenderAs): TCueCanvasTool[] => {\n  if (renderAs === 'whiteboard') {\n    return userType === 'TEACHER' ? TEACHER_WHITEBOARD_TOOLS : STUDENT_WHITEBOARD_TOOLS;\n  }\n\n  return userType === 'TEACHER' ? TEACHER_DEFAULT_TOOLS : STUDENT_DEFAULT_TOOLS;\n};\n\nexport const getColorsForUser = (userType: TUserTypes) => {\n  return userType === 'TEACHER'\n    ? (['CANVAS_RED', 'CANVAS_YELLOW', 'CANVAS_GREEN'] as TCueCanvasColors[])\n    : (['CANVAS_BLUE', 'CANVAS_PURPLE', 'CANVAS_PINK'] as TCueCanvasColors[]);\n};\n\nexport const getIsWritingTool = (penTool: string) => {\n  return ['pen', 'ruler', 'marker', 'highlighter'].includes(penTool);\n};\n\nexport const checkTextOrEquationTool = (payload: TCueCanvasChangeDataObject) => {\n  return Object.values(payload).some(value => {\n    if (\n      !value[0] &&\n      value[1] &&\n      'name' in value[1] &&\n      (value[1].name === 'text' || value[1].name === 'equation')\n    ) {\n      return true;\n    }\n\n    return false;\n  });\n};\n"],"names":["GRID_NAMES","STATELESS_TOOLS","removeMask","canvasElementRef","_a","shadowRoot","xPolypad","svgCanvas","maskPath","getCanvasConfig","width","height","renderAs","userType","getCanvasSettings","getReverseAction","action","getReverseMap","data","newData","value","key","getToolAndSubtool","tool","TEACHER_WHITEBOARD_TOOLS","STUDENT_WHITEBOARD_TOOLS","TEACHER_DEFAULT_TOOLS","STUDENT_DEFAULT_TOOLS","getUserTools","getColorsForUser","getIsWritingTool","penTool","checkTextOrEquationTool","payload"],"mappings":"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"}

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

@@ -267,7 +267,7 @@ export {
   H as ColorPicker,
   w as CueCanvasWrapper,
   j as MenuWrapper,
-  Y as PalleteWrapper,
+  Y as PaletteWrapper,
   T as PenIconWrapper,
   S as RedoIcon,
   G as StyledCheckIcon,

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 { ICueCanvasWrappper, 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 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 FlexView from '../ui/layout/flex-view';\nimport { CANVAS_COLORS } from './constants/constants';\n\ninterface IToolProps {\n  $active: boolean;\n  $activeColor: TCueCanvasColors;\n  $isWhiteBoard: boolean;\n}\n\nexport const StyledPencilIcon = styled(PencilIcon)<IToolProps>(({\n  theme,\n  $active,\n  $activeColor,\n  $isWhiteBoard,\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 && !$isWhiteBoard ? '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  $isWhiteBoard,\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 && !$isWhiteBoard ? '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  $isWhiteBoard,\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 && !$isWhiteBoard ? '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  $isWhiteBoard,\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 && !$isWhiteBoard ? '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 StyledWrapper = styled(FlexView)<Omit<IToolProps, '$activeColor' | '$isWhiteBoard'>>(({\n  theme,\n  $active,\n}) => {\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\n    border: 1px solid ${colors.WHITE};\n    border-radius: 50%;\n    transition: all 100ms ease-in-out;\n\n    &:hover {\n      border: 1px solid ${colors.REAL_BLACK};\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      svg {\n        path,\n        circle {\n          stroke: ${colors.WHITE};\n        }\n        .hover-tiles {\n          stroke: ${colors.WHITE};\n        }\n        .hover-eraser {\n          stroke: none;\n          fill: ${colors.WHITE};\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 PalleteWrapper = 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)<ICueCanvasWrappper>(\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","$isWhiteBoard","colors","color","CANVAS_COLORS","css","StyledRulerIcon","RulerIcon","StyledHighlighterWrapper","HighlighterIcon","StyledSketchWrapper","SketchIcon","StyledWrapper","FlexView","StyledCheckIcon","TickIcon","RedoIcon","UndoIcon","PalleteWrapper","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 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 FlexView from '../ui/layout/flex-view';\nimport { CANVAS_COLORS } from './constants/constants';\n\ninterface IToolProps {\n  $active: boolean;\n  $activeColor: TCueCanvasColors;\n  $isWhiteBoard: boolean;\n}\n\nexport const StyledPencilIcon = styled(PencilIcon)<IToolProps>(({\n  theme,\n  $active,\n  $activeColor,\n  $isWhiteBoard,\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 && !$isWhiteBoard ? '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  $isWhiteBoard,\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 && !$isWhiteBoard ? '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  $isWhiteBoard,\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 && !$isWhiteBoard ? '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  $isWhiteBoard,\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 && !$isWhiteBoard ? '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 StyledWrapper = styled(FlexView)<Omit<IToolProps, '$activeColor' | '$isWhiteBoard'>>(({\n  theme,\n  $active,\n}) => {\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\n    border: 1px solid ${colors.WHITE};\n    border-radius: 50%;\n    transition: all 100ms ease-in-out;\n\n    &:hover {\n      border: 1px solid ${colors.REAL_BLACK};\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      svg {\n        path,\n        circle {\n          stroke: ${colors.WHITE};\n        }\n        .hover-tiles {\n          stroke: ${colors.WHITE};\n        }\n        .hover-eraser {\n          stroke: none;\n          fill: ${colors.WHITE};\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","$isWhiteBoard","colors","color","CANVAS_COLORS","css","StyledRulerIcon","RulerIcon","StyledHighlighterWrapper","HighlighterIcon","StyledSketchWrapper","SketchIcon","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/toolbar/{color-pallete.js → color-palette.js}

@@ -46,4 +46,4 @@ const w = c(({ setActiveColor: t, activeColor: o, userType: n }) => {
 export {
   w as default
 };
-//# sourceMappingURL=color-pallete.js.map
+//# sourceMappingURL=color-palette.js.map

package/dist/features/cue-canvas/toolbar/color-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-palette.js","sources":["../../../../src/features/cue-canvas/toolbar/color-palette.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { TCueCanvasColors } from '../types/cue-canvas';\n\nimport { memo, useCallback, useMemo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getColorsForUser } from '../cue-canvas-helpers';\nimport { StyledCheckIcon, ColorPicker } from '../cue-cavas-styled';\n\ninterface IColorPalette {\n  setActiveColor: (color: TCueCanvasColors) => void;\n  activeColor: TCueCanvasColors;\n  userType: TUserTypes;\n}\n\nconst ColorPalette: React.FC<IColorPalette> = memo(({ setActiveColor, activeColor, userType }) => {\n  const handleColorChange = useCallback(\n    (color: TCueCanvasColors) => {\n      setActiveColor(color);\n    },\n    [setActiveColor],\n  );\n  const colors = useMemo(() => getColorsForUser(userType), [userType]);\n\n  return (\n    <>\n      {colors.map((color, index) => (\n        <Clickable\n          key={index}\n          onClick={() => handleColorChange(color)}\n          label={`Color Picker - ${color}`}\n        >\n          <FlexView\n            $width={22}\n            $height={22}\n            $borderRadius={11}\n            $justifyContent=\"center\"\n            $background={activeColor === color ? 'BLACK' : 'WHITE'}\n            $alignItems=\"center\"\n          >\n            <ColorPicker\n              $width={20}\n              $height={20}\n              $borderRadius={10}\n              $color={color}\n              $alignItems=\"center\"\n              $justifyContent=\"center\"\n            >\n              {activeColor === color && <StyledCheckIcon />}\n            </ColorPicker>\n          </FlexView>\n        </Clickable>\n      ))}\n    </>\n  );\n});\n\nexport default ColorPalette;\n"],"names":["ColorPalette","memo","setActiveColor","activeColor","userType","handleColorChange","useCallback","color","colors","useMemo","getColorsForUser","jsx","Fragment","index","Clickable","FlexView","ColorPicker","StyledCheckIcon"],"mappings":";;;;;;AAgBA,MAAMA,IAAwCC,EAAK,CAAC,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,QAAe;AAChG,QAAMC,IAAoBC;AAAA,IACxB,CAACC,MAA4B;AAC3B,MAAAL,EAAeK,CAAK;AAAA,IACtB;AAAA,IACA,CAACL,CAAc;AAAA,EAAA,GAEXM,IAASC,EAAQ,MAAMC,EAAiBN,CAAQ,GAAG,CAACA,CAAQ,CAAC;AAEnE,SAEK,gBAAAO,EAAAC,GAAA,EAAA,UAAAJ,EAAO,IAAI,CAACD,GAAOM,MAClB,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MAEC,SAAS,MAAMT,EAAkBE,CAAK;AAAA,MACtC,OAAO,kBAAkBA,CAAK;AAAA,MAE9B,UAAA,gBAAAI;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,eAAe;AAAA,UACf,iBAAgB;AAAA,UAChB,aAAaZ,MAAgBI,IAAQ,UAAU;AAAA,UAC/C,aAAY;AAAA,UAEZ,UAAA,gBAAAI;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,cACf,QAAQT;AAAA,cACR,aAAY;AAAA,cACZ,iBAAgB;AAAA,cAEf,UAAAJ,MAAgBI,KAAS,gBAAAI,EAACM,GAAgB,CAAA,CAAA;AAAA,YAAA;AAAA,UAC7C;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAtBKJ;AAAA,EAwBR,CAAA,EACH,CAAA;AAEJ,CAAC;"}

package/dist/features/cue-canvas/toolbar/{color-picker-button.js → color-picker-menu.js}

@@ -1,14 +1,14 @@
-import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { memo as a, useRef as m } from "react";
 import d from "../../ui/buttons/clickable/clickable.js";
 import u from "../../ui/hooks/use-context-menu-click-handler.js";
 import $ from "../../ui/layout/flex-view.js";
-import { ColorPicker as f, PalleteWrapper as C } from "../cue-cavas-styled.js";
+import { ColorPicker as f, PaletteWrapper as C } from "../cue-cavas-styled.js";
 import { useCueCanvasActions as p } from "../hooks/use-cue-canvas-actions.js";
-import b from "./color-pallete.js";
-const W = a(({ userType: t }) => {
-  const e = m(null), { activeColor: r, setActiveColor: l, isWritingToolActive: i } = p(), { menuVisible: n, onMenuClick: c } = u(
-    e,
+import b from "./color-palette.js";
+const W = a(({ userType: i }) => {
+  const o = m(null), { activeColor: r, setActiveColor: l, isWritingToolActive: t } = p(), { menuVisible: n, onMenuClick: c } = u(
+    o,
     void 0,
     !0,
     void 0
@@ -23,18 +23,18 @@ const W = a(({ userType: t }) => {
       $borderRadius: 16,
       $background: "WHITE",
       children: [
-        /* @__PURE__ */ o(d, { onClick: c, label: "Color Picker", disabled: !i, children: /* @__PURE__ */ o(
+        /* @__PURE__ */ e(d, { onClick: c, label: "Color Picker", disabled: !t, children: /* @__PURE__ */ e(
           f,
           {
             $width: 22,
             $height: 22,
             $borderRadius: 11,
             $color: r,
-            $opacity: i ? 1 : 0.5,
-            ref: e
+            $opacity: t ? 1 : 0.5,
+            ref: o
           }
         ) }),
-        n && /* @__PURE__ */ o(
+        n && /* @__PURE__ */ e(
           C,
           {
             $background: "WHITE",
@@ -42,12 +42,12 @@ const W = a(({ userType: t }) => {
             $gapX: 0.5,
             $borderRadius: 10,
             $flexDirection: "row",
-            children: /* @__PURE__ */ o(
+            children: /* @__PURE__ */ e(
               b,
               {
                 setActiveColor: l,
                 activeColor: r,
-                userType: t
+                userType: i
               }
             )
           }
@@ -59,4 +59,4 @@ const W = a(({ userType: t }) => {
 export {
   W as default
 };
-//# sourceMappingURL=color-picker-button.js.map
+//# sourceMappingURL=color-picker-menu.js.map

package/dist/features/cue-canvas/toolbar/color-picker-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/color-picker-menu.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { FC } from 'react';\n\nimport { memo, useRef } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../ui/layout/flex-view';\nimport { ColorPicker, PaletteWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport ColorPalette from './color-palette';\n\ninterface ColorPickerMenuProps {\n  userType: TUserTypes;\n}\n\nconst ColorPickerMenu: FC<ColorPickerMenuProps> = memo(({ userType }) => {\n  const colorPaletteRef = useRef(null);\n  const { activeColor, setActiveColor, isWritingToolActive } = useCueCanvasActions();\n\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    colorPaletteRef,\n    undefined,\n    true,\n    undefined,\n  );\n\n  return (\n    <FlexView\n      $width={32}\n      $height={32}\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $borderRadius={16}\n      $background=\"WHITE\"\n    >\n      <Clickable onClick={onMenuClick} label=\"Color Picker\" disabled={!isWritingToolActive}>\n        <ColorPicker\n          $width={22}\n          $height={22}\n          $borderRadius={11}\n          $color={activeColor}\n          $opacity={isWritingToolActive ? 1 : 0.5}\n          ref={colorPaletteRef}\n        />\n      </Clickable>\n      {menuVisible && (\n        <PaletteWrapper\n          $background=\"WHITE\"\n          $gutterX={0.5}\n          $gapX={0.5}\n          $borderRadius={10}\n          $flexDirection=\"row\"\n        >\n          <ColorPalette\n            setActiveColor={setActiveColor}\n            activeColor={activeColor}\n            userType={userType}\n          />\n        </PaletteWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default ColorPickerMenu;\n"],"names":["ColorPickerMenu","memo","userType","colorPaletteRef","useRef","activeColor","setActiveColor","isWritingToolActive","useCueCanvasActions","menuVisible","onMenuClick","useContextMenuClickHandler","jsxs","FlexView","jsx","Clickable","ColorPicker","PaletteWrapper","ColorPalette"],"mappings":";;;;;;;;AAgBA,MAAMA,IAA4CC,EAAK,CAAC,EAAE,UAAAC,QAAe;AACjE,QAAAC,IAAkBC,EAAO,IAAI,GAC7B,EAAE,aAAAC,GAAa,gBAAAC,GAAgB,qBAAAC,MAAwBC,EAAoB,GAE3E,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAIA,SAAA,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,aAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAC,EAACC,KAAU,SAASL,GAAa,OAAM,gBAAe,UAAU,CAACH,GAC/D,UAAA,gBAAAO;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,eAAe;AAAA,YACf,QAAQX;AAAA,YACR,UAAUE,IAAsB,IAAI;AAAA,YACpC,KAAKJ;AAAA,UAAA;AAAA,QAAA,GAET;AAAA,QACCM,KACC,gBAAAK;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YACZ,UAAU;AAAA,YACV,OAAO;AAAA,YACP,eAAe;AAAA,YACf,gBAAe;AAAA,YAEf,UAAA,gBAAAH;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,gBAAAZ;AAAA,gBACA,aAAAD;AAAA,gBACA,UAAAH;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/features/cue-canvas/toolbar/grid-menu.js

@@ -1,23 +1,28 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { memo as f, useRef as s } from "react";
-import i from "../../ui/buttons/clickable/clickable.js";
-import a from "../../ui/hooks/use-context-menu-click-handler.js";
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { memo as f, useRef as C, useCallback as $ } from "react";
+import n from "../../ui/buttons/clickable/clickable.js";
+import h from "../../ui/hooks/use-context-menu-click-handler.js";
 import t from "../../ui/layout/flex-view.js";
-import { GRID_NAMES as C } from "../cue-canvas-helpers.js";
-import { StyledWrapper as $, MenuWrapper as h } from "../cue-cavas-styled.js";
-import { useCueCanvasActions as b } from "../hooks/use-cue-canvas-actions.js";
+import { GRID_NAMES as b } from "../cue-canvas-helpers.js";
+import { StyledWrapper as k, MenuWrapper as G } from "../cue-cavas-styled.js";
+import { useCueCanvasActions as l } from "../hooks/use-cue-canvas-actions.js";
 import { GRID_TO_COMP as x } from "./icon-map.js";
-const W = f(({ onGridOptionClick: n, GridIcon: l }) => {
-  const e = s(null), { activeTool: c } = b(), { menuVisible: d, onMenuClick: m } = a(
-    e,
+const A = f(({ GridIcon: c }) => {
+  const { activeInstance: e } = l(), i = C(null), { activeTool: d } = l(), { menuVisible: m, onMenuClick: u } = h(
+    i,
     void 0,
     !0,
     void 0
+  ), p = $(
+    (o) => {
+      e == null || e.changeGrid(o);
+    },
+    [e]
   );
-  return /* @__PURE__ */ p(t, { $gutterX: 0.25, ref: e, children: [
-    /* @__PURE__ */ r(i, { onClick: m, label: "grid", children: /* @__PURE__ */ r($, { $active: c === "grid", children: /* @__PURE__ */ r(l, {}) }) }),
-    d && /* @__PURE__ */ r(
-      h,
+  return /* @__PURE__ */ a(t, { $gutterX: 0.25, ref: i, children: [
+    /* @__PURE__ */ r(n, { onClick: u, label: "grid", children: /* @__PURE__ */ r(k, { $active: d === "grid", children: /* @__PURE__ */ r(c, {}) }) }),
+    m && /* @__PURE__ */ r(
+      G,
       {
         $borderColor: "GREY_1",
         $background: "GREY_1",
@@ -25,12 +30,12 @@ const W = f(({ onGridOptionClick: n, GridIcon: l }) => {
         $widthX: 11.15,
         $flexWrap: !0,
         $flexGapX: 0.5,
-        children: C.map((o) => {
-          const u = x[o];
+        children: b.map((o) => {
+          const s = x[o];
           return /* @__PURE__ */ r(
-            i,
+            n,
             {
-              onClick: () => n(o),
+              onClick: () => p(o),
               label: o,
               children: /* @__PURE__ */ r(
                 t,
@@ -40,7 +45,7 @@ const W = f(({ onGridOptionClick: n, GridIcon: l }) => {
                   $borderColor: "BLACK",
                   $borderRadius: 4,
                   $background: "WHITE",
-                  children: /* @__PURE__ */ r(u, {})
+                  children: /* @__PURE__ */ r(s, {})
                 }
               )
             },
@@ -52,6 +57,6 @@ const W = f(({ onGridOptionClick: n, GridIcon: l }) => {
   ] });
 });
 export {
-  W as default
+  A as default
 };
 //# sourceMappingURL=grid-menu.js.map

package/dist/features/cue-canvas/toolbar/grid-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/grid-menu.tsx"],"sourcesContent":["import type { IGridMenu, TToolComponentType } from '../types/toolbar';\n\nimport React, { memo, useRef } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../ui/layout/flex-view';\nimport { GRID_NAMES } from '../cue-canvas-helpers';\nimport { MenuWrapper, StyledWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport { GRID_TO_COMP } from './icon-map';\n\nconst GridMenu: React.FC<IGridMenu> = memo(({ onGridOptionClick, GridIcon }) => {\n  const gridMenuRef = useRef(null);\n  const { activeTool } = useCueCanvasActions();\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    gridMenuRef,\n    undefined,\n    true,\n    undefined,\n  );\n\n  return (\n    <FlexView $gutterX={0.25} ref={gridMenuRef}>\n      <Clickable onClick={onMenuClick} label=\"grid\">\n        <StyledWrapper $active={activeTool === 'grid'}>\n          <GridIcon />\n        </StyledWrapper>\n      </Clickable>\n      {menuVisible && (\n        <MenuWrapper\n          $borderColor=\"GREY_1\"\n          $background=\"GREY_1\"\n          $flexDirection=\"row\"\n          $widthX={11.15}\n          $flexWrap={true}\n          $flexGapX={0.5}\n        >\n          {GRID_NAMES.map(gridName => {\n            const GridComponent = GRID_TO_COMP[gridName] as TToolComponentType;\n\n            return (\n              <Clickable\n                key={gridName}\n                onClick={() => onGridOptionClick(gridName)}\n                label={gridName}\n              >\n                <FlexView\n                  $width={48}\n                  $height={48}\n                  $borderColor=\"BLACK\"\n                  $borderRadius={4}\n                  $background=\"WHITE\"\n                >\n                  <GridComponent />\n                </FlexView>\n              </Clickable>\n            );\n          })}\n        </MenuWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default GridMenu;\n"],"names":["GridMenu","memo","onGridOptionClick","GridIcon","gridMenuRef","useRef","activeTool","useCueCanvasActions","menuVisible","onMenuClick","useContextMenuClickHandler","jsxs","FlexView","jsx","Clickable","StyledWrapper","MenuWrapper","GRID_NAMES","gridName","GridComponent","GRID_TO_COMP"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAgCC,EAAK,CAAC,EAAE,mBAAAC,GAAmB,UAAAC,QAAe;AACxE,QAAAC,IAAcC,EAAO,IAAI,GACzB,EAAE,YAAAC,MAAeC,KACjB,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,SACG,gBAAAO,EAAAC,GAAA,EAAS,UAAU,MAAM,KAAKR,GAC7B,UAAA;AAAA,IAAA,gBAAAS,EAACC,GAAU,EAAA,SAASL,GAAa,OAAM,QACrC,UAAA,gBAAAI,EAACE,GAAc,EAAA,SAAST,MAAe,QACrC,UAAC,gBAAAO,EAAAV,GAAA,CAAA,CAAS,EACZ,CAAA,GACF;AAAA,IACCK,KACC,gBAAAK;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,cAAa;AAAA,QACb,aAAY;AAAA,QACZ,gBAAe;AAAA,QACf,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,QAEV,UAAAC,EAAW,IAAI,CAAYC,MAAA;AACpB,gBAAAC,IAAgBC,EAAaF,CAAQ;AAGzC,iBAAA,gBAAAL;AAAA,YAACC;AAAA,YAAA;AAAA,cAEC,SAAS,MAAMZ,EAAkBgB,CAAQ;AAAA,cACzC,OAAOA;AAAA,cAEP,UAAA,gBAAAL;AAAA,gBAACD;AAAA,gBAAA;AAAA,kBACC,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,cAAa;AAAA,kBACb,eAAe;AAAA,kBACf,aAAY;AAAA,kBAEZ,4BAACO,GAAc,EAAA;AAAA,gBAAA;AAAA,cACjB;AAAA,YAAA;AAAA,YAZKD;AAAA,UAAA;AAAA,QAaP,CAEH;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"grid-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/grid-menu.tsx"],"sourcesContent":["import type { TCueCanvasGridName } from '../types/cue-canvas';\nimport type { IGridMenu, TToolComponentType } from '../types/toolbar';\n\nimport React, { memo, useCallback, useRef } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../ui/layout/flex-view';\nimport { GRID_NAMES } from '../cue-canvas-helpers';\nimport { MenuWrapper, StyledWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport { GRID_TO_COMP } from './icon-map';\n\nconst GridMenu: React.FC<IGridMenu> = memo(({ GridIcon }) => {\n  const { activeInstance: cueCanvas } = useCueCanvasActions();\n  const gridMenuRef = useRef(null);\n  const { activeTool } = useCueCanvasActions();\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    gridMenuRef,\n    undefined,\n    true,\n    undefined,\n  );\n  const onGridOptionClick = useCallback(\n    (gridOption: TCueCanvasGridName) => {\n      cueCanvas?.changeGrid(gridOption);\n    },\n    [cueCanvas],\n  );\n\n  return (\n    <FlexView $gutterX={0.25} ref={gridMenuRef}>\n      <Clickable onClick={onMenuClick} label=\"grid\">\n        <StyledWrapper $active={activeTool === 'grid'}>\n          <GridIcon />\n        </StyledWrapper>\n      </Clickable>\n      {menuVisible && (\n        <MenuWrapper\n          $borderColor=\"GREY_1\"\n          $background=\"GREY_1\"\n          $flexDirection=\"row\"\n          $widthX={11.15}\n          $flexWrap={true}\n          $flexGapX={0.5}\n        >\n          {GRID_NAMES.map(gridName => {\n            const GridComponent = GRID_TO_COMP[gridName] as TToolComponentType;\n\n            return (\n              <Clickable\n                key={gridName}\n                onClick={() => onGridOptionClick(gridName)}\n                label={gridName}\n              >\n                <FlexView\n                  $width={48}\n                  $height={48}\n                  $borderColor=\"BLACK\"\n                  $borderRadius={4}\n                  $background=\"WHITE\"\n                >\n                  <GridComponent />\n                </FlexView>\n              </Clickable>\n            );\n          })}\n        </MenuWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default GridMenu;\n"],"names":["GridMenu","memo","GridIcon","cueCanvas","useCueCanvasActions","gridMenuRef","useRef","activeTool","menuVisible","onMenuClick","useContextMenuClickHandler","onGridOptionClick","useCallback","gridOption","jsxs","FlexView","jsx","Clickable","StyledWrapper","MenuWrapper","GRID_NAMES","gridName","GridComponent","GRID_TO_COMP"],"mappings":";;;;;;;;;AAaA,MAAMA,IAAgCC,EAAK,CAAC,EAAE,UAAAC,QAAe;AAC3D,QAAM,EAAE,gBAAgBC,EAAU,IAAIC,EAAoB,GACpDC,IAAcC,EAAO,IAAI,GACzB,EAAE,YAAAC,MAAeH,KACjB,EAAE,aAAAI,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIM,IAAoBC;AAAA,IACxB,CAACC,MAAmC;AAClC,MAAAV,KAAA,QAAAA,EAAW,WAAWU;AAAA,IACxB;AAAA,IACA,CAACV,CAAS;AAAA,EAAA;AAGZ,SACG,gBAAAW,EAAAC,GAAA,EAAS,UAAU,MAAM,KAAKV,GAC7B,UAAA;AAAA,IAAA,gBAAAW,EAACC,GAAU,EAAA,SAASR,GAAa,OAAM,QACrC,UAAA,gBAAAO,EAACE,GAAc,EAAA,SAASX,MAAe,QACrC,UAAC,gBAAAS,EAAAd,GAAA,CAAA,CAAS,EACZ,CAAA,GACF;AAAA,IACCM,KACC,gBAAAQ;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,cAAa;AAAA,QACb,aAAY;AAAA,QACZ,gBAAe;AAAA,QACf,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,QAEV,UAAAC,EAAW,IAAI,CAAYC,MAAA;AACpB,gBAAAC,IAAgBC,EAAaF,CAAQ;AAGzC,iBAAA,gBAAAL;AAAA,YAACC;AAAA,YAAA;AAAA,cAEC,SAAS,MAAMN,EAAkBU,CAAQ;AAAA,cACzC,OAAOA;AAAA,cAEP,UAAA,gBAAAL;AAAA,gBAACD;AAAA,gBAAA;AAAA,kBACC,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,cAAa;AAAA,kBACb,eAAe;AAAA,kBACf,aAAY;AAAA,kBAEZ,4BAACO,GAAc,EAAA;AAAA,gBAAA;AAAA,cACjB;AAAA,YAAA;AAAA,YAZKD;AAAA,UAAA;AAAA,QAaP,CAEH;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}

package/dist/features/cue-canvas/toolbar/pen-tool-menu.js

@@ -1,57 +1,48 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { memo as h, useRef as T } from "react";
-import s from "../../ui/buttons/clickable/clickable.js";
-import b from "../../ui/hooks/use-context-menu-click-handler.js";
-import t from "../../ui/layout/flex-view.js";
-import { getIsWritingTool as c } from "../cue-canvas-helpers.js";
-import { PenIconWrapper as g, StyledDownIcon as W, MenuWrapper as k, StyledWrapper as x } from "../cue-cavas-styled.js";
-import { useCueCanvasActions as I } from "../hooks/use-cue-canvas-actions.js";
-import M from "./color-pallete.js";
-import { TOOLS_TO_COMP as p } from "./icon-map.js";
-const S = h(({ writingTools: u, onToolClick: d, userType: C }) => {
-  const { activeTool: o, activeColor: i, setActiveColor: $ } = I(), l = T(null), { menuVisible: m, onMenuClick: f } = b(
-    l,
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { memo as d, useRef as C } from "react";
+import $ from "../../ui/buttons/clickable/clickable.js";
+import v from "../../ui/hooks/use-context-menu-click-handler.js";
+import c from "../../ui/layout/flex-view.js";
+import { getIsWritingTool as m } from "../cue-canvas-helpers.js";
+import { PenIconWrapper as T, StyledDownIcon as b, MenuWrapper as g } from "../cue-cavas-styled.js";
+import { useCueCanvasActions as h } from "../hooks/use-cue-canvas-actions.js";
+import x from "./color-palette.js";
+import { TOOLS_TO_COMP as I } from "./icon-map.js";
+import k from "./tool.js";
+const _ = d(({ writingTools: s, userType: a }) => {
+  const { activeTool: e, activeColor: t, setActiveColor: u } = h(), i = C(null), { menuVisible: n, onMenuClick: p } = v(
+    i,
     void 0,
     !0,
     void 0
-  ), v = p[c(o) ? o : "pen"];
-  return /* @__PURE__ */ n(t, { $borderRadius: 16, $background: "WHITE", ref: l, children: [
-    /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(s, { onClick: f, label: "Active Tool", children: /* @__PURE__ */ n(t, { $flexDirection: "row", $justifyContent: "center", $alignItems: "center", children: [
-      /* @__PURE__ */ e(
-        v,
+  ), f = I[m(e) ? e : "pen"];
+  return /* @__PURE__ */ r(c, { $borderRadius: 16, $background: "WHITE", ref: i, children: [
+    /* @__PURE__ */ o(T, { children: /* @__PURE__ */ o($, { onClick: p, label: "Active Tool", children: /* @__PURE__ */ r(c, { $flexDirection: "row", $justifyContent: "center", $alignItems: "center", children: [
+      /* @__PURE__ */ o(
+        f,
         {
-          $active: c(o),
-          $activeColor: i,
+          $active: m(e),
+          $activeColor: t,
           $isWhiteBoard: !0
         }
       ),
-      /* @__PURE__ */ e(W, { $isAnimating: m })
+      /* @__PURE__ */ o(b, { $isAnimating: n })
     ] }) }) }),
-    m && /* @__PURE__ */ n(
-      k,
+    n && /* @__PURE__ */ r(
+      g,
       {
         $flexDirection: "row",
         $alignItems: "center",
         $borderColor: "GREY_1",
         $background: "WHITE",
         children: [
-          u.map((r) => {
-            const a = p[r];
-            return /* @__PURE__ */ e(t, { $gutterX: 0.25, children: /* @__PURE__ */ e(s, { onClick: () => d(r), label: r, children: c(r) ? /* @__PURE__ */ e(
-              a,
-              {
-                $active: o === r,
-                $activeColor: i,
-                $isWhiteBoard: !0
-              }
-            ) : /* @__PURE__ */ e(x, { $active: o === r, children: /* @__PURE__ */ e(a, {}) }) }) }, r);
-          }),
-          /* @__PURE__ */ e(
-            M,
+          s.map((l) => /* @__PURE__ */ o(k, { tool: l, withGutter: !0 }, l)),
+          /* @__PURE__ */ o(
+            x,
             {
-              setActiveColor: $,
-              activeColor: i,
-              userType: C
+              setActiveColor: u,
+              activeColor: t,
+              userType: a
             }
           )
         ]
@@ -60,6 +51,6 @@ const S = h(({ writingTools: u, onToolClick: d, userType: C }) => {
   ] });
 });
 export {
-  S as default
+  _ as default
 };
 //# sourceMappingURL=pen-tool-menu.js.map

package/dist/features/cue-canvas/toolbar/pen-tool-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"pen-tool-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/pen-tool-menu.tsx"],"sourcesContent":["import type { IPenToolMenu, TToolComponentType } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo, useRef } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getIsWritingTool } from '../cue-canvas-helpers';\nimport { MenuWrapper, PenIconWrapper, StyledDownIcon } from '../cue-cavas-styled';\nimport { StyledWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport ColorPallete from './color-pallete';\nimport { TOOLS_TO_COMP } from './icon-map';\n\nconst PenToolMenu: FC<IPenToolMenu> = memo(({ writingTools, onToolClick, userType }) => {\n  const { activeTool, activeColor, setActiveColor } = useCueCanvasActions();\n  const penMenuRef = useRef(null);\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    penMenuRef,\n    undefined,\n    true,\n    undefined,\n  );\n\n  const ActiveToolComponent = TOOLS_TO_COMP[\n    getIsWritingTool(activeTool) ? activeTool : 'pen'\n  ] as TToolComponentType;\n\n  return (\n    <FlexView $borderRadius={16} $background=\"WHITE\" ref={penMenuRef}>\n      <PenIconWrapper>\n        <Clickable onClick={onMenuClick} label=\"Active Tool\">\n          <FlexView $flexDirection=\"row\" $justifyContent=\"center\" $alignItems=\"center\">\n            <ActiveToolComponent\n              $active={getIsWritingTool(activeTool)}\n              $activeColor={activeColor}\n              $isWhiteBoard\n            />\n            <StyledDownIcon $isAnimating={menuVisible} />\n          </FlexView>\n        </Clickable>\n      </PenIconWrapper>\n      {menuVisible && (\n        <MenuWrapper\n          $flexDirection=\"row\"\n          $alignItems=\"center\"\n          $borderColor=\"GREY_1\"\n          $background=\"WHITE\"\n        >\n          {writingTools.map(tool => {\n            const ToolComponent = TOOLS_TO_COMP[tool] as TToolComponentType;\n\n            return (\n              <FlexView $gutterX={0.25} key={tool}>\n                <Clickable onClick={() => onToolClick(tool)} label={tool}>\n                  {getIsWritingTool(tool) ? (\n                    <ToolComponent\n                      $active={activeTool === tool}\n                      $activeColor={activeColor}\n                      $isWhiteBoard\n                    />\n                  ) : (\n                    <StyledWrapper $active={activeTool === tool}>\n                      <ToolComponent />\n                    </StyledWrapper>\n                  )}\n                </Clickable>\n              </FlexView>\n            );\n          })}\n          <ColorPallete\n            setActiveColor={setActiveColor}\n            activeColor={activeColor}\n            userType={userType}\n          />\n        </MenuWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default PenToolMenu;\n"],"names":["PenToolMenu","memo","writingTools","onToolClick","userType","activeTool","activeColor","setActiveColor","useCueCanvasActions","penMenuRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","ActiveToolComponent","TOOLS_TO_COMP","getIsWritingTool","FlexView","jsx","PenIconWrapper","Clickable","jsxs","StyledDownIcon","MenuWrapper","tool","ToolComponent","StyledWrapper","ColorPallete"],"mappings":";;;;;;;;;;AAeA,MAAMA,IAAgCC,EAAK,CAAC,EAAE,cAAAC,GAAc,aAAAC,GAAa,UAAAC,QAAe;AACtF,QAAM,EAAE,YAAAC,GAAY,aAAAC,GAAa,gBAAAC,MAAmBC,EAAoB,GAClEC,IAAaC,EAAO,IAAI,GACxB,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAGIK,IAAsBC,EAC1BC,EAAiBX,CAAU,IAAIA,IAAa,KAC9C;AAEA,2BACGY,GAAS,EAAA,eAAe,IAAI,aAAY,SAAQ,KAAKR,GACpD,UAAA;AAAA,IAAA,gBAAAS,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACE,GAAU,EAAA,SAASR,GAAa,OAAM,eACrC,UAAC,gBAAAS,EAAAJ,GAAA,EAAS,gBAAe,OAAM,iBAAgB,UAAS,aAAY,UAClE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACJ;AAAA,QAAA;AAAA,UACC,SAASE,EAAiBX,CAAU;AAAA,UACpC,cAAcC;AAAA,UACd,eAAa;AAAA,QAAA;AAAA,MACf;AAAA,MACA,gBAAAY,EAACI,GAAe,EAAA,cAAcX,EAAa,CAAA;AAAA,IAAA,EAC7C,CAAA,EACF,CAAA,GACF;AAAA,IACCA,KACC,gBAAAU;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,aAAY;AAAA,QAEX,UAAA;AAAA,UAAArB,EAAa,IAAI,CAAQsB,MAAA;AAClB,kBAAAC,IAAgBV,EAAcS,CAAI;AAExC,mBACG,gBAAAN,EAAAD,GAAA,EAAS,UAAU,MAClB,4BAACG,GAAU,EAAA,SAAS,MAAMjB,EAAYqB,CAAI,GAAG,OAAOA,GACjD,UAAAR,EAAiBQ,CAAI,IACpB,gBAAAN;AAAA,cAACO;AAAA,cAAA;AAAA,gBACC,SAASpB,MAAemB;AAAA,gBACxB,cAAclB;AAAA,gBACd,eAAa;AAAA,cAAA;AAAA,YAAA,IAGd,gBAAAY,EAAAQ,GAAA,EAAc,SAASrB,MAAemB,GACrC,UAAA,gBAAAN,EAACO,GAAc,CAAA,CAAA,EACjB,CAAA,EAEJ,CAAA,EAAA,GAb6BD,CAc/B;AAAA,UAAA,CAEH;AAAA,UACD,gBAAAN;AAAA,YAACS;AAAA,YAAA;AAAA,cACC,gBAAApB;AAAA,cACA,aAAAD;AAAA,cACA,UAAAF;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"pen-tool-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/pen-tool-menu.tsx"],"sourcesContent":["import type { IPenToolMenu, TToolComponentType } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo, useRef } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getIsWritingTool } from '../cue-canvas-helpers';\nimport { MenuWrapper, PenIconWrapper, StyledDownIcon } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport ColorPalette from './color-palette';\nimport { TOOLS_TO_COMP } from './icon-map';\nimport Tool from './tool';\n\nconst PenToolMenu: FC<IPenToolMenu> = memo(({ writingTools, userType }) => {\n  const { activeTool, activeColor, setActiveColor } = useCueCanvasActions();\n\n  const penMenuRef = useRef(null);\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    penMenuRef,\n    undefined,\n    true,\n    undefined,\n  );\n\n  const ActiveToolComponent = TOOLS_TO_COMP[\n    getIsWritingTool(activeTool) ? activeTool : 'pen'\n  ] as TToolComponentType;\n\n  return (\n    <FlexView $borderRadius={16} $background=\"WHITE\" ref={penMenuRef}>\n      <PenIconWrapper>\n        <Clickable onClick={onMenuClick} label=\"Active Tool\">\n          <FlexView $flexDirection=\"row\" $justifyContent=\"center\" $alignItems=\"center\">\n            <ActiveToolComponent\n              $active={getIsWritingTool(activeTool)}\n              $activeColor={activeColor}\n              $isWhiteBoard\n            />\n            <StyledDownIcon $isAnimating={menuVisible} />\n          </FlexView>\n        </Clickable>\n      </PenIconWrapper>\n      {menuVisible && (\n        <MenuWrapper\n          $flexDirection=\"row\"\n          $alignItems=\"center\"\n          $borderColor=\"GREY_1\"\n          $background=\"WHITE\"\n        >\n          {writingTools.map(tool => (\n            <Tool tool={tool} withGutter key={tool} />\n          ))}\n\n          <ColorPalette\n            setActiveColor={setActiveColor}\n            activeColor={activeColor}\n            userType={userType}\n          />\n        </MenuWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default PenToolMenu;\n"],"names":["PenToolMenu","memo","writingTools","userType","activeTool","activeColor","setActiveColor","useCueCanvasActions","penMenuRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","ActiveToolComponent","TOOLS_TO_COMP","getIsWritingTool","FlexView","jsx","PenIconWrapper","Clickable","jsxs","StyledDownIcon","MenuWrapper","Tool","tool","ColorPalette"],"mappings":";;;;;;;;;;;AAeA,MAAMA,IAAgCC,EAAK,CAAC,EAAE,cAAAC,GAAc,UAAAC,QAAe;AACzE,QAAM,EAAE,YAAAC,GAAY,aAAAC,GAAa,gBAAAC,MAAmBC,EAAoB,GAElEC,IAAaC,EAAO,IAAI,GACxB,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAGIK,IAAsBC,EAC1BC,EAAiBX,CAAU,IAAIA,IAAa,KAC9C;AAEA,2BACGY,GAAS,EAAA,eAAe,IAAI,aAAY,SAAQ,KAAKR,GACpD,UAAA;AAAA,IAAA,gBAAAS,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACE,GAAU,EAAA,SAASR,GAAa,OAAM,eACrC,UAAC,gBAAAS,EAAAJ,GAAA,EAAS,gBAAe,OAAM,iBAAgB,UAAS,aAAY,UAClE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACJ;AAAA,QAAA;AAAA,UACC,SAASE,EAAiBX,CAAU;AAAA,UACpC,cAAcC;AAAA,UACd,eAAa;AAAA,QAAA;AAAA,MACf;AAAA,MACA,gBAAAY,EAACI,GAAe,EAAA,cAAcX,EAAa,CAAA;AAAA,IAAA,EAC7C,CAAA,EACF,CAAA,GACF;AAAA,IACCA,KACC,gBAAAU;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,aAAY;AAAA,QAEX,UAAA;AAAA,UAAapB,EAAA,IAAI,OACf,gBAAAe,EAAAM,GAAA,EAAK,MAAAC,GAAY,YAAU,GAAA,GAAMA,CAAM,CACzC;AAAA,UAED,gBAAAP;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,gBAAAnB;AAAA,cACA,aAAAD;AAAA,cACA,UAAAF;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}

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

@@ -0,0 +1,27 @@
+import { jsx as r } from "react/jsx-runtime";
+import { memo as s, useCallback as p } from "react";
+import T from "../../ui/buttons/clickable/clickable.js";
+import f from "../../ui/layout/flex-view.js";
+import { STATELESS_TOOLS as d, getIsWritingTool as C } from "../cue-canvas-helpers.js";
+import { StyledWrapper as u } from "../cue-cavas-styled.js";
+import { useCueCanvasActions as v } from "../hooks/use-cue-canvas-actions.js";
+import O from "./grid-menu.js";
+import { TOOLS_TO_COMP as S } from "./icon-map.js";
+const $ = ({ tool: o, withGutter: n }) => {
+  const e = S[o], {
+    activeInstance: i,
+    setActiveTool: c,
+    activeTool: m,
+    activeColor: l
+  } = v(), a = p(
+    (t) => {
+      i == null || i.setTool(t), d.has(t) || c(t);
+    },
+    [i, c]
+  );
+  return o === "grid" ? /* @__PURE__ */ r(O, { GridIcon: e }) : /* @__PURE__ */ r(f, { $gutterX: n ? 0.25 : 0, children: /* @__PURE__ */ r(T, { onClick: () => a(o), label: o, children: C(o) ? /* @__PURE__ */ r(e, { $active: m === o, $activeColor: l, $isWhiteBoard: !0 }) : /* @__PURE__ */ r(u, { $active: m === o, children: /* @__PURE__ */ r(e, {}) }) }) });
+}, _ = s($);
+export {
+  _ as default
+};
+//# sourceMappingURL=tool.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tool.js","sources":["../../../../src/features/cue-canvas/toolbar/tool.tsx"],"sourcesContent":["import type { TCueCanvasTool } from '../types/cue-canvas';\nimport type { TToolComponentType } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo, useCallback } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getIsWritingTool, STATELESS_TOOLS } from '../cue-canvas-helpers';\nimport { StyledWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport GridMenu from './grid-menu';\nimport { TOOLS_TO_COMP } from './icon-map';\n\ninterface IToolProps {\n  tool: TCueCanvasTool;\n  withGutter?: boolean;\n}\n\nconst Tool: FC<IToolProps> = ({ tool, withGutter }) => {\n  const ToolComponent = TOOLS_TO_COMP[tool] as TToolComponentType;\n  const {\n    activeInstance: cueCanvas,\n    setActiveTool,\n    activeTool,\n    activeColor,\n  } = useCueCanvasActions();\n\n  const onToolClick = useCallback(\n    (t: TCueCanvasTool) => {\n      cueCanvas?.setTool(t);\n\n      if (!STATELESS_TOOLS.has(t)) {\n        setActiveTool(t);\n      }\n    },\n    [cueCanvas, setActiveTool],\n  );\n\n  if (tool === 'grid') {\n    return <GridMenu GridIcon={ToolComponent} />;\n  }\n\n  return (\n    <FlexView $gutterX={withGutter ? 0.25 : 0}>\n      <Clickable onClick={() => onToolClick(tool)} label={tool}>\n        {getIsWritingTool(tool) ? (\n          <ToolComponent $active={activeTool === tool} $activeColor={activeColor} $isWhiteBoard />\n        ) : (\n          <StyledWrapper $active={activeTool === tool}>\n            <ToolComponent />\n          </StyledWrapper>\n        )}\n      </Clickable>\n    </FlexView>\n  );\n};\n\nexport default memo(Tool);\n"],"names":["Tool","tool","withGutter","ToolComponent","TOOLS_TO_COMP","cueCanvas","setActiveTool","activeTool","activeColor","useCueCanvasActions","onToolClick","useCallback","STATELESS_TOOLS","jsx","GridMenu","FlexView","Clickable","StyledWrapper","Tool$1","memo"],"mappings":";;;;;;;;;AAmBA,MAAMA,IAAuB,CAAC,EAAE,MAAAC,GAAM,YAAAC,QAAiB;AAC/C,QAAAC,IAAgBC,EAAcH,CAAI,GAClC;AAAA,IACJ,gBAAgBI;AAAA,IAChB,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,MACEC,EAAoB,GAElBC,IAAcC;AAAA,IAClB,CAAC,MAAsB;AACrB,MAAAN,KAAA,QAAAA,EAAW,QAAQ,IAEdO,EAAgB,IAAI,CAAC,KACxBN,EAAc,CAAC;AAAA,IAEnB;AAAA,IACA,CAACD,GAAWC,CAAa;AAAA,EAAA;AAG3B,SAAIL,MAAS,SACJ,gBAAAY,EAACC,GAAS,EAAA,UAAUX,EAAe,CAAA,sBAIzCY,GAAS,EAAA,UAAUb,IAAa,OAAO,GACtC,UAAC,gBAAAW,EAAAG,GAAA,EAAU,SAAS,MAAMN,EAAYT,CAAI,GAAG,OAAOA,GACjD,YAAiBA,CAAI,IACnB,gBAAAY,EAAAV,GAAA,EAAc,SAASI,MAAeN,GAAM,cAAcO,GAAa,eAAa,GAAC,CAAA,IAErF,gBAAAK,EAAAI,GAAA,EAAc,SAASV,MAAeN,GACrC,4BAACE,GAAc,CAAA,CAAA,EACjB,CAAA,GAEJ,EACF,CAAA;AAEJ,GAEee,IAAAC,EAAKnB,CAAI;"}

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

@@ -1,34 +1,22 @@
-import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import { memo as n } from "react";
-import f from "../../ui/layout/flex-view.js";
-import { getUserTools as s } from "../cue-canvas-helpers.js";
-import { useToolState as c } from "../hooks/use-tool-state.js";
-import a from "./color-picker-button.js";
-import p from "./tool-buttons.js";
-import x from "./whiteboard-toolbar.js";
-const b = n(({ userType: o, renderAs: r }) => {
-  const { onToolClick: i, onGridOptionClick: m } = c(), e = s(o, r);
-  return r === "whiteboard" ? /* @__PURE__ */ t(
-    x,
-    {
-      onGridOptionClick: m,
-      onToolClick: i,
-      tools: e,
-      userType: o
-    }
-  ) : /* @__PURE__ */ l(f, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", $flexGapX: 0.5, children: [
-    /* @__PURE__ */ t(
-      p,
-      {
-        tools: e,
-        onToolClick: i,
-        onGridOptionClick: m
-      }
-    ),
-    /* @__PURE__ */ t(a, { userType: o })
+import { jsx as m, jsxs as n } from "react/jsx-runtime";
+import { memo as s, useEffect as a } from "react";
+import c from "../../ui/layout/flex-view.js";
+import { CANVAS_COLORS as p } from "../constants/constants.js";
+import { getUserTools as C } from "../cue-canvas-helpers.js";
+import { useCueCanvasActions as x } from "../hooks/use-cue-canvas-actions.js";
+import b from "./color-picker-menu.js";
+import u from "./tool.js";
+import T from "./whiteboard-toolbar.js";
+const $ = s(({ userType: t, renderAs: r }) => {
+  const f = C(t, r), { activeInstance: o, activeTool: i, activeColor: e } = x();
+  return a(() => {
+    o && (e && o.setColor(p[e]), i && (o == null || o.setTool(i)));
+  }, [e, i, o, r]), r === "whiteboard" ? /* @__PURE__ */ m(T, { tools: f, userType: t }) : /* @__PURE__ */ n(c, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", $flexGapX: 0.5, children: [
+    f.map((l) => /* @__PURE__ */ m(u, { tool: l }, l)),
+    /* @__PURE__ */ m(b, { userType: t })
   ] });
-}), w = b;
+}), V = $;
 export {
-  w as default
+  V as default
 };
 //# sourceMappingURL=toolbar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/toolbar.tsx"],"sourcesContent":["import type { IToolbarProps } from '../types/toolbar';\n\nimport React, { memo } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport { getUserTools } from '../cue-canvas-helpers';\nimport { useToolState } from '../hooks/use-tool-state';\nimport ColorPickerButton from './color-picker-button';\nimport ToolButtonList from './tool-buttons';\nimport WhiteboardToolbar from './whiteboard-toolbar';\n\nconst Toolbar: React.FC<IToolbarProps> = memo(({ userType, renderAs }) => {\n  const { onToolClick, onGridOptionClick } = useToolState();\n  const tools = getUserTools(userType, renderAs);\n\n  if (renderAs === 'whiteboard') {\n    return (\n      <WhiteboardToolbar\n        onGridOptionClick={onGridOptionClick}\n        onToolClick={onToolClick}\n        tools={tools}\n        userType={userType}\n      />\n    );\n  }\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\" $flexGapX={0.5}>\n      <ToolButtonList\n        tools={tools}\n        onToolClick={onToolClick}\n        onGridOptionClick={onGridOptionClick}\n      />\n      <ColorPickerButton userType={userType} />\n    </FlexView>\n  );\n});\n\nexport default Toolbar;\n"],"names":["Toolbar","memo","userType","renderAs","onToolClick","onGridOptionClick","useToolState","tools","getUserTools","jsx","WhiteboardToolbar","jsxs","FlexView","ToolButtonList","ColorPickerButton","Toolbar$1"],"mappings":";;;;;;;;AAWA,MAAMA,IAAmCC,EAAK,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AACxE,QAAM,EAAE,aAAAC,GAAa,mBAAAC,EAAkB,IAAIC,EAAa,GAClDC,IAAQC,EAAaN,GAAUC,CAAQ;AAE7C,SAAIA,MAAa,eAEb,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,mBAAAL;AAAA,MACA,aAAAD;AAAA,MACA,OAAAG;AAAA,MACA,UAAAL;AAAA,IAAA;AAAA,EAAA,IAMJ,gBAAAS,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAgB,UAAS,WAAW,KACtF,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,OAAAN;AAAA,QACA,aAAAH;AAAA,QACA,mBAAAC;AAAA,MAAA;AAAA,IACF;AAAA,IACA,gBAAAI,EAACK,KAAkB,UAAAZ,GAAoB;AAAA,EACzC,EAAA,CAAA;AAEJ,CAAC,GAEDa,IAAef;"}
+{"version":3,"file":"toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/toolbar.tsx"],"sourcesContent":["import type { IToolbarProps } from '../types/toolbar';\n\nimport React, { memo, useEffect } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport { CANVAS_COLORS } from '../constants/constants';\nimport { getUserTools } from '../cue-canvas-helpers';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport ColorPickerMenu from './color-picker-menu';\nimport Tool from './tool';\nimport WhiteboardToolbar from './whiteboard-toolbar';\n\nconst Toolbar: React.FC<IToolbarProps> = memo(({ userType, renderAs }) => {\n  const tools = getUserTools(userType, renderAs);\n  const { activeInstance: cueCanvas, activeTool, activeColor } = useCueCanvasActions();\n\n  useEffect(() => {\n    if (cueCanvas) {\n      if (activeColor) {\n        cueCanvas.setColor(CANVAS_COLORS[activeColor]);\n      }\n\n      if (activeTool) {\n        cueCanvas?.setTool(activeTool);\n      }\n    }\n  }, [activeColor, activeTool, cueCanvas, renderAs]);\n\n  if (renderAs === 'whiteboard') {\n    return <WhiteboardToolbar tools={tools} userType={userType} />;\n  }\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\" $flexGapX={0.5}>\n      {tools.map(tool => (\n        <Tool tool={tool} key={tool} />\n      ))}\n      <ColorPickerMenu userType={userType} />\n    </FlexView>\n  );\n});\n\nexport default Toolbar;\n"],"names":["Toolbar","memo","userType","renderAs","tools","getUserTools","cueCanvas","activeTool","activeColor","useCueCanvasActions","useEffect","CANVAS_COLORS","jsx","WhiteboardToolbar","jsxs","FlexView","tool","Tool","ColorPickerMenu","Toolbar$1"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAmCC,EAAK,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AAClE,QAAAC,IAAQC,EAAaH,GAAUC,CAAQ,GACvC,EAAE,gBAAgBG,GAAW,YAAAC,GAAY,aAAAC,EAAA,IAAgBC;AAc/D,SAZAC,EAAU,MAAM;AACd,IAAIJ,MACEE,KACQF,EAAA,SAASK,EAAcH,CAAW,CAAC,GAG3CD,MACFD,KAAA,QAAAA,EAAW,QAAQC;AAAA,KAGtB,CAACC,GAAaD,GAAYD,GAAWH,CAAQ,CAAC,GAE7CA,MAAa,eACR,gBAAAS,EAACC,GAAkB,EAAA,OAAAT,GAAc,UAAAF,EAAoB,CAAA,IAI5D,gBAAAY,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAgB,UAAS,WAAW,KACrF,UAAA;AAAA,IAAAX,EAAM,IAAI,CACTY,MAAA,gBAAAJ,EAACK,GAAK,EAAA,MAAAD,KAAiBA,CAAM,CAC9B;AAAA,IACD,gBAAAJ,EAACM,KAAgB,UAAAhB,GAAoB;AAAA,EACvC,EAAA,CAAA;AAEJ,CAAC,GAEDiB,IAAenB;"}

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

@@ -1,25 +1,16 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { memo as l } from "react";
-import f from "../../ui/layout/flex-view.js";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { memo as n } from "react";
+import s from "../../ui/layout/flex-view.js";
 import p from "./pen-tool-menu.js";
-import a from "./tool-buttons.js";
-const b = l(
-  ({ tools: o, onToolClick: t, onGridOptionClick: e, userType: i }) => {
-    const s = o.slice(0, 4), m = o.slice(4);
-    return /* @__PURE__ */ n(f, { $flexDirection: "row", $alignItems: "center", $flexGapX: 0.25, $position: "relative", children: [
-      /* @__PURE__ */ r(p, { writingTools: s, onToolClick: t, userType: i }),
-      /* @__PURE__ */ r(
-        a,
-        {
-          tools: m,
-          onToolClick: t,
-          onGridOptionClick: e
-        }
-      )
-    ] });
-  }
-);
+import a from "./tool.js";
+const d = n(({ tools: o, userType: i }) => {
+  const t = o.slice(0, 4), m = o.slice(4);
+  return /* @__PURE__ */ l(s, { $flexDirection: "row", $alignItems: "center", $flexGapX: 0.25, $position: "relative", children: [
+    /* @__PURE__ */ e(p, { writingTools: t, userType: i }),
+    m.map((r) => /* @__PURE__ */ e(a, { tool: r }, r))
+  ] });
+});
 export {
-  b as default
+  d as default
 };
 //# sourceMappingURL=whiteboard-toolbar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"whiteboard-toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/whiteboard-toolbar.tsx"],"sourcesContent":["import type { IWhiteboardToolbar } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport PenToolMenu from './pen-tool-menu';\nimport ToolButtonList from './tool-buttons';\n\nconst WhiteboardToolbar: FC<IWhiteboardToolbar> = memo(\n  ({ tools, onToolClick, onGridOptionClick, userType }) => {\n    const writingTools = tools.slice(0, 4);\n    const buttonTools = tools.slice(4);\n\n    return (\n      <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGapX={0.25} $position=\"relative\">\n        <PenToolMenu writingTools={writingTools} onToolClick={onToolClick} userType={userType} />\n        <ToolButtonList\n          tools={buttonTools}\n          onToolClick={onToolClick}\n          onGridOptionClick={onGridOptionClick}\n        />\n      </FlexView>\n    );\n  },\n);\n\nexport default WhiteboardToolbar;\n"],"names":["WhiteboardToolbar","memo","tools","onToolClick","onGridOptionClick","userType","writingTools","buttonTools","jsxs","FlexView","jsx","PenToolMenu","ToolButtonList"],"mappings":";;;;;AASA,MAAMA,IAA4CC;AAAA,EAChD,CAAC,EAAE,OAAAC,GAAO,aAAAC,GAAa,mBAAAC,GAAmB,UAAAC,QAAe;AACvD,UAAMC,IAAeJ,EAAM,MAAM,GAAG,CAAC,GAC/BK,IAAcL,EAAM,MAAM,CAAC;AAG/B,WAAA,gBAAAM,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,WAAW,MAAM,WAAU,YAC7E,UAAA;AAAA,MAAC,gBAAAC,EAAAC,GAAA,EAAY,cAAAL,GAA4B,aAAAH,GAA0B,UAAAE,EAAoB,CAAA;AAAA,MACvF,gBAAAK;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAOL;AAAA,UACP,aAAAJ;AAAA,UACA,mBAAAC;AAAA,QAAA;AAAA,MACF;AAAA,IACF,EAAA,CAAA;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"whiteboard-toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/whiteboard-toolbar.tsx"],"sourcesContent":["import type { IWhiteboardToolbar } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport PenToolMenu from './pen-tool-menu';\nimport Tool from './tool';\n\nconst WhiteboardToolbar: FC<IWhiteboardToolbar> = memo(({ tools, userType }) => {\n  const writingTools = tools.slice(0, 4);\n  const otherTools = tools.slice(4);\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGapX={0.25} $position=\"relative\">\n      <PenToolMenu writingTools={writingTools} userType={userType} />\n      {otherTools.map(tool => (\n        <Tool tool={tool} key={tool} />\n      ))}\n    </FlexView>\n  );\n});\n\nexport default WhiteboardToolbar;\n"],"names":["WhiteboardToolbar","memo","tools","userType","writingTools","otherTools","jsxs","FlexView","jsx","PenToolMenu","tool","Tool"],"mappings":";;;;;AASA,MAAMA,IAA4CC,EAAK,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAAe;AAC9E,QAAMC,IAAeF,EAAM,MAAM,GAAG,CAAC,GAC/BG,IAAaH,EAAM,MAAM,CAAC;AAG9B,SAAA,gBAAAI,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,WAAW,MAAM,WAAU,YAC7E,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAY,cAAAL,GAA4B,UAAAD,EAAoB,CAAA;AAAA,IAC5DE,EAAW,IAAI,CAAAK,wBACbC,GAAK,EAAA,MAAAD,KAAiBA,CAAM,CAC9B;AAAA,EACH,EAAA,CAAA;AAEJ,CAAC;"}

package/package.json

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

package/dist/features/cue-canvas/hooks/use-tool-state.js

@@ -1,34 +0,0 @@
-import { useEffect as l, useCallback as s } from "react";
-import { CANVAS_COLORS as m } from "../constants/constants.js";
-import { SINGLE_CLICK_TOOLS as n } from "../cue-canvas-helpers.js";
-import { useCueCanvasActions as T } from "./use-cue-canvas-actions.js";
-const A = () => {
-  const {
-    activeInstance: o,
-    activeTool: i,
-    setActiveTool: e,
-    activeColor: r
-  } = T();
-  l(() => {
-    o && (r && o.setColor(m[r]), i && (o == null || o.setTool(i)));
-  }, [r, i, o]);
-  const c = s(
-    (t) => {
-      o == null || o.setTool(t), n.has(t) || e(t);
-    },
-    [o, e]
-  ), f = s(
-    (t) => {
-      o == null || o.changeGrid(t);
-    },
-    [o]
-  );
-  return {
-    onToolClick: c,
-    onGridOptionClick: f
-  };
-};
-export {
-  A as useToolState
-};
-//# sourceMappingURL=use-tool-state.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"use-tool-state.js","sources":["../../../../src/features/cue-canvas/hooks/use-tool-state.ts"],"sourcesContent":["import type { TCueCanvasGridName, TCueCanvasTool } from '../types/cue-canvas';\n\nimport { useCallback, useEffect } from 'react';\n\nimport { CANVAS_COLORS } from '../constants/constants';\nimport { SINGLE_CLICK_TOOLS } from '../cue-canvas-helpers';\nimport { useCueCanvasActions } from './use-cue-canvas-actions';\n\nexport const useToolState = () => {\n  const {\n    activeInstance: cueCanvas,\n    activeTool,\n    setActiveTool,\n    activeColor,\n  } = useCueCanvasActions();\n\n  useEffect(() => {\n    if (cueCanvas) {\n      if (activeColor) {\n        cueCanvas.setColor(CANVAS_COLORS[activeColor]);\n      }\n\n      if (activeTool) {\n        cueCanvas?.setTool(activeTool);\n      }\n    }\n  }, [activeColor, activeTool, cueCanvas]);\n\n  const onToolClick = useCallback(\n    (tool: TCueCanvasTool) => {\n      cueCanvas?.setTool(tool);\n\n      if (!SINGLE_CLICK_TOOLS.has(tool)) {\n        setActiveTool(tool);\n      }\n    },\n    [cueCanvas, setActiveTool],\n  );\n\n  const onGridOptionClick = useCallback(\n    (gridOption: TCueCanvasGridName) => {\n      cueCanvas?.changeGrid(gridOption);\n    },\n    [cueCanvas],\n  );\n\n  return {\n    onToolClick,\n    onGridOptionClick,\n  };\n};\n"],"names":["useToolState","cueCanvas","activeTool","setActiveTool","activeColor","useCueCanvasActions","useEffect","CANVAS_COLORS","onToolClick","useCallback","tool","SINGLE_CLICK_TOOLS","onGridOptionClick","gridOption"],"mappings":";;;;AAQO,MAAMA,IAAe,MAAM;AAC1B,QAAA;AAAA,IACJ,gBAAgBC;AAAA,IAChB,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,aAAAC;AAAA,MACEC,EAAoB;AAExB,EAAAC,EAAU,MAAM;AACd,IAAIL,MACEG,KACQH,EAAA,SAASM,EAAcH,CAAW,CAAC,GAG3CF,MACFD,KAAA,QAAAA,EAAW,QAAQC;AAAA,EAGtB,GAAA,CAACE,GAAaF,GAAYD,CAAS,CAAC;AAEvC,QAAMO,IAAcC;AAAA,IAClB,CAACC,MAAyB;AACxB,MAAAT,KAAA,QAAAA,EAAW,QAAQS,IAEdC,EAAmB,IAAID,CAAI,KAC9BP,EAAcO,CAAI;AAAA,IAEtB;AAAA,IACA,CAACT,GAAWE,CAAa;AAAA,EAAA,GAGrBS,IAAoBH;AAAA,IACxB,CAACI,MAAmC;AAClC,MAAAZ,KAAA,QAAAA,EAAW,WAAWY;AAAA,IACxB;AAAA,IACA,CAACZ,CAAS;AAAA,EAAA;AAGL,SAAA;AAAA,IACL,aAAAO;AAAA,IACA,mBAAAI;AAAA,EAAA;AAEJ;"}

package/dist/features/cue-canvas/toolbar/color-pallete.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"color-pallete.js","sources":["../../../../src/features/cue-canvas/toolbar/color-pallete.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { TCueCanvasColors } from '../types/cue-canvas';\n\nimport { memo, useCallback, useMemo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getColorsForUser } from '../cue-canvas-helpers';\nimport { StyledCheckIcon } from '../cue-cavas-styled';\nimport { ColorPicker } from '../cue-cavas-styled';\n\ninterface IColorPallete {\n  setActiveColor: (color: TCueCanvasColors) => void;\n  activeColor: TCueCanvasColors;\n  userType: TUserTypes;\n}\n\nconst ColorPallete: React.FC<IColorPallete> = memo(({ setActiveColor, activeColor, userType }) => {\n  const handleColorChange = useCallback(\n    (color: TCueCanvasColors) => {\n      setActiveColor(color);\n    },\n    [setActiveColor],\n  );\n  const colors = useMemo(() => getColorsForUser(userType), [userType]);\n\n  return (\n    <>\n      {colors.map((color, index) => (\n        <Clickable\n          key={index}\n          onClick={() => handleColorChange(color)}\n          label={`Color Picker - ${color}`}\n        >\n          <FlexView\n            $width={22}\n            $height={22}\n            $borderRadius={11}\n            $justifyContent=\"center\"\n            $background={activeColor === color ? 'BLACK' : 'WHITE'}\n            $alignItems=\"center\"\n          >\n            <ColorPicker\n              $width={20}\n              $height={20}\n              $borderRadius={10}\n              $color={color}\n              $alignItems=\"center\"\n              $justifyContent=\"center\"\n            >\n              {activeColor === color && <StyledCheckIcon />}\n            </ColorPicker>\n          </FlexView>\n        </Clickable>\n      ))}\n    </>\n  );\n});\n\nexport default ColorPallete;\n"],"names":["ColorPallete","memo","setActiveColor","activeColor","userType","handleColorChange","useCallback","color","colors","useMemo","getColorsForUser","jsx","Fragment","index","Clickable","FlexView","ColorPicker","StyledCheckIcon"],"mappings":";;;;;;AAiBA,MAAMA,IAAwCC,EAAK,CAAC,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,QAAe;AAChG,QAAMC,IAAoBC;AAAA,IACxB,CAACC,MAA4B;AAC3B,MAAAL,EAAeK,CAAK;AAAA,IACtB;AAAA,IACA,CAACL,CAAc;AAAA,EAAA,GAEXM,IAASC,EAAQ,MAAMC,EAAiBN,CAAQ,GAAG,CAACA,CAAQ,CAAC;AAEnE,SAEK,gBAAAO,EAAAC,GAAA,EAAA,UAAAJ,EAAO,IAAI,CAACD,GAAOM,MAClB,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MAEC,SAAS,MAAMT,EAAkBE,CAAK;AAAA,MACtC,OAAO,kBAAkBA,CAAK;AAAA,MAE9B,UAAA,gBAAAI;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,eAAe;AAAA,UACf,iBAAgB;AAAA,UAChB,aAAaZ,MAAgBI,IAAQ,UAAU;AAAA,UAC/C,aAAY;AAAA,UAEZ,UAAA,gBAAAI;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,cACf,QAAQT;AAAA,cACR,aAAY;AAAA,cACZ,iBAAgB;AAAA,cAEf,UAAAJ,MAAgBI,KAAS,gBAAAI,EAACM,GAAgB,CAAA,CAAA;AAAA,YAAA;AAAA,UAC7C;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAtBKJ;AAAA,EAwBR,CAAA,EACH,CAAA;AAEJ,CAAC;"}

package/dist/features/cue-canvas/toolbar/color-picker-button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"color-picker-button.js","sources":["../../../../src/features/cue-canvas/toolbar/color-picker-button.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { FC } from 'react';\n\nimport { memo, useRef } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../ui/layout/flex-view';\nimport { ColorPicker, PalleteWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport ColorPallete from './color-pallete';\n\ninterface ColorPickerButtonProps {\n  userType: TUserTypes;\n}\n\nconst ColorPickerButton: FC<ColorPickerButtonProps> = memo(({ userType }) => {\n  const colorPalleteRef = useRef(null);\n  const { activeColor, setActiveColor, isWritingToolActive } = useCueCanvasActions();\n\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    colorPalleteRef,\n    undefined,\n    true,\n    undefined,\n  );\n\n  return (\n    <FlexView\n      $width={32}\n      $height={32}\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $borderRadius={16}\n      $background=\"WHITE\"\n    >\n      <Clickable onClick={onMenuClick} label=\"Color Picker\" disabled={!isWritingToolActive}>\n        <ColorPicker\n          $width={22}\n          $height={22}\n          $borderRadius={11}\n          $color={activeColor}\n          $opacity={isWritingToolActive ? 1 : 0.5}\n          ref={colorPalleteRef}\n        />\n      </Clickable>\n      {menuVisible && (\n        <PalleteWrapper\n          $background=\"WHITE\"\n          $gutterX={0.5}\n          $gapX={0.5}\n          $borderRadius={10}\n          $flexDirection=\"row\"\n        >\n          <ColorPallete\n            setActiveColor={setActiveColor}\n            activeColor={activeColor}\n            userType={userType}\n          />\n        </PalleteWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default ColorPickerButton;\n"],"names":["ColorPickerButton","memo","userType","colorPalleteRef","useRef","activeColor","setActiveColor","isWritingToolActive","useCueCanvasActions","menuVisible","onMenuClick","useContextMenuClickHandler","jsxs","FlexView","jsx","Clickable","ColorPicker","PalleteWrapper","ColorPallete"],"mappings":";;;;;;;;AAgBA,MAAMA,IAAgDC,EAAK,CAAC,EAAE,UAAAC,QAAe;AACrE,QAAAC,IAAkBC,EAAO,IAAI,GAC7B,EAAE,aAAAC,GAAa,gBAAAC,GAAgB,qBAAAC,MAAwBC,EAAoB,GAE3E,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAIA,SAAA,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,aAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAC,EAACC,KAAU,SAASL,GAAa,OAAM,gBAAe,UAAU,CAACH,GAC/D,UAAA,gBAAAO;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,eAAe;AAAA,YACf,QAAQX;AAAA,YACR,UAAUE,IAAsB,IAAI;AAAA,YACpC,KAAKJ;AAAA,UAAA;AAAA,QAAA,GAET;AAAA,QACCM,KACC,gBAAAK;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YACZ,UAAU;AAAA,YACV,OAAO;AAAA,YACP,eAAe;AAAA,YACf,gBAAe;AAAA,YAEf,UAAA,gBAAAH;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,gBAAAZ;AAAA,gBACA,aAAAD;AAAA,gBACA,UAAAH;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/features/cue-canvas/toolbar/tool-buttons.js

@@ -1,21 +0,0 @@
-import { jsx as i } from "react/jsx-runtime";
-import { memo as a } from "react";
-import p from "../../ui/buttons/clickable/clickable.js";
-import { getIsWritingTool as f } from "../cue-canvas-helpers.js";
-import { StyledWrapper as s } from "../cue-cavas-styled.js";
-import { useCueCanvasActions as u } from "../hooks/use-cue-canvas-actions.js";
-import C from "./grid-menu.js";
-import { TOOLS_TO_COMP as d } from "./icon-map.js";
-const k = a(
-  ({ tools: t, onToolClick: m, onGridOptionClick: n }) => {
-    const { activeColor: c, activeTool: e } = u();
-    return t.map((r) => {
-      const o = d[r];
-      return r === "grid" ? /* @__PURE__ */ i(C, { onGridOptionClick: n, GridIcon: o }, r) : /* @__PURE__ */ i(p, { onClick: () => m(r), label: r, children: f(r) ? /* @__PURE__ */ i(o, { $active: e === r, $activeColor: c }) : /* @__PURE__ */ i(s, { $active: e === r, children: /* @__PURE__ */ i(o, {}) }) }, r);
-    });
-  }
-);
-export {
-  k as default
-};
-//# sourceMappingURL=tool-buttons.js.map

package/dist/features/cue-canvas/toolbar/tool-buttons.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tool-buttons.js","sources":["../../../../src/features/cue-canvas/toolbar/tool-buttons.tsx"],"sourcesContent":["import type { IToolButtonList, TToolComponentType } from '../types/toolbar';\n\nimport React, { memo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport { getIsWritingTool } from '../cue-canvas-helpers';\nimport { StyledWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport GridMenu from './grid-menu';\nimport { TOOLS_TO_COMP } from './icon-map';\n\nconst ToolButtonList: React.FC<IToolButtonList> = memo(\n  ({ tools, onToolClick, onGridOptionClick }) => {\n    const { activeColor, activeTool } = useCueCanvasActions();\n\n    return tools.map(tool => {\n      const ToolComponent = TOOLS_TO_COMP[tool] as TToolComponentType;\n\n      if (tool === 'grid') {\n        return (\n          <GridMenu key={tool} onGridOptionClick={onGridOptionClick} GridIcon={ToolComponent} />\n        );\n      }\n\n      return (\n        <Clickable onClick={() => onToolClick(tool)} label={tool} key={tool}>\n          {getIsWritingTool(tool) ? (\n            <ToolComponent $active={activeTool === tool} $activeColor={activeColor} />\n          ) : (\n            <StyledWrapper $active={activeTool === tool}>\n              <ToolComponent />\n            </StyledWrapper>\n          )}\n        </Clickable>\n      );\n    });\n  },\n);\n\nexport default ToolButtonList;\n"],"names":["ToolButtonList","memo","tools","onToolClick","onGridOptionClick","activeColor","activeTool","useCueCanvasActions","tool","ToolComponent","TOOLS_TO_COMP","jsx","GridMenu","Clickable","getIsWritingTool","StyledWrapper"],"mappings":";;;;;;;;AAWA,MAAMA,IAA4CC;AAAA,EAChD,CAAC,EAAE,OAAAC,GAAO,aAAAC,GAAa,mBAAAC,QAAwB;AAC7C,UAAM,EAAE,aAAAC,GAAa,YAAAC,EAAW,IAAIC,EAAoB;AAEjD,WAAAL,EAAM,IAAI,CAAQM,MAAA;AACjB,YAAAC,IAAgBC,EAAcF,CAAI;AAExC,aAAIA,MAAS,SAER,gBAAAG,EAAAC,GAAA,EAAoB,mBAAAR,GAAsC,UAAUK,KAAtDD,CAAqE,IAKrF,gBAAAG,EAAAE,GAAA,EAAU,SAAS,MAAMV,EAAYK,CAAI,GAAG,OAAOA,GACjD,UAAAM,EAAiBN,CAAI,IACnB,gBAAAG,EAAAF,GAAA,EAAc,SAASH,MAAeE,GAAM,cAAcH,GAAa,IAEvE,gBAAAM,EAAAI,GAAA,EAAc,SAAST,MAAeE,GACrC,UAAA,gBAAAG,EAACF,GAAc,CAAA,CAAA,EAAA,CACjB,KAN2DD,CAQ/D;AAAA,IAAA,CAEH;AAAA,EACH;AACF;"}