@medusajs/dashboard 2.12.3-snapshot-20251216185234 → 2.12.3-snapshot-20251217081413

package/dist/app.js

@@ -96929,7 +96929,7 @@ var init_tax_rates = __esm({
 });
 
 // src/hooks/api/translations.tsx
-var import_react_query43, TRANSLATIONS_QUERY_KEY, translationsQueryKeys, TRANSLATION_SETTINGS_QUERY_KEY, translationSettingsQueryKeys, TRANSLATION_STATISTICS_QUERY_KEY, translationStatisticsQueryKeys, useReferenceTranslations, useBatchTranslations, useTranslationSettings, useTranslationStatistics;
+var import_react_query43, TRANSLATIONS_QUERY_KEY, translationsQueryKeys, TRANSLATION_SETTINGS_QUERY_KEY, translationSettingsQueryKeys, TRANSLATION_STATISTICS_QUERY_KEY, translationStatisticsQueryKeys, useReferenceTranslations, referenceInvalidationKeysMap, useBatchTranslations, useTranslationSettings, useTranslationStatistics;
 var init_translations2 = __esm({
   "src/hooks/api/translations.tsx"() {
     "use strict";
@@ -97085,28 +97085,33 @@ var init_translations2 = __esm({
       const { data, ...rest } = referenceHook();
       return { ...data, ...rest };
     };
+    referenceInvalidationKeysMap = /* @__PURE__ */ new Map([
+      ["product", productsQueryKeys.lists()],
+      ["product_variant", productVariantQueryKeys.lists()],
+      ["product_category", categoriesQueryKeys.lists()],
+      ["product_collection", collectionsQueryKeys.lists()],
+      ["product_type", productTypesQueryKeys.lists()],
+      ["product_tag", productTagsQueryKeys.lists()]
+    ]);
     useBatchTranslations = (reference, options) => {
-      const referenceInvalidationKeysMap = /* @__PURE__ */ new Map([
-        ["product", productsQueryKeys.lists()],
-        ["product_variant", productVariantQueryKeys.lists()],
-        ["product_category", categoriesQueryKeys.lists()],
-        ["product_collection", collectionsQueryKeys.lists()],
-        ["product_type", productTypesQueryKeys.lists()],
-        ["product_tag", productTagsQueryKeys.lists()]
-      ]);
-      return (0, import_react_query43.useMutation)({
+      const mutation = (0, import_react_query43.useMutation)({
         mutationFn: (payload) => sdk.admin.translation.batch(payload),
-        onSuccess: (data, variables, context) => {
+        ...options
+      });
+      const invalidateQueries = async () => {
+        await Promise.all([
           queryClient.invalidateQueries({
             queryKey: referenceInvalidationKeysMap.get(reference)
-          });
+          }),
           queryClient.invalidateQueries({
             queryKey: translationStatisticsQueryKeys.lists()
-          });
-          options?.onSuccess?.(data, variables, context);
-        },
-        ...options
-      });
+          })
+        ]);
+      };
+      return {
+        ...mutation,
+        invalidateQueries
+      };
     };
     useTranslationSettings = (query, options) => {
       const { data, ...rest } = (0, import_react_query43.useQuery)({
@@ -114120,6 +114125,7 @@ var init_use_data_grid_cell = __esm({
             case "number":
               return numberCharacterRegex.test(key);
             case "text":
+            case "multiline-text":
               return textCharacterRegex.test(key);
             default:
               return false;
@@ -115270,6 +115276,7 @@ function convertArrayToPrimitive(values, type) {
     case "boolean":
       return values.map(convertToBoolean);
     case "text":
+    case "multiline-text":
       return values.map(covertToString);
     default:
       throw new Error(`Unsupported target type "${type}".`);
@@ -115470,7 +115477,19 @@ var init_use_data_grid_keydown_event = __esm({
         },
         [rangeEnd, matrix, getSelectionValues, setSelectionValues, execute]
       );
-      const handleSpaceKeyTextOrNumber = (0, import_react99.useCallback)(
+      const handleSpaceKeyText = (0, import_react99.useCallback)(
+        (anchor2) => {
+          const field = matrix.getCellField(anchor2);
+          const input = queryTool?.getInput(anchor2);
+          if (!field || !input) {
+            return;
+          }
+          createSnapshot(anchor2);
+          input.focus();
+        },
+        [matrix, queryTool, createSnapshot]
+      );
+      const handleSpaceKeyNumber = (0, import_react99.useCallback)(
         (anchor2) => {
           const field = matrix.getCellField(anchor2);
           const input = queryTool?.getInput(anchor2);
@@ -115541,10 +115560,12 @@ var init_use_data_grid_keydown_event = __esm({
             case "togglable-number":
               handleSpaceKeyTogglableNumber(anchor);
               break;
-            case "number":
             case "text":
             case "multiline-text":
-              handleSpaceKeyTextOrNumber(anchor);
+              handleSpaceKeyText(anchor);
+              break;
+            case "number":
+              handleSpaceKeyNumber(anchor);
               break;
           }
         },
@@ -115553,7 +115574,8 @@ var init_use_data_grid_keydown_event = __esm({
           isEditing,
           matrix,
           handleSpaceKeyBoolean,
-          handleSpaceKeyTextOrNumber,
+          handleSpaceKeyText,
+          handleSpaceKeyNumber,
           handleSpaceKeyTogglableNumber
         ]
       );
@@ -190739,7 +190761,7 @@ var init_active_locales_section = __esm({
       const hasLocales = locales.length > 0;
       return /* @__PURE__ */ (0, import_jsx_runtime686.jsxs)(import_ui450.Container, { className: "flex flex-col p-0", children: [
         /* @__PURE__ */ (0, import_jsx_runtime686.jsxs)("div", { className: "flex items-center justify-between px-6 py-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime686.jsx)(import_ui450.Heading, { children: t5("translations.activeLocales.heading") }),
+          /* @__PURE__ */ (0, import_jsx_runtime686.jsx)(import_ui450.Heading, { level: "h2", children: t5("translations.activeLocales.heading") }),
           /* @__PURE__ */ (0, import_jsx_runtime686.jsx)(import_ui450.IconButton, { variant: "transparent", onClick: handleManageLocales, children: /* @__PURE__ */ (0, import_jsx_runtime686.jsx)(import_icons174.PencilSquare, {}) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime686.jsx)("div", { className: "px-1 pb-1", children: hasLocales ? /* @__PURE__ */ (0, import_jsx_runtime686.jsxs)(import_ui450.Container, { className: "bg-ui-bg-component flex items-center gap-x-4 px-6 py-2", children: [
@@ -190850,60 +190872,63 @@ var init_translations_completion_section = __esm({
         () => Math.max(...localeStats.map((s) => s.total), 1),
         [localeStats]
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime688.jsxs)(import_ui452.Container, { className: "flex flex-col gap-y-3 px-6 py-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime688.jsxs)("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime688.jsx)(import_ui452.Heading, { children: t5("translations.completion.heading") }),
-          /* @__PURE__ */ (0, import_jsx_runtime688.jsxs)(import_ui452.Text, { size: "small", weight: "plus", className: "text-ui-fg-subtle", children: [
-            translatedCount.toLocaleString(),
-            " ",
-            t5("general.of"),
-            " ",
-            totalCount.toLocaleString()
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime688.jsx)("div", { className: "flex h-3 w-full overflow-hidden", children: percentage > 0 ? /* @__PURE__ */ (0, import_jsx_runtime688.jsxs)(import_jsx_runtime688.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime688.jsx)(
-            "div",
-            {
-              className: "mr-0.5 h-full rounded-sm transition-all",
-              style: {
-                width: `${percentage}%`,
-                backgroundColor: "var(--bg-interactive)"
+      const localeStatsCount = (0, import_react305.useMemo)(() => localeStats.length, [localeStats]);
+      return /* @__PURE__ */ (0, import_jsx_runtime688.jsxs)(import_ui452.Container, { className: "p-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime688.jsxs)("div", { className: "flex flex-col gap-y-4 px-6 py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime688.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime688.jsx)(import_ui452.Heading, { level: "h2", children: t5("translations.completion.heading") }),
+            /* @__PURE__ */ (0, import_jsx_runtime688.jsxs)(import_ui452.Text, { size: "small", weight: "plus", className: "text-ui-fg-subtle", children: [
+              translatedCount.toLocaleString(),
+              " ",
+              t5("general.of"),
+              " ",
+              totalCount.toLocaleString()
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime688.jsx)("div", { className: "flex h-3 w-full overflow-hidden", children: percentage > 0 ? /* @__PURE__ */ (0, import_jsx_runtime688.jsxs)(import_jsx_runtime688.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime688.jsx)(
+              "div",
+              {
+                className: "mr-0.5 h-full rounded-sm transition-all",
+                style: {
+                  width: `${percentage}%`,
+                  backgroundColor: "var(--bg-interactive)"
+                }
               }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime688.jsx)(
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime688.jsx)(
+              "div",
+              {
+                className: "h-full flex-1 rounded-sm",
+                style: {
+                  backgroundColor: "var(--bg-interactive)",
+                  opacity: 0.3
+                }
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime688.jsx)(
             "div",
             {
-              className: "h-full flex-1 rounded-sm",
+              className: "h-full w-full rounded-sm",
               style: {
                 backgroundColor: "var(--bg-interactive)",
                 opacity: 0.3
               }
             }
-          )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime688.jsx)(
-          "div",
-          {
-            className: "h-full w-full rounded-full",
-            style: {
-              backgroundColor: "var(--bg-interactive)",
-              opacity: 0.3
-            }
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime688.jsxs)("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime688.jsxs)(import_ui452.Text, { size: "small", weight: "plus", className: "text-ui-fg-subtle", children: [
-            percentage.toFixed(1),
-            "%"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime688.jsxs)(import_ui452.Text, { size: "small", weight: "plus", className: "text-ui-fg-subtle", children: [
-            remaining.toLocaleString(),
-            " ",
-            t5("general.remaining").toLowerCase()
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime688.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime688.jsxs)(import_ui452.Text, { size: "small", weight: "plus", className: "text-ui-fg-subtle", children: [
+              percentage.toFixed(1),
+              "%"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime688.jsxs)(import_ui452.Text, { size: "small", weight: "plus", className: "text-ui-fg-subtle", children: [
+              remaining.toLocaleString(),
+              " ",
+              t5("general.remaining").toLowerCase()
+            ] })
           ] })
         ] }),
-        localeStats.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime688.jsxs)("div", { className: "mt-4 flex flex-col gap-y-2", children: [
+        localeStats.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime688.jsxs)("div", { className: "border-ui-border-strong flex flex-col gap-y-3 border-t border-dashed px-6 pb-6 pt-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime688.jsx)("div", { className: "flex h-32 w-full items-end gap-1", children: localeStats.map((locale) => {
             const heightPercent = locale.total / maxTotal * 100;
             const translatedPercent = locale.total > 0 ? locale.translated / locale.total * 100 : 0;
@@ -190960,7 +190985,7 @@ var init_translations_completion_section = __esm({
                 children: /* @__PURE__ */ (0, import_jsx_runtime688.jsxs)(
                   "div",
                   {
-                    className: "flex min-w-2 flex-1 cursor-pointer flex-col justify-end overflow-hidden rounded-t-sm transition-opacity",
+                    className: "flex min-w-2 flex-1 flex-col justify-end overflow-hidden rounded-t-sm transition-opacity",
                     style: { height: `${heightPercent}%` },
                     onMouseEnter: () => setHoveredLocale(locale.code),
                     onMouseLeave: () => setHoveredLocale(null),
@@ -190995,12 +191020,22 @@ var init_translations_completion_section = __esm({
               locale.code
             );
           }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime688.jsx)(
+          localeStatsCount < 9 && /* @__PURE__ */ (0, import_jsx_runtime688.jsx)("div", { className: "flex w-full gap-1", children: localeStats.map((locale) => /* @__PURE__ */ (0, import_jsx_runtime688.jsx)(
+            import_ui452.Text,
+            {
+              size: "xsmall",
+              weight: "plus",
+              className: "text-ui-fg-subtle min-w-2 flex-1 whitespace-normal break-words text-center leading-tight",
+              children: localeStatsCount < 6 ? locale.name : locale.code
+            },
+            locale.code
+          )) }),
+          localeStatsCount > 9 && /* @__PURE__ */ (0, import_jsx_runtime688.jsx)(
             import_ui452.Text,
             {
-              size: "small",
               weight: "plus",
-              className: "text-ui-fg-muted text-center",
+              size: "xsmall",
+              className: "text-ui-fg-subtle text-center",
               children: t5("translations.completion.footer")
             }
           )
@@ -191146,153 +191181,113 @@ var init_translation_list2 = __esm({
 function isEntityRow(row) {
   return row._type === "entity";
 }
-function initTranslationsFormState(translations, references, availableLocales, translatableFields) {
-  const existingMap = /* @__PURE__ */ new Map();
+function buildLocaleSnapshot(translations, references, localeCode, translatableFields) {
+  const referenceTranslations = /* @__PURE__ */ new Map();
+  for (const t5 of translations) {
+    if (t5.locale_code === localeCode) {
+      referenceTranslations.set(t5.reference_id, t5);
+    }
+  }
+  const entities = {};
+  for (const ref of references) {
+    const existing = referenceTranslations.get(ref.id);
+    const fields = {};
+    for (const fieldName of translatableFields) {
+      fields[fieldName] = existing?.translations?.[fieldName] ?? "";
+    }
+    entities[ref.id] = {
+      id: existing?.id ?? null,
+      fields
+    };
+  }
+  return { localeCode, entities };
+}
+function extendSnapshot(snapshot, translations, newReferences, translatableFields) {
+  const referenceTranslations = /* @__PURE__ */ new Map();
   for (const t5 of translations) {
-    existingMap.set(`${t5.reference_id}:${t5.locale_code}`, t5);
-  }
-  const entitiesTranslationState = {};
-  for (const reference of references) {
-    const locales = {};
-    for (const locale of availableLocales) {
-      const key = `${reference.id}:${locale.locale_code}`;
-      const existing = existingMap.get(key);
+    if (t5.locale_code === snapshot.localeCode) {
+      referenceTranslations.set(t5.reference_id, t5);
+    }
+  }
+  const extendedEntities = { ...snapshot.entities };
+  for (const ref of newReferences) {
+    if (!extendedEntities[ref.id]) {
+      const existing = referenceTranslations.get(ref.id);
       const fields = {};
       for (const fieldName of translatableFields) {
-        const fieldValue = existing?.translations?.[fieldName] ?? "";
-        fields[fieldName] = fieldValue;
+        fields[fieldName] = existing?.translations?.[fieldName] ?? "";
       }
-      locales[locale.locale_code] = {
+      extendedEntities[ref.id] = {
         id: existing?.id ?? null,
-        locale_code: locale.locale_code,
         fields
       };
     }
-    entitiesTranslationState[reference.id] = { locales };
   }
-  return {
-    entities: entitiesTranslationState
-  };
+  return { ...snapshot, entities: extendedEntities };
 }
-function buildTranslationRows(references, translatableFields) {
-  return references.map((reference) => ({
-    _type: "entity",
-    reference_id: reference.id,
-    subRows: translatableFields.map((fieldName) => ({
-      _type: "field",
-      reference_id: reference.id,
-      field_name: fieldName
-    }))
-  }));
+function snapshotToFormValues(snapshot) {
+  return { entities: snapshot.entities };
 }
-function transformToBatchPayload(currentState, initialState, entityType) {
+function computeChanges(currentState, snapshot, entityType, localeCode) {
   const payload = {
     create: [],
     update: [],
     delete: []
   };
   for (const [entityId, entityData] of Object.entries(currentState.entities)) {
-    for (const [localeCode, localeTranslations] of Object.entries(
-      entityData.locales
-    )) {
-      const initial = initialState.entities[entityId]?.locales[localeCode];
-      const hasContent = Object.values(localeTranslations.fields).some(
-        (v) => v !== void 0 && v.trim() !== ""
-      );
-      const hadContent = initial && Object.values(initial.fields).some(
-        (v) => v !== void 0 && v.trim() !== ""
-      );
-      if (!localeTranslations.id && hasContent) {
-        payload.create.push({
-          reference_id: entityId,
-          reference: entityType,
-          locale_code: localeTranslations.locale_code,
-          translations: localeTranslations.fields
-        });
-      } else if (localeTranslations.id && hasContent) {
-        const hasChanged = !initial || JSON.stringify(localeTranslations.fields) !== JSON.stringify(initial.fields);
-        if (hasChanged) {
-          payload.update.push({
-            id: localeTranslations.id,
-            translations: localeTranslations.fields
-          });
-        }
-      } else if (localeTranslations.id && !hasContent && hadContent) {
-        payload.delete.push(localeTranslations.id);
-      }
-    }
-  }
-  return payload;
-}
-function hasLocaleChanges(currentState, initialState, localeCode) {
-  for (const [entityId, entityData] of Object.entries(currentState.entities)) {
-    const currentLocale = entityData.locales[localeCode];
-    const initialLocale = initialState.entities[entityId]?.locales[localeCode];
-    if (!currentLocale || !initialLocale) {
+    const baseline = snapshot.entities[entityId];
+    if (!baseline) {
       continue;
     }
-    for (const [fieldName, fieldValue] of Object.entries(
-      currentLocale.fields
-    )) {
-      const initialValue = initialLocale.fields[fieldName] ?? "";
-      const currentValue = fieldValue ?? "";
-      if (currentValue !== initialValue) {
-        return true;
-      }
-    }
-  }
-  return false;
-}
-function transformSingleLocaleToBatchPayload(currentState, initialState, entityType, localeCode) {
-  const payload = {
-    create: [],
-    update: [],
-    delete: []
-  };
-  for (const [entityId, entityData] of Object.entries(currentState.entities)) {
-    const localeTranslations = entityData.locales[localeCode];
-    if (!localeTranslations) continue;
-    const initial = initialState.entities[entityId]?.locales[localeCode];
-    const hasContent = Object.values(localeTranslations.fields).some(
+    const hasContent = Object.values(entityData.fields).some(
       (v) => v !== void 0 && v.trim() !== ""
     );
-    const hadContent = initial && Object.values(initial.fields).some(
+    const hadContent = Object.values(baseline.fields).some(
       (v) => v !== void 0 && v.trim() !== ""
     );
-    if (!localeTranslations.id && hasContent) {
+    const hasChanged = JSON.stringify(entityData.fields) !== JSON.stringify(baseline.fields);
+    if (!entityData.id && hasContent) {
       payload.create.push({
         reference_id: entityId,
         reference: entityType,
-        locale_code: localeTranslations.locale_code,
-        translations: localeTranslations.fields
-      });
-    } else if (localeTranslations.id && hasContent) {
-      const hasChanged = !initial || JSON.stringify(localeTranslations.fields) !== JSON.stringify(initial.fields);
-      if (hasChanged) {
-        payload.update.push({
-          id: localeTranslations.id,
-          translations: localeTranslations.fields
-        });
-      }
-    } else if (localeTranslations.id && !hasContent && hadContent) {
-      payload.delete.push(localeTranslations.id);
+        locale_code: localeCode,
+        translations: entityData.fields
+      });
+    } else if (entityData.id && hasContent && hasChanged) {
+      payload.update.push({
+        id: entityData.id,
+        translations: entityData.fields
+      });
+    } else if (entityData.id && !hasContent && hadContent) {
+      payload.delete.push(entityData.id);
     }
   }
-  return payload;
+  const hasChanges = payload.create.length > 0 || payload.update.length > 0 || payload.delete.length > 0;
+  return { hasChanges, payload };
+}
+function buildTranslationRows(references, translatableFields) {
+  return references.map((reference) => ({
+    _type: "entity",
+    reference_id: reference.id,
+    subRows: translatableFields.map((fieldName) => ({
+      _type: "field",
+      reference_id: reference.id,
+      field_name: fieldName
+    }))
+  }));
 }
 function useTranslationsGridColumns({
   entities,
-  translatableFields,
   availableLocales,
   selectedLocale,
   dynamicColumnWidth
 }) {
   const { t: t5 } = (0, import_react_i18next487.useTranslation)();
-  const columns = (0, import_react307.useMemo)(() => {
+  return (0, import_react307.useMemo)(() => {
     const selectedLocaleData = availableLocales.find(
       (l) => l.locale_code === selectedLocale
     );
-    const baseColumns = [
+    const columns = [
       columnHelper93.column({
         id: "field",
         name: "field",
@@ -191328,9 +191323,7 @@ function useTranslationsGridColumns({
           if (isEntityRow(row)) {
             return /* @__PURE__ */ (0, import_jsx_runtime690.jsx)(DataGrid.ReadonlyCell, { context });
           }
-          const entity = entities.find(
-            (entity2) => entity2.id === row.reference_id
-          );
+          const entity = entities.find((e) => e.id === row.reference_id);
           if (!entity) {
             return null;
           }
@@ -191339,7 +191332,7 @@ function useTranslationsGridColumns({
       })
     ];
     if (selectedLocaleData) {
-      baseColumns.push(
+      columns.push(
         columnHelper93.column({
           id: selectedLocaleData.locale_code,
           name: selectedLocaleData.locale.name,
@@ -191357,24 +191350,16 @@ function useTranslationsGridColumns({
             if (isEntityRow(row)) {
               return null;
             }
-            return `entities.${row.reference_id}.locales.${selectedLocaleData.locale_code}.fields.${row.field_name}`;
+            return `entities.${row.reference_id}.fields.${row.field_name}`;
           },
           type: "multiline-text"
         })
       );
     }
-    return baseColumns;
-  }, [
-    t5,
-    translatableFields,
-    availableLocales,
-    selectedLocale,
-    entities,
-    dynamicColumnWidth
-  ]);
-  return columns;
+    return columns;
+  }, [t5, availableLocales, selectedLocale, entities, dynamicColumnWidth]);
 }
-var import_zod166, import_ui454, import_react307, import_react_hook_form145, import_react_i18next487, import_zod167, import_jsx_runtime690, LocaleTranslationSchema, EntityTranslationsSchema, TranslationsFormSchema, columnHelper93, FIELD_COLUMN_WIDTH, TranslationsEditForm;
+var import_zod166, import_ui454, import_react307, import_react_hook_form145, import_react_i18next487, import_zod167, import_jsx_runtime690, EntityTranslationsSchema, TranslationsFormSchema, columnHelper93, FIELD_COLUMN_WIDTH, TranslationsEditForm;
 var init_translations_edit_form = __esm({
   "src/routes/translations/translations-edit/components/translations-edit-form/translations-edit-form.tsx"() {
     "use strict";
@@ -191389,19 +191374,15 @@ var init_translations_edit_form = __esm({
     init_keybound_form2();
     init_translations2();
     import_jsx_runtime690 = require("react/jsx-runtime");
-    LocaleTranslationSchema = import_zod167.z.object({
+    EntityTranslationsSchema = import_zod167.z.object({
       id: import_zod167.z.string().nullish(),
-      locale_code: import_zod167.z.string(),
       fields: import_zod167.z.record(import_zod167.z.string().optional())
     });
-    EntityTranslationsSchema = import_zod167.z.object({
-      locales: import_zod167.z.record(LocaleTranslationSchema)
-    });
     TranslationsFormSchema = import_zod167.z.object({
       entities: import_zod167.z.record(EntityTranslationsSchema)
     });
     columnHelper93 = createDataGridHelper();
-    FIELD_COLUMN_WIDTH = 150;
+    FIELD_COLUMN_WIDTH = 350;
     TranslationsEditForm = ({
       translations,
       references,
@@ -191438,57 +191419,83 @@ var init_translations_edit_form = __esm({
       );
       const [showUnsavedPrompt, setShowUnsavedPrompt] = (0, import_react307.useState)(false);
       const [pendingLocale, setPendingLocale] = (0, import_react307.useState)(null);
-      const entities = (0, import_react307.useMemo)(() => references, [references]);
-      const totalCount = (0, import_react307.useMemo)(
-        () => referenceCount * (translatableFields.length + 1),
-        [referenceCount, translatableFields]
-      );
-      const initialState = (0, import_react307.useRef)(
-        initTranslationsFormState(
+      const [isSwitchingLocale, setIsSwitchingLocale] = (0, import_react307.useState)(false);
+      const snapshotRef = (0, import_react307.useRef)(
+        buildLocaleSnapshot(
           translations,
-          entities,
-          availableLocales,
+          references,
+          selectedLocale,
           translatableFields
         )
       );
+      const knownEntityIdsRef = (0, import_react307.useRef)(
+        new Set(references.map((r) => r.id))
+      );
+      const latestPropsRef = (0, import_react307.useRef)({ translations, references });
+      (0, import_react307.useEffect)(() => {
+        latestPropsRef.current = { translations, references };
+      }, [translations, references]);
       const form = (0, import_react_hook_form145.useForm)({
         resolver: (0, import_zod166.zodResolver)(TranslationsFormSchema),
-        defaultValues: initialState.current
+        defaultValues: snapshotToFormValues(snapshotRef.current)
       });
+      (0, import_react307.useEffect)(() => {
+        const currentIds = new Set(references.map((r) => r.id));
+        const newReferences = references.filter(
+          (r) => !knownEntityIdsRef.current.has(r.id)
+        );
+        if (newReferences.length === 0) {
+          return;
+        }
+        knownEntityIdsRef.current = currentIds;
+        snapshotRef.current = extendSnapshot(
+          snapshotRef.current,
+          translations,
+          newReferences,
+          translatableFields
+        );
+        const currentValues = form.getValues();
+        const newFormValues = {
+          entities: { ...currentValues.entities }
+        };
+        for (const ref of newReferences) {
+          if (!newFormValues.entities[ref.id]) {
+            newFormValues.entities[ref.id] = snapshotRef.current.entities[ref.id];
+          }
+        }
+        form.reset(newFormValues, {
+          keepDirty: true,
+          keepDirtyValues: true
+        });
+      }, [references, translations, translatableFields, form]);
       const rows = (0, import_react307.useMemo)(
-        () => buildTranslationRows(entities, translatableFields),
-        [entities, translatableFields]
+        () => buildTranslationRows(references, translatableFields),
+        [references, translatableFields]
       );
-      const { mutateAsync, isPending } = useBatchTranslations(entityType);
-      const handleLocaleChange = (0, import_react307.useCallback)(
-        (newLocale) => {
-          if (newLocale === selectedLocale) {
-            return;
-          }
-          const currentValues = form.getValues();
-          const hasChanges = hasLocaleChanges(
-            currentValues,
-            initialState.current,
-            selectedLocale
-          );
-          if (hasChanges) {
-            setPendingLocale(newLocale);
-            setShowUnsavedPrompt(true);
-          } else {
-            setSelectedLocale(newLocale);
-          }
-        },
-        [selectedLocale, form]
+      const totalRowCount = (0, import_react307.useMemo)(
+        () => referenceCount * (translatableFields.length + 1),
+        [referenceCount, translatableFields]
+      );
+      const selectedLocaleDisplay = (0, import_react307.useMemo)(
+        () => availableLocales.find((l) => l.locale_code === selectedLocale)?.locale.name,
+        [availableLocales, selectedLocale]
       );
+      const columns = useTranslationsGridColumns({
+        entities: references,
+        availableLocales,
+        selectedLocale,
+        dynamicColumnWidth
+      });
+      const { mutateAsync, isPending, invalidateQueries } = useBatchTranslations(entityType);
       const saveCurrentLocale = (0, import_react307.useCallback)(async () => {
         const currentValues = form.getValues();
-        const payload = transformSingleLocaleToBatchPayload(
+        const { hasChanges, payload } = computeChanges(
           currentValues,
-          initialState.current,
+          snapshotRef.current,
           entityType,
           selectedLocale
         );
-        if (payload.create.length === 0 && payload.update.length === 0 && payload.delete.length === 0) {
+        if (!hasChanges) {
           return true;
         }
         try {
@@ -191512,20 +191519,32 @@ var init_translations_edit_form = __esm({
             }
             if (payload.delete.length > 0) {
               currentBatch.delete = payload.delete.splice(0, currentBatchAvailable);
-              currentBatchAvailable -= currentBatch.delete.length;
             }
-            await mutateAsync(currentBatch);
+            const response = await mutateAsync(currentBatch, {
+              onError: (error) => {
+                import_ui454.toast.error(error.message);
+              }
+            });
+            if (response.created) {
+              for (const created of response.created) {
+                form.setValue(`entities.${created.reference_id}.id`, created.id, {
+                  shouldDirty: false
+                });
+                if (snapshotRef.current.entities[created.reference_id]) {
+                  snapshotRef.current.entities[created.reference_id].id = created.id;
+                }
+              }
+            }
           }
-          const updatedInitialState = { ...initialState.current };
-          for (const entityId of Object.keys(currentValues.entities)) {
-            if (updatedInitialState.entities[entityId]?.locales[selectedLocale]) {
-              updatedInitialState.entities[entityId].locales[selectedLocale] = {
-                ...currentValues.entities[entityId].locales[selectedLocale]
+          const savedValues = form.getValues();
+          for (const entityId of Object.keys(savedValues.entities)) {
+            if (snapshotRef.current.entities[entityId]) {
+              snapshotRef.current.entities[entityId] = {
+                ...savedValues.entities[entityId]
               };
             }
           }
-          initialState.current = updatedInitialState;
-          form.reset(currentValues);
+          form.reset(savedValues);
           return true;
         } catch (error) {
           import_ui454.toast.error(
@@ -191534,19 +191553,59 @@ var init_translations_edit_form = __esm({
           return false;
         }
       }, [form, entityType, selectedLocale, mutateAsync]);
+      const switchToLocale = (0, import_react307.useCallback)(
+        async (newLocale) => {
+          setIsSwitchingLocale(true);
+          try {
+            await invalidateQueries();
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            const { translations: translations2, references: references2 } = latestPropsRef.current;
+            const newSnapshot = buildLocaleSnapshot(
+              translations2,
+              references2,
+              newLocale,
+              translatableFields
+            );
+            snapshotRef.current = newSnapshot;
+            knownEntityIdsRef.current = new Set(references2.map((r) => r.id));
+            form.reset(snapshotToFormValues(newSnapshot));
+            setSelectedLocale(newLocale);
+          } finally {
+            setIsSwitchingLocale(false);
+          }
+        },
+        [translatableFields, form, invalidateQueries]
+      );
+      const handleLocaleChange = (0, import_react307.useCallback)(
+        (newLocale) => {
+          if (newLocale === selectedLocale) {
+            return;
+          }
+          const currentValues = form.getValues();
+          const { hasChanges } = computeChanges(
+            currentValues,
+            snapshotRef.current,
+            entityType,
+            selectedLocale
+          );
+          if (hasChanges) {
+            setPendingLocale(newLocale);
+            setShowUnsavedPrompt(true);
+          } else {
+            switchToLocale(newLocale);
+          }
+        },
+        [selectedLocale, form, entityType, switchToLocale]
+      );
       const handleSaveAndSwitch = (0, import_react307.useCallback)(async () => {
         const success = await saveCurrentLocale();
         if (success && pendingLocale) {
-          import_ui454.toast.success(
-            t5("translations.edit.localeChangesSaved", {
-              defaultValue: "Changes saved successfully"
-            })
-          );
-          setSelectedLocale(pendingLocale);
+          import_ui454.toast.success(t5("translations.edit.successToast"));
+          await switchToLocale(pendingLocale);
         }
         setShowUnsavedPrompt(false);
         setPendingLocale(null);
-      }, [saveCurrentLocale, pendingLocale, t5]);
+      }, [saveCurrentLocale, pendingLocale, t5, switchToLocale]);
       const handleCancelSwitch = (0, import_react307.useCallback)(() => {
         setShowUnsavedPrompt(false);
         setPendingLocale(null);
@@ -191563,69 +191622,15 @@ var init_translations_edit_form = __esm({
         },
         [saveCurrentLocale, t5, handleSuccess]
       );
-      const handleSubmit = form.handleSubmit(async (values) => {
-        const payload = transformToBatchPayload(
-          values,
-          initialState.current,
-          entityType
-        );
-        if (payload.create.length === 0 && payload.update.length === 0 && payload.delete.length === 0) {
-          return;
-        }
-        const BATCH_SIZE = 150;
-        const totalItems = payload.create.length + payload.update.length + payload.delete.length;
-        const batchCount = Math.ceil(totalItems / BATCH_SIZE);
-        for (let i = 0; i < batchCount; i++) {
-          let currentBatchAvailable = BATCH_SIZE;
-          const currentBatch = {
-            create: [],
-            update: [],
-            delete: []
-          };
-          if (payload.create.length > 0) {
-            currentBatch.create = payload.create.splice(0, currentBatchAvailable);
-            currentBatchAvailable -= currentBatch.create.length;
-          }
-          if (payload.update.length > 0) {
-            currentBatch.update = payload.update.splice(0, currentBatchAvailable);
-            currentBatchAvailable -= currentBatch.update.length;
-          }
-          if (payload.delete.length > 0) {
-            currentBatch.delete = payload.delete.splice(0, currentBatchAvailable);
-            currentBatchAvailable -= currentBatch.delete.length;
-          }
-          await mutateAsync(currentBatch, {
-            onSuccess: () => {
-              if (i === batchCount - 1) {
-                import_ui454.toast.success(
-                  t5("translations.edit.successToast", {
-                    defaultValue: "Translations updated successfully"
-                  })
-                );
-                handleSuccess();
-              }
-            },
-            onError: (error) => {
-              import_ui454.toast.error(error.message);
-            }
-          });
-        }
-      });
-      const columns = useTranslationsGridColumns({
-        entities,
-        translatableFields,
-        availableLocales,
-        selectedLocale,
-        dynamicColumnWidth
-      });
-      const selectedLocaleDisplay = availableLocales.find(
-        (l) => l.locale_code === selectedLocale
-      )?.locale.name;
-      return /* @__PURE__ */ (0, import_jsx_runtime690.jsxs)(RouteFocusModal.Form, { form, children: [
+      const handleClose = (0, import_react307.useCallback)(() => {
+        invalidateQueries();
+      }, [invalidateQueries]);
+      const isLoading = isPending || isSwitchingLocale;
+      return /* @__PURE__ */ (0, import_jsx_runtime690.jsxs)(RouteFocusModal.Form, { form, onClose: handleClose, children: [
         /* @__PURE__ */ (0, import_jsx_runtime690.jsxs)(
           KeyboundForm,
           {
-            onSubmit: handleSubmit,
+            onSubmit: () => handleSave(true),
             className: "flex h-full flex-col overflow-hidden",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime690.jsx)(RouteFocusModal.Header, {}),
@@ -191642,13 +191647,14 @@ var init_translations_edit_form = __esm({
                   },
                   state: form,
                   onEditingChange: (editing) => setCloseOnEscape(!editing),
-                  totalRowCount: totalCount,
+                  totalRowCount,
                   onFetchMore: fetchNextPage,
                   isFetchingMore: isFetchingNextPage,
                   hasNextPage,
                   headerContent: /* @__PURE__ */ (0, import_jsx_runtime690.jsxs)(
                     import_ui454.Select,
                     {
+                      disabled: isLoading,
                       value: selectedLocale,
                       onValueChange: handleLocaleChange,
                       size: "small",
@@ -191668,28 +191674,28 @@ var init_translations_edit_form = __esm({
                 }
               ) }) }),
               /* @__PURE__ */ (0, import_jsx_runtime690.jsx)(RouteFocusModal.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime690.jsxs)("div", { className: "flex items-center justify-end gap-x-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime690.jsx)(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime690.jsx)(import_ui454.Button, { size: "small", variant: "secondary", children: t5("actions.cancel") }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime690.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime690.jsx)(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime690.jsx)(
                   import_ui454.Button,
                   {
-                    size: "small",
                     type: "button",
+                    size: "small",
                     variant: "secondary",
-                    onClick: () => handleSave(false),
-                    isLoading: isPending,
-                    children: t5("actions.saveChanges")
+                    isLoading,
+                    children: t5("actions.cancel")
                   }
-                ),
+                ) }),
                 /* @__PURE__ */ (0, import_jsx_runtime690.jsx)(
                   import_ui454.Button,
                   {
                     size: "small",
                     type: "button",
-                    onClick: () => handleSave(true),
-                    isLoading: isPending,
-                    children: t5("actions.saveAndClose")
+                    variant: "secondary",
+                    onClick: () => handleSave(false),
+                    isLoading,
+                    children: t5("actions.saveChanges")
                   }
-                )
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime690.jsx)(import_ui454.Button, { size: "small", type: "submit", isLoading, children: t5("actions.saveAndClose") })
               ] }) })
             ]
           }
@@ -191716,7 +191722,7 @@ var init_translations_edit_form = __esm({
                 size: "small",
                 onClick: handleSaveAndSwitch,
                 type: "button",
-                isLoading: isPending,
+                isLoading,
                 children: t5("actions.saveChanges")
               }
             )