@firecms/core 3.3.0-canary.451aa49 → 3.3.0-canary.5906216

package/dist/locales/pl.d.ts

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

package/dist/preview/components/ArrayEnumPreview.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { EnumValueConfig } from "../../types";
 import { PreviewSize } from "../PropertyPreviewProps";
 /**
@@ -8,4 +9,4 @@ export declare function ArrayEnumPreview({ name, value, enumValues, size }: {
     name: string | undefined;
     enumValues: EnumValueConfig[];
     size: PreviewSize;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/preview/components/AsyncPreviewComponent.d.ts

@@ -8,4 +8,4 @@ export interface AsyncPreviewComponentProps {
  *
  * @group Preview components
  */
-export declare const AsyncPreviewComponent: React.MemoExoticComponent<(<M extends Record<string, any>>({ builder }: AsyncPreviewComponentProps) => import("react/jsx-runtime").JSX.Element)>;
+export declare const AsyncPreviewComponent: React.MemoExoticComponent<(<M extends Record<string, any>>({ builder }: AsyncPreviewComponentProps) => React.JSX.Element)>;

package/dist/preview/components/EmptyValue.d.ts

@@ -1,4 +1,5 @@
+import React from "react";
 /**
  * @group Preview components
  */
-export declare function EmptyValue(): import("react/jsx-runtime").JSX.Element;
+export declare function EmptyValue(): React.JSX.Element;

package/dist/preview/components/EnumValuesChip.d.ts

@@ -10,4 +10,4 @@ export interface EnumValuesChipProps {
 /**
  * @group Preview components
  */
-export declare function EnumValuesChip({ enumValues, enumKey, size, className, children }: EnumValuesChipProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function EnumValuesChip({ enumValues, enumKey, size, className, children }: EnumValuesChipProps): React.JSX.Element | null;

package/dist/preview/components/ImagePreview.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { PreviewSize } from "../PropertyPreviewProps";
 /**
  * @group Preview components
@@ -13,4 +14,4 @@ export interface ImagePreviewProps {
 /**
  * @group Preview components
  */
-export declare function ImagePreview({ size, url, fill }: ImagePreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImagePreview({ size, url, fill }: ImagePreviewProps): React.JSX.Element;

package/dist/preview/components/ReferencePreview.d.ts

@@ -14,4 +14,4 @@ export type ReferencePreviewProps = {
 /**
  * @group Preview components
  */
-export declare const ReferencePreview: (props: ReferencePreviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ReferencePreview: (props: ReferencePreviewProps) => React.JSX.Element;

package/dist/preview/components/StorageThumbnail.d.ts

@@ -11,5 +11,5 @@ type StorageThumbnailProps = {
  * @group Preview components
  */
 export declare const StorageThumbnail: React.FunctionComponent<StorageThumbnailProps>;
-export declare function StorageThumbnailInternal({ storeUrl, interactive, storagePathOrDownloadUrl, size, fill }: StorageThumbnailProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function StorageThumbnailInternal({ storeUrl, interactive, storagePathOrDownloadUrl, size, fill }: StorageThumbnailProps): React.JSX.Element | null;
 export {};

package/dist/preview/components/UserPreview.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * Preview component for displaying user information.
@@ -5,4 +6,4 @@ import { PropertyPreviewProps } from "../PropertyPreviewProps";
  *
  * @group Preview components
  */
-export declare function UserPreview({ value }: PropertyPreviewProps<string>): import("react/jsx-runtime").JSX.Element;
+export declare function UserPreview({ value }: PropertyPreviewProps<string>): React.JSX.Element;

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/ArrayOfMapsPreview.d.ts

@@ -1,5 +1,6 @@
+import React from "react";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function ArrayOfMapsPreview({ propertyKey, value, property: inputProperty, size, }: PropertyPreviewProps<Record<string, any>[]>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ArrayOfMapsPreview({ propertyKey, value, property: inputProperty, size, }: PropertyPreviewProps<Record<string, any>[]>): React.JSX.Element | null;

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

@@ -2,4 +2,4 @@ import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function ArrayOfReferencesPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): import("react/jsx-runtime").JSX.Element;
+export declare function ArrayOfReferencesPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): import("react").JSX.Element;

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

@@ -1,5 +1,6 @@
+import React from "react";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function ArrayOfStorageComponentsPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ArrayOfStorageComponentsPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): React.JSX.Element | null;

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

@@ -1,5 +1,6 @@
+import React from "react";
 import { PropertyPreviewProps } from "../../preview";
 /**
  * @group Preview components
  */
-export declare function ArrayOfStringsPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<string[]>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ArrayOfStringsPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<string[]>): React.JSX.Element | null;

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

@@ -1,5 +1,6 @@
+import React from "react";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function ArrayOneOfPreview({ propertyKey, value, property: inputProperty, size, }: PropertyPreviewProps<any[]>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ArrayOneOfPreview({ propertyKey, value, property: inputProperty, size, }: PropertyPreviewProps<any[]>): React.JSX.Element | null;

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

@@ -2,4 +2,4 @@ import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function ArrayPropertyEnumPreview({ propertyKey, value, property, size }: PropertyPreviewProps<string[] | number[]>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ArrayPropertyEnumPreview({ propertyKey, value, property, size }: PropertyPreviewProps<string[] | number[]>): import("react").JSX.Element | null;

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

@@ -1,5 +1,6 @@
+import React from "react";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function ArrayPropertyPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ArrayPropertyPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): React.JSX.Element | null;

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/preview/property_previews/MapPropertyPreview.d.ts

@@ -1,8 +1,9 @@
+import React from "react";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function MapPropertyPreview<T extends Record<string, any> = Record<string, any>>({ propertyKey, value, property, size }: PropertyPreviewProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export declare function MapPropertyPreview<T extends Record<string, any> = Record<string, any>>({ propertyKey, value, property, size }: PropertyPreviewProps<T>): React.JSX.Element | null;
 export declare function KeyValuePreview({ value }: {
     value: any;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): React.JSX.Element | null;

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

@@ -1,4 +1,5 @@
 import { ResolvedProperty } from "../../types";
+import React from "react";
 import { PreviewSize } from "../PropertyPreviewProps";
 export interface SkeletonPropertyComponentProps {
     property: ResolvedProperty;
@@ -8,7 +9,7 @@ export interface SkeletonPropertyComponentProps {
  * @group Preview components
  */
 export declare function SkeletonPropertyComponent({ property, size }: SkeletonPropertyComponentProps): any;
-export declare function renderSkeletonImageThumbnail(size: PreviewSize, fill?: boolean): import("react/jsx-runtime").JSX.Element;
-export declare function renderSkeletonText(index?: number, width?: number): import("react/jsx-runtime").JSX.Element;
-export declare function renderSkeletonCaptionText(index?: number): import("react/jsx-runtime").JSX.Element;
-export declare function renderSkeletonIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function renderSkeletonImageThumbnail(size: PreviewSize, fill?: boolean): React.JSX.Element;
+export declare function renderSkeletonText(index?: number, width?: number): React.JSX.Element;
+export declare function renderSkeletonCaptionText(index?: number): React.JSX.Element;
+export declare function renderSkeletonIcon(): React.JSX.Element;

package/dist/routes/FireCMSRoute.d.ts

@@ -1 +1,2 @@
-export declare function FireCMSRoute(): import("react/jsx-runtime").JSX.Element | null;
+import React from "react";
+export declare function FireCMSRoute(): React.JSX.Element | null;

package/dist/types/collections.d.ts

@@ -232,6 +232,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 +636,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/translations.d.ts

@@ -412,8 +412,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 +481,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;

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

@@ -12,6 +12,7 @@ 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

@@ -24,10 +24,20 @@ export interface NavigationViewEntityCustomInternal<M extends Record<string, any
     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;
     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;
 /**

package/dist/util/property_utils.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { AuthController, EntityCollection, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedProperties, ResolvedProperty } from "../types";
 export declare function isReferenceProperty(authController: AuthController, propertyOrBuilder: PropertyOrBuilder, fields: Record<string, PropertyConfig>): boolean | null;
 export declare function getIdIcon(size: "small" | "medium" | "large"): React.ReactNode;
-export declare function getIconForWidget(widget: PropertyConfig | undefined, size: "small" | "medium" | "large"): import("react/jsx-runtime").JSX.Element;
+export declare function getIconForWidget(widget: PropertyConfig | undefined, size: "small" | "medium" | "large"): React.JSX.Element;
 export declare function getIconForProperty(property: PropertyOrBuilder<any> | ResolvedProperty<any>, size?: "small" | "medium" | "large", fields?: Record<string, PropertyConfig>): React.ReactNode;
 export declare function getColorForProperty(property: PropertyOrBuilder, fields: Record<string, PropertyConfig>): string;
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.3.0-canary.451aa49",
+  "version": "3.3.0-canary.5906216",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -10,7 +10,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/firecmsco/firecms.git",
+    "url": "https://github.com/FireCMSco/firecms.git",
     "directory": "packages/firecms_core"
   },
   "main": "./dist/index.umd.js",
@@ -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.451aa49",
-    "@firecms/ui": "^3.3.0-canary.451aa49",
+    "@firecms/formex": "^3.3.0-canary.5906216",
+    "@firecms/ui": "^3.3.0-canary.5906216",
     "@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"
   },
@@ -136,7 +136,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "772b4a7f64893038f0cc13669d6bc66ec858fc49",
+  "gitHead": "9ecf37abf793bd2f2daaaed6f517ee5ee19b01ae",
   "publishConfig": {
     "access": "public"
   },
@@ -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}