@backmatter/next 0.0.31 → 0.0.32

package/dist/config.cjs

@@ -73,6 +73,7 @@ __export(exports_config, {
   withBackmatter: () => withBackmatter
 });
 module.exports = __toCommonJS(exports_config);
+var import_node_module = require("node:module");
 var import_node_fs4 = require("node:fs");
 var import_node_path4 = __toESM(require("node:path"));
 
@@ -741,6 +742,18 @@ function matchBrace(source, open) {
 }
 
 // src/config.ts
+var require2 = import_node_module.createRequire("file:///home/runner/work/backmatter/backmatter/packages/next/src/config.ts");
+function studioWidgetAlias() {
+  try {
+    const studioRoot = import_node_path4.default.dirname(require2.resolve("@backmatter/studio/package.json"));
+    const dist = import_node_path4.default.join(studioRoot, "dist/site-widget.js");
+    if (!import_node_fs4.existsSync(dist))
+      return {};
+    return { "@backmatter/studio/widget": dist };
+  } catch {
+    return {};
+  }
+}
 var LOADER = "@backmatter/next/loader";
 var SDK = "@backmatter/next";
 function warnMissingInstrumentation(root) {
@@ -807,6 +820,7 @@ function withBackmatter(nextConfig = {}, options = {}) {
     ...existingTurbo,
     resolveAlias: {
       ...registryTurbopackAlias(loaderOptions.root, loaderOptions.outDir),
+      ...studioWidgetAlias(),
       ...existingAlias
     },
     rules: { ...existingRules, [glob]: turbopackRule }
@@ -820,6 +834,7 @@ function withBackmatter(nextConfig = {}, options = {}) {
     const prev = prevAlias && typeof prevAlias === "object" && !Array.isArray(prevAlias) ? prevAlias : {};
     config.resolve.alias = {
       ...registryWebpackAlias(loaderOptions.root, loaderOptions.outDir),
+      ...studioWidgetAlias(),
       ...prev
     };
     return cfg.webpack ? cfg.webpack(config, context) : config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backmatter/next",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "description": "Experimental Next.js adapter for Backmatter. APIs will break. Not ready for production.",
   "type": "module",
   "publishConfig": {
@@ -47,10 +47,10 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@backmatter/core": "^0.0.25",
+    "@backmatter/core": "^0.0.26",
     "@mdx-js/mdx": "^3.1.1",
     "remark-gfm": "^4.0.1",
-    "@backmatter/studio": "^0.0.8"
+    "@backmatter/studio": "^0.0.9"
   },
   "peerDependencies": {
     "next": ">=16.3.0",

package/src/config.ts

@@ -7,8 +7,23 @@
 //    (Next 16 default) and webpack (`next build --webpack`). The loader declares
 //    `models/`, `blocks/`, `richtext/`, and `mdx/` as context dependencies, so the bundler's
 //    own file watcher keeps the registry fresh — no polling, no second watcher process.
+import { createRequire } from "node:module";
 import { existsSync } from "node:fs";
 import path from "node:path";
+
+const require = createRequire(import.meta.url);
+
+/** Prebuilt widget (StyleX CSS must match JS). Avoids Next transpiling `src/site-widget.tsx`. */
+function studioWidgetAlias(): Record<string, string> {
+  try {
+    const studioRoot = path.dirname(require.resolve("@backmatter/studio/package.json"));
+    const dist = path.join(studioRoot, "dist/site-widget.js");
+    if (!existsSync(dist)) return {};
+    return { "@backmatter/studio/widget": dist };
+  } catch {
+    return {};
+  }
+}
 import { DEFAULT_DIRS } from "@backmatter/core/generate";
 import {
   DEFAULT_OUT_DIR,
@@ -159,6 +174,7 @@ export function withBackmatter<T extends object>(
     ...existingTurbo,
     resolveAlias: {
       ...registryTurbopackAlias(loaderOptions.root, loaderOptions.outDir),
+      ...studioWidgetAlias(),
       ...existingAlias,
     },
     rules: { ...existingRules, [glob]: turbopackRule },
@@ -175,6 +191,7 @@ export function withBackmatter<T extends object>(
       prevAlias && typeof prevAlias === "object" && !Array.isArray(prevAlias) ? prevAlias : {};
     config.resolve.alias = {
       ...registryWebpackAlias(loaderOptions.root, loaderOptions.outDir),
+      ...studioWidgetAlias(),
       ...prev,
     };
     return cfg.webpack ? cfg.webpack(config, context) : config;

package/src/devbar-client.tsx

@@ -1,7 +1,8 @@
 // packages/next/src/devbar-client.tsx
 "use client";
 
-import { Suspense, lazy, useEffect, useState, type CSSProperties, type ReactNode } from "react";
+import { Suspense, lazy, startTransition, useCallback, useEffect, useLayoutEffect, useState, type CSSProperties, type Dispatch, type ReactNode, type SetStateAction } from "react";
+import { useRouter } from "next/navigation";
 import {
   clearHostPreviewSession,
   fetchCmsSession,
@@ -60,6 +61,26 @@ export function sessionGateAction(input: {
   return "quiet";
 }
 
+/** Mode switch keeps a ready bar mounted. A closed gate stays hidden. */
+export function withHostMode(state: DevModeState, mode: "preview" | "live"): DevModeState {
+  if (state.status !== "ready") return state;
+  return { ...state, mode };
+}
+
+/**
+ * Last verified session in this document. A refresh can remount the client
+ * bar; restoring this before paint keeps it on screen. Server renders stay
+ * hidden so one request cannot leak into the next.
+ */
+let shownSession: DevModeState = { status: "hidden" };
+let shownRev = 0;
+
+function rememberShown(next: DevModeState) {
+  if (typeof window === "undefined") return;
+  shownSession = next;
+  shownRev += 1;
+}
+
 export function devModeState(
   user: CmsSessionUser | null,
   session: {
@@ -340,14 +361,23 @@ function useGate(): Gate {
  * Only an explicit enter with no session leaves the page, and it leaves
  * top-level. A stale marker stays on the public page.
  */
-function useSiteSession(gate: Gate, previewEntryPath: string): DevModeState {
+function useSiteSession(
+  gate: Gate,
+  previewEntryPath: string,
+): [DevModeState, Dispatch<SetStateAction<DevModeState>>] {
   const [state, setState] = useState<DevModeState>({ status: "hidden" });
 
+  useLayoutEffect(() => {
+    if (shownSession.status !== "ready") return;
+    setState(shownSession);
+  }, []);
+
   useEffect(() => {
     if (gate === "closed") return;
+    const rev = shownRev;
     let cancelled = false;
     void loadDevModeState("").then((next) => {
-      if (cancelled) return;
+      if (cancelled || rev !== shownRev) return;
       const showBar = next.status === "ready";
       const reason = next.status === "hidden" ? (next.reason ?? "anonymous") : "anonymous";
       const action = sessionGateAction({
@@ -358,6 +388,7 @@ function useSiteSession(gate: Gate, previewEntryPath: string): DevModeState {
       });
       if (action === "show") {
         sessionStorage.removeItem(ENTER_ATTEMPT_KEY);
+        rememberShown(next);
         setState(next);
         return;
       }
@@ -379,36 +410,57 @@ function useSiteSession(gate: Gate, previewEntryPath: string): DevModeState {
     };
   }, [gate, previewEntryPath]);
 
-  return state;
+  return [state, setState];
 }
 
 export function DevBarClient({
   studioPath,
   previewEntryPath = DEFAULT_PREVIEW_ENTRY_PATH,
   previewFrame,
+  previewFrameRadius,
+  dashboardUrl,
 }: {
   /** Unused since the bar stopped calling the CMS origin; kept for host layouts that still pass it. */
   apiUrl?: string;
   studioPath?: string;
   previewEntryPath?: string;
   previewFrame?: boolean;
+  previewFrameRadius?: number;
+  dashboardUrl?: string;
 }) {
   const gate = useGate();
-  const state = useSiteSession(gate, previewEntryPath);
+  const [state, setState] = useSiteSession(gate, previewEntryPath);
+  const router = useRouter();
+  const refreshHost = useCallback(() => {
+    startTransition(() => {
+      router.refresh();
+    });
+  }, [router]);
   const [exiting, setExiting] = useState(false);
   const [entering, setEntering] = useState(false);
+
   const goLive = () => {
-    if (exiting) return;
+    if (exiting || entering) return;
     setExiting(true);
-    void goHostSiteLive().then((ok) => {
-      if (!ok) setExiting(false);
+    void goHostSiteLive(setHostSiteLive, () => {
+      const next = withHostMode(state, "live");
+      rememberShown(next);
+      setState(next);
+      refreshHost();
+    }).then(() => {
+      setExiting(false);
     });
   };
   const goPreview = () => {
-    if (entering) return;
+    if (exiting || entering) return;
     setEntering(true);
-    void enterHostPreview().then((ok) => {
-      if (!ok) setEntering(false);
+    void enterHostPreview(setHostSitePreview, () => {
+      const next = withHostMode(state, "preview");
+      rememberShown(next);
+      setState(next);
+      refreshHost();
+    }).then(() => {
+      setEntering(false);
     });
   };
   if (state.status !== "ready") return null;
@@ -424,6 +476,8 @@ export function DevBarClient({
         studioPath={studioPath}
         previewEntryPath={previewEntryPath}
         previewFrame={state.mode === "preview" ? previewFrame : false}
+        previewFrameRadius={previewFrameRadius}
+        dashboardUrl={dashboardUrl}
       />
     </Suspense>
   );

package/src/devbar.tsx

@@ -1,5 +1,5 @@
 // packages/next/src/devbar.tsx
-import { resolveDevBarApiUrl } from "@backmatter/core";
+import { resolveDashboardUrl, resolveDevBarApiUrl } from "@backmatter/core";
 import { DevBarClient } from "./devbar-client";
 
 export {
@@ -10,6 +10,7 @@ export {
   loadDevModeState,
   sessionGateAction,
   useDevMode,
+  withHostMode,
   type CmsSessionUser,
   type DevModeState,
   type SessionGateAction,
@@ -31,11 +32,13 @@ export function DevBar({
   studioPath,
   previewEntryPath,
   previewFrame,
+  previewFrameRadius,
 }: {
   apiUrl?: string;
   studioPath?: string;
   previewEntryPath?: string;
   previewFrame?: boolean;
+  previewFrameRadius?: number;
 } = {}) {
   return (
     <DevBarClient
@@ -43,6 +46,8 @@ export function DevBar({
       studioPath={studioPath}
       previewEntryPath={previewEntryPath}
       previewFrame={previewFrame}
+      previewFrameRadius={previewFrameRadius}
+      dashboardUrl={resolveDashboardUrl()}
     />
   );
 }

package/src/site-editor.tsx

@@ -5,7 +5,7 @@
 
 import { usePathname, useRouter } from "next/navigation";
 import { startTransition, useCallback, useEffect, useRef, useState } from "react";
-import "@backmatter/studio/studio.css";
+import "@backmatter/studio/site-widget.css";
 import studioPkg from "@backmatter/studio/package.json";
 import { SiteWidget } from "@backmatter/studio/widget";
 import { markerCookie } from "./gate";
@@ -68,6 +68,8 @@ export function SiteChrome({
   onEnterPreview,
   previewEntryPath = DEFAULT_PREVIEW_ENTRY_PATH,
   previewFrame,
+  previewFrameRadius,
+  dashboardUrl,
 }: {
   branch?: string;
   tree?: string;
@@ -80,6 +82,8 @@ export function SiteChrome({
   /** Ticket route. `POST ?renew=1` slides the site session. A 401 drops the bar. */
   previewEntryPath?: string;
   previewFrame?: boolean;
+  previewFrameRadius?: number;
+  dashboardUrl?: string;
 }) {
   const router = useRouter();
   const doc = useSiteDoc();
@@ -139,7 +143,10 @@ export function SiteChrome({
       onSessionExpired={leave}
       previewEntryPath={previewEntryPath}
       previewFrame={previewFrame}
+      previewFrameRadius={previewFrameRadius}
       version={studioPkg.version}
+      dashboardHref={dashboardUrl}
+      onSignOut={leave}
     />
   );
 }