@drawnagency/primitives 0.1.105 → 0.1.107

package/src/components/shell/AudienceRow.tsx

@@ -4,6 +4,8 @@ import { Input } from "../shared/Input";
 import { PasswordInput } from "../shared/PasswordInput";
 import { Button } from "../shared/Button";
 import { ColorPicker } from "../shared/ColorPicker";
+import { CredentialList } from "./CredentialList";
+import type { ViewerCredential } from "../../schemas/audience";
 
 interface Props {
   audience: Audience;
@@ -11,6 +13,15 @@ interface Props {
   canMutate: boolean;
   onSave: (patch: { displayName?: string; color?: string | null; password?: string }) => 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. */
+  credentials?: ViewerCredential[];
+  credentialActions?: {
+    create: (data: { username: string; label: string | null; password: string }) => Promise<void>;
+    setPassword: (username: string, password: string) => Promise<void>;
+    setLabel: (username: string, label: string | null) => Promise<void>;
+    delete: (username: string) => Promise<void>;
+  };
 }
 
 const PLACEHOLDER_COLOR = "#94a3b8";
@@ -21,7 +32,12 @@ export function AudienceRow({
   canMutate,
   onSave,
   onDelete,
+  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);
@@ -76,7 +92,13 @@ export function AudienceRow({
   }
 
   async function remove() {
-    if (!confirm(`Remove audience "${audience.displayName}"?`)) return;
+    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;
     try {
       await onDelete();
     } catch (e) {
@@ -95,17 +117,21 @@ export function AudienceRow({
               value={draftDisplayName}
               onChange={setDraftDisplayName}
             />
-            <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>
+            {!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>}
@@ -148,7 +174,11 @@ export function AudienceRow({
             </span>
           )}
         </span>
-        {audience.hasPassword ? (
+        {credentialMode ? (
+          <span className="text-xs text-base-contrast-light">
+            {audience.credentialCount === 1 ? "1 sign-in" : `${audience.credentialCount} sign-ins`}
+          </span>
+        ) : audience.hasPassword ? (
           <span
             aria-label="Password is set"
             title="Passwords are hashed and can't be shown. Edit to set a new one."
@@ -166,6 +196,18 @@ export function AudienceRow({
           <Button variant="ghost" tone="destructive" onClick={remove}>Remove</Button>
         )}
       </div>
+
+      {credentials && credentialActions && (
+        <CredentialList
+          audienceName={audience.displayName}
+          credentials={credentials}
+          canMutate={canMutate}
+          onCreate={credentialActions.create}
+          onSetPassword={credentialActions.setPassword}
+          onSetLabel={credentialActions.setLabel}
+          onDelete={credentialActions.delete}
+        />
+      )}
     </div>
   );
 }

package/src/components/shell/CredentialList.tsx

@@ -0,0 +1,285 @@
+import { useState } from "react";
+import { Eye, Copy, Check } from "lucide-react";
+import { Input } from "../shared/Input";
+import { PasswordInput } from "../shared/PasswordInput";
+import { Button } from "../shared/Button";
+import {
+  ViewerUsernameSchema,
+  VIEWER_PASSWORD_MIN_LENGTH,
+  normalizeUsername,
+  slugifyAudienceName,
+} from "../../schemas/audience";
+import type { ViewerCredential } from "../../schemas/audience";
+
+interface Props {
+  audienceName: string;
+  credentials: ViewerCredential[];
+  canMutate: boolean;
+  onCreate: (data: { username: string; label: string | null; password: string }) => Promise<void>;
+  onSetPassword: (username: string, password: string) => Promise<void>;
+  onSetLabel: (username: string, label: string | null) => Promise<void>;
+  onDelete: (username: string) => Promise<void>;
+}
+
+function CopyableSecret({ value }: { value: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <span className="flex items-center gap-2">
+      <code className="rounded bg-base-accent px-2 py-1 font-mono text-xs text-base-contrast select-all">{value}</code>
+      <Button
+        variant="ghost"
+        aria-label="Copy password"
+        onClick={async () => {
+          try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+          } catch {
+            // Clipboard blocked — the value is on screen and selectable.
+          }
+        }}
+      >
+        {copied ? <Check className="h-3.5 w-3.5" aria-hidden /> : <Copy className="h-3.5 w-3.5" aria-hidden />}
+      </Button>
+    </span>
+  );
+}
+
+function CredentialRow({
+  credential, canMutate, onSetPassword, onSetLabel, onDelete,
+}: {
+  credential: ViewerCredential;
+  canMutate: boolean;
+  onSetPassword: (username: string, password: string) => Promise<void>;
+  onSetLabel: (username: string, label: string | null) => Promise<void>;
+  onDelete: (username: string) => Promise<void>;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [label, setLabel] = useState(credential.label ?? "");
+  const [password, setPassword] = useState("");
+  const [revealed, setRevealed] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function reveal() {
+    setError(null);
+    setBusy(true);
+    try {
+      const res = await fetch("/api/auth/viewer-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username: credential.username }),
+      });
+      const body = await res.json().catch(() => ({}));
+      if (body.status === "revealed") setRevealed(body.password);
+      else if (body.status === "unavailable") {
+        setError("Hidden. Set a new password to view here.");
+      } else setError(body.error ?? "Couldn't load the password.");
+    } catch {
+      setError("Network error");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function save() {
+    setError(null);
+    if (password.length > 0 && password.length < VIEWER_PASSWORD_MIN_LENGTH) {
+      setError(`Password must be at least ${VIEWER_PASSWORD_MIN_LENGTH} characters`);
+      return;
+    }
+    setBusy(true);
+    try {
+      const nextLabel = label.trim().length > 0 ? label.trim() : null;
+      if (nextLabel !== (credential.label ?? null)) await onSetLabel(credential.username, nextLabel);
+      if (password.length > 0) {
+        await onSetPassword(credential.username, password);
+        // Show what was just set, so it can be shared without a second lookup.
+        setRevealed(password);
+      }
+      setPassword("");
+      setEditing(false);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Save failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function remove() {
+    if (!confirm(
+      `Remove the sign-in "${credential.username}"?\n\n` +
+      "Anyone using it will be locked out — though a browser already signed in " +
+      "may keep access for up to 24 hours, until its session expires.",
+    )) return;
+    setError(null);
+    try {
+      await onDelete(credential.username);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Remove failed");
+    }
+  }
+
+  return (
+    <li className="rounded border border-base-200 px-3 py-2">
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="min-w-0 flex-1">
+          <span className="block truncate font-mono text-sm text-base-contrast">{credential.username}</span>
+          {credential.label && !editing && (
+            <span className="block truncate text-[11px] text-base-contrast-light">{credential.label}</span>
+          )}
+        </span>
+
+        {revealed ? (
+          <CopyableSecret value={revealed} />
+        ) : (
+          <Button variant="ghost" onClick={reveal} isLoading={busy && !editing} loadingLabel="...">
+            <span className="inline-flex items-center gap-1.5">
+              <Eye className="h-3.5 w-3.5" aria-hidden />
+              Show
+            </span>
+          </Button>
+        )}
+        {revealed && <Button variant="ghost" onClick={() => setRevealed(null)}>Hide</Button>}
+
+        {canMutate && !editing && <Button variant="ghost" onClick={() => setEditing(true)}>Edit</Button>}
+        {canMutate && !editing && (
+          <Button variant="ghost" tone="destructive" onClick={remove}>Remove</Button>
+        )}
+      </div>
+
+      {editing && (
+        <div className="mt-2 space-y-2">
+          <Input label="Label" value={label} onChange={setLabel} placeholder="Login Name" />
+          <PasswordInput
+            label="New password"
+            value={password}
+            onChange={setPassword}
+            autoComplete="new-password"
+            placeholder="Leave blank to keep the current one"
+            showToggle
+          />
+          <div className="flex justify-end gap-2">
+            <Button variant="secondary" onClick={() => { setEditing(false); setPassword(""); setLabel(credential.label ?? ""); setError(null); }} disabled={busy}>
+              Cancel
+            </Button>
+            <Button variant="primary" onClick={save} isLoading={busy} loadingLabel="Saving...">Save</Button>
+          </div>
+        </div>
+      )}
+
+      {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
+    </li>
+  );
+}
+
+function AddForm({ audienceName, onCreate, onCancel }: {
+  audienceName: string;
+  onCreate: Props["onCreate"];
+  onCancel: () => void;
+}) {
+  const [label, setLabel] = useState("");
+  const [username, setUsername] = useState("");
+  // The username follows the label until the editor takes it over, so the
+  // common case is a single field and the slug stays predictable. Once they
+  // type in the username it stops tracking — otherwise their edit would be
+  // silently overwritten by the next keystroke in the label.
+  const [usernameOverridden, setUsernameOverridden] = useState(false);
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const derivedUsername = usernameOverridden ? username : slugifyAudienceName(label);
+
+  function editUsername(value: string) {
+    setUsernameOverridden(true);
+    setUsername(value);
+  }
+
+  async function submit() {
+    setError(null);
+    const normalized = normalizeUsername(derivedUsername);
+    if (normalized.length === 0) {
+      setError("Add a label — the username is generated from it");
+      return;
+    }
+    const parsed = ViewerUsernameSchema.safeParse(normalized);
+    if (!parsed.success) {
+      setError("Username: lowercase letters, numbers, dots, dashes and underscores only");
+      return;
+    }
+    if (password.length < VIEWER_PASSWORD_MIN_LENGTH) {
+      setError(`Password must be at least ${VIEWER_PASSWORD_MIN_LENGTH} characters`);
+      return;
+    }
+    setBusy(true);
+    try {
+      await onCreate({ username: normalized, label: label.trim() || null, password });
+      onCancel();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Add failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <li className="space-y-2 rounded border border-base-200 px-3 py-3">
+      <Input label="Label" value={label} onChange={setLabel} placeholder="Login Name" />
+      <Input
+        label="Username"
+        value={derivedUsername}
+        onChange={editUsername}
+        autoCapitalize="none"
+        spellCheck={false}
+      />
+      <p className="text-[11px] text-base-contrast-light">
+        Generated from the label — change it if you want something different. This is what they type to sign in, and it can't be renamed later.
+      </p>
+      <PasswordInput label="Password" value={password} onChange={setPassword} autoComplete="new-password" showToggle />
+      <p className="text-[11px] text-base-contrast-light">
+        Signs in to <span className="font-medium">{audienceName}</span> and sees exactly what that audience sees.
+        You can look this password up again later.
+      </p>
+      {error && <p className="text-xs text-red-600">{error}</p>}
+      <div className="flex justify-end gap-2">
+        <Button variant="secondary" onClick={onCancel} disabled={busy}>Cancel</Button>
+        <Button variant="primary" onClick={submit} isLoading={busy} loadingLabel="Adding...">Add</Button>
+      </div>
+    </li>
+  );
+}
+
+/** The named sign-ins for one audience, inside its Site Settings row. */
+export function CredentialList({
+  audienceName, credentials, canMutate, onCreate, onSetPassword, onSetLabel, onDelete,
+}: Props) {
+  const [adding, setAdding] = useState(false);
+
+  return (
+    <div className="mt-2 space-y-2 border-t border-base-200 pt-2">
+      <p className="text-[11px] font-medium uppercase tracking-wide text-base-contrast-light">Sign-ins</p>
+      <ul className="space-y-2">
+        {credentials.map((c) => (
+          <CredentialRow
+            key={c.username}
+            credential={c}
+            canMutate={canMutate}
+            onSetPassword={onSetPassword}
+            onSetLabel={onSetLabel}
+            onDelete={onDelete}
+          />
+        ))}
+        {credentials.length === 0 && !adding && (
+          <li className="text-xs text-base-contrast-light">
+            No sign-ins yet — nobody can enter as this audience.
+          </li>
+        )}
+        {adding && <AddForm audienceName={audienceName} onCreate={onCreate} onCancel={() => setAdding(false)} />}
+      </ul>
+      {canMutate && !adding && (
+        <Button variant="secondary" onClick={() => setAdding(true)}>Add sign-in</Button>
+      )}
+    </div>
+  );
+}

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
@@ -2361,7 +2451,10 @@ function EditorContent({
   }, [onBlockMove]);
 
   return (
-    <div>
+    // `.section-wrapper:first-child` zeroes the 2.25rem that every other section
+    // reserves above itself for its hover chrome, so the first section's controls
+    // would sit under the fixed toolbar. Re-reserve it on the list instead.
+    <div className="pt-9">
       {displaySections.map(({ section, meta }, index) => {
         const definition = getSection(section.type);
         if (!definition) {

package/src/components/shell/MediaLibraryModal.tsx

@@ -94,7 +94,7 @@ function DocumentTile({ doc, manage, isSelected, refCount, showFolderChip, onCli
   isSelected: boolean;
   refCount: number;
   showFolderChip: boolean;
-  onClick: () => void;
+  onClick: (e: React.MouseEvent) => void;
 }) {
   return (
     <button
@@ -262,7 +262,7 @@ function UploadZone({ onUpload, onFolderUpload }: {
 
 function MediaCard({ item, manage, isSelected, dragIds, onClick, children }: {
   item: MediaItem; manage: boolean; isSelected: boolean;
-  dragIds: string[]; onClick: () => void; children: React.ReactNode;
+  dragIds: string[]; onClick: (e: React.MouseEvent) => void; children: React.ReactNode;
 }) {
   const drag = useMediaDraggable<HTMLDivElement>({
     enabled: manage,
@@ -446,7 +446,18 @@ export function MediaLibraryModal({
       })
     : [];
 
+  // Visual order of the item grid: documents render before images, and a CSS
+  // grid lays both out in source order, so an index range here is exactly the
+  // range a shift-click spans on screen — rows included.
+  const orderedIds = [...filteredDocuments.map((doc) => doc.id), ...filtered.map((item) => item.id)];
+
+  // Anchor for shift-click range selection. Stored as an id, not an index:
+  // `filtered`/`filteredDocuments` are recomputed every render, so an index
+  // would go stale on search, filter, or folder navigation.
+  const rangeAnchorId = useRef<string | null>(null);
+
   function toggleSelect(id: string) {
+    rangeAnchorId.current = id;
     setSelected((prev) => {
       const next = new Set(prev);
       if (next.has(id)) {
@@ -458,6 +469,32 @@ export function MediaLibraryModal({
     });
   }
 
+  function selectRangeTo(id: string) {
+    const anchor = rangeAnchorId.current;
+    const from = anchor === null ? -1 : orderedIds.indexOf(anchor);
+    const to = orderedIds.indexOf(id);
+    // No usable anchor (never clicked, or it was filtered/deleted away) — fall
+    // back to a plain toggle so the click is never a no-op.
+    if (from === -1 || to === -1) {
+      toggleSelect(id);
+      return;
+    }
+    const range = orderedIds.slice(Math.min(from, to), Math.max(from, to) + 1);
+    // The anchor stays put so the range can be re-extended by shift-clicking
+    // again, and the range adds rather than toggles (matching file explorers).
+    setSelected((prev) => new Set([...prev, ...range]));
+  }
+
+  function handleItemClick(id: string, e: React.MouseEvent) {
+    if (e.shiftKey) {
+      // Shift-click otherwise drags a native text selection across the grid.
+      e.preventDefault();
+      selectRangeTo(id);
+    } else {
+      toggleSelect(id);
+    }
+  }
+
   const [confirmDelete, setConfirmDelete] = useState(false);
 
   // One selection, two kinds. Everything downstream — delete dispatch, usage
@@ -837,7 +874,7 @@ export function MediaLibraryModal({
                 isSelected={selected.has(doc.id)}
                 refCount={documentReferenceCountMap[doc.id] ?? 0}
                 showFolderChip={filtering && documentsFolderEnabled}
-                onClick={() => (manage ? toggleSelect(doc.id) : onSelect(doc.id))}
+                onClick={(e) => (manage ? handleItemClick(doc.id, e) : onSelect(doc.id))}
               />
             ))}
             {filtered.map((item) => {
@@ -853,11 +890,11 @@ export function MediaLibraryModal({
                   manage={manage}
                   isSelected={isSelected}
                   dragIds={dragIds}
-                  onClick={() => {
+                  onClick={(e) => {
                     if (mode === "select") {
                       onSelect(item.id);
                     } else {
-                      toggleSelect(item.id);
+                      handleItemClick(item.id, e);
                     }
                   }}
                 >