@backmatter/next 0.0.26 → 0.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backmatter/next",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "description": "Experimental Next.js adapter for Backmatter. APIs will break. Not ready for production.",
   "type": "module",
   "publishConfig": {
@@ -50,7 +50,7 @@
     "@backmatter/core": "^0.0.21",
     "@mdx-js/mdx": "^3.1.1",
     "remark-gfm": "^4.0.1",
-    "@backmatter/studio": "^0.0.4"
+    "@backmatter/studio": "^0.0.5"
   },
   "peerDependencies": {
     "next": ">=16.3.0",

package/src/preview-hold.tsx

@@ -0,0 +1,39 @@
+// packages/next/src/preview-hold.tsx
+"use client";
+
+// A route refresh suspends the preview branch. Its Suspense fallback would
+// otherwise be empty for the whole fetch. The last painted preview is kept
+// here, outside that branch, and shown until the next one is ready.
+import { useEffect, useSyncExternalStore, type ReactNode } from "react";
+
+let held: ReactNode = null;
+const listeners = new Set<() => void>();
+
+function emit() {
+  for (const listener of listeners) listener();
+}
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function clearHeldPreview() {
+  if (held === null) return;
+  held = null;
+  emit();
+}
+
+/** Remember the preview that just painted, so a later refresh can keep it. */
+export function HoldPreview({ children }: { children: ReactNode }) {
+  useEffect(() => {
+    held = children;
+    emit();
+  }, [children]);
+  return children;
+}
+
+/** Suspense fallback: the previous preview, or nothing on the first load. */
+export function HeldPreview() {
+  return useSyncExternalStore(subscribe, () => held, () => null);
+}

package/src/routes.ts

@@ -4,6 +4,7 @@
 // `route` template (including `/` via indexSlug), loads it and renders MDX
 // or JSON pages. An optional catch-all is required so `/` is a CMS route.
 import { Fragment, Suspense, createElement, type ReactNode } from "react";
+import { HeldPreview, HoldPreview } from "./preview-hold";
 import {
   DEFAULT_TEMPLATE_SLUG,
   isRoutable,
@@ -425,15 +426,19 @@ export function createCatchAll<Models extends readonly ModelDef[]>(
     const preview = await resolvePreviewState(cms, options.preview, searchParams);
     if (!previewReplacesPublished(preview)) return null;
     return createElement(
-      Fragment,
+      HoldPreview,
       null,
-      createElement("style", {
-        dangerouslySetInnerHTML: {
-          __html: "[data-backmatter-published]{display:none!important}",
-        },
-      }),
-      docBridge(hit),
-      await loadPreviewDoc(hit, preview),
+      createElement(
+        Fragment,
+        null,
+        createElement("style", {
+          dangerouslySetInnerHTML: {
+            __html: "[data-backmatter-published]{display:none!important}",
+          },
+        }),
+        docBridge(hit),
+        await loadPreviewDoc(hit, preview),
+      ),
     );
   };
 
@@ -454,7 +459,7 @@ export function createCatchAll<Models extends readonly ModelDef[]>(
       Fragment,
       null,
       createElement(PublishedRoute, props),
-      createElement(Suspense, { fallback: null }, createElement(PreviewBranch, props)),
+      createElement(Suspense, { fallback: createElement(HeldPreview) }, createElement(PreviewBranch, props)),
     );
 
   const generateMetadata: CatchAllRoute["generateMetadata"] = async ({ params }) => {

package/src/site-editor.tsx

@@ -9,6 +9,7 @@ import "@backmatter/studio/studio.css";
 import studioPkg from "@backmatter/studio/package.json";
 import { SiteWidget } from "@backmatter/studio/widget";
 import { markerCookie } from "./gate";
+import { clearHeldPreview } from "./preview-hold";
 import { subscribeSiteDoc } from "./site-doc-bridge";
 import { readSiteDoc, sameSiteDoc, type SiteDocRef } from "./site-doc";
 
@@ -19,10 +20,23 @@ const SESSION_RENEW_MS = 30 * 60 * 1000;
 function useSiteDoc(): SiteDocRef | null {
   const pathname = usePathname();
   const [doc, setDoc] = useState<SiteDocRef | null>(null);
+  const pathRef = useRef(pathname);
+
+  useEffect(() => {
+    if (pathRef.current === pathname) return;
+    pathRef.current = pathname;
+    clearHeldPreview();
+    setDoc(null);
+  }, [pathname]);
 
   useEffect(() => {
     const apply = (next: SiteDocRef | null) => {
-      setDoc((prev) => (sameSiteDoc(prev, next) ? prev : next));
+      setDoc((prev) => {
+        // A refresh unmounts the doc marker for a moment. Keep the document
+        // the bar already has so the chat stays mounted across that gap.
+        if (!next) return prev;
+        return sameSiteDoc(prev, next) ? prev : next;
+      });
     };
     apply(readSiteDoc());
     const stop = subscribeSiteDoc(apply);