@drawnagency/primitives 0.1.109 → 0.1.111

package/src/components/primitives/useEditableCollection.ts

@@ -40,79 +40,99 @@ export function useEditableCollection<T>({
     wrapItems(items)
   );
   const prevItemsRef = useRef(items);
+  // State updaters must be pure. Every mutator below used to call the parent's
+  // onChange from inside setWrappedItems, so React 18/19 StrictMode's dev
+  // double-invoke fired it twice (deleting one icon-list row emitted two
+  // changes), and React is free to re-run or discard an updater at any time.
+  // Mirroring the list here lets each mutator compute `next` outside the
+  // updater; the eager write keeps two mutations in one tick consistent.
+  const wrappedRef = useRef(wrappedItems);
+  wrappedRef.current = wrappedItems;
+
+  const commit = useCallback(
+    (next: WrappedItem<T>[]) => {
+      wrappedRef.current = next;
+      setWrappedItems(next);
+      onChange(next.map((w) => w.data));
+    },
+    [onChange],
+  );
 
   useEffect(() => {
     if (items === prevItemsRef.current) return;
     prevItemsRef.current = items;
 
     setWrappedItems((prev) => {
-      return items.map((data, i) => {
-        if (i < prev.length) {
-          return { id: prev[i].id, data };
-        }
-        return { id: uid(), data };
+      // Identity first, position only for the remainder. Keyed purely by index,
+      // a parent-side removal or reorder re-pointed every id one slot over:
+      // React reused the wrong row's DOM, so the focused input, the in-progress
+      // edit and the drag registration all belonged to a different item than
+      // the one now rendered there. Pure identity would be worse in the other
+      // direction — an in-place edit hands back a fresh object for that row, and
+      // minting a new id there remounts the field the user is typing into.
+      const taken = new Array<boolean>(prev.length).fill(false);
+      const slotsByData = new Map<unknown, number[]>();
+      prev.forEach((w, i) => {
+        const bucket = slotsByData.get(w.data);
+        if (bucket) bucket.push(i);
+        else slotsByData.set(w.data, [i]);
       });
+
+      const matched = items.map((data) => {
+        const slot = slotsByData.get(data)?.shift();
+        if (slot === undefined) return null;
+        taken[slot] = true;
+        return prev[slot].id;
+      });
+
+      // Unmatched rows (edited in place, or genuinely new) take the surviving
+      // ids in their original order, which for a pure edit is the same id the
+      // row already had.
+      const spare = prev.filter((_, i) => !taken[i]).map((w) => w.id);
+      let next = 0;
+      return items.map((data, i) => ({ id: matched[i] ?? spare[next++] ?? uid(), data }));
     });
   }, [items]);
 
   const onReorder = useCallback(
     (fromIndex: number, toIndex: number) => {
-      setWrappedItems((prev) => {
-        const next = [...prev];
-        const [moved] = next.splice(fromIndex, 1);
-        next.splice(toIndex, 0, moved);
-        onChange(next.map((w) => w.data));
-        return next;
-      });
+      const next = [...wrappedRef.current];
+      const [moved] = next.splice(fromIndex, 1);
+      next.splice(toIndex, 0, moved);
+      commit(next);
     },
-    [onChange]
+    [commit]
   );
 
   const onAdd = useCallback(() => {
-    const newItem = createItem();
-    setWrappedItems((prev) => {
-      const next = [...prev, { id: uid(), data: newItem }];
-      onChange(next.map((w) => w.data));
-      return next;
-    });
-  }, [createItem, onChange]);
+    commit([...wrappedRef.current, { id: uid(), data: createItem() }]);
+  }, [createItem, commit]);
 
   const onInsert = useCallback(
     (index: number) => {
-      const newItem = createItem();
-      setWrappedItems((prev) => {
-        const next = [...prev];
-        next.splice(index, 0, { id: uid(), data: newItem });
-        onChange(next.map((w) => w.data));
-        return next;
-      });
+      const next = [...wrappedRef.current];
+      next.splice(index, 0, { id: uid(), data: createItem() });
+      commit(next);
     },
-    [createItem, onChange],
+    [createItem, commit],
   );
 
   // Insert an externally-provided item (e.g. one dragged in from another grid)
   // at a specific index. Distinct from onInsert, which creates a blank item.
   const onInsertItem = useCallback(
     (index: number, data: T) => {
-      setWrappedItems((prev) => {
-        const next = [...prev];
-        next.splice(index, 0, { id: uid(), data });
-        onChange(next.map((w) => w.data));
-        return next;
-      });
+      const next = [...wrappedRef.current];
+      next.splice(index, 0, { id: uid(), data });
+      commit(next);
     },
-    [onChange]
+    [commit]
   );
 
   const onRemove = useCallback(
     (id: string) => {
-      setWrappedItems((prev) => {
-        const next = prev.filter((w) => w.id !== id);
-        onChange(next.map((w) => w.data));
-        return next;
-      });
+      commit(wrappedRef.current.filter((w) => w.id !== id));
     },
-    [onChange]
+    [commit]
   );
 
   return { wrappedItems, onReorder, onAdd, onInsert, onInsertItem, onRemove };

package/src/components/primitives/useEditablePlainText.ts

@@ -29,16 +29,37 @@ export function useEditablePlainText({
     }
   }, [propValue]);
 
+  // Latest onChange, so committing on every keystroke doesn't need it in a dep
+  // array (the parent re-creates it inline every render).
+  const onChangeRef = useRef(onChange);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
+  // Commit on every input, not only on blur — the same contract
+  // useEditableRichText adopted, and for the same reason: pressing ⌘S (or any
+  // keyboard save/publish, or an autosave flush) without leaving the field
+  // flushes persistence before blur ever fires, so a blur-only commit silently
+  // drops the in-progress edit. Deliberately NOT debounced: any debounce window
+  // is the same bug, just narrower.
   const handleInput = useCallback((text: string) => {
     setValue(text);
+    if (text !== lastPropValue.current) {
+      lastPropValue.current = text;
+      onChangeRef.current(text);
+    }
   }, []);
 
+  // Now a flush rather than the only commit: a no-op unless something changed
+  // `value` without routing through handleInput. Compared against the last
+  // COMMITTED text rather than `propValue`, so a parent that doesn't echo the
+  // value straight back doesn't get the same edit twice.
   const handleBlur = useCallback(() => {
-    if (value !== propValue) {
-      onChange(value);
+    if (value !== lastPropValue.current) {
       lastPropValue.current = value;
+      onChangeRef.current(value);
     }
-  }, [value, propValue, onChange]);
+  }, [value]);
 
   return {
     value,

package/src/components/sections/IconList/index.tsx

@@ -80,7 +80,14 @@ export default defineSection({
       showLabel={options?.showLabel as boolean}
       stackText={options?.stackText as boolean}
       dodont={options?.dodont as "do" | "dont" | undefined}
-      onChange={onChange ? (c) => onChange(c as typeof content) : undefined}
+      // IconList rebuilds its options from the four props above, which inside a
+      // container are childDefaults merged with the child's own options — writing
+      // that back would materialise the container's defaults onto the child (it
+      // then stops following later default changes) and drop any option key
+      // outside those four. Only items change here, so keep the stored options.
+      onChange={
+        onChange ? (c) => onChange({ ...(c as typeof content), options: content.options }) : undefined
+      }
     />
   ),
   defaults: () => ({

package/src/components/sections/Prose/Prose.tsx

@@ -1,5 +1,5 @@
 import { EditableRichText } from "../../primitives/EditableRichText";
-import { sanitizeHtml } from "../../../lib/sanitize";
+import { useSanitizedHtml } from "../../../hooks/useSanitizedHtml";
 import type { SectionContent } from "../../../schemas/sections";
 
 interface Props {
@@ -8,6 +8,8 @@ interface Props {
 }
 
 export default function Prose({ body, onChange }: Props) {
+  const safeHtml = useSanitizedHtml(body);
+
   if (onChange) {
     return (
       <div className="prose-content">
@@ -29,7 +31,7 @@ export default function Prose({ body, onChange }: Props) {
   return (
     <div
       className="prose-content"
-      dangerouslySetInnerHTML={{ __html: sanitizeHtml(body) }}
+      dangerouslySetInnerHTML={{ __html: safeHtml }}
     />
   );
 }

package/src/components/shared/FontPicker.tsx

@@ -22,17 +22,21 @@ function displayValue(value: string): string {
   return value === "system-ui" ? "System Default" : value;
 }
 
-function loadFontPreview(families: string[]) {
-  if (families.length === 0) return;
+// Returns the element it added, so the picker can take it back down. These
+// stylesheets exist only for the dropdown's own preview list — the site's
+// selected fonts load from site-config's `googleFontsUrl`, not from here.
+function loadFontPreview(families: string[]): HTMLLinkElement | null {
+  if (families.length === 0) return null;
   const params = families.map((f) => `family=${f.replace(/ /g, "+")}:wght@400;700`).join("&");
   const href = `https://fonts.googleapis.com/css2?${params}&display=swap`;
 
-  if (document.querySelector(`link[href="${href}"]`)) return;
+  if (document.querySelector(`link[href="${href}"]`)) return null;
 
   const link = document.createElement("link");
   link.rel = "stylesheet";
   link.href = href;
   document.head.appendChild(link);
+  return link;
 }
 
 export function FontPicker({ label, value, onChange }: FontPickerProps) {
@@ -47,6 +51,7 @@ export function FontPicker({ label, value, onChange }: FontPickerProps) {
   const loadedRef = useRef(new Set<string>());
   const batchRef = useRef<string[]>([]);
   const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const previewLinksRef = useRef<HTMLLinkElement[]>([]);
   const debounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const [dropdownPos, setDropdownPos] = useState<{ top: number; left: number; width: number }>({
     top: 0,
@@ -84,16 +89,23 @@ export function FontPicker({ label, value, onChange }: FontPickerProps) {
     clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => {
       const batch = batchRef.current.splice(0);
-      if (batch.length > 0) loadFontPreview(batch);
+      if (batch.length === 0) return;
+      const link = loadFontPreview(batch);
+      if (link) previewLinksRef.current.push(link);
     }, 100);
   }, []);
 
   const observerRef = useRef<IntersectionObserver | undefined>(undefined);
 
   useEffect(() => {
+    const links = previewLinksRef.current;
     return () => {
       clearTimeout(timerRef.current);
       clearTimeout(debounceRef.current);
+      // Scrolling the ~1,500-font list loads a batch every 100ms, and every one
+      // of those left a <link> (and its Google Fonts request) behind for the
+      // rest of the session.
+      for (const link of links.splice(0)) link.remove();
     };
   }, []);
 

package/src/components/shared/HistoryChangesModal.tsx

@@ -58,7 +58,18 @@ interface HistoryChangesModalProps {
 }
 
 // Commit ranges are immutable, so a fetched summary stays valid for the session.
+// Bounded with FIFO eviction: each entry holds every changed section's title, and
+// browsing a long history otherwise accumulated them all until reload.
 const cache = new Map<string, ChangeSummary>();
+const CACHE_LIMIT = 50;
+
+function cacheSummary(key: string, summary: ChangeSummary): void {
+  if (cache.size >= CACHE_LIMIT) {
+    const oldest = cache.keys().next().value;
+    if (oldest !== undefined) cache.delete(oldest);
+  }
+  cache.set(key, summary);
+}
 
 /**
  * Bump whenever the response shape or the meaning of a field changes.
@@ -133,7 +144,7 @@ export function HistoryChangesModal({
         const res = await fetch(url);
         if (!res.ok) throw new Error(String(res.status));
         const data = (await res.json()) as ChangeSummary;
-        cache.set(url, data);
+        cacheSummary(url, data);
         if (live) setSummary(data);
       } catch {
         if (live) setError(true);

package/src/components/shared/HistoryPopover.tsx

@@ -80,25 +80,39 @@ export function HistoryPopover({ onSelectCommit, hasUnsavedChanges = false }: Hi
   }), []);
 
   useEffect(() => {
+    const controller = new AbortController();
     let live = true;
     (async () => {
       const all: HistoryCommit[] = [];
       try {
         for (let page = 1; page <= MAX_PAGES; page++) {
-          const res = await fetch(`/api/history?page=${page}&per_page=${PER_PAGE}`);
+          const res = await fetch(`/api/history?page=${page}&per_page=${PER_PAGE}`, {
+            signal: controller.signal,
+          });
           if (!res.ok) throw new Error(`Failed to load history: ${res.status}`);
           const data = (await res.json()) as { items: HistoryCommit[] };
           all.push(...data.items);
+          // Render each page as it lands. These requests are sequential, so waiting
+          // for all ten left the popover on "Loading history…" for the whole run —
+          // and the first page is already more than fills the visible tree.
+          if (live) {
+            setCommits([...all]);
+            setLoading(false);
+          }
           if (data.items.length < PER_PAGE) break;
         }
-        if (live) setCommits(all);
       } catch (err) {
-        if (live) setError(err instanceof Error ? err.message : "Failed to load history");
+        if (!live || controller.signal.aborted) return;
+        // A later page failing is not worth throwing away the pages that landed:
+        // the error view replaces the tree entirely. Keep what we have instead.
+        if (all.length === 0) setError(err instanceof Error ? err.message : "Failed to load history");
       } finally {
         if (live) setLoading(false);
       }
     })();
-    return () => { live = false; };
+    // Closing the popover unmounts this; without the abort the remaining pages
+    // kept fetching against GitHub's rate limit for nothing.
+    return () => { live = false; controller.abort(); };
   }, []);
 
   const groups = useMemo(() => buildHistoryTree(commits, new Date()), [commits]);

package/src/components/shared/Navigation.tsx

@@ -110,12 +110,27 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
     }
   }, [identity?.kind]);
 
+  // The transition-suppression class is removed on a timer; unmounting mid-flight
+  // (a navigation right after a toggle) would otherwise leave `theme-changing`
+  // pinned on <html>, killing every transition on the page.
+  const themeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => () => {
+    if (themeTimerRef.current) {
+      clearTimeout(themeTimerRef.current);
+      document.documentElement.classList.remove("theme-changing");
+    }
+  }, []);
+
   const handleThemeToggle = useCallback((next: boolean) => {
     const root = document.documentElement;
     root.classList.add("theme-changing");
     root.classList.toggle("dark", next);
     localStorage.setItem("theme", next ? "dark" : "light");
-    setTimeout(() => root.classList.remove("theme-changing"), 200);
+    if (themeTimerRef.current) clearTimeout(themeTimerRef.current);
+    themeTimerRef.current = setTimeout(() => {
+      themeTimerRef.current = null;
+      root.classList.remove("theme-changing");
+    }, 200);
   }, []);
 
   // The active page can live in any tier (editors navigate to hidden and
@@ -299,7 +314,10 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
         </button>
       ) : (
         <a
-          href={`#doc=${doc.sectionId}`}
+          // Encoded, like openDocFile's own hash write — readHash decodes, so an
+          // unencoded writer and a decoding reader disagree on any id that needs
+          // escaping.
+          href={`#doc=${encodeURIComponent(doc.sectionId)}`}
           onClick={() => setIsOpen(false)}
           className="block w-full rounded-inner px-3 py-2 text-left text-sm font-bold text-base-contrast transition-colors hover:text-primary"
         >

package/src/components/shared/Popover.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useLayoutEffect, useRef, useState, type ReactNode, type RefObject } from "react";
 import { createPortal } from "react-dom";
-import { useFocusTrap } from "../../hooks/useFocusTrap";
+import { useInitialFocus } from "../../hooks/useFocusTrap";
 import { cn } from "../../lib/cn";
 
 interface PopoverProps {
@@ -35,10 +35,14 @@ export function Popover({
   const [resolvedAlign, setResolvedAlign] = useState<"start" | "end">("start");
   const [fixedPos, setFixedPos] = useState<{ left: number; top?: number; bottom?: number } | null>(null);
 
-  // In portal mode the panel isn't rendered until it's been measured, so the
-  // trap must activate on that second commit — useFocusTrap bails on a null ref
-  // and only re-runs when `active` changes.
-  useFocusTrap(panelRef, isOpen && (!portal || fixedPos !== null));
+  // Focus the first control on open and restore it on close, but do NOT trap
+  // Tab: this surface declares aria-modal="false", and trapping left a keyboard
+  // user with no way out of a popover that isn't modal. Dismissal stays with
+  // Escape and outside-mousedown, both below.
+  // In portal mode the panel isn't rendered until it's been measured, so this
+  // activates on that second commit — the hook bails on a null ref and only
+  // re-runs when `active` changes.
+  useInitialFocus(panelRef, isOpen && (!portal || fixedPos !== null));
 
   // Track the anchor while portalled: the panel is out of normal flow, so it
   // has to be repositioned on resize and on any ancestor's scroll.

package/src/components/shell/AudienceAddForm.tsx

@@ -1,24 +1,19 @@
 import { useState, type FormEvent } from "react";
 import { AudienceColorSchema } from "../../schemas/audience";
 import { Input } from "../shared/Input";
-import { PasswordInput } from "../shared/PasswordInput";
 import { Button } from "../shared/Button";
 import { ColorPicker } from "../shared/ColorPicker";
 
 interface Props {
-  onSubmit: (data: { displayName: string; color: string | null; password: string }) => Promise<void>;
+  onSubmit: (data: { displayName: string; color: string | null }) => Promise<void>;
   onCancel: () => void;
-  /** Credential mode: an audience has no password of its own — access comes from
-   *  the named sign-ins added to it afterwards, so the field is hidden. */
-  requirePassword?: boolean;
 }
 
 const DEFAULT_COLOR = "#3b82f6";
 
-export function AudienceAddForm({ onSubmit, onCancel, requirePassword = true }: Props) {
+export function AudienceAddForm({ onSubmit, onCancel }: Props) {
   const [name, setName] = useState("");
   const [color, setColor] = useState(DEFAULT_COLOR);
-  const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [submitting, setSubmitting] = useState(false);
 
@@ -35,14 +30,9 @@ export function AudienceAddForm({ onSubmit, onCancel, requirePassword = true }:
       setError("Invalid color");
       return;
     }
-    if (requirePassword && password.length === 0) {
-      setError("Password is required");
-      return;
-    }
-
     setSubmitting(true);
     try {
-      await onSubmit({ displayName: name, color, password });
+      await onSubmit({ displayName: name, color });
     } catch (e) {
       setError(e instanceof Error ? e.message : "Add failed");
     } finally {
@@ -64,19 +54,9 @@ export function AudienceAddForm({ onSubmit, onCancel, requirePassword = true }:
             value={name}
             onChange={setName}
           />
-          {requirePassword ? (
-            <PasswordInput
-              label="Password"
-              value={password}
-              onChange={setPassword}
-              autoComplete="new-password"
-              showToggle
-            />
-          ) : (
-            <p className="text-[11px] text-base-contrast-light">
-              Add sign-ins to this audience once it exists — that is what grants access.
-            </p>
-          )}
+          <p className="text-[11px] text-base-contrast-light">
+            Add sign-ins to this audience once it exists — that is what grants access.
+          </p>
         </div>
       </div>
       {error && <p className="text-xs text-red-600">{error}</p>}

package/src/components/shell/AudienceRow.tsx

@@ -1,7 +1,6 @@
 import { useState } from "react";
 import type { Audience } from "../../auth/types";
 import { Input } from "../shared/Input";
-import { PasswordInput } from "../shared/PasswordInput";
 import { Button } from "../shared/Button";
 import { ColorPicker } from "../shared/ColorPicker";
 import { CredentialList } from "./CredentialList";
@@ -11,10 +10,10 @@ interface Props {
   audience: Audience;
   isDefault: boolean;
   canMutate: boolean;
-  onSave: (patch: { displayName?: string; color?: string | null; password?: string }) => Promise<void>;
+  onSave: (patch: { displayName?: string; color?: string | null }) => Promise<void>;
   onDelete: () => Promise<void>;
-  /** Named sign-ins for this audience. Undefined in `.env`/audience mode, where
-   *  the row keeps its single audience-level password field. */
+  /** Named sign-ins for this audience. Undefined in `.env` mode, whose audiences
+   *  come from environment variables and cannot be mutated at all. */
   credentials?: ViewerCredential[];
   credentialActions?: {
     create: (data: { username: string; label: string | null; password: string }) => Promise<void>;
@@ -35,21 +34,18 @@ export function AudienceRow({
   credentials,
   credentialActions,
 }: Props) {
-  // Credential mode: access comes from named sign-ins, so the row's own password
-  // field is gone. The two are never shown together.
   const credentialMode = Boolean(credentials && credentialActions);
   const [isEditing, setIsEditing] = useState(false);
   const [draftDisplayName, setDraftDisplayName] = useState(audience.displayName);
   const [draftColor, setDraftColor] = useState(audience.color ?? PLACEHOLDER_COLOR);
-  const [draftPassword, setDraftPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
+  const [confirmingRemove, setConfirmingRemove] = useState(false);
   const [saving, setSaving] = useState(false);
 
   function startEdit() {
     setIsEditing(true);
     setDraftColor(audience.color ?? PLACEHOLDER_COLOR);
     setDraftDisplayName(audience.displayName);
-    setDraftPassword("");
     setError(null);
   }
 
@@ -61,7 +57,7 @@ export function AudienceRow({
   async function save() {
     setError(null);
     setSaving(true);
-    const patch: { displayName?: string; color?: string | null; password?: string } = {};
+    const patch: { displayName?: string; color?: string | null } = {};
     if (draftDisplayName.trim().length === 0) {
       setError("Name is required");
       setSaving(false);
@@ -73,9 +69,6 @@ export function AudienceRow({
     if (draftColor !== (audience.color ?? PLACEHOLDER_COLOR)) {
       patch.color = draftColor;
     }
-    if (draftPassword.length > 0) {
-      patch.password = draftPassword;
-    }
     if (Object.keys(patch).length === 0) {
       setIsEditing(false);
       setSaving(false);
@@ -91,14 +84,11 @@ export function AudienceRow({
     }
   }
 
+  // In-app confirmation rather than window.confirm: the native dialog is
+  // unstyled, blocks the whole tab, and is suppressible by the browser — the
+  // same reason SiteSettingsUsers confirms revocation inline.
   async function remove() {
-    const signIns = audience.credentialCount;
-    if (!confirm(
-      `Remove audience "${audience.displayName}"?` +
-      (signIns > 0
-        ? `\n\nIts ${signIns === 1 ? "sign-in" : `${signIns} sign-ins`} will be removed too, locking out anyone using them.`
-        : ""),
-    )) return;
+    setConfirmingRemove(false);
     try {
       await onDelete();
     } catch (e) {
@@ -117,21 +107,6 @@ export function AudienceRow({
               value={draftDisplayName}
               onChange={setDraftDisplayName}
             />
-            {!credentialMode && (
-              <>
-                <PasswordInput
-                  label="New password"
-                  value={draftPassword}
-                  onChange={setDraftPassword}
-                  autoComplete="new-password"
-                  placeholder={audience.hasPassword ? "Leave blank to keep current" : "Required"}
-                  showToggle
-                />
-                <span className="block text-[11px] text-base-contrast-light">
-                  Passwords are hashed — the existing one can't be recovered, only replaced.
-                </span>
-              </>
-            )}
           </div>
         </div>
         {error && <p className="text-xs text-red-600">{error}</p>}
@@ -179,24 +154,39 @@ export function AudienceRow({
             {audience.credentialCount === 1 ? "1 sign-in" : `${audience.credentialCount} sign-ins`}
           </span>
         ) : audience.hasPassword ? (
+          // `.env` mode only. Its audiences are read-only here — the password
+          // lives in a VIEWER_<NAME>_PASSWORD environment variable.
           <span
             aria-label="Password is set"
-            title="Passwords are hashed and can't be shown. Edit to set a new one."
+            title="Set by an environment variable; it can't be read or changed from here."
             className="text-xs tracking-widest text-base-contrast-light"
           >
             ••••
           </span>
-        ) : canMutate ? (
-          <Button variant="ghost" onClick={startEdit}>Set password</Button>
         ) : null}
         {canMutate && (
           <Button variant="ghost" onClick={startEdit}>Edit</Button>
         )}
-        {canMutate && !isDefault && (
-          <Button variant="ghost" tone="destructive" onClick={remove}>Remove</Button>
+        {canMutate && !isDefault && !confirmingRemove && (
+          <Button variant="ghost" tone="destructive" onClick={() => setConfirmingRemove(true)}>Remove</Button>
         )}
       </div>
 
+      {confirmingRemove && (
+        <div role="alertdialog" aria-label={`Remove ${audience.displayName}`} className="mt-2 rounded border border-red-200 bg-red-50 px-3 py-2 dark:border-red-900/50 dark:bg-red-950/30">
+          <p className="text-sm text-red-800 dark:text-red-200">
+            Remove &ldquo;{audience.displayName}&rdquo;?
+            {audience.credentialCount > 0 && (
+              <> Its {audience.credentialCount === 1 ? "sign-in" : `${audience.credentialCount} sign-ins`} go with it, locking out anyone using them.</>
+            )}
+          </p>
+          <div className="mt-2 flex justify-end gap-2">
+            <Button variant="secondary" onClick={() => setConfirmingRemove(false)}>Cancel</Button>
+            <Button variant="destructive" onClick={remove}>Remove</Button>
+          </div>
+        </div>
+      )}
+
       {credentials && credentialActions && (
         <CredentialList
           audienceName={audience.displayName}