@cuemath/leap 3.1.7-aa7 → 3.1.7-gg1

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

@@ -1,13 +1,12 @@
-import { useEffect as E } from "react";
-import { useCueCanvasActions as G } from "./use-cue-canvas-actions.js";
-const V = (x) => {
-  const { canvasConfig: e, renderAs: s, userId: r } = x, { activeInstance: t, setActiveColor: o, setActiveTool: u } = G();
-  E(() => {
-    var l, d, m, i, p, A, c, I, N, T, h, w;
-    !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), (d = (l = e == null ? void 0 : e.users) == null ? void 0 : l[r]) != null && d.tool && (u((i = (m = e.users) == null ? void 0 : m[r]) == null ? void 0 : i.tool), t.setTool((A = (p = e.users) == null ? void 0 : p[r]) == null ? void 0 : A.tool, !1)), (I = (c = e == null ? void 0 : e.users) == null ? void 0 : c[r]) != null && I.color && (o((T = (N = e == null ? void 0 : e.users) == null ? void 0 : N[r]) == null ? void 0 : T.color), t.setColor((w = (h = e.users) == null ? void 0 : h[r]) == null ? void 0 : w.color, !1)));
-  }, [e, t, s, o, u, r]);
+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]);
 };
 export {
-  V as default
+  N 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\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      cueCanvas.setTool(canvasConfig.users?.[userId]?.tool, false);\n    }\n\n    if (canvasConfig?.users?.[userId]?.color) {\n      setActiveColor(canvasConfig?.users?.[userId]?.color);\n      cueCanvas.setColor(canvasConfig.users?.[userId]?.color, false);\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","_j","_i","_l","_k"],"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,SACjCH,GAAcK,KAAAC,IAAAX,EAAa,UAAb,gBAAAW,EAAqBT,OAArB,gBAAAQ,EAA8B,IAAI,GAChDP,EAAU,SAAQS,KAAAC,IAAAb,EAAa,UAAb,gBAAAa,EAAqBX,OAArB,gBAAAU,EAA8B,MAAM,EAAK,KAGzDE,KAAAC,IAAAf,KAAA,gBAAAA,EAAc,UAAd,gBAAAe,EAAsBb,OAAtB,QAAAY,EAA+B,UACjCV,GAAeY,KAAAC,IAAAjB,KAAA,gBAAAA,EAAc,UAAd,gBAAAiB,EAAsBf,OAAtB,gBAAAc,EAA+B,KAAK,GACnDb,EAAU,UAASe,KAAAC,IAAAnB,EAAa,UAAb,gBAAAmB,EAAqBjB,OAArB,gBAAAgB,EAA8B,OAAO,EAAK;AAAA,EAC/D,GACC,CAAClB,GAAcG,GAAWF,GAAUG,GAAgBC,GAAeH,CAAM,CAAC;AAC/E;"}
+{"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;"}

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

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

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

@@ -1,17 +1,16 @@
 import { jsx as r } from "react/jsx-runtime";
-import { memo as $, useCallback as d, useMemo as h } from "react";
-import u from "../../ui/buttons/clickable/clickable.js";
+import { memo as $, useCallback as d, useMemo as C } from "react";
+import h from "../../ui/buttons/clickable/clickable.js";
 import l from "../../ui/layout/flex-view.js";
 import { getColorsForUser as f } from "../cue-canvas-helpers.js";
-import { ColorPicker as p, StyledCheckIcon as g } from "../cue-cavas-styled.js";
-import { useCueCanvasActions as k } from "../hooks/use-cue-canvas-actions.js";
-const j = $((c) => {
-  const { activeInstance: t } = k(), { setActiveColor: i, activeColor: n, userType: s, renderAs: o } = c, a = d(
+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) => {
-      i(e), t == null || t.setColor(e, !0);
+      t(e);
     },
-    [t, i]
-  ), m = h(() => f(s, o), [s, o]);
+    [t]
+  ), a = C(() => f(n, o), [n, o]);
   return /* @__PURE__ */ r(
     l,
     {
@@ -19,10 +18,10 @@ const j = $((c) => {
       $flexWrap: !0,
       $width: o === "canvas" ? 66 : 200,
       $position: "relative",
-      children: m.map((e, C) => /* @__PURE__ */ r(
-        u,
+      children: a.map((e, m) => /* @__PURE__ */ r(
+        h,
         {
-          onClick: () => a(e),
+          onClick: () => s(e),
           label: `Color Picker - ${e}`,
           children: /* @__PURE__ */ r(
             l,
@@ -31,7 +30,7 @@ const j = $((c) => {
               $height: 22,
               $borderRadius: 11,
               $justifyContent: "center",
-              $background: n === e ? "BLACK" : "WHITE",
+              $background: i === e ? "BLACK" : "WHITE",
               $alignItems: "center",
               children: /* @__PURE__ */ r(
                 p,
@@ -42,18 +41,18 @@ const j = $((c) => {
                   $color: e,
                   $alignItems: "center",
                   $justifyContent: "center",
-                  children: n === e && /* @__PURE__ */ r(g, {})
+                  children: i === e && /* @__PURE__ */ r(u, {})
                 }
               )
             }
           )
         },
-        C
+        m
       ))
     }
   );
 });
 export {
-  j 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, 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';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\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 { activeInstance: cueCanvas } = useCueCanvasActions();\n  const { setActiveColor, activeColor, userType, renderAs } = props;\n  const handleColorChange = useCallback(\n    (color: TCueCanvasColors) => {\n      setActiveColor(color);\n      cueCanvas?.setColor(color, true);\n    },\n    [cueCanvas, 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","cueCanvas","useCueCanvasActions","setActiveColor","activeColor","userType","renderAs","handleColorChange","useCallback","color","colors","useMemo","getColorsForUser","jsx","FlexView","index","Clickable","ColorPicker","StyledCheckIcon"],"mappings":";;;;;;;AAkBM,MAAAA,IAAwCC,EAAK,CAASC,MAAA;AAC1D,QAAM,EAAE,gBAAgBC,EAAU,IAAIC,EAAoB,GACpD,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,GAAU,UAAAC,MAAaN,GACtDO,IAAoBC;AAAA,IACxB,CAACC,MAA4B;AAC3B,MAAAN,EAAeM,CAAK,GACTR,KAAA,QAAAA,EAAA,SAASQ,GAAO;AAAA,IAC7B;AAAA,IACA,CAACR,GAAWE,CAAc;AAAA,EAAA,GAEtBO,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;"}
+{"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/tool.js

@@ -1,7 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
 import { memo as T, useCallback as d } from "react";
-import u from "../../ui/buttons/clickable/clickable.js";
-import C from "../../ui/layout/flex-view.js";
+import C from "../../ui/buttons/clickable/clickable.js";
+import u from "../../ui/layout/flex-view.js";
 import { STATELESS_TOOLS as v, getIsWritingTool as h } from "../cue-canvas-helpers.js";
 import { StyledWrapper as k } from "../cue-cavas-styled.js";
 import { useCueCanvasActions as O } from "../hooks/use-cue-canvas-actions.js";
@@ -17,11 +17,11 @@ const A = ({ tool: o, withGutter: a, shouldAnimate: s }) => {
     setHomeworkId: n
   } = O(), p = d(
     (i) => {
-      e == null || e.setTool(i, !0), i === "clearAll" && l && n(void 0), v.has(i) || m(i);
+      e == null || e.setTool(i), i === "clearAll" && l && n(void 0), v.has(i) || m(i);
     },
     [e, l, m, n]
   );
-  return o === "grid" ? /* @__PURE__ */ r(S, { GridIcon: t }) : /* @__PURE__ */ r(C, { $gutterX: a ? 0.25 : 0, children: /* @__PURE__ */ r(u, { onClick: () => p(o), label: o, children: h(o) ? /* @__PURE__ */ r(
+  return o === "grid" ? /* @__PURE__ */ r(S, { GridIcon: t }) : /* @__PURE__ */ r(u, { $gutterX: a ? 0.25 : 0, children: /* @__PURE__ */ r(C, { onClick: () => p(o), label: o, children: h(o) ? /* @__PURE__ */ r(
     t,
     {
       $active: c === o,

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

@@ -1 +1 @@
-{"version":3,"file":"tool.js","sources":["../../../../src/features/cue-canvas/toolbar/tool.tsx"],"sourcesContent":["import type { TCueCanvasTool } from '../types/cue-canvas';\nimport type { TToolComponentType } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo, useCallback } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getIsWritingTool, STATELESS_TOOLS } from '../cue-canvas-helpers';\nimport { StyledWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport GridMenu from './grid-menu';\nimport { TOOLS_TO_COMP } from './icon-map';\n\ninterface IToolProps {\n  tool: TCueCanvasTool;\n  withGutter?: boolean;\n  shouldAnimate?: boolean;\n}\n\nconst Tool: FC<IToolProps> = ({ tool, withGutter, shouldAnimate }) => {\n  const ToolComponent = TOOLS_TO_COMP[tool] as TToolComponentType;\n  const {\n    activeInstance: cueCanvas,\n    setActiveTool,\n    activeTool,\n    activeColor,\n    homeworkId,\n    setHomeworkId,\n  } = useCueCanvasActions();\n\n  const onToolClick = useCallback(\n    (t: TCueCanvasTool) => {\n      cueCanvas?.setTool(t, true);\n      if (t === 'clearAll' && homeworkId) {\n        setHomeworkId(undefined);\n      }\n\n      if (!STATELESS_TOOLS.has(t)) {\n        setActiveTool(t);\n      }\n    },\n    [cueCanvas, homeworkId, setActiveTool, setHomeworkId],\n  );\n\n  if (tool === 'grid') {\n    return <GridMenu GridIcon={ToolComponent} />;\n  }\n\n  return (\n    <FlexView $gutterX={withGutter ? 0.25 : 0}>\n      <Clickable onClick={() => onToolClick(tool)} label={tool}>\n        {getIsWritingTool(tool) ? (\n          <ToolComponent\n            $active={activeTool === tool}\n            $activeColor={activeColor}\n            $shouldAnimate={shouldAnimate}\n          />\n        ) : (\n          <StyledWrapper $active={activeTool === tool}>\n            <ToolComponent />\n          </StyledWrapper>\n        )}\n      </Clickable>\n    </FlexView>\n  );\n};\n\nexport default memo(Tool);\n"],"names":["Tool","tool","withGutter","shouldAnimate","ToolComponent","TOOLS_TO_COMP","cueCanvas","setActiveTool","activeTool","activeColor","homeworkId","setHomeworkId","useCueCanvasActions","onToolClick","useCallback","t","STATELESS_TOOLS","jsx","GridMenu","FlexView","Clickable","getIsWritingTool","StyledWrapper","Tool$1","memo"],"mappings":";;;;;;;;;AAoBA,MAAMA,IAAuB,CAAC,EAAE,MAAAC,GAAM,YAAAC,GAAY,eAAAC,QAAoB;AAC9D,QAAAC,IAAgBC,EAAcJ,CAAI,GAClC;AAAA,IACJ,gBAAgBK;AAAA,IAChB,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,MACEC,EAAoB,GAElBC,IAAcC;AAAA,IAClB,CAACC,MAAsB;AACV,MAAAT,KAAA,QAAAA,EAAA,QAAQS,GAAG,KAClBA,MAAM,cAAcL,KACtBC,EAAc,MAAS,GAGpBK,EAAgB,IAAID,CAAC,KACxBR,EAAcQ,CAAC;AAAA,IAEnB;AAAA,IACA,CAACT,GAAWI,GAAYH,GAAeI,CAAa;AAAA,EAAA;AAGtD,SAAIV,MAAS,SACJ,gBAAAgB,EAACC,GAAS,EAAA,UAAUd,EAAe,CAAA,sBAIzCe,GAAS,EAAA,UAAUjB,IAAa,OAAO,GACtC,UAAC,gBAAAe,EAAAG,GAAA,EAAU,SAAS,MAAMP,EAAYZ,CAAI,GAAG,OAAOA,GACjD,UAAAoB,EAAiBpB,CAAI,IACpB,gBAAAgB;AAAA,IAACb;AAAA,IAAA;AAAA,MACC,SAASI,MAAeP;AAAA,MACxB,cAAcQ;AAAA,MACd,gBAAgBN;AAAA,IAAA;AAAA,EAClB,IAEC,gBAAAc,EAAAK,GAAA,EAAc,SAASd,MAAeP,GACrC,UAAC,gBAAAgB,EAAAb,GAAA,CAAc,CAAA,EACjB,CAAA,EAEJ,CAAA,EACF,CAAA;AAEJ,GAEemB,IAAAC,EAAKxB,CAAI;"}
+{"version":3,"file":"tool.js","sources":["../../../../src/features/cue-canvas/toolbar/tool.tsx"],"sourcesContent":["import type { TCueCanvasTool } from '../types/cue-canvas';\nimport type { TToolComponentType } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo, useCallback } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getIsWritingTool, STATELESS_TOOLS } from '../cue-canvas-helpers';\nimport { StyledWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport GridMenu from './grid-menu';\nimport { TOOLS_TO_COMP } from './icon-map';\n\ninterface IToolProps {\n  tool: TCueCanvasTool;\n  withGutter?: boolean;\n  shouldAnimate?: boolean;\n}\n\nconst Tool: FC<IToolProps> = ({ tool, withGutter, shouldAnimate }) => {\n  const ToolComponent = TOOLS_TO_COMP[tool] as TToolComponentType;\n  const {\n    activeInstance: cueCanvas,\n    setActiveTool,\n    activeTool,\n    activeColor,\n    homeworkId,\n    setHomeworkId,\n  } = useCueCanvasActions();\n\n  const onToolClick = useCallback(\n    (t: TCueCanvasTool) => {\n      cueCanvas?.setTool(t);\n      if (t === 'clearAll' && homeworkId) {\n        setHomeworkId(undefined);\n      }\n\n      if (!STATELESS_TOOLS.has(t)) {\n        setActiveTool(t);\n      }\n    },\n    [cueCanvas, homeworkId, setActiveTool, setHomeworkId],\n  );\n\n  if (tool === 'grid') {\n    return <GridMenu GridIcon={ToolComponent} />;\n  }\n\n  return (\n    <FlexView $gutterX={withGutter ? 0.25 : 0}>\n      <Clickable onClick={() => onToolClick(tool)} label={tool}>\n        {getIsWritingTool(tool) ? (\n          <ToolComponent\n            $active={activeTool === tool}\n            $activeColor={activeColor}\n            $shouldAnimate={shouldAnimate}\n          />\n        ) : (\n          <StyledWrapper $active={activeTool === tool}>\n            <ToolComponent />\n          </StyledWrapper>\n        )}\n      </Clickable>\n    </FlexView>\n  );\n};\n\nexport default memo(Tool);\n"],"names":["Tool","tool","withGutter","shouldAnimate","ToolComponent","TOOLS_TO_COMP","cueCanvas","setActiveTool","activeTool","activeColor","homeworkId","setHomeworkId","useCueCanvasActions","onToolClick","useCallback","t","STATELESS_TOOLS","jsx","GridMenu","FlexView","Clickable","getIsWritingTool","StyledWrapper","Tool$1","memo"],"mappings":";;;;;;;;;AAoBA,MAAMA,IAAuB,CAAC,EAAE,MAAAC,GAAM,YAAAC,GAAY,eAAAC,QAAoB;AAC9D,QAAAC,IAAgBC,EAAcJ,CAAI,GAClC;AAAA,IACJ,gBAAgBK;AAAA,IAChB,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,MACEC,EAAoB,GAElBC,IAAcC;AAAA,IAClB,CAACC,MAAsB;AACrB,MAAAT,KAAA,QAAAA,EAAW,QAAQS,IACfA,MAAM,cAAcL,KACtBC,EAAc,MAAS,GAGpBK,EAAgB,IAAID,CAAC,KACxBR,EAAcQ,CAAC;AAAA,IAEnB;AAAA,IACA,CAACT,GAAWI,GAAYH,GAAeI,CAAa;AAAA,EAAA;AAGtD,SAAIV,MAAS,SACJ,gBAAAgB,EAACC,GAAS,EAAA,UAAUd,EAAe,CAAA,sBAIzCe,GAAS,EAAA,UAAUjB,IAAa,OAAO,GACtC,UAAC,gBAAAe,EAAAG,GAAA,EAAU,SAAS,MAAMP,EAAYZ,CAAI,GAAG,OAAOA,GACjD,UAAAoB,EAAiBpB,CAAI,IACpB,gBAAAgB;AAAA,IAACb;AAAA,IAAA;AAAA,MACC,SAASI,MAAeP;AAAA,MACxB,cAAcQ;AAAA,MACd,gBAAgBN;AAAA,IAAA;AAAA,EAClB,IAEC,gBAAAc,EAAAK,GAAA,EAAc,SAASd,MAAeP,GACrC,UAAC,gBAAAgB,EAAAb,GAAA,CAAc,CAAA,EACjB,CAAA,EAEJ,CAAA,EACF,CAAA;AAEJ,GAEemB,IAAAC,EAAKxB,CAAI;"}

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

@@ -1,21 +1,21 @@
-import { jsx as r, jsxs as n } from "react/jsx-runtime";
-import { memo as f, useEffect as l } from "react";
-import c from "../../ui/layout/flex-view.js";
+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: e }) => {
-  const i = p(t, e), { activeInstance: o, activeTool: a, activeColor: s } = u();
-  return l(() => {
-    o && (s && o.setColor(s, !1), a && o.setTool(a, !1));
-  }, [o]), e === "whiteboard" ? /* @__PURE__ */ r(x, { tools: i, userType: t }) : /* @__PURE__ */ n(c, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", $flexGapX: 0.5, children: [
-    i.map((m) => /* @__PURE__ */ r(v, { tool: m, shouldAnimate: !0 }, m)),
-    /* @__PURE__ */ r(C, { userType: t, renderAs: "canvas" })
+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" })
   ] });
-}), I = b;
+}), k = b;
 export {
-  I 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 { 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    //This effect is used to set the active tool and color on the cueCanvas instance\n    // when user navigfate to differnet questions this is used to sync tool and color for the cueCanvas instance\n    // this is only needed for canvas as whiteboard will only have 1 instance\n    if (cueCanvas) {\n      if (activeColor) {\n        cueCanvas.setColor(activeColor, false);\n      }\n\n      if (activeTool) {\n        cueCanvas.setTool(activeTool, false);\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [cueCanvas]);\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;AAkB/D,SAhBAC,EAAU,MAAM;AAId,IAAIJ,MACEE,KACQF,EAAA,SAASE,GAAa,EAAK,GAGnCD,KACQD,EAAA,QAAQC,GAAY,EAAK;AAAA,EAEvC,GAEC,CAACD,CAAS,CAAC,GAEVH,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;"}
+{"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/ui/modals/modal-context.js

@@ -0,0 +1,13 @@
+import { createContext as o } from "react";
+const e = o({
+  modal: null,
+  openModal: () => {
+  },
+  closeModal: () => {
+  },
+  isClosing: !1
+});
+export {
+  e as default
+};
+//# sourceMappingURL=modal-context.js.map

package/dist/features/ui/modals/modal-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-context.js","sources":["../../../../src/features/ui/modals/modal-context.ts"],"sourcesContent":["import type { IModalContext } from './modal-types';\n\nimport { createContext } from 'react';\n\n/**\n * Context for providing modal functionality throughout the application\n * Provides access to modal state and actions to open/close modals\n *\n * @example\n * // Usage with useContext\n * const { openModal, closeModal } = useContext(ModalContext);\n * openModal('modalName', { someParam: 'value' });\n */\nconst ModalContext = createContext<IModalContext>({\n  modal: null,\n  openModal: () => {},\n  closeModal: () => {},\n  isClosing: false,\n});\n\nexport default ModalContext;\n"],"names":["ModalContext","createContext"],"mappings":";AAaA,MAAMA,IAAeC,EAA6B;AAAA,EAChD,OAAO;AAAA,EACP,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,WAAW;AACb,CAAC;"}

package/dist/features/ui/modals/modal-helpers.js

@@ -0,0 +1,17 @@
+const e = () => {
+  const o = window.innerWidth > document.documentElement.clientWidth;
+  if (document.body.dataset.originalOverflow = document.body.style.overflow || "", o) {
+    const d = window.innerWidth - document.documentElement.clientWidth;
+    document.body.dataset.originalPadding = document.body.style.paddingRight || "";
+    const t = parseInt(window.getComputedStyle(document.body).paddingRight, 10) || 0;
+    document.body.style.paddingRight = `${t + d}px`;
+  }
+  document.body.style.overflow = "hidden", document.body.style.touchAction = "none";
+}, n = () => {
+  document.body.dataset.originalPadding !== void 0 && (document.body.style.paddingRight = document.body.dataset.originalPadding, delete document.body.dataset.originalPadding), document.body.dataset.originalOverflow !== void 0 ? (document.body.style.overflow = document.body.dataset.originalOverflow, delete document.body.dataset.originalOverflow) : document.body.style.overflow = "", document.body.style.touchAction = "";
+};
+export {
+  e as lockScroll,
+  n as unlockScroll
+};
+//# sourceMappingURL=modal-helpers.js.map

package/dist/features/ui/modals/modal-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-helpers.js","sources":["../../../../src/features/ui/modals/modal-helpers.ts"],"sourcesContent":["/**\n * Locks scrolling on the body element while preserving the scrollbar width to prevent layout shifts.\n * Stores original style values in data attributes for later restoration.\n */\nexport const lockScroll = (): void => {\n  // Calculate if scrollbar is present\n  const hasScrollbar = window.innerWidth > document.documentElement.clientWidth;\n\n  // Save original overflow state regardless\n  document.body.dataset.originalOverflow = document.body.style.overflow || '';\n\n  if (hasScrollbar) {\n    // Calculate scrollbar width\n    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n\n    // Save original padding\n    document.body.dataset.originalPadding = document.body.style.paddingRight || '';\n\n    // Get current padding if any\n    const currentPadding = parseInt(window.getComputedStyle(document.body).paddingRight, 10) || 0;\n\n    // Add padding to prevent content shift when scrollbar disappears\n    document.body.style.paddingRight = `${currentPadding + scrollbarWidth}px`;\n  }\n\n  // Lock scroll\n  document.body.style.overflow = 'hidden';\n  document.body.style.touchAction = 'none'; // Prevent touch scrolling on mobile\n};\n\n/**\n * Unlocks scrolling on the body element and restores original styles.\n * Uses stored data attributes from lockScroll to restore previous state.\n */\nexport const unlockScroll = (): void => {\n  // Restore original padding if it was set\n  if (document.body.dataset.originalPadding !== undefined) {\n    document.body.style.paddingRight = document.body.dataset.originalPadding;\n    delete document.body.dataset.originalPadding;\n  }\n\n  // Restore original overflow\n  if (document.body.dataset.originalOverflow !== undefined) {\n    document.body.style.overflow = document.body.dataset.originalOverflow;\n    delete document.body.dataset.originalOverflow;\n  } else {\n    document.body.style.overflow = '';\n  }\n\n  document.body.style.touchAction = '';\n};\n"],"names":["lockScroll","hasScrollbar","scrollbarWidth","currentPadding","unlockScroll"],"mappings":"AAIO,MAAMA,IAAa,MAAY;AAEpC,QAAMC,IAAe,OAAO,aAAa,SAAS,gBAAgB;AAKlE,MAFA,SAAS,KAAK,QAAQ,mBAAmB,SAAS,KAAK,MAAM,YAAY,IAErEA,GAAc;AAEhB,UAAMC,IAAiB,OAAO,aAAa,SAAS,gBAAgB;AAGpE,aAAS,KAAK,QAAQ,kBAAkB,SAAS,KAAK,MAAM,gBAAgB;AAGtE,UAAAC,IAAiB,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,cAAc,EAAE,KAAK;AAG5F,aAAS,KAAK,MAAM,eAAe,GAAGA,IAAiBD,CAAc;AAAA,EACvE;AAGS,WAAA,KAAK,MAAM,WAAW,UACtB,SAAA,KAAK,MAAM,cAAc;AACpC,GAMaE,IAAe,MAAY;AAEtC,EAAI,SAAS,KAAK,QAAQ,oBAAoB,WAC5C,SAAS,KAAK,MAAM,eAAe,SAAS,KAAK,QAAQ,iBAClD,OAAA,SAAS,KAAK,QAAQ,kBAI3B,SAAS,KAAK,QAAQ,qBAAqB,UAC7C,SAAS,KAAK,MAAM,WAAW,SAAS,KAAK,QAAQ,kBAC9C,OAAA,SAAS,KAAK,QAAQ,oBAEpB,SAAA,KAAK,MAAM,WAAW,IAGxB,SAAA,KAAK,MAAM,cAAc;AACpC;"}

package/dist/features/ui/modals/modal-provider.js

@@ -0,0 +1,48 @@
+import { jsxs as k, jsx as C } from "react/jsx-runtime";
+import { memo as E, useState as a, useCallback as M, useMemo as x, useEffect as u } from "react";
+import y from "./modal.js";
+import I from "./modal-context.js";
+import { lockScroll as S, unlockScroll as h } from "./modal-helpers.js";
+const D = 500, T = E(({ children: w, modals: d, isUserAuthenticated: t }) => {
+  const [o, c] = a(null), [f, v] = a(void 0), [s, r] = a(!1), m = M(
+    (n, l) => {
+      const i = d.find((P) => P.name === n);
+      if (!i)
+        throw new Error(`Modal with name "${n}" not found`);
+      if (i.isPrivate && !t)
+        throw new Error(
+          `Access violation: Modal "${n}" is private and user is not authenticated`
+        );
+      r(!1), c(i), v(l), S();
+    },
+    [t, d]
+  ), e = M(() => {
+    r(!0), h(), setTimeout(() => {
+      c(null), r(!1);
+    }, D);
+  }, []), p = x(
+    () => ({
+      modal: o,
+      modalParams: f,
+      openModal: m,
+      closeModal: e,
+      isClosing: s
+    }),
+    [o, f, m, e, s]
+  );
+  return u(() => {
+    !t && (o != null && o.isPrivate) && e();
+  }, [t, o, e]), u(() => {
+    const n = (l) => {
+      l.key === "Escape" && (o == null ? void 0 : o.isDismissable) !== !1 && !s && e();
+    };
+    return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
+  }, [o, e, s]), /* @__PURE__ */ k(I.Provider, { value: p, children: [
+    w,
+    o && /* @__PURE__ */ C(y, { modal: o, isClosing: s, onClose: e })
+  ] });
+}), O = T;
+export {
+  O as default
+};
+//# sourceMappingURL=modal-provider.js.map

package/dist/features/ui/modals/modal-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-provider.js","sources":["../../../../src/features/ui/modals/modal-provider.tsx"],"sourcesContent":["import type { IModal, IModalContext, IModalProviderProps } from './modal-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport Modal from './modal';\nimport ModalContext from './modal-context';\nimport { lockScroll, unlockScroll } from './modal-helpers';\n\nconst ANIMATION_DURATION_MS = 500; // Match the animation duration in modal.tsx\n\n/**\n * Provider component that manages modal state and provides modal context to child components\n */\nconst ModalProvider: FC<IModalProviderProps> = memo(({ children, modals, isUserAuthenticated }) => {\n  const [modal, setModal] = useState<IModal | null>(null);\n  const [modalParams, setModalParams] = useState<Record<string, unknown> | undefined>(undefined);\n  const [isClosing, setIsClosing] = useState(false);\n\n  /**\n   * Opens a modal by name with optional parameters\n   * Handles authentication check for private modals\n   */\n  const openModal = useCallback<IModalContext['openModal']>(\n    (modalName, newModalParams) => {\n      const newModal = modals.find(m => m.name === modalName);\n\n      if (!newModal) {\n        throw new Error(`Modal with name \"${modalName}\" not found`);\n      }\n\n      if (newModal.isPrivate && !isUserAuthenticated) {\n        throw new Error(\n          `Access violation: Modal \"${modalName}\" is private and user is not authenticated`,\n        );\n      }\n\n      setIsClosing(false);\n      setModal(newModal);\n      setModalParams(newModalParams as unknown as Record<string, unknown> | undefined);\n      lockScroll(); // Lock scroll while preserving scrollbar width\n    },\n    [isUserAuthenticated, modals],\n  );\n\n  const closeModal = useCallback(() => {\n    setIsClosing(true);\n    // Wait for the animation to complete before removing the modal\n    unlockScroll();\n    setTimeout(() => {\n      setModal(null);\n      setIsClosing(false);\n    }, ANIMATION_DURATION_MS);\n  }, []);\n\n  const modalContent = useMemo<IModalContext>(\n    () => ({\n      modal,\n      modalParams,\n      openModal,\n      closeModal,\n      isClosing,\n    }),\n    [modal, modalParams, openModal, closeModal, isClosing],\n  );\n\n  useEffect(() => {\n    if (!isUserAuthenticated && modal?.isPrivate) {\n      // If the modal is private and user is not authenticated, close it\n      closeModal();\n    }\n  }, [isUserAuthenticated, modal, closeModal]);\n\n  // Handle ESC key\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && modal?.isDismissable !== false && !isClosing) {\n        closeModal();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [modal, closeModal, isClosing]);\n\n  return (\n    <ModalContext.Provider value={modalContent}>\n      {children}\n      {modal && <Modal modal={modal} isClosing={isClosing} onClose={closeModal} />}\n    </ModalContext.Provider>\n  );\n});\n\nexport default ModalProvider;\n"],"names":["ANIMATION_DURATION_MS","ModalProvider","memo","children","modals","isUserAuthenticated","modal","setModal","useState","modalParams","setModalParams","isClosing","setIsClosing","openModal","useCallback","modalName","newModalParams","newModal","m","lockScroll","closeModal","unlockScroll","modalContent","useMemo","useEffect","handleKeyDown","e","jsxs","ModalContext","jsx","Modal","ModalProvider$1"],"mappings":";;;;;AASA,MAAMA,IAAwB,KAKxBC,IAAyCC,EAAK,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,qBAAAC,QAA0B;AACjG,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAwB,IAAI,GAChD,CAACC,GAAaC,CAAc,IAAIF,EAA8C,MAAS,GACvF,CAACG,GAAWC,CAAY,IAAIJ,EAAS,EAAK,GAM1CK,IAAYC;AAAA,IAChB,CAACC,GAAWC,MAAmB;AAC7B,YAAMC,IAAWb,EAAO,KAAK,CAAKc,MAAAA,EAAE,SAASH,CAAS;AAEtD,UAAI,CAACE;AACH,cAAM,IAAI,MAAM,oBAAoBF,CAAS,aAAa;AAGxD,UAAAE,EAAS,aAAa,CAACZ;AACzB,cAAM,IAAI;AAAA,UACR,4BAA4BU,CAAS;AAAA,QAAA;AAIzC,MAAAH,EAAa,EAAK,GAClBL,EAASU,CAAQ,GACjBP,EAAeM,CAAgE,GACpEG;IACb;AAAA,IACA,CAACd,GAAqBD,CAAM;AAAA,EAAA,GAGxBgB,IAAaN,EAAY,MAAM;AACnC,IAAAF,EAAa,EAAI,GAEJS,KACb,WAAW,MAAM;AACf,MAAAd,EAAS,IAAI,GACbK,EAAa,EAAK;AAAA,OACjBZ,CAAqB;AAAA,EAC1B,GAAG,CAAE,CAAA,GAECsB,IAAeC;AAAA,IACnB,OAAO;AAAA,MACL,OAAAjB;AAAA,MACA,aAAAG;AAAA,MACA,WAAAI;AAAA,MACA,YAAAO;AAAA,MACA,WAAAT;AAAA,IAAA;AAAA,IAEF,CAACL,GAAOG,GAAaI,GAAWO,GAAYT,CAAS;AAAA,EAAA;AAGvD,SAAAa,EAAU,MAAM;AACV,IAAA,CAACnB,MAAuBC,KAAA,QAAAA,EAAO,cAEtBc;EAEZ,GAAA,CAACf,GAAqBC,GAAOc,CAAU,CAAC,GAG3CI,EAAU,MAAM;AACR,UAAAC,IAAgB,CAACC,MAAqB;AAC1C,MAAIA,EAAE,QAAQ,aAAYpB,KAAA,gBAAAA,EAAO,mBAAkB,MAAS,CAACK,KAChDS;IACb;AAGK,kBAAA,iBAAiB,WAAWK,CAAa,GAEzC,MAAM,OAAO,oBAAoB,WAAWA,CAAa;AAAA,EAC/D,GAAA,CAACnB,GAAOc,GAAYT,CAAS,CAAC,GAG9B,gBAAAgB,EAAAC,EAAa,UAAb,EAAsB,OAAON,GAC3B,UAAA;AAAA,IAAAnB;AAAA,IACAG,KAAU,gBAAAuB,EAAAC,GAAA,EAAM,OAAAxB,GAAc,WAAAK,GAAsB,SAASS,GAAY;AAAA,EAC5E,EAAA,CAAA;AAEJ,CAAC,GAEDW,IAAe9B;"}

package/dist/features/ui/modals/modal-styled.js

@@ -0,0 +1,154 @@
+import o from "styled-components";
+const s = o.div(
+  ({ theme: { colors: a }, $isClosing: t }) => `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: ${a.BLACK_T_60};
+  backdrop-filter: blur(40px);
+  display: flex;
+  animation: ${t ? "backdropFadeOut" : "backdropFadeIn"} 0.2s ease-out forwards;
+  
+  @keyframes backdropFadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes backdropFadeOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+`
+), l = o.div(
+  ({ theme: { colors: a }, $isClosing: t, $width: i }) => `
+  position: relative;
+  align-self: center;
+  margin: 0 auto;
+  width: ${i};
+  background-color: ${a.WHITE_1};
+  border: 1px solid ${a.BLACK_1};
+  transform-origin: center center;
+  animation: ${t ? "modalDisappear" : "modalAppear"} 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
+  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);
+  
+  /* Responsive behavior for smaller screens */
+  @media (max-width: calc(${i} + 80px)) {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    border: none;
+  }
+  
+  @keyframes modalAppear {
+    0% {
+      opacity: 0;
+      transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);
+    }
+    100% {
+      opacity: 1;
+      transform: perspective(1200px) translateZ(0) translateY(0) scale(1);
+    }
+  }
+  
+  @keyframes modalDisappear {
+    0% {
+      opacity: 1;
+      transform: perspective(1200px) translateZ(0) translateY(0) scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);
+    }
+  }
+`
+), c = o.div(
+  ({ $modalWidth: a }) => `
+  max-height: calc(100vh - 142px);
+  overflow-y: auto;
+
+  @media (max-width: calc(${a} + 80px)) {
+    max-height: 100vh;
+  }
+}`
+), m = o.div(
+  ({ theme: { colors: a }, $modalWidth: t }) => `
+  position: absolute;
+  top: -56px;
+  right: -40px;
+  color: ${a.WHITE_1};
+  transition: all 0.2s ease;
+  
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  @media (max-width: calc(${t} + 80px)) {
+    top: 16px;
+    right: 16px;
+    color: ${a.BLACK_1};
+  }
+`
+), e = 720, r = 800, n = 500, d = o.div(
+  ({ $isClosing: a }) => `
+  position: absolute;
+  width: ${e}px;
+  height: 100%;
+  left: 50%;
+  margin-left: ${-(e / 2)}px;
+  clip-path: polygon(calc(50% - 100px) 0, calc(50% + 100px) 0, 100% 100%, 0 100%);
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  animation: openSpotlight;
+  animation-duration: ${r}ms;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+  opacity: 0;
+  ${a ? `
+      animation: closeSpotlight;
+      animation-duration: ${n}ms;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
+      opacity: 1;
+    ` : ""}
+
+  @keyframes openSpotlight {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes closeSpotlight {
+    from {
+      transform: rotateY(0);
+    }
+    to {
+      transform: rotateY(90deg);
+    }
+  }
+`
+);
+export {
+  l as BaseModal,
+  c as BaseModalContent,
+  m as CloseButtonContainer,
+  s as ModalContainer,
+  d as SpotlightModal
+};
+//# sourceMappingURL=modal-styled.js.map

package/dist/features/ui/modals/modal-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-styled.js","sources":["../../../../src/features/ui/modals/modal-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nconst ModalContainer = styled.div<{ $isClosing?: boolean }>(\n  ({ theme: { colors }, $isClosing }) => `\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ${colors.BLACK_T_60};\n  backdrop-filter: blur(40px);\n  display: flex;\n  animation: ${$isClosing ? 'backdropFadeOut' : 'backdropFadeIn'} 0.2s ease-out forwards;\n  \n  @keyframes backdropFadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  \n  @keyframes backdropFadeOut {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n`,\n);\n\n/**\n * Base modal container with customizable width and animation state\n */\nconst BaseModal = styled.div<{\n  $isClosing?: boolean;\n  $width: string;\n}>(\n  ({ theme: { colors }, $isClosing, $width }) => `\n  position: relative;\n  align-self: center;\n  margin: 0 auto;\n  width: ${$width};\n  background-color: ${colors.WHITE_1};\n  border: 1px solid ${colors.BLACK_1};\n  transform-origin: center center;\n  animation: ${\n    $isClosing ? 'modalDisappear' : 'modalAppear'\n  } 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;\n  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);\n  \n  /* Responsive behavior for smaller screens */\n  @media (max-width: calc(${$width} + 80px)) {\n    width: 100%;\n    max-width: 100%;\n    height: 100%;\n    max-height: 100%;\n    border: none;\n  }\n  \n  @keyframes modalAppear {\n    0% {\n      opacity: 0;\n      transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n    }\n    100% {\n      opacity: 1;\n      transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n    }\n  }\n  \n  @keyframes modalDisappear {\n    0% {\n      opacity: 1;\n      transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n    }\n    100% {\n      opacity: 0;\n      transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n    }\n  }\n`,\n);\n\n/**\n * Scrollable content container inside the modal\n */\nconst BaseModalContent = styled.div<{ $modalWidth: string }>(\n  ({ $modalWidth }) => `\n  max-height: calc(100vh - 142px);\n  overflow-y: auto;\n\n  @media (max-width: calc(${$modalWidth} + 80px)) {\n    max-height: 100vh;\n  }\n}`,\n);\n\n/**\n * Container for the close button with responsive positioning\n */\nconst CloseButtonContainer = styled.div<{ $modalWidth: string }>(\n  ({ theme: { colors }, $modalWidth }) => `\n  position: absolute;\n  top: -56px;\n  right: -40px;\n  color: ${colors.WHITE_1};\n  transition: all 0.2s ease;\n  \n  &:hover {\n    transform: scale(1.05);\n  }\n\n  @media (max-width: calc(${$modalWidth} + 80px)) {\n    top: 16px;\n    right: 16px;\n    color: ${colors.BLACK_1};\n  }\n`,\n);\n\nconst spotlightWidth = 720;\nconst spotlightAnimationStartDuration = 800;\nconst spotlightAnimationEndDuration = 500;\n\nconst SpotlightModal = styled.div<{\n  $isClosing?: boolean;\n}>(\n  ({ $isClosing }) => `\n  position: absolute;\n  width: ${spotlightWidth}px;\n  height: 100%;\n  left: 50%;\n  margin-left: ${-(spotlightWidth / 2)}px;\n  clip-path: polygon(calc(50% - 100px) 0, calc(50% + 100px) 0, 100% 100%, 0 100%);\n  background: linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 1) 0%,\n    rgba(0, 0, 0, 0) 100%\n  );\n  animation: openSpotlight;\n  animation-duration: ${spotlightAnimationStartDuration}ms;\n  animation-timing-function: linear;\n  animation-fill-mode: forwards;\n  opacity: 0;\n  ${\n    $isClosing\n      ? `\n      animation: closeSpotlight;\n      animation-duration: ${spotlightAnimationEndDuration}ms;\n      animation-timing-function: linear;\n      animation-fill-mode: forwards;\n      opacity: 1;\n    `\n      : ''\n  }\n\n  @keyframes openSpotlight {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes closeSpotlight {\n    from {\n      transform: rotateY(0);\n    }\n    to {\n      transform: rotateY(90deg);\n    }\n  }\n`,\n);\n\nexport { ModalContainer, BaseModal, BaseModalContent, CloseButtonContainer, SpotlightModal };\n"],"names":["ModalContainer","styled","colors","$isClosing","BaseModal","$width","BaseModalContent","$modalWidth","CloseButtonContainer","spotlightWidth","spotlightAnimationStartDuration","spotlightAnimationEndDuration","SpotlightModal"],"mappings":";AAEA,MAAMA,IAAiBC,EAAO;AAAA,EAC5B,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAO,GAAG,YAAAC,EAAiB,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMnBD,EAAO,UAAU;AAAA;AAAA;AAAA,eAGxBC,IAAa,oBAAoB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBhE,GAKMC,IAAYH,EAAO;AAAA,EAIvB,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAU,GAAA,YAAAC,GAAY,QAAAE,QAAa;AAAA;AAAA;AAAA;AAAA,WAItCA,CAAM;AAAA,sBACKH,EAAO,OAAO;AAAA,sBACdA,EAAO,OAAO;AAAA;AAAA,eAGhCC,IAAa,mBAAmB,aAClC;AAAA;AAAA;AAAA;AAAA,4BAI0BE,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BlC,GAKMC,IAAmBL,EAAO;AAAA,EAC9B,CAAC,EAAE,aAAAM,EAAA,MAAkB;AAAA;AAAA;AAAA;AAAA,4BAIKA,CAAW;AAAA;AAAA;AAAA;AAIvC,GAKMC,IAAuBP,EAAO;AAAA,EAClC,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAO,GAAG,aAAAK,EAAkB,MAAA;AAAA;AAAA;AAAA;AAAA,WAI/BL,EAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOGK,CAAW;AAAA;AAAA;AAAA,aAG1BL,EAAO,OAAO;AAAA;AAAA;AAG3B,GAEMO,IAAiB,KACjBC,IAAkC,KAClCC,IAAgC,KAEhCC,IAAiBX,EAAO;AAAA,EAG5B,CAAC,EAAE,YAAAE,EAAA,MAAiB;AAAA;AAAA,WAEXM,CAAc;AAAA;AAAA;AAAA,iBAGR,EAAEA,IAAiB,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQdC,CAA+B;AAAA;AAAA;AAAA;AAAA,IAKnDP,IACI;AAAA;AAAA,4BAEoBQ,CAA6B;AAAA;AAAA;AAAA;AAAA,QAKjD,EACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBF;"}

package/dist/features/ui/modals/modal.js

@@ -0,0 +1,19 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { memo as m } from "react";
+import h from "../../../assets/line-icons/icons/cross.js";
+import c from "../buttons/clickable/clickable.js";
+import { ModalContainer as r, SpotlightModal as f, BaseModal as C, CloseButtonContainer as p, BaseModalContent as $ } from "./modal-styled.js";
+const B = m(({ modal: n, isClosing: e = !1, onClose: s }) => {
+  const { renderAs: d, element: l, modalWidth: i, isDismissable: a } = n;
+  return d === "spotlight" ? /* @__PURE__ */ t(r, { $isClosing: e, children: [
+    /* @__PURE__ */ o(f, { $isClosing: e }),
+    l
+  ] }) : /* @__PURE__ */ o(r, { $isClosing: e, children: /* @__PURE__ */ t(C, { $isClosing: e, $width: i, children: [
+    a !== !1 && /* @__PURE__ */ o(p, { $modalWidth: i, children: /* @__PURE__ */ o(c, { label: "Close", onClick: s, children: /* @__PURE__ */ o(h, { width: 40, height: 40 }) }) }),
+    /* @__PURE__ */ o($, { $modalWidth: i, children: l })
+  ] }) });
+});
+export {
+  B as default
+};
+//# sourceMappingURL=modal.js.map

package/dist/features/ui/modals/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sources":["../../../../src/features/ui/modals/modal.tsx"],"sourcesContent":["import type { IModalProps } from './modal-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport Clickable from '../buttons/clickable/clickable';\nimport * as Styled from './modal-styled';\n\n/**\n * Modal component that renders modal content with close button\n * Handles animation state for entry and exit transitions\n */\nconst Modal: FC<IModalProps> = memo(({ modal, isClosing = false, onClose }) => {\n  const { renderAs, element, modalWidth, isDismissable } = modal;\n\n  if (renderAs === 'spotlight') {\n    return (\n      <Styled.ModalContainer $isClosing={isClosing}>\n        <Styled.SpotlightModal $isClosing={isClosing} />\n        {element}\n      </Styled.ModalContainer>\n    );\n  }\n\n  return (\n    <Styled.ModalContainer $isClosing={isClosing}>\n      <Styled.BaseModal $isClosing={isClosing} $width={modalWidth}>\n        {isDismissable !== false && (\n          <Styled.CloseButtonContainer $modalWidth={modalWidth}>\n            <Clickable label=\"Close\" onClick={onClose}>\n              <CrossIcon width={40} height={40} />\n            </Clickable>\n          </Styled.CloseButtonContainer>\n        )}\n        <Styled.BaseModalContent $modalWidth={modalWidth}>{element}</Styled.BaseModalContent>\n      </Styled.BaseModal>\n    </Styled.ModalContainer>\n  );\n});\n\nexport default Modal;\n"],"names":["Modal","memo","modal","isClosing","onClose","renderAs","element","modalWidth","isDismissable","jsxs","Styled.ModalContainer","jsx","Styled.SpotlightModal","Styled.BaseModal","Styled.CloseButtonContainer","Clickable","CrossIcon","Styled.BaseModalContent"],"mappings":";;;;;AAaM,MAAAA,IAAyBC,EAAK,CAAC,EAAE,OAAAC,GAAO,WAAAC,IAAY,IAAO,SAAAC,QAAc;AAC7E,QAAM,EAAE,UAAAC,GAAU,SAAAC,GAAS,YAAAC,GAAY,eAAAC,MAAkBN;AAEzD,SAAIG,MAAa,cAEZ,gBAAAI,EAAAC,GAAA,EAAsB,YAAYP,GACjC,UAAA;AAAA,IAAA,gBAAAQ,EAACC,GAAA,EAAsB,YAAYT,EAAW,CAAA;AAAA,IAC7CG;AAAA,EACH,EAAA,CAAA,IAKD,gBAAAK,EAAAD,GAAA,EAAsB,YAAYP,GACjC,UAAC,gBAAAM,EAAAI,GAAA,EAAiB,YAAYV,GAAW,QAAQI,GAC9C,UAAA;AAAA,IAAkBC,MAAA,wBAChBM,GAAA,EAA4B,aAAaP,GACxC,4BAACQ,GAAU,EAAA,OAAM,SAAQ,SAASX,GAChC,4BAACY,GAAU,EAAA,OAAO,IAAI,QAAQ,IAAI,GACpC,EACF,CAAA;AAAA,sBAEDC,GAAA,EAAwB,aAAaV,GAAa,UAAQD,GAAA;AAAA,EAAA,EAC7D,CAAA,EACF,CAAA;AAEJ,CAAC;"}

package/dist/features/ui/modals/use-modal-actions.js

@@ -0,0 +1,10 @@
+import { useContext as e } from "react";
+import n from "./modal-context.js";
+const l = () => {
+  const { openModal: o, closeModal: t, isClosing: s } = e(n);
+  return { openModal: o, closeModal: t, isClosing: s };
+}, c = l;
+export {
+  c as default
+};
+//# sourceMappingURL=use-modal-actions.js.map