@khanacademy/perseus 81.0.0 → 81.0.2

package/dist/widget-ai-utils/image/image-ai-utils.d.ts

@@ -1,4 +1,4 @@
-import type image from "../../widgets/image/image.class";
+import type image from "../../widgets/image/image";
 import type React from "react";
 /**
  * JSON describing an image widget. Intended for consumption by AI tools.

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

@@ -1,3 +1,67 @@
-import * as React from "react";
-import type { ImageWidgetProps } from "./image.class";
-export declare const ImageComponent: (props: ImageWidgetProps) => React.JSX.Element | null;
+import React from "react";
+import type { Widget } from "../../types";
+import type { PerseusImageWidgetOptions } from "@khanacademy/perseus-core";
+type WidgetHandle = Pick<Widget, "getPromptJSON">;
+declare const _default: {
+    name: string;
+    displayName: string;
+    widget: React.ForwardRefExoticComponent<PerseusImageWidgetOptions & {
+        trackInteraction: (extraData?: Empty | undefined) => void;
+        widgetId: string;
+        widgetIndex: number;
+        alignment: string | null | undefined;
+        static: boolean | null | undefined;
+        graded?: boolean | null;
+        problemNum: number | null | undefined;
+        apiOptions: Readonly<Readonly<{
+            isArticle?: boolean;
+            onFocusChange?: (newFocusPath: import("../..").FocusPath, oldFocusPath: import("../..").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
+            showAlignmentOptions?: boolean;
+            readOnly?: boolean;
+            editingDisabled?: boolean;
+            answerableCallback?: (arg1: boolean) => unknown;
+            getAnotherHint?: () => unknown;
+            interactionCallback?: (widgetData: {
+                [widgetId: string]: any;
+            }) => void;
+            imagePlaceholder?: React.ReactNode;
+            widgetPlaceholder?: React.ReactNode;
+            baseElements?: {
+                Link: React.ComponentType<any>;
+            };
+            trackInteraction?: (args: {
+                type: string;
+                id: string;
+                correct?: boolean;
+            } & Partial<import("../../types").TrackingGradedGroupExtraArguments> & Partial<{
+                visible: number;
+            }>) => void;
+            customKeypad?: boolean;
+            isMobile?: boolean;
+            isMobileApp?: boolean;
+            hintProgressColor?: string;
+            flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "perseus-enable-point-label-field", boolean>;
+        }> & {
+            baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
+            isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;
+            isMobile: NonNullable<import("../..").APIOptions["isMobile"]>;
+            isMobileApp: NonNullable<import("../..").APIOptions["isMobileApp"]>;
+            editingDisabled: NonNullable<import("../..").APIOptions["editingDisabled"]>;
+            onFocusChange: NonNullable<import("../..").APIOptions["onFocusChange"]>;
+            readOnly: NonNullable<import("../..").APIOptions["readOnly"]>;
+            showAlignmentOptions: NonNullable<import("../..").APIOptions["showAlignmentOptions"]>;
+        }>;
+        keypadElement?: any;
+        onFocus: (blurPath: import("../..").FocusPath) => void;
+        onBlur: (blurPath: import("../..").FocusPath) => void;
+        findWidgets: import("../../types").FindWidgetsFunction;
+        reviewMode: boolean;
+        showSolutions?: import("@khanacademy/perseus-core").ShowSolutions;
+        handleUserInput: (newUserInput: Empty, cb?: () => void, silent?: boolean) => void;
+        userInput: Empty;
+        linterContext: import("@khanacademy/perseus-linter").LinterContextProps;
+        containerSizeClass: import("../../util/sizing-utils").SizeClass;
+    } & React.RefAttributes<WidgetHandle>>;
+    isLintable: true;
+};
+export default _default;

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

@@ -1 +1 @@
-export { default } from "./image.class";
+export { default } from "./image";

package/dist/widgets/interactive-graphs/graphs/components/hitbox-layer-context.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+/**
+ * DOM node of the HTML overlay above the graph's SVG. Movable points portal an
+ * HTML hitbox `<div>` (`touch-action: none`) into it as their drag target.
+ *
+ * Why HTML, not an SVG hitbox: Safari ignores `touch-action` on SVG, so under
+ * the container's `touch-action: pan-y` a vertical point-drag scrolls the page.
+ * `touch-action` on real HTML is honored everywhere, so no scroll and no JS
+ * fallback. The layer is `pointer-events: none` (empty area falls through to
+ * scroll / add-point); each hitbox opts back in. Null until the layer mounts.
+ *
+ * UPSTREAM (Mafs): this technique + relaxing `.MafsView { touch-action: none }`
+ * in `mafs/core.css` is the fix to contribute to Mafs' `MovablePoint`. Perseus
+ * forked these components, so keep them in sync if that PR lands.
+ */
+export declare const HitboxLayerContext: React.Context<HTMLElement | null>;

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

@@ -0,0 +1,53 @@
+import * as React from "react";
+import type { vec } from "mafs";
+/**
+ * Touch/click target size for small handles (movable points, arrowheads, the
+ * asymptote pill). Preserved from the legacy interactive graph (48×48px) and a
+ * comfortable target per WCAG 2.5.8.
+ */
+export declare const HANDLE_HITBOX_SIZE_PX = 48;
+/**
+ * Drag hitbox for an interactive-graph element, rendered as a real HTML element
+ * in the graph's overlay layer rather than as SVG. Safari doesn't reliably
+ * honor `touch-action` on SVG, so under the container's `touch-action: pan-y`
+ * an SVG hitbox lets a drag scroll the page; a real HTML element's
+ * `touch-action: none` is honored everywhere. See {@link HitboxLayerContext}.
+ *
+ * All coordinates are **graph-space**; this hook converts them to the overlay's
+ * pixel space with the same `pointToPixel` transform movable points use, so
+ * hitboxes line up exactly with the SVG shapes they cover.
+ */
+type HitboxShape = {
+    kind: "box";
+    center: vec.Vector2;
+    sizePx: number;
+} | {
+    kind: "line";
+    start: vec.Vector2;
+    end: vec.Vector2;
+    thicknessPx: number;
+} | {
+    kind: "ellipse";
+    center: vec.Vector2;
+    radius: vec.Vector2;
+} | {
+    kind: "polygon";
+    vertices: ReadonlyArray<vec.Vector2>;
+};
+type HitboxParams = {
+    shape: HitboxShape;
+    /** Assigned to the hitbox element; use as the `useDraggable` gestureTarget. */
+    hitboxRef: React.RefObject<HTMLDivElement>;
+    /**
+     * Stacking within the overlay. Point/vertex handles ("handle") sit above
+     * shape bodies ("body") so a vertex on a segment/polygon stays grabbable.
+     */
+    layer?: "handle" | "body";
+    cursor?: string;
+    dragging?: boolean;
+    onClick?: () => void;
+    onHoverChange?: (hovered: boolean) => void;
+    testId?: string;
+};
+export declare function useHitbox(params: HitboxParams): React.ReactNode;
+export {};

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

@@ -6,6 +6,7 @@ type Props = {
     angle: number;
     dragging: boolean;
     focused: boolean;
+    hovered?: boolean;
     showFocusRing: boolean;
     cursor?: CSSCursor | undefined;
     onClick?: () => unknown;

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

@@ -5,6 +5,7 @@ type Props = {
     point: vec.Vector2;
     dragging: boolean;
     focused: boolean;
+    hovered?: boolean;
     showFocusRing: boolean;
     cursor?: CSSCursor | undefined;
     onClick?: () => unknown;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core Perseus API (includes renderers and widgets)",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "81.0.0",
+  "version": "81.0.2",
   "publishConfig": {
     "access": "public"
   },
@@ -43,39 +43,39 @@
     "tiny-invariant": "1.3.1",
     "uuid": "^10.0.0",
     "@khanacademy/kas": "2.2.3",
-    "@khanacademy/keypad-context": "3.2.74",
-    "@khanacademy/kmath": "2.4.33",
-    "@khanacademy/math-input": "26.6.2",
-    "@khanacademy/perseus-core": "32.0.0",
-    "@khanacademy/perseus-linter": "5.1.14",
-    "@khanacademy/perseus-score": "8.12.6",
+    "@khanacademy/keypad-context": "3.2.75",
+    "@khanacademy/kmath": "2.4.34",
+    "@khanacademy/math-input": "26.6.4",
+    "@khanacademy/perseus-core": "32.0.1",
+    "@khanacademy/perseus-linter": "5.1.15",
+    "@khanacademy/perseus-score": "8.12.7",
     "@khanacademy/perseus-utils": "2.1.5",
-    "@khanacademy/pure-markdown": "2.3.0",
-    "@khanacademy/simple-markdown": "2.2.3"
+    "@khanacademy/pure-markdown": "2.3.1",
+    "@khanacademy/simple-markdown": "3.0.0"
   },
   "devDependencies": {
     "@khanacademy/wonder-blocks-announcer": "1.1.1",
-    "@khanacademy/wonder-blocks-banner": "5.1.9",
-    "@khanacademy/wonder-blocks-button": "11.7.5",
-    "@khanacademy/wonder-blocks-clickable": "8.2.7",
+    "@khanacademy/wonder-blocks-banner": "5.1.10",
+    "@khanacademy/wonder-blocks-button": "11.7.6",
+    "@khanacademy/wonder-blocks-clickable": "8.2.8",
     "@khanacademy/wonder-blocks-core": "12.4.4",
     "@khanacademy/wonder-blocks-data": "15.0.2",
-    "@khanacademy/wonder-blocks-dropdown": "10.11.6",
-    "@khanacademy/wonder-blocks-form": "7.6.8",
-    "@khanacademy/wonder-blocks-icon": "5.3.21",
-    "@khanacademy/wonder-blocks-icon-button": "11.4.3",
-    "@khanacademy/wonder-blocks-labeled-field": "4.1.7",
-    "@khanacademy/wonder-blocks-layout": "3.1.58",
-    "@khanacademy/wonder-blocks-link": "10.3.7",
-    "@khanacademy/wonder-blocks-modal": "8.7.9",
-    "@khanacademy/wonder-blocks-pill": "3.1.71",
-    "@khanacademy/wonder-blocks-popover": "6.3.9",
-    "@khanacademy/wonder-blocks-progress-spinner": "3.1.58",
-    "@khanacademy/wonder-blocks-switch": "3.4.7",
+    "@khanacademy/wonder-blocks-dropdown": "10.11.7",
+    "@khanacademy/wonder-blocks-form": "7.6.9",
+    "@khanacademy/wonder-blocks-icon": "5.3.22",
+    "@khanacademy/wonder-blocks-icon-button": "11.4.4",
+    "@khanacademy/wonder-blocks-labeled-field": "4.1.8",
+    "@khanacademy/wonder-blocks-layout": "3.1.59",
+    "@khanacademy/wonder-blocks-link": "10.3.8",
+    "@khanacademy/wonder-blocks-modal": "8.7.10",
+    "@khanacademy/wonder-blocks-pill": "3.1.72",
+    "@khanacademy/wonder-blocks-popover": "6.3.11",
+    "@khanacademy/wonder-blocks-progress-spinner": "3.1.59",
+    "@khanacademy/wonder-blocks-switch": "3.4.8",
     "@khanacademy/wonder-blocks-timing": "7.1.0",
-    "@khanacademy/wonder-blocks-tokens": "17.1.0",
-    "@khanacademy/wonder-blocks-tooltip": "4.1.84",
-    "@khanacademy/wonder-blocks-typography": "5.0.1",
+    "@khanacademy/wonder-blocks-tokens": "17.2.0",
+    "@khanacademy/wonder-blocks-tooltip": "4.2.0",
+    "@khanacademy/wonder-blocks-typography": "5.0.2",
     "@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.1",
-    "@khanacademy/wonder-blocks-banner": "^5.1.9",
-    "@khanacademy/wonder-blocks-button": "^11.7.5",
-    "@khanacademy/wonder-blocks-clickable": "^8.2.7",
+    "@khanacademy/wonder-blocks-banner": "^5.1.10",
+    "@khanacademy/wonder-blocks-button": "^11.7.6",
+    "@khanacademy/wonder-blocks-clickable": "^8.2.8",
     "@khanacademy/wonder-blocks-core": "^12.4.4",
     "@khanacademy/wonder-blocks-data": "^15.0.2",
-    "@khanacademy/wonder-blocks-dropdown": "^10.11.6",
-    "@khanacademy/wonder-blocks-form": "^7.6.8",
-    "@khanacademy/wonder-blocks-icon": "^5.3.21",
-    "@khanacademy/wonder-blocks-icon-button": "^11.4.3",
-    "@khanacademy/wonder-blocks-labeled-field": "^4.1.7",
-    "@khanacademy/wonder-blocks-layout": "^3.1.58",
-    "@khanacademy/wonder-blocks-link": "^10.3.7",
-    "@khanacademy/wonder-blocks-modal": "^8.7.9",
-    "@khanacademy/wonder-blocks-pill": "^3.1.71",
-    "@khanacademy/wonder-blocks-popover": "^6.3.9",
-    "@khanacademy/wonder-blocks-progress-spinner": "^3.1.58",
-    "@khanacademy/wonder-blocks-switch": "^3.4.7",
+    "@khanacademy/wonder-blocks-dropdown": "^10.11.7",
+    "@khanacademy/wonder-blocks-form": "^7.6.9",
+    "@khanacademy/wonder-blocks-icon": "^5.3.22",
+    "@khanacademy/wonder-blocks-icon-button": "^11.4.4",
+    "@khanacademy/wonder-blocks-labeled-field": "^4.1.8",
+    "@khanacademy/wonder-blocks-layout": "^3.1.59",
+    "@khanacademy/wonder-blocks-link": "^10.3.8",
+    "@khanacademy/wonder-blocks-modal": "^8.7.10",
+    "@khanacademy/wonder-blocks-pill": "^3.1.72",
+    "@khanacademy/wonder-blocks-popover": "^6.3.11",
+    "@khanacademy/wonder-blocks-progress-spinner": "^3.1.59",
+    "@khanacademy/wonder-blocks-switch": "^3.4.8",
     "@khanacademy/wonder-blocks-timing": "^7.1.0",
-    "@khanacademy/wonder-blocks-tokens": "^17.1.0",
-    "@khanacademy/wonder-blocks-tooltip": "^4.1.84",
-    "@khanacademy/wonder-blocks-typography": "^5.0.1",
+    "@khanacademy/wonder-blocks-tokens": "^17.2.0",
+    "@khanacademy/wonder-blocks-tooltip": "^4.2.0",
+    "@khanacademy/wonder-blocks-typography": "^5.0.2",
     "@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": "1680f43b40dfea22"
+    "catalogHash": "ad217163f04bf0b2"
   },
   "scripts": {}
 }

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

@@ -1,20 +0,0 @@
-import * as React from "react";
-import { PerseusI18nContext } from "../../components/i18n-context";
-import type { WidgetProps, Widget } from "../../types";
-import type { ImagePromptJSON } from "../../widget-ai-utils/image/image-ai-utils";
-import type { PerseusImageWidgetOptions } from "@khanacademy/perseus-core";
-export type ImageWidgetProps = WidgetProps<PerseusImageWidgetOptions>;
-declare class ImageWidget extends React.Component<ImageWidgetProps> implements Widget {
-    static contextType: React.Context<import("../../components/i18n-context").I18nContextType>;
-    context: React.ContextType<typeof PerseusI18nContext>;
-    isWidget: true;
-    getPromptJSON(): ImagePromptJSON;
-    render(): React.ReactNode;
-}
-declare const _default: {
-    name: string;
-    displayName: string;
-    widget: typeof ImageWidget;
-    isLintable: true;
-};
-export default _default;