@jant/core 0.6.15 → 0.7.0

package/src/client/components/__tests__/jant-compose-dialog.test.ts

@@ -1,8 +1,7 @@
 // @vitest-environment happy-dom
 
-import { readFileSync } from "node:fs";
-import { resolve } from "node:path";
 import { describe, it, expect, beforeEach, vi } from "vitest";
+import { readComponentCss } from "../../../__tests__/helpers/component-css.js";
 import type { Editor } from "@tiptap/core";
 import { MAX_THREAD_POSTS } from "../../../types.js";
 
@@ -69,6 +68,45 @@ async function flushUpdates(el?: JantComposeDialog) {
   }
 }
 
+async function openPublishPanel(el: JantComposeDialog) {
+  requireElement(
+    el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
+    "expected publish settings toggle",
+  ).click();
+  await flushUpdates(el);
+}
+
+/** Options-panel rows are found by their title — the drafts entries moved off
+ *  the title bar and into that panel. */
+function sheetRow(
+  el: JantComposeDialog,
+  title: string,
+): HTMLButtonElement | null {
+  return (
+    Array.from(
+      el.querySelectorAll<HTMLButtonElement>(
+        ".compose-publish-panel .compose-sheet-row",
+      ),
+    ).find(
+      (row) =>
+        row.querySelector(".compose-sheet-title")?.textContent?.trim() ===
+        title,
+    ) ?? null
+  );
+}
+
+function sheetRowTitles(el: JantComposeDialog): (string | undefined)[] {
+  return Array.from(
+    el.querySelectorAll<HTMLElement>(
+      ".compose-publish-panel .compose-sheet-title",
+    ),
+  ).map((n) => n.textContent?.trim());
+}
+
+function draftsRow(el: JantComposeDialog): HTMLButtonElement | null {
+  return sheetRow(el, "Drafts");
+}
+
 function deferred<T>() {
   let resolve!: (value: T) => void;
   const promise = new Promise<T>((res) => {
@@ -120,6 +158,7 @@ function mockSlugApi(
 
 const labels: ComposeLabels = {
   cancel: "Cancel",
+  close: "Close",
   note: "Note",
   link: "Link",
   quote: "Quote",
@@ -158,7 +197,11 @@ const labels: ComposeLabels = {
   altHint: "Alt text improves accessibility",
   addMore: "Add",
   removeAttachment: "Remove attachment",
+  moveAttachmentEarlier: "Move attachment earlier",
+  moveAttachmentLater: "Move attachment later",
   uploading: "Uploading...",
+  publishing: "Publishing...",
+  saving: "Saving...",
   loadingPost: "Loading post...",
   loadPostFailed: "Couldn't load this post. Try again.",
   published: "Published!",
@@ -169,7 +212,7 @@ const labels: ComposeLabels = {
   confirmCloseTitle: "Save to drafts?",
   confirmCloseSubtitle: "Save to drafts to edit and post at a later time.",
   confirmCloseSave: "Save",
-  confirmCloseCancel: "Cancel",
+  confirmCloseCancel: "Keep editing",
   confirmCloseDiscard: "Don't save",
   confirmAttachedTitle: "Save text attachment?",
   confirmAttachedSubtitle:
@@ -188,14 +231,32 @@ const labels: ComposeLabels = {
   deleteDraft: "Delete Draft",
   draftDeleted: "Draft deleted.",
   publishFailedDraft: "Couldn't publish. Saved as draft.",
+  publishFailed: "Couldn't publish. Try again.",
+  publishFailedOffline: "Couldn't reach the server. Try again.",
   uploadFailedDraft: "Some uploads failed. Saved as draft.",
   addCollection: "Add Collection",
   collectionCountLabel: "%name% + %count% more",
   draftRestored: "Draft restored.",
+  draftStoreFailed: "This browser can't keep a local copy. Save as a draft.",
   reply: "Reply",
   publishHideFromLatest: "Hide from Latest",
   publishPrivate: "Post as Private",
   publishSettings: "Publish settings",
+  languageLabel: "Language",
+  languageAuto: "Detect",
+  languageAutoHint: "Read from what you write",
+  languageAutoDetected: "Read from what you write — looks like {language}",
+  languageAutoPending: "Not enough text to tell yet — publishes in {language}",
+  languageTriggerLabel: "Language: {language}",
+  translationOf: "Translation of “{title}”",
+  translationContext: "Translating",
+  translationContextInLanguage: "Translating into {language}",
+  translationContextOpen: "Open the original in a new tab",
+  translationContextOriginal: "The original",
+  translationContextHide: "Hide",
+  translationContextHideLong: "Hide the original",
+  translationContextShow: "Show",
+  translationContextShowLong: "Show the original",
   publishVisibilityLabel: "Visibility",
   publishVisibilityPublic: "Public",
   publishVisibilityPublicHint: "Appears in Latest.",
@@ -211,13 +272,13 @@ const labels: ComposeLabels = {
   publishDateInvalid: "Enter a valid date.",
   publishDateFutureError:
     "Choose today or an earlier date, or leave it blank to publish now.",
-  publishDateSummaryNow: "Publish now",
+  publishDateSummaryNow: "Now",
   publishDateSummaryAction: "Edit publish date",
   publishSlugLabel: "Custom link",
   publishSlugPlaceholder: "your-post-link",
   publishSlugHint: "Leave blank to generate one automatically.",
   publishSlugAuto: "Generate automatically",
-  publishSlugSummaryAuto: "Auto link",
+  publishSlugSummaryAuto: "Auto",
   publishSlugSummaryAction: "Edit custom link",
   publishSlugReset: "Reset link",
   publishSlugSuggested: "Suggested link",
@@ -233,9 +294,8 @@ const labels: ComposeLabels = {
   threadLimitReached: "Threads can include up to 20 posts.",
   showMore: "Show more",
   showLess: "Show less",
-  newThread: "New Thread",
-  replyTitle: "Reply",
-  editTitle: "Edit",
+  editing: "Editing",
+  composeDialogLabel: "Compose",
   slashHint: "Type / for commands",
   tableControls: {
     toolbarLabel: "Table controls",
@@ -263,13 +323,6 @@ const labels: ComposeLabels = {
     quickHint: "More options are available after you create it.",
     quickSubmitLabel: "Done",
     createdLabel: "Collection created.",
-    descriptionLabel: "Description (optional)",
-    descriptionPlaceholder: "What's this collection about?",
-    sortOrderLabel: "Sort Order",
-    sortNewest: "Newest first",
-    sortOldest: "Oldest first",
-    sortRatingDesc: "Highest rated",
-    submitLabel: "Save",
     cancelLabel: "Cancel",
   },
 };
@@ -279,6 +332,35 @@ const collections: ComposeCollection[] = [
   { id: "col-2", title: "Movies", slug: "movies" },
 ];
 
+/**
+ * Date and permalink hang off the post itself, not the publish panel. Both
+ * fields are open as soon as the panel is, so there is nothing further to
+ * expand. Idempotent.
+ */
+async function openPostMeta(el: JantComposeDialog, index = 0) {
+  const pill = el.querySelectorAll<HTMLButtonElement>(
+    "[data-compose-post-meta-pill]",
+  )[index];
+  if (pill && pill.getAttribute("aria-expanded") !== "true") pill.click();
+  // The slug suggestion is fetched when the panel opens; let it settle.
+  await flushUpdates(el);
+  await flushUpdates(el);
+}
+
+/** The date or permalink as the post's own pill states it. */
+function pillValue(
+  el: JantComposeDialog,
+  kind: "date" | "slug",
+  index = 0,
+): string | undefined {
+  const pill = el.querySelectorAll("[data-compose-post-meta-pill]")[index];
+  const selector =
+    kind === "date"
+      ? ".compose-post-meta-value:not(.compose-post-meta-value-slug)"
+      : ".compose-post-meta-value-slug";
+  return pill?.querySelector(selector)?.textContent?.trim();
+}
+
 async function createElement(
   cols: ComposeCollection[] = collections,
 ): Promise<JantComposeDialog> {
@@ -331,8 +413,11 @@ describe("JantComposeDialog", () => {
   it("renders with collections and labels", async () => {
     const el = await createElement();
 
-    // Header present
-    expect(el.querySelector(".compose-dialog-header")).not.toBeNull();
+    // No title bar: the composer opens straight onto the post header row. A new
+    // post gets no marker either — an empty composer already says that much.
+    expect(el.querySelector(".compose-dialog-header")).toBeNull();
+    expect(el.querySelector(".compose-thread-post-header")).not.toBeNull();
+    expect(el.querySelector(".compose-post-badge")).toBeNull();
 
     // Format buttons present
     const segmentedItems = el.querySelectorAll(".compose-segmented-item");
@@ -350,7 +435,7 @@ describe("JantComposeDialog", () => {
     expect(postBtn.disabled).toBe(true);
     expect(
       requireElement(
-        el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+        el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
         "expected publish settings toggle",
       ).disabled,
     ).toBe(false);
@@ -382,7 +467,6 @@ describe("JantComposeDialog", () => {
             ],
           },
           title: "",
-          showTitle: false,
           selection: { from: 3, to: 3 },
           replyExpanded: false,
         },
@@ -490,7 +574,7 @@ describe("JantComposeDialog", () => {
     const el = await createElement();
 
     requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
       "expected publish settings toggle",
     ).click();
     await el.updateComplete;
@@ -498,15 +582,13 @@ describe("JantComposeDialog", () => {
     expect(el.querySelector(".compose-publish-panel")).not.toBeNull();
   });
 
-  it("updates the draft button label to match its current action", async () => {
+  it("offers saving separately from browsing once there is something to save", async () => {
     const el = await createElement();
+    await openPublishPanel(el);
 
-    const draftButton = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-dialog-draft-btn"),
-      "expected draft button",
-    );
-    expect(draftButton.title).toBe("Drafts");
-    expect(draftButton.getAttribute("aria-label")).toBe("Drafts");
+    // Nothing written yet, so there is only a place to go.
+    expect(sheetRowTitles(el)).toContain("Drafts");
+    expect(sheetRowTitles(el)).not.toContain("Save as draft");
 
     const editor = requireElement(
       el.querySelector<JantComposeEditor>("jant-compose-editor"),
@@ -519,201 +601,1673 @@ describe("JantComposeDialog", () => {
       ],
     };
     await editor.updateComplete;
-    await el.updateComplete;
+    await flushUpdates(el);
 
-    expect(draftButton.title).toBe("Save as draft");
-    expect(draftButton.getAttribute("aria-label")).toBe("Save as draft");
+    // Now both: an action on this post, and the list. Neither label lies about
+    // what its row does.
+    const titles = sheetRowTitles(el);
+    expect(titles).toContain("Save as draft");
+    expect(titles).toContain("Drafts");
+    expect(titles.indexOf("Save as draft")).toBeLessThan(
+      titles.indexOf("Drafts"),
+    );
   });
 
-  it("shows the selected visibility hint in the publish settings panel", async () => {
+  it("saves straight to a draft from its own row, with no prompt in the way", async () => {
     const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        { type: "paragraph", content: [{ type: "text", text: "Hello world" }] },
+      ],
+    };
+    await editor.updateComplete;
+    await flushUpdates(el);
+
+    let detail: ComposeSubmitDetail | null = null;
+    el.addEventListener("jant:compose-submit-deferred", (event) => {
+      detail = (event as CustomEvent<ComposeSubmitDetail>).detail;
+    });
 
+    await openPublishPanel(el);
     requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
-      "expected publish settings toggle",
+      sheetRow(el, "Save as draft"),
+      "expected save-as-draft row",
     ).click();
-    await el.updateComplete;
+    await flushUpdates(el);
 
-    // Default is public — only public hint shown
-    expect(el.textContent).toContain("Appears in Latest.");
-    expect(el.textContent).not.toContain("Only visible when signed in.");
+    expect(el._confirmPanelOpen).toBe(false);
+    expect(el._draftsPanelOpen).toBe(false);
+    expect(detail).not.toBeNull();
+    expect(detail!.status).toBe("draft");
+  });
 
-    // Switch to private — hint updates
-    const chips = el.querySelectorAll<HTMLButtonElement>(
-      ".compose-publish-chip[role='radio']",
+  it("opens options from its own button, not a chevron on Publish", async () => {
+    const el = await createElement();
+
+    // The split button is gone: Publish is one button, options is another.
+    expect(el.querySelector(".compose-publish-toggle")).toBeNull();
+
+    const trigger = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
+      "expected options trigger",
     );
-    chips[2]?.click();
-    await el.updateComplete;
+    expect(trigger.getAttribute("aria-expanded")).toBe("false");
+    expect(el.querySelector(".compose-sheet")).toBeNull();
+
+    trigger.click();
+    await flushUpdates(el);
+
+    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+    expect(el.querySelector(".compose-sheet")).not.toBeNull();
+  });
+
+  describe("language", () => {
+    function languageTrigger(el: JantComposeDialog): HTMLButtonElement | null {
+      return el.querySelector<HTMLButtonElement>(".compose-language-trigger");
+    }
+
+    async function openLanguagePicker(el: JantComposeDialog) {
+      requireElement(languageTrigger(el), "expected language pill").click();
+      await flushUpdates(el);
+    }
+
+    function languageRowTitles(el: JantComposeDialog): string[] {
+      const group = el.querySelector(
+        ".compose-language-popover [role='radiogroup']",
+      );
+      return Array.from(
+        group?.querySelectorAll(".compose-sheet-title") ?? [],
+      ).map((node) => node.textContent?.trim() ?? "");
+    }
+
+    it("shows nothing on a site that publishes one language", async () => {
+      // The whole feature is opt-in: an author who never turned it on should
+      // not meet a language control.
+      const el = await createElement();
+
+      expect(languageTrigger(el)).toBeNull();
+      expect(el.textContent).not.toContain("Detect");
+    });
+
+    it("offers Detect plus each language once the site is multilingual", async () => {
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      await flushUpdates(el);
+      await openLanguagePicker(el);
+
+      expect(languageRowTitles(el)).toEqual(["Detect", "简体中文", "English"]);
+    });
+
+    it("stays a bare globe while the answer is the page you are on", async () => {
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      el.contextLanguage = "en";
+      await flushUpdates(el);
+
+      // Writing English from /en: the globe is the whole message. The answer
+      // is still named for anyone who asks for it.
+      const trigger = requireElement(
+        languageTrigger(el),
+        "expected language pill",
+      );
+      expect(trigger.textContent?.trim()).toBe("");
+      expect(trigger.getAttribute("aria-label")).toBe("Language: English");
+      expect(trigger.getAttribute("title")).toBe("Language: English");
+      expect(trigger.dataset.chosen).toBeUndefined();
+    });
+
+    it("grows the language name once detection moves it", async () => {
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      el.contextLanguage = "en";
+      await flushUpdates(el);
+
+      const editor = requireElement(
+        el.querySelector<JantComposeEditor>("jant-compose-editor"),
+        "expected compose editor",
+      );
+      const write = async (text: string) => {
+        editor._bodyJson = {
+          type: "doc",
+          content: [{ type: "paragraph", content: [{ type: "text", text }] }],
+        };
+        await editor.updateComplete;
+        await flushUpdates(el);
+      };
+
+      // A fragment is not evidence: two characters leave the pill alone.
+      await write("这会");
+      expect(languageTrigger(el)?.textContent?.trim()).toBe("");
+
+      // A sentence is. The pill says so itself, with nothing opened.
+      await write("这会说国学时间");
+      expect(languageTrigger(el)?.textContent?.trim()).toBe("简体中文");
+      expect(languageTrigger(el)?.getAttribute("aria-label")).toBe(
+        "Language: 简体中文",
+      );
+    });
+
+    it("marks the pill once the author picks a language themselves", async () => {
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      el.contextLanguage = "en";
+      await flushUpdates(el);
+      await openLanguagePicker(el);
+
+      const rows = Array.from(
+        el.querySelectorAll<HTMLButtonElement>(
+          ".compose-language-popover .compose-sheet-row",
+        ),
+      );
+      requireElement(rows[1] ?? null, "expected the 简体中文 row").click();
+      await flushUpdates(el);
+
+      // Choosing closes the list behind the choice.
+      expect(el.querySelector(".compose-language-popover")).toBeNull();
+      const trigger = requireElement(
+        languageTrigger(el),
+        "expected language pill",
+      );
+      expect(trigger.textContent?.trim()).toBe("简体中文");
+      expect(trigger.dataset.chosen).toBe("true");
+    });
+
+    it("says the text is too short rather than claiming a reading", async () => {
+      // Below the detector's threshold there is no reading to report. Naming
+      // the page's language here would pass a fallback off as an answer.
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      el.contextLanguage = "zh-Hans";
+      await flushUpdates(el);
+      await openLanguagePicker(el);
+
+      const hint = () =>
+        el
+          .querySelector(".compose-language-popover .compose-sheet-sub")
+          ?.textContent?.trim();
+      expect(hint()).toBe(
+        "Not enough text to tell yet — publishes in 简体中文",
+      );
+
+      const editor = requireElement(
+        el.querySelector<JantComposeEditor>("jant-compose-editor"),
+        "expected compose editor",
+      );
+      editor._bodyJson = {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Hello there, in English." }],
+          },
+        ],
+      };
+      await editor.updateComplete;
+      await flushUpdates(el);
+
+      expect(hint()).toBe("Read from what you write — looks like English");
+    });
+
+    it("keeps the Detect row honest after an explicit choice", async () => {
+      // The row offers to read the text, so it has to report what reading it
+      // produces — not echo back the language the author picked instead.
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      el.contextLanguage = "en";
+      await flushUpdates(el);
+
+      const editor = requireElement(
+        el.querySelector<JantComposeEditor>("jant-compose-editor"),
+        "expected compose editor",
+      );
+      editor._bodyJson = {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Hello there, in English." }],
+          },
+        ],
+      };
+      await editor.updateComplete;
+      await flushUpdates(el);
+      await openLanguagePicker(el);
+
+      const rows = Array.from(
+        el.querySelectorAll<HTMLButtonElement>(
+          ".compose-language-popover .compose-sheet-row",
+        ),
+      );
+      requireElement(rows[1] ?? null, "expected the 简体中文 row").click();
+      await flushUpdates(el);
+      await openLanguagePicker(el);
+
+      const hint = el.querySelector(
+        ".compose-language-popover .compose-sheet-sub",
+      );
+      expect(hint?.textContent?.trim()).toBe(
+        "Read from what you write — looks like English",
+      );
+    });
+
+    it("closes the list on Escape and hands focus back to the pill", async () => {
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      await flushUpdates(el);
+      await openLanguagePicker(el);
+      expect(el.querySelector(".compose-language-popover")).not.toBeNull();
+
+      el.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
+      );
+      await flushUpdates(el);
+
+      expect(el.querySelector(".compose-language-popover")).toBeNull();
+      expect(document.activeElement).toBe(languageTrigger(el));
+    });
+
+    it("closes the list when another control opens", async () => {
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      await flushUpdates(el);
+      await openLanguagePicker(el);
+
+      await openPublishPanel(el);
+
+      expect(el.querySelector(".compose-language-popover")).toBeNull();
+      expect(el.querySelector(".compose-sheet")).not.toBeNull();
+    });
+
+    it("keeps language out of the options sheet", async () => {
+      // One setting, one place. The sheet speaks for the whole submission; the
+      // language belongs to what is being written.
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      await flushUpdates(el);
+
+      await openPublishPanel(el);
+
+      expect(
+        el.querySelector(".compose-sheet")?.textContent ?? "",
+      ).not.toContain("Detect");
+    });
+
+    /**
+     * Open the composer on a translation of `post`. The composer asks for two
+     * things: the post's fields, to seed from, and its server-rendered markup,
+     * to show.
+     */
+    async function openTranslationOf(
+      el: JantComposeDialog,
+      post: Record<string, unknown>,
+      options: { language?: string; previewHtml?: string | null } = {},
+    ) {
+      const { language = "en", previewHtml = null } = options;
+      vi.spyOn(globalThis, "fetch").mockImplementation((input: unknown) => {
+        if (String(input).includes("/_/post-preview/")) {
+          return Promise.resolve({
+            ok: previewHtml !== null,
+            text: async () => previewHtml ?? "",
+          } as Response);
+        }
+        return Promise.resolve({
+          ok: true,
+          json: async () => post,
+        } as Response);
+      });
+
+      await el.openTranslation((post.id as string) ?? "pst_source", language);
+      await flushUpdates(el);
+      await flushUpdates(el);
+      await flushUpdates(el);
+      return el;
+    }
+
+    async function multilingualElement() {
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      await flushUpdates(el);
+      return el;
+    }
+
+    const PREVIEW_HTML =
+      '<article class="h-entry post-menu-target" data-post data-post-id="pst_source" data-page="post">' +
+      '<h1 class="post-detail-title">咖啡笔记</h1>' +
+      '<div class="post-header-meta-row"><a href="/coffee" class="post-header-meta-link">Aug 8, 2026</a></div>' +
+      '<div class="e-content prose post-detail-body"><h2>耶加雪菲</h2>' +
+      '<p>今天试了一支，<a href="https://example.com/beans">花香</a>很明显。</p></div>' +
+      "</article>";
+
+    it("says what it was opened to translate, before anything is typed", async () => {
+      // Opened from a post, so the composer should carry that context above the
+      // editor — not two panels down in the publish sheet.
+      const el = await multilingualElement();
+      await openTranslationOf(
+        el,
+        {
+          id: "pst_source",
+          format: "note",
+          displayTitle: "咖啡笔记",
+          slug: "coffee",
+        },
+        { previewHtml: PREVIEW_HTML },
+      );
+
+      const banner = requireElement(
+        el.querySelector(".compose-translation-context"),
+        "expected the translation context",
+      );
+      // The language sits on the seam between the two posts, not above both:
+      // it reads as "…and below is that, in English".
+      expect(
+        banner
+          .querySelector(".compose-translation-seam-label")
+          ?.textContent?.trim(),
+      ).toBe("Translating into English");
+    });
+
+    it("shows the original as the site renders it, inside a frame to scroll", async () => {
+      // Server-rendered rather than rebuilt here, so a Quote arrives with its
+      // attribution and a Link with its card. The frame is fixed because an
+      // original handed its full height pushes the editor off the screen
+      // exactly when both need to be visible.
+      const el = await multilingualElement();
+      await openTranslationOf(
+        el,
+        {
+          id: "pst_source",
+          format: "note",
+          displayTitle: "咖啡笔记",
+          slug: "coffee",
+        },
+        { previewHtml: PREVIEW_HTML },
+      );
+
+      const original = requireElement(
+        el.querySelector(".compose-translation-original"),
+        "expected the original's frame",
+      );
+      // Keyboard users have to be able to scroll it, and a screen reader has to
+      // be able to name it.
+      expect(original.getAttribute("tabindex")).toBe("0");
+      expect(original.getAttribute("role")).toBe("region");
+      expect(original.getAttribute("aria-label")).toBe("The original");
+      // Structure is part of what is being translated, so it survives intact.
+      expect(original.querySelector("h1")?.textContent).toBe("咖啡笔记");
+      expect(original.querySelector("h2")?.textContent).toBe("耶加雪菲");
+
+      // Nothing left of the expand-in-place preview it replaced, and no bolted
+      // on external-link glyph — that made the card read as a Link post.
+      expect(el.querySelector(".compose-translation-toggle")).toBeNull();
+      expect(el.querySelector(".compose-translation-source-icon")).toBeNull();
+    });
+
+    it("folds the original away and back, keeping the seam either way", async () => {
+      // The frame costs vertical room the editor may want back mid-draft. What
+      // it is being translated into stays on screen while it is folded — that
+      // is about the two posts, not about how much of one is showing.
+      const el = await multilingualElement();
+      await openTranslationOf(
+        el,
+        {
+          id: "pst_source",
+          format: "note",
+          displayTitle: "咖啡笔记",
+          slug: "coffee",
+        },
+        { previewHtml: PREVIEW_HTML },
+      );
+
+      const toggle = () =>
+        requireElement(
+          el.querySelector<HTMLButtonElement>(
+            ".compose-translation-seam-toggle",
+          ),
+          "expected the fold toggle",
+        );
+
+      expect(el.querySelector(".compose-translation-original")).not.toBeNull();
+      expect(toggle().getAttribute("aria-expanded")).toBe("true");
+      expect(toggle().textContent?.trim()).toBe("Hide");
+
+      toggle().click();
+      await flushUpdates(el);
+
+      expect(el.querySelector(".compose-translation-original")).toBeNull();
+      expect(toggle().getAttribute("aria-expanded")).toBe("false");
+      expect(toggle().textContent?.trim()).toBe("Show");
+      expect(toggle().getAttribute("aria-label")).toBe("Show the original");
+      expect(
+        el
+          .querySelector(".compose-translation-seam-label")
+          ?.textContent?.trim(),
+      ).toBe("Translating into English");
+
+      toggle().click();
+      await flushUpdates(el);
+
+      // Unfolding re-creates the markup, so the links have to be sent to a new
+      // tab again — the adopt pass runs on every update, not just the first.
+      const link = requireElement(
+        el.querySelector<HTMLAnchorElement>(
+          ".compose-translation-preview a[href]",
+        ),
+        "expected the original back",
+      );
+      expect(link.getAttribute("target")).toBe("_blank");
+    });
+
+    it("sends every link in the original to a new tab", async () => {
+      // A link followed in place navigates the composer away and takes the
+      // unsaved translation with it.
+      const el = await multilingualElement();
+      await openTranslationOf(
+        el,
+        {
+          id: "pst_source",
+          format: "note",
+          displayTitle: "咖啡笔记",
+          slug: "coffee",
+        },
+        { previewHtml: PREVIEW_HTML },
+      );
+
+      const links = Array.from(
+        el.querySelectorAll<HTMLAnchorElement>(
+          ".compose-translation-preview a[href]",
+        ),
+      );
+      expect(links.length).toBe(2);
+      for (const link of links) {
+        expect(link.getAttribute("target")).toBe("_blank");
+        expect(link.getAttribute("rel")).toBe("noopener noreferrer");
+      }
+    });
+
+    it("strips the original's identity so nothing else can act on it", async () => {
+      // `data-post-id` is how the post menu, the keyboard shortcuts and
+      // `refreshArticleView` find a post. A second copy of the original's id in
+      // the DOM lets any of them act on the preview believing it is the card.
+      const el = await multilingualElement();
+      await openTranslationOf(
+        el,
+        {
+          id: "pst_source",
+          format: "note",
+          displayTitle: "咖啡笔记",
+          slug: "coffee",
+        },
+        { previewHtml: PREVIEW_HTML },
+      );
+
+      const preview = requireElement(
+        el.querySelector(".compose-translation-preview"),
+        "expected the preview",
+      );
+      expect(preview.querySelector("[data-post-id]")).toBeNull();
+      expect(preview.querySelector(".post-menu-target")).toBeNull();
+      expect(
+        document.querySelectorAll('[data-post-id="pst_source"]').length,
+      ).toBe(0);
+    });
+
+    it("falls back to a plain link when the rendering cannot be fetched", async () => {
+      const el = await multilingualElement();
+      await openTranslationOf(
+        el,
+        {
+          id: "pst_source",
+          format: "note",
+          displayTitle: "咖啡笔记",
+          slug: "coffee",
+        },
+        { previewHtml: null },
+      );
+
+      expect(el.querySelector(".compose-translation-original")).toBeNull();
+      const link = requireElement(
+        el.querySelector<HTMLAnchorElement>(".compose-translation-fallback a"),
+        "expected a fallback link to the original",
+      );
+      expect(link.textContent?.trim()).toBe("咖啡笔记");
+      expect(link.getAttribute("href")).toBe("/coffee");
+      expect(link.getAttribute("target")).toBe("_blank");
+      // The seam still names the language: it is about the two posts, not about
+      // how much of one of them could be shown.
+      expect(
+        el
+          .querySelector(".compose-translation-seam-label")
+          ?.textContent?.trim(),
+      ).toBe("Translating into English");
+    });
+
+    it("starts a translation in the original's shape, down to its meta", async () => {
+      // Everything that describes the post's subject or its place travels:
+      // format, citation, collections, visibility, rating. Only the words are
+      // language-specific, so only the words start empty.
+      const el = await multilingualElement();
+      await openTranslationOf(el, {
+        id: "pst_source",
+        format: "quote",
+        displayTitle: "关于专注",
+        slug: "focus",
+        quoteText: "专注是一种拒绝。",
+        sourceName: "Some Author",
+        sourceUrl: "https://example.com/focus",
+        collectionIds: ["col_reading", "col_notes"],
+        visibility: "latest_hidden",
+        rating: 4,
+      });
+
+      const editor = requireElement(
+        el.querySelector<JantComposeEditor>("jant-compose-editor"),
+        "expected the editor",
+      );
+      expect(editor.format).toBe("quote");
+      const data = editor.getData();
+      expect(data.url).toBe("https://example.com/focus");
+      expect(data.quoteAuthor).toBe("Some Author");
+      expect(data.rating).toBe(4);
+      // The prose is the part the author is here to write.
+      expect(data.quoteText).toBe("");
+
+      const internals = el as unknown as {
+        _collectionIds: string[];
+        _visibility: string;
+        _hasUnsavedChanges: () => boolean;
+      };
+      expect(internals._collectionIds).toEqual(["col_reading", "col_notes"]);
+      expect(internals._visibility).toBe("latest_hidden");
+
+      // None of that counts as something to discard: the author typed nothing.
+      expect(internals._hasUnsavedChanges()).toBe(false);
+    });
+
+    it("closes a seeded translation without offering to save it", async () => {
+      // The citation arrived from the original, not from the author. Being
+      // asked to save a draft of a URL you never typed is worse than the
+      // prompt is worth — but the moment anything is written, it comes back.
+      const el = await multilingualElement();
+      await openTranslationOf(el, {
+        id: "pst_source",
+        format: "quote",
+        displayTitle: "关于专注",
+        slug: "focus",
+        sourceUrl: "https://example.com/focus",
+      });
+      const internals = el as unknown as {
+        _confirmPanelOpen: boolean;
+        _hasContent: () => boolean;
+      };
+
+      el.requestClose();
+      await flushUpdates(el);
+      expect(internals._confirmPanelOpen).toBe(false);
+
+      await openTranslationOf(el, {
+        id: "pst_source",
+        format: "quote",
+        displayTitle: "关于专注",
+        slug: "focus",
+        sourceUrl: "https://example.com/focus",
+      });
+      const editor = requireElement(
+        el.querySelector<JantComposeEditor>("jant-compose-editor"),
+        "expected the editor",
+      );
+      editor._quoteText = "Focus is about saying no.";
+      await flushUpdates(el);
+
+      el.requestClose();
+      await flushUpdates(el);
+      expect(internals._confirmPanelOpen).toBe(true);
+    });
+
+    it("keeps the citation, the original and the language when a translation grows into a thread", async () => {
+      // The thread path used to be a copy of the single-post one: "Add to
+      // thread" dropped the quote's source link on the way into the thread
+      // editor, and the submit never learned about language or translations.
+      const el = await multilingualElement();
+      await openTranslationOf(el, {
+        id: "pst_source",
+        format: "quote",
+        displayTitle: "关于专注",
+        slug: "focus",
+        quoteText: "专注是一种拒绝。",
+        sourceName: "Some Author",
+        sourceUrl: "https://example.com/focus",
+      });
+      (el as unknown as { _language: string | null })._language = "en";
+      const single = requireElement(
+        el.querySelector<JantComposeEditor>("jant-compose-editor"),
+        "expected the editor",
+      );
+      single._quoteText = "Focus is a refusal.";
+      await flushUpdates(el);
+
+      (el as unknown as { _addThreadItem: () => void })._addThreadItem();
+      await flushUpdates(el);
+      const editors = Array.from(
+        el.querySelectorAll<JantComposeEditor>("jant-compose-editor"),
+      );
+      expect(editors).toHaveLength(2);
+      // The next post starts in the format of the one before it.
+      editors[1]!._quoteText = "And its answer.";
+      await flushUpdates(el);
+
+      let detail: ComposeSubmitDetail | null = null;
+      el.addEventListener("jant:compose-submit-deferred", (event) => {
+        detail = (event as CustomEvent<ComposeSubmitDetail>).detail;
+      });
+      requireElement(
+        el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+        "expected publish button",
+      ).click();
+
+      const [root, reply] = (detail as ComposeSubmitDetail | null)
+        ?.threadPosts ?? [undefined, undefined];
+      expect(root).toMatchObject({
+        format: "quote",
+        quoteText: "Focus is a refusal.",
+        quoteAuthor: "Some Author",
+        url: "https://example.com/focus",
+        translationOfId: "pst_source",
+        language: "en",
+      });
+      // Thread-level facts: only the root states them.
+      expect(reply?.translationOfId).toBeUndefined();
+      expect(reply?.language).toBeUndefined();
+    });
+
+    it("leaves the format alone once the author has started writing", async () => {
+      // The fetch lands after the composer opens. Overwriting a first sentence
+      // to save a format click is a bad trade.
+      const el = await multilingualElement();
+      vi.spyOn(
+        el as unknown as { _hasContent: () => boolean },
+        "_hasContent",
+      ).mockReturnValue(true);
+
+      await openTranslationOf(el, {
+        id: "pst_source",
+        format: "quote",
+        displayTitle: "关于专注",
+        slug: "focus",
+        sourceUrl: "https://example.com/focus",
+      });
+
+      const editor = requireElement(
+        el.querySelector<JantComposeEditor>("jant-compose-editor"),
+        "expected the editor",
+      );
+      expect(editor.format).toBe("note");
+      expect(editor.getData().url).toBe("");
+      // The context still shows — it is the one thing that never fights the
+      // author for the page.
+      expect(el.querySelector(".compose-translation-context")).not.toBeNull();
+    });
+
+    it("sends the chosen language, and the page's language on Detect", async () => {
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      el.contextLanguage = "en";
+      await flushUpdates(el);
+      await openLanguagePicker(el);
+
+      const build = (
+        el as unknown as {
+          _buildSubmitDetail: (
+            status: "published" | "draft",
+          ) => ComposeSubmitDetail | null;
+        }
+      )._buildSubmitDetail.bind(el);
+
+      // Left on Detect with no text signal: the post belongs to the page it
+      // was written from, so the page's language goes out explicitly.
+      expect(build("published")?.language).toBe("en");
+
+      const rows = Array.from(
+        el.querySelectorAll<HTMLButtonElement>(
+          ".compose-language-popover .compose-sheet-row",
+        ),
+      );
+      requireElement(rows[1] ?? null, "expected the 简体中文 row").click();
+      await flushUpdates(el);
+
+      expect(build("published")?.language).toBe("zh-Hans");
+    });
+
+    it("keeps a published post's own language when editing it", async () => {
+      // A post that is already filed in Japanese must not be re-read from the
+      // English page it is being edited on — the language is a fact about the
+      // post, not a guess to redo.
+      mockEditPost({
+        format: "note",
+        title: "Hi",
+        body: null,
+        language: "ja",
+      });
+
+      const el = await createElement();
+      el.languages = [
+        { tag: "en", label: "English" },
+        { tag: "ja", label: "日本語" },
+      ];
+      el.contextLanguage = "en";
+      await flushUpdates(el);
+      await el.openEdit("pst_123");
+      await flushUpdates(el);
+
+      const trigger = requireElement(
+        languageTrigger(el),
+        "expected language pill",
+      );
+      expect(trigger.textContent?.trim()).toBe("日本語");
+      expect(trigger.dataset.chosen).toBe("true");
+
+      const build = (
+        el as unknown as {
+          _buildSubmitDetail: (
+            status: "published" | "draft",
+          ) => ComposeSubmitDetail | null;
+        }
+      )._buildSubmitDetail.bind(el);
+      expect(build("published")?.language).toBe("ja");
+    });
+
+    it("falls back to the primary language when the page has none", async () => {
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      await flushUpdates(el);
+
+      const build = (
+        el as unknown as {
+          _buildSubmitDetail: (
+            status: "published" | "draft",
+          ) => ComposeSubmitDetail | null;
+        }
+      )._buildSubmitDetail.bind(el);
+
+      expect(build("published")?.language).toBe("zh-Hans");
+    });
+
+    describe("publishing on automatic", () => {
+      /** A composer whose text reads as a different language than the page. */
+      async function createMismatch(overrides?: {
+        contextLanguage?: string;
+        text?: string;
+      }) {
+        const el = await createElement();
+        el.languages = [
+          { tag: "zh-Hans", label: "简体中文" },
+          { tag: "ja", label: "日本語" },
+        ];
+        el.contextLanguage = overrides?.contextLanguage ?? "zh-Hans";
+        await flushUpdates(el);
+
+        const editor = requireElement(
+          el.querySelector<JantComposeEditor>("jant-compose-editor"),
+          "expected compose editor",
+        );
+        editor._bodyJson = {
+          type: "doc",
+          content: [
+            {
+              type: "paragraph",
+              content: [
+                { type: "text", text: overrides?.text ?? "これはテストです" },
+              ],
+            },
+          ],
+        };
+        await editor.updateComplete;
+        await flushUpdates(el);
+
+        const details: ComposeSubmitDetail[] = [];
+        el.addEventListener("jant:compose-submit-deferred", (event) => {
+          details.push((event as CustomEvent<ComposeSubmitDetail>).detail);
+        });
+        return { el, details };
+      }
+
+      function clickPublish(el: JantComposeDialog) {
+        requireElement(
+          el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+          "expected post button",
+        ).click();
+      }
+
+      it("publishes what the pill says, without stopping to ask", async () => {
+        // The pill grew the word 日本語 the moment detection moved off the
+        // page's language — the same moment a sheet used to interrupt. There
+        // is nothing left for one to add.
+        const { el, details } = await createMismatch();
+        expect(
+          el.querySelector(".compose-language-trigger")?.textContent?.trim(),
+        ).toBe("日本語");
+
+        clickPublish(el);
+        await flushUpdates(el);
+
+        expect(details).toHaveLength(1);
+        expect(details[0]?.language).toBe("ja");
+      });
+
+      it("publishes in the page's language when detection agrees", async () => {
+        const { el, details } = await createMismatch({ contextLanguage: "ja" });
+
+        clickPublish(el);
+        await flushUpdates(el);
+
+        expect(details).toHaveLength(1);
+        expect(details[0]?.language).toBe("ja");
+      });
+
+      it("never second-guesses an explicit choice", async () => {
+        const { el, details } = await createMismatch();
+        // The author picked 简体中文 themselves; the Japanese text is theirs
+        // to own — a quote, perhaps.
+        (el as unknown as { _language: string | null })._language = "zh-Hans";
+        await flushUpdates(el);
+
+        clickPublish(el);
+        await flushUpdates(el);
+
+        expect(details).toHaveLength(1);
+        expect(details[0]?.language).toBe("zh-Hans");
+      });
+    });
+  });
+
+  it("keeps date and permalink on the post, not in the publish panel", async () => {
+    const el = await createElement();
+
+    // They describe one post, so they hang off the post — not the publish
+    // panel, which speaks for the whole submission.
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
+      "expected options trigger",
+    ).click();
+    await flushUpdates(el);
+    expect(el.querySelector(".compose-publish-date-input")).toBeNull();
+    expect(el.querySelector(".compose-publish-slug-input")).toBeNull();
+
+    // The pill states both values while the panel is shut.
+    expect(pillValue(el, "date")).toBe("Now");
+    expect(pillValue(el, "slug")).toBe("Auto");
+
+    // Two settings is not a list to drill through: opening the pill opens both
+    // fields at once, with focus on the panel so Tab lands in them.
+    await openPostMeta(el);
+    expect(el.querySelector(".compose-publish-date-input")).not.toBeNull();
+    expect(el.querySelector(".compose-publish-slug-input")).not.toBeNull();
+    expect(el.querySelector("[data-compose-post-meta-panel]")).toBe(
+      document.activeElement,
+    );
+  });
+
+  it("pins the date panel to its pill instead of inside the scroller", async () => {
+    const el = await createElement();
+
+    // The pill lives in `.compose-scroll`, which clips and scrolls. An
+    // absolutely positioned panel is taller than that box on an empty post, so
+    // it lost its footer, and focusing it scrolled the format switcher off the
+    // top to bring it into view. Fixed positioning leaves the scroller behind,
+    // which makes placing the panel our job.
+    const focusCalls: Array<{
+      target: unknown;
+      options?: globalThis.FocusOptions;
+    }> = [];
+    const nativeFocus = globalThis.HTMLElement.prototype.focus;
+    globalThis.HTMLElement.prototype.focus = function (
+      this: globalThis.HTMLElement,
+      options?: globalThis.FocusOptions,
+    ) {
+      focusCalls.push({ target: this, options });
+      return nativeFocus.call(this, options);
+    };
+
+    try {
+      await openPostMeta(el);
+    } finally {
+      globalThis.HTMLElement.prototype.focus = nativeFocus;
+    }
+
+    const panel = requireElement(
+      el.querySelector<globalThis.HTMLElement>(
+        "[data-compose-post-meta-panel]",
+      ),
+      "expected post meta panel",
+    );
+
+    expect(focusCalls.find((call) => call.target === panel)?.options).toEqual({
+      preventScroll: true,
+    });
+
+    // Placed under the pill, and capped at the room the viewport actually has
+    // so a short window scrolls the panel rather than cropping it.
+    expect(panel.style.top).toBe("6px");
+    expect(panel.style.left).not.toBe("");
+    expect(
+      panel.style.getPropertyValue("--compose-post-meta-panel-max-height"),
+    ).toBe(`${globalThis.innerHeight - 12 - 6}px`);
+
+    // Inline coordinates only mean anything if the panel is out of the
+    // scroller — `position: absolute` here is the bug, not a style choice.
+    const css = readComponentCss();
+    expect(css).toMatch(
+      /\.compose-post-meta-panel\s*\{\s*position:\s*fixed;[\s\S]*max-height:\s*var\(--compose-post-meta-panel-max-height,\s*none\);\s*overflow-y:\s*auto;/,
+    );
+  });
+
+  it("keeps the date panel on its pill when the composer scrolls", async () => {
+    const el = await createElement();
+    await openPostMeta(el);
+
+    const panel = requireElement(
+      el.querySelector<globalThis.HTMLElement>(
+        "[data-compose-post-meta-panel]",
+      ),
+      "expected post meta panel",
+    );
+    const pill = requireElement(
+      el.querySelector<globalThis.HTMLElement>("[data-compose-post-meta-pill]"),
+      "expected post meta pill",
+    );
+    pill.getBoundingClientRect = () =>
+      ({
+        top: 100,
+        bottom: 130,
+        left: 300,
+        right: 400,
+        width: 100,
+        height: 30,
+      }) as globalThis.DOMRect;
+
+    // A `scroll` event on the composer's own box never reaches `window` — it
+    // doesn't bubble — so a pinned panel would hang in place while the pill it
+    // belongs to slid away underneath it.
+    const scroller = requireElement(
+      el.querySelector(".compose-scroll"),
+      "expected compose scroller",
+    );
+    scroller.dispatchEvent(new globalThis.Event("scroll"));
+
+    expect(panel.style.top).toBe("136px");
+    expect(panel.style.left).toBe("400px");
+  });
+
+  it("opens the calendar from its own button, not the UA glyph", async () => {
+    const el = await createElement();
+    await openPostMeta(el);
+
+    const input = requireElement(
+      el.querySelector<HTMLInputElement>(".compose-publish-date-input"),
+      "expected publish date input",
+    );
+    // Chrome only opens the picker from its ~13px indicator, which is hidden
+    // here — the button has to drive the same picker itself.
+    const showPicker = vi.fn();
+    (input as HTMLInputElement & { showPicker: () => void }).showPicker =
+      showPicker;
+
+    requireElement(
+      el.querySelector<HTMLButtonElement>("[data-compose-date-picker]"),
+      "expected date picker button",
+    ).click();
+    await flushUpdates(el);
+
+    expect(showPicker).toHaveBeenCalledTimes(1);
+    expect(input).toBe(document.activeElement);
+  });
+
+  it("keeps the date field usable when showPicker is unsupported", async () => {
+    const el = await createElement();
+    await openPostMeta(el);
+
+    const input = requireElement(
+      el.querySelector<HTMLInputElement>(".compose-publish-date-input"),
+      "expected publish date input",
+    );
+    // Engines without `showPicker` must still get a focused, typable field
+    // rather than an uncaught TypeError from the button.
+    expect(
+      (input as HTMLInputElement & { showPicker?: () => void }).showPicker,
+    ).toBeUndefined();
+
+    expect(() =>
+      requireElement(
+        el.querySelector<HTMLButtonElement>("[data-compose-date-picker]"),
+        "expected date picker button",
+      ).click(),
+    ).not.toThrow();
+    await flushUpdates(el);
+
+    expect(input).toBe(document.activeElement);
+  });
+
+  it("closes the date panel from its Done button", async () => {
+    const el = await createElement();
+    await openPostMeta(el);
+
+    // Escape and an outside click both close it, but neither announces itself,
+    // and touch has no Escape key at all.
+    requireElement(
+      el.querySelector<HTMLButtonElement>("[data-compose-post-meta-done]"),
+      "expected Done button",
+    ).click();
+    await flushUpdates(el);
+
+    expect(el.querySelector("[data-compose-post-meta-panel]")).toBeNull();
+    expect(el.querySelector(".compose-publish-date-input")).toBeNull();
+  });
+
+  it("hands focus back to the post when the date panel closes", async () => {
+    const el = await createElement();
+    await openPostMeta(el);
+    expect(el.querySelector("[data-compose-post-meta-panel]")).toBe(
+      document.activeElement,
+    );
+
+    // The panel holds focus while it is open, so it would take focus out of the
+    // document with it on the way out. The pill is only visible on hover, focus
+    // or a non-default value — and on touch there is no hover — so losing focus
+    // to `<body>` hides the only way back in.
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected editor",
+    );
+    const focusInput = vi.spyOn(editor, "focusInput");
+
+    requireElement(
+      el.querySelector<HTMLButtonElement>("[data-compose-post-meta-pill]"),
+      "expected post meta pill",
+    ).click();
+    await flushUpdates(el);
+
+    expect(el.querySelector("[data-compose-post-meta-panel]")).toBeNull();
+    expect(focusInput).toHaveBeenCalled();
+  });
+
+  it("explains every visibility option and checks the selected one", async () => {
+    const el = await createElement();
+
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
+      "expected publish settings toggle",
+    ).click();
+    await el.updateComplete;
+
+    // Each row carries its own hint, so the options can be compared before
+    // one is picked — a single hint under a chip group could not do that.
+    expect(el.textContent).toContain("Appears in Latest.");
+    expect(el.textContent).toContain("Only visible when signed in.");
+
+    const rows = el.querySelectorAll<HTMLButtonElement>(
+      ".compose-sheet-row[role='radio']",
+    );
+    expect(rows).toHaveLength(3);
+    expect(rows[0].getAttribute("aria-checked")).toBe("true");
+    expect(rows[0].querySelector(".compose-sheet-check")).not.toBeNull();
+    expect(rows[2].querySelector(".compose-sheet-check")).toBeNull();
+
+    rows[2].click();
+    await flushUpdates(el);
+
+    // Picking is the whole job of this panel, so it dismisses itself — no
+    // Done button to confirm a radio selection.
+    expect(el._visibility).toBe("private");
+    expect(el.querySelector(".compose-sheet")).toBeNull();
+    expect(el.querySelector(".compose-publish-done")).toBeNull();
+
+    // Reopening shows the new choice checked.
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
+      "expected publish settings toggle",
+    ).click();
+    await flushUpdates(el);
+    const updated = el.querySelectorAll<HTMLButtonElement>(
+      ".compose-sheet-row[role='radio']",
+    );
+    expect(updated[2].getAttribute("aria-checked")).toBe("true");
+    expect(updated[2].querySelector(".compose-sheet-check")).not.toBeNull();
+    expect(updated[0].querySelector(".compose-sheet-check")).toBeNull();
+  });
+
+  it("format switching updates active state", async () => {
+    const el = await createElement();
+
+    // Note is active by default
+    const noteBtn = el.querySelectorAll<HTMLButtonElement>(
+      ".compose-segmented-item",
+    )[0];
+    expect(noteBtn.classList.contains("compose-segmented-item-active")).toBe(
+      true,
+    );
+
+    // Click link
+    const linkBtn = el.querySelectorAll<HTMLButtonElement>(
+      ".compose-segmented-item",
+    )[1];
+    linkBtn.click();
+    await el.updateComplete;
+
+    expect(el._format).toBe("link");
+    expect(linkBtn.classList.contains("compose-segmented-item-active")).toBe(
+      true,
+    );
+    expect(noteBtn.classList.contains("compose-segmented-item-active")).toBe(
+      false,
+    );
+    expect(
+      el.querySelector('.compose-tool-btn-view[aria-label="Fullscreen"]'),
+    ).toBeNull();
+  });
+
+  it("autofocuses the primary field on desktop format switches", async () => {
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    const focusSpy = vi.spyOn(editor, "focusInput");
+
+    const linkBtn = el.querySelectorAll<HTMLButtonElement>(
+      ".compose-segmented-item",
+    )[1];
+    linkBtn.click();
+    await flushUpdates(el);
+
+    expect(focusSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not autofocus the primary field on touch format switches", async () => {
+    mockMatchMedia(true);
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    const focusSpy = vi.spyOn(editor, "focusInput");
+
+    const linkBtn = el.querySelectorAll<HTMLButtonElement>(
+      ".compose-segmented-item",
+    )[1];
+    linkBtn.click();
+    await flushUpdates(el);
+
+    expect(focusSpy).not.toHaveBeenCalled();
+  });
+
+  function mockEditPost(post: Record<string, unknown>) {
+    return vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(JSON.stringify({ id: "pst_123", ...post }), {
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+  }
+
+  it("shows the format switcher above the post while editing", async () => {
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+    mockEditPost({ format: "note", title: "Hello", body: null });
+
+    const el = await createElement();
+    await el.openEdit("pst_123");
+    await flushUpdates(el);
+
+    // The switcher has exactly one home: above its own post. Editing says so
+    // through the submit label and a marker in the header row, not a title bar.
+    expect(el.querySelector(".compose-thread-post-header")).toBeTruthy();
+    expect(el.querySelector(".compose-dialog-header")).toBeNull();
+    expect(
+      el
+        .querySelector(".compose-thread-post-header .compose-post-badge")
+        ?.textContent?.trim(),
+    ).toBe(labels.editing);
+    expect(el.querySelector(".compose-publish-main")?.textContent?.trim()).toBe(
+      labels.update,
+    );
+  });
+
+  it("shows the format selector above the post when replying", async () => {
+    const el = await createElement();
+    await el.openReply("019ce8ce-d6d8-7fda-a5df-c2da2bef5ade", {
+      contentHtml: "<p>Parent</p>",
+      dateText: "Mar 14",
+    });
+    await flushUpdates(el);
+
+    expect(el.querySelector(".compose-dialog-header")).toBeNull();
+    // The selector sits inline above the reply editor.
+    expect(el.querySelector(".compose-thread-post-header")).not.toBeNull();
+    expect(
+      el.querySelector(".compose-thread-layout.compose-reply-compose-layout"),
+    ).not.toBeNull();
+    expect(el.querySelector(".compose-collection-trigger")).toBeNull();
+    expect(
+      el.querySelector(".compose-action-row-without-collection"),
+    ).not.toBeNull();
+    expect(el.querySelector(".compose-publish-main")).not.toBeNull();
+  });
+
+  it("puts a reply's add-to-thread row on the rail with the other posts", async () => {
+    const el = await createElement();
+    await el.openReply("019ce8ce-d6d8-7fda-a5df-c2da2bef5ade", {
+      contentHtml: "<p>Parent</p>",
+      dateText: "Mar 14",
+    });
+    await flushUpdates(el);
+
+    // Inside the layout, not a sibling of it: out there it misses the rail's
+    // indent and lands a rail's width left of everything above it.
+    const layout = el.querySelector(
+      ".compose-thread-layout.compose-reply-compose-layout",
+    );
+    const addRow = layout?.querySelector(":scope > .compose-thread-add-row");
+    expect(addRow).not.toBeNull();
+    expect(el.querySelector(".compose-add-thread-trigger")).toBeNull();
+    // The dashed dot marks where the next post lands, as in thread compose.
+    expect(addRow?.querySelector(".compose-thread-add-dot")).not.toBeNull();
+    // ...and it stays the last row, so the rail still stops at the reply.
+    expect(layout?.lastElementChild).toBe(addRow);
+  });
+
+  it("keeps a single post's add-to-thread row off the rail", async () => {
+    const el = await createElement();
+    await flushUpdates(el);
+
+    // No rail to join, so no dot: the row's position says "next slot" alone.
+    const trigger = el.querySelector(".compose-add-thread-trigger");
+    expect(trigger).not.toBeNull();
+    expect(el.querySelector(".compose-thread-add-dot")).toBeNull();
+    expect(trigger?.querySelector(".compose-thread-add-btn")).not.toBeNull();
+  });
+
+  it("shows an Edit title with the format selector above the post when editing a reply", async () => {
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+    const parentId = "019ce8ce-d6d8-7fda-a5df-c2da2bef5ade";
+    // A fresh Response per call: openEdit reads the edited post, then
+    // _fetchReplyContext reads the parent — a single shared Response body can
+    // only be consumed once.
+    vi.spyOn(globalThis, "fetch").mockImplementation((input) => {
+      const url = String(input);
+      const json = url.includes(parentId)
+        ? { id: parentId, bodyHtml: "<p>Parent</p>", format: "note" }
+        : {
+            id: "pst_123",
+            format: "note",
+            title: "Hello",
+            body: null,
+            replyToId: parentId,
+            collectionIds: ["col-thread"],
+          };
+      return Promise.resolve(
+        new Response(JSON.stringify(json), {
+          headers: { "Content-Type": "application/json" },
+        }),
+      );
+    });
+
+    const el = await createElement();
+    await el.openEdit("pst_123");
+    await flushUpdates(el);
+
+    expect(el.querySelector(".compose-publish-main")?.textContent?.trim()).toBe(
+      labels.update,
+    );
+    expect(el.querySelector(".compose-dialog-header")).toBeNull();
+    expect(el.querySelector(".compose-thread-post-header")).not.toBeNull();
+    expect(el._collectionIds).toEqual([]);
+    expect(el.querySelector(".compose-collection-trigger")).toBeNull();
+  });
+
+  it("keeps the format selector above the post in single-post mode", async () => {
+    const el = await createElement();
+    await flushUpdates(el);
+
+    // One selector, one place — above its own post.
+    const items = el.querySelectorAll<HTMLButtonElement>(
+      ".compose-thread-post-header .compose-segmented-item",
+    );
+    expect(items.length).toBe(3);
+
+    items[1].click(); // link
+    await flushUpdates(el);
+    expect(el._format).toBe("link");
+
+    // A single post has no "which one", so no position marker.
+    expect(el.querySelector(".compose-post-position")).toBeNull();
+  });
+
+  it("gives every thread post its own date and permalink control", async () => {
+    const el = await createElement();
+    el._threadItems = [
+      { id: "thread-1", format: "note" },
+      { id: "thread-2", format: "note" },
+    ];
+    await flushUpdates(el);
+
+    // Every post is separately addressable (`path_registry` has a row each),
+    // so every post gets both controls — not just the root.
+    const pills = el.querySelectorAll("[data-compose-post-meta-pill]");
+    expect(pills).toHaveLength(2);
+    for (const pill of pills) {
+      expect(
+        pill.querySelector(".compose-post-meta-value-slug"),
+      ).not.toBeNull();
+    }
+  });
+
+  it("sends a reply's own permalink and blocks an invalid one", async () => {
+    const el = await createElement();
+    el._threadItems = [
+      { id: "thread-1", format: "note" },
+      { id: "thread-2", format: "note", slug: "part-two" },
+    ];
+    await flushUpdates(el);
+
+    const build = (
+      el as unknown as {
+        _buildEditorPostDetail: (
+          editor: JantComposeEditor,
+          format: string,
+          index: number,
+          status: string,
+        ) => ComposeSubmitDetail;
+      }
+    )._buildEditorPostDetail;
+    const editors = el.querySelectorAll<JantComposeEditor>(
+      "jant-compose-editor",
+    );
+
+    expect(build.call(el, editors[1], "note", 1, "published").slug).toBe(
+      "part-two",
+    );
+    expect(build.call(el, editors[0], "note", 0, "published").slug).toBe(
+      undefined,
+    );
+
+    // A reply's bad slug blocks publish just like the root's would.
+    el._threadItems = [
+      { id: "thread-1", format: "note" },
+      { id: "thread-2", format: "note", slug: "not a slug!" },
+    ];
+    await flushUpdates(el);
+    expect(
+      (el as unknown as { _canPublish: () => boolean })._canPublish(),
+    ).toBe(false);
+  });
+
+  it("sends a reply's own date and leaves the rest for the server to inherit", async () => {
+    const el = await createElement();
+    el._threadItems = [
+      { id: "thread-1", format: "note" },
+      { id: "thread-2", format: "note", publishedAtInput: "2024-03-09" },
+      { id: "thread-3", format: "note" },
+    ];
+    await flushUpdates(el);
+
+    const detail = (
+      el as unknown as {
+        _buildEditorPostDetail: (
+          editor: JantComposeEditor,
+          format: string,
+          index: number,
+          status: string,
+        ) => ComposeSubmitDetail;
+      }
+    )._buildEditorPostDetail;
+    const editors = el.querySelectorAll<JantComposeEditor>(
+      "jant-compose-editor",
+    );
+
+    const second = detail.call(el, editors[1], "note", 1, "published");
+    const third = detail.call(el, editors[2], "note", 2, "published");
+
+    expect(second.publishedAt).toBeGreaterThan(0);
+    // Undefined, not "now" — the server fills it from the root.
+    expect(third.publishedAt).toBeUndefined();
+  });
+
+  it("blocks publishing when any thread post has a future date", async () => {
+    const el = await createElement();
+    const future = new Date(Date.now() + 86400000 * 3)
+      .toISOString()
+      .slice(0, 10);
+    el._threadItems = [
+      { id: "thread-1", format: "note" },
+      { id: "thread-2", format: "note", publishedAtInput: future },
+    ];
+    await flushUpdates(el);
+
+    expect(
+      (el as unknown as { _canPublish: () => boolean })._canPublish(),
+    ).toBe(false);
+  });
+
+  /**
+   * Publish reads each row's own answer, so a row that has been removed stops
+   * being asked. These used to fail: the button was computed during render from
+   * the editors still in the DOM — including the one that render was about to
+   * remove.
+   */
+  describe("publish reflects the rows that are left", () => {
+    const publishButton = (el: JantComposeDialog) =>
+      requireElement(
+        el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+        "expected publish button",
+      );
+
+    async function typeInto(
+      el: JantComposeDialog,
+      index: number,
+      text: string,
+    ) {
+      const editor = el.querySelectorAll<JantComposeEditor>(
+        "jant-compose-editor",
+      )[index];
+      requireEditor(
+        requireElement(editor, `expected editor ${index}`),
+      ).commands.insertContent(text);
+      await flushUpdates(el);
+    }
+
+    async function addPost(el: JantComposeDialog) {
+      requireElement(
+        el.querySelector<HTMLButtonElement>(".compose-thread-add-btn"),
+        "expected add-to-thread button",
+      ).click();
+      await flushUpdates(el);
+      await flushUpdates(el);
+    }
+
+    async function removePost(el: JantComposeDialog, index: number) {
+      requireElement(
+        el.querySelectorAll<HTMLButtonElement>(".compose-thread-post-remove")[
+          index
+        ],
+        `expected remove button ${index}`,
+      ).click();
+      await flushUpdates(el);
+      await flushUpdates(el);
+    }
+
+    it("re-enables publish when the empty last post is removed", async () => {
+      const el = await createElement();
+      await typeInto(el, 0, "one");
+      await addPost(el);
+      await typeInto(el, 1, "two");
+      await addPost(el);
+
+      expect(publishButton(el).disabled).toBe(true);
 
-    expect(el.textContent).toContain("Only visible when signed in.");
-    expect(el.textContent).not.toContain("Appears in Latest.");
-  });
+      await removePost(el, 2);
 
-  it("format switching updates active state", async () => {
-    const el = await createElement();
+      expect(publishButton(el).disabled).toBe(false);
+    });
 
-    // Note is active by default
-    const noteBtn = el.querySelectorAll<HTMLButtonElement>(
-      ".compose-segmented-item",
-    )[0];
-    expect(noteBtn.classList.contains("compose-segmented-item-active")).toBe(
-      true,
-    );
+    it("re-enables publish when the emptied post is the first of two", async () => {
+      const el = await createElement();
+      await typeInto(el, 0, "one");
+      await addPost(el);
+      await typeInto(el, 1, "two");
 
-    // Click link
-    const linkBtn = el.querySelectorAll<HTMLButtonElement>(
-      ".compose-segmented-item",
-    )[1];
-    linkBtn.click();
-    await el.updateComplete;
+      requireEditor(
+        el.querySelectorAll<JantComposeEditor>("jant-compose-editor")[0],
+      ).commands.clearContent();
+      await flushUpdates(el);
+      expect(publishButton(el).disabled).toBe(true);
 
-    expect(el._format).toBe("link");
-    expect(linkBtn.classList.contains("compose-segmented-item-active")).toBe(
-      true,
-    );
-    expect(noteBtn.classList.contains("compose-segmented-item-active")).toBe(
-      false,
-    );
-    expect(
-      el.querySelector('.compose-tool-btn-view[aria-label="Fullscreen"]'),
-    ).toBeNull();
-  });
+      await removePost(el, 0);
 
-  it("autofocuses the primary field on desktop format switches", async () => {
-    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
-      cb(0);
-      return 1;
+      expect(publishButton(el).disabled).toBe(false);
     });
-    const el = await createElement();
-    const editor = requireElement(
-      el.querySelector<JantComposeEditor>("jant-compose-editor"),
-      "expected compose editor",
-    );
-    const focusSpy = vi.spyOn(editor, "focusInput");
-
-    const linkBtn = el.querySelectorAll<HTMLButtonElement>(
-      ".compose-segmented-item",
-    )[1];
-    linkBtn.click();
-    await flushUpdates(el);
 
-    expect(focusSpy).toHaveBeenCalledTimes(1);
+    it("keeps each post's own text when the middle post is removed", async () => {
+      const el = await createElement();
+      await typeInto(el, 0, "AAA");
+      await addPost(el);
+      await typeInto(el, 1, "BBB");
+      await addPost(el);
+      await typeInto(el, 2, "CCC");
+
+      await removePost(el, 1);
+
+      const text = Array.from(
+        el.querySelectorAll<JantComposeEditor>("jant-compose-editor"),
+      ).map((editor) => requireEditor(editor).getText());
+      expect(text).toEqual(["AAA", "CCC"]);
+    });
   });
 
-  it("does not autofocus the primary field on touch format switches", async () => {
-    mockMatchMedia(true);
-    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
-      cb(0);
-      return 1;
-    });
+  it("numbers each post in a thread", async () => {
     const el = await createElement();
-    const editor = requireElement(
-      el.querySelector<JantComposeEditor>("jant-compose-editor"),
-      "expected compose editor",
-    );
-    const focusSpy = vi.spyOn(editor, "focusInput");
+    el._threadItems = [
+      { id: "thread-1", format: "note" },
+      { id: "thread-2", format: "note" },
+    ];
+    await flushUpdates(el);
 
-    const linkBtn = el.querySelectorAll<HTMLButtonElement>(
-      ".compose-segmented-item",
-    )[1];
-    linkBtn.click();
+    const positions = () =>
+      Array.from(el.querySelectorAll(".compose-post-position")).map((n) =>
+        n.textContent?.trim(),
+      );
+    expect(positions()).toEqual(["1/2", "2/2"]);
+
+    (el as unknown as { _addThreadItem: () => void })._addThreadItem();
     await flushUpdates(el);
 
-    expect(focusSpy).not.toHaveBeenCalled();
+    // The total re-renders on every post, not just the new one.
+    expect(positions()).toEqual(["1/3", "2/3", "3/3"]);
   });
 
-  function mockEditPost(post: Record<string, unknown>) {
-    return vi.spyOn(globalThis, "fetch").mockResolvedValue(
-      new Response(JSON.stringify({ id: "pst_123", ...post }), {
+  const positionsIn = (el: JantComposeDialog) =>
+    Array.from(el.querySelectorAll(".compose-post-position")).map((n) =>
+      n.textContent?.trim(),
+    );
+
+  it("numbers a reply from the end of the thread it continues", async () => {
+    // The parent is the second post of a thread, so the reply is the third —
+    // not the first, and not the second.
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(JSON.stringify({ id: "pst_parent", threadPosition: 2 }), {
         headers: { "Content-Type": "application/json" },
       }),
     );
-  }
 
-  it("shows the format switcher instead of a title while editing", async () => {
-    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
-      cb(0);
-      return 1;
+    const el = await createElement();
+    await el.openReply("pst_parent", {
+      contentHtml: "<p>Parent</p>",
+      dateText: "Mar 14",
     });
-    mockEditPost({ format: "note", title: "Hello", body: null });
+    await flushUpdates(el);
+    await flushUpdates(el);
 
-    const el = await createElement();
-    await el.openEdit("pst_123");
+    expect(positionsIn(el)).toEqual(["3/3"]);
+
+    (el as unknown as { _addThreadItem: () => void })._addThreadItem();
     await flushUpdates(el);
 
-    expect(el.querySelector(".compose-segmented")).not.toBeNull();
-    // The "Edit post" title is gone — the switcher takes the center slot.
-    expect(el.querySelector(".compose-dialog-title")).toBeNull();
+    expect(positionsIn(el)).toEqual(["3/4", "4/4"]);
   });
 
-  it("shows a Reply title with the format selector above the post when replying", async () => {
+  it("shows no number for a reply until the parent's position is known", async () => {
+    // Counting from 1 and then correcting to 3 is worse than arriving late, so
+    // the marker stays away while the lookup is in flight — and stays away for
+    // good if it fails.
+    vi.spyOn(globalThis, "fetch").mockRejectedValue(new Error("offline"));
+
     const el = await createElement();
-    await el.openReply("019ce8ce-d6d8-7fda-a5df-c2da2bef5ade", {
+    await el.openReply("pst_parent", {
       contentHtml: "<p>Parent</p>",
       dateText: "Mar 14",
     });
     await flushUpdates(el);
+    await flushUpdates(el);
 
-    expect(el.querySelector(".compose-dialog-title")?.textContent?.trim()).toBe(
-      "Reply",
-    );
-    // The header center no longer hosts the format selector...
-    expect(
-      el.querySelector(".compose-dialog-header-center .compose-segmented"),
-    ).toBeNull();
-    // ...it sits inline above the reply editor instead.
-    expect(el.querySelector(".compose-thread-post-header")).not.toBeNull();
-    expect(
-      el.querySelector(".compose-thread-layout.compose-reply-compose-layout"),
-    ).not.toBeNull();
-    expect(el.querySelector(".compose-collection-trigger")).toBeNull();
-    expect(
-      el.querySelector(".compose-action-row-without-collection"),
-    ).not.toBeNull();
-    expect(el.querySelector(".compose-publish-main")).not.toBeNull();
+    expect(positionsIn(el)).toEqual([]);
   });
 
-  it("shows an Edit title with the format selector above the post when editing a reply", async () => {
-    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
-      cb(0);
-      return 1;
-    });
-    const parentId = "019ce8ce-d6d8-7fda-a5df-c2da2bef5ade";
-    // A fresh Response per call: openEdit reads the edited post, then
-    // _fetchReplyContext reads the parent — a single shared Response body can
-    // only be consumed once.
-    vi.spyOn(globalThis, "fetch").mockImplementation((input) => {
-      const url = String(input);
-      const json = url.includes(parentId)
-        ? { id: parentId, bodyHtml: "<p>Parent</p>", format: "note" }
-        : {
-            id: "pst_123",
-            format: "note",
-            title: "Hello",
-            body: null,
-            replyToId: parentId,
-            collectionIds: ["col-thread"],
-          };
-      return Promise.resolve(
-        new Response(JSON.stringify(json), {
-          headers: { "Content-Type": "application/json" },
-        }),
-      );
-    });
-
+  it("leaves a lone new post unnumbered — there is no chain to place it in", async () => {
     const el = await createElement();
-    await el.openEdit("pst_123");
     await flushUpdates(el);
 
-    expect(el.querySelector(".compose-dialog-title")?.textContent?.trim()).toBe(
-      "Edit",
-    );
-    expect(
-      el.querySelector(".compose-dialog-header-center .compose-segmented"),
-    ).toBeNull();
-    expect(el.querySelector(".compose-thread-post-header")).not.toBeNull();
-    expect(el._collectionIds).toEqual([]);
-    expect(el.querySelector(".compose-collection-trigger")).toBeNull();
+    expect(el.querySelector(".compose-post-position")).toBeNull();
   });
 
   it("switches format from the inline selector when replying", async () => {
@@ -959,8 +2513,7 @@ describe("JantComposeDialog", () => {
     await editor.updateComplete;
 
     let receivedDetail:
-      | (ComposeSubmitDetail & { pendingAttachments: unknown[] })
-      | null = null;
+      (ComposeSubmitDetail & { pendingAttachments: unknown[] }) | null = null;
     el.addEventListener("jant:compose-submit-deferred", (event) => {
       const customEvent = event as CustomEvent<
         ComposeSubmitDetail & { pendingAttachments: unknown[] }
@@ -1040,13 +2593,13 @@ describe("JantComposeDialog", () => {
     await editor.updateComplete;
 
     requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
       "expected publish settings toggle",
     ).click();
     await el.updateComplete;
 
     const options = el.querySelectorAll<HTMLButtonElement>(
-      ".compose-publish-chip[role='radio']",
+      ".compose-sheet-row[role='radio']",
     );
     expect(options).toHaveLength(3);
     options[1]?.click();
@@ -1100,11 +2653,12 @@ describe("JantComposeDialog", () => {
       await editor.updateComplete;
 
       requireElement(
-        el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+        el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
         "expected publish settings toggle",
       ).click();
       await el.updateComplete;
 
+      await openPostMeta(el);
       const publishedAtInput = requireElement(
         el.querySelector<HTMLInputElement>(".compose-publish-date-input"),
         "expected publish date input",
@@ -1145,16 +2699,17 @@ describe("JantComposeDialog", () => {
     }
   });
 
-  it("shows a publish date summary near the submit controls after the date changes", async () => {
+  it("keeps the chosen publish date readable on the post's pill", async () => {
     const el = await createElement();
 
     const publishToggle = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
       "expected publish settings toggle",
     );
     publishToggle.click();
     await el.updateComplete;
 
+    await openPostMeta(el);
     const publishedAtInput = requireElement(
       el.querySelector<HTMLInputElement>(".compose-publish-date-input"),
       "expected publish date input",
@@ -1163,31 +2718,25 @@ describe("JantComposeDialog", () => {
     publishedAtInput.dispatchEvent(new Event("input", { bubbles: true }));
     await el.updateComplete;
 
-    publishToggle.click();
-    await el.updateComplete;
-
-    const summary = requireElement(
-      el.querySelector<HTMLButtonElement>(
-        "[data-compose-publish-date-summary]",
-      ),
-      "expected publish date summary",
-    );
-    expect(summary.dataset.publishDate).toBe("2024-01-15");
-    expect(summary.textContent).toContain("2024");
-
-    summary.click();
-    await el.updateComplete;
+    // Close the panel: the chosen date stays readable on the pill.
+    requireElement(
+      el.querySelector<HTMLButtonElement>("[data-compose-post-meta-pill]"),
+      "expected post meta pill",
+    ).click();
     await flushUpdates(el);
+    expect(el.querySelector(".compose-publish-date-input")).toBeNull();
+    expect(pillValue(el, "date")).toContain("2024");
 
+    await openPostMeta(el);
     expect(
       requireElement(
         el.querySelector<HTMLInputElement>(".compose-publish-date-input"),
         "expected publish date input after reopening publish settings",
-      ),
-    ).toBe(document.activeElement);
+      ).value,
+    ).toBe("2024-01-15");
   });
 
-  it("does not show a publish date summary for an unchanged date while editing a post", async () => {
+  it("shows the existing publish date on the post pill while editing a post", async () => {
     const el = await createElement();
     (
       el as unknown as {
@@ -1213,10 +2762,12 @@ describe("JantComposeDialog", () => {
     el.requestUpdate();
     await el.updateComplete;
 
-    expect(el.querySelector("[data-compose-publish-date-summary]")).toBeNull();
+    await openPostMeta(el);
+
+    expect(pillValue(el, "date")).toContain("2024");
   });
 
-  it("shows a publish now summary after clearing the publish date while editing a post", async () => {
+  it("shows Now on the post date control after clearing the date while editing", async () => {
     const el = await createElement();
     (
       el as unknown as {
@@ -1242,15 +2793,12 @@ describe("JantComposeDialog", () => {
     el.requestUpdate();
     await el.updateComplete;
 
-    expect(
-      requireElement(
-        el.querySelector<HTMLElement>("[data-compose-publish-date-summary]"),
-        "expected publish now summary",
-      ).textContent,
-    ).toContain("Publish now");
+    await openPostMeta(el);
+
+    expect(pillValue(el, "date")).toBe("Now");
   });
 
-  it("shows a custom link summary near the submit controls after the link changes", async () => {
+  it("keeps the custom link readable on the post's pill", async () => {
     mockSlugApi((url) => {
       if (url.searchParams.get("mode") === "suggest") {
         return { body: { slug: "configured-post" } };
@@ -1263,7 +2811,7 @@ describe("JantComposeDialog", () => {
 
     const el = await createElement();
     const publishToggle = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
       "expected publish settings toggle",
     );
 
@@ -1271,6 +2819,7 @@ describe("JantComposeDialog", () => {
     await el.updateComplete;
     await flushUpdates(el);
 
+    await openPostMeta(el);
     const slugInput = requireElement(
       el.querySelector<HTMLInputElement>(".compose-publish-slug-input"),
       "expected custom link input",
@@ -1280,31 +2829,25 @@ describe("JantComposeDialog", () => {
     await new Promise((resolve) => setTimeout(resolve, 300));
     await el.updateComplete;
 
-    publishToggle.click();
-    await el.updateComplete;
-
-    const summary = requireElement(
-      el.querySelector<HTMLButtonElement>(
-        "[data-compose-publish-slug-summary]",
-      ),
-      "expected custom link summary",
-    );
-    expect(summary.dataset.publishSlug).toBe("reading-notes");
-    expect(summary.textContent).toContain("/reading-notes");
-
-    summary.click();
-    await el.updateComplete;
+    // Close the panel: the custom link stays readable on the pill.
+    requireElement(
+      el.querySelector<HTMLButtonElement>("[data-compose-post-meta-pill]"),
+      "expected post meta pill",
+    ).click();
     await flushUpdates(el);
+    expect(el.querySelector(".compose-publish-slug-input")).toBeNull();
+    expect(pillValue(el, "slug")).toBe("/reading-notes");
 
+    await openPostMeta(el);
     expect(
       requireElement(
         el.querySelector<HTMLInputElement>(".compose-publish-slug-input"),
         "expected custom link input after reopening publish settings",
-      ),
-    ).toBe(document.activeElement);
+      ).value,
+    ).toBe("reading-notes");
   });
 
-  it("does not show a custom link summary for an unchanged link while editing a post", async () => {
+  it("shows the existing custom link on the post pill while editing a post", async () => {
     const el = await createElement();
     (
       el as unknown as {
@@ -1330,10 +2873,12 @@ describe("JantComposeDialog", () => {
     el.requestUpdate();
     await el.updateComplete;
 
-    expect(el.querySelector("[data-compose-publish-slug-summary]")).toBeNull();
+    await openPostMeta(el);
+
+    expect(pillValue(el, "slug")).toBe("/reading-notes");
   });
 
-  it("shows an auto link summary after clearing the custom link while editing a post", async () => {
+  it("shows Auto on the post permalink pill after clearing the link while editing", async () => {
     const el = await createElement();
     (
       el as unknown as {
@@ -1359,12 +2904,9 @@ describe("JantComposeDialog", () => {
     el.requestUpdate();
     await el.updateComplete;
 
-    expect(
-      requireElement(
-        el.querySelector<HTMLElement>("[data-compose-publish-slug-summary]"),
-        "expected auto link summary",
-      ).textContent,
-    ).toContain("Auto link");
+    await openPostMeta(el);
+
+    expect(pillValue(el, "slug")).toBe("Auto");
   });
 
   it("blocks publishing with a future publish date", async () => {
@@ -1389,11 +2931,12 @@ describe("JantComposeDialog", () => {
       await editor.updateComplete;
 
       requireElement(
-        el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+        el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
         "expected publish settings toggle",
       ).click();
       await el.updateComplete;
 
+      await openPostMeta(el);
       const publishedAtInput = requireElement(
         el.querySelector<HTMLInputElement>(".compose-publish-date-input"),
         "expected publish date input",
@@ -1420,13 +2963,13 @@ describe("JantComposeDialog", () => {
     const el = await createElement();
 
     requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
       "expected publish settings toggle",
     ).click();
     await el.updateComplete;
 
     const options = el.querySelectorAll<HTMLButtonElement>(
-      ".compose-publish-chip[role='radio']",
+      ".compose-sheet-row[role='radio']",
     );
     expect(options).toHaveLength(3);
     options[2]?.click();
@@ -1444,24 +2987,153 @@ describe("JantComposeDialog", () => {
     const el = await createElement();
 
     requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
       "expected publish settings toggle",
     ).click();
     await el.updateComplete;
 
     const options = el.querySelectorAll<HTMLButtonElement>(
-      ".compose-publish-chip[role='radio']",
+      ".compose-sheet-row[role='radio']",
     );
     expect(options).toHaveLength(3);
     options[1]?.click();
     await el.updateComplete;
 
     expect(
-      requireElement(
-        el.querySelector<HTMLButtonElement>(".compose-publish-main"),
-        "expected publish button",
-      ).textContent?.trim(),
-    ).toBe("Post hidden");
+      requireElement(
+        el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+        "expected publish button",
+      ).textContent?.trim(),
+    ).toBe("Post hidden");
+  });
+
+  it("flips visibility from the Hide from Latest shortcut", async () => {
+    const el = await createElement();
+
+    const toggle = requireElement(
+      el.querySelector<HTMLInputElement>(
+        ".compose-quick-actions-row .compose-publish-quick-toggle-input",
+      ),
+      "expected hide-from-latest shortcut",
+    );
+    expect(toggle.checked).toBe(false);
+
+    toggle.checked = true;
+    toggle.dispatchEvent(new globalThis.Event("change"));
+    await el.updateComplete;
+    expect(el._visibility).toBe("latest_hidden");
+
+    toggle.checked = false;
+    toggle.dispatchEvent(new globalThis.Event("change"));
+    await el.updateComplete;
+    expect(el._visibility).toBe("public");
+  });
+
+  it("drops the Hide from Latest shortcut once the post is private", async () => {
+    const el = await createElement();
+
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
+      "expected publish settings toggle",
+    ).click();
+    await el.updateComplete;
+
+    // A checkbox cannot speak for a third state, so it steps aside.
+    el.querySelectorAll<HTMLButtonElement>(
+      ".compose-sheet-row[role='radio']",
+    )[2]?.click();
+    await el.updateComplete;
+
+    expect(el._visibility).toBe("private");
+    expect(el.querySelector(".compose-quick-actions-row")).toBeNull();
+  });
+
+  it("offers the quiet reply shortcut on a reply, in place of visibility", async () => {
+    const el = await createElement();
+
+    await el.openReply("019ce8ce-d6d8-7fda-a5df-c2da2bef5ade", {
+      contentHtml: "<p>Parent</p>",
+      dateText: "Mar 14",
+    });
+    await flushUpdates(el);
+
+    const toggles = el.querySelectorAll<HTMLInputElement>(
+      ".compose-quick-actions-row .compose-publish-quick-toggle-input",
+    );
+    // A reply inherits the root's visibility, so only quiet reply is offered.
+    expect(toggles).toHaveLength(1);
+
+    const toggle = requireElement(
+      toggles.item(0),
+      "expected quiet reply shortcut",
+    );
+    toggle.checked = true;
+    toggle.dispatchEvent(new globalThis.Event("change"));
+    await el.updateComplete;
+
+    expect(el._quietReply).toBe(true);
+    expect(
+      requireElement(
+        el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+        "expected publish button",
+      ).textContent?.trim(),
+    ).toBe("Reply quietly");
+  });
+
+  it("drops the quiet reply switch when editing an existing reply", async () => {
+    const parentId = "019ce8ce-d6d8-7fda-a5df-c2da2bef5ade";
+    vi.spyOn(globalThis, "fetch").mockImplementation((input) => {
+      const url = String(input);
+      const json = url.includes(parentId)
+        ? { id: parentId, bodyHtml: "<p>Parent</p>", format: "note" }
+        : {
+            id: "pst_123",
+            format: "note",
+            title: null,
+            body: null,
+            replyToId: parentId,
+          };
+      return Promise.resolve(
+        new Response(JSON.stringify(json), {
+          headers: { "Content-Type": "application/json" },
+        }),
+      );
+    });
+
+    const el = await createElement();
+    await el.openEdit("pst_123");
+    await flushUpdates(el);
+
+    // Saving an edit goes through the update path, which has no create-time
+    // thread bump to skip — so the switch is gone rather than dead.
+    expect(el.querySelector(".compose-quick-actions-row")).toBeNull();
+
+    el._showPublishPanel = true;
+    await flushUpdates(el);
+    expect(
+      Array.from(el.querySelectorAll(".compose-sheet-title")).some(
+        (row) => row.textContent?.trim() === labels.quietReplyLabel,
+      ),
+    ).toBe(false);
+  });
+
+  it("keeps the quiet reply switch on a thread draft, which saves by recreating", async () => {
+    const el = await createElement();
+    await el.openReply("019ce8ce-d6d8-7fda-a5df-c2da2bef5ade", {
+      contentHtml: "<p>Parent</p>",
+      dateText: "Mar 14",
+    });
+    (el as unknown as { _addThreadItem: () => void })._addThreadItem();
+    // Re-editing a saved thread draft deletes and recreates every post, so the
+    // create-time flag still lands.
+    el._draftSourceId = "pst_draft";
+    await flushUpdates(el);
+
+    expect(
+      el.querySelectorAll(
+        ".compose-quick-actions-row .compose-publish-quick-toggle-input",
+      ),
+    ).toHaveLength(1);
   });
 
   it("opens a new post with the requested collection and keeps the last visibility until refresh", async () => {
@@ -1474,13 +3146,13 @@ describe("JantComposeDialog", () => {
     expect(el._visibility).toBe("public");
 
     requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
       "expected publish settings toggle",
     ).click();
     await el.updateComplete;
 
     const options = el.querySelectorAll<HTMLButtonElement>(
-      ".compose-publish-chip[role='radio']",
+      ".compose-sheet-row[role='radio']",
     );
     options[1]?.click();
     await el.updateComplete;
@@ -1522,7 +3194,6 @@ describe("JantComposeDialog", () => {
         slug: "",
         visibility: "public",
         rating: 0,
-        showTitle: false,
         showRating: false,
         collectionIds: ["col-1"],
         attachedTexts: [],
@@ -1537,6 +3208,250 @@ describe("JantComposeDialog", () => {
     expect(el._collectionIds).toEqual(["col-2", "col-1"]);
   });
 
+  function seedDraftWithMedia() {
+    globalThis.localStorage.setItem(
+      "jant:compose-draft",
+      JSON.stringify({
+        format: "note",
+        title: "",
+        bodyJson: {
+          type: "doc",
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "Draft with images" }],
+            },
+          ],
+        },
+        url: "",
+        quoteText: "",
+        quoteAuthor: "",
+        slug: "",
+        visibility: "public",
+        rating: 0,
+        showTitle: false,
+        showRating: false,
+        collectionIds: [],
+        replyToId: null,
+        attachedTexts: [],
+        attachmentOrder: ["client-a", "client-b"],
+        mediaAttachments: [
+          {
+            clientId: "client-a",
+            mediaId: "med_aaa",
+            url: "/media/aaa.jpg",
+            mimeType: "image/jpeg",
+            name: "aaa.jpg",
+            alt: "first",
+          },
+        ],
+        savedAt: Date.now(),
+      }),
+    );
+  }
+
+  it("restores uploaded media from the draft snapshot plus bridge-supplied uploads", async () => {
+    const el = await createElement();
+    seedDraftWithMedia();
+
+    // client-b's upload finished after the dialog closed — only the bridge
+    // knows about it, so it arrives via restoreMedia instead of the snapshot.
+    await el.openNew({
+      restoreDraft: true,
+      restoreToast: false,
+      restoreMedia: [
+        {
+          clientId: "client-b",
+          mediaId: "med_bbb",
+          url: "/media/bbb.png",
+          mimeType: "image/png",
+          name: "bbb.png",
+        },
+      ],
+    });
+    await flushUpdates(el);
+
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    const attachments = editor._attachments;
+    expect(attachments.map((a) => a.clientId)).toEqual([
+      "client-a",
+      "client-b",
+    ]);
+    expect(attachments.map((a) => a.mediaId)).toEqual(["med_aaa", "med_bbb"]);
+    expect(attachments.every((a) => a.status === "done")).toBe(true);
+    expect(attachments[0].remoteUrl).toBe("/media/aaa.jpg");
+    expect(attachments[0].alt).toBe("first");
+    expect(editor._attachmentOrder).toEqual(["client-a", "client-b"]);
+  });
+
+  it("suppresses the draft-restored toast when restoreToast is false", async () => {
+    const container = document.createElement("div");
+    container.id = "toast-container";
+    document.body.appendChild(container);
+    const el = await createElement();
+    seedDraftWithMedia();
+
+    await el.openNew({ restoreDraft: true, restoreToast: false });
+    await flushUpdates(el);
+    expect(container.querySelector(".toast")).toBeNull();
+
+    el.reset();
+    await el.openNew({ restoreDraft: true });
+    await flushUpdates(el);
+    expect(container.querySelector(".toast span")?.textContent).toBe(
+      "Draft restored.",
+    );
+  });
+
+  const NOTE_TITLE_KEY = "jant:compose-note-title";
+
+  function titleToggle(el: JantComposeDialog, index = 0): HTMLButtonElement {
+    return requireElement(
+      el.querySelectorAll<HTMLButtonElement>(
+        '.compose-tool-btn[title="Title"]',
+      )[index] ?? null,
+      "expected title toggle",
+    );
+  }
+
+  it("remembers a note's title toggle for the next new post", async () => {
+    const el = await createElement();
+    await el.openNew({ restoreDraft: false });
+    await flushUpdates(el);
+
+    expect(el.querySelector(".compose-note-title")).not.toBeNull();
+
+    titleToggle(el).click();
+    await flushUpdates(el);
+
+    expect(globalThis.localStorage.getItem(NOTE_TITLE_KEY)).toBe("0");
+    expect(el.querySelector(".compose-note-title")).toBeNull();
+
+    await el.openNew({ restoreDraft: false });
+    await flushUpdates(el);
+
+    expect(el.querySelector(".compose-note-title")).toBeNull();
+
+    titleToggle(el).click();
+    await flushUpdates(el);
+
+    expect(globalThis.localStorage.getItem(NOTE_TITLE_KEY)).toBe("1");
+
+    await el.openNew({ restoreDraft: false });
+    await flushUpdates(el);
+
+    expect(el.querySelector(".compose-note-title")).not.toBeNull();
+  });
+
+  it("opens a fresh composer without the title field when it was last turned off", async () => {
+    globalThis.localStorage.setItem(NOTE_TITLE_KEY, "0");
+
+    const el = await createElement();
+
+    expect(el.querySelector(".compose-note-title")).toBeNull();
+  });
+
+  it("does not remember the title toggle from an edit", async () => {
+    mockEditPost({ format: "note", title: "Hello", body: null });
+
+    const el = await createElement();
+    await el.openEdit("pst_123");
+    await flushUpdates(el);
+
+    titleToggle(el).click();
+    await flushUpdates(el);
+
+    // Dropping this post's title says nothing about the next post's.
+    expect(globalThis.localStorage.getItem(NOTE_TITLE_KEY)).toBeNull();
+  });
+
+  it("does not remember the title toggle from a reply", async () => {
+    const el = await createElement();
+    await el.openReply("019ce8ce-d6d8-7fda-a5df-c2da2bef5ade", {
+      contentHtml: "<p>Parent</p>",
+      dateText: "Mar 14",
+    });
+    await flushUpdates(el);
+
+    titleToggle(el).click();
+    await flushUpdates(el);
+
+    expect(el.querySelector(".compose-note-title")).not.toBeNull();
+    expect(globalThis.localStorage.getItem(NOTE_TITLE_KEY)).toBeNull();
+  });
+
+  it("does not remember the title toggle from a thread post", async () => {
+    const el = await createElement();
+    (el as unknown as { _addThreadItem: () => void })._addThreadItem();
+    await flushUpdates(el);
+
+    titleToggle(el).click();
+    await flushUpdates(el);
+
+    expect(globalThis.localStorage.getItem(NOTE_TITLE_KEY)).toBeNull();
+  });
+
+  it("does not remember a title the editor reveals on its own", async () => {
+    const el = await createElement();
+    await el.openNew({ restoreDraft: false });
+    await flushUpdates(el);
+
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    // The fullscreen and H1-promotion paths land here. Neither is the author
+    // stating a habit, so neither writes one down.
+    editor.setEditorState(null, "Promoted", true);
+    await flushUpdates(el);
+
+    expect(el.querySelector(".compose-note-title")).not.toBeNull();
+    expect(globalThis.localStorage.getItem(NOTE_TITLE_KEY)).toBeNull();
+  });
+
+  it("lets a restored draft's title state win over the remembered default", async () => {
+    globalThis.localStorage.setItem(NOTE_TITLE_KEY, "0");
+    globalThis.localStorage.setItem(
+      "jant:compose-draft",
+      JSON.stringify({
+        format: "note",
+        title: "Draft title",
+        showTitle: true,
+        bodyJson: {
+          type: "doc",
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "Draft body" }],
+            },
+          ],
+        },
+        url: "",
+        quoteText: "",
+        quoteAuthor: "",
+        slug: "",
+        visibility: "public",
+        rating: 0,
+        showRating: false,
+        collectionIds: [],
+        attachedTexts: [],
+        attachmentOrder: [],
+        savedAt: Date.now(),
+      }),
+    );
+
+    const el = await createElement();
+    await el.openNew();
+    await flushUpdates(el);
+
+    expect(
+      el.querySelector<HTMLInputElement>(".compose-note-title")?.value,
+    ).toBe("Draft title");
+  });
+
   it("includes a custom slug from the publish settings panel in the submit payload", async () => {
     mockSlugApi((url) => {
       if (url.searchParams.get("mode") === "suggest") {
@@ -1565,13 +3480,14 @@ describe("JantComposeDialog", () => {
     await editor.updateComplete;
 
     const publishToggle = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
       "expected publish settings toggle",
     );
     publishToggle.click();
     await el.updateComplete;
     await flushUpdates(el);
 
+    await openPostMeta(el);
     const slugInput = requireElement(
       el.querySelector<HTMLInputElement>(".compose-publish-slug-input"),
       "expected custom link input",
@@ -1611,7 +3527,7 @@ describe("JantComposeDialog", () => {
     const el = await createElement();
 
     const publishToggle = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
       "expected publish settings toggle",
     );
 
@@ -1619,6 +3535,7 @@ describe("JantComposeDialog", () => {
     await el.updateComplete;
     await flushUpdates(el);
 
+    await openPostMeta(el);
     const slugInput = requireElement(
       el.querySelector<HTMLInputElement>(".compose-publish-slug-input"),
       "expected custom link input",
@@ -1633,6 +3550,7 @@ describe("JantComposeDialog", () => {
     publishToggle.click();
     await el.updateComplete;
 
+    await openPostMeta(el);
     expect(el.querySelector(".compose-publish-slug-input")).not.toBeNull();
   });
 
@@ -1691,7 +3609,7 @@ describe("JantComposeDialog", () => {
     } as never);
 
     requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
       "expected publish settings toggle",
     ).click();
     await el.updateComplete;
@@ -1762,7 +3680,7 @@ describe("JantComposeDialog", () => {
     } as never);
 
     requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
       "expected publish settings toggle",
     ).click();
     await el.updateComplete;
@@ -1784,7 +3702,7 @@ describe("JantComposeDialog", () => {
     const el = await createElement();
 
     requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
       "expected publish settings toggle",
     ).click();
     await el.updateComplete;
@@ -1812,13 +3730,14 @@ describe("JantComposeDialog", () => {
     await editor.updateComplete;
 
     const publishToggle = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
       "expected publish settings toggle",
     );
     publishToggle.click();
     await el.updateComplete;
     await flushUpdates(el);
 
+    await openPostMeta(el);
     const slugInput = requireElement(
       el.querySelector<HTMLInputElement>(".compose-publish-slug-input"),
       "expected custom link input",
@@ -1863,7 +3782,6 @@ describe("JantComposeDialog", () => {
       el.querySelector<JantComposeEditor>("jant-compose-editor"),
       "expected compose editor",
     );
-    editor._showTitle = true;
     editor._title = "Hello World";
     editor._bodyJson = {
       type: "doc",
@@ -1874,13 +3792,14 @@ describe("JantComposeDialog", () => {
     await editor.updateComplete;
 
     const publishToggle = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
       "expected publish settings toggle",
     );
     publishToggle.click();
     await el.updateComplete;
     await flushUpdates(el);
 
+    await openPostMeta(el);
     expect(
       el.querySelector(".compose-slug-suggestion-value")?.textContent?.trim(),
     ).toBe("/hello-world");
@@ -1901,11 +3820,11 @@ describe("JantComposeDialog", () => {
     ).toBeUndefined();
   });
 
-  it("shows visibility and custom link settings in the publish panel", async () => {
+  it("keeps the publish panel to whole-submission settings", async () => {
     const el = await createElement();
 
     const publishToggle = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
       "expected publish settings toggle",
     );
     publishToggle.click();
@@ -1917,12 +3836,16 @@ describe("JantComposeDialog", () => {
     );
     expect(panel.textContent).not.toContain("Publish settings");
     expect(panel.textContent).toContain("Visibility");
-    expect(panel.textContent).toContain("Published on");
-    expect(panel.textContent).toContain("Custom link");
     expect(panel.textContent).not.toContain("Save as draft");
     expect(panel.textContent).not.toContain("Discard");
-    expect(panel.querySelector(".compose-publish-date-input")).not.toBeNull();
-    expect(panel.querySelector(".compose-publish-slug-input")).not.toBeNull();
+    // Post-scoped settings are not in here — they live on the post.
+    expect(panel.textContent).not.toContain("Published on");
+    expect(panel.textContent).not.toContain("Custom link");
+
+    await openPostMeta(el);
+    expect(el.querySelector(".compose-publish-date-input")).not.toBeNull();
+    await openPostMeta(el);
+    expect(el.querySelector(".compose-publish-slug-input")).not.toBeNull();
   });
 
   it("clears the custom slug with the reset action", async () => {
@@ -1938,13 +3861,14 @@ describe("JantComposeDialog", () => {
 
     const el = await createElement();
     const publishToggle = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
       "expected publish settings toggle",
     );
     publishToggle.click();
     await el.updateComplete;
     await flushUpdates(el);
 
+    await openPostMeta(el);
     const slugInput = requireElement(
       el.querySelector<HTMLInputElement>(".compose-publish-slug-input"),
       "expected custom link input",
@@ -1964,6 +3888,7 @@ describe("JantComposeDialog", () => {
     ).click();
     await flushUpdates(el);
 
+    await openPostMeta(el);
     expect(
       requireElement(
         el.querySelector<HTMLInputElement>(".compose-publish-slug-input"),
@@ -1986,7 +3911,7 @@ describe("JantComposeDialog", () => {
     await el.updateComplete;
 
     const publishToggle = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
       "expected publish settings toggle",
     );
     publishToggle.click();
@@ -2018,18 +3943,18 @@ describe("JantComposeDialog", () => {
         el.querySelector<JantComposeEditor>("jant-compose-editor"),
         "expected compose editor",
       );
-      editor._showTitle = true;
       editor._title = "Hello World";
       await editor.updateComplete;
 
       const publishToggle = requireElement(
-        el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+        el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
         "expected publish settings toggle",
       );
       publishToggle.click();
       await el.updateComplete;
       await flushUpdates(el);
 
+      await openPostMeta(el);
       expect(
         el.querySelector(".compose-slug-suggestion-value")?.textContent?.trim(),
       ).toBe("/hello-world");
@@ -2079,13 +4004,14 @@ describe("JantComposeDialog", () => {
       await editor.updateComplete;
 
       const publishToggle = requireElement(
-        el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+        el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
         "expected publish settings toggle",
       );
       publishToggle.click();
       await el.updateComplete;
       await flushUpdates(el);
 
+      await openPostMeta(el);
       const slugInput = requireElement(
         el.querySelector<HTMLInputElement>(".compose-publish-slug-input"),
         "expected custom link input",
@@ -2136,11 +4062,12 @@ describe("JantComposeDialog", () => {
       await editor.updateComplete;
 
       requireElement(
-        el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+        el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
         "expected publish settings toggle",
       ).click();
       await el.updateComplete;
 
+      await openPostMeta(el);
       const slugInput = requireElement(
         el.querySelector<HTMLInputElement>(".compose-publish-slug-input"),
         "expected custom link input",
@@ -2188,11 +4115,12 @@ describe("JantComposeDialog", () => {
     await editor.updateComplete;
 
     requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      el.querySelector<HTMLButtonElement>(".compose-options-trigger"),
       "expected publish settings toggle",
     ).click();
     await el.updateComplete;
 
+    await openPostMeta(el);
     const slugInput = requireElement(
       el.querySelector<HTMLInputElement>(".compose-publish-slug-input"),
       "expected custom link input",
@@ -2235,8 +4163,7 @@ describe("JantComposeDialog", () => {
     await el.updateComplete;
 
     let receivedDetail:
-      | (ComposeSubmitDetail & { pendingAttachments: unknown[] })
-      | null = null;
+      (ComposeSubmitDetail & { pendingAttachments: unknown[] }) | null = null;
     el.addEventListener("jant:compose-submit-deferred", (event) => {
       const customEvent = event as CustomEvent<
         ComposeSubmitDetail & { pendingAttachments: unknown[] }
@@ -2306,7 +4233,6 @@ describe("JantComposeDialog", () => {
         slug: "",
         visibility: "public",
         rating: 0,
-        showTitle: false,
         showRating: false,
         collectionIds: ["col-stale"],
         replyToId,
@@ -2427,48 +4353,278 @@ describe("JantComposeDialog", () => {
     expect(detail.threadPosts?.[0]?.quietReply).toBe(true);
   });
 
-  it("does not add more thread items than the shared limit", async () => {
-    const el = await createElement();
-    el._threadItems = Array.from({ length: MAX_THREAD_POSTS }, (_, index) => ({
-      id: `thread-${index}`,
-      format: "note",
-    }));
+  it("does not add more thread items than the shared limit", async () => {
+    const el = await createElement();
+    el._threadItems = Array.from({ length: MAX_THREAD_POSTS }, (_, index) => ({
+      id: `thread-${index}`,
+      format: "note",
+    }));
+
+    (
+      el as unknown as {
+        _addThreadItem: () => void;
+      }
+    )._addThreadItem();
+
+    expect(el._threadItems).toHaveLength(MAX_THREAD_POSTS);
+  });
+
+  it("scrolls the thread composer to the bottom after adding an item", async () => {
+    const el = await createElement();
+    el._threadItems = [
+      { id: "thread-1", format: "note" },
+      { id: "thread-2", format: "note" },
+    ];
+    await el.updateComplete;
+
+    const scroller = requireElement(
+      el.querySelector<HTMLElement>(".compose-scroll"),
+      "expected compose scroll region",
+    );
+    Object.defineProperty(scroller, "scrollHeight", {
+      configurable: true,
+      value: 640,
+    });
+    scroller.scrollTop = 120;
+
+    (
+      el as unknown as {
+        _addThreadItem: () => void;
+      }
+    )._addThreadItem();
+    await flushUpdates(el);
+
+    expect(scroller.scrollTop).toBe(640);
+  });
+
+  describe("thread mode keeps what each post holds", () => {
+    type ThreadInternals = {
+      _addThreadItem: () => void;
+      _removeThreadItem: (index: number) => void;
+      _checkSlugAvailability: (slug: string, index?: number) => Promise<void>;
+      _slug: string;
+      _publishedAtInput: string;
+      _publishedAtTimeMinutes: number | null;
+    };
+
+    const internals = (el: JantComposeDialog) =>
+      el as unknown as ThreadInternals;
+
+    const editorsOf = (el: JantComposeDialog) =>
+      Array.from(el.querySelectorAll<JantComposeEditor>("jant-compose-editor"));
+
+    const paragraph = (text: string) => ({
+      type: "doc",
+      content: [{ type: "paragraph", content: [{ type: "text", text }] }],
+    });
+
+    function submit(el: JantComposeDialog): ComposeSubmitDetail {
+      let detail: ComposeSubmitDetail | null = null;
+      el.addEventListener(
+        "jant:compose-submit-deferred",
+        (event) => {
+          detail = (event as CustomEvent<ComposeSubmitDetail>).detail;
+        },
+        { once: true },
+      );
+      requireElement(
+        el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+        "expected publish button",
+      ).click();
+      if (!detail) throw new Error("expected a submit");
+      return detail;
+    }
+
+    it("keeps a quote's source link on the way into a thread and back out", async () => {
+      const el = await createElement();
+      el._format = "quote";
+      await flushUpdates(el);
+      const single = editorsOf(el)[0]!;
+      single._quoteText = "A borrowed sentence.";
+      single._quoteAuthor = "Someone Else";
+      single._url = "https://example.com/source";
+      await flushUpdates(el);
+
+      internals(el)._addThreadItem();
+      await flushUpdates(el);
+      const root = editorsOf(el)[0]!;
+      expect(root.getData()).toMatchObject({
+        url: "https://example.com/source",
+        quoteText: "A borrowed sentence.",
+        quoteAuthor: "Someone Else",
+      });
+
+      internals(el)._removeThreadItem(1);
+      await flushUpdates(el);
+      expect(el._threadItems).toHaveLength(0);
+      expect(editorsOf(el)[0]!.getData().url).toBe(
+        "https://example.com/source",
+      );
+      expect(submit(el).url).toBe("https://example.com/source");
+    });
+
+    it("publishes an attached text that has no media beside it after entering a thread", async () => {
+      // The strip and the submit both walk the attachment order, which was
+      // only carried across when the post also had media.
+      const el = await createElement();
+      const single = editorsOf(el)[0]!;
+      single._bodyJson = paragraph("See the notes below.");
+      single._attachedTexts = [
+        {
+          clientId: "text-1",
+          bodyJson: paragraph("The notes."),
+          bodyHtml: "",
+          summary: "The notes.",
+        },
+      ];
+      single._attachmentOrder = ["text-1"];
+      await flushUpdates(el);
+
+      internals(el)._addThreadItem();
+      await flushUpdates(el);
+      const [root, next] = editorsOf(el);
+      expect(root!.querySelectorAll("[data-attachment-list] > *")).toHaveLength(
+        1,
+      );
+      next!._bodyJson = paragraph("More.");
+      await flushUpdates(el);
+
+      const detail = submit(el);
+      expect(detail.threadPosts?.[0]?.attachments).toEqual([
+        expect.objectContaining({ type: "text", clientId: "text-1" }),
+      ]);
+    });
+
+    it("moves the next post's own permalink and date up when the first post is removed", async () => {
+      // The root's permalink and date live on the dialog, every other post's
+      // on its thread item. Removing the root used to leave its values on the
+      // post that took its place, and drop that post's own.
+      const el = await createElement();
+      el._threadItems = [
+        { id: "a", format: "note" },
+        {
+          id: "b",
+          format: "note",
+          slug: "part-two",
+          publishedAtInput: "2025-01-02",
+          publishedAtTimeMinutes: 600,
+        },
+        { id: "c", format: "note" },
+      ];
+      internals(el)._slug = "part-one";
+      internals(el)._publishedAtInput = "2025-01-01";
+      internals(el)._publishedAtTimeMinutes = 480;
+      await flushUpdates(el);
+      editorsOf(el).forEach((editor, i) => {
+        editor._bodyJson = paragraph(`Post ${i + 1}`);
+      });
+      await flushUpdates(el);
+
+      internals(el)._removeThreadItem(0);
+      await flushUpdates(el);
 
-    (
-      el as unknown as {
-        _addThreadItem: () => void;
-      }
-    )._addThreadItem();
+      expect(internals(el)._slug).toBe("part-two");
+      expect(internals(el)._publishedAtInput).toBe("2025-01-02");
+      expect(internals(el)._publishedAtTimeMinutes).toBe(600);
+      const detail = submit(el);
+      expect(detail.threadPosts?.map((post) => post.slug)).toEqual([
+        "part-two",
+        undefined,
+      ]);
+    });
 
-    expect(el._threadItems).toHaveLength(MAX_THREAD_POSTS);
-  });
+    function mockThreadDraft(requests: string[]) {
+      vi.spyOn(globalThis, "fetch").mockImplementation(async (input) => {
+        const url = String(input);
+        requests.push(url);
+        const json = (body: unknown) =>
+          new Response(JSON.stringify(body), {
+            headers: { "Content-Type": "application/json" },
+          });
+        if (url === "/api/posts/pst_draft_root") {
+          return json({
+            id: "pst_draft_root",
+            threadId: "pst_draft_root",
+            format: "note",
+            status: "draft",
+            slug: "draft-thread",
+            title: "Draft thread",
+            body: null,
+            attachments: [],
+            collectionIds: [],
+          });
+        }
+        if (url === "/api/posts?status=draft&limit=50") {
+          return json({
+            posts: [
+              {
+                id: "pst_draft_reply",
+                threadId: "pst_draft_root",
+                replyToId: "pst_draft_root",
+                format: "quote",
+                status: "draft",
+                slug: "part-two",
+                quoteText: "Draft reply",
+                sourceName: "Someone Else",
+                attachments: [],
+              },
+            ],
+          });
+        }
+        if (url.startsWith("/api/posts/slug?")) {
+          return json({ available: true });
+        }
+        throw new Error(`Unexpected fetch: ${url}`);
+      });
+    }
 
-  it("scrolls the thread composer to the bottom after adding an item", async () => {
-    const el = await createElement();
-    el._threadItems = [
-      { id: "thread-1", format: "note" },
-      { id: "thread-2", format: "note" },
-    ];
-    await el.updateComplete;
+    it("keeps each reply's permalink when a saved thread draft is reopened", async () => {
+      // Saving a thread draft recreates it, so a slug not loaded back into
+      // the composer came back as a random id on the next save.
+      const requests: string[] = [];
+      mockThreadDraft(requests);
+      const el = await createElement();
+      await el.openDraft("pst_draft_root");
+      await flushUpdates(el);
 
-    const threadLayout = requireElement(
-      el.querySelector<HTMLElement>(".compose-thread-compose-layout"),
-      "expected thread compose layout",
-    );
-    Object.defineProperty(threadLayout, "scrollHeight", {
-      configurable: true,
-      value: 640,
+      expect(el._threadItems[1]?.slug).toBe("part-two");
+
+      // A reply's slug already belongs to the saved reply, not to the root.
+      await internals(el)._checkSlugAvailability("part-two", 1);
+      await internals(el)._checkSlugAvailability("draft-thread", 0);
+      const checks = requests
+        .filter((url) => url.startsWith("/api/posts/slug?"))
+        .map((url) => new URL(url, "http://x").searchParams.get("postId"));
+      expect(checks).toEqual(["pst_draft_reply", "pst_draft_root"]);
+
+      expect(submit(el).threadPosts?.map((post) => post.slug)).toEqual([
+        "draft-thread",
+        "part-two",
+      ]);
     });
-    threadLayout.scrollTop = 120;
 
-    (
-      el as unknown as {
-        _addThreadItem: () => void;
-      }
-    )._addThreadItem();
-    await flushUpdates(el);
+    it("folds a thread post's quote into its body when its format changes on a saved draft", async () => {
+      // Single-post drafts already did this; a thread post kept the quote in
+      // a hidden field, which the next save then dropped.
+      mockThreadDraft([]);
+      const el = await createElement();
+      await el.openDraft("pst_draft_root");
+      await flushUpdates(el);
+
+      const reply = editorsOf(el)[1]!;
+      const noteButton = requireElement(
+        Array.from(
+          reply.querySelectorAll<HTMLButtonElement>(".compose-segmented-item"),
+        ).find((button) => button.textContent?.trim() === labels.note) ?? null,
+        "expected the reply's Note button",
+      );
+      noteButton.click();
+      await flushUpdates(el);
 
-    expect(threadLayout.scrollTop).toBe(640);
+      expect(el._threadItems[1]?.format).toBe("note");
+      expect(reply.getData().body).toContain("Draft reply");
+      expect(submit(el).threadPosts?.[1]?.body).toContain("Draft reply");
+    });
   });
 
   it("omits visibility from locked edit submissions", async () => {
@@ -2512,6 +4668,20 @@ describe("JantComposeDialog", () => {
     );
   });
 
+  it("gives the collection trigger one glyph and no chevron", async () => {
+    const el = await createElement();
+    const trigger = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-collection-trigger"),
+      "expected collection trigger",
+    );
+
+    expect(trigger.querySelectorAll("svg").length).toBe(1);
+    expect(
+      trigger.querySelector(".compose-collection-trigger-svg"),
+    ).not.toBeNull();
+    expect(trigger.querySelector(".compose-collection-chevron")).toBeNull();
+  });
+
   it("collection selector toggles IDs", async () => {
     const el = await createElement();
 
@@ -3042,13 +5212,10 @@ describe("JantComposeDialog", () => {
     };
     await editor.updateComplete;
 
-    // Click the draft header button — should show confirm panel
-    const draftBtn = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-dialog-header-btn"),
-      "expected draft button",
-    );
-    draftBtn.click();
-    await el.updateComplete;
+    // Click the drafts row in the options panel — should show confirm panel
+    await openPublishPanel(el);
+    requireElement(draftsRow(el), "expected drafts row").click();
+    await flushUpdates(el);
 
     expect(el._confirmPanelOpen).toBe(true);
     expect(el.querySelector(".compose-confirm-panel")).not.toBeNull();
@@ -3065,13 +5232,10 @@ describe("JantComposeDialog", () => {
       }),
     );
 
-    // Click the draft header button — should open drafts panel
-    const draftBtn = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-dialog-header-btn"),
-      "expected draft button",
-    );
-    draftBtn.click();
-    await el.updateComplete;
+    // Click the drafts row in the options panel — should open drafts panel
+    await openPublishPanel(el);
+    requireElement(draftsRow(el), "expected drafts row").click();
+    await flushUpdates(el);
 
     expect(el._draftsPanelOpen).toBe(true);
 
@@ -3146,6 +5310,71 @@ describe("JantComposeDialog", () => {
     expect(el._draftMenuOpenId).toBeNull();
   });
 
+  it("uses title or quote text for draft previews and identifies each format", async () => {
+    const el = await createElement();
+    el._draftsPanelOpen = true;
+    el._draftsLoading = false;
+    el._drafts = [
+      {
+        id: "pst_note",
+        slug: "note-draft",
+        format: "note",
+        title: "A titled note",
+        bodyText: "This body should not be the preview",
+        bodyHtml: "<p>This body should not be the preview</p>",
+        url: null,
+        quoteText: null,
+        replyToId: null,
+        updatedAt: 0,
+        mediaAttachments: [],
+      },
+      {
+        id: "pst_quote",
+        slug: "quote-draft",
+        format: "quote",
+        title: "Quote title",
+        bodyText: "Supporting note",
+        bodyHtml: "<p>Supporting note</p>",
+        url: null,
+        quoteText: "The quoted words come first.",
+        replyToId: null,
+        updatedAt: 0,
+        mediaAttachments: [],
+      },
+      {
+        id: "pst_link",
+        slug: "link-draft",
+        format: "link",
+        title: null,
+        bodyText: "A link note",
+        bodyHtml: "<p>A link note</p>",
+        url: "https://example.com",
+        quoteText: null,
+        replyToId: null,
+        updatedAt: 0,
+        mediaAttachments: [],
+      },
+    ];
+    await el.updateComplete;
+
+    const rows = el.querySelectorAll<HTMLElement>(".compose-draft-item");
+    expect(rows).toHaveLength(3);
+    expect(rows[0]?.querySelector(".compose-draft-preview")?.textContent).toBe(
+      "A titled note",
+    );
+    expect(rows[1]?.querySelector(".compose-draft-preview")?.textContent).toBe(
+      "The quoted words come first.",
+    );
+    expect(rows[2]?.querySelector(".compose-draft-preview")?.textContent).toBe(
+      "A link note",
+    );
+    expect(
+      Array.from(el.querySelectorAll(".compose-draft-format")).map(
+        (format) => format.textContent,
+      ),
+    ).toEqual(["Note", "Quote", "Link"]);
+  });
+
   it("does not dispatch submit when loading", async () => {
     const el = await createElement();
     el._loading = true;
@@ -3188,91 +5417,503 @@ describe("JantComposeDialog", () => {
       "expected compose editor",
     );
 
-    // Simulate adding an attachment
-    const blob = new Blob(["fake-image"], { type: "image/png" });
-    const file = new File([blob], "test.png", { type: "image/png" });
-    const previewUrl = URL.createObjectURL(blob);
+    // Simulate adding an attachment
+    const blob = new Blob(["fake-image"], { type: "image/png" });
+    const file = new File([blob], "test.png", { type: "image/png" });
+    const previewUrl = URL.createObjectURL(blob);
+
+    editor._attachments = [
+      {
+        clientId: "test-id-1",
+        file,
+        previewUrl,
+        status: "done",
+        progress: null,
+        mediaId: "media-1",
+        alt: "",
+        error: null,
+        posterUrl: null,
+        remoteUrl: null,
+        summary: null,
+        chars: null,
+      },
+    ];
+    editor._attachmentOrder = ["test-id-1"];
+    await editor.updateComplete;
+
+    // Thumbnail strip should be visible
+    expect(editor.querySelector(".compose-attachments")).not.toBeNull();
+    expect(editor.querySelector(".compose-attachment-thumb")).not.toBeNull();
+    // ALT button should be visible
+    expect(editor.querySelector(".compose-attachment-alt")).not.toBeNull();
+    // Media tool button should show inline "Add" label
+    const mediaBtn =
+      editor.querySelector<HTMLButtonElement>(".compose-tool-btn");
+    expect(mediaBtn?.querySelector(".compose-tool-label")?.textContent).toBe(
+      "Add",
+    );
+
+    URL.revokeObjectURL(previewUrl);
+  });
+
+  it("puts the single-post editor straight inside the one scroll region", async () => {
+    const el = await createElement();
+
+    const scroller = requireElement(
+      el.querySelector<HTMLElement>(".compose-scroll"),
+      "expected compose scroll region",
+    );
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+
+    // The rules that lay the editor out are keyed on
+    // `.compose-scroll > jant-compose-editor`. Any wrapper breaks them —
+    // including a `display: contents` one, which drops the box but not the DOM
+    // parentage the selector matches on.
+    expect(editor.parentElement).toBe(scroller);
+    // The action row is the composer's pinned floor; it must stay outside.
+    expect(scroller.querySelector(".compose-action-row")).toBeNull();
+    expect(el.querySelector(".compose-action-row")).not.toBeNull();
+  });
+
+  it("scrolls in exactly one place across every compose mode", async () => {
+    const css = readComponentCss();
+
+    // `.compose-scroll` owns the scrolling for single-post, reply and thread
+    // alike. Anything nested inside it that scrolls on its own is the bug this
+    // replaced: three stacked scrollers, and previews shrunk to fit them.
+    expect(css).toMatch(
+      /\.compose-scroll\s*\{[\s\S]*flex:\s*1;[\s\S]*min-height:\s*0;[\s\S]*overflow-y:\s*auto;/,
+    );
+    expect(css).not.toMatch(/\.compose-body\s*\{[^}]*overflow-y:\s*auto;/);
+    expect(css).not.toMatch(
+      /\.compose-thread-compose-layout\s*\{[^}]*overflow-y:\s*auto;/,
+    );
+    expect(css).not.toMatch(
+      /\.compose-editor-row\s+\.compose-attachments-dock\s*\{[^}]*overflow-y:\s*auto;/,
+    );
+
+    // Nothing between the scroll region and the text may clip or claim a fixed
+    // share of the height — every block is sized by its own content.
+    expect(css).not.toMatch(
+      /\.compose-editor-row\s*\{[^}]*overflow:\s*hidden;/,
+    );
+    expect(css).not.toMatch(
+      /\.compose-thread-layout\s*\{[^}]*overflow:\s*hidden;/,
+    );
+  });
+
+  it("lets attachment previews take the room the pinned toolbar used to need", () => {
+    const css = readComponentCss();
+
+    expect(css).toMatch(
+      /\.compose-attachment-img\s*\{[\s\S]*max-height:\s*min\(420px,\s*46dvh\);/,
+    );
+    expect(css).toMatch(
+      /\.compose-attachment:only-child\s+\.compose-attachment-img\s*\{[\s\S]*max-height:\s*min\(460px,\s*52dvh\);/,
+    );
+    // The strip's row height is one variable every kind of attachment reads,
+    // so the number is asserted where it is declared.
+    expect(css).toMatch(
+      /\.compose-attachments\s*\{[\s\S]*?--compose-strip-height:\s*min\(340px,\s*40dvh\);/,
+    );
+    expect(css).toMatch(
+      /\.compose-attachment:not\(:only-child\)\s+\.compose-attachment-img\s*\{[\s\S]*height:\s*var\(--compose-strip-height\);/,
+    );
+    // Reply compose no longer shrinks its previews to 96×72 to spare the
+    // toolbar — one preview size everywhere.
+    expect(css).not.toMatch(/--compose-reply-attachment-width/);
+  });
+
+  it("gives a card in the strip the same height as the pictures beside it", () => {
+    const css = readComponentCss();
+
+    // A card is chrome, not content: it fills the height a picture sets, so a
+    // mixed strip reads as one row and every control row lands on one line.
+    expect(css).toMatch(
+      /\.compose-attachments:has\(\.compose-attachment-img\)\s+\.compose-attachment:not\(:only-child\)\s+:is\(\s*\.compose-attachment-file-card,\s*\.compose-attachment-text-card,\s*\.compose-attachment-preview-fallback\s*\)\s*\{\s*height:\s*var\(--compose-strip-height\);/,
+    );
+    // With no picture to match, cards keep their own compact height rather
+    // than growing into a row of empty boxes.
+    expect(css).toMatch(
+      /\.compose-attachment:not\(:only-child\)\s+\.compose-attachment-file-card\s*\{[\s\S]*?height:\s*200px;/,
+    );
+    expect(css).toMatch(
+      /\.compose-attachment:not\(:only-child\)\s+\.compose-attachment-text-card\s*\{[\s\S]*?height:\s*200px;/,
+    );
+  });
+
+  it("routes a format change straight off the single-post editor", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+
+    editor.dispatchEvent(
+      new CustomEvent("jant:format-change", {
+        detail: { format: "quote" },
+        bubbles: true,
+      }),
+    );
+    await flushUpdates(el);
+
+    expect(el._format).toBe("quote");
+  });
+
+  it("shows the replied-to post at the same scale as the reply", () => {
+    const css = readComponentCss();
+
+    // Same ceiling as the composer's own previews — the parent is not a
+    // thumbnail strip.
+    expect(css).toMatch(
+      /\.compose-reply-context-body img,[\s\S]*?video\s*\{[\s\S]*?max-height:\s*min\(420px,\s*46dvh\);/,
+    );
+    // One rule governs every picture in the context. A second one keyed on
+    // `.compose-reply-context-media-img` would sit at lower specificity than
+    // the `…-body img` rule above it and never apply — the media strip is
+    // inside the body.
+    expect(css).not.toMatch(/\.compose-reply-context-media-img\s*\{/);
+
+    // Expanding hands the post its full height; a capped, separately scrolling
+    // box is what left no room for full-size pictures.
+    expect(css).toMatch(
+      /\.compose-reply-context\.expanded\s*\{\s*max-height:\s*none;\s*overflow:\s*visible;/,
+    );
+    // Fullscreen's collapsed cap must not outrank that.
+    expect(css).toMatch(
+      /\.compose-fullscreen-thread-layout\s+\.compose-reply-context:not\(\.expanded\)\s*\{\s*max-height:\s*140px;/,
+    );
+  });
+
+  it("keeps reply compose tools inside the editor's text column", () => {
+    const css = readComponentCss();
+
+    // `flex: 1` on the editor is horizontal — it claims the width the rail dot
+    // leaves. Height comes from content.
+    expect(css).toMatch(
+      /\.compose-editor-row\s*>\s*jant-compose-editor\s*\{[\s\S]*flex:\s*1;[\s\S]*min-width:\s*0;/,
+    );
+    expect(css).toMatch(
+      /\.compose-reply-compose-layout\s+\.compose-thread-post-header\s*\+\s*\.compose-body\s*\{[\s\S]*padding-top:\s*12px;/,
+    );
+    expect(css).toMatch(
+      /@media \(max-width:\s*699px\),\s*\(hover:\s*none\) and \(pointer:\s*coarse\)\s*\{[\s\S]*\.compose-thread-layout\s*\{[\s\S]*padding-top:\s*0\.75rem;/,
+    );
+    expect(css).toMatch(
+      /\.compose-dialog,[\s\S]*\.compose-page-shell\s*>\s*jant-compose-dialog\s*\{[\s\S]*--compose-quote-input-size:\s*var\(--type-content-subtitle\);[\s\S]*--compose-quote-input-leading:\s*1\.32;/,
+    );
+    // On the page the card's own padding is the text column, so every row
+    // inside it reads a zero gutter and only restates its right.
+    expect(css).toMatch(
+      /\.compose-page-shell\s+\.compose-dialog-inner-page\s*\{[\s\S]*--compose-gutter:\s*0px;/,
+    );
+    expect(css).toMatch(
+      /\.compose-page-shell\s+\.compose-dialog-inner-page\s+\.compose-thread-post-header\s*\{\s*padding-inline-end:\s*0;/,
+    );
+    expect(css).toMatch(
+      /\.compose-quote-text\s*\{[\s\S]*font-size:\s*var\(--compose-quote-input-size\);[\s\S]*line-height:\s*var\(--compose-quote-input-leading\);/,
+    );
+    expect(css).toMatch(
+      /\.compose-reply-compose-layout\s*\{[\s\S]*--compose-title-input-size:\s*calc\(var\(--type-content-body\) \* 1\.2\);[\s\S]*--compose-quote-input-size:\s*calc\(var\(--type-content-body\) \* 1\.06\);[\s\S]*--compose-quote-input-leading:\s*1\.42;[\s\S]*--compose-inline-input-size:\s*var\(--type-base\);/,
+    );
+    expect(css).toMatch(
+      /\.compose-reply-compose-layout\s+\.compose-quote-wrap\s*\{[\s\S]*margin-top:\s*0\.4rem;[\s\S]*padding:\s*24px 18px 18px;[\s\S]*border-radius:\s*0\.95rem;/,
+    );
+    expect(css).toMatch(
+      /\.compose-reply-compose-layout\s+\.compose-link-url-wrap\s*\{[\s\S]*margin-top:\s*0\.4rem;/,
+    );
+    // The reply layout tunes only the lead-in. Height is the shared four-line
+    // floor, which reads this layout's own leading and type size, so a
+    // `min-height` here would just restate what the base rule already knows.
+    expect(css).toMatch(
+      /\.compose-reply-compose-layout\s+\.compose-quote-text\s*\{\s*padding-top:\s*0\.35rem;\s*\}/,
+    );
+    expect(css).not.toMatch(
+      /\.compose-reply-compose-layout\s+\.compose-quote-text\s*\{[^}]*min-height:/,
+    );
+    expect(css).toMatch(
+      /\.compose-reply-compose-layout\s+\.compose-tiptap-body\s+\.tiptap\s*\{[\s\S]*font-size:\s*var\(--type-content-body\);/,
+    );
+  });
+
+  it("opens every compose text surface at a floor stated in lines", () => {
+    const css = readComponentCss();
+
+    // Two lines for the editor, four for the quote — as multiples of the
+    // leading, not pixels, so the floor follows the type instead of going
+    // stale next to it.
+    expect(css).toMatch(
+      /\.compose-tiptap-body \.tiptap\s*\{[\s\S]*min-height:\s*calc\(var\(--type-body-leading\) \* 2em\);/,
+    );
+    expect(css).toMatch(
+      /\.compose-quote-text\s*\{[\s\S]*min-height:\s*calc\(var\(--compose-quote-input-leading\) \* 4em\);/,
+    );
+
+    // One floor for every editor: a note's body and the "thoughts" under a
+    // link or a quote all open the same way.
+    expect(css).not.toMatch(/\.compose-tiptap-thoughts/);
+  });
+
+  it("runs the thread rail from the first dot to the last post's, and no further", () => {
+    const css = readComponentCss();
+
+    // Drawn per row rather than as one strip down the layout, which is what
+    // lets both ends be trimmed back to a dot.
+    expect(css).not.toMatch(/\.compose-thread-layout::before\s*\{/);
+    expect(css).toMatch(
+      /\.compose-thread-layout > \*::before\s*\{[\s\S]*top:\s*0;[\s\S]*bottom:\s*0;/,
+    );
+    expect(css).toMatch(
+      /\.compose-thread-layout > :first-child::before\s*\{\s*top:\s*var\(--compose-thread-dot-center\);/,
+    );
+    expect(css).toMatch(
+      /\.compose-editor-row:not\(:has\(~ \.compose-editor-row\)\)::before\s*\{\s*bottom:\s*auto;\s*height:\s*var\(--compose-thread-dot-center\);/,
+    );
+    // The "add" row is a placeholder, not a post — the rail stops before it.
+    expect(css).toMatch(
+      /\.compose-thread-layout > \.compose-thread-add-row::before\s*\{\s*display:\s*none;/,
+    );
+
+    // The dot reads its offset off the same centre the rail is trimmed to, so
+    // resizing the marker cannot leave the line pointing past it.
+    expect(css).toMatch(
+      /\.compose-thread-dot\s*\{[\s\S]*margin-top:\s*calc\(\s*var\(--compose-thread-dot-center\) -\s*var\(--compose-thread-row-padding-top\) -\s*var\(--site-thread-marker-size\) \/ 2\s*\);/,
+    );
+  });
 
-    editor._attachments = [
-      {
-        clientId: "test-id-1",
-        file,
-        previewUrl,
-        status: "done",
-        progress: null,
-        mediaId: "media-1",
-        alt: "",
-        error: null,
-        posterUrl: null,
-        summary: null,
-        chars: null,
-      },
-    ];
-    editor._attachmentOrder = ["test-id-1"];
-    await editor.updateComplete;
+  it("starts every compose row's ink on one text column", () => {
+    const css = readComponentCss();
 
-    // Thumbnail strip should be visible
-    expect(editor.querySelector(".compose-attachments")).not.toBeNull();
-    expect(editor.querySelector(".compose-attachment-thumb")).not.toBeNull();
-    // ALT button should be visible
-    expect(editor.querySelector(".compose-attachment-alt")).not.toBeNull();
-    // Media tool button should show inline "Add" label
-    const mediaBtn =
-      editor.querySelector<HTMLButtonElement>(".compose-tool-btn");
-    expect(mediaBtn?.querySelector(".compose-tool-label")?.textContent).toBe(
-      "Add",
+    // One knob for the column itself, read by every row rather than restated
+    // as a literal per row.
+    expect(css).toMatch(
+      /\.compose-dialog,\s*\.compose-page-shell\s*>\s*jant-compose-dialog\s*\{[\s\S]*--compose-gutter:\s*20px;/,
     );
+    expect(css).toMatch(
+      /@media \(min-width:\s*700px\)\s*\{[\s\S]*--compose-gutter:\s*24px;/,
+    );
+    // Zero wherever the indent already comes from outside the editor.
+    expect(css).toMatch(
+      /\.compose-editor-row\s*\{\s*\/\*[\s\S]*?\*\/\s*--compose-gutter:\s*0px;/,
+    );
+
+    for (const rule of [
+      /\.compose-body\s*\{[^}]*padding:\s*16px 20px 12px var\(--compose-gutter\);/,
+      /\.compose-tools-row\s*\{[\s\S]*padding:\s*6px 10px 6px var\(--compose-gutter\);/,
+      /\.compose-attachments-dock\s*\{\s*padding:\s*8px 20px 4px var\(--compose-gutter\);/,
+      /\.compose-thread-post-header\s*\{[\s\S]*padding:\s*10px 16px 2px var\(--compose-gutter\);/,
+      /\.compose-add-thread-trigger\s*\{\s*padding:\s*1px 10px 4px var\(--compose-gutter\);/,
+      /\.compose-action-row\s*\{\s*padding:\s*10px 12px 14px var\(--compose-gutter\);/,
+    ]) {
+      expect(css).toMatch(rule);
+    }
 
-    URL.revokeObjectURL(previewUrl);
+    // Each control hangs its box back out of the column by its own optical
+    // inset, so the glyph or the label lands on the edge and not the box.
+    expect(css).toMatch(
+      /\.compose-tools-row\s*\{[\s\S]*--compose-tool-hang:\s*12px;/,
+    );
+    expect(css).toMatch(
+      /\.compose-tools-row > :first-child\s*\{\s*margin-inline-start:\s*calc\(-1 \* var\(--compose-tool-hang\)\);/,
+    );
+    expect(css).toMatch(
+      /\.compose-thread-add-btn\s*\{[\s\S]*padding:\s*5px var\(--compose-add-hang\);\s*margin-inline-start:\s*calc\(-1 \* var\(--compose-add-hang\)\);/,
+    );
+    expect(css).toMatch(
+      /\.compose-collection-select\s*\{[\s\S]*margin-inline-start:\s*calc\(\s*-1 \* \(var\(--compose-collection-pad-icon\) \+ 1px\)\s*\);/,
+    );
+
+    // The ad-hoc thread-only indents these replaced are gone — they were what
+    // let each mode drift to its own edge in the first place.
+    expect(css).not.toMatch(/margin-inline-start:\s*-10px;/);
+    expect(css).not.toMatch(/\.compose-thread-layout \.compose-tools-row\s*\{/);
+    // One "Add to thread" button, not two rule sets that have to stay in step.
+    expect(css).not.toMatch(/\.compose-add-thread-btn/);
   });
 
-  it("keeps reply compose tools inside the constrained editor surface", () => {
-    const css = readFileSync(resolve("src/styles/ui.css"), "utf8");
+  it("declares one marker vocabulary for the compose and reading rails", () => {
+    const css = readComponentCss();
 
+    // Both rails draw the same dot; only the surface behind it differs.
+    // `[^}]*` rather than `[\s\S]*` throughout: a greedy any-char run walks past
+    // the rule's closing brace and happily matches a later rule's declaration.
     expect(css).toMatch(
-      /\.compose-editor-row\s*>\s*jant-compose-editor\s*\{[\s\S]*align-self:\s*stretch;[\s\S]*overflow:\s*hidden;/,
+      /\.thread-group,\s*\.compose-thread-layout\s*\{\s*--site-thread-marker-size:\s*7px;[^}]*--site-thread-marker-gap:\s*9px;/,
     );
-    expect(css).toMatch(/\.compose-tools-row\s*\{[\s\S]*flex-shrink:\s*0;/);
     expect(css).toMatch(
-      /\.compose-editor-row\s+\.compose-attachments-dock\s*\{[\s\S]*max-height:\s*min\(240px,\s*34dvh\);[\s\S]*overflow-y:\s*auto;/,
+      /\.compose-thread-layout\s*\{\s*--site-thread-marker-surface:\s*var\(--compose-paper-bg\);\s*\}/,
+    );
+    // 7:1.5 marker-to-rail on both, from one token — compose used to hardcode
+    // its own 1.5px while reading ran a 1px hairline under the same 7px dot.
+    expect(css).toMatch(/--site-thread-rail-line-width:\s*1\.5px;/);
+    expect(css).not.toMatch(
+      /\.thread-group-preview,\s*\.thread-group-detail\s*\{[^}]*--site-thread-rail-line-width:/,
     );
     expect(css).toMatch(
-      /\.compose-reply-compose-layout\s+\.compose-editor-row\s+\.compose-attachments-dock\s*\{[\s\S]*--compose-reply-attachment-width:\s*96px;[\s\S]*--compose-reply-attachment-height:\s*72px;[\s\S]*max-height:\s*min\(116px,\s*18dvh\);/,
+      /\.compose-thread-layout > \*::before\s*\{[^}]*width:\s*var\(--site-thread-rail-line-width\);\s*margin-left:\s*calc\(var\(--site-thread-rail-line-width\) \/ -2\);/,
     );
+    // The reading rail's fade-in gradient stays — it softens where collapsed
+    // ancestor context begins, which compose solves by trimming per row.
     expect(css).toMatch(
-      /\.compose-reply-compose-layout[\s\S]*\.compose-attachment:only-child[\s\S]*\.compose-attachment-img,[\s\S]*\.compose-reply-compose-layout[\s\S]*\.compose-attachment:not\(:only-child\)[\s\S]*\.compose-attachment-img\s*\{[\s\S]*height:\s*var\(--compose-reply-attachment-height\);[\s\S]*object-fit:\s*cover;/,
+      /\.thread-group-preview::before,\s*\.thread-group-detail::before\s*\{\s*background:\s*linear-gradient\(/,
     );
+    // Both rails now stop at the last dot. Reading masks its group-wide line
+    // from that dot down; `> ` keeps the mask off the last ancestor inside
+    // `.thread-context-shell`, which the rail must run straight through.
     expect(css).toMatch(
-      /\.compose-reply-compose-layout\s+\.compose-thread-post-header\s*\+\s*\.compose-body\s*\{[\s\S]*padding-top:\s*12px;/,
+      /\.thread-group > \.thread-item:last-child::after\s*\{[^}]*top:\s*50%;\s*bottom:\s*0;\s*width:\s*var\(--site-thread-rail-line-width\);\s*background-color:\s*var\(--site-thread-marker-surface\);/,
     );
+    expect(css).not.toMatch(/\.thread-group \.thread-item:last-child::after/);
+    // The ring is reading's alone: the token is declared on `.thread-group`, and
+    // compose's dot rule never reads it. The compose rail is quiet by design —
+    // it already has a card edge, a format switcher and a "1/3" per row.
+    expect(css).toMatch(
+      /\.thread-group\s*\{[^}]*--site-thread-marker-ring-inset:\s*2px;\s*--site-thread-marker-ring-width:\s*2px;/,
+    );
+    expect(css).not.toMatch(
+      /\.compose-thread-layout\s*\{[^}]*--site-thread-marker-ring/,
+    );
+    expect(css).not.toMatch(
+      /\.compose-thread-dot::before\s*\{[^}]*--site-thread-(dot-ring|marker-ring)/,
+    );
+    // The per-dot border and the size-based hero markers stay gone: a border
+    // eats into the fill instead of sitting outside it, and a bigger dot
+    // repeats what the full card beside it already says.
+    for (const dead of [
+      "--site-thread-marker-border-width",
+      "--site-thread-marker-hero-size",
+      "--site-thread-marker-hero-border-width",
+    ]) {
+      expect(css).not.toContain(dead);
+    }
+    expect(css).not.toMatch(/\.compose-thread-dot(::before)?\s*\{[^}]*border:/);
+  });
+
+  it("punches the dot's gap with the surface colour on both rails", () => {
+    const css = readComponentCss();
+
+    // Compose stops at the punch-out; reading layers its ring inside the same
+    // radius, so the outermost layer — the one that breaks the rail line — is
+    // still the gap at its full size on both rails.
+    const punchOut =
+      /0 0 0 var\(--site-thread-marker-gap\)\s*var\(--site-thread-marker-surface\);/;
     expect(css).toMatch(
-      /@media \(max-width:\s*760px\),\s*\(hover:\s*none\) and \(pointer:\s*coarse\)\s*\{[\s\S]*\.compose-thread-layout\s*\{[\s\S]*padding-top:\s*0\.75rem;[\s\S]*\.compose-thread-layout::before\s*\{[\s\S]*top:\s*0\.75rem;/,
+      new RegExp(
+        `\\.compose-thread-dot::before\\s*\\{[^}]*box-shadow:\\s*${punchOut.source}`,
+      ),
     );
     expect(css).toMatch(
-      /\.compose-dialog,[\s\S]*\.compose-page-shell\s*>\s*jant-compose-dialog\s*\{[\s\S]*--compose-quote-input-size:\s*var\(--type-content-subtitle\);[\s\S]*--compose-quote-input-leading:\s*1\.32;/,
+      new RegExp(`\\.thread-item::before\\s*\\{[^}]*${punchOut.source}`),
     );
+    // Reading's ring: a band of surface, then the accent tint, both drawn as
+    // spread inside the punch. A border would eat the fill instead.
     expect(css).toMatch(
-      /\.compose-quote-text\s*\{[\s\S]*font-size:\s*var\(--compose-quote-input-size\);[\s\S]*line-height:\s*var\(--compose-quote-input-leading\);/,
+      /\.thread-item::before\s*\{[^}]*box-shadow:\s*0 0 0 var\(--site-thread-marker-ring-inset\)\s*var\(--site-thread-marker-surface\),\s*0 0 0\s*calc\(\s*var\(--site-thread-marker-ring-inset\) \+\s*var\(--site-thread-marker-ring-width\)\s*\)\s*var\(--site-thread-dot-ring\),/,
     );
+    expect(css).not.toMatch(/\.thread-item::before\s*\{[^}]*border:\s/);
+  });
+
+  it("marks the post a view is about with an accent fill, not a bigger dot", () => {
+    const css = readComponentCss();
+
+    // Feed hero, curated highlight and the opened detail post share one rule,
+    // matching compose's `.is-current`. Size is not a second signal.
     expect(css).toMatch(
-      /\.compose-reply-compose-layout\s*\{[\s\S]*--compose-title-input-size:\s*var\(--type-content-subtitle\);[\s\S]*--compose-quote-input-size:\s*calc\(var\(--type-content-body\) \* 1\.06\);[\s\S]*--compose-quote-input-leading:\s*1\.42;[\s\S]*--compose-inline-input-size:\s*var\(--type-base\);/,
+      /\.thread-item-hero::before,\s*\.thread-item-curated::before,\s*\.thread-item-current::before\s*\{\s*background-color:\s*var\(--site-thread-marker-current\);\s*\}/,
     );
+    // Both rails take the current-post colour from one token, and that token is
+    // a tint — the raw accent made a 7px dot the loudest thing on the page.
     expect(css).toMatch(
-      /\.compose-reply-compose-layout\s+\.compose-quote-wrap\s*\{[\s\S]*margin-top:\s*0\.4rem;[\s\S]*padding:\s*24px 18px 18px;[\s\S]*border-radius:\s*0\.95rem;/,
+      /\.compose-editor-row\.is-current \.compose-thread-dot::before\s*\{\s*background-color:\s*var\(--site-thread-marker-current\);/,
     );
     expect(css).toMatch(
-      /\.compose-reply-compose-layout\s+\.compose-link-url-wrap\s*\{[\s\S]*margin-top:\s*0\.4rem;/,
+      /--site-thread-marker-current:\s*color-mix\(\s*in srgb,\s*var\(--site-accent\) 90%,\s*var\(--site-threadline\)\s*\);/,
+    );
+    expect(css).not.toMatch(
+      /\.thread-item-current::before\s*\{[^}]*var\(--site-accent\)[^-]/,
     );
+    // Every dot's geometry now derives from the shared token.
     expect(css).toMatch(
-      /\.compose-reply-compose-layout\s+\.compose-quote-text\s*\{[\s\S]*min-height:\s*6\.5rem;[\s\S]*padding-top:\s*0\.35rem;/,
+      /\.thread-item::before\s*\{[^}]*width:\s*var\(--site-thread-marker-size\);/,
     );
+    expect(css).not.toMatch(/\.thread-item::before\s*\{[^}]*width:\s*\d+px;/);
+  });
+
+  it("centres every rail child on the line by giving them a shared track", () => {
+    const css = readComponentCss();
+
+    // The line's x is derived from the track, never from a dot's own size — a
+    // hardcoded half-marker is what put the line down the dot's edge before.
     expect(css).toMatch(
-      /\.compose-reply-compose-layout\s+\.compose-tiptap-body\s+\.tiptap\s*\{[\s\S]*font-size:\s*var\(--type-content-body\);/,
+      /--compose-thread-rail-left:\s*calc\(\s*var\(--compose-thread-padding-left\) \+ var\(--compose-thread-rail-width\) \/ 2\s*\);/,
+    );
+    expect(css).not.toMatch(/--compose-thread-rail-left:[^;]*\+ \d/);
+
+    // Post dot: fills the track, centres the circle in it.
+    expect(css).toMatch(
+      /\.compose-thread-dot\s*\{[\s\S]*justify-content:\s*center;[\s\S]*width:\s*var\(--compose-thread-rail-width\);/,
+    );
+    // "Add to thread" placeholder: fills the track outright, so no offset.
+    expect(css).toMatch(
+      /\.compose-thread-add-dot\s*\{[\s\S]*width:\s*var\(--compose-thread-rail-width\);[\s\S]*height:\s*var\(--compose-thread-rail-width\);/,
+    );
+    expect(css).not.toMatch(/\.compose-thread-add-dot\s*\{[^}]*margin-left:/);
+    // Reply meta hangs off the same track as the rows above it.
+    expect(css).toMatch(
+      /\.compose-reply-meta\s*\{[\s\S]*var\(--compose-thread-gap\) \+\s*var\(--compose-thread-rail-width\)/,
+    );
+  });
+
+  it("accents the dot of the post holding the cursor, not every editor row", () => {
+    const css = readComponentCss();
+
+    // Which selector carries the highlight — the colour itself is pinned by
+    // "marks the post a view is about…", so this stays token-agnostic.
+    expect(css).toMatch(
+      /\.compose-editor-row\.is-current \.compose-thread-dot::before\s*\{\s*background-color:/,
+    );
+    // The old rule lit every post in a thread at once.
+    expect(css).not.toMatch(
+      /\.compose-editor-row \.compose-thread-dot\s*\{\s*background-color:/,
+    );
+  });
+
+  it("moves the current-post marker as focus moves between thread posts", async () => {
+    const el = await createElement();
+    el._threadItems = [
+      { id: "thread-1", format: "note" },
+      { id: "thread-2", format: "note" },
+      { id: "thread-3", format: "note" },
+    ];
+    await flushUpdates(el);
+
+    const currentIndexes = () =>
+      Array.from(el.querySelectorAll<HTMLElement>(".compose-thread-post"))
+        .map((row, index) =>
+          row.classList.contains("is-current") ? index : -1,
+        )
+        .filter((index) => index >= 0);
+
+    // Exactly one at a time — the old rule accented all three.
+    expect(currentIndexes()).toEqual([0]);
+
+    const second = requireElement(
+      el.querySelector<HTMLElement>(
+        '.compose-thread-post[data-thread-index="1"]',
+      ),
+      "expected the second thread post",
     );
+    second.dispatchEvent(new Event("focusin", { bubbles: true }));
+    await flushUpdates(el);
+
+    expect(currentIndexes()).toEqual([1]);
   });
 
   it("keeps passive footnote references quiet until the editor selects them", () => {
-    const css = readFileSync(resolve("src/styles/ui.css"), "utf8");
+    const css = readComponentCss();
 
     expect(css).toMatch(
       /\.compose-tiptap-body \.tiptap \.tiptap-footnote-reference\s*\{[^}]*color:\s*var\(--site-footnote-marker\);/,
@@ -3304,6 +5945,7 @@ describe("JantComposeDialog", () => {
         alt: "",
         error: null,
         posterUrl: null,
+        remoteUrl: null,
         summary: null,
         chars: null,
       },
@@ -3346,6 +5988,7 @@ describe("JantComposeDialog", () => {
         alt: "",
         error: null,
         posterUrl: null,
+        remoteUrl: null,
         summary: null,
         chars: null,
       },
@@ -3401,6 +6044,7 @@ describe("JantComposeDialog", () => {
         alt: "A test image",
         error: null,
         posterUrl: null,
+        remoteUrl: null,
         summary: null,
         chars: null,
       },
@@ -3418,8 +6062,7 @@ describe("JantComposeDialog", () => {
     await editor.updateComplete;
 
     let receivedDetail:
-      | (ComposeSubmitDetail & { pendingAttachments: unknown[] })
-      | null = null;
+      (ComposeSubmitDetail & { pendingAttachments: unknown[] }) | null = null;
     el.addEventListener("jant:compose-submit-deferred", (event) => {
       const customEvent = event as CustomEvent<
         ComposeSubmitDetail & { pendingAttachments: unknown[] }
@@ -3471,6 +6114,7 @@ describe("JantComposeDialog", () => {
         alt: "Alt for pending",
         error: null,
         posterUrl: null,
+        remoteUrl: null,
         summary: null,
         chars: null,
       },
@@ -3546,7 +6190,116 @@ describe("JantComposeDialog", () => {
     );
   });
 
-  // ── Close confirmation ─────────────────────────────────────────────
+  // ── Leaving compose ────────────────────────────────────────────────
+
+  it("names the dialog for assistive tech now that no title is drawn", async () => {
+    // The visible title carried the dialog's accessible name; it moves to an
+    // attribute rather than disappearing with the row.
+    const dialog = document.createElement("dialog");
+    document.body.appendChild(dialog);
+    const el = document.createElement(
+      "jant-compose-dialog",
+    ) as JantComposeDialog;
+    el.collections = collections;
+    el.labels = labels;
+    dialog.appendChild(el);
+    await flushUpdates(el);
+
+    expect(dialog.getAttribute("aria-label")).toBe(labels.composeDialogLabel);
+
+    // Tear the dialog down here: happy-dom throws when `body.innerHTML = ""`
+    // in the shared beforeEach removes one it did not itself create.
+    el.remove();
+    dialog.remove();
+  });
+
+  it("closes from the × in the post header row", async () => {
+    const el = await createElement();
+    await flushUpdates(el);
+    const requestCloseSpy = vi.spyOn(el, "requestClose");
+
+    const closeBtn = requireElement(
+      el.querySelector<HTMLButtonElement>(
+        ".compose-thread-post-header .compose-close-btn",
+      ),
+      "expected close button in the post header",
+    );
+    expect(closeBtn.getAttribute("aria-label")).toBe(labels.close);
+
+    closeBtn.click();
+    await flushUpdates(el);
+
+    expect(requestCloseSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("hands the header slot back to per-post remove in a thread, and moves the exit to the quick actions row", async () => {
+    const el = await createElement();
+    el._threadItems = [
+      { id: "thread-1", format: "note" },
+      { id: "thread-2", format: "note" },
+    ];
+    await flushUpdates(el);
+
+    // Each post owns its × for removing itself, so no close button competes.
+    expect(el.querySelector(".compose-close-btn")).toBeNull();
+    expect(
+      el.querySelectorAll(".compose-thread-post-remove").length,
+    ).toBeGreaterThan(0);
+
+    const closeBtn = requireElement(
+      el.querySelector<HTMLButtonElement>(
+        ".compose-quick-actions-row .compose-quick-actions-close",
+      ),
+      "expected a close button in the quick actions row",
+    );
+    expect(closeBtn.textContent?.trim()).toBe(labels.close);
+
+    const requestCloseSpy = vi.spyOn(el, "requestClose");
+    closeBtn.click();
+    await flushUpdates(el);
+
+    expect(requestCloseSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps the thread exit out of single-post mode, where the × already offers one", async () => {
+    const el = await createElement();
+    expect(el.querySelector(".compose-quick-actions-close")).toBeNull();
+
+    await openPublishPanel(el);
+    const titles = Array.from(
+      el.querySelectorAll<HTMLElement>(
+        ".compose-publish-panel .compose-sheet-title",
+      ),
+    ).map((n) => n.textContent?.trim());
+
+    // The exit is never a row in the options sheet, in either mode.
+    expect(titles).not.toContain(labels.close);
+    expect(titles).toContain("Drafts");
+  });
+
+  it("keeps the exit visible in a thread whose visibility row is locked", async () => {
+    const el = await createElement();
+    el._threadItems = [
+      { id: "thread-1", format: "note" },
+      { id: "thread-2", format: "note" },
+    ];
+    el._visibilityLocked = true;
+    await flushUpdates(el);
+
+    expect(el.querySelector(".compose-quick-actions-close")).not.toBeNull();
+  });
+
+  it("leaves the exit to the page's own Back link in page mode", async () => {
+    const el = await createElement();
+    el.pageMode = true;
+    el._threadItems = [
+      { id: "thread-1", format: "note" },
+      { id: "thread-2", format: "note" },
+    ];
+    await flushUpdates(el);
+
+    expect(el.querySelector(".compose-quick-actions-close")).toBeNull();
+  });
 
   it("requestClose on empty form closes immediately without confirmation", async () => {
     const el = await createElement();
@@ -4541,6 +7294,66 @@ describe("JantComposeDialog", () => {
     expect(el.querySelector("[data-compose-link-title-error]")).toBeNull();
   });
 
+  it("explains the missing link title once publish is attempted", async () => {
+    const el = await createElement();
+    el._format = "link";
+    await el.updateComplete;
+
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    editor._url = "https://example.com";
+    await editor.updateComplete;
+
+    el.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Enter",
+        metaKey: true,
+        bubbles: true,
+      }),
+    );
+    await el.updateComplete;
+    await editor.updateComplete;
+
+    const error = requireElement(
+      el.querySelector("[data-compose-link-title-error]"),
+      "expected link title error",
+    );
+    expect(error.textContent?.trim()).toBe(
+      "Add a title before posting this link.",
+    );
+  });
+
+  it("explains the missing link URL once publish is attempted", async () => {
+    const el = await createElement();
+    el._format = "link";
+    await el.updateComplete;
+
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+
+    el.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Enter",
+        metaKey: true,
+        bubbles: true,
+      }),
+    );
+    await el.updateComplete;
+    await editor.updateComplete;
+
+    const error = requireElement(
+      el.querySelector("[data-compose-url-status]"),
+      "expected link url error",
+    );
+    expect(error.textContent?.trim()).toBe(
+      "Add a URL before posting this link.",
+    );
+  });
+
   it("Cmd/Ctrl+Enter finishes an attached text editor instead of publishing", async () => {
     const el = await createElement();
     (
@@ -4754,7 +7567,7 @@ describe("JantComposeDialog", () => {
     ).toBe("Don't save");
     expect(
       el.querySelector(".compose-confirm-cancel")?.textContent?.trim(),
-    ).toBe("Cancel");
+    ).toBe("Keep editing");
   });
 
   it("cancel on attached text confirm returns focus to the attached editor", async () => {
@@ -5008,9 +7821,12 @@ describe("JantComposeDialog", () => {
     el._format = "note";
     await el.updateComplete;
 
-    // Format switcher should be visible (not "Edit post" title)
+    // Format switcher should be visible, and the submit label says this is a
+    // new post rather than an edit.
     expect(el.querySelector(".compose-segmented")).not.toBeNull();
-    expect(el.querySelector(".compose-dialog-title")).toBeNull();
+    expect(el.querySelector(".compose-publish-main")?.textContent?.trim()).toBe(
+      "Post",
+    );
 
     // Button should say "Post", not "Done"
     const postBtn = requireElement(
@@ -5095,11 +7911,94 @@ describe("JantComposeDialog", () => {
     expect((receivedDetail as unknown as ComposeSubmitDetail).editPostId).toBe(
       "draft789",
     );
+    expect(
+      (receivedDetail as unknown as ComposeSubmitDetail).draftSourceId,
+    ).toBe("draft789");
     expect((receivedDetail as unknown as ComposeSubmitDetail).status).toBe(
       "published",
     );
   });
 
+  it("opens a thread draft without deleting it and preserves its draft identity", async () => {
+    const rootId = "pst_draft_root";
+    const replyId = "pst_draft_reply";
+    const requests: Array<{ url: string; method: string }> = [];
+    vi.spyOn(globalThis, "fetch").mockImplementation(async (input, init) => {
+      const url = String(input);
+      requests.push({ url, method: init?.method ?? "GET" });
+
+      if (url === `/api/posts/${rootId}`) {
+        return new Response(
+          JSON.stringify({
+            id: rootId,
+            threadId: rootId,
+            format: "note",
+            status: "draft",
+            slug: "draft-thread",
+            title: "Draft thread",
+            body: null,
+            attachments: [],
+            collectionIds: [],
+          }),
+          { headers: { "Content-Type": "application/json" } },
+        );
+      }
+
+      if (url === "/api/posts?status=draft&limit=50") {
+        return new Response(
+          JSON.stringify({
+            posts: [
+              {
+                id: replyId,
+                threadId: rootId,
+                replyToId: rootId,
+                format: "quote",
+                status: "draft",
+                quoteText: "Draft reply",
+                attachments: [],
+              },
+            ],
+          }),
+          { headers: { "Content-Type": "application/json" } },
+        );
+      }
+
+      throw new Error(`Unexpected fetch: ${url}`);
+    });
+
+    const el = await createElement();
+    await el.openDraft(rootId);
+    await flushUpdates(el);
+
+    expect(el._draftSourceId).toBe(rootId);
+    expect(el.querySelectorAll("jant-compose-editor")).toHaveLength(2);
+    expect(requests).toEqual([
+      { url: `/api/posts/${rootId}`, method: "GET" },
+      { url: "/api/posts?status=draft&limit=50", method: "GET" },
+    ]);
+
+    let receivedDetail: ComposeSubmitDetail | null = null;
+    el.addEventListener("jant:compose-submit-deferred", (event) => {
+      receivedDetail = (event as CustomEvent<ComposeSubmitDetail>).detail;
+    });
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+      "expected publish button",
+    ).click();
+
+    expect(receivedDetail).not.toBeNull();
+    expect(
+      (receivedDetail as unknown as ComposeSubmitDetail).draftSourceId,
+    ).toBe(rootId);
+    expect((receivedDetail as unknown as ComposeSubmitDetail).editPostId).toBe(
+      rootId,
+    );
+    expect(
+      (receivedDetail as unknown as ComposeSubmitDetail).threadPosts,
+    ).toHaveLength(2);
+    expect(requests.every((request) => request.method === "GET")).toBe(true);
+  });
+
   it("draft button confirm save dispatches draft then opens drafts panel", async () => {
     const el = await createElement();
     const editor = requireElement(
@@ -5129,13 +8028,10 @@ describe("JantComposeDialog", () => {
       receivedDetail = (event as CustomEvent<ComposeSubmitDetail>).detail;
     });
 
-    // Click draft button → confirm panel
-    const draftBtn = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-dialog-header-btn"),
-      "expected draft button",
-    );
-    draftBtn.click();
-    await el.updateComplete;
+    // Click the drafts row in the options panel → confirm panel
+    await openPublishPanel(el);
+    requireElement(draftsRow(el), "expected drafts row").click();
+    await flushUpdates(el);
     expect(el._confirmPanelOpen).toBe(true);
 
     // Click "Save"
@@ -5200,13 +8096,10 @@ describe("JantComposeDialog", () => {
       submitFired = true;
     });
 
-    // Click draft button → confirm panel
-    const draftBtn = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-dialog-header-btn"),
-      "expected draft button",
-    );
-    draftBtn.click();
-    await el.updateComplete;
+    // Click the drafts row in the options panel → confirm panel
+    await openPublishPanel(el);
+    requireElement(draftsRow(el), "expected drafts row").click();
+    await flushUpdates(el);
 
     // Click "Don't save"
     requireElement(
@@ -5248,6 +8141,7 @@ describe("JantComposeDialog", () => {
         alt: "",
         error: null,
         posterUrl: null,
+        remoteUrl: null,
         summary: null,
         chars: null,
       },