@drawnagency/primitives 0.1.104 → 0.1.106

package/src/components/shell/EditorShell.tsx

@@ -93,7 +93,11 @@ import { generateSiteNav } from "../../lib/nav";
 import { deriveSiteDocuments, type SiteDocument } from "../../lib/documents";
 import { setSiteDocuments, closeDocFile } from "../docfile/doc-file-state";
 import { pagesInNavOrder, moveNavEntry, addGroup, renameGroup, setGroupStartCollapsed, deleteGroup, type NavLocation } from "../../lib/nav-tree";
-import { siteNavChangeEvent, pageSelectEvent, darkModeEvent, siteNameChangeEvent, historySelectEvent, historyRestoreEvent, historyRestoreFailedEvent, editorDirtyEvent } from "../../lib/events";
+import { siteNavChangeEvent, pageSelectEvent, darkModeEvent, siteNameChangeEvent, historySelectEvent, historyRestoreEvent, historyRestoreFailedEvent, editorDirtyEvent, audienceDetailsEvent } from "../../lib/events";
+import { AudienceDetailsPanel, type AudienceDetail } from "./AudienceDetailsPanel";
+import { buildAudienceOverview, type SectionDisplay } from "../../lib/audience-overview";
+import { toThumbViews } from "../../lib/thumb-views";
+import type { ViewerCredential } from "../../schemas/audience";
 import {
   homePage, pageById, pageBySlug, pageDisplayTitle, addSectionToPage, removeSectionFromPages,
   reorderVisibleSectionInPage, audiencePasses,
@@ -263,6 +267,13 @@ export default function EditorShell({
   // fully landed when part of it was refused.
   const [saveWarnings, setSaveWarnings] = useState<string[]>([]);
   const [activePageId, setActivePageId] = useState<string | null>(null);
+  // The Audience Details surface, opened from the nav. Rendered INSTEAD of the
+  // section canvas so the toolbar, unsaved drafts and modals all stay mounted —
+  // an editor reviewing access never leaves the editor.
+  const [showAudienceDetails, setShowAudienceDetails] = useState(false);
+  // null = the auth provider has no named sign-ins (`.env` mode → route 501s),
+  // which is also what turns the reveal buttons off.
+  const [viewerCredentials, setViewerCredentials] = useState<ViewerCredential[] | null>(null);
   const [movingSectionId, setMovingSectionId] = useState<string | null>(null);
   // Set by recoverConflict when a rebase surfaces overlapping edits; drives the
   // keep-mine/take-theirs dialog. `resolve` is the promise resolver recovery
@@ -369,6 +380,41 @@ export default function EditorShell({
     return resolvedActivePage.order.map((id) => sectionsById[id]).filter((s): s is LoadedSection => !!s);
   }, [resolvedActivePage, sectionsById]);
 
+  // Same model the /audiences route builds server-side, from the shell's own
+  // live state — so an editor sees their SAVED draft's access, not the published
+  // snapshot the route would show.
+  const audienceDetails = useMemo<AudienceDetail[]>(() => {
+    if (!showAudienceDetails) return [];
+    const cache = new Map<string, SectionDisplay>();
+    const display = (sectionId: string): SectionDisplay => {
+      const cached = cache.get(sectionId);
+      if (cached) return cached;
+      const loaded = sectionsById[sectionId];
+      const type = loaded?.section.type ?? siteIndex.sections[sectionId]?.type ?? "unknown";
+      const definition = getSection(type);
+      const resolved: SectionDisplay = {
+        label: loaded
+          ? definition?.getLabel?.(loaded.section) ?? definition?.label ?? type
+          : definition?.label ?? type,
+        typeLabel: definition?.label ?? type,
+        thumbnails: loaded ? toThumbViews(definition?.getThumbnails?.(loaded.section) ?? [], mediaManifest) : [],
+      };
+      cache.set(sectionId, resolved);
+      return resolved;
+    };
+    return audiences.map((a) => ({
+      name: a.name,
+      displayName: a.displayName,
+      color: a.color,
+      isDefault: a.isDefault,
+      hasPassword: a.hasPassword,
+      credentials: (viewerCredentials ?? [])
+        .filter((c) => c.audienceName === a.name)
+        .map((c) => ({ username: c.username, label: c.label })),
+      overview: buildAudienceOverview(siteIndex, display, a.name),
+    }));
+  }, [showAudienceDetails, audiences, viewerCredentials, siteIndex, sectionsById, mediaManifest]);
+
   const pageAudiences = useMemo(() => {
     if (!resolvedActivePage || resolvedActivePage.access.length === 0) return audiences;
     return audiences.filter((a) => resolvedActivePage.access.includes(a.name));
@@ -965,11 +1011,16 @@ export default function EditorShell({
   useEffect(() => {
     if (!resolvedActivePage) return;
     const nav = generateSiteNav({
-      index: siteIndex, activeSections, activePageId: resolvedActivePage.id, mode: "editor", audience: null,
+      index: siteIndex, activeSections,
+      // The Audience Details surface is not a page: clearing the active id drops
+      // the previous page's highlight (and its heading tree), so the sidebar
+      // never shows you in two places at once.
+      activePageId: showAudienceDetails ? null : resolvedActivePage.id,
+      mode: "editor", audience: null,
       documents: siteDocuments ?? [],
     });
     siteNavChangeEvent.dispatch(nav);
-  }, [siteIndex, activeSections, resolvedActivePage, siteDocuments]);
+  }, [siteIndex, activeSections, resolvedActivePage, siteDocuments, showAudienceDetails]);
 
   const goToPage = useCallback((pageId: string) => {
     const page = pageById(siteIndexRef.current, pageId);
@@ -986,7 +1037,25 @@ export default function EditorShell({
   }, []);
 
   // Nav island → shell page selection.
-  useEffect(() => pageSelectEvent.listen((id) => goToPage(id)), [goToPage]);
+  useEffect(() => pageSelectEvent.listen((id) => { setShowAudienceDetails(false); goToPage(id); }), [goToPage]);
+  useEffect(() => audienceDetailsEvent.listen(() => setShowAudienceDetails(true)), []);
+
+  // Fetched on open rather than at mount: most editing sessions never look at
+  // this, and the list changes whenever Site Settings adds or removes a sign-in.
+  useEffect(() => {
+    if (!showAudienceDetails) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await fetch("/api/auth/credentials");
+        if (cancelled) return;
+        setViewerCredentials(res.ok ? (await res.json()).credentials ?? [] : null);
+      } catch {
+        if (!cancelled) setViewerCredentials(null);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [showAudienceDetails]);
 
   // Back/forward maps the URL back to the active page (no reload).
   useEffect(() => {
@@ -1879,6 +1948,26 @@ export default function EditorShell({
               document pane) lives here for exactly the same reason: hiding
               main would hide the toolbar and FABs too. */}
           <div className="bp-band-shift bp-page-content">
+          {showAudienceDetails ? (
+            <div className="py-8">
+              <div className="flex flex-wrap items-baseline justify-between gap-3">
+                <h1 className="text-2xl font-bold text-base-contrast">Audience details</h1>
+                <Button
+                  variant="secondary"
+                  onClick={() => resolvedActivePage && pageSelectEvent.dispatch(resolvedActivePage.id)}
+                >
+                  Back to editing
+                </Button>
+              </div>
+              <p className="mt-2 max-w-2xl text-sm text-base-contrast-light">
+                What each audience can see, and the sign-ins that reach it. Reflects your
+                current working copy — add or remove sign-ins under Site settings → Audiences.
+              </p>
+              <div className="mt-6">
+                <AudienceDetailsPanel audiences={audienceDetails} revealSupported={viewerCredentials !== null} />
+              </div>
+            </div>
+          ) : (
           <HistoryOrEditorContent
             index={siteIndex}
             activeSections={activeSections}
@@ -1907,6 +1996,7 @@ export default function EditorShell({
               onTakeover={confirmTakeover}
             />
           </HistoryOrEditorContent>
+          )}
           </div>
           <GlobalModal />
           <SiteSettingsModal

package/src/components/shell/SiteSettingsViewerAccess.tsx

@@ -4,6 +4,7 @@ import { Button } from "../shared/Button";
 import { Toggle } from "../shared/Toggle";
 import { AudienceRow } from "./AudienceRow";
 import { AudienceAddForm } from "./AudienceAddForm";
+import type { ViewerCredential } from "../../schemas/audience";
 import { cn } from "../../lib/cn";
 
 interface Props {
@@ -12,8 +13,18 @@ interface Props {
   onAudiencesChange: (audiences: Audience[]) => void;
 }
 
+/** 32 random hex chars — long enough that it can never be guessed or typed. */
+function unusablePassword(): string {
+  const bytes = crypto.getRandomValues(new Uint8Array(16));
+  return Array.from(bytes).map((b) => b.toString(16).padStart(2, "0")).join("");
+}
+
 export function SiteSettingsViewerAccess({ audienceManagement, passwordToggle, onAudiencesChange }: Props) {
   const [audiences, setAudiences] = useState<Audience[]>([]);
+  // Null until we know: undefined-vs-empty matters, because an empty ARRAY means
+  // credential mode with no sign-ins yet, while null means this site has no
+  // credential support at all and keeps its audience-level password fields.
+  const [credentials, setCredentials] = useState<ViewerCredential[] | null>(null);
   const [passwordEnabled, setPasswordEnabled] = useState(true);
   const [loading, setLoading] = useState(true);
   const [showAddForm, setShowAddForm] = useState(false);
@@ -21,12 +32,17 @@ export function SiteSettingsViewerAccess({ audienceManagement, passwordToggle, o
 
   const loadAudiences = useCallback(async () => {
     try {
-      const res = await fetch("/api/auth/audiences");
-      const data = await res.json();
+      const [audienceRes, credentialRes] = await Promise.all([
+        fetch("/api/auth/audiences"),
+        fetch("/api/auth/credentials"),
+      ]);
+      const data = await audienceRes.json();
       const list = data.audiences ?? [];
       setAudiences(list);
       onAudiencesChange(list);
       setPasswordEnabled(data.passwordEnabled ?? true);
+      // 501 = no credential support (`.env` mode) — stay in audience-password UI.
+      setCredentials(credentialRes.ok ? (await credentialRes.json()).credentials ?? [] : null);
     } finally {
       setLoading(false);
     }
@@ -58,10 +74,15 @@ export function SiteSettingsViewerAccess({ audienceManagement, passwordToggle, o
   }
 
   async function handleAdd(data: { displayName: string; color: string | null; password: string }) {
+    // In credential mode the audience-level password is vestigial but the column
+    // is NOT NULL, so it gets an unguessable value nobody is ever told. Writing
+    // an empty one would leave the audience walk-in-able through the legacy
+    // dropdown login if this site were ever rolled back to an older deployment.
+    const password = data.password.length > 0 ? data.password : unusablePassword();
     const res = await fetch("/api/auth/audiences", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
+      body: JSON.stringify({ ...data, password }),
     });
     if (!res.ok) {
       const err = await res.json().catch(() => ({}));
@@ -87,6 +108,31 @@ export function SiteSettingsViewerAccess({ audienceManagement, passwordToggle, o
     await loadAudiences();
   }
 
+  async function credentialRequest(method: string, body: unknown) {
+    const res = await fetch("/api/auth/credentials", {
+      method,
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}));
+      throw new Error(err.error ?? "Request failed");
+    }
+    await loadAudiences();
+  }
+
+  function credentialActions(audienceName: string) {
+    return {
+      create: (d: { username: string; label: string | null; password: string }) =>
+        credentialRequest("POST", { ...d, audienceName }),
+      setPassword: (username: string, password: string) =>
+        credentialRequest("PATCH", { username, password }),
+      setLabel: (username: string, label: string | null) =>
+        credentialRequest("PATCH", { username, label }),
+      delete: (username: string) => credentialRequest("DELETE", { username }),
+    };
+  }
+
   async function handleDelete(name: string) {
     const res = await fetch("/api/auth/audiences", {
       method: "DELETE",
@@ -124,9 +170,11 @@ export function SiteSettingsViewerAccess({ audienceManagement, passwordToggle, o
             <span className="text-sm font-medium">Require password to view site</span>
           </div>
           <p className="text-xs text-base-contrast-light">
-            {passwordEnabled
-              ? "Viewers must select an audience and enter a password to see any content."
-              : "Site is fully public. All published sections are visible to anyone."}
+            {!passwordEnabled
+              ? "Site is fully public. All published sections are visible to anyone."
+              : credentials
+                ? "Viewers must sign in with a username and password to see any content."
+                : "Viewers must select an audience and enter a password to see any content."}
           </p>
           {toggleError && <p className="text-xs text-red-600">{toggleError}</p>}
         </div>
@@ -147,6 +195,8 @@ export function SiteSettingsViewerAccess({ audienceManagement, passwordToggle, o
             canMutate={audienceManagement}
             onSave={(patch) => handleSave(a.name, patch)}
             onDelete={() => handleDelete(a.name)}
+            credentials={credentials ? credentials.filter((c) => c.audienceName === a.name) : undefined}
+            credentialActions={credentials ? credentialActions(a.name) : undefined}
           />
         ))}
         {audiences.length === 0 && (
@@ -159,6 +209,7 @@ export function SiteSettingsViewerAccess({ audienceManagement, passwordToggle, o
           <AudienceAddForm
             onSubmit={handleAdd}
             onCancel={() => setShowAddForm(false)}
+            requirePassword={credentials === null}
           />
         ) : (
           <Button variant="secondary" onClick={() => setShowAddForm(true)}>

package/src/components/shell/ViewerLoginForm.tsx

@@ -1,16 +1,25 @@
 import { useState, type FormEvent } from "react";
+import { Input } from "../shared/Input";
 import { PasswordInput } from "../shared/PasswordInput";
 import { Button } from "../shared/Button";
 import { Select } from "../shared/Select";
 import { safeRedirect } from "../../lib/safeRedirect";
 
 interface Props {
+  /** Audience mode only. Empty (and unused) in credential mode — the page must
+   *  not ship an audience list to a login form that doesn't offer the choice. */
   audiences: Array<{ name: string; displayName: string; hasPassword?: boolean }>;
+  /** Set by the page from the auth provider's capability, never by the client. */
+  mode?: "audience" | "credentials";
   next?: string | null;
 }
 
-export function ViewerLoginForm({ audiences, next }: Props) {
-  const [audience, setAudience] = useState(audiences.length === 1 ? audiences[0].name : "");
+export function ViewerLoginForm({ audiences, mode = "audience", next }: Props) {
+  const credentialMode = mode === "credentials";
+  const [username, setUsername] = useState("");
+  const [audience, setAudience] = useState(
+    !credentialMode && audiences.length === 1 ? audiences[0].name : "",
+  );
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
@@ -22,19 +31,19 @@ export function ViewerLoginForm({ audiences, next }: Props) {
 
   // 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.
+  // doesn't flash for the "Select audience..." state. Credential mode always
+  // takes a password.
   const selected = audiences.find((a) => a.name === audience);
-  const needsPassword = selected ? selected.hasPassword !== false : true;
+  const needsPassword = credentialMode || (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: needsPassword ? password : "",
-    };
+    const body: { audience?: string; username?: string; password: string; next?: string } = credentialMode
+      ? { username: username.trim().toLowerCase(), password }
+      : { audience, password: needsPassword ? password : "" };
     if (next) body.next = next;
 
     try {
@@ -62,12 +71,23 @@ export function ViewerLoginForm({ audiences, next }: Props) {
   return (
     <div className="mx-auto max-w-sm">
       <form onSubmit={handleSubmit} className="space-y-4">
-        <Select
-          label="Audience"
-          value={audience}
-          onChange={setAudience}
-          options={audienceOptions}
-        />
+        {credentialMode ? (
+          <Input
+            label="Username"
+            value={username}
+            onChange={setUsername}
+            autoComplete="username"
+            autoCapitalize="none"
+            spellCheck={false}
+          />
+        ) : (
+          <Select
+            label="Audience"
+            value={audience}
+            onChange={setAudience}
+            options={audienceOptions}
+          />
+        )}
 
         {needsPassword && (
           <PasswordInput
@@ -86,7 +106,7 @@ export function ViewerLoginForm({ audiences, next }: Props) {
           type="submit"
           variant="brand"
           size="md"
-          disabled={loading || !audience}
+          disabled={loading || (credentialMode ? username.trim().length === 0 : !audience)}
           isLoading={loading}
           loadingLabel="Verifying..."
           className="w-full"

package/src/lib/audience-overview.ts

@@ -0,0 +1,110 @@
+/**
+ * What each audience can actually see. Powers the Audience Details page, which
+ * answers "if I give a partner this password, what do they get?".
+ *
+ * Pure and view-agnostic: section labels/thumbnails are resolved by the caller
+ * (they need the section registry and the media provider) and passed in, so this
+ * stays trivially testable and ships no registry into viewer JS.
+ */
+import type { SiteIndex } from "../schemas/site-config";
+import { audiencePasses, pageDisplayTitle } from "./pages";
+import type { ThumbView } from "./thumb-views";
+
+/** Caller-resolved presentation for one section. */
+export interface SectionDisplay {
+  label: string;
+  typeLabel: string;
+  thumbnails: ThumbView[];
+}
+
+export interface OverviewSection extends SectionDisplay {
+  id: string;
+  available: boolean;
+  /** Live-but-draft sections are invisible to EVERY audience, not just this one. */
+  draft: boolean;
+}
+
+export interface OverviewPage {
+  id: string;
+  title: string;
+  slug: string;
+  href: string;
+  /** Live but off the sidebar — reachable by URL, so it counts as available. */
+  hiddenFromNav: boolean;
+  /** none = the page itself is gated away; partial = page in, some sections out. */
+  availability: "full" | "partial" | "none";
+  sections: OverviewSection[];
+}
+
+export interface AudienceOverview {
+  audience: string;
+  pages: OverviewPage[];
+  pagesAvailable: number;
+  pagesTotal: number;
+  sectionsAvailable: number;
+  sectionsTotal: number;
+}
+
+/**
+ * Availability for one audience across the whole site.
+ *
+ * Archived pages are excluded outright (nobody can reach them). Draft sections
+ * are listed as unavailable but flagged, so a page reading "3 of 8" is not
+ * mistaken for an access problem.
+ *
+ * The cascade matters: a section whose own access allows this audience is still
+ * unavailable inside a page that gates them out. Page access wins.
+ */
+export function buildAudienceOverview(
+  index: SiteIndex,
+  display: (sectionId: string) => SectionDisplay,
+  audience: string,
+): AudienceOverview {
+  const pages: OverviewPage[] = [];
+  let sectionsAvailable = 0;
+  let sectionsTotal = 0;
+  let pagesAvailable = 0;
+
+  for (const page of index.pages) {
+    if (page.status === "archived") continue;
+    const pageOpen = audiencePasses(page.access, audience);
+    if (pageOpen) pagesAvailable++;
+
+    const sections: OverviewSection[] = [];
+    for (const id of page.order) {
+      const meta = index.sections[id];
+      // Not in the index — the loader would drop it too; nothing to report.
+      if (!meta) continue;
+      if (meta.status === "archived") continue;
+      const draft = meta.status !== "live";
+      const available = pageOpen && !draft && audiencePasses(meta.access, audience);
+      sectionsTotal++;
+      if (available) sectionsAvailable++;
+      sections.push({ id, available, draft, ...display(id) });
+    }
+
+    const availableHere = sections.filter((s) => s.available).length;
+    pages.push({
+      id: page.id,
+      title: pageDisplayTitle(page.title),
+      slug: page.slug,
+      href: page.slug === "" ? "/" : `/${page.slug}`,
+      hiddenFromNav: !page.showInNav,
+      availability: !pageOpen
+        ? "none"
+        : availableHere === sections.length
+          ? "full"
+          : "partial",
+      sections,
+    });
+  }
+
+  return {
+    audience,
+    pages,
+    pagesAvailable,
+    pagesTotal: pages.length,
+    sectionsAvailable,
+    sectionsTotal,
+  };
+}

package/src/lib/audience-secret.ts

@@ -0,0 +1,99 @@
+/**
+ * Reversible storage for audience (viewer) passwords, so an editor or the
+ * default audience can be SHOWN an existing password rather than only replacing
+ * it. `password_hash` is bcrypt and one-way, so a sealed copy is stored beside
+ * it and opened on demand.
+ *
+ * The key is derived from the site's own SESSION_SECRET via HKDF — no new env
+ * var, no provisioner change, and (in platform mode) the shared Supabase project
+ * stores only a blob it cannot open, because the secret lives in the client
+ * site's Netlify env alone.
+ *
+ * This is envelope encryption with a derived key, NOT a KMS: whoever holds both
+ * SESSION_SECRET and the row recovers the password. That is the same secret that
+ * already signs every session cookie, and the protected value is a shared
+ * viewing password — an accepted bar, stated so it is never mistaken for more.
+ *
+ * WebCrypto only, no `node:crypto` at module scope: auth-supabase/supabase.ts
+ * value-imports this and is browser-reachable via portal.config.mjs (see
+ * .claude/rules/dev-server-symlinks.md and the sigv4.ts precedent).
+ */
+import { requireSessionSecret } from "../auth/security";
+
+/** Domain separation: this key must never coincide with a future HKDF use. */
+const INFO = "drawnagency:audience-password:v1";
+const VERSION = "v1";
+const IV_BYTES = 12;
+
+const enc = new TextEncoder();
+const dec = new TextDecoder();
+
+function toBase64Url(bytes: Uint8Array): string {
+  let binary = "";
+  for (const b of bytes) binary += String.fromCharCode(b);
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+
+function fromBase64Url(value: string): Uint8Array {
+  const padded = value.replace(/-/g, "+").replace(/_/g, "/");
+  const binary = atob(padded + "=".repeat((4 - (padded.length % 4)) % 4));
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+  return bytes;
+}
+
+// Derived per call rather than memoised: HKDF is cheap next to the bcrypt
+// compare that always accompanies it, and a cache would outlive a rotated
+// SESSION_SECRET within a warm serverless process.
+async function deriveKey(): Promise<CryptoKey> {
+  const base = await crypto.subtle.importKey(
+    "raw",
+    requireSessionSecret() as BufferSource,
+    "HKDF",
+    false,
+    ["deriveKey"],
+  );
+  return crypto.subtle.deriveKey(
+    { name: "HKDF", hash: "SHA-256", salt: new Uint8Array(0), info: enc.encode(INFO) },
+    base,
+    { name: "AES-GCM", length: 256 },
+    false,
+    ["encrypt", "decrypt"],
+  );
+}
+
+/** Seal a plaintext password into `v1.<iv>.<ciphertext>` (base64url parts). */
+export async function sealAudiencePassword(password: string): Promise<string> {
+  const iv = crypto.getRandomValues(new Uint8Array(IV_BYTES));
+  const ciphertext = await crypto.subtle.encrypt(
+    { name: "AES-GCM", iv: iv as BufferSource },
+    await deriveKey(),
+    enc.encode(password) as BufferSource,
+  );
+  return `${VERSION}.${toBase64Url(iv)}.${toBase64Url(new Uint8Array(ciphertext))}`;
+}
+
+/**
+ * Open a sealed password, or null when it cannot be trusted — unknown version,
+ * malformed parts, tampered ciphertext (GCM auth failure), or a rotated
+ * SESSION_SECRET. Callers treat null as "not revealable" and never as an error;
+ * they must ALSO verify the result against the bcrypt hash, since a valid seal
+ * can still be stale (a password changed by a writer that skipped the cipher).
+ */
+export async function openAudiencePassword(sealed: string | null | undefined): Promise<string | null> {
+  if (!sealed) return null;
+  const parts = sealed.split(".");
+  if (parts.length !== 3 || parts[0] !== VERSION) return null;
+  try {
+    const iv = fromBase64Url(parts[1]);
+    if (iv.byteLength !== IV_BYTES) return null;
+    const plain = await crypto.subtle.decrypt(
+      { name: "AES-GCM", iv: iv as BufferSource },
+      await deriveKey(),
+      fromBase64Url(parts[2]) as BufferSource,
+    );
+    return dec.decode(plain);
+  } catch {
+    return null;
+  }
+}

package/src/lib/events.ts

@@ -36,3 +36,6 @@ export const historyRestoreFailedEvent = createEvent<{ message: string }>("histo
 export const editorDirtyEvent = createEvent<{ hasUnsavedChanges: boolean }>("editor-dirty");
 export const siteNavChangeEvent = createEvent<SiteNav>("sitenavchange-v2");
 export const pageSelectEvent = createEvent<string>("pageselect");
+/** Nav → EditorShell: open the Audience Details surface inside the editor, so
+ *  editors keep the toolbar instead of navigating out to the /audiences route. */
+export const audienceDetailsEvent = createEvent<void>("audiencedetailsopen");

package/src/lib/nav.ts

@@ -1,6 +1,6 @@
 import type { LoadedSection } from "./loader";
 import { getSection, type SectionRegistry } from "./registry";
-import { audiencePasses, homePage, pageDisplayTitle } from "./pages";
+import { audiencePasses, pageDisplayTitle } from "./pages";
 import { navEntries } from "./nav-tree";
 import type { SiteIndex } from "../schemas/site-config";
 import type { SiteDocument } from "./documents";
@@ -156,7 +156,11 @@ export function generateSiteNav(opts: {
   documents?: SiteDocument[];
 }): SiteNav {
   const { index, activeSections, activePageId, mode, audience, registry, documents } = opts;
-  const active = activePageId ?? homePage(index).id;
+  // null means NO page is active — not "default to home". Surfaces that are not
+  // a page (the Audience Details route and its in-editor twin) rely on that: a
+  // page must not keep its highlight while you are somewhere else, or the
+  // sidebar claims you are in two places at once.
+  const active = activePageId;
   const byId = new Map(index.pages.map((p) => [p.id, p]));
 
   const toNavItem = (p: (typeof index.pages)[number]): PageNavItem => ({

package/src/lib/thumb-views.ts

@@ -0,0 +1,28 @@
+import type { Thumbnail } from "./registry";
+import { getMediaProvider } from "../media";
+import type { MediaManifest } from "../media/types";
+
+/**
+ * A section thumbnail with its media reference already resolved to a URL, so the
+ * component rendering it needs neither the registry nor the media provider. The
+ * Audience Details page resolves these server-side for exactly that reason.
+ */
+export type ThumbView =
+  | { kind: "color"; value: string }
+  | { kind: "image"; src: string | null; alt: string };
+
+function resolveThumbnailSrc(thumb: Thumbnail & { type: "image" }, manifest: MediaManifest): string | null {
+  const item = manifest.images[thumb.src];
+  if (!item) return null;
+  const resolved = getMediaProvider().resolve(item, [200]);
+  if (!resolved) return null;
+  return resolved.tag === "img" || resolved.tag === "video" ? resolved.src : null;
+}
+
+export function toThumbViews(thumbnails: Thumbnail[], manifest: MediaManifest): ThumbView[] {
+  return thumbnails.map((thumb) =>
+    thumb.type === "color"
+      ? { kind: "color", value: thumb.value }
+      : { kind: "image", src: resolveThumbnailSrc(thumb, manifest), alt: thumb.alt ?? "" },
+  );
+}