rimecms 0.29.0 → 0.30.0

package/dist/fields/group/index.d.ts

@@ -7,7 +7,7 @@ export declare class GroupFieldBuilder extends FormFieldBuilder<GroupField> {
     constructor(name: string);
     get component(): Component<{
         path: string;
-        config: GroupField;
+        config: GroupFieldBuilder;
         form: import("../../panel").DocumentFormContext<import("../../types").GenericDoc>;
     }, {}, "">;
     label(label: string): this;
@@ -16,6 +16,7 @@ export declare class GroupFieldBuilder extends FormFieldBuilder<GroupField> {
     preview(component: Component<FieldsPreviewProps>): this;
     compile(): {
         fields: ({
+            name: string;
             type: string;
             live?: boolean | undefined;
             condition?: ((doc: any, siblings: any) => boolean) | undefined;
@@ -34,6 +35,7 @@ export declare class GroupFieldBuilder extends FormFieldBuilder<GroupField> {
                 value: any;
             }> | null;
         })[];
+        name: string;
         type: "group";
         live?: boolean;
         condition?: (doc: any, siblings: any) => boolean;
@@ -46,7 +48,6 @@ export declare class GroupFieldBuilder extends FormFieldBuilder<GroupField> {
             read: import("../types.js").FieldAccess;
             update: import("../types.js").FieldAccess;
         };
-        name: string;
         hidden?: boolean;
         validate?: import("../types.js").FieldValidationFunc<any>;
         required?: boolean;
@@ -62,6 +63,7 @@ export declare class GroupFieldBuilder extends FormFieldBuilder<GroupField> {
         };
         defaultValue?: import("../types.js").DefaultValueFn<any> | unknown;
         isEmpty: (value: unknown) => boolean;
+        _root?: boolean;
         preview?: Component<FieldsPreviewProps>;
     };
 }

package/dist/fields/group/index.server.js

@@ -1,12 +1,12 @@
 import { getFieldPrivateModule } from '../index.server.js';
 export async function toType(group) {
     const fieldsTypes = [];
-    for (const field of group.raw.fields) {
+    for (const field of group.get.fields) {
         const fieldServerMethods = await getFieldPrivateModule(field);
         if (fieldServerMethods) {
             const result = await Promise.resolve(fieldServerMethods.toType(field));
             fieldsTypes.push(result);
         }
     }
-    return group.raw.fields.length ? `${group.name}: {${fieldsTypes.join(',\n\t')}}` : '';
+    return group.get.fields.length ? `${group.name}: {${fieldsTypes.join(',\n\t')}}` : '';
 }

package/dist/fields/index.server.d.ts

@@ -1,17 +1,14 @@
 import type { FieldBuilder } from '../core/fields/builders/field-builder.js';
 export type ToType<T extends FieldBuilder<any> = FieldBuilder<any>> = (field: T) => Promise<string> | string;
-export type ToSchema<T extends FieldBuilder<any> = FieldBuilder<any>> = (field: T, parentPath?: string) => string;
 /**
  * Dynamically imports the server-side module for a form field if it exists
  * Returns the imported module or false if no server module is found or import fails
  * @example
  * const serverModule = await getFieldPrivateModule(fieldBuilder);
  * if (serverModule) {
- *   serverModule.toSchema({ name: 'title' })
- *   serverModule.toSchema({ name: 'title' })
+ *   serverModule.toType(fieldBuilder)
  * }
  */
 export declare function getFieldPrivateModule(field: FieldBuilder<any>): Promise<{
     toType: ToType;
-    toSchema: ToSchema;
 } | null>;

package/dist/fields/index.server.js

@@ -1,25 +1,30 @@
 import { existsSync } from 'fs';
 import { fileURLToPath } from 'node:url';
-import { extname } from 'path';
+import { dirname, extname, join } from 'path';
 /**
- * Converts a file URL to its corresponding server module path and checks if the file exists
- * Tries both .ts and .js extensions to find the server module
+ * Converts a file URL to its corresponding server module path and checks if the file exists.
+ * Prefers a sibling `runtime.server.ts` (the generic per-field server-only file, also used to
+ * resolve `$rime/runtime` — see relation/ for the first user), falling back to the older
+ * `<basename>.server.ts` convention most fields still use. Tries both .ts and .js extensions
+ * either way.
  * @example
- * convertToServerModulePath('file:///path/to/field.ts') // returns '/path/to/field.server.ts' if exists
+ * convertToServerModulePath('file:///path/to/relation/index.ts') // '/path/to/relation/runtime.server.ts'
+ * convertToServerModulePath('file:///path/to/text/index.ts') // '/path/to/text/index.server.ts'
  */
 function convertToServerModulePath(metaUrl) {
     try {
         // Convert file:// URL to file path
         const filePath = fileURLToPath(metaUrl);
+        const dir = dirname(filePath);
         // Get the filename without extension
         const baseName = filePath.replace(extname(filePath), '');
-        // Create the server module path
-        const serverModulePath = `${baseName}.server`;
-        // Try .ts first, then .js
-        for (const ext of ['.ts', '.js']) {
-            const fullPath = `${serverModulePath}${ext}`;
-            if (existsSync(fullPath)) {
-                return fullPath;
+        const candidates = [join(dir, 'runtime.server'), `${baseName}.server`];
+        for (const candidate of candidates) {
+            for (const ext of ['.ts', '.js']) {
+                const fullPath = `${candidate}${ext}`;
+                if (existsSync(fullPath)) {
+                    return fullPath;
+                }
             }
         }
         return null;
@@ -35,8 +40,7 @@ function convertToServerModulePath(metaUrl) {
  * @example
  * const serverModule = await getFieldPrivateModule(fieldBuilder);
  * if (serverModule) {
- *   serverModule.toSchema({ name: 'title' })
- *   serverModule.toSchema({ name: 'title' })
+ *   serverModule.toType(fieldBuilder)
  * }
  */
 export async function getFieldPrivateModule(field) {

package/dist/fields/link/component/Link.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { t__ } from '../../../core/i18n/index.js';
+  import { fieldset } from '../../../panel/components/fields/fieldset.svelte.js';
   import { Field } from '../../../panel/components/fields/index.js';
-  import { root } from '../../../panel/components/fields/root.svelte.js';
   import Button from '../../../panel/components/ui/button/button.svelte';
   import * as DropdownMenu from '../../../panel/components/ui/dropdown-menu/index.js';
   import { Input } from '../../../panel/components/ui/input/index.js';
@@ -32,7 +32,7 @@
 
   const primitiveTypes = ['url', 'email', 'tel', 'anchor'];
   const field = $derived(form.useField<Link>(path, config));
-  const linkTypes = $derived(config.types || ['url', 'email', 'tel', 'anchor']);
+  const linkTypes = $derived(config.get.types);
   const initial = $derived(path ? form.getRawValue<Link>(path) : null);
 
   let initialLinkType = $derived(initial?.type || linkTypes[0]);
@@ -99,9 +99,9 @@
 </script>
 
 <fieldset
-  class="rz-link-field {config.className}"
-  data-compact={config.layout === 'compact' ? '' : null}
-  use:root={field}
+  class="rz-link-field {config.get.className}"
+  data-compact={config.get.layout === 'compact' ? '' : null}
+  use:fieldset={field}
 >
   <Field.Label {config} for={path || config.name} />
 

package/dist/fields/link/component/props.d.ts

@@ -1,7 +1,7 @@
 import type { DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
-import type { LinkField } from '../index.js';
+import type { LinkFieldBuilder } from '../index.js';
 export type LinkFieldProps = {
     path: string;
-    config: LinkField;
+    config: LinkFieldBuilder;
     form: DocumentFormContext;
 };

package/dist/fields/link/index.d.ts

@@ -1,3 +1,4 @@
+import type { DataType } from '../../core/fields/builders/form-field-builder.js';
 import { FormFieldBuilder } from '../../core/fields/builders/form-field-builder.js';
 import type { DefaultValueFn, FormField } from '../types.js';
 import type { Link, LinkType } from './types.js';
@@ -10,9 +11,11 @@ export declare class LinkFieldBuilder extends FormFieldBuilder<LinkField> {
     }, {}, "">;
     layout(str: 'compact' | 'default'): this;
     defaultValue(value: Link | DefaultValueFn<Link>): this;
+    get dataType(): DataType;
     types(...values: LinkType[]): this;
     static readonly sanitize: (link: unknown) => Link | undefined;
     compile(): {
+        name: string;
         type: "link";
         live?: boolean | undefined;
         condition?: ((doc: any, siblings: any) => boolean) | undefined;
@@ -25,7 +28,6 @@ export declare class LinkFieldBuilder extends FormFieldBuilder<LinkField> {
             read: import("../types.js").FieldAccess;
             update: import("../types.js").FieldAccess;
         };
-        name: string;
         hidden?: boolean | undefined;
         validate?: import("../types.js").FieldValidationFunc<any> | undefined;
         required?: boolean | undefined;
@@ -52,6 +54,7 @@ export declare class LinkFieldBuilder extends FormFieldBuilder<LinkField> {
             url?: string | undefined;
         } | undefined;
         isEmpty: (value: unknown) => boolean;
+        _root?: boolean | undefined;
         layout: "compact" | "default";
         types: "tel"[] | "email"[] | "url"[] | "anchor"[];
     } & {

package/dist/fields/link/index.js

@@ -3,6 +3,9 @@ import { sanitize } from '../../util/string.js';
 import validate from '../../util/validate.js';
 import Cell from './component/Cell.svelte';
 import LinkComp from './component/Link.svelte';
+// @ts-expect-error — resolved at build time by the rime Vite plugin to either
+// relation/runtime.server.ts (real check) or relation/runtime.ts (client no-op)
+import { populateRessourceURL } from '$rime/runtime';
 export class LinkFieldBuilder extends FormFieldBuilder {
     //
     _metaUrl = import.meta.url;
@@ -13,16 +16,9 @@ export class LinkFieldBuilder extends FormFieldBuilder {
         this.field.layout = 'default';
         this.field.types = ['url'];
         this.field.hooks = {
-            beforeSave: [LinkFieldBuilder.sanitize]
+            beforeSave: [LinkFieldBuilder.sanitize],
+            beforeRead: [populateRessourceURL]
         };
-        if (import.meta.env.SSR && import.meta.url) {
-            import('./index.server.js').then((module) => {
-                this.field.hooks = {
-                    ...this.field.hooks,
-                    beforeRead: [module.populateRessourceURL]
-                };
-            });
-        }
     }
     get component() {
         return LinkComp;
@@ -38,6 +34,9 @@ export class LinkFieldBuilder extends FormFieldBuilder {
         this.field.defaultValue = value;
         return this;
     }
+    get dataType() {
+        return 'json';
+    }
     types(...values) {
         this.field.types = values;
         return this;
@@ -46,7 +45,7 @@ export class LinkFieldBuilder extends FormFieldBuilder {
         if (!link)
             return undefined;
         // Sanitize only the value and url properties of the link, other properties are left as is
-        const isLinkValue = (v) => typeof link === 'object' && !Array.isArray(link) && 'value' in link;
+        const isLinkValue = (v) => typeof v === 'object' && !Array.isArray(v) && 'value' in v;
         if (isLinkValue(link)) {
             return {
                 ...link,

package/dist/fields/link/runtime.d.ts

@@ -0,0 +1,2 @@
+import type { FieldHook, LinkField } from '../types.js';
+export declare const populateRessourceURL: FieldHook<LinkField>;

package/dist/fields/link/runtime.js

@@ -0,0 +1 @@
+export const populateRessourceURL = async (link) => link;

package/dist/fields/link/{index.server.d.ts → runtime.server.d.ts}

@@ -1,6 +1,5 @@
-import type { ToSchema, ToType } from '../index.server.js';
+import type { ToType } from '../index.server.js';
 import type { FieldHook, LinkField } from '../types.js';
 import type { LinkFieldBuilder } from './index.js';
-export declare const toSchema: ToSchema<LinkFieldBuilder>;
 export declare const toType: ToType<LinkFieldBuilder>;
 export declare const populateRessourceURL: FieldHook<LinkField>;

package/dist/fields/link/{index.server.js → runtime.server.js}

@@ -1,18 +1,9 @@
-import { templateUniqueRequired } from '../../adapter-sqlite/generate-schema/templates.server.js';
-import { getSchemaColumnNames } from '../../adapter-sqlite/generate-schema/util.server.js';
 import { RimeError } from '../../core/errors/index.js';
 import { logger } from '../../core/logger/index.server.js';
 import { trycatch } from '../../util/function.js';
-export const toSchema = (field, parentPath) => {
-    const { camel, snake } = getSchemaColumnNames({ name: field.name, parentPath });
-    const suffix = templateUniqueRequired(field.raw, typeof field.raw.defaultValue === 'object' ? field.raw.defaultValue : {});
-    if (field._generateSchema)
-        return field._generateSchema({ camel, snake, suffix });
-    return `${camel}: text('${snake}', { mode: 'json'})${suffix}`;
-};
 export const toType = (field) => {
-    return `${field.name}${field.raw.required ? '' : '?'}: {
-		type: ${field.raw.types.map((t) => `'${t}'`).join(' | ')};
+    return `${field.name}${field.get.required ? '' : '?'}: {
+		type: ${field.get.types.map((t) => `'${t}'`).join(' | ')};
 		value: string | null;
 		target: '_self' | '_blank';
 		url?: string;

package/dist/fields/number/component/Number.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+  import { fieldset } from '../../../panel/components/fields/fieldset.svelte.js';
   import { Field } from '../../../panel/components/fields/index.js';
-  import { root } from '../../../panel/components/fields/root.svelte.js';
   import { ChevronDown, ChevronUp } from '@lucide/svelte';
   import './number.css';
   import type { NumberFieldProps } from './props';
@@ -10,12 +10,12 @@
   const field = $derived(form.useField<number>(path, config));
 
   const decrease = () => {
-    const minValue = config.min ?? -Infinity;
+    const minValue = config.get.min ?? -Infinity;
     field.value = Math.max((field.value || 0) - 1, minValue);
   };
 
   const increase = () => {
-    const maxValue = config.max ?? Infinity;
+    const maxValue = config.get.max ?? Infinity;
     field.value = Math.min((field.value || 0) + 1, maxValue);
   };
 </script>
@@ -26,13 +26,13 @@
   </button>
 {/snippet}
 
-<fieldset class="rz-number-field {config.className || ''}" use:root={field}>
+<fieldset class="rz-number-field {config.get.className || ''}" use:fieldset={field}>
   <Field.Label {config} for={path || config.name} />
   <div class="rz-number-field__input-wrapper">
     <input
       class="rz-number-field__input"
-      min={config.min ?? undefined}
-      max={config.max ?? undefined}
+      min={config.get.min ?? undefined}
+      max={config.get.max ?? undefined}
       bind:value={field.value}
       type="number"
     />

package/dist/fields/number/component/props.d.ts

@@ -1,7 +1,7 @@
 import type { DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
-import type { NumberField } from '../index.js';
+import type { NumberFieldBuilder } from '../index.js';
 export type NumberFieldProps = {
     path: string;
-    config: NumberField;
+    config: NumberFieldBuilder;
     form: DocumentFormContext;
 };

package/dist/fields/number/index.d.ts

@@ -1,3 +1,4 @@
+import type { DataType } from '../../core/fields/builders/form-field-builder.js';
 import { FormFieldBuilder } from '../../core/fields/builders/form-field-builder.js';
 import type { DefaultValueFn, FieldValidationFunc, FormField } from '../types.js';
 export declare const number: (name: string) => NumberFieldBuilder;
@@ -8,7 +9,9 @@ export declare class NumberFieldBuilder extends FormFieldBuilder<NumberField> {
     defaultValue(value: number | DefaultValueFn<number>): this;
     min(value: number): this;
     max(value: number): this;
+    get dataType(): DataType;
     compile(): {
+        name: string;
         type: "number";
         live?: boolean | undefined;
         condition?: ((doc: any, siblings: any) => boolean) | undefined;
@@ -21,7 +24,6 @@ export declare class NumberFieldBuilder extends FormFieldBuilder<NumberField> {
             read: import("../types.js").FieldAccess;
             update: import("../types.js").FieldAccess;
         };
-        name: string;
         hidden?: boolean | undefined;
         validate?: (FieldValidationFunc<any, import("../../util/types").Dic> & FieldValidationFunc<NumberField>) | undefined;
         required?: boolean | undefined;
@@ -43,16 +45,15 @@ export declare class NumberFieldBuilder extends FormFieldBuilder<NumberField> {
         } | undefined;
         defaultValue?: number | DefaultValueFn<number> | undefined;
         isEmpty: (value: unknown) => boolean;
+        _root?: boolean | undefined;
         min?: number | undefined;
         max?: number | undefined;
-        _root?: boolean | undefined;
     } & {
         component: import("svelte").Component<any>;
         cell?: import("svelte").Component<{
             value: any;
         }> | null;
     };
-    _root(): this;
 }
 /****************************************************/
 export type NumberField = FormField & {
@@ -61,11 +62,4 @@ export type NumberField = FormField & {
     max?: number;
     defaultValue?: number | DefaultValueFn<number>;
     validate?: FieldValidationFunc<NumberField>;
-    /**
-     * Force the field to be on the root table
-     * usefull for fields that should not be versioned
-     * ex: _parent for nested structures should always be on the root table to prevent
-     * different versions to have different parents
-     */
-    _root?: boolean;
 };

package/dist/fields/number/index.js

@@ -36,14 +36,13 @@ export class NumberFieldBuilder extends FormFieldBuilder {
         this.field.max = value;
         return this;
     }
+    get dataType() {
+        return 'number';
+    }
     compile() {
         if (!this.field.defaultValue) {
             this.field.defaultValue = this.field.min || 0;
         }
         return super.compile();
     }
-    _root() {
-        this.field._root = true;
-        return this;
-    }
 }

package/dist/fields/number/index.server.d.ts

@@ -1,4 +1,3 @@
-import type { ToSchema, ToType } from '../index.server.js';
+import type { ToType } from '../index.server.js';
 import type { NumberFieldBuilder } from './index.js';
-export declare const toSchema: ToSchema<NumberFieldBuilder>;
 export declare const toType: ToType<NumberFieldBuilder>;

package/dist/fields/number/index.server.js

@@ -1,12 +1,3 @@
-import { templateUniqueRequired } from '../../adapter-sqlite/generate-schema/templates.server.js';
-import { getSchemaColumnNames } from '../../adapter-sqlite/generate-schema/util.server.js';
-export const toSchema = (field, parentPath) => {
-    const { camel, snake } = getSchemaColumnNames({ name: field.name, parentPath });
-    const suffix = templateUniqueRequired(field.raw, typeof field.raw.defaultValue === 'number' ? field.raw.defaultValue : 0);
-    if (field._generateSchema)
-        return field._generateSchema({ camel, snake, suffix });
-    return `${camel}: real('${snake}')${suffix}`;
-};
 export const toType = (field) => {
-    return `${field.name}${field.raw.required ? '' : '?'}: number`;
+    return `${field.name}${field.get.required ? '' : '?'}: number`;
 };

package/dist/fields/radio/component/Radio.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+  import { fieldset } from '../../../panel/components/fields/fieldset.svelte.js';
   import { Field } from '../../../panel/components/fields/index.js';
-  import { root } from '../../../panel/components/fields/root.svelte.js';
   import { Label } from '../../../panel/components/ui/label/index.js';
   import * as RadioGroup from '../../../panel/components/ui/radio-group/index.js';
   import * as RadioRowGroup from '../../../panel/components/ui/radio-row-group/index.js';
@@ -14,14 +14,14 @@
 </script>
 
 <fieldset
-  class="rz-field-radio rz-field-radio--{config.layout} {config.className || ''}"
-  use:root={field}
+  class="rz-field-radio rz-field-radio--{config.get.layout} {config.get.className || ''}"
+  use:fieldset={field}
 >
   <Field.Label {config} for={path || config.name} />
 
-  {#if config.layout === 'row'}
+  {#if config.get.layout === 'row'}
     <RadioRowGroup.Root bind:value={field.value} disabled={!field.editable}>
-      {#each config.options as option, index (index)}
+      {#each config.get.options as option, index (index)}
         <div class="rz-radio__option">
           <RadioRowGroup.Item value={option.value} id="{fieldId}-{index}" class="rz-radio__input">
             {option.label || capitalize(option.value)}
@@ -31,7 +31,7 @@
     </RadioRowGroup.Root>
   {:else}
     <RadioGroup.Root bind:value={field.value} class="rz-radio" disabled={!field.editable}>
-      {#each config.options as option, index (index)}
+      {#each config.get.options as option, index (index)}
         <div class="rz-radio__option">
           <RadioGroup.Item value={option.value} id="{fieldId}-{index}" class="rz-radio__input" />
           <Label class="rz-radio__label" for="{fieldId}-{index}">
@@ -50,7 +50,6 @@
   .rz-field-radio:not(.rz-field-radio--row) {
     display: flex;
     flex-direction: column;
-    /*gap: var(--rz-size-2);*/
 
     :global {
       .rz-radio__input {

package/dist/fields/radio/component/props.d.ts

@@ -1,7 +1,7 @@
 import type { DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
-import type { RadioField } from '../index.js';
+import type { RadioFieldBuilder } from '../index.js';
 export type RadioFieldProps = {
     path: string;
-    config: RadioField;
+    config: RadioFieldBuilder;
     form: DocumentFormContext;
 };

package/dist/fields/radio/index.server.d.ts

@@ -1,4 +1,3 @@
-import type { ToSchema, ToType } from '../index.server.js';
+import type { ToType } from '../index.server.js';
 import type { RadioFieldBuilder } from './index.js';
-export declare const toSchema: ToSchema<RadioFieldBuilder>;
 export declare const toType: ToType<RadioFieldBuilder>;

package/dist/fields/radio/index.server.js

@@ -1,13 +1,4 @@
-import { templateUniqueRequired } from '../../adapter-sqlite/generate-schema/templates.server.js';
-import { getSchemaColumnNames } from '../../adapter-sqlite/generate-schema/util.server.js';
-export const toSchema = (field, parentPath) => {
-    const { camel, snake } = getSchemaColumnNames({ name: field.raw.name, parentPath });
-    const suffix = templateUniqueRequired(field.raw, typeof field.raw.defaultValue === 'string' ? field.raw.defaultValue : '');
-    if (field._generateSchema)
-        return field._generateSchema({ camel, snake, suffix });
-    return `${camel}: text('${snake}')${suffix}`;
-};
 export const toType = (field) => {
-    const optionsString = field.raw.options.map((option) => `'${option.value}'`).join(' | ');
-    return `${field.raw.name}${field.raw.required ? '' : '?'}: ${optionsString}`;
+    const optionsString = field.get.options.map((option) => `'${option.value}'`).join(' | ');
+    return `${field.name}${field.get.required ? '' : '?'}: ${optionsString}`;
 };

package/dist/fields/relation/component/Relation.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { isUploadConfig } from '../../../core/collections/upload/util/config.js';
   import type { GenericDoc } from '../../../core/types/doc.js';
+  import { fieldset } from '../../../panel/components/fields/fieldset.svelte.js';
   import { Field } from '../../../panel/components/fields/index.js';
-  import { root } from '../../../panel/components/fields/root.svelte.js';
   import { getCollectionContext } from '../../../panel/context/collection.svelte.js';
   import { getConfigContext } from '../../../panel/context/config.svelte.js';
   import { type DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
@@ -13,13 +13,17 @@
   import { apiUrl } from '../../../util/index.js';
   import { snapshot } from '../../../util/state.js';
   import { getAPIProxyContext } from '../../../panel/context/api-proxy.svelte.js';
-  import type { Relation, RelationField } from '../index.js';
+  import type { Relation, RelationFieldBuilder } from '../index.js';
   import Default from './default/Default.svelte';
   import type { RelationFieldItem } from './types.js';
   import Upload from './upload/Upload.svelte';
 
   // Props
-  type Props = { path: string; config: RelationField; form: DocumentFormContext | FormContext };
+  type Props = {
+    path: string;
+    config: RelationFieldBuilder;
+    form: DocumentFormContext | FormContext;
+  };
   const { path, config, form }: Props = $props();
 
   // Context
@@ -28,7 +32,7 @@
   const APIProxy = getAPIProxyContext();
   const field = $derived(form.useField(path, config));
   // svelte-ignore state_referenced_locally
-  const relationConfig = getCollection(config.relationTo);
+  const relationConfig = getCollection(config.get.relationTo);
   const relationCollectionCtx = getCollectionContext(relationConfig.slug);
 
   let initialized = $state(false);
@@ -45,7 +49,7 @@
   const nothingToSelect = $derived(initialItems.length === 0);
 
   let isFull = $derived.by(() => {
-    if (!config.many) {
+    if (!config.get.many) {
       if (selectedItems.length === 1) return true;
     } else {
       if (availableItems.length === 0 && selectedItems.length > 0) {
@@ -94,16 +98,16 @@
     }
 
     // Add custom query parameters if provided
-    if (config.query) {
-      if (typeof config.query === 'string') {
+    if (config.get.query) {
+      if (typeof config.get.query === 'string') {
         // Parse the query string and add each parameter
-        const queryParams = new URLSearchParams(config.query);
+        const queryParams = new URLSearchParams(config.get.query);
         queryParams.forEach((value, key) => {
           url.searchParams.append(key, value);
         });
-      } else if (typeof config.query === 'function') {
+      } else if (typeof config.get.query === 'function') {
         // Parse the function result and add each parameter
-        const queryString = config.query(form.values);
+        const queryString = config.get.query(form.values);
         const queryParams = new URLSearchParams(queryString);
         queryParams.forEach((value, key) => {
           url.searchParams.append(key, value);
@@ -159,12 +163,12 @@
     const relations = selectedItems.map((item, index) => {
       let relation: Omit<Relation, 'ownerId'> = {
         id: item.id,
-        relationTo: config.relationTo,
+        relationTo: config.get.relationTo,
         path,
         position: index,
         documentId: item.documentId
       };
-      if (config.localized) {
+      if (config.get.localized) {
         relation.locale = locale.code;
       }
       if ('isLive' in form && form.isLive) {
@@ -236,13 +240,13 @@
   const RelationComponent = isRelationToUpload ? Upload : Default;
 </script>
 
-<fieldset class="rz-field-relation {config.className || ''}" use:root={field}>
+<fieldset class="rz-field-relation {config.get.className || ''}" use:fieldset={field}>
   <Field.Label {config} for={path || config.name} />
   <Field.Hint {config} />
 
   <RelationComponent
     {path}
-    many={!!config.many}
+    many={!!config.get.many}
     hasError={!!field.error}
     formNestedLevel={'nestedLevel' in form ? form.nestedLevel : 0}
     readOnly={form.readOnly}

package/dist/fields/relation/component/Relation.svelte.d.ts

@@ -1,9 +1,9 @@
 import { type DocumentFormContext } from '../../../panel/context/documentForm.svelte.js';
 import type { FormContext } from '../../../panel/context/form.svelte.js';
-import type { Relation, RelationField } from '../index.js';
+import type { Relation, RelationFieldBuilder } from '../index.js';
 type Props = {
     path: string;
-    config: RelationField;
+    config: RelationFieldBuilder;
     form: DocumentFormContext | FormContext;
 };
 declare const Relation: import("svelte").Component<Props, {}, "">;