@vendure/dashboard 3.3.5-master-202506231200 → 3.3.5-master-202506241318

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.3.5-master-202506231200",
+    "version": "3.3.5-master-202506241318",
     "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.5-master-202506231200",
-        "@vendure/core": "^3.3.5-master-202506231200",
+        "@vendure/common": "^3.3.5-master-202506241318",
+        "@vendure/core": "^3.3.5-master-202506241318",
         "@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": "6f49cf141df0d5c95a0a93d908acd95b0979f278"
+    "gitHead": "6420b216556b8173cc4b581d1304cb6d11e04c60"
 }

package/src/lib/components/shared/custom-fields-form.tsx

@@ -1,7 +1,4 @@
-import { useCustomFieldConfig } from '@/hooks/use-custom-field-config.js';
-import { Control, ControllerRenderProps } from 'react-hook-form';
 import {
-    Form,
     FormControl,
     FormDescription,
     FormField,
@@ -10,12 +7,15 @@ import {
     FormMessage,
 } from '@/components/ui/form.js';
 import { Input } from '@/components/ui/input.js';
+import { CustomFormComponent } from '@/framework/form-engine/custom-form-component.js';
+import { useCustomFieldConfig } from '@/hooks/use-custom-field-config.js';
 import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { Switch } from '../ui/switch.js';
-import { CustomFieldType } from '@vendure/common/lib/shared-types';
-import { TranslatableFormField } from './translatable-form-field.js';
 import { customFieldConfigFragment } from '@/providers/server-config.js';
+import { CustomFieldType } from '@vendure/common/lib/shared-types';
 import { ResultOf } from 'gql.tada';
+import { Control, ControllerRenderProps } from 'react-hook-form';
+import { Switch } from '../ui/switch.js';
+import { TranslatableFormField } from './translatable-form-field.js';
 
 type CustomFieldConfig = ResultOf<typeof customFieldConfigFragment>;
 
@@ -29,59 +29,171 @@ export function CustomFieldsForm({ entityType, control, formPathPrefix }: Custom
     const {
         settings: { displayLanguage },
     } = useUserSettings();
-    function getTranslation(input: Array<{ languageCode: string; value: string }> | null | undefined) {
+
+    const getTranslation = (input: Array<{ languageCode: string; value: string }> | null | undefined) => {
         return input?.find(t => t.languageCode === displayLanguage)?.value;
-    }
+    };
+
     const customFields = useCustomFieldConfig(entityType);
+
+    const getFieldName = (fieldDefName: string) => {
+        return formPathPrefix
+            ? `${formPathPrefix}.customFields.${fieldDefName}`
+            : `customFields.${fieldDefName}`;
+    };
+
     return (
         <div className="grid grid-cols-2 gap-4">
             {customFields?.map(fieldDef => (
-                <div key={fieldDef.name}>
-                    {fieldDef.type === 'localeString' || fieldDef.type === 'localeText' ? (
-                        <TranslatableFormField
-                            control={control}
-                            name={formPathPrefix ? `${formPathPrefix}.customFields.${fieldDef.name}` : `customFields.${fieldDef.name}`}
-                            render={({ field }) => (
-                                <FormItem>
-                                    <FormLabel>{getTranslation(fieldDef.label) ?? field.name}</FormLabel>
-                                    <FormControl>
-                                        {fieldDef.readonly ? field.value : <FormInputForType fieldDef={fieldDef} field={field} />}
-                                    </FormControl>
-                                </FormItem>
-                            )}
-                        />
-                    ) : (
-                        <FormField
-                            control={control}
-                            name={formPathPrefix ? `${formPathPrefix}.customFields.${fieldDef.name}` : `customFields.${fieldDef.name}`}
-                            render={({ field }) => (
-                            <FormItem>
-                                <FormLabel>{getTranslation(fieldDef.label) ?? field.name}</FormLabel>
-                                <FormControl>
-                                    {fieldDef.readonly ? field.value : <FormInputForType fieldDef={fieldDef} field={field} />}
-                                </FormControl>
-                                <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
-                                <FormMessage />
-                            </FormItem>
-                            )}
-                        />
-                    )}
-                </div>
+                <CustomFieldItem
+                    key={fieldDef.name}
+                    fieldDef={fieldDef}
+                    control={control}
+                    fieldName={getFieldName(fieldDef.name)}
+                    getTranslation={getTranslation}
+                />
             ))}
         </div>
     );
 }
 
-function FormInputForType({ fieldDef, field }: { fieldDef: CustomFieldConfig, field: ControllerRenderProps<any, any> }) {
-    switch (fieldDef.type as CustomFieldType) {    
+interface CustomFieldItemProps {
+    fieldDef: CustomFieldConfig;
+    control: Control<any, any>;
+    fieldName: string;
+    getTranslation: (
+        input: Array<{ languageCode: string; value: string }> | null | undefined,
+    ) => string | undefined;
+}
+
+function CustomFieldItem({ fieldDef, control, fieldName, getTranslation }: CustomFieldItemProps) {
+    const hasCustomFormComponent = fieldDef.ui && fieldDef.ui.component;
+    const isLocaleField = fieldDef.type === 'localeString' || fieldDef.type === 'localeText';
+
+    // For locale fields, always use TranslatableFormField regardless of custom components
+    if (isLocaleField) {
+        return (
+            <TranslatableFormField
+                control={control}
+                name={fieldName}
+                render={({ field, ...props }) => (
+                    <FormItem>
+                        <FormLabel>{getTranslation(fieldDef.label) ?? field.name}</FormLabel>
+                        <FormControl>
+                            {hasCustomFormComponent ? (
+                                <CustomFormComponent
+                                    fieldDef={fieldDef}
+                                    fieldProps={{
+                                        ...props,
+                                        field: {
+                                            ...field,
+                                            disabled: fieldDef.readonly ?? false,
+                                        },
+                                    }}
+                                />
+                            ) : (
+                                <FormInputForType fieldDef={fieldDef} field={field} />
+                            )}
+                        </FormControl>
+                        <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
+                        <FormMessage />
+                    </FormItem>
+                )}
+            />
+        );
+    }
+
+    // For non-locale fields with custom components
+    if (hasCustomFormComponent) {
+        return (
+            <FormField
+                control={control}
+                name={fieldName}
+                render={fieldProps => (
+                    <CustomFieldFormItem
+                        fieldDef={fieldDef}
+                        getTranslation={getTranslation}
+                        fieldName={fieldProps.field.name}
+                    >
+                        <CustomFormComponent
+                            fieldDef={fieldDef}
+                            fieldProps={{
+                                ...fieldProps,
+                                field: {
+                                    ...fieldProps.field,
+                                    disabled: fieldDef.readonly ?? false,
+                                },
+                            }}
+                        />
+                    </CustomFieldFormItem>
+                )}
+            />
+        );
+    }
+
+    // For regular fields without custom components
+    return (
+        <FormField
+            control={control}
+            name={fieldName}
+            render={({ field }) => (
+                <CustomFieldFormItem
+                    fieldDef={fieldDef}
+                    getTranslation={getTranslation}
+                    fieldName={field.name}
+                >
+                    <FormInputForType fieldDef={fieldDef} field={field} />
+                </CustomFieldFormItem>
+            )}
+        />
+    );
+}
+
+interface CustomFieldFormItemProps {
+    fieldDef: CustomFieldConfig;
+    getTranslation: (
+        input: Array<{ languageCode: string; value: string }> | null | undefined,
+    ) => string | undefined;
+    fieldName: string;
+    children: React.ReactNode;
+}
+
+function CustomFieldFormItem({ fieldDef, getTranslation, fieldName, children }: CustomFieldFormItemProps) {
+    return (
+        <FormItem>
+            <FormLabel>{getTranslation(fieldDef.label) ?? fieldName}</FormLabel>
+            <FormControl>{children}</FormControl>
+            <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
+            <FormMessage />
+        </FormItem>
+    );
+}
+
+function FormInputForType({
+    fieldDef,
+    field,
+}: {
+    fieldDef: CustomFieldConfig;
+    field: ControllerRenderProps<any, any>;
+}) {
+    const isReadonly = fieldDef.readonly ?? false;
+
+    switch (fieldDef.type as CustomFieldType) {
         case 'string':
-            return <Input {...field} />;
+            return <Input {...field} disabled={isReadonly} />;
         case 'float':
         case 'int':
-            return <Input type="number" {...field}  onChange={(e) => field.onChange(e.target.valueAsNumber)} />;
+            return (
+                <Input
+                    type="number"
+                    {...field}
+                    disabled={isReadonly}
+                    onChange={e => field.onChange(e.target.valueAsNumber)}
+                />
+            );
         case 'boolean':
-            return <Switch checked={field.value} onCheckedChange={field.onChange} />;
+            return <Switch checked={field.value} onCheckedChange={field.onChange} disabled={isReadonly} />;
         default:
-            return <Input {...field} />
+            return <Input {...field} disabled={isReadonly} />;
     }
 }

package/src/lib/components/shared/customer-address-form.tsx

@@ -1,5 +1,12 @@
-import { Button } from '@vendure/dashboard';
-import { Checkbox } from '@vendure/dashboard';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Button } from '../ui/button.js';
+import { Checkbox } from '../ui/checkbox.js';
 import {
     Form,
     FormControl,
@@ -8,16 +15,9 @@ import {
     FormItem,
     FormLabel,
     FormMessage,
-} from '@vendure/dashboard';
-import { Input } from '@vendure/dashboard';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@vendure/dashboard';
-import { api } from '@vendure/dashboard';
-import { graphql } from '@vendure/dashboard';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans, useLingui } from '@/lib/trans.js';
-import { useQuery } from '@tanstack/react-query';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
+} from '../ui/form.js';
+import { Input } from '../ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select.js';
 
 // Query document to fetch available countries
 const getAvailableCountriesDocument = graphql(`
@@ -58,7 +58,12 @@ interface CustomerAddressFormProps<T = any> {
     onCancel?: () => void;
 }
 
-export function CustomerAddressForm<T>({ address, setValuesForUpdate, onSubmit, onCancel }: CustomerAddressFormProps<T>) {
+export function CustomerAddressForm<T>({
+    address,
+    setValuesForUpdate,
+    onSubmit,
+    onCancel,
+}: CustomerAddressFormProps<T>) {
     const { i18n } = useLingui();
 
     // Fetch available countries

package/src/lib/components/shared/logo-mark.tsx

@@ -6,8 +6,8 @@ export function LogoMark(props: React.ComponentProps<'svg'>) {
                 fill="currentColor"
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M174.388 4.798a2.148 2.148 0 0 0-2.136 2.157c0 1.191.957 2.158 2.136 2.158a2.149 2.149 0 0 0 2.137-2.158c0-1.19-.958-2.157-2.137-2.157Zm-2.611 2.157c0-1.456 1.169-2.637 2.611-2.637 1.443 0 2.612 1.181 2.612 2.637 0 1.457-1.169 2.638-2.612 2.638-1.442 0-2.611-1.181-2.611-2.638Z"
                 fill="currentColor"
             />

package/src/lib/components/shared/translatable-form-field.tsx

@@ -1,13 +1,7 @@
-import { Controller } from 'react-hook-form';
-import { FieldPath } from 'react-hook-form';
 import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { ControllerProps } from 'react-hook-form';
-import { FieldValues } from 'react-hook-form';
+import { Controller, ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '../ui/form.js';
 import { FormFieldWrapper } from './form-field-wrapper.js';
-import { FormMessage } from '../ui/form.js';
-import { FormControl } from '../ui/form.js';
-import { FormItem } from '../ui/form.js';
-import { FormDescription, FormField, FormLabel } from '../ui/form.js';
 
 export type TranslatableEntity = FieldValues & {
     translations?: Array<{ languageCode: string }> | null;

package/src/lib/framework/document-introspection/get-document-structure.ts

@@ -199,6 +199,23 @@ function unwrapVariableDefinitionType(type: TypeNode): NamedTypeNode {
     return type;
 }
 
+/**
+ * @description
+ * Helper function to get the first field selection from a query operation definition.
+ */
+function getFirstQueryField(documentNode: DocumentNode): FieldNode {
+    const operationDefinition = documentNode.definitions.find(
+        (def): def is OperationDefinitionNode =>
+            def.kind === 'OperationDefinition' && def.operation === 'query',
+    );
+    const firstSelection = operationDefinition?.selectionSet.selections[0];
+    if (firstSelection?.kind === 'Field') {
+        return firstSelection;
+    } else {
+        throw new Error('Could not determine query field');
+    }
+}
+
 /**
  * @description
  * This function is used to get the name of the query from a DocumentNode.
@@ -216,16 +233,32 @@ function unwrapVariableDefinitionType(type: TypeNode): NamedTypeNode {
  * The query name is `product`.
  */
 export function getQueryName(documentNode: DocumentNode): string {
-    const operationDefinition = documentNode.definitions.find(
-        (def): def is OperationDefinitionNode =>
-            def.kind === 'OperationDefinition' && def.operation === 'query',
-    );
-    const firstSelection = operationDefinition?.selectionSet.selections[0];
-    if (firstSelection?.kind === 'Field') {
-        return firstSelection.name.value;
-    } else {
-        throw new Error('Could not determine query name');
-    }
+    const firstField = getFirstQueryField(documentNode);
+    return firstField.name.value;
+}
+
+/**
+ * @description
+ * This function is used to get the entity name from a DocumentNode.
+ *
+ * For example, in the following query:
+ *
+ * ```graphql
+ * query ProductDetail($id: ID!) {
+ *   product(id: $id) {
+ *     ...ProductDetail
+ *   }
+ * }
+ * ```
+ *
+ * The entity name is `Product`.
+ */
+export function getEntityName(documentNode: DocumentNode): string {
+    const firstField = getFirstQueryField(documentNode);
+    // Get the return type from the field definition
+    const fieldName = firstField.name.value;
+    const queryInfo = getQueryInfo(fieldName);
+    return queryInfo.type;
 }
 
 /**

package/src/lib/framework/extension-api/define-dashboard-extension.ts

@@ -1,4 +1,5 @@
 import { registerDashboardWidget } from '../dashboard-widget/widget-extensions.js';
+import { addCustomFormComponent } from '../form-engine/custom-form-component-extensions.js';
 import {
     registerDashboardActionBarItem,
     registerDashboardPageBlock,
@@ -76,6 +77,11 @@ export function defineDashboardExtension(extension: DashboardExtension) {
                 registerDashboardWidget(widget);
             }
         }
+        if (extension.customFormComponents) {
+            for (const component of extension.customFormComponents) {
+                addCustomFormComponent(component);
+            }
+        }
         const callbacks = globalRegistry.get('extensionSourceChangeCallbacks');
         if (callbacks.size) {
             for (const callback of callbacks) {

package/src/lib/framework/extension-api/extension-api-types.ts

@@ -5,8 +5,21 @@ import type React from 'react';
 
 import { DashboardAlertDefinition } from '../alert/types.js';
 import { DashboardWidgetDefinition } from '../dashboard-widget/types.js';
+import { CustomFormComponentInputProps } from '../form-engine/custom-form-component.js';
 import { NavMenuItem } from '../nav-menu/nav-menu-extensions.js';
 
+/**
+ * @description
+ * Allows you to define custom form components for custom fields in the dashboard.
+ *
+ * @docsCategory extensions
+ * @since 3.4.0
+ */
+export interface DashboardCustomFormComponent {
+    id: string;
+    component: React.FunctionComponent<CustomFormComponentInputProps>;
+}
+
 export interface DashboardRouteDefinition {
     component: (route: AnyRoute) => React.ReactNode;
     path: string;
@@ -137,4 +150,10 @@ export interface DashboardExtension {
      * given components and optionally also add a nav menu item.
      */
     widgets?: DashboardWidgetDefinition[];
+
+    /**
+     * @description
+     * Allows you to define custom form components for custom fields in the dashboard.
+     */
+    customFormComponents?: DashboardCustomFormComponent[];
 }

package/src/lib/framework/form-engine/custom-form-component-extensions.ts

@@ -0,0 +1,28 @@
+import { DashboardCustomFormComponent } from '../extension-api/extension-api-types.js';
+import { globalRegistry } from '../registry/global-registry.js';
+
+import { CustomFormComponentInputProps } from './custom-form-component.js';
+
+globalRegistry.register(
+    'customFormComponents',
+    new Map<string, React.FunctionComponent<CustomFormComponentInputProps>>(),
+);
+
+export function getCustomFormComponents() {
+    return globalRegistry.get('customFormComponents');
+}
+
+export function getCustomFormComponent(
+    id: string,
+): React.FunctionComponent<CustomFormComponentInputProps> | undefined {
+    return globalRegistry.get('customFormComponents').get(id);
+}
+
+export function addCustomFormComponent({ id, component }: DashboardCustomFormComponent) {
+    const customFormComponents = globalRegistry.get('customFormComponents');
+    if (customFormComponents.has(id)) {
+        // eslint-disable-next-line no-console
+        console.warn(`Custom form component with id "${id}" is already registered and will be overwritten.`);
+    }
+    customFormComponents.set(id, component);
+}

package/src/lib/framework/form-engine/custom-form-component.tsx

@@ -0,0 +1,33 @@
+import { CustomFieldConfig } from '@vendure/common/lib/generated-types';
+import {
+    ControllerFieldState,
+    ControllerRenderProps,
+    FieldPath,
+    FieldValues,
+    UseFormStateReturn,
+} from 'react-hook-form';
+import { getCustomFormComponent } from './custom-form-component-extensions.js';
+
+export interface CustomFormComponentProps {
+    fieldProps: CustomFormComponentInputProps;
+    fieldDef: Pick<CustomFieldConfig, 'ui' | 'type' | 'name'>;
+}
+
+export interface CustomFormComponentInputProps<
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> {
+    field: ControllerRenderProps<TFieldValues, TName>;
+    fieldState: ControllerFieldState;
+    formState: UseFormStateReturn<TFieldValues>;
+}
+
+export function CustomFormComponent({ fieldDef, fieldProps }: CustomFormComponentProps) {
+    const Component = getCustomFormComponent(fieldDef.ui?.component);
+
+    if (!Component) {
+        return null;
+    }
+
+    return <Component {...fieldProps} />;
+}

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

@@ -13,14 +13,18 @@ import { useForm } from 'react-hook-form';
 
 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;
 }
 
 /**
@@ -41,7 +45,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);
+    const processedEntity = ensureTranslationsForAllLanguages(entity, availableLanguages, defaultValues);
 
     const form = useForm({
         resolver: async (values, context, options) => {
@@ -53,7 +57,7 @@ export function useGeneratedForm<
         },
         mode: 'onChange',
         defaultValues,
-        values: processedEntity ? setValues(processedEntity) : defaultValues,
+        values: processedEntity ? processedEntity : defaultValues,
     });
     let submitHandler = (event: FormEvent) => {
         event.preventDefault();
@@ -69,11 +73,13 @@ 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.
+ * If a language is missing, it creates an empty translation based on the structure of existing translations
+ * and the expected form structure from defaultValues.
  */
 function ensureTranslationsForAllLanguages<E extends Record<string, any>>(
     entity: E | null | undefined,
     availableLanguages: string[] = [],
+    expectedStructure?: Record<string, any>,
 ): E | null | undefined {
     if (
         !entity ||
@@ -91,23 +97,56 @@ 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 template (excluding languageCode)
-            Object.keys(template).forEach(key => {
+            // Add empty fields based on merged template structure (excluding languageCode)
+            Object.keys(templateStructure).forEach(key => {
                 if (key !== 'languageCode') {
-                    emptyTranslation[key] = '';
+                    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] = '';
+                    }
                 }
             });
 
             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/page/detail-page.tsx

@@ -10,8 +10,12 @@ import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { AnyRoute, useNavigate } from '@tanstack/react-router';
 import { ResultOf, VariablesOf } from 'gql.tada';
 import { toast } from 'sonner';
-import { getOperationVariablesFields } from '../document-introspection/get-document-structure.js';
+import {
+    getEntityName,
+    getOperationVariablesFields,
+} from '../document-introspection/get-document-structure.js';
 
+import { TranslatableFormFieldWrapper } from '@/components/shared/translatable-form-field.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -41,6 +45,7 @@ export interface DetailPageProps<
     /**
      * @description
      * The name of the entity.
+     * If not provided, it will be inferred from the query document.
      */
     entityName?: string;
     /**
@@ -80,6 +85,29 @@ export interface DetailPageProps<
     setValuesForUpdate: (entity: ResultOf<T>[EntityField]) => VariablesOf<U>['input'];
 }
 
+/**
+ * Renders form input components based on field type
+ */
+function renderFieldInput(fieldInfo: { type: string }, field: any) {
+    switch (fieldInfo.type) {
+        case 'Int':
+        case 'Float':
+            return (
+                <Input
+                    type="number"
+                    value={field.value}
+                    onChange={e => field.onChange(e.target.valueAsNumber)}
+                />
+            );
+        case 'DateTime':
+            return <DateTimeInput {...field} />;
+        case 'Boolean':
+            return <Checkbox value={field.value} onCheckedChange={field.onChange} />;
+        default:
+            return <Input {...field} />;
+    }
+}
+
 /**
  * @description
  * **Status: Developer Preview**
@@ -100,7 +128,7 @@ export function DetailPage<
 >({
     pageId,
     route,
-    entityName,
+    entityName: passedEntityName,
     queryDocument,
     createDocument,
     updateDocument,
@@ -110,11 +138,15 @@ export function DetailPage<
     const params = route.useParams();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const navigate = useNavigate();
+    const inferredEntityName = getEntityName(queryDocument);
+
+    const entityName = passedEntityName ?? inferredEntityName;
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage<any, any, any>({
         queryDocument,
         updateDocument,
         createDocument,
+        entityName,
         params: { id: params.id },
         setValuesForUpdate,
         onSuccess: async data => {
@@ -133,6 +165,7 @@ export function DetailPage<
     });
 
     const updateFields = getOperationVariablesFields(updateDocument, 'input');
+    const translations = updateFields.find(fieldInfo => fieldInfo.name === 'translations');
 
     return (
         <Page pageId={pageId} form={form} submitHandler={submitHandler}>
@@ -152,6 +185,7 @@ export function DetailPage<
                     <DetailFormGrid>
                         {updateFields
                             .filter(fieldInfo => fieldInfo.name !== 'customFields')
+                            .filter(fieldInfo => fieldInfo.name !== 'translations')
                             .map(fieldInfo => {
                                 if (fieldInfo.name === 'id' && fieldInfo.type === 'ID') {
                                     return null;
@@ -162,33 +196,22 @@ export function DetailPage<
                                         control={form.control}
                                         name={fieldInfo.name as never}
                                         label={fieldInfo.name}
-                                        render={({ field }) => {
-                                            switch (fieldInfo.type) {
-                                                case 'Int':
-                                                case 'Float':
-                                                    return (
-                                                        <Input
-                                                            type="number"
-                                                            value={field.value}
-                                                            onChange={e =>
-                                                                field.onChange(e.target.valueAsNumber)
-                                                            }
-                                                        />
-                                                    );
-                                                case 'DateTime':
-                                                    return <DateTimeInput {...field} />;
-                                                case 'Boolean':
-                                                    return (
-                                                        <Checkbox
-                                                            value={field.value}
-                                                            onCheckedChange={field.onChange}
-                                                        />
-                                                    );
-                                                case 'String':
-                                                default:
-                                                    return <Input {...field} />;
-                                            }
-                                        }}
+                                        render={({ field }) => renderFieldInput(fieldInfo, field)}
+                                    />
+                                );
+                            })}
+                        {translations?.typeInfo
+                            ?.filter(
+                                fieldInfo => !['customFields', 'id', 'languageCode'].includes(fieldInfo.name),
+                            )
+                            .map(fieldInfo => {
+                                return (
+                                    <TranslatableFormFieldWrapper
+                                        key={fieldInfo.name}
+                                        control={form.control}
+                                        name={fieldInfo.name as never}
+                                        label={fieldInfo.name}
+                                        render={({ field }) => renderFieldInput(fieldInfo, field)}
                                     />
                                 );
                             })}

package/src/lib/framework/page/use-detail-page.ts

@@ -1,5 +1,7 @@
 import { NEW_ENTITY_PATH } from '@/constants.js';
 import { api, Variables } from '@/graphql/api.js';
+import { useCustomFieldConfig } from '@/hooks/use-custom-field-config.js';
+import { removeReadonlyCustomFields } from '@/lib/utils.js';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import {
     DefinedInitialDataOptions,
@@ -59,6 +61,12 @@ export interface DetailPageOptions<
     params: {
         id: string;
     };
+    /**
+     * @description
+     * The entity type name for custom field configuration lookup.
+     * Required to filter out readonly custom fields before mutations.
+     */
+    entityName: string;
     /**
      * @description
      * The document to create the entity.
@@ -232,16 +240,19 @@ export function useDetailPage<
         transformUpdateInput,
         params,
         entityField,
+        entityName,
         onSuccess,
         onError,
     } = options;
     const isNew = params.id === NEW_ENTITY_PATH;
     const queryClient = useQueryClient();
+    const customFieldConfig = useCustomFieldConfig(entityName);
     const detailQueryOptions = getDetailQueryOptions(addCustomFields(queryDocument), {
         id: isNew ? '__NEW__' : params.id,
     });
     const detailQuery = useSuspenseQuery(detailQueryOptions);
     const entityQueryField = entityField ?? getQueryName(queryDocument);
+
     const entity = (detailQuery?.data as any)[entityQueryField] as
         | DetailPageEntity<T, EntityField>
         | undefined;
@@ -280,10 +291,15 @@ export function useDetailPage<
         entity,
         setValues: setValuesForUpdate,
         onSubmit(values: any) {
+            // Filter out readonly custom fields before submitting
+            const filteredValues = removeReadonlyCustomFields(values, customFieldConfig || []);
+
             if (isNew) {
-                createMutation.mutate({ input: transformCreateInput?.(values) ?? values });
+                const finalInput = transformCreateInput?.(filteredValues) ?? filteredValues;
+                createMutation.mutate({ input: finalInput });
             } else {
-                updateMutation.mutate({ input: transformUpdateInput?.(values) ?? values });
+                const finalInput = transformUpdateInput?.(filteredValues) ?? filteredValues;
+                updateMutation.mutate({ input: finalInput });
             }
         },
     });

package/src/lib/framework/registry/registry-types.ts

@@ -4,6 +4,7 @@ import {
     DashboardActionBarItem,
     DashboardPageBlockDefinition,
 } from '../extension-api/extension-api-types.js';
+import { CustomFormComponentInputProps } from '../form-engine/custom-form-component.js';
 import { NavMenuConfig } from '../nav-menu/nav-menu-extensions.js';
 
 export interface GlobalRegistryContents {
@@ -14,6 +15,7 @@ export interface GlobalRegistryContents {
     dashboardPageBlockRegistry: Map<string, DashboardPageBlockDefinition[]>;
     dashboardWidgetRegistry: Map<string, DashboardWidgetDefinition>;
     dashboardAlertRegistry: Map<string, DashboardAlertDefinition>;
+    customFormComponents: Map<string, React.FunctionComponent<CustomFormComponentInputProps>>;
 }
 
 export type GlobalRegistryKey = keyof GlobalRegistryContents;

package/src/lib/graphql/graphql-env.d.ts

@@ -291,13 +291,15 @@ export type introspection_types = {
     'ProductOptionInUseError': { kind: 'OBJECT'; name: 'ProductOptionInUseError'; fields: { 'errorCode': { name: 'errorCode'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'ENUM'; name: 'ErrorCode'; ofType: null; }; } }; 'message': { name: 'message'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'optionGroupCode': { name: 'optionGroupCode'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'productVariantCount': { name: 'productVariantCount'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Int'; ofType: null; }; } }; }; };
     'ProductOptionTranslation': { kind: 'OBJECT'; name: 'ProductOptionTranslation'; fields: { 'createdAt': { name: 'createdAt'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'DateTime'; ofType: null; }; } }; 'id': { name: 'id'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; } }; 'languageCode': { name: 'languageCode'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'ENUM'; name: 'LanguageCode'; ofType: null; }; } }; 'name': { name: 'name'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'updatedAt': { name: 'updatedAt'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'DateTime'; ofType: null; }; } }; }; };
     'ProductOptionTranslationInput': { kind: 'INPUT_OBJECT'; name: 'ProductOptionTranslationInput'; isOneOf: false; inputFields: [{ name: 'id'; type: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; defaultValue: null }, { name: 'languageCode'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'ENUM'; name: 'LanguageCode'; ofType: null; }; }; defaultValue: null }, { name: 'name'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; }; defaultValue: null }, { name: 'customFields'; type: { kind: 'SCALAR'; name: 'JSON'; ofType: null; }; defaultValue: null }]; };
-    'ProductReview': { kind: 'OBJECT'; name: 'ProductReview'; fields: { 'author': { name: 'author'; type: { kind: 'OBJECT'; name: 'Customer'; ofType: null; } }; 'authorLocation': { name: 'authorLocation'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'authorName': { name: 'authorName'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'body': { name: 'body'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'createdAt': { name: 'createdAt'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'DateTime'; ofType: null; }; } }; 'customFields': { name: 'customFields'; type: { kind: 'OBJECT'; name: 'ProductReviewCustomFields'; ofType: null; } }; 'downvotes': { name: 'downvotes'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Int'; ofType: null; }; } }; 'id': { name: 'id'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; } }; 'product': { name: 'product'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'Product'; ofType: null; }; } }; 'productVariant': { name: 'productVariant'; type: { kind: 'OBJECT'; name: 'ProductVariant'; ofType: null; } }; 'rating': { name: 'rating'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Float'; ofType: null; }; } }; 'response': { name: 'response'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'responseCreatedAt': { name: 'responseCreatedAt'; type: { kind: 'SCALAR'; name: 'DateTime'; ofType: null; } }; 'state': { name: 'state'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'summary': { name: 'summary'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'updatedAt': { name: 'updatedAt'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'DateTime'; ofType: null; }; } }; 'upvotes': { name: 'upvotes'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Int'; ofType: null; }; } }; }; };
-    'ProductReviewCustomFields': { kind: 'OBJECT'; name: 'ProductReviewCustomFields'; fields: { 'reviewerName': { name: 'reviewerName'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; }; };
-    'ProductReviewFilterParameter': { kind: 'INPUT_OBJECT'; name: 'ProductReviewFilterParameter'; isOneOf: false; inputFields: [{ name: 'id'; type: { kind: 'INPUT_OBJECT'; name: 'IDOperators'; ofType: null; }; defaultValue: null }, { name: 'createdAt'; type: { kind: 'INPUT_OBJECT'; name: 'DateOperators'; ofType: null; }; defaultValue: null }, { name: 'updatedAt'; type: { kind: 'INPUT_OBJECT'; name: 'DateOperators'; ofType: null; }; defaultValue: null }, { name: 'summary'; type: { kind: 'INPUT_OBJECT'; name: 'StringOperators'; ofType: null; }; defaultValue: null }, { name: 'body'; type: { kind: 'INPUT_OBJECT'; name: 'StringOperators'; ofType: null; }; defaultValue: null }, { name: 'rating'; type: { kind: 'INPUT_OBJECT'; name: 'NumberOperators'; ofType: null; }; defaultValue: null }, { name: 'authorName'; type: { kind: 'INPUT_OBJECT'; name: 'StringOperators'; ofType: null; }; defaultValue: null }, { name: 'authorLocation'; type: { kind: 'INPUT_OBJECT'; name: 'StringOperators'; ofType: null; }; defaultValue: null }, { name: 'upvotes'; type: { kind: 'INPUT_OBJECT'; name: 'NumberOperators'; ofType: null; }; defaultValue: null }, { name: 'downvotes'; type: { kind: 'INPUT_OBJECT'; name: 'NumberOperators'; ofType: null; }; defaultValue: null }, { name: 'state'; type: { kind: 'INPUT_OBJECT'; name: 'StringOperators'; ofType: null; }; defaultValue: null }, { name: 'response'; type: { kind: 'INPUT_OBJECT'; name: 'StringOperators'; ofType: null; }; defaultValue: null }, { name: 'responseCreatedAt'; type: { kind: 'INPUT_OBJECT'; name: 'DateOperators'; ofType: null; }; defaultValue: null }, { name: '_and'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'ProductReviewFilterParameter'; ofType: null; }; }; }; defaultValue: null }, { name: '_or'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'ProductReviewFilterParameter'; ofType: null; }; }; }; defaultValue: null }, { name: 'reviewerName'; type: { kind: 'INPUT_OBJECT'; name: 'StringOperators'; ofType: null; }; defaultValue: null }]; };
+    'ProductReview': { kind: 'OBJECT'; name: 'ProductReview'; fields: { 'author': { name: 'author'; type: { kind: 'OBJECT'; name: 'Customer'; ofType: null; } }; 'authorLocation': { name: 'authorLocation'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'authorName': { name: 'authorName'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'body': { name: 'body'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'createdAt': { name: 'createdAt'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'DateTime'; ofType: null; }; } }; 'customFields': { name: 'customFields'; type: { kind: 'OBJECT'; name: 'ProductReviewCustomFields'; ofType: null; } }; 'downvotes': { name: 'downvotes'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Int'; ofType: null; }; } }; 'id': { name: 'id'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; } }; 'product': { name: 'product'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'Product'; ofType: null; }; } }; 'productVariant': { name: 'productVariant'; type: { kind: 'OBJECT'; name: 'ProductVariant'; ofType: null; } }; 'rating': { name: 'rating'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Float'; ofType: null; }; } }; 'response': { name: 'response'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'responseCreatedAt': { name: 'responseCreatedAt'; type: { kind: 'SCALAR'; name: 'DateTime'; ofType: null; } }; 'state': { name: 'state'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'summary': { name: 'summary'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'translations': { name: 'translations'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'ProductReviewTranslation'; ofType: null; }; }; }; } }; 'updatedAt': { name: 'updatedAt'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'DateTime'; ofType: null; }; } }; 'upvotes': { name: 'upvotes'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Int'; ofType: null; }; } }; }; };
+    'ProductReviewCustomFields': { kind: 'OBJECT'; name: 'ProductReviewCustomFields'; fields: { 'reviewerName': { name: 'reviewerName'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; 'verifiedReviewerName': { name: 'verifiedReviewerName'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; }; };
+    'ProductReviewFilterParameter': { kind: 'INPUT_OBJECT'; name: 'ProductReviewFilterParameter'; isOneOf: false; inputFields: [{ name: 'id'; type: { kind: 'INPUT_OBJECT'; name: 'IDOperators'; ofType: null; }; defaultValue: null }, { name: 'createdAt'; type: { kind: 'INPUT_OBJECT'; name: 'DateOperators'; ofType: null; }; defaultValue: null }, { name: 'updatedAt'; type: { kind: 'INPUT_OBJECT'; name: 'DateOperators'; ofType: null; }; defaultValue: null }, { name: 'summary'; type: { kind: 'INPUT_OBJECT'; name: 'StringOperators'; ofType: null; }; defaultValue: null }, { name: 'body'; type: { kind: 'INPUT_OBJECT'; name: 'StringOperators'; ofType: null; }; defaultValue: null }, { name: 'rating'; type: { kind: 'INPUT_OBJECT'; name: 'NumberOperators'; ofType: null; }; defaultValue: null }, { name: 'authorName'; type: { kind: 'INPUT_OBJECT'; name: 'StringOperators'; ofType: null; }; defaultValue: null }, { name: 'authorLocation'; type: { kind: 'INPUT_OBJECT'; name: 'StringOperators'; ofType: null; }; defaultValue: null }, { name: 'upvotes'; type: { kind: 'INPUT_OBJECT'; name: 'NumberOperators'; ofType: null; }; defaultValue: null }, { name: 'downvotes'; type: { kind: 'INPUT_OBJECT'; name: 'NumberOperators'; ofType: null; }; defaultValue: null }, { name: 'state'; type: { kind: 'INPUT_OBJECT'; name: 'StringOperators'; ofType: null; }; defaultValue: null }, { name: 'response'; type: { kind: 'INPUT_OBJECT'; name: 'StringOperators'; ofType: null; }; defaultValue: null }, { name: 'responseCreatedAt'; type: { kind: 'INPUT_OBJECT'; name: 'DateOperators'; ofType: null; }; defaultValue: null }, { name: '_and'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'ProductReviewFilterParameter'; ofType: null; }; }; }; defaultValue: null }, { name: '_or'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'ProductReviewFilterParameter'; ofType: null; }; }; }; defaultValue: null }, { name: 'reviewerName'; type: { kind: 'INPUT_OBJECT'; name: 'StringOperators'; ofType: null; }; defaultValue: null }, { name: 'verifiedReviewerName'; type: { kind: 'INPUT_OBJECT'; name: 'StringOperators'; ofType: null; }; defaultValue: null }]; };
     'ProductReviewHistogramItem': { kind: 'OBJECT'; name: 'ProductReviewHistogramItem'; fields: { 'bin': { name: 'bin'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Int'; ofType: null; }; } }; 'frequency': { name: 'frequency'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Int'; ofType: null; }; } }; }; };
     'ProductReviewList': { kind: 'OBJECT'; name: 'ProductReviewList'; fields: { 'items': { name: 'items'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'ProductReview'; ofType: null; }; }; }; } }; 'totalItems': { name: 'totalItems'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Int'; ofType: null; }; } }; }; };
     'ProductReviewListOptions': { kind: 'INPUT_OBJECT'; name: 'ProductReviewListOptions'; isOneOf: false; inputFields: [{ name: 'skip'; type: { kind: 'SCALAR'; name: 'Int'; ofType: null; }; defaultValue: null }, { name: 'take'; type: { kind: 'SCALAR'; name: 'Int'; ofType: null; }; defaultValue: null }, { name: 'sort'; type: { kind: 'INPUT_OBJECT'; name: 'ProductReviewSortParameter'; ofType: null; }; defaultValue: null }, { name: 'filter'; type: { kind: 'INPUT_OBJECT'; name: 'ProductReviewFilterParameter'; ofType: null; }; defaultValue: null }, { name: 'filterOperator'; type: { kind: 'ENUM'; name: 'LogicalOperator'; ofType: null; }; defaultValue: null }]; };
-    'ProductReviewSortParameter': { kind: 'INPUT_OBJECT'; name: 'ProductReviewSortParameter'; isOneOf: false; inputFields: [{ name: 'id'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'createdAt'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'updatedAt'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'summary'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'body'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'rating'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'authorName'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'authorLocation'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'upvotes'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'downvotes'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'state'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'response'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'responseCreatedAt'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'reviewerName'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }]; };
+    'ProductReviewSortParameter': { kind: 'INPUT_OBJECT'; name: 'ProductReviewSortParameter'; isOneOf: false; inputFields: [{ name: 'id'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'createdAt'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'updatedAt'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'summary'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'body'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'rating'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'authorName'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'authorLocation'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'upvotes'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'downvotes'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'state'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'response'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'responseCreatedAt'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'reviewerName'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'verifiedReviewerName'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }]; };
+    'ProductReviewTranslation': { kind: 'OBJECT'; name: 'ProductReviewTranslation'; fields: { 'customFields': { name: 'customFields'; type: { kind: 'OBJECT'; name: 'ProductReviewTranslationCustomFields'; ofType: null; } }; 'id': { name: 'id'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; } }; 'languageCode': { name: 'languageCode'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'ENUM'; name: 'LanguageCode'; ofType: null; }; } }; 'text': { name: 'text'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; }; };
+    'ProductReviewTranslationCustomFields': { kind: 'OBJECT'; name: 'ProductReviewTranslationCustomFields'; fields: { 'reviewerName': { name: 'reviewerName'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; }; };
     'ProductSortParameter': { kind: 'INPUT_OBJECT'; name: 'ProductSortParameter'; isOneOf: false; inputFields: [{ name: 'id'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'createdAt'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'updatedAt'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'name'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'slug'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'description'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'infoUrl'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'downloadable'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'shortName'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'lastUpdated'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'reviewRating'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'reviewCount'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'featuredReview'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }]; };
     'ProductTranslation': { kind: 'OBJECT'; name: 'ProductTranslation'; fields: { 'createdAt': { name: 'createdAt'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'DateTime'; ofType: null; }; } }; 'customFields': { name: 'customFields'; type: { kind: 'OBJECT'; name: 'ProductTranslationCustomFields'; ofType: null; } }; 'description': { name: 'description'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'id': { name: 'id'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; } }; 'languageCode': { name: 'languageCode'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'ENUM'; name: 'LanguageCode'; ofType: null; }; } }; 'name': { name: 'name'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'slug': { name: 'slug'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'updatedAt': { name: 'updatedAt'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'DateTime'; ofType: null; }; } }; }; };
     'ProductTranslationCustomFields': { kind: 'OBJECT'; name: 'ProductTranslationCustomFields'; fields: { 'shortName': { name: 'shortName'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; } }; }; };
@@ -465,8 +467,7 @@ export type introspection_types = {
     'UpdateProductInput': { kind: 'INPUT_OBJECT'; name: 'UpdateProductInput'; isOneOf: false; inputFields: [{ name: 'id'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; }; defaultValue: null }, { name: 'enabled'; type: { kind: 'SCALAR'; name: 'Boolean'; ofType: null; }; defaultValue: null }, { name: 'featuredAssetId'; type: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; defaultValue: null }, { name: 'assetIds'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; }; }; defaultValue: null }, { name: 'facetValueIds'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; }; }; defaultValue: null }, { name: 'translations'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'ProductTranslationInput'; ofType: null; }; }; }; defaultValue: null }, { name: 'customFields'; type: { kind: 'INPUT_OBJECT'; name: 'UpdateProductCustomFieldsInput'; ofType: null; }; defaultValue: null }]; };
     'UpdateProductOptionGroupInput': { kind: 'INPUT_OBJECT'; name: 'UpdateProductOptionGroupInput'; isOneOf: false; inputFields: [{ name: 'id'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; }; defaultValue: null }, { name: 'code'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; }; defaultValue: null }, { name: 'translations'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'ProductOptionGroupTranslationInput'; ofType: null; }; }; }; defaultValue: null }, { name: 'customFields'; type: { kind: 'SCALAR'; name: 'JSON'; ofType: null; }; defaultValue: null }]; };
     'UpdateProductOptionInput': { kind: 'INPUT_OBJECT'; name: 'UpdateProductOptionInput'; isOneOf: false; inputFields: [{ name: 'id'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; }; defaultValue: null }, { name: 'code'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; }; defaultValue: null }, { name: 'translations'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'ProductOptionGroupTranslationInput'; ofType: null; }; }; }; defaultValue: null }, { name: 'customFields'; type: { kind: 'SCALAR'; name: 'JSON'; ofType: null; }; defaultValue: null }]; };
-    'UpdateProductReviewCustomFieldsInput': { kind: 'INPUT_OBJECT'; name: 'UpdateProductReviewCustomFieldsInput'; isOneOf: false; inputFields: [{ name: 'reviewerName'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; }; defaultValue: null }]; };
-    'UpdateProductReviewInput': { kind: 'INPUT_OBJECT'; name: 'UpdateProductReviewInput'; isOneOf: false; inputFields: [{ name: 'id'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; }; defaultValue: null }, { name: 'summary'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; }; defaultValue: null }, { name: 'body'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; }; defaultValue: null }, { name: 'response'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; }; defaultValue: null }, { name: 'customFields'; type: { kind: 'INPUT_OBJECT'; name: 'UpdateProductReviewCustomFieldsInput'; ofType: null; }; defaultValue: null }]; };
+    'UpdateProductReviewInput': { kind: 'INPUT_OBJECT'; name: 'UpdateProductReviewInput'; isOneOf: false; inputFields: [{ name: 'id'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; }; defaultValue: null }, { name: 'summary'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; }; defaultValue: null }, { name: 'body'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; }; defaultValue: null }, { name: 'response'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; }; defaultValue: null }, { name: 'customFields'; type: { kind: 'SCALAR'; name: 'JSON'; ofType: null; }; defaultValue: null }]; };
     'UpdateProductVariantInput': { kind: 'INPUT_OBJECT'; name: 'UpdateProductVariantInput'; isOneOf: false; inputFields: [{ name: 'id'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; }; defaultValue: null }, { name: 'enabled'; type: { kind: 'SCALAR'; name: 'Boolean'; ofType: null; }; defaultValue: null }, { name: 'translations'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'ProductVariantTranslationInput'; ofType: null; }; }; }; defaultValue: null }, { name: 'facetValueIds'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; }; }; defaultValue: null }, { name: 'optionIds'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; }; }; defaultValue: null }, { name: 'sku'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; }; defaultValue: null }, { name: 'taxCategoryId'; type: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; defaultValue: null }, { name: 'price'; type: { kind: 'SCALAR'; name: 'Money'; ofType: null; }; defaultValue: null }, { name: 'prices'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'UpdateProductVariantPriceInput'; ofType: null; }; }; }; defaultValue: null }, { name: 'featuredAssetId'; type: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; defaultValue: null }, { name: 'assetIds'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; }; }; defaultValue: null }, { name: 'stockOnHand'; type: { kind: 'SCALAR'; name: 'Int'; ofType: null; }; defaultValue: null }, { name: 'stockLevels'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'StockLevelInput'; ofType: null; }; }; }; defaultValue: null }, { name: 'outOfStockThreshold'; type: { kind: 'SCALAR'; name: 'Int'; ofType: null; }; defaultValue: null }, { name: 'useGlobalOutOfStockThreshold'; type: { kind: 'SCALAR'; name: 'Boolean'; ofType: null; }; defaultValue: null }, { name: 'trackInventory'; type: { kind: 'ENUM'; name: 'GlobalFlag'; ofType: null; }; defaultValue: null }, { name: 'customFields'; type: { kind: 'SCALAR'; name: 'JSON'; ofType: null; }; defaultValue: null }]; };
     'UpdateProductVariantPriceInput': { kind: 'INPUT_OBJECT'; name: 'UpdateProductVariantPriceInput'; isOneOf: false; inputFields: [{ name: 'currencyCode'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'ENUM'; name: 'CurrencyCode'; ofType: null; }; }; defaultValue: null }, { name: 'price'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Money'; ofType: null; }; }; defaultValue: null }, { name: 'delete'; type: { kind: 'SCALAR'; name: 'Boolean'; ofType: null; }; defaultValue: null }, { name: 'customFields'; type: { kind: 'SCALAR'; name: 'JSON'; ofType: null; }; defaultValue: null }]; };
     'UpdatePromotionInput': { kind: 'INPUT_OBJECT'; name: 'UpdatePromotionInput'; isOneOf: false; inputFields: [{ name: 'id'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; }; defaultValue: null }, { name: 'enabled'; type: { kind: 'SCALAR'; name: 'Boolean'; ofType: null; }; defaultValue: null }, { name: 'startsAt'; type: { kind: 'SCALAR'; name: 'DateTime'; ofType: null; }; defaultValue: null }, { name: 'endsAt'; type: { kind: 'SCALAR'; name: 'DateTime'; ofType: null; }; defaultValue: null }, { name: 'couponCode'; type: { kind: 'SCALAR'; name: 'String'; ofType: null; }; defaultValue: null }, { name: 'perCustomerUsageLimit'; type: { kind: 'SCALAR'; name: 'Int'; ofType: null; }; defaultValue: null }, { name: 'usageLimit'; type: { kind: 'SCALAR'; name: 'Int'; ofType: null; }; defaultValue: null }, { name: 'conditions'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'ConfigurableOperationInput'; ofType: null; }; }; }; defaultValue: null }, { name: 'actions'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'ConfigurableOperationInput'; ofType: null; }; }; }; defaultValue: null }, { name: 'translations'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'PromotionTranslationInput'; ofType: null; }; }; }; defaultValue: null }, { name: 'customFields'; type: { kind: 'SCALAR'; name: 'JSON'; ofType: null; }; defaultValue: null }]; };

package/src/lib/index.ts

@@ -1,8 +1,8 @@
 // This file is auto-generated. Do not edit manually.
-// Generated on: 2025-03-28T08:23:55.325Z
 
 export * from './components/data-display/boolean.js';
 export * from './components/data-display/date-time.js';
+export * from './components/data-display/json.js';
 export * from './components/data-display/money.js';
 export * from './components/data-input/affixed-input.js';
 export * from './components/data-input/customer-group-input.js';
@@ -10,12 +10,22 @@ export * from './components/data-input/datetime-input.js';
 export * from './components/data-input/facet-value-input.js';
 export * from './components/data-input/money-input.js';
 export * from './components/data-input/richt-text-input.js';
+export * from './components/data-table/add-filter-menu.js';
 export * from './components/data-table/data-table-column-header.js';
 export * from './components/data-table/data-table-faceted-filter.js';
+export * from './components/data-table/data-table-filter-badge.js';
 export * from './components/data-table/data-table-filter-dialog.js';
 export * from './components/data-table/data-table-pagination.js';
+export * from './components/data-table/data-table-types.js';
 export * from './components/data-table/data-table-view-options.js';
 export * from './components/data-table/data-table.js';
+export * from './components/data-table/filters/data-table-boolean-filter.js';
+export * from './components/data-table/filters/data-table-datetime-filter.js';
+export * from './components/data-table/filters/data-table-id-filter.js';
+export * from './components/data-table/filters/data-table-number-filter.js';
+export * from './components/data-table/filters/data-table-string-filter.js';
+export * from './components/data-table/human-readable-operator.js';
+export * from './components/data-table/refresh-button.js';
 export * from './components/layout/app-layout.js';
 export * from './components/layout/app-sidebar.js';
 export * from './components/layout/channel-switcher.js';
@@ -25,13 +35,17 @@ export * from './components/layout/language-dialog.js';
 export * from './components/layout/nav-main.js';
 export * from './components/layout/nav-projects.js';
 export * from './components/layout/nav-user.js';
+export * from './components/layout/prerelease-popup.js';
 export * from './components/login/login-form.js';
 export * from './components/shared/alerts.js';
 export * from './components/shared/animated-number.js';
+export * from './components/shared/asset/asset-focal-point-editor.js';
 export * from './components/shared/asset/asset-gallery.js';
 export * from './components/shared/asset/asset-picker-dialog.js';
 export * from './components/shared/asset/asset-preview-dialog.js';
+export * from './components/shared/asset/asset-preview-selector.js';
 export * from './components/shared/asset/asset-preview.js';
+export * from './components/shared/asset/asset-properties.js';
 export * from './components/shared/asset/focal-point-control.js';
 export * from './components/shared/assigned-facet-values.js';
 export * from './components/shared/channel-code-label.js';
@@ -43,6 +57,7 @@ export * from './components/shared/copyable-text.js';
 export * from './components/shared/country-selector.js';
 export * from './components/shared/currency-selector.js';
 export * from './components/shared/custom-fields-form.js';
+export * from './components/shared/customer-address-form.js';
 export * from './components/shared/customer-group-chip.js';
 export * from './components/shared/customer-group-selector.js';
 export * from './components/shared/customer-selector.js';
@@ -61,8 +76,11 @@ export * from './components/shared/icon-mark.js';
 export * from './components/shared/language-selector.js';
 export * from './components/shared/logo-mark.js';
 export * from './components/shared/multi-select.js';
+export * from './components/shared/navigation-confirmation.js';
+export * from './components/shared/option-value-input.js';
 export * from './components/shared/paginated-list-data-table.js';
 export * from './components/shared/permission-guard.js';
+export * from './components/shared/product-variant-selector.js';
 export * from './components/shared/rich-text-editor.js';
 export * from './components/shared/role-code-label.js';
 export * from './components/shared/role-selector.js';
@@ -103,6 +121,10 @@ export * from './components/ui/table.js';
 export * from './components/ui/tabs.js';
 export * from './components/ui/textarea.js';
 export * from './components/ui/tooltip.js';
+export * from './framework/alert/alert-extensions.js';
+export * from './framework/alert/alert-item.js';
+export * from './framework/alert/alerts-indicator.js';
+export * from './framework/alert/types.js';
 export * from './framework/component-registry/component-registry.js';
 export * from './framework/component-registry/dynamic-component.js';
 export * from './framework/dashboard-widget/base-widget.js';
@@ -122,11 +144,14 @@ export * from './framework/document-introspection/hooks.js';
 export * from './framework/extension-api/define-dashboard-extension.js';
 export * from './framework/extension-api/extension-api-types.js';
 export * from './framework/extension-api/use-dashboard-extensions.js';
+export * from './framework/form-engine/custom-form-component-extensions.js';
+export * from './framework/form-engine/custom-form-component.js';
 export * from './framework/form-engine/form-schema-tools.js';
 export * from './framework/form-engine/use-generated-form.js';
 export * from './framework/layout-engine/layout-extensions.js';
 export * from './framework/layout-engine/location-wrapper.js';
 export * from './framework/layout-engine/page-layout.js';
+export * from './framework/layout-engine/page-provider.js';
 export * from './framework/nav-menu/nav-menu-extensions.js';
 export * from './framework/page/detail-page-route-loader.js';
 export * from './framework/page/detail-page.js';
@@ -135,6 +160,8 @@ export * from './framework/page/page-api.js';
 export * from './framework/page/page-types.js';
 export * from './framework/page/use-detail-page.js';
 export * from './framework/page/use-extended-router.js';
+export * from './framework/registry/global-registry.js';
+export * from './framework/registry/registry-types.js';
 export * from './hooks/use-auth.js';
 export * from './hooks/use-channel.js';
 export * from './hooks/use-custom-field-config.js';
@@ -146,4 +173,5 @@ export * from './hooks/use-permissions.js';
 export * from './hooks/use-server-config.js';
 export * from './hooks/use-theme.js';
 export * from './hooks/use-user-settings.js';
+export * from './lib/trans.js';
 export * from './lib/utils.js';

package/src/lib/lib/utils.ts

@@ -58,3 +58,52 @@ export function normalizeString(input: string, spaceReplacer = ' '): string {
         .replace(/\s+/g, spaceReplacer)
         .replace(multipleSequentialReplacerRegex, spaceReplacer);
 }
+
+/**
+ * Removes any readonly custom fields from form values before submission.
+ * This prevents errors when submitting readonly custom field values to mutations.
+ *
+ * @param values - The form values that may contain custom fields
+ * @param customFieldConfigs - Array of custom field configurations for the entity
+ * @returns The values with readonly custom fields removed
+ */
+export function removeReadonlyCustomFields<T extends Record<string, any>>(
+    values: T,
+    customFieldConfigs: Array<{ name: string; readonly?: boolean | null }> = [],
+): T {
+    if (!values || !customFieldConfigs?.length) {
+        return values;
+    }
+
+    // Create a deep copy to avoid mutating the original values
+    const result = structuredClone(values);
+
+    // Get readonly field names
+    const readonlyFieldNames = customFieldConfigs
+        .filter(config => config.readonly === true)
+        .map(config => config.name);
+
+    if (readonlyFieldNames.length === 0) {
+        return result;
+    }
+
+    // Remove readonly fields from main customFields
+    if (result.customFields && typeof result.customFields === 'object') {
+        for (const fieldName of readonlyFieldNames) {
+            delete result.customFields[fieldName];
+        }
+    }
+
+    // Remove readonly fields from translations customFields
+    if (Array.isArray(result.translations)) {
+        for (const translation of result.translations) {
+            if (translation?.customFields && typeof translation.customFields === 'object') {
+                for (const fieldName of readonlyFieldNames) {
+                    delete translation.customFields[fieldName];
+                }
+            }
+        }
+    }
+
+    return result;
+}