@vendure/dashboard 3.4.1-master-202508210231 → 3.4.1

package/src/lib/components/data-input/struct-form-input.tsx

@@ -10,30 +10,22 @@ import {
 import { Input } from '@/vdb/components/ui/input.js';
 import { Switch } from '@/vdb/components/ui/switch.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
-import { structCustomFieldFragment } from '@/vdb/providers/server-config.js';
-import { ResultOf } from 'gql.tada';
 import { CheckIcon, PencilIcon, X } from 'lucide-react';
 import React, { useMemo, useState } from 'react';
-import { Control, ControllerRenderProps, useWatch } from 'react-hook-form';
+import { ControllerRenderProps, useFormContext, useWatch } from 'react-hook-form';
 
 // Import the form input component we already have
+import {
+    DashboardFormComponentProps,
+    StructCustomFieldConfig,
+    StructField,
+} from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isStructFieldConfig } from '@/vdb/framework/form-engine/utils.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { CustomFieldListInput } from './custom-field-list-input.js';
 import { DateTimeInput } from './datetime-input.js';
 import { SelectWithOptions } from './select-with-options.js';
 
-// Use the generated types from GraphQL fragments
-type StructCustomFieldConfig = ResultOf<typeof structCustomFieldFragment>;
-type StructField = StructCustomFieldConfig['fields'][number];
-
-interface StructFormInputProps {
-    field: ControllerRenderProps<any, any>;
-    fieldDef: StructCustomFieldConfig;
-    control: Control<any, any>;
-    getTranslation: (
-        input: Array<{ languageCode: string; value: string }> | null | undefined,
-    ) => string | undefined;
-}
-
 interface DisplayModeProps {
     fieldDef: StructCustomFieldConfig;
     watchedStructValue: Record<string, any>;
@@ -84,42 +76,30 @@ function DisplayMode({
     );
 }
 
-export function StructFormInput({ field, fieldDef, control, getTranslation }: StructFormInputProps) {
+export function StructFormInput({ fieldDef, ...field }: Readonly<DashboardFormComponentProps>) {
     const { formatDate } = useLocalFormat();
-    const isReadonly = fieldDef.readonly ?? false;
     const [isEditing, setIsEditing] = useState(false);
+    const { control } = useFormContext();
+    const { value, name } = field;
 
     // Watch the struct field for changes to update display mode
     const watchedStructValue =
         useWatch({
             control,
-            name: field.name,
-            defaultValue: field.value || {},
+            name,
+            defaultValue: value || {},
         }) || {};
 
-    // Helper function to format field value for display
-    const formatFieldValue = (value: any, structField: StructField) => {
-        if (value == null) return '-';
-        if (structField.list) {
-            if (Array.isArray(value)) {
-                return value.length ? value.join(', ') : '-';
-            }
-            return '-';
-        }
-        switch (structField.type) {
-            case 'boolean':
-                return (
-                    <span className={`inline-flex items-center ${value ? 'text-green-600' : 'text-red-500'}`}>
-                        {value ? <CheckIcon className="h-4 w-4" /> : <X className="h-4 w-4" />}
-                    </span>
-                );
-            case 'datetime':
-                return value ? formatDate(value, { dateStyle: 'short', timeStyle: 'short' }) : '-';
-            default:
-                return value.toString();
-        }
+    const {
+        settings: { displayLanguage },
+    } = useUserSettings();
+
+    const getTranslation = (input: Array<{ languageCode: string; value: string }> | null | undefined) => {
+        return input?.find(t => t.languageCode === displayLanguage)?.value;
     };
 
+    const isReadonly = fieldDef?.readonly === true;
+
     // Helper function to render individual struct field inputs
     const renderStructFieldInput = (
         structField: StructField,
@@ -135,12 +115,7 @@ export function StructFormInput({ field, fieldDef, control, getTranslation }: St
                     const stringField = structField as any; // GraphQL union types need casting
                     if (stringField.options && stringField.options.length > 0) {
                         return (
-                            <SelectWithOptions
-                                field={singleField}
-                                options={stringField.options}
-                                disabled={isReadonly}
-                                isListField={false}
-                            />
+                            <SelectWithOptions {...singleField} fieldDef={stringField} isListField={false} />
                         );
                     }
                     return (
@@ -187,13 +162,7 @@ export function StructFormInput({ field, fieldDef, control, getTranslation }: St
                         />
                     );
                 case 'datetime':
-                    return (
-                        <DateTimeInput
-                            value={singleField.value}
-                            onChange={singleField.onChange}
-                            disabled={isReadonly}
-                        />
-                    );
+                    return <DateTimeInput {...singleField} />;
                 default:
                     return (
                         <Input
@@ -213,8 +182,8 @@ export function StructFormInput({ field, fieldDef, control, getTranslation }: St
             if (stringField.options && stringField.options.length > 0) {
                 return (
                     <SelectWithOptions
-                        field={inputField}
-                        options={stringField.options}
+                        {...inputField}
+                        fieldDef={stringField}
                         disabled={isReadonly}
                         isListField={isList}
                     />
@@ -245,11 +214,10 @@ export function StructFormInput({ field, fieldDef, control, getTranslation }: St
 
             return (
                 <CustomFieldListInput
-                    field={inputField}
+                    {...inputField}
                     disabled={isReadonly}
                     renderInput={(index, listItemField) => renderSingleStructInput(listItemField)}
                     defaultValue={getDefaultValue()}
-                    isFullWidth={needsFullWidth}
                 />
             );
         }
@@ -275,7 +243,7 @@ export function StructFormInput({ field, fieldDef, control, getTranslation }: St
                         </Button>
                     </div>
                 )}
-                {fieldDef.fields.map(structField => (
+                {fieldDef?.fields?.map(structField => (
                     <FormField
                         key={structField.name}
                         control={control}
@@ -309,6 +277,33 @@ export function StructFormInput({ field, fieldDef, control, getTranslation }: St
         [fieldDef, control, field.name, getTranslation, renderStructFieldInput, isReadonly],
     );
 
+    if (!fieldDef || !isStructFieldConfig(fieldDef)) {
+        return null;
+    }
+
+    // Helper function to format field value for display
+    const formatFieldValue = (value: any, structField: StructField) => {
+        if (value == null) return '-';
+        if (structField.list) {
+            if (Array.isArray(value)) {
+                return value.length ? value.join(', ') : '-';
+            }
+            return '-';
+        }
+        switch (structField.type) {
+            case 'boolean':
+                return (
+                    <span className={`inline-flex items-center ${value ? 'text-green-600' : 'text-red-500'}`}>
+                        {value ? <CheckIcon className="h-4 w-4" /> : <X className="h-4 w-4" />}
+                    </span>
+                );
+            case 'datetime':
+                return value ? formatDate(value, { dateStyle: 'short', timeStyle: 'short' }) : '-';
+            default:
+                return value.toString();
+        }
+    };
+
     return isEditing ? (
         EditMode
     ) : (

package/src/lib/components/data-input/text-input.tsx

@@ -0,0 +1,9 @@
+// Simple built-in components using the single DashboardFormComponent interface
+import { Input } from '@/vdb/components/ui/input.js';
+import { DashboardFormComponent } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
+
+export const TextInput: DashboardFormComponent = ({ value, onChange, fieldDef }) => {
+    const readOnly = isReadonlyField(fieldDef);
+    return <Input value={value || ''} onChange={e => onChange(e.target.value)} disabled={readOnly} />;
+};

package/src/lib/components/data-input/textarea-input.tsx

@@ -0,0 +1,16 @@
+import { Textarea } from '@/vdb/components/ui/textarea.js';
+import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
+
+export function TextareaInput(props: Readonly<DashboardFormComponentProps>) {
+    const readOnly = props.disabled || isReadonlyField(props.fieldDef);
+    return (
+        <Textarea
+            ref={props.ref}
+            onBlur={props.onBlur}
+            value={props.value}
+            onChange={e => props.onChange(e.target.value)}
+            disabled={readOnly}
+        />
+    );
+}

package/src/lib/components/data-table/filters/data-table-number-filter.tsx

@@ -73,6 +73,9 @@ export function DataTableNumberFilter({
         if (mode === 'money') {
             return (
                 <MoneyInput
+                    ref={() => {}}
+                    onBlur={() => {}}
+                    name="amount"
                     value={parseFloat(value) || 0}
                     onChange={newValue => onChange(newValue.toString())}
                     currency={activeChannel?.defaultCurrencyCode ?? 'USD'}

package/src/lib/components/data-table/use-generated-columns.tsx

@@ -1,5 +1,9 @@
-import { DisplayComponent } from '@/vdb/framework/component-registry/dynamic-component.js';
-import { FieldInfo, getTypeFieldInfo, getOperationVariablesFields } from '@/vdb/framework/document-introspection/get-document-structure.js';
+import { DisplayComponent } from '@/vdb/framework/component-registry/display-component.js';
+import {
+    FieldInfo,
+    getOperationVariablesFields,
+    getTypeFieldInfo,
+} from '@/vdb/framework/document-introspection/get-document-structure.js';
 import { api } from '@/vdb/graphql/api.js';
 import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
@@ -250,14 +254,21 @@ function DeleteMutationRowAction({
 }>) {
     const { refetchPaginatedList } = usePaginatedList();
     const { i18n } = useLingui();
-    
+
     // Inspect the mutation variables to determine if it expects 'id' or 'ids'
     const mutationVariables = getOperationVariablesFields(deleteMutation);
     const hasIdsParameter = mutationVariables.some(field => field.name === 'ids');
-    
+
     const { mutate: deleteMutationFn } = useMutation({
         mutationFn: api.mutate(deleteMutation),
-        onSuccess: (result: { [key: string]: { result: 'DELETED' | 'NOT_DELETED'; message: string } | { result: 'DELETED' | 'NOT_DELETED'; message: string }[] }) => {
+        onSuccess: (result: {
+            [key: string]:
+                | { result: 'DELETED' | 'NOT_DELETED'; message: string }
+                | {
+                      result: 'DELETED' | 'NOT_DELETED';
+                      message: string;
+                  }[];
+        }) => {
             const unwrappedResult = Object.values(result)[0];
             // Handle both single result and array of results
             const resultToCheck = Array.isArray(unwrappedResult) ? unwrappedResult[0] : unwrappedResult;

package/src/lib/components/shared/configurable-operation-arg-input.tsx

@@ -1,26 +1,21 @@
 import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
-import { configArgToUniversal } from './universal-field-definition.js';
-import { UniversalFormInput } from './universal-form-input.js';
+import { FormControlAdapter } from '../../framework/form-engine/form-control-adapter.js';
 
 export interface ConfigurableOperationArgInputProps {
     definition: ConfigurableOperationDefFragment['args'][number];
     readOnly?: boolean;
     value: string;
     onChange: (value: any) => void;
-    position?: number;
 }
 
 export function ConfigurableOperationArgInput({
     definition,
     value,
     onChange,
-    readOnly,
-    position,
 }: Readonly<ConfigurableOperationArgInputProps>) {
-    const universalFieldDef = configArgToUniversal(definition);
     return (
-        <UniversalFormInput
-            fieldDef={universalFieldDef}
+        <FormControlAdapter
+            fieldDef={definition}
             field={{
                 value,
                 onChange,
@@ -29,8 +24,6 @@ export function ConfigurableOperationArgInput({
                 ref: () => {},
             }}
             valueMode="json-string"
-            disabled={readOnly}
-            position={position}
         />
     );
 }

package/src/lib/components/shared/configurable-operation-input.tsx

@@ -22,7 +22,6 @@ export function ConfigurableOperationInput({
     operationDefinition,
     readonly,
     removable,
-    position,
     hideDescription,
     value,
     onChange,
@@ -90,10 +89,7 @@ export function ConfigurableOperationInput({
                                     className={`grid gap-4 ${operationDefinition.args.length === 1 ? 'grid-cols-1' : 'grid-cols-1 sm:grid-cols-2'}`}
                                 >
                                     {operationDefinition.args
-                                        .filter(
-                                            arg =>
-                                                arg.ui?.component !== 'combination-mode-form-input',
-                                        )
+                                        .filter(arg => arg.ui?.component !== 'combination-mode-form-input')
                                         .map(arg => {
                                             const argValue =
                                                 value.arguments.find(a => a.name === arg.name)?.value || '';
@@ -114,7 +110,6 @@ export function ConfigurableOperationInput({
                                                                         handleInputChange(arg.name, value)
                                                                     }
                                                                     readOnly={readonly}
-                                                                    position={position}
                                                                 />
                                                             </FormControl>
                                                         </FormItem>

package/src/lib/components/shared/configurable-operation-multi-selector.tsx

@@ -1,3 +1,4 @@
+import { CombinationModeInput } from '@/vdb/components/data-input/combination-mode-input.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import {
     DropdownMenu,
@@ -5,7 +6,6 @@ import {
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from '@/vdb/components/ui/dropdown-menu.js';
-import { InputComponent } from '@/vdb/framework/component-registry/dynamic-component.js';
 import { api } from '@/vdb/graphql/api.js';
 import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
 import { Trans } from '@/vdb/lib/trans.js';
@@ -179,13 +179,14 @@ export function ConfigurableOperationMultiSelector({
                         if (!operationDef) {
                             return null;
                         }
-                        const hasCombinationMode = operation.arguments.find(arg => arg.name === 'combineWithAnd');
+                        const hasCombinationMode = operation.arguments.find(
+                            arg => arg.name === 'combineWithAnd',
+                        );
                         return (
                             <div key={index + operation.code}>
                                 {index > 0 && hasCombinationMode ? (
                                     <div className="my-2">
-                                        <InputComponent
-                                            id="vendure:combinationModeInput"
+                                        <CombinationModeInput
                                             value={
                                                 operation.arguments.find(arg => arg.name === 'combineWithAnd')
                                                     ?.value ?? 'true'
@@ -193,6 +194,9 @@ export function ConfigurableOperationMultiSelector({
                                             onChange={(newValue: boolean | string) =>
                                                 onCombinationModeChange(index, newValue)
                                             }
+                                            name={''}
+                                            ref={() => {}}
+                                            onBlur={() => {}}
                                             position={index}
                                         />
                                     </div>
@@ -204,7 +208,6 @@ export function ConfigurableOperationMultiSelector({
                                     value={operation}
                                     onChange={value => onOperationValueChange(operation, value)}
                                     onRemove={() => onOperationRemove(index)}
-                                    position={index}
                                 />
                             </div>
                         );

package/src/lib/components/shared/configurable-operation-selector.tsx

@@ -41,19 +41,19 @@ type QueryData = {
 
 /**
  * ConfigurableOperationSelector - A reusable component for selecting a single configurable operation
- * 
+ *
  * This component provides a standardized interface for selecting configurable operations such as:
  * - Payment method handlers
- * - Payment eligibility checkers  
+ * - Payment eligibility checkers
  * - Shipping calculators
  * - Shipping eligibility checkers
- * 
+ *
  * Features:
  * - Displays the selected operation with its configuration form
  * - Provides a dropdown to select from available operations
  * - Handles operation selection with default argument values
  * - Supports removal of selected operations
- * 
+ *
  * @example
  * ```tsx
  * <ConfigurableOperationSelector
@@ -122,7 +122,7 @@ export function ConfigurableOperationSelector({
                     <ConfigurableOperationInput
                         operationDefinition={operationDef}
                         value={value}
-                        onChange={value => onOperationValueChange(value)}
+                        onChange={v => onOperationValueChange(v)}
                         onRemove={() => onOperationRemove()}
                     />
                 </div>

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

@@ -17,9 +17,8 @@ import { customFieldConfigFragment } from '@/vdb/providers/server-config.js';
 import { ResultOf } from 'gql.tada';
 import React, { useMemo } from 'react';
 import { Control } from 'react-hook-form';
+import { FormControlAdapter } from '../../framework/form-engine/form-control-adapter.js';
 import { TranslatableFormField } from './translatable-form-field.js';
-import { customFieldToUniversal } from './universal-field-definition.js';
-import { UniversalFormInput } from './universal-form-input.js';
 
 type CustomFieldConfig = ResultOf<typeof customFieldConfigFragment>;
 
@@ -30,15 +29,7 @@ interface CustomFieldsFormProps {
 }
 
 export function CustomFieldsForm({ entityType, control, formPathPrefix }: Readonly<CustomFieldsFormProps>) {
-    const {
-        settings: { displayLanguage },
-    } = useUserSettings();
     const { i18n } = useLingui();
-
-    const getTranslation = (input: Array<{ languageCode: string; value: string }> | null | undefined) => {
-        return input?.find(t => t.languageCode === displayLanguage)?.value;
-    };
-
     const customFields = useCustomFieldConfig(entityType);
 
     const getCustomFieldBaseName = (fieldDef: CustomFieldConfig) => {
@@ -94,7 +85,6 @@ export function CustomFieldsForm({ entityType, control, formPathPrefix }: Readon
                         fieldDef={fieldDef}
                         control={control}
                         fieldName={getFieldName(fieldDef)}
-                        getTranslation={getTranslation}
                     />
                 ))}
             </div>
@@ -120,7 +110,6 @@ export function CustomFieldsForm({ entityType, control, formPathPrefix }: Readon
                                 fieldDef={fieldDef}
                                 control={control}
                                 fieldName={getFieldName(fieldDef)}
-                                getTranslation={getTranslation}
                             />
                         ))}
                     </div>
@@ -134,12 +123,16 @@ 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 }: Readonly<CustomFieldItemProps>) {
+function CustomFieldItem({ fieldDef, control, fieldName }: Readonly<CustomFieldItemProps>) {
+    const {
+        settings: { displayLanguage },
+    } = useUserSettings();
+
+    const getTranslation = (input: Array<{ languageCode: string; value: string }> | null | undefined) => {
+        return input?.find(t => t.languageCode === displayLanguage)?.value;
+    };
     const hasCustomFormComponent = fieldDef.ui?.component;
     const isLocaleField = fieldDef.type === 'localeString' || fieldDef.type === 'localeText';
     const shouldBeFullWidth = fieldDef.ui?.fullWidth === true;
@@ -160,22 +153,13 @@ function CustomFieldItem({ fieldDef, control, fieldName, getTranslation }: Reado
                                 {hasCustomFormComponent ? (
                                     <CustomFormComponent
                                         fieldDef={fieldDef}
-                                        fieldProps={{
-                                            ...props,
-                                            field: {
-                                                ...field,
-                                                disabled: fieldDef.readonly ?? false,
-                                            },
-                                        }}
+                                        {...field}
                                     />
                                 ) : (
-                                    <UniversalFormInput
-                                        fieldDef={customFieldToUniversal(fieldDef)}
+                                    <FormControlAdapter
+                                        fieldDef={fieldDef}
                                         field={field}
                                         valueMode="native"
-                                        disabled={fieldDef.readonly ?? false}
-                                        control={control}
-                                        getTranslation={getTranslation}
                                     />
                                 )}
                             </FormControl>
@@ -203,13 +187,7 @@ function CustomFieldItem({ fieldDef, control, fieldName, getTranslation }: Reado
                         >
                             <CustomFormComponent
                                 fieldDef={fieldDef}
-                                fieldProps={{
-                                    ...fieldProps,
-                                    field: {
-                                        ...fieldProps.field,
-                                        disabled: fieldDef.readonly ?? false,
-                                    },
-                                }}
+                                {...fieldProps.field}
                             />
                         </CustomFieldFormItem>
                     )}
@@ -234,14 +212,12 @@ function CustomFieldItem({ fieldDef, control, fieldName, getTranslation }: Reado
                                 <FormLabel>{getTranslation(fieldDef.label) ?? fieldDef.name}</FormLabel>
                                 <FormControl>
                                     <CustomFieldListInput
-                                        field={field}
+                                        {...field}
                                         disabled={isReadonly}
                                         renderInput={(index, inputField) => (
                                             <StructFormInput
-                                                field={inputField}
-                                                fieldDef={fieldDef as any}
-                                                control={control}
-                                                getTranslation={getTranslation}
+                                                {...inputField}
+                                                fieldDef={fieldDef}
                                             />
                                         )}
                                         defaultValue={{}} // Empty struct object as default
@@ -268,10 +244,8 @@ function CustomFieldItem({ fieldDef, control, fieldName, getTranslation }: Reado
                             <FormLabel>{getTranslation(fieldDef.label) ?? fieldDef.name}</FormLabel>
                             <FormControl>
                                 <StructFormInput
-                                    field={field}
-                                    fieldDef={fieldDef as any}
-                                    control={control}
-                                    getTranslation={getTranslation}
+                                    {...field}
+                                    fieldDef={fieldDef}
                                 />
                             </FormControl>
                             <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
@@ -295,13 +269,10 @@ function CustomFieldItem({ fieldDef, control, fieldName, getTranslation }: Reado
                         getTranslation={getTranslation}
                         fieldName={fieldDef.name}
                     >
-                        <UniversalFormInput
-                            fieldDef={customFieldToUniversal(fieldDef)}
+                        <FormControlAdapter
+                            fieldDef={fieldDef}
                             field={field}
                             valueMode="native"
-                            disabled={fieldDef.readonly ?? false}
-                            control={control}
-                            getTranslation={getTranslation}
                         />
                     </CustomFieldFormItem>
                 )}

package/src/lib/components/shared/multi-select.tsx

@@ -63,7 +63,7 @@ export function MultiSelect<T extends boolean>(props: MultiSelectProps<T>) {
 
     const renderTrigger = () => {
         if (multiple) {
-            const selectedValues = value as string[];
+            const selectedValues: string[] = typeof value === 'string' ? [value] : value;
             return (
                 <Button
                     variant="outline"

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

@@ -1,28 +1,24 @@
+import {
+    DashboardFormComponent,
+    DashboardFormComponentProps,
+} from '@/vdb/framework/form-engine/form-engine-types.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';
+import { getDisplayComponent } from '../extension-api/display-component-extensions.js';
+import { getInputComponent } from '../extension-api/input-component-extensions.js';
 
 export interface ComponentRegistryEntry<Props extends Record<string, any>> {
     component: React.ComponentType<Props>;
 }
 
-// Basic component types
-
+// Display component interface (unchanged)
 export interface DataDisplayComponentProps {
     value: any;
-    [key: string]: any;
-}
 
-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>;
+export type { DashboardFormComponentProps as DataInputComponentProps };
 
 // Component registry hook that uses the global registry
 export function useComponentRegistry() {
@@ -30,27 +26,8 @@ export function useComponentRegistry() {
         getDisplayComponent: (id: string): DataDisplayComponent | undefined => {
             return getDisplayComponent(id);
         },
-        getInputComponent: (id: string): DataInputComponent | undefined => {
+        getInputComponent: (id: string): DashboardFormComponent | undefined => {
             return getInputComponent(id);
         },
     };
 }
-
-// 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(
-    pageId: string,
-    blockId: string,
-    field: string,
-    component: DataDisplayComponent,
-) {
-    addDisplayComponent({ pageId, blockId, field, component });
-}