@firecms/core 3.3.0-canary.d3242eb → 3.4.0-canary.63041d0

package/dist/locales/pl.d.ts

@@ -0,0 +1,2 @@
+import { FireCMSTranslations } from "../types/translations";
+export declare const pl: FireCMSTranslations;

package/dist/preview/index.d.ts

@@ -4,6 +4,7 @@ export * from "./property_previews/ArrayOfStringsPreview";
 export * from "./property_previews/ArrayPropertyEnumPreview";
 export * from "./property_previews/ArrayOfMapsPreview";
 export * from "./property_previews/NumberPropertyPreview";
+export * from "./property_previews/GeopointPropertyPreview";
 export * from "./property_previews/StringPropertyPreview";
 export * from "./property_previews/ArrayOfStorageComponentsPreview";
 export * from "./property_previews/ArrayOfReferencesPreview";

package/dist/preview/property_previews/GeopointPropertyPreview.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { GeoPoint } from "../../types";
+import { PropertyPreviewProps } from "../PropertyPreviewProps";
+export declare function GeopointPropertyPreview({ value, size }: PropertyPreviewProps<GeoPoint>): React.ReactElement;

package/dist/types/collections.d.ts

@@ -87,6 +87,13 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * If not specified, the first property simple text property will be used.
      */
     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`.
@@ -232,6 +239,21 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * e.g. `initialFilter: { related_user: ["==", new EntityReference("sdc43dsw2", "users")] }`
      */
     initialFilter?: FilterValues<Extract<keyof M, string>>;
+    /**
+     * Array of property keys that are allowed for filtering. Allowed filters will be displayed in the collection view, table row headers
+     * and will be used to filter data.
+     *
+     * If not specified, all properties that are filterable will be allowed.
+     *
+     * If you specify this prop, the filters will be displayed in the collection view if they are filterable.
+     *
+     * If you set it as an empty array, no filters will be displayed.
+     *
+     * e.g. `allowedFilters: ["name", "category"]`
+     *
+     * e.g. `allowedFilters: []`
+     */
+    allowedFilters?: (keyof M)[];
     /**
      * Default sort applied to this collection.
      * When setting this prop, entities will have a default order
@@ -621,6 +643,8 @@ export type EntityTableController<M extends Record<string, any> = any> = {
     dataLoadingError?: Error;
     filterValues?: FilterValues<Extract<keyof M, string>>;
     setFilterValues?: (filterValues: FilterValues<Extract<keyof M, string>>) => void;
+    allowedFilters?: (keyof M)[];
+    forcedFilters?: (keyof M)[];
     sortBy?: [Extract<keyof M, string>, "asc" | "desc"];
     setSortBy?: (sortBy?: [Extract<keyof M, string>, "asc" | "desc"]) => void;
     searchString?: string;

package/dist/types/datasource.d.ts

@@ -7,6 +7,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>;
@@ -23,6 +37,20 @@ export type ListenEntityProps<M extends Record<string, any> = any> = FetchEntity
  */
 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;
@@ -43,6 +71,20 @@ export type ListenCollectionProps<M extends Record<string, any> = any> = FetchCo
  */
 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;
     previousValues?: Partial<EntityValues<M>>;

package/dist/types/properties.d.ts

@@ -433,6 +433,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)
      */
@@ -456,7 +472,7 @@ export type PropertyBuilderProps<M extends Record<string, any> = any> = {
  * current value of the property, as well as the path and entity ID.
  * @group Entity properties
  */
-export type PropertyBuilder<T extends CMSType = any, M extends Record<string, any> = any> = ({ values, previousValues, propertyValue, index, path, entityId, authController }: PropertyBuilderProps<M>) => Property<T> | null;
+export type PropertyBuilder<T extends CMSType = any, M extends Record<string, any> = any> = ({ values, previousValues, propertyValue, propertyKey, index, path, entityId, authController }: PropertyBuilderProps<M>) => Property<T> | null;
 /**
  * @group Entity properties
  */

package/dist/types/side_entity_controller.d.ts

@@ -15,6 +15,12 @@ export interface EntitySidePanelProps<M extends Record<string, any> = any> {
      * Full CMS path of the entity, including the collection and sub-collections.
      */
     fullIdPath?: string;
+    /**
+     * `path` split at its real segment boundaries, e.g. `["nodes", "node/42", "edges"]`.
+     * Optional: when omitted the panel falls back to splitting `path`, which is correct for
+     * any backend whose entity ids cannot contain "/".
+     */
+    pathSegments?: string[];
     /**
      * ID of the entity, if not set, it means we are creating a new entity
      */

package/dist/types/translations.d.ts

@@ -368,6 +368,8 @@ export interface FireCMSTranslations {
     download: string;
     large_number_of_documents: string;
     include_undefined_values: string;
+    /** Toggle in the export dialog, only shown when a filter or sort is active */
+    export_apply_filter_sort: string;
     submit: string;
     no_filterable_properties: string;
     apply_filters: string;
@@ -412,8 +414,8 @@ export interface FireCMSTranslations {
     cms_users: string;
     roles_menu: string;
     project_settings: string;
-    firestore_explorer: string;
-    explore_your_firestore_data: string;
+    firestore_manager: string;
+    manage_your_firestore_data: string;
     build_admin_panel_in_minutes: string;
     go_live_instantly: string;
     create_production_ready_back_offices: string;
@@ -481,10 +483,18 @@ export interface FireCMSTranslations {
     auto_setup_collections_button: string;
     auto_setup_collections_title: string;
     auto_setup_collections_desc: string;
-    this_can_take_a_minute: string;
+    setting_up_collections: string;
+    setting_up_collection: string;
     no_collections_found_to_setup: string;
     collections_have_been_setup: string;
     error_setting_up_collections: string;
+    setup_collections_title: string;
+    setup_collections_select_desc: string;
+    select_all: string;
+    deselect_all: string;
+    setup_collections_confirm: string;
+    collection_setup_success: string;
+    go_to_collection: string;
     add_your: string;
     database_collections: string;
     to_firecms: string;
@@ -539,6 +549,10 @@ export interface FireCMSTranslations {
     order_property_not_found: string;
     no_number_properties: string;
     order_property_description: string;
+    image_property: string;
+    image_property_not_found: string;
+    no_image_properties: string;
+    image_property_description: string;
     display_settings: string;
     default_row_size: string;
     side_dialog_width: string;

package/dist/util/__tests__/collections.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/util/__tests__/urls.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/util/collections.d.ts

@@ -9,4 +9,4 @@ export declare function resolveDefaultSelectedView(defaultSelectedView: string |
  * @param permissionsBuilder
  */
 export declare const applyPermissionsFunctionIfEmpty: (collections: EntityCollection[], permissionsBuilder?: PermissionsBuilder<any, any>) => EntityCollection[];
-export declare function getLocalChangesBackup(collection: EntityCollection): "manual_apply" | "auto_apply";
+export declare function getLocalChangesBackup(collection: EntityCollection): false | "manual_apply" | "auto_apply";

package/dist/util/entities.d.ts

@@ -25,3 +25,4 @@ export declare function sanitizeData<M extends Record<string, any>>(values: Enti
 export declare function getReferenceFrom<M extends Record<string, any>>(entity: Entity<M>): EntityReference;
 export declare function traverseValuesProperties<M extends Record<string, any>>(inputValues: Partial<EntityValues<M>>, properties: ResolvedProperties<M>, operation: (value: any, property: Property) => any): EntityValues<M> | undefined;
 export declare function traverseValueProperty(inputValue: any, property: Property, operation: (value: any, property: Property) => any): any;
+export declare function isDataTypeFilterable(dataType: DataType, isPartOfArray?: boolean): boolean;

package/dist/util/geopoint.d.ts

@@ -0,0 +1,22 @@
+import { GeoPoint } from "../types";
+export type GeoPointLike = GeoPoint | {
+    latitude?: number;
+    longitude?: number;
+    lat?: number;
+    lng?: number;
+    _lat?: number;
+    _long?: number;
+} | null | undefined;
+export interface GeoPointCoordinates {
+    latitude: number;
+    longitude: number;
+}
+export declare function getGeoPointCoordinates(value: GeoPointLike): GeoPointCoordinates | undefined;
+export declare function normalizeGeoPoint(value: GeoPointLike): GeoPoint | undefined;
+export declare function formatGeoPoint(value: GeoPointLike, options?: {
+    maximumFractionDigits?: number;
+}): string;
+export declare function parseGeoPoint(input: string): {
+    point: GeoPoint | null;
+    error?: string;
+};

package/dist/util/index.d.ts

@@ -6,12 +6,14 @@ export * from "./enums";
 export * from "./objects";
 export * from "./paths";
 export * from "./regexp";
+export * from "./urls";
 export * from "./navigation_utils";
 export * from "./entity_actions";
 export * from "./useDebouncedCallback";
 export * from "./property_utils";
 export * from "./resolutions";
 export * from "./permissions";
+export * from "./geopoint";
 export * from "./icon_list";
 export * from "./icon_synonyms";
 export * from "./icons";

package/dist/util/navigation_blocking.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Pure predicate deciding whether an in-progress navigation away from an open
+ * entity form should be blocked (to warn about unsaved changes).
+ *
+ * Extracted from FireCMSRoute so the branching can be unit-tested without
+ * mounting the router. This is an internal helper — it is intentionally not
+ * re-exported from the package index.
+ */
+export interface NavigationBlockLocation {
+    pathname: string;
+    hash: string;
+}
+export declare function shouldBlockEntityNavigation(params: {
+    currentLocation: NavigationBlockLocation;
+    nextLocation: NavigationBlockLocation;
+    /** Path of the currently open entity (basePath + "/" + entityId). */
+    entityPath: string;
+    /** Collection path the entity form lives under. */
+    basePath: string;
+    /** Whether the form currently has unsaved modifications. */
+    blocked: boolean;
+}): boolean;

package/dist/util/navigation_from_path.d.ts

@@ -6,6 +6,8 @@ export interface NavigationViewEntityInternal<M extends Record<string, any>> {
     path: string;
     fullIdPath: string;
     fullPath: string;
+    /** `path` split at its real boundaries — see `pathSegments` on the datasource props. */
+    pathSegments: string[];
     parentCollection: EntityCollection<M>;
 }
 export interface NavigationViewCollectionInternal<M extends Record<string, any>> {
@@ -14,6 +16,8 @@ export interface NavigationViewCollectionInternal<M extends Record<string, any>>
     path: string;
     fullIdPath: string;
     fullPath: string;
+    /** `path` split at its real boundaries — see `pathSegments` on the datasource props. */
+    pathSegments: string[];
     collection: EntityCollection<M>;
 }
 export interface NavigationViewEntityCustomInternal<M extends Record<string, any>> {
@@ -21,13 +25,26 @@ export interface NavigationViewEntityCustomInternal<M extends Record<string, any
     path: string;
     fullIdPath: string;
     fullPath: string;
+    /** `path` split at its real boundaries — see `pathSegments` on the datasource props. */
+    pathSegments: string[];
     entityId: string;
     view: EntityCustomView<M>;
 }
+/**
+ * Note on encoding: `path` arrives from the URL, so any entity id in it is escaped (see
+ * `encodeEntityId`). Two chains are threaded through the recursion:
+ *
+ *  - `currentFullPath` carries RAW ids and feeds the `path` / `fullPath` used to address
+ *    the datasource.
+ *  - `currentFullUrlPath` carries ESCAPED ids and feeds `fullPath`, which is handed back
+ *    to `buildUrlCollectionPath` for breadcrumbs and links.
+ */
 export declare function getNavigationEntriesFromPath(props: {
     path: string;
     collections: EntityCollection[] | undefined;
     currentFullPath?: string;
     currentFullIdPath?: string;
+    currentFullUrlPath?: string;
+    currentPathSegments?: string[];
     contextEntityViews?: EntityCustomView<any>[];
 }): NavigationViewInternal[];

package/dist/util/navigation_utils.d.ts

@@ -3,6 +3,26 @@ export declare function removeInitialAndTrailingSlashes(s: string): string;
 export declare function removeInitialSlash(s: string): string;
 export declare function removeTrailingSlash(s: string): string;
 export declare function addInitialSlash(s: string): string;
+/**
+ * Characters that would otherwise be read as structure once an entity id is joined into a
+ * path: "/" separates segments, "?" and "#" start the query and hash in a URL, and "%"
+ * has to be escaped first so that no escape sequence we introduce can be misread as one
+ * that was already part of the id.
+ *
+ * Entity ids are escaped ONLY inside URL-facing strings — anything handed to
+ * `buildUrlCollectionPath` or `navigate`. Every other path string (the `path` field of a
+ * navigation entry, datasource paths, `EntityReference.path`) carries raw ids.
+ *
+ * @group Hooks and utilities
+ */
+export declare function encodeEntityId(entityId: string): string;
+/**
+ * Inverse of {@link encodeEntityId}. "%25" is undone last, mirroring the encoder, so an id
+ * that legitimately contains the text "%2F" survives the round trip.
+ *
+ * @group Hooks and utilities
+ */
+export declare function decodeEntityId(encodedEntityId: string): string;
 export declare function getLastSegment(path: string): string;
 export declare function resolveCollectionPathIds(path: string, allCollections: EntityCollection[]): string;
 /**
@@ -18,7 +38,7 @@ export declare function getCollectionByPathOrId(pathOrId: string, collections: E
  * @param subpaths
  */
 export declare function getCollectionPathsCombinations(subpaths: string[]): string[];
-export declare function navigateToEntity({ openEntityMode, collection, entityId, copy, path, fullIdPath, selectedTab, sideEntityController, onClose, navigation }: {
+export declare function navigateToEntity({ openEntityMode, collection, entityId, copy, path, fullIdPath, pathSegments, selectedTab, sideEntityController, onClose, navigation }: {
     openEntityMode: "side_panel" | "full_screen";
     collection?: EntityCollection;
     entityId?: string;
@@ -26,6 +46,8 @@ export declare function navigateToEntity({ openEntityMode, collection, entityId,
     copy?: boolean;
     path: string;
     fullIdPath?: string;
+    /** `path` split at its real segment boundaries. */
+    pathSegments?: string[];
     sideEntityController: SideEntityController;
     onClose?: () => void;
     navigation: NavigationController;

package/dist/util/urls.d.ts

@@ -0,0 +1,22 @@
+import type { PreviewType } from "../types";
+/**
+ * Is the given value an absolute `http(s)` URL, as opposed to a relative
+ * storage path such as `images/my_image.png`?
+ *
+ * Values saved in the datasource for storage properties can be either, e.g.
+ * when the property is configured with `storeUrl: true`, or when the value was
+ * written directly pointing to an externally hosted file.
+ */
+export declare function isAbsoluteHttpUrl(value?: string | null): boolean;
+/**
+ * Extract the lowercase file extension of a URL or path, ignoring any query
+ * string or hash fragment. Returns `undefined` when there is no extension.
+ */
+export declare function getFileExtensionFromUrl(urlOrPath?: string | null): string | undefined;
+/**
+ * Best effort guess of the preview type of a URL or path, based on its file
+ * extension. Used when no storage metadata (and therefore no content type) is
+ * available, e.g. for externally hosted files.
+ * Returns `undefined` when the extension is missing or not recognised.
+ */
+export declare function getPreviewTypeFromUrl(urlOrPath?: string | null): PreviewType | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.3.0-canary.d3242eb",
+  "version": "3.4.0-canary.63041d0",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,8 +53,8 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/formex": "^3.3.0-canary.d3242eb",
-    "@firecms/ui": "^3.3.0-canary.d3242eb",
+    "@firecms/formex": "3.4.0-canary.63041d0",
+    "@firecms/ui": "3.4.0-canary.63041d0",
     "@floating-ui/dom": "^1.7.4",
     "@radix-ui/react-portal": "^1.1.10",
     "@radix-ui/react-slot": "^1.2.4",
@@ -63,9 +63,9 @@
     "date-fns": "^3.6.0",
     "fuse.js": "^7.1.0",
     "history": "^5.3.0",
-    "i18next": "^23.16.4",
+    "i18next": "^26.3.3",
     "json-logic-js": "^2.0.5",
-    "markdown-it": "^14.1.0",
+    "markdown-it": "^14.2.0",
     "markdown-it-ins": "^4.0.0",
     "markdown-it-mark": "^4.0.0",
     "markdown-it-task-lists": "^2.1.1",
@@ -96,7 +96,7 @@
     "react-transition-group": "^4.4.5",
     "react-use-measure": "^2.1.7",
     "react-window": "^1.8.11",
-    "vite-plugin-static-copy": "3.1.4",
+    "vite-plugin-static-copy": "4.1.1",
     "yup": "^1.7.1"
   },
   "peerDependencies": {
@@ -111,7 +111,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
     "@types/json-logic-js": "^2.0.8",
-    "@types/node": "^20.19.17",
+    "@types/node": "^26.1.1",
     "@types/object-hash": "^3.0.6",
     "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.3",
@@ -123,12 +123,12 @@
     "eslint-plugin-react-compiler": "^19.1.0-rc.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^30.2.0",
-    "npm-run-all": "^4.1.5",
+    "npm-run-all2": "^6.2.6",
     "react-router": "^6.30.2",
     "react-router-dom": "^6.30.2",
     "ts-jest": "^29.4.5",
     "ts-node": "^10.9.2",
-    "tsd": "^0.31.2",
+    "tsd": "^0.33.0",
     "typescript": "^5.9.3",
     "vite": "^7.2.4"
   },
@@ -163,6 +163,10 @@
       "^.+\\.tsx?$": "ts-jest"
     },
     "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/dist/"
+    ],
     "moduleFileExtensions": [
       "ts",
       "tsx",
@@ -172,6 +176,9 @@
       "node"
     ],
     "testEnvironment": "node",
+    "setupFiles": [
+      "<rootDir>/test/setup_jsdom.js"
+    ],
     "moduleNameMapper": {
       "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
     }

package/src/app/Scaffold.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useCallback } from "react";
-import { ChevronLeftIcon, cls, defaultBorderMixin, IconButton, MenuIcon, Sheet, Tooltip } from "@firecms/ui";
+import { cls, defaultBorderMixin, IconButton, MenuIcon, Sheet } from "@firecms/ui";
 import equal from "react-fast-compare"
 import { useLargeLayout } from "../hooks";
 import { ErrorBoundary } from "../components";
@@ -70,31 +70,51 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
         const includeDrawer = drawerChildren.length > 0;
         const largeLayout = useLargeLayout();
 
-        const [drawerOpen, setDrawerOpen] = React.useState(false);
+        const [drawerOpen, setDrawerOpen] = React.useState(() => {
+            try {
+                return localStorage.getItem("firecms_drawer_open") === "true";
+            } catch {
+                return false;
+            }
+        });
         const [onHover, setOnHover] = React.useState(false);
 
         const setOnHoverTrue = useCallback(() => setOnHover(true), []);
-        const setOnHoverFalse = useCallback(() => setOnHover(false), []);
+        const setOnHoverFalse = useCallback(() => {
+            // Don't collapse the drawer while a popover/dropdown is open
+            if (typeof document !== "undefined" && document.querySelector("[data-radix-popper-content-wrapper]")) return;
+            setOnHover(false);
+        }, []);
 
         const handleDrawerOpen = useCallback(() => {
             setDrawerOpen(true);
+            try {
+                localStorage.setItem("firecms_drawer_open", "true");
+            } catch { /* ignore */ }
         }, []);
 
         const handleDrawerClose = useCallback(() => {
             setDrawerOpen(false);
+            try {
+                localStorage.setItem("firecms_drawer_open", "false");
+            } catch { /* ignore */ }
         }, []);
 
-        const computedDrawerOpen: boolean = drawerOpen || Boolean(largeLayout && autoOpenDrawer && onHover);
+        // Pinned-open state only; hover is tracked separately so it can *float*
+        // over the content instead of pushing it.
+        const computedDrawerOpen: boolean = drawerOpen;
+        const computedDrawerHovered: boolean = Boolean(largeLayout && onHover);
 
         const hasAppBar = Boolean(appBarChildren.length > 0);
         return (
             <AppContext.Provider value={{
                 logo,
                 hasDrawer: includeDrawer,
-                drawerHovered: onHover,
+                drawerHovered: computedDrawerHovered,
                 drawerOpen: computedDrawerOpen,
                 closeDrawer: handleDrawerClose,
                 openDrawer: handleDrawerOpen,
+                closeHover: setOnHoverFalse,
                 autoOpenDrawer
             }}>
                 <div
@@ -116,7 +136,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
                         onMouseMove={setOnHoverTrue}
                         onMouseLeave={setOnHoverFalse}
                         open={computedDrawerOpen}
-                        hovered={onHover}
+                        hovered={computedDrawerHovered}
                         setDrawerOpen={setDrawerOpen}>
                         {includeDrawer && drawerChildren}
                     </DrawerWrapper>
@@ -165,49 +185,30 @@ function DrawerWrapper(props: {
 }) {
 
     const { t } = useTranslation();
-    const width = !props.displayed ? 0 : (props.open ? DRAWER_WIDTH : 72);
+
+    // Layout width is the space the drawer occupies in the flex row; the visual
+    // width is how wide the drawer actually renders. When hovered (but not
+    // pinned open) the layout width stays collapsed while the visual width
+    // expands, so the drawer *floats* over the content instead of pushing it.
+    const layoutWidth = !props.displayed ? 0 : (props.open ? DRAWER_WIDTH : 72);
+    const visualWidth = !props.displayed ? 0 : ((props.open || props.hovered) ? DRAWER_WIDTH : 72);
+    const isFloating = props.hovered && !props.open;
+
+    const transition = "left 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms";
+
     const innerDrawer = <div
-        className={"relative h-full no-scrollbar overflow-y-auto overflow-x-hidden"}
+        className={cls("h-full overflow-hidden", defaultBorderMixin,
+            isFloating
+                ? "absolute top-0 left-0 bottom-0 z-30 bg-surface-50 dark:bg-surface-900 shadow-lg border-r"
+                : "relative bg-surface-50 dark:bg-surface-900")}
         style={{
-            width,
-            transition: "left 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+            width: visualWidth,
+            transition
         }}
     >
-
-        {!props.open && props.displayed && (
-            <Tooltip title={t("open_menu")}
-                side="right"
-                sideOffset={12}
-                asChild={true}>
-                <div
-                    className="ml-2 fixed top-1 left-2 sm:top-2 sm:left-2 !bg-surface-50 dark:!bg-surface-900 rounded-full w-fit z-20">
-                    <IconButton
-                        color="inherit"
-                        aria-label={t("open_menu")}
-                        onClick={() => props.setDrawerOpen(true)}
-                        size="large"
-                    >
-                        <MenuIcon size="small" />
-                    </IconButton>
-                </div>
-            </Tooltip>
-        )}
-
-        <div
-            className={`z-20 absolute right-0 top-4 ${props.open ? "opacity-100" : "opacity-0 invisible"
-                } transition-opacity duration-200 ease-in-out`}>
-            <IconButton
-                aria-label={t("close_drawer")}
-                onClick={() => props.setDrawerOpen(false)}
-            >
-                <ChevronLeftIcon />
-            </IconButton>
-        </div>
-
         <div className={"flex flex-col h-full"}>
             {props.children}
         </div>
-
     </div>;
 
     const largeLayout = useLargeLayout();
@@ -238,13 +239,14 @@ function DrawerWrapper(props: {
 
     return (
         <div
-            className="z-20 relative"
+            className="z-20 relative flex-shrink-0 overflow-visible"
             onMouseEnter={props.onMouseEnter}
             onMouseMove={props.onMouseMove}
             onMouseLeave={props.onMouseLeave}
             style={{
-                width,
-                transition: "left 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+                width: layoutWidth,
+                minWidth: layoutWidth,
+                transition
             }}>
 
             {innerDrawer}