diff --git a/.changeset/mean-needles-float.md b/.changeset/mean-needles-float.md
new file mode 100644
index 0000000000..1577a49859
--- /dev/null
+++ b/.changeset/mean-needles-float.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+[Interactive Graph Editor] Moving around/renaming components so they make more sense for the upcoming hint mode work
diff --git a/packages/perseus-editor/src/components/graph-locked-figures/coordinate-pair-input.tsx b/packages/perseus-editor/src/components/coordinate-pair-input.tsx
similarity index 100%
rename from packages/perseus-editor/src/components/graph-locked-figures/coordinate-pair-input.tsx
rename to packages/perseus-editor/src/components/coordinate-pair-input.tsx
diff --git a/packages/perseus-editor/src/components/graph-locked-figures/defining-point-settings.tsx b/packages/perseus-editor/src/components/graph-locked-figures/defining-point-settings.tsx
index dba6308f73..6a11d65fab 100644
--- a/packages/perseus-editor/src/components/graph-locked-figures/defining-point-settings.tsx
+++ b/packages/perseus-editor/src/components/graph-locked-figures/defining-point-settings.tsx
@@ -11,11 +11,12 @@ import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
+import CoordinatePairInput from "../coordinate-pair-input";
+import PerseusEditorAccordion from "../perseus-editor-accordion";
+
 import ColorSelect from "./color-select";
 import ColorSwatch from "./color-swatch";
-import CoordinatePairInput from "./coordinate-pair-input";
 import LabeledSwitch from "./labeled-switch";
-import LockedFigureSettingsAccordion from "./locked-figure-settings-accordion";
 
 import type {LockedPointType} from "@khanacademy/perseus";
 
@@ -72,7 +73,7 @@ const DefiningPointSettings = (props: Props) => {
     }
 
     return (
-        <LockedFigureSettingsAccordion
+        <PerseusEditorAccordion
             expanded={expanded}
             onToggle={onToggle}
             containerStyle={styles.container}
@@ -125,7 +126,7 @@ const DefiningPointSettings = (props: Props) => {
                     />
                 </>
             )}
-        </LockedFigureSettingsAccordion>
+        </PerseusEditorAccordion>
     );
 };
 
diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-ellipse-settings.tsx b/packages/perseus-editor/src/components/graph-locked-figures/locked-ellipse-settings.tsx
index b066762e60..2d0b37e1d4 100644
--- a/packages/perseus-editor/src/components/graph-locked-figures/locked-ellipse-settings.tsx
+++ b/packages/perseus-editor/src/components/graph-locked-figures/locked-ellipse-settings.tsx
@@ -8,11 +8,11 @@ import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
 import AngleInput from "../angle-input";
+import CoordinatePairInput from "../coordinate-pair-input";
+import PerseusEditorAccordion from "../perseus-editor-accordion";
 
 import ColorSelect from "./color-select";
-import CoordinatePairInput from "./coordinate-pair-input";
 import EllipseSwatch from "./ellipse-swatch";
-import LockedFigureSettingsAccordion from "./locked-figure-settings-accordion";
 import LockedFigureSettingsActions from "./locked-figure-settings-actions";
 
 import type {LockedFigureSettingsCommonProps} from "./locked-figure-settings";
@@ -53,7 +53,7 @@ const LockedEllipseSettings = (props: Props) => {
     }
 
     return (
-        <LockedFigureSettingsAccordion
+        <PerseusEditorAccordion
             expanded={expanded}
             onToggle={onToggle}
             header={
@@ -165,7 +165,7 @@ const LockedEllipseSettings = (props: Props) => {
                 onMove={onMove}
                 onRemove={onRemove}
             />
-        </LockedFigureSettingsAccordion>
+        </PerseusEditorAccordion>
     );
 };
 
diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-line-settings.tsx b/packages/perseus-editor/src/components/graph-locked-figures/locked-line-settings.tsx
index 07684f843a..9a543f5320 100644
--- a/packages/perseus-editor/src/components/graph-locked-figures/locked-line-settings.tsx
+++ b/packages/perseus-editor/src/components/graph-locked-figures/locked-line-settings.tsx
@@ -13,10 +13,11 @@ import {LabelMedium, LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
+import PerseusEditorAccordion from "../perseus-editor-accordion";
+
 import ColorSelect from "./color-select";
 import DefiningPointSettings from "./defining-point-settings";
 import LineSwatch from "./line-swatch";
-import LockedFigureSettingsAccordion from "./locked-figure-settings-accordion";
 import LockedFigureSettingsActions from "./locked-figure-settings-actions";
 
 import type {LockedFigureSettingsCommonProps} from "./locked-figure-settings";
@@ -90,7 +91,7 @@ const LockedLineSettings = (props: Props) => {
     }
 
     return (
-        <LockedFigureSettingsAccordion
+        <PerseusEditorAccordion
             expanded={props.expanded}
             onToggle={props.onToggle}
             header={
@@ -182,7 +183,7 @@ const LockedLineSettings = (props: Props) => {
                 onMove={onMove}
                 onRemove={onRemove}
             />
-        </LockedFigureSettingsAccordion>
+        </PerseusEditorAccordion>
     );
 };
 
diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-point-settings.tsx b/packages/perseus-editor/src/components/graph-locked-figures/locked-point-settings.tsx
index fdd8de7fe6..21357001ce 100644
--- a/packages/perseus-editor/src/components/graph-locked-figures/locked-point-settings.tsx
+++ b/packages/perseus-editor/src/components/graph-locked-figures/locked-point-settings.tsx
@@ -11,11 +11,12 @@ import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
+import CoordinatePairInput from "../coordinate-pair-input";
+import PerseusEditorAccordion from "../perseus-editor-accordion";
+
 import ColorSelect from "./color-select";
 import ColorSwatch from "./color-swatch";
-import CoordinatePairInput from "./coordinate-pair-input";
 import LabeledSwitch from "./labeled-switch";
-import LockedFigureSettingsAccordion from "./locked-figure-settings-accordion";
 import LockedFigureSettingsActions from "./locked-figure-settings-actions";
 
 import type {LockedFigureSettingsCommonProps} from "./locked-figure-settings";
@@ -44,7 +45,7 @@ const LockedPointSettings = (props: Props) => {
     }
 
     return (
-        <LockedFigureSettingsAccordion
+        <PerseusEditorAccordion
             expanded={props.expanded}
             onToggle={props.onToggle}
             header={
@@ -84,7 +85,7 @@ const LockedPointSettings = (props: Props) => {
                 onMove={onMove}
                 onRemove={onRemove}
             />
-        </LockedFigureSettingsAccordion>
+        </PerseusEditorAccordion>
     );
 };
 
diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-polygon-settings.tsx b/packages/perseus-editor/src/components/graph-locked-figures/locked-polygon-settings.tsx
index aeb24a29c4..4d88404a3c 100644
--- a/packages/perseus-editor/src/components/graph-locked-figures/locked-polygon-settings.tsx
+++ b/packages/perseus-editor/src/components/graph-locked-figures/locked-polygon-settings.tsx
@@ -17,10 +17,11 @@ import plusCircle from "@phosphor-icons/core/regular/plus-circle.svg";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
+import CoordinatePairInput from "../coordinate-pair-input";
+import PerseusEditorAccordion from "../perseus-editor-accordion";
+
 import ColorSelect from "./color-select";
-import CoordinatePairInput from "./coordinate-pair-input";
 import LabeledSwitch from "./labeled-switch";
-import LockedFigureSettingsAccordion from "./locked-figure-settings-accordion";
 import LockedFigureSettingsActions from "./locked-figure-settings-actions";
 import PolygonSwatch from "./polygon-swatch";
 
@@ -53,7 +54,7 @@ const LockedPolygonSettings = (props: Props) => {
     }
 
     return (
-        <LockedFigureSettingsAccordion
+        <PerseusEditorAccordion
             expanded={expanded}
             onToggle={onToggle}
             header={
@@ -133,7 +134,7 @@ const LockedPolygonSettings = (props: Props) => {
                 style={styles.spaceUnder}
             />
 
-            <LockedFigureSettingsAccordion
+            <PerseusEditorAccordion
                 header={<LabelLarge>Points</LabelLarge>}
                 expanded={true}
                 containerStyle={styles.pointAccordionContainer}
@@ -193,7 +194,7 @@ const LockedPolygonSettings = (props: Props) => {
                 >
                     Add point
                 </Button>
-            </LockedFigureSettingsAccordion>
+            </PerseusEditorAccordion>
 
             {/* Actions */}
             <LockedFigureSettingsActions
@@ -202,7 +203,7 @@ const LockedPolygonSettings = (props: Props) => {
                 onMove={onMove}
                 onRemove={onRemove}
             />
-        </LockedFigureSettingsAccordion>
+        </PerseusEditorAccordion>
     );
 };
 
diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-vector-settings.tsx b/packages/perseus-editor/src/components/graph-locked-figures/locked-vector-settings.tsx
index 30067b1389..11436d9c98 100644
--- a/packages/perseus-editor/src/components/graph-locked-figures/locked-vector-settings.tsx
+++ b/packages/perseus-editor/src/components/graph-locked-figures/locked-vector-settings.tsx
@@ -12,10 +12,11 @@ import {LabelLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
+import CoordinatePairInput from "../coordinate-pair-input";
+import PerseusEditorAccordion from "../perseus-editor-accordion";
+
 import ColorSelect from "./color-select";
-import CoordinatePairInput from "./coordinate-pair-input";
 import LineSwatch from "./line-swatch";
-import LockedFigureSettingsAccordion from "./locked-figure-settings-accordion";
 import LockedFigureSettingsActions from "./locked-figure-settings-actions";
 
 import type {LockedFigureSettingsCommonProps} from "./locked-figure-settings";
@@ -61,7 +62,7 @@ const LockedVectorSettings = (props: Props) => {
     }
 
     return (
-        <LockedFigureSettingsAccordion
+        <PerseusEditorAccordion
             expanded={props.expanded}
             onToggle={props.onToggle}
             header={
@@ -88,7 +89,7 @@ const LockedVectorSettings = (props: Props) => {
             )}
 
             {/* Coordinates */}
-            <LockedFigureSettingsAccordion
+            <PerseusEditorAccordion
                 expanded={true} // Initial state is expanded
                 containerStyle={styles.container}
                 panelStyle={styles.accordionPanel}
@@ -105,9 +106,9 @@ const LockedVectorSettings = (props: Props) => {
                         handleChangePoint(newProps, 0);
                     }}
                 />
-            </LockedFigureSettingsAccordion>
+            </PerseusEditorAccordion>
 
-            <LockedFigureSettingsAccordion
+            <PerseusEditorAccordion
                 expanded={true} // Initial state is expanded
                 containerStyle={styles.container}
                 panelStyle={styles.accordionPanel}
@@ -124,7 +125,7 @@ const LockedVectorSettings = (props: Props) => {
                         handleChangePoint(newProps, 1);
                     }}
                 />
-            </LockedFigureSettingsAccordion>
+            </PerseusEditorAccordion>
 
             {/* Actions */}
             <LockedFigureSettingsActions
@@ -133,7 +134,7 @@ const LockedVectorSettings = (props: Props) => {
                 onMove={onMove}
                 onRemove={onRemove}
             />
-        </LockedFigureSettingsAccordion>
+        </PerseusEditorAccordion>
     );
 };
 
diff --git a/packages/perseus-editor/src/components/heading.tsx b/packages/perseus-editor/src/components/heading.tsx
new file mode 100644
index 0000000000..eef6e6070d
--- /dev/null
+++ b/packages/perseus-editor/src/components/heading.tsx
@@ -0,0 +1,40 @@
+import {View} from "@khanacademy/wonder-blocks-core";
+import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
+import * as React from "react";
+
+import ToggleableCaret from "./toggleable-caret";
+
+function Heading({
+    title,
+    isOpen,
+    onToggle,
+}: {
+    title: string;
+    isOpen: boolean;
+    onToggle?: (isOpen: boolean) => void;
+}) {
+    return (
+        <View
+            style={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+                backgroundColor: color.offBlack8,
+                padding: spacing.xSmall_8,
+                marginTop: spacing.small_12,
+                // NOTE(jeremy): This is the inverse of the @editorPadding CSS
+                // variable found in perseus-editor.less. For now, it must
+                // match otherwise there's a gap from this header to the edge
+                // of the editor borders.
+                marginInline: -10,
+                cursor: "pointer",
+            }}
+            onClick={() => onToggle?.(!isOpen)}
+        >
+            <LabelSmall>{title}</LabelSmall>
+            <ToggleableCaret isExpanded={isOpen} />
+        </View>
+    );
+}
+
+export default Heading;
diff --git a/packages/perseus-editor/src/components/interactive-graph-settings.tsx b/packages/perseus-editor/src/components/interactive-graph-settings.tsx
index 61a2316d05..13ee09484f 100644
--- a/packages/perseus-editor/src/components/interactive-graph-settings.tsx
+++ b/packages/perseus-editor/src/components/interactive-graph-settings.tsx
@@ -12,13 +12,12 @@ import Banner from "@khanacademy/wonder-blocks-banner";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
-import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
 import {css, StyleSheet} from "aphrodite";
 import * as React from "react";
 import _ from "underscore";
 
 import LabeledRow from "./graph-locked-figures/labeled-row";
-import ToggleableCaret from "./toggleable-caret";
+import Heading from "./heading";
 
 import type {PerseusImageBackground} from "@khanacademy/perseus";
 
@@ -34,38 +33,6 @@ function numSteps(range: any, step: any) {
     return Math.floor((range[1] - range[0]) / step);
 }
 
-function Heading({
-    title,
-    isOpen,
-    onToggle,
-}: {
-    title: string;
-    isOpen: boolean;
-    onToggle?: (isOpen: boolean) => void;
-}) {
-    return (
-        <View
-            style={{
-                flexDirection: "row",
-                justifyContent: "space-between",
-                backgroundColor: color.offBlack8,
-                padding: spacing.xSmall_8,
-                marginTop: spacing.small_12,
-                // NOTE(jeremy): This is the inverse of the @editorPadding CSS
-                // variable found in perseus-editor.less. For now, it must
-                // match otherwise there's a gap from this header to the edge
-                // of the editor borders.
-                marginInline: -10,
-                cursor: "pointer",
-            }}
-            onClick={() => onToggle?.(!isOpen)}
-        >
-            <LabelSmall>{title}</LabelSmall>
-            <ToggleableCaret isExpanded={isOpen} />
-        </View>
-    );
-}
-
 type Range = [min: number, max: number];
 
 type Props = {
diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-figure-settings-accordion.tsx b/packages/perseus-editor/src/components/perseus-editor-accordion.tsx
similarity index 92%
rename from packages/perseus-editor/src/components/graph-locked-figures/locked-figure-settings-accordion.tsx
rename to packages/perseus-editor/src/components/perseus-editor-accordion.tsx
index ea34ea009c..16fc3ccf8d 100644
--- a/packages/perseus-editor/src/components/graph-locked-figures/locked-figure-settings-accordion.tsx
+++ b/packages/perseus-editor/src/components/perseus-editor-accordion.tsx
@@ -15,7 +15,7 @@ type Props = {
     onToggle?: (expanded: boolean) => void;
 };
 
-const LockedFigureSettingsAccordion = (props: Props) => {
+const PerseusEditorAccordion = (props: Props) => {
     const {children, header, expanded, containerStyle, panelStyle, onToggle} =
         props;
 
@@ -24,7 +24,7 @@ const LockedFigureSettingsAccordion = (props: Props) => {
             // More specificity so that we can override the default
             // .heading > h2 > .header styles from the articles.less
             // file (which is imported in perseus-renderer.less).
-            className="locked-figure-accordion"
+            className="perseus-editor-accordion"
         >
             <AccordionSection
                 expanded={expanded}
@@ -62,4 +62,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default LockedFigureSettingsAccordion;
+export default PerseusEditorAccordion;
diff --git a/packages/perseus/src/index.ts b/packages/perseus/src/index.ts
index 08ef7f56d2..0cd8a8c567 100644
--- a/packages/perseus/src/index.ts
+++ b/packages/perseus/src/index.ts
@@ -173,6 +173,7 @@ export type {
     // Utility types
     Range,
     Size,
+    CollinearTuple,
     MathFormat,
     InputNumberWidget, // TODO(jeremy): remove?
     // Widget configuration types
diff --git a/packages/perseus/src/styles/perseus-renderer.less b/packages/perseus/src/styles/perseus-renderer.less
index 32e1129470..88c363522a 100644
--- a/packages/perseus/src/styles/perseus-renderer.less
+++ b/packages/perseus/src/styles/perseus-renderer.less
@@ -718,7 +718,7 @@
     }
 }
 
-.perseus-widget-editor-content .locked-figure-accordion h2 {
+.perseus-widget-editor-content .perseus-editor-accordion h2 {
     // Reset the padding that's added to article h2
     // for the accordion h2.
     padding-top: 0;