fix(medusa,utils,test-utils,types,framework,dashboard,admin-vite-plugin,admin-bundler): Fix broken plugin dependencies in development server (#11720)

**What**
- Reworks how admin extensions are loaded from plugins.
- Reworks how extensions are managed internally in the dashboard project.

**Why**
- Previously we loaded extensions from plugins the same way we do for extension found in a users application. This being scanning the source code for possible extensions in `.medusa/server/src/admin`, and including any extensions that were discovered in the final virtual modules.
- This was causing issues with how Vite optimizes dependencies, and would lead to CJS/ESM issues. Not sure of the exact cause of this, but the issue was pinpointed to Vite not being able to register correctly which dependencies to optimize when they were loaded through the virtual module from a plugin in `node_modules`.

**What changed**
- To circumvent the above issue we have changed to a different strategy for loading extensions from plugins. The changes are the following:
  - We now build plugins slightly different, if a plugin has admin extensions we now build those to `.medusa/server/src/admin/index.mjs` and `.medusa/server/src/admin/index.js` for a ESM and CJS build.
  - When determining how to load extensions from a source we follow these rules:
    - If the source has a `medusa-plugin-options.json` or is the root application we determine that it is a `local` extension source, and load extensions as previously through a virtual module.
    - If it has neither of the above, but has a `./admin` export in its package.json then we determine that it is a `package` extension, and we update the entry point for the dashboard to import the package and pass its extensions a long to the dashboard manager.

**Changes required by plugin authors**
- The change has no breaking changes, but requires plugin authors to update the `package.json` of their plugins to also include a `./admin` export. It should look like this:

```json
{
  "name": "@medusajs/plugin",
  "version": "0.0.1",
  "description": "A starter for Medusa plugins.",
  "author": "Medusa (https://medusajs.com)",
  "license": "MIT",
  "files": [
    ".medusa/server"
  ],
  "exports": {
    "./package.json": "./package.json",
    "./workflows": "./.medusa/server/src/workflows/index.js",
    "./.medusa/server/src/modules/*": "./.medusa/server/src/modules/*/index.js",
    "./modules/*": "./.medusa/server/src/modules/*/index.js",
    "./providers/*": "./.medusa/server/src/providers/*/index.js",
    "./*": "./.medusa/server/src/*.js",
    "./admin": {
      "import": "./.medusa/server/src/admin/index.mjs",
      "require": "./.medusa/server/src/admin/index.js",
      "default": "./.medusa/server/src/admin/index.js"
    }
  },
}
```

packages/admin/dashboard/src/app.tsx

@@ -1,27 +1,32 @@
-import { DashboardExtensionManager } from "./extensions"
-import { Providers } from "./providers/providers"
-import { RouterProvider } from "./providers/router-provider"
+import { DashboardApp } from "./dashboard-app"
+import { DashboardPlugin } from "./dashboard-app/types"
 
 import displayModule from "virtual:medusa/displays"
 import formModule from "virtual:medusa/forms"
 import menuItemModule from "virtual:medusa/menu-items"
+import routeModule from "virtual:medusa/routes"
 import widgetModule from "virtual:medusa/widgets"
 
 import "./index.css"
 
-function App() {
-  const manager = new DashboardExtensionManager({
-    displayModule,
-    formModule,
-    menuItemModule,
-    widgetModule,
+const localPlugin = {
+  widgetModule,
+  routeModule,
+  displayModule,
+  formModule,
+  menuItemModule,
+}
+
+interface AppProps {
+  plugins?: DashboardPlugin[]
+}
+
+function App({ plugins = [] }: AppProps) {
+  const app = new DashboardApp({
+    plugins: [localPlugin, ...plugins],
   })
 
-  return (
-    <Providers api={manager.api}>
-      <RouterProvider />
-    </Providers>
-  )
+  return <div>{app.render()}</div>
 }
 
 export default App

packages/admin/dashboard/src/components/layout/main-layout/main-layout.tsx

@@ -24,9 +24,9 @@ import { INavItem, NavItem } from "../../layout/nav-item"
 import { Shell } from "../../layout/shell"
 
 import { Link, useLocation, useNavigate } from "react-router-dom"
-import { useDashboardExtension } from "../../../extensions"
 import { useLogout } from "../../../hooks/api"
 import { queryClient } from "../../../lib/query-client"
+import { useExtension } from "../../../providers/extension-provider"
 import { useSearch } from "../../../providers/search-provider"
 import { UserMenu } from "../user-menu"
 
@@ -283,7 +283,7 @@ const Searchbar = () => {
 const CoreRouteSection = () => {
   const coreRoutes = useCoreRoutes()
 
-  const { getMenu } = useDashboardExtension()
+  const { getMenu } = useExtension()
 
   const menuItems = getMenu("coreExtensions")
 
@@ -308,7 +308,7 @@ const CoreRouteSection = () => {
 
 const ExtensionRouteSection = () => {
   const { t } = useTranslation()
-  const { getMenu } = useDashboardExtension()
+  const { getMenu } = useExtension()
 
   const menuItems = getMenu("coreExtensions").filter((item) => !item.nested)
 

packages/admin/dashboard/src/components/layout/nav-item/nav-item.tsx

@@ -130,7 +130,7 @@ export const NavItem = ({
       <NavItemTooltip to={to}>
         <NavLink
           to={to}
-          end
+          end={items?.some((i) => i.to === pathname)}
           state={
             from
               ? {

packages/admin/dashboard/src/components/layout/settings-layout/settings-layout.tsx

@@ -5,10 +5,9 @@ import { Fragment, useEffect, useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { Link, useLocation } from "react-router-dom"
 
+import { useExtension } from "../../../providers/extension-provider"
 import { INavItem, NavItem } from "../nav-item"
 import { Shell } from "../shell"
-
-import { useDashboardExtension } from "../../../extensions"
 import { UserMenu } from "../user-menu"
 
 export const SettingsLayout = () => {
@@ -114,7 +113,7 @@ const getSafeFromValue = (from: string) => {
 }
 
 const SettingsSidebar = () => {
-  const { getMenu } = useDashboardExtension()
+  const { getMenu } = useExtension()
 
   const routes = useSettingRoutes()
   const developerRoutes = useDeveloperRoutes()

packages/admin/dashboard/src/dashboard-app/dashboard-app.tsx

@@ -7,87 +7,123 @@ import {
   NESTED_ROUTE_POSITIONS,
 } from "@medusajs/admin-shared"
 import * as React from "react"
-import { INavItem } from "../../components/layout/nav-item"
+import {
+  createBrowserRouter,
+  RouteObject,
+  RouterProvider,
+} from "react-router-dom"
+import { INavItem } from "../components/layout/nav-item"
+import { Providers } from "../providers"
+import { getRouteMap } from "./routes/get-route.map"
+import { createRouteMap, getRouteExtensions } from "./routes/utils"
 import {
   ConfigExtension,
   ConfigField,
   ConfigFieldMap,
+  DashboardPlugin,
   DisplayExtension,
   DisplayMap,
-  DisplayModule,
   FormExtension,
   FormField,
   FormFieldExtension,
   FormFieldMap,
-  FormModule,
   FormZoneMap,
   MenuItemExtension,
   MenuItemKey,
-  MenuItemModule,
-  WidgetExtension,
-  WidgetModule,
+  MenuMap,
+  WidgetMap,
   ZoneStructure,
-} from "../types"
+} from "./types"
 
-export type DashboardExtensionManagerProps = {
-  formModule: FormModule
-  displayModule: DisplayModule
-  menuItemModule: MenuItemModule
-  widgetModule: WidgetModule
+type DashboardAppProps = {
+  plugins: DashboardPlugin[]
 }
 
-export class DashboardExtensionManager {
-  private widgets: Map<InjectionZone, React.ComponentType[]>
-  private menus: Map<MenuItemKey, INavItem[]>
+export class DashboardApp {
+  private widgets: WidgetMap
+  private menus: MenuMap
   private fields: FormFieldMap
   private configs: ConfigFieldMap
   private displays: DisplayMap
+  private coreRoutes: RouteObject[]
+  private settingsRoutes: RouteObject[]
 
-  constructor({
-    widgetModule,
-    menuItemModule,
-    displayModule,
-    formModule,
-  }: DashboardExtensionManagerProps) {
-    this.widgets = this.populateWidgets(widgetModule.widgets)
-    this.menus = this.populateMenus(menuItemModule.menuItems)
+  constructor({ plugins }: DashboardAppProps) {
+    this.widgets = this.populateWidgets(plugins)
+    this.menus = this.populateMenus(plugins)
 
-    const { fields, configs } = this.populateForm(formModule)
+    const { coreRoutes, settingsRoutes } = this.populateRoutes(plugins)
+    this.coreRoutes = coreRoutes
+    this.settingsRoutes = settingsRoutes
+
+    const { fields, configs } = this.populateForm(plugins)
     this.fields = fields
     this.configs = configs
-    this.displays = this.populateDisplays(displayModule)
+    this.displays = this.populateDisplays(plugins)
   }
 
-  private populateWidgets(widgets: WidgetExtension[] | undefined) {
-    const registry = new Map<InjectionZone, React.ComponentType[]>()
+  private populateRoutes(plugins: DashboardPlugin[]) {
+    const coreRoutes: RouteObject[] = []
+    const settingsRoutes: RouteObject[] = []
 
-    if (!widgets) {
-      return registry
+    for (const plugin of plugins) {
+      const filteredCoreRoutes = getRouteExtensions(plugin.routeModule, "core")
+      const filteredSettingsRoutes = getRouteExtensions(
+        plugin.routeModule,
+        "settings"
+      )
+
+      const coreRoutesMap = createRouteMap(filteredCoreRoutes)
+      const settingsRoutesMap = createRouteMap(filteredSettingsRoutes)
+
+      coreRoutes.push(...coreRoutesMap)
+      settingsRoutes.push(...settingsRoutesMap)
     }
 
-    widgets.forEach((widget) => {
-      widget.zone.forEach((zone) => {
-        if (!registry.has(zone)) {
-          registry.set(zone, [])
-        }
-        registry.get(zone)!.push(widget.Component)
+    return { coreRoutes, settingsRoutes }
+  }
+
+  private populateWidgets(plugins: DashboardPlugin[]) {
+    const registry = new Map<InjectionZone, React.ComponentType[]>()
+
+    plugins.forEach((plugin) => {
+      const widgets = plugin.widgetModule.widgets
+      if (!widgets) {
+        return
+      }
+
+      widgets.forEach((widget) => {
+        widget.zone.forEach((zone) => {
+          if (!registry.has(zone)) {
+            registry.set(zone, [])
+          }
+          registry.get(zone)!.push(widget.Component)
+        })
       })
     })
 
     return registry
   }
 
-  private populateMenus(menuItems: MenuItemExtension[] | undefined) {
+  private populateMenus(plugins: DashboardPlugin[]) {
     const registry = new Map<MenuItemKey, INavItem[]>()
     const tempRegistry: Record<string, INavItem> = {}
 
-    if (!menuItems) {
+    // Collect all menu items from all plugins
+    const allMenuItems: MenuItemExtension[] = []
+    plugins.forEach((plugin) => {
+      if (plugin.menuItemModule.menuItems) {
+        allMenuItems.push(...plugin.menuItemModule.menuItems)
+      }
+    })
+
+    if (allMenuItems.length === 0) {
       return registry
     }
 
-    menuItems.sort((a, b) => a.path.length - b.path.length)
+    allMenuItems.sort((a, b) => a.path.length - b.path.length)
 
-    menuItems.forEach((item) => {
+    allMenuItems.forEach((item) => {
       if (item.path.includes("/:")) {
         if (process.env.NODE_ENV === "development") {
           console.warn(
@@ -114,7 +150,7 @@ export class DashboardExtensionManager {
       }
 
       // Find the parent item if it exists
-      const parentItem = menuItems.find(
+      const parentItem = allMenuItems.find(
         (menuItem) => menuItem.path === parentPath
       )
 
@@ -158,25 +194,62 @@ export class DashboardExtensionManager {
     return registry
   }
 
-  private populateForm(formModule: FormModule): {
+  private populateForm(plugins: DashboardPlugin[]): {
     fields: FormFieldMap
     configs: ConfigFieldMap
   } {
     const fields: FormFieldMap = new Map()
     const configs: ConfigFieldMap = new Map()
 
-    Object.entries(formModule.customFields).forEach(
-      ([model, customization]) => {
-        fields.set(
-          model as CustomFieldModel,
-          this.processFields(customization.forms)
-        )
-        configs.set(
-          model as CustomFieldModel,
-          this.processConfigs(customization.configs)
-        )
-      }
-    )
+    plugins.forEach((plugin) => {
+      Object.entries(plugin.formModule.customFields).forEach(
+        ([model, customization]) => {
+          // Initialize maps if they don't exist for this model
+          if (!fields.has(model as CustomFieldModel)) {
+            fields.set(model as CustomFieldModel, new Map())
+          }
+          if (!configs.has(model as CustomFieldModel)) {
+            configs.set(model as CustomFieldModel, new Map())
+          }
+
+          // Process forms
+          const modelFields = this.processFields(customization.forms)
+          const existingModelFields = fields.get(model as CustomFieldModel)!
+
+          // Merge the maps
+          modelFields.forEach((zoneStructure, zone) => {
+            if (!existingModelFields.has(zone)) {
+              existingModelFields.set(zone, { components: [], tabs: new Map() })
+            }
+
+            const existingZoneStructure = existingModelFields.get(zone)!
+
+            // Merge components
+            existingZoneStructure.components.push(...zoneStructure.components)
+
+            // Merge tabs
+            zoneStructure.tabs.forEach((fields, tab) => {
+              if (!existingZoneStructure.tabs.has(tab)) {
+                existingZoneStructure.tabs.set(tab, [])
+              }
+              existingZoneStructure.tabs.get(tab)!.push(...fields)
+            })
+          })
+
+          // Process configs
+          const modelConfigs = this.processConfigs(customization.configs)
+          const existingModelConfigs = configs.get(model as CustomFieldModel)!
+
+          // Merge the config maps
+          modelConfigs.forEach((configFields, zone) => {
+            if (!existingModelConfigs.has(zone)) {
+              existingModelConfigs.set(zone, [])
+            }
+            existingModelConfigs.get(zone)!.push(...configFields)
+          })
+        }
+      )
+    })
 
     return { fields, configs }
   }
@@ -269,16 +342,36 @@ export class DashboardExtensionManager {
     }
   }
 
-  private populateDisplays(displayModule: DisplayModule): DisplayMap {
+  private populateDisplays(plugins: DashboardPlugin[]): DisplayMap {
     const displays = new Map<
       CustomFieldModel,
       Map<CustomFieldContainerZone, React.ComponentType<{ data: any }>[]>
     >()
 
-    Object.entries(displayModule.displays).forEach(([model, customization]) => {
-      displays.set(
-        model as CustomFieldModel,
-        this.processDisplays(customization)
+    plugins.forEach((plugin) => {
+      Object.entries(plugin.displayModule.displays).forEach(
+        ([model, customization]) => {
+          if (!displays.has(model as CustomFieldModel)) {
+            displays.set(
+              model as CustomFieldModel,
+              new Map<
+                CustomFieldContainerZone,
+                React.ComponentType<{ data: any }>[]
+              >()
+            )
+          }
+
+          const modelDisplays = displays.get(model as CustomFieldModel)!
+          const processedDisplays = this.processDisplays(customization)
+
+          // Merge the displays
+          processedDisplays.forEach((components, zone) => {
+            if (!modelDisplays.has(zone)) {
+              modelDisplays.set(zone, [])
+            }
+            modelDisplays.get(zone)!.push(...components)
+          })
+        }
       )
     })
 
@@ -347,4 +440,21 @@ export class DashboardExtensionManager {
       getDisplays: this.getDisplays.bind(this),
     }
   }
+
+  render() {
+    const routes = getRouteMap({
+      settingsRoutes: this.settingsRoutes,
+      coreRoutes: this.coreRoutes,
+    })
+
+    const router = createBrowserRouter(routes, {
+      basename: __BASE__ || "/",
+    })
+
+    return (
+      <Providers api={this.api}>
+        <RouterProvider router={router} />
+      </Providers>
+    )
+  }
 }

packages/admin/dashboard/src/dashboard-app/index.ts

@@ -1,5 +1,4 @@
-export * from "./dashboard-extension-manager"
-export * from "./dashboard-extension-provider"
+export * from "./dashboard-app"
 export * from "./forms"
 export * from "./links/utils"
 export * from "./routes/utils"

packages/admin/dashboard/src/dashboard-app/routes/utils.ts

@@ -137,7 +137,6 @@ const addRoute = (
 
   if (!route) {
     route = createBranchRoute(currentSegment)
-    currentLevel.push(route)
   }
 
   const currentFullPath = fullPath
@@ -157,8 +156,14 @@ const addRoute = (
       route.handle = handle
     }
 
+    if (loader) {
+      route.loader = loader
+    }
+
     leaf.children = processParallelRoutes(parallelRoutes, currentFullPath)
     route.children.push(leaf)
+
+    currentLevel.push(route)
   } else {
     route.children ||= []
     addRoute(

packages/admin/dashboard/src/dashboard-app/types.ts

@@ -9,6 +9,7 @@ import {
 import { ComponentType } from "react"
 import { LoaderFunction } from "react-router-dom"
 import { ZodFirstPartySchemaTypes } from "zod"
+import { INavItem } from "../components/layout/nav-item"
 
 export type RouteExtension = {
   Component: ComponentType
@@ -119,3 +120,15 @@ export type DisplayMap = Map<
   CustomFieldModel,
   Map<CustomFieldContainerZone, React.ComponentType<{ data: any }>[]>
 >
+
+export type MenuMap = Map<MenuItemKey, INavItem[]>
+
+export type WidgetMap = Map<InjectionZone, React.ComponentType[]>
+
+export type DashboardPlugin = {
+  formModule: FormModule
+  displayModule: DisplayModule
+  menuItemModule: MenuItemModule
+  widgetModule: WidgetModule
+  routeModule: RouteModule
+}

packages/admin/dashboard/src/extensions/dashboard-extension-manager/index.ts

@@ -1,2 +0,0 @@
-export * from "./dashboard-extension-manager";
-

packages/admin/dashboard/src/extensions/dashboard-extension-provider/dashboard-extension-context.tsx

@@ -1,7 +0,0 @@
-import { createContext } from "react"
-import { DashboardExtensionManager } from "../dashboard-extension-manager"
-
-type DasboardExtenstionContextValue = DashboardExtensionManager["api"]
-
-export const DashboardExtensionContext =
-  createContext<DasboardExtenstionContextValue | null>(null)

packages/admin/dashboard/src/extensions/dashboard-extension-provider/dashboard-extension-provider.tsx

@@ -1,18 +0,0 @@
-import { PropsWithChildren } from "react"
-import { DashboardExtensionManager } from "../dashboard-extension-manager/dashboard-extension-manager"
-import { DashboardExtensionContext } from "./dashboard-extension-context"
-
-type DashboardExtensionProviderProps = PropsWithChildren<{
-  api: DashboardExtensionManager["api"]
-}>
-
-export const DashboardExtensionProvider = ({
-  api,
-  children,
-}: DashboardExtensionProviderProps) => {
-  return (
-    <DashboardExtensionContext.Provider value={api}>
-      {children}
-    </DashboardExtensionContext.Provider>
-  )
-}

packages/admin/dashboard/src/extensions/dashboard-extension-provider/index.ts

@@ -1,2 +0,0 @@
-export { DashboardExtensionProvider } from "./dashboard-extension-provider"
-export { useDashboardExtension } from "./use-dashboard-extension"

packages/admin/dashboard/src/extensions/dashboard-extension-provider/use-dashboard-extension.tsx

@@ -1,12 +0,0 @@
-import { useContext } from "react"
-import { DashboardExtensionContext } from "./dashboard-extension-context"
-
-export const useDashboardExtension = () => {
-  const context = useContext(DashboardExtensionContext)
-  if (!context) {
-    throw new Error(
-      "useDashboardExtension must be used within a DashboardExtensionProvider"
-    )
-  }
-  return context
-}

packages/admin/dashboard/src/index.ts

@@ -0,0 +1,2 @@
+export type { DashboardPlugin } from "./dashboard-app/dashboard-app"
+export * from "./render"

packages/admin/dashboard/src/providers/extension-provider/extension-context.tsx

@@ -0,0 +1,8 @@
+import { createContext } from "react"
+import { DashboardApp } from "../../dashboard-app"
+
+type ExtensionContextValue = DashboardApp["api"]
+
+export const ExtensionContext = createContext<ExtensionContextValue | null>(
+  null
+)

packages/admin/dashboard/src/providers/extension-provider/extension-provider.tsx

@@ -0,0 +1,18 @@
+import { PropsWithChildren } from "react"
+import { DashboardApp } from "../../dashboard-app/dashboard-app"
+import { ExtensionContext } from "./extension-context"
+
+type ExtensionProviderProps = PropsWithChildren<{
+  api: DashboardApp["api"]
+}>
+
+export const ExtensionProvider = ({
+  api,
+  children,
+}: ExtensionProviderProps) => {
+  return (
+    <ExtensionContext.Provider value={api}>
+      {children}
+    </ExtensionContext.Provider>
+  )
+}

packages/admin/dashboard/src/providers/extension-provider/index.ts

@@ -0,0 +1,2 @@
+export { ExtensionProvider } from "./extension-provider"
+export { useExtension } from "./use-extension"

packages/admin/dashboard/src/providers/extension-provider/use-extension.tsx

@@ -0,0 +1,10 @@
+import { useContext } from "react"
+import { ExtensionContext } from "./extension-context"
+
+export const useExtension = () => {
+  const context = useContext(ExtensionContext)
+  if (!context) {
+    throw new Error("useExtension must be used within a ExtensionProvider")
+  }
+  return context
+}

packages/admin/dashboard/src/providers/providers.tsx

@@ -3,22 +3,20 @@ import { QueryClientProvider } from "@tanstack/react-query"
 import type { PropsWithChildren } from "react"
 import { HelmetProvider } from "react-helmet-async"
 import { I18n } from "../components/utilities/i18n"
-import {
-  DashboardExtensionManager,
-  DashboardExtensionProvider,
-} from "../extensions"
+import { DashboardApp } from "../dashboard-app"
 import { queryClient } from "../lib/query-client"
+import { ExtensionProvider } from "./extension-provider"
 import { I18nProvider } from "./i18n-provider"
 import { ThemeProvider } from "./theme-provider"
 
 type ProvidersProps = PropsWithChildren<{
-  api: DashboardExtensionManager["api"]
+  api: DashboardApp["api"]
 }>
 
 export const Providers = ({ api, children }: ProvidersProps) => {
   return (
     <TooltipProvider>
-      <DashboardExtensionProvider api={api}>
+      <ExtensionProvider api={api}>
         <HelmetProvider>
           <QueryClientProvider client={queryClient}>
             <ThemeProvider>
@@ -28,7 +26,7 @@ export const Providers = ({ api, children }: ProvidersProps) => {
             </ThemeProvider>
           </QueryClientProvider>
         </HelmetProvider>
-      </DashboardExtensionProvider>
+      </ExtensionProvider>
     </TooltipProvider>
   )
 }

packages/admin/dashboard/src/providers/router-provider/index.ts

@@ -1 +0,0 @@
-export * from "./router-provider"

packages/admin/dashboard/src/providers/router-provider/route-extensions.tsx

@@ -1,13 +0,0 @@
-import routeModule from "virtual:medusa/routes"
-import {
-  createRouteMap,
-  getRouteExtensions,
-} from "../../extensions/routes/utils"
-
-const routes = getRouteExtensions(routeModule, "core")
-
-/**
- * Core Route extensions.
- */
-export const RouteExtensions = createRouteMap(routes)
-console.log(RouteExtensions)

packages/admin/dashboard/src/providers/router-provider/router-provider.tsx

@@ -1,14 +0,0 @@
-import {
-  RouterProvider as Provider,
-  createBrowserRouter,
-} from "react-router-dom"
-
-import { RouteMap } from "./route-map"
-
-const router = createBrowserRouter(RouteMap, {
-  basename: __BASE__ || "/",
-})
-
-export const RouterProvider = () => {
-  return <Provider router={router} />
-}

packages/admin/dashboard/src/providers/router-provider/settings-extensions.tsx

@@ -1,12 +0,0 @@
-import routeModule from "virtual:medusa/routes"
-import {
-  createRouteMap,
-  getRouteExtensions,
-} from "../../extensions/routes/utils"
-
-const routes = getRouteExtensions(routeModule, "settings")
-
-/**
- * Settings Route extensions.
- */
-export const SettingsExtensions = createRouteMap(routes, "/settings")

packages/admin/dashboard/src/routes/api-key-management/api-key-management-detail/api-key-management-detail.tsx

@@ -2,8 +2,8 @@ import { useLoaderData, useParams } from "react-router-dom"
 
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
 import { useApiKey } from "../../../hooks/api/api-keys"
+import { useExtension } from "../../../providers/extension-provider"
 import { ApiKeyType } from "../common/constants"
 import { ApiKeyGeneralSection } from "./components/api-key-general-section"
 import { ApiKeySalesChannelSection } from "./components/api-key-sales-channel-section"
@@ -15,7 +15,7 @@ export const ApiKeyManagementDetail = () => {
   >
 
   const { id } = useParams()
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   const { api_key, isLoading, isError, error } = useApiKey(id!, {
     initialData: initialData,

packages/admin/dashboard/src/routes/api-key-management/api-key-management-list/api-key-management-list.tsx

@@ -3,11 +3,11 @@ import { getApiKeyTypeFromPathname } from "../common/utils"
 import { ApiKeyManagementListTable } from "./components/api-key-management-list-table"
 
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 
 export const ApiKeyManagementList = () => {
   const { pathname } = useLocation()
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   const keyType = getApiKeyTypeFromPathname(pathname)
 

packages/admin/dashboard/src/routes/campaigns/campaign-detail/campaign-detail.tsx

@@ -9,7 +9,7 @@ import { campaignLoader } from "./loader"
 
 import { TwoColumnPageSkeleton } from "../../../components/common/skeleton"
 import { TwoColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { CampaignConfigurationSection } from "./components/campaign-configuration-section"
 import { CAMPAIGN_DETAIL_FIELDS } from "./constants"
 
@@ -25,7 +25,7 @@ export const CampaignDetail = () => {
     { initialData }
   )
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !campaign) {
     return (

packages/admin/dashboard/src/routes/campaigns/campaign-list/campaign-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { CampaignListTable } from "./components/campaign-list-table"
 
 export const CampaignList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

packages/admin/dashboard/src/routes/categories/category-detail/category-detail.tsx

@@ -7,7 +7,7 @@ import { categoryLoader } from "./loader"
 
 import { TwoColumnPageSkeleton } from "../../../components/common/skeleton"
 import { TwoColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 
 export const CategoryDetail = () => {
   const { id } = useParams()
@@ -16,7 +16,7 @@ export const CategoryDetail = () => {
     ReturnType<typeof categoryLoader>
   >
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   const { product_category, isLoading, isError, error } = useProductCategory(
     id!,

packages/admin/dashboard/src/routes/categories/category-list/category-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { CategoryListTable } from "./components/category-list-table"
 
 export const CategoryList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

packages/admin/dashboard/src/routes/collections/collection-detail/collection-detail.tsx

@@ -2,8 +2,8 @@ import { useLoaderData, useParams } from "react-router-dom"
 
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
 import { useCollection } from "../../../hooks/api/collections"
+import { useExtension } from "../../../providers/extension-provider"
 import { CollectionGeneralSection } from "./components/collection-general-section"
 import { CollectionProductSection } from "./components/collection-product-section"
 import { collectionLoader } from "./loader"
@@ -18,7 +18,7 @@ export const CollectionDetail = () => {
     initialData,
   })
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !collection) {
     return <SingleColumnPageSkeleton sections={2} showJSON showMetadata />

packages/admin/dashboard/src/routes/collections/collection-list/collection-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { CollectionListTable } from "./components/collection-list-table"
 
 export const CollectionList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

packages/admin/dashboard/src/routes/customer-groups/customer-group-detail/customer-group-detail.tsx

@@ -7,7 +7,7 @@ import { CustomerGroupGeneralSection } from "./components/customer-group-general
 import { customerGroupLoader } from "./loader"
 
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { CUSTOMER_GROUP_DETAIL_FIELDS } from "./constants"
 
 export const CustomerGroupDetail = () => {
@@ -24,7 +24,7 @@ export const CustomerGroupDetail = () => {
     { initialData }
   )
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !customer_group) {
     return <SingleColumnPageSkeleton sections={2} showJSON showMetadata />

packages/admin/dashboard/src/routes/customer-groups/customer-group-list/components/customer-group-list-table/customer-group-list-table.tsx

@@ -1,10 +1,10 @@
 import { PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import {
-    Container,
-    createDataTableColumnHelper,
-    toast,
-    usePrompt,
+  Container,
+  createDataTableColumnHelper,
+  toast,
+  usePrompt,
 } from "@medusajs/ui"
 import { keepPreviousData } from "@tanstack/react-query"
 import { useCallback, useMemo } from "react"
@@ -14,19 +14,19 @@ import { useNavigate } from "react-router-dom"
 import { DataTable } from "../../../../../components/data-table"
 import { useDataTableDateFilters } from "../../../../../components/data-table/helpers/general/use-data-table-date-filters"
 import { SingleColumnPage } from "../../../../../components/layout/pages"
-import { useDashboardExtension } from "../../../../../extensions"
 import {
-    useCustomerGroups,
-    useDeleteCustomerGroupLazy,
+  useCustomerGroups,
+  useDeleteCustomerGroupLazy,
 } from "../../../../../hooks/api"
 import { useDate } from "../../../../../hooks/use-date"
 import { useQueryParams } from "../../../../../hooks/use-query-params"
+import { useExtension } from "../../../../../providers/extension-provider"
 
 const PAGE_SIZE = 10
 
 export const CustomerGroupListTable = () => {
   const { t } = useTranslation()
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   const { q, order, offset, created_at, updated_at } = useQueryParams([
     "q",

packages/admin/dashboard/src/routes/customer-groups/customer-group-list/customer-group-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { CustomerGroupListTable } from "./components/customer-group-list-table"
 
 export const CustomerGroupsList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

packages/admin/dashboard/src/routes/customers/customer-detail/customer-detail.tsx

@@ -2,8 +2,8 @@ import { useLoaderData, useParams } from "react-router-dom"
 
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
 import { useCustomer } from "../../../hooks/api/customers"
+import { useExtension } from "../../../providers/extension-provider"
 import { CustomerGeneralSection } from "./components/customer-general-section"
 import { CustomerGroupSection } from "./components/customer-group-section"
 import { CustomerOrderSection } from "./components/customer-order-section"
@@ -19,7 +19,7 @@ export const CustomerDetail = () => {
     initialData,
   })
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !customer) {
     return <SingleColumnPageSkeleton sections={2} showJSON showMetadata />

packages/admin/dashboard/src/routes/customers/customer-list/customer-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { CustomerListTable } from "./components/customer-list-table"
 
 export const CustomersList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

packages/admin/dashboard/src/routes/inventory/inventory-detail/inventory-detail.tsx

@@ -10,7 +10,7 @@ import { InventoryItemReservationsSection } from "./components/inventory-item-re
 import { InventoryItemVariantsSection } from "./components/inventory-item-variants/variants-section"
 import { inventoryItemLoader } from "./loader"
 
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { INVENTORY_DETAIL_FIELDS } from "./constants"
 
 export const InventoryDetail = () => {
@@ -35,7 +35,7 @@ export const InventoryDetail = () => {
     }
   )
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !inventory_item) {
     return (

packages/admin/dashboard/src/routes/inventory/inventory-list/inventory-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { InventoryListTable } from "./components/inventory-list-table"
 
 export const InventoryItemListTable = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

packages/admin/dashboard/src/routes/locations/location-detail/location-detail.tsx

@@ -7,7 +7,7 @@ import { locationLoader } from "./loader"
 
 import { TwoColumnPageSkeleton } from "../../../components/common/skeleton"
 import { TwoColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import LocationsFulfillmentProvidersSection from "./components/location-fulfillment-providers-section/location-fulfillment-providers-section"
 import { LOCATION_DETAILS_FIELD } from "./constants"
 
@@ -28,7 +28,7 @@ export const LocationDetail = () => {
     { initialData }
   )
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !location) {
     return (

packages/admin/dashboard/src/routes/locations/location-list/location-list.tsx

@@ -1,19 +1,17 @@
-import { ShoppingBag, TriangleRightMini } from "@medusajs/icons"
-import { Container, Heading, Text } from "@medusajs/ui"
+import { ShoppingBag } from "@medusajs/icons"
+import { Container, Heading } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
-import { Link, useLoaderData } from "react-router-dom"
+import { useLoaderData } from "react-router-dom"
 
 import { useStockLocations } from "../../../hooks/api/stock-locations"
 import LocationListItem from "./components/location-list-item/location-list-item"
 import { LOCATION_LIST_FIELDS } from "./constants"
 import { shippingListLoader } from "./loader"
 
-import { ReactNode } from "react"
-import { IconAvatar } from "../../../components/common/icon-avatar"
-import { TwoColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
-import { LocationListHeader } from "./components/location-list-header"
 import { SidebarLink } from "../../../components/common/sidebar-link/sidebar-link"
+import { TwoColumnPage } from "../../../components/layout/pages"
+import { useExtension } from "../../../providers/extension-provider"
+import { LocationListHeader } from "./components/location-list-header"
 
 export function LocationList() {
   const initialData = useLoaderData() as Awaited<
@@ -31,7 +29,7 @@ export function LocationList() {
     { initialData }
   )
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isError) {
     throw error

packages/admin/dashboard/src/routes/login/login.tsx

@@ -7,9 +7,9 @@ import * as z from "zod"
 
 import { Form } from "../../components/common/form"
 import AvatarBox from "../../components/common/logo-box/avatar-box"
-import { useDashboardExtension } from "../../extensions"
 import { useSignInWithEmailPass } from "../../hooks/api"
 import { isFetchError } from "../../lib/is-fetch-error"
+import { useExtension } from "../../providers/extension-provider"
 
 const LoginSchema = z.object({
   email: z.string().email(),
@@ -20,7 +20,7 @@ export const Login = () => {
   const { t } = useTranslation()
   const location = useLocation()
   const navigate = useNavigate()
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   const from = location.state?.from?.pathname || "/orders"
 

packages/admin/dashboard/src/routes/orders/order-detail/order-detail.tsx

@@ -2,8 +2,8 @@ import { useLoaderData, useParams } from "react-router-dom"
 
 import { TwoColumnPageSkeleton } from "../../../components/common/skeleton"
 import { TwoColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
 import { useOrder, useOrderPreview } from "../../../hooks/api/orders"
+import { useExtension } from "../../../providers/extension-provider"
 import { ActiveOrderClaimSection } from "./components/active-order-claim-section"
 import { ActiveOrderExchangeSection } from "./components/active-order-exchange-section"
 import { ActiveOrderReturnSection } from "./components/active-order-return-section"
@@ -21,7 +21,7 @@ export const OrderDetail = () => {
   const initialData = useLoaderData() as Awaited<ReturnType<typeof orderLoader>>
 
   const { id } = useParams()
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   const { order, isLoading, isError, error } = useOrder(
     id!,

packages/admin/dashboard/src/routes/orders/order-list/order-list.tsx

@@ -1,10 +1,10 @@
 import { OrderListTable } from "./components/order-list-table"
 
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 
 export const OrderList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

packages/admin/dashboard/src/routes/price-lists/price-list-detail/price-list-detail.tsx

@@ -7,13 +7,13 @@ import { PriceListProductSection } from "./components/price-list-product-section
 
 import { TwoColumnPageSkeleton } from "../../../components/common/skeleton"
 import { TwoColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 
 export const PriceListDetails = () => {
   const { id } = useParams()
 
   const { price_list, isLoading, isError, error } = usePriceList(id!)
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !price_list) {
     return (

packages/admin/dashboard/src/routes/price-lists/price-list-list/price-list-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { PriceListListTable } from "./components/price-list-list-table"
 
 export const PriceListList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

packages/admin/dashboard/src/routes/product-tags/product-tag-detail/product-tag-detail.tsx

@@ -2,8 +2,8 @@ import { useLoaderData, useParams } from "react-router-dom"
 
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
 import { useProductTag } from "../../../hooks/api"
+import { useExtension } from "../../../providers/extension-provider"
 import { ProductTagGeneralSection } from "./components/product-tag-general-section"
 import { ProductTagProductSection } from "./components/product-tag-product-section"
 import { productTagLoader } from "./loader"
@@ -15,7 +15,7 @@ export const ProductTagDetail = () => {
     ReturnType<typeof productTagLoader>
   >
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   const { product_tag, isPending, isError, error } = useProductTag(
     id!,

packages/admin/dashboard/src/routes/product-tags/product-tag-list/product-tag-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { ProductTagListTable } from "./components/product-tag-list-table"
 
 export const ProductTagList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

packages/admin/dashboard/src/routes/product-types/product-type-detail/product-type-detail.tsx

@@ -2,8 +2,8 @@ import { useLoaderData, useParams } from "react-router-dom"
 
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
 import { useProductType } from "../../../hooks/api/product-types"
+import { useExtension } from "../../../providers/extension-provider"
 import { ProductTypeGeneralSection } from "./components/product-type-general-section"
 import { ProductTypeProductSection } from "./components/product-type-product-section"
 import { productTypeLoader } from "./loader"
@@ -22,7 +22,7 @@ export const ProductTypeDetail = () => {
     }
   )
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isPending || !product_type) {
     return <SingleColumnPageSkeleton sections={2} showJSON showMetadata />

packages/admin/dashboard/src/routes/product-types/product-type-list/product-type-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { ProductTypeListTable } from "./components/product-type-list-table"
 
 export const ProductTypeList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

packages/admin/dashboard/src/routes/product-variants/product-variant-detail/product-variant-detail.tsx

@@ -4,7 +4,7 @@ import { useProductVariant } from "../../../hooks/api/products"
 
 import { TwoColumnPageSkeleton } from "../../../components/common/skeleton"
 import { TwoColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { VariantGeneralSection } from "./components/variant-general-section"
 import {
   InventorySectionPlaceholder,
@@ -29,7 +29,7 @@ export const ProductVariantDetail = () => {
     }
   )
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !variant) {
     return (

packages/admin/dashboard/src/routes/products/product-attributes/components/product-attributes-form/product-attributes-form.tsx

@@ -8,10 +8,10 @@ import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import {
   FormExtensionZone,
-  useDashboardExtension,
   useExtendableForm,
-} from "../../../../../extensions"
+} from "../../../../../dashboard-app"
 import { useUpdateProduct } from "../../../../../hooks/api/products"
+import { useExtension } from "../../../../../providers/extension-provider"
 
 type ProductAttributesFormProps = {
   product: HttpTypes.AdminProduct
@@ -43,7 +43,7 @@ export const ProductAttributesForm = ({
 }: ProductAttributesFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-  const { getFormConfigs, getFormFields } = useDashboardExtension()
+  const { getFormConfigs, getFormFields } = useExtension()
 
   const configs = getFormConfigs("product", "attributes")
   const fields = getFormFields("product", "attributes")

packages/admin/dashboard/src/routes/products/product-create/components/product-create-details-form/product-create-details-form.tsx

@@ -2,10 +2,8 @@ import { Divider, Heading } from "@medusajs/ui"
 import { UseFormReturn } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 
-import {
-  FormExtensionZone,
-  useDashboardExtension,
-} from "../../../../../extensions"
+import { FormExtensionZone } from "../../../../../dashboard-app"
+import { useExtension } from "../../../../../providers/extension-provider"
 import { ProductCreateSchemaType } from "../../types"
 import { ProductCreateGeneralSection } from "./components/product-create-details-general-section"
 import { ProductCreateMediaSection } from "./components/product-create-details-media-section"
@@ -16,7 +14,7 @@ type ProductAttributesProps = {
 }
 
 export const ProductCreateDetailsForm = ({ form }: ProductAttributesProps) => {
-  const { getFormFields } = useDashboardExtension()
+  const { getFormFields } = useExtension()
   const fields = getFormFields("product", "create", "general")
 
   return (

packages/admin/dashboard/src/routes/products/product-create/components/product-create-form/product-create-form.tsx

@@ -8,12 +8,10 @@ import {
   useRouteModal,
 } from "../../../../../components/modals"
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
-import {
-  useDashboardExtension,
-  useExtendableForm,
-} from "../../../../../extensions"
+import { useExtendableForm } from "../../../../../dashboard-app/forms/hooks"
 import { useCreateProduct } from "../../../../../hooks/api/products"
 import { sdk } from "../../../../../lib/client"
+import { useExtension } from "../../../../../providers/extension-provider"
 import {
   PRODUCT_CREATE_FORM_DEFAULTS,
   ProductCreateSchema,
@@ -58,7 +56,7 @@ export const ProductCreateForm = ({
 
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-  const { getFormConfigs } = useDashboardExtension()
+  const { getFormConfigs } = useExtension()
   const configs = getFormConfigs("product", "create")
 
   const form = useExtendableForm({

packages/admin/dashboard/src/routes/products/product-create/components/product-create-organize-form/product-create-organize-form.tsx

@@ -1,10 +1,8 @@
 import { UseFormReturn } from "react-hook-form"
 
 import { StackedFocusModal } from "../../../../../components/modals"
-import {
-  FormExtensionZone,
-  useDashboardExtension,
-} from "../../../../../extensions"
+import { FormExtensionZone } from "../../../../../dashboard-app"
+import { useExtension } from "../../../../../providers/extension-provider"
 import { ProductCreateSchemaType } from "../../types"
 import { ProductCreateOrganizationSection } from "./components/product-create-organize-section"
 import { ProductCreateSalesChannelStackedModal } from "./components/product-create-sales-channel-stacked-modal"
@@ -15,7 +13,7 @@ type ProductAttributesProps = {
 }
 
 export const ProductCreateOrganizeForm = ({ form }: ProductAttributesProps) => {
-  const { getFormFields } = useDashboardExtension()
+  const { getFormFields } = useExtension()
   const fields = getFormFields("product", "create", "organize")
 
   return (

packages/admin/dashboard/src/routes/products/product-detail/components/product-attribute-section/product-attribute-section.tsx

@@ -4,8 +4,8 @@ import { Container, Heading } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { SectionRow } from "../../../../../components/common/section"
-import { useDashboardExtension } from "../../../../../extensions"
 import { getFormattedCountry } from "../../../../../lib/addresses"
+import { useExtension } from "../../../../../providers/extension-provider"
 
 type ProductAttributeSectionProps = {
   product: HttpTypes.AdminProduct
@@ -15,7 +15,7 @@ export const ProductAttributeSection = ({
   product,
 }: ProductAttributeSectionProps) => {
   const { t } = useTranslation()
-  const { getDisplays } = useDashboardExtension()
+  const { getDisplays } = useExtension()
 
   return (
     <Container className="divide-y p-0">

packages/admin/dashboard/src/routes/products/product-detail/components/product-general-section/product-general-section.tsx

@@ -6,8 +6,8 @@ import { useNavigate } from "react-router-dom"
 
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { SectionRow } from "../../../../../components/common/section"
-import { useDashboardExtension } from "../../../../../extensions"
 import { useDeleteProduct } from "../../../../../hooks/api/products"
+import { useExtension } from "../../../../../providers/extension-provider"
 
 const productStatusColor = (status: string) => {
   switch (status) {
@@ -34,7 +34,7 @@ export const ProductGeneralSection = ({
   const { t } = useTranslation()
   const prompt = usePrompt()
   const navigate = useNavigate()
-  const { getDisplays } = useDashboardExtension()
+  const { getDisplays } = useExtension()
 
   const displays = getDisplays("product", "general")
 

packages/admin/dashboard/src/routes/products/product-detail/components/product-organization-section/product-organization-section.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next"
 import { Link } from "react-router-dom"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { SectionRow } from "../../../../../components/common/section"
-import { useDashboardExtension } from "../../../../../extensions"
+import { useExtension } from "../../../../../providers/extension-provider"
 
 type ProductOrganizationSectionProps = {
   product: HttpTypes.AdminProduct
@@ -15,7 +15,7 @@ export const ProductOrganizationSection = ({
   product,
 }: ProductOrganizationSectionProps) => {
   const { t } = useTranslation()
-  const { getDisplays } = useDashboardExtension()
+  const { getDisplays } = useExtension()
 
   return (
     <Container className="divide-y p-0">

packages/admin/dashboard/src/routes/products/product-detail/constants.ts

@@ -1,4 +1,4 @@
-import { getLinkedFields } from "../../../extensions"
+import { getLinkedFields } from "../../../dashboard-app"
 
 export const PRODUCT_DETAIL_FIELDS = getLinkedFields(
   "product",

packages/admin/dashboard/src/routes/products/product-detail/product-detail.tsx

@@ -13,7 +13,7 @@ import { ProductVariantSection } from "./components/product-variant-section"
 import { PRODUCT_DETAIL_FIELDS } from "./constants"
 import { productLoader } from "./loader"
 
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { ProductShippingProfileSection } from "./components/product-shipping-profile-section"
 
 export const ProductDetail = () => {
@@ -30,7 +30,7 @@ export const ProductDetail = () => {
     }
   )
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   const after = getWidgets("product.details.after")
   const before = getWidgets("product.details.before")

packages/admin/dashboard/src/routes/products/product-edit/components/edit-product-form/edit-product-form.tsx

@@ -6,15 +6,13 @@ import { HttpTypes } from "@medusajs/types"
 import { Form } from "../../../../../components/common/form"
 import { SwitchBox } from "../../../../../components/common/switch-box"
 import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
-import { useExtendableForm } from "../../../../../extensions/forms/hooks"
+import { useExtendableForm } from "../../../../../dashboard-app/forms/hooks"
 import { useUpdateProduct } from "../../../../../hooks/api/products"
 import { transformNullableFormData } from "../../../../../lib/form-helpers"
 
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
-import {
-  FormExtensionZone,
-  useDashboardExtension,
-} from "../../../../../extensions"
+import { FormExtensionZone } from "../../../../../dashboard-app"
+import { useExtension } from "../../../../../providers/extension-provider"
 
 type EditProductFormProps = {
   product: HttpTypes.AdminProduct
@@ -34,7 +32,7 @@ export const EditProductForm = ({ product }: EditProductFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
 
-  const { getFormFields, getFormConfigs } = useDashboardExtension()
+  const { getFormFields, getFormConfigs } = useExtension()
   const fields = getFormFields("product", "edit")
   const configs = getFormConfigs("product", "edit")
 

packages/admin/dashboard/src/routes/products/product-list/product-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { ProductListTable } from "./components/product-list-table"
 
 export const ProductList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

packages/admin/dashboard/src/routes/products/product-organization/components/product-organization-form/product-organization-form.tsx

@@ -9,12 +9,12 @@ import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import {
   FormExtensionZone,
-  useDashboardExtension,
   useExtendableForm,
-} from "../../../../../extensions"
+} from "../../../../../dashboard-app"
 import { useUpdateProduct } from "../../../../../hooks/api/products"
 import { useComboboxData } from "../../../../../hooks/use-combobox-data"
 import { sdk } from "../../../../../lib/client"
+import { useExtension } from "../../../../../providers/extension-provider"
 import { CategoryCombobox } from "../../../common/components/category-combobox"
 
 type ProductOrganizationFormProps = {
@@ -33,7 +33,7 @@ export const ProductOrganizationForm = ({
 }: ProductOrganizationFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-  const { getFormConfigs, getFormFields } = useDashboardExtension()
+  const { getFormConfigs, getFormFields } = useExtension()
 
   const configs = getFormConfigs("product", "organize")
   const fields = getFormFields("product", "organize")

packages/admin/dashboard/src/routes/profile/profile-detail/profile-detail.tsx

@@ -3,11 +3,11 @@ import { ProfileGeneralSection } from "./components/profile-general-section"
 
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 
 export const ProfileDetail = () => {
   const { user, isPending: isLoading, isError, error } = useMe()
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !user) {
     return <SingleColumnPageSkeleton sections={1} />

packages/admin/dashboard/src/routes/promotions/promotion-detail/promotion-detail.tsx

@@ -2,8 +2,8 @@ import { useLoaderData, useParams } from "react-router-dom"
 
 import { TwoColumnPageSkeleton } from "../../../components/common/skeleton"
 import { TwoColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
 import { usePromotion, usePromotionRules } from "../../../hooks/api/promotions"
+import { useExtension } from "../../../providers/extension-provider"
 import { CampaignSection } from "./components/campaign-section"
 import { PromotionConditionsSection } from "./components/promotion-conditions-section"
 import { PromotionGeneralSection } from "./components/promotion-general-section"
@@ -26,7 +26,7 @@ export const PromotionDetail = () => {
   const { rules: targetRules } = usePromotionRules(id!, "target-rules", query)
   const { rules: buyRules } = usePromotionRules(id!, "buy-rules", query)
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !promotion) {
     return (

packages/admin/dashboard/src/routes/promotions/promotion-list/promotions-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { PromotionListTable } from "./components/promotion-list-table"
 
 export const PromotionsList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

packages/admin/dashboard/src/routes/regions/region-detail/region-detail.tsx

@@ -7,8 +7,8 @@ import { regionLoader } from "./loader"
 
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
 import { usePricePreferences } from "../../../hooks/api/price-preferences"
+import { useExtension } from "../../../providers/extension-provider"
 import { REGION_DETAIL_FIELDS } from "./constants"
 
 export const RegionDetail = () => {
@@ -43,7 +43,7 @@ export const RegionDetail = () => {
     { enabled: !!region }
   )
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || isLoadingPreferences || !region) {
     return <SingleColumnPageSkeleton sections={2} showJSON showMetadata />

packages/admin/dashboard/src/routes/regions/region-list/region-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { RegionListTable } from "./components/region-list-table"
 
 export const RegionList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

packages/admin/dashboard/src/routes/reservations/reservation-detail/reservation-detail.tsx

@@ -2,12 +2,12 @@ import { useLoaderData, useParams } from "react-router-dom"
 
 import { TwoColumnPageSkeleton } from "../../../components/common/skeleton"
 import { TwoColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useInventoryItem } from "../../../hooks/api"
 import { useReservationItem } from "../../../hooks/api/reservations"
+import { useExtension } from "../../../providers/extension-provider"
 import { InventoryItemGeneralSection } from "../../inventory/inventory-detail/components/inventory-item-general-section"
 import { ReservationGeneralSection } from "./components/reservation-general-section"
 import { reservationItemLoader } from "./loader"
-import { useInventoryItem } from "../../../hooks/api"
 
 export const ReservationDetail = () => {
   const { id } = useParams()
@@ -31,7 +31,7 @@ export const ReservationDetail = () => {
     { enabled: !!reservation?.inventory_item?.id! }
   )
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !reservation) {
     return (

packages/admin/dashboard/src/routes/reservations/reservation-list/reservation-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { ReservationListTable } from "./components/reservation-list-table"
 
 export const ReservationList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

packages/admin/dashboard/src/routes/return-reasons/return-reason-list/return-reason-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { ReturnReasonListTable } from "./components/return-reason-list-table"
 
 export const ReturnReasonList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

packages/admin/dashboard/src/routes/sales-channels/sales-channel-detail/sales-channel-detail.tsx

@@ -2,8 +2,8 @@ import { useLoaderData, useParams } from "react-router-dom"
 
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
 import { useSalesChannel } from "../../../hooks/api/sales-channels"
+import { useExtension } from "../../../providers/extension-provider"
 import { SalesChannelGeneralSection } from "./components/sales-channel-general-section"
 import { SalesChannelProductSection } from "./components/sales-channel-product-section"
 import { salesChannelLoader } from "./loader"
@@ -18,7 +18,7 @@ export const SalesChannelDetail = () => {
     initialData,
   })
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !sales_channel) {
     return <SingleColumnPageSkeleton sections={2} showJSON showMetadata />

packages/admin/dashboard/src/routes/sales-channels/sales-channel-list/sales-channel-list.tsx

@@ -1,10 +1,10 @@
 import { SalesChannelListTable } from "./components/sales-channel-list-table"
 
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 
 export const SalesChannelList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

packages/admin/dashboard/src/routes/shipping-profiles/shipping-profile-detail/shipping-profile-detail.tsx

@@ -5,7 +5,7 @@ import { useShippingProfile } from "../../../hooks/api/shipping-profiles"
 import { ShippingProfileGeneralSection } from "./components/shipping-profile-general-section"
 
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { shippingProfileLoader } from "./loader"
 
 export const ShippingProfileDetail = () => {
@@ -21,7 +21,7 @@ export const ShippingProfileDetail = () => {
     { initialData }
   )
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !shipping_profile) {
     return <SingleColumnPageSkeleton sections={1} showJSON showMetadata />

packages/admin/dashboard/src/routes/shipping-profiles/shipping-profiles-list/shipping-profile-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { ShippingProfileListTable } from "./components/shipping-profile-list-table"
 
 export const ShippingProfileList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

packages/admin/dashboard/src/routes/store/store-detail/components/store-currency-section/store-currency-section.tsx

@@ -13,15 +13,15 @@ import { RowSelectionState, createColumnHelper } from "@tanstack/react-table"
 import { useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 
-import { ActionMenu } from "../../../../../../components/common/action-menu"
-import { _DataTable } from "../../../../../../components/table/data-table"
-import { StatusCell } from "../../../../../../components/table/table-cells/common/status-cell"
-import { useCurrencies } from "../../../../../../hooks/api/currencies"
-import { usePricePreferences } from "../../../../../../hooks/api/price-preferences"
-import { useUpdateStore } from "../../../../../../hooks/api/store"
-import { useDataTable } from "../../../../../../hooks/use-data-table"
-import { useCurrenciesTableColumns } from "../../../../common/hooks/use-currencies-table-columns"
-import { useCurrenciesTableQuery } from "../../../../common/hooks/use-currencies-table-query"
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { _DataTable } from "../../../../../components/table/data-table"
+import { StatusCell } from "../../../../../components/table/table-cells/common/status-cell"
+import { useCurrencies } from "../../../../../hooks/api/currencies"
+import { usePricePreferences } from "../../../../../hooks/api/price-preferences"
+import { useUpdateStore } from "../../../../../hooks/api/store"
+import { useDataTable } from "../../../../../hooks/use-data-table"
+import { useCurrenciesTableColumns } from "../../../common/hooks/use-currencies-table-columns"
+import { useCurrenciesTableQuery } from "../../../common/hooks/use-currencies-table-query"
 
 type StoreCurrencySectionProps = {
   store: HttpTypes.AdminStore

packages/admin/dashboard/src/routes/store/store-detail/store-detail.tsx

@@ -1,13 +1,13 @@
 import { useLoaderData } from "react-router-dom"
 
-import { useStore } from "../../../hooks/api/store.tsx"
-import { StoreCurrencySection } from "./components/store-currency-section/store-currencies-section.tsx/index.ts"
-import { StoreGeneralSection } from "./components/store-general-section/index.ts"
-import { storeLoader } from "./loader.ts"
+import { useStore } from "../../../hooks/api/store"
+import { StoreGeneralSection } from "./components/store-general-section"
+import { storeLoader } from "./loader"
 
-import { SingleColumnPageSkeleton } from "../../../components/common/skeleton/skeleton.tsx"
-import { SingleColumnPage } from "../../../components/layout/pages/index.ts"
-import { useDashboardExtension } from "../../../extensions/index.ts"
+import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
+import { SingleColumnPage } from "../../../components/layout/pages"
+import { useExtension } from "../../../providers/extension-provider"
+import { StoreCurrencySection } from "./components/store-currency-section"
 
 export const StoreDetail = () => {
   const initialData = useLoaderData() as Awaited<ReturnType<typeof storeLoader>>
@@ -16,7 +16,7 @@ export const StoreDetail = () => {
     initialData,
   })
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isPending || !store) {
     return <SingleColumnPageSkeleton sections={2} showJSON showMetadata />

packages/admin/dashboard/src/routes/tax-regions/tax-region-detail/tax-region-detail.tsx

@@ -7,7 +7,7 @@ import { TaxRegionProvinceSection } from "./components/tax-region-province-secti
 
 import { useState } from "react"
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { TaxRegionOverrideSection } from "./components/tax-region-override-section"
 import { TaxRegionSublevelAlert } from "./components/tax-region-sublevel-alert"
 import { taxRegionLoader } from "./loader"
@@ -27,7 +27,7 @@ export const TaxRegionDetail = () => {
     error,
   } = useTaxRegion(id!, undefined, { initialData })
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !taxRegion) {
     return <SingleColumnPageSkeleton sections={4} showJSON />

packages/admin/dashboard/src/routes/tax-regions/tax-region-list/tax-region-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { TaxRegionListView } from "./components/tax-region-list-view"
 
 export const TaxRegionsList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

packages/admin/dashboard/src/routes/tax-regions/tax-region-province-detail/tax-region-detail.tsx

@@ -5,7 +5,7 @@ import { useTaxRegion } from "../../../hooks/api/tax-regions"
 import { TaxRegionProvinceDetailSection } from "./components/tax-region-province-detail-section"
 
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { TaxRegionProvinceOverrideSection } from "./components/tax-region-province-override-section"
 import { taxRegionLoader } from "./loader"
 
@@ -23,7 +23,7 @@ export const TaxRegionDetail = () => {
     error,
   } = useTaxRegion(province_id!, undefined, { initialData })
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !taxRegion) {
     return <SingleColumnPageSkeleton sections={2} showJSON />

packages/admin/dashboard/src/routes/users/user-detail/user-detail.tsx

@@ -6,7 +6,7 @@ import { userLoader } from "./loader"
 
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 
 export const UserDetail = () => {
   const initialData = useLoaderData() as Awaited<ReturnType<typeof userLoader>>
@@ -21,7 +21,7 @@ export const UserDetail = () => {
     initialData,
   })
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !user) {
     return <SingleColumnPageSkeleton sections={1} showJSON showMetadata />

packages/admin/dashboard/src/routes/users/user-list/user-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { UserListTable } from "./components/user-list-table"
 
 export const UserList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

packages/admin/dashboard/src/routes/workflow-executions/workflow-execution-detail/workflow-detail.tsx

@@ -2,8 +2,8 @@ import { useParams } from "react-router-dom"
 
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
 import { useWorkflowExecution } from "../../../hooks/api/workflow-executions"
+import { useExtension } from "../../../providers/extension-provider"
 import { WorkflowExecutionGeneralSection } from "./components/workflow-execution-general-section"
 import { WorkflowExecutionHistorySection } from "./components/workflow-execution-history-section"
 import { WorkflowExecutionPayloadSection } from "./components/workflow-execution-payload-section"
@@ -15,7 +15,7 @@ export const ExecutionDetail = () => {
   const { workflow_execution, isLoading, isError, error } =
     useWorkflowExecution(id!)
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !workflow_execution) {
     return <SingleColumnPageSkeleton sections={4} showJSON />

packages/admin/dashboard/src/routes/workflow-executions/workflow-execution-list/workflow-execution-list.tsx

@@ -1,10 +1,10 @@
 import { WorkflowExecutionListTable } from "./components/workflow-execution-list-table"
 
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 
 export const WorkflowExcecutionList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

packages/admin/dashboard/src/vite-env.d.ts

@@ -8,6 +8,9 @@ interface ImportMetaEnv {
 
 interface ImportMeta {
   readonly env: ImportMetaEnv
+  readonly hot: {
+    accept: () => void
+  }
 }
 
 declare const __BACKEND_URL__: string | undefined