@firecms/core 3.0.0-canary.285 → 3.0.0-canary.287

package/dist/core/EntityEditView.d.ts

@@ -11,6 +11,12 @@ export type OnUpdateParams = {
     selectedTab?: string;
     collection: EntityCollection<any>;
 };
+export type BarActionsParams = {
+    values: object;
+    status: EntityStatus;
+    path: string;
+    entityId?: string;
+};
 export type OnTabChangeParams<M extends Record<string, any>> = {
     path: string;
     entityId?: string;
@@ -32,11 +38,11 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
     copy?: boolean;
     selectedTab?: string;
     parentCollectionIds: string[];
-    onValuesModified?: (modified: boolean) => void;
+    onValuesModified?: (modified: boolean, values: M) => void;
     onSaved?: (params: OnUpdateParams) => void;
     onTabChange?: (props: OnTabChangeParams<M>) => void;
     layout?: "side_panel" | "full_screen";
-    barActions?: React.ReactNode;
+    barActions?: (params: BarActionsParams) => React.ReactNode;
     formProps?: Partial<EntityFormProps<M>>;
 }
 /**

package/dist/form/EntityForm.d.ts

@@ -19,7 +19,7 @@ export type EntityFormProps<M extends Record<string, any>> = {
     entity?: Entity<M>;
     databaseId?: string;
     onIdChange?: (id: string) => void;
-    onValuesModified?: (modified: boolean) => void;
+    onValuesModified?: (modified: boolean, values: M) => void;
     onSaved?: (params: OnUpdateParams) => void;
     initialDirtyValues?: Partial<M>;
     onFormContextReady?: (formContext: FormContext) => void;

package/dist/form/components/LocalChangesMenu.d.ts

@@ -0,0 +1,11 @@
+import { FormexController } from "@firecms/formex";
+import { ResolvedProperties } from "../../types";
+interface LocalChangesMenuProps<M extends object> {
+    cacheKey: string;
+    localChangesData: Partial<M>;
+    formex: FormexController<M>;
+    onClearLocalChanges?: () => void;
+    properties: ResolvedProperties<M>;
+}
+export declare function LocalChangesMenu<M extends object>({ localChangesData, formex, onClearLocalChanges, cacheKey, properties }: LocalChangesMenuProps<M>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.es.js

@@ -2,10 +2,10 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { c } from "react-compiler-runtime";
 import * as React from "react";
 import React__default, { useRef, useEffect, useContext, useCallback, useMemo, useState, createElement, createRef, createContext, forwardRef, useLayoutEffect } from "react";
-import { getColorSchemeForSeed, CHIP_COLORS, FunctionsIcon, CircleIcon, iconKeys, coolIconKeys, Icon, Tooltip, ErrorIcon, Typography, IconButton, ContentCopyIcon, OpenInNewIcon, DescriptionIcon, cls, Skeleton, Chip, defaultBorderMixin, KeyboardTabIcon, Checkbox, AccountCircleIcon, Markdown, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, paperMixin, EditIcon, DoNotDisturbOnIcon, Menu, MenuItem, MoreVertIcon, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, CloseIcon, TextField, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogTitle, DialogContent, DialogActions, FileCopyIcon, DeleteIcon, AddIcon, StarIcon, Collapse, ExpandablePanel, ArrowForwardIcon, Card, cardMixin, cardClickableMixin, Container, LoadingButton, Alert, CheckIcon, NotesIcon, InfoIcon, fieldBackgroundMixin, RemoveIcon, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, ArrowDropDownIcon, FilterListOffIcon, SearchIcon, Avatar, DarkModeIcon, LightModeIcon, BrightnessMediumIcon, LogoutIcon, HandleIcon, KeyboardArrowUpIcon, KeyboardArrowDownIcon, debounce, Sheet, Tab, Tabs, CodeIcon, OpenInFullIcon, ViewStreamIcon, RepeatIcon, BallotIcon, ScheduleIcon, AddLinkIcon, LinkIcon, DriveFolderUploadIcon, UploadFileIcon, FormatListNumberedIcon, NumbersIcon, PersonIcon, ListAltIcon, ListIcon, FlagIcon, MailIcon, HttpIcon, FormatQuoteIcon, SubjectIcon, ShortTextIcon, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
+import { getColorSchemeForSeed, CHIP_COLORS, FunctionsIcon, CircleIcon, iconKeys, coolIconKeys, Icon, Tooltip, ErrorIcon, Typography, IconButton, ContentCopyIcon, OpenInNewIcon, DescriptionIcon, cls, Skeleton, Chip, defaultBorderMixin, KeyboardTabIcon, Checkbox, AccountCircleIcon, Markdown, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, paperMixin, EditIcon, DoNotDisturbOnIcon, Menu, MenuItem, MoreVertIcon, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, CloseIcon, TextField, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogTitle, DialogContent, DialogActions, FileCopyIcon, DeleteIcon, AddIcon, StarIcon, Collapse, ExpandablePanel, ArrowForwardIcon, Card, cardMixin, cardClickableMixin, Container, LoadingButton, WarningIcon, KeyboardArrowDownIcon, VisibilityIcon, CheckIcon, CancelIcon, Alert, NotesIcon, InfoIcon, fieldBackgroundMixin, RemoveIcon, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, ArrowDropDownIcon, FilterListOffIcon, SearchIcon, Avatar, DarkModeIcon, LightModeIcon, BrightnessMediumIcon, LogoutIcon, HandleIcon, KeyboardArrowUpIcon, debounce, Sheet, Tab, Tabs, CodeIcon, OpenInFullIcon, ViewStreamIcon, RepeatIcon, BallotIcon, ScheduleIcon, AddLinkIcon, LinkIcon, DriveFolderUploadIcon, UploadFileIcon, FormatListNumberedIcon, NumbersIcon, PersonIcon, ListAltIcon, ListIcon, FlagIcon, MailIcon, HttpIcon, FormatQuoteIcon, SubjectIcon, ShortTextIcon, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
 import { SnackbarProvider as SnackbarProvider$1, useSnackbar } from "notistack";
 import hash from "object-hash";
-import { getIn, useFormex, setIn, useCreateFormex, flattenKeys, Formex, Field } from "@firecms/formex";
+import { getIn, useFormex, flattenKeys, setIn, useCreateFormex, Formex, Field } from "@firecms/formex";
 import { useNavigate, useLocation, Link, NavLink, Routes, Route, createBrowserRouter, RouterProvider } from "react-router-dom";
 import Fuse from "fuse.js";
 import equal from "react-fast-compare";
@@ -1054,6 +1054,12 @@ const applyPermissionsFunctionIfEmpty = (collections, permissionsBuilder) => {
     };
   });
 };
+function getLocalChangesBackup(collection) {
+  if (!collection.localChangesBackup) {
+    return "manual_apply";
+  }
+  return collection.localChangesBackup;
+}
 const kebabCaseRegex = /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g;
 const toKebabCase = (str) => {
   const regExpMatchArray = str.match(kebabCaseRegex);
@@ -9757,7 +9763,6 @@ function customReviver(key, value) {
   return value;
 }
 function saveEntityToCache(path, data) {
-  entityCache.set(path, data);
   if (isLocalStorageAvailable) {
     try {
       const key = LOCAL_STORAGE_PREFIX + path;
@@ -9768,17 +9773,22 @@ function saveEntityToCache(path, data) {
     }
   }
 }
-function getEntityFromCache(path, useLocalStorage = true) {
-  if (entityCache.has(path)) {
-    return entityCache.get(path);
-  }
-  if (isLocalStorageAvailable && useLocalStorage) {
+function removeEntityFromMemoryCache(path) {
+  entityCache.delete(path);
+}
+function saveEntityToMemoryCache(path, data) {
+  entityCache.set(path, data);
+}
+function getEntityFromMemoryCache(path) {
+  return entityCache.get(path);
+}
+function getEntityFromCache(path) {
+  if (isLocalStorageAvailable) {
     try {
       const key = LOCAL_STORAGE_PREFIX + path;
       const entityString = localStorage.getItem(key);
       if (entityString) {
         const entity = JSON.parse(entityString, customReviver);
-        entityCache.set(path, entity);
         return entity;
       }
     } catch (error) {
@@ -9787,12 +9797,7 @@ function getEntityFromCache(path, useLocalStorage = true) {
   }
   return void 0;
 }
-function hasEntityInCache(path) {
-  return entityCache.has(path);
-}
 function removeEntityFromCache(path) {
-  console.debug("Removing entity from cache", path);
-  entityCache.delete(path);
   if (isLocalStorageAvailable) {
     try {
       const key = LOCAL_STORAGE_PREFIX + path;
@@ -9829,7 +9834,8 @@ const EntityCollectionRowActions = function EntityCollectionRowActions2({
   const hasCollapsedActions = actions.some((a) => a.collapsed || a.collapsed === void 0);
   const collapsedActions = actions.filter((a_0) => a_0.collapsed || a_0.collapsed === void 0);
   const uncollapsedActions = actions.filter((a_1) => a_1.collapsed === false);
-  const hasDraft = hasEntityInCache(fullPath + "/" + entity.id);
+  const enableLocalChangesBackup = collection ? getLocalChangesBackup(collection) : false;
+  const hasDraft = enableLocalChangesBackup ? getEntityFromCache(fullPath + "/" + entity.id) : false;
   return /* @__PURE__ */ jsxs("div", { className: cls("h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 dark:bg-opacity-90 z-10", frozen ? "sticky left-0" : ""), onClick: useCallback((event) => {
     event.stopPropagation();
   }, []), style: {
@@ -15164,6 +15170,273 @@ function buildSideActions$1({
     savingError && /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Typography, { color: "error", children: savingError.message }) })
   ] });
 }
+function LocalChangesMenu(t0) {
+  const $ = c(43);
+  const {
+    localChangesData,
+    formex,
+    onClearLocalChanges,
+    cacheKey,
+    properties
+  } = t0;
+  const snackbarController = useSnackbarController();
+  const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
+  const [open, setOpen] = useState(false);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      setOpen(true);
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const handleOpenMenu = t1;
+  let t2;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      setOpen(false);
+    };
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const handleCloseMenu = t2;
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = () => {
+      setPreviewDialogOpen(true);
+      handleCloseMenu();
+    };
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const handlePreview = t3;
+  let t4;
+  if ($[3] !== formex || $[4] !== localChangesData || $[5] !== onClearLocalChanges || $[6] !== snackbarController) {
+    t4 = () => {
+      const mergedValues = mergeDeep(formex.values, localChangesData);
+      const touched = {
+        ...formex.touched
+      };
+      const newTouched = flattenKeys(localChangesData);
+      newTouched.forEach((key) => {
+        touched[key] = true;
+      });
+      formex.setTouched(touched);
+      formex.setValues(mergedValues);
+      snackbarController.open({
+        type: "info",
+        message: "Local changes applied to the form"
+      });
+      handleCloseMenu();
+      onClearLocalChanges?.();
+    };
+    $[3] = formex;
+    $[4] = localChangesData;
+    $[5] = onClearLocalChanges;
+    $[6] = snackbarController;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  const handleApply = t4;
+  let t5;
+  if ($[8] !== cacheKey || $[9] !== onClearLocalChanges || $[10] !== snackbarController) {
+    t5 = () => {
+      removeEntityFromCache(cacheKey);
+      snackbarController.open({
+        type: "info",
+        message: "Local changes discarded"
+      });
+      handleCloseMenu();
+      onClearLocalChanges?.();
+    };
+    $[8] = cacheKey;
+    $[9] = onClearLocalChanges;
+    $[10] = snackbarController;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  const handleDiscard = t5;
+  let t6;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = /* @__PURE__ */ jsx(WarningIcon, { size: "smallest", className: "mr-1 text-yellow-600 dark:text-yellow-400" });
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = /* @__PURE__ */ jsxs(Button, { size: "small", className: "font-semibold text-xs rounded-full px-4 py-1 bg-yellow-200 dark:bg-yellow-900 hover:bg-yellow-300 dark:hover:bg-yellow-800 text-yellow-800 dark:text-yellow-200", onClick: handleOpenMenu, children: [
+      t6,
+      "Unsaved Local changes",
+      /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: "smallest" })
+    ] });
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  let t8;
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = /* @__PURE__ */ jsx("div", { className: "max-w-xs px-4 py-4 text-sm text-gray-700 dark:text-gray-300", children: "This document was edited locally and has unsaved changes." });
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  let t9;
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = /* @__PURE__ */ jsxs(MenuItem, { dense: true, onClick: handlePreview, children: [
+      /* @__PURE__ */ jsx(VisibilityIcon, { size: "small" }),
+      "Preview Changes"
+    ] });
+    $[15] = t9;
+  } else {
+    t9 = $[15];
+  }
+  let t10;
+  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = /* @__PURE__ */ jsx(CheckIcon, { size: "small" });
+    $[16] = t10;
+  } else {
+    t10 = $[16];
+  }
+  let t11;
+  if ($[17] !== handleApply) {
+    t11 = /* @__PURE__ */ jsxs(MenuItem, { dense: true, onClick: handleApply, children: [
+      t10,
+      "Apply Changes"
+    ] });
+    $[17] = handleApply;
+    $[18] = t11;
+  } else {
+    t11 = $[18];
+  }
+  let t12;
+  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = /* @__PURE__ */ jsx(CancelIcon, { size: "small" });
+    $[19] = t12;
+  } else {
+    t12 = $[19];
+  }
+  let t13;
+  if ($[20] !== handleDiscard) {
+    t13 = /* @__PURE__ */ jsxs(MenuItem, { dense: true, onClick: handleDiscard, children: [
+      t12,
+      "Discard Local Changes"
+    ] });
+    $[20] = handleDiscard;
+    $[21] = t13;
+  } else {
+    t13 = $[21];
+  }
+  let t14;
+  if ($[22] !== open || $[23] !== t11 || $[24] !== t13) {
+    t14 = /* @__PURE__ */ jsxs(Menu, { trigger: t7, open, onOpenChange: setOpen, children: [
+      t8,
+      t9,
+      t11,
+      t13
+    ] });
+    $[22] = open;
+    $[23] = t11;
+    $[24] = t13;
+    $[25] = t14;
+  } else {
+    t14 = $[25];
+  }
+  let t15;
+  let t16;
+  if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+    t15 = /* @__PURE__ */ jsx("h3", { className: "text-2xl mb-4", children: "Preview Local Changes" });
+    t16 = /* @__PURE__ */ jsx("p", { className: "mb-4", children: "These are the local changes that will be applied to the form." });
+    $[26] = t15;
+    $[27] = t16;
+  } else {
+    t15 = $[26];
+    t16 = $[27];
+  }
+  let t17;
+  if ($[28] !== localChangesData || $[29] !== properties) {
+    t17 = flattenKeys(localChangesData).map((key_0) => {
+      const value = getIn(localChangesData, key_0);
+      const property = getPropertyInPath(properties, key_0);
+      if (!property) {
+        return null;
+      }
+      return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-x-4 px-4 py-3 items-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "col-span-3 text-right", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-gray-500 dark:text-gray-400 break-words", children: property.name || key_0 }) }),
+        /* @__PURE__ */ jsx("div", { className: "col-span-9", children: /* @__PURE__ */ jsx(PropertyPreview, { propertyKey: key_0, value, property, size: "small" }) })
+      ] }, key_0);
+    });
+    $[28] = localChangesData;
+    $[29] = properties;
+    $[30] = t17;
+  } else {
+    t17 = $[30];
+  }
+  let t18;
+  if ($[31] !== t17) {
+    t18 = /* @__PURE__ */ jsxs(DialogContent, { children: [
+      t15,
+      t16,
+      /* @__PURE__ */ jsx("div", { className: `border rounded-lg divide-y divide-surface-200 divide-surface-opacity-40 dark:divide-surface-700 dark:divide-opacity-40 ${defaultBorderMixin}`, children: t17 })
+    ] });
+    $[31] = t17;
+    $[32] = t18;
+  } else {
+    t18 = $[32];
+  }
+  let t19;
+  if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+    t19 = /* @__PURE__ */ jsx(Button, { onClick: () => setPreviewDialogOpen(false), children: "Close" });
+    $[33] = t19;
+  } else {
+    t19 = $[33];
+  }
+  let t20;
+  if ($[34] !== handleApply) {
+    t20 = /* @__PURE__ */ jsxs(DialogActions, { children: [
+      t19,
+      /* @__PURE__ */ jsx(Button, { variant: "filled", onClick: () => {
+        handleApply();
+        setPreviewDialogOpen(false);
+      }, children: "Apply changes" })
+    ] });
+    $[34] = handleApply;
+    $[35] = t20;
+  } else {
+    t20 = $[35];
+  }
+  let t21;
+  if ($[36] !== previewDialogOpen || $[37] !== t18 || $[38] !== t20) {
+    t21 = /* @__PURE__ */ jsxs(Dialog, { open: previewDialogOpen, onOpenChange: setPreviewDialogOpen, maxWidth: "4xl", children: [
+      t18,
+      t20
+    ] });
+    $[36] = previewDialogOpen;
+    $[37] = t18;
+    $[38] = t20;
+    $[39] = t21;
+  } else {
+    t21 = $[39];
+  }
+  let t22;
+  if ($[40] !== t14 || $[41] !== t21) {
+    t22 = /* @__PURE__ */ jsxs(Fragment, { children: [
+      t14,
+      t21
+    ] });
+    $[40] = t14;
+    $[41] = t21;
+    $[42] = t22;
+  } else {
+    t22 = $[42];
+  }
+  return t22;
+}
 function extractTouchedValues(values, touched) {
   let acc = {};
   if (!touched || typeof touched !== "object") {
@@ -15251,6 +15524,12 @@ function EntityForm({
   const [entityIdError, setEntityIdError] = useState(false);
   const [savingError, setSavingError] = useState();
   const autoSave = collection.formAutoSave && !collection.customId;
+  const baseInitialValues = useMemo(() => getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs), [authController, collection, path, status, entity, customizationController.propertyConfigs]);
+  const localChangesDataRaw = useMemo(() => entityId ? getEntityFromCache(path + "/" + entityId) : getEntityFromCache(path + "#new"), [entityId, path]);
+  const [localChangesCleared, setLocalChangesCleared] = useState(false);
+  const localChangesBackup = getLocalChangesBackup(collection);
+  const autoApplyLocalChanges = localChangesBackup === "auto_apply";
+  const manualApplyLocalChanges = localChangesBackup === "manual_apply";
   const onSubmit = (values, formexController) => {
     if (mustSetCustomId && !entityId) {
       console.error("Missing custom Id");
@@ -15281,12 +15560,31 @@ function EntityForm({
       formexController.setSubmitting(false);
     });
   };
-  const baseInitialValues = getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs);
-  const initialValues = initialDirtyValues ? mergeDeep(baseInitialValues, initialDirtyValues) : baseInitialValues;
-  const initialDirty = Boolean(initialDirtyValues) && initialDirtyValues && Object.keys(initialDirtyValues).length > 0;
+  const [initialValues_0, initialDirty_0] = useMemo(() => {
+    const initialValuesWithLocalChanges = autoApplyLocalChanges && localChangesDataRaw ? mergeDeep(baseInitialValues, localChangesDataRaw) : baseInitialValues;
+    const initialValues = initialDirtyValues ? mergeDeep(initialValuesWithLocalChanges, initialDirtyValues) : initialValuesWithLocalChanges;
+    const initialDirty = Boolean(initialDirtyValues) && initialDirtyValues && Object.keys(initialDirtyValues).length > 0;
+    return [initialValues, initialDirty];
+  }, [autoApplyLocalChanges, localChangesDataRaw, baseInitialValues, initialDirtyValues]);
+  const localChangesData = useMemo(() => {
+    if (!localChangesDataRaw) {
+      return void 0;
+    }
+    let filteredChanges = {};
+    const flattenedKeys = flattenKeys(localChangesDataRaw);
+    flattenedKeys.forEach((key) => {
+      const localValue = getIn(localChangesDataRaw, key);
+      const initialValue = getIn(initialValues_0, key);
+      if (!equal(localValue, initialValue)) {
+        filteredChanges = setIn(filteredChanges, key, localValue);
+      }
+    });
+    return filteredChanges;
+  }, [localChangesDataRaw, initialValues_0]);
+  const hasLocalChanges = !localChangesCleared && localChangesData && Object.keys(localChangesData).length > 0;
   const formex = formexProp ?? useCreateFormex({
-    initialValues,
-    initialDirty,
+    initialValues: initialValues_0,
+    initialDirty: initialDirty_0,
     initialTouched: initialDirtyValues ? flattenKeys(initialDirtyValues).reduce((previousValue, currentValue) => ({
       ...previousValue,
       [currentValue]: true
@@ -15294,13 +15592,13 @@ function EntityForm({
     onSubmit,
     onReset: () => {
       clearDirtyCache();
-      onValuesModified?.(false);
+      onValuesModified?.(false, initialValues_0);
     },
     onValuesChangeDeferred: (values_0, controller) => {
-      const key = status === "new" || status === "copy" ? path + "#new" : path + "/" + entityId;
+      const key_0 = status === "new" || status === "copy" ? path + "#new" : path + "/" + entityId;
       if (controller.dirty) {
         const touchedValues = extractTouchedValues(values_0, controller.touched);
-        saveEntityToCache(key, touchedValues);
+        saveEntityToCache(key_0, touchedValues);
       }
     },
     validation: (values_1) => {
@@ -15353,14 +15651,16 @@ function EntityForm({
   }, [snackbarController]);
   function clearDirtyCache() {
     if (status === "new" || status === "copy") {
+      removeEntityFromMemoryCache(path + "#new");
       removeEntityFromCache(path + "#new");
     } else {
+      removeEntityFromMemoryCache(path + "/" + entityId);
       removeEntityFromCache(path + "/" + entityId);
     }
   }
   const onSaveSuccess = (updatedEntity) => {
     clearDirtyCache();
-    onValuesModified?.(false);
+    onValuesModified?.(false, updatedEntity.values);
     if (!autoSave) snackbarController.open({
       type: "success",
       message: `${collection.singularName ?? collection.name}: Saved correctly`
@@ -15520,7 +15820,7 @@ function EntityForm({
   }, [doOnIdUpdate]);
   useEffect(() => {
     if (!autoSave) {
-      onValuesModified?.(modified);
+      onValuesModified?.(modified, formex.values);
     }
   }, [formex.dirty]);
   const modified = formex.dirty;
@@ -15532,11 +15832,11 @@ function EntityForm({
   useOnAutoSave(autoSave, formex, lastSavedValues, save);
   useEffect(() => {
     if (!autoSave && !formex.isSubmitting && underlyingChanges && entity) {
-      Object.entries(underlyingChanges).forEach(([key_0, value_0]) => {
-        const formValue = formex.values[key_0];
-        if (!equal(value_0, formValue) && !formex.touched[key_0]) {
-          console.debug("Updated value from the datasource:", key_0, value_0);
-          formex.setFieldValue(key_0, value_0 !== void 0 ? value_0 : null);
+      Object.entries(underlyingChanges).forEach(([key_1, value_0]) => {
+        const formValue = formex.values[key_1];
+        if (!equal(value_0, formValue) && !formex.touched[key_1]) {
+          console.debug("Updated value from the datasource:", key_1, value_0);
+          formex.setFieldValue(key_1, value_0 !== void 0 ? value_0 : null);
         }
       });
     }
@@ -15546,16 +15846,16 @@ function EntityForm({
     if (Builder) {
       return /* @__PURE__ */ jsx(Builder, { collection, entity, modifiedValues: formex.values, formContext });
     }
-    return /* @__PURE__ */ jsx(FormLayout, { children: formFieldKeys.map((key_1) => {
-      const property = resolvedCollection.properties[key_1];
+    return /* @__PURE__ */ jsx(FormLayout, { children: formFieldKeys.map((key_2) => {
+      const property = resolvedCollection.properties[key_2];
       if (property) {
-        const underlyingValueHasChanged = !!underlyingChanges && Object.keys(underlyingChanges).includes(key_1) && formex.touched[key_1];
+        const underlyingValueHasChanged = !!underlyingChanges && Object.keys(underlyingChanges).includes(key_2) && formex.touched[key_2];
         const disabled_0 = disabledProp || !autoSave && formex.isSubmitting || isReadOnly(property) || Boolean(property.disabled);
         const hidden = isHidden(property);
         if (hidden) return null;
         const widthPercentage = property.widthPercentage ?? 100;
         const cmsFormFieldProps = {
-          propertyKey: key_1,
+          propertyKey: key_2,
           disabled: disabled_0,
           property,
           includeDescription: property.description || property.longDescription,
@@ -15565,9 +15865,9 @@ function EntityForm({
           minimalistView: false,
           autoFocus: false
         };
-        return /* @__PURE__ */ jsx(FormEntry, { propertyKey: key_1, widthPercentage, children: /* @__PURE__ */ jsx(PropertyFieldBinding, { ...cmsFormFieldProps }) }, `field_${key_1}`);
+        return /* @__PURE__ */ jsx(FormEntry, { propertyKey: key_2, widthPercentage, children: /* @__PURE__ */ jsx(PropertyFieldBinding, { ...cmsFormFieldProps }) }, `field_${key_2}`);
       }
-      const additionalField = resolvedCollection.additionalFields?.find((f) => f.key === key_1);
+      const additionalField = resolvedCollection.additionalFields?.find((f) => f.key === key_2);
       if (additionalField && entity) {
         const Builder_0 = additionalField.Builder;
         if (!Builder_0 && !additionalField.value) {
@@ -15578,11 +15878,11 @@ function EntityForm({
           context
         })?.toString() });
         return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-          /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey: key_1, icon: /* @__PURE__ */ jsx(NotesIcon, { size: "small" }), title: additionalField.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
+          /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey: key_2, icon: /* @__PURE__ */ jsx(NotesIcon, { size: "small" }), title: additionalField.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
           /* @__PURE__ */ jsx("div", { className: cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar"), children: /* @__PURE__ */ jsx(ErrorBoundary, { children: child }) })
-        ] }, `additional_${key_1}`);
+        ] }, `additional_${key_2}`);
       }
-      console.warn(`Property ${key_1} not found in collection ${resolvedCollection.name} in properties or additional fields. Skipping.`);
+      console.warn(`Property ${key_2} not found in collection ${resolvedCollection.name} in properties or additional fields. Skipping.`);
       return null;
     }).filter(Boolean) });
   };
@@ -15617,7 +15917,10 @@ function EntityForm({
     values: baseInitialValues
   }), noValidate: true, className: cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", className), children: [
     /* @__PURE__ */ jsx("div", { id: `form_${path}`, className: cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit"), children: /* @__PURE__ */ jsxs("div", { className: cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10"), children: [
-      formex.dirty ? /* @__PURE__ */ jsx(Tooltip, { title: "Local unsaved changes", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsx(Chip, { size: "small", colorScheme: "orangeDarker", children: /* @__PURE__ */ jsx(EditIcon, { size: "smallest" }) }) }) : /* @__PURE__ */ jsx(Tooltip, { title: "In sync with the database", className: "self-end sticky top-4 z-10", children: /* @__PURE__ */ jsx(Chip, { size: "small", children: /* @__PURE__ */ jsx(CheckIcon, { size: "smallest" }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4 self-end sticky top-4 z-10", children: [
+        manualApplyLocalChanges && hasLocalChanges && /* @__PURE__ */ jsx(LocalChangesMenu, { cacheKey: status === "new" || status === "copy" ? path + "#new" : path + "/" + entityId, properties: resolvedCollection.properties, localChangesData, formex, onClearLocalChanges: () => setLocalChangesCleared(true) }),
+        formex.dirty ? /* @__PURE__ */ jsx(Tooltip, { title: "There are local unsaved changes", children: /* @__PURE__ */ jsx(Chip, { size: "small", colorScheme: "orangeDarker", children: /* @__PURE__ */ jsx(EditIcon, { size: "smallest" }) }) }) : /* @__PURE__ */ jsx(Tooltip, { title: "The current form is in sync with the database", children: /* @__PURE__ */ jsx(Chip, { size: "small", children: /* @__PURE__ */ jsx(CheckIcon, { size: "smallest" }) }) })
+      ] }),
       formView
     ] }) }),
     dialogActions
@@ -20427,7 +20730,7 @@ const EntityCollectionView = React__default.memo(function EntityCollectionView2(
       /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: "So empty..." }),
       /* @__PURE__ */ jsxs(Button, { color: "primary", variant: "outlined", onClick: onNewClick, className: "mt-4", children: [
         /* @__PURE__ */ jsx(AddIcon, {}),
-        "Create your first entity"
+        "Create your first entry"
       ] })
     ] }) : /* @__PURE__ */ jsx(Typography, { variant: "label", children: "No results with the applied filter/sort" }), hoverRow, inlineEditing: checkInlineEditing(), AdditionalHeaderWidget: buildAdditionalHeaderWidget, AddColumnComponent: addColumnComponentInternal, getIdColumnWidth, additionalIDHeaderWidget: /* @__PURE__ */ jsx(EntityIdHeaderWidget, { path: fullPath, fullIdPath: fullIdPath ?? fullPath, collection }), openEntityMode }, `collection_table_${fullPath}`),
     popupCell && /* @__PURE__ */ jsx(PopupFormField, { open: Boolean(popupCell), onClose: onPopupClose, cellRect: popupCell?.cellRect, propertyKey: popupCell?.propertyKey, collection, entityId: popupCell.entityId, tableKey: tableKey.current, customFieldValidator: uniqueFieldValidator, path: resolvedFullPath, onCellValueChange: onValueChange, container: containerRef.current }, `popup_form_${popupCell?.propertyKey}_${popupCell?.entityId}`),
@@ -23086,6 +23389,7 @@ function EntityJsonPreview(t0) {
 function createFormexStub(values) {
   const errorMessage = "You are in a read-only context. You cannot modify the formex controller.";
   return {
+    debugId: "",
     values,
     initialValues: values,
     touched: {},
@@ -23100,6 +23404,9 @@ function createFormexStub(values) {
     setValues: () => {
       throw new Error(errorMessage);
     },
+    setTouched(touched) {
+      throw new Error(errorMessage);
+    },
     setFieldValue: () => {
       throw new Error(errorMessage);
     },
@@ -23159,8 +23466,7 @@ function EntityEditView({
     databaseId: props.databaseId,
     useCache: false
   });
-  const enableLocalChangesBackup = props.collection.enableLocalChangesBackup !== void 0 ? props.collection.enableLocalChangesBackup : true;
-  const initialDirtyValues = entityId ? getEntityFromCache(props.path + "/" + entityId, enableLocalChangesBackup) : getEntityFromCache(props.path + "#new", enableLocalChangesBackup);
+  const initialDirtyValues = entityId ? getEntityFromMemoryCache(props.path + "/" + entityId) : getEntityFromMemoryCache(props.path + "#new");
   const authController = useAuthController();
   const initialStatus = props.copy ? "copy" : entityId ? "existing" : "new";
   const [status, setStatus] = useState(initialStatus);
@@ -23319,6 +23625,7 @@ function EntityEditViewInner({
     /* @__PURE__ */ jsx("div", { className: "h-16" })
   ] }) }) : null;
   const entityView = /* @__PURE__ */ jsx(EntityForm, { fullIdPath, collection, path, entityId: entityId ?? usedEntity?.id, onValuesModified, entity, initialDirtyValues, openEntityMode: layout, forceActionsAtTheBottom: actionsAtTheBottom, initialStatus: status, className: cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className), EntityFormActionsComponent: EntityEditViewFormActions, disabled: !canEdit, ...formProps, onEntityChange: (entity_0) => {
+    console.log("333 EntityEditView onEntityChange:", entity_0);
     setUsedEntity(entity_0);
     formProps?.onEntityChange?.(entity_0);
   }, onStatusChange: (status_0) => {
@@ -23341,7 +23648,12 @@ function EntityEditViewInner({
   const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
   let result = /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col h-full w-full bg-white dark:bg-surface-900", children: [
     shouldShowTopBar && /* @__PURE__ */ jsxs("div", { className: cls("h-14 items-center flex overflow-visible overflow-x-scroll w-full no-scrollbar h-14 border-b pl-2 pr-2 pt-1 flex bg-surface-50 dark:bg-surface-900", defaultBorderMixin), children: [
-      barActions,
+      barActions?.({
+        path: fullIdPath ?? path,
+        entityId,
+        values: formContext?.values ?? usedEntity?.values ?? {},
+        status
+      }),
       /* @__PURE__ */ jsx("div", { className: "flex-grow" }),
       pluginActionsTop,
       globalLoading && /* @__PURE__ */ jsx("div", { className: "self-center", children: /* @__PURE__ */ jsx(CircularProgress, { size: "small" }) }),
@@ -23444,9 +23756,14 @@ function EntitySidePanel(props) {
   if (!props || !collection) {
     return /* @__PURE__ */ jsx("div", { className: "w-full" });
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(EntityEditView, { ...props, fullIdPath, layout: "side_panel", collection, parentCollectionIds, onValuesModified, onSaved: onUpdate, barActions: /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(EntityEditView, { ...props, fullIdPath, layout: "side_panel", collection, parentCollectionIds, onValuesModified, onSaved: onUpdate, barActions: ({
+    status,
+    values
+  }) => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(IconButton, { className: "self-center", onClick: onClose, children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" }) }),
     allowFullScreen && /* @__PURE__ */ jsx(IconButton, { className: "self-center", onClick: () => {
+      const key = status === "new" || status === "copy" ? path + "#new" : path + "/" + entityId;
+      saveEntityToMemoryCache(key, values);
       if (entityId) navigate(location.pathname);
       else navigate(location.pathname + "#new");
     }, children: /* @__PURE__ */ jsx(OpenInFullIcon, { size: "small" }) })
@@ -26227,6 +26544,7 @@ export {
   getIdIcon,
   getLabelOrConfigFrom,
   getLastSegment,
+  getLocalChangesBackup,
   getPropertiesWithPropertiesOrder,
   getPropertyInPath,
   getRandomId,