@khanacademy/perseus 78.1.0 → 78.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/dist/components/button-group.d.ts +4 -0
  2. package/dist/components/gif-image.d.ts +2 -1
  3. package/dist/components/svg-image.d.ts +2 -0
  4. package/dist/es/index.css +1 -1
  5. package/dist/es/index.css.map +1 -1
  6. package/dist/es/index.js +43 -29
  7. package/dist/es/index.js.map +1 -1
  8. package/dist/es/strings.js +1 -1
  9. package/dist/es/strings.js.map +1 -1
  10. package/dist/index.css +1 -1
  11. package/dist/index.css.map +1 -1
  12. package/dist/index.js +43 -29
  13. package/dist/index.js.map +1 -1
  14. package/dist/perseus-markdown.new.d.ts +11 -0
  15. package/dist/renderer.d.ts +15 -202
  16. package/dist/renderer.new.d.ts +200 -0
  17. package/dist/renderer.old.d.ts +211 -0
  18. package/dist/server-item-renderer.d.ts +1 -1
  19. package/dist/strings.d.ts +136 -12
  20. package/dist/strings.js +1 -1
  21. package/dist/strings.js.map +1 -1
  22. package/dist/testing/feature-flags-util.d.ts +7 -12
  23. package/dist/testing/item-renderer-hooks.d.ts +1 -1
  24. package/dist/widgets/dropdown/dropdown.d.ts +1 -1
  25. package/dist/widgets/expression/expression.d.ts +2 -2
  26. package/dist/widgets/image/components/image-info-area.d.ts +3 -1
  27. package/dist/widgets/image/utils.d.ts +7 -0
  28. package/dist/widgets/interactive-graphs/graphs/components/movable-point-labels-layer/index.d.ts +1 -0
  29. package/dist/widgets/interactive-graphs/graphs/components/movable-point-labels-layer/movable-point-labels-layer.d.ts +7 -0
  30. package/dist/widgets/interactive-graphs/interactive-graph.d.ts +1 -1
  31. package/dist/widgets/interactive-graphs/label-stroke-filter.d.ts +15 -0
  32. package/dist/widgets/interactive-graphs/mafs-graph.d.ts +2 -0
  33. package/dist/widgets/interactive-graphs/stateful-mafs-graph.d.ts +2 -0
  34. package/dist/widgets/interactive-graphs/types.d.ts +2 -0
  35. package/dist/widgets/interactive-graphs/use-reinitialize-on-graph-change.d.ts +8 -0
  36. package/dist/widgets/interactive-graphs/utils/movable-point-labels.d.ts +10 -0
  37. package/dist/widgets/label-image/label-image.d.ts +1 -1
  38. package/dist/widgets/mock-widgets/mock-widget.d.ts +1 -1
  39. package/dist/widgets/numeric-input/numeric-input.class.d.ts +1 -1
  40. package/dist/widgets/numeric-input/numeric-input.d.ts +2 -2
  41. package/dist/widgets/table/table.d.ts +1 -1
  42. package/package.json +8 -8
  43. /package/dist/widgets/interactive-graphs/{point-labels.d.ts → utils/point-labels/point-labels.d.ts} +0 -0
@@ -1,21 +1,16 @@
1
- declare const DEFAULT_FEATURE_FLAGS: {
2
- "perseus-test-flag-1": boolean;
3
- "perseus-test-flag-2": boolean;
4
- "interactive-graph-vector": boolean;
5
- "interactive-graph-not-scored": boolean;
6
- "input-number-to-numeric-input": boolean;
7
- "grapher-to-interactive-graph": boolean;
8
- };
1
+ import type { PerseusFeatureFlags } from "@khanacademy/perseus-core";
2
+ declare const DEFAULT_FEATURE_FLAGS: Record<"perseus-test-flag-1" | "perseus-test-flag-2" | (typeof PerseusFeatureFlags)[number], boolean>;
9
3
  /** Utility to get feature flags with optional overrides for testing.
10
4
  * sample usage:
11
5
  * getFeatureFlags({"image-widget-upgrade": true})
12
6
  */
13
7
  export declare function getFeatureFlags(overrides?: Partial<typeof DEFAULT_FEATURE_FLAGS>): {
14
- "perseus-test-flag-1": boolean;
15
- "perseus-test-flag-2": boolean;
16
- "interactive-graph-vector": boolean;
17
- "interactive-graph-not-scored": boolean;
18
8
  "input-number-to-numeric-input": boolean;
9
+ "perseus-renderer-upgrade": boolean;
19
10
  "grapher-to-interactive-graph": boolean;
11
+ "desmos-calculator": boolean;
12
+ "perseus-enable-point-label-field": boolean;
13
+ "perseus-test-flag-1": boolean;
14
+ "perseus-test-flag-2": boolean;
20
15
  };
21
16
  export {};
@@ -34,7 +34,7 @@ export declare const useItemRenderer: (item: PerseusItem, apiOptions?: APIOption
34
34
  }>) => void;
35
35
  isMobileApp?: boolean;
36
36
  hintProgressColor?: string;
37
- flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
37
+ flags?: Record<"input-number-to-numeric-input" | "perseus-renderer-upgrade" | "grapher-to-interactive-graph" | "desmos-calculator" | "perseus-enable-point-label-field", boolean>;
38
38
  };
39
39
  toggleMobile: (isMobile: boolean) => void;
40
40
  toggleRtl: (isRtl: boolean) => void;
@@ -47,7 +47,7 @@ declare const _default: {
47
47
  isMobile?: boolean;
48
48
  isMobileApp?: boolean;
49
49
  hintProgressColor?: string;
50
- flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
50
+ flags?: Record<"input-number-to-numeric-input" | "perseus-renderer-upgrade" | "grapher-to-interactive-graph" | "desmos-calculator" | "perseus-enable-point-label-field", boolean>;
51
51
  }> & {
52
52
  baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
53
53
  isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;
@@ -37,7 +37,7 @@ export declare const Expression: React.ForwardRefExoticComponent<PerseusExpressi
37
37
  isMobile?: boolean;
38
38
  isMobileApp?: boolean;
39
39
  hintProgressColor?: string;
40
- flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
40
+ flags?: Record<"input-number-to-numeric-input" | "perseus-renderer-upgrade" | "grapher-to-interactive-graph" | "desmos-calculator" | "perseus-enable-point-label-field", boolean>;
41
41
  }> & {
42
42
  baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
43
43
  isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;
@@ -109,7 +109,7 @@ declare const _default: {
109
109
  isMobile?: boolean;
110
110
  isMobileApp?: boolean;
111
111
  hintProgressColor?: string;
112
- flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
112
+ flags?: Record<"input-number-to-numeric-input" | "perseus-renderer-upgrade" | "grapher-to-interactive-graph" | "desmos-calculator" | "perseus-enable-point-label-field", boolean>;
113
113
  }> & {
114
114
  baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
115
115
  isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;
@@ -19,7 +19,9 @@ export interface CommonImageProps {
19
19
  linterContext: LinterContextProps;
20
20
  apiOptions: APIOptions;
21
21
  }
22
- type Props = GifProps & CommonImageProps;
22
+ type Props = GifProps & CommonImageProps & {
23
+ isAnimatedGif: boolean;
24
+ };
23
25
  /**
24
26
  * The ImageInfoArea component includes the GIF controls, description modal
25
27
  * launcher, and caption for the image. This is displayed underneath the image
@@ -1,4 +1,11 @@
1
+ import type { ParsedFrame } from "gifuct-js";
1
2
  export declare function isGif(url: string): boolean;
3
+ /**
4
+ * Fetches a GIF and decodes it into individual frames using gifuct-js.
5
+ * Returns the parsed frames array, which includes per-frame pixel data,
6
+ * delay, dimensions, and disposal type.
7
+ */
8
+ export declare function decodeGifFrames(src: string): Promise<ParsedFrame[]>;
2
9
  export declare function isSvg(url: string): boolean;
3
10
  export declare const earthMoonImage: {
4
11
  url: string;
@@ -0,0 +1 @@
1
+ export { default } from "./movable-point-labels-layer";
@@ -0,0 +1,7 @@
1
+ import * as React from "react";
2
+ import type { InteractiveGraphState } from "../../../types";
3
+ interface Props {
4
+ state: InteractiveGraphState;
5
+ }
6
+ export default function MovablePointLabelsLayer({ state }: Props): React.JSX.Element | null;
7
+ export {};
@@ -194,7 +194,7 @@ declare class InteractiveGraph extends React.Component<Props, State> {
194
194
  isMobile?: boolean;
195
195
  isMobileApp?: boolean;
196
196
  hintProgressColor?: string;
197
- flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
197
+ flags?: Record<"input-number-to-numeric-input" | "perseus-renderer-upgrade" | "grapher-to-interactive-graph" | "desmos-calculator" | "perseus-enable-point-label-field", boolean>;
198
198
  }> & {
199
199
  baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
200
200
  isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;
@@ -0,0 +1,15 @@
1
+ import * as React from "react";
2
+ /**
3
+ * Creates a stroke around label text so it stays readable when drawn
4
+ * over graph lines, shapes, or other geometry. This isn't as obvious as
5
+ * it might seem because MathJax renders HTML and uses borders for some
6
+ * lines, so a CSS text-stroke alone isn't enough.
7
+ *
8
+ * The filter is referenced by `filter: url(#math-stroke)` on the label
9
+ * element. The same `id="math-stroke"` is reused across labels — if
10
+ * multiple labels render on the same graph, the SVG `<defs>` only need
11
+ * to live in the DOM once for all of them to pick up the filter.
12
+ *
13
+ * See: LEMS-4106 for more information.
14
+ */
15
+ export default function LabelStrokeFilter(): React.JSX.Element;
@@ -1,6 +1,7 @@
1
1
  import * as React from "react";
2
2
  import type { InteractiveGraphAction } from "./reducer/interactive-graph-action";
3
3
  import type { InteractiveGraphState, InteractiveGraphProps } from "./types";
4
+ import type { APIOptionsWithDefaults } from "../../types";
4
5
  import "mafs/core.css";
5
6
  import "./mafs-styles.css";
6
7
  export type MafsGraphProps = {
@@ -24,5 +25,6 @@ export type MafsGraphProps = {
24
25
  readOnly: boolean;
25
26
  static: boolean | null | undefined;
26
27
  widgetId: string;
28
+ apiOptions?: APIOptionsWithDefaults;
27
29
  };
28
30
  export declare const MafsGraph: (props: MafsGraphProps) => React.JSX.Element;
@@ -1,5 +1,6 @@
1
1
  import * as React from "react";
2
2
  import type { InteractiveGraphProps } from "./types";
3
+ import type { APIOptionsWithDefaults } from "../../types";
3
4
  import type { PerseusGraphType, PerseusInteractiveGraphUserInput } from "@khanacademy/perseus-core";
4
5
  export type StatefulMafsGraphProps = {
5
6
  box: [number, number];
@@ -29,6 +30,7 @@ export type StatefulMafsGraphProps = {
29
30
  showAxisTicks: InteractiveGraphProps["showAxisTicks"];
30
31
  widgetId: string;
31
32
  graded?: boolean | null;
33
+ apiOptions?: APIOptionsWithDefaults;
32
34
  };
33
35
  export type StatefulMafsGraphType = {
34
36
  getUserInput: () => PerseusInteractiveGraphUserInput;
@@ -108,6 +108,7 @@ type MoveExponentialPointAnnouncement = {
108
108
  pointLabel: string | number;
109
109
  x: number;
110
110
  y: number;
111
+ hasCurve: boolean;
111
112
  };
112
113
  type MoveLogarithmPointAnnouncement = {
113
114
  type: "move-logarithm-point";
@@ -115,6 +116,7 @@ type MoveLogarithmPointAnnouncement = {
115
116
  pointLabel: string | number;
116
117
  x: number;
117
118
  y: number;
119
+ hasCurve: boolean;
118
120
  };
119
121
  type MoveExponentialAsymptoteAnnouncement = {
120
122
  type: "move-exponential-asymptote";
@@ -0,0 +1,8 @@
1
+ import type { InteractiveGraphAction } from "./reducer/interactive-graph-action";
2
+ import type { StatefulMafsGraphProps } from "./stateful-mafs-graph";
3
+ import type { Dispatch } from "react";
4
+ /**
5
+ * Rebuilds the reducer state from the `graph` prop when the graph definition
6
+ * changes, keeping the editor preview in sync with author edits.
7
+ */
8
+ export declare function useReinitializeOnGraphChange(props: StatefulMafsGraphProps, dispatch: Dispatch<InteractiveGraphAction>): void;
@@ -0,0 +1,10 @@
1
+ import type { InteractiveGraphState } from "../types";
2
+ import type { Interval, vec } from "mafs";
3
+ export type MovablePointLabel = {
4
+ key: string;
5
+ coord: vec.Vector2;
6
+ text: string;
7
+ };
8
+ export type LabelAttach = "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw";
9
+ export declare function getMovablePointLabels(state: InteractiveGraphState): MovablePointLabel[];
10
+ export declare function getLabelAttach(coord: vec.Vector2, range: [Interval, Interval]): LabelAttach;
@@ -146,7 +146,7 @@ declare const _default: {
146
146
  isMobile?: boolean;
147
147
  isMobileApp?: boolean;
148
148
  hintProgressColor?: string;
149
- flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
149
+ flags?: Record<"input-number-to-numeric-input" | "perseus-renderer-upgrade" | "grapher-to-interactive-graph" | "desmos-calculator" | "perseus-enable-point-label-field", boolean>;
150
150
  }> & {
151
151
  baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
152
152
  isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;
@@ -70,7 +70,7 @@ declare class MockWidgetComponent extends React.Component<Props> implements Widg
70
70
  isMobile?: boolean;
71
71
  isMobileApp?: boolean;
72
72
  hintProgressColor?: string;
73
- flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
73
+ flags?: Record<"input-number-to-numeric-input" | "perseus-renderer-upgrade" | "grapher-to-interactive-graph" | "desmos-calculator" | "perseus-enable-point-label-field", boolean>;
74
74
  }> & {
75
75
  baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
76
76
  isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;
@@ -78,7 +78,7 @@ export declare class NumericInput extends React.Component<NumericInputProps> imp
78
78
  isMobile?: boolean;
79
79
  isMobileApp?: boolean;
80
80
  hintProgressColor?: string;
81
- flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
81
+ flags?: Record<"input-number-to-numeric-input" | "perseus-renderer-upgrade" | "grapher-to-interactive-graph" | "desmos-calculator" | "perseus-enable-point-label-field", boolean>;
82
82
  }> & {
83
83
  baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
84
84
  isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;
@@ -40,7 +40,7 @@ export declare const NumericInputComponent: React.ForwardRefExoticComponent<impo
40
40
  isMobile?: boolean;
41
41
  isMobileApp?: boolean;
42
42
  hintProgressColor?: string;
43
- flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
43
+ flags?: Record<"input-number-to-numeric-input" | "perseus-renderer-upgrade" | "grapher-to-interactive-graph" | "desmos-calculator" | "perseus-enable-point-label-field", boolean>;
44
44
  }> & {
45
45
  baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
46
46
  isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;
@@ -91,7 +91,7 @@ export declare const NumericInputComponent: React.ForwardRefExoticComponent<impo
91
91
  isMobile?: boolean;
92
92
  isMobileApp?: boolean;
93
93
  hintProgressColor?: string;
94
- flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
94
+ flags?: Record<"input-number-to-numeric-input" | "perseus-renderer-upgrade" | "grapher-to-interactive-graph" | "desmos-calculator" | "perseus-enable-point-label-field", boolean>;
95
95
  }> & {
96
96
  baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
97
97
  isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;
@@ -78,7 +78,7 @@ declare class Table extends React.Component<Props> implements Widget {
78
78
  isMobile?: boolean;
79
79
  isMobileApp?: boolean;
80
80
  hintProgressColor?: string;
81
- flags?: Record<"input-number-to-numeric-input" | "grapher-to-interactive-graph", boolean>;
81
+ flags?: Record<"input-number-to-numeric-input" | "perseus-renderer-upgrade" | "grapher-to-interactive-graph" | "desmos-calculator" | "perseus-enable-point-label-field", boolean>;
82
82
  }> & {
83
83
  baseElements: NonNullable<import("../..").APIOptions["baseElements"]>;
84
84
  isArticle: NonNullable<import("../..").APIOptions["isArticle"]>;
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Core Perseus API (includes renderers and widgets)",
4
4
  "author": "Khan Academy",
5
5
  "license": "MIT",
6
- "version": "78.1.0",
6
+ "version": "78.3.0",
7
7
  "publishConfig": {
8
8
  "access": "public"
9
9
  },
@@ -43,14 +43,14 @@
43
43
  "tiny-invariant": "1.3.1",
44
44
  "uuid": "^10.0.0",
45
45
  "@khanacademy/kas": "2.2.3",
46
- "@khanacademy/keypad-context": "3.2.64",
47
- "@khanacademy/kmath": "2.4.22",
48
- "@khanacademy/math-input": "26.4.36",
49
- "@khanacademy/perseus-core": "28.1.0",
50
- "@khanacademy/perseus-linter": "5.1.3",
51
- "@khanacademy/perseus-score": "8.11.6",
46
+ "@khanacademy/keypad-context": "3.2.66",
47
+ "@khanacademy/kmath": "2.4.24",
48
+ "@khanacademy/math-input": "26.4.38",
49
+ "@khanacademy/perseus-core": "28.3.0",
50
+ "@khanacademy/perseus-linter": "5.1.5",
51
+ "@khanacademy/perseus-score": "8.11.8",
52
52
  "@khanacademy/perseus-utils": "2.1.5",
53
- "@khanacademy/pure-markdown": "2.2.8",
53
+ "@khanacademy/pure-markdown": "2.3.0",
54
54
  "@khanacademy/simple-markdown": "2.2.3"
55
55
  },
56
56
  "devDependencies": {