@drawnagency/primitives 0.1.113 → 0.1.114

package/src/components/shared/HistoryChangesModal.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { EditorModal } from "../shell/EditorModal";
 import { Button } from "./Button";
+import { ConfirmDialog } from "./ConfirmDialog";
 
 export interface ChangedSection {
   id: string;
@@ -165,33 +166,48 @@ export function HistoryChangesModal({
     <EditorModal
       isOpen={isOpen}
       onClose={onClose}
-      title={confirmingRestore ? "Restore this version?" : title}
+      title={title}
       size="standard"
       tabbed
       noPadding
     >
       <div className="flex min-h-0 flex-1 flex-col">
-        <div className="flex-1 overflow-y-auto px-6 py-4">
-          {confirmingRestore ? (
-            <>
-              <p className="text-sm text-base-contrast-light">
-                This will publish the content from this version as a new update.
-                Your currently published content stays available in the history.
-              </p>
-              {restoreError && (
-                <p role="alert" className="mt-3 text-sm font-medium text-red-600">
-                  {restoreError} Nothing was published — you can try again.
-                </p>
-              )}
-              {hasUnsavedChanges && (
-                <p className="mt-3 text-sm font-medium text-red-600">
-                  You have unsaved changes. Restoring discards them, and unlike
-                  published content they cannot be recovered from history.
-                </p>
-              )}
-            </>
-          ) : (
-            <>
+        {confirmingRestore ? (
+          <div className="flex-1 overflow-y-auto px-6 py-4">
+            <ConfirmDialog
+              isOpen
+              embedded
+              title="Restore this version?"
+              body={
+                <>
+                  <p className="text-sm text-base-contrast-light">
+                    This will publish the content from this version as a new update.
+                    Your currently published content stays available in the history.
+                  </p>
+                  {restoreError && (
+                    <p role="alert" className="mt-3 text-sm font-medium text-danger">
+                      {restoreError} Nothing was published — you can try again.
+                    </p>
+                  )}
+                  {hasUnsavedChanges && (
+                    <p className="mt-3 text-sm font-medium text-danger">
+                      You have unsaved changes. Restoring discards them, and unlike
+                      published content they cannot be recovered from history.
+                    </p>
+                  )}
+                </>
+              }
+              confirmLabel="Restore"
+              tone="destructive"
+              busy={isRestoring}
+              busyLabel="Restoring…"
+              onConfirm={onRestore}
+              onCancel={() => setConfirmingRestore(false)}
+            />
+          </div>
+        ) : (
+          <>
+            <div className="flex-1 overflow-y-auto px-6 py-4">
               {error && (
                 <p className="py-6 text-center text-sm text-base-contrast-light">
                   Couldn&rsquo;t load the change summary.
@@ -237,30 +253,16 @@ export function HistoryChangesModal({
                   )}
                 </>
               )}
-            </>
-          )}
-        </div>
+            </div>
 
-        <div className="flex shrink-0 justify-end gap-2 border-t border-base-200 px-6 py-3">
-          {confirmingRestore ? (
-            <>
-              <Button variant="secondary" size="sm" disabled={isRestoring}
-                onClick={() => setConfirmingRestore(false)}>
-                Cancel
-              </Button>
-              <Button variant="destructive" size="sm" disabled={isRestoring} onClick={onRestore}>
-                {isRestoring ? "Restoring…" : "Restore"}
-              </Button>
-            </>
-          ) : (
-            <>
+            <div className="flex shrink-0 justify-end gap-2 border-t border-base-200 px-6 py-3">
               <Button variant="destructive" size="sm" onClick={() => setConfirmingRestore(true)}>
                 Restore&hellip;
               </Button>
               <Button size="sm" onClick={onBrowse}>Browse this version</Button>
-            </>
-          )}
-        </div>
+            </div>
+          </>
+        )}
       </div>
     </EditorModal>
   );

package/src/components/shared/HistoryPopover.tsx

@@ -1,4 +1,5 @@
 import { useState, useCallback, useEffect, useMemo, lazy, Suspense } from "react";
+import { ChevronRight, ChevronLeft, MousePointer2 } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { historyRestoreEvent, historyRestoreFailedEvent } from "../../lib/events";
 import {
@@ -26,26 +27,12 @@ interface Frame {
   node: HistoryNode | null;
 }
 
-const Chevron = () => (
-  <svg width="9" height="9" viewBox="0 0 10 10" fill="none" stroke="currentColor"
-       strokeWidth="1.7" aria-hidden="true">
-    <path d="M3.5 1.5L7 5l-3.5 3.5" />
-  </svg>
-);
+const Chevron = () => <ChevronRight size={9} strokeWidth={1.7} aria-hidden="true" />;
 
-const BackArrow = () => (
-  <svg width="11" height="11" viewBox="0 0 10 10" fill="none" stroke="currentColor"
-       strokeWidth="1.7" aria-hidden="true">
-    <path d="M6.5 1.5L3 5l3.5 3.5" />
-  </svg>
-);
+const BackArrow = () => <ChevronLeft size={11} strokeWidth={1.7} aria-hidden="true" />;
 
 /** Browse-to-this-version: a pointer cursor — "go look at the site as it was". */
-const BrowseCursor = () => (
-  <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-    <path d="M3.6 1.9a.4.4 0 0 1 .66-.3l8 6.7a.4.4 0 0 1-.23.71l-3.4.2 1.94 3.5a.4.4 0 0 1-.17.54l-1.4.75a.4.4 0 0 1-.54-.18l-1.9-3.55-2.3 2.2a.4.4 0 0 1-.68-.29z" />
-  </svg>
-);
+const BrowseCursor = () => <MousePointer2 size={13} aria-hidden="true" />;
 
 function Volume({ count, max }: { count: number; max: number }) {
   // sqrt so a 200-commit year doesn't flatten every other bar to nothing.
@@ -89,7 +76,7 @@ export function HistoryPopover({ onSelectCommit, hasUnsavedChanges = false }: Hi
           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}`);
+          if (!res.ok) throw new Error(`Couldn't 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
@@ -105,7 +92,7 @@ export function HistoryPopover({ onSelectCommit, hasUnsavedChanges = false }: Hi
         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");
+        if (all.length === 0) setError(err instanceof Error ? err.message : "Couldn't load history");
       } finally {
         if (live) setLoading(false);
       }
@@ -139,7 +126,7 @@ export function HistoryPopover({ onSelectCommit, hasUnsavedChanges = false }: Hi
     return <div className="p-4 text-center text-xs text-base-contrast-light">Loading history…</div>;
   }
   if (error) {
-    return <div className="p-4 text-center text-xs text-red-600">{error}</div>;
+    return <div className="p-4 text-center text-xs text-danger">{error}</div>;
   }
   if (commits.length === 0) {
     return <div className="p-4 text-center text-xs text-base-contrast-light">No history found</div>;

package/src/components/shared/ImageBackgroundField.tsx

@@ -0,0 +1,92 @@
+import type { ImageBackground, ImageBackgroundSurface } from "../../schemas/shared";
+import { cn } from "../../lib/cn";
+import { FormLabel } from "./FormLabel";
+import { SegmentedControl } from "./SegmentedControl";
+import { Select } from "./Select";
+import { ColorPicker } from "./ColorPicker";
+import { useBrandSwatches } from "./BrandSwatchesContext";
+
+interface Props {
+  label: string;
+  value: ImageBackground | undefined;
+  onChange: (value: ImageBackground | undefined) => void;
+}
+
+const MODES = [
+  { value: "none", label: "None" },
+  { value: "theme", label: "Light / Dark" },
+  { value: "custom", label: "Custom" },
+];
+
+const SURFACES: { value: ImageBackgroundSurface; label: string }[] = [
+  { value: "none", label: "None" },
+  { value: "light", label: "Light" },
+  { value: "dark", label: "Dark" },
+];
+
+export function ImageBackgroundField({ label, value, onChange }: Props) {
+  const swatches = useBrandSwatches();
+  const mode = value?.mode ?? "none";
+
+  function setMode(next: string) {
+    if (next === "theme") onChange({ mode: "theme", light: "none", dark: "none" });
+    else if (next === "custom") onChange({ mode: "custom", color: "#ffffff" });
+    else onChange(undefined);
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <FormLabel>{label}</FormLabel>
+      <SegmentedControl options={MODES} value={mode} onChange={setMode} className="self-start" />
+
+      {value?.mode === "theme" && (
+        <div className="grid grid-cols-2 gap-3">
+          <Select
+            label="Light mode"
+            value={value.light}
+            options={SURFACES}
+            onChange={(light) => onChange({ ...value, light: light as ImageBackgroundSurface })}
+          />
+          <Select
+            label="Dark mode"
+            value={value.dark}
+            options={SURFACES}
+            onChange={(dark) => onChange({ ...value, dark: dark as ImageBackgroundSurface })}
+          />
+        </div>
+      )}
+
+      {value?.mode === "custom" && (
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <ColorPicker
+              label="Background color"
+              value={value.color}
+              onChange={(color) => onChange({ mode: "custom", color })}
+            />
+            <span className="font-mono text-xs text-base-contrast-light">{value.color}</span>
+          </div>
+          {swatches.length > 0 && (
+            <div role="group" aria-label="Brand colors" className="flex flex-wrap gap-2">
+              {swatches.map((s) => (
+                <button
+                  key={s.hex}
+                  type="button"
+                  aria-label={s.name ? `${s.name} (${s.hex})` : s.hex}
+                  aria-pressed={s.hex === value.color.toLowerCase()}
+                  title={s.name ?? s.hex}
+                  onClick={() => onChange({ mode: "custom", color: s.hex })}
+                  className={cn(
+                    "h-7 w-7 cursor-pointer rounded-full border border-base-200",
+                    "aria-pressed:outline aria-pressed:outline-2 aria-pressed:outline-offset-2 aria-pressed:outline-base-contrast",
+                  )}
+                  style={{ backgroundColor: s.hex }}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/shared/{UploadRejectionAlert.tsx → InlineAlert.tsx}

@@ -1,3 +1,4 @@
+import { cn } from "../../lib/cn";
 import { Button } from "./Button";
 import { formatFileSize } from "../../media/utils";
 
@@ -30,18 +31,33 @@ export function formatRejections(files: UploadRejection[], maxFileSize?: number)
   return `${files.length} files rejected (${parts.join(", ")}).`;
 }
 
-export function UploadRejectionAlert({
+export type InlineAlertTone = "success" | "info" | "warning" | "error";
+
+const toneClasses: Record<InlineAlertTone, string> = {
+  success: "border-success bg-success-bg text-success",
+  info: "border-base-200 bg-base-accent text-base-contrast",
+  warning: "border-warning bg-warning-bg text-warning",
+  error: "border-danger bg-danger-bg text-danger",
+};
+
+export function InlineAlert({
   message,
   onDismiss,
+  tone = "warning",
 }: {
   message: string;
   onDismiss: () => void;
+  tone?: InlineAlertTone;
 }) {
   return (
-    <div role="alert" className="flex flex-col items-center rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 lg:flex-row lg:justify-between dark:border-amber-900/50 dark:bg-amber-950/30">
-      <p className="mb-2 text-center text-sm text-amber-800 lg:mb-0 lg:text-left dark:text-amber-200">
-        {message}
-      </p>
+    <div
+      role="alert"
+      className={cn(
+        "flex flex-col items-center rounded-lg border px-4 py-3 lg:flex-row lg:justify-between",
+        toneClasses[tone],
+      )}
+    >
+      <p className="mb-2 text-center text-sm lg:mb-0 lg:text-left">{message}</p>
       <div className="flex shrink-0 items-center">
         <Button variant="secondary" size="sm" type="button" onClick={onDismiss}>
           Dismiss

package/src/components/shared/Input.tsx

@@ -6,17 +6,28 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChan
   label: string;
   onChange: (value: string) => void;
   error?: string;
+  /** Helper text below the field, styled like `error` but neutral — for
+   *  guidance that isn't a validation failure. Not shown while `error` is set. */
+  hint?: string;
+  /** Keeps the field's accessible name (still a real associated `<label>`,
+   *  not just `aria-label`) without a visible caption — for compact/inline
+   *  fields (e.g. an editable row's title) where a caption would add layout
+   *  a raw `<input>` with just `aria-label` never had. */
+  hideLabel?: boolean;
+  /** Escape hatch for one-off input sizing, matching `Select`'s `selectClassName`. */
+  inputClassName?: string;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { label, value, onChange, type = "text", className, disabled, error, ...rest },
+  { label, value, onChange, type = "text", className, disabled, error, hint, hideLabel, inputClassName, ...rest },
   ref,
 ) {
   const id = useId();
   const errorId = `${id}-error`;
+  const hintId = `${id}-hint`;
   return (
     <div className={className}>
-      <FormLabel htmlFor={id}>{label}</FormLabel>
+      <FormLabel htmlFor={id} className={hideLabel ? "sr-only" : undefined}>{label}</FormLabel>
       <input
         ref={ref}
         id={id}
@@ -25,21 +36,26 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
         onChange={(e) => onChange(e.target.value)}
         disabled={disabled}
         aria-invalid={error ? true : undefined}
-        aria-describedby={error ? errorId : undefined}
+        aria-describedby={error ? errorId : hint ? hintId : undefined}
         className={cn(
           "w-full rounded border bg-base px-3 py-2 text-sm text-base-contrast focus:outline-none focus:ring-1",
           error
-            ? "border-red-600 focus:border-red-600 focus:ring-red-600"
+            ? "border-danger focus:border-danger focus:ring-danger"
             : "border-base-200 focus:border-base-contrast focus:ring-base-contrast",
           disabled && "cursor-not-allowed opacity-50",
+          inputClassName,
         )}
         {...rest}
       />
-      {error && (
-        <p id={errorId} className="mt-1 text-xs text-red-600">
+      {error ? (
+        <p id={errorId} className="mt-1 text-xs text-danger">
           {error}
         </p>
-      )}
+      ) : hint ? (
+        <p id={hintId} className="mt-1 text-xs text-base-contrast-light">
+          {hint}
+        </p>
+      ) : null}
     </div>
   );
 });

package/src/components/shared/Navigation.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect, useRef, type ReactNode } from "react";
-import { ChevronRight, Users } from "lucide-react";
+import { ChevronRight, ChevronUp, Menu, X, Users } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Toggle } from "./Toggle";
 import type { SiteNav, NavItem, GroupNavItem, PageNavItem, DocGroupNavItem, DocNavItem } from "../../lib/nav";
@@ -93,6 +93,8 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
 
   // /api/auth/sign-out clears BOTH the editor session and the audience cookie,
   // so one call serves either kind of session; only the destination differs.
+  // While an editor is impersonating it ends only that, and names the page to
+  // return to (#61).
   const handleLogout = useCallback(async () => {
     setLogoutError(null);
     setLoggingOut(true);
@@ -103,7 +105,9 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
         setLoggingOut(false);
         return;
       }
-      window.location.assign(identity?.kind === "editor" ? "/edit/login" : "/login");
+      const body = (await res.json().catch(() => null)) as { redirectTo?: unknown } | null;
+      const redirectTo = typeof body?.redirectTo === "string" ? body.redirectTo : null;
+      window.location.assign(redirectTo ?? (identity?.kind === "editor" ? "/edit/login" : "/login"));
     } catch {
       setLogoutError("Network error");
       setLoggingOut(false);
@@ -371,25 +375,25 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
 
   return (
     <>
-      <header className={cn("fixed top-0 left-0 right-0 z-50 bg-base", bp.hidden)}>
+      <header className={cn("bp-nav-header 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">
             {renderLogo("h-8 w-auto")}
             {showTitle && <span className="text-lg font-bold text-primary">{currentSiteName}</span>}
           </div>
-          <button onClick={() => setIsOpen(!isOpen)} className="cursor-pointer p-2 text-base-contrast" aria-label="Toggle navigation">
-            <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-              {isOpen
-                ? <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                : <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />}
-            </svg>
+          <button onClick={() => setIsOpen(!isOpen)} className="cursor-pointer p-2 text-base-contrast" aria-label="Toggle navigation" aria-expanded={isOpen} aria-controls="bp-mobile-nav">
+            {isOpen ? (
+              <X className="h-6 w-6" aria-hidden="true" />
+            ) : (
+              <Menu className="h-6 w-6" aria-hidden="true" />
+            )}
           </button>
         </div>
       </header>
 
       {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 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",
+      <nav id="bp-mobile-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")}>
         {/* No horizontal padding on the wrapper: the logo's 80% is of the nav
@@ -467,11 +471,12 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
                     {/* The panel opens upward, so the caret points up when closed
                         and flips when open — the affordance that this is a toggle
                         rather than a label. */}
-                    <svg width="9" height="9" viewBox="0 0 10 10" fill="none" stroke="currentColor"
-                      strokeWidth="1.7" aria-hidden="true"
-                      className={cn("transition-transform", showHistory && "rotate-180")}>
-                      <path d="M1.5 6.5L5 3l3.5 3.5" strokeLinecap="round" strokeLinejoin="round" />
-                    </svg>
+                    <ChevronUp
+                      size={9}
+                      strokeWidth={1.7}
+                      aria-hidden="true"
+                      className={cn("transition-transform", showHistory && "rotate-180")}
+                    />
                   </button>
                   {/* Portalled: the sidebar sets overflow-y-auto, which computes
                       overflow-x to auto, so a panel wider than the 16rem sidebar
@@ -506,10 +511,10 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
                   disabled={loggingOut}
                   className="cursor-pointer underline-offset-2 transition-colors hover:text-primary hover:underline disabled:cursor-wait"
                 >
-                  {loggingOut ? "Logging out..." : "Log out"}
+                  {loggingOut ? "Logging out…" : "Log out"}
                 </button>
               </p>
-              {logoutError && <p className="mt-1 text-xs text-red-600">{logoutError}</p>}
+              {logoutError && <p className="mt-1 text-xs text-danger">{logoutError}</p>}
             </div>
           )}
         </div>

package/src/components/shared/Notice.tsx

@@ -0,0 +1,59 @@
+import type { ReactNode } from "react";
+import { X } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { IconButton } from "./IconButton";
+
+export type NoticeTone = "success" | "info" | "warning" | "error";
+
+const toneClasses: Record<NoticeTone, string> = {
+  success: "border-success bg-success-bg text-success",
+  info: "border-base-200 bg-base-accent text-base-contrast",
+  warning: "border-warning bg-warning-bg text-warning",
+  error: "border-danger bg-danger-bg text-danger",
+};
+
+// role="alert" interrupts assistive tech immediately (warning/error); role="status"
+// only announces at the next polite opportunity (success/info) — matches how
+// urgently each tone needs to reach a screen reader user.
+const toneRole: Record<NoticeTone, "alert" | "status"> = {
+  success: "status",
+  info: "status",
+  warning: "alert",
+  error: "alert",
+};
+
+export interface NoticeProps {
+  tone: NoticeTone;
+  children: ReactNode;
+  onDismiss?: () => void;
+  placement: "inline" | "toast";
+}
+
+export function Notice({ tone, children, onDismiss, placement }: NoticeProps) {
+  return (
+    <div
+      role={toneRole[tone]}
+      className={cn(
+        "flex items-center gap-3 rounded-md border px-4 py-2 text-xs font-medium shadow-lg",
+        toneClasses[tone],
+        placement === "toast"
+          // top-16 clears the h-16 ToolbarFrame bar exactly; the extra 1rem
+          // (top-20) is the gap below it, so the toast never sits flush
+          // against — or, at top-14, partly under — the bar.
+          ? "fixed left-1/2 top-20 z-60 -translate-x-1/2"
+          : "w-full",
+      )}
+    >
+      <span className="flex-1">{children}</span>
+      {onDismiss && (
+        <IconButton
+          icon={<X size={14} />}
+          label="Dismiss"
+          size="sm"
+          onClick={onDismiss}
+          className="shrink-0 opacity-70 hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+        />
+      )}
+    </div>
+  );
+}

package/src/components/shared/Popover.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useLayoutEffect, useRef, useState, type ReactNode, type RefObject } from "react";
 import { createPortal } from "react-dom";
 import { useInitialFocus } from "../../hooks/useFocusTrap";
+import { useStackedEscape } from "../../hooks/useStackedEscape";
 import { cn } from "../../lib/cn";
 
 interface PopoverProps {
@@ -106,17 +107,14 @@ export function Popover({
     panel.style.right = "";
   }, [isOpen, align]);
 
+  // A modal opened from inside this popover also closes on Escape. Without
+  // this the one keypress dismisses both, losing the navigator's zoom stack
+  // — inconsistent with the X button, and with the mousedown exemption below
+  // that exists for exactly this stacking.
+  useStackedEscape(onClose, { enabled: isOpen });
+
   useEffect(() => {
     if (!isOpen) return;
-    function onKeyDown(e: KeyboardEvent) {
-      if (e.key !== "Escape") return;
-      // A modal opened from inside this popover also closes on Escape. Without
-      // this the one keypress dismisses both, losing the navigator's zoom stack
-      // — inconsistent with the X button, and with the mousedown exemption
-      // below that exists for exactly this stacking.
-      if (document.querySelector("[data-modal-layer]")) return;
-      onClose();
-    }
     function onMouseDown(e: MouseEvent) {
       const target = e.target as Node;
       if (panelRef.current?.contains(target)) return;
@@ -127,10 +125,8 @@ export function Popover({
       if (target instanceof Element && target.closest("[data-modal-layer]")) return;
       onClose();
     }
-    document.addEventListener("keydown", onKeyDown);
     document.addEventListener("mousedown", onMouseDown);
     return () => {
-      document.removeEventListener("keydown", onKeyDown);
       document.removeEventListener("mousedown", onMouseDown);
     };
   }, [isOpen, onClose, anchorRef]);

package/src/components/shared/ReferenceSourcesContext.ts

@@ -0,0 +1,27 @@
+import { createContext } from "react";
+import type { Audience } from "../../schemas/auth";
+import type { SiteIndex } from "../../schemas/site-config";
+import type { LoadedSection } from "../../lib/loader";
+import type { Section } from "../../schemas/sections";
+import type { MediaManifest } from "../../media/types";
+
+/**
+ * The whole site's working copy, for the Reference section's editor list and
+ * settings picker — a Reference points across pages, so the page-scoped props
+ * a section gets aren't enough. EditorShell provides it above the modal root
+ * so the settings form sees it too. Absent (null) outside the editor.
+ */
+export interface ReferenceSources {
+  index: SiteIndex;
+  sections: LoadedSection[];
+  /** Every audience on the site. */
+  audiences: Audience[];
+  mediaManifest: MediaManifest;
+  /** The page being edited's copies, per Reference id then source id, with
+   *  the page-wide anchors the editor nav links to (pageReferenceCopies). */
+  copies: Record<string, Record<string, Section>>;
+  /** Open the section's page and scroll it into view. */
+  jumpToSection: (sectionId: string) => void;
+}
+
+export const ReferenceSourcesContext = createContext<ReferenceSources | null>(null);

package/src/components/shared/Select.tsx

@@ -1,4 +1,4 @@
-import { useId } from "react";
+import { useId, type SelectHTMLAttributes } from "react";
 import { ChevronDown } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { FormLabel } from "./FormLabel";
@@ -8,7 +8,8 @@ interface SelectOption {
   label: string;
 }
 
-interface SelectProps {
+interface SelectProps
+  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "value" | "onChange" | "disabled" | "className" | "id"> {
   label?: string;
   value: string;
   onChange: (value: string) => void;
@@ -26,6 +27,7 @@ export function Select({
   disabled,
   className,
   selectClassName,
+  ...rest
 }: SelectProps) {
   const id = useId();
   return (
@@ -37,6 +39,7 @@ export function Select({
           value={value}
           onChange={(e) => onChange(e.target.value)}
           disabled={disabled}
+          {...rest}
           className={cn(
             "w-full appearance-none rounded border border-base-200 bg-base py-2 pr-8 pl-3 text-sm text-base-contrast",
             "focus:border-base-contrast focus:outline-none focus:ring-1 focus:ring-base-contrast",