@khanacademy/perseus 20.8.1 → 21.1.0

package/dist/types.d.ts

@@ -2,6 +2,7 @@ import type { ILogger } from "./logging/log";
 import type { Item } from "./multi-items/item-types";
 import type { PerseusAnswerArea, PerseusRenderer, PerseusWidget, PerseusWidgetsMap } from "./perseus-types";
 import type { SizeClass } from "./util/sizing-utils";
+import type { InteractiveGraphState } from "./widgets/interactive-graphs/types";
 import type { KeypadAPI } from "@khanacademy/math-input";
 import type { AnalyticsEventHandlerFn } from "@khanacademy/perseus-core";
 import type { LinterContextProps } from "@khanacademy/perseus-linter";
@@ -65,6 +66,7 @@ export type ChangeHandler = (arg1: {
     currentValue?: string;
     selected?: number;
     plot?: any;
+    graph?: InteractiveGraphState;
 }, callback?: () => unknown | null | undefined, silent?: boolean) => unknown;
 export type ImageUploader = (file: string, callback: (url: string) => unknown) => unknown;
 export type WidgetSize = "normal" | "small" | "mini";

package/dist/util/extract-perseus-data.d.ts

@@ -1,4 +1,4 @@
-import type { PerseusItem, PerseusRenderer } from "../perseus-types";
+import type { PerseusItem, PerseusWidgetsMap, PerseusRenderer } from "../perseus-types";
 /**
  * This function extracts the answers from the widgets.
  *
@@ -22,12 +22,11 @@ declare function getAnswersFromWidgets(widgets: PerseusRenderer["widgets"]): Rea
  * @param {PerseusRenderer["widgets"]} widgets
  * @returns
  */
-declare function injectWidgets(content: string, widgets: PerseusRenderer["widgets"]): string;
-export declare const getWidgetTypeFromWidgetKey: (widgetKey: string) => string;
-export declare const isWrongAnswerSupported: (widgetKeys: Array<string>) => boolean;
-export declare const shouldHaveIndividualAnswer: (widgetKey: string) => boolean;
+declare function injectWidgets(content: string, widgets: PerseusRenderer["widgets"], widgetProps?: PerseusWidgetsMap): string;
+export declare const isWrongAnswerSupported: (widgetIds: Array<string>, widgetMap: PerseusWidgetsMap) => boolean;
+export declare const shouldHaveIndividualAnswer: (widgetId: string, widgetMap: PerseusWidgetsMap) => boolean;
 export declare const getAnswerFromUserInput: (widgetType: string, userInput: any) => any;
-export declare const getCorrectAnswerForWidgetKey: (widgetKey: string, itemData: PerseusItem) => string | undefined;
-export declare const isWidgetKeyInContent: (perseusItem: PerseusItem, widgetKey: string) => boolean;
-export declare const getValidWidgetKeys: (perseusItem: PerseusItem) => Array<string>;
+export declare const getCorrectAnswerForWidgetId: (widgetId: string, itemData: PerseusItem) => string | undefined;
+export declare const isWidgetIdInContent: (perseusItem: PerseusItem, widgetId: string) => boolean;
+export declare const getValidWidgetIds: (perseusItem: PerseusItem) => Array<string>;
 export { getAnswersFromWidgets, injectWidgets };

package/dist/util/snowman-utils.d.ts

@@ -1,43 +1,3 @@
-export declare enum WidgetType {
-    Categorizer = "categorizer",
-    CSProgram = "cs-program",
-    Definition = "definition",
-    Dropdown = "dropdown",
-    Explanation = "explanation",
-    Expression = "expression",
-    GradedGroup = "graded-group",
-    GradedGroupAnswerBar = "graded-group-answer-bar",
-    GradedGroupSet = "graded-group-set",
-    Grapher = "grapher",
-    Group = "group",
-    Iframe = "iframe",
-    Image = "image",
-    InputNumber = "input-number",
-    Interaction = "interaction",
-    InteractiveGraph = "interactive-graph",
-    InteractiveNumberLine = "interactive-number-line",
-    LabelImage = "label-image",
-    Matcher = "matcher",
-    Matrix = "matrix",
-    Measurer = "measurer",
-    Molecule = "molecule",
-    NumberLine = "number-line",
-    NumericInput = "numeric-input",
-    Orderer = "orderer",
-    Passage = "passage",
-    PassageRef = "passage-ref",
-    PassageRefTarget = "passage-ref-target",
-    Plotter = "plotter",
-    Protractor = "protractor",
-    PythonProgram = "python-program",
-    Radio = "radio",
-    Sorter = "sorter",
-    Table = "table",
-    Unit = "unit",
-    Video = "video",
-    VideoTranscriptLink = "video-transcript-link"
-}
-export type WidgetId = `${WidgetType} ${number}`;
 export declare const QUESTION_WIDGETS: ReadonlyArray<string>;
 /**
  * Regex for widget placeholders in a string.
@@ -55,35 +15,3 @@ export declare function getWidgetRegex(): RegExp;
  * @returns {string}
  */
 export declare function addWidget(id: string): string;
-/**
- * Extract all widget IDs, which includes the widget type and instance number.
- * example output: ['radio 1', 'categorizer 1', 'categorizor 2']
- *
- * Content should contain Perseus widget placeholders,
- * which look like: '[[☃ radio 1]]'.
- *
- * @param {string} content
- * @returns {Array<WidgetId>} widgets
- */
-export declare function getAllWidgetIds(content: string): Array<WidgetId>;
-/**
- * Extract all widget types from a Perseus JSON content string.
- * This does not include the instance number and prevents duplicates.
- * example output: ['radio', 'categorizer']
- *
- * @param {string} content
- * @returns {Array<WidgetId>}
- */
-export declare function getAllWidgetTypes(content: string): Array<WidgetId>;
-/**
- * Extract the widget IDs of all widgets considered question widgets. Widget IDs
- * include widget type and instance number.
- * example output: ['radio 1', 'categorizer 1']
- *
- * Content should contain Perseus widget placeholders,
- * which look like: '[[☃ radio 1]]'.
- *
- * @param {string} content
- * @returns Array<WidgetId>
- */
-export declare function getQuestionWidgetIds(content: string): Array<WidgetId>;

package/dist/util/test-utils.d.ts

@@ -1,4 +1,4 @@
-import type { PerseusItem } from "../perseus-types";
+import type { CategorizerWidget, ExpressionWidget, InteractiveGraphWidget, NumericInputWidget, PerseusItem, RadioWidget } from "../perseus-types";
 export declare const genericPerseusItemData: PerseusItem;
 /**
  * Generate a Perseus item object for testing purposes.
@@ -7,6 +7,41 @@ export declare const genericPerseusItemData: PerseusItem;
  * uses a basic Perseus object and updates it with custom values as needed.
  *
  * @param {Partial<PerseusItem>} customFields
- * @returns PerseusItem
+ * @returns {PerseusItem}
  */
 export declare function generateTestPerseusItem(customFields?: Partial<PerseusItem>): PerseusItem;
+/**
+ * Creates an object with the bare amount
+ * of data to be a properly typed RadioWidget
+ *
+ * @returns {RadioWidget} skeleton RadioWidget for testing
+ */
+export declare function generateTestRadioWidget(): RadioWidget;
+/**
+ * Creates an object with the bare amount
+ * of data to be a properly typed InteractiveGraphWidget
+ *
+ * @returns {InteractiveGraphWidget} skeleton InteractiveGraphWidget for testing
+ */
+export declare function generateTestInteractiveGraphWidget(): InteractiveGraphWidget;
+/**
+ * Creates an object with the bare amount
+ * of data to be a properly typed InteractiveGraphWidget
+ *
+ * @returns {InteractiveGraphWidget} skeleton InteractiveGraphWidget for testing
+ */
+export declare function generateTestCategorizerWidget(): CategorizerWidget;
+/**
+ * Creates an object with the bare amount
+ * of data to be a properly typed ExpressionWidget
+ *
+ * @returns {ExpressionWidget} skeleton ExpressionWidget for testing
+ */
+export declare function generateTestExpressionWidget(): ExpressionWidget;
+/**
+ * Creates an object with the bare amount
+ * of data to be a properly typed NumericInputWidget
+ *
+ * @returns {NumericInputWidget} skeleton NumericInputWidget for testing
+ */
+export declare function generateTestNumericInputWidget(): NumericInputWidget;

package/dist/util/widget-enum-utils.d.ts

@@ -4,8 +4,6 @@
  * PerseusWidgetUsedInProblemAttempt CEDAR event, we needed
  * to: get the type and convert that to an enum value.
  */
-type WidgetName = "categorizer" | "cs-program" | "definition" | "deprecated-standin" | "dropdown" | "explanation" | "expression" | "graded-group-set" | "graded-group" | "grapher" | "group" | "iframe" | "image" | "input-number" | "interaction" | "interactive-graph" | "label-image" | "lights-puzzle" | "matcher" | "matrix" | "measurer" | "molecule-renderer" | "number-line" | "numeric-input" | "orderer" | "passage" | "passage-ref" | "passage-ref-target" | "plotter" | "python-program" | "reaction-diagram" | "radio" | "sequence" | "simulator" | "sorter" | "table" | "unit-input" | "video";
 type WidgetEnum = "CATEGORIZER" | "CS_PROGRAM" | "DEFINITION" | "DEPRECATED_STANDIN" | "DROPDOWN" | "EXPLANATION" | "EXPRESSION" | "GRADED_GROUP" | "GRADED_GROUP_SET" | "GRAPHER" | "GROUP" | "IFRAME" | "IMAGE" | "INPUT_NUMBER" | "INTERACTIVE" | "INTERACTIVE_GRAPH" | "LABEL_IMAGE" | "LIGHTS_PUZZLE" | "MATCHER" | "MATRIX" | "MEASURER" | "MOLECULE" | "NUMBER_LINE" | "NUMERIC_INPUT" | "ORDERER" | "PASSAGE" | "PASSAGE_REF" | "PASSAGE_REF_TARGET" | "PLOTTER" | "PYTHON_PROGRAM" | "REACTION_DIAGRAM" | "RADIO" | "SEQUENCE" | "SIMULATOR" | "SORTER" | "TABLE" | "UNIT" | "VIDEO";
-export declare function convertWidgetNameToEnum(name: WidgetName): WidgetEnum;
-export declare function getWidgetTypeFromWidgetId(widgetId: string): WidgetName;
+export declare function convertWidgetNameToEnum(name: string): WidgetEnum;
 export {};

package/dist/widget-type-utils.d.ts

@@ -0,0 +1,64 @@
+import type { PerseusItem, PerseusWidget, PerseusWidgetsMap } from "./perseus-types";
+/**
+ * Get a widget type by a widget's ID
+ * (please don't derive type from ID)
+ *
+ * @param {string} widgetId the ID of the widget
+ * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
+ * @returns {string} the widget type (ie "radio")
+ */
+export declare function getWidgetTypeByWidgetId(WidgetId: string, widgetMap: PerseusWidgetsMap): string | null;
+/**
+ * Does the content have a specific type of widget?
+ *
+ * @param {string} type the type of the widget in question (ie "radio")
+ * @param {string} content the string to search through
+ * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
+ * @returns {boolean} if the content includes the widget type
+ */
+export declare function contentHasWidgetType(type: string, content: string, widgetMap: PerseusWidgetsMap): boolean;
+/**
+ * Extract all widget IDs, which includes the widget type and instance number.
+ * example output: ['radio 1', 'categorizer 1', 'categorizor 2']
+ *
+ * Content should contain Perseus widget placeholders,
+ * which look like: '[[☃ radio 1]]'.
+ *
+ * @param {string} content
+ * @returns {ReadonlyArray<string>} widgetIds
+ */
+export declare function getWidgetIdsFromContent(content: string): ReadonlyArray<string>;
+/**
+ * Get a list of widget IDs from content,
+ * but only for specific widget types
+ *
+ * @param {string} type the type of widget (ie "radio")
+ * @param {string} content the string to parse
+ * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
+ * @returns {ReadonlyArray<string>} the widget type (ie "radio")
+ */
+export declare function getWidgetIdsFromContentByType(type: string, content: string, widgetMap: PerseusWidgetsMap): ReadonlyArray<string>;
+/**
+ * Pull the widget map out of ItemData
+ *
+ * @param {PerseusItem} PerseusItem containing a widgetMap
+ * @returns {WidgetMap} the widget map in the PerseusItem
+ */
+export declare function getWidgetsMapFromItemData(itemData: PerseusItem): PerseusWidgetsMap;
+/**
+ * Get the widget information from a WidgetMap
+ *
+ * @param {string} widgetId the ID of the widget
+ * @returns {PerseusWidget | null} the widget data if it exists, otherwise null
+ */
+export declare function getWidgetFromWidgetMap(widgetId: string, widgetMap: PerseusWidgetsMap): PerseusWidget | null;
+/**
+ * Get select widgets from a widget map.
+ * Useful for multi-items that needs to split
+ * one PerseusItem into several
+ *
+ * @param {ReadonlyArray<string>} widgetIds to extract
+ * @param {PerseusWidgetsMap} widgetMap to extract from
+ * @return {PerseusWidgetsMap} a new widget map with requested widgets
+ */
+export declare function getWidgetsFromWidgetMap(widgetIds: ReadonlyArray<string>, widgetMap: PerseusWidgetsMap): PerseusWidgetsMap;

package/dist/widgets/interactive-graph.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import type { Coord } from "../interactive2/types";
 import type { PerseusGraphType, PerseusGraphTypeAngle, PerseusGraphTypePoint, PerseusGraphTypePolygon, PerseusGraphTypeSegment, PerseusInteractiveGraphWidgetOptions } from "../perseus-types";
 import type { Widget } from "../renderer";
-import type { PerseusScore, WidgetProps } from "../types";
+import type { ChangeHandler, PerseusScore, WidgetProps } from "../types";
 import type { QuadraticCoefficient, SineCoefficient, Range } from "../util/geometry";
 type RenderProps = PerseusInteractiveGraphWidgetOptions;
 type Rubric = PerseusInteractiveGraphWidgetOptions;
@@ -81,7 +81,7 @@ declare class LegacyInteractiveGraph extends React.Component<Props, State> {
     createPointForPolygonType: (arg1: Coord, arg2: number) => any;
     updateCoordsFromPoints: () => void;
     clearCoords: () => void;
-    onChange: (arg1: any) => void;
+    onChange: ChangeHandler;
     addPointControls: () => void;
     removePointControls: () => void;
     addSegmentControls: () => void;
@@ -155,7 +155,7 @@ declare class InteractiveGraph extends React.Component<Props, State> {
     static getRayEquationString(props: Props): string;
     static getPolygonEquationString(props: Props): string;
     static getAngleEquationString(props: Props): string;
-    static validate(state: PerseusGraphType, rubric: Rubric, component: any): PerseusScore;
+    static validate(userInput: PerseusGraphType, rubric: Rubric, component: any): PerseusScore;
     static getUserInputFromProps(props: Props): PerseusGraphType;
 }
 declare const _default: Readonly<{

package/dist/widgets/interactive-graphs/axis-arrows.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function AxisArrows(): JSX.Element;

package/dist/widgets/interactive-graphs/graphs/components/angle.d.ts

@@ -1,13 +1,23 @@
 /// <reference types="react" />
 import { vec } from "mafs";
+import type { CollinearTuple } from "../../../../perseus-types";
 import type { Interval } from "mafs";
 interface Props {
     centerPoint: vec.Vector2;
     endPoints: [vec.Vector2, vec.Vector2];
-    polygonPoints: readonly vec.Vector2[];
+    polygonLines: readonly CollinearTuple[];
     active: boolean;
     range: [Interval, Interval];
     showAngles: boolean;
 }
-export declare const Angle: ({ centerPoint, endPoints, range, polygonPoints, showAngles, }: Props) => JSX.Element | null;
+export declare const Angle: ({ centerPoint, endPoints, range, polygonLines, showAngles, }: Props) => JSX.Element | null;
+/**
+ * Determines if an angle is an inside (false) or outside (true) angle.
+ * They way, we know to flip the `largeArc` and `sweepArc` flags.
+ * Uses the priciple that a ray from a point inside a polygon will intersect
+ * with an odd number of lines, while a ray from a point outside the polygon
+ * will intersect with an even number of lines.
+ * https://stackoverflow.com/questions/217578/how-can-i-determine-whether-a-2d-point-is-within-a-polygon
+ */
+export declare const shouldDrawArcOutside: (midpoint: vec.Vector2, vertex: vec.Vector2, range: [Interval, Interval], polygonLines: readonly CollinearTuple[]) => boolean;
 export {};

package/dist/widgets/interactive-graphs/graphs/components/css-transform-wrapper.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+/**
+ * Wrapper with Mafs transform styles for SVG elements.
+ * Scales and translates the SVG element to match the Mafs view.
+ * Use if you do not need/want to use the hook in `use-transform.ts`.
+ */
+export declare const MafsCssTransformWrapper: ({ children, }: React.PropsWithChildren<unknown>) => JSX.Element;

package/dist/widgets/interactive-graphs/graphs/components/text-label.d.ts

@@ -0,0 +1,6 @@
+import type { TextProps } from "mafs";
+import type { PropsWithChildren } from "react";
+type Props = PropsWithChildren<Pick<TextProps, "x" | "y" | "attach" | "attachDistance">>;
+export declare const TextLabel: ({ children, ...rest }: Props) => JSX.Element;
+export declare const SvgDefs: () => JSX.Element;
+export {};

package/dist/widgets/interactive-graphs/graphs/point.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { PointGraphState, MafsGraphProps } from "../types";
+type PointGraphProps = MafsGraphProps<PointGraphState>;
+export declare function PointGraph(props: PointGraphProps): JSX.Element;
+export {};

package/dist/widgets/interactive-graphs/graphs/utils.d.ts

@@ -1,3 +1,4 @@
+import type { CollinearTuple } from "../../../perseus-types";
 import type { Interval, vec } from "mafs";
 /**
  * Given two points, find the tips that extends through the points to the edge of the range.
@@ -5,3 +6,4 @@ import type { Interval, vec } from "mafs";
  * @param extendFrom - The point that the line extends from to the edge of the graph.
  */
 export declare const getRayIntersectionCoords: (collinearPoint: vec.Vector2, extendFrom: vec.Vector2, range: [Interval, Interval]) => [number, number];
+export declare const getLines: (points: readonly vec.Vector2[]) => CollinearTuple[];

package/dist/widgets/interactive-graphs/mafs-graph.d.ts

@@ -1,80 +1,21 @@
 import * as React from "react";
+import type { InteractiveGraphProps } from "./types";
 import type { Widget } from "../../renderer";
 import "mafs/core.css";
 import "./mafs-styles.css";
-export declare const MafsGraph: React.ForwardRefExoticComponent<import("../..").PerseusInteractiveGraphWidgetOptions & {
-    widgetId: string;
-    alignment: string | null | undefined;
-    static: boolean | null | undefined;
-    problemNum: number | null | undefined;
-    apiOptions: Readonly<Readonly<{
-        isArticle?: boolean | undefined;
-        onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
-        onFocusChange?: ((newFocusPath: import("../..").FocusPath, oldFocusPath: import("../..").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
-        GroupMetadataEditor?: React.ComponentType<any> | undefined;
-        showAlignmentOptions?: boolean | undefined;
-        readOnly?: boolean | undefined;
-        answerableCallback?: ((arg1: boolean) => unknown) | undefined;
-        getAnotherHint?: (() => unknown) | undefined;
-        interactionCallback?: ((widgetData: {
-            [widgetId: string]: any;
-        }) => void) | undefined;
-        groupAnnotator?: ((groupNumber: number, widgetId: string) => React.ReactNode) | undefined;
-        imagePlaceholder?: React.ReactNode;
-        widgetPlaceholder?: React.ReactNode;
-        baseElements?: {
-            Link: React.ComponentType<any>;
-        } | undefined;
-        imagePreloader?: ((dimensions: import("../../types").Dimensions) => React.ReactNode) | undefined;
-        trackInteraction?: ((args: {
-            type: string;
-            id: string;
-            correct?: boolean | undefined;
-        } & Partial<import("../../types").TrackingGradedGroupExtraArguments> & Partial<import("../../types").TrackingSequenceExtraArguments>) => void) | undefined;
-        customKeypad?: boolean | undefined;
-        nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
-        isMobile?: boolean | undefined;
-        setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
-        useDraftEditor?: boolean | undefined;
-        hintProgressColor?: string | undefined;
-        canScrollPage?: boolean | undefined;
-        inModal?: boolean | undefined;
-        crossOutEnabled?: boolean | undefined;
-        editorChangeDelay?: number | undefined;
-        flags?: Record<string, boolean | Record<string, boolean>> | undefined;
-        onWidgetStartProps?: ((widgets: import("../..").PerseusWidgetsMap) => import("../..").PerseusWidgetsMap) | undefined;
-    }> & {
-        GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
-        baseElements: {
-            Link: React.ComponentType<any>;
-        };
-        canScrollPage: NonNullable<boolean | undefined>;
-        crossOutEnabled: NonNullable<boolean | undefined>;
-        editorChangeDelay: number;
-        groupAnnotator: (groupNumber: number, widgetId: string) => React.ReactNode;
-        inModal: NonNullable<boolean | undefined>;
-        isArticle: NonNullable<boolean | undefined>;
-        isMobile: NonNullable<boolean | undefined>;
-        onFocusChange: (newFocusPath: import("../..").FocusPath, oldFocusPath: import("../..").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown;
-        onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
-        readOnly: NonNullable<boolean | undefined>;
-        setDrawingAreaAvailable: (arg1: boolean) => unknown;
-        showAlignmentOptions: NonNullable<boolean | undefined>;
-        useDraftEditor: NonNullable<boolean | undefined>;
-    }>;
-    keypadElement?: any;
-    questionCompleted?: boolean | undefined;
-    onFocus: (blurPath: import("../..").FocusPath) => void;
-    onBlur: (blurPath: import("../..").FocusPath) => void;
-    findWidgets: (arg1: import("../../types").FilterCriterion) => readonly any[];
-    reviewModeRubric: import("../..").PerseusInteractiveGraphWidgetOptions;
-    onChange: import("../..").ChangeHandler;
-    trackInteraction: (extraData?: {} | undefined) => void;
-    isLastUsedWidget: boolean;
-    linterContext: import("@khanacademy/perseus-linter").LinterContextProps;
-    containerSizeClass: import("../../util/sizing-utils").SizeClass;
-} & {
-    children?: React.ReactNode;
-} & {
+export type MafsWrapperProps = {
     box: [number, number];
+    backgroundImage?: InteractiveGraphProps["backgroundImage"];
+    graph: InteractiveGraphProps["graph"];
+    lockedFigures?: InteractiveGraphProps["lockedFigures"];
+    range: InteractiveGraphProps["range"];
+    snapStep: InteractiveGraphProps["snapStep"];
+    step: InteractiveGraphProps["step"];
+    gridStep: InteractiveGraphProps["gridStep"];
+    containerSizeClass: InteractiveGraphProps["containerSizeClass"];
+    markings: InteractiveGraphProps["markings"];
+    onChange: InteractiveGraphProps["onChange"];
+};
+export declare const MafsGraph: React.ForwardRefExoticComponent<MafsWrapperProps & {
+    children?: React.ReactNode;
 } & React.RefAttributes<Partial<Widget>>>;

package/dist/widgets/interactive-graphs/mafs-supported-graph-types.d.ts

@@ -1,3 +1,3 @@
-export declare const mafsSupportedGraphTypes: readonly ["segment", "linear", "linear-system", "ray", "polygon"];
+export declare const mafsSupportedGraphTypes: readonly ["segment", "linear", "linear-system", "ray", "polygon", "point"];
 export type MafsSupportedGraphType = (typeof mafsSupportedGraphTypes)[number];
 export declare const trueForAllMafsSupportedGraphTypes: Record<MafsSupportedGraphType, true>;

package/dist/widgets/interactive-graphs/reducer/interactive-graph-action.d.ts

@@ -1,13 +1,13 @@
 import type { vec } from "mafs";
-export type InteractiveGraphAction = MoveControlPoint | MoveLine | MoveAll;
+export type InteractiveGraphAction = MoveControlPoint | MoveLine | MoveAll | MovePoint;
 export declare const MOVE_CONTROL_POINT = "move-control-point";
 export interface MoveControlPoint {
     type: typeof MOVE_CONTROL_POINT;
-    itemIndex?: number;
+    itemIndex: number;
     pointIndex: number;
     destination: vec.Vector2;
 }
-export declare function moveControlPoint(pointIndex: number, destination: vec.Vector2, itemIndex?: number): MoveControlPoint;
+export declare function moveControlPoint(pointIndex: number, destination: vec.Vector2, itemIndex: number): MoveControlPoint;
 export declare const MOVE_ALL = "move-all";
 export declare const MOVE_LINE = "move-line";
 interface MoveItem {
@@ -24,4 +24,11 @@ export interface MoveAll extends MoveItem {
 export declare function moveLine(itemIndex: number, delta: vec.Vector2): MoveLine;
 /** This action assumes a flat array of vectors */
 export declare const moveAll: (delta: vec.Vector2) => MoveAll;
+export declare const MOVE_POINT = "move-point";
+export interface MovePoint {
+    type: typeof MOVE_POINT;
+    index: number;
+    destination: vec.Vector2;
+}
+export declare function movePoint(index: number, destination: vec.Vector2): MovePoint;
 export {};

package/dist/widgets/interactive-graphs/reducer/interactive-graph-reducer.d.ts

@@ -1,3 +1,3 @@
 import { type InteractiveGraphAction } from "./interactive-graph-action";
 import type { InteractiveGraphState } from "../types";
-export declare function interactiveGraphReducer<GraphState extends InteractiveGraphState>(state: Readonly<GraphState>, action: InteractiveGraphAction): GraphState;
+export declare function interactiveGraphReducer(state: InteractiveGraphState, action: InteractiveGraphAction): InteractiveGraphState;

package/dist/widgets/interactive-graphs/reducer/interactive-graph-state.d.ts

@@ -7,4 +7,4 @@ export declare function initializeGraphState(params: {
     snapStep: vec.Vector2;
     graph: PerseusGraphType;
 }): InteractiveGraphState;
-export declare function getGradableGraph<GraphType extends PerseusGraphType>(state: InteractiveGraphState, initialGraph: GraphType): GraphType;
+export declare function getGradableGraph(state: InteractiveGraphState, initialGraph: PerseusGraphType): PerseusGraphType;

package/dist/widgets/interactive-graphs/reducer/use-graph-state.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { InteractiveGraphAction } from "./interactive-graph-action";
+import type { InteractiveGraphState } from "../types";
+export declare const GraphStateContext: React.Context<{
+    state: InteractiveGraphState;
+    dispatch: React.Dispatch<InteractiveGraphAction>;
+}>;
+export default function useGraphState(): {
+    state: InteractiveGraphState;
+    dispatch: React.Dispatch<InteractiveGraphAction>;
+};

package/dist/widgets/interactive-graphs/types.d.ts

@@ -1,6 +1,7 @@
 import type { InteractiveGraphAction } from "./reducer/interactive-graph-action";
-import type { CollinearTuple, PerseusGraphType, PerseusGraphTypeLinearSystem, PerseusGraphTypePolygon, PerseusGraphTypeRay, PerseusGraphTypeSegment, PerseusInteractiveGraphWidgetOptions } from "../../perseus-types";
+import type { PerseusGraphType, PerseusInteractiveGraphWidgetOptions } from "../../perseus-types";
 import type { WidgetProps } from "../../types";
+import type { Coord } from "@khanacademy/perseus";
 import type { Interval, vec } from "mafs";
 export type InteractiveGraphProps = WidgetProps<PerseusInteractiveGraphWidgetOptions, PerseusInteractiveGraphWidgetOptions>;
 export type MafsGraphProps<T extends InteractiveGraphState> = {
@@ -12,17 +13,37 @@ export interface InitializeGraphStateParams<T extends PerseusGraphType> {
     range: [Interval, Interval];
     step: vec.Vector2;
 }
-export type InteractiveGraphState = SegmentGraphState | LinearGraphState | RayGraphState | PolygonGraphState;
+export type InteractiveGraphState = SegmentGraphState | LinearGraphState | RayGraphState | PolygonGraphState | PointGraphState | CircleGraphState;
 export interface InteractiveGraphStateCommon {
     hasBeenInteractedWith: boolean;
     range: [Interval, Interval];
     snapStep: vec.Vector2;
 }
-export type SegmentGraphState = InteractiveGraphStateCommon & Omit<PerseusGraphTypeSegment, "numSegments">;
-export type LinearGraphState = InteractiveGraphStateCommon & Omit<PerseusGraphTypeLinearSystem, "type"> & {
+export interface SegmentGraphState extends InteractiveGraphStateCommon {
+    type: "segment";
+    coords: PairOfPoints[];
+}
+export interface LinearGraphState extends InteractiveGraphStateCommon {
     type: "linear" | "linear-system";
-};
-export type RayGraphState = InteractiveGraphStateCommon & Omit<PerseusGraphTypeRay, "coords"> & {
-    coords: readonly CollinearTuple[];
-};
-export type PolygonGraphState = InteractiveGraphStateCommon & PerseusGraphTypePolygon;
+    coords: PairOfPoints[];
+}
+export interface PointGraphState extends InteractiveGraphStateCommon {
+    type: "point";
+    coords: Coord[];
+}
+export interface RayGraphState extends InteractiveGraphStateCommon {
+    type: "ray";
+    coords: PairOfPoints[];
+}
+export interface PolygonGraphState extends InteractiveGraphStateCommon {
+    type: "polygon";
+    showAngles: boolean;
+    showSides: boolean;
+    coords: Coord[];
+}
+export interface CircleGraphState extends InteractiveGraphStateCommon {
+    type: "circle";
+    center: Coord;
+    radius: number;
+}
+export type PairOfPoints = [Coord, Coord];

package/dist/widgets/interactive-graphs/utils.d.ts

@@ -5,5 +5,5 @@ import type { PerseusInteractiveGraphWidgetOptions } from "../../perseus-types";
  * https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
  */
 export declare const TARGET_SIZE = 44;
-export declare const normalizePoints: <A extends readonly Coord[]>(range: PerseusInteractiveGraphWidgetOptions["range"], step: PerseusInteractiveGraphWidgetOptions["step"], coordsList: A, noSnap?: boolean) => A;
-export declare const normalizeCoords: <A extends readonly Coord[]>(coordsList: A, ranges: PerseusInteractiveGraphWidgetOptions["range"]) => A;
+export declare const normalizePoints: <A extends Coord[]>(range: PerseusInteractiveGraphWidgetOptions["range"], step: PerseusInteractiveGraphWidgetOptions["step"], coordsList: A, noSnap?: boolean) => A;
+export declare const normalizeCoords: <A extends Coord[]>(coordsList: A, ranges: PerseusInteractiveGraphWidgetOptions["range"]) => A;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "20.8.1",
+    "version": "21.1.0",
     "publishConfig": {
         "access": "public"
     },