feat(editor): drag-and-drop reordering for authors and affiliations

Authors and affiliations in the hero meta header can now be reordered by
dragging. Reordering affiliations remaps every author's 1-based affiliation
indices in the same Yjs transaction, so superscripts keep pointing at the
right institution. Drop affordances (grab cursor + primary-color edge
marker) live in the editor-only _hero-editable.css and never leak into the
published HTML.

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

frontend/src/editor/frontmatter/FrontmatterHero.tsx

@@ -30,6 +30,15 @@ export function FrontmatterHero({ store, embedStore }: FrontmatterHeroProps) {
   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);
+
   const bannerSrc = data?.banner || "";
   const [bannerHtml, setBannerHtml] = useState("");
   const [uploadingBanner, setUploadingBanner] = useState(false);
@@ -203,26 +212,73 @@ export function FrontmatterHero({ store, embedStore }: FrontmatterHeroProps) {
             <h3>Authors</h3>
             {hasAuthors ? (
               <ul className="authors">
-                {data.authors.map((author, i) => (
-                  <li key={`author-${i}`}>
-                    <span
-                      className="author-editable"
-                      onClick={() => setEditingAuthorIdx(i)}
+                {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);
+                      }}
                     >
-                      {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>
-                ))}
+                      <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>
+                  );
+                })}
                 <li className="author-add-btn">
                   <Tooltip title="Add author">
                     <button
@@ -252,17 +308,63 @@ export function FrontmatterHero({ store, embedStore }: FrontmatterHeroProps) {
               <h3>Affiliations</h3>
               {multipleAffiliations ? (
                 <ol className="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>
-                  ))}
+                  {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>
               ) : (
                 <p>

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

@@ -169,6 +169,21 @@ export function createFrontmatterStore(ydoc: Y.Doc) {
     }
   }
 
+  /**
+   * Move an author from one position to another. `to` is the desired final
+   * index in the resulting array. No-op when out of range or unchanged.
+   * Authors don't reference each other, so no index remapping is needed.
+   */
+  function moveAuthor(from: number, to: number) {
+    const len = yAuthors.length;
+    if (from === to || from < 0 || to < 0 || from >= len || to >= len) return;
+    ydoc.transact(() => {
+      const item = yAuthors.get(from);
+      yAuthors.delete(from, 1);
+      yAuthors.insert(to, [item]);
+    });
+  }
+
   // --- Affiliations (concurrent-safe) ---
 
   function addAffiliation(affiliation: Affiliation): number {
@@ -176,6 +191,42 @@ export function createFrontmatterStore(ydoc: Y.Doc) {
     return yAffiliations.length; // 1-based index
   }
 
+  /**
+   * Move an affiliation from one position to another. `to` is the desired
+   * final index in the resulting array.
+   *
+   * Authors reference affiliations by their 1-based position, so reordering
+   * the affiliation list would silently re-point every author's superscripts
+   * unless we remap. We compute the old->new position mapping the move
+   * implies and rewrite each author's `affiliations` accordingly, all inside
+   * a single Yjs transaction so collaborators see one atomic update.
+   */
+  function moveAffiliation(from: number, to: number) {
+    const len = yAffiliations.length;
+    if (from === to || from < 0 || to < 0 || from >= len || to >= len) return;
+    ydoc.transact(() => {
+      const aff = yAffiliations.get(from);
+      yAffiliations.delete(from, 1);
+      yAffiliations.insert(to, [aff]);
+
+      // Replay the same move on the index sequence to derive old->new (1-based).
+      const order = Array.from({ length: len }, (_, i) => i);
+      const [moved] = order.splice(from, 1);
+      order.splice(to, 0, moved);
+      const oldToNew = new Map<number, number>();
+      order.forEach((oldPos, newPos) => oldToNew.set(oldPos + 1, newPos + 1));
+
+      const authors = yAuthors.toArray();
+      yAuthors.delete(0, yAuthors.length);
+      yAuthors.push(
+        authors.map((a) => ({
+          ...a,
+          affiliations: (a.affiliations || []).map((idx) => oldToNew.get(idx) ?? idx),
+        })),
+      );
+    });
+  }
+
   // --- Observe all changes ---
 
   function observe(callback: () => void) {
@@ -200,7 +251,9 @@ export function createFrontmatterStore(ydoc: Y.Doc) {
     addAuthor,
     updateAuthor,
     removeAuthor,
+    moveAuthor,
     addAffiliation,
+    moveAffiliation,
     observe,
   };
 }

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

@@ -73,6 +73,22 @@
 }
 .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);
+}
+
 .author-add-btn {
   display: inline-flex;
   align-items: center;