@magmamath/students-features 1.8.0-rc.0-fluency-visuals → 1.8.0

package/dist/typescript/module/features/fluency-teacher/hooks/useDrawerGrid.d.ts

@@ -1,15 +1,4 @@
 import { FluencyOperator } from '../fluencyTeacher.constants';
-export type DrawerGridCell = {
-    box: number | null;
-    isEmpty: boolean;
-};
-export type DrawerGridRow = {
-    label: number;
-    cells: DrawerGridCell[];
-};
-export type DrawerGrid = {
-    colLabels: number[];
-    rows: DrawerGridRow[];
-};
+import type { DrawerGrid } from '../fluencyTeacher.types';
 export declare const useDrawerGrid: (operator: FluencyOperator) => DrawerGrid | null;
 //# sourceMappingURL=useDrawerGrid.d.ts.map

package/dist/typescript/module/features/fluency-teacher/hooks/useDrawerGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDrawerGrid.d.ts","sourceRoot":"","sources":["../../../../../../src/features/fluency-teacher/hooks/useDrawerGrid.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAE7D,MAAM,MAAM,cAAc,GAAG;IAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAA;AACrE,MAAM,MAAM,aAAa,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,cAAc,EAAE,CAAA;CAAE,CAAA;AACtE,MAAM,MAAM,UAAU,GAAG;IAAE,SAAS,EAAE,MAAM,EAAE,CAAC;IAAC,IAAI,EAAE,aAAa,EAAE,CAAA;CAAE,CAAA;AAEvE,eAAO,MAAM,aAAa,aAAc,eAAe,KAAG,UAAU,GAAG,IAgDtE,CAAA"}
+{"version":3,"file":"useDrawerGrid.d.ts","sourceRoot":"","sources":["../../../../../../src/features/fluency-teacher/hooks/useDrawerGrid.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAE7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAEzD,eAAO,MAAM,aAAa,aAAc,eAAe,KAAG,UAAU,GAAG,IA+CtE,CAAA"}

package/dist/typescript/module/features/fluency-teacher/hooks/useDrawerMatrix.d.ts

@@ -1,12 +1,12 @@
 import type { LayoutChangeEvent } from 'react-native';
-import { FluencyOperator } from '../fluencyTeacher.constants';
-import { type DrawerGrid } from './useDrawerGrid';
+import { FluencyOperator, MasteryLevel } from '../fluencyTeacher.constants';
+import type { DrawerGrid } from '../fluencyTeacher.types';
 type DrawerMatrixLayout = {
     grid: DrawerGrid | null;
     cellSize: number;
     fontSize: number;
     borderRadius: number;
-    cellColorMap: Record<number, string>;
+    cellColorMap: Record<MasteryLevel, string>;
     onLayout: (e: LayoutChangeEvent) => void;
 };
 export declare const useDrawerMatrix: (operator: FluencyOperator) => DrawerMatrixLayout;

package/dist/typescript/module/features/fluency-teacher/hooks/useDrawerMatrix.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDrawerMatrix.d.ts","sourceRoot":"","sources":["../../../../../../src/features/fluency-teacher/hooks/useDrawerMatrix.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,EAAE,eAAe,EAAsB,MAAM,6BAA6B,CAAA;AACjF,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAIhE,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,UAAU,GAAG,IAAI,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACpC,QAAQ,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,eAAe,aAAc,eAAe,KAAG,kBA2B3D,CAAA"}
+{"version":3,"file":"useDrawerMatrix.d.ts","sourceRoot":"","sources":["../../../../../../src/features/fluency-teacher/hooks/useDrawerMatrix.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,EAAE,eAAe,EAAE,YAAY,EAAsB,MAAM,6BAA6B,CAAA;AAC/F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAKzD,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,UAAU,GAAG,IAAI,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAA;IAC1C,QAAQ,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,eAAe,aAAc,eAAe,KAAG,kBA2B3D,CAAA"}

package/dist/typescript/module/features/fluency-teacher/model/TeacherFluencyFiltersModel.d.ts

@@ -4,6 +4,7 @@ export declare class TeacherFluencyFiltersModel {
     readonly setSearch: import("effector").EventCallable<string>;
     readonly $search: import("effector").StoreWritable<string>;
     readonly toggleSort: import("effector").EventCallable<FluencyTableColumn>;
+    readonly resetSort: import("effector").EventCallable<void>;
     readonly $sort: import("effector").StoreWritable<SortState>;
 }
 //# sourceMappingURL=TeacherFluencyFiltersModel.d.ts.map

package/dist/typescript/module/features/fluency-teacher/model/TeacherFluencyFiltersModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TeacherFluencyFiltersModel.d.ts","sourceRoot":"","sources":["../../../../../../src/features/fluency-teacher/model/TeacherFluencyFiltersModel.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAExD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAEhE,qBAAa,0BAA0B;IACrC,SAAgB,SAAS,2CAAwB;IACjD,SAAgB,OAAO,2CAA8B;IAErD,SAAgB,UAAU,uDAAoC;IAC9D,SAAgB,KAAK,8CAQnB;CACH"}
+{"version":3,"file":"TeacherFluencyFiltersModel.d.ts","sourceRoot":"","sources":["../../../../../../src/features/fluency-teacher/model/TeacherFluencyFiltersModel.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAExD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAEhE,qBAAa,0BAA0B;IACrC,SAAgB,SAAS,2CAAwB;IACjD,SAAgB,OAAO,2CAA8B;IAErD,SAAgB,UAAU,uDAAoC;IAC9D,SAAgB,SAAS,yCAAgB;IACzC,SAAgB,KAAK,8CAUjB;CACL"}

package/dist/typescript/module/features/fluency-teacher/model/TeacherFluencyModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TeacherFluencyModel.d.ts","sourceRoot":"","sources":["../../../../../../src/features/fluency-teacher/model/TeacherFluencyModel.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAA;AACzE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,KAAK,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAA;AAEhG,qBAAa,mBAAmB;IAC9B,SAAgB,IAAI,yDAAwC;IAE5D,SAAgB,GAAG,EAAE,sBAAsB,CAAA;IAC3C,SAAgB,OAAO,EAAE,0BAA0B,CAAA;IACnD,SAAgB,KAAK,EAAE,wBAAwB,CAAA;gBAEnC,EAAE,GAAG,EAAE,EAAE,wBAAwB;IAO7C,OAAO,CAAC,IAAI;CAuBb"}
+{"version":3,"file":"TeacherFluencyModel.d.ts","sourceRoot":"","sources":["../../../../../../src/features/fluency-teacher/model/TeacherFluencyModel.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAA;AACzE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAA;AAErE,OAAO,KAAK,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAA;AAEhG,qBAAa,mBAAmB;IAC9B,SAAgB,IAAI,yDAAwC;IAE5D,SAAgB,GAAG,EAAE,sBAAsB,CAAA;IAC3C,SAAgB,OAAO,EAAE,0BAA0B,CAAA;IACnD,SAAgB,KAAK,EAAE,wBAAwB,CAAA;gBAEnC,EAAE,GAAG,EAAE,EAAE,wBAAwB;IAO7C,OAAO,CAAC,IAAI;CA8Bb"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "1.8.0-rc.0-fluency-visuals",
+  "version": "1.8.0",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",

package/src/features/fluency/components/FluencySolving.tsx

@@ -3,8 +3,8 @@ import { View, StyleSheet } from 'react-native'
 import { COLORS } from '@magmamath/react-native-ui'
 import { FluencyProvider } from '../context/FluencyContext'
 import { FluencySolvingHeader } from './fluency-solving/components/FluencySolvingHeader'
+import { FluencySolvingProgress } from './fluency-solving/components/FluencySolvingProgress'
 import { FluencySolvingCard } from './fluency-solving/components/FluencySolvingCard'
-import { DebugBoxIndicator } from './fluency-solving/components/DebugBoxIndicator'
 import { FluencySessionResults } from './session-results/FluencySessionResults'
 import { usePreventPageLeave } from '../hooks/usePreventPageLeave'
 import type { FluencyModel } from '../model/FluencyModel'
@@ -22,8 +22,8 @@ export const FluencySolving = ({ model, onClosePress, onEndModalPress }: Fluency
     <FluencyProvider value={{ model }}>
       <View style={styles.container}>
         <FluencySolvingHeader onClosePress={onClosePress} />
+        <FluencySolvingProgress />
         <FluencySolvingCard />
-        <DebugBoxIndicator />
       </View>
 
       <FluencySessionResults onClosePress={onClosePress} onEndModalPress={onEndModalPress} />

package/src/features/fluency/components/fluency-solving/components/EquationContent.tsx

@@ -53,6 +53,10 @@ export const EquationContent = ({
 }: EquationContentProps) => {
   const t = useText()
   const modePreset = useFluencySolvingPreset({ mode })
+  const labelColor = status ? STATUS_COLOR[status] : COLORS.NEUTRAL_7
+  const labelText = status
+    ? t(STATUS_LABELS[status], { answer: correctAnswer })
+    : t('student.fluency.typeYourAnswer')
   const answerAreaColor =
     status === AttemptStatus.INCORRECT ? COLORS.PRIMARY_RED : modePreset.colors.accent
 
@@ -61,14 +65,9 @@ export const EquationContent = ({
 
   return (
     <>
-      {status && (
-        <Typography
-          variant={HeadingVariants.H9}
-          style={[styles.cardLabel, { color: STATUS_COLOR[status] }]}
-        >
-          {t(STATUS_LABELS[status], { answer: correctAnswer })}
-        </Typography>
-      )}
+      <Typography variant={HeadingVariants.H9} style={[styles.cardLabel, { color: labelColor }]}>
+        {labelText}
+      </Typography>
       <View style={styles.equationRow}>
         <Typography style={styles.number}>{leftOperand}</Typography>
         <Typography style={[styles.number, { color: modePreset.colors.accent }]}>
@@ -108,10 +107,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     gap: SPACING[300],
-    // The answer input hangs ~16px below the number row; counting that here
-    // makes the row's measured box match its visual extent, so the parent
-    // centers the equation accurately at any card height (visual or mastered).
-    paddingBottom: SPACING[400],
+    marginTop: SPACING[600],
   },
   number: {
     fontSize: 75,

package/src/features/fluency/components/fluency-solving/components/FluencyCardDeck.tsx

@@ -45,11 +45,7 @@ export const FluencyCardDeck = ({
       <Animated.View style={[styles.card, styles.cardMid, snapStyles.mid]} />
 
       <Animated.View style={[styles.card, styles.cardNear, snapStyles.near]}>
-        <FluencyEquationCard
-          cardContent={backingCardContent}
-          readOnly
-          showVisual={!!exitingCardContent}
-        />
+        <FluencyEquationCard cardContent={backingCardContent} readOnly />
       </Animated.View>
 
       {!exitingCardContent && (
@@ -96,7 +92,6 @@ const styles = StyleSheet.create({
     height: 260,
     borderRadius: BORDER_RADIUS[400],
     backgroundColor: COLORS.NEUTRAL_1,
-    overflow: 'hidden',
     ...SHADOWS[5],
   },
   cardFar: {

package/src/features/fluency/components/fluency-solving/components/FluencyEquationCard.tsx

@@ -1,9 +1,6 @@
 import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import { SPACING } from '@magmamath/react-native-ui'
 
 import { EquationContent } from './EquationContent'
-import { FactVisual, renderFact, toFactPresentation, VISUAL_COLORS } from '../../../visual-scaffolding'
 import type { FluencyCardDisplayContent, SolvingFact } from '../../../shared/fluencySolving.types'
 import type { AttemptStatus, FluencyMode } from '../../../shared/fluency.constants'
 
@@ -17,10 +14,6 @@ type FluencyEquationCardProps = {
   cardContent: FluencyCardDisplayContent
   readOnly?: boolean
   status?: AttemptStatus
-  // Whether to render the visual. The deck enables it on the active card, the
-  // exiting card, and the backing card *while it steps up*, so the visual is
-  // present as fast as the equation (no pop-in after the swipe).
-  showVisual?: boolean
   onAnswerChange?: (text: string) => void
 }
 
@@ -39,65 +32,20 @@ export const FluencyEquationCard = ({
   cardContent,
   readOnly = false,
   status,
-  showVisual = true,
   onAnswerChange,
 }: FluencyEquationCardProps) => {
-  const { fact } = cardContent
-  const equation = getDisplayedEquation(fact)
-
-  const presentation = fact && showVisual ? toFactPresentation(fact) : null
-  const spec = presentation ? renderFact(presentation) : null
-  const colors = presentation ? VISUAL_COLORS[presentation.operation] : null
-  // Narrow away the "none" variant (L4/L5 → no visual).
-  const visualSpec = spec && spec.kind !== 'none' ? spec : null
+  const equation = getDisplayedEquation(cardContent.fact)
 
   return (
-    <View style={styles.body}>
-      {visualSpec && colors && (
-        <View style={[styles.visualZone, { backgroundColor: colors.bg }]}>
-          <FactVisual spec={visualSpec} colors={colors} />
-        </View>
-      )}
-      <View style={styles.eqZone}>
-        <EquationContent
-          leftOperand={equation.leftOperand}
-          rightOperand={equation.rightOperand}
-          mode={equation.mode}
-          value={cardContent.answer}
-          readOnly={readOnly}
-          status={status}
-          correctAnswer={fact?.answer}
-          onChange={onAnswerChange}
-        />
-      </View>
-    </View>
+    <EquationContent
+      leftOperand={equation.leftOperand}
+      rightOperand={equation.rightOperand}
+      mode={equation.mode}
+      value={cardContent.answer}
+      readOnly={readOnly}
+      status={status}
+      correctAnswer={cardContent.fact?.answer}
+      onChange={onAnswerChange}
+    />
   )
 }
-
-const styles = StyleSheet.create({
-  body: {
-    flex: 1,
-    alignSelf: 'stretch',
-  },
-  // Tinted top zone (background set per operation), ~40% of the card height.
-  // Clips oversized visuals so the fixed-size card never grows.
-  visualZone: {
-    flex: 4,
-    alignSelf: 'stretch',
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    paddingVertical: SPACING[200],
-    paddingHorizontal: SPACING[400],
-  },
-  // White equation zone, ~60% of the card height. The equation is centered so
-  // it keeps whitespace above and below (and clears the negative-margin answer
-  // input under the card's overflow:hidden clip).
-  eqZone: {
-    flex: 6,
-    alignSelf: 'stretch',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: SPACING[400],
-  },
-})

package/src/features/fluency/components/fluency-solving/components/FluencySolvingHeader.tsx

@@ -13,7 +13,6 @@ import {
   Typography,
 } from '@magmamath/react-native-ui'
 import { useFluencySolvingPreset } from '../../../hooks/useFluencySolvingPreset'
-import { FluencySolvingProgress } from './FluencySolvingProgress'
 import { XCloseIcon } from '../../../../../shared/icons/XCloseIcon'
 
 type FluencySolvingHeaderProps = {
@@ -40,9 +39,6 @@ export const FluencySolvingHeader = ({ onClosePress }: FluencySolvingHeaderProps
       <Typography variant={HeadingVariants.H4} style={styles.title}>
         {modePreset.label}
       </Typography>
-      <View style={styles.progress} pointerEvents="none">
-        <FluencySolvingProgress />
-      </View>
     </View>
   )
 }
@@ -58,11 +54,6 @@ const styles = StyleSheet.create({
     backgroundColor: COLORS.NEUTRAL_1,
     ...SHADOWS[1],
   },
-  progress: {
-    ...StyleSheet.absoluteFillObject,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
   operatorBadge: {
     width: 32,
     height: 32,

package/src/features/fluency/components/fluency-solving/components/FluencySolvingProgress.tsx

@@ -50,6 +50,8 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     gap: SPACING[500],
+    paddingHorizontal: SPACING[600],
+    paddingVertical: 14,
     justifyContent: 'center',
     alignItems: 'center',
   },

package/src/features/fluency/index.ts

@@ -1,8 +1,6 @@
 export * from './shared/fluency.constants'
 export * from './shared/fluency.types'
 export * from './shared/fluency.helpers'
-export * from './visual-scaffolding'
 export { Fluency } from './components/Fluency'
 export { FluencySolving } from './components/FluencySolving'
-export { FluencyVisualPlayground } from './components/FluencyVisualPlayground'
 export { FluencyModel } from './model/FluencyModel'

package/src/features/fluency-teacher/assets/DivisionIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { COLORS, IconProps } from '@magmamath/react-native-ui'
+
+export const DivisionIcon = ({ color = COLORS.NEUTRAL_9, size = 16 }: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+    <Path
+      d="M8.0002 10.7996C8.82854 10.7996 9.50006 11.4713 9.5002 12.2996C9.5002 13.128 8.82862 13.7996 8.0002 13.7996C7.17177 13.7996 6.5002 13.128 6.5002 12.2996C6.50033 11.4713 7.17185 10.7996 8.0002 10.7996Z"
+      fill={color}
+    />
+    <Path
+      d="M14.4006 7.2C14.8423 7.20019 15.2004 7.55809 15.2004 7.9998C15.2004 8.4415 14.8422 8.79942 14.4006 8.79961H1.59981C1.15819 8.79937 0.800026 8.44146 0.8 7.9998C0.8 7.55812 1.15818 7.20024 1.5998 7.2H14.4006Z"
+      fill={color}
+    />
+    <Path
+      d="M8.0002 2.2C8.82862 2.2 9.5002 2.87157 9.5002 3.7C9.50006 4.52831 8.82854 5.2 8.0002 5.2C7.17185 5.2 6.50033 4.52831 6.5002 3.7C6.5002 2.87157 7.17177 2.2 8.0002 2.2Z"
+      fill={color}
+    />
+  </Svg>
+)

package/src/features/fluency-teacher/components/FluencyTeacher.tsx

@@ -4,10 +4,10 @@ import { View, StyleSheet } from 'react-native'
 import { SPACING } from '@magmamath/react-native-ui'
 import { TeacherFluencyModel } from '../model/TeacherFluencyModel'
 import { FluencyTeacherStudentsTable } from './table/FluencyTeacherStudentsTable'
+import { FluencyTeacherFooter } from './FluencyTeacherFooter'
 import { FluencyTeacherFilters } from './table/FluencyTeacherFilters'
 import { FluencyTeacherHeader } from './header/FluencyTeacherHeader'
 import { FluencyTeacherDrawer } from './drawer/FluencyTeacherDrawer'
-import { FluencyTeacherFooter } from './FluencyTeacherFooter'
 import { FluencyStudent } from '../fluencyTeacher.types'
 import { TeacherFluencyProvider } from '../context/TeacherFluencyContext'
 
@@ -21,13 +21,13 @@ export const FluencyTeacher = ({ model, students, grade }: FluencyTeacherProps)
   useGate(model.gate, { students, grade })
 
   return (
-    <TeacherFluencyProvider value={{ model }}>
+    <TeacherFluencyProvider value={{ model, grade }}>
       <View style={styles.container}>
         <FluencyTeacherHeader />
         <FluencyTeacherFilters />
         <FluencyTeacherStudentsTable />
-        <FluencyTeacherDrawer />
         <FluencyTeacherFooter />
+        <FluencyTeacherDrawer />
       </View>
     </TeacherFluencyProvider>
   )

package/src/features/fluency-teacher/components/drawer/DrawerHeader.tsx

@@ -7,11 +7,10 @@ import {
   COLORS,
   CrossIcon,
   FONT_FAMILY,
-  HeadingVariants,
   SPACING,
-  Typography,
 } from '@magmamath/react-native-ui'
 import { useText } from '../../../../i18n/i18n'
+import { AverageCell } from '../table/AverageCell'
 
 import type { StudentResult } from '../../fluencyTeacher.types'
 
@@ -24,20 +23,24 @@ export const DrawerHeader = ({ student, onClose }: DrawerHeaderProps) => {
   const t = useText()
   return (
     <View style={styles.container}>
-      <View style={styles.left}>
-        <Typography variant={HeadingVariants.H9} style={styles.label}>
-          {t('teacher.fluency.studentFluency')}
-        </Typography>
-        <Text style={styles.name}>{student.name}</Text>
-      </View>
-      <View style={styles.right}>
-        <Text style={styles.masteryLabel}>{t('teacher.fluency.overallMastery')}</Text>
-        <Text style={styles.masteryValue}>{student.averagePercent}%</Text>
+      <Text style={styles.name} numberOfLines={1}>
+        {student.name}
+      </Text>
+      <View style={styles.mastery}>
+        <View style={styles.masteryRow}>
+          <Text style={styles.masteryLabel} numberOfLines={1}>
+            {t('teacher.fluency.overallMastery')}
+          </Text>
+          <Text style={styles.masteryValue}>{student.averagePercent}%</Text>
+        </View>
+        <View style={styles.masteryBar}>
+          <AverageCell percent={student.averagePercent} height={22} showPercent={false} />
+        </View>
       </View>
       <Button
-        variant={ButtonVariant.SECONDARY}
+        variant={ButtonVariant.TERTIARY}
         colorScheme={ButtonColor.WHITE}
-        icon={<CrossIcon size={18} color={COLORS.NEUTRAL_7} />}
+        icon={<CrossIcon size={18} color={COLORS.NEUTRAL_9} />}
         onPress={onClose}
         style={{ container: styles.closeButton }}
       />
@@ -49,44 +52,43 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: SPACING[500],
-    paddingHorizontal: SPACING[700],
-    borderTopWidth: 1,
+    gap: SPACING[400],
+    padding: SPACING[400],
     borderBottomWidth: 1,
     borderColor: COLORS.NEUTRAL_4,
   },
-  left: {
-    marginLeft: 48,
-  },
-  label: {
-    color: COLORS.GREEN_7,
+  name: {
+    flex: 1,
     fontFamily: FONT_FAMILY.buenosAiresSemiBold,
     fontWeight: '600',
-  },
-  name: {
-    fontFamily: FONT_FAMILY.buenosAiresBold,
-    fontWeight: '700',
-    fontSize: 22,
+    fontSize: 24,
     color: COLORS.NEUTRAL_10,
   },
-  right: {
+  mastery: {
     alignItems: 'flex-end',
-    marginLeft: 'auto',
+  },
+  masteryBar: {
+    width: 150,
+  },
+  masteryRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: SPACING[100],
   },
   masteryLabel: {
-    fontFamily: FONT_FAMILY.buenosAiresBold,
-    fontWeight: '700',
+    fontFamily: FONT_FAMILY.buenosAires,
+    fontWeight: '400',
     fontSize: 13,
+    lineHeight: 26,
     color: COLORS.NEUTRAL_7,
   },
   masteryValue: {
-    fontFamily: FONT_FAMILY.buenosAiresBold,
-    fontWeight: '700',
-    fontSize: 28,
-    color: COLORS.GREEN_7,
+    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
+    fontWeight: '600',
+    fontSize: 24,
+    color: COLORS.PRIMARY_YELLOW,
   },
   closeButton: {
     alignSelf: 'center',
-    marginLeft: SPACING[600],
   },
 })

package/src/features/fluency-teacher/components/drawer/DrawerMatrixes.tsx

@@ -1,42 +1,24 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { COLORS, SPACING } from '@magmamath/react-native-ui'
+import { SPACING } from '@magmamath/react-native-ui'
 import { useText } from '../../../../i18n/i18n'
+import { useTeacherFluency } from '../../context/TeacherFluencyContext'
 import { DrawerOperatorBox } from './DrawerOperatorBox'
-import { FluencyMathOperatorSymbol, FluencyOperator } from '../../fluencyTeacher.constants'
+import { OPERATOR_CARD_CONFIG } from '../../fluencyTeacher.constants'
+import { getOperatorsForGrade } from '../../fluencyTeacher.helpers'
 
 export const DrawerMatrixes = () => {
   const t = useText()
+  const { grade } = useTeacherFluency()
   return (
     <View style={styles.grid}>
-      <DrawerOperatorBox
-        title={t('student.fluency.addition')}
-        symbol={FluencyMathOperatorSymbol.ADDITION}
-        iconBg={COLORS.GREEN_1}
-        iconColor={COLORS.GREEN_7}
-        operator={FluencyOperator.ADDITION}
-      />
-      <DrawerOperatorBox
-        title={t('student.fluency.subtraction')}
-        symbol={FluencyMathOperatorSymbol.SUBTRACTION}
-        iconBg={COLORS.ORANGE_1}
-        iconColor={COLORS.ORANGE_7}
-        operator={FluencyOperator.SUBTRACTION}
-      />
-      <DrawerOperatorBox
-        title={t('student.fluency.multiplication')}
-        symbol={FluencyMathOperatorSymbol.MULTIPLICATION}
-        iconBg={COLORS.BLUE_1}
-        iconColor={COLORS.BLUE_7}
-        operator={FluencyOperator.MULTIPLICATION}
-      />
-      <DrawerOperatorBox
-        title={t('student.fluency.division')}
-        symbol={FluencyMathOperatorSymbol.DIVISION}
-        iconBg={COLORS.PURPLE_1}
-        iconColor={COLORS.PURPLE_7}
-        operator={FluencyOperator.DIVISION}
-      />
+      {getOperatorsForGrade(grade).map((operator) => (
+        <DrawerOperatorBox
+          key={operator}
+          title={t(OPERATOR_CARD_CONFIG[operator].labelKey)}
+          operator={operator}
+        />
+      ))}
     </View>
   )
 }
@@ -45,8 +27,7 @@ const styles = StyleSheet.create({
   grid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    gap: SPACING[300],
-    marginTop: SPACING[300],
+    gap: SPACING[400],
     marginBottom: SPACING[600],
   },
 })

package/src/features/fluency-teacher/components/drawer/DrawerOperatorBox.tsx

@@ -5,25 +5,17 @@ import { BORDER_RADIUS, COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-na
 import { useText } from '../../../../i18n/i18n'
 import { useDrawerMatrix } from '../../hooks/useDrawerMatrix'
 import { DrawerMatrix } from '../matrix/DrawerMatrix'
+import { MatrixLegend } from '../matrix/MatrixLegend'
 import { useTeacherFluency } from '../../context/TeacherFluencyContext'
 
-import { FluencyOperator } from '../../fluencyTeacher.constants'
+import { FluencyOperator, OPERATOR_PALETTES } from '../../fluencyTeacher.constants'
 
 type DrawerOperatorBoxProps = {
   title: string
-  symbol: string
-  iconBg: string
-  iconColor: string
   operator: FluencyOperator
 }
 
-export const DrawerOperatorBox = ({
-  title,
-  symbol,
-  iconBg,
-  iconColor,
-  operator,
-}: DrawerOperatorBoxProps) => {
+export const DrawerOperatorBox = ({ title, operator }: DrawerOperatorBoxProps) => {
   const t = useText()
   const { model } = useTeacherFluency()
   const isLoading = useUnit(model.api.getStudentDetailsFx.pending)
@@ -36,13 +28,9 @@ export const DrawerOperatorBox = ({
     : ''
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, { borderColor: OPERATOR_PALETTES[operator].boxBorder }]}>
       <View style={styles.header}>
-        <View style={[styles.iconBox, { backgroundColor: iconBg }]}>
-          <Text style={[styles.symbol, { color: iconColor }]}>{symbol}</Text>
-        </View>
         <Text style={styles.title}>{title}</Text>
-        <View style={styles.spacer} />
         <Text style={styles.factsLabel}>{factsLabel}</Text>
       </View>
       <View style={styles.content}>
@@ -51,7 +39,10 @@ export const DrawerOperatorBox = ({
             <ActivityIndicator size="large" color={COLORS.PRIMARY_BLUE} />
           </View>
         ) : (
-          <DrawerMatrix {...matrixProps} />
+          <>
+            <DrawerMatrix {...matrixProps} />
+            {matrixProps.grid && <MatrixLegend operator={operator} grid={matrixProps.grid} />}
+          </>
         )}
       </View>
     </View>
@@ -60,48 +51,37 @@ export const DrawerOperatorBox = ({
 
 const styles = StyleSheet.create({
   container: {
-    width: 315,
-    height: 315,
+    flexGrow: 1,
+    flexBasis: '45%',
     borderWidth: 1,
-    borderColor: COLORS.NEUTRAL_4,
     borderRadius: BORDER_RADIUS[300],
+    backgroundColor: COLORS.NEUTRAL_1,
     padding: SPACING[400],
+    gap: SPACING[300],
   },
   header: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: SPACING[200],
-    marginBottom: SPACING[300],
-  },
-  iconBox: {
-    width: 24,
-    height: 24,
-    borderRadius: 6,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  symbol: {
-    fontFamily: FONT_FAMILY.buenosAiresBold,
-    fontSize: 20,
-    marginBottom: 2,
   },
   title: {
-    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
-    fontWeight: '700',
-    fontSize: 15,
-    color: COLORS.NEUTRAL_10,
-  },
-  spacer: {
     flex: 1,
+    fontFamily: FONT_FAMILY.buenosAires,
+    fontWeight: '400',
+    fontSize: 16,
+    color: COLORS.NEUTRAL_10,
   },
   factsLabel: {
     fontFamily: FONT_FAMILY.buenosAiresSemiBold,
     fontSize: 13,
     fontWeight: '600',
+    textTransform: 'uppercase',
     color: COLORS.NEUTRAL_7,
   },
   content: {
-    flex: 1,
+    height: 210,
+    flexDirection: 'row',
+    gap: SPACING[200],
   },
   loader: {
     flex: 1,