@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/src/lib/components/ui/toggle-group.tsx

@@ -0,0 +1,73 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/vdb/lib/utils"
+import { toggleVariants } from "@/vdb/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

package/src/lib/components/ui/toggle.tsx

@@ -0,0 +1,45 @@
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/vdb/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

package/src/lib/components/ui/tooltip.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
 
-import { cn } from '@/lib/utils.js';
+import { cn } from '@/vdb/lib/utils.js';
 
 function TooltipProvider({
     delayDuration = 0,
@@ -48,4 +48,4 @@ function TooltipContent({
     );
 }
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/lib/framework/alert/alert-extensions.tsx

@@ -1,7 +1,6 @@
-import { useEffect } from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { DashboardAlertDefinition } from '../extension-api/types/alerts.js';
 import { globalRegistry } from '../registry/global-registry.js';
-import { DashboardAlertDefinition } from './types.js';
 
 globalRegistry.register('dashboardAlertRegistry', new Map<string, DashboardAlertDefinition>());
 

package/src/lib/framework/alert/alert-item.tsx

@@ -1,8 +1,10 @@
-import { Button } from '@/components/ui/button.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { cn } from '@/vdb/lib/utils.js';
 import { useQuery } from '@tanstack/react-query';
 import { ComponentProps } from 'react';
-import { DashboardAlertDefinition } from './types.js';
-import { cn } from '@/lib/utils.js';
+
+import { DashboardAlertDefinition } from '../extension-api/types/alerts.js';
+
 interface AlertItemProps extends ComponentProps<'div'> {
     alert: DashboardAlertDefinition;
 }

package/src/lib/framework/component-registry/component-registry.tsx

@@ -1,70 +1,56 @@
-import { BooleanDisplayBadge, BooleanDisplayCheckbox } from '@/components/data-display/boolean.js';
-import { DateTime } from '@/components/data-display/date-time.js';
-import { Money } from '@/components/data-display/money.js';
-import { DateTimeInput } from '@/components/data-input/datetime-input.js';
-import { FacetValueInput } from '@/components/data-input/facet-value-input.js';
-import { MoneyInput } from '@/components/data-input/money-input.js';
-import { VendureImage } from '@/components/shared/vendure-image.js';
-import { Checkbox } from '@/components/ui/checkbox.js';
-import { Input } from '@/components/ui/input.js';
 import * as React from 'react';
+import { ControllerRenderProps, FieldPath, FieldValues } from 'react-hook-form';
+import { addDisplayComponent, getDisplayComponent } from '../extension-api/display-component-extensions.js';
+import { addInputComponent, getInputComponent } from '../extension-api/input-component-extensions.js';
 
 export interface ComponentRegistryEntry<Props extends Record<string, any>> {
     component: React.ComponentType<Props>;
 }
 
 // Basic component types
-export type DataDisplayComponent = React.ComponentType<{ value: any; [key: string]: any }>;
-export type DataInputComponent = React.ComponentType<{ value: any; onChange: (value: any) => void; [key: string]: any }>;
 
-// Simple component registry
-interface ComponentRegistry {
-    dataDisplay: Record<string, DataDisplayComponent>;
-    dataInput: Record<string, DataInputComponent>;
+export interface DataDisplayComponentProps {
+    value: any;
+    [key: string]: any;
 }
 
-export const COMPONENT_REGISTRY: ComponentRegistry = {
-    dataDisplay: {
-        'vendure:booleanCheckbox': BooleanDisplayCheckbox,
-        'vendure:booleanBadge': BooleanDisplayBadge,
-        'vendure:dateTime': DateTime,
-        'vendure:asset': ({value}) => <VendureImage asset={value} preset="tiny" />,
-        'vendure:money': Money,
-    },
-    dataInput: {
-        'vendure:moneyInput': MoneyInput,
-        'vendure:textInput': (props) => <Input {...props} onChange={e => props.onChange(e.target.value)} />,
-        'vendure:numberInput': (props) => <Input {...props} onChange={e => props.onChange(e.target.value)} type="number" />,
-        'vendure:dateTimeInput': DateTimeInput,
-        'vendure:checkboxInput': (props) => <Checkbox {...props} checked={props.value === 'true' || props.value === true}  onCheckedChange={value => props.onChange(value)} />,
-        'vendure:facetValueInput': FacetValueInput,
-    }
-};
+export interface DataInputComponentProps<
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> extends ControllerRenderProps<TFieldValues, TName> {
+    [key: string]: any;
+}
+
+export type DataDisplayComponent = React.ComponentType<DataDisplayComponentProps>;
+export type DataInputComponent = React.ComponentType<DataInputComponentProps>;
 
-// Simplified implementation - replace with actual implementation
+// Component registry hook that uses the global registry
 export function useComponentRegistry() {
     return {
         getDisplayComponent: (id: string): DataDisplayComponent | undefined => {
-            // This is a placeholder implementation
-            return COMPONENT_REGISTRY.dataDisplay[id];
+            return getDisplayComponent(id);
         },
         getInputComponent: (id: string): DataInputComponent | undefined => {
-            // This is a placeholder implementation
-            return COMPONENT_REGISTRY.dataInput[id];
+            return getInputComponent(id);
         },
     };
 }
 
-export function registerInputComponent(id: string,  component: DataInputComponent) {
-    if (COMPONENT_REGISTRY.dataInput[id]) {
-        throw new Error(`Input component with id ${id} already registered`);
-    }
-    COMPONENT_REGISTRY.dataInput[id] = component;
+// Legacy registration functions - these now delegate to the global registry
+export function registerInputComponent(
+    pageId: string,
+    blockId: string,
+    field: string,
+    component: DataInputComponent,
+) {
+    addInputComponent({ pageId, blockId, field, component });
 }
 
-export function registerDisplayComponent(id: string, component: DataDisplayComponent) {
-    if (COMPONENT_REGISTRY.dataDisplay[id]) {
-        throw new Error(`Display component with id ${id} already registered`);
-    }
-    COMPONENT_REGISTRY.dataDisplay[id] = component;
+export function registerDisplayComponent(
+    pageId: string,
+    blockId: string,
+    field: string,
+    component: DataDisplayComponent,
+) {
+    addDisplayComponent({ pageId, blockId, field, component });
 }

package/src/lib/framework/component-registry/dynamic-component.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { COMPONENT_REGISTRY, useComponentRegistry } from "./component-registry.js";
+import { useComponentRegistry } from "./component-registry.js";
 
 export type DisplayComponentProps<
     T extends keyof (typeof COMPONENT_REGISTRY)['dataDisplay'] | string,
@@ -33,7 +33,7 @@ export type InputComponentProps<
  */
 export function DisplayComponent<
     T extends keyof (typeof COMPONENT_REGISTRY)['dataDisplay'] | string,
->(props: DisplayComponentProps<T>): React.ReactNode {   
+>(props: Readonly<DisplayComponentProps<T>>): React.ReactNode {   
     const { getDisplayComponent } = useComponentRegistry();
     const Component = getDisplayComponent(props.id);
     if (!Component) {
@@ -45,7 +45,7 @@ export function DisplayComponent<
 
 export function InputComponent<
     T extends keyof (typeof COMPONENT_REGISTRY)['dataInput'] | string,
->(props: InputComponentProps<T>): React.ReactNode {
+>(props: Readonly<InputComponentProps<T>>): React.ReactNode {
     const { getInputComponent } = useComponentRegistry();
     const Component = getInputComponent(props.id);
     if (!Component) {

package/src/lib/framework/dashboard-widget/base-widget.tsx

@@ -1,8 +1,8 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.js';
-import { cn } from '@/lib/utils.js';
-import { Trans } from '@/lib/trans.js';
-import { PropsWithChildren, useRef, useEffect, useState, createContext, useContext } from 'react';
-import type React from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/vdb/components/ui/card.js';
+import { DashboardBaseWidgetProps } from '@/vdb/framework/extension-api/types/index.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
 
 type WidgetDimensions = {
     width: number;
@@ -19,14 +19,6 @@ export const useWidgetDimensions = () => {
     return context;
 };
 
-export type DashboardBaseWidgetProps = PropsWithChildren<{
-    id: string;
-    title?: string;
-    description?: string;
-    config?: Record<string, unknown>;
-    actions?: React.ReactNode;
-}>;
-
 export function DashboardBaseWidget({
     id,
     config,

package/src/lib/framework/dashboard-widget/latest-orders-widget/index.tsx

@@ -1,13 +1,13 @@
-import { useQuery } from '@tanstack/react-query';
-import { latestOrdersQuery } from './latest-orders-widget.graphql.js';
-import { DashboardBaseWidget } from '../base-widget.js';
-import { PaginatedListDataTable, addCustomFields, useLocalFormat } from '@/index.js';
-import { ColumnFiltersState } from '@tanstack/react-table';
-import { useState } from 'react';
-import { SortingState } from '@tanstack/react-table';
+import { PaginatedListDataTable } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { Link } from '@tanstack/react-router';
+import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
 import { formatRelative } from 'date-fns';
-import { Button } from '@/components/ui/button.js';
+import { useState } from 'react';
+import { DashboardBaseWidget } from '../base-widget.js';
+import { latestOrdersQuery } from './latest-orders-widget.graphql.js';
+
 export const WIDGET_ID = 'latest-orders-widget';
 
 export function LatestOrdersWidget() {

package/src/lib/framework/dashboard-widget/latest-orders-widget/latest-orders-widget.graphql.ts

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

package/src/lib/framework/dashboard-widget/metrics-widget/index.tsx

@@ -1,13 +1,12 @@
-import { api } from '@/graphql/api.js';
+import { Tabs, TabsList, TabsTrigger } from '@/vdb/components/ui/tabs.js';
+import { api } from '@/vdb/graphql/api.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useQuery } from '@tanstack/react-query';
 import { useMemo, useState } from 'react';
-import { Area, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
-import { DashboardBaseWidget, useWidgetDimensions } from '../base-widget.js';
-import { orderChartDataQuery } from './metrics-widget.graphql.js';
+import { DashboardBaseWidget } from '../base-widget.js';
 import { MetricsChart } from './chart.js';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
-import { useChannel } from '@/hooks/use-channel.js';
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs.js';
+import { orderChartDataQuery } from './metrics-widget.graphql.js';
 
 enum DATA_TYPES {
     OrderCount = 'OrderCount',
@@ -20,7 +19,7 @@ export function MetricsWidget() {
     const { activeChannel } = useChannel();
     const [dataType, setDataType] = useState<DATA_TYPES>(DATA_TYPES.OrderTotal);
 
-    const { data, error } = useQuery({
+    const { data } = useQuery({
         queryKey: ['dashboard-order-metrics', dataType],
         queryFn: () => {
             return api.query(orderChartDataQuery, {

package/src/lib/framework/dashboard-widget/metrics-widget/metrics-widget.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const orderChartDataQuery = graphql(`
     query GetOrderChartData($refresh: Boolean, $types: [MetricType!]!) {

package/src/lib/framework/dashboard-widget/orders-summary/index.tsx

@@ -1,12 +1,13 @@
+import { AnimatedCurrency, AnimatedNumber } from '@/vdb/components/shared/animated-number.js';
+import { Tabs, TabsList, TabsTrigger } from '@/vdb/components/ui/tabs.js';
+import { api } from '@/vdb/graphql/api.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useQuery } from '@tanstack/react-query';
+import { endOfDay, endOfMonth, startOfDay, startOfMonth, subDays, subMonths } from 'date-fns';
+import { useMemo, useState } from 'react';
 import { DashboardBaseWidget } from '../base-widget.js';
 import { orderSummaryQuery } from './order-summary-widget.graphql.js';
-import { api } from '@/graphql/api.js';
-import { useMemo, useState } from 'react';
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs.js';
-import { useChannel, useLocalFormat } from '@/index.js';
-import { startOfDay, endOfDay, subDays, subMonths, startOfMonth, endOfMonth } from 'date-fns';
-import { AnimatedCurrency, AnimatedNumber } from '@/components/shared/animated-number.js';
 
 const WIDGET_ID = 'orders-summary-widget';
 
@@ -36,8 +37,6 @@ function PercentageChange({ value }: PercentageChangeProps) {
 
 export function OrdersSummaryWidget() {
     const [range, setRange] = useState<Range>(Range.Today);
-    const { formatCurrency } = useLocalFormat();
-    const { activeChannel } = useChannel();
 
     const variables = useMemo(() => {
         const now = new Date();

package/src/lib/framework/dashboard-widget/orders-summary/order-summary-widget.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const orderSummaryQuery = graphql(`
     query GetOrderSummary($start: DateTime!, $end: DateTime!) {

package/src/lib/framework/dashboard-widget/widget-extensions.tsx

@@ -1,4 +1,4 @@
-import { DashboardWidgetDefinition } from './types.js';
+import { DashboardWidgetDefinition } from '@/vdb/framework/extension-api/types/index.js';
 import { globalRegistry } from '../registry/global-registry.js';
 
 globalRegistry.register('dashboardWidgetRegistry', new Map<string, DashboardWidgetDefinition>());

package/src/lib/framework/data-table/data-table-extensions.ts

@@ -0,0 +1,35 @@
+import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
+import { DocumentNode } from 'graphql';
+
+import { globalRegistry } from '../registry/global-registry.js';
+
+globalRegistry.register('bulkActionsRegistry', new Map<string, BulkAction[]>());
+globalRegistry.register('listQueryDocumentRegistry', new Map<string, DocumentNode[]>());
+
+export function getBulkActions(pageId: string, blockId = 'list-table'): BulkAction[] {
+    const key = createKey(pageId, blockId);
+    return globalRegistry.get('bulkActionsRegistry').get(key) || [];
+}
+
+export function addBulkAction(pageId: string, blockId: string | undefined, action: BulkAction) {
+    const bulkActionsRegistry = globalRegistry.get('bulkActionsRegistry');
+    const key = createKey(pageId, blockId);
+    const existingActions = bulkActionsRegistry.get(key) || [];
+    bulkActionsRegistry.set(key, [...existingActions, action]);
+}
+
+export function getListQueryDocuments(pageId: string, blockId = 'list-table'): DocumentNode[] {
+    const key = createKey(pageId, blockId);
+    return globalRegistry.get('listQueryDocumentRegistry').get(key) || [];
+}
+
+export function addListQueryDocument(pageId: string, blockId: string | undefined, document: DocumentNode) {
+    const listQueryDocumentRegistry = globalRegistry.get('listQueryDocumentRegistry');
+    const key = createKey(pageId, blockId);
+    const existingDocuments = listQueryDocumentRegistry.get(key) || [];
+    listQueryDocumentRegistry.set(key, [...existingDocuments, document]);
+}
+
+function createKey(pageId: string, blockId: string | undefined): string {
+    return `${pageId}__${blockId ?? 'list-table'}`;
+}

package/src/lib/framework/defaults.ts

@@ -1,4 +1,4 @@
-import { setNavMenuConfig } from '@/framework/nav-menu/nav-menu-extensions.js';
+import { setNavMenuConfig } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
 import {
     LayoutDashboardIcon,
     Mail,
@@ -18,8 +18,8 @@ export function registerDefaults() {
     setNavMenuConfig({
         sections: [
             {
-                id: 'dashboard',
-                title: 'Dashboard',
+                id: 'insights',
+                title: 'Insights',
                 placement: 'top',
                 icon: LayoutDashboardIcon,
                 url: '/',
@@ -29,7 +29,6 @@ export function registerDefaults() {
                 id: 'catalog',
                 title: 'Catalog',
                 icon: SquareTerminal,
-                defaultOpen: true,
                 placement: 'top',
                 order: 200,
                 items: [
@@ -69,7 +68,6 @@ export function registerDefaults() {
                 id: 'sales',
                 title: 'Sales',
                 icon: ShoppingCart,
-                defaultOpen: true,
                 placement: 'top',
                 order: 300,
                 items: [
@@ -85,7 +83,6 @@ export function registerDefaults() {
                 id: 'customers',
                 title: 'Customers',
                 icon: Users,
-                defaultOpen: false,
                 placement: 'top',
                 order: 400,
                 items: [
@@ -107,7 +104,6 @@ export function registerDefaults() {
                 id: 'marketing',
                 title: 'Marketing',
                 icon: Mail,
-                defaultOpen: false,
                 placement: 'top',
                 order: 500,
                 items: [
@@ -123,9 +119,8 @@ export function registerDefaults() {
                 id: 'system',
                 title: 'System',
                 icon: Terminal,
-                defaultOpen: false,
                 placement: 'bottom',
-                order: 100,
+                order: 200,
                 items: [
                     {
                         id: 'job-queue',
@@ -151,9 +146,8 @@ export function registerDefaults() {
                 id: 'settings',
                 title: 'Settings',
                 icon: Settings2,
-                defaultOpen: false,
                 placement: 'bottom',
-                order: 200,
+                order: 100,
                 items: [
                     {
                         id: 'sellers',

package/src/lib/framework/document-extension/extend-detail-form-query.ts

@@ -0,0 +1,50 @@
+import { extendDocument } from '@/vdb/framework/document-extension/extend-document.js';
+import { getDetailQueryDocuments } from '@/vdb/framework/form-engine/custom-form-component-extensions.js';
+import { DocumentNode } from 'graphql';
+
+/**
+ * @description
+ * Extends a detail page query document with any registered extensions provided by
+ * the `extendDetailDocument` function for the given page.
+ */
+export function extendDetailFormQuery<T extends DocumentNode>(
+    detailQuery: T,
+    pageId?: string,
+): {
+    extendedQuery: T;
+    errorMessage?: string | null;
+} {
+    let result: T = detailQuery;
+    let errorMessage: string | null = null;
+
+    if (!pageId) {
+        // If no pageId is provided, return the original query without any extensions
+        return { extendedQuery: detailQuery };
+    }
+
+    const detailQueryExtensions = getDetailQueryDocuments(pageId);
+
+    try {
+        result = detailQueryExtensions.reduce(
+            (acc, extension) => extendDocument(acc, extension),
+            detailQuery,
+        ) as T;
+    } catch (err) {
+        errorMessage = err instanceof Error ? err.message : String(err);
+        // Continue with the original query instead of the extended one
+        result = detailQuery;
+    }
+
+    // Store error for useEffect to handle
+    if (errorMessage) {
+        // Log the error and continue with the original query
+        // eslint-disable-next-line no-console
+        console.warn(`${errorMessage}. Continuing with original query.`, {
+            pageId,
+            extensionsCount: detailQueryExtensions.length,
+            error: errorMessage,
+        });
+    }
+
+    return { extendedQuery: result, errorMessage };
+}