@drawnagency/primitives 0.1.88 → 0.1.90

package/src/components/sections/ViewRenderer.tsx

@@ -3,13 +3,16 @@ import { getSection } from "../../lib/registry";
 
 ensureSectionsRegistered();
 import { SectionLayout } from "./SectionLayout";
+import { audiencePasses } from "../../lib/pages";
 import type { LoadedSection } from "../../lib/loader";
 
 interface Props {
   sections: LoadedSection[];
+  /** Audience-preview mode: dim sections this audience can't access. */
+  previewAudience?: string | null;
 }
 
-export default function ViewRenderer({ sections }: Props) {
+export default function ViewRenderer({ sections, previewAudience = null }: Props) {
   return (
     <>
       {sections.map(({ section, meta }) => {
@@ -17,7 +20,13 @@ export default function ViewRenderer({ sections }: Props) {
         if (!def) return null;
         const Component = def.component;
         return (
-          <SectionLayout key={section.id} type={section.type} status={meta.status} dimNonPublished>
+          <SectionLayout
+            key={section.id}
+            type={section.type}
+            status={meta.status}
+            dimNonPublished
+            dimmed={previewAudience !== null && !audiencePasses(meta.access, previewAudience)}
+          >
             <Component
               content={section}
               options={"options" in section ? (section.options as Record<string, unknown>) : undefined}

package/src/components/shared/Navigation.tsx

@@ -18,9 +18,21 @@ interface Props {
   // Optional same-island handler (tests). In production the editor nav is a
   // separate island from EditorShell, so a click dispatches pageSelectEvent.
   onPageSelect?: (pageId: string) => void;
+  /** Viewport width where the drawer becomes a fixed sidebar. Pages that dock
+   *  the chat sidebar pass "xl" so tablet widths keep the hamburger and give
+   *  the freed column to chat. Static per page render — deliberately keyed to
+   *  chat being ENABLED, not open, so the nav never flaps when chat toggles. */
+  desktopBreakpoint?: "lg" | "xl";
 }
 
-export default function Navigation({ siteNav: initialNav, siteName, darkMode, lastUpdated, logo, onPageSelect }: Props) {
+// Both branches are literal class strings so Tailwind's scanner sees them.
+const BP_CLASSES = {
+  lg: { hidden: "lg:hidden", leftAuto: "lg:left-auto", translate: "lg:translate-x-0", block: "lg:block" },
+  xl: { hidden: "xl:hidden", leftAuto: "xl:left-auto", translate: "xl:translate-x-0", block: "xl:block" },
+} as const;
+
+export default function Navigation({ siteNav: initialNav, siteName, darkMode, lastUpdated, logo, onPageSelect, desktopBreakpoint = "lg" }: Props) {
+  const bp = BP_CLASSES[desktopBreakpoint];
   const [isOpen, setIsOpen] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
   const [currentDarkMode, setCurrentDarkMode] = useState(darkMode);
@@ -205,7 +217,7 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
 
   return (
     <>
-      <header className="fixed top-0 left-0 right-0 z-50 bg-base lg:hidden">
+      <header className={cn("fixed top-0 left-0 right-0 z-50 bg-base", bp.hidden)}>
         <div className="mx-auto max-w-screen-xl flex h-16 items-center justify-between px-4">
           <div className="flex flex-col items-start gap-1">
             {logoMark}
@@ -221,11 +233,12 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
         </div>
       </header>
 
-      {isOpen && <div className="fixed inset-0 z-40 bg-black/50 lg:hidden" onClick={() => setIsOpen(false)} />}
+      {isOpen && <div className={cn("fixed inset-0 z-40 bg-black/50", bp.hidden)} onClick={() => setIsOpen(false)} />}
 
-      <nav className={cn("fixed top-0 left-0 lg:left-auto z-40 h-full w-64 flex flex-col overflow-y-auto border-r border-base-200 bg-base pt-16 transition-transform lg:translate-x-0 nav-sidebar",
+      <nav className={cn("fixed top-0 left-0 z-40 h-full w-64 flex flex-col overflow-y-auto border-r border-base-200 bg-base pt-16 transition-transform nav-sidebar",
+        bp.leftAuto, bp.translate,
         isOpen ? "translate-x-0" : "-translate-x-full")}>
-        <div className="hidden px-4 py-4 lg:block">
+        <div className={cn("hidden px-4 py-4", bp.block)}>
           {logoMark}
           <span className="text-lg font-bold text-primary">{currentSiteName}</span>
         </div>

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/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

@@ -10,12 +10,17 @@ 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 { derivePreviewInputs, servedPreviewSize } from "../../media/preview-inputs";
+import { resolveMedia } from "../../media/resolve";
+import { getMediaProvider } from "../../media";
 // Sanctioned outside->inside import: document/ is a sealed subtree, but the
 // Document mode toggle wiring needs the patch shape it edits (mirrors the same
 // sanctioned import in schemas/site-config.ts and lib/pages.ts).
 import type { DocumentOptions } from "../../document/engine/settings";
 import { SiteConfigSchema, IndexSchema } from "../../schemas/site-config";
 import { ensureSanitizer } from "../../lib/sanitize";
+import { resolveChatbotName } from "../../lib/chatbot";
 import { EditorProvider, useEditorContext, type HistoryState } from "./EditorContext";
 import { makeBlockMoveDispatch } from "./blockMoveDispatch";
 import { ROOT_CONTAINER_ID, resolveDropIndex } from "../../lib/block-dnd";
@@ -85,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";
@@ -96,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 { Tooltip } from "../shared/Tooltip";
 import { SegmentedControl } from "../shared/SegmentedControl";
 import { computeDisplaySections } from "./view-branch";
 import { SettingsIcon } from "../shared/icons";
@@ -105,6 +111,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";
 
@@ -168,6 +177,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);
@@ -240,6 +254,15 @@ export default function EditorShell({
   useEffect(() => { sectionsRef.current = sections; }, [sections]);
   useEffect(() => { siteIndexRef.current = siteIndex; }, [siteIndex]);
   useEffect(() => { void ensureSanitizer(); }, []);
+  // Mirrors siteConfig so the async preview-image upload callback (below)
+  // writes onto the latest config instead of a stale closure.
+  const siteConfigRef = useRef<SiteConfig | null>(siteConfig);
+  useEffect(() => { siteConfigRef.current = siteConfig; }, [siteConfig]);
+  // Guards the debounced preview-image composition effect (below): skips
+  // recomposing on the very first run when a preview already exists, and
+  // dedupes concurrent runs against the same composition signature.
+  const previewInitializedRef = useRef(false);
+  const lastPreviewSigRef = useRef<string | null>(null);
 
   // --- Collaboration refs ---
   // Freshest dirty-section set for the inbound remote-section handler (never
@@ -1143,7 +1166,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]);
@@ -1159,7 +1189,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
@@ -1332,6 +1362,60 @@ export default function EditorShell({
     setLocalChangesExist(true);
   }, [applySiteConfigPreview, persistence]);
 
+  // Recompose the social-preview raster (siteConfig.previewImage) when brand
+  // inputs change. Debounced so text edits don't compose per keystroke. The
+  // new previewImage rides the next normal save like any other config change.
+  useEffect(() => {
+    if (!siteConfig) return;
+    const resolveLogoUrl = (imageId: string): string | null => {
+      const pending = mediaPipeline.pendingLocalUrls[imageId];
+      if (pending) return pending;
+      const resolved = resolveMedia({ imageId }, mediaManifest, [1200], getMediaProvider());
+      return resolved?.src ?? null;
+    };
+    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.
+    if (!previewInitializedRef.current) {
+      previewInitializedRef.current = true;
+      if (siteConfig.previewImage) {
+        lastPreviewSigRef.current = signature;
+        return;
+      }
+    }
+    if (signature === lastPreviewSigRef.current) return;
+
+    const timer = setTimeout(() => {
+      lastPreviewSigRef.current = signature; // guard against duplicate concurrent runs
+      (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 } });
+          }, { hidden: true });
+        } catch (err) {
+          console.error("[EditorShell] preview-image composition failed:", err);
+          // Composition/upload failed — un-mark the signature so the next effect
+          // run (next brand-input change, or this same one on remount) retries
+          // instead of being permanently skipped as "already done".
+          lastPreviewSigRef.current = null;
+        }
+      })();
+    }, 900);
+    return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    siteConfig?.logo,
+    siteConfig?.primaryColor,
+    siteConfig?.siteName,
+    siteConfig?.headingFont,
+    siteConfig?.darkMode,
+  ]);
+
   const handleHistoryRestore = useCallback(async (historyContent: {
     sections: LoadedSection[];
     index: SiteIndex;
@@ -1444,6 +1528,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)
@@ -1512,6 +1599,8 @@ export default function EditorShell({
           {chatbotPlatformEnabled && siteConfig && (
             <ChatWidget
               siteName={siteConfig.siteName}
+              botName={resolveChatbotName(siteConfig.chatbot, null)}
+              thinkingPhrases={siteConfig.chatbot.thinkingPhrases}
               tasks={siteConfig.chatbot.tasks.map((t) => ({ id: t.id, label: t.label }))}
               isEditor
               draftChatbot={siteConfig.chatbot}
@@ -1628,7 +1717,7 @@ export default function EditorShell({
               items={[
                 ...Object.values(mediaManifest.images),
                 ...mediaPipeline.pendingMediaItems,
-              ].filter((item) => !mediaPipeline.pendingDeletions.includes(item.id))}
+              ].filter((item) => !mediaPipeline.pendingDeletions.includes(item.id) && !item.hidden)}
               onSelect={(id) => {
                 if (mediaSelectCallback) {
                   mediaSelectCallback(id);
@@ -1819,7 +1908,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;
@@ -1852,7 +1941,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}</>;
 }
@@ -1931,7 +2020,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), []);
@@ -2022,7 +2111,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}
@@ -2270,6 +2364,9 @@ function EditorToolbar({
   collabPeers,
   collabSelfId,
   collabStatus,
+  audiences,
+  authoringDefaults,
+  onAuthoringDefaultsChange,
 }: {
   buttonState: "synced" | "publish" | "saveAndPublish";
   localChangesExist: boolean;
@@ -2292,6 +2389,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();
 
@@ -2362,11 +2462,28 @@ 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>

package/src/components/shell/MediaLibraryContext.tsx

@@ -5,7 +5,7 @@ import type { SiteConfig } from "../../schemas/site-config";
 export interface MediaLibraryContextValue {
   openSelectModal: (onSelect: (imageId: string) => void) => void;
   uploadFile: (file: File) => void;
-  uploadFileWithCallback: (file: File, onComplete: (imageId: string) => void) => string;
+  uploadFileWithCallback: (file: File, onComplete: (imageId: string) => void, opts?: { hidden?: boolean }) => string;
   reportRejectedUploads: (files: { name: string; reason: "size" | "type" }[]) => void;
   manifest: MediaManifest;
   pendingItems: MediaItem[];