@jant/core 0.6.15 → 0.6.16

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

@@ -69,6 +69,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) => {
@@ -211,13 +250,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 +272,9 @@ const labels: ComposeLabels = {
   threadLimitReached: "Threads can include up to 20 posts.",
   showMore: "Show more",
   showLess: "Show less",
-  newThread: "New Thread",
-  replyTitle: "Reply",
-  editTitle: "Edit",
+  closeCompose: "Close compose",
+  editing: "Editing",
+  composeDialogLabel: "Compose",
   slashHint: "Type / for commands",
   tableControls: {
     toolbarLabel: "Table controls",
@@ -279,6 +318,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 +399,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 +421,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 +453,6 @@ describe("JantComposeDialog", () => {
             ],
           },
           title: "",
-          showTitle: false,
           selection: { from: 3, to: 3 },
           replyExpanded: false,
         },
@@ -490,7 +560,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,16 +568,39 @@ 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);
+
+    // 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"),
+      "expected compose editor",
+    );
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        { type: "paragraph", content: [{ type: "text", text: "Hello world" }] },
+      ],
+    };
+    await editor.updateComplete;
+    await flushUpdates(el);
 
-    const draftButton = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-dialog-draft-btn"),
-      "expected draft button",
+    // 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"),
     );
-    expect(draftButton.title).toBe("Drafts");
-    expect(draftButton.getAttribute("aria-label")).toBe("Drafts");
+  });
 
+  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",
@@ -519,34 +612,299 @@ describe("JantComposeDialog", () => {
       ],
     };
     await editor.updateComplete;
-    await el.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(
+      sheetRow(el, "Save as draft"),
+      "expected save-as-draft row",
+    ).click();
+    await flushUpdates(el);
+
+    expect(el._confirmPanelOpen).toBe(false);
+    expect(el._draftsPanelOpen).toBe(false);
+    expect(detail).not.toBeNull();
+    expect(detail!.status).toBe("draft");
+  });
+
+  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",
+    );
+    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();
+  });
+
+  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 = readFileSync(resolve("src/styles/ui.css"), "utf8");
+    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);
+  });
 
-    expect(draftButton.title).toBe("Save as draft");
-    expect(draftButton.getAttribute("aria-label")).toBe("Save as draft");
+  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("shows the selected visibility hint in the publish settings panel", async () => {
+  it("explains every visibility option and checks the selected one", async () => {
     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;
 
-    // Default is public — only public hint shown
+    // 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).not.toContain("Only visible when signed in.");
+    expect(el.textContent).toContain("Only visible when signed in.");
 
-    // Switch to private — hint updates
-    const chips = el.querySelectorAll<HTMLButtonElement>(
-      ".compose-publish-chip[role='radio']",
+    const rows = el.querySelectorAll<HTMLButtonElement>(
+      ".compose-sheet-row[role='radio']",
     );
-    chips[2]?.click();
-    await el.updateComplete;
+    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();
 
-    expect(el.textContent).toContain("Only visible when signed in.");
-    expect(el.textContent).not.toContain("Appears in Latest.");
+    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 () => {
@@ -630,7 +988,7 @@ describe("JantComposeDialog", () => {
     );
   }
 
-  it("shows the format switcher instead of a title while editing", async () => {
+  it("shows the format switcher above the post while editing", async () => {
     vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
       cb(0);
       return 1;
@@ -641,12 +999,21 @@ describe("JantComposeDialog", () => {
     await el.openEdit("pst_123");
     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();
+    // 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 a Reply title with the format selector above the post when replying", async () => {
+  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>",
@@ -654,14 +1021,8 @@ describe("JantComposeDialog", () => {
     });
     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-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"),
@@ -673,6 +1034,39 @@ describe("JantComposeDialog", () => {
     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);
@@ -705,86 +1099,378 @@ describe("JantComposeDialog", () => {
     await el.openEdit("pst_123");
     await flushUpdates(el);
 
-    expect(el.querySelector(".compose-dialog-title")?.textContent?.trim()).toBe(
-      "Edit",
+    expect(el.querySelector(".compose-publish-main")?.textContent?.trim()).toBe(
+      labels.update,
     );
-    expect(
-      el.querySelector(".compose-dialog-header-center .compose-segmented"),
-    ).toBeNull();
+    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("switches format from the inline selector when replying", async () => {
+  it("keeps the format selector above the post in single-post mode", async () => {
     const el = await createElement();
-    await el.openReply("019ce8ce-d6d8-7fda-a5df-c2da2bef5ade", {
-      contentHtml: "<p>Parent</p>",
-      dateText: "Mar 14",
-    });
     await flushUpdates(el);
 
+    // One selector, one place — above its own post.
     const items = el.querySelectorAll<HTMLButtonElement>(
       ".compose-thread-post-header .compose-segmented-item",
     );
-    // note / link / quote
     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("edit-mode format switch folds quote fields into the body", async () => {
-    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
-      cb(0);
-      return 1;
-    });
-    mockEditPost({
-      format: "quote",
-      quoteText: "Stay hungry",
-      sourceName: "Jobs",
-      body: null,
-    });
+  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();
-    await el.openEdit("pst_123");
+    el._threadItems = [
+      { id: "thread-1", format: "note" },
+      { id: "thread-2", format: "note", slug: "part-two" },
+    ];
     await flushUpdates(el);
 
-    const editor = requireElement(
-      el.querySelector<JantComposeEditor>("jant-compose-editor"),
-      "expected compose editor",
+    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(editor._quoteText).toBe("Stay hungry");
 
-    // Click the Note segmented button.
-    el.querySelectorAll<HTMLButtonElement>(
-      ".compose-segmented-item",
-    )[0].click();
-    await flushUpdates(el);
+    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,
+    );
 
-    expect(el._format).toBe("note");
-    expect(editor._quoteText).toBe("");
-    expect(editor._quoteAuthor).toBe("");
-    expect(editor._bodyJson?.content?.[0]?.type).toBe("blockquote");
+    // 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("edit-mode format switch marks the post as having unsaved changes", async () => {
-    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
-      cb(0);
-      return 1;
-    });
-    mockEditPost({ format: "note", title: "Hello", body: null });
-
+  it("sends a reply's own date and leaves the rest for the server to inherit", async () => {
     const el = await createElement();
-    await el.openEdit("pst_123");
+    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 hasUnsaved = (el as unknown as { _hasUnsavedChanges(): boolean })
-      ._hasUnsavedChanges;
-    expect(hasUnsaved.call(el)).toBe(false);
-
-    el.querySelectorAll<HTMLButtonElement>(
+    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);
+
+      await removePost(el, 2);
+
+      expect(publishButton(el).disabled).toBe(false);
+    });
+
+    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");
+
+      requireEditor(
+        el.querySelectorAll<JantComposeEditor>("jant-compose-editor")[0],
+      ).commands.clearContent();
+      await flushUpdates(el);
+      expect(publishButton(el).disabled).toBe(true);
+
+      await removePost(el, 0);
+
+      expect(publishButton(el).disabled).toBe(false);
+    });
+
+    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("numbers each post in a thread", async () => {
+    const el = await createElement();
+    el._threadItems = [
+      { id: "thread-1", format: "note" },
+      { id: "thread-2", format: "note" },
+    ];
+    await flushUpdates(el);
+
+    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);
+
+    // The total re-renders on every post, not just the new one.
+    expect(positions()).toEqual(["1/3", "2/3", "3/3"]);
+  });
+
+  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" },
+      }),
+    );
+
+    const el = await createElement();
+    await el.openReply("pst_parent", {
+      contentHtml: "<p>Parent</p>",
+      dateText: "Mar 14",
+    });
+    await flushUpdates(el);
+    await flushUpdates(el);
+
+    expect(positionsIn(el)).toEqual(["3/3"]);
+
+    (el as unknown as { _addThreadItem: () => void })._addThreadItem();
+    await flushUpdates(el);
+
+    expect(positionsIn(el)).toEqual(["3/4", "4/4"]);
+  });
+
+  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("pst_parent", {
+      contentHtml: "<p>Parent</p>",
+      dateText: "Mar 14",
+    });
+    await flushUpdates(el);
+    await flushUpdates(el);
+
+    expect(positionsIn(el)).toEqual([]);
+  });
+
+  it("leaves a lone new post unnumbered — there is no chain to place it in", async () => {
+    const el = await createElement();
+    await flushUpdates(el);
+
+    expect(el.querySelector(".compose-post-position")).toBeNull();
+  });
+
+  it("switches format from the inline selector 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);
+
+    const items = el.querySelectorAll<HTMLButtonElement>(
+      ".compose-thread-post-header .compose-segmented-item",
+    );
+    // note / link / quote
+    expect(items.length).toBe(3);
+    items[1].click(); // link
+    await flushUpdates(el);
+
+    expect(el._format).toBe("link");
+  });
+
+  it("edit-mode format switch folds quote fields into the body", async () => {
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+    mockEditPost({
+      format: "quote",
+      quoteText: "Stay hungry",
+      sourceName: "Jobs",
+      body: null,
+    });
+
+    const el = await createElement();
+    await el.openEdit("pst_123");
+    await flushUpdates(el);
+
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    expect(editor._quoteText).toBe("Stay hungry");
+
+    // Click the Note segmented button.
+    el.querySelectorAll<HTMLButtonElement>(
+      ".compose-segmented-item",
+    )[0].click();
+    await flushUpdates(el);
+
+    expect(el._format).toBe("note");
+    expect(editor._quoteText).toBe("");
+    expect(editor._quoteAuthor).toBe("");
+    expect(editor._bodyJson?.content?.[0]?.type).toBe("blockquote");
+  });
+
+  it("edit-mode format switch marks the post as having unsaved changes", 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);
+
+    const hasUnsaved = (el as unknown as { _hasUnsavedChanges(): boolean })
+      ._hasUnsavedChanges;
+    expect(hasUnsaved.call(el)).toBe(false);
+
+    el.querySelectorAll<HTMLButtonElement>(
       ".compose-segmented-item",
     )[2].click();
     await flushUpdates(el);
@@ -1040,13 +1726,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 +1786,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 +1832,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 +1851,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 +1895,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 +1926,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 +1944,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 +1952,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 +1962,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 +2006,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 +2037,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 +2064,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 +2096,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,13 +2120,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[1]?.click();
@@ -1464,6 +2140,135 @@ describe("JantComposeDialog", () => {
     ).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 () => {
     const el = await createElement();
 
@@ -1474,13 +2279,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;
@@ -1490,23 +2295,264 @@ describe("JantComposeDialog", () => {
     el.reset();
     await el.updateComplete;
 
-    expect(el._visibility).toBe("latest_hidden");
+    expect(el._visibility).toBe("latest_hidden");
+
+    await el.openNew({ collectionId: "col-1", restoreDraft: false });
+    await el.updateComplete;
+
+    expect(el._collectionIds).toEqual(["col-1"]);
+    expect(el._visibility).toBe("latest_hidden");
+  });
+
+  it("prepends the requested collection even when a local draft is restored", async () => {
+    const el = await createElement();
+
+    globalThis.localStorage.setItem(
+      "jant:compose-draft",
+      JSON.stringify({
+        format: "note",
+        title: "",
+        bodyJson: {
+          type: "doc",
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "Draft body" }],
+            },
+          ],
+        },
+        url: "",
+        quoteText: "",
+        quoteAuthor: "",
+        slug: "",
+        visibility: "public",
+        rating: 0,
+        showRating: false,
+        collectionIds: ["col-1"],
+        attachedTexts: [],
+        attachmentOrder: [],
+        savedAt: Date.now(),
+      }),
+    );
+
+    await el.openNew({ collectionId: "col-2" });
+    await flushUpdates(el);
+
+    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);
 
-    await el.openNew({ collectionId: "col-1", restoreDraft: false });
-    await el.updateComplete;
+    titleToggle(el).click();
+    await flushUpdates(el);
 
-    expect(el._collectionIds).toEqual(["col-1"]);
-    expect(el._visibility).toBe("latest_hidden");
+    expect(globalThis.localStorage.getItem(NOTE_TITLE_KEY)).toBeNull();
   });
 
-  it("prepends the requested collection even when a local draft is restored", async () => {
+  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: "",
+        title: "Draft title",
+        showTitle: true,
         bodyJson: {
           type: "doc",
           content: [
@@ -1522,19 +2568,21 @@ describe("JantComposeDialog", () => {
         slug: "",
         visibility: "public",
         rating: 0,
-        showTitle: false,
         showRating: false,
-        collectionIds: ["col-1"],
+        collectionIds: [],
         attachedTexts: [],
         attachmentOrder: [],
         savedAt: Date.now(),
       }),
     );
 
-    await el.openNew({ collectionId: "col-2" });
+    const el = await createElement();
+    await el.openNew();
     await flushUpdates(el);
 
-    expect(el._collectionIds).toEqual(["col-2", "col-1"]);
+    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 () => {
@@ -1565,13 +2613,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 +2660,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 +2668,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 +2683,7 @@ describe("JantComposeDialog", () => {
     publishToggle.click();
     await el.updateComplete;
 
+    await openPostMeta(el);
     expect(el.querySelector(".compose-publish-slug-input")).not.toBeNull();
   });
 
@@ -1691,7 +2742,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 +2813,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 +2835,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 +2863,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 +2915,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 +2925,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 +2953,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 +2969,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 +2994,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 +3021,7 @@ describe("JantComposeDialog", () => {
     ).click();
     await flushUpdates(el);
 
+    await openPostMeta(el);
     expect(
       requireElement(
         el.querySelector<HTMLInputElement>(".compose-publish-slug-input"),
@@ -1986,7 +3044,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 +3076,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 +3137,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 +3195,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 +3248,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",
@@ -2306,7 +3367,6 @@ describe("JantComposeDialog", () => {
         slug: "",
         visibility: "public",
         rating: 0,
-        showTitle: false,
         showRating: false,
         collectionIds: ["col-stale"],
         replyToId,
@@ -2451,15 +3511,15 @@ describe("JantComposeDialog", () => {
     ];
     await el.updateComplete;
 
-    const threadLayout = requireElement(
-      el.querySelector<HTMLElement>(".compose-thread-compose-layout"),
-      "expected thread compose layout",
+    const scroller = requireElement(
+      el.querySelector<HTMLElement>(".compose-scroll"),
+      "expected compose scroll region",
     );
-    Object.defineProperty(threadLayout, "scrollHeight", {
+    Object.defineProperty(scroller, "scrollHeight", {
       configurable: true,
       value: 640,
     });
-    threadLayout.scrollTop = 120;
+    scroller.scrollTop = 120;
 
     (
       el as unknown as {
@@ -2468,7 +3528,7 @@ describe("JantComposeDialog", () => {
     )._addThreadItem();
     await flushUpdates(el);
 
-    expect(threadLayout.scrollTop).toBe(640);
+    expect(scroller.scrollTop).toBe(640);
   });
 
   it("omits visibility from locked edit submissions", async () => {
@@ -2512,6 +3572,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 +4116,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 +4136,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);
 
@@ -3132,143 +4200,597 @@ describe("JantComposeDialog", () => {
       menu.querySelector<HTMLAnchorElement>('a[role="menuitem"]'),
       "expected preview link",
     );
-    expect(previewLink.getAttribute("href")).toBe("/blog/preview/draft-slug");
-    expect(previewLink.target).toBe("_blank");
-    expect(previewLink.rel).toBe("noopener noreferrer");
-
-    const fetchSpy = vi.spyOn(globalThis, "fetch");
-    previewLink.addEventListener("click", (event) => event.preventDefault());
-    previewLink.click();
-    await el.updateComplete;
-
-    expect(fetchSpy).not.toHaveBeenCalled();
-    expect(el._draftsPanelOpen).toBe(true);
-    expect(el._draftMenuOpenId).toBeNull();
+    expect(previewLink.getAttribute("href")).toBe("/blog/preview/draft-slug");
+    expect(previewLink.target).toBe("_blank");
+    expect(previewLink.rel).toBe("noopener noreferrer");
+
+    const fetchSpy = vi.spyOn(globalThis, "fetch");
+    previewLink.addEventListener("click", (event) => event.preventDefault());
+    previewLink.click();
+    await el.updateComplete;
+
+    expect(fetchSpy).not.toHaveBeenCalled();
+    expect(el._draftsPanelOpen).toBe(true);
+    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;
+    await el.updateComplete;
+
+    let dispatched = false;
+    el.addEventListener("jant:compose-submit-deferred", () => {
+      dispatched = true;
+    });
+
+    const postBtn = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+      "expected post button",
+    );
+    postBtn.click();
+
+    expect(dispatched).toBe(false);
+  });
+
+  it("loading state shows spinner in submit button", async () => {
+    const el = await createElement();
+    el._loading = true;
+    await el.updateComplete;
+
+    const spinner = el.querySelector(".compose-publish-main .animate-spin");
+    expect(spinner).not.toBeNull();
+  });
+
+  it("no old media picker dialog is rendered", async () => {
+    const el = await createElement();
+
+    expect(el.querySelector("#compose-media-picker")).toBeNull();
+    expect(el.querySelector(".compose-media-picker")).toBeNull();
+  });
+
+  it("editor renders attachments when present", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "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);
+
+    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 = readFileSync(resolve("src/styles/ui.css"), "utf8");
+
+    // `.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 = readFileSync(resolve("src/styles/ui.css"), "utf8");
+
+    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\);/,
+    );
+    expect(css).toMatch(
+      /\.compose-attachment:not\(:only-child\)\s+\.compose-attachment-img\s*\{[\s\S]*height:\s*min\(340px,\s*40dvh\);/,
+    );
+    // 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("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 = readFileSync(resolve("src/styles/ui.css"), "utf8");
+
+    // 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 = readFileSync(resolve("src/styles/ui.css"), "utf8");
+
+    // `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*760px\),\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("does not dispatch submit when loading", async () => {
-    const el = await createElement();
-    el._loading = true;
-    await el.updateComplete;
-
-    let dispatched = false;
-    el.addEventListener("jant:compose-submit-deferred", () => {
-      dispatched = true;
-    });
+  it("opens every compose text surface at a floor stated in lines", () => {
+    const css = readFileSync(resolve("src/styles/ui.css"), "utf8");
 
-    const postBtn = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-main"),
-      "expected post button",
+    // 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\);/,
     );
-    postBtn.click();
 
-    expect(dispatched).toBe(false);
+    // 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("loading state shows spinner in submit button", async () => {
-    const el = await createElement();
-    el._loading = true;
-    await el.updateComplete;
+  it("runs the thread rail from the first dot to the last post's, and no further", () => {
+    const css = readFileSync(resolve("src/styles/ui.css"), "utf8");
 
-    const spinner = el.querySelector(".compose-publish-main .animate-spin");
-    expect(spinner).not.toBeNull();
+    // 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*\);/,
+    );
   });
 
-  it("no old media picker dialog is rendered", async () => {
-    const el = await createElement();
+  it("starts every compose row's ink on one text column", () => {
+    const css = readFileSync(resolve("src/styles/ui.css"), "utf8");
 
-    expect(el.querySelector("#compose-media-picker")).toBeNull();
-    expect(el.querySelector(".compose-media-picker")).toBeNull();
-  });
+    // 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);
+    }
 
-  it("editor renders attachments when present", async () => {
-    const el = await createElement();
-    const editor = requireElement(
-      el.querySelector<JantComposeEditor>("jant-compose-editor"),
-      "expected compose editor",
+    // 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*\);/,
     );
 
-    // 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);
+    // 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/);
+  });
 
-    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("declares one marker vocabulary for the compose and reading rails", () => {
+    const css = readFileSync(resolve("src/styles/ui.css"), "utf8");
 
-    // 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",
+    // 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(
+      /\.thread-group,\s*\.compose-thread-layout\s*\{\s*--site-thread-marker-size:\s*7px;[^}]*--site-thread-marker-gap:\s*9px;/,
     );
-
-    URL.revokeObjectURL(previewUrl);
+    expect(css).toMatch(
+      /\.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-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(
+      /\.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(
+      /\.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("keeps reply compose tools inside the constrained editor surface", () => {
+  it("punches the dot's gap with the surface colour on both rails", () => {
     const css = readFileSync(resolve("src/styles/ui.css"), "utf8");
 
+    // 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(
-      /\.compose-editor-row\s*>\s*jant-compose-editor\s*\{[\s\S]*align-self:\s*stretch;[\s\S]*overflow:\s*hidden;/,
+      new RegExp(
+        `\\.compose-thread-dot::before\\s*\\{[^}]*box-shadow:\\s*${punchOut.source}`,
+      ),
     );
-    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;/,
+      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-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\);/,
+      /\.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 = readFileSync(resolve("src/styles/ui.css"), "utf8");
+
+    // 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]*\.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-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-thread-post-header\s*\+\s*\.compose-body\s*\{[\s\S]*padding-top:\s*12px;/,
+      /\.compose-editor-row\.is-current \.compose-thread-dot::before\s*\{\s*background-color:\s*var\(--site-thread-marker-current\);/,
     );
     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;/,
+      /--site-thread-marker-current:\s*color-mix\(\s*in srgb,\s*var\(--site-accent\) 90%,\s*var\(--site-threadline\)\s*\);/,
     );
-    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;/,
+    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-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*\{[^}]*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 = readFileSync(resolve("src/styles/ui.css"), "utf8");
+
+    // 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*\{[\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\);/,
+      /--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-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-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-reply-compose-layout\s+\.compose-link-url-wrap\s*\{[\s\S]*margin-top:\s*0\.4rem;/,
+      /\.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-compose-layout\s+\.compose-quote-text\s*\{[\s\S]*min-height:\s*6\.5rem;[\s\S]*padding-top:\s*0\.35rem;/,
+      /\.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 = readFileSync(resolve("src/styles/ui.css"), "utf8");
+
+    // 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-reply-compose-layout\s+\.compose-tiptap-body\s+\.tiptap\s*\{[\s\S]*font-size:\s*var\(--type-content-body\);/,
+      /\.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", () => {
@@ -3304,6 +4826,7 @@ describe("JantComposeDialog", () => {
         alt: "",
         error: null,
         posterUrl: null,
+        remoteUrl: null,
         summary: null,
         chars: null,
       },
@@ -3346,6 +4869,7 @@ describe("JantComposeDialog", () => {
         alt: "",
         error: null,
         posterUrl: null,
+        remoteUrl: null,
         summary: null,
         chars: null,
       },
@@ -3401,6 +4925,7 @@ describe("JantComposeDialog", () => {
         alt: "A test image",
         error: null,
         posterUrl: null,
+        remoteUrl: null,
         summary: null,
         chars: null,
       },
@@ -3471,6 +4996,7 @@ describe("JantComposeDialog", () => {
         alt: "Alt for pending",
         error: null,
         posterUrl: null,
+        remoteUrl: null,
         summary: null,
         chars: null,
       },
@@ -3546,7 +5072,97 @@ 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.cancel);
+
+    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 into the options panel", 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);
+
+    await openPublishPanel(el);
+    const closeRow = requireElement(
+      Array.from(
+        el.querySelectorAll<HTMLButtonElement>(
+          ".compose-publish-panel .compose-sheet-row",
+        ),
+      ).find(
+        (row) =>
+          row.querySelector(".compose-sheet-title")?.textContent?.trim() ===
+          labels.closeCompose,
+      ) ?? null,
+      "expected a close row in the options panel",
+    );
+
+    const requestCloseSpy = vi.spyOn(el, "requestClose");
+    closeRow.click();
+    await flushUpdates(el);
+
+    expect(el._showPublishPanel).toBe(false);
+    expect(requestCloseSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps the exit out of the options panel when the × already offers one", async () => {
+    const el = await createElement();
+    await openPublishPanel(el);
+
+    const titles = Array.from(
+      el.querySelectorAll<HTMLElement>(
+        ".compose-publish-panel .compose-sheet-title",
+      ),
+    ).map((n) => n.textContent?.trim());
+
+    expect(titles).not.toContain(labels.closeCompose);
+    expect(titles).toContain("Drafts");
+  });
 
   it("requestClose on empty form closes immediately without confirmation", async () => {
     const el = await createElement();
@@ -5008,9 +6624,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 +6714,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 +6831,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 +6899,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 +6944,7 @@ describe("JantComposeDialog", () => {
         alt: "",
         error: null,
         posterUrl: null,
+        remoteUrl: null,
         summary: null,
         chars: null,
       },