@firecms/core 3.0.1 → 3.1.0-canary.02232f4

package/dist/util/entities.d.ts

@@ -1,7 +1,7 @@
 import { CMSType, DataType, Entity, EntityReference, EntityStatus, EntityValues, PropertiesOrBuilders, Property, PropertyBuilder, PropertyOrBuilder, ResolvedProperties, ResolvedProperty } from "../types";
 export declare function isReadOnly(property: Property<any> | ResolvedProperty<any>): boolean;
 export declare function isHidden(property: Property | ResolvedProperty): boolean;
-export declare function isPropertyBuilder<T extends CMSType, M extends Record<string, any>>(propertyOrBuilder?: PropertyOrBuilder<T, M> | Property<T> | ResolvedProperty<T>): propertyOrBuilder is PropertyBuilder<T, M>;
+export declare function isPropertyBuilder<T extends CMSType = CMSType, M extends Record<string, any> = any>(propertyOrBuilder?: PropertyOrBuilder<T, M> | Property | ResolvedProperty): propertyOrBuilder is PropertyBuilder<T, M>;
 export declare function getDefaultValuesFor<M extends Record<string, any>>(properties: PropertiesOrBuilders<M> | ResolvedProperties<M>): Partial<EntityValues<M>>;
 export declare function getDefaultValueFor(property?: PropertyOrBuilder): {} | null | undefined;
 export declare function getDefaultValueForDataType(dataType: DataType): {} | null;
@@ -9,12 +9,11 @@ export declare function getDefaultValueForDataType(dataType: DataType): {} | nul
  * Update the automatic values in an entity before save
  * @group Datasource
  */
-export declare function updateDateAutoValues<M extends Record<string, any>>({ inputValues, properties, status, timestampNowValue, setDateToMidnight }: {
+export declare function updateDateAutoValues<M extends Record<string, any>>({ inputValues, properties, status, timestampNowValue }: {
     inputValues: Partial<EntityValues<M>>;
     properties: ResolvedProperties<M>;
     status: EntityStatus;
     timestampNowValue: any;
-    setDateToMidnight: (input?: any) => any | undefined;
 }): EntityValues<M>;
 /**
  * Add missing required fields, expected in the collection, to the values of an entity

package/dist/util/index.d.ts

@@ -16,7 +16,7 @@ export * from "./icon_list";
 export * from "./icon_synonyms";
 export * from "./icons";
 export * from "./plurals";
-export * from "./references";
+export * from "./previews";
 export * from "./flatten_object";
 export * from "./make_properties_editable";
 export * from "./join_collections";
@@ -24,3 +24,5 @@ export * from "./builders";
 export * from "./useTraceUpdate";
 export * from "./storage";
 export * from "./callbacks";
+export * from "./conditions";
+export * from "./lazy_eager";

package/dist/util/lazy_eager.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+/**
+ * Returns a React.lazy component that is also preloaded immediately using
+ * requestIdleCallback or setTimeout.
+ * This ensures that chunks are split, but fetched in the background before they are actually needed.
+ */
+export declare function lazyEager<T extends React.ComponentType<any>>(factory: () => Promise<any>, exportName?: string): React.LazyExoticComponent<T>;

package/dist/util/objects.d.ts

@@ -10,3 +10,4 @@ export declare function removeUndefined(value: any, removeEmptyStrings?: boolean
 export declare function removeNulls(value: any): any;
 export declare function isEmptyObject(obj: object): boolean;
 export declare function removePropsIfExisting(source: any, comparison: any): any;
+export declare function jsonStringifyReplacer(key: string, value: any): any;

package/dist/util/property_utils.d.ts

@@ -15,7 +15,8 @@ export declare function getPropertyInPath<M extends Record<string, any>>(propert
 export declare function getResolvedPropertyInPath(properties: Record<string, ResolvedProperty>, path: string): ResolvedProperty | undefined;
 export declare function getBracketNotation(path: string): string;
 /**
- * Get properties exclusively indexed by their order
+ * Get properties sorted by their order, but include ALL properties.
+ * Nested keys (like "data.mode") in propertiesOrder are ignored - they're for column ordering.
  * @param properties
  * @param propertiesOrder
  */

package/dist/util/resolutions.d.ts

@@ -1,4 +1,4 @@
-import { ArrayProperty, AuthController, CMSType, CustomizationController, EntityAction, EntityCollection, EntityCustomView, EntityValues, EnumValueConfig, EnumValues, NumberProperty, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedArrayProperty, ResolvedEntityCollection, ResolvedNumberProperty, ResolvedProperties, ResolvedProperty, ResolvedStringProperty, StringProperty, UserConfigurationPersistence } from "../types";
+import { ArrayProperty, AuthController, CMSType, CustomizationController, EntityAction, EntityCollection, EntityCustomView, EntityValues, EnumValueConfig, EnumValues, NumberProperty, PropertiesOrBuilders, Property, PropertyConfig, PropertyOrBuilder, ResolvedArrayProperty, ResolvedEntityCollection, ResolvedNumberProperty, ResolvedProperties, ResolvedProperty, ResolvedStringProperty, StringProperty, UserConfigurationPersistence } from "../types";
 export declare const resolveCollection: <M extends Record<string, any>>({ collection, path, entityId, values, previousValues, userConfigPersistence, propertyConfigs, ignoreMissingFields, authController }: {
     collection: EntityCollection<M> | ResolvedEntityCollection<M>;
     path: string;
@@ -17,7 +17,7 @@ export declare const resolveCollection: <M extends Record<string, any>>({ collec
  */
 export declare function resolveProperty<T extends CMSType = CMSType, M extends Record<string, any> = any>({ propertyOrBuilder, fromBuilder, ignoreMissingFields, ...props }: {
     propertyKey?: string;
-    propertyOrBuilder: PropertyOrBuilder<T, M> | ResolvedProperty<T>;
+    propertyOrBuilder: PropertyOrBuilder<T, M> | ResolvedProperty<T> | PropertyOrBuilder | Property | ResolvedProperty | undefined;
     values?: Partial<M>;
     previousValues?: Partial<M>;
     path?: string;
@@ -54,7 +54,7 @@ export declare function resolveArrayProperty<T extends any[], M>({ propertyKey,
     propertyConfigs?: Record<string, PropertyConfig>;
     ignoreMissingFields?: boolean;
     authController: AuthController;
-}): ResolvedArrayProperty;
+}): ResolvedArrayProperty | null;
 /**
  * Resolve enums and arrays for properties
  * @param properties

package/dist/util/useStorageUploadController.d.ts

@@ -1,4 +1,4 @@
-import { ArrayProperty, EntityValues, ResolvedArrayProperty, ResolvedStringProperty, StorageConfig, StorageSource, StringProperty } from "../types";
+import { ArrayProperty, EntityValues, ImageResize, ResolvedArrayProperty, ResolvedStringProperty, StorageConfig, StorageSource, StringProperty } from "../types";
 import { PreviewSize } from "../preview";
 /**
  * Internal representation of an item in the storage
@@ -35,3 +35,12 @@ export declare function useStorageUploadController<M extends object>({ entityId,
     onFilesAdded: (acceptedFiles: File[]) => Promise<void>;
     multipleFilesSupported: boolean;
 };
+/**
+ * Check if a file is an image type supported for resizing
+ */
+export declare function isImageFile(file: File): boolean;
+/**
+ * Resize and compress an image using compressorjs.
+ * Supports both the new imageResize API and legacy imageCompression for backward compatibility.
+ */
+export declare function resizeImage(file: File, imageResize?: StorageConfig["imageResize"], legacyCompression?: ImageResize): Promise<File>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.1",
+  "version": "3.1.0-canary.02232f4",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,30 +53,55 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/editor": "^3.0.1",
-    "@firecms/formex": "^3.0.1",
-    "@firecms/ui": "^3.0.1",
+    "@firecms/formex": "^3.1.0-canary.02232f4",
+    "@firecms/ui": "^3.1.0-canary.02232f4",
+    "@floating-ui/dom": "^1.7.4",
     "@radix-ui/react-portal": "^1.1.10",
+    "@radix-ui/react-slot": "^1.2.4",
     "clsx": "^2.1.1",
     "compressorjs": "^1.2.1",
     "date-fns": "^3.6.0",
     "fuse.js": "^7.1.0",
     "history": "^5.3.0",
+    "i18next": "^23.16.4",
+    "json-logic-js": "^2.0.5",
     "markdown-it": "^14.1.0",
+    "markdown-it-ins": "^4.0.0",
+    "markdown-it-mark": "^4.0.0",
+    "markdown-it-task-lists": "^2.1.1",
     "notistack": "^3.0.2",
     "object-hash": "^3.0.0",
     "prism-react-renderer": "^2.4.1",
+    "prosemirror-commands": "^1.6.0",
+    "prosemirror-dropcursor": "^1.8.1",
+    "prosemirror-example-setup": "^1.2.3",
+    "prosemirror-gapcursor": "^1.3.2",
+    "prosemirror-history": "^1.4.1",
+    "prosemirror-inputrules": "^1.5.1",
+    "prosemirror-keymap": "^1.2.2",
+    "prosemirror-markdown": "^1.13.0",
+    "prosemirror-model": "^1.22.3",
+    "prosemirror-schema-basic": "^1.2.3",
+    "prosemirror-schema-list": "^1.4.1",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-tables": "^1.8.5",
+    "prosemirror-transform": "^1.10.0",
+    "prosemirror-view": "^1.33.8",
     "react-dropzone": "^14.3.8",
     "react-fast-compare": "^3.2.2",
+    "react-i18next": "^14.1.3",
+    "react-image-crop": "^11.0.10",
+    "react-markdown": "^9.1.0",
+    "react-moveable": "^0.56.0",
     "react-transition-group": "^4.4.5",
     "react-use-measure": "^2.1.7",
     "react-window": "^1.8.11",
     "vite-plugin-static-copy": "3.1.4",
-    "yup": "^0.32.11"
+    "yup": "^1.7.1"
   },
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
+    "react": ">=18.3.1 || >=19.0.0",
+    "react-dom": ">=18.3.1 || >=19.0.0",
     "react-router": "^6.28.0",
     "react-router-dom": "^6.28.0"
   },
@@ -85,14 +110,16 @@
     "@testing-library/react": "^16.3.0",
     "@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/object-hash": "^3.0.6",
-    "@types/react": "^18.3.24",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.3",
+    "@types/react-dom": "^19.2.3",
     "@types/react-measure": "^2.0.12",
     "@vitejs/plugin-react": "^4.7.0",
     "babel-plugin-react-compiler": "^19.0.0-beta-af1b7da-20250417",
     "cross-env": "^7.0.3",
+    "eslint-plugin-i18next": "^6.1.3",
     "eslint-plugin-react-compiler": "^19.1.0-rc.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^30.2.0",
@@ -109,15 +136,27 @@
     "dist",
     "src"
   ],
-  "gitHead": "72d951d01d15ef5a7efcde6c63839f65964d2f7a",
+  "gitHead": "6281205d9f39f85991e1d8533474bfb9a542ed03",
   "publishConfig": {
     "access": "public"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
-      "react-app/jest"
-    ]
+      "react-app/jest",
+      "plugin:i18next/recommended"
+    ],
+    "plugins": [
+      "i18next"
+    ],
+    "rules": {
+      "i18next/no-literal-string": [
+        "warn",
+        {
+          "markupOnly": true
+        }
+      ]
+    }
   },
   "jest": {
     "transform": {

package/src/app/Scaffold.tsx

@@ -4,6 +4,7 @@ import equal from "react-fast-compare"
 import { useLargeLayout } from "../hooks";
 import { ErrorBoundary } from "../components";
 import { AppContext } from "./useApp";
+import { useTranslation } from "../hooks/useTranslation";
 
 export const DRAWER_WIDTH = 280;
 
@@ -123,7 +124,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
                     <main
                         className="flex flex-col flex-grow overflow-auto">
 
-                        {hasAppBar && <DrawerHeader/>}
+                        {hasAppBar && <DrawerHeader />}
 
                         <div
                             className={cls(defaultBorderMixin, "flex-grow overflow-auto m-0 ", {
@@ -163,6 +164,7 @@ function DrawerWrapper(props: {
     onMouseLeave: () => void
 }) {
 
+    const { t } = useTranslation();
     const width = !props.displayed ? 0 : (props.open ? DRAWER_WIDTH : 72);
     const innerDrawer = <div
         className={"relative h-full no-scrollbar overflow-y-auto overflow-x-hidden"}
@@ -173,33 +175,32 @@ function DrawerWrapper(props: {
     >
 
         {!props.open && props.displayed && (
-            <Tooltip title="Open menu"
-                     side="right"
-                     sideOffset={12}
-                     asChild={true}>
+            <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="Open menu"
+                        aria-label={t("open_menu")}
                         onClick={() => props.setDrawerOpen(true)}
                         size="large"
                     >
-                        <MenuIcon/>
+                        <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`}>
+            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="Close drawer"
+                aria-label={t("close_drawer")}
                 onClick={() => props.setDrawerOpen(false)}
             >
-                <ChevronLeftIcon/>
+                <ChevronLeftIcon />
             </IconButton>
         </div>
 
@@ -216,19 +217,19 @@ function DrawerWrapper(props: {
         return <>
             <IconButton
                 color="inherit"
-                aria-label="Open drawer"
+                aria-label={t("open_menu")}
                 onClick={() => props.setDrawerOpen(true)}
                 size="large"
                 className="absolute sm:top-2 sm:left-4 top-1 left-2"
             >
-                <MenuIcon/>
+                <MenuIcon />
             </IconButton>
             <Sheet side={"left"}
-                   transparent={true}
-                   open={props.open}
-                   onOpenChange={props.setDrawerOpen}
-                   title={"Navigation drawer"}
-                   overlayClassName={"bg-white bg-opacity-80"}
+                transparent={true}
+                open={props.open}
+                onOpenChange={props.setDrawerOpen}
+                title={t("navigation_drawer")}
+                overlayClassName={"bg-white bg-opacity-80 bg-white/80"}
             >
                 {innerDrawer}
             </Sheet>

package/src/components/AIIcon.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { AutoAwesomeIcon } from "@firecms/ui";
+import { useTranslation } from "../hooks";
+
+export interface AIIconProps {
+    size?: "smallest" | "small" | "medium" | "large";
+    className?: string;
+}
+
+/**
+ * AI-styled AutoAwesome icon with gradient coloring.
+ * Used consistently across AI features for visual identification.
+ */
+export function AIIcon({ size = "small", className }: AIIconProps) {
+    return (
+        <AutoAwesomeIcon
+            size={size}
+            className={className}
+            style={{
+                background: "linear-gradient(to right, var(--color-primary), var(--color-secondary))",
+                WebkitBackgroundClip: "text",
+                WebkitTextFillColor: "transparent",
+                backgroundClip: "text"
+            }}
+        />
+    );
+}
+
+/**
+ * Small animated dot indicator for AI-modified elements.
+ * Shows a pulsing gradient dot.
+ */
+export function AIModifiedIndicator({ className }: { className?: string }) {
+    const { t } = useTranslation();
+    return (
+        <div
+            className={`w-2 h-2 rounded-full bg-gradient-to-r from-primary to-secondary animate-pulse ${className ?? ""}`}
+            title={t("ai_modified")}
+        />
+    );
+}

package/src/components/ArrayContainer.tsx

@@ -13,6 +13,7 @@ import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { getHashValue } from "../util";
+import { useTranslation } from "../hooks";
 import {
     AddIcon,
     Button,
@@ -186,7 +187,7 @@ export function ArrayContainerItem({
         <div
             ref={nodeRef}
             style={style}
-            className={`relative ${!isDragging ? "hover\\:bg-surface-accent-50 dark\\:hover\\:bg-surface-800 dark\\:hover\\:bg-opacity-20" : ""} rounded-md opacity-100`}
+            className={`relative ${!isDragging ? "hover\\:bg-surface-accent-50 dark\\:hover\\:bg-surface-800 dark\\:hover\\:bg-opacity-20 dark\\:hover\\:bg-surface-800/20" : ""} rounded-md opacity-100`}
         >
             <div className="flex items-start">
                 <div className="flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark">
@@ -235,6 +236,7 @@ export function ArrayItemOptions({
     canAddElements?: boolean;
     addInIndex?: (index: number) => void;
 }) {
+    const { t } = useTranslation();
     const [menuOpen, setMenuOpen] = useState(false);
     const iconRef = useRef<HTMLDivElement>(null);
     useOutsideAlerter(iconRef, () => {
@@ -296,7 +298,7 @@ export function ArrayItemOptions({
                         }}
                     >
                         <RemoveIcon size={"small"}/>
-                        Remove
+                        {t("remove")}
                     </MenuItem>
                     <MenuItem
                         dense
@@ -306,7 +308,7 @@ export function ArrayItemOptions({
                         }}
                     >
                         <ContentCopyIcon size={"small"}/>
-                        Copy
+                        {t("copy")}
                     </MenuItem>
                     {addInIndex && (
                         <MenuItem
@@ -317,7 +319,7 @@ export function ArrayItemOptions({
                             }}
                         >
                             <KeyboardArrowUpIcon size={"small"}/>
-                            Add on top
+                            {t("add_on_top")}
                         </MenuItem>
                     )}
                     {addInIndex && (
@@ -329,7 +331,7 @@ export function ArrayItemOptions({
                             }}
                         >
                             <KeyboardArrowDownIcon size={"small"}/>
-                            Add below
+                            {t("add_below")}
                         </MenuItem>
                     )}
                 </Menu>
@@ -484,11 +486,9 @@ export function ArrayContainer<T>({
                             <Button
                                 variant={"text"}
                                 size={size === "small" ? "small" : "medium"}
-                                color="primary"
                                 disabled={disabled || (value?.length ?? 0) >= max}
                                 startIcon={<AddIcon/>}
                                 onClick={insertInEnd}
-                                className={"ml-3.5"}
                             >
                                 {addLabel ?? "Add"}
                             </Button>
@@ -527,7 +527,6 @@ export function ArrayContainer<T>({
                     <Button
                         variant={"text"}
                         size={size === "small" ? "small" : "medium"}
-                        color="primary"
                         disabled={disabled || (value?.length ?? 0) >= max}
                         startIcon={<AddIcon/>}
                         onClick={insertInEnd}

package/src/components/ClearFilterSortButton.tsx

@@ -1,13 +1,16 @@
-import { Button, FilterListOffIcon } from "@firecms/ui";
+import { FilterListOffIcon, Button, Tooltip } from "@firecms/ui";
 import { EntityTableController } from "../types";
+import { useTranslation } from "../hooks";
 
 export function ClearFilterSortButton({
-                                          tableController,
-                                          enabled
-                                      }: {
+    tableController,
+    enabled
+}: {
     enabled: boolean;
     tableController: EntityTableController
 }) {
+    const { t } = useTranslation();
+
     if (!enabled) {
         return null;
     }
@@ -18,24 +21,27 @@ export function ClearFilterSortButton({
     if ((filterIsSet || sortIsSet) && (tableController.clearFilter || tableController.setSortBy)) {
         let label;
         if (filterIsSet && sortIsSet) {
-            label = "Clear filter/sort";
+            label = t("clear_filter_sort");
         } else if (filterIsSet) {
-            label = "Clear filter";
+            label = t("clear_filter");
         } else {
-            label = "Clear sort";
+            label = t("clear_sort");
         }
-        return <Button
-            variant={"outlined"}
-            className="h-fit-content"
-            aria-label="filter clear"
-            onClick={() => {
-                tableController.clearFilter?.();
-                tableController.setSortBy?.(undefined);
-            }}
-            size={"small"}>
-            <FilterListOffIcon/>
-            {label}
-        </Button>
+        return (
+            <Tooltip title={label}>
+                <Button
+                    size={"small"}
+                    variant={"text"}
+                    aria-label={label}
+                    onClick={() => {
+                        tableController.clearFilter?.();
+                        tableController.setSortBy?.(undefined);
+                    }}
+                >
+                    <FilterListOffIcon size="small" />
+                </Button>
+            </Tooltip>
+        );
     }
     return null;
 }

package/src/components/ConfirmationDialog.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, LoadingButton } from "@firecms/ui";
+import { useTranslation } from "../hooks/useTranslation";
 
 export function ConfirmationDialog({
                                        open,
@@ -17,6 +18,7 @@ export function ConfirmationDialog({
     title: React.ReactNode,
     body?: React.ReactNode,
 }) {
+    const { t } = useTranslation();
     return (
         <Dialog
             open={open}
@@ -29,18 +31,16 @@ export function ConfirmationDialog({
 
             <DialogActions>
                 <Button
-                    color={"primary"}
                     variant={"text"}
                     onClick={onCancel}
-                    autoFocus>Cancel</Button>
+                    autoFocus>{t("cancel")}</Button>
 
                 <LoadingButton
-                    color="primary"
                     type="submit"
                     loading={loading}
                     onClick={onAccept}
                     autoFocus>
-                    Ok
+                    {t("ok")}
                 </LoadingButton>
             </DialogActions>
         </Dialog>

package/src/components/DeleteEntityDialog.tsx

@@ -11,6 +11,7 @@ import {
 } from "../hooks";
 import { resolveCollection } from "../util";
 import { EntityView } from "./EntityView";
+import { useTranslation } from "../hooks/useTranslation";
 
 export interface DeleteEntityDialogProps<M extends Record<string, any>> {
     entityOrEntitiesToDelete?: Entity<M> | Entity<M>[],
@@ -39,6 +40,8 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
     const dataSource = useDataSource(collection);
     const customizationController = useCustomizationController();
     const snackbarController = useSnackbarController();
+    const { t } = useTranslation();
+
     const [loading, setLoading] = useState(false);
 
     const context = useFireCMSContext();
@@ -66,7 +69,7 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
     const onDeleteFailure = useCallback((entity: Entity<any>, e: Error) => {
         snackbarController.open({
             type: "error",
-            message: "Error deleting: " + e?.message
+            message: t("error_deleting", { message: e?.message })
         });
 
         console.error("Error deleting entity");
@@ -76,7 +79,7 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
     const onPreDeleteHookError = useCallback((entity: Entity<any>, e: Error) => {
         snackbarController.open({
             type: "error",
-            message: "Error before deleting: " + e?.message
+            message: t("error_before_delete", { message: e?.message })
         });
         console.error(e);
     }, [resolvedCollection.name]);
@@ -153,7 +156,7 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
 
     let content: React.ReactNode;
     if (entityOrEntities && multipleEntities) {
-        content = <>Multiple entities</>;
+        content = <>{t("multiple_entities")}</>;
     } else {
         const entity = entityOrEntities as Entity<M> | undefined;
         content = entity
@@ -165,8 +168,8 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
     }
 
     const dialogTitle = multipleEntities
-        ? <><b>{resolvedCollection.name}</b>: Confirm multiple delete?</>
-        : `Would you like to delete this ${resolvedCollection.singularName ?? resolvedCollection.name}?`;
+        ? <><b>{resolvedCollection.name}</b>: {t("confirm_multiple_delete")}</>
+        : t("delete_entity_confirm_title", { entityName: resolvedCollection.singularName ?? resolvedCollection.name });
 
     return (
         <Dialog
@@ -187,17 +190,15 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
 
                 <Button onClick={handleCancel}
                         disabled={loading}
-                        variant="text"
-                        color="primary">
-                    Cancel
+                        variant="text">
+                    {t("cancel")}
                 </Button>
                 <Button
                     autoFocus
                     disabled={loading}
                     onClick={handleOk}
-                    variant="filled"
-                    color="primary">
-                    Ok
+                    variant="filled">
+                    {t("ok")}
                 </Button>
             </DialogActions>