@drawnagency/primitives 0.1.90 → 0.1.92

package/src/components/chat/ChatPanel.tsx

@@ -12,9 +12,9 @@ import { RemoveIcon } from "../shared/icons";
 export interface ChatMessage { role: "user" | "assistant"; content: string }
 
 /** How the conversation is framed on screen:
- *  - "floating": the compact anchored panel (/edit FAB + settings test chat)
- *  - "docked":   full-height right sidebar (viewer, >=768px)
- *  - "sheet":    bottom sheet (viewer, phones) */
+ *  - "floating": the compact anchored panel (settings test chat only)
+ *  - "docked":   full-height right sidebar (viewer + /edit, >=768px)
+ *  - "sheet":    bottom sheet (viewer + /edit, phones) */
 export type ChatPanelMode = "floating" | "docked" | "sheet";
 
 const SESSION_KEY = "bp-chat-session";
@@ -35,9 +35,10 @@ function sessionId(): string {
   return id;
 }
 
-/** Conversation persistence (viewer modes only): internal links open in the
- *  same tab, so the transcript must survive page navigation. sessionStorage —
- *  per-tab, cleared when the visit ends. */
+/** Conversation persistence (docked/sheet modes): viewer internal links open
+ *  in the same tab, so the transcript must survive page navigation — and it
+ *  carries across same-tab hops between /edit and the live site. sessionStorage
+ *  — per-tab, cleared when the visit ends. */
 function loadStoredMessages(): ChatMessage[] {
   try {
     const parsed: unknown = JSON.parse(window.sessionStorage.getItem(MESSAGES_KEY) ?? "[]");
@@ -132,8 +133,15 @@ export async function streamChat(
   }
 }
 
-export default function ChatPanel({ open, onClose, siteName, botName, thinkingPhrases, tasks, isEditor, draftChatbot, simulateAudience, variant = "viewer", mode = "floating", focusComposer, audience }: {
+export default function ChatPanel({ open, closing, animateEnter, onClose, siteName, botName, thinkingPhrases, tasks, isEditor, draftChatbot, simulateAudience, variant = "viewer", mode = "floating", focusComposer, audience }: {
   open: boolean;
+  /** Viewer modes: keeps the panel mounted through its exit slide (ChatWidget
+   *  flips this off once the transition has run). */
+  closing?: boolean;
+  /** Animate the entrance (explicit user open). False for the docked restore
+   *  on page load, where the column is already reserved pre-paint and a slide
+   *  would replay on every navigation. */
+  animateEnter?: boolean;
   onClose: () => void;
   siteName: string;
   /** Resolved assistant display name (per-audience, server-side). */
@@ -146,8 +154,9 @@ export default function ChatPanel({ open, onClose, siteName, botName, thinkingPh
   draftChatbot?: unknown;
   /** Configurator test panel only: preview this audience's prompt overlay. */
   simulateAudience?: string;
-  /** Floating mode only — anchors the panel above its launcher: viewer corner
-   *  FAB vs /edit FAB column. */
+  /** Surface the chat serves: "editor" (/edit docked chat) keeps internal
+   *  cross-page links in a new tab (unsaved editor state) and sizes the
+   *  docked panel against the editor toolbar instead of the viewer nav. */
   variant?: "viewer" | "editor";
   mode?: ChatPanelMode;
   /** Focus the composer when opened (explicit user open on desktop). Never
@@ -331,14 +340,15 @@ export default function ChatPanel({ open, onClose, siteName, botName, thinkingPh
       return;
     }
     if (url.origin === window.location.origin) {
-      if (persistent) {
+      if (persistent && variant !== "editor") {
         // Internal cross-page citation, viewer chat: navigate in place — the
         // sessionStorage transcript (and docked-open state) survive the load.
         window.location.assign(url.href);
         return;
       }
-      // Editor surfaces (floating mode): same-tab navigation would destroy
-      // unsaved editor state — keep internal links in a new tab there.
+      // Editor surfaces (/edit docked chat, settings test panel): same-tab
+      // navigation would destroy unsaved editor state — keep internal links
+      // in a new tab there.
       window.open(url.href, "_blank", "noopener");
       return;
     }
@@ -442,14 +452,21 @@ export default function ChatPanel({ open, onClose, siteName, botName, thinkingPh
     setHistory(loadHistory(historyAudience));
   }
 
-  if (!open) return null;
+  if (!open && !closing) return null;
 
   const lastIndex = messages.length - 1;
 
   return (
     <>
       {mode === "sheet" && (
-        <div className="fixed inset-0 z-50 bg-black/50" onClick={onClose} aria-hidden="true" />
+        <div
+          className={cn(
+            "fixed inset-0 z-50 bg-black/50 motion-safe:transition-opacity motion-safe:duration-300",
+            open ? "opacity-100 starting:opacity-0" : "pointer-events-none opacity-0",
+          )}
+          onClick={onClose}
+          aria-hidden="true"
+        />
       )}
       <div
         ref={panelRef}
@@ -460,12 +477,27 @@ export default function ChatPanel({ open, onClose, siteName, botName, thinkingPh
         onKeyDown={(e) => { if (e.key === "Escape") onClose(); }}
         className={cn(
           "flex flex-col bg-base focus:outline-none",
-          mode === "floating" && cn(
-            "fixed z-40 h-[28rem] w-80 rounded-outer border border-base-200 shadow-xl",
-            variant === "editor" ? "bottom-4 fab-panel-left max-w-[calc(100vw-5.25rem)]" : "bottom-20 right-4",
+          mode === "floating" && "fixed z-40 h-[28rem] w-80 rounded-outer border border-base-200 shadow-xl bottom-20 right-4",
+          // Enter/exit slides pair with base.css's 300ms band shift (same
+          // duration + default curve); under reduced motion there's no
+          // transition and @starting-style has no effect — instant show/hide.
+          // Top offset clears the fixed top bar spanning the panel's column:
+          // the viewer nav header exists below xl (chat-enabled pages dock
+          // the nav at xl); /edit keeps its full-width h-16 toolbar at every
+          // width, so the panel always tucks below it — the toolbar never
+          // moves during the open/close slide.
+          mode === "docked" && cn(
+            "fixed right-0 bottom-0 z-40 w-[var(--chat-w)] border-l border-base-200",
+            variant === "editor" ? "top-16" : "top-16 xl:top-0",
+            "motion-safe:transition-transform motion-safe:duration-300",
+            open ? "translate-x-0" : "translate-x-full",
+            open && animateEnter && "starting:translate-x-full",
+          ),
+          mode === "sheet" && cn(
+            "fixed inset-x-0 bottom-0 z-50 h-[85dvh] rounded-t-outer border-t border-base-200 shadow-xl",
+            "motion-safe:transition-transform motion-safe:duration-300",
+            open ? "translate-y-0 starting:translate-y-full" : "translate-y-full",
           ),
-          mode === "docked" && "fixed right-0 bottom-0 top-16 xl:top-0 z-40 w-[var(--chat-w)] border-l border-base-200",
-          mode === "sheet" && "fixed inset-x-0 bottom-0 z-50 h-[85dvh] rounded-t-outer border-t border-base-200 shadow-xl",
         )}
         style={mode === "sheet" ? { bottom: "var(--kb-offset, 0px)", maxHeight: "calc(var(--vvh, 100dvh) - 2.5rem)" } : undefined}
       >

package/src/components/chat/ChatWidget.tsx

@@ -1,17 +1,22 @@
 // Chat launcher + shell chooser. Browser-safe: no node imports, no process.env.
 //
-// Placements:
-// - "viewer" (default): >=768px the conversation docks as a full-height right
-//   sidebar (html.bp-chat-docked shifts the page band left — see base.css);
-//   below 768px it opens as a bottom sheet. The FAB shows only while closed.
-//   Docked-open is the default and the preference persists per tab
-//   (sessionStorage, mirrored by Layout.astro's pre-paint script so the
-//   column is reserved before hydration).
-// - "editor": unchanged floating panel at the BOTTOM of the /edit route's FAB
-//   column (edit-mode toggle at bottom-16, bug report at bottom-28 above it),
-//   aligned to the content edge via fab-container-right like its neighbors.
+// Both variants share the same conversation experience: >=768px it docks as a
+// full-height right sidebar (html.bp-chat-docked shifts the page band left —
+// see base.css); below 768px it opens as a bottom sheet. Open/close is
+// animated (sidebar slides in as the band shifts, sheet slides up, and ALL
+// page FABs shrink/fade away); prefers-reduced-motion keeps everything
+// instant. FABs show only while closed. Docked-open is the default and the
+// preference persists per tab (sessionStorage, mirrored by Layout.astro's
+// pre-paint script so the column is reserved before hydration) — shared
+// across viewer pages and /edit.
+//
+// The variants differ only in the launcher's placement:
+// - "viewer" (default): viewport corner (viewer-fab tracks the sidebar edge).
+// - "editor": BOTTOM of the /edit route's FAB column (edit-mode toggle at
+//   bottom-16, bug report at bottom-28 above it), aligned to the content edge
+//   via fab-container-right like its neighbors.
 import { lazy, Suspense, useEffect, useRef, useState } from "react";
-import { cn } from "../../lib/cn";
+import Fab from "../shared/Fab";
 
 const ChatPanel = lazy(() => import("./ChatPanel"));
 
@@ -34,19 +39,79 @@ export interface ChatWidgetProps {
   audience?: string | null;
 }
 
+/** Matches the 300ms slide transitions in base.css / ChatPanel. */
+const CLOSE_MS = 300;
+/** How long html.bp-chat-animating stays on: the 300ms glide plus a timer-
+ *  jitter buffer. The class gates the band/nav FLIP transforms in base.css —
+ *  it must outlive the transition (or the glide would cut off early) but
+ *  MUST come off afterwards, because a resting transform re-anchors
+ *  position:fixed descendants. */
+const ANIM_MS = 350;
+
 export default function ChatWidget({ siteName, botName, thinkingPhrases, tasks, isEditor, draftChatbot, variant = "viewer", audience }: ChatWidgetProps) {
   const [open, setOpen] = useState(false);
   const [everOpened, setEverOpened] = useState(false);
   const [docked, setDocked] = useState(false);
   const [userOpened, setUserOpened] = useState(false);
+  // Close is animated: the panel stays mounted while it slides out.
+  const [closing, setClosing] = useState(false);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const animTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const fabRef = useRef<HTMLButtonElement>(null);
-  const isViewer = variant === "viewer";
+
+  useEffect(() => () => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    if (animTimer.current) clearTimeout(animTimer.current);
+    document.documentElement.classList.remove("bp-chat-animating");
+  }, []);
+
+  function clearCloseTimer() {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    closeTimer.current = null;
+  }
+
+  function motionOk(): boolean {
+    return typeof window.matchMedia === "function" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
+
+  /** Open the FLIP window for a docked toggle: while bp-chat-animating is on
+   *  <html>, base.css glides the band/nav via transform between the snapped
+   *  layouts (see the @property note there). User-driven toggles only — the
+   *  page-load restore must not replay the glide. */
+  function beginShiftWindow() {
+    if (!docked || !motionOk()) return;
+    document.documentElement.classList.add("bp-chat-animating");
+    if (animTimer.current) clearTimeout(animTimer.current);
+    animTimer.current = setTimeout(() => {
+      document.documentElement.classList.remove("bp-chat-animating");
+      animTimer.current = null;
+    }, ANIM_MS);
+  }
+
+  function openPanel() {
+    clearCloseTimer();
+    beginShiftWindow();
+    setClosing(false);
+    setOpen(true);
+    setEverOpened(true);
+  }
+
+  function closePanel() {
+    clearCloseTimer();
+    beginShiftWindow();
+    setOpen(false);
+    // Reduced motion unmounts immediately — the pre-animation behavior.
+    if (motionOk()) {
+      setClosing(true);
+      closeTimer.current = setTimeout(() => { setClosing(false); closeTimer.current = null; }, CLOSE_MS);
+    }
+  }
 
   // Post-hydration restore. The server renders only the FAB; Layout.astro's
   // pre-paint script has already reserved the docked column and CSS hides the
   // FAB under html.bp-chat-docked, so this state sync causes no layout jump.
   useEffect(() => {
-    if (!isViewer || typeof window.matchMedia !== "function") return;
+    if (typeof window.matchMedia !== "function") return;
     const mq = window.matchMedia(DOCK_QUERY);
     const apply = () => setDocked(mq.matches);
     apply();
@@ -55,59 +120,56 @@ export default function ChatWidget({ siteName, botName, thinkingPhrases, tasks,
     try { storedOpen = window.sessionStorage.getItem(OPEN_KEY) !== "0"; } catch {}
     if (mq.matches && storedOpen) { setOpen(true); setEverOpened(true); }
     return () => mq.removeEventListener("change", apply);
-  }, [isViewer]);
+  }, []);
 
-  // Reflect docked-open on <html> (drives the band shift + FAB hiding) and
-  // persist the preference. Only the docked state persists — the phone sheet
-  // always starts closed.
+  // Reflect open state on <html>: bp-chat-docked drives the band shift (and
+  // the /edit toolbar/FAB-column shift), bp-chat-open (any mode) drives the
+  // document FAB's hide/handoff — both animated in base.css. Persist the
+  // preference; only the docked state persists — the phone sheet always
+  // starts closed.
   useEffect(() => {
-    if (!isViewer) return;
     document.documentElement.classList.toggle("bp-chat-docked", open && docked);
+    document.documentElement.classList.toggle("bp-chat-open", open);
     if (docked) {
       try { window.sessionStorage.setItem(OPEN_KEY, open ? "1" : "0"); } catch {}
     }
-    return () => document.documentElement.classList.remove("bp-chat-docked");
-  }, [open, docked, isViewer]);
+    return () => {
+      document.documentElement.classList.remove("bp-chat-docked");
+      document.documentElement.classList.remove("bp-chat-open");
+    };
+  }, [open, docked]);
 
   // Closing the sheet/sidebar returns focus to the launcher.
   useEffect(() => {
-    if (isViewer && !open && everOpened) fabRef.current?.focus();
-  }, [open, everOpened, isViewer]);
-
-  const showFab = !isViewer || !open;
+    if (!open && everOpened) fabRef.current?.focus();
+  }, [open, everOpened]);
 
+  // The launcher stays mounted while the chat is open so it can shrink and
+  // fade out (and reverse back in): base.css hides ALL FABs (.viewer-fab and
+  // the /edit .fab-container-right column, this button included) under
+  // html.bp-chat-open/.bp-chat-docked, with visibility dropped after the fade
+  // so no invisible button can take focus or clicks.
   return (
     <>
-      {showFab && (
-        <button
-          ref={fabRef}
-          type="button"
-          aria-label={open ? "Collapse chat" : `Chat with ${botName}`}
-          aria-expanded={open}
-          onClick={() => { setOpen((o) => !o); setEverOpened(true); setUserOpened(true); }}
-          className={cn(
-            "fixed z-40 flex items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity",
-            variant === "editor"
-              ? "bottom-4 right-4 lg:right-auto h-10 w-10 fab-container-right"
-              : "bottom-4 h-12 w-12 viewer-fab bp-chat-fab",
-          )}
-        >
-          {open ? (
-            <svg xmlns="http://www.w3.org/2000/svg" className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="m6 9 6 6 6-6" />
-            </svg>
-          ) : (
-            <svg xmlns="http://www.w3.org/2000/svg" className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
-            </svg>
-          )}
-        </button>
-      )}
+      <Fab
+        ref={fabRef}
+        label={`Chat with ${botName}`}
+        column={variant === "editor" ? "editor" : "viewer"}
+        className="bottom-4"
+        aria-expanded={open}
+        onClick={() => { setUserOpened(true); if (open) closePanel(); else openPanel(); }}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
+        </svg>
+      </Fab>
       {everOpened && (
         <Suspense fallback={null}>
           <ChatPanel
             open={open}
-            onClose={() => setOpen(false)}
+            closing={closing}
+            animateEnter={userOpened}
+            onClose={closePanel}
             siteName={siteName}
             botName={botName}
             thinkingPhrases={thinkingPhrases}
@@ -115,7 +177,7 @@ export default function ChatWidget({ siteName, botName, thinkingPhrases, tasks,
             isEditor={isEditor}
             draftChatbot={draftChatbot}
             variant={variant}
-            mode={isViewer ? (docked ? "docked" : "sheet") : "floating"}
+            mode={docked ? "docked" : "sheet"}
             focusComposer={userOpened}
             audience={audience}
           />

package/src/components/shared/Fab.tsx

@@ -0,0 +1,57 @@
+import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
+import { cn } from "../../lib/cn";
+
+/** Floating action button — the round primary buttons floating over the page.
+ *
+ *  The `column` is both the placement and the behavior hook: base.css hides
+ *  every member of both columns (shrink + fade) while the chat is open, keyed
+ *  on the column class, so a new FAB participates in the chat open/close
+ *  choreography just by rendering through this component. Positions are
+ *  static on purpose — FABs are only visible while the chat is closed
+ *  (--chat-space: 0), so they never need to track the docked sidebar.
+ *
+ *  - "viewer": viewport corner stack (z-40, h-12). Rendered on SSR viewer
+ *    pages too — keep this component hook-free so it stays server-renderable
+ *    without hydration.
+ *  - "editor": the /edit FAB column (z-50, h-10), content-edge aligned at lg+
+ *    via fab-container-right.
+ *
+ *  Renders an <a> when `href` is set, else a <button type="button">. The
+ *  caller supplies the vertical slot (bottom-*) via className and the icon as
+ *  children.
+ */
+interface FabCommon {
+  /** Accessible name — FABs are icon-only. */
+  label: string;
+  column: "viewer" | "editor";
+  /** Vertical slot (bottom-*) plus any per-FAB extras. */
+  className?: string;
+  children: ReactNode;
+}
+
+export type FabProps =
+  | ({ href: string } & FabCommon & Omit<ComponentPropsWithoutRef<"a">, "children" | "className" | "aria-label">)
+  | ({ href?: undefined; ref?: Ref<HTMLButtonElement> } & FabCommon &
+      Omit<ComponentPropsWithoutRef<"button">, "children" | "className" | "aria-label" | "type">);
+
+export default function Fab({ label, column, className, children, ...rest }: FabProps) {
+  const classes = cn(
+    "cursor-pointer fixed flex items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity",
+    column === "viewer"
+      ? "z-40 h-12 w-12 right-4 viewer-fab"
+      : "z-50 h-10 w-10 right-4 lg:right-auto fab-container-right",
+    className,
+  );
+  if (rest.href !== undefined) {
+    return (
+      <a aria-label={label} className={classes} {...(rest as ComponentPropsWithoutRef<"a">)}>
+        {children}
+      </a>
+    );
+  }
+  return (
+    <button type="button" aria-label={label} className={classes} {...(rest as ComponentPropsWithoutRef<"button"> & { ref?: Ref<HTMLButtonElement> })}>
+      {children}
+    </button>
+  );
+}

package/src/components/shell/BugReportFAB.tsx

@@ -2,6 +2,7 @@ import { useState, useCallback, useRef, useEffect } from "react";
 import { EditorModal } from "./EditorModal";
 import { useEditorContext } from "./EditorContext";
 import { cn } from "../../lib/cn";
+import Fab from "../shared/Fab";
 
 type Category = "Visual" | "Unexpected Behavior" | "Media / Media Library" | "Save / Publish" | "Feature Request" | "Other";
 
@@ -186,17 +187,12 @@ export function BugReportFAB() {
     <>
       {/* FAB button */}
       {visible && (
-        <button
-          type="button"
-          onClick={handleOpen}
-          aria-label="Report a bug"
-          className="cursor-pointer fixed bottom-28 right-4 lg:right-auto z-50 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity fab-container-right"
-        >
+        <Fab label="Report a bug" column="editor" className="bottom-28" onClick={handleOpen}>
           {/* Bug / beetle SVG icon */}
           <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
             <path d="M19 8h-1.26A6.003 6.003 0 0012 4a6.003 6.003 0 00-5.74 4H5a1 1 0 000 2h1.05A6.04 6.04 0 006 12H5a1 1 0 000 2h1c0 .34.03.67.08 1H5a1 1 0 000 2h1.26a6 6 0 0011.48 0H19a1 1 0 000-2h-1.08c.05-.33.08-.66.08-1h1a1 1 0 000-2h-1a6.04 6.04 0 00-.05-2H19a1 1 0 000-2zM12 6c1.7 0 3.16.88 4 2.19V8a1 1 0 10-2 0v.04A3.97 3.97 0 0012 8a3.97 3.97 0 00-2 .04V8a1 1 0 10-2 0v.19A4.69 4.69 0 018 6a4 4 0 014 0zm0 14a4 4 0 01-4-4v-4a4 4 0 018 0v4a4 4 0 01-4 4z"/>
           </svg>
-        </button>
+        </Fab>
       )}
 
       {/* Modal */}

package/src/components/shell/EditorShell.tsx

@@ -10,7 +10,7 @@ import type { SiteIndex, SiteConfig, Page } from "../../schemas/site-config";
 import type { Audience } from "../../auth/types";
 import type { MediaManifest } from "../../media/types";
 import type { QueueItem } from "../../media/queue";
-import { composePreviewImage } from "../../media/compose-preview";
+import { composePreviewImage, PREVIEW_COMPOSE_VERSION } from "../../media/compose-preview";
 import { derivePreviewInputs, servedPreviewSize } from "../../media/preview-inputs";
 import { resolveMedia } from "../../media/resolve";
 import { getMediaProvider } from "../../media";
@@ -101,6 +101,7 @@ import { UploadRejectionAlert, formatRejections } from "../shared/UploadRejectio
 import { Button } from "../shared/Button";
 import { SplitButton } from "../shared/SplitButton";
 import { IconButton } from "../shared/IconButton";
+import Fab from "../shared/Fab";
 import { Tooltip } from "../shared/Tooltip";
 import { SegmentedControl } from "../shared/SegmentedControl";
 import { computeDisplaySections } from "./view-branch";
@@ -263,6 +264,9 @@ export default function EditorShell({
   // dedupes concurrent runs against the same composition signature.
   const previewInitializedRef = useRef(false);
   const lastPreviewSigRef = useRef<string | null>(null);
+  // Increments per compose; the async upload callback applies its result only if
+  // still current, so a slower earlier upload can't overwrite a newer preview.
+  const previewGenRef = useRef(0);
 
   // --- Collaboration refs ---
   // Freshest dirty-section set for the inbound remote-section handler (never
@@ -1375,12 +1379,14 @@ export default function EditorShell({
     };
     const { inputs, signature } = derivePreviewInputs(siteConfig, resolveLogoUrl);
 
-    // On first run: if a preview already exists, seed the signature and skip
-    // (don't recompose/re-upload on every editor open). If none exists yet,
-    // fall through to compose one. Subsequent runs recompose only on change.
+    // On first run: if a preview already exists AND was composed by the current
+    // logic version, seed the signature and skip (don't recompose on every open).
+    // A missing preview, or one stamped with an older version (or 0 for
+    // pre-versioning rasters), falls through to recompose so stale rasters
+    // self-heal. Subsequent runs recompose only on change.
     if (!previewInitializedRef.current) {
       previewInitializedRef.current = true;
-      if (siteConfig.previewImage) {
+      if (siteConfig.previewImage && siteConfig.previewImage.version === PREVIEW_COMPOSE_VERSION) {
         lastPreviewSigRef.current = signature;
         return;
       }
@@ -1389,13 +1395,19 @@ export default function EditorShell({
 
     const timer = setTimeout(() => {
       lastPreviewSigRef.current = signature; // guard against duplicate concurrent runs
+      const gen = ++previewGenRef.current;
       (async () => {
         try {
           const blob = await composePreviewImage(inputs);
           const file = new File([blob], "site-preview.webp", { type: "image/webp" });
           const { width, height } = servedPreviewSize(siteConfigRef.current!.media.sizes);
           mediaPipeline.contextValue.uploadFileWithCallback(file, (imageId) => {
-            handleSiteConfigChange({ ...siteConfigRef.current!, previewImage: { imageId, width, height } });
+            // Ignore a stale upload: a newer compose has superseded this one.
+            if (gen !== previewGenRef.current) return;
+            handleSiteConfigChange({
+              ...siteConfigRef.current!,
+              previewImage: { imageId, width, height, version: PREVIEW_COMPOSE_VERSION },
+            });
           }, { hidden: true });
         } catch (err) {
           console.error("[EditorShell] preview-image composition failed:", err);
@@ -1548,18 +1560,13 @@ export default function EditorShell({
               scope renders the provider and can't read the context directly),
               hide the FAB so it can't open the draft editor over a history view. */}
           {resolvedActivePage?.document?.enabled && !historyActive && (
-            <button
-              type="button"
-              onClick={() => setShowDocumentEditor(true)}
-              aria-label="Edit as document"
-              className="cursor-pointer fixed bottom-40 right-4 lg:right-auto z-50 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity fab-container-right"
-            >
+            <Fab label="Edit as document" column="editor" className="bottom-40" onClick={() => setShowDocumentEditor(true)}>
               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                 <rect x="3" y="5" width="18" height="14" rx="1" />
                 <path d="M7 10h10" />
                 <path d="M7 14h7" />
               </svg>
-            </button>
+            </Fab>
           )}
           {showDocumentEditor && resolvedActivePage?.document?.enabled && (
             <Suspense fallback={<DocumentOverlayFallback />}>
@@ -1626,6 +1633,12 @@ export default function EditorShell({
             </div>
           )}
 
+          {/* bp-band-shift: rides the chat dock's FLIP glide (base.css). On
+              /edit it lives HERE, on the content column only — Layout's
+              <main> can't carry it because the toolbar/FABs/chat panel above
+              are position:fixed inside main, and a transformed ancestor
+              would re-anchor them. */}
+          <div className="bp-band-shift">
           <HistoryOrEditorContent
             index={siteIndex}
             activeSections={activeSections}
@@ -1654,6 +1667,7 @@ export default function EditorShell({
               onTakeover={confirmTakeover}
             />
           </HistoryOrEditorContent>
+          </div>
           <GlobalModal />
           <SiteSettingsModal
             isOpen={showSiteSettings}
@@ -2412,8 +2426,12 @@ function EditorToolbar({
   return (
     <>
       {isEditMode && (
+        // Full-width and static on purpose: the docked chat sidebar slides in
+        // BELOW this bar (ChatPanel docks at top-16 on /edit), so the toolbar
+        // never moves during the chat open/close transition. h-16 matches the
+        // panel's top offset (and the body's pt-16) exactly.
         <div className="fixed top-0 right-0 left-0 z-50 border-b border-base-200 bg-base">
-          <div className="mx-auto max-w-screen-xl grid grid-cols-3 items-center px-4 py-2">
+          <div className="mx-auto max-w-screen-xl grid h-16 grid-cols-3 items-center px-4">
             <div className="flex items-center gap-2">
               {buttonState === "saveAndPublish" && (
                 <SplitButton
@@ -2490,7 +2508,7 @@ function EditorToolbar({
       )}
       {!isEditMode && (
         <div className="fixed top-0 right-0 left-0 z-50 border-b border-base-200 bg-base">
-          <div className="mx-auto max-w-screen-xl flex items-center justify-center px-4 py-2">
+          <div className="mx-auto max-w-screen-xl flex h-16 items-center justify-center px-4">
             <SegmentedControl
               options={[
                 { value: "live", label: "Published" },
@@ -2503,10 +2521,11 @@ function EditorToolbar({
         </div>
       )}
       {!historyState && (
-        <button
+        <Fab
+          label={isEditMode ? "Switch to view mode" : "Switch to edit mode"}
+          column="editor"
+          className="bottom-16"
           onClick={toggleEditMode}
-          className="cursor-pointer fixed bottom-16 right-4 lg:right-auto z-50 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity fab-container-right"
-          aria-label={isEditMode ? "Switch to view mode" : "Switch to edit mode"}
         >
           {isEditMode ? (
             <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
@@ -2518,7 +2537,7 @@ function EditorToolbar({
               <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
             </svg>
           )}
-        </button>
+        </Fab>
       )}
     </>
   );

package/src/components/shell/ViewerLoginForm.tsx

@@ -4,7 +4,7 @@ import { Button } from "../shared/Button";
 import { safeRedirect } from "../../lib/safeRedirect";
 
 interface Props {
-  audiences: Array<{ name: string; displayName: string }>;
+  audiences: Array<{ name: string; displayName: string; hasPassword?: boolean }>;
   next?: string | null;
 }
 
@@ -14,12 +14,21 @@ export function ViewerLoginForm({ audiences, next }: Props) {
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
 
+  // An open (passwordless) audience needs no password field — enter with one click.
+  // Default to requiring a password until an audience is chosen so the field
+  // doesn't flash for the "Select audience..." state.
+  const selected = audiences.find((a) => a.name === audience);
+  const needsPassword = selected ? selected.hasPassword !== false : true;
+
   async function handleSubmit(e: FormEvent) {
     e.preventDefault();
     setLoading(true);
     setError(null);
 
-    const body: { audience: string; password: string; next?: string } = { audience, password };
+    const body: { audience: string; password: string; next?: string } = {
+      audience,
+      password: needsPassword ? password : "",
+    };
     if (next) body.next = next;
 
     try {
@@ -67,12 +76,14 @@ export function ViewerLoginForm({ audiences, next }: Props) {
           </select>
         </div>
 
-        <PasswordInput
-          label="Password"
-          value={password}
-          onChange={setPassword}
-          autoComplete="current-password"
-        />
+        {needsPassword && (
+          <PasswordInput
+            label="Password"
+            value={password}
+            onChange={setPassword}
+            autoComplete="current-password"
+          />
+        )}
 
         {error && (
           <p className="text-sm text-red-600">{error}</p>