@jant/core 0.3.40 → 0.3.42

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

@@ -2,6 +2,7 @@
 
 import { describe, it, expect, beforeEach, vi } from "vitest";
 import type { Editor } from "@tiptap/core";
+import { MAX_THREAD_POSTS } from "../../../types.js";
 
 import type {
   ComposeLabels,
@@ -31,6 +32,31 @@ function requireEditor(el: JantComposeEditor): Editor {
   return editor;
 }
 
+function keydown(
+  element: globalThis.Element,
+  key: string,
+  init: globalThis.KeyboardEventInit = {},
+) {
+  element.dispatchEvent(
+    new globalThis.KeyboardEvent("keydown", {
+      bubbles: true,
+      key,
+      ...init,
+    }),
+  );
+}
+
+function collectionOptionTitles(root: globalThis.Element): string[] {
+  return Array.from(
+    root.querySelectorAll<HTMLElement>("[data-popover] [role='option']"),
+  ).map(
+    (option) =>
+      option
+        .querySelector(".compose-collection-option-label")
+        ?.textContent?.trim() ?? "",
+  );
+}
+
 async function flushUpdates(el?: JantComposeDialog) {
   await Promise.resolve();
   await Promise.resolve();
@@ -39,6 +65,31 @@ async function flushUpdates(el?: JantComposeDialog) {
   }
 }
 
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((res) => {
+    resolve = res;
+  });
+  return { promise, resolve };
+}
+
+function mockMatchMedia(matches: boolean) {
+  Object.defineProperty(globalThis, "matchMedia", {
+    configurable: true,
+    writable: true,
+    value: vi.fn().mockImplementation((query: string) => ({
+      matches,
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+}
+
 function mockSlugApi(
   handler: (url: URL) => { status?: number; body: unknown },
 ): ReturnType<typeof vi.spyOn> {
@@ -91,6 +142,7 @@ const labels: ComposeLabels = {
   emoji: "Emoji",
   title: "Title",
   fullscreen: "Fullscreen",
+  exitFullscreen: "Exit fullscreen",
   collection: "Collection",
   searchCollections: "Search...",
   noCollections: "No collections match that search. Try a different name.",
@@ -103,6 +155,8 @@ const labels: ComposeLabels = {
   addMore: "Add",
   removeAttachment: "Remove attachment",
   uploading: "Uploading...",
+  loadingPost: "Loading post...",
+  loadPostFailed: "Couldn't load this post. Try again.",
   published: "Published!",
   view: "View",
   retryAll: "Tap to retry",
@@ -144,10 +198,21 @@ const labels: ComposeLabels = {
     "Doesn't appear in Latest. Still appears in collections you add it to.",
   publishVisibilityPrivate: "Private",
   publishVisibilityPrivateHint: "Only visible when signed in.",
+  publishDateLabel: "Published on",
+  publishDateHint:
+    "Leave blank to publish now. Use an earlier date when importing older posts.",
+  publishDateReset: "Use current date",
+  publishDateInvalid: "Enter a valid date.",
+  publishDateFutureError:
+    "Choose today or an earlier date, or leave it blank to publish now.",
+  publishDateSummaryNow: "Publish 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",
+  publishSlugSummaryAction: "Edit custom link",
   publishSlugReset: "Reset link",
   publishSlugSuggested: "Suggested link",
   publishSlugGenerating: "Generating a link...",
@@ -157,8 +222,12 @@ const labels: ComposeLabels = {
   publishSlugReserved: "This link is reserved. Choose something else.",
   postHiddenFromLatest: "Post hidden",
   postPrivately: "Post privately",
+  quietReplyLabel: "Reply quietly",
+  quietReplyHint: "Won't move the thread to the top of latest.",
+  threadLimitReached: "Threads can include up to 20 posts.",
   showMore: "Show more",
   showLess: "Show less",
+  newThread: "New Thread",
   collectionFormLabels: {
     titleLabel: "Title",
     titlePlaceholder: "My Collection",
@@ -183,8 +252,8 @@ const labels: ComposeLabels = {
 };
 
 const collections: ComposeCollection[] = [
-  { id: "col-1", title: "Books" },
-  { id: "col-2", title: "Movies" },
+  { id: "col-1", title: "Books", slug: "books" },
+  { id: "col-2", title: "Movies", slug: "movies" },
 ];
 
 async function createElement(
@@ -206,11 +275,33 @@ describe("JantComposeDialog", () => {
     vi.restoreAllMocks();
     document.body.innerHTML = "";
     globalThis.localStorage.clear();
+    Object.defineProperty(globalThis, "matchMedia", {
+      configurable: true,
+      writable: true,
+      value: undefined,
+    });
+    Object.defineProperty(globalThis, "visualViewport", {
+      configurable: true,
+      writable: true,
+      value: undefined,
+    });
     (
       customElements.get("jant-compose-dialog") as typeof HTMLElement & {
         _lastNewPostVisibility: string;
       }
     )._lastNewPostVisibility = "public";
+
+    if (!HTMLDialogElement.prototype.showModal) {
+      HTMLDialogElement.prototype.showModal = function () {
+        this.setAttribute("open", "");
+      };
+    }
+
+    if (!HTMLDialogElement.prototype.close) {
+      HTMLDialogElement.prototype.close = function () {
+        this.removeAttribute("open");
+      };
+    }
   });
 
   it("renders with collections and labels", async () => {
@@ -246,20 +337,29 @@ describe("JantComposeDialog", () => {
     ).not.toBeNull();
   });
 
-  it("focuses the main editor body after fullscreen closes", async () => {
+  it("restores the editor selection after fullscreen closes", async () => {
     const el = await createElement();
     const editor = requireElement(
       el.querySelector<JantComposeEditor>("jant-compose-editor"),
       "expected compose editor",
     );
-    const focusSpy = vi.spyOn(editor, "focusInput");
+    const focusSpy = vi.spyOn(editor, "focusSelection");
 
     document.dispatchEvent(
       new CustomEvent("jant:fullscreen-close", {
         detail: {
-          json: null,
+          json: {
+            type: "doc",
+            content: [
+              {
+                type: "paragraph",
+                content: [{ type: "text", text: "Hello" }],
+              },
+            ],
+          },
           title: "",
           showTitle: false,
+          selection: { from: 3, to: 3 },
           replyExpanded: false,
         },
       }),
@@ -268,7 +368,98 @@ describe("JantComposeDialog", () => {
     await flushUpdates(el);
     await flushUpdates(el);
 
-    expect(focusSpy).toHaveBeenCalledWith("end");
+    expect(focusSpy).toHaveBeenCalledWith({ from: 3, to: 3 });
+  });
+
+  it("opens edit mode without auto-focusing the editor body", async () => {
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(
+        JSON.stringify({
+          id: "pst_123",
+          format: "note",
+          title: "Long draft",
+          body: JSON.stringify({
+            type: "doc",
+            content: [
+              {
+                type: "paragraph",
+                content: [{ type: "text", text: "Long body text" }],
+              },
+            ],
+          }),
+          mediaAttachments: [],
+        }),
+        {
+          headers: { "Content-Type": "application/json" },
+        },
+      ),
+    );
+
+    const compose = await createElement();
+    const editor = requireElement(
+      compose.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    const shell = requireElement(
+      compose.querySelector<HTMLElement>(".compose-dialog-inner"),
+      "expected compose dialog shell",
+    );
+    const shellFocusSpy = vi.spyOn(shell, "focus");
+    const focusSpy = vi.spyOn(editor, "focusInput");
+
+    await compose.openEdit("pst_123");
+    await flushUpdates(compose);
+    await flushUpdates(compose);
+
+    expect(focusSpy).not.toHaveBeenCalled();
+    expect(shellFocusSpy).toHaveBeenCalled();
+  });
+
+  it("shows a loading state while edit data is still loading", async () => {
+    const postResponse = deferred<Response>();
+    vi.spyOn(globalThis, "fetch").mockImplementation(
+      () => postResponse.promise,
+    );
+
+    const compose = await createElement();
+    const opening = compose.openEdit("pst_123");
+    await flushUpdates(compose);
+
+    expect(compose.textContent).toContain("Loading post...");
+    expect(compose.querySelector("jant-compose-editor")).toBeNull();
+
+    postResponse.resolve(
+      new Response(
+        JSON.stringify({
+          id: "pst_123",
+          format: "note",
+          title: "Loaded later",
+          body: JSON.stringify({
+            type: "doc",
+            content: [
+              {
+                type: "paragraph",
+                content: [{ type: "text", text: "Loaded body text" }],
+              },
+            ],
+          }),
+          mediaAttachments: [],
+        }),
+        {
+          headers: { "Content-Type": "application/json" },
+        },
+      ),
+    );
+
+    await opening;
+    await flushUpdates(compose);
+
+    expect(compose.textContent).not.toContain("Loading post...");
+    expect(compose.querySelector("jant-compose-editor")).not.toBeNull();
   });
 
   it("opens publish settings even when publish is disabled", async () => {
@@ -310,7 +501,7 @@ describe("JantComposeDialog", () => {
     expect(draftButton.getAttribute("aria-label")).toBe("Save as draft");
   });
 
-  it("shows visibility hints in the publish settings panel", async () => {
+  it("shows the selected visibility hint in the publish settings panel", async () => {
     const el = await createElement();
 
     requireElement(
@@ -319,10 +510,19 @@ describe("JantComposeDialog", () => {
     ).click();
     await el.updateComplete;
 
-    expect(el.textContent).toContain(
-      "Doesn't appear in Latest. Still appears in collections you add it to.",
+    // Default is public — only public hint shown
+    expect(el.textContent).toContain("Appears in Latest.");
+    expect(el.textContent).not.toContain("Only visible when signed in.");
+
+    // Switch to private — hint updates
+    const chips = el.querySelectorAll<HTMLButtonElement>(
+      ".compose-publish-chip[role='radio']",
     );
+    chips[2]?.click();
+    await el.updateComplete;
+
     expect(el.textContent).toContain("Only visible when signed in.");
+    expect(el.textContent).not.toContain("Appears in Latest.");
   });
 
   it("format switching updates active state", async () => {
@@ -355,6 +555,49 @@ describe("JantComposeDialog", () => {
     ).toBeNull();
   });
 
+  it("autofocuses the primary field on desktop format switches", async () => {
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    const focusSpy = vi.spyOn(editor, "focusInput");
+
+    const linkBtn = el.querySelectorAll<HTMLButtonElement>(
+      ".compose-segmented-item",
+    )[1];
+    linkBtn.click();
+    await flushUpdates(el);
+
+    expect(focusSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not autofocus the primary field on touch format switches", async () => {
+    mockMatchMedia(true);
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    const focusSpy = vi.spyOn(editor, "focusInput");
+
+    const linkBtn = el.querySelectorAll<HTMLButtonElement>(
+      ".compose-segmented-item",
+    )[1];
+    linkBtn.click();
+    await flushUpdates(el);
+
+    expect(focusSpy).not.toHaveBeenCalled();
+  });
+
   it("submit dispatches jant:compose-submit-deferred with correct payload", async () => {
     const el = await createElement();
     const editor = requireElement(
@@ -457,7 +700,7 @@ describe("JantComposeDialog", () => {
     await el.updateComplete;
 
     const options = el.querySelectorAll<HTMLButtonElement>(
-      ".compose-publish-option[role='radio']",
+      ".compose-publish-chip[role='radio']",
     );
     expect(options).toHaveLength(3);
     options[1]?.click();
@@ -489,6 +732,344 @@ describe("JantComposeDialog", () => {
     ).toBeUndefined();
   });
 
+  it("includes a past publish date in the submit payload", async () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-03-28T12:34:00Z"));
+
+    try {
+      const el = await createElement();
+      const editor = requireElement(
+        el.querySelector<JantComposeEditor>("jant-compose-editor"),
+        "expected compose editor",
+      );
+      editor._bodyJson = {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Backdated post" }],
+          },
+        ],
+      };
+      await editor.updateComplete;
+
+      requireElement(
+        el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+        "expected publish settings toggle",
+      ).click();
+      await el.updateComplete;
+
+      const publishedAtInput = requireElement(
+        el.querySelector<HTMLInputElement>(".compose-publish-date-input"),
+        "expected publish date input",
+      );
+      publishedAtInput.value = "2024-01-15";
+      publishedAtInput.dispatchEvent(new Event("input", { bubbles: true }));
+      await el.updateComplete;
+
+      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();
+      const now = new Date();
+      expect(
+        (receivedDetail as unknown as ComposeSubmitDetail).publishedAt,
+      ).toBe(
+        Math.floor(
+          new Date(
+            2024,
+            0,
+            15,
+            now.getHours(),
+            now.getMinutes(),
+            0,
+            0,
+          ).getTime() / 1000,
+        ),
+      );
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("shows a publish date summary near the submit controls after the date changes", async () => {
+    const el = await createElement();
+
+    const publishToggle = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      "expected publish settings toggle",
+    );
+    publishToggle.click();
+    await el.updateComplete;
+
+    const publishedAtInput = requireElement(
+      el.querySelector<HTMLInputElement>(".compose-publish-date-input"),
+      "expected publish date input",
+    );
+    publishedAtInput.value = "2024-01-15";
+    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;
+    await flushUpdates(el);
+
+    expect(
+      requireElement(
+        el.querySelector<HTMLInputElement>(".compose-publish-date-input"),
+        "expected publish date input after reopening publish settings",
+      ),
+    ).toBe(document.activeElement);
+  });
+
+  it("does not show a publish date summary for an unchanged date while editing a post", async () => {
+    const el = await createElement();
+    (
+      el as unknown as {
+        _editPostId: string | null;
+        _initialPublishedAtInput: string;
+        _publishedAtInput: string;
+      }
+    )._editPostId = "pst_existing";
+    (
+      el as unknown as {
+        _editPostId: string | null;
+        _initialPublishedAtInput: string;
+        _publishedAtInput: string;
+      }
+    )._initialPublishedAtInput = "2024-01-15";
+    (
+      el as unknown as {
+        _editPostId: string | null;
+        _initialPublishedAtInput: string;
+        _publishedAtInput: string;
+      }
+    )._publishedAtInput = "2024-01-15";
+    el.requestUpdate();
+    await el.updateComplete;
+
+    expect(el.querySelector("[data-compose-publish-date-summary]")).toBeNull();
+  });
+
+  it("shows a publish now summary after clearing the publish date while editing a post", async () => {
+    const el = await createElement();
+    (
+      el as unknown as {
+        _editPostId: string | null;
+        _initialPublishedAtInput: string;
+        _publishedAtInput: string;
+      }
+    )._editPostId = "pst_existing";
+    (
+      el as unknown as {
+        _editPostId: string | null;
+        _initialPublishedAtInput: string;
+        _publishedAtInput: string;
+      }
+    )._initialPublishedAtInput = "2024-01-15";
+    (
+      el as unknown as {
+        _editPostId: string | null;
+        _initialPublishedAtInput: string;
+        _publishedAtInput: string;
+      }
+    )._publishedAtInput = "";
+    el.requestUpdate();
+    await el.updateComplete;
+
+    expect(
+      requireElement(
+        el.querySelector<HTMLElement>("[data-compose-publish-date-summary]"),
+        "expected publish now summary",
+      ).textContent,
+    ).toContain("Publish now");
+  });
+
+  it("shows a custom link summary near the submit controls after the link changes", async () => {
+    mockSlugApi((url) => {
+      if (url.searchParams.get("mode") === "suggest") {
+        return { body: { slug: "configured-post" } };
+      }
+      if (url.searchParams.get("mode") === "check") {
+        return { body: { slug: "reading-notes", available: true } };
+      }
+      throw new Error(`Unexpected slug mode: ${url.search}`);
+    });
+
+    const el = await createElement();
+    const publishToggle = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      "expected publish settings toggle",
+    );
+
+    publishToggle.click();
+    await el.updateComplete;
+    await flushUpdates(el);
+
+    const slugInput = requireElement(
+      el.querySelector<HTMLInputElement>(".compose-publish-slug-input"),
+      "expected custom link input",
+    );
+    slugInput.value = "reading-notes";
+    slugInput.dispatchEvent(new Event("input", { bubbles: true }));
+    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;
+    await flushUpdates(el);
+
+    expect(
+      requireElement(
+        el.querySelector<HTMLInputElement>(".compose-publish-slug-input"),
+        "expected custom link input after reopening publish settings",
+      ),
+    ).toBe(document.activeElement);
+  });
+
+  it("does not show a custom link summary for an unchanged link while editing a post", async () => {
+    const el = await createElement();
+    (
+      el as unknown as {
+        _editPostId: string | null;
+        _initialSlug: string;
+        _slug: string;
+      }
+    )._editPostId = "pst_existing";
+    (
+      el as unknown as {
+        _editPostId: string | null;
+        _initialSlug: string;
+        _slug: string;
+      }
+    )._initialSlug = "reading-notes";
+    (
+      el as unknown as {
+        _editPostId: string | null;
+        _initialSlug: string;
+        _slug: string;
+      }
+    )._slug = "reading-notes";
+    el.requestUpdate();
+    await el.updateComplete;
+
+    expect(el.querySelector("[data-compose-publish-slug-summary]")).toBeNull();
+  });
+
+  it("shows an auto link summary after clearing the custom link while editing a post", async () => {
+    const el = await createElement();
+    (
+      el as unknown as {
+        _editPostId: string | null;
+        _initialSlug: string;
+        _slug: string;
+      }
+    )._editPostId = "pst_existing";
+    (
+      el as unknown as {
+        _editPostId: string | null;
+        _initialSlug: string;
+        _slug: string;
+      }
+    )._initialSlug = "reading-notes";
+    (
+      el as unknown as {
+        _editPostId: string | null;
+        _initialSlug: string;
+        _slug: string;
+      }
+    )._slug = "";
+    el.requestUpdate();
+    await el.updateComplete;
+
+    expect(
+      requireElement(
+        el.querySelector<HTMLElement>("[data-compose-publish-slug-summary]"),
+        "expected auto link summary",
+      ).textContent,
+    ).toContain("Auto link");
+  });
+
+  it("blocks publishing with a future publish date", async () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-03-28T12:34:00Z"));
+
+    try {
+      const el = await createElement();
+      const editor = requireElement(
+        el.querySelector<JantComposeEditor>("jant-compose-editor"),
+        "expected compose editor",
+      );
+      editor._bodyJson = {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Future post" }],
+          },
+        ],
+      };
+      await editor.updateComplete;
+
+      requireElement(
+        el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+        "expected publish settings toggle",
+      ).click();
+      await el.updateComplete;
+
+      const publishedAtInput = requireElement(
+        el.querySelector<HTMLInputElement>(".compose-publish-date-input"),
+        "expected publish date input",
+      );
+      publishedAtInput.value = "2099-01-01";
+      publishedAtInput.dispatchEvent(new Event("input", { bubbles: true }));
+      await el.updateComplete;
+
+      expect(
+        requireElement(
+          el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+          "expected publish button",
+        ).disabled,
+      ).toBe(true);
+      expect(el.textContent).toContain(
+        "Choose today or an earlier date, or leave it blank to publish now.",
+      );
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
   it("updates the publish button label for private visibility", async () => {
     const el = await createElement();
 
@@ -499,7 +1080,7 @@ describe("JantComposeDialog", () => {
     await el.updateComplete;
 
     const options = el.querySelectorAll<HTMLButtonElement>(
-      ".compose-publish-option[role='radio']",
+      ".compose-publish-chip[role='radio']",
     );
     expect(options).toHaveLength(3);
     options[2]?.click();
@@ -523,7 +1104,7 @@ describe("JantComposeDialog", () => {
     await el.updateComplete;
 
     const options = el.querySelectorAll<HTMLButtonElement>(
-      ".compose-publish-option[role='radio']",
+      ".compose-publish-chip[role='radio']",
     );
     expect(options).toHaveLength(3);
     options[1]?.click();
@@ -553,7 +1134,7 @@ describe("JantComposeDialog", () => {
     await el.updateComplete;
 
     const options = el.querySelectorAll<HTMLButtonElement>(
-      ".compose-publish-option[role='radio']",
+      ".compose-publish-chip[role='radio']",
     );
     options[1]?.click();
     await el.updateComplete;
@@ -709,6 +1290,165 @@ describe("JantComposeDialog", () => {
     expect(el.querySelector(".compose-publish-slug-input")).not.toBeNull();
   });
 
+  it("keeps the desktop publish settings panel attached to the publish button when space below is tight", async () => {
+    const el = await createElement();
+    Object.defineProperty(globalThis, "visualViewport", {
+      configurable: true,
+      writable: true,
+      value: {
+        offsetLeft: 0,
+        offsetTop: 0,
+        width: 500,
+        height: 420,
+        addEventListener: () => {},
+        removeEventListener: () => {},
+      },
+    });
+    (
+      el as unknown as {
+        _dialogEl: Pick<
+          HTMLDialogElement,
+          "addEventListener" | "getBoundingClientRect" | "removeEventListener"
+        > | null;
+      }
+    )._dialogEl = {
+      addEventListener: () => {},
+      getBoundingClientRect: () =>
+        ({
+          x: 0,
+          y: 80,
+          width: 480,
+          height: 340,
+          top: 80,
+          right: 480,
+          bottom: 420,
+          left: 0,
+          toJSON: () => ({}),
+        }) as never,
+      removeEventListener: () => {},
+    };
+
+    const publishGroup = requireElement(
+      el.querySelector<HTMLElement>(".compose-publish-group"),
+      "expected publish button group",
+    );
+    vi.spyOn(publishGroup, "getBoundingClientRect").mockReturnValue({
+      x: 320,
+      y: 340,
+      width: 120,
+      height: 40,
+      top: 340,
+      right: 440,
+      bottom: 380,
+      left: 320,
+      toJSON: () => ({}),
+    } as never);
+
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      "expected publish settings toggle",
+    ).click();
+    await el.updateComplete;
+
+    const panel = requireElement(
+      el.querySelector<HTMLElement>("[data-compose-publish-panel-desktop]"),
+      "expected publish settings panel",
+    );
+    expect(panel.dataset.position).toBe("up");
+    expect(publishGroup.contains(panel)).toBe(true);
+    expect(
+      panel.style.getPropertyValue("--compose-publish-panel-max-height"),
+    ).toBe("318px");
+  });
+
+  it("opens the desktop publish settings panel below the publish button when the viewport has room", async () => {
+    const el = await createElement();
+    Object.defineProperty(globalThis, "visualViewport", {
+      configurable: true,
+      writable: true,
+      value: {
+        offsetLeft: 0,
+        offsetTop: 0,
+        width: 500,
+        height: 420,
+        addEventListener: () => {},
+        removeEventListener: () => {},
+      },
+    });
+    (
+      el as unknown as {
+        _dialogEl: Pick<
+          HTMLDialogElement,
+          "addEventListener" | "getBoundingClientRect" | "removeEventListener"
+        > | null;
+      }
+    )._dialogEl = {
+      addEventListener: () => {},
+      getBoundingClientRect: () =>
+        ({
+          x: 0,
+          y: 80,
+          width: 480,
+          height: 340,
+          top: 80,
+          right: 480,
+          bottom: 420,
+          left: 0,
+          toJSON: () => ({}),
+        }) as never,
+      removeEventListener: () => {},
+    };
+
+    const publishGroup = requireElement(
+      el.querySelector<HTMLElement>(".compose-publish-group"),
+      "expected publish button group",
+    );
+    vi.spyOn(publishGroup, "getBoundingClientRect").mockReturnValue({
+      x: 320,
+      y: 130,
+      width: 120,
+      height: 40,
+      top: 130,
+      right: 440,
+      bottom: 170,
+      left: 320,
+      toJSON: () => ({}),
+    } as never);
+
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      "expected publish settings toggle",
+    ).click();
+    await el.updateComplete;
+
+    const panel = requireElement(
+      el.querySelector<HTMLElement>("[data-compose-publish-panel-desktop]"),
+      "expected publish settings panel",
+    );
+    expect(panel.dataset.position).toBe("down");
+    expect(publishGroup.contains(panel)).toBe(true);
+    expect(
+      panel.style.getPropertyValue("--compose-publish-panel-max-height"),
+    ).toBe("228px");
+  });
+
+  it("renders publish settings as a fullscreen subview on compact viewports", async () => {
+    mockMatchMedia(true);
+
+    const el = await createElement();
+
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      "expected publish settings toggle",
+    ).click();
+    await el.updateComplete;
+
+    expect(el.querySelector("[data-compose-publish-panel-desktop]")).toBeNull();
+    expect(
+      el.querySelector("[data-compose-publish-panel-mobile]"),
+    ).not.toBeNull();
+  });
+
   it("shows a slug error and blocks publish when the custom link is invalid", async () => {
     mockSlugApi(() => ({ body: { slug: "hello-world" } }));
 
@@ -831,9 +1571,11 @@ 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();
   });
 
@@ -1113,25 +1855,143 @@ describe("JantComposeDialog", () => {
     slugInput.dispatchEvent(new Event("input", { bubbles: true }));
     await el.updateComplete;
 
-    expect(
-      el.querySelector("[data-compose-slug-preview]")?.textContent?.trim(),
-    ).toBe(`${globalThis.location.origin}/final-link`);
+    expect(
+      el.querySelector("[data-compose-slug-preview]")?.textContent?.trim(),
+    ).toBe(`${globalThis.location.origin}/final-link`);
+  });
+
+  it("includes the thread root id when replying", async () => {
+    const el = await createElement();
+    await el.openReply(
+      "019ce8ce-d6d8-7fda-a5df-c2da2bef5ade",
+      {
+        contentHtml: "<p>Parent</p>",
+        dateText: "Mar 14",
+      },
+      "019ce8cf-19a1-7d16-9a75-017a9ac7299d",
+      {
+        kind: "timeline-item",
+        id: "019ce8cf-19a1-7d16-9a75-017a9ac7299d",
+      },
+    );
+
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        { type: "paragraph", content: [{ type: "text", text: "Reply body" }] },
+      ],
+    };
+    await editor.updateComplete;
+    await el.updateComplete;
+
+    let receivedDetail:
+      | (ComposeSubmitDetail & { pendingAttachments: unknown[] })
+      | null = null;
+    el.addEventListener("jant:compose-submit-deferred", (event) => {
+      const customEvent = event as CustomEvent<
+        ComposeSubmitDetail & { pendingAttachments: unknown[] }
+      >;
+      receivedDetail = customEvent.detail;
+    });
+
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+      "expected reply button",
+    ).click();
+
+    expect(receivedDetail).not.toBeNull();
+    const detail = receivedDetail as unknown as ComposeSubmitDetail & {
+      pendingAttachments: unknown[];
+    };
+    expect(detail.replyToId).toBe("019ce8ce-d6d8-7fda-a5df-c2da2bef5ade");
+    expect(detail.replyThreadRootId).toBe(
+      "019ce8cf-19a1-7d16-9a75-017a9ac7299d",
+    );
+    expect(detail.replyRefreshKind).toBe("timeline-item");
+    expect(detail.replyRefreshId).toBe("019ce8cf-19a1-7d16-9a75-017a9ac7299d");
+  });
+
+  it("uses the replied post format as the initial compose format", async () => {
+    const el = await createElement();
+
+    await el.openReply(
+      "019ce8ce-d6d8-7fda-a5df-c2da2bef5ade",
+      {
+        contentHtml: "<p>Parent</p>",
+        dateText: "Mar 14",
+      },
+      undefined,
+      undefined,
+      { initialFormat: "quote" },
+    );
+    await flushUpdates(el);
+
+    expect(el._format).toBe("quote");
+  });
+
+  it("restores a matching local reply draft when reopening reply compose", async () => {
+    const el = await createElement();
+    const replyToId = "019ce8ce-d6d8-7fda-a5df-c2da2bef5ade";
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(null, { status: 404 }),
+    );
+
+    globalThis.localStorage.setItem(
+      "jant:compose-draft",
+      JSON.stringify({
+        format: "note",
+        title: "",
+        bodyJson: {
+          type: "doc",
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "Recovered reply draft" }],
+            },
+          ],
+        },
+        url: "",
+        quoteText: "",
+        quoteAuthor: "",
+        slug: "",
+        visibility: "public",
+        rating: 0,
+        showTitle: false,
+        showRating: false,
+        collectionIds: [],
+        replyToId,
+        attachedTexts: [],
+        attachmentOrder: [],
+        savedAt: Date.now(),
+      }),
+    );
+
+    await el.openReply(replyToId, {
+      contentHtml: "<p>Parent</p>",
+      dateText: "Mar 14",
+    });
+    await flushUpdates(el);
+
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    expect(el._replyToId).toBe(replyToId);
+    expect(editor.getData().body).toContain("Recovered reply draft");
   });
 
-  it("includes the thread root id when replying", async () => {
+  it("keeps the local reply draft when submit is dispatched", async () => {
     const el = await createElement();
-    await el.openReply(
-      "019ce8ce-d6d8-7fda-a5df-c2da2bef5ade",
-      {
-        contentHtml: "<p>Parent</p>",
-        dateText: "Mar 14",
-      },
-      "019ce8cf-19a1-7d16-9a75-017a9ac7299d",
-      {
-        kind: "timeline-item",
-        id: "019ce8cf-19a1-7d16-9a75-017a9ac7299d",
-      },
-    );
+    const replyToId = "019ce8ce-d6d8-7fda-a5df-c2da2bef5ade";
+
+    await el.openReply(replyToId, {
+      contentHtml: "<p>Parent</p>",
+      dateText: "Mar 14",
+    });
 
     const editor = requireElement(
       el.querySelector<JantComposeEditor>("jant-compose-editor"),
@@ -1140,37 +2000,49 @@ describe("JantComposeDialog", () => {
     editor._bodyJson = {
       type: "doc",
       content: [
-        { type: "paragraph", content: [{ type: "text", text: "Reply body" }] },
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "Persist me before submit" }],
+        },
       ],
     };
     await editor.updateComplete;
     await el.updateComplete;
 
-    let receivedDetail:
-      | (ComposeSubmitDetail & { pendingAttachments: unknown[] })
-      | null = null;
-    el.addEventListener("jant:compose-submit-deferred", (event) => {
-      const customEvent = event as CustomEvent<
-        ComposeSubmitDetail & { pendingAttachments: unknown[] }
-      >;
-      receivedDetail = customEvent.detail;
-    });
-
     requireElement(
       el.querySelector<HTMLButtonElement>(".compose-publish-main"),
       "expected reply button",
     ).click();
 
-    expect(receivedDetail).not.toBeNull();
-    const detail = receivedDetail as unknown as ComposeSubmitDetail & {
-      pendingAttachments: unknown[];
+    const savedDraftRaw = globalThis.localStorage.getItem("jant:compose-draft");
+    if (!savedDraftRaw) {
+      throw new Error("expected local compose draft");
+    }
+    const savedDraft = JSON.parse(savedDraftRaw) as {
+      replyToId: string;
+      bodyJson: { content: Array<{ content: Array<{ text: string }> }> };
     };
-    expect(detail.replyToId).toBe("019ce8ce-d6d8-7fda-a5df-c2da2bef5ade");
-    expect(detail.replyThreadRootId).toBe(
-      "019ce8cf-19a1-7d16-9a75-017a9ac7299d",
+
+    expect(savedDraft.replyToId).toBe(replyToId);
+    expect(savedDraft.bodyJson.content[0]?.content[0]?.text).toBe(
+      "Persist me before submit",
     );
-    expect(detail.replyRefreshKind).toBe("timeline-item");
-    expect(detail.replyRefreshId).toBe("019ce8cf-19a1-7d16-9a75-017a9ac7299d");
+  });
+
+  it("does not add more thread items than the shared limit", async () => {
+    const el = await createElement();
+    el._threadItems = Array.from({ length: MAX_THREAD_POSTS }, (_, index) => ({
+      id: `thread-${index}`,
+      format: "note",
+    }));
+
+    (
+      el as unknown as {
+        _addThreadItem: () => void;
+      }
+    )._addThreadItem();
+
+    expect(el._threadItems).toHaveLength(MAX_THREAD_POSTS);
   });
 
   it("omits visibility from locked edit submissions", async () => {
@@ -1252,6 +2124,238 @@ describe("JantComposeDialog", () => {
     expect(el._collectionIds).toEqual(["col-2"]);
   });
 
+  it("moves collection focus with arrow keys and toggles with Space", async () => {
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+    const el = await createElement();
+
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-collection-trigger"),
+      "expected collection trigger",
+    ).click();
+    await flushUpdates(el);
+
+    const searchInput = requireElement(
+      el.querySelector<HTMLInputElement>(".compose-collection-search-input"),
+      "expected collection search input",
+    );
+    expect(document.activeElement).toBe(searchInput);
+
+    keydown(searchInput, "ArrowDown");
+    await flushUpdates(el);
+
+    let options = Array.from(
+      el.querySelectorAll<HTMLButtonElement>("[data-popover] [role='option']"),
+    );
+    expect(document.activeElement).toBe(options[0]);
+
+    keydown(
+      requireElement(options[0] ?? null, "expected first option"),
+      "ArrowDown",
+    );
+    await flushUpdates(el);
+    options = Array.from(
+      el.querySelectorAll<HTMLButtonElement>("[data-popover] [role='option']"),
+    );
+    expect(document.activeElement).toBe(options[1]);
+
+    keydown(
+      requireElement(options[1] ?? null, "expected second option"),
+      "ArrowUp",
+    );
+    await flushUpdates(el);
+    options = Array.from(
+      el.querySelectorAll<HTMLButtonElement>("[data-popover] [role='option']"),
+    );
+    expect(document.activeElement).toBe(options[0]);
+
+    keydown(requireElement(options[0] ?? null, "expected first option"), " ");
+    await flushUpdates(el);
+    expect(el._collectionIds).toEqual(["col-1"]);
+
+    options = Array.from(
+      el.querySelectorAll<HTMLButtonElement>("[data-popover] [role='option']"),
+    );
+    expect(document.activeElement).toBe(options[0]);
+
+    keydown(
+      requireElement(options[0] ?? null, "expected first option"),
+      "ArrowUp",
+    );
+    await flushUpdates(el);
+    expect(document.activeElement).toBe(searchInput);
+  });
+
+  it("closes the collection picker from the search input on Enter", async () => {
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+    const el = await createElement();
+
+    const trigger = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-collection-trigger"),
+      "expected collection trigger",
+    );
+    trigger.click();
+    await flushUpdates(el);
+
+    const searchInput = requireElement(
+      el.querySelector<HTMLInputElement>(".compose-collection-search-input"),
+      "expected collection search input",
+    );
+    expect(document.activeElement).toBe(searchInput);
+
+    keydown(searchInput, "Enter");
+    await flushUpdates(el);
+
+    expect(el._showCollection).toBe(false);
+    expect(el._collectionSearch).toBe("");
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it("closes the collection picker from an option on Enter without toggling", async () => {
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+    const el = await createElement();
+
+    const trigger = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-collection-trigger"),
+      "expected collection trigger",
+    );
+    trigger.click();
+    await flushUpdates(el);
+
+    const firstOption = requireElement(
+      el.querySelector<HTMLButtonElement>("[data-popover] [role='option']"),
+      "expected first collection option",
+    );
+    firstOption.focus();
+
+    keydown(firstOption, "Enter");
+    await flushUpdates(el);
+
+    expect(el._collectionIds).toEqual([]);
+    expect(el._showCollection).toBe(false);
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it("does not autofocus collection search on coarse pointer devices", async () => {
+    Object.defineProperty(globalThis, "matchMedia", {
+      configurable: true,
+      writable: true,
+      value: vi.fn().mockImplementation((query: string) => ({
+        matches: query === "(hover: none) and (pointer: coarse)",
+        media: query,
+        onchange: null,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    });
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+
+    const el = await createElement();
+    const trigger = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-collection-trigger"),
+      "expected collection trigger",
+    );
+    trigger.focus();
+    trigger.click();
+    await flushUpdates(el);
+
+    const searchInput = requireElement(
+      el.querySelector<HTMLInputElement>(".compose-collection-search-input"),
+      "expected collection search input",
+    );
+    expect(document.activeElement).not.toBe(searchInput);
+  });
+
+  it("moves trigger keyboard input into the collection search when the picker is open", async () => {
+    Object.defineProperty(globalThis, "matchMedia", {
+      configurable: true,
+      writable: true,
+      value: vi.fn().mockImplementation((query: string) => ({
+        matches: query === "(hover: none) and (pointer: coarse)",
+        media: query,
+        onchange: null,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    });
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+
+    const el = await createElement();
+    const trigger = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-collection-trigger"),
+      "expected collection trigger",
+    );
+    trigger.focus();
+    trigger.click();
+    await flushUpdates(el);
+
+    keydown(trigger, "m");
+    await flushUpdates(el);
+
+    const searchInput = requireElement(
+      el.querySelector<HTMLInputElement>(".compose-collection-search-input"),
+      "expected collection search input",
+    );
+    expect(document.activeElement).toBe(searchInput);
+    expect(el._collectionSearch).toBe("m");
+  });
+
+  it("keeps selected collections first when opening and after reopening", async () => {
+    const el = await createElement([
+      { id: "col-1", title: "Books", slug: "books" },
+      { id: "col-2", title: "Movies", slug: "movies" },
+      { id: "col-3", title: "Travel", slug: "travel" },
+    ]);
+    el._collectionIds = ["col-2"];
+    await el.updateComplete;
+
+    const trigger = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-collection-trigger"),
+      "expected collection trigger",
+    );
+
+    trigger.click();
+    await el.updateComplete;
+
+    expect(collectionOptionTitles(el)).toEqual(["Movies", "Books", "Travel"]);
+
+    const options = el.querySelectorAll<HTMLButtonElement>(
+      "[data-popover] [role='option']",
+    );
+    options[2]?.click();
+    await el.updateComplete;
+
+    expect(el._collectionIds).toEqual(["col-2", "col-3"]);
+    expect(collectionOptionTitles(el)).toEqual(["Movies", "Books", "Travel"]);
+
+    trigger.click();
+    await el.updateComplete;
+    trigger.click();
+    await el.updateComplete;
+
+    expect(collectionOptionTitles(el)).toEqual(["Movies", "Travel", "Books"]);
+  });
+
   it("reset restores initial state", async () => {
     const el = await createElement();
     el._format = "link";
@@ -1289,13 +2393,15 @@ describe("JantComposeDialog", () => {
   });
 
   it("refreshes collections from the compose-sorted endpoint", async () => {
-    const el = await createElement([{ id: "col-1", title: "Books" }]);
+    const el = await createElement([
+      { id: "col-1", title: "Books", slug: "books" },
+    ]);
     const fetchSpy = vi.spyOn(globalThis, "fetch").mockResolvedValue(
       new Response(
         JSON.stringify({
           collections: [
-            { id: "col-2", title: "Movies" },
-            { id: "col-1", title: "Books" },
+            { id: "col-2", title: "Movies", slug: "movies" },
+            { id: "col-1", title: "Books", slug: "books" },
           ],
         }),
         {
@@ -1309,11 +2415,12 @@ describe("JantComposeDialog", () => {
 
     expect(refreshed).toBe(true);
     expect(fetchSpy).toHaveBeenCalledWith("/api/collections?view=compose", {
+      cache: "no-store",
       headers: { Accept: "application/json" },
     });
     expect(el.collections).toEqual([
-      { id: "col-2", title: "Movies" },
-      { id: "col-1", title: "Books" },
+      { id: "col-2", title: "Movies", slug: "movies" },
+      { id: "col-1", title: "Books", slug: "books" },
     ]);
   });
 
@@ -1420,7 +2527,7 @@ describe("JantComposeDialog", () => {
 
         if (url.pathname === "/api/collections" && method === "POST") {
           return new Response(
-            JSON.stringify({ id: "col-3", title: "Travel" }),
+            JSON.stringify({ id: "col-3", title: "Travel", slug: "travel" }),
             {
               status: 200,
               headers: { "Content-Type": "application/json" },
@@ -1435,9 +2542,9 @@ describe("JantComposeDialog", () => {
           return new Response(
             JSON.stringify({
               collections: [
-                { id: "col-3", title: "Travel" },
-                { id: "col-1", title: "Books" },
-                { id: "col-2", title: "Movies" },
+                { id: "col-3", title: "Travel", slug: "travel" },
+                { id: "col-1", title: "Books", slug: "books" },
+                { id: "col-2", title: "Movies", slug: "movies" },
               ],
             }),
             {
@@ -1486,9 +2593,9 @@ describe("JantComposeDialog", () => {
     ).toBe(false);
     expect(el._collectionIds).toContain("col-3");
     expect(el.collections).toEqual([
-      { id: "col-3", title: "Travel" },
-      { id: "col-1", title: "Books" },
-      { id: "col-2", title: "Movies" },
+      { id: "col-3", title: "Travel", slug: "travel" },
+      { id: "col-1", title: "Books", slug: "books" },
+      { id: "col-2", title: "Movies", slug: "movies" },
     ]);
   });
 
@@ -1609,6 +2716,7 @@ describe("JantComposeDialog", () => {
         mediaId: "media-1",
         alt: "",
         error: null,
+        posterUrl: null,
         summary: null,
         chars: null,
       },
@@ -1652,6 +2760,7 @@ describe("JantComposeDialog", () => {
         mediaId: "media-1",
         alt: "",
         error: null,
+        posterUrl: null,
         summary: null,
         chars: null,
       },
@@ -1693,6 +2802,7 @@ describe("JantComposeDialog", () => {
         mediaId: "media-1",
         alt: "",
         error: null,
+        posterUrl: null,
         summary: null,
         chars: null,
       },
@@ -1747,6 +2857,7 @@ describe("JantComposeDialog", () => {
         mediaId: "media-1",
         alt: "A test image",
         error: null,
+        posterUrl: null,
         summary: null,
         chars: null,
       },
@@ -1816,6 +2927,7 @@ describe("JantComposeDialog", () => {
         mediaId: null,
         alt: "Alt for pending",
         error: null,
+        posterUrl: null,
         summary: null,
         chars: null,
       },
@@ -1849,6 +2961,48 @@ describe("JantComposeDialog", () => {
     URL.revokeObjectURL(previewUrl);
   });
 
+  it("dispatches submit immediately even with pending inline image uploads", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+
+    const bodyJson = {
+      type: "doc",
+      content: [
+        {
+          type: "image",
+          attrs: {
+            src: "blob:inline-preview",
+            alt: "",
+            title: "",
+            caption: "",
+          },
+        },
+      ],
+    };
+    editor._bodyJson = bodyJson;
+    await editor.updateComplete;
+
+    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 post button",
+    ).click();
+    await flushUpdates(el);
+
+    // Submit fires immediately — blob URL resolution is handled by compose-bridge
+    expect(receivedDetail).not.toBeNull();
+    expect((receivedDetail as unknown as ComposeSubmitDetail).body).toBe(
+      JSON.stringify(bodyJson),
+    );
+  });
+
   // ── Close confirmation ─────────────────────────────────────────────
 
   it("requestClose on empty form closes immediately without confirmation", async () => {
@@ -1898,9 +3052,12 @@ describe("JantComposeDialog", () => {
     (
       el as unknown as {
         _dialogEl: HTMLDialogElement | null;
+        _mousedownOnBackdrop: boolean;
         _handleDialogClick: (event: Event) => void;
       }
     )._dialogEl = dialog;
+    (el as unknown as { _mousedownOnBackdrop: boolean })._mousedownOnBackdrop =
+      true;
     vi.spyOn(document, "elementFromPoint").mockReturnValue(dialog);
 
     (
@@ -2353,6 +3510,55 @@ describe("JantComposeDialog", () => {
     expect(tiptap.getText()).toBe("/zzz");
   });
 
+  it("does not open the slash menu when the caret sits inside a `/word` in prose", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    const tiptap = requireEditor(editor);
+
+    tiptap.commands.focus("end");
+    tiptap.commands.insertContent("before /now, after");
+    await flushUpdates(el);
+
+    // Move the caret into the middle of "now" (between "/" and "n").
+    const text = tiptap.getText();
+    const slashIndex = text.indexOf("/now");
+    // +2 accounts for the doc/paragraph boundary before the text starts.
+    tiptap.commands.setTextSelection(slashIndex + 2);
+    await flushUpdates(el);
+
+    expect(document.querySelector(".tiptap-slash-menu")).toBeNull();
+  });
+
+  it("does not reopen the slash menu when the caret moves back to an existing `/word`", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    const tiptap = requireEditor(editor);
+
+    // Type "/image " followed by more text, then press Escape to close the
+    // menu that (rightly) opened while typing "/image".
+    tiptap.commands.focus("end");
+    tiptap.commands.insertContent("/image hello");
+    await flushUpdates(el);
+
+    // Menu should be gone because the space after "/image" closed it.
+    expect(document.querySelector(".tiptap-slash-menu")).toBeNull();
+
+    // Now move the caret back to just after "/image" (between "e" and " ").
+    const text = tiptap.getText();
+    const endOfImage = text.indexOf("/image") + "/image".length;
+    tiptap.commands.setTextSelection(endOfImage + 1);
+    await flushUpdates(el);
+
+    // Selection-only change should NOT reopen the menu.
+    expect(document.querySelector(".tiptap-slash-menu")).toBeNull();
+  });
+
   it("dialog cancel closes the emoji picker before prompting to save", async () => {
     const el = await createElement();
     const editor = requireElement(
@@ -2369,7 +3575,7 @@ describe("JantComposeDialog", () => {
     await editor.updateComplete;
 
     const closeEmojiPickerSpy = vi.spyOn(editor, "closeEmojiPicker");
-    const focusSpy = vi.spyOn(editor, "focusInput");
+    const focusSpy = vi.spyOn(editor, "focusSelection");
 
     (
       el as unknown as {
@@ -2380,7 +3586,7 @@ describe("JantComposeDialog", () => {
 
     expect(closeEmojiPickerSpy).toHaveBeenCalledWith({ restoreFocus: true });
     expect(el._confirmPanelOpen).toBe(false);
-    expect(focusSpy).toHaveBeenCalledWith("end");
+    expect(focusSpy).toHaveBeenCalled();
   });
 
   it("dialog cancel closes the collection selector and keeps selected collections", async () => {
@@ -2411,7 +3617,7 @@ describe("JantComposeDialog", () => {
     expect(el._showCollection).toBe(false);
     expect(el._collectionIds).toEqual(["col-1"]);
     expect(el._confirmPanelOpen).toBe(false);
-    expect(focusSpy).toHaveBeenCalledWith("end");
+    expect(focusSpy).toHaveBeenCalledWith();
   });
 
   it("dialog cancel closes publish settings and returns focus to the editor", async () => {
@@ -2443,7 +3649,7 @@ describe("JantComposeDialog", () => {
 
     expect(el._showPublishPanel).toBe(false);
     expect(el._confirmPanelOpen).toBe(false);
-    expect(focusSpy).toHaveBeenCalledWith("end");
+    expect(focusSpy).toHaveBeenCalledWith();
   });
 
   it("requestClose with content shows confirmation panel", async () => {
@@ -3173,10 +4379,22 @@ describe("JantComposeDialog", () => {
     expect((receivedDetail as unknown as ComposeSubmitDetail).status).toBe(
       "draft",
     );
-    // Drafts panel opened instead of dialog closing
-    expect(el._draftsPanelOpen).toBe(true);
+    // Drafts panel waits for the bridge to finish writing before opening
+    expect(el._draftsPanelOpen).toBe(false);
     expect(el._confirmPanelOpen).toBe(false);
 
+    // Simulate the bridge signalling that the draft was saved
+    document.dispatchEvent(
+      new CustomEvent("jant:compose-submit-complete", {
+        detail: { status: "draft" },
+      }),
+    );
+    await el.updateComplete;
+    await new Promise((r) => setTimeout(r, 0));
+    await el.updateComplete;
+
+    expect(el._draftsPanelOpen).toBe(true);
+
     fetchSpy.mockRestore();
   });
 
@@ -3256,6 +4474,7 @@ describe("JantComposeDialog", () => {
         mediaId: "media-1",
         alt: "",
         error: null,
+        posterUrl: null,
         summary: null,
         chars: null,
       },