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

package/dist/typescript/module/features/fluency/visual-scaffolding/components/RelationalBlock.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { RelationalSpec } from '../types';
-import type { VisualColors } from './visualColors';
-type RelationalBlockProps = {
-    spec: RelationalSpec;
-    colors: VisualColors;
-};
-export declare const RelationalBlock: ({ spec, colors }: RelationalBlockProps) => React.JSX.Element;
-export {};
-//# sourceMappingURL=RelationalBlock.d.ts.map

package/dist/typescript/module/features/fluency/visual-scaffolding/components/RelationalBlock.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RelationalBlock.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/fluency/visual-scaffolding/components/RelationalBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAa,cAAc,EAAE,MAAM,UAAU,CAAA;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAElD,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,cAAc,CAAA;IACpB,MAAM,EAAE,YAAY,CAAA;CACrB,CAAA;AAGD,eAAO,MAAM,eAAe,qBAAsB,oBAAoB,sBAcrE,CAAA"}

package/dist/typescript/module/features/fluency/visual-scaffolding/components/visualColors.d.ts

@@ -1,16 +0,0 @@
-import type { Operation } from '../types';
-/**
- * Per-operation color set (spec §6):
- *   accent → dots / lines / fills
- *   bg     → the tinted visual-zone background (lightest tint)
- *   mid    → the "second" quantity (2nd addend, dashed group outline)
- *   dark   → small text labels (number-line tick/jump captions)
- */
-export type VisualColors = {
-    accent: string;
-    bg: string;
-    mid: string;
-    dark: string;
-};
-export declare const VISUAL_COLORS: Record<Operation, VisualColors>;
-//# sourceMappingURL=visualColors.d.ts.map

package/dist/typescript/module/features/fluency/visual-scaffolding/components/visualColors.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"visualColors.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/fluency/visual-scaffolding/components/visualColors.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEzC;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAA;IACd,EAAE,EAAE,MAAM,CAAA;IACV,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CA2BzD,CAAA"}

package/dist/typescript/module/features/fluency/visual-scaffolding/index.d.ts

@@ -1,6 +0,0 @@
-export * from './types';
-export { renderFact, hasVisual, levelForBox, TEN_FRAME_CAPACITY } from './renderFact';
-export { FactVisual } from './components/FactVisual';
-export { VISUAL_COLORS } from './components/visualColors';
-export { toFactPresentation } from './adapter';
-//# sourceMappingURL=index.d.ts.map

package/dist/typescript/module/features/fluency/visual-scaffolding/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/features/fluency/visual-scaffolding/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AACrF,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAA"}

package/dist/typescript/module/features/fluency/visual-scaffolding/renderFact.d.ts

@@ -1,23 +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 { FactPresentation, Level, VisualSpec } from './types';
-export declare const TEN_FRAME_CAPACITY = 10;
-/** box → level. Five boxes map one-to-one onto the five engine levels. */
-export declare function levelForBox(box: number): Level;
-/**
- * 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 declare function renderFact(p: FactPresentation): VisualSpec;
-/** Whether the fact has any visual scaffold at its current box (false at L4/L5). */
-export declare function hasVisual(p: FactPresentation): boolean;
-//# sourceMappingURL=renderFact.d.ts.map

package/dist/typescript/module/features/fluency/visual-scaffolding/renderFact.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"renderFact.d.ts","sourceRoot":"","sources":["../../../../../../src/features/fluency/visual-scaffolding/renderFact.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,EAEV,gBAAgB,EAGhB,KAAK,EAOL,UAAU,EACX,MAAM,SAAS,CAAA;AAEhB,eAAO,MAAM,kBAAkB,KAAK,CAAA;AAGpC,0EAA0E;AAC1E,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,CAa9C;AAgJD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,gBAAgB,GAAG,UAAU,CAsB1D;AAED,oFAAoF;AACpF,wBAAgB,SAAS,CAAC,CAAC,EAAE,gBAAgB,GAAG,OAAO,CAEtD"}

package/dist/typescript/module/features/fluency/visual-scaffolding/types.d.ts

@@ -1,103 +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;
-};
-/** A ten-frame token tone: first set, second set, or taken-away. */
-export type TokenTone = 'a' | 'b' | 'gone';
-export type GridLayout = {
-    type: 'tenframes';
-    a: number;
-    b: number;
-    capacity: number;
-} | {
-    type: 'tenframes_takeaway';
-    total: number;
-    removed: number;
-    capacity: number;
-} | {
-    type: 'array';
-    rows: number;
-    cols: number;
-} | {
-    type: 'groups';
-    groupCount: number;
-    perGroup: number;
-};
-export type GridSpec = BaseVisualSpec & {
-    kind: 'grid';
-    layout: GridLayout;
-};
-/** A node/dimension value, or null for the unknown (rendered as a placeholder). */
-export type NodeValue = number | null;
-export type RelationalModel = {
-    type: 'bond';
-    top: NodeValue;
-    bottomLeft: NodeValue;
-    bottomRight: NodeValue;
-} | {
-    type: 'area';
-    top: NodeValue;
-    side: NodeValue;
-    center: NodeValue;
-};
-export type RelationalSpec = BaseVisualSpec & {
-    kind: 'relational';
-    model: RelationalModel;
-};
-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;
-};
-/**
- * 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;
-};
-export type NoVisualSpec = BaseVisualSpec & {
-    kind: 'none';
-};
-/** Discriminated union the views switch on. */
-export type VisualSpec = GridSpec | RelationalSpec | LineSpec | BarSpec | NoVisualSpec;
-export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/typescript/module/features/fluency/visual-scaffolding/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/features/fluency/visual-scaffolding/types.ts"],"names":[],"mappings":"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"}

package/dist/typescript/module/features/fluency-teacher/assets/SortDefaultIcon.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { IconProps } from '@magmamath/react-native-ui';
-export declare const SortDefaultIcon: ({ color, size }: IconProps) => React.JSX.Element;
-//# sourceMappingURL=SortDefaultIcon.d.ts.map

package/dist/typescript/module/features/fluency-teacher/assets/SortDefaultIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SortDefaultIcon.d.ts","sourceRoot":"","sources":["../../../../../../src/features/fluency-teacher/assets/SortDefaultIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAU,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAE9D,eAAO,MAAM,eAAe,oBAA6C,SAAS,sBAKjF,CAAA"}

package/dist/typescript/module/features/fluency-teacher/components/drawer/DrawerMasteryLegend.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const DrawerMasteryLegend: () => React.JSX.Element;
-//# sourceMappingURL=DrawerMasteryLegend.d.ts.map

package/dist/typescript/module/features/fluency-teacher/components/drawer/DrawerMasteryLegend.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DrawerMasteryLegend.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/fluency-teacher/components/drawer/DrawerMasteryLegend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAmBzB,eAAO,MAAM,mBAAmB,yBAY/B,CAAA"}

package/dist/typescript/module/features/fluency-teacher/components/table/TableRowAverageProgress.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export type TableRowAverageProgressProps = {
-    percent: number;
-    label: string;
-};
-export declare const TableRowAverageProgress: ({ percent, label }: TableRowAverageProgressProps) => React.JSX.Element;
-//# sourceMappingURL=TableRowAverageProgress.d.ts.map

package/dist/typescript/module/features/fluency-teacher/components/table/TableRowAverageProgress.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableRowAverageProgress.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/fluency-teacher/components/table/TableRowAverageProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,MAAM,4BAA4B,GAAG;IACzC,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,uBAAuB,uBAAwB,4BAA4B,sBAYvF,CAAA"}

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

@@ -1,272 +0,0 @@
-import React, { useState } from 'react'
-import { View, Text, Pressable, ScrollView, StyleSheet } from 'react-native'
-import { BORDER_RADIUS, COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
-
-import { FluencyProvider } from '../context/FluencyContext'
-import type { FluencyModel } from '../model/FluencyModel'
-import { FluencyCardDeck } from './fluency-solving/components/FluencyCardDeck'
-import { useFluencyCardDeckAnimation } from '../hooks/useFluencyCardDeckAnimation'
-import { useSuccessSound } from '../hooks/useSuccessSound'
-import { AttemptStatus, FluencyMode } from '../shared/fluency.constants'
-import type { SolvingFact } from '../shared/fluencySolving.types'
-import { levelForBox, renderFact, VISUAL_COLORS } from '../visual-scaffolding'
-import type { FactPresentation, Operation } from '../visual-scaffolding'
-
-type OperationOption = { value: Operation; mode: FluencyMode; symbol: string; label: string }
-
-const OPERATIONS: OperationOption[] = [
-  { value: 'addition', mode: FluencyMode.ADDITION, symbol: '+', label: 'Addition' },
-  { value: 'subtraction', mode: FluencyMode.SUBTRACTION, symbol: '−', label: 'Subtraction' },
-  { value: 'multiplication', mode: FluencyMode.MULTIPLICATION, symbol: '×', label: 'Multiplication' },
-  { value: 'division', mode: FluencyMode.DIVISION, symbol: '÷', label: 'Division' },
-]
-
-const BOXES: FactPresentation['box'][] = [0, 1, 2, 3, 4]
-
-// Defaults per operation that exercise the more interesting layouts (ten-bridging
-// addition, regrouping subtraction, a clean array / grouping).
-const DEFAULT_OPERANDS: Record<Operation, [number, number]> = {
-  addition: [7, 8],
-  subtraction: [13, 5],
-  multiplication: [3, 4],
-  division: [12, 4],
-}
-
-const OPERAND_MIN = 0
-const OPERAND_MAX = 20
-
-const answerFor = (operation: Operation, left: number, right: number): number => {
-  switch (operation) {
-    case 'addition':
-      return left + right
-    case 'subtraction':
-      return left - right
-    case 'multiplication':
-      return left * right
-    case 'division':
-      return right > 0 ? Math.floor(left / right) : 0
-  }
-}
-
-type ChipProps = {
-  label: string
-  sublabel?: string
-  isActive: boolean
-  activeColor: string
-  onPress: () => void
-}
-
-const Chip = ({ label, sublabel, isActive, activeColor, onPress }: ChipProps) => (
-  <Pressable
-    onPress={onPress}
-    style={[styles.chip, isActive && { backgroundColor: activeColor, borderColor: activeColor }]}
-  >
-    <Text style={[styles.chipLabel, isActive && styles.chipLabelActive]}>{label}</Text>
-    {sublabel && <Text style={[styles.chipSub, isActive && styles.chipLabelActive]}>{sublabel}</Text>}
-  </Pressable>
-)
-
-type StepperProps = {
-  label: string
-  value: number
-  onChange: (next: number) => void
-}
-
-const Stepper = ({ label, value, onChange }: StepperProps) => {
-  const clamp = (n: number) => Math.max(OPERAND_MIN, Math.min(OPERAND_MAX, n))
-  return (
-    <View style={styles.stepper}>
-      <Text style={styles.stepperLabel}>{label}</Text>
-      <View style={styles.stepperRow}>
-        <Pressable style={styles.stepperBtn} onPress={() => onChange(clamp(value - 1))}>
-          <Text style={styles.stepperBtnText}>−</Text>
-        </Pressable>
-        <Text style={styles.stepperValue}>{value}</Text>
-        <Pressable style={styles.stepperBtn} onPress={() => onChange(clamp(value + 1))}>
-          <Text style={styles.stepperBtnText}>+</Text>
-        </Pressable>
-      </View>
-    </View>
-  )
-}
-
-type FluencyVisualPlaygroundProps = {
-  model: FluencyModel
-}
-
-export const FluencyVisualPlayground = ({ model }: FluencyVisualPlaygroundProps) => {
-  const [operation, setOperation] = useState<Operation>('addition')
-  const [box, setBox] = useState<FactPresentation['box']>(0)
-  const [left, setLeft] = useState(DEFAULT_OPERANDS.addition[0])
-  const [right, setRight] = useState(DEFAULT_OPERANDS.addition[1])
-
-  const deck = useFluencyCardDeckAnimation()
-  const successSound = useSuccessSound()
-
-  const selectOperation = (next: OperationOption) => {
-    setOperation(next.value)
-    const [l, r] = DEFAULT_OPERANDS[next.value]
-    setLeft(l)
-    setRight(r)
-  }
-
-  const mode = OPERATIONS.find((o) => o.value === operation)?.mode ?? FluencyMode.ADDITION
-  const fact: SolvingFact = {
-    id: 'playground',
-    mode,
-    numbers: [left, right],
-    answer: answerFor(operation, left, right),
-    difficulty: 0,
-    box,
-    lastSeenMs: null,
-    sessionStartBox: box,
-    hasFailedThisSession: false,
-    attemptsCount: 0,
-    correctCount: 0,
-  }
-  const spec = renderFact({ operation, left, right, box })
-  const accent = VISUAL_COLORS[operation].accent
-
-  const playOutcome = (isCorrect: boolean) => {
-    const started = deck.startCardExit({
-      // The exiting card shows the filled-in answer + the correct/incorrect label.
-      cardContent: { fact, answer: String(fact.answer) },
-      direction: isCorrect ? 'right' : 'left',
-      status: isCorrect ? AttemptStatus.CORRECT : AttemptStatus.INCORRECT,
-    })
-    if (started && isCorrect) successSound.play()
-  }
-
-  return (
-    <FluencyProvider value={{ model }}>
-      <ScrollView style={styles.screen} contentContainerStyle={styles.content}>
-        <Text style={styles.title}>Fluency Visual Playground</Text>
-        <Text style={styles.caption}>Real solving deck across operations and boxes 0–4 (L1–L5). Dev only.</Text>
-
-        <Text style={styles.sectionLabel}>Operation</Text>
-        <View style={styles.row}>
-          {OPERATIONS.map((op) => (
-            <Chip
-              key={op.value}
-              label={`${op.symbol} ${op.label}`}
-              isActive={op.value === operation}
-              activeColor={VISUAL_COLORS[op.value].accent}
-              onPress={() => selectOperation(op)}
-            />
-          ))}
-        </View>
-
-        <Text style={styles.sectionLabel}>Box → Level</Text>
-        <View style={styles.row}>
-          {BOXES.map((b) => (
-            <Chip
-              key={b}
-              label={`Box ${b}`}
-              sublabel={levelForBox(b)}
-              isActive={b === box}
-              activeColor={accent}
-              onPress={() => setBox(b)}
-            />
-          ))}
-        </View>
-
-        <View style={styles.row}>
-          <Stepper label="Left" value={left} onChange={setLeft} />
-          <Stepper label="Right" value={right} onChange={setRight} />
-        </View>
-
-        <View style={styles.deckWrapper}>
-          <FluencyCardDeck
-            currentCardContent={{ fact, answer: '' }}
-            exitingCardContent={deck.exitingCardContent}
-            exitingCardStatus={deck.exitingCardStatus}
-            snapStyles={deck.snapStyles}
-            onAnswerChange={() => undefined}
-          />
-        </View>
-
-        <View style={styles.row}>
-          <Pressable
-            style={[styles.outcomeBtn, { backgroundColor: COLORS.PRIMARY_RED }]}
-            onPress={() => playOutcome(false)}
-          >
-            <Text style={styles.outcomeText}>▶ Incorrect</Text>
-          </Pressable>
-          <Pressable
-            style={[styles.outcomeBtn, { backgroundColor: COLORS.PRIMARY_GREEN }]}
-            onPress={() => playOutcome(true)}
-          >
-            <Text style={styles.outcomeText}>▶ Correct</Text>
-          </Pressable>
-        </View>
-
-        <Text style={styles.sectionLabel}>Spec ({spec.kind})</Text>
-        <View style={styles.specBox}>
-          <Text style={styles.specText}>{JSON.stringify(spec, null, 2)}</Text>
-        </View>
-      </ScrollView>
-    </FluencyProvider>
-  )
-}
-
-const styles = StyleSheet.create({
-  screen: { flex: 1, backgroundColor: COLORS.NEUTRAL_3 },
-  content: { padding: SPACING[400], gap: SPACING[300], maxWidth: 640, alignSelf: 'center', width: '100%' },
-  title: { fontSize: 22, fontWeight: '700', color: COLORS.NEUTRAL_10, fontFamily: FONT_FAMILY.buenosAires },
-  caption: { fontSize: 13, color: COLORS.NEUTRAL_7, fontFamily: FONT_FAMILY.buenosAires },
-  sectionLabel: {
-    fontSize: 12,
-    fontWeight: '700',
-    color: COLORS.NEUTRAL_7,
-    textTransform: 'uppercase',
-    marginTop: SPACING[200],
-    fontFamily: FONT_FAMILY.buenosAires,
-  },
-  row: { flexDirection: 'row', flexWrap: 'wrap', gap: SPACING[200] },
-  chip: {
-    paddingVertical: SPACING[150],
-    paddingHorizontal: SPACING[300],
-    borderRadius: BORDER_RADIUS[200],
-    borderWidth: 1,
-    borderColor: COLORS.NEUTRAL_4,
-    backgroundColor: COLORS.NEUTRAL_1,
-    alignItems: 'center',
-  },
-  chipLabel: { fontSize: 14, fontWeight: '600', color: COLORS.NEUTRAL_10, fontFamily: FONT_FAMILY.buenosAires },
-  chipSub: { fontSize: 11, color: COLORS.NEUTRAL_7, fontFamily: FONT_FAMILY.buenosAires },
-  chipLabelActive: { color: COLORS.NEUTRAL_1 },
-  stepper: { flex: 1, gap: SPACING[100] },
-  stepperLabel: { fontSize: 12, fontWeight: '700', color: COLORS.NEUTRAL_7, fontFamily: FONT_FAMILY.buenosAires },
-  stepperRow: { flexDirection: 'row', alignItems: 'center', gap: SPACING[200] },
-  stepperBtn: {
-    width: 36,
-    height: 36,
-    borderRadius: BORDER_RADIUS[200],
-    backgroundColor: COLORS.NEUTRAL_1,
-    borderWidth: 1,
-    borderColor: COLORS.NEUTRAL_4,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  stepperBtnText: { fontSize: 20, fontWeight: '700', color: COLORS.NEUTRAL_10 },
-  stepperValue: {
-    minWidth: 32,
-    textAlign: 'center',
-    fontSize: 18,
-    fontWeight: '700',
-    color: COLORS.NEUTRAL_10,
-    fontFamily: FONT_FAMILY.buenosAires,
-  },
-  // FluencyCardDeck positions backing cards with absolute top offsets up to ~36px;
-  // the vertical padding gives them room and matches FluencySolvingCard's wrapper.
-  deckWrapper: { alignItems: 'center', paddingVertical: SPACING[400] },
-  outcomeBtn: {
-    flex: 1,
-    paddingVertical: SPACING[300],
-    borderRadius: BORDER_RADIUS[200],
-    alignItems: 'center',
-  },
-  outcomeText: { fontSize: 15, fontWeight: '700', color: COLORS.NEUTRAL_1, fontFamily: FONT_FAMILY.buenosAires },
-  specBox: { backgroundColor: COLORS.NEUTRAL_10, borderRadius: BORDER_RADIUS[200], padding: SPACING[300] },
-  specText: { fontSize: 12, color: COLORS.GREEN_3, fontFamily: 'monospace' },
-})

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

@@ -1,40 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import { useUnit } from 'effector-react'
-import { BORDER_RADIUS, COLORS, FONT_FAMILY, SPACING, Typography } from '@magmamath/react-native-ui'
-
-import { useFluency } from '../../../context/FluencyContext'
-import { levelForBox } from '../../../visual-scaffolding'
-
-// Debug-only overlay: shows the current fact's box + derived mastery level in
-// the bottom-right corner, to make the visual-scaffold fade easy to verify.
-export const DebugBoxIndicator = () => {
-  const current = useUnit(useFluency().model.solving.$current)
-
-  if (!current) return null
-
-  return (
-    <View style={styles.badge} pointerEvents="none">
-      <Typography style={styles.text}>{`box ${current.box} · ${levelForBox(current.box)}`}</Typography>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  badge: {
-    position: 'absolute',
-    right: SPACING[400],
-    bottom: SPACING[400],
-    paddingVertical: SPACING[100],
-    paddingHorizontal: SPACING[300],
-    borderRadius: BORDER_RADIUS[200],
-    backgroundColor: COLORS.NEUTRAL_10,
-    opacity: 0.7,
-  },
-  text: {
-    fontSize: 12,
-    fontWeight: '700',
-    color: COLORS.NEUTRAL_1,
-    fontFamily: FONT_FAMILY.buenosAires,
-  },
-})

package/src/features/fluency/visual-scaffolding/__tests__/__snapshots__/renderFact.test.ts.snap

@@ -1,64 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`L1 — DiscreteCounterGrid (box 0) addition 6 + 9 → two ten-frames, a tone-A + b tone-B 1`] = `
-{
-  "kind": "grid",
-  "layout": {
-    "a": 6,
-    "b": 9,
-    "capacity": 10,
-    "type": "tenframes",
-  },
-  "left": 6,
-  "level": "L1",
-  "operation": "addition",
-  "right": 9,
-}
-`;
-
-exports[`L2 — RelationalBlock (box 1) addition → bond with empty sum (top) node 1`] = `
-{
-  "kind": "relational",
-  "left": 6,
-  "level": "L2",
-  "model": {
-    "bottomLeft": 6,
-    "bottomRight": 9,
-    "top": null,
-    "type": "bond",
-  },
-  "operation": "addition",
-  "right": 9,
-}
-`;
-
-exports[`L3 — DynamicNumberLine (box 2) addition 7 + 6 → bridges 10 (7→10→13), end tick hidden 1`] = `
-{
-  "hi": 13,
-  "hiddenTick": 13,
-  "jumps": [
-    {
-      "from": 7,
-      "label": "+3",
-      "to": 10,
-    },
-    {
-      "from": 10,
-      "label": "+3",
-      "to": 13,
-    },
-  ],
-  "kind": "line",
-  "left": 7,
-  "level": "L3",
-  "lo": 0,
-  "operation": "addition",
-  "right": 6,
-  "ticks": [
-    0,
-    7,
-    10,
-    13,
-  ],
-}
-`;