@jant/core 0.3.38 → 0.3.40

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

@@ -10,6 +10,7 @@
 import { LitElement, html, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 import type { Editor, JSONContent } from "@tiptap/core";
 import type {
   ComposeFormat,
@@ -17,25 +18,70 @@ import type {
   ComposeLabels,
   ComposeCollection,
   ComposeSubmitDetail,
+  ComposeSubmitAttachment,
   ComposeAttachment,
   DraftItem,
   LocalDraft,
+  ComposeFullscreenOpenDetail,
+  ComposeFullscreenReplyContext,
+  ComposeFullscreenCloseDetail,
 } from "./compose-types.js";
 import type { CollectionSubmitDetail } from "./collection-types.js";
 import { showToast } from "../toast.js";
+import { publicPath } from "../runtime-paths.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 { renderCollectionIcon } from "../../lib/icons.js";
 
 interface ReplyToData {
   contentHtml: string;
   dateText: string;
 }
 
+interface ComposeMediaAttachmentResponse {
+  id: string;
+  previewUrl: string;
+  alt?: string;
+  mimeType: string;
+  url?: string;
+  summary?: string;
+}
+
+interface ComposePostResponse {
+  id: string;
+  threadId?: string;
+  format: ComposeFormat;
+  slug?: string | null;
+  visibility?: ComposeVisibility | null;
+  replyToId?: string | null;
+  collectionIds?: string[];
+  mediaAttachments?: ComposeMediaAttachmentResponse[];
+  title?: string | null;
+  body?: string | null;
+  url?: string | null;
+  sourceName?: string | null;
+  sourceUrl?: string | null;
+  quoteText?: string | null;
+  rating?: number | null;
+  publishedAt?: number | null;
+  bodyHtml?: string | null;
+}
+
+interface DraftsResponse {
+  posts?: Record<string, unknown>[];
+}
+
+interface ComposeOpenOptions {
+  collectionId?: string;
+  restoreDraft?: boolean;
+}
+
 interface ComposeStateSnapshot {
   format: ComposeFormat;
   collectionIds: string[];
+  slug: string;
+  visibility: ComposeVisibility;
   title: string;
   bodyJson: JSONContent | null;
   url: string;
@@ -64,7 +110,192 @@ interface ComposeStateSnapshot {
   attachmentOrder: string[];
 }
 
+const EDITOR_FLOATING_UI_SELECTOR = "[data-editor-floating-ui]";
+
+interface ComposeFilePickerCloseDetail {
+  cancelled?: boolean;
+}
+
+const COMPOSE_DIALOG_HEADER_ICONS = {
+  drafts: `
+    <rect x="3.85" y="3.45" width="7.85" height="8.35" rx="2.35" />
+    <rect
+      x="6.15"
+      y="5.75"
+      width="7.85"
+      height="8.35"
+      rx="2.35"
+      fill="var(--compose-dialog-icon-paper-fill)"
+      stroke="none"
+    />
+    <rect x="6.15" y="5.75" width="7.85" height="8.35" rx="2.35" />
+    <path d="M8.55 8.55h3.2" stroke-width="1.2" />
+    <path d="M8.55 10.8h3.95" stroke-width="1.2" />
+    <path d="M8.55 13.05h2.45" stroke-width="1.2" />
+  `,
+} as const;
+
+const COMPOSE_PUBLISH_VISIBILITY_ICONS: Record<ComposeVisibility, string> = {
+  public: `
+    <circle cx="8" cy="8" r="5.15" />
+    <path d="M3.85 8h8.3" />
+    <path d="M8 2.85c1.22 1.32 1.95 3.08 1.95 5.15S9.22 11.83 8 13.15" />
+    <path d="M8 2.85C6.78 4.17 6.05 5.93 6.05 8S6.78 11.83 8 13.15" />
+  `,
+  latest_hidden: `
+    <path
+      d="M2.55 8c1.38-2.18 3.44-3.4 5.45-3.4S12.07 5.82 13.45 8c-1.38 2.18-3.44 3.4-5.45 3.4S3.93 10.18 2.55 8Z"
+    />
+    <path d="M4.35 11.1 11.65 4.9" />
+  `,
+  private: `
+    <rect x="4.05" y="7.05" width="7.9" height="5.4" rx="1.75" />
+    <path d="M5.95 7.05V5.9A2.05 2.05 0 0 1 8 3.85a2.05 2.05 0 0 1 2.05 2.05v1.15" />
+  `,
+};
+
+const COMPOSE_PUBLISH_ACTION_ICONS = {
+  check: `
+    <path d="M4.35 8.2 6.9 10.7 11.65 5.95" />
+  `,
+  chevron: `
+    <path d="M5.1 6.45 8 9.3l2.9-2.85" />
+  `,
+} as const;
+
+const COMPOSE_COLLECTION_PICKER_ICONS = {
+  collection: `
+    <rect x="3" y="5.05" width="10" height="8.15" rx="2.2" />
+    <path d="M5.1 5.05V4.2a1.1 1.1 0 0 1 1.1-1.1h3.6a1.1 1.1 0 0 1 1.1 1.1v.85" />
+  `,
+  search: `
+    <circle cx="7.1" cy="7.1" r="3.65" />
+    <path d="m10.1 10.1 2.45 2.45" />
+  `,
+  plus: `
+    <path d="M8 3.5v9" />
+    <path d="M3.5 8h9" />
+  `,
+  plusCircle: `
+    <circle cx="8" cy="8" r="5.7" />
+    <path d="M8 5.55v4.9" />
+    <path d="M5.55 8h4.9" />
+  `,
+  chevron: `
+    <path d="M5.1 6.45 8 9.3l2.9-2.85" />
+  `,
+} as const;
+
+function renderComposeHeaderIcon(
+  icon: (typeof COMPOSE_DIALOG_HEADER_ICONS)[keyof typeof COMPOSE_DIALOG_HEADER_ICONS],
+) {
+  return html`<svg
+    class="compose-dialog-header-icon"
+    width="24"
+    height="24"
+    viewBox="0 0 18 18"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.25"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    ${unsafeSVG(icon)}
+  </svg>`;
+}
+
+function renderComposePublishVisibilityIcon(
+  icon: string,
+  classes: string | ReturnType<typeof classMap>,
+) {
+  return html`<span class=${classes} aria-hidden="true">
+    <svg
+      class="compose-publish-visibility-svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.35"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      ${unsafeSVG(icon)}
+    </svg>
+  </span>`;
+}
+
+function renderComposeCollectionPickerIcon(
+  icon: (typeof COMPOSE_COLLECTION_PICKER_ICONS)[keyof typeof COMPOSE_COLLECTION_PICKER_ICONS],
+  classes: string,
+) {
+  return html`<svg
+    class=${classes}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.35"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    ${unsafeSVG(icon)}
+  </svg>`;
+}
+
+function renderComposePublishActionIcon(
+  icon: (typeof COMPOSE_PUBLISH_ACTION_ICONS)[keyof typeof COMPOSE_PUBLISH_ACTION_ICONS],
+  classes: string,
+) {
+  return html`<svg
+    class=${classes}
+    width="14"
+    height="14"
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.55"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    ${unsafeSVG(icon)}
+  </svg>`;
+}
+
+function toComposeCollections(value: unknown): ComposeCollection[] {
+  if (!Array.isArray(value)) return [];
+
+  return value.flatMap((item) => {
+    if (!item || typeof item !== "object") return [];
+
+    const id = Reflect.get(item, "id");
+    const title = Reflect.get(item, "title");
+    if (typeof id !== "string" || typeof title !== "string") return [];
+
+    return [{ id, title }];
+  });
+}
+
+function isEmptyComposeDoc(json: JSONContent): boolean {
+  if (!json.content || json.content.length === 0) return true;
+  return json.content.every(
+    (node) =>
+      node.type === "paragraph" && (!node.content || node.content.length === 0),
+  );
+}
+
+function normalizeComposeDoc(json: JSONContent | null): JSONContent | null {
+  if (!json) return null;
+  return isEmptyComposeDoc(json) ? null : json;
+}
+
 export class JantComposeDialog extends LitElement {
+  private static _lastNewPostVisibility: ComposeVisibility = "public";
+
   static properties = {
     collections: { type: Array },
     labels: { type: Object },
@@ -77,7 +308,6 @@ export class JantComposeDialog extends LitElement {
     _loading: { state: true },
     _collectionIds: { state: true },
     _showCollection: { state: true },
-    _showMoreMenu: { state: true },
     _collectionSearch: { state: true },
     _altPanelOpen: { state: true },
     _altPanelIndex: { state: true },
@@ -95,9 +325,14 @@ export class JantComposeDialog extends LitElement {
     _replyToId: { state: true },
     _replyToData: { state: true },
     _replyExpanded: { state: true },
+    _slug: { state: true },
     _visibility: { state: true },
-    _featured: { state: true },
-    _showVisibilityMenu: { state: true },
+    _showPublishPanel: { state: true },
+    _suggestedSlug: { state: true },
+    _suggestedSlugLoading: { state: true },
+    _slugCheckLoading: { state: true },
+    _slugTaken: { state: true },
+    _visibilityLocked: { state: true },
   };
 
   declare collections: ComposeCollection[];
@@ -111,7 +346,6 @@ export class JantComposeDialog extends LitElement {
   declare _loading: boolean;
   declare _collectionIds: string[];
   declare _showCollection: boolean;
-  declare _showMoreMenu: boolean;
   declare _collectionSearch: string;
   declare _altPanelOpen: boolean;
   declare _altPanelIndex: number;
@@ -129,19 +363,40 @@ export class JantComposeDialog extends LitElement {
   declare _replyToId: string | null;
   declare _replyToData: ReplyToData | null;
   declare _replyExpanded: boolean;
+  declare _slug: string;
   declare _visibility: ComposeVisibility;
-  declare _featured: boolean;
-  declare _showVisibilityMenu: boolean;
+  declare _showPublishPanel: boolean;
+  declare _suggestedSlug: string;
+  declare _suggestedSlugLoading: boolean;
+  declare _slugCheckLoading: boolean;
+  declare _slugTaken: boolean;
+  declare _visibilityLocked: boolean;
 
   private _attachedEditor: Editor | null = null;
   private _attachedTextSnapshot: JSONContent | null = null;
   private _confirmForDrafts = false;
+  private _confirmForAttachedText = false;
   private _draftSaveTimer: ReturnType<typeof setTimeout> | null = null;
   private _draftRestored = false;
   private _initialSnapshot: string | null = null;
   private _pageFocusApplied = false;
   private _pageLeaveRequested = false;
+  private _replyThreadRootId: string | null = null;
+  private _replyRefreshKind:
+    | "timeline-item"
+    | "post-card"
+    | "post-view"
+    | null = null;
+  private _replyRefreshId: string | null = null;
+  private _slugCheckTimer: ReturnType<typeof setTimeout> | null = null;
+  private _slugSuggestTimer: ReturnType<typeof setTimeout> | null = null;
+  private _slugSuggestRequestId = 0;
+  private _slugCheckRequestId = 0;
+  private _slugSuggestionKey = "";
   private _suppressBeforeUnload = false;
+  private _dialogEl: HTMLDialogElement | null = null;
+  private _filePickerActive = false;
+  private _ignoreNextEscapeClose = false;
 
   createRenderRoot() {
     this.innerHTML = "";
@@ -161,7 +416,6 @@ export class JantComposeDialog extends LitElement {
     this._loading = false;
     this._collectionIds = [];
     this._showCollection = false;
-    this._showMoreMenu = false;
     this._collectionSearch = "";
     this._altPanelOpen = false;
     this._altPanelIndex = 0;
@@ -179,9 +433,17 @@ export class JantComposeDialog extends LitElement {
     this._replyToId = null;
     this._replyToData = null;
     this._replyExpanded = false;
-    this._visibility = "public";
-    this._featured = false;
-    this._showVisibilityMenu = false;
+    this._replyThreadRootId = null;
+    this._replyRefreshKind = null;
+    this._replyRefreshId = null;
+    this._slug = "";
+    this._visibility = JantComposeDialog._lastNewPostVisibility;
+    this._showPublishPanel = false;
+    this._suggestedSlug = "";
+    this._suggestedSlugLoading = false;
+    this._slugCheckLoading = false;
+    this._slugTaken = false;
+    this._visibilityLocked = false;
   }
 
   private get _editor(): JantComposeEditor | null {
@@ -193,7 +455,24 @@ export class JantComposeDialog extends LitElement {
     if (this._initialSnapshot === null && this._editor) {
       this._captureInitialSnapshot();
     }
-    if (changed.has("_format") || changed.has("_collectionIds")) {
+    if (
+      changed.has("_addCollectionPanelOpen") &&
+      this._addCollectionPanelOpen
+    ) {
+      this.updateComplete.then(() => {
+        const titleInput = this.querySelector<HTMLInputElement>(
+          "[data-collection-quick-dialog] [data-collection-title-input]",
+        );
+        titleInput?.focus();
+        titleInput?.select();
+      });
+    }
+    if (
+      changed.has("_format") ||
+      changed.has("_collectionIds") ||
+      changed.has("_slug") ||
+      changed.has("_visibility")
+    ) {
       // Schedule draft auto-save for new-post mode only
       if (!this._editPostId && !this._draftSourceId) {
         this._scheduleDraftSave();
@@ -207,7 +486,6 @@ export class JantComposeDialog extends LitElement {
     this._loading = false;
     this._collectionIds = [];
     this._showCollection = false;
-    this._showMoreMenu = false;
     this._collectionSearch = "";
     this._altPanelOpen = false;
     this._altPanelIndex = 0;
@@ -225,28 +503,70 @@ export class JantComposeDialog extends LitElement {
     this._replyToId = null;
     this._replyToData = null;
     this._replyExpanded = false;
-    this._visibility = "public";
-    this._featured = false;
-    this._showVisibilityMenu = false;
+    this._replyThreadRootId = null;
+    this._replyRefreshKind = null;
+    this._replyRefreshId = null;
+    this._slug = "";
+    this._visibility = JantComposeDialog._lastNewPostVisibility;
+    this._showPublishPanel = false;
+    this._suggestedSlug = "";
+    this._suggestedSlugLoading = false;
+    this._slugCheckLoading = false;
+    this._slugTaken = false;
+    this._slugSuggestionKey = "";
+    this._visibilityLocked = false;
     this._confirmForDrafts = false;
+    this._confirmForAttachedText = false;
     this._initialSnapshot = null;
     this._pageFocusApplied = false;
     this._pageLeaveRequested = false;
+    this._slugSuggestRequestId += 1;
+    this._slugCheckRequestId += 1;
     this._suppressBeforeUnload = false;
+    this._filePickerActive = false;
+    this._ignoreNextEscapeClose = false;
+    this._cancelSlugTimers();
     this._destroyAttachedEditor();
     this._editor?.reset();
     this._captureInitialSnapshot();
   }
 
+  async refreshCollections(): Promise<boolean> {
+    try {
+      const res = await fetch("/api/collections?view=compose", {
+        headers: { Accept: "application/json" },
+      });
+      if (!res.ok) return false;
+
+      const body = (await res.json().catch(() => null)) as {
+        collections?: unknown;
+      } | null;
+      if (!Array.isArray(body?.collections)) return false;
+
+      this.collections = toComposeCollections(body.collections);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
   async openEdit(id: string) {
     this.reset();
 
     const res = await fetch(`/api/posts/${id}`);
     if (!res.ok) return;
-    const post = await res.json();
+    const post = (await res.json()) as ComposePostResponse;
 
     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) {
@@ -268,7 +588,7 @@ export class JantComposeDialog extends LitElement {
     // 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 }) => {
+        async (m: { id: string; url?: string; summary?: string }) => {
           try {
             const textRes = await fetch(`/api/media/${m.id}/content`);
             if (textRes.ok) {
@@ -299,12 +619,15 @@ export class JantComposeDialog extends LitElement {
 
     this._editor?.populate({
       format: post.format,
-      title: post.title ?? undefined,
+      title: post.format === "quote" ? undefined : (post.title ?? undefined),
       bodyJson: post.body ?? undefined,
-      url: post.url ?? undefined,
+      url:
+        post.format === "quote"
+          ? (post.sourceUrl ?? undefined)
+          : (post.url ?? undefined),
       quoteText: post.quoteText ?? undefined,
       quoteAuthor:
-        post.format === "quote" ? (post.title ?? undefined) : undefined,
+        post.format === "quote" ? (post.sourceName ?? undefined) : undefined,
       rating: post.rating ?? undefined,
       media: nonTextMedia.map(
         (m: {
@@ -330,15 +653,48 @@ export class JantComposeDialog extends LitElement {
     });
   }
 
+  async openNew(options?: ComposeOpenOptions) {
+    this.reset();
+
+    if (options?.restoreDraft !== false) {
+      await this.restoreLocalDraft();
+    }
+
+    if (
+      options?.collectionId &&
+      !this._collectionIds.includes(options.collectionId)
+    ) {
+      this._collectionIds = [options.collectionId, ...this._collectionIds];
+    }
+
+    this.closest("dialog")?.showModal();
+    await this.updateComplete;
+    this._editor?.focusInput();
+    this._captureInitialSnapshot();
+  }
+
   /**
    * Open compose dialog in reply mode.
    *
-   * @param id - UUID of the post being replied to
+   * @param id - TypeID of the post being replied to
    * @param replyData - Pre-captured content from the DOM (avoids API fetch)
+   * @param threadRootId - TypeID of the thread root (used for in-place timeline refresh)
+   * @param refreshTarget - Current view to patch after publishing the reply
    */
-  async openReply(id: string, replyData?: ReplyToData) {
+  async openReply(
+    id: string,
+    replyData?: ReplyToData,
+    threadRootId?: string,
+    refreshTarget?: {
+      kind: "timeline-item" | "post-card" | "post-view";
+      id: string;
+    },
+  ) {
     this.reset();
     this._replyToId = id;
+    this._replyThreadRootId = threadRootId ?? id;
+    this._replyRefreshKind = refreshTarget?.kind ?? null;
+    this._replyRefreshId = refreshTarget?.id ?? null;
     this._replyToData = replyData ?? null;
     this._format = "note";
 
@@ -356,7 +712,10 @@ export class JantComposeDialog extends LitElement {
     try {
       const res = await fetch(`/api/posts/${replyToId}`);
       if (!res.ok) return;
-      const post = await res.json();
+      const post = (await res.json()) as ComposePostResponse;
+      this._replyThreadRootId = (post.replyToId as string | null)
+        ? (post.threadId as string)
+        : (post.id as string);
       const dateText = post.publishedAt
         ? new Date(post.publishedAt * 1000).toLocaleDateString(undefined, {
             month: "short",
@@ -380,12 +739,14 @@ export class JantComposeDialog extends LitElement {
     const dialog = this.closest("dialog");
     if (dialog) {
       dialog.close();
+      // Prevent browsers from leaving the opener in a lingering :focus-visible state.
+      (document.activeElement as HTMLElement)?.blur();
       return;
     }
 
     if (this.pageMode) {
       this._suppressBeforeUnload = true;
-      globalThis.location.assign(this.closeHref || "/");
+      globalThis.location.assign(this.closeHref || publicPath("/"));
     }
   }
 
@@ -404,6 +765,19 @@ export class JantComposeDialog extends LitElement {
     this._suppressBeforeUnload = true;
   }
 
+  private _clearFilePickerEscapeState() {
+    this._filePickerActive = false;
+    this._ignoreNextEscapeClose = false;
+  }
+
+  private _shouldIgnoreEscapeClose(): boolean {
+    if (this._filePickerActive || this._ignoreNextEscapeClose) {
+      this._clearFilePickerEscapeState();
+      return true;
+    }
+    return false;
+  }
+
   private _hasContent(): boolean {
     const editor = this._editor;
     if (!editor) return false;
@@ -414,7 +788,7 @@ export class JantComposeDialog extends LitElement {
     if (data.url.trim()) return true;
     if (data.quoteText.trim()) return true;
     if (data.quoteAuthor.trim()) return true;
-    if (data.attachedTexts.some((t) => t.bodyJson !== null)) return true;
+    if (data.attachedTexts.length > 0) return true;
     if (data.rating > 0) return true;
     if (data.attachments.length > 0) return true;
     // Collection selection alone isn't content — it's metadata that
@@ -427,17 +801,27 @@ export class JantComposeDialog extends LitElement {
     const editor = this._editor;
     if (!editor) return null;
 
+    const editorData = editor.getData();
+    const attachedTexts = editor.getEffectiveAttachedTexts();
+    const showTitle =
+      this._format === "note" && editorData.title.trim().length > 0
+        ? editor._showTitle
+        : false;
+    const showRating = editorData.rating > 0 ? editor._showRating : false;
+
     return {
       format: this._format,
       collectionIds: [...this._collectionIds],
-      title: editor._title,
-      bodyJson: editor._bodyJson,
-      url: editor._url,
-      quoteText: editor._quoteText,
-      quoteAuthor: editor._quoteAuthor,
-      rating: editor._rating,
-      showTitle: editor._showTitle,
-      showRating: editor._showRating,
+      slug: this._slug,
+      visibility: this._visibility,
+      title: editorData.title,
+      bodyJson: editor.getNormalizedBodyJson(),
+      url: editorData.url,
+      quoteText: editorData.quoteText,
+      quoteAuthor: editorData.quoteAuthor,
+      rating: editorData.rating,
+      showTitle,
+      showRating,
       attachments: editor._attachments.map((attachment) => ({
         clientId: attachment.clientId,
         mediaId: attachment.mediaId,
@@ -448,14 +832,14 @@ export class JantComposeDialog extends LitElement {
         summary: attachment.summary,
         chars: attachment.chars,
       })),
-      attachedTexts: editor._attachedTexts.map((item) => ({
+      attachedTexts: attachedTexts.map((item) => ({
         clientId: item.clientId,
         mediaId: item.mediaId ?? null,
         bodyJson: item.bodyJson,
         bodyHtml: item.bodyHtml,
         summary: item.summary,
       })),
-      attachmentOrder: [...editor._attachmentOrder],
+      attachmentOrder: editor.getEffectiveAttachmentOrder(),
     };
   }
 
@@ -473,6 +857,9 @@ export class JantComposeDialog extends LitElement {
   private _hasUnsavedChanges(): boolean {
     const currentSnapshot = this._serializeSnapshot(this._buildSnapshot());
     if (currentSnapshot === null) return false;
+    if (!this._editPostId && !this._draftSourceId && !this._hasContent()) {
+      return false;
+    }
     if (this._initialSnapshot === null) return this._hasContent();
     return currentSnapshot !== this._initialSnapshot;
   }
@@ -485,18 +872,23 @@ export class JantComposeDialog extends LitElement {
       this._showCollection = false;
       this._collectionSearch = "";
     }
-    if (this._showMoreMenu) {
-      this._showMoreMenu = false;
-    }
-    if (this._showVisibilityMenu) {
-      this._showVisibilityMenu = false;
+    if (this._showPublishPanel) {
+      this._showPublishPanel = false;
     }
 
     if (this._confirmPanelOpen) {
+      const restoreAttachedFocus = this._confirmForAttachedText;
       this._confirmPanelOpen = false;
       this._confirmForDrafts = false;
+      this._confirmForAttachedText = false;
       this._pageLeaveRequested = false;
-      this.updateComplete.then(() => this._editor?.focusInput());
+      this.updateComplete.then(() => {
+        if (restoreAttachedFocus) {
+          this._attachedEditor?.commands.focus();
+          return;
+        }
+        this._editor?.focusInput();
+      });
       return;
     }
 
@@ -504,6 +896,7 @@ export class JantComposeDialog extends LitElement {
     if (this._editPostId) {
       if (this._hasUnsavedChanges()) {
         this._confirmForDrafts = false;
+        this._confirmForAttachedText = false;
         this._confirmPanelOpen = true;
       } else {
         this._closeDialog();
@@ -514,6 +907,7 @@ export class JantComposeDialog extends LitElement {
 
     if (this._hasContent()) {
       this._confirmForDrafts = false;
+      this._confirmForAttachedText = false;
       this._confirmPanelOpen = true;
     } else {
       this._closeDialog();
@@ -529,13 +923,24 @@ export class JantComposeDialog extends LitElement {
     }
     this._clearDraftFromStorage();
     this._confirmPanelOpen = false;
+    this._confirmForAttachedText = false;
     this._closeDialog();
-    (document.activeElement as HTMLElement)?.blur();
     this.reset();
   }
 
+  private _discardAttachedPanel() {
+    this._confirmForAttachedText = false;
+    this._destroyAttachedEditor();
+    this._attachedPanelOpen = false;
+    this._editor?.closeAttachedPanel(this._attachedTextIndex);
+  }
+
   private _handleConfirmSave() {
-    if (this._confirmForDrafts) {
+    if (this._confirmForAttachedText) {
+      this._confirmPanelOpen = false;
+      this._confirmForAttachedText = false;
+      this._doneAttachedPanel();
+    } else if (this._confirmForDrafts) {
       this._dispatchSubmit("draft");
       this._confirmPanelOpen = false;
       this.reset();
@@ -551,7 +956,10 @@ export class JantComposeDialog extends LitElement {
   }
 
   private _handleConfirmDiscard() {
-    if (this._confirmForDrafts) {
+    if (this._confirmForAttachedText) {
+      this._confirmPanelOpen = false;
+      this._discardAttachedPanel();
+    } else if (this._confirmForDrafts) {
       if (this._draftSourceId) {
         const id = this._draftSourceId;
         fetch(`/api/posts/${id}`, { method: "DELETE" }).catch(() => {});
@@ -572,27 +980,40 @@ export class JantComposeDialog extends LitElement {
     if (!editor) return null;
 
     const editorData = editor.getData();
-    const attachments = editorData.attachments ?? [];
-
-    // Collect mediaIds from completed uploads
-    const mediaIds = attachments
-      .filter((a) => a.status === "done" && a.mediaId)
-      .map((a) => a.mediaId as string);
-
-    // Collect alt text keyed by mediaId
-    const mediaAlts: Record<string, string> = {};
-    for (const a of attachments) {
-      if (a.mediaId && a.alt) {
-        mediaAlts[a.mediaId] = a.alt;
+    const mediaAttachments = new Map(
+      (editorData.attachments ?? []).map((attachment) => [
+        attachment.clientId,
+        attachment,
+      ]),
+    );
+    const textAttachments = new Map(
+      editorData.attachedTexts.map((item) => [item.clientId, item]),
+    );
+    const orderedAttachments: ComposeSubmitAttachment[] = [];
+    for (const clientId of editorData.attachmentOrder) {
+      const mediaAttachment = mediaAttachments.get(clientId);
+      if (mediaAttachment) {
+        orderedAttachments.push({
+          type: "media",
+          clientId,
+          mediaId: mediaAttachment.mediaId,
+          alt: mediaAttachment.alt || undefined,
+        });
+        continue;
       }
-    }
 
-    // Capture clientId → mediaId for all done attachments now,
-    // because the editor will be reset before the deferred handler runs
-    const mediaClientMap: Record<string, string> = {};
-    for (const a of attachments) {
-      if (a.mediaId) {
-        mediaClientMap[a.clientId] = a.mediaId;
+      const textAttachment = textAttachments.get(clientId);
+      if (textAttachment?.bodyJson) {
+        orderedAttachments.push({
+          type: "text",
+          clientId,
+          bodyJson: textAttachment.bodyJson,
+          summary: textAttachment.summary,
+          mediaId: textAttachment.mediaId,
+          originalBodyJson: normalizeComposeDoc(
+            textAttachment.originalBodyJson ?? null,
+          ),
+        });
       }
     }
 
@@ -603,25 +1024,56 @@ export class JantComposeDialog extends LitElement {
       url: editorData.url,
       quoteText: editorData.quoteText,
       quoteAuthor: editorData.quoteAuthor,
+      slug: this._slug.trim() || undefined,
       status,
-      visibility: this._visibility,
-      featured: this._featured || undefined,
+      visibility: this._visibilityLocked ? undefined : this._visibility,
       rating: editorData.rating,
       collectionIds: [...this._collectionIds],
-      mediaIds,
-      mediaAlts,
-      attachedTexts: editorData.attachedTexts,
-      attachmentOrder: editorData.attachmentOrder ?? [],
-      mediaClientMap,
+      attachments: orderedAttachments,
       editPostId: this._editPostId ?? this._draftSourceId ?? undefined,
       replyToId: this._replyToId ?? undefined,
+      replyThreadRootId: this._replyThreadRootId ?? undefined,
+      replyRefreshKind: this._replyRefreshKind ?? undefined,
+      replyRefreshId: this._replyRefreshId ?? undefined,
     };
   }
 
+  private _focusBlockedSubmitField(): boolean {
+    if (this._getSlugValidationMessage()) {
+      this._revealSlugField();
+      return true;
+    }
+
+    const editor = this._editor;
+    if (!editor) return false;
+
+    if (editor.getUrlValidationMessage()) {
+      editor.revealUrlValidation();
+      editor.focusUrlInput("end");
+      return true;
+    }
+
+    if (editor.getLinkTitleValidationMessage()) {
+      editor.revealLinkTitleValidation();
+      editor.focusLinkTitleInput("end");
+      return true;
+    }
+
+    if (this._format === "quote" && !editor._quoteText.trim()) {
+      editor.focusInput("end");
+      return true;
+    }
+
+    return false;
+  }
+
   private _dispatchSubmit(status: "published" | "draft"): boolean {
     if (this._loading) return false;
     const editor = this._editor;
     if (!editor) return false;
+    if (this._focusBlockedSubmitField()) {
+      return false;
+    }
 
     const detail = this._buildSubmitDetail(status);
     if (!detail) return false;
@@ -644,6 +1096,7 @@ export class JantComposeDialog extends LitElement {
   }
 
   private _submit(status: "published" | "draft") {
+    this._showPublishPanel = false;
     this._clearDraftFromStorage();
     if (!this._dispatchSubmit(status)) return;
     if (this.pageMode) {
@@ -651,8 +1104,6 @@ export class JantComposeDialog extends LitElement {
       return;
     }
     this._closeDialog();
-    // Prevent browser from restoring focus to the trigger button
-    (document.activeElement as HTMLElement)?.blur();
     this.reset();
   }
 
@@ -674,6 +1125,189 @@ export class JantComposeDialog extends LitElement {
       .replace("%count%", String(ids.length - 1));
   }
 
+  private _cancelSlugTimers() {
+    if (this._slugCheckTimer !== null) {
+      clearTimeout(this._slugCheckTimer);
+      this._slugCheckTimer = null;
+    }
+    if (this._slugSuggestTimer !== null) {
+      clearTimeout(this._slugSuggestTimer);
+      this._slugSuggestTimer = null;
+    }
+  }
+
+  private _currentSlugOwnerId(): string | undefined {
+    return this._editPostId ?? this._draftSourceId ?? undefined;
+  }
+
+  private _hasManualSlug(): boolean {
+    return this._slug.trim().length > 0;
+  }
+
+  private _currentSuggestionTitle(): string {
+    return this._editor?.getData().title.trim() ?? "";
+  }
+
+  private _canSuggestSlug(): boolean {
+    return this._currentSuggestionTitle().length > 0;
+  }
+
+  private _currentSuggestionKey(): string {
+    return `${this._currentSlugOwnerId() ?? ""}::${this._currentSuggestionTitle()}`;
+  }
+
+  private _scheduleSuggestedSlugRefresh(immediate = false) {
+    if (!this._showPublishPanel || this._hasManualSlug()) return;
+    if (!this._canSuggestSlug()) {
+      this._slugSuggestRequestId += 1;
+      this._suggestedSlug = "";
+      this._suggestedSlugLoading = false;
+      this._slugSuggestionKey = "";
+      return;
+    }
+
+    const key = this._currentSuggestionKey();
+    if (this._slugSuggestionKey !== key) {
+      this._suggestedSlug = "";
+    }
+    if (
+      !immediate &&
+      !this._suggestedSlugLoading &&
+      this._suggestedSlug &&
+      this._slugSuggestionKey === key
+    ) {
+      return;
+    }
+
+    if (this._slugSuggestTimer !== null) {
+      clearTimeout(this._slugSuggestTimer);
+      this._slugSuggestTimer = null;
+    }
+
+    const run = () => void this._refreshSuggestedSlug(key);
+    if (immediate) {
+      run();
+      return;
+    }
+    this._slugSuggestTimer = setTimeout(run, 250);
+  }
+
+  private async _refreshSuggestedSlug(key: string) {
+    this._slugSuggestTimer = null;
+    if (this._hasManualSlug() || !this._canSuggestSlug()) return;
+
+    const requestId = ++this._slugSuggestRequestId;
+    this._suggestedSlugLoading = true;
+
+    const params = new URLSearchParams({ mode: "suggest" });
+    const title = this._currentSuggestionTitle();
+    if (title) params.set("title", title);
+    const postId = this._currentSlugOwnerId();
+    if (postId) params.set("postId", postId);
+
+    try {
+      const res = await fetch(`/api/posts/slug?${params.toString()}`);
+      if (!res.ok) return;
+      const json = (await res.json()) as { slug?: string };
+      if (
+        requestId !== this._slugSuggestRequestId ||
+        this._hasManualSlug() ||
+        !this._showPublishPanel
+      ) {
+        return;
+      }
+      this._suggestedSlug = json.slug?.trim() ?? "";
+      this._slugSuggestionKey = key;
+    } catch {
+      // Suggestion is a convenience only — publish still works without it.
+    } finally {
+      if (requestId === this._slugSuggestRequestId) {
+        this._suggestedSlugLoading = false;
+      }
+    }
+  }
+
+  private _scheduleSlugAvailabilityCheck() {
+    if (!this._hasManualSlug()) {
+      this._slugTaken = false;
+      this._slugCheckLoading = false;
+      return;
+    }
+
+    if (this._slugCheckTimer !== null) {
+      clearTimeout(this._slugCheckTimer);
+      this._slugCheckTimer = null;
+    }
+
+    const syncError = this._getSlugSyncValidationMessage();
+    if (syncError) {
+      this._slugTaken = false;
+      this._slugCheckLoading = false;
+      return;
+    }
+
+    this._slugCheckLoading = true;
+    const slug = this._slug.trim();
+    this._slugCheckTimer = setTimeout(() => {
+      void this._checkSlugAvailability(slug);
+    }, 250);
+  }
+
+  private async _checkSlugAvailability(slug: string) {
+    this._slugCheckTimer = null;
+    const requestId = ++this._slugCheckRequestId;
+
+    const params = new URLSearchParams({
+      mode: "check",
+      slug,
+    });
+    const postId = this._currentSlugOwnerId();
+    if (postId) params.set("postId", postId);
+
+    try {
+      const res = await fetch(`/api/posts/slug?${params.toString()}`);
+      if (!res.ok) return;
+      const json = (await res.json()) as { available?: boolean };
+      if (
+        requestId !== this._slugCheckRequestId ||
+        this._slug.trim() !== slug
+      ) {
+        return;
+      }
+      this._slugTaken = json.available === false;
+    } catch {
+      // Server-side create/update remains the final authority.
+    } finally {
+      if (requestId === this._slugCheckRequestId) {
+        this._slugCheckLoading = false;
+      }
+    }
+  }
+
+  private _useSuggestedSlug() {
+    if (!this._suggestedSlug) return;
+    this._slug = this._suggestedSlug;
+    this._slugTaken = false;
+    this._slugCheckLoading = false;
+    this.updateComplete.then(() => {
+      this.querySelector<HTMLInputElement>(
+        ".compose-publish-slug-input",
+      )?.focus();
+    });
+  }
+
+  private _resetCustomSlug() {
+    this._slug = "";
+    this._slugTaken = false;
+    this._slugCheckLoading = false;
+    this._scheduleSuggestedSlugRefresh(true);
+    this.updateComplete.then(() => {
+      this.querySelector<HTMLInputElement>(
+        ".compose-publish-slug-input",
+      )?.focus();
+    });
+  }
+
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener("keydown", this._handleKeydown);
@@ -687,6 +1321,16 @@ export class JantComposeDialog extends LitElement {
       "jant:compose-content-changed",
       this._onContentChanged,
     );
+    this.addEventListener("jant:file-picker-open", this._handleFilePickerOpen);
+    this.addEventListener(
+      "jant:file-picker-close",
+      this._handleFilePickerClose as EventListener,
+    );
+    this.addEventListener(
+      "jant:fullscreen-open",
+      this._handleFullscreenOpen as EventListener,
+    );
+    this.addEventListener("pointerdown", this._handlePointerDown);
     // Listen on document — fullscreen element lives on document.body, outside the dialog
     document.addEventListener(
       "jant:fullscreen-close",
@@ -697,9 +1341,10 @@ export class JantComposeDialog extends LitElement {
     window.addEventListener("beforeunload", this._onBeforeUnload);
 
     // Intercept native dialog cancel (ESC) to route through requestClose
-    const dialog = this.closest("dialog");
-    if (dialog) {
-      dialog.addEventListener("cancel", this._handleDialogCancel);
+    this._dialogEl = this.closest("dialog");
+    if (this._dialogEl) {
+      this._dialogEl.addEventListener("cancel", this._handleDialogCancel);
+      this._dialogEl.addEventListener("click", this._handleDialogClick);
     }
 
     if (this.pageMode) {
@@ -720,53 +1365,157 @@ export class JantComposeDialog extends LitElement {
       "jant:compose-content-changed",
       this._onContentChanged,
     );
+    this.removeEventListener(
+      "jant:file-picker-open",
+      this._handleFilePickerOpen,
+    );
+    this.removeEventListener(
+      "jant:file-picker-close",
+      this._handleFilePickerClose as EventListener,
+    );
+    this.removeEventListener(
+      "jant:fullscreen-open",
+      this._handleFullscreenOpen as EventListener,
+    );
+    this.removeEventListener("pointerdown", this._handlePointerDown);
     document.removeEventListener(
       "jant:fullscreen-close",
       this._handleFullscreenClose as EventListener,
     );
     window.removeEventListener("beforeunload", this._onBeforeUnload);
+    this._cancelSlugTimers();
     this._destroyAttachedEditor();
     this._cancelDraftSaveTimer();
 
-    const dialog = this.closest("dialog");
-    if (dialog) {
-      dialog.removeEventListener("cancel", this._handleDialogCancel);
+    if (this._dialogEl) {
+      this._dialogEl.removeEventListener("cancel", this._handleDialogCancel);
+      this._dialogEl.removeEventListener("click", this._handleDialogClick);
+      this._dialogEl = null;
     }
   }
 
+  private _handleFilePickerOpen = () => {
+    this._filePickerActive = true;
+    this._ignoreNextEscapeClose = false;
+  };
+
+  private _handleFilePickerClose = (
+    e: CustomEvent<ComposeFilePickerCloseDetail>,
+  ) => {
+    this._filePickerActive = false;
+    this._ignoreNextEscapeClose = Boolean(e.detail?.cancelled);
+  };
+
+  private _handlePointerDown = () => {
+    this._clearFilePickerEscapeState();
+  };
+
   private _handleDialogCancel = (e: Event) => {
     e.preventDefault();
+    if (this._shouldIgnoreEscapeClose()) return;
+    if (this._dismissEscapeOverlay()) return;
+    this.requestClose();
+  };
+
+  private _handleDialogClick = (e: Event) => {
+    if (!this._dialogEl || e.target !== this._dialogEl) return;
+
+    const mouseEvent = e as MouseEvent;
+    const hitTarget = document.elementFromPoint(
+      mouseEvent.clientX,
+      mouseEvent.clientY,
+    );
+    if (
+      hitTarget instanceof globalThis.Element &&
+      hitTarget.closest(EDITOR_FLOATING_UI_SELECTOR)
+    ) {
+      return;
+    }
+
     this.requestClose();
   };
 
+  private _focusPageEditorEnd() {
+    this.updateComplete.then(() => this._editor?.focusInput("end"));
+  }
+
+  private _dismissEscapeOverlay(): boolean {
+    if (this._confirmPanelOpen) {
+      this.requestClose();
+      return true;
+    }
+
+    if (this._addCollectionPanelOpen) {
+      this._closeAddCollectionPanel();
+      return true;
+    }
+
+    if (this._editor?.isEmojiPickerOpen()) {
+      this._editor.closeEmojiPicker({ restoreFocus: true });
+      return true;
+    }
+
+    if (this._showCollection) {
+      this._showCollection = false;
+      this._collectionSearch = "";
+      this._focusPageEditorEnd();
+      return true;
+    }
+
+    if (this._showPublishPanel) {
+      this._showPublishPanel = false;
+      this._focusPageEditorEnd();
+      return true;
+    }
+
+    if (this._altPanelOpen) {
+      this._closeAltPanel();
+      this._focusPageEditorEnd();
+      return true;
+    }
+
+    if (this._draftMenuOpenId) {
+      this._draftMenuOpenId = null;
+      return true;
+    }
+
+    if (this._draftsPanelOpen) {
+      this._closeDraftsPanel();
+      return true;
+    }
+
+    if (this._attachedPanelOpen) {
+      this._cancelAttachedPanel();
+      return true;
+    }
+
+    return false;
+  }
+
   private _handleKeydown = (e: Event) => {
     const ke = e as globalThis.KeyboardEvent;
+    if (ke.key !== "Escape") {
+      this._clearFilePickerEscapeState();
+    }
     if (ke.key === "Escape") {
       ke.preventDefault();
       ke.stopPropagation();
-      if (this._showCollection) {
-        this._showCollection = false;
-        this._collectionSearch = "";
-      } else if (this._showMoreMenu) {
-        this._showMoreMenu = false;
-      } else if (this._showVisibilityMenu) {
-        this._showVisibilityMenu = false;
-      } else if (this._addCollectionPanelOpen) {
-        this._addCollectionPanelOpen = false;
-      } else if (this._draftMenuOpenId) {
-        this._draftMenuOpenId = null;
-      } else if (this._draftsPanelOpen) {
-        this._closeDraftsPanel();
-      } else if (this._attachedPanelOpen) {
-        this._cancelAttachedPanel();
-      } else {
-        this.requestClose();
-      }
+      if (this._shouldIgnoreEscapeClose()) return;
+      if (this._dismissEscapeOverlay()) return;
+      this.requestClose();
     } else if (ke.key === "Enter" && this._confirmPanelOpen) {
       ke.preventDefault();
       this._handleConfirmSave();
     } else if ((ke.metaKey || ke.ctrlKey) && ke.key === "Enter") {
       e.preventDefault();
+      if (this._attachedPanelOpen) {
+        this._doneAttachedPanel();
+        return;
+      }
+      if (!this._canPublish()) {
+        this._focusBlockedSubmitField();
+        return;
+      }
       this._submit("published");
     }
   };
@@ -798,15 +1547,34 @@ export class JantComposeDialog extends LitElement {
   }
 
   private _handleFullscreenClose = (
-    e: CustomEvent<{ json: unknown; title: string }>,
+    e: CustomEvent<ComposeFullscreenCloseDetail>,
   ) => {
     const editor = this._editor;
     if (editor) {
       editor.setEditorState(
         e.detail.json as import("@tiptap/core").JSONContent,
         e.detail.title,
+        e.detail.showTitle,
       );
+      this.updateComplete.then(() => editor.focusInput("end"));
     }
+    this._replyExpanded = e.detail.replyExpanded;
+  };
+
+  private _buildFullscreenReplyContext(): ComposeFullscreenReplyContext | null {
+    if (!this._replyToId || !this._replyToData) return null;
+
+    return {
+      contentHtml: this._replyToData.contentHtml,
+      dateText: this._replyToData.dateText,
+      expanded: this._replyExpanded,
+    };
+  }
+
+  private _handleFullscreenOpen = (
+    e: CustomEvent<ComposeFullscreenOpenDetail>,
+  ) => {
+    e.detail.replyContext = this._buildFullscreenReplyContext();
   };
 
   private _handleAttachedPanelOpen = (e: Event) => {
@@ -827,16 +1595,26 @@ export class JantComposeDialog extends LitElement {
         element: container,
         placeholder: this.labels.attachedTextPlaceholder,
         content,
+        toolbarMode: "compose",
       });
-      this._attachedEditor.commands.focus();
+      this._focusAttachedEditorBoundary(content);
     });
   };
 
+  private _focusAttachedEditorBoundary(content?: JSONContent | null) {
+    if (!this._attachedEditor) return;
+    const targetContent = content ?? this._attachedEditor.getJSON();
+    const focusTarget: "start" | "end" = normalizeComposeDoc(targetContent)
+      ? "end"
+      : "start";
+    this._attachedEditor.commands.focus(focusTarget);
+  }
+
   private _isAttachedTextDirty(): boolean {
     if (!this._attachedEditor) return false;
     return (
-      JSON.stringify(this._attachedEditor.getJSON()) !==
-      JSON.stringify(this._attachedTextSnapshot)
+      JSON.stringify(normalizeComposeDoc(this._attachedEditor.getJSON())) !==
+      JSON.stringify(normalizeComposeDoc(this._attachedTextSnapshot))
     );
   }
 
@@ -854,6 +1632,7 @@ export class JantComposeDialog extends LitElement {
       const html = this._attachedEditor.getHTML();
       this._editor?.updateAttachedText(this._attachedTextIndex, json, html);
     }
+    this._confirmForAttachedText = false;
     this._destroyAttachedEditor();
     this._attachedPanelOpen = false;
     this._editor?.closeAttachedPanel(this._attachedTextIndex);
@@ -861,11 +1640,19 @@ export class JantComposeDialog extends LitElement {
 
   private _cancelAttachedPanel() {
     if (this._isAttachedTextDirty()) {
-      if (!globalThis.confirm("Discard changes?")) return;
+      this._confirmForDrafts = false;
+      this._confirmForAttachedText = true;
+      this._confirmPanelOpen = true;
+      return;
     }
     // Revert to snapshot — don't save current editor content
-    this._destroyAttachedEditor();
-    this._attachedPanelOpen = false;
+    this._discardAttachedPanel();
+  }
+
+  private _handleAttachedEditorMouseDown(event: MouseEvent) {
+    if (event.target !== event.currentTarget) return;
+    event.preventDefault();
+    this._focusAttachedEditorBoundary();
   }
 
   // ── Drafts panel ─────────────────────────────────────────────────
@@ -889,16 +1676,24 @@ export class JantComposeDialog extends LitElement {
     try {
       const res = await fetch("/api/posts?status=draft&limit=50");
       if (!res.ok) throw new Error("Failed to load drafts");
-      const json = await res.json();
-      const posts = json.posts ?? json;
+      const json = (await res.json()) as
+        | DraftsResponse
+        | Record<string, unknown>[];
+      const posts = Array.isArray(json) ? json : (json.posts ?? []);
       this._drafts = (posts as Record<string, unknown>[]).map(
         (p): DraftItem => ({
           id: p.id as string,
           format: p.format as ComposeFormat,
-          title: (p.title as string) ?? null,
+          title:
+            ((p.format as ComposeFormat) === "quote"
+              ? (p.sourceName as string)
+              : (p.title as string)) ?? null,
           bodyText: (p.bodyText as string) ?? null,
           bodyHtml: (p.bodyHtml as string) ?? null,
-          url: (p.url as string) ?? null,
+          url:
+            ((p.format as ComposeFormat) === "quote"
+              ? (p.sourceUrl as string)
+              : (p.url as string)) ?? null,
           quoteText: (p.quoteText as string) ?? null,
           replyToId: (p.replyToId as string) ?? null,
           updatedAt: p.updatedAt as number,
@@ -933,10 +1728,18 @@ export class JantComposeDialog extends LitElement {
 
     const res = await fetch(`/api/posts/${id}`);
     if (!res.ok) return;
-    const post = await res.json();
+    const post = (await res.json()) as ComposePostResponse;
 
     this._draftSourceId = 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);
 
     if (post.collectionIds?.length) {
       this._collectionIds = post.collectionIds;
@@ -962,7 +1765,7 @@ export class JantComposeDialog extends LitElement {
     // 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 }) => {
+        async (m: { id: string; url?: string; summary?: string }) => {
           try {
             const textRes = await fetch(`/api/media/${m.id}/content`);
             if (textRes.ok) {
@@ -993,12 +1796,15 @@ export class JantComposeDialog extends LitElement {
 
     this._editor?.populate({
       format: post.format,
-      title: post.title ?? undefined,
+      title: post.format === "quote" ? undefined : (post.title ?? undefined),
       bodyJson: post.body ?? undefined,
-      url: post.url ?? undefined,
+      url:
+        post.format === "quote"
+          ? (post.sourceUrl ?? undefined)
+          : (post.url ?? undefined),
       quoteText: post.quoteText ?? undefined,
       quoteAuthor:
-        post.format === "quote" ? (post.title ?? undefined) : undefined,
+        post.format === "quote" ? (post.sourceName ?? undefined) : undefined,
       rating: post.rating ?? undefined,
       media: nonTextMedia.map(
         (m: {
@@ -1062,6 +1868,10 @@ export class JantComposeDialog extends LitElement {
   private static _DRAFT_MAX_AGE = 7 * 24 * 60 * 60 * 1000; // 7 days
 
   private _onContentChanged = () => {
+    this.requestUpdate();
+    if (!this._hasManualSlug()) {
+      this._scheduleSuggestedSlugRefresh();
+    }
     // Schedule localStorage auto-save for new-post mode only
     if (!this._editPostId && !this._draftSourceId) {
       this._scheduleDraftSave();
@@ -1111,7 +1921,7 @@ export class JantComposeDialog extends LitElement {
       !!data.quoteText.trim() ||
       !!data.quoteAuthor.trim() ||
       data.rating > 0 ||
-      data.attachedTexts.some((t) => t.bodyJson !== null);
+      data.attachedTexts.length > 0;
 
     if (!hasContent) {
       globalThis.localStorage.removeItem(JantComposeDialog._DRAFT_KEY);
@@ -1121,13 +1931,18 @@ export class JantComposeDialog extends LitElement {
     const draft: LocalDraft = {
       format: this._format,
       title: data.title,
-      bodyJson: editor._bodyJson,
+      bodyJson: editor.getNormalizedBodyJson(),
       url: data.url,
       quoteText: data.quoteText,
       quoteAuthor: data.quoteAuthor,
+      slug: this._slug,
+      visibility: this._visibility,
       rating: data.rating,
-      showTitle: editor._showTitle,
-      showRating: editor._showRating,
+      showTitle:
+        this._format === "note" && data.title.trim().length > 0
+          ? editor._showTitle
+          : false,
+      showRating: data.rating > 0 ? editor._showRating : false,
       collectionIds: [...this._collectionIds],
       replyToId: this._replyToId,
       attachedTexts: data.attachedTexts.map((t) => ({
@@ -1136,7 +1951,7 @@ export class JantComposeDialog extends LitElement {
         bodyHtml: t.bodyHtml,
         summary: t.summary,
       })),
-      attachmentOrder: [...(data.attachmentOrder ?? [])],
+      attachmentOrder: [...data.attachmentOrder],
       savedAt: Date.now(),
     };
 
@@ -1185,6 +2000,13 @@ export class JantComposeDialog extends LitElement {
 
     this._format = draft.format;
     this._collectionIds = [...(draft.collectionIds ?? [])];
+    this._slug = draft.slug ?? "";
+    this._slugTaken = false;
+    this._slugCheckLoading = false;
+    this._suggestedSlug = "";
+    this._suggestedSlugLoading = false;
+    this._slugSuggestionKey = "";
+    this._visibility = draft.visibility ?? "public";
 
     // Restore reply context if this draft was a reply
     if (draft.replyToId) {
@@ -1194,14 +2016,18 @@ export class JantComposeDialog extends LitElement {
 
     await this.updateComplete;
 
-    const textAttachments = draft.attachedTexts
-      ?.filter((t) => t.bodyJson !== null)
-      .map((t) => ({
-        clientId: t.clientId,
-        bodyJson: JSON.stringify(t.bodyJson),
-        bodyHtml: t.bodyHtml,
-        summary: t.summary,
-      }));
+    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,
@@ -1412,6 +2238,9 @@ export class JantComposeDialog extends LitElement {
       link: this.labels.link,
       quote: this.labels.quote,
     };
+    const draftButtonLabel = this._hasContent()
+      ? this.labels.saveAsDraft
+      : this.labels.drafts;
 
     return html`
       <header class="compose-dialog-header">
@@ -1447,6 +2276,7 @@ export class JantComposeDialog extends LitElement {
                         })}
                         @click=${() => {
                           this._format = f;
+                          this._showPublishPanel = false;
                           globalThis.requestAnimationFrame(() =>
                             this._editor?.focusInput(),
                           );
@@ -1460,92 +2290,24 @@ export class JantComposeDialog extends LitElement {
               `}
         </div>
 
-        <div class="flex items-center gap-0.5 shrink-0">
+        <div class="compose-dialog-header-actions">
           ${this._editPostId
             ? nothing
             : html`<button
                 type="button"
-                class="compose-dialog-header-btn"
-                title=${this.labels.saveDraft}
+                class="compose-dialog-header-btn compose-dialog-draft-btn"
+                aria-label=${draftButtonLabel}
+                title=${draftButtonLabel}
                 ?disabled=${this._loading}
                 @click=${() => this._handleDraftButtonClick()}
               >
-                <svg
-                  class="icon-fine"
-                  width="18"
-                  height="18"
-                  viewBox="0 0 18 18"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="1.3"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
-                  <path d="M14 2.5L15.5 4 7 12.5l-3 .5.5-3L14 2.5z" />
-                  <path d="M4 15h10" />
-                </svg>
+                ${renderComposeHeaderIcon(COMPOSE_DIALOG_HEADER_ICONS.drafts)}
               </button>`}
-          ${this._renderMoreMenu()}
         </div>
       </header>
     `;
   }
 
-  private _renderMoreMenu() {
-    return html`
-      <div class="relative">
-        ${this._showMoreMenu
-          ? html`<div
-              class="compose-dropdown-backdrop"
-              @click=${() => {
-                this._showMoreMenu = false;
-              }}
-            ></div>`
-          : nothing}
-        <button
-          type="button"
-          class="compose-dialog-header-btn"
-          @click=${() => {
-            this._showMoreMenu = !this._showMoreMenu;
-          }}
-        >
-          <svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
-            <circle cx="4.5" cy="9" r="1.3" />
-            <circle cx="9" cy="9" r="1.3" />
-            <circle cx="13.5" cy="9" r="1.3" />
-          </svg>
-        </button>
-        ${this._showMoreMenu
-          ? html`
-              <div class="compose-dropdown compose-dropdown-right">
-                <button
-                  type="button"
-                  class="compose-dropdown-item"
-                  @click=${() => {
-                    this._submit("draft");
-                    this._showMoreMenu = false;
-                  }}
-                >
-                  ${this.labels.saveAsDraft}
-                </button>
-                <div class="compose-dropdown-divider"></div>
-                <button
-                  type="button"
-                  class="compose-dropdown-item compose-dropdown-item-danger"
-                  @click=${() => {
-                    this._showMoreMenu = false;
-                    this._discardAndClose();
-                  }}
-                >
-                  ${this.labels.discard}
-                </button>
-              </div>
-            `
-          : nothing}
-      </div>
-    `;
-  }
-
   private _renderCollectionSelector() {
     const collections = this.collections ?? [];
     const search = this._collectionSearch.toLowerCase();
@@ -1553,6 +2315,13 @@ export class JantComposeDialog extends LitElement {
       ? collections.filter((c) => c.title.toLowerCase().includes(search))
       : collections;
     const selectedCount = this._collectionIds.length;
+    const selectedLabel =
+      selectedCount > 0
+        ? this._selectedCollectionLabel(collections)
+        : this.labels.collection;
+    const emptyLabel = search
+      ? this.labels.noCollections
+      : this.labels.emptyCollections;
 
     return html`
       <div class="flex-1 min-w-0">
@@ -1569,133 +2338,145 @@ export class JantComposeDialog extends LitElement {
           <button
             type="button"
             class="compose-collection-trigger"
+            aria-haspopup="listbox"
+            aria-expanded=${this._showCollection ? "true" : "false"}
+            data-open=${this._showCollection ? "true" : nothing}
+            data-selected=${selectedCount > 0 ? "true" : nothing}
             @click=${() => {
+              this._showPublishPanel = false;
               this._showCollection = !this._showCollection;
               if (!this._showCollection) {
                 this._collectionSearch = "";
               }
             }}
           >
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 18 18"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.4"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="shrink-0 icon-fine"
-            >
-              <rect x="3" y="5" width="12" height="10" rx="2" />
-              <path d="M6 5V4a1 1 0 011-1h4a1 1 0 011 1v1" />
-            </svg>
-            ${selectedCount > 0
-              ? html`<span class="compose-collection-label"
-                  >${this._selectedCollectionLabel(collections)}</span
-                >`
-              : html`<span>${this.labels.collection}</span>`}
-            <svg
-              width="10"
-              height="10"
-              viewBox="0 0 10 10"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.4"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="shrink-0 opacity-50 icon-fine"
-            >
-              <path d="M3 4l2 2 2-2" />
-            </svg>
+            <span class="compose-collection-trigger-icon">
+              ${renderComposeCollectionPickerIcon(
+                COMPOSE_COLLECTION_PICKER_ICONS.collection,
+                "compose-collection-trigger-svg",
+              )}
+            </span>
+            <span class="compose-collection-label">${selectedLabel}</span>
+            ${renderComposeCollectionPickerIcon(
+              COMPOSE_COLLECTION_PICKER_ICONS.chevron,
+              "compose-collection-chevron",
+            )}
           </button>
           <div
+            class="compose-collection-popover"
             data-popover
-            data-side="top"
+            data-side="bottom"
             aria-hidden=${this._showCollection ? "false" : "true"}
           >
             ${collections.length > 0
-              ? html`<header>
-                  <svg
-                    width="16"
-                    height="16"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  >
-                    <circle cx="11" cy="11" r="8" />
-                    <path d="m21 21-4.3-4.3" />
-                  </svg>
-                  <input
-                    type="text"
-                    role="combobox"
-                    placeholder=${this.labels.searchCollections}
-                    autocomplete="off"
-                    autocorrect="off"
-                    spellcheck="false"
-                    .value=${this._collectionSearch}
-                    @input=${(e: Event) => {
-                      this._collectionSearch = (
-                        e.target as HTMLInputElement
-                      ).value;
-                    }}
-                  />
-                </header>`
+              ? html`<div class="compose-collection-popover-header">
+                  <label class="compose-collection-search-shell">
+                    ${renderComposeCollectionPickerIcon(
+                      COMPOSE_COLLECTION_PICKER_ICONS.search,
+                      "compose-collection-search-icon",
+                    )}
+                    <input
+                      type="text"
+                      role="combobox"
+                      class="compose-collection-search-input"
+                      placeholder=${this.labels.searchCollections}
+                      autocomplete="off"
+                      autocorrect="off"
+                      spellcheck="false"
+                      .value=${this._collectionSearch}
+                      @input=${(e: Event) => {
+                        this._collectionSearch = (
+                          e.target as HTMLInputElement
+                        ).value;
+                      }}
+                    />
+                  </label>
+                </div>`
               : nothing}
             <div
               role="listbox"
+              class="compose-collection-options"
               aria-multiselectable="true"
-              data-empty=${filtered.length === 0
-                ? search
-                  ? this.labels.noCollections
-                  : this.labels.emptyCollections
-                : nothing}
             >
-              ${filtered.map(
-                (col) => html`
-                  <div
-                    role="option"
-                    data-value=${col.id}
-                    aria-selected=${this._collectionIds.includes(col.id)
-                      ? "true"
-                      : nothing}
-                    @click=${() => this._toggleCollection(col.id)}
-                  >
-                    ${col.iconHtml
-                      ? html`<span
-                          class="inline-flex items-center justify-center w-4 h-4 shrink-0"
-                          >${unsafeHTML(col.iconHtml)}</span
-                        >`
-                      : nothing}
-                    ${col.title}
-                  </div>
-                `,
-              )}
+              ${filtered.length > 0
+                ? filtered.map((col) => {
+                    const selected = this._collectionIds.includes(col.id);
+
+                    return html`
+                      <button
+                        type="button"
+                        class=${classMap({
+                          "compose-collection-option": true,
+                          "compose-collection-option-selected": selected,
+                        })}
+                        role="option"
+                        data-value=${col.id}
+                        aria-selected=${selected ? "true" : "false"}
+                        @click=${() => this._toggleCollection(col.id)}
+                      >
+                        <span class="compose-collection-option-label"
+                          >${col.title}</span
+                        >
+                        <span
+                          class=${classMap({
+                            "compose-collection-option-marker": true,
+                            "compose-collection-option-marker-selected":
+                              selected,
+                            "compose-collection-option-marker-add": !selected,
+                          })}
+                        >
+                          ${selected
+                            ? html`<svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="compose-collection-option-check-circle"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                aria-hidden="true"
+                              >
+                                <circle
+                                  cx="12"
+                                  cy="12"
+                                  r="10"
+                                  fill="currentColor"
+                                />
+                                <path
+                                  d="M8 12.5 10.7 15.2 16.4 9.5"
+                                  stroke="var(--site-page-bg)"
+                                  stroke-width="2.3"
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"
+                                />
+                              </svg>`
+                            : renderComposeCollectionPickerIcon(
+                                COMPOSE_COLLECTION_PICKER_ICONS.plusCircle,
+                                "compose-collection-option-plus-circle",
+                              )}
+                        </span>
+                      </button>
+                    `;
+                  })
+                : html`<div class="compose-collection-empty">
+                    ${emptyLabel}
+                  </div>`}
             </div>
-            <div
-              class="compose-collection-add-action"
-              @click=${() => {
-                this._showCollection = false;
-                this._collectionSearch = "";
-                this._addCollectionPanelOpen = true;
-              }}
-            >
-              <svg
-                width="14"
-                height="14"
-                viewBox="0 0 16 16"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
+            <div class="compose-collection-footer">
+              <button
+                type="button"
+                class="compose-collection-add-action"
+                @click=${() => {
+                  this._showCollection = false;
+                  this._collectionSearch = "";
+                  this._addCollectionPanelOpen = true;
+                }}
               >
-                <path d="M8 3v10M3 8h10" />
-              </svg>
-              ${this.labels.addCollection}
+                <span class="compose-collection-add-icon">
+                  ${renderComposeCollectionPickerIcon(
+                    COMPOSE_COLLECTION_PICKER_ICONS.plus,
+                    "compose-collection-add-svg",
+                  )}
+                </span>
+                ${this.labels.addCollection}
+              </button>
             </div>
           </div>
         </div>
@@ -1703,7 +2484,14 @@ export class JantComposeDialog extends LitElement {
     `;
   }
 
-  // ── Add Collection panel ────────────────────────────────────────
+  // ── Add Collection dialog ───────────────────────────────────────
+
+  private _closeAddCollectionPanel() {
+    this._addCollectionPanelOpen = false;
+    this.updateComplete.then(() => {
+      this.querySelector<HTMLElement>(".compose-collection-trigger")?.focus();
+    });
+  }
 
   private async _handleAddCollectionSubmit(e: Event) {
     const event = e as CustomEvent<CollectionSubmitDetail>;
@@ -1723,22 +2511,42 @@ export class JantComposeDialog extends LitElement {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(detail.data),
       });
-
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-
-      const created = await res.json();
+      const created = (await res.json().catch(() => null)) as {
+        id: string;
+        title: string;
+        error?: string;
+      } | null;
+
+      if (!res.ok) {
+        throw new Error(
+          created?.error || "Couldn't create collection. Try again.",
+        );
+      }
+      if (!created?.id || !created.title) {
+        throw new Error("Couldn't create collection. Try again.");
+      }
       const newCollection: ComposeCollection = {
         id: created.id,
         title: created.title,
-        iconHtml: renderCollectionIcon(created.icon, { size: 16 }),
       };
 
-      this.collections = [...this.collections, newCollection];
+      const refreshed = await this.refreshCollections();
+      if (
+        !refreshed ||
+        !this.collections.some((col) => col.id === created.id)
+      ) {
+        this.collections = [...this.collections, newCollection];
+      }
       this._collectionIds = [...this._collectionIds, created.id];
-      this._addCollectionPanelOpen = false;
-      showToast(this.labels.collectionFormLabels.submitLabel);
-    } catch {
-      showToast("Failed to create collection. Try again.", "error");
+      this._closeAddCollectionPanel();
+      showToast(this.labels.collectionFormLabels.createdLabel);
+    } catch (error) {
+      showToast(
+        error instanceof Error
+          ? error.message
+          : "Couldn't create collection. Try again.",
+        "error",
+      );
     } finally {
       if (formEl) formEl.loading = false;
     }
@@ -1746,7 +2554,7 @@ export class JantComposeDialog extends LitElement {
 
   private _submitAddCollectionForm() {
     const form = this.querySelector<HTMLFormElement>(
-      ".compose-add-collection-panel form",
+      "[data-collection-quick-dialog] form",
     );
     if (form) form.requestSubmit();
   }
@@ -1763,37 +2571,55 @@ export class JantComposeDialog extends LitElement {
     };
 
     return html`
-      <div class="compose-add-collection-panel">
-        <div class="compose-alt-header">
-          <button
-            type="button"
-            class="compose-attached-cancel"
-            @click=${() => {
-              this._addCollectionPanelOpen = false;
-            }}
-          >
-            ${this.labels.cancel}
-          </button>
-          <span class="compose-alt-title">${this.labels.addCollection}</span>
+      <div
+        class="collection-quick-dialog-backdrop"
+        @click=${() => this._closeAddCollectionPanel()}
+      ></div>
+      <div
+        class="collection-quick-dialog"
+        data-collection-quick-dialog
+        role="dialog"
+        aria-modal="true"
+        aria-label=${this.labels.addCollection}
+        @click=${(event: Event) => event.stopPropagation()}
+      >
+        <div class="collection-quick-dialog-header">
+          <div class="collection-quick-dialog-title-block">
+            <h2 class="collection-quick-dialog-title">
+              ${this.labels.addCollection}
+            </h2>
+            <p class="collection-quick-dialog-note">
+              ${this.labels.collectionFormLabels.quickHint}
+            </p>
+          </div>
           <button
             type="button"
-            class="compose-post-btn ml-auto"
-            @click=${() => this._submitAddCollectionForm()}
+            class="collection-quick-dialog-cancel"
+            @click=${() => this._closeAddCollectionPanel()}
           >
-            ${this.labels.done}
+            ${this.labels.collectionFormLabels.cancelLabel}
           </button>
         </div>
-        <div class="flex-1 overflow-y-auto">
+        <div class="collection-quick-dialog-body">
           <jant-collection-form
-            class="compose-add-collection-form"
+            variant="quick"
             .labels=${this.labels.collectionFormLabels}
             .initial=${initial}
-            action="/api/collections"
+            action=${publicPath("/api/collections")}
             cancel-href="javascript:void(0)"
             @jant:collection-submit=${(e: Event) =>
               this._handleAddCollectionSubmit(e)}
           ></jant-collection-form>
         </div>
+        <div class="collection-quick-dialog-footer">
+          <button
+            type="button"
+            class="compose-post-btn collection-quick-dialog-submit"
+            @click=${() => this._submitAddCollectionForm()}
+          >
+            ${this.labels.collectionFormLabels.quickSubmitLabel}
+          </button>
+        </div>
       </div>
     `;
   }
@@ -1821,7 +2647,11 @@ export class JantComposeDialog extends LitElement {
           </button>
         </div>
         <div class="flex-1 p-4 overflow-hidden flex flex-col">
-          <div class="compose-attached-tiptap compose-tiptap-body"></div>
+          <div
+            class="compose-attached-tiptap compose-tiptap-body"
+            @mousedown=${(event: MouseEvent) =>
+              this._handleAttachedEditorMouseDown(event)}
+          ></div>
         </div>
       </div>
     `;
@@ -1905,18 +2735,26 @@ export class JantComposeDialog extends LitElement {
     if (!this._confirmPanelOpen) return nothing;
 
     const isEdit = !!this._editPostId;
-    const title = isEdit
-      ? this.labels.confirmEditTitle
-      : this.labels.confirmCloseTitle;
-    const subtitle = isEdit
-      ? this.labels.confirmEditSubtitle
-      : this.labels.confirmCloseSubtitle;
-    const saveLabel = isEdit
-      ? this.labels.confirmEditPublish
-      : this.labels.confirmCloseSave;
-    const discardLabel = isEdit
-      ? this.labels.confirmEditDiscard
-      : this.labels.confirmCloseDiscard;
+    const title = this._confirmForAttachedText
+      ? this.labels.confirmAttachedTitle
+      : isEdit
+        ? this.labels.confirmEditTitle
+        : this.labels.confirmCloseTitle;
+    const subtitle = this._confirmForAttachedText
+      ? this.labels.confirmAttachedSubtitle
+      : isEdit
+        ? this.labels.confirmEditSubtitle
+        : this.labels.confirmCloseSubtitle;
+    const saveLabel = this._confirmForAttachedText
+      ? this.labels.confirmAttachedSave
+      : isEdit
+        ? this.labels.confirmEditPublish
+        : this.labels.confirmCloseSave;
+    const discardLabel = this._confirmForAttachedText
+      ? this.labels.confirmAttachedDiscard
+      : isEdit
+        ? this.labels.confirmEditDiscard
+        : this.labels.confirmCloseDiscard;
 
     return html`
       <div class="compose-confirm-panel">
@@ -1954,14 +2792,347 @@ export class JantComposeDialog extends LitElement {
   private _getSubmitLabel(): string {
     if (this._editPostId) return this.labels.update;
     if (this._replyToId) return this.labels.reply;
+    if (this._visibility === "latest_hidden") {
+      return this.labels.postHiddenFromLatest;
+    }
+    if (this._visibility === "private") return this.labels.postPrivately;
     return this.labels.post;
   }
 
-  private _submitWithVisibility(visibility: ComposeVisibility) {
+  private _getSlugSyncValidationMessage(): string | null {
+    const issue = getSlugValidationIssue(this._slug);
+    if (issue === "invalid") return this.labels.publishSlugInvalid;
+    if (issue === "reserved") return this.labels.publishSlugReserved;
+    return null;
+  }
+
+  private _getSlugValidationMessage(): string | null {
+    const syncMessage = this._getSlugSyncValidationMessage();
+    if (syncMessage) return syncMessage;
+    if (this._hasManualSlug() && this._slugTaken) {
+      return this.labels.publishSlugTaken;
+    }
+    return null;
+  }
+
+  private _getSlugPreviewUrl(): string | null {
+    if (!this._hasManualSlug() || this._getSlugValidationMessage()) {
+      return null;
+    }
+
+    const path = publicPath(`/${this._slug.trim()}`);
+    const origin =
+      globalThis.location?.origin && globalThis.location.origin !== "null"
+        ? globalThis.location.origin
+        : "http://localhost";
+    return new URL(path, `${origin}/`).toString();
+  }
+
+  private _getSlugPreviewParts(): {
+    full: string;
+    origin: string;
+    path: string;
+  } | null {
+    const previewUrl = this._getSlugPreviewUrl();
+    if (!previewUrl) return null;
+
+    const url = new URL(previewUrl);
+    return {
+      full: previewUrl,
+      origin: url.origin,
+      path: `${url.pathname}${url.search}${url.hash}`,
+    };
+  }
+
+  private _getSlugStatusMessage(): string | null {
+    if (this._hasManualSlug()) {
+      if (this._getSlugValidationMessage()) {
+        return this._getSlugValidationMessage();
+      }
+      return null;
+    }
+
+    if (this._suggestedSlugLoading) {
+      return this.labels.publishSlugGenerating;
+    }
+
+    return null;
+  }
+
+  private _revealSlugField() {
+    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();
+    });
+  }
+
+  private _canPublish(): boolean {
+    if (this._loading) return false;
+    const editor = this._editor;
+    if (!editor) return false;
+    if (this._getSlugValidationMessage()) return false;
+    if (editor.getUrlValidationMessage()) return false;
+    if (editor.getLinkTitleValidationMessage()) return false;
+
+    const data = editor.getData();
+    if (this._format === "link") {
+      return data.url.trim().length > 0;
+    }
+    if (this._format === "quote") {
+      return data.quoteText.trim().length > 0;
+    }
+    return this._hasContent();
+  }
+
+  private _togglePublishPanel() {
+    this._showCollection = false;
+    this._collectionSearch = "";
+    const nextOpen = !this._showPublishPanel;
+    this._showPublishPanel = nextOpen;
+    if (nextOpen) {
+      this._scheduleSuggestedSlugRefresh(true);
+    }
+  }
+
+  private _setVisibility(visibility: ComposeVisibility) {
+    if (this._visibilityLocked) return;
     this._visibility = visibility;
-    this._showVisibilityMenu = false;
-    // Wait for state to update before submitting
-    this.updateComplete.then(() => this._submit("published"));
+    if (!this._editPostId && !this._draftSourceId && !this._replyToId) {
+      JantComposeDialog._lastNewPostVisibility = visibility;
+    }
+    this._showPublishPanel = false;
+  }
+
+  private _onSlugInput(e: Event) {
+    const value = (e.target as HTMLInputElement).value;
+    this._slug = value.toLowerCase();
+    this._slugTaken = false;
+    this._slugCheckLoading = false;
+    if (this._hasManualSlug()) {
+      this._scheduleSlugAvailabilityCheck();
+      return;
+    }
+    this._scheduleSuggestedSlugRefresh();
+  }
+
+  private _renderVisibilityIcon(
+    visibility: ComposeVisibility,
+    variant: "menu" | "toggle" = "menu",
+  ) {
+    const iconClasses = classMap({
+      "compose-publish-visibility-icon": true,
+      "compose-publish-visibility-icon-toggle": variant === "toggle",
+      "compose-publish-visibility-icon-public": visibility === "public",
+      "compose-publish-visibility-icon-latest_hidden":
+        visibility === "latest_hidden",
+      "compose-publish-visibility-icon-private": visibility === "private",
+    });
+    return renderComposePublishVisibilityIcon(
+      COMPOSE_PUBLISH_VISIBILITY_ICONS[visibility],
+      iconClasses,
+    );
+  }
+
+  private _renderPublishVisibilityOption(
+    visibility: ComposeVisibility,
+    label: string,
+    hint: string,
+  ) {
+    const selected = this._visibility === visibility;
+
+    return html`
+      <button
+        type="button"
+        class=${classMap({
+          "compose-publish-option": true,
+          "compose-publish-option-selected": selected,
+        })}
+        role="radio"
+        aria-checked=${selected ? "true" : "false"}
+        ?disabled=${this._visibilityLocked}
+        @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}
+      </button>
+    `;
+  }
+
+  private _renderPublishSlugSection() {
+    const slugError = this._getSlugValidationMessage();
+    const slugStatus = this._getSlugStatusMessage();
+    const slugPreview = this._getSlugPreviewParts();
+    const showSuggestion =
+      !this._hasManualSlug() &&
+      !this._suggestedSlugLoading &&
+      Boolean(this._suggestedSlug);
+
+    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.publishSlugLabel}
+            </p>
+            <p class="compose-publish-section-hint">
+              ${this.labels.publishSlugHint}
+            </p>
+          </div>
+          ${this._hasManualSlug()
+            ? html`
+                <button
+                  type="button"
+                  class="compose-publish-section-action"
+                  @click=${() => this._resetCustomSlug()}
+                >
+                  ${this.labels.publishSlugReset}
+                </button>
+              `
+            : nothing}
+        </div>
+        <div class="compose-publish-slug-field">
+          <div class="compose-publish-slug-input-wrap">
+            <span class="compose-publish-slug-prefix">/</span>
+            <input
+              type="text"
+              class="compose-input compose-publish-slug-input"
+              .value=${this._slug}
+              placeholder=${this.labels.publishSlugPlaceholder}
+              aria-invalid=${slugError ? "true" : "false"}
+              spellcheck="false"
+              autocapitalize="off"
+              autocomplete="off"
+              @input=${(e: Event) => this._onSlugInput(e)}
+            />
+          </div>
+          ${showSuggestion
+            ? html`
+                <button
+                  type="button"
+                  class="compose-slug-suggestion"
+                  @click=${() => this._useSuggestedSlug()}
+                >
+                  <span class="compose-slug-suggestion-copy">
+                    <span class="compose-slug-suggestion-label"
+                      >${this.labels.publishSlugSuggested}</span
+                    >
+                    <span class="compose-slug-suggestion-chip">
+                      <span class="compose-slug-suggestion-value"
+                        >/${this._suggestedSlug}</span
+                      >
+                    </span>
+                  </span>
+                  <span class="compose-slug-suggestion-icon" aria-hidden="true">
+                    <svg
+                      width="14"
+                      height="14"
+                      viewBox="0 0 14 14"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="1.4"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <path d="M3 7h8" />
+                      <path d="m8 3 4 4-4 4" />
+                    </svg>
+                  </span>
+                </button>
+              `
+            : nothing}
+          ${slugStatus
+            ? html`<p
+                class=${classMap({
+                  "compose-publish-slug-status": true,
+                  "compose-publish-slug-status-error": Boolean(slugError),
+                })}
+                data-compose-slug-error=${slugError ? "true" : nothing}
+              >
+                ${slugStatus}
+              </p>`
+            : nothing}
+          ${slugPreview
+            ? html`<p
+                class="compose-publish-slug-preview"
+                data-compose-slug-preview
+                title=${slugPreview.full}
+              >
+                <span class="compose-publish-slug-preview-origin"
+                  >${slugPreview.origin}</span
+                ><span class="compose-publish-slug-preview-path"
+                  >${slugPreview.path}</span
+                >
+              </p>`
+            : nothing}
+        </div>
+      </section>
+    `;
+  }
+
+  private _renderPublishPanel() {
+    if (!this._showPublishPanel) return nothing;
+
+    return html`
+      <div
+        class="compose-publish-panel"
+        role="dialog"
+        aria-label=${this.labels.publishSettings}
+        data-compose-publish-panel
+      >
+        ${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()}
+      </div>
+    `;
   }
 
   private _renderPublishButton() {
@@ -1978,143 +3149,56 @@ export class JantComposeDialog extends LitElement {
     >
       <path d="M21 12a9 9 0 1 1-6.219-8.56" />
     </svg>`;
-
-    // In edit mode or reply mode, show a simple button (no visibility split)
-    if (this._editPostId || this._replyToId) {
-      return html`
-        <button
-          type="button"
-          class="compose-post-btn"
-          ?disabled=${this._loading}
-          @click=${() => this._submit("published")}
-        >
-          ${this._loading ? spinner : nothing} ${this._getSubmitLabel()}
-        </button>
-      `;
-    }
+    const canPublish = this._canPublish();
 
     return html`
       <div class="compose-publish-group">
-        ${this._showVisibilityMenu
+        ${this._showPublishPanel
           ? html`<div
               class="compose-dropdown-backdrop"
               @click=${() => {
-                this._showVisibilityMenu = false;
+                this._showPublishPanel = false;
               }}
             ></div>`
           : nothing}
-        <button
-          type="button"
-          class="compose-publish-main"
-          ?disabled=${this._loading}
-          @click=${() => this._submit("published")}
-        >
-          ${this._loading ? spinner : nothing} ${this._getSubmitLabel()}
-        </button>
-        <button
-          type="button"
-          class="compose-publish-toggle"
-          ?disabled=${this._loading}
-          aria-haspopup="menu"
-          aria-expanded=${this._showVisibilityMenu}
-          @click=${() => {
-            this._showVisibilityMenu = !this._showVisibilityMenu;
-          }}
+        <div
+          role="group"
+          class=${classMap({
+            "compose-publish-buttons": true,
+            "compose-publish-buttons-inactive": !canPublish && !this._loading,
+          })}
         >
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+          <button
+            type="button"
+            class=${classMap({
+              "compose-publish-main": true,
+              "compose-publish-main-loading": this._loading,
+            })}
+            ?disabled=${!canPublish}
+            @click=${() => this._submit("published")}
           >
-            <path d="m6 9 6 6 6-6" />
-          </svg>
-        </button>
-        ${this._showVisibilityMenu
-          ? html`
-              <div class="compose-dropdown" role="menu">
-                <button
-                  type="button"
-                  class="compose-dropdown-item"
-                  role="menuitem"
-                  @click=${() => {
-                    this._featured = true;
-                    this._showVisibilityMenu = false;
-                    this.updateComplete.then(() => this._submit("published"));
-                  }}
-                >
-                  <svg
-                    width="16"
-                    height="16"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  >
-                    <path
-                      d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
-                    />
-                  </svg>
-                  ${this.labels.publishFeatured}
-                </button>
-                <button
-                  type="button"
-                  class="compose-dropdown-item"
-                  role="menuitem"
-                  @click=${() => this._submitWithVisibility("unlisted")}
-                >
-                  <svg
-                    width="16"
-                    height="16"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  >
-                    <path d="M9 17H7A5 5 0 0 1 7 7h2" />
-                    <path d="M15 7h2a5 5 0 1 1 0 10h-2" />
-                    <line x1="8" x2="16" y1="12" y2="12" />
-                  </svg>
-                  ${this.labels.publishUnlisted}
-                </button>
-                <button
-                  type="button"
-                  class="compose-dropdown-item"
-                  role="menuitem"
-                  @click=${() => this._submitWithVisibility("private")}
-                >
-                  <svg
-                    width="16"
-                    height="16"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  >
-                    <path
-                      d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"
-                    />
-                    <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
-                    <path
-                      d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"
-                    />
-                    <path d="m2 2 20 20" />
-                  </svg>
-                  ${this.labels.publishPrivate}
-                </button>
-              </div>
-            `
-          : nothing}
+            ${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._renderPublishPanel()}
       </div>
     `;
   }
@@ -2132,7 +3216,10 @@ export class JantComposeDialog extends LitElement {
         class=${classMap({
           "compose-dialog-inner": true,
           "compose-dialog-inner-page": this.pageMode,
+          "compose-dialog-inner-suspended": this._addCollectionPanelOpen,
         })}
+        aria-hidden=${this._addCollectionPanelOpen ? "true" : "false"}
+        ?inert=${this._addCollectionPanelOpen}
       >
         ${this._renderHeader()}
         ${isReply