@khanacademy/perseus 76.0.3 → 76.1.0

package/dist/widgets/image/components/image-info-area.d.ts

@@ -2,17 +2,7 @@ import { type Interval, type PerseusImageBackground, type PerseusImageLabel, typ
 import * as React from "react";
 import type { APIOptions } from "../../../types";
 import type { LinterContextProps } from "@khanacademy/perseus-linter";
-export interface ImageInfoAreaProps {
-    backgroundImage: PerseusImageBackground;
-    title: string;
-    caption: string;
-    alt: string;
-    longDescription: string;
-    box: Size;
-    labels: Array<PerseusImageLabel>;
-    range: [Interval, Interval];
-    linterContext: LinterContextProps;
-    apiOptions: APIOptions;
+export interface ZoomProps {
     /**
      * zoomSize represents the larger of the image’s natural size (calculated on load)
      * and the saved backgroundImage size (specified when the content is written). This
@@ -22,12 +12,29 @@ export interface ImageInfoAreaProps {
      * determine if the image is large enough to allow zooming.
      */
     zoomSize: Size;
+}
+export interface GifProps {
     isGifPlaying: boolean;
     setIsGifPlaying: (isPaused: boolean) => void;
 }
+export interface CommonImageProps {
+    backgroundImage: PerseusImageBackground;
+    scale: number;
+    title: string;
+    caption: string;
+    alt: string;
+    longDescription: string;
+    box: Size;
+    labels: Array<PerseusImageLabel>;
+    range: [Interval, Interval];
+    linterContext: LinterContextProps;
+    apiOptions: APIOptions;
+}
+type Props = ZoomProps & GifProps & CommonImageProps;
 /**
  * The ImageInfoArea component includes the GIF controls, description modal
  * launcher, and caption for the image. This is displayed underneath the image
  * in the Image widget.
  */
-export declare const ImageInfoArea: (props: ImageInfoAreaProps) => React.JSX.Element | null;
+export declare const ImageInfoArea: (props: Props) => React.JSX.Element | null;
+export {};

package/dist/widgets/image/utils.d.ts

@@ -1,4 +1,5 @@
 export declare function isGif(url: string): boolean;
+export declare function isSvg(url: string): boolean;
 export declare const earthMoonImage: {
     url: string;
     width: number;

package/dist/widgets/interactive-graphs/graphs/absolute-value.d.ts

@@ -0,0 +1,27 @@
+import { vec } from "mafs";
+import { type I18nContextType } from "../../../components/i18n-context";
+import type { AbsoluteValueGraphState, Dispatch, InteractiveGraphElementSuite } from "../types";
+import type { Coord } from "@khanacademy/perseus-core";
+export declare function renderAbsoluteValueGraph(state: AbsoluteValueGraphState, dispatch: Dispatch, i18n: I18nContextType): InteractiveGraphElementSuite;
+export type AbsoluteValueCoefficients = {
+    m: number;
+    h: number;
+    v: number;
+};
+/**
+ * Compute the coefficients [m, h, v] for f(x) = m * |x - h| + v from two
+ * control points: p1 (vertex) and p2 (a point on one arm).
+ *
+ * Returns undefined if p1 and p2 share the same x-coordinate (slope undefined).
+ */
+export declare function getAbsoluteValueCoefficients(coords: ReadonlyArray<Coord>): AbsoluteValueCoefficients | undefined;
+/**
+ * Keyboard constraint for absolute value control points.
+ * Skips any horizontal position where both points would share the same x.
+ */
+export declare const getAbsoluteValueKeyboardConstraint: (coords: ReadonlyArray<Coord>, snapStep: vec.Vector2, pointIndex: number) => {
+    up: vec.Vector2;
+    down: vec.Vector2;
+    left: vec.Vector2;
+    right: vec.Vector2;
+};

package/dist/widgets/interactive-graphs/graphs/components/asymptote-drag-handle.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { vec } from "mafs";
+type Props = {
+    /** Pixel-space center of the handle (already transformed from graph coordinates). */
+    center: vec.Vector2;
+    active: boolean;
+    focused: boolean;
+    /**
+     * "horizontal" — wide pill with a 3×2 grip dot grid (exponential asymptote)
+     * "vertical"   — tall pill with a 2×3 grip dot grid (logarithm asymptote)
+     */
+    orientation: "horizontal" | "vertical";
+};
+export declare function AsymptoteDragHandle(props: Props): React.JSX.Element;
+export {};

package/dist/widgets/interactive-graphs/graphs/components/movable-asymptote.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import type { KeyboardMovementConstraint } from "../use-draggable";
+import type { vec } from "mafs";
+type Props = {
+    /** Pixel-space start point of the asymptote line. */
+    start: vec.Vector2;
+    /** Pixel-space end point of the asymptote line. */
+    end: vec.Vector2;
+    /** Pixel-space center of the drag handle (midpoint of the line). */
+    mid: vec.Vector2;
+    /** Graph-space position used by useDraggable for movement tracking. */
+    point: vec.Vector2;
+    /** Called with the new graph-space position when the asymptote moves. */
+    onMove: (destination: vec.Vector2) => void;
+    /** Keyboard movement constraint (e.g. prevent landing between curve points). Defaults to unconstrained. */
+    constrainKeyboardMovement?: KeyboardMovementConstraint;
+    /**
+     * "horizontal" — asymptote is a horizontal line (exponential graph)
+     * "vertical"   — asymptote is a vertical line (logarithm graph)
+     */
+    orientation: "horizontal" | "vertical";
+    /** Accessible label for the asymptote drag target. */
+    ariaLabel: string;
+};
+export declare function MovableAsymptote(props: Props): React.JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import { vec } from "mafs";
+import { type I18nContextType } from "../../../components/i18n-context";
+import type { ExponentialGraphState, Dispatch, InteractiveGraphElementSuite } from "../types";
+import type { Coord } from "@khanacademy/perseus-core";
+export declare function renderExponentialGraph(state: ExponentialGraphState, dispatch: Dispatch, i18n: I18nContextType): InteractiveGraphElementSuite;
+export declare const constrainAsymptoteKeyboard: (p: vec.Vector2, coords: ReadonlyArray<Coord>, snapStep: vec.Vector2) => vec.Vector2;
+export declare const getExponentialKeyboardConstraint: (coords: ReadonlyArray<Coord>, asymptote: number, snapStep: vec.Vector2, pointIndex: number) => {
+    up: vec.Vector2;
+    down: vec.Vector2;
+    left: vec.Vector2;
+    right: vec.Vector2;
+};

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

@@ -0,0 +1,14 @@
+import { vec } from "mafs";
+import { type I18nContextType } from "../../../components/i18n-context";
+import type { TangentGraphState, Dispatch, InteractiveGraphElementSuite } from "../types";
+import type { NamedTangentCoefficient } from "@khanacademy/kmath";
+import type { Coord } from "@khanacademy/perseus-core";
+export declare function renderTangentGraph(state: TangentGraphState, dispatch: Dispatch, i18n: I18nContextType): InteractiveGraphElementSuite;
+export declare const getTangentKeyboardConstraint: (coords: ReadonlyArray<Coord>, snapStep: vec.Vector2, pointIndex: number) => {
+    up: vec.Vector2;
+    down: vec.Vector2;
+    left: vec.Vector2;
+    right: vec.Vector2;
+};
+export declare const computeTangent: (x: number, tangentCoefficients: NamedTangentCoefficient) => number;
+export declare const getTangentCoefficients: (coords: ReadonlyArray<Coord>) => NamedTangentCoefficient | undefined;

package/dist/widgets/interactive-graphs/interactive-graph-question-builder.d.ts

@@ -99,6 +99,16 @@ declare class InteractiveGraphQuestionBuilder {
         coords?: [Coord, Coord];
         startCoords?: [Coord, Coord];
     }): InteractiveGraphQuestionBuilder;
+    withExponential(options?: {
+        coords?: [Coord, Coord];
+        asymptote?: number;
+        startCoords?: [Coord, Coord];
+        startAsymptote?: number;
+    }): InteractiveGraphQuestionBuilder;
+    withTangent(options?: {
+        coords?: [Coord, Coord];
+        startCoords?: [Coord, Coord];
+    }): InteractiveGraphQuestionBuilder;
     withPolygon(snapTo?: SnapTo, options?: {
         match?: "similar" | "congruent" | "approx";
         numSides?: number | "unlimited";
@@ -120,6 +130,10 @@ declare class InteractiveGraphQuestionBuilder {
         snapDegrees?: number;
         match?: "congruent";
     }): InteractiveGraphQuestionBuilder;
+    withAbsoluteValue(options?: {
+        coords?: [Coord, Coord];
+        startCoords?: [Coord, Coord];
+    }): InteractiveGraphQuestionBuilder;
     addLockedPointAt(x: number, y: number, options?: {
         color?: LockedFigureColor;
         filled?: boolean;

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

@@ -5,7 +5,7 @@ import type { Coord } from "../../interactive2/types";
 import type { WidgetProps } from "../../types";
 import type { InteractiveGraphPromptJSON } from "../../widget-ai-utils/interactive-graph/interactive-graph-ai-utils";
 import type { UnsupportedWidgetPromptJSON } from "../../widget-ai-utils/unsupported-widget";
-import type { QuadraticCoefficient, SineCoefficient, Range } from "@khanacademy/kmath";
+import type { QuadraticCoefficient, SineCoefficient, TangentCoefficient, Range } from "@khanacademy/kmath";
 import type { PerseusGraphType, PerseusGraphTypeAngle, PerseusGraphTypePoint, PerseusGraphTypeSegment, PerseusInteractiveGraphWidgetOptions, GraphRange, InteractiveGraphPublicWidgetOptions, LockedFigure, PerseusImageBackground, MarkingsType, PerseusInteractiveGraphUserInput, AxisLabelLocation, ShowAxisArrows } from "@khanacademy/perseus-core";
 type InteractiveGraphProps = {
     /**
@@ -258,6 +258,12 @@ declare class InteractiveGraph extends React.Component<Props, State> {
     static getCurrentSinusoidCoefficients(props: Props): SineCoefficient;
     static defaultSinusoidCoords(props: Props): Coord[];
     static getSinusoidEquationString(props: Props): string;
+    static defaultExponentialCoords(props: Props): Coord[];
+    static getExponentialEquationString(props: Props): string;
+    static getAbsoluteValueEquationString(props: Props): string;
+    static getCurrentTangentCoefficients(props: Props): TangentCoefficient;
+    static defaultTangentCoords(props: Props): Coord[];
+    static getTangentEquationString(props: Props): string;
     static getCircleEquationString(props: Props): string;
     static getLinearSystemEquationString(props: Props): string;
     static getPointEquationString(props: Props): string;

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

@@ -1,6 +1,6 @@
 import type { Coord } from "../../../interactive2/types";
 import type { InteractiveGraphState, PairOfPoints } from "../types";
-import type { PerseusGraphType, PerseusGraphTypeAngle, PerseusGraphTypeCircle, PerseusGraphTypeLinear, PerseusGraphTypeLinearSystem, PerseusGraphTypePoint, PerseusGraphTypePolygon, PerseusGraphTypeQuadratic, PerseusGraphTypeRay, PerseusGraphTypeSegment, PerseusGraphTypeSinusoid } from "@khanacademy/perseus-core";
+import type { PerseusGraphType, PerseusGraphTypeAbsoluteValue, PerseusGraphTypeAngle, PerseusGraphTypeCircle, PerseusGraphTypeLinear, PerseusGraphTypeLinearSystem, PerseusGraphTypePoint, PerseusGraphTypePolygon, PerseusGraphTypeQuadratic, PerseusGraphTypeRay, PerseusGraphTypeSegment, PerseusGraphTypeSinusoid, PerseusGraphTypeExponential, PerseusGraphTypeTangent } from "@khanacademy/perseus-core";
 import type { Interval } from "mafs";
 export type InitializeGraphStateParams = {
     range: [x: Interval, y: Interval];
@@ -15,11 +15,17 @@ export declare function getLineCoords(graph: PerseusGraphTypeRay | PerseusGraphT
 export declare function getLinearSystemCoords(graph: PerseusGraphTypeLinearSystem, range: [x: Interval, y: Interval], step: [x: number, y: number]): PairOfPoints[];
 export declare function getPolygonCoords(graph: PerseusGraphTypePolygon, range: [x: Interval, y: Interval], step: [x: number, y: number]): Coord[];
 export declare function getSinusoidCoords(graph: PerseusGraphTypeSinusoid, range: [x: Interval, y: Interval], step: [x: number, y: number]): [Coord, Coord];
+export declare function getAbsoluteValueCoords(graph: PerseusGraphTypeAbsoluteValue, range: [x: Interval, y: Interval], step: [x: number, y: number]): [Coord, Coord];
+export declare function getTangentCoords(graph: PerseusGraphTypeTangent, range: [x: Interval, y: Interval], step: [x: number, y: number]): [Coord, Coord];
 export declare function getQuadraticCoords(graph: PerseusGraphTypeQuadratic, range: [x: Interval, y: Interval], step: [x: number, y: number]): [Coord, Coord, Coord];
 export declare function getCircleCoords(graph: PerseusGraphTypeCircle): {
     center: Coord;
     radiusPoint: Coord;
 };
+export declare function getExponentialCoords(graph: PerseusGraphTypeExponential, range: [x: Interval, y: Interval], step: [x: number, y: number]): {
+    coords: [Coord, Coord];
+    asymptote: number;
+};
 export declare const getAngleCoords: (params: {
     graph: PerseusGraphTypeAngle;
     range: [x: Interval, y: Interval];

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

@@ -56,6 +56,16 @@ export declare const actions: {
     sinusoid: {
         movePoint: typeof movePoint;
     };
+    exponential: {
+        movePoint: typeof movePoint;
+        moveCenter: typeof moveCenter;
+    };
+    absoluteValue: {
+        movePoint: typeof movePoint;
+    };
+    tangent: {
+        movePoint: typeof movePoint;
+    };
 };
 export declare const DELETE_INTENT = "delete-intent";
 export interface DeleteIntent {

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

@@ -15,7 +15,7 @@ export type InteractiveGraphElementSuite = {
     graph: ReactNode;
     interactiveElementsDescription: ReactNode;
 };
-export type InteractiveGraphState = AngleGraphState | SegmentGraphState | LinearSystemGraphState | LinearGraphState | RayGraphState | NoneGraphState | PolygonGraphState | PointGraphState | CircleGraphState | QuadraticGraphState | SinusoidGraphState;
+export type InteractiveGraphState = AbsoluteValueGraphState | AngleGraphState | SegmentGraphState | LinearSystemGraphState | LinearGraphState | RayGraphState | NoneGraphState | PolygonGraphState | PointGraphState | CircleGraphState | QuadraticGraphState | SinusoidGraphState | ExponentialGraphState | TangentGraphState;
 export type UnlimitedGraphState = PointGraphState | PolygonGraphState;
 export interface InteractiveGraphStateCommon {
     hasBeenInteractedWith: boolean;
@@ -77,6 +77,20 @@ export interface SinusoidGraphState extends InteractiveGraphStateCommon {
     type: "sinusoid";
     coords: [vec.Vector2, vec.Vector2];
 }
+export interface ExponentialGraphState extends InteractiveGraphStateCommon {
+    type: "exponential";
+    coords: [vec.Vector2, vec.Vector2];
+    /** The y-value of the horizontal asymptote (y = asymptote). */
+    asymptote: number;
+}
+export interface AbsoluteValueGraphState extends InteractiveGraphStateCommon {
+    type: "absolute-value";
+    coords: [vec.Vector2, vec.Vector2];
+}
+export interface TangentGraphState extends InteractiveGraphStateCommon {
+    type: "tangent";
+    coords: [vec.Vector2, vec.Vector2];
+}
 export interface AngleGraphState extends InteractiveGraphStateCommon {
     type: "angle";
     showAngles?: boolean;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core Perseus API (includes renderers and widgets)",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "76.0.3",
+  "version": "76.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -42,12 +42,12 @@
     "tiny-invariant": "1.3.1",
     "uuid": "^10.0.0",
     "@khanacademy/kas": "2.2.1",
-    "@khanacademy/keypad-context": "3.2.39",
-    "@khanacademy/kmath": "2.2.39",
-    "@khanacademy/math-input": "26.4.9",
-    "@khanacademy/perseus-core": "23.6.1",
-    "@khanacademy/perseus-linter": "4.8.7",
-    "@khanacademy/perseus-score": "8.3.1",
+    "@khanacademy/keypad-context": "3.2.40",
+    "@khanacademy/kmath": "2.3.0",
+    "@khanacademy/math-input": "26.4.10",
+    "@khanacademy/perseus-core": "23.7.0",
+    "@khanacademy/perseus-linter": "4.9.0",
+    "@khanacademy/perseus-score": "8.4.0",
     "@khanacademy/perseus-utils": "2.1.5",
     "@khanacademy/pure-markdown": "2.2.7",
     "@khanacademy/simple-markdown": "2.2.2"