@tokenoftrust/storefront-runner 2.0.2 → 2.0.4

package/apps/storefront/src/components/admin/AdminBlogDetailRail.astro

@@ -1,878 +0,0 @@
----
-/**
- * Blog detail rail — B2.3 of docs/plans/2026-08-21-blog-platform-workstream.md.
- *
- * A row-select side-out for the admin Blog tab, mirroring the established
- * OrdersWorkspace pattern (components/admin/orders/OrdersWorkspace.astro): the
- * list panel and this sticky `aside` sit in a two-column workspace; one hidden
- * `[data-blog-detail-record]` is pre-rendered per post and the row-select script
- * toggles which one is visible + which row is `.selected`. Records are keyed by
- * `(collection, slug)` — the same `data-collection`/`data-slug` the B2.1 table
- * rows already carry — so this component adds NO markup to the table itself
- * (keeps merge friction with the concurrent B3.4 editor low).
- *
- * The rail shows: status, category/pillar, tags (claim tags), author, last-saved,
- * a preview link, a Draft→Preview→Publish→Live lifecycle timeline, the primary
- * Publish/Unpublish action, and Edit/Duplicate/Delete. Publish/Unpublish/Duplicate/
- * Delete ride the SAME content-only fast lane as the table (POST /api/admin/blog);
- * they open a content-only change to review & promote in the Publish tab. Edit
- * (in-browser authoring) is B3.4 — stubbed disabled here.
- *
- * B3.2 adds a Versions panel: per-post git-backed revision history (list +
- * diff) read through `/api/admin/blog-history` (MCP's session-authenticated
- * `repo_commits` / `repo_diff`, `@/lib/forge`). Restore re-submits a prior
- * revision's raw content through the SAME content-only fast lane (POST to
- * the same route, `action:"restore"`) — no new write path.
- */
-import { categorySlug } from "@/lib/blog/collection.js";
-import { REACTIONS, type Reaction } from "@/lib/blog/reactions.js";
-import type { BlogPostSummary, PostStatus } from "@/lib/blog/types.js";
-
-interface Props {
-  rows: { collection: string; post: BlogPostSummary }[];
-  /**
-   * C1 editorial link-out: per-post open candidate PR, keyed `"<collection> <slug>"`.
-   * Present only when the post has an OPEN candidate awaiting review; absent ⇒ the
-   * post is idle/published and no Discussion link renders.
-   */
-  discussions?: Record<string, { prNumber: number; url: string }>;
-  /**
-   * E1.2 reader reaction tallies, keyed `"<collection> <slug>"` (same key as the
-   * record). Absent ⇒ no counts fetched (all-zero line renders).
-   */
-  reactions?: Record<string, Record<Reaction, number>>;
-}
-
-const { rows, discussions = {}, reactions = {} } = Astro.props;
-
-const REACTION_META: Record<Reaction, { emoji: string; label: string }> = {
-  like: { emoji: "👍", label: "Like" },
-  insightful: { emoji: "💡", label: "Insightful" },
-  celebrate: { emoji: "🎉", label: "Celebrate" },
-};
-
-const STATUS_LABEL: Record<PostStatus, string> = {
-  published: "Published",
-  draft: "Draft",
-  scheduled: "Scheduled",
-  unlisted: "Unlisted",
-};
-const STATUS_TONE: Record<PostStatus, string> = {
-  published: "green",
-  draft: "",
-  scheduled: "blue",
-  unlisted: "amber",
-};
-
-// The published lifecycle the timeline visualises. A post's status maps to the
-// stage it currently occupies; earlier stages render "done", the current stage
-// "current", later stages "pending". "Preview" is a transient stage (a candidate
-// change is open) we can't detect from the post's static status alone, so it is
-// shown as passed once a post is live and pending while it is still a draft.
-const STAGES = ["Draft", "Preview", "Publish", "Live"] as const;
-const STAGE_INDEX: Record<PostStatus, number> = {
-  draft: 0,
-  scheduled: 2,
-  unlisted: 3,
-  published: 3,
-};
-
-const primaryDate = (post: BlogPostSummary) => post.modifiedAt || post.publishedAt;
-const formatDate = (iso: string) => {
-  const d = new Date(iso);
-  return Number.isNaN(d.getTime())
-    ? "—"
-    : d.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
-};
-// Reader URL for a post: /<collection>/<slug>/ (collection id === route base).
-const previewHref = (collection: string, slug: string) => `/${collection}/${slug}/`;
----
-
-<aside
-  class="panel blog-detail-rail"
-  id="blog-detail"
-  aria-labelledby="blog-detail-title"
-  data-blog-detail-root
-  data-selected-collection={rows[0]?.collection ?? ""}
-  data-selected-slug={rows[0]?.post.slug ?? ""}
->
-  {rows.map(({ collection, post }, index) => {
-    const stage = STAGE_INDEX[post.status];
-    const isPublished = post.status === "published";
-    const discussion = discussions[`${collection} ${post.slug}`];
-    const postReactions = reactions[`${collection} ${post.slug}`];
-    return (
-      <div
-        class="blog-detail-record"
-        data-blog-detail-record
-        data-collection={collection}
-        data-slug={post.slug}
-        hidden={index !== 0}
-      >
-        <div class="blog-detail-head">
-          <div class="blog-detail-head-main">
-            <span class={`chip blog-status${STATUS_TONE[post.status] ? " " + STATUS_TONE[post.status] : ""}`}>
-              {STATUS_LABEL[post.status]}
-            </span>
-            <h3 id={index === 0 ? "blog-detail-title" : undefined}>{post.title}</h3>
-            <p class="blog-detail-slug">
-              <code>{collection}/{post.slug}</code>
-            </p>
-          </div>
-        </div>
-
-        <ol class="blog-lifecycle" aria-label="Publishing lifecycle">
-          {STAGES.map((label, i) => (
-            <li
-              class:list={[
-                "blog-lifecycle-step",
-                { done: i < stage, current: i === stage, pending: i > stage },
-              ]}
-              aria-current={i === stage ? "step" : undefined}
-            >
-              <span class="blog-lifecycle-dot" aria-hidden="true"></span>
-              <span class="blog-lifecycle-label">{label}</span>
-            </li>
-          ))}
-        </ol>
-
-        <div class="blog-detail-grid">
-          <div>
-            <span>Category</span>
-            <strong>{post.categories.length > 0 ? post.categories.join(", ") : "—"}</strong>
-          </div>
-          <div>
-            <span>Author</span>
-            <strong>{post.author || "—"}</strong>
-          </div>
-          <div>
-            <span>Last saved</span>
-            <strong>{formatDate(primaryDate(post))}</strong>
-          </div>
-          {post.status === "scheduled" && post.scheduledAt && (
-            <div>
-              <span>Scheduled</span>
-              <strong>{formatDate(post.scheduledAt)}</strong>
-            </div>
-          )}
-        </div>
-
-        <div class="blog-detail-engagement">
-          <span class="blog-detail-engagement-label">Reactions</span>
-          <div class="blog-detail-reactions">
-            {REACTIONS.map((reaction) => (
-              <span class="blog-detail-reaction" title={REACTION_META[reaction].label}>
-                <span aria-hidden="true">{REACTION_META[reaction].emoji}</span>
-                <strong>{postReactions?.[reaction] ?? 0}</strong>
-              </span>
-            ))}
-          </div>
-        </div>
-
-        {post.tags.length > 0 && (
-          <div class="blog-detail-tags">
-            <span class="blog-detail-tags-label">Tags</span>
-            <div class="blog-detail-tags-list">
-              {post.tags.map((tag) => (
-                <span class="chip">{tag}</span>
-              ))}
-            </div>
-          </div>
-        )}
-
-        <a
-          class="blog-detail-preview"
-          href={previewHref(collection, post.slug)}
-          target="_blank"
-          rel="noopener"
-        >
-          <svg><use href="#i-file"></use></svg>
-          <span>{isPublished ? "View on site" : "Preview (visible once published)"}</span>
-        </a>
-
-        {discussion && (
-          <a
-            class="blog-detail-discussion"
-            href={discussion.url}
-            target="_blank"
-            rel="noopener"
-          >
-            <svg><use href="#i-ask"></use></svg>
-            <span>Discussion (#{discussion.prNumber})</span>
-            <span class="blog-detail-discussion-out" aria-hidden="true">↗</span>
-          </a>
-        )}
-
-        <div class="blog-detail-actions">
-          {isPublished ? (
-            <button
-              class="btn"
-              type="button"
-              data-blog-rail-action="unpublish"
-              data-blog-slug={post.slug}
-              data-blog-collection={collection}
-            >
-              Unpublish
-            </button>
-          ) : (
-            <button
-              class="btn primary"
-              type="button"
-              data-blog-rail-action="publish"
-              data-blog-slug={post.slug}
-              data-blog-collection={collection}
-            >
-              Publish
-            </button>
-          )}
-          {/* Edit (in-browser authoring) is B3.4 — inert placeholder here. */}
-          <button
-            class="btn"
-            type="button"
-            data-blog-rail-action="edit"
-            data-blog-slug={post.slug}
-            data-blog-collection={collection}
-            title="In-browser editing arrives with the markdown editor (B3.4)"
-            disabled
-          >
-            Edit
-          </button>
-          <button
-            class="btn"
-            type="button"
-            data-blog-rail-action="duplicate"
-            data-blog-slug={post.slug}
-            data-blog-collection={collection}
-            data-blog-title={post.title}
-          >
-            Duplicate
-          </button>
-          <button
-            class="btn danger"
-            type="button"
-            data-blog-rail-action="delete"
-            data-blog-slug={post.slug}
-            data-blog-collection={collection}
-          >
-            Delete
-          </button>
-          <button
-            class="btn"
-            type="button"
-            data-blog-rail-action="versions"
-            data-blog-slug={post.slug}
-            data-blog-collection={collection}
-            aria-expanded="false"
-            aria-controls={`blog-versions-${collection}-${post.slug}`}
-          >
-            Versions
-          </button>
-        </div>
-
-        <div
-          class="blog-versions"
-          id={`blog-versions-${collection}-${post.slug}`}
-          data-blog-versions
-          hidden
-        >
-          <p class="blog-versions-status" data-blog-versions-status>Loading versions…</p>
-          <ol class="blog-versions-list" data-blog-versions-list></ol>
-        </div>
-      </div>
-    );
-  })}
-</aside>
-
-<style>
-  .blog-detail-rail {
-    position: sticky;
-    top: 86px;
-    display: grid;
-    gap: 12px;
-    align-content: start;
-    padding: 14px;
-    box-shadow: var(--admin-shadow);
-    min-width: 0;
-  }
-
-  .blog-detail-head {
-    padding-bottom: 12px;
-    border-bottom: 1px solid var(--admin-line);
-  }
-  .blog-detail-head h3 {
-    margin: 8px 0 4px;
-    font-size: 20px;
-    overflow-wrap: anywhere;
-  }
-  .blog-detail-slug {
-    margin: 0;
-    font-size: 12px;
-  }
-  .blog-detail-slug code {
-    color: var(--admin-muted);
-    overflow-wrap: anywhere;
-  }
-
-  /* Draft → Preview → Publish → Live mini-timeline. */
-  .blog-lifecycle {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 0;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  .blog-lifecycle-step {
-    display: grid;
-    justify-items: center;
-    gap: 6px;
-    position: relative;
-    padding-top: 4px;
-  }
-  /* Connector line between dots. */
-  .blog-lifecycle-step::before {
-    content: "";
-    position: absolute;
-    top: 10px;
-    left: -50%;
-    width: 100%;
-    height: 2px;
-    background: var(--admin-line-strong);
-  }
-  .blog-lifecycle-step:first-child::before {
-    display: none;
-  }
-  .blog-lifecycle-step.done::before,
-  .blog-lifecycle-step.current::before {
-    background: var(--admin-teal);
-  }
-  .blog-lifecycle-dot {
-    width: 13px;
-    height: 13px;
-    border-radius: 999px;
-    border: 2px solid var(--admin-line-strong);
-    background: var(--admin-surface);
-    z-index: 1;
-  }
-  .blog-lifecycle-step.done .blog-lifecycle-dot {
-    border-color: var(--admin-teal);
-    background: var(--admin-teal);
-  }
-  .blog-lifecycle-step.current .blog-lifecycle-dot {
-    border-color: var(--admin-teal);
-    background: var(--admin-surface);
-    box-shadow: 0 0 0 3px var(--admin-teal-soft);
-  }
-  .blog-lifecycle-label {
-    font-size: 11px;
-    font-weight: 760;
-    color: var(--admin-muted);
-  }
-  .blog-lifecycle-step.current .blog-lifecycle-label,
-  .blog-lifecycle-step.done .blog-lifecycle-label {
-    color: var(--admin-ink);
-  }
-
-  .blog-detail-grid {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 8px;
-  }
-  .blog-detail-grid > div {
-    min-width: 0;
-    padding: 10px;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface-soft);
-  }
-  .blog-detail-grid span {
-    color: var(--admin-muted);
-    font-size: 11px;
-    font-weight: 760;
-    text-transform: uppercase;
-  }
-  .blog-detail-grid strong {
-    display: block;
-    margin-top: 4px;
-    overflow-wrap: anywhere;
-    font-size: 13px;
-  }
-
-  .blog-detail-engagement {
-    display: grid;
-    gap: 6px;
-  }
-  .blog-detail-engagement-label {
-    color: var(--admin-muted);
-    font-size: 11px;
-    font-weight: 760;
-    text-transform: uppercase;
-  }
-  .blog-detail-reactions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-  .blog-detail-reaction {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    padding: 5px 9px;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface-soft);
-    font-size: 13px;
-  }
-  .blog-detail-reaction strong {
-    font-variant-numeric: tabular-nums;
-  }
-
-  .blog-detail-tags {
-    display: grid;
-    gap: 6px;
-  }
-  .blog-detail-tags-label {
-    color: var(--admin-muted);
-    font-size: 11px;
-    font-weight: 760;
-    text-transform: uppercase;
-  }
-  .blog-detail-tags-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-
-  .blog-detail-preview {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 9px 12px;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    color: var(--admin-ink);
-    font-size: 13px;
-    font-weight: 700;
-    text-decoration: none;
-  }
-  .blog-detail-preview svg {
-    width: 15px;
-    height: 15px;
-  }
-  .blog-detail-preview:hover {
-    border-color: var(--admin-teal);
-  }
-
-  .blog-detail-discussion {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 9px 12px;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    color: var(--admin-ink);
-    font-size: 13px;
-    font-weight: 700;
-    text-decoration: none;
-  }
-  .blog-detail-discussion svg {
-    width: 15px;
-    height: 15px;
-  }
-  .blog-detail-discussion:hover {
-    border-color: var(--admin-teal);
-  }
-  .blog-detail-discussion-out {
-    margin-left: auto;
-    color: var(--admin-muted);
-  }
-
-  .blog-detail-actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    padding-top: 12px;
-    border-top: 1px solid var(--admin-line);
-  }
-  .blog-detail-actions .btn.danger {
-    color: var(--admin-danger, #b42318);
-    border-color: var(--admin-danger, #b42318);
-  }
-  .blog-detail-actions .btn.primary {
-    flex: 1 1 auto;
-  }
-
-  .blog-status {
-    text-transform: none;
-  }
-
-  .blog-versions {
-    display: grid;
-    gap: 8px;
-    padding-top: 12px;
-    border-top: 1px solid var(--admin-line);
-  }
-  .blog-versions-status {
-    margin: 0;
-    color: var(--admin-muted);
-    font-size: 12px;
-  }
-  .blog-versions-list {
-    display: grid;
-    gap: 8px;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  .blog-versions-item {
-    display: grid;
-    gap: 6px;
-    padding: 10px;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface-soft);
-  }
-  .blog-versions-item-head {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 8px;
-    flex-wrap: wrap;
-  }
-  .blog-versions-item-message {
-    font-size: 13px;
-    font-weight: 700;
-    overflow-wrap: anywhere;
-  }
-  .blog-versions-item-meta {
-    color: var(--admin-muted);
-    font-size: 11px;
-  }
-  .blog-versions-item-actions {
-    display: flex;
-    gap: 6px;
-  }
-  .blog-versions-item-actions .btn {
-    padding: 5px 10px;
-    font-size: 12px;
-  }
-  .blog-versions-diff {
-    margin: 0;
-    padding: 8px;
-    max-height: 260px;
-    overflow: auto;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-    font-size: 11.5px;
-    line-height: 1.5;
-    white-space: pre-wrap;
-    word-break: break-word;
-  }
-
-  @media (max-width: 1180px) {
-    .blog-detail-rail {
-      position: static;
-    }
-  }
-  @media (max-width: 760px) {
-    .blog-detail-grid {
-      grid-template-columns: 1fr;
-    }
-  }
-</style>
-
-<script is:inline nonce={Astro.locals.cspNonce}>
-  (() => {
-    const root = document.getElementById("blog");
-    const rail = root?.querySelector("[data-blog-detail-root]");
-    if (!root || !rail) return;
-
-    const rows = Array.from(root.querySelectorAll("[data-blog-row]"));
-    const records = Array.from(rail.querySelectorAll("[data-blog-detail-record]"));
-
-    const keyOf = (el) => (el.dataset.collection || "") + "" + (el.dataset.slug || "");
-
-    const select = (collection, slug) => {
-      const key = collection + "" + slug;
-      for (const row of rows) {
-        const on = keyOf(row) === key;
-        row.classList.toggle("selected", on);
-        row.setAttribute("aria-pressed", on ? "true" : "false");
-      }
-      for (const record of records) {
-        record.hidden = keyOf(record) !== key;
-      }
-      rail.dataset.selectedCollection = collection;
-      rail.dataset.selectedSlug = slug;
-    };
-
-    // Make table rows a keyboard-operable "open detail" affordance without editing
-    // the B2.1 table markup: promote each row to a button-like control here.
-    rows.forEach((row) => {
-      row.setAttribute("role", "button");
-      row.setAttribute("tabindex", "0");
-      row.setAttribute("aria-controls", "blog-detail");
-      const open = (event) => {
-        // Don't hijack clicks/keys on the row's own action controls.
-        if (event.target instanceof Element && event.target.closest("button, a, input, select")) {
-          return;
-        }
-        const { collection, slug } = row.dataset;
-        if (collection && slug) select(collection, slug);
-      };
-      row.addEventListener("click", open);
-      row.addEventListener("keydown", (event) => {
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-          open(event);
-        }
-      });
-    });
-
-    // Rail action buttons ride the same content-only fast lane as the table.
-    const msg = root.querySelector("[data-blog-msg]");
-    const showMsg = (text, tone) => {
-      if (!msg) return;
-      msg.textContent = text;
-      if (tone) msg.setAttribute("data-tone", tone);
-      else msg.removeAttribute("data-tone");
-      msg.hidden = !text;
-    };
-    const post = async (payload) => {
-      const res = await fetch("/api/admin/blog", {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify(payload),
-      });
-      let data = {};
-      try {
-        data = await res.json();
-      } catch {
-        /* non-JSON error body */
-      }
-      return { ok: res.ok, status: res.status, data };
-    };
-    const submitted = (data) => {
-      const pr = data && data.prNumber ? " (#" + data.prNumber + ")" : "";
-      showMsg("Change opened" + pr + " — review & publish it in the Publish tab.", null);
-    };
-    const failed = (data, status) => {
-      const why = (data && data.message) || "request failed (" + status + ")";
-      showMsg("Could not complete: " + why, "error");
-    };
-
-    rail.querySelectorAll("[data-blog-rail-action]").forEach((button) => {
-      const action = button.dataset.blogRailAction;
-      // edit is B3.4 (inert); versions is a panel toggle, wired separately below.
-      if (action === "edit" || action === "versions" || button.disabled) return;
-      button.addEventListener("click", async () => {
-        const collection = button.dataset.blogCollection;
-        const slug = button.dataset.blogSlug;
-        if (!collection || !slug) return;
-
-        let payload;
-        if (action === "duplicate") {
-          // Duplicate = create a fresh draft copy via the existing `new` action.
-          const title = ((button.dataset.blogTitle || slug) + " (copy)").trim();
-          payload = { action: "new", collection, title };
-        } else {
-          if (action === "delete" && !confirm('Delete "' + slug + '"? This opens a content-only change.')) {
-            return;
-          }
-          payload = { action, collection, slug };
-        }
-
-        button.disabled = true;
-        showMsg("Working…", null);
-        try {
-          const { ok, status, data } = await post(payload);
-          if (ok && data.ok) submitted(data);
-          else failed(data, status);
-        } catch (err) {
-          failed({ message: String(err) }, 0);
-        } finally {
-          button.disabled = false;
-        }
-      });
-    });
-
-    // Versions panel (B3.2): lazy-loaded git-backed revision history per post,
-    // read via /api/admin/blog-history (repo_commits / repo_diff). Restore rides
-    // the SAME content-only fast lane (postHistory below → the route's own
-    // getChangeClient().openCandidate, keyed by the same blog-<collection>-<slug>
-    // changeId as every other blog action).
-    const shortSha = (sha) => String(sha || "").slice(0, 7);
-    const versionsLoaded = new Set(); // "collection/slug" already fetched once
-
-    const fetchJson = async (url) => {
-      const res = await fetch(url);
-      let data = {};
-      try {
-        data = await res.json();
-      } catch {
-        /* non-JSON error body */
-      }
-      return { ok: res.ok, status: res.status, data };
-    };
-    const postHistory = async (payload) => {
-      const res = await fetch("/api/admin/blog-history", {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify(payload),
-      });
-      let data = {};
-      try {
-        data = await res.json();
-      } catch {
-        /* non-JSON error body */
-      }
-      return { ok: res.ok, status: res.status, data };
-    };
-
-    function renderVersions(panel, collection, slug, commits) {
-      const list = panel.querySelector("[data-blog-versions-list]");
-      const status = panel.querySelector("[data-blog-versions-status]");
-      list.innerHTML = "";
-      if (!commits.length) {
-        status.textContent = "No revision history yet.";
-        status.hidden = false;
-        return;
-      }
-      status.hidden = true;
-
-      commits.forEach((commit, index) => {
-        const li = document.createElement("li");
-        li.className = "blog-versions-item";
-
-        const head = document.createElement("div");
-        head.className = "blog-versions-item-head";
-        const message = document.createElement("span");
-        message.className = "blog-versions-item-message";
-        message.textContent = commit.message || "(no message)";
-        const meta = document.createElement("span");
-        meta.className = "blog-versions-item-meta";
-        const when = commit.date ? new Date(commit.date).toLocaleString() : "";
-        meta.textContent =
-          shortSha(commit.sha) + " · " + (commit.author || "unknown") + (when ? " · " + when : "");
-        head.append(message, meta);
-
-        const actions = document.createElement("div");
-        actions.className = "blog-versions-item-actions";
-
-        const diffBtn = document.createElement("button");
-        diffBtn.type = "button";
-        diffBtn.className = "btn";
-        diffBtn.textContent = "Diff";
-        const parent = commits[index + 1];
-        if (!parent) {
-          diffBtn.disabled = true;
-          diffBtn.title = "No earlier loaded revision to diff against";
-        }
-
-        const restoreBtn = document.createElement("button");
-        restoreBtn.type = "button";
-        restoreBtn.className = "btn";
-        restoreBtn.textContent = "Restore";
-
-        actions.append(diffBtn, restoreBtn);
-        li.append(head, actions);
-
-        const diffPre = document.createElement("pre");
-        diffPre.className = "blog-versions-diff";
-        diffPre.hidden = true;
-        li.append(diffPre);
-
-        diffBtn.addEventListener("click", async () => {
-          if (!diffPre.hidden) {
-            diffPre.hidden = true;
-            return;
-          }
-          if (!parent) return;
-          diffBtn.disabled = true;
-          diffPre.hidden = false;
-          diffPre.textContent = "Loading diff…";
-          const url =
-            "/api/admin/blog-history?collection=" + encodeURIComponent(collection) +
-            "&slug=" + encodeURIComponent(slug) +
-            "&base=" + encodeURIComponent(parent.sha) +
-            "&head=" + encodeURIComponent(commit.sha);
-          const { ok, data } = await fetchJson(url);
-          diffBtn.disabled = false;
-          if (!ok || !data.ok) {
-            diffPre.textContent = "Could not load diff: " + ((data && data.message) || "request failed");
-            return;
-          }
-          const files = data.files || [];
-          diffPre.textContent = files.length
-            ? files.map((f) => f.patch).join("\n\n")
-            : "No changes between these revisions.";
-        });
-
-        restoreBtn.addEventListener("click", async () => {
-          const ok0 = confirm(
-            'Restore "' + slug + '" to revision ' + shortSha(commit.sha) +
-              '? This opens a content-only change.',
-          );
-          if (!ok0) return;
-          restoreBtn.disabled = true;
-          showMsg("Working…", null);
-          try {
-            const { ok, status: code, data } = await postHistory({
-              action: "restore", collection, slug, sha: commit.sha,
-            });
-            if (ok && data.ok) submitted(data);
-            else failed(data, code);
-          } catch (err) {
-            failed({ message: String(err) }, 0);
-          } finally {
-            restoreBtn.disabled = false;
-          }
-        });
-
-        list.append(li);
-      });
-    }
-
-    rail.querySelectorAll('[data-blog-rail-action="versions"]').forEach((button) => {
-      button.addEventListener("click", async () => {
-        const collection = button.dataset.blogCollection;
-        const slug = button.dataset.blogSlug;
-        const controls = button.getAttribute("aria-controls");
-        if (!collection || !slug || !controls) return;
-        const panel = document.getElementById(controls);
-        if (!panel) return;
-
-        const wasHidden = panel.hidden;
-        panel.hidden = !wasHidden;
-        button.setAttribute("aria-expanded", wasHidden ? "true" : "false");
-        if (!wasHidden) return; // just closed — nothing to load
-
-        const key = collection + "/" + slug;
-        if (versionsLoaded.has(key)) return; // already fetched once this page load
-
-        const status = panel.querySelector("[data-blog-versions-status]");
-        const url =
-          "/api/admin/blog-history?collection=" + encodeURIComponent(collection) +
-          "&slug=" + encodeURIComponent(slug);
-        const { ok, data } = await fetchJson(url);
-        if (!ok || !data.ok) {
-          status.textContent = "Could not load versions: " + ((data && data.message) || "request failed");
-          status.hidden = false;
-          return; // leave un-cached so re-opening retries
-        }
-        versionsLoaded.add(key);
-        renderVersions(panel, collection, slug, data.commits || []);
-      });
-    });
-
-    // Default selection: the first row (its record is the one rendered visible).
-    if (rows[0]) {
-      const { collection, slug } = rows[0].dataset;
-      if (collection && slug) select(collection, slug);
-    }
-  })();
-</script>