diff --git a/end-to-end-tests/tests/pageEditor/moveCopyModComponent.spec.ts b/end-to-end-tests/tests/pageEditor/moveOrCopyModComponent.spec.ts
similarity index 100%
rename from end-to-end-tests/tests/pageEditor/moveCopyModComponent.spec.ts
rename to end-to-end-tests/tests/pageEditor/moveOrCopyModComponent.spec.ts
diff --git a/src/analysis/analysisVisitors/varAnalysis/varAnalysis.ts b/src/analysis/analysisVisitors/varAnalysis/varAnalysis.ts
index c3fc6db9ed..69870549ef 100644
--- a/src/analysis/analysisVisitors/varAnalysis/varAnalysis.ts
+++ b/src/analysis/analysisVisitors/varAnalysis/varAnalysis.ts
@@ -57,6 +57,7 @@ import { getOutputReference, isOutputKey } from "@/runtime/runtimeTypes";
 import { assertNotNullish } from "@/utils/nullishUtils";
 import { BusinessError } from "@/errors/businessErrors";
 import { adapterForComponent } from "@/pageEditor/starterBricks/adapter";
+import { isInnerDefinitionRegistryId } from "@/types/helpers";
 
 export const INVALID_VARIABLE_GENERIC_MESSAGE = "Invalid variable name";
 
@@ -305,11 +306,13 @@ async function setOptionsVars(
   formState: ModComponentFormState,
   contextVars: VarMap,
 ): Promise<void> {
-  if (formState.modMetadata == null) {
+  const modId = formState.modMetadata.id;
+
+  // Mod is unsaved, so definition won't be in the registry
+  if (isInnerDefinitionRegistryId(modId)) {
     return;
   }
 
-  const modId = formState.modMetadata.id;
   const mod = await modRegistry.lookup(modId);
   const optionsSchema = mod?.options?.schema;
   if (isEmpty(optionsSchema)) {
diff --git a/src/components/fields/schemaFields/integrations/integrationDependencyFieldUtils.test.ts b/src/components/fields/schemaFields/integrations/integrationDependencyFieldUtils.test.ts
index 19934fb331..fcc3efa7ad 100644
--- a/src/components/fields/schemaFields/integrations/integrationDependencyFieldUtils.test.ts
+++ b/src/components/fields/schemaFields/integrations/integrationDependencyFieldUtils.test.ts
@@ -31,7 +31,10 @@ import { validateOutputKey } from "@/runtime/runtimeTypes";
 import { toExpression } from "@/utils/expressionUtils";
 import { normalizeAvailability } from "@/bricks/available";
 import { StarterBrickTypes } from "@/types/starterBrickTypes";
-import { emptyModVariablesDefinitionFactory } from "@/utils/modUtils";
+import {
+  createNewUnsavedModMetadata,
+  emptyModVariablesDefinitionFactory,
+} from "@/utils/modUtils";
 
 describe("selectVariables", () => {
   test("selects nothing when no services used", () => {
@@ -224,7 +227,7 @@ describe("selectVariables", () => {
       permissions: emptyPermissionsFactory(),
       optionsArgs: {},
       variablesDefinition: emptyModVariablesDefinitionFactory(),
-      modMetadata: undefined,
+      modMetadata: createNewUnsavedModMetadata({ modName: "Document Mod" }),
       modComponent: {
         brickPipeline: [
           {
diff --git a/src/pageEditor/hooks/useAddNewModComponent.ts b/src/pageEditor/hooks/useAddNewModComponent.ts
index 29cb604fa1..3795c91240 100644
--- a/src/pageEditor/hooks/useAddNewModComponent.ts
+++ b/src/pageEditor/hooks/useAddNewModComponent.ts
@@ -89,19 +89,20 @@ function useAddNewModComponent(modMetadata?: ModMetadata): AddNewModComponent {
         setInsertingStarterBrickType(null);
       }
 
-      const url = await getCurrentInspectedURL();
-      const metadata = internalStarterBrickMetaFactory();
-      const initialFormState = fromNativeElement(url, metadata, element);
+      const initialFormState = fromNativeElement({
+        url: await getCurrentInspectedURL(),
+        starterBrickMetadata: internalStarterBrickMetaFactory(),
+        modMetadata:
+          modMetadata ??
+          createNewUnsavedModMetadata({
+            modName: generateFreshModName(),
+          }),
+        element,
+      });
 
       initialFormState.modComponent.brickPipeline =
         getExampleBrickPipeline(starterBrickType);
 
-      initialFormState.modMetadata =
-        modMetadata ??
-        createNewUnsavedModMetadata({
-          modName: generateFreshModName(),
-        });
-
       return initialFormState as ModComponentFormState;
     },
     [
diff --git a/src/pageEditor/hooks/useClearModChanges.ts b/src/pageEditor/hooks/useClearModChanges.ts
index 80e1f712b9..8decb667aa 100644
--- a/src/pageEditor/hooks/useClearModChanges.ts
+++ b/src/pageEditor/hooks/useClearModChanges.ts
@@ -47,7 +47,7 @@ function useClearModChanges(): (modId: RegistryId) => Promise<void> {
 
       await Promise.all(
         modComponentFormStates
-          .filter((x) => x.modMetadata?.id === modId)
+          .filter((x) => x.modMetadata.id === modId)
           .map(async (modComponentFormState) =>
             clearModComponentChanges({
               modComponentId: modComponentFormState.uuid,
diff --git a/src/pageEditor/hooks/useMigrateStandaloneComponentsToMods.test.ts b/src/pageEditor/hooks/useMigrateStandaloneComponentsToMods.test.ts
deleted file mode 100644
index 9bd6afded4..0000000000
--- a/src/pageEditor/hooks/useMigrateStandaloneComponentsToMods.test.ts
+++ /dev/null
@@ -1,277 +0,0 @@
-/*
- * Copyright (C) 2024 PixieBrix, Inc.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { renderHook } from "@/pageEditor/testHelpers";
-import useMigrateStandaloneComponentsToMods from "@/pageEditor/hooks/useMigrateStandaloneComponentsToMods";
-import { actions as modComponentActions } from "@/store/modComponents/modComponentSlice";
-import {
-  activatedModComponentFactory,
-  modMetadataFactory,
-} from "@/testUtils/factories/modComponentFactories";
-import { actions as editorActions } from "@/pageEditor/store/editor/editorSlice";
-import { formStateFactory } from "@/testUtils/factories/pageEditorFactories";
-import { autoUUIDSequence } from "@/testUtils/factories/stringFactories";
-
-describe("useMigrateStandaloneComponentsToMods", () => {
-  test("given empty form states and components, does nothing", () => {
-    const { getReduxStore } = renderHook(
-      () => {
-        useMigrateStandaloneComponentsToMods();
-      },
-      {
-        setupRedux(dispatch, { store }) {
-          jest.spyOn(store, "dispatch");
-        },
-      },
-    );
-
-    const { dispatch } = getReduxStore();
-
-    expect(dispatch).not.toHaveBeenCalled();
-  });
-
-  test("given only activated components, does nothing", () => {
-    const { getReduxStore } = renderHook(
-      () => {
-        useMigrateStandaloneComponentsToMods();
-      },
-      {
-        setupRedux(dispatch, { store }) {
-          jest.spyOn(store, "dispatch");
-          dispatch(
-            modComponentActions.UNSAFE_setModComponents([
-              activatedModComponentFactory(),
-              activatedModComponentFactory(),
-              activatedModComponentFactory(),
-            ]),
-          );
-        },
-      },
-    );
-
-    const { dispatch } = getReduxStore();
-
-    expect(dispatch).not.toHaveBeenCalled();
-  });
-
-  test("given unsaved form state, does not migrate", () => {
-    const { getReduxStore } = renderHook(
-      () => {
-        useMigrateStandaloneComponentsToMods();
-      },
-      {
-        setupRedux(dispatch, { store }) {
-          jest.spyOn(store, "dispatch");
-          dispatch(editorActions.addModComponentFormState(formStateFactory()));
-        },
-      },
-    );
-
-    const { dispatch } = getReduxStore();
-
-    expect(dispatch).not.toHaveBeenCalled();
-  });
-
-  test("given activated component with no mod metadata and a form state, logs a warning and does nothing", () => {
-    const standaloneComponent = activatedModComponentFactory();
-    delete standaloneComponent._recipe;
-
-    const consoleWarnSpy = jest.spyOn(console, "warn");
-
-    const { getReduxStore } = renderHook(
-      () => {
-        useMigrateStandaloneComponentsToMods();
-      },
-      {
-        setupRedux(dispatch, { store }) {
-          jest.spyOn(store, "dispatch");
-          dispatch(
-            modComponentActions.UNSAFE_setModComponents([standaloneComponent]),
-          );
-          dispatch(
-            editorActions.addModComponentFormState(
-              formStateFactory({
-                formStateConfig: { uuid: standaloneComponent.id },
-              }),
-            ),
-          );
-        },
-      },
-    );
-
-    expect(consoleWarnSpy).toHaveBeenCalledTimes(1);
-    expect(consoleWarnSpy).toHaveBeenCalledWith(
-      "Found activated mod component without mod metadata",
-      standaloneComponent,
-    );
-
-    const { dispatch } = getReduxStore();
-
-    expect(dispatch).not.toHaveBeenCalled();
-  });
-
-  test("given activated component with mod metadata, syncs the form state", () => {
-    const modMetadata = modMetadataFactory();
-    const standaloneComponent = activatedModComponentFactory({
-      _recipe: modMetadata,
-    });
-    const formState = formStateFactory({
-      formStateConfig: { uuid: standaloneComponent.id },
-    });
-
-    const { getReduxStore } = renderHook(
-      () => {
-        useMigrateStandaloneComponentsToMods();
-      },
-      {
-        setupRedux(dispatch, { store }) {
-          jest.spyOn(store, "dispatch");
-          dispatch(
-            modComponentActions.UNSAFE_setModComponents([standaloneComponent]),
-          );
-          dispatch(editorActions.addModComponentFormState(formState));
-        },
-      },
-    );
-
-    const { dispatch } = getReduxStore();
-
-    expect(dispatch).toHaveBeenCalledTimes(1);
-    expect(dispatch).toHaveBeenCalledWith(
-      editorActions.syncModComponentFormState({
-        ...formState,
-        modMetadata,
-      }),
-    );
-  });
-
-  test("given various components and form states, migrates standalone form states correctly", async () => {
-    // Mod 1 has components with _recipe but form states have not been migrated
-    const modMetadata1 = modMetadataFactory();
-    // Need to extract the id generation out of factories to prevent overlaps between components and form states
-    const componentId1a = autoUUIDSequence();
-    const modComponent1a = activatedModComponentFactory({
-      id: componentId1a,
-      _recipe: modMetadata1,
-    });
-    const componentId1b = autoUUIDSequence();
-    const modComponent1b = activatedModComponentFactory({
-      id: componentId1b,
-      _recipe: modMetadata1,
-    });
-    const formState1b = formStateFactory({
-      formStateConfig: { uuid: componentId1b },
-    });
-    const componentId1c = autoUUIDSequence();
-    const modComponent1c = activatedModComponentFactory({
-      id: componentId1c,
-      _recipe: modMetadata1,
-    });
-    const formState1c = formStateFactory({
-      formStateConfig: { uuid: componentId1c },
-    });
-
-    const standaloneComponentId = autoUUIDSequence();
-    const standaloneComponent = activatedModComponentFactory({
-      id: standaloneComponentId,
-    });
-    delete standaloneComponent._recipe;
-
-    // Mod 2 has no form states
-    const modMetadata2 = modMetadataFactory();
-    const componentId2 = autoUUIDSequence();
-    const modComponent2 = activatedModComponentFactory({
-      id: componentId2,
-      _recipe: modMetadata2,
-    });
-
-    // Mod 3 has two components with form states created with the mod metadata already
-    const modMetadata3 = modMetadataFactory();
-    const componentId3a = autoUUIDSequence();
-    const modComponent3a = activatedModComponentFactory({
-      id: componentId3a,
-      _recipe: modMetadata3,
-    });
-    const formState3a = formStateFactory({
-      formStateConfig: {
-        uuid: componentId3a,
-        modMetadata: modMetadata3,
-      },
-    });
-    const componentId3b = autoUUIDSequence();
-    const modComponent3b = activatedModComponentFactory({
-      id: componentId3b,
-      _recipe: modMetadata3,
-    });
-    const formState3b = formStateFactory({
-      formStateConfig: {
-        uuid: componentId3b,
-        modMetadata: modMetadata3,
-      },
-    });
-
-    // Form state 4 is a newly created form state with no mod component or mod
-    const componentId4 = autoUUIDSequence();
-    const formState4 = formStateFactory({
-      formStateConfig: { uuid: componentId4 },
-    });
-
-    const { getReduxStore } = renderHook(
-      () => {
-        useMigrateStandaloneComponentsToMods();
-      },
-      {
-        setupRedux(dispatch, { store }) {
-          jest.spyOn(store, "dispatch");
-          dispatch(
-            modComponentActions.UNSAFE_setModComponents([
-              modComponent1a,
-              modComponent1b,
-              modComponent1c,
-              standaloneComponent,
-              modComponent2,
-              modComponent3a,
-              modComponent3b,
-            ]),
-          );
-          dispatch(editorActions.addModComponentFormState(formState1b));
-          dispatch(editorActions.addModComponentFormState(formState1c));
-          dispatch(editorActions.addModComponentFormState(formState3a));
-          dispatch(editorActions.addModComponentFormState(formState3b));
-          dispatch(editorActions.addModComponentFormState(formState4));
-        },
-      },
-    );
-
-    const { dispatch } = getReduxStore();
-
-    // Only Mod 1's form states should be migrated
-    expect(dispatch).toHaveBeenCalledTimes(2);
-    expect(dispatch).toHaveBeenCalledWith(
-      editorActions.syncModComponentFormState({
-        ...formState1b,
-        modMetadata: modMetadata1,
-      }),
-    );
-    expect(dispatch).toHaveBeenCalledWith(
-      editorActions.syncModComponentFormState({
-        ...formState1c,
-        modMetadata: modMetadata1,
-      }),
-    );
-  });
-});
diff --git a/src/pageEditor/hooks/useMigrateStandaloneComponentsToMods.ts b/src/pageEditor/hooks/useMigrateStandaloneComponentsToMods.ts
deleted file mode 100644
index d712e9d301..0000000000
--- a/src/pageEditor/hooks/useMigrateStandaloneComponentsToMods.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
- * Copyright (C) 2024 PixieBrix, Inc.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { useDispatch, useSelector } from "react-redux";
-import { selectModComponentFormStates } from "@/pageEditor/store/editor/editorSelectors";
-import { selectActivatedModComponents } from "@/store/modComponents/modComponentSelectors";
-import { useEffect } from "react";
-import { actions } from "@/pageEditor/store/editor/editorSlice";
-
-/**
- * Note: This must be run underneath the PersistGate component in the React component tree
- */
-export default function useMigrateStandaloneComponentsToMods() {
-  const dispatch = useDispatch();
-  const formStates = useSelector(selectModComponentFormStates);
-  const activatedModComponents = useSelector(selectActivatedModComponents);
-
-  useEffect(() => {
-    const standaloneComponentFormStates = formStates.filter(
-      (formState) => formState.modMetadata == null,
-    );
-
-    for (const formState of standaloneComponentFormStates) {
-      const activatedModComponent = activatedModComponents.find(
-        ({ id }) => id === formState.uuid,
-      );
-
-      if (activatedModComponent == null) {
-        // We shouldn't touch "unsaved" form states that do not have a corresponding activated mod component
-        return;
-      }
-
-      if (activatedModComponent._recipe == null) {
-        console.warn(
-          "Found activated mod component without mod metadata",
-          activatedModComponent,
-        );
-      } else {
-        dispatch(
-          // Spread the previous form state here, original is not mutable, so we can't set the modMetadata directly
-          actions.syncModComponentFormState({
-            ...formState,
-            modMetadata: activatedModComponent._recipe,
-          }),
-        );
-      }
-    }
-    // eslint-disable-next-line -- Only need to run this migration once
-  }, []);
-}
diff --git a/src/pageEditor/hooks/useRemoveModComponentFromStorage.tsx b/src/pageEditor/hooks/useRemoveModComponentFromStorage.tsx
index 375c5c4d8b..27f4dd2a53 100644
--- a/src/pageEditor/hooks/useRemoveModComponentFromStorage.tsx
+++ b/src/pageEditor/hooks/useRemoveModComponentFromStorage.tsx
@@ -44,13 +44,6 @@ export const DELETE_STARTER_BRICK_MODAL_PROPS: ConfirmationModalProps = {
   submitCaption: "Delete",
 };
 
-export const DELETE_STANDALONE_MOD_COMPONENT_MODAL_PROPS: ConfirmationModalProps =
-  {
-    title: "Delete mod?",
-    message: "This action cannot be undone.",
-    submitCaption: "Delete",
-  };
-
 export const DEACTIVATE_MOD_MODAL_PROPS: ConfirmationModalProps = {
   title: "Deactivate Mod?",
   message: (
@@ -69,10 +62,8 @@ export const DEACTIVATE_MOD_MODAL_PROPS: ConfirmationModalProps = {
 /**
  * Returns a callback that removes a mod component from the Page Editor and Mod Component Storage.
  *
- * For mod components packaged inside a mod and standalone mod components not saved on the cloud, this callback will effectively delete the mod component.
- * For saved standalone mods, this callback will simply deactivate the mod and remove it from the Page Editor.
- *
- * In both cases, unsaved changes will be lost.
+ * For mod components packaged inside a mod, this callback will effectively delete the mod component. Any unsaved
+ * changes will be lost.
  */
 export function useRemoveModComponentFromStorage(): (
   useRemoveConfig: Config,
diff --git a/src/pageEditor/layout/EditorLayout.tsx b/src/pageEditor/layout/EditorLayout.tsx
index f60eb30a11..8d2d25fa72 100644
--- a/src/pageEditor/layout/EditorLayout.tsx
+++ b/src/pageEditor/layout/EditorLayout.tsx
@@ -34,7 +34,6 @@ import { selectIsStaleSession } from "@/store/sessionChanges/sessionChangesSelec
 import StaleSessionPane from "@/pageEditor/panes/StaleSessionPane";
 import { actions as editorActions } from "@/pageEditor/store/editor/editorSlice";
 import { usePreviousValue } from "@/hooks/usePreviousValue";
-import useMigrateStandaloneComponentsToMods from "@/pageEditor/hooks/useMigrateStandaloneComponentsToMods";
 import { RestrictedFeatures } from "@/auth/featureFlags";
 
 const EditorLayout: React.FunctionComponent = () => {
@@ -47,15 +46,6 @@ const EditorLayout: React.FunctionComponent = () => {
 
   const url = useCurrentInspectedUrl();
 
-  /**
-   * Migrate form states for activated standalone mod components. We are
-   * running it here because it's the top-most component underneath
-   * the redux-persist PersistGate.
-   *
-   * @since 2.0.8
-   */
-  useMigrateStandaloneComponentsToMods();
-
   const currentPane = useMemo(
     () =>
       isRestricted ? (
diff --git a/src/pageEditor/modListingPanel/ActivatedModComponentListItem.tsx b/src/pageEditor/modListingPanel/ActivatedModComponentListItem.tsx
index 724f49031a..7a778ef05f 100644
--- a/src/pageEditor/modListingPanel/ActivatedModComponentListItem.tsx
+++ b/src/pageEditor/modListingPanel/ActivatedModComponentListItem.tsx
@@ -77,7 +77,7 @@ const ActivatedModComponentListItem: React.FunctionComponent<{
   );
   const isActive = activeModComponentFormState?.uuid === modComponent.id;
   // Get the selected mod id, or the mod id of the selected mod component
-  const modId = activeModId ?? activeModComponentFormState?.modMetadata?.id;
+  const modId = activeModId ?? activeModComponentFormState?.modMetadata.id;
   // Set the alternate background if this item isn't active, but either its mod or another item in its mod is active
   const hasActiveModBackground =
     !isActive && modId && modComponent._recipe?.id === modId;
diff --git a/src/pageEditor/modListingPanel/DraftModComponentListItem.tsx b/src/pageEditor/modListingPanel/DraftModComponentListItem.tsx
index 422e1b4271..3c89c265ba 100644
--- a/src/pageEditor/modListingPanel/DraftModComponentListItem.tsx
+++ b/src/pageEditor/modListingPanel/DraftModComponentListItem.tsx
@@ -16,7 +16,7 @@
  */
 
 import styles from "./Entry.module.scss";
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback } from "react";
 import { actions } from "@/pageEditor/store/editor/editorSlice";
 import { useDispatch, useSelector } from "react-redux";
 import { ListGroup } from "react-bootstrap";
@@ -47,11 +47,8 @@ import ModComponentActionMenu from "@/pageEditor/modListingPanel/ModComponentAct
 import useClearModComponentChanges from "@/pageEditor/hooks/useClearModComponentChanges";
 import {
   useRemoveModComponentFromStorage,
-  DEACTIVATE_MOD_MODAL_PROPS,
-  DELETE_STANDALONE_MOD_COMPONENT_MODAL_PROPS,
   DELETE_STARTER_BRICK_MODAL_PROPS,
 } from "@/pageEditor/hooks/useRemoveModComponentFromStorage";
-import { selectIsModComponentSavedOnCloud } from "@/store/modComponents/modComponentSelectors";
 import { inspectedTab } from "@/pageEditor/context/connection";
 import { StarterBrickTypes } from "@/types/starterBrickTypes";
 
@@ -78,9 +75,9 @@ const DraftModComponentListItem: React.FunctionComponent<
 
   const isActive =
     activeModComponentFormState?.uuid === modComponentFormState.uuid;
-  const modId = modComponentFormState.modMetadata?.id;
-  const isSiblingOfActiveListItem = activeModComponentFormState?.modMetadata?.id
-    ? modId === activeModComponentFormState?.modMetadata?.id
+  const modId = modComponentFormState.modMetadata.id;
+  const isSiblingOfActiveListItem = activeModComponentFormState?.modMetadata.id
+    ? modId === activeModComponentFormState?.modMetadata.id
     : false;
   const isChildOfActiveListItem = modId === activeModId;
   const isRelativeOfActiveListItem =
@@ -88,9 +85,6 @@ const DraftModComponentListItem: React.FunctionComponent<
   const isDirty = useSelector(
     selectModComponentIsDirty(modComponentFormState.uuid),
   );
-  const isSavedOnCloud = useSelector(
-    selectIsModComponentSavedOnCloud(modComponentFormState.uuid),
-  );
   const removeModComponentFromStorage = useRemoveModComponentFromStorage();
   const isButton =
     modComponentFormState.starterBrick.definition.type ===
@@ -109,36 +103,12 @@ const DraftModComponentListItem: React.FunctionComponent<
   const deleteModComponent = async () =>
     removeModComponentFromStorage({
       modComponentId: modComponentFormState.uuid,
-      showConfirmationModal: modId
-        ? DELETE_STARTER_BRICK_MODAL_PROPS
-        : DELETE_STANDALONE_MOD_COMPONENT_MODAL_PROPS,
-    });
-
-  const deactivateModComponent = async () =>
-    removeModComponentFromStorage({
-      modComponentId: modComponentFormState.uuid,
-      showConfirmationModal: DEACTIVATE_MOD_MODAL_PROPS,
+      showConfirmationModal: DELETE_STARTER_BRICK_MODAL_PROPS,
     });
 
-  const onSave = useMemo(() => {
-    if (modComponentFormState.modMetadata == null) {
-      return async () => {
-        dispatch(actions.setActiveModComponentId(modComponentFormState.uuid));
-        dispatch(actions.showCreateModModal({ keepLocalCopy: false }));
-      };
-    }
-
-    // eslint-disable-next-line unicorn/no-useless-undefined -- Code clarity, implicit returns are bad
-    return undefined;
-  }, [dispatch, modComponentFormState.modMetadata, modComponentFormState.uuid]);
-
   const onClearChanges = async () =>
     clearModComponentChanges({ modComponentId: modComponentFormState.uuid });
 
-  const onDelete = modId || !isSavedOnCloud ? deleteModComponent : undefined;
-
-  const onDeactivate = onDelete ? undefined : deactivateModComponent;
-
   return (
     <ListGroup.Item
       className={cx(styles.root, {
@@ -191,18 +161,16 @@ const DraftModComponentListItem: React.FunctionComponent<
           <NotAvailableIcon />
         </span>
       )}
-      {isDirty &&
-        // Don't show the dirty icon and save button at the same time
-        !onSave && (
-          <span className={cx(styles.icon, styles.unsaved, "text-danger")}>
-            <UnsavedChangesIcon />
-          </span>
-        )}
+      {isDirty && (
+        <span className={cx(styles.icon, styles.unsaved, "text-danger")}>
+          <UnsavedChangesIcon />
+        </span>
+      )}
       <ModComponentActionMenu
         isActive={isActive}
         isDirty={isDirty}
         labelRoot={getLabel(modComponentFormState)}
-        onDeactivate={onDeactivate}
+        onDelete={deleteModComponent}
         onDuplicate={async () => {
           dispatch(
             // Duplicate the mod component in the same mod
@@ -212,27 +180,12 @@ const DraftModComponentListItem: React.FunctionComponent<
         onClearChanges={
           modComponentFormState.installed ? onClearChanges : undefined
         }
-        onMoveToMod={
-          modComponentFormState.modMetadata
-            ? async () => {
-                dispatch(
-                  actions.showMoveCopyToModModal({ moveOrCopy: "move" }),
-                );
-              }
-            : undefined
-        }
-        onCopyToMod={
-          modComponentFormState.modMetadata
-            ? async () => {
-                dispatch(
-                  actions.showMoveCopyToModModal({ moveOrCopy: "copy" }),
-                );
-              }
-            : undefined
-        }
-        // TODO: https://github.com/pixiebrix/pixiebrix-extension/issues/9242, remove standalone mod component actions
-        onSave={onSave}
-        onDelete={onDelete}
+        onMoveToMod={async () => {
+          dispatch(actions.showMoveCopyToModModal({ moveOrCopy: "move" }));
+        }}
+        onCopyToMod={async () => {
+          dispatch(actions.showMoveCopyToModModal({ moveOrCopy: "copy" }));
+        }}
       />
     </ListGroup.Item>
   );
diff --git a/src/pageEditor/modListingPanel/ModComponentActionMenu.tsx b/src/pageEditor/modListingPanel/ModComponentActionMenu.tsx
index ad370a483a..4b79ae3443 100644
--- a/src/pageEditor/modListingPanel/ModComponentActionMenu.tsx
+++ b/src/pageEditor/modListingPanel/ModComponentActionMenu.tsx
@@ -20,7 +20,6 @@ import {
   faClone,
   faFileExport,
   faHistory,
-  faTimes,
   faTrash,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -28,7 +27,6 @@ import styles from "./ActionMenu.module.scss";
 import EllipsisMenu, {
   type EllipsisMenuItem,
 } from "@/components/ellipsisMenu/EllipsisMenu";
-import SaveButton from "@/pageEditor/modListingPanel/SaveButton";
 
 type OptionalAction = (() => Promise<void>) | undefined;
 
@@ -36,28 +34,22 @@ type ActionMenuProps = {
   labelRoot: string;
   isDirty: boolean;
   isActive: boolean;
-  onDelete: OptionalAction;
-  onDuplicate: OptionalAction;
+  onDelete: () => Promise<void>;
+  onDuplicate: () => Promise<void>;
   onClearChanges: OptionalAction;
-  onMoveToMod: OptionalAction;
-  onCopyToMod: OptionalAction;
-  // TODO: https://github.com/pixiebrix/pixiebrix-extension/issues/9242, remove standalone mod component actions
-  onSave: OptionalAction;
-  onDeactivate: OptionalAction;
+  onMoveToMod: () => Promise<void>;
+  onCopyToMod: () => Promise<void>;
 };
 
 const ModComponentActionMenu: React.FC<ActionMenuProps> = ({
   isActive,
   labelRoot,
   isDirty,
-  onDelete = null,
-  onDuplicate = null,
+  onDelete,
+  onDuplicate,
   onClearChanges = null,
-  onMoveToMod = null,
-  onCopyToMod = null,
-  // Standalone Mod Component Actions
-  onSave = null,
-  onDeactivate = null,
+  onMoveToMod,
+  onCopyToMod,
 }) => {
   const menuItems: EllipsisMenuItem[] = [
     {
@@ -72,7 +64,6 @@ const ModComponentActionMenu: React.FC<ActionMenuProps> = ({
       title: "Duplicate",
       icon: <FontAwesomeIcon icon={faClone} fixedWidth />,
       action: onDuplicate,
-      hide: !onDuplicate,
     },
     {
       title: "Move to mod",
@@ -84,7 +75,6 @@ const ModComponentActionMenu: React.FC<ActionMenuProps> = ({
         />
       ),
       action: onMoveToMod,
-      hide: !onMoveToMod,
     },
     {
       title: "Copy to mod",
@@ -96,31 +86,16 @@ const ModComponentActionMenu: React.FC<ActionMenuProps> = ({
         />
       ),
       action: onCopyToMod,
-      hide: !onCopyToMod,
     },
     {
       title: "Delete",
       icon: <FontAwesomeIcon icon={faTrash} fixedWidth />,
       action: onDelete,
-      hide: !onDelete,
-    },
-    {
-      title: "Deactivate",
-      icon: <FontAwesomeIcon icon={faTimes} fixedWidth />,
-      action: onDeactivate,
-      hide: !onDeactivate,
     },
   ];
 
   return (
     <div className={styles.root}>
-      {onSave != null && (
-        <SaveButton
-          ariaLabel={labelRoot ? `${labelRoot} - Save` : undefined}
-          onClick={onSave}
-          disabled={!isDirty}
-        />
-      )}
       {isActive && (
         <EllipsisMenu
           portal
diff --git a/src/pageEditor/modListingPanel/ModListItem.tsx b/src/pageEditor/modListingPanel/ModListItem.tsx
index 064f79a0ae..c3fa69d73c 100644
--- a/src/pageEditor/modListingPanel/ModListItem.tsx
+++ b/src/pageEditor/modListingPanel/ModListItem.tsx
@@ -76,7 +76,7 @@ const ModListItem: React.FC<ModListItemProps> = ({
 
   // Set the alternate background if a mod component in this mod is active
   const hasModBackground =
-    activeModComponentFormState?.modMetadata?.id === modId;
+    activeModComponentFormState?.modMetadata.id === modId;
 
   const dirtyName = useSelector(selectDirtyMetadataForModId(modId))?.name;
   const name = dirtyName ?? savedName ?? "Loading...";
diff --git a/src/pageEditor/modListingPanel/__snapshots__/DraftModComponentListItem.test.tsx.snap b/src/pageEditor/modListingPanel/__snapshots__/DraftModComponentListItem.test.tsx.snap
index bbb16e29d2..cdfa444258 100644
--- a/src/pageEditor/modListingPanel/__snapshots__/DraftModComponentListItem.test.tsx.snap
+++ b/src/pageEditor/modListingPanel/__snapshots__/DraftModComponentListItem.test.tsx.snap
@@ -32,30 +32,16 @@ exports[`DraftModComponentListItem renders active element 1`] = `
       >
         Element 1
       </span>
+      <span
+        class="icon unsaved text-danger"
+      >
+        <span
+          class="root"
+        />
+      </span>
       <div
         class="root"
       >
-        <button
-          aria-label="Element 1 - Save"
-          class="button save btn btn-primary"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="svg-inline--fa fa-save fa-w-14 "
-            data-icon="save"
-            data-prefix="fas"
-            focusable="false"
-            role="img"
-            viewBox="0 0 448 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z"
-              fill="currentColor"
-            />
-          </svg>
-        </button>
         <span>
           <button
             aria-expanded="false"
@@ -127,30 +113,7 @@ exports[`DraftModComponentListItem renders not active element 1`] = `
       </span>
       <div
         class="root"
-      >
-        <button
-          aria-label="Element 1 - Save"
-          class="button save btn btn-primary"
-          disabled=""
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="svg-inline--fa fa-save fa-w-14 "
-            data-icon="save"
-            data-prefix="fas"
-            focusable="false"
-            role="img"
-            viewBox="0 0 448 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z"
-              fill="currentColor"
-            />
-          </svg>
-        </button>
-      </div>
+      />
     </div>
     <button
       type="submit"
diff --git a/src/pageEditor/modListingPanel/arrangeSidebarItems.test.ts b/src/pageEditor/modListingPanel/arrangeSidebarItems.test.ts
index 9d6b3d6118..b7ea64d5ec 100644
--- a/src/pageEditor/modListingPanel/arrangeSidebarItems.test.ts
+++ b/src/pageEditor/modListingPanel/arrangeSidebarItems.test.ts
@@ -15,10 +15,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { uuidv4, validateRegistryId } from "@/types/helpers";
 import { type ModComponentBase } from "@/types/modComponentTypes";
 import arrangeSidebarItems from "@/pageEditor/modListingPanel/arrangeSidebarItems";
-import { type ButtonFormState } from "@/pageEditor/starterBricks/formStateTypes";
 import {
   modComponentFactory,
   modMetadataFactory,
@@ -26,91 +24,47 @@ import {
 import { menuItemFormStateFactory } from "@/testUtils/factories/pageEditorFactories";
 
 // Mods
-const ID_FOO = validateRegistryId("test/mod-foo");
 const modMetadataFoo = modMetadataFactory({
-  id: ID_FOO,
   name: "Foo Mod",
 });
 
-const ID_BAR = validateRegistryId("test/mod-bar");
 const modMetadataBar = modMetadataFactory({
-  id: ID_BAR,
   name: "Bar Mod",
 });
 
 // Mod Components
-const ID_FOO_A = uuidv4();
-const cleanModComponentFooA: ModComponentBase = modComponentFactory({
-  id: ID_FOO_A,
+const cleanModComponentFooA = modComponentFactory({
   label: "A",
   _recipe: modMetadataFoo,
 });
 
-const ID_FOO_B = uuidv4();
-const formStateModComponentFooB: ButtonFormState = menuItemFormStateFactory({
-  uuid: ID_FOO_B,
-  label: "B",
+const formStateModComponentFooA = menuItemFormStateFactory({
+  uuid: cleanModComponentFooA.id,
+  label: "A",
   modMetadata: modMetadataFoo,
 });
 
-const ID_ORPHAN_C = uuidv4();
-const formStateModComponentOrphanC: ButtonFormState = menuItemFormStateFactory({
-  uuid: ID_ORPHAN_C,
-  label: "C",
+const formStateModComponentFooB = menuItemFormStateFactory({
+  label: "B",
+  modMetadata: modMetadataFoo,
 });
 
-const ID_BAR_D = uuidv4();
-const cleanModComponentBarD: ModComponentBase = modComponentFactory({
-  id: ID_BAR_D,
+const cleanModComponentBarD = modComponentFactory({
   label: "D",
   _recipe: modMetadataBar,
 });
 
-const ID_BAR_E = uuidv4();
-const formStateModComponentBarE: ButtonFormState = menuItemFormStateFactory({
-  uuid: ID_BAR_E,
+const formStateModComponentBarE = menuItemFormStateFactory({
   label: "E",
   modMetadata: modMetadataBar,
 });
 
-const ID_BAR_F = uuidv4();
 const cleanModComponentBarF: ModComponentBase = modComponentFactory({
-  id: ID_BAR_F,
   label: "F",
   _recipe: modMetadataBar,
 });
 
-const ID_ORPHAN_G = uuidv4();
-const cleanModComponentOrphanG: ModComponentBase = modComponentFactory({
-  id: ID_ORPHAN_G,
-  label: "G",
-});
-
-const ID_ORPHAN_H = uuidv4();
-const cleanModComponentOrphanH: ModComponentBase = modComponentFactory({
-  id: ID_ORPHAN_H,
-  label: "H",
-});
-
-const formStateModComponentOrphanH: ButtonFormState = menuItemFormStateFactory({
-  uuid: ID_ORPHAN_H,
-  label: "H",
-});
-
 describe("arrangeSidebarItems()", () => {
-  test("sort orphaned mods by metadata.name", () => {
-    const sidebarItems = arrangeSidebarItems({
-      modComponentFormStates: [formStateModComponentOrphanC],
-      cleanModComponents: [cleanModComponentOrphanH, cleanModComponentOrphanG],
-    });
-
-    expect(sidebarItems).toStrictEqual([
-      formStateModComponentOrphanC,
-      cleanModComponentOrphanG,
-      cleanModComponentOrphanH,
-    ]);
-  });
-
   test("groups mods and sorts mod components by label", () => {
     const sidebarItems = arrangeSidebarItems({
       modComponentFormStates: [
@@ -142,10 +96,15 @@ describe("arrangeSidebarItems()", () => {
 
   test("do not duplicate modComponent/modComponentFormState pairs in the results", () => {
     const sidebarItems = arrangeSidebarItems({
-      modComponentFormStates: [formStateModComponentOrphanH],
-      cleanModComponents: [cleanModComponentOrphanH],
+      modComponentFormStates: [formStateModComponentFooA],
+      cleanModComponents: [cleanModComponentFooA],
     });
 
-    expect(sidebarItems).toStrictEqual([formStateModComponentOrphanH]);
+    expect(sidebarItems).toStrictEqual([
+      {
+        modMetadata: modMetadataFoo,
+        modComponents: [formStateModComponentFooA],
+      },
+    ]);
   });
 });
diff --git a/src/pageEditor/modListingPanel/arrangeSidebarItems.ts b/src/pageEditor/modListingPanel/arrangeSidebarItems.ts
index 2dc10ce533..f124e60b9f 100644
--- a/src/pageEditor/modListingPanel/arrangeSidebarItems.ts
+++ b/src/pageEditor/modListingPanel/arrangeSidebarItems.ts
@@ -21,11 +21,10 @@ import { type UUID } from "@/types/stringTypes";
 import { type ModComponentBase } from "@/types/modComponentTypes";
 import { type RegistryId } from "@/types/registryTypes";
 import {
-  isModSidebarItem,
-  type ModComponentSidebarItem,
   type ModSidebarItem,
   type SidebarItem,
 } from "@/pageEditor/modListingPanel/common";
+import { assertNotNullish } from "@/utils/nullishUtils";
 
 type ArrangeSidebarItemsArgs = {
   modComponentFormStates: ModComponentFormState[];
@@ -37,23 +36,19 @@ function arrangeSidebarItems({
   cleanModComponents,
 }: ArrangeSidebarItemsArgs): SidebarItem[] {
   const modSidebarItems: Record<RegistryId, ModSidebarItem> = {};
-  const orphanSidebarItems: ModComponentSidebarItem[] = [];
 
   const formStateModComponentIds = new Set<UUID>();
 
   for (const formState of modComponentFormStates) {
     formStateModComponentIds.add(formState.uuid);
 
-    if (formState.modMetadata == null) {
-      orphanSidebarItems.push(formState);
-    } else {
-      const modSidebarItem = modSidebarItems[formState.modMetadata.id] ?? {
-        modMetadata: formState.modMetadata,
-        modComponents: [],
-      };
-      modSidebarItem.modComponents.push(formState);
-      modSidebarItems[formState.modMetadata.id] = modSidebarItem;
-    }
+    const modSidebarItem = modSidebarItems[formState.modMetadata.id] ?? {
+      modMetadata: formState.modMetadata,
+      modComponents: [],
+    };
+
+    modSidebarItem.modComponents.push(formState);
+    modSidebarItems[formState.modMetadata.id] = modSidebarItem;
   }
 
   const cleanModComponentsWithoutFormStates = cleanModComponents.filter(
@@ -61,16 +56,17 @@ function arrangeSidebarItems({
   );
 
   for (const cleanModComponent of cleanModComponentsWithoutFormStates) {
-    if (cleanModComponent._recipe == null) {
-      orphanSidebarItems.push(cleanModComponent);
-    } else {
-      const modSidebarItem = modSidebarItems[cleanModComponent._recipe.id] ?? {
-        modMetadata: cleanModComponent._recipe,
-        modComponents: [],
-      };
-      modSidebarItem.modComponents.push(cleanModComponent);
-      modSidebarItems[cleanModComponent._recipe.id] = modSidebarItem;
-    }
+    assertNotNullish(
+      cleanModComponent._recipe,
+      "Expected mod component to have mod metadata",
+    );
+
+    const modSidebarItem = modSidebarItems[cleanModComponent._recipe.id] ?? {
+      modMetadata: cleanModComponent._recipe,
+      modComponents: [],
+    };
+    modSidebarItem.modComponents.push(cleanModComponent);
+    modSidebarItems[cleanModComponent._recipe.id] = modSidebarItem;
   }
 
   for (const modSidebarItem of Object.values(modSidebarItems)) {
@@ -79,12 +75,8 @@ function arrangeSidebarItems({
     );
   }
 
-  return sortBy(
-    [...Object.values(modSidebarItems), ...orphanSidebarItems],
-    (item) =>
-      isModSidebarItem(item)
-        ? item.modMetadata.name.toLowerCase()
-        : item.label.toLowerCase(),
+  return sortBy(Object.values(modSidebarItems), (item) =>
+    item.modMetadata.name.toLowerCase(),
   );
 }
 
diff --git a/src/pageEditor/modListingPanel/modals/CreateModModal.tsx b/src/pageEditor/modListingPanel/modals/CreateModModal.tsx
index f6459fceca..a3726c97bc 100644
--- a/src/pageEditor/modListingPanel/modals/CreateModModal.tsx
+++ b/src/pageEditor/modListingPanel/modals/CreateModModal.tsx
@@ -171,7 +171,7 @@ const CreateModModalBody: React.FC = () => {
   // `selectActiveModId` returns the mod id if a mod entry is selected (not a mod component within the mod)
   const directlyActiveModId = useSelector(selectActiveModId);
   const activeModId =
-    directlyActiveModId ?? activeModComponentFormState?.modMetadata?.id;
+    directlyActiveModId ?? activeModComponentFormState?.modMetadata.id;
 
   const { data: activeModDefinition, isFetching: isModDefinitionFetching } =
     useOptionalModDefinition(activeModId);
diff --git a/src/pageEditor/modListingPanel/modals/MoveCopyToModModal.tsx b/src/pageEditor/modListingPanel/modals/MoveOrCopyToModModal.tsx
similarity index 96%
rename from src/pageEditor/modListingPanel/modals/MoveCopyToModModal.tsx
rename to src/pageEditor/modListingPanel/modals/MoveOrCopyToModModal.tsx
index 0322224d6b..b781c3915e 100644
--- a/src/pageEditor/modListingPanel/modals/MoveCopyToModModal.tsx
+++ b/src/pageEditor/modListingPanel/modals/MoveOrCopyToModModal.tsx
@@ -51,9 +51,10 @@ const formStateSchema = object({
 });
 
 /**
- * Modal to move/copy a mod component to an existing or new mod
+ * Modal to move or copy a mod component to an existing or new mod.
+ * @see selectKeepLocalCopyOnCreateMod
  */
-const MoveCopyToModModal: React.FC = () => {
+const MoveOrCopyToModModal: React.FC = () => {
   const { isMoveCopyToModVisible: show } = useSelector(
     selectEditorModalVisibilities,
   );
@@ -168,4 +169,4 @@ const MoveCopyToModModal: React.FC = () => {
   );
 };
 
-export default MoveCopyToModModal;
+export default MoveOrCopyToModModal;
diff --git a/src/pageEditor/modals/Modals.tsx b/src/pageEditor/modals/Modals.tsx
index da33d85fbc..c3777162b9 100644
--- a/src/pageEditor/modals/Modals.tsx
+++ b/src/pageEditor/modals/Modals.tsx
@@ -18,13 +18,13 @@
 import AddBrickModal from "@/pageEditor/modals/addBrickModal/AddBrickModal";
 import React from "react";
 import CreateModModal from "@/pageEditor/modListingPanel/modals/CreateModModal";
-import MoveCopyToModModal from "@/pageEditor/modListingPanel/modals/MoveCopyToModModal";
+import MoveOrCopyToModModal from "@/pageEditor/modListingPanel/modals/MoveOrCopyToModModal";
 import SaveAsNewModModal from "@/pageEditor/modListingPanel/modals/SaveAsNewModModal";
 import SaveDataIntegrityErrorModal from "@/pageEditor/panes/save/SaveDataIntegrityErrorModal";
 
 const Modals: React.FunctionComponent = () => (
   <>
-    <MoveCopyToModModal />
+    <MoveOrCopyToModModal />
     <SaveAsNewModModal />
     <CreateModModal />
     <AddBrickModal />
diff --git a/src/pageEditor/starterBricks/base.ts b/src/pageEditor/starterBricks/base.ts
index 130c582158..ffe632b002 100644
--- a/src/pageEditor/starterBricks/base.ts
+++ b/src/pageEditor/starterBricks/base.ts
@@ -46,7 +46,10 @@ import { hasInnerStarterBrickRef } from "@/registry/hydrateInnerDefinitions";
 import { normalizePipelineForEditor } from "./pipelineMapping";
 import { emptyPermissionsFactory } from "@/permissions/permissionsUtils";
 import { type ApiVersion } from "@/types/runtimeTypes";
-import { type ModComponentBase } from "@/types/modComponentTypes";
+import {
+  type ModComponentBase,
+  type ModMetadata,
+} from "@/types/modComponentTypes";
 import { type Schema } from "@/types/schemaTypes";
 import { type SafeString, type UUID } from "@/types/stringTypes";
 import { isExpression } from "@/utils/expressionUtils";
@@ -68,6 +71,7 @@ import {
 } from "@/types/availabilityTypes";
 import { normalizeAvailability } from "@/bricks/available";
 import { registry } from "@/background/messenger/api";
+import { assertNotNullish } from "@/utils/nullishUtils";
 
 export interface WizardStep {
   step: string;
@@ -129,6 +133,11 @@ export function baseFromModComponent<T extends StarterBrickType>(
   | "variablesDefinition"
   | "modMetadata"
 > & { type: T } {
+  assertNotNullish(
+    config._recipe,
+    "Standalone mod components are not supported",
+  );
+
   return {
     uuid: config.id,
     apiVersion: config.apiVersion,
@@ -152,9 +161,9 @@ export function initModOptionsIfNeeded<TFormState extends BaseFormState>(
   modComponentFormState: TFormState,
   modDefinitions: ModDefinition[],
 ) {
-  if (modComponentFormState.modMetadata?.id) {
+  if (modComponentFormState.modMetadata.id) {
     const mod = modDefinitions?.find(
-      (x) => x.metadata.id === modComponentFormState.modMetadata?.id,
+      (x) => x.metadata.id === modComponentFormState.modMetadata.id,
     );
 
     if (mod?.options == null) {
@@ -209,12 +218,17 @@ export function baseSelectModComponent({
   };
 }
 
-export function makeInitialBaseState(
-  uuid: UUID = uuidv4(),
-): Except<BaseFormState, "label" | "starterBrick"> {
+export function makeInitialBaseState({
+  modMetadata,
+  modComponentId = uuidv4(),
+}: {
+  modComponentId?: UUID;
+  modMetadata: ModMetadata;
+}): Except<BaseFormState, "label" | "starterBrick"> {
   return {
-    uuid,
+    uuid: modComponentId,
     apiVersion: PAGE_EDITOR_DEFAULT_BRICK_API_VERSION,
+    modMetadata,
     integrationDependencies: [],
     permissions: emptyPermissionsFactory(),
     optionsArgs: {},
@@ -222,7 +236,6 @@ export function makeInitialBaseState(
     modComponent: {
       brickPipeline: [],
     },
-    modMetadata: undefined,
   };
 }
 
diff --git a/src/pageEditor/starterBricks/button.ts b/src/pageEditor/starterBricks/button.ts
index 96e6a9f158..2767f0851d 100644
--- a/src/pageEditor/starterBricks/button.ts
+++ b/src/pageEditor/starterBricks/button.ts
@@ -16,7 +16,10 @@
  */
 
 import { type Metadata } from "@/types/registryTypes";
-import { type ModComponentBase } from "@/types/modComponentTypes";
+import {
+  type ModComponentBase,
+  type ModMetadata,
+} from "@/types/modComponentTypes";
 import {
   baseFromModComponent,
   baseSelectModComponent,
@@ -51,19 +54,28 @@ import {
 import { assertNotNullish } from "@/utils/nullishUtils";
 import { StarterBrickTypes } from "@/types/starterBrickTypes";
 
-function fromNativeElement(
-  url: string,
-  metadata: Metadata,
-  button: ButtonSelectionResult,
-): ButtonFormState {
+function fromNativeElement({
+  url,
+  modMetadata,
+  starterBrickMetadata,
+  element,
+}: {
+  url: string;
+  modMetadata: ModMetadata;
+  starterBrickMetadata: Metadata;
+  element: ButtonSelectionResult;
+}): ButtonFormState {
   return {
     label: `My ${getDomain(url)} button`,
-    ...makeInitialBaseState(button.uuid),
-    containerInfo: button.containerInfo,
+    ...makeInitialBaseState({
+      modComponentId: element.uuid,
+      modMetadata,
+    }),
+    containerInfo: element.containerInfo,
     starterBrick: {
-      metadata,
+      metadata: starterBrickMetadata,
       definition: {
-        ...button.menu,
+        ...element.menu,
         type: StarterBrickTypes.BUTTON,
         reader: getImplicitReader(StarterBrickTypes.BUTTON),
         isAvailable: getDefaultAvailabilityForUrl(url),
@@ -77,7 +89,7 @@ function fromNativeElement(
       },
     },
     modComponent: {
-      caption: button.item.caption,
+      caption: element.item.caption,
       brickPipeline: [],
       dynamicCaption: false,
       onSuccess: true,
diff --git a/src/pageEditor/starterBricks/contextMenu.test.ts b/src/pageEditor/starterBricks/contextMenu.test.ts
index cad9754d86..751ce26d80 100644
--- a/src/pageEditor/starterBricks/contextMenu.test.ts
+++ b/src/pageEditor/starterBricks/contextMenu.test.ts
@@ -17,14 +17,16 @@
 
 import config from "@/pageEditor/starterBricks/contextMenu";
 import { internalStarterBrickMetaFactory } from "@/pageEditor/starterBricks/base";
+import { createNewUnsavedModMetadata } from "@/utils/modUtils";
 
 describe("contextMenu", () => {
   it("smoke test", () => {
-    const formState = config.fromNativeElement(
-      "https://example.com",
-      internalStarterBrickMetaFactory(),
-      null,
-    );
+    const formState = config.fromNativeElement({
+      url: "https://example.com",
+      starterBrickMetadata: internalStarterBrickMetaFactory(),
+      modMetadata: createNewUnsavedModMetadata({ modName: "Smoke Test" }),
+      element: null,
+    });
 
     expect(config.selectModComponent(formState)).toEqual(
       expect.objectContaining({
@@ -38,11 +40,12 @@ describe("contextMenu", () => {
   });
 
   it("defaults to all sites", () => {
-    const formState = config.fromNativeElement(
-      "https://example.com",
-      internalStarterBrickMetaFactory(),
-      null,
-    );
+    const formState = config.fromNativeElement({
+      url: "https://example.com",
+      starterBrickMetadata: internalStarterBrickMetaFactory(),
+      modMetadata: createNewUnsavedModMetadata({ modName: "Smoke Test" }),
+      element: null,
+    });
 
     expect(
       config.selectStarterBrickDefinition(formState).definition.isAvailable,
diff --git a/src/pageEditor/starterBricks/contextMenu.ts b/src/pageEditor/starterBricks/contextMenu.ts
index 473023cdba..01628149df 100644
--- a/src/pageEditor/starterBricks/contextMenu.ts
+++ b/src/pageEditor/starterBricks/contextMenu.ts
@@ -16,7 +16,10 @@
  */
 
 import { type Metadata } from "@/types/registryTypes";
-import { type ModComponentBase } from "@/types/modComponentTypes";
+import {
+  type ModComponentBase,
+  type ModMetadata,
+} from "@/types/modComponentTypes";
 import {
   baseFromModComponent,
   baseSelectModComponent,
@@ -46,11 +49,14 @@ import {
 import { assertNotNullish } from "@/utils/nullishUtils";
 import { StarterBrickTypes } from "@/types/starterBrickTypes";
 
-function fromNativeElement(
-  url: string,
-  metadata: Metadata,
-): ContextMenuFormState {
-  const base = makeInitialBaseState();
+function fromNativeElement({
+  modMetadata,
+  starterBrickMetadata,
+}: {
+  modMetadata: ModMetadata;
+  starterBrickMetadata: Metadata;
+}): ContextMenuFormState {
+  const base = makeInitialBaseState({ modMetadata });
 
   const isAvailable = ALL_SITES_AVAILABILITY;
 
@@ -61,7 +67,7 @@ function fromNativeElement(
     label: title,
     ...base,
     starterBrick: {
-      metadata,
+      metadata: starterBrickMetadata,
       definition: {
         type: StarterBrickTypes.CONTEXT_MENU,
         reader: getImplicitReader(StarterBrickTypes.CONTEXT_MENU),
diff --git a/src/pageEditor/starterBricks/dynamicQuickBar.ts b/src/pageEditor/starterBricks/dynamicQuickBar.ts
index 456cea3499..9095d71c32 100644
--- a/src/pageEditor/starterBricks/dynamicQuickBar.ts
+++ b/src/pageEditor/starterBricks/dynamicQuickBar.ts
@@ -16,7 +16,10 @@
  */
 
 import { type Metadata } from "@/types/registryTypes";
-import { type ModComponentBase } from "@/types/modComponentTypes";
+import {
+  type ModComponentBase,
+  type ModMetadata,
+} from "@/types/modComponentTypes";
 import {
   baseFromModComponent,
   baseSelectModComponent,
@@ -47,11 +50,14 @@ import { assertNotNullish } from "@/utils/nullishUtils";
 import { StarterBrickTypes } from "@/types/starterBrickTypes";
 import { FeatureFlags } from "@/auth/featureFlags";
 
-function fromNativeElement(
-  _url: string,
-  metadata: Metadata,
-): DynamicQuickBarFormState {
-  const base = makeInitialBaseState();
+function fromNativeElement({
+  modMetadata,
+  starterBrickMetadata,
+}: {
+  modMetadata: ModMetadata;
+  starterBrickMetadata: Metadata;
+}): DynamicQuickBarFormState {
+  const base = makeInitialBaseState({ modMetadata });
 
   const isAvailable = ALL_SITES_AVAILABILITY;
 
@@ -62,7 +68,7 @@ function fromNativeElement(
     label: title,
     ...base,
     starterBrick: {
-      metadata,
+      metadata: starterBrickMetadata,
       definition: {
         type: StarterBrickTypes.DYNAMIC_QUICK_BAR,
         reader: getImplicitReader(StarterBrickTypes.DYNAMIC_QUICK_BAR),
diff --git a/src/pageEditor/starterBricks/modComponentFormStateAdapter.ts b/src/pageEditor/starterBricks/modComponentFormStateAdapter.ts
index 6fa77b2ed7..c3e69d5583 100644
--- a/src/pageEditor/starterBricks/modComponentFormStateAdapter.ts
+++ b/src/pageEditor/starterBricks/modComponentFormStateAdapter.ts
@@ -21,7 +21,10 @@ import { type Metadata } from "@/types/registryTypes";
 import { type StarterBrickDefinitionLike } from "@/starterBricks/types";
 import { type StarterBrickType } from "@/types/starterBrickTypes";
 import { type DraftModComponent } from "@/contentScript/pageEditor/types";
-import { type ModComponentBase } from "@/types/modComponentTypes";
+import {
+  type ModComponentBase,
+  type ModMetadata,
+} from "@/types/modComponentTypes";
 import { type Target } from "@/types/messengerTypes";
 import { type BaseFormState } from "@/pageEditor/store/editor/baseFormStateTypes";
 import { type Nullishable } from "@/utils/nullishUtils";
@@ -85,11 +88,12 @@ export interface ModComponentFormStateAdapter<
    * @param metadata the initial metadata for the new mod component
    * @param element the result of the `selectNativeElement` method
    */
-  readonly fromNativeElement: (
-    url: string,
-    metadata: Metadata,
-    element: Nullishable<TResult>,
-  ) => TState;
+  readonly fromNativeElement: (args: {
+    url: string;
+    modMetadata: ModMetadata;
+    starterBrickMetadata: Metadata;
+    element: Nullishable<TResult>;
+  }) => TState;
 
   /**
    * Returns a draft mod component definition that the content script can render on the page
diff --git a/src/pageEditor/starterBricks/quickBar.ts b/src/pageEditor/starterBricks/quickBar.ts
index 4d95875c25..984339a214 100644
--- a/src/pageEditor/starterBricks/quickBar.ts
+++ b/src/pageEditor/starterBricks/quickBar.ts
@@ -16,7 +16,10 @@
  */
 
 import { type Metadata } from "@/types/registryTypes";
-import { type ModComponentBase } from "@/types/modComponentTypes";
+import {
+  type ModComponentBase,
+  type ModMetadata,
+} from "@/types/modComponentTypes";
 import {
   baseFromModComponent,
   baseSelectModComponent,
@@ -46,8 +49,14 @@ import {
 import { assertNotNullish } from "@/utils/nullishUtils";
 import { StarterBrickTypes } from "@/types/starterBrickTypes";
 
-function fromNativeElement(url: string, metadata: Metadata): QuickBarFormState {
-  const base = makeInitialBaseState();
+function fromNativeElement({
+  modMetadata,
+  starterBrickMetadata,
+}: {
+  modMetadata: ModMetadata;
+  starterBrickMetadata: Metadata;
+}): QuickBarFormState {
+  const base = makeInitialBaseState({ modMetadata });
 
   const isAvailable = ALL_SITES_AVAILABILITY;
 
@@ -58,7 +67,7 @@ function fromNativeElement(url: string, metadata: Metadata): QuickBarFormState {
     label: title,
     ...base,
     starterBrick: {
-      metadata,
+      metadata: starterBrickMetadata,
       definition: {
         type: StarterBrickTypes.QUICK_BAR_ACTION,
         reader: getImplicitReader(StarterBrickTypes.QUICK_BAR_ACTION),
diff --git a/src/pageEditor/starterBricks/sidebar.ts b/src/pageEditor/starterBricks/sidebar.ts
index 80634d0393..5c2bd9c452 100644
--- a/src/pageEditor/starterBricks/sidebar.ts
+++ b/src/pageEditor/starterBricks/sidebar.ts
@@ -16,7 +16,10 @@
  */
 
 import { type Metadata } from "@/types/registryTypes";
-import { type ModComponentBase } from "@/types/modComponentTypes";
+import {
+  type ModComponentBase,
+  type ModMetadata,
+} from "@/types/modComponentTypes";
 import {
   baseFromModComponent,
   baseSelectModComponent,
@@ -45,8 +48,16 @@ import {
 import { assertNotNullish } from "@/utils/nullishUtils";
 import { StarterBrickTypes } from "@/types/starterBrickTypes";
 
-function fromNativeElement(url: string, metadata: Metadata): SidebarFormState {
-  const base = makeInitialBaseState();
+function fromNativeElement({
+  modMetadata,
+  starterBrickMetadata,
+}: {
+  modMetadata: ModMetadata;
+  starterBrickMetadata: Metadata;
+}): SidebarFormState {
+  const base = makeInitialBaseState({
+    modMetadata,
+  });
 
   const heading = "Sidebar Panel";
 
@@ -54,7 +65,7 @@ function fromNativeElement(url: string, metadata: Metadata): SidebarFormState {
     label: heading,
     ...base,
     starterBrick: {
-      metadata,
+      metadata: starterBrickMetadata,
 
       definition: {
         type: StarterBrickTypes.SIDEBAR_PANEL,
diff --git a/src/pageEditor/starterBricks/trigger.ts b/src/pageEditor/starterBricks/trigger.ts
index 75f9182ee8..da1b350bb4 100644
--- a/src/pageEditor/starterBricks/trigger.ts
+++ b/src/pageEditor/starterBricks/trigger.ts
@@ -44,21 +44,28 @@ import { type ModComponentFormStateAdapter } from "@/pageEditor/starterBricks/mo
 import TriggerConfiguration from "@/pageEditor/tabs/trigger/TriggerConfiguration";
 import type { DraftModComponent } from "@/contentScript/pageEditor/types";
 import { type TriggerFormState } from "./formStateTypes";
-import { type ModComponentBase } from "@/types/modComponentTypes";
+import {
+  type ModComponentBase,
+  type ModMetadata,
+} from "@/types/modComponentTypes";
 import { assertNotNullish } from "@/utils/nullishUtils";
 import { StarterBrickTypes } from "@/types/starterBrickTypes";
 import { ReportModes } from "@/starterBricks/trigger/triggerStarterBrickTypes";
 
-function fromNativeElement(
-  url: string,
-  metadata: Metadata,
-  _element: null,
-): TriggerFormState {
+function fromNativeElement({
+  starterBrickMetadata,
+  modMetadata,
+  url,
+}: {
+  url: string;
+  modMetadata: ModMetadata;
+  starterBrickMetadata: Metadata;
+}): TriggerFormState {
   return {
     label: `My ${getDomain(url)} trigger`,
-    ...makeInitialBaseState(),
+    ...makeInitialBaseState({ modMetadata }),
     starterBrick: {
-      metadata,
+      metadata: starterBrickMetadata,
       definition: {
         type: StarterBrickTypes.TRIGGER,
         trigger: "load",
diff --git a/src/pageEditor/store/analysisManager.ts b/src/pageEditor/store/analysisManager.ts
index 400f65691f..eecb4fa310 100644
--- a/src/pageEditor/store/analysisManager.ts
+++ b/src/pageEditor/store/analysisManager.ts
@@ -69,15 +69,14 @@ async function selectActiveModFormStates(
   if (activeModComponentFormState?.modMetadata) {
     const dirtyModComponentFormStates =
       state.editor.modComponentFormStates.filter(
-        (x) =>
-          x.modMetadata?.id === activeModComponentFormState.modMetadata?.id,
+        (x) => x.modMetadata.id === activeModComponentFormState.modMetadata.id,
       );
     const dirtyIds = new Set(dirtyModComponentFormStates.map((x) => x.uuid));
 
     const activatedModComponents = selectActivatedModComponents(state);
     const otherModComponents = activatedModComponents.filter(
       (x) =>
-        x._recipe?.id === activeModComponentFormState.modMetadata?.id &&
+        x._recipe?.id === activeModComponentFormState.modMetadata.id &&
         !dirtyIds.has(x.id),
     );
     const otherModComponentFormStates = await Promise.all(
diff --git a/src/pageEditor/store/editor/baseFormStateTypes.ts b/src/pageEditor/store/editor/baseFormStateTypes.ts
index b023b59045..b3d42b2006 100644
--- a/src/pageEditor/store/editor/baseFormStateTypes.ts
+++ b/src/pageEditor/store/editor/baseFormStateTypes.ts
@@ -25,7 +25,10 @@ import { type ApiVersion, type OptionsArgs } from "@/types/runtimeTypes";
 import { type UUID } from "@/types/stringTypes";
 import { type StarterBrickType } from "@/types/starterBrickTypes";
 import { type Permissions } from "webextension-polyfill";
-import { type ModComponentBase } from "@/types/modComponentTypes";
+import {
+  type ModComponentBase,
+  type ModMetadata,
+} from "@/types/modComponentTypes";
 import {
   type ModOptionsDefinition,
   type ModVariablesDefinition,
@@ -232,14 +235,33 @@ export type BaseFormStateV5<
   variablesDefinition: ModVariablesDefinition;
 };
 
+/**
+ * Base form state version that eliminates standalone mod components by containing in an unsaved mod
+ * @deprecated - Do not use versioned state types directly
+ * @see BaseFormState
+ * @since 2.1.4
+ */
+export type BaseFormStateV6<
+  TModComponent extends BaseModComponentState = BaseModComponentState,
+  TStarterBrick extends BaseStarterBrickState = BaseStarterBrickState,
+> =
+  // Can't use SetRequired because the property is required (it does not use ?), but it can be set to undefined
+  Except<BaseFormStateV5<TModComponent, TStarterBrick>, "modMetadata"> & {
+    /**
+     * The mod metadata for the mod component
+     * @see createNewUnsavedModMetadata
+     */
+    modMetadata: ModMetadata;
+  };
+
 export type BaseFormState<
   TModComponent extends BaseModComponentState = BaseModComponentState,
   TStarterBrick extends BaseStarterBrickState = BaseStarterBrickState,
 > = Except<
   // On migration, re-point this type to the most recent BaseFormStateV<N> type name
-  BaseFormStateV5<TModComponent, TStarterBrick>,
-  // NOTE: this is not changing the type shape/structure. It's just cleaning up the type name/reference which makes
-  // types easier to work with for testing migrations.
+  BaseFormStateV6<TModComponent, TStarterBrick>,
+  // NOTE: overriding integrationDependencies is not changing the type shape/structure. It's just cleaning up the
+  // type name/reference which makes types easier to work with for testing migrations.
   "integrationDependencies"
 > & {
   integrationDependencies: IntegrationDependency[];
diff --git a/src/pageEditor/store/editor/editorSelectors.ts b/src/pageEditor/store/editor/editorSelectors.ts
index 1ff30bea70..7fc611d282 100644
--- a/src/pageEditor/store/editor/editorSelectors.ts
+++ b/src/pageEditor/store/editor/editorSelectors.ts
@@ -104,7 +104,7 @@ export const selectActiveModComponentRef = createSelector(
     return {
       modComponentId: formState.uuid,
       modId:
-        formState.modMetadata?.id ??
+        formState.modMetadata.id ??
         getStandaloneModComponentRuntimeModId(formState.uuid),
       // XXX: the Page Editor form state uses an artificial id. When it's added to the page, the artificial id will be
       // replaced with the hash id calculated during hydration
@@ -192,7 +192,7 @@ const dirtyOptionValuesForModIdSelector = createSelector(
   selectNotDeletedModComponentFormStates,
   (_state: EditorRootState, modId: RegistryId | null) => modId,
   (formStates, modId) =>
-    formStates.find((formState) => formState.modMetadata?.id === modId)
+    formStates.find((formState) => formState.modMetadata.id === modId)
       ?.optionsArgs,
 );
 
@@ -236,7 +236,7 @@ const modIsDirtySelector = createSelector(
     selectDeletedComponentFormStatesByModId(state)[modId],
   ({ editor }: EditorRootState, modId: RegistryId) =>
     editor.modComponentFormStates
-      .filter((formState) => formState.modMetadata?.id === modId)
+      .filter((formState) => formState.modMetadata.id === modId)
       .map((formState) => formState.uuid),
   (
     isModComponentDirtyById,
@@ -290,7 +290,7 @@ export const selectActivatedModMetadatas = createSelector(
     const baseMetadatas = compact(
       uniqBy(
         [...formStateModMetadatas, ...activatedModComponentModMetadatas],
-        (modMetadata) => modMetadata?.id,
+        (x) => x?.id,
       ),
     );
 
@@ -564,7 +564,7 @@ export const selectActiveNodeEventData = createSelector(
     );
 
     return {
-      modId: activeModComponentFormState.modMetadata?.id,
+      modId: activeModComponentFormState.modMetadata.id,
       brickId: activeNodeInfo.blockId,
     } satisfies ReportEventData;
   },
@@ -574,5 +574,5 @@ export const selectFirstModComponentFormStateForActiveMod = createSelector(
   selectModComponentFormStates,
   selectActiveModId,
   (formState, activeModId) =>
-    formState.find((x) => x.modMetadata?.id === activeModId),
+    formState.find((x) => x.modMetadata.id === activeModId),
 );
diff --git a/src/pageEditor/store/editor/editorSlice.ts b/src/pageEditor/store/editor/editorSlice.ts
index ac40c6d483..f5ba9427ce 100644
--- a/src/pageEditor/store/editor/editorSlice.ts
+++ b/src/pageEditor/store/editor/editorSlice.ts
@@ -76,7 +76,10 @@ import { removeUnusedDependencies } from "@/components/fields/schemaFields/integ
 import { type UUID } from "@/types/stringTypes";
 import { type RegistryId } from "@/types/registryTypes";
 import { type ModOptionsDefinition } from "@/types/modDefinitionTypes";
-import { type ModComponentBase } from "@/types/modComponentTypes";
+import {
+  type ModComponentBase,
+  type ModMetadata,
+} from "@/types/modComponentTypes";
 import { type OptionsArgs } from "@/types/runtimeTypes";
 import { createMigrate } from "redux-persist";
 import { migrations } from "@/store/editorMigrations";
@@ -120,6 +123,7 @@ export const initialState: EditorState = {
 /**
  * Duplicate the active mod component within the containing mod.
  *
+ * Is an AsyncThunk because it depends on data from the brick registry.
  */
 const duplicateActiveModComponent = createAsyncThunk<
   void,
@@ -337,7 +341,7 @@ export const editorSlice = createSlice({
 
         // Find existing activated mod components with the same mod id
         const existingModComponents = state.modComponentFormStates.filter(
-          (formState) => formState.modMetadata?.id === modId,
+          (formState) => formState.modMetadata.id === modId,
         );
 
         // If there are existing components, collect their option arguments, and assign.
@@ -606,62 +610,17 @@ export const editorSlice = createSlice({
     },
     updateModMetadataOnModComponentFormStates(
       state,
-      action: PayloadAction<ModComponentBase["_recipe"]>,
+      action: PayloadAction<ModMetadata>,
     ) {
       const modMetadata = action.payload;
       const modComponentFormStates = state.modComponentFormStates.filter(
         (modComponentFormState) =>
-          modComponentFormState.modMetadata?.id === modMetadata?.id,
+          modComponentFormState.modMetadata.id === modMetadata.id,
       );
       for (const formState of modComponentFormStates) {
         formState.modMetadata = modMetadata;
       }
     },
-    addModComponentFormStateToMod(
-      state,
-      action: PayloadAction<{
-        modComponentId: UUID;
-        modMetadata: ModComponentBase["_recipe"];
-        keepLocalCopy: boolean;
-      }>,
-    ) {
-      const {
-        payload: { modComponentId, modMetadata, keepLocalCopy },
-      } = action;
-      const modComponentFormStateIndex = state.modComponentFormStates.findIndex(
-        (x) => x.uuid === modComponentId,
-      );
-      if (modComponentFormStateIndex < 0) {
-        throw new Error(
-          "Unable to add mod component to mod, mod component form state not found",
-        );
-      }
-
-      const modComponentFormState =
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- length check above
-        state.modComponentFormStates[modComponentFormStateIndex]!;
-
-      const newId = uuidv4();
-      state.modComponentFormStates.push({
-        ...modComponentFormState,
-        uuid: newId,
-        modMetadata,
-        installed: false, // Can't "reset" this, only remove or save
-      });
-      state.dirty[newId] = true;
-
-      state.expandedModId = modMetadata?.id ?? null;
-
-      if (!keepLocalCopy) {
-        ensureBrickPipelineUIState(state, newId);
-        state.activeModComponentId = newId;
-        state.modComponentFormStates.splice(modComponentFormStateIndex, 1);
-        if (modComponentFormState?.uuid) {
-          delete state.dirty[modComponentFormState.uuid];
-          delete state.brickPipelineUIStateById[modComponentFormState.uuid];
-        }
-      }
-    },
     showMoveCopyToModModal(
       state,
       action: PayloadAction<{ moveOrCopy: "move" | "copy" }>,
@@ -670,53 +629,6 @@ export const editorSlice = createSlice({
       state.visibleModalKey = ModalKey.MOVE_COPY_TO_MOD;
       state.keepLocalCopyOnCreateMod = moveOrCopy === "copy";
     },
-    removeModComponentFormStateFromMod(
-      state,
-      action: PayloadAction<{
-        modComponentId: UUID;
-        keepLocalCopy: boolean;
-      }>,
-    ) {
-      const { modComponentId, keepLocalCopy } = action.payload;
-      const modComponentFormStateIndex = state.modComponentFormStates.findIndex(
-        (x) => x.uuid === modComponentId,
-      );
-      if (modComponentFormStateIndex < 0) {
-        throw new Error(
-          "Unable to remove mod component from mod, mod component form state not found",
-        );
-      }
-
-      const modComponentFormState =
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- length check above
-        state.modComponentFormStates[modComponentFormStateIndex]!;
-      assertNotNullish(
-        modComponentFormState.modMetadata,
-        "Mod component form state has no mod definition",
-      );
-      const modId = modComponentFormState.modMetadata.id;
-      state.deletedModComponentFormStatesByModId[modId] ??= [];
-
-      state.deletedModComponentFormStatesByModId[modId].push(
-        modComponentFormState,
-      );
-      state.modComponentFormStates.splice(modComponentFormStateIndex, 1);
-      delete state.dirty[modComponentId];
-      delete state.brickPipelineUIStateById[modComponentId];
-      state.activeModComponentId = null;
-
-      if (keepLocalCopy) {
-        const newId = uuidv4();
-        state.modComponentFormStates.push({
-          ...modComponentFormState,
-          uuid: newId,
-          modMetadata: undefined,
-        });
-        state.dirty[newId] = true;
-        ensureBrickPipelineUIState(state, newId);
-        state.activeModComponentId = newId;
-      }
-    },
     showSaveAsNewModModal(state) {
       state.visibleModalKey = ModalKey.SAVE_AS_NEW_MOD;
     },
@@ -1060,7 +972,7 @@ export const persistEditorConfig = {
   // Change the type of localStorage to our overridden version so that it can be exported
   // See: @/store/StorageInterface.ts
   storage: localStorage as StorageInterface,
-  version: 8,
+  version: 9,
   migrate: createMigrate(migrations, { debug: Boolean(process.env.DEBUG) }),
   blacklist: [
     "inserting",
diff --git a/src/pageEditor/store/editor/editorSliceHelpers.ts b/src/pageEditor/store/editor/editorSliceHelpers.ts
index c1a91f8f85..a6a66ae351 100644
--- a/src/pageEditor/store/editor/editorSliceHelpers.ts
+++ b/src/pageEditor/store/editor/editorSliceHelpers.ts
@@ -222,7 +222,7 @@ export function setActiveModComponentId(
   state.activeModComponentId = modComponentFormState.uuid;
   state.activeModId = null;
   state.expandedModId =
-    modComponentFormState.modMetadata?.id ?? state.expandedModId;
+    modComponentFormState.modMetadata.id ?? state.expandedModId;
   state.selectionSeq++;
 
   ensureBrickPipelineUIState(state, modComponentFormState.uuid);
diff --git a/src/pageEditor/store/editor/pageEditorTypes.ts b/src/pageEditor/store/editor/pageEditorTypes.ts
index 03246d6a38..46cd487ed9 100644
--- a/src/pageEditor/store/editor/pageEditorTypes.ts
+++ b/src/pageEditor/store/editor/pageEditorTypes.ts
@@ -40,6 +40,7 @@ import {
   type BaseFormStateV3,
   type BaseFormStateV4,
   type BaseFormStateV5,
+  type BaseFormStateV6,
 } from "@/pageEditor/store/editor/baseFormStateTypes";
 
 export type AddBrickLocation = {
@@ -408,12 +409,26 @@ export type EditorStateV8 = Except<
   deletedModComponentFormStatesByModId: Record<string, BaseFormStateV5[]>;
 };
 
+/**
+ * Version bump to account for adding variableDefinition property in BaseFormState
+ *
+ * @deprecated - Do not use versioned state types directly, exported for testing
+ * @see migrateEditorStateV8
+ */
+export type EditorStateV9 = Except<
+  EditorStateV8,
+  "modComponentFormStates" | "deletedModComponentFormStatesByModId"
+> & {
+  modComponentFormStates: BaseFormStateV6[];
+  deletedModComponentFormStatesByModId: Record<string, BaseFormStateV6[]>;
+};
+
 export type EditorState = Except<
   // On migration, re-point this type to the most recent EditorStateV<N> type name
-  EditorStateV8,
+  EditorStateV9,
   // Swap out any properties with versioned types for type references to the latest version.
-  // NOTE: this is not changing the type shape/structure. It's just cleaning up the type name/reference which makes
-  // types easier to work with for testing migrations.
+  // NOTE: overriding these properties is not changing the type shape/structure. It's just cleaning up the type
+  // name/reference which makes types easier to work with for testing migrations.
   "modComponentFormStates" | "deletedModComponentFormStatesByModId"
 > & {
   modComponentFormStates: ModComponentFormState[];
diff --git a/src/pageEditor/store/editor/selectGetCleanComponentsAndDirtyFormStatesForMod.ts b/src/pageEditor/store/editor/selectGetCleanComponentsAndDirtyFormStatesForMod.ts
index 7477281a83..bebeabce75 100644
--- a/src/pageEditor/store/editor/selectGetCleanComponentsAndDirtyFormStatesForMod.ts
+++ b/src/pageEditor/store/editor/selectGetCleanComponentsAndDirtyFormStatesForMod.ts
@@ -31,7 +31,7 @@ export const selectGetCleanComponentsAndDirtyFormStatesForMod = createSelector(
     (modId: RegistryId | null) => {
       const dirtyModComponentFormStates = formStates.filter(
         (formState) =>
-          formState.modMetadata?.id === modId &&
+          formState.modMetadata.id === modId &&
           isDirtyByComponentId[formState.uuid],
       );
 
diff --git a/src/pageEditor/tabs/editTab/dataPanel/BrickDataPanel.test.tsx b/src/pageEditor/tabs/editTab/dataPanel/BrickDataPanel.test.tsx
index 3f7066471f..2bd2e6a330 100644
--- a/src/pageEditor/tabs/editTab/dataPanel/BrickDataPanel.test.tsx
+++ b/src/pageEditor/tabs/editTab/dataPanel/BrickDataPanel.test.tsx
@@ -77,7 +77,7 @@ describe("BrickDataPanel", () => {
     expect(reportEventMock).toHaveBeenCalledWith(Events.DATA_PANEL_TAB_VIEW, {
       tabName: DataPanelTabKey.Input,
       brickId: formState.modComponent.brickPipeline[1]!.id,
-      modId: undefined,
+      modId: expect.toBeString(),
     });
 
     reportEventMock.mockClear();
@@ -96,7 +96,7 @@ describe("BrickDataPanel", () => {
     expect(reportEventMock).toHaveBeenCalledWith(Events.DATA_PANEL_TAB_VIEW, {
       tabName: DataPanelTabKey.Comments,
       brickId: formState.modComponent.brickPipeline[1]!.id,
-      modId: undefined,
+      modId: expect.toBeString(),
     });
   });
 });
diff --git a/src/pageEditor/tabs/editTab/dataPanel/tabs/CommentsTab.test.tsx b/src/pageEditor/tabs/editTab/dataPanel/tabs/CommentsTab.test.tsx
index 406859a0d9..5bb426abad 100644
--- a/src/pageEditor/tabs/editTab/dataPanel/tabs/CommentsTab.test.tsx
+++ b/src/pageEditor/tabs/editTab/dataPanel/tabs/CommentsTab.test.tsx
@@ -93,7 +93,7 @@ describe("CommentsTab", () => {
     expect(reportEventMock).toHaveBeenCalledWith(Events.BRICK_COMMENTS_UPDATE, {
       commentsLength: newComments.length,
       brickId: expectedBrickId,
-      modId: undefined,
+      modId: expect.toBeString(),
     });
   });
 
@@ -115,7 +115,7 @@ describe("CommentsTab", () => {
     expect(reportEventMock).toHaveBeenCalledWith(Events.BRICK_COMMENTS_UPDATE, {
       commentsLength: expectedComments.length,
       brickId: expectedBrickId,
-      modId: formStateWithComments.modMetadata!.id,
+      modId: formStateWithComments.modMetadata.id,
     });
   });
 });
diff --git a/src/pageEditor/tabs/editTab/dataPanel/tabs/ModVariablesTab.test.tsx b/src/pageEditor/tabs/editTab/dataPanel/tabs/ModVariablesTab.test.tsx
index 75ab7e7bfa..3c19e32320 100644
--- a/src/pageEditor/tabs/editTab/dataPanel/tabs/ModVariablesTab.test.tsx
+++ b/src/pageEditor/tabs/editTab/dataPanel/tabs/ModVariablesTab.test.tsx
@@ -26,7 +26,6 @@ import { Tab } from "react-bootstrap";
 import { DataPanelTabKey } from "@/pageEditor/tabs/editTab/dataPanel/dataPanelTypes";
 import { modMetadataFactory } from "@/testUtils/factories/modComponentFactories";
 import { formStateFactory } from "@/testUtils/factories/pageEditorFactories";
-import { getStandaloneModComponentRuntimeModId } from "@/utils/modUtils";
 
 const getPageStateMock = jest.mocked(getPageState);
 
@@ -57,27 +56,6 @@ describe("ModVariablesTab", () => {
     return utils;
   }
 
-  it("renders with standalone mod component", async () => {
-    const formState = formStateFactory();
-    const { asFragment } = await renderPageStateTab(formState);
-    expect(asFragment()).toMatchSnapshot();
-
-    expect(getPageStateMock).toHaveBeenCalledWith(
-      {
-        frameId: 0,
-        tabId: 0,
-      },
-      {
-        namespace: expect.toBeString(),
-        modComponentRef: {
-          modComponentId: formState.uuid,
-          modId: getStandaloneModComponentRuntimeModId(formState.uuid),
-          starterBrickId: formState.starterBrick.metadata.id,
-        },
-      },
-    );
-  });
-
   it("renders with mod's mod component", async () => {
     const modMetadata = modMetadataFactory();
 
diff --git a/src/pageEditor/tabs/editTab/dataPanel/tabs/__snapshots__/ModVariablesTab.test.tsx.snap b/src/pageEditor/tabs/editTab/dataPanel/tabs/__snapshots__/ModVariablesTab.test.tsx.snap
index f10ac39c9d..2d5c53d44a 100644
--- a/src/pageEditor/tabs/editTab/dataPanel/tabs/__snapshots__/ModVariablesTab.test.tsx.snap
+++ b/src/pageEditor/tabs/editTab/dataPanel/tabs/__snapshots__/ModVariablesTab.test.tsx.snap
@@ -285,289 +285,3 @@ exports[`ModVariablesTab renders with mod's mod component 1`] = `
   </div>
 </DocumentFragment>
 `;
-
-exports[`ModVariablesTab 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-mod-variables"
-          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 Mod Variables
-          </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>
-                  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>
-            <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>
-                  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>
-          </ul>
-        </li>
-      </ul>
-    </div>
-  </div>
-</DocumentFragment>
-`;
diff --git a/src/pageEditor/tabs/modMetadata/ModMetadataEditor.test.tsx b/src/pageEditor/tabs/modMetadata/ModMetadataEditor.test.tsx
index 1792e6ebd6..30ef5a1870 100644
--- a/src/pageEditor/tabs/modMetadata/ModMetadataEditor.test.tsx
+++ b/src/pageEditor/tabs/modMetadata/ModMetadataEditor.test.tsx
@@ -62,7 +62,7 @@ describe("ModMetadataEditor", () => {
           modComponentSlice.actions.UNSAFE_setModComponents([modComponent]),
         );
         dispatch(editorActions.addModComponentFormState(formState));
-        dispatch(editorActions.setActiveModId(formState.modMetadata!.id));
+        dispatch(editorActions.setActiveModId(formState.modMetadata.id));
       },
     });
 
@@ -98,7 +98,7 @@ describe("ModMetadataEditor", () => {
           modComponentSlice.actions.UNSAFE_setModComponents([modComponent]),
         );
         dispatch(editorActions.addModComponentFormState(formState));
-        dispatch(editorActions.setActiveModId(formState.modMetadata!.id));
+        dispatch(editorActions.setActiveModId(formState.modMetadata.id));
       },
     });
 
diff --git a/src/pageEditor/utils.ts b/src/pageEditor/utils.ts
index 0c2b9650ce..6338b17a18 100644
--- a/src/pageEditor/utils.ts
+++ b/src/pageEditor/utils.ts
@@ -30,7 +30,10 @@ import ForEachElement from "@/bricks/transformers/controlFlow/ForEachElement";
 import { castArray, pick, pickBy } from "lodash";
 import { type AnalysisAnnotation } from "@/analysis/analysisTypes";
 import { PIPELINE_BRICKS_FIELD_NAME } from "./consts";
-import { type ModComponentBase } from "@/types/modComponentTypes";
+import {
+  type ModComponentBase,
+  type ModMetadata,
+} from "@/types/modComponentTypes";
 import { type UUID } from "@/types/stringTypes";
 import { type RegistryId } from "@/types/registryTypes";
 import { type Brick } from "@/types/brickTypes";
@@ -47,7 +50,7 @@ import { type UnsavedModDefinition } from "@/types/modDefinitionTypes";
 export function mapModDefinitionUpsertResponseToModMetadata(
   unsavedModDefinition: UnsavedModDefinition,
   response: PackageUpsertResponse,
-): ModComponentBase["_recipe"] {
+): ModMetadata {
   return {
     ...unsavedModDefinition.metadata,
     sharing: pick(response, ["public", "organizations"]),
@@ -68,7 +71,7 @@ export function getModId(
 ): RegistryId | undefined {
   return isModComponentBase(modComponentOrFormState)
     ? modComponentOrFormState._recipe?.id
-    : modComponentOrFormState.modMetadata?.id;
+    : modComponentOrFormState.modMetadata.id;
 }
 
 /**
diff --git a/src/store/editorMigrations.test.ts b/src/store/editorMigrations.test.ts
index 591a118f48..f8d8cf0461 100644
--- a/src/store/editorMigrations.test.ts
+++ b/src/store/editorMigrations.test.ts
@@ -24,6 +24,7 @@ import {
   type EditorStateV6,
   type EditorStateV7,
   type EditorStateV8,
+  type EditorStateV9,
 } from "@/pageEditor/store/editor/pageEditorTypes";
 import { cloneDeep, mapValues, omit } from "lodash";
 import {
@@ -40,13 +41,17 @@ import {
   uuidSequence,
 } from "@/testUtils/factories/stringFactories";
 import { modMetadataFactory } from "@/testUtils/factories/modComponentFactories";
-import { validateRegistryId } from "@/types/helpers";
+import {
+  isInnerDefinitionRegistryId,
+  validateRegistryId,
+} from "@/types/helpers";
 import {
   type BaseFormStateV1,
   type BaseFormStateV2,
   type BaseFormStateV3,
   type BaseFormStateV4,
   type BaseFormStateV5,
+  type BaseFormStateV6,
   type BaseModComponentStateV1,
   type BaseModComponentStateV2,
 } from "@/pageEditor/store/editor/baseFormStateTypes";
@@ -59,6 +64,7 @@ import {
   migrateEditorStateV5,
   migrateEditorStateV6,
   migrateEditorStateV7,
+  migrateEditorStateV8,
 } from "@/store/editorMigrations";
 import { type FactoryConfig } from "cooky-cutter/dist/define";
 import { StarterBrickTypes } from "@/types/starterBrickTypes";
@@ -286,6 +292,12 @@ const initialStateV8: EditorStateV8 & PersistedState = {
   },
 };
 
+const initialStateV9: EditorStateV9 & PersistedState = {
+  ...cloneDeep(initialStateV8),
+  modComponentFormStates: [],
+  deletedModComponentFormStatesByModId: {},
+};
+
 function unmigrateServices(
   integrationDependencies: IntegrationDependencyV2[] = [],
 ): IntegrationDependencyV1[] {
@@ -420,6 +432,15 @@ function unmigrateFormStateV5toV4(formState: BaseFormStateV5): BaseFormStateV4 {
   return omit(formState, "variablesDefinition");
 }
 
+function unmigrateFormStateV6toV5(formState: BaseFormStateV6): BaseFormStateV5 {
+  return {
+    ...formState,
+    modMetadata: isInnerDefinitionRegistryId(formState.modMetadata.id)
+      ? undefined
+      : formState.modMetadata,
+  };
+}
+
 function unmigrateEditorStateV5toV4(
   state: EditorStateV5 & PersistedState,
 ): EditorStateV4 & PersistedState {
@@ -471,13 +492,27 @@ function unmigrateEditorStateV8toV7(
   };
 }
 
+function unmigrateEditorStateV9toV8(
+  state: EditorStateV9 & PersistedState,
+): EditorStateV8 & PersistedState {
+  return {
+    ...state,
+    modComponentFormStates: state.modComponentFormStates.map((formState) =>
+      unmigrateFormStateV6toV5(formState),
+    ),
+  };
+}
+
 type SimpleFactory<T> = (override?: FactoryConfig<T>) => T;
 
-const formStateFactoryV5: SimpleFactory<BaseFormStateV5> = (override) =>
+const formStateFactoryV6: SimpleFactory<BaseFormStateV6> = (override) =>
   formStateFactory({
     formStateConfig: override as FactoryConfig<InternalFormStateOverride>,
   });
 
+const formStateFactoryV5: SimpleFactory<BaseFormStateV5> = (override) =>
+  unmigrateFormStateV6toV5(formStateFactoryV6());
+
 const formStateFactoryV4: SimpleFactory<BaseFormStateV4> = (override) =>
   unmigrateFormStateV5toV4(formStateFactoryV5());
 
@@ -700,4 +735,33 @@ describe("editor state migrations", () => {
       );
     });
   });
+
+  describe("migrateEditorState V8 to V9", () => {
+    it("migrates empty state", () => {
+      expect(migrateEditorStateV8(initialStateV8)).toStrictEqual(
+        initialStateV9,
+      );
+    });
+
+    it("adds missing modMetadata", () => {
+      const expectedEditorStateV9: EditorStateV9 & PersistedState = {
+        ...initialStateV9,
+        modComponentFormStates: [formStateFactoryV6()],
+      };
+      const unmigrated = unmigrateEditorStateV9toV8(expectedEditorStateV9);
+      expect(migrateEditorStateV8(unmigrated)).toStrictEqual({
+        ...expectedEditorStateV9,
+        modComponentFormStates: [
+          {
+            ...expectedEditorStateV9.modComponentFormStates[0],
+            modMetadata: expect.objectContaining({
+              // Won't match exactly because the naming scheme is different between the factory and generation
+              id: expect.stringMatching(/@internal\/mod\/\S+/),
+              name: expect.toBeString(),
+            }),
+          },
+        ],
+      });
+    });
+  });
 });
diff --git a/src/store/editorMigrations.ts b/src/store/editorMigrations.ts
index 2929e76ad1..c0d874c085 100644
--- a/src/store/editorMigrations.ts
+++ b/src/store/editorMigrations.ts
@@ -23,6 +23,7 @@ import {
   type BaseFormStateV3,
   type BaseFormStateV4,
   type BaseFormStateV5,
+  type BaseFormStateV6,
   type BaseModComponentStateV1,
   type BaseModComponentStateV2,
 } from "@/pageEditor/store/editor/baseFormStateTypes";
@@ -40,13 +41,17 @@ import {
   type EditorStateV6,
   type EditorStateV7,
   type EditorStateV8,
+  type EditorStateV9,
 } from "@/pageEditor/store/editor/pageEditorTypes";
 import { type ModComponentFormState } from "@/pageEditor/starterBricks/formStateTypes";
 import { produce } from "immer";
 import { DataPanelTabKey } from "@/pageEditor/tabs/editTab/dataPanel/dataPanelTypes";
 import { makeInitialDataTabState } from "@/pageEditor/store/editor/uiState";
 import { type BrickConfigurationUIState } from "@/pageEditor/store/editor/uiStateTypes";
-import { emptyModVariablesDefinitionFactory } from "@/utils/modUtils";
+import {
+  createNewUnsavedModMetadata,
+  emptyModVariablesDefinitionFactory,
+} from "@/utils/modUtils";
 
 export const migrations: MigrationManifest = {
   // Redux-persist defaults to version: -1; Initialize to positive-1-indexed
@@ -60,6 +65,7 @@ export const migrations: MigrationManifest = {
   6: (state: EditorStateV5 & PersistedState) => migrateEditorStateV5(state),
   7: (state: EditorStateV6 & PersistedState) => migrateEditorStateV6(state),
   8: (state: EditorStateV7 & PersistedState) => migrateEditorStateV7(state),
+  9: (state: EditorStateV8 & PersistedState) => migrateEditorStateV8(state),
 };
 
 export function migrateIntegrationDependenciesV1toV2(
@@ -249,3 +255,18 @@ export function migrateEditorStateV7(
     }
   }) as EditorState & PersistedState;
 }
+
+export function migrateEditorStateV8(
+  state: EditorStateV8 & PersistedState,
+): EditorStateV9 & PersistedState {
+  return produce(state, (draft) => {
+    // Don't need to also loop over deletedModComponentFormStatesByModId, because there can't be any standalone
+    // mod components in there. (Standalone mods when deleted are removed from the editor state entirely.)
+    for (const formState of draft.modComponentFormStates) {
+      (formState as BaseFormStateV6).modMetadata ??=
+        createNewUnsavedModMetadata({
+          modName: formState.label,
+        });
+    }
+  }) as EditorState & PersistedState;
+}
diff --git a/src/store/modComponents/modComponentMigrations.test.ts b/src/store/modComponents/modComponentMigrations.test.ts
index 65cb823052..c00220b4e5 100644
--- a/src/store/modComponents/modComponentMigrations.test.ts
+++ b/src/store/modComponents/modComponentMigrations.test.ts
@@ -52,6 +52,7 @@ import type {
   IntegrationDependencyV2,
 } from "@/integrations/integrationTypes";
 import type { FactoryConfig } from "cooky-cutter/dist/define";
+import { array } from "cooky-cutter";
 
 const testUserScope = "@test-user";
 
@@ -118,21 +119,18 @@ describe("migrateStandaloneComponentsToMods", () => {
 
   it("returns only mod components when userScope is null", () => {
     const modMetadata = modMetadataFactory();
-    const modComponents = [
-      activatedModComponentFactory({
-        _recipe: modMetadata,
-      }),
-      activatedModComponentFactory({
-        _recipe: modMetadata,
-      }),
-      activatedModComponentFactory({
-        _recipe: modMetadata,
-      }),
-    ];
-    const standaloneComponents = [
-      activatedModComponentFactory(),
-      activatedModComponentFactory(),
-    ];
+    const modComponents = array(
+      activatedModComponentFactory,
+      3,
+    )({
+      _recipe: modMetadata,
+    });
+    const standaloneComponents = array(
+      activatedModComponentFactory,
+      2,
+    )({
+      _recipe: undefined,
+    });
 
     expect(
       migrateStandaloneComponentsToMods(
@@ -144,21 +142,20 @@ describe("migrateStandaloneComponentsToMods", () => {
 
   it("converts standalone components correctly", () => {
     const modMetadata = modMetadataFactory();
-    const modComponents = [
-      activatedModComponentFactory({
-        _recipe: modMetadata,
-      }),
-      activatedModComponentFactory({
-        _recipe: modMetadata,
-      }),
-      activatedModComponentFactory({
-        _recipe: modMetadata,
-      }),
-    ];
-    const standaloneComponents = [
-      activatedModComponentFactory(),
-      activatedModComponentFactory(),
-    ];
+    const modComponents = array(
+      activatedModComponentFactory,
+      3,
+    )({
+      _recipe: modMetadata,
+    });
+
+    const standaloneComponents = array(
+      activatedModComponentFactory,
+      2,
+    )({
+      _recipe: undefined,
+    });
+
     const migratedStandaloneComponents = standaloneComponents.map((component) =>
       createModMetadataForStandaloneComponent(component, testUserScope),
     );
@@ -390,8 +387,12 @@ describe("inferModComponentStateVersion", () => {
     // type, and have at least one "standalone" mod component present (no _recipe).
     const state: ModComponentStateV3 = {
       extensions: [
-        activatedFactoryV2(),
-        activatedFactoryV2(),
+        activatedFactoryV2({
+          _recipe: undefined,
+        }),
+        activatedFactoryV2({
+          _recipe: undefined,
+        }),
         activatedFactoryV2({
           _recipe: modMetadataFactory(),
         }),
diff --git a/src/store/modComponents/modComponentSelectors.ts b/src/store/modComponents/modComponentSelectors.ts
index c2410e33f9..baa200d2de 100644
--- a/src/store/modComponents/modComponentSelectors.ts
+++ b/src/store/modComponents/modComponentSelectors.ts
@@ -20,7 +20,6 @@ import { createSelector } from "@reduxjs/toolkit";
 import { type ActivatedModComponent } from "@/types/modComponentTypes";
 import { type RegistryId } from "@/types/registryTypes";
 import { isEmpty, memoize } from "lodash";
-import { type UUID } from "@/types/stringTypes";
 
 export function selectActivatedModComponents({
   options,
@@ -35,17 +34,6 @@ export function selectActivatedModComponents({
   return options.activatedModComponents;
 }
 
-const isModComponentSavedOnCloudSelector = createSelector(
-  selectActivatedModComponents,
-  (_state: ModComponentsRootState, modComponentId: UUID) => modComponentId,
-  (modComponents, modComponentId) =>
-    modComponents.some((modComponent) => modComponent.id === modComponentId),
-);
-
-export const selectIsModComponentSavedOnCloud =
-  (modComponentId: UUID) => (state: ModComponentsRootState) =>
-    isModComponentSavedOnCloudSelector(state, modComponentId);
-
 export const selectGetModComponentsForMod = createSelector(
   selectActivatedModComponents,
   (activatedModComponents) =>
diff --git a/src/store/sessionChanges/sessionChangesListenerMiddleware.ts b/src/store/sessionChanges/sessionChangesListenerMiddleware.ts
index a474fc2581..34a41465c0 100644
--- a/src/store/sessionChanges/sessionChangesListenerMiddleware.ts
+++ b/src/store/sessionChanges/sessionChangesListenerMiddleware.ts
@@ -34,9 +34,7 @@ sessionChangesListenerMiddleware.startListening({
     actions.editModOptionsDefinitions,
     actions.editModOptionsValues,
     actions.clearMetadataAndOptionsChangesForMod,
-    actions.addModComponentFormStateToMod,
     actions.addModComponentFormState,
-    actions.removeModComponentFormStateFromMod,
     actions.removeModData,
 
     modComponentSlice.actions.removeModComponent,
diff --git a/src/testUtils/factories/modComponentFactories.ts b/src/testUtils/factories/modComponentFactories.ts
index 783a506bc0..61ce129ad7 100644
--- a/src/testUtils/factories/modComponentFactories.ts
+++ b/src/testUtils/factories/modComponentFactories.ts
@@ -52,7 +52,7 @@ export const modComponentRefFactory = define<ModComponentRef>({
 /**
  * Factory for a mod component ref from a standalone mod component.
  * @deprecated standalone mod components are deprecated
- * @since 2.0.6 provides a internal mod id instead of `undefined`
+ * @since 2.0.6 provides an internal mod id instead of `undefined`
  */
 export const standaloneModComponentRefFactory = define<ModComponentRef>({
   // Don't repeat UUIDs across contexts
@@ -113,7 +113,8 @@ export const modComponentFactory = define<ModComponentBase>({
   apiVersion: "v3" as ApiVersion,
   extensionPointId: (n: number) =>
     validateRegistryId(`test/starter-brick-${n}`),
-  _recipe: undefined,
+  // @since 2.1.4 includes mod metadata
+  _recipe: modMetadataFactory,
   _deployment: undefined,
   label: "Test label",
   integrationDependencies(): IntegrationDependency[] {
diff --git a/src/testUtils/factories/pageEditorFactories.ts b/src/testUtils/factories/pageEditorFactories.ts
index 511fd8bad2..7993408293 100644
--- a/src/testUtils/factories/pageEditorFactories.ts
+++ b/src/testUtils/factories/pageEditorFactories.ts
@@ -56,7 +56,10 @@ import { type BaseModComponentState } from "@/pageEditor/store/editor/baseFormSt
 import { assertNotNullish } from "@/utils/nullishUtils";
 import { type Permissions } from "webextension-polyfill";
 import { validateOutputKey } from "@/runtime/runtimeTypes";
-import { emptyModVariablesDefinitionFactory } from "@/utils/modUtils";
+import {
+  createNewUnsavedModMetadata,
+  emptyModVariablesDefinitionFactory,
+} from "@/utils/modUtils";
 
 const baseModComponentStateFactory = define<BaseModComponentState>({
   brickPipeline: () => pipelineFactory(),
@@ -75,12 +78,15 @@ const internalFormStateFactory = define<InternalFormStateOverride>({
   apiVersion: "v3" as ApiVersion,
   uuid: uuidSequence,
   installed: true,
-  optionsArgs: () => ({}) as OptionsArgs,
+  optionsArgs() {
+    return {} as OptionsArgs;
+  },
   variablesDefinition: () => emptyModVariablesDefinitionFactory(),
   integrationDependencies(): IntegrationDependency[] {
     return [];
   },
-  modMetadata: undefined,
+  modMetadata: (n: number) =>
+    createNewUnsavedModMetadata({ modName: `Unsaved Mod ${n}` }),
   permissions(): Permissions.Permissions {
     return {
       permissions: [],
@@ -133,14 +139,15 @@ export const triggerFormStateFactory = (
   override?: FactoryConfig<TriggerFormState>,
   pipelineOverride?: BrickPipeline,
 ) => {
-  const defaultProps = trigger.fromNativeElement(
-    "https://test.com",
-    metadataFactory({
+  const defaultProps = trigger.fromNativeElement({
+    url: "https://test.com",
+    modMetadata: createNewUnsavedModMetadata({ modName: "Unsaved Mod" }),
+    starterBrickMetadata: metadataFactory({
       id: (n: number) => validateRegistryId(`test/extension-point-${n}`),
       name: (n: number) => `Extension Point ${n}`,
     }),
-    null,
-  );
+    element: null,
+  });
 
   return formStateFactory({
     formStateConfig: {
@@ -155,15 +162,15 @@ export const sidebarPanelFormStateFactory = (
   override?: FactoryConfig<SidebarFormState>,
   pipelineOverride?: BrickPipeline,
 ): SidebarFormState => {
-  const defaultProps = sidebar.fromNativeElement(
-    "https://test.com",
-    metadataFactory({
+  const defaultProps = sidebar.fromNativeElement({
+    url: "https://test.com",
+    modMetadata: createNewUnsavedModMetadata({ modName: "Unsaved Mod" }),
+    starterBrickMetadata: metadataFactory({
       id: (n: number) => validateRegistryId(`test/extension-point-${n}`),
       name: (n: number) => `Extension Point ${n}`,
     }),
-    // TypeScript complains if the 3rd positional argument is left off
-    undefined as never,
-  );
+    element: null,
+  });
 
   return formStateFactory({
     formStateConfig: {
@@ -178,14 +185,15 @@ export const contextMenuFormStateFactory = (
   override?: FactoryConfig<ContextMenuFormState>,
   pipelineOverride?: BrickPipeline,
 ) => {
-  const defaultProps = contextMenu.fromNativeElement(
-    "https://test.com",
-    metadataFactory({
+  const defaultProps = contextMenu.fromNativeElement({
+    url: "https://test.com",
+    modMetadata: createNewUnsavedModMetadata({ modName: "Unsaved Mod" }),
+    starterBrickMetadata: metadataFactory({
       id: (n: number) => validateRegistryId(`test/extension-point-${n}`),
       name: (n: number) => `Extension Point ${n}`,
     }),
-    null,
-  );
+    element: null,
+  });
 
   return formStateFactory({
     formStateConfig: {
@@ -200,14 +208,15 @@ export const quickbarFormStateFactory = (
   override?: FactoryConfig<QuickBarFormState>,
   pipelineOverride?: BrickPipeline,
 ) => {
-  const defaultProps = quickBar.fromNativeElement(
-    "https://test.com",
-    metadataFactory({
+  const defaultProps = quickBar.fromNativeElement({
+    url: "https://test.com",
+    modMetadata: createNewUnsavedModMetadata({ modName: "Unsaved Mod" }),
+    starterBrickMetadata: metadataFactory({
       id: (n: number) => validateRegistryId(`test/extension-point-${n}`),
       name: (n: number) => `Extension Point ${n}`,
     }),
-    null,
-  );
+    element: null,
+  });
 
   return formStateFactory({
     formStateConfig: {
@@ -222,18 +231,19 @@ export const menuItemFormStateFactory = (
   override?: FactoryConfig<ButtonFormState>,
   pipelineOverride?: BrickPipeline,
 ) => {
-  const defaultTriggerProps = menuItem.fromNativeElement(
-    "https://test.com",
-    metadataFactory({
+  const defaultTriggerProps = menuItem.fromNativeElement({
+    url: "https://test.com",
+    modMetadata: createNewUnsavedModMetadata({ modName: "Unsaved Mod" }),
+    starterBrickMetadata: metadataFactory({
       id: (n: number) => validateRegistryId(`test/extension-point-${n}`),
       name: (n: number) => `Extension Point ${n}`,
     }),
-    {
+    element: {
       item: {
         caption: "Caption for test",
       },
     } as ButtonSelectionResult,
-  );
+  });
 
   return formStateFactory({
     formStateConfig: {