@magmamath/students-features 1.8.1-rc.0 → 1.8.1

package/src/features/fluency/visual-scaffolding/renderFact.ts

@@ -1,219 +0,0 @@
-/**
- * Pure renderer core for the Unified Math Fact Fluency Visual Engine.
- *
- *   box        → level            (levelForBox)
- *   level      → component         (L1 grid, L2 relational, L3 line, L4/L5 none)
- *   operation  → component variant + layout data
- *
- * Everything is derived; nothing is persisted. `renderFact` is pure so it can
- * be snapshot-tested in isolation from React.
- */
-import type {
-  BarSpec,
-  FactPresentation,
-  GridLayout,
-  GridSpec,
-  Level,
-  LineJump,
-  LineSpec,
-  NoVisualSpec,
-  Operation,
-  RelationalModel,
-  RelationalSpec,
-  VisualSpec,
-} from './types'
-
-export const TEN_FRAME_CAPACITY = 10
-const MINUS = '−' // U+2212
-
-/** box → level. Five boxes map one-to-one onto the five engine levels. */
-export function levelForBox(box: number): Level {
-  switch (box) {
-    case 0:
-      return 'L1'
-    case 1:
-      return 'L2'
-    case 2:
-      return 'L3'
-    case 3:
-      return 'L4'
-    default:
-      return 'L5'
-  }
-}
-
-/** Coerce to a safe non-negative integer for layout math. */
-const toCount = (n: number): number => (Number.isFinite(n) && n > 0 ? Math.floor(n) : 0)
-
-/** Multiples of ten strictly between `lo` and `hi`, ascending. */
-const tensBetween = (lo: number, hi: number): number[] => {
-  const out: number[] = []
-  for (let t = Math.floor(lo / TEN_FRAME_CAPACITY) * TEN_FRAME_CAPACITY + TEN_FRAME_CAPACITY; t < hi; t += TEN_FRAME_CAPACITY) {
-    out.push(t)
-  }
-  return out
-}
-
-/** Consecutive [from, to] pairs over a list of stops. */
-const pairs = (xs: number[]): Array<[number, number]> => xs.slice(1).map((x, i) => [xs[i], x])
-
-const uniqueAsc = (xs: number[]): number[] => [...new Set(xs)].sort((x, y) => x - y)
-
-type BaseFields = { operation: Operation; left: number; right: number; level: Level }
-
-// ── L1: DiscreteCounterGrid ─────────────────────────────────────────────────
-
-function buildGrid(operation: Operation, left: number, right: number, base: BaseFields): GridSpec {
-  const a = toCount(left)
-  const b = toCount(right)
-
-  const layout = ((): GridLayout => {
-    switch (operation) {
-      case 'addition':
-        return { type: 'tenframes', a, b, capacity: TEN_FRAME_CAPACITY }
-      case 'subtraction':
-        return {
-          type: 'tenframes_takeaway',
-          total: a,
-          removed: Math.min(b, a),
-          capacity: TEN_FRAME_CAPACITY,
-        }
-      case 'multiplication':
-        // 3×4 shown as 3 groups of 4 (first factor = number of groups), mirroring
-        // the division grouping so multiplication also reads as equal groups.
-        return { type: 'groups', groupCount: a, perGroup: b }
-      case 'division':
-        // 12 ÷ 4 → 3 clusters of 4: quotient groups, each holding the divisor.
-        return { type: 'groups', groupCount: b > 0 ? Math.floor(a / b) : 0, perGroup: b }
-    }
-  })()
-
-  return { ...base, kind: 'grid', layout }
-}
-
-// ── L2: RelationalBlock ─────────────────────────────────────────────────────
-
-function buildRelational(
-  operation: Operation,
-  left: number,
-  right: number,
-  base: BaseFields,
-): RelationalSpec {
-  const model = ((): RelationalModel => {
-    switch (operation) {
-      case 'addition':
-        // whole (sum) unknown on top; addends below.
-        return { type: 'bond', top: null, bottomLeft: left, bottomRight: right }
-      case 'subtraction':
-        // minuend whole on top; one part (the difference) unknown.
-        return { type: 'bond', top: left, bottomLeft: right, bottomRight: null }
-      case 'multiplication':
-        // both dimensions known; product (center) unknown. First factor is the
-        // number of rows (vertical side) to match the L1 array — "3×4" = 3 rows
-        // of 4, so left drives height (side), right drives width (top).
-        return { type: 'area', top: right, side: left, center: null }
-      case 'division':
-        // dividend (product) and divisor known; missing side dimension.
-        return { type: 'area', top: right, side: null, center: left }
-    }
-  })()
-
-  return { ...base, kind: 'relational', model }
-}
-
-// ── L3: DynamicNumberLine — add/sub bridge through every ten; mult skip-counts ─
-
-function buildLine(
-  operation: Exclude<Operation, 'division'>,
-  left: number,
-  right: number,
-  base: BaseFields,
-): LineSpec {
-  const a = toCount(left)
-  const b = toCount(right)
-
-  if (operation === 'addition') {
-    const sum = a + b
-    // Bridge through EVERY ten: 8 + 15 → 8→10→20→23 (make-a-ten, repeated).
-    const stops = [a, ...tensBetween(a, sum), sum]
-    const jumps: LineJump[] = pairs(stops).map(([from, to]) => ({
-      from,
-      to,
-      label: `+${to - from}`,
-    }))
-    const ticks = uniqueAsc([0, ...stops])
-    return { ...base, kind: 'line', lo: 0, hi: sum, ticks, jumps, hiddenTick: sum }
-  }
-
-  if (operation === 'subtraction') {
-    const diff = a - b
-    // Step back through every ten: 23 − 15 → 23→20→10→8.
-    const stopsDesc = [a, ...tensBetween(diff, a).reverse(), diff]
-    const jumps: LineJump[] = pairs(stopsDesc).map(([from, to]) => ({
-      from,
-      to,
-      label: `${MINUS}${from - to}`,
-    }))
-    const ticks = uniqueAsc([diff, ...tensBetween(diff, a), a])
-    return { ...base, kind: 'line', lo: diff, hi: a, ticks, jumps, hiddenTick: diff }
-  }
-
-  // multiplication: skip-count — a hops of b up to the product.
-  const total = a * b
-  const jumps: LineJump[] = Array.from({ length: a }, (_, i) => ({
-    from: i * b,
-    to: (i + 1) * b,
-    label: `+${b}`,
-  }))
-  const ticks = Array.from({ length: a + 1 }, (_, i) => i * b)
-  return { ...base, kind: 'line', lo: 0, hi: total, ticks, jumps, hiddenTick: total }
-}
-
-// ── L2 (division): QuotativeBars ─────────────────────────────────────────────
-
-// Quotative division: the dividend as a bar split into equal groups of the
-// divisor; the count of groups (quotient) is the answer the student reads off.
-function buildBars(left: number, right: number, base: BaseFields): BarSpec {
-  const total = toCount(left)
-  const segment = toCount(right)
-  const segmentCount = segment > 0 ? Math.floor(total / segment) : 0
-  return { ...base, kind: 'bars', total, segment, segmentCount }
-}
-
-function buildNone(base: BaseFields): NoVisualSpec {
-  return { ...base, kind: 'none' }
-}
-
-/**
- * Single entry point the card calls. Returns the visual spec for the current
- * fact at its current box. The symbolic equation is rendered separately and is
- * always present.
- */
-export function renderFact(p: FactPresentation): VisualSpec {
-  const level = levelForBox(p.box)
-  const base: BaseFields = { operation: p.operation, left: p.left, right: p.right, level }
-
-  switch (level) {
-    case 'L1':
-      return buildGrid(p.operation, p.left, p.right, base)
-    case 'L2':
-      // Division → concrete quotative bar; multiplication → number line
-      // (skip-count); addition/subtraction → number bond.
-      if (p.operation === 'division') return buildBars(p.left, p.right, base)
-      if (p.operation === 'multiplication') return buildLine(p.operation, p.left, p.right, base)
-      return buildRelational(p.operation, p.left, p.right, base)
-    case 'L3':
-      // Addition/subtraction → number line; multiplication/division → area model.
-      if (p.operation === 'addition' || p.operation === 'subtraction')
-        return buildLine(p.operation, p.left, p.right, base)
-      return buildRelational(p.operation, p.left, p.right, base)
-    case 'L4':
-    case 'L5':
-      return buildNone(base)
-  }
-}
-
-/** Whether the fact has any visual scaffold at its current box (false at L4/L5). */
-export function hasVisual(p: FactPresentation): boolean {
-  return renderFact(p).kind !== 'none'
-}

package/src/features/fluency/visual-scaffolding/types.ts

@@ -1,108 +0,0 @@
-/**
- * Unified Math Fact Fluency Visual Engine — pure data contract.
- *
- * Three polymorphic components render the visual scaffold, chosen by the
- * student's level (derived from the Leitner box). Each component mutates by
- * operation. These types describe *what to draw* — never pixels — so the same
- * spec drives the real RN UI and the snapshot test harness.
- *
- *   L1 → DiscreteCounterGrid   (discrete quantities)
- *   L2 → RelationalBlock       (part-whole structures)
- *   L3 → DynamicNumberLine     (forward jumps)
- *   L4 → PureEquationText      (plain text; hint deferred)
- *   L5 → PureEquationText      (plain text only)
- */
-
-export type Operation = 'addition' | 'subtraction' | 'multiplication' | 'division'
-
-export type Level = 'L1' | 'L2' | 'L3' | 'L4' | 'L5'
-
-/** Operands in the ORDER presented to the student (already direction-resolved). */
-export type FactPresentation = {
-  operation: Operation
-  left: number
-  right: number
-  box: 0 | 1 | 2 | 3 | 4
-}
-
-type BaseVisualSpec = {
-  operation: Operation
-  left: number
-  right: number
-  level: Level
-}
-
-// ── L1: DiscreteCounterGrid ─────────────────────────────────────────────────
-
-/** A ten-frame token tone: first set, second set, or taken-away. */
-export type TokenTone = 'a' | 'b' | 'gone'
-
-export type GridLayout =
-  // Addition: two ten-frames, `a` tone-A tokens + `b` tone-B tokens.
-  | { type: 'tenframes'; a: number; b: number; capacity: number }
-  // Subtraction: fill `total` tokens across two ten-frames, strike the last `removed`.
-  | { type: 'tenframes_takeaway'; total: number; removed: number; capacity: number }
-  // Multiplication: a `rows` × `cols` dot array.
-  | { type: 'array'; rows: number; cols: number }
-  // Division: `groupCount` bordered clusters, each holding `perGroup` tokens.
-  | { type: 'groups'; groupCount: number; perGroup: number }
-
-export type GridSpec = BaseVisualSpec & {
-  kind: 'grid'
-  layout: GridLayout
-}
-
-// ── L2: RelationalBlock ─────────────────────────────────────────────────────
-
-/** A node/dimension value, or null for the unknown (rendered as a placeholder). */
-export type NodeValue = number | null
-
-export type RelationalModel =
-  // Number bond (add/sub): whole on top, two parts below.
-  | { type: 'bond'; top: NodeValue; bottomLeft: NodeValue; bottomRight: NodeValue }
-  // Area model (mult/div): top + left dimensions, product inside.
-  | { type: 'area'; top: NodeValue; side: NodeValue; center: NodeValue }
-
-export type RelationalSpec = BaseVisualSpec & {
-  kind: 'relational'
-  model: RelationalModel
-}
-
-// ── L3: DynamicNumberLine ───────────────────────────────────────────────────
-
-export type LineJump = {
-  from: number
-  to: number
-  label: string
-}
-
-export type LineSpec = BaseVisualSpec & {
-  kind: 'line'
-  lo: number
-  hi: number
-  ticks: number[]
-  jumps: LineJump[]
-  /** Tick value whose label is masked as "?" (the answer), or null to label all. */
-  hiddenTick: number | null
-}
-
-// ── L2 (division): QuotativeBars ─────────────────────────────────────────────
-
-/**
- * Quotative ("measurement") division: the dividend laid out as a bar cut into
- * equal segments of `segment` (the divisor); the student counts the segments,
- * and that count (`segmentCount`, the quotient) is the answer.
- */
-export type BarSpec = BaseVisualSpec & {
-  kind: 'bars'
-  total: number
-  segment: number
-  segmentCount: number
-}
-
-// ── L4 / L5: no visual ──────────────────────────────────────────────────────
-
-export type NoVisualSpec = BaseVisualSpec & { kind: 'none' }
-
-/** Discriminated union the views switch on. */
-export type VisualSpec = GridSpec | RelationalSpec | LineSpec | BarSpec | NoVisualSpec

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

@@ -1,10 +0,0 @@
-import React from 'react'
-import Svg, { Path } from 'react-native-svg'
-import { COLORS, IconProps } from '@magmamath/react-native-ui'
-
-export const SortDefaultIcon = ({ color = COLORS.NEUTRAL_9, size = 10 }: IconProps) => (
-  <Svg width={size} height={size} viewBox="0 0 10 10" fill="none">
-    <Path d="M5 1 L8 4 H2 Z" fill={color} />
-    <Path d="M5 9 L2 6 H8 Z" fill={color} />
-  </Svg>
-)

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

@@ -1,63 +0,0 @@
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import { COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
-import { useText } from '../../../../i18n/i18n'
-import type { TranslationKey } from '../../../../i18n/i18n'
-
-type MasteryLevelConfig = {
-  labelKey: TranslationKey
-  color: string
-}
-
-const MASTERY_LEVEL_CONFIG: MasteryLevelConfig[] = [
-  { labelKey: 'student.fluency.notStarted', color: COLORS.NEUTRAL_3 },
-  { labelKey: 'student.fluency.masteryLearning', color: COLORS.GREEN_2 },
-  { labelKey: 'student.fluency.masteryGrowing', color: COLORS.GREEN_3 },
-  { labelKey: 'student.fluency.masteryStrong', color: COLORS.GREEN_4 },
-  { labelKey: 'student.fluency.masteryMastered', color: COLORS.GREEN_7 },
-]
-
-export const DrawerMasteryLegend = () => {
-  const t = useText()
-  return (
-    <View style={styles.container}>
-      {MASTERY_LEVEL_CONFIG.map(({ labelKey, color }) => (
-        <View key={labelKey} style={styles.item}>
-          <View style={[styles.swatch, { backgroundColor: color }]} />
-          <Text style={styles.label}>{t(labelKey)}</Text>
-        </View>
-      ))}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[300],
-    paddingVertical: SPACING[150],
-    paddingHorizontal: SPACING[300],
-    borderRadius: 999,
-    backgroundColor: COLORS.NEUTRAL_1,
-    borderWidth: 1,
-    borderColor: COLORS.NEUTRAL_4,
-    alignSelf: 'center',
-  },
-  item: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[150],
-  },
-  swatch: {
-    width: 14,
-    height: 14,
-    borderRadius: 4,
-  },
-  label: {
-    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
-    fontSize: 12,
-    fontWeight: '600',
-    color: COLORS.NEUTRAL_8,
-  },
-})

package/src/features/fluency-teacher/components/table/TableRowAverageProgress.tsx

@@ -1,65 +0,0 @@
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import {
-  COLORS,
-  FONT_FAMILY,
-  HeadingVariants,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-
-export type TableRowAverageProgressProps = {
-  percent: number
-  label: string
-}
-
-export const TableRowAverageProgress = ({ percent, label }: TableRowAverageProgressProps) => (
-  <View style={styles.progressTrack}>
-    <View style={[styles.progressFill, { width: `${percent}%` }]} />
-    <View style={styles.progressOverlay}>
-      <Typography variant={HeadingVariants.H9} style={styles.progressPercent}>
-        {percent}%
-      </Typography>
-      <Text style={styles.progressLabel} numberOfLines={1}>
-        {label}
-      </Text>
-    </View>
-  </View>
-)
-
-const styles = StyleSheet.create({
-  progressTrack: {
-    height: 16,
-    borderRadius: 36,
-    backgroundColor: COLORS.NEUTRAL_3,
-    overflow: 'hidden',
-  },
-  progressFill: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    borderRadius: 36,
-    backgroundColor: COLORS.YELLOW_4,
-  },
-  progressOverlay: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: SPACING[200],
-  },
-  progressPercent: {
-    color: COLORS.NEUTRAL_9,
-  },
-  progressLabel: {
-    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
-    fontSize: 10,
-    color: COLORS.NEUTRAL_9,
-    textTransform: 'uppercase',
-  },
-})