@drawnagency/primitives 0.1.89 → 0.1.91

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/shared/Tooltip.tsx

@@ -5,14 +5,30 @@ interface TooltipProps {
   content: ReactNode;
   children: ReactNode;
   className?: string;
+  /** Where the bubble sits relative to the trigger:
+   *  - "bottom" (default): below, centered.
+   *  - "right": to the right (used by the container child rail, a narrow left gutter).
+   *  - "bottom-clamp": below, centered on wide viewports but right-aligned under `xl`
+   *    (where the top toolbar hits the viewport width) so a far-right button's bubble
+   *    can't overflow off the right edge of the screen. */
+  side?: "bottom" | "right" | "bottom-clamp";
 }
 
-export function Tooltip({ content, children, className }: TooltipProps) {
+const sideClasses: Record<NonNullable<TooltipProps["side"]>, string> = {
+  bottom: "left-1/2 top-full mt-1.5 -translate-x-1/2",
+  right: "left-full top-1/2 ml-1.5 -translate-y-1/2",
+  "bottom-clamp": "top-full mt-1.5 left-1/2 -translate-x-1/2 max-xl:left-auto max-xl:right-0 max-xl:translate-x-0",
+};
+
+export function Tooltip({ content, children, className, side = "bottom" }: TooltipProps) {
   return (
     <div className={cn("group/tooltip relative inline-flex", className)}>
       {children}
       <span
-        className="pointer-events-none absolute left-1/2 top-full z-50 mt-1.5 -translate-x-1/2 opacity-0 transition-opacity delay-300 group-hover/tooltip:opacity-100"
+        className={cn(
+          "pointer-events-none absolute z-50 opacity-0 transition-opacity delay-300 group-hover/tooltip:opacity-100",
+          sideClasses[side],
+        )}
         role="tooltip"
       >
         <span className="block whitespace-nowrap rounded bg-tooltip px-2 py-1 text-center text-xs leading-relaxed text-tooltip-muted">

package/src/components/shell/AudiencePreviewMenu.tsx

@@ -0,0 +1,73 @@
+import { useRef, useState } from "react";
+import { Check, UsersIcon } from "lucide-react";
+import { IconButton } from "../shared/IconButton";
+import { Popover } from "../shared/Popover";
+import { PopoverItem } from "../shared/PopoverItem";
+import { useEditorContext } from "./EditorContext";
+import type { Audience } from "../../auth/types";
+
+interface AudiencePreviewMenuProps {
+  audiences: Audience[];
+}
+
+export function AudiencePreviewMenu({ audiences }: AudiencePreviewMenuProps) {
+  const { previewAudience, setPreviewAudience } = useEditorContext();
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  // A previewed audience can be deleted mid-session; the badge falls back grey.
+  const active = previewAudience !== null ? audiences.find((a) => a.name === previewAudience) : undefined;
+
+  function select(name: string | null) {
+    setPreviewAudience(name);
+    setOpen(false);
+  }
+
+  return (
+    <div ref={wrapperRef} className="relative">
+      <IconButton
+        icon={<UsersIcon size={16} />}
+        label="Preview as audience"
+        size="md"
+        onClick={() => setOpen((v) => !v)}
+        aria-pressed={previewAudience !== null}
+        aria-haspopup="true"
+        aria-expanded={open}
+        className="border border-base-200 bg-base-accent"
+      />
+      {previewAudience !== null && (
+        <span
+          aria-hidden="true"
+          data-testid="audience-preview-badge"
+          className="pointer-events-none absolute -top-0.5 -right-0.5 h-2.5 w-2.5 rounded-full border border-base"
+          style={{ backgroundColor: active?.color ?? "#9ca3af" }}
+        />
+      )}
+      <Popover isOpen={open} onClose={() => setOpen(false)} anchorRef={wrapperRef} className="w-48">
+        <ul role="radiogroup" aria-label="Preview as audience" className="w-full overflow-hidden py-1">
+          <li>
+            <PopoverItem role="radio" aria-checked={previewAudience === null} onClick={() => select(null)}>
+              <span className="flex-1 font-medium text-base-contrast">All audiences</span>
+              {previewAudience === null && <Check size={14} strokeWidth={3} className="text-primary" />}
+            </PopoverItem>
+          </li>
+          {audiences.map((a) => {
+            const checked = previewAudience === a.name;
+            return (
+              <li key={a.name}>
+                <PopoverItem role="radio" aria-checked={checked} onClick={() => select(a.name)}>
+                  <span
+                    aria-hidden="true"
+                    className="h-3 w-3 shrink-0 rounded-full border border-base-200"
+                    style={{ backgroundColor: a.color ?? "#9ca3af" }}
+                  />
+                  <span className="flex-1 font-medium text-base-contrast">{a.displayName}</span>
+                  {checked && <Check size={14} strokeWidth={3} className="text-primary" />}
+                </PopoverItem>
+              </li>
+            );
+          })}
+        </ul>
+      </Popover>
+    </div>
+  );
+}

package/src/components/shell/AuthoringDefaultsMenu.tsx

@@ -0,0 +1,54 @@
+import { useRef, useState } from "react";
+import { SlidersHorizontalIcon } from "lucide-react";
+import { IconButton } from "../shared/IconButton";
+import { Popover } from "../shared/Popover";
+import { StatusRadioList } from "../editor/StatusIndicator";
+import { AudienceChecklist } from "../editor/AudienceIndicator";
+import type { AuthoringDefaults } from "../../lib/authoring-defaults";
+import type { Audience } from "../../auth/types";
+
+interface AuthoringDefaultsMenuProps {
+  defaults: AuthoringDefaults;
+  audiences: Audience[];
+  onChange: (next: AuthoringDefaults) => void;
+}
+
+export function AuthoringDefaultsMenu({ defaults, audiences, onChange }: AuthoringDefaultsMenuProps) {
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  function toggleAudience(name: string) {
+    const access = defaults.access.includes(name)
+      ? defaults.access.filter((n) => n !== name)
+      : [...defaults.access, name];
+    onChange({ ...defaults, access });
+  }
+
+  return (
+    <div ref={wrapperRef} className="relative">
+      <IconButton
+        icon={<SlidersHorizontalIcon size={16} />}
+        label="Authoring defaults"
+        size="md"
+        onClick={() => setOpen((v) => !v)}
+        aria-haspopup="true"
+        aria-expanded={open}
+        className="border border-base-200 bg-base-accent"
+      />
+      <Popover isOpen={open} onClose={() => setOpen(false)} anchorRef={wrapperRef} className="w-56">
+        <div className="px-3 pt-2 pb-1 text-xs font-semibold text-base-contrast-light">
+          New sections start as
+        </div>
+        <StatusRadioList
+          status={defaults.status}
+          onChange={(status) => onChange({ ...defaults, status })}
+          ariaLabel="Default status for new sections"
+        />
+        <div className="border-t border-base-200 px-3 pt-2 pb-1 text-xs font-semibold text-base-contrast-light">
+          Default audiences
+        </div>
+        <AudienceChecklist access={defaults.access} audiences={audiences} onToggle={toggleAudience} />
+      </Popover>
+    </div>
+  );
+}

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/EditorContext.tsx

@@ -17,11 +17,14 @@ interface EditorContextValue {
   viewBranch: "saved" | "live";
   historyState: HistoryState;
   historyPageId: string | null;
+  /** Audience-preview mode: dim sections this audience can't access. null = off. */
+  previewAudience: string | null;
   toggleEditMode: () => void;
   toggleShowAllChrome: () => void;
   setViewBranch: (branch: "saved" | "live") => void;
   setHistoryState: (state: HistoryState) => void;
   setHistoryPageId: (pageId: string | null) => void;
+  setPreviewAudience: (audience: string | null) => void;
 }
 
 const EditorContext = createContext<EditorContextValue | null>(null);
@@ -36,6 +39,7 @@ export function EditorProvider({ children }: EditorProviderProps) {
   const [viewBranch, setViewBranchState] = useState<"saved" | "live">("saved");
   const [historyState, setHistoryStateRaw] = useState<HistoryState>(null);
   const [historyPageId, setHistoryPageId] = useState<string | null>(null);
+  const [previewAudience, setPreviewAudience] = useState<string | null>(null);
   const setHistoryState = useCallback((state: HistoryState) => {
     // null = "auto": resolved to the current page (or home) at render time
     setHistoryPageId(null);
@@ -54,7 +58,7 @@ export function EditorProvider({ children }: EditorProviderProps) {
   const setViewBranch = useCallback((b: "saved" | "live") => setViewBranchState(b), []);
 
   return (
-    <EditorContext.Provider value={{ isEditMode, showAllChrome, viewBranch, historyState, historyPageId, toggleEditMode, toggleShowAllChrome, setViewBranch, setHistoryState, setHistoryPageId }}>
+    <EditorContext.Provider value={{ isEditMode, showAllChrome, viewBranch, historyState, historyPageId, previewAudience, toggleEditMode, toggleShowAllChrome, setViewBranch, setHistoryState, setHistoryPageId, setPreviewAudience }}>
       {children}
     </EditorContext.Provider>
   );

package/src/components/shell/EditorShell.tsx

@@ -90,7 +90,7 @@ import { generateSiteNav } from "../../lib/nav";
 import { siteNavChangeEvent, pageSelectEvent, darkModeEvent, siteNameChangeEvent, historySelectEvent } from "../../lib/events";
 import {
   homePage, pageById, pageBySlug, pageDisplayTitle, addSectionToPage, removeSectionFromPages,
-  reorderSectionInPage,
+  reorderSectionInPage, audiencePasses,
   setHomePage, setPageArchived, setPageFields, setPageAudience, setPageDocument, deletePage, addPage, reorderPages,
   moveSection as moveSectionReducer,
 } from "../../lib/pages";
@@ -101,6 +101,8 @@ 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";
 import { SettingsIcon } from "../shared/icons";
@@ -110,6 +112,9 @@ import { HistoryToolbar } from "./HistoryToolbar";
 import { RestoreModal } from "./RestoreModal";
 import { EditorLoading } from "./EditorLoading";
 import ViewRenderer from "../sections/ViewRenderer";
+import { AuthoringDefaultsMenu } from "./AuthoringDefaultsMenu";
+import { AudiencePreviewMenu } from "./AudiencePreviewMenu";
+import { loadAuthoringDefaults, saveAuthoringDefaults, filterAccessToKnown, type AuthoringDefaults } from "../../lib/authoring-defaults";
 
 export { useMediaLibrary } from "./MediaLibraryContext";
 
@@ -173,6 +178,11 @@ export default function EditorShell({
   const [sections, setSections] = useState<LoadedSection[]>([]);
   const [siteIndex, setSiteIndex] = useState<SiteIndex>({ siteId, pages: [], sections: {} });
   const [audiences, setAudiences] = useState<Audience[]>(initialAudiences);
+  const [authoringDefaults, setAuthoringDefaults] = useState<AuthoringDefaults>(loadAuthoringDefaults);
+  const onAuthoringDefaultsChange = useCallback((next: AuthoringDefaults) => {
+    setAuthoringDefaults(next);
+    saveAuthoringDefaults(next);
+  }, []);
   const [localChangesExist, setLocalChangesExist] = useState(false);
   const [showDiscardConfirm, setShowDiscardConfirm] = useState(false);
   const [showSiteSettings, setShowSiteSettings] = useState(false);
@@ -1157,7 +1167,14 @@ export default function EditorShell({
       const content = resolveInsertedContent(selection, getAllSections(), newId);
       if (!content) return;
       const id = newId();
-      const meta = { type: content.type, status: "draft" as const, access: [] as string[] };
+      // Access is constrained to the audiences this page can offer (all site
+      // audiences on an unrestricted page), so stale or out-of-scope default
+      // names never land in a section's access list.
+      const meta = {
+        type: content.type,
+        status: authoringDefaults.status,
+        access: filterAccessToKnown(authoringDefaults.access, pageAudiences),
+      };
       const newSection: LoadedSection = { section: { id, ...content } as LoadedSection["section"], meta };
 
       setSections((prev) => [...prev, newSection]);
@@ -1173,7 +1190,7 @@ export default function EditorShell({
       // save-time sync by design).
       void collabRef.current?.requestEdit(id);
     },
-    [persistence, resolvedActivePage],
+    [persistence, resolvedActivePage, authoringDefaults, pageAudiences],
   );
 
   // Runs after the confirmation modal is accepted. Removes the section from the
@@ -1512,6 +1529,9 @@ export default function EditorShell({
             collabPeers={collab.peers}
             collabSelfId={collabBootstrap?.userId ?? null}
             collabStatus={collab.status}
+            audiences={audiences}
+            authoringDefaults={authoringDefaults}
+            onAuthoringDefaultsChange={onAuthoringDefaultsChange}
           />
 
           {/* Bug reports persist via Supabase. On the password-only (zero-Supabase)
@@ -1529,18 +1549,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 />}>
@@ -1607,6 +1622,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}
@@ -1635,6 +1656,7 @@ export default function EditorShell({
               onTakeover={confirmTakeover}
             />
           </HistoryOrEditorContent>
+          </div>
           <GlobalModal />
           <SiteSettingsModal
             isOpen={showSiteSettings}
@@ -1889,7 +1911,7 @@ function HistoryOrEditorContent({
   activeSections: LoadedSection[];
   activePageId: string | null;
 }) {
-  const { historyState, historyPageId, setHistoryPageId } = useEditorContext();
+  const { historyState, historyPageId, setHistoryPageId, previewAudience } = useEditorContext();
   const wasInHistory = useRef(false);
 
   const historyPage = historyState ? resolveHistoryPage(historyState, historyPageId, activePageId) : null;
@@ -1922,7 +1944,7 @@ function HistoryOrEditorContent({
     const pageSections = historyState.sections
       .filter((s) => position.has(s.section.id))
       .sort((a, b) => (position.get(a.section.id) ?? 0) - (position.get(b.section.id) ?? 0));
-    return <ViewRenderer sections={pageSections} />;
+    return <ViewRenderer sections={pageSections} previewAudience={previewAudience} />;
   }
   return <>{children}</>;
 }
@@ -2001,7 +2023,7 @@ function EditorContent({
   getEditIntent: (id: string) => () => Promise<boolean>;
   onTakeover: (id: string) => void;
 }) {
-  const { isEditMode, viewBranch } = useEditorContext();
+  const { isEditMode, viewBranch, previewAudience } = useEditorContext();
   const { openModal, closeModal } = useEditorModal();
   const [pendingInsertIndex, setPendingInsertIndex] = useState<number | null>(null);
   const dismissPendingInsert = useCallback(() => setPendingInsertIndex(null), []);
@@ -2092,7 +2114,12 @@ function EditorContent({
             )}
 
             <ErrorBoundary label={`${definition.label} (${section.type})`}>
-              <SectionLayout type={section.type} status={meta.status} dimNonPublished={!isEditMode}>
+              <SectionLayout
+                type={section.type}
+                status={meta.status}
+                dimNonPublished={!isEditMode}
+                dimmed={previewAudience !== null && !audiencePasses(meta.access, previewAudience)}
+              >
                 <SectionWrapper
                   sectionId={section.id}
                   sectionType={section.type}
@@ -2340,6 +2367,9 @@ function EditorToolbar({
   collabPeers,
   collabSelfId,
   collabStatus,
+  audiences,
+  authoringDefaults,
+  onAuthoringDefaultsChange,
 }: {
   buttonState: "synced" | "publish" | "saveAndPublish";
   localChangesExist: boolean;
@@ -2362,6 +2392,9 @@ function EditorToolbar({
   collabPeers: CollabPeer[];
   collabSelfId: string | null;
   collabStatus: CollabStatus;
+  audiences: Audience[];
+  authoringDefaults: AuthoringDefaults;
+  onAuthoringDefaultsChange: (next: AuthoringDefaults) => void;
 }) {
   const { isEditMode, viewBranch, setViewBranch, toggleEditMode, historyState, setHistoryState, historyPageId, setHistoryPageId } = useEditorContext();
 
@@ -2382,8 +2415,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
@@ -2432,18 +2469,35 @@ function EditorToolbar({
             </div>
             <div className="flex items-center justify-end gap-2">
               <ProcessingIndicator items={processingItems} />
-              <IconButton icon={<ImageIcon size={16} />} label="Media library" size="md" onClick={onMediaClick} className="border border-base-200 bg-base-accent" />
-              <IconButton icon={<ListOrderedIcon size={16} />} label="Reorder sections" size="md" onClick={onOrderingClick} className="border border-base-200 bg-base-accent" />
-              <IconButton icon={<FilesIcon size={16} />} label="Pages" size="md" onClick={onPagesClick} className="border border-base-200 bg-base-accent" />
-              <ShowAllChromeToggle />
-              <IconButton icon={<SettingsIcon size={16} />} label="Site settings" size="md" onClick={onSettingsClick} className="border border-base-200 bg-base-accent" />
+              <Tooltip side="bottom" content="Authoring defaults">
+                <AuthoringDefaultsMenu defaults={authoringDefaults} audiences={audiences} onChange={onAuthoringDefaultsChange} />
+              </Tooltip>
+              <Tooltip side="bottom" content="Preview as audience">
+                <AudiencePreviewMenu audiences={audiences} />
+              </Tooltip>
+              <div aria-hidden="true" className="mx-1 h-6 w-px self-center bg-base-200" />
+              <Tooltip side="bottom" content="Media library">
+                <IconButton icon={<ImageIcon size={16} />} label="Media library" size="md" onClick={onMediaClick} className="border border-base-200 bg-base-accent" />
+              </Tooltip>
+              <Tooltip side="bottom" content="Reorder sections">
+                <IconButton icon={<ListOrderedIcon size={16} />} label="Reorder sections" size="md" onClick={onOrderingClick} className="border border-base-200 bg-base-accent" />
+              </Tooltip>
+              <Tooltip side="bottom" content="Pages">
+                <IconButton icon={<FilesIcon size={16} />} label="Pages" size="md" onClick={onPagesClick} className="border border-base-200 bg-base-accent" />
+              </Tooltip>
+              <Tooltip side="bottom" content="Toggle controls">
+                <ShowAllChromeToggle />
+              </Tooltip>
+              <Tooltip side="bottom-clamp" content="Site settings">
+                <IconButton icon={<SettingsIcon size={16} />} label="Site settings" size="md" onClick={onSettingsClick} className="border border-base-200 bg-base-accent" />
+              </Tooltip>
             </div>
           </div>
         </div>
       )}
       {!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" },
@@ -2456,10 +2510,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">
@@ -2471,7 +2526,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/SiteSettingsChatbot.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { Button } from "../shared/Button";
 import { cn } from "../../lib/cn";
+import { contrastColor } from "../../lib/contrast";
 import ChatPanel from "../chat/ChatPanel";
 import type { SiteConfig, ChatbotConfig, ChatbotTask } from "../../schemas/site-config";
 import type { Audience } from "../../auth/types";
@@ -35,7 +36,7 @@ function AudienceChips({ audiences, selected, onToggle }: { audiences: Audience[
         <button key={a.name} type="button" onClick={() => onToggle(a.name)}
           className={cn("rounded-full border px-2 py-0.5 text-xs",
             selected.includes(a.name) ? "border-primary bg-primary text-primary-contrast" : "border-base-200 bg-base-accent text-base-contrast")}
-          style={a.color && selected.includes(a.name) ? { backgroundColor: a.color, borderColor: a.color } : undefined}>
+          style={a.color && selected.includes(a.name) ? { backgroundColor: a.color, borderColor: a.color, color: contrastColor(a.color) } : undefined}>
           {a.displayName}
         </button>
       ))}

package/src/hooks/useBuildStatus.ts

@@ -23,6 +23,14 @@ const FADE_DURATION = 1000;
 // whose deploy was never confirmed (e.g. superseded by a later build) — show
 // idle rather than a phantom in-progress publish.
 const STALE_BUILD_MS = 15 * 60 * 1000;
+// Hard cap on an ACTIVE tracking session. Completion normally arrives via a terminal
+// poll (ready/error), which the Netlify webhook writes to the deploy-status row. If
+// that signal is lost/delayed (webhook dropped or unconfigured) the row stays
+// "building" forever and the elapsed counter would climb indefinitely. This backstop
+// stops the runaway counter and hides the indicator after the cap — the same "a build
+// shouldn't run longer than this" invariant as STALE_BUILD_MS, applied to the live
+// session rather than only on mount.
+const MAX_TRACKING_MS = STALE_BUILD_MS;
 
 export function useBuildStatus(): BuildStatusResult {
   const [state, setState] = useState<BuildState>("idle");
@@ -31,6 +39,7 @@ export function useBuildStatus(): BuildStatusResult {
   const clearRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const fadeRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const giveUpRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const isPolling = useRef(false);
   const mountedRef = useRef(true);
 
@@ -52,6 +61,23 @@ export function useBuildStatus(): BuildStatusResult {
     isPolling.current = false;
   }, []);
 
+  const clearGiveUp = useCallback(() => {
+    if (giveUpRef.current) { clearTimeout(giveUpRef.current); giveUpRef.current = null; }
+  }, []);
+
+  // Arm the runaway backstop: if the cap elapses before a terminal signal, stop
+  // polling + the timer and drop back to idle (hide the indicator). `elapsedMs` lets a
+  // build already in progress at mount count against the same absolute cap.
+  const armGiveUp = useCallback((elapsedMs = 0) => {
+    clearGiveUp();
+    giveUpRef.current = setTimeout(() => {
+      if (!mountedRef.current) return;
+      stopPolling();
+      stopTimer();
+      setState("idle");
+    }, Math.max(0, MAX_TRACKING_MS - elapsedMs));
+  }, [clearGiveUp, stopPolling, stopTimer]);
+
   const fetchStatus = useCallback(async (): Promise<BuildStatusResponse | null> => {
     try {
       const res = await fetch("/api/build-status");
@@ -86,6 +112,7 @@ export function useBuildStatus(): BuildStatusResult {
       if (data.state === "ready" || data.state === "error") {
         stopPolling();
         stopTimer();
+        clearGiveUp();
         if (data.state === "ready") {
           clearRef.current = setTimeout(() => {
             if (!mountedRef.current) return;
@@ -98,7 +125,7 @@ export function useBuildStatus(): BuildStatusResult {
         }
       }
     },
-    [stopPolling, stopTimer],
+    [stopPolling, stopTimer, clearGiveUp],
   );
 
   const startPolling = useCallback(() => {
@@ -130,6 +157,7 @@ export function useBuildStatus(): BuildStatusResult {
         // counts real elapsed time instead of sitting frozen at 0:00.
         startTimer(Number.isFinite(ageMs) ? Math.max(0, Math.floor(ageMs / 1000)) : 0);
         startPolling();
+        armGiveUp(Number.isFinite(ageMs) ? ageMs : 0);
         return;
       }
 
@@ -143,24 +171,27 @@ export function useBuildStatus(): BuildStatusResult {
       mountedRef.current = false;
       stopPolling();
       stopTimer();
+      clearGiveUp();
       if (clearRef.current) clearTimeout(clearRef.current);
       if (fadeRef.current) clearTimeout(fadeRef.current);
     };
-  }, [fetchStatus, handleStatusUpdate, startPolling, startTimer, stopPolling, stopTimer]);
+  }, [fetchStatus, handleStatusUpdate, startPolling, startTimer, stopPolling, stopTimer, armGiveUp, clearGiveUp]);
 
   const startTracking = useCallback(() => {
     if (clearRef.current) { clearTimeout(clearRef.current); clearRef.current = null; }
     setState("building");
     startTimer();
     startPolling();
-  }, [startPolling, startTimer]);
+    armGiveUp(0);
+  }, [startPolling, startTimer, armGiveUp]);
 
   const dismiss = useCallback(() => {
     if (clearRef.current) { clearTimeout(clearRef.current); clearRef.current = null; }
     setState("idle");
     stopPolling();
     stopTimer();
-  }, [stopPolling, stopTimer]);
+    clearGiveUp();
+  }, [stopPolling, stopTimer, clearGiveUp]);
 
   return { state, elapsedSeconds, startTracking, dismiss };
 }