@drawnagency/primitives 0.1.105 → 0.1.107

package/src/components/shell/SectionTypePicker.tsx

@@ -13,10 +13,19 @@ interface SectionTypePickerProps {
   containerRef?: RefObject<HTMLElement | null>;
 }
 
+const BUTTON_CLASS =
+  "cursor-pointer flex items-center gap-3 rounded-lg border border-base-200 bg-base px-4 py-3 text-left text-sm text-base-contrast-light transition-colors hover:border-base-300 hover:bg-base-accent hover:text-base-contrast";
+
 export function SectionTypePicker({ types, onSelect, onClose, containerRef }: SectionTypePickerProps) {
   const panelRef = useRef<HTMLDivElement>(null);
   const dismissRef = containerRef ?? panelRef;
 
+  // Container is a layout choice rather than a content block, so it gets its own
+  // full-width row above a divider. It's absent from the container child picker
+  // (one level of nesting), in which case there's no lead row and no divider.
+  const lead = types.find((t) => t.type === "container");
+  const rest = types.filter((t) => t !== lead);
+
   useEffect(() => {
     function handleMouseDown(e: MouseEvent) {
       if (dismissRef.current && !dismissRef.current.contains(e.target as Node)) {
@@ -32,10 +41,27 @@ export function SectionTypePicker({ types, onSelect, onClose, containerRef }: Se
       ref={panelRef}
       className="z-50 mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3"
     >
-      {types.map(({ type, label, icon }) => (
+      {lead && (
+        <>
+          <button
+            key={lead.type}
+            className={`${BUTTON_CLASS} col-span-full`}
+            onClick={() => onSelect(lead.type)}
+          >
+            {lead.icon && (
+              <span className="flex h-5 w-5 shrink-0 items-center justify-center text-base-contrast-light/60">
+                {lead.icon}
+              </span>
+            )}
+            <span>{lead.label}</span>
+          </button>
+          <hr className="col-span-full border-base-200" />
+        </>
+      )}
+      {rest.map(({ type, label, icon }) => (
         <button
           key={type}
-          className="cursor-pointer flex items-center gap-3 rounded-lg border border-base-200 bg-base px-4 py-3 text-left text-sm text-base-contrast-light transition-colors hover:border-base-300 hover:bg-base-accent hover:text-base-contrast"
+          className={BUTTON_CLASS}
           onClick={() => onSelect(type)}
         >
           {icon && (

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/container-ops.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import type { Section } from "../schemas/sections";
 import { getAllSections } from "./registry";
+import { sortInsertMenuOptions } from "./insert-menu";
 
 interface ContainerContent {
   columns: number;
@@ -40,9 +41,11 @@ export function reorderChild(container: Section, from: number, to: number): Sect
  * single, testable source of truth (the container toolbar's "+" picker uses it).
  */
 export function childInsertableTypes(): { type: string; label: string; icon: ReactNode }[] {
-  return getAllSections()
-    .filter((d) => d.type !== "container" && d.type !== "spacer")
-    .map((d) => ({ type: d.type, label: d.label, icon: d.icon }));
+  return sortInsertMenuOptions(
+    getAllSections()
+      .filter((d) => d.type !== "container" && d.type !== "spacer")
+      .map((d) => ({ type: d.type, label: d.label, icon: d.icon })),
+  );
 }
 
 export function insertChildAt(container: Section, child: Section, index: number): Section {

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/insert-menu.ts

@@ -12,9 +12,43 @@ export interface InsertMenuOption {
   icon?: ReactNode;
 }
 
-/** Every non-spacer section type, followed by presets contributed by registered
- *  sections. Presets appear only when their owning section is registered, so a
- *  core-only build (no brand-guide sections) shows no brand-guide presets. */
+/** Authored display order for the Add-section menu, most-reached-for first.
+ *  `container` leads because the picker gives it its own full-width row above a
+ *  divider. Anything absent — client-repo custom sections and their presets —
+ *  sorts alphabetically after these. */
+const INSERT_MENU_ORDER = [
+  "container",
+  "link_heading",
+  "sub_heading",
+  "sub_sub_heading",
+  "prose",
+  "media",
+  "video",
+  "button",
+  "colors",
+  "document",
+  "icon_list",
+  `${PRESET_PREFIX}do_dont_list`,
+  "dodont_media",
+];
+
+/** Sort insert-menu entries into `INSERT_MENU_ORDER`, with unlisted entries
+ *  (custom sections) alphabetical by label at the end. Pure; returns a copy. */
+export function sortInsertMenuOptions<T extends InsertMenuOption>(options: T[]): T[] {
+  return [...options].sort((a, b) => {
+    const ai = INSERT_MENU_ORDER.indexOf(a.type);
+    const bi = INSERT_MENU_ORDER.indexOf(b.type);
+    if (ai !== -1 && bi !== -1) return ai - bi;
+    if (ai !== -1) return -1;
+    if (bi !== -1) return 1;
+    return a.label.localeCompare(b.label);
+  });
+}
+
+/** Every non-spacer section type, plus presets contributed by registered
+ *  sections, in `INSERT_MENU_ORDER`. Presets appear only when their owning
+ *  section is registered, so a core-only build (no brand-guide sections) shows
+ *  no brand-guide presets. */
 export function buildInsertMenuOptions(sections: SectionDefinition[]): InsertMenuOption[] {
   const typeOptions = sections
     .filter((def) => def.type !== "spacer")
@@ -22,7 +56,7 @@ export function buildInsertMenuOptions(sections: SectionDefinition[]): InsertMen
   const presetOptions = sections
     .flatMap((def) => def.presets ?? [])
     .map((p) => ({ type: `${PRESET_PREFIX}${p.id}`, label: p.label, icon: p.icon }));
-  return [...typeOptions, ...presetOptions];
+  return sortInsertMenuOptions([...typeOptions, ...presetOptions]);
 }
 
 /** Resolve an Add-menu selection to ready-to-insert content. `newId` mints ids for

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 ?? "" },
+  );
+}