@khanacademy/perseus 85.1.3 → 86.0.0

package/dist/interactive2.d.ts

@@ -4,8 +4,6 @@ declare const Interactive2: {
     readonly addMovablePoint: (graphie: any, options: any) => any;
     readonly MovableLine: (graphie: any, movable: any, options: any) => void;
     readonly addMovableLine: (graphie: any, options: any) => any;
-    readonly MovablePolygon: (graphie: any, movable: any, options: any) => void;
-    readonly addMovablePolygon: (graphie: any, options: any) => any;
     readonly addMovablePointV2: (widget: any, extraProps: any) => any;
 };
 export default Interactive2;

package/dist/server-item-renderer.d.ts

@@ -105,6 +105,7 @@ declare const _default: React.ForwardRefExoticComponent<Omit<Pick<SharedRenderer
         isArticle?: boolean;
         onFocusChange?: (newFocusPath: FocusPath, oldFocusPath: FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
         showAlignmentOptions?: boolean;
+        renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
         readOnly?: boolean;
         editingDisabled?: boolean;
         answerableCallback?: (arg1: boolean) => unknown;
@@ -128,7 +129,7 @@ declare const _default: React.ForwardRefExoticComponent<Omit<Pick<SharedRenderer
         isMobile?: boolean;
         isMobileApp?: boolean;
         hintProgressColor?: string;
-        flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+        flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
     }> | undefined;
     linterContext?: PerseusLinter.LinterContextProps | undefined;
     onRendered?: ((isRendered: boolean) => void) | undefined;

package/dist/testing/article-renderer-with-debug-ui.d.ts

@@ -9,8 +9,9 @@ type Props = {
      * `json`, but it is the article. Trust me.
      */
     json: PerseusArticle;
+    seed?: number;
     apiOptions?: APIOptions;
     linterContext?: LinterContextProps;
 };
-export declare const ArticleRendererWithDebugUI: ({ title, json, apiOptions, linterContext, }: Props) => React.ReactElement;
+export declare const ArticleRendererWithDebugUI: ({ title, json, seed, apiOptions, linterContext, }: Props) => React.ReactElement;
 export {};

package/dist/testing/feature-flags-util.d.ts

@@ -7,6 +7,8 @@ declare const DEFAULT_FEATURE_FLAGS: Record<"perseus-test-flag-1" | "perseus-tes
 export declare function getFeatureFlags(overrides?: Partial<typeof DEFAULT_FEATURE_FLAGS>): {
     "perseus-renderer-upgrade": boolean;
     "desmos-calculator": boolean;
+    "article-extras": boolean;
+    "dnd-widget-fitb": boolean;
     "perseus-test-flag-1": boolean;
     "perseus-test-flag-2": boolean;
 };

package/dist/testing/item-renderer-hooks.d.ts

@@ -16,6 +16,7 @@ export declare const useItemRenderer: (item: PerseusItem, apiOptions?: APIOption
         isArticle?: boolean;
         onFocusChange?: (newFocusPath: import("..").FocusPath, oldFocusPath: import("..").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
         showAlignmentOptions?: boolean;
+        renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
         readOnly?: boolean;
         editingDisabled?: boolean;
         answerableCallback?: (arg1: boolean) => unknown;
@@ -34,7 +35,7 @@ export declare const useItemRenderer: (item: PerseusItem, apiOptions?: APIOption
         }>) => void;
         isMobileApp?: boolean;
         hintProgressColor?: string;
-        flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+        flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
     };
     toggleMobile: (isMobile: boolean) => void;
     toggleRtl: (isRtl: boolean) => void;

package/dist/types.d.ts

@@ -104,6 +104,7 @@ export type APIOptions = Readonly<{
     isArticle?: boolean;
     onFocusChange?: (newFocusPath: FocusPath, oldFocusPath: FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
     showAlignmentOptions?: boolean;
+    renderExtras?: (answerArea: PerseusAnswerArea, widgetId: string) => React.ReactNode;
     /**
      * A boolean that indicates whether the associated problem has been
      * answered correctly and should no longer be interactive.

package/dist/util/colors.d.ts

@@ -1,6 +1,17 @@
+/**
+ * Color constants we use throughout Perseus (originally on KhanUtil).
+ *
+ * DEPRECATED: This palette is retained only for the interaction editor's
+ * color swatches and the measurer widget's graphie rendering. Do not add
+ * new uses — use Wonder Blocks semanticColor tokens instead.
+ *
+ * Note that if the color palette changes substantially, it may also need to be
+ * updated in khan-exercises and cherry-picked into graphie-to-png's
+ * khan-exercises submodule, as graphie-to-png still relies on the palette
+ * provided on KhanUtil.
+ */
 declare const KhanColors: {
     readonly BLUE: string;
-    readonly ORANGE: "#FFA500";
     readonly PINK: "#FF00AF";
     readonly GREEN: string;
     readonly PURPLE: "#9D38BD";
@@ -13,67 +24,8 @@ declare const KhanColors: {
     readonly LIGHT_GREEN: "#9BEDCE";
     readonly LIGHT_PURPLE: "#DA9BED";
     readonly LIGHT_RED: "#ED9AAC";
-    readonly LIGHT_GRAY: "#ED9B9B";
-    readonly LIGHT_BLACK: "#ED9B9B";
-    readonly GRAY10: "#D6D6D6";
-    readonly GRAY20: "#CDCDCD";
-    readonly GRAY30: "#B3B3B3";
-    readonly GRAY40: "#9A9A9A";
-    readonly GRAY50: "#808080";
-    readonly GRAY60: "#666666";
-    readonly GRAY70: "#4D4D4D";
-    readonly GRAY80: "#333333";
-    readonly GRAY90: "#1A1A1A";
-    readonly BLUE_A: "#CCFAFF";
-    readonly BLUE_B: "#80F6FF";
-    readonly BLUE_C: "#63D9EA";
-    readonly BLUE_D: "#11ACCD";
-    readonly BLUE_E: "#0C7F99";
-    readonly TEAL_A: "#94FFF5";
-    readonly TEAL_B: "#26EDD5";
-    readonly TEAL_C: "#01D1C1";
-    readonly TEAL_D: "#01A995";
-    readonly TEAL_E: "#208170";
-    readonly GREEN_A: "#B6FFB0";
-    readonly GREEN_B: "#8AF281";
-    readonly GREEN_C: "#74CF70";
-    readonly GREEN_D: "#1FAB54";
-    readonly GREEN_E: "#0D923F";
-    readonly GOLD_A: "#FFD0A9";
-    readonly GOLD_B: "#FFBB71";
-    readonly GOLD_C: "#FF9C39";
-    readonly GOLD_D: "#E07D10";
-    readonly GOLD_E: "#A75A05";
-    readonly RED_A: "#FCA9A9";
-    readonly RED_B: "#FF8482";
-    readonly RED_C: "#F9685D";
-    readonly RED_D: "#E84D39";
-    readonly RED_E: "#BC2612";
-    readonly MAROON_A: "#FFBDE0";
-    readonly MAROON_B: "#FF92C6";
-    readonly MAROON_C: "#ED5FA6";
-    readonly MAROON_D: "#CA337C";
-    readonly MAROON_E: "#9E034E";
-    readonly PURPLE_A: "#DDD7FF";
-    readonly PURPLE_B: "#C6B9FC";
-    readonly PURPLE_C: "#AA87FF";
-    readonly PURPLE_D: "#7854AB";
-    readonly PURPLE_E: "#543B78";
-    readonly MINT_A: "#F5F9E8";
-    readonly MINT_B: "#EDF2DF";
-    readonly MINT_C: "#E0E5CC";
-    readonly GRAY_A: "#F6F7F7";
-    readonly GRAY_B: "#F0F1F2";
     readonly GRAY_C: "#E3E5E6";
-    readonly GRAY_D: "#D6D8DA";
-    readonly GRAY_E: "#BABEC2";
-    readonly GRAY_F: "#888D93";
     readonly GRAY_G: "#626569";
-    readonly GRAY_H: "#3B3E40";
-    readonly GRAY_I: "#21242C";
-    readonly KA_BLUE: "#314453";
-    readonly KA_GREEN: "#71B307";
-    readonly _BACKGROUND: "#FDFDFD";
     readonly INTERACTING: string;
     readonly INTERACTIVE: string;
     readonly DYNAMIC: string;
@@ -87,4 +39,24 @@ declare const KhanColors: {
  * @returns a string representing the background color, or a CSS variable for the default background color.
  */
 export declare const getBackgroundColor: (elementToInspect: HTMLElement) => string;
+interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+/**
+ * Resolves a CSS color into its red, green, and blue components.
+ * @param color - can be hex, a name like `"black"`, or e.g. `rgb(0, 0, 0)`.
+ */
+export declare function resolveColor(color: string): RGB;
+export declare function toClosestMathColor(target: string): string;
+export declare function parseHexColor(hex: string): RGB;
+/**
+ * Uses a variant of the "redmean" algorithm to determine how similar two
+ * colors are. In contrast to redmean, we skip taking the square root of the
+ * result, which means this function gives you a relative difference, not an
+ * absolute difference.
+ * See: https://en.wikipedia.org/wiki/Color_difference
+ */
+export declare function diffColors(a: RGB, b: RGB): number;
 export default KhanColors;

package/dist/util/graphie.d.ts

@@ -2,7 +2,6 @@ import type { MouseHandler } from "./interactive";
 import type { Interval } from "./interval";
 import type { Coord } from "../interactive2/types";
 import type { GraphieLabelElement } from "../types";
-export declare function polar(r: number | Coord, th: number): Coord;
 interface RaphaelElement {
     type: string;
     attrs: Record<string, any>;

package/dist/widgets/graded-group/graded-group.d.ts

@@ -29,7 +29,6 @@ export declare class GradedGroup extends React.Component<Props, State> implement
     rendererRef: React.RefObject<Renderer>;
     hintRendererRef: React.RefObject<Renderer>;
     componentDidMount(): void;
-    shouldComponentUpdate(nextProps: Props, nextState: State): boolean;
     _handleUserInput(_userInput: UserInputMap, widgetsEmpty: boolean): void;
     _checkAnswer: () => void;
     getInputPaths: () => ReadonlyArray<FocusPath>;

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

@@ -21,6 +21,7 @@ declare const _default: {
             isArticle?: boolean;
             onFocusChange?: (newFocusPath: import("../..").FocusPath, oldFocusPath: import("../..").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
             showAlignmentOptions?: boolean;
+            renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
             readOnly?: boolean;
             editingDisabled?: boolean;
             answerableCallback?: (arg1: boolean) => unknown;
@@ -44,7 +45,7 @@ declare const _default: {
             isMobile?: boolean;
             isMobileApp?: boolean;
             hintProgressColor?: string;
-            flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+            flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;

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

@@ -30,6 +30,7 @@ declare class InteractiveGraph extends React.Component<Props> {
             isArticle?: boolean;
             onFocusChange?: (newFocusPath: import("../..").FocusPath, oldFocusPath: import("../..").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
             showAlignmentOptions?: boolean;
+            renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
             readOnly?: boolean;
             editingDisabled?: boolean;
             answerableCallback?: (arg1: boolean) => unknown;
@@ -53,7 +54,7 @@ declare class InteractiveGraph extends React.Component<Props> {
             isMobile?: boolean;
             isMobileApp?: boolean;
             hintProgressColor?: string;
-            flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+            flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;

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

@@ -42,6 +42,7 @@ declare class MockWidgetComponent extends React.Component<Props> implements Widg
             isArticle?: boolean;
             onFocusChange?: (newFocusPath: import("../..").FocusPath, oldFocusPath: import("../..").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
             showAlignmentOptions?: boolean;
+            renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
             readOnly?: boolean;
             editingDisabled?: boolean;
             answerableCallback?: (arg1: boolean) => unknown;
@@ -65,7 +66,7 @@ declare class MockWidgetComponent extends React.Component<Props> implements Widg
             isMobile?: boolean;
             isMobileApp?: boolean;
             hintProgressColor?: string;
-            flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+            flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;

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

@@ -21,6 +21,7 @@ declare const _default: {
             isArticle?: boolean;
             onFocusChange?: (newFocusPath: import("../..").FocusPath, oldFocusPath: import("../..").FocusPath, keypadHeight?: number, focusedElement?: HTMLElement) => unknown;
             showAlignmentOptions?: boolean;
+            renderExtras?: (answerArea: import("@khanacademy/perseus-core").PerseusAnswerArea, widgetId: string) => React.ReactNode;
             readOnly?: boolean;
             editingDisabled?: boolean;
             answerableCallback?: (arg1: boolean) => unknown;
@@ -44,7 +45,7 @@ declare const _default: {
             isMobile?: boolean;
             isMobileApp?: boolean;
             hintProgressColor?: string;
-            flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator", boolean>;
+            flags?: Record<"perseus-renderer-upgrade" | "desmos-calculator" | "article-extras" | "dnd-widget-fitb", boolean>;
         }> & {
             baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
             isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;

package/dist/widgets.d.ts

@@ -13,7 +13,13 @@ export declare const registerWidgets: (widgetArr: ReadonlyArray<WidgetExports>)
  */
 export declare const replaceWidget: (type: string, replacementType: string) => void;
 export declare const replaceDeprecatedWidgets: () => void;
-export declare const registerEditors: (editorsToRegister: ReadonlyArray<Editor>) => void;
+/**
+ * Register widget editors, keyed by the type of widget each one edits.
+ *
+ * The keys are widget types as they appear in Perseus content (eg. `radio`),
+ * which is what `getEditor` looks up when the editor page renders a widget.
+ */
+export declare const registerEditors: (editorsToRegister: Record<string, Editor>) => void;
 /**
  *
  * @param type - the widget that you are trying to replace

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core Perseus API (includes renderers and widgets)",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "85.1.3",
+  "version": "86.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -45,12 +45,12 @@
     "uuid": "^10.0.0",
     "jquery": "^2.1.1",
     "@khanacademy/kas": "2.2.6",
-    "@khanacademy/keypad-context": "3.2.87",
-    "@khanacademy/kmath": "2.4.46",
-    "@khanacademy/perseus-core": "38.0.1",
-    "@khanacademy/perseus-linter": "5.2.0",
-    "@khanacademy/perseus-score": "8.12.19",
-    "@khanacademy/math-input": "27.0.9",
+    "@khanacademy/keypad-context": "3.2.89",
+    "@khanacademy/kmath": "2.4.48",
+    "@khanacademy/math-input": "27.0.11",
+    "@khanacademy/perseus-core": "38.1.1",
+    "@khanacademy/perseus-linter": "5.2.2",
+    "@khanacademy/perseus-score": "8.12.21",
     "@khanacademy/perseus-utils": "2.1.5",
     "@khanacademy/pure-markdown": "2.3.2",
     "@khanacademy/simple-markdown": "3.0.1"
@@ -62,7 +62,7 @@
     "@khanacademy/wonder-blocks-clickable": "8.2.9",
     "@khanacademy/wonder-blocks-core": "12.4.4",
     "@khanacademy/wonder-blocks-data": "15.0.3",
-    "@khanacademy/wonder-blocks-dropdown": "10.11.8",
+    "@khanacademy/wonder-blocks-dropdown": "10.12.0",
     "@khanacademy/wonder-blocks-form": "7.6.10",
     "@khanacademy/wonder-blocks-icon": "5.3.23",
     "@khanacademy/wonder-blocks-icon-button": "11.4.5",
@@ -98,7 +98,7 @@
     "@khanacademy/wonder-blocks-clickable": "^8.2.9",
     "@khanacademy/wonder-blocks-core": "^12.4.4",
     "@khanacademy/wonder-blocks-data": "^15.0.3",
-    "@khanacademy/wonder-blocks-dropdown": "^10.11.8",
+    "@khanacademy/wonder-blocks-dropdown": "^10.12.0",
     "@khanacademy/wonder-blocks-form": "^7.6.10",
     "@khanacademy/wonder-blocks-icon": "^5.3.23",
     "@khanacademy/wonder-blocks-icon-button": "^11.4.5",
@@ -127,7 +127,7 @@
   },
   "keywords": [],
   "khan": {
-    "catalogHash": "bcf5b2d4681b77c1"
+    "catalogHash": "08e8d9a41dfc2cab"
   },
   "scripts": {}
 }

package/dist/interactive2/movable-polygon-options.d.ts

@@ -1,40 +0,0 @@
-/**
- * A library of options to pass to add/draw/remove/constraints
- */
-import type { Coord } from "./types";
-declare const _default: {
-    add: {
-        readonly constrain: () => void;
-        readonly pointsToFront: (state: any) => void;
-    };
-    modify: {
-        readonly draw: () => void;
-    };
-    draw: {
-        readonly basic: (state: any, prevState: any) => void;
-        readonly labels: (state: any, prevState: any) => void;
-        readonly highlight: (state: any, prevState: any) => void;
-    };
-    remove: {
-        readonly basic: () => void;
-        readonly labels: () => void;
-    };
-    onMoveStart: {
-        standard: null;
-    };
-    constraints: {
-        readonly fixed: () => () => boolean;
-        readonly snap: (snap: any) => (arg1: Coord) => unknown;
-        readonly bound: (range: any, snap: any, paddingPx: number) => (arg1: Coord, arg2: Coord) => Coord;
-    };
-    onMove: {
-        readonly updatePoints: (coord: Coord, prevCoord: Coord) => void;
-    };
-    onMoveEnd: {
-        standard: null;
-    };
-    onClick: {
-        standard: null;
-    };
-};
-export default _default;

package/dist/interactive2/movable-polygon.d.ts

@@ -1,2 +0,0 @@
-declare const MovablePolygon: (graphie: any, movable: any, options: any) => void;
-export default MovablePolygon;