@khanacademy/perseus 75.1.0 → 75.3.0

package/dist/widgets/image/components/{image-description-and-caption.d.ts → image-info-area.d.ts}

@@ -1,8 +1,8 @@
+import { type Interval, type PerseusImageBackground, type PerseusImageLabel, type Size } from "@khanacademy/perseus-core";
 import * as React from "react";
 import type { APIOptions } from "../../../types";
-import type { Interval, PerseusImageBackground, PerseusImageLabel, Size } from "@khanacademy/perseus-core";
 import type { LinterContextProps } from "@khanacademy/perseus-linter";
-export interface ImageDescriptionAndCaptionProps {
+export interface ImageInfoAreaProps {
     backgroundImage: PerseusImageBackground;
     title: string;
     caption: string;
@@ -22,5 +22,12 @@ export interface ImageDescriptionAndCaptionProps {
      * determine if the image is large enough to allow zooming.
      */
     zoomSize: Size;
+    isGifPlaying: boolean;
+    setIsGifPlaying: (isPaused: boolean) => void;
 }
-export declare const ImageDescriptionAndCaption: (props: ImageDescriptionAndCaptionProps) => React.JSX.Element;
+/**
+ * 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;

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

@@ -1,3 +1,4 @@
+export declare function isGif(url: string): boolean;
 export declare const earthMoonImage: {
     url: string;
     width: number;
@@ -29,3 +30,9 @@ export declare const graphieImage: {
     height: number;
 };
 export declare const graphieImageAlt = "An array of isosceles triangles. A triangle has height A. Two smaller triangle, one with height B and one with height C, have approximately the same combined height as A.";
+export declare const gifImage: {
+    url: string;
+    width: number;
+    height: number;
+};
+export declare const gifImageAlt = "A person on a skateboard moves back and forth across a concrete structure that forms the shape of a U.";

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

@@ -191,7 +191,7 @@ declare class InteractiveGraph extends React.Component<Props, State> {
             hintProgressColor?: string;
             canScrollPage?: boolean;
             editorChangeDelay?: number;
-            flags?: Record<"new-radio-widget" | "image-widget-upgrade" | "image-widget-upgrade-alignment", boolean>;
+            flags?: Record<"new-radio-widget" | "image-widget-upgrade-alignment" | "image-widget-upgrade-gif-controls", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;

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

@@ -42,3 +42,21 @@ export declare const calculateNestedSVGCoords: (range: vec.Vector2[], width: num
     viewboxX: number;
     viewboxY: number;
 };
+/**
+ * Gets the effective CSS zoom factor applied to an element or any of its ancestors.
+ * This is used to compensate for the mobile font scaling zoom applied to the body
+ * or exercise content via the fontScale query parameter.
+ *
+ * On mobile, the parent application may apply CSS zoom to accommodate device font
+ * size settings. This zoom affects coordinate calculations for click/touch events,
+ * as both clientX/clientY and getBoundingClientRect() return zoomed values, but
+ * the SVG coordinate system expects unzoomed pixel values.
+ *
+ * Note: We calculate the cumulative zoom by traversing the DOM tree rather than
+ * targeting specific elements to avoid coupling Perseus to parent application
+ * implementation details (e.g., specific class names or DOM hierarchy).
+ *
+ * @param element - The DOM element to check for CSS zoom
+ * @returns The cumulative zoom factor (e.g., 1.5 for 150% zoom, 1.0 for no zoom)
+ */
+export declare function getCSSZoomFactor(element: Element): number;

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

@@ -150,7 +150,7 @@ declare const _default: {
             hintProgressColor?: string;
             canScrollPage?: boolean;
             editorChangeDelay?: number;
-            flags?: Record<"new-radio-widget" | "image-widget-upgrade" | "image-widget-upgrade-alignment", boolean>;
+            flags?: Record<"new-radio-widget" | "image-widget-upgrade-alignment" | "image-widget-upgrade-gif-controls", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;

package/dist/widgets/mock-widgets/mock-widget.d.ts

@@ -74,7 +74,7 @@ declare class MockWidgetComponent extends React.Component<Props> implements Widg
             hintProgressColor?: string;
             canScrollPage?: boolean;
             editorChangeDelay?: number;
-            flags?: Record<"new-radio-widget" | "image-widget-upgrade" | "image-widget-upgrade-alignment", boolean>;
+            flags?: Record<"new-radio-widget" | "image-widget-upgrade-alignment" | "image-widget-upgrade-gif-controls", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;

package/dist/widgets/numeric-input/numeric-input.class.d.ts

@@ -81,7 +81,7 @@ export declare class NumericInput extends React.Component<NumericInputProps> imp
             hintProgressColor?: string;
             canScrollPage?: boolean;
             editorChangeDelay?: number;
-            flags?: Record<"new-radio-widget" | "image-widget-upgrade" | "image-widget-upgrade-alignment", boolean>;
+            flags?: Record<"new-radio-widget" | "image-widget-upgrade-alignment" | "image-widget-upgrade-gif-controls", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;

package/dist/widgets/numeric-input/numeric-input.d.ts

@@ -44,7 +44,7 @@ export declare const NumericInputComponent: React.ForwardRefExoticComponent<impo
         hintProgressColor?: string;
         canScrollPage?: boolean;
         editorChangeDelay?: number;
-        flags?: Record<"new-radio-widget" | "image-widget-upgrade" | "image-widget-upgrade-alignment", boolean>;
+        flags?: Record<"new-radio-widget" | "image-widget-upgrade-alignment" | "image-widget-upgrade-gif-controls", boolean>;
     }> & {
         baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
         canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;
@@ -104,7 +104,7 @@ export declare const NumericInputComponent: React.ForwardRefExoticComponent<impo
         hintProgressColor?: string;
         canScrollPage?: boolean;
         editorChangeDelay?: number;
-        flags?: Record<"new-radio-widget" | "image-widget-upgrade" | "image-widget-upgrade-alignment", boolean>;
+        flags?: Record<"new-radio-widget" | "image-widget-upgrade-alignment" | "image-widget-upgrade-gif-controls", boolean>;
     }> & {
         baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
         canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;

package/dist/widgets/radio/multiple-choice-widget.d.ts

@@ -81,7 +81,7 @@ declare const Radio: React.ForwardRefExoticComponent<RadioProps & {
         hintProgressColor?: string;
         canScrollPage?: boolean;
         editorChangeDelay?: number;
-        flags?: Record<"new-radio-widget" | "image-widget-upgrade" | "image-widget-upgrade-alignment", boolean>;
+        flags?: Record<"new-radio-widget" | "image-widget-upgrade-alignment" | "image-widget-upgrade-gif-controls", boolean>;
     }> & {
         baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
         canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;

package/dist/widgets/radio/radio.ff.d.ts

@@ -78,7 +78,7 @@ declare class Radio extends React.Component<Props> implements Widget {
             hintProgressColor?: string;
             canScrollPage?: boolean;
             editorChangeDelay?: number;
-            flags?: Record<"new-radio-widget" | "image-widget-upgrade" | "image-widget-upgrade-alignment", boolean>;
+            flags?: Record<"new-radio-widget" | "image-widget-upgrade-alignment" | "image-widget-upgrade-gif-controls", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;

package/dist/widgets/table/table.d.ts

@@ -82,7 +82,7 @@ declare class Table extends React.Component<Props> implements Widget {
             hintProgressColor?: string;
             canScrollPage?: boolean;
             editorChangeDelay?: number;
-            flags?: Record<"new-radio-widget" | "image-widget-upgrade" | "image-widget-upgrade-alignment", boolean>;
+            flags?: Record<"new-radio-widget" | "image-widget-upgrade-alignment" | "image-widget-upgrade-gif-controls", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             canScrollPage: NonNullable<import("../..").APIOptions["canScrollPage"]>;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core Perseus API (includes renderers and widgets)",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "75.1.0",
+  "version": "75.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -42,12 +42,12 @@
     "tiny-invariant": "1.3.1",
     "uuid": "^10.0.0",
     "@khanacademy/kas": "2.1.7",
-    "@khanacademy/keypad-context": "3.2.32",
-    "@khanacademy/kmath": "2.2.32",
-    "@khanacademy/math-input": "26.4.0",
-    "@khanacademy/perseus-core": "23.0.2",
-    "@khanacademy/perseus-linter": "4.8.0",
-    "@khanacademy/perseus-score": "8.2.9",
+    "@khanacademy/keypad-context": "3.2.33",
+    "@khanacademy/kmath": "2.2.33",
+    "@khanacademy/math-input": "26.4.1",
+    "@khanacademy/perseus-core": "23.1.0",
+    "@khanacademy/perseus-linter": "4.8.1",
+    "@khanacademy/perseus-score": "8.2.10",
     "@khanacademy/perseus-utils": "2.1.4",
     "@khanacademy/pure-markdown": "2.2.6",
     "@khanacademy/simple-markdown": "2.2.1"