@firecms/core 3.3.0 → 3.4.0-canary.00f9be5

package/src/components/common/useDataSourceTableController.tsx

@@ -4,18 +4,19 @@ import { useLocation } from "react-router-dom";
 import { useDataSource, useFireCMSContext, useNavigationController } from "../../hooks";
 import { useDataOrder } from "../../hooks/data/useDataOrder";
 import {
+    DataType,
     Entity,
     EntityCollection,
-    EntityReference,
     EntityTableController,
     FilterValues,
     FireCMSContext,
     SelectedCellProps,
-    User,
-    WhereFilterOp
+    User
 } from "../../types";
 import { useDebouncedData } from "./useDebouncedData";
 import { ScrollRestorationController } from "./useScrollRestoration";
+import { isDataTypeFilterable } from "../../util";
+import { encodeFilterAndSort, parseFilterAndSort } from "./table_url_params";
 
 const DEFAULT_PAGE_SIZE = 50;
 
@@ -24,6 +25,14 @@ export type DataSourceTableControllerProps<M extends Record<string, any> = any>
      * Full path where the data of this table is located
      */
     fullPath: string;
+    /**
+     * `fullPath` split at its real segment boundaries. Passed through to the datasource so
+     * a parent entity id containing "/" stays unambiguous.
+     *
+     * Optional, and never derived by splitting `fullPath` — a guess would be wrong in
+     * exactly the case the field exists for. Absent means "not known here", not "no slashes".
+     */
+    pathSegments?: string[];
     /**
      * The collection that is represented by this config.
      */
@@ -68,6 +77,7 @@ export type DataSourceTableControllerProps<M extends Record<string, any> = any>
 export function useDataSourceTableController<M extends Record<string, any> = any, USER extends User = User>(
     {
         fullPath,
+        pathSegments,
         collection,
         scrollRestoration,
         entitiesDisplayedFirst,
@@ -86,20 +96,24 @@ export function useDataSourceTableController<M extends Record<string, any> = any
     const [popupCell, setPopupCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
     const navigation = useNavigationController();
     const dataSource = useDataSource(collection);
-    const resolvedPath = useMemo(() => navigation.resolveIdsFrom(fullPath), [fullPath, navigation.resolveIdsFrom]);
+    // Resolved together so the two representations always describe the same chain.
+    // Segments are resolved, never derived (see useEntityFetch).
+    const resolvedPath = useMemo(() => navigation.resolveIdsFrom(fullPath, pathSegments), [fullPath, pathSegments, navigation.resolveIdsFrom]);
+    const resolvedPathSegments = useMemo(() => pathSegments
+        ? (navigation.resolveSegmentsFrom?.(pathSegments) ?? pathSegments)
+        : undefined, [pathSegments, navigation.resolveSegmentsFrom]);
 
     const forceFilter = forceFilterFromProps ?? forceFilterFromCollection;
     const paginationEnabled = collection.pagination === undefined || Boolean(collection.pagination);
     const pageSize = typeof collection.pagination === "number" ? collection.pagination : DEFAULT_PAGE_SIZE;
 
-    const [searchString, setSearchString] = React.useState<string | undefined>();
-
     const checkFilterCombination = useCallback((filterValues: FilterValues<any>,
         sortBy?: [string, "asc" | "desc"]) => {
         if (!dataSource.isFilterCombinationValid)
             return true;
         return dataSource.isFilterCombinationValid({
             path: resolvedPath,
+            pathSegments: resolvedPathSegments,
             collection,
             filterValues,
             sortBy
@@ -134,18 +148,69 @@ export function useDataSourceTableController<M extends Record<string, any> = any
     const {
         filterValues: initialFilterUrl,
         sortBy: initialSortUrl,
+        searchString: initialSearchUrl
     } = parseFilterAndSort(location.search);
 
-    const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? (updateUrl ? initialFilterUrl : undefined) ?? initialFilter ?? undefined);
+    const availableFilterKeys = collection.allowedFilters ?? Object.keys(collection.properties);
+    const forcedFilterKeys = collection.forceFilter ? Object.keys(collection.forceFilter) : [];
+
+    const allowedFilterKeys = useMemo(() => {
+        const availableKeys = availableFilterKeys.filter((key) => {
+            const property = collection.properties[key];
+
+            if (!property) return false;
+
+            if (typeof property === "function") return false;
+
+            const dataType = property.dataType;
+            const filterable = dataType === "array"
+                ? isDataTypeFilterable((property as { of?: { dataType: DataType } }).of?.dataType as DataType, true)
+                : isDataTypeFilterable(dataType);
+
+            return filterable;
+        });
+
+        const forcedKeys = forcedFilterKeys.filter((key) => !availableKeys.includes(key));
+
+        return [...availableKeys, ...forcedKeys];
+
+    }, [collection.properties, availableFilterKeys, forcedFilterKeys]);
+
+    const removeUnallowedFilters = useCallback((filters?: FilterValues<Extract<keyof M, string>>) => {
+        if (!filters) return;
+
+        return Object.fromEntries(Object.entries(filters).filter(([key]) => allowedFilterKeys.includes(key as keyof M)))  as FilterValues<Extract<keyof M, string>>;
+    }, [allowedFilterKeys]);
+
+    const initFilters = forceFilter ?? (updateUrl ? initialFilterUrl : undefined) ?? initialFilter ?? undefined
+
+    const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(removeUnallowedFilters(initFilters));
     const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string>, "asc" | "desc"] | undefined>((updateUrl ? initialSortUrl : undefined) ?? initialSortInternal);
+    // Like the filters and the sort, the text search term is only restored from the URL when
+    // this controller owns the URL. Controllers rendered inside a dialog (e.g. a reference
+    // selection dialog) get `updateUrl: false` and must not inherit the state of the
+    // collection behind them. See https://github.com/firecmsco/firecms/issues/702
+    const [searchString, setSearchString] = React.useState<string | undefined>(updateUrl ? initialSearchUrl : undefined);
 
     useUpdateUrl(filterValues, sortBy, searchString, updateUrl);
 
-    const collectionScroll = scrollRestoration?.getCollectionScroll(fullPath, filterValues);
-    const initialItemCount = collectionScroll?.data.length ?? pageSize;
+    // Keyed by `resolvedPath`, not `fullPath`, so the read agrees with the two writes below
+    // and in `onScroll`. What the cache holds is a slice of a dataset plus the offset into
+    // it, and the dataset is identified by what the datasource was actually queried with:
+    // `resolvedPath` + filters. Reading with the unresolved `fullPath` meant that for every
+    // collection reached through an id alias, or a subcollection whose parent ids need
+    // resolving, the entry was written under one key and looked up under another, so scroll
+    // restoration silently did nothing there.
+    const collectionScroll = scrollRestoration?.getCollectionScroll(resolvedPath, filterValues);
+    const initialItemCount = collectionScroll?.data.length || pageSize;
 
     useEffect(() => {
-        if (scrollRestoration) {
+        // Only re-seed an entry we actually have something to restore for. Writing an empty
+        // `data` array here poisoned the cache: this is a module level Map that outlives the
+        // mount, so the next mount of the same collection read `data.length === 0` back as the
+        // initial item count and called the datasource with `limit: 0`. Custom datasources
+        // treat that as falsy and drop the limit altogether, loading the whole collection.
+        if (scrollRestoration && rawData.length > 0) {
             scrollRestoration.updateCollectionScroll({
                 fullPath: resolvedPath,
                 scrollOffset: collectionScroll?.scrollOffset ?? 0,
@@ -168,7 +233,7 @@ export function useDataSourceTableController<M extends Record<string, any> = any
     const [dataLoadingError, setDataLoadingError] = useState<Error | undefined>();
     const [noMoreToLoad, setNoMoreToLoad] = useState<boolean>(false);
 
-    const clearFilter = useCallback(() => setFilterValues(forceFilter ?? undefined), [forceFilter]);
+    const clearFilter = useCallback(() => setFilterValues(removeUnallowedFilters(forceFilter)), [forceFilter, removeUnallowedFilters]);
 
     const updateFilterValues = useCallback((updatedFilter: FilterValues<Extract<keyof M, string>> | undefined) => {
         if (forceFilter) {
@@ -178,15 +243,20 @@ export function useDataSourceTableController<M extends Record<string, any> = any
         if (updatedFilter && Object.keys(updatedFilter).length === 0) {
             setFilterValues(undefined);
         } else {
-            setFilterValues(updatedFilter);
+            setFilterValues(removeUnallowedFilters(updatedFilter));
         }
-    }, [forceFilter]);
+    }, [forceFilter, removeUnallowedFilters]);
 
     useEffect(() => {
 
         setDataLoading(true);
 
         const onEntitiesUpdate = async (entities: Entity<M>[]) => {
+            // See useEntityFetch: entities carry the segments they were loaded with, so a
+            // reference or a delete derived from a table row stays resolvable.
+            if (resolvedPathSegments) {
+                entities = entities.map(e => e.pathSegments ? e : { ...e, pathSegments: resolvedPathSegments });
+            }
             if (collection.callbacks?.onFetch) {
                 try {
                     entities = await Promise.all(
@@ -194,6 +264,7 @@ export function useDataSourceTableController<M extends Record<string, any> = any
                             collection.callbacks!.onFetch!({
                                 collection,
                                 path: resolvedPath,
+                                pathSegments: resolvedPathSegments,
                                 entity,
                                 context
                             })));
@@ -217,32 +288,45 @@ export function useDataSourceTableController<M extends Record<string, any> = any
             setDataLoadingError(error);
         };
 
-        if (dataSource.listenCollection) {
-            return dataSource.listenCollection<M>({
-                path: resolvedPath,
-                collection,
-                onUpdate: onEntitiesUpdate,
-                onError,
-                searchString,
-                filter: filterValues,
-                limit: itemCount,
-                startAfter: undefined,
-                orderBy: sortByProperty,
-                order: currentSort
-            });
-        } else {
-            dataSource.fetchCollection<M>({
-                path: resolvedPath,
-                collection,
-                searchString,
-                filter: filterValues,
-                limit: itemCount,
-                startAfter: undefined,
-                orderBy: sortByProperty,
-                order: currentSort
-            })
-                .then(onEntitiesUpdate)
-                .catch(onError);
+        // Data sources may throw synchronously, e.g. when a text search is requested before
+        // the text search backend of the collection has been initialised. That can happen
+        // when the search term is restored from the URL instead of typed in the search bar,
+        // so it is reported as a data loading error rather than being left to blow up the
+        // whole view from inside this effect.
+        try {
+            if (dataSource.listenCollection) {
+                return dataSource.listenCollection<M>({
+                    path: resolvedPath,
+                    pathSegments: resolvedPathSegments,
+                    collection,
+                    onUpdate: onEntitiesUpdate,
+                    onError,
+                    searchString,
+                    filter: filterValues,
+                    limit: itemCount,
+                    startAfter: undefined,
+                    orderBy: sortByProperty,
+                    order: currentSort
+                });
+            } else {
+                dataSource.fetchCollection<M>({
+                    path: resolvedPath,
+                    pathSegments: resolvedPathSegments,
+                    collection,
+                    searchString,
+                    filter: filterValues,
+                    limit: itemCount,
+                    startAfter: undefined,
+                    orderBy: sortByProperty,
+                    order: currentSort
+                })
+                    .then(onEntitiesUpdate)
+                    .catch(onError);
+                return () => {
+                };
+            }
+        } catch (e: any) {
+            onError(e instanceof Error ? e : new Error(String(e)));
             return () => {
             };
         }
@@ -268,6 +352,8 @@ export function useDataSourceTableController<M extends Record<string, any> = any
         dataLoadingError,
         filterValues,
         setFilterValues: updateFilterValues,
+        allowedFilters: allowedFilterKeys,
+        forcedFilters: forcedFilterKeys,
         sortBy,
         setSortBy,
         searchString,
@@ -294,9 +380,7 @@ function useUpdateUrl<M extends Record<string, any> = any>(
 
     useEffect(() => {
         if (updateUrl) {
-            const newUrl = encodeFilterAndSort(filterValues, sortBy);
-            const search = searchString ? `&search=${encodeURIComponent(searchString)}` : "";
-            const state = `${newUrl}${search}`;
+            const state = encodeFilterAndSort(filterValues, sortBy, searchString);
             const hash = window.location.hash;
             if (state === "")
                 window.history.replaceState({}, "", `${window.location.pathname}${hash}`);
@@ -305,124 +389,3 @@ function useUpdateUrl<M extends Record<string, any> = any>(
         }
     }, [filterValues, sortBy, searchString, updateUrl]);
 }
-
-function encodeFilterAndSort(filterValues?: FilterValues<string>, sortBy?: [string, "asc" | "desc"] | undefined) {
-    const entries: Record<string, string> = {};
-    if (sortBy) {
-        entries["__sort"] = encodeURIComponent(sortBy[0]);
-        entries["__sort_order"] = encodeURIComponent(sortBy[1]);
-    }
-    if (filterValues) {
-        Object.entries(filterValues).forEach(([key, value]) => {
-            if (value) {
-                const [op, val] = value;
-                let encodedValue: any = val;
-                try {
-                    if (typeof val === "object") {
-                        if (val instanceof Date) {
-                            encodedValue = val.toISOString();
-                        } else if (Array.isArray(val)) {
-                            encodedValue = JSON.stringify(val, (key, value) => {
-                                if (value instanceof EntityReference) {
-                                    return encodeRef(value);
-                                }
-                                return value;
-                            });
-                        } else if (val instanceof EntityReference) {
-                            encodedValue = encodeRef(val);
-                        }
-                    } else if (typeof val === "string") {
-                        // JSON.stringify wraps the string in quotes (e.g. "4" → '"4"')
-                        // so that decodeString's JSON.parse restores the string type,
-                        // not a number. Without this, "4" round-trips as the number 4.
-                        encodedValue = JSON.stringify(val);
-                    }
-                } catch (e) {
-                    encodedValue = val;
-                }
-                if (encodedValue !== undefined) {
-                    entries[encodeURIComponent(`${key}_op`)] = encodeURIComponent(op);
-                    entries[encodeURIComponent(`${key}_value`)] = encodedValue ? encodeURIComponent(encodedValue.toString()) : "null";
-                }
-            }
-        });
-    }
-    if (!Object.keys(entries).length) {
-        return "";
-    }
-    return Object.entries(entries).map(([key, value]) => `${key}=${value}`).join("&");
-}
-
-function parseFilterAndSort<M>(search: string): {
-    filterValues: FilterValues<string> | undefined,
-    sortBy?: [Extract<keyof M, string>, "asc" | "desc"]
-} {
-    const entries = new URLSearchParams(search);
-    const filterValues: FilterValues<string> = {};
-    let sortBy: [string, "asc" | "desc"] | undefined = undefined;
-    entries.forEach((value, key) => {
-        if (key === "__sort") {
-            sortBy = [decodeURIComponent(value), entries.get("__sort_order") as "asc" | "desc"];
-        } else if (key.endsWith("_op")) {
-            const field = key.replace("_op", "");
-            const filterOp = decodeURIComponent(value) as WhereFilterOp;
-            const filterValStr = entries.get(`${field}_value`);
-            if (filterValStr !== null) {
-                filterValues[field] = [filterOp, decodeString(filterValStr)];
-            }
-        }
-    });
-
-    return {
-        filterValues: Object.keys(filterValues).length ? filterValues : undefined,
-        sortBy
-    }
-}
-
-function isDate(dateString: string): boolean {
-    // Define a regex pattern that matches the exact date format: 2025-01-07T23:00:00.000Z
-    const regexPattern = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/;
-
-    // Test the dateString against the regex pattern
-    if (!regexPattern.test(dateString)) {
-        return false;
-    }
-
-    // If the regex matches, further validate if it is a valid UTC date
-    const date = new Date(dateString);
-    return date.toISOString() === dateString;
-}
-
-function encodeRef(val: EntityReference) {
-    return `ref::${val.path}/${val.id}`;
-}
-
-function decodeString(val: string): EntityReference | Date | string {
-    let parsedFilterVal: any = val;
-    if (isDate(val)) {
-        try {
-            parsedFilterVal = new Date(val);
-        } catch (e) {
-            // ignore
-        }
-    }
-    if (typeof parsedFilterVal === "string") {
-        try {
-            parsedFilterVal = JSON.parse(parsedFilterVal, (key, value) => {
-                if (typeof value === "string" && value.startsWith("ref::")) {
-                    const [path, id] = value.substring(5).split("/");
-                    return new EntityReference(id, path);
-                }
-                return value;
-            });
-        } catch (e) {
-            // ignore
-        }
-    }
-
-    if (typeof parsedFilterVal === "string" && parsedFilterVal.startsWith("ref::")) {
-        const [path, id] = parsedFilterVal.substring(5).split("/");
-        return new EntityReference(id, path);
-    }
-    return parsedFilterVal;
-}

package/src/components/common/useTableSearchHelper.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { EntityCollection } from "../../types";
 import { useCustomizationController, useDataSource, useFireCMSContext } from "../../hooks";
@@ -6,13 +6,23 @@ import { useCustomizationController, useDataSource, useFireCMSContext } from "..
 export interface UseTableSearchHelperParams<M extends Record<string, any>> {
     collection: EntityCollection<M>;
     fullPath: string;
+    /** `fullPath` split at its real segment boundaries, when known. Never derived from it. */
+    pathSegments?: string[];
     parentCollectionIds?: string[];
+    /**
+     * Search term that is already being applied without the user having gone through the
+     * search bar, e.g. one restored from the URL query params. When set, text search is
+     * initialised automatically instead of waiting for a click on the search bar.
+     */
+    initialSearchString?: string;
 }
 
 export function useTableSearchHelper<M extends Record<string, any>>({
                                                                         collection,
                                                                         fullPath,
-                                                                        parentCollectionIds
+                                                                        pathSegments,
+                                                                        parentCollectionIds,
+                                                                        initialSearchString
                                                                     }: UseTableSearchHelperParams<M>) {
 
     const context = useFireCMSContext();
@@ -21,6 +31,7 @@ export function useTableSearchHelper<M extends Record<string, any>>({
 
     const [textSearchLoading, setTextSearchLoading] = useState<boolean>(false);
     const [textSearchInitialised, setTextSearchInitialised] = useState<boolean>(false);
+    const autoInitialisedRef = useRef<boolean>(false);
 
     let onTextSearchClick: (() => void) | undefined;
     let textSearchEnabled = Boolean(collection.textSearchEnabled);
@@ -28,6 +39,7 @@ export function useTableSearchHelper<M extends Record<string, any>>({
     const props = {
         context,
         path: fullPath,
+        pathSegments,
         databaseId: collection.databaseId,
         collection,
         parentCollectionIds
@@ -54,6 +66,7 @@ export function useTableSearchHelper<M extends Record<string, any>>({
                             promises.push(p.collectionView.onTextSearchClick({
                                 context,
                                 path: fullPath,
+                                pathSegments,
                                 collection,
                                 parentCollectionIds
                             }));
@@ -79,6 +92,17 @@ export function useTableSearchHelper<M extends Record<string, any>>({
                 }
         })
     }
+
+    // Only ever runs once, and only when a search term was restored from outside the search
+    // bar: otherwise the search bar would show a term the user can neither edit nor clear,
+    // because it stays read only until text search is initialised.
+    const shouldAutoInitialise = Boolean(initialSearchString) && textSearchEnabled && !textSearchInitialised && Boolean(onTextSearchClick);
+    useEffect(() => {
+        if (autoInitialisedRef.current || !shouldAutoInitialise) return;
+        autoInitialisedRef.current = true;
+        onTextSearchClick?.();
+    }, [shouldAutoInitialise]);
+
     return {
         textSearchLoading,
         textSearchInitialised,

package/src/components/index.tsx

@@ -43,3 +43,4 @@ export * from "./EntityPreview";
 
 export * from "./AIIcon";
 export * from "./LanguageToggle";
+export * from "./LicenseBanner";

package/src/contexts/LicenseStatusContext.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { AccessResponse } from "../types";
+
+/**
+ * License status of the enclosing `FireCMS`. `undefined` means there is no
+ * `FireCMS` above; `null` means the check has not answered (or was skipped).
+ * @internal
+ */
+export const LicenseStatusContext = React.createContext<AccessResponse | null | undefined>(undefined);
+
+/*
+ * The same status, published outside React's tree.
+ *
+ * `useBuildNavigationController` runs in the app component that renders
+ * `<FireCMS>`, above it, so it cannot read the context. It still has to know
+ * when PRO is paused: it applies the plugins' collection, view and home page
+ * navigation contributions itself. `FireCMS` publishes here, and the navigation
+ * controller subscribes with `useSyncExternalStore`.
+ *
+ * One value per page: two `FireCMS` instances on one page would share it, which
+ * is harmless because both check the same project.
+ */
+
+let currentStatus: AccessResponse | null = null;
+const listeners = new Set<() => void>();
+
+/** @internal */
+export function getLicenseStatusSnapshot(): AccessResponse | null {
+    return currentStatus;
+}
+
+/** @internal */
+export function getServerLicenseStatusSnapshot(): AccessResponse | null {
+    return null;
+}
+
+/** @internal */
+export function subscribeLicenseStatus(listener: () => void): () => void {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+
+/** @internal */
+export function publishLicenseStatus(status: AccessResponse | null): void {
+    if (status === currentStatus) return;
+    currentStatus = status;
+    listeners.forEach(listener => listener());
+}

package/src/contexts/SnackbarProvider.tsx

@@ -1,12 +1,25 @@
 "use client";
 
-import React, { PropsWithChildren } from "react";
+import React, { PropsWithChildren, useEffect, useState } from "react";
 import { SnackbarProvider as NotistackSnackbarProvider } from "notistack";
 
 export const SnackbarProvider: React.FC<PropsWithChildren<{}>> = ({ children }) => {
 
+    // Notistack renders the snackbars inline, right where this provider sits in the
+    // tree, unless it is given a `domRoot`. Dialogs and side dialogs, on the other
+    // hand, are portalled to the body, so any ancestor of this provider that creates
+    // a stacking context (a transform, a filter, an `isolate`, a positioned element
+    // with a z-index...) traps the snackbars underneath them. Portalling the
+    // snackbars to the body as well puts them in the same stacking context as the
+    // dialogs, where their z-index actually wins.
+    const [domRoot, setDomRoot] = useState<HTMLElement | undefined>(undefined);
+    useEffect(() => {
+        setDomRoot(document.body);
+    }, []);
+
     return (
         <NotistackSnackbarProvider maxSnack={3}
+                                   domRoot={domRoot}
                                    autoHideDuration={3500}>
             {children}
         </NotistackSnackbarProvider>

package/src/core/DefaultAppBar.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Link, useNavigate } from "react-router-dom";
-import { ErrorBoundary, FireCMSLogo, LanguageToggle } from "../components";
+import { ErrorBoundary, LanguageToggle } from "../components";
 import {
     Avatar,
     BrightnessMediumIcon,
@@ -20,6 +20,7 @@ import { useAuthController, useLargeLayout, useModeController, useNavigationCont
 import { User } from "../types";
 import { useApp } from "../app/useApp";
 import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
+import { DrawerLogo } from "./DefaultDrawer";
 
 export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
 
@@ -119,32 +120,43 @@ export const DefaultAppBar = function DefaultAppBar({
                 "flex flex-row gap-2 px-4 items-center",
                 {
                     "pl-[19rem]": drawerOpen && largeLayout,
-                    "pl-24": hasDrawer && !(drawerOpen && largeLayout),
+                    // The title has to sit at the same x whether or not a Drawer
+                    // is mounted, so the bar reserves the collapsed rail's width
+                    // in both cases. Only a pinned-open drawer moves it, in step
+                    // with the drawer itself.
+                    "pl-24": !(drawerOpen && largeLayout) && (hasDrawer || largeLayout),
                     "z-10": largeLayout,
                     "duration-100": drawerOpen && largeLayout,
                 },
                 className)}>
 
 
+            {/* Rendering DrawerLogo itself, rather than rebuilding its box here,
+                is what keeps the mark from moving when a screen with a drawer
+                follows one without: matching it by hand still left it 4px high,
+                because DrawerLogo centres a 40px box under `pt-4` instead of
+                centring in the 64px bar.
+
+                Gated on `largeLayout`, not on `lg:`: useLargeLayout resolves at
+                min-width 1025px while Tailwind's `lg:` starts at 1024px, and at
+                exactly 1024px the logo would render into a bar that had not
+                reserved room for it, landing on top of the title. */}
+            {navigation && !hasDrawer && largeLayout &&
+                <div className={"absolute left-0 top-0"}>
+                    <DrawerLogo logo={logo} />
+                </div>}
+
             {navigation && <div className="mr-2 hidden lg:block">
                 <Link
                     className="visited:text-inherit visited:dark:text-inherit block"
                     to={navigation?.basePath ?? "/"}
                 >
-                    <div className={"flex flex-row gap-4"}>
-                        {!hasDrawer && (logo
-                            ? <img src={logo}
-                                alt="Logo"
-                                className={cls("w-[32px] h-[32px] object-contain")} />
-                            : <FireCMSLogo width={"32px"} height={"32px"} />)}
-
-                        {typeof title === "string"
-                            ? <Typography variant="subtitle1"
-                                noWrap>
-                                {title}
-                            </Typography>
-                            : title}
-                    </div>
+                    {typeof title === "string"
+                        ? <Typography variant="subtitle1"
+                            noWrap>
+                            {title}
+                        </Typography>
+                        : title}
                 </Link>
             </div>}