@magmamath/students-features 1.4.1 → 1.4.2

package/dist/module/features/fluency/components/select-math-operator/ProgressBarSparkles.js

@@ -0,0 +1,110 @@
+"use strict";
+
+import React, { useEffect } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { cancelAnimation, Easing, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withSequence, withTiming } from 'react-native-reanimated';
+import { SparkleIcon } from "../../assets/SparkleIcon.js";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const QUICK = Easing.bezier(0.2, 0, 0, 1);
+const END_HOLD_MS = 800;
+const SPARKLE_CONFIGS = [{
+  leftPercent: 6.5,
+  topOffset: -3,
+  size: 14,
+  triggerDelay: 550,
+  appearDuration: 868,
+  dissolveDuration: 744
+}, {
+  leftPercent: 31.7,
+  topOffset: 7,
+  size: 14,
+  triggerDelay: 550,
+  appearDuration: 868,
+  dissolveDuration: 744
+}, {
+  leftPercent: 37.8,
+  topOffset: -5,
+  size: 14,
+  triggerDelay: 250,
+  appearDuration: 744,
+  dissolveDuration: 868
+}, {
+  leftPercent: 58.7,
+  topOffset: 5,
+  size: 20,
+  triggerDelay: 50,
+  appearDuration: 868,
+  dissolveDuration: 868
+}, {
+  leftPercent: 88.7,
+  topOffset: -5,
+  size: 14,
+  triggerDelay: 250,
+  appearDuration: 744,
+  dissolveDuration: 868
+}];
+const SparkleItem = ({
+  config,
+  color
+}) => {
+  const loop = useSharedValue(0);
+  useEffect(() => {
+    loop.value = withRepeat(withSequence(withDelay(config.triggerDelay, withTiming(1, {
+      duration: config.appearDuration,
+      easing: QUICK
+    })), withDelay(END_HOLD_MS, withTiming(2, {
+      duration: config.dissolveDuration,
+      easing: QUICK
+    })), withTiming(0, {
+      duration: 0
+    })), -1, false);
+    return () => cancelAnimation(loop);
+  }, []);
+  const animatedStyle = useAnimatedStyle(() => {
+    const v = loop.value;
+    if (v <= 1) {
+      return {
+        opacity: v,
+        transform: [{
+          scale: v
+        }, {
+          rotate: `${(-90 + v * 90).toFixed(1)}deg`
+        }]
+      };
+    }
+    return {
+      opacity: 2 - v,
+      transform: [{
+        scale: 1
+      }, {
+        rotate: '0deg'
+      }]
+    };
+  }, [loop]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [styles.sparkle, animatedStyle, {
+      left: `${config.leftPercent}%`,
+      top: config.topOffset,
+      width: config.size,
+      height: config.size
+    }],
+    children: /*#__PURE__*/_jsx(SparkleIcon, {
+      size: config.size,
+      color: color
+    })
+  });
+};
+export const ProgressBarSparkles = ({
+  color
+}) => /*#__PURE__*/_jsx(_Fragment, {
+  children: SPARKLE_CONFIGS.map((config, index) => /*#__PURE__*/_jsx(SparkleItem, {
+    config: config,
+    color: color
+  }, index))
+});
+const styles = StyleSheet.create({
+  sparkle: {
+    position: 'absolute'
+  }
+});
+//# sourceMappingURL=ProgressBarSparkles.js.map

package/dist/module/features/fluency/components/select-math-operator/ProgressBarSparkles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","StyleSheet","Animated","cancelAnimation","Easing","useAnimatedStyle","useSharedValue","withDelay","withRepeat","withSequence","withTiming","SparkleIcon","jsx","_jsx","Fragment","_Fragment","QUICK","bezier","END_HOLD_MS","SPARKLE_CONFIGS","leftPercent","topOffset","size","triggerDelay","appearDuration","dissolveDuration","SparkleItem","config","color","loop","value","duration","easing","animatedStyle","v","opacity","transform","scale","rotate","toFixed","View","style","styles","sparkle","left","top","width","height","children","ProgressBarSparkles","map","index","create","position"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/select-math-operator/ProgressBarSparkles.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/features/fluency/components/select-math-operator/SelectMathOperator.js

@@ -0,0 +1,67 @@
+"use strict";
+
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { BORDER_RADIUS, COLORS, HeadingVariants, SHADOWS, SPACING, Typography } from '@magmamath/react-native-ui';
+import { useUnit } from 'effector-react';
+import { FLUENCY_MODES } from "../../shared/fluency.constants.js";
+import { MathOperatorRow } from "./MathOperatorRow.js";
+import { useFluency } from "../../context/FluencyContext.js";
+import { useText } from "../../../../i18n/i18n.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SelectMathOperator = () => {
+  const t = useText();
+  const {
+    model,
+    onModeSelectPress
+  } = useFluency();
+  const fluencyMode = useUnit(model.matrix.$mode);
+  const matrix = useUnit(model.matrix.$data);
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: FLUENCY_MODES.map(({
+      mode,
+      label,
+      symbol,
+      select
+    }, index) => {
+      const isSelectedMode = mode === fluencyMode;
+      const progress = (matrix?.operations[mode].completionRate ?? 0) * 100;
+      return /*#__PURE__*/_jsx(MathOperatorRow, {
+        title: t(label),
+        icon: /*#__PURE__*/_jsx(Typography, {
+          variant: HeadingVariants.H6,
+          style: [styles.symbol, isSelectedMode && styles.symbolSelected],
+          children: symbol
+        }),
+        progress: progress,
+        color: select,
+        selected: isSelectedMode,
+        onSelect: () => {
+          model.matrix.setMode(mode);
+          onModeSelectPress?.(mode);
+        },
+        showDivider: index < FLUENCY_MODES.length - 1
+      }, mode);
+    })
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'flex-start',
+    width: 270,
+    padding: SPACING[400],
+    borderRadius: BORDER_RADIUS[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+    ...SHADOWS[1]
+  },
+  symbol: {
+    fontSize: 32,
+    fontWeight: '100',
+    color: COLORS.NEUTRAL_9
+  },
+  symbolSelected: {
+    color: COLORS.NEUTRAL_1
+  }
+});
+//# sourceMappingURL=SelectMathOperator.js.map

package/dist/module/features/fluency/components/select-math-operator/SelectMathOperator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","BORDER_RADIUS","COLORS","HeadingVariants","SHADOWS","SPACING","Typography","useUnit","FLUENCY_MODES","MathOperatorRow","useFluency","useText","jsx","_jsx","SelectMathOperator","t","model","onModeSelectPress","fluencyMode","matrix","$mode","$data","style","styles","container","children","map","mode","label","symbol","select","index","isSelectedMode","progress","operations","completionRate","title","icon","variant","H6","symbolSelected","color","selected","onSelect","setMode","showDivider","length","create","alignSelf","width","padding","borderRadius","backgroundColor","NEUTRAL_1","fontSize","fontWeight","NEUTRAL_9"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/select-math-operator/SelectMathOperator.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SACEC,aAAa,EACbC,MAAM,EACNC,eAAe,EACfC,OAAO,EACPC,OAAO,EACPC,UAAU,QACL,4BAA4B;AACnC,SAASC,OAAO,QAAQ,gBAAgB;AACxC,SAASC,aAAa,QAAQ,mCAAgC;AAC9D,SAASC,eAAe,QAAQ,sBAAmB;AACnD,SAASC,UAAU,QAAQ,iCAA8B;AACzD,SAASC,OAAO,QAAQ,0BAAuB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE/C,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACtC,MAAMC,CAAC,GAAGJ,OAAO,CAAC,CAAC;EACnB,MAAM;IAAEK,KAAK;IAAEC;EAAkB,CAAC,GAAGP,UAAU,CAAC,CAAC;EACjD,MAAMQ,WAAW,GAAGX,OAAO,CAACS,KAAK,CAACG,MAAM,CAACC,KAAK,CAAC;EAC/C,MAAMD,MAAM,GAAGZ,OAAO,CAACS,KAAK,CAACG,MAAM,CAACE,KAAK,CAAC;EAE1C,oBACER,IAAA,CAACb,IAAI;IAACsB,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,EAC3BjB,aAAa,CAACkB,GAAG,CAAC,CAAC;MAAEC,IAAI;MAAEC,KAAK;MAAEC,MAAM;MAAEC;IAAO,CAAC,EAAEC,KAAK,KAAK;MAC7D,MAAMC,cAAc,GAAGL,IAAI,KAAKT,WAAW;MAC3C,MAAMe,QAAQ,GAAG,CAACd,MAAM,EAAEe,UAAU,CAACP,IAAI,CAAC,CAACQ,cAAc,IAAI,CAAC,IAAI,GAAG;MAErE,oBACEtB,IAAA,CAACJ,eAAe;QAEd2B,KAAK,EAAErB,CAAC,CAACa,KAAK,CAAE;QAChBS,IAAI,eACFxB,IAAA,CAACP,UAAU;UACTgC,OAAO,EAAEnC,eAAe,CAACoC,EAAG;UAC5BjB,KAAK,EAAE,CAACC,MAAM,CAACM,MAAM,EAAEG,cAAc,IAAIT,MAAM,CAACiB,cAAc,CAAE;UAAAf,QAAA,EAE/DI;QAAM,CACG,CACb;QACDI,QAAQ,EAAEA,QAAS;QACnBQ,KAAK,EAAEX,MAAO;QACdY,QAAQ,EAAEV,cAAe;QACzBW,QAAQ,EAAEA,CAAA,KAAM;UACd3B,KAAK,CAACG,MAAM,CAACyB,OAAO,CAACjB,IAAI,CAAC;UAC1BV,iBAAiB,GAAGU,IAAI,CAAC;QAC3B,CAAE;QACFkB,WAAW,EAAEd,KAAK,GAAGvB,aAAa,CAACsC,MAAM,GAAG;MAAE,GAjBzCnB,IAkBN,CAAC;IAEN,CAAC;EAAC,CACE,CAAC;AAEX,CAAC;AAED,MAAMJ,MAAM,GAAGxB,UAAU,CAACgD,MAAM,CAAC;EAC/BvB,SAAS,EAAE;IACTwB,SAAS,EAAE,YAAY;IACvBC,KAAK,EAAE,GAAG;IACVC,OAAO,EAAE7C,OAAO,CAAC,GAAG,CAAC;IACrB8C,YAAY,EAAElD,aAAa,CAAC,GAAG,CAAC;IAChCmD,eAAe,EAAElD,MAAM,CAACmD,SAAS;IACjC,GAAGjD,OAAO,CAAC,CAAC;EACd,CAAC;EACDyB,MAAM,EAAE;IACNyB,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,KAAK;IACjBd,KAAK,EAAEvC,MAAM,CAACsD;EAChB,CAAC;EACDhB,cAAc,EAAE;IACdC,KAAK,EAAEvC,MAAM,CAACmD;EAChB;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency/components/session-results/FluencySessionResults.js

@@ -0,0 +1,199 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { Modal, View, StyleSheet, Text } from 'react-native';
+import { BORDER_RADIUS, Button, ButtonColor, ButtonSize, ButtonVariant, COLORS, CorrectIcon, FONT_FAMILY, SHADOWS, SPACING, TimerIcon, CrossIcon } from '@magmamath/react-native-ui';
+import { useUnit } from 'effector-react';
+import { useText } from "../../../../i18n/i18n.js";
+import { useFluency } from "../../context/FluencyContext.js";
+import { AttemptStatus } from "../../shared/fluency.constants.js";
+import { calculateMaxStreak, formatSessionDuration } from "../../shared/fluencySolving.helpers.js";
+import { SessionStatCard } from "./SessionStatCard.js";
+import { FlameIcon } from "../../assets/FlameIcon.js";
+import { SnurrisnurrBg } from "../../assets/SnurrisnurrBg.js";
+import { TrophyBg } from "../../assets/TrophyBg.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const FluencySessionResults = ({
+  onClosePress,
+  onEndModalPress
+}) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const t = useText();
+  const {
+    model
+  } = useFluency();
+  const {
+    outcomes,
+    completedDurationMs,
+    isSessionComplete,
+    config
+  } = useUnit({
+    outcomes: model.solving.$outcomes,
+    completedDurationMs: model.solving.$completedDurationMs,
+    isSessionComplete: model.solving.$isSessionComplete,
+    config: model.$config
+  });
+  if (!isSessionComplete) return null;
+  const correctCount = outcomes.filter(o => o.status === AttemptStatus.CORRECT).length;
+  const maxStreak = calculateMaxStreak(outcomes);
+  const durationDisplay = formatSessionDuration(completedDurationMs);
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: isOpen,
+    transparent: true,
+    animationType: "fade",
+    children: /*#__PURE__*/_jsx(View, {
+      style: styles.overlay,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.container,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.snurrisnurrLayer, {
+            pointerEvents: 'none'
+          }],
+          children: /*#__PURE__*/_jsx(SnurrisnurrBg, {})
+        }), /*#__PURE__*/_jsx(View, {
+          style: [styles.trophyLayer, {
+            pointerEvents: 'none'
+          }],
+          children: /*#__PURE__*/_jsx(TrophyBg, {})
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.close,
+          children: /*#__PURE__*/_jsx(Button, {
+            onPress: () => {
+              setIsOpen(false);
+              onClosePress?.();
+            },
+            icon: /*#__PURE__*/_jsx(CrossIcon, {
+              size: 20,
+              color: COLORS.NEUTRAL_7
+            }),
+            variant: ButtonVariant.TERTIARY
+          })
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.titleContainer,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.title,
+            children: t('student.fluency.resultTitle')
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.subtitle,
+            children: t('student.fluency.resultSubtitle', {
+              name: config?.name ?? ''
+            })
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.resultsContainer,
+          children: [/*#__PURE__*/_jsx(SessionStatCard, {
+            value: String(correctCount),
+            label: t('student.fluency.resultCorrectCardLabel'),
+            icon: /*#__PURE__*/_jsx(CorrectIcon, {
+              size: 30,
+              color: COLORS.NEUTRAL_1
+            }),
+            color: COLORS.PRIMARY_GREEN
+          }), /*#__PURE__*/_jsx(SessionStatCard, {
+            value: durationDisplay,
+            label: t('student.fluency.fast'),
+            icon: /*#__PURE__*/_jsx(View, {
+              style: styles.timerIconOffset,
+              children: /*#__PURE__*/_jsx(TimerIcon, {
+                size: 30,
+                color: COLORS.NEUTRAL_1
+              })
+            }),
+            color: COLORS.PRIMARY_PURPLE
+          }), /*#__PURE__*/_jsx(SessionStatCard, {
+            value: String(maxStreak),
+            label: t('student.fluency.resultStreakCardLabel'),
+            icon: /*#__PURE__*/_jsx(FlameIcon, {
+              size: 30,
+              color: COLORS.NEUTRAL_1
+            }),
+            color: COLORS.PRIMARY_ORANGE
+          })]
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.claimProgressButtonContainer,
+          children: /*#__PURE__*/_jsx(Button, {
+            onPress: () => {
+              setIsOpen(false);
+              onEndModalPress?.();
+            },
+            variant: ButtonVariant.PRIMARY,
+            size: ButtonSize.LARGE,
+            colorScheme: ButtonColor.YELLOW,
+            style: {
+              text: styles.buttonText
+            },
+            raiseLevel: 6,
+            children: t('student.fluency.claimProgress')
+          })
+        })]
+      })
+    })
+  });
+};
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  container: {
+    width: 700,
+    height: 440,
+    padding: SPACING[800],
+    gap: SPACING[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderRadius: BORDER_RADIUS[400],
+    overflow: 'hidden',
+    ...SHADOWS[5]
+  },
+  close: {
+    position: 'absolute',
+    top: SPACING[400],
+    right: SPACING[400]
+  },
+  titleContainer: {
+    gap: SPACING[200],
+    alignItems: 'center'
+  },
+  title: {
+    fontSize: 36,
+    fontWeight: '900',
+    fontFamily: FONT_FAMILY.buenosAires,
+    color: COLORS.NEUTRAL_9
+  },
+  subtitle: {
+    fontSize: 18,
+    fontWeight: '400',
+    fontFamily: FONT_FAMILY.buenosAires,
+    color: COLORS.NEUTRAL_7
+  },
+  resultsContainer: {
+    flexDirection: 'row',
+    height: 184,
+    gap: 10,
+    paddingTop: 32,
+    paddingBottom: 64
+  },
+  snurrisnurrLayer: {
+    position: 'absolute',
+    left: 0,
+    bottom: 0
+  },
+  trophyLayer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0
+  },
+  timerIconOffset: {
+    paddingBottom: 2,
+    paddingLeft: 2
+  },
+  claimProgressButtonContainer: {
+    alignItems: 'center'
+  },
+  buttonText: {
+    textTransform: 'uppercase'
+  }
+});
+//# sourceMappingURL=FluencySessionResults.js.map

package/dist/module/features/fluency/components/session-results/FluencySessionResults.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Modal","View","StyleSheet","Text","BORDER_RADIUS","Button","ButtonColor","ButtonSize","ButtonVariant","COLORS","CorrectIcon","FONT_FAMILY","SHADOWS","SPACING","TimerIcon","CrossIcon","useUnit","useText","useFluency","AttemptStatus","calculateMaxStreak","formatSessionDuration","SessionStatCard","FlameIcon","SnurrisnurrBg","TrophyBg","jsx","_jsx","jsxs","_jsxs","FluencySessionResults","onClosePress","onEndModalPress","isOpen","setIsOpen","t","model","outcomes","completedDurationMs","isSessionComplete","config","solving","$outcomes","$completedDurationMs","$isSessionComplete","$config","correctCount","filter","o","status","CORRECT","length","maxStreak","durationDisplay","visible","transparent","animationType","children","style","styles","overlay","container","snurrisnurrLayer","pointerEvents","trophyLayer","close","onPress","icon","size","color","NEUTRAL_7","variant","TERTIARY","titleContainer","title","subtitle","name","resultsContainer","value","String","label","NEUTRAL_1","PRIMARY_GREEN","timerIconOffset","PRIMARY_PURPLE","PRIMARY_ORANGE","claimProgressButtonContainer","PRIMARY","LARGE","colorScheme","YELLOW","text","buttonText","raiseLevel","create","flex","backgroundColor","alignItems","justifyContent","width","height","padding","gap","borderRadius","overflow","position","top","right","fontSize","fontWeight","fontFamily","buenosAires","NEUTRAL_9","flexDirection","paddingTop","paddingBottom","left","bottom","paddingLeft","textTransform"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/session-results/FluencySessionResults.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/features/fluency/components/session-results/SessionStatCard.js

@@ -0,0 +1,71 @@
+"use strict";
+
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { BORDER_RADIUS, COLORS, FONT_FAMILY, SHADOWS, SPACING } from '@magmamath/react-native-ui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SessionStatCard = ({
+  value,
+  label,
+  icon,
+  color
+}) => {
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.card, {
+      borderColor: color
+    }],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.iconCircle, {
+        backgroundColor: color
+      }],
+      children: icon
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.textContainer,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.value, {
+          color
+        }],
+        children: value
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.label,
+        children: label
+      })]
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  card: {
+    flex: 1,
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderWidth: 4,
+    borderRadius: BORDER_RADIUS[400],
+    padding: SPACING[400],
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[300]
+  },
+  textContainer: {
+    gap: SPACING[50]
+  },
+  iconCircle: {
+    width: 48,
+    height: 48,
+    borderRadius: 1000,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...SHADOWS[1]
+  },
+  value: {
+    fontSize: 32,
+    lineHeight: 34,
+    fontFamily: FONT_FAMILY.buenosAires,
+    fontWeight: '700'
+  },
+  label: {
+    fontSize: 16,
+    fontFamily: FONT_FAMILY.buenosAires,
+    fontWeight: '600',
+    color: COLORS.NEUTRAL_7
+  }
+});
+//# sourceMappingURL=SessionStatCard.js.map

package/dist/module/features/fluency/components/session-results/SessionStatCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","Text","View","BORDER_RADIUS","COLORS","FONT_FAMILY","SHADOWS","SPACING","jsx","_jsx","jsxs","_jsxs","SessionStatCard","value","label","icon","color","style","styles","card","borderColor","children","iconCircle","backgroundColor","textContainer","create","flex","NEUTRAL_1","borderWidth","borderRadius","padding","flexDirection","alignItems","gap","width","height","justifyContent","fontSize","lineHeight","fontFamily","buenosAires","fontWeight","NEUTRAL_7"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/session-results/SessionStatCard.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAA0B,OAAO;AAC7C,SAASC,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAwB,cAAc;AACrE,SAASC,aAAa,EAAEC,MAAM,EAAEC,WAAW,EAAEC,OAAO,EAAEC,OAAO,QAAQ,4BAA4B;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AASjG,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC,KAAK;EAAEC,KAAK;EAAEC,IAAI;EAAEC;AAA4B,CAAC,KAAK;EACtF,oBACEL,KAAA,CAACT,IAAI;IAACe,KAAK,EAAE,CAACC,MAAM,CAACC,IAAI,EAAE;MAAEC,WAAW,EAAEJ;IAAM,CAAC,CAAE;IAAAK,QAAA,gBACjDZ,IAAA,CAACP,IAAI;MAACe,KAAK,EAAE,CAACC,MAAM,CAACI,UAAU,EAAE;QAAEC,eAAe,EAAEP;MAAM,CAAC,CAAE;MAAAK,QAAA,EAAEN;IAAI,CAAO,CAAC,eAC3EJ,KAAA,CAACT,IAAI;MAACe,KAAK,EAAEC,MAAM,CAACM,aAAc;MAAAH,QAAA,gBAChCZ,IAAA,CAACR,IAAI;QAACgB,KAAK,EAAE,CAACC,MAAM,CAACL,KAAK,EAAE;UAAEG;QAAM,CAAC,CAAE;QAAAK,QAAA,EAAER;MAAK,CAAO,CAAC,eACtDJ,IAAA,CAACR,IAAI;QAACgB,KAAK,EAAEC,MAAM,CAACJ,KAAM;QAAAO,QAAA,EAAEP;MAAK,CAAO,CAAC;IAAA,CACrC,CAAC;EAAA,CACH,CAAC;AAEX,CAAC;AAED,MAAMI,MAAM,GAAGlB,UAAU,CAACyB,MAAM,CAAC;EAC/BN,IAAI,EAAE;IACJO,IAAI,EAAE,CAAC;IACPH,eAAe,EAAEnB,MAAM,CAACuB,SAAS;IACjCC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE1B,aAAa,CAAC,GAAG,CAAC;IAChC2B,OAAO,EAAEvB,OAAO,CAAC,GAAG,CAAC;IACrBwB,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,GAAG,EAAE1B,OAAO,CAAC,GAAG;EAClB,CAAC;EACDiB,aAAa,EAAE;IACbS,GAAG,EAAE1B,OAAO,CAAC,EAAE;EACjB,CAAC;EACDe,UAAU,EAAE;IACVY,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVN,YAAY,EAAE,IAAI;IAClBG,UAAU,EAAE,QAAQ;IACpBI,cAAc,EAAE,QAAQ;IACxB,GAAG9B,OAAO,CAAC,CAAC;EACd,CAAC;EACDO,KAAK,EAAE;IACLwB,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,EAAE;IACdC,UAAU,EAAElC,WAAW,CAACmC,WAAW;IACnCC,UAAU,EAAE;EACd,CAAC;EACD3B,KAAK,EAAE;IACLuB,QAAQ,EAAE,EAAE;IACZE,UAAU,EAAElC,WAAW,CAACmC,WAAW;IACnCC,UAAU,EAAE,KAAK;IACjBzB,KAAK,EAAEZ,MAAM,CAACsC;EAChB;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency/components/session-results/SkillProgressionRow.js

@@ -0,0 +1,107 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { BORDER_RADIUS, COLORS, FONT_FAMILY, SPACING, Typography } from '@magmamath/react-native-ui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BAR_WIDTH = 80;
+export const SkillProgressionRow = ({
+  symbol,
+  symbolColor,
+  symbolBackground,
+  operationName,
+  levelLabel,
+  levelColor,
+  progressRate,
+  progressColor,
+  isActive
+}) => {
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.row, isActive && {
+      borderWidth: 1.5,
+      borderColor: progressColor,
+      backgroundColor: symbolBackground
+    }],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.symbolCircle, {
+        backgroundColor: symbolBackground
+      }],
+      children: /*#__PURE__*/_jsx(Typography, {
+        style: [styles.symbol, {
+          color: symbolColor
+        }],
+        children: symbol
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.col,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        style: styles.name,
+        children: operationName
+      }), /*#__PURE__*/_jsx(Typography, {
+        style: [styles.level, {
+          color: levelColor
+        }],
+        children: levelLabel
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.barTrack,
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.barFill, {
+          width: BAR_WIDTH * progressRate,
+          backgroundColor: progressColor
+        }]
+      })
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[300],
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    backgroundColor: COLORS.NEUTRAL_2,
+    borderRadius: 14
+  },
+  symbolCircle: {
+    width: 36,
+    height: 36,
+    borderRadius: BORDER_RADIUS[250],
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0
+  },
+  symbol: {
+    fontSize: 18,
+    fontWeight: '900',
+    fontFamily: FONT_FAMILY.buenosAires
+  },
+  col: {
+    flex: 1,
+    gap: 2
+  },
+  name: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: COLORS.NEUTRAL_10,
+    textAlign: 'center'
+  },
+  level: {
+    fontSize: 12,
+    fontWeight: '600',
+    textAlign: 'center'
+  },
+  barTrack: {
+    width: BAR_WIDTH,
+    height: 6,
+    backgroundColor: COLORS.NEUTRAL_4,
+    borderRadius: BORDER_RADIUS[100],
+    overflow: 'hidden'
+  },
+  barFill: {
+    height: 6,
+    borderRadius: BORDER_RADIUS[100]
+  }
+});
+//# sourceMappingURL=SkillProgressionRow.js.map

package/dist/module/features/fluency/components/session-results/SkillProgressionRow.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","BORDER_RADIUS","COLORS","FONT_FAMILY","SPACING","Typography","jsx","_jsx","jsxs","_jsxs","BAR_WIDTH","SkillProgressionRow","symbol","symbolColor","symbolBackground","operationName","levelLabel","levelColor","progressRate","progressColor","isActive","style","styles","row","borderWidth","borderColor","backgroundColor","children","symbolCircle","color","col","name","level","barTrack","barFill","width","create","flexDirection","alignItems","gap","paddingVertical","paddingHorizontal","NEUTRAL_2","borderRadius","height","justifyContent","flexShrink","fontSize","fontWeight","fontFamily","buenosAires","flex","NEUTRAL_10","textAlign","NEUTRAL_4","overflow"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/session-results/SkillProgressionRow.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/features/fluency/components/start-banner/BannerFlashcards.js

@@ -0,0 +1,74 @@
+"use strict";
+
+import React from 'react';
+import { MathFlashcard } from "./MathFlashcard.js";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const CARD_LAYOUTS = [{
+  card: {
+    width: 175,
+    height: 106,
+    radius: 8
+  },
+  answer: {
+    width: 24,
+    height: 34,
+    radius: 5
+  },
+  fontSize: 31,
+  position: {
+    right: 69,
+    top: 84,
+    zIndex: 1
+  },
+  rotation: '5.63deg'
+}, {
+  card: {
+    width: 234,
+    height: 141,
+    radius: 10
+  },
+  answer: {
+    width: 32,
+    height: 46,
+    radius: 7
+  },
+  fontSize: 41,
+  position: {
+    right: 35,
+    top: 37,
+    zIndex: 2
+  },
+  rotation: '-2.47deg'
+}, {
+  card: {
+    width: 286,
+    height: 172,
+    radius: 13
+  },
+  answer: {
+    width: 39,
+    height: 56,
+    radius: 8
+  },
+  fontSize: 51,
+  position: {
+    right: 9,
+    top: -5,
+    zIndex: 3
+  },
+  rotation: '3.07deg'
+}];
+export const BannerFlashcards = ({
+  examples
+}) => /*#__PURE__*/_jsx(_Fragment, {
+  children: CARD_LAYOUTS.map((layout, index) => {
+    const example = examples[index];
+    if (!example) return null;
+    return /*#__PURE__*/_jsx(MathFlashcard, {
+      left: example.left,
+      right: example.right,
+      layout: layout
+    }, index);
+  })
+});
+//# sourceMappingURL=BannerFlashcards.js.map