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

package/src/collection_editor/ui/collection_editor/EntityActionsSelectDialog.tsx

@@ -1,4 +1,4 @@
-import { useCustomizationController } from "@rebasepro/core";
+import { useCustomizationController } from "@rebasepro/app";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
 import React from "react";
 

package/src/collection_editor/ui/collection_editor/EntityCustomViewsSelectDialog.tsx

@@ -1,4 +1,4 @@
-import { useCustomizationController } from "@rebasepro/core";
+import { useCustomizationController } from "@rebasepro/app";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
 import React from "react";
 

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

@@ -6,10 +6,25 @@ 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 { extractEnumFromValues } from "@rebasepro/schema-inference";
-import { Field, Formex, getIn, useCreateFormex, useFormex } from "@rebasepro/formex";
+import {
+    Badge,
+    Button,
+    CircularProgress,
+    DebouncedTextField,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    iconSize,
+    ListIcon,
+    Paper,
+    RefreshCcwIcon,
+    SettingsIcon,
+    Typography
+} from "@rebasepro/ui";
+import { extractEnumFromValues } from "@rebasepro/inference";
+import { Field, Formex, getIn, useCreateFormex, useFormex } from "@rebasepro/forms";
 
 type EnumFormProps = {
     enumValues: EnumValueConfig[];
@@ -320,7 +335,7 @@ function EnumEntryDialog({
         errors
     } = useFormex<EnumValues>();
 
-    const idError = index !== undefined ? getIn(errors, `${enumValuesPath}[${index}].id`) : undefined;
+    const idError = index !== undefined ? getIn(errors, `${enumValuesPath}[${index}].id`) as string | undefined : undefined;
     return <Dialog
         maxWidth="md"
         aria-labelledby="enum-edit-dialog"

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

@@ -1,26 +1,48 @@
 
-import { IconForView } from "@rebasepro/core";
+import { IconForView } from "@rebasepro/app";
 import { FieldCaption } from "../../_cms_internals";
 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 { Field, getIn, useFormex } from "@rebasepro/formex";
+import type { CollectionConfig, PostgresCollectionConfig } from "@rebasepro/types";
+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/forms";
 import { useCollectionsConfigController } from "../../useCollectionsConfigController";
 import { singular, toSnakeCase } from "@rebasepro/utils";
+import type { ExtraCollectionFieldsParams } from "../../extensibility_types";
+import { toSerializableCollectionConfig } from "../../serializable_utils";
 
 export function GeneralSettingsForm({
     isNewCollection,
     existingPaths,
     existingIds,
-    parentCollection
+    parentCollection,
+    renderExtraCollectionFields,
+    standalone,
 }: {
     isNewCollection: boolean;
     existingPaths?: string[];
     existingIds?: string[];
-    parentCollection?: EntityCollection;
+    parentCollection?: CollectionConfig;
+    renderExtraCollectionFields?: (params: ExtraCollectionFieldsParams) => React.ReactNode;
+    standalone?: boolean;
 }) {
 
     const {
@@ -31,13 +53,12 @@ export function GeneralSettingsForm({
         errors,
         setFieldTouched,
         submitCount
-    } = useFormex<PostgresCollection>();
+    } = useFormex<PostgresCollectionConfig>();
 
     const [iconDialogOpen, setIconDialogOpen] = useState(false);
 
-    const authController = useAuthController();
-    const customizationController = useCustomizationController();
-    const configController = useCollectionsConfigController();
+    const configControllerFromContext = useCollectionsConfigController();
+    const configController = standalone ? { readOnly: false } : configControllerFromContext;
 
     const updateDatabaseId = (databaseId: string) => {
         setFieldValue("databaseId", databaseId ?? undefined);
@@ -227,6 +248,18 @@ export function GeneralSettingsForm({
                     </div>
                 </Dialog>
 
+                {renderExtraCollectionFields && (
+                    <div className="mt-4">
+                        {renderExtraCollectionFields({
+                            metadata: (values.metadata ?? {}) as Record<string, unknown>,
+                            onMetadataChange: (key: string, value: unknown) => {
+                                setFieldValue(`metadata.${key}`, value);
+                            },
+                            collection: toSerializableCollectionConfig(values),
+                        })}
+                    </div>
+                )}
+
             </Container>
         </div>
     );

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

@@ -1,24 +1,23 @@
-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 { useSafeSnackbarController } from "../../useSafeSnackbarController";
+import { CollectionConfig } from "@rebasepro/types";
+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"
 import { camelCase } from "./utils/strings";
-import { clone } from "@rebasepro/formex";
+import { clone } from "@rebasepro/forms";
 import { isEmptyObject } from "@rebasepro/utils";
 
 export function GetCodeDialog({
     collection,
     onOpenChange,
     open
-}: { onOpenChange: (open: boolean) => void, collection: EntityCollection, open: boolean }) {
+}: { onOpenChange: (open: boolean) => void, collection: CollectionConfig, open: boolean }) {
 
-    const snackbarController = useSnackbarController();
+    const snackbarController = useSafeSnackbarController();
 
     const code = collection
-        ? "import { EntityCollection } from \"@rebasepro/core\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode({ ...collection }), null, "\t")
+        ? "import { CollectionConfig } from \"@rebasepro/app\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:CollectionConfig = " + JSON5.stringify(collectionToCode({ ...collection }), null, "\t")
         : "No collection selected";
     return <Dialog open={open}
         onOpenChange={onOpenChange}
@@ -65,7 +64,7 @@ export function GetCodeDialog({
                 onClick={(e) => {
                     e.stopPropagation();
                     e.preventDefault();
-                    snackbarController.open({
+                    snackbarController?.open({
                         type: "success",
                         message: "Copied"
                     })
@@ -79,7 +78,7 @@ export function GetCodeDialog({
     </Dialog>;
 }
 
-function collectionToCode(collection: EntityCollection): object {
+function collectionToCode(collection: CollectionConfig): object {
 
     const propertyCleanup = (value: unknown): unknown => {
         if (value === undefined || value === null) {
@@ -123,8 +122,7 @@ function collectionToCode(collection: EntityCollection): object {
         description: collection.description,
 
         icon: collection.icon,
-        group: collection.group,
-        filter: collection.filter,
+        defaultFilter: collection.defaultFilter,
         sort: collection.sort,
         properties: Object.entries({
             ...(collection.properties ?? {})

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

@@ -1,13 +1,12 @@
 
 import { FieldCaption } from "../../_cms_internals";
 import React, { useMemo, useRef, useState } from "react";
-import { useAuthController, useCustomizationController } from "@rebasepro/core";
-import { EntityCollection, Property } from "@rebasepro/types";
+import { useAuthController, useCustomizationController } from "@rebasepro/app";
+import { CollectionConfig, 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 { useFormex } from "@rebasepro/formex";
+import { Button, IconButton, iconSize, Select, SelectItem, Typography, XIcon } from "@rebasepro/ui";
+import { useFormex } from "@rebasepro/forms";
 import { PropertyFormDialog } from "./PropertyEditView";
 import { unslugify } from "@rebasepro/utils";
 
@@ -20,7 +19,7 @@ export function KanbanConfigSection({
 }) {
     const authController = useAuthController();
     const customizationController = useCustomizationController();
-    const { values, setFieldValue } = useFormex<EntityCollection>();
+    const { values, setFieldValue } = useFormex<CollectionConfig>();
     const panelRef = useRef<HTMLDivElement>(null);
     const [columnPropertyDialogOpen, setColumnPropertyDialogOpen] = useState(false);
 

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

@@ -1,15 +1,35 @@
 
-import React, { useDeferredValue, useEffect, useRef, useState } from "react";
+import React, { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
 import { deepEqual as equal } from "fast-equals"
 
-import { Formex, FormexController, getIn, useCreateFormex } from "@rebasepro/formex";
-import { ConfirmationDialog } from "@rebasepro/core";
+import { Formex, FormexController, getIn, useCreateFormex } from "@rebasepro/forms";
+import { ConfirmationDialog } from "@rebasepro/app";
 import { DEFAULT_FIELD_CONFIGS, getFieldConfig, getFieldId } from "../../../components/field_configs";
 import { PropertyConfigBadge } from "../../../components/PropertyConfigBadge";
-import { Property, PropertyConfig, PropertyConfigId } from "@rebasepro/types";
+import { CollectionConfig, Property, PropertyConfig, PropertyConfigId } from "@rebasepro/types";
+import type { PropertyTypePreset, PropertyType } from "../../extensibility_types";
+import { toSerializableProperty, toSerializableCollectionConfig } from "../../serializable_utils";
+import type { SerializableProperty, SerializableCollectionConfig } from "../../serializable_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 +42,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";
@@ -32,7 +53,8 @@ import { MarkdownPropertyField } from "./properties/MarkdownPropertyField";
 import { isValidRegExp, mergeDeep } from "@rebasepro/utils";
 
 export type PropertyWithId = Property & {
-    id?: string
+    id?: string;
+    conditions?: import("@rebasepro/types").PropertyConditions;
 };
 
 export type OnPropertyChangedParams = {
@@ -63,6 +85,15 @@ export type PropertyFormProps = {
     getData?: () => Promise<object[]>;
     getController?: (formex: FormexController<PropertyWithId>) => void;
     propertyConfigs: Record<string, PropertyConfig>;
+    propertyTypePresets?: PropertyTypePreset[];
+    hiddenPropertyTypes?: PropertyType[];
+    renderExtraPropertyFields?: (params: {
+        metadata: Record<string, unknown>;
+        onMetadataChange: (key: string, value: unknown) => void;
+        property: SerializableProperty;
+        collection: SerializableCollectionConfig;
+    }) => React.ReactNode;
+    collectionValues?: CollectionConfig;
 
 };
 
@@ -89,7 +120,11 @@ export const PropertyForm = React.memo(
             allowDataInference,
             getController,
             getData,
-            propertyConfigs
+            propertyConfigs,
+            propertyTypePresets,
+            hiddenPropertyTypes,
+            renderExtraPropertyFields,
+            collectionValues
         } = props;
 
         const initialValue: PropertyWithId = {
@@ -169,6 +204,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";
@@ -206,6 +244,10 @@ export const PropertyForm = React.memo(
                 getData={getData}
                 allowDataInference={allowDataInference}
                 propertyConfigs={propertyConfigs}
+                propertyTypePresets={propertyTypePresets}
+                hiddenPropertyTypes={hiddenPropertyTypes}
+                renderExtraPropertyFields={renderExtraPropertyFields}
+                collectionValues={collectionValues}
                 {...formexController}/>
         </Formex>;
     }, (a, b) =>
@@ -302,7 +344,11 @@ function PropertyEditFormFields({
     inArray,
     getData,
     allowDataInference,
-    propertyConfigs
+    propertyConfigs,
+    propertyTypePresets,
+    hiddenPropertyTypes,
+    renderExtraPropertyFields,
+    collectionValues
 }: {
     includeIdAndTitle?: boolean;
     existing: boolean;
@@ -319,6 +365,10 @@ function PropertyEditFormFields({
     getData?: () => Promise<object[]>;
     allowDataInference: boolean;
     propertyConfigs: Record<string, PropertyConfig>;
+    propertyTypePresets?: PropertyTypePreset[];
+    hiddenPropertyTypes?: PropertyType[];
+    renderExtraPropertyFields?: PropertyFormProps["renderExtraPropertyFields"];
+    collectionValues?: CollectionConfig;
 
 } & FormexController<PropertyWithId>) {
 
@@ -367,6 +417,29 @@ function PropertyEditFormFields({
         }, 0);
     };
 
+    const onPresetSelected = useCallback((preset: PropertyTypePreset) => {
+        // Map baseType to the default widgetId
+        const BASE_TYPE_TO_WIDGET: Record<string, string> = {
+            "string": "text_field",
+            "number": "number_input",
+            "boolean": "switch",
+            "date": "date_time",
+            "reference": "reference",
+            "relation": "relation",
+            "map": "group",
+            "array": "repeat",
+            "vector": "vector_input",
+            "geopoint": "text_field",
+            "binary": "text_field",
+        };
+        const widgetId = BASE_TYPE_TO_WIDGET[preset.baseType] || "text_field";
+        setSelectedFieldConfigId(widgetId);
+        // Merge preset defaults into the property
+        const updatedValues = updatePropertyFromWidget(values, widgetId, propertyConfigs);
+        const mergedValues = { ...updatedValues, ...preset.defaults, propertyConfig: widgetId };
+        setValues(mergedValues as PropertyWithId);
+    }, [values, propertyConfigs, setValues]);
+
     let childComponent;
     if (selectedFieldConfigId === "text_field" ||
         selectedFieldConfigId === "multiline" ||
@@ -432,13 +505,6 @@ function PropertyEditFormFields({
                 existing={existing}
                 multiple={false}
                 disabled={disabled}/>;
-    } else if (selectedFieldConfigId === "reference_as_string") {
-        childComponent =
-            <ReferencePropertyField showErrors={showErrors}
-                existing={existing}
-                asString={true}
-                multiple={false}
-                disabled={disabled}/>;
     } else if (selectedFieldConfigId === "date_time") {
         childComponent = <DateTimePropertyField disabled={disabled}/>;
     } else if (selectedFieldConfigId === "multi_references") {
@@ -463,6 +529,10 @@ function PropertyEditFormFields({
             <RelationPropertyField
                 showErrors={showErrors}
                 disabled={disabled}/>;
+    } else if (selectedFieldConfigId === "vector_input") {
+        childComponent =
+            <VectorPropertyField
+                disabled={disabled}/>;
     } else {
         childComponent = null;
     }
@@ -477,7 +547,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}
@@ -494,7 +564,10 @@ function PropertyEditFormFields({
                         showError={Boolean(selectedWidgetError)}
                         existing={existing}
                         propertyConfigs={propertyConfigs}
-                        inArray={inArray}/>
+                        inArray={inArray}
+                        propertyTypePresets={propertyTypePresets}
+                        hiddenPropertyTypes={hiddenPropertyTypes}
+                        onPresetSelected={onPresetSelected}/>
 
                     {!!selectedWidgetError &&
                         <Typography variant="caption"
@@ -509,10 +582,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>
 
@@ -527,6 +600,23 @@ function PropertyEditFormFields({
 
                 {childComponent}
 
+                {renderExtraPropertyFields && collectionValues && (
+                    <div className="col-span-12 mt-4 px-2">
+                        {renderExtraPropertyFields({
+                            metadata: ((values as unknown as Record<string, unknown>).metadata as Record<string, unknown>) ?? {},
+                            onMetadataChange: (key: string, value: unknown) => {
+                                const currentMetadata = ((values as unknown as Record<string, unknown>).metadata as Record<string, unknown>) ?? {};
+                                setValues({
+                                    ...values,
+                                    metadata: { ...currentMetadata, [key]: value },
+                                } as PropertyWithId);
+                            },
+                            property: toSerializableProperty(values as Property),
+                            collection: toSerializableCollectionConfig(collectionValues),
+                        })}
+                    </div>
+                )}
+
                 <div className={"col-span-12"}>
                     <AdvancedPropertyValidation disabled={disabled}/>
                 </div>
@@ -589,14 +679,41 @@ const WIDGET_TYPE_MAP: Record<PropertyConfigId, string> = {
     multi_file_upload: "File",
     relation: "Relation",
     reference: "Reference",
-    reference_as_string: "Text",
     multi_references: "Reference",
     date_time: "Date",
     group: "Group",
     key_value: "Group",
     repeat: "Array",
     custom_array: "Array",
-    block: "Group"
+    block: "Group",
+    vector_input: "Number"
+};
+
+const WIDGET_BASE_TYPE_MAP: Record<string, PropertyType> = {
+    text_field: "string",
+    multiline: "string",
+    markdown: "string",
+    url: "string",
+    email: "string",
+    select: "string",
+    multi_select: "string",
+    file_upload: "string",
+    multi_file_upload: "string",
+    user_select: "string",
+    number_input: "number",
+    number_select: "number",
+    multi_number_select: "number",
+    switch: "boolean",
+    date_time: "date",
+    reference: "reference",
+    multi_references: "reference",
+    relation: "relation",
+    group: "map",
+    key_value: "map",
+    block: "map",
+    repeat: "array",
+    custom_array: "array",
+    vector_input: "vector",
 };
 
 function WidgetSelectView({
@@ -609,7 +726,10 @@ function WidgetSelectView({
     showError,
     existing,
     propertyConfigs,
-    inArray
+    inArray,
+    propertyTypePresets,
+    hiddenPropertyTypes,
+    onPresetSelected
 }: {
     initialProperty?: PropertyWithId,
     value?: PropertyConfigId,
@@ -620,14 +740,24 @@ function WidgetSelectView({
     disabled: boolean,
     existing: boolean,
     propertyConfigs: Record<string, PropertyConfig>,
-    inArray?: boolean
+    inArray?: boolean,
+    propertyTypePresets?: PropertyTypePreset[],
+    hiddenPropertyTypes?: PropertyType[],
+    onPresetSelected?: (preset: PropertyTypePreset) => void,
 }) {
 
     const allSupportedFields = Object.entries(supportedFields).concat(Object.entries(propertyConfigs));
 
+    const filteredFields = hiddenPropertyTypes && !propertyTypePresets
+        ? allSupportedFields.filter(([key]) => {
+            const baseType = WIDGET_BASE_TYPE_MAP[key];
+            return !baseType || !hiddenPropertyTypes.includes(baseType);
+        })
+        : allSupportedFields;
+
     const displayedWidgets = (inArray
-        ? allSupportedFields.filter(([_, propertyConfig]) => !isPropertyBuilder(propertyConfig.property as Property) && (propertyConfig.property as Property)?.type !== "array")
-        : allSupportedFields)
+        ? filteredFields.filter(([_, propertyConfig]) => !isPropertyBuilder(propertyConfig.property as Property) && (propertyConfig.property as Property)?.type !== "array")
+        : filteredFields)
         .map(([key, propertyConfig]) => ({
             [key]: propertyConfig
         }))
@@ -638,6 +768,11 @@ function WidgetSelectView({
             }
         }, {});
 
+    const activePreset = useMemo(() => {
+        if (!propertyTypePresets || !initialProperty) return undefined;
+        return propertyTypePresets.find(p => p.detect?.(toSerializableProperty(initialProperty as Property)));
+    }, [propertyTypePresets, initialProperty]);
+
     const key = value;
     const propertyConfig = key ? (DEFAULT_FIELD_CONFIGS[key] ?? propertyConfigs[key]) : undefined;
     const baseProperty = propertyConfig?.property;
@@ -684,9 +819,36 @@ function WidgetSelectView({
             onOpenChange={(open: boolean) => onOpenChange(open, Boolean(value))}
             maxWidth={"4xl"}>
             <DialogTitle>
-                Select a property widget
+                {propertyTypePresets ? "Select a property type" : "Select a property widget"}
             </DialogTitle>
             <DialogContent>
+                {propertyTypePresets ? (
+                    <div className={"grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2 mt-4"}>
+                        {propertyTypePresets.map((preset) => (
+                            <Card
+                                key={preset.id}
+                                onClick={() => {
+                                    onPresetSelected?.(preset);
+                                    onOpenChange(false, true);
+                                }}
+                                className={cls(
+                                    "flex flex-row items-center px-4 py-2 m-1",
+                                    activePreset?.id === preset.id && "ring-2 ring-primary"
+                                )}>
+                                <div className={cls("flex flex-row items-center text-base min-h-[48px]")}>
+                                    {preset.icon && (
+                                        <div className={"mr-4 text-2xl"}>
+                                            {typeof preset.icon === "string" ? preset.icon : preset.icon}
+                                        </div>
+                                    )}
+                                    <div>
+                                        <Typography variant={"label"}>{preset.label}</Typography>
+                                    </div>
+                                </div>
+                            </Card>
+                        ))}
+                    </div>
+                ) : (
                 <div>
                     {groups.map(group => {
                         return <div key={group} className={"mt-4"}>
@@ -722,6 +884,7 @@ function WidgetSelectView({
                     {/*        existing={existing}/>;*/}
                     {/*})}*/}
                 </div>
+                )}
             </DialogContent>
         </Dialog>
     </>;