diff --git a/src/pageEditor/panes/__snapshots__/EditorPane.test.tsx.snap b/src/pageEditor/panes/__snapshots__/EditorPane.test.tsx.snap
index 133e565b24..07679f5184 100644
--- a/src/pageEditor/panes/__snapshots__/EditorPane.test.tsx.snap
+++ b/src/pageEditor/panes/__snapshots__/EditorPane.test.tsx.snap
@@ -1242,11 +1242,11 @@ exports[`renders a mod component with sub pipeline 1`] = `
                     <a
                       aria-selected="false"
                       class="nav-link"
-                      data-rb-event-key="pageState"
+                      data-rb-event-key="modVariables"
                       href="#"
                       role="tab"
                     >
-                      Page State
+                      Mod Variables
                     </a>
                   </div>
                 </div>
@@ -2072,6 +2072,19 @@ exports[`renders the first selected node 1`] = `
                         Context
                       </a>
                     </div>
+                    <div
+                      class="tabNav nav-item"
+                    >
+                      <a
+                        aria-selected="false"
+                        class="nav-link"
+                        data-rb-event-key="modVariables"
+                        href="#"
+                        role="tab"
+                      >
+                        Mod Variables
+                      </a>
+                    </div>
                     <div
                       class="tabNav nav-item"
                     >
diff --git a/src/pageEditor/tabs/editTab/EditTab.tsx b/src/pageEditor/tabs/editTab/EditTab.tsx
index 61cb74572c..37df4a3d91 100644
--- a/src/pageEditor/tabs/editTab/EditTab.tsx
+++ b/src/pageEditor/tabs/editTab/EditTab.tsx
@@ -23,7 +23,7 @@ import styles from "./EditTab.module.scss";
 import ErrorBoundary from "@/components/ErrorBoundary";
 import DataPanel from "@/pageEditor/tabs/editTab/dataPanel/DataPanel";
 import useModComponentTrace from "@/pageEditor/hooks/useModComponentTrace";
-import FoundationDataPanel from "@/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel";
+import StarterBrickDataPanel from "@/pageEditor/tabs/editTab/dataPanel/StarterBrickDataPanel";
 import { useDispatch, useSelector } from "react-redux";
 import { FOUNDATION_NODE_ID } from "@/pageEditor/store/editor/uiState";
 import {
@@ -159,7 +159,7 @@ const EditTab: React.FC<{
             <div className={styles.dataPanelWrapper}>
               <div className={styles.dataPanel}>
                 {activeNodeId === FOUNDATION_NODE_ID ? (
-                  <FoundationDataPanel />
+                  <StarterBrickDataPanel />
                 ) : (
                   <DataPanel key={activeNodeId} />
                 )}
diff --git a/src/pageEditor/tabs/editTab/dataPanel/DataPanel.tsx b/src/pageEditor/tabs/editTab/dataPanel/DataPanel.tsx
index 1789488c15..c6825d606d 100644
--- a/src/pageEditor/tabs/editTab/dataPanel/DataPanel.tsx
+++ b/src/pageEditor/tabs/editTab/dataPanel/DataPanel.tsx
@@ -52,7 +52,7 @@ import { DocumentRenderer } from "@/bricks/renderers/document";
 import DocumentOutline from "@/pageEditor/documentBuilder/outline/DocumentOutline";
 import useAllBricks from "@/bricks/hooks/useAllBricks";
 import ModComponentFormStateTab from "./tabs/ModComponentFormStateTab";
-import ConfigurationTab from "./tabs/ConfigurationTab";
+import BrickConfigTab from "./tabs/BrickConfigTab";
 import { contextAsPlainObject } from "@/runtime/extendModVariableContext";
 import { joinPathParts } from "@/utils/formUtils";
 import CommentsTab from "@/pageEditor/tabs/editTab/dataPanel/tabs/CommentsTab";
@@ -217,11 +217,13 @@ const DataPanel: React.FC = () => {
           {showDeveloperTabs && (
             <>
               <Nav.Item className={dataPanelStyles.tabNav}>
-                <Nav.Link eventKey={DataPanelTabKey.State}>State</Nav.Link>
+                <Nav.Link eventKey={DataPanelTabKey.ModComponentFormState}>
+                  Editor State
+                </Nav.Link>
               </Nav.Item>
               <Nav.Item className={dataPanelStyles.tabNav}>
                 <Nav.Link eventKey={DataPanelTabKey.BrickConfig}>
-                  Raw Brick
+                  Brick Config
                 </Nav.Link>
               </Nav.Item>
             </>
@@ -263,7 +265,7 @@ const DataPanel: React.FC = () => {
           {showDeveloperTabs && (
             <>
               <ModComponentFormStateTab />
-              <ConfigurationTab config={brickConfig} />
+              <BrickConfigTab config={brickConfig} />
             </>
           )}
           <DataTab eventKey={DataPanelTabKey.Rendered} isTraceEmpty={!record}>
diff --git a/src/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel.test.tsx b/src/pageEditor/tabs/editTab/dataPanel/StarterBrickDataPanel.test.tsx
similarity index 92%
rename from src/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel.test.tsx
rename to src/pageEditor/tabs/editTab/dataPanel/StarterBrickDataPanel.test.tsx
index 111b6cb711..94afd88230 100644
--- a/src/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel.test.tsx
+++ b/src/pageEditor/tabs/editTab/dataPanel/StarterBrickDataPanel.test.tsx
@@ -21,7 +21,7 @@ import { render } from "@/pageEditor/testHelpers";
 import { actions as editorActions } from "@/pageEditor/store/editor/editorSlice";
 import runtimeSlice from "@/pageEditor/store/runtime/runtimeSlice";
 import { DataPanelTabKey } from "@/pageEditor/tabs/editTab/dataPanel/dataPanelTypes";
-import FoundationDataPanel from "@/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel";
+import StarterBrickDataPanel from "@/pageEditor/tabs/editTab/dataPanel/StarterBrickDataPanel";
 import { formStateWithTraceDataFactory } from "@/testUtils/factories/pageEditorFactories";
 
 describe("FoundationDataPanel", () => {
@@ -29,7 +29,7 @@ describe("FoundationDataPanel", () => {
     const { formState, records } = formStateWithTraceDataFactory();
     const modComponentId = formState.uuid;
     const { instanceId } = formState.modComponent.brickPipeline[0];
-    const { asFragment } = render(<FoundationDataPanel />, {
+    const { asFragment } = render(<StarterBrickDataPanel />, {
       initialValues: formState,
       setupRedux(dispatch) {
         dispatch(editorActions.addModComponentFormState(formState));
diff --git a/src/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel.tsx b/src/pageEditor/tabs/editTab/dataPanel/StarterBrickDataPanel.tsx
similarity index 87%
rename from src/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel.tsx
rename to src/pageEditor/tabs/editTab/dataPanel/StarterBrickDataPanel.tsx
index 3b66d1ee13..da712b0eb0 100644
--- a/src/pageEditor/tabs/editTab/dataPanel/FoundationDataPanel.tsx
+++ b/src/pageEditor/tabs/editTab/dataPanel/StarterBrickDataPanel.tsx
@@ -27,10 +27,10 @@ import ModVariablesTab from "./tabs/ModVariablesTab";
 import { DataPanelTabKey } from "@/pageEditor/tabs/editTab/dataPanel/dataPanelTypes";
 import DataTabJsonTree from "./DataTabJsonTree";
 import ModComponentFormStateTab from "./tabs/ModComponentFormStateTab";
-import ConfigurationTab from "./tabs/ConfigurationTab";
+import BrickConfigTab from "./tabs/BrickConfigTab";
 import { selectActiveModComponentFormState } from "@/pageEditor/store/editor/editorSelectors";
 
-const FoundationDataPanel: React.FC = () => {
+const StarterBrickDataPanel: React.FC = () => {
   const { flagOn } = useFlags();
   const showDeveloperTabs = flagOn("page-editor-developer");
 
@@ -41,14 +41,14 @@ const FoundationDataPanel: React.FC = () => {
     modComponent: { brickPipeline },
     starterBrick,
   } = activeModComponentFormState;
-  const firstBlockInstanceId = brickPipeline[0]?.instanceId;
+  const firstBrickInstanceId = brickPipeline[0]?.instanceId;
 
-  const { record: firstBlockTraceRecord } = useSelector(
-    makeSelectBrickTrace(firstBlockInstanceId),
+  const { record: firstBrickTraceRecord } = useSelector(
+    makeSelectBrickTrace(firstBrickInstanceId),
   );
 
   const [activeTabKey, onSelectTab] = useDataPanelActiveTabKey(
-    firstBlockTraceRecord ? DataPanelTabKey.Output : DataPanelTabKey.Preview,
+    firstBrickTraceRecord ? DataPanelTabKey.Output : DataPanelTabKey.Preview,
   );
 
   return (
@@ -60,11 +60,13 @@ const FoundationDataPanel: React.FC = () => {
         {showDeveloperTabs && (
           <>
             <Nav.Item className={dataPanelStyles.tabNav}>
-              <Nav.Link eventKey={DataPanelTabKey.State}>State</Nav.Link>
+              <Nav.Link eventKey={DataPanelTabKey.ModComponentFormState}>
+                Editor State
+              </Nav.Link>
             </Nav.Item>
             <Nav.Item className={dataPanelStyles.tabNav}>
               <Nav.Link eventKey={DataPanelTabKey.BrickConfig}>
-                Raw Foundation
+                Brick Config
               </Nav.Link>
             </Nav.Item>
           </>
@@ -80,7 +82,7 @@ const FoundationDataPanel: React.FC = () => {
         </Nav.Item>
         <Nav.Item className={dataPanelStyles.tabNav}>
           <Nav.Link eventKey={DataPanelTabKey.ModVariables}>
-            Page State
+            Mod Variables
           </Nav.Link>
         </Nav.Item>
       </Nav>
@@ -97,7 +99,7 @@ const FoundationDataPanel: React.FC = () => {
         {showDeveloperTabs && (
           <>
             <ModComponentFormStateTab />
-            <ConfigurationTab config={starterBrick} />
+            <BrickConfigTab config={starterBrick} />
           </>
         )}
         <Tab.Pane
@@ -115,9 +117,9 @@ const FoundationDataPanel: React.FC = () => {
           mountOnEnter
           unmountOnExit
         >
-          {firstBlockTraceRecord ? (
+          {firstBrickTraceRecord ? (
             <DataTabJsonTree
-              data={firstBlockTraceRecord.templateContext}
+              data={firstBrickTraceRecord.templateContext}
               copyable
               searchable
               tabKey={DataPanelTabKey.Output}
@@ -146,4 +148,4 @@ const FoundationDataPanel: React.FC = () => {
   );
 };
 
-export default FoundationDataPanel;
+export default StarterBrickDataPanel;
diff --git a/src/pageEditor/tabs/editTab/dataPanel/__snapshots__/DataPanel.test.tsx.snap b/src/pageEditor/tabs/editTab/dataPanel/__snapshots__/DataPanel.test.tsx.snap
index 9668c80468..7fca15f1d9 100644
--- a/src/pageEditor/tabs/editTab/dataPanel/__snapshots__/DataPanel.test.tsx.snap
+++ b/src/pageEditor/tabs/editTab/dataPanel/__snapshots__/DataPanel.test.tsx.snap
@@ -29,11 +29,11 @@ exports[`DataPanel it renders with form state and trace data 1`] = `
           <a
             aria-selected="false"
             class="nav-link"
-            data-rb-event-key="pageState"
+            data-rb-event-key="modVariables"
             href="#"
             role="tab"
           >
-            Page State
+            Mod Variables
           </a>
         </div>
         <div
diff --git a/src/pageEditor/tabs/editTab/dataPanel/__snapshots__/FoundationDataPanel.test.tsx.snap b/src/pageEditor/tabs/editTab/dataPanel/__snapshots__/StarterBrickDataPanel.test.tsx.snap
similarity index 99%
rename from src/pageEditor/tabs/editTab/dataPanel/__snapshots__/FoundationDataPanel.test.tsx.snap
rename to src/pageEditor/tabs/editTab/dataPanel/__snapshots__/StarterBrickDataPanel.test.tsx.snap
index 3eea4a5073..15c82bccb8 100644
--- a/src/pageEditor/tabs/editTab/dataPanel/__snapshots__/FoundationDataPanel.test.tsx.snap
+++ b/src/pageEditor/tabs/editTab/dataPanel/__snapshots__/StarterBrickDataPanel.test.tsx.snap
@@ -67,11 +67,11 @@ exports[`FoundationDataPanel it renders with form state and trace data 1`] = `
         <a
           aria-selected="false"
           class="nav-link"
-          data-rb-event-key="pageState"
+          data-rb-event-key="modVariables"
           href="#"
           role="tab"
         >
-          Page State
+          Mod Variables
         </a>
       </div>
     </div>
diff --git a/src/pageEditor/tabs/editTab/dataPanel/dataPanelTypes.ts b/src/pageEditor/tabs/editTab/dataPanel/dataPanelTypes.ts
index 460eb3cbf8..24c7c33279 100644
--- a/src/pageEditor/tabs/editTab/dataPanel/dataPanelTypes.ts
+++ b/src/pageEditor/tabs/editTab/dataPanel/dataPanelTypes.ts
@@ -18,11 +18,13 @@
 export enum DataPanelTabKey {
   Context = "context",
   ModVariables = "modVariables",
-  State = "state",
-  BrickConfig = "blockConfig",
   Rendered = "rendered",
   Output = "output",
   Preview = "preview",
   Outline = "outline",
   Comments = "comments",
+
+  // Developer-only tabs
+  ModComponentFormState = "modComponentFormState",
+  BrickConfig = "brickConfig",
 }
diff --git a/src/pageEditor/tabs/editTab/dataPanel/tabs/ConfigurationTab.tsx b/src/pageEditor/tabs/editTab/dataPanel/tabs/BrickConfigTab.tsx
similarity index 85%
rename from src/pageEditor/tabs/editTab/dataPanel/tabs/ConfigurationTab.tsx
rename to src/pageEditor/tabs/editTab/dataPanel/tabs/BrickConfigTab.tsx
index abe657ccd6..02aafbfe13 100644
--- a/src/pageEditor/tabs/editTab/dataPanel/tabs/ConfigurationTab.tsx
+++ b/src/pageEditor/tabs/editTab/dataPanel/tabs/BrickConfigTab.tsx
@@ -22,7 +22,11 @@ import { DataPanelTabKey } from "@/pageEditor/tabs/editTab/dataPanel/dataPanelTy
 import DataTab from "@/pageEditor/tabs/editTab/dataPanel/DataTab";
 import DataTabJsonTree from "@/pageEditor/tabs/editTab/dataPanel/DataTabJsonTree";
 
-const ConfigurationTab: React.FC<{ config: unknown }> = ({ config }) => (
+/**
+ * Developer-only data panel tab for viewing the underlying brick configuration JSON. Used to debug brick configuration
+ * UI issues.
+ */
+const BrickConfigTab: React.FC<{ config: unknown }> = ({ config }) => (
   <DataTab eventKey={DataPanelTabKey.BrickConfig}>
     <div className="text-info">
       <FontAwesomeIcon icon={faInfoCircle} /> This tab is only visible to
@@ -36,4 +40,4 @@ const ConfigurationTab: React.FC<{ config: unknown }> = ({ config }) => (
   </DataTab>
 );
 
-export default ConfigurationTab;
+export default BrickConfigTab;
diff --git a/src/pageEditor/tabs/editTab/dataPanel/tabs/ModComponentFormStateTab.tsx b/src/pageEditor/tabs/editTab/dataPanel/tabs/ModComponentFormStateTab.tsx
index b9fa38b149..55555789df 100644
--- a/src/pageEditor/tabs/editTab/dataPanel/tabs/ModComponentFormStateTab.tsx
+++ b/src/pageEditor/tabs/editTab/dataPanel/tabs/ModComponentFormStateTab.tsx
@@ -39,7 +39,7 @@ const ModComponentFormStateTab: React.FC = () => {
   );
 
   return (
-    <DataTab eventKey={DataPanelTabKey.State}>
+    <DataTab eventKey={DataPanelTabKey.ModComponentFormState}>
       <div className="text-info">
         <FontAwesomeIcon icon={faInfoCircle} /> This tab is only visible to
         developers
@@ -47,8 +47,8 @@ const ModComponentFormStateTab: React.FC = () => {
       <DataTabJsonTree
         data={{ activeElement: activeModComponentFormState, annotations }}
         searchable
-        tabKey={DataPanelTabKey.State}
-        label="Element State"
+        tabKey={DataPanelTabKey.ModComponentFormState}
+        label="Editor State"
       />
     </DataTab>
   );
diff --git a/src/pageEditor/tabs/editTab/dataPanel/tabs/ModVariablesTab.tsx b/src/pageEditor/tabs/editTab/dataPanel/tabs/ModVariablesTab.tsx
index eb101e1748..48825209e8 100644
--- a/src/pageEditor/tabs/editTab/dataPanel/tabs/ModVariablesTab.tsx
+++ b/src/pageEditor/tabs/editTab/dataPanel/tabs/ModVariablesTab.tsx
@@ -46,6 +46,9 @@ type StateValues = {
   Public: UnknownObject | string;
 };
 
+/**
+ * Data panel tab displaying mod variables, and private/public state.
+ */
 const ModVariablesTab: React.VFC = () => {
   const activeModComponentFormState = useSelector(
     selectActiveModComponentFormState,
diff --git a/src/pageEditor/tabs/editTab/dataPanel/tabs/__snapshots__/PageStateTab.test.tsx.snap b/src/pageEditor/tabs/editTab/dataPanel/tabs/__snapshots__/PageStateTab.test.tsx.snap
deleted file mode 100644
index fa8d823f0c..0000000000
--- a/src/pageEditor/tabs/editTab/dataPanel/tabs/__snapshots__/PageStateTab.test.tsx.snap
+++ /dev/null
@@ -1,521 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PageStateTab it renders with mod's mod component 1`] = `
-<DocumentFragment>
-  <div
-    aria-hidden="false"
-    class="fade tabPane tab-pane active show"
-    role="tabpanel"
-  >
-    <div
-      class="mb-1 d-flex"
-    >
-      <div>
-        <button
-          class="btn btn-info btn-sm"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="svg-inline--fa fa-sync fa-w-16 "
-            data-icon="sync"
-            data-prefix="fas"
-            focusable="false"
-            role="img"
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z"
-              fill="currentColor"
-            />
-          </svg>
-           Refresh
-        </button>
-      </div>
-      <div
-        class="ml-2"
-      >
-        <a
-          href="https://docs.pixiebrix.com/developing-mods/developer-concepts/data-context/using-page-state-advanced"
-          rel="noreferrer"
-          target="_blank"
-        >
-          <small>
-            <svg
-              aria-hidden="true"
-              class="svg-inline--fa fa-external-link-alt fa-w-16 "
-              data-icon="external-link-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
-                fill="currentColor"
-              />
-            </svg>
-             Learn more about Page State
-          </small>
-        </a>
-      </div>
-    </div>
-    <div
-      class="root"
-    >
-      <ul
-        style="border: 0px; padding: 0px; margin: 0.5em 0px 0.5em 0.125em; list-style: none; background-color: rgb(255, 255, 255);"
-      >
-        <li
-          style="padding: 0px; margin: 0px;"
-        >
-          <ul
-            style="padding: 0px; margin: 0px; list-style: none;"
-          >
-            <li
-              style="position: relative; padding-top: 0.25em; margin-left: 0px; padding-left: 0px;"
-            >
-              <div
-                style="display: inline-block; padding-right: 0.5em; padding-left: 0px; cursor: pointer;"
-              >
-                <div
-                  style="margin-left: 0px; transition: 150ms; transform: rotateZ(90deg); transform-origin: 45% 50%; position: relative; line-height: 1.1em; font-size: 0.75em; color: rgb(57, 113, 237);"
-                >
-                  ▶
-                </div>
-              </div>
-              <label
-                style="display: inline-block; color: rgb(57, 113, 237); margin: 0px; padding: 0px; cursor: pointer;"
-              >
-                <span>
-                  Private:
-                </span>
-              </label>
-              <span
-                style="padding-left: 0.5em; cursor: default; color: rgb(0, 113, 36);"
-              >
-                <span>
-                  <span
-                    style="margin-left: 0.3em; margin-right: 0.3em;"
-                  >
-                    {}
-                  </span>
-                   2 keys
-                </span>
-              </span>
-              <ul
-                style="padding: 0px; margin: 0px; list-style: none; display: block;"
-              >
-                <li
-                  style="padding-top: 0.25em; padding-right: 0px; margin-left: 0.875em; word-wrap: break-word; padding-left: 2.125em; text-indent: -0.5em; word-break: break-all; white-space: pre-wrap;"
-                >
-                  <label
-                    style="display: inline-block; color: rgb(57, 113, 237); margin: 0px 0.5em 0px 0px;"
-                  >
-                    <span>
-                      foo:
-                    </span>
-                  </label>
-                  <span
-                    style="color: rgb(0, 113, 36);"
-                  >
-                    "bar"
-                  </span>
-                </li>
-                <li
-                  style="padding-top: 0.25em; padding-right: 0px; margin-left: 0.875em; word-wrap: break-word; padding-left: 2.125em; text-indent: -0.5em; word-break: break-all; white-space: pre-wrap;"
-                >
-                  <label
-                    style="display: inline-block; color: rgb(57, 113, 237); margin: 0px 0.5em 0px 0px;"
-                  >
-                    <span>
-                      baz:
-                    </span>
-                  </label>
-                  <span
-                    style="color: rgb(249, 106, 56);"
-                  >
-                    32
-                  </span>
-                </li>
-              </ul>
-            </li>
-            <li
-              style="position: relative; padding-top: 0.25em; margin-left: 0px; padding-left: 0px;"
-            >
-              <div
-                style="display: inline-block; padding-right: 0.5em; padding-left: 0px; cursor: pointer;"
-              >
-                <div
-                  style="margin-left: 0px; transition: 150ms; transform: rotateZ(90deg); transform-origin: 45% 50%; position: relative; line-height: 1.1em; font-size: 0.75em; color: rgb(57, 113, 237);"
-                >
-                  ▶
-                </div>
-              </div>
-              <label
-                style="display: inline-block; color: rgb(57, 113, 237); margin: 0px; padding: 0px; cursor: pointer;"
-              >
-                <span>
-                  Mod:
-                </span>
-              </label>
-              <span
-                style="padding-left: 0.5em; cursor: default; color: rgb(0, 113, 36);"
-              >
-                <span>
-                  <span
-                    style="margin-left: 0.3em; margin-right: 0.3em;"
-                  >
-                    {}
-                  </span>
-                   2 keys
-                </span>
-              </span>
-              <ul
-                style="padding: 0px; margin: 0px; list-style: none; display: block;"
-              >
-                <li
-                  style="padding-top: 0.25em; padding-right: 0px; margin-left: 0.875em; word-wrap: break-word; padding-left: 2.125em; text-indent: -0.5em; word-break: break-all; white-space: pre-wrap;"
-                >
-                  <label
-                    style="display: inline-block; color: rgb(57, 113, 237); margin: 0px 0.5em 0px 0px;"
-                  >
-                    <span>
-                      foo:
-                    </span>
-                  </label>
-                  <span
-                    style="color: rgb(0, 113, 36);"
-                  >
-                    "bar"
-                  </span>
-                </li>
-                <li
-                  style="padding-top: 0.25em; padding-right: 0px; margin-left: 0.875em; word-wrap: break-word; padding-left: 2.125em; text-indent: -0.5em; word-break: break-all; white-space: pre-wrap;"
-                >
-                  <label
-                    style="display: inline-block; color: rgb(57, 113, 237); margin: 0px 0.5em 0px 0px;"
-                  >
-                    <span>
-                      baz:
-                    </span>
-                  </label>
-                  <span
-                    style="color: rgb(249, 106, 56);"
-                  >
-                    32
-                  </span>
-                </li>
-              </ul>
-            </li>
-            <li
-              style="position: relative; padding-top: 0.25em; margin-left: 0px; padding-left: 0px;"
-            >
-              <div
-                style="display: inline-block; padding-right: 0.5em; padding-left: 0px; cursor: pointer;"
-              >
-                <div
-                  style="margin-left: 0px; transition: 150ms; transform: rotateZ(90deg); transform-origin: 45% 50%; position: relative; line-height: 1.1em; font-size: 0.75em; color: rgb(57, 113, 237);"
-                >
-                  ▶
-                </div>
-              </div>
-              <label
-                style="display: inline-block; color: rgb(57, 113, 237); margin: 0px; padding: 0px; cursor: pointer;"
-              >
-                <span>
-                  Public:
-                </span>
-              </label>
-              <span
-                style="padding-left: 0.5em; cursor: default; color: rgb(0, 113, 36);"
-              >
-                <span>
-                  <span
-                    style="margin-left: 0.3em; margin-right: 0.3em;"
-                  >
-                    {}
-                  </span>
-                   2 keys
-                </span>
-              </span>
-              <ul
-                style="padding: 0px; margin: 0px; list-style: none; display: block;"
-              >
-                <li
-                  style="padding-top: 0.25em; padding-right: 0px; margin-left: 0.875em; word-wrap: break-word; padding-left: 2.125em; text-indent: -0.5em; word-break: break-all; white-space: pre-wrap;"
-                >
-                  <label
-                    style="display: inline-block; color: rgb(57, 113, 237); margin: 0px 0.5em 0px 0px;"
-                  >
-                    <span>
-                      foo:
-                    </span>
-                  </label>
-                  <span
-                    style="color: rgb(0, 113, 36);"
-                  >
-                    "bar"
-                  </span>
-                </li>
-                <li
-                  style="padding-top: 0.25em; padding-right: 0px; margin-left: 0.875em; word-wrap: break-word; padding-left: 2.125em; text-indent: -0.5em; word-break: break-all; white-space: pre-wrap;"
-                >
-                  <label
-                    style="display: inline-block; color: rgb(57, 113, 237); margin: 0px 0.5em 0px 0px;"
-                  >
-                    <span>
-                      baz:
-                    </span>
-                  </label>
-                  <span
-                    style="color: rgb(249, 106, 56);"
-                  >
-                    32
-                  </span>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`PageStateTab it renders with standalone mod component 1`] = `
-<DocumentFragment>
-  <div
-    aria-hidden="false"
-    class="fade tabPane tab-pane active show"
-    role="tabpanel"
-  >
-    <div
-      class="mb-1 d-flex"
-    >
-      <div>
-        <button
-          class="btn btn-info btn-sm"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="svg-inline--fa fa-sync fa-w-16 "
-            data-icon="sync"
-            data-prefix="fas"
-            focusable="false"
-            role="img"
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z"
-              fill="currentColor"
-            />
-          </svg>
-           Refresh
-        </button>
-      </div>
-      <div
-        class="ml-2"
-      >
-        <a
-          href="https://docs.pixiebrix.com/developing-mods/developer-concepts/data-context/using-page-state-advanced"
-          rel="noreferrer"
-          target="_blank"
-        >
-          <small>
-            <svg
-              aria-hidden="true"
-              class="svg-inline--fa fa-external-link-alt fa-w-16 "
-              data-icon="external-link-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
-                fill="currentColor"
-              />
-            </svg>
-             Learn more about Page State
-          </small>
-        </a>
-      </div>
-    </div>
-    <div
-      class="root"
-    >
-      <ul
-        style="border: 0px; padding: 0px; margin: 0.5em 0px 0.5em 0.125em; list-style: none; background-color: rgb(255, 255, 255);"
-      >
-        <li
-          style="padding: 0px; margin: 0px;"
-        >
-          <ul
-            style="padding: 0px; margin: 0px; list-style: none;"
-          >
-            <li
-              style="position: relative; padding-top: 0.25em; margin-left: 0px; padding-left: 0px;"
-            >
-              <div
-                style="display: inline-block; padding-right: 0.5em; padding-left: 0px; cursor: pointer;"
-              >
-                <div
-                  style="margin-left: 0px; transition: 150ms; transform: rotateZ(90deg); transform-origin: 45% 50%; position: relative; line-height: 1.1em; font-size: 0.75em; color: rgb(57, 113, 237);"
-                >
-                  ▶
-                </div>
-              </div>
-              <label
-                style="display: inline-block; color: rgb(57, 113, 237); margin: 0px; padding: 0px; cursor: pointer;"
-              >
-                <span>
-                  Private:
-                </span>
-              </label>
-              <span
-                style="padding-left: 0.5em; cursor: default; color: rgb(0, 113, 36);"
-              >
-                <span>
-                  <span
-                    style="margin-left: 0.3em; margin-right: 0.3em;"
-                  >
-                    {}
-                  </span>
-                   2 keys
-                </span>
-              </span>
-              <ul
-                style="padding: 0px; margin: 0px; list-style: none; display: block;"
-              >
-                <li
-                  style="padding-top: 0.25em; padding-right: 0px; margin-left: 0.875em; word-wrap: break-word; padding-left: 2.125em; text-indent: -0.5em; word-break: break-all; white-space: pre-wrap;"
-                >
-                  <label
-                    style="display: inline-block; color: rgb(57, 113, 237); margin: 0px 0.5em 0px 0px;"
-                  >
-                    <span>
-                      foo:
-                    </span>
-                  </label>
-                  <span
-                    style="color: rgb(0, 113, 36);"
-                  >
-                    "bar"
-                  </span>
-                </li>
-                <li
-                  style="padding-top: 0.25em; padding-right: 0px; margin-left: 0.875em; word-wrap: break-word; padding-left: 2.125em; text-indent: -0.5em; word-break: break-all; white-space: pre-wrap;"
-                >
-                  <label
-                    style="display: inline-block; color: rgb(57, 113, 237); margin: 0px 0.5em 0px 0px;"
-                  >
-                    <span>
-                      baz:
-                    </span>
-                  </label>
-                  <span
-                    style="color: rgb(249, 106, 56);"
-                  >
-                    32
-                  </span>
-                </li>
-              </ul>
-            </li>
-            <li
-              style="padding-top: 0.25em; padding-right: 0px; margin-left: 0.875em; word-wrap: break-word; padding-left: 1.25em; text-indent: -0.5em; word-break: break-all; white-space: pre-wrap;"
-            >
-              <label
-                style="display: inline-block; color: rgb(57, 113, 237); margin: 0px 0.5em 0px 0px;"
-              >
-                <span>
-                  Mod:
-                </span>
-              </label>
-              <span
-                style="color: rgb(0, 113, 36);"
-              >
-                "Starter Brick is not in a mod"
-              </span>
-            </li>
-            <li
-              style="position: relative; padding-top: 0.25em; margin-left: 0px; padding-left: 0px;"
-            >
-              <div
-                style="display: inline-block; padding-right: 0.5em; padding-left: 0px; cursor: pointer;"
-              >
-                <div
-                  style="margin-left: 0px; transition: 150ms; transform: rotateZ(90deg); transform-origin: 45% 50%; position: relative; line-height: 1.1em; font-size: 0.75em; color: rgb(57, 113, 237);"
-                >
-                  ▶
-                </div>
-              </div>
-              <label
-                style="display: inline-block; color: rgb(57, 113, 237); margin: 0px; padding: 0px; cursor: pointer;"
-              >
-                <span>
-                  Public:
-                </span>
-              </label>
-              <span
-                style="padding-left: 0.5em; cursor: default; color: rgb(0, 113, 36);"
-              >
-                <span>
-                  <span
-                    style="margin-left: 0.3em; margin-right: 0.3em;"
-                  >
-                    {}
-                  </span>
-                   2 keys
-                </span>
-              </span>
-              <ul
-                style="padding: 0px; margin: 0px; list-style: none; display: block;"
-              >
-                <li
-                  style="padding-top: 0.25em; padding-right: 0px; margin-left: 0.875em; word-wrap: break-word; padding-left: 2.125em; text-indent: -0.5em; word-break: break-all; white-space: pre-wrap;"
-                >
-                  <label
-                    style="display: inline-block; color: rgb(57, 113, 237); margin: 0px 0.5em 0px 0px;"
-                  >
-                    <span>
-                      foo:
-                    </span>
-                  </label>
-                  <span
-                    style="color: rgb(0, 113, 36);"
-                  >
-                    "bar"
-                  </span>
-                </li>
-                <li
-                  style="padding-top: 0.25em; padding-right: 0px; margin-left: 0.875em; word-wrap: break-word; padding-left: 2.125em; text-indent: -0.5em; word-break: break-all; white-space: pre-wrap;"
-                >
-                  <label
-                    style="display: inline-block; color: rgb(57, 113, 237); margin: 0px 0.5em 0px 0px;"
-                  >
-                    <span>
-                      baz:
-                    </span>
-                  </label>
-                  <span
-                    style="color: rgb(249, 106, 56);"
-                  >
-                    32
-                  </span>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </div>
-  </div>
-</DocumentFragment>
-`;
diff --git a/src/tsconfig.strictNullChecks.json b/src/tsconfig.strictNullChecks.json
index cdff66a424..081e3f70f5 100644
--- a/src/tsconfig.strictNullChecks.json
+++ b/src/tsconfig.strictNullChecks.json
@@ -1172,7 +1172,7 @@
     "./pageEditor/tabs/editTab/dataPanel/DataTabJsonTree.tsx",
     "./pageEditor/tabs/editTab/dataPanel/ErrorDisplay.tsx",
     "./pageEditor/tabs/editTab/dataPanel/dataPanelTypes.ts",
-    "./pageEditor/tabs/editTab/dataPanel/tabs/ConfigurationTab.tsx",
+    "./pageEditor/tabs/editTab/dataPanel/tabs/BrickConfigTab.tsx",
     "./pageEditor/tabs/editTab/dataPanel/tabs/ModVariablesTab.tsx",
     "./pageEditor/tabs/editTab/dataPanel/tabs/ModComponentFormStateTab.tsx",
     "./pageEditor/tabs/editTab/dataPanel/useDataPanelActiveTabKey.ts",