@khanacademy/perseus 77.2.1 → 77.3.1

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { CSSCursor } from "./css-cursor";
+import type { vec } from "mafs";
+type Props = {
+    point: vec.Vector2;
+    angle: number;
+    dragging: boolean;
+    focused: boolean;
+    showFocusRing: boolean;
+    cursor?: CSSCursor | undefined;
+    onClick?: () => unknown;
+};
+export declare const MovableArrowheadView: React.ForwardRefExoticComponent<Props & React.RefAttributes<SVGGElement>>;
+export {};

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

@@ -21,6 +21,12 @@ type Props = {
     orientation: "horizontal" | "vertical";
     /** Accessible label for the asymptote drag target. */
     ariaLabel: string;
+    /**
+     * Content rendered between the asymptote lines and the drag handle.
+     * Use this to render the curve so it appears above the dashed line
+     * but below the drag handle in the SVG stacking order.
+     */
+    children?: React.ReactNode;
 };
 export declare function MovableAsymptote(props: Props): React.JSX.Element;
 export {};

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

@@ -14,7 +14,7 @@ type Props = {
         end: boolean;
     };
     onMovePoint?: (endpointIndex: number, destination: vec.Vector2) => unknown;
-    onMoveLine?: (delta: vec.Vector2) => unknown;
+    onMoveLine?: (newStart: vec.Vector2) => unknown;
 };
 export declare const MovableLine: (props: Props) => React.JSX.Element;
 export declare const getMovableLineKeyboardConstraint: (line: [vec.Vector2, vec.Vector2], snapStep: vec.Vector2, pointIndex: number) => {

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

@@ -0,0 +1,22 @@
+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;
+    /** Whether the handle is in active state (shows grip dots, uses larger dimensions). */
+    active: boolean;
+    /** Whether the handle has keyboard focus (shows focus ring). */
+    focused: boolean;
+    /**
+     * Rotation angle in degrees. 0 = horizontal pill, 90 = vertical pill.
+     * Arbitrary angles are supported (e.g. for vector alignment).
+     * @default 0
+     */
+    rotation?: number;
+};
+/**
+ * Shared pill-shaped drag handle used by vector and asymptote graph elements.
+ * Renders a rounded-rectangle pill with a halo, ring, focus ring, and grip dots.
+ */
+export declare function MovablePillHandle(props: Props): React.JSX.Element;
+export {};

package/dist/widgets/interactive-graphs/graphs/components/use-control-arrowhead.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import type { AriaLive } from "../../types";
+import type { KeyboardMovementConstraint } from "../use-draggable";
+import type { vec } from "mafs";
+type Params = {
+    point: vec.Vector2;
+    angle: number;
+    ariaDescribedBy?: string;
+    ariaLabel?: string;
+    ariaLive?: AriaLive;
+    constrain?: KeyboardMovementConstraint;
+    sequenceNumber?: number;
+    onMove?: ((newPoint: vec.Vector2) => unknown) | undefined;
+    onDragEnd?: (() => unknown) | undefined;
+};
+type Return = {
+    focusableHandle: React.ReactNode;
+    visibleArrowhead: React.ReactNode;
+    dragging: boolean;
+    focused: boolean;
+};
+export declare function useControlArrowhead(params: Params): Return;
+export {};

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

@@ -0,0 +1,11 @@
+import { vec } from "mafs";
+import type { I18nContextType } from "../../../components/i18n-context";
+import type { Dispatch, InteractiveGraphElementSuite, VectorGraphState } from "../types";
+export declare function renderVectorGraph(state: VectorGraphState, dispatch: Dispatch, i18n: I18nContextType): InteractiveGraphElementSuite;
+export declare const getVectorTipKeyboardConstraint: (tail: vec.Vector2, tip: vec.Vector2, snapStep: vec.Vector2) => {
+    up: vec.Vector2;
+    down: vec.Vector2;
+    left: vec.Vector2;
+    right: vec.Vector2;
+};
+export declare function describeVectorGraph(state: VectorGraphState, i18n: I18nContextType): Record<string, string>;

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

@@ -83,6 +83,10 @@ declare class InteractiveGraphQuestionBuilder {
         coords?: CollinearTuple;
         startCoords?: CollinearTuple;
     }): InteractiveGraphQuestionBuilder;
+    withVector(options?: {
+        coords?: CollinearTuple;
+        startCoords?: CollinearTuple;
+    }): InteractiveGraphQuestionBuilder;
     withCircle(options?: {
         center?: Coord;
         radius?: number;

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

@@ -274,6 +274,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 getVectorEquationString(props: Props): string;
 }
 /**
  * @deprecated and likely a very broken API

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, PerseusGraphTypeAbsoluteValue, PerseusGraphTypeAngle, PerseusGraphTypeCircle, PerseusGraphTypeLinear, PerseusGraphTypeLinearSystem, PerseusGraphTypePoint, PerseusGraphTypePolygon, PerseusGraphTypeQuadratic, PerseusGraphTypeRay, PerseusGraphTypeSegment, PerseusGraphTypeSinusoid, PerseusGraphTypeExponential, PerseusGraphTypeTangent, PerseusGraphTypeLogarithm } from "@khanacademy/perseus-core";
+import type { PerseusGraphType, PerseusGraphTypeAbsoluteValue, PerseusGraphTypeAngle, PerseusGraphTypeCircle, PerseusGraphTypeLinear, PerseusGraphTypeLinearSystem, PerseusGraphTypePoint, PerseusGraphTypePolygon, PerseusGraphTypeQuadratic, PerseusGraphTypeRay, PerseusGraphTypeSegment, PerseusGraphTypeSinusoid, PerseusGraphTypeExponential, PerseusGraphTypeTangent, PerseusGraphTypeLogarithm, PerseusGraphTypeVector } from "@khanacademy/perseus-core";
 import type { Interval } from "mafs";
 export type InitializeGraphStateParams = {
     range: [x: Interval, y: Interval];
@@ -12,6 +12,7 @@ export declare function initializeGraphState(params: InitializeGraphStateParams)
 export declare function getPointCoords(graph: PerseusGraphTypePoint, range: [x: Interval, y: Interval], step: [x: number, y: number]): Coord[];
 export declare function getSegmentCoords(graph: PerseusGraphTypeSegment, range: [x: Interval, y: Interval], step: [x: number, y: number]): PairOfPoints[];
 export declare function getLineCoords(graph: PerseusGraphTypeRay | PerseusGraphTypeLinear, range: [x: Interval, y: Interval], step: [x: number, y: number]): PairOfPoints;
+export declare function getVectorCoords(graph: PerseusGraphTypeVector, range: [x: Interval, y: Interval], step: [x: number, y: number]): PairOfPoints;
 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];

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

@@ -16,7 +16,7 @@ export declare const actions: {
         moveRadiusPoint: typeof moveRadiusPoint;
     };
     linear: {
-        moveLine: (delta: vec.Vector2) => MoveLine;
+        moveLine: (newStart: vec.Vector2) => MoveLine;
         movePoint: (pointIndex: any, destination: any) => MovePointInFigure;
     };
     linearSystem: {
@@ -46,7 +46,7 @@ export declare const actions: {
         movePoint: typeof movePoint;
     };
     ray: {
-        moveRay: (delta: vec.Vector2) => MoveLine;
+        moveRay: (newStart: vec.Vector2) => MoveLine;
         movePoint: (pointIndex: any, destination: any) => MovePointInFigure;
     };
     segment: {
@@ -70,6 +70,10 @@ export declare const actions: {
     tangent: {
         movePoint: typeof movePoint;
     };
+    vector: {
+        moveTip: (destination: vec.Vector2) => MovePoint;
+        moveVector: (newStart: vec.Vector2) => MoveLine;
+    };
 };
 export declare const DELETE_INTENT = "delete-intent";
 export interface DeleteIntent {
@@ -80,9 +84,9 @@ export declare const MOVE_LINE = "move-line";
 export interface MoveLine {
     type: typeof MOVE_LINE;
     itemIndex: number;
-    delta: vec.Vector2;
+    newStart: vec.Vector2;
 }
-declare function moveLine(itemIndex: number, delta: vec.Vector2): MoveLine;
+declare function moveLine(itemIndex: number, newStart: vec.Vector2): MoveLine;
 export declare const ADD_POINT = "add-point";
 export interface AddPoint {
     type: typeof ADD_POINT;

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

@@ -15,7 +15,7 @@ export type InteractiveGraphElementSuite = {
     graph: ReactNode;
     interactiveElementsDescription: ReactNode;
 };
-export type InteractiveGraphState = AbsoluteValueGraphState | AngleGraphState | SegmentGraphState | LinearSystemGraphState | LinearGraphState | RayGraphState | NoneGraphState | PolygonGraphState | PointGraphState | CircleGraphState | QuadraticGraphState | SinusoidGraphState | ExponentialGraphState | TangentGraphState | LogarithmGraphState;
+export type InteractiveGraphState = AbsoluteValueGraphState | AngleGraphState | SegmentGraphState | LinearSystemGraphState | LinearGraphState | RayGraphState | NoneGraphState | PolygonGraphState | PointGraphState | CircleGraphState | QuadraticGraphState | SinusoidGraphState | ExponentialGraphState | TangentGraphState | LogarithmGraphState | VectorGraphState;
 export type UnlimitedGraphState = PointGraphState | PolygonGraphState;
 export interface InteractiveGraphStateCommon {
     hasBeenInteractedWith: boolean;
@@ -51,6 +51,10 @@ export interface RayGraphState extends InteractiveGraphStateCommon {
     type: "ray";
     coords: PairOfPoints;
 }
+export interface VectorGraphState extends InteractiveGraphStateCommon {
+    type: "vector";
+    coords: PairOfPoints;
+}
 export interface PolygonGraphState extends InteractiveGraphStateCommon {
     type: "polygon";
     showAngles: boolean;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core Perseus API (includes renderers and widgets)",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "77.2.1",
+  "version": "77.3.1",
   "publishConfig": {
     "access": "public"
   },
@@ -42,40 +42,40 @@
     "mafs": "0.19.0",
     "tiny-invariant": "1.3.1",
     "uuid": "^10.0.0",
-    "@khanacademy/kas": "2.2.1",
-    "@khanacademy/keypad-context": "3.2.42",
-    "@khanacademy/math-input": "26.4.13",
-    "@khanacademy/kmath": "2.4.0",
-    "@khanacademy/perseus-core": "24.1.0",
-    "@khanacademy/perseus-linter": "4.9.3",
-    "@khanacademy/perseus-score": "8.6.0",
+    "@khanacademy/kas": "2.2.2",
+    "@khanacademy/keypad-context": "3.2.44",
+    "@khanacademy/kmath": "2.4.2",
+    "@khanacademy/math-input": "26.4.16",
+    "@khanacademy/perseus-core": "25.0.0",
+    "@khanacademy/perseus-linter": "4.9.5",
+    "@khanacademy/perseus-score": "8.7.0",
     "@khanacademy/perseus-utils": "2.1.5",
     "@khanacademy/pure-markdown": "2.2.7",
     "@khanacademy/simple-markdown": "2.2.2"
   },
   "devDependencies": {
     "@khanacademy/wonder-blocks-announcer": "1.1.0",
-    "@khanacademy/wonder-blocks-banner": "5.0.18",
-    "@khanacademy/wonder-blocks-button": "11.4.2",
-    "@khanacademy/wonder-blocks-clickable": "8.1.5",
+    "@khanacademy/wonder-blocks-banner": "5.0.20",
+    "@khanacademy/wonder-blocks-button": "11.5.1",
+    "@khanacademy/wonder-blocks-clickable": "8.1.6",
     "@khanacademy/wonder-blocks-core": "12.4.3",
     "@khanacademy/wonder-blocks-data": "15.0.1",
-    "@khanacademy/wonder-blocks-dropdown": "10.8.3",
-    "@khanacademy/wonder-blocks-form": "7.5.6",
-    "@khanacademy/wonder-blocks-icon": "5.3.9",
-    "@khanacademy/wonder-blocks-icon-button": "11.1.6",
-    "@khanacademy/wonder-blocks-labeled-field": "4.0.16",
-    "@khanacademy/wonder-blocks-layout": "3.1.46",
-    "@khanacademy/wonder-blocks-link": "10.1.7",
-    "@khanacademy/wonder-blocks-modal": "8.6.0",
-    "@khanacademy/wonder-blocks-pill": "3.1.57",
-    "@khanacademy/wonder-blocks-popover": "6.1.56",
-    "@khanacademy/wonder-blocks-progress-spinner": "3.1.46",
-    "@khanacademy/wonder-blocks-switch": "3.3.30",
+    "@khanacademy/wonder-blocks-dropdown": "10.8.5",
+    "@khanacademy/wonder-blocks-form": "7.5.7",
+    "@khanacademy/wonder-blocks-icon": "5.3.10",
+    "@khanacademy/wonder-blocks-icon-button": "11.2.1",
+    "@khanacademy/wonder-blocks-labeled-field": "4.0.17",
+    "@khanacademy/wonder-blocks-layout": "3.1.47",
+    "@khanacademy/wonder-blocks-link": "10.1.8",
+    "@khanacademy/wonder-blocks-modal": "8.6.2",
+    "@khanacademy/wonder-blocks-pill": "3.1.58",
+    "@khanacademy/wonder-blocks-popover": "6.2.1",
+    "@khanacademy/wonder-blocks-progress-spinner": "3.1.47",
+    "@khanacademy/wonder-blocks-switch": "3.3.31",
     "@khanacademy/wonder-blocks-timing": "7.0.4",
-    "@khanacademy/wonder-blocks-tokens": "16.1.0",
-    "@khanacademy/wonder-blocks-tooltip": "4.1.69",
-    "@khanacademy/wonder-blocks-typography": "4.2.31",
+    "@khanacademy/wonder-blocks-tokens": "16.2.0",
+    "@khanacademy/wonder-blocks-tooltip": "4.1.71",
+    "@khanacademy/wonder-blocks-typography": "4.3.0",
     "@khanacademy/wonder-stuff-core": "3.0.0",
     "@phosphor-icons/core": "2.0.2",
     "@popperjs/core": "2.10.2",
@@ -92,27 +92,27 @@
   },
   "peerDependencies": {
     "@khanacademy/wonder-blocks-announcer": "^1.1.0",
-    "@khanacademy/wonder-blocks-banner": "^5.0.18",
-    "@khanacademy/wonder-blocks-button": "^11.4.2",
-    "@khanacademy/wonder-blocks-clickable": "^8.1.5",
+    "@khanacademy/wonder-blocks-banner": "^5.0.20",
+    "@khanacademy/wonder-blocks-button": "^11.5.1",
+    "@khanacademy/wonder-blocks-clickable": "^8.1.6",
     "@khanacademy/wonder-blocks-core": "^12.4.3",
     "@khanacademy/wonder-blocks-data": "^15.0.1",
-    "@khanacademy/wonder-blocks-dropdown": "^10.8.3",
-    "@khanacademy/wonder-blocks-form": "^7.5.6",
-    "@khanacademy/wonder-blocks-icon": "^5.3.9",
-    "@khanacademy/wonder-blocks-icon-button": "^11.1.6",
-    "@khanacademy/wonder-blocks-labeled-field": "^4.0.16",
-    "@khanacademy/wonder-blocks-layout": "^3.1.46",
-    "@khanacademy/wonder-blocks-link": "^10.1.7",
-    "@khanacademy/wonder-blocks-modal": "^8.6.0",
-    "@khanacademy/wonder-blocks-pill": "^3.1.57",
-    "@khanacademy/wonder-blocks-popover": "^6.1.56",
-    "@khanacademy/wonder-blocks-progress-spinner": "^3.1.46",
-    "@khanacademy/wonder-blocks-switch": "^3.3.30",
+    "@khanacademy/wonder-blocks-dropdown": "^10.8.5",
+    "@khanacademy/wonder-blocks-form": "^7.5.7",
+    "@khanacademy/wonder-blocks-icon": "^5.3.10",
+    "@khanacademy/wonder-blocks-icon-button": "^11.2.1",
+    "@khanacademy/wonder-blocks-labeled-field": "^4.0.17",
+    "@khanacademy/wonder-blocks-layout": "^3.1.47",
+    "@khanacademy/wonder-blocks-link": "^10.1.8",
+    "@khanacademy/wonder-blocks-modal": "^8.6.2",
+    "@khanacademy/wonder-blocks-pill": "^3.1.58",
+    "@khanacademy/wonder-blocks-popover": "^6.2.1",
+    "@khanacademy/wonder-blocks-progress-spinner": "^3.1.47",
+    "@khanacademy/wonder-blocks-switch": "^3.3.31",
     "@khanacademy/wonder-blocks-timing": "^7.0.4",
-    "@khanacademy/wonder-blocks-tokens": "^16.1.0",
-    "@khanacademy/wonder-blocks-tooltip": "^4.1.69",
-    "@khanacademy/wonder-blocks-typography": "^4.2.31",
+    "@khanacademy/wonder-blocks-tokens": "^16.2.0",
+    "@khanacademy/wonder-blocks-tooltip": "^4.1.71",
+    "@khanacademy/wonder-blocks-typography": "^4.3.0",
     "@khanacademy/wonder-stuff-core": "^3.0.0",
     "@phosphor-icons/core": "^2.0.2",
     "@popperjs/core": "^2.10.2",
@@ -127,7 +127,7 @@
   },
   "keywords": [],
   "khan": {
-    "catalogHash": "a1f429536c944326"
+    "catalogHash": "5f4444b00d857f2e"
   },
   "scripts": {}
 }

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

@@ -1,15 +0,0 @@
-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 {};