@jant/core 0.3.40 → 0.3.43

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

@@ -29,25 +29,62 @@ import type {
 import type { CollectionSubmitDetail } from "./collection-types.js";
 import { showToast } from "../toast.js";
 import { publicPath } from "../runtime-paths.js";
+import { parseMarkdownDocument } from "../../lib/markdown-manager.js";
+import {
+  applyItemOrder,
+  filterCollectionsBySearch,
+  getSelectedFirstOrder,
+} from "../collection-picker-order.js";
 import type { JantComposeEditor } from "./jant-compose-editor.js";
 import { getMediaCategory } from "../../lib/upload.js";
 import { getSlugValidationIssue } from "../../lib/slug-format.js";
 import { createTiptapEditor } from "../tiptap/create-editor.js";
+import { MAX_THREAD_POSTS } from "../../types.js";
+
+interface ReplyToMedia {
+  url: string;
+  previewUrl: string;
+  alt?: string;
+  mimeType: string;
+  width?: number;
+  height?: number;
+}
 
 interface ReplyToData {
   contentHtml: string;
   dateText: string;
+  media?: ReplyToMedia[];
+}
+
+interface ThreadItem {
+  id: string;
+  format: ComposeFormat;
 }
 
-interface ComposeMediaAttachmentResponse {
+interface ApiMediaAttachment {
+  type: "media";
   id: string;
   previewUrl: string;
   alt?: string;
   mimeType: string;
   url?: string;
+  width?: number;
+  height?: number;
+  summary?: string;
+  chars?: number;
+  originalName?: string;
+}
+
+interface ApiTextAttachment {
+  type: "text";
+  id: string;
+  contentUrl: string;
   summary?: string;
+  chars?: number;
 }
 
+type ApiAttachment = ApiMediaAttachment | ApiTextAttachment;
+
 interface ComposePostResponse {
   id: string;
   threadId?: string;
@@ -56,7 +93,7 @@ interface ComposePostResponse {
   visibility?: ComposeVisibility | null;
   replyToId?: string | null;
   collectionIds?: string[];
-  mediaAttachments?: ComposeMediaAttachmentResponse[];
+  attachments?: ApiAttachment[];
   title?: string | null;
   body?: string | null;
   url?: string | null;
@@ -75,12 +112,20 @@ interface DraftsResponse {
 interface ComposeOpenOptions {
   collectionId?: string;
   restoreDraft?: boolean;
+  initialFormat?: ComposeFormat;
+}
+
+interface ComposeReplyOpenOptions {
+  restoreDraft?: boolean;
+  initialFormat?: ComposeFormat;
 }
 
 interface ComposeStateSnapshot {
   format: ComposeFormat;
   collectionIds: string[];
   slug: string;
+  publishedAtInput: string;
+  publishedAtTimeMinutes: number | null;
   visibility: ComposeVisibility;
   title: string;
   bodyJson: JSONContent | null;
@@ -116,6 +161,16 @@ interface ComposeFilePickerCloseDetail {
   cancelled?: boolean;
 }
 
+interface ComposePublishSummaryChip {
+  kind: "publishedAt" | "slug";
+  text: string;
+  actionLabel: string;
+  value: string;
+}
+
+const COMPOSE_PUBLISH_PANEL_FULLSCREEN_QUERY =
+  "(max-width: 700px), (max-height: 760px), (hover: none) and (pointer: coarse)";
+
 const COMPOSE_DIALOG_HEADER_ICONS = {
   drafts: `
     <rect x="3.85" y="3.45" width="7.85" height="8.35" rx="2.35" />
@@ -274,9 +329,10 @@ function toComposeCollections(value: unknown): ComposeCollection[] {
 
     const id = Reflect.get(item, "id");
     const title = Reflect.get(item, "title");
+    const slug = Reflect.get(item, "slug");
     if (typeof id !== "string" || typeof title !== "string") return [];
 
-    return [{ id, title }];
+    return [{ id, title, slug: typeof slug === "string" ? slug : "" }];
   });
 }
 
@@ -293,9 +349,181 @@ function normalizeComposeDoc(json: JSONContent | null): JSONContent | null {
   return isEmptyComposeDoc(json) ? null : json;
 }
 
+function padDateTimePart(value: number): string {
+  return String(value).padStart(2, "0");
+}
+
+function toLocalDateInputValue(timestamp: number): string {
+  const date = new Date(timestamp * 1000);
+  return `${date.getFullYear()}-${padDateTimePart(
+    date.getMonth() + 1,
+  )}-${padDateTimePart(date.getDate())}`;
+}
+
+function parseLocalDateInputValue(
+  value: string,
+): { year: number; monthIndex: number; day: number } | null {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(trimmed);
+  if (!match) return null;
+
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const day = Number(match[3]);
+  const parsed = new Date(year, month - 1, day);
+  if (
+    Number.isNaN(parsed.getTime()) ||
+    parsed.getFullYear() !== year ||
+    parsed.getMonth() !== month - 1 ||
+    parsed.getDate() !== day
+  ) {
+    return null;
+  }
+
+  return { year, monthIndex: month - 1, day };
+}
+
+function getTimestampTimeMinutes(timestamp: number): number {
+  const date = new Date(timestamp * 1000);
+  return date.getHours() * 60 + date.getMinutes();
+}
+
+function buildTimestampFromLocalDate(
+  value: string,
+  timeMinutes: number,
+): number | null {
+  const parsed = parseLocalDateInputValue(value);
+  if (!parsed) return null;
+
+  const clampedMinutes = Math.min(Math.max(timeMinutes, 0), 23 * 60 + 59);
+  const hours = Math.floor(clampedMinutes / 60);
+  const minutes = clampedMinutes % 60;
+  return Math.floor(
+    new Date(
+      parsed.year,
+      parsed.monthIndex,
+      parsed.day,
+      hours,
+      minutes,
+      0,
+      0,
+    ).getTime() / 1000,
+  );
+}
+
+/**
+ * Split API attachments into media items and resolved text attachments
+ * for use with `editor.populate()`.
+ */
+async function resolveApiAttachments(allAttachments: ApiAttachment[]) {
+  const mediaItems = allAttachments.filter(
+    (a): a is ApiMediaAttachment => a.type === "media",
+  );
+  const textItems = allAttachments.filter(
+    (a): a is ApiTextAttachment => a.type === "text",
+  );
+
+  const media = mediaItems.map((m) => ({
+    id: m.id,
+    previewUrl: m.previewUrl,
+    alt: m.alt,
+    mimeType: m.mimeType,
+    originalName: m.originalName,
+    summary: m.summary,
+    chars: m.chars,
+  }));
+
+  const textAttachments = await Promise.all(
+    textItems.map(async (m) => {
+      // Editing a post hydrates existing text attachments back into the
+      // editor. Fetch the markdown source from the auth'd attachments API
+      // (compose is always admin-authenticated) and parse it into a
+      // Tiptap document on the client. The `.html` sibling is not used
+      // here — the editor owns HTML rendering from the JSON source.
+      try {
+        const res = await fetch(m.contentUrl);
+        if (res.ok) {
+          const payload = (await res.json()) as {
+            content?: string;
+            contentFormat?: string;
+          };
+          const markdown =
+            payload.contentFormat === "markdown" && payload.content
+              ? payload.content
+              : "";
+          const doc = markdown ? parseMarkdownDocument(markdown) : null;
+          if (doc) {
+            return {
+              bodyJson: JSON.stringify(doc),
+              bodyHtml: "",
+              summary: m.summary ?? "",
+              mediaId: m.id,
+            };
+          }
+        }
+      } catch {
+        // Fetch or parse failed — fall through to the empty-shell return
+        // below. The attachment stays visible in the composer so the user
+        // can decide whether to keep, edit, or remove it explicitly; we
+        // do not silently drop it.
+      }
+      return {
+        bodyJson: JSON.stringify({
+          type: "doc",
+          content: [{ type: "paragraph" }],
+        }),
+        bodyHtml: "",
+        summary: m.summary ?? "",
+        mediaId: m.id,
+      };
+    }),
+  );
+
+  const attachmentOrder = allAttachments.map((a) => a.id);
+
+  return { media, textAttachments, attachmentOrder };
+}
+
 export class JantComposeDialog extends LitElement {
   private static _lastNewPostVisibility: ComposeVisibility = "public";
 
+  /** The collection ID that triggered this compose session (for per-collection visibility memory). */
+  private _sourceCollectionId: string | null = null;
+
+  private static _collectionVisibilityKey(collectionId: string): string {
+    return `jant:collection-visibility:${collectionId}`;
+  }
+
+  private static _getCollectionVisibility(
+    collectionId: string,
+  ): ComposeVisibility | null {
+    try {
+      const v = globalThis.localStorage.getItem(
+        JantComposeDialog._collectionVisibilityKey(collectionId),
+      );
+      if (v === "public" || v === "latest_hidden" || v === "private") return v;
+    } catch {
+      // localStorage unavailable
+    }
+    return null;
+  }
+
+  private static _setCollectionVisibility(
+    collectionId: string,
+    visibility: ComposeVisibility,
+  ) {
+    try {
+      globalThis.localStorage.setItem(
+        JantComposeDialog._collectionVisibilityKey(collectionId),
+        visibility,
+      );
+    } catch {
+      // localStorage unavailable
+    }
+  }
+
   static properties = {
     collections: { type: Array },
     labels: { type: Object },
@@ -306,6 +534,7 @@ export class JantComposeDialog extends LitElement {
     _format: { state: true },
     _status: { state: true },
     _loading: { state: true },
+    _openingEdit: { state: true },
     _collectionIds: { state: true },
     _showCollection: { state: true },
     _collectionSearch: { state: true },
@@ -325,14 +554,19 @@ export class JantComposeDialog extends LitElement {
     _replyToId: { state: true },
     _replyToData: { state: true },
     _replyExpanded: { state: true },
+    _threadItems: { state: true },
+    _focusedThreadIndex: { state: true },
     _slug: { state: true },
+    _publishedAtInput: { state: true },
     _visibility: { state: true },
     _showPublishPanel: { state: true },
+    _publishPanelFullscreen: { state: true },
     _suggestedSlug: { state: true },
     _suggestedSlugLoading: { state: true },
     _slugCheckLoading: { state: true },
     _slugTaken: { state: true },
     _visibilityLocked: { state: true },
+    _quietReply: { state: true },
   };
 
   declare collections: ComposeCollection[];
@@ -344,6 +578,7 @@ export class JantComposeDialog extends LitElement {
   declare _format: ComposeFormat;
   declare _status: "published" | "draft";
   declare _loading: boolean;
+  declare _openingEdit: boolean;
   declare _collectionIds: string[];
   declare _showCollection: boolean;
   declare _collectionSearch: string;
@@ -363,14 +598,19 @@ export class JantComposeDialog extends LitElement {
   declare _replyToId: string | null;
   declare _replyToData: ReplyToData | null;
   declare _replyExpanded: boolean;
+  declare _threadItems: ThreadItem[];
+  declare _focusedThreadIndex: number;
   declare _slug: string;
+  declare _publishedAtInput: string;
   declare _visibility: ComposeVisibility;
   declare _showPublishPanel: boolean;
+  declare _publishPanelFullscreen: boolean;
   declare _suggestedSlug: string;
   declare _suggestedSlugLoading: boolean;
   declare _slugCheckLoading: boolean;
   declare _slugTaken: boolean;
   declare _visibilityLocked: boolean;
+  declare _quietReply: boolean;
 
   private _attachedEditor: Editor | null = null;
   private _attachedTextSnapshot: JSONContent | null = null;
@@ -388,6 +628,11 @@ export class JantComposeDialog extends LitElement {
     | "post-view"
     | null = null;
   private _replyRefreshId: string | null = null;
+  private _publishedAtTimeMinutes: number | null = null;
+  private _originalPublishedAt: number | null = null;
+  private _initialPublishedAtTimeMinutes: number | null = null;
+  private _initialPublishedAtInput = "";
+  private _initialSlug = "";
   private _slugCheckTimer: ReturnType<typeof setTimeout> | null = null;
   private _slugSuggestTimer: ReturnType<typeof setTimeout> | null = null;
   private _slugSuggestRequestId = 0;
@@ -395,8 +640,13 @@ export class JantComposeDialog extends LitElement {
   private _slugSuggestionKey = "";
   private _suppressBeforeUnload = false;
   private _dialogEl: HTMLDialogElement | null = null;
+  private _mousedownOnBackdrop = false;
   private _filePickerActive = false;
   private _ignoreNextEscapeClose = false;
+  private _openEditRequestId = 0;
+  private _collectionPickerOrder: string[] = [];
+  private _suppressCollectionOptionClickUntil = 0;
+  private _suppressedCollectionOptionId: string | null = null;
 
   createRenderRoot() {
     this.innerHTML = "";
@@ -414,6 +664,7 @@ export class JantComposeDialog extends LitElement {
     this._format = "note";
     this._status = "published";
     this._loading = false;
+    this._openingEdit = false;
     this._collectionIds = [];
     this._showCollection = false;
     this._collectionSearch = "";
@@ -433,17 +684,28 @@ export class JantComposeDialog extends LitElement {
     this._replyToId = null;
     this._replyToData = null;
     this._replyExpanded = false;
+    this._threadItems = [];
+    this._focusedThreadIndex = 0;
     this._replyThreadRootId = null;
     this._replyRefreshKind = null;
     this._replyRefreshId = null;
     this._slug = "";
+    this._publishedAtInput = "";
+    this._publishedAtTimeMinutes = null;
+    this._originalPublishedAt = null;
+    this._initialPublishedAtTimeMinutes = null;
+    this._initialPublishedAtInput = "";
+    this._initialSlug = "";
     this._visibility = JantComposeDialog._lastNewPostVisibility;
+    this._sourceCollectionId = null;
     this._showPublishPanel = false;
+    this._publishPanelFullscreen = false;
     this._suggestedSlug = "";
     this._suggestedSlugLoading = false;
     this._slugCheckLoading = false;
     this._slugTaken = false;
     this._visibilityLocked = false;
+    this._quietReply = false;
   }
 
   private get _editor(): JantComposeEditor | null {
@@ -467,26 +729,37 @@ export class JantComposeDialog extends LitElement {
         titleInput?.select();
       });
     }
+    if (changed.has("_showCollection") && this._showCollection) {
+      this._scheduleCollectionPickerAutofocus();
+    }
     if (
       changed.has("_format") ||
       changed.has("_collectionIds") ||
       changed.has("_slug") ||
+      changed.has("_publishedAtInput") ||
       changed.has("_visibility")
     ) {
-      // Schedule draft auto-save for new-post mode only
-      if (!this._editPostId && !this._draftSourceId) {
+      // Schedule draft auto-save (new-post and edit modes, not draft-load)
+      if (!this._draftSourceId) {
         this._scheduleDraftSave();
       }
     }
+    if (this._showPublishPanel) {
+      this._updatePublishPanelLayout();
+    }
+    if (this._showCollection) {
+      this._updateCollectionPopoverSide();
+    }
   }
 
   reset() {
+    this._openEditRequestId += 1;
     this._format = "note";
     this._status = "published";
     this._loading = false;
+    this._openingEdit = false;
     this._collectionIds = [];
-    this._showCollection = false;
-    this._collectionSearch = "";
+    this._closeCollectionPicker();
     this._altPanelOpen = false;
     this._altPanelIndex = 0;
     this._attachedPanelOpen = false;
@@ -503,11 +776,20 @@ export class JantComposeDialog extends LitElement {
     this._replyToId = null;
     this._replyToData = null;
     this._replyExpanded = false;
+    this._threadItems = [];
+    this._focusedThreadIndex = 0;
     this._replyThreadRootId = null;
     this._replyRefreshKind = null;
     this._replyRefreshId = null;
     this._slug = "";
+    this._publishedAtInput = "";
+    this._publishedAtTimeMinutes = null;
+    this._originalPublishedAt = null;
+    this._initialPublishedAtTimeMinutes = null;
+    this._initialPublishedAtInput = "";
+    this._initialSlug = "";
     this._visibility = JantComposeDialog._lastNewPostVisibility;
+    this._sourceCollectionId = null;
     this._showPublishPanel = false;
     this._suggestedSlug = "";
     this._suggestedSlugLoading = false;
@@ -515,6 +797,7 @@ export class JantComposeDialog extends LitElement {
     this._slugTaken = false;
     this._slugSuggestionKey = "";
     this._visibilityLocked = false;
+    this._quietReply = false;
     this._confirmForDrafts = false;
     this._confirmForAttachedText = false;
     this._initialSnapshot = null;
@@ -534,6 +817,7 @@ export class JantComposeDialog extends LitElement {
   async refreshCollections(): Promise<boolean> {
     try {
       const res = await fetch("/api/collections?view=compose", {
+        cache: "no-store",
         headers: { Accept: "application/json" },
       });
       if (!res.ok) return false;
@@ -552,105 +836,99 @@ export class JantComposeDialog extends LitElement {
 
   async openEdit(id: string) {
     this.reset();
-
-    const res = await fetch(`/api/posts/${id}`);
-    if (!res.ok) return;
-    const post = (await res.json()) as ComposePostResponse;
-
+    const requestId = ++this._openEditRequestId;
+    this._openingEdit = true;
     this._editPostId = id;
-    this._format = post.format;
-    this._slug = post.slug ?? "";
-    this._slugTaken = false;
-    this._slugCheckLoading = false;
-    this._suggestedSlug = "";
-    this._suggestedSlugLoading = false;
-    this._slugSuggestionKey = "";
-    this._visibility = post.visibility ?? "public";
-    this._visibilityLocked = Boolean(post.replyToId);
 
-    // Pre-fill collection memberships if present
-    if (post.collectionIds?.length) {
-      this._collectionIds = post.collectionIds;
+    const dialog = this.closest("dialog");
+    if (dialog && !dialog.open) {
+      dialog.showModal();
     }
-
-    // Wait for Lit to render with the new format before populating editor
     await this.updateComplete;
+    this._focusDialogShell();
 
-    // Separate text media items from other media attachments
-    const allMedia = post.mediaAttachments ?? [];
-    const nonTextMedia = allMedia.filter(
-      (m: { mimeType: string }) => !m.mimeType.startsWith("text/"),
-    );
-    const textMedia = allMedia.filter(
-      (m: { mimeType: string }) => m.mimeType === "text/x-tiptap+json",
-    );
+    try {
+      const res = await fetch(`/api/posts/${id}`);
+      if (!res.ok) throw new Error("Failed to load post");
+      const post = (await res.json()) as ComposePostResponse;
+      if (requestId !== this._openEditRequestId) return;
 
-    // Fetch text content for TipTap text media items (stored as { json, html } envelope)
-    const textAttachments = await Promise.all(
-      textMedia.map(
-        async (m: { id: string; url?: string; summary?: string }) => {
-          try {
-            const textRes = await fetch(`/api/media/${m.id}/content`);
-            if (textRes.ok) {
-              const raw = await textRes.text();
-              const envelope = JSON.parse(raw) as {
-                json?: unknown;
-                html?: string;
-              };
-              return {
-                bodyJson: JSON.stringify(envelope.json ?? {}),
-                bodyHtml: envelope.html ?? "",
-                summary: m.summary ?? "",
-                mediaId: m.id,
-              };
-            }
-          } catch {
-            // Fetch failed — skip
-          }
-          return {
-            bodyJson: "{}",
-            bodyHtml: "",
-            summary: m.summary ?? "",
-            mediaId: m.id,
-          };
-        },
-      ),
-    );
+      this._format = post.format;
+      this._slug = post.slug ?? "";
+      this._slugTaken = false;
+      this._slugCheckLoading = false;
+      this._suggestedSlug = "";
+      this._suggestedSlugLoading = false;
+      this._slugSuggestionKey = "";
+      this._publishedAtInput = post.publishedAt
+        ? toLocalDateInputValue(post.publishedAt)
+        : "";
+      this._publishedAtTimeMinutes = post.publishedAt
+        ? getTimestampTimeMinutes(post.publishedAt)
+        : null;
+      this._originalPublishedAt = post.publishedAt ?? null;
+      this._initialPublishedAtTimeMinutes = this._publishedAtTimeMinutes;
+      this._initialPublishedAtInput = this._publishedAtInput;
+      this._initialSlug = this._slug.trim();
+      this._visibility = post.visibility ?? "public";
+      this._visibilityLocked = Boolean(post.replyToId);
+
+      if (post.replyToId) {
+        this._replyToId = post.replyToId;
+        await this._fetchReplyContext(post.replyToId);
+        if (requestId !== this._openEditRequestId) return;
+      }
 
-    this._editor?.populate({
-      format: post.format,
-      title: post.format === "quote" ? undefined : (post.title ?? undefined),
-      bodyJson: post.body ?? undefined,
-      url:
-        post.format === "quote"
-          ? (post.sourceUrl ?? undefined)
-          : (post.url ?? undefined),
-      quoteText: post.quoteText ?? undefined,
-      quoteAuthor:
-        post.format === "quote" ? (post.sourceName ?? undefined) : undefined,
-      rating: post.rating ?? undefined,
-      media: nonTextMedia.map(
-        (m: {
-          id: string;
-          previewUrl: string;
-          alt?: string;
-          mimeType: string;
-        }) => ({
-          id: m.id,
-          previewUrl: m.previewUrl,
-          alt: m.alt,
-          mimeType: m.mimeType,
-        }),
-      ),
-      textAttachments,
-      attachmentOrder: allMedia.map((m: { id: string }) => m.id),
-    });
+      if (post.collectionIds?.length) {
+        this._collectionIds = post.collectionIds;
+      }
 
-    this.closest("dialog")?.showModal();
-    globalThis.requestAnimationFrame(() => {
-      this._editor?.focusInput();
-      this._captureInitialSnapshot();
-    });
+      const allAttachments = post.attachments ?? [];
+      const { media, textAttachments, attachmentOrder } =
+        await resolveApiAttachments(allAttachments);
+      if (requestId !== this._openEditRequestId) return;
+
+      this._openingEdit = false;
+      await this.updateComplete;
+      if (requestId !== this._openEditRequestId) return;
+
+      // Check for a local edit draft (unsaved changes from a previous session)
+      const restored = this._restoreEditDraftIfAvailable(id);
+
+      if (!restored) {
+        this._editor?.populate({
+          format: post.format,
+          title:
+            post.format === "quote" ? undefined : (post.title ?? undefined),
+          bodyJson: post.body ?? undefined,
+          url:
+            post.format === "quote"
+              ? (post.sourceUrl ?? undefined)
+              : (post.url ?? undefined),
+          quoteText: post.quoteText ?? undefined,
+          quoteAuthor:
+            post.format === "quote"
+              ? (post.sourceName ?? undefined)
+              : undefined,
+          rating: post.rating ?? undefined,
+          media,
+          textAttachments,
+          attachmentOrder,
+        });
+      }
+
+      globalThis.requestAnimationFrame(() => {
+        if (requestId !== this._openEditRequestId) return;
+        this._focusDialogShell();
+        this._captureInitialSnapshot();
+      });
+    } catch {
+      if (requestId !== this._openEditRequestId) return;
+      this._openingEdit = false;
+      this._closeDialog();
+      this.reset();
+      showToast(this.labels.loadPostFailed, "error");
+    }
   }
 
   async openNew(options?: ComposeOpenOptions) {
@@ -660,6 +938,10 @@ export class JantComposeDialog extends LitElement {
       await this.restoreLocalDraft();
     }
 
+    if (options?.initialFormat) {
+      this._format = options.initialFormat;
+    }
+
     if (
       options?.collectionId &&
       !this._collectionIds.includes(options.collectionId)
@@ -667,6 +949,17 @@ export class JantComposeDialog extends LitElement {
       this._collectionIds = [options.collectionId, ...this._collectionIds];
     }
 
+    // Restore per-collection visibility preference (only for new posts, not restored drafts)
+    if (options?.collectionId) {
+      this._sourceCollectionId = options.collectionId;
+      const saved = JantComposeDialog._getCollectionVisibility(
+        options.collectionId,
+      );
+      if (saved) {
+        this._visibility = saved;
+      }
+    }
+
     this.closest("dialog")?.showModal();
     await this.updateComplete;
     this._editor?.focusInput();
@@ -689,6 +982,7 @@ export class JantComposeDialog extends LitElement {
       kind: "timeline-item" | "post-card" | "post-view";
       id: string;
     },
+    options?: ComposeReplyOpenOptions,
   ) {
     this.reset();
     this._replyToId = id;
@@ -696,7 +990,12 @@ export class JantComposeDialog extends LitElement {
     this._replyRefreshKind = refreshTarget?.kind ?? null;
     this._replyRefreshId = refreshTarget?.id ?? null;
     this._replyToData = replyData ?? null;
-    this._format = "note";
+    this._visibilityLocked = true;
+    this._format = options?.initialFormat ?? "note";
+
+    if (options?.restoreDraft !== false) {
+      await this.restoreLocalDraft({ expectedReplyToId: id });
+    }
 
     this.closest("dialog")?.showModal();
     await this.updateComplete;
@@ -722,9 +1021,20 @@ export class JantComposeDialog extends LitElement {
             day: "numeric",
           })
         : "";
+      const media: ReplyToMedia[] = (post.attachments ?? [])
+        .filter((a): a is ApiMediaAttachment => a.type === "media")
+        .map((m) => ({
+          url: m.url ?? m.previewUrl,
+          previewUrl: m.previewUrl,
+          alt: m.alt,
+          mimeType: m.mimeType,
+          width: m.width,
+          height: m.height,
+        }));
       this._replyToData = {
         contentHtml: (post.bodyHtml as string) ?? "",
         dateText,
+        media: media.length > 0 ? media : undefined,
       };
     } catch {
       // Parent unavailable — reply mode still works, just no preview
@@ -779,6 +1089,22 @@ export class JantComposeDialog extends LitElement {
   }
 
   private _hasContent(): boolean {
+    if (this._threadItems.length > 0) {
+      // Thread mode: check the first editor for content
+      const firstEditor = this.querySelector<JantComposeEditor>(
+        "jant-compose-editor",
+      );
+      if (!firstEditor) return false;
+      const data = firstEditor.getData();
+      return (
+        !!data.body ||
+        !!data.title.trim() ||
+        !!data.url.trim() ||
+        !!data.quoteText.trim() ||
+        data.attachments.length > 0
+      );
+    }
+
     const editor = this._editor;
     if (!editor) return false;
 
@@ -813,6 +1139,8 @@ export class JantComposeDialog extends LitElement {
       format: this._format,
       collectionIds: [...this._collectionIds],
       slug: this._slug,
+      publishedAtInput: this._publishedAtInput,
+      publishedAtTimeMinutes: this._publishedAtTimeMinutes,
       visibility: this._visibility,
       title: editorData.title,
       bodyJson: editor.getNormalizedBodyJson(),
@@ -869,8 +1197,7 @@ export class JantComposeDialog extends LitElement {
 
     // Dismiss any open dropdowns first
     if (this._showCollection) {
-      this._showCollection = false;
-      this._collectionSearch = "";
+      this._closeCollectionPicker();
     }
     if (this._showPublishPanel) {
       this._showPublishPanel = false;
@@ -941,17 +1268,19 @@ export class JantComposeDialog extends LitElement {
       this._confirmForAttachedText = false;
       this._doneAttachedPanel();
     } else if (this._confirmForDrafts) {
-      this._dispatchSubmit("draft");
       this._confirmPanelOpen = false;
-      this.reset();
-      this._openDraftsPanel();
+      if (!this._editor?.hasPendingInlineImageUploads()) {
+        this._finishDraftSaveAndOpenDrafts();
+      } else {
+        void this._saveDraftAndOpenDrafts();
+      }
     } else if (this._editPostId) {
       // Editing a published post — publish the update directly
       this._confirmPanelOpen = false;
-      this._submit("published");
+      void this._submit("published");
     } else {
       this._confirmPanelOpen = false;
-      this._submit("draft");
+      void this._submit("draft");
     }
   }
 
@@ -973,6 +1302,75 @@ export class JantComposeDialog extends LitElement {
     }
   }
 
+  /** Build the submit payload for a single thread editor (index-aware). */
+  private _buildEditorPostDetail(
+    editor: JantComposeEditor,
+    format: ComposeFormat,
+    index: number,
+    status: "published" | "draft",
+  ): ComposeSubmitDetail {
+    const editorData = editor.getData();
+    const mediaAttachments = new Map(
+      (editorData.attachments ?? []).map((a) => [a.clientId, a]),
+    );
+    const textAttachments = new Map(
+      editorData.attachedTexts.map((t) => [t.clientId, t]),
+    );
+    const orderedAttachments: ComposeSubmitAttachment[] = [];
+    for (const clientId of editorData.attachmentOrder) {
+      const media = mediaAttachments.get(clientId);
+      if (media) {
+        orderedAttachments.push({
+          type: "media",
+          clientId,
+          mediaId: media.mediaId,
+          alt: media.alt || undefined,
+        });
+        continue;
+      }
+      const text = textAttachments.get(clientId);
+      if (text?.bodyJson) {
+        orderedAttachments.push({
+          type: "text",
+          clientId,
+          bodyJson: text.bodyJson,
+          summary: text.summary,
+          mediaId: text.mediaId,
+          originalBodyJson: normalizeComposeDoc(text.originalBodyJson ?? null),
+        });
+      }
+    }
+    // Only root post (index 0) carries shared publish settings
+    const isRoot = index === 0;
+    return {
+      format,
+      title: editorData.title,
+      body: editorData.body,
+      url: editorData.url,
+      quoteText: editorData.quoteText,
+      quoteAuthor: editorData.quoteAuthor,
+      status,
+      slug: isRoot ? this._slug.trim() || undefined : undefined,
+      publishedAt: isRoot ? this._getPublishedAtSubmitValue(status) : undefined,
+      visibility: isRoot
+        ? this._visibilityLocked
+          ? undefined
+          : this._visibility
+        : undefined,
+      rating: editorData.rating,
+      collectionIds: isRoot ? [...this._collectionIds] : [],
+      attachments: orderedAttachments,
+      replyToId: isRoot ? (this._replyToId ?? undefined) : undefined,
+      replyThreadRootId: isRoot
+        ? (this._replyThreadRootId ?? undefined)
+        : undefined,
+      replyRefreshKind: isRoot
+        ? (this._replyRefreshKind ?? undefined)
+        : undefined,
+      replyRefreshId: isRoot ? (this._replyRefreshId ?? undefined) : undefined,
+    };
+  }
+
   private _buildSubmitDetail(
     status: "published" | "draft",
   ): ComposeSubmitDetail | null {
@@ -1025,6 +1423,7 @@ export class JantComposeDialog extends LitElement {
       quoteText: editorData.quoteText,
       quoteAuthor: editorData.quoteAuthor,
       slug: this._slug.trim() || undefined,
+      publishedAt: this._getPublishedAtSubmitValue(status),
       status,
       visibility: this._visibilityLocked ? undefined : this._visibility,
       rating: editorData.rating,
@@ -1032,18 +1431,55 @@ export class JantComposeDialog extends LitElement {
       attachments: orderedAttachments,
       editPostId: this._editPostId ?? this._draftSourceId ?? undefined,
       replyToId: this._replyToId ?? undefined,
+      quietReply: this._quietReply || undefined,
       replyThreadRootId: this._replyThreadRootId ?? undefined,
       replyRefreshKind: this._replyRefreshKind ?? undefined,
       replyRefreshId: this._replyRefreshId ?? undefined,
     };
   }
 
-  private _focusBlockedSubmitField(): boolean {
+  private _focusBlockedSubmitField(status: "published" | "draft"): boolean {
+    if (
+      status === "published" &&
+      this._getPublishedAtValidationMessage() !== null
+    ) {
+      this._revealPublishedAtField();
+      return true;
+    }
+
     if (this._getSlugValidationMessage()) {
       this._revealSlugField();
       return true;
     }
 
+    // ── Thread mode: validate each editor against its own format ──────
+    if (this._threadItems.length > 0) {
+      const editors = Array.from(
+        this.querySelectorAll<JantComposeEditor>("jant-compose-editor"),
+      );
+      for (let i = 0; i < this._threadItems.length; i++) {
+        const item = this._threadItems[i];
+        const editor = editors[i];
+        if (!editor) continue;
+        if (editor.getUrlValidationMessage()) {
+          editor.revealUrlValidation();
+          editor.focusUrlInput("end");
+          return true;
+        }
+        if (editor.getLinkTitleValidationMessage()) {
+          editor.revealLinkTitleValidation();
+          editor.focusLinkTitleInput("end");
+          return true;
+        }
+        if (item.format === "quote" && !editor._quoteText.trim()) {
+          editor.focusInput("end");
+          return true;
+        }
+      }
+      return false;
+    }
+
+    // ── Single-post mode ─────────────────────────────────────────────
     const editor = this._editor;
     if (!editor) return false;
 
@@ -1069,17 +1505,65 @@ export class JantComposeDialog extends LitElement {
 
   private _dispatchSubmit(status: "published" | "draft"): boolean {
     if (this._loading) return false;
+    if (this._focusBlockedSubmitField(status)) return false;
+    if (!this._draftSourceId) {
+      this._cancelDraftSaveTimer();
+      this._saveDraftToStorage();
+    }
+
+    // ── Thread mode ────────────────────────────────────────────────────
+    if (this._threadItems.length > 0) {
+      if (this._threadItems.length > MAX_THREAD_POSTS) {
+        showToast(this._getThreadLimitMessage(), "error");
+        return false;
+      }
+
+      const editors = Array.from(
+        this.querySelectorAll<JantComposeEditor>("jant-compose-editor"),
+      );
+      if (editors.length !== this._threadItems.length) return false;
+
+      const threadPosts: ComposeSubmitDetail[] = [];
+      const allPending: ComposeAttachment[] = [];
+
+      for (let i = 0; i < this._threadItems.length; i++) {
+        const item = this._threadItems[i];
+        const editor = editors[i];
+        if (!editor) return false;
+        threadPosts.push(
+          this._buildEditorPostDetail(editor, item.format, i, status),
+        );
+        allPending.push(
+          ...(editor._attachments ?? []).filter(
+            (a) =>
+              a.status === "pending" ||
+              a.status === "processing" ||
+              a.status === "uploading",
+          ),
+        );
+      }
+      this.dispatchEvent(
+        new CustomEvent("jant:compose-submit-deferred", {
+          bubbles: true,
+          detail: {
+            ...threadPosts[0],
+            editPostId: this._editPostId ?? this._draftSourceId ?? undefined,
+            threadPosts,
+            pendingAttachments: allPending,
+          },
+        }),
+      );
+      return true;
+    }
+
+    // ── Single-post mode ───────────────────────────────────────────────
     const editor = this._editor;
     if (!editor) return false;
-    if (this._focusBlockedSubmitField()) {
-      return false;
-    }
 
     const detail = this._buildSubmitDetail(status);
     if (!detail) return false;
 
-    const attachments = editor._attachments ?? [];
-    const pendingAttachments = attachments.filter(
+    const pendingAttachments = (editor._attachments ?? []).filter(
       (a) =>
         a.status === "pending" ||
         a.status === "processing" ||
@@ -1095,9 +1579,30 @@ export class JantComposeDialog extends LitElement {
     return true;
   }
 
-  private _submit(status: "published" | "draft") {
-    this._showPublishPanel = false;
-    this._clearDraftFromStorage();
+  private _saveDraftAndOpenDrafts() {
+    this._finishDraftSaveAndOpenDrafts();
+  }
+
+  private _finishDraftSaveAndOpenDrafts() {
+    if (!this._dispatchSubmit("draft")) return;
+    this.reset();
+    // The bridge writes the draft asynchronously via fetch after we dispatch
+    // the submit event, so fetching the drafts list immediately would miss
+    // the new draft. Wait for the bridge's completion event before loading.
+    const onComplete = () => {
+      clearTimeout(fallbackTimer);
+      if (!this.isConnected) return;
+      void this._openDraftsPanel();
+    };
+    const fallbackTimer = globalThis.setTimeout(() => {
+      document.removeEventListener("jant:compose-submit-complete", onComplete);
+    }, 10_000);
+    document.addEventListener("jant:compose-submit-complete", onComplete, {
+      once: true,
+    });
+  }
+
+  private _finishSubmit(status: "published" | "draft") {
     if (!this._dispatchSubmit(status)) return;
     if (this.pageMode) {
       this._loading = true;
@@ -1107,6 +1612,11 @@ export class JantComposeDialog extends LitElement {
     this.reset();
   }
 
+  private _submit(status: "published" | "draft") {
+    this._showPublishPanel = false;
+    this._finishSubmit(status);
+  }
+
   private _toggleCollection(id: string) {
     if (this._collectionIds.includes(id)) {
       this._collectionIds = this._collectionIds.filter((cid) => cid !== id);
@@ -1120,13 +1630,303 @@ export class JantComposeDialog extends LitElement {
     const first = collections.find((c) => c.id === ids[0]);
     if (!first) return "";
     if (ids.length === 1) return first.title;
+    if (ids.length === 2) {
+      const second = collections.find((c) => c.id === ids[1]);
+      return second ? `${first.title}, ${second.title}` : first.title;
+    }
     return this.labels.collectionCountLabel
       .replace("%name%", first.title)
       .replace("%count%", String(ids.length - 1));
   }
 
-  private _cancelSlugTimers() {
-    if (this._slugCheckTimer !== null) {
+  private _prepareCollectionPickerOrder() {
+    this._collectionPickerOrder = getSelectedFirstOrder(
+      this.collections ?? [],
+      this._collectionIds,
+    );
+  }
+
+  private _focusCollectionPickerInitialTarget() {
+    this.querySelector<HTMLElement>(
+      ".compose-collection-search-input, .compose-collection-option, .compose-collection-add-action",
+    )?.focus();
+  }
+
+  private _focusCollectionSearchInput() {
+    const searchInput = this.querySelector<HTMLInputElement>(
+      ".compose-collection-search-input",
+    );
+    if (!searchInput) return false;
+
+    searchInput.focus();
+    const cursor = searchInput.value.length;
+    searchInput.setSelectionRange(cursor, cursor);
+    return true;
+  }
+
+  private _closeCollectionPicker(options?: {
+    restoreFocus?: "trigger" | "editor";
+  }) {
+    this._showCollection = false;
+    this._collectionSearch = "";
+    this._suppressedCollectionOptionId = null;
+    this._suppressCollectionOptionClickUntil = 0;
+
+    if (options?.restoreFocus === "trigger") {
+      this.updateComplete.then(() => {
+        this.querySelector<HTMLElement>(".compose-collection-trigger")?.focus();
+      });
+      return;
+    }
+
+    if (options?.restoreFocus === "editor") {
+      this._restorePageEditorFocus();
+    }
+  }
+
+  private _suppressNextCollectionOptionClick(collectionId: string) {
+    this._suppressedCollectionOptionId = collectionId;
+    this._suppressCollectionOptionClickUntil = Date.now() + 250;
+  }
+
+  private _isTouchViewport() {
+    return (
+      globalThis.matchMedia?.("(hover: none) and (pointer: coarse)")?.matches ??
+      false
+    );
+  }
+
+  private _shouldAutofocusCollectionPicker() {
+    return !this._isTouchViewport();
+  }
+
+  private _shouldAutofocusFormatInput() {
+    return !this._isTouchViewport();
+  }
+
+  private _scheduleCollectionPickerAutofocus() {
+    if (!this._shouldAutofocusCollectionPicker()) return;
+
+    globalThis.requestAnimationFrame(() => {
+      if (!this._showCollection) return;
+      this._focusCollectionPickerInitialTarget();
+    });
+  }
+
+  private _scheduleCollectionSearchFocus() {
+    globalThis.requestAnimationFrame(() => {
+      if (!this._showCollection) return;
+      if (!this._focusCollectionSearchInput()) {
+        this._focusCollectionPickerInitialTarget();
+      }
+    });
+  }
+
+  private _isPrintableCollectionSearchKey(key: string) {
+    return key.length === 1 && key.trim().length > 0;
+  }
+
+  private _handleCollectionTriggerKeydown = (
+    event: globalThis.KeyboardEvent,
+  ) => {
+    if (
+      event.defaultPrevented ||
+      event.isComposing ||
+      event.altKey ||
+      event.ctrlKey ||
+      event.metaKey
+    ) {
+      return;
+    }
+
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      this._scheduleCollectionSearchFocus();
+      return;
+    }
+
+    if (
+      !this._showCollection ||
+      !this._isPrintableCollectionSearchKey(event.key)
+    ) {
+      return;
+    }
+
+    event.preventDefault();
+    this._collectionSearch += event.key;
+    this._scheduleCollectionSearchFocus();
+  };
+
+  private _getCollectionOptionElements() {
+    return Array.from(
+      this.querySelectorAll<HTMLButtonElement>(".compose-collection-option"),
+    );
+  }
+
+  private _handleCollectionSearchKeydown = (
+    event: globalThis.KeyboardEvent,
+  ) => {
+    if (
+      event.defaultPrevented ||
+      event.isComposing ||
+      event.altKey ||
+      event.ctrlKey ||
+      event.metaKey
+    ) {
+      return;
+    }
+
+    if (event.key === "Enter") {
+      event.preventDefault();
+      this._closeCollectionPicker({ restoreFocus: "trigger" });
+      return;
+    }
+
+    if (event.key !== "ArrowDown") {
+      return;
+    }
+
+    const [firstOption] = this._getCollectionOptionElements();
+    const addAction = this.querySelector<HTMLButtonElement>(
+      ".compose-collection-add-action",
+    );
+    const nextTarget = firstOption ?? addAction;
+    if (!nextTarget) return;
+
+    event.preventDefault();
+    nextTarget.focus();
+  };
+
+  private _handleCollectionOptionKeydown = (
+    event: globalThis.KeyboardEvent,
+    collectionId: string,
+  ) => {
+    if (
+      event.defaultPrevented ||
+      event.isComposing ||
+      event.altKey ||
+      event.ctrlKey ||
+      event.metaKey
+    ) {
+      return;
+    }
+
+    const options = this._getCollectionOptionElements();
+    const currentTarget = event.currentTarget as HTMLButtonElement | null;
+    const currentIndex = currentTarget ? options.indexOf(currentTarget) : -1;
+
+    if (event.key === "ArrowDown") {
+      const addAction = this.querySelector<HTMLButtonElement>(
+        ".compose-collection-add-action",
+      );
+      const nextTarget =
+        currentIndex >= 0
+          ? (options[currentIndex + 1] ?? addAction)
+          : options[0];
+      if (!nextTarget) return;
+
+      event.preventDefault();
+      nextTarget.focus();
+      return;
+    }
+
+    if (event.key === "ArrowUp") {
+      const searchInput = this.querySelector<HTMLInputElement>(
+        ".compose-collection-search-input",
+      );
+      const previousTarget =
+        currentIndex > 0 ? options[currentIndex - 1] : searchInput;
+      if (!previousTarget) return;
+
+      event.preventDefault();
+      previousTarget.focus();
+      return;
+    }
+
+    if (event.key === " " || event.key === "Spacebar") {
+      event.preventDefault();
+      this._suppressNextCollectionOptionClick(collectionId);
+      this._toggleCollection(collectionId);
+      return;
+    }
+
+    if (event.key === "Enter") {
+      event.preventDefault();
+      this._suppressNextCollectionOptionClick(collectionId);
+      this._closeCollectionPicker({ restoreFocus: "trigger" });
+    }
+  };
+
+  private _handleCollectionOptionClick = (collectionId: string) => {
+    if (
+      this._suppressedCollectionOptionId === collectionId &&
+      Date.now() <= this._suppressCollectionOptionClickUntil
+    ) {
+      this._suppressedCollectionOptionId = null;
+      this._suppressCollectionOptionClickUntil = 0;
+      return;
+    }
+
+    this._suppressedCollectionOptionId = null;
+    this._suppressCollectionOptionClickUntil = 0;
+    this._toggleCollection(collectionId);
+  };
+
+  private _handleCollectionAddActionKeydown = (
+    event: globalThis.KeyboardEvent,
+  ) => {
+    if (
+      event.defaultPrevented ||
+      event.isComposing ||
+      event.altKey ||
+      event.ctrlKey ||
+      event.metaKey ||
+      event.key !== "ArrowUp"
+    ) {
+      return;
+    }
+
+    const options = this._getCollectionOptionElements();
+    const searchInput = this.querySelector<HTMLInputElement>(
+      ".compose-collection-search-input",
+    );
+    const previousTarget = options.at(-1) ?? searchInput;
+    if (!previousTarget) return;
+
+    event.preventDefault();
+    previousTarget.focus();
+  };
+
+  private _updateCollectionPopoverSide() {
+    const trigger = this.querySelector<HTMLElement>(
+      ".compose-collection-trigger",
+    );
+    const popover = this.querySelector<HTMLElement>(
+      ".compose-collection-popover[data-popover]",
+    );
+    if (!trigger || !popover) return;
+
+    const visualViewport = globalThis.visualViewport;
+    const viewportTop = visualViewport?.offsetTop ?? 0;
+    const viewportBottom =
+      viewportTop + (visualViewport?.height ?? globalThis.innerHeight);
+    const triggerRect = trigger.getBoundingClientRect();
+    const edgePadding = 12;
+    const gap = 4;
+    const availableBelow = Math.max(
+      0,
+      viewportBottom - edgePadding - triggerRect.bottom - gap,
+    );
+    const availableAbove = Math.max(
+      0,
+      triggerRect.top - viewportTop - edgePadding - gap,
+    );
+
+    popover.dataset.side = availableBelow >= availableAbove ? "bottom" : "top";
+  }
+
+  private _cancelSlugTimers() {
+    if (this._slugCheckTimer !== null) {
       clearTimeout(this._slugCheckTimer);
       this._slugCheckTimer = null;
     }
@@ -1310,6 +2110,7 @@ export class JantComposeDialog extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
+    this._syncPublishPanelPresentation();
     this.addEventListener("keydown", this._handleKeydown);
     this.addEventListener("jant:alt-panel-open", this._handleAltPanelOpen);
     this.addEventListener("jant:alt-panel-close", this._handleAltPanelClose);
@@ -1339,11 +2140,24 @@ export class JantComposeDialog extends LitElement {
 
     // Flush pending draft save before page unload (covers refresh/close mid-debounce)
     window.addEventListener("beforeunload", this._onBeforeUnload);
+    window.addEventListener("resize", this._handleViewportChange);
+    window.addEventListener("scroll", this._handleViewportChange, {
+      passive: true,
+    });
+    globalThis.visualViewport?.addEventListener(
+      "resize",
+      this._handleViewportChange,
+    );
+    globalThis.visualViewport?.addEventListener(
+      "scroll",
+      this._handleViewportChange,
+    );
 
     // Intercept native dialog cancel (ESC) to route through requestClose
     this._dialogEl = this.closest("dialog");
     if (this._dialogEl) {
       this._dialogEl.addEventListener("cancel", this._handleDialogCancel);
+      this._dialogEl.addEventListener("mousedown", this._handleDialogMousedown);
       this._dialogEl.addEventListener("click", this._handleDialogClick);
     }
 
@@ -1383,12 +2197,26 @@ export class JantComposeDialog extends LitElement {
       this._handleFullscreenClose as EventListener,
     );
     window.removeEventListener("beforeunload", this._onBeforeUnload);
+    window.removeEventListener("resize", this._handleViewportChange);
+    window.removeEventListener("scroll", this._handleViewportChange);
+    globalThis.visualViewport?.removeEventListener(
+      "resize",
+      this._handleViewportChange,
+    );
+    globalThis.visualViewport?.removeEventListener(
+      "scroll",
+      this._handleViewportChange,
+    );
     this._cancelSlugTimers();
     this._destroyAttachedEditor();
     this._cancelDraftSaveTimer();
 
     if (this._dialogEl) {
       this._dialogEl.removeEventListener("cancel", this._handleDialogCancel);
+      this._dialogEl.removeEventListener(
+        "mousedown",
+        this._handleDialogMousedown,
+      );
       this._dialogEl.removeEventListener("click", this._handleDialogClick);
       this._dialogEl = null;
     }
@@ -1410,6 +2238,25 @@ export class JantComposeDialog extends LitElement {
     this._clearFilePickerEscapeState();
   };
 
+  private _syncPublishPanelPresentation() {
+    const nextValue =
+      globalThis.matchMedia?.(COMPOSE_PUBLISH_PANEL_FULLSCREEN_QUERY)
+        ?.matches ?? false;
+    if (nextValue !== this._publishPanelFullscreen) {
+      this._publishPanelFullscreen = nextValue;
+    }
+  }
+
+  private _handleViewportChange = () => {
+    this._syncPublishPanelPresentation();
+    if (this._showPublishPanel) {
+      this.updateComplete.then(() => this._updatePublishPanelLayout());
+    }
+    if (this._showCollection) {
+      this.updateComplete.then(() => this._updateCollectionPopoverSide());
+    }
+  };
+
   private _handleDialogCancel = (e: Event) => {
     e.preventDefault();
     if (this._shouldIgnoreEscapeClose()) return;
@@ -1417,8 +2264,19 @@ export class JantComposeDialog extends LitElement {
     this.requestClose();
   };
 
+  private _handleDialogMousedown = (e: Event) => {
+    // Track whether the mousedown originated on the backdrop (the <dialog>
+    // itself). When the user drag-selects text inside the editor and the
+    // pointer overshoots to the backdrop, the subsequent click event fires
+    // with target === dialog. Without this guard, that click triggers
+    // requestClose() and the unsaved-changes confirmation pops up.
+    this._mousedownOnBackdrop = e.target === this._dialogEl;
+  };
+
   private _handleDialogClick = (e: Event) => {
     if (!this._dialogEl || e.target !== this._dialogEl) return;
+    // Only treat as backdrop click when mousedown also started on the backdrop
+    if (!this._mousedownOnBackdrop) return;
 
     const mouseEvent = e as MouseEvent;
     const hitTarget = document.elementFromPoint(
@@ -1435,8 +2293,17 @@ export class JantComposeDialog extends LitElement {
     this.requestClose();
   };
 
-  private _focusPageEditorEnd() {
-    this.updateComplete.then(() => this._editor?.focusInput("end"));
+  private _focusDialogShell() {
+    const shell = this.querySelector<HTMLElement>(".compose-dialog-inner");
+    if (shell) {
+      shell.focus();
+      return;
+    }
+    this._dialogEl?.focus();
+  }
+
+  private _restorePageEditorFocus() {
+    this.updateComplete.then(() => this._editor?.focusInput());
   }
 
   private _dismissEscapeOverlay(): boolean {
@@ -1456,21 +2323,18 @@ export class JantComposeDialog extends LitElement {
     }
 
     if (this._showCollection) {
-      this._showCollection = false;
-      this._collectionSearch = "";
-      this._focusPageEditorEnd();
+      this._closeCollectionPicker({ restoreFocus: "editor" });
       return true;
     }
 
     if (this._showPublishPanel) {
-      this._showPublishPanel = false;
-      this._focusPageEditorEnd();
+      this._closePublishPanel(true);
       return true;
     }
 
     if (this._altPanelOpen) {
       this._closeAltPanel();
-      this._focusPageEditorEnd();
+      this._restorePageEditorFocus();
       return true;
     }
 
@@ -1513,10 +2377,32 @@ export class JantComposeDialog extends LitElement {
         return;
       }
       if (!this._canPublish()) {
-        this._focusBlockedSubmitField();
+        this._focusBlockedSubmitField("published");
         return;
       }
-      this._submit("published");
+      void this._submit("published");
+    } else if (
+      (ke.metaKey || ke.ctrlKey) &&
+      !ke.altKey &&
+      !ke.shiftKey &&
+      ke.key >= "1" &&
+      ke.key <= String(JantComposeDialog._FORMATS.length)
+    ) {
+      ke.preventDefault();
+      const target = JantComposeDialog._FORMATS[Number(ke.key) - 1];
+      if (this._threadItems.length > 0) {
+        const editor = this.querySelectorAll<JantComposeEditor>(
+          "jant-compose-editor",
+        )[this._focusedThreadIndex];
+        editor?.dispatchEvent(
+          new CustomEvent("jant:thread-format-change", {
+            detail: { format: target },
+            bubbles: true,
+          }),
+        );
+      } else {
+        this._switchFormat(target);
+      }
     }
   };
 
@@ -1555,8 +2441,12 @@ export class JantComposeDialog extends LitElement {
         e.detail.json as import("@tiptap/core").JSONContent,
         e.detail.title,
         e.detail.showTitle,
+        e.detail.selection,
       );
-      this.updateComplete.then(() => editor.focusInput("end"));
+      // Adopt any in-flight inline image uploads from the fullscreen editor
+      // so blob: placeholder URLs get replaced when uploads complete.
+      editor.adoptPendingUploads();
+      this.updateComplete.then(() => editor.focusSelection(e.detail.selection));
     }
     this._replyExpanded = e.detail.replyExpanded;
   };
@@ -1680,7 +2570,7 @@ export class JantComposeDialog extends LitElement {
         | DraftsResponse
         | Record<string, unknown>[];
       const posts = Array.isArray(json) ? json : (json.posts ?? []);
-      this._drafts = (posts as Record<string, unknown>[]).map(
+      const allDraftItems = (posts as Record<string, unknown>[]).map(
         (p): DraftItem => ({
           id: p.id as string,
           format: p.format as ComposeFormat,
@@ -1698,15 +2588,23 @@ export class JantComposeDialog extends LitElement {
           replyToId: (p.replyToId as string) ?? null,
           updatedAt: p.updatedAt as number,
           mediaAttachments: (
-            (p.mediaAttachments as DraftItem["mediaAttachments"]) ?? []
-          ).map((m) => ({
-            id: m.id,
-            previewUrl: m.previewUrl,
-            alt: m.alt,
-            mimeType: m.mimeType,
-          })),
+            (p.attachments as ApiAttachment[] | undefined) ?? []
+          )
+            .filter((a): a is ApiMediaAttachment => a.type === "media")
+            .map((m) => ({
+              id: m.id,
+              previewUrl: m.previewUrl,
+              alt: m.alt ?? null,
+              mimeType: m.mimeType,
+            })),
         }),
       );
+      // Filter out thread reply drafts: posts whose replyToId points to another
+      // draft in the same list are inner thread posts — only the root should appear.
+      const draftIds = new Set(allDraftItems.map((d) => d.id));
+      this._drafts = allDraftItems.filter(
+        (d) => !d.replyToId || !draftIds.has(d.replyToId),
+      );
     } catch {
       this._draftsError = "Could not load drafts. Try again.";
       this._drafts = [];
@@ -1721,6 +2619,36 @@ export class JantComposeDialog extends LitElement {
     this.updateComplete.then(() => this._editor?.focusInput());
   }
 
+  /**
+   * Resolve text attachments for a post's media list and call editor.populate().
+   * Shared between single-post and thread draft loading.
+   */
+  private async _populateEditorFromPost(
+    editor: JantComposeEditor,
+    post: ComposePostResponse,
+  ) {
+    const allAttachments = post.attachments ?? [];
+    const { media, textAttachments, attachmentOrder } =
+      await resolveApiAttachments(allAttachments);
+
+    editor.populate({
+      format: post.format,
+      title: post.format === "quote" ? undefined : (post.title ?? undefined),
+      bodyJson: post.body ?? undefined,
+      url:
+        post.format === "quote"
+          ? (post.sourceUrl ?? undefined)
+          : (post.url ?? undefined),
+      quoteText: post.quoteText ?? undefined,
+      quoteAuthor:
+        post.format === "quote" ? (post.sourceName ?? undefined) : undefined,
+      rating: post.rating ?? undefined,
+      media,
+      textAttachments,
+      attachmentOrder,
+    });
+  }
+
   private async _loadDraft(id: string) {
     this._draftsPanelOpen = false;
     this._draftMenuOpenId = null;
@@ -1738,6 +2666,16 @@ export class JantComposeDialog extends LitElement {
     this._suggestedSlug = "";
     this._suggestedSlugLoading = false;
     this._slugSuggestionKey = "";
+    this._publishedAtInput = post.publishedAt
+      ? toLocalDateInputValue(post.publishedAt)
+      : "";
+    this._publishedAtTimeMinutes = post.publishedAt
+      ? getTimestampTimeMinutes(post.publishedAt)
+      : null;
+    this._originalPublishedAt = post.publishedAt ?? null;
+    this._initialPublishedAtTimeMinutes = this._publishedAtTimeMinutes;
+    this._initialPublishedAtInput = this._publishedAtInput;
+    this._initialSlug = this._slug.trim();
     this._visibility = post.visibility ?? "public";
     this._visibilityLocked = Boolean(post.replyToId);
 
@@ -1745,83 +2683,128 @@ export class JantComposeDialog extends LitElement {
       this._collectionIds = post.collectionIds;
     }
 
-    // Restore reply context if this draft was a reply
+    // Restore reply context if this draft was a reply to a published post
     if (post.replyToId) {
       this._replyToId = post.replyToId;
       await this._fetchReplyContext(post.replyToId);
     }
 
-    await this.updateComplete;
+    // ── Thread draft: check if this root has other draft posts in its thread ──
+    const isThreadRoot =
+      post.threadId === post.id || post.threadId === undefined;
+    if (isThreadRoot) {
+      // Fetch all drafts to find other posts in this thread
+      try {
+        const draftsRes = await fetch("/api/posts?status=draft&limit=50");
+        if (draftsRes.ok) {
+          const draftsJson = (await draftsRes.json()) as
+            | { posts?: Record<string, unknown>[] }
+            | Record<string, unknown>[];
+          const allDrafts = Array.isArray(draftsJson)
+            ? draftsJson
+            : (draftsJson.posts ?? []);
+          // Collect other posts in the same thread, sorted by their implied order
+          // (they have replyToId chains starting from the root)
+          const threadDrafts = (allDrafts as Record<string, unknown>[])
+            .filter(
+              (p) =>
+                p.id !== post.id &&
+                p.threadId === post.id &&
+                p.status === "draft",
+            )
+            .map((p) => ({
+              id: p.id as string,
+              format: p.format as ComposeFormat,
+              replyToId: (p.replyToId as string) ?? null,
+              title: (p.title as string) ?? null,
+              body: (p.body as string) ?? null,
+              url: (p.url as string) ?? null,
+              sourceUrl: (p.sourceUrl as string) ?? null,
+              sourceName: (p.sourceName as string) ?? null,
+              quoteText: (p.quoteText as string) ?? null,
+              rating: (p.rating as number) ?? null,
+              attachments: (p.attachments as ApiAttachment[] | undefined) ?? [],
+              visibility: (p.visibility as ComposeVisibility) ?? null,
+            }));
+
+          if (threadDrafts.length > 0) {
+            // Sort by reply chain: walk replyToId to get ordered list
+            const ordered: typeof threadDrafts = [];
+            let prevId: string = post.id;
+            for (let i = 0; i < threadDrafts.length; i++) {
+              const next = threadDrafts.find((p) => p.replyToId === prevId);
+              if (!next) break;
+              ordered.push(next);
+              prevId = next.id;
+            }
+            // Any remaining posts not in chain (shouldn't happen, but be safe)
+            for (const p of threadDrafts) {
+              if (!ordered.includes(p)) ordered.push(p);
+            }
 
-    // Separate text media items from other media attachments
-    const allMedia = post.mediaAttachments ?? [];
-    const nonTextMedia = allMedia.filter(
-      (m: { mimeType: string }) => !m.mimeType.startsWith("text/"),
-    );
-    const textMedia = allMedia.filter(
-      (m: { mimeType: string }) => m.mimeType === "text/x-tiptap+json",
-    );
+            // Enter thread mode
+            this._threadItems = [
+              { id: crypto.randomUUID(), format: post.format },
+              ...ordered.map((p) => ({
+                id: crypto.randomUUID(),
+                format: p.format,
+              })),
+            ];
+            this._focusedThreadIndex = 0;
+
+            await this.updateComplete;
+
+            const editors = Array.from(
+              this.querySelectorAll<JantComposeEditor>("jant-compose-editor"),
+            );
+
+            // Populate root editor
+            const rootEditor = editors[0];
+            if (rootEditor) {
+              await this._populateEditorFromPost(rootEditor, post);
+            }
 
-    // Fetch text content for TipTap text media items (stored as { json, html } envelope)
-    const textAttachments = await Promise.all(
-      textMedia.map(
-        async (m: { id: string; url?: string; summary?: string }) => {
-          try {
-            const textRes = await fetch(`/api/media/${m.id}/content`);
-            if (textRes.ok) {
-              const raw = await textRes.text();
-              const envelope = JSON.parse(raw) as {
-                json?: unknown;
-                html?: string;
-              };
-              return {
-                bodyJson: JSON.stringify(envelope.json ?? {}),
-                bodyHtml: envelope.html ?? "",
-                summary: m.summary ?? "",
-                mediaId: m.id,
-              };
+            // Populate reply editors
+            for (let i = 0; i < ordered.length; i++) {
+              const replyEditor = editors[i + 1];
+              if (!replyEditor) continue;
+              const p = ordered[i];
+              await this._populateEditorFromPost(replyEditor, {
+                id: p.id,
+                threadId: post.id,
+                format: p.format,
+                replyToId: p.replyToId,
+                title: p.title,
+                body: p.body,
+                url: p.url,
+                sourceUrl: p.sourceUrl,
+                sourceName: p.sourceName,
+                quoteText: p.quoteText,
+                rating: p.rating,
+                attachments: p.attachments,
+                visibility: p.visibility,
+              });
             }
-          } catch {
-            // Fetch failed — skip
+
+            globalThis.requestAnimationFrame(() => {
+              editors[0]?.focusInput();
+              this._captureInitialSnapshot();
+            });
+            return;
           }
-          return {
-            bodyJson: "{}",
-            bodyHtml: "",
-            summary: m.summary ?? "",
-            mediaId: m.id,
-          };
-        },
-      ),
-    );
+        }
+      } catch {
+        // Fall through to single-post load if thread fetch fails
+      }
+    }
 
-    this._editor?.populate({
-      format: post.format,
-      title: post.format === "quote" ? undefined : (post.title ?? undefined),
-      bodyJson: post.body ?? undefined,
-      url:
-        post.format === "quote"
-          ? (post.sourceUrl ?? undefined)
-          : (post.url ?? undefined),
-      quoteText: post.quoteText ?? undefined,
-      quoteAuthor:
-        post.format === "quote" ? (post.sourceName ?? undefined) : undefined,
-      rating: post.rating ?? undefined,
-      media: nonTextMedia.map(
-        (m: {
-          id: string;
-          previewUrl: string;
-          alt?: string;
-          mimeType: string;
-        }) => ({
-          id: m.id,
-          previewUrl: m.previewUrl,
-          alt: m.alt,
-          mimeType: m.mimeType,
-        }),
-      ),
-      textAttachments,
-      attachmentOrder: allMedia.map((m: { id: string }) => m.id),
-    });
+    // ── Single-post draft ─────────────────────────────────────────────
+    await this.updateComplete;
+
+    const editor = this._editor;
+    if (editor) {
+      await this._populateEditorFromPost(editor, post);
+    }
 
     globalThis.requestAnimationFrame(() => {
       this._editor?.focusInput();
@@ -1862,18 +2845,33 @@ export class JantComposeDialog extends LitElement {
     return null;
   }
 
+  private _getThreadLimitMessage(): string {
+    return (
+      this.labels.threadLimitReached ||
+      `Threads can include up to ${MAX_THREAD_POSTS} posts.`
+    );
+  }
+
   // ── Local draft auto-save (globalThis.localStorage) ──────────────────────────
 
   private static _DRAFT_KEY = "jant:compose-draft";
+  private static _EDIT_DRAFT_KEY_PREFIX = "jant:compose-edit:";
   private static _DRAFT_MAX_AGE = 7 * 24 * 60 * 60 * 1000; // 7 days
 
+  private _currentDraftStorageKey(): string {
+    if (this._editPostId) {
+      return JantComposeDialog._EDIT_DRAFT_KEY_PREFIX + this._editPostId;
+    }
+    return JantComposeDialog._DRAFT_KEY;
+  }
+
   private _onContentChanged = () => {
     this.requestUpdate();
     if (!this._hasManualSlug()) {
       this._scheduleSuggestedSlugRefresh();
     }
-    // Schedule localStorage auto-save for new-post mode only
-    if (!this._editPostId && !this._draftSourceId) {
+    // Schedule localStorage auto-save (new-post and edit modes, not draft-load)
+    if (!this._draftSourceId) {
       this._scheduleDraftSave();
     }
   };
@@ -1910,6 +2908,86 @@ export class JantComposeDialog extends LitElement {
   };
 
   private _saveDraftToStorage() {
+    // ── Thread mode ────────────────────────────────────────────────────
+    if (this._threadItems.length > 0) {
+      const editors = Array.from(
+        this.querySelectorAll<JantComposeEditor>("jant-compose-editor"),
+      );
+      const hasContent = editors.some((editor) => {
+        const data = editor.getData();
+        return (
+          !!data.body ||
+          !!data.title.trim() ||
+          !!data.url.trim() ||
+          !!data.quoteText.trim() ||
+          data.rating > 0 ||
+          data.attachedTexts.length > 0 ||
+          data.attachments.length > 0
+        );
+      });
+
+      if (!hasContent) {
+        globalThis.localStorage.removeItem(this._currentDraftStorageKey());
+        return;
+      }
+
+      const threadItems = this._threadItems
+        .map((item, i) => {
+          const editor = editors[i];
+          if (!editor) return null;
+          const data = editor.getData();
+          return {
+            format: item.format,
+            title: data.title,
+            bodyJson: editor.getNormalizedBodyJson(),
+            url: data.url,
+            quoteText: data.quoteText,
+            quoteAuthor: data.quoteAuthor,
+            attachedTexts: data.attachedTexts.map((t) => ({
+              clientId: t.clientId,
+              bodyJson: t.bodyJson,
+              bodyHtml: t.bodyHtml,
+              summary: t.summary,
+            })),
+            attachmentOrder: [...data.attachmentOrder],
+          };
+        })
+        .filter((item): item is NonNullable<typeof item> => item !== null);
+
+      const draft: LocalDraft = {
+        format: this._threadItems[0]?.format ?? this._format,
+        title: "",
+        bodyJson: null,
+        url: "",
+        quoteText: "",
+        quoteAuthor: "",
+        slug: this._slug,
+        publishedAtInput: this._publishedAtInput,
+        publishedAtTimeMinutes: this._publishedAtTimeMinutes,
+        visibility: this._visibility,
+        rating: 0,
+        showTitle: false,
+        showRating: false,
+        collectionIds: [...this._collectionIds],
+        replyToId: this._replyToId,
+        attachedTexts: [],
+        attachmentOrder: [],
+        threadItems,
+        savedAt: Date.now(),
+      };
+
+      try {
+        globalThis.localStorage.setItem(
+          this._currentDraftStorageKey(),
+          JSON.stringify(draft),
+        );
+      } catch {
+        // Storage full or unavailable — silently ignore
+      }
+      return;
+    }
+
+    // ── Single-post mode ───────────────────────────────────────────────
     const editor = this._editor;
     if (!editor) return;
 
@@ -1936,6 +3014,8 @@ export class JantComposeDialog extends LitElement {
       quoteText: data.quoteText,
       quoteAuthor: data.quoteAuthor,
       slug: this._slug,
+      publishedAtInput: this._publishedAtInput,
+      publishedAtTimeMinutes: this._publishedAtTimeMinutes,
       visibility: this._visibility,
       rating: data.rating,
       showTitle:
@@ -1967,10 +3047,20 @@ export class JantComposeDialog extends LitElement {
 
   private _clearDraftFromStorage() {
     this._cancelDraftSaveTimer();
-    globalThis.localStorage.removeItem(JantComposeDialog._DRAFT_KEY);
+    globalThis.localStorage.removeItem(this._currentDraftStorageKey());
+  }
+
+  clearLocalDraftFromStorage() {
+    this._clearDraftFromStorage();
+  }
+
+  clearEditDraftFromStorage(postId: string) {
+    globalThis.localStorage.removeItem(
+      JantComposeDialog._EDIT_DRAFT_KEY_PREFIX + postId,
+    );
   }
 
-  async restoreLocalDraft() {
+  async restoreLocalDraft(options?: { expectedReplyToId?: string }) {
     // Don't restore if already in edit or draft-load mode
     if (this._editPostId || this._draftSourceId) return;
     // Don't restore if the editor already has content (e.g. reopened dialog)
@@ -1998,7 +3088,13 @@ export class JantComposeDialog extends LitElement {
       return;
     }
 
-    this._format = draft.format;
+    if (
+      options?.expectedReplyToId !== undefined &&
+      draft.replyToId !== options.expectedReplyToId
+    ) {
+      return;
+    }
+
     this._collectionIds = [...(draft.collectionIds ?? [])];
     this._slug = draft.slug ?? "";
     this._slugTaken = false;
@@ -2006,17 +3102,77 @@ export class JantComposeDialog extends LitElement {
     this._suggestedSlug = "";
     this._suggestedSlugLoading = false;
     this._slugSuggestionKey = "";
+    this._publishedAtInput = draft.publishedAtInput ?? "";
+    this._publishedAtTimeMinutes = draft.publishedAtTimeMinutes ?? null;
     this._visibility = draft.visibility ?? "public";
 
     // Restore reply context if this draft was a reply
     if (draft.replyToId) {
       this._replyToId = draft.replyToId;
+      this._visibilityLocked = true;
       await this._fetchReplyContext(draft.replyToId);
     }
 
-    await this.updateComplete;
+    // ── Thread draft restore ─────────────────────────────────────────
+    if (draft.threadItems && draft.threadItems.length >= 2) {
+      this._format = draft.threadItems[0].format;
+      this._threadItems = draft.threadItems.map((item) => ({
+        id: crypto.randomUUID(),
+        format: item.format,
+      }));
+      this._focusedThreadIndex = 0;
 
-    const textAttachments = draft.attachedTexts?.flatMap((t) => {
+      await this.updateComplete;
+
+      const editors = Array.from(
+        this.querySelectorAll<JantComposeEditor>("jant-compose-editor"),
+      );
+      for (let i = 0; i < draft.threadItems.length; i++) {
+        const item = draft.threadItems[i];
+        const editor = editors[i];
+        if (!editor) continue;
+
+        const textAttachments = item.attachedTexts?.flatMap((t) => {
+          const bodyJson = normalizeComposeDoc(t.bodyJson);
+          if (!bodyJson) return [];
+          return [
+            {
+              clientId: t.clientId,
+              bodyJson: JSON.stringify(bodyJson),
+              bodyHtml: t.bodyHtml,
+              summary: t.summary,
+            },
+          ];
+        });
+
+        editor.populate({
+          format: item.format,
+          title: item.title || undefined,
+          bodyJson: item.bodyJson ? JSON.stringify(item.bodyJson) : undefined,
+          url: item.url || undefined,
+          quoteText: item.quoteText || undefined,
+          quoteAuthor: item.quoteAuthor || undefined,
+          textAttachments: textAttachments?.length
+            ? textAttachments
+            : undefined,
+          attachmentOrder: item.attachmentOrder,
+        });
+      }
+
+      this._draftRestored = true;
+      showToast(this.labels.draftRestored);
+      globalThis.requestAnimationFrame(() => {
+        this._captureInitialSnapshot();
+      });
+      return;
+    }
+
+    // ── Single-post draft restore ────────────────────────────────────
+    this._format = draft.format;
+
+    await this.updateComplete;
+
+    const textAttachments = draft.attachedTexts?.flatMap((t) => {
       const bodyJson = normalizeComposeDoc(t.bodyJson);
       if (!bodyJson) return [];
       return [
@@ -2050,6 +3206,75 @@ export class JantComposeDialog extends LitElement {
     });
   }
 
+  /**
+   * Check for a local edit draft for the given post ID and restore it if valid.
+   * Returns true if a draft was restored, false otherwise.
+   */
+  private _restoreEditDraftIfAvailable(postId: string): boolean {
+    const key = JantComposeDialog._EDIT_DRAFT_KEY_PREFIX + postId;
+
+    let raw: string | null;
+    try {
+      raw = globalThis.localStorage.getItem(key);
+    } catch {
+      return false;
+    }
+    if (!raw) return false;
+
+    let draft: LocalDraft;
+    try {
+      draft = JSON.parse(raw) as LocalDraft;
+    } catch {
+      globalThis.localStorage.removeItem(key);
+      return false;
+    }
+
+    if (Date.now() - draft.savedAt > JantComposeDialog._DRAFT_MAX_AGE) {
+      globalThis.localStorage.removeItem(key);
+      return false;
+    }
+
+    // Restore metadata
+    this._format = draft.format;
+    this._collectionIds = [...(draft.collectionIds ?? [])];
+    this._slug = draft.slug ?? "";
+    this._publishedAtInput = draft.publishedAtInput ?? "";
+    this._publishedAtTimeMinutes = draft.publishedAtTimeMinutes ?? null;
+    this._visibility = draft.visibility ?? "public";
+
+    // Restore editor content
+    const textAttachments = draft.attachedTexts?.flatMap((t) => {
+      const bodyJson = normalizeComposeDoc(t.bodyJson);
+      if (!bodyJson) return [];
+      return [
+        {
+          clientId: t.clientId,
+          bodyJson: JSON.stringify(bodyJson),
+          bodyHtml: t.bodyHtml,
+          summary: t.summary,
+        },
+      ];
+    });
+
+    this._editor?.populate({
+      format: draft.format,
+      title: draft.title || undefined,
+      bodyJson: draft.bodyJson ? JSON.stringify(draft.bodyJson) : undefined,
+      url: draft.url || undefined,
+      quoteText: draft.quoteText || undefined,
+      quoteAuthor: draft.quoteAuthor || undefined,
+      rating: draft.rating || undefined,
+      showTitle: draft.showTitle,
+      showRating: draft.showRating,
+      textAttachments: textAttachments?.length ? textAttachments : undefined,
+      attachmentOrder: draft.attachmentOrder,
+    });
+
+    this._draftRestored = true;
+    showToast(this.labels.draftRestored);
+    return true;
+  }
+
   private async _focusPageEditorOnMount() {
     if (this._pageFocusApplied) return;
 
@@ -2194,7 +3419,7 @@ export class JantComposeDialog extends LitElement {
   private _renderReplyContext() {
     if (!this._replyToId || !this._replyToData) return nothing;
 
-    const { contentHtml, dateText } = this._replyToData;
+    const { contentHtml, dateText, media } = this._replyToData;
     const isExpanded = this._replyExpanded;
 
     return html`
@@ -2208,6 +3433,38 @@ export class JantComposeDialog extends LitElement {
         >
           <div class="compose-reply-context-body">
             ${unsafeHTML(contentHtml)}
+            ${media?.length
+              ? html`<div
+                  class="compose-reply-context-media"
+                  data-post-media
+                  data-lightbox-group=${JSON.stringify(
+                    media.map((m) => ({
+                      url: m.url,
+                      alt: m.alt ?? "",
+                      width: m.width,
+                      height: m.height,
+                      mimeType: m.mimeType,
+                    })),
+                  )}
+                >
+                  ${media.map(
+                    (m, i) => html`
+                      <a
+                        href=${m.url}
+                        data-lightbox-index=${i}
+                        class="compose-reply-context-media-link"
+                      >
+                        <img
+                          src=${m.previewUrl}
+                          alt=${m.alt ?? ""}
+                          class="compose-reply-context-media-img"
+                          loading="lazy"
+                        />
+                      </a>
+                    `,
+                  )}
+                </div>`
+              : nothing}
           </div>
           ${!isExpanded
             ? html`<div class="compose-reply-fade"></div>`
@@ -2229,10 +3486,22 @@ export class JantComposeDialog extends LitElement {
     `;
   }
 
+  private static readonly _FORMATS: ComposeFormat[] = ["note", "link", "quote"];
+
+  private _switchFormat(target: ComposeFormat) {
+    if (this._format === target) return;
+    if (this._editPostId) return;
+    this._format = target;
+    this._showPublishPanel = false;
+    if (this._shouldAutofocusFormatInput()) {
+      globalThis.requestAnimationFrame(() => this._editor?.focusInput());
+    }
+  }
+
   // ── Render helpers ────────────────────────────────────────────────
 
   private _renderHeader() {
-    const formats: ComposeFormat[] = ["note", "link", "quote"];
+    const formats = JantComposeDialog._FORMATS;
     const formatLabels: Record<ComposeFormat, string> = {
       note: this.labels.note,
       link: this.labels.link,
@@ -2257,37 +3526,35 @@ export class JantComposeDialog extends LitElement {
             ? html`<span class="compose-dialog-title"
                 >${this.labels.editPost}</span
               >`
-            : html`
-                <div class="compose-segmented">
-                  <div
-                    class=${classMap({
-                      "compose-format-pill": true,
-                      "compose-format-pill-link": this._format === "link",
-                      "compose-format-pill-quote": this._format === "quote",
-                    })}
-                  ></div>
-                  ${formats.map(
-                    (f) => html`
-                      <button
-                        type="button"
-                        class=${classMap({
-                          "compose-segmented-item": true,
-                          "compose-segmented-item-active": this._format === f,
-                        })}
-                        @click=${() => {
-                          this._format = f;
-                          this._showPublishPanel = false;
-                          globalThis.requestAnimationFrame(() =>
-                            this._editor?.focusInput(),
-                          );
-                        }}
-                      >
-                        ${formatLabels[f]}
-                      </button>
-                    `,
-                  )}
-                </div>
-              `}
+            : this._threadItems.length > 0
+              ? html`<span class="compose-dialog-title"
+                  >${this.labels.newThread}</span
+                >`
+              : html`
+                  <div class="compose-segmented">
+                    <div
+                      class=${classMap({
+                        "compose-format-pill": true,
+                        "compose-format-pill-link": this._format === "link",
+                        "compose-format-pill-quote": this._format === "quote",
+                      })}
+                    ></div>
+                    ${formats.map(
+                      (f) => html`
+                        <button
+                          type="button"
+                          class=${classMap({
+                            "compose-segmented-item": true,
+                            "compose-segmented-item-active": this._format === f,
+                          })}
+                          @click=${() => this._switchFormat(f)}
+                        >
+                          ${formatLabels[f]}
+                        </button>
+                      `,
+                    )}
+                  </div>
+                `}
         </div>
 
         <div class="compose-dialog-header-actions">
@@ -2310,16 +3577,21 @@ export class JantComposeDialog extends LitElement {
 
   private _renderCollectionSelector() {
     const collections = this.collections ?? [];
-    const search = this._collectionSearch.toLowerCase();
-    const filtered = search
-      ? collections.filter((c) => c.title.toLowerCase().includes(search))
-      : collections;
+    const orderedCollections = applyItemOrder(
+      collections,
+      this._collectionPickerOrder,
+    );
+    const hasSearch = this._collectionSearch.trim().length > 0;
+    const filtered = filterCollectionsBySearch(
+      orderedCollections,
+      this._collectionSearch,
+    );
     const selectedCount = this._collectionIds.length;
     const selectedLabel =
       selectedCount > 0
         ? this._selectedCollectionLabel(collections)
         : this.labels.collection;
-    const emptyLabel = search
+    const emptyLabel = hasSearch
       ? this.labels.noCollections
       : this.labels.emptyCollections;
 
@@ -2328,13 +3600,14 @@ export class JantComposeDialog extends LitElement {
         ${this._showCollection
           ? html`<div
               class="compose-dropdown-backdrop"
-              @click=${() => {
-                this._showCollection = false;
-                this._collectionSearch = "";
-              }}
+              @click=${() => this._closeCollectionPicker()}
             ></div>`
           : nothing}
-        <div class="select compose-collection-select" data-select-initialized>
+        <div
+          class="select compose-collection-select"
+          data-select-initialized
+          data-open=${this._showCollection ? "true" : nothing}
+        >
           <button
             type="button"
             class="compose-collection-trigger"
@@ -2342,11 +3615,16 @@ export class JantComposeDialog extends LitElement {
             aria-expanded=${this._showCollection ? "true" : "false"}
             data-open=${this._showCollection ? "true" : nothing}
             data-selected=${selectedCount > 0 ? "true" : nothing}
+            @keydown=${this._handleCollectionTriggerKeydown}
             @click=${() => {
+              const nextOpen = !this._showCollection;
               this._showPublishPanel = false;
-              this._showCollection = !this._showCollection;
-              if (!this._showCollection) {
-                this._collectionSearch = "";
+              if (nextOpen) {
+                this._prepareCollectionPickerOrder();
+              }
+              this._showCollection = nextOpen;
+              if (!nextOpen) {
+                this._closeCollectionPicker();
               }
             }}
           >
@@ -2365,7 +3643,6 @@ export class JantComposeDialog extends LitElement {
           <div
             class="compose-collection-popover"
             data-popover
-            data-side="bottom"
             aria-hidden=${this._showCollection ? "false" : "true"}
           >
             ${collections.length > 0
@@ -2384,6 +3661,7 @@ export class JantComposeDialog extends LitElement {
                       autocorrect="off"
                       spellcheck="false"
                       .value=${this._collectionSearch}
+                      @keydown=${this._handleCollectionSearchKeydown}
                       @input=${(e: Event) => {
                         this._collectionSearch = (
                           e.target as HTMLInputElement
@@ -2412,7 +3690,10 @@ export class JantComposeDialog extends LitElement {
                         role="option"
                         data-value=${col.id}
                         aria-selected=${selected ? "true" : "false"}
-                        @click=${() => this._toggleCollection(col.id)}
+                        @keydown=${(event: globalThis.KeyboardEvent) =>
+                          this._handleCollectionOptionKeydown(event, col.id)}
+                        @click=${() =>
+                          this._handleCollectionOptionClick(col.id)}
                       >
                         <span class="compose-collection-option-label"
                           >${col.title}</span
@@ -2463,9 +3744,9 @@ export class JantComposeDialog extends LitElement {
               <button
                 type="button"
                 class="compose-collection-add-action"
+                @keydown=${this._handleCollectionAddActionKeydown}
                 @click=${() => {
-                  this._showCollection = false;
-                  this._collectionSearch = "";
+                  this._closeCollectionPicker();
                   this._addCollectionPanelOpen = true;
                 }}
               >
@@ -2514,6 +3795,7 @@ export class JantComposeDialog extends LitElement {
       const created = (await res.json().catch(() => null)) as {
         id: string;
         title: string;
+        slug?: string;
         error?: string;
       } | null;
 
@@ -2528,6 +3810,7 @@ export class JantComposeDialog extends LitElement {
       const newCollection: ComposeCollection = {
         id: created.id,
         title: created.title,
+        slug: created.slug ?? "",
       };
 
       const refreshed = await this.refreshCollections();
@@ -2859,24 +4142,204 @@ export class JantComposeDialog extends LitElement {
     return null;
   }
 
-  private _revealSlugField() {
+  private _getCurrentTimestamp(): number {
+    return Math.floor(Date.now() / 1000);
+  }
+
+  private _getPublishedAtMaxInput(): string {
+    return toLocalDateInputValue(this._getCurrentTimestamp());
+  }
+
+  private _getPublishedAtTimeMinutes(): number {
+    return (
+      this._publishedAtTimeMinutes ??
+      getTimestampTimeMinutes(this._getCurrentTimestamp())
+    );
+  }
+
+  private _hasPublishedAtValue(): boolean {
+    return this._publishedAtInput.trim().length > 0;
+  }
+
+  private _getPublishedAtValidationMessage(): string | null {
+    if (!this._hasPublishedAtValue()) return null;
+
+    const parsedDate = parseLocalDateInputValue(this._publishedAtInput);
+    if (parsedDate === null) {
+      return this.labels.publishDateInvalid;
+    }
+
+    if (this._publishedAtInput > this._getPublishedAtMaxInput()) {
+      return this.labels.publishDateFutureError;
+    }
+
+    return null;
+  }
+
+  private _getPublishedAtSummary(): { input: string; text: string } | null {
+    if (this._editPostId || this._draftSourceId) {
+      if (this._publishedAtInput === this._initialPublishedAtInput) {
+        return null;
+      }
+      if (!this._hasPublishedAtValue()) {
+        return {
+          input: "",
+          text: this.labels.publishDateSummaryNow,
+        };
+      }
+    }
+
+    if (this._getPublishedAtValidationMessage() !== null) return null;
+
+    const parsedDate = parseLocalDateInputValue(this._publishedAtInput);
+    if (parsedDate === null) return null;
+
+    return {
+      input: this._publishedAtInput,
+      text: new Intl.DateTimeFormat(undefined, {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      }).format(
+        new Date(parsedDate.year, parsedDate.monthIndex, parsedDate.day),
+      ),
+    };
+  }
+
+  private _getSlugSummary(): ComposePublishSummaryChip | null {
+    const currentSlug = this._slug.trim();
+
+    if (currentSlug && this._getSlugValidationMessage() !== null) {
+      return null;
+    }
+
+    if (this._editPostId || this._draftSourceId) {
+      if (currentSlug === this._initialSlug) {
+        return null;
+      }
+
+      if (!currentSlug) {
+        return {
+          kind: "slug",
+          text: this.labels.publishSlugSummaryAuto,
+          actionLabel: this.labels.publishSlugSummaryAction,
+          value: currentSlug,
+        };
+      }
+    }
+
+    if (!currentSlug) return null;
+
+    return {
+      kind: "slug",
+      text: `/${currentSlug}`,
+      actionLabel: this.labels.publishSlugSummaryAction,
+      value: currentSlug,
+    };
+  }
+
+  private _getPublishSummaryChips(): ComposePublishSummaryChip[] {
+    const chips: ComposePublishSummaryChip[] = [];
+    const publishedAtSummary = this._getPublishedAtSummary();
+    if (publishedAtSummary !== null) {
+      chips.push({
+        kind: "publishedAt",
+        text: publishedAtSummary.text,
+        actionLabel: this.labels.publishDateSummaryAction,
+        value: publishedAtSummary.input,
+      });
+    }
+
+    const slugSummary = this._getSlugSummary();
+    if (slugSummary !== null) {
+      chips.push(slugSummary);
+    }
+
+    return chips;
+  }
+
+  private _getPublishedAtSubmitValue(
+    status: "published" | "draft",
+  ): number | undefined {
+    if (status === "draft") return undefined;
+
+    const publishedAt = buildTimestampFromLocalDate(
+      this._publishedAtInput,
+      this._getPublishedAtTimeMinutes(),
+    );
+    if (publishedAt !== null) {
+      // If editing and the user didn't change date or time, preserve the
+      // original timestamp (including seconds) to avoid silent truncation.
+      if (
+        this._originalPublishedAt !== null &&
+        this._publishedAtInput === this._initialPublishedAtInput &&
+        this._publishedAtTimeMinutes === this._initialPublishedAtTimeMinutes
+      ) {
+        return Math.min(this._originalPublishedAt, this._getCurrentTimestamp());
+      }
+      return Math.min(publishedAt, this._getCurrentTimestamp());
+    }
+
+    if (this._publishedAtInput.trim().length > 0) {
+      return undefined;
+    }
+
+    if (this._editPostId) {
+      return this._getCurrentTimestamp();
+    }
+
+    return undefined;
+  }
+
+  private _openPublishPanelAndFocus(selector: string) {
     this._showCollection = false;
     this._collectionSearch = "";
     this._showPublishPanel = true;
     this._confirmPanelOpen = false;
     this._scheduleSuggestedSlugRefresh(true);
     this.updateComplete.then(() => {
-      this.querySelector<HTMLInputElement>(
-        ".compose-publish-slug-input",
-      )?.focus();
+      this.querySelector<HTMLElement>(selector)?.focus();
     });
   }
 
+  private _revealSlugField() {
+    this._openPublishPanelAndFocus(".compose-publish-slug-input");
+  }
+
+  private _revealPublishedAtField() {
+    this._openPublishPanelAndFocus(".compose-publish-date-input");
+  }
+
   private _canPublish(): boolean {
     if (this._loading) return false;
+    if (this._getPublishedAtValidationMessage()) return false;
+    if (this._getSlugValidationMessage()) return false;
+
+    if (this._threadItems.length > 0) {
+      // Thread mode: validate all editors
+      const editors = Array.from(
+        this.querySelectorAll<JantComposeEditor>("jant-compose-editor"),
+      );
+      if (editors.length === 0) return false;
+      for (const editor of editors) {
+        if (editor.getUrlValidationMessage()) return false;
+        if (editor.getLinkTitleValidationMessage()) return false;
+      }
+      // Every editor in the thread must have content
+      return editors.every((editor) => {
+        const data = editor.getData();
+        return (
+          !!data.body ||
+          !!data.title.trim() ||
+          !!data.url.trim() ||
+          !!data.quoteText.trim() ||
+          data.attachments.length > 0
+        );
+      });
+    }
+
     const editor = this._editor;
     if (!editor) return false;
-    if (this._getSlugValidationMessage()) return false;
     if (editor.getUrlValidationMessage()) return false;
     if (editor.getLinkTitleValidationMessage()) return false;
 
@@ -2890,6 +4353,21 @@ export class JantComposeDialog extends LitElement {
     return this._hasContent();
   }
 
+  private _focusPublishPanelInitialField() {
+    const selector = this._visibilityLocked
+      ? ".compose-publish-date-input"
+      : ".compose-publish-option[role='radio']";
+    this.querySelector<HTMLElement>(selector)?.focus();
+  }
+
+  private _closePublishPanel(restoreFocus = false) {
+    if (!this._showPublishPanel) return;
+    this._showPublishPanel = false;
+    if (restoreFocus) {
+      this.updateComplete.then(() => this._restorePageEditorFocus());
+    }
+  }
+
   private _togglePublishPanel() {
     this._showCollection = false;
     this._collectionSearch = "";
@@ -2897,6 +4375,7 @@ export class JantComposeDialog extends LitElement {
     this._showPublishPanel = nextOpen;
     if (nextOpen) {
       this._scheduleSuggestedSlugRefresh(true);
+      this.updateComplete.then(() => this._focusPublishPanelInitialField());
     }
   }
 
@@ -2905,8 +4384,13 @@ export class JantComposeDialog extends LitElement {
     this._visibility = visibility;
     if (!this._editPostId && !this._draftSourceId && !this._replyToId) {
       JantComposeDialog._lastNewPostVisibility = visibility;
+      if (this._sourceCollectionId) {
+        JantComposeDialog._setCollectionVisibility(
+          this._sourceCollectionId,
+          visibility,
+        );
+      }
     }
-    this._showPublishPanel = false;
   }
 
   private _onSlugInput(e: Event) {
@@ -2921,6 +4405,21 @@ export class JantComposeDialog extends LitElement {
     this._scheduleSuggestedSlugRefresh();
   }
 
+  private _onPublishedAtInput(e: Event) {
+    this._publishedAtInput = (e.target as HTMLInputElement).value;
+  }
+
+  private _resetPublishedAt() {
+    const currentTimestamp = this._getCurrentTimestamp();
+    this._publishedAtInput = toLocalDateInputValue(currentTimestamp);
+    this._publishedAtTimeMinutes = getTimestampTimeMinutes(currentTimestamp);
+    this.updateComplete.then(() => {
+      this.querySelector<HTMLInputElement>(
+        ".compose-publish-date-input",
+      )?.focus();
+    });
+  }
+
   private _renderVisibilityIcon(
     visibility: ComposeVisibility,
     variant: "menu" | "toggle" = "menu",
@@ -2939,10 +4438,9 @@ export class JantComposeDialog extends LitElement {
     );
   }
 
-  private _renderPublishVisibilityOption(
+  private _renderPublishVisibilityChip(
     visibility: ComposeVisibility,
     label: string,
-    hint: string,
   ) {
     const selected = this._visibility === visibility;
 
@@ -2950,8 +4448,8 @@ export class JantComposeDialog extends LitElement {
       <button
         type="button"
         class=${classMap({
-          "compose-publish-option": true,
-          "compose-publish-option-selected": selected,
+          "compose-publish-chip": true,
+          "compose-publish-chip-selected": selected,
         })}
         role="radio"
         aria-checked=${selected ? "true" : "false"}
@@ -2959,20 +4457,74 @@ export class JantComposeDialog extends LitElement {
         @click=${() => this._setVisibility(visibility)}
       >
         ${this._renderVisibilityIcon(visibility)}
-        <span class="compose-publish-copy">
-          <span class="compose-publish-row-label">${label}</span>
-          <span class="compose-publish-row-hint">${hint}</span>
-        </span>
-        ${selected
-          ? renderComposePublishActionIcon(
-              COMPOSE_PUBLISH_ACTION_ICONS.check,
-              "compose-publish-row-check",
-            )
-          : nothing}
+        <span class="compose-publish-chip-label">${label}</span>
       </button>
     `;
   }
 
+  private _getVisibilityHint(): string {
+    switch (this._visibility) {
+      case "public":
+        return this.labels.publishVisibilityPublicHint;
+      case "latest_hidden":
+        return this.labels.publishVisibilityHiddenFromLatestHint;
+      case "private":
+        return this.labels.publishVisibilityPrivateHint;
+    }
+  }
+
+  private _renderPublishDateSection() {
+    const publishedAtError = this._getPublishedAtValidationMessage();
+
+    return html`
+      <section class="compose-publish-section">
+        <div class="compose-publish-section-header">
+          <div class="compose-publish-section-copy">
+            <p class="compose-publish-section-label">
+              ${this.labels.publishDateLabel}
+            </p>
+            <p class="compose-publish-section-hint">
+              ${this.labels.publishDateHint}
+            </p>
+          </div>
+          ${this._hasPublishedAtValue()
+            ? html`
+                <button
+                  type="button"
+                  class="compose-publish-section-action"
+                  @click=${() => this._resetPublishedAt()}
+                >
+                  ${this.labels.publishDateReset}
+                </button>
+              `
+            : nothing}
+        </div>
+        <div class="compose-publish-date-field">
+          <div class="compose-publish-date-input-wrap">
+            <input
+              type="date"
+              class="compose-input compose-publish-date-input"
+              .value=${this._publishedAtInput}
+              max=${this._getPublishedAtMaxInput()}
+              aria-invalid=${publishedAtError ? "true" : "false"}
+              @input=${(e: Event) => this._onPublishedAtInput(e)}
+            />
+          </div>
+          ${publishedAtError
+            ? html`<p
+                class=${classMap({
+                  "compose-publish-date-status": true,
+                  "compose-publish-date-status-error": true,
+                })}
+              >
+                ${publishedAtError}
+              </p>`
+            : nothing}
+        </div>
+      </section>
+    `;
+  }
+
   private _renderPublishSlugSection() {
     const slugError = this._getSlugValidationMessage();
     const slugStatus = this._getSlugStatusMessage();
@@ -3084,57 +4636,258 @@ export class JantComposeDialog extends LitElement {
     `;
   }
 
-  private _renderPublishPanel() {
-    if (!this._showPublishPanel) return nothing;
+  private _renderQuietReplySection() {
+    if (!this._replyToId) return nothing;
+
+    return html`
+      <section class="compose-publish-section">
+        <label class="compose-publish-switch-row">
+          <div class="compose-publish-section-copy">
+            <p class="compose-publish-section-label">
+              ${this.labels.quietReplyLabel}
+            </p>
+            <p class="compose-publish-section-hint">
+              ${this.labels.quietReplyHint}
+            </p>
+          </div>
+          <input
+            type="checkbox"
+            role="switch"
+            class="input"
+            .checked=${this._quietReply}
+            @change=${(e: Event) => {
+              this._quietReply = (e.target as HTMLInputElement).checked;
+            }}
+          />
+        </label>
+      </section>
+    `;
+  }
+
+  private _renderPublishPanelSections() {
+    return html`
+      ${this._replyToId ? this._renderQuietReplySection() : nothing}
+      ${this._visibilityLocked
+        ? nothing
+        : html`
+            <section class="compose-publish-section">
+              <div class="compose-publish-section-header">
+                <div class="compose-publish-section-copy">
+                  <p class="compose-publish-section-label">
+                    ${this.labels.publishVisibilityLabel}
+                  </p>
+                </div>
+              </div>
+              <div class="compose-publish-chips" role="radiogroup">
+                ${this._renderPublishVisibilityChip(
+                  "public",
+                  this.labels.publishVisibilityPublic,
+                )}
+                ${this._renderPublishVisibilityChip(
+                  "latest_hidden",
+                  this.labels.publishVisibilityHiddenFromLatest,
+                )}
+                ${this._renderPublishVisibilityChip(
+                  "private",
+                  this.labels.publishVisibilityPrivate,
+                )}
+              </div>
+              <p class="compose-publish-chip-hint">
+                ${this._getVisibilityHint()}
+              </p>
+            </section>
+          `}
+      ${this._visibilityLocked && !this._replyToId
+        ? nothing
+        : html`<div class="compose-publish-divider" aria-hidden="true"></div>`}
+      ${this._renderPublishDateSection()}
+      <div class="compose-publish-divider" aria-hidden="true"></div>
+      ${this._renderPublishSlugSection()}
+    `;
+  }
+
+  private _renderDesktopPublishPanel() {
+    if (!this._showPublishPanel || this._publishPanelFullscreen) {
+      return nothing;
+    }
 
     return html`
       <div
-        class="compose-publish-panel"
+        class="compose-publish-panel compose-publish-panel-desktop"
         role="dialog"
         aria-label=${this.labels.publishSettings}
+        data-position="up"
         data-compose-publish-panel
+        data-compose-publish-panel-desktop
       >
-        ${this._visibilityLocked
-          ? nothing
-          : html`
-              <section class="compose-publish-section">
-                <div class="compose-publish-section-header">
-                  <div class="compose-publish-section-copy">
-                    <p class="compose-publish-section-label">
-                      ${this.labels.publishVisibilityLabel}
-                    </p>
-                  </div>
-                </div>
-                <div class="compose-publish-list" role="radiogroup">
-                  ${this._renderPublishVisibilityOption(
-                    "public",
-                    this.labels.publishVisibilityPublic,
-                    this.labels.publishVisibilityPublicHint,
-                  )}
-                  ${this._renderPublishVisibilityOption(
-                    "latest_hidden",
-                    this.labels.publishVisibilityHiddenFromLatest,
-                    this.labels.publishVisibilityHiddenFromLatestHint,
-                  )}
-                  ${this._renderPublishVisibilityOption(
-                    "private",
-                    this.labels.publishVisibilityPrivate,
-                    this.labels.publishVisibilityPrivateHint,
-                  )}
-                </div>
-              </section>
-            `}
-        ${this._visibilityLocked
-          ? nothing
-          : html`<div
-              class="compose-publish-divider"
-              aria-hidden="true"
-            ></div>`}
-        ${this._renderPublishSlugSection()}
+        ${this._renderPublishPanelSections()}
+        <div class="compose-publish-panel-footer">
+          <button
+            type="button"
+            class="compose-publish-done"
+            @click=${() => this._closePublishPanel(true)}
+          >
+            ${this.labels.done}
+          </button>
+        </div>
       </div>
     `;
   }
 
+  private _renderMobilePublishPanel() {
+    if (!this._showPublishPanel || !this._publishPanelFullscreen) {
+      return nothing;
+    }
+
+    return html`
+      <div
+        class="compose-publish-panel compose-publish-panel-mobile"
+        role="dialog"
+        aria-label=${this.labels.publishSettings}
+        aria-modal="true"
+        data-compose-publish-panel
+        data-compose-publish-panel-mobile
+      >
+        <div class="compose-alt-header compose-publish-mobile-header">
+          <button
+            type="button"
+            class="compose-attached-panel-back"
+            @click=${() => this._closePublishPanel(true)}
+          >
+            <svg
+              class="icon-fine"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M11 3L6 8l5 5" />
+            </svg>
+          </button>
+          <span class="compose-alt-title">${this.labels.publishSettings}</span>
+          <button
+            type="button"
+            class="compose-attached-cancel compose-publish-mobile-done"
+            @click=${() => this._closePublishPanel(true)}
+          >
+            ${this.labels.done}
+          </button>
+        </div>
+        <div class="compose-publish-mobile-body">
+          ${this._renderPublishPanelSections()}
+        </div>
+      </div>
+    `;
+  }
+
+  private _renderPublishSummary(summary: ComposePublishSummaryChip) {
+    const isPublishedAt = summary.kind === "publishedAt";
+
+    return html`
+      <button
+        type="button"
+        class="compose-publish-summary"
+        data-compose-publish-summary=${summary.kind}
+        data-compose-publish-date-summary=${isPublishedAt ? "" : nothing}
+        data-compose-publish-slug-summary=${isPublishedAt ? nothing : ""}
+        data-publish-summary-value=${summary.value}
+        data-publish-date=${isPublishedAt ? summary.value : nothing}
+        data-publish-slug=${isPublishedAt ? nothing : summary.value}
+        aria-label=${summary.actionLabel}
+        title=${summary.actionLabel}
+        ?disabled=${this._loading}
+        @click=${() =>
+          isPublishedAt
+            ? this._revealPublishedAtField()
+            : this._revealSlugField()}
+      >
+        <span class="compose-publish-summary-icon" aria-hidden="true">
+          ${isPublishedAt
+            ? html`<svg
+                width="14"
+                height="14"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.35"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <rect x="2.75" y="3.45" width="10.5" height="9.8" rx="2.2" />
+                <path d="M5.35 2.55v2.1" />
+                <path d="M10.65 2.55v2.1" />
+                <path d="M2.75 6.2h10.5" />
+              </svg>`
+            : html`<svg
+                width="14"
+                height="14"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.35"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M9.75 4.15h1.35a2.75 2.75 0 0 1 0 5.5H9.75" />
+                <path d="M6.25 9.65H4.9a2.75 2.75 0 1 1 0-5.5h1.35" />
+                <path d="M5.65 8h4.7" />
+              </svg>`}
+        </span>
+        <span class="compose-publish-summary-text">${summary.text}</span>
+      </button>
+    `;
+  }
+
+  private _renderPublishSummaries() {
+    const summaries = this._getPublishSummaryChips();
+    if (summaries.length === 0) return nothing;
+
+    return html`
+      <div class="compose-publish-summaries">
+        ${summaries.map((summary) => this._renderPublishSummary(summary))}
+      </div>
+    `;
+  }
+
+  private _updatePublishPanelLayout() {
+    if (this._publishPanelFullscreen) return;
+
+    const publishGroup = this.querySelector<HTMLElement>(
+      ".compose-publish-group",
+    );
+    const panel = this.querySelector<HTMLElement>(
+      "[data-compose-publish-panel-desktop]",
+    );
+    if (!publishGroup || !panel) return;
+
+    const visualViewport = globalThis.visualViewport;
+    const viewportTop = visualViewport?.offsetTop ?? 0;
+    const viewportBottom =
+      viewportTop + (visualViewport?.height ?? globalThis.innerHeight);
+    const groupRect = publishGroup.getBoundingClientRect();
+    const edgePadding = 12;
+    const gap = 10;
+    const topBoundary = viewportTop + edgePadding;
+    const bottomBoundary = viewportBottom - edgePadding;
+    const availableAbove = Math.max(0, groupRect.top - topBoundary - gap);
+    const availableBelow = Math.max(0, bottomBoundary - groupRect.bottom - gap);
+    const direction = availableBelow >= availableAbove ? "down" : "up";
+    const maxHeight = Math.max(
+      1,
+      Math.floor(direction === "up" ? availableAbove : availableBelow),
+    );
+
+    panel.dataset.position = direction;
+    panel.style.setProperty(
+      "--compose-publish-panel-max-height",
+      `${maxHeight}px`,
+    );
+  }
+
   private _renderPublishButton() {
     const spinner = html`<svg
       class="animate-spin size-4"
@@ -3152,59 +4905,405 @@ export class JantComposeDialog extends LitElement {
     const canPublish = this._canPublish();
 
     return html`
-      <div class="compose-publish-group">
-        ${this._showPublishPanel
-          ? html`<div
-              class="compose-dropdown-backdrop"
-              @click=${() => {
-                this._showPublishPanel = false;
-              }}
-            ></div>`
-          : nothing}
+      <div class="compose-publish-shell">
+        ${this._renderPublishSummaries()}
         <div
-          role="group"
           class=${classMap({
-            "compose-publish-buttons": true,
-            "compose-publish-buttons-inactive": !canPublish && !this._loading,
+            "compose-publish-group": true,
+            "compose-publish-group-open": this._showPublishPanel,
           })}
         >
-          <button
-            type="button"
+          ${this._showPublishPanel && !this._publishPanelFullscreen
+            ? html`<div
+                class="compose-dropdown-backdrop"
+                @click=${() => this._closePublishPanel(true)}
+              ></div>`
+            : nothing}
+          <div
+            role="group"
             class=${classMap({
-              "compose-publish-main": true,
-              "compose-publish-main-loading": this._loading,
+              "compose-publish-buttons": true,
+              "compose-publish-buttons-inactive": !canPublish && !this._loading,
             })}
-            ?disabled=${!canPublish}
-            @click=${() => this._submit("published")}
           >
-            ${this._loading ? spinner : nothing} ${this._getSubmitLabel()}
-          </button>
-          <button
-            type="button"
-            class=${classMap({
-              "compose-publish-toggle": true,
-              "compose-publish-toggle-loading": this._loading,
-            })}
-            ?disabled=${this._loading}
-            aria-haspopup="dialog"
-            aria-expanded=${this._showPublishPanel ? "true" : "false"}
-            aria-label=${this.labels.publishSettings}
-            title=${this.labels.publishSettings}
-            @click=${() => this._togglePublishPanel()}
+            <button
+              type="button"
+              class=${classMap({
+                "compose-publish-main": true,
+                "compose-publish-main-loading": this._loading,
+              })}
+              ?disabled=${!canPublish}
+              @click=${() => void this._submit("published")}
+            >
+              ${this._loading ? spinner : nothing} ${this._getSubmitLabel()}
+            </button>
+            <button
+              type="button"
+              class=${classMap({
+                "compose-publish-toggle": true,
+                "compose-publish-toggle-loading": this._loading,
+              })}
+              ?disabled=${this._loading}
+              aria-haspopup="dialog"
+              aria-expanded=${this._showPublishPanel ? "true" : "false"}
+              aria-label=${this.labels.publishSettings}
+              title=${this.labels.publishSettings}
+              @click=${() => this._togglePublishPanel()}
+            >
+              ${renderComposePublishActionIcon(
+                COMPOSE_PUBLISH_ACTION_ICONS.chevron,
+                "compose-publish-toggle-chevron",
+              )}
+            </button>
+          </div>
+          ${this._renderDesktopPublishPanel()}
+        </div>
+      </div>
+    `;
+  }
+
+  private _renderEditLoadingState() {
+    return html`
+      <div
+        class="compose-edit-loading"
+        role="status"
+        aria-live="polite"
+        aria-busy="true"
+      >
+        <div class="compose-edit-loading-status">
+          <svg
+            class="animate-spin size-5"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
           >
-            ${renderComposePublishActionIcon(
-              COMPOSE_PUBLISH_ACTION_ICONS.chevron,
-              "compose-publish-toggle-chevron",
-            )}
-          </button>
+            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+          </svg>
+          <span>${this.labels.loadingPost}</span>
         </div>
-        ${this._renderPublishPanel()}
+        <div class="compose-edit-loading-skeleton">
+          <div class="skel-input compose-edit-loading-title"></div>
+          <div class="skel-section-lg compose-edit-loading-body"></div>
+          <div class="compose-edit-loading-footer">
+            <div class="skel-input compose-edit-loading-chip"></div>
+            <div class="skel-input compose-edit-loading-submit"></div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  // ── Thread compose ───────────────────────────────────────────────
+
+  private _addThreadItem() {
+    const nextCount =
+      this._threadItems.length === 0 ? 2 : this._threadItems.length + 1;
+    if (nextCount > MAX_THREAD_POSTS) {
+      showToast(this._getThreadLimitMessage(), "error");
+      return;
+    }
+
+    const lastFormat =
+      this._threadItems.length > 0
+        ? this._threadItems[this._threadItems.length - 1].format
+        : this._format;
+
+    if (this._threadItems.length === 0) {
+      // Entering thread mode: snapshot current single editor's state
+      const currentEditor = this._editor;
+      const editorState = currentEditor?.getEditorState() ?? null;
+      const editorData = currentEditor?.getData();
+      const bodyJson = currentEditor?.getNormalizedBodyJson() ?? null;
+
+      this._threadItems = [
+        { id: crypto.randomUUID(), format: this._format },
+        { id: crypto.randomUUID(), format: lastFormat },
+      ];
+
+      // Capture rating state before re-render (these can't change asynchronously)
+      const capturedRating = currentEditor?._rating ?? 0;
+      const capturedShowRating = currentEditor?._showRating ?? false;
+
+      // Restore first thread item's content from the snapshot
+      if (editorState || editorData) {
+        this.updateComplete.then(() => {
+          const editors = this.querySelectorAll<JantComposeEditor>(
+            "jant-compose-editor",
+          );
+          const firstEditor = editors[0];
+          if (!firstEditor) return;
+          if (editorState) {
+            firstEditor.setEditorState(
+              editorState.json,
+              editorState.title,
+              editorState.showTitle,
+              editorState.selection,
+            );
+          }
+          if (editorData) {
+            if (this._format === "link" && editorData.url) {
+              firstEditor._url = editorData.url;
+            } else if (this._format === "quote") {
+              if (editorData.quoteText)
+                firstEditor._quoteText = editorData.quoteText;
+              if (editorData.quoteAuthor)
+                firstEditor._quoteAuthor = editorData.quoteAuthor;
+            }
+            if (bodyJson) {
+              firstEditor._bodyJson = bodyJson;
+            }
+          }
+          // Read attachment state from the old editor NOW (after re-render) so
+          // we get the latest mediaId for any uploads that completed during the
+          // render cycle. The old editor element is still in memory even though
+          // it has been removed from the DOM.
+          const latestAttachments = currentEditor?._attachments ?? [];
+          const latestAttachmentOrder = currentEditor?._attachmentOrder ?? [];
+          const latestAttachedTexts = currentEditor?._attachedTexts ?? [];
+          if (latestAttachments.length > 0) {
+            firstEditor._attachments = [...latestAttachments];
+            firstEditor._attachmentOrder = [...latestAttachmentOrder];
+          }
+          if (latestAttachedTexts.length > 0) {
+            firstEditor._attachedTexts = [...latestAttachedTexts];
+          }
+          if (capturedRating > 0) {
+            firstEditor._rating = capturedRating;
+            firstEditor._showRating = capturedShowRating;
+          }
+        });
+      }
+    } else {
+      this._threadItems = [
+        ...this._threadItems,
+        { id: crypto.randomUUID(), format: lastFormat },
+      ];
+    }
+
+    this._focusedThreadIndex = this._threadItems.length - 1;
+    this.updateComplete.then(() => {
+      const editors = this.querySelectorAll<JantComposeEditor>(
+        "jant-compose-editor",
+      );
+      editors[this._focusedThreadIndex]?.focusInput();
+    });
+  }
+
+  private _removeThreadItem(index: number) {
+    if (this._threadItems.length <= 1) return;
+    const newItems = this._threadItems.filter((_, i) => i !== index);
+
+    if (newItems.length === 1) {
+      // Exiting thread mode: capture remaining thread editor's state and restore
+      // it to the single-post editor after thread mode is cleared.
+      const editors = this.querySelectorAll<JantComposeEditor>(
+        "jant-compose-editor",
+      );
+      const remainingIndex = index === 0 ? 1 : 0;
+      const remainingEditor = editors[remainingIndex] ?? null;
+      const editorState = remainingEditor?.getEditorState() ?? null;
+      const editorData = remainingEditor?.getData();
+      const bodyJson = remainingEditor?.getNormalizedBodyJson() ?? null;
+      const remainingFormat = newItems[0].format;
+      // Capture rating state before re-render (can't change asynchronously)
+      const capturedRating = remainingEditor?._rating ?? 0;
+      const capturedShowRating = remainingEditor?._showRating ?? false;
+
+      this._threadItems = [];
+      this._focusedThreadIndex = 0;
+      this._format = remainingFormat;
+
+      this.updateComplete.then(() => {
+        const singleEditor = this._editor;
+        if (!singleEditor) return;
+        singleEditor.format = remainingFormat;
+        if (editorState) {
+          singleEditor.setEditorState(
+            editorState.json,
+            editorState.title,
+            editorState.showTitle,
+            editorState.selection,
+          );
+        }
+        if (editorData) {
+          if (remainingFormat === "link" && editorData.url) {
+            singleEditor._url = editorData.url;
+          } else if (remainingFormat === "quote") {
+            if (editorData.quoteText)
+              singleEditor._quoteText = editorData.quoteText;
+            if (editorData.quoteAuthor)
+              singleEditor._quoteAuthor = editorData.quoteAuthor;
+          }
+          if (bodyJson) {
+            singleEditor._bodyJson = bodyJson;
+          }
+        }
+        // Read attachment state from the old editor NOW so we capture any
+        // mediaIds set by uploads that completed during the render cycle.
+        const latestAttachments = remainingEditor?._attachments ?? [];
+        const latestAttachmentOrder = remainingEditor?._attachmentOrder ?? [];
+        const latestAttachedTexts = remainingEditor?._attachedTexts ?? [];
+        if (latestAttachments.length > 0) {
+          singleEditor._attachments = [...latestAttachments];
+          singleEditor._attachmentOrder = [...latestAttachmentOrder];
+        }
+        if (latestAttachedTexts.length > 0) {
+          singleEditor._attachedTexts = [...latestAttachedTexts];
+        }
+        if (capturedRating > 0) {
+          singleEditor._rating = capturedRating;
+          singleEditor._showRating = capturedShowRating;
+        }
+        singleEditor.focusInput();
+        this.requestUpdate();
+      });
+    } else {
+      this._threadItems = newItems;
+      this._focusedThreadIndex = Math.min(
+        this._focusedThreadIndex,
+        newItems.length - 1,
+      );
+    }
+  }
+
+  private _renderThreadPost(
+    item: ThreadItem,
+    index: number,
+    showRemove: boolean,
+  ) {
+    return html`
+      <div
+        class="compose-editor-row compose-thread-post"
+        data-thread-index=${index}
+        @focusin=${() => {
+          this._focusedThreadIndex = index;
+        }}
+        @jant:thread-format-change=${(
+          e: CustomEvent<{ format: ComposeFormat }>,
+        ) => {
+          e.stopPropagation();
+          this._threadItems = this._threadItems.map((it, i) =>
+            i === index ? { ...it, format: e.detail.format } : it,
+          );
+          this._format = e.detail.format;
+        }}
+        @jant:thread-remove=${(e: Event) => {
+          e.stopPropagation();
+          this._removeThreadItem(index);
+        }}
+      >
+        <div class="compose-thread-dot"></div>
+        <jant-compose-editor
+          .format=${item.format}
+          .labels=${this.labels}
+          .uploadMaxFileSize=${this.uploadMaxFileSize}
+          .threadItem=${true}
+          .removable=${showRemove}
+          data-thread-id=${item.id}
+        ></jant-compose-editor>
+      </div>
+    `;
+  }
+
+  private _renderAddToThreadRow() {
+    const PLUS_ICON = `<circle cx="8" cy="8" r="5.7"/><path d="M8 5.55v4.9M5.55 8h4.9"/>`;
+    const editors = this.querySelectorAll<JantComposeEditor>(
+      "jant-compose-editor",
+    );
+    const lastEditor = editors[editors.length - 1];
+    const lastData = lastEditor?.getData();
+    const lastEmpty =
+      !lastData ||
+      (!lastData.body &&
+        !lastData.title.trim() &&
+        !lastData.url.trim() &&
+        !lastData.quoteText.trim() &&
+        lastData.attachments.length === 0);
+    const atLimit = this._threadItems.length >= MAX_THREAD_POSTS;
+    return html`
+      <div class="compose-thread-add-row">
+        <div class="compose-thread-add-dot"></div>
+        <button
+          type="button"
+          class="compose-thread-add-btn"
+          ?disabled=${lastEmpty || atLimit}
+          @click=${() => this._addThreadItem()}
+        >
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.65"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            ${unsafeSVG(PLUS_ICON)}
+          </svg>
+          Add to thread
+        </button>
+      </div>
+    `;
+  }
+
+  private _renderThreadComposeLayout() {
+    const isReply = !!(this._replyToId && this._replyToData);
+    const items = this._threadItems;
+    const showRemove = items.length > 1;
+
+    return html`
+      <div
+        class="compose-thread-layout compose-thread-compose-layout"
+        @jant:compose-content-changed=${() => this._scheduleDraftSave()}
+      >
+        ${isReply ? this._renderReplyContext() : nothing}
+        ${items.map((item, i) => this._renderThreadPost(item, i, showRemove))}
+        ${this._renderAddToThreadRow()}
+      </div>
+    `;
+  }
+
+  private _renderAddThreadTrigger() {
+    const PLUS_ICON = `<circle cx="8" cy="8" r="5.7"/><path d="M8 5.55v4.9M5.55 8h4.9"/>`;
+    const disabled = !this._hasContent();
+    return html`
+      <div class="compose-add-thread-trigger">
+        <button
+          type="button"
+          class="compose-add-thread-btn"
+          ?disabled=${disabled}
+          @click=${() => this._addThreadItem()}
+        >
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.65"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            ${unsafeSVG(PLUS_ICON)}
+          </svg>
+          Add to thread
+        </button>
       </div>
     `;
   }
 
   render() {
     const isReply = !!(this._replyToId && this._replyToData);
+    const isThreadMode = this._threadItems.length > 0;
+    const isOpeningEdit = this._openingEdit;
     const editor = html`<jant-compose-editor
       .format=${this._format}
       .labels=${this.labels}
@@ -3218,27 +5317,43 @@ export class JantComposeDialog extends LitElement {
           "compose-dialog-inner-page": this.pageMode,
           "compose-dialog-inner-suspended": this._addCollectionPanelOpen,
         })}
+        tabindex="-1"
         aria-hidden=${this._addCollectionPanelOpen ? "true" : "false"}
         ?inert=${this._addCollectionPanelOpen}
       >
         ${this._renderHeader()}
-        ${isReply
-          ? html`
-              <div class="compose-thread-layout">
-                ${this._renderReplyContext()}
-                <div class="compose-editor-row">
-                  <div class="compose-thread-dot"></div>
-                  ${editor}
-                </div>
-              </div>
-            `
-          : editor}
-
-        <div class="compose-action-row">
-          ${this._renderCollectionSelector()} ${this._renderPublishButton()}
-        </div>
-        ${this._renderAttachedPanel()} ${this._renderAltPanel()}
-        ${this._renderDraftsPanel()} ${this._renderConfirmPanel()}
+        ${isOpeningEdit
+          ? this._renderEditLoadingState()
+          : isThreadMode
+            ? this._renderThreadComposeLayout()
+            : isReply
+              ? html`
+                  <div class="compose-thread-layout">
+                    ${this._renderReplyContext()}
+                    <div class="compose-editor-row">
+                      <div class="compose-thread-dot"></div>
+                      ${editor}
+                    </div>
+                  </div>
+                `
+              : editor}
+        ${isOpeningEdit || isThreadMode || this._editPostId
+          ? nothing
+          : this._renderAddThreadTrigger()}
+        ${isOpeningEdit
+          ? nothing
+          : html`<div
+              class=${classMap({
+                "compose-action-row": true,
+                "compose-action-row-overlay-open":
+                  this._showPublishPanel || this._showCollection,
+              })}
+            >
+              ${this._renderCollectionSelector()} ${this._renderPublishButton()}
+            </div>`}
+        ${this._renderMobilePublishPanel()} ${this._renderAttachedPanel()}
+        ${this._renderAltPanel()} ${this._renderDraftsPanel()}
+        ${this._renderConfirmPanel()}
       </div>
       ${this._renderAddCollectionPanel()}
     `;