@backmatter/next 0.0.32 → 0.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backmatter/next",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "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.26",
     "@mdx-js/mdx": "^3.1.1",
     "remark-gfm": "^4.0.1",
-    "@backmatter/studio": "^0.0.9"
+    "@backmatter/studio": "^0.0.12"
   },
   "peerDependencies": {
     "next": ">=16.3.0",

package/src/preview-refresh.tsx

@@ -8,9 +8,14 @@ import {
   createPreviewPage,
   createWindowPreviewTransport,
   type PreviewChannelRef,
+  type PreviewPageSession,
   type PreviewRenderDoc,
   type PreviewTransport,
 } from "@backmatter/core/preview";
+import { POINTER_ARM_EVENT } from "@backmatter/studio/src/chat/pointer-arm";
+import { installPreviewPointer } from "@backmatter/studio/src/install-preview-pointer";
+import { registerPreviewPointerHost } from "@backmatter/studio/src/preview-pointer-host";
+import { findPointedElement, highlightPointedElement } from "@backmatter/studio/src/site-pointer";
 import { fanInPreviewTransports, sitePageTransport } from "./site-channel";
 import { PreviewPageReloader as PreviewStreamReloader, PreviewRemoved } from "./preview-live";
 
@@ -22,6 +27,12 @@ export function PreviewPageReloader(props: { locale: string; type: string; slug:
       router.refresh();
     });
   }, [router]);
+  // HEAD and other documents in this checkout. This document's own saves
+  // arrive on the doc stream below and must not refresh the page twice.
+  useEffect(
+    () => subscribeTreeStream({ locale: props.locale, type: props.type, slug: props.slug }, refresh),
+    [props.locale, props.type, props.slug, refresh],
+  );
   return <PreviewStreamReloader {...props} refresh={refresh} />;
 }
 
@@ -183,9 +194,27 @@ export function PreviewClient({
       startTransition(() => router.refresh());
     };
     const unsubscribeTree = subscribeTreeStream(ref, refreshOthers);
-    const session = createPreviewPage({
+    let session: PreviewPageSession;
+    const previewPointer = installPreviewPointer(document, {
+      bar: () => document.querySelector("[data-backmatter-devbar]"),
+      ignore: (target) => {
+        if (!(target instanceof Element)) return true;
+        if (target.closest("[data-backmatter-panel]")) return true;
+        return target.closest("iframe") !== null;
+      },
+      onEditorGrab: (grab) => session.grab(grab),
+      onDevbarGrab: (grab) => {
+        window.dispatchEvent(new CustomEvent("backmatter:devbar-grab", { detail: grab }));
+      },
+      onEscape: (source) => {
+        if (source === "editor") session.point(false);
+        window.dispatchEvent(new CustomEvent(POINTER_ARM_EVENT, { detail: { on: false } }));
+      },
+    });
+    session = createPreviewPage({
       ref,
       transport,
+      capabilities: ["point"],
       subscribeSse: (onEvent) => subscribeDocStream(ref, onEvent),
       renderer: async (_ref, doc) => {
         const result = await renderPreview(ref, doc, checkoutToken);
@@ -206,10 +235,34 @@ export function PreviewClient({
         onNavigate: (path) => {
           startTransition(() => router.push(path));
         },
+        onPoint(on) {
+          if (on) {
+            previewPointer.arm("editor");
+            window.dispatchEvent(new CustomEvent(POINTER_ARM_EVENT, { detail: { on: false } }));
+            return;
+          }
+          if (previewPointer.source() === "editor") previewPointer.disarm();
+        },
+        onHighlight(blockId) {
+          const target = blockId ? findPointedElement(document, { blockId, quote: "" }) : null;
+          highlightPointedElement(document, target);
+        },
+      },
+    });
+    const stopHost = registerPreviewPointerHost({
+      armFromDevbar() {
+        previewPointer.arm("devbar");
+        session.point(false);
+      },
+      disarmFromDevbar() {
+        if (previewPointer.source() !== "devbar") return;
+        previewPointer.disarm();
       },
     });
     return () => {
       unsubscribeTree();
+      stopHost();
+      previewPointer.dispose();
       session.close();
       windowTransport?.close();
     };