@cuemath/leap 3.2.15-link.0 → 3.2.15

package/dist/features/journey/use-journey/journey-context-provider.js

@@ -1,55 +1,55 @@
-import { jsxs as L, jsx as O } from "react/jsx-runtime";
-import { createContext as N, useState as c, useRef as v, useCallback as h, useMemo as R, useEffect as T } from "react";
-import { Coachmark as W } from "../comps/coachmark/coachmark.js";
-import { usePostUserJourney as M, useGetUserJourney as V } from "../user-journey-api/user-journey-api.js";
-import { Overlay as G } from "./journey-styled.js";
-const F = N(null), I = ({ children: b, appId: i, userId: u }) => {
-  const [U, q] = c(!1), [k, p] = c(null), [a, l] = c([]), [f, x] = c(!1), m = v(-1), t = v(void 0), w = v([]), [z, B] = c(!1), [A, D] = c({
+import { jsxs as R, jsx as j } from "react/jsx-runtime";
+import { createContext as W, useState as s, useRef as k, useCallback as h, useMemo as M, useEffect as O } from "react";
+import { Coachmark as V } from "../comps/coachmark/coachmark.js";
+import { usePostUserJourney as G, useGetUserJourney as F } from "../user-journey-api/user-journey-api.js";
+import { Overlay as I } from "./journey-styled.js";
+const K = W(null), re = ({ children: T, appId: a, userId: c }) => {
+  const [b, U] = s(!0), [q, z] = s(!1), [v, p] = s(null), [l, y] = s([]), [J, x] = s(!1), m = k(-1), t = k(void 0), f = k([]), [D, H] = s(!1), [A, L] = s({
     height: window.innerHeight,
     width: window.innerWidth
-  }), { post: _ } = M(), { data: C = null, get: $ } = V(), E = h(
-    (e, r, o) => {
-      var J, y;
-      if (a.length > 0) {
+  }), { post: $ } = G(), { data: w = null, get: _ } = F(), B = h(
+    (e, r, o, C = !0) => {
+      var d, n;
+      if (l.length > 0) {
         console.error(
           `setJourney: Other Journey is already active, Current Journey: ${t.current}, New Journey Request: ${e}`
         );
         return;
       }
-      x(!0), t.current = e, m.current = -1, l(
-        r.map((n) => ({
-          ...n,
+      x(!0), U(C), t.current = e, m.current = -1, y(
+        r.map((u) => ({
+          ...u,
           isActive: !1
           // New coachmarks are inactive by default
         }))
-      ), o && (D({
-        height: ((J = o.current) == null ? void 0 : J.clientHeight) || window.innerHeight,
-        width: ((y = o.current) == null ? void 0 : y.clientWidth) || window.innerWidth
-      }), B(!0));
+      ), o && (L({
+        height: ((d = o.current) == null ? void 0 : d.clientHeight) || window.innerHeight,
+        width: ((n = o.current) == null ? void 0 : n.clientWidth) || window.innerWidth
+      }), H(!0));
     },
-    [a.length]
-  ), s = h(() => {
-    w.current.forEach((e) => {
+    [l.length]
+  ), i = h(() => {
+    f.current.forEach((e) => {
       clearTimeout(e);
-    }), w.current = [], t.current = void 0, m.current = -1, l([]), x(!1);
-  }, []), P = h(
+    }), f.current = [], t.current = void 0, m.current = -1, y([]), x(!1);
+  }, []), E = h(
     (e) => {
-      s(), p((r) => r && !r.includes(e) ? [...r, e] : r), _({
-        app_id: i,
-        user_id: u,
+      i(), p((r) => r && !r.includes(e) ? [...r, e] : r), $({
+        app_id: a,
+        user_id: c,
         journey_id: e,
         journey_status: "COMPLETED"
       });
     },
-    [i, s, _, u]
-  ), S = h((e, r) => {
+    [a, i, $, c]
+  ), P = h((e, r) => {
     if (!t.current || e !== t.current) {
       console.error(
         t.current ? `A Journey is already active, Current Journey: ${t.current}, New Journey Request: ${e}` : "addCoachmark was called before setJourney and Journey ID is undefined"
       );
       return;
     }
-    l((o) => [
+    y((o) => [
       ...o,
       {
         ...r,
@@ -57,86 +57,87 @@ const F = N(null), I = ({ children: b, appId: i, userId: u }) => {
         // New coachmarks are inactive by default
       }
     ]);
-  }, []), j = h(
-    (e, r = !1, o = 0, J = !1) => {
+  }, []), S = h(
+    (e, r = !1, o = 0, C = !1) => {
       if (!t.current || e !== t.current) {
         console.error(
           t.current ? "nextCoachmark was called before setJourney" : `A Journey is already active, Current Journey: ${t.current}, New Journey Request: ${e}`
         );
         return;
       }
-      q(J), o !== 0 && l((n) => n.map((d) => ({ ...d, isActive: !1 })));
-      const y = setTimeout(() => {
-        clearTimeout(y);
+      z(C), o !== 0 && y((n) => n.map((u) => ({ ...u, isActive: !1 })));
+      const d = setTimeout(() => {
+        clearTimeout(d);
         const n = m.current + 1;
-        l((d) => {
-          if (n >= d.length || d.length === 0)
-            return s(), [];
+        y((u) => {
+          if (n >= u.length || u.length === 0)
+            return i(), [];
           m.current = n;
-          const g = [...d];
+          const g = [...u];
           return g[n].isActive = !0, n > 0 && (g[n - 1].isActive = r), g;
         });
       }, o);
-      w.current.push(y);
+      f.current.push(d);
     },
-    [s]
-  ), H = R(
+    [i]
+  ), N = M(
     () => ({
-      nextCoachmark: j,
-      setJourney: E,
-      addCoachmark: S,
-      clearJourney: s,
-      endJourney: P,
-      coachmarks: a,
-      userCompletedJourneyIds: k,
-      isJourneyActive: f
+      nextCoachmark: S,
+      setJourney: B,
+      addCoachmark: P,
+      clearJourney: i,
+      endJourney: E,
+      coachmarks: l,
+      userCompletedJourneyIds: v,
+      isJourneyActive: J
     }),
     [
-      j,
-      E,
       S,
-      s,
+      B,
       P,
-      a,
-      k,
-      f
+      i,
+      E,
+      l,
+      v,
+      J
     ]
   );
-  return T(() => {
-    i && u && $(u, {
-      app_id: i,
-      user_id: u,
+  return O(() => {
+    a && c && _(c, {
+      app_id: a,
+      user_id: c,
       journey_status: "COMPLETED"
     });
-  }, [i, $, u]), T(() => {
-    if (C) {
-      const e = C.map((r) => r.journey_id);
+  }, [a, _, c]), O(() => {
+    if (w) {
+      const e = w.map((r) => r.journey_id);
       p(e);
     }
-  }, [C]), /* @__PURE__ */ L(F.Provider, { value: H, children: [
-    f && /* @__PURE__ */ O(
-      G,
+  }, [w]), /* @__PURE__ */ R(K.Provider, { value: N, children: [
+    J && /* @__PURE__ */ j(
+      I,
       {
         about: "journey-overlay",
         height: A.height,
         width: A.width,
-        $isJourneyBlurred: U,
+        $isJourneyBlurred: q,
+        $isBlockingJourney: b,
         "data-testid": t.current,
-        children: a.map((e, r) => /* @__PURE__ */ O(
-          W,
+        children: l.map((e, r) => /* @__PURE__ */ j(
+          V,
           {
             coachmark: e,
-            isInsideScrollView: z
+            isInsideScrollView: D
           },
           `coachmark-${r}`
         ))
       }
     ),
-    b
+    T
   ] });
 };
 export {
-  F as JourneyContext,
-  I as JourneyProvider
+  K as JourneyContext,
+  re as JourneyProvider
 };
 //# sourceMappingURL=journey-context-provider.js.map

package/dist/features/journey/use-journey/journey-context-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"journey-context-provider.js","sources":["../../../../src/features/journey/use-journey/journey-context-provider.tsx"],"sourcesContent":["/* eslint-disable no-console */\nimport type { TJourneyId } from '../journey-id/journey-id-types';\nimport type {\n  ICoachmarkProps,\n  IJourneyContext,\n  IJourneyProviderProps,\n  TCoachmarkJourneyProps,\n} from './journey-context-types';\nimport type { FC, RefObject } from 'react';\n\nimport { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Coachmark } from '../comps/coachmark/coachmark';\nimport { useGetUserJourney, usePostUserJourney } from '../user-journey-api/user-journey-api';\nimport * as S from './journey-styled';\n\nexport const JourneyContext = createContext<IJourneyContext | null>(null);\n\nexport const JourneyProvider: FC<IJourneyProviderProps> = ({ children, appId, userId }) => {\n  const [isJourneyBlurred, setIsJourneyBlurred] = useState<boolean>(false);\n  const [userCompletedJourneyIds, setUserCompletedJourneyIds] = useState<TJourneyId[] | null>(null);\n  const [coachmarkList, setCoachmarkList] = useState<ICoachmarkProps[]>([]);\n  const [isJourneyActive, setIsJourneyActive] = useState(false);\n  const currentIndex = useRef(-1);\n  const currentJourneyId = useRef<TJourneyId | undefined>(undefined);\n  const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n  const [isScrollableJourney, setIsScrollableJourney] = useState<boolean>(false);\n  const [overlaySize, setOverlaySize] = useState({\n    height: window.innerHeight,\n    width: window.innerWidth,\n  });\n\n  const { post: postJourneyCompletion } = usePostUserJourney();\n  const { data: userCompletedJourneys = null, get: getJourneyProgress } = useGetUserJourney();\n\n  const setJourney = useCallback(\n    (\n      id: TJourneyId,\n      coachmarks: TCoachmarkJourneyProps[],\n      scrollableContRef?: RefObject<HTMLDivElement | null>,\n    ) => {\n      if (coachmarkList.length > 0) {\n        console.error(\n          `setJourney: Other Journey is already active, Current Journey: ${currentJourneyId.current}, New Journey Request: ${id}`,\n        );\n\n        return;\n      }\n      setIsJourneyActive(true);\n      currentJourneyId.current = id;\n      currentIndex.current = -1;\n      setCoachmarkList(\n        coachmarks.map((item: TCoachmarkJourneyProps) => {\n          return {\n            ...item,\n            isActive: false, // New coachmarks are inactive by default\n          } as ICoachmarkProps;\n        }),\n      );\n      if (scrollableContRef) {\n        setOverlaySize({\n          height: scrollableContRef.current?.clientHeight || window.innerHeight,\n          width: scrollableContRef.current?.clientWidth || window.innerWidth,\n        });\n        setIsScrollableJourney(true);\n      }\n    },\n    [coachmarkList.length],\n  );\n\n  const clearJourney = useCallback(() => {\n    // Clear all timers\n    timerRefs.current.forEach(timer => {\n      clearTimeout(timer);\n    });\n    timerRefs.current = [];\n    currentJourneyId.current = undefined;\n    currentIndex.current = -1;\n    setCoachmarkList([]);\n    setIsJourneyActive(false);\n  }, []);\n\n  const endJourney = useCallback(\n    (journeyId: TJourneyId) => {\n      clearJourney();\n      setUserCompletedJourneyIds(prev => {\n        if (prev && !prev.includes(journeyId)) {\n          return [...prev, journeyId];\n        }\n\n        return prev;\n      });\n      // fire the API (doesn’t block the UI)\n      postJourneyCompletion({\n        app_id: appId,\n        user_id: userId,\n        journey_id: journeyId,\n        journey_status: 'COMPLETED',\n      });\n    },\n    [appId, clearJourney, postJourneyCompletion, userId],\n  );\n\n  const addCoachmark = useCallback((id: TJourneyId, coachmark: TCoachmarkJourneyProps) => {\n    if (!currentJourneyId.current || id !== currentJourneyId.current) {\n      console.error(\n        currentJourneyId.current\n          ? `A Journey is already active, Current Journey: ${currentJourneyId.current}, New Journey Request: ${id}`\n          : `addCoachmark was called before setJourney and Journey ID is undefined`,\n      );\n\n      return;\n    }\n\n    setCoachmarkList(prev => [\n      ...prev,\n      {\n        ...coachmark,\n        isActive: false, // New coachmarks are inactive by default\n      } as ICoachmarkProps,\n    ]);\n  }, []);\n\n  const nextCoachmark = useCallback(\n    (\n      id: TJourneyId,\n      keepPrevActive: boolean = false,\n      delayInMs: number = 0,\n      shouldBlurNextJourney: boolean = false,\n    ) => {\n      if (!currentJourneyId.current || id !== currentJourneyId.current) {\n        console.error(\n          currentJourneyId.current\n            ? `nextCoachmark was called before setJourney`\n            : `A Journey is already active, Current Journey: ${currentJourneyId.current}, New Journey Request: ${id}`,\n        );\n\n        return;\n      }\n\n      setIsJourneyBlurred(shouldBlurNextJourney);\n\n      if (delayInMs !== 0) {\n        // If delay is not 0, we will hide all them coachmarks and reveal only after the delay\n        setCoachmarkList(prevList => {\n          return prevList.map((item: TCoachmarkJourneyProps) => {\n            return { ...item, isActive: false };\n          });\n        });\n      }\n\n      const timer = setTimeout(() => {\n        clearTimeout(timer);\n        const currIndex = currentIndex.current + 1;\n\n        setCoachmarkList(prevList => {\n          // Finish onboarding\n          if (currIndex >= prevList.length || prevList.length === 0) {\n            clearJourney();\n\n            return [];\n          }\n\n          currentIndex.current = currIndex;\n          const updatedCoachmarkList = [...prevList];\n\n          (updatedCoachmarkList[currIndex] as ICoachmarkProps).isActive = true;\n\n          if (currIndex > 0) {\n            (updatedCoachmarkList[currIndex - 1] as ICoachmarkProps).isActive = keepPrevActive;\n          }\n\n          return updatedCoachmarkList;\n        });\n      }, delayInMs);\n\n      timerRefs.current.push(timer);\n    },\n    [clearJourney],\n  );\n\n  const memoizedContextValue: IJourneyContext = useMemo(\n    () => ({\n      nextCoachmark,\n      setJourney,\n      addCoachmark,\n      clearJourney,\n      endJourney,\n      coachmarks: coachmarkList,\n      userCompletedJourneyIds,\n      isJourneyActive,\n    }),\n    [\n      nextCoachmark,\n      setJourney,\n      addCoachmark,\n      clearJourney,\n      endJourney,\n      coachmarkList,\n      userCompletedJourneyIds,\n      isJourneyActive,\n    ],\n  );\n\n  // Get the initial state of incompleteJourneys\n  useEffect(() => {\n    if (appId && userId) {\n      getJourneyProgress(userId, {\n        app_id: appId,\n        user_id: userId,\n        journey_status: 'COMPLETED',\n      });\n    }\n  }, [appId, getJourneyProgress, userId]);\n\n  // Set the data to context state initially\n  useEffect(() => {\n    if (userCompletedJourneys) {\n      const completedUserJourneysIds = userCompletedJourneys.map(journey => journey.journey_id);\n\n      setUserCompletedJourneyIds(completedUserJourneysIds);\n    }\n  }, [userCompletedJourneys]);\n\n  return (\n    <JourneyContext.Provider value={memoizedContextValue}>\n      {isJourneyActive && (\n        <S.Overlay\n          about=\"journey-overlay\"\n          height={overlaySize.height}\n          width={overlaySize.width}\n          $isJourneyBlurred={isJourneyBlurred}\n          data-testid={currentJourneyId.current}\n        >\n          {coachmarkList.map((coachmark, index) => (\n            <Coachmark\n              key={`coachmark-${index}`}\n              coachmark={coachmark}\n              isInsideScrollView={isScrollableJourney}\n            />\n          ))}\n        </S.Overlay>\n      )}\n      {children}\n    </JourneyContext.Provider>\n  );\n};\n"],"names":["JourneyContext","createContext","JourneyProvider","children","appId","userId","isJourneyBlurred","setIsJourneyBlurred","useState","userCompletedJourneyIds","setUserCompletedJourneyIds","coachmarkList","setCoachmarkList","isJourneyActive","setIsJourneyActive","currentIndex","useRef","currentJourneyId","timerRefs","isScrollableJourney","setIsScrollableJourney","overlaySize","setOverlaySize","postJourneyCompletion","usePostUserJourney","userCompletedJourneys","getJourneyProgress","useGetUserJourney","setJourney","useCallback","id","coachmarks","scrollableContRef","item","_a","_b","clearJourney","timer","endJourney","journeyId","prev","addCoachmark","coachmark","nextCoachmark","keepPrevActive","delayInMs","shouldBlurNextJourney","prevList","currIndex","updatedCoachmarkList","memoizedContextValue","useMemo","useEffect","completedUserJourneysIds","journey","jsxs","jsx","S.Overlay","index","Coachmark"],"mappings":"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"}
+{"version":3,"file":"journey-context-provider.js","sources":["../../../../src/features/journey/use-journey/journey-context-provider.tsx"],"sourcesContent":["/* eslint-disable no-console */\nimport type { TJourneyId } from '../journey-id/journey-id-types';\nimport type {\n  ICoachmarkProps,\n  IJourneyContext,\n  IJourneyProviderProps,\n  TCoachmarkJourneyProps,\n} from './journey-context-types';\nimport type { FC, RefObject } from 'react';\n\nimport { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Coachmark } from '../comps/coachmark/coachmark';\nimport { useGetUserJourney, usePostUserJourney } from '../user-journey-api/user-journey-api';\nimport * as S from './journey-styled';\n\nexport const JourneyContext = createContext<IJourneyContext | null>(null);\n\nexport const JourneyProvider: FC<IJourneyProviderProps> = ({ children, appId, userId }) => {\n  const [isBlockingJourney, setIsBlockingJourney] = useState<boolean>(true);\n  const [isJourneyBlurred, setIsJourneyBlurred] = useState<boolean>(false);\n  const [userCompletedJourneyIds, setUserCompletedJourneyIds] = useState<TJourneyId[] | null>(null);\n  const [coachmarkList, setCoachmarkList] = useState<ICoachmarkProps[]>([]);\n  const [isJourneyActive, setIsJourneyActive] = useState(false);\n  const currentIndex = useRef(-1);\n  const currentJourneyId = useRef<TJourneyId | undefined>(undefined);\n  const timerRefs = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n  const [isScrollableJourney, setIsScrollableJourney] = useState<boolean>(false);\n  const [overlaySize, setOverlaySize] = useState({\n    height: window.innerHeight,\n    width: window.innerWidth,\n  });\n\n  const { post: postJourneyCompletion } = usePostUserJourney();\n  const { data: userCompletedJourneys = null, get: getJourneyProgress } = useGetUserJourney();\n\n  const setJourney = useCallback(\n    (\n      id: TJourneyId,\n      coachmarks: TCoachmarkJourneyProps[],\n      scrollableContRef?: RefObject<HTMLDivElement | null>,\n      isBlocking: boolean = true,\n    ) => {\n      if (coachmarkList.length > 0) {\n        console.error(\n          `setJourney: Other Journey is already active, Current Journey: ${currentJourneyId.current}, New Journey Request: ${id}`,\n        );\n\n        return;\n      }\n      setIsJourneyActive(true);\n      setIsBlockingJourney(isBlocking);\n      currentJourneyId.current = id;\n      currentIndex.current = -1;\n      setCoachmarkList(\n        coachmarks.map((item: TCoachmarkJourneyProps) => {\n          return {\n            ...item,\n            isActive: false, // New coachmarks are inactive by default\n          } as ICoachmarkProps;\n        }),\n      );\n      if (scrollableContRef) {\n        setOverlaySize({\n          height: scrollableContRef.current?.clientHeight || window.innerHeight,\n          width: scrollableContRef.current?.clientWidth || window.innerWidth,\n        });\n        setIsScrollableJourney(true);\n      }\n    },\n    [coachmarkList.length],\n  );\n\n  const clearJourney = useCallback(() => {\n    // Clear all timers\n    timerRefs.current.forEach(timer => {\n      clearTimeout(timer);\n    });\n    timerRefs.current = [];\n    currentJourneyId.current = undefined;\n    currentIndex.current = -1;\n    setCoachmarkList([]);\n    setIsJourneyActive(false);\n  }, []);\n\n  const endJourney = useCallback(\n    (journeyId: TJourneyId) => {\n      clearJourney();\n      setUserCompletedJourneyIds(prev => {\n        if (prev && !prev.includes(journeyId)) {\n          return [...prev, journeyId];\n        }\n\n        return prev;\n      });\n      // fire the API (doesn’t block the UI)\n      postJourneyCompletion({\n        app_id: appId,\n        user_id: userId,\n        journey_id: journeyId,\n        journey_status: 'COMPLETED',\n      });\n    },\n    [appId, clearJourney, postJourneyCompletion, userId],\n  );\n\n  const addCoachmark = useCallback((id: TJourneyId, coachmark: TCoachmarkJourneyProps) => {\n    if (!currentJourneyId.current || id !== currentJourneyId.current) {\n      console.error(\n        currentJourneyId.current\n          ? `A Journey is already active, Current Journey: ${currentJourneyId.current}, New Journey Request: ${id}`\n          : `addCoachmark was called before setJourney and Journey ID is undefined`,\n      );\n\n      return;\n    }\n\n    setCoachmarkList(prev => [\n      ...prev,\n      {\n        ...coachmark,\n        isActive: false, // New coachmarks are inactive by default\n      } as ICoachmarkProps,\n    ]);\n  }, []);\n\n  const nextCoachmark = useCallback(\n    (\n      id: TJourneyId,\n      keepPrevActive: boolean = false,\n      delayInMs: number = 0,\n      shouldBlurNextJourney: boolean = false,\n    ) => {\n      if (!currentJourneyId.current || id !== currentJourneyId.current) {\n        console.error(\n          currentJourneyId.current\n            ? `nextCoachmark was called before setJourney`\n            : `A Journey is already active, Current Journey: ${currentJourneyId.current}, New Journey Request: ${id}`,\n        );\n\n        return;\n      }\n\n      setIsJourneyBlurred(shouldBlurNextJourney);\n\n      if (delayInMs !== 0) {\n        // If delay is not 0, we will hide all them coachmarks and reveal only after the delay\n        setCoachmarkList(prevList => {\n          return prevList.map((item: TCoachmarkJourneyProps) => {\n            return { ...item, isActive: false };\n          });\n        });\n      }\n\n      const timer = setTimeout(() => {\n        clearTimeout(timer);\n        const currIndex = currentIndex.current + 1;\n\n        setCoachmarkList(prevList => {\n          // Finish onboarding\n          if (currIndex >= prevList.length || prevList.length === 0) {\n            clearJourney();\n\n            return [];\n          }\n\n          currentIndex.current = currIndex;\n          const updatedCoachmarkList = [...prevList];\n\n          (updatedCoachmarkList[currIndex] as ICoachmarkProps).isActive = true;\n\n          if (currIndex > 0) {\n            (updatedCoachmarkList[currIndex - 1] as ICoachmarkProps).isActive = keepPrevActive;\n          }\n\n          return updatedCoachmarkList;\n        });\n      }, delayInMs);\n\n      timerRefs.current.push(timer);\n    },\n    [clearJourney],\n  );\n\n  const memoizedContextValue: IJourneyContext = useMemo(\n    () => ({\n      nextCoachmark,\n      setJourney,\n      addCoachmark,\n      clearJourney,\n      endJourney,\n      coachmarks: coachmarkList,\n      userCompletedJourneyIds,\n      isJourneyActive,\n    }),\n    [\n      nextCoachmark,\n      setJourney,\n      addCoachmark,\n      clearJourney,\n      endJourney,\n      coachmarkList,\n      userCompletedJourneyIds,\n      isJourneyActive,\n    ],\n  );\n\n  // Get the initial state of incompleteJourneys\n  useEffect(() => {\n    if (appId && userId) {\n      getJourneyProgress(userId, {\n        app_id: appId,\n        user_id: userId,\n        journey_status: 'COMPLETED',\n      });\n    }\n  }, [appId, getJourneyProgress, userId]);\n\n  // Set the data to context state initially\n  useEffect(() => {\n    if (userCompletedJourneys) {\n      const completedUserJourneysIds = userCompletedJourneys.map(journey => journey.journey_id);\n\n      setUserCompletedJourneyIds(completedUserJourneysIds);\n    }\n  }, [userCompletedJourneys]);\n\n  return (\n    <JourneyContext.Provider value={memoizedContextValue}>\n      {isJourneyActive && (\n        <S.Overlay\n          about=\"journey-overlay\"\n          height={overlaySize.height}\n          width={overlaySize.width}\n          $isJourneyBlurred={isJourneyBlurred}\n          $isBlockingJourney={isBlockingJourney}\n          data-testid={currentJourneyId.current}\n        >\n          {coachmarkList.map((coachmark, index) => (\n            <Coachmark\n              key={`coachmark-${index}`}\n              coachmark={coachmark}\n              isInsideScrollView={isScrollableJourney}\n            />\n          ))}\n        </S.Overlay>\n      )}\n      {children}\n    </JourneyContext.Provider>\n  );\n};\n"],"names":["JourneyContext","createContext","JourneyProvider","children","appId","userId","isBlockingJourney","setIsBlockingJourney","useState","isJourneyBlurred","setIsJourneyBlurred","userCompletedJourneyIds","setUserCompletedJourneyIds","coachmarkList","setCoachmarkList","isJourneyActive","setIsJourneyActive","currentIndex","useRef","currentJourneyId","timerRefs","isScrollableJourney","setIsScrollableJourney","overlaySize","setOverlaySize","postJourneyCompletion","usePostUserJourney","userCompletedJourneys","getJourneyProgress","useGetUserJourney","setJourney","useCallback","id","coachmarks","scrollableContRef","isBlocking","item","_a","_b","clearJourney","timer","endJourney","journeyId","prev","addCoachmark","coachmark","nextCoachmark","keepPrevActive","delayInMs","shouldBlurNextJourney","prevList","currIndex","updatedCoachmarkList","memoizedContextValue","useMemo","useEffect","completedUserJourneysIds","journey","jsxs","jsx","S.Overlay","index","Coachmark"],"mappings":"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"}

package/dist/features/journey/use-journey/journey-styled.js

@@ -1,14 +1,16 @@
-import r, { css as e } from "styled-components";
-const p = r.div`
+import e, { css as r } from "styled-components";
+const p = e.div`
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: ${({ theme: t }) => t.zIndex.JOURNEY_OVERLAY};
+  z-index: ${({ $isBlockingJourney: t, theme: o }) => t ? o.zIndex.JOURNEY_OVERLAY : 0};
+  pointer-events: ${({ $isBlockingJourney: t }) => t ? "auto" : "none"};
+
   height: ${({ height: t }) => t}px;
   width: ${({ width: t }) => t}px;
-  ${({ $isJourneyBlurred: t, theme: o }) => t && e`
+  ${({ $isJourneyBlurred: t, theme: o }) => t && r`
       background: ${o.colors.BLACK_T_38};
       backdrop-filter: blur(80px);
       -webkit-backdrop-filter: blur(80px);

package/dist/features/journey/use-journey/journey-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"journey-styled.js","sources":["../../../../src/features/journey/use-journey/journey-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { css } from 'styled-components';\n\nexport const Overlay = styled.div<{\n  $isJourneyBlurred: boolean;\n  height: number;\n  width: number;\n}>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: ${({ theme }) => theme.zIndex.JOURNEY_OVERLAY};\n  height: ${({ height }) => height}px;\n  width: ${({ width }) => width}px;\n  ${({ $isJourneyBlurred, theme }) =>\n    $isJourneyBlurred &&\n    css`\n      background: ${theme.colors.BLACK_T_38};\n      backdrop-filter: blur(80px);\n      -webkit-backdrop-filter: blur(80px);\n    `}\n`;\n"],"names":["Overlay","styled","theme","height","width","$isJourneyBlurred","css"],"mappings":";AAGO,MAAMA,IAAUC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAUjB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,eAAe;AAAA,YAC5C,CAAC,EAAE,QAAAC,EAAO,MAAMA,CAAM;AAAA,WACvB,CAAC,EAAE,OAAAC,EAAM,MAAMA,CAAK;AAAA,IAC3B,CAAC,EAAE,mBAAAC,GAAmB,OAAAH,EAAA,MACtBG,KACAC;AAAA,oBACgBJ,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA,KAGtC;AAAA;"}
+{"version":3,"file":"journey-styled.js","sources":["../../../../src/features/journey/use-journey/journey-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { css } from 'styled-components';\n\nexport const Overlay = styled.div<{\n  $isJourneyBlurred: boolean;\n  $isBlockingJourney: boolean;\n  height: number;\n  width: number;\n}>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: ${({ $isBlockingJourney, theme }) =>\n    $isBlockingJourney ? theme.zIndex.JOURNEY_OVERLAY : 0};\n  pointer-events: ${({ $isBlockingJourney }) => ($isBlockingJourney ? 'auto' : 'none')};\n\n  height: ${({ height }) => height}px;\n  width: ${({ width }) => width}px;\n  ${({ $isJourneyBlurred, theme }) =>\n    $isJourneyBlurred &&\n    css`\n      background: ${theme.colors.BLACK_T_38};\n      backdrop-filter: blur(80px);\n      -webkit-backdrop-filter: blur(80px);\n    `}\n`;\n"],"names":["Overlay","styled","$isBlockingJourney","theme","height","width","$isJourneyBlurred","css"],"mappings":";AAGO,MAAMA,IAAUC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWjB,CAAC,EAAE,oBAAAC,GAAoB,OAAAC,QAChCD,IAAqBC,EAAM,OAAO,kBAAkB,CAAC;AAAA,oBACrC,CAAC,EAAE,oBAAAD,EAAA,MAA0BA,IAAqB,SAAS,MAAO;AAAA;AAAA,YAE1E,CAAC,EAAE,QAAAE,EAAO,MAAMA,CAAM;AAAA,WACvB,CAAC,EAAE,OAAAC,EAAM,MAAMA,CAAK;AAAA,IAC3B,CAAC,EAAE,mBAAAC,GAAmB,OAAAH,EAAA,MACtBG,KACAC;AAAA,oBACgBJ,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA,KAGtC;AAAA;"}

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

@@ -0,0 +1,81 @@
+import o from "styled-components";
+import n from "../../../assets/line-icons/icons/hint-fill.js";
+import l from "../../ui/layout/flex-view.js";
+import r from "../../ui/text/text.js";
+import { getPuzzleCardPattern as p } from "../utils/puzzle-pattern.js";
+const d = o(l)(({ theme: t, $visible: i }) => {
+  const { gutter: e } = t.layout;
+  return i ? `
+    overflow: scroll;
+    padding-top: ${e * 1.5}px;
+    padding-bottom: ${e * 2}px;
+  ` : "";
+}), g = o(l)`
+  position: relative;
+  margin: 0 auto;
+  box-shadow: inset 0px 0px 0px 4px ${({ theme: t, $imageHue: i }) => t.colors[`${i}_4`]};
+  max-width: 343px;
+  width: 100%;
+  min-height: max-content;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: ${({ $imageHue: t }) => `url(${p(t)})`};
+    background-size: cover;
+    opacity: 0.2;
+  }
+`, x = o(n)`
+  color: ${({ theme: t }) => t.colors.BLACK_1};
+
+  & .hint-fill-icon-path {
+    fill: ${({ theme: t }) => t.colors.WHITE_1};
+  }
+`, u = o(r)`
+  & span {
+    font-weight: 700;
+    margin-right: 4px;
+  }
+`, h = o.div`
+  color: ${({ theme: t }) => t.colors.BLACK};
+  font-size: 14px;
+  line-height: 1.2;
+  font-family: 'Athletics';
+
+  font-weight: 400;
+  font-style: normal;
+
+  em {
+    font-style: italic;
+  }
+
+  ul,
+  ol {
+    list-style-type: initial;
+    padding-left: 32px;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  li {
+    margin: 4px 0;
+  }
+`;
+export {
+  d as PuzzleAppWrapper,
+  g as PuzzleContainer,
+  h as PuzzleQuestionWrapper,
+  u as StyledFeedbackText,
+  x as StyledHintFillIcon
+};
+//# sourceMappingURL=puzzle-app-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"puzzle-app-styled.js","sources":["../../../../src/features/puzzles/app/puzzle-app-styled.tsx"],"sourcesContent":["import type { THueNames } from '../../ui/types';\n\nimport styled from 'styled-components';\n\nimport HintFillIcon from '../../../assets/line-icons/icons/hint-fill';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport { getPuzzleCardPattern } from '../utils/puzzle-pattern';\n\nconst PuzzleAppWrapper = styled(FlexView)<{ $visible: boolean }>(({ theme, $visible }) => {\n  const { gutter } = theme.layout;\n\n  if (!$visible) {\n    return ``;\n  }\n\n  return `\n    overflow: scroll;\n    padding-top: ${gutter * 1.5}px;\n    padding-bottom: ${gutter * 2}px;\n  `;\n});\n\nconst PuzzleContainer = styled(FlexView)<{ $imageHue: THueNames; $backgroundOpacity?: number }>`\n  position: relative;\n  margin: 0 auto;\n  box-shadow: inset 0px 0px 0px 4px ${({ theme, $imageHue }) => theme.colors[`${$imageHue}_4`]};\n  max-width: 343px;\n  width: 100%;\n  min-height: max-content;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-image: ${({ $imageHue }) => `url(${getPuzzleCardPattern($imageHue)})`};\n    background-size: cover;\n    opacity: 0.2;\n  }\n`;\n\nconst StyledHintFillIcon = styled(HintFillIcon)`\n  color: ${({ theme }) => theme.colors.BLACK_1};\n\n  & .hint-fill-icon-path {\n    fill: ${({ theme }) => theme.colors.WHITE_1};\n  }\n`;\n\nconst StyledFeedbackText = styled(Text)`\n  & span {\n    font-weight: 700;\n    margin-right: 4px;\n  }\n`;\n\nconst PuzzleQuestionWrapper = styled.div`\n  color: ${({ theme }) => theme.colors.BLACK};\n  font-size: 14px;\n  line-height: 1.2;\n  font-family: 'Athletics';\n\n  font-weight: 400;\n  font-style: normal;\n\n  em {\n    font-style: italic;\n  }\n\n  ul,\n  ol {\n    list-style-type: initial;\n    padding-left: 32px;\n  }\n\n  ol {\n    list-style-type: decimal;\n  }\n\n  p {\n    margin: 0;\n  }\n\n  li {\n    margin: 4px 0;\n  }\n`;\n\nexport {\n  PuzzleAppWrapper,\n  PuzzleContainer,\n  StyledFeedbackText,\n  StyledHintFillIcon,\n  PuzzleQuestionWrapper,\n};\n"],"names":["PuzzleAppWrapper","styled","FlexView","theme","$visible","gutter","PuzzleContainer","$imageHue","getPuzzleCardPattern","StyledHintFillIcon","HintFillIcon","StyledFeedbackText","Text","PuzzleQuestionWrapper"],"mappings":";;;;;AASM,MAAAA,IAAmBC,EAAOC,CAAQ,EAAyB,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAAe;AAClF,QAAA,EAAE,QAAAC,EAAO,IAAIF,EAAM;AAEzB,SAAKC,IAIE;AAAA;AAAA,mBAEUC,IAAS,GAAG;AAAA,sBACTA,IAAS,CAAC;AAAA,MANrB;AAQX,CAAC,GAEKC,IAAkBL,EAAOC,CAAQ;AAAA;AAAA;AAAA,sCAGD,CAAC,EAAE,OAAAC,GAAO,WAAAI,QAAgBJ,EAAM,OAAO,GAAGI,CAAS,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAYtE,CAAC,EAAE,WAAAA,EAAU,MAAM,OAAOC,EAAqBD,CAAS,CAAC,GAAG;AAAA;AAAA;AAAA;AAAA,GAM9EE,IAAqBR,EAAOS,CAAY;AAAA,WACnC,CAAC,EAAE,OAAAP,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,YAGlC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAIzCQ,IAAqBV,EAAOW,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA,GAOhCC,IAAwBZ,EAAO;AAAA,WAC1B,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -0,0 +1,120 @@
+import { jsxs as y, jsx as a } from "react/jsx-runtime";
+import { memo as A, useRef as S, useCallback as _, useEffect as l, useMemo as $ } from "react";
+import H from "../../ui/image/image.js";
+import M from "../../ui/layout/flex-view.js";
+import x from "../../ui/separator/separator.js";
+import d from "../../worksheet/constants/events.js";
+import N from "../../worksheet/worksheet/hooks/use-learnosity.js";
+import Q from "../../worksheet/worksheet/hooks/use-worksheet-data-helper.js";
+import { getQuestionsFromItems as V } from "../../worksheet/worksheet/worksheet-helpers.js";
+import { PuzzleQuestionWrapper as P, PuzzleContainer as R } from "./puzzle-app-styled.js";
+const F = (u) => {
+  if (!u) return null;
+  const t = u.match(/<img[^>]+src="([^">]+)"/);
+  return t ? t[1] : null;
+}, L = ({
+  worksheetData: u,
+  loggerRef: t,
+  onWorksheetErrored: n,
+  imageHue: I,
+  onLoaded: p
+}) => {
+  const { signed_request: g, questions_signed_request: w } = u, z = S(null), {
+    loadingState: i,
+    data: o,
+    error: f
+  } = Q({
+    attemptId: void 0,
+    signedRequest: g,
+    loggerRef: t
+  }), E = _(
+    (s) => {
+      n({
+        code: s.code,
+        message: s.detail
+      });
+    },
+    [n]
+  ), { learnosity: r } = N(w, E, t);
+  l(() => {
+    i === "error" && n({
+      message: f ?? "Error loading worksheet"
+    });
+  }, [i, n, f]), l(() => {
+    r && t.current(d.WORKSHEET_V3_LEARNOSITY_INITIALIZED);
+  }, [r, t]), l(() => {
+    r && i === "success" && p && (t.current(d.WORKSHEET_V3_READY), p());
+  }, [r, i, t, p]);
+  const m = $(() => i === "success" && (o != null && o.learnosityItems) ? (t.current(d.WORKSHEET_V3_READY), V(o.learnosityItems, {
+    sectioned: !1,
+    adaptive: !1
+  }).map((e) => ({
+    response_id: e.response_id,
+    type: e.type,
+    stimulus: e.stimulus,
+    template: e.template,
+    stimulus_review: e.stimulus_review,
+    options: e.options,
+    metadata: e.metadata,
+    validation: e.validation
+    // Add other properties as needed
+  }))) : [], [i, o, t]);
+  l(() => {
+    if (r && m.length > 0) {
+      const c = requestAnimationFrame(() => {
+        try {
+          r.renderMath("mathjax");
+        } catch (e) {
+          n({
+            message: `MathJax rendering failed: ${e instanceof Error ? e.message : "Unknown error"}`
+          });
+        }
+      });
+      return () => {
+        cancelAnimationFrame(c);
+      };
+    }
+  }, [r, n, m]);
+  const T = _((s) => {
+    const { stimulus: c = "", template: e = "", response_id: v } = s, h = F(c);
+    return /* @__PURE__ */ y(
+      M,
+      {
+        $background: "TRANSPARENT",
+        $alignItems: "center",
+        className: "puzzle-app-view-question-card",
+        children: [
+          h && /* @__PURE__ */ a(
+            H,
+            {
+              src: h,
+              alt: "Puzzle illustration",
+              width: 183,
+              height: 183,
+              withLoader: !0
+            }
+          ),
+          /* @__PURE__ */ a(x, { heightX: 1 }),
+          e && /* @__PURE__ */ a(P, { children: /* @__PURE__ */ a("div", { dangerouslySetInnerHTML: { __html: e } }) })
+        ]
+      },
+      v
+    );
+  }, []);
+  return m.length ? /* @__PURE__ */ a(
+    R,
+    {
+      ref: z,
+      $gapX: 1,
+      $gutterX: 1,
+      $imageHue: I,
+      $background: "WHITE_1",
+      className: "puzzle-app-view-container",
+      children: m.map((s) => /* @__PURE__ */ a("div", { children: T(s) }, `question-${s.response_id}`))
+    }
+  ) : null;
+}, U = A(L);
+export {
+  U as default
+};
+//# sourceMappingURL=puzzle-app-view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"puzzle-app-view.js","sources":["../../../../src/features/puzzles/app/puzzle-app-view.tsx"],"sourcesContent":["import type {\n  ILearnosityError,\n  ILearnosityQuestion,\n} from '../../worksheet/worksheet/worksheet-types';\nimport type { IPuzzleAppViewProps } from './puzzle-app-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport Image from '../../ui/image/image';\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport EVENTS from '../../worksheet/constants/events';\nimport useLearnosity from '../../worksheet/worksheet/hooks/use-learnosity';\nimport useWorksheetDataHelper from '../../worksheet/worksheet/hooks/use-worksheet-data-helper';\nimport { getQuestionsFromItems } from '../../worksheet/worksheet/worksheet-helpers';\nimport * as Styled from './puzzle-app-styled';\n\nconst extractImageFromHTML = (htmlString: string) => {\n  if (!htmlString) return null;\n\n  const imgMatch = htmlString.match(/<img[^>]+src=\"([^\">]+)\"/);\n\n  return imgMatch ? imgMatch[1] : null;\n};\n\nconst PuzzleAppView: FC<IPuzzleAppViewProps> = ({\n  worksheetData,\n  loggerRef,\n  onWorksheetErrored,\n  imageHue,\n  onLoaded,\n}) => {\n  const { signed_request: itemsSignedRequest, questions_signed_request: questionSignedRequest } =\n    worksheetData;\n\n  // Ref for the container to trigger MathJax rendering\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Get Learnosity items using the signed_request (not questions_signed_request)\n  const {\n    loadingState,\n    data: learnosityData,\n    error: worksheetError,\n  } = useWorksheetDataHelper({\n    attemptId: undefined,\n    signedRequest: itemsSignedRequest,\n    loggerRef,\n  });\n\n  const onLearnosityErrored = useCallback(\n    (err: ILearnosityError) => {\n      onWorksheetErrored({\n        code: err.code,\n        message: err.detail,\n      });\n    },\n    [onWorksheetErrored],\n  );\n\n  // Initialize Learnosity using questions_signed_request (needed for interactive questions)\n  const { learnosity } = useLearnosity(questionSignedRequest, onLearnosityErrored, loggerRef);\n\n  useEffect(() => {\n    if (loadingState === 'error') {\n      onWorksheetErrored({\n        message: worksheetError ?? 'Error loading worksheet',\n      });\n    }\n  }, [loadingState, onWorksheetErrored, worksheetError]);\n\n  // Log when learnosity is ready for future interactive features\n  useEffect(() => {\n    if (learnosity) {\n      loggerRef.current(EVENTS.WORKSHEET_V3_LEARNOSITY_INITIALIZED);\n    }\n  }, [learnosity, loggerRef]);\n\n  useEffect(() => {\n    if (learnosity && loadingState === 'success' && onLoaded) {\n      loggerRef.current(EVENTS.WORKSHEET_V3_READY);\n      onLoaded();\n    }\n  }, [learnosity, loadingState, loggerRef, onLoaded]);\n\n  // Memoize questions processing to prevent re-render loops\n  const questions = useMemo(() => {\n    // Extract questions from Learnosity items when data is loaded successfully\n    if (loadingState === 'success' && learnosityData?.learnosityItems) {\n      loggerRef.current(EVENTS.WORKSHEET_V3_READY);\n\n      // Convert learnosityItems to questions using the worksheet helper\n      const worksheetQuestions = getQuestionsFromItems(learnosityData.learnosityItems, {\n        sectioned: false,\n        adaptive: false,\n      });\n\n      // Extract just the Learnosity questions from worksheet questions\n      const learnosityQuestions: ILearnosityQuestion[] = worksheetQuestions.map(q => ({\n        response_id: q.response_id,\n        type: q.type,\n        stimulus: q.stimulus,\n        template: q.template,\n        stimulus_review: q.stimulus_review,\n        options: q.options,\n        metadata: q.metadata,\n        validation: q.validation,\n        // Add other properties as needed\n      }));\n\n      return learnosityQuestions;\n    }\n\n    return [];\n  }, [loadingState, learnosityData, loggerRef]);\n\n  // Force MathJax rendering after questions are loaded and rendered\n  // Similar to how useLearnosityAppend does it\n  useEffect(() => {\n    if (learnosity && questions.length > 0) {\n      // Use requestAnimationFrame to ensure DOM is updated before rendering math\n      const renderMath = () => {\n        try {\n          learnosity.renderMath('mathjax');\n        } catch (error) {\n          onWorksheetErrored({\n            message: `MathJax rendering failed: ${\n              error instanceof Error ? error.message : 'Unknown error'\n            }`,\n          });\n        }\n      };\n\n      const animationId = requestAnimationFrame(renderMath);\n\n      return () => {\n        cancelAnimationFrame(animationId);\n      };\n    }\n  }, [learnosity, onWorksheetErrored, questions]);\n\n  const renderQuestionContent = useCallback((question: ILearnosityQuestion) => {\n    const { stimulus = '', template = '', response_id: responseId } = question;\n    const imageUrl = extractImageFromHTML(stimulus);\n\n    return (\n      <FlexView\n        $background=\"TRANSPARENT\"\n        key={responseId}\n        $alignItems=\"center\"\n        className=\"puzzle-app-view-question-card\"\n      >\n        {/* Main Image or Interactive Content */}\n        {imageUrl && (\n          <Image\n            src={imageUrl}\n            alt=\"Puzzle illustration\"\n            width={183}\n            height={183}\n            withLoader={true}\n          />\n        )}\n\n        <Separator heightX={1} />\n\n        {/* Question HTML Content */}\n        {template && (\n          <Styled.PuzzleQuestionWrapper>\n            <div dangerouslySetInnerHTML={{ __html: template }} />\n          </Styled.PuzzleQuestionWrapper>\n        )}\n      </FlexView>\n    );\n  }, []);\n\n  if (!questions.length) return null;\n\n  return (\n    <Styled.PuzzleContainer\n      ref={containerRef}\n      $gapX={1}\n      $gutterX={1}\n      $imageHue={imageHue}\n      $background=\"WHITE_1\"\n      className=\"puzzle-app-view-container\"\n    >\n      {questions.map(question => (\n        <div key={`question-${question.response_id}`}>{renderQuestionContent(question)}</div>\n      ))}\n    </Styled.PuzzleContainer>\n  );\n};\n\nexport default memo(PuzzleAppView);\n"],"names":["extractImageFromHTML","htmlString","imgMatch","PuzzleAppView","worksheetData","loggerRef","onWorksheetErrored","imageHue","onLoaded","itemsSignedRequest","questionSignedRequest","containerRef","useRef","loadingState","learnosityData","worksheetError","useWorksheetDataHelper","onLearnosityErrored","useCallback","err","learnosity","useLearnosity","useEffect","EVENTS","questions","useMemo","getQuestionsFromItems","q","animationId","error","renderQuestionContent","question","stimulus","template","responseId","imageUrl","jsxs","FlexView","jsx","Image","Separator","Styled.PuzzleQuestionWrapper","Styled.PuzzleContainer","PuzzleAppView$1","memo"],"mappings":"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"}

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

@@ -0,0 +1,62 @@
+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: [s]
+    });
+  }, [a, s]);
+  R(() => {
+    t();
+  }, [t]);
+  const b = n((E) => {
+    g(E.message);
+  }, []), x = n(() => {
+    $(!0);
+  }, []);
+  return u || w ? /* @__PURE__ */ e(y, { height: "100vh", onTryAgain: t }) : k ? /* @__PURE__ */ e(F, { height: "100vh" }) : /* @__PURE__ */ o(
+    L,
+    {
+      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 })
+        ] }) })
+      ]
+    }
+  );
+}, B = v(S);
+export {
+  B as default
+};
+//# sourceMappingURL=puzzle-app.js.map

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

@@ -0,0 +1 @@
+{"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;"}