@cuemath/leap 3.2.6 → 3.2.7-ppa-0.2

package/dist/assets/line-icons/icons/hint-fill.js

@@ -0,0 +1,35 @@
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
+const t = (L) => /* @__PURE__ */ i(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    ...L,
+    children: [
+      /* @__PURE__ */ l(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M12.5 3.69923V2.70001H11.5V3.70001L12.5 3.69923ZM20 10.2015H19V11.2015H20V10.2015ZM17.9424 7.0043L18.8084 6.5043L19.3084 7.37033L18.4424 7.87033L17.9424 7.0043ZM15.8043 3.66699L15.3043 4.53302L16.1703 5.03302L16.6703 4.16699L15.8043 3.66699ZM5 11.2015H4V10.2015H5V11.2015ZM9.11621 4.59494L8.61621 3.72891L7.75019 4.22891L8.25019 5.09494L9.11621 4.59494ZM5.60211 6.35647L6.46813 6.85647L5.96813 7.7225L5.10211 7.2225L5.60211 6.35647ZM7.6 10.8499C7.6 8.41986 9.56995 6.44991 12 6.44991C14.4301 6.44991 16.4 8.41986 16.4 10.8499C16.4 12.422 15.5758 13.8022 14.3334 14.581H9.66658C8.42416 13.8022 7.6 12.422 7.6 10.8499ZM12 5.24991C8.90721 5.24991 6.4 7.75712 6.4 10.8499C6.4 12.9235 7.52729 14.733 9.19957 15.7004L9.33896 15.781H14.661L14.8004 15.7004C16.4727 14.733 17.6 12.9235 17.6 10.8499C17.6 7.75712 15.0928 5.24991 12 5.24991ZM9.5 16.6112V17.8112H14.5V16.6112H9.5ZM10.5 19.7526V18.5526H13.5V19.7526H10.5Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ l(
+        "path",
+        {
+          className: "hint-fill-icon-path",
+          d: "M12 6.44991C9.56995 6.44991 7.6 8.41986 7.6 10.8499C7.6 12.422 8.42416 13.8022 9.66658 14.581H14.3334C15.5758 13.8022 16.4 12.422 16.4 10.8499C16.4 8.41986 14.4301 6.44991 12 6.44991Z",
+          fill: "#FFB700"
+        }
+      )
+    ]
+  }
+), o = t;
+export {
+  o as default
+};
+//# sourceMappingURL=hint-fill.js.map

package/dist/assets/line-icons/icons/hint-fill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hint-fill.js","sources":["../../../../src/assets/line-icons/icons/hint-fill.tsx"],"sourcesContent":["const HintFillIcon: React.FC<React.SVGProps<SVGSVGElement>> = props => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    {...props}\n  >\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M12.5 3.69923V2.70001H11.5V3.70001L12.5 3.69923ZM20 10.2015H19V11.2015H20V10.2015ZM17.9424 7.0043L18.8084 6.5043L19.3084 7.37033L18.4424 7.87033L17.9424 7.0043ZM15.8043 3.66699L15.3043 4.53302L16.1703 5.03302L16.6703 4.16699L15.8043 3.66699ZM5 11.2015H4V10.2015H5V11.2015ZM9.11621 4.59494L8.61621 3.72891L7.75019 4.22891L8.25019 5.09494L9.11621 4.59494ZM5.60211 6.35647L6.46813 6.85647L5.96813 7.7225L5.10211 7.2225L5.60211 6.35647ZM7.6 10.8499C7.6 8.41986 9.56995 6.44991 12 6.44991C14.4301 6.44991 16.4 8.41986 16.4 10.8499C16.4 12.422 15.5758 13.8022 14.3334 14.581H9.66658C8.42416 13.8022 7.6 12.422 7.6 10.8499ZM12 5.24991C8.90721 5.24991 6.4 7.75712 6.4 10.8499C6.4 12.9235 7.52729 14.733 9.19957 15.7004L9.33896 15.781H14.661L14.8004 15.7004C16.4727 14.733 17.6 12.9235 17.6 10.8499C17.6 7.75712 15.0928 5.24991 12 5.24991ZM9.5 16.6112V17.8112H14.5V16.6112H9.5ZM10.5 19.7526V18.5526H13.5V19.7526H10.5Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      className=\"hint-fill-icon-path\"\n      d=\"M12 6.44991C9.56995 6.44991 7.6 8.41986 7.6 10.8499C7.6 12.422 8.42416 13.8022 9.66658 14.581H14.3334C15.5758 13.8022 16.4 12.422 16.4 10.8499C16.4 8.41986 14.4301 6.44991 12 6.44991Z\"\n      fill=\"#FFB700\"\n    />\n  </svg>\n);\n\nexport default HintFillIcon;\n"],"names":["HintFillIcon","props","jsxs","jsx","HintFillIcon$1"],"mappings":";AAAA,MAAMA,IAAwD,CAC5DC,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,UAAS;AAAA,UACT,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MACP;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAAA,EAAA;AACF,GAGFC,IAAeJ;"}

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

@@ -0,0 +1,112 @@
+import o from "styled-components";
+import n from "../../../assets/line-icons/icons/hint-fill.js";
+import e 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(e)(({ theme: t, $visible: i }) => {
+  const { gutter: l } = t.layout;
+  return i ? `
+    padding-top: ${l * 1.5}px;
+    padding-bottom: ${l * 2}px;
+  ` : "";
+}), g = o(e)`
+  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: 412px;
+
+  &::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(e)`
+  background-color: transparent;
+
+  .puzzle-question-content {
+    font-size: 16px;
+    line-height: 1.6em;
+    color: ${({ theme: t }) => t.colors.BLACK};
+    font-family: 'Noto Serif', serif;
+
+    em {
+      font-style: italic;
+    }
+
+    ul,
+    ol {
+      list-style-type: initial;
+      padding-left: 32px;
+    }
+
+    ol {
+      list-style-type: decimal;
+    }
+
+    p {
+      margin: 12px 0;
+    }
+
+    li {
+      margin: 4px 0;
+    }
+  }
+`, u = o(n)`
+  color: ${({ theme: t }) => t.colors.BLACK_1};
+
+  & .hint-fill-icon-path {
+    fill: ${({ theme: t }) => t.colors.WHITE_1};
+  }
+`, y = 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,
+  x as QuestionCard,
+  y as StyledFeedbackText,
+  u 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    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: 412px;\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 QuestionCard = styled(FlexView)`\n  background-color: transparent;\n\n  .puzzle-question-content {\n    font-size: 16px;\n    line-height: 1.6em;\n    color: ${({ theme }) => theme.colors.BLACK};\n    font-family: 'Noto Serif', serif;\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: 12px 0;\n    }\n\n    li {\n      margin: 4px 0;\n    }\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  QuestionCard,\n  StyledFeedbackText,\n  StyledHintFillIcon,\n  PuzzleQuestionWrapper,\n};\n"],"names":["PuzzleAppWrapper","styled","FlexView","theme","$visible","gutter","PuzzleContainer","$imageHue","getPuzzleCardPattern","QuestionCard","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,mBACUC,IAAS,GAAG;AAAA,sBACTA,IAAS,CAAC;AAAA,MALrB;AAOX,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,IAAeR,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMvB,CAAC,EAAE,OAAAC,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,GA2BxCO,IAAqBT,EAAOU,CAAY;AAAA,WACnC,CAAC,EAAE,OAAAR,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,YAGlC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAIzCS,IAAqBX,EAAOY,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA,GAOhCC,IAAwBb,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,119 @@
+import { jsxs as S, jsx as a } from "react/jsx-runtime";
+import { memo as T, useRef as $, useCallback as _, useEffect as p, useMemo as A } from "react";
+import H from "../../ui/image/image.js";
+import M from "../../ui/separator/separator.js";
+import f from "../../worksheet/constants/events.js";
+import Q from "../../worksheet/worksheet/hooks/use-learnosity.js";
+import x from "../../worksheet/worksheet/hooks/use-worksheet-data-helper.js";
+import { getQuestionsFromItems as V } from "../../worksheet/worksheet/worksheet-helpers.js";
+import { QuestionCard as C, PuzzleQuestionWrapper as L, PuzzleContainer as N } from "./puzzle-app-styled.js";
+const P = (u) => {
+  if (!u) return null;
+  const t = u.match(/<img[^>]+src="([^">]+)"/);
+  return t ? t[1] : null;
+}, j = ({
+  worksheetData: u,
+  loggerRef: t,
+  onWorksheetErrored: i,
+  imageHue: I,
+  onLoaded: d
+}) => {
+  const { signed_request: z, questions_signed_request: g } = u, w = $(null), {
+    loadingState: r,
+    data: o,
+    error: m
+  } = x({
+    attemptId: void 0,
+    signedRequest: z,
+    loggerRef: t
+  }), E = _(
+    (s) => {
+      i({
+        code: s.code,
+        message: s.detail
+      });
+    },
+    [i]
+  ), { learnosity: n } = Q(g, E, t);
+  p(() => {
+    r === "error" && i({
+      message: m ?? "Error loading worksheet"
+    });
+  }, [r, i, m]), p(() => {
+    n && t.current(f.WORKSHEET_V3_LEARNOSITY_INITIALIZED);
+  }, [n, t]), p(() => {
+    n && r === "success" && d && (t.current(f.WORKSHEET_V3_READY), d());
+  }, [n, r, t, d]);
+  const c = A(() => r === "success" && (o != null && o.learnosityItems) ? (t.current(f.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
+  }))) : r === "error" || m ? [] : [], [r, o, m, t]);
+  p(() => {
+    if (n && c.length > 0) {
+      const l = requestAnimationFrame(() => {
+        try {
+          n.renderMath("mathjax");
+        } catch (e) {
+          i({
+            message: `MathJax rendering failed: ${e instanceof Error ? e.message : "Unknown error"}`
+          });
+        }
+      });
+      return () => {
+        cancelAnimationFrame(l);
+      };
+    }
+  }, [n, i, c]);
+  const y = _((s) => {
+    const { stimulus: l = "", template: e = "", response_id: v } = s, h = P(l);
+    return /* @__PURE__ */ S(
+      C,
+      {
+        $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(M, { heightX: 1 }),
+          e && /* @__PURE__ */ a(L, { children: /* @__PURE__ */ a("div", { dangerouslySetInnerHTML: { __html: e } }) })
+        ]
+      },
+      v
+    );
+  }, []);
+  return c.length ? /* @__PURE__ */ a(
+    N,
+    {
+      ref: w,
+      $gapX: 1,
+      $gutterX: 1,
+      $imageHue: I,
+      $background: "WHITE_1",
+      className: "puzzle-app-view-container",
+      $justifyContent: "center",
+      children: c.map((s) => /* @__PURE__ */ a("div", { children: y(s) }, `question-${s.response_id}`))
+    }
+  ) : null;
+}, b = T(j);
+export {
+  b 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 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    if (loadingState === 'error' || worksheetError) {\n      return [];\n    }\n\n    return [];\n  }, [loadingState, learnosityData, worksheetError, 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      <Styled.QuestionCard\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      </Styled.QuestionCard>\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      $justifyContent=\"center\"\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","Styled.QuestionCard","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,63 @@
+import { jsx as e, jsxs as o, Fragment as W } from "react/jsx-runtime";
+import { memo as P, useState as d, useRef as v, useCallback as n, useEffect as y } from "react";
+import R from "../../ui/error/error.js";
+import h 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 j } from "./puzzle-app-styled.js";
+import C from "./puzzle-app-view.js";
+const D = ({ itemRef: s, title: m, imageHue: i, feedbackComments: l, tip: f }) => {
+  const [u, $] = d(), [r, g] = d(!1), { isProcessing: k, get: a, data: c, error: w } = I(), z = v(() => 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]);
+  y(() => {
+    t();
+  }, [t]);
+  const b = n((E) => {
+    $(E.message);
+  }, []), x = n(() => {
+    g(!0);
+  }, []);
+  return u || w ? /* @__PURE__ */ e(R, { height: "100vh", onTryAgain: t }) : k ? /* @__PURE__ */ e(F, { height: "100vh" }) : /* @__PURE__ */ o(
+    L,
+    {
+      className: "puzzle-app-container",
+      $background: `${i}_2`,
+      $alignItems: "center",
+      $justifyContent: "center",
+      $flexGapX: 1,
+      $gutterX: 1,
+      $height: "100%",
+      $visible: r,
+      children: [
+        r && /* @__PURE__ */ e(p, { $renderAs: "ab1-bold", children: m }),
+        c && /* @__PURE__ */ e(
+          C,
+          {
+            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(h, { $flexDirection: "row", $alignItems: "center", $flexGap: 8, children: [
+          /* @__PURE__ */ e(h, { $width: 24, $height: 24, children: /* @__PURE__ */ e(j, {}) }),
+          /* @__PURE__ */ e(p, { $renderAs: "ab2", children: A })
+        ] }) })
+      ]
+    }
+  );
+}, B = P(D);
+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      $justifyContent=\"center\"\n      $flexGapX={1}\n      $gutterX={1}\n      $height=\"100%\"\n      $visible={worksheetRendered}\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,iBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,UAAU;AAAA,MACV,SAAQ;AAAA,MACR,UAAUM;AAAA,MAET,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/index.d.ts

@@ -564,6 +564,8 @@ export declare const HelpIcon: React_2.FC<React_2.SVGProps<SVGSVGElement>>;
 
 export declare const HighlighterIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
+export declare const HintFillIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+
 export declare const HomeIcon: React_2.FC<React_2.SVGProps<SVGSVGElement>>;
 
 export declare const HomeworkCardList: React_2.NamedExoticComponent<HWCardListProps>;
@@ -2826,6 +2828,14 @@ declare interface IPuzzle extends IBaseProject {
     solved: boolean;
 }
 
+declare interface IPuzzleAppProps {
+    itemRef: string;
+    title: string;
+    imageHue: THueNames;
+    feedbackComments?: string;
+    tip?: string;
+}
+
 export declare interface IPuzzleCard {
     sheetData: TLPARSheetData;
     blockStatus?: TPuzzleCardBlockStatus | null;
@@ -2995,6 +3005,7 @@ export declare interface IReviewWorksheetModel {
     title?: string;
     worksheet_id?: string;
     node_type: TNodeTypes;
+    items?: TWorksheetItems[];
 }
 
 declare interface ISATSheetItemCallbacks {
@@ -4606,6 +4617,8 @@ declare const PUZZLE_CARD_STATE: {
 
 declare const PUZZLE_CARDS: "puzzle_cards";
 
+export declare const PuzzleApp: NamedExoticComponent<IPuzzleAppProps>;
+
 export declare const PuzzleCard: FC<IPuzzleCardContainerProps>;
 
 export declare const PuzzleFeedbackCelebration: FC;
@@ -5942,6 +5955,10 @@ export declare const Tutorial: ({ src, title, onCross, showProgress, onTutorialP
 
 export declare const TutoringIcon: React_2.FC<React_2.SVGProps<SVGSVGElement>>;
 
+declare type TWorksheetItems = {
+    ref: string;
+};
+
 declare type TWORKSHHET_QUESTION_MEDIA_TYPE = 'SIMULATION' | 'VIDEO' | 'AUDIO';
 
 export declare type TZIndexMap = Record<keyof typeof ZINDEX, number>;