@cuemath/leap 3.2.16-as1 → 3.2.16-pzd-beta-0.3

package/dist/features/journey/journey-id/journey-id-student.js.map

@@ -1 +1 @@
-{"version":3,"file":"journey-id-student.js","sources":["../../../../src/features/journey/journey-id/journey-id-student.ts"],"sourcesContent":["export enum JOURNEY_ID_STUDENT {\n  CIRCLE_ACTIVITIES_INTRO_JOURNEY = 'CIRCLE_ACTIVITIES_INTRO_JOURNEY',\n  CIRCLE_LEADERBOARD_INTRO_JOURNEY = 'CIRCLE_LEADERBOARD_INTRO_JOURNEY',\n  CIRCLE_POINTS_REWARD_JOURNEY = 'CIRCLE_POINTS_REWARD_JOURNEY',\n  CIRCLE_STREAK_UPDATE_JOURNEY = 'CIRCLE_STREAK_UPDATE_JOURNEY',\n  CIRCLE_TUTORIAL_JOURNEY = 'CIRCLE_TUTORIAL_JOURNEY',\n  CIRCLE_TABLES_INTRO_JOURNEY = 'CIRCLE_TABLES_INTRO_JOURNEY',\n  CIRCLE_TABLES_INFINTE_JOURNEY = 'CIRCLE_TABLES_INFINITE_JOURNEY',\n  CIRCLE_LESSONS_K_1_INTRO_JOURNEY = 'CIRCLE_LESSONS_K_1_INTRO_JOURNEY',\n\n  // TODO: Deprecate bottom journeys, they are not actually journeys\n  HOMEPAGE_JOURNEY = 'HOMEPAGE_JOURNEY',\n  CHAPTER_PAGE_JOURNEY = 'CHAPTER_PAGE_JOURNEY',\n  CHALLENGE_ARENA_JOURNEY = 'CHALLENGE_ARENA_JOURNEY',\n}\n"],"names":["JOURNEY_ID_STUDENT"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,kCAAkC,mCAClCA,EAAA,mCAAmC,oCACnCA,EAAA,+BAA+B,gCAC/BA,EAAA,+BAA+B,gCAC/BA,EAAA,0BAA0B,2BAC1BA,EAAA,8BAA8B,+BAC9BA,EAAA,gCAAgC,kCAChCA,EAAA,mCAAmC,oCAGnCA,EAAA,mBAAmB,oBACnBA,EAAA,uBAAuB,wBACvBA,EAAA,0BAA0B,2BAbhBA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"journey-id-student.js","sources":["../../../../src/features/journey/journey-id/journey-id-student.ts"],"sourcesContent":["export enum JOURNEY_ID_STUDENT {\n  CIRCLE_ACTIVITIES_INTRO_JOURNEY = 'CIRCLE_ACTIVITIES_INTRO_JOURNEY',\n  CIRCLE_LEADERBOARD_INTRO_JOURNEY = 'CIRCLE_LEADERBOARD_INTRO_JOURNEY',\n  CIRCLE_POINTS_REWARD_JOURNEY = 'CIRCLE_POINTS_REWARD_JOURNEY',\n  CIRCLE_STREAK_UPDATE_JOURNEY = 'CIRCLE_STREAK_UPDATE_JOURNEY',\n  CIRCLE_TUTORIAL_JOURNEY = 'CIRCLE_TUTORIAL_JOURNEY',\n  CIRCLE_TABLES_INTRO_JOURNEY = 'CIRCLE_TABLES_INTRO_JOURNEY',\n  CIRCLE_TABLES_INFINTE_JOURNEY = 'CIRCLE_TABLES_INFINITE_JOURNEY',\n  CIRCLE_LESSONS_K_1_INTRO_JOURNEY = 'CIRCLE_LESSONS_K_1_INTRO_JOURNEY',\n\n  // TODO: Deprecate bottom journeys, they are not actually journeys\n  HOMEPAGE_JOURNEY = 'HOMEPAGE_JOURNEY',\n  CHAPTER_PAGE_JOURNEY = 'CHAPTER_PAGE_JOURNEY',\n  PUZZLE_ATTEMPT_JOURNEY = 'PUZZLE_ATTEMPT_JOURNEY',\n  CHALLENGE_ARENA_JOURNEY = 'CHALLENGE_ARENA_JOURNEY',\n  PUZZLE_ASSIGNED_JOURNEY = 'PUZZLE_ASSIGNED_JOURNEY',\n  PUZZLE_DASHBOARD_JOURNEY = 'PUZZLE_DASHBOARD_JOURNEY',\n}\n"],"names":["JOURNEY_ID_STUDENT"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,kCAAkC,mCAClCA,EAAA,mCAAmC,oCACnCA,EAAA,+BAA+B,gCAC/BA,EAAA,+BAA+B,gCAC/BA,EAAA,0BAA0B,2BAC1BA,EAAA,8BAA8B,+BAC9BA,EAAA,gCAAgC,kCAChCA,EAAA,mCAAmC,oCAGnCA,EAAA,mBAAmB,oBACnBA,EAAA,uBAAuB,wBACvBA,EAAA,yBAAyB,0BACzBA,EAAA,0BAA0B,2BAC1BA,EAAA,0BAA0B,2BAC1BA,EAAA,2BAA2B,4BAhBjBA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/features/journey/journey-id/journey-id-teacher.js

@@ -1,5 +1,5 @@
-var A = /* @__PURE__ */ ((E) => (E.HOMEPAGE_JOURNEY = "HOMEPAGE_JOURNEY", E.CHAPTER_PAGE_JOURNEY = "CHAPTER_PAGE_JOURNEY", E.CHALLENGE_ARENA_JOURNEY = "CHALLENGE_ARENA_JOURNEY", E))(A || {});
+var N = /* @__PURE__ */ ((E) => (E.HOMEPAGE_JOURNEY = "HOMEPAGE_JOURNEY", E.CHAPTER_PAGE_JOURNEY = "CHAPTER_PAGE_JOURNEY", E.CHALLENGE_ARENA_JOURNEY = "CHALLENGE_ARENA_JOURNEY", E.PUZZLE_ASSIGN_JOURNEY = "PUZZLE_ASSIGN_JOURNEY", E.PUZZLE_INTRO_JOURNEY = "PUZZLE_INTRO_JOURNEY", E.PUZZLE_REVIEW_JOURNEY = "PUZZLE_REVIEW_JOURNEY", E.PUZZLE_PROGRESS_JOURNEY = "PUZZLE_PROGRESS_JOURNEY", E.PUZZLE_UNASSIGN_JOURNEY = "PUZZLE_UNASSIGN_JOURNEY", E))(N || {});
 export {
-  A as JOURNEY_ID_TEACHER
+  N as JOURNEY_ID_TEACHER
 };
 //# sourceMappingURL=journey-id-teacher.js.map

package/dist/features/journey/journey-id/journey-id-teacher.js.map

@@ -1 +1 @@
-{"version":3,"file":"journey-id-teacher.js","sources":["../../../../src/features/journey/journey-id/journey-id-teacher.ts"],"sourcesContent":["export enum JOURNEY_ID_TEACHER {\n  HOMEPAGE_JOURNEY = 'HOMEPAGE_JOURNEY',\n  CHAPTER_PAGE_JOURNEY = 'CHAPTER_PAGE_JOURNEY',\n  CHALLENGE_ARENA_JOURNEY = 'CHALLENGE_ARENA_JOURNEY',\n}\n"],"names":["JOURNEY_ID_TEACHER"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,mBAAmB,oBACnBA,EAAA,uBAAuB,wBACvBA,EAAA,0BAA0B,2BAHhBA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"journey-id-teacher.js","sources":["../../../../src/features/journey/journey-id/journey-id-teacher.ts"],"sourcesContent":["export enum JOURNEY_ID_TEACHER {\n  HOMEPAGE_JOURNEY = 'HOMEPAGE_JOURNEY',\n  CHAPTER_PAGE_JOURNEY = 'CHAPTER_PAGE_JOURNEY',\n  CHALLENGE_ARENA_JOURNEY = 'CHALLENGE_ARENA_JOURNEY',\n  PUZZLE_ASSIGN_JOURNEY = 'PUZZLE_ASSIGN_JOURNEY',\n  PUZZLE_INTRO_JOURNEY = 'PUZZLE_INTRO_JOURNEY',\n  PUZZLE_REVIEW_JOURNEY = 'PUZZLE_REVIEW_JOURNEY',\n  PUZZLE_PROGRESS_JOURNEY = 'PUZZLE_PROGRESS_JOURNEY',\n  PUZZLE_UNASSIGN_JOURNEY = 'PUZZLE_UNASSIGN_JOURNEY',\n}\n"],"names":["JOURNEY_ID_TEACHER"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAA,mBAAmB,oBACnBA,EAAA,uBAAuB,wBACvBA,EAAA,0BAA0B,2BAC1BA,EAAA,wBAAwB,yBACxBA,EAAA,uBAAuB,wBACvBA,EAAA,wBAAwB,yBACxBA,EAAA,0BAA0B,2BAC1BA,EAAA,0BAA0B,2BARhBA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/features/puzzles/api/puzzle-dashboard.js

@@ -0,0 +1,10 @@
+import { createGetAPI as s } from "@cuemath/rest-api";
+import { BASE_URL_V3 as r } from "../../../constants/api.js";
+const { useGet: a, invalidate: z } = s({
+  getURL: (e, o, { courseStream: t }) => `${r}/users/${e}/course-streams/${t}/puzzles-history/`
+});
+export {
+  z as invalidateGetPuzzles,
+  a as useGetPuzzles
+};
+//# sourceMappingURL=puzzle-dashboard.js.map

package/dist/features/puzzles/api/puzzle-dashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"puzzle-dashboard.js","sources":["../../../../src/features/puzzles/api/puzzle-dashboard.ts"],"sourcesContent":["import type { TCourseStream } from '../../milestone/create/milestone-create-types';\nimport type { IPuzzleCardAssignData } from '../puzzle-container/puzzle-container-types';\n\nimport { createGetAPI } from '@cuemath/rest-api';\n\nimport { BASE_URL_V3 } from '../../../constants/api';\n\nconst { useGet: useGetPuzzles, invalidate: invalidateGetPuzzles } = createGetAPI<\n  IPuzzleCardAssignData[],\n  void,\n  { courseStream: TCourseStream }\n>({\n  getURL: (studentId, _, { courseStream }) =>\n    `${BASE_URL_V3}/users/${studentId}/course-streams/${courseStream}/puzzles-history/`,\n});\n\nexport { useGetPuzzles, invalidateGetPuzzles };\n"],"names":["useGetPuzzles","invalidateGetPuzzles","createGetAPI","studentId","_","courseStream","BASE_URL_V3"],"mappings":";;AAOA,MAAM,EAAE,QAAQA,GAAe,YAAYC,EAAA,IAAyBC,EAIlE;AAAA,EACA,QAAQ,CAACC,GAAWC,GAAG,EAAE,cAAAC,EAAA,MACvB,GAAGC,CAAW,UAAUH,CAAS,mBAAmBE,CAAY;AACpE,CAAC;"}

package/dist/features/puzzles/app/puzzle-app.js

@@ -1,82 +1,62 @@
-import { jsx as e, jsxs as s, Fragment as z } from "react/jsx-runtime";
-import { memo as S, useState as p, useRef as v, useCallback as a, useEffect as x } from "react";
-import { ErrorBoundary as T } from "react-error-boundary";
-import f from "../../ui/error/error.js";
-import g from "../../ui/layout/flex-view.js";
-import W from "../../ui/loader/app-loader/app-loader.js";
-import u from "../../ui/text/text.js";
-import _ from "../../worksheet/learnosity-preloader/learnosity-preloader.js";
-import { usePreviewWorksheetGet as U } from "../../worksheet/worksheet-preview/api/get-preview-worksheet.js";
-import { LEARNOSITY_QUESTIONS_API as y, LEARNOSITY_QUESTIONS_API_FALLBACK as C } from "../../worksheet/worksheet/stories/worksheet-story-container.js";
-import { PuzzleAppWrapper as F, StyledFeedbackText as N, StyledHintFillIcon as O } from "./puzzle-app-styled.js";
-import B from "./puzzle-app-view.js";
-const D = (r) => {
-  console.log("Worksheet Logger:", r);
-}, G = () => {
-  const r = new URLSearchParams(window.location.search), t = r.get("itemRef") || "", k = r.get("title") || "", l = r.get("imageHue") || "BLUE", c = r.get("feedbackComments") || void 0, A = r.get("tip") || void 0, [$, m] = p(), [o, b] = p(!1), { isProcessing: E, get: d, data: h, error: L } = U(), w = v(() => null), R = A || "Celebrate persistence more than correct answers - it's a life skill worth building.", n = a(() => {
-    d("test", {
+import { jsx as e, jsxs as o, Fragment as W } from "react/jsx-runtime";
+import { memo as v, useState as h, useRef as P, useCallback as n, useEffect as R } from "react";
+import y from "../../ui/error/error.js";
+import d from "../../ui/layout/flex-view.js";
+import F from "../../ui/loader/app-loader/app-loader.js";
+import p from "../../ui/text/text.js";
+import { usePreviewWorksheetGet as I } from "../../worksheet/worksheet-preview/api/get-preview-worksheet.js";
+import { PuzzleAppWrapper as L, StyledFeedbackText as T, StyledHintFillIcon as D } from "./puzzle-app-styled.js";
+import G from "./puzzle-app-view.js";
+const S = ({ itemRef: s, title: m, imageHue: i, feedbackComments: l, tip: f }) => {
+  const [u, g] = h(), [r, $] = h(!1), { isProcessing: k, get: a, data: c, error: w } = I(), z = P(() => null), A = f || "Celebrate persistence more than correct answers - it's a life skill worth building.", t = n(() => {
+    a("test", {
       action: "review",
       node_type: "PUZZLE_CARD",
-      items: [t]
+      items: [s]
     });
-  }, [d, t]);
-  x(() => {
-    n();
-  }, [n]);
-  const P = a((i) => {
-    m(i.message);
-  }, []), I = a(() => {
-    b(!0);
+  }, [a, s]);
+  R(() => {
+    t();
+  }, [t]);
+  const b = n((E) => {
+    g(E.message);
+  }, []), x = n(() => {
+    $(!0);
   }, []);
-  return t ? $ || L ? /* @__PURE__ */ e(f, { height: "100vh", onTryAgain: n }) : E ? /* @__PURE__ */ e(W, { height: "100vh" }) : /* @__PURE__ */ e(
-    T,
+  return u || w ? /* @__PURE__ */ e(y, { height: "100vh", onTryAgain: t }) : k ? /* @__PURE__ */ e(F, { height: "100vh" }) : /* @__PURE__ */ o(
+    L,
     {
-      fallback: /* @__PURE__ */ e(f, { height: "100vh" }),
-      onError: (i) => m(i.message),
-      children: /* @__PURE__ */ e(
-        _,
-        {
-          apiURL: y,
-          fallbackAPIURL: C,
-          logger: D,
-          children: /* @__PURE__ */ s(
-            F,
-            {
-              className: "puzzle-app-container",
-              $background: `${l}_2`,
-              $alignItems: "center",
-              $flexGapX: 1,
-              $gutterX: 1,
-              $visible: o,
-              $height: "100vh",
-              children: [
-                o && /* @__PURE__ */ e(u, { $renderAs: "ab1-bold", children: k }),
-                h && /* @__PURE__ */ e(
-                  B,
-                  {
-                    onWorksheetErrored: P,
-                    worksheetData: h,
-                    loggerRef: w,
-                    imageHue: l,
-                    onLoaded: I
-                  }
-                ),
-                o && /* @__PURE__ */ e(z, { children: c ? /* @__PURE__ */ s(N, { $renderAs: "ab2", children: [
-                  /* @__PURE__ */ e("span", { children: "Tutor Remark:" }),
-                  c
-                ] }) : /* @__PURE__ */ s(g, { $flexDirection: "row", $alignItems: "center", $flexGap: 8, children: [
-                  /* @__PURE__ */ e(g, { $width: 24, $height: 24, children: /* @__PURE__ */ e(O, {}) }),
-                  /* @__PURE__ */ e(u, { $renderAs: "ab2", children: R })
-                ] }) })
-              ]
-            }
-          )
-        }
-      )
+      className: "puzzle-app-container",
+      $background: `${i}_2`,
+      $alignItems: "center",
+      $flexGapX: 1,
+      $gutterX: 1,
+      $visible: r,
+      $height: "100vh",
+      children: [
+        r && /* @__PURE__ */ e(p, { $renderAs: "ab1-bold", children: m }),
+        c && /* @__PURE__ */ e(
+          G,
+          {
+            onWorksheetErrored: b,
+            worksheetData: c,
+            loggerRef: z,
+            imageHue: i,
+            onLoaded: x
+          }
+        ),
+        r && /* @__PURE__ */ e(W, { children: l ? /* @__PURE__ */ o(T, { $renderAs: "ab2", children: [
+          /* @__PURE__ */ e("span", { children: "Tutor Remark:" }),
+          l
+        ] }) : /* @__PURE__ */ o(d, { $flexDirection: "row", $alignItems: "center", $flexGap: 8, children: [
+          /* @__PURE__ */ e(d, { $width: 24, $height: 24, children: /* @__PURE__ */ e(D, {}) }),
+          /* @__PURE__ */ e(p, { $renderAs: "ab2", children: A })
+        ] }) })
+      ]
     }
-  ) : null;
-}, re = S(G);
+  );
+}, B = v(S);
 export {
-  re as default
+  B as default
 };
 //# sourceMappingURL=puzzle-app.js.map

package/dist/features/puzzles/app/puzzle-app.js.map

@@ -1 +1 @@
-{"version":3,"file":"puzzle-app.js","sources":["../../../../src/features/puzzles/app/puzzle-app.tsx"],"sourcesContent":["import type { THueNames } from '../../ui/types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useRef, useState } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\n\nimport Error from '../../ui/error/error';\nimport FlexView from '../../ui/layout/flex-view';\nimport AppLoader from '../../ui/loader/app-loader/app-loader';\nimport Text from '../../ui/text/text';\nimport LearnosityPreloader from '../../worksheet/learnosity-preloader/learnosity-preloader';\nimport { usePreviewWorksheetGet } from '../../worksheet/worksheet-preview/api/get-preview-worksheet';\nimport {\n  LEARNOSITY_QUESTIONS_API,\n  LEARNOSITY_QUESTIONS_API_FALLBACK,\n} from '../../worksheet/worksheet/stories/worksheet-story-container';\nimport * as Styled from './puzzle-app-styled';\nimport PuzzleAppView from './puzzle-app-view';\n\nconst logger = (eventName: string) => {\n  // eslint-disable-next-line no-console\n  console.log('Worksheet Logger:', eventName);\n};\n\nconst PuzzleApp: FC = () => {\n  // Extract props from URL search parameters\n  const urlParams = new URLSearchParams(window.location.search);\n  const itemRef = urlParams.get('itemRef') || '';\n  const title = urlParams.get('title') || '';\n  const imageHue = (urlParams.get('imageHue') || 'BLUE') as THueNames;\n  const feedbackComments = urlParams.get('feedbackComments') || undefined;\n  const tip = urlParams.get('tip') || undefined;\n\n  const [error, setError] = useState<string>();\n  const [worksheetRendered, setWorksheetRendered] = useState<boolean>(false);\n\n  const { isProcessing, get, data: worksheetData, error: fetchError } = usePreviewWorksheetGet();\n  const loggerRef = useRef(() => null);\n\n  const tipInfo =\n    tip || `Celebrate persistence more than correct answers - it's a life skill worth building.`;\n\n  const fetchWorksheet = useCallback(() => {\n    get('test', {\n      action: 'review',\n      node_type: 'PUZZLE_CARD',\n      items: [itemRef],\n    });\n  }, [get, itemRef]);\n\n  useEffect(() => {\n    fetchWorksheet();\n  }, [fetchWorksheet]);\n\n  const handleWorksheetErrored = useCallback((err: { code?: number; message: string }) => {\n    setError(err.message);\n  }, []);\n\n  const handleWorksheetLoaded = useCallback(() => {\n    setWorksheetRendered(true);\n  }, []);\n\n  if (!itemRef) return null;\n\n  if (error || fetchError) {\n    return <Error height=\"100vh\" onTryAgain={fetchWorksheet} />;\n  }\n\n  if (isProcessing) {\n    return <AppLoader height=\"100vh\" />;\n  }\n\n  return (\n    <ErrorBoundary\n      fallback={<Error height=\"100vh\" />}\n      onError={errorInfo => setError(errorInfo.message)}\n    >\n      <LearnosityPreloader\n        apiURL={LEARNOSITY_QUESTIONS_API}\n        fallbackAPIURL={LEARNOSITY_QUESTIONS_API_FALLBACK}\n        logger={logger}\n      >\n        <Styled.PuzzleAppWrapper\n          className=\"puzzle-app-container\"\n          $background={`${imageHue}_2`}\n          $alignItems=\"center\"\n          $flexGapX={1}\n          $gutterX={1}\n          $visible={worksheetRendered}\n          $height=\"100vh\"\n        >\n          {worksheetRendered && <Text $renderAs=\"ab1-bold\">{title}</Text>}\n\n          {worksheetData && (\n            <PuzzleAppView\n              onWorksheetErrored={handleWorksheetErrored}\n              worksheetData={worksheetData}\n              loggerRef={loggerRef}\n              imageHue={imageHue}\n              onLoaded={handleWorksheetLoaded}\n            />\n          )}\n\n          {worksheetRendered && (\n            <>\n              {feedbackComments ? (\n                <Styled.StyledFeedbackText $renderAs=\"ab2\">\n                  <span>Tutor Remark:</span>\n                  {feedbackComments}\n                </Styled.StyledFeedbackText>\n              ) : (\n                <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGap={8}>\n                  <FlexView $width={24} $height={24}>\n                    <Styled.StyledHintFillIcon />\n                  </FlexView>\n                  <Text $renderAs=\"ab2\">{tipInfo}</Text>\n                </FlexView>\n              )}\n            </>\n          )}\n        </Styled.PuzzleAppWrapper>\n      </LearnosityPreloader>\n    </ErrorBoundary>\n  );\n};\n\nexport default memo(PuzzleApp);\n"],"names":["logger","eventName","PuzzleApp","urlParams","itemRef","title","imageHue","feedbackComments","tip","error","setError","useState","worksheetRendered","setWorksheetRendered","isProcessing","get","worksheetData","fetchError","usePreviewWorksheetGet","loggerRef","useRef","tipInfo","fetchWorksheet","useCallback","useEffect","handleWorksheetErrored","err","handleWorksheetLoaded","jsx","Error","AppLoader","ErrorBoundary","errorInfo","LearnosityPreloader","LEARNOSITY_QUESTIONS_API","LEARNOSITY_QUESTIONS_API_FALLBACK","jsxs","Styled.PuzzleAppWrapper","Text","PuzzleAppView","Styled.StyledFeedbackText","FlexView","Styled.StyledHintFillIcon","puzzleApp","memo"],"mappings":"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"}
+{"version":3,"file":"puzzle-app.js","sources":["../../../../src/features/puzzles/app/puzzle-app.tsx"],"sourcesContent":["import type { IPuzzleAppProps } from './puzzle-app-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useRef, useState } from 'react';\n\nimport Error from '../../ui/error/error';\nimport FlexView from '../../ui/layout/flex-view';\nimport AppLoader from '../../ui/loader/app-loader/app-loader';\nimport Text from '../../ui/text/text';\nimport { usePreviewWorksheetGet } from '../../worksheet/worksheet-preview/api/get-preview-worksheet';\nimport * as Styled from './puzzle-app-styled';\nimport PuzzleAppView from './puzzle-app-view';\n\nconst PuzzleApp: FC<IPuzzleAppProps> = ({ itemRef, title, imageHue, feedbackComments, tip }) => {\n  const [error, setError] = useState<string>();\n  const [worksheetRendered, setWorksheetRendered] = useState<boolean>(false);\n\n  const { isProcessing, get, data: worksheetData, error: fetchError } = usePreviewWorksheetGet();\n  const loggerRef = useRef(() => null);\n\n  const tipInfo =\n    tip || `Celebrate persistence more than correct answers - it's a life skill worth building.`;\n\n  const fetchWorksheet = useCallback(() => {\n    get('test', {\n      action: 'review',\n      node_type: 'PUZZLE_CARD',\n      items: [itemRef],\n    });\n  }, [get, itemRef]);\n\n  useEffect(() => {\n    fetchWorksheet();\n  }, [fetchWorksheet]);\n\n  const handleWorksheetErrored = useCallback((err: { code?: number; message: string }) => {\n    setError(err.message);\n  }, []);\n\n  const handleWorksheetLoaded = useCallback(() => {\n    setWorksheetRendered(true);\n  }, []);\n\n  if (error || fetchError) {\n    return <Error height=\"100vh\" onTryAgain={fetchWorksheet} />;\n  }\n\n  if (isProcessing) {\n    return <AppLoader height=\"100vh\" />;\n  }\n\n  return (\n    <Styled.PuzzleAppWrapper\n      className=\"puzzle-app-container\"\n      $background={`${imageHue}_2`}\n      $alignItems=\"center\"\n      $flexGapX={1}\n      $gutterX={1}\n      $visible={worksheetRendered}\n      $height=\"100vh\"\n    >\n      {worksheetRendered && <Text $renderAs=\"ab1-bold\">{title}</Text>}\n\n      {worksheetData && (\n        <PuzzleAppView\n          onWorksheetErrored={handleWorksheetErrored}\n          worksheetData={worksheetData}\n          loggerRef={loggerRef}\n          imageHue={imageHue}\n          onLoaded={handleWorksheetLoaded}\n        />\n      )}\n\n      {worksheetRendered && (\n        <>\n          {feedbackComments ? (\n            <Styled.StyledFeedbackText $renderAs=\"ab2\">\n              <span>Tutor Remark:</span>\n              {feedbackComments}\n            </Styled.StyledFeedbackText>\n          ) : (\n            <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGap={8}>\n              <FlexView $width={24} $height={24}>\n                <Styled.StyledHintFillIcon />\n              </FlexView>\n              <Text $renderAs=\"ab2\">{tipInfo}</Text>\n            </FlexView>\n          )}\n        </>\n      )}\n    </Styled.PuzzleAppWrapper>\n  );\n};\n\nexport default memo(PuzzleApp);\n"],"names":["PuzzleApp","itemRef","title","imageHue","feedbackComments","tip","error","setError","useState","worksheetRendered","setWorksheetRendered","isProcessing","get","worksheetData","fetchError","usePreviewWorksheetGet","loggerRef","useRef","tipInfo","fetchWorksheet","useCallback","useEffect","handleWorksheetErrored","err","handleWorksheetLoaded","jsx","Error","AppLoader","jsxs","Styled.PuzzleAppWrapper","Text","PuzzleAppView","Styled.StyledFeedbackText","FlexView","Styled.StyledHintFillIcon","puzzleApp","memo"],"mappings":";;;;;;;;;AAaA,MAAMA,IAAiC,CAAC,EAAE,SAAAC,GAAS,OAAAC,GAAO,UAAAC,GAAU,kBAAAC,GAAkB,KAAAC,QAAU;AAC9F,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAiB,GACrC,CAACC,GAAmBC,CAAoB,IAAIF,EAAkB,EAAK,GAEnE,EAAE,cAAAG,GAAc,KAAAC,GAAK,MAAMC,GAAe,OAAOC,MAAeC,KAChEC,IAAYC,EAAO,MAAM,IAAI,GAE7BC,IACJb,KAAO,uFAEHc,IAAiBC,EAAY,MAAM;AACvC,IAAAR,EAAI,QAAQ;AAAA,MACV,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,OAAO,CAACX,CAAO;AAAA,IAAA,CAChB;AAAA,EAAA,GACA,CAACW,GAAKX,CAAO,CAAC;AAEjB,EAAAoB,EAAU,MAAM;AACC,IAAAF;EAAA,GACd,CAACA,CAAc,CAAC;AAEb,QAAAG,IAAyBF,EAAY,CAACG,MAA4C;AACtF,IAAAhB,EAASgB,EAAI,OAAO;AAAA,EACtB,GAAG,CAAE,CAAA,GAECC,IAAwBJ,EAAY,MAAM;AAC9C,IAAAV,EAAqB,EAAI;AAAA,EAC3B,GAAG,CAAE,CAAA;AAEL,SAAIJ,KAASQ,IACH,gBAAAW,EAAAC,GAAA,EAAM,QAAO,SAAQ,YAAYP,EAAgB,CAAA,IAGvDR,IACK,gBAAAc,EAACE,GAAU,EAAA,QAAO,QAAQ,CAAA,IAIjC,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,aAAa,GAAG1B,CAAQ;AAAA,MACxB,aAAY;AAAA,MACZ,WAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAUM;AAAA,MACV,SAAQ;AAAA,MAEP,UAAA;AAAA,QAAAA,KAAsB,gBAAAgB,EAAAK,GAAA,EAAK,WAAU,YAAY,UAAM5B,GAAA;AAAA,QAEvDW,KACC,gBAAAY;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,oBAAoBT;AAAA,YACpB,eAAAT;AAAA,YACA,WAAAG;AAAA,YACA,UAAAb;AAAA,YACA,UAAUqB;AAAA,UAAA;AAAA,QACZ;AAAA,QAGDf,4BAEI,UACCL,IAAA,gBAAAwB,EAACI,GAAA,EAA0B,WAAU,OACnC,UAAA;AAAA,UAAA,gBAAAP,EAAC,UAAK,UAAa,gBAAA,CAAA;AAAA,UAClBrB;AAAA,QACH,EAAA,CAAA,sBAEC6B,GAAS,EAAA,gBAAe,OAAM,aAAY,UAAS,UAAU,GAC5D,UAAA;AAAA,UAAC,gBAAAR,EAAAQ,GAAA,EAAS,QAAQ,IAAI,SAAS,IAC7B,UAAC,gBAAAR,EAAAS,GAAA,CAAA,CAA0B,EAC7B,CAAA;AAAA,UACC,gBAAAT,EAAAK,GAAA,EAAK,WAAU,OAAO,UAAQZ,GAAA;AAAA,QAAA,EAAA,CACjC,EAEJ,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,GAEeiB,IAAAC,EAAKpC,CAAS;"}

package/dist/features/puzzles/comps/puzzle-card-styled.js

@@ -1,79 +1,34 @@
-import e, { keyframes as a, css as r } from "styled-components";
-import n from "../../ui/layout/flex-view.js";
-import { getPuzzleCardPattern as l } from "../utils/puzzle-pattern.js";
-const m = a`
-  from { transform: translateY(-100%); }
-  to   { transform: translateY(0); }
-`, o = a`
-  from { transform: rotateY(0deg); }
-  to   { transform: rotateY(360deg); }
-`, c = a`
-  from { transform: translateY(0); opacity: 1; }
-  to   { transform: translateY(-100%); opacity: 0; }
-`, d = e(n)`
+import e from "styled-components";
+import r from "../../ui/layout/flex-view.js";
+import i from "../../ui/text/text.js";
+import { getPuzzleCardPattern as p } from "../utils/puzzle-pattern.js";
+const n = e(r)`
   position: relative;
+  cursor: pointer;
 
-  box-shadow: inset 0px 0px 0px 4px ${({ theme: t, $imageHue: i }) => t.colors[`${i}_4`]};
+  box-shadow: inset 0px 0px 0px 4px ${({ theme: o, $imageHue: t }) => o.colors[`${t}_4`]};
 
-  background-image: ${({ $imageHue: t }) => `url(${l(t)})`};
+  background-image: ${({ $imageHue: o }) => `url(${p(o)})`};
   background-size: cover;
 
-  ${({ $animationPhase: t }) => t && r`
-      transform-style: preserve-3d;
-      opacity: 0;
-      visibility: hidden;
-      transform: translateY(-100%);
-    `}
-
-  ${({ $animationPhase: t, theme: i, $imageHue: s }) => {
-  switch (t) {
-    case "movingIn":
-      return r`
-          visibility: visible;
-          opacity: 1;
-          animation: ${m} 0.5s ease-out forwards;
-        `;
-    case "revealing":
-      return r`
-          visibility: visible;
-          opacity: 1;
-          transform: translateY(0); /* Position after moveIn */
-          animation: ${o} 1s ease-in-out forwards;
-        `;
-    case "visible":
-      return r`
-          visibility: visible;
-          opacity: 1;
-          transform: translateY(0) rotateY(360deg);
-          background-color: ${i.colors[`${s}_2`]};
-          transition: background-color 0.2s ease-in;
-        `;
-    case "assigning":
-      return r`
-          visibility: visible;
-          opacity: 1;
-          transform: translateY(0); /* Reset rotation for this animation */
-          animation: ${o} 1s ease-in-out forwards;
-        `;
-    case "assigned":
-      return r`
-          visibility: visible;
-          opacity: 1;
-          transform: translateY(0) rotateY(360deg);
-        `;
-    case "movingOut":
-      return r`
-          visibility: visible;
-          opacity: 1;
-          transform: translateY(0); /* Start from final position */
-          animation: ${c} 0.5s ease-in forwards;
-        `;
-    default:
-      return "";
+  &:hover {
+    outline: 1px solid ${({ theme: o }) => o.colors.BLACK_1};
   }
-}}
+`, x = e(i)`
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: break-spaces;
+`, b = e(r)`
+  position: absolute;
+  top: -16px;
+  right: -15px;
 `;
 export {
-  d as PuzzleWrapper
+  n as PuzzleWrapper,
+  b as StickerWrapper,
+  x as Title
 };
 //# sourceMappingURL=puzzle-card-styled.js.map

package/dist/features/puzzles/comps/puzzle-card-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"puzzle-card-styled.js","sources":["../../../../src/features/puzzles/comps/puzzle-card-styled.tsx"],"sourcesContent":["import type { THueNames } from '../../ui/types';\n\nimport styled, { css, keyframes } from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport { getPuzzleCardPattern } from '../utils/puzzle-pattern';\n\n// --- Keyframes for each animation step ---\nconst moveInAnim = keyframes`\n  from { transform: translateY(-100%); }\n  to   { transform: translateY(0); }\n`;\n\nconst rotateYAnim = keyframes`\n  from { transform: rotateY(0deg); }\n  to   { transform: rotateY(360deg); }\n`;\n\nconst moveOutAnim = keyframes`\n  from { transform: translateY(0); opacity: 1; }\n  to   { transform: translateY(-100%); opacity: 0; }\n`;\n\nconst PuzzleWrapper = styled(FlexView)<{ $animationPhase?: string; $imageHue: THueNames }>`\n  position: relative;\n\n  box-shadow: inset 0px 0px 0px 4px ${({ theme, $imageHue }) => theme.colors[`${$imageHue}_4`]};\n\n  background-image: ${({ $imageHue }) => `url(${getPuzzleCardPattern($imageHue)})`};\n  background-size: cover;\n\n  ${({ $animationPhase }) =>\n    $animationPhase &&\n    css`\n      transform-style: preserve-3d;\n      opacity: 0;\n      visibility: hidden;\n      transform: translateY(-100%);\n    `}\n\n  ${({ $animationPhase, theme, $imageHue }) => {\n    switch ($animationPhase) {\n      case 'movingIn':\n        return css`\n          visibility: visible;\n          opacity: 1;\n          animation: ${moveInAnim} 0.5s ease-out forwards;\n        `;\n      case 'revealing':\n        return css`\n          visibility: visible;\n          opacity: 1;\n          transform: translateY(0); /* Position after moveIn */\n          animation: ${rotateYAnim} 1s ease-in-out forwards;\n        `;\n      case 'visible':\n        return css`\n          visibility: visible;\n          opacity: 1;\n          transform: translateY(0) rotateY(360deg);\n          background-color: ${theme.colors[`${$imageHue}_2`]};\n          transition: background-color 0.2s ease-in;\n        `;\n      case 'assigning':\n        return css`\n          visibility: visible;\n          opacity: 1;\n          transform: translateY(0); /* Reset rotation for this animation */\n          animation: ${rotateYAnim} 1s ease-in-out forwards;\n        `;\n      case 'assigned':\n        return css`\n          visibility: visible;\n          opacity: 1;\n          transform: translateY(0) rotateY(360deg);\n        `;\n      case 'movingOut':\n        return css`\n          visibility: visible;\n          opacity: 1;\n          transform: translateY(0); /* Start from final position */\n          animation: ${moveOutAnim} 0.5s ease-in forwards;\n        `;\n      default:\n        return '';\n    }\n  }}\n`;\n\nexport { PuzzleWrapper };\n"],"names":["moveInAnim","keyframes","rotateYAnim","moveOutAnim","PuzzleWrapper","styled","FlexView","theme","$imageHue","getPuzzleCardPattern","$animationPhase","css"],"mappings":";;;AAQA,MAAMA,IAAaC;AAAA;AAAA;AAAA,GAKbC,IAAcD;AAAA;AAAA;AAAA,GAKdE,IAAcF;AAAA;AAAA;AAAA,GAKdG,IAAgBC,EAAOC,CAAQ;AAAA;AAAA;AAAA,sCAGC,CAAC,EAAE,OAAAC,GAAO,WAAAC,QAAgBD,EAAM,OAAO,GAAGC,CAAS,IAAI,CAAC;AAAA;AAAA,sBAExE,CAAC,EAAE,WAAAA,EAAU,MAAM,OAAOC,EAAqBD,CAAS,CAAC,GAAG;AAAA;AAAA;AAAA,IAG9E,CAAC,EAAE,iBAAAE,QACHA,KACAC;AAAA;AAAA;AAAA;AAAA;AAAA,KAKC;AAAA;AAAA,IAED,CAAC,EAAE,iBAAAD,GAAiB,OAAAH,GAAO,WAAAC,QAAgB;AAC3C,UAAQE,GAAiB;AAAA,IACvB,KAAK;AACI,aAAAC;AAAA;AAAA;AAAA,uBAGQX,CAAU;AAAA;AAAA,IAE3B,KAAK;AACI,aAAAW;AAAA;AAAA;AAAA;AAAA,uBAIQT,CAAW;AAAA;AAAA,IAE5B,KAAK;AACI,aAAAS;AAAA;AAAA;AAAA;AAAA,8BAIeJ,EAAM,OAAO,GAAGC,CAAS,IAAI,CAAC;AAAA;AAAA;AAAA,IAGtD,KAAK;AACI,aAAAG;AAAA;AAAA;AAAA;AAAA,uBAIQT,CAAW;AAAA;AAAA,IAE5B,KAAK;AACI,aAAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKT,KAAK;AACI,aAAAA;AAAA;AAAA;AAAA;AAAA,uBAIQR,CAAW;AAAA;AAAA,IAE5B;AACS,aAAA;AAAA,EACX;AACF,CAAC;AAAA;"}
+{"version":3,"file":"puzzle-card-styled.js","sources":["../../../../src/features/puzzles/comps/puzzle-card-styled.tsx"],"sourcesContent":["import type { THueNames } from '../../ui/types';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport { getPuzzleCardPattern } from '../utils/puzzle-pattern';\n\nconst PuzzleWrapper = styled(FlexView)<{ $animationPhase?: string; $imageHue: THueNames }>`\n  position: relative;\n  cursor: pointer;\n\n  box-shadow: inset 0px 0px 0px 4px ${({ theme, $imageHue }) => theme.colors[`${$imageHue}_4`]};\n\n  background-image: ${({ $imageHue }) => `url(${getPuzzleCardPattern($imageHue)})`};\n  background-size: cover;\n\n  &:hover {\n    outline: 1px solid ${({ theme }) => theme.colors.BLACK_1};\n  }\n`;\n\nconst Title = styled(Text)`\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: break-spaces;\n`;\n\nconst StickerWrapper = styled(FlexView)`\n  position: absolute;\n  top: -16px;\n  right: -15px;\n`;\n\nexport { PuzzleWrapper, Title, StickerWrapper };\n"],"names":["PuzzleWrapper","styled","FlexView","theme","$imageHue","getPuzzleCardPattern","Title","Text","StickerWrapper"],"mappings":";;;;AAQM,MAAAA,IAAgBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,sCAIC,CAAC,EAAE,OAAAC,GAAO,WAAAC,QAAgBD,EAAM,OAAO,GAAGC,CAAS,IAAI,CAAC;AAAA;AAAA,sBAExE,CAAC,EAAE,WAAAA,EAAU,MAAM,OAAOC,EAAqBD,CAAS,CAAC,GAAG;AAAA;AAAA;AAAA;AAAA,yBAIzD,CAAC,EAAE,OAAAD,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAItDG,IAAQL,EAAOM,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASnBC,IAAiBP,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/puzzles/comps/puzzle-card.js

@@ -1,35 +1,69 @@
-import { jsx as h } from "react/jsx-runtime";
-import { memo as p } from "react";
-import { PuzzleWrapper as s } from "./puzzle-card-styled.js";
-const c = p(
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { memo as z, useMemo as g, useCallback as L } from "react";
+import P from "../../ui/buttons/clickable/clickable.js";
+import _ from "../../ui/image/image.js";
+import E from "../../ui/layout/flex-view.js";
+import S from "../../ui/lottie-animation/lottie-animation.js";
+import { PUZZLE_ANALYTICS_EVENTS as b } from "../puzzle-analytics-events.js";
+import { getPuzzleStickerLottie as d } from "../utils/puzzle-feedback-celebration.js";
+import { PuzzleWrapper as y, Title as Z, StickerWrapper as k } from "./puzzle-card-styled.js";
+const x = {
+  autoplay: !1,
+  loop: !1,
+  renderer: "canvas"
+}, X = z(
   ({
-    children: e,
-    imageHue: t,
-    onAnimationEnd: r,
-    animationPhase: o,
-    width: i,
-    widthX: m,
-    height: n,
-    heightX: $,
-    backgroundColor: a
-  }) => /* @__PURE__ */ h(
-    s,
-    {
-      $animationPhase: o,
-      onAnimationEnd: r,
-      $width: i,
-      $height: n,
-      $widthX: m,
-      $heightX: $,
-      $alignItems: "center",
-      $justifyContent: "center",
-      $imageHue: t,
-      $background: a ?? `${t}_6`,
-      children: e
-    }
-  )
+    imageHue: o,
+    imageUrl: s,
+    title: p,
+    height: f = "100%",
+    width: h = "100%",
+    onCardClick: e,
+    userNodeId: i,
+    rewards: r,
+    studentId: n,
+    nodeId: l
+  }) => {
+    const { sticker: c } = (r == null ? void 0 : r[0]) || {}, $ = g(
+      () => ({
+        node_id: l,
+        student_id: n,
+        node_type: "PUZZLE_CARD"
+      }),
+      [l, n]
+    ), m = c ? d(c) : void 0, u = L(() => {
+      i && (e == null || e(i));
+    }, [e, i]);
+    return /* @__PURE__ */ t(
+      P,
+      {
+        label: "",
+        analyticsLabel: b.PUZZLE_VIEWED,
+        analyticsProps: $,
+        onClick: u,
+        children: /* @__PURE__ */ a(
+          y,
+          {
+            $width: h,
+            $height: f,
+            $justifyContent: "center",
+            $alignItems: "center",
+            $imageHue: o,
+            $background: `${o}_2`,
+            children: [
+              /* @__PURE__ */ a(E, { $justifyContent: "center", $alignItems: "center", $flexGap: 12, children: [
+                /* @__PURE__ */ t(_, { src: s ?? "", width: 68, height: 68, withLoader: !1, alt: "Puzzle" }),
+                /* @__PURE__ */ t(Z, { $renderAs: "ab3", $align: "center", $width: "80%", children: p })
+              ] }),
+              m && /* @__PURE__ */ t(k, { $widthX: 2.5, $heightX: 2.5, children: /* @__PURE__ */ t(S, { src: m, settings: x }) })
+            ]
+          }
+        )
+      }
+    );
+  }
 );
 export {
-  c as default
+  X as default
 };
 //# sourceMappingURL=puzzle-card.js.map

package/dist/features/puzzles/comps/puzzle-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"puzzle-card.js","sources":["../../../../src/features/puzzles/comps/puzzle-card.tsx"],"sourcesContent":["import type { IPuzzleCardProps } from './puzzle-card-types';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport * as Styled from './puzzle-card-styled';\n\nconst PuzzleCard: FC<IPuzzleCardProps> = memo(\n  ({\n    children,\n    imageHue,\n    onAnimationEnd,\n    animationPhase,\n    width,\n    widthX,\n    height,\n    heightX,\n    backgroundColor,\n  }) => {\n    return (\n      <Styled.PuzzleWrapper\n        $animationPhase={animationPhase}\n        onAnimationEnd={onAnimationEnd}\n        $width={width}\n        $height={height}\n        $widthX={widthX}\n        $heightX={heightX}\n        $alignItems=\"center\"\n        $justifyContent=\"center\"\n        $imageHue={imageHue}\n        $background={backgroundColor ?? `${imageHue}_6`}\n      >\n        {children}\n      </Styled.PuzzleWrapper>\n    );\n  },\n);\n\nexport default PuzzleCard;\n"],"names":["PuzzleCard","memo","children","imageHue","onAnimationEnd","animationPhase","width","widthX","height","heightX","backgroundColor","jsx","Styled.PuzzleWrapper"],"mappings":";;;AAOA,MAAMA,IAAmCC;AAAA,EACvC,CAAC;AAAA,IACC,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,iBAAAC;AAAA,EAAA,MAGE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,iBAAiBP;AAAA,MACjB,gBAAAD;AAAA,MACA,QAAQE;AAAA,MACR,SAASE;AAAA,MACT,SAASD;AAAA,MACT,UAAUE;AAAA,MACV,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,WAAWN;AAAA,MACX,aAAaO,KAAmB,GAAGP,CAAQ;AAAA,MAE1C,UAAAD;AAAA,IAAA;AAAA,EAAA;AAIT;"}
+{"version":3,"file":"puzzle-card.js","sources":["../../../../src/features/puzzles/comps/puzzle-card.tsx"],"sourcesContent":["import type { IPuzzleCardProps } from './puzzle-card-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useMemo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport Image from '../../ui/image/image';\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\nimport { PUZZLE_ANALYTICS_EVENTS } from '../puzzle-analytics-events';\nimport { getPuzzleStickerLottie } from '../utils/puzzle-feedback-celebration';\nimport * as Styled from './puzzle-card-styled';\n\nconst puzzleStickerLottieSettings = {\n  autoplay: false,\n  loop: false,\n  renderer: 'canvas',\n};\n\nconst PuzzleCard: FC<IPuzzleCardProps> = memo(\n  ({\n    imageHue,\n    imageUrl,\n    title,\n    height = '100%',\n    width = '100%',\n    onCardClick,\n    userNodeId,\n    rewards,\n    studentId,\n    nodeId,\n  }) => {\n    const { sticker } = rewards?.[0] || {};\n\n    const analyticsProps = useMemo(\n      () => ({\n        node_id: nodeId,\n        student_id: studentId,\n        node_type: 'PUZZLE_CARD',\n      }),\n      [nodeId, studentId],\n    );\n\n    const puzzleStickerLottie = sticker ? getPuzzleStickerLottie(sticker) : undefined;\n\n    const handleCardClick = useCallback(() => {\n      if (userNodeId) {\n        onCardClick?.(userNodeId);\n      }\n    }, [onCardClick, userNodeId]);\n\n    return (\n      <Clickable\n        label=\"\"\n        analyticsLabel={PUZZLE_ANALYTICS_EVENTS.PUZZLE_VIEWED}\n        analyticsProps={analyticsProps}\n        onClick={handleCardClick}\n      >\n        <Styled.PuzzleWrapper\n          $width={width}\n          $height={height}\n          $justifyContent=\"center\"\n          $alignItems=\"center\"\n          $imageHue={imageHue}\n          $background={`${imageHue}_2`}\n        >\n          <FlexView $justifyContent=\"center\" $alignItems=\"center\" $flexGap={12}>\n            <Image src={imageUrl ?? ''} width={68} height={68} withLoader={false} alt=\"Puzzle\" />\n\n            <Styled.Title $renderAs=\"ab3\" $align=\"center\" $width=\"80%\">\n              {title}\n            </Styled.Title>\n          </FlexView>\n\n          {puzzleStickerLottie && (\n            <Styled.StickerWrapper $widthX={2.5} $heightX={2.5}>\n              <LottieAnimation src={puzzleStickerLottie} settings={puzzleStickerLottieSettings} />\n            </Styled.StickerWrapper>\n          )}\n        </Styled.PuzzleWrapper>\n      </Clickable>\n    );\n  },\n);\n\nexport default PuzzleCard;\n"],"names":["puzzleStickerLottieSettings","PuzzleCard","memo","imageHue","imageUrl","title","height","width","onCardClick","userNodeId","rewards","studentId","nodeId","sticker","analyticsProps","useMemo","puzzleStickerLottie","getPuzzleStickerLottie","handleCardClick","useCallback","jsx","Clickable","PUZZLE_ANALYTICS_EVENTS","jsxs","Styled.PuzzleWrapper","FlexView","Image","Styled.Title","Styled.StickerWrapper","LottieAnimation"],"mappings":";;;;;;;;;AAaA,MAAMA,IAA8B;AAAA,EAClC,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ,GAEMC,IAAmCC;AAAA,EACvC,CAAC;AAAA,IACC,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,EAAA,MACI;AACJ,UAAM,EAAE,SAAAC,EAAQ,KAAIH,KAAA,gBAAAA,EAAU,OAAM,CAAA,GAE9BI,IAAiBC;AAAA,MACrB,OAAO;AAAA,QACL,SAASH;AAAA,QACT,YAAYD;AAAA,QACZ,WAAW;AAAA,MAAA;AAAA,MAEb,CAACC,GAAQD,CAAS;AAAA,IAAA,GAGdK,IAAsBH,IAAUI,EAAuBJ,CAAO,IAAI,QAElEK,IAAkBC,EAAY,MAAM;AACxC,MAAIV,MACFD,KAAA,QAAAA,EAAcC;AAAA,IAChB,GACC,CAACD,GAAaC,CAAU,CAAC;AAG1B,WAAA,gBAAAW;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,gBAAgBC,EAAwB;AAAA,QACxC,gBAAAR;AAAA,QACA,SAASI;AAAA,QAET,UAAA,gBAAAK;AAAA,UAACC;AAAAA,UAAA;AAAA,YACC,QAAQjB;AAAA,YACR,SAASD;AAAA,YACT,iBAAgB;AAAA,YAChB,aAAY;AAAA,YACZ,WAAWH;AAAA,YACX,aAAa,GAAGA,CAAQ;AAAA,YAExB,UAAA;AAAA,cAAA,gBAAAoB,EAACE,KAAS,iBAAgB,UAAS,aAAY,UAAS,UAAU,IAChE,UAAA;AAAA,gBAAC,gBAAAL,EAAAM,GAAA,EAAM,KAAKtB,KAAY,IAAI,OAAO,IAAI,QAAQ,IAAI,YAAY,IAAO,KAAI,SAAS,CAAA;AAAA,gBAEnF,gBAAAgB,EAACO,GAAA,EAAa,WAAU,OAAM,QAAO,UAAS,QAAO,OAClD,UACHtB,EAAA,CAAA;AAAA,cAAA,GACF;AAAA,cAECW,KACC,gBAAAI,EAACQ,GAAA,EAAsB,SAAS,KAAK,UAAU,KAC7C,4BAACC,GAAgB,EAAA,KAAKb,GAAqB,UAAUhB,EAA6B,CAAA,GACpF;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/features/puzzles/constants/puzzle-container.js

@@ -0,0 +1,8 @@
+const A = {
+  REVEAL: [0, 50],
+  REVEAL_ASSIGNED: [58, 160]
+};
+export {
+  A as PUZZLE_ASSIGN_ANIMATION
+};
+//# sourceMappingURL=puzzle-container.js.map

package/dist/features/puzzles/constants/puzzle-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"puzzle-container.js","sources":["../../../../src/features/puzzles/constants/puzzle-container.ts"],"sourcesContent":["import type { AnimationSegment } from 'lottie-web';\n\nexport const PUZZLE_ASSIGN_ANIMATION = {\n  REVEAL: [0, 50] as AnimationSegment,\n  REVEAL_ASSIGNED: [58, 160] as AnimationSegment,\n};\n"],"names":["PUZZLE_ASSIGN_ANIMATION"],"mappings":"AAEO,MAAMA,IAA0B;AAAA,EACrC,QAAQ,CAAC,GAAG,EAAE;AAAA,EACd,iBAAiB,CAAC,IAAI,GAAG;AAC3B;"}

package/dist/features/puzzles/puzzle-analytics-events.js

@@ -0,0 +1,11 @@
+import { PLUGINS as z } from "../../node_modules/@cuemath/analytics-v2/dist/constants.js";
+var E = /* @__PURE__ */ ((e) => (e.PUZZLE_ASSIGNED = "puzzle_assigned", e.PUZZLE_VIEWED = "puzzle_viewed", e))(E || {});
+const _ = {
+  puzzle_viewed: [z.MIXPANEL],
+  puzzle_assigned: [z.MIXPANEL]
+};
+export {
+  E as PUZZLE_ANALYTICS_EVENTS,
+  _ as PUZZLE_ANALYTICS_WHITELIST_EVENTS
+};
+//# sourceMappingURL=puzzle-analytics-events.js.map

package/dist/features/puzzles/puzzle-analytics-events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"puzzle-analytics-events.js","sources":["../../../src/features/puzzles/puzzle-analytics-events.ts"],"sourcesContent":["import { PLUGINS } from '@cuemath/analytics-v2/dist/constants';\n\nexport enum PUZZLE_ANALYTICS_EVENTS {\n  PUZZLE_ASSIGNED = 'puzzle_assigned',\n  PUZZLE_VIEWED = 'puzzle_viewed',\n}\n\nexport const PUZZLE_ANALYTICS_WHITELIST_EVENTS = {\n  [PUZZLE_ANALYTICS_EVENTS.PUZZLE_VIEWED]: [PLUGINS.MIXPANEL],\n  [PUZZLE_ANALYTICS_EVENTS.PUZZLE_ASSIGNED]: [PLUGINS.MIXPANEL],\n};\n"],"names":["PUZZLE_ANALYTICS_EVENTS","PUZZLE_ANALYTICS_WHITELIST_EVENTS","PLUGINS"],"mappings":";AAEY,IAAAA,sBAAAA,OACVA,EAAA,kBAAkB,mBAClBA,EAAA,gBAAgB,iBAFNA,IAAAA,KAAA,CAAA,CAAA;AAKL,MAAMC,IAAoC;AAAA,EAC9C,eAAwC,CAACC,EAAQ,QAAQ;AAAA,EACzD,iBAA0C,CAACA,EAAQ,QAAQ;AAC9D;"}

package/dist/features/puzzles/puzzle-container/puzzle-container-styled.js

@@ -1,47 +1,77 @@
-import o from "styled-components";
-import t from "../../ui/layout/flex-view.js";
-const p = o(t)`
-  cursor: pointer;
+import e from "styled-components";
+import r from "../../ui/layout/flex-view.js";
+import { getPuzzleCardPattern as s } from "../utils/puzzle-pattern.js";
+const c = e(r)(({ theme: t, $assigned: o }) => {
+  const { colors: i, layout: n } = t;
+  return `
+    cursor: pointer;
+    width: ${n.gutter * 15.9375}px;
+    height: ${n.gutter * 19.125}px;
+    position: relative;
+    left: ${o ? "0" : "50px"};
+    top: ${o ? "0" : "50px"};
 
-  &:hover {
-    outline: 2px solid ${({ theme: e }) => e.colors.BLACK_1};
-  }
-`, l = o(t)(({ theme: e, $disabled: n }) => {
-  const { colors: r } = e;
+    &:hover {
+      outline: 2px solid ${i.BLACK_1};
+    }
+  `;
+}), x = e(r)(({ theme: t, $assigned: o, $assigning: i }) => {
+  const { colors: n, layout: p } = t;
   return `
-    position: absolute;
-    bottom: -48px;
     cursor: pointer;
-    z-index: -1;
+    width: ${p.gutter * 15.9375}px;
+    position: absolute;
+    left: ${o ? "0" : "50px"};
+    bottom: ${o ? "-50px" : "11px"};
     
-    ${n && `
-      background: ${r.WHITE_4};
-      border: 2px solid ${r.WHITE_5};
+    ${(o || i) && `
+      background: ${n.WHITE_4};
+      border: 2px solid ${n.WHITE_5};
       border-top: 0;
       pointer-events: none;
     `}
   `;
-}), c = o(t)`
+});
+e(r)`
   position: relative;
   top: -8px;
   height: 100%;
   width: 100%;
-`, u = o(t)`
+`;
+e(r)`
   border-radius: 50%;
-`, a = o(t)`
+`;
+const d = e(r)`
   position: relative;
   transition: height 0.3s ease-out;
-`, d = o(t)`
+`, g = e(r)`
   position: absolute;
   top: 0;
   right: 0;
+`, h = e(r)(({ $visible: t, theme: o }) => {
+  const { layout: i } = o;
+  return `
+    width: ${i.gutter * 22.1875}px;
+    height: ${i.gutter * 26}px;
+    left: 0;
+    opacity: ${t ? 1 : 0};
+    pointer-events: ${t ? "auto" : "none"};
+    transition: opacity 0.2s ease-out;
+  `;
+}), $ = e(r)`
+  position: relative;
+
+  box-shadow: inset 0px 0px 0px 4px ${({ theme: t, $imageHue: o }) => t.colors[`${o}_4`]};
+
+  background-image: ${({ $imageHue: t }) => `url(${s(t)})`};
+  background-size: cover;
 `;
 export {
-  d as AssignedTag,
-  u as CheckMarkIcon,
-  l as PuzzleButton,
-  a as PuzzleContainer,
-  p as PuzzleContent,
-  c as PuzzleText
+  g as AssignedTag,
+  $ as PuzzleAssignedWrapper,
+  x as PuzzleButton,
+  d as PuzzleContainer,
+  c as PuzzleContent,
+  h as PuzzleContentWrapper
 };
 //# sourceMappingURL=puzzle-container-styled.js.map