@rebasepro/admin 0.0.1-canary.eae7889 → 0.1.0

package/src/form/field_bindings/RelationFieldBinding.tsx

@@ -45,7 +45,7 @@ export function RelationFieldBinding({
     const manyRelation = relation?.cardinality === "many";
 
     // Inline selector mode
-    const widget = property.widget ?? "select";
+    const widget = property.ui?.widget ?? "select";
 
     if (widget === "select" && relation) {
         const normalizedSingle = (!manyRelation && value && !Array.isArray(value)) ? normalizeToEntityRelation(value) : null;
@@ -74,7 +74,7 @@ export function RelationFieldBinding({
                         }
                     }}
                     disabled={disabled || isSubmitting}
-                    forceFilter={property.forceFilter}
+                    fixedFilter={property.fixedFilter}
                     size={selectorSize}
                 />
 
@@ -123,7 +123,7 @@ export function RelationFieldBinding({
             collection,
             onSingleEntitySelected,
             selectedEntityIds: validValue && normalizedValue ? [normalizedValue.id] : undefined,
-            forceFilter: property.forceFilter
+            fixedFilter: property.fixedFilter
         }
         );
 
@@ -149,7 +149,7 @@ export function RelationFieldBinding({
 
                     {usedRelation && <RelationPreview
                         disabled={!usedRelation}
-                        previewProperties={property.previewProperties}
+                        previewProperties={property.ui?.previewProperties}
                         hover={!disabled}
                         size={size}
                         onClick={disabled || isSubmitting ? undefined : onEntryClick}

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -43,7 +43,7 @@ export function RepeatFieldBinding({
         throw Error("RepeatFieldBinding misconfiguration. Property `type` is not `array`");
     }
 
-    const minimalistView = minimalistViewProp || property.minimalistView;
+    const minimalistView = minimalistViewProp || property.ui?.minimalistView;
 
     if (!property.of)
         throw Error("RepeatFieldBinding misconfiguration. Property `of` not set");
@@ -56,7 +56,7 @@ export function RepeatFieldBinding({
         authController
     })
 
-    const expanded = property.expanded === undefined ? true : property.expanded;
+    const expanded = property.ui?.expanded === undefined ? true : property.ui?.expanded;
     const ofProperty = property.of;
 
     const [lastAddedId, setLastAddedId] = useState<number | undefined>();
@@ -91,19 +91,19 @@ export function RepeatFieldBinding({
         </ErrorBoundary>;
     };
 
-    const canAddElements = !property.disabled && !isSubmitting && !disabled && (property.canAddElements || property.canAddElements === undefined);
+    const canAddElements = !property.ui?.disabled && !isSubmitting && !disabled && (property.canAddElements || property.canAddElements === undefined);
     const sortable = property.sortable === undefined ? true : property.sortable;
     const arrayContainer = <ArrayContainer droppableId={propertyKey}
         addLabel={property.name ? t("add_to_field", { fieldName: property.name }) : t("add_entry")}
         value={value ?? []}
         buildEntry={buildEntry}
         onInternalIdAdded={setLastAddedId}
-        disabled={isSubmitting || Boolean(property.disabled)}
+        disabled={isSubmitting || Boolean(property.ui?.disabled)}
         canAddElements={canAddElements}
         sortable={sortable}
         newDefaultEntry={getDefaultValueFor(property.of)}
         onValueChange={(value) => setFieldValue(propertyKey, value)}
-        className={property.widthPercentage !== undefined ? "mt-8" : undefined}
+        className={property.ui?.widthPercentage !== undefined ? "mt-8" : undefined}
     />;
 
     const title = (<>

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -68,7 +68,7 @@ export function SelectFieldBinding({
                         />
                     </PropertyIdCopyTooltip>}
                 endAdornment={
-                    property.clearable && !disabled && <IconButton
+                    property.ui?.clearable && !disabled && <IconButton
                         size="small"
                         onClick={handleClearClick}>
                         <XIcon/>

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -63,7 +63,7 @@ export function StorageUploadFieldBinding({
     const authController = useAuthController();
 
     const storageSource = useStorageSource(context.collection);
-    const disabled = isReadOnly(property) || !!property.disabled || isSubmitting || context.disabled;
+    const disabled = isReadOnly(property) || !!property.ui?.disabled || isSubmitting || context.disabled;
 
     const {
         internalValue,

package/src/form/field_bindings/SwitchFieldBinding.tsx

@@ -43,7 +43,7 @@ export const SwitchFieldBinding = function SwitchFieldBinding({
                     value={value}
                     onValueChange={(v) => setValue(v)}
                     error={showError}
-                    className={property.widthPercentage !== undefined ? "mt-8" : undefined}
+                    className={property.ui?.widthPercentage !== undefined ? "mt-8" : undefined}
                     label={<LabelWithIcon
                         icon={getIconForProperty(property, "small")}
                         required={property.validation?.required}

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -33,8 +33,8 @@ export function TextFieldBinding<T extends string | number>({
     let multiline: boolean | undefined;
     let url: boolean | PreviewType | undefined;
     if (property.type === "string") {
-        multiline = property.multiline;
-        url = property.url;
+        multiline = property.ui?.multiline;
+        url = property.ui?.url;
     }
 
     useClearRestoreValue({
@@ -71,7 +71,7 @@ export function TextFieldBinding<T extends string | number>({
         inputType = "number";
     } else if (property.type === "string") {
         if (property.email) inputType = "email";
-        else if (property.url) inputType = "url";
+        else if (property.ui?.url) inputType = "url";
     }
 
     const label = (
@@ -88,7 +88,7 @@ export function TextFieldBinding<T extends string | number>({
                     fieldBackgroundMixin,
                     fieldBackgroundHoverMixin,
                     showError && error ? "border border-red-500 dark:border-red-600" : "",
-                    property.widthPercentage !== undefined ? "mt-8" : undefined
+                    property.ui?.widthPercentage !== undefined ? "mt-8" : undefined
                 )}>
                     <div className="pointer-events-none absolute top-1 text-xs font-medium px-3 text-text-secondary dark:text-text-secondary-dark">
                         {label}
@@ -104,7 +104,7 @@ export function TextFieldBinding<T extends string | number>({
                             showError && error ? "text-red-500 dark:text-red-600" : ""
                         )}
                     />
-                    {property.clearable && (
+                    {property.ui?.clearable && (
                         <div className="flex flex-row justify-center items-center absolute h-full right-0 top-0 mr-4">
                             <IconButton onClick={handleClearClick}>
                                 <XIcon/>
@@ -118,7 +118,7 @@ export function TextFieldBinding<T extends string | number>({
                     value={value ?? ""}
                     onChange={onChange}
                     autoFocus={autoFocus}
-                    className={property.widthPercentage !== undefined ? "mt-8" : undefined}
+                    className={property.ui?.widthPercentage !== undefined ? "mt-8" : undefined}
                     label={<LabelWithIcon
                         icon={getIconForProperty(property, "small")}
                         required={property.validation?.required || property.isId === true}
@@ -126,7 +126,7 @@ export function TextFieldBinding<T extends string | number>({
                     type={inputType}
                     disabled={disabled}
                     endAdornment={
-                        property.clearable && <IconButton
+                        property.ui?.clearable && <IconButton
                             onClick={handleClearClick}>
                             <XIcon/>
                         </IconButton>

package/src/form/field_bindings/UserSelectFieldBinding.tsx

@@ -51,7 +51,7 @@ export function UserSelectFieldBinding({
                     setValue(userId);
                 }}
                 disabled={disabled}
-                clearable={property.clearable}
+                clearable={property.ui?.clearable}
                 size={selectorSize}
             />
 

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;

package/src/form/validation.ts

@@ -187,7 +187,7 @@ function getZodStringSchema({
             (value: any) => value == null || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
             { message: `${property.name} must be an email` }
         );
-        if (property.url) {
+        if (property.ui?.url) {
             if (!property.storage || property.storage?.storeUrl) {
                 schema = schema.refine(
                     (value: any) => {

package/src/hooks/navigation/contexts/CollectionRegistryContext.tsx

@@ -6,7 +6,8 @@ export const CollectionRegistryContext = createContext<CollectionRegistryControl
     getCollection: () => undefined,
     getRawCollection: () => undefined,
     getParentReferencesFromPath: () => [],
-    getParentCollectionIds: () => [],
+    getParentCollectionSlugs: () => [],
+    getParentEntityIds: () => [],
     convertIdsToPaths: () => [],
     initialised: false
 });

package/src/hooks/navigation/useBuildCollectionRegistryController.tsx

@@ -94,7 +94,7 @@ export function useBuildCollectionRegistryController(props: {
         });
     }, []);
 
-    const getParentCollectionIds = useCallback((path: string): string[] => {
+    const getParentCollectionSlugs = useCallback((path: string): string[] => {
         const registry = collectionRegistryRef.current;
         if (!registry) {
             return [];
@@ -126,6 +126,16 @@ export function useBuildCollectionRegistryController(props: {
         return result.map(r => getCollectionFromPaths(r)?.slug).filter(Boolean) as string[];
     }, []);
 
+    const getParentEntityIds = useCallback((path: string): string[] => {
+        const cleanedPath = removeInitialAndTrailingSlashes(path);
+        const strings = cleanedPath.split("/");
+        const evenPathSegments = strings.filter((_, i) => i % 2 !== 0);
+        if (strings.length % 2 === 0) {
+            evenPathSegments.pop();
+        }
+        return evenPathSegments;
+    }, []);
+
     const convertIdsToPaths = useCallback((ids: string[]): string[] => {
         const registry = collectionRegistryRef.current;
         if (!registry) return [];
@@ -156,7 +166,8 @@ export function useBuildCollectionRegistryController(props: {
         getCollection,
         getRawCollection,
         getParentReferencesFromPath,
-        getParentCollectionIds,
+        getParentCollectionSlugs,
+        getParentEntityIds,
         convertIdsToPaths,
         collectionRegistryRef
     }), [
@@ -165,7 +176,8 @@ export function useBuildCollectionRegistryController(props: {
         getCollection,
         getRawCollection,
         getParentReferencesFromPath,
-        getParentCollectionIds,
+        getParentCollectionSlugs,
+        getParentEntityIds,
         convertIdsToPaths
     ]);
 }

package/src/hooks/navigation/useNavigationRegistry.ts

@@ -104,7 +104,7 @@ export function useNavigationRegistry(userConfigPersistence?: UserConfigurationP
         });
     }, []);
 
-    const getParentCollectionIds = useCallback((path: string): string[] => {
+    const getParentCollectionSlugs = useCallback((path: string): string[] => {
         const strings = path.split("/");
         const oddPathSegments = strings.filter((_, i) => i % 2 === 0);
         oddPathSegments.pop();
@@ -118,6 +118,15 @@ export function useNavigationRegistry(userConfigPersistence?: UserConfigurationP
         return result.map(r => getCollectionFromPaths(r)?.slug).filter(Boolean) as string[];
     }, [getAllParentReferencesForPath, getCollectionFromPaths]);
 
+    const getParentEntityIds = useCallback((path: string): string[] => {
+        const strings = path.split("/");
+        const evenPathSegments = strings.filter((_, i) => i % 2 !== 0);
+        if (strings.length % 2 === 0) {
+            evenPathSegments.pop();
+        }
+        return evenPathSegments;
+    }, []);
+
     const convertIdsToPaths = useCallback((ids: string[]): string[] => {
         const registry = collectionRegistryRef.current;
         if (!registry) {
@@ -141,13 +150,15 @@ export function useNavigationRegistry(userConfigPersistence?: UserConfigurationP
         getCollection,
         getRawCollection,
         getParentReferencesFromPath: getAllParentReferencesForPath,
-        getParentCollectionIds,
+        getParentCollectionSlugs,
+        getParentEntityIds,
         convertIdsToPaths
     }), [
         getCollection,
         getRawCollection,
         getAllParentReferencesForPath,
-        getParentCollectionIds,
+        getParentCollectionSlugs,
+        getParentEntityIds,
         convertIdsToPaths
     ]);
 }

package/src/hooks/navigation/useResolvedViews.tsx

@@ -21,7 +21,7 @@ import { AuthController, RebaseData, User } from "@rebasepro/types";
 import { UserManagementDelegate } from "@rebasepro/types";
 
 import { resolveAppViews } from "./useNavigationResolution";
-import { NAVIGATION_ADMIN_GROUP_NAME } from "./utils";
+
 
 // Lazy-load admin views — only rendered when navigation reaches /users or /roles
 const UsersView = lazy(() => import("../../components/admin/UsersView").then(m => ({ default: m.UsersView })));
@@ -128,7 +128,6 @@ export function useResolvedViews<USER extends User>(
             views.push({
                 slug: "users",
                 name: "Users",
-                group: NAVIGATION_ADMIN_GROUP_NAME,
                 icon: "Headset",
                 view: usersViewElement
             });
@@ -136,7 +135,6 @@ export function useResolvedViews<USER extends User>(
                 views.push({
                     slug: "roles",
                     name: "Roles",
-                    group: NAVIGATION_ADMIN_GROUP_NAME,
                     icon: "Shield",
                     view: rolesViewElement
                 });

package/src/hooks/navigation/useTopLevelNavigation.ts

@@ -152,7 +152,7 @@ export function useTopLevelNavigation(
                 if (adminView.hideFromNavigation) return acc;
 
                 const pathKey = adminView.slug;
-                let groupName = adminView.group?.trim() || NAVIGATION_ADMIN_GROUP_NAME;
+                let groupName = NAVIGATION_ADMIN_GROUP_NAME;
 
                 if (finalNavigationGroupMappings) {
                     for (const pluginGroupDef of finalNavigationGroupMappings) {

package/src/hooks/navigation/utils.ts

@@ -11,7 +11,7 @@ export function getGroup(collectionOrView: EntityCollection<any, any> | AppView)
     if (!trimmed || trimmed === "") {
         return NAVIGATION_DEFAULT_GROUP_NAME;
     }
-    return trimmed ?? NAVIGATION_DEFAULT_GROUP_NAME;
+    return trimmed;
 }
 
 export function computeNavigationGroups({

package/src/hooks/useEntityHistory.ts

@@ -20,7 +20,7 @@ export interface UseEntityHistoryResult {
     hasMore: boolean;
     error?: Error;
     loadMore: () => void;
-    revert: (historyId: string) => Promise<void>;
+    revert: (historyId: string) => Promise<Record<string, unknown>>;
 }
 
 /**
@@ -129,7 +129,7 @@ signal });
         }
     }, [isLoading, hasMore, pageSize, offset, entries.length, total]);
 
-    const revert = useCallback(async (historyId: string) => {
+    const revert = useCallback(async (historyId: string): Promise<Record<string, unknown>> => {
         if (!apiConfig?.apiUrl || !entityId) {
             throw new Error("Cannot revert: missing API configuration or entity ID");
         }
@@ -149,10 +149,15 @@ headers });
             throw new Error(errorData.error?.message || `Failed to revert (${response.status})`);
         }
 
+        const result = await response.json();
+
         // Refresh the history list after revert by resetting the entity ref
         // and triggering the effect.
         currentEntityRef.current = undefined;
         setRefreshTrigger(prev => prev + 1);
+
+        // Return the reverted entity data so callers can update the form
+        return result.data as Record<string, unknown>;
     }, [apiConfig, slug, entityId]);
 
     return useMemo(() => ({

package/src/preview/PropertyPreview.tsx

@@ -1,11 +1,11 @@
 import type { ArrayProperty, MapProperty, NumberProperty, Property, StringProperty } from "@rebasepro/types";
-import React, { createElement } from "react";
+import React, { createElement, Suspense } from "react";
 import { deepEqual as equal } from "fast-equals"
 
 import { EntityReference, EntityRelation } from "@rebasepro/types";
 import type { PropertyPreviewProps } from "../types/components/PropertyPreviewProps";
 import { resolveProperty, normalizeToEntityRelation } from "@rebasepro/common";
-import { useAuthController, useCustomizationController } from "@rebasepro/core";
+import { useAuthController, useCustomizationController, resolveComponentRef } from "@rebasepro/core";
 import { EmptyValue } from "./components/EmptyValue";
 import { UrlComponentPreview } from "./components/UrlComponentPreview";
 import { StorageThumbnail } from "./components/StorageThumbnail";
@@ -56,18 +56,22 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
 
     if (property === null) {
         content = <EmptyValue/>;
-    } else if (property.Preview) {
-        content = createElement(property.Preview,
-            {
-                propertyKey,
-                value,
-                property,
-                size,
-                height,
-                width,
-                // entity,
-                customProps: property.customProps
-            });
+    } else if (property.ui?.Preview) {
+        const ResolvedPreview = resolveComponentRef(property.ui.Preview);
+        if (ResolvedPreview) {
+            content = <Suspense fallback={null}>
+                {createElement(ResolvedPreview,
+                    {
+                        propertyKey,
+                        value,
+                        property,
+                        size,
+                        height,
+                        width,
+                        customProps: property.ui?.customProps
+                    })}
+            </Suspense>;
+        }
     } else if (value === undefined || value === null) {
         content = <EmptyValue/>;
     } else if (property.type === "string") {
@@ -81,20 +85,20 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
                     size={props.size}
                     fill={fill}
                     storagePathOrDownloadUrl={filePath}/>;
-            } else if (stringProperty.url) {
-                if (typeof stringProperty.url === "boolean")
+            } else if (stringProperty.ui?.url) {
+                if (typeof stringProperty.ui?.url === "boolean")
                     content =
                         <UrlComponentPreview size={props.size}
                             url={value}
                             fill={fill}/>;
-                else if (typeof stringProperty.url === "string")
+                else if (typeof stringProperty.ui?.url === "string")
                     content =
                         <UrlComponentPreview size={props.size}
                             url={value}
                             interactive={interactive}
                             fill={fill}
-                            previewType={stringProperty.url}/>;
-            } else if (stringProperty.markdown) {
+                            previewType={stringProperty.ui?.url}/>;
+            } else if (stringProperty.ui?.markdown) {
                 content = <Markdown source={value} size={"small"}/>;
             } else if (stringProperty.userSelect) {
                 content = <UserPreview
@@ -107,7 +111,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
                 if (typeof stringProperty.reference.path === "string") {
                     content = <ReferencePreview
                         disabled={!stringProperty.reference.path}
-                        previewProperties={stringProperty.reference.previewProperties}
+                        previewProperties={(stringProperty as any).reference?.previewProperties}
                         includeId={stringProperty.reference.includeId}
                         includeEntityLink={stringProperty.reference.includeEntityLink}
                         size={props.size}
@@ -204,7 +208,7 @@ path: stringProperty.reference.path })}
             if (typeof value === "object" && "isEntityReference" in value && value.isEntityReference()) {
                 content = <ReferencePreview
                     disabled={!property.path}
-                    previewProperties={property.previewProperties}
+                    previewProperties={property.ui?.previewProperties}
                     includeId={property.includeId}
                     includeEntityLink={property.includeEntityLink}
                     size={props.size}
@@ -232,7 +236,7 @@ path: stringProperty.reference.path })}
                                 key={`preview_rel_${propertyKey}_${index}`}>
                                 <RelationPreview
                                     disabled={!property.relation}
-                                    previewProperties={property.previewProperties}
+                                    previewProperties={property.ui?.previewProperties}
                                     includeId={property.includeId}
                                     includeEntityLink={property.includeEntityLink}
                                     size={"small"}
@@ -249,7 +253,7 @@ path: stringProperty.reference.path })}
             if (relationValue) {
                 content = <RelationPreview
                     disabled={!property.relation}
-                    previewProperties={property.previewProperties}
+                    previewProperties={property.ui?.previewProperties}
                     includeId={property.includeId}
                     includeEntityLink={property.includeEntityLink}
                     size={props.size}

package/src/preview/components/StorageThumbnail.tsx

@@ -5,6 +5,7 @@ import { UrlComponentPreview } from "./UrlComponentPreview";
 import { ErrorView, useStorageSource } from "@rebasepro/core";
 import { DownloadConfig, FileType } from "@rebasepro/types";
 import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
+import { Skeleton } from "@rebasepro/ui";
 type StorageThumbnailProps = {
     storagePathOrDownloadUrl: string;
     storeUrl: boolean;
@@ -76,7 +77,9 @@ export function StorageThumbnailInternal({
             size={size}
             fill={fill}
             hint={storagePathOrDownloadUrl}/>
-        : renderSkeletonImageThumbnail(size);
+        : fill
+            ? <Skeleton className="w-full h-full"/>
+            : renderSkeletonImageThumbnail(size);
 }
 
 function getFiletype(input: string): FileType {

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -28,7 +28,7 @@ export function ArrayOfMapsPreview({
         throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
     }
     const values = value;
-    const previewProperties: string[] | undefined = mapProperty.previewProperties;
+    const previewProperties: string[] | undefined = (mapProperty.ui as any)?.previewProperties;
 
     if (!values) return null;
 

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -30,7 +30,7 @@ export function ArrayOfReferencesPreview({
                         key={`preview_array_ref_${propertyKey}_${index}`}>
                         <ReferencePreview
                             disabled={!ofProperty.path}
-                            previewProperties={ofProperty.previewProperties}
+                            previewProperties={ofProperty.ui?.previewProperties}
                             size={childSize}
                             reference={reference}
                             includeId={ofProperty.includeId}

package/src/preview/property_previews/ArrayOfRelationsPreview.tsx

@@ -36,7 +36,7 @@ export function ArrayOfRelationsPreview({
                             key={`preview_array_rel_${propertyKey}_${index}`}>
                             <RelationPreview
                                 disabled={!ofProperty.relation}
-                                previewProperties={ofProperty.previewProperties}
+                                previewProperties={ofProperty.ui?.previewProperties}
                                 size={"small"}
                                 relation={entityRelation}
                                 includeId={ofProperty.includeId}

package/src/preview/property_previews/SkeletonPropertyComponent.tsx

@@ -26,7 +26,7 @@ export function SkeletonPropertyComponent({
     let content: React.ReactNode | any;
     if (property.type === "string") {
         const stringProperty = property as StringProperty;
-        if (stringProperty.url) {
+        if (stringProperty.ui?.url) {
             content = renderUrlComponent(stringProperty, size);
         } else if (stringProperty.storage) {
             content = renderSkeletonImageThumbnail(size);
@@ -79,7 +79,7 @@ function renderMap<T extends Record<string, any>>(property: MapProperty, size: P
     if (size === "large") {
         mapPropertyKeys = Object.keys(property.properties);
     } else {
-        mapPropertyKeys = (property.previewProperties || Object.keys(property.properties)) as string[];
+        mapPropertyKeys = ((property.ui as any)?.previewProperties || Object.keys(property.properties)) as string[];
         if (size === "medium")
             mapPropertyKeys = mapPropertyKeys.slice(0, 3);
         else if (size === "small")
@@ -241,7 +241,7 @@ function renderReference() {
 
 function renderUrlComponent(property: StringProperty, size: PreviewSize = "large") {
 
-    if (typeof property.url === "boolean") {
+    if (typeof property.ui?.url === "boolean") {
         return <div style={{
             display: "flex"
         }}>

package/src/preview/property_previews/StringPropertyPreview.tsx

@@ -24,7 +24,7 @@ export function StringPropertyPreview({
             enumKey={enumKey}
             enumValues={property.enum}
             size={size}/>;
-    } else if (property.previewAsTag) {
+    } else if (property.ui?.previewAsTag) {
         const colorScheme = getColorSchemeForSeed(propertyKey ?? "");
         return (
             <ErrorBoundary>
@@ -34,11 +34,11 @@ export function StringPropertyPreview({
                     {value}
                 </Chip>
             </ErrorBoundary>);
-    } else if (property.url) {
+    } else if (property.ui?.url) {
         return (
             <UrlComponentPreview size={size}
                 url={value}
-                previewType={typeof property.url === "string" ? property.url as PreviewType : undefined}/>
+                previewType={typeof property.ui?.url === "string" ? property.ui?.url as PreviewType : undefined}/>
         );
     } else {
         if (!value) return <></>;