@cuemath/leap 3.1.5-beta-0.1 → 3.1.5

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;"}

package/dist/features/worksheet/worksheet/worksheet-container.js

@@ -1,25 +1,25 @@
 import { jsx as f } from "react/jsx-runtime";
 import { memo as W, forwardRef as S, useCallback as q, useEffect as m } from "react";
-import L from "../../cue-canvas/cue-canvas-provider.js";
-import v from "../constants/events.js";
-import I from "./hooks/use-learnosity.js";
-import T from "./hooks/use-worksheet-data-helper.js";
-import w from "./worksheet.js";
-const x = (u, l) => {
+import v from "../../cue-canvas/cue-canvas-provider.js";
+import L from "../constants/events.js";
+import A from "./hooks/use-learnosity.js";
+import I from "./hooks/use-worksheet-data-helper.js";
+import T from "./worksheet.js";
+const w = (u, l) => {
   const {
     attemptId: R,
     itemsSignedRequest: g,
-    questionsSignedRequest: p,
+    questionsSignedRequest: c,
     onLoaded: r,
     onErrored: t,
     onResponsesLoaded: a,
-    loggerRef: o,
-    userType: c,
+    loggerRef: s,
+    userType: d,
     ...E
-  } = u, { loadingState: s, learnosityActivityRef: h, data: e, error: d } = T({
+  } = u, { loadingState: o, learnosityActivityRef: h, data: e, error: p } = I({
     attemptId: R,
     signedRequest: g,
-    loggerRef: o
+    loggerRef: s
   }), y = q(
     (i) => {
       t({
@@ -28,39 +28,39 @@ const x = (u, l) => {
       });
     },
     [t]
-  ), { learnosity: n, appendedQuestionIds: k } = I(
-    p,
+  ), { learnosity: n, appendedQuestionIds: k } = A(
+    c,
     y,
-    o
+    s
   );
   if (m(() => {
-    s === "error" && t({
-      message: d ?? "Error loading worksheet"
+    o === "error" && t({
+      message: p ?? "Error loading worksheet"
     });
-  }, [s, d, r, t]), m(() => {
-    n && s === "success" && r && (o.current(v.WORKSHEET_V3_READY), r());
-  }, [n, s, o, r]), m(() => {
+  }, [o, p, r, t]), m(() => {
+    n && o === "success" && r && (s.current(L.WORKSHEET_V3_READY), r());
+  }, [n, o, s, r]), m(() => {
     e != null && e.responses && a && a(e.responses ?? {});
-  }, [e == null ? void 0 : e.responses, a]), s === "success" && e && n) {
+  }, [e == null ? void 0 : e.responses, a]), o === "success" && e && n) {
     const { learnosityItems: i, responses: C } = e;
-    return /* @__PURE__ */ f(L, { userType: c, children: /* @__PURE__ */ f(
-      w,
+    return /* @__PURE__ */ f(v, { userType: d, renderAs: "canvas", children: /* @__PURE__ */ f(
+      T,
       {
         ref: l,
-        questionsSignedRequest: p,
+        questionsSignedRequest: c,
         learnosity: n,
         appendedQuestionIds: k,
         learnosityActivityRef: h,
         learnosityItems: i,
         learnosityResponses: C,
-        loggerRef: o,
-        userType: c,
+        loggerRef: s,
+        userType: d,
         ...E
       }
     ) });
   }
   return null;
-}, A = W(S(x)), N = A;
+}, x = W(S(w)), N = x;
 export {
   N as default
 };

package/dist/features/worksheet/worksheet/worksheet-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"worksheet-container.js","sources":["../../../../src/features/worksheet/worksheet/worksheet-container.tsx"],"sourcesContent":["import type { IWorksheetRef } from './worksheet-types';\nimport type { ForwardRefRenderFunction } from 'react';\n\nimport { forwardRef, memo, useCallback, useEffect } from 'react';\n\nimport CueCanvasProvider from '../../cue-canvas/cue-canvas-provider';\nimport EVENTS from '../constants/events';\nimport useLearnosity from './hooks/use-learnosity';\nimport useWorksheetDataHelper from './hooks/use-worksheet-data-helper';\nimport Worksheet from './worksheet';\nimport { type ILearnosityError, type IWorksheetContainerProps } from './worksheet-types';\n\nconst WorksheetContainerComp: ForwardRefRenderFunction<IWorksheetRef, IWorksheetContainerProps> = (\n  props,\n  ref,\n) => {\n  const {\n    attemptId,\n    itemsSignedRequest,\n    questionsSignedRequest,\n    onLoaded,\n    onErrored,\n    onResponsesLoaded,\n    loggerRef,\n    userType,\n    ...other\n  } = props;\n\n  const { loadingState, learnosityActivityRef, data, error } = useWorksheetDataHelper({\n    attemptId,\n    signedRequest: itemsSignedRequest,\n    loggerRef,\n  });\n\n  const onLearnosityErrored = useCallback(\n    (err: ILearnosityError) => {\n      onErrored({\n        code: err.code,\n        message: err.detail,\n      });\n    },\n    [onErrored],\n  );\n\n  const { learnosity, appendedQuestionIds } = useLearnosity(\n    questionsSignedRequest,\n    onLearnosityErrored,\n    loggerRef,\n  );\n\n  useEffect(() => {\n    if (loadingState === 'error') {\n      onErrored({\n        message: error ?? 'Error loading worksheet',\n      });\n    }\n  }, [loadingState, error, onLoaded, onErrored]);\n\n  useEffect(() => {\n    if (learnosity && loadingState === 'success' && onLoaded) {\n      loggerRef.current(EVENTS.WORKSHEET_V3_READY);\n      onLoaded();\n    }\n  }, [learnosity, loadingState, loggerRef, onLoaded]);\n\n  useEffect(() => {\n    if (data?.responses && onResponsesLoaded) {\n      onResponsesLoaded(data.responses ?? {});\n    }\n  }, [data?.responses, onResponsesLoaded]);\n\n  if (loadingState === 'success' && data && learnosity) {\n    const { learnosityItems, responses } = data;\n\n    return (\n      <CueCanvasProvider userType={userType}>\n        <Worksheet\n          ref={ref}\n          questionsSignedRequest={questionsSignedRequest}\n          learnosity={learnosity}\n          appendedQuestionIds={appendedQuestionIds}\n          learnosityActivityRef={learnosityActivityRef}\n          learnosityItems={learnosityItems}\n          learnosityResponses={responses}\n          loggerRef={loggerRef}\n          userType={userType}\n          {...other}\n        />\n      </CueCanvasProvider>\n    );\n  }\n\n  return null;\n};\n\nconst WorksheetContainer = memo(forwardRef(WorksheetContainerComp));\n\nexport default WorksheetContainer;\n"],"names":["WorksheetContainerComp","props","ref","attemptId","itemsSignedRequest","questionsSignedRequest","onLoaded","onErrored","onResponsesLoaded","loggerRef","userType","other","loadingState","learnosityActivityRef","data","error","useWorksheetDataHelper","onLearnosityErrored","useCallback","err","learnosity","appendedQuestionIds","useLearnosity","useEffect","EVENTS","learnosityItems","responses","jsx","CueCanvasProvider","Worksheet","WorksheetContainer","memo","forwardRef","WorksheetContainer$1"],"mappings":";;;;;;;AAYA,MAAMA,IAA4F,CAChGC,GACAC,MACG;AACG,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAV,GAEE,EAAE,cAAAW,GAAc,uBAAAC,GAAuB,MAAAC,GAAM,OAAAC,EAAA,IAAUC,EAAuB;AAAA,IAClF,WAAAb;AAAA,IACA,eAAeC;AAAA,IACf,WAAAK;AAAA,EAAA,CACD,GAEKQ,IAAsBC;AAAA,IAC1B,CAACC,MAA0B;AACf,MAAAZ,EAAA;AAAA,QACR,MAAMY,EAAI;AAAA,QACV,SAASA,EAAI;AAAA,MAAA,CACd;AAAA,IACH;AAAA,IACA,CAACZ,CAAS;AAAA,EAAA,GAGN,EAAE,YAAAa,GAAY,qBAAAC,EAAA,IAAwBC;AAAA,IAC1CjB;AAAA,IACAY;AAAA,IACAR;AAAA,EAAA;AAwBE,MArBJc,EAAU,MAAM;AACd,IAAIX,MAAiB,WACTL,EAAA;AAAA,MACR,SAASQ,KAAS;AAAA,IAAA,CACnB;AAAA,KAEF,CAACH,GAAcG,GAAOT,GAAUC,CAAS,CAAC,GAE7CgB,EAAU,MAAM;AACV,IAAAH,KAAcR,MAAiB,aAAaN,MACpCG,EAAA,QAAQe,EAAO,kBAAkB,GAClClB;KAEV,CAACc,GAAYR,GAAcH,GAAWH,CAAQ,CAAC,GAElDiB,EAAU,MAAM;AACV,IAAAT,KAAA,QAAAA,EAAM,aAAaN,KACHA,EAAAM,EAAK,aAAa,CAAA,CAAE;AAAA,EAEvC,GAAA,CAACA,KAAA,gBAAAA,EAAM,WAAWN,CAAiB,CAAC,GAEnCI,MAAiB,aAAaE,KAAQM,GAAY;AAC9C,UAAA,EAAE,iBAAAK,GAAiB,WAAAC,EAAc,IAAAZ;AAGrC,WAAA,gBAAAa,EAACC,KAAkB,UAAAlB,GACjB,UAAA,gBAAAiB;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,KAAA3B;AAAA,QACA,wBAAAG;AAAA,QACA,YAAAe;AAAA,QACA,qBAAAC;AAAA,QACA,uBAAAR;AAAA,QACA,iBAAAY;AAAA,QACA,qBAAqBC;AAAA,QACrB,WAAAjB;AAAA,QACA,UAAAC;AAAA,QACC,GAAGC;AAAA,MAAA;AAAA,IAER,EAAA,CAAA;AAAA,EAEJ;AAEO,SAAA;AACT,GAEMmB,IAAqBC,EAAKC,EAAWhC,CAAsB,CAAC,GAElEiC,IAAeH;"}
+{"version":3,"file":"worksheet-container.js","sources":["../../../../src/features/worksheet/worksheet/worksheet-container.tsx"],"sourcesContent":["import type { IWorksheetRef } from './worksheet-types';\nimport type { ForwardRefRenderFunction } from 'react';\n\nimport { forwardRef, memo, useCallback, useEffect } from 'react';\n\nimport CueCanvasProvider from '../../cue-canvas/cue-canvas-provider';\nimport EVENTS from '../constants/events';\nimport useLearnosity from './hooks/use-learnosity';\nimport useWorksheetDataHelper from './hooks/use-worksheet-data-helper';\nimport Worksheet from './worksheet';\nimport { type ILearnosityError, type IWorksheetContainerProps } from './worksheet-types';\n\nconst WorksheetContainerComp: ForwardRefRenderFunction<IWorksheetRef, IWorksheetContainerProps> = (\n  props,\n  ref,\n) => {\n  const {\n    attemptId,\n    itemsSignedRequest,\n    questionsSignedRequest,\n    onLoaded,\n    onErrored,\n    onResponsesLoaded,\n    loggerRef,\n    userType,\n    ...other\n  } = props;\n\n  const { loadingState, learnosityActivityRef, data, error } = useWorksheetDataHelper({\n    attemptId,\n    signedRequest: itemsSignedRequest,\n    loggerRef,\n  });\n\n  const onLearnosityErrored = useCallback(\n    (err: ILearnosityError) => {\n      onErrored({\n        code: err.code,\n        message: err.detail,\n      });\n    },\n    [onErrored],\n  );\n\n  const { learnosity, appendedQuestionIds } = useLearnosity(\n    questionsSignedRequest,\n    onLearnosityErrored,\n    loggerRef,\n  );\n\n  useEffect(() => {\n    if (loadingState === 'error') {\n      onErrored({\n        message: error ?? 'Error loading worksheet',\n      });\n    }\n  }, [loadingState, error, onLoaded, onErrored]);\n\n  useEffect(() => {\n    if (learnosity && loadingState === 'success' && onLoaded) {\n      loggerRef.current(EVENTS.WORKSHEET_V3_READY);\n      onLoaded();\n    }\n  }, [learnosity, loadingState, loggerRef, onLoaded]);\n\n  useEffect(() => {\n    if (data?.responses && onResponsesLoaded) {\n      onResponsesLoaded(data.responses ?? {});\n    }\n  }, [data?.responses, onResponsesLoaded]);\n\n  if (loadingState === 'success' && data && learnosity) {\n    const { learnosityItems, responses } = data;\n\n    return (\n      <CueCanvasProvider userType={userType} renderAs=\"canvas\">\n        <Worksheet\n          ref={ref}\n          questionsSignedRequest={questionsSignedRequest}\n          learnosity={learnosity}\n          appendedQuestionIds={appendedQuestionIds}\n          learnosityActivityRef={learnosityActivityRef}\n          learnosityItems={learnosityItems}\n          learnosityResponses={responses}\n          loggerRef={loggerRef}\n          userType={userType}\n          {...other}\n        />\n      </CueCanvasProvider>\n    );\n  }\n\n  return null;\n};\n\nconst WorksheetContainer = memo(forwardRef(WorksheetContainerComp));\n\nexport default WorksheetContainer;\n"],"names":["WorksheetContainerComp","props","ref","attemptId","itemsSignedRequest","questionsSignedRequest","onLoaded","onErrored","onResponsesLoaded","loggerRef","userType","other","loadingState","learnosityActivityRef","data","error","useWorksheetDataHelper","onLearnosityErrored","useCallback","err","learnosity","appendedQuestionIds","useLearnosity","useEffect","EVENTS","learnosityItems","responses","jsx","CueCanvasProvider","Worksheet","WorksheetContainer","memo","forwardRef","WorksheetContainer$1"],"mappings":";;;;;;;AAYA,MAAMA,IAA4F,CAChGC,GACAC,MACG;AACG,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAV,GAEE,EAAE,cAAAW,GAAc,uBAAAC,GAAuB,MAAAC,GAAM,OAAAC,EAAA,IAAUC,EAAuB;AAAA,IAClF,WAAAb;AAAA,IACA,eAAeC;AAAA,IACf,WAAAK;AAAA,EAAA,CACD,GAEKQ,IAAsBC;AAAA,IAC1B,CAACC,MAA0B;AACf,MAAAZ,EAAA;AAAA,QACR,MAAMY,EAAI;AAAA,QACV,SAASA,EAAI;AAAA,MAAA,CACd;AAAA,IACH;AAAA,IACA,CAACZ,CAAS;AAAA,EAAA,GAGN,EAAE,YAAAa,GAAY,qBAAAC,EAAA,IAAwBC;AAAA,IAC1CjB;AAAA,IACAY;AAAA,IACAR;AAAA,EAAA;AAwBE,MArBJc,EAAU,MAAM;AACd,IAAIX,MAAiB,WACTL,EAAA;AAAA,MACR,SAASQ,KAAS;AAAA,IAAA,CACnB;AAAA,KAEF,CAACH,GAAcG,GAAOT,GAAUC,CAAS,CAAC,GAE7CgB,EAAU,MAAM;AACV,IAAAH,KAAcR,MAAiB,aAAaN,MACpCG,EAAA,QAAQe,EAAO,kBAAkB,GAClClB;KAEV,CAACc,GAAYR,GAAcH,GAAWH,CAAQ,CAAC,GAElDiB,EAAU,MAAM;AACV,IAAAT,KAAA,QAAAA,EAAM,aAAaN,KACHA,EAAAM,EAAK,aAAa,CAAA,CAAE;AAAA,EAEvC,GAAA,CAACA,KAAA,gBAAAA,EAAM,WAAWN,CAAiB,CAAC,GAEnCI,MAAiB,aAAaE,KAAQM,GAAY;AAC9C,UAAA,EAAE,iBAAAK,GAAiB,WAAAC,EAAc,IAAAZ;AAEvC,WACG,gBAAAa,EAAAC,GAAA,EAAkB,UAAAlB,GAAoB,UAAS,UAC9C,UAAA,gBAAAiB;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,KAAA3B;AAAA,QACA,wBAAAG;AAAA,QACA,YAAAe;AAAA,QACA,qBAAAC;AAAA,QACA,uBAAAR;AAAA,QACA,iBAAAY;AAAA,QACA,qBAAqBC;AAAA,QACrB,WAAAjB;AAAA,QACA,UAAAC;AAAA,QACC,GAAGC;AAAA,MAAA;AAAA,IAER,EAAA,CAAA;AAAA,EAEJ;AAEO,SAAA;AACT,GAEMmB,IAAqBC,EAAKC,EAAWhC,CAAsB,CAAC,GAElEiC,IAAeH;"}

package/dist/index.d.ts

@@ -299,6 +299,7 @@ export declare const CueCanvasHomeworkController: NamedExoticComponent<IHomeWork
 
 export declare const CueCanvasProvider: FC<PropsWithChildren<{
     userType: TUserTypes;
+    renderAs: TRenderAs_2;
 }>>;
 
 export declare const CueCanvasSideBar: NamedExoticComponent<ISidebar>;

package/dist/static/lib/{polypad-4.5.4.js → polypad-4.5.4.v1.js}

@@ -16275,7 +16275,14 @@ Polypad API v4.5.4, (c) Mathigon
       erase(t) {
         for (const i of this.$parent.tiles.values())
           if (
-            !(!i.transformed || i.cannotDragToSelect || !i.canSelect || i.cannotEdit || ne(i)) &&
+            !(
+              !i.transformed ||
+              i.cannotDragToSelect ||
+              !i.canSelect ||
+              i.cannotEdit ||
+              ne(i) ||
+              i.props.cannotEdit
+            ) &&
             this.shouldErase(t, i.transformed, i.props.name)
           ) {
             i.delete(), this.erased.push(i);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.1.5-beta-0.1",
+  "version": "3.1.5",
   "type": "module",
   "files": [
     "dist"