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

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/form_utils.ts

@@ -0,0 +1,163 @@
+import type { CollectionConfig, PropertyConfig } from "@rebasepro/types";
+import type { AuthController, Entity, EntityStatus, EntityValues } from "@rebasepro/types";
+import { deepEqual as equal } from "fast-equals";
+import { getIn, setIn } from "@rebasepro/forms";
+import { getDefaultValuesFor } from "@rebasepro/common";
+import { isObject, mergeDeep } from "@rebasepro/utils";
+import { z } from "zod";
+
+// extract touched values for nested touched trees and map to current values
+export function extractTouchedValues(values: unknown, touched: Record<string, boolean>): Record<string, unknown> {
+    let acc: Record<string, unknown> = {};
+    if (!touched || typeof touched !== "object") {
+        return acc;
+    }
+
+    Object.entries(touched).forEach(([key, value]) => {
+        if (value) {
+            acc = setIn(acc, key, getIn(values, key)) as Record<string, unknown>;
+        }
+    })
+
+    return acc;
+}
+
+/**
+ * Recursively removes empty plain objects `{}` and empty arrays `[]` from a value tree.
+ * This prevents ghost containers created by `setIn` intermediate path construction
+ * (e.g. `{ address: {} }` when only `address.city` was touched but value is undefined)
+ * from falsely triggering the unsaved local changes indicator.
+ */
+/**
+ * Check if a value is semantically empty (null, undefined, or empty string).
+ */
+function isSemanticEmpty(v: unknown): boolean {
+    return v === null || v === undefined || v === "";
+}
+
+export function removeEmptyContainers(obj: unknown): unknown {
+    if (Array.isArray(obj)) {
+        const cleaned = obj.map(removeEmptyContainers);
+        // Keep arrays even if they contain only nulls/undefined — that's intentional data
+        return cleaned;
+    }
+    if (obj && typeof obj === "object" && Object.getPrototypeOf(obj) === Object.prototype) {
+        const result: Record<string, unknown> = {};
+        for (const key of Object.keys(obj)) {
+            const cleaned = removeEmptyContainers((obj as Record<string, unknown>)[key]);
+            // Skip empty plain objects
+            if (cleaned && typeof cleaned === "object" && !Array.isArray(cleaned)
+                && Object.getPrototypeOf(cleaned) === Object.prototype
+                && Object.keys(cleaned).length === 0) {
+                continue;
+            }
+            result[key] = cleaned;
+        }
+        // After cleaning, check if all remaining values are semantically empty
+        // (null, undefined, or ""). This catches ghost objects like {type: "", value: null}
+        // created by oneOf block initialization that aren't meaningful changes.
+        if (Object.keys(result).length > 0 && Object.values(result).every(isSemanticEmpty)) {
+            return {};
+        }
+        return result;
+    }
+    return obj;
+}
+
+export function getChanges<T extends object>(source: Partial<T>, comparison: Partial<T>): Partial<T> {
+    const changes: Partial<T> = {};
+
+    if (!source) {
+        return {};
+    }
+    if (!comparison) {
+        return source;
+    }
+
+    const allKeys = Array.from(new Set([...Object.keys(source), ...Object.keys(comparison)]));
+
+    for (const key of allKeys) {
+        const sourceValue = (source as Record<string, unknown>)[key];
+        const comparisonValue = (comparison as Record<string, unknown>)[key];
+
+        if (equal(sourceValue, comparisonValue)) {
+            continue;
+        }
+
+        const sourceHasKey = source && typeof source === "object" && Object.prototype.hasOwnProperty.call(source, key);
+        const comparisonHasKey = comparison && typeof comparison === "object" && Object.prototype.hasOwnProperty.call(comparison, key);
+
+        if (comparisonHasKey && !sourceHasKey) {
+            (changes as Record<string, unknown>)[key] = undefined;
+        } else if (Array.isArray(sourceValue)) {
+            const comparisonArray = Array.isArray(comparisonValue) ? comparisonValue : [];
+            if (sourceValue.length !== comparisonArray.length) {
+                (changes as Record<string, unknown>)[key] = sourceValue;
+                continue;
+            }
+            const hasChanges = sourceValue.some((item, index) => !equal(item, comparisonArray[index]));
+            if (hasChanges) {
+                (changes as Record<string, unknown>)[key] = sourceValue;
+            }
+        } else if (isObject(sourceValue) && sourceValue && isObject(comparisonValue) && comparisonValue) {
+            const nestedChanges = getChanges(sourceValue, comparisonValue);
+            if (Object.keys(nestedChanges).length > 0) {
+                (changes as Record<string, unknown>)[key] = nestedChanges;
+            }
+        } else {
+            (changes as Record<string, unknown>)[key] = sourceValue;
+        }
+    }
+
+    return changes;
+}
+
+export function getInitialEntityValues<M extends Record<string, unknown>>(
+    authController: AuthController,
+    collection: CollectionConfig,
+    path: string,
+    status: "new" | "existing" | "copy",
+    entity: Entity<M> | undefined,
+    propertyConfigs?: Record<string, PropertyConfig>
+): Partial<EntityValues<M>> {
+    const properties = collection.properties;
+    if ((status === "existing" || status === "copy") && entity) {
+        let values: Partial<EntityValues<M>>;
+        if (!collection.alwaysApplyDefaultValues) {
+            values = entity.values ?? getDefaultValuesFor(properties);
+        } else {
+            const defaultValues = getDefaultValuesFor(properties);
+            values = mergeDeep(defaultValues, entity.values ?? {});
+        }
+        // When copying, clear ID fields so the database generates new IDs
+        if (status === "copy") {
+            const result = { ...values };
+            for (const [key, property] of Object.entries(properties)) {
+                if (property && "isId" in property && property.isId) {
+                    delete (result as Record<string, unknown>)[key];
+                }
+            }
+            return result;
+        }
+        return values;
+    } else if (status === "new") {
+        return getDefaultValuesFor(properties);
+    } else {
+        console.error({
+            status,
+            entity
+        });
+        throw new Error("Form has not been initialised with the correct parameters");
+    }
+}
+
+export function zodToFormErrors(zodError: z.ZodError): Record<string, string> {
+    let errors: Record<string, string> = {};
+    for (const issue of zodError.issues) {
+        const path = issue.path.join(".");
+        if (path && !getIn(errors, path)) {
+            errors = setIn(errors, path, issue.message) as Record<string, string>;
+        }
+    }
+    return errors;
+}

package/src/form/index.tsx

@@ -1,8 +1,8 @@
-export {
-    EntityForm,
-    zodToFormErrors
-} from "./EntityForm";
-// EntityFormProps is exported from @rebasepro/types
+export { EntityForm } from "./EntityForm";
+export type { EntityFormProps, OnUpdateParams } from "../types/components/EntityFormProps";
+
+export { EntityFormBinding } from "./EntityFormBinding";
+export type { EntityFormBindingProps } from "./EntityFormBinding";
 
 export { SelectFieldBinding } from "./field_bindings/SelectFieldBinding";
 export { MultiSelectFieldBinding } from "./field_bindings/MultiSelectFieldBinding";
@@ -12,7 +12,6 @@ export { TextFieldBinding } from "./field_bindings/TextFieldBinding";
 export { SwitchFieldBinding } from "./field_bindings/SwitchFieldBinding";
 export { DateTimeFieldBinding } from "./field_bindings/DateTimeFieldBinding";
 export { ReferenceFieldBinding } from "./field_bindings/ReferenceFieldBinding";
-export { ReferenceAsStringFieldBinding } from "./field_bindings/ReferenceAsStringFieldBinding";
 export { MapFieldBinding } from "./field_bindings/MapFieldBinding";
 export { KeyValueFieldBinding } from "./field_bindings/KeyValueFieldBinding";
 export { RepeatFieldBinding } from "./field_bindings/RepeatFieldBinding";
@@ -20,8 +19,18 @@ 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";
 
 export { PropertyFieldBinding } from "./PropertyFieldBinding";
 export * from "./useClearRestoreValue";
+
+// Shared form utilities
+export {
+    extractTouchedValues,
+    removeEmptyContainers,
+    getChanges,
+    getInitialEntityValues,
+    zodToFormErrors
+} from "./form_utils";

package/src/form/useClearRestoreValue.tsx

@@ -22,7 +22,7 @@ export function useClearRestoreValue<T>({
 
     const clearedValueRef = useRef<T | null>(null);
     useEffect(() => {
-        const shouldClearValueIfDisabled = typeof property.disabled === "object" && Boolean(property.disabled.clearOnDisabled);
+        const shouldClearValueIfDisabled = typeof property.ui?.disabled === "object" && Boolean(property.ui?.disabled.clearOnDisabled);
         if (shouldClearValueIfDisabled) {
             if (value != null) {
                 clearedValueRef.current = value;