@magmamath/students-features 1.5.0 → 1.5.1

package/src/features/fluency/components/start-banner/MathFlashcard.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import { COLORS, FONT_FAMILY, SHADOWS } from '@magmamath/react-native-ui'
+import type { FlashcardLayout } from '../../shared/fluency.types'
+
+type MathFlashcardProps = {
+  left: string
+  right: string
+  layout: FlashcardLayout
+}
+
+export const MathFlashcard = ({ left, right, layout }: MathFlashcardProps) => (
+  <View
+    style={[
+      styles.card,
+      {
+        width: layout.card.width,
+        height: layout.card.height,
+        borderRadius: layout.card.radius,
+        right: layout.position.right,
+        top: layout.position.top,
+        zIndex: layout.position.zIndex,
+        transform: [{ rotate: layout.rotation }],
+      },
+    ]}
+  >
+    <View style={styles.row}>
+      <Text style={[styles.text, { fontSize: layout.fontSize }]}>{left}</Text>
+      <View
+        style={[
+          styles.answerBox,
+          {
+            width: layout.answer.width,
+            height: layout.answer.height,
+            borderRadius: layout.answer.radius,
+          },
+        ]}
+      />
+      <Text style={[styles.text, { fontSize: layout.fontSize }]}>{right}</Text>
+    </View>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  card: {
+    position: 'absolute',
+    backgroundColor: COLORS.NEUTRAL_1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...SHADOWS[1],
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 1,
+  },
+  text: {
+    fontWeight: 'bold',
+    fontFamily: FONT_FAMILY.buenosAires,
+    color: COLORS.BLACK,
+  },
+  answerBox: {
+    backgroundColor: COLORS.NEUTRAL_2,
+    borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_5,
+  },
+})

package/src/features/fluency/components/start-banner/StartBanner.tsx

@@ -0,0 +1,121 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import {
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+  Typography,
+  COLORS,
+  SHADOWS,
+  SPACING,
+  FONT_FAMILY,
+  BORDER_RADIUS,
+} from '@magmamath/react-native-ui'
+import { GradientView } from '../../../../lib/components/GradientView'
+import { BannerFlashcards } from './BannerFlashcards'
+import { useFluency } from '../../context/FluencyContext'
+import { useText } from '../../../../i18n/i18n'
+import { FlashIcon } from '../../assets/FlashIcon'
+import { SESSION_LENGTH } from '../../shared/fluency.constants'
+
+export const StartBanner = () => {
+  const t = useText()
+  const { model, onStartPress } = useFluency()
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.gradientClip}>
+        <GradientView
+          colors={['#FFFFFF', '#FFF7E9']}
+          locations={[0.231, 0.8173]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+          style={StyleSheet.absoluteFill}
+          pointerEvents="none"
+        />
+      </View>
+
+      <View style={styles.buttonContainer}>
+        <View style={styles.buttonGroup}>
+          <Button
+            icon={<FlashIcon color={COLORS.NEUTRAL_1} />}
+            variant={ButtonVariant.PRIMARY}
+            size={ButtonSize.LARGE}
+            colorScheme={ButtonColor.YELLOW}
+            raiseLevel={6}
+            style={{ container: styles.button }}
+            onPress={() => {
+              model.solving.start()
+              onStartPress?.()
+            }}
+          >
+            {t('student.fluency.startPractice')}
+          </Button>
+          <Typography style={styles.buttonSubtitle}>
+            {SESSION_LENGTH} {t('student.fluency.cardsReady')}
+          </Typography>
+        </View>
+      </View>
+
+      <BannerFlashcards
+        examples={[
+          { left: '15*', right: '=30' },
+          { left: '10-', right: '=25' },
+          { left: '5+', right: '=19' },
+        ]}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    height: '100%',
+    justifyContent: 'center',
+    paddingVertical: SPACING[400],
+    paddingHorizontal: SPACING[800],
+    borderRadius: BORDER_RADIUS[400],
+    ...SHADOWS[1],
+  },
+  gradientClip: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: BORDER_RADIUS[400],
+    overflow: 'hidden',
+  },
+  buttonContainer: {
+    alignItems: 'flex-start',
+    zIndex: 4,
+  },
+  buttonGroup: {
+    alignItems: 'center',
+    gap: SPACING[200],
+  },
+  button: {
+    minWidth: 220,
+    maxWidth: 315,
+    textTransform: 'uppercase',
+  },
+  buttonSubtitle: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: COLORS.BLACK,
+    fontFamily: FONT_FAMILY.buenosAires,
+    textTransform: 'uppercase',
+  },
+  flashcard: {
+    position: 'absolute',
+    backgroundColor: COLORS.NEUTRAL_1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...SHADOWS[1],
+  },
+  springIcon: {
+    position: 'absolute',
+    bottom: -28,
+    right: 0,
+    marginTop: 6,
+    alignSelf: 'flex-end',
+  },
+})

package/src/features/fluency/context/FluencyContext.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react'
+import type { FluencyModel } from '../model/FluencyModel'
+import type { FluencyMode } from '../shared/fluency.constants'
+
+export type FluencyContextValue = {
+  model: FluencyModel
+  onStartPress?: () => void
+  onPracticePress?: () => void
+  onModeSelectPress?: (mode: FluencyMode) => void
+}
+
+const FluencyContext = createContext<FluencyContextValue | null>(null)
+
+export const useFluency = (): FluencyContextValue => {
+  const value = useContext(FluencyContext)
+  if (!value) throw new Error('useFluency must be used within FluencyProvider')
+  return value
+}
+
+export const FluencyProvider = FluencyContext.Provider

package/src/features/fluency/hooks/useCardSnapAnimation.ts

@@ -0,0 +1,170 @@
+import { useRef } from 'react'
+import { Dimensions } from 'react-native'
+import {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  withDelay,
+  withSequence,
+  Easing,
+  runOnJS,
+} from 'react-native-reanimated'
+import type { AnimatedStyle } from 'react-native-reanimated'
+import type { ViewStyle } from 'react-native'
+
+export type SnapDirection = 'left' | 'right'
+
+export type SnapStyles = {
+  front: AnimatedStyle<ViewStyle>
+  near: AnimatedStyle<ViewStyle>
+  mid: AnimatedStyle<ViewStyle>
+  far: AnimatedStyle<ViewStyle>
+}
+
+type UseCardSnapAnimationParams = {
+  onComplete?: () => void
+}
+
+const SHAKE_STEP_DURATION = 60
+
+const SNAP_SUCCESS_DURATION = 300
+
+const SNAP = {
+  duration: 240,
+  easing: Easing.bezier(0.6, 0, 0.4, 1),
+  rotate: 18,
+  scale: 0.85,
+  y: -40,
+} as const
+
+const STEP_UP = {
+  delay: 80,
+  duration: 320,
+  easing: Easing.bezier(0.3, 0.9, 0.2, 1),
+} as const
+
+const L = [
+  { top: 12, side: 20 },
+  { top: 24, side: 40 },
+  { top: 36, side: 60 },
+]
+
+export const useCardSnapAnimation = (params: UseCardSnapAnimationParams = {}) => {
+  const isAnimating = useRef(false)
+  const onCompleteRef = useRef(params.onComplete)
+  onCompleteRef.current = params.onComplete
+
+  const translateX = useSharedValue(0)
+  const translateY = useSharedValue(0)
+  const rotate = useSharedValue(0)
+  const scale = useSharedValue(1)
+  const opacity = useSharedValue(1)
+
+  const l1Top = useSharedValue(L[0].top)
+  const l1Side = useSharedValue(L[0].side)
+  const l2Top = useSharedValue(L[1].top)
+  const l2Side = useSharedValue(L[1].side)
+  const l3Top = useSharedValue(L[2].top)
+  const l3Side = useSharedValue(L[2].side)
+  const l3Opacity = useSharedValue(0)
+
+  const front = useAnimatedStyle(
+    () => ({
+      transform: [
+        { translateX: translateX.value },
+        { translateY: translateY.value },
+        { rotate: `${rotate.value}deg` },
+        { scale: scale.value },
+      ],
+      opacity: opacity.value,
+    }),
+    [translateX, translateY, rotate, scale, opacity],
+  )
+
+  const near = useAnimatedStyle(
+    () => ({ top: l1Top.value, left: l1Side.value, right: l1Side.value }),
+    [l1Top, l1Side],
+  )
+
+  const mid = useAnimatedStyle(
+    () => ({ top: l2Top.value, left: l2Side.value, right: l2Side.value }),
+    [l2Top, l2Side],
+  )
+
+  const far = useAnimatedStyle(
+    () => ({ top: l3Top.value, left: l3Side.value, right: l3Side.value, opacity: l3Opacity.value }),
+    [l3Top, l3Side, l3Opacity],
+  )
+
+  const complete = () => {
+    isAnimating.current = false
+    onCompleteRef.current?.()
+  }
+
+  const resetBackingCards = () => {
+    l1Top.value = L[0].top
+    l1Side.value = L[0].side
+    l2Top.value = L[1].top
+    l2Side.value = L[1].side
+    l3Top.value = L[2].top
+    l3Side.value = L[2].side
+    l3Opacity.value = 0
+  }
+
+  const resetFrontCard = () => {
+    translateX.value = 0
+    translateY.value = 0
+    rotate.value = 0
+    scale.value = 1
+    opacity.value = 1
+  }
+
+  const snap = (toX: number, toRotate: number, duration: number = SNAP.duration) => {
+    const snapConfig = { duration, easing: SNAP.easing }
+    const stepConfig = { duration: STEP_UP.duration, easing: STEP_UP.easing }
+
+    translateX.value = withTiming(toX, snapConfig)
+    translateY.value = withTiming(SNAP.y, snapConfig)
+    rotate.value = withTiming(toRotate, snapConfig)
+    scale.value = withTiming(SNAP.scale, snapConfig)
+    opacity.value = withTiming(0, snapConfig)
+
+    l1Top.value = withDelay(
+      STEP_UP.delay,
+      withTiming(0, stepConfig, () => runOnJS(complete)()),
+    )
+    l1Side.value = withDelay(STEP_UP.delay, withTiming(0, stepConfig))
+    l2Top.value = withDelay(STEP_UP.delay, withTiming(L[0].top, stepConfig))
+    l2Side.value = withDelay(STEP_UP.delay, withTiming(L[0].side, stepConfig))
+    l3Top.value = withDelay(STEP_UP.delay, withTiming(L[1].top, stepConfig))
+    l3Side.value = withDelay(STEP_UP.delay, withTiming(L[1].side, stepConfig))
+    l3Opacity.value = withDelay(STEP_UP.delay, withTiming(1, stepConfig))
+  }
+
+  const trigger = (direction: SnapDirection) => {
+    if (isAnimating.current) return false
+    isAnimating.current = true
+    resetFrontCard()
+    resetBackingCards()
+
+    const screenWidth = Dimensions.get('window').width
+    const toX = direction === 'right' ? screenWidth * 1.6 : -screenWidth * 1.6
+    const toRotate = direction === 'right' ? SNAP.rotate : -SNAP.rotate
+
+    if (direction === 'right') {
+      snap(toX, toRotate, SNAP_SUCCESS_DURATION)
+      return true
+    }
+
+    translateX.value = withSequence(
+      withTiming(-10, { duration: SHAKE_STEP_DURATION }),
+      withTiming(10, { duration: SHAKE_STEP_DURATION }),
+      withTiming(-6, { duration: SHAKE_STEP_DURATION }),
+      withTiming(6, { duration: SHAKE_STEP_DURATION }),
+      withTiming(0, { duration: SHAKE_STEP_DURATION }, () => runOnJS(snap)(toX, toRotate)),
+    )
+    return true
+  }
+
+  return { snapStyles: { front, near, mid, far } as SnapStyles, trigger, resetBackingCards }
+}

package/src/features/fluency/hooks/useFluencyCardDeckAnimation.ts

@@ -0,0 +1,49 @@
+import { useCallback, useLayoutEffect, useState } from 'react'
+
+import { useCardSnapAnimation, type SnapDirection } from './useCardSnapAnimation'
+import { type AttemptStatus } from '../shared/fluency.constants'
+import type { FluencyCardDisplayContent } from '../shared/fluencySolving.types'
+
+type StartCardExitParams = {
+  cardContent: FluencyCardDisplayContent
+  direction: SnapDirection
+  status: AttemptStatus
+}
+
+export const useFluencyCardDeckAnimation = () => {
+  const [exitingCardContent, setExitingCardContent] = useState<FluencyCardDisplayContent | null>(
+    null,
+  )
+  const [exitingCardStatus, setExitingCardStatus] = useState<AttemptStatus | null>(null)
+  const [shouldResetBackingCards, setShouldResetBackingCards] = useState(false)
+
+  const clearExitingCard = useCallback(() => {
+    setExitingCardContent(null)
+    setExitingCardStatus(null)
+    setShouldResetBackingCards(true)
+  }, [])
+
+  const animation = useCardSnapAnimation({ onComplete: clearExitingCard })
+
+  useLayoutEffect(() => {
+    if (!shouldResetBackingCards || exitingCardContent) return
+
+    animation.resetBackingCards()
+    setShouldResetBackingCards(false)
+  })
+
+  const startCardExit = ({ cardContent, direction, status }: StartCardExitParams) => {
+    if (!animation.trigger(direction)) return false
+
+    setExitingCardContent(cardContent)
+    setExitingCardStatus(status)
+    return true
+  }
+
+  return {
+    exitingCardContent,
+    exitingCardStatus,
+    snapStyles: animation.snapStyles,
+    startCardExit,
+  }
+}

package/src/features/fluency/hooks/useFluencyModePreset.ts

@@ -0,0 +1,58 @@
+import { useUnit } from 'effector-react'
+import { COLORS } from '@magmamath/react-native-ui'
+import type { ButtonColor } from '@magmamath/react-native-ui'
+import { FLUENCY_MODE_PRESETS, FluencyMasteryLevel } from '../shared/fluency.constants'
+import type { LegendItem } from '../shared/fluency.types'
+import { useFluency } from '../context/FluencyContext'
+import { useText } from '../../../i18n/i18n'
+
+type UseFluencyModePresetResult = {
+  symbol: string
+  label: string
+  colors: {
+    level: Record<FluencyMasteryLevel, string>
+    accent: string
+    streak: { gained: string; todayBorder: string }
+    button: ButtonColor
+  }
+  legend: { items: LegendItem[] }
+}
+
+export const useFluencyModePreset = (): UseFluencyModePresetResult => {
+  const t = useText()
+  const { model } = useFluency()
+  const mode = useUnit(model.matrix.$mode)
+  const preset = FLUENCY_MODE_PRESETS[mode]
+
+  const legendItems: LegendItem[] = [
+    { label: t('student.fluency.notStarted'), color: COLORS.NEUTRAL_2, withBorder: true },
+    {
+      label: t('student.fluency.masteryLearning'),
+      color: preset.matrix.levelColors[FluencyMasteryLevel.LEARNING],
+    },
+    {
+      label: t('student.fluency.masteryGrowing'),
+      color: preset.matrix.levelColors[FluencyMasteryLevel.GROWING],
+    },
+    {
+      label: t('student.fluency.masteryStrong'),
+      color: preset.matrix.levelColors[FluencyMasteryLevel.STRONG],
+    },
+    {
+      label: t('student.fluency.masteryMastered'),
+      color: preset.matrix.levelColors[FluencyMasteryLevel.MASTERED],
+    },
+  ]
+
+  return {
+    symbol: preset.symbol,
+    label: t(preset.matrix.operatorLabel),
+    colors: {
+      level: preset.matrix.levelColors,
+      accent: preset.accentColor,
+      streak: preset.header.streakColor,
+      button: preset.buttonColor,
+    },
+    legend: { items: legendItems },
+  }
+}

package/src/features/fluency/hooks/useFluencyNumpad.tsx

@@ -0,0 +1,141 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { COLORS } from '@magmamath/react-native-ui'
+import { ButtonStates } from '@magmamath/react-native-ui'
+import { BackspaceIcon } from '../../../shared/icons/keyboard/BackspaceIcon'
+import { useUnit } from 'effector-react'
+import { isWeb } from '../../../shared/common.constants'
+import { KeyboardKeys } from '../../../lib/constants'
+import { useText } from '../../../i18n/i18n'
+import { useFluency } from '../context/FluencyContext'
+import { MAX_INPUT_LENGTH } from '../shared/fluency.constants'
+
+type UseFluencyNumpadProps = {
+  onSubmit: () => void
+}
+
+type NumpadKey = {
+  key: string
+  title: string | React.ReactNode
+  value: number | KeyboardKeys.BACKSPACE | KeyboardKeys.ENTER
+  customColorScheme?: typeof ACTION_KEY_COLOR_SCHEME
+}
+
+const ACTION_KEY_COLOR_SCHEME = {
+  [ButtonStates.DEFAULT]: {
+    backgroundColor: COLORS.NEUTRAL_3,
+    borderColor: COLORS.NEUTRAL_5,
+    raiseColor: COLORS.NEUTRAL_5,
+    color: COLORS.NEUTRAL_9,
+  },
+  [ButtonStates.HOVER]: {
+    backgroundColor: COLORS.NEUTRAL_2,
+    borderColor: COLORS.NEUTRAL_4,
+    raiseColor: COLORS.NEUTRAL_4,
+    color: COLORS.NEUTRAL_9,
+  },
+}
+
+const NUMPAD_KEYS: NumpadKey[] = [
+  { key: '1', title: '1', value: 1 },
+  { key: '2', title: '2', value: 2 },
+  { key: '3', title: '3', value: 3 },
+  { key: '4', title: '4', value: 4 },
+  { key: '5', title: '5', value: 5 },
+  { key: '6', title: '6', value: 6 },
+  { key: '7', title: '7', value: 7 },
+  { key: '8', title: '8', value: 8 },
+  { key: '9', title: '9', value: 9 },
+  {
+    key: KeyboardKeys.BACKSPACE,
+    title: <BackspaceIcon size={20} color={COLORS.NEUTRAL_9} />,
+    value: KeyboardKeys.BACKSPACE,
+    customColorScheme: ACTION_KEY_COLOR_SCHEME,
+  },
+  { key: '0', title: '0', value: 0 },
+  {
+    key: KeyboardKeys.ENTER,
+    title: 'Enter',
+    value: KeyboardKeys.ENTER,
+    customColorScheme: ACTION_KEY_COLOR_SCHEME,
+  },
+]
+
+const ENTER_COLOR_SCHEME = {
+  [ButtonStates.DEFAULT]: {
+    backgroundColor: COLORS.PRIMARY_GREEN,
+    borderColor: COLORS.GREEN_6,
+    raiseColor: COLORS.GREEN_6,
+    color: COLORS.NEUTRAL_1,
+  },
+  [ButtonStates.HOVER]: {
+    backgroundColor: COLORS.PRIMARY_GREEN,
+    borderColor: COLORS.GREEN_6,
+    raiseColor: COLORS.GREEN_6,
+    color: COLORS.NEUTRAL_1,
+  },
+  [ButtonStates.PRESSED]: {
+    backgroundColor: COLORS.PRIMARY_GREEN,
+    borderColor: COLORS.GREEN_6,
+    raiseColor: COLORS.GREEN_6,
+    color: COLORS.NEUTRAL_1,
+  },
+  [ButtonStates.ACTIVE]: {
+    backgroundColor: COLORS.PRIMARY_GREEN,
+    borderColor: COLORS.GREEN_6,
+    raiseColor: COLORS.GREEN_6,
+    color: COLORS.NEUTRAL_1,
+  },
+}
+
+export const useFluencyNumpad = ({ onSubmit }: UseFluencyNumpadProps) => {
+  const t = useText()
+  const { model } = useFluency()
+  const answer = useUnit(model.solving.$answer)
+  const [pressedKey, setPressedKey] = useState<string | null>(null)
+  const pressedKeyTimeoutRef = useRef<ReturnType<typeof setTimeout>>()
+  const onSubmitRef = useRef(onSubmit)
+  onSubmitRef.current = onSubmit
+
+  const pressKey = (key: string) => {
+    if (key === KeyboardKeys.ENTER) {
+      onSubmitRef.current()
+      return
+    }
+    if (key === KeyboardKeys.BACKSPACE) {
+      model.solving.setAnswer(answer === null || answer.length <= 1 ? null : answer.slice(0, -1))
+      return
+    }
+    if (answer !== null && answer.length >= MAX_INPUT_LENGTH) return
+    model.solving.setAnswer(answer === null ? key : answer + key)
+  }
+
+  useEffect(() => {
+    if (!isWeb) return
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const { key } = event
+      if (!/^\d$/.test(key) && key !== KeyboardKeys.ENTER && key !== KeyboardKeys.BACKSPACE) return
+
+      clearTimeout(pressedKeyTimeoutRef.current)
+      setPressedKey(key)
+      pressedKeyTimeoutRef.current = setTimeout(() => setPressedKey(null), 175)
+      pressKey(key)
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [answer])
+
+  const options = NUMPAD_KEYS.map(({ value, customColorScheme, ...props }) => ({
+    ...props,
+    title: props.key === KeyboardKeys.ENTER ? t('student.fluency.enter') : props.title,
+    selected: pressedKey === props.key,
+    customColorScheme:
+      props.key === KeyboardKeys.ENTER && answer !== null ? ENTER_COLOR_SCHEME : customColorScheme,
+    onPressIn: () => pressKey(props.key),
+  }))
+
+  return { options }
+}

package/src/features/fluency/hooks/useFluencySolvingPreset.ts

@@ -0,0 +1,71 @@
+import { useUnit } from 'effector-react'
+import { COLORS } from '@magmamath/react-native-ui'
+import type { ButtonColor } from '@magmamath/react-native-ui'
+import {
+  FLUENCY_MODE_PRESETS,
+  FluencyMasteryLevel,
+  type FluencyMode,
+} from '../shared/fluency.constants'
+import type { LegendItem } from '../shared/fluency.types'
+import { useFluency } from '../context/FluencyContext'
+import { useText } from '../../../i18n/i18n'
+
+type UseFluencySolvingPresetParams = {
+  mode?: FluencyMode
+}
+
+type UseFluencySolvingPresetResult = {
+  symbol: string
+  label: string
+  colors: {
+    level: Record<FluencyMasteryLevel, string>
+    accent: string
+    streak: { gained: string; todayBorder: string }
+    button: ButtonColor
+  }
+  legend: { items: LegendItem[] }
+}
+
+export const useFluencySolvingPreset = (
+  params?: UseFluencySolvingPresetParams,
+): UseFluencySolvingPresetResult => {
+  const t = useText()
+  const { model } = useFluency()
+  const { matrixMode, current } = useUnit({
+    matrixMode: model.matrix.$mode,
+    current: model.solving.$current,
+  })
+  const preset = FLUENCY_MODE_PRESETS[params?.mode ?? current?.mode ?? matrixMode]
+
+  const legendItems: LegendItem[] = [
+    { label: t('student.fluency.notStarted'), color: COLORS.NEUTRAL_2, withBorder: true },
+    {
+      label: t('student.fluency.masteryLearning'),
+      color: preset.matrix.levelColors[FluencyMasteryLevel.LEARNING],
+    },
+    {
+      label: t('student.fluency.masteryGrowing'),
+      color: preset.matrix.levelColors[FluencyMasteryLevel.GROWING],
+    },
+    {
+      label: t('student.fluency.masteryStrong'),
+      color: preset.matrix.levelColors[FluencyMasteryLevel.STRONG],
+    },
+    {
+      label: t('student.fluency.masteryMastered'),
+      color: preset.matrix.levelColors[FluencyMasteryLevel.MASTERED],
+    },
+  ]
+
+  return {
+    symbol: preset.symbol,
+    label: t(preset.matrix.operatorLabel),
+    colors: {
+      level: preset.matrix.levelColors,
+      accent: preset.accentColor,
+      streak: preset.header.streakColor,
+      button: preset.buttonColor,
+    },
+    legend: { items: legendItems },
+  }
+}