@cuemath/leap 2.8.49-rj-16 → 2.8.50-as1

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

@@ -1,73 +1,81 @@
-import { jsx as A } from "react/jsx-runtime";
-import { memo as R, useRef as i, useEffect as n } from "react";
+import { jsx as R } from "react/jsx-runtime";
+import { memo as T, useRef as g, useCallback as $, useEffect as o } from "react";
 import { CueCanvasCore as V } from "./cue-canvas-core.js";
-import { getCanvasConfig as j, getCanvasSettings as l } from "./cue-canvas-helpers.js";
-import { CueCanvasWrapper as H } from "./cue-cavas-styled.js";
-import { useCueCanvasActions as I } from "./hooks/use-cue-canvas-actions.js";
-import P from "./hooks/use-height-extender.js";
-const W = R(
+import { getCanvasConfig as j, getCanvasSettings as k } from "./cue-canvas-helpers.js";
+import { CueCanvasWrapper as y } from "./cue-cavas-styled.js";
+import { useCueCanvasActions as z } from "./hooks/use-cue-canvas-actions.js";
+import H from "./hooks/use-height-extender.js";
+const M = T(
   ({
-    responseId: $,
+    responseId: w,
     width: u,
-    height: r,
-    canRender: a,
-    onUpdateHeight: g,
-    initialData: s,
+    height: t,
+    canRender: f,
+    onUpdateHeight: x,
+    initialData: a,
     onPublish: v,
-    onSubscribe: m,
-    userId: w,
-    appended: p,
-    canScribble: t,
-    userType: x,
-    renderAs: c = "canvas"
+    onSubscribe: p,
+    userId: A,
+    appended: i,
+    canScribble: r,
+    userType: l,
+    renderAs: s = "canvas"
   }) => {
-    const C = i(null), { setActiveInstance: o } = I(), e = i(null);
-    return P({
+    const C = g(null), { setActiveInstance: c, setActiveTool: d } = z(), e = g(null), E = $(
+      (n) => {
+        d(n);
+      },
+      [d]
+    ), I = $((n) => (console.log(n, "file to upload"), "https://cuemath-intel.s3.amazonaws.com/media/cuemath-whiteboard/2b0b9468-d6d4-11e8-9bfb-02420a000032:practice/Screenshot 2025-04-16 at 3.18.32 PM.png_b9079e2f-4ae6-439c-8edd-104dbfdc6100"), []);
+    return H({
       canvasElementRef: C,
       cueCanvasRef: e,
-      canScribble: t
-    }), n(() => {
-      t && e.current && (e.current.resetViewPort(), o(e.current));
-    }, [t, o]), n(() => {
-      s && e.current && e.current.update(s);
-    }, [s]), n(() => {
-      r && e.current && e.current.resetViewPort();
-    }, [r, u]), n(() => {
-      if (a && p && !e.current) {
-        const E = j(u, r, c), y = l(c), f = new V(
+      canScribble: r
+    }), o(() => {
+      r && e.current && (e.current.resetViewPort(), c(e.current));
+    }, [r, c]), o(() => {
+      a && e.current && e.current.update(a);
+    }, [a]), o(() => {
+      t && e.current && e.current.resetViewPort();
+    }, [t, u]), o(() => {
+      if (f && i && !e.current) {
+        const n = j(u, t, s, l), P = k(s), m = new V(
           v,
-          m,
-          g,
-          r,
+          p,
+          E,
+          x,
+          I,
+          t,
+          A,
           w,
-          $,
-          x
+          l,
+          s
         );
         (async () => {
-          await f.create({
+          await m.create({
             canvasElementRef: C,
-            canvasConfig: E,
-            canvasSetting: y,
-            initialData: s
-          }), e.current = f, t && o(f);
+            canvasConfig: n,
+            canvasSetting: P,
+            initialData: a
+          }), e.current = m, r && c(m);
         })();
       }
-    }, [v, m, o, a, p]), n(() => () => {
+    }, [v, p, c, f, i]), o(() => () => {
       e.current && (e.current.destroy(), e.current = null);
-    }, []), /* @__PURE__ */ A(
-      H,
+    }, []), /* @__PURE__ */ R(
+      y,
       {
         ref: C,
         $width: u,
-        $height: r,
-        $canScribble: t,
-        $canRender: a,
-        $renderAs: c
+        $height: t,
+        $canScribble: r,
+        $canRender: f,
+        $renderAs: s
       }
     );
   }
-), L = W;
+), K = M;
 export {
-  L as default
+  K as default
 };
 //# sourceMappingURL=cue-canvas.js.map

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

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

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

@@ -1,86 +1,95 @@
-import s, { css as e } from "styled-components";
+import s, { css as n } from "styled-components";
 import c from "../../assets/line-icons/icons/check.js";
-import a from "../../assets/line-icons/icons/highlighter.js";
-import h from "../../assets/line-icons/icons/pencil.js";
-import u from "../../assets/line-icons/icons/ruler.js";
-import d from "../../assets/line-icons/icons/sketch.js";
+import d from "../../assets/line-icons/icons/down.js";
+import h from "../../assets/line-icons/icons/highlighter.js";
+import u from "../../assets/line-icons/icons/pencil.js";
+import f from "../../assets/line-icons/icons/ruler.js";
+import g from "../../assets/line-icons/icons/sketch.js";
+import $ from "../../assets/line-icons/icons/undo.js";
 import p from "../ui/layout/flex-view.js";
-import { CANVAS_COLORS as n } from "./constants/constants.js";
-const C = s(h)(({
+import { CANVAS_COLORS as a } from "./constants/constants.js";
+const b = s(u)(({
   theme: r,
   $active: o,
-  $activeColor: t
+  $activeColor: t,
+  $isWhiteBoard: l
 }) => {
-  const { colors: l } = r, i = o ? n[t] : l.REAL_BLACK_50;
-  return e`
+  const { colors: e } = r, i = o ? a[t] : e.REAL_BLACK_50;
+  return n`
     position: relative;
     transition: top 0.3s ease-in-out;
-    top: ${o ? "0px" : "8px"};
+    top: ${o && !l ? "0px" : "8px"};
     cursor: ${o ? "auto" : "pointer"};
     .pencil-dark-shade {
-      fill: ${o ? i : l.GREY_3};
+      fill: ${o ? i : e.GREY_3};
     }
 
     .pencil-light-shade {
-      fill: ${o ? i : l.GREY_2};
+      fill: ${o ? i : e.GREY_2};
       opacity: ${o ? 0.3 : 1};
     }
 
-    ${!o && e`
+    ${!o && n`
       &:hover {
         .pencil-dark-shade {
-          fill: ${l.GREY_4};
+          fill: ${e.GREY_4};
         }
         .pencil-light-shade {
-          fill: ${l.GREY_2};
+          fill: ${e.GREY_2};
         }
       }
     `}
   `;
-}), k = s(u)(({ theme: r, $active: o, $activeColor: t }) => {
-  const { colors: l } = r, i = o ? n[t] : l.REAL_BLACK_50;
-  return e`
+}), I = s(f)(({
+  theme: r,
+  $active: o,
+  $activeColor: t,
+  $isWhiteBoard: l
+}) => {
+  const { colors: e } = r, i = o ? a[t] : e.REAL_BLACK_50;
+  return n`
     cursor: ${o ? "auto" : "pointer"};
     position: relative;
     transition: top 0.3s ease-in-out;
-    top: ${o ? "0px" : "8px"};
+    top: ${o && !l ? "0px" : "8px"};
 
     .ruler-rect-color {
-      fill: ${o ? i : l.GREY_3};
+      fill: ${o ? i : e.GREY_3};
     }
 
     .ruler-stripe-base {
-      fill: ${o ? i : l.GREY_2};
+      fill: ${o ? i : e.GREY_2};
       opacity: ${o ? 0.2 : 1};
     }
 
     .ruler-small-stripe {
-      fill: ${l.REAL_BLACK};
+      fill: ${e.REAL_BLACK};
     }
 
-    ${!o && e`
+    ${!o && n`
       &:hover {
         .ruler-rect-color {
-          fill: ${l.GREY_4};
+          fill: ${e.GREY_4};
         }
         .ruler-stripe-base {
-          fill: ${l.GREY_3};
+          fill: ${e.GREY_3};
         }
       }
     `}
   `;
-}), E = s(a)(({
+}), B = s(h)(({
   $active: r,
   theme: o,
-  $activeColor: t
+  $activeColor: t,
+  $isWhiteBoard: l
 }) => {
-  const { colors: l } = o, i = r ? n[t] : l.REAL_BLACK_50;
-  return e`
+  const { colors: e } = o, i = r ? a[t] : e.REAL_BLACK_50;
+  return n`
     cursor: ${r ? "auto" : "pointer"};
     position: relative;
     transition: top 0.3s ease-in-out;
-    top: ${r ? "0px" : "8px"};
-    ${!r && e`
+    top: ${r && !l ? "0px" : "8px"};
+    ${!r && n`
       &:hover {
         .highlighter-tip {
           fill: ${o.colors.BLACK};
@@ -96,7 +105,7 @@ const C = s(h)(({
       }
     `}
 
-    ${r && e`
+    ${r && n`
       .highlighter-tip {
         fill: ${i};
       }
@@ -112,19 +121,20 @@ const C = s(h)(({
       }
     `}
   `;
-}), R = s(d)(({
+}), K = s(g)(({
   $active: r,
   theme: o,
-  $activeColor: t
+  $activeColor: t,
+  $isWhiteBoard: l
 }) => {
-  const { colors: l } = o, i = r ? n[t] : l.REAL_BLACK_50;
-  return e`
+  const { colors: e } = o, i = r ? a[t] : e.REAL_BLACK_50;
+  return n`
     cursor: ${r ? "auto" : "pointer"};
     position: relative;
     transition: top 0.3s ease-in-out;
-    top: ${r ? "0px" : "8px"};
+    top: ${r && !l ? "0px" : "8px"};
 
-    ${!r && e`
+    ${!r && n`
       &:hover {
         .pen-tip {
           fill: ${o.colors.BLACK};
@@ -140,7 +150,7 @@ const C = s(h)(({
       }
     `}
 
-    ${r && e`
+    ${r && n`
       cursor: ${r ? "auto" : "pointer"};
       .pen-tip {
         fill: ${i};
@@ -157,12 +167,12 @@ const C = s(h)(({
       }
     `}
   `;
-}), m = s(p)(({
+}), W = s(p)(({
   theme: r,
   $active: o
 }) => {
   const { colors: t } = r;
-  return e`
+  return n`
     cursor: ${o ? "auto" : "pointer"};
     width: 32px;
     height: 32px;
@@ -176,13 +186,13 @@ const C = s(h)(({
     &:hover {
       border: 1px solid ${t.REAL_BLACK};
     }
-    ${!o && e`
+    ${!o && n`
       &:hover {
         border: 1px solid ${t.REAL_BLACK};
       }
     `}
 
-    ${o && e`
+    ${o && n`
       cursor: auto;
       background: ${t.BLACK};
       svg {
@@ -200,11 +210,13 @@ const C = s(h)(({
       }
     `}
   `;
-}), B = s(c)`
+}), G = s(c)`
   path {
     stroke: ${"white"};
   }
-`, K = s(p)`
+`, S = s($)`
+  transform: scaleX(-1);
+`, Y = s(p)`
   position: absolute;
   display: flex;
   justify-content: center;
@@ -212,7 +224,7 @@ const C = s(h)(({
   transition:
     opacity 0.5s ease,
     transform 0.5s ease;
-`, b = s(p)(
+`, w = s(p)(
   ({ $canScribble: r, $canRender: o, $renderAs: t }) => `
   display: ${o ? "block" : "none"};
   opacity: ${r ? 1 : 0.5};
@@ -225,20 +237,45 @@ const C = s(h)(({
     `}
   
 `
-), I = s(p)(
+), H = s(p)(
   ({ $color: r }) => `
-background: ${n[r]};
+background: ${a[r]};
 `
-);
+), P = s(d)`
+  pointer-events: none;
+  transition: transform 0.5s ease;
+  transform: ${({ $isAnimating: r }) => r ? "rotate(180deg)" : "rotate(0deg)"};
+`, T = s(p)`
+  overflow: hidden;
+  border-right: 1px solid ${({ theme: r }) => r.colors.GREY_1};
+`, j = s(p)`
+  position: absolute;
+  padding: 8px 8px 0 8px;
+  overflow: hidden;
+  bottom: 58px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  transition:
+    opacity 0.5s ease,
+    transform 0.5s ease;
+
+  :hover {
+    cursor: pointer;
+  }
+`;
 export {
-  I as ColorPicker,
-  b as CueCanvasWrapper,
-  K as PalleteWrapper,
-  B as StyledCheckIcon,
-  E as StyledHighlighterWrapper,
-  C as StyledPencilIcon,
-  k as StyledRulerIcon,
-  R as StyledSketchWrapper,
-  m as StyledWrapper
+  H as ColorPicker,
+  w as CueCanvasWrapper,
+  j as MenuWrapper,
+  Y as PalleteWrapper,
+  T as PenIconWrapper,
+  S as RedoIcon,
+  G as StyledCheckIcon,
+  P as StyledDownIcon,
+  B as StyledHighlighterWrapper,
+  b as StyledPencilIcon,
+  I as StyledRulerIcon,
+  K as StyledSketchWrapper,
+  W as StyledWrapper
 };
 //# sourceMappingURL=cue-cavas-styled.js.map

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 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 FlexView from '../ui/layout/flex-view';\nimport { CANVAS_COLORS } from './constants/constants';\n\ninterface IToolProps {\n  $active: boolean;\n  $activeColor: TCueCanvasColors;\n}\n\nexport const StyledPencilIcon = styled(PencilIcon)<IToolProps>(({\n  theme,\n  $active,\n  $activeColor,\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 ? '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>(({ theme, $active, $activeColor }) => {\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 ? '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}) => {\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 ? '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}) => {\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 ? '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'>>(({\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 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"],"names":["StyledPencilIcon","styled","PencilIcon","theme","$active","$activeColor","colors","color","CANVAS_COLORS","css","StyledRulerIcon","RulerIcon","StyledHighlighterWrapper","HighlighterIcon","StyledSketchWrapper","SketchIcon","StyledWrapper","FlexView","StyledCheckIcon","TickIcon","PalleteWrapper","CueCanvasWrapper","$canScribble","$canRender","$renderAs","ColorPicker","$color"],"mappings":"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"}
+{"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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"}

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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -1,32 +1,32 @@
-import { jsx as r } from "react/jsx-runtime";
-import { memo as d, useCallback as m, useMemo as $ } from "react";
-import s from "../../ui/buttons/clickable/clickable.js";
-import n from "../../ui/layout/flex-view.js";
-import { getColorsForUser as h } from "../cue-canvas-helpers.js";
-import { PalleteWrapper as u, ColorPicker as C, StyledCheckIcon as f } from "../cue-cavas-styled.js";
-const x = d(({ setActiveColor: o, activeColor: t, userType: i }) => {
-  const l = m(
+import { jsx as r, Fragment as a } from "react/jsx-runtime";
+import { memo as c, useCallback as d, useMemo as s } from "react";
+import h from "../../ui/buttons/clickable/clickable.js";
+import $ from "../../ui/layout/flex-view.js";
+import { getColorsForUser as C } from "../cue-canvas-helpers.js";
+import { ColorPicker as f, StyledCheckIcon as g } from "../cue-cavas-styled.js";
+const w = c(({ setActiveColor: t, activeColor: o, userType: n }) => {
+  const i = d(
     (e) => {
-      o(e);
+      t(e);
     },
-    [o]
-  ), a = $(() => h(i), [i]);
-  return /* @__PURE__ */ r(u, { $background: "WHITE", $gutterX: 0.5, $gapX: 0.5, $borderRadius: 10, children: /* @__PURE__ */ r(n, { $flexDirection: "row", children: a.map((e, c) => /* @__PURE__ */ r(
-    s,
+    [t]
+  ), l = s(() => C(n), [n]);
+  return /* @__PURE__ */ r(a, { children: l.map((e, m) => /* @__PURE__ */ r(
+    h,
     {
-      onClick: () => l(e),
+      onClick: () => i(e),
       label: `Color Picker - ${e}`,
       children: /* @__PURE__ */ r(
-        n,
+        $,
         {
           $width: 22,
           $height: 22,
           $borderRadius: 11,
           $justifyContent: "center",
-          $background: t === e ? "BLACK" : "WHITE",
+          $background: o === e ? "BLACK" : "WHITE",
           $alignItems: "center",
           children: /* @__PURE__ */ r(
-            C,
+            f,
             {
               $width: 20,
               $height: 20,
@@ -34,16 +34,16 @@ const x = d(({ setActiveColor: o, activeColor: t, userType: i }) => {
               $color: e,
               $alignItems: "center",
               $justifyContent: "center",
-              children: t === e && /* @__PURE__ */ r(f, {})
+              children: o === e && /* @__PURE__ */ r(g, {})
             }
           )
         }
       )
     },
-    c
-  )) }) });
+    m
+  )) });
 });
 export {
-  x as default
+  w as default
 };
 //# sourceMappingURL=color-pallete.js.map

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

@@ -1 +1 @@
-{"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 { PalleteWrapper, 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    <PalleteWrapper $background=\"WHITE\" $gutterX={0.5} $gapX={0.5} $borderRadius={10}>\n      <FlexView $flexDirection=\"row\">\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      </FlexView>\n    </PalleteWrapper>\n  );\n});\n\nexport default ColorPallete;\n"],"names":["ColorPallete","memo","setActiveColor","activeColor","userType","handleColorChange","useCallback","color","colors","useMemo","getColorsForUser","PalleteWrapper","jsx","FlexView","index","Clickable","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,2BACGO,GAAe,EAAA,aAAY,SAAQ,UAAU,KAAK,OAAO,KAAK,eAAe,IAC5E,UAAA,gBAAAC,EAACC,KAAS,gBAAe,OACtB,YAAO,IAAI,CAACN,GAAOO,MAClB,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MAEC,SAAS,MAAMV,EAAkBE,CAAK;AAAA,MACtC,OAAO,kBAAkBA,CAAK;AAAA,MAE9B,UAAA,gBAAAK;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,eAAe;AAAA,UACf,iBAAgB;AAAA,UAChB,aAAaV,MAAgBI,IAAQ,UAAU;AAAA,UAC/C,aAAY;AAAA,UAEZ,UAAA,gBAAAK;AAAA,YAACI;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,gBAAAK,EAACK,GAAgB,CAAA,CAAA;AAAA,YAAA;AAAA,UAC7C;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAtBKH;AAAA,EAAA,CAwBR,GACH,EACF,CAAA;AAEJ,CAAC;"}
+{"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;"}