feat(editor): authors & affiliations manager modal

Replace the undiscoverable inline drag with a single, discoverable modal for
the whole byline. From the hero (pencil button, clicking an author, or
clicking an affiliation) users open AuthorsManager to add/edit/remove authors
and affiliations and reorder both lists via explicit up/down controls.

- store: add updateAffiliation/removeAffiliation; removeAffiliation reconciles
every author's 1-based references (drop + shift) like moveAffiliation does
- extract AuthorInlineForm into its own file, reused as the add/edit form
(stacked dialog) inside the manager
- affiliations get inline name/URL editing with debounced commits
- drop the inline drag-and-drop handlers/styles from the displayed header

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/editor/frontmatter/AuthorInlineForm.tsx

@@ -0,0 +1,138 @@
+import { useState, useRef, useEffect } from "react";
+import type { Author, Affiliation } from "./frontmatter-store";
+
+/**
+ * Add/Edit form for a single author, rendered as a native modal dialog.
+ *
+ * Affiliations are selected by their 1-based index (matching the store's
+ * `author.affiliations` model). A free-text "new affiliation" field lets the
+ * user create + attach an affiliation in one go; the caller persists it via
+ * `onSubmit(author, newAffiliation)`.
+ *
+ * Extracted from FrontmatterHero so both the hero shortcut and the
+ * AuthorsManager modal share one tested form.
+ */
+export function AuthorInlineForm({
+  open,
+  initial,
+  affiliations,
+  onSubmit,
+  onCancel,
+}: {
+  open: boolean;
+  initial?: Author;
+  affiliations: Affiliation[];
+  onSubmit: (author: Author, newAffiliation?: Affiliation) => void;
+  onCancel: () => void;
+}) {
+  const [name, setName] = useState(initial?.name || "");
+  const [url, setUrl] = useState(initial?.url || "");
+  const [affIndices, setAffIndices] = useState<number[]>(initial?.affiliations || []);
+  const [newAffName, setNewAffName] = useState("");
+  const nameRef = useRef<HTMLInputElement>(null);
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) {
+      setName(initial?.name || "");
+      setUrl(initial?.url || "");
+      setAffIndices(initial?.affiliations || []);
+      setNewAffName("");
+      dialog.showModal();
+      setTimeout(() => nameRef.current?.focus(), 50);
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [open, initial]);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const onClose = () => onCancel();
+    dialog.addEventListener("close", onClose);
+    return () => dialog.removeEventListener("close", onClose);
+  }, [onCancel]);
+
+  const handleSubmit = () => {
+    if (!name.trim()) return;
+    const newAff = newAffName.trim() ? { name: newAffName.trim() } : undefined;
+    onSubmit(
+      { name: name.trim(), url: url.trim() || undefined, affiliations: affIndices },
+      newAff,
+    );
+  };
+
+  const handleCancel = () => {
+    dialogRef.current?.close();
+    onCancel();
+  };
+
+  const toggleAff = (idx: number) => {
+    setAffIndices((prev) =>
+      prev.includes(idx) ? prev.filter((i) => i !== idx) : [...prev, idx],
+    );
+  };
+
+  return (
+    <dialog ref={dialogRef} className="ed-dialog ed-dialog--author">
+      <h3 className="ed-dialog__title">
+        {initial ? "Edit author" : "Add author"}
+      </h3>
+      <div className="ed-dialog__body">
+        <div className="author-form__row">
+          <input
+            ref={nameRef}
+            className="form-input"
+            placeholder="Name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
+          />
+          <input
+            className="form-input"
+            placeholder="URL (optional)"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
+          />
+        </div>
+
+        {affiliations.length > 0 && (
+          <div className="author-form__chips" style={{ marginTop: 12 }}>
+            {affiliations.map((aff, i) => (
+              <span
+                key={`aff-select-${i}`}
+                className={`chip chip--clickable ${affIndices.includes(i + 1) ? "" : "chip--outlined"}`}
+                style={affIndices.includes(i + 1) ? { background: "var(--primary-color)", color: "#000" } : {}}
+                onClick={() => toggleAff(i + 1)}
+              >
+                {i + 1}. {aff.name}
+              </span>
+            ))}
+          </div>
+        )}
+
+        <input
+          className="form-input"
+          placeholder="New affiliation (optional), e.g. Hugging Face"
+          value={newAffName}
+          onChange={(e) => setNewAffName(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
+          style={{ marginTop: 12 }}
+        />
+      </div>
+      <div className="ed-dialog__actions">
+        <button className="btn" onClick={handleCancel}>Cancel</button>
+        <button
+          className="btn btn--primary"
+          onClick={handleSubmit}
+          disabled={!name.trim()}
+        >
+          {initial ? "Save" : "Add"}
+        </button>
+      </div>
+    </dialog>
+  );
+}

frontend/src/editor/frontmatter/AuthorsManager.tsx

@@ -0,0 +1,326 @@
+import { useState, useRef, useEffect } from "react";
+import {
+  ChevronUp,
+  ChevronDown,
+  Pencil,
+  Trash2,
+  Plus,
+  ExternalLink,
+} from "lucide-react";
+import { AuthorInlineForm } from "./AuthorInlineForm";
+import type { FrontmatterStore, Author, Affiliation } from "./frontmatter-store";
+
+interface AuthorsManagerProps {
+  open: boolean;
+  store: FrontmatterStore;
+  authors: Author[];
+  affiliations: Affiliation[];
+  onClose: () => void;
+}
+
+/**
+ * One-stop modal to manage the article byline: add/edit/remove authors,
+ * add/edit/remove affiliations, and reorder both lists with explicit
+ * up/down controls (the discoverable replacement for the invisible inline
+ * drag). All mutations go through the FrontmatterStore so they stay
+ * collaborative + undoable; reordering or deleting an affiliation remaps
+ * every author's 1-based references inside the store.
+ */
+export function AuthorsManager({
+  open,
+  store,
+  authors,
+  affiliations,
+  onClose,
+}: AuthorsManagerProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  // `null` = closed, `"new"` = add form, number = edit author at that index.
+  const [authorForm, setAuthorForm] = useState<number | "new" | null>(null);
+  const [newAffName, setNewAffName] = useState("");
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) {
+      setAuthorForm(null);
+      setNewAffName("");
+      dialog.showModal();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [open]);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const onCloseEvent = () => onClose();
+    dialog.addEventListener("close", onCloseEvent);
+    return () => dialog.removeEventListener("close", onCloseEvent);
+  }, [onClose]);
+
+  const multipleAffiliations = affiliations.length > 1;
+
+  const submitAuthorForm = (author: Author, newAff?: Affiliation) => {
+    const finalAuthor = { ...author };
+    if (newAff) {
+      const idx = store.addAffiliation(newAff);
+      finalAuthor.affiliations = [...finalAuthor.affiliations, idx];
+    }
+    if (authorForm === "new") {
+      store.addAuthor(finalAuthor);
+    } else if (typeof authorForm === "number") {
+      store.updateAuthor(authorForm, finalAuthor);
+    }
+    setAuthorForm(null);
+  };
+
+  const addAffiliation = () => {
+    const name = newAffName.trim();
+    if (!name) return;
+    store.addAffiliation({ name });
+    setNewAffName("");
+  };
+
+  return (
+    <dialog ref={dialogRef} className="ed-dialog ed-dialog--manager">
+      <h3 className="ed-dialog__title">Authors &amp; affiliations</h3>
+
+      <div className="ed-dialog__body authors-manager">
+        {/* ---- Authors ---- */}
+        <section className="am-section">
+          <div className="am-section__head">
+            <span className="am-section__title">Authors</span>
+            <button
+              className="btn btn--primary am-add-btn"
+              onClick={() => setAuthorForm("new")}
+            >
+              <Plus size={14} />
+              <span>Add author</span>
+            </button>
+          </div>
+
+          {authors.length === 0 ? (
+            <p className="am-empty">No authors yet.</p>
+          ) : (
+            <ul className="am-list">
+              {authors.map((author, i) => (
+                <li className="am-row" key={`am-author-${i}`}>
+                  <div className="am-row__reorder">
+                    <button
+                      className="icon-btn icon-btn--sm"
+                      aria-label="Move up"
+                      disabled={i === 0}
+                      onClick={() => store.moveAuthor(i, i - 1)}
+                    >
+                      <ChevronUp size={14} />
+                    </button>
+                    <button
+                      className="icon-btn icon-btn--sm"
+                      aria-label="Move down"
+                      disabled={i === authors.length - 1}
+                      onClick={() => store.moveAuthor(i, i + 1)}
+                    >
+                      <ChevronDown size={14} />
+                    </button>
+                  </div>
+
+                  <div className="am-row__main">
+                    <span className="am-row__name">
+                      {author.name || <em className="am-muted">Unnamed</em>}
+                      {multipleAffiliations && author.affiliations?.length > 0 && (
+                        <sup className="am-row__affs">
+                          {[...author.affiliations].sort((a, b) => a - b).join(",")}
+                        </sup>
+                      )}
+                    </span>
+                    {author.url && (
+                      <a
+                        className="am-row__url"
+                        href={author.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <ExternalLink size={11} />
+                        <span>{prettyUrl(author.url)}</span>
+                      </a>
+                    )}
+                  </div>
+
+                  <div className="am-row__actions">
+                    <button
+                      className="icon-btn icon-btn--sm"
+                      aria-label="Edit author"
+                      onClick={() => setAuthorForm(i)}
+                    >
+                      <Pencil size={14} />
+                    </button>
+                    <button
+                      className="icon-btn icon-btn--sm am-row__danger"
+                      aria-label="Remove author"
+                      onClick={() => store.removeAuthor(i)}
+                    >
+                      <Trash2 size={14} />
+                    </button>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+
+        {/* ---- Affiliations ---- */}
+        <section className="am-section">
+          <div className="am-section__head">
+            <span className="am-section__title">Affiliations</span>
+          </div>
+
+          {affiliations.length === 0 ? (
+            <p className="am-empty">
+              No affiliations yet. Add one below, then attach it to authors.
+            </p>
+          ) : (
+            <ol className="am-list am-list--aff">
+              {affiliations.map((aff, i) => (
+                <AffiliationRow
+                  key={`am-aff-${i}`}
+                  index={i}
+                  total={affiliations.length}
+                  affiliation={aff}
+                  store={store}
+                />
+              ))}
+            </ol>
+          )}
+
+          <div className="am-add-row">
+            <input
+              className="form-input"
+              placeholder="New affiliation, e.g. Hugging Face"
+              value={newAffName}
+              onChange={(e) => setNewAffName(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && addAffiliation()}
+            />
+            <button
+              className="btn"
+              onClick={addAffiliation}
+              disabled={!newAffName.trim()}
+            >
+              <Plus size={14} />
+              <span>Add</span>
+            </button>
+          </div>
+        </section>
+      </div>
+
+      <div className="ed-dialog__actions">
+        <button className="btn btn--primary" onClick={() => dialogRef.current?.close()}>
+          Done
+        </button>
+      </div>
+
+      {/* Author add/edit form, stacked on top of this dialog. */}
+      <AuthorInlineForm
+        open={authorForm !== null}
+        initial={typeof authorForm === "number" ? authors[authorForm] : undefined}
+        affiliations={affiliations}
+        onSubmit={submitAuthorForm}
+        onCancel={() => setAuthorForm(null)}
+      />
+    </dialog>
+  );
+}
+
+/**
+ * Single affiliation row with inline name + URL editing. Keeps a local draft
+ * so typing doesn't round-trip through Yjs on every keystroke; commits on
+ * blur / Enter only when the value actually changed.
+ */
+function AffiliationRow({
+  index,
+  total,
+  affiliation,
+  store,
+}: {
+  index: number;
+  total: number;
+  affiliation: Affiliation;
+  store: FrontmatterStore;
+}) {
+  const [name, setName] = useState(affiliation.name);
+  const [url, setUrl] = useState(affiliation.url || "");
+
+  useEffect(() => setName(affiliation.name), [affiliation.name]);
+  useEffect(() => setUrl(affiliation.url || ""), [affiliation.url]);
+
+  const commit = () => {
+    const nextName = name.trim();
+    const nextUrl = url.trim();
+    if (nextName === affiliation.name && nextUrl === (affiliation.url || "")) return;
+    if (!nextName) {
+      // Don't allow blanking the name: revert to the stored value.
+      setName(affiliation.name);
+      return;
+    }
+    store.updateAffiliation(index, {
+      name: nextName,
+      url: nextUrl || undefined,
+    });
+  };
+
+  return (
+    <li className="am-row am-row--aff">
+      <span className="am-row__index">{index + 1}.</span>
+
+      <div className="am-row__reorder">
+        <button
+          className="icon-btn icon-btn--sm"
+          aria-label="Move up"
+          disabled={index === 0}
+          onClick={() => store.moveAffiliation(index, index - 1)}
+        >
+          <ChevronUp size={14} />
+        </button>
+        <button
+          className="icon-btn icon-btn--sm"
+          aria-label="Move down"
+          disabled={index === total - 1}
+          onClick={() => store.moveAffiliation(index, index + 1)}
+        >
+          <ChevronDown size={14} />
+        </button>
+      </div>
+
+      <div className="am-row__fields">
+        <input
+          className="form-input"
+          placeholder="Affiliation name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          onBlur={commit}
+          onKeyDown={(e) => e.key === "Enter" && (e.target as HTMLInputElement).blur()}
+        />
+        <input
+          className="form-input"
+          placeholder="URL (optional)"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          onBlur={commit}
+          onKeyDown={(e) => e.key === "Enter" && (e.target as HTMLInputElement).blur()}
+        />
+      </div>
+
+      <button
+        className="icon-btn icon-btn--sm am-row__danger"
+        aria-label="Remove affiliation"
+        onClick={() => store.removeAffiliation(index)}
+      >
+        <Trash2 size={14} />
+      </button>
+    </li>
+  );
+}
+
+/** Strip protocol + trailing slash for a compact URL label. */
+function prettyUrl(url: string): string {
+  return url.replace(/^https?:\/\//, "").replace(/\/$/, "");
+}

frontend/src/editor/frontmatter/FrontmatterHero.tsx

@@ -1,11 +1,12 @@
 import { useState, useRef, useEffect, useMemo, type KeyboardEvent } from "react";
 import { Tooltip } from "../../components/Tooltip";
-import { Plus, ImagePlus, BarChart3, Trash2, PencilLine } from "lucide-react";
+import { Plus, ImagePlus, BarChart3, Trash2, PencilLine, Pencil } from "lucide-react";
 import { useFrontmatter } from "./useFrontmatter";
 import { buildDoc } from "../embeds/build-doc";
 import { useTheme } from "../../hooks/useTheme";
 import { uploadImage } from "../upload";
-import type { FrontmatterStore, Author, Affiliation } from "./frontmatter-store";
+import { AuthorsManager } from "./AuthorsManager";
+import type { FrontmatterStore } from "./frontmatter-store";
 import type { EmbedStore } from "../embeds/embed-store";
 
 const BANNER_KEY = "banner.html";
@@ -27,17 +28,13 @@ interface FrontmatterHeroProps {
 
 export function FrontmatterHero({ store, embedStore }: FrontmatterHeroProps) {
   const { data, update } = useFrontmatter(store);
-  const [editingAuthorIdx, setEditingAuthorIdx] = useState<number | null>(null);
-  const [showAuthorForm, setShowAuthorForm] = useState(false);
-
-  // Drag-and-drop reordering state for the meta header. `drag` is the index
-  // being dragged, `over` the index currently hovered as a drop target. Both
-  // reset on drop / dragend. Authors and affiliations track their own pair so
-  // a drag in one list never highlights the other.
-  const [dragAuthor, setDragAuthor] = useState<number | null>(null);
-  const [overAuthor, setOverAuthor] = useState<number | null>(null);
-  const [dragAff, setDragAff] = useState<number | null>(null);
-  const [overAff, setOverAff] = useState<number | null>(null);
+  // Single entry point for all byline editing (add/edit/remove/reorder of
+  // authors and affiliations). Reordering used to be an undiscoverable inline
+  // drag; it now lives in this modal behind an explicit affordance.
+  const [showManager, setShowManager] = useState(false);
+  const openManager = () => {
+    if (store) setShowManager(true);
+  };
 
   const bannerSrc = data?.banner || "";
   const [bannerHtml, setBannerHtml] = useState("");
@@ -212,91 +209,42 @@ export function FrontmatterHero({ store, embedStore }: FrontmatterHeroProps) {
             <h3>Authors</h3>
             {hasAuthors ? (
               <ul className="authors">
-                {data.authors.map((author, i) => {
-                  const canReorder = data.authors.length > 1;
-                  const cls = [
-                    "author-item",
-                    dragAuthor === i ? "author-item--dragging" : "",
-                    overAuthor === i && dragAuthor !== null && dragAuthor !== i
-                      ? "author-item--dragover"
-                      : "",
-                  ]
-                    .filter(Boolean)
-                    .join(" ");
-                  return (
-                    <li
-                      key={`author-${i}`}
-                      className={cls}
-                      draggable={canReorder}
-                      title={canReorder ? "Drag to reorder" : undefined}
-                      onDragStart={(e) => {
-                        setDragAuthor(i);
-                        e.dataTransfer.effectAllowed = "move";
-                      }}
-                      onDragOver={(e) => {
-                        if (dragAuthor === null) return;
-                        e.preventDefault();
-                        e.dataTransfer.dropEffect = "move";
-                        if (overAuthor !== i) setOverAuthor(i);
-                      }}
-                      onDragLeave={() =>
-                        setOverAuthor((v) => (v === i ? null : v))
-                      }
-                      onDrop={(e) => {
-                        e.preventDefault();
-                        if (dragAuthor !== null && dragAuthor !== i) {
-                          store?.moveAuthor(dragAuthor, i);
-                        }
-                        setDragAuthor(null);
-                        setOverAuthor(null);
-                      }}
-                      onDragEnd={() => {
-                        setDragAuthor(null);
-                        setOverAuthor(null);
-                      }}
+                {data.authors.map((author, i) => (
+                  <li key={`author-${i}`}>
+                    <span
+                      className="author-editable"
+                      onClick={openManager}
+                      title="Manage authors & affiliations"
                     >
-                      <span
-                        className="author-editable"
-                        onClick={() => setEditingAuthorIdx(i)}
-                      >
-                        {author.url ? (
-                          <a
-                            href={author.url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            draggable={false}
-                          >
-                            {author.name}
-                          </a>
-                        ) : (
-                          author.name
-                        )}
-                        {multipleAffiliations && author.affiliations?.length > 0 && (
-                          <sup>{author.affiliations.join(",")}</sup>
-                        )}
-                      </span>
-                      {i < data.authors.length - 1 && <>,&nbsp;</>}
-                    </li>
-                  );
-                })}
+                      {author.url ? (
+                        <a href={author.url} target="_blank" rel="noopener noreferrer">
+                          {author.name}
+                        </a>
+                      ) : (
+                        author.name
+                      )}
+                      {multipleAffiliations && author.affiliations?.length > 0 && (
+                        <sup>{author.affiliations.join(",")}</sup>
+                      )}
+                    </span>
+                    {i < data.authors.length - 1 && <>,&nbsp;</>}
+                  </li>
+                ))}
                 <li className="author-add-btn">
-                  <Tooltip title="Add author">
+                  <Tooltip title="Manage authors & affiliations">
                     <button
                       className="icon-btn"
-                      onClick={() => setShowAuthorForm(true)}
-                      aria-label="Add author"
+                      onClick={openManager}
+                      aria-label="Manage authors and affiliations"
                       style={{ padding: 2 }}
                     >
-                      <Plus size={14} />
+                      <Pencil size={13} />
                     </button>
                   </Tooltip>
                 </li>
               </ul>
             ) : (
-              <button
-                className="meta-placeholder-btn"
-                onClick={() => setShowAuthorForm(true)}
-              >
+              <button className="meta-placeholder-btn" onClick={openManager}>
                 <Plus size={14} />
                 <span>Add author</span>
               </button>
@@ -307,67 +255,29 @@ export function FrontmatterHero({ store, embedStore }: FrontmatterHeroProps) {
             <div className="meta-container-cell">
               <h3>Affiliations</h3>
               {multipleAffiliations ? (
-                <ol className="affiliations">
-                  {data.affiliations.map((aff, i) => {
-                    const cls = [
-                      "aff-item",
-                      dragAff === i ? "aff-item--dragging" : "",
-                      overAff === i && dragAff !== null && dragAff !== i
-                        ? "aff-item--dragover"
-                        : "",
-                    ]
-                      .filter(Boolean)
-                      .join(" ");
-                    return (
-                      <li
-                        key={`aff-${i}`}
-                        className={cls}
-                        draggable
-                        title="Drag to reorder"
-                        onDragStart={(e) => {
-                          setDragAff(i);
-                          e.dataTransfer.effectAllowed = "move";
-                        }}
-                        onDragOver={(e) => {
-                          if (dragAff === null) return;
-                          e.preventDefault();
-                          e.dataTransfer.dropEffect = "move";
-                          if (overAff !== i) setOverAff(i);
-                        }}
-                        onDragLeave={() =>
-                          setOverAff((v) => (v === i ? null : v))
-                        }
-                        onDrop={(e) => {
-                          e.preventDefault();
-                          if (dragAff !== null && dragAff !== i) {
-                            store?.moveAffiliation(dragAff, i);
-                          }
-                          setDragAff(null);
-                          setOverAff(null);
-                        }}
-                        onDragEnd={() => {
-                          setDragAff(null);
-                          setOverAff(null);
-                        }}
-                      >
-                        {aff.url ? (
-                          <a
-                            href={aff.url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            draggable={false}
-                          >
-                            {aff.name}
-                          </a>
-                        ) : (
-                          aff.name
-                        )}
-                      </li>
-                    );
-                  })}
+                <ol
+                  className="affiliations affiliations--clickable"
+                  onClick={openManager}
+                  title="Manage authors & affiliations"
+                >
+                  {data.affiliations.map((aff, i) => (
+                    <li key={`aff-${i}`}>
+                      {aff.url ? (
+                        <a href={aff.url} target="_blank" rel="noopener noreferrer">
+                          {aff.name}
+                        </a>
+                      ) : (
+                        aff.name
+                      )}
+                    </li>
+                  ))}
                 </ol>
               ) : (
-                <p>
+                <p
+                  className="affiliations--clickable"
+                  onClick={openManager}
+                  title="Manage authors & affiliations"
+                >
                   {data.affiliations[0].url ? (
                     <a href={data.affiliations[0].url} target="_blank" rel="noopener noreferrer">
                       {data.affiliations[0].name}
@@ -392,38 +302,15 @@ export function FrontmatterHero({ store, embedStore }: FrontmatterHeroProps) {
         </div>
       </header>
 
-      <AuthorInlineForm
-        open={showAuthorForm}
-        affiliations={data.affiliations}
-        onSubmit={(author, newAff) => {
-          if (newAff) {
-            const idx = store!.addAffiliation(newAff);
-            author.affiliations = [...author.affiliations, idx];
-          }
-          store?.addAuthor(author);
-          setShowAuthorForm(false);
-        }}
-        onCancel={() => setShowAuthorForm(false)}
-      />
-
-      <div style={{ maxWidth: 680, margin: "0 auto", padding: "0 16px" }}>
-        {editingAuthorIdx !== null && data.authors[editingAuthorIdx] && (
-          <AuthorInlineForm
-            open={true}
-            initial={data.authors[editingAuthorIdx]}
-            affiliations={data.affiliations}
-            onSubmit={(author, newAff) => {
-              if (newAff) {
-                const idx = store!.addAffiliation(newAff);
-                author.affiliations = [...author.affiliations, idx];
-              }
-              store?.updateAuthor(editingAuthorIdx, author);
-              setEditingAuthorIdx(null);
-            }}
-            onCancel={() => setEditingAuthorIdx(null)}
-          />
-        )}
-      </div>
+      {store && (
+        <AuthorsManager
+          open={showManager}
+          store={store}
+          authors={data.authors}
+          affiliations={data.affiliations}
+          onClose={() => setShowManager(false)}
+        />
+      )}
     </div>
   );
 }
@@ -566,128 +453,3 @@ function EditableText({ value, placeholder, onChange, className, multiline, inli
     </span>
   );
 }
-
-function AuthorInlineForm({
-  open,
-  initial,
-  affiliations,
-  onSubmit,
-  onCancel,
-}: {
-  open: boolean;
-  initial?: Author;
-  affiliations: Affiliation[];
-  onSubmit: (author: Author, newAffiliation?: Affiliation) => void;
-  onCancel: () => void;
-}) {
-  const [name, setName] = useState(initial?.name || "");
-  const [url, setUrl] = useState(initial?.url || "");
-  const [affIndices, setAffIndices] = useState<number[]>(initial?.affiliations || []);
-  const [newAffName, setNewAffName] = useState("");
-  const nameRef = useRef<HTMLInputElement>(null);
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (open && !dialog.open) {
-      setName(initial?.name || "");
-      setUrl(initial?.url || "");
-      setAffIndices(initial?.affiliations || []);
-      setNewAffName("");
-      dialog.showModal();
-      setTimeout(() => nameRef.current?.focus(), 50);
-    } else if (!open && dialog.open) {
-      dialog.close();
-    }
-  }, [open, initial]);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    const onClose = () => onCancel();
-    dialog.addEventListener("close", onClose);
-    return () => dialog.removeEventListener("close", onClose);
-  }, [onCancel]);
-
-  const handleSubmit = () => {
-    if (!name.trim()) return;
-    const newAff = newAffName.trim() ? { name: newAffName.trim() } : undefined;
-    onSubmit(
-      { name: name.trim(), url: url.trim() || undefined, affiliations: affIndices },
-      newAff,
-    );
-  };
-
-  const handleCancel = () => {
-    dialogRef.current?.close();
-    onCancel();
-  };
-
-  const toggleAff = (idx: number) => {
-    setAffIndices((prev) =>
-      prev.includes(idx) ? prev.filter((i) => i !== idx) : [...prev, idx],
-    );
-  };
-
-  return (
-    <dialog ref={dialogRef} className="ed-dialog ed-dialog--author">
-      <h3 className="ed-dialog__title">
-        {initial ? "Edit author" : "Add author"}
-      </h3>
-      <div className="ed-dialog__body">
-        <div className="author-form__row">
-          <input
-            ref={nameRef}
-            className="form-input"
-            placeholder="Name"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
-          />
-          <input
-            className="form-input"
-            placeholder="URL (optional)"
-            value={url}
-            onChange={(e) => setUrl(e.target.value)}
-            onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
-          />
-        </div>
-
-        {affiliations.length > 0 && (
-          <div className="author-form__chips" style={{ marginTop: 12 }}>
-            {affiliations.map((aff, i) => (
-              <span
-                key={`aff-select-${i}`}
-                className={`chip chip--clickable ${affIndices.includes(i + 1) ? "" : "chip--outlined"}`}
-                style={affIndices.includes(i + 1) ? { background: "var(--primary-color)", color: "#000" } : {}}
-                onClick={() => toggleAff(i + 1)}
-              >
-                {i + 1}. {aff.name}
-              </span>
-            ))}
-          </div>
-        )}
-
-        <input
-          className="form-input"
-          placeholder="New affiliation (optional), e.g. Hugging Face"
-          value={newAffName}
-          onChange={(e) => setNewAffName(e.target.value)}
-          onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
-          style={{ marginTop: 12 }}
-        />
-      </div>
-      <div className="ed-dialog__actions">
-        <button className="btn" onClick={handleCancel}>Cancel</button>
-        <button
-          className="btn btn--primary"
-          onClick={handleSubmit}
-          disabled={!name.trim()}
-        >
-          {initial ? "Save" : "Add"}
-        </button>
-      </div>
-    </dialog>
-  );
-}

frontend/src/editor/frontmatter/frontmatter-store.ts

@@ -227,6 +227,39 @@ export function createFrontmatterStore(ydoc: Y.Doc) {
     });
   }
 
+  function updateAffiliation(index: number, affiliation: Affiliation) {
+    if (index >= 0 && index < yAffiliations.length) {
+      ydoc.transact(() => {
+        yAffiliations.delete(index, 1);
+        yAffiliations.insert(index, [affiliation]);
+      });
+    }
+  }
+
+  /**
+   * Remove an affiliation and reconcile every author's 1-based references:
+   * drop the references to the deleted one, then shift higher indices down by
+   * one so the remaining superscripts keep pointing at the right institution.
+   */
+  function removeAffiliation(index: number) {
+    const len = yAffiliations.length;
+    if (index < 0 || index >= len) return;
+    const removed = index + 1; // 1-based id used by authors
+    ydoc.transact(() => {
+      yAffiliations.delete(index, 1);
+      const authors = yAuthors.toArray();
+      yAuthors.delete(0, yAuthors.length);
+      yAuthors.push(
+        authors.map((a) => ({
+          ...a,
+          affiliations: (a.affiliations || [])
+            .filter((idx) => idx !== removed)
+            .map((idx) => (idx > removed ? idx - 1 : idx)),
+        })),
+      );
+    });
+  }
+
   // --- Observe all changes ---
 
   function observe(callback: () => void) {
@@ -254,6 +287,8 @@ export function createFrontmatterStore(ydoc: Y.Doc) {
     moveAuthor,
     addAffiliation,
     moveAffiliation,
+    updateAffiliation,
+    removeAffiliation,
     observe,
   };
 }

frontend/src/styles/_ui.css

@@ -969,6 +969,133 @@ textarea.form-input { resize: vertical; min-height: 60px; }
 .author-form__chips { display: flex; flex-wrap: wrap; gap: 4px; }
 dialog.ed-dialog.ed-dialog--author { max-width: 480px; }
 
+/* ---- Authors & affiliations manager (rendered inside .ed-dialog) ---- */
+dialog.ed-dialog.ed-dialog--manager { max-width: 600px; }
+
+.authors-manager {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+  /* Tall bylines shouldn't push the action bar off-screen. */
+  max-height: min(70vh, 640px);
+  overflow-y: auto;
+}
+
+.am-section { display: flex; flex-direction: column; gap: 8px; }
+.am-section__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.am-section__title {
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--ed-text-secondary);
+}
+.am-add-btn { padding: 4px 10px; }
+
+.am-empty {
+  margin: 0;
+  font-size: 0.82rem;
+  color: var(--ed-text-disabled);
+  font-style: italic;
+}
+
+.am-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.am-list--aff { counter-reset: none; }
+
+.am-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border: 1px solid var(--ed-border);
+  border-radius: var(--ed-radius-sm);
+  background: var(--ed-bg);
+}
+
+.am-row__index {
+  flex-shrink: 0;
+  width: 1.4em;
+  text-align: right;
+  font-size: 0.8rem;
+  color: var(--ed-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.am-row__reorder {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: 1px;
+}
+.am-row__reorder .icon-btn { padding: 1px; }
+.am-row__reorder .icon-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.am-row__main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.am-row__name {
+  font-size: 0.9rem;
+  color: var(--ed-text);
+  font-weight: 500;
+}
+.am-row__affs {
+  font-size: 0.65em;
+  color: var(--primary-color);
+  margin-left: 1px;
+}
+.am-muted { color: var(--ed-text-disabled); font-weight: 400; }
+.am-row__url {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 0.72rem;
+  color: var(--ed-text-secondary);
+  text-decoration: none;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.am-row__url:hover { color: var(--primary-color); }
+
+.am-row__fields {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  gap: 6px;
+}
+.am-row__fields .form-input { padding: 5px 8px; font-size: 0.82rem; }
+
+.am-row__actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
+.am-row__danger:hover { color: var(--ed-error); background: color-mix(in srgb, var(--ed-error) 12%, transparent); }
+
+.am-add-row { display: flex; gap: 6px; margin-top: 2px; }
+.am-add-row .form-input { flex: 1; }
+.am-add-row .btn { flex-shrink: 0; }
+
+@media (max-width: 560px) {
+  .am-row__fields { flex-direction: column; }
+}
+
 /* ---- Demo-only: agent live-rewrite highlight --------------------------
    Two cooperating states visualize the AI agent's work on a selected
    paragraph during the recorded demo:

frontend/src/styles/editor/_hero-editable.css

@@ -73,21 +73,11 @@
 }
 .author-editable:hover { background: var(--bg-hover); }
 
-/* ---- Drag-and-drop reordering (authors + affiliations) ---- */
-/* Editor-only: lives in _hero-editable.css so the drop affordances never
-   leak into published HTML, which loads _hero.css but not this file. */
-
-.author-item[draggable="true"] { cursor: grab; }
-.author-item--dragging { opacity: 0.4; }
-/* Authors flow horizontally (flex row), so the drop marker is a left edge. */
-.author-item--dragover { box-shadow: inset 2px 0 0 0 var(--primary-color); }
-
-.affiliations li[draggable="true"] { cursor: grab; }
-.affiliations li.aff-item--dragging { opacity: 0.4; }
-/* Affiliations stack vertically (ol), so the drop marker is a top edge. */
-.affiliations li.aff-item--dragover {
-  box-shadow: inset 0 2px 0 0 var(--primary-color);
-}
+/* Affiliations open the same manager modal on click (editor-only). The
+   pointer cursor + subtle hover signal they're interactive without leaking
+   into the published article, which loads _hero.css but not this file. */
+.affiliations--clickable { cursor: pointer; border-radius: 4px; }
+.affiliations--clickable:hover { background: var(--bg-hover); }
 
 .author-add-btn {
   display: inline-flex;