@cuemath/leap 3.2.1-pd-1 → 3.2.1-ppa-0.1

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

@@ -0,0 +1,115 @@
+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%;
+  max-height: 412px;
+  height: 100%;
+  aspect-ratio: 343 / 412;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: ${({ $imageHue: t }) => `url(${p(t)})`};
+    background-size: cover;
+    opacity: 0.3;
+  }
+`, 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};
+  }
+`, h = o(r)`
+  & span {
+    font-weight: 700;
+    margin-right: 4px;
+  }
+`, y = 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,
+  y as PuzzleQuestionWrapper,
+  x as QuestionCard,
+  h 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  max-height: 412px;\n  height: 100%;\n  aspect-ratio: 343 / 412;\n  overflow: hidden;\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.3;\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;AAAA;AAAA;AAAA,wBAetE,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,116 @@
+import { jsxs as S, jsx as i } from "react/jsx-runtime";
+import { memo as T, useRef as A, useCallback as _, useEffect as p, useMemo as H } from "react";
+import Q from "../../ui/image/image.js";
+import $ from "../../ui/separator/separator.js";
+import h from "../../worksheet/constants/events.js";
+import M from "../../worksheet/worksheet/hooks/use-learnosity.js";
+import V from "../../worksheet/worksheet/hooks/use-worksheet-data-helper.js";
+import { getQuestionsFromItems as x } from "../../worksheet/worksheet/worksheet-helpers.js";
+import { QuestionCard as C, PuzzleQuestionWrapper as L, PuzzleContainer as N } from "./puzzle-app-styled.js";
+const P = (a) => {
+  if (!a) return null;
+  const t = a.match(/<img[^>]+src="([^">]+)"/);
+  return t ? t[1] : null;
+}, j = ({
+  worksheetData: a,
+  loggerRef: t,
+  onWorksheetErrored: u,
+  imageHue: I,
+  onLoaded: d
+}) => {
+  const { signed_request: z, questions_signed_request: E } = a, w = A(null), {
+    loadingState: r,
+    data: o,
+    error: m
+  } = V({
+    attemptId: void 0,
+    signedRequest: z,
+    loggerRef: t
+  }), y = _(
+    (s) => {
+      u({
+        code: s.code,
+        message: s.detail
+      });
+    },
+    [u]
+  ), { learnosity: n } = M(E, y, t);
+  p(() => {
+    r === "error" && u({
+      message: m ?? "Error loading worksheet"
+    });
+  }, [r, u, m]), p(() => {
+    n && t.current(h.WORKSHEET_V3_LEARNOSITY_INITIALIZED);
+  }, [n, t]), p(() => {
+    n && r === "success" && d && (t.current(h.WORKSHEET_V3_READY), d());
+  }, [n, r, t, d]);
+  const c = H(() => r === "success" && (o != null && o.learnosityItems) ? (t.current(h.WORKSHEET_V3_READY), x(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 {
+        }
+      });
+      return () => {
+        cancelAnimationFrame(l);
+      };
+    }
+  }, [n, c]);
+  const g = _((s) => {
+    const { stimulus: l = "", template: e = "", response_id: v } = s, f = P(l);
+    return /* @__PURE__ */ S(
+      C,
+      {
+        $alignItems: "center",
+        className: "puzzle-app-view-question-card",
+        children: [
+          f && /* @__PURE__ */ i(
+            Q,
+            {
+              src: f,
+              alt: "Puzzle illustration",
+              width: 183,
+              height: 183,
+              withLoader: !0
+            }
+          ),
+          /* @__PURE__ */ i($, { heightX: 1 }),
+          e && /* @__PURE__ */ i(L, { children: /* @__PURE__ */ i("div", { dangerouslySetInnerHTML: { __html: e } }) })
+        ]
+      },
+      v
+    );
+  }, []);
+  return c.length ? /* @__PURE__ */ i(
+    N,
+    {
+      ref: w,
+      $gapX: 1,
+      $gutterX: 1,
+      $imageHue: I,
+      $background: "WHITE_1",
+      className: "puzzle-app-view-container",
+      $justifyContent: "center",
+      children: c.map((s) => /* @__PURE__ */ i("div", { children: g(s) }, `question-${s.response_id}`))
+    }
+  ) : null;
+}, Y = T(j);
+export {
+  Y 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          // Fallback - MathJax rendering will happen automatically via global config\n          // or when the content is processed by the browser\n        }\n      };\n\n      const animationId = requestAnimationFrame(renderMath);\n\n      return () => {\n        cancelAnimationFrame(animationId);\n      };\n    }\n  }, [learnosity, 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","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/features/puzzles/comps/puzzle-card-styled.js

@@ -1,34 +1,79 @@
-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)`
+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)`
   position: relative;
-  cursor: pointer;
 
-  box-shadow: inset 0px 0px 0px 4px ${({ theme: o, $imageHue: t }) => o.colors[`${t}_4`]};
+  box-shadow: inset 0px 0px 0px 4px ${({ theme: t, $imageHue: i }) => t.colors[`${i}_4`]};
 
-  background-image: ${({ $imageHue: o }) => `url(${p(o)})`};
+  background-image: ${({ $imageHue: t }) => `url(${l(t)})`};
   background-size: cover;
 
-  &:hover {
-    outline: 1px solid ${({ theme: o }) => o.colors.BLACK_1};
+  ${({ $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 "";
   }
-`, x = e(i)`
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: break-spaces;
-`, b = e(r)`
-  position: absolute;
-  top: -10px;
-  right: -10px;
+}}
 `;
 export {
-  n as PuzzleWrapper,
-  b as StickerWrapper,
-  x as Title
+  d as PuzzleWrapper
 };
 //# 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 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: 2;\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: -10px;\n  right: -10px;\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;"}
+{"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;"}

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

@@ -1,58 +1,35 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { memo as f, useCallback as $ } from "react";
-import g from "../../ui/image/image.js";
-import z from "../../ui/layout/flex-view.js";
-import u from "../../ui/lottie-animation/lottie-animation.js";
-import { getPuzzleStickerLottie as d } from "../utils/puzzle-feedback-celebration.js";
-import { PuzzleWrapper as x, Title as L, StickerWrapper as S } from "./puzzle-card-styled.js";
-const j = {
-  autoplay: !1,
-  loop: !1,
-  renderer: "canvas"
-}, W = f(
+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(
   ({
-    imageHue: o,
-    imageUrl: m,
-    title: h,
-    height: s = "100%",
-    width: a = "100%",
-    onCardClick: t,
-    userNodeId: i,
-    rewards: r
-  }) => {
-    const { sticker: n } = (r == null ? void 0 : r[0]) || {}, l = n ? d(n) : void 0, p = $(() => {
-      i && (t == null || t(i));
-    }, [t, i]);
-    return /* @__PURE__ */ c(
-      x,
-      {
-        $width: a,
-        $height: s,
-        $justifyContent: "center",
-        $alignItems: "center",
-        $imageHue: o,
-        $background: `${o}_2`,
-        onClick: p,
-        children: [
-          /* @__PURE__ */ c(z, { $justifyContent: "center", $alignItems: "center", $flexGap: 12, children: [
-            /* @__PURE__ */ e(g, { src: m ?? "", width: 68, height: 68, withLoader: !1, alt: "Puzzle" }),
-            /* @__PURE__ */ e(L, { $renderAs: "ab3", $align: "center", $width: "80%", children: h })
-          ] }),
-          l && /* @__PURE__ */ e(S, { $widthX: 2.5, $heightX: 2.5, children: /* @__PURE__ */ e(
-            u,
-            {
-              width: 40,
-              height: 40,
-              src: l,
-              settings: j
-            }
-          ) })
-        ]
-      }
-    );
-  }
+    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
+    }
+  )
 );
 export {
-  W as default
+  c 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, useCallback } from 'react';\n\nimport Image from '../../ui/image/image';\nimport FlexView from '../../ui/layout/flex-view';\nimport LottieAnimation from '../../ui/lottie-animation/lottie-animation';\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  }) => {\n    const { sticker } = rewards?.[0] || {};\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      <Styled.PuzzleWrapper\n        $width={width}\n        $height={height}\n        $justifyContent=\"center\"\n        $alignItems=\"center\"\n        $imageHue={imageHue}\n        $background={`${imageHue}_2`}\n        onClick={handleCardClick}\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\n              width={40}\n              height={40}\n              src={puzzleStickerLottie}\n              settings={puzzleStickerLottieSettings}\n            />\n          </Styled.StickerWrapper>\n        )}\n      </Styled.PuzzleWrapper>\n    );\n  },\n);\n\nexport default PuzzleCard;\n"],"names":["puzzleStickerLottieSettings","PuzzleCard","memo","imageHue","imageUrl","title","height","width","onCardClick","userNodeId","rewards","sticker","puzzleStickerLottie","getPuzzleStickerLottie","handleCardClick","useCallback","jsxs","Styled.PuzzleWrapper","FlexView","jsx","Image","Styled.Title","Styled.StickerWrapper","LottieAnimation"],"mappings":";;;;;;;AAWA,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,EAAA,MACI;AACJ,UAAM,EAAE,SAAAC,EAAQ,KAAID,KAAA,gBAAAA,EAAU,OAAM,CAAA,GAE9BE,IAAsBD,IAAUE,EAAuBF,CAAO,IAAI,QAElEG,IAAkBC,EAAY,MAAM;AACxC,MAAIN,MACFD,KAAA,QAAAA,EAAcC;AAAA,IAChB,GACC,CAACD,GAAaC,CAAU,CAAC;AAG1B,WAAA,gBAAAO;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,QAAQV;AAAA,QACR,SAASD;AAAA,QACT,iBAAgB;AAAA,QAChB,aAAY;AAAA,QACZ,WAAWH;AAAA,QACX,aAAa,GAAGA,CAAQ;AAAA,QACxB,SAASW;AAAA,QAET,UAAA;AAAA,UAAA,gBAAAE,EAACE,KAAS,iBAAgB,UAAS,aAAY,UAAS,UAAU,IAChE,UAAA;AAAA,YAAC,gBAAAC,EAAAC,GAAA,EAAM,KAAKhB,KAAY,IAAI,OAAO,IAAI,QAAQ,IAAI,YAAY,IAAO,KAAI,SAAS,CAAA;AAAA,YAEnF,gBAAAe,EAACE,GAAA,EAAa,WAAU,OAAM,QAAO,UAAS,QAAO,OAClD,UACHhB,EAAA,CAAA;AAAA,UAAA,GACF;AAAA,UAECO,uBACEU,GAAA,EAAsB,SAAS,KAAK,UAAU,KAC7C,UAAA,gBAAAH;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,KAAKX;AAAA,cACL,UAAUZ;AAAA,YAAA;AAAA,UAAA,GAEd;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}
+{"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;"}