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

package/src/preview/components/StorageThumbnail.tsx

@@ -2,15 +2,19 @@ import React, { useEffect } from "react";
 
 import { renderSkeletonImageThumbnail } from "../property_previews/SkeletonPropertyComponent";
 import { UrlComponentPreview } from "./UrlComponentPreview";
-import { ErrorView, useStorageSource } from "@rebasepro/core";
+import { ErrorView, useStorageSource, useStorageSources } from "@rebasepro/app";
+import { resolveStorageSource } from "@rebasepro/common";
 import { DownloadConfig, FileType } from "@rebasepro/types";
 import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
+import { Skeleton } from "@rebasepro/ui";
 type StorageThumbnailProps = {
     storagePathOrDownloadUrl: string;
     storeUrl: boolean;
     size: PreviewSize;
     interactive?: boolean;
     fill?: boolean;
+    /** Key of the storage source backing this property (`StorageConfig.storageSource`). */
+    storageSourceKey?: string;
 };
 
 /**
@@ -23,7 +27,8 @@ function areEqual(prevProps: StorageThumbnailProps, nextProps: StorageThumbnailP
         prevProps.storagePathOrDownloadUrl === nextProps.storagePathOrDownloadUrl &&
         prevProps.storeUrl === nextProps.storeUrl &&
         prevProps.interactive === nextProps.interactive &&
-        prevProps.fill === nextProps.fill;
+        prevProps.fill === nextProps.fill &&
+        prevProps.storageSourceKey === nextProps.storageSourceKey;
 }
 
 const URL_CACHE: Record<string, DownloadConfig> = {};
@@ -33,13 +38,26 @@ export function StorageThumbnailInternal({
     interactive,
     storagePathOrDownloadUrl,
     size,
-    fill
+    fill,
+    storageSourceKey
 }: StorageThumbnailProps) {
 
     const [error, setError] = React.useState<Error | undefined>(undefined);
-    const storage = useStorageSource();
+    const defaultStorage = useStorageSource();
+    const storageSources = useStorageSources();
+    // Resolve the per-property backend so previews of `storeUrl: false`
+    // properties pointing at a named source hit the right backend.
+    const storage = resolveStorageSource({
+        sourceKey: storageSourceKey,
+        sources: storageSources.sources,
+        defaultSource: defaultStorage
+    });
 
-    const [downloadConfig, setDownloadConfig] = React.useState<DownloadConfig>(URL_CACHE[storagePathOrDownloadUrl]);
+    // Cache key is namespaced by source so the same path on two backends
+    // does not collide.
+    const cacheKey = `${storageSourceKey ?? ""}::${storagePathOrDownloadUrl}`;
+
+    const [downloadConfig, setDownloadConfig] = React.useState<DownloadConfig>(URL_CACHE[cacheKey]);
 
     useEffect(() => {
         if (!storagePathOrDownloadUrl)
@@ -49,13 +67,13 @@ export function StorageThumbnailInternal({
             .then(function (downloadConfig) {
                 if (!unmounted) {
                     setDownloadConfig(downloadConfig);
-                    URL_CACHE[storagePathOrDownloadUrl] = downloadConfig;
+                    URL_CACHE[cacheKey] = downloadConfig;
                 }
             }).catch(setError);
         return () => {
             unmounted = true;
         };
-    }, [storagePathOrDownloadUrl]);
+    }, [storagePathOrDownloadUrl, cacheKey]);
 
     if (!storagePathOrDownloadUrl) return null;
 
@@ -76,7 +94,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/components/UrlComponentPreview.tsx

@@ -3,11 +3,19 @@ import React, { useMemo } from "react";
 import { ImagePreview } from "./ImagePreview";
 import { PreviewType } from "@rebasepro/types";
 import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { cls, Tooltip, Typography } from "@rebasepro/ui";
-import { ExternalLinkIcon, FileTextIcon } from "lucide-react";
+import { cls, ExternalLinkIcon, FileTextIcon, Tooltip, Typography } from "@rebasepro/ui";
 import { EmptyValue } from "./EmptyValue";
 import { getThumbnailMeasure } from "../util";
 
+export function sanitizeUrl(url: string | undefined): string {
+    if (!url) return "about:blank";
+    const trimmed = url.trim();
+    if (/^(?:javascript|data|vbscript):/i.test(trimmed)) {
+        return "about:blank";
+    }
+    return trimmed;
+}
+
 /**
  * @group Preview components
  */
@@ -32,7 +40,7 @@ export function UrlComponentPreview({
         if (!url || !url.trim()) return <EmptyValue/>;
         return (
             <a className="flex gap-4 break-words items-center font-medium text-primary visited:text-primary dark:visited:text-primary dark:text-primary"
-                href={url}
+                href={sanitizeUrl(url)}
                 rel="noopener noreferrer"
                 onMouseDown={(e: React.MouseEvent) => {
                     e.preventDefault();
@@ -61,7 +69,7 @@ export function UrlComponentPreview({
         return (
             <Tooltip title={hint}>
                 <a
-                    href={url}
+                    href={sanitizeUrl(url)}
                     rel="noopener noreferrer"
                     target="_blank"
                     onClick={(e) => e.stopPropagation()}

package/src/preview/components/UserPreview.tsx

@@ -1,30 +1,21 @@
-
 import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
 import type { StringProperty } from "@rebasepro/types";
 import React from "react";
-import { useInternalUserManagementController } from "@rebasepro/core";
-import { UserDisplay } from "@rebasepro/core";
 import { EmptyValue } from "./EmptyValue";
 import { Typography } from "@rebasepro/ui";
-import { User } from "@rebasepro/types";
 
 /**
- * Preview component for displaying user information.
- * This is a simple wrapper around UserDisplay.
+ * Preview component for displaying a user reference value.
+ *
+ * Shows the raw user ID. Collection-based user management means
+ * user records are fetched through the standard data layer.
  *
  * @group Preview components
  */
 export function UserPreview({ value }: PropertyPreviewProps<StringProperty>) {
-    const getUser = useInternalUserManagementController<User>()?.getUser;
-
-    if (!value) {
+    if (typeof value !== "string" || !value) {
         return <EmptyValue/>;
     }
 
-    const user = getUser?.(value);
-    if (!user) {
-        return <Typography variant={"caption"} color={"secondary"}>User not found: {value}</Typography>;
-    }
-
-    return <UserDisplay user={user}/>;
+    return <Typography variant={"caption"} color={"secondary"}>{value}</Typography>;
 }

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -1,4 +1,4 @@
-import type { ArrayProperty, Property } from "@rebasepro/types";
+import type { ArrayProperty, MapProperty, Property } from "@rebasepro/types";
 import React from "react";
 import { ErrorBoundary } from "@rebasepro/ui";
 import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
@@ -25,10 +25,10 @@ export function ArrayOfMapsPreview({
     const mapProperty = property.of;
     const properties = mapProperty.properties;
     if (!properties) {
-        throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
+        throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property '${propertyKey}'${mapProperty.name ? ` ("${mapProperty.name}")` : ""}`);
     }
-    const values = value;
-    const previewProperties: string[] | undefined = mapProperty.previewProperties;
+    const values = value as Record<string, unknown>[];
+    const previewProperties: string[] | undefined = (mapProperty as MapProperty).previewProperties;
 
     if (!values) return null;
 
@@ -43,7 +43,7 @@ export function ArrayOfMapsPreview({
         <div className="table-auto text-xs">
             <div>
                 {values &&
-                    values.map((v: any, index: number) => {
+                    values.map((v, index: number) => {
                         return (
                             <div key={`table_${v}_${index}`}
                                 className="border-b last:border-b-0 py-2">

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -1,4 +1,4 @@
-import type { ArrayProperty, ReferenceProperty } from "@rebasepro/types";
+import type { ArrayProperty, ReferenceProperty, EntityReference } from "@rebasepro/types";
 import type { PropertyPreviewProps, PreviewSize } from "../../types/components/PropertyPreviewProps";
 import { ReferencePreview } from "../components/ReferencePreview";
 
@@ -23,14 +23,14 @@ export function ArrayOfReferencesPreview({
 
     return (
         <div className="flex flex-col w-full">
-            {value &&
-                value.map((reference: any, index: number) => {
+            {value ?
+                (value as EntityReference[]).map((reference, index: number) => {
                     const ofProperty = property.of as ReferenceProperty;
                     return <div className="mt-1 mb-1 w-full"
                         key={`preview_array_ref_${propertyKey}_${index}`}>
                         <ReferencePreview
                             disabled={!ofProperty.path}
-                            previewProperties={ofProperty.previewProperties}
+                            previewProperties={ofProperty.ui?.previewProperties}
                             size={childSize}
                             reference={reference}
                             includeId={ofProperty.includeId}
@@ -38,7 +38,7 @@ export function ArrayOfReferencesPreview({
                         />
                     </div>;
                 }
-                )}
+                ) : null}
         </div>
     );
 }

package/src/preview/property_previews/ArrayOfRelationsPreview.tsx

@@ -25,8 +25,8 @@ export function ArrayOfRelationsPreview({
 
     return (
         <div className="flex flex-col w-full gap-0.5">
-            {value &&
-                value.map((relation: unknown, index: number) => {
+            {value ?
+                (value as unknown[]).map((relation: unknown, index: number) => {
                     const entityRelation = normalizeToEntityRelation(relation);
 
                     if (!entityRelation) return null;
@@ -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}
@@ -44,7 +44,7 @@ export function ArrayOfRelationsPreview({
                             />
                         </div>
                     );
-                })}
+                }) : null}
         </div>
     );
 }

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -2,7 +2,7 @@ import type { ArrayProperty, Property } from "@rebasepro/types";
 import React from "react";
 
 import type { PropertyPreviewProps, PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { useAuthController, useCustomizationController } from "@rebasepro/core";
+import { useAuthController, useCustomizationController } from "@rebasepro/app";
 import { PropertyPreview } from "../PropertyPreview";
 import { ErrorBoundary } from "@rebasepro/ui";
 
@@ -34,8 +34,8 @@ export function ArrayOfStorageComponentsPreview({
     }
     return (
         <div className={"flex flex-wrap gap-2"}>
-            {value &&
-                value.map((v: any, index: number) =>
+            {value ?
+                (value as string[]).map((v, index: number) =>
                     <ErrorBoundary key={`preview_array_storage_${propertyKey}_${index}`}>
                         <PropertyPreview
                             propertyKey={propertyKey}
@@ -43,7 +43,7 @@ export function ArrayOfStorageComponentsPreview({
                             property={property.of as Property}
                             size={childSize}/>
                     </ErrorBoundary>
-                )}
+                ) : null}
         </div>
     );
 }

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

@@ -25,11 +25,12 @@ export function ArrayOfStringsPreview({
         return <div>{`Unexpected value: ${value}`}</div>;
     }
     const stringProperty = property.of as StringProperty;
+    const arrayValues = value as string[];
 
     return (
         <div className="flex flex-col gap-2">
-            {value &&
-                value.map((v: any, index: number) =>
+            {arrayValues &&
+                arrayValues.map((v, index: number) =>
                     <div key={`preview_array_strings_${propertyKey}_${index}`}>
                         <ErrorBoundary>
                             <StringPropertyPreview propertyKey={propertyKey}

package/src/preview/property_previews/ArrayOneOfPreview.tsx

@@ -1,7 +1,7 @@
 import type { ArrayProperty, Property } from "@rebasepro/types";
 import React from "react";
 import type { PropertyPreviewProps, PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { useAuthController, useCustomizationController } from "@rebasepro/core";
+import { useAuthController, useCustomizationController } from "@rebasepro/app";
 import { PropertyPreview } from "../PropertyPreview";
 import { cls, defaultBorderMixin } from "@rebasepro/ui";
 import { ErrorBoundary } from "@rebasepro/ui";
@@ -33,7 +33,7 @@ export function ArrayOneOfPreview({
         throw Error(`You need to specify an 'of' or 'oneOf' prop (or specify a custom field) in your array property ${propertyKey}`);
     }
 
-    const values = value;
+    const values = value as Record<string, unknown>[];
 
     if (!values) return null;
 
@@ -46,20 +46,18 @@ export function ArrayOneOfPreview({
     return (
         <div className={"flex flex-col"}>
             {values &&
-                values.map((value: any, index: number) => {
-                    const resolvedProperty = properties[value?.[typeField]];
-                    if (!value || !resolvedProperty) return null;
+                values.map((val, index: number) => {
+                    const resolvedProperty = properties[val?.[typeField] as string];
+                    if (!val || !resolvedProperty) return null;
                     return (
                         <React.Fragment
-                            key={"preview_array_" + value + "_" + index}>
+                            key={"preview_array_" + index}>
                             <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0 py-2")}>
                                 <ErrorBoundary>
                                     <PropertyPreview
                                         propertyKey={propertyKey}
-                                        // @ts-ignore
-                                        value={value[valueField]}
+                                        value={val[valueField]}
                                         // entity={entity}
-                                        // @ts-ignore
                                         property={resolvedProperty as Property}
                                         size={childSize}/>
                                 </ErrorBoundary>

package/src/preview/property_previews/ArrayPropertyEnumPreview.tsx

@@ -29,7 +29,7 @@ export function ArrayPropertyEnumPreview({
         )
 
     return <ArrayEnumPreview name={propertyKey}
-        value={value}
+        value={value as string[] | number[]}
         enumValues={enumValues}
         size={size}/>;
 }

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -2,7 +2,7 @@ import type { ArrayProperty, Property } from "@rebasepro/types";
 import React from "react";
 
 import type { PropertyPreviewProps, PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { useAuthController, useCustomizationController } from "@rebasepro/core";
+import { useAuthController, useCustomizationController } from "@rebasepro/app";
 import { PropertyPreview } from "../PropertyPreview";
 import { cls, defaultBorderMixin } from "@rebasepro/ui";
 import { ErrorBoundary } from "@rebasepro/ui";
@@ -34,7 +34,7 @@ export function ArrayPropertyPreview({
         authController
     });
 
-    const values = value;
+    const values = value as unknown[];
 
     if (!values) return null;
 
@@ -43,7 +43,7 @@ export function ArrayPropertyPreview({
     return (
         <div className="w-full flex flex-col gap-2">
             {values &&
-                values.map((value: any, index: number) => {
+                values.map((val, index: number) => {
                     if (!resolvedProperties) {
                         throw Error("Property resolvedProperties is undefined");
                     }
@@ -56,7 +56,7 @@ export function ArrayPropertyPreview({
                                 <ErrorBoundary>
                                     <PropertyPreview
                                         propertyKey={propertyKey}
-                                        value={value}
+                                        value={val}
                                         property={of}
                                         size={childSize}/>
                                 </ErrorBoundary>

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -30,6 +30,7 @@ export function MapPropertyPreview({
     }
 
     if (!value) return null;
+    const mapValue = value as Record<string, unknown>;
 
     const mapPropertyKeys: string[] = Object.keys(mapProperty.properties)
 
@@ -41,7 +42,7 @@ export function MapPropertyPreview({
                         <ErrorBoundary
                             key={"map_preview_" + mapProperty.name + key + index}>
                             <PropertyPreview propertyKey={key}
-                                value={(value)[key]}
+                                value={mapValue[key]}
                                 property={mapProperty.properties![key]}
                                 // entity={entity}
                                 size={size}/>
@@ -78,7 +79,7 @@ export function MapPropertyPreview({
                                         {!isArrayOrMap &&
                                             <PropertyPreview
                                                 propertyKey={key}
-                                                value={(value)[key]}
+                                                value={mapValue[key]}
                                                 property={childProperty}
                                                 // entity={entity}
                                                 size={size}/>}
@@ -90,7 +91,7 @@ export function MapPropertyPreview({
                                 <div className={cls(defaultBorderMixin, "border-l pl-4 ml-2 my-2")}>
                                     <PropertyPreview
                                         propertyKey={key}
-                                        value={(value)[key]}
+                                        value={mapValue[key]}
                                         property={childProperty}
                                         // entity={entity}
                                         size={size}/>

package/src/preview/property_previews/NumberPropertyPreview.tsx

@@ -14,16 +14,18 @@ export function NumberPropertyPreview({
     size
 }: PropertyPreviewProps<NumberProperty>): React.ReactElement {
 
+    const numValue = value as number;
+
     if (property.enum) {
-        const enumKey = value;
+        const enumKey = numValue;
         const enumValues = enumToObjectEntries(property.enum);
         if (!enumValues)
-            return <span className={size === "small" ? "text-sm" : ""}>{value}</span>;
+            return <span className={size === "small" ? "text-sm" : ""}>{numValue}</span>;
         return <EnumValuesChip
             enumKey={enumKey}
             enumValues={enumValues}
             size={size !== "medium" ? "small" : "medium"}/>;
     } else {
-        return <span className={size === "small" ? "text-sm" : ""}>{value}</span>;
+        return <span className={size === "small" ? "text-sm" : ""}>{numValue}</span>;
     }
 }

package/src/preview/property_previews/SkeletonPropertyComponent.tsx

@@ -2,7 +2,7 @@ import type { Properties } from "@rebasepro/types";
 import type { ArrayProperty, MapProperty, Property, StringProperty } from "@rebasepro/types";
 import { PreviewSize } from "../../types/components/PropertyPreviewProps";
 import React from "react";
-import { Skeleton } from "@rebasepro/ui";
+import { Skeleton, Table, TableBody, TableRow, TableCell, Typography } from "@rebasepro/ui";
 import { getThumbnailMeasure } from "../util";
 
 export interface SkeletonPropertyComponentProps {
@@ -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);
@@ -103,33 +103,32 @@ function renderMap<T extends Record<string, any>>(property: MapProperty, size: P
         );
 
     return (
-        <table className="table-auto">
-            <tbody>
+        <Table className="table-auto">
+            <TableBody>
                 {mapPropertyKeys &&
                     mapPropertyKeys.map((key, index) => {
                         return (
-                            <tr
-                                key={`map_preview_table__${index}`}
-                                className="border-b last:border-b-0">
-                                <th key={`table-cell-title--${key}`}
+                            <TableRow
+                                key={`map_preview_table__${index}`}>
+                                <TableCell key={`table-cell-title--${key}`}
                                     className="align-top"
                                     style={{ width: "30%" }}>
-                                    <p className="text-xs text-secondary">
+                                    <Typography variant="caption" color="secondary">
                                         {property.properties![key].name}
-                                    </p>
-                                </th>
-                                <th key={`table-cell-${key}`}
+                                    </Typography>
+                                </TableCell>
+                                <TableCell key={`table-cell-${key}`}
                                     style={{ width: "70%" }}>
                                     {property.properties && property.properties[key] &&
                                         <SkeletonPropertyComponent
                                             property={property.properties[key]}
                                             size={"medium"}/>}
-                                </th>
-                            </tr>
+                                </TableCell>
+                            </TableRow>
                         );
                     })}
-            </tbody>
-        </table>
+            </TableBody>
+        </Table>
     );
 }
 
@@ -142,28 +141,28 @@ function renderArrayOfMaps(properties: Properties, size: PreviewSize, previewPro
     }
 
     return (
-        <table className="table-auto">
-            <tbody>
+        <Table className="table-auto">
+            <TableBody>
                 {
                     [0, 1, 2].map((value, index) => {
                         return (
-                            <tr key={`table_${value}_${index}`}>
+                            <TableRow key={`table_${value}_${index}`}>
                                 {tableProperties && tableProperties.map(
                                     (key) => (
-                                        <th
+                                        <TableCell
                                             key={`table-cell-${key}`}
                                         >
                                             <SkeletonPropertyComponent
                                                 property={(properties)[key]}
                                                 size={"medium"}/>
-                                        </th>
+                                        </TableCell>
                                     )
                                 )}
-                            </tr>
+                            </TableRow>
                         );
                     })}
-            </tbody>
-        </table>
+            </TableBody>
+        </Table>
     );
 }
 
@@ -241,7 +240,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

@@ -18,32 +18,34 @@ export function StringPropertyPreview({
     size
 }: PropertyPreviewProps<StringProperty>): React.ReactElement {
 
+    const strValue = value as string;
+
     if (property.enum) {
-        const enumKey = value;
+        const enumKey = strValue;
         return <EnumValuesChip
             enumKey={enumKey}
             enumValues={property.enum}
             size={size}/>;
-    } else if (property.previewAsTag) {
+    } else if (property.ui?.previewAsTag) {
         const colorScheme = getColorSchemeForSeed(propertyKey ?? "");
         return (
             <ErrorBoundary>
                 <Chip
                     colorScheme={colorScheme}
                     size={size}>
-                    {value}
+                    {strValue}
                 </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}/>
+                url={strValue}
+                previewType={typeof property.ui?.url === "string" ? property.ui?.url as PreviewType : undefined}/>
         );
     } else {
-        if (!value) return <></>;
-        const lines = value.split("\n");
-        return value && value.includes("\n")
+        if (!strValue) return <></>;
+        const lines = strValue.split("\n");
+        return strValue && strValue.includes("\n")
             ? <div className={cls("overflow-x-scroll overflow-hidden", size === "small" ? "text-sm" : "")}>
                 {lines.map((str: any, index: number) =>
                     <React.Fragment key={`string_preview_${index}`}>
@@ -52,8 +54,8 @@ export function StringPropertyPreview({
                     </React.Fragment>)}
             </div>
             : (size === "small"
-                ? <span className={"text-sm"}>{value}</span>
-                : <>{value}</>
+                ? <span className={"text-sm"}>{strValue}</span>
+                : <>{strValue}</>
             );
     }
 }

package/src/routes/CustomViewRoute.tsx

@@ -1,8 +1,6 @@
+import React, { useEffect, useRef } from "react";
 import type { AppView } from "@rebasepro/types";
-;
-import { useEffect } from "react";
-import { useBreadcrumbsController } from "../index";
-import { useUrlController } from "../index";
+import { useBreadcrumbsController, useUrlController } from "../index";
 
 export function CustomViewRoute({ view }: {
     view: AppView
@@ -11,8 +9,14 @@ export function CustomViewRoute({ view }: {
     const breadcrumbs = useBreadcrumbsController();
     const urlController = useUrlController();
 
+    // Use a ref to avoid breadcrumbs identity in the dep array —
+    // breadcrumbs.set() creates a new context value each call, which would
+    // re-trigger this effect and cause an infinite render loop.
+    const breadcrumbsRef = useRef(breadcrumbs);
+    breadcrumbsRef.current = breadcrumbs;
+
     useEffect(() => {
-        breadcrumbs.set({
+        breadcrumbsRef.current.set({
             breadcrumbs: [{
                 title: view.name,
                 url: urlController.buildAppUrlPath(view.slug)
@@ -20,5 +24,9 @@ export function CustomViewRoute({ view }: {
         });
     }, [view.slug, urlController]);
 
-    return view.view;
+    if (typeof view.view === 'function') {
+        const ViewComponent = view.view;
+        return <ViewComponent />;
+    }
+    return <>{view.view}</>;
 }