@cuemath/leap 2.8.50 → 2.8.51-beta-0.1

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,
+  $shouldAnimate: 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,
+  $shouldAnimate: 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,
+  $shouldAnimate: 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,
+  $shouldAnimate: 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,54 +167,54 @@ const C = s(h)(({
       }
     `}
   `;
-}), m = s(p)(({
-  theme: r,
-  $active: o
-}) => {
-  const { colors: t } = r;
-  return e`
-    cursor: ${o ? "auto" : "pointer"};
-    width: 32px;
-    height: 32px;
-    justify-content: center;
-    align-items: center;
+}), W = s(p)(
+  ({ theme: r, $active: o }) => {
+    const { colors: t } = r;
+    return n`
+      cursor: ${o ? "auto" : "pointer"};
+      width: 32px;
+      height: 32px;
+      justify-content: center;
+      align-items: center;
+      border: 1px solid ${t.WHITE};
+      border-radius: 50%;
+      transition: all 100ms ease-in-out;
 
-    border: 1px solid ${t.WHITE};
-    border-radius: 50%;
-    transition: all 100ms ease-in-out;
-
-    &:hover {
-      border: 1px solid ${t.REAL_BLACK};
-    }
-    ${!o && e`
       &:hover {
         border: 1px solid ${t.REAL_BLACK};
       }
-    `}
-
-    ${o && e`
-      cursor: auto;
-      background: ${t.BLACK};
-      svg {
-        path,
-        circle {
-          stroke: ${t.WHITE};
-        }
-        .hover-tiles {
-          stroke: ${t.WHITE};
+      ${!o && n`
+        &:hover {
+          border: 1px solid ${t.REAL_BLACK};
         }
-        .hover-eraser {
-          stroke: none;
-          fill: ${t.WHITE};
+      `}
+
+      ${o && n`
+        cursor: auto;
+        background: ${t.BLACK};
+        svg {
+          path,
+          circle {
+            stroke: ${t.WHITE};
+          }
+          .hover-tiles {
+            stroke: ${t.WHITE};
+          }
+          .hover-eraser {
+            stroke: none;
+            fill: ${t.WHITE};
+          }
         }
-      }
-    `}
-  `;
-}), 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 +222,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 +235,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 PaletteWrapper,
+  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 { 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  $shouldAnimate: boolean;\n}\n\nexport const StyledPencilIcon = styled(PencilIcon)<IToolProps>(({\n  theme,\n  $active,\n  $activeColor,\n  $shouldAnimate,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && $shouldAnimate ? '0px' : '8px'};\n    cursor: ${$active ? 'auto' : 'pointer'};\n    .pencil-dark-shade {\n      fill: ${$active ? color : colors.GREY_3};\n    }\n\n    .pencil-light-shade {\n      fill: ${$active ? color : colors.GREY_2};\n      opacity: ${$active ? 0.3 : 1};\n    }\n\n    ${!$active &&\n    css`\n      &:hover {\n        .pencil-dark-shade {\n          fill: ${colors.GREY_4};\n        }\n        .pencil-light-shade {\n          fill: ${colors.GREY_2};\n        }\n      }\n    `}\n  `;\n});\n\nexport const StyledRulerIcon = styled(RulerIcon)<IToolProps>(({\n  theme,\n  $active,\n  $activeColor,\n  $shouldAnimate,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && $shouldAnimate ? '0px' : '8px'};\n\n    .ruler-rect-color {\n      fill: ${$active ? color : colors.GREY_3};\n    }\n\n    .ruler-stripe-base {\n      fill: ${$active ? color : colors.GREY_2};\n      opacity: ${$active ? 0.2 : 1};\n    }\n\n    .ruler-small-stripe {\n      fill: ${colors.REAL_BLACK};\n    }\n\n    ${!$active &&\n    css`\n      &:hover {\n        .ruler-rect-color {\n          fill: ${colors.GREY_4};\n        }\n        .ruler-stripe-base {\n          fill: ${colors.GREY_3};\n        }\n      }\n    `}\n  `;\n});\n\nexport const StyledHighlighterWrapper = styled(HighlighterIcon)<IToolProps>(({\n  $active,\n  theme,\n  $activeColor,\n  $shouldAnimate,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && $shouldAnimate ? '0px' : '8px'};\n    ${!$active &&\n    css`\n      &:hover {\n        .highlighter-tip {\n          fill: ${theme.colors.BLACK};\n        }\n\n        .highlighter-stripe {\n          fill: ${theme.colors.BLACK_50};\n        }\n\n        .highlighter-light-body {\n          fill: ${theme.colors.BLACK_10};\n        }\n      }\n    `}\n\n    ${$active &&\n    css`\n      .highlighter-tip {\n        fill: ${color};\n      }\n\n      .highlighter-stripe {\n        fill: ${color};\n        opacity: 0.6;\n      }\n\n      .highlighter-light-body {\n        fill: ${color};\n        opacity: 0.2;\n      }\n    `}\n  `;\n});\n\nexport const StyledSketchWrapper = styled(SketchIcon)<IToolProps>(({\n  $active,\n  theme,\n  $activeColor,\n  $shouldAnimate,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && $shouldAnimate ? '0px' : '8px'};\n\n    ${!$active &&\n    css`\n      &:hover {\n        .pen-tip {\n          fill: ${theme.colors.BLACK};\n        }\n\n        .pen-dark-shade {\n          fill: ${theme.colors.BLACK_50};\n        }\n\n        .pen-light-shade {\n          fill: ${theme.colors.BLACK_10};\n        }\n      }\n    `}\n\n    ${$active &&\n    css`\n      cursor: ${$active ? 'auto' : 'pointer'};\n      .pen-tip {\n        fill: ${color};\n      }\n\n      .pen-dark-shade {\n        fill: ${color};\n        opacity: 0.6;\n      }\n\n      .pen-light-shade {\n        fill: ${color};\n        opacity: 0.4;\n      }\n    `}\n  `;\n});\n\nexport const StyledWrapper = styled(FlexView)<Omit<IToolProps, '$activeColor' | '$shouldAnimate'>>(\n  ({ theme, $active }) => {\n    const { colors } = theme;\n\n    return css`\n      cursor: ${$active ? 'auto' : 'pointer'};\n      width: 32px;\n      height: 32px;\n      justify-content: center;\n      align-items: center;\n      border: 1px solid ${colors.WHITE};\n      border-radius: 50%;\n      transition: all 100ms ease-in-out;\n\n      &: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);\n\nexport const StyledCheckIcon = styled(TickIcon)`\n  path {\n    stroke: ${'white'};\n  }\n`;\n\nexport const RedoIcon = styled(UndoIcon)`\n  transform: scaleX(-1);\n`;\n\nexport const PaletteWrapper = styled(FlexView)`\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  top: -24px; //-16 for icon, -8 for gap\n  transition:\n    opacity 0.5s ease,\n    transform 0.5s ease;\n`;\n\nexport const CueCanvasWrapper = styled(FlexView)<ICueCanvasWrapper>(\n  ({ $canScribble, $canRender, $renderAs }) => `\n  display: ${$canRender ? 'block' : 'none'};\n  opacity: ${$canScribble ? 1 : 0.5};\n  pointer-events: ${$canScribble ? 'auto' : 'none'};\n\n  ${\n    $renderAs === 'canvas' &&\n    $canScribble &&\n    `\n    background-image: radial-gradient(rgb(43 43 43 / 8%) 2px, transparent 10%);\n    background-position:0 0,32px 32px;\n    background-size: 30px 32px;\n    `\n  }\n  \n`,\n);\n\nexport const ColorPicker = styled(FlexView)<{ $color: TCueCanvasColors }>(\n  ({ $color }) => `\nbackground: ${CANVAS_COLORS[$color]};\n`,\n);\n\nexport const StyledDownIcon = styled(DownIcon)<{ $isAnimating: boolean }>`\n  pointer-events: none;\n  transition: transform 0.5s ease;\n  transform: ${({ $isAnimating }) => ($isAnimating ? 'rotate(180deg)' : 'rotate(0deg)')};\n`;\n\nexport const PenIconWrapper = styled(FlexView)`\n  overflow: hidden;\n  border-right: 1px solid ${({ theme }) => theme.colors.GREY_1};\n`;\n\nexport const MenuWrapper = styled(FlexView)`\n  position: absolute;\n  padding: 8px 8px 0 8px;\n  overflow: hidden;\n  bottom: 58px;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  transition:\n    opacity 0.5s ease,\n    transform 0.5s ease;\n\n  :hover {\n    cursor: pointer;\n  }\n`;\n"],"names":["StyledPencilIcon","styled","PencilIcon","theme","$active","$activeColor","$shouldAnimate","colors","color","CANVAS_COLORS","css","StyledRulerIcon","RulerIcon","StyledHighlighterWrapper","HighlighterIcon","StyledSketchWrapper","SketchIcon","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-palette.js

@@ -0,0 +1,49 @@
+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) => {
+      t(e);
+    },
+    [t]
+  ), l = s(() => C(n), [n]);
+  return /* @__PURE__ */ r(a, { children: l.map((e, m) => /* @__PURE__ */ r(
+    h,
+    {
+      onClick: () => i(e),
+      label: `Color Picker - ${e}`,
+      children: /* @__PURE__ */ r(
+        $,
+        {
+          $width: 22,
+          $height: 22,
+          $borderRadius: 11,
+          $justifyContent: "center",
+          $background: o === e ? "BLACK" : "WHITE",
+          $alignItems: "center",
+          children: /* @__PURE__ */ r(
+            f,
+            {
+              $width: 20,
+              $height: 20,
+              $borderRadius: 10,
+              $color: e,
+              $alignItems: "center",
+              $justifyContent: "center",
+              children: o === e && /* @__PURE__ */ r(g, {})
+            }
+          )
+        }
+      )
+    },
+    m
+  )) });
+});
+export {
+  w as default
+};
+//# 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-menu.js

@@ -0,0 +1,62 @@
+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, PaletteWrapper as C } from "../cue-cavas-styled.js";
+import { useCueCanvasActions as p } from "../hooks/use-cue-canvas-actions.js";
+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
+  );
+  return /* @__PURE__ */ s(
+    $,
+    {
+      $width: 32,
+      $height: 32,
+      $alignItems: "center",
+      $justifyContent: "center",
+      $borderRadius: 16,
+      $background: "WHITE",
+      children: [
+        /* @__PURE__ */ e(d, { onClick: c, label: "Color Picker", disabled: !t, children: /* @__PURE__ */ e(
+          f,
+          {
+            $width: 22,
+            $height: 22,
+            $borderRadius: 11,
+            $color: r,
+            $opacity: t ? 1 : 0.5,
+            ref: o
+          }
+        ) }),
+        n && /* @__PURE__ */ e(
+          C,
+          {
+            $background: "WHITE",
+            $gutterX: 0.5,
+            $gapX: 0.5,
+            $borderRadius: 10,
+            $flexDirection: "row",
+            children: /* @__PURE__ */ e(
+              b,
+              {
+                setActiveColor: l,
+                activeColor: r,
+                userType: i
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  W as default
+};
+//# 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

@@ -0,0 +1,62 @@
+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 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 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__ */ 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",
+        $flexDirection: "row",
+        $widthX: 11.15,
+        $flexWrap: !0,
+        $flexGapX: 0.5,
+        children: b.map((o) => {
+          const s = x[o];
+          return /* @__PURE__ */ r(
+            n,
+            {
+              onClick: () => p(o),
+              label: o,
+              children: /* @__PURE__ */ r(
+                t,
+                {
+                  $width: 48,
+                  $height: 48,
+                  $borderColor: "BLACK",
+                  $borderRadius: 4,
+                  $background: "WHITE",
+                  children: /* @__PURE__ */ r(s, {})
+                }
+              )
+            },
+            o
+          );
+        })
+      }
+    )
+  ] });
+});
+export {
+  A as default
+};
+//# sourceMappingURL=grid-menu.js.map

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

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