@rebasepro/admin 0.1.0 → 0.2.1

package/src/form/field_bindings/RelationFieldBinding.tsx

@@ -15,21 +15,8 @@ import { RelationPreview } from "../../preview";
 import { RelationSelector } from "../../components/RelationSelector";
 import { MultipleRelationFieldBinding } from "./MultipleRelationFieldBinding";
 
-export function RelationFieldBinding({
-    propertyKey,
-    value,
-    size,
-    error,
-    showError,
-    disabled,
-    isSubmitting,
-    property,
-    includeDescription,
-    setValue,
-    setFieldValue,
-    context,
-    customProps
-}: FieldProps<RelationProperty>) {
+export function RelationFieldBinding(props: FieldProps<RelationProperty>) {
+    const { property, propertyKey, context } = props;
 
     if (property.type !== "relation") {
         throw Error("RelationFieldBinding expected a property containing a relation");
@@ -39,146 +26,162 @@ export function RelationFieldBinding({
     if (!collection || !capabilities?.supportsRelations || !("relations" in collection) || !collection.relations) {
         throw Error("RelationFieldBinding expected a collection with relations support");
     }
-    const resolvedProperty = resolveRelationProperty(property, collection.relations, propertyKey)
+    const resolvedProperty = resolveRelationProperty(property, collection.relations, propertyKey);
     const relation = resolvedProperty.relation;
 
     const manyRelation = relation?.cardinality === "many";
-
-    // Inline selector mode
     const widget = property.ui?.widget ?? "select";
 
     if (widget === "select" && relation) {
-        const normalizedSingle = (!manyRelation && value && !Array.isArray(value)) ? normalizeToEntityRelation(value) : null;
-        const singleValue = normalizedSingle ?? null;
-        const multipleValue = (manyRelation && Array.isArray(value)) ? value : [];
-
-        const selectorSize: "small" | "medium" | undefined = size === "large" ? "medium" : size;
-
-        return (
-            <div className="">
-                <LabelWithIconAndTooltip
-                    propertyKey={propertyKey}
-                    icon={getIconForProperty(property, "small")}
-                    required={property.validation?.required}
-                    title={property.name ?? propertyKey}
-                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
-
-                <RelationSelector
-                    relation={relation}
-                    value={manyRelation ? multipleValue : singleValue}
-                    onValueChange={(newVal) => {
-                        if (manyRelation) {
-                            setValue(Array.isArray(newVal) ? newVal : []);
-                        } else {
-                            setValue(!Array.isArray(newVal) ? (newVal ?? null) : null);
-                        }
-                    }}
-                    disabled={disabled || isSubmitting}
-                    fixedFilter={property.fixedFilter}
-                    size={selectorSize}
-                />
-
-                <FieldHelperText includeDescription={includeDescription}
-                    showError={showError}
-                    error={error}
-                    disabled={disabled}
-                    property={property}/>
-            </div>
-        );
+        return <RelationSelectorBinding {...props} relation={relation} manyRelation={manyRelation} />;
     }
 
     if (manyRelation) {
-        return <MultipleRelationFieldBinding
-            propertyKey={propertyKey}
-            value={Array.isArray(value) ? value : []}
-            error={error}
-            showError={showError}
-            disabled={disabled}
-            isSubmitting={isSubmitting}
-            property={property}
-            includeDescription={includeDescription}
-            setValue={setValue}
-            setFieldValue={setFieldValue}
-            context={context}
-            customProps={customProps}
-        />
-    } else {
-
-        const normalizedValue = value && !Array.isArray(value) ? normalizeToEntityRelation(value) : null;
-        const validValue = !!normalizedValue;
-
-        const collection = relation?.target();
-
-        if (!collection) {
-            throw Error(`Couldn't find the corresponding collection for the relation: ${propertyKey}`);
-        }
-
-        const onSingleEntitySelected = useCallback((e: Entity<any> | null) => {
-            setValue(e ? getRelationFrom(e) : null);
-        }, [setValue]);
-
-        const referenceDialogController = useEntitySelectionDialog({
-            multiselect: false,
-            path: collection.slug,
-            collection,
-            onSingleEntitySelected,
-            selectedEntityIds: validValue && normalizedValue ? [normalizedValue.id] : undefined,
-            fixedFilter: property.fixedFilter
-        }
-        );
-
-        const onEntryClick = (e: React.SyntheticEvent) => {
-            e.preventDefault();
-            referenceDialogController.open();
-        };
-
-        const usedRelation = Array.isArray(value) ? undefined : normalizedValue ?? undefined;
-        return (
-            <>
-                <LabelWithIconAndTooltip
-                    propertyKey={propertyKey}
-                    icon={getIconForProperty(property, "small")}
-                    required={property.validation?.required}
-                    title={property.name ?? propertyKey}
-                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
-
-                {!collection && <ErrorView
-                    error={"The specified collection does not exist. Check console"}/>}
-
-                {collection && <>
-
-                    {usedRelation && <RelationPreview
-                        disabled={!usedRelation}
-                        previewProperties={property.ui?.previewProperties}
-                        hover={!disabled}
-                        size={size}
-                        onClick={disabled || isSubmitting ? undefined : onEntryClick}
-                        relation={usedRelation}
-                        includeEntityLink={property.includeEntityLink}
-                        includeId={property.includeId}
-                    />}
-
-                    {!value && <div className="justify-center text-left">
-                        <EntityPreviewContainer className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",
-                            disabled || isSubmitting
-                                ? "text-surface-accent-500"
-                                : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
-                            onClick={onEntryClick}
-                            size={"medium"}>
-                            <IconForView collectionOrView={collection}
-                                className={"text-surface-300 dark:text-surface-600"}/>
-                            {`Edit ${property.name}`.toUpperCase()}
-                        </EntityPreviewContainer>
-                    </div>}
-                </>}
-
-                <FieldHelperText includeDescription={includeDescription}
-                    showError={showError}
-                    error={error}
-                    disabled={disabled}
-                    property={property}/>
-
-            </>
-        );
+        return <MultipleRelationFieldBinding {...props} />;
+    }
+
+    return <SingleRelationFieldBinding {...props} relation={relation} />;
+}
+
+function RelationSelectorBinding({
+    propertyKey,
+    value,
+    size,
+    error,
+    showError,
+    disabled,
+    isSubmitting,
+    property,
+    includeDescription,
+    setValue,
+    relation,
+    manyRelation
+}: FieldProps<RelationProperty> & { relation: any; manyRelation: boolean }) {
+    const normalizedSingle = (!manyRelation && value && !Array.isArray(value)) ? normalizeToEntityRelation(value) : null;
+    const singleValue = normalizedSingle ?? null;
+    const multipleValue = (manyRelation && Array.isArray(value)) ? value : [];
+
+    const selectorSize: "small" | "medium" | undefined = size === "large" ? "medium" : size;
+
+    return (
+        <div className="">
+            <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name ?? propertyKey}
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+
+            <RelationSelector
+                relation={relation}
+                value={manyRelation ? multipleValue : singleValue}
+                onValueChange={(newVal) => {
+                    if (manyRelation) {
+                        setValue(Array.isArray(newVal) ? newVal : []);
+                    } else {
+                        setValue(!Array.isArray(newVal) ? (newVal ?? null) : null);
+                    }
+                }}
+                disabled={disabled || isSubmitting}
+                fixedFilter={property.fixedFilter}
+                size={selectorSize}
+            />
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property}/>
+        </div>
+    );
+}
+
+function SingleRelationFieldBinding({
+    propertyKey,
+    value,
+    size,
+    error,
+    showError,
+    disabled,
+    isSubmitting,
+    property,
+    includeDescription,
+    setValue,
+    relation
+}: FieldProps<RelationProperty> & { relation: any }) {
+    const normalizedValue = value && !Array.isArray(value) ? normalizeToEntityRelation(value) : null;
+    const validValue = !!normalizedValue;
+
+    const collection = relation?.target();
+
+    if (!collection) {
+        throw Error(`Couldn't find the corresponding collection for the relation: ${propertyKey}`);
     }
+
+    const onSingleEntitySelected = useCallback((e: Entity<any> | null) => {
+        setValue(e ? getRelationFrom(e) : null);
+    }, [setValue]);
+
+    const referenceDialogController = useEntitySelectionDialog({
+        multiselect: false,
+        path: collection.slug,
+        collection,
+        onSingleEntitySelected,
+        selectedEntityIds: validValue && normalizedValue ? [normalizedValue.id] : undefined,
+        fixedFilter: property.fixedFilter
+    });
+
+    const onEntryClick = (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        referenceDialogController.open();
+    };
+
+    const usedRelation = Array.isArray(value) ? undefined : normalizedValue ?? undefined;
+
+    return (
+        <>
+            <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name ?? propertyKey}
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+
+            {!collection && <ErrorView
+                error={"The specified collection does not exist. Check console"}/>}
+
+            {collection && <>
+
+                {usedRelation && <RelationPreview
+                    disabled={!usedRelation}
+                    previewProperties={property.ui?.previewProperties}
+                    hover={!disabled}
+                    size={size}
+                    onClick={disabled || isSubmitting ? undefined : onEntryClick}
+                    relation={usedRelation}
+                    includeEntityLink={property.includeEntityLink}
+                    includeId={property.includeId}
+                />}
+
+                {!value && <div className="justify-center text-left">
+                    <EntityPreviewContainer className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",
+                        disabled || isSubmitting
+                            ? "text-surface-accent-500"
+                            : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
+                        onClick={onEntryClick}
+                        size={"medium"}>
+                        <IconForView collectionOrView={collection}
+                            className={"text-surface-300 dark:text-surface-600"}/>
+                        {`Edit ${property.name}`.toUpperCase()}
+                    </EntityPreviewContainer>
+                </div>}
+            </>}
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property}/>
+        </>
+    );
 }

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -130,7 +130,7 @@ export function RepeatFieldBinding({
 
             <FieldHelperText includeDescription={includeDescription}
                 showError={showError}
-                error={error as any}
+                error={error}
                 disabled={disabled}
                 property={property}/>
 

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -6,8 +6,7 @@ import React, { useCallback } from "react";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { EnumValuesChip } from "../../preview";
 import { getIconForProperty } from "../../util/property_utils";
-import { cls, IconButton, Select, SelectItem } from "@rebasepro/ui";
-import { XIcon } from "lucide-react";
+import { cls, IconButton, Select, SelectItem, XIcon } from "@rebasepro/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
 import { resolveEnumValues } from "@rebasepro/common";

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -2,8 +2,16 @@ import type { FieldProps } from "../../types/fields";
 import type { NumberProperty, StringProperty } from "@rebasepro/types";
 import React, { useCallback } from "react";
 
-import { Collapse, IconButton, TextField, TextareaAutosize, fieldBackgroundHoverMixin, fieldBackgroundMixin, cls } from "@rebasepro/ui";
-import { XIcon } from "lucide-react";
+import {
+    cls,
+    Collapse,
+    fieldBackgroundHoverMixin,
+    fieldBackgroundMixin,
+    IconButton,
+    TextareaAutosize,
+    TextField,
+    XIcon
+} from "@rebasepro/ui";
 import { PreviewType } from "@rebasepro/types";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { PropertyPreview } from "../../preview";

package/src/form/field_bindings/VectorFieldBinding.tsx

@@ -0,0 +1,202 @@
+import type { FieldProps } from "../../types/fields";
+import type { VectorProperty } from "@rebasepro/types";
+import React, { useState, useEffect, useCallback } from "react";
+import {
+    Button,
+    CheckIcon,
+    EyeIcon,
+    EyeOffIcon,
+    IconButton,
+    PencilIcon,
+    TextField,
+    Trash2Icon
+} from "@rebasepro/ui";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
+import { getIconForProperty } from "../../util/property_utils";
+
+/**
+ * Custom field binding to render vector fields (e.g. for high-dimensional embeddings).
+ * Shows a compact metadata card by default, and lets users expand values or edit them.
+ *
+ * Automatically parses inputs to number arrays and packages them into the canonical
+ * Vector object structure expected by Rebase driver.
+ * @group Form fields
+ */
+export function VectorFieldBinding({
+    propertyKey,
+    value,
+    setValue,
+    error,
+    showError,
+    disabled,
+    autoFocus,
+    property,
+    includeDescription,
+    size = "large"
+}: FieldProps<VectorProperty>) {
+    const isVectorObject = (val: unknown): val is { value: number[] } => {
+        return typeof val === "object" && val !== null && "value" in val;
+    };
+
+    // Extract array value from the custom { __type: "Vector", value: number[] } wrapper
+    const arrayValue = isVectorObject(value) 
+        ? value.value 
+        : (Array.isArray(value) ? value : []);
+
+    const [textValue, setTextValue] = useState(() => arrayValue.join(", "));
+    const [isEditing, setIsEditing] = useState(false);
+    const [showValues, setShowValues] = useState(false);
+
+    useEffect(() => {
+        setTextValue(arrayValue.join(", "));
+    }, [JSON.stringify(arrayValue)]);
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const handleClearClick = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setValue(null);
+        setTextValue("");
+    }, [setValue]);
+
+    const onChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const raw = event.target.value;
+        setTextValue(raw);
+
+        // Parse comma-separated string to number array
+        const numbers = raw
+            .split(",")
+            .map(str => str.trim())
+            .filter(str => str !== "")
+            .map(Number);
+
+        setValue({
+            __type: "Vector",
+            value: numbers
+        });
+    };
+
+    const label = (
+        <LabelWithIcon
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name ?? propertyKey}
+        />
+    );
+
+    const isPopulated = arrayValue.length > 0;
+
+    return (
+        <div className="flex flex-col gap-2 w-full mt-2">
+            {/* Field Label */}
+            <div className="flex items-center justify-between mb-1">
+                {label}
+            </div>
+
+            <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                <div className="w-full">
+                    {!isEditing ? (
+                        /* Compact Preview Card */
+                        <div className="flex flex-col gap-3 p-4 rounded-xl border border-surface-200 dark:border-surface-700 bg-surface-50/50 dark:bg-surface-800/20 backdrop-blur-sm transition-all duration-200 hover:border-surface-300 dark:hover:border-surface-600">
+                            <div className="flex items-center justify-between flex-wrap gap-2">
+                                <div className="flex items-center gap-2.5">
+                                    {/* Status Dot */}
+                                    <div className={`w-2.5 h-2.5 rounded-full ${isPopulated ? 'bg-emerald-500 animate-pulse' : 'bg-surface-300 dark:bg-surface-600'}`} />
+                                    <span className="text-sm font-semibold text-text-primary dark:text-text-primary-dark">
+                                        {isPopulated ? `${arrayValue.length} Dimensions` : "Empty Vector"}
+                                    </span>
+                                    {isPopulated && (
+                                        <span className="text-xs text-text-secondary dark:text-text-secondary-dark px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-800 font-medium">
+                                            Embedding
+                                        </span>
+                                    )}
+                                </div>
+
+                                <div className="flex items-center gap-2">
+                                    {isPopulated && (
+                                        <Button
+                                            variant="text"
+                                            size="small"
+                                            onClick={() => setShowValues(!showValues)}
+                                            startIcon={showValues ? <EyeOffIcon size={14} /> : <EyeIcon size={14} />}
+                                        >
+                                            {showValues ? "Hide values" : "Show values"}
+                                        </Button>
+                                    )}
+                                    {!disabled && (
+                                        <Button
+                                            variant="outlined"
+                                            size="small"
+                                            onClick={() => setIsEditing(true)}
+                                            startIcon={<PencilIcon size={14} />}
+                                        >
+                                            {isPopulated ? "Edit values" : "Add values"}
+                                        </Button>
+                                    )}
+                                    {isPopulated && !disabled && (
+                                        <IconButton size="small" onClick={handleClearClick} className="text-text-secondary hover:text-red-500">
+                                            <Trash2Icon size={14} />
+                                        </IconButton>
+                                    )}
+                                </div>
+                            </div>
+
+                            {/* Collapsible scrollable numbers list */}
+                            {showValues && isPopulated && (
+                                <div className="mt-1 p-3 rounded-lg bg-surface-100/50 dark:bg-surface-900/40 border border-surface-200/50 dark:border-surface-800/50 max-h-36 overflow-y-auto font-mono text-[11px] leading-relaxed text-text-secondary dark:text-text-secondary-dark break-all selection:bg-primary-100 dark:selection:bg-primary-900/40">
+                                    {arrayValue.join(", ")}
+                                </div>
+                            )}
+                        </div>
+                    ) : (
+                        /* Editing View: Text Input */
+                        <div className="flex flex-col gap-2 p-4 rounded-xl border border-primary-500/30 dark:border-primary-400/20 bg-surface-50/20 dark:bg-surface-800/10">
+                            <TextField
+                                size={size}
+                                value={textValue}
+                                onChange={onChange}
+                                autoFocus={true}
+                                placeholder={`e.g., 0.15, -0.42, 0.88 (Requires ${property.dimensions} dimensions)`}
+                                disabled={disabled}
+                                error={showError ? !!error : undefined}
+                                inputClassName={error ? "text-red-500 dark:text-red-600 font-mono text-xs" : "font-mono text-xs"}
+                            />
+                            <div className="flex justify-end gap-2 mt-2">
+                                <Button
+                                    variant="outlined"
+                                    size="small"
+                                    onClick={() => setIsEditing(false)}
+                                >
+                                    Cancel
+                                </Button>
+                                <Button
+                                    variant="filled"
+                                    size="small"
+                                    onClick={() => setIsEditing(false)}
+                                    startIcon={<CheckIcon size={14} />}
+                                >
+                                    Done
+                                </Button>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </PropertyIdCopyTooltip>
+
+            <FieldHelperText
+                includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property}
+            />
+        </div>
+    );
+}

package/src/form/index.tsx

@@ -20,6 +20,7 @@ export { BlockFieldBinding } from "./field_bindings/BlockFieldBinding";
 export { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
 export { MarkdownEditorFieldBinding } from "./field_bindings/MarkdownEditorFieldBinding";
 export { ArrayCustomShapedFieldBinding } from "./field_bindings/ArrayCustomShapedFieldBinding";
+export { VectorFieldBinding } from "./field_bindings/VectorFieldBinding";
 
 export * from "./components";
 

package/src/form/validation.ts

@@ -1,5 +1,5 @@
 import type { Properties } from "@rebasepro/types";
-import type { ArrayProperty, MapProperty, NumberProperty, Property, BooleanProperty, DateProperty, GeopointProperty, ReferenceProperty, RelationProperty, StringProperty } from "@rebasepro/types";
+import type { ArrayProperty, MapProperty, NumberProperty, Property, BooleanProperty, DateProperty, GeopointProperty, ReferenceProperty, RelationProperty, StringProperty, VectorProperty, BinaryProperty } from "@rebasepro/types";
 ;
 import { z, ZodTypeAny } from "zod";
 import { enumToObjectEntries, isPropertyBuilder } from "@rebasepro/common";
@@ -74,11 +74,15 @@ export function mapPropertyToZod(propertyContext: PropertyContext<Property>): Zo
         return getZodReferenceSchema(propertyContext as PropertyContext<ReferenceProperty>);
     } else if (property.type === "relation") {
         return getZodRelationSchema(propertyContext as PropertyContext<RelationProperty>);
+    } else if (property.type === "vector") {
+        return getZodVectorSchema(propertyContext as PropertyContext<VectorProperty>);
+    } else if (property.type === "binary") {
+        return getZodBinarySchema(propertyContext as PropertyContext<BinaryProperty>);
     }
 
     // Log the error but don't crash the form
     console.error("Unsupported data type in zod mapping", property);
-    const dataType = "dataType" in (property as unknown as Record<string, unknown>) ? String((property as unknown as Record<string, unknown>).dataType) : "unknown";
+    const dataType = "dataType" in (property as Record<string, unknown>) ? String((property as Record<string, unknown>).dataType) : "unknown";
     return z.any().refine(
         () => false,
         { message: `Unsupported data type: ${dataType}` }
@@ -517,3 +521,51 @@ function getZodArraySchema({
     }
     return arraySchema;
 }
+
+function getZodVectorSchema({
+    property
+}: PropertyContext<VectorProperty>): ZodTypeAny {
+    let schema: ZodTypeAny = z.preprocess(
+        (val: any) => {
+            if (val && typeof val === "object" && "__type" in val && val.__type === "Vector") {
+                return val.value;
+            }
+            if (val && typeof val === "object" && "value" in val && Array.isArray(val.value)) {
+                return val.value;
+            }
+            return val;
+        },
+        z.array(z.number()).nullable().optional()
+    );
+    
+    if (property.dimensions) {
+        schema = schema.refine(
+            (val: any) => val === null || val === undefined || val.length === property.dimensions,
+            { message: `${property.name ?? "Vector"} must have exactly ${property.dimensions} dimensions` }
+        );
+    }
+    
+    if (property.validation?.required) {
+        schema = schema.refine(
+            (val: any) => val !== null && val !== undefined && val.length > 0,
+            { message: property.validation?.requiredMessage ?? "Required" }
+        );
+    }
+    
+    return schema;
+}
+
+function getZodBinarySchema({
+    property
+}: PropertyContext<BinaryProperty>): ZodTypeAny {
+    let schema: ZodTypeAny = z.string().nullable().optional();
+    const validation = property.validation;
+
+    if (validation?.required) {
+        schema = schema.nullable().optional().refine(
+            (value: any) => value !== undefined && value !== null && value !== "",
+            { message: validation.requiredMessage ? validation.requiredMessage : "Required" }
+        );
+    }
+    return schema;
+}

package/src/hooks/navigation/useBuildNavigationStateController.tsx

@@ -89,7 +89,8 @@ export function useBuildNavigationStateController<EC extends EntityCollection, U
         plugins,
         adminMode,
         effectiveRoleController,
-        userManagement
+        userManagement,
+        collections
     });
 
     // Step 3: Compute top-level navigation (pure derived state)