@jant/core 0.3.38 → 0.3.40

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

@@ -1,6 +1,8 @@
 // @vitest-environment happy-dom
 
 import { describe, it, expect, beforeEach, vi } from "vitest";
+import type { Editor } from "@tiptap/core";
+
 import type {
   ComposeLabels,
   ComposeCollection,
@@ -21,6 +23,46 @@ function requireElement<T extends globalThis.Element>(
   return element;
 }
 
+function requireEditor(el: JantComposeEditor): Editor {
+  const editor = (el as unknown as { _editor?: Editor | null })._editor;
+  if (!editor) {
+    throw new Error("expected compose editor instance");
+  }
+  return editor;
+}
+
+async function flushUpdates(el?: JantComposeDialog) {
+  await Promise.resolve();
+  await Promise.resolve();
+  if (el) {
+    await el.updateComplete;
+  }
+}
+
+function mockSlugApi(
+  handler: (url: URL) => { status?: number; body: unknown },
+): ReturnType<typeof vi.spyOn> {
+  return vi.spyOn(globalThis, "fetch").mockImplementation(async (input) => {
+    const raw =
+      typeof input === "string"
+        ? input
+        : input instanceof URL
+          ? input.toString()
+          : input.url;
+    const url = new URL(raw, "http://localhost");
+
+    if (url.pathname === "/api/posts/slug") {
+      const { status = 200, body } = handler(url);
+      return new Response(JSON.stringify(body), {
+        status,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+
+    throw new Error(`Unexpected fetch: ${url.pathname}${url.search}`);
+  });
+}
+
 const labels: ComposeLabels = {
   cancel: "Cancel",
   note: "Note",
@@ -32,6 +74,9 @@ const labels: ComposeLabels = {
   titlePlaceholder: "Title",
   bodyPlaceholder: "What's on your mind...",
   urlPlaceholder: "Paste a URL...",
+  urlInvalid: "Enter a valid URL starting with http://, https://, or mailto:.",
+  linkUrlRequired: "Add a URL before posting this link.",
+  linkTitleRequired: "Add a title before posting this link.",
   linkTitlePlaceholder: "Give it a title...",
   thoughtsPlaceholder: "Your thoughts (optional)",
   quotePlaceholder: "Type the quote...",
@@ -45,9 +90,10 @@ const labels: ComposeLabels = {
   rate: "Rate",
   emoji: "Emoji",
   title: "Title",
+  fullscreen: "Fullscreen",
   collection: "Collection",
   searchCollections: "Search...",
-  noCollections: "No collections found.",
+  noCollections: "No collections match that search. Try a different name.",
   emptyCollections: "Create a collection to get started.",
   post: "Post",
   addAlt: "+ ALT",
@@ -55,6 +101,7 @@ const labels: ComposeLabels = {
   altPlaceholder: "Describe this...",
   altHint: "Alt text improves accessibility",
   addMore: "Add",
+  removeAttachment: "Remove attachment",
   uploading: "Uploading...",
   published: "Published!",
   view: "View",
@@ -66,10 +113,16 @@ const labels: ComposeLabels = {
   confirmCloseSave: "Save",
   confirmCloseCancel: "Cancel",
   confirmCloseDiscard: "Don't save",
+  confirmAttachedTitle: "Save text attachment?",
+  confirmAttachedSubtitle:
+    "Save these changes to the text attachment, discard them, or keep editing.",
+  confirmAttachedSave: "Save",
+  confirmAttachedDiscard: "Don't save",
   confirmEditTitle: "You have unsaved changes",
   confirmEditSubtitle: "Do you want to publish your changes or discard them?",
   confirmEditPublish: "Publish",
   confirmEditDiscard: "Discard",
+  discardChangesConfirm: "Discard changes?",
   drafts: "Drafts",
   draftsEmpty: "No drafts yet. Save a draft to find it here.",
   deleteDraft: "Delete Draft",
@@ -80,36 +133,58 @@ const labels: ComposeLabels = {
   collectionCountLabel: "%name% + %count% more",
   draftRestored: "Draft restored.",
   reply: "Reply",
-  publishFeatured: "Post as Featured",
-  publishUnlisted: "Post Unlisted",
+  publishHideFromLatest: "Hide from Latest",
   publishPrivate: "Post as Private",
+  publishSettings: "Publish settings",
+  publishVisibilityLabel: "Visibility",
+  publishVisibilityPublic: "Public",
+  publishVisibilityPublicHint: "Appears in Latest.",
+  publishVisibilityHiddenFromLatest: "Hidden from Latest",
+  publishVisibilityHiddenFromLatestHint:
+    "Doesn't appear in Latest. Still appears in collections you add it to.",
+  publishVisibilityPrivate: "Private",
+  publishVisibilityPrivateHint: "Only visible when signed in.",
+  publishSlugLabel: "Custom link",
+  publishSlugPlaceholder: "your-post-link",
+  publishSlugHint: "Leave blank to generate one automatically.",
+  publishSlugAuto: "Generate automatically",
+  publishSlugReset: "Reset link",
+  publishSlugSuggested: "Suggested link",
+  publishSlugGenerating: "Generating a link...",
+  publishSlugChecking: "Checking link...",
+  publishSlugTaken: "This link is already in use. Choose something else.",
+  publishSlugInvalid: "Use lowercase letters, numbers, and hyphens only.",
+  publishSlugReserved: "This link is reserved. Choose something else.",
+  postHiddenFromLatest: "Post hidden",
+  postPrivately: "Post privately",
   showMore: "Show more",
   showLess: "Show less",
   collectionFormLabels: {
     titleLabel: "Title",
     titlePlaceholder: "My Collection",
-    slugLabel: "Slug",
-    slugHelp: "URL-safe identifier",
+    slugLabel: "Collection link",
+    slugHelp: "This is the last part of the collection link.",
+    slugInvalidHelp: "Use lowercase letters, numbers, and hyphens only.",
+    slugReservedHelp: "This link is reserved. Choose something else.",
+    editSlugLabel: "Edit link",
+    resetSlugLabel: "Reset link",
+    quickHint: "More options are available after you create it.",
+    quickSubmitLabel: "Done",
+    createdLabel: "Collection created.",
     descriptionLabel: "Description (optional)",
     descriptionPlaceholder: "What's this collection about?",
-    removeIcon: "Remove",
-    iconsTab: "Icons",
-    emojisTab: "Emojis",
-    searchIconsPlaceholder: "Search icons...",
-    searchEmojisPlaceholder: "Search emojis...",
     sortOrderLabel: "Sort Order",
     sortNewest: "Newest first",
     sortOldest: "Oldest first",
     sortRatingDesc: "Highest rated",
-    sortRatingAsc: "Lowest rated",
     submitLabel: "Save",
     cancelLabel: "Cancel",
   },
 };
 
 const collections: ComposeCollection[] = [
-  { id: "col-1", title: "Books", iconHtml: "" },
-  { id: "col-2", title: "Movies", iconHtml: "<span>🎬</span>" },
+  { id: "col-1", title: "Books" },
+  { id: "col-2", title: "Movies" },
 ];
 
 async function createElement(
@@ -128,7 +203,14 @@ async function createElement(
 
 describe("JantComposeDialog", () => {
   beforeEach(() => {
+    vi.restoreAllMocks();
     document.body.innerHTML = "";
+    globalThis.localStorage.clear();
+    (
+      customElements.get("jant-compose-dialog") as typeof HTMLElement & {
+        _lastNewPostVisibility: string;
+      }
+    )._lastNewPostVisibility = "public";
   });
 
   it("renders with collections and labels", async () => {
@@ -150,6 +232,97 @@ describe("JantComposeDialog", () => {
       "expected post button",
     );
     expect(postBtn.textContent?.trim()).toBe("Post");
+    expect(postBtn.disabled).toBe(true);
+    expect(
+      requireElement(
+        el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+        "expected publish settings toggle",
+      ).disabled,
+    ).toBe(false);
+    expect(
+      el.querySelector<HTMLButtonElement>(
+        '.compose-tool-btn-view[aria-label="Fullscreen"]',
+      ),
+    ).not.toBeNull();
+  });
+
+  it("focuses the main editor body 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");
+
+    document.dispatchEvent(
+      new CustomEvent("jant:fullscreen-close", {
+        detail: {
+          json: null,
+          title: "",
+          showTitle: false,
+          replyExpanded: false,
+        },
+      }),
+    );
+
+    await flushUpdates(el);
+    await flushUpdates(el);
+
+    expect(focusSpy).toHaveBeenCalledWith("end");
+  });
+
+  it("opens publish settings even when publish is disabled", async () => {
+    const el = await createElement();
+
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      "expected publish settings toggle",
+    ).click();
+    await el.updateComplete;
+
+    expect(el.querySelector(".compose-publish-panel")).not.toBeNull();
+  });
+
+  it("updates the draft button label to match its current action", async () => {
+    const el = await createElement();
+
+    const draftButton = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-dialog-draft-btn"),
+      "expected draft button",
+    );
+    expect(draftButton.title).toBe("Drafts");
+    expect(draftButton.getAttribute("aria-label")).toBe("Drafts");
+
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        { type: "paragraph", content: [{ type: "text", text: "Hello world" }] },
+      ],
+    };
+    await editor.updateComplete;
+    await el.updateComplete;
+
+    expect(draftButton.title).toBe("Save as draft");
+    expect(draftButton.getAttribute("aria-label")).toBe("Save as draft");
+  });
+
+  it("shows visibility hints in the publish settings panel", async () => {
+    const el = await createElement();
+
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      "expected publish settings toggle",
+    ).click();
+    await el.updateComplete;
+
+    expect(el.textContent).toContain(
+      "Doesn't appear in Latest. Still appears in collections you add it to.",
+    );
+    expect(el.textContent).toContain("Only visible when signed in.");
   });
 
   it("format switching updates active state", async () => {
@@ -177,6 +350,9 @@ describe("JantComposeDialog", () => {
     expect(noteBtn.classList.contains("compose-segmented-item-active")).toBe(
       false,
     );
+    expect(
+      el.querySelector('.compose-tool-btn-view[aria-label="Fullscreen"]'),
+    ).toBeNull();
   });
 
   it("submit dispatches jant:compose-submit-deferred with correct payload", async () => {
@@ -218,80 +394,46 @@ describe("JantComposeDialog", () => {
     expect(detail.status).toBe("published");
     expect(detail.visibility).toBe("public");
     expect(detail.collectionIds).toEqual([]);
-    expect(detail.mediaIds).toEqual([]);
-    expect(detail.mediaAlts).toEqual({});
+    expect(detail.attachments).toEqual([]);
     expect(detail.pendingAttachments).toEqual([]);
   });
 
-  it("collection selector toggles IDs", async () => {
+  it("submit omits a hidden rating while keeping the compose body", async () => {
     const el = await createElement();
-
-    // Open collection combobox
-    const trigger = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-collection-trigger"),
-      "expected collection trigger",
-    );
-    trigger.click();
-    await el.updateComplete;
-
-    const options = el.querySelectorAll<HTMLElement>(
-      "[data-popover] [role='option']",
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
     );
-    expect(options.length).toBe(2);
-
-    // Select first collection
-    options[0].click();
-    await el.updateComplete;
-    expect(el._collectionIds).toEqual(["col-1"]);
-
-    // Select second collection
-    options[1].click();
-    await el.updateComplete;
-    expect(el._collectionIds).toEqual(["col-1", "col-2"]);
-
-    // Deselect first
-    options[0].click();
-    await el.updateComplete;
-    expect(el._collectionIds).toEqual(["col-2"]);
-  });
-
-  it("reset restores initial state", async () => {
-    const el = await createElement();
-    el._format = "link";
-    el._collectionIds = ["col-1", "col-2"];
-    el._loading = true;
-    el._draftSourceId = "abc123";
-
-    el.reset();
-
-    expect(el._format).toBe("note");
-    expect(el._collectionIds).toEqual([]);
-    expect(el._loading).toBe(false);
-    expect(el._draftSourceId).toBeNull();
-  });
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "Post without visible rating" }],
+        },
+      ],
+    };
+    editor._rating = 3;
+    editor._showRating = false;
+    await editor.updateComplete;
 
-  it("loading state disables submit button", async () => {
-    const el = await createElement();
-    el._loading = true;
-    await el.updateComplete;
+    let receivedDetail: ComposeSubmitDetail | null = null;
+    el.addEventListener("jant:compose-submit-deferred", (event) => {
+      receivedDetail = (event as CustomEvent<ComposeSubmitDetail>).detail;
+    });
 
-    const postBtn = requireElement(
+    requireElement(
       el.querySelector<HTMLButtonElement>(".compose-publish-main"),
       "expected post button",
-    );
-    expect(postBtn.disabled).toBe(true);
-  });
-
-  it("renders collection selector even without collections", async () => {
-    const el = await createElement([]);
+    ).click();
 
-    // Collection trigger is still shown so users can create new collections
-    expect(el.querySelector(".compose-collection-trigger")).not.toBeNull();
-    const actionRow = el.querySelector(".compose-action-row");
-    expect(actionRow).not.toBeNull();
+    expect(receivedDetail).not.toBeNull();
+    const detail = receivedDetail as unknown as ComposeSubmitDetail;
+    expect(detail.rating).toBe(0);
+    expect(detail.body).toContain("Post without visible rating");
   });
 
-  it("draft button with content shows confirm panel", async () => {
+  it("includes publish settings in the submit payload", async () => {
     const el = await createElement();
     const editor = requireElement(
       el.querySelector<JantComposeEditor>("jant-compose-editor"),
@@ -302,431 +444,2437 @@ describe("JantComposeDialog", () => {
       content: [
         {
           type: "paragraph",
-          content: [{ type: "text", text: "Draft content" }],
+          content: [{ type: "text", text: "Configured post" }],
         },
       ],
     };
     await editor.updateComplete;
 
-    // Click the draft header button — should show confirm panel
-    const draftBtn = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-dialog-header-btn"),
-      "expected draft button",
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      "expected publish settings toggle",
+    ).click();
+    await el.updateComplete;
+
+    const options = el.querySelectorAll<HTMLButtonElement>(
+      ".compose-publish-option[role='radio']",
     );
-    draftBtn.click();
+    expect(options).toHaveLength(3);
+    options[1]?.click();
     await el.updateComplete;
 
-    expect(el._confirmPanelOpen).toBe(true);
-    expect(el.querySelector(".compose-confirm-panel")).not.toBeNull();
+    expect(
+      requireElement(
+        el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+        "expected publish button",
+      ).textContent?.trim(),
+    ).toBe("Post hidden");
+
+    let receivedDetail: ComposeSubmitDetail | null = null;
+    el.addEventListener("jant:compose-submit-deferred", (event) => {
+      receivedDetail = (event as CustomEvent<ComposeSubmitDetail>).detail;
+    });
+
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+      "expected publish button",
+    ).click();
+
+    expect(receivedDetail).not.toBeNull();
+    expect((receivedDetail as unknown as ComposeSubmitDetail).visibility).toBe(
+      "latest_hidden",
+    );
+    expect(
+      (receivedDetail as unknown as ComposeSubmitDetail).slug,
+    ).toBeUndefined();
   });
 
-  it("draft button without content opens drafts panel", async () => {
+  it("updates the publish button label for private visibility", async () => {
     const el = await createElement();
 
-    // Mock fetch for drafts list
-    const fetchSpy = vi.spyOn(globalThis, "fetch").mockResolvedValue(
-      new Response(JSON.stringify({ posts: [] }), {
-        status: 200,
-        headers: { "Content-Type": "application/json" },
-      }),
-    );
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      "expected publish settings toggle",
+    ).click();
+    await el.updateComplete;
 
-    // Click the draft header button — should open drafts panel
-    const draftBtn = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-dialog-header-btn"),
-      "expected draft button",
+    const options = el.querySelectorAll<HTMLButtonElement>(
+      ".compose-publish-option[role='radio']",
     );
-    draftBtn.click();
+    expect(options).toHaveLength(3);
+    options[2]?.click();
     await el.updateComplete;
 
-    expect(el._draftsPanelOpen).toBe(true);
+    expect(
+      requireElement(
+        el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+        "expected publish button",
+      ).textContent?.trim(),
+    ).toBe("Post privately");
+  });
 
-    // Wait for fetch to resolve
-    await new Promise((r) => setTimeout(r, 0));
+  it("updates the publish button label for hidden visibility", async () => {
+    const el = await createElement();
+
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      "expected publish settings toggle",
+    ).click();
     await el.updateComplete;
 
-    expect(el._draftsLoading).toBe(false);
-    expect(el.querySelector(".compose-drafts-panel")).not.toBeNull();
+    const options = el.querySelectorAll<HTMLButtonElement>(
+      ".compose-publish-option[role='radio']",
+    );
+    expect(options).toHaveLength(3);
+    options[1]?.click();
+    await el.updateComplete;
 
-    fetchSpy.mockRestore();
+    expect(
+      requireElement(
+        el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+        "expected publish button",
+      ).textContent?.trim(),
+    ).toBe("Post hidden");
   });
 
-  it("does not dispatch submit when loading", async () => {
+  it("opens a new post with the requested collection and keeps the last visibility until refresh", async () => {
     const el = await createElement();
-    el._loading = true;
+
+    await el.openNew({ collectionId: "col-2", restoreDraft: false });
     await el.updateComplete;
 
-    let dispatched = false;
-    el.addEventListener("jant:compose-submit-deferred", () => {
-      dispatched = true;
-    });
+    expect(el._collectionIds).toEqual(["col-2"]);
+    expect(el._visibility).toBe("public");
 
-    const postBtn = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-main"),
-      "expected post button",
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      "expected publish settings toggle",
+    ).click();
+    await el.updateComplete;
+
+    const options = el.querySelectorAll<HTMLButtonElement>(
+      ".compose-publish-option[role='radio']",
     );
-    postBtn.click();
+    options[1]?.click();
+    await el.updateComplete;
 
-    expect(dispatched).toBe(false);
-  });
+    expect(el._visibility).toBe("latest_hidden");
 
-  it("loading state shows spinner in submit button", async () => {
-    const el = await createElement();
-    el._loading = true;
+    el.reset();
     await el.updateComplete;
 
-    const spinner = el.querySelector(".compose-publish-main .animate-spin");
-    expect(spinner).not.toBeNull();
+    expect(el._visibility).toBe("latest_hidden");
+
+    await el.openNew({ collectionId: "col-1", restoreDraft: false });
+    await el.updateComplete;
+
+    expect(el._collectionIds).toEqual(["col-1"]);
+    expect(el._visibility).toBe("latest_hidden");
   });
 
-  it("no old media picker dialog is rendered", async () => {
+  it("prepends the requested collection even when a local draft is restored", async () => {
     const el = await createElement();
 
-    expect(el.querySelector("#compose-media-picker")).toBeNull();
-    expect(el.querySelector(".compose-media-picker")).toBeNull();
+    globalThis.localStorage.setItem(
+      "jant:compose-draft",
+      JSON.stringify({
+        format: "note",
+        title: "",
+        bodyJson: {
+          type: "doc",
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "Draft body" }],
+            },
+          ],
+        },
+        url: "",
+        quoteText: "",
+        quoteAuthor: "",
+        slug: "",
+        visibility: "public",
+        rating: 0,
+        showTitle: false,
+        showRating: false,
+        collectionIds: ["col-1"],
+        attachedTexts: [],
+        attachmentOrder: [],
+        savedAt: Date.now(),
+      }),
+    );
+
+    await el.openNew({ collectionId: "col-2" });
+    await flushUpdates(el);
+
+    expect(el._collectionIds).toEqual(["col-2", "col-1"]);
   });
 
-  it("editor renders attachments when present", async () => {
+  it("includes a custom slug from the publish settings panel in the submit payload", async () => {
+    mockSlugApi((url) => {
+      if (url.searchParams.get("mode") === "suggest") {
+        return { body: { slug: "configured-post" } };
+      }
+      if (url.searchParams.get("mode") === "check") {
+        return { body: { slug: "custom-link", available: true } };
+      }
+      throw new Error(`Unexpected slug mode: ${url.search}`);
+    });
+
+    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: "Configured post" }],
+        },
+      ],
+    };
+    await editor.updateComplete;
+
+    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 = "custom-link";
+    slugInput.dispatchEvent(new Event("input", { bubbles: true }));
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    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();
+    expect((receivedDetail as unknown as ComposeSubmitDetail).slug).toBe(
+      "custom-link",
+    );
+  });
+
+  it("reopens the publish settings panel with the custom link field intact", async () => {
+    mockSlugApi((url) => {
+      if (url.searchParams.get("mode") === "suggest") {
+        return { body: { slug: "reading-notes" } };
+      }
+      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;
+    publishToggle.click();
+    await el.updateComplete;
+
+    expect(el.querySelector(".compose-publish-slug-input")).not.toBeNull();
+  });
+
+  it("shows a slug error and blocks publish when the custom link is invalid", async () => {
+    mockSlugApi(() => ({ body: { slug: "hello-world" } }));
+
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        { type: "paragraph", content: [{ type: "text", text: "Hello world" }] },
+      ],
+    };
+    await editor.updateComplete;
+
+    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 = "bad/slug";
+    slugInput.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.querySelector("[data-compose-slug-error]")?.textContent?.trim(),
+    ).toBe("Use lowercase letters, numbers, and hyphens only.");
+
+    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).toBeNull();
+  });
+
+  it("shows a suggested slug without submitting it by default", async () => {
+    mockSlugApi((url) => {
+      if (url.searchParams.get("mode") === "suggest") {
+        return { body: { slug: "hello-world" } };
+      }
+      throw new Error(`Unexpected slug mode: ${url.search}`);
+    });
+
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    editor._showTitle = true;
+    editor._title = "Hello World";
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        { type: "paragraph", content: [{ type: "text", text: "Hello world" }] },
+      ],
+    };
+    await editor.updateComplete;
+
+    const publishToggle = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      "expected publish settings toggle",
+    );
+    publishToggle.click();
+    await el.updateComplete;
+    await flushUpdates(el);
+
+    expect(
+      el.querySelector(".compose-slug-suggestion-value")?.textContent?.trim(),
+    ).toBe("/hello-world");
+
+    let receivedDetail: ComposeSubmitDetail | null = null;
+    el.addEventListener("jant:compose-submit-deferred", (event) => {
+      receivedDetail = (event as CustomEvent<ComposeSubmitDetail>).detail;
+    });
+
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+      "expected publish button",
+    ).click();
+
+    expect(receivedDetail).not.toBeNull();
+    expect(
+      (receivedDetail as unknown as ComposeSubmitDetail).slug,
+    ).toBeUndefined();
+  });
+
+  it("shows visibility and custom link settings in the publish panel", async () => {
+    const el = await createElement();
+
+    const publishToggle = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      "expected publish settings toggle",
+    );
+    publishToggle.click();
+    await el.updateComplete;
+
+    const panel = requireElement(
+      el.querySelector<HTMLElement>("[data-compose-publish-panel]"),
+      "expected publish settings panel",
+    );
+    expect(panel.textContent).not.toContain("Publish settings");
+    expect(panel.textContent).toContain("Visibility");
+    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-slug-input")).not.toBeNull();
+  });
+
+  it("clears the custom slug with the reset action", async () => {
+    mockSlugApi((url) => {
+      if (url.searchParams.get("mode") === "suggest") {
+        return { body: { slug: "hello-world" } };
+      }
+      if (url.searchParams.get("mode") === "check") {
+        return { body: { slug: "manual-link", 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 = "manual-link";
+    slugInput.dispatchEvent(new Event("input", { bubbles: true }));
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    await el.updateComplete;
+
+    requireElement(
+      Array.from(
+        el.querySelectorAll<HTMLButtonElement>(
+          ".compose-publish-section-action",
+        ),
+      ).find((button) => button.textContent?.includes("Reset link")) ?? null,
+      "expected reset action",
+    ).click();
+    await flushUpdates(el);
+
+    expect(
+      requireElement(
+        el.querySelector<HTMLInputElement>(".compose-publish-slug-input"),
+        "expected custom link input",
+      ).value,
+    ).toBe("");
+  });
+
+  it("does not request or show a suggested slug when no title is available", async () => {
+    const fetchSpy = vi
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async () => {
+        throw new Error(
+          "slug suggestion should not be requested without a title",
+        );
+      });
+
+    const el = await createElement();
+    el._format = "quote";
+    await el.updateComplete;
+
+    const publishToggle = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      "expected publish settings toggle",
+    );
+    publishToggle.click();
+    await el.updateComplete;
+    await flushUpdates(el);
+
+    expect(fetchSpy).not.toHaveBeenCalled();
+    expect(el.querySelector(".compose-slug-suggestion")).toBeNull();
+    expect(el.querySelector(".compose-publish-slug-status")).toBeNull();
+  });
+
+  it("refreshes the suggested slug when the title changes", async () => {
+    vi.useFakeTimers();
+    mockSlugApi((url) => {
+      if (url.searchParams.get("mode") === "suggest") {
+        const title = url.searchParams.get("title");
+        return {
+          body: {
+            slug: title === "Updated Title" ? "updated-title" : "hello-world",
+          },
+        };
+      }
+      throw new Error(`Unexpected slug mode: ${url.search}`);
+    });
+
+    try {
+      const el = await createElement();
+      const editor = requireElement(
+        el.querySelector<JantComposeEditor>("jant-compose-editor"),
+        "expected compose editor",
+      );
+      editor._showTitle = true;
+      editor._title = "Hello World";
+      await editor.updateComplete;
+
+      const publishToggle = requireElement(
+        el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+        "expected publish settings toggle",
+      );
+      publishToggle.click();
+      await el.updateComplete;
+      await flushUpdates(el);
+
+      expect(
+        el.querySelector(".compose-slug-suggestion-value")?.textContent?.trim(),
+      ).toBe("/hello-world");
+
+      editor._title = "Updated Title";
+      el.dispatchEvent(
+        new CustomEvent("jant:compose-content-changed", { bubbles: true }),
+      );
+      await vi.runAllTimersAsync();
+      await flushUpdates(el);
+
+      expect(
+        el.querySelector(".compose-slug-suggestion-value")?.textContent?.trim(),
+      ).toBe("/updated-title");
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("shows an async error when the manual custom link is already taken", async () => {
+    vi.useFakeTimers();
+    mockSlugApi((url) => {
+      if (url.searchParams.get("mode") === "suggest") {
+        return { body: { slug: "hello-world" } };
+      }
+      if (url.searchParams.get("mode") === "check") {
+        return { body: { slug: "taken-link", available: false } };
+      }
+      throw new Error(`Unexpected slug mode: ${url.search}`);
+    });
+
+    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: "Configured post" }],
+          },
+        ],
+      };
+      await editor.updateComplete;
+
+      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 = "taken-link";
+      slugInput.dispatchEvent(new Event("input", { bubbles: true }));
+      await vi.runAllTimersAsync();
+      await el.updateComplete;
+
+      expect(
+        el.querySelector("[data-compose-slug-error]")?.textContent?.trim(),
+      ).toBe("This link is already in use. Choose something else.");
+      expect(
+        requireElement(
+          el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+          "expected publish button",
+        ).disabled,
+      ).toBe(true);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("keeps publish enabled and hides checking status while the custom link check is pending", async () => {
+    vi.useFakeTimers();
+    mockSlugApi((url) => {
+      if (url.searchParams.get("mode") === "check") {
+        return { body: { slug: "pending-link", available: true } };
+      }
+      throw new Error(`Unexpected slug mode: ${url.search}`);
+    });
+
+    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: "Configured post" }],
+          },
+        ],
+      };
+      await editor.updateComplete;
+
+      requireElement(
+        el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+        "expected publish settings toggle",
+      ).click();
+      await el.updateComplete;
+
+      const slugInput = requireElement(
+        el.querySelector<HTMLInputElement>(".compose-publish-slug-input"),
+        "expected custom link input",
+      );
+      slugInput.value = "pending-link";
+      slugInput.dispatchEvent(new Event("input", { bubbles: true }));
+      await el.updateComplete;
+
+      expect(el._slugCheckLoading).toBe(true);
+      expect(
+        requireElement(
+          el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+          "expected publish button",
+        ).disabled,
+      ).toBe(false);
+      expect(el.textContent).not.toContain("Checking link...");
+      expect(el.querySelector("[data-compose-slug-error]")).toBeNull();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("shows the final post link preview while editing a valid custom link", async () => {
+    mockSlugApi((url) => {
+      if (url.searchParams.get("mode") === "check") {
+        return { body: { slug: "final-link", available: true } };
+      }
+      throw new Error(`Unexpected slug mode: ${url.search}`);
+    });
+
+    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: "Configured post" }],
+        },
+      ],
+    };
+    await editor.updateComplete;
+
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-toggle"),
+      "expected publish settings toggle",
+    ).click();
+    await el.updateComplete;
+
+    const slugInput = requireElement(
+      el.querySelector<HTMLInputElement>(".compose-publish-slug-input"),
+      "expected custom link input",
+    );
+    slugInput.value = "final-link";
+    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`);
+  });
+
+  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("omits visibility from locked edit submissions", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+
+    el._editPostId = "post-123";
+    el._visibilityLocked = true;
+    el._slug = "reply-note";
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "Edited reply" }],
+        },
+      ],
+    };
+    await editor.updateComplete;
+    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();
+    expect(
+      (receivedDetail as unknown as ComposeSubmitDetail).visibility,
+    ).toBeUndefined();
+    expect((receivedDetail as unknown as ComposeSubmitDetail).slug).toBe(
+      "reply-note",
+    );
+  });
+
+  it("collection selector toggles IDs", async () => {
+    const el = await createElement();
+
+    // Open collection combobox
+    const trigger = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-collection-trigger"),
+      "expected collection trigger",
+    );
+    trigger.click();
+    await el.updateComplete;
+
+    const options = el.querySelectorAll<HTMLElement>(
+      "[data-popover] [role='option']",
+    );
+    expect(options.length).toBe(2);
+
+    // Select first collection
+    options[0].click();
+    await el.updateComplete;
+    expect(el._collectionIds).toEqual(["col-1"]);
+    expect(
+      el.querySelector(".compose-collection-label")?.textContent?.trim(),
+    ).toBe("Books");
+    expect(
+      options[0]?.querySelector(".compose-collection-option-label"),
+    ).not.toBeNull();
+
+    // Select second collection
+    options[1].click();
+    await el.updateComplete;
+    expect(el._collectionIds).toEqual(["col-1", "col-2"]);
+
+    // Deselect first
+    options[0].click();
+    await el.updateComplete;
+    expect(el._collectionIds).toEqual(["col-2"]);
+  });
+
+  it("reset restores initial state", async () => {
+    const el = await createElement();
+    el._format = "link";
+    el._collectionIds = ["col-1", "col-2"];
+    el._loading = true;
+    el._draftSourceId = "abc123";
+
+    el.reset();
+
+    expect(el._format).toBe("note");
+    expect(el._collectionIds).toEqual([]);
+    expect(el._loading).toBe(false);
+    expect(el._draftSourceId).toBeNull();
+  });
+
+  it("loading state disables submit button", async () => {
+    const el = await createElement();
+    el._loading = true;
+    await el.updateComplete;
+
+    const postBtn = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+      "expected post button",
+    );
+    expect(postBtn.disabled).toBe(true);
+  });
+
+  it("renders collection selector even without collections", async () => {
+    const el = await createElement([]);
+
+    // Collection trigger is still shown so users can create new collections
+    expect(el.querySelector(".compose-collection-trigger")).not.toBeNull();
+    const actionRow = el.querySelector(".compose-action-row");
+    expect(actionRow).not.toBeNull();
+  });
+
+  it("refreshes collections from the compose-sorted endpoint", async () => {
+    const el = await createElement([{ id: "col-1", title: "Books" }]);
+    const fetchSpy = vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(
+        JSON.stringify({
+          collections: [
+            { id: "col-2", title: "Movies" },
+            { id: "col-1", title: "Books" },
+          ],
+        }),
+        {
+          status: 200,
+          headers: { "Content-Type": "application/json" },
+        },
+      ),
+    );
+
+    const refreshed = await el.refreshCollections();
+
+    expect(refreshed).toBe(true);
+    expect(fetchSpy).toHaveBeenCalledWith("/api/collections?view=compose", {
+      headers: { Accept: "application/json" },
+    });
+    expect(el.collections).toEqual([
+      { id: "col-2", title: "Movies" },
+      { id: "col-1", title: "Books" },
+    ]);
+  });
+
+  it("opens a quick collection dialog from the collection selector", async () => {
+    const el = await createElement();
+    const trigger = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-collection-trigger"),
+      "expected collection trigger",
+    );
+
+    trigger.click();
+    await el.updateComplete;
+
+    const addAction = requireElement(
+      el.querySelector<HTMLElement>(".compose-collection-add-action"),
+      "expected add collection action",
+    );
+    addAction.click();
+    await el.updateComplete;
+
+    const composeInner = requireElement(
+      el.querySelector<HTMLElement>(".compose-dialog-inner"),
+      "expected compose dialog inner",
+    );
+    expect(el.querySelector("[data-collection-quick-dialog]")).not.toBeNull();
+    expect(
+      composeInner.classList.contains("compose-dialog-inner-suspended"),
+    ).toBe(true);
+    expect(composeInner.getAttribute("aria-hidden")).toBe("true");
+    expect(
+      el.querySelector("[data-collection-quick-dialog] textarea"),
+    ).toBeNull();
+    expect(
+      el.querySelector("[data-collection-quick-dialog] select"),
+    ).toBeNull();
+    expect(
+      el.querySelector("[data-collection-quick-dialog] [data-icon-trigger]"),
+    ).toBeNull();
+    expect(
+      el.querySelector(
+        "[data-collection-quick-dialog] [data-collection-slug-input]",
+      ),
+    ).toBeNull();
+    expect(
+      el.querySelector(
+        "[data-collection-quick-dialog] .collection-quick-dialog-cancel",
+      )?.textContent,
+    ).toContain("Cancel");
+    expect(
+      el.querySelector(
+        "[data-collection-quick-dialog] .collection-quick-dialog-submit",
+      )?.textContent,
+    ).toContain("Done");
+    expect(el.textContent).toContain(
+      "More options are available after you create it.",
+    );
+
+    requireElement(
+      el.querySelector<HTMLButtonElement>(
+        "[data-collection-quick-dialog] .collection-quick-dialog-cancel",
+      ),
+      "expected quick dialog cancel button",
+    ).click();
+    await flushUpdates(el);
+
+    expect(el.querySelector("[data-collection-quick-dialog]")).toBeNull();
+    expect(
+      composeInner.classList.contains("compose-dialog-inner-suspended"),
+    ).toBe(false);
+    expect(composeInner.getAttribute("aria-hidden")).toBe("false");
+  });
+
+  it("restores compose after creating a collection from the quick dialog", async () => {
+    const el = await createElement();
+    const trigger = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-collection-trigger"),
+      "expected collection trigger",
+    );
+
+    trigger.click();
+    await el.updateComplete;
+
+    requireElement(
+      el.querySelector<HTMLElement>(".compose-collection-add-action"),
+      "expected add collection action",
+    ).click();
+    await el.updateComplete;
+
+    const fetchSpy = vi
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async (input, init) => {
+        const raw =
+          typeof input === "string"
+            ? input
+            : input instanceof URL
+              ? input.toString()
+              : input.url;
+        const url = new URL(raw, "http://localhost");
+        const method =
+          init?.method ??
+          (typeof input === "string" || input instanceof URL
+            ? "GET"
+            : input.method);
+
+        if (url.pathname === "/api/collections" && method === "POST") {
+          return new Response(
+            JSON.stringify({ id: "col-3", title: "Travel" }),
+            {
+              status: 200,
+              headers: { "Content-Type": "application/json" },
+            },
+          );
+        }
+
+        if (
+          url.pathname === "/api/collections" &&
+          url.searchParams.get("view") === "compose"
+        ) {
+          return new Response(
+            JSON.stringify({
+              collections: [
+                { id: "col-3", title: "Travel" },
+                { id: "col-1", title: "Books" },
+                { id: "col-2", title: "Movies" },
+              ],
+            }),
+            {
+              status: 200,
+              headers: { "Content-Type": "application/json" },
+            },
+          );
+        }
+
+        throw new Error(`Unexpected fetch: ${url.pathname}${url.search}`);
+      });
+
+    const form = requireElement(
+      el.querySelector<HTMLElement>(
+        "[data-collection-quick-dialog] jant-collection-form",
+      ),
+      "expected quick collection form",
+    );
+    form.dispatchEvent(
+      new CustomEvent("jant:collection-submit", {
+        bubbles: true,
+        detail: {
+          data: {
+            title: "Travel",
+            slug: "travel",
+            description: "",
+            sortOrder: "newest",
+            icon: "",
+          },
+        },
+      }),
+    );
+
+    await vi.waitFor(() => {
+      expect(el.querySelector("[data-collection-quick-dialog]")).toBeNull();
+    });
+
+    const composeInner = requireElement(
+      el.querySelector<HTMLElement>(".compose-dialog-inner"),
+      "expected compose dialog inner",
+    );
+    expect(fetchSpy).toHaveBeenCalled();
+    expect(el.querySelector("[data-collection-quick-dialog]")).toBeNull();
+    expect(
+      composeInner.classList.contains("compose-dialog-inner-suspended"),
+    ).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" },
+    ]);
+  });
+
+  it("draft button with content shows confirm panel", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "Draft content" }],
+        },
+      ],
+    };
+    await editor.updateComplete;
+
+    // Click the draft header button — should show confirm panel
+    const draftBtn = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-dialog-header-btn"),
+      "expected draft button",
+    );
+    draftBtn.click();
+    await el.updateComplete;
+
+    expect(el._confirmPanelOpen).toBe(true);
+    expect(el.querySelector(".compose-confirm-panel")).not.toBeNull();
+  });
+
+  it("draft button without content opens drafts panel", async () => {
+    const el = await createElement();
+
+    // Mock fetch for drafts list
+    const fetchSpy = vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(JSON.stringify({ posts: [] }), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+
+    // Click the draft header button — should open drafts panel
+    const draftBtn = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-dialog-header-btn"),
+      "expected draft button",
+    );
+    draftBtn.click();
+    await el.updateComplete;
+
+    expect(el._draftsPanelOpen).toBe(true);
+
+    // Wait for fetch to resolve
+    await new Promise((r) => setTimeout(r, 0));
+    await el.updateComplete;
+
+    expect(el._draftsLoading).toBe(false);
+    expect(el.querySelector(".compose-drafts-panel")).not.toBeNull();
+
+    fetchSpy.mockRestore();
+  });
+
+  it("does not dispatch submit when loading", async () => {
+    const el = await createElement();
+    el._loading = true;
+    await el.updateComplete;
+
+    let dispatched = false;
+    el.addEventListener("jant:compose-submit-deferred", () => {
+      dispatched = true;
+    });
+
+    const postBtn = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+      "expected post button",
+    );
+    postBtn.click();
+
+    expect(dispatched).toBe(false);
+  });
+
+  it("loading state shows spinner in submit button", async () => {
+    const el = await createElement();
+    el._loading = true;
+    await el.updateComplete;
+
+    const spinner = el.querySelector(".compose-publish-main .animate-spin");
+    expect(spinner).not.toBeNull();
+  });
+
+  it("no old media picker dialog is rendered", async () => {
+    const el = await createElement();
+
+    expect(el.querySelector("#compose-media-picker")).toBeNull();
+    expect(el.querySelector(".compose-media-picker")).toBeNull();
+  });
+
+  it("editor renders attachments when present", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+
+    // Simulate adding an attachment
+    const blob = new Blob(["fake-image"], { type: "image/png" });
+    const file = new File([blob], "test.png", { type: "image/png" });
+    const previewUrl = URL.createObjectURL(blob);
+
+    editor._attachments = [
+      {
+        clientId: "test-id-1",
+        file,
+        previewUrl,
+        status: "done",
+        progress: null,
+        mediaId: "media-1",
+        alt: "",
+        error: null,
+        summary: null,
+        chars: null,
+      },
+    ];
+    editor._attachmentOrder = ["test-id-1"];
+    await editor.updateComplete;
+
+    // Thumbnail strip should be visible
+    expect(editor.querySelector(".compose-attachments")).not.toBeNull();
+    expect(editor.querySelector(".compose-attachment-thumb")).not.toBeNull();
+    // ALT button should be visible
+    expect(editor.querySelector(".compose-attachment-alt")).not.toBeNull();
+    // Media tool button should show inline "Add" label
+    const mediaBtn =
+      editor.querySelector<HTMLButtonElement>(".compose-tool-btn");
+    expect(mediaBtn?.querySelector(".compose-tool-label")?.textContent).toBe(
+      "Add",
+    );
+
+    URL.revokeObjectURL(previewUrl);
+  });
+
+  it("remove button clears attachment", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+
+    const blob = new Blob(["fake-image"], { type: "image/png" });
+    const file = new File([blob], "test.png", { type: "image/png" });
+    const previewUrl = URL.createObjectURL(blob);
+
+    editor._attachments = [
+      {
+        clientId: "test-id-1",
+        file,
+        previewUrl,
+        status: "done",
+        progress: null,
+        mediaId: "media-1",
+        alt: "",
+        error: null,
+        summary: null,
+        chars: null,
+      },
+    ];
+    editor._attachmentOrder = ["test-id-1"];
+    await editor.updateComplete;
+
+    // Click remove button
+    const removeBtn = requireElement(
+      editor.querySelector<HTMLButtonElement>(".compose-attachment-remove"),
+      "expected remove button",
+    );
+    removeBtn.click();
+    await editor.updateComplete;
+
+    // Attachment strip should be gone (no attachments)
+    expect(editor.querySelector(".compose-attachments")).toBeNull();
+    expect(editor._attachments.length).toBe(0);
+  });
+
+  it("alt panel opens and closes", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+
+    const blob = new Blob(["fake-image"], { type: "image/png" });
+    const file = new File([blob], "test.png", { type: "image/png" });
+    const previewUrl = URL.createObjectURL(blob);
+
+    editor._attachments = [
+      {
+        clientId: "test-id-1",
+        file,
+        previewUrl,
+        status: "done",
+        progress: null,
+        mediaId: "media-1",
+        alt: "",
+        error: null,
+        summary: null,
+        chars: null,
+      },
+    ];
+    editor._attachmentOrder = ["test-id-1"];
+    await editor.updateComplete;
+
+    // Click ALT button
+    const altBtn = requireElement(
+      editor.querySelector<HTMLButtonElement>(".compose-attachment-alt"),
+      "expected alt button",
+    );
+    altBtn.click();
+    await editor.updateComplete;
+    await el.updateComplete;
+
+    // Alt panel should be visible in the dialog (covers entire dialog)
+    expect(el.querySelector(".compose-alt-panel")).not.toBeNull();
+    expect(editor._showAltPanel).toBe(true);
+
+    // Click done to close
+    const doneBtn = el.querySelector<HTMLButtonElement>(
+      ".compose-alt-panel .compose-post-btn",
+    );
+    doneBtn?.click();
+    await el.updateComplete;
+
+    expect(editor._showAltPanel).toBe(true); // Editor still tracks its own state
+    expect(el.querySelector(".compose-alt-panel")).toBeNull();
+
+    URL.revokeObjectURL(previewUrl);
+  });
+
+  it("submit includes ordered attachment inputs from completed attachments", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+
+    const blob = new Blob(["fake-image"], { type: "image/png" });
+    const file = new File([blob], "test.png", { type: "image/png" });
+    const previewUrl = URL.createObjectURL(blob);
+
+    editor._attachments = [
+      {
+        clientId: "test-id-1",
+        file,
+        previewUrl,
+        status: "done",
+        progress: null,
+        mediaId: "media-1",
+        alt: "A test image",
+        error: null,
+        summary: null,
+        chars: null,
+      },
+    ];
+    editor._attachmentOrder = ["test-id-1"];
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "Post with image" }],
+        },
+      ],
+    };
+    await editor.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 post button",
+    ).click();
+
+    expect(receivedDetail).not.toBeNull();
+    const detail = receivedDetail as unknown as ComposeSubmitDetail & {
+      pendingAttachments: unknown[];
+    };
+    expect(detail.attachments).toEqual([
+      {
+        type: "media",
+        clientId: "test-id-1",
+        mediaId: "media-1",
+        alt: "A test image",
+      },
+    ]);
+    expect(detail.pendingAttachments).toEqual([]);
+
+    URL.revokeObjectURL(previewUrl);
+  });
+
+  it("dispatches deferred submit when uploads are pending", async () => {
     const el = await createElement();
     const editor = requireElement(
       el.querySelector<JantComposeEditor>("jant-compose-editor"),
       "expected compose editor",
     );
 
-    // Simulate adding an attachment
     const blob = new Blob(["fake-image"], { type: "image/png" });
     const file = new File([blob], "test.png", { type: "image/png" });
     const previewUrl = URL.createObjectURL(blob);
 
-    editor._attachments = [
-      {
-        clientId: "test-id-1",
-        file,
-        previewUrl,
-        status: "done",
-        progress: null,
-        mediaId: "media-1",
-        alt: "",
-        error: null,
-        summary: null,
-        chars: null,
-      },
-    ];
-    editor._attachmentOrder = ["test-id-1"];
+    editor._attachments = [
+      {
+        clientId: "test-id-1",
+        file,
+        previewUrl,
+        status: "uploading",
+        progress: null,
+        mediaId: null,
+        alt: "Alt for pending",
+        error: null,
+        summary: null,
+        chars: null,
+      },
+    ];
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "Post with pending upload" }],
+        },
+      ],
+    };
+    await editor.updateComplete;
+
+    let deferredEvent: CustomEvent | null = null;
+    el.addEventListener("jant:compose-submit-deferred", (event) => {
+      deferredEvent = event as CustomEvent;
+    });
+
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+      "expected post button",
+    ).click();
+
+    expect(deferredEvent).not.toBeNull();
+    expect(
+      (deferredEvent as unknown as CustomEvent).detail.pendingAttachments,
+    ).toHaveLength(1);
+
+    URL.revokeObjectURL(previewUrl);
+  });
+
+  // ── Close confirmation ─────────────────────────────────────────────
+
+  it("requestClose on empty form closes immediately without confirmation", async () => {
+    const el = await createElement();
+
+    // Ensure no confirmation panel appears
+    el.requestClose();
+    await el.updateComplete;
+
+    expect(el._confirmPanelOpen).toBe(false);
+    expect(el.querySelector(".compose-confirm-panel")).toBeNull();
+  });
+
+  it("requestClose on empty form clears opener focus after closing", async () => {
+    const el = await createElement();
+    const trigger = document.createElement("button");
+    trigger.type = "button";
+    document.body.appendChild(trigger);
+
+    const dialog = document.createElement("dialog");
+    const closeSpy = vi.spyOn(dialog, "close");
+    const closestSpy = vi
+      .spyOn(el, "closest")
+      .mockImplementation((selector: string) =>
+        selector === "dialog"
+          ? dialog
+          : HTMLElement.prototype.closest.call(el, selector),
+      );
+
+    trigger.focus();
+    const blurSpy = vi.spyOn(trigger, "blur");
+
+    el.requestClose();
+    await el.updateComplete;
+
+    expect(closeSpy).toHaveBeenCalledTimes(1);
+    expect(blurSpy).toHaveBeenCalledTimes(1);
+    expect(document.activeElement).not.toBe(trigger);
+
+    closestSpy.mockRestore();
+  });
+
+  it("treats dialog backdrop clicks as close requests", async () => {
+    const el = await createElement();
+    const dialog = document.createElement("dialog");
+    const requestCloseSpy = vi.spyOn(el, "requestClose");
+    (
+      el as unknown as {
+        _dialogEl: HTMLDialogElement | null;
+        _handleDialogClick: (event: Event) => void;
+      }
+    )._dialogEl = dialog;
+    vi.spyOn(document, "elementFromPoint").mockReturnValue(dialog);
+
+    (
+      el as unknown as {
+        _handleDialogClick: (event: Event) => void;
+      }
+    )._handleDialogClick({
+      target: dialog,
+      clientX: 24,
+      clientY: 24,
+    } as unknown as Event);
+
+    expect(requestCloseSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("ignores backdrop clicks that actually land on editor floating UI", async () => {
+    const el = await createElement();
+    const dialog = document.createElement("dialog");
+    const requestCloseSpy = vi.spyOn(el, "requestClose");
+    const floatingUi = document.createElement("div");
+    floatingUi.setAttribute("data-editor-floating-ui", "true");
+    (
+      el as unknown as {
+        _dialogEl: HTMLDialogElement | null;
+        _handleDialogClick: (event: Event) => void;
+      }
+    )._dialogEl = dialog;
+    vi.spyOn(document, "elementFromPoint").mockReturnValue(floatingUi);
+
+    (
+      el as unknown as {
+        _handleDialogClick: (event: Event) => void;
+      }
+    )._handleDialogClick({
+      target: dialog,
+      clientX: 24,
+      clientY: 24,
+    } as unknown as Event);
+
+    expect(requestCloseSpy).not.toHaveBeenCalled();
+  });
+
+  it("beforeunload does not warn when dialog was only opened", async () => {
+    const el = await createElement();
+    vi.spyOn(el, "closest").mockReturnValue({
+      open: true,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    } as unknown as HTMLDialogElement);
+
+    const event = new Event("beforeunload", {
+      cancelable: true,
+    }) as globalThis.BeforeUnloadEvent;
+
+    window.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(false);
+    expect(
+      (
+        el as unknown as { _hasUnsavedChanges: () => boolean }
+      )._hasUnsavedChanges(),
+    ).toBe(false);
+  });
+
+  it("beforeunload does not warn after switching to link without entering content", async () => {
+    const el = await createElement();
+    vi.spyOn(el, "closest").mockReturnValue({
+      open: true,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    } as unknown as HTMLDialogElement);
+
+    el._format = "link";
+    await flushUpdates(el);
+
+    const event = new Event("beforeunload", {
+      cancelable: true,
+    }) as globalThis.BeforeUnloadEvent;
+
+    window.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(false);
+    expect(
+      (
+        el as unknown as { _hasUnsavedChanges: () => boolean }
+      )._hasUnsavedChanges(),
+    ).toBe(false);
+  });
+
+  it("beforeunload does not warn after switching to quote without entering content", async () => {
+    const el = await createElement();
+    vi.spyOn(el, "closest").mockReturnValue({
+      open: true,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    } as unknown as HTMLDialogElement);
+
+    el._format = "quote";
+    await flushUpdates(el);
+
+    const event = new Event("beforeunload", {
+      cancelable: true,
+    }) as globalThis.BeforeUnloadEvent;
+
+    window.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(false);
+    expect(
+      (
+        el as unknown as { _hasUnsavedChanges: () => boolean }
+      )._hasUnsavedChanges(),
+    ).toBe(false);
+  });
+
+  it("ignores empty attached text placeholders when checking unsaved changes", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+
+    editor._attachedTexts = [
+      {
+        clientId: "t1",
+        bodyJson: null,
+        bodyHtml: "",
+        summary: "",
+      },
+    ];
+    editor._attachmentOrder = ["t1"];
+    await editor.updateComplete;
+
+    expect(
+      (
+        el as unknown as { _hasUnsavedChanges: () => boolean }
+      )._hasUnsavedChanges(),
+    ).toBe(false);
+  });
+
+  it("beforeunload warns after compose content changes", async () => {
+    const el = await createElement();
+    vi.spyOn(el, "closest").mockReturnValue({
+      open: true,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    } as unknown as HTMLDialogElement);
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        { type: "paragraph", content: [{ type: "text", text: "Unsaved" }] },
+      ],
+    };
     await editor.updateComplete;
 
-    // Thumbnail strip should be visible
-    expect(editor.querySelector(".compose-attachments")).not.toBeNull();
-    expect(editor.querySelector(".compose-attachment-thumb")).not.toBeNull();
-    // ALT button should be visible
-    expect(editor.querySelector(".compose-attachment-alt")).not.toBeNull();
-    // Media tool button should show inline "Add" label
-    const mediaBtn =
-      editor.querySelector<HTMLButtonElement>(".compose-tool-btn");
-    expect(mediaBtn?.querySelector(".compose-tool-label")?.textContent).toBe(
-      "Add",
+    const event = new Event("beforeunload", {
+      cancelable: true,
+    }) as globalThis.BeforeUnloadEvent;
+
+    window.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it("ignores native dialog cancel right after file picker cancel", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
     );
 
-    URL.revokeObjectURL(previewUrl);
+    editor.dispatchEvent(
+      new CustomEvent("jant:file-picker-open", {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    editor.dispatchEvent(
+      new CustomEvent("jant:file-picker-close", {
+        bubbles: true,
+        composed: true,
+        detail: { cancelled: true },
+      }),
+    );
+
+    const requestCloseSpy = vi.spyOn(el, "requestClose");
+    const cancelEvent = new Event("cancel", {
+      cancelable: true,
+    });
+
+    (
+      el as unknown as {
+        _handleDialogCancel: (event: Event) => void;
+      }
+    )._handleDialogCancel(cancelEvent);
+
+    expect(cancelEvent.defaultPrevented).toBe(true);
+    expect(requestCloseSpy).not.toHaveBeenCalled();
   });
 
-  it("remove button clears attachment", async () => {
+  it("ignores Escape right after file picker cancel", async () => {
     const el = await createElement();
     const editor = requireElement(
       el.querySelector<JantComposeEditor>("jant-compose-editor"),
       "expected compose editor",
     );
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "Keep open" }],
+        },
+      ],
+    };
+    await editor.updateComplete;
+
+    editor.dispatchEvent(
+      new CustomEvent("jant:file-picker-open", {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    editor.dispatchEvent(
+      new CustomEvent("jant:file-picker-close", {
+        bubbles: true,
+        composed: true,
+        detail: { cancelled: true },
+      }),
+    );
 
-    const blob = new Blob(["fake-image"], { type: "image/png" });
-    const file = new File([blob], "test.png", { type: "image/png" });
-    const previewUrl = URL.createObjectURL(blob);
+    el.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Escape",
+        bubbles: true,
+      }),
+    );
+    await el.updateComplete;
 
-    editor._attachments = [
-      {
-        clientId: "test-id-1",
-        file,
-        previewUrl,
-        status: "done",
-        progress: null,
-        mediaId: "media-1",
-        alt: "",
-        error: null,
-        summary: null,
-        chars: null,
-      },
-    ];
-    editor._attachmentOrder = ["test-id-1"];
+    expect(el._confirmPanelOpen).toBe(false);
+  });
+
+  it("still closes normally after file picker selection", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "Close after selecting" }],
+        },
+      ],
+    };
     await editor.updateComplete;
 
-    // Click remove button
-    const removeBtn = requireElement(
-      editor.querySelector<HTMLButtonElement>(".compose-attachment-remove"),
-      "expected remove button",
+    editor.dispatchEvent(
+      new CustomEvent("jant:file-picker-open", {
+        bubbles: true,
+        composed: true,
+      }),
     );
-    removeBtn.click();
+    editor.dispatchEvent(
+      new CustomEvent("jant:file-picker-close", {
+        bubbles: true,
+        composed: true,
+        detail: { cancelled: false },
+      }),
+    );
+
+    el.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Escape",
+        bubbles: true,
+      }),
+    );
+    await el.updateComplete;
+
+    expect(el._confirmPanelOpen).toBe(true);
+  });
+
+  it("clears file picker Escape suppression after pointer interaction", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "Close after clicking back" }],
+        },
+      ],
+    };
     await editor.updateComplete;
 
-    // Attachment strip should be gone (no attachments)
-    expect(editor.querySelector(".compose-attachments")).toBeNull();
-    expect(editor._attachments.length).toBe(0);
+    editor.dispatchEvent(
+      new CustomEvent("jant:file-picker-open", {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    editor.dispatchEvent(
+      new CustomEvent("jant:file-picker-close", {
+        bubbles: true,
+        composed: true,
+        detail: { cancelled: true },
+      }),
+    );
+
+    el.dispatchEvent(
+      new globalThis.PointerEvent("pointerdown", {
+        bubbles: true,
+      }),
+    );
+    el.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Escape",
+        bubbles: true,
+      }),
+    );
+    await el.updateComplete;
+
+    expect(el._confirmPanelOpen).toBe(true);
   });
 
-  it("alt panel opens and closes", async () => {
+  it("clears file picker Escape suppression after non-Escape key input", async () => {
     const el = await createElement();
     const editor = requireElement(
       el.querySelector<JantComposeEditor>("jant-compose-editor"),
       "expected compose editor",
     );
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "Close after typing again" }],
+        },
+      ],
+    };
+    await editor.updateComplete;
 
-    const blob = new Blob(["fake-image"], { type: "image/png" });
-    const file = new File([blob], "test.png", { type: "image/png" });
-    const previewUrl = URL.createObjectURL(blob);
+    editor.dispatchEvent(
+      new CustomEvent("jant:file-picker-open", {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    editor.dispatchEvent(
+      new CustomEvent("jant:file-picker-close", {
+        bubbles: true,
+        composed: true,
+        detail: { cancelled: true },
+      }),
+    );
 
-    editor._attachments = [
-      {
-        clientId: "test-id-1",
-        file,
-        previewUrl,
-        status: "done",
-        progress: null,
-        mediaId: "media-1",
-        alt: "",
-        error: null,
-        summary: null,
-        chars: null,
-      },
-    ];
-    editor._attachmentOrder = ["test-id-1"];
+    el.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "a",
+        bubbles: true,
+      }),
+    );
+    el.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Escape",
+        bubbles: true,
+      }),
+    );
+    await el.updateComplete;
+
+    expect(el._confirmPanelOpen).toBe(true);
+  });
+
+  it("Escape cancels slash commands without opening the close confirmation", 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("/");
+    await flushUpdates(el);
+
+    expect(document.querySelector(".tiptap-slash-menu")).not.toBeNull();
+
+    const requestCloseSpy = vi.spyOn(el, "requestClose");
+    const escapeEvent = new globalThis.KeyboardEvent("keydown", {
+      key: "Escape",
+      bubbles: true,
+      cancelable: true,
+    });
+    tiptap.view.dom.dispatchEvent(escapeEvent);
+    await flushUpdates(el);
+
+    expect(escapeEvent.defaultPrevented).toBe(true);
+    expect(requestCloseSpy).not.toHaveBeenCalled();
+    expect(el._confirmPanelOpen).toBe(false);
+    expect(document.querySelector(".tiptap-slash-menu")).toBeNull();
+    expect(tiptap.getText()).toBe("");
+  });
+
+  it("shows a clear empty state when slash commands have no matches", 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("/zzz");
+    await flushUpdates(el);
+
+    const menu = requireElement(
+      document.querySelector<HTMLElement>(".tiptap-slash-menu"),
+      "expected slash menu",
+    );
+    expect(menu.querySelectorAll(".tiptap-slash-item")).toHaveLength(0);
+    expect(
+      requireElement(
+        menu.querySelector<HTMLElement>(".tiptap-slash-empty"),
+        "expected slash empty state",
+      ).textContent,
+    ).toContain("No matches. Try another command.");
+
+    const requestCloseSpy = vi.spyOn(el, "requestClose");
+    const enterEvent = new globalThis.KeyboardEvent("keydown", {
+      key: "Enter",
+      bubbles: true,
+      cancelable: true,
+    });
+    tiptap.view.dom.dispatchEvent(enterEvent);
+    await flushUpdates(el);
+
+    expect(enterEvent.defaultPrevented).toBe(true);
+    expect(requestCloseSpy).not.toHaveBeenCalled();
+    expect(el._confirmPanelOpen).toBe(false);
+    expect(tiptap.getText()).toBe("/zzz");
+  });
+
+  it("dialog cancel closes the emoji picker before prompting to save", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        { type: "paragraph", content: [{ type: "text", text: "Keep typing" }] },
+      ],
+    };
+    editor._showEmojiPicker = true;
     await editor.updateComplete;
 
-    // Click ALT button
-    const altBtn = requireElement(
-      editor.querySelector<HTMLButtonElement>(".compose-attachment-alt"),
-      "expected alt button",
+    const closeEmojiPickerSpy = vi.spyOn(editor, "closeEmojiPicker");
+    const focusSpy = vi.spyOn(editor, "focusInput");
+
+    (
+      el as unknown as {
+        _handleDialogCancel: (event: Event) => void;
+      }
+    )._handleDialogCancel(new Event("cancel", { cancelable: true }));
+    await flushUpdates(el);
+
+    expect(closeEmojiPickerSpy).toHaveBeenCalledWith({ restoreFocus: true });
+    expect(el._confirmPanelOpen).toBe(false);
+    expect(focusSpy).toHaveBeenCalledWith("end");
+  });
+
+  it("dialog cancel closes the collection selector and keeps selected collections", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
     );
-    altBtn.click();
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        { type: "paragraph", content: [{ type: "text", text: "Tagged post" }] },
+      ],
+    };
+    el._showCollection = true;
+    el._collectionIds = ["col-1"];
     await editor.updateComplete;
-    await el.updateComplete;
-
-    // Alt panel should be visible in the dialog (covers entire dialog)
-    expect(el.querySelector(".compose-alt-panel")).not.toBeNull();
-    expect(editor._showAltPanel).toBe(true);
 
-    // Click done to close
-    const doneBtn = el.querySelector<HTMLButtonElement>(
-      ".compose-alt-panel .compose-post-btn",
-    );
-    doneBtn?.click();
-    await el.updateComplete;
+    const focusSpy = vi.spyOn(editor, "focusInput");
 
-    expect(editor._showAltPanel).toBe(true); // Editor still tracks its own state
-    expect(el.querySelector(".compose-alt-panel")).toBeNull();
+    (
+      el as unknown as {
+        _handleDialogCancel: (event: Event) => void;
+      }
+    )._handleDialogCancel(new Event("cancel", { cancelable: true }));
+    await flushUpdates(el);
 
-    URL.revokeObjectURL(previewUrl);
+    expect(el._showCollection).toBe(false);
+    expect(el._collectionIds).toEqual(["col-1"]);
+    expect(el._confirmPanelOpen).toBe(false);
+    expect(focusSpy).toHaveBeenCalledWith("end");
   });
 
-  it("submit includes mediaIds and mediaAlts from completed attachments", async () => {
+  it("dialog cancel closes publish settings and returns focus to the editor", async () => {
     const el = await createElement();
     const editor = requireElement(
       el.querySelector<JantComposeEditor>("jant-compose-editor"),
       "expected compose editor",
     );
-
-    const blob = new Blob(["fake-image"], { type: "image/png" });
-    const file = new File([blob], "test.png", { type: "image/png" });
-    const previewUrl = URL.createObjectURL(blob);
-
-    editor._attachments = [
-      {
-        clientId: "test-id-1",
-        file,
-        previewUrl,
-        status: "done",
-        progress: null,
-        mediaId: "media-1",
-        alt: "A test image",
-        error: null,
-        summary: null,
-        chars: null,
-      },
-    ];
     editor._bodyJson = {
       type: "doc",
       content: [
         {
           type: "paragraph",
-          content: [{ type: "text", text: "Post with image" }],
+          content: [{ type: "text", text: "Publish panel content" }],
         },
       ],
     };
+    el._showPublishPanel = true;
     await editor.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 post button",
-    ).click();
+    const focusSpy = vi.spyOn(editor, "focusInput");
 
-    expect(receivedDetail).not.toBeNull();
-    const detail = receivedDetail as unknown as ComposeSubmitDetail & {
-      pendingAttachments: unknown[];
-    };
-    expect(detail.mediaIds).toEqual(["media-1"]);
-    expect(detail.mediaAlts).toEqual({ "media-1": "A test image" });
-    expect(detail.pendingAttachments).toEqual([]);
+    (
+      el as unknown as {
+        _handleDialogCancel: (event: Event) => void;
+      }
+    )._handleDialogCancel(new Event("cancel", { cancelable: true }));
+    await flushUpdates(el);
 
-    URL.revokeObjectURL(previewUrl);
+    expect(el._showPublishPanel).toBe(false);
+    expect(el._confirmPanelOpen).toBe(false);
+    expect(focusSpy).toHaveBeenCalledWith("end");
   });
 
-  it("dispatches deferred submit when uploads are pending", async () => {
+  it("requestClose with content shows confirmation panel", async () => {
     const el = await createElement();
     const editor = requireElement(
       el.querySelector<JantComposeEditor>("jant-compose-editor"),
       "expected compose editor",
     );
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        { type: "paragraph", content: [{ type: "text", text: "Some text" }] },
+      ],
+    };
+    await editor.updateComplete;
 
-    const blob = new Blob(["fake-image"], { type: "image/png" });
-    const file = new File([blob], "test.png", { type: "image/png" });
-    const previewUrl = URL.createObjectURL(blob);
+    el.requestClose();
+    await el.updateComplete;
 
-    editor._attachments = [
-      {
-        clientId: "test-id-1",
-        file,
-        previewUrl,
-        status: "uploading",
-        progress: null,
-        mediaId: null,
-        alt: "Alt for pending",
-        error: null,
-        summary: null,
-        chars: null,
-      },
-    ];
+    expect(el._confirmPanelOpen).toBe(true);
+    expect(el.querySelector(".compose-confirm-panel")).not.toBeNull();
+    expect(
+      el.querySelector(".compose-confirm-title")?.textContent?.trim(),
+    ).toBe("Save to drafts?");
+  });
+
+  it("Cmd/Ctrl+Enter publishes from the main compose editor", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
     editor._bodyJson = {
       type: "doc",
       content: [
         {
           type: "paragraph",
-          content: [{ type: "text", text: "Post with pending upload" }],
+          content: [{ type: "text", text: "Publish from shortcut" }],
         },
       ],
     };
     await editor.updateComplete;
 
-    let deferredEvent: CustomEvent | null = null;
-    el.addEventListener("jant:compose-submit-deferred", (event) => {
-      deferredEvent = event as CustomEvent;
-    });
-
-    requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-publish-main"),
-      "expected post button",
-    ).click();
+    const submitSpy = vi.spyOn(
+      el as unknown as { _submit: (status: "published" | "draft") => void },
+      "_submit",
+    );
 
-    expect(deferredEvent).not.toBeNull();
-    expect(
-      (deferredEvent as unknown as CustomEvent).detail.pendingAttachments,
-    ).toHaveLength(1);
+    el.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Enter",
+        metaKey: true,
+        bubbles: true,
+      }),
+    );
 
-    URL.revokeObjectURL(previewUrl);
+    expect(submitSpy).toHaveBeenCalledWith("published");
   });
 
-  // ── Close confirmation ─────────────────────────────────────────────
+  it("Cmd/Ctrl+Enter focuses the link URL when the URL is invalid", async () => {
+    const el = await createElement();
+    el._format = "link";
+    await el.updateComplete;
 
-  it("requestClose on empty form closes immediately without confirmation", async () => {
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    editor._url = "example.com";
+    await editor.updateComplete;
+
+    const focusUrlSpy = vi.spyOn(editor, "focusUrlInput");
+    const submitSpy = vi.spyOn(
+      el as unknown as { _submit: (status: "published" | "draft") => void },
+      "_submit",
+    );
+
+    el.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Enter",
+        metaKey: true,
+        bubbles: true,
+      }),
+    );
+
+    expect(focusUrlSpy).toHaveBeenCalledWith("end");
+    expect(submitSpy).not.toHaveBeenCalled();
+  });
+
+  it("blocks publish for link posts without showing a title error on blur", async () => {
     const el = await createElement();
+    el._format = "link";
+    await el.updateComplete;
 
-    // Ensure no confirmation panel appears
-    el.requestClose();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    editor._url = "https://example.com";
+    await editor.updateComplete;
+
+    expect(
+      requireElement(
+        el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+        "expected publish button",
+      ).disabled,
+    ).toBe(true);
+
+    const titleInput = requireElement(
+      el.querySelector<HTMLInputElement>(".compose-link-title"),
+      "expected link title input",
+    );
+    titleInput.dispatchEvent(new Event("blur"));
     await el.updateComplete;
 
-    expect(el._confirmPanelOpen).toBe(false);
-    expect(el.querySelector(".compose-confirm-panel")).toBeNull();
+    expect(el.querySelector("[data-compose-link-title-error]")).toBeNull();
   });
 
-  it("beforeunload does not warn when dialog was only opened", async () => {
+  it("Cmd/Ctrl+Enter finishes an attached text editor instead of publishing", async () => {
     const el = await createElement();
-    vi.spyOn(el, "closest").mockReturnValue({
-      open: true,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-    } as unknown as HTMLDialogElement);
-
-    const event = new Event("beforeunload", {
-      cancelable: true,
-    }) as globalThis.BeforeUnloadEvent;
+    (
+      el as unknown as {
+        _attachedPanelOpen: boolean;
+      }
+    )._attachedPanelOpen = true;
+
+    const doneSpy = vi.spyOn(
+      el as unknown as { _doneAttachedPanel: () => void },
+      "_doneAttachedPanel",
+    );
+    const submitSpy = vi.spyOn(
+      el as unknown as { _submit: (status: "published" | "draft") => void },
+      "_submit",
+    );
 
-    window.dispatchEvent(event);
+    el.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Enter",
+        metaKey: true,
+        bubbles: true,
+      }),
+    );
 
-    expect(event.defaultPrevented).toBe(false);
-    expect(
-      (
-        el as unknown as { _hasUnsavedChanges: () => boolean }
-      )._hasUnsavedChanges(),
-    ).toBe(false);
+    expect(doneSpy).toHaveBeenCalled();
+    expect(submitSpy).not.toHaveBeenCalled();
   });
 
-  it("beforeunload warns after compose content changes", async () => {
+  it("cancelling an empty attached text editor discards it without confirmation", async () => {
     const el = await createElement();
-    vi.spyOn(el, "closest").mockReturnValue({
-      open: true,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-    } as unknown as HTMLDialogElement);
     const editor = requireElement(
       el.querySelector<JantComposeEditor>("jant-compose-editor"),
       "expected compose editor",
     );
 
-    editor._bodyJson = {
-      type: "doc",
-      content: [
-        { type: "paragraph", content: [{ type: "text", text: "Unsaved" }] },
-      ],
-    };
+    editor._attachedTexts = [
+      {
+        clientId: "t1",
+        bodyJson: null,
+        bodyHtml: "",
+        summary: "",
+      },
+    ];
+    editor._attachmentOrder = ["t1"];
     await editor.updateComplete;
 
-    const event = new Event("beforeunload", {
-      cancelable: true,
-    }) as globalThis.BeforeUnloadEvent;
-
-    window.dispatchEvent(event);
-
-    expect(event.defaultPrevented).toBe(true);
+    (
+      el as unknown as {
+        _attachedTextIndex: number;
+        _attachedPanelOpen: boolean;
+        _attachedEditor: { getJSON(): unknown; destroy(): void } | null;
+        _attachedTextSnapshot: unknown;
+        _cancelAttachedPanel: () => Promise<void>;
+      }
+    )._attachedTextIndex = 0;
+    (
+      el as unknown as {
+        _attachedPanelOpen: boolean;
+      }
+    )._attachedPanelOpen = true;
+    (
+      el as unknown as {
+        _attachedEditor: { getJSON(): unknown; destroy(): void } | null;
+      }
+    )._attachedEditor = {
+      getJSON: () => ({
+        type: "doc",
+        content: [{ type: "paragraph" }],
+      }),
+      destroy: vi.fn(),
+    };
+    (
+      el as unknown as {
+        _attachedTextSnapshot: unknown;
+      }
+    )._attachedTextSnapshot = null;
+
+    await (
+      el as unknown as {
+        _cancelAttachedPanel: () => Promise<void>;
+      }
+    )._cancelAttachedPanel();
+
+    expect(el._attachedPanelOpen).toBe(false);
+    expect(editor._attachedTexts).toEqual([]);
+    expect(editor._attachmentOrder).toEqual([]);
   });
 
-  it("requestClose with content shows confirmation panel", async () => {
+  it("reopening an attached text editor places the cursor at the end", async () => {
     const el = await createElement();
     const editor = requireElement(
       el.querySelector<JantComposeEditor>("jant-compose-editor"),
       "expected compose editor",
     );
-    editor._bodyJson = {
-      type: "doc",
-      content: [
-        { type: "paragraph", content: [{ type: "text", text: "Some text" }] },
-      ],
-    };
+
+    editor._attachedTexts = [
+      {
+        clientId: "t1",
+        bodyJson: {
+          type: "doc",
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "Existing attachment body" }],
+            },
+          ],
+        },
+        bodyHtml: "<p>Existing attachment body</p>",
+        summary: "Existing attachment body",
+      },
+    ];
+    editor._attachmentOrder = ["t1"];
     await editor.updateComplete;
 
-    el.requestClose();
+    (
+      el as unknown as {
+        _handleAttachedPanelOpen: (event: Event) => void;
+      }
+    )._handleAttachedPanelOpen(
+      new CustomEvent("jant:attached-panel-open", {
+        detail: { index: 0 },
+      }),
+    );
+    await flushUpdates(el);
+
+    const attachedEditor = (
+      el as unknown as {
+        _attachedEditor: {
+          state: {
+            selection: { from: number; to: number };
+          };
+        } | null;
+      }
+    )._attachedEditor;
+    if (!attachedEditor) {
+      throw new Error("expected attached editor instance");
+    }
+
+    expect(attachedEditor.state.selection.from).toBeGreaterThan(1);
+    expect(attachedEditor.state.selection.from).toBe(
+      attachedEditor.state.selection.to,
+    );
+  });
+
+  it("cancelling a dirty attached text editor uses the shared three-action confirm panel", async () => {
+    const el = await createElement();
+
+    (
+      el as unknown as {
+        _attachedTextIndex: number;
+        _attachedPanelOpen: boolean;
+        _attachedEditor: {
+          commands: { focus: () => void };
+          destroy(): void;
+          getJSON(): unknown;
+        } | null;
+        _attachedTextSnapshot: unknown;
+        _cancelAttachedPanel: () => void;
+      }
+    )._attachedTextIndex = 0;
+    (
+      el as unknown as {
+        _attachedPanelOpen: boolean;
+      }
+    )._attachedPanelOpen = true;
+    (
+      el as unknown as {
+        _attachedEditor: {
+          commands: { focus: () => void };
+          destroy(): void;
+          getJSON(): unknown;
+        } | null;
+      }
+    )._attachedEditor = {
+      commands: { focus: vi.fn() },
+      destroy: vi.fn(),
+      getJSON: () => ({
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Changed attachment" }],
+          },
+        ],
+      }),
+    };
+    (
+      el as unknown as {
+        _attachedTextSnapshot: unknown;
+      }
+    )._attachedTextSnapshot = null;
+
+    (
+      el as unknown as {
+        _cancelAttachedPanel: () => void;
+      }
+    )._cancelAttachedPanel();
     await el.updateComplete;
 
     expect(el._confirmPanelOpen).toBe(true);
     expect(el.querySelector(".compose-confirm-panel")).not.toBeNull();
     expect(
       el.querySelector(".compose-confirm-title")?.textContent?.trim(),
-    ).toBe("Save to drafts?");
+    ).toBe("Save text attachment?");
+    expect(el.querySelector(".compose-confirm-save")?.textContent?.trim()).toBe(
+      "Save",
+    );
+    expect(
+      el.querySelector(".compose-confirm-discard")?.textContent?.trim(),
+    ).toBe("Don't save");
+    expect(
+      el.querySelector(".compose-confirm-cancel")?.textContent?.trim(),
+    ).toBe("Cancel");
+  });
+
+  it("cancel on attached text confirm returns focus to the attached editor", async () => {
+    const el = await createElement();
+    const focusSpy = vi.fn();
+
+    (
+      el as unknown as {
+        _attachedPanelOpen: boolean;
+        _confirmPanelOpen: boolean;
+        _confirmForAttachedText: boolean;
+        _attachedEditor: {
+          commands: { focus: () => void };
+          destroy(): void;
+        } | null;
+      }
+    )._attachedPanelOpen = true;
+    (
+      el as unknown as {
+        _confirmPanelOpen: boolean;
+        _confirmForAttachedText: boolean;
+        _attachedEditor: {
+          commands: { focus: () => void };
+          destroy(): void;
+        } | null;
+      }
+    )._confirmPanelOpen = true;
+    (
+      el as unknown as {
+        _confirmForAttachedText: boolean;
+        _attachedEditor: {
+          commands: { focus: () => void };
+          destroy(): void;
+        } | null;
+      }
+    )._confirmForAttachedText = true;
+    (
+      el as unknown as {
+        _attachedEditor: {
+          commands: { focus: () => void };
+          destroy(): void;
+        } | null;
+      }
+    )._attachedEditor = {
+      commands: { focus: focusSpy },
+      destroy: vi.fn(),
+    };
+
+    el.requestClose();
+    await el.updateComplete;
+    await flushUpdates(el);
+
+    expect(el._confirmPanelOpen).toBe(false);
+    expect(focusSpy).toHaveBeenCalled();
+  });
+
+  it("clicking the empty attached editor area focuses the attached editor", async () => {
+    const el = await createElement();
+    const focusSpy = vi.fn();
+
+    (
+      el as unknown as {
+        _attachedPanelOpen: boolean;
+        _attachedEditor: {
+          commands: { focus: () => void };
+          destroy(): void;
+          getJSON(): unknown;
+        } | null;
+      }
+    )._attachedPanelOpen = true;
+    (
+      el as unknown as {
+        _attachedEditor: {
+          commands: { focus: () => void };
+          destroy(): void;
+          getJSON(): unknown;
+        } | null;
+      }
+    )._attachedEditor = {
+      commands: { focus: focusSpy },
+      destroy: vi.fn(),
+      getJSON: () => ({
+        type: "doc",
+        content: [{ type: "paragraph" }],
+      }),
+    };
+    await el.updateComplete;
+
+    const container = requireElement(
+      el.querySelector<HTMLElement>(".compose-attached-tiptap"),
+      "expected attached editor container",
+    );
+    container.dispatchEvent(
+      new MouseEvent("mousedown", {
+        bubbles: true,
+      }),
+    );
+
+    expect(focusSpy).toHaveBeenCalled();
   });
 
   it("confirm save draft dispatches submit-deferred with draft status", async () => {
@@ -1130,6 +3278,7 @@ describe("JantComposeDialog", () => {
       "expected compose editor",
     );
     editor._rating = 3;
+    editor._showRating = true;
     await editor.updateComplete;
 
     el.requestClose();
@@ -1137,4 +3286,20 @@ describe("JantComposeDialog", () => {
 
     expect(el._confirmPanelOpen).toBe(true);
   });
+
+  it("hidden rating does not trigger confirmation on close", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    editor._rating = 3;
+    editor._showRating = false;
+    await editor.updateComplete;
+
+    el.requestClose();
+    await el.updateComplete;
+
+    expect(el._confirmPanelOpen).toBe(false);
+  });
 });