@vendure/dashboard 3.3.6-master-202507050232 → 3.4.0-minor-202506250934

package/src/lib/framework/form-engine/use-generated-form.tsx

@@ -1,28 +1,26 @@
+import { getOperationVariablesFields } from '@/framework/document-introspection/get-document-structure.js';
+import {
+    createFormSchemaFromFields,
+    getDefaultValuesFromFields,
+} from '@/framework/form-engine/form-schema-tools.js';
+import { useChannel } from '@/hooks/use-channel.js';
+import { useServerConfig } from '@/hooks/use-server-config.js';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { VariablesOf } from 'gql.tada';
 import { FormEvent } from 'react';
 import { useForm } from 'react-hook-form';
-import { useChannel } from '../../hooks/use-channel.js';
-import { useServerConfig } from '../../hooks/use-server-config.js';
-import { getOperationVariablesFields } from '../document-introspection/get-document-structure.js';
-import { createFormSchemaFromFields, getDefaultValuesFromFields } from './form-schema-tools.js';
-import { transformRelationFields } from './utils.js';
 
 export interface GeneratedFormOptions<
     T extends TypedDocumentNode<any, any>,
-    VarName extends keyof VariablesOf<T> | undefined = 'input',
+    VarName extends (keyof VariablesOf<T>) | undefined = 'input',
     E extends Record<string, any> = Record<string, any>,
 > {
     document?: T;
     varName?: VarName;
     entity: E | null | undefined;
-    setValues: (
-        entity: NonNullable<E>,
-    ) => VarName extends keyof VariablesOf<T> ? VariablesOf<T>[VarName] : VariablesOf<T>;
-    onSubmit?: (
-        values: VarName extends keyof VariablesOf<T> ? VariablesOf<T>[VarName] : VariablesOf<T>,
-    ) => void;
+    setValues: (entity: NonNullable<E>) => VarName extends keyof VariablesOf<T> ? VariablesOf<T>[VarName] : VariablesOf<T>;
+    onSubmit?: (values: VarName extends keyof VariablesOf<T> ? VariablesOf<T>[VarName] : VariablesOf<T>) => void;
 }
 
 /**
@@ -43,7 +41,7 @@ export function useGeneratedForm<
     const updateFields = document ? getOperationVariablesFields(document, varName) : [];
     const schema = createFormSchemaFromFields(updateFields);
     const defaultValues = getDefaultValuesFromFields(updateFields, activeChannel?.defaultLanguageCode);
-    const processedEntity = ensureTranslationsForAllLanguages(entity, availableLanguages, defaultValues);
+    const processedEntity = ensureTranslationsForAllLanguages(entity, availableLanguages);
 
     const form = useForm({
         resolver: async (values, context, options) => {
@@ -55,9 +53,7 @@ export function useGeneratedForm<
         },
         mode: 'onChange',
         defaultValues,
-        values: processedEntity
-            ? transformRelationFields(updateFields, setValues(processedEntity))
-            : defaultValues,
+        values: processedEntity ? setValues(processedEntity) : defaultValues,
     });
     let submitHandler = (event: FormEvent) => {
         event.preventDefault();
@@ -73,13 +69,11 @@ export function useGeneratedForm<
 
 /**
  * Ensures that an entity with translations has entries for all available languages.
- * If a language is missing, it creates an empty translation based on the structure of existing translations
- * and the expected form structure from defaultValues.
+ * If a language is missing, it creates an empty translation based on the structure of existing translations.
  */
 function ensureTranslationsForAllLanguages<E extends Record<string, any>>(
     entity: E | null | undefined,
     availableLanguages: string[] = [],
-    expectedStructure?: Record<string, any>,
 ): E | null | undefined {
     if (
         !entity ||
@@ -97,56 +91,23 @@ function ensureTranslationsForAllLanguages<E extends Record<string, any>>(
     // Get existing language codes
     const existingLanguageCodes = new Set(translations.map((t: any) => t.languageCode));
 
-    // Get the expected translation structure from defaultValues or existing translations
-    const existingTemplate = translations[0] || {};
-    const expectedTranslationStructure = expectedStructure?.translations?.[0] || {};
-
-    // Merge the structures to ensure we have all expected fields
-    const templateStructure = {
-        ...expectedTranslationStructure,
-        ...existingTemplate,
-    };
-
     // Add missing language translations
     for (const langCode of availableLanguages) {
         if (!existingLanguageCodes.has(langCode)) {
+            // Find a translation to use as template for field structure
+            const template = translations[0] || {};
             const emptyTranslation: Record<string, any> = {
                 languageCode: langCode,
             };
 
-            // Add empty fields based on merged template structure (excluding languageCode)
-            Object.keys(templateStructure).forEach(key => {
+            // Add empty fields based on template (excluding languageCode)
+            Object.keys(template).forEach(key => {
                 if (key !== 'languageCode') {
-                    if (typeof templateStructure[key] === 'object' && templateStructure[key] !== null) {
-                        // For nested objects like customFields, create an empty object
-                        emptyTranslation[key] = Array.isArray(templateStructure[key]) ? [] : {};
-                    } else {
-                        // For primitive values, use empty string as default
-                        emptyTranslation[key] = '';
-                    }
+                    emptyTranslation[key] = '';
                 }
             });
 
             translations.push(emptyTranslation);
-        } else {
-            // For existing translations, ensure they have all expected fields
-            const existingTranslation = translations.find((t: any) => t.languageCode === langCode);
-            if (existingTranslation) {
-                Object.keys(expectedTranslationStructure).forEach(key => {
-                    if (key !== 'languageCode' && !(key in existingTranslation)) {
-                        if (
-                            typeof expectedTranslationStructure[key] === 'object' &&
-                            expectedTranslationStructure[key] !== null
-                        ) {
-                            existingTranslation[key] = Array.isArray(expectedTranslationStructure[key])
-                                ? []
-                                : {};
-                        } else {
-                            existingTranslation[key] = '';
-                        }
-                    }
-                });
-            }
         }
     }
 

package/src/lib/framework/layout-engine/location-wrapper.tsx

@@ -1,128 +1,95 @@
-import { CopyableText } from '@/vdb/components/shared/copyable-text.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
-import { usePageBlock } from '@/vdb/hooks/use-page-block.js';
-import { usePage } from '@/vdb/hooks/use-page.js';
-import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { cn } from '@/vdb/lib/utils.js';
-import { CodeXmlIcon } from 'lucide-react';
-import React, { useEffect, useState } from 'react';
+import { CopyableText } from '@/components/shared/copyable-text.js';
+import { Button } from '@/components/ui/button.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
+import { usePage } from '@/hooks/use-page.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { cn } from '@/lib/utils.js';
+import { Trans } from '@/lib/trans.js';
+import { CodeXmlIcon, InfoIcon } from 'lucide-react';
+import { createContext, useContext, useState } from 'react';
 
-// Singleton state for hover tracking
-let globalHoveredId: string | null = null;
-const hoverListeners: Set<(id: string | null) => void> = new Set();
+const LocationWrapperContext = createContext<{
+    parentId: string | null;
+    hoveredId: string | null;
+    setHoveredId: ((id: string | null) => void) | null;
+}>({
+    parentId: null,
+    hoveredId: null,
+    setHoveredId: null,
+});
 
-const setGlobalHoveredId = (id: string | null) => {
-    globalHoveredId = id;
-    hoverListeners.forEach(listener => listener(id));
-};
-
-export interface LocationWrapperProps {
-    children: React.ReactNode;
-    identifier?: string;
-}
-
-export function LocationWrapper({ children, identifier }: Readonly<LocationWrapperProps>) {
+export function LocationWrapper({ children, blockId }: { children: React.ReactNode; blockId?: string }) {
     const page = usePage();
-    const pageBlock = usePageBlock({ optional: true });
     const { settings } = useUserSettings();
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-    const blockId = pageBlock?.blockId ?? null;
     const isPageWrapper = !blockId;
 
-    const [hoveredId, setHoveredId] = useState<string | null>(globalHoveredId);
-    const id = `${page.pageId}-${blockId ?? 'page'}-${identifier ?? ''}`;
-    const isHovered = hoveredId === id;
-
-    // Subscribe to global hover changes
-    useEffect(() => {
-        const listener = (newHoveredId: string | null) => {
-            setHoveredId(newHoveredId);
-        };
-        hoverListeners.add(listener);
-        return () => {
-            hoverListeners.delete(listener);
-        };
-    }, []);
+    const [hoveredIdTopLevel, setHoveredIdTopLevel] = useState<string | null>(null);
+    const { hoveredId, setHoveredId, parentId } = useContext(LocationWrapperContext);
+    const id = `${page.pageId}-${blockId ?? 'page'}`;
+    const isHovered = hoveredId === id || hoveredIdTopLevel === id;
 
     const setHoverId = (id: string | null) => {
-        setGlobalHoveredId(id);
-    };
-
-    const handleMouseEnter = () => {
-        // Set this element as hovered
-        setHoverId(id);
-    };
-
-    const handleMouseLeave = () => {
-        // If we're at the top level (page wrapper), go to null
-        // If we're at block level, go to page level
-        // If we're at identifier level, go to block level
-        if (isPageWrapper) {
-            setHoverId(null);
-        } else if (blockId && !identifier) {
-            // Block level - go to page level
-            setHoverId(`${page.pageId}-page-`);
-        } else if (identifier) {
-            // Identifier level - go to block level
-            setHoverId(`${page.pageId}-${blockId}-`);
+        if (setHoveredId) {
+            setHoveredId(id);
+        } else {
+            setHoveredIdTopLevel(id);
         }
     };
 
     if (settings.devMode) {
         const pageId = page.pageId;
         return (
-            <div
-                className={cn(
-                    `ring-2 transition-all delay-50 relative`,
-                    isHovered || isPopoverOpen ? 'ring-dev-mode' : 'ring-transparent',
-                    isPageWrapper ? 'ring-inset' : '',
-                    identifier ? 'rounded-md' : 'rounded-xl',
-                )}
-                onMouseEnter={handleMouseEnter}
-                onMouseLeave={handleMouseLeave}
+            <LocationWrapperContext.Provider
+                value={{ hoveredId: hoveredIdTopLevel, setHoveredId: setHoveredIdTopLevel, parentId: id }}
             >
                 <div
-                    className={`absolute top-1 right-1 transition-all delay-50 z-10 ${isHovered || isPopoverOpen ? 'visible' : 'invisible'}`}
+                    className={cn(
+                        `ring-2 rounded-xl transition-all delay-50 relative`,
+                        isHovered || isPopoverOpen ? 'ring-dev-mode' : 'ring-transparent',
+                        isPageWrapper ? 'ring-inset' : '',
+                    )}
+                    onMouseEnter={() => setHoverId(id)}
+                    onMouseLeave={() => setHoverId(parentId)}
                 >
-                    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-                        <PopoverTrigger asChild>
-                            <Button
-                                variant="secondary"
-                                size="icon"
-                                className="h-8 w-8 rounded-full bg-dev-mode/10 hover:bg-dev-mode/20 border border-dev-mode/20 shadow-sm"
-                            >
-                                <CodeXmlIcon className="text-dev-mode w-4 h-4" />
-                            </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-48 p-3">
-                            <div className="space-y-2">
-                                <div className="space-y-1">
-                                    {pageId && (
-                                        <div className="text-xs">
-                                            <div className="text-muted-foreground mb-0.5">pageId</div>
-                                            <CopyableText text={pageId} />
-                                        </div>
-                                    )}
-                                    {blockId && (
-                                        <div className="text-xs">
-                                            <div className="text-muted-foreground mb-0.5">blockId</div>
-                                            <CopyableText text={blockId} />
-                                        </div>
-                                    )}
-                                    {identifier && (
-                                        <div className="text-xs">
-                                            <div className="text-muted-foreground mb-0.5">identifier</div>
-                                            <CopyableText text={identifier} />
-                                        </div>
-                                    )}
+                    <div
+                        className={`absolute top-0.5 right-0.5 transition-all delay-50 z-10 ${isHovered || isPopoverOpen ? 'visible' : 'invisible'}`}
+                    >
+                        <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+                            <PopoverTrigger asChild>
+                                <Button variant="ghost" size="icon" className="rounded-lg">
+                                    <CodeXmlIcon className="text-dev-mode w-5 h-5" />
+                                </Button>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-60">
+                                <div className="space-y-2">
+                                    <div className="flex items-center gap-2">
+                                        <InfoIcon className="h-4 w-4 text-dev-mode" />
+                                        <span className="font-medium">
+                                            <Trans>Location Details</Trans>
+                                        </span>
+                                    </div>
+                                    <div className="space-y-1.5">
+                                        {pageId && (
+                                            <div>
+                                                <div className="text-xs text-muted-foreground">pageId</div>
+                                                <CopyableText text={pageId} />
+                                            </div>
+                                        )}
+                                        {blockId && (
+                                            <div>
+                                                <div className="text-xs text-muted-foreground">blockId</div>
+                                                <CopyableText text={blockId} />
+                                            </div>
+                                        )}
+                                    </div>
                                 </div>
-                            </div>
-                        </PopoverContent>
-                    </Popover>
+                            </PopoverContent>
+                        </Popover>
+                    </div>
+                    {children}
                 </div>
-                {children}
-            </div>
+            </LocationWrapperContext.Provider>
         );
     }
     return children;

package/src/lib/framework/layout-engine/page-layout.tsx

@@ -1,21 +1,20 @@
-import { CustomFieldsForm } from '@/vdb/components/shared/custom-fields-form.js';
-import { NavigationConfirmation } from '@/vdb/components/shared/navigation-confirmation.js';
-import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/vdb/components/ui/card.js';
-import { Form } from '@/vdb/components/ui/form.js';
-import { useCustomFieldConfig } from '@/vdb/hooks/use-custom-field-config.js';
-import { usePage } from '@/vdb/hooks/use-page.js';
-import { cn } from '@/vdb/lib/utils.js';
+import { CustomFieldsForm } from '@/components/shared/custom-fields-form.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { Form } from '@/components/ui/form.js';
+import { useCustomFieldConfig } from '@/hooks/use-custom-field-config.js';
+import { usePage } from '@/hooks/use-page.js';
+import { cn } from '@/lib/utils.js';
+import { NavigationConfirmation } from '@/components/shared/navigation-confirmation.js';
 import { useMediaQuery } from '@uidotdev/usehooks';
 import React, { ComponentProps } from 'react';
 import { Control, UseFormReturn } from 'react-hook-form';
 
-import { DashboardActionBarItem } from '../extension-api/types/layout.js';
+import { DashboardActionBarItem } from '../extension-api/extension-api-types.js';
 
-import { PageBlockContext } from '@/vdb/framework/layout-engine/page-block-provider.js';
-import { PageContext, PageContextValue } from '@/vdb/framework/layout-engine/page-provider.js';
 import { getDashboardActionBarItems, getDashboardPageBlocks } from './layout-extensions.js';
 import { LocationWrapper } from './location-wrapper.js';
+import { PageContext, PageContextValue } from '@/framework/layout-engine/page-provider.js';
 
 export interface PageProps extends ComponentProps<'div'> {
     pageId?: string;
@@ -42,11 +41,13 @@ export interface PageProps extends ComponentProps<'div'> {
  * @docsWeight 0
  * @since 3.3.0
  */
-export function Page({ children, pageId, entity, form, submitHandler, ...props }: Readonly<PageProps>) {
+export function Page({ children, pageId, entity, form, submitHandler, ...props }: PageProps) {
     const childArray = React.Children.toArray(children);
 
     const pageTitle = childArray.find(child => React.isValidElement(child) && child.type === PageTitle);
-    const pageActionBar = childArray.find(child => isOfType(child, PageActionBar));
+    const pageActionBar = childArray.find(
+        child => isOfType(child, PageActionBar),
+    );
 
     const pageContent = childArray.filter(
         child => !isOfType(child, PageTitle) && !isOfType(child, PageActionBar),
@@ -72,13 +73,7 @@ export function Page({ children, pageId, entity, form, submitHandler, ...props }
     );
 }
 
-function PageContent({
-    pageHeader,
-    pageContent,
-    form,
-    submitHandler,
-    ...props
-}: {
+function PageContent({ pageHeader, pageContent, form, submitHandler, ...props }: {
     pageHeader: React.ReactNode;
     pageContent: React.ReactNode;
     form?: UseFormReturn<any>;
@@ -99,14 +94,9 @@ function PageContent({
     );
 }
 
-export function PageContentWithOptionalForm({
-    form,
-    pageHeader,
-    pageContent,
-    submitHandler,
-}: {
+export function PageContentWithOptionalForm({ form, pageHeader, pageContent, submitHandler }: {
     form?: UseFormReturn<any>;
-    pageHeader: React.ReactNode;
+    pageHeader: React.ReactNode
     pageContent: React.ReactNode;
     submitHandler?: any;
 }) {
@@ -164,7 +154,7 @@ function isPageBlock(child: unknown): child is React.ReactElement<PageBlockProps
  * @docsWeight 0
  * @since 3.3.0
  */
-export function PageLayout({ children, className }: Readonly<PageLayoutProps>) {
+export function PageLayout({ children, className }: PageLayoutProps) {
     const page = usePage();
     const isDesktop = useMediaQuery('only screen and (min-width : 769px)');
     // Separate blocks into categories
@@ -194,7 +184,6 @@ export function PageLayout({ children, className }: Readonly<PageLayoutProps>) {
             if (extensionBlock) {
                 const ExtensionBlock = (
                     <PageBlock
-                        key={childBlock.key}
                         column={extensionBlock.location.column}
                         blockId={extensionBlock.id}
                         title={extensionBlock.title}
@@ -238,7 +227,7 @@ export function PageLayout({ children, className }: Readonly<PageLayoutProps>) {
     );
 }
 
-export function DetailFormGrid({ children }: Readonly<{ children: React.ReactNode }>) {
+export function DetailFormGrid({ children }: { children: React.ReactNode }) {
     return <div className="md:grid md:grid-cols-2 gap-4 items-start mb-4">{children}</div>;
 }
 
@@ -252,7 +241,7 @@ export function DetailFormGrid({ children }: Readonly<{ children: React.ReactNod
  * @docsPage PageTitle
  * @since 3.3.0
  */
-export function PageTitle({ children }: Readonly<{ children: React.ReactNode }>) {
+export function PageTitle({ children }: { children: React.ReactNode }) {
     return <h1 className="text-2xl font-semibold">{children}</h1>;
 }
 
@@ -269,11 +258,15 @@ export function PageTitle({ children }: Readonly<{ children: React.ReactNode }>)
  * @docsWeight 0
  * @since 3.3.0
  */
-export function PageActionBar({ children }: Readonly<{ children: React.ReactNode }>) {
+export function PageActionBar({ children }: { children: React.ReactNode }) {
     let childArray = React.Children.toArray(children);
 
-    const leftContent = childArray.filter(child => isOfType(child, PageActionBarLeft));
-    const rightContent = childArray.filter(child => isOfType(child, PageActionBarRight));
+    const leftContent = childArray.filter(
+        child => isOfType(child, PageActionBarLeft),
+    );
+    const rightContent = childArray.filter(
+        child => isOfType(child, PageActionBarRight),
+    );
 
     return (
         <div className={cn('flex gap-2', leftContent.length > 0 ? 'justify-between' : 'justify-end')}>
@@ -291,7 +284,7 @@ export function PageActionBar({ children }: Readonly<{ children: React.ReactNode
  * @docsPage PageActionBar
  * @since 3.3.0
  */
-export function PageActionBarLeft({ children }: Readonly<{ children: React.ReactNode }>) {
+export function PageActionBarLeft({ children }: { children: React.ReactNode }) {
     return <div className="flex justify-start gap-2">{children}</div>;
 }
 
@@ -303,7 +296,7 @@ export function PageActionBarLeft({ children }: Readonly<{ children: React.React
  * @docsPage PageActionBar
  * @since 3.3.0
  */
-export function PageActionBarRight({ children }: Readonly<{ children: React.ReactNode }>) {
+export function PageActionBarRight({ children }: { children: React.ReactNode }) {
     const page = usePage();
     const actionBarItems = page.pageId ? getDashboardActionBarItems(page.pageId) : [];
     return (
@@ -355,28 +348,19 @@ export type PageBlockProps = {
  * @docsWeight 0
  * @since 3.3.0
  */
-export function PageBlock({
-    children,
-    title,
-    description,
-    className,
-    blockId,
-    column,
-}: Readonly<PageBlockProps>) {
+export function PageBlock({ children, title, description, className, blockId }: PageBlockProps) {
     return (
-        <PageBlockContext.Provider value={{ blockId, title, description, column }}>
-            <LocationWrapper>
-                <Card className={cn('w-full', className)}>
-                    {title || description ? (
-                        <CardHeader>
-                            {title && <CardTitle>{title}</CardTitle>}
-                            {description && <CardDescription>{description}</CardDescription>}
-                        </CardHeader>
-                    ) : null}
-                    <CardContent className={cn(!title ? 'pt-6' : '')}>{children}</CardContent>
-                </Card>
-            </LocationWrapper>
-        </PageBlockContext.Provider>
+        <LocationWrapper blockId={blockId}>
+            <Card className={cn('w-full', className)}>
+                {title || description ? (
+                    <CardHeader>
+                        {title && <CardTitle>{title}</CardTitle>}
+                        {description && <CardDescription>{description}</CardDescription>}
+                    </CardHeader>
+                ) : null}
+                <CardContent className={cn(!title ? 'pt-6' : '')}>{children}</CardContent>
+            </Card>
+        </LocationWrapper>
     );
 }
 
@@ -392,16 +376,14 @@ export function PageBlock({
  * @since 3.3.0
  */
 export function FullWidthPageBlock({
-    children,
-    className,
-    blockId,
-}: Pick<PageBlockProps, 'children' | 'className' | 'blockId'>) {
+                                       children,
+                                       className,
+                                       blockId,
+                                   }: Pick<PageBlockProps, 'children' | 'className' | 'blockId'>) {
     return (
-        <PageBlockContext.Provider value={{ blockId, column: 'main' }}>
-            <LocationWrapper>
-                <div className={cn('w-full', className)}>{children}</div>
-            </LocationWrapper>
-        </PageBlockContext.Provider>
+        <LocationWrapper blockId={blockId}>
+            <div className={cn('w-full', className)}>{children}</div>
+        </LocationWrapper>
     );
 }
 
@@ -416,10 +398,10 @@ export function FullWidthPageBlock({
  * @since 3.3.0
  */
 export function CustomFieldsPageBlock({
-    column,
-    entityType,
-    control,
-}: {
+                                          column,
+                                          entityType,
+                                          control,
+                                      }: {
     column: 'main' | 'side';
     entityType: string;
     control: Control<any, any>;

package/src/lib/framework/page/detail-page-route-loader.tsx

@@ -1,55 +1,36 @@
-import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
+import { NEW_ENTITY_PATH } from '@/constants.js';
 
-import { PageBreadcrumb } from '@/vdb/components/layout/generated-breadcrumbs.js';
-import { extendDetailFormQuery } from '@/vdb/framework/document-extension/extend-detail-form-query.js';
+import { PageBreadcrumb } from '@/components/layout/generated-breadcrumbs.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
-import { FileBaseRouteOptions, ParsedLocation } from '@tanstack/react-router';
-import { addCustomFields } from '../document-introspection/add-custom-fields.js';
+import { FileBaseRouteOptions } from '@tanstack/react-router';
 import { getQueryName, getQueryTypeFieldInfo } from '../document-introspection/get-document-structure.js';
 import { DetailEntity } from './page-types.js';
 import { getDetailQueryOptions } from './use-detail-page.js';
-
+import { addCustomFields } from '../document-introspection/add-custom-fields.js';
 export interface DetailPageRouteLoaderConfig<T extends TypedDocumentNode<any, any>> {
-    /**
-     * @description
-     * The pageId is used to ensure any detail form extensions (such as extensions to
-     * the detail query document) get correctly applied at the route loader level.
-     */
-    pageId?: string;
     queryDocument: T;
-    breadcrumb: (
-        isNew: boolean,
-        entity: DetailEntity<T>,
-        location: ParsedLocation,
-    ) => Array<PageBreadcrumb | undefined>;
+    breadcrumb: (isNew: boolean, entity: DetailEntity<T>) => Array<PageBreadcrumb | undefined>;
 }
 
 export function detailPageRouteLoader<T extends TypedDocumentNode<any, any>>({
-    pageId,
     queryDocument,
     breadcrumb,
 }: DetailPageRouteLoaderConfig<T>) {
     const loader: FileBaseRouteOptions<any, any>['loader'] = async ({
         context,
         params,
-        location,
     }: {
         context: any;
         params: any;
-        location: ParsedLocation;
     }) => {
         if (!params.id) {
             throw new Error('ID param is required');
         }
         const isNew = params.id === NEW_ENTITY_PATH;
-        const { extendedQuery: extendedQueryDocument } = extendDetailFormQuery(
-            addCustomFields(queryDocument),
-            pageId,
-        );
         const result = isNew
             ? null
             : await context.queryClient.ensureQueryData(
-                  getDetailQueryOptions(extendedQueryDocument, { id: params.id }),
+                  getDetailQueryOptions(addCustomFields(queryDocument), { id: params.id }),
                   { id: params.id },
               );
 
@@ -60,7 +41,7 @@ export function detailPageRouteLoader<T extends TypedDocumentNode<any, any>>({
             throw new Error(`${entityName} with the ID ${params.id} was not found`);
         }
         return {
-            breadcrumb: breadcrumb(isNew, result?.[entityField], location),
+            breadcrumb: breadcrumb(isNew, result?.[entityField]),
         };
     };
     return loader;