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

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

@@ -1,4 +1,4 @@
-import i, { css as l } from "styled-components";
+import e, { css as l } from "styled-components";
 import a from "../../assets/line-icons/icons/check.js";
 import d from "../../assets/line-icons/icons/down.js";
 import h from "../../assets/line-icons/icons/highlighter.js";
@@ -10,47 +10,45 @@ import $ from "../../assets/line-icons/icons/undo.js";
 import m from "../../assets/line-icons/icons/unlock.js";
 import p from "../ui/layout/flex-view.js";
 import { CANVAS_COLORS as c } from "./constants/constants.js";
-const W = i(p)`
-  border: 2px solid;
-`, S = i(u)(({
+const S = e(u)(({
   theme: r,
   $active: o,
   $activeColor: t,
   $shouldAnimate: s
 }) => {
-  const { colors: e } = r, n = o ? c[t] : e.REAL_BLACK_50;
+  const { colors: i } = r, n = o ? c[t] : i.REAL_BLACK_50;
   return l`
     position: relative;
     transition: top 0.3s ease-in-out;
     top: ${o && s ? "0px" : "8px"};
     cursor: ${o ? "auto" : "pointer"};
     .pencil-dark-shade {
-      fill: ${o ? n : e.GREY_3};
+      fill: ${o ? n : i.GREY_3};
     }
 
     .pencil-light-shade {
-      fill: ${o ? n : e.GREY_2};
+      fill: ${o ? n : i.GREY_2};
       opacity: ${o ? 0.3 : 1};
     }
 
     ${!o && l`
       &:hover {
         .pencil-dark-shade {
-          fill: ${e.GREY_4};
+          fill: ${i.GREY_4};
         }
         .pencil-light-shade {
-          fill: ${e.GREY_2};
+          fill: ${i.GREY_2};
         }
       }
     `}
   `;
-}), G = i(g)(({
+}), G = e(g)(({
   theme: r,
   $active: o,
   $activeColor: t,
   $shouldAnimate: s
 }) => {
-  const { colors: e } = r, n = o ? c[t] : e.REAL_BLACK_50;
+  const { colors: i } = r, n = o ? c[t] : i.REAL_BLACK_50;
   return l`
     cursor: ${o ? "auto" : "pointer"};
     position: relative;
@@ -58,36 +56,36 @@ const W = i(p)`
     top: ${o && s ? "0px" : "8px"};
 
     .ruler-rect-color {
-      fill: ${o ? n : e.GREY_3};
+      fill: ${o ? n : i.GREY_3};
     }
 
     .ruler-stripe-base {
-      fill: ${o ? n : e.GREY_2};
+      fill: ${o ? n : i.GREY_2};
       opacity: ${o ? 0.2 : 1};
     }
 
     .ruler-small-stripe {
-      fill: ${e.REAL_BLACK};
+      fill: ${i.REAL_BLACK};
     }
 
     ${!o && l`
       &:hover {
         .ruler-rect-color {
-          fill: ${e.GREY_4};
+          fill: ${i.GREY_4};
         }
         .ruler-stripe-base {
-          fill: ${e.GREY_3};
+          fill: ${i.GREY_3};
         }
       }
     `}
   `;
-}), Y = i(h)(({
+}), W = e(h)(({
   $active: r,
   theme: o,
   $activeColor: t,
   $shouldAnimate: s
 }) => {
-  const { colors: e } = o, n = r ? c[t] : e.REAL_BLACK_50;
+  const { colors: i } = o, n = r ? c[t] : i.REAL_BLACK_50;
   return l`
     cursor: ${r ? "auto" : "pointer"};
     position: relative;
@@ -125,13 +123,13 @@ const W = i(p)`
       }
     `}
   `;
-}), w = i(x)(({
+}), Y = e(x)(({
   $active: r,
   theme: o,
   $activeColor: t,
   $shouldAnimate: s
 }) => {
-  const { colors: e } = o, n = r ? c[t] : e.REAL_BLACK_50;
+  const { colors: i } = o, n = r ? c[t] : i.REAL_BLACK_50;
   return l`
     cursor: ${r ? "auto" : "pointer"};
     position: relative;
@@ -171,13 +169,13 @@ const W = i(p)`
       }
     `}
   `;
-}), H = i(f)`
+}), w = e(f)`
   width: 20px;
   height: 20px;
-`, P = i(m)`
+`, H = e(m)`
   width: 20px;
   height: 20px;
-`, T = i(p)(
+`, P = e(p)(
   ({ theme: r, $active: o }) => {
     const { colors: t } = r;
     return l`
@@ -217,13 +215,13 @@ const W = i(p)`
       `}
     `;
   }
-), U = i(a)`
+), T = e(a)`
   path {
     stroke: ${"white"};
   }
-`, j = i($)`
+`, U = e($)`
   transform: scaleX(-1);
-`, D = i(p)`
+`, j = e(p)`
   position: absolute;
   display: flex;
   justify-content: center;
@@ -231,7 +229,7 @@ const W = i(p)`
   transition:
     opacity 0.5s ease,
     transform 0.5s ease;
-`, O = i(p)(
+`, D = e(p)(
   ({ $canScribble: r, $canRender: o, $renderAs: t }) => `
   display: ${o ? "block" : "none"};
   opacity: ${r ? 1 : 0.5};
@@ -244,18 +242,18 @@ const W = i(p)`
     `}
   
 `
-), V = i(p)(
+), O = e(p)(
   ({ $color: r }) => `
 background: ${c[r]};
 `
-), z = i(d)`
+), V = e(d)`
   pointer-events: none;
   transition: transform 0.5s ease;
   transform: ${({ $isAnimating: r }) => r ? "rotate(180deg)" : "rotate(0deg)"};
-`, F = i(p)`
+`, z = e(p)`
   overflow: hidden;
   border-right: 1px solid ${({ theme: r }) => r.colors.GREY_1};
-`, M = i(p)`
+`, F = e(p)`
   position: absolute;
   padding: 8px 8px 0 8px;
   overflow: hidden;
@@ -271,21 +269,20 @@ background: ${c[r]};
   }
 `;
 export {
-  V as ColorPicker,
-  O as CueCanvasWrapper,
-  W as HWWrapper,
-  M as MenuWrapper,
-  D as PaletteWrapper,
-  F as PenIconWrapper,
-  j as RedoIcon,
-  U as StyledCheckIcon,
-  z as StyledDownIcon,
-  Y as StyledHighlighterWrapper,
-  H as StyledLockIcon,
+  O as ColorPicker,
+  D as CueCanvasWrapper,
+  F as MenuWrapper,
+  j as PaletteWrapper,
+  z as PenIconWrapper,
+  U as RedoIcon,
+  T as StyledCheckIcon,
+  V as StyledDownIcon,
+  W as StyledHighlighterWrapper,
+  w as StyledLockIcon,
   S as StyledPencilIcon,
   G as StyledRulerIcon,
-  w as StyledSketchWrapper,
-  P as StyledUnlockIcon,
-  T as StyledWrapper
+  Y as StyledSketchWrapper,
+  H as StyledUnlockIcon,
+  P as StyledWrapper
 };
 //# sourceMappingURL=cue-cavas-styled.js.map

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

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

@@ -1,81 +1,74 @@
-import { useMessageBrokerChannel as x } from "@cuemath/cue-message-broker";
-import { useState as E, useRef as F, useMemo as H, useCallback as g } from "react";
-const l = (r) => ({
-  userId: r.userId,
-  data: r.data,
-  height: r.height,
-  responseId: r.responseId,
-  gridName: r.gridName,
-  dimension: r.dimension
-}), W = (r, m, f, a = "canvas") => {
-  const [p, b] = E(
+import { useMessageBrokerChannel as q } from "@cuemath/cue-message-broker";
+import { useState as x, useRef as w, useMemo as E, useCallback as h } from "react";
+const I = (c) => ({
+  userId: c.userId,
+  data: c.data,
+  height: c.height,
+  responseId: c.responseId
+}), F = (c, f, g) => {
+  const [d, m] = x(
     () => {
-      var o, n;
-      const c = {};
-      if (!f) return c;
-      for (const { message: i } of f) {
-        const e = (o = i.payload) == null ? void 0 : o.eventPayload, s = e == null ? void 0 : e.responseId;
+      var o, r;
+      const n = {};
+      if (!g) return n;
+      for (const { message: a } of g) {
+        const e = (o = a.payload) == null ? void 0 : o.eventPayload, s = e == null ? void 0 : e.responseId;
         if (!(e != null && e.responseId)) continue;
-        const t = l(e);
-        s && c[s] ? (n = c[s]) == null || n.push(t) : c[s] = [t];
+        const t = I(e);
+        s && n[s] ? (r = n[s]) == null || r.push(t) : n[s] = [t];
       }
-      return c;
+      return n;
     }
-  ), u = F({}), C = H(
+  ), u = w({}), b = E(
     () => ({
-      channelId: r,
-      ttl: a === "canvas" ? 0 : 24,
-      logger: m
+      channelId: c,
+      ttl: 0,
+      logger: f
     }),
-    [r, m, a]
-  ), S = g((c, o) => {
-    u.current = { ...u.current, [c]: o };
-  }, []), M = g(
-    (c, o) => {
-      const n = {};
-      c.forEach((i) => {
-        var k;
-        const { payload: e } = i.message, { eventPayload: s } = e, t = s == null ? void 0 : s.responseId, B = s == null ? void 0 : s.data, j = s == null ? void 0 : s.userId, w = s == null ? void 0 : s.height, d = u.current[t];
-        if (!o && d)
-          d({
-            data: B,
-            height: w,
-            userId: j,
-            responseId: t,
-            gridName: s == null ? void 0 : s.gridName,
-            dimension: s == null ? void 0 : s.dimension
+    [c, f]
+  ), S = h((n, o) => {
+    u.current = { ...u.current, [n]: o };
+  }, []), C = h(
+    (n, o) => {
+      const r = {};
+      n.forEach((a) => {
+        var p;
+        const { payload: e } = a.message, { eventPayload: s } = e, t = s == null ? void 0 : s.responseId, R = s == null ? void 0 : s.data, B = s == null ? void 0 : s.userId, j = s == null ? void 0 : s.height, l = u.current[t];
+        if (!o && l)
+          l({
+            data: R,
+            height: j,
+            userId: B,
+            responseId: t
           });
         else {
-          const I = l(s);
-          t && n[t] ? (k = n[t]) == null || k.push(I) : n[t] = [I];
+          const k = I(s);
+          t && r[t] ? (p = r[t]) == null || p.push(k) : r[t] = [k];
         }
-      }), Object.keys(n).length > 0 && b((i) => {
-        const e = { ...i };
-        return Object.keys(n).forEach((s) => {
+      }), Object.keys(r).length > 0 && m((a) => {
+        const e = { ...a };
+        return Object.keys(r).forEach((s) => {
           var t;
-          s && e[s] ? (t = e[s]) == null || t.push(...n[s] ?? []) : e[s] = n[s] ?? [];
+          s && e[s] ? (t = e[s]) == null || t.push(...r[s] ?? []) : e[s] = r[s] ?? [];
         }), e;
       });
     },
     []
-  ), { publish: D, channelStatus: R, channel: h, channelMetadata: N, setChannelMetadata: O } = x({
-    channelOptions: C,
-    consumerFn: M,
-    metadataRequired: a === "whiteboard"
-  }), q = g(() => {
-    h && h.destroyChannel();
-  }, [h]);
+  ), { publish: D, channelStatus: M, channel: i } = q({
+    channelOptions: b,
+    consumerFn: C
+  }), O = h(() => {
+    i && i.destroyChannel();
+  }, [i]);
   return {
     publishStrokes: D,
-    channelStatus: R,
-    closeChannel: q,
-    initialStrokesData: p,
-    registerCallback: S,
-    setChannelMetadata: O,
-    channelMetadata: N
+    channelStatus: M,
+    closeChannel: O,
+    initialStrokesData: d,
+    registerCallback: S
   };
-}, A = W;
+}, $ = F;
 export {
-  A as default
+  $ as default
 };
 //# sourceMappingURL=use-canvas-sync-broker.js.map

package/dist/features/cue-canvas/hooks/use-canvas-sync-broker.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-canvas-sync-broker.js","sources":["../../../../src/features/cue-canvas/hooks/use-canvas-sync-broker.ts"],"sourcesContent":["import type {\n  IActionData,\n  ICanvasUpdateConfig,\n  IPublishData,\n  IViewport,\n  TCueCanvasChangeDataObject,\n  TCueCanvasGridName,\n  TRenderAs,\n} from '../types/cue-canvas';\n\nimport { useMessageBrokerChannel, type IChannelMessage } from '@cuemath/cue-message-broker';\nimport { useMemo, useCallback, useState, useRef } from 'react';\n\ninterface IMessage {\n  eventName: string;\n  eventPayload: {\n    responseId: string;\n    data: TCueCanvasChangeDataObject;\n    userId: string;\n    height: number;\n    gridName?: TCueCanvasGridName;\n    dimension?: IViewport;\n  };\n}\n\nconst extractStrokeData = (payload: IMessage['eventPayload']): IActionData => ({\n  userId: payload.userId,\n  data: payload.data,\n  height: payload.height,\n  responseId: payload.responseId,\n  gridName: payload.gridName,\n  dimension: payload.dimension,\n});\n\nconst useCanvasSyncBroker = (\n  channelId: string,\n  logEvent: (type: string, payload?: Record<string, unknown>) => void,\n  initialCanvasData?: Array<IChannelMessage>,\n  type: TRenderAs = 'canvas',\n) => {\n  const [initialStrokesData, setInitialStrokesData] = useState<Record<string, IActionData[]>>(\n    () => {\n      const map: Record<string, IActionData[]> = {};\n\n      if (!initialCanvasData) return map;\n\n      for (const { message } of initialCanvasData) {\n        const payload = (message.payload as IMessage)?.eventPayload;\n        const qrId = payload?.responseId;\n\n        if (!payload?.responseId) continue;\n\n        const strokeData = extractStrokeData(payload);\n\n        if (qrId && map[qrId]) {\n          map[qrId]?.push(strokeData);\n        } else {\n          map[qrId] = [strokeData];\n        }\n      }\n\n      return map;\n    },\n  );\n  const callbacksMapRef = useRef<Record<string, (data: IActionData) => void>>({});\n\n  const channelOptions = useMemo(\n    () => ({\n      channelId,\n      ttl: type === 'canvas' ? 0 : 24,\n      logger: logEvent,\n    }),\n    [channelId, logEvent, type],\n  );\n\n  const registerCallback = useCallback((qrId: string, cb: (data: IActionData) => void) => {\n    callbacksMapRef.current = { ...callbacksMapRef.current, [qrId]: cb };\n  }, []);\n\n  const onMessageReceive = useCallback(\n    (messages: Array<IChannelMessage>, initialData?: boolean) => {\n      const strokesPerWidgetMap: Record<string, Array<IActionData>> = {};\n\n      messages.forEach(message => {\n        const { payload } = message.message;\n        const { eventPayload } = payload as IMessage;\n        const qrId = eventPayload?.responseId as string;\n        const strokes = eventPayload?.data;\n        const userId = eventPayload?.userId;\n        const canvasHeight = eventPayload?.height;\n        const widgetOnReceiveCallback = callbacksMapRef.current[qrId];\n\n        if (!initialData && widgetOnReceiveCallback) {\n          widgetOnReceiveCallback({\n            data: strokes,\n            height: canvasHeight,\n            userId,\n            responseId: qrId,\n            gridName: eventPayload?.gridName,\n            dimension: eventPayload?.dimension,\n          });\n        } else {\n          const strokeData = extractStrokeData(eventPayload);\n\n          if (qrId && strokesPerWidgetMap[qrId]) {\n            strokesPerWidgetMap[qrId]?.push(strokeData);\n          } else {\n            strokesPerWidgetMap[qrId] = [strokeData];\n          }\n        }\n      });\n\n      if (Object.keys(strokesPerWidgetMap).length > 0) {\n        setInitialStrokesData(prevData => {\n          const currentData = { ...prevData };\n\n          Object.keys(strokesPerWidgetMap).forEach(key => {\n            if (key && currentData[key]) {\n              currentData[key]?.push(...(strokesPerWidgetMap[key] ?? []));\n            } else {\n              currentData[key] = strokesPerWidgetMap[key] ?? [];\n            }\n          });\n\n          return currentData;\n        });\n      }\n    },\n    [],\n  );\n\n  const { publish, channelStatus, channel, channelMetadata, setChannelMetadata } =\n    useMessageBrokerChannel<IPublishData, ICanvasUpdateConfig>({\n      channelOptions,\n      consumerFn: onMessageReceive,\n      metadataRequired: type === 'whiteboard',\n    });\n\n  const closeChannel = useCallback(() => {\n    if (channel) {\n      channel.destroyChannel();\n    }\n  }, [channel]);\n\n  return {\n    publishStrokes: publish,\n    channelStatus,\n    closeChannel,\n    initialStrokesData,\n    registerCallback,\n    setChannelMetadata,\n    channelMetadata,\n  };\n};\n\nexport default useCanvasSyncBroker;\n"],"names":["extractStrokeData","payload","useCanvasSyncBroker","channelId","logEvent","initialCanvasData","type","initialStrokesData","setInitialStrokesData","useState","map","message","_a","qrId","strokeData","_b","callbacksMapRef","useRef","channelOptions","useMemo","registerCallback","useCallback","cb","onMessageReceive","messages","initialData","strokesPerWidgetMap","eventPayload","strokes","userId","canvasHeight","widgetOnReceiveCallback","prevData","currentData","key","publish","channelStatus","channel","channelMetadata","setChannelMetadata","useMessageBrokerChannel","closeChannel","useCanvasSyncBroker$1"],"mappings":"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"}
+{"version":3,"file":"use-canvas-sync-broker.js","sources":["../../../../src/features/cue-canvas/hooks/use-canvas-sync-broker.ts"],"sourcesContent":["import type { IActionData, TCueCanvasChangeDataObject } from '../types/cue-canvas';\n\nimport { useMessageBrokerChannel, type IChannelMessage } from '@cuemath/cue-message-broker';\nimport { useMemo, useCallback, useState, useRef } from 'react';\n\ninterface IMessage {\n  eventName: string;\n  eventPayload: {\n    responseId: string;\n    data: TCueCanvasChangeDataObject;\n    userId: string;\n    height: number;\n  };\n}\n\nconst extractStrokeData = (payload: IMessage['eventPayload']): IActionData => ({\n  userId: payload.userId,\n  data: payload.data,\n  height: payload.height,\n  responseId: payload.responseId,\n});\n\nconst useCanvasSyncBroker = (\n  channelId: string,\n  logEvent: (type: string, payload?: Record<string, unknown>) => void,\n  initialCanvasData?: Array<IChannelMessage>,\n) => {\n  const [initialStrokesData, setInitialStrokesData] = useState<Record<string, IActionData[]>>(\n    () => {\n      const map: Record<string, IActionData[]> = {};\n\n      if (!initialCanvasData) return map;\n\n      for (const { message } of initialCanvasData) {\n        const payload = (message.payload as IMessage)?.eventPayload;\n        const qrId = payload?.responseId;\n\n        if (!payload?.responseId) continue;\n\n        const strokeData = extractStrokeData(payload);\n\n        if (qrId && map[qrId]) {\n          map[qrId]?.push(strokeData);\n        } else {\n          map[qrId] = [strokeData];\n        }\n      }\n\n      return map;\n    },\n  );\n  const callbacksMapRef = useRef<Record<string, (data: IActionData) => void>>({});\n\n  const channelOptions = useMemo(\n    () => ({\n      channelId,\n      ttl: 0,\n      logger: logEvent,\n    }),\n    [channelId, logEvent],\n  );\n\n  const registerCallback = useCallback((qrId: string, cb: (data: IActionData) => void) => {\n    callbacksMapRef.current = { ...callbacksMapRef.current, [qrId]: cb };\n  }, []);\n\n  const onMessageReceive = useCallback(\n    (messages: Array<IChannelMessage>, initialData?: boolean) => {\n      const strokesPerWidgetMap: Record<string, Array<IActionData>> = {};\n\n      messages.forEach(message => {\n        const { payload } = message.message;\n        const { eventPayload } = payload as IMessage;\n        const qrId = eventPayload?.responseId as string;\n        const strokes = eventPayload?.data;\n        const userId = eventPayload?.userId;\n        const canvasHeight = eventPayload?.height;\n        const widgetOnReceiveCallback = callbacksMapRef.current[qrId];\n\n        if (!initialData && widgetOnReceiveCallback) {\n          widgetOnReceiveCallback({\n            data: strokes,\n            height: canvasHeight,\n            userId,\n            responseId: qrId,\n          });\n        } else {\n          const strokeData = extractStrokeData(eventPayload);\n\n          if (qrId && strokesPerWidgetMap[qrId]) {\n            strokesPerWidgetMap[qrId]?.push(strokeData);\n          } else {\n            strokesPerWidgetMap[qrId] = [strokeData];\n          }\n        }\n      });\n\n      if (Object.keys(strokesPerWidgetMap).length > 0) {\n        setInitialStrokesData(prevData => {\n          const currentData = { ...prevData };\n\n          Object.keys(strokesPerWidgetMap).forEach(key => {\n            if (key && currentData[key]) {\n              currentData[key]?.push(...(strokesPerWidgetMap[key] ?? []));\n            } else {\n              currentData[key] = strokesPerWidgetMap[key] ?? [];\n            }\n          });\n\n          return currentData;\n        });\n      }\n    },\n    [],\n  );\n\n  const { publish, channelStatus, channel } = useMessageBrokerChannel({\n    channelOptions,\n    consumerFn: onMessageReceive,\n  });\n\n  const closeChannel = useCallback(() => {\n    if (channel) {\n      channel.destroyChannel();\n    }\n  }, [channel]);\n\n  return {\n    publishStrokes: publish,\n    channelStatus,\n    closeChannel,\n    initialStrokesData,\n    registerCallback,\n  };\n};\n\nexport default useCanvasSyncBroker;\n"],"names":["extractStrokeData","payload","useCanvasSyncBroker","channelId","logEvent","initialCanvasData","initialStrokesData","setInitialStrokesData","useState","map","message","_a","qrId","strokeData","_b","callbacksMapRef","useRef","channelOptions","useMemo","registerCallback","useCallback","cb","onMessageReceive","messages","initialData","strokesPerWidgetMap","eventPayload","strokes","userId","canvasHeight","widgetOnReceiveCallback","prevData","currentData","key","publish","channelStatus","channel","useMessageBrokerChannel","closeChannel","useCanvasSyncBroker$1"],"mappings":"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"}

package/dist/features/cue-canvas/hooks/use-cue-canvas-actions.js

@@ -1,32 +1,28 @@
-import { useContext as a, useMemo as m } from "react";
-import v from "../cue-canvas-context.js";
-const A = () => {
+import { useContext as c, useMemo as l } from "react";
+import a from "../cue-canvas-context.js";
+const m = () => {
   const {
-    activeInstance: o,
-    setActiveTool: t,
+    activeInstance: t,
+    setActiveTool: o,
     activeTool: e,
-    setActiveInstance: r,
+    setActiveInstance: i,
     activeColor: s,
-    setActiveColor: i,
-    homeworkId: n,
-    setHomeworkId: c
-  } = a(v), l = m(
+    setActiveColor: n
+  } = c(a), r = l(
     () => e ? ["pen", "ruler", "highlighter", "marker"].includes(e) : !1,
     [e]
   );
   return {
-    activeInstance: o,
-    setActiveTool: t,
+    activeInstance: t,
+    setActiveTool: o,
     activeTool: e,
-    setActiveInstance: r,
+    setActiveInstance: i,
     activeColor: s,
-    setActiveColor: i,
-    isWritingToolActive: l,
-    homeworkId: n,
-    setHomeworkId: c
+    setActiveColor: n,
+    isWritingToolActive: r
   };
 };
 export {
-  A as useCueCanvasActions
+  m as useCueCanvasActions
 };
 //# sourceMappingURL=use-cue-canvas-actions.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-cue-canvas-actions.js","sources":["../../../../src/features/cue-canvas/hooks/use-cue-canvas-actions.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport PolyContext from '../cue-canvas-context';\n\nexport const useCueCanvasActions = () => {\n  const {\n    activeInstance,\n    setActiveTool,\n    activeTool,\n    setActiveInstance,\n    activeColor,\n    setActiveColor,\n    homeworkId,\n    setHomeworkId,\n  } = useContext(PolyContext);\n\n  const isWritingToolActive = useMemo(\n    () => (activeTool ? ['pen', 'ruler', 'highlighter', 'marker'].includes(activeTool) : false),\n    [activeTool],\n  );\n\n  return {\n    activeInstance,\n    setActiveTool,\n    activeTool,\n    setActiveInstance,\n    activeColor,\n    setActiveColor,\n    isWritingToolActive,\n    homeworkId,\n    setHomeworkId,\n  };\n};\n"],"names":["useCueCanvasActions","activeInstance","setActiveTool","activeTool","setActiveInstance","activeColor","setActiveColor","homeworkId","setHomeworkId","useContext","PolyContext","isWritingToolActive","useMemo"],"mappings":";;AAIO,MAAMA,IAAsB,MAAM;AACjC,QAAA;AAAA,IACJ,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,EAAA,IACEC,EAAWC,CAAW,GAEpBC,IAAsBC;AAAA,IAC1B,MAAOT,IAAa,CAAC,OAAO,SAAS,eAAe,QAAQ,EAAE,SAASA,CAAU,IAAI;AAAA,IACrF,CAACA,CAAU;AAAA,EAAA;AAGN,SAAA;AAAA,IACL,gBAAAF;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,qBAAAK;AAAA,IACA,YAAAJ;AAAA,IACA,eAAAC;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"use-cue-canvas-actions.js","sources":["../../../../src/features/cue-canvas/hooks/use-cue-canvas-actions.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport PolyContext from '../cue-canvas-context';\n\nexport const useCueCanvasActions = () => {\n  const {\n    activeInstance,\n    setActiveTool,\n    activeTool,\n    setActiveInstance,\n    activeColor,\n    setActiveColor,\n  } = useContext(PolyContext);\n\n  const isWritingToolActive = useMemo(\n    () => (activeTool ? ['pen', 'ruler', 'highlighter', 'marker'].includes(activeTool) : false),\n    [activeTool],\n  );\n\n  return {\n    activeInstance,\n    setActiveTool,\n    activeTool,\n    setActiveInstance,\n    activeColor,\n    setActiveColor,\n    isWritingToolActive,\n  };\n};\n"],"names":["useCueCanvasActions","activeInstance","setActiveTool","activeTool","setActiveInstance","activeColor","setActiveColor","useContext","PolyContext","isWritingToolActive","useMemo"],"mappings":";;AAIO,MAAMA,IAAsB,MAAM;AACjC,QAAA;AAAA,IACJ,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,EAAA,IACEC,EAAWC,CAAW,GAEpBC,IAAsBC;AAAA,IAC1B,MAAOP,IAAa,CAAC,OAAO,SAAS,eAAe,QAAQ,EAAE,SAASA,CAAU,IAAI;AAAA,IACrF,CAACA,CAAU;AAAA,EAAA;AAGN,SAAA;AAAA,IACL,gBAAAF;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,qBAAAG;AAAA,EAAA;AAEJ;"}

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

@@ -1,27 +1,27 @@
 import { jsxs as a, jsx as r } from "react/jsx-runtime";
 import { memo as f, useRef as C, useCallback as $ } from "react";
-import t from "../../ui/buttons/clickable/clickable.js";
+import n from "../../ui/buttons/clickable/clickable.js";
 import h from "../../ui/hooks/use-context-menu-click-handler.js";
-import l from "../../ui/layout/flex-view.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 c } from "../hooks/use-cue-canvas-actions.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: d }) => {
-  const { activeInstance: e } = c(), n = C(null), { activeTool: m } = c(), { menuVisible: u, onMenuClick: i } = h(
-    n,
+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), i();
+      e == null || e.changeGrid(o);
     },
-    [e, i]
+    [e]
   );
-  return /* @__PURE__ */ a(l, { $gutterX: 0.25, ref: n, children: [
-    /* @__PURE__ */ r(t, { onClick: i, label: "grid", children: /* @__PURE__ */ r(k, { $active: m === "grid", children: /* @__PURE__ */ r(d, {}) }) }),
-    u && /* @__PURE__ */ r(
+  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",
@@ -33,12 +33,12 @@ const A = f(({ GridIcon: d }) => {
         children: b.map((o) => {
           const s = x[o];
           return /* @__PURE__ */ r(
-            t,
+            n,
             {
               onClick: () => p(o),
               label: o,
               children: /* @__PURE__ */ r(
-                l,
+                t,
                 {
                   $width: 48,
                   $height: 48,

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

@@ -1 +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      onMenuClick();\n    },\n    [cueCanvas, onMenuClick],\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,IACVJ;IACd;AAAA,IACA,CAACN,GAAWM,CAAW;AAAA,EAAA;AAGzB,SACG,gBAAAK,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;"}
+{"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;"}