@cuemath/leap 3.1.5-beta-0.1 → 3.1.6-aa1

package/dist/features/cue-canvas/hooks/use-config-updater.js

@@ -1,12 +1,13 @@
-import { useEffect as m } from "react";
-import { useCueCanvasActions as u } from "./use-cue-canvas-actions.js";
-const N = (e, r) => {
-  const { activeInstance: t } = u();
-  m(() => {
-    !t || r === "canvas" || (e != null && e.gridName && t.changeGrid(e == null ? void 0 : e.gridName), e != null && e.dimesion && t.setViewPort(e == null ? void 0 : e.dimesion));
-  }, [e, t, r]);
+import { useEffect as h } from "react";
+import { useCueCanvasActions as w } from "./use-cue-canvas-actions.js";
+const G = (c) => {
+  const { canvasConfig: e, renderAs: s, userId: r } = c, { activeInstance: t, setActiveColor: o, setActiveTool: u } = w();
+  h(() => {
+    var d, m, i, l, p, A, I, N;
+    !t || s === "canvas" || (e != null && e.gridName && t.changeGrid(e == null ? void 0 : e.gridName), e != null && e.dimesion && t.setViewPort(e == null ? void 0 : e.dimesion), (m = (d = e == null ? void 0 : e.users) == null ? void 0 : d[r]) != null && m.tool && u((l = (i = e.users) == null ? void 0 : i[r]) == null ? void 0 : l.tool), (A = (p = e == null ? void 0 : e.users) == null ? void 0 : p[r]) != null && A.color && o((N = (I = e == null ? void 0 : e.users) == null ? void 0 : I[r]) == null ? void 0 : N.color));
+  }, [e, t, s, o, u, r]);
 };
 export {
-  N as default
+  G as default
 };
 //# sourceMappingURL=use-config-updater.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-config-updater.js","sources":["../../../../src/features/cue-canvas/hooks/use-config-updater.ts"],"sourcesContent":["import type { ICanvasUpdateConfig, TRenderAs } from '../types/cue-canvas';\n\nimport { useEffect } from 'react';\n\nimport { useCueCanvasActions } from './use-cue-canvas-actions';\n\nconst useConfigUpdater = (\n  canvasConfig: ICanvasUpdateConfig | null | undefined,\n  renderAs: TRenderAs,\n) => {\n  const { activeInstance: cueCanvas } = useCueCanvasActions();\n\n  useEffect(() => {\n    if (!cueCanvas || renderAs === 'canvas') {\n      return;\n    }\n\n    if (canvasConfig?.gridName) {\n      cueCanvas.changeGrid(canvasConfig?.gridName);\n    }\n\n    if (canvasConfig?.dimesion) {\n      cueCanvas.setViewPort(canvasConfig?.dimesion);\n    }\n  }, [canvasConfig, cueCanvas, renderAs]);\n};\n\nexport default useConfigUpdater;\n"],"names":["useConfigUpdater","canvasConfig","renderAs","cueCanvas","useCueCanvasActions","useEffect"],"mappings":";;AAMM,MAAAA,IAAmB,CACvBC,GACAC,MACG;AACH,QAAM,EAAE,gBAAgBC,EAAU,IAAIC,EAAoB;AAE1D,EAAAC,EAAU,MAAM;AACV,IAAA,CAACF,KAAaD,MAAa,aAI3BD,KAAA,QAAAA,EAAc,YACNE,EAAA,WAAWF,KAAA,gBAAAA,EAAc,QAAQ,GAGzCA,KAAA,QAAAA,EAAc,YACNE,EAAA,YAAYF,KAAA,gBAAAA,EAAc,QAAQ;AAAA,EAE7C,GAAA,CAACA,GAAcE,GAAWD,CAAQ,CAAC;AACxC;"}
+{"version":3,"file":"use-config-updater.js","sources":["../../../../src/features/cue-canvas/hooks/use-config-updater.ts"],"sourcesContent":["import type { ICanvasUpdateConfig, TRenderAs } from '../types/cue-canvas';\n\nimport { useEffect } from 'react';\n\nimport { useCueCanvasActions } from './use-cue-canvas-actions';\n\ninterface IUseConfigUpdaterProps {\n  canvasConfig: ICanvasUpdateConfig | null | undefined;\n  renderAs: TRenderAs;\n  userId: string;\n}\n\nconst useConfigUpdater = (props: IUseConfigUpdaterProps) => {\n  const { canvasConfig, renderAs, userId } = props;\n  const { activeInstance: cueCanvas, setActiveColor, setActiveTool } = useCueCanvasActions();\n\n  useEffect(() => {\n    if (!cueCanvas || renderAs === 'canvas') {\n      return;\n    }\n\n    if (canvasConfig?.gridName) {\n      cueCanvas.changeGrid(canvasConfig?.gridName);\n    }\n\n    if (canvasConfig?.dimesion) {\n      cueCanvas.setViewPort(canvasConfig?.dimesion);\n    }\n\n    if (canvasConfig?.users?.[userId]?.tool) {\n      setActiveTool(canvasConfig.users?.[userId]?.tool);\n    }\n\n    if (canvasConfig?.users?.[userId]?.color) {\n      setActiveColor(canvasConfig?.users?.[userId]?.color);\n    }\n  }, [canvasConfig, cueCanvas, renderAs, setActiveColor, setActiveTool, userId]);\n};\n\nexport default useConfigUpdater;\n"],"names":["useConfigUpdater","props","canvasConfig","renderAs","userId","cueCanvas","setActiveColor","setActiveTool","useCueCanvasActions","useEffect","_b","_a","_d","_c","_f","_e","_h","_g"],"mappings":";;AAYM,MAAAA,IAAmB,CAACC,MAAkC;AAC1D,QAAM,EAAE,cAAAC,GAAc,UAAAC,GAAU,QAAAC,EAAA,IAAWH,GACrC,EAAE,gBAAgBI,GAAW,gBAAAC,GAAgB,eAAAC,EAAA,IAAkBC;AAErE,EAAAC,EAAU,MAAM;;AACV,IAAA,CAACJ,KAAaF,MAAa,aAI3BD,KAAA,QAAAA,EAAc,YACNG,EAAA,WAAWH,KAAA,gBAAAA,EAAc,QAAQ,GAGzCA,KAAA,QAAAA,EAAc,YACNG,EAAA,YAAYH,KAAA,gBAAAA,EAAc,QAAQ,IAG1CQ,KAAAC,IAAAT,KAAA,gBAAAA,EAAc,UAAd,gBAAAS,EAAsBP,OAAtB,QAAAM,EAA+B,QACjCH,GAAcK,KAAAC,IAAAX,EAAa,UAAb,gBAAAW,EAAqBT,OAArB,gBAAAQ,EAA8B,IAAI,IAG9CE,KAAAC,IAAAb,KAAA,gBAAAA,EAAc,UAAd,gBAAAa,EAAsBX,OAAtB,QAAAU,EAA+B,SACjCR,GAAeU,KAAAC,IAAAf,KAAA,gBAAAA,EAAc,UAAd,gBAAAe,EAAsBb,OAAtB,gBAAAY,EAA+B,KAAK;AAAA,EACrD,GACC,CAACd,GAAcG,GAAWF,GAAUG,GAAgBC,GAAeH,CAAM,CAAC;AAC/E;"}

package/dist/features/cue-canvas/hooks/use-height-extender.js

@@ -1,18 +1,19 @@
-import { useRef as l, useCallback as d, useEffect as L } from "react";
-import { useCueCanvasActions as f } from "./use-cue-canvas-actions.js";
-const w = ({
+import { useRef as L, useCallback as d, useEffect as f } from "react";
+import { useCueCanvasActions as H } from "./use-cue-canvas-actions.js";
+const P = ({
   canvasElementRef: e,
   cueCanvasRef: r,
-  canScribble: p
+  canScribble: p,
+  enabled: g
 }) => {
-  const n = l(!1), o = l(!1), { isWritingToolActive: g } = f(), i = d(() => {
+  const n = L(!1), o = L(!1), { isWritingToolActive: h } = H(), i = d(() => {
     n.current = !0;
   }, []), u = d(() => {
     var t;
     if (e.current && o.current) {
       o.current = !1;
-      const h = e.current.getBoundingClientRect().height + 200;
-      (t = r == null ? void 0 : r.current) == null || t.updateHeight(h);
+      const l = e.current.getBoundingClientRect().height + 200;
+      (t = r == null ? void 0 : r.current) == null || t.updateHeight(l);
     }
     n.current = !1;
   }, [e, r]), c = d(
@@ -24,9 +25,9 @@ const w = ({
     },
     [e]
   );
-  L(() => {
+  f(() => {
     const t = e.current;
-    if (p && t && g)
+    if (g && p && t && h)
       return t.addEventListener("pointerdown", i), t.addEventListener("pointerup", u), t.addEventListener("pointermove", c), () => {
         t.removeEventListener("pointerdown", i), t.removeEventListener("pointerup", u), t.removeEventListener("pointermove", c);
       };
@@ -36,10 +37,11 @@ const w = ({
     c,
     u,
     p,
+    h,
     g
   ]);
 };
 export {
-  w as default
+  P as default
 };
 //# sourceMappingURL=use-height-extender.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-height-extender.js","sources":["../../../../src/features/cue-canvas/hooks/use-height-extender.ts"],"sourcesContent":["import type { CueCanvasCore } from '../cue-canvas-core';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { useCueCanvasActions } from './use-cue-canvas-actions';\n\ninterface IUseHeightIncreaseProps {\n  canvasElementRef: React.RefObject<HTMLElement>;\n  cueCanvasRef: React.RefObject<CueCanvasCore> | undefined;\n  canScribble: boolean;\n}\n\nconst useHeightExtender = ({\n  canvasElementRef,\n  cueCanvasRef,\n  canScribble,\n}: IUseHeightIncreaseProps) => {\n  const isScribblingRef = useRef<boolean>(false);\n  const shouldIncreaseHeightRef = useRef<boolean>(false);\n  const { isWritingToolActive } = useCueCanvasActions();\n\n  const handlePointerDown = useCallback(() => {\n    isScribblingRef.current = true;\n  }, []);\n\n  const handlePointerUp = useCallback(() => {\n    if (canvasElementRef.current && shouldIncreaseHeightRef.current) {\n      shouldIncreaseHeightRef.current = false;\n\n      const rect = canvasElementRef.current.getBoundingClientRect();\n      const updatedHeight = rect.height + 200;\n\n      cueCanvasRef?.current?.updateHeight(updatedHeight);\n    }\n\n    isScribblingRef.current = false;\n  }, [canvasElementRef, cueCanvasRef]);\n\n  const handlePointerMove = useCallback(\n    (event: MouseEvent) => {\n      if (isScribblingRef.current && canvasElementRef.current) {\n        const rect = canvasElementRef.current.getBoundingClientRect();\n        const y = event.clientY - rect.top;\n\n        if (y >= rect.height - 200) {\n          shouldIncreaseHeightRef.current = true;\n        }\n      }\n    },\n    [canvasElementRef],\n  );\n\n  useEffect(() => {\n    const canvasEle = canvasElementRef.current;\n\n    if (canScribble && canvasEle && isWritingToolActive) {\n      canvasEle.addEventListener('pointerdown', handlePointerDown);\n      canvasEle.addEventListener('pointerup', handlePointerUp);\n      canvasEle.addEventListener('pointermove', handlePointerMove);\n\n      return () => {\n        canvasEle.removeEventListener('pointerdown', handlePointerDown);\n        canvasEle.removeEventListener('pointerup', handlePointerUp);\n        canvasEle.removeEventListener('pointermove', handlePointerMove);\n      };\n    }\n  }, [\n    canvasElementRef,\n    handlePointerDown,\n    handlePointerMove,\n    handlePointerUp,\n    canScribble,\n    isWritingToolActive,\n  ]);\n};\n\nexport default useHeightExtender;\n"],"names":["useHeightExtender","canvasElementRef","cueCanvasRef","canScribble","isScribblingRef","useRef","shouldIncreaseHeightRef","isWritingToolActive","useCueCanvasActions","handlePointerDown","useCallback","handlePointerUp","updatedHeight","_a","handlePointerMove","event","rect","useEffect","canvasEle"],"mappings":";;AAYA,MAAMA,IAAoB,CAAC;AAAA,EACzB,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AACF,MAA+B;AACvB,QAAAC,IAAkBC,EAAgB,EAAK,GACvCC,IAA0BD,EAAgB,EAAK,GAC/C,EAAE,qBAAAE,MAAwBC,KAE1BC,IAAoBC,EAAY,MAAM;AAC1C,IAAAN,EAAgB,UAAU;AAAA,EAC5B,GAAG,CAAE,CAAA,GAECO,IAAkBD,EAAY,MAAM;;AACpC,QAAAT,EAAiB,WAAWK,EAAwB,SAAS;AAC/D,MAAAA,EAAwB,UAAU;AAG5B,YAAAM,IADOX,EAAiB,QAAQ,sBAAsB,EACjC,SAAS;AAEtB,OAAAY,IAAAX,KAAA,gBAAAA,EAAA,YAAA,QAAAW,EAAS,aAAaD;AAAA,IACtC;AAEA,IAAAR,EAAgB,UAAU;AAAA,EAAA,GACzB,CAACH,GAAkBC,CAAY,CAAC,GAE7BY,IAAoBJ;AAAA,IACxB,CAACK,MAAsB;AACjB,UAAAX,EAAgB,WAAWH,EAAiB,SAAS;AACjD,cAAAe,IAAOf,EAAiB,QAAQ,sBAAsB;AAGxD,QAFMc,EAAM,UAAUC,EAAK,OAEtBA,EAAK,SAAS,QACrBV,EAAwB,UAAU;AAAA,MAEtC;AAAA,IACF;AAAA,IACA,CAACL,CAAgB;AAAA,EAAA;AAGnB,EAAAgB,EAAU,MAAM;AACd,UAAMC,IAAYjB,EAAiB;AAE/B,QAAAE,KAAee,KAAaX;AACpB,aAAAW,EAAA,iBAAiB,eAAeT,CAAiB,GACjDS,EAAA,iBAAiB,aAAaP,CAAe,GAC7CO,EAAA,iBAAiB,eAAeJ,CAAiB,GAEpD,MAAM;AACD,QAAAI,EAAA,oBAAoB,eAAeT,CAAiB,GACpDS,EAAA,oBAAoB,aAAaP,CAAe,GAChDO,EAAA,oBAAoB,eAAeJ,CAAiB;AAAA,MAAA;AAAA,EAElE,GACC;AAAA,IACDb;AAAA,IACAQ;AAAA,IACAK;AAAA,IACAH;AAAA,IACAR;AAAA,IACAI;AAAA,EAAA,CACD;AACH;"}
+{"version":3,"file":"use-height-extender.js","sources":["../../../../src/features/cue-canvas/hooks/use-height-extender.ts"],"sourcesContent":["import type { CueCanvasCore } from '../cue-canvas-core';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { useCueCanvasActions } from './use-cue-canvas-actions';\n\ninterface IUseHeightIncreaseProps {\n  canvasElementRef: React.RefObject<HTMLElement>;\n  cueCanvasRef: React.RefObject<CueCanvasCore> | undefined;\n  canScribble: boolean;\n  enabled: boolean;\n}\n\nconst useHeightExtender = ({\n  canvasElementRef,\n  cueCanvasRef,\n  canScribble,\n  enabled,\n}: IUseHeightIncreaseProps) => {\n  const isScribblingRef = useRef<boolean>(false);\n  const shouldIncreaseHeightRef = useRef<boolean>(false);\n  const { isWritingToolActive } = useCueCanvasActions();\n\n  const handlePointerDown = useCallback(() => {\n    isScribblingRef.current = true;\n  }, []);\n\n  const handlePointerUp = useCallback(() => {\n    if (canvasElementRef.current && shouldIncreaseHeightRef.current) {\n      shouldIncreaseHeightRef.current = false;\n\n      const rect = canvasElementRef.current.getBoundingClientRect();\n      const updatedHeight = rect.height + 200;\n\n      cueCanvasRef?.current?.updateHeight(updatedHeight);\n    }\n\n    isScribblingRef.current = false;\n  }, [canvasElementRef, cueCanvasRef]);\n\n  const handlePointerMove = useCallback(\n    (event: MouseEvent) => {\n      if (isScribblingRef.current && canvasElementRef.current) {\n        const rect = canvasElementRef.current.getBoundingClientRect();\n        const y = event.clientY - rect.top;\n\n        if (y >= rect.height - 200) {\n          shouldIncreaseHeightRef.current = true;\n        }\n      }\n    },\n    [canvasElementRef],\n  );\n\n  useEffect(() => {\n    const canvasEle = canvasElementRef.current;\n\n    if (enabled && canScribble && canvasEle && isWritingToolActive) {\n      canvasEle.addEventListener('pointerdown', handlePointerDown);\n      canvasEle.addEventListener('pointerup', handlePointerUp);\n      canvasEle.addEventListener('pointermove', handlePointerMove);\n\n      return () => {\n        canvasEle.removeEventListener('pointerdown', handlePointerDown);\n        canvasEle.removeEventListener('pointerup', handlePointerUp);\n        canvasEle.removeEventListener('pointermove', handlePointerMove);\n      };\n    }\n  }, [\n    canvasElementRef,\n    handlePointerDown,\n    handlePointerMove,\n    handlePointerUp,\n    canScribble,\n    isWritingToolActive,\n    enabled,\n  ]);\n};\n\nexport default useHeightExtender;\n"],"names":["useHeightExtender","canvasElementRef","cueCanvasRef","canScribble","enabled","isScribblingRef","useRef","shouldIncreaseHeightRef","isWritingToolActive","useCueCanvasActions","handlePointerDown","useCallback","handlePointerUp","updatedHeight","_a","handlePointerMove","event","rect","useEffect","canvasEle"],"mappings":";;AAaA,MAAMA,IAAoB,CAAC;AAAA,EACzB,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AACF,MAA+B;AACvB,QAAAC,IAAkBC,EAAgB,EAAK,GACvCC,IAA0BD,EAAgB,EAAK,GAC/C,EAAE,qBAAAE,MAAwBC,KAE1BC,IAAoBC,EAAY,MAAM;AAC1C,IAAAN,EAAgB,UAAU;AAAA,EAC5B,GAAG,CAAE,CAAA,GAECO,IAAkBD,EAAY,MAAM;;AACpC,QAAAV,EAAiB,WAAWM,EAAwB,SAAS;AAC/D,MAAAA,EAAwB,UAAU;AAG5B,YAAAM,IADOZ,EAAiB,QAAQ,sBAAsB,EACjC,SAAS;AAEtB,OAAAa,IAAAZ,KAAA,gBAAAA,EAAA,YAAA,QAAAY,EAAS,aAAaD;AAAA,IACtC;AAEA,IAAAR,EAAgB,UAAU;AAAA,EAAA,GACzB,CAACJ,GAAkBC,CAAY,CAAC,GAE7Ba,IAAoBJ;AAAA,IACxB,CAACK,MAAsB;AACjB,UAAAX,EAAgB,WAAWJ,EAAiB,SAAS;AACjD,cAAAgB,IAAOhB,EAAiB,QAAQ,sBAAsB;AAGxD,QAFMe,EAAM,UAAUC,EAAK,OAEtBA,EAAK,SAAS,QACrBV,EAAwB,UAAU;AAAA,MAEtC;AAAA,IACF;AAAA,IACA,CAACN,CAAgB;AAAA,EAAA;AAGnB,EAAAiB,EAAU,MAAM;AACd,UAAMC,IAAYlB,EAAiB;AAE/B,QAAAG,KAAWD,KAAegB,KAAaX;AAC/B,aAAAW,EAAA,iBAAiB,eAAeT,CAAiB,GACjDS,EAAA,iBAAiB,aAAaP,CAAe,GAC7CO,EAAA,iBAAiB,eAAeJ,CAAiB,GAEpD,MAAM;AACD,QAAAI,EAAA,oBAAoB,eAAeT,CAAiB,GACpDS,EAAA,oBAAoB,aAAaP,CAAe,GAChDO,EAAA,oBAAoB,eAAeJ,CAAiB;AAAA,MAAA;AAAA,EAElE,GACC;AAAA,IACDd;AAAA,IACAS;AAAA,IACAK;AAAA,IACAH;AAAA,IACAT;AAAA,IACAK;AAAA,IACAJ;AAAA,EAAA,CACD;AACH;"}

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

@@ -1,49 +1,58 @@
-import { jsx as r, Fragment as a } from "react/jsx-runtime";
-import { memo as c, useCallback as d, useMemo as s } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { memo as $, useCallback as d, useMemo as C } 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(
+import l from "../../ui/layout/flex-view.js";
+import { getColorsForUser as f } from "../cue-canvas-helpers.js";
+import { ColorPicker as p, StyledCheckIcon as u } from "../cue-cavas-styled.js";
+const y = $((c) => {
+  const { setActiveColor: t, activeColor: i, userType: n, renderAs: o } = c, s = d(
     (e) => {
       t(e);
     },
     [t]
-  ), l = s(() => C(n), [n]);
-  return /* @__PURE__ */ r(a, { children: l.map((e, m) => /* @__PURE__ */ r(
-    h,
+  ), a = C(() => f(n, o), [n, o]);
+  return /* @__PURE__ */ r(
+    l,
     {
-      onClick: () => i(e),
-      label: `Color Picker - ${e}`,
-      children: /* @__PURE__ */ r(
-        $,
+      $flexDirection: "row",
+      $flexWrap: !0,
+      $width: o === "canvas" ? 66 : 200,
+      $position: "relative",
+      children: a.map((e, m) => /* @__PURE__ */ r(
+        h,
         {
-          $width: 22,
-          $height: 22,
-          $borderRadius: 11,
-          $justifyContent: "center",
-          $background: o === e ? "BLACK" : "WHITE",
-          $alignItems: "center",
+          onClick: () => s(e),
+          label: `Color Picker - ${e}`,
           children: /* @__PURE__ */ r(
-            f,
+            l,
             {
-              $width: 20,
-              $height: 20,
-              $borderRadius: 10,
-              $color: e,
-              $alignItems: "center",
+              $width: 22,
+              $height: 22,
+              $borderRadius: 11,
               $justifyContent: "center",
-              children: o === e && /* @__PURE__ */ r(g, {})
+              $background: i === e ? "BLACK" : "WHITE",
+              $alignItems: "center",
+              children: /* @__PURE__ */ r(
+                p,
+                {
+                  $width: 20,
+                  $height: 20,
+                  $borderRadius: 10,
+                  $color: e,
+                  $alignItems: "center",
+                  $justifyContent: "center",
+                  children: i === e && /* @__PURE__ */ r(u, {})
+                }
+              )
             }
           )
-        }
-      )
-    },
-    m
-  )) });
+        },
+        m
+      ))
+    }
+  );
 });
 export {
-  w as default
+  y as default
 };
 //# sourceMappingURL=color-palette.js.map

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

@@ -1 +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;"}
+{"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, TRenderAs } 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  renderAs: TRenderAs;\n}\n\nconst ColorPalette: React.FC<IColorPalette> = memo(props => {\n  const { setActiveColor, activeColor, userType, renderAs } = props;\n  const handleColorChange = useCallback(\n    (color: TCueCanvasColors) => {\n      setActiveColor(color);\n    },\n    [setActiveColor],\n  );\n  const colors = useMemo(() => getColorsForUser(userType, renderAs), [userType, renderAs]);\n\n  return (\n    <FlexView\n      $flexDirection=\"row\"\n      $flexWrap\n      $width={renderAs === 'canvas' ? 66 : 200}\n      $position=\"relative\"\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    </FlexView>\n  );\n});\n\nexport default ColorPalette;\n"],"names":["ColorPalette","memo","props","setActiveColor","activeColor","userType","renderAs","handleColorChange","useCallback","color","colors","useMemo","getColorsForUser","jsx","FlexView","index","Clickable","ColorPicker","StyledCheckIcon"],"mappings":";;;;;;AAiBM,MAAAA,IAAwCC,EAAK,CAASC,MAAA;AAC1D,QAAM,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,GAAU,UAAAC,MAAaJ,GACtDK,IAAoBC;AAAA,IACxB,CAACC,MAA4B;AAC3B,MAAAN,EAAeM,CAAK;AAAA,IACtB;AAAA,IACA,CAACN,CAAc;AAAA,EAAA,GAEXO,IAASC,EAAQ,MAAMC,EAAiBP,GAAUC,CAAQ,GAAG,CAACD,GAAUC,CAAQ,CAAC;AAGrF,SAAA,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,WAAS;AAAA,MACT,QAAQR,MAAa,WAAW,KAAK;AAAA,MACrC,WAAU;AAAA,MAET,UAAOI,EAAA,IAAI,CAACD,GAAOM,MAClB,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UAEC,SAAS,MAAMT,EAAkBE,CAAK;AAAA,UACtC,OAAO,kBAAkBA,CAAK;AAAA,UAE9B,UAAA,gBAAAI;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,cACf,iBAAgB;AAAA,cAChB,aAAaV,MAAgBK,IAAQ,UAAU;AAAA,cAC/C,aAAY;AAAA,cAEZ,UAAA,gBAAAI;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,eAAe;AAAA,kBACf,QAAQR;AAAA,kBACR,aAAY;AAAA,kBACZ,iBAAgB;AAAA,kBAEf,UAAAL,MAAgBK,KAAS,gBAAAI,EAACK,GAAgB,CAAA,CAAA;AAAA,gBAAA;AAAA,cAC7C;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAtBKH;AAAA,MAAA,CAwBR;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

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

@@ -1,20 +1,20 @@
-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,
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { memo as s, useRef as m } from "react";
+import u from "../../ui/buttons/clickable/clickable.js";
+import $ from "../../ui/hooks/use-context-menu-click-handler.js";
+import d from "../../ui/layout/flex-view.js";
+import { ColorPicker as p, PaletteWrapper as f } from "../cue-cavas-styled.js";
+import { useCueCanvasActions as C } from "../hooks/use-cue-canvas-actions.js";
+import h from "./color-palette.js";
+const j = s(({ userType: i, renderAs: e }) => {
+  const r = m(null), { activeColor: t, setActiveColor: l } = C(), { menuVisible: n, onMenuClick: c } = $(
+    r,
     void 0,
     !0,
     void 0
   );
-  return /* @__PURE__ */ s(
-    $,
+  return /* @__PURE__ */ a(
+    d,
     {
       $width: 32,
       $height: 32,
@@ -22,32 +22,35 @@ const W = a(({ userType: i }) => {
       $justifyContent: "center",
       $borderRadius: 16,
       $background: "WHITE",
+      $position: "relative",
       children: [
-        /* @__PURE__ */ e(d, { onClick: c, label: "Color Picker", disabled: !t, children: /* @__PURE__ */ e(
-          f,
+        /* @__PURE__ */ o(u, { onClick: c, label: "Color Picker", children: /* @__PURE__ */ o(
+          p,
           {
             $width: 22,
             $height: 22,
             $borderRadius: 11,
-            $color: r,
-            $opacity: t ? 1 : 0.5,
-            ref: o
+            $color: t,
+            $opacity: 1,
+            ref: r
           }
         ) }),
-        n && /* @__PURE__ */ e(
-          C,
+        n && /* @__PURE__ */ o(
+          f,
           {
             $background: "WHITE",
             $gutterX: 0.5,
             $gapX: 0.5,
             $borderRadius: 10,
             $flexDirection: "row",
-            children: /* @__PURE__ */ e(
-              b,
+            $top: e === "canvas" ? -38 : -82,
+            children: /* @__PURE__ */ o(
+              h,
               {
                 setActiveColor: l,
-                activeColor: r,
-                userType: i
+                activeColor: t,
+                userType: i,
+                renderAs: e
               }
             )
           }
@@ -57,6 +60,6 @@ const W = a(({ userType: i }) => {
   );
 });
 export {
-  W as default
+  j as default
 };
 //# sourceMappingURL=color-picker-menu.js.map

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

@@ -1 +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;"}
+{"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 { TRenderAs } from '../types/cue-canvas';\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  renderAs: TRenderAs;\n}\n\nconst ColorPickerMenu: FC<ColorPickerMenuProps> = memo(({ userType, renderAs }) => {\n  const colorPaletteRef = useRef(null);\n  const { activeColor, setActiveColor } = 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      $position=\"relative\"\n    >\n      <Clickable onClick={onMenuClick} label=\"Color Picker\">\n        <ColorPicker\n          $width={22}\n          $height={22}\n          $borderRadius={11}\n          $color={activeColor}\n          $opacity={1}\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          $top={renderAs === 'canvas' ? -38 : -82} //for one row(22+16) for 3 (22*3 +16) icon size 22 + padding\n        >\n          <ColorPalette\n            setActiveColor={setActiveColor}\n            activeColor={activeColor}\n            userType={userType}\n            renderAs={renderAs}\n          />\n        </PaletteWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default ColorPickerMenu;\n"],"names":["ColorPickerMenu","memo","userType","renderAs","colorPaletteRef","useRef","activeColor","setActiveColor","useCueCanvasActions","menuVisible","onMenuClick","useContextMenuClickHandler","jsxs","FlexView","jsx","Clickable","ColorPicker","PaletteWrapper","ColorPalette"],"mappings":";;;;;;;;AAkBA,MAAMA,IAA4CC,EAAK,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AAC3E,QAAAC,IAAkBC,EAAO,IAAI,GAC7B,EAAE,aAAAC,GAAa,gBAAAC,EAAe,IAAIC,EAAoB,GAEtD,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAIA,SAAA,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,aAAY;AAAA,MACZ,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAC,EAACC,GAAU,EAAA,SAASL,GAAa,OAAM,gBACrC,UAAA,gBAAAI;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,eAAe;AAAA,YACf,QAAQV;AAAA,YACR,UAAU;AAAA,YACV,KAAKF;AAAA,UAAA;AAAA,QAAA,GAET;AAAA,QACCK,KACC,gBAAAK;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YACZ,UAAU;AAAA,YACV,OAAO;AAAA,YACP,eAAe;AAAA,YACf,gBAAe;AAAA,YACf,MAAMd,MAAa,WAAW,MAAM;AAAA,YAEpC,UAAA,gBAAAW;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,gBAAAX;AAAA,gBACA,aAAAD;AAAA,gBACA,UAAAJ;AAAA,gBACA,UAAAC;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"pen-tool-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/pen-tool-menu.tsx"],"sourcesContent":["import type { IPenToolMenu, TToolComponentType } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo, useRef } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getIsWritingTool } from '../cue-canvas-helpers';\nimport { MenuWrapper, PenIconWrapper, StyledDownIcon } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport ColorPalette from './color-palette';\nimport { TOOLS_TO_COMP } from './icon-map';\nimport Tool from './tool';\n\nconst PenToolMenu: FC<IPenToolMenu> = memo(({ writingTools, userType }) => {\n  const { activeTool, activeColor, setActiveColor } = useCueCanvasActions();\n\n  const penMenuRef = useRef(null);\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    penMenuRef,\n    undefined,\n    true,\n    undefined,\n  );\n\n  const ActiveToolComponent = TOOLS_TO_COMP[\n    getIsWritingTool(activeTool) ? activeTool : 'pen'\n  ] as TToolComponentType;\n\n  return (\n    <FlexView $borderRadius={16} $background=\"WHITE\" ref={penMenuRef}>\n      <PenIconWrapper>\n        <Clickable onClick={onMenuClick} label=\"Active Tool\">\n          <FlexView $flexDirection=\"row\" $justifyContent=\"center\" $alignItems=\"center\">\n            <ActiveToolComponent\n              $active={getIsWritingTool(activeTool)}\n              $activeColor={activeColor}\n              $shouldAnimate={false}\n            />\n            <StyledDownIcon $isAnimating={menuVisible} />\n          </FlexView>\n        </Clickable>\n      </PenIconWrapper>\n      {menuVisible && (\n        <MenuWrapper\n          $flexDirection=\"row\"\n          $alignItems=\"center\"\n          $borderColor=\"GREY_1\"\n          $background=\"WHITE\"\n        >\n          {writingTools.map(tool => (\n            <Tool tool={tool} key={tool} shouldAnimate={false} withGutter />\n          ))}\n\n          <ColorPalette\n            setActiveColor={setActiveColor}\n            activeColor={activeColor}\n            userType={userType}\n          />\n        </MenuWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default PenToolMenu;\n"],"names":["PenToolMenu","memo","writingTools","userType","activeTool","activeColor","setActiveColor","useCueCanvasActions","penMenuRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","ActiveToolComponent","TOOLS_TO_COMP","getIsWritingTool","FlexView","jsx","PenIconWrapper","Clickable","jsxs","StyledDownIcon","MenuWrapper","tool","Tool","ColorPalette"],"mappings":";;;;;;;;;;;AAeA,MAAMA,IAAgCC,EAAK,CAAC,EAAE,cAAAC,GAAc,UAAAC,QAAe;AACzE,QAAM,EAAE,YAAAC,GAAY,aAAAC,GAAa,gBAAAC,MAAmBC,EAAoB,GAElEC,IAAaC,EAAO,IAAI,GACxB,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAGIK,IAAsBC,EAC1BC,EAAiBX,CAAU,IAAIA,IAAa,KAC9C;AAEA,2BACGY,GAAS,EAAA,eAAe,IAAI,aAAY,SAAQ,KAAKR,GACpD,UAAA;AAAA,IAAA,gBAAAS,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACE,GAAU,EAAA,SAASR,GAAa,OAAM,eACrC,UAAC,gBAAAS,EAAAJ,GAAA,EAAS,gBAAe,OAAM,iBAAgB,UAAS,aAAY,UAClE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACJ;AAAA,QAAA;AAAA,UACC,SAASE,EAAiBX,CAAU;AAAA,UACpC,cAAcC;AAAA,UACd,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,MACA,gBAAAY,EAACI,GAAe,EAAA,cAAcX,EAAa,CAAA;AAAA,IAAA,EAC7C,CAAA,EACF,CAAA,GACF;AAAA,IACCA,KACC,gBAAAU;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,aAAY;AAAA,QAEX,UAAA;AAAA,UAAapB,EAAA,IAAI,CAChBqB,MAAA,gBAAAN,EAACO,GAAK,EAAA,MAAAD,GAAuB,eAAe,IAAO,YAAU,GAAtC,GAAAA,CAAuC,CAC/D;AAAA,UAED,gBAAAN;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,gBAAAnB;AAAA,cACA,aAAAD;AAAA,cACA,UAAAF;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"pen-tool-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/pen-tool-menu.tsx"],"sourcesContent":["import type { IPenToolMenu, TToolComponentType } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo, useRef } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getIsWritingTool } from '../cue-canvas-helpers';\nimport { MenuWrapper, PenIconWrapper, StyledDownIcon } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport { TOOLS_TO_COMP } from './icon-map';\nimport Tool from './tool';\n\nconst PenToolMenu: FC<IPenToolMenu> = memo(({ writingTools }) => {\n  const { activeTool, activeColor } = useCueCanvasActions();\n\n  const penMenuRef = useRef(null);\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    penMenuRef,\n    undefined,\n    true,\n    undefined,\n  );\n\n  const ActiveToolComponent = TOOLS_TO_COMP[\n    getIsWritingTool(activeTool) ? activeTool : 'pen'\n  ] as TToolComponentType;\n\n  return (\n    <FlexView $borderRadius={16} $background=\"WHITE\" ref={penMenuRef}>\n      <PenIconWrapper>\n        <Clickable onClick={onMenuClick} label=\"Active Tool\">\n          <FlexView $flexDirection=\"row\" $justifyContent=\"center\" $alignItems=\"center\">\n            <ActiveToolComponent\n              $active={getIsWritingTool(activeTool)}\n              $activeColor={activeColor}\n              $shouldAnimate={false}\n            />\n            <StyledDownIcon $isAnimating={menuVisible} />\n          </FlexView>\n        </Clickable>\n      </PenIconWrapper>\n      {menuVisible && (\n        <MenuWrapper\n          $flexDirection=\"row\"\n          $alignItems=\"center\"\n          $borderColor=\"GREY_1\"\n          $background=\"WHITE\"\n        >\n          {writingTools.map(tool => (\n            <Tool tool={tool} key={tool} shouldAnimate={false} withGutter />\n          ))}\n        </MenuWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default PenToolMenu;\n"],"names":["PenToolMenu","memo","writingTools","activeTool","activeColor","useCueCanvasActions","penMenuRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","ActiveToolComponent","TOOLS_TO_COMP","getIsWritingTool","FlexView","jsx","PenIconWrapper","Clickable","jsxs","StyledDownIcon","MenuWrapper","tool","Tool"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAAgCC,EAAK,CAAC,EAAE,cAAAC,QAAmB;AAC/D,QAAM,EAAE,YAAAC,GAAY,aAAAC,EAAY,IAAIC,EAAoB,GAElDC,IAAaC,EAAO,IAAI,GACxB,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAGIK,IAAsBC,EAC1BC,EAAiBV,CAAU,IAAIA,IAAa,KAC9C;AAEA,2BACGW,GAAS,EAAA,eAAe,IAAI,aAAY,SAAQ,KAAKR,GACpD,UAAA;AAAA,IAAA,gBAAAS,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACE,GAAU,EAAA,SAASR,GAAa,OAAM,eACrC,UAAC,gBAAAS,EAAAJ,GAAA,EAAS,gBAAe,OAAM,iBAAgB,UAAS,aAAY,UAClE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACJ;AAAA,QAAA;AAAA,UACC,SAASE,EAAiBV,CAAU;AAAA,UACpC,cAAcC;AAAA,UACd,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,MACA,gBAAAW,EAACI,GAAe,EAAA,cAAcX,EAAa,CAAA;AAAA,IAAA,EAC7C,CAAA,EACF,CAAA,GACF;AAAA,IACCA,KACC,gBAAAO;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,aAAY;AAAA,QAEX,UAAAlB,EAAa,IAAI,CAAAmB,MACf,gBAAAN,EAAAO,GAAA,EAAK,MAAAD,GAAuB,eAAe,IAAO,YAAU,GAAtC,GAAAA,CAAuC,CAC/D;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/toolbar.tsx"],"sourcesContent":["import type { IToolbarProps } from '../types/toolbar';\n\nimport React, { memo, useEffect } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport { CANVAS_COLORS } from '../constants/constants';\nimport { getUserTools } from '../cue-canvas-helpers';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport ColorPickerMenu from './color-picker-menu';\nimport Tool from './tool';\nimport WhiteboardToolbar from './whiteboard-toolbar';\n\nconst Toolbar: React.FC<IToolbarProps> = memo(({ userType, renderAs }) => {\n  const tools = getUserTools(userType, renderAs);\n  const { activeInstance: cueCanvas, activeTool, activeColor } = useCueCanvasActions();\n\n  useEffect(() => {\n    if (cueCanvas) {\n      if (activeColor) {\n        cueCanvas.setColor(CANVAS_COLORS[activeColor]);\n      }\n\n      if (activeTool) {\n        cueCanvas.setTool(activeTool);\n      }\n    }\n  }, [activeColor, activeTool, cueCanvas, renderAs]);\n\n  if (renderAs === 'whiteboard') {\n    return <WhiteboardToolbar tools={tools} userType={userType} />;\n  }\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\" $flexGapX={0.5}>\n      {tools.map(tool => (\n        <Tool tool={tool} key={tool} shouldAnimate />\n      ))}\n      <ColorPickerMenu userType={userType} />\n    </FlexView>\n  );\n});\n\nexport default Toolbar;\n"],"names":["Toolbar","memo","userType","renderAs","tools","getUserTools","cueCanvas","activeTool","activeColor","useCueCanvasActions","useEffect","CANVAS_COLORS","jsx","WhiteboardToolbar","jsxs","FlexView","Tool","tool","ColorPickerMenu","Toolbar$1"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAmCC,EAAK,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AAClE,QAAAC,IAAQC,EAAaH,GAAUC,CAAQ,GACvC,EAAE,gBAAgBG,GAAW,YAAAC,GAAY,aAAAC,EAAA,IAAgBC;AAc/D,SAZAC,EAAU,MAAM;AACd,IAAIJ,MACEE,KACQF,EAAA,SAASK,EAAcH,CAAW,CAAC,GAG3CD,KACFD,EAAU,QAAQC,CAAU;AAAA,KAG/B,CAACC,GAAaD,GAAYD,GAAWH,CAAQ,CAAC,GAE7CA,MAAa,eACR,gBAAAS,EAACC,GAAkB,EAAA,OAAAT,GAAc,UAAAF,EAAoB,CAAA,IAI5D,gBAAAY,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAgB,UAAS,WAAW,KACrF,UAAA;AAAA,IAAMX,EAAA,IAAI,OACR,gBAAAQ,EAAAI,GAAA,EAAK,MAAAC,GAAuB,eAAa,GAAA,GAAnBA,CAAoB,CAC5C;AAAA,IACD,gBAAAL,EAACM,KAAgB,UAAAhB,GAAoB;AAAA,EACvC,EAAA,CAAA;AAEJ,CAAC,GAEDiB,IAAenB;"}
+{"version":3,"file":"toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/toolbar.tsx"],"sourcesContent":["import type { IToolbarProps } from '../types/toolbar';\n\nimport React, { memo, useEffect } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport { getUserTools } from '../cue-canvas-helpers';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport ColorPickerMenu from './color-picker-menu';\nimport Tool from './tool';\nimport WhiteboardToolbar from './whiteboard-toolbar';\n\nconst Toolbar: React.FC<IToolbarProps> = memo(({ userType, renderAs }) => {\n  const tools = getUserTools(userType, renderAs);\n  const { activeInstance: cueCanvas, activeTool, activeColor } = useCueCanvasActions();\n\n  useEffect(() => {\n    if (cueCanvas) {\n      if (activeColor) {\n        cueCanvas.setColor(activeColor);\n      }\n\n      if (activeTool) {\n        cueCanvas.setTool(activeTool);\n      }\n    }\n  }, [activeColor, activeTool, cueCanvas, renderAs]);\n\n  if (renderAs === 'whiteboard') {\n    return <WhiteboardToolbar tools={tools} userType={userType} />;\n  }\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\" $flexGapX={0.5}>\n      {tools.map(tool => (\n        <Tool tool={tool} key={tool} shouldAnimate />\n      ))}\n      <ColorPickerMenu userType={userType} renderAs=\"canvas\" />\n    </FlexView>\n  );\n});\n\nexport default Toolbar;\n"],"names":["Toolbar","memo","userType","renderAs","tools","getUserTools","cueCanvas","activeTool","activeColor","useCueCanvasActions","useEffect","jsx","WhiteboardToolbar","jsxs","FlexView","Tool","tool","ColorPickerMenu","Toolbar$1"],"mappings":";;;;;;;;AAWA,MAAMA,IAAmCC,EAAK,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AAClE,QAAAC,IAAQC,EAAaH,GAAUC,CAAQ,GACvC,EAAE,gBAAgBG,GAAW,YAAAC,GAAY,aAAAC,EAAA,IAAgBC;AAc/D,SAZAC,EAAU,MAAM;AACd,IAAIJ,MACEE,KACFF,EAAU,SAASE,CAAW,GAG5BD,KACFD,EAAU,QAAQC,CAAU;AAAA,KAG/B,CAACC,GAAaD,GAAYD,GAAWH,CAAQ,CAAC,GAE7CA,MAAa,eACR,gBAAAQ,EAACC,GAAkB,EAAA,OAAAR,GAAc,UAAAF,EAAoB,CAAA,IAI5D,gBAAAW,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAgB,UAAS,WAAW,KACrF,UAAA;AAAA,IAAMV,EAAA,IAAI,OACR,gBAAAO,EAAAI,GAAA,EAAK,MAAAC,GAAuB,eAAa,GAAA,GAAnBA,CAAoB,CAC5C;AAAA,IACA,gBAAAL,EAAAM,GAAA,EAAgB,UAAAf,GAAoB,UAAS,SAAS,CAAA;AAAA,EACzD,EAAA,CAAA;AAEJ,CAAC,GAEDgB,IAAelB;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"whiteboard-toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/whiteboard-toolbar.tsx"],"sourcesContent":["import type { IWhiteboardToolbar } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport PenToolMenu from './pen-tool-menu';\nimport Tool from './tool';\n\nconst WhiteboardToolbar: FC<IWhiteboardToolbar> = memo(({ tools, userType }) => {\n  const writingTools = tools.slice(0, 4);\n  const otherTools = tools.slice(4);\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGapX={0.25} $position=\"relative\">\n      <PenToolMenu writingTools={writingTools} userType={userType} />\n      {otherTools.map(tool => (\n        <Tool tool={tool} key={tool} shouldAnimate={false} />\n      ))}\n    </FlexView>\n  );\n});\n\nexport default WhiteboardToolbar;\n"],"names":["WhiteboardToolbar","memo","tools","userType","writingTools","otherTools","jsxs","FlexView","jsx","PenToolMenu","tool","Tool"],"mappings":";;;;;AASA,MAAMA,IAA4CC,EAAK,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAAe;AAC9E,QAAMC,IAAeF,EAAM,MAAM,GAAG,CAAC,GAC/BG,IAAaH,EAAM,MAAM,CAAC;AAG9B,SAAA,gBAAAI,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,WAAW,MAAM,WAAU,YAC7E,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAY,cAAAL,GAA4B,UAAAD,EAAoB,CAAA;AAAA,IAC5DE,EAAW,IAAI,CACdK,MAAA,gBAAAF,EAACG,KAAK,MAAAD,GAAuB,eAAe,GAArB,GAAAA,CAA4B,CACpD;AAAA,EACH,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"whiteboard-toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/whiteboard-toolbar.tsx"],"sourcesContent":["import type { IWhiteboardToolbar } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport ColorPickerMenu from './color-picker-menu';\nimport PenToolMenu from './pen-tool-menu';\nimport Tool from './tool';\n\nconst WhiteboardToolbar: FC<IWhiteboardToolbar> = memo(({ tools, userType }) => {\n  const writingTools = tools.slice(0, 4);\n  const otherTools = tools.slice(4);\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGapX={0.25} $position=\"relative\">\n      <PenToolMenu writingTools={writingTools} />\n      <ColorPickerMenu userType={userType} renderAs=\"whiteboard\" />\n      {otherTools.map(tool => (\n        <Tool tool={tool} key={tool} shouldAnimate={false} />\n      ))}\n    </FlexView>\n  );\n});\n\nexport default WhiteboardToolbar;\n"],"names":["WhiteboardToolbar","memo","tools","userType","writingTools","otherTools","jsxs","FlexView","jsx","PenToolMenu","ColorPickerMenu","tool","Tool"],"mappings":";;;;;;AAUA,MAAMA,IAA4CC,EAAK,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAAe;AAC9E,QAAMC,IAAeF,EAAM,MAAM,GAAG,CAAC,GAC/BG,IAAaH,EAAM,MAAM,CAAC;AAG9B,SAAA,gBAAAI,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,WAAW,MAAM,WAAU,YAC7E,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAY,cAAAL,GAA4B;AAAA,IACxC,gBAAAI,EAAAE,GAAA,EAAgB,UAAAP,GAAoB,UAAS,aAAa,CAAA;AAAA,IAC1DE,EAAW,IAAI,CACdM,MAAA,gBAAAH,EAACI,KAAK,MAAAD,GAAuB,eAAe,GAArB,GAAAA,CAA4B,CACpD;AAAA,EACH,EAAA,CAAA;AAEJ,CAAC;"}