From 32972f4c01b788b284266d1199fc161ee68c32ea Mon Sep 17 00:00:00 2001
From: Nicola Krumschmidt <nicola.krumschmidt@freenet.de>
Date: Thu, 22 Jul 2021 17:02:29 +0200
Subject: [PATCH] Move define extension functions to shared and expose them
 through extension-sdk (#6880)

* Move defineInterface to shared

* Split up utils into node and browser utils

* Move defineDisplay to shared

* Move defineLayout to shared

* Move defineModule to shared

* Add defineEndpoint and defineHook to define-extensions

* Expose define extension functions through extension-sdk

* Make route type of defineEndpoint more specific

* Simplify define extension functions

* Deduplicate types and local types definition

* Do not allow functional components in display handler

* Make interface options nullable

* Deduplicate extension types definition

* Fix utils/node exports
---
 .../v-field-select/v-field-select.vue         |  3 +-
 .../v-field-template/v-field-template.vue     |  3 +-
 .../v-form/form-field-interface.vue           |  3 +-
 .../components/v-form/form-field-label.vue    |  2 +-
 app/src/components/v-form/form-field-menu.vue |  2 +-
 app/src/components/v-form/form-field.vue      |  2 +-
 app/src/components/v-form/types.ts            |  3 +-
 app/src/components/v-form/v-form.vue          |  2 +-
 .../use-collection/use-collection.ts          |  3 +-
 .../use-field-tree/use-field-tree.ts          |  3 +-
 .../use-form-fields/use-form-fields.ts        |  3 +-
 app/src/composables/use-permissions.ts        |  2 +-
 app/src/displays/boolean/index.ts             |  2 +-
 app/src/displays/collection/index.ts          |  2 +-
 app/src/displays/color/index.ts               |  2 +-
 app/src/displays/datetime/index.ts            |  2 +-
 app/src/displays/define.ts                    | 13 ----
 app/src/displays/file/index.ts                |  2 +-
 app/src/displays/filesize/index.ts            |  2 +-
 .../displays/formatted-json-value/index.ts    |  2 +-
 app/src/displays/formatted-value/index.ts     |  2 +-
 app/src/displays/icon/index.ts                |  2 +-
 app/src/displays/image/index.ts               |  2 +-
 app/src/displays/index.ts                     |  2 +-
 app/src/displays/labels/index.ts              |  2 +-
 app/src/displays/mime-type/index.ts           |  2 +-
 app/src/displays/rating/index.ts              |  2 +-
 app/src/displays/raw/index.ts                 |  6 +-
 app/src/displays/register.ts                  |  2 +-
 app/src/displays/related-values/index.ts      |  6 +-
 app/src/displays/related-values/options.vue   |  3 +-
 app/src/displays/types.ts                     | 38 ----------
 app/src/displays/user/index.ts                |  2 +-
 .../_system/system-collection/index.ts        |  2 +-
 .../_system/system-collections/index.ts       |  2 +-
 .../_system/system-display-template/index.ts  |  2 +-
 .../_system/system-field-tree/index.ts        |  2 +-
 .../interfaces/_system/system-field/index.ts  |  2 +-
 .../_system/system-field/system-field.vue     |  2 +-
 .../interfaces/_system/system-folder/index.ts |  2 +-
 .../_system/system-interface-options/index.ts |  2 +-
 .../system-interface-options.vue              |  2 +-
 .../_system/system-interface/index.ts         |  2 +-
 .../system-interface/system-interface.vue     |  2 +-
 .../_system/system-language/index.ts          |  2 +-
 .../_system/system-mfa-setup/index.ts         |  2 +-
 .../interfaces/_system/system-scope/index.ts  |  2 +-
 app/src/interfaces/boolean/index.ts           |  2 +-
 app/src/interfaces/datetime/index.ts          |  2 +-
 app/src/interfaces/define.ts                  | 13 ----
 app/src/interfaces/file-image/index.ts        |  2 +-
 app/src/interfaces/file/index.ts              |  2 +-
 .../group-divider/group-divider.vue           |  3 +-
 app/src/interfaces/group-divider/index.ts     |  2 +-
 app/src/interfaces/group-raw/group-raw.vue    |  2 +-
 app/src/interfaces/group-raw/index.ts         |  2 +-
 app/src/interfaces/index.ts                   |  2 +-
 .../input-autocomplete-api/index.ts           |  2 +-
 app/src/interfaces/input-code/index.ts        |  2 +-
 app/src/interfaces/input-hash/index.ts        |  2 +-
 app/src/interfaces/input-multiline/index.ts   |  2 +-
 .../interfaces/input-rich-text-html/index.ts  |  2 +-
 .../interfaces/input-rich-text-md/index.ts    |  2 +-
 app/src/interfaces/input/index.ts             |  2 +-
 app/src/interfaces/input/options.vue          |  2 +-
 app/src/interfaces/list-m2a/index.ts          |  2 +-
 app/src/interfaces/list-m2a/list-m2a.vue      |  2 +-
 app/src/interfaces/list-m2m/index.ts          |  2 +-
 app/src/interfaces/list-m2m/list-m2m.vue      |  2 +-
 app/src/interfaces/list-m2m/options.vue       |  3 +-
 app/src/interfaces/list-m2m/use-preview.ts    |  2 +-
 app/src/interfaces/list-m2m/use-relation.ts   |  3 +-
 .../interfaces/list-o2m-tree-view/index.ts    |  2 +-
 .../interfaces/list-o2m-tree-view/options.vue |  3 +-
 app/src/interfaces/list-o2m/index.ts          |  2 +-
 app/src/interfaces/list-o2m/list-o2m.vue      |  3 +-
 app/src/interfaces/list-o2m/options.vue       |  3 +-
 app/src/interfaces/list/index.ts              |  2 +-
 app/src/interfaces/list/list.vue              |  2 +-
 app/src/interfaces/list/options.vue           |  2 +-
 .../interfaces/presentation-divider/index.ts  |  2 +-
 .../interfaces/presentation-links/index.ts    |  2 +-
 .../interfaces/presentation-notice/index.ts   |  2 +-
 app/src/interfaces/register.ts                |  4 +-
 app/src/interfaces/select-color/index.ts      |  2 +-
 .../interfaces/select-dropdown-m2o/index.ts   |  2 +-
 .../select-dropdown-m2o/options.vue           |  3 +-
 app/src/interfaces/select-dropdown/index.ts   |  2 +-
 app/src/interfaces/select-icon/index.ts       |  2 +-
 .../select-multiple-checkbox-tree/index.ts    |  5 +-
 .../select-multiple-checkbox/index.ts         |  2 +-
 .../select-multiple-dropdown/index.ts         |  2 +-
 app/src/interfaces/select-radio/index.ts      |  2 +-
 app/src/interfaces/slider/index.ts            |  2 +-
 app/src/interfaces/tags/index.ts              |  2 +-
 app/src/interfaces/translations/index.ts      |  2 +-
 app/src/interfaces/translations/options.vue   |  3 +-
 app/src/interfaces/types.ts                   | 22 ------
 app/src/layouts/calendar/index.ts             |  5 +-
 app/src/layouts/cards/components/header.vue   |  2 +-
 app/src/layouts/cards/index.ts                |  2 +-
 app/src/layouts/define.ts                     | 16 ----
 app/src/layouts/index.ts                      |  2 +-
 app/src/layouts/register.ts                   |  2 +-
 app/src/layouts/tabular/index.ts              |  4 +-
 app/src/layouts/types.ts                      | 25 -------
 app/src/modules/activity/index.ts             |  2 +-
 app/src/modules/collections/index.ts          |  2 +-
 app/src/modules/define.ts                     | 13 ----
 app/src/modules/docs/index.ts                 | 70 +++++++++---------
 app/src/modules/files/index.ts                |  2 +-
 app/src/modules/files/routes/item.vue         |  2 +-
 app/src/modules/index.ts                      |  2 +-
 app/src/modules/register.ts                   |  2 +-
 app/src/modules/settings/index.ts             |  2 +-
 .../field-detail/components/display.vue       |  3 +-
 .../field-detail/components/interface.vue     |  2 +-
 .../components/relationship-m2a.vue           |  2 +-
 .../components/relationship-m2m.vue           |  2 +-
 .../components/relationship-o2m.vue           |  2 +-
 .../field-detail/components/translations.vue  |  2 +-
 .../data-model/field-detail/field-detail.vue  |  4 +-
 .../routes/data-model/field-detail/store.ts   |  9 +--
 .../fields/components/field-select-menu.vue   |  2 +-
 .../fields/components/field-select.vue        |  3 +-
 .../fields/components/fields-management.vue   |  2 +-
 .../routes/data-model/get-local-type.ts       |  5 +-
 .../routes/data-model/new-collection.vue      |  3 +-
 .../settings/routes/roles/app-permissions.ts  |  2 +-
 .../components/permissions-overview-row.vue   |  3 +-
 .../permissions-overview-toggle.vue           |  3 +-
 .../item/components/permissions-overview.vue  |  2 +-
 .../roles/item/composables/use-permissions.ts |  2 +-
 .../composables/use-update-permissions.ts     |  3 +-
 .../permissions-detail/components/actions.vue |  2 +-
 .../permissions-detail/components/fields.vue  |  3 +-
 .../components/permissions.vue                |  2 +-
 .../permissions-detail/components/presets.vue |  2 +-
 .../components/validation.vue                 |  2 +-
 .../permissions-detail/permissions-detail.vue |  2 +-
 .../users/composables/use-navigation.ts       |  2 +-
 app/src/modules/users/index.ts                |  2 +-
 app/src/modules/users/routes/collection.vue   |  2 +-
 app/src/modules/users/routes/item.vue         |  2 +-
 app/src/shims.d.ts                            |  8 +-
 app/src/stores/fields.ts                      |  3 +-
 app/src/stores/permissions.ts                 |  2 +-
 app/src/stores/user.ts                        |  2 +-
 app/src/types/fields.ts                       | 74 -------------------
 app/src/types/index.ts                        |  2 -
 .../adjust-fields-for-displays.ts             |  3 +-
 app/src/utils/get-default-display-for-type.ts |  6 +-
 .../utils/get-default-interface-for-type.ts   |  6 +-
 app/src/utils/get-js-type.ts                  |  4 +-
 app/src/utils/is-allowed.ts                   |  2 +-
 app/src/utils/user-name.ts                    |  2 +-
 .../comments-sidebar-detail/types.ts          |  2 +-
 .../components/drawer-item/drawer-item.vue    |  3 +-
 .../filter-sidebar-detail/filter-input.vue    |  5 +-
 .../filter-sidebar-detail.vue                 |  3 +-
 .../get-available-operators-for-type.ts       |  4 +-
 .../components/module-bar/module-bar.vue      |  2 +-
 .../render-display/render-display.vue         |  2 +-
 .../render-template/render-template.vue       |  7 +-
 package-lock.json                             | 18 +++--
 packages/extension-sdk/src/index.ts           |  8 ++
 packages/shared/package.json                  | 21 ++++--
 packages/shared/src/constants/extensions.ts   | 10 +--
 packages/shared/src/constants/fields.ts       | 33 +++++++++
 packages/shared/src/constants/index.ts        |  1 +
 packages/shared/src/types/displays.ts         | 35 +++++++++
 packages/shared/src/types/endpoints.ts        |  4 +
 packages/shared/src/types/extensions.ts       | 24 ++++--
 packages/shared/src/types/fields.ts           | 45 +++++++++++
 packages/shared/src/types/hooks.ts            |  3 +
 packages/shared/src/types/index.ts            |  8 ++
 packages/shared/src/types/interfaces.ts       | 19 +++++
 packages/shared/src/types/layouts.ts          | 14 ++++
 .../shared/src/types/modules.ts               |  6 +-
 .../shared}/src/types/permissions.ts          |  0
 {app => packages/shared}/src/types/users.ts   |  0
 .../src/utils/browser/define-extension.ts     | 34 +++++++++
 packages/shared/src/utils/browser/index.ts    |  4 +
 .../src/utils/{ => browser}/is-extension.ts   | 12 +--
 .../src/utils/{ => browser}/pluralize.ts      |  2 +-
 .../validate-extension-manifest.ts            |  4 +-
 packages/shared/src/utils/index.ts            | 10 +--
 .../utils/{ => node}/ensure-extension-dirs.ts |  4 +-
 .../{ => node}/generate-extensions-entry.ts   |  2 +-
 .../src/utils/{ => node}/get-extensions.ts    |  7 +-
 packages/shared/src/utils/node/index.ts       |  5 ++
 .../src/utils/{ => node}/list-folders.ts      |  0
 .../src/utils/{ => node}/resolve-package.ts   |  0
 packages/shared/utils/browser.ts              |  1 +
 packages/shared/utils/node.ts                 |  1 +
 195 files changed, 515 insertions(+), 497 deletions(-)
 delete mode 100644 app/src/displays/define.ts
 delete mode 100644 app/src/displays/types.ts
 delete mode 100644 app/src/interfaces/define.ts
 delete mode 100644 app/src/interfaces/types.ts
 delete mode 100644 app/src/layouts/define.ts
 delete mode 100644 app/src/layouts/types.ts
 delete mode 100644 app/src/modules/define.ts
 create mode 100644 packages/shared/src/constants/fields.ts
 create mode 100644 packages/shared/src/types/displays.ts
 create mode 100644 packages/shared/src/types/endpoints.ts
 create mode 100644 packages/shared/src/types/fields.ts
 create mode 100644 packages/shared/src/types/hooks.ts
 create mode 100644 packages/shared/src/types/interfaces.ts
 rename app/src/modules/types.ts => packages/shared/src/types/modules.ts (69%)
 rename {app => packages/shared}/src/types/permissions.ts (100%)
 rename {app => packages/shared}/src/types/users.ts (100%)
 create mode 100644 packages/shared/src/utils/browser/define-extension.ts
 create mode 100644 packages/shared/src/utils/browser/index.ts
 rename packages/shared/src/utils/{ => browser}/is-extension.ts (54%)
 rename packages/shared/src/utils/{ => browser}/pluralize.ts (83%)
 rename packages/shared/src/utils/{ => browser}/validate-extension-manifest.ts (85%)
 rename packages/shared/src/utils/{ => node}/ensure-extension-dirs.ts (81%)
 rename packages/shared/src/utils/{ => node}/generate-extensions-entry.ts (90%)
 rename packages/shared/src/utils/{ => node}/get-extensions.ts (93%)
 create mode 100644 packages/shared/src/utils/node/index.ts
 rename packages/shared/src/utils/{ => node}/list-folders.ts (100%)
 rename packages/shared/src/utils/{ => node}/resolve-package.ts (100%)
 create mode 100644 packages/shared/utils/browser.ts
 create mode 100644 packages/shared/utils/node.ts

diff --git a/app/src/components/v-field-select/v-field-select.vue b/app/src/components/v-field-select/v-field-select.vue
index 7e8a4ecd1b..4d81c5dfc9 100644
--- a/app/src/components/v-field-select/v-field-select.vue
+++ b/app/src/components/v-field-select/v-field-select.vue
@@ -45,7 +45,8 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, toRefs, ref, PropType, computed } from 'vue';
 import FieldListItem from '../v-field-template/field-list-item.vue';
-import { Field, Collection, Relation } from '@/types';
+import { Collection, Relation } from '@/types';
+import { Field } from '@directus/shared/types';
 import Draggable from 'vuedraggable';
 import useFieldTree from '@/composables/use-field-tree';
 import useCollection from '@/composables/use-collection';
diff --git a/app/src/components/v-field-template/v-field-template.vue b/app/src/components/v-field-template/v-field-template.vue
index f08aebbb9b..7b8481679b 100644
--- a/app/src/components/v-field-template/v-field-template.vue
+++ b/app/src/components/v-field-template/v-field-template.vue
@@ -33,7 +33,8 @@ import { defineComponent, toRefs, ref, watch, onMounted, onUnmounted, PropType }
 import FieldListItem from './field-list-item.vue';
 import useFieldTree from '@/composables/use-field-tree';
 import { FieldTree } from './types';
-import { Field, Relation } from '@/types';
+import { Relation } from '@/types';
+import { Field } from '@directus/shared/types';
 
 export default defineComponent({
 	components: { FieldListItem },
diff --git a/app/src/components/v-form/form-field-interface.vue b/app/src/components/v-form/form-field-interface.vue
index 49de3d32bc..ae5a3ef70f 100644
--- a/app/src/components/v-form/form-field-interface.vue
+++ b/app/src/components/v-form/form-field-interface.vue
@@ -37,10 +37,9 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed } from 'vue';
-import { Field } from '@/types';
+import { Field, InterfaceConfig } from '@directus/shared/types';
 import { getInterfaces } from '@/interfaces';
 import { getDefaultInterfaceForType } from '@/utils/get-default-interface-for-type';
-import { InterfaceConfig } from '@/interfaces/types';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/components/v-form/form-field-label.vue b/app/src/components/v-form/form-field-label.vue
index 32aca3ff95..223de4ad5d 100644
--- a/app/src/components/v-form/form-field-label.vue
+++ b/app/src/components/v-form/form-field-label.vue
@@ -17,7 +17,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType } from 'vue';
-import { Field } from '@/types/';
+import { Field } from '@directus/shared/types';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/components/v-form/form-field-menu.vue b/app/src/components/v-form/form-field-menu.vue
index 8e0ca12b45..52bde20ecd 100644
--- a/app/src/components/v-form/form-field-menu.vue
+++ b/app/src/components/v-form/form-field-menu.vue
@@ -41,7 +41,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed } from 'vue';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/components/v-form/form-field.vue b/app/src/components/v-form/form-field.vue
index 521a357c35..eb3236dc12 100644
--- a/app/src/components/v-form/form-field.vue
+++ b/app/src/components/v-form/form-field.vue
@@ -65,7 +65,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed, ref } from 'vue';
-import { Field } from '@/types/';
+import { Field } from '@directus/shared/types';
 import FormFieldLabel from './form-field-label.vue';
 import FormFieldMenu from './form-field-menu.vue';
 import FormFieldInterface from './form-field-interface.vue';
diff --git a/app/src/components/v-form/types.ts b/app/src/components/v-form/types.ts
index a8fad0f126..a6f3b41e81 100644
--- a/app/src/components/v-form/types.ts
+++ b/app/src/components/v-form/types.ts
@@ -1,5 +1,4 @@
-import { Field } from '@/types';
-import { DeepPartial } from '@directus/shared/types';
+import { DeepPartial, Field } from '@directus/shared/types';
 
 export type FormField = DeepPartial<Field> & {
 	field: string;
diff --git a/app/src/components/v-form/v-form.vue b/app/src/components/v-form/v-form.vue
index 33496a80ae..b9c902b7d4 100644
--- a/app/src/components/v-form/v-form.vue
+++ b/app/src/components/v-form/v-form.vue
@@ -62,7 +62,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed, ref, provide } from 'vue';
 import { useFieldsStore } from '@/stores/';
-import { Field, FieldRaw } from '@/types';
+import { Field, FieldRaw } from '@directus/shared/types';
 import { clone, cloneDeep, isNil, merge, omit } from 'lodash';
 import useFormFields from '@/composables/use-form-fields';
 import { ValidationError } from '@/types';
diff --git a/app/src/composables/use-collection/use-collection.ts b/app/src/composables/use-collection/use-collection.ts
index a29f92e785..05d0f2e55f 100644
--- a/app/src/composables/use-collection/use-collection.ts
+++ b/app/src/composables/use-collection/use-collection.ts
@@ -1,5 +1,6 @@
 import { useCollectionsStore, useFieldsStore } from '@/stores/';
-import { Collection, Field } from '@/types';
+import { Collection } from '@/types';
+import { Field } from '@directus/shared/types';
 import { computed, ref, Ref, ComputedRef } from 'vue';
 
 type UsableCollection = {
diff --git a/app/src/composables/use-field-tree/use-field-tree.ts b/app/src/composables/use-field-tree/use-field-tree.ts
index 8ab39b6bc9..6743ff1a83 100644
--- a/app/src/composables/use-field-tree/use-field-tree.ts
+++ b/app/src/composables/use-field-tree/use-field-tree.ts
@@ -1,5 +1,6 @@
 import { useCollectionsStore, useFieldsStore, useRelationsStore } from '@/stores/';
-import { Field, Relation } from '@/types';
+import { Relation } from '@/types';
+import { Field } from '@directus/shared/types';
 import { getRelationType } from '@/utils/get-relation-type';
 import { cloneDeep, orderBy } from 'lodash';
 import { computed, Ref, ComputedRef } from 'vue';
diff --git a/app/src/composables/use-form-fields/use-form-fields.ts b/app/src/composables/use-form-fields/use-form-fields.ts
index 3930a0659f..58a99b2656 100644
--- a/app/src/composables/use-form-fields/use-form-fields.ts
+++ b/app/src/composables/use-form-fields/use-form-fields.ts
@@ -2,8 +2,7 @@
 
 import { FormField } from '@/components/v-form/types';
 import { getInterfaces } from '@/interfaces';
-import { InterfaceConfig } from '@/interfaces/types';
-import { Field } from '@/types';
+import { Field, InterfaceConfig } from '@directus/shared/types';
 import { getDefaultInterfaceForType } from '@/utils/get-default-interface-for-type';
 import { clone, orderBy } from 'lodash';
 import { computed, ComputedRef, Ref } from 'vue';
diff --git a/app/src/composables/use-permissions.ts b/app/src/composables/use-permissions.ts
index 67cb98b1e2..6850d08c81 100644
--- a/app/src/composables/use-permissions.ts
+++ b/app/src/composables/use-permissions.ts
@@ -1,5 +1,5 @@
 import { usePermissionsStore, useUserStore } from '@/stores';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 import { computed, ComputedRef, Ref } from 'vue';
 import { cloneDeep } from 'lodash';
 import { isAllowed } from '../utils/is-allowed';
diff --git a/app/src/displays/boolean/index.ts b/app/src/displays/boolean/index.ts
index 621cb04f29..f19dac29ba 100644
--- a/app/src/displays/boolean/index.ts
+++ b/app/src/displays/boolean/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayBoolean from './boolean.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/collection/index.ts b/app/src/displays/collection/index.ts
index a314a2d96e..397a29ead9 100644
--- a/app/src/displays/collection/index.ts
+++ b/app/src/displays/collection/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayCollection from './collection.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/color/index.ts b/app/src/displays/color/index.ts
index 14bd3b6b38..80a41cdb1e 100644
--- a/app/src/displays/color/index.ts
+++ b/app/src/displays/color/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayColor from './color.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/datetime/index.ts b/app/src/displays/datetime/index.ts
index c13af8f460..2804917610 100644
--- a/app/src/displays/datetime/index.ts
+++ b/app/src/displays/datetime/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayDateTime from './datetime.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/define.ts b/app/src/displays/define.ts
deleted file mode 100644
index f3d68c0fed..0000000000
--- a/app/src/displays/define.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { DisplayConfig, DisplayDefineParam } from './types';
-
-export function defineDisplay(config: DisplayDefineParam): DisplayConfig {
-	let options: DisplayConfig;
-
-	if (typeof config === 'function') {
-		options = config();
-	} else {
-		options = config;
-	}
-
-	return options;
-}
diff --git a/app/src/displays/file/index.ts b/app/src/displays/file/index.ts
index f093522d0d..44251ed77e 100644
--- a/app/src/displays/file/index.ts
+++ b/app/src/displays/file/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayFile from './file.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/filesize/index.ts b/app/src/displays/filesize/index.ts
index 0980c6edca..f66c7d9a10 100644
--- a/app/src/displays/filesize/index.ts
+++ b/app/src/displays/filesize/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import handler from './handler';
 
 export default defineDisplay({
diff --git a/app/src/displays/formatted-json-value/index.ts b/app/src/displays/formatted-json-value/index.ts
index 248c59eeb5..1a8ea5e88f 100644
--- a/app/src/displays/formatted-json-value/index.ts
+++ b/app/src/displays/formatted-json-value/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayJsonValue from './formatted-json-value.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/formatted-value/index.ts b/app/src/displays/formatted-value/index.ts
index 49c21aa5bd..cd600a140d 100644
--- a/app/src/displays/formatted-value/index.ts
+++ b/app/src/displays/formatted-value/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayFormattedValue from './formatted-value.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/icon/index.ts b/app/src/displays/icon/index.ts
index 9abf06e30d..f23352c6ea 100644
--- a/app/src/displays/icon/index.ts
+++ b/app/src/displays/icon/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayIcon from './icon.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/image/index.ts b/app/src/displays/image/index.ts
index 32c6764d46..cdeb5a0b60 100644
--- a/app/src/displays/image/index.ts
+++ b/app/src/displays/image/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayImage from './image.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/index.ts b/app/src/displays/index.ts
index ccad846772..2f9d986e9e 100644
--- a/app/src/displays/index.ts
+++ b/app/src/displays/index.ts
@@ -1,5 +1,5 @@
 import { shallowRef, Ref } from 'vue';
-import { DisplayConfig } from './types';
+import { DisplayConfig } from '@directus/shared/types';
 
 const displaysRaw: Ref<DisplayConfig[]> = shallowRef([]);
 const displays: Ref<DisplayConfig[]> = shallowRef([]);
diff --git a/app/src/displays/labels/index.ts b/app/src/displays/labels/index.ts
index 905b88645c..aa22588d77 100644
--- a/app/src/displays/labels/index.ts
+++ b/app/src/displays/labels/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayLabels from './labels.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/mime-type/index.ts b/app/src/displays/mime-type/index.ts
index 8a91ddb5ae..ea977dddae 100644
--- a/app/src/displays/mime-type/index.ts
+++ b/app/src/displays/mime-type/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import readableMimeType from '@/utils/readable-mime-type';
 import mime from 'mime/lite';
 
diff --git a/app/src/displays/rating/index.ts b/app/src/displays/rating/index.ts
index ebb7c83c3d..f1cb6d614b 100644
--- a/app/src/displays/rating/index.ts
+++ b/app/src/displays/rating/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayRating from './rating.vue';
 
 export default defineDisplay({
diff --git a/app/src/displays/raw/index.ts b/app/src/displays/raw/index.ts
index 9a0b2d863d..b0722a7585 100644
--- a/app/src/displays/raw/index.ts
+++ b/app/src/displays/raw/index.ts
@@ -1,5 +1,5 @@
-import { defineDisplay } from '@/displays/define';
-import { types } from '@/types';
+import { defineDisplay } from '@directus/shared/utils/browser';
+import { TYPES } from '@directus/shared/constants';
 
 export default defineDisplay({
 	id: 'raw',
@@ -7,5 +7,5 @@ export default defineDisplay({
 	icon: 'code',
 	handler: (value) => value,
 	options: [],
-	types: types,
+	types: TYPES,
 });
diff --git a/app/src/displays/register.ts b/app/src/displays/register.ts
index 83df6c0353..0f66442800 100644
--- a/app/src/displays/register.ts
+++ b/app/src/displays/register.ts
@@ -1,7 +1,7 @@
 import { getRootPath } from '@/utils/get-root-path';
 import { App } from 'vue';
 import { getDisplays } from './index';
-import { DisplayConfig } from './types';
+import { DisplayConfig } from '@directus/shared/types';
 
 const { displaysRaw } = getDisplays();
 
diff --git a/app/src/displays/related-values/index.ts b/app/src/displays/related-values/index.ts
index 8b7c73ef2b..ab66e1dd20 100644
--- a/app/src/displays/related-values/index.ts
+++ b/app/src/displays/related-values/index.ts
@@ -1,5 +1,5 @@
 import useCollection from '@/composables/use-collection';
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
 import { getFieldsFromTemplate } from '@/utils/get-fields-from-template';
 import getRelatedCollection from '@/utils/get-related-collection';
@@ -11,7 +11,7 @@ type Options = {
 	template: string;
 };
 
-export default defineDisplay(() => ({
+export default defineDisplay({
 	id: 'related-values',
 	name: '$t:displays.related-values.related-values',
 	description: '$t:displays.related-values.description',
@@ -36,4 +36,4 @@ export default defineDisplay(() => ({
 
 		return fields;
 	},
-}));
+});
diff --git a/app/src/displays/related-values/options.vue b/app/src/displays/related-values/options.vue
index 1b675cd485..355e478cbb 100644
--- a/app/src/displays/related-values/options.vue
+++ b/app/src/displays/related-values/options.vue
@@ -12,7 +12,8 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { Field, Relation } from '@/types';
+import { Relation } from '@/types';
+import { Field } from '@directus/shared/types';
 import { defineComponent, PropType, computed } from 'vue';
 
 export default defineComponent({
diff --git a/app/src/displays/types.ts b/app/src/displays/types.ts
deleted file mode 100644
index bc2d464c66..0000000000
--- a/app/src/displays/types.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Field, localTypes, types } from '@/types';
-import { DeepPartial } from '@directus/shared/types';
-import { Component } from 'vue';
-
-export type DisplayHandlerFunctionContext = {
-	type: string;
-};
-
-export type DisplayHandlerFunction = (
-	value: any,
-	options: any,
-	context?: DisplayHandlerFunctionContext
-) => string | null;
-
-export type DisplayFieldsFunction = (
-	options: any,
-	context: {
-		collection: string;
-		field: string;
-		type: string;
-	}
-) => string[];
-
-export interface DisplayConfig {
-	id: string;
-	name: string;
-	icon: string;
-	description?: string;
-
-	// eslint-disable-next-line @typescript-eslint/ban-types
-	handler: DisplayHandlerFunction | Component | Function;
-	options: null | DeepPartial<Field>[] | Component;
-	types: readonly typeof types[number][];
-	groups?: readonly typeof localTypes[number][];
-	fields?: string[] | DisplayFieldsFunction;
-}
-
-export type DisplayDefineParam = DisplayConfig | (() => DisplayConfig);
diff --git a/app/src/displays/user/index.ts b/app/src/displays/user/index.ts
index 0d2ec5e4e7..e729264e0f 100644
--- a/app/src/displays/user/index.ts
+++ b/app/src/displays/user/index.ts
@@ -1,4 +1,4 @@
-import { defineDisplay } from '@/displays/define';
+import { defineDisplay } from '@directus/shared/utils/browser';
 import DisplayUser from './user.vue';
 
 export default defineDisplay({
diff --git a/app/src/interfaces/_system/system-collection/index.ts b/app/src/interfaces/_system/system-collection/index.ts
index 19e6408949..febd62d9c1 100644
--- a/app/src/interfaces/_system/system-collection/index.ts
+++ b/app/src/interfaces/_system/system-collection/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemCollection from './system-collection.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/_system/system-collections/index.ts b/app/src/interfaces/_system/system-collections/index.ts
index 9ba7507bf5..ee82c3dfd9 100644
--- a/app/src/interfaces/_system/system-collections/index.ts
+++ b/app/src/interfaces/_system/system-collections/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemCollections from './system-collections.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/_system/system-display-template/index.ts b/app/src/interfaces/_system/system-display-template/index.ts
index 372ffb86d7..25b47ffba3 100644
--- a/app/src/interfaces/_system/system-display-template/index.ts
+++ b/app/src/interfaces/_system/system-display-template/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemDisplayTemplate from './system-display-template.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/_system/system-field-tree/index.ts b/app/src/interfaces/_system/system-field-tree/index.ts
index 7b7aa955fa..05b9d854ff 100644
--- a/app/src/interfaces/_system/system-field-tree/index.ts
+++ b/app/src/interfaces/_system/system-field-tree/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemFieldTree from './system-field-tree.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/_system/system-field/index.ts b/app/src/interfaces/_system/system-field/index.ts
index c2c0351dc7..386f68d6b9 100644
--- a/app/src/interfaces/_system/system-field/index.ts
+++ b/app/src/interfaces/_system/system-field/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemField from './system-field.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/_system/system-field/system-field.vue b/app/src/interfaces/_system/system-field/system-field.vue
index f006634d49..88e03c6ccf 100644
--- a/app/src/interfaces/_system/system-field/system-field.vue
+++ b/app/src/interfaces/_system/system-field/system-field.vue
@@ -20,7 +20,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, inject, ref, PropType } from 'vue';
 import { useFieldsStore } from '@/stores';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/interfaces/_system/system-folder/index.ts b/app/src/interfaces/_system/system-folder/index.ts
index 7e8ccc4193..f536875384 100644
--- a/app/src/interfaces/_system/system-folder/index.ts
+++ b/app/src/interfaces/_system/system-folder/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemFolder from './folder.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/_system/system-interface-options/index.ts b/app/src/interfaces/_system/system-interface-options/index.ts
index e7704ca30b..6bf9ade22f 100644
--- a/app/src/interfaces/_system/system-interface-options/index.ts
+++ b/app/src/interfaces/_system/system-interface-options/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemInterfaceOptions from './system-interface-options.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/_system/system-interface-options/system-interface-options.vue b/app/src/interfaces/_system/system-interface-options/system-interface-options.vue
index 14956755cb..6f154c2d0c 100644
--- a/app/src/interfaces/_system/system-interface-options/system-interface-options.vue
+++ b/app/src/interfaces/_system/system-interface-options/system-interface-options.vue
@@ -30,7 +30,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, inject, ref } from 'vue';
 import { getInterfaces } from '@/interfaces';
-import { InterfaceConfig } from '@/interfaces/types';
+import { InterfaceConfig } from '@directus/shared/types';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/interfaces/_system/system-interface/index.ts b/app/src/interfaces/_system/system-interface/index.ts
index f88ce2b68b..57ffcfb61a 100644
--- a/app/src/interfaces/_system/system-interface/index.ts
+++ b/app/src/interfaces/_system/system-interface/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemInterface from './system-interface.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/_system/system-interface/system-interface.vue b/app/src/interfaces/_system/system-interface/system-interface.vue
index 1a2420a57d..f605127bec 100644
--- a/app/src/interfaces/_system/system-interface/system-interface.vue
+++ b/app/src/interfaces/_system/system-interface/system-interface.vue
@@ -15,7 +15,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, inject, ref, watch } from 'vue';
 import { getInterfaces } from '@/interfaces';
-import { InterfaceConfig } from '@/interfaces/types';
+import { InterfaceConfig } from '@directus/shared/types';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/interfaces/_system/system-language/index.ts b/app/src/interfaces/_system/system-language/index.ts
index 6122c8fb34..b8eba21099 100644
--- a/app/src/interfaces/_system/system-language/index.ts
+++ b/app/src/interfaces/_system/system-language/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemLanguage from './system-language.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/_system/system-mfa-setup/index.ts b/app/src/interfaces/_system/system-mfa-setup/index.ts
index 3497b35b54..9840307e24 100644
--- a/app/src/interfaces/_system/system-mfa-setup/index.ts
+++ b/app/src/interfaces/_system/system-mfa-setup/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemMFASetup from './system-mfa-setup.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/_system/system-scope/index.ts b/app/src/interfaces/_system/system-scope/index.ts
index 882ce098b5..c7a50bd10a 100644
--- a/app/src/interfaces/_system/system-scope/index.ts
+++ b/app/src/interfaces/_system/system-scope/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSystemScope from './system-scope.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/boolean/index.ts b/app/src/interfaces/boolean/index.ts
index a6fd9d4d83..cb0235d83c 100644
--- a/app/src/interfaces/boolean/index.ts
+++ b/app/src/interfaces/boolean/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceBoolean from './boolean.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/datetime/index.ts b/app/src/interfaces/datetime/index.ts
index e215aee77d..cd088677c7 100644
--- a/app/src/interfaces/datetime/index.ts
+++ b/app/src/interfaces/datetime/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceDateTime from './datetime.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/define.ts b/app/src/interfaces/define.ts
deleted file mode 100644
index 5e3739dbdb..0000000000
--- a/app/src/interfaces/define.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { InterfaceConfig, InterfaceDefineParam } from './types';
-
-export function defineInterface(config: InterfaceDefineParam): InterfaceConfig {
-	let options: InterfaceConfig;
-
-	if (typeof config === 'function') {
-		options = config();
-	} else {
-		options = config;
-	}
-
-	return options;
-}
diff --git a/app/src/interfaces/file-image/index.ts b/app/src/interfaces/file-image/index.ts
index 944e2245e0..3894b9df46 100644
--- a/app/src/interfaces/file-image/index.ts
+++ b/app/src/interfaces/file-image/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceFileImage from './file-image.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/file/index.ts b/app/src/interfaces/file/index.ts
index b77a47114b..f56c34d359 100644
--- a/app/src/interfaces/file/index.ts
+++ b/app/src/interfaces/file/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '../define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceFile from './file.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/group-divider/group-divider.vue b/app/src/interfaces/group-divider/group-divider.vue
index 50ccdc575c..52ae6a3448 100644
--- a/app/src/interfaces/group-divider/group-divider.vue
+++ b/app/src/interfaces/group-divider/group-divider.vue
@@ -35,7 +35,8 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import { Field, ValidationError } from '@/types';
+import { ValidationError } from '@/types';
+import { Field } from '@directus/shared/types';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/interfaces/group-divider/index.ts b/app/src/interfaces/group-divider/index.ts
index 923b360b42..6d0cb5ce27 100644
--- a/app/src/interfaces/group-divider/index.ts
+++ b/app/src/interfaces/group-divider/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceGroupDivider from './group-divider.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/group-raw/group-raw.vue b/app/src/interfaces/group-raw/group-raw.vue
index c24c4f6a38..66e4660547 100644
--- a/app/src/interfaces/group-raw/group-raw.vue
+++ b/app/src/interfaces/group-raw/group-raw.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 import { defineComponent, PropType } from 'vue';
 import { ValidationError } from '@/types';
 
diff --git a/app/src/interfaces/group-raw/index.ts b/app/src/interfaces/group-raw/index.ts
index b327c80483..472c31ddb7 100644
--- a/app/src/interfaces/group-raw/index.ts
+++ b/app/src/interfaces/group-raw/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '../define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceGroupRaw from './group-raw.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/index.ts b/app/src/interfaces/index.ts
index 3e6eb8d2e9..2eac7a7593 100644
--- a/app/src/interfaces/index.ts
+++ b/app/src/interfaces/index.ts
@@ -1,5 +1,5 @@
 import { shallowRef, Ref } from 'vue';
-import { InterfaceConfig } from './types';
+import { InterfaceConfig } from '@directus/shared/types';
 
 const interfacesRaw: Ref<InterfaceConfig[]> = shallowRef([]);
 const interfaces: Ref<InterfaceConfig[]> = shallowRef([]);
diff --git a/app/src/interfaces/input-autocomplete-api/index.ts b/app/src/interfaces/input-autocomplete-api/index.ts
index 95703ce3be..4cb5c61ce8 100644
--- a/app/src/interfaces/input-autocomplete-api/index.ts
+++ b/app/src/interfaces/input-autocomplete-api/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceInputAutocompleteAPI from './input-autocomplete-api.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/input-code/index.ts b/app/src/interfaces/input-code/index.ts
index 5c2e63b074..68e88706fc 100644
--- a/app/src/interfaces/input-code/index.ts
+++ b/app/src/interfaces/input-code/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import CodeMirror from 'codemirror';
 import 'codemirror/mode/meta';
 import InterfaceCode from './input-code.vue';
diff --git a/app/src/interfaces/input-hash/index.ts b/app/src/interfaces/input-hash/index.ts
index 6834830511..5fbba0b170 100644
--- a/app/src/interfaces/input-hash/index.ts
+++ b/app/src/interfaces/input-hash/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceInputHash from './input-hash.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/input-multiline/index.ts b/app/src/interfaces/input-multiline/index.ts
index 1943d2935c..3c1165d732 100644
--- a/app/src/interfaces/input-multiline/index.ts
+++ b/app/src/interfaces/input-multiline/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceInputMultiline from './input-multiline.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/input-rich-text-html/index.ts b/app/src/interfaces/input-rich-text-html/index.ts
index 0d587dd3f1..b78d4eaf6c 100644
--- a/app/src/interfaces/input-rich-text-html/index.ts
+++ b/app/src/interfaces/input-rich-text-html/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import { defineAsyncComponent } from 'vue';
 
 const InterfaceWYSIWYG = defineAsyncComponent(() => import('./input-rich-text-html.vue'));
diff --git a/app/src/interfaces/input-rich-text-md/index.ts b/app/src/interfaces/input-rich-text-md/index.ts
index ce8b9d66d5..ce56441141 100644
--- a/app/src/interfaces/input-rich-text-md/index.ts
+++ b/app/src/interfaces/input-rich-text-md/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceInputRichTextMD from './input-rich-text-md.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/input/index.ts b/app/src/interfaces/input/index.ts
index c125fdec40..771817fb63 100644
--- a/app/src/interfaces/input/index.ts
+++ b/app/src/interfaces/input/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceInput from './input.vue';
 import Options from './options.vue';
 
diff --git a/app/src/interfaces/input/options.vue b/app/src/interfaces/input/options.vue
index 1484764518..0f52e794c4 100644
--- a/app/src/interfaces/input/options.vue
+++ b/app/src/interfaces/input/options.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/interfaces/list-m2a/index.ts b/app/src/interfaces/list-m2a/index.ts
index 9c89d25c09..b2a0506d8a 100644
--- a/app/src/interfaces/list-m2a/index.ts
+++ b/app/src/interfaces/list-m2a/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '../define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceListM2A from './list-m2a.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/list-m2a/list-m2a.vue b/app/src/interfaces/list-m2a/list-m2a.vue
index 457cc9bf45..d5af8b9a3c 100644
--- a/app/src/interfaces/list-m2a/list-m2a.vue
+++ b/app/src/interfaces/list-m2a/list-m2a.vue
@@ -140,7 +140,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, PropType, ref, watch } from 'vue';
 import { useRelationsStore, useCollectionsStore, useFieldsStore } from '@/stores';
-import { Relation, Collection } from '@/types/';
+import { Relation, Collection } from '@/types';
 import DrawerCollection from '@/views/private/components/drawer-collection/';
 import DrawerItem from '@/views/private/components/drawer-item/';
 import api from '@/api';
diff --git a/app/src/interfaces/list-m2m/index.ts b/app/src/interfaces/list-m2m/index.ts
index 0d38c8e5f1..5e1bbb95c6 100644
--- a/app/src/interfaces/list-m2m/index.ts
+++ b/app/src/interfaces/list-m2m/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '../define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceListM2M from './list-m2m.vue';
 import Options from './options.vue';
 
diff --git a/app/src/interfaces/list-m2m/list-m2m.vue b/app/src/interfaces/list-m2m/list-m2m.vue
index effd31761d..ff4a93e7f7 100644
--- a/app/src/interfaces/list-m2m/list-m2m.vue
+++ b/app/src/interfaces/list-m2m/list-m2m.vue
@@ -104,7 +104,7 @@ import useSort from './use-sort';
 import { getFieldsFromTemplate } from '@/utils/get-fields-from-template';
 import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
 import { usePermissionsStore, useUserStore } from '@/stores';
-import { DisplayConfig } from '@/displays/types';
+import { DisplayConfig } from '@directus/shared/types';
 
 export default defineComponent({
 	components: { DrawerItem, DrawerCollection, Draggable },
diff --git a/app/src/interfaces/list-m2m/options.vue b/app/src/interfaces/list-m2m/options.vue
index f5debb3f8a..16c5870e13 100644
--- a/app/src/interfaces/list-m2m/options.vue
+++ b/app/src/interfaces/list-m2m/options.vue
@@ -30,7 +30,8 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { Relation, Collection, Field } from '@/types';
+import { Relation, Collection } from '@/types';
+import { Field } from '@directus/shared/types';
 import { defineComponent, PropType, computed } from 'vue';
 import { useCollectionsStore } from '@/stores';
 export default defineComponent({
diff --git a/app/src/interfaces/list-m2m/use-preview.ts b/app/src/interfaces/list-m2m/use-preview.ts
index f0636bb111..bac7ebaa55 100644
--- a/app/src/interfaces/list-m2m/use-preview.ts
+++ b/app/src/interfaces/list-m2m/use-preview.ts
@@ -1,7 +1,7 @@
 import api from '@/api';
 import { Header } from '@/components/v-table/types';
 import { useFieldsStore } from '@/stores/';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 import { addRelatedPrimaryKeyToFields } from '@/utils/add-related-primary-key-to-fields';
 import { cloneDeep, get, merge } from 'lodash';
 import { Ref, ref, watch } from 'vue';
diff --git a/app/src/interfaces/list-m2m/use-relation.ts b/app/src/interfaces/list-m2m/use-relation.ts
index 60e62368f0..5c5e961061 100644
--- a/app/src/interfaces/list-m2m/use-relation.ts
+++ b/app/src/interfaces/list-m2m/use-relation.ts
@@ -1,6 +1,7 @@
 import useCollection from '@/composables/use-collection';
 import { useCollectionsStore, useRelationsStore } from '@/stores/';
-import { Collection, Field, Relation } from '@/types';
+import { Collection, Relation } from '@/types';
+import { Field } from '@directus/shared/types';
 import { computed, ComputedRef, Ref } from 'vue';
 
 export type RelationInfo = {
diff --git a/app/src/interfaces/list-o2m-tree-view/index.ts b/app/src/interfaces/list-o2m-tree-view/index.ts
index 29b27dc7b3..fe58d1fac7 100644
--- a/app/src/interfaces/list-o2m-tree-view/index.ts
+++ b/app/src/interfaces/list-o2m-tree-view/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '../define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import Options from './options.vue';
 import InterfaceListO2MTreeView from './list-o2m-tree-view.vue';
 
diff --git a/app/src/interfaces/list-o2m-tree-view/options.vue b/app/src/interfaces/list-o2m-tree-view/options.vue
index ee23730932..8e2ef8981d 100644
--- a/app/src/interfaces/list-o2m-tree-view/options.vue
+++ b/app/src/interfaces/list-o2m-tree-view/options.vue
@@ -22,7 +22,8 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { Field, Relation } from '@/types';
+import { Relation } from '@/types';
+import { Field } from '@directus/shared/types';
 import { defineComponent, PropType, computed } from 'vue';
 export default defineComponent({
 	props: {
diff --git a/app/src/interfaces/list-o2m/index.ts b/app/src/interfaces/list-o2m/index.ts
index 75b442d220..3bb2e2cf68 100644
--- a/app/src/interfaces/list-o2m/index.ts
+++ b/app/src/interfaces/list-o2m/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '../define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceListO2M from './list-o2m.vue';
 import Options from './options.vue';
 
diff --git a/app/src/interfaces/list-o2m/list-o2m.vue b/app/src/interfaces/list-o2m/list-o2m.vue
index 891a07e22e..9988389280 100644
--- a/app/src/interfaces/list-o2m/list-o2m.vue
+++ b/app/src/interfaces/list-o2m/list-o2m.vue
@@ -86,7 +86,8 @@ import useCollection from '@/composables/use-collection';
 import { useCollectionsStore, useRelationsStore, useFieldsStore, usePermissionsStore, useUserStore } from '@/stores/';
 import DrawerItem from '@/views/private/components/drawer-item';
 import DrawerCollection from '@/views/private/components/drawer-collection';
-import { Filter, Field, Relation } from '@/types';
+import { Relation } from '@/types';
+import { Filter, Field } from '@directus/shared/types';
 import { isEqual, sortBy } from 'lodash';
 import { get } from 'lodash';
 import { unexpectedError } from '@/utils/unexpected-error';
diff --git a/app/src/interfaces/list-o2m/options.vue b/app/src/interfaces/list-o2m/options.vue
index f3f58c5ee6..7344ee44aa 100644
--- a/app/src/interfaces/list-o2m/options.vue
+++ b/app/src/interfaces/list-o2m/options.vue
@@ -30,7 +30,8 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { Field, Relation, Collection } from '@/types';
+import { Relation, Collection } from '@/types';
+import { Field } from '@directus/shared/types';
 import { defineComponent, PropType, computed } from 'vue';
 import { useCollectionsStore } from '@/stores/';
 
diff --git a/app/src/interfaces/list/index.ts b/app/src/interfaces/list/index.ts
index 6a8dbef842..87e98484d3 100644
--- a/app/src/interfaces/list/index.ts
+++ b/app/src/interfaces/list/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '../define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import RepeaterOptions from './options.vue';
 import InterfaceList from './list.vue';
 
diff --git a/app/src/interfaces/list/list.vue b/app/src/interfaces/list/list.vue
index 95b91a7037..5b251dd2f6 100644
--- a/app/src/interfaces/list/list.vue
+++ b/app/src/interfaces/list/list.vue
@@ -55,7 +55,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed, ref, toRefs } from 'vue';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 import Draggable from 'vuedraggable';
 import { i18n } from '@/lang';
 import { renderStringTemplate } from '@/utils/render-string-template';
diff --git a/app/src/interfaces/list/options.vue b/app/src/interfaces/list/options.vue
index 50a0ae026a..6e7de020f7 100644
--- a/app/src/interfaces/list/options.vue
+++ b/app/src/interfaces/list/options.vue
@@ -26,7 +26,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed } from 'vue';
 import Repeater from './list.vue';
-import { Field, FieldMeta } from '@/types';
+import { Field, FieldMeta } from '@directus/shared/types';
 import { fieldTypes } from '@/modules/settings/routes/data-model/field-detail/components/schema.vue';
 import { DeepPartial } from '@directus/shared/types';
 
diff --git a/app/src/interfaces/presentation-divider/index.ts b/app/src/interfaces/presentation-divider/index.ts
index a65f63e7c5..6cb1e2f7c0 100644
--- a/app/src/interfaces/presentation-divider/index.ts
+++ b/app/src/interfaces/presentation-divider/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfacePresentationDivider from './presentation-divider.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/presentation-links/index.ts b/app/src/interfaces/presentation-links/index.ts
index 1afe35cbc6..9be7de65ca 100644
--- a/app/src/interfaces/presentation-links/index.ts
+++ b/app/src/interfaces/presentation-links/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfacePresentationLinks from './presentation-links.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/presentation-notice/index.ts b/app/src/interfaces/presentation-notice/index.ts
index a5c8f01e39..48bcdf3a4d 100644
--- a/app/src/interfaces/presentation-notice/index.ts
+++ b/app/src/interfaces/presentation-notice/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfacePresentationNotice from './presentation-notice.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/register.ts b/app/src/interfaces/register.ts
index 38a4e198c3..779b3654ef 100644
--- a/app/src/interfaces/register.ts
+++ b/app/src/interfaces/register.ts
@@ -1,7 +1,7 @@
 import { getRootPath } from '@/utils/get-root-path';
 import { App } from 'vue';
 import { getInterfaces } from './index';
-import { InterfaceConfig } from './types';
+import { InterfaceConfig } from '@directus/shared/types';
 
 const { interfacesRaw } = getInterfaces();
 
@@ -26,7 +26,7 @@ export async function registerInterfaces(app: App): Promise<void> {
 	interfacesRaw.value.forEach((inter: InterfaceConfig) => {
 		app.component('interface-' + inter.id, inter.component);
 
-		if (typeof inter.options !== 'function' && Array.isArray(inter.options) === false) {
+		if (typeof inter.options !== 'function' && Array.isArray(inter.options) === false && inter.options !== null) {
 			app.component(`interface-options-${inter.id}`, inter.options);
 		}
 	});
diff --git a/app/src/interfaces/select-color/index.ts b/app/src/interfaces/select-color/index.ts
index 600bb0888a..662238bdb8 100644
--- a/app/src/interfaces/select-color/index.ts
+++ b/app/src/interfaces/select-color/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceColor from './select-color.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/select-dropdown-m2o/index.ts b/app/src/interfaces/select-dropdown-m2o/index.ts
index 6f761fdaac..8883926305 100644
--- a/app/src/interfaces/select-dropdown-m2o/index.ts
+++ b/app/src/interfaces/select-dropdown-m2o/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '../define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSelectDropdownM2O from './select-dropdown-m2o.vue';
 import Options from './options.vue';
 
diff --git a/app/src/interfaces/select-dropdown-m2o/options.vue b/app/src/interfaces/select-dropdown-m2o/options.vue
index 5a2e5721a3..0f62292f6f 100644
--- a/app/src/interfaces/select-dropdown-m2o/options.vue
+++ b/app/src/interfaces/select-dropdown-m2o/options.vue
@@ -12,7 +12,8 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { Field, Relation } from '@/types';
+import { Relation } from '@/types';
+import { Field } from '@directus/shared/types';
 import { defineComponent, PropType, computed } from 'vue';
 
 export default defineComponent({
diff --git a/app/src/interfaces/select-dropdown/index.ts b/app/src/interfaces/select-dropdown/index.ts
index 3bf1a0750f..055be61442 100644
--- a/app/src/interfaces/select-dropdown/index.ts
+++ b/app/src/interfaces/select-dropdown/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSelectDropdown from './select-dropdown.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/select-icon/index.ts b/app/src/interfaces/select-icon/index.ts
index a3091a07e8..3cf1c07c77 100644
--- a/app/src/interfaces/select-icon/index.ts
+++ b/app/src/interfaces/select-icon/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '../define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSelectIcon from './select-icon.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/select-multiple-checkbox-tree/index.ts b/app/src/interfaces/select-multiple-checkbox-tree/index.ts
index dc9cae50a5..30eff7ad25 100644
--- a/app/src/interfaces/select-multiple-checkbox-tree/index.ts
+++ b/app/src/interfaces/select-multiple-checkbox-tree/index.ts
@@ -1,6 +1,5 @@
-import { defineInterface } from '@/interfaces/define';
-import { Field } from '@/types';
-import { DeepPartial } from '@directus/shared/types';
+import { defineInterface } from '@directus/shared/utils/browser';
+import { DeepPartial, Field } from '@directus/shared/types';
 import InterfaceSelectMultipleCheckboxesTree from './select-multiple-checkbox-tree.vue';
 
 const repeaterFields: DeepPartial<Field>[] = [
diff --git a/app/src/interfaces/select-multiple-checkbox/index.ts b/app/src/interfaces/select-multiple-checkbox/index.ts
index 91398e108c..16e2e82713 100644
--- a/app/src/interfaces/select-multiple-checkbox/index.ts
+++ b/app/src/interfaces/select-multiple-checkbox/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSelectMultipleCheckboxes from './select-multiple-checkbox.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/select-multiple-dropdown/index.ts b/app/src/interfaces/select-multiple-dropdown/index.ts
index 57c7aecac0..bf13a3e922 100644
--- a/app/src/interfaces/select-multiple-dropdown/index.ts
+++ b/app/src/interfaces/select-multiple-dropdown/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSelectMultipleDropdown from './select-multiple-dropdown.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/select-radio/index.ts b/app/src/interfaces/select-radio/index.ts
index 8a072ebce6..5c7166b4d6 100644
--- a/app/src/interfaces/select-radio/index.ts
+++ b/app/src/interfaces/select-radio/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSelectRadio from './select-radio.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/slider/index.ts b/app/src/interfaces/slider/index.ts
index b6c5a313e5..7df2e08bb7 100644
--- a/app/src/interfaces/slider/index.ts
+++ b/app/src/interfaces/slider/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceSlider from './slider.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/tags/index.ts b/app/src/interfaces/tags/index.ts
index 596f6e3b5e..1ba6baf150 100644
--- a/app/src/interfaces/tags/index.ts
+++ b/app/src/interfaces/tags/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '@/interfaces/define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import InterfaceTags from './tags.vue';
 
 export default defineInterface({
diff --git a/app/src/interfaces/translations/index.ts b/app/src/interfaces/translations/index.ts
index 7c75a20728..881518f96c 100644
--- a/app/src/interfaces/translations/index.ts
+++ b/app/src/interfaces/translations/index.ts
@@ -1,4 +1,4 @@
-import { defineInterface } from '../define';
+import { defineInterface } from '@directus/shared/utils/browser';
 import TranslationsOptions from './options.vue';
 import InterfaceTranslations from './translations.vue';
 
diff --git a/app/src/interfaces/translations/options.vue b/app/src/interfaces/translations/options.vue
index b1b984aada..f2baa9f1cf 100644
--- a/app/src/interfaces/translations/options.vue
+++ b/app/src/interfaces/translations/options.vue
@@ -33,7 +33,8 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { Field, Relation } from '@/types';
+import { Relation } from '@/types';
+import { Field } from '@directus/shared/types';
 import { defineComponent, PropType, computed } from 'vue';
 import { useCollectionsStore } from '@/stores/';
 
diff --git a/app/src/interfaces/types.ts b/app/src/interfaces/types.ts
deleted file mode 100644
index f3f9ba0861..0000000000
--- a/app/src/interfaces/types.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Field, localTypes, types } from '@/types';
-import { DeepPartial } from '@directus/shared/types';
-import { Component } from 'vue';
-
-export interface InterfaceConfig {
-	id: string;
-	name: string;
-	icon: string;
-	description?: string;
-	component: Component;
-	options: DeepPartial<Field>[] | Component;
-	types: typeof types[number][];
-	groups?: readonly typeof localTypes[number][];
-	relational?: boolean;
-	hideLabel?: boolean;
-	hideLoader?: boolean;
-	system?: boolean;
-	recommendedDisplays?: string[];
-}
-
-export type InterfaceDefineParam = InterfaceDefineParamGeneric<InterfaceConfig>;
-export type InterfaceDefineParamGeneric<T> = T | (() => T);
diff --git a/app/src/layouts/calendar/index.ts b/app/src/layouts/calendar/index.ts
index 78185e1542..5eb32e91b2 100644
--- a/app/src/layouts/calendar/index.ts
+++ b/app/src/layouts/calendar/index.ts
@@ -1,4 +1,4 @@
-import { defineLayout } from '@/layouts/define';
+import { defineLayout } from '@directus/shared/utils/browser';
 import CalendarLayout from './calendar.vue';
 import CalendarOptions from './options.vue';
 import CalendarSidebar from './sidebar.vue';
@@ -12,8 +12,7 @@ import listPlugin from '@fullcalendar/list';
 import interactionPlugin from '@fullcalendar/interaction';
 import { ref, watch, toRefs, computed, Ref } from 'vue';
 import { useAppStore } from '@/stores/app';
-import { Field } from '@/types';
-import { Item, Filter } from '@directus/shared/types';
+import { Field, Item, Filter } from '@directus/shared/types';
 import useItems from '@/composables/use-items';
 import useCollection from '@/composables/use-collection';
 import { formatISO } from 'date-fns';
diff --git a/app/src/layouts/cards/components/header.vue b/app/src/layouts/cards/components/header.vue
index 86c4cb6dc7..e867c6fc49 100644
--- a/app/src/layouts/cards/components/header.vue
+++ b/app/src/layouts/cards/components/header.vue
@@ -54,7 +54,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed } from 'vue';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 import useSync from '@/composables/use-sync';
 
 export default defineComponent({
diff --git a/app/src/layouts/cards/index.ts b/app/src/layouts/cards/index.ts
index dd63334d44..1e7f31f8d3 100644
--- a/app/src/layouts/cards/index.ts
+++ b/app/src/layouts/cards/index.ts
@@ -1,4 +1,4 @@
-import { defineLayout } from '@/layouts/define';
+import { defineLayout } from '@directus/shared/utils/browser';
 import CardsLayout from './cards.vue';
 import CardsOptions from './options.vue';
 import CardsSidebar from './sidebar.vue';
diff --git a/app/src/layouts/define.ts b/app/src/layouts/define.ts
deleted file mode 100644
index 05c3805ecf..0000000000
--- a/app/src/layouts/define.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { LayoutConfig, LayoutContext, LayoutDefineParam } from './types';
-
-export function defineLayout<Options = any, Query = any>(
-	config: LayoutDefineParam<Options, Query>
-): LayoutConfig<Options, Query> {
-	let options: LayoutConfig<Options, Query>;
-
-	if (typeof config === 'function') {
-		const context: LayoutContext = {};
-		options = config(context);
-	} else {
-		options = config;
-	}
-
-	return options;
-}
diff --git a/app/src/layouts/index.ts b/app/src/layouts/index.ts
index da1ac80f6d..26d8fc6511 100644
--- a/app/src/layouts/index.ts
+++ b/app/src/layouts/index.ts
@@ -1,5 +1,5 @@
 import { shallowRef, Ref } from 'vue';
-import { LayoutConfig } from './types';
+import { LayoutConfig } from '@directus/shared/types';
 
 const layoutsRaw: Ref<LayoutConfig[]> = shallowRef([]);
 const layouts: Ref<LayoutConfig[]> = shallowRef([]);
diff --git a/app/src/layouts/register.ts b/app/src/layouts/register.ts
index d5c341bced..f6b6e7d2c2 100644
--- a/app/src/layouts/register.ts
+++ b/app/src/layouts/register.ts
@@ -1,7 +1,7 @@
 import { getRootPath } from '@/utils/get-root-path';
 import { App } from 'vue';
 import { getLayouts } from './index';
-import { LayoutConfig } from './types';
+import { LayoutConfig } from '@directus/shared/types';
 
 const { layoutsRaw } = getLayouts();
 
diff --git a/app/src/layouts/tabular/index.ts b/app/src/layouts/tabular/index.ts
index 9e953750dc..43f74a3764 100644
--- a/app/src/layouts/tabular/index.ts
+++ b/app/src/layouts/tabular/index.ts
@@ -1,4 +1,4 @@
-import { defineLayout } from '@/layouts/define';
+import { defineLayout } from '@directus/shared/utils/browser';
 import TabularLayout from './tabular.vue';
 import TabularOptions from './options.vue';
 import TabularSidebar from './sidebar.vue';
@@ -8,7 +8,7 @@ import { useI18n } from 'vue-i18n';
 import { ref, computed, inject, watch, toRefs, ComponentPublicInstance } from 'vue';
 
 import { HeaderRaw, Item } from '@/components/v-table/types';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 import { useRouter } from 'vue-router';
 import { debounce, clone } from 'lodash';
 import useCollection from '@/composables/use-collection';
diff --git a/app/src/layouts/types.ts b/app/src/layouts/types.ts
deleted file mode 100644
index 19460621cf..0000000000
--- a/app/src/layouts/types.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Component, ComponentPublicInstance } from 'vue';
-import { LayoutProps } from '@directus/shared/types';
-
-export interface LayoutConfig<Options = any, Query = any> {
-	id: string;
-	name: string;
-	icon: string;
-	component: Component;
-	slots: {
-		options: Component;
-		sidebar: Component;
-		actions: Component;
-	};
-	setup: (LayoutOptions: LayoutProps<Options, Query>) => any;
-}
-
-export type LayoutContext = Record<string, any>;
-
-export type LayoutDefineParam<Options = any, Query = any> =
-	| LayoutConfig<Options, Query>
-	| ((context: LayoutContext) => LayoutConfig<Options, Query>);
-
-export interface LayoutComponent extends ComponentPublicInstance {
-	refresh: () => Promise<void>;
-}
diff --git a/app/src/modules/activity/index.ts b/app/src/modules/activity/index.ts
index f0816dc3b8..73b7158cc6 100644
--- a/app/src/modules/activity/index.ts
+++ b/app/src/modules/activity/index.ts
@@ -1,4 +1,4 @@
-import { defineModule } from '@/modules/define';
+import { defineModule } from '@directus/shared/utils/browser';
 import ActivityCollection from './routes/collection.vue';
 import ActivityItem from './routes/item.vue';
 
diff --git a/app/src/modules/collections/index.ts b/app/src/modules/collections/index.ts
index 2fdbab4393..4efb26c7c4 100644
--- a/app/src/modules/collections/index.ts
+++ b/app/src/modules/collections/index.ts
@@ -1,4 +1,4 @@
-import { defineModule } from '@/modules/define';
+import { defineModule } from '@directus/shared/utils/browser';
 import { addQueryToPath } from '@/utils/add-query-to-path';
 import RouterPass from '@/utils/router-passthrough';
 import { NavigationGuard } from 'vue-router';
diff --git a/app/src/modules/define.ts b/app/src/modules/define.ts
deleted file mode 100644
index 812cb74e34..0000000000
--- a/app/src/modules/define.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ModuleConfig, ModuleDefineParam } from './types';
-
-export function defineModule(config: ModuleDefineParam): ModuleConfig {
-	let options: ModuleConfig;
-
-	if (typeof config === 'function') {
-		options = config();
-	} else {
-		options = config;
-	}
-
-	return options;
-}
diff --git a/app/src/modules/docs/index.ts b/app/src/modules/docs/index.ts
index c2654bb686..86e6e5d85d 100644
--- a/app/src/modules/docs/index.ts
+++ b/app/src/modules/docs/index.ts
@@ -1,11 +1,14 @@
-import { defineModule } from '@/modules/define';
+import { defineModule } from '@directus/shared/utils/browser';
 import docs, { DocsRoutes } from '@directus/docs';
 import { RouteRecordRaw } from 'vue-router';
 import NotFound from './routes/not-found.vue';
 import StaticDocs from './routes/static.vue';
 
-export default defineModule(() => {
-	const routes: RouteRecordRaw[] = [
+export default defineModule({
+	id: 'docs',
+	name: '$t:documentation',
+	icon: 'info',
+	routes: [
 		{
 			path: '',
 			redirect: '/docs/getting-started/introduction/',
@@ -15,38 +18,31 @@ export default defineModule(() => {
 			path: ':_(.+)+',
 			component: NotFound,
 		},
-	];
-
-	return {
-		id: 'docs',
-		name: '$t:documentation',
-		icon: 'info',
-		routes,
-		order: 20,
-	};
-
-	function getRoutes(routes: DocsRoutes): RouteRecordRaw[] {
-		const updatedRoutes: RouteRecordRaw[] = [];
-
-		for (const route of routes) {
-			if (!('children' in route)) {
-				updatedRoutes.push({
-					path: route.path,
-					component: StaticDocs,
-					meta: {
-						import: route.import,
-					},
-				});
-			} else {
-				updatedRoutes.push({
-					path: route.path,
-					redirect: '/docs' + route.children![0].path,
-				});
-
-				updatedRoutes.push(...getRoutes(route.children));
-			}
-		}
-
-		return updatedRoutes;
-	}
+	],
+	order: 20,
 });
+
+function getRoutes(routes: DocsRoutes): RouteRecordRaw[] {
+	const updatedRoutes: RouteRecordRaw[] = [];
+
+	for (const route of routes) {
+		if (!('children' in route)) {
+			updatedRoutes.push({
+				path: route.path,
+				component: StaticDocs,
+				meta: {
+					import: route.import,
+				},
+			});
+		} else {
+			updatedRoutes.push({
+				path: route.path,
+				redirect: `/docs${route.children[0].path}`,
+			});
+
+			updatedRoutes.push(...getRoutes(route.children));
+		}
+	}
+
+	return updatedRoutes;
+}
diff --git a/app/src/modules/files/index.ts b/app/src/modules/files/index.ts
index c7dbf871db..7b75af6ac9 100644
--- a/app/src/modules/files/index.ts
+++ b/app/src/modules/files/index.ts
@@ -1,4 +1,4 @@
-import { defineModule } from '@/modules/define';
+import { defineModule } from '@directus/shared/utils/browser';
 import AddNew from './routes/add-new.vue';
 import Collection from './routes/collection.vue';
 import Item from './routes/item.vue';
diff --git a/app/src/modules/files/routes/item.vue b/app/src/modules/files/routes/item.vue
index 96add0ee25..bd5444a947 100644
--- a/app/src/modules/files/routes/item.vue
+++ b/app/src/modules/files/routes/item.vue
@@ -185,7 +185,7 @@ import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 import FilePreview from '@/views/private/components/file-preview';
 import ImageEditor from '@/views/private/components/image-editor';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 import FileInfoSidebarDetail from '../components/file-info-sidebar-detail.vue';
 import FolderPicker from '../components/folder-picker.vue';
 import api, { addTokenToURL } from '@/api';
diff --git a/app/src/modules/index.ts b/app/src/modules/index.ts
index 1402e518c9..6770dc8e57 100644
--- a/app/src/modules/index.ts
+++ b/app/src/modules/index.ts
@@ -1,5 +1,5 @@
 import { shallowRef, Ref } from 'vue';
-import { ModuleConfig } from './types';
+import { ModuleConfig } from '@directus/shared/types';
 
 const modulesRaw: Ref<ModuleConfig[]> = shallowRef([]);
 const modules: Ref<ModuleConfig[]> = shallowRef([]);
diff --git a/app/src/modules/register.ts b/app/src/modules/register.ts
index dbf642329e..c1311124a1 100644
--- a/app/src/modules/register.ts
+++ b/app/src/modules/register.ts
@@ -3,7 +3,7 @@ import { usePermissionsStore, useUserStore } from '@/stores';
 import { getRootPath } from '@/utils/get-root-path';
 import RouterPass from '@/utils/router-passthrough';
 import { getModules } from './index';
-import { ModuleConfig } from './types';
+import { ModuleConfig } from '@directus/shared/types';
 
 const { modulesRaw } = getModules();
 
diff --git a/app/src/modules/settings/index.ts b/app/src/modules/settings/index.ts
index 79cfbf0f1a..dbc0559d0d 100644
--- a/app/src/modules/settings/index.ts
+++ b/app/src/modules/settings/index.ts
@@ -1,6 +1,6 @@
 import api from '@/api';
 import { useCollection } from '@/composables/use-collection';
-import { defineModule } from '@/modules/define';
+import { defineModule } from '@directus/shared/utils/browser';
 import { useCollectionsStore, useFieldsStore } from '@/stores';
 import RouterPass from '@/utils/router-passthrough';
 import { ref } from 'vue';
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/display.vue b/app/src/modules/settings/routes/data-model/field-detail/components/display.vue
index b0f36c36bf..00935d2e12 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/display.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/display.vue
@@ -44,8 +44,7 @@ import { FancySelectItem } from '@/components/v-fancy-select/types';
 import { clone } from 'lodash';
 
 import { state, availableDisplays } from '../store';
-import { InterfaceConfig } from '@/interfaces/types';
-import { DisplayConfig } from '@/displays/types';
+import { InterfaceConfig, DisplayConfig } from '@directus/shared/types';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue b/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
index b979197f0c..edc8dfaecd 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
@@ -42,7 +42,7 @@ import { getInterfaces } from '@/interfaces';
 import { FancySelectItem } from '@/components/v-fancy-select/types';
 
 import { state, availableInterfaces } from '../store';
-import { InterfaceConfig } from '@/interfaces/types';
+import { InterfaceConfig } from '@directus/shared/types';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2a.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2a.vue
index da9fa335c9..c9be8ad3b2 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2a.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2a.vue
@@ -338,7 +338,7 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, computed } from 'vue';
 import { orderBy } from 'lodash';
 import { useCollectionsStore, useFieldsStore } from '@/stores/';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 import formatTitle from '@directus/format-title';
 
 import { state, generationInfo } from '../store';
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
index deca97e717..c0737306e5 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
@@ -397,7 +397,7 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, computed } from 'vue';
 import { orderBy } from 'lodash';
 import { useCollectionsStore, useFieldsStore } from '@/stores/';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 
 import { state, generationInfo } from '../store';
 import formatTitle from '@directus/format-title';
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
index d7174e808a..effd1851bd 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
@@ -241,7 +241,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed } from 'vue';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 import { useFieldsStore, useCollectionsStore } from '@/stores';
 import { orderBy } from 'lodash';
 import { state, generationInfo } from '../store';
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue b/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
index 957eba10e4..728dff5f32 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
@@ -315,7 +315,7 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, computed } from 'vue';
 import { orderBy } from 'lodash';
 import { useCollectionsStore, useFieldsStore } from '@/stores/';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 import formatTitle from '@directus/format-title';
 
 import { state } from '../store';
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
index 74e8ca6d97..1ff356b8b0 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
@@ -134,7 +134,7 @@ import useCollection from '@/composables/use-collection';
 import { getLocalTypeForField } from '../get-local-type';
 import { notify } from '@/utils/notify';
 import formatTitle from '@directus/format-title';
-import { localTypes } from '@/types';
+import { LocalType } from '@directus/shared/types';
 
 import { initLocalStore, state, clearLocalStore } from './store';
 import { unexpectedError } from '@/utils/unexpected-error';
@@ -160,7 +160,7 @@ export default defineComponent({
 			required: true,
 		},
 		type: {
-			type: String as PropType<typeof localTypes[number]>,
+			type: String as PropType<LocalType>,
 			default: null,
 		},
 	},
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store.ts b/app/src/modules/settings/routes/data-model/field-detail/store.ts
index 58f0c8e84d..7a4e2792f1 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/store.ts
+++ b/app/src/modules/settings/routes/data-model/field-detail/store.ts
@@ -6,12 +6,11 @@
  */
 
 import { getDisplays } from '@/displays';
-import { DisplayConfig } from '@/displays/types';
 import { getInterfaces } from '@/interfaces';
-import { InterfaceConfig } from '@/interfaces/types';
+import { DeepPartial, DisplayConfig, Field, InterfaceConfig, Item, LocalType } from '@directus/shared/types';
 import { useCollectionsStore, useFieldsStore, useRelationsStore } from '@/stores/';
-import { Collection, Field, localTypes, Relation } from '@/types';
-import { DeepPartial, Item } from '@directus/shared/types';
+import { Collection, Relation } from '@/types';
+
 import { clone, throttle } from 'lodash';
 import { computed, ComputedRef, nextTick, reactive, watch, WatchStopHandle } from 'vue';
 
@@ -36,7 +35,7 @@ let generationInfo: ComputedRef<GenerationInfo[]>;
 
 export { state, availableInterfaces, availableDisplays, generationInfo, initLocalStore, clearLocalStore };
 
-function initLocalStore(collection: string, field: string, type: typeof localTypes[number]): void {
+function initLocalStore(collection: string, field: string, type: LocalType): void {
 	const fieldsStore = useFieldsStore();
 	const relationsStore = useRelationsStore();
 	const collectionsStore = useCollectionsStore();
diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select-menu.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select-menu.vue
index 5f33393469..a96cde9816 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select-menu.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select-menu.vue
@@ -78,7 +78,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 import { useI18n } from 'vue-i18n';
 import { getLocalTypeForField } from '../../get-local-type';
 
diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
index 7649763b21..300321233d 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
@@ -134,7 +134,6 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, ref, computed } from 'vue';
-import { Field } from '@/types';
 import { useCollectionsStore, useFieldsStore } from '@/stores/';
 import { getInterfaces } from '@/interfaces';
 import { useRouter } from 'vue-router';
@@ -142,7 +141,7 @@ import { cloneDeep } from 'lodash';
 import { getLocalTypeForField } from '../../get-local-type';
 import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
-import { InterfaceConfig } from '@/interfaces/types';
+import { Field, InterfaceConfig } from '@directus/shared/types';
 import FieldSelectMenu from './field-select-menu.vue';
 import hideDragImage from '@/utils/hide-drag-image';
 import Draggable from 'vuedraggable';
diff --git a/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue b/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
index 27a493280c..0aca99fe09 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
@@ -61,7 +61,7 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, toRefs } from 'vue';
 import useCollection from '@/composables/use-collection/';
 import Draggable from 'vuedraggable';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 import { useFieldsStore } from '@/stores/';
 import FieldSelect from './field-select.vue';
 import hideDragImage from '@/utils/hide-drag-image';
diff --git a/app/src/modules/settings/routes/data-model/get-local-type.ts b/app/src/modules/settings/routes/data-model/get-local-type.ts
index 3ab6e831e5..d3c40a908d 100644
--- a/app/src/modules/settings/routes/data-model/get-local-type.ts
+++ b/app/src/modules/settings/routes/data-model/get-local-type.ts
@@ -1,7 +1,8 @@
 import { useFieldsStore, useRelationsStore } from '@/stores';
-import { localTypes, Relation } from '@/types';
+import { Relation } from '@/types';
+import { LocalType } from '@directus/shared/types';
 
-export function getLocalTypeForField(collection: string, field: string): typeof localTypes[number] | null {
+export function getLocalTypeForField(collection: string, field: string): LocalType | null {
 	const fieldsStore = useFieldsStore();
 	const relationsStore = useRelationsStore();
 
diff --git a/app/src/modules/settings/routes/data-model/new-collection.vue b/app/src/modules/settings/routes/data-model/new-collection.vue
index 94337cf4f5..c04f8cba08 100644
--- a/app/src/modules/settings/routes/data-model/new-collection.vue
+++ b/app/src/modules/settings/routes/data-model/new-collection.vue
@@ -124,7 +124,8 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, ref, reactive } from 'vue';
 import api from '@/api';
-import { Field, Relation } from '@/types';
+import { Relation } from '@/types';
+import { Field } from '@directus/shared/types';
 import { useFieldsStore, useCollectionsStore, useRelationsStore } from '@/stores/';
 import { notify } from '@/utils/notify';
 import { useDialogRoute } from '@/composables/use-dialog-route';
diff --git a/app/src/modules/settings/routes/roles/app-permissions.ts b/app/src/modules/settings/routes/roles/app-permissions.ts
index 542bb07c5f..ace127db09 100644
--- a/app/src/modules/settings/routes/roles/app-permissions.ts
+++ b/app/src/modules/settings/routes/roles/app-permissions.ts
@@ -1,4 +1,4 @@
-import { Permission } from '@/types';
+import { Permission } from '@directus/shared/types';
 
 export const appRecommendedPermissions: Partial<Permission>[] = [
 	{
diff --git a/app/src/modules/settings/routes/roles/item/components/permissions-overview-row.vue b/app/src/modules/settings/routes/roles/item/components/permissions-overview-row.vue
index 9dc7aac502..4688d37593 100644
--- a/app/src/modules/settings/routes/roles/item/components/permissions-overview-row.vue
+++ b/app/src/modules/settings/routes/roles/item/components/permissions-overview-row.vue
@@ -47,7 +47,8 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, toRefs } from 'vue';
-import { Collection, Permission } from '@/types';
+import { Permission } from '@directus/shared/types';
+import { Collection } from '@/types';
 import PermissionsOverviewToggle from './permissions-overview-toggle.vue';
 import useUpdatePermissions from '../composables/use-update-permissions';
 
diff --git a/app/src/modules/settings/routes/roles/item/components/permissions-overview-toggle.vue b/app/src/modules/settings/routes/roles/item/components/permissions-overview-toggle.vue
index 78f1531137..271032cd5e 100644
--- a/app/src/modules/settings/routes/roles/item/components/permissions-overview-toggle.vue
+++ b/app/src/modules/settings/routes/roles/item/components/permissions-overview-toggle.vue
@@ -66,7 +66,8 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed, inject, ref, toRefs } from 'vue';
-import { Collection, Permission } from '@/types';
+import { Permission } from '@directus/shared/types';
+import { Collection } from '@/types';
 import api from '@/api';
 import { useRouter } from 'vue-router';
 import useUpdatePermissions from '../composables/use-update-permissions';
diff --git a/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue b/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue
index bacd94d9e7..75cf91f046 100644
--- a/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue
+++ b/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue
@@ -68,7 +68,7 @@ import { defineComponent, computed, ref, provide, watch } from 'vue';
 import { useCollectionsStore } from '@/stores';
 import PermissionsOverviewHeader from './permissions-overview-header.vue';
 import PermissionsOverviewRow from './permissions-overview-row.vue';
-import { Permission } from '@/types';
+import { Permission } from '@directus/shared/types';
 import api from '@/api';
 import { appRecommendedPermissions, appMinimalPermissions } from '../../app-permissions';
 import { unexpectedError } from '@/utils/unexpected-error';
diff --git a/app/src/modules/settings/routes/roles/item/composables/use-permissions.ts b/app/src/modules/settings/routes/roles/item/composables/use-permissions.ts
index e6067aeb7f..d1d55c970c 100644
--- a/app/src/modules/settings/routes/roles/item/composables/use-permissions.ts
+++ b/app/src/modules/settings/routes/roles/item/composables/use-permissions.ts
@@ -1,5 +1,5 @@
 import api from '@/api';
-import { Permission } from '@/types';
+import { Permission } from '@directus/shared/types';
 import { ref, Ref, watch } from 'vue';
 
 type UsablePermissions = {
diff --git a/app/src/modules/settings/routes/roles/item/composables/use-update-permissions.ts b/app/src/modules/settings/routes/roles/item/composables/use-update-permissions.ts
index d5ac9d402e..b092182cf1 100644
--- a/app/src/modules/settings/routes/roles/item/composables/use-update-permissions.ts
+++ b/app/src/modules/settings/routes/roles/item/composables/use-update-permissions.ts
@@ -1,5 +1,6 @@
 import api from '@/api';
-import { Collection, Permission } from '@/types';
+import { Collection } from '@/types';
+import { Permission } from '@directus/shared/types';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { inject, ref, Ref } from 'vue';
 
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/actions.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/actions.vue
index 2cd6e500ea..f40e882483 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/actions.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/actions.vue
@@ -9,7 +9,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, ref } from 'vue';
-import { Permission } from '@/types';
+import { Permission } from '@directus/shared/types';
 import api from '@/api';
 import { useRouter } from 'vue-router';
 import { unexpectedError } from '@/utils/unexpected-error';
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
index 5d99b75719..a1d48fe9a1 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
@@ -28,7 +28,8 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed } from 'vue';
-import { Permission, Field, Role } from '@/types';
+import { Permission, Role } from '@directus/shared/types';
+import { Field } from '@directus/shared/types';
 import useSync from '@/composables/use-sync';
 import { useFieldsStore } from '@/stores';
 
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
index 2109c9856c..af6f593273 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
@@ -22,7 +22,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed } from 'vue';
-import { Permission, Role } from '@/types';
+import { Permission, Role } from '@directus/shared/types';
 import useSync from '@/composables/use-sync';
 
 export default defineComponent({
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue
index 17ae109104..9a2cd7e068 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue
@@ -15,7 +15,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed } from 'vue';
-import { Permission, Role } from '@/types';
+import { Permission, Role } from '@directus/shared/types';
 import useSync from '@/composables/use-sync';
 
 export default defineComponent({
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue
index 5d7a429153..ba5a5a7447 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue
@@ -16,7 +16,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed } from 'vue';
-import { Permission, Role } from '@/types';
+import { Permission, Role } from '@directus/shared/types';
 import useSync from '@/composables/use-sync';
 
 export default defineComponent({
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue b/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
index db6ee64447..e4eebda68f 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
@@ -48,7 +48,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, ref, computed, watch } from 'vue';
 import api from '@/api';
-import { Permission, Role } from '@/types';
+import { Permission, Role } from '@directus/shared/types';
 import { useCollectionsStore } from '@/stores/';
 import { useRouter } from 'vue-router';
 import Actions from './components/actions.vue';
diff --git a/app/src/modules/users/composables/use-navigation.ts b/app/src/modules/users/composables/use-navigation.ts
index 857ea67bdf..783a1f9e87 100644
--- a/app/src/modules/users/composables/use-navigation.ts
+++ b/app/src/modules/users/composables/use-navigation.ts
@@ -1,5 +1,5 @@
 import api from '@/api';
-import { Role } from '@/types';
+import { Role } from '@directus/shared/types';
 import { ref, Ref } from 'vue';
 
 let roles: Ref<Role[] | null> | null = null;
diff --git a/app/src/modules/users/index.ts b/app/src/modules/users/index.ts
index 8b8d2aad61..e2b1d3b765 100644
--- a/app/src/modules/users/index.ts
+++ b/app/src/modules/users/index.ts
@@ -1,4 +1,4 @@
-import { defineModule } from '@/modules/define';
+import { defineModule } from '@directus/shared/utils/browser';
 import Collection from './routes/collection.vue';
 import Item from './routes/item.vue';
 
diff --git a/app/src/modules/users/routes/collection.vue b/app/src/modules/users/routes/collection.vue
index 0c79afdcb3..e7ba9097cf 100644
--- a/app/src/modules/users/routes/collection.vue
+++ b/app/src/modules/users/routes/collection.vue
@@ -140,7 +140,7 @@ import { useUserStore, usePermissionsStore } from '@/stores';
 import useNavigation from '../composables/use-navigation';
 import { useLayout } from '@/composables/use-layout';
 import DrawerBatch from '@/views/private/components/drawer-batch';
-import { Role } from '@/types';
+import { Role } from '@directus/shared/types';
 
 type Item = {
 	[field: string]: any;
diff --git a/app/src/modules/users/routes/item.vue b/app/src/modules/users/routes/item.vue
index 786d919f3f..1c56f46ade 100644
--- a/app/src/modules/users/routes/item.vue
+++ b/app/src/modules/users/routes/item.vue
@@ -186,7 +186,7 @@ import SaveOptions from '@/views/private/components/save-options';
 import api from '@/api';
 import { useFieldsStore, useCollectionsStore } from '@/stores/';
 import useFormFields from '@/composables/use-form-fields';
-import { Field } from '@/types';
+import { Field } from '@directus/shared/types';
 import UserInfoSidebarDetail from '../components/user-info-sidebar-detail.vue';
 import { getRootPath } from '@/utils/get-root-path';
 import useShortcut from '@/composables/use-shortcut';
diff --git a/app/src/shims.d.ts b/app/src/shims.d.ts
index fc085a22ad..7585c11c75 100644
--- a/app/src/shims.d.ts
+++ b/app/src/shims.d.ts
@@ -26,25 +26,25 @@ declare module 'jsonlint-mod' {
 }
 
 declare module '@directus-extensions-interface' {
-	import { InterfaceConfig } from '@/interfaces/types';
+	import { InterfaceConfig } from '@directus/shared/types';
 	const interfaces: InterfaceConfig[];
 	export default interfaces;
 }
 
 declare module '@directus-extensions-display' {
-	import { DisplayConfig } from '@/displays/types';
+	import { DisplayConfig } from '@directus/shared/types';
 	const displays: DisplayConfig[];
 	export default displays;
 }
 
 declare module '@directus-extensions-layout' {
-	import { LayoutConfig } from '@/layouts/types';
+	import { LayoutConfig } from '@directus/shared/types';
 	const layouts: LayoutConfig[];
 	export default layouts;
 }
 
 declare module '@directus-extensions-module' {
-	import { ModuleConfig } from '@/modules/types';
+	import { ModuleConfig } from '@directus/shared/types';
 	const modules: ModuleConfig[];
 	export default modules;
 }
diff --git a/app/src/stores/fields.ts b/app/src/stores/fields.ts
index e819c25f53..caae397f67 100644
--- a/app/src/stores/fields.ts
+++ b/app/src/stores/fields.ts
@@ -1,7 +1,8 @@
 import api from '@/api';
 import { i18n } from '@/lang';
 import { useRelationsStore } from '@/stores/';
-import { Field, FieldRaw, Relation } from '@/types';
+import { Relation } from '@/types';
+import { Field, FieldRaw } from '@directus/shared/types';
 import { notEmpty } from '@/utils/is-empty/';
 import { unexpectedError } from '@/utils/unexpected-error';
 import formatTitle from '@directus/format-title';
diff --git a/app/src/stores/permissions.ts b/app/src/stores/permissions.ts
index 24297d0dad..488d2ab7c8 100644
--- a/app/src/stores/permissions.ts
+++ b/app/src/stores/permissions.ts
@@ -1,5 +1,5 @@
 import api from '@/api';
-import { Permission } from '@/types';
+import { Permission } from '@directus/shared/types';
 import { parseFilter } from '@/utils/parse-filter';
 import { defineStore } from 'pinia';
 import { useUserStore } from '../stores/user';
diff --git a/app/src/stores/user.ts b/app/src/stores/user.ts
index 348bd5d96d..bfd67dbc90 100644
--- a/app/src/stores/user.ts
+++ b/app/src/stores/user.ts
@@ -1,6 +1,6 @@
 import api from '@/api';
 import { useLatencyStore } from '@/stores';
-import { User } from '@/types';
+import { User } from '@directus/shared/types';
 import { userName } from '@/utils/user-name';
 import { defineStore } from 'pinia';
 
diff --git a/app/src/types/fields.ts b/app/src/types/fields.ts
index 4aef0b6fe1..3ddef96858 100644
--- a/app/src/types/fields.ts
+++ b/app/src/types/fields.ts
@@ -1,79 +1,5 @@
-import { Column } from 'knex-schema-inspector/dist/types/column';
 import { FilterOperator } from '@directus/shared/types';
 
-type Translations = {
-	language: string;
-	translation: string;
-};
-
-export type Width = 'half' | 'half-left' | 'half-right' | 'full' | 'fill';
-
-export const types = [
-	'alias',
-	'bigInteger',
-	'boolean',
-	'date',
-	'dateTime',
-	'decimal',
-	'float',
-	'integer',
-	'json',
-	'string',
-	'text',
-	'time',
-	'timestamp',
-	'binary',
-	'uuid',
-	'hash',
-	'csv',
-	'unknown',
-] as const;
-
-export const localTypes = [
-	'standard',
-	'file',
-	'files',
-	'm2o',
-	'o2m',
-	'm2m',
-	'm2a',
-	'presentation',
-	'translations',
-	'group',
-] as const;
-
-export type FieldMeta = {
-	id: number;
-	collection: string;
-	field: string;
-	group: number | null;
-	hidden: boolean;
-	interface: string | null;
-	display: string | null;
-	options: null | Record<string, any>;
-	display_options: null | Record<string, any>;
-	readonly: boolean;
-	sort: number | null;
-	special: string[] | null;
-	translations: null | Translations[];
-	width: Width | null;
-	note: string | null;
-	system?: true;
-};
-
-export interface FieldRaw {
-	collection: string;
-	field: string;
-	type: typeof types[number];
-	schema: Column | null;
-	meta: FieldMeta | null;
-}
-
-export interface Field extends FieldRaw {
-	name: string;
-	children?: Field[] | null;
-}
-
 export type ValidationError = {
 	code: string;
 	field: string;
diff --git a/app/src/types/index.ts b/app/src/types/index.ts
index d46fdcf8f8..72feface87 100644
--- a/app/src/types/index.ts
+++ b/app/src/types/index.ts
@@ -2,6 +2,4 @@ export * from './collections';
 export * from './error';
 export * from './fields';
 export * from './notifications';
-export * from './permissions';
 export * from './relations';
-export * from './users';
diff --git a/app/src/utils/adjust-fields-for-displays/adjust-fields-for-displays.ts b/app/src/utils/adjust-fields-for-displays/adjust-fields-for-displays.ts
index 9c74d99fb7..03002f5c10 100644
--- a/app/src/utils/adjust-fields-for-displays/adjust-fields-for-displays.ts
+++ b/app/src/utils/adjust-fields-for-displays/adjust-fields-for-displays.ts
@@ -1,7 +1,6 @@
 import { getDisplays } from '@/displays';
-import { DisplayConfig } from '@/displays/types';
 import { useFieldsStore } from '@/stores/';
-import { Field } from '@/types/';
+import { DisplayConfig, Field } from '@directus/shared/types';
 
 export default function adjustFieldsForDisplays(fields: readonly string[], parentCollection: string): string[] {
 	const fieldsStore = useFieldsStore();
diff --git a/app/src/utils/get-default-display-for-type.ts b/app/src/utils/get-default-display-for-type.ts
index 9eb3a83cb5..21d1b64a3a 100644
--- a/app/src/utils/get-default-display-for-type.ts
+++ b/app/src/utils/get-default-display-for-type.ts
@@ -1,6 +1,6 @@
-import { types } from '@/types';
+import { Type } from '@directus/shared/types';
 
-const defaultDisplayMap: Record<typeof types[number], string> = {
+const defaultDisplayMap: Record<Type, string> = {
 	alias: 'raw',
 	bigInteger: 'formatted-value',
 	binary: 'raw',
@@ -21,6 +21,6 @@ const defaultDisplayMap: Record<typeof types[number], string> = {
 	hash: 'formatted-value',
 };
 
-export function getDefaultDisplayForType(type: typeof types[number]): string {
+export function getDefaultDisplayForType(type: Type): string {
 	return defaultDisplayMap[type] || 'raw';
 }
diff --git a/app/src/utils/get-default-interface-for-type.ts b/app/src/utils/get-default-interface-for-type.ts
index d4bd433ae8..bfcffd36c9 100644
--- a/app/src/utils/get-default-interface-for-type.ts
+++ b/app/src/utils/get-default-interface-for-type.ts
@@ -1,6 +1,6 @@
-import { types } from '@/types';
+import { Type } from '@directus/shared/types';
 
-const defaultInterfaceMap: Record<typeof types[number], string> = {
+const defaultInterfaceMap: Record<Type, string> = {
 	alias: 'input',
 	bigInteger: 'input',
 	binary: 'input',
@@ -21,6 +21,6 @@ const defaultInterfaceMap: Record<typeof types[number], string> = {
 	hash: 'input-hash',
 };
 
-export function getDefaultInterfaceForType(type: typeof types[number]): string {
+export function getDefaultInterfaceForType(type: Type): string {
 	return defaultInterfaceMap[type] || 'input';
 }
diff --git a/app/src/utils/get-js-type.ts b/app/src/utils/get-js-type.ts
index ba8f162b85..66e1b050a7 100644
--- a/app/src/utils/get-js-type.ts
+++ b/app/src/utils/get-js-type.ts
@@ -1,6 +1,6 @@
-import { types } from '@/types';
+import { Type } from '@directus/shared/types';
 
-export function getJSType(type: typeof types[number]): string {
+export function getJSType(type: Type): string {
 	if (['bigInteger', 'integer', 'float', 'decimal'].includes(type)) return 'number';
 	if (['string', 'text', 'uuid', 'hash'].includes(type)) return 'string';
 	if (['boolean'].includes(type)) return 'boolean';
diff --git a/app/src/utils/is-allowed.ts b/app/src/utils/is-allowed.ts
index a72e155b40..aa99c1d6a5 100644
--- a/app/src/utils/is-allowed.ts
+++ b/app/src/utils/is-allowed.ts
@@ -1,5 +1,5 @@
 import { usePermissionsStore, useUserStore } from '@/stores';
-import { Permission } from '@/types';
+import { Permission } from '@directus/shared/types';
 import generateJoi from '@/utils/generate-joi';
 
 export function isAllowed(
diff --git a/app/src/utils/user-name.ts b/app/src/utils/user-name.ts
index 2a476cac18..e6b4b104f1 100644
--- a/app/src/utils/user-name.ts
+++ b/app/src/utils/user-name.ts
@@ -1,5 +1,5 @@
 import { i18n } from '@/lang';
-import { User } from '@/types';
+import { User } from '@directus/shared/types';
 
 export function userName(user: Partial<User>): string {
 	if (user.first_name && user.last_name) {
diff --git a/app/src/views/private/components/comments-sidebar-detail/types.ts b/app/src/views/private/components/comments-sidebar-detail/types.ts
index 676b5bb968..e312181b54 100644
--- a/app/src/views/private/components/comments-sidebar-detail/types.ts
+++ b/app/src/views/private/components/comments-sidebar-detail/types.ts
@@ -1,4 +1,4 @@
-import { User } from '@/types';
+import { User } from '@directus/shared/types';
 
 export type Activity = {
 	id: number;
diff --git a/app/src/views/private/components/drawer-item/drawer-item.vue b/app/src/views/private/components/drawer-item/drawer-item.vue
index 6a7efb8377..66bd0ae860 100644
--- a/app/src/views/private/components/drawer-item/drawer-item.vue
+++ b/app/src/views/private/components/drawer-item/drawer-item.vue
@@ -63,7 +63,8 @@ import FilePreview from '@/views/private/components/file-preview';
 
 import useCollection from '@/composables/use-collection';
 import { useFieldsStore, useRelationsStore } from '@/stores';
-import { Relation, Field } from '@/types';
+import { Relation } from '@/types';
+import { Field } from '@directus/shared/types';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { usePermissions } from '@/composables/use-permissions';
 import useTemplateData from '@/composables/use-template-data';
diff --git a/app/src/views/private/components/filter-sidebar-detail/filter-input.vue b/app/src/views/private/components/filter-sidebar-detail/filter-input.vue
index 8c7f038132..2e4bd47fb8 100644
--- a/app/src/views/private/components/filter-sidebar-detail/filter-input.vue
+++ b/app/src/views/private/components/filter-sidebar-detail/filter-input.vue
@@ -60,8 +60,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed } from 'vue';
-import { FilterOperator } from '@directus/shared/types';
-import { types } from '@/types';
+import { FilterOperator, Type } from '@directus/shared/types';
 import { getDefaultInterfaceForType } from '@/utils/get-default-interface-for-type';
 
 export default defineComponent({
@@ -71,7 +70,7 @@ export default defineComponent({
 			required: true,
 		},
 		type: {
-			type: String as PropType<typeof types[number]>,
+			type: String as PropType<Type>,
 			required: true,
 		},
 		operator: {
diff --git a/app/src/views/private/components/filter-sidebar-detail/filter-sidebar-detail.vue b/app/src/views/private/components/filter-sidebar-detail/filter-sidebar-detail.vue
index c0d97889e5..1bc9671578 100644
--- a/app/src/views/private/components/filter-sidebar-detail/filter-sidebar-detail.vue
+++ b/app/src/views/private/components/filter-sidebar-detail/filter-sidebar-detail.vue
@@ -43,8 +43,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed, ref, watch, toRefs } from 'vue';
-import { Field } from '@/types';
-import { Filter } from '@directus/shared/types';
+import { Field, Filter } from '@directus/shared/types';
 import { useFieldsStore } from '@/stores';
 import FieldFilter from './field-filter.vue';
 import { nanoid } from 'nanoid';
diff --git a/app/src/views/private/components/filter-sidebar-detail/get-available-operators-for-type.ts b/app/src/views/private/components/filter-sidebar-detail/get-available-operators-for-type.ts
index 561daa9d3e..7c0180c991 100644
--- a/app/src/views/private/components/filter-sidebar-detail/get-available-operators-for-type.ts
+++ b/app/src/views/private/components/filter-sidebar-detail/get-available-operators-for-type.ts
@@ -1,7 +1,7 @@
 import { OperatorType } from './types';
-import { types } from '@/types';
+import { Type } from '@directus/shared/types';
 
-export default function getAvailableOperatorsForType(type: typeof types[number]): OperatorType {
+export default function getAvailableOperatorsForType(type: Type): OperatorType {
 	/**
 	 * @NOTE
 	 * In the filter, you can't filter on the relational field itself, so we don't have to account
diff --git a/app/src/views/private/components/module-bar/module-bar.vue b/app/src/views/private/components/module-bar/module-bar.vue
index 0113ed8b81..518218e2ff 100644
--- a/app/src/views/private/components/module-bar/module-bar.vue
+++ b/app/src/views/private/components/module-bar/module-bar.vue
@@ -34,7 +34,7 @@ import ModuleBarLogo from '../module-bar-logo/';
 import ModuleBarAvatar from '../module-bar-avatar/';
 import { useUserStore } from '@/stores/';
 import { orderBy } from 'lodash';
-import { ModuleConfig } from '@/modules/types';
+import { ModuleConfig } from '@directus/shared/types';
 
 export default defineComponent({
 	components: {
diff --git a/app/src/views/private/components/render-display/render-display.vue b/app/src/views/private/components/render-display/render-display.vue
index 4519b96705..cee8c07e44 100644
--- a/app/src/views/private/components/render-display/render-display.vue
+++ b/app/src/views/private/components/render-display/render-display.vue
@@ -23,7 +23,7 @@
 import { defineComponent, computed } from 'vue';
 import { getDisplays } from '@/displays';
 import ValueNull from '@/views/private/components/value-null';
-import { DisplayConfig } from '@/displays/types';
+import { DisplayConfig } from '@directus/shared/types';
 
 export default defineComponent({
 	components: { ValueNull },
diff --git a/app/src/views/private/components/render-template/render-template.vue b/app/src/views/private/components/render-template/render-template.vue
index 0cdce0eb4c..def17226f5 100644
--- a/app/src/views/private/components/render-template/render-template.vue
+++ b/app/src/views/private/components/render-template/render-template.vue
@@ -23,10 +23,9 @@
 import { defineComponent, PropType, computed, ref } from 'vue';
 import { useFieldsStore } from '@/stores';
 import { get } from 'lodash';
-import { Field } from '@/types';
+import { DisplayConfig, Field } from '@directus/shared/types';
 import { getDisplays } from '@/displays';
 import ValueNull from '@/views/private/components/value-null';
-import { DisplayConfig, DisplayHandlerFunction } from '@/displays/types';
 import { getDefaultDisplayForType } from '@/utils/get-default-display-for-type';
 
 export default defineComponent({
@@ -101,8 +100,8 @@ export default defineComponent({
 
 					// If the display handler is a function, we parse the value and return the result
 					if (typeof displayInfo.handler === 'function') {
-						const handler = displayInfo.handler as DisplayHandlerFunction;
-						return handler(value, field.meta?.display_options);
+						const handler = displayInfo.handler;
+						return handler(value, field.meta?.display_options ?? null);
 					}
 
 					return {
diff --git a/package-lock.json b/package-lock.json
index 5a29e3a4d3..3463b07345 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9888,8 +9888,7 @@
 		"node_modules/@vue/devtools-api": {
 			"version": "6.0.0-beta.15",
 			"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.15.tgz",
-			"integrity": "sha512-quBx4Jjpexo6KDiNUGFr/zF/2A4srKM9S9v2uHgMXSU//hjgq1eGzqkIFql8T9gfX5ZaVOUzYBP3jIdIR3PKIA==",
-			"dev": true
+			"integrity": "sha512-quBx4Jjpexo6KDiNUGFr/zF/2A4srKM9S9v2uHgMXSU//hjgq1eGzqkIFql8T9gfX5ZaVOUzYBP3jIdIR3PKIA=="
 		},
 		"node_modules/@vue/preload-webpack-plugin": {
 			"version": "1.1.2",
@@ -50396,7 +50395,6 @@
 			"version": "4.0.10",
 			"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.10.tgz",
 			"integrity": "sha512-YbPf6QnZpyyWfnk7CUt2Bme+vo7TLfg1nGZNkvYqKYh4vLaFw6Gn8bPGdmt5m4qrGnKoXLqc4htAsd3dIukICA==",
-			"dev": true,
 			"dependencies": {
 				"@vue/devtools-api": "^6.0.0-beta.14"
 			},
@@ -57809,8 +57807,11 @@
 			"name": "@directus/shared",
 			"version": "9.0.0-rc.85",
 			"dependencies": {
+				"express": "4.17.1",
 				"fs-extra": "10.0.0",
-				"vue": "3.1.5"
+				"knex-schema-inspector": "1.5.11",
+				"vue": "3.1.5",
+				"vue-router": "4.0.10"
 			},
 			"devDependencies": {
 				"npm-run-all": "4.1.5",
@@ -62998,11 +62999,14 @@
 		"@directus/shared": {
 			"version": "file:packages/shared",
 			"requires": {
+				"express": "4.17.1",
 				"fs-extra": "10.0.0",
+				"knex-schema-inspector": "1.5.11",
 				"npm-run-all": "4.1.5",
 				"rimraf": "3.0.2",
 				"typescript": "4.3.5",
-				"vue": "3.1.5"
+				"vue": "3.1.5",
+				"vue-router": "4.0.10"
 			},
 			"dependencies": {
 				"fs-extra": {
@@ -68627,8 +68631,7 @@
 		"@vue/devtools-api": {
 			"version": "6.0.0-beta.15",
 			"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.15.tgz",
-			"integrity": "sha512-quBx4Jjpexo6KDiNUGFr/zF/2A4srKM9S9v2uHgMXSU//hjgq1eGzqkIFql8T9gfX5ZaVOUzYBP3jIdIR3PKIA==",
-			"dev": true
+			"integrity": "sha512-quBx4Jjpexo6KDiNUGFr/zF/2A4srKM9S9v2uHgMXSU//hjgq1eGzqkIFql8T9gfX5ZaVOUzYBP3jIdIR3PKIA=="
 		},
 		"@vue/preload-webpack-plugin": {
 			"version": "1.1.2",
@@ -100837,7 +100840,6 @@
 			"version": "4.0.10",
 			"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.10.tgz",
 			"integrity": "sha512-YbPf6QnZpyyWfnk7CUt2Bme+vo7TLfg1nGZNkvYqKYh4vLaFw6Gn8bPGdmt5m4qrGnKoXLqc4htAsd3dIukICA==",
-			"dev": true,
 			"requires": {
 				"@vue/devtools-api": "^6.0.0-beta.14"
 			}
diff --git a/packages/extension-sdk/src/index.ts b/packages/extension-sdk/src/index.ts
index d5586abc9d..396ecc420f 100644
--- a/packages/extension-sdk/src/index.ts
+++ b/packages/extension-sdk/src/index.ts
@@ -1 +1,9 @@
+export {
+	defineInterface,
+	defineDisplay,
+	defineLayout,
+	defineModule,
+	defineHook,
+	defineEndpoint,
+} from '@directus/shared/utils/browser';
 export { useLayoutState } from '@directus/shared/composables';
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 0f319deaa9..85600c0071 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -7,10 +7,6 @@
 			"import": "./dist/esm/composables/index.js",
 			"require": "./dist/cjs/composables/index.js"
 		},
-		"./utils": {
-			"import": "./dist/esm/utils/index.js",
-			"require": "./dist/cjs/utils/index.js"
-		},
 		"./constants": {
 			"import": "./dist/esm/constants/index.js",
 			"require": "./dist/cjs/constants/index.js"
@@ -18,6 +14,18 @@
 		"./types": {
 			"import": "./dist/esm/types/index.js",
 			"require": "./dist/cjs/types/index.js"
+		},
+		"./utils": {
+			"import": "./dist/esm/utils/index.js",
+			"require": "./dist/cjs/utils/index.js"
+		},
+		"./utils/browser": {
+			"import": "./dist/esm/utils/browser/index.js",
+			"require": "./dist/cjs/utils/browser/index.js"
+		},
+		"./utils/node": {
+			"import": "./dist/esm/utils/node/index.js",
+			"require": "./dist/cjs/utils/node/index.js"
 		}
 	},
 	"scripts": {
@@ -30,8 +38,11 @@
 	"author": "Nicola Krumschmidt",
 	"gitHead": "24621f3934dc77eb23441331040ed13c676ceffd",
 	"dependencies": {
+		"express": "4.17.1",
 		"fs-extra": "10.0.0",
-		"vue": "3.1.5"
+		"knex-schema-inspector": "1.5.11",
+		"vue": "3.1.5",
+		"vue-router": "4.0.10"
 	},
 	"devDependencies": {
 		"npm-run-all": "4.1.5",
diff --git a/packages/shared/src/constants/extensions.ts b/packages/shared/src/constants/extensions.ts
index 11da753711..c5c3fbb008 100644
--- a/packages/shared/src/constants/extensions.ts
+++ b/packages/shared/src/constants/extensions.ts
@@ -1,12 +1,10 @@
-import { ApiExtensionType, AppExtensionType, ExtensionPackageType, ExtensionType } from '../types';
-
 export const APP_SHARED_DEPS = ['@directus/extension-sdk', 'vue'];
 export const API_SHARED_DEPS = ['axios'];
 
-export const APP_EXTENSION_TYPES: AppExtensionType[] = ['interface', 'display', 'layout', 'module'];
-export const API_EXTENSION_TYPES: ApiExtensionType[] = ['endpoint', 'hook'];
-export const EXTENSION_TYPES: ExtensionType[] = [...APP_EXTENSION_TYPES, ...API_EXTENSION_TYPES];
-export const EXTENSION_PACKAGE_TYPES: ExtensionPackageType[] = [...EXTENSION_TYPES, 'pack'];
+export const APP_EXTENSION_TYPES = ['interface', 'display', 'layout', 'module'] as const;
+export const API_EXTENSION_TYPES = ['hook', 'endpoint'] as const;
+export const EXTENSION_TYPES = [...APP_EXTENSION_TYPES, ...API_EXTENSION_TYPES] as const;
+export const EXTENSION_PACKAGE_TYPES = [...EXTENSION_TYPES, 'pack'] as const;
 
 export const EXTENSION_NAME_REGEX = /^(?:(?:@[^/]+\/)?directus-extension-|@directus\/extension-).+$/;
 
diff --git a/packages/shared/src/constants/fields.ts b/packages/shared/src/constants/fields.ts
new file mode 100644
index 0000000000..c0a8baa40c
--- /dev/null
+++ b/packages/shared/src/constants/fields.ts
@@ -0,0 +1,33 @@
+export const TYPES = [
+	'alias',
+	'bigInteger',
+	'boolean',
+	'date',
+	'dateTime',
+	'decimal',
+	'float',
+	'integer',
+	'json',
+	'string',
+	'text',
+	'time',
+	'timestamp',
+	'binary',
+	'uuid',
+	'hash',
+	'csv',
+	'unknown',
+] as const;
+
+export const LOCAL_TYPES = [
+	'standard',
+	'file',
+	'files',
+	'm2o',
+	'o2m',
+	'm2m',
+	'm2a',
+	'presentation',
+	'translations',
+	'group',
+] as const;
diff --git a/packages/shared/src/constants/index.ts b/packages/shared/src/constants/index.ts
index d4285c6c7c..fe095a517d 100644
--- a/packages/shared/src/constants/index.ts
+++ b/packages/shared/src/constants/index.ts
@@ -1,2 +1,3 @@
 export * from './extensions';
+export * from './fields';
 export * from './symbols';
diff --git a/packages/shared/src/types/displays.ts b/packages/shared/src/types/displays.ts
new file mode 100644
index 0000000000..a7f8e691b7
--- /dev/null
+++ b/packages/shared/src/types/displays.ts
@@ -0,0 +1,35 @@
+import { Component, ComponentOptions } from 'vue';
+import { Field, LocalType, Type } from './fields';
+import { DeepPartial } from './misc';
+
+export type DisplayHandlerFunctionContext = {
+	type: string;
+};
+
+export type DisplayHandlerFunction = (
+	value: any,
+	options: Record<string, any> | null,
+	context?: DisplayHandlerFunctionContext
+) => string | null;
+
+export type DisplayFieldsFunction = (
+	options: any,
+	context: {
+		collection: string;
+		field: string;
+		type: string;
+	}
+) => string[];
+
+export interface DisplayConfig {
+	id: string;
+	name: string;
+	icon: string;
+	description?: string;
+
+	handler: DisplayHandlerFunction | ComponentOptions;
+	options: DeepPartial<Field>[] | Component | null;
+	types: readonly Type[];
+	groups?: readonly LocalType[];
+	fields?: string[] | DisplayFieldsFunction;
+}
diff --git a/packages/shared/src/types/endpoints.ts b/packages/shared/src/types/endpoints.ts
new file mode 100644
index 0000000000..4f4081e27b
--- /dev/null
+++ b/packages/shared/src/types/endpoints.ts
@@ -0,0 +1,4 @@
+import { Router } from 'express';
+import { ApiExtensionContext } from './extensions';
+
+export type EndpointRegisterFunction = (router: Router, context: ApiExtensionContext) => void;
diff --git a/packages/shared/src/types/extensions.ts b/packages/shared/src/types/extensions.ts
index d7fe7cd069..ed308ab118 100644
--- a/packages/shared/src/types/extensions.ts
+++ b/packages/shared/src/types/extensions.ts
@@ -1,9 +1,15 @@
-import { EXTENSION_PKG_KEY } from '../constants';
+import {
+	API_EXTENSION_TYPES,
+	APP_EXTENSION_TYPES,
+	EXTENSION_PACKAGE_TYPES,
+	EXTENSION_PKG_KEY,
+	EXTENSION_TYPES,
+} from '../constants';
 
-export type ApiExtensionType = 'endpoint' | 'hook';
-export type AppExtensionType = 'interface' | 'display' | 'layout' | 'module';
-export type ExtensionType = ApiExtensionType | AppExtensionType;
-export type ExtensionPackageType = ExtensionType | 'pack';
+export type ApiExtensionType = typeof API_EXTENSION_TYPES[number];
+export type AppExtensionType = typeof APP_EXTENSION_TYPES[number];
+export type ExtensionType = typeof EXTENSION_TYPES[number];
+export type ExtensionPackageType = typeof EXTENSION_PACKAGE_TYPES[number];
 
 export type Extension = {
 	path: string;
@@ -46,3 +52,11 @@ export type ExtensionManifest = {
 		hidden: boolean;
 	};
 };
+
+export type ApiExtensionContext = {
+	services: any;
+	exceptions: any;
+	database: any;
+	env: any;
+	getSchema: any;
+};
diff --git a/packages/shared/src/types/fields.ts b/packages/shared/src/types/fields.ts
new file mode 100644
index 0000000000..3c3141ee26
--- /dev/null
+++ b/packages/shared/src/types/fields.ts
@@ -0,0 +1,45 @@
+import { Column } from 'knex-schema-inspector/dist/types/column';
+import { LOCAL_TYPES, TYPES } from '../constants';
+
+type Translations = {
+	language: string;
+	translation: string;
+};
+
+export type Width = 'half' | 'half-left' | 'half-right' | 'full' | 'fill';
+
+export type Type = typeof TYPES[number];
+
+export type LocalType = typeof LOCAL_TYPES[number];
+
+export type FieldMeta = {
+	id: number;
+	collection: string;
+	field: string;
+	group: number | null;
+	hidden: boolean;
+	interface: string | null;
+	display: string | null;
+	options: Record<string, any> | null;
+	display_options: Record<string, any> | null;
+	readonly: boolean;
+	sort: number | null;
+	special: string[] | null;
+	translations: Translations[] | null;
+	width: Width | null;
+	note: string | null;
+	system?: true;
+};
+
+export interface FieldRaw {
+	collection: string;
+	field: string;
+	type: Type;
+	schema: Column | null;
+	meta: FieldMeta | null;
+}
+
+export interface Field extends FieldRaw {
+	name: string;
+	children?: Field[] | null;
+}
diff --git a/packages/shared/src/types/hooks.ts b/packages/shared/src/types/hooks.ts
new file mode 100644
index 0000000000..226c339425
--- /dev/null
+++ b/packages/shared/src/types/hooks.ts
@@ -0,0 +1,3 @@
+import { ApiExtensionContext } from './extensions';
+
+export type HookRegisterFunction = (context: ApiExtensionContext) => Record<string, (...values: any[]) => void>;
diff --git a/packages/shared/src/types/index.ts b/packages/shared/src/types/index.ts
index 152cadafcf..b82ad1a67b 100644
--- a/packages/shared/src/types/index.ts
+++ b/packages/shared/src/types/index.ts
@@ -1,5 +1,13 @@
+export * from './displays';
+export * from './endpoints';
 export * from './extensions';
+export * from './fields';
+export * from './hooks';
+export * from './interfaces';
 export * from './items';
 export * from './layouts';
 export * from './misc';
+export * from './modules';
+export * from './permissions';
 export * from './presets';
+export * from './users';
diff --git a/packages/shared/src/types/interfaces.ts b/packages/shared/src/types/interfaces.ts
new file mode 100644
index 0000000000..215dc8aca7
--- /dev/null
+++ b/packages/shared/src/types/interfaces.ts
@@ -0,0 +1,19 @@
+import { Field, LocalType, Type } from './fields';
+import { Component } from 'vue';
+import { DeepPartial } from './misc';
+
+export interface InterfaceConfig {
+	id: string;
+	name: string;
+	icon: string;
+	description?: string;
+	component: Component;
+	options: DeepPartial<Field>[] | Component | null;
+	types: readonly Type[];
+	groups?: readonly LocalType[];
+	relational?: boolean;
+	hideLabel?: boolean;
+	hideLoader?: boolean;
+	system?: boolean;
+	recommendedDisplays?: string[];
+}
diff --git a/packages/shared/src/types/layouts.ts b/packages/shared/src/types/layouts.ts
index 0a5f536db4..8b2bdcd339 100644
--- a/packages/shared/src/types/layouts.ts
+++ b/packages/shared/src/types/layouts.ts
@@ -1,6 +1,20 @@
+import { Component } from 'vue';
 import { Item } from './items';
 import { Filter } from './presets';
 
+export interface LayoutConfig<Options = any, Query = any> {
+	id: string;
+	name: string;
+	icon: string;
+	component: Component;
+	slots: {
+		options: Component;
+		sidebar: Component;
+		actions: Component;
+	};
+	setup: (LayoutOptions: LayoutProps<Options, Query>) => any;
+}
+
 export interface LayoutProps<Options = any, Query = any> {
 	collection: string | null;
 	selection: Item[];
diff --git a/app/src/modules/types.ts b/packages/shared/src/types/modules.ts
similarity index 69%
rename from app/src/modules/types.ts
rename to packages/shared/src/types/modules.ts
index 2c534e75d8..dd2223c6c8 100644
--- a/app/src/modules/types.ts
+++ b/packages/shared/src/types/modules.ts
@@ -1,6 +1,6 @@
-import { Permission, User } from '@/types';
 import { Ref } from 'vue';
 import { RouteRecordRaw } from 'vue-router';
+import { Permission, User } from '../types';
 
 export interface ModuleConfig {
 	id: string;
@@ -14,7 +14,3 @@ export interface ModuleConfig {
 	order?: number;
 	persistent?: boolean;
 }
-
-export type ModuleContext = Record<string, unknown>;
-
-export type ModuleDefineParam = ModuleConfig | (() => ModuleConfig);
diff --git a/app/src/types/permissions.ts b/packages/shared/src/types/permissions.ts
similarity index 100%
rename from app/src/types/permissions.ts
rename to packages/shared/src/types/permissions.ts
diff --git a/app/src/types/users.ts b/packages/shared/src/types/users.ts
similarity index 100%
rename from app/src/types/users.ts
rename to packages/shared/src/types/users.ts
diff --git a/packages/shared/src/utils/browser/define-extension.ts b/packages/shared/src/utils/browser/define-extension.ts
new file mode 100644
index 0000000000..11f317d746
--- /dev/null
+++ b/packages/shared/src/utils/browser/define-extension.ts
@@ -0,0 +1,34 @@
+import {
+	InterfaceConfig,
+	DisplayConfig,
+	LayoutConfig,
+	ModuleConfig,
+	HookRegisterFunction,
+	EndpointRegisterFunction,
+} from '../../types';
+
+export function defineInterface(config: InterfaceConfig): InterfaceConfig {
+	return config;
+}
+
+export function defineDisplay(config: DisplayConfig): DisplayConfig {
+	return config;
+}
+
+export function defineLayout<Options = any, Query = any>(
+	config: LayoutConfig<Options, Query>
+): LayoutConfig<Options, Query> {
+	return config;
+}
+
+export function defineModule(config: ModuleConfig): ModuleConfig {
+	return config;
+}
+
+export function defineHook(config: HookRegisterFunction): HookRegisterFunction {
+	return config;
+}
+
+export function defineEndpoint(config: EndpointRegisterFunction): EndpointRegisterFunction {
+	return config;
+}
diff --git a/packages/shared/src/utils/browser/index.ts b/packages/shared/src/utils/browser/index.ts
new file mode 100644
index 0000000000..e04c71aa02
--- /dev/null
+++ b/packages/shared/src/utils/browser/index.ts
@@ -0,0 +1,4 @@
+export * from './define-extension';
+export * from './is-extension';
+export * from './pluralize';
+export * from './validate-extension-manifest';
diff --git a/packages/shared/src/utils/is-extension.ts b/packages/shared/src/utils/browser/is-extension.ts
similarity index 54%
rename from packages/shared/src/utils/is-extension.ts
rename to packages/shared/src/utils/browser/is-extension.ts
index 7de1998ddc..81a77fcbd8 100644
--- a/packages/shared/src/utils/is-extension.ts
+++ b/packages/shared/src/utils/browser/is-extension.ts
@@ -1,18 +1,18 @@
-import { API_EXTENSION_TYPES, APP_EXTENSION_TYPES, EXTENSION_PACKAGE_TYPES, EXTENSION_TYPES } from '../constants';
-import { ApiExtensionType, AppExtensionType, ExtensionPackageType, ExtensionType } from '../types';
+import { API_EXTENSION_TYPES, APP_EXTENSION_TYPES, EXTENSION_PACKAGE_TYPES, EXTENSION_TYPES } from '../../constants';
+import { ApiExtensionType, AppExtensionType, ExtensionPackageType, ExtensionType } from '../../types';
 
 export function isExtension(type: string): type is ExtensionType {
-	return (EXTENSION_TYPES as string[]).includes(type);
+	return (EXTENSION_TYPES as readonly string[]).includes(type);
 }
 
 export function isAppExtension(type: string): type is AppExtensionType {
-	return (APP_EXTENSION_TYPES as string[]).includes(type);
+	return (APP_EXTENSION_TYPES as readonly string[]).includes(type);
 }
 
 export function isApiExtension(type: string): type is ApiExtensionType {
-	return (API_EXTENSION_TYPES as string[]).includes(type);
+	return (API_EXTENSION_TYPES as readonly string[]).includes(type);
 }
 
 export function isExtensionPackage(type: string): type is ExtensionPackageType {
-	return (EXTENSION_PACKAGE_TYPES as string[]).includes(type);
+	return (EXTENSION_PACKAGE_TYPES as readonly string[]).includes(type);
 }
diff --git a/packages/shared/src/utils/pluralize.ts b/packages/shared/src/utils/browser/pluralize.ts
similarity index 83%
rename from packages/shared/src/utils/pluralize.ts
rename to packages/shared/src/utils/browser/pluralize.ts
index 2be5ed840a..65574fc098 100644
--- a/packages/shared/src/utils/pluralize.ts
+++ b/packages/shared/src/utils/browser/pluralize.ts
@@ -1,4 +1,4 @@
-import { Plural } from '../types';
+import { Plural } from '../../types';
 
 export function pluralize<T extends string>(str: T): Plural<T> {
 	return `${str}s`;
diff --git a/packages/shared/src/utils/validate-extension-manifest.ts b/packages/shared/src/utils/browser/validate-extension-manifest.ts
similarity index 85%
rename from packages/shared/src/utils/validate-extension-manifest.ts
rename to packages/shared/src/utils/browser/validate-extension-manifest.ts
index aa4a07aa0e..3ecdf23217 100644
--- a/packages/shared/src/utils/validate-extension-manifest.ts
+++ b/packages/shared/src/utils/browser/validate-extension-manifest.ts
@@ -1,5 +1,5 @@
-import { EXTENSION_PKG_KEY } from '../constants';
-import { ExtensionManifest, ExtensionManifestRaw } from '../types';
+import { EXTENSION_PKG_KEY } from '../../constants';
+import { ExtensionManifest, ExtensionManifestRaw } from '../../types';
 import { isExtensionPackage } from './is-extension';
 
 export function validateExtensionManifest(
diff --git a/packages/shared/src/utils/index.ts b/packages/shared/src/utils/index.ts
index 9171ec0b24..59eadcbb63 100644
--- a/packages/shared/src/utils/index.ts
+++ b/packages/shared/src/utils/index.ts
@@ -1,8 +1,2 @@
-export * from './ensure-extension-dirs';
-export * from './generate-extensions-entry';
-export * from './get-extensions';
-export * from './is-extension';
-export * from './list-folders';
-export * from './pluralize';
-export * from './resolve-package';
-export * from './validate-extension-manifest';
+export * from './browser';
+export * from './node';
diff --git a/packages/shared/src/utils/ensure-extension-dirs.ts b/packages/shared/src/utils/node/ensure-extension-dirs.ts
similarity index 81%
rename from packages/shared/src/utils/ensure-extension-dirs.ts
rename to packages/shared/src/utils/node/ensure-extension-dirs.ts
index 33dcc0c0c6..5bde8163fe 100644
--- a/packages/shared/src/utils/ensure-extension-dirs.ts
+++ b/packages/shared/src/utils/node/ensure-extension-dirs.ts
@@ -1,7 +1,7 @@
 import path from 'path';
 import fse from 'fs-extra';
-import { pluralize } from './pluralize';
-import { EXTENSION_TYPES } from '../constants';
+import { pluralize } from '../browser';
+import { EXTENSION_TYPES } from '../../constants';
 
 export async function ensureExtensionDirs(extensionsPath: string): Promise<void> {
 	for (const extensionType of EXTENSION_TYPES) {
diff --git a/packages/shared/src/utils/generate-extensions-entry.ts b/packages/shared/src/utils/node/generate-extensions-entry.ts
similarity index 90%
rename from packages/shared/src/utils/generate-extensions-entry.ts
rename to packages/shared/src/utils/node/generate-extensions-entry.ts
index f602eea67c..6c19cc28d0 100644
--- a/packages/shared/src/utils/generate-extensions-entry.ts
+++ b/packages/shared/src/utils/node/generate-extensions-entry.ts
@@ -1,5 +1,5 @@
 import path from 'path';
-import { AppExtensionType, Extension } from '../types';
+import { AppExtensionType, Extension } from '../../types';
 
 export function generateExtensionsEntry(type: AppExtensionType, extensions: Extension[]): string {
 	const filteredExtensions = extensions.filter((extension) => extension.type === type);
diff --git a/packages/shared/src/utils/get-extensions.ts b/packages/shared/src/utils/node/get-extensions.ts
similarity index 93%
rename from packages/shared/src/utils/get-extensions.ts
rename to packages/shared/src/utils/node/get-extensions.ts
index bb9a158d5e..88a34323b4 100644
--- a/packages/shared/src/utils/get-extensions.ts
+++ b/packages/shared/src/utils/node/get-extensions.ts
@@ -1,11 +1,10 @@
 import path from 'path';
 import fse from 'fs-extra';
-import { Extension, ExtensionManifestRaw } from '../types';
+import { Extension, ExtensionManifestRaw } from '../../types';
 import { resolvePackage } from './resolve-package';
 import { listFolders } from './list-folders';
-import { EXTENSION_NAME_REGEX, EXTENSION_PKG_KEY, EXTENSION_TYPES } from '../constants';
-import { pluralize } from './pluralize';
-import { validateExtensionManifest } from './validate-extension-manifest';
+import { EXTENSION_NAME_REGEX, EXTENSION_PKG_KEY, EXTENSION_TYPES } from '../../constants';
+import { pluralize, validateExtensionManifest } from '../browser';
 
 export async function getPackageExtensions(root: string): Promise<Extension[]> {
 	let pkg: { dependencies?: Record<string, string> };
diff --git a/packages/shared/src/utils/node/index.ts b/packages/shared/src/utils/node/index.ts
new file mode 100644
index 0000000000..5bbb69b72b
--- /dev/null
+++ b/packages/shared/src/utils/node/index.ts
@@ -0,0 +1,5 @@
+export * from './ensure-extension-dirs';
+export * from './generate-extensions-entry';
+export * from './get-extensions';
+export * from './list-folders';
+export * from './resolve-package';
diff --git a/packages/shared/src/utils/list-folders.ts b/packages/shared/src/utils/node/list-folders.ts
similarity index 100%
rename from packages/shared/src/utils/list-folders.ts
rename to packages/shared/src/utils/node/list-folders.ts
diff --git a/packages/shared/src/utils/resolve-package.ts b/packages/shared/src/utils/node/resolve-package.ts
similarity index 100%
rename from packages/shared/src/utils/resolve-package.ts
rename to packages/shared/src/utils/node/resolve-package.ts
diff --git a/packages/shared/utils/browser.ts b/packages/shared/utils/browser.ts
new file mode 100644
index 0000000000..3980bb9f54
--- /dev/null
+++ b/packages/shared/utils/browser.ts
@@ -0,0 +1 @@
+export * from '../dist/esm/utils/browser';
diff --git a/packages/shared/utils/node.ts b/packages/shared/utils/node.ts
new file mode 100644
index 0000000000..4a327a5dc7
--- /dev/null
+++ b/packages/shared/utils/node.ts
@@ -0,0 +1 @@
+export * from '../dist/esm/utils/node';