I think I have a working document cache solution that's actually pretty good.

src/components/documents/npc/NewNpcForm.tsx

@@ -4,7 +4,7 @@ import { pb } from "@/lib/pocketbase";
 import { BaseForm } from "@/components/form/BaseForm";
 import { SingleLineInput } from "@/components/form/SingleLineInput";
 import { MultiLineInput } from "@/components/form/MultiLineInput";
-import { useDocument } from "@/context/document/DocumentContext";
+import { useDocumentCache } from "@/context/document/hooks";
 
 /**
  * Renders a form to add a new npc. Calls onCreate with the new npc document.
@@ -16,7 +16,7 @@ export const NewNpcForm = ({
   campaign: CampaignId;
   onCreate: (npc: Npc) => Promise<void>;
 }) => {
-  const { dispatch } = useDocument();
+  const { dispatch } = useDocumentCache();
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [adding, setAdding] = useState(false);

src/components/documents/npc/NpcEditForm.tsx

@@ -1,5 +1,5 @@
 import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
-import { useDocument } from "@/context/document/DocumentContext";
+import { useDocumentCache } from "@/context/document/hooks";
 import { pb } from "@/lib/pocketbase";
 import type { Npc } from "@/lib/types";
 
@@ -7,7 +7,7 @@ import type { Npc } from "@/lib/types";
  * Renders an editable npc form
  */
 export const NpcEditForm = ({ npc }: { npc: Npc }) => {
-  const { dispatch } = useDocument();
+  const { dispatch } = useDocumentCache();
   async function saveNpcName(name: string) {
     const updated: Npc = await pb.collection("documents").update(npc.id, {
       data: {