@blinkk/root-cms 1.0.0-beta.24 → 1.0.0-beta.25

package/dist/ui/ui.js

@@ -38205,7 +38205,7 @@ ${this.customData.serverResponse}`;
   // package.json
   var package_default = {
     name: "@blinkk/root-cms",
-    version: "1.0.0-beta.24",
+    version: "1.0.0-beta.25",
     author: "s@blinkk.com",
     license: "MIT",
     engines: {
@@ -38254,12 +38254,14 @@ ${this.customData.serverResponse}`;
       "body-parser": "^1.20.0",
       commander: "^10.0.0",
       "cookie-parser": "^1.4.6",
+      "csv-parse": "^5.3.8",
       "csv-stringify": "^6.3.2",
       dotenv: "^16.0.0",
       "dts-dom": "^3.7.0",
       "firebase-admin": "^11.5.0",
       "js-beautify": "^1.14.7",
       kleur: "^4.1.5",
+      multer: "1.4.5-lts.1",
       "preact-render-to-string": "^5.2.3",
       sirv: "^2.0.2",
       "tiny-glob": "^0.2.9"
@@ -38281,6 +38283,7 @@ ${this.customData.serverResponse}`;
       "@types/cookie-parser": "^1.4.3",
       "@types/jsonwebtoken": "^9.0.1",
       "@types/marked": "^4.0.8",
+      "@types/multer": "^1.4.7",
       "@types/node": "^18.11.8",
       concurrently: "^7.6.0",
       esbuild: "0.17.12",
@@ -38296,7 +38299,7 @@ ${this.customData.serverResponse}`;
       vitest: "^0.18.1"
     },
     peerDependencies: {
-      "@blinkk/root": "1.0.0-beta.24",
+      "@blinkk/root": "1.0.0-beta.25",
       "firebase-admin": ">=11",
       preact: "*"
     }
@@ -38417,6 +38420,19 @@ ${this.customData.serverResponse}`;
     ] }) });
   }
 
+  // ui/utils/l10n.ts
+  async function sourceHash(str) {
+    return sha1(str);
+  }
+  async function sha1(str) {
+    const encoder = new TextEncoder();
+    const data = encoder.encode(str);
+    const hash5 = await crypto.subtle.digest("SHA-1", data);
+    const hashArray = Array.from(new Uint8Array(hash5));
+    const hex = hashArray.map((b6) => b6.toString(16).padStart(2, "0")).join("");
+    return hex;
+  }
+
   // ui/utils/doc.ts
   async function cmsDeleteDoc(docId) {
     const projectId = window.__ROOT_CTX.rootConfig.projectId;
@@ -38468,7 +38484,7 @@ ${this.customData.serverResponse}`;
       slug
     );
     await lf(db3, async (transaction) => {
-      const draftDoc = await Kl(draftDocRef);
+      const draftDoc = await transaction.get(draftDocRef);
       if (!draftDoc.exists()) {
         throw new Error(`${draftDocRef.id} does not exist`);
       }
@@ -38484,6 +38500,114 @@ ${this.customData.serverResponse}`;
       transaction.delete(publishedDocRef);
     });
   }
+  async function cmsCopyDoc(fromDocId, toDocId) {
+    const fromDocRef = getDocRef(fromDocId);
+    const fromDoc = await Kl(fromDocRef);
+    if (!fromDoc.exists()) {
+      throw new Error(`doc ${fromDocId} does not exist`);
+    }
+    const fields = fromDoc.data().fields ?? {};
+    await cmsCreateDoc(toDocId, { fields });
+  }
+  async function cmsCreateDoc(docId, options2) {
+    const [collectionId, slug] = docId.split("/");
+    const docRef = getDocRef(docId);
+    const doc = await Kl(docRef);
+    if (doc.exists()) {
+      throw new Error(`${docId} already exists`);
+    }
+    const data = {
+      id: docId,
+      collection: collectionId,
+      slug,
+      sys: {
+        createdAt: df(),
+        createdBy: window.firebase.user.email,
+        modifiedAt: df(),
+        modifiedBy: window.firebase.user.email
+      },
+      fields: options2?.fields ?? {}
+    };
+    await Jl(docRef, data);
+  }
+  async function cmsDocImportCsv(docId, csvData) {
+    const translationsDocRef = getTranslationsDocRef(docId);
+    const translationsMap = {};
+    const i18nConfig = window.__ROOT_CTX.rootConfig.i18n || {};
+    const i18nLocales = i18nConfig.locales || ["en"];
+    function normalizeStr(str) {
+      return String(str).trim();
+    }
+    function normalizeLocale(locale) {
+      for (const l6 of i18nLocales) {
+        if (String(l6).toLowerCase() === locale.toLowerCase()) {
+          return l6;
+        }
+      }
+      return locale;
+    }
+    for (const row of csvData) {
+      if (!row.source) {
+        continue;
+      }
+      const translation = {
+        source: normalizeStr(row.source)
+      };
+      Object.entries(row).forEach(([column3, str]) => {
+        if (column3 === "source") {
+          return;
+        }
+        const locale = normalizeLocale(column3);
+        translation[locale] = normalizeStr(str || "");
+      });
+      const hash5 = await sourceHash(translation.source);
+      translationsMap[hash5] = translation;
+    }
+    const db3 = window.firebase.db;
+    await lf(db3, async (transaction) => {
+      const translationsDoc = await transaction.get(translationsDocRef);
+      const currentData = translationsDoc.data() || {};
+      const data = { ...currentData };
+      data.sys = {
+        ...data.sys ?? {},
+        modifiedAt: df(),
+        modifiedBy: window.firebase.user.email
+      };
+      data.translations = {
+        ...data.translations ?? {},
+        ...translationsMap
+      };
+      transaction.set(translationsDocRef, data);
+    });
+  }
+  function getDocRef(docId) {
+    const projectId = window.__ROOT_CTX.rootConfig.projectId;
+    const db3 = window.firebase.db;
+    const [collectionId, slug] = docId.split("/");
+    return Za(
+      db3,
+      "Projects",
+      projectId,
+      "Collections",
+      collectionId,
+      "Drafts",
+      slug
+    );
+  }
+  function getTranslationsDocRef(docId) {
+    const projectId = window.__ROOT_CTX.rootConfig.projectId;
+    const db3 = window.firebase.db;
+    const [collectionId, slug] = docId.split("/");
+    return Za(
+      db3,
+      "Projects",
+      projectId,
+      "Collections",
+      collectionId,
+      "Translations",
+      slug
+    );
+  }
 
   // ui/components/DocActionsMenu/DocActionsMenu.tsx
   function DocActionsMenu(props) {
@@ -38491,13 +38615,15 @@ ${this.customData.serverResponse}`;
     const data = props.data || {};
     const sys = data.sys || {};
     const modals = useModals();
+    const theme = useMantineTheme();
     const onCopyDoc = () => {
-      if (props.onCopy) {
-        props.onCopy();
-      }
-      if (props.onAction) {
-        props.onAction({ action: "copy" });
-      }
+      modals.openContextModal("copyDoc", {
+        title: "Copy",
+        overlayColor: theme.colorScheme === "dark" ? theme.colors.dark[9] : theme.colors.gray[2],
+        innerProps: {
+          fromDocId: docId
+        }
+      });
     };
     const onUnpublishDoc = () => {
       const notificationId = `unpublish-doc-${docId}`;
@@ -40837,12 +40963,106 @@ ${content}</tr>
     );
   }
 
-  // ui/components/NewDocModal/NewDocModal.tsx
+  // ui/utils/slug.ts
   function isSlugValid(slug) {
     return Boolean(slug && slug.match(/^[a-z0-9]+(?:--?[a-z0-9]+)*$/));
   }
   function normalizeSlug(slug) {
-    return slug.replace(/^[\s/]*/g, "").replace(/[\s/]*$/g, "").toLowerCase().replaceAll("/", "--");
+    return slug.replace(/^[\s/]*/g, "").replace(/[\s/]*$/g, "").replace(/^\/+|\/+$/g, "").toLowerCase().replaceAll("/", "--");
+  }
+
+  // ui/components/SlugInput/SlugInput.tsx
+  function SlugInput(props) {
+    const [collectionId, setCollectionId] = y2(props.collectionId || "");
+    const slugRef = A2(null);
+    const [slug, setSlug] = y2("");
+    const rootCollection = window.__ROOT_CTX.collections[collectionId];
+    const collectionOptions = [];
+    if (props.collectionId && props.collectionDisabled) {
+      collectionOptions.push({
+        value: props.collectionId,
+        label: props.collectionId
+      });
+    } else {
+      Object.keys(window.__ROOT_CTX.collections).forEach((id2) => {
+        collectionOptions.push({
+          value: id2,
+          label: id2
+        });
+      });
+    }
+    const domain2 = window.__ROOT_CTX.rootConfig?.domain || "https://example.com";
+    let urlHelp = "";
+    if (rootCollection?.url) {
+      if (slug) {
+        const cleanSlug = normalizeSlug(slug);
+        if (isSlugValid(cleanSlug)) {
+          const cleanSlugPath = cleanSlug.replaceAll("--", "/");
+          let urlPath = rootCollection.url.replace(/\[.*slug\]/, cleanSlugPath);
+          if (urlPath === "/index") {
+            urlPath = "/";
+          }
+          urlHelp = `${domain2}${urlPath}`;
+        } else {
+          urlHelp = "INVALID SLUG";
+        }
+      } else {
+        urlHelp = `${domain2}${rootCollection.url}`;
+      }
+    }
+    function onCollectionChange(newCollectionId) {
+      setCollectionId(newCollectionId);
+      if (props.onChange) {
+        props.onChange({ collectionId: newCollectionId, slug });
+      }
+    }
+    function onSlugChange(newSlug) {
+      setSlug(newSlug);
+      if (props.onChange) {
+        props.onChange({ collectionId, slug: newSlug });
+      }
+    }
+    return /* @__PURE__ */ o4("div", { className: joinClassNames(props.className, "SlugInput"), children: [
+      /* @__PURE__ */ o4("div", { className: "SlugInput__inputs", children: [
+        /* @__PURE__ */ o4(
+          Select,
+          {
+            className: "SlugInput__collection",
+            placeholder: "Collection",
+            size: "xs",
+            data: collectionOptions,
+            onChange: (newValue) => onCollectionChange(newValue),
+            value: collectionId,
+            disabled: !!props.collectionDisabled
+          }
+        ),
+        /* @__PURE__ */ o4("div", { className: "SlugInput__divider", children: "/" }),
+        /* @__PURE__ */ o4(
+          TextInput,
+          {
+            className: "SlugInput__slug",
+            name: "slug",
+            ref: slugRef,
+            value: slug,
+            onChange: (event) => {
+              onSlugChange(event.currentTarget.value);
+            },
+            placeholder: "slug",
+            autoComplete: "off",
+            size: "xs"
+          }
+        )
+      ] }),
+      urlHelp && /* @__PURE__ */ o4(Text2, { className: "SlugInput__urlHelp", size: "body-sm", children: urlHelp })
+    ] });
+  }
+
+  // ui/components/NewDocModal/NewDocModal.tsx
+  function isSlugValid2(slug) {
+    return Boolean(slug && slug.match(/^[a-z0-9]+(?:--?[a-z0-9]+)*$/));
+  }
+  function normalizeSlug2(slug) {
+    return slug.replace(/^[\s/]*/g, "").replace(/[\s/]*$/g, "").replace(/^\/+|\/+$/g, "").toLowerCase().replaceAll("/", "--");
   }
   function getDefaultFields(collection) {
     const fields = {};
@@ -40858,38 +41078,14 @@ ${content}</tr>
   }
   function NewDocModal(props) {
     const collectionId = props.collection;
-    const slugRef = A2(null);
     const [slug, setSlug] = y2("");
     const [loading, setLoading] = y2(false);
     const [slugError, setSlugError] = y2("");
-    const firebase = useFirebase();
     const theme = useMantineTheme();
-    const projectId = window.__ROOT_CTX.rootConfig.projectId;
-    const dbCollection = Ja2(
-      firebase.db,
-      "Projects",
-      projectId,
-      "Collections",
-      collectionId,
-      "Drafts"
-    );
     const rootCollection = window.__ROOT_CTX.collections[collectionId];
     if (!rootCollection) {
       throw new Error(`collection not found: ${collectionId}`);
     }
-    const domain2 = window.__ROOT_CTX.rootConfig.domain || "https://example.com";
-    let urlHelp = "";
-    if (rootCollection?.url) {
-      if (slug) {
-        let urlPath = rootCollection.url.replace(/\[.*slug\]/, slug);
-        if (urlPath === "/index") {
-          urlPath = "/";
-        }
-        urlHelp = `${domain2}${urlPath}`;
-      } else {
-        urlHelp = `${domain2}${rootCollection.url}`;
-      }
-    }
     function onClose() {
       if (props.onClose) {
         props.onClose();
@@ -40899,34 +41095,23 @@ ${content}</tr>
       e3.preventDefault();
       setLoading(true);
       setSlugError("");
-      const slug2 = normalizeSlug(String(slugRef.current.value));
-      if (!isSlugValid(slug2)) {
+      const cleanSlug = normalizeSlug2(slug);
+      if (!isSlugValid2(cleanSlug)) {
         setSlugError('Please enter a valid slug (e.g. "foo-bar-123").');
         setLoading(false);
         return;
       }
-      const docId = `${collectionId}/${slug2}`;
-      const docRef = Za(dbCollection, slug2);
-      const snapshot = await Kl(docRef);
-      if (await snapshot.exists()) {
-        setSlugError(`${docId} already exists`);
+      const docId = `${collectionId}/${cleanSlug}`;
+      try {
+        const fields = getDefaultFields(rootCollection);
+        await cmsCreateDoc(docId, { fields });
+      } catch (err) {
+        setSlugError(String(err));
         setLoading(false);
         return;
       }
-      await Jl(docRef, {
-        id: docId,
-        slug: slug2,
-        collection: collectionId,
-        sys: {
-          createdAt: df(),
-          createdBy: window.firebase.user.email,
-          modifiedAt: df(),
-          modifiedBy: window.firebase.user.email
-        },
-        fields: getDefaultFields(rootCollection)
-      });
       setLoading(false);
-      $4(`/cms/content/${props.collection}/${slug2}?new=true`);
+      $4(`/cms/content/${props.collection}/${cleanSlug}?new=true`);
     }
     return /* @__PURE__ */ o4(
       Modal,
@@ -40934,25 +41119,23 @@ ${content}</tr>
         className: "NewDocModal",
         opened: props.opened || false,
         onClose: () => onClose(),
-        title: `${props.collection}: New doc`,
+        title: "New",
+        size: "500px",
         overlayColor: theme.colorScheme === "dark" ? theme.colors.dark[9] : theme.colors.gray[2],
         children: [
           /* @__PURE__ */ o4("div", { className: "NewDocModal__body", children: "Enter a slug for the new doc. The slug is the ID of the page and is what's used in the URL. Use only lowercase letters, numbers, and dashes." }),
           /* @__PURE__ */ o4("form", { onSubmit: (e3) => onSubmit(e3), children: [
-            /* @__PURE__ */ o4("div", { className: "NewDocModal__slug", children: /* @__PURE__ */ o4(
-              TextInput,
+            /* @__PURE__ */ o4(
+              SlugInput,
               {
-                name: "slug",
-                ref: slugRef,
-                value: slug,
-                onChange: (event) => setSlug(event.currentTarget.value),
-                placeholder: "slug",
-                autoComplete: "off",
-                size: "xs",
-                description: urlHelp,
-                error: slugError
+                className: "NewDocModal__slug",
+                collectionId,
+                onChange: (newValue) => {
+                  setSlug(newValue.slug);
+                }
               }
-            ) }),
+            ),
+            slugError && /* @__PURE__ */ o4("div", { className: "NewDocModal__slugError", children: slugError }),
             /* @__PURE__ */ o4("div", { className: "NewDocModal__buttons", children: [
               /* @__PURE__ */ o4(
                 Button,
@@ -41160,7 +41343,7 @@ ${content}</tr>
     s2(() => {
       setLoading(true);
       listDocs();
-    }, []);
+    }, [Ja2, options2.orderBy]);
     return [loading, listDocs, docs];
   }
   function CollectionPage(props) {
@@ -41646,10 +41829,39 @@ ${content}</tr>
     };
   }
 
+  // ui/utils/events.ts
+  var EventListener = class {
+    constructor() {
+      this.events = /* @__PURE__ */ new Map();
+    }
+    on(eventName, callback) {
+      const callbacks = this.events.get(eventName) ?? [];
+      this.events.set(eventName, [...callbacks, callback]);
+      return () => {
+        this.off(eventName, callback);
+      };
+    }
+    off(eventName, callback) {
+      const eventCallbacks = this.events.get(eventName) ?? [];
+      const index3 = eventCallbacks.indexOf(callback);
+      if (index3 >= 0) {
+        eventCallbacks.splice(index3, 1);
+      }
+    }
+    dispatch(eventName, ...args) {
+      const eventCallbacks = this.events.get(eventName) ?? [];
+      eventCallbacks.forEach((callback) => callback(...args));
+    }
+    dispose() {
+      this.events.clear();
+    }
+  };
+
   // ui/hooks/useDraft.ts
   var SAVE_DELAY_MS = 3 * 1e3;
-  var DraftController = class {
+  var DraftController = class extends EventListener {
     constructor(docId) {
+      super();
       this.pendingUpdates = /* @__PURE__ */ new Map();
       this.cachedData = {};
       this.subscribers = {};
@@ -41683,7 +41895,6 @@ ${content}</tr>
       if (this.started) {
         return;
       }
-      console.log("start()");
       this.started = true;
       this.dbUnsubscribe = tf(this.docRef, (snapshot) => {
         const data = snapshot.data();
@@ -41691,7 +41902,6 @@ ${content}</tr>
           applyUpdates(data, Object.fromEntries(this.pendingUpdates));
         }
         this.cachedData = data;
-        console.log("onSnapshot()", data, this.pendingUpdates);
         this.notifySubscribers();
       });
     }
@@ -41702,7 +41912,6 @@ ${content}</tr>
       if (!this.started) {
         return;
       }
-      console.log("stop()");
       if (this.dbUnsubscribe) {
         this.dbUnsubscribe();
       }
@@ -41710,16 +41919,22 @@ ${content}</tr>
       this.started = false;
     }
     /**
-     * Adds a listener for change events.
+     * Adds a listener for data change events.
      */
     onChange(callback) {
-      this.onChangeCallback = callback;
+      return this.on("CHANGE" /* CHANGE */, callback);
     }
     /**
      * Adds a listener for save state change events.
      */
     onSaveStateChange(callback) {
-      this.onSaveStateChangeCallback = callback;
+      return this.on("SAVE_STATE_CHANGE" /* SAVE_STATE_CHANGE */, callback);
+    }
+    /**
+     * Adds a listener for db write events.
+     */
+    onFlush(callback) {
+      return this.on("FLUSH" /* FLUSH */, callback);
     }
     /**
      * Subscribes to remote changes for a given key. Returns a callback function
@@ -41727,7 +41942,6 @@ ${content}</tr>
      */
     subscribe(key, callback) {
       var _a2;
-      console.log("subscribe()", key);
       (_a2 = this.subscribers)[key] ?? (_a2[key] = /* @__PURE__ */ new Set());
       this.subscribers[key].add(callback);
       callback(getNestedValue(this.cachedData, key));
@@ -41743,11 +41957,8 @@ ${content}</tr>
      * Notifies subscribers of changes.
      */
     notifySubscribers() {
-      console.log("notifySubscribers()");
       const data = this.cachedData;
-      if (this.onChangeCallback) {
-        this.onChangeCallback(data);
-      }
+      this.dispatch("CHANGE" /* CHANGE */, data);
       notify(this.subscribers, data);
     }
     /**
@@ -41765,9 +41976,7 @@ ${content}</tr>
         this.pendingUpdates.set(key, updates[key]);
       }
       applyUpdates(this.cachedData, updates);
-      if (this.onChangeCallback) {
-        this.onChangeCallback(this.cachedData);
-      }
+      this.dispatch("CHANGE" /* CHANGE */, this.cachedData);
       this.setSaveState("UPDATE_PENDING" /* UPDATES_PENDING */);
       this.queueChanges();
     }
@@ -41777,9 +41986,7 @@ ${content}</tr>
     async removeKey(key) {
       this.pendingUpdates.set(key, ff());
       applyUpdates(this.cachedData, { [key]: void 0 });
-      if (this.onChangeCallback) {
-        this.onChangeCallback({ ...this.cachedData });
-      }
+      this.dispatch("CHANGE" /* CHANGE */, this.cachedData);
       this.setSaveState("UPDATE_PENDING" /* UPDATES_PENDING */);
       this.queueChanges();
     }
@@ -41796,9 +42003,7 @@ ${content}</tr>
           }
         }, SAVE_DELAY_MS);
       }
-      if (this.onSaveStateChangeCallback) {
-        this.onSaveStateChangeCallback(newSaveState);
-      }
+      this.dispatch("SAVE_STATE_CHANGE" /* SAVE_STATE_CHANGE */, newSaveState);
     }
     /**
      * Immediately write all queued data to the DB.
@@ -41816,10 +42021,17 @@ ${content}</tr>
         this.setSaveState("SAVING" /* SAVING */);
         await Yl(this.docRef, updates);
         this.setSaveState("SAVED" /* SAVED */);
+        this.dispatch("FLUSH" /* FLUSH */);
       } catch (err) {
         console.error("failed to update doc");
         console.error(err);
         this.setSaveState("ERROR" /* ERROR */);
+        showNotification({
+          title: "Failed to save",
+          message: `Failed to save changes to ${this.slug}`,
+          color: "red",
+          autoClose: false
+        });
         for (const key in updates) {
           if (key.startsWith("sys.")) {
             continue;
@@ -41846,6 +42058,7 @@ ${content}</tr>
      * Stops all listeners and disposes the controller.
      */
     async dispose() {
+      super.dispose();
       this.stop();
     }
   };
@@ -41893,28 +42106,28 @@ ${content}</tr>
   function useDraft(docId) {
     const [loading, setLoading] = y2(true);
     const [data, setData] = y2({});
-    const draft = T2(() => new DraftController(docId), []);
+    const controller = T2(() => new DraftController(docId), []);
     const [saveState, setSaveState] = y2("NO_CHANGES" /* NO_CHANGES */);
     s2(() => {
-      draft.onChange((data2) => {
+      controller.onChange((data2) => {
         setData(data2);
         setLoading(false);
       });
-      draft.onSaveStateChange((newSaveState) => setSaveState(newSaveState));
-      draft.start();
+      controller.onSaveStateChange((newSaveState) => setSaveState(newSaveState));
+      controller.start();
       document.addEventListener("visibilitychange", () => {
         if (document.hidden || document.visibilityState !== "visible") {
-          draft.stop();
+          controller.stop();
         } else {
-          if (!draft.started) {
+          if (!controller.started) {
             setLoading(true);
-            draft.start();
+            controller.start();
           }
         }
       });
-      return () => draft.dispose();
+      return () => controller.dispose();
     }, []);
-    return { loading, saveState, draft, data };
+    return { loading, saveState, controller, data };
   }
 
   // ui/utils/str-format.ts
@@ -41961,11 +42174,11 @@ ${content}</tr>
   LocalizationModal.ConfigLocales = (props) => {
     const [enabledLocales, setEnabledLocales] = y2(["en"]);
     const i18nConfig = window.__ROOT_CTX.rootConfig.i18n || {};
-    const podLocales = i18nConfig.locales || ["en"];
+    const i18nLocales = i18nConfig.locales || ["en"];
     const localeGroups = i18nConfig.groups || {
       default: {
         label: "",
-        locales: podLocales
+        locales: i18nLocales
       }
     };
     s2(() => {
@@ -42013,7 +42226,7 @@ ${content}</tr>
         /* @__PURE__ */ o4(
           LocalizationModal.AllNoneButtons,
           {
-            onAllClicked: () => updateEnabledLocales(podLocales),
+            onAllClicked: () => updateEnabledLocales(i18nLocales),
             onNoneClicked: () => updateEnabledLocales([])
           }
         )
@@ -42121,6 +42334,7 @@ ${content}</tr>
     const [loading, setLoading] = y2(true);
     const [sourceStrings, setSourceStrings] = y2([]);
     const [selectedLocale, setSelectedLocale] = y2("");
+    const [localeTranslations, setLocaleTranslations] = y2({});
     const locales = window.__ROOT_CTX.rootConfig.i18n.locales || [];
     const localeOptions = locales.map((locale) => ({
       value: locale,
@@ -42136,6 +42350,25 @@ ${content}</tr>
         setLoading(false);
       });
     }, [props.opened]);
+    s2(() => {
+      if (!selectedLocale) {
+        setLocaleTranslations({});
+        return;
+      }
+      const translationsRef = getTranslationsDocRef(props.docId);
+      Kl(translationsRef).then((translationsDoc) => {
+        const data = translationsDoc.data() || {};
+        return data.translations || {};
+      }).then((translationsMap) => {
+        const localeTranslations2 = {};
+        Object.values(translationsMap).forEach(
+          (translation) => {
+            localeTranslations2[translation.source] = translation[selectedLocale] || "";
+          }
+        );
+        setLocaleTranslations(localeTranslations2);
+      });
+    }, [selectedLocale]);
     async function downloadCsv() {
       const headers = ["source", "en"];
       const rows = [];
@@ -42160,12 +42393,39 @@ ${content}</tr>
       window.location.assign(file);
       window.URL.revokeObjectURL(file);
     }
+    async function importCsv() {
+      const fileInput = document.createElement("input");
+      fileInput.type = "file";
+      fileInput.accept = ".csv";
+      fileInput.addEventListener("change", async () => {
+        const file = fileInput.files?.[0];
+        if (file) {
+          const formData = new FormData();
+          formData.append("file", file);
+          const res = await fetch("/cms/api/csv.import", {
+            method: "POST",
+            body: formData
+          }).then((res2) => res2.json());
+          await cmsDocImportCsv(props.docId, res.data);
+          showNotification({
+            title: "Saved!",
+            message: `Successfully imported translations for ${props.docId}.`,
+            autoClose: 5e3
+          });
+        }
+      });
+      fileInput.click();
+    }
     function onAction(action) {
       switch (action) {
         case "export-download-csv": {
           downloadCsv();
           return;
         }
+        case "import-csv": {
+          importCsv();
+          return;
+        }
       }
     }
     if (loading) {
@@ -42241,7 +42501,7 @@ ${content}</tr>
                 borderRadius: 4,
                 height: "100%"
               }),
-              children: /* @__PURE__ */ o4(Text, { size: "xs", sx: { whiteSpace: "pre-wrap" }, children: "\xA0" })
+              children: /* @__PURE__ */ o4(Text, { size: "xs", sx: { whiteSpace: "pre-wrap" }, children: localeTranslations[source] || " " })
             }
           ) })
         ] }, i3))
@@ -42335,7 +42595,7 @@ ${content}</tr>
           /* @__PURE__ */ o4(Menu.Item, { disabled: true, onClick: () => dispatch("import-google-sheet"), children: "Import Google Sheet" }),
           /* @__PURE__ */ o4(Divider, {}),
           /* @__PURE__ */ o4(Menu.Label, { children: "File" }),
-          /* @__PURE__ */ o4(Menu.Item, { onClick: () => dispatch("import-upload-csv"), children: "Upload .csv" })
+          /* @__PURE__ */ o4(Menu.Item, { onClick: () => dispatch("import-csv"), children: "Import .csv" })
         ]
       }
     );
@@ -42547,14 +42807,9 @@ ${content}</tr>
   // ui/components/DocEditor/DocEditor.tsx
   function DocEditor(props) {
     const fields = props.collection.fields || [];
-    const { loading, draft, saveState, data } = useDraft(props.docId);
+    const { loading, controller, saveState, data } = props.draft;
     const [publishDocModalOpen, setPublishDocModalOpen] = y2(false);
     const [l10nModalOpen, setL10nModalOpen] = y2(false);
-    s2(() => {
-      if (draft && props.onDraftController) {
-        props.onDraftController(draft);
-      }
-    }, [draft]);
     function goBack() {
       const collectionId = props.docId.split("/")[0];
       $4(`/cms/content/${collectionId}`);
@@ -42571,7 +42826,7 @@ ${content}</tr>
       /* @__PURE__ */ o4(
         LocalizationModal,
         {
-          draft,
+          draft: controller,
           collection: props.collection,
           docId: props.docId,
           opened: l10nModalOpen,
@@ -42631,7 +42886,7 @@ ${content}</tr>
             field,
             shallowKey: field.id,
             deepKey: `fields.${field.id}`,
-            draft
+            draft: controller
           },
           field.id
         )) })
@@ -42687,7 +42942,9 @@ ${content}</tr>
           minRows: 2,
           maxRows: field.maxRows || 12,
           value,
-          onChange: (e3) => onChange(e3.currentTarget.value)
+          onChange: (e3) => {
+            onChange(e3.currentTarget.value);
+          }
         }
       );
     }
@@ -42697,7 +42954,9 @@ ${content}</tr>
         size: "xs",
         radius: 0,
         value,
-        onChange: (e3) => onChange(e3.currentTarget.value)
+        onChange: (e3) => {
+          onChange(e3.currentTarget.value);
+        }
       }
     );
   };
@@ -42711,7 +42970,7 @@ ${content}</tr>
   async function uploadFileToGCS(file) {
     const projectId = window.__ROOT_CTX.rootConfig.projectId;
     const hashHex = await sha256(file);
-    const ext = file.name.split(".").at(-1);
+    const ext = normalizeExt(file.name.split(".").at(-1) || "");
     const filePath = `${projectId}/uploads/${hashHex}.${ext}`;
     const gcsRef = ref(window.firebase.storage, filePath);
     await uploadBytes(gcsRef, file);
@@ -42741,6 +43000,13 @@ ${content}</tr>
       src: imageSrc
     };
   }
+  function normalizeExt(ext) {
+    let output = String(ext).toLowerCase();
+    if (output === ".jpeg") {
+      output = ".jpg";
+    }
+    return output;
+  }
   async function getGciUrl(gcsPath) {
     const gciDomain = window.__ROOT_CTX.rootConfig.gci;
     if (!gciDomain) {
@@ -42866,7 +43132,9 @@ ${content}</tr>
             radius: 0,
             value: img.alt,
             label: "Alt text",
-            onChange: (e3) => setAltText(e3.target.value)
+            onChange: (e3) => {
+              setAltText(e3.currentTarget.value);
+            }
           }
         )
       ] }) : /* @__PURE__ */ o4("div", { className: "DocEditor__ImageField__noImage", children: "No image" }),
@@ -42986,7 +43254,6 @@ ${content}</tr>
     )) }) });
   };
   function arrayReducer(state, action) {
-    console.log(action);
     switch (action.type) {
       case "update": {
         const newlyAdded = state._new || [];
@@ -43124,7 +43391,6 @@ ${content}</tr>
       const unsubscribe = props.draft.subscribe(
         props.deepKey,
         (newValue) => {
-          console.log("onRemoteChange()", newValue);
           dispatch({ type: "update", newValue });
         }
       );
@@ -43468,7 +43734,6 @@ ${content}</tr>
     placeholders._index = String(index3);
     placeholders["_index:02"] = placeholders._index.padStart(2, "0");
     placeholders["_index:03"] = placeholders._index.padStart(3, "0");
-    console.log(placeholders);
     while (templates.length > 0) {
       const template = templates.shift();
       const preview = strFormat(template, placeholders);
@@ -43543,15 +43808,12 @@ ${content}</tr>
     const slug = props.slug;
     const docId = `${collectionId}/${slug}`;
     const collection = window.__ROOT_CTX.collections[collectionId];
-    const [draft, setDraft] = y2(null);
+    const draft = useDraft(docId);
     if (!collection) {
       return /* @__PURE__ */ o4("div", { children: "Could not find collection." });
     }
     function saveDraft() {
-      console.log("saveDraft()");
-      if (draft) {
-        draft.flush();
-      }
+      draft.controller.flush();
     }
     useHotkeys([["mod+S", () => saveDraft()]]);
     return /* @__PURE__ */ o4(Layout, { children: /* @__PURE__ */ o4(SplitPanel, { className: "DocumentPage", localStorageId: "DocumentPage", children: [
@@ -43574,14 +43836,7 @@ ${content}</tr>
             }
           ) })
         ] }),
-        /* @__PURE__ */ o4("div", { className: "DocumentPage__side__editor", children: /* @__PURE__ */ o4(
-          DocEditor,
-          {
-            collection,
-            docId,
-            onDraftController: (draft2) => setDraft(draft2)
-          }
-        ) })
+        /* @__PURE__ */ o4("div", { className: "DocumentPage__side__editor", children: /* @__PURE__ */ o4(DocEditor, { collection, docId, draft }) })
       ] }),
       /* @__PURE__ */ o4(SplitPanel.Item, { className: "DocumentPage__main", fluid: true, children: /* @__PURE__ */ o4(DocumentPage.Preview, { docId, draft }) })
     ] }) });
@@ -43604,10 +43859,20 @@ ${content}</tr>
       "--iframe-scale": "1"
     });
     const iframeRef = A2(null);
+    function reloadIframe() {
+      const iframe = iframeRef.current;
+      iframe.src = "about:blank";
+      window.setTimeout(() => {
+        if (iframe.src !== previewPath) {
+          iframe.src = previewPath;
+        } else {
+          iframe.contentWindow.location.reload();
+        }
+      }, 20);
+    }
     s2(() => {
       const iframe = iframeRef.current;
       function onIframeLoad() {
-        console.log("iframe load", iframe.contentWindow?.document.title);
         const iframeWindow = iframe.contentWindow;
         if (!iframeWindow) {
           return;
@@ -43618,7 +43883,11 @@ ${content}</tr>
         }
       }
       iframe.addEventListener("load", onIframeLoad);
+      const removeOnFlush = props.draft.controller.onFlush(() => {
+        reloadIframe();
+      });
       return () => {
+        removeOnFlush();
         iframe.removeEventListener("load", onIframeLoad);
       };
     }, []);
@@ -43630,23 +43899,8 @@ ${content}</tr>
         return device2;
       });
     }
-    function reload2() {
-      const reloadIframe = () => {
-        const iframe = iframeRef.current;
-        iframe.src = "about:blank";
-        window.setTimeout(() => {
-          if (iframe.src !== previewPath) {
-            iframe.src = previewPath;
-          } else {
-            iframe.contentWindow.location.reload();
-          }
-        }, 20);
-      };
-      if (props.draft) {
-        props.draft.flush().then(() => reloadIframe());
-      } else {
-        reloadIframe();
-      }
+    function onReloadClick() {
+      props.draft.controller.flush().then(() => reloadIframe());
     }
     function openNewTab() {
       const tab = window.open(previewPath, "_blank");
@@ -43724,7 +43978,7 @@ ${content}</tr>
             ActionIcon,
             {
               className: "DocumentPage__main__previewBar__button DocumentPage__main__previewBar__button--reload",
-              onClick: () => reload2(),
+              onClick: () => onReloadClick(),
               children: /* @__PURE__ */ o4(IconReload, { size: 16 })
             }
           ) }),
@@ -44025,6 +44279,94 @@ ${content}</tr>
     ] }) });
   }
 
+  // ui/components/CopyDocModal/CopyDocModal.tsx
+  function CopyDocModal(modalProps) {
+    const { innerProps: props, context, id: id2 } = modalProps;
+    const [toCollectionId, setToCollectionId] = y2("");
+    const [toSlug, setToSlug] = y2("");
+    const [error, setError] = y2("");
+    const [loading, setLoading] = y2(false);
+    const fromDocId = props.fromDocId;
+    const fromCollectionId = fromDocId.split("/")[0];
+    async function onSubmit(e3) {
+      e3.preventDefault();
+      setLoading(true);
+      setError("");
+      if (!fromCollectionId) {
+        setError("Please select a collection.");
+        setLoading(false);
+        return;
+      }
+      const cleanSlug = normalizeSlug(toSlug);
+      if (!isSlugValid(cleanSlug)) {
+        setError('Please enter a valid slug (e.g. "foo-bar-123").');
+        setLoading(false);
+        return;
+      }
+      const toDocId = `${toCollectionId}/${cleanSlug}`;
+      try {
+        await cmsCopyDoc(fromDocId, toDocId);
+        context.closeModal(id2);
+        showNotification({
+          title: "Copied!",
+          message: `Succesfully copied ${fromDocId} to ${toDocId}.`,
+          autoClose: 5e3
+        });
+      } catch (err) {
+        setError(String(err));
+        setLoading(false);
+        return;
+      }
+      setLoading(false);
+      $4(`/cms/content/${toCollectionId}/${cleanSlug}`);
+    }
+    return /* @__PURE__ */ o4("div", { className: "CopyDocModal", children: /* @__PURE__ */ o4("form", { onSubmit: (e3) => onSubmit(e3), children: [
+      /* @__PURE__ */ o4("div", { className: "CopyDocModal__from", children: [
+        /* @__PURE__ */ o4(Text2, { className: "CopyDocModal__from__label", size: "body", weight: "bold", children: "From:" }),
+        /* @__PURE__ */ o4(Text2, { className: "CopyDocModal__from__value", size: "body-sm", children: /* @__PURE__ */ o4("code", { children: props.fromDocId }) })
+      ] }),
+      /* @__PURE__ */ o4("div", { className: "CopyDocModal__to", children: [
+        /* @__PURE__ */ o4(Text2, { className: "CopyDocModal__to__label", size: "body", weight: "bold", children: "To:" }),
+        /* @__PURE__ */ o4(
+          SlugInput,
+          {
+            className: "CopyDocModal__slug",
+            collectionId: fromCollectionId,
+            onChange: (newValue) => {
+              setToCollectionId(newValue.collectionId);
+              setToSlug(newValue.slug);
+            }
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ o4("div", { className: "CopyDocModal__error", children: error }),
+      /* @__PURE__ */ o4("div", { className: "CopyDocModal__buttons", children: [
+        /* @__PURE__ */ o4(
+          Button,
+          {
+            variant: "outline",
+            onClick: () => context.closeModal(id2),
+            type: "button",
+            size: "xs",
+            color: "dark",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ o4(
+          Button,
+          {
+            variant: "filled",
+            type: "submit",
+            size: "xs",
+            color: "dark",
+            loading,
+            children: "Submit"
+          }
+        )
+      ] })
+    ] }) });
+  }
+
   // ui/ui.tsx
   function App() {
     return /* @__PURE__ */ o4(
@@ -44034,7 +44376,7 @@ ${content}</tr>
           fontFamily: "Inter, sans-serif",
           fontSizes: { xs: 12, sm: 14, md: 16, lg: 18, xl: 20 }
         },
-        children: /* @__PURE__ */ o4(NotificationsProvider, { children: /* @__PURE__ */ o4(ModalsProvider, { children: /* @__PURE__ */ o4(FirebaseContext.Provider, { value: window.firebase, children: /* @__PURE__ */ o4(D4, { children: [
+        children: /* @__PURE__ */ o4(NotificationsProvider, { children: /* @__PURE__ */ o4(ModalsProvider, { modals: { copyDoc: CopyDocModal }, children: /* @__PURE__ */ o4(FirebaseContext.Provider, { value: window.firebase, children: /* @__PURE__ */ o4(D4, { children: [
           /* @__PURE__ */ o4(L6, { path: "/cms", component: ProjectPage }),
           /* @__PURE__ */ o4(L6, { path: "/cms/assets", component: AssetsPage }),
           /* @__PURE__ */ o4(
@@ -44102,7 +44444,6 @@ ${content}</tr>
       console.log(res);
       return;
     }
-    console.log("updated user session");
   }
 })();
 /*! Bundled license information: