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

package/dist/module/features/fluency/visual-scaffolding/adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FluencyMode","MODE_TO_OPERATION","ADDITION","SUBTRACTION","MULTIPLICATION","DIVISION","clampBox","box","clamped","Math","max","min","round","toFactPresentation","fact","left","right","numbers","operation","mode"],"sourceRoot":"../../../../../src","sources":["features/fluency/visual-scaffolding/adapter.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,WAAW,QAAQ,gCAA6B;AAIzD,MAAMC,iBAAiD,GAAG;EACxD,CAACD,WAAW,CAACE,QAAQ,GAAG,UAAU;EAClC,CAACF,WAAW,CAACG,WAAW,GAAG,aAAa;EACxC,CAACH,WAAW,CAACI,cAAc,GAAG,gBAAgB;EAC9C,CAACJ,WAAW,CAACK,QAAQ,GAAG;AAC1B,CAAC;AAED,MAAMC,QAAQ,GAAIC,GAAW,IAA8B;EACzD,MAAMC,OAAO,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEF,IAAI,CAACG,KAAK,CAACL,GAAG,CAAC,CAAC,CAAC;EACzD,OAAOC,OAAO;AAChB,CAAC;AAED,OAAO,SAASK,kBAAkBA,CAACC,IAAiB,EAAoB;EACtE,MAAM,CAACC,IAAI,EAAEC,KAAK,CAAC,GAAGF,IAAI,CAACG,OAAO;EAClC,OAAO;IACLC,SAAS,EAAEjB,iBAAiB,CAACa,IAAI,CAACK,IAAI,CAAC;IACvCJ,IAAI;IACJC,KAAK;IACLT,GAAG,EAAED,QAAQ,CAACQ,IAAI,CAACP,GAAG;EACxB,CAAC;AACH","ignoreList":[]}

package/dist/module/features/fluency/visual-scaffolding/components/DiscreteCounterGrid.js

@@ -0,0 +1,225 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { COLORS, SPACING, BORDER_RADIUS } from '@magmamath/react-native-ui';
+import { Dot } from "./Dot.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CELL_SIZE = 24;
+const CELL_GAP = 4;
+const FRAME_COLUMNS = 5;
+const TOKEN_SIZE = 14;
+const GROUP_COLUMNS = 5;
+const GROUP_PADDING = SPACING[200];
+const GROUP_BORDER = 2;
+// Wide enough to fit GROUP_COLUMNS dots per row (incl. padding + border, border-box),
+// so a group of five fills one row like the ten-frame instead of wrapping at four.
+const GROUP_MAX_WIDTH = GROUP_COLUMNS * (TOKEN_SIZE + CELL_GAP) + 2 * GROUP_PADDING + 2 * GROUP_BORDER;
+// Max groups per row; groups are split into balanced rows (10 → 5+5, 20 → 5×4).
+const GROUPS_PER_ROW_MAX = 5;
+
+// Budget the grid is allowed to occupy in the visual zone; bigger facts (e.g.
+// 9 × 9 → many groups) are scaled down uniformly to fit rather than overflowing.
+const FIT_W = 500;
+const FIT_H = 92;
+// L1 — renders absolute, discrete quantities to build a conceptual baseline.
+export const DiscreteCounterGrid = ({
+  spec,
+  colors
+}) => {
+  const {
+    layout
+  } = spec;
+  const [size, setSize] = useState(null);
+  const measure = event => {
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    setSize(prev => prev?.width === width && prev?.height === height ? prev : {
+      width,
+      height
+    });
+  };
+
+  // Shrink only when the natural size exceeds the budget; otherwise render 1:1.
+  const scale = size && size.width > 0 && size.height > 0 ? Math.min(1, FIT_W / size.width, FIT_H / size.height) : 1;
+  const content = (() => {
+    switch (layout.type) {
+      case 'tenframes':
+        {
+          // Pour `a` tone-A tokens then `b` tone-B tokens into the frame, filling it
+          // up; a second frame appears only once the sum spills past ten.
+          const total = layout.a + layout.b;
+          const frameCount = total > layout.capacity ? 2 : 1;
+          const cells = Array.from({
+            length: layout.capacity * frameCount
+          }, (_, i) => {
+            if (i < layout.a) return 'a';
+            if (i < total) return 'b';
+            return null;
+          });
+          return /*#__PURE__*/_jsx(View, {
+            style: styles.frameRow,
+            children: Array.from({
+              length: frameCount
+            }, (_, f) => /*#__PURE__*/_jsx(TenFrame, {
+              tones: cells.slice(f * layout.capacity, (f + 1) * layout.capacity),
+              colors: colors
+            }, f))
+          });
+        }
+      case 'tenframes_takeaway':
+        {
+          // Fill `total` tokens (striking the last `removed`); a second frame shows
+          // only when the minuend spills past ten, matching the addition frames.
+          const frameCount = layout.total > layout.capacity ? 2 : 1;
+          const cells = Array.from({
+            length: layout.capacity * frameCount
+          }, (_, i) => {
+            if (i >= layout.total) return null;
+            return i >= layout.total - layout.removed ? 'gone' : 'a';
+          });
+          return /*#__PURE__*/_jsx(View, {
+            style: styles.frameRow,
+            children: Array.from({
+              length: frameCount
+            }, (_, f) => /*#__PURE__*/_jsx(TenFrame, {
+              tones: cells.slice(f * layout.capacity, (f + 1) * layout.capacity),
+              colors: colors
+            }, f))
+          });
+        }
+      case 'array':
+        return /*#__PURE__*/_jsx(View, {
+          style: styles.array,
+          children: Array.from({
+            length: layout.rows
+          }, (_, r) => /*#__PURE__*/_jsx(View, {
+            style: styles.arrayRow,
+            children: Array.from({
+              length: layout.cols
+            }, (_, c) => /*#__PURE__*/_jsx(Dot, {
+              color: colors.accent,
+              size: TOKEN_SIZE
+            }, c))
+          }, r))
+        });
+      case 'groups':
+        {
+          const rowCount = Math.max(1, Math.ceil(layout.groupCount / GROUPS_PER_ROW_MAX));
+          const perRow = Math.ceil(layout.groupCount / rowCount);
+          return /*#__PURE__*/_jsx(View, {
+            style: styles.groupGrid,
+            children: Array.from({
+              length: rowCount
+            }, (_, r) => /*#__PURE__*/_jsx(View, {
+              style: styles.groupRow,
+              children: Array.from({
+                length: Math.min(perRow, layout.groupCount - r * perRow)
+              }, (_, g) => /*#__PURE__*/_jsx(View, {
+                style: [styles.group, {
+                  borderColor: colors.mid
+                }],
+                children: Array.from({
+                  length: layout.perGroup
+                }, (_, d) => /*#__PURE__*/_jsx(Dot, {
+                  color: colors.accent,
+                  size: TOKEN_SIZE
+                }, d))
+              }, g))
+            }, r))
+          });
+        }
+    }
+  })();
+  return /*#__PURE__*/_jsx(View, {
+    onLayout: measure,
+    style: [styles.fit, {
+      transform: [{
+        scale
+      }]
+    }],
+    children: content
+  });
+};
+const TONE_COLOR = (tone, colors) => tone === 'a' ? colors.accent : colors.mid;
+const TenFrame = ({
+  tones,
+  colors
+}) => {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.frame,
+    children: tones.map((tone, i) => /*#__PURE__*/_jsxs(View, {
+      style: styles.cell,
+      children: [tone === 'gone' && /*#__PURE__*/_jsx(Dot, {
+        color: colors.accent,
+        strike: true,
+        size: TOKEN_SIZE
+      }), (tone === 'a' || tone === 'b') && /*#__PURE__*/_jsx(Dot, {
+        color: TONE_COLOR(tone, colors),
+        size: TOKEN_SIZE
+      })]
+    }, i))
+  });
+};
+const styles = StyleSheet.create({
+  // Measures its natural size; transform-scales down to the budget if it overflows.
+  fit: {
+    alignItems: 'center'
+  },
+  groupGrid: {
+    gap: SPACING[200],
+    alignItems: 'center'
+  },
+  frameRow: {
+    flexDirection: 'row',
+    gap: SPACING[300],
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    justifyContent: 'center'
+  },
+  frame: {
+    width: FRAME_COLUMNS * CELL_SIZE + (FRAME_COLUMNS - 1) * CELL_GAP,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: CELL_GAP
+  },
+  cell: {
+    width: CELL_SIZE,
+    height: CELL_SIZE,
+    borderRadius: 4,
+    borderWidth: 1.5,
+    borderColor: COLORS.NEUTRAL_5,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  array: {
+    gap: CELL_GAP + 2,
+    alignItems: 'center'
+  },
+  arrayRow: {
+    flexDirection: 'row',
+    gap: CELL_GAP + 2
+  },
+  groupRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: SPACING[200],
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  group: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    // Shrink to fit the dots it holds (a single dot gets a small box); cap at
+    // five columns so larger groups wrap instead of stretching.
+    maxWidth: GROUP_MAX_WIDTH,
+    gap: CELL_GAP,
+    padding: GROUP_PADDING,
+    borderWidth: GROUP_BORDER,
+    borderRadius: BORDER_RADIUS[200],
+    backgroundColor: COLORS.NEUTRAL_2
+  }
+});
+//# sourceMappingURL=DiscreteCounterGrid.js.map

package/dist/module/features/fluency/visual-scaffolding/components/DiscreteCounterGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","View","StyleSheet","COLORS","SPACING","BORDER_RADIUS","Dot","jsx","_jsx","jsxs","_jsxs","CELL_SIZE","CELL_GAP","FRAME_COLUMNS","TOKEN_SIZE","GROUP_COLUMNS","GROUP_PADDING","GROUP_BORDER","GROUP_MAX_WIDTH","GROUPS_PER_ROW_MAX","FIT_W","FIT_H","DiscreteCounterGrid","spec","colors","layout","size","setSize","measure","event","width","height","nativeEvent","prev","scale","Math","min","content","type","total","a","b","frameCount","capacity","cells","Array","from","length","_","i","style","styles","frameRow","children","f","TenFrame","tones","slice","removed","array","rows","r","arrayRow","cols","c","color","accent","rowCount","max","ceil","groupCount","perRow","groupGrid","groupRow","g","group","borderColor","mid","perGroup","d","onLayout","fit","transform","TONE_COLOR","tone","frame","map","cell","strike","create","alignItems","gap","flexDirection","flexWrap","justifyContent","borderRadius","borderWidth","NEUTRAL_5","maxWidth","padding","backgroundColor","NEUTRAL_2"],"sourceRoot":"../../../../../../src","sources":["features/fluency/visual-scaffolding/components/DiscreteCounterGrid.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/features/fluency/visual-scaffolding/components/Dot.js

@@ -0,0 +1,45 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { COLORS } from '@magmamath/react-native-ui';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DOT_SIZE = 12;
+// Shared quantity primitive: a filled circle.
+export const Dot = ({
+  color,
+  strike = false,
+  size = DOT_SIZE
+}) => {
+  const circle = {
+    width: size,
+    height: size,
+    borderRadius: size / 2
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: [circle, {
+      backgroundColor: color
+    }],
+    children: strike && /*#__PURE__*/_jsx(View, {
+      style: styles.strike
+    })
+  });
+};
+const styles = StyleSheet.create({
+  strike: {
+    position: 'absolute',
+    top: '50%',
+    left: '-15%',
+    width: '130%',
+    height: 2,
+    marginTop: -1,
+    // pull up half the height so the bar is centered, not top-aligned
+    borderRadius: 1,
+    // round the stroke ends
+    backgroundColor: COLORS.NEUTRAL_10,
+    transform: [{
+      rotate: '-45deg'
+    }]
+  }
+});
+//# sourceMappingURL=Dot.js.map

package/dist/module/features/fluency/visual-scaffolding/components/Dot.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","COLORS","jsx","_jsx","DOT_SIZE","Dot","color","strike","size","circle","width","height","borderRadius","style","backgroundColor","children","styles","create","position","top","left","marginTop","NEUTRAL_10","transform","rotate"],"sourceRoot":"../../../../../../src","sources":["features/fluency/visual-scaffolding/components/Dot.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SAASC,MAAM,QAAQ,4BAA4B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEnD,OAAO,MAAMC,QAAQ,GAAG,EAAE;AAS1B;AACA,OAAO,MAAMC,GAAG,GAAGA,CAAC;EAAEC,KAAK;EAAEC,MAAM,GAAG,KAAK;EAAEC,IAAI,GAAGJ;AAAmB,CAAC,KAAK;EAC3E,MAAMK,MAAM,GAAG;IAAEC,KAAK,EAAEF,IAAI;IAAEG,MAAM,EAAEH,IAAI;IAAEI,YAAY,EAAEJ,IAAI,GAAG;EAAE,CAAC;EACpE,oBACEL,IAAA,CAACJ,IAAI;IAACc,KAAK,EAAE,CAACJ,MAAM,EAAE;MAAEK,eAAe,EAAER;IAAM,CAAC,CAAE;IAAAS,QAAA,EAC/CR,MAAM,iBAAIJ,IAAA,CAACJ,IAAI;MAACc,KAAK,EAAEG,MAAM,CAACT;IAAO,CAAE;EAAC,CACrC,CAAC;AAEX,CAAC;AAED,MAAMS,MAAM,GAAGhB,UAAU,CAACiB,MAAM,CAAC;EAC/BV,MAAM,EAAE;IACNW,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,KAAK;IACVC,IAAI,EAAE,MAAM;IACZV,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,CAAC;IACTU,SAAS,EAAE,CAAC,CAAC;IAAE;IACfT,YAAY,EAAE,CAAC;IAAE;IACjBE,eAAe,EAAEb,MAAM,CAACqB,UAAU;IAClCC,SAAS,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAS,CAAC;EAClC;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency/visual-scaffolding/components/DynamicNumberLine.js

@@ -0,0 +1,96 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import Svg, { Line, Path, Circle, Text as SvgText } from 'react-native-svg';
+import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const VB_W = 560;
+const VB_H = 110;
+const PAD_X = 22;
+const BASE_Y = 74;
+const ARC_H = 56;
+// L3 — addition jumps forward, subtraction backward; both bridge through every
+// ten (jumps land on each multiple of 10 crossed). Multiplication skip-counts.
+export const DynamicNumberLine = ({
+  spec,
+  colors
+}) => {
+  const span = spec.hi - spec.lo;
+  const denom = span === 0 ? 1 : span;
+  const x = v => PAD_X + (v - spec.lo) / denom * (VB_W - 2 * PAD_X);
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.wrapper,
+    children: /*#__PURE__*/_jsxs(Svg, {
+      width: "100%",
+      height: "100%",
+      viewBox: `0 0 ${VB_W} ${VB_H}`,
+      preserveAspectRatio: "xMidYMid meet",
+      children: [/*#__PURE__*/_jsx(Line, {
+        x1: PAD_X - 14,
+        y1: BASE_Y,
+        x2: VB_W - PAD_X + 14,
+        y2: BASE_Y,
+        stroke: COLORS.NEUTRAL_5,
+        strokeWidth: 3,
+        strokeLinecap: "round"
+      }), spec.ticks.map(value => /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(Line, {
+          x1: x(value),
+          y1: BASE_Y - 6,
+          x2: x(value),
+          y2: BASE_Y + 6,
+          stroke: COLORS.NEUTRAL_6,
+          strokeWidth: 3
+        }), /*#__PURE__*/_jsx(SvgText, {
+          x: x(value),
+          y: BASE_Y + 25,
+          fontSize: 20,
+          fontWeight: "700",
+          fontFamily: FONT_FAMILY.buenosAires,
+          fill: COLORS.NEUTRAL_8,
+          textAnchor: "middle",
+          children: value === spec.hiddenTick ? '?' : value
+        })]
+      }, `t${value}`)), spec.jumps.map((jump, i) => {
+        const midX = (x(jump.from) + x(jump.to)) / 2;
+        return /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [/*#__PURE__*/_jsx(Path, {
+            d: `M ${x(jump.from)} ${BASE_Y - 4} Q ${midX} ${BASE_Y - ARC_H - 12} ${x(jump.to)} ${BASE_Y - 4}`,
+            stroke: colors.accent,
+            strokeWidth: 4,
+            fill: "none"
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: x(jump.to),
+            cy: BASE_Y,
+            r: 6.5,
+            fill: colors.accent
+          }), /*#__PURE__*/_jsx(SvgText, {
+            x: midX,
+            y: BASE_Y - ARC_H - 1,
+            fontSize: 20,
+            fontWeight: "800",
+            fontFamily: FONT_FAMILY.buenosAires,
+            fill: colors.dark,
+            textAnchor: "middle",
+            children: jump.label
+          })]
+        }, `j${i}`);
+      }), spec.jumps.length > 0 && /*#__PURE__*/_jsx(Circle, {
+        cx: x(spec.jumps[0].from),
+        cy: BASE_Y,
+        r: 6.5,
+        fill: colors.accent
+      })]
+    })
+  });
+};
+const styles = StyleSheet.create({
+  wrapper: {
+    width: '100%',
+    maxWidth: VB_W,
+    aspectRatio: VB_W / VB_H,
+    alignSelf: 'center'
+  }
+});
+//# sourceMappingURL=DynamicNumberLine.js.map

package/dist/module/features/fluency/visual-scaffolding/components/DynamicNumberLine.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","Svg","Line","Path","Circle","Text","SvgText","COLORS","FONT_FAMILY","jsx","_jsx","jsxs","_jsxs","VB_W","VB_H","PAD_X","BASE_Y","ARC_H","DynamicNumberLine","spec","colors","span","hi","lo","denom","x","v","style","styles","wrapper","children","width","height","viewBox","preserveAspectRatio","x1","y1","x2","y2","stroke","NEUTRAL_5","strokeWidth","strokeLinecap","ticks","map","value","Fragment","NEUTRAL_6","y","fontSize","fontWeight","fontFamily","buenosAires","fill","NEUTRAL_8","textAnchor","hiddenTick","jumps","jump","i","midX","from","to","d","accent","cx","cy","r","dark","label","length","create","maxWidth","aspectRatio","alignSelf"],"sourceRoot":"../../../../../../src","sources":["features/fluency/visual-scaffolding/components/DynamicNumberLine.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/features/fluency/visual-scaffolding/components/FactVisual.js

@@ -0,0 +1,69 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { DiscreteCounterGrid } from "./DiscreteCounterGrid.js";
+import { RelationalBlock } from "./RelationalBlock.js";
+import { DynamicNumberLine } from "./DynamicNumberLine.js";
+import { QuotativeBars } from "./QuotativeBars.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+// Text alternative for the decorative-supportive visual.
+const labelFor = spec => {
+  switch (spec.kind) {
+    case 'grid':
+    case 'relational':
+    case 'line':
+    case 'bars':
+      return `${spec.left} ${spec.operation} ${spec.right}`;
+    case 'none':
+      return '';
+  }
+};
+const renderVisual = (spec, colors) => {
+  switch (spec.kind) {
+    case 'grid':
+      return /*#__PURE__*/_jsx(DiscreteCounterGrid, {
+        spec: spec,
+        colors: colors
+      });
+    case 'relational':
+      return /*#__PURE__*/_jsx(RelationalBlock, {
+        spec: spec,
+        colors: colors
+      });
+    case 'line':
+      return /*#__PURE__*/_jsx(DynamicNumberLine, {
+        spec: spec,
+        colors: colors
+      });
+    case 'bars':
+      return /*#__PURE__*/_jsx(QuotativeBars, {
+        spec: spec,
+        colors: colors
+      });
+    case 'none':
+      return null;
+  }
+};
+
+// Renders the scaffold for the current spec. Whether a visual shows at all is
+// decided by the card (none at L4/L5); this component just draws it.
+export const FactVisual = ({
+  spec,
+  colors
+}) => {
+  if (spec.kind === 'none') return null;
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    accessible: true,
+    accessibilityLabel: labelFor(spec),
+    children: renderVisual(spec, colors)
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+//# sourceMappingURL=FactVisual.js.map

package/dist/module/features/fluency/visual-scaffolding/components/FactVisual.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","DiscreteCounterGrid","RelationalBlock","DynamicNumberLine","QuotativeBars","jsx","_jsx","labelFor","spec","kind","left","operation","right","renderVisual","colors","FactVisual","style","styles","container","accessible","accessibilityLabel","children","create","alignItems","justifyContent"],"sourceRoot":"../../../../../../src","sources":["features/fluency/visual-scaffolding/components/FactVisual.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAG/C,SAASC,mBAAmB,QAAQ,0BAAuB;AAC3D,SAASC,eAAe,QAAQ,sBAAmB;AACnD,SAASC,iBAAiB,QAAQ,wBAAqB;AACvD,SAASC,aAAa,QAAQ,oBAAiB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAQ/C;AACA,MAAMC,QAAQ,GAAIC,IAAgB,IAAa;EAC7C,QAAQA,IAAI,CAACC,IAAI;IACf,KAAK,MAAM;IACX,KAAK,YAAY;IACjB,KAAK,MAAM;IACX,KAAK,MAAM;MACT,OAAO,GAAGD,IAAI,CAACE,IAAI,IAAIF,IAAI,CAACG,SAAS,IAAIH,IAAI,CAACI,KAAK,EAAE;IACvD,KAAK,MAAM;MACT,OAAO,EAAE;EACb;AACF,CAAC;AAED,MAAMC,YAAY,GAAGA,CAACL,IAAgB,EAAEM,MAAoB,KAAK;EAC/D,QAAQN,IAAI,CAACC,IAAI;IACf,KAAK,MAAM;MACT,oBAAOH,IAAA,CAACL,mBAAmB;QAACO,IAAI,EAAEA,IAAK;QAACM,MAAM,EAAEA;MAAO,CAAE,CAAC;IAC5D,KAAK,YAAY;MACf,oBAAOR,IAAA,CAACJ,eAAe;QAACM,IAAI,EAAEA,IAAK;QAACM,MAAM,EAAEA;MAAO,CAAE,CAAC;IACxD,KAAK,MAAM;MACT,oBAAOR,IAAA,CAACH,iBAAiB;QAACK,IAAI,EAAEA,IAAK;QAACM,MAAM,EAAEA;MAAO,CAAE,CAAC;IAC1D,KAAK,MAAM;MACT,oBAAOR,IAAA,CAACF,aAAa;QAACI,IAAI,EAAEA,IAAK;QAACM,MAAM,EAAEA;MAAO,CAAE,CAAC;IACtD,KAAK,MAAM;MACT,OAAO,IAAI;EACf;AACF,CAAC;;AAED;AACA;AACA,OAAO,MAAMC,UAAU,GAAGA,CAAC;EAAEP,IAAI;EAAEM;AAAwB,CAAC,KAAK;EAC/D,IAAIN,IAAI,CAACC,IAAI,KAAK,MAAM,EAAE,OAAO,IAAI;EAErC,oBACEH,IAAA,CAACP,IAAI;IAACiB,KAAK,EAAEC,MAAM,CAACC,SAAU;IAACC,UAAU;IAACC,kBAAkB,EAAEb,QAAQ,CAACC,IAAI,CAAE;IAAAa,QAAA,EAC1ER,YAAY,CAACL,IAAI,EAAEM,MAAM;EAAC,CACvB,CAAC;AAEX,CAAC;AAED,MAAMG,MAAM,GAAGjB,UAAU,CAACsB,MAAM,CAAC;EAC/BJ,SAAS,EAAE;IACTK,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency/visual-scaffolding/components/QuotativeBars.js

@@ -0,0 +1,83 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import Svg, { Rect, Path, Text as SvgText } from 'react-native-svg';
+import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const VB_W = 480;
+const VB_H = 98;
+const PAD_X = 24;
+const BAR_Y = 12;
+const BAR_H = 46;
+const BRACKET_Y = BAR_Y + BAR_H + 8;
+// L2 (division) — quotative model: the dividend bar is cut into equal groups of
+// the divisor; counting the groups gives the quotient (the answer).
+export const QuotativeBars = ({
+  spec,
+  colors
+}) => {
+  const segments = Math.max(1, spec.segmentCount);
+  const barW = VB_W - 2 * PAD_X;
+  const segW = barW / segments;
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.wrapper,
+    children: /*#__PURE__*/_jsxs(Svg, {
+      width: "100%",
+      height: "100%",
+      viewBox: `0 0 ${VB_W} ${VB_H}`,
+      preserveAspectRatio: "xMidYMid meet",
+      children: [Array.from({
+        length: segments
+      }, (_, i) => {
+        const x = PAD_X + i * segW;
+        return /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [/*#__PURE__*/_jsx(Rect, {
+            x: x,
+            y: BAR_Y,
+            width: segW,
+            height: BAR_H,
+            rx: 6,
+            fill: i % 2 === 0 ? colors.bg : colors.mid,
+            stroke: colors.accent,
+            strokeWidth: 2.5
+          }), /*#__PURE__*/_jsx(SvgText, {
+            x: x + segW / 2,
+            y: BAR_Y + BAR_H / 2 + 7,
+            fontSize: 20,
+            fontWeight: "700",
+            fontFamily: FONT_FAMILY.buenosAires,
+            fill: colors.dark,
+            textAnchor: "middle",
+            children: spec.segment
+          })]
+        }, i);
+      }), /*#__PURE__*/_jsx(Path, {
+        d: `M ${PAD_X} ${BRACKET_Y} L ${PAD_X} ${BRACKET_Y + 6} L ${VB_W - PAD_X} ${BRACKET_Y + 6} L ${VB_W - PAD_X} ${BRACKET_Y}`,
+        fill: "none",
+        stroke: COLORS.NEUTRAL_6,
+        strokeWidth: 2.5,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }), /*#__PURE__*/_jsx(SvgText, {
+        x: VB_W / 2,
+        y: BRACKET_Y + 20,
+        fontSize: 15,
+        fontWeight: "700",
+        fontFamily: FONT_FAMILY.buenosAires,
+        fill: COLORS.NEUTRAL_8,
+        textAnchor: "middle",
+        children: spec.total
+      })]
+    })
+  });
+};
+const styles = StyleSheet.create({
+  wrapper: {
+    width: '100%',
+    maxWidth: VB_W,
+    aspectRatio: VB_W / VB_H,
+    alignSelf: 'center'
+  }
+});
+//# sourceMappingURL=QuotativeBars.js.map

package/dist/module/features/fluency/visual-scaffolding/components/QuotativeBars.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","Svg","Rect","Path","Text","SvgText","COLORS","FONT_FAMILY","jsx","_jsx","jsxs","_jsxs","VB_W","VB_H","PAD_X","BAR_Y","BAR_H","BRACKET_Y","QuotativeBars","spec","colors","segments","Math","max","segmentCount","barW","segW","style","styles","wrapper","children","width","height","viewBox","preserveAspectRatio","Array","from","length","_","i","x","Fragment","y","rx","fill","bg","mid","stroke","accent","strokeWidth","fontSize","fontWeight","fontFamily","buenosAires","dark","textAnchor","segment","d","NEUTRAL_6","strokeLinecap","strokeLinejoin","NEUTRAL_8","total","create","maxWidth","aspectRatio","alignSelf"],"sourceRoot":"../../../../../../src","sources":["features/fluency/visual-scaffolding/components/QuotativeBars.tsx"],"mappings":"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","ignoreList":[]}