@khanacademy/perseus 20.3.1 → 20.4.0

package/dist/index.js

@@ -14406,7 +14406,7 @@ const DEFAULT_STATE$2 = {
   visibleShape: null,
   mouseTarget: null
 };
-const MovableLine$3 = function (graphie, movable, options) {
+const MovableLine$4 = function (graphie, movable, options) {
   assert$6(graphie != null);
   assert$6(options != null);
 
@@ -14424,10 +14424,10 @@ const MovableLine$3 = function (graphie, movable, options) {
   // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
   this.modify(___default["default"].extend({}, DEFAULT_STATE$2, options));
 };
-___default["default"].extend(MovableLine$3, MovableLineOptions);
-InteractiveUtil.createGettersFor(MovableLine$3, ___default["default"].extend({}, DEFAULT_PROPS$2, DEFAULT_STATE$2));
-InteractiveUtil.addMovableHelperMethodsTo(MovableLine$3);
-___default["default"].extend(MovableLine$3.prototype, {
+___default["default"].extend(MovableLine$4, MovableLineOptions);
+InteractiveUtil.createGettersFor(MovableLine$4, ___default["default"].extend({}, DEFAULT_PROPS$2, DEFAULT_STATE$2));
+InteractiveUtil.addMovableHelperMethodsTo(MovableLine$4);
+___default["default"].extend(MovableLine$4.prototype, {
   cloneState: function () {
     return ___default["default"].extend(this.movable.cloneState(), {
       coords: this.coords()
@@ -15008,7 +15008,7 @@ const DEFAULT_STATE$1 = {
 // TODO(benchristel): this is a memory leak. We add items to
 // tooltipResetFunctions, but never remove them.
 const tooltipResetFunctions = [];
-class MovablePoint$5 {
+class MovablePoint$4 {
   // @ts-expect-error - TS2564: Property 'prevState' has no initializer and is not definitely assigned in the constructor.
 
   _listenerMap = {};
@@ -16136,15 +16136,15 @@ ___default["default"].extend(MovablePolygon.prototype, {
 });
 
 const Interactive2 = {
-  MovablePoint: MovablePoint$5,
+  MovablePoint: MovablePoint$4,
   addMovablePoint: function (graphie, options) {
     const movable = new Movable(graphie, {});
-    return new MovablePoint$5(graphie, movable, options);
+    return new MovablePoint$4(graphie, movable, options);
   },
-  MovableLine: MovableLine$3,
+  MovableLine: MovableLine$4,
   addMovableLine: function (graphie, options) {
     const movable = new Movable(graphie, {});
-    return new MovableLine$3(graphie, movable, options);
+    return new MovableLine$4(graphie, movable, options);
   },
   MovablePolygon: MovablePolygon,
   addMovablePolygon: function (graphie, options) {
@@ -16181,7 +16181,7 @@ const Interactive2 = {
   }
 };
 
-const MovablePoint$4 = GraphieClasses.createClass({
+const MovablePoint$3 = GraphieClasses.createClass({
   displayName: "MovablePoint",
   movableProps: ["children"],
   _getProps: function () {
@@ -16239,8 +16239,8 @@ const MovablePoint$4 = GraphieClasses.createClass({
 });
 
 // Include helper methods, such as MovablePoint.constrain.snap()
-___default["default"].extend(MovablePoint$4, Interactive2.MovablePoint);
-const MovableLine$2 = GraphieClasses.createClass({
+___default["default"].extend(MovablePoint$3, Interactive2.MovablePoint);
+const MovableLine$3 = GraphieClasses.createClass({
   displayName: "MovableLine",
   movableProps: ["children"],
   add: function (graphie) {
@@ -16268,7 +16268,7 @@ const MovableLine$2 = GraphieClasses.createClass({
 });
 
 // Include helper methods, such as MovableLine.constrain.snap()
-___default["default"].extend(MovableLine$2, Interactive2.MovableLine);
+___default["default"].extend(MovableLine$3, Interactive2.MovableLine);
 const Label$1 = GraphieClasses.createSimpleClass((graphie, props) => {
   let coord = props.coord;
   if (props.unscaled) {
@@ -16408,8 +16408,8 @@ var Movables = {
   Circle: Circle,
   Label: Label$1,
   Line: Line$2,
-  MovableLine: MovableLine$2,
-  MovablePoint: MovablePoint$4,
+  MovableLine: MovableLine$3,
+  MovablePoint: MovablePoint$3,
   Parabola: Parabola,
   Path: Path,
   Plot: Plot$2,
@@ -24979,6 +24979,12 @@ var Dropdown$1 = {
 
 // transform = _.identity
 
+function mediaQueryIsMatched(mediaQuery) {
+  if (typeof window.matchMedia !== "function") {
+    return false;
+  }
+  return window.matchMedia(mediaQuery).matches;
+}
 class Explanation extends React__namespace.Component {
   static defaultProps = {
     showPrompt: "Explain",
@@ -25016,7 +25022,7 @@ class Explanation extends React__namespace.Component {
   render() {
     const promptText = this.state.expanded ? this.props.hidePrompt : this.props.showPrompt;
     const caretIcon = this.state.expanded ? caretUp__default["default"] : caretDown__default["default"];
-    const allowTransition = window.matchMedia("(prefers-reduced-motion: no-preference)").matches;
+    const allowTransition = mediaQueryIsMatched("(prefers-reduced-motion: no-preference)");
 
     // Special styling is needed to fit the button in a block of text without throwing off the line spacing.
     // While the button is not normally included in a block of text, it needs to be able to accommodate such a case.
@@ -25027,7 +25033,7 @@ class Explanation extends React__namespace.Component {
     };
     const contentStyling = [styles$p.content, this.state.expanded ? styles$p.contentExpanded : styles$p.contentCollapsed, allowTransition && (this.state.expanded ? styles$p.transitionExpanded : styles$p.transitionCollapsed)];
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.UniqueIDProvider, {
-      mockOnFirstRender: false,
+      mockOnFirstRender: true,
       scope: "explanation-widget"
     }, ids => /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
       "aria-expanded": this.state.expanded,
@@ -26424,9 +26430,9 @@ var util = /*#__PURE__*/Object.freeze({
 });
 
 // @ts-expect-error - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
-const MovablePoint$3 = Graphie.MovablePoint;
+const MovablePoint$2 = Graphie.MovablePoint;
 // @ts-expect-error - TS2339 - Property 'MovableLine' does not exist on type 'typeof Graphie'.
-const MovableLine$1 = Graphie.MovableLine;
+const MovableLine$2 = Graphie.MovableLine;
 function isFlipped(newCoord, oldCoord, line) {
   const CCW = (a, b, c) => {
     return (b[0] - a[0]) * (c[1] - a[1]) - (c[0] - a[0]) * (b[1] - a[1]);
@@ -26470,7 +26476,7 @@ class FunctionGrapher extends React__namespace.Component {
   })();
   render() {
     const pointForCoord = (coord, i) => {
-      return /*#__PURE__*/React__namespace.createElement(MovablePoint$3, {
+      return /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
         key: i,
         coord: coord,
         static: this.props.static,
@@ -26582,7 +26588,7 @@ class FunctionGrapher extends React__namespace.Component {
     const dashed = {
       strokeDasharray: "- "
     };
-    return asymptote && /*#__PURE__*/React__namespace.createElement(MovableLine$1, {
+    return asymptote && /*#__PURE__*/React__namespace.createElement(MovableLine$2, {
       onMove: (newCoord, oldCoord) => {
         // Calculate and apply displacement
         const delta = kmath.vector.subtract(newCoord, oldCoord);
@@ -26607,7 +26613,7 @@ class FunctionGrapher extends React__namespace.Component {
       }],
       normalStyle: dashed,
       highlightStyle: dashed
-    }, ___default["default"].map(asymptote, (coord, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$3, {
+    }, ___default["default"].map(asymptote, (coord, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
       key: `asymptoteCoord-${i}`,
       coord: coord,
       static: true,
@@ -27370,9 +27376,9 @@ const Label = Graphie.Label;
 // @ts-expect-error - TS2339 - Property 'Line' does not exist on type 'typeof Graphie'.
 const Line$1 = Graphie.Line;
 // @ts-expect-error - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
-const MovablePoint$2 = Graphie.MovablePoint;
+const MovablePoint$1 = Graphie.MovablePoint;
 // @ts-expect-error - TS2339 - Property 'MovableLine' does not exist on type 'typeof Graphie'.
-const MovableLine = Graphie.MovableLine;
+const MovableLine$1 = Graphie.MovableLine;
 // @ts-expect-error - TS2339 - Property 'Plot' does not exist on type 'typeof Graphie'.
 const Plot = Graphie.Plot;
 // @ts-expect-error - TS2339 - Property 'PlotParametric' does not exist on type 'typeof Graphie'.
@@ -27624,7 +27630,7 @@ class Interaction extends React__namespace.Component {
           return [coordX, coordY];
         }];
         if (element.options.constraint === "snap") {
-          constraints.push(MovablePoint$2.constraints.snap(element.options.snap));
+          constraints.push(MovablePoint$1.constraints.snap(element.options.snap));
         } else if (element.options.constraint === "x") {
           constraints.push(coord => {
             return [
@@ -27646,7 +27652,7 @@ class Interaction extends React__namespace.Component {
         // TODO(eater): foo_[xyz] are hacky non-props to
         // get the component to update when constraints
         // change
-        return /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
+        return /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
           key: element.key,
           coord: [
           // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
@@ -27681,7 +27687,7 @@ class Interaction extends React__namespace.Component {
           return [coordX, coordY];
         }];
         if (element.options.constraint === "snap") {
-          constraints.push(MovablePoint$2.constraints.snap(element.options.snap));
+          constraints.push(MovablePoint$1.constraints.snap(element.options.snap));
         } else if (element.options.constraint === "x") {
           constraints.push(coord => {
             return [
@@ -27709,7 +27715,7 @@ class Interaction extends React__namespace.Component {
         this.state.variables["x_" + element.options.endSubscript],
         // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
         this.state.variables["y_" + element.options.endSubscript]];
-        return /*#__PURE__*/React__namespace.createElement(MovableLine, {
+        return /*#__PURE__*/React__namespace.createElement(MovableLine$1, {
           key: element.key,
           constraints: constraints
           // eslint-disable-next-line react/jsx-no-bind
@@ -27722,14 +27728,14 @@ class Interaction extends React__namespace.Component {
           foo_x: element.options.constraint,
           foo_y: element.options.constraintFn,
           foo_z: element.options.snap
-        }, /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
+        }, /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
           coord: start,
           static: true,
           normalStyle: {
             stroke: "none",
             fill: "none"
           }
-        }), /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
+        }), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
           coord: end,
           static: true,
           normalStyle: {
@@ -28310,20 +28316,142 @@ function moveControlPoint(objectIndex, pointIndex, destination) {
     destination
   };
 }
-const MOVE_SEGMENT = "move-segment";
-function moveSegment(segmentIndex, delta) {
+const MOVE_LINE = "move-line";
+function moveSegment(lineIndex, delta) {
   return {
-    type: MOVE_SEGMENT,
-    segmentIndex,
+    type: MOVE_LINE,
+    lineIndex,
     delta
   };
 }
 
-const MovablePoint$1 = props => {
+const defaultStroke = "var(--movable-line-stroke-color)";
+const MovableLine = props => {
+  const {
+    start,
+    end,
+    onMove,
+    extend,
+    stroke = defaultStroke
+  } = props;
+  const midpoint = mafs.vec.midpoint(start, end);
+  const {
+    viewTransform,
+    userTransform
+  } = mafs.useTransformContext();
+  const transformToPx = mafs.vec.matrixMult(viewTransform, userTransform);
+  const startPtPx = mafs.vec.transform(start, transformToPx);
+  const endPtPx = mafs.vec.transform(end, transformToPx);
+  let startExtend = undefined;
+  let endExtend = undefined;
+  if (extend) {
+    startExtend = extend.start ? getExtensionCoords(end, start, extend.range) : undefined;
+    endExtend = extend.end ? getExtensionCoords(start, end, extend.range) : undefined;
+  }
+  const line = React.useRef(null);
+  const {
+    dragging
+  } = mafs.useMovable({
+    gestureTarget: line,
+    point: midpoint,
+    onMove: newPoint => {
+      onMove(mafs.vec.sub(newPoint, midpoint));
+    },
+    constrain: p => p
+  });
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("g", {
+    ref: line,
+    tabIndex: 0,
+    className: "movable-line",
+    style: {
+      cursor: dragging ? "grabbing" : "grab"
+    }
+  }, /*#__PURE__*/React__namespace.createElement(SVGLine, {
+    start: startPtPx,
+    end: endPtPx,
+    style: {
+      stroke: "transparent",
+      strokeWidth: 44
+    }
+  }), /*#__PURE__*/React__namespace.createElement(SVGLine, {
+    start: startPtPx,
+    end: endPtPx,
+    style: {
+      stroke,
+      strokeWidth: "var(--movable-line-stroke-weight)"
+    },
+    dragging: dragging
+  })), startExtend && /*#__PURE__*/React__namespace.createElement(mafs.Vector, {
+    tail: start,
+    tip: startExtend,
+    color: stroke
+  }), endExtend && /*#__PURE__*/React__namespace.createElement(mafs.Vector, {
+    tail: end,
+    tip: endExtend,
+    color: stroke
+  }));
+};
+function SVGLine(props) {
+  const {
+    start,
+    end,
+    style,
+    dragging
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement("line", {
+    x1: start[0],
+    y1: start[1],
+    x2: end[0],
+    y2: end[1],
+    style: style,
+    className: dragging ? "movable-line-dragging" : undefined
+  });
+}
+
+/**
+ * Given two points, find the tips that extends through the points to the edge of the range.
+ * @param collinearPoint - The point that the line passes through. Needed to establish slope.
+ * @param extendFrom - The point that the line extends from to the edge of the graph.
+ */
+const getExtensionCoords = (collinearPoint, extendFrom, range) => {
+  // edges of the graph
+  const [[xMin, xMax], [yMin, yMax]] = range;
+  const [aX, aY] = collinearPoint;
+  const [bX, bY] = extendFrom;
+  const yDiff = bY - aY;
+  const xDiff = bX - aX;
+  const slope = yDiff / xDiff;
+  const yAtXMin = slope * (xMin - aX) + aY;
+  const yAtXMax = slope * (xMax - aX) + aY;
+  const xAtYMin = (yMin - aY) / slope + aX;
+  const xAtYMax = (yMax - aY) / slope + aX;
+
+  // clock analogy to describe quadrants
+  switch (true) {
+    // 12 o'clock to 2:59
+    case yDiff > 0 && xDiff >= 0:
+      return xAtYMax > xMax ? [xMax, yAtXMax] : [xAtYMax, yMax];
+    // 3 o'clock to 5:59
+    case yDiff <= 0 && xDiff > 0:
+      // xAtYMin evaluates to -Infinity here, so we use absolute value
+      return Math.abs(xAtYMin) > xMax ? [xMax, yAtXMax] : [xAtYMin, yMin];
+    // 9 o'clock to 11:59
+    case yDiff >= 0 && xDiff < 0:
+      return xAtYMax < xMin ? [xMin, yAtXMin] : [xAtYMax, yMax];
+    // 6 o'clock to 8:59
+    case yDiff < 0 && xDiff <= 0:
+      return xAtYMin < xMin ? [xMin, yAtXMin] : [xAtYMin, yMin];
+    default:
+      return [xMax, yAtXMax];
+  }
+};
+
+const StyledMovablePoint = props => {
   const hitboxRef = React.useRef(null);
   const {
     point,
-    onMove
+    onMove,
+    color = Color__default["default"].blue
   } = props;
   const {
     dragging
@@ -28347,11 +28475,11 @@ const MovablePoint$1 = props => {
       cursor: dragging ? "grabbing" : "grab",
       touchAction: "none",
       outline: "none",
-      "--movable-point-color": Color__default["default"].blue
+      "--movable-point-color": color
     }
   }, /*#__PURE__*/React__namespace.createElement("circle", {
     className: "movable-point-hitbox",
-    r: 30,
+    r: 22,
     cx: x,
     cy: y
   }), /*#__PURE__*/React__namespace.createElement("circle", {
@@ -28367,7 +28495,7 @@ const MovablePoint$1 = props => {
     cx: x,
     cy: y,
     style: {
-      fill: Color__default["default"].blue
+      fill: color
     }
   }));
 };
@@ -28377,16 +28505,16 @@ const SegmentGraph = props => {
     dispatch
   } = props;
   const {
-    segments,
+    coords: segments,
     snapStep,
     range
   } = props.graphState;
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, segments.map((segment, i) => /*#__PURE__*/React__namespace.createElement(SegmentView, {
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, segments?.map((segment, i) => /*#__PURE__*/React__namespace.createElement(SegmentView, {
     key: i,
-    segment: segment,
+    collinearPair: segment,
     snaps: snapStep,
     range: range,
-    onMoveSegment: delta => {
+    onMoveLine: delta => {
       dispatch(moveSegment(i, delta));
     },
     onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(i, endpointIndex, destination)),
@@ -28395,75 +28523,83 @@ const SegmentGraph = props => {
 };
 const SegmentView = props => {
   const {
-    onMoveSegment,
-    segment: [pt1, pt2]
+    onMoveLine: onMoveSegment,
+    collinearPair: [start, end]
   } = props;
-  const midpoint = mafs.vec.midpoint(pt1, pt2);
-  const segment = React.useRef(null);
-  const {
-    dragging: isDraggingSegment
-  } = mafs.useMovable({
-    gestureTarget: segment,
-    point: midpoint,
-    onMove: newPoint => {
-      onMoveSegment(mafs.vec.sub(newPoint, midpoint));
-    },
-    constrain: p => p
-  });
-  const {
-    viewTransform,
-    userTransform
-  } = mafs.useTransformContext();
-  const transformToPx = mafs.vec.matrixMult(viewTransform, userTransform);
-  const pt1Px = mafs.vec.transform(pt1, transformToPx);
-  const pt2Px = mafs.vec.transform(pt2, transformToPx);
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("g", {
-    ref: segment,
-    tabIndex: 0,
-    className: "movable-segment",
-    style: {
-      cursor: isDraggingSegment ? "grabbing" : "grab"
-    }
-  }, /*#__PURE__*/React__namespace.createElement(SVGLine, {
-    start: pt1Px,
-    end: pt2Px,
-    style: {
-      stroke: "transparent",
-      strokeWidth: 30
-    }
-  }), /*#__PURE__*/React__namespace.createElement(SVGLine, {
-    start: pt1Px,
-    end: pt2Px,
-    style: {
-      stroke: "var(--mafs-segment-stroke-color)",
-      strokeWidth: "var(--mafs-segment-stroke-weight)"
-    }
-  })), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
-    point: pt1,
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(MovableLine, {
+    start: start,
+    end: end,
+    onMove: onMoveSegment
+  }), /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
+    point: start,
     onMove: newPoint => {
       props.onMovePoint(0, newPoint);
     }
-  }), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
-    point: pt2,
+  }), /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
+    point: end,
     onMove: newPoint => {
       props.onMovePoint(1, newPoint);
     }
   }));
 };
-function SVGLine(props) {
+
+const LinearGraph = props => {
   const {
-    start,
-    end,
-    style
+    dispatch
   } = props;
-  return /*#__PURE__*/React__namespace.createElement("line", {
-    x1: start[0],
-    y1: start[1],
-    x2: end[0],
-    y2: end[1],
-    style: style
-  });
-}
+  const {
+    coords: lines,
+    snapStep,
+    range,
+    type
+  } = props.graphState;
+  const colors = ["var(--movable-line-stroke-color)", "var(--mafs-violet)"];
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, lines?.map((line, i) => /*#__PURE__*/React__namespace.createElement(LineView, {
+    key: i,
+    collinearPair: line,
+    snaps: snapStep,
+    range: range,
+    onMoveLine: delta => {
+      dispatch(moveSegment(i, delta));
+    },
+    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(i, endpointIndex, destination))
+    // "linear" or "linear-system" + index
+    ,
+    "data-testid": type + i,
+    stroke: colors[i]
+  })));
+};
+const LineView = props => {
+  const {
+    onMoveLine: onMoveSegment,
+    collinearPair: [start, end],
+    range,
+    stroke
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(MovableLine, {
+    start: start,
+    end: end,
+    onMove: onMoveSegment,
+    extend: {
+      start: true,
+      end: true,
+      range
+    },
+    stroke: stroke
+  }), /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
+    point: start,
+    onMove: newPoint => {
+      props.onMovePoint(0, newPoint);
+    },
+    color: stroke
+  }), /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
+    point: end,
+    onMove: newPoint => {
+      props.onMovePoint(1, newPoint);
+    },
+    color: stroke
+  }));
+};
 
 const renderLineLabel = (n, _ref) => {
   let [min, max] = _ref;
@@ -28482,35 +28618,50 @@ const Grid = props => props.markings === "none" ? null : /*#__PURE__*/React__nam
 
 function interactiveGraphReducer(state, action) {
   switch (action.type) {
-    case "move-control-point":
+    case MOVE_CONTROL_POINT:
       {
-        const newSegments = updateAtIndex(state.segments, action.objectIndex, segment => setAtIndex(segment, action.pointIndex, snap(state, bound$1(state, action.destination))));
-        if (!validSegments(newSegments)) {
+        const newCoords = updateAtIndex({
+          array: state.coords,
+          index: action.objectIndex,
+          update: tuple => setAtIndex({
+            array: tuple,
+            index: action.pointIndex,
+            newValue: snap(state, bound$1(state, action.destination))
+          })
+        });
+        if (!validSegments(newCoords)) {
           return state;
         }
         return {
           ...state,
           hasBeenInteractedWith: true,
-          segments: newSegments
+          coords: newCoords
         };
       }
-    case "move-segment":
+    case MOVE_LINE:
       {
-        const oldSegment = state.segments[action.segmentIndex];
-        const maxMoves = oldSegment.map(point => maxMove(state, point));
-        const minMoves = oldSegment.map(point => minMove(state, point));
+        const currentLine = state.coords?.[action.lineIndex];
+        if (!currentLine) {
+          throw new Error("No line to move");
+        }
+        const maxMoves = currentLine.map(point => maxMove(state, point));
+        const minMoves = currentLine.map(point => minMove(state, point));
         const maxXMove = Math.min(...maxMoves.map(move => move[0]));
         const maxYMove = Math.min(...maxMoves.map(move => move[1]));
         const minXMove = Math.max(...minMoves.map(move => move[0]));
         const minYMove = Math.max(...minMoves.map(move => move[1]));
         const dx = clamp(action.delta[0], minXMove, maxXMove);
         const dy = clamp(action.delta[1], minYMove, maxYMove);
-        const newSegment = oldSegment.map(point => snap(state, kmath.vector.add(point, [dx, dy])));
-        const newSegments = setAtIndex(state.segments, action.segmentIndex, newSegment);
+        const newValue = [snap(state, mafs.vec.add(currentLine[0], [dx, dy])), snap(state, mafs.vec.add(currentLine[1], [dx, dy]))];
+        const newLine = setAtIndex({
+          array: state.coords,
+          index: action.lineIndex,
+          newValue
+        });
         return {
           ...state,
           hasBeenInteractedWith: true,
-          segments: newSegments
+          coords: newLine
         };
       }
     default:
@@ -28559,12 +28710,28 @@ function validSegments(segments) {
     return !kmath.vector.equal(start, end);
   });
 }
-function updateAtIndex(array, index, update) {
-  return setAtIndex(array, index, update(array[index]));
+function updateAtIndex(args) {
+  const {
+    array = [],
+    index,
+    update
+  } = args;
+  const newValue = update(array[index]);
+  return setAtIndex({
+    array,
+    index,
+    newValue
+  });
 }
-function setAtIndex(array, index, newValue) {
-  const copy = [...array];
+function setAtIndex(args) {
+  const {
+    array,
+    index,
+    newValue
+  } = args;
+  const copy = [...(array || [])];
   copy[index] = newValue;
+  // restoring readonly to array
   return copy;
 }
 
@@ -28602,12 +28769,24 @@ function initializeGraphState(params) {
         hasBeenInteractedWith: false,
         range,
         snapStep,
-        segments: getDefaultSegments({
+        coords: getDefaultSegments({
           graph,
           step,
           range
         })
       };
+    // Ray can also fall through into this case-- same type, same default coords
+    case "linear":
+    case "linear-system":
+      return {
+        type: graph.type,
+        hasBeenInteractedWith: false,
+        range,
+        snapStep,
+        // A linear graph has a single tuple of points, while a linear
+        // system has two tuples of points.
+        coords: getLineCoords(graph, range, step)
+      };
   }
   throw new Error("Mafs not yet implemented for graph type: " + graph.type);
 }
@@ -28636,6 +28815,35 @@ const getDefaultSegments = props => {
   });
 };
 
+// TS v4 doesn't narrow return types, while v5 does.
+// Instead of updating to v5, using generic type to relate input and output types.
+function getGradableGraph(state, initialGraph) {
+  if (!state.hasBeenInteractedWith) {
+    return initialGraph;
+  }
+  switch (true) {
+    // coords: Array of CollinearTuple
+    case state.type === "linear-system" && initialGraph.type === "linear-system":
+    case state.type === "segment" && initialGraph.type === "segment":
+      return {
+        ...initialGraph,
+        coords: state.coords
+      };
+    // RAY has the same type as below; can fall through
+    // coords: CollinearTuple
+    case state.type === "linear" && initialGraph.type === "linear":
+      return {
+        ...initialGraph,
+        coords: state.coords?.[0]
+      };
+  }
+  throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
+}
+const defaultLinearCoords = [[[0.25, 0.75], [0.75, 0.75]], [[0.25, 0.25], [0.75, 0.25]]];
+const getLineCoords = (graph, range, step) =>
+// Return two lines for a linear system, one for a ray or linear
+graph.coords ?? graph.type === "linear-system" ? defaultLinearCoords.map(collinear => normalizePoints(range, step, collinear)) : [normalizePoints(range, step, defaultLinearCoords[0])];
+
 // Displays a stylized open eye: lint warnings are visible
 const VisibleIcon = () => /*#__PURE__*/React__namespace.createElement("svg", {
   width: "24",
@@ -29333,28 +29541,25 @@ const renderGraph = props => {
     state,
     dispatch
   } = props;
-  switch (state.type) {
+  const {
+    type
+  } = state;
+  switch (type) {
     case "segment":
       return /*#__PURE__*/React__namespace.createElement(SegmentGraph, {
         graphState: state,
         dispatch: dispatch
       });
+    case "linear":
+    case "linear-system":
+      return /*#__PURE__*/React__namespace.createElement(LinearGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    default:
+      return new wonderStuffCore.UnreachableCaseError(type);
   }
-  throw new Error("Mafs is not yet implemented for graph type: " + state.type);
 };
-function getGradableGraph(state, initialGraph) {
-  if (!state.hasBeenInteractedWith) {
-    return initialGraph;
-  }
-  switch (initialGraph.type) {
-    case "segment":
-      return {
-        ...initialGraph,
-        coords: state.segments
-      };
-  }
-  throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
-}
 const MafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
   const [width, height] = props.box;
   const legacyGrid = getLegacyGrid([width, height], props.backgroundImage);
@@ -41363,7 +41568,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "20.3.1";
+const libVersion = "20.4.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -42393,8 +42598,9 @@ var constants = /*#__PURE__*/Object.freeze({
 // TODO(FEI-4010): Remove `Perseus` prefix for all types here
 // TODO(FEI-4011): Use types generated by https://github.com/jaredly/generate-perseus-flowtypes
 
+// Range is replaced within this file with Interval, but it is used elsewhere
+// and exported from the package, so we need to keep it around.
 // TODO(FEI-5054): Figure out how to get global .d.ts files working with monorepos
-
 const ItemExtras = [
 // The user might benefit from using a Scientific Calculator.  Provided on Khan Academy when true
 "calculator",