@jant/core 0.6.16 → 0.7.0

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

@@ -1,8 +1,7 @@
 // @vitest-environment happy-dom
 
-import { readFileSync } from "node:fs";
-import { resolve } from "node:path";
 import { describe, it, expect, beforeEach, vi } from "vitest";
+import { readComponentCss } from "../../../__tests__/helpers/component-css.js";
 import type { Editor } from "@tiptap/core";
 import { MAX_THREAD_POSTS } from "../../../types.js";
 
@@ -159,6 +158,7 @@ function mockSlugApi(
 
 const labels: ComposeLabels = {
   cancel: "Cancel",
+  close: "Close",
   note: "Note",
   link: "Link",
   quote: "Quote",
@@ -197,7 +197,11 @@ const labels: ComposeLabels = {
   altHint: "Alt text improves accessibility",
   addMore: "Add",
   removeAttachment: "Remove attachment",
+  moveAttachmentEarlier: "Move attachment earlier",
+  moveAttachmentLater: "Move attachment later",
   uploading: "Uploading...",
+  publishing: "Publishing...",
+  saving: "Saving...",
   loadingPost: "Loading post...",
   loadPostFailed: "Couldn't load this post. Try again.",
   published: "Published!",
@@ -208,7 +212,7 @@ const labels: ComposeLabels = {
   confirmCloseTitle: "Save to drafts?",
   confirmCloseSubtitle: "Save to drafts to edit and post at a later time.",
   confirmCloseSave: "Save",
-  confirmCloseCancel: "Cancel",
+  confirmCloseCancel: "Keep editing",
   confirmCloseDiscard: "Don't save",
   confirmAttachedTitle: "Save text attachment?",
   confirmAttachedSubtitle:
@@ -227,14 +231,32 @@ const labels: ComposeLabels = {
   deleteDraft: "Delete Draft",
   draftDeleted: "Draft deleted.",
   publishFailedDraft: "Couldn't publish. Saved as draft.",
+  publishFailed: "Couldn't publish. Try again.",
+  publishFailedOffline: "Couldn't reach the server. Try again.",
   uploadFailedDraft: "Some uploads failed. Saved as draft.",
   addCollection: "Add Collection",
   collectionCountLabel: "%name% + %count% more",
   draftRestored: "Draft restored.",
+  draftStoreFailed: "This browser can't keep a local copy. Save as a draft.",
   reply: "Reply",
   publishHideFromLatest: "Hide from Latest",
   publishPrivate: "Post as Private",
   publishSettings: "Publish settings",
+  languageLabel: "Language",
+  languageAuto: "Detect",
+  languageAutoHint: "Read from what you write",
+  languageAutoDetected: "Read from what you write — looks like {language}",
+  languageAutoPending: "Not enough text to tell yet — publishes in {language}",
+  languageTriggerLabel: "Language: {language}",
+  translationOf: "Translation of “{title}”",
+  translationContext: "Translating",
+  translationContextInLanguage: "Translating into {language}",
+  translationContextOpen: "Open the original in a new tab",
+  translationContextOriginal: "The original",
+  translationContextHide: "Hide",
+  translationContextHideLong: "Hide the original",
+  translationContextShow: "Show",
+  translationContextShowLong: "Show the original",
   publishVisibilityLabel: "Visibility",
   publishVisibilityPublic: "Public",
   publishVisibilityPublicHint: "Appears in Latest.",
@@ -272,7 +294,6 @@ const labels: ComposeLabels = {
   threadLimitReached: "Threads can include up to 20 posts.",
   showMore: "Show more",
   showLess: "Show less",
-  closeCompose: "Close compose",
   editing: "Editing",
   composeDialogLabel: "Compose",
   slashHint: "Type / for commands",
@@ -302,13 +323,6 @@ const labels: ComposeLabels = {
     quickHint: "More options are available after you create it.",
     quickSubmitLabel: "Done",
     createdLabel: "Collection created.",
-    descriptionLabel: "Description (optional)",
-    descriptionPlaceholder: "What's this collection about?",
-    sortOrderLabel: "Sort Order",
-    sortNewest: "Newest first",
-    sortOldest: "Oldest first",
-    sortRatingDesc: "Highest rated",
-    submitLabel: "Save",
     cancelLabel: "Cancel",
   },
 };
@@ -652,6 +666,860 @@ describe("JantComposeDialog", () => {
     expect(el.querySelector(".compose-sheet")).not.toBeNull();
   });
 
+  describe("language", () => {
+    function languageTrigger(el: JantComposeDialog): HTMLButtonElement | null {
+      return el.querySelector<HTMLButtonElement>(".compose-language-trigger");
+    }
+
+    async function openLanguagePicker(el: JantComposeDialog) {
+      requireElement(languageTrigger(el), "expected language pill").click();
+      await flushUpdates(el);
+    }
+
+    function languageRowTitles(el: JantComposeDialog): string[] {
+      const group = el.querySelector(
+        ".compose-language-popover [role='radiogroup']",
+      );
+      return Array.from(
+        group?.querySelectorAll(".compose-sheet-title") ?? [],
+      ).map((node) => node.textContent?.trim() ?? "");
+    }
+
+    it("shows nothing on a site that publishes one language", async () => {
+      // The whole feature is opt-in: an author who never turned it on should
+      // not meet a language control.
+      const el = await createElement();
+
+      expect(languageTrigger(el)).toBeNull();
+      expect(el.textContent).not.toContain("Detect");
+    });
+
+    it("offers Detect plus each language once the site is multilingual", async () => {
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      await flushUpdates(el);
+      await openLanguagePicker(el);
+
+      expect(languageRowTitles(el)).toEqual(["Detect", "简体中文", "English"]);
+    });
+
+    it("stays a bare globe while the answer is the page you are on", async () => {
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      el.contextLanguage = "en";
+      await flushUpdates(el);
+
+      // Writing English from /en: the globe is the whole message. The answer
+      // is still named for anyone who asks for it.
+      const trigger = requireElement(
+        languageTrigger(el),
+        "expected language pill",
+      );
+      expect(trigger.textContent?.trim()).toBe("");
+      expect(trigger.getAttribute("aria-label")).toBe("Language: English");
+      expect(trigger.getAttribute("title")).toBe("Language: English");
+      expect(trigger.dataset.chosen).toBeUndefined();
+    });
+
+    it("grows the language name once detection moves it", async () => {
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      el.contextLanguage = "en";
+      await flushUpdates(el);
+
+      const editor = requireElement(
+        el.querySelector<JantComposeEditor>("jant-compose-editor"),
+        "expected compose editor",
+      );
+      const write = async (text: string) => {
+        editor._bodyJson = {
+          type: "doc",
+          content: [{ type: "paragraph", content: [{ type: "text", text }] }],
+        };
+        await editor.updateComplete;
+        await flushUpdates(el);
+      };
+
+      // A fragment is not evidence: two characters leave the pill alone.
+      await write("这会");
+      expect(languageTrigger(el)?.textContent?.trim()).toBe("");
+
+      // A sentence is. The pill says so itself, with nothing opened.
+      await write("这会说国学时间");
+      expect(languageTrigger(el)?.textContent?.trim()).toBe("简体中文");
+      expect(languageTrigger(el)?.getAttribute("aria-label")).toBe(
+        "Language: 简体中文",
+      );
+    });
+
+    it("marks the pill once the author picks a language themselves", async () => {
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      el.contextLanguage = "en";
+      await flushUpdates(el);
+      await openLanguagePicker(el);
+
+      const rows = Array.from(
+        el.querySelectorAll<HTMLButtonElement>(
+          ".compose-language-popover .compose-sheet-row",
+        ),
+      );
+      requireElement(rows[1] ?? null, "expected the 简体中文 row").click();
+      await flushUpdates(el);
+
+      // Choosing closes the list behind the choice.
+      expect(el.querySelector(".compose-language-popover")).toBeNull();
+      const trigger = requireElement(
+        languageTrigger(el),
+        "expected language pill",
+      );
+      expect(trigger.textContent?.trim()).toBe("简体中文");
+      expect(trigger.dataset.chosen).toBe("true");
+    });
+
+    it("says the text is too short rather than claiming a reading", async () => {
+      // Below the detector's threshold there is no reading to report. Naming
+      // the page's language here would pass a fallback off as an answer.
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      el.contextLanguage = "zh-Hans";
+      await flushUpdates(el);
+      await openLanguagePicker(el);
+
+      const hint = () =>
+        el
+          .querySelector(".compose-language-popover .compose-sheet-sub")
+          ?.textContent?.trim();
+      expect(hint()).toBe(
+        "Not enough text to tell yet — publishes in 简体中文",
+      );
+
+      const editor = requireElement(
+        el.querySelector<JantComposeEditor>("jant-compose-editor"),
+        "expected compose editor",
+      );
+      editor._bodyJson = {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Hello there, in English." }],
+          },
+        ],
+      };
+      await editor.updateComplete;
+      await flushUpdates(el);
+
+      expect(hint()).toBe("Read from what you write — looks like English");
+    });
+
+    it("keeps the Detect row honest after an explicit choice", async () => {
+      // The row offers to read the text, so it has to report what reading it
+      // produces — not echo back the language the author picked instead.
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      el.contextLanguage = "en";
+      await flushUpdates(el);
+
+      const editor = requireElement(
+        el.querySelector<JantComposeEditor>("jant-compose-editor"),
+        "expected compose editor",
+      );
+      editor._bodyJson = {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Hello there, in English." }],
+          },
+        ],
+      };
+      await editor.updateComplete;
+      await flushUpdates(el);
+      await openLanguagePicker(el);
+
+      const rows = Array.from(
+        el.querySelectorAll<HTMLButtonElement>(
+          ".compose-language-popover .compose-sheet-row",
+        ),
+      );
+      requireElement(rows[1] ?? null, "expected the 简体中文 row").click();
+      await flushUpdates(el);
+      await openLanguagePicker(el);
+
+      const hint = el.querySelector(
+        ".compose-language-popover .compose-sheet-sub",
+      );
+      expect(hint?.textContent?.trim()).toBe(
+        "Read from what you write — looks like English",
+      );
+    });
+
+    it("closes the list on Escape and hands focus back to the pill", async () => {
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      await flushUpdates(el);
+      await openLanguagePicker(el);
+      expect(el.querySelector(".compose-language-popover")).not.toBeNull();
+
+      el.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
+      );
+      await flushUpdates(el);
+
+      expect(el.querySelector(".compose-language-popover")).toBeNull();
+      expect(document.activeElement).toBe(languageTrigger(el));
+    });
+
+    it("closes the list when another control opens", async () => {
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      await flushUpdates(el);
+      await openLanguagePicker(el);
+
+      await openPublishPanel(el);
+
+      expect(el.querySelector(".compose-language-popover")).toBeNull();
+      expect(el.querySelector(".compose-sheet")).not.toBeNull();
+    });
+
+    it("keeps language out of the options sheet", async () => {
+      // One setting, one place. The sheet speaks for the whole submission; the
+      // language belongs to what is being written.
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      await flushUpdates(el);
+
+      await openPublishPanel(el);
+
+      expect(
+        el.querySelector(".compose-sheet")?.textContent ?? "",
+      ).not.toContain("Detect");
+    });
+
+    /**
+     * Open the composer on a translation of `post`. The composer asks for two
+     * things: the post's fields, to seed from, and its server-rendered markup,
+     * to show.
+     */
+    async function openTranslationOf(
+      el: JantComposeDialog,
+      post: Record<string, unknown>,
+      options: { language?: string; previewHtml?: string | null } = {},
+    ) {
+      const { language = "en", previewHtml = null } = options;
+      vi.spyOn(globalThis, "fetch").mockImplementation((input: unknown) => {
+        if (String(input).includes("/_/post-preview/")) {
+          return Promise.resolve({
+            ok: previewHtml !== null,
+            text: async () => previewHtml ?? "",
+          } as Response);
+        }
+        return Promise.resolve({
+          ok: true,
+          json: async () => post,
+        } as Response);
+      });
+
+      await el.openTranslation((post.id as string) ?? "pst_source", language);
+      await flushUpdates(el);
+      await flushUpdates(el);
+      await flushUpdates(el);
+      return el;
+    }
+
+    async function multilingualElement() {
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      await flushUpdates(el);
+      return el;
+    }
+
+    const PREVIEW_HTML =
+      '<article class="h-entry post-menu-target" data-post data-post-id="pst_source" data-page="post">' +
+      '<h1 class="post-detail-title">咖啡笔记</h1>' +
+      '<div class="post-header-meta-row"><a href="/coffee" class="post-header-meta-link">Aug 8, 2026</a></div>' +
+      '<div class="e-content prose post-detail-body"><h2>耶加雪菲</h2>' +
+      '<p>今天试了一支，<a href="https://example.com/beans">花香</a>很明显。</p></div>' +
+      "</article>";
+
+    it("says what it was opened to translate, before anything is typed", async () => {
+      // Opened from a post, so the composer should carry that context above the
+      // editor — not two panels down in the publish sheet.
+      const el = await multilingualElement();
+      await openTranslationOf(
+        el,
+        {
+          id: "pst_source",
+          format: "note",
+          displayTitle: "咖啡笔记",
+          slug: "coffee",
+        },
+        { previewHtml: PREVIEW_HTML },
+      );
+
+      const banner = requireElement(
+        el.querySelector(".compose-translation-context"),
+        "expected the translation context",
+      );
+      // The language sits on the seam between the two posts, not above both:
+      // it reads as "…and below is that, in English".
+      expect(
+        banner
+          .querySelector(".compose-translation-seam-label")
+          ?.textContent?.trim(),
+      ).toBe("Translating into English");
+    });
+
+    it("shows the original as the site renders it, inside a frame to scroll", async () => {
+      // Server-rendered rather than rebuilt here, so a Quote arrives with its
+      // attribution and a Link with its card. The frame is fixed because an
+      // original handed its full height pushes the editor off the screen
+      // exactly when both need to be visible.
+      const el = await multilingualElement();
+      await openTranslationOf(
+        el,
+        {
+          id: "pst_source",
+          format: "note",
+          displayTitle: "咖啡笔记",
+          slug: "coffee",
+        },
+        { previewHtml: PREVIEW_HTML },
+      );
+
+      const original = requireElement(
+        el.querySelector(".compose-translation-original"),
+        "expected the original's frame",
+      );
+      // Keyboard users have to be able to scroll it, and a screen reader has to
+      // be able to name it.
+      expect(original.getAttribute("tabindex")).toBe("0");
+      expect(original.getAttribute("role")).toBe("region");
+      expect(original.getAttribute("aria-label")).toBe("The original");
+      // Structure is part of what is being translated, so it survives intact.
+      expect(original.querySelector("h1")?.textContent).toBe("咖啡笔记");
+      expect(original.querySelector("h2")?.textContent).toBe("耶加雪菲");
+
+      // Nothing left of the expand-in-place preview it replaced, and no bolted
+      // on external-link glyph — that made the card read as a Link post.
+      expect(el.querySelector(".compose-translation-toggle")).toBeNull();
+      expect(el.querySelector(".compose-translation-source-icon")).toBeNull();
+    });
+
+    it("folds the original away and back, keeping the seam either way", async () => {
+      // The frame costs vertical room the editor may want back mid-draft. What
+      // it is being translated into stays on screen while it is folded — that
+      // is about the two posts, not about how much of one is showing.
+      const el = await multilingualElement();
+      await openTranslationOf(
+        el,
+        {
+          id: "pst_source",
+          format: "note",
+          displayTitle: "咖啡笔记",
+          slug: "coffee",
+        },
+        { previewHtml: PREVIEW_HTML },
+      );
+
+      const toggle = () =>
+        requireElement(
+          el.querySelector<HTMLButtonElement>(
+            ".compose-translation-seam-toggle",
+          ),
+          "expected the fold toggle",
+        );
+
+      expect(el.querySelector(".compose-translation-original")).not.toBeNull();
+      expect(toggle().getAttribute("aria-expanded")).toBe("true");
+      expect(toggle().textContent?.trim()).toBe("Hide");
+
+      toggle().click();
+      await flushUpdates(el);
+
+      expect(el.querySelector(".compose-translation-original")).toBeNull();
+      expect(toggle().getAttribute("aria-expanded")).toBe("false");
+      expect(toggle().textContent?.trim()).toBe("Show");
+      expect(toggle().getAttribute("aria-label")).toBe("Show the original");
+      expect(
+        el
+          .querySelector(".compose-translation-seam-label")
+          ?.textContent?.trim(),
+      ).toBe("Translating into English");
+
+      toggle().click();
+      await flushUpdates(el);
+
+      // Unfolding re-creates the markup, so the links have to be sent to a new
+      // tab again — the adopt pass runs on every update, not just the first.
+      const link = requireElement(
+        el.querySelector<HTMLAnchorElement>(
+          ".compose-translation-preview a[href]",
+        ),
+        "expected the original back",
+      );
+      expect(link.getAttribute("target")).toBe("_blank");
+    });
+
+    it("sends every link in the original to a new tab", async () => {
+      // A link followed in place navigates the composer away and takes the
+      // unsaved translation with it.
+      const el = await multilingualElement();
+      await openTranslationOf(
+        el,
+        {
+          id: "pst_source",
+          format: "note",
+          displayTitle: "咖啡笔记",
+          slug: "coffee",
+        },
+        { previewHtml: PREVIEW_HTML },
+      );
+
+      const links = Array.from(
+        el.querySelectorAll<HTMLAnchorElement>(
+          ".compose-translation-preview a[href]",
+        ),
+      );
+      expect(links.length).toBe(2);
+      for (const link of links) {
+        expect(link.getAttribute("target")).toBe("_blank");
+        expect(link.getAttribute("rel")).toBe("noopener noreferrer");
+      }
+    });
+
+    it("strips the original's identity so nothing else can act on it", async () => {
+      // `data-post-id` is how the post menu, the keyboard shortcuts and
+      // `refreshArticleView` find a post. A second copy of the original's id in
+      // the DOM lets any of them act on the preview believing it is the card.
+      const el = await multilingualElement();
+      await openTranslationOf(
+        el,
+        {
+          id: "pst_source",
+          format: "note",
+          displayTitle: "咖啡笔记",
+          slug: "coffee",
+        },
+        { previewHtml: PREVIEW_HTML },
+      );
+
+      const preview = requireElement(
+        el.querySelector(".compose-translation-preview"),
+        "expected the preview",
+      );
+      expect(preview.querySelector("[data-post-id]")).toBeNull();
+      expect(preview.querySelector(".post-menu-target")).toBeNull();
+      expect(
+        document.querySelectorAll('[data-post-id="pst_source"]').length,
+      ).toBe(0);
+    });
+
+    it("falls back to a plain link when the rendering cannot be fetched", async () => {
+      const el = await multilingualElement();
+      await openTranslationOf(
+        el,
+        {
+          id: "pst_source",
+          format: "note",
+          displayTitle: "咖啡笔记",
+          slug: "coffee",
+        },
+        { previewHtml: null },
+      );
+
+      expect(el.querySelector(".compose-translation-original")).toBeNull();
+      const link = requireElement(
+        el.querySelector<HTMLAnchorElement>(".compose-translation-fallback a"),
+        "expected a fallback link to the original",
+      );
+      expect(link.textContent?.trim()).toBe("咖啡笔记");
+      expect(link.getAttribute("href")).toBe("/coffee");
+      expect(link.getAttribute("target")).toBe("_blank");
+      // The seam still names the language: it is about the two posts, not about
+      // how much of one of them could be shown.
+      expect(
+        el
+          .querySelector(".compose-translation-seam-label")
+          ?.textContent?.trim(),
+      ).toBe("Translating into English");
+    });
+
+    it("starts a translation in the original's shape, down to its meta", async () => {
+      // Everything that describes the post's subject or its place travels:
+      // format, citation, collections, visibility, rating. Only the words are
+      // language-specific, so only the words start empty.
+      const el = await multilingualElement();
+      await openTranslationOf(el, {
+        id: "pst_source",
+        format: "quote",
+        displayTitle: "关于专注",
+        slug: "focus",
+        quoteText: "专注是一种拒绝。",
+        sourceName: "Some Author",
+        sourceUrl: "https://example.com/focus",
+        collectionIds: ["col_reading", "col_notes"],
+        visibility: "latest_hidden",
+        rating: 4,
+      });
+
+      const editor = requireElement(
+        el.querySelector<JantComposeEditor>("jant-compose-editor"),
+        "expected the editor",
+      );
+      expect(editor.format).toBe("quote");
+      const data = editor.getData();
+      expect(data.url).toBe("https://example.com/focus");
+      expect(data.quoteAuthor).toBe("Some Author");
+      expect(data.rating).toBe(4);
+      // The prose is the part the author is here to write.
+      expect(data.quoteText).toBe("");
+
+      const internals = el as unknown as {
+        _collectionIds: string[];
+        _visibility: string;
+        _hasUnsavedChanges: () => boolean;
+      };
+      expect(internals._collectionIds).toEqual(["col_reading", "col_notes"]);
+      expect(internals._visibility).toBe("latest_hidden");
+
+      // None of that counts as something to discard: the author typed nothing.
+      expect(internals._hasUnsavedChanges()).toBe(false);
+    });
+
+    it("closes a seeded translation without offering to save it", async () => {
+      // The citation arrived from the original, not from the author. Being
+      // asked to save a draft of a URL you never typed is worse than the
+      // prompt is worth — but the moment anything is written, it comes back.
+      const el = await multilingualElement();
+      await openTranslationOf(el, {
+        id: "pst_source",
+        format: "quote",
+        displayTitle: "关于专注",
+        slug: "focus",
+        sourceUrl: "https://example.com/focus",
+      });
+      const internals = el as unknown as {
+        _confirmPanelOpen: boolean;
+        _hasContent: () => boolean;
+      };
+
+      el.requestClose();
+      await flushUpdates(el);
+      expect(internals._confirmPanelOpen).toBe(false);
+
+      await openTranslationOf(el, {
+        id: "pst_source",
+        format: "quote",
+        displayTitle: "关于专注",
+        slug: "focus",
+        sourceUrl: "https://example.com/focus",
+      });
+      const editor = requireElement(
+        el.querySelector<JantComposeEditor>("jant-compose-editor"),
+        "expected the editor",
+      );
+      editor._quoteText = "Focus is about saying no.";
+      await flushUpdates(el);
+
+      el.requestClose();
+      await flushUpdates(el);
+      expect(internals._confirmPanelOpen).toBe(true);
+    });
+
+    it("keeps the citation, the original and the language when a translation grows into a thread", async () => {
+      // The thread path used to be a copy of the single-post one: "Add to
+      // thread" dropped the quote's source link on the way into the thread
+      // editor, and the submit never learned about language or translations.
+      const el = await multilingualElement();
+      await openTranslationOf(el, {
+        id: "pst_source",
+        format: "quote",
+        displayTitle: "关于专注",
+        slug: "focus",
+        quoteText: "专注是一种拒绝。",
+        sourceName: "Some Author",
+        sourceUrl: "https://example.com/focus",
+      });
+      (el as unknown as { _language: string | null })._language = "en";
+      const single = requireElement(
+        el.querySelector<JantComposeEditor>("jant-compose-editor"),
+        "expected the editor",
+      );
+      single._quoteText = "Focus is a refusal.";
+      await flushUpdates(el);
+
+      (el as unknown as { _addThreadItem: () => void })._addThreadItem();
+      await flushUpdates(el);
+      const editors = Array.from(
+        el.querySelectorAll<JantComposeEditor>("jant-compose-editor"),
+      );
+      expect(editors).toHaveLength(2);
+      // The next post starts in the format of the one before it.
+      editors[1]!._quoteText = "And its answer.";
+      await flushUpdates(el);
+
+      let detail: ComposeSubmitDetail | null = null;
+      el.addEventListener("jant:compose-submit-deferred", (event) => {
+        detail = (event as CustomEvent<ComposeSubmitDetail>).detail;
+      });
+      requireElement(
+        el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+        "expected publish button",
+      ).click();
+
+      const [root, reply] = (detail as ComposeSubmitDetail | null)
+        ?.threadPosts ?? [undefined, undefined];
+      expect(root).toMatchObject({
+        format: "quote",
+        quoteText: "Focus is a refusal.",
+        quoteAuthor: "Some Author",
+        url: "https://example.com/focus",
+        translationOfId: "pst_source",
+        language: "en",
+      });
+      // Thread-level facts: only the root states them.
+      expect(reply?.translationOfId).toBeUndefined();
+      expect(reply?.language).toBeUndefined();
+    });
+
+    it("leaves the format alone once the author has started writing", async () => {
+      // The fetch lands after the composer opens. Overwriting a first sentence
+      // to save a format click is a bad trade.
+      const el = await multilingualElement();
+      vi.spyOn(
+        el as unknown as { _hasContent: () => boolean },
+        "_hasContent",
+      ).mockReturnValue(true);
+
+      await openTranslationOf(el, {
+        id: "pst_source",
+        format: "quote",
+        displayTitle: "关于专注",
+        slug: "focus",
+        sourceUrl: "https://example.com/focus",
+      });
+
+      const editor = requireElement(
+        el.querySelector<JantComposeEditor>("jant-compose-editor"),
+        "expected the editor",
+      );
+      expect(editor.format).toBe("note");
+      expect(editor.getData().url).toBe("");
+      // The context still shows — it is the one thing that never fights the
+      // author for the page.
+      expect(el.querySelector(".compose-translation-context")).not.toBeNull();
+    });
+
+    it("sends the chosen language, and the page's language on Detect", async () => {
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      el.contextLanguage = "en";
+      await flushUpdates(el);
+      await openLanguagePicker(el);
+
+      const build = (
+        el as unknown as {
+          _buildSubmitDetail: (
+            status: "published" | "draft",
+          ) => ComposeSubmitDetail | null;
+        }
+      )._buildSubmitDetail.bind(el);
+
+      // Left on Detect with no text signal: the post belongs to the page it
+      // was written from, so the page's language goes out explicitly.
+      expect(build("published")?.language).toBe("en");
+
+      const rows = Array.from(
+        el.querySelectorAll<HTMLButtonElement>(
+          ".compose-language-popover .compose-sheet-row",
+        ),
+      );
+      requireElement(rows[1] ?? null, "expected the 简体中文 row").click();
+      await flushUpdates(el);
+
+      expect(build("published")?.language).toBe("zh-Hans");
+    });
+
+    it("keeps a published post's own language when editing it", async () => {
+      // A post that is already filed in Japanese must not be re-read from the
+      // English page it is being edited on — the language is a fact about the
+      // post, not a guess to redo.
+      mockEditPost({
+        format: "note",
+        title: "Hi",
+        body: null,
+        language: "ja",
+      });
+
+      const el = await createElement();
+      el.languages = [
+        { tag: "en", label: "English" },
+        { tag: "ja", label: "日本語" },
+      ];
+      el.contextLanguage = "en";
+      await flushUpdates(el);
+      await el.openEdit("pst_123");
+      await flushUpdates(el);
+
+      const trigger = requireElement(
+        languageTrigger(el),
+        "expected language pill",
+      );
+      expect(trigger.textContent?.trim()).toBe("日本語");
+      expect(trigger.dataset.chosen).toBe("true");
+
+      const build = (
+        el as unknown as {
+          _buildSubmitDetail: (
+            status: "published" | "draft",
+          ) => ComposeSubmitDetail | null;
+        }
+      )._buildSubmitDetail.bind(el);
+      expect(build("published")?.language).toBe("ja");
+    });
+
+    it("falls back to the primary language when the page has none", async () => {
+      const el = await createElement();
+      el.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      await flushUpdates(el);
+
+      const build = (
+        el as unknown as {
+          _buildSubmitDetail: (
+            status: "published" | "draft",
+          ) => ComposeSubmitDetail | null;
+        }
+      )._buildSubmitDetail.bind(el);
+
+      expect(build("published")?.language).toBe("zh-Hans");
+    });
+
+    describe("publishing on automatic", () => {
+      /** A composer whose text reads as a different language than the page. */
+      async function createMismatch(overrides?: {
+        contextLanguage?: string;
+        text?: string;
+      }) {
+        const el = await createElement();
+        el.languages = [
+          { tag: "zh-Hans", label: "简体中文" },
+          { tag: "ja", label: "日本語" },
+        ];
+        el.contextLanguage = overrides?.contextLanguage ?? "zh-Hans";
+        await flushUpdates(el);
+
+        const editor = requireElement(
+          el.querySelector<JantComposeEditor>("jant-compose-editor"),
+          "expected compose editor",
+        );
+        editor._bodyJson = {
+          type: "doc",
+          content: [
+            {
+              type: "paragraph",
+              content: [
+                { type: "text", text: overrides?.text ?? "これはテストです" },
+              ],
+            },
+          ],
+        };
+        await editor.updateComplete;
+        await flushUpdates(el);
+
+        const details: ComposeSubmitDetail[] = [];
+        el.addEventListener("jant:compose-submit-deferred", (event) => {
+          details.push((event as CustomEvent<ComposeSubmitDetail>).detail);
+        });
+        return { el, details };
+      }
+
+      function clickPublish(el: JantComposeDialog) {
+        requireElement(
+          el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+          "expected post button",
+        ).click();
+      }
+
+      it("publishes what the pill says, without stopping to ask", async () => {
+        // The pill grew the word 日本語 the moment detection moved off the
+        // page's language — the same moment a sheet used to interrupt. There
+        // is nothing left for one to add.
+        const { el, details } = await createMismatch();
+        expect(
+          el.querySelector(".compose-language-trigger")?.textContent?.trim(),
+        ).toBe("日本語");
+
+        clickPublish(el);
+        await flushUpdates(el);
+
+        expect(details).toHaveLength(1);
+        expect(details[0]?.language).toBe("ja");
+      });
+
+      it("publishes in the page's language when detection agrees", async () => {
+        const { el, details } = await createMismatch({ contextLanguage: "ja" });
+
+        clickPublish(el);
+        await flushUpdates(el);
+
+        expect(details).toHaveLength(1);
+        expect(details[0]?.language).toBe("ja");
+      });
+
+      it("never second-guesses an explicit choice", async () => {
+        const { el, details } = await createMismatch();
+        // The author picked 简体中文 themselves; the Japanese text is theirs
+        // to own — a quote, perhaps.
+        (el as unknown as { _language: string | null })._language = "zh-Hans";
+        await flushUpdates(el);
+
+        clickPublish(el);
+        await flushUpdates(el);
+
+        expect(details).toHaveLength(1);
+        expect(details[0]?.language).toBe("zh-Hans");
+      });
+    });
+  });
+
   it("keeps date and permalink on the post, not in the publish panel", async () => {
     const el = await createElement();
 
@@ -727,7 +1595,7 @@ describe("JantComposeDialog", () => {
 
     // 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");
+    const css = readComponentCss();
     expect(css).toMatch(
       /\.compose-post-meta-panel\s*\{\s*position:\s*fixed;[\s\S]*max-height:\s*var\(--compose-post-meta-panel-max-height,\s*none\);\s*overflow-y:\s*auto;/,
     );
@@ -1645,8 +2513,7 @@ describe("JantComposeDialog", () => {
     await editor.updateComplete;
 
     let receivedDetail:
-      | (ComposeSubmitDetail & { pendingAttachments: unknown[] })
-      | null = null;
+      (ComposeSubmitDetail & { pendingAttachments: unknown[] }) | null = null;
     el.addEventListener("jant:compose-submit-deferred", (event) => {
       const customEvent = event as CustomEvent<
         ComposeSubmitDetail & { pendingAttachments: unknown[] }
@@ -3296,8 +4163,7 @@ describe("JantComposeDialog", () => {
     await el.updateComplete;
 
     let receivedDetail:
-      | (ComposeSubmitDetail & { pendingAttachments: unknown[] })
-      | null = null;
+      (ComposeSubmitDetail & { pendingAttachments: unknown[] }) | null = null;
     el.addEventListener("jant:compose-submit-deferred", (event) => {
       const customEvent = event as CustomEvent<
         ComposeSubmitDetail & { pendingAttachments: unknown[] }
@@ -3531,6 +4397,236 @@ describe("JantComposeDialog", () => {
     expect(scroller.scrollTop).toBe(640);
   });
 
+  describe("thread mode keeps what each post holds", () => {
+    type ThreadInternals = {
+      _addThreadItem: () => void;
+      _removeThreadItem: (index: number) => void;
+      _checkSlugAvailability: (slug: string, index?: number) => Promise<void>;
+      _slug: string;
+      _publishedAtInput: string;
+      _publishedAtTimeMinutes: number | null;
+    };
+
+    const internals = (el: JantComposeDialog) =>
+      el as unknown as ThreadInternals;
+
+    const editorsOf = (el: JantComposeDialog) =>
+      Array.from(el.querySelectorAll<JantComposeEditor>("jant-compose-editor"));
+
+    const paragraph = (text: string) => ({
+      type: "doc",
+      content: [{ type: "paragraph", content: [{ type: "text", text }] }],
+    });
+
+    function submit(el: JantComposeDialog): ComposeSubmitDetail {
+      let detail: ComposeSubmitDetail | null = null;
+      el.addEventListener(
+        "jant:compose-submit-deferred",
+        (event) => {
+          detail = (event as CustomEvent<ComposeSubmitDetail>).detail;
+        },
+        { once: true },
+      );
+      requireElement(
+        el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+        "expected publish button",
+      ).click();
+      if (!detail) throw new Error("expected a submit");
+      return detail;
+    }
+
+    it("keeps a quote's source link on the way into a thread and back out", async () => {
+      const el = await createElement();
+      el._format = "quote";
+      await flushUpdates(el);
+      const single = editorsOf(el)[0]!;
+      single._quoteText = "A borrowed sentence.";
+      single._quoteAuthor = "Someone Else";
+      single._url = "https://example.com/source";
+      await flushUpdates(el);
+
+      internals(el)._addThreadItem();
+      await flushUpdates(el);
+      const root = editorsOf(el)[0]!;
+      expect(root.getData()).toMatchObject({
+        url: "https://example.com/source",
+        quoteText: "A borrowed sentence.",
+        quoteAuthor: "Someone Else",
+      });
+
+      internals(el)._removeThreadItem(1);
+      await flushUpdates(el);
+      expect(el._threadItems).toHaveLength(0);
+      expect(editorsOf(el)[0]!.getData().url).toBe(
+        "https://example.com/source",
+      );
+      expect(submit(el).url).toBe("https://example.com/source");
+    });
+
+    it("publishes an attached text that has no media beside it after entering a thread", async () => {
+      // The strip and the submit both walk the attachment order, which was
+      // only carried across when the post also had media.
+      const el = await createElement();
+      const single = editorsOf(el)[0]!;
+      single._bodyJson = paragraph("See the notes below.");
+      single._attachedTexts = [
+        {
+          clientId: "text-1",
+          bodyJson: paragraph("The notes."),
+          bodyHtml: "",
+          summary: "The notes.",
+        },
+      ];
+      single._attachmentOrder = ["text-1"];
+      await flushUpdates(el);
+
+      internals(el)._addThreadItem();
+      await flushUpdates(el);
+      const [root, next] = editorsOf(el);
+      expect(root!.querySelectorAll("[data-attachment-list] > *")).toHaveLength(
+        1,
+      );
+      next!._bodyJson = paragraph("More.");
+      await flushUpdates(el);
+
+      const detail = submit(el);
+      expect(detail.threadPosts?.[0]?.attachments).toEqual([
+        expect.objectContaining({ type: "text", clientId: "text-1" }),
+      ]);
+    });
+
+    it("moves the next post's own permalink and date up when the first post is removed", async () => {
+      // The root's permalink and date live on the dialog, every other post's
+      // on its thread item. Removing the root used to leave its values on the
+      // post that took its place, and drop that post's own.
+      const el = await createElement();
+      el._threadItems = [
+        { id: "a", format: "note" },
+        {
+          id: "b",
+          format: "note",
+          slug: "part-two",
+          publishedAtInput: "2025-01-02",
+          publishedAtTimeMinutes: 600,
+        },
+        { id: "c", format: "note" },
+      ];
+      internals(el)._slug = "part-one";
+      internals(el)._publishedAtInput = "2025-01-01";
+      internals(el)._publishedAtTimeMinutes = 480;
+      await flushUpdates(el);
+      editorsOf(el).forEach((editor, i) => {
+        editor._bodyJson = paragraph(`Post ${i + 1}`);
+      });
+      await flushUpdates(el);
+
+      internals(el)._removeThreadItem(0);
+      await flushUpdates(el);
+
+      expect(internals(el)._slug).toBe("part-two");
+      expect(internals(el)._publishedAtInput).toBe("2025-01-02");
+      expect(internals(el)._publishedAtTimeMinutes).toBe(600);
+      const detail = submit(el);
+      expect(detail.threadPosts?.map((post) => post.slug)).toEqual([
+        "part-two",
+        undefined,
+      ]);
+    });
+
+    function mockThreadDraft(requests: string[]) {
+      vi.spyOn(globalThis, "fetch").mockImplementation(async (input) => {
+        const url = String(input);
+        requests.push(url);
+        const json = (body: unknown) =>
+          new Response(JSON.stringify(body), {
+            headers: { "Content-Type": "application/json" },
+          });
+        if (url === "/api/posts/pst_draft_root") {
+          return json({
+            id: "pst_draft_root",
+            threadId: "pst_draft_root",
+            format: "note",
+            status: "draft",
+            slug: "draft-thread",
+            title: "Draft thread",
+            body: null,
+            attachments: [],
+            collectionIds: [],
+          });
+        }
+        if (url === "/api/posts?status=draft&limit=50") {
+          return json({
+            posts: [
+              {
+                id: "pst_draft_reply",
+                threadId: "pst_draft_root",
+                replyToId: "pst_draft_root",
+                format: "quote",
+                status: "draft",
+                slug: "part-two",
+                quoteText: "Draft reply",
+                sourceName: "Someone Else",
+                attachments: [],
+              },
+            ],
+          });
+        }
+        if (url.startsWith("/api/posts/slug?")) {
+          return json({ available: true });
+        }
+        throw new Error(`Unexpected fetch: ${url}`);
+      });
+    }
+
+    it("keeps each reply's permalink when a saved thread draft is reopened", async () => {
+      // Saving a thread draft recreates it, so a slug not loaded back into
+      // the composer came back as a random id on the next save.
+      const requests: string[] = [];
+      mockThreadDraft(requests);
+      const el = await createElement();
+      await el.openDraft("pst_draft_root");
+      await flushUpdates(el);
+
+      expect(el._threadItems[1]?.slug).toBe("part-two");
+
+      // A reply's slug already belongs to the saved reply, not to the root.
+      await internals(el)._checkSlugAvailability("part-two", 1);
+      await internals(el)._checkSlugAvailability("draft-thread", 0);
+      const checks = requests
+        .filter((url) => url.startsWith("/api/posts/slug?"))
+        .map((url) => new URL(url, "http://x").searchParams.get("postId"));
+      expect(checks).toEqual(["pst_draft_reply", "pst_draft_root"]);
+
+      expect(submit(el).threadPosts?.map((post) => post.slug)).toEqual([
+        "draft-thread",
+        "part-two",
+      ]);
+    });
+
+    it("folds a thread post's quote into its body when its format changes on a saved draft", async () => {
+      // Single-post drafts already did this; a thread post kept the quote in
+      // a hidden field, which the next save then dropped.
+      mockThreadDraft([]);
+      const el = await createElement();
+      await el.openDraft("pst_draft_root");
+      await flushUpdates(el);
+
+      const reply = editorsOf(el)[1]!;
+      const noteButton = requireElement(
+        Array.from(
+          reply.querySelectorAll<HTMLButtonElement>(".compose-segmented-item"),
+        ).find((button) => button.textContent?.trim() === labels.note) ?? null,
+        "expected the reply's Note button",
+      );
+      noteButton.click();
+      await flushUpdates(el);
+
+      expect(el._threadItems[1]?.format).toBe("note");
+      expect(reply.getData().body).toContain("Draft reply");
+      expect(submit(el).threadPosts?.[1]?.body).toContain("Draft reply");
+    });
+  });
+
   it("omits visibility from locked edit submissions", async () => {
     const el = await createElement();
     const editor = requireElement(
@@ -4383,7 +5479,7 @@ describe("JantComposeDialog", () => {
   });
 
   it("scrolls in exactly one place across every compose mode", async () => {
-    const css = readFileSync(resolve("src/styles/ui.css"), "utf8");
+    const css = readComponentCss();
 
     // `.compose-scroll` owns the scrolling for single-post, reply and thread
     // alike. Anything nested inside it that scrolls on its own is the bug this
@@ -4410,7 +5506,7 @@ describe("JantComposeDialog", () => {
   });
 
   it("lets attachment previews take the room the pinned toolbar used to need", () => {
-    const css = readFileSync(resolve("src/styles/ui.css"), "utf8");
+    const css = readComponentCss();
 
     expect(css).toMatch(
       /\.compose-attachment-img\s*\{[\s\S]*max-height:\s*min\(420px,\s*46dvh\);/,
@@ -4418,14 +5514,37 @@ describe("JantComposeDialog", () => {
     expect(css).toMatch(
       /\.compose-attachment:only-child\s+\.compose-attachment-img\s*\{[\s\S]*max-height:\s*min\(460px,\s*52dvh\);/,
     );
+    // The strip's row height is one variable every kind of attachment reads,
+    // so the number is asserted where it is declared.
+    expect(css).toMatch(
+      /\.compose-attachments\s*\{[\s\S]*?--compose-strip-height:\s*min\(340px,\s*40dvh\);/,
+    );
     expect(css).toMatch(
-      /\.compose-attachment:not\(:only-child\)\s+\.compose-attachment-img\s*\{[\s\S]*height:\s*min\(340px,\s*40dvh\);/,
+      /\.compose-attachment:not\(:only-child\)\s+\.compose-attachment-img\s*\{[\s\S]*height:\s*var\(--compose-strip-height\);/,
     );
     // Reply compose no longer shrinks its previews to 96×72 to spare the
     // toolbar — one preview size everywhere.
     expect(css).not.toMatch(/--compose-reply-attachment-width/);
   });
 
+  it("gives a card in the strip the same height as the pictures beside it", () => {
+    const css = readComponentCss();
+
+    // A card is chrome, not content: it fills the height a picture sets, so a
+    // mixed strip reads as one row and every control row lands on one line.
+    expect(css).toMatch(
+      /\.compose-attachments:has\(\.compose-attachment-img\)\s+\.compose-attachment:not\(:only-child\)\s+:is\(\s*\.compose-attachment-file-card,\s*\.compose-attachment-text-card,\s*\.compose-attachment-preview-fallback\s*\)\s*\{\s*height:\s*var\(--compose-strip-height\);/,
+    );
+    // With no picture to match, cards keep their own compact height rather
+    // than growing into a row of empty boxes.
+    expect(css).toMatch(
+      /\.compose-attachment:not\(:only-child\)\s+\.compose-attachment-file-card\s*\{[\s\S]*?height:\s*200px;/,
+    );
+    expect(css).toMatch(
+      /\.compose-attachment:not\(:only-child\)\s+\.compose-attachment-text-card\s*\{[\s\S]*?height:\s*200px;/,
+    );
+  });
+
   it("routes a format change straight off the single-post editor", async () => {
     const el = await createElement();
     const editor = requireElement(
@@ -4445,7 +5564,7 @@ describe("JantComposeDialog", () => {
   });
 
   it("shows the replied-to post at the same scale as the reply", () => {
-    const css = readFileSync(resolve("src/styles/ui.css"), "utf8");
+    const css = readComponentCss();
 
     // Same ceiling as the composer's own previews — the parent is not a
     // thumbnail strip.
@@ -4470,7 +5589,7 @@ describe("JantComposeDialog", () => {
   });
 
   it("keeps reply compose tools inside the editor's text column", () => {
-    const css = readFileSync(resolve("src/styles/ui.css"), "utf8");
+    const css = readComponentCss();
 
     // `flex: 1` on the editor is horizontal — it claims the width the rail dot
     // leaves. Height comes from content.
@@ -4481,7 +5600,7 @@ describe("JantComposeDialog", () => {
       /\.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;/,
+      /@media \(max-width:\s*699px\),\s*\(hover:\s*none\) and \(pointer:\s*coarse\)\s*\{[\s\S]*\.compose-thread-layout\s*\{[\s\S]*padding-top:\s*0\.75rem;/,
     );
     expect(css).toMatch(
       /\.compose-dialog,[\s\S]*\.compose-page-shell\s*>\s*jant-compose-dialog\s*\{[\s\S]*--compose-quote-input-size:\s*var\(--type-content-subtitle\);[\s\S]*--compose-quote-input-leading:\s*1\.32;/,
@@ -4521,7 +5640,7 @@ describe("JantComposeDialog", () => {
   });
 
   it("opens every compose text surface at a floor stated in lines", () => {
-    const css = readFileSync(resolve("src/styles/ui.css"), "utf8");
+    const css = readComponentCss();
 
     // Two lines for the editor, four for the quote — as multiples of the
     // leading, not pixels, so the floor follows the type instead of going
@@ -4539,7 +5658,7 @@ describe("JantComposeDialog", () => {
   });
 
   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 css = readComponentCss();
 
     // Drawn per row rather than as one strip down the layout, which is what
     // lets both ends be trimmed back to a dot.
@@ -4566,7 +5685,7 @@ describe("JantComposeDialog", () => {
   });
 
   it("starts every compose row's ink on one text column", () => {
-    const css = readFileSync(resolve("src/styles/ui.css"), "utf8");
+    const css = readComponentCss();
 
     // One knob for the column itself, read by every row rather than restated
     // as a literal per row.
@@ -4616,7 +5735,7 @@ describe("JantComposeDialog", () => {
   });
 
   it("declares one marker vocabulary for the compose and reading rails", () => {
-    const css = readFileSync(resolve("src/styles/ui.css"), "utf8");
+    const css = readComponentCss();
 
     // Both rails draw the same dot; only the surface behind it differs.
     // `[^}]*` rather than `[\s\S]*` throughout: a greedy any-char run walks past
@@ -4674,7 +5793,7 @@ describe("JantComposeDialog", () => {
   });
 
   it("punches the dot's gap with the surface colour on both rails", () => {
-    const css = readFileSync(resolve("src/styles/ui.css"), "utf8");
+    const css = readComponentCss();
 
     // Compose stops at the punch-out; reading layers its ring inside the same
     // radius, so the outermost layer — the one that breaks the rail line — is
@@ -4698,7 +5817,7 @@ describe("JantComposeDialog", () => {
   });
 
   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");
+    const css = readComponentCss();
 
     // Feed hero, curated highlight and the opened detail post share one rule,
     // matching compose's `.is-current`. Size is not a second signal.
@@ -4724,7 +5843,7 @@ describe("JantComposeDialog", () => {
   });
 
   it("centres every rail child on the line by giving them a shared track", () => {
-    const css = readFileSync(resolve("src/styles/ui.css"), "utf8");
+    const css = readComponentCss();
 
     // The line's x is derived from the track, never from a dot's own size — a
     // hardcoded half-marker is what put the line down the dot's edge before.
@@ -4749,7 +5868,7 @@ describe("JantComposeDialog", () => {
   });
 
   it("accents the dot of the post holding the cursor, not every editor row", () => {
-    const css = readFileSync(resolve("src/styles/ui.css"), "utf8");
+    const css = readComponentCss();
 
     // Which selector carries the highlight — the colour itself is pinned by
     // "marks the post a view is about…", so this stays token-agnostic.
@@ -4794,7 +5913,7 @@ describe("JantComposeDialog", () => {
   });
 
   it("keeps passive footnote references quiet until the editor selects them", () => {
-    const css = readFileSync(resolve("src/styles/ui.css"), "utf8");
+    const css = readComponentCss();
 
     expect(css).toMatch(
       /\.compose-tiptap-body \.tiptap \.tiptap-footnote-reference\s*\{[^}]*color:\s*var\(--site-footnote-marker\);/,
@@ -4943,8 +6062,7 @@ describe("JantComposeDialog", () => {
     await editor.updateComplete;
 
     let receivedDetail:
-      | (ComposeSubmitDetail & { pendingAttachments: unknown[] })
-      | null = null;
+      (ComposeSubmitDetail & { pendingAttachments: unknown[] }) | null = null;
     el.addEventListener("jant:compose-submit-deferred", (event) => {
       const customEvent = event as CustomEvent<
         ComposeSubmitDetail & { pendingAttachments: unknown[] }
@@ -5106,7 +6224,7 @@ describe("JantComposeDialog", () => {
       ),
       "expected close button in the post header",
     );
-    expect(closeBtn.getAttribute("aria-label")).toBe(labels.cancel);
+    expect(closeBtn.getAttribute("aria-label")).toBe(labels.close);
 
     closeBtn.click();
     await flushUpdates(el);
@@ -5114,7 +6232,7 @@ describe("JantComposeDialog", () => {
     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 () => {
+  it("hands the header slot back to per-post remove in a thread, and moves the exit to the quick actions row", async () => {
     const el = await createElement();
     el._threadItems = [
       { id: "thread-1", format: "note" },
@@ -5128,42 +6246,61 @@ describe("JantComposeDialog", () => {
       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 closeBtn = requireElement(
+      el.querySelector<HTMLButtonElement>(
+        ".compose-quick-actions-row .compose-quick-actions-close",
+      ),
+      "expected a close button in the quick actions row",
     );
+    expect(closeBtn.textContent?.trim()).toBe(labels.close);
 
     const requestCloseSpy = vi.spyOn(el, "requestClose");
-    closeRow.click();
+    closeBtn.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 () => {
+  it("keeps the thread exit out of single-post mode, where the × already offers one", async () => {
     const el = await createElement();
-    await openPublishPanel(el);
+    expect(el.querySelector(".compose-quick-actions-close")).toBeNull();
 
+    await openPublishPanel(el);
     const titles = Array.from(
       el.querySelectorAll<HTMLElement>(
         ".compose-publish-panel .compose-sheet-title",
       ),
     ).map((n) => n.textContent?.trim());
 
-    expect(titles).not.toContain(labels.closeCompose);
+    // The exit is never a row in the options sheet, in either mode.
+    expect(titles).not.toContain(labels.close);
     expect(titles).toContain("Drafts");
   });
 
+  it("keeps the exit visible in a thread whose visibility row is locked", async () => {
+    const el = await createElement();
+    el._threadItems = [
+      { id: "thread-1", format: "note" },
+      { id: "thread-2", format: "note" },
+    ];
+    el._visibilityLocked = true;
+    await flushUpdates(el);
+
+    expect(el.querySelector(".compose-quick-actions-close")).not.toBeNull();
+  });
+
+  it("leaves the exit to the page's own Back link in page mode", async () => {
+    const el = await createElement();
+    el.pageMode = true;
+    el._threadItems = [
+      { id: "thread-1", format: "note" },
+      { id: "thread-2", format: "note" },
+    ];
+    await flushUpdates(el);
+
+    expect(el.querySelector(".compose-quick-actions-close")).toBeNull();
+  });
+
   it("requestClose on empty form closes immediately without confirmation", async () => {
     const el = await createElement();
 
@@ -6157,6 +7294,66 @@ describe("JantComposeDialog", () => {
     expect(el.querySelector("[data-compose-link-title-error]")).toBeNull();
   });
 
+  it("explains the missing link title once publish is attempted", async () => {
+    const el = await createElement();
+    el._format = "link";
+    await el.updateComplete;
+
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    editor._url = "https://example.com";
+    await editor.updateComplete;
+
+    el.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Enter",
+        metaKey: true,
+        bubbles: true,
+      }),
+    );
+    await el.updateComplete;
+    await editor.updateComplete;
+
+    const error = requireElement(
+      el.querySelector("[data-compose-link-title-error]"),
+      "expected link title error",
+    );
+    expect(error.textContent?.trim()).toBe(
+      "Add a title before posting this link.",
+    );
+  });
+
+  it("explains the missing link URL once publish is attempted", async () => {
+    const el = await createElement();
+    el._format = "link";
+    await el.updateComplete;
+
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+
+    el.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Enter",
+        metaKey: true,
+        bubbles: true,
+      }),
+    );
+    await el.updateComplete;
+    await editor.updateComplete;
+
+    const error = requireElement(
+      el.querySelector("[data-compose-url-status]"),
+      "expected link url error",
+    );
+    expect(error.textContent?.trim()).toBe(
+      "Add a URL before posting this link.",
+    );
+  });
+
   it("Cmd/Ctrl+Enter finishes an attached text editor instead of publishing", async () => {
     const el = await createElement();
     (
@@ -6370,7 +7567,7 @@ describe("JantComposeDialog", () => {
     ).toBe("Don't save");
     expect(
       el.querySelector(".compose-confirm-cancel")?.textContent?.trim(),
-    ).toBe("Cancel");
+    ).toBe("Keep editing");
   });
 
   it("cancel on attached text confirm returns focus to the attached editor", async () => {