@rebasepro/admin 0.1.2 → 0.2.3

package/src/collection_editor/ui/collection_editor/DisplaySettingsForm.tsx

@@ -5,8 +5,18 @@ import { useAuthController, useCustomizationController } from "@rebasepro/core";
 import { getFieldConfig } from "../../../components/field_configs";
 import { PropertyConfigBadge } from "../../../components/PropertyConfigBadge";
 import { EntityCollection, Property } from "@rebasepro/types";
-import { BooleanSwitchWithLabel, Container, IconButton, Select, SelectItem, TextField, Typography, Button , iconSize } from "@rebasepro/ui";
-import { XIcon } from "lucide-react";
+import {
+    BooleanSwitchWithLabel,
+    Button,
+    Container,
+    IconButton,
+    iconSize,
+    Select,
+    SelectItem,
+    TextField,
+    Typography,
+    XIcon
+} from "@rebasepro/ui";
 
 import { useFormex } from "@rebasepro/formex";
 import { LayoutModeSwitch } from "./LayoutModeSwitch";

package/src/collection_editor/ui/collection_editor/EntityActionsEditTab.tsx

@@ -7,8 +7,22 @@ import {
 import { resolveEntityAction } from "../../_cms_internals";
 import { type EntityCollection } from "@rebasepro/types";
 import { EntityAction } from "@rebasepro/types";
-import { Alert, Button, Container, IconButton, Paper, Table, TableBody, TableCell, TableRow, Tooltip, Typography , iconSize } from "@rebasepro/ui";
-import { PlusIcon, Trash2Icon } from "lucide-react";
+import {
+    Alert,
+    Button,
+    Container,
+    IconButton,
+    iconSize,
+    Paper,
+    PlusIcon,
+    Table,
+    TableBody,
+    TableCell,
+    TableRow,
+    Tooltip,
+    Trash2Icon,
+    Typography
+} from "@rebasepro/ui";
 import { useFormex } from "@rebasepro/formex";
 import { EntityActionsSelectDialog } from "./EntityActionsSelectDialog";
 
@@ -137,7 +151,6 @@ export function EntityActionsEditTab({
                 open={addEntityActionDialogOpen}
                 onClose={(selectedActionKey) => {
                     if (selectedActionKey) {
-                        console.log("Selected action key:", selectedActionKey);
                         const value = [...(values.entityActions ?? []), selectedActionKey]
                             // only actions that are defined in the registry
                             .filter((e: string | EntityAction<any>): e is string => typeof e === "string" && (contextEntityActions ?? []).some(action => action.key === e));

package/src/collection_editor/ui/collection_editor/EnumForm.tsx

@@ -6,8 +6,23 @@ import { deepEqual as equal } from "fast-equals"
 ;
 import { EnumValueConfig, EnumValues } from "@rebasepro/types";
 import { ArrayContainer, ArrayEntryParams } from "../../_cms_internals";
-import { Badge, Button, CircularProgress, DebouncedTextField, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Paper, Typography , iconSize } from "@rebasepro/ui";
-import { RefreshCcwIcon, ListIcon, SettingsIcon } from "lucide-react";
+import {
+    Badge,
+    Button,
+    CircularProgress,
+    DebouncedTextField,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    iconSize,
+    ListIcon,
+    Paper,
+    RefreshCcwIcon,
+    SettingsIcon,
+    Typography
+} from "@rebasepro/ui";
 import { extractEnumFromValues } from "@rebasepro/schema-inference";
 import { Field, Formex, getIn, useCreateFormex, useFormex } from "@rebasepro/formex";
 

package/src/collection_editor/ui/collection_editor/GeneralSettingsForm.tsx

@@ -5,8 +5,24 @@ import React, { useState } from "react";
 import { useAuthController, useCustomizationController } from "@rebasepro/core";
 import { SearchIconsView } from "../../_cms_internals";
 import type { EntityCollection, PostgresCollection } from "@rebasepro/types";
-import { BooleanSwitchWithLabel, Chip, cls, Container, DebouncedTextField, Dialog, ExpandablePanel, IconButton, Select, SelectItem, TextField, Tooltip, Typography , iconSize } from "@rebasepro/ui";
-import { HistoryIcon, SearchIcon } from "lucide-react";
+import {
+    BooleanSwitchWithLabel,
+    Chip,
+    cls,
+    Container,
+    DebouncedTextField,
+    Dialog,
+    ExpandablePanel,
+    HistoryIcon,
+    IconButton,
+    iconSize,
+    SearchIcon,
+    Select,
+    SelectItem,
+    TextField,
+    Tooltip,
+    Typography
+} from "@rebasepro/ui";
 import { Field, getIn, useFormex } from "@rebasepro/formex";
 import { useCollectionsConfigController } from "../../useCollectionsConfigController";
 import { singular, toSnakeCase } from "@rebasepro/utils";

package/src/collection_editor/ui/collection_editor/GetCodeDialog.tsx

@@ -1,7 +1,6 @@
 import { useSnackbarController } from "@rebasepro/core";
 import { EntityCollection } from "@rebasepro/types";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
-import { CopyIcon } from "lucide-react";
+import { Button, CopyIcon, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
 import React from "react";
 import JSON5 from "json5";
 import { Highlight, themes } from "prism-react-renderer"

package/src/collection_editor/ui/collection_editor/KanbanConfigSection.tsx

@@ -5,8 +5,7 @@ import { useAuthController, useCustomizationController } from "@rebasepro/core";
 import { EntityCollection, Property } from "@rebasepro/types";
 import { PropertyConfigBadge } from "../../../components/PropertyConfigBadge";
 import { getFieldConfig } from "../../../components/field_configs";
-import { IconButton, Select, SelectItem, Typography, Button , iconSize } from "@rebasepro/ui";
-import { XIcon } from "lucide-react";
+import { Button, IconButton, iconSize, Select, SelectItem, Typography, XIcon } from "@rebasepro/ui";
 import { useFormex } from "@rebasepro/formex";
 import { PropertyFormDialog } from "./PropertyEditView";
 import { unslugify } from "@rebasepro/utils";

package/src/collection_editor/ui/collection_editor/LayoutModeSwitch.tsx

@@ -1,13 +1,20 @@
-import { cls, ToggleButtonGroup, Typography } from "@rebasepro/ui";
-import { ColumnsIcon, PanelLeftIcon, SquareIcon } from "lucide-react";
+import {
+    AppWindow,
+    cls,
+    ColumnsIcon,
+    PanelLeftIcon,
+    SquareIcon,
+    ToggleButtonGroup,
+    Typography
+} from "@rebasepro/ui";
 
 export function LayoutModeSwitch({
     value,
     onChange,
     className
 }: {
-    value: "side_panel" | "full_screen" | "split";
-    onChange: (value: "side_panel" | "full_screen" | "split") => void;
+    value: "side_panel" | "full_screen" | "split" | "dialog";
+    onChange: (value: "side_panel" | "full_screen" | "split" | "dialog") => void;
     className?: string;
 }) {
 
@@ -32,10 +39,15 @@ export function LayoutModeSwitch({
                         value: "split",
                         label: "Split view",
                         icon: <PanelLeftIcon/>
+                    },
+                    {
+                        value: "dialog",
+                        label: "Centered dialog",
+                        icon: <AppWindow/>
                     }
                 ]}
             />
         </div>
-        <Typography variant={"caption"} color={"secondary"} className={"ml-3.5"}>Should documents be opened full screen or in an inline side dialog</Typography>
+        <Typography variant={"caption"} color={"secondary"} className={"ml-3.5"}>Should documents be opened full screen, inline side dialog, or centered dialog</Typography>
     </div>
 }

package/src/collection_editor/ui/collection_editor/PropertyEditView.tsx

@@ -8,8 +8,25 @@ import { DEFAULT_FIELD_CONFIGS, getFieldConfig, getFieldId } from "../../../comp
 import { PropertyConfigBadge } from "../../../components/PropertyConfigBadge";
 import { Property, PropertyConfig, PropertyConfigId } from "@rebasepro/types";
 import { isPropertyBuilder } from "@rebasepro/common";
-import { Button, Card, cls, Dialog, DialogActions, DialogContent, DialogTitle, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin, IconButton, InfoLabel, Tooltip, Typography , iconSize } from "@rebasepro/ui";
-import { Trash2Icon, AlertTriangleIcon } from "lucide-react";
+import {
+    AlertTriangleIcon,
+    Button,
+    Card,
+    cls,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    fieldBackgroundDisabledMixin,
+    fieldBackgroundHoverMixin,
+    fieldBackgroundMixin,
+    IconButton,
+    iconSize,
+    InfoLabel,
+    Tooltip,
+    Trash2Icon,
+    Typography
+} from "@rebasepro/ui";
 import { EnumPropertyField } from "./properties/EnumPropertyField";
 import { StoragePropertyField } from "./properties/StoragePropertyField";
 import { MapPropertyField } from "./properties/MapPropertyField";
@@ -22,6 +39,7 @@ import { NumberPropertyField } from "./properties/NumberPropertyField";
 import { ReferencePropertyField } from "./properties/ReferencePropertyField";
 import { DateTimePropertyField } from "./properties/DateTimePropertyField";
 import { AdvancedPropertyValidation } from "./properties/advanced/AdvancedPropertyValidation";
+import { VectorPropertyField } from "./properties/VectorPropertyField";
 
 import { KeyValuePropertyField } from "./properties/KeyValuePropertyField";
 import { RelationPropertyField } from "./properties/RelationPropertyField";
@@ -169,6 +187,9 @@ export const PropertyForm = React.memo(
                 if (values.type === "reference" && !values.path) {
                     errors.slug = "You must specify a target collection for the field";
                 }
+                if (values.type === "vector" && (!values.dimensions || isNaN(Number(values.dimensions)) || Number(values.dimensions) <= 0)) {
+                    errors.dimensions = "Vector dimensions must be a positive number";
+                }
                 if (values.propertyConfig === "repeat") {
                     if (!("of" in values) || !values.of) {
                         errors.of = "You need to specify a repeat field";
@@ -463,6 +484,10 @@ function PropertyEditFormFields({
             <RelationPropertyField
                 showErrors={showErrors}
                 disabled={disabled}/>;
+    } else if (selectedFieldConfigId === "vector_input") {
+        childComponent =
+            <VectorPropertyField
+                disabled={disabled}/>;
     } else {
         childComponent = null;
     }
@@ -477,7 +502,7 @@ function PropertyEditFormFields({
                 </Typography>
             </InfoLabel>}
 
-            <div className="flex mt-2 justify-between">
+            <div className="flex mt-2 items-start justify-between">
                 <div className={"w-full flex flex-col gap-2"}>
                     <WidgetSelectView
                         initialProperty={values}
@@ -509,10 +534,10 @@ function PropertyEditFormFields({
                 {onDelete && values?.id &&
                     <IconButton
                         variant={"ghost"}
-                        className="m-4"
+                        className="mt-1 shrink-0"
                         disabled={disabled}
                         onClick={() => setDeleteDialogOpen(true)}>
-                        <Trash2Icon/>
+                        <Trash2Icon size={iconSize.small}/>
                     </IconButton>}
             </div>
 
@@ -596,7 +621,8 @@ const WIDGET_TYPE_MAP: Record<PropertyConfigId, string> = {
     key_value: "Group",
     repeat: "Array",
     custom_array: "Array",
-    block: "Group"
+    block: "Group",
+    vector_input: "Number"
 };
 
 function WidgetSelectView({

package/src/collection_editor/ui/collection_editor/PropertyFieldPreview.tsx

@@ -5,8 +5,7 @@ import { ErrorBoundary } from "@rebasepro/ui";
 import { Property } from "@rebasepro/types";
 import { isPropertyBuilder } from "@rebasepro/common";
 import { cls, Paper, Typography } from "@rebasepro/ui";
-import { MinusCircleIcon, FunctionSquareIcon } from "lucide-react";
-import { iconSize } from "@rebasepro/ui";
+import { FunctionSquareIcon, iconSize, MinusCircleIcon } from "@rebasepro/ui";
 
 
 export function PropertyFieldPreview({
@@ -39,10 +38,11 @@ export function PropertyFieldPreview({
         <div onClick={onClick} className={onClick ? "cursor-pointer" : ""}>
         <Paper
             className={cls(
-                "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border bg-white dark:bg-surface-800 border-surface-200 dark:border-surface-700 shadow-xs",
+                "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border bg-white dark:bg-surface-800 shadow-xs",
+                borderColorClass || "border-surface-200 dark:border-surface-700",
                 selected
-                    ? "bg-primary/5 dark:bg-primary/10 ring-1 ring-inset ring-primary border-primary/30"
-                    : "hover:bg-surface-50 dark:hover:bg-surface-750"
+                    ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light ring-1 ring-inset ring-primary border-primary/30"
+                    : "hover:bg-surface-50 dark:hover:bg-surface-700"
             )}
         >
             <PropertyConfigBadge propertyConfig={propertyConfig} size="small"/>
@@ -107,8 +107,8 @@ export function NonEditablePropertyPreview({
             className={cls(
                 "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border bg-white dark:bg-surface-800 border-surface-200 dark:border-surface-700 shadow-xs",
                 selected
-                    ? "bg-primary/5 dark:bg-primary/10 ring-1 ring-inset ring-primary border-primary/30"
-                    : "hover:bg-surface-50 dark:hover:bg-surface-750"
+                    ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light ring-1 ring-inset ring-primary border-primary/30"
+                    : "hover:bg-surface-50 dark:hover:bg-surface-700"
             )}
         >
             <div className={"relative shrink-0"}>

package/src/collection_editor/ui/collection_editor/PropertyTree.tsx

@@ -5,8 +5,20 @@ import { deepEqual as equal } from "fast-equals"
 import { AIModifiedIndicator } from "@rebasepro/core";
 import { AdditionalFieldDelegate, Properties, Property } from "@rebasepro/types";
 import { isPropertyBuilder } from "@rebasepro/common";
-import { defaultBorderMixin, cls, IconButton, Menu, MenuItem, Tooltip , iconSize } from "@rebasepro/ui";
-import { FileSearchIcon, ArrowDownToLineIcon, ArrowUpToLineIcon, Trash2Icon, MoreVerticalIcon } from "lucide-react";
+import {
+    ArrowDownToLineIcon,
+    ArrowUpToLineIcon,
+    cls,
+    defaultBorderMixin,
+    FileSearchIcon,
+    IconButton,
+    iconSize,
+    Menu,
+    MenuItem,
+    MoreVerticalIcon,
+    Tooltip,
+    Trash2Icon
+} from "@rebasepro/ui";
 import { NonEditablePropertyPreview, PropertyFieldPreview } from "./PropertyFieldPreview";
 import {
     closestCenter,

package/src/collection_editor/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -7,8 +7,22 @@ import {
 import { resolveEntityView } from "../../_cms_internals";
 import { EntityCollection, EntityCustomView, User } from "@rebasepro/types";
 import { getSubcollections } from "@rebasepro/common";
-import { Alert, Button, Container, IconButton, Paper, Table, TableBody, TableCell, TableRow, Tooltip, Typography , iconSize } from "@rebasepro/ui";
-import { PlusIcon, Trash2Icon } from "lucide-react";
+import {
+    Alert,
+    Button,
+    Container,
+    IconButton,
+    iconSize,
+    Paper,
+    PlusIcon,
+    Table,
+    TableBody,
+    TableCell,
+    TableRow,
+    Tooltip,
+    Trash2Icon,
+    Typography
+} from "@rebasepro/ui";
 import { CollectionEditorDialog } from "./CollectionEditorDialog";
 import { CollectionsConfigController } from "../../types/config_controller";
 import { CollectionInference } from "../../types/collection_inference";

package/src/collection_editor/ui/collection_editor/ViewModeSwitch.tsx

@@ -1,6 +1,13 @@
 import { ViewMode } from "@rebasepro/types";
-import { cls, ToggleButtonGroup, Typography } from "@rebasepro/ui";
-import { KanbanIcon, LayoutGridIcon, ListIcon, TableIcon } from "lucide-react";
+import {
+    cls,
+    KanbanIcon,
+    LayoutGridIcon,
+    ListIcon,
+    TableIcon,
+    ToggleButtonGroup,
+    Typography
+} from "@rebasepro/ui";
 
 export function ViewModeSwitch({
     value,

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

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
-import { Button, Paper, Typography } from "@rebasepro/ui";
-import { PlusIcon } from "lucide-react";
+import { Button, Paper, PlusIcon, Typography } from "@rebasepro/ui";
 import { getIn, useFormex } from "@rebasepro/formex";
 import { OnPropertyChangedParams, PropertyFormDialog } from "../PropertyEditView";
 import {

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

@@ -2,8 +2,7 @@ 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";

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

@@ -5,8 +5,15 @@ 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 {
+    BooleanSwitchWithLabel,
+    DebouncedTextField,
+    ExpandablePanel,
+    SettingsIcon,
+    TextField,
+    Typography,
+    UploadCloudIcon
+} from "@rebasepro/ui";
 
 export function MarkdownPropertyField({
     disabled,

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

@@ -14,16 +14,25 @@ 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,12 @@ 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,7 +82,7 @@ export function RelationPropertyField({
         if (targetSlug && !relationName) {
             setFieldValue("relationName", targetSlug);
         }
-    }, [targetSlug]);
+    }, [targetSlug, relationName, setFieldValue]);
 
     const collections: EntityCollection[] = collectionRegistry?.collections ?? [];
 
@@ -112,10 +92,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 +132,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 +164,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 +198,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 +216,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 +285,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 +305,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/StoragePropertyField.tsx

@@ -1,7 +1,16 @@
 
 import React from "react";
-import { Button, DebouncedTextField, ExpandablePanel, MultiSelect, MultiSelectItem, Select, SelectItem, Typography } from "@rebasepro/ui";
-import { UploadCloudIcon } from "lucide-react";
+import {
+    Button,
+    DebouncedTextField,
+    ExpandablePanel,
+    MultiSelect,
+    MultiSelectItem,
+    Select,
+    SelectItem,
+    Typography,
+    UploadCloudIcon
+} from "@rebasepro/ui";
 
 import { Field, FormexFieldProps, getIn, useFormex } from "@rebasepro/formex";
 import { useTranslation } from "@rebasepro/core";

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

@@ -0,0 +1,34 @@
+import { FieldCaption } from "../../../_cms_internals";
+import React from "react";
+import { TextField } from "@rebasepro/ui";
+import { getIn, useFormex } from "@rebasepro/formex";
+
+export function VectorPropertyField({ disabled }: {
+    disabled: boolean;
+}) {
+    const { values, setFieldValue, touched, errors } = useFormex();
+
+    const dimensionsPath = "dimensions";
+    const dimensionsValue = getIn(values, dimensionsPath);
+    const dimensionsError = getIn(touched, dimensionsPath) && getIn(errors, dimensionsPath);
+
+    return (
+        <div className={"col-span-12"}>
+            <TextField
+                name={dimensionsPath}
+                disabled={disabled}
+                type={"number"}
+                onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+                    const parsedVal = parseInt(e.target.value);
+                    setFieldValue(dimensionsPath, isNaN(parsedVal) ? undefined : parsedVal);
+                }}
+                label={"Vector Dimensions"}
+                value={dimensionsValue ?? ""}
+                error={Boolean(dimensionsError)}
+            />
+            <FieldCaption error={Boolean(dimensionsError)}>
+                {dimensionsError ?? "The dimension size of the vector embeddings (e.g., 1536 for OpenAI text-embedding-3-small)."}
+            </FieldCaption>
+        </div>
+    );
+}