@vendure/dashboard 3.3.6-master-202507020959 → 3.3.6-master-202507030234

package/README.md

@@ -1,13 +1,50 @@
 # Vendure Dashboard
 
-This is an admin dashboard for managing Vendure applications. It is designed to supersede the existing Admin UI.
-
-Current status: early work in progress
+This is a React-based admin dashboard for Vendure. It is a standalone application that can be extended to suit the
+needs of any Vendure project.
 
 ## Development
 
 Run `npx vite` to start Vite in dev mode.
 
+### Note on internal `@/vdb` imports
+
+You will notice that the dashboard uses internal Vendure Dashboard imports prefixed with `@/vdb`. This is adapted from the
+convention of Shadcn which uses a `@/*` path alias for internal imports.
+
+**Why not just use relative imports?**
+
+The problem with using relative imports is that they are handled differently by Vite when compiling the dashboard. This
+manifests as things like React Context not working correctly. The underlying reason is that Vite will selectively
+pre-compile source code and mixing the imports between alias and relative can result in 2 "versions" of the same code
+being loaded, which causes issues with React Context and other things that rely on a single instance of a module.
+
+For this reason, try to use the `@/vdb` alias for all internal Vendure Dashboard imports to the "src/lib" directory.
+
+This is especially import for hooks (since many of them use React Context) and there is even a pre-commit hook
+that will run [a script](./scripts/check-internal-imports.js) to ensure that you are not using relative imports for
+internal Vendure Dashboard code.
+
+**Type Safety for Consumers**
+
+Because we ship source code in the npm package, consumers need to tell TypeScript how to resolve these internal
+imports by adding the path alias to _their_ `tsconfig.json` file.
+
+```json
+{
+    "compilerOptions": {
+        "paths": {
+            "@/vdb/*": [
+                "./node_modules/@vendure/dashboard/src/lib/*"
+            ]
+        }
+    }
+}
+```
+
+Note: even without that path alias, the vite compilation will still work, but TypeScript types will not resolve correctly
+when developing dashboard extensions.
+
 ## Testing
 
-Run `npm run test` to run tests once, or `npx vitest` to run tests in watch mode
+Run `npm run test` to run tests once, or `npx vitest` to run tests in watch mode

package/dist/plugin/vite-plugin-config.js

@@ -7,7 +7,7 @@ export function viteConfigPlugin({ packageRoot }) {
             // Only set the vite `root` to the dashboard package when running the dev server.
             // During a production build we still need to reference the dashboard source which
             // lives in `node_modules`, but we don't want the build output to be emitted in there.
-            // Therefore we set `root` only for `serve` and, for `build`, we instead make sure that
+            // Therefore, we set `root` only for `serve` and, for `build`, we instead make sure that
             // an `outDir` **outside** of `node_modules` is used (defaulting to the current working
             // directory if the user did not provide one already).
             config.root = packageRoot;
@@ -26,18 +26,16 @@ export function viteConfigPlugin({ packageRoot }) {
                 config.build = Object.assign(Object.assign({}, buildConfig), { outDir: normalizedOutDir });
             }
             config.resolve = {
-                alias: Object.assign(Object.assign({}, ((_c = (_b = config.resolve) === null || _b === void 0 ? void 0 : _b.alias) !== null && _c !== void 0 ? _c : {})), { '@': path.resolve(packageRoot, './src/lib') }),
+                alias: Object.assign(Object.assign({}, ((_c = (_b = config.resolve) === null || _b === void 0 ? void 0 : _b.alias) !== null && _c !== void 0 ? _c : {})), { 
+                    // See the readme for an explanation of this alias.
+                    '@/vdb': path.resolve(packageRoot, './src/lib'), '@/graphql': path.resolve(packageRoot, './src/lib/graphql') }),
             };
             // This is required to prevent Vite from pre-bundling the
             // dashboard source when it resides in node_modules.
             config.optimizeDeps = Object.assign(Object.assign({}, config.optimizeDeps), { exclude: [
                     ...(((_d = config.optimizeDeps) === null || _d === void 0 ? void 0 : _d.exclude) || []),
                     '@vendure/dashboard',
-                    '@/providers',
-                    '@/framework',
-                    '@/lib',
-                    '@/components',
-                    '@/hooks',
+                    '@/vdb',
                     'virtual:vendure-ui-config',
                     'virtual:admin-api-schema',
                     'virtual:dashboard-extensions',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vendure/dashboard",
   "private": false,
-  "version": "3.3.6-master-202507020959",
+  "version": "3.3.6-master-202507030234",
   "type": "module",
   "repository": {
     "type": "git",
@@ -86,8 +86,8 @@
     "@types/react-dom": "^19.0.4",
     "@types/react-grid-layout": "^1.3.5",
     "@uidotdev/usehooks": "^2.4.1",
-    "@vendure/common": "^3.3.6-master-202507020959",
-    "@vendure/core": "^3.3.6-master-202507020959",
+    "@vendure/common": "^3.3.6-master-202507030234",
+    "@vendure/core": "^3.3.6-master-202507030234",
     "@vitejs/plugin-react": "^4.3.4",
     "awesome-graphql-client": "^2.1.0",
     "class-variance-authority": "^0.7.1",
@@ -130,5 +130,5 @@
     "lightningcss-linux-arm64-musl": "^1.29.3",
     "lightningcss-linux-x64-musl": "^1.29.1"
   },
-  "gitHead": "5ee07181c993fe6edee6c000fe4cd90ffcba852f"
+  "gitHead": "ca527d7a89a9cff83d965e384e5f3d27c24efe82"
 }

package/src/app/app-providers.tsx

@@ -1,9 +1,9 @@
-import { AuthProvider } from '@/providers/auth.js';
-import { ChannelProvider } from '@/providers/channel-provider.js';
-import { I18nProvider } from '@/providers/i18n-provider.js';
-import { ServerConfigProvider } from '@/providers/server-config.js';
-import { ThemeProvider } from '@/providers/theme-provider.js';
-import { UserSettingsProvider } from '@/providers/user-settings.js';
+import { AuthProvider } from '@/vdb/providers/auth.js';
+import { ChannelProvider } from '@/vdb/providers/channel-provider.js';
+import { I18nProvider } from '@/vdb/providers/i18n-provider.js';
+import { ServerConfigProvider } from '@/vdb/providers/server-config.js';
+import { ThemeProvider } from '@/vdb/providers/theme-provider.js';
+import { UserSettingsProvider } from '@/vdb/providers/user-settings.js';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React from 'react';

package/src/app/common/delete-bulk-action.tsx

@@ -2,10 +2,10 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { TrashIcon } from 'lucide-react';
 import { toast } from 'sonner';
 
-import { DataTableBulkActionItem } from '@/components/data-table/data-table-bulk-action-item.js';
-import { api } from '@/graphql/api.js';
-import { getMutationName, usePaginatedList } from '@/index.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { api } from '@/vdb/graphql/api.js';
+import { getMutationName, usePaginatedList } from '@/vdb/index.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 
 interface DeleteBulkActionProps {
     /** The GraphQL mutation document to execute */

package/src/app/common/duplicate-bulk-action.tsx

@@ -3,11 +3,11 @@ import { CopyIcon } from 'lucide-react';
 import { useState } from 'react';
 import { toast } from 'sonner';
 
-import { DataTableBulkActionItem } from '@/components/data-table/data-table-bulk-action-item.js';
-import { api } from '@/graphql/api.js';
-import { duplicateEntityDocument } from '@/graphql/common-operations.js';
-import { usePaginatedList } from '@/index.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { api } from '@/vdb/graphql/api.js';
+import { duplicateEntityDocument } from '@/vdb/graphql/common-operations.js';
+import { usePaginatedList } from '@/vdb/index.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 
 interface DuplicateBulkActionProps {
     entityType: 'Product' | 'Collection' | 'Facet' | 'Promotion';

package/src/app/main.tsx

@@ -1,12 +1,12 @@
-import { Toaster } from '@/components/ui/sonner.js';
-import { registerDefaults } from '@/framework/defaults.js';
-import { setCustomFieldsMap } from '@/framework/document-introspection/add-custom-fields.js';
-import { executeDashboardExtensionCallbacks } from '@/framework/extension-api/define-dashboard-extension.js';
-import { useDashboardExtensions } from '@/framework/extension-api/use-dashboard-extensions.js';
-import { useExtendedRouter } from '@/framework/page/use-extended-router.js';
-import { useAuth } from '@/hooks/use-auth.js';
-import { useServerConfig } from '@/hooks/use-server-config.js';
-import { defaultLocale, dynamicActivate } from '@/providers/i18n-provider.js';
+import { Toaster } from '@/vdb/components/ui/sonner.js';
+import { registerDefaults } from '@/vdb/framework/defaults.js';
+import { setCustomFieldsMap } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import { executeDashboardExtensionCallbacks } from '@/vdb/framework/extension-api/define-dashboard-extension.js';
+import { useDashboardExtensions } from '@/vdb/framework/extension-api/use-dashboard-extensions.js';
+import { useExtendedRouter } from '@/vdb/framework/page/use-extended-router.js';
+import { useAuth } from '@/vdb/hooks/use-auth.js';
+import { useServerConfig } from '@/vdb/hooks/use-server-config.js';
+import { defaultLocale, dynamicActivate } from '@/vdb/providers/i18n-provider.js';
 import { createRouter, RouterProvider } from '@tanstack/react-router';
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';

package/src/app/routes/__root.tsx

@@ -1,7 +1,6 @@
-import { AuthContext } from '@/providers/auth.js';
+import { AuthContext } from '@/vdb/providers/auth.js';
 import { QueryClient } from '@tanstack/react-query';
 import { createRootRouteWithContext, Outlet } from '@tanstack/react-router';
-import { TanStackRouterDevtools } from '@tanstack/router-devtools';
 
 export interface MyRouterContext {
     auth: AuthContext;

package/src/app/routes/_authenticated/_administrators/administrators.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const administratorItemFragment = graphql(`
     fragment AdministratorItem on Administrator {

package/src/app/routes/_authenticated/_administrators/administrators.tsx

@@ -1,11 +1,11 @@
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { RoleCodeLabel } from '@/components/shared/role-code-label.js';
-import { Badge } from '@/components/ui/badge.js';
-import { Button } from '@/components/ui/button.js';
-import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
-import { ListPage } from '@/framework/page/list-page.js';
-import { Trans } from '@/lib/trans.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { RoleCodeLabel } from '@/vdb/components/shared/role-code-label.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/vdb/framework/page/list-page.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { administratorListDocument, deleteAdministratorDocument } from './administrators.graphql.js';

package/src/app/routes/_authenticated/_administrators/administrators_.$id.tsx

@@ -1,10 +1,10 @@
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { RoleSelector } from '@/components/shared/role-selector.js';
-import { Button } from '@/components/ui/button.js';
-import { Input } from '@/components/ui/input.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { RoleSelector } from '@/vdb/components/shared/role-selector.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
     CustomFieldsPageBlock,
     Page,
@@ -13,10 +13,10 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
-import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import {

package/src/app/routes/_authenticated/_administrators/components/administrator-bulk-actions.tsx

@@ -1,4 +1,4 @@
-import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { deleteAdministratorsDocument } from '../administrators.graphql.js';
 

package/src/app/routes/_authenticated/_administrators/components/role-permissions-display.tsx

@@ -1,11 +1,11 @@
-import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
-import { Checkbox } from '@/components/ui/checkbox.js';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs.js';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { useGroupedPermissions } from '@/hooks/use-grouped-permissions.js';
-import { useLingui } from '@/lib/trans.js';
+import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
+import { Checkbox } from '@/vdb/components/ui/checkbox.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/vdb/components/ui/tabs.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useGroupedPermissions } from '@/vdb/hooks/use-grouped-permissions.js';
+import { useLingui } from '@/vdb/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
 
 const rolesByIdDocument = graphql(`
@@ -28,7 +28,7 @@ interface RolePermissionsDisplayProps {
     value: string[];
 }
 
-export function RolePermissionsDisplay({ value = [] }: RolePermissionsDisplayProps) {
+export function RolePermissionsDisplay({ value = [] }: Readonly<RolePermissionsDisplayProps>) {
     const { i18n } = useLingui();
     const groupedPermissions = useGroupedPermissions();
 
@@ -46,9 +46,9 @@ export function RolePermissionsDisplay({ value = [] }: RolePermissionsDisplayPro
 
     const roles = data?.roles.items ?? [];
 
-    const allChannels = roles.flatMap(role => role.channels).filter((channel, index, self) =>
-        index === self.findIndex((t) => t.code === channel.code),
-    );
+    const allChannels = roles
+        .flatMap(role => role.channels)
+        .filter((channel, index, self) => index === self.findIndex(t => t.code === channel.code));
 
     const isPermissionEnabled = (permissionName: string, channelCode: string) => {
         // Check if any role has this permission for this channel
@@ -87,7 +87,9 @@ export function RolePermissionsDisplay({ value = [] }: RolePermissionsDisplayPro
                                 {groupedPermissions.map((group, idx) => (
                                     <tr
                                         key={group.label}
-                                        className={idx !== groupedPermissions.length - 1 ? 'border-b' : undefined}
+                                        className={
+                                            idx !== groupedPermissions.length - 1 ? 'border-b' : undefined
+                                        }
                                     >
                                         <td className="p-4">
                                             <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
@@ -106,9 +108,7 @@ export function RolePermissionsDisplay({ value = [] }: RolePermissionsDisplayPro
                                                         <TooltipProvider>
                                                             <Tooltip>
                                                                 <TooltipTrigger asChild>
-                                                                    <label
-                                                                        className="text-sm cursor-default"
-                                                                    >
+                                                                    <label className="text-sm cursor-default">
                                                                         {i18n.t(permission.name)}
                                                                     </label>
                                                                 </TooltipTrigger>

package/src/app/routes/_authenticated/_assets/assets.graphql.ts

@@ -1,5 +1,5 @@
-import { assetFragment } from '@/graphql/fragments.js';
-import { graphql } from '@/graphql/graphql.js';
+import { assetFragment } from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const assetDetailDocument = graphql(
     `

package/src/app/routes/_authenticated/_assets/assets.tsx

@@ -1,6 +1,6 @@
-import { AssetGallery } from '@/components/shared/asset/asset-gallery.js';
-import { Page, PageBlock, PageTitle } from '@/framework/layout-engine/page-layout.js';
-import { Trans } from '@/lib/trans.js';
+import { AssetGallery } from '@/vdb/components/shared/asset/asset-gallery.js';
+import { Page, PageBlock, PageTitle } from '@/vdb/framework/layout-engine/page-layout.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute } from '@tanstack/react-router';
 import { DeleteAssetsBulkAction } from './components/asset-bulk-actions.js';
 
@@ -15,11 +15,15 @@ function RouteComponent() {
                 <Trans>Assets</Trans>
             </PageTitle>
             <PageBlock blockId="asset-gallery" column="main">
-                <AssetGallery selectable={true} multiSelect="manual" bulkActions={[{
-                        order: 10,
-                        component: DeleteAssetsBulkAction,
-                    },
-                ]}
+                <AssetGallery
+                    selectable={true}
+                    multiSelect="manual"
+                    bulkActions={[
+                        {
+                            order: 10,
+                            component: DeleteAssetsBulkAction,
+                        },
+                    ]}
                 />
             </PageBlock>
         </Page>

package/src/app/routes/_authenticated/_assets/assets_.$id.tsx

@@ -1,13 +1,13 @@
-import { AssetFocalPointEditor } from '@/components/shared/asset/asset-focal-point-editor.js';
-import { AssetPreviewSelector } from '@/components/shared/asset/asset-preview-selector.js';
-import { PreviewPreset } from '@/components/shared/asset/asset-preview.js';
-import { AssetProperties } from '@/components/shared/asset/asset-properties.js';
-import { Point } from '@/components/shared/asset/focal-point-control.js';
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { VendureImage } from '@/components/shared/vendure-image.js';
-import { Button } from '@/components/ui/button.js';
-import { Label } from '@/components/ui/label.js';
+import { AssetFocalPointEditor } from '@/vdb/components/shared/asset/asset-focal-point-editor.js';
+import { AssetPreviewSelector } from '@/vdb/components/shared/asset/asset-preview-selector.js';
+import { PreviewPreset } from '@/vdb/components/shared/asset/asset-preview.js';
+import { AssetProperties } from '@/vdb/components/shared/asset/asset-properties.js';
+import { Point } from '@/vdb/components/shared/asset/focal-point-control.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Label } from '@/vdb/components/ui/label.js';
 import {
     CustomFieldsPageBlock,
     Page,
@@ -16,10 +16,10 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
-import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { createFileRoute } from '@tanstack/react-router';
 import { FocusIcon } from 'lucide-react';
 import { useRef, useState } from 'react';

package/src/app/routes/_authenticated/_assets/components/asset-bulk-actions.tsx

@@ -2,11 +2,11 @@ import { useMutation } from '@tanstack/react-query';
 import { TrashIcon } from 'lucide-react';
 import { toast } from 'sonner';
 
-import { DataTableBulkActionItem } from '@/components/data-table/data-table-bulk-action-item.js';
-import { api } from '@/graphql/api.js';
-import { AssetFragment } from '@/graphql/fragments.js';
-import { ResultOf } from '@/graphql/graphql.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { api } from '@/vdb/graphql/api.js';
+import { AssetFragment } from '@/vdb/graphql/fragments.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { deleteAssetsDocument } from '../assets.graphql.js';
 
 export const DeleteAssetsBulkAction = ({

package/src/app/routes/_authenticated/_channels/channels.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const channelItemFragment = graphql(`
     fragment ChannelItem on Channel {

package/src/app/routes/_authenticated/_channels/channels.tsx

@@ -1,14 +1,14 @@
-import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
-import { ListPage } from '@/framework/page/list-page.js';
-import { Trans } from '@/lib/trans.js';
+import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/vdb/framework/page/list-page.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { channelListQuery, deleteChannelDocument } from './channels.graphql.js';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
 import { DeleteChannelsBulkAction } from './components/channel-bulk-actions.js';
 
 export const Route = createFileRoute('/_authenticated/_channels/channels')({
@@ -54,13 +54,13 @@ function ChannelListPage() {
                     header: 'Seller',
                     cell: ({ row }) => {
                         return row.original.seller?.name;
-                    }
+                    },
                 },
                 defaultLanguageCode: {
                     header: 'Default Language',
                     cell: ({ row }) => {
                         return formatLanguageName(row.original.defaultLanguageCode);
-                    }
+                    },
                 },
             }}
             bulkActions={[

package/src/app/routes/_authenticated/_channels/channels_.$id.tsx

@@ -1,15 +1,15 @@
-import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
-import { CurrencySelector } from '@/components/shared/currency-selector.js';
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { LanguageSelector } from '@/components/shared/language-selector.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { SellerSelector } from '@/components/shared/seller-selector.js';
-import { ZoneSelector } from '@/components/shared/zone-selector.js';
-import { Button } from '@/components/ui/button.js';
-import { Input } from '@/components/ui/input.js';
-import { Switch } from '@/components/ui/switch.js';
-import { DEFAULT_CHANNEL_CODE, NEW_ENTITY_PATH } from '@/constants.js';
+import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
+import { CurrencySelector } from '@/vdb/components/shared/currency-selector.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { LanguageSelector } from '@/vdb/components/shared/language-selector.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { SellerSelector } from '@/vdb/components/shared/seller-selector.js';
+import { ZoneSelector } from '@/vdb/components/shared/zone-selector.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Switch } from '@/vdb/components/ui/switch.js';
+import { DEFAULT_CHANNEL_CODE, NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -19,10 +19,10 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
-import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { channelDetailDocument, createChannelDocument, updateChannelDocument } from './channels.graphql.js';

package/src/app/routes/_authenticated/_channels/components/channel-bulk-actions.tsx

@@ -1,6 +1,6 @@
-import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { deleteChannelsDocument } from '../channels.graphql.js';
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
 
 export const DeleteChannelsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
     return (

package/src/app/routes/_authenticated/_collections/collections.graphql.ts

@@ -1,10 +1,10 @@
-import { api } from '@/graphql/api.js';
+import { api } from '@/vdb/graphql/api.js';
 import {
     assetFragment,
     configurableOperationDefFragment,
     configurableOperationFragment,
-} from '@/graphql/fragments.js';
-import { graphql, ResultOf } from '@/graphql/graphql.js';
+} from '@/vdb/graphql/fragments.js';
+import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
 import { DefinedInitialDataOptions, queryOptions } from '@tanstack/react-query';
 
 export const collectionListDocument = graphql(

package/src/app/routes/_authenticated/_collections/collections.tsx

@@ -1,10 +1,10 @@
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
-import { ListPage } from '@/framework/page/list-page.js';
-import { api } from '@/graphql/api.js';
-import { Trans } from '@/lib/trans.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/vdb/framework/page/list-page.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { FetchQueryOptions, useQueries } from '@tanstack/react-query';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { ExpandedState, getExpandedRowModel } from '@tanstack/react-table';

package/src/app/routes/_authenticated/_collections/collections_.$id.tsx

@@ -1,14 +1,14 @@
-import { RichTextInput } from '@/components/data-input/richt-text-input.js';
-import { EntityAssets } from '@/components/shared/entity-assets.js';
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { TranslatableFormFieldWrapper } from '@/components/shared/translatable-form-field.js';
-import { Button } from '@/components/ui/button.js';
-import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import { Switch } from '@/components/ui/switch.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
+import { RichTextInput } from '@/vdb/components/data-input/richt-text-input.js';
+import { EntityAssets } from '@/vdb/components/shared/entity-assets.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Switch } from '@/vdb/components/ui/switch.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -18,10 +18,10 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
-import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import {