@rebasepro/admin 0.0.1-canary.eae7889 → 0.0.1-canary.eb08332

package/src/collection_editor/ui/collection_editor/properties/EnumPropertyField.tsx

@@ -1,7 +1,8 @@
 import React, { useMemo } from "react";
-import { getIn, useFormex } from "@rebasepro/formex";
-import { useSnackbarController, useTranslation } from "@rebasepro/core";
-import { EnumValueConfig } from "@rebasepro/types";
+import { getIn, useFormex } from "@rebasepro/forms";
+import { useTranslation } from "@rebasepro/app";
+import { useSafeSnackbarController } from "../../../useSafeSnackbarController";
+import { EnumValueConfig, EnumValues } from "@rebasepro/types";
 import { resolveEnumValues } from "@rebasepro/common";
 import { Select, SelectItem } from "@rebasepro/ui";
 import { EnumForm } from "../EnumForm";
@@ -34,14 +35,14 @@ export function EnumPropertyField({
         setFieldValue
     } = useFormex<PropertyWithId>();
 
-    const snackbarContext = useSnackbarController();
+    const snackbarContext = useSafeSnackbarController();
     const { t } = useTranslation();
 
     const enumValuesPath = multiselect ? "of.enum" : "enum";
 
-    const defaultValue = getIn(values, "defaultValue");
+    const defaultValue = getIn(values, "defaultValue") as string | number | undefined;
 
-    const valuesEnumValues = getIn(values, enumValuesPath);
+    const valuesEnumValues = getIn(values, enumValuesPath) as EnumValues | undefined;
     const enumValues: EnumValueConfig[] = useMemo(() => {
         if (!valuesEnumValues || typeof valuesEnumValues === "boolean")
             return [] as EnumValueConfig[];
@@ -56,7 +57,7 @@ export function EnumPropertyField({
             const enumIds = value.filter(v => Boolean(v?.id)).map((v: EnumValueConfig) => v.id);
             if (defaultValue && !enumIds.includes(defaultValue)) {
                 setFieldValue("defaultValue", undefined);
-                snackbarContext.open({
+                snackbarContext?.open({
                     type: "warning",
                     message: "Default value was cleared"
                 })
@@ -81,7 +82,7 @@ export function EnumPropertyField({
                     }}
                     getData={getData && fullPropertyPath
                         ? () => getData()
-                            .then(res => res.map(entry => getIn(entry, fullPropertyPath)).filter(Boolean))
+                            .then(res => res.map(entry => getIn(entry, fullPropertyPath) as string).filter(Boolean))
                         : undefined}
                     onValuesChanged={onValuesChanged}/>
             </div>
@@ -108,7 +109,7 @@ export function EnumPropertyField({
                         setFieldValue("defaultValue", value);
                     }}
                     label={t("default_value")}
-                    value={defaultValue ?? ""}>
+                    value={defaultValue?.toString() ?? ""}>
                     {enumValues
                         .filter((enumValue) => Boolean(enumValue?.id))
                         .map((enumValue) => (

package/src/collection_editor/ui/collection_editor/properties/MapPropertyField.tsx

@@ -2,11 +2,10 @@ import { FieldCaption } from "../../../_cms_internals";
 import React, { useState } from "react";
 ;
 import { MapProperty, Property, PropertyConfig } from "@rebasepro/types";
-import { BooleanSwitchWithLabel, Button, Paper, Typography } from "@rebasepro/ui";
-import { PlusIcon } from "lucide-react";
+import { BooleanSwitchWithLabel, Button, Paper, PlusIcon, Typography } from "@rebasepro/ui";
 import { PropertyFormDialog } from "../PropertyEditView";
-import { getIn, useFormex } from "@rebasepro/formex";
-import { useTranslation } from "@rebasepro/core";
+import { getIn, useFormex } from "@rebasepro/forms";
+import { useTranslation } from "@rebasepro/app";
 import { PropertyTree } from "../PropertyTree";
 import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath, namespaceToPropertiesPath } from "../util";
 
@@ -54,7 +53,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
         const propertiesPath = idToPropertiesPath(fullId);
         const propertiesOrderPath = namespaceToPropertiesOrderPath(namespace);
 
-        const currentPropertiesOrder: string[] = getIn(values, propertiesOrderPath) ?? Object.keys(getIn(values, namespaceToPropertiesPath(namespace)));
+        const currentPropertiesOrder: string[] = (getIn(values, propertiesOrderPath) as string[] | undefined) ?? Object.keys(getIn(values, namespaceToPropertiesPath(namespace)) as object ?? {});
 
         setFieldValue(propertiesPath, undefined, false);
         setFieldValue(propertiesOrderPath, currentPropertiesOrder.filter((p) => p !== propertyKey), false);
@@ -111,8 +110,8 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
                     position={"start"}
                     size={"medium"}
                     label={t("spread_children_as_columns")}
-                    onValueChange={(v) => setFieldValue("spreadChildren", v)}
-                    value={values.spreadChildren ?? false}
+                    onValueChange={(v) => setFieldValue("ui.spreadChildren", v)}
+                    value={values.ui?.spreadChildren ?? false}
                 />
                 <FieldCaption>
                     Set this flag to true if you want to display the children of this group as individual columns. This
@@ -140,7 +139,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
                 onDelete={deleteProperty}
                 propertyKey={selectedPropertyKey}
                 propertyNamespace={selectedPropertyNamespace}
-                property={selectedProperty}
+                property={selectedProperty as Property | undefined}
                 existingProperty={Boolean(selectedPropertyKey)}
                 autoUpdateId={!selectedPropertyKey}
                 autoOpenTypeSelect={!selectedPropertyKey}

package/src/collection_editor/ui/collection_editor/properties/MarkdownPropertyField.tsx

@@ -2,11 +2,18 @@
 import React, { useCallback } from "react";
 import { StringPropertyValidation } from "./validation/StringPropertyValidation";
 import { ValidationPanel } from "./validation/ValidationPanel";
-import { Field, getIn, useFormex } from "@rebasepro/formex";
-import { useTranslation } from "@rebasepro/core";
-
-import { BooleanSwitchWithLabel, DebouncedTextField, ExpandablePanel, TextField, Typography } from "@rebasepro/ui";
-import { UploadCloudIcon, SettingsIcon } from "lucide-react";
+import { Field, getIn, useFormex } from "@rebasepro/forms";
+import { useTranslation } from "@rebasepro/app";
+
+import {
+    BooleanSwitchWithLabel,
+    DebouncedTextField,
+    ExpandablePanel,
+    SettingsIcon,
+    TextField,
+    Typography,
+    UploadCloudIcon
+} from "@rebasepro/ui";
 
 export function MarkdownPropertyField({
     disabled,
@@ -34,15 +41,15 @@ export function MarkdownPropertyField({
     const htmlPath = `${baseMarkdownPath}.html`;
     const transformPastedTextPath = `${baseMarkdownPath}.transformPastedText`;
 
-    const fileNameValue = getIn(values, fileName) ?? "{rand}_{file}";
-    const storagePathValue = getIn(values, storagePath) ?? "/";
+    const fileNameValue = (getIn(values, fileName) as string | undefined) ?? "{rand}_{file}";
+    const storagePathValue = (getIn(values, storagePath) as string | undefined) ?? "/";
     const maxSizeValue = getIn(values, maxSize);
 
     // Markdown config values - check if markdown is an object or boolean
     const markdownValue = getIn(values, "markdown");
     const isMarkdownObject = typeof markdownValue === "object" && markdownValue !== null;
-    const htmlValue = isMarkdownObject ? (markdownValue.html ?? true) : true;
-    const transformPastedTextValue = isMarkdownObject ? (markdownValue.transformPastedText ?? false) : false;
+    const htmlValue = isMarkdownObject ? (((markdownValue as Record<string, unknown>).html as boolean | undefined) ?? true) : true;
+    const transformPastedTextValue = isMarkdownObject ? (((markdownValue as Record<string, unknown>).transformPastedText as boolean | undefined) ?? false) : false;
 
     const hasFilenameCallback = typeof fileNameValue === "function";
     const hasStoragePathCallback = typeof storagePathValue === "function";
@@ -202,7 +209,7 @@ export function MarkdownPropertyField({
                         setFieldValue("defaultValue", e.target.value === "" ? undefined : e.target.value);
                     }}
                     label={t("default_value")}
-                    value={getIn(values, "defaultValue") ?? ""}/>
+                    value={(getIn(values, "defaultValue") as string | undefined) ?? ""}/>
 
             </div>
         </>

package/src/collection_editor/ui/collection_editor/properties/NumberPropertyField.tsx

@@ -4,8 +4,8 @@ import { NumberPropertyValidation } from "./validation/NumberPropertyValidation"
 import { ValidationPanel } from "./validation/ValidationPanel";
 ;
 import { Select, SelectItem, TextField } from "@rebasepro/ui";
-import { getIn, useFormex } from "@rebasepro/formex";
-import { useTranslation } from "@rebasepro/core";
+import { getIn, useFormex } from "@rebasepro/forms";
+import { useTranslation } from "@rebasepro/app";
 
 export function NumberPropertyField({ disabled }: {
     disabled: boolean;
@@ -15,12 +15,12 @@ export function NumberPropertyField({ disabled }: {
     const { t } = useTranslation();
 
     const columnTypePath = "columnType";
-    const columnTypeValue: string | undefined = getIn(values, columnTypePath);
-    const columnTypeError: string | undefined = getIn(touched, columnTypePath) && getIn(errors, columnTypePath);
+    const columnTypeValue: string | undefined = getIn(values, columnTypePath) as string | undefined;
+    const columnTypeError: string | undefined = (getIn(touched, columnTypePath) && getIn(errors, columnTypePath)) as string | undefined;
 
     const isIdPath = "isId";
-    const isIdValue: string | boolean | undefined = getIn(values, isIdPath);
-    const isIdError: string | undefined = getIn(touched, isIdPath) && getIn(errors, isIdPath);
+    const isIdValue: string | boolean | undefined = getIn(values, isIdPath) as string | boolean | undefined;
+    const isIdError: string | undefined = (getIn(touched, isIdPath) && getIn(errors, isIdPath)) as string | undefined;
 
     return (
         <>
@@ -109,7 +109,7 @@ export function NumberPropertyField({ disabled }: {
                         setFieldValue("defaultValue", e.target.value === "" ? undefined : parseFloat(e.target.value));
                     }}
                     label={t("default_value")}
-                    value={getIn(values, "defaultValue") ?? ""}/>
+                    value={(getIn(values, "defaultValue") as string | number | undefined) ?? ""}/>
 
             </div>
         </>

package/src/collection_editor/ui/collection_editor/properties/ReferencePropertyField.tsx

@@ -1,10 +1,10 @@
-import { IconForView, useTranslation } from "@rebasepro/core";
+import { IconForView, useTranslation } from "@rebasepro/app";
 import { FieldCaption, useCollectionRegistryController } from "../../../_cms_internals";
 import React from "react";
-import { Field, getIn, useFormex } from "@rebasepro/formex";
+import { Field, getIn, useFormex } from "@rebasepro/forms";
 ;
 import { NumberProperty, StringProperty } from "@rebasepro/types";
-import { CircularProgress, Select, SelectGroup, SelectItem, Typography } from "@rebasepro/ui";
+import { CircularProgress, Select, SelectItem, Typography } from "@rebasepro/ui";
 
 export function ReferencePropertyField({
     existing,
@@ -34,8 +34,8 @@ export function ReferencePropertyField({
         </div>;
 
     const pathPath = asString ? "reference.slug" : (multiple ? "of.slug" : "path");
-    const pathValue: string | undefined = getIn(values, pathPath);
-    const pathError: string | undefined = showErrors && getIn(errors, pathPath);
+    const pathValue: string | undefined = getIn(values, pathPath) as string | undefined;
+    const pathError: string | undefined = (showErrors && getIn(errors, pathPath)) as string | undefined;
 
     return (
         <>
@@ -81,12 +81,6 @@ export function CollectionsSelect({
 
     const collections = collectionRegistry.collections ?? [];
 
-    const groups: string[] = Array.from(new Set(
-        Object.values(collections).map(e => e.group).filter(Boolean) as string[]
-    ).values());
-
-    const ungroupedCollections = collections.filter((col) => !col.group);
-
     return (
         <>
             <Select
@@ -113,48 +107,20 @@ export function CollectionsSelect({
                 }}
                 {...props}>
 
-                {groups.flatMap((group) => (
-                    <SelectGroup label={group || "Views"}
-                        key={`group_${group}`}>
-                        {
-                            collections.filter(collection => collection.group === group)
-                                .map((collection) => {
-                                    return <SelectItem
-                                        key={`${collection.slug}-${group}`}
-                                        value={collection.slug}>
-                                        <div className="flex flex-row">
-                                            <IconForView collectionOrView={collection}/>
-                                            <Typography
-                                                variant={"subtitle2"}
-                                                className="ml-4">
-                                                {collection?.name.toUpperCase()}
-                                            </Typography>
-                                        </div>
-                                    </SelectItem>;
-                                })
-
-                        }
-                    </SelectGroup>
-                ))}
-
-                {ungroupedCollections && <SelectGroup label={"Views"}>
-                    {ungroupedCollections
-                        .map((collection) => {
-                            return <SelectItem key={collection.slug}
-                                value={collection.slug}>
-                                <div className="flex flex-row">
-                                    <IconForView collectionOrView={collection}/>
-                                    <Typography
-                                        variant={"subtitle2"}
-                                        className="ml-4">
-                                        {collection?.name.toUpperCase()}
-                                    </Typography>
-                                </div>
-                            </SelectItem>;
-                        })
-
-                    }
-                </SelectGroup>}
+                {collections.map((collection) => {
+                    return <SelectItem
+                        key={collection.slug}
+                        value={collection.slug}>
+                        <div className="flex flex-row">
+                            <IconForView collectionOrView={collection}/>
+                            <Typography
+                                variant={"subtitle2"}
+                                className="ml-4">
+                                {collection?.name.toUpperCase()}
+                            </Typography>
+                        </div>
+                    </SelectItem>;
+                })}
 
             </Select>
 

package/src/collection_editor/ui/collection_editor/properties/RelationPropertyField.tsx

@@ -1,6 +1,6 @@
 import { FieldCaption, useCollectionRegistryController } from "../../../_cms_internals";
 import React, { useCallback, useEffect } from "react";
-import { useFormex } from "@rebasepro/formex";
+import { useFormex } from "@rebasepro/forms";
 ;
 import {
     Select,
@@ -8,22 +8,31 @@ import {
     TextField,
     Typography
 } from "@rebasepro/ui";
-import { EntityCollection, OnAction, RelationProperty } from "@rebasepro/types";
+import { CollectionConfig, OnAction, RelationProperty } from "@rebasepro/types";
 
 import { CollectionsSelect } from "./ReferencePropertyField";
 
 const ON_ACTION_OPTIONS: OnAction[] = ["cascade", "restrict", "no action", "set null", "set default"];
 
+function getTargetSlug(target?: string | (() => string | { slug: string } | Record<string, unknown>)): string {
+    if (!target) return "";
+    if (typeof target === "string") return target;
+    try {
+        const resolved = target();
+        if (typeof resolved === "string") return resolved;
+        if (resolved && typeof resolved === "object" && "slug" in resolved && typeof resolved.slug === "string") {
+            return resolved.slug;
+        }
+        return "";
+    } catch {
+        return "";
+    }
+}
+
 /**
  * Property editor form for `type: "relation"` properties.
  *
- * This component edits both:
- *  1. The `RelationProperty` fields on the property itself (relationName, etc.)
- *  2. The matching `Relation` entry in `collection.relations[]`
- *
- * When a user configures a relation property, we sync the relation config
- * back to the parent collection's `relations` array so saving the collection
- * persists everything in one go.
+ * This component edits the `RelationProperty` fields on the property itself (target, relationName, etc.)
  */
 export function RelationPropertyField({
     disabled,
@@ -36,37 +45,22 @@ export function RelationPropertyField({
         values,
         errors,
         setFieldValue
-    } = useFormex<RelationProperty & { id?: string; _relationConfig?: Record<string, unknown> }>();
+    } = useFormex<RelationProperty & { id?: string }>();
 
     const collectionRegistry = useCollectionRegistryController();
 
-    // ─── Read the parent collection form to sync `relations[]` ───
-    // The PropertyForm is nested inside a parent Formex for the whole collection.
-    // We reach it via a second useFormex keyed to the parent context.
-    // However, the PropertyForm uses its own isolated Formex, so we can't
-    // directly access the parent. Instead, we store the relation config
-    // on the property itself and let the save logic merge it.
-    //
-    // We store the full relation config on a transient `_relationConfig` key
-    // so the consumer (CollectionPropertiesEditorForm / save logic) can
-    // extract it and place it in `collection.relations[]`.
-
     const relationName = values.relationName ?? "";
-    // Transient config object stored on the property for editor use.
-    // Contains standard Relation fields plus `_targetSlug` for the UI dropdown.
-    const relationConfig: Record<string, unknown> = (values._relationConfig as Record<string, unknown>) ?? {};
-
-    const targetSlug = (relationConfig._targetSlug as string) ?? "";
-    const cardinality = (relationConfig.cardinality as string) ?? "one";
-    const direction = (relationConfig.direction as string) ?? "owning";
-    const localKey = (relationConfig.localKey as string) ?? "";
-    const foreignKeyOnTarget = (relationConfig.foreignKeyOnTarget as string) ?? "";
-    const through = relationConfig.through as Record<string, string> | undefined;
+    const targetSlug = getTargetSlug(values.target);
+    const cardinality = values.cardinality ?? "one";
+    const direction = values.direction ?? "owning";
+    const localKey = values.localKey ?? "";
+    const foreignKeyOnTarget = values.foreignKeyOnTarget ?? "";
+    const through = values.through;
     const throughTable = through?.table ?? "";
     const throughSourceColumn = through?.sourceColumn ?? "";
     const throughTargetColumn = through?.targetColumn ?? "";
-    const onUpdate = (relationConfig.onUpdate as string) ?? "no action";
-    const onDelete = (relationConfig.onDelete as string) ?? "no action";
+    const onUpdate = values.onUpdate ?? "no action";
+    const onDelete = values.onDelete ?? "no action";
 
     // Whether to show the junction table section
     const showThrough = cardinality === "many" && direction === "owning";
@@ -75,26 +69,15 @@ export function RelationPropertyField({
     // Whether to show the foreign key on target field
     const showForeignKey = direction === "inverse";
 
-    const updateRelationConfig = useCallback(
-        (patch: Record<string, unknown>) => {
-            const current = (values._relationConfig as Record<string, unknown>) ?? {};
-            setFieldValue("_relationConfig" as keyof (RelationProperty & { _relationConfig?: unknown }), { ...current,
-...patch });
-        },
-        [values, setFieldValue]
-    );
-
     const updateThrough = useCallback(
         (patch: Record<string, unknown>) => {
-            const current = (values._relationConfig as Record<string, unknown>) ?? {};
-            const currentThrough = (current.through as Record<string, unknown>) ?? {};
-            setFieldValue("_relationConfig" as keyof (RelationProperty & { _relationConfig?: unknown }), {
-                ...current,
-                through: { ...currentThrough,
-...patch }
-            });
+            const currentThrough = values.through ?? { table: "",
+sourceColumn: "",
+targetColumn: "" };
+            setFieldValue("through", { ...currentThrough,
+...patch });
         },
-        [values, setFieldValue]
+        [values.through, setFieldValue]
     );
 
     // Auto-generate relationName from target collection slug
@@ -102,9 +85,9 @@ export function RelationPropertyField({
         if (targetSlug && !relationName) {
             setFieldValue("relationName", targetSlug);
         }
-    }, [targetSlug]);
+    }, [targetSlug, relationName, setFieldValue]);
 
-    const collections: EntityCollection[] = collectionRegistry?.collections ?? [];
+    const collections: CollectionConfig[] = collectionRegistry?.collections ?? [];
 
     return (
         <>
@@ -112,10 +95,10 @@ export function RelationPropertyField({
             <div className={"col-span-12"}>
                 <CollectionsSelect
                     disabled={disabled}
-                    pathPath={"_relationConfig._targetSlug"}
+                    pathPath={"target"}
                     value={targetSlug}
                     setFieldValue={(_, value) => {
-                        updateRelationConfig({ _targetSlug: value });
+                        setFieldValue("target", value);
                         // Auto-generate relation name from target
                         if (!relationName || relationName === targetSlug) {
                             setFieldValue("relationName", value);
@@ -152,7 +135,7 @@ export function RelationPropertyField({
             <div className={"col-span-12 sm:col-span-6"}>
                 <Select
                     value={cardinality}
-                    onValueChange={(v) => updateRelationConfig({ cardinality: v })}
+                    onValueChange={(v) => setFieldValue("cardinality", v as "one" | "many")}
                     label={"Cardinality"}
                     disabled={disabled}
                     fullWidth
@@ -184,7 +167,7 @@ export function RelationPropertyField({
             <div className={"col-span-12 sm:col-span-6"}>
                 <Select
                     value={direction}
-                    onValueChange={(v) => updateRelationConfig({ direction: v })}
+                    onValueChange={(v) => setFieldValue("direction", v as "owning" | "inverse")}
                     label={"Direction"}
                     disabled={disabled}
                     fullWidth
@@ -218,7 +201,7 @@ export function RelationPropertyField({
                     <TextField
                         value={localKey}
                         onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
-                            updateRelationConfig({ localKey: e.target.value })
+                            setFieldValue("localKey", e.target.value)
                         }
                         label={"Local key (foreign key column on this table)"}
                         disabled={disabled}
@@ -236,7 +219,7 @@ export function RelationPropertyField({
                     <TextField
                         value={foreignKeyOnTarget}
                         onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
-                            updateRelationConfig({ foreignKeyOnTarget: e.target.value })
+                            setFieldValue("foreignKeyOnTarget", e.target.value)
                         }
                         label={"Foreign key on target table"}
                         disabled={disabled}
@@ -305,7 +288,7 @@ export function RelationPropertyField({
             <div className={"col-span-12 sm:col-span-6"}>
                 <Select
                     value={onUpdate}
-                    onValueChange={(v) => updateRelationConfig({ onUpdate: v })}
+                    onValueChange={(v) => setFieldValue("onUpdate", v as OnAction)}
                     label={"On update"}
                     disabled={disabled}
                     fullWidth
@@ -325,7 +308,7 @@ export function RelationPropertyField({
             <div className={"col-span-12 sm:col-span-6"}>
                 <Select
                     value={onDelete}
-                    onValueChange={(v) => updateRelationConfig({ onDelete: v })}
+                    onValueChange={(v) => setFieldValue("onDelete", v as OnAction)}
                     label={"On delete"}
                     disabled={disabled}
                     fullWidth

package/src/collection_editor/ui/collection_editor/properties/RepeatPropertyField.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { getFieldConfig } from "../../../../components/field_configs";
 import { ArrayProperty, Property, PropertyConfig } from "@rebasepro/types";
 import { Button, Paper, Typography } from "@rebasepro/ui";
-import { Field, getIn, useFormex } from "@rebasepro/formex";
+import { Field, getIn, useFormex } from "@rebasepro/forms";
 import { PropertyFormDialog } from "../PropertyEditView";
 import { PropertyFieldPreview } from "../PropertyFieldPreview";
 import { ArrayPropertyValidation } from "./validation/ArrayPropertyValidation";
@@ -33,8 +33,8 @@ export function RepeatPropertyField({
     } = useFormex<ArrayProperty>();
 
     const [propertyDialogOpen, setPropertyDialogOpen] = useState(false);
-    const ofProperty = getIn(values, "of");
-    const ofPropertyError = getIn(touched, "of") && getIn(errors, "of");
+    const ofProperty = getIn(values, "of") as Property | undefined;
+    const ofPropertyError = (getIn(touched, "of") && getIn(errors, "of")) as string | undefined;
 
     const onPropertyChanged = ({ id, property, namespace }:
         { id?: string, property: Property, namespace?: string }) => {

package/src/collection_editor/ui/collection_editor/properties/StoragePropertyField.tsx

@@ -1,10 +1,20 @@
 
 import React from "react";
-import { Button, DebouncedTextField, ExpandablePanel, MultiSelect, MultiSelectItem, Select, SelectItem, Typography } from "@rebasepro/ui";
-import { UploadCloudIcon } from "lucide-react";
-
-import { Field, FormexFieldProps, getIn, useFormex } from "@rebasepro/formex";
-import { useTranslation } from "@rebasepro/core";
+import {
+    Button,
+    DebouncedTextField,
+    ExpandablePanel,
+    MultiSelect,
+    MultiSelectItem,
+    Select,
+    SelectItem,
+    Typography,
+    UploadCloudIcon
+} from "@rebasepro/ui";
+
+import { Field, FormexFieldProps, getIn, useFormex } from "@rebasepro/forms";
+import { useStorageSources, useTranslation } from "@rebasepro/app";
+import { DEFAULT_STORAGE_SOURCE_KEY } from "@rebasepro/types";
 import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
 import { ArrayPropertyValidation } from "./validation/ArrayPropertyValidation";
 import { ValidationPanel } from "./validation/ValidationPanel";
@@ -33,9 +43,11 @@ export function StoragePropertyField({
         setFieldValue
     } = useFormex();
     const { t } = useTranslation();
+    const storageSources = useStorageSources();
 
     const baseStoragePath = multiple ? "of.storage" : "storage";
     const acceptedFiles = `${baseStoragePath}.acceptedFiles`;
+    const storageSource = `${baseStoragePath}.storageSource`;
 
     const metadata = `${baseStoragePath}.metadata`;
     const fileName = `${baseStoragePath}.fileName`;
@@ -52,21 +64,26 @@ export function StoragePropertyField({
     const imageResizeFormat = `${imageResize}.format`;
     const imageResizeQuality = `${imageResize}.quality`;
 
-    const fileNameValue = getIn(values, fileName) ?? "{rand}_{file}";
-    const storagePathValue = getIn(values, storagePath) ?? "/";
-    const maxSizeValue = getIn(values, maxSize);
+    const fileNameValue = (getIn(values, fileName) as string | undefined) ?? "{rand}_{file}";
+    const storagePathValue = (getIn(values, storagePath) as string | undefined) ?? "/";
+    const maxSizeValue = getIn(values, maxSize) as number | undefined;
 
     // Image resize values
-    const imageResizeMaxWidthValue = getIn(values, imageResizeMaxWidth);
-    const imageResizeMaxHeightValue = getIn(values, imageResizeMaxHeight);
-    const imageResizeModeValue = getIn(values, imageResizeMode) ?? "cover";
-    const imageResizeFormatValue = getIn(values, imageResizeFormat) ?? "original";
-    const imageResizeQualityValue = getIn(values, imageResizeQuality);
+    const imageResizeMaxWidthValue = getIn(values, imageResizeMaxWidth) as number | undefined;
+    const imageResizeMaxHeightValue = getIn(values, imageResizeMaxHeight) as number | undefined;
+    const imageResizeModeValue = (getIn(values, imageResizeMode) as string | undefined) ?? "cover";
+    const imageResizeFormatValue = (getIn(values, imageResizeFormat) as string | undefined) ?? "original";
+    const imageResizeQualityValue = getIn(values, imageResizeQuality) as number | undefined;
 
     const storedValue = getIn(values, acceptedFiles);
     const fileTypesValue: string[] | undefined = Array.isArray(storedValue) ? storedValue : undefined;
     const allFileTypesSelected = !fileTypesValue || fileTypesValue.length === 0;
 
+    // Available storage backends (from `<Rebase storageSources={...}>`).
+    const sourceKeys = Object.keys(storageSources.sources)
+        .filter((key) => key !== DEFAULT_STORAGE_SOURCE_KEY);
+    const storageSourceValue = (getIn(values, storageSource) as string | undefined) ?? DEFAULT_STORAGE_SOURCE_KEY;
+
     const handleTypesChange = (value: string[]) => {
         if (!value) setFieldValue(acceptedFiles, undefined);
         else setFieldValue(acceptedFiles, value);
@@ -93,6 +110,32 @@ export function StoragePropertyField({
 
                     <div className={"grid grid-cols-12 gap-2 p-4"}>
 
+                        {sourceKeys.length > 0 && (
+                            <div className={"col-span-12"}>
+                                <Select
+                                    className={"w-full"}
+                                    disabled={disabled}
+                                    name={storageSource}
+                                    value={storageSourceValue}
+                                    onValueChange={(value) =>
+                                        setFieldValue(storageSource, !value || value === DEFAULT_STORAGE_SOURCE_KEY ? undefined : value)}
+                                    label={"Storage backend"}
+                                    renderValue={(key) => {
+                                        const label = storageSources.registry[key]?.label;
+                                        return label ?? (key === DEFAULT_STORAGE_SOURCE_KEY ? "Default" : key);
+                                    }}>
+                                    <SelectItem value={DEFAULT_STORAGE_SOURCE_KEY}>
+                                        Default
+                                    </SelectItem>
+                                    {sourceKeys.map((key) => (
+                                        <SelectItem key={key} value={key}>
+                                            {storageSources.registry[key]?.label ?? key}
+                                        </SelectItem>
+                                    ))}
+                                </Select>
+                            </div>
+                        )}
+
                         <div className={"col-span-12"}>
 
                             <MultiSelect