@cuemath/leap 2.8.53-as1 → 2.8.53-as3

package/dist/features/cue-canvas/sidebar/puzzles/puzzle-menu.js

@@ -0,0 +1,133 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { memo as j, useState as f, useCallback as c } from "react";
+import { ILLUSTRATIONS as O } from "../../../../assets/illustrations/illustrations.js";
+import V from "../../../hooks/use-debounce.js";
+import { Loader as Y } from "../../../ui/buttons/button/button-styled.js";
+import G from "../../../ui/buttons/clickable/clickable.js";
+import X from "../../../ui/inputs/searchable-input/searchable-input.js";
+import h from "../../../ui/layout/flex-view.js";
+import H from "../../../ui/text/text.js";
+import N from "./filter-selection-menu.js";
+import U from "./filters.js";
+import W from "./hooks/use-fetch-cue-canvas-activity.js";
+import K from "./launch-puzzle.js";
+import q from "./puzzle-menu-header.js";
+import { MenuContainer as x, FilterSidebar as B, SearchHeaderWrapper as J, ActivitiesList as Q, ActivityImage as Z, ActivityTitle as ee, EmptyStateContainer as te } from "./puzzles-styled.js";
+import { FILTER_KEYS as p } from "./utils.js";
+const re = ({ toggleMenu: y, studentGrade: F }) => {
+  const { isPuzzlesProcessing: P, setActivityFilters: a, puzzlesData: _ } = W(F), { filters: L, results: i } = _ || {}, {
+    activity_tiles: n,
+    activity_topics: l,
+    activity_types: g,
+    grades: m,
+    search: z
+  } = L || {}, [$, C] = f(), [S, T] = f(
+    null
+  ), [I, b] = f(z || ""), v = V((e) => {
+    e !== z && d({ search: e });
+  }, 300), D = c(
+    (e) => {
+      b(e), v(e);
+    },
+    [v]
+  ), k = c((e) => {
+    T((r) => r === e ? null : e);
+  }, []), w = c(() => {
+    T(null);
+  }, []), d = c(
+    (e) => {
+      const r = Object.keys(e)[0], s = r && e[r];
+      a((u) => ({
+        ...u,
+        [r]: s
+      }));
+    },
+    [a]
+  ), E = c(() => {
+    a({}), b("");
+  }, [a]), M = c(() => {
+    C(void 0);
+  }, []);
+  if (P && (!n || (n == null ? void 0 : n.length) === 0) && (!l || (l == null ? void 0 : l.length) === 0))
+    return /* @__PURE__ */ o(x, { $justifyContent: "center", $alignItems: "center", children: [
+      /* @__PURE__ */ t(Y, { src: O.LOADER, alt: "Loader", $size: "small" }),
+      ";"
+    ] });
+  if ($)
+    return /* @__PURE__ */ t(
+      K,
+      {
+        launchPuzzleData: $,
+        onMenuVisibilityChange: M,
+        toggleMenu: y
+      }
+    );
+  if (S) {
+    let e, r;
+    switch (S) {
+      case "grades":
+        e = m, r = p.ACTIVITY_GRADES;
+        break;
+      case "topics":
+        e = l, r = p.ACTIVITY_TOPICS;
+        break;
+      case "tiles":
+        e = n, r = p.ACTIVITY_TILES;
+        break;
+      default:
+        return null;
+    }
+    return e ? /* @__PURE__ */ t(
+      N,
+      {
+        closeAllPopups: w,
+        menuItems: e,
+        onFiltersChange: d,
+        type: r
+      }
+    ) : null;
+  }
+  return /* @__PURE__ */ o(x, { children: [
+    /* @__PURE__ */ t(q, { toggleMenu: y, onReset: E }),
+    /* @__PURE__ */ o(h, { $flexDirection: "row", $alignItems: "flex-start", children: [
+      /* @__PURE__ */ t(B, { $width: "35%", $gutterX: 1, children: m && n && l && g && /* @__PURE__ */ t(
+        U,
+        {
+          handleFiltersChange: d,
+          filterGrades: m,
+          filterTiles: n,
+          filterTypes: g,
+          filterTopics: l,
+          togglePopup: k
+        }
+      ) }),
+      /* @__PURE__ */ o(h, { $width: "65%", children: [
+        /* @__PURE__ */ t(J, { $heightX: 4, $alignItems: "center", $justifyContent: "center", children: /* @__PURE__ */ t(
+          X,
+          {
+            value: I,
+            onSearchTextChange: D,
+            renderAs: "secondary",
+            width: "99%",
+            size: "regular",
+            label: "Type topic name...",
+            searchOnClear: !0
+          }
+        ) }),
+        /* @__PURE__ */ t(h, { $gutterX: 1, children: /* @__PURE__ */ t(H, { $renderAs: "body3", $color: "GREY_2", children: i && i.length > 0 ? `${i.length} activities found` : I ? "No activities found" : null }) }),
+        /* @__PURE__ */ t(Q, { $flexDirection: "row", $flexWrap: !0, $justifyContent: "space-evenly", children: i && (i == null ? void 0 : i.length) > 0 ? i.map((e) => {
+          var A;
+          const { activity_url: r, name: s, id: u } = e, R = (A = r.split("_")[0]) == null ? void 0 : A.concat("_thumbnail.png");
+          return r ? /* @__PURE__ */ t(G, { onClick: () => C(e), label: "puzzle", children: /* @__PURE__ */ o(h, { $alignItems: "center", children: [
+            /* @__PURE__ */ t(Z, { title: s, id: u, src: R }),
+            s && /* @__PURE__ */ t(ee, { children: s })
+          ] }) }, u) : null;
+        }) : /* @__PURE__ */ t(te, { children: "Use Filters or Search to find activities" }) })
+      ] })
+    ] })
+  ] });
+}, $e = j(re);
+export {
+  $e as default
+};
+//# sourceMappingURL=puzzle-menu.js.map

package/dist/features/cue-canvas/sidebar/puzzles/puzzle-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"puzzle-menu.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/puzzle-menu.tsx"],"sourcesContent":["import type { IGetPuzzles, IPuzzlesResultData } from './api/get-puzzles';\nimport type { FilterType, PuzzleMenuProps, TActiveFilterMenuType } from './puzzles-type';\n\nimport { memo, useCallback, useState } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport useDebounce from '../../../hooks/use-debounce';\nimport { Loader } from '../../../ui/buttons/button/button-styled';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport SearchableInput from '../../../ui/inputs/searchable-input/searchable-input';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport FilterSelectionMenu from './filter-selection-menu';\nimport Filters from './filters';\nimport useFetchCueCanvasActivity from './hooks/use-fetch-cue-canvas-activity';\nimport LaunchPuzzle from './launch-puzzle';\nimport PuzzleMenuHeader from './puzzle-menu-header';\nimport * as Styled from './puzzles-styled';\nimport { FILTER_KEYS } from './utils';\n\nconst PuzzleMenu: React.FC<PuzzleMenuProps> = ({ toggleMenu, studentGrade }) => {\n  const { isPuzzlesProcessing, setActivityFilters, puzzlesData } =\n    useFetchCueCanvasActivity(studentGrade);\n\n  const { filters, results: puzzles } = puzzlesData || {};\n  const {\n    activity_tiles: filterTiles,\n    activity_topics: filterTopics,\n    activity_types: filterTypes,\n    grades: filterGrades,\n    search: filterSearch,\n  } = filters || {};\n\n  const [launchPuzzleData, setLaunchPuzzlesData] = useState<IPuzzlesResultData | undefined>();\n  const [activeFilterMenuType, setActiveFilterMenuType] = useState<TActiveFilterMenuType | null>(\n    null,\n  );\n  const [searchText, setSearchText] = useState(filterSearch || '');\n\n  const debouncedSearch = useDebounce((value: string) => {\n    if (value !== filterSearch) {\n      handleFiltersChange({ search: value });\n    }\n  }, 300);\n\n  const handleSearchChange = useCallback(\n    (value: string) => {\n      setSearchText(value);\n      debouncedSearch(value);\n    },\n    [debouncedSearch],\n  );\n\n  const togglePopup = useCallback((popupType: TActiveFilterMenuType) => {\n    setActiveFilterMenuType(prev => (prev === popupType ? null : popupType));\n  }, []);\n\n  const closeAllPopups = useCallback(() => {\n    setActiveFilterMenuType(null);\n  }, []);\n\n  const handleFiltersChange = useCallback(\n    (filterChange: IGetPuzzles) => {\n      const filterType = Object.keys(filterChange)[0] as FilterType;\n      const value = filterType && filterChange[filterType];\n\n      setActivityFilters(prevFilters => ({\n        ...prevFilters,\n        [filterType]: value,\n      }));\n    },\n    [setActivityFilters],\n  );\n\n  const handleReset = useCallback(() => {\n    setActivityFilters({});\n    setSearchText('');\n  }, [setActivityFilters]);\n\n  const clearPuzzleData = useCallback(() => {\n    setLaunchPuzzlesData(undefined);\n  }, []);\n\n  if (\n    isPuzzlesProcessing &&\n    (!filterTiles || filterTiles?.length === 0) &&\n    (!filterTopics || filterTopics?.length === 0)\n  ) {\n    return (\n      <Styled.MenuContainer $justifyContent=\"center\" $alignItems=\"center\">\n        <Loader src={ILLUSTRATIONS.LOADER} alt=\"Loader\" $size=\"small\" />;\n      </Styled.MenuContainer>\n    );\n  }\n\n  if (launchPuzzleData) {\n    return (\n      <LaunchPuzzle\n        launchPuzzleData={launchPuzzleData}\n        onMenuVisibilityChange={clearPuzzleData}\n        toggleMenu={toggleMenu}\n      />\n    );\n  }\n\n  if (activeFilterMenuType) {\n    let menuItems;\n    let filterType: FilterType;\n\n    switch (activeFilterMenuType) {\n      case 'grades':\n        menuItems = filterGrades;\n        filterType = FILTER_KEYS.ACTIVITY_GRADES as FilterType;\n        break;\n      case 'topics':\n        menuItems = filterTopics;\n        filterType = FILTER_KEYS.ACTIVITY_TOPICS as FilterType;\n        break;\n      case 'tiles':\n        menuItems = filterTiles;\n        filterType = FILTER_KEYS.ACTIVITY_TILES as FilterType;\n        break;\n      default:\n        return null;\n    }\n\n    if (!menuItems) return null;\n\n    return (\n      <FilterSelectionMenu\n        closeAllPopups={closeAllPopups}\n        menuItems={menuItems}\n        onFiltersChange={handleFiltersChange}\n        type={filterType}\n      />\n    );\n  }\n\n  return (\n    <Styled.MenuContainer>\n      <PuzzleMenuHeader toggleMenu={toggleMenu} onReset={handleReset} />\n      <FlexView $flexDirection=\"row\" $alignItems=\"flex-start\">\n        <Styled.FilterSidebar $width=\"35%\" $gutterX={1}>\n          {filterGrades && filterTiles && filterTopics && filterTypes && (\n            <Filters\n              handleFiltersChange={handleFiltersChange}\n              filterGrades={filterGrades}\n              filterTiles={filterTiles}\n              filterTypes={filterTypes}\n              filterTopics={filterTopics}\n              togglePopup={togglePopup}\n            />\n          )}\n        </Styled.FilterSidebar>\n        <FlexView $width=\"65%\">\n          <Styled.SearchHeaderWrapper $heightX={4} $alignItems=\"center\" $justifyContent=\"center\">\n            <SearchableInput\n              value={searchText}\n              onSearchTextChange={handleSearchChange}\n              renderAs=\"secondary\"\n              width=\"99%\"\n              size=\"regular\"\n              label=\"Type topic name...\"\n              searchOnClear\n            />\n          </Styled.SearchHeaderWrapper>\n          <FlexView $gutterX={1}>\n            <Text $renderAs=\"body3\" $color=\"GREY_2\">\n              {puzzles && puzzles.length > 0\n                ? `${puzzles.length} activities found`\n                : searchText\n                  ? 'No activities found'\n                  : null}\n            </Text>\n          </FlexView>\n          <Styled.ActivitiesList $flexDirection=\"row\" $flexWrap $justifyContent=\"space-evenly\">\n            {puzzles && puzzles?.length > 0 ? (\n              puzzles.map(activity => {\n                const { activity_url: reference, name, id } = activity;\n                const thumbnailSrc = reference.split('_')[0]?.concat('_thumbnail.png');\n\n                if (!reference) return null;\n\n                return (\n                  <Clickable onClick={() => setLaunchPuzzlesData(activity)} key={id} label=\"puzzle\">\n                    <FlexView $alignItems=\"center\">\n                      <Styled.ActivityImage title={name} id={id} src={thumbnailSrc} />\n                      {name && <Styled.ActivityTitle>{name}</Styled.ActivityTitle>}\n                    </FlexView>\n                  </Clickable>\n                );\n              })\n            ) : (\n              <Styled.EmptyStateContainer>\n                Use Filters or Search to find activities\n              </Styled.EmptyStateContainer>\n            )}\n          </Styled.ActivitiesList>\n        </FlexView>\n      </FlexView>\n    </Styled.MenuContainer>\n  );\n};\n\nexport default memo(PuzzleMenu);\n"],"names":["PuzzleMenu","toggleMenu","studentGrade","isPuzzlesProcessing","setActivityFilters","puzzlesData","useFetchCueCanvasActivity","filters","puzzles","filterTiles","filterTopics","filterTypes","filterGrades","filterSearch","launchPuzzleData","setLaunchPuzzlesData","useState","activeFilterMenuType","setActiveFilterMenuType","searchText","setSearchText","debouncedSearch","useDebounce","value","handleFiltersChange","handleSearchChange","useCallback","togglePopup","popupType","prev","closeAllPopups","filterChange","filterType","prevFilters","handleReset","clearPuzzleData","Styled.MenuContainer","jsx","Loader","ILLUSTRATIONS","LaunchPuzzle","menuItems","FILTER_KEYS","FilterSelectionMenu","jsxs","PuzzleMenuHeader","FlexView","Styled.FilterSidebar","Filters","Styled.SearchHeaderWrapper","SearchableInput","Text","Styled.ActivitiesList","activity","reference","name","id","thumbnailSrc","_a","Clickable","Styled.ActivityImage","Styled.ActivityTitle","Styled.EmptyStateContainer","PuzzleMenu$1","memo"],"mappings":"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"}

package/dist/features/cue-canvas/sidebar/puzzles/puzzles-styled.js

@@ -0,0 +1,96 @@
+import r from "styled-components";
+import e from "../../../ui/layout/flex-view.js";
+import t from "../../../ui/text/text.js";
+const s = r(e)`
+  position: absolute;
+  top: 38px;
+  left: 16px;
+  width: 650px;
+  height: 438px;
+  border-radius: 6px;
+  background: #292734;
+  box-shadow: 0px 4px 8px ${({ theme: o }) => o.colors.BLACK_T_20};
+`, d = r.img`
+  position: relative;
+  width: 160px;
+  height: 120px;
+  border: 1px solid white;
+  border-radius: 8px;
+  margin: 16px;
+  background-color: black;
+  cursor: pointer;
+`, a = r.div`
+  color: white;
+  cursor: pointer;
+  width: 150px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`, p = r.div`
+  width: 336px;
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${({ theme: o }) => o.colors.GREY_4};
+`, b = r(e)`
+  max-height: 300px;
+  width: 100%;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    border-radius: 6px;
+    background-color: ${({ theme: o }) => o.colors.WHITE};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    background: ${({ theme: o }) => o.colors.REAL_BLACK_60};
+  }
+`, n = r(e)`
+  background: #292734;
+
+  & > div {
+    width: calc(100% - 32px);
+  }
+`, x = r(e)`
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    border-radius: 6px;
+    background-color: ${({ theme: o }) => o.colors.WHITE};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    background: ${({ theme: o }) => o.colors.REAL_BLACK_60};
+  }
+`, h = r(e)`
+  border-right: 1px solid ${({ theme: o }) => o.colors.GREY_4};
+  height: 385px;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    border-radius: 6px;
+    background-color: ${({ theme: o }) => o.colors.WHITE};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    background: ${({ theme: o }) => o.colors.REAL_BLACK_60};
+  }
+`, u = r(t)`
+  width: 130px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+export {
+  b as ActivitiesList,
+  d as ActivityImage,
+  a as ActivityTitle,
+  x as CheckboxWrapper,
+  p as EmptyStateContainer,
+  h as FilterSidebar,
+  s as MenuContainer,
+  n as SearchHeaderWrapper,
+  u as SelectedGrades
+};
+//# sourceMappingURL=puzzles-styled.js.map

package/dist/features/cue-canvas/sidebar/puzzles/puzzles-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"puzzles-styled.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/puzzles-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nconst MenuContainer = styled(FlexView)`\n  position: absolute;\n  top: 38px;\n  left: 16px;\n  width: 650px;\n  height: 438px;\n  border-radius: 6px;\n  background: #292734;\n  box-shadow: 0px 4px 8px ${({ theme }) => theme.colors.BLACK_T_20};\n`;\n\nconst ActivityImage = styled.img`\n  position: relative;\n  width: 160px;\n  height: 120px;\n  border: 1px solid white;\n  border-radius: 8px;\n  margin: 16px;\n  background-color: black;\n  cursor: pointer;\n`;\n\nconst ActivityTitle = styled.div`\n  color: white;\n  cursor: pointer;\n  width: 150px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`;\n\nconst EmptyStateContainer = styled.div`\n  width: 336px;\n  height: 300px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: ${({ theme }) => theme.colors.GREY_4};\n`;\n\nconst ActivitiesList = styled(FlexView)`\n  max-height: 300px;\n  width: 100%;\n  overflow-y: auto;\n  &::-webkit-scrollbar {\n    border-radius: 6px;\n    background-color: ${({ theme }) => theme.colors.WHITE};\n  }\n\n  &::-webkit-scrollbar-thumb {\n    border-radius: 6px;\n    background: ${({ theme }) => theme.colors.REAL_BLACK_60};\n  }\n`;\n\nconst SearchHeaderWrapper = styled(FlexView)<{ $noBorder?: boolean }>`\n  background: #292734;\n\n  & > div {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst CheckboxWrapper = styled(FlexView)`\n  overflow-y: auto;\n  &::-webkit-scrollbar {\n    border-radius: 6px;\n    background-color: ${({ theme }) => theme.colors.WHITE};\n  }\n\n  &::-webkit-scrollbar-thumb {\n    border-radius: 6px;\n    background: ${({ theme }) => theme.colors.REAL_BLACK_60};\n  }\n`;\n\nconst FilterSidebar = styled(FlexView)`\n  border-right: 1px solid ${({ theme }) => theme.colors.GREY_4};\n  height: 385px;\n  overflow-y: auto;\n  &::-webkit-scrollbar {\n    border-radius: 6px;\n    background-color: ${({ theme }) => theme.colors.WHITE};\n  }\n\n  &::-webkit-scrollbar-thumb {\n    border-radius: 6px;\n    background: ${({ theme }) => theme.colors.REAL_BLACK_60};\n  }\n`;\n\nconst SelectedGrades = styled(Text)`\n  width: 130px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n`;\n\nexport {\n  MenuContainer,\n  ActivityImage,\n  ActivityTitle,\n  EmptyStateContainer,\n  ActivitiesList,\n  SearchHeaderWrapper,\n  CheckboxWrapper,\n  FilterSidebar,\n  SelectedGrades,\n};\n"],"names":["MenuContainer","styled","FlexView","theme","ActivityImage","ActivityTitle","EmptyStateContainer","ActivitiesList","SearchHeaderWrapper","CheckboxWrapper","FilterSidebar","SelectedGrades","Text"],"mappings":";;;AAKM,MAAAA,IAAgBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAQT,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA,GAG5DC,IAAgBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWvBI,IAAgBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASvBK,IAAsBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMxB,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,MAAM;AAAA,GAGvCI,IAAiBN,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMd,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKvC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,aAAa;AAAA;AAAA,GAIrDK,IAAsBP,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQrCO,IAAkBR,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,wBAIf,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKvC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,aAAa;AAAA;AAAA,GAIrDO,IAAgBT,EAAOC,CAAQ;AAAA,4BACT,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKtC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKvC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,aAAa;AAAA;AAAA,GAIrDQ,IAAiBV,EAAOW,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/cue-canvas/sidebar/puzzles/puzzles.js

@@ -0,0 +1,29 @@
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { memo as a, useRef as d, useCallback as f, useEffect as p } from "react";
+import z from "../../../../assets/line-icons/icons/puzzle-icon.js";
+import C from "../../../ui/buttons/clickable/clickable.js";
+import v from "../../../ui/hooks/use-context-menu-click-handler.js";
+import g from "../../../ui/layout/flex-view.js";
+import { StyledWrapper as h } from "../../cue-cavas-styled.js";
+import { useCueCanvasActions as b } from "../../hooks/use-cue-canvas-actions.js";
+import k from "./puzzle-menu.js";
+const x = (s) => {
+  const { activeSidebar: e, setActiveSidebar: r, grade: u } = s, { activeInstance: i } = b(), c = d(null), { menuVisible: l, onMenuClick: t } = v(
+    c,
+    void 0,
+    !0,
+    void 0
+  ), n = f(() => {
+    e === "tile" && (i == null || i.toggleTiles(!1)), r(e === "puzzle" ? void 0 : "puzzle"), t();
+  }, [e, i, t, r]);
+  return p(() => {
+    e === "tile" && l && t();
+  }, [e, l, t]), /* @__PURE__ */ m(g, { $position: "relative", $width: "100%", $height: "100%", children: [
+    /* @__PURE__ */ o(C, { onClick: n, label: "grid", children: /* @__PURE__ */ o(h, { $active: e === "puzzle", children: /* @__PURE__ */ o(z, {}) }) }),
+    l && /* @__PURE__ */ o(k, { toggleMenu: n, studentGrade: u })
+  ] });
+}, V = a(x);
+export {
+  V as default
+};
+//# sourceMappingURL=puzzles.js.map

package/dist/features/cue-canvas/sidebar/puzzles/puzzles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"puzzles.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/puzzles.tsx"],"sourcesContent":["import type { IPuzzlesContainer } from './puzzles-type';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useRef } from 'react';\n\nimport PuzzleIcon from '../../../../assets/line-icons/icons/puzzle-icon';\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 { StyledWrapper } from '../../cue-cavas-styled';\nimport { useCueCanvasActions } from '../../hooks/use-cue-canvas-actions';\nimport PuzzleMenu from './puzzle-menu';\n\nconst PuzzlesContainer: FC<IPuzzlesContainer> = props => {\n  const { activeSidebar, setActiveSidebar, grade } = props;\n  const { activeInstance: cueCanvas } = useCueCanvasActions();\n  const puzzleMenuRef = useRef(null);\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    puzzleMenuRef,\n    undefined,\n    true,\n    undefined,\n  );\n\n  const handleClick = useCallback(() => {\n    if (activeSidebar === 'tile') {\n      cueCanvas?.toggleTiles(false);\n    }\n    setActiveSidebar(activeSidebar === 'puzzle' ? undefined : 'puzzle');\n    onMenuClick();\n  }, [activeSidebar, cueCanvas, onMenuClick, setActiveSidebar]);\n\n  useEffect(() => {\n    if (activeSidebar === 'tile' && menuVisible) {\n      onMenuClick();\n    }\n  }, [activeSidebar, menuVisible, onMenuClick]);\n\n  return (\n    <FlexView $position=\"relative\" $width=\"100%\" $height=\"100%\">\n      <Clickable onClick={handleClick} label=\"grid\">\n        <StyledWrapper $active={activeSidebar === 'puzzle'}>\n          <PuzzleIcon />\n        </StyledWrapper>\n      </Clickable>\n      {menuVisible && <PuzzleMenu toggleMenu={handleClick} studentGrade={grade} />}\n    </FlexView>\n  );\n};\n\nexport default memo(PuzzlesContainer);\n"],"names":["PuzzlesContainer","props","activeSidebar","setActiveSidebar","grade","cueCanvas","useCueCanvasActions","puzzleMenuRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","handleClick","useCallback","useEffect","FlexView","jsx","Clickable","StyledWrapper","PuzzleIcon","PuzzleMenu","Puzzles","memo"],"mappings":";;;;;;;;;AAaA,MAAMA,IAA0C,CAASC,MAAA;AACvD,QAAM,EAAE,eAAAC,GAAe,kBAAAC,GAAkB,OAAAC,EAAA,IAAUH,GAC7C,EAAE,gBAAgBI,EAAU,IAAIC,EAAoB,GACpDC,IAAgBC,EAAO,IAAI,GAC3B,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAGIK,IAAcC,EAAY,MAAM;AACpC,IAAIX,MAAkB,WACpBG,KAAA,QAAAA,EAAW,YAAY,MAERF,EAAAD,MAAkB,WAAW,SAAY,QAAQ,GACtDQ;KACX,CAACR,GAAeG,GAAWK,GAAaP,CAAgB,CAAC;AAE5D,SAAAW,EAAU,MAAM;AACV,IAAAZ,MAAkB,UAAUO,KAClBC;EAEb,GAAA,CAACR,GAAeO,GAAaC,CAAW,CAAC,qBAGzCK,GAAS,EAAA,WAAU,YAAW,QAAO,QAAO,SAAQ,QACnD,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAU,EAAA,SAASL,GAAa,OAAM,QACrC,UAAA,gBAAAI,EAACE,GAAc,EAAA,SAAShB,MAAkB,UACxC,UAAC,gBAAAc,EAAAG,GAAA,CAAA,CAAW,EACd,CAAA,GACF;AAAA,IACCV,KAAgB,gBAAAO,EAAAI,GAAA,EAAW,YAAYR,GAAa,cAAcR,GAAO;AAAA,EAC5E,EAAA,CAAA;AAEJ,GAEeiB,IAAAC,EAAKtB,CAAgB;"}

package/dist/features/cue-canvas/sidebar/puzzles/utils.js

@@ -0,0 +1,124 @@
+const L = (f) => {
+  const { grid: o, strokes: m, tiles: v } = f || {}, n = {};
+  (v || []).forEach((i) => {
+    var r, G, y, D, _, T;
+    const { name: e, options: a, id: p, size: I } = i || {};
+    if (p) {
+      if (e === "text") {
+        const t = { ...i, html: a };
+        delete t.options, delete t.id, n[p] = [void 0, t];
+      }
+      if (e === "equation" || e === "algebra-tile") {
+        const t = { ...i, expr: a };
+        e === "algebra-tile" && (t.name = "algebra"), delete t.options, delete t.id, n[p] = [void 0, t];
+      }
+      if (e === "image") {
+        const t = { ...i, href: a, width: I };
+        delete t.options, delete t.id, n[p] = [void 0, t];
+      }
+      if (e === "polygon" || e === "token" || e === "custom-polygon") {
+        const t = { ...i, shape: a };
+        delete t.options, delete t.id, n[p] = [void 0, t];
+      }
+      if (e === "dice") {
+        const t = (r = a == null ? void 0 : a.trim()) == null ? void 0 : r.split(":")[0], l = { ...i, value: t };
+        delete l.options, delete l.id, n[p] = [void 0, l];
+      }
+      if (e === "number-tile") {
+        const [t, l] = ((G = a == null ? void 0 : a.trim()) == null ? void 0 : G.split(":")) || [], s = { ...i, value: l || 0, width: t || 0 };
+        delete s.options, delete s.id, n[p] = [void 0, s];
+      }
+      if (e === "geo") {
+        const [t, l] = ((y = a == null ? void 0 : a.trim()) == null ? void 0 : y.split("=")) || [], s = { ...i, key: t || "", expr: l || 0 };
+        delete s.options, delete s.id, n[p] = [void 0, s];
+      }
+      if (e === "number-line") {
+        const [t, l, s, c, E] = ((D = a == null ? void 0 : a.trim()) == null ? void 0 : D.split(":")) || [], h = {
+          ...i,
+          start: t || 0,
+          step: l || 0,
+          width: s || 0,
+          size: c || 0,
+          minor: E || 0
+        };
+        delete h.options, delete h.id, n[p] = [void 0, h];
+      }
+      if (e === "fraction-bar") {
+        const [t, l, s] = ((_ = a == null ? void 0 : a.trim()) == null ? void 0 : _.split(":")) || [], c = { ...i };
+        t && (c.denominator = +t), l && (c.count = +l), s && (c.active = +s), delete c.options, delete c.id, n[p] = [void 0, c];
+      }
+      if (e === "fraction-circle") {
+        const [t, l, s] = ((T = a == null ? void 0 : a.trim()) == null ? void 0 : T.split(":")) || [], c = { ...i };
+        t && (c.denominator = +t), l && (c.count = +l), s && (c.active = +s), delete c.options, delete c.id, n[p] = [void 0, c];
+      }
+      if (e === "number-card" || e === "number-bar" || e === "tantrix") {
+        const t = { ...i, value: a };
+        delete t.options, delete t.id, n[p] = [void 0, t];
+      }
+      if (e === "tangram" || e === "garden" || e === "kolam" || e === "penrose" || e === "polyomino") {
+        const t = { ...i, index: a };
+        delete t.options, delete t.id, n[p] = [void 0, t];
+      }
+      if (e === "ruler" || e === "protractor" || e === "set-triangle" || e === "compass") {
+        const t = { ...i, width: a };
+        delete t.options, delete t.id, n[p] = [void 0, t];
+      }
+    }
+  });
+  const g = {};
+  return m.forEach((i) => {
+    const { id: e } = i || {};
+    if (e) {
+      const a = { ...i };
+      delete a.id, g[e] = [void 0, a];
+    }
+  }), {
+    gridName: o,
+    data: { ...g, ...n }
+  };
+}, d = (f, o = "") => {
+  const m = [];
+  return f && f.length > 0 && f.forEach((v) => {
+    if (o === "grades") {
+      const n = `G${v.name}`;
+      m.push(n);
+    } else
+      m.push(v.name);
+  }), m;
+}, C = (f, o) => {
+  var m, v, n, g;
+  return ((m = f.grades) == null ? void 0 : m.length) !== (o == null ? void 0 : o.grades.filter((i) => i.applied).map((i) => i.code).length) || ((v = f.activity_tiles) == null ? void 0 : v.length) !== (o == null ? void 0 : o.activity_tiles.filter((i) => i.applied).map((i) => i.code).length) || ((n = f.activity_topics) == null ? void 0 : n.length) !== (o == null ? void 0 : o.activity_topics.filter((i) => i.applied).map((i) => i.code).length) || ((g = f.activity_types) == null ? void 0 : g.length) !== (o == null ? void 0 : o.activity_types.filter((i) => i.applied).map((i) => i.code).length) || f.search !== (o == null ? void 0 : o.search) ? !0 : !o;
+}, b = {
+  ACTIVITY_TILES: "activity_tiles",
+  ACTIVITY_TOPICS: "activity_topics",
+  ACTIVITY_TYPES: "activity_types",
+  ACTIVITY_GRADES: "grades"
+}, S = {
+  "-1": "LKG",
+  0: "UKG",
+  1: "G1",
+  2: "G2",
+  3: "G3",
+  4: "G4",
+  5: "G5",
+  6: "G6",
+  7: "G7",
+  8: "G8",
+  9: "G9",
+  10: "G10",
+  11: "G11",
+  12: "G12",
+  ALG1: "ALG1",
+  ALG2: "ALG2",
+  PCAL: "PCAL",
+  GEO: "GEO",
+  CAL: "CAL"
+};
+export {
+  b as FILTER_KEYS,
+  S as GRADE_DISPLAY_NAMES,
+  C as checkIfFilterChanges,
+  d as getTags,
+  L as serializeData
+};
+//# sourceMappingURL=utils.js.map

package/dist/features/cue-canvas/sidebar/puzzles/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/utils.ts"],"sourcesContent":["import type { TCueCanvasChangeDataObject, TCueCanvasGridName } from '../../types/cue-canvas';\nimport type {\n  ActivityMetadata,\n  IActivityGrade,\n  IFilterData,\n  IFilterOption,\n  IGetPuzzles,\n} from './api/get-puzzles';\nimport type { ITypeStroke, ITypeTile } from './puzzles-type';\n\nexport const serializeData = (jsonOBJ: {\n  grid: TCueCanvasGridName;\n  strokes: ITypeStroke[];\n  tiles: ITypeTile[];\n}) => {\n  const { grid, strokes, tiles } = jsonOBJ || {};\n  const newTilesArray = {} as TCueCanvasChangeDataObject;\n\n  (tiles || []).forEach(tile => {\n    const { name, options, id, size } = tile || {};\n\n    if (id) {\n      if (name === 'text') {\n        const tileData = { ...tile, html: options };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'equation' || name === 'algebra-tile') {\n        const tileData = { ...tile, expr: options };\n\n        if (name === 'algebra-tile') {\n          tileData.name = 'algebra';\n        }\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'image') {\n        const tileData = { ...tile, href: options, width: size };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'polygon' || name === 'token' || name === 'custom-polygon') {\n        const tileData = { ...tile, shape: options };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'dice') {\n        const val = options?.trim()?.split(':')[0];\n        const tileData = { ...tile, value: val };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'number-tile') {\n        const [width, value] = options?.trim()?.split(':') || [];\n        const tileData = { ...tile, value: value || 0, width: width || 0 };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'geo') {\n        const [key, expr] = options?.trim()?.split('=') || [];\n        const tileData = { ...tile, key: key || '', expr: expr || 0 };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'number-line') {\n        const [start, step, width, stepSize, minor] = options?.trim()?.split(':') || [];\n        const tileData = {\n          ...tile,\n          start: start || 0,\n          step: step || 0,\n          width: width || 0,\n          size: stepSize || 0,\n          minor: minor || 0,\n        };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'fraction-bar') {\n        const [denominator, count, active] = options?.trim()?.split(':') || [];\n\n        const tileData = { ...tile };\n\n        if (denominator) {\n          tileData.denominator = +denominator;\n        }\n\n        if (count) {\n          tileData.count = +count;\n        }\n\n        if (active) {\n          tileData.active = +active;\n        }\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'fraction-circle') {\n        const [denominator, count, active] = options?.trim()?.split(':') || [];\n\n        const tileData = { ...tile };\n\n        if (denominator) {\n          tileData.denominator = +denominator;\n        }\n\n        if (count) {\n          tileData.count = +count;\n        }\n\n        if (active) {\n          tileData.active = +active;\n        }\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'number-card' || name === 'number-bar' || name === 'tantrix') {\n        const tileData = { ...tile, value: options };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (\n        name === 'tangram' ||\n        name === 'garden' ||\n        name === 'kolam' ||\n        name === 'penrose' ||\n        name === 'polyomino'\n      ) {\n        const tileData = { ...tile, index: options };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (\n        name === 'ruler' ||\n        name === 'protractor' ||\n        name === 'set-triangle' ||\n        name === 'compass'\n      ) {\n        const tileData = { ...tile, width: options };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n    }\n  });\n  const newStrokeMap = {} as TCueCanvasChangeDataObject;\n\n  strokes.forEach((stroke: ITypeStroke) => {\n    const { id } = stroke || {};\n\n    if (id) {\n      const strokeData = { ...stroke };\n\n      delete strokeData.id;\n      newStrokeMap[id] = [undefined, strokeData];\n    }\n  });\n\n  return {\n    gridName: grid,\n    data: { ...newStrokeMap, ...newTilesArray },\n  };\n};\n\nexport const getTags = (data: ActivityMetadata[] | IActivityGrade[], type = '') => {\n  const arr: string[] = [];\n\n  if (data && data.length > 0) {\n    data.forEach(res => {\n      if (type === 'grades') {\n        const grade = `G${res.name}`;\n\n        arr.push(grade);\n      } else {\n        arr.push(res.name);\n      }\n    });\n  }\n\n  return arr;\n};\n\nexport const checkIfFilterChanges = (flts: IGetPuzzles, curentAddedFilters?: IFilterData) => {\n  if (\n    flts.grades?.length !==\n      curentAddedFilters?.grades\n        .filter((grade: IFilterOption) => grade.applied)\n        .map((grade: IFilterOption) => grade.code).length ||\n    flts.activity_tiles?.length !==\n      curentAddedFilters?.activity_tiles\n        .filter((grade: IFilterOption) => grade.applied)\n        .map((tile: IFilterOption) => tile.code).length ||\n    flts.activity_topics?.length !==\n      curentAddedFilters?.activity_topics\n        .filter((grade: IFilterOption) => grade.applied)\n        .map((tile: IFilterOption) => tile.code).length ||\n    flts.activity_types?.length !==\n      curentAddedFilters?.activity_types\n        .filter((grade: IFilterOption) => grade.applied)\n        .map((tile: IFilterOption) => tile.code).length ||\n    flts.search !== curentAddedFilters?.search\n  ) {\n    return true;\n  }\n\n  return !curentAddedFilters;\n};\n\nexport const FILTER_KEYS = {\n  ACTIVITY_TILES: 'activity_tiles',\n  ACTIVITY_TOPICS: 'activity_topics',\n  ACTIVITY_TYPES: 'activity_types',\n  ACTIVITY_GRADES: 'grades',\n} as const;\n\nexport const GRADE_DISPLAY_NAMES: Record<string, string> = {\n  '-1': 'LKG',\n  '0': 'UKG',\n  '1': 'G1',\n  '2': 'G2',\n  '3': 'G3',\n  '4': 'G4',\n  '5': 'G5',\n  '6': 'G6',\n  '7': 'G7',\n  '8': 'G8',\n  '9': 'G9',\n  '10': 'G10',\n  '11': 'G11',\n  '12': 'G12',\n  'ALG1': 'ALG1',\n  'ALG2': 'ALG2',\n  'PCAL': 'PCAL',\n  'GEO': 'GEO',\n  'CAL': 'CAL',\n};\n"],"names":["serializeData","jsonOBJ","grid","strokes","tiles","newTilesArray","tile","_a","_b","_c","_d","_e","_f","name","options","id","size","tileData","val","width","value","key","expr","start","step","stepSize","minor","denominator","count","active","newStrokeMap","stroke","strokeData","getTags","data","type","arr","res","grade","checkIfFilterChanges","flts","curentAddedFilters","FILTER_KEYS","GRADE_DISPLAY_NAMES"],"mappings":"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"}

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

@@ -0,0 +1,16 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { useState as a } from "react";
+import { StyledTileContainer as m } from "../../whiteboard/whiteboard.styled.js";
+import s from "./puzzles/puzzles.js";
+import c from "./tiles/tile.js";
+const S = ({ grade: i }) => {
+  const [r, e] = a();
+  return /* @__PURE__ */ o(m, { $activeSidebar: r, $flexDirection: "row", children: [
+    /* @__PURE__ */ t(c, { activeSidebar: r, setActiveSidebar: e }),
+    /* @__PURE__ */ t(s, { grade: i, activeSidebar: r, setActiveSidebar: e })
+  ] });
+};
+export {
+  S as default
+};
+//# sourceMappingURL=sidebar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.js","sources":["../../../../src/features/cue-canvas/sidebar/sidebar.tsx"],"sourcesContent":["import type { TActiveSidebar } from './puzzles/puzzles-type';\nimport type { FC } from 'react';\n\nimport { useState } from 'react';\n\nimport { StyledTileContainer } from '../../whiteboard/whiteboard.styled';\nimport Puzzles from './puzzles/puzzles';\nimport TileBar from './tiles/tile';\n\ninterface ISidebar {\n  grade?: string;\n}\n\nconst Sidebar: FC<ISidebar> = ({ grade }) => {\n  const [activeSidebar, setActiveSidebar] = useState<TActiveSidebar | undefined>();\n\n  return (\n    <StyledTileContainer $activeSidebar={activeSidebar} $flexDirection=\"row\">\n      <TileBar activeSidebar={activeSidebar} setActiveSidebar={setActiveSidebar} />\n      <Puzzles grade={grade} activeSidebar={activeSidebar} setActiveSidebar={setActiveSidebar} />\n    </StyledTileContainer>\n  );\n};\n\nexport default Sidebar;\n"],"names":["Sidebar","grade","activeSidebar","setActiveSidebar","useState","jsxs","StyledTileContainer","jsx","TileBar","Puzzles"],"mappings":";;;;;AAaA,MAAMA,IAAwB,CAAC,EAAE,OAAAC,QAAY;AAC3C,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAqC;AAE/E,SACG,gBAAAC,EAAAC,GAAA,EAAoB,gBAAgBJ,GAAe,gBAAe,OACjE,UAAA;AAAA,IAAC,gBAAAK,EAAAC,GAAA,EAAQ,eAAAN,GAA8B,kBAAAC,EAAoC,CAAA;AAAA,IAC1E,gBAAAI,EAAAE,GAAA,EAAQ,OAAAR,GAAc,eAAAC,GAA8B,kBAAAC,EAAoC,CAAA;AAAA,EAC3F,EAAA,CAAA;AAEJ;"}

package/dist/features/cue-canvas/sidebar/tiles/tile.js

@@ -0,0 +1,16 @@
+import { jsx as l } from "react/jsx-runtime";
+import { memo as c, useCallback as a } from "react";
+import n from "../../../../assets/line-icons/icons/tile.js";
+import { StyledWrapper as p } from "../../cue-cavas-styled.js";
+import { useCueCanvasActions as d } from "../../hooks/use-cue-canvas-actions.js";
+const C = c((s) => {
+  const { setActiveSidebar: t, activeSidebar: o } = s, { activeInstance: e, setActiveTool: i } = d(), m = a(() => {
+    const r = o !== "tile";
+    e == null || e.toggleTiles(r), t(r ? "tile" : void 0), i("move");
+  }, [o, e, t, i]);
+  return /* @__PURE__ */ l(p, { $active: o === "tile", onClick: m, children: /* @__PURE__ */ l(n, {}) });
+});
+export {
+  C as default
+};
+//# sourceMappingURL=tile.js.map

package/dist/features/cue-canvas/sidebar/tiles/tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile.js","sources":["../../../../../src/features/cue-canvas/sidebar/tiles/tile.tsx"],"sourcesContent":["import type { TActiveSidebar } from '../puzzles/puzzles-type';\nimport type { Dispatch, FC, SetStateAction } from 'react';\n\nimport { memo, useCallback } from 'react';\n\nimport TileIcon from '../../../../assets/line-icons/icons/tile';\nimport { StyledWrapper } from '../../cue-cavas-styled';\nimport { useCueCanvasActions } from '../../hooks/use-cue-canvas-actions';\n\ninterface ITileBar {\n  setActiveSidebar: Dispatch<SetStateAction<TActiveSidebar | undefined>>;\n  activeSidebar?: TActiveSidebar;\n}\n\nconst TileBar: FC<ITileBar> = memo(props => {\n  const { setActiveSidebar, activeSidebar } = props;\n  const { activeInstance, setActiveTool } = useCueCanvasActions();\n\n  const toggleTiles = useCallback(() => {\n    const newTileState = activeSidebar !== 'tile';\n\n    activeInstance?.toggleTiles(newTileState);\n    setActiveSidebar(newTileState ? 'tile' : undefined);\n    setActiveTool('move');\n  }, [activeSidebar, activeInstance, setActiveSidebar, setActiveTool]);\n\n  return (\n    <StyledWrapper $active={activeSidebar === 'tile'} onClick={toggleTiles}>\n      <TileIcon />\n    </StyledWrapper>\n  );\n});\n\nexport default TileBar;\n"],"names":["TileBar","memo","props","setActiveSidebar","activeSidebar","activeInstance","setActiveTool","useCueCanvasActions","toggleTiles","useCallback","newTileState","jsx","StyledWrapper","TileIcon"],"mappings":";;;;;AAcM,MAAAA,IAAwBC,EAAK,CAASC,MAAA;AACpC,QAAA,EAAE,kBAAAC,GAAkB,eAAAC,EAAkB,IAAAF,GACtC,EAAE,gBAAAG,GAAgB,eAAAC,EAAc,IAAIC,EAAoB,GAExDC,IAAcC,EAAY,MAAM;AACpC,UAAMC,IAAeN,MAAkB;AAEvC,IAAAC,KAAA,QAAAA,EAAgB,YAAYK,IACXP,EAAAO,IAAe,SAAS,MAAS,GAClDJ,EAAc,MAAM;AAAA,KACnB,CAACF,GAAeC,GAAgBF,GAAkBG,CAAa,CAAC;AAGjE,SAAA,gBAAAK,EAACC,KAAc,SAASR,MAAkB,QAAQ,SAASI,GACzD,UAAC,gBAAAG,EAAAE,GAAA,CAAS,CAAA,EACZ,CAAA;AAEJ,CAAC;"}

package/dist/features/hooks/use-debounce.js

@@ -0,0 +1,16 @@
+import { useRef as n, useCallback as c } from "react";
+function a(u, r) {
+  const e = n(null);
+  return c(
+    (t) => (e.current && clearTimeout(e.current), e.current = setTimeout(() => {
+      u(t);
+    }, r), () => {
+      e.current && clearTimeout(e.current);
+    }),
+    [u, r]
+  );
+}
+export {
+  a as default
+};
+//# sourceMappingURL=use-debounce.js.map

package/dist/features/hooks/use-debounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounce.js","sources":["../../../src/features/hooks/use-debounce.tsx"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\nfunction useDebounce<T>(callback: (arg: T) => void, wait: number) {\n  const timeoutIdRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const debouncedCallback = useCallback(\n    (val: T) => {\n      if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);\n      timeoutIdRef.current = setTimeout(() => {\n        callback(val);\n      }, wait);\n\n      return () => {\n        if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);\n      };\n    },\n    [callback, wait],\n  );\n\n  return debouncedCallback;\n}\n\nexport default useDebounce;\n"],"names":["useDebounce","callback","wait","timeoutIdRef","useRef","useCallback","val"],"mappings":";AAEA,SAASA,EAAeC,GAA4BC,GAAc;AAC1D,QAAAC,IAAeC,EAA6C,IAAI;AAgB/D,SAdmBC;AAAA,IACxB,CAACC,OACKH,EAAa,WAAsB,aAAAA,EAAa,OAAO,GAC9CA,EAAA,UAAU,WAAW,MAAM;AACtC,MAAAF,EAASK,CAAG;AAAA,OACXJ,CAAI,GAEA,MAAM;AACX,MAAIC,EAAa,WAAsB,aAAAA,EAAa,OAAO;AAAA,IAAA;AAAA,IAG/D,CAACF,GAAUC,CAAI;AAAA,EAAA;AAInB;"}

package/dist/features/whiteboard/whiteboard.js

@@ -0,0 +1,48 @@
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import s from "../cue-canvas/cue-canvas.js";
+import b from "../cue-canvas/cue-canvas-provider.js";
+import l from "../cue-canvas/sidebar/sidebar.js";
+import m from "../cue-canvas/toolbar/toolbar.js";
+import { StyledToolContainer as h } from "./whiteboard.styled.js";
+const p = ({
+  userType: r,
+  userId: e,
+  grade: t,
+  initialData: i,
+  handlePublish: n,
+  handleSubscribe: d
+}) => /* @__PURE__ */ a(b, { userType: r, children: [
+  r === "TEACHER" && /* @__PURE__ */ o(l, { grade: t }),
+  /* @__PURE__ */ o(
+    s,
+    {
+      responseId: "responseId",
+      userId: e,
+      width: 700,
+      height: 400,
+      canScribble: !0,
+      canRender: !0,
+      onUpdateHeight: () => null,
+      appended: !0,
+      initialData: i,
+      onPublish: n,
+      onSubscribe: d,
+      userType: r,
+      renderAs: "whiteboard"
+    }
+  ),
+  /* @__PURE__ */ o(
+    h,
+    {
+      $gutterX: 0.5,
+      $borderColor: "BLACK_10",
+      $background: "WHITE",
+      $position: "absolute",
+      children: /* @__PURE__ */ o(m, { userType: r, renderAs: "whiteboard" })
+    }
+  )
+] }), A = p;
+export {
+  A as default
+};
+//# sourceMappingURL=whiteboard.js.map

package/dist/features/whiteboard/whiteboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whiteboard.js","sources":["../../../src/features/whiteboard/whiteboard.tsx"],"sourcesContent":["import type { WhiteboardProps } from './whiteboard.types';\n\nimport CueCanvas from '../cue-canvas/cue-canvas';\nimport CueCanvasProvider from '../cue-canvas/cue-canvas-provider';\nimport Sidebar from '../cue-canvas/sidebar/sidebar';\nimport Toolbar from '../cue-canvas/toolbar/toolbar';\nimport * as Styled from './whiteboard.styled';\n\nconst Whiteboard = ({\n  userType,\n  userId,\n  grade,\n  initialData,\n  handlePublish,\n  handleSubscribe,\n}: WhiteboardProps) => {\n  return (\n    <CueCanvasProvider userType={userType}>\n      {userType === 'TEACHER' && <Sidebar grade={grade} />}\n      <CueCanvas\n        responseId=\"responseId\"\n        userId={userId}\n        width={700}\n        height={400}\n        canScribble={true}\n        canRender={true}\n        onUpdateHeight={() => null}\n        appended={true}\n        initialData={initialData}\n        onPublish={handlePublish}\n        onSubscribe={handleSubscribe}\n        userType={userType}\n        renderAs=\"whiteboard\"\n      />\n      <Styled.StyledToolContainer\n        $gutterX={0.5}\n        $borderColor=\"BLACK_10\"\n        $background=\"WHITE\"\n        $position=\"absolute\"\n      >\n        <Toolbar userType={userType} renderAs=\"whiteboard\" />\n      </Styled.StyledToolContainer>\n    </CueCanvasProvider>\n  );\n};\n\nexport default Whiteboard;\n"],"names":["Whiteboard","userType","userId","grade","initialData","handlePublish","handleSubscribe","jsxs","CueCanvasProvider","jsx","Sidebar","CueCanvas","Styled.StyledToolContainer","Toolbar","Whiteboard$1"],"mappings":";;;;;;AAQA,MAAMA,IAAa,CAAC;AAAA,EAClB,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC;AACF,MAEI,gBAAAC,EAACC,KAAkB,UAAAP,GAChB,UAAA;AAAA,EAAaA,MAAA,aAAc,gBAAAQ,EAAAC,GAAA,EAAQ,OAAAP,EAAc,CAAA;AAAA,EAClD,gBAAAM;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,YAAW;AAAA,MACX,QAAAT;AAAA,MACA,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,WAAW;AAAA,MACX,gBAAgB,MAAM;AAAA,MACtB,UAAU;AAAA,MACV,aAAAE;AAAA,MACA,WAAWC;AAAA,MACX,aAAaC;AAAA,MACb,UAAAL;AAAA,MACA,UAAS;AAAA,IAAA;AAAA,EACX;AAAA,EACA,gBAAAQ;AAAA,IAACG;AAAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,cAAa;AAAA,MACb,aAAY;AAAA,MACZ,WAAU;AAAA,MAEV,UAAC,gBAAAH,EAAAI,GAAA,EAAQ,UAAAZ,GAAoB,UAAS,cAAa;AAAA,IAAA;AAAA,EACrD;AACF,EAAA,CAAA,GAIJa,IAAed;"}

package/dist/features/whiteboard/whiteboard.styled.js

@@ -0,0 +1,35 @@
+import p, { css as r } from "styled-components";
+import t from "../ui/layout/flex-view.js";
+const e = p(t)(({
+  theme: o,
+  $activeSidebar: x
+}) => r`
+    position: absolute;
+    left: 8px;
+    top: 8px;
+    z-index: ${o.zIndex.TILE_CONTAINER};
+    background-color: ${o.colors.WHITE};
+    padding: 7px;
+    gap: 4px;
+    border-radius: 8px;
+    border: 1px solid ${o.colors.BLACK_10};
+    box-shadow: 0px 1px 5px 0px ${o.colors.BLACK_10};
+
+    ${x === "tile" && r`
+      border: none;
+      box-shadow: none;
+    `}
+  `), n = p(t)`
+  margin: auto;
+  box-shadow: 0px 1px 5px 0px ${({ theme: o }) => o.colors.BLACK_10};
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+`;
+export {
+  e as StyledTileContainer,
+  n as StyledToolContainer
+};
+//# sourceMappingURL=whiteboard.styled.js.map

package/dist/features/whiteboard/whiteboard.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whiteboard.styled.js","sources":["../../../src/features/whiteboard/whiteboard.styled.tsx"],"sourcesContent":["import type { TActiveSidebar } from '../cue-canvas/sidebar/puzzles/puzzles-type';\n\nimport styled, { css } from 'styled-components';\n\nimport FlexView from '../ui/layout/flex-view';\n\ninterface IStyledTileContainer {\n  $activeSidebar?: TActiveSidebar;\n}\n\nexport const StyledTileContainer = styled(FlexView)<IStyledTileContainer>(({\n  theme,\n  $activeSidebar,\n}) => {\n  return css`\n    position: absolute;\n    left: 8px;\n    top: 8px;\n    z-index: ${theme.zIndex.TILE_CONTAINER};\n    background-color: ${theme.colors.WHITE};\n    padding: 7px;\n    gap: 4px;\n    border-radius: 8px;\n    border: 1px solid ${theme.colors.BLACK_10};\n    box-shadow: 0px 1px 5px 0px ${theme.colors.BLACK_10};\n\n    ${$activeSidebar === 'tile' &&\n    css`\n      border: none;\n      box-shadow: none;\n    `}\n  `;\n});\n\nexport const StyledToolContainer = styled(FlexView)`\n  margin: auto;\n  box-shadow: 0px 1px 5px 0px ${({ theme }) => theme.colors.BLACK_10};\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n`;\n"],"names":["StyledTileContainer","styled","FlexView","theme","$activeSidebar","css","StyledToolContainer"],"mappings":";;AAUO,MAAMA,IAAsBC,EAAOC,CAAQ,EAAwB,CAAC;AAAA,EACzE,OAAAC;AAAA,EACA,gBAAAC;AACF,MACSC;AAAA;AAAA;AAAA;AAAA,eAIMF,EAAM,OAAO,cAAc;AAAA,wBAClBA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,wBAIlBA,EAAM,OAAO,QAAQ;AAAA,kCACXA,EAAM,OAAO,QAAQ;AAAA;AAAA,MAEjDC,MAAmB,UACrBC;AAAA;AAAA;AAAA,KAGC;AAAA,GAEJ,GAEYC,IAAsBL,EAAOC,CAAQ;AAAA;AAAA,gCAElB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}