@backmatter/studio 0.0.9 → 0.0.11

package/src/chrome/branch-head.ts

@@ -0,0 +1,14 @@
+// packages/studio/src/chrome/branch-head.ts
+
+/**
+ * Whether a later git poll is a new commit.
+ * The first sample only records the sha. `updatedAt` is not part of the
+ * identity: rewriting the head row must not look like HEAD moved.
+ */
+export function branchHeadMoved(
+  previousSha: string | null | undefined,
+  nextSha: string | null,
+): boolean {
+  if (previousSha === undefined) return false;
+  return previousSha !== nextSha;
+}

package/src/pages/DocEditorPage.tsx

@@ -49,9 +49,10 @@ import {
 import {
   editorPreviewPath,
   modelForType,
-  previewSiteUrl,
-  primarySiteUrl,
   onSitePreviewUrl,
+  previewEnableUrl,
+  previewFrameIdentity,
+  primarySiteUrl,
   studioIsOnSite,
   productionDocUrl,
 } from "./preview-url";
@@ -255,31 +256,35 @@ export function DocEditorPage() {
     fieldNames.find((name) => fieldKinds[name] === "blocks") ?? "blocks";
   const siteUrl = primarySiteUrl(workspace.siteUrls ?? []);
   const liveUrl = productionDocUrl(siteUrl, modelForType(models, type), locale, slug);
+  const previewPath = editorPreviewPath(
+    modelForType(models, type),
+    slug,
+    locale,
+    branch,
+    tree,
+  );
+  // Strings only. A replica refresh builds new models and siteUrls arrays
+  // with the same contents; that must not mint a ticket and reload the frame.
+  const frameIdentity = previewFrameIdentity({
+    siteUrl,
+    path: showPreview ? previewPath : null,
+    branch,
+    tree,
+  });
 
   useEffect(() => {
-    if (!showPreview) {
-      setPreviewUrl(null);
-      return;
-    }
-    const redirect = editorPreviewPath(
-      modelForType(models, type),
-      slug,
-      locale,
-      branch,
-      tree,
-    );
-    if (!redirect || !workspaceId || !siteUrl) {
+    if (!frameIdentity || !previewPath || !workspaceId || !siteUrl) {
       setPreviewUrl(null);
       return;
     }
     if (studioIsOnSite(siteUrl, window.location.origin)) {
-      setPreviewUrl(onSitePreviewUrl(siteUrl, redirect));
+      setPreviewUrl(onSitePreviewUrl(siteUrl, previewPath));
       return;
     }
     let cancelled = false;
-    void createPreviewTicket(workspaceId, { redirect, branch, tree })
+    void createPreviewTicket(workspaceId, { redirect: previewPath, branch, tree })
       .then((res) => {
-        if (!cancelled) setPreviewUrl(previewSiteUrl(workspace.siteUrls ?? [], res.ticket));
+        if (!cancelled) setPreviewUrl(previewEnableUrl(siteUrl, res.ticket));
       })
       .catch(() => {
         if (!cancelled) setPreviewUrl(null);
@@ -287,7 +292,7 @@ export function DocEditorPage() {
     return () => {
       cancelled = true;
     };
-  }, [showPreview, workspaceId, workspace.siteUrls, siteUrl, models, type, slug, locale, branch, tree]);
+  }, [frameIdentity, previewPath, workspaceId, siteUrl, branch, tree]);
 
   useEffect(() => {
     setPreviewLoading(true);
@@ -539,13 +544,12 @@ export function DocEditorPage() {
       setDocStatus(detail.status);
       setSource(detail.status === "clean" ? "head" : "tree");
     }
-    // Branch HEAD moved (teammate push / pull / commit). A clean doc reloads to
-    // show the new HEAD; a doc I am editing keeps my text and just refreshes its
-    // status, which the server reports as `conflict` when HEAD touched this file.
+    // Branch HEAD moved (teammate push / pull / commit). A clean doc reloads its
+    // fields. The preview frame stays mounted: the page follows the same move
+    // on its SSE stream and refreshes in place.
     function onHeadChanged() {
       if (docStatusRef.current === "clean") {
         onChanged();
-        remountPreview();
         return;
       }
       void fetchDoc(workspaceId, locale, type, slug)

package/src/pages/preview-url.ts

@@ -32,6 +32,21 @@ export function editorPreviewPath(
   return `${path}?${params.toString()}`;
 }
 
+/**
+ * Identity of the preview iframe. Equal results must keep the frame mounted.
+ * A replacement models array or siteUrls array is not a new target; the page
+ * inside the frame follows saves and HEAD on its SSE stream.
+ */
+export function previewFrameIdentity(input: {
+  siteUrl: string | null;
+  path: string | null;
+  branch: string | null;
+  tree: string | null;
+}): string | null {
+  if (!input.siteUrl || !input.path || !input.branch?.trim() || !input.tree?.trim()) return null;
+  return `${input.siteUrl}\0${input.branch}\0${input.tree}\0${input.path}`;
+}
+
 /**
  * A Studio mounted on the site it previews already carries the site session
  * cookie, so the preview frame loads the page directly — no ticket.

package/src/preview-frame.tsx

@@ -12,6 +12,22 @@ import { PREVIEW_FRAME_RADIUS_DEFAULT, previewFrameRadiusFromUserAgent } from ".
 
 export const PREVIEW_FRAME_CLASS = "backmatter-preview-frame";
 
+type NavigatorWithUaData = Navigator & {
+  userAgentData?: {
+    getHighEntropyValues: (
+      hints: readonly string[],
+    ) => Promise<{ platformVersion?: string }>;
+  };
+};
+
+/** Chromium `platformVersion` when Client Hints are available (not in all TS `Navigator` libs). */
+function readNavigatorPlatformVersion(): Promise<string | undefined> {
+  if (typeof navigator === "undefined") return Promise.resolve(undefined);
+  const uad = (navigator as NavigatorWithUaData).userAgentData;
+  if (!uad?.getHighEntropyValues) return Promise.resolve(undefined);
+  return uad.getHighEntropyValues(["platformVersion"]).then((hints) => hints.platformVersion);
+}
+
 /** Bottom window corner radius when the host does not set `devBar.previewFrameRadius`. */
 export function guessPreviewFrameRadius(): number {
   if (typeof navigator === "undefined") return PREVIEW_FRAME_RADIUS_DEFAULT;
@@ -54,10 +70,9 @@ export function PreviewFrame({
     const ua = navigator.userAgent;
     setCorner(previewFrameRadiusFromUserAgent(ua));
 
-    const uad = navigator.userAgentData;
-    if (!uad?.getHighEntropyValues) return;
-    void uad.getHighEntropyValues(["platformVersion"]).then((hints) => {
-      setCorner(previewFrameRadiusFromUserAgent(ua, hints.platformVersion));
+    void readNavigatorPlatformVersion().then((platformVersion) => {
+      if (platformVersion === undefined) return;
+      setCorner(previewFrameRadiusFromUserAgent(ua, platformVersion));
     });
   }, [radius]);
 

package/src/site-bar.tsx

@@ -10,6 +10,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type HTMLAttributes,
   type MouseEvent,
   type ReactNode,
   type Ref,
@@ -74,6 +75,14 @@ function pageMenuCacheKey(workspaceId: string, query: string) {
 
 type MenuState = "page" | "branch" | "settings" | null;
 
+type DevbarHotkeyHandlers = {
+  toggleHidden: () => void;
+  onModeKey: (origin: HTMLElement) => void;
+  onEscape: () => void;
+  openDashboard: () => boolean;
+  openShortcuts: () => void;
+};
+
 export function SiteBar({
   label,
   branch,
@@ -161,7 +170,7 @@ export function SiteBar({
   const widthRef = useRef(0);
   const widthReady = useRef(false);
   const rose = useRef(false);
-  const handlers = useRef({
+  const handlers = useRef<DevbarHotkeyHandlers>({
     toggleHidden: () => {},
     onModeKey: (_origin: HTMLElement) => {},
     onEscape: () => {},
@@ -703,7 +712,17 @@ export function SiteBar({
   return (
     <div ref={attachHost} className={`${DEVBAR_CLASS}-host`} data-backmatter-devbar="">
       <style>{LIGHT_CSS}</style>
-      {shadow ? createPortal(body, shadow) : <template shadowrootmode="open">{body}</template>}
+      {shadow
+        ? createPortal(body, shadow)
+        : (
+            <template
+              {...({ shadowrootmode: "open" } as HTMLAttributes<HTMLTemplateElement> & {
+                shadowrootmode?: "open" | "closed";
+              })}
+            >
+              {body}
+            </template>
+          )}
     </div>
   );
 }