@khanacademy/perseus 20.3.1 → 20.4.1

package/dist/es/index.js

@@ -31,7 +31,7 @@ import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-block
 import caretDown from '@phosphor-icons/core/assets/regular/caret-down.svg';
 import caretUp from '@phosphor-icons/core/assets/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
-import { Point as Point$2, useMovable, useTransformContext, vec, Coordinates, Mafs } from 'mafs';
+import { Point as Point$2, vec, useTransformContext, useMovable, Vector, Coordinates, Mafs } from 'mafs';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
 import { LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
@@ -14388,7 +14388,7 @@ const DEFAULT_STATE$2 = {
   visibleShape: null,
   mouseTarget: null
 };
-const MovableLine$3 = function MovableLine(graphie, movable, options) {
+const MovableLine$4 = function MovableLine(graphie, movable, options) {
   assert$6(graphie != null);
   assert$6(options != null);
 
@@ -14406,10 +14406,10 @@ const MovableLine$3 = function MovableLine(graphie, movable, options) {
   // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
   this.modify(_.extend({}, DEFAULT_STATE$2, options));
 };
-_.extend(MovableLine$3, MovableLineOptions);
-InteractiveUtil.createGettersFor(MovableLine$3, _.extend({}, DEFAULT_PROPS$2, DEFAULT_STATE$2));
-InteractiveUtil.addMovableHelperMethodsTo(MovableLine$3);
-_.extend(MovableLine$3.prototype, {
+_.extend(MovableLine$4, MovableLineOptions);
+InteractiveUtil.createGettersFor(MovableLine$4, _.extend({}, DEFAULT_PROPS$2, DEFAULT_STATE$2));
+InteractiveUtil.addMovableHelperMethodsTo(MovableLine$4);
+_.extend(MovableLine$4.prototype, {
   cloneState: function () {
     return _.extend(this.movable.cloneState(), {
       coords: this.coords()
@@ -14986,7 +14986,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 {
   constructor(graphie, movable, options) {
     this.graphie = void 0;
     this.movable = void 0;
@@ -15503,15 +15503,15 @@ class MovablePoint$5 {
     this.movable.toFront();
   }
 }
-MovablePoint$5.add = MovablePointOptions.add;
-MovablePoint$5.modify = MovablePointOptions.modify;
-MovablePoint$5.draw = MovablePointOptions.draw;
-MovablePoint$5.remove = MovablePointOptions.remove;
-MovablePoint$5.onMoveStart = MovablePointOptions.onMoveStart;
-MovablePoint$5.constraints = MovablePointOptions.constraints;
-MovablePoint$5.onMove = MovablePointOptions.onMove;
-MovablePoint$5.onMoveEnd = MovablePointOptions.onMoveEnd;
-MovablePoint$5.onClick = MovablePointOptions.onClick;
+MovablePoint$4.add = MovablePointOptions.add;
+MovablePoint$4.modify = MovablePointOptions.modify;
+MovablePoint$4.draw = MovablePointOptions.draw;
+MovablePoint$4.remove = MovablePointOptions.remove;
+MovablePoint$4.onMoveStart = MovablePointOptions.onMoveStart;
+MovablePoint$4.constraints = MovablePointOptions.constraints;
+MovablePoint$4.onMove = MovablePointOptions.onMove;
+MovablePoint$4.onMoveEnd = MovablePointOptions.onMoveEnd;
+MovablePoint$4.onClick = MovablePointOptions.onClick;
 function getKey(eventName, id) {
   return eventName + ":" + id;
 }
@@ -16105,15 +16105,15 @@ _.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) {
@@ -16149,7 +16149,7 @@ const Interactive2 = {
   }
 };
 
-const MovablePoint$4 = GraphieClasses.createClass({
+const MovablePoint$3 = GraphieClasses.createClass({
   displayName: "MovablePoint",
   movableProps: ["children"],
   _getProps: function () {
@@ -16206,8 +16206,8 @@ const MovablePoint$4 = GraphieClasses.createClass({
 });
 
 // Include helper methods, such as MovablePoint.constrain.snap()
-_.extend(MovablePoint$4, Interactive2.MovablePoint);
-const MovableLine$2 = GraphieClasses.createClass({
+_.extend(MovablePoint$3, Interactive2.MovablePoint);
+const MovableLine$3 = GraphieClasses.createClass({
   displayName: "MovableLine",
   movableProps: ["children"],
   add: function (graphie) {
@@ -16235,7 +16235,7 @@ const MovableLine$2 = GraphieClasses.createClass({
 });
 
 // Include helper methods, such as MovableLine.constrain.snap()
-_.extend(MovableLine$2, Interactive2.MovableLine);
+_.extend(MovableLine$3, Interactive2.MovableLine);
 const Label$1 = GraphieClasses.createSimpleClass((graphie, props) => {
   let coord = props.coord;
   if (props.unscaled) {
@@ -16375,8 +16375,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,
@@ -24856,6 +24856,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.Component {
   constructor(..._args) {
     super(..._args);
@@ -24889,7 +24895,7 @@ class Explanation extends React.Component {
   render() {
     const promptText = this.state.expanded ? this.props.hidePrompt : this.props.showPrompt;
     const caretIcon = this.state.expanded ? caretUp : caretDown;
-    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.
@@ -24900,7 +24906,7 @@ class Explanation extends React.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.createElement(UniqueIDProvider, {
-      mockOnFirstRender: false,
+      mockOnFirstRender: true,
       scope: "explanation-widget"
     }, ids => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
       "aria-expanded": this.state.expanded,
@@ -26288,9 +26294,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]);
@@ -26345,7 +26351,7 @@ class FunctionGrapher extends React.Component {
       const dashed = {
         strokeDasharray: "- "
       };
-      return asymptote && /*#__PURE__*/React.createElement(MovableLine$1, {
+      return asymptote && /*#__PURE__*/React.createElement(MovableLine$2, {
         onMove: (newCoord, oldCoord) => {
           // Calculate and apply displacement
           const delta = vector$1.subtract(newCoord, oldCoord);
@@ -26370,7 +26376,7 @@ class FunctionGrapher extends React.Component {
         }],
         normalStyle: dashed,
         highlightStyle: dashed
-      }, _.map(asymptote, (coord, i) => /*#__PURE__*/React.createElement(MovablePoint$3, {
+      }, _.map(asymptote, (coord, i) => /*#__PURE__*/React.createElement(MovablePoint$2, {
         key: `asymptoteCoord-${i}`,
         coord: coord,
         static: true,
@@ -26385,7 +26391,7 @@ class FunctionGrapher extends React.Component {
   }
   render() {
     const pointForCoord = (coord, i) => {
-      return /*#__PURE__*/React.createElement(MovablePoint$3, {
+      return /*#__PURE__*/React.createElement(MovablePoint$2, {
         key: i,
         coord: coord,
         static: this.props.static,
@@ -27219,9 +27225,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'.
@@ -27468,7 +27474,7 @@ class Interaction extends React.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 [
@@ -27490,7 +27496,7 @@ class Interaction extends React.Component {
         // TODO(eater): foo_[xyz] are hacky non-props to
         // get the component to update when constraints
         // change
-        return /*#__PURE__*/React.createElement(MovablePoint$2, {
+        return /*#__PURE__*/React.createElement(MovablePoint$1, {
           key: element.key,
           coord: [
           // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
@@ -27525,7 +27531,7 @@ class Interaction extends React.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 [
@@ -27553,7 +27559,7 @@ class Interaction extends React.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.createElement(MovableLine, {
+        return /*#__PURE__*/React.createElement(MovableLine$1, {
           key: element.key,
           constraints: constraints
           // eslint-disable-next-line react/jsx-no-bind
@@ -27566,14 +27572,14 @@ class Interaction extends React.Component {
           foo_x: element.options.constraint,
           foo_y: element.options.constraintFn,
           foo_z: element.options.snap
-        }, /*#__PURE__*/React.createElement(MovablePoint$2, {
+        }, /*#__PURE__*/React.createElement(MovablePoint$1, {
           coord: start,
           static: true,
           normalStyle: {
             stroke: "none",
             fill: "none"
           }
-        }), /*#__PURE__*/React.createElement(MovablePoint$2, {
+        }), /*#__PURE__*/React.createElement(MovablePoint$1, {
           coord: end,
           static: true,
           normalStyle: {
@@ -28157,20 +28163,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 = vec.midpoint(start, end);
+  const {
+    viewTransform,
+    userTransform
+  } = useTransformContext();
+  const transformToPx = vec.matrixMult(viewTransform, userTransform);
+  const startPtPx = vec.transform(start, transformToPx);
+  const endPtPx = 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 = useRef(null);
+  const {
+    dragging
+  } = useMovable({
+    gestureTarget: line,
+    point: midpoint,
+    onMove: newPoint => {
+      onMove(vec.sub(newPoint, midpoint));
+    },
+    constrain: p => p
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("g", {
+    ref: line,
+    tabIndex: 0,
+    className: "movable-line",
+    style: {
+      cursor: dragging ? "grabbing" : "grab"
+    }
+  }, /*#__PURE__*/React.createElement(SVGLine, {
+    start: startPtPx,
+    end: endPtPx,
+    style: {
+      stroke: "transparent",
+      strokeWidth: 44
+    }
+  }), /*#__PURE__*/React.createElement(SVGLine, {
+    start: startPtPx,
+    end: endPtPx,
+    style: {
+      stroke,
+      strokeWidth: "var(--movable-line-stroke-weight)"
+    },
+    dragging: dragging
+  })), startExtend && /*#__PURE__*/React.createElement(Vector, {
+    tail: start,
+    tip: startExtend,
+    color: stroke
+  }), endExtend && /*#__PURE__*/React.createElement(Vector, {
+    tail: end,
+    tip: endExtend,
+    color: stroke
+  }));
+};
+function SVGLine(props) {
+  const {
+    start,
+    end,
+    style,
+    dragging
+  } = props;
+  return /*#__PURE__*/React.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 = useRef(null);
   const {
     point,
-    onMove
+    onMove,
+    color = Color.blue
   } = props;
   const {
     dragging
@@ -28194,11 +28322,11 @@ const MovablePoint$1 = props => {
       cursor: dragging ? "grabbing" : "grab",
       touchAction: "none",
       outline: "none",
-      "--movable-point-color": Color.blue
+      "--movable-point-color": color
     }
   }, /*#__PURE__*/React.createElement("circle", {
     className: "movable-point-hitbox",
-    r: 30,
+    r: 22,
     cx: x,
     cy: y
   }), /*#__PURE__*/React.createElement("circle", {
@@ -28214,7 +28342,7 @@ const MovablePoint$1 = props => {
     cx: x,
     cy: y,
     style: {
-      fill: Color.blue
+      fill: color
     }
   }));
 };
@@ -28224,16 +28352,16 @@ const SegmentGraph = props => {
     dispatch
   } = props;
   const {
-    segments,
+    coords: segments,
     snapStep,
     range
   } = props.graphState;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, segments.map((segment, i) => /*#__PURE__*/React.createElement(SegmentView, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, segments == null ? void 0 : segments.map((segment, i) => /*#__PURE__*/React.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)),
@@ -28242,75 +28370,115 @@ const SegmentGraph = props => {
 };
 const SegmentView = props => {
   const {
-    onMoveSegment,
-    segment: [pt1, pt2]
+    onMoveLine: onMoveSegment,
+    collinearPair: [start, end]
   } = props;
-  const midpoint = vec.midpoint(pt1, pt2);
-  const segment = useRef(null);
-  const {
-    dragging: isDraggingSegment
-  } = useMovable({
-    gestureTarget: segment,
-    point: midpoint,
-    onMove: newPoint => {
-      onMoveSegment(vec.sub(newPoint, midpoint));
-    },
-    constrain: p => p
-  });
-  const {
-    viewTransform,
-    userTransform
-  } = useTransformContext();
-  const transformToPx = vec.matrixMult(viewTransform, userTransform);
-  const pt1Px = vec.transform(pt1, transformToPx);
-  const pt2Px = vec.transform(pt2, transformToPx);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("g", {
-    ref: segment,
-    tabIndex: 0,
-    className: "movable-segment",
-    style: {
-      cursor: isDraggingSegment ? "grabbing" : "grab"
-    }
-  }, /*#__PURE__*/React.createElement(SVGLine, {
-    start: pt1Px,
-    end: pt2Px,
-    style: {
-      stroke: "transparent",
-      strokeWidth: 30
-    }
-  }), /*#__PURE__*/React.createElement(SVGLine, {
-    start: pt1Px,
-    end: pt2Px,
-    style: {
-      stroke: "var(--mafs-segment-stroke-color)",
-      strokeWidth: "var(--mafs-segment-stroke-weight)"
-    }
-  })), /*#__PURE__*/React.createElement(MovablePoint$1, {
-    point: pt1,
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MovableLine, {
+    start: start,
+    end: end,
+    onMove: onMoveSegment
+  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
+    point: start,
     onMove: newPoint => {
       props.onMovePoint(0, newPoint);
     }
-  }), /*#__PURE__*/React.createElement(MovablePoint$1, {
-    point: pt2,
+  }), /*#__PURE__*/React.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.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.createElement(React.Fragment, null, lines == null ? void 0 : lines.map((line, i) => /*#__PURE__*/React.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,
+    onMovePoint,
+    collinearPair: [start, end],
+    range,
+    stroke
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MovableLine, {
+    start: start,
+    end: end,
+    onMove: onMoveLine,
+    extend: {
+      start: true,
+      end: true,
+      range
+    },
+    stroke: stroke
+  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
+    point: start,
+    onMove: newPoint => {
+      onMovePoint(0, newPoint);
+    },
+    color: stroke
+  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
+    point: end,
+    onMove: newPoint => {
+      onMovePoint(1, newPoint);
+    },
+    color: stroke
+  }));
+};
+
+const RayGraph = props => {
+  const {
+    dispatch
+  } = props;
+  const {
+    coords: lines,
+    range
+  } = props.graphState;
+
+  // a ray only has one line
+  const [start, end] = lines[0];
+  const handleMoveLine = delta => dispatch(moveSegment(0, delta));
+  const handleMovePoint = (newPoint, pointIndex) => dispatch(moveControlPoint(0, pointIndex, newPoint));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MovableLine, {
+    start: start,
+    end: end,
+    onMove: handleMoveLine,
+    extend: {
+      end: true,
+      start: false,
+      range
+    }
+  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
+    point: start,
+    onMove: newPoint => handleMovePoint(newPoint, 0)
+  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
+    point: end,
+    onMove: newPoint => handleMovePoint(newPoint, 1)
+  }));
+};
 
 const renderLineLabel = (n, [min, max]) => n !== -1 && n !== min && n !== max;
 const axisOptions = (props, index) => ({
@@ -28326,33 +28494,49 @@ const Grid = props => props.markings === "none" ? null : /*#__PURE__*/React.crea
 
 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 _extends({}, 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));
+        var _state$coords;
+        const currentLine = (_state$coords = state.coords) == null ? void 0 : _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, vector$1.add(point, [dx, dy])));
-        const newSegments = setAtIndex(state.segments, action.segmentIndex, newSegment);
+        const newValue = [snap(state, vec.add(currentLine[0], [dx, dy])), snap(state, vec.add(currentLine[1], [dx, dy]))];
+        const newLine = setAtIndex({
+          array: state.coords,
+          index: action.lineIndex,
+          newValue
+        });
         return _extends({}, state, {
           hasBeenInteractedWith: true,
-          segments: newSegments
+          coords: newLine
         });
       }
     default:
@@ -28398,12 +28582,28 @@ function clamp(value, min, max) {
 function validSegments(segments) {
   return segments.every(([start, end]) => !vector$1.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) {
+function setAtIndex(args) {
+  const {
+    array = [],
+    index,
+    newValue
+  } = args;
   const copy = [...array];
   copy[index] = newValue;
+  // restoring readonly to array
   return copy;
 }
 
@@ -28441,12 +28641,24 @@ function initializeGraphState(params) {
         hasBeenInteractedWith: false,
         range,
         snapStep,
-        segments: getDefaultSegments({
+        coords: getDefaultSegments({
           graph,
           step,
           range
         })
       };
+    case "linear":
+    case "linear-system":
+    case "ray":
+      return {
+        type: graph.type,
+        hasBeenInteractedWith: false,
+        range,
+        snapStep,
+        // Linear and ray graphs have 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);
 }
@@ -28475,6 +28687,38 @@ 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) {
+  var _state$coords;
+  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 _extends({}, initialGraph, {
+        coords: state.coords
+      });
+    // coords: CollinearTuple
+    case state.type === "linear" && initialGraph.type === "linear":
+    case state.type === "ray" && initialGraph.type === "ray":
+      return _extends({}, initialGraph, {
+        coords: (_state$coords = state.coords) == null ? void 0 : _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) => {
+  var _graph$coords;
+  return (
+    // Return two lines for a linear system, one for a ray or linear
+    ((_graph$coords = graph.coords) != null ? _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.createElement("svg", {
   width: "24",
@@ -29172,27 +29416,30 @@ const renderGraph = props => {
     state,
     dispatch
   } = props;
-  switch (state.type) {
+  const {
+    type
+  } = state;
+  switch (type) {
     case "segment":
       return /*#__PURE__*/React.createElement(SegmentGraph, {
         graphState: state,
         dispatch: dispatch
       });
-  }
-  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 _extends({}, initialGraph, {
-        coords: state.segments
+    case "linear":
+    case "linear-system":
+      return /*#__PURE__*/React.createElement(LinearGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "ray":
+      return /*#__PURE__*/React.createElement(RayGraph, {
+        graphState: state,
+        dispatch: dispatch
       });
+    default:
+      return new UnreachableCaseError(type);
   }
-  throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
-}
+};
 const MafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _props$backgroundImag, _props$backgroundImag2, _props$backgroundImag3, _props$backgroundImag4;
   const [width, height] = props.box;
@@ -41234,7 +41481,7 @@ const init = function init(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.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -42259,8 +42506,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",