@cuemath/leap 2.8.49 → 2.8.50-as2

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

@@ -1 +1 @@
-{"version":3,"file":"cue-cavas-styled.js","sources":["../../../src/features/cue-canvas/cue-cavas-styled.tsx"],"sourcesContent":["import type { ICueCanvasWrappper, TCueCanvasColors } from './types/cue-canvas';\n\nimport styled, { css } from 'styled-components';\n\nimport TickIcon from '../../assets/line-icons/icons/check';\nimport HighlighterIcon from '../../assets/line-icons/icons/highlighter';\nimport PencilIcon from '../../assets/line-icons/icons/pencil';\nimport RulerIcon from '../../assets/line-icons/icons/ruler';\nimport SketchIcon from '../../assets/line-icons/icons/sketch';\nimport FlexView from '../ui/layout/flex-view';\nimport { CANVAS_COLORS } from './constants/constants';\n\ninterface IToolProps {\n  $active: boolean;\n  $activeColor: TCueCanvasColors;\n}\n\nexport const StyledPencilIcon = styled(PencilIcon)<IToolProps>(({\n  theme,\n  $active,\n  $activeColor,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active ? '0px' : '8px'};\n    cursor: ${$active ? 'auto' : 'pointer'};\n    .pencil-dark-shade {\n      fill: ${$active ? color : colors.GREY_3};\n    }\n\n    .pencil-light-shade {\n      fill: ${$active ? color : colors.GREY_2};\n      opacity: ${$active ? 0.3 : 1};\n    }\n\n    ${!$active &&\n    css`\n      &:hover {\n        .pencil-dark-shade {\n          fill: ${colors.GREY_4};\n        }\n        .pencil-light-shade {\n          fill: ${colors.GREY_2};\n        }\n      }\n    `}\n  `;\n});\n\nexport const StyledRulerIcon = styled(RulerIcon)<IToolProps>(({ theme, $active, $activeColor }) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active ? '0px' : '8px'};\n\n    .ruler-rect-color {\n      fill: ${$active ? color : colors.GREY_3};\n    }\n\n    .ruler-stripe-base {\n      fill: ${$active ? color : colors.GREY_2};\n      opacity: ${$active ? 0.2 : 1};\n    }\n\n    .ruler-small-stripe {\n      fill: ${colors.REAL_BLACK};\n    }\n\n    ${!$active &&\n    css`\n      &:hover {\n        .ruler-rect-color {\n          fill: ${colors.GREY_4};\n        }\n        .ruler-stripe-base {\n          fill: ${colors.GREY_3};\n        }\n      }\n    `}\n  `;\n});\n\nexport const StyledHighlighterWrapper = styled(HighlighterIcon)<IToolProps>(({\n  $active,\n  theme,\n  $activeColor,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active ? '0px' : '8px'};\n    ${!$active &&\n    css`\n      &:hover {\n        .highlighter-tip {\n          fill: ${theme.colors.BLACK};\n        }\n\n        .highlighter-stripe {\n          fill: ${theme.colors.BLACK_50};\n        }\n\n        .highlighter-light-body {\n          fill: ${theme.colors.BLACK_10};\n        }\n      }\n    `}\n\n    ${$active &&\n    css`\n      .highlighter-tip {\n        fill: ${color};\n      }\n\n      .highlighter-stripe {\n        fill: ${color};\n        opacity: 0.6;\n      }\n\n      .highlighter-light-body {\n        fill: ${color};\n        opacity: 0.2;\n      }\n    `}\n  `;\n});\n\nexport const StyledSketchWrapper = styled(SketchIcon)<IToolProps>(({\n  $active,\n  theme,\n  $activeColor,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active ? '0px' : '8px'};\n\n    ${!$active &&\n    css`\n      &:hover {\n        .pen-tip {\n          fill: ${theme.colors.BLACK};\n        }\n\n        .pen-dark-shade {\n          fill: ${theme.colors.BLACK_50};\n        }\n\n        .pen-light-shade {\n          fill: ${theme.colors.BLACK_10};\n        }\n      }\n    `}\n\n    ${$active &&\n    css`\n      cursor: ${$active ? 'auto' : 'pointer'};\n      .pen-tip {\n        fill: ${color};\n      }\n\n      .pen-dark-shade {\n        fill: ${color};\n        opacity: 0.6;\n      }\n\n      .pen-light-shade {\n        fill: ${color};\n        opacity: 0.4;\n      }\n    `}\n  `;\n});\n\nexport const StyledWrapper = styled(FlexView)<Omit<IToolProps, '$activeColor'>>(({\n  theme,\n  $active,\n}) => {\n  const { colors } = theme;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    width: 32px;\n    height: 32px;\n    justify-content: center;\n    align-items: center;\n\n    border: 1px solid ${colors.WHITE};\n    border-radius: 50%;\n    transition: all 100ms ease-in-out;\n\n    &:hover {\n      border: 1px solid ${colors.REAL_BLACK};\n    }\n    ${!$active &&\n    css`\n      &:hover {\n        border: 1px solid ${colors.REAL_BLACK};\n      }\n    `}\n\n    ${$active &&\n    css`\n      cursor: auto;\n      background: ${colors.BLACK};\n      svg {\n        path,\n        circle {\n          stroke: ${colors.WHITE};\n        }\n        .hover-tiles {\n          stroke: ${colors.WHITE};\n        }\n        .hover-eraser {\n          stroke: none;\n          fill: ${colors.WHITE};\n        }\n      }\n    `}\n  `;\n});\n\nexport const StyledCheckIcon = styled(TickIcon)`\n  path {\n    stroke: ${'white'};\n  }\n`;\n\nexport const PalleteWrapper = styled(FlexView)`\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  top: -24px; //-16 for icon, -8 for gap\n  transition:\n    opacity 0.5s ease,\n    transform 0.5s ease;\n`;\n\nexport const CueCanvasWrapper = styled(FlexView)<ICueCanvasWrappper>(\n  ({ $canScribble, $canRender, $renderAs }) => `\n  display: ${$canRender ? 'block' : 'none'};\n  opacity: ${$canScribble ? 1 : 0.5};\n  pointer-events: ${$canScribble ? 'auto' : 'none'};\n\n  ${\n    $renderAs === 'canvas' &&\n    $canScribble &&\n    `\n    background-image: radial-gradient(rgb(43 43 43 / 8%) 2px, transparent 10%);\n    background-position:0 0,32px 32px;\n    background-size: 30px 32px;\n    `\n  }\n  \n`,\n);\n\nexport const ColorPicker = styled(FlexView)<{ $color: TCueCanvasColors }>(\n  ({ $color }) => `\nbackground: ${CANVAS_COLORS[$color]};\n`,\n);\n"],"names":["StyledPencilIcon","styled","PencilIcon","theme","$active","$activeColor","colors","color","CANVAS_COLORS","css","StyledRulerIcon","RulerIcon","StyledHighlighterWrapper","HighlighterIcon","StyledSketchWrapper","SketchIcon","StyledWrapper","FlexView","StyledCheckIcon","TickIcon","PalleteWrapper","CueCanvasWrapper","$canScribble","$canRender","$renderAs","ColorPicker","$color"],"mappings":"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"}
+{"version":3,"file":"cue-cavas-styled.js","sources":["../../../src/features/cue-canvas/cue-cavas-styled.tsx"],"sourcesContent":["import type { ICueCanvasWrapper, TCueCanvasColors } from './types/cue-canvas';\n\nimport styled, { css } from 'styled-components';\n\nimport TickIcon from '../../assets/line-icons/icons/check';\nimport DownIcon from '../../assets/line-icons/icons/down';\nimport HighlighterIcon from '../../assets/line-icons/icons/highlighter';\nimport PencilIcon from '../../assets/line-icons/icons/pencil';\nimport RulerIcon from '../../assets/line-icons/icons/ruler';\nimport SketchIcon from '../../assets/line-icons/icons/sketch';\nimport UndoIcon from '../../assets/line-icons/icons/undo';\nimport FlexView from '../ui/layout/flex-view';\nimport { CANVAS_COLORS } from './constants/constants';\n\ninterface IToolProps {\n  $active: boolean;\n  $activeColor: TCueCanvasColors;\n  $isWhiteBoard: boolean;\n}\n\nexport const StyledPencilIcon = styled(PencilIcon)<IToolProps>(({\n  theme,\n  $active,\n  $activeColor,\n  $isWhiteBoard,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && !$isWhiteBoard ? '0px' : '8px'};\n    cursor: ${$active ? 'auto' : 'pointer'};\n    .pencil-dark-shade {\n      fill: ${$active ? color : colors.GREY_3};\n    }\n\n    .pencil-light-shade {\n      fill: ${$active ? color : colors.GREY_2};\n      opacity: ${$active ? 0.3 : 1};\n    }\n\n    ${!$active &&\n    css`\n      &:hover {\n        .pencil-dark-shade {\n          fill: ${colors.GREY_4};\n        }\n        .pencil-light-shade {\n          fill: ${colors.GREY_2};\n        }\n      }\n    `}\n  `;\n});\n\nexport const StyledRulerIcon = styled(RulerIcon)<IToolProps>(({\n  theme,\n  $active,\n  $activeColor,\n  $isWhiteBoard,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && !$isWhiteBoard ? '0px' : '8px'};\n\n    .ruler-rect-color {\n      fill: ${$active ? color : colors.GREY_3};\n    }\n\n    .ruler-stripe-base {\n      fill: ${$active ? color : colors.GREY_2};\n      opacity: ${$active ? 0.2 : 1};\n    }\n\n    .ruler-small-stripe {\n      fill: ${colors.REAL_BLACK};\n    }\n\n    ${!$active &&\n    css`\n      &:hover {\n        .ruler-rect-color {\n          fill: ${colors.GREY_4};\n        }\n        .ruler-stripe-base {\n          fill: ${colors.GREY_3};\n        }\n      }\n    `}\n  `;\n});\n\nexport const StyledHighlighterWrapper = styled(HighlighterIcon)<IToolProps>(({\n  $active,\n  theme,\n  $activeColor,\n  $isWhiteBoard,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && !$isWhiteBoard ? '0px' : '8px'};\n    ${!$active &&\n    css`\n      &:hover {\n        .highlighter-tip {\n          fill: ${theme.colors.BLACK};\n        }\n\n        .highlighter-stripe {\n          fill: ${theme.colors.BLACK_50};\n        }\n\n        .highlighter-light-body {\n          fill: ${theme.colors.BLACK_10};\n        }\n      }\n    `}\n\n    ${$active &&\n    css`\n      .highlighter-tip {\n        fill: ${color};\n      }\n\n      .highlighter-stripe {\n        fill: ${color};\n        opacity: 0.6;\n      }\n\n      .highlighter-light-body {\n        fill: ${color};\n        opacity: 0.2;\n      }\n    `}\n  `;\n});\n\nexport const StyledSketchWrapper = styled(SketchIcon)<IToolProps>(({\n  $active,\n  theme,\n  $activeColor,\n  $isWhiteBoard,\n}) => {\n  const { colors } = theme;\n  const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    position: relative;\n    transition: top 0.3s ease-in-out;\n    top: ${$active && !$isWhiteBoard ? '0px' : '8px'};\n\n    ${!$active &&\n    css`\n      &:hover {\n        .pen-tip {\n          fill: ${theme.colors.BLACK};\n        }\n\n        .pen-dark-shade {\n          fill: ${theme.colors.BLACK_50};\n        }\n\n        .pen-light-shade {\n          fill: ${theme.colors.BLACK_10};\n        }\n      }\n    `}\n\n    ${$active &&\n    css`\n      cursor: ${$active ? 'auto' : 'pointer'};\n      .pen-tip {\n        fill: ${color};\n      }\n\n      .pen-dark-shade {\n        fill: ${color};\n        opacity: 0.6;\n      }\n\n      .pen-light-shade {\n        fill: ${color};\n        opacity: 0.4;\n      }\n    `}\n  `;\n});\n\nexport const StyledWrapper = styled(FlexView)<Omit<IToolProps, '$activeColor' | '$isWhiteBoard'>>(({\n  theme,\n  $active,\n}) => {\n  const { colors } = theme;\n\n  return css`\n    cursor: ${$active ? 'auto' : 'pointer'};\n    width: 32px;\n    height: 32px;\n    justify-content: center;\n    align-items: center;\n\n    border: 1px solid ${colors.WHITE};\n    border-radius: 50%;\n    transition: all 100ms ease-in-out;\n\n    &:hover {\n      border: 1px solid ${colors.REAL_BLACK};\n    }\n    ${!$active &&\n    css`\n      &:hover {\n        border: 1px solid ${colors.REAL_BLACK};\n      }\n    `}\n\n    ${$active &&\n    css`\n      cursor: auto;\n      background: ${colors.BLACK};\n      svg {\n        path,\n        circle {\n          stroke: ${colors.WHITE};\n        }\n        .hover-tiles {\n          stroke: ${colors.WHITE};\n        }\n        .hover-eraser {\n          stroke: none;\n          fill: ${colors.WHITE};\n        }\n      }\n    `}\n  `;\n});\n\nexport const StyledCheckIcon = styled(TickIcon)`\n  path {\n    stroke: ${'white'};\n  }\n`;\n\nexport const RedoIcon = styled(UndoIcon)`\n  transform: scaleX(-1);\n`;\n\nexport const PaletteWrapper = styled(FlexView)`\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  top: -24px; //-16 for icon, -8 for gap\n  transition:\n    opacity 0.5s ease,\n    transform 0.5s ease;\n`;\n\nexport const CueCanvasWrapper = styled(FlexView)<ICueCanvasWrapper>(\n  ({ $canScribble, $canRender, $renderAs }) => `\n  display: ${$canRender ? 'block' : 'none'};\n  opacity: ${$canScribble ? 1 : 0.5};\n  pointer-events: ${$canScribble ? 'auto' : 'none'};\n\n  ${\n    $renderAs === 'canvas' &&\n    $canScribble &&\n    `\n    background-image: radial-gradient(rgb(43 43 43 / 8%) 2px, transparent 10%);\n    background-position:0 0,32px 32px;\n    background-size: 30px 32px;\n    `\n  }\n  \n`,\n);\n\nexport const ColorPicker = styled(FlexView)<{ $color: TCueCanvasColors }>(\n  ({ $color }) => `\nbackground: ${CANVAS_COLORS[$color]};\n`,\n);\n\nexport const StyledDownIcon = styled(DownIcon)<{ $isAnimating: boolean }>`\n  pointer-events: none;\n  transition: transform 0.5s ease;\n  transform: ${({ $isAnimating }) => ($isAnimating ? 'rotate(180deg)' : 'rotate(0deg)')};\n`;\n\nexport const PenIconWrapper = styled(FlexView)`\n  overflow: hidden;\n  border-right: 1px solid ${({ theme }) => theme.colors.GREY_1};\n`;\n\nexport const MenuWrapper = styled(FlexView)`\n  position: absolute;\n  padding: 8px 8px 0 8px;\n  overflow: hidden;\n  bottom: 58px;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  transition:\n    opacity 0.5s ease,\n    transform 0.5s ease;\n\n  :hover {\n    cursor: pointer;\n  }\n`;\n"],"names":["StyledPencilIcon","styled","PencilIcon","theme","$active","$activeColor","$isWhiteBoard","colors","color","CANVAS_COLORS","css","StyledRulerIcon","RulerIcon","StyledHighlighterWrapper","HighlighterIcon","StyledSketchWrapper","SketchIcon","StyledWrapper","FlexView","StyledCheckIcon","TickIcon","RedoIcon","UndoIcon","PaletteWrapper","CueCanvasWrapper","$canScribble","$canRender","$renderAs","ColorPicker","$color","StyledDownIcon","DownIcon","$isAnimating","PenIconWrapper","MenuWrapper"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-palette.js","sources":["../../../../src/features/cue-canvas/toolbar/color-palette.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { TCueCanvasColors } from '../types/cue-canvas';\n\nimport { memo, useCallback, useMemo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getColorsForUser } from '../cue-canvas-helpers';\nimport { StyledCheckIcon, ColorPicker } from '../cue-cavas-styled';\n\ninterface IColorPalette {\n  setActiveColor: (color: TCueCanvasColors) => void;\n  activeColor: TCueCanvasColors;\n  userType: TUserTypes;\n}\n\nconst ColorPalette: React.FC<IColorPalette> = memo(({ setActiveColor, activeColor, userType }) => {\n  const handleColorChange = useCallback(\n    (color: TCueCanvasColors) => {\n      setActiveColor(color);\n    },\n    [setActiveColor],\n  );\n  const colors = useMemo(() => getColorsForUser(userType), [userType]);\n\n  return (\n    <>\n      {colors.map((color, index) => (\n        <Clickable\n          key={index}\n          onClick={() => handleColorChange(color)}\n          label={`Color Picker - ${color}`}\n        >\n          <FlexView\n            $width={22}\n            $height={22}\n            $borderRadius={11}\n            $justifyContent=\"center\"\n            $background={activeColor === color ? 'BLACK' : 'WHITE'}\n            $alignItems=\"center\"\n          >\n            <ColorPicker\n              $width={20}\n              $height={20}\n              $borderRadius={10}\n              $color={color}\n              $alignItems=\"center\"\n              $justifyContent=\"center\"\n            >\n              {activeColor === color && <StyledCheckIcon />}\n            </ColorPicker>\n          </FlexView>\n        </Clickable>\n      ))}\n    </>\n  );\n});\n\nexport default ColorPalette;\n"],"names":["ColorPalette","memo","setActiveColor","activeColor","userType","handleColorChange","useCallback","color","colors","useMemo","getColorsForUser","jsx","Fragment","index","Clickable","FlexView","ColorPicker","StyledCheckIcon"],"mappings":";;;;;;AAgBA,MAAMA,IAAwCC,EAAK,CAAC,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,QAAe;AAChG,QAAMC,IAAoBC;AAAA,IACxB,CAACC,MAA4B;AAC3B,MAAAL,EAAeK,CAAK;AAAA,IACtB;AAAA,IACA,CAACL,CAAc;AAAA,EAAA,GAEXM,IAASC,EAAQ,MAAMC,EAAiBN,CAAQ,GAAG,CAACA,CAAQ,CAAC;AAEnE,SAEK,gBAAAO,EAAAC,GAAA,EAAA,UAAAJ,EAAO,IAAI,CAACD,GAAOM,MAClB,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MAEC,SAAS,MAAMT,EAAkBE,CAAK;AAAA,MACtC,OAAO,kBAAkBA,CAAK;AAAA,MAE9B,UAAA,gBAAAI;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,eAAe;AAAA,UACf,iBAAgB;AAAA,UAChB,aAAaZ,MAAgBI,IAAQ,UAAU;AAAA,UAC/C,aAAY;AAAA,UAEZ,UAAA,gBAAAI;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,cACf,QAAQT;AAAA,cACR,aAAY;AAAA,cACZ,iBAAgB;AAAA,cAEf,UAAAJ,MAAgBI,KAAS,gBAAAI,EAACM,GAAgB,CAAA,CAAA;AAAA,YAAA;AAAA,UAC7C;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAtBKJ;AAAA,EAwBR,CAAA,EACH,CAAA;AAEJ,CAAC;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/color-picker-menu.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { FC } from 'react';\n\nimport { memo, useRef } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../ui/layout/flex-view';\nimport { ColorPicker, PaletteWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport ColorPalette from './color-palette';\n\ninterface ColorPickerMenuProps {\n  userType: TUserTypes;\n}\n\nconst ColorPickerMenu: FC<ColorPickerMenuProps> = memo(({ userType }) => {\n  const colorPaletteRef = useRef(null);\n  const { activeColor, setActiveColor, isWritingToolActive } = useCueCanvasActions();\n\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    colorPaletteRef,\n    undefined,\n    true,\n    undefined,\n  );\n\n  return (\n    <FlexView\n      $width={32}\n      $height={32}\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $borderRadius={16}\n      $background=\"WHITE\"\n    >\n      <Clickable onClick={onMenuClick} label=\"Color Picker\" disabled={!isWritingToolActive}>\n        <ColorPicker\n          $width={22}\n          $height={22}\n          $borderRadius={11}\n          $color={activeColor}\n          $opacity={isWritingToolActive ? 1 : 0.5}\n          ref={colorPaletteRef}\n        />\n      </Clickable>\n      {menuVisible && (\n        <PaletteWrapper\n          $background=\"WHITE\"\n          $gutterX={0.5}\n          $gapX={0.5}\n          $borderRadius={10}\n          $flexDirection=\"row\"\n        >\n          <ColorPalette\n            setActiveColor={setActiveColor}\n            activeColor={activeColor}\n            userType={userType}\n          />\n        </PaletteWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default ColorPickerMenu;\n"],"names":["ColorPickerMenu","memo","userType","colorPaletteRef","useRef","activeColor","setActiveColor","isWritingToolActive","useCueCanvasActions","menuVisible","onMenuClick","useContextMenuClickHandler","jsxs","FlexView","jsx","Clickable","ColorPicker","PaletteWrapper","ColorPalette"],"mappings":";;;;;;;;AAgBA,MAAMA,IAA4CC,EAAK,CAAC,EAAE,UAAAC,QAAe;AACjE,QAAAC,IAAkBC,EAAO,IAAI,GAC7B,EAAE,aAAAC,GAAa,gBAAAC,GAAgB,qBAAAC,MAAwBC,EAAoB,GAE3E,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAIA,SAAA,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,aAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAC,EAACC,KAAU,SAASL,GAAa,OAAM,gBAAe,UAAU,CAACH,GAC/D,UAAA,gBAAAO;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,eAAe;AAAA,YACf,QAAQX;AAAA,YACR,UAAUE,IAAsB,IAAI;AAAA,YACpC,KAAKJ;AAAA,UAAA;AAAA,QAAA,GAET;AAAA,QACCM,KACC,gBAAAK;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YACZ,UAAU;AAAA,YACV,OAAO;AAAA,YACP,eAAe;AAAA,YACf,gBAAe;AAAA,YAEf,UAAA,gBAAAH;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,gBAAAZ;AAAA,gBACA,aAAAD;AAAA,gBACA,UAAAH;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

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

@@ -0,0 +1,62 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { memo as f, useRef as C, useCallback as $ } from "react";
+import n from "../../ui/buttons/clickable/clickable.js";
+import h from "../../ui/hooks/use-context-menu-click-handler.js";
+import t from "../../ui/layout/flex-view.js";
+import { GRID_NAMES as b } from "../cue-canvas-helpers.js";
+import { StyledWrapper as k, MenuWrapper as G } from "../cue-cavas-styled.js";
+import { useCueCanvasActions as l } from "../hooks/use-cue-canvas-actions.js";
+import { GRID_TO_COMP as x } from "./icon-map.js";
+const A = f(({ GridIcon: c }) => {
+  const { activeInstance: e } = l(), i = C(null), { activeTool: d } = l(), { menuVisible: m, onMenuClick: u } = h(
+    i,
+    void 0,
+    !0,
+    void 0
+  ), p = $(
+    (o) => {
+      e == null || e.changeGrid(o);
+    },
+    [e]
+  );
+  return /* @__PURE__ */ a(t, { $gutterX: 0.25, ref: i, children: [
+    /* @__PURE__ */ r(n, { onClick: u, label: "grid", children: /* @__PURE__ */ r(k, { $active: d === "grid", children: /* @__PURE__ */ r(c, {}) }) }),
+    m && /* @__PURE__ */ r(
+      G,
+      {
+        $borderColor: "GREY_1",
+        $background: "GREY_1",
+        $flexDirection: "row",
+        $widthX: 11.15,
+        $flexWrap: !0,
+        $flexGapX: 0.5,
+        children: b.map((o) => {
+          const s = x[o];
+          return /* @__PURE__ */ r(
+            n,
+            {
+              onClick: () => p(o),
+              label: o,
+              children: /* @__PURE__ */ r(
+                t,
+                {
+                  $width: 48,
+                  $height: 48,
+                  $borderColor: "BLACK",
+                  $borderRadius: 4,
+                  $background: "WHITE",
+                  children: /* @__PURE__ */ r(s, {})
+                }
+              )
+            },
+            o
+          );
+        })
+      }
+    )
+  ] });
+});
+export {
+  A as default
+};
+//# sourceMappingURL=grid-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/grid-menu.tsx"],"sourcesContent":["import type { TCueCanvasGridName } from '../types/cue-canvas';\nimport type { IGridMenu, TToolComponentType } from '../types/toolbar';\n\nimport React, { memo, useCallback, useRef } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../ui/layout/flex-view';\nimport { GRID_NAMES } from '../cue-canvas-helpers';\nimport { MenuWrapper, StyledWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport { GRID_TO_COMP } from './icon-map';\n\nconst GridMenu: React.FC<IGridMenu> = memo(({ GridIcon }) => {\n  const { activeInstance: cueCanvas } = useCueCanvasActions();\n  const gridMenuRef = useRef(null);\n  const { activeTool } = useCueCanvasActions();\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    gridMenuRef,\n    undefined,\n    true,\n    undefined,\n  );\n  const onGridOptionClick = useCallback(\n    (gridOption: TCueCanvasGridName) => {\n      cueCanvas?.changeGrid(gridOption);\n    },\n    [cueCanvas],\n  );\n\n  return (\n    <FlexView $gutterX={0.25} ref={gridMenuRef}>\n      <Clickable onClick={onMenuClick} label=\"grid\">\n        <StyledWrapper $active={activeTool === 'grid'}>\n          <GridIcon />\n        </StyledWrapper>\n      </Clickable>\n      {menuVisible && (\n        <MenuWrapper\n          $borderColor=\"GREY_1\"\n          $background=\"GREY_1\"\n          $flexDirection=\"row\"\n          $widthX={11.15}\n          $flexWrap={true}\n          $flexGapX={0.5}\n        >\n          {GRID_NAMES.map(gridName => {\n            const GridComponent = GRID_TO_COMP[gridName] as TToolComponentType;\n\n            return (\n              <Clickable\n                key={gridName}\n                onClick={() => onGridOptionClick(gridName)}\n                label={gridName}\n              >\n                <FlexView\n                  $width={48}\n                  $height={48}\n                  $borderColor=\"BLACK\"\n                  $borderRadius={4}\n                  $background=\"WHITE\"\n                >\n                  <GridComponent />\n                </FlexView>\n              </Clickable>\n            );\n          })}\n        </MenuWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default GridMenu;\n"],"names":["GridMenu","memo","GridIcon","cueCanvas","useCueCanvasActions","gridMenuRef","useRef","activeTool","menuVisible","onMenuClick","useContextMenuClickHandler","onGridOptionClick","useCallback","gridOption","jsxs","FlexView","jsx","Clickable","StyledWrapper","MenuWrapper","GRID_NAMES","gridName","GridComponent","GRID_TO_COMP"],"mappings":";;;;;;;;;AAaA,MAAMA,IAAgCC,EAAK,CAAC,EAAE,UAAAC,QAAe;AAC3D,QAAM,EAAE,gBAAgBC,EAAU,IAAIC,EAAoB,GACpDC,IAAcC,EAAO,IAAI,GACzB,EAAE,YAAAC,MAAeH,KACjB,EAAE,aAAAI,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIM,IAAoBC;AAAA,IACxB,CAACC,MAAmC;AAClC,MAAAV,KAAA,QAAAA,EAAW,WAAWU;AAAA,IACxB;AAAA,IACA,CAACV,CAAS;AAAA,EAAA;AAGZ,SACG,gBAAAW,EAAAC,GAAA,EAAS,UAAU,MAAM,KAAKV,GAC7B,UAAA;AAAA,IAAA,gBAAAW,EAACC,GAAU,EAAA,SAASR,GAAa,OAAM,QACrC,UAAA,gBAAAO,EAACE,GAAc,EAAA,SAASX,MAAe,QACrC,UAAC,gBAAAS,EAAAd,GAAA,CAAA,CAAS,EACZ,CAAA,GACF;AAAA,IACCM,KACC,gBAAAQ;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,cAAa;AAAA,QACb,aAAY;AAAA,QACZ,gBAAe;AAAA,QACf,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,QAEV,UAAAC,EAAW,IAAI,CAAYC,MAAA;AACpB,gBAAAC,IAAgBC,EAAaF,CAAQ;AAGzC,iBAAA,gBAAAL;AAAA,YAACC;AAAA,YAAA;AAAA,cAEC,SAAS,MAAMN,EAAkBU,CAAQ;AAAA,cACzC,OAAOA;AAAA,cAEP,UAAA,gBAAAL;AAAA,gBAACD;AAAA,gBAAA;AAAA,kBACC,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,cAAa;AAAA,kBACb,eAAe;AAAA,kBACf,aAAY;AAAA,kBAEZ,4BAACO,GAAc,EAAA;AAAA,gBAAA;AAAA,cACjB;AAAA,YAAA;AAAA,YAZKD;AAAA,UAAA;AAAA,QAaP,CAEH;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}

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

@@ -0,0 +1,58 @@
+import o from "../../../assets/line-icons/icons/clear-all.js";
+import r from "../../../assets/line-icons/icons/cursor.js";
+import m from "../../../assets/line-icons/icons/download.js";
+import i from "../../../assets/line-icons/icons/equation.js";
+import t from "../../../assets/line-icons/icons/eraser.js";
+import e from "../../../assets/line-icons/icons/grid-icon.js";
+import p from "../../../assets/line-icons/icons/home.js";
+import n from "../../../assets/line-icons/icons/pan.js";
+import d from "../../../assets/line-icons/icons/square-checked-grid.js";
+import a from "../../../assets/line-icons/icons/square-dots.js";
+import c from "../../../assets/line-icons/icons/square-grid.js";
+import f from "../../../assets/line-icons/icons/square2-grid.js";
+import l from "../../../assets/line-icons/icons/text-icon.js";
+import I from "../../../assets/line-icons/icons/tri-dots.js";
+import S from "../../../assets/line-icons/icons/tri-grid.js";
+import g from "../../../assets/line-icons/icons/tri2-dots.js";
+import u from "../../../assets/line-icons/icons/tri2-grid.js";
+import s from "../../../assets/line-icons/icons/undo.js";
+import q from "../../../assets/line-icons/icons/upload.js";
+import h from "../../../assets/line-icons/icons/zoom-in.js";
+import v from "../../../assets/line-icons/icons/zoom-out.js";
+import O from "../../ui/layout/flex-view.js";
+import { StyledPencilIcon as T, StyledRulerIcon as G, StyledSketchWrapper as C, StyledHighlighterWrapper as D, RedoIcon as k } from "../cue-cavas-styled.js";
+const Q = {
+  pen: T,
+  ruler: G,
+  marker: C,
+  highlighter: D,
+  eraser: t,
+  move: r,
+  undo: s,
+  redo: k,
+  pan: n,
+  clearAll: o,
+  text: l,
+  equation: i,
+  grid: e,
+  home: p,
+  zoomIn: h,
+  zoomOut: v,
+  upload: q,
+  download: m
+}, X = {
+  none: O,
+  "square2-grid": f,
+  "square-checked": d,
+  "square-dots": a,
+  "tri-dots": I,
+  "tri2-dots": g,
+  "square-grid": c,
+  "tri-grid": S,
+  "tri2-grid": u
+};
+export {
+  X as GRID_TO_COMP,
+  Q as TOOLS_TO_COMP
+};
+//# sourceMappingURL=icon-map.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-map.js","sources":["../../../../src/features/cue-canvas/toolbar/icon-map.ts"],"sourcesContent":["import type { IToolsToCompMap, IGridToCompMap, TToolComponentType } from '../types/toolbar';\n\nimport ClearAllIcon from '../../../assets/line-icons/icons/clear-all';\nimport CursorIcon from '../../../assets/line-icons/icons/cursor';\nimport DownloadIcon from '../../../assets/line-icons/icons/download';\nimport EquationIcon from '../../../assets/line-icons/icons/equation';\nimport EraserIcon from '../../../assets/line-icons/icons/eraser';\nimport GridIcon from '../../../assets/line-icons/icons/grid-icon';\nimport HomeIcon from '../../../assets/line-icons/icons/home';\nimport PanIcon from '../../../assets/line-icons/icons/pan';\nimport SquareCheckedGridSvg from '../../../assets/line-icons/icons/square-checked-grid';\nimport SquareDotSvg from '../../../assets/line-icons/icons/square-dots';\nimport SquareGridSvg from '../../../assets/line-icons/icons/square-grid';\nimport Square2GridSvg from '../../../assets/line-icons/icons/square2-grid';\nimport TextIcon from '../../../assets/line-icons/icons/text-icon';\nimport TriDotSvg from '../../../assets/line-icons/icons/tri-dots';\nimport TriGridSvg from '../../../assets/line-icons/icons/tri-grid';\nimport Tri2DotSvg from '../../../assets/line-icons/icons/tri2-dots';\nimport Tri2GridSvg from '../../../assets/line-icons/icons/tri2-grid';\nimport UndoIcon from '../../../assets/line-icons/icons/undo';\nimport UploadIcon from '../../../assets/line-icons/icons/upload';\nimport ZoomInIcon from '../../../assets/line-icons/icons/zoom-in';\nimport ZoomOutIcon from '../../../assets/line-icons/icons/zoom-out';\nimport FlexView from '../../ui/layout/flex-view';\nimport {\n  RedoIcon,\n  StyledHighlighterWrapper,\n  StyledPencilIcon,\n  StyledRulerIcon,\n  StyledSketchWrapper,\n} from '../cue-cavas-styled';\n\nexport const TOOLS_TO_COMP: IToolsToCompMap = {\n  pen: StyledPencilIcon,\n  ruler: StyledRulerIcon,\n  marker: StyledSketchWrapper,\n  highlighter: StyledHighlighterWrapper,\n  eraser: EraserIcon,\n  move: CursorIcon,\n  undo: UndoIcon,\n  redo: RedoIcon,\n  pan: PanIcon,\n  clearAll: ClearAllIcon,\n  text: TextIcon,\n  equation: EquationIcon,\n  grid: GridIcon,\n  home: HomeIcon,\n  zoomIn: ZoomInIcon,\n  zoomOut: ZoomOutIcon,\n  upload: UploadIcon,\n  download: DownloadIcon,\n};\n\nexport const GRID_TO_COMP: IGridToCompMap = {\n  'none': FlexView as unknown as TToolComponentType,\n  'square2-grid': Square2GridSvg,\n  'square-checked': SquareCheckedGridSvg,\n  'square-dots': SquareDotSvg,\n  'tri-dots': TriDotSvg,\n  'tri2-dots': Tri2DotSvg,\n  'square-grid': SquareGridSvg,\n  'tri-grid': TriGridSvg,\n  'tri2-grid': Tri2GridSvg,\n};\n"],"names":["TOOLS_TO_COMP","StyledPencilIcon","StyledRulerIcon","StyledSketchWrapper","StyledHighlighterWrapper","EraserIcon","CursorIcon","UndoIcon","RedoIcon","PanIcon","ClearAllIcon","TextIcon","EquationIcon","GridIcon","HomeIcon","ZoomInIcon","ZoomOutIcon","UploadIcon","DownloadIcon","GRID_TO_COMP","FlexView","Square2GridSvg","SquareCheckedGridSvg","SquareDotSvg","TriDotSvg","Tri2DotSvg","SquareGridSvg","TriGridSvg","Tri2GridSvg"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgCO,MAAMA,IAAiC;AAAA,EAC5C,KAAKC;AAAA,EACL,OAAOC;AAAA,EACP,QAAQC;AAAA,EACR,aAAaC;AAAA,EACb,QAAQC;AAAA,EACR,MAAMC;AAAA,EACN,MAAMC;AAAA,EACN,MAAMC;AAAA,EACN,KAAKC;AAAA,EACL,UAAUC;AAAA,EACV,MAAMC;AAAA,EACN,UAAUC;AAAAA,EACV,MAAMC;AAAA,EACN,MAAMC;AAAA,EACN,QAAQC;AAAA,EACR,SAASC;AAAA,EACT,QAAQC;AAAA,EACR,UAAUC;AACZ,GAEaC,IAA+B;AAAA,EAC1C,MAAQC;AAAA,EACR,gBAAgBC;AAAA,EAChB,kBAAkBC;AAAA,EAClB,eAAeC;AAAA,EACf,YAAYC;AAAA,EACZ,aAAaC;AAAA,EACb,eAAeC;AAAA,EACf,YAAYC;AAAA,EACZ,aAAaC;AACf;"}

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

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

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

@@ -0,0 +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              $isWhiteBoard\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} withGutter key={tool} />\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,eAAa;AAAA,QAAA;AAAA,MACf;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,OACf,gBAAAe,EAAAM,GAAA,EAAK,MAAAC,GAAY,YAAU,GAAA,GAAMA,CAAM,CACzC;AAAA,UAED,gBAAAP;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;"}

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

@@ -0,0 +1,27 @@
+import { jsx as r } from "react/jsx-runtime";
+import { memo as s, useCallback as p } from "react";
+import T from "../../ui/buttons/clickable/clickable.js";
+import f from "../../ui/layout/flex-view.js";
+import { STATELESS_TOOLS as d, getIsWritingTool as C } from "../cue-canvas-helpers.js";
+import { StyledWrapper as u } from "../cue-cavas-styled.js";
+import { useCueCanvasActions as v } from "../hooks/use-cue-canvas-actions.js";
+import O from "./grid-menu.js";
+import { TOOLS_TO_COMP as S } from "./icon-map.js";
+const $ = ({ tool: o, withGutter: n }) => {
+  const e = S[o], {
+    activeInstance: i,
+    setActiveTool: c,
+    activeTool: m,
+    activeColor: l
+  } = v(), a = p(
+    (t) => {
+      i == null || i.setTool(t), d.has(t) || c(t);
+    },
+    [i, c]
+  );
+  return o === "grid" ? /* @__PURE__ */ r(O, { GridIcon: e }) : /* @__PURE__ */ r(f, { $gutterX: n ? 0.25 : 0, children: /* @__PURE__ */ r(T, { onClick: () => a(o), label: o, children: C(o) ? /* @__PURE__ */ r(e, { $active: m === o, $activeColor: l, $isWhiteBoard: !0 }) : /* @__PURE__ */ r(u, { $active: m === o, children: /* @__PURE__ */ r(e, {}) }) }) });
+}, _ = s($);
+export {
+  _ as default
+};
+//# sourceMappingURL=tool.js.map

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

@@ -0,0 +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}\n\nconst Tool: FC<IToolProps> = ({ tool, withGutter }) => {\n  const ToolComponent = TOOLS_TO_COMP[tool] as TToolComponentType;\n  const {\n    activeInstance: cueCanvas,\n    setActiveTool,\n    activeTool,\n    activeColor,\n  } = useCueCanvasActions();\n\n  const onToolClick = useCallback(\n    (t: TCueCanvasTool) => {\n      cueCanvas?.setTool(t);\n\n      if (!STATELESS_TOOLS.has(t)) {\n        setActiveTool(t);\n      }\n    },\n    [cueCanvas, setActiveTool],\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 $active={activeTool === tool} $activeColor={activeColor} $isWhiteBoard />\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","ToolComponent","TOOLS_TO_COMP","cueCanvas","setActiveTool","activeTool","activeColor","useCueCanvasActions","onToolClick","useCallback","STATELESS_TOOLS","jsx","GridMenu","FlexView","Clickable","StyledWrapper","Tool$1","memo"],"mappings":";;;;;;;;;AAmBA,MAAMA,IAAuB,CAAC,EAAE,MAAAC,GAAM,YAAAC,QAAiB;AAC/C,QAAAC,IAAgBC,EAAcH,CAAI,GAClC;AAAA,IACJ,gBAAgBI;AAAA,IAChB,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,MACEC,EAAoB,GAElBC,IAAcC;AAAA,IAClB,CAAC,MAAsB;AACrB,MAAAN,KAAA,QAAAA,EAAW,QAAQ,IAEdO,EAAgB,IAAI,CAAC,KACxBN,EAAc,CAAC;AAAA,IAEnB;AAAA,IACA,CAACD,GAAWC,CAAa;AAAA,EAAA;AAG3B,SAAIL,MAAS,SACJ,gBAAAY,EAACC,GAAS,EAAA,UAAUX,EAAe,CAAA,sBAIzCY,GAAS,EAAA,UAAUb,IAAa,OAAO,GACtC,UAAC,gBAAAW,EAAAG,GAAA,EAAU,SAAS,MAAMN,EAAYT,CAAI,GAAG,OAAOA,GACjD,YAAiBA,CAAI,IACnB,gBAAAY,EAAAV,GAAA,EAAc,SAASI,MAAeN,GAAM,cAAcO,GAAa,eAAa,GAAC,CAAA,IAErF,gBAAAK,EAAAI,GAAA,EAAc,SAASV,MAAeN,GACrC,4BAACE,GAAc,CAAA,CAAA,EACjB,CAAA,GAEJ,EACF,CAAA;AAEJ,GAEee,IAAAC,EAAKnB,CAAI;"}

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

@@ -1,91 +1,22 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { memo as T, useRef as b, useEffect as v, useCallback as I } from "react";
-import S, { useTheme as y } from "styled-components";
-import R from "../../../assets/line-icons/icons/cursor.js";
-import x from "../../../assets/line-icons/icons/eraser.js";
-import p from "../../../assets/line-icons/icons/undo.js";
-import f from "../../ui/buttons/clickable/clickable.js";
-import A from "../../ui/hooks/use-context-menu-click-handler.js";
-import l from "../../ui/layout/flex-view.js";
-import { CANVAS_COLORS as O } from "../constants/constants.js";
-import { getUserTools as P } from "../cue-canvas-helpers.js";
-import { StyledWrapper as W, ColorPicker as j, StyledPencilIcon as w, StyledRulerIcon as E, StyledSketchWrapper as H, StyledHighlighterWrapper as M } from "../cue-cavas-styled.js";
-import { useCueCanvasActions as V } from "../hooks/use-cue-canvas-actions.js";
-import _ from "./color-pallete.js";
-const L = S(p)`
-  transform: scaleX(-1);
-`, U = {
-  pen: w,
-  ruler: E,
-  marker: H,
-  highlighter: M,
-  eraser: x,
-  move: R,
-  undo: p,
-  redo: L
-}, X = T(({ userType: n }) => {
-  const {
-    activeInstance: o,
-    activeTool: i,
-    setActiveTool: c,
-    setActiveColor: u,
-    activeColor: t,
-    isWritingToolActive: s
-  } = V(), { colors: h } = y(), m = b(null), C = P(n);
-  v(() => {
-    o && (t && o.setColor(O[t]), i && (o == null || o.setTool(i)));
-  }, [t, i, h, o]);
-  const $ = I(
-    (e) => {
-      o == null || o.setTool(e), e !== "undo" && e !== "redo" && c(e);
-    },
-    [o, c]
-  ), { menuVisible: g, onMenuClick: k } = A(
-    m,
-    void 0,
-    !0,
-    void 0
-  );
-  return /* @__PURE__ */ d(l, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", children: [
-    C.map((e) => {
-      const a = U[e];
-      return /* @__PURE__ */ r(l, { $gutterX: 0.25, children: /* @__PURE__ */ r(f, { onClick: () => $(e), label: e, children: ["pen", "ruler", "marker", "highlighter"].includes(e) ? /* @__PURE__ */ r(a, { $active: i === e, $activeColor: t }) : /* @__PURE__ */ r(W, { $active: i === e, children: /* @__PURE__ */ r(a, {}) }) }) }, e);
-    }),
-    /* @__PURE__ */ d(
-      l,
-      {
-        $width: 32,
-        $height: 32,
-        $alignItems: "center",
-        $justifyContent: "center",
-        $borderRadius: 16,
-        $background: "WHITE",
-        children: [
-          /* @__PURE__ */ r(f, { onClick: k, label: "Color Picker", disabled: !s, children: /* @__PURE__ */ r(
-            j,
-            {
-              $width: 22,
-              $height: 22,
-              $borderRadius: 11,
-              $color: t,
-              $opacity: s ? 1 : 0.5,
-              ref: m
-            }
-          ) }),
-          g && /* @__PURE__ */ r(
-            _,
-            {
-              setActiveColor: u,
-              activeColor: t,
-              userType: n
-            }
-          )
-        ]
-      }
-    )
+import { jsx as m, jsxs as n } from "react/jsx-runtime";
+import { memo as s, useEffect as a } from "react";
+import c from "../../ui/layout/flex-view.js";
+import { CANVAS_COLORS as p } from "../constants/constants.js";
+import { getUserTools as C } from "../cue-canvas-helpers.js";
+import { useCueCanvasActions as x } from "../hooks/use-cue-canvas-actions.js";
+import b from "./color-picker-menu.js";
+import u from "./tool.js";
+import T from "./whiteboard-toolbar.js";
+const $ = s(({ userType: t, renderAs: r }) => {
+  const f = C(t, r), { activeInstance: o, activeTool: i, activeColor: e } = x();
+  return a(() => {
+    o && (e && o.setColor(p[e]), i && (o == null || o.setTool(i)));
+  }, [e, i, o, r]), r === "whiteboard" ? /* @__PURE__ */ m(T, { tools: f, userType: t }) : /* @__PURE__ */ n(c, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", $flexGapX: 0.5, children: [
+    f.map((l) => /* @__PURE__ */ m(u, { tool: l }, l)),
+    /* @__PURE__ */ m(b, { userType: t })
   ] });
-}), re = X;
+}), V = $;
 export {
-  re as default
+  V 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 { TCueCanvasTool } from '../types/cue-canvas';\nimport type { IToolsToCompMap, IToolbarProps, TToolComponentType } from '../types/toolbar';\n\nimport React, { memo, useCallback, useEffect, useRef } from 'react';\nimport styled from 'styled-components';\nimport { useTheme } from 'styled-components';\n\nimport CursorIcon from '../../../assets/line-icons/icons/cursor';\nimport EraserIcon from '../../../assets/line-icons/icons/eraser';\nimport UndoIcon from '../../../assets/line-icons/icons/undo';\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 { CANVAS_COLORS } from '../constants/constants';\nimport { getUserTools } from '../cue-canvas-helpers';\nimport {\n  StyledPencilIcon,\n  StyledRulerIcon,\n  StyledWrapper,\n  StyledSketchWrapper,\n  StyledHighlighterWrapper,\n  ColorPicker,\n} from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport ColorPallete from './color-pallete';\n\nconst RedoIcon = styled(UndoIcon)`\n  transform: scaleX(-1);\n`;\n\nconst TOOLS_TO_COMP: IToolsToCompMap = {\n  pen: StyledPencilIcon,\n  ruler: StyledRulerIcon,\n  marker: StyledSketchWrapper,\n  highlighter: StyledHighlighterWrapper,\n  eraser: EraserIcon,\n  move: CursorIcon,\n  undo: UndoIcon,\n  redo: RedoIcon,\n};\n\nconst Toolbar: React.FC<IToolbarProps> = memo(({ userType }) => {\n  const {\n    activeInstance: cueCanvas,\n    activeTool,\n    setActiveTool,\n    setActiveColor,\n    activeColor,\n    isWritingToolActive,\n  } = useCueCanvasActions();\n  const { colors } = useTheme();\n\n  const colorPalleteRef = useRef<HTMLDivElement>(null);\n\n  const tools = getUserTools(userType);\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, colors, cueCanvas]);\n\n  const onToolClick = useCallback(\n    (tool: TCueCanvasTool) => {\n      cueCanvas?.setTool(tool);\n      if (tool !== 'undo' && tool !== 'redo') {\n        setActiveTool(tool);\n      }\n    },\n    [cueCanvas, setActiveTool],\n  );\n\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    colorPalleteRef,\n    undefined,\n    true,\n    undefined,\n  );\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\">\n      {tools.map(tool => {\n        const ToolComponent = TOOLS_TO_COMP[tool] as TToolComponentType;\n\n        return (\n          <FlexView $gutterX={0.25} key={tool}>\n            <Clickable onClick={() => onToolClick(tool)} label={tool}>\n              {['pen', 'ruler', 'marker', 'highlighter'].includes(tool) ? (\n                <ToolComponent $active={activeTool === tool} $activeColor={activeColor} />\n              ) : (\n                <StyledWrapper $active={activeTool === tool}>\n                  <ToolComponent />\n                </StyledWrapper>\n              )}\n            </Clickable>\n          </FlexView>\n        );\n      })}\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={colorPalleteRef}\n          />\n        </Clickable>\n        {menuVisible && (\n          <ColorPallete\n            setActiveColor={setActiveColor}\n            activeColor={activeColor}\n            userType={userType}\n          />\n        )}\n      </FlexView>\n    </FlexView>\n  );\n});\n\nexport default Toolbar;\n"],"names":["RedoIcon","styled","UndoIcon","TOOLS_TO_COMP","StyledPencilIcon","StyledRulerIcon","StyledSketchWrapper","StyledHighlighterWrapper","EraserIcon","CursorIcon","Toolbar","memo","userType","cueCanvas","activeTool","setActiveTool","setActiveColor","activeColor","isWritingToolActive","useCueCanvasActions","colors","useTheme","colorPalleteRef","useRef","tools","getUserTools","useEffect","CANVAS_COLORS","onToolClick","useCallback","tool","menuVisible","onMenuClick","useContextMenuClickHandler","FlexView","ToolComponent","jsx","Clickable","StyledWrapper","jsxs","ColorPicker","ColorPallete","Toolbar$1"],"mappings":";;;;;;;;;;;;;;AA0BA,MAAMA,IAAWC,EAAOC,CAAQ;AAAA;AAAA,GAI1BC,IAAiC;AAAA,EACrC,KAAKC;AAAA,EACL,OAAOC;AAAA,EACP,QAAQC;AAAA,EACR,aAAaC;AAAA,EACb,QAAQC;AAAA,EACR,MAAMC;AAAA,EACN,MAAMP;AAAA,EACN,MAAMF;AACR,GAEMU,IAAmCC,EAAK,CAAC,EAAE,UAAAC,QAAe;AACxD,QAAA;AAAA,IACJ,gBAAgBC;AAAA,IAChB,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,qBAAAC;AAAA,MACEC,EAAoB,GAClB,EAAE,QAAAC,MAAWC,KAEbC,IAAkBC,EAAuB,IAAI,GAE7CC,IAAQC,EAAab,CAAQ;AAEnC,EAAAc,EAAU,MAAM;AACd,IAAIb,MACEI,KACQJ,EAAA,SAASc,EAAcV,CAAW,CAAC,GAG3CH,MACFD,KAAA,QAAAA,EAAW,QAAQC;AAAA,KAGtB,CAACG,GAAaH,GAAYM,GAAQP,CAAS,CAAC;AAE/C,QAAMe,IAAcC;AAAA,IAClB,CAACC,MAAyB;AACxB,MAAAjB,KAAA,QAAAA,EAAW,QAAQiB,IACfA,MAAS,UAAUA,MAAS,UAC9Bf,EAAce,CAAI;AAAA,IAEtB;AAAA,IACA,CAACjB,GAAWE,CAAa;AAAA,EAAA,GAGrB,EAAE,aAAAgB,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,2BACGY,GAAS,EAAA,gBAAe,OAAM,aAAY,UAAS,iBAAgB,UACjE,UAAA;AAAA,IAAAV,EAAM,IAAI,CAAQM,MAAA;AACX,YAAAK,IAAgBhC,EAAc2B,CAAI;AAExC,+BACGI,GAAS,EAAA,UAAU,MAClB,UAAC,gBAAAE,EAAAC,GAAA,EAAU,SAAS,MAAMT,EAAYE,CAAI,GAAG,OAAOA,GACjD,UAAA,CAAC,OAAO,SAAS,UAAU,aAAa,EAAE,SAASA,CAAI,sBACrDK,GAAc,EAAA,SAASrB,MAAegB,GAAM,cAAcb,EAAa,CAAA,IAExE,gBAAAmB,EAACE,GAAc,EAAA,SAASxB,MAAegB,GACrC,UAAA,gBAAAM,EAACD,KAAc,EACjB,CAAA,EAEJ,CAAA,KAT6BL,CAU/B;AAAA,IAAA,CAEH;AAAA,IACD,gBAAAS;AAAA,MAACL;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,eAAe;AAAA,QACf,aAAY;AAAA,QAEZ,UAAA;AAAA,UAAA,gBAAAE,EAACC,KAAU,SAASL,GAAa,OAAM,gBAAe,UAAU,CAACd,GAC/D,UAAA,gBAAAkB;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,cACf,QAAQvB;AAAA,cACR,UAAUC,IAAsB,IAAI;AAAA,cACpC,KAAKI;AAAA,YAAA;AAAA,UAAA,GAET;AAAA,UACCS,KACC,gBAAAK;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,gBAAAzB;AAAA,cACA,aAAAC;AAAA,cACA,UAAAL;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC,GAED8B,KAAehC;"}
+{"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} />\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,MACFD,KAAA,QAAAA,EAAW,QAAQC;AAAA,KAGtB,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,IAAAX,EAAM,IAAI,CACTY,MAAA,gBAAAJ,EAACK,GAAK,EAAA,MAAAD,KAAiBA,CAAM,CAC9B;AAAA,IACD,gBAAAJ,EAACM,KAAgB,UAAAhB,GAAoB;AAAA,EACvC,EAAA,CAAA;AAEJ,CAAC,GAEDiB,IAAenB;"}

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

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

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

@@ -0,0 +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} />\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,CAAAK,wBACbC,GAAK,EAAA,MAAAD,KAAiBA,CAAM,CAC9B;AAAA,EACH,EAAA,CAAA;AAEJ,CAAC;"}