@jant/core 0.3.36 → 0.3.38

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

@@ -1,6 +1,6 @@
 // @vitest-environment happy-dom
 
-import { describe, it, expect, beforeEach } from "vitest";
+import { describe, it, expect, beforeEach, vi } from "vitest";
 import type {
   ComposeLabels,
   ComposeCollection,
@@ -48,6 +48,7 @@ const labels: ComposeLabels = {
   collection: "Collection",
   searchCollections: "Search...",
   noCollections: "No collections found.",
+  emptyCollections: "Create a collection to get started.",
   post: "Post",
   addAlt: "+ ALT",
   addAltTitle: "Add alt text",
@@ -56,12 +57,59 @@ const labels: ComposeLabels = {
   addMore: "Add",
   uploading: "Uploading...",
   published: "Published!",
-  retryAll: "Click to retry all",
+  view: "View",
+  retryAll: "Tap to retry",
+  editPost: "Edit post",
+  update: "Done",
+  confirmCloseTitle: "Save to drafts?",
+  confirmCloseSubtitle: "Save to drafts to edit and post at a later time.",
+  confirmCloseSave: "Save",
+  confirmCloseCancel: "Cancel",
+  confirmCloseDiscard: "Don't save",
+  confirmEditTitle: "You have unsaved changes",
+  confirmEditSubtitle: "Do you want to publish your changes or discard them?",
+  confirmEditPublish: "Publish",
+  confirmEditDiscard: "Discard",
+  drafts: "Drafts",
+  draftsEmpty: "No drafts yet. Save a draft to find it here.",
+  deleteDraft: "Delete Draft",
+  draftDeleted: "Draft deleted.",
+  publishFailedDraft: "Couldn't publish. Saved as draft.",
+  uploadFailedDraft: "Some uploads failed. Saved as draft.",
+  addCollection: "Add Collection",
+  collectionCountLabel: "%name% + %count% more",
+  draftRestored: "Draft restored.",
+  reply: "Reply",
+  publishFeatured: "Post as Featured",
+  publishUnlisted: "Post Unlisted",
+  publishPrivate: "Post as Private",
+  showMore: "Show more",
+  showLess: "Show less",
+  collectionFormLabels: {
+    titleLabel: "Title",
+    titlePlaceholder: "My Collection",
+    slugLabel: "Slug",
+    slugHelp: "URL-safe identifier",
+    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: 1, title: "Books", iconHtml: "" },
-  { id: 2, title: "Movies", iconHtml: "<span>🎬</span>" },
+  { id: "col-1", title: "Books", iconHtml: "" },
+  { id: "col-2", title: "Movies", iconHtml: "<span>🎬</span>" },
 ];
 
 async function createElement(
@@ -96,9 +144,9 @@ describe("JantComposeDialog", () => {
     expect(segmentedItems[1].textContent?.trim()).toBe("Link");
     expect(segmentedItems[2].textContent?.trim()).toBe("Quote");
 
-    // Post button present
+    // Post button present (split button with visibility dropdown)
     const postBtn = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-post-btn"),
+      el.querySelector<HTMLButtonElement>(".compose-publish-main"),
       "expected post button",
     );
     expect(postBtn.textContent?.trim()).toBe("Post");
@@ -131,7 +179,7 @@ describe("JantComposeDialog", () => {
     );
   });
 
-  it("submit dispatches jant:compose-submit with correct payload", async () => {
+  it("submit dispatches jant:compose-submit-deferred with correct payload", async () => {
     const el = await createElement();
     const editor = requireElement(
       el.querySelector<JantComposeEditor>("jant-compose-editor"),
@@ -145,26 +193,34 @@ describe("JantComposeDialog", () => {
     };
     await editor.updateComplete;
 
-    let receivedDetail: ComposeSubmitDetail | null = null;
-    el.addEventListener("jant:compose-submit", (event) => {
-      const customEvent = event as CustomEvent<ComposeSubmitDetail>;
+    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;
     });
 
     // Click post button
     requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-post-btn"),
+      el.querySelector<HTMLButtonElement>(".compose-publish-main"),
       "expected post button",
     ).click();
 
     expect(receivedDetail).not.toBeNull();
-    const detail = receivedDetail as unknown as ComposeSubmitDetail;
+    const detail = receivedDetail as unknown as ComposeSubmitDetail & {
+      pendingAttachments: unknown[];
+    };
     expect(detail.format).toBe("note");
     expect(detail.body).toContain("Hello world");
     expect(detail.status).toBe("published");
+    expect(detail.visibility).toBe("public");
     expect(detail.collectionIds).toEqual([]);
     expect(detail.mediaIds).toEqual([]);
     expect(detail.mediaAlts).toEqual({});
+    expect(detail.pendingAttachments).toEqual([]);
   });
 
   it("collection selector toggles IDs", async () => {
@@ -186,30 +242,32 @@ describe("JantComposeDialog", () => {
     // Select first collection
     options[0].click();
     await el.updateComplete;
-    expect(el._collectionIds).toEqual([1]);
+    expect(el._collectionIds).toEqual(["col-1"]);
 
     // Select second collection
     options[1].click();
     await el.updateComplete;
-    expect(el._collectionIds).toEqual([1, 2]);
+    expect(el._collectionIds).toEqual(["col-1", "col-2"]);
 
     // Deselect first
     options[0].click();
     await el.updateComplete;
-    expect(el._collectionIds).toEqual([2]);
+    expect(el._collectionIds).toEqual(["col-2"]);
   });
 
   it("reset restores initial state", async () => {
     const el = await createElement();
     el._format = "link";
-    el._collectionIds = [1, 2];
+    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 () => {
@@ -218,23 +276,22 @@ describe("JantComposeDialog", () => {
     await el.updateComplete;
 
     const postBtn = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-post-btn"),
+      el.querySelector<HTMLButtonElement>(".compose-publish-main"),
       "expected post button",
     );
     expect(postBtn.disabled).toBe(true);
   });
 
-  it("renders without collections", async () => {
+  it("renders collection selector even without collections", async () => {
     const el = await createElement([]);
 
-    // No collection trigger
-    expect(el.querySelector(".compose-collection-trigger")).toBeNull();
-    // Spacer div present instead
+    // 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("draft button dispatches submit with draft status", async () => {
+  it("draft button with content shows confirm panel", async () => {
     const el = await createElement();
     const editor = requireElement(
       el.querySelector<JantComposeEditor>("jant-compose-editor"),
@@ -251,22 +308,47 @@ describe("JantComposeDialog", () => {
     };
     await editor.updateComplete;
 
-    let receivedDetail: ComposeSubmitDetail | null = null;
-    el.addEventListener("jant:compose-submit", (event) => {
-      const customEvent = event as CustomEvent<ComposeSubmitDetail>;
-      receivedDetail = customEvent.detail;
-    });
+    // Click the draft header button — should show confirm panel
+    const draftBtn = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-dialog-header-btn"),
+      "expected draft button",
+    );
+    draftBtn.click();
+    await el.updateComplete;
 
-    // Click the draft header button
+    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(receivedDetail).not.toBeNull();
-    const detail = receivedDetail as unknown as ComposeSubmitDetail;
-    expect(detail.status).toBe("draft");
+    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 () => {
@@ -275,12 +357,12 @@ describe("JantComposeDialog", () => {
     await el.updateComplete;
 
     let dispatched = false;
-    el.addEventListener("jant:compose-submit", () => {
+    el.addEventListener("jant:compose-submit-deferred", () => {
       dispatched = true;
     });
 
     const postBtn = requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-post-btn"),
+      el.querySelector<HTMLButtonElement>(".compose-publish-main"),
       "expected post button",
     );
     postBtn.click();
@@ -293,7 +375,7 @@ describe("JantComposeDialog", () => {
     el._loading = true;
     await el.updateComplete;
 
-    const spinner = el.querySelector(".compose-post-btn .animate-spin");
+    const spinner = el.querySelector(".compose-publish-main .animate-spin");
     expect(spinner).not.toBeNull();
   });
 
@@ -322,11 +404,15 @@ describe("JantComposeDialog", () => {
         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
@@ -361,11 +447,15 @@ describe("JantComposeDialog", () => {
         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
@@ -398,11 +488,15 @@ describe("JantComposeDialog", () => {
         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
@@ -448,9 +542,12 @@ describe("JantComposeDialog", () => {
         file,
         previewUrl,
         status: "done",
+        progress: null,
         mediaId: "media-1",
         alt: "A test image",
         error: null,
+        summary: null,
+        chars: null,
       },
     ];
     editor._bodyJson = {
@@ -464,21 +561,28 @@ describe("JantComposeDialog", () => {
     };
     await editor.updateComplete;
 
-    let receivedDetail: ComposeSubmitDetail | null = null;
-    el.addEventListener("jant:compose-submit", (event) => {
-      const customEvent = event as CustomEvent<ComposeSubmitDetail>;
+    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-post-btn"),
+      el.querySelector<HTMLButtonElement>(".compose-publish-main"),
       "expected post button",
     ).click();
 
     expect(receivedDetail).not.toBeNull();
-    const detail = receivedDetail as unknown as ComposeSubmitDetail;
+    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([]);
 
     URL.revokeObjectURL(previewUrl);
   });
@@ -500,9 +604,12 @@ describe("JantComposeDialog", () => {
         file,
         previewUrl,
         status: "uploading",
+        progress: null,
         mediaId: null,
         alt: "Alt for pending",
         error: null,
+        summary: null,
+        chars: null,
       },
     ];
     editor._bodyJson = {
@@ -521,24 +628,513 @@ describe("JantComposeDialog", () => {
       deferredEvent = event as CustomEvent;
     });
 
-    // Prevent dialog.close() from throwing (no parent dialog in test)
-    let submitEvent: CustomEvent | null = null;
-    el.addEventListener("jant:compose-submit", (event) => {
-      submitEvent = event as CustomEvent;
-    });
-
     requireElement(
-      el.querySelector<HTMLButtonElement>(".compose-post-btn"),
+      el.querySelector<HTMLButtonElement>(".compose-publish-main"),
       "expected post button",
     ).click();
 
-    // Should have dispatched deferred, not regular submit
     expect(deferredEvent).not.toBeNull();
-    expect(submitEvent).toBeNull();
     expect(
       (deferredEvent as unknown as CustomEvent).detail.pendingAttachments,
-    ).toBeDefined();
+    ).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("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 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;
+
+    const event = new Event("beforeunload", {
+      cancelable: true,
+    }) as globalThis.BeforeUnloadEvent;
+
+    window.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  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;
+
+    el.requestClose();
+    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?");
+  });
+
+  it("confirm save draft dispatches submit-deferred with draft status", 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 me" }] },
+      ],
+    };
+    await editor.updateComplete;
+
+    el.requestClose();
+    await el.updateComplete;
+
+    let receivedDetail: ComposeSubmitDetail | null = null;
+    el.addEventListener("jant:compose-submit-deferred", (event) => {
+      receivedDetail = (event as CustomEvent<ComposeSubmitDetail>).detail;
+    });
+
+    const saveBtn = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-confirm-save"),
+      "expected save draft button",
+    );
+    saveBtn.click();
+    await el.updateComplete;
+
+    expect(receivedDetail).not.toBeNull();
+    expect((receivedDetail as unknown as ComposeSubmitDetail).status).toBe(
+      "draft",
+    );
+    expect(el._confirmPanelOpen).toBe(false);
+  });
+
+  it("confirm cancel returns to editor without closing", 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 editing" }],
+        },
+      ],
+    };
+    await editor.updateComplete;
+
+    el.requestClose();
+    await el.updateComplete;
+
+    expect(el._confirmPanelOpen).toBe(true);
+
+    const cancelBtn = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-confirm-cancel"),
+      "expected cancel button",
+    );
+    const focusSpy = vi.spyOn(editor, "focusInput");
+    cancelBtn.click();
+    await el.updateComplete;
+
+    expect(el._confirmPanelOpen).toBe(false);
+    expect(focusSpy).toHaveBeenCalled();
+    // Editor content should be preserved
+    expect(editor._bodyJson).toEqual({
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "Keep editing" }],
+        },
+      ],
+    });
+  });
+
+  it("requestClose on confirm panel dismisses it (Escape = 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: "Esc test" }] },
+      ],
+    };
+    await editor.updateComplete;
+
+    el.requestClose();
+    await el.updateComplete;
+    expect(el._confirmPanelOpen).toBe(true);
+
+    // Second requestClose (same path as Escape via dialog oncancel)
+    el.requestClose();
+    await el.updateComplete;
+
+    expect(el._confirmPanelOpen).toBe(false);
+    // Content should be preserved (not discarded)
+    expect(editor._bodyJson).toEqual({
+      type: "doc",
+      content: [
+        { type: "paragraph", content: [{ type: "text", text: "Esc test" }] },
+      ],
+    });
+  });
+
+  it("confirm discard closes and resets", 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: "Will discard" }],
+        },
+      ],
+    };
+    await editor.updateComplete;
+
+    el.requestClose();
+    await el.updateComplete;
+
+    const discardBtn = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-confirm-discard"),
+      "expected discard button",
+    );
+    discardBtn.click();
+    await el.updateComplete;
+
+    expect(el._confirmPanelOpen).toBe(false);
+    expect(el._format).toBe("note");
+    expect(el._collectionIds).toEqual([]);
+  });
+
+  it("loaded draft shows format switcher and Post button, not edit mode", async () => {
+    const el = await createElement();
+
+    // Simulate what _loadDraft sets (without fetching)
+    el._draftSourceId = "draft123";
+    el._format = "note";
+    await el.updateComplete;
+
+    // Format switcher should be visible (not "Edit post" title)
+    expect(el.querySelector(".compose-segmented")).not.toBeNull();
+    expect(el.querySelector(".compose-dialog-title")).toBeNull();
+
+    // Button should say "Post", not "Done"
+    const postBtn = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+      "expected post button",
+    );
+    expect(postBtn.textContent?.trim()).toBe("Post");
+  });
+
+  it("discard on loaded draft sends DELETE request", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+
+    // Simulate loaded draft with content
+    el._draftSourceId = "draft456";
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "Draft content" }],
+        },
+      ],
+    };
+    await editor.updateComplete;
+
+    const fetchSpy = vi
+      .spyOn(globalThis, "fetch")
+      .mockResolvedValue(new Response(null, { status: 200 }));
+
+    el.requestClose();
+    await el.updateComplete;
+
+    // Click "Don't save" (discard)
+    const discardBtn = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-confirm-discard"),
+      "expected discard button",
+    );
+    discardBtn.click();
+    await el.updateComplete;
+
+    expect(fetchSpy).toHaveBeenCalledWith("/api/posts/draft456", {
+      method: "DELETE",
+    });
+
+    fetchSpy.mockRestore();
+  });
+
+  it("submit from loaded draft includes draftSourceId as editPostId", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+
+    el._draftSourceId = "draft789";
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "Publish this draft" }],
+        },
+      ],
+    };
+    await editor.updateComplete;
+
+    let receivedDetail: ComposeSubmitDetail | null = null;
+    el.addEventListener("jant:compose-submit-deferred", (event) => {
+      receivedDetail = (event as CustomEvent<ComposeSubmitDetail>).detail;
+    });
+
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+      "expected post button",
+    ).click();
+
+    expect(receivedDetail).not.toBeNull();
+    expect((receivedDetail as unknown as ComposeSubmitDetail).editPostId).toBe(
+      "draft789",
+    );
+    expect((receivedDetail as unknown as ComposeSubmitDetail).status).toBe(
+      "published",
+    );
+  });
+
+  it("draft button confirm save dispatches draft then opens drafts 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: "Save then browse" }],
+        },
+      ],
+    };
+    await editor.updateComplete;
+
+    const fetchSpy = vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(JSON.stringify({ posts: [] }), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+
+    let receivedDetail: ComposeSubmitDetail | null = null;
+    el.addEventListener("jant:compose-submit-deferred", (event) => {
+      receivedDetail = (event as CustomEvent<ComposeSubmitDetail>).detail;
+    });
+
+    // Click draft button → confirm panel
+    const draftBtn = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-dialog-header-btn"),
+      "expected draft button",
+    );
+    draftBtn.click();
+    await el.updateComplete;
+    expect(el._confirmPanelOpen).toBe(true);
+
+    // Click "Save"
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-confirm-save"),
+      "expected save button",
+    ).click();
+    await el.updateComplete;
+    await new Promise((r) => setTimeout(r, 0));
+    await el.updateComplete;
+
+    // Draft submitted
+    expect(receivedDetail).not.toBeNull();
+    expect((receivedDetail as unknown as ComposeSubmitDetail).status).toBe(
+      "draft",
+    );
+    // Drafts panel opened instead of dialog closing
+    expect(el._draftsPanelOpen).toBe(true);
+    expect(el._confirmPanelOpen).toBe(false);
+
+    fetchSpy.mockRestore();
+  });
+
+  it("draft button confirm discard opens drafts panel without saving", 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: "Discard then browse" }],
+        },
+      ],
+    };
+    await editor.updateComplete;
+
+    const fetchSpy = vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(JSON.stringify({ posts: [] }), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+
+    let submitFired = false;
+    el.addEventListener("jant:compose-submit-deferred", () => {
+      submitFired = true;
+    });
+
+    // Click draft button → confirm panel
+    const draftBtn = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-dialog-header-btn"),
+      "expected draft button",
+    );
+    draftBtn.click();
+    await el.updateComplete;
+
+    // Click "Don't save"
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-confirm-discard"),
+      "expected discard button",
+    ).click();
+    await el.updateComplete;
+    await new Promise((r) => setTimeout(r, 0));
+    await el.updateComplete;
+
+    // No submit dispatched
+    expect(submitFired).toBe(false);
+    // Drafts panel opened
+    expect(el._draftsPanelOpen).toBe(true);
+    expect(el._confirmPanelOpen).toBe(false);
+
+    fetchSpy.mockRestore();
+  });
+
+  it("attachments detected as content for confirmation", 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,
+      },
+    ];
+    await editor.updateComplete;
+
+    el.requestClose();
+    await el.updateComplete;
+
+    expect(el._confirmPanelOpen).toBe(true);
+    expect(el.querySelector(".compose-confirm-panel")).not.toBeNull();
+
+    URL.revokeObjectURL(previewUrl);
+  });
+
+  it("rating detected as content for confirmation", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    editor._rating = 3;
+    await editor.updateComplete;
+
+    el.requestClose();
+    await el.updateComplete;
+
+    expect(el._confirmPanelOpen).toBe(true);
+  });
 });