@firecms/core 3.4.0-canary.8635253 → 3.4.0-canary.d20cc85

package/src/hooks/useValidateAuthenticator.tsx

@@ -74,6 +74,10 @@ export function useValidateAuthenticator<USER extends User = any>
 
         if (authenticator instanceof Function && delegateUser && !equal(checkedUserRef.current?.uid, delegateUser.uid)) {
             setAuthLoading(true);
+            // Reset the error of any previous authentication attempt. Otherwise, a
+            // rejected user would keep `canAccessMainView` to false for every user
+            // logging in afterwards, locking them out of the CMS until a page reload.
+            setNotAllowedError(false);
             try {
                 const allowed = await authenticator({
                     user: delegateUser,

package/src/internal/useBuildDataSource.ts

@@ -55,6 +55,7 @@ export function useBuildDataSource({
          */
         fetchCollection: useCallback(<M extends Record<string, any>>({
             path,
+            pathSegments,
             collection,
             filter,
             limit,
@@ -67,6 +68,7 @@ export function useBuildDataSource({
             const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
             return usedDelegate.fetchCollection<M>({
                 path,
+                pathSegments,
                 filter,
                 limit,
                 startAfter,
@@ -97,6 +99,7 @@ export function useBuildDataSource({
             ? useCallback(<M extends Record<string, any>>(
                 {
                     path,
+                    pathSegments,
                     collection: collectionProp,
                     filter,
                     limit,
@@ -117,6 +120,7 @@ export function useBuildDataSource({
 
                 return usedDelegate.listenCollection<M>({
                     path,
+                    pathSegments,
                     filter,
                     limit,
                     startAfter,
@@ -139,6 +143,7 @@ export function useBuildDataSource({
          */
         fetchEntity: useCallback(<M extends Record<string, any>>({
             path,
+            pathSegments,
             entityId,
             collection
         }: FetchEntityProps<M>
@@ -146,6 +151,7 @@ export function useBuildDataSource({
             const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
             return usedDelegate.fetchEntity({
                 path,
+                pathSegments,
                 entityId,
                 collection
             });
@@ -165,6 +171,7 @@ export function useBuildDataSource({
             ? useCallback(<M extends Record<string, any>>(
                 {
                     path,
+                    pathSegments,
                     entityId,
                     collection,
                     onUpdate,
@@ -177,6 +184,7 @@ export function useBuildDataSource({
 
                 return usedDelegate.listenEntity<M>({
                     path,
+                    pathSegments,
                     entityId,
                     onUpdate,
                     onError,
@@ -198,6 +206,7 @@ export function useBuildDataSource({
         saveEntity: useCallback(async <M extends Record<string, any>>(
             {
                 path,
+                pathSegments,
                 entityId,
                 values,
                 collection: collectionProp,
@@ -244,6 +253,7 @@ export function useBuildDataSource({
                         try {
                             const entities = await usedDelegate.fetchCollection({
                                 path,
+                                pathSegments,
                                 orderBy: orderProperty,
                                 order: "asc",
                                 limit: 1,
@@ -270,6 +280,7 @@ export function useBuildDataSource({
 
             return usedDelegate.saveEntity({
                 path,
+                pathSegments,
                 collection,
                 entityId,
                 values: finalValues,
@@ -292,12 +303,15 @@ export function useBuildDataSource({
         deleteEntity: useCallback(<M extends Record<string, any>>(
             {
                 entity,
+                pathSegments,
                 collection
             }: DeleteEntityProps<M>
         ): Promise<void> => {
             const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
             return usedDelegate.deleteEntity({
                 entity,
+                // Falls back to what the entity carries from the fetch that produced it.
+                pathSegments: pathSegments ?? entity.pathSegments,
                 collection
             });
         }, [delegate.deleteEntity]),
@@ -317,25 +331,28 @@ export function useBuildDataSource({
             name: string,
             value: any,
             entityId?: string,
-            collection?: EntityCollection
+            collection?: EntityCollection,
+            pathSegments?: string[]
         ): Promise<boolean> => {
             const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
-            return usedDelegate.checkUniqueField(path, name, value, entityId, collection);
+            return usedDelegate.checkUniqueField(path, name, value, entityId, collection, pathSegments);
         }, [delegate.checkUniqueField]),
 
-        generateEntityId: useCallback((path: string, collection: EntityCollection): string => {
+        generateEntityId: useCallback((path: string, collection: EntityCollection, pathSegments?: string[]): string => {
             const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
-            return usedDelegate.generateEntityId(path, collection);
+            return usedDelegate.generateEntityId(path, collection, pathSegments);
         }, [delegate.generateEntityId]),
 
         countEntities: delegate.countEntities ? async ({
             path,
+            pathSegments,
             collection,
             filter,
             order,
             orderBy
         }: {
             path: string,
+            pathSegments?: string[],
             collection: EntityCollection<any>,
             filter?: FilterValues<Extract<keyof any, string>>,
             orderBy?: string,
@@ -344,6 +361,7 @@ export function useBuildDataSource({
             const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
             return usedDelegate.countEntities!({
                 path,
+                pathSegments,
                 filter,
                 orderBy,
                 order,
@@ -353,11 +371,13 @@ export function useBuildDataSource({
 
         isFilterCombinationValid: useCallback(({
             path,
+            pathSegments,
             databaseId,
             filterValues,
             sortBy
         }: {
             path: string,
+            pathSegments?: string[],
             databaseId?: string,
             filterValues: FilterValues<any>,
             sortBy?: [string, "asc" | "desc"]
@@ -367,6 +387,7 @@ export function useBuildDataSource({
             return delegate.isFilterCombinationValid(
                 {
                     path,
+                    pathSegments,
                     databaseId,
                     filterValues,
                     sortBy

package/src/internal/useBuildSideEntityController.tsx

@@ -224,12 +224,14 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
     let sidePanel: EntitySidePanelProps<any> | undefined = undefined;
     let lastCollectionPath = "";
     let lastCollectionId: string | undefined = undefined;
+    let lastCollectionSegments: string[] | undefined = undefined;
     for (let i = 0; i < navigationViewsForPath.length; i++) {
         const navigationEntry = navigationViewsForPath[i];
 
         if (navigationEntry.type === "collection") {
             lastCollectionPath = navigationEntry.path;
             lastCollectionId = navigationEntry.collection.id;
+            lastCollectionSegments = navigationEntry.pathSegments;
         }
 
         const previousEntry = navigationViewsForPath[i - 1];
@@ -237,6 +239,7 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
             sidePanel = {
                 path: navigationEntry.path,
                 fullIdPath: navigationEntry.fullIdPath,
+                pathSegments: navigationEntry.pathSegments,
                 entityId: navigationEntry.entityId,
                 copy: false,
                 width: navigationEntry.parentCollection?.sideDialogWidth
@@ -259,6 +262,9 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
         sidePanel = {
             path: lastCollectionPath,
             fullIdPath: lastCollectionId,
+            // A new entity still needs unambiguous segments: it may be created inside a
+            // subcollection whose parent id contains "/".
+            pathSegments: lastCollectionSegments,
             copy: false
         }
     }

package/src/locales/de.ts

@@ -389,6 +389,7 @@ export const de: FireCMSTranslations = {
     download: "Herunterladen",
     large_number_of_documents: "Diese Sammlung hat eine große Anzahl von Dokumenten ({{count}}).",
     include_undefined_values: "Undefinierte Werte einschließen",
+    export_apply_filter_sort: "Nur Ergebnisse exportieren, die dem aktuellen Filter/der aktuellen Sortierung entsprechen",
     submit: "Einreichen",
 
     no_filterable_properties: "Keine filterbaren Eigenschaften verfügbar",
@@ -586,6 +587,10 @@ export const de: FireCMSTranslations = {
     order_property_not_found: "Eigenschaft \"{{property}}\" existiert nicht oder ist keine Zahlen-Eigenschaft. Bitte wählen Sie eine gültige Eigenschaft oder löschen Sie die Auswahl.",
     no_number_properties: "Keine Zahlen-Eigenschaften gefunden. Fügen Sie eine Zahlen-Eigenschaft hinzu, um die Sortierung zu aktivieren.",
     order_property_description: "Wählen Sie eine Zahlen-Eigenschaft, um die Reihenfolge der Elemente beizubehalten",
+    image_property: "Bild-Eigenschaft",
+    image_property_not_found: "Eigenschaft \"{{property}}\" existiert nicht oder ist keine Bild-Eigenschaft. Bitte wählen Sie eine gültige Eigenschaft oder löschen Sie die Auswahl.",
+    no_image_properties: "Keine Bild-Eigenschaften gefunden. Fügen Sie eine Speicher- oder Bild-URL-Eigenschaft hinzu, um sie als Vorschaubild zu verwenden.",
+    image_property_description: "Wählen Sie die Eigenschaft, die als Vorschaubild in den Ansichten Karten und Kanban verwendet wird. Wenn nicht festgelegt, wird automatisch die erste passende Bild-Eigenschaft verwendet.",
     display_settings: "Anzeigeeinstellungen",
     default_row_size: "Standard-Zeilengröße",
     side_dialog_width: "Seitendialog-Breite",

package/src/locales/en.ts

@@ -397,6 +397,7 @@ export const en: FireCMSTranslations = {
     download: "Download",
     large_number_of_documents: "This collections has a large number of documents ({{count}}).",
     include_undefined_values: "Include undefined values",
+    export_apply_filter_sort: "Only export results matching the current filter/sort",
     submit: "Submit",
 
     no_filterable_properties: "No filterable properties available",
@@ -598,6 +599,10 @@ export const en: FireCMSTranslations = {
     order_property_not_found: "Property \"{{property}}\" does not exist or is not a number property. Please select a valid property or clear the selection.",
     no_number_properties: "No number properties found. Add a number property to enable ordering.",
     order_property_description: "Select a number property to persist the order of items",
+    image_property: "Image Property",
+    image_property_not_found: "Property \"{{property}}\" does not exist or is not an image property. Please select a valid property or clear the selection.",
+    no_image_properties: "No image properties found. Add a storage or URL image property to use as a thumbnail.",
+    image_property_description: "Select the property used as the thumbnail image in Cards and Kanban view modes. If not set, the first matching image property will be used automatically.",
     display_settings: "Display settings",
     default_row_size: "Default row size",
     side_dialog_width: "Side dialog width",

package/src/locales/es.ts

@@ -397,6 +397,7 @@ export const es: FireCMSTranslations = {
     download: "Descargar",
     large_number_of_documents: "Esta colección posee un gran número de documentos ({{count}}).",
     include_undefined_values: "Incluir valores omitidos (undefined)",
+    export_apply_filter_sort: "Exportar solo los resultados que coinciden con el filtro/orden actual",
     submit: "Enviar",
 
     no_filterable_properties: "No hay propiedades filtrables disponibles",
@@ -598,6 +599,10 @@ export const es: FireCMSTranslations = {
     order_property_not_found: "La propiedad \"{{property}}\" no existe o no es una propiedad numérica. Selecciona una propiedad válida o borra la selección.",
     no_number_properties: "No se encontraron propiedades numéricas. Agrega una propiedad numérica para habilitar el ordenamiento.",
     order_property_description: "Selecciona una propiedad numérica para mantener el orden de los elementos",
+    image_property: "Propiedad de imagen",
+    image_property_not_found: "La propiedad \"{{property}}\" no existe o no es una propiedad de imagen. Selecciona una propiedad válida o borra la selección.",
+    no_image_properties: "No se encontraron propiedades de imagen. Agrega una propiedad de almacenamiento o URL de imagen para usarla como miniatura.",
+    image_property_description: "Selecciona la propiedad usada como miniatura en las vistas de Tarjetas y Kanban. Si no se establece, se usará automáticamente la primera propiedad de imagen que coincida.",
     display_settings: "Configuración de visualización",
     default_row_size: "Tamaño de fila predeterminado",
     side_dialog_width: "Ancho del diálogo lateral",

package/src/locales/fr.ts

@@ -389,6 +389,7 @@ export const fr: FireCMSTranslations = {
     download: "Télécharger",
     large_number_of_documents: "Cette collection contient un grand nombre de documents ({{count}}).",
     include_undefined_values: "Inclure les valeurs non définies",
+    export_apply_filter_sort: "N'exporter que les résultats correspondant au filtre/tri actuel",
     submit: "Soumettre",
 
     no_filterable_properties: "Aucune propriété filtrable disponible",
@@ -586,6 +587,10 @@ export const fr: FireCMSTranslations = {
     order_property_not_found: "La propriété \"{{property}}\" n'existe pas ou n'est pas une propriété numérique. Veuillez sélectionner une propriété valide ou effacer la sélection.",
     no_number_properties: "Aucune propriété numérique trouvée. Ajoutez une propriété numérique pour activer le tri.",
     order_property_description: "Sélectionnez une propriété numérique pour conserver l'ordre des éléments",
+    image_property: "Propriété d'image",
+    image_property_not_found: "La propriété \"{{property}}\" n'existe pas ou n'est pas une propriété d'image. Veuillez sélectionner une propriété valide ou effacer la sélection.",
+    no_image_properties: "Aucune propriété d'image trouvée. Ajoutez une propriété de stockage ou d'URL d'image à utiliser comme miniature.",
+    image_property_description: "Sélectionnez la propriété utilisée comme miniature dans les vues Cartes et Kanban. Si elle n'est pas définie, la première propriété d'image correspondante sera utilisée automatiquement.",
     display_settings: "Paramètres d'affichage",
     default_row_size: "Taille de ligne par défaut",
     side_dialog_width: "Largeur du dialogue latéral",

package/src/locales/hi.ts

@@ -389,6 +389,7 @@ export const hi: FireCMSTranslations = {
     download: "डाउनलोड",
     large_number_of_documents: "इस संग्रह में बड़ी संख्या में दस्तावेज़ हैं ({{count}})।",
     include_undefined_values: "अपरिभाषित (undefined) मान शामिल करें",
+    export_apply_filter_sort: "केवल वर्तमान फ़िल्टर/सॉर्ट से मेल खाने वाले परिणाम निर्यात करें",
     submit: "सबमिट करें",
 
     no_filterable_properties: "कोई फ़िल्टर करने योग्य गुण उपलब्ध नहीं हैं",
@@ -586,6 +587,10 @@ export const hi: FireCMSTranslations = {
     order_property_not_found: "प्रॉपर्टी \"{{property}}\" मौजूद नहीं है या एक संख्या प्रॉपर्टी नहीं है। कृपया एक वैध प्रॉपर्टी चुनें या चयन साफ़ करें।",
     no_number_properties: "कोई संख्या प्रॉपर्टी नहीं मिली। क्रम सक्षम करने के लिए एक संख्या प्रॉपर्टी जोड़ें।",
     order_property_description: "आइटम का क्रम बनाए रखने के लिए एक संख्या प्रॉपर्टी चुनें",
+    image_property: "इमेज प्रॉपर्टी",
+    image_property_not_found: "प्रॉपर्टी \"{{property}}\" मौजूद नहीं है या एक इमेज प्रॉपर्टी नहीं है। कृपया एक वैध प्रॉपर्टी चुनें या चयन साफ़ करें।",
+    no_image_properties: "कोई इमेज प्रॉपर्टी नहीं मिली। थंबनेल के रूप में उपयोग करने के लिए एक स्टोरेज या URL इमेज प्रॉपर्टी जोड़ें।",
+    image_property_description: "कार्ड्स और कानबन व्यू मोड में थंबनेल इमेज के रूप में उपयोग की जाने वाली प्रॉपर्टी चुनें। यदि सेट नहीं किया गया है, तो पहली मिलान वाली इमेज प्रॉपर्टी स्वचालित रूप से उपयोग की जाएगी।",
     display_settings: "प्रदर्शन सेटिंग्स",
     default_row_size: "डिफ़ॉल्ट पंक्ति आकार",
     side_dialog_width: "साइड डायलॉग चौड़ाई",

package/src/locales/it.ts

@@ -389,6 +389,7 @@ export const it: FireCMSTranslations = {
     download: "Scarica",
     large_number_of_documents: "Questa collezione contiene un numero elevato di documenti ({{count}})",
     include_undefined_values: "Includi valori non definiti",
+    export_apply_filter_sort: "Esporta solo i risultati che corrispondono al filtro/ordinamento attuale",
     submit: "Invia",
 
     no_filterable_properties: "Nessuna proprietà filtrabile disponibile",
@@ -586,6 +587,10 @@ export const it: FireCMSTranslations = {
     order_property_not_found: "La proprietà \"{{property}}\" non esiste o non è una proprietà numerica. Seleziona una proprietà valida o cancella la selezione.",
     no_number_properties: "Nessuna proprietà numerica trovata. Aggiungi una proprietà numerica per abilitare l'ordinamento.",
     order_property_description: "Seleziona una proprietà numerica per mantenere l'ordine degli elementi",
+    image_property: "Proprietà immagine",
+    image_property_not_found: "La proprietà \"{{property}}\" non esiste o non è una proprietà immagine. Seleziona una proprietà valida o cancella la selezione.",
+    no_image_properties: "Nessuna proprietà immagine trovata. Aggiungi una proprietà di archiviazione o URL immagine da usare come miniatura.",
+    image_property_description: "Seleziona la proprietà utilizzata come miniatura nelle viste Schede e Kanban. Se non impostata, verrà utilizzata automaticamente la prima proprietà immagine corrispondente.",
     display_settings: "Impostazioni di visualizzazione",
     default_row_size: "Dimensione riga predefinita",
     side_dialog_width: "Larghezza del dialogo laterale",

package/src/locales/pl.ts

@@ -389,6 +389,7 @@ export const pl: FireCMSTranslations = {
     download: "Pobierz",
     large_number_of_documents: "Ta kolekcja zawiera dużą liczbę dokumentów ({{count}}).",
     include_undefined_values: "Uwzględnij niezdefiniowane wartości",
+    export_apply_filter_sort: "Eksportuj tylko wyniki zgodne z aktualnym filtrem/sortowaniem",
     submit: "Wyślij",
 
     no_filterable_properties: "Brak dostępnych właściwości do filtrowania",
@@ -590,6 +591,10 @@ export const pl: FireCMSTranslations = {
     order_property_not_found: "Właściwość „{{property}}” nie istnieje lub nie jest właściwością liczbową. Wybierz prawidłową właściwość lub wyczyść wybór.",
     no_number_properties: "Nie znaleziono właściwości liczbowych. Dodaj właściwość liczbową, aby włączyć sortowanie.",
     order_property_description: "Wybierz właściwość liczbową, aby zachować kolejność elementów",
+    image_property: "Właściwość obrazu",
+    image_property_not_found: "Właściwość „{{property}}” nie istnieje lub nie jest właściwością obrazu. Wybierz prawidłową właściwość lub wyczyść wybór.",
+    no_image_properties: "Nie znaleziono właściwości obrazu. Dodaj właściwość przechowywania lub adresu URL obrazu, aby użyć jej jako miniatury.",
+    image_property_description: "Wybierz właściwość używaną jako miniatura w widokach Karty i Kanban. Jeśli nie zostanie ustawiona, automatycznie zostanie użyta pierwsza pasująca właściwość obrazu.",
     display_settings: "Ustawienia wyświetlania",
     default_row_size: "Domyślny rozmiar wiersza",
     side_dialog_width: "Szerokość okna bocznego",

package/src/locales/pt.ts

@@ -394,6 +394,7 @@ export const pt: FireCMSTranslations = {
     download: "Descarregar",
     large_number_of_documents: "Esta coleção tem um grande número de documentos ({{count}}).",
     include_undefined_values: "Incluir valores indefinidos",
+    export_apply_filter_sort: "Exportar apenas os resultados que correspondem ao filtro/ordenação atual",
     submit: "Submeter",
 
     no_filterable_properties: "Não há propriedades filtráveis disponíveis",
@@ -595,6 +596,10 @@ export const pt: FireCMSTranslations = {
     order_property_not_found: "A propriedade \"{{property}}\" não existe ou não é uma propriedade numérica. Selecione uma propriedade válida ou limpe a seleção.",
     no_number_properties: "Nenhuma propriedade numérica encontrada. Adicione uma propriedade numérica para habilitar a ordenação.",
     order_property_description: "Selecione uma propriedade numérica para manter a ordem dos itens",
+    image_property: "Propriedade de imagem",
+    image_property_not_found: "A propriedade \"{{property}}\" não existe ou não é uma propriedade de imagem. Selecione uma propriedade válida ou limpe a seleção.",
+    no_image_properties: "Nenhuma propriedade de imagem encontrada. Adicione uma propriedade de armazenamento ou URL de imagem para usar como miniatura.",
+    image_property_description: "Selecione a propriedade usada como miniatura nas visualizações de Cartões e Kanban. Se não for definida, a primeira propriedade de imagem correspondente será usada automaticamente.",
     display_settings: "Configurações de exibição",
     default_row_size: "Tamanho de linha padrão",
     side_dialog_width: "Largura do diálogo lateral",

package/src/preview/components/StorageThumbnail.tsx

@@ -6,6 +6,7 @@ import { useStorageSource } from "../../hooks";
 import { DownloadConfig, FileType } from "../../types";
 import { PreviewSize } from "../PropertyPreviewProps";
 import { ErrorView } from "../../components";
+import { getPreviewTypeFromUrl, isAbsoluteHttpUrl } from "../../util/urls";
 
 type StorageThumbnailProps = {
     storagePathOrDownloadUrl: string;
@@ -41,10 +42,20 @@ export function StorageThumbnailInternal({
     const [error, setError] = React.useState<Error | undefined>(undefined);
     const storage = useStorageSource();
 
+    /**
+     * The saved value may already be a resolved download URL instead of a
+     * storage path: either because the property is configured with
+     * `storeUrl: true`, or because the value was written directly in the
+     * datasource pointing to an externally hosted file. Such values can be
+     * previewed as they are, and must not be handed over to the storage source,
+     * which can only resolve paths of its own bucket.
+     */
+    const valueIsUrl = storeUrl || isAbsoluteHttpUrl(storagePathOrDownloadUrl);
+
     const [downloadConfig, setDownloadConfig] = React.useState<DownloadConfig>(URL_CACHE[storagePathOrDownloadUrl]);
 
     useEffect(() => {
-        if (!storagePathOrDownloadUrl)
+        if (!storagePathOrDownloadUrl || valueIsUrl)
             return;
         let unmounted = false;
         storage.getDownloadURL(storagePathOrDownloadUrl)
@@ -57,10 +68,21 @@ export function StorageThumbnailInternal({
         return () => {
             unmounted = true;
         };
-    }, [storagePathOrDownloadUrl]);
+    }, [storagePathOrDownloadUrl, valueIsUrl]);
 
     if (!storagePathOrDownloadUrl) return null;
 
+    if (valueIsUrl) {
+        // There is no storage metadata for a value that is already a URL, so the
+        // preview type is inferred from its file extension when possible.
+        return <UrlComponentPreview previewType={getPreviewTypeFromUrl(storagePathOrDownloadUrl) ?? "file"}
+            url={storagePathOrDownloadUrl}
+            interactive={interactive}
+            size={size}
+            fill={fill}
+            hint={storagePathOrDownloadUrl} />;
+    }
+
     const filetype = downloadConfig?.metadata ? getFiletype(downloadConfig?.metadata.contentType) : undefined;
     const previewType = filetype?.startsWith("image")
         ? "image"

package/src/routes/FireCMSRoute.tsx

@@ -99,6 +99,7 @@ export function FireCMSRoute() {
                 isSubCollection={false}
                 parentCollectionIds={[]}
                 fullPath={collection.path}
+                pathSegments={navigationEntries[0].pathSegments}
                 fullIdPath={collection.id}
                 updateUrl={true}
                 {...collection}
@@ -123,6 +124,7 @@ export function FireCMSRoute() {
                     isSubCollection={false}
                     parentCollectionIds={[]}
                     fullPath={collection.path}
+                    pathSegments={firstEntry.pathSegments}
                     updateUrl={true}
                     {...collection}
                     Actions={toArray(collection.Actions)} />
@@ -255,6 +257,7 @@ function EntityFullScreenRoute({
                 key={collection.id + "_" + (isNew ? "new" : (isCopy ? entityId + "_copy" : entityId))}
                 entityId={isNew ? undefined : entityId}
                 fullIdPath={fullIdPath}
+                pathSegments={isNew ? lastCollectionEntry!.pathSegments : lastEntityEntry!.pathSegments}
                 collection={collection}
                 layout={"full_screen"}
                 path={collectionPath}

package/src/types/collections.ts

@@ -101,6 +101,14 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      */
     titleProperty?: keyof M;
 
+    /**
+     * Property used as the image thumbnail in Cards and Kanban view modes.
+     * Must reference a storage/image property (or an array of them), or a
+     * string property with `url: "image"`.
+     * If not specified, the first matching image property will be used.
+     */
+    imageProperty?: keyof M;
+
     /**
      * When editing an entity, you can choose to open the entity in a side dialog
      * or in a full screen dialog. Defaults to `full_screen`.

package/src/types/datasource.ts

@@ -8,6 +8,20 @@ import { FireCMSContext } from "./firecms_context";
  */
 export interface FetchEntityProps<M extends Record<string, any> = any> {
     path: string;
+    /**
+     * The path split at its real segment boundaries, e.g.
+     * `["nodes", "node/42", "edges"]`.
+     *
+     * `path` is a single flattened string, so a parent entity id containing "/" cannot be
+     * recovered from it — `"nodes/node/42/edges"` is indistinguishable from a three-level
+     * nesting. This is the unambiguous form: one array element per segment, entity ids
+     * kept whole however many slashes they contain.
+     *
+     * For any backend whose ids cannot contain "/" this is exactly `path.split("/")`, so
+     * delegates that do not care can keep using `path`. Delegates that do should prefer
+     * `pathSegments ?? path.split("/")`.
+     */
+    pathSegments?: string[];
     entityId: string;
     databaseId?: string;
     collection?: EntityCollection<M, any>
@@ -28,6 +42,20 @@ export type ListenEntityProps<M extends Record<string, any> = any> =
  */
 export interface FetchCollectionProps<M extends Record<string, any> = any> {
     path: string;
+    /**
+     * The path split at its real segment boundaries, e.g.
+     * `["nodes", "node/42", "edges"]`.
+     *
+     * `path` is a single flattened string, so a parent entity id containing "/" cannot be
+     * recovered from it — `"nodes/node/42/edges"` is indistinguishable from a three-level
+     * nesting. This is the unambiguous form: one array element per segment, entity ids
+     * kept whole however many slashes they contain.
+     *
+     * For any backend whose ids cannot contain "/" this is exactly `path.split("/")`, so
+     * delegates that do not care can keep using `path`. Delegates that do should prefer
+     * `pathSegments ?? path.split("/")`.
+     */
+    pathSegments?: string[];
     collection?: EntityCollection<M> | ResolvedEntityCollection<M>;
     filter?: FilterValues<Extract<keyof M, string>>,
     limit?: number;
@@ -52,6 +80,20 @@ export type ListenCollectionProps<M extends Record<string, any> = any> =
  */
 export interface SaveEntityProps<M extends Record<string, any> = any> {
     path: string;
+    /**
+     * The path split at its real segment boundaries, e.g.
+     * `["nodes", "node/42", "edges"]`.
+     *
+     * `path` is a single flattened string, so a parent entity id containing "/" cannot be
+     * recovered from it — `"nodes/node/42/edges"` is indistinguishable from a three-level
+     * nesting. This is the unambiguous form: one array element per segment, entity ids
+     * kept whole however many slashes they contain.
+     *
+     * For any backend whose ids cannot contain "/" this is exactly `path.split("/")`, so
+     * delegates that do not care can keep using `path`. Delegates that do should prefer
+     * `pathSegments ?? path.split("/")`.
+     */
+    pathSegments?: string[];
     values: Partial<EntityValues<M>>;
     entityId?: string; // can be empty for new entities
     previousValues?: Partial<EntityValues<M>>;
@@ -64,6 +106,11 @@ export interface SaveEntityProps<M extends Record<string, any> = any> {
  */
 export interface DeleteEntityProps<M extends Record<string, any> = any> {
     entity: Entity<M>;
+    /**
+     * `entity.path` split at its real segment boundaries, when the caller knows them.
+     * Never derived from `entity.path` — see `pathSegments` on FetchCollectionProps.
+     */
+    pathSegments?: string[];
     collection?: EntityCollection<M> | ResolvedEntityCollection<M>;
 }
 
@@ -203,13 +250,19 @@ export interface DataSource {
         name: string,
         value: any,
         entityId?: string,
-        collection?: EntityCollection
+        collection?: EntityCollection,
+        /**
+         * Appended last, and optional, so existing implementations and callers keep
+         * working unchanged — a function declaring fewer parameters stays assignable.
+         * See `pathSegments` on FetchCollectionProps.
+         */
+        pathSegments?: string[]
     ): Promise<boolean>;
 
     /**
      * Generate an id for a new entity
      */
-    generateEntityId(path: string, collection: EntityCollection): string;
+    generateEntityId(path: string, collection: EntityCollection, pathSegments?: string[]): string;
 
     /**
      * Count the number of entities in a collection
@@ -237,6 +290,8 @@ export interface DataSource {
 }
 
 export type FilterCombinationValidProps = {
+    /** `path` split at its real segment boundaries — see `pathSegments` on FetchCollectionProps. */
+    pathSegments?: string[];
     path: string;
     collection: EntityCollection<any>;
     filterValues: FilterValues<any>;
@@ -366,12 +421,12 @@ export interface DataSourceDelegate {
      * @param collection
      * @return `true` if there are no other fields besides the given entity
      */
-    checkUniqueField(path: string, name: string, value: any, entityId?: string, collection?: EntityCollection): Promise<boolean>;
+    checkUniqueField(path: string, name: string, value: any, entityId?: string, collection?: EntityCollection, pathSegments?: string[]): Promise<boolean>;
 
     /**
      * Generate an id for a new entity
      */
-    generateEntityId(path: string, collection?: EntityCollection): string;
+    generateEntityId(path: string, collection?: EntityCollection, pathSegments?: string[]): string;
 
     /**
      * Count the number of entities in a collection

package/src/types/entities.ts

@@ -21,6 +21,17 @@ export interface Entity<M extends object = any> {
      */
     path: string;
 
+    /**
+     * `path` split at its real segment boundaries, e.g. `["nodes", "node/42", "edges"]`.
+     *
+     * `path` is a single flattened string, so a parent entity id containing "/" cannot be
+     * recovered from it. This keeps each segment whole.
+     *
+     * Optional, and never derived by splitting `path` — a guess would be wrong in exactly
+     * the case the field exists for. Absent means "not known here", not "no slashes".
+     */
+    pathSegments?: string[];
+
     /**
      * Current values
      */
@@ -55,10 +66,22 @@ export class EntityReference {
      */
     readonly databaseId?: string;
 
-    constructor(id: string, path: string, databaseId?: string) {
+    /**
+     * `path` split at its real segment boundaries, e.g. `["nodes", "node/42", "edges"]`.
+     *
+     * `path` is a single flattened string, so a parent entity id containing "/" cannot be
+     * recovered from it. This keeps each segment whole.
+     *
+     * Optional, and never derived by splitting `path` — a guess would be wrong in exactly
+     * the case the field exists for. Absent means "not known here", not "no slashes".
+     */
+    readonly pathSegments?: string[];
+
+    constructor(id: string, path: string, databaseId?: string, pathSegments?: string[]) {
         this.id = id;
         this.path = path;
         this.databaseId = databaseId;
+        this.pathSegments = pathSegments;
     }
 
     get pathWithId() {

package/src/types/properties.ts

@@ -562,6 +562,22 @@ export type PropertyBuilderProps<M extends Record<string, any> = any> =
          * Current value of this property
          */
         propertyValue?: any;
+        /**
+         * Path of this property within the entity, in dot notation, e.g.
+         * `my_map.my_field` or `my_array.0.my_field`.
+         * Useful to look up sibling values in `values` with `getValueInPath`.
+         *
+         * When a property builder is used as the `of` prop of an array property,
+         * it is resolved twice: once per existing element, with an index
+         * qualified key (`my_array.0`), and once as the template for the element
+         * shape, with the array's own key (`my_array`). In the latter case
+         * `propertyValue` is the whole array, since the template is not bound to
+         * any element.
+         *
+         * It may be undefined if the property is resolved outside the context of
+         * an entity.
+         */
+        propertyKey?: string;
         /**
          * Index of this property (only for arrays)
          */
@@ -592,6 +608,7 @@ export type PropertyBuilder<T extends CMSType = any, M extends Record<string, an
         values,
         previousValues,
         propertyValue,
+        propertyKey,
         index,
         path,
         entityId,