@jant/core 0.6.15 → 0.7.0

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

@@ -9,6 +9,7 @@
  */
 
 import { LitElement, html, nothing } from "lit";
+import type { TemplateResult } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
@@ -26,6 +27,7 @@ import type {
   ComposeFormat,
   ComposeLabels,
   ComposeAttachment,
+  ComposeRowStatus,
   AttachedTextItem,
   ComposeEditorSelection,
   ComposeFullscreenOpenDetail,
@@ -35,11 +37,7 @@ import {
   promoteLeadingH1Title as getLeadingH1TitlePromotion,
   type LeadingH1TitlePromotion,
 } from "./compose-title-from-heading.js";
-import {
-  UPLOAD_ACCEPT,
-  getMediaCategory,
-  validateUploadFile,
-} from "../../lib/upload.js";
+import { getMediaCategory, validateUploadFile } from "../../lib/upload.js";
 import type { MediaCategory } from "../../lib/upload.js";
 import {
   DECORATIVE_QUOTE_MARK_SVG_CONTENT,
@@ -69,6 +67,13 @@ interface ComposeFilePickerCloseDetail {
   cancelled: boolean;
 }
 
+/**
+ * Which control a reordered attachment hands focus back to. The strip renders
+ * positionally, so without this the focused DOM slot silently retargets a
+ * different attachment after every move.
+ */
+type AttachmentFocusTarget = "handle" | "move";
+
 const COMPOSE_TOOLBAR_ICONS = {
   media: `
     <rect x="2.75" y="3" width="12.5" height="11.25" rx="3" />
@@ -97,43 +102,44 @@ const COMPOSE_TOOLBAR_ICONS = {
     />
     <path
       d="m9 1.95 2.08 4.21 4.65.67-3.36 3.29.8 4.63L9 12.55l-4.17 2.2.8-4.63-3.36-3.29 4.65-.67z"
-      stroke-width="1.6"
     />
   `,
+  /* The one filled glyph in the row, so its bars are cut to the weight the
+     stroked icons read at — a 2.05 bar beside a 1.42 stroke looks bold. */
   title: `
     <rect
       x="3.35"
-      y="3.2"
+      y="3.37"
       width="11.3"
-      height="2.05"
-      rx="0.68"
+      height="1.72"
+      rx="0.6"
       fill="currentColor"
       stroke="none"
     />
     <rect
-      x="7.8"
+      x="7.99"
       y="4.6"
-      width="2.4"
+      width="2.02"
       height="9.45"
-      rx="0.78"
+      rx="0.68"
       fill="currentColor"
       stroke="none"
     />
     <rect
       x="6.75"
-      y="13.15"
+      y="13.32"
       width="4.5"
-      height="1.12"
-      rx="0.56"
+      height="0.95"
+      rx="0.48"
       fill="currentColor"
       stroke="none"
     />
   `,
   fullscreen: `
-    <path d="M5.85 3H3v2.85" stroke-width="1.48" />
-    <path d="M12.15 3H15v2.85" stroke-width="1.48" />
-    <path d="M3 12.15V15h2.85" stroke-width="1.48" />
-    <path d="M15 12.15V15h-2.85" stroke-width="1.48" />
+    <path d="M5.85 3H3v2.85" />
+    <path d="M12.15 3H15v2.85" />
+    <path d="M3 12.15V15h2.85" />
+    <path d="M15 12.15V15h-2.85" />
   `,
 } as const;
 
@@ -147,7 +153,6 @@ function renderComposeToolbarIcon(
     viewBox="0 0 18 18"
     fill="none"
     stroke="currentColor"
-    stroke-width="1.55"
     stroke-linecap="round"
     stroke-linejoin="round"
     aria-hidden="true"
@@ -189,6 +194,10 @@ export class JantComposeEditor extends LitElement {
     threadItem: { type: Boolean, attribute: "thread-item" },
     removable: { type: Boolean },
     inlineFormat: { type: Boolean, attribute: "inline-format" },
+    titleByDefault: { type: Boolean, attribute: "title-by-default" },
+    positionLabel: { type: String, attribute: "position-label" },
+    badgeLabel: { type: String, attribute: "badge-label" },
+    headerExtra: { attribute: false },
     slashCommandDiscovered: { type: Boolean },
     _title: { state: true },
     _bodyJson: { state: true },
@@ -215,6 +224,29 @@ export class JantComposeEditor extends LitElement {
   declare threadItem: boolean;
   declare removable: boolean;
   declare inlineFormat: boolean;
+  /**
+   * Whether a note's title field starts visible. A post that opens a thread is
+   * usually the one worth naming, so it defaults on there; a reply or a
+   * continuation post carries the thread's title already, so it defaults off.
+   * On a new single post the owner narrows it further with the author's own
+   * remembered answer. Either way the `T` tool overrides it, and a post that
+   * arrives with a title always shows the field.
+   */
+  declare titleByDefault: boolean;
+  /**
+   * "1/3"-style position marker shown before the format selector. Empty for a
+   * single post, where there is no "which one" to answer.
+   */
+  declare positionLabel: string;
+  /** Status marker for the header row, e.g. "Editing". Mutually exclusive with
+   * `positionLabel` in practice — a thread post is never an edit. */
+  declare badgeLabel: string;
+  /**
+   * Owner-supplied content for the right side of the format header — the
+   * dialog's per-post date/permalink control. Passed in rather than built here
+   * because publish metadata belongs to the dialog, not to the editor.
+   */
+  declare headerExtra: unknown;
   declare slashCommandDiscovered: boolean;
   declare _title: string;
   declare _bodyJson: JSONContent | null;
@@ -243,7 +275,6 @@ export class JantComposeEditor extends LitElement {
   private _emojiContainer: HTMLElement | null = null;
   private readonly _urlStatusId = `compose-url-status-${randomUUID()}`;
   private _onDocClickBound = this._onDocumentClick.bind(this);
-  private _scrollBufferApplied = false;
   private _filePickerCleanup: (() => void) | null = null;
   private _suppressAttachedTextOpenUntil = 0;
   /**
@@ -254,12 +285,24 @@ export class JantComposeEditor extends LitElement {
    * to run this cycle.
    */
   private _suppressContentChangedOnce = false;
+  /**
+   * Set when the title toggle arrives with the post rather than from the
+   * owner's default — a handed-over editor keeps the answer it was given
+   * instead of having the first update reseed it from `titleByDefault`.
+   */
+  #showTitleHandedOver = false;
   #inlineImageUploadGeneration = 0;
   #inlineImageUploadPromises = new Set<Promise<void>>();
   #rehostFailureCount = 0;
   #rehostFailureNoticeTimer: ReturnType<typeof setTimeout> | undefined;
   #sortable: { destroy(): void } | null = null;
   #revertNextSibling: globalThis.Node | null = null;
+  #focusAfterMove: {
+    clientId: string;
+    direction: -1 | 1;
+    focusTarget: AttachmentFocusTarget;
+  } | null = null;
+  #coarsePointerQuery: globalThis.MediaQueryList | null | undefined;
 
   createRenderRoot() {
     return this;
@@ -273,6 +316,10 @@ export class JantComposeEditor extends LitElement {
     this.threadItem = false;
     this.removable = false;
     this.inlineFormat = false;
+    this.titleByDefault = true;
+    this.positionLabel = "";
+    this.badgeLabel = "";
+    this.headerExtra = null;
     this.slashCommandDiscovered = false;
     this._title = "";
     this._bodyJson = null;
@@ -280,7 +327,7 @@ export class JantComposeEditor extends LitElement {
     this._quoteText = "";
     this._quoteAuthor = "";
     this._rating = 0;
-    this._showTitle = false;
+    this._showTitle = true;
     this._showRating = false;
     this._attachedTexts = [];
     this._attachments = [];
@@ -307,6 +354,10 @@ export class JantComposeEditor extends LitElement {
     this.addEventListener("dragover", this._onDragOver, true);
     this.addEventListener("dragleave", this._onDragLeave);
     this.addEventListener("drop", this._onDrop);
+    this.#coarsePointer()?.addEventListener(
+      "change",
+      this._onPointerTypeChange,
+    );
   }
 
   disconnectedCallback() {
@@ -331,6 +382,10 @@ export class JantComposeEditor extends LitElement {
     this._emojiPickerEl = null;
     this._filePickerCleanup?.();
     this._filePickerCleanup = null;
+    this.#coarsePointer()?.removeEventListener(
+      "change",
+      this._onPointerTypeChange,
+    );
   }
 
   // Tracks dragenter/dragleave nesting so the highlight only clears when the
@@ -778,9 +833,90 @@ export class JantComposeEditor extends LitElement {
     }
   }
 
+  /**
+   * What this row contributes to the composer's submit state.
+   *
+   * The editor owns these fields, so it owns the answer: the dialog reduces
+   * `getStatus()` over the rows it has rather than reading editors back out of
+   * the DOM, which during a render still holds the row it is about to remove.
+   *
+   * @returns Whether the row holds anything worth keeping, and whether it is
+   *   complete enough to publish
+   * @example
+   * editor.getStatus(); // { hasContent: true, publishable: false } — link, no URL yet
+   */
+  getStatus(): ComposeRowStatus {
+    const data = this.getData();
+    const hasContent =
+      !!data.body ||
+      !!data.title.trim() ||
+      !!data.url.trim() ||
+      !!data.quoteText.trim() ||
+      !!data.quoteAuthor.trim() ||
+      data.rating > 0 ||
+      data.attachments.length > 0 ||
+      data.attachedTexts.length > 0;
+    const fieldsValid =
+      !this.getUrlValidationMessage() && !this.getLinkTitleValidationMessage();
+
+    let publishable: boolean;
+    switch (this.format) {
+      // A link is its URL and title, both of which the validators already
+      // require — nothing else has to be filled in.
+      case "link":
+        publishable = fieldsValid;
+        break;
+      case "quote":
+        publishable = fieldsValid && !!data.quoteText.trim();
+        break;
+      default:
+        publishable = fieldsValid && hasContent;
+    }
+
+    return { hasContent, publishable };
+  }
+
+  #lastStatus: ComposeRowStatus | null = null;
+
+  /** Tell the owner when — and only when — this row's answer changes. */
+  #notifyStatus() {
+    const status = this.getStatus();
+    if (
+      this.#lastStatus?.hasContent === status.hasContent &&
+      this.#lastStatus?.publishable === status.publishable
+    ) {
+      return;
+    }
+    this.#lastStatus = status;
+    this.dispatchEvent(
+      new CustomEvent<ComposeRowStatus>("jant:compose-status", {
+        bubbles: true,
+        detail: status,
+      }),
+    );
+  }
+
+  /**
+   * Set the title toggle's default and apply it now.
+   *
+   * `titleByDefault` alone only takes effect on the first update or on
+   * `reset()`, and an owner that resets before Lit re-renders would seed from
+   * the previous session's value. An owner that knows the default up front
+   * calls this instead.
+   *
+   * @param show - Whether a note's title field starts visible
+   * @example
+   * editor.setTitleDefault(false); // next new note opens without a title field
+   */
+  setTitleDefault(show: boolean) {
+    this.titleByDefault = show;
+    this._showTitle = show;
+  }
+
   reset() {
     this.#clearPendingInlineImageUploads();
     this._title = "";
+    this._showTitle = this.titleByDefault;
     this._bodyJson = null;
     this._editor?.commands.clearContent();
     this._lastEditorSelection = null;
@@ -788,7 +924,6 @@ export class JantComposeEditor extends LitElement {
     this._quoteText = "";
     this._quoteAuthor = "";
     this._rating = 0;
-    this._showTitle = false;
     this._showRating = false;
     this._attachedTexts = [];
     // Revoke preview URLs before clearing
@@ -811,9 +946,12 @@ export class JantComposeEditor extends LitElement {
     status: ComposeAttachment["status"],
     mediaId: string | null,
     error: string | null,
+    remoteUrl?: string | null,
   ) {
     this._attachments = this._attachments.map((a) =>
-      a.clientId === clientId ? { ...a, status, mediaId, error } : a,
+      a.clientId === clientId
+        ? { ...a, status, mediaId, error, remoteUrl: remoteUrl ?? a.remoteUrl }
+        : a,
     );
   }
 
@@ -911,20 +1049,6 @@ export class JantComposeEditor extends LitElement {
     return this._title.trim() ? null : this.labels.linkTitleRequired;
   }
 
-  private _getInlineUrlValidationMessage(): string | null {
-    if (this.format === "link" && !this._url.trim()) {
-      return null;
-    }
-    return this.getUrlValidationMessage();
-  }
-
-  private _getInlineLinkTitleValidationMessage(): string | null {
-    if (this.format !== "link" || !this._title.trim()) {
-      return null;
-    }
-    return this.getLinkTitleValidationMessage();
-  }
-
   revealUrlValidation(): string | null {
     this._showUrlValidation = true;
     return this.getUrlValidationMessage();
@@ -978,7 +1102,6 @@ export class JantComposeEditor extends LitElement {
       toolbarMode: "compose",
       onUpdate: (json) => {
         this._bodyJson = json;
-        this._ensureScrollBuffer();
         this.promoteLeadingH1Title();
         hideSlashCommandHint(this);
       },
@@ -1009,36 +1132,12 @@ export class JantComposeEditor extends LitElement {
       tableControlLabels: this.labels.tableControls,
     });
     this._lastEditorSelection = this._readEditorSelection();
-
-    // Lock editor min-height once so new lines fill existing space
-    // instead of growing the dialog line-by-line.
-    // Skip in page mode where the editor grows freely with the page.
-    this._scrollBufferApplied = false;
-    const dom = this._editor.view.dom as HTMLElement;
-    const isPageMode = !!this.closest(".compose-page-shell");
-    if (!isPageMode) {
-      const last = dom.lastElementChild as HTMLElement | null;
-      const contentH = last ? last.offsetTop + last.offsetHeight : 0;
-      const buffer = this.format !== "note" ? 60 : 120;
-      dom.style.minHeight = `${contentH + buffer}px`;
-    }
-  }
-
-  /**
-   * One-time: adds bottom padding for scroll buffer once the
-   * compose-body starts scrolling. Since the dialog is already at
-   * max-height by that point, the extra padding doesn't grow it.
-   */
-  private _ensureScrollBuffer() {
-    if (this._scrollBufferApplied) return;
-    const dom = this._editor?.view?.dom as HTMLElement | undefined;
-    if (!dom) return;
-    const body = this.querySelector(".compose-body") as HTMLElement | null;
-    if (!body) return;
-    if (body.scrollHeight > body.clientHeight + 20) {
-      dom.style.paddingBottom = "40px";
-      this._scrollBufferApplied = true;
-    }
+    // An editor built from existing content — after a format switch, or on a
+    // replacement element that took over a post — inherits the uploads still
+    // working on that content. Without this the `blob:` placeholder is left
+    // with nothing watching it: the finished upload has no editor to write
+    // into, and publishing puts the blob URL in the post.
+    this.adoptPendingUploads();
   }
 
   private _destroyEditor() {
@@ -1061,6 +1160,17 @@ export class JantComposeEditor extends LitElement {
     "_attachmentOrder",
   ]);
 
+  protected willUpdate(changed: Map<string, unknown>) {
+    super.willUpdate(changed);
+
+    // `titleByDefault` is an owner-supplied prop, so it is only known once the
+    // first update runs. Seed the toggle from it there and leave it alone after
+    // that — from then on the value belongs to the user (and to `reset()`).
+    if (!this.hasUpdated && !this.#showTitleHandedOver) {
+      this._showTitle = this.titleByDefault;
+    }
+  }
+
   protected updated(changed: Map<string, unknown>) {
     super.updated(changed);
 
@@ -1096,8 +1206,14 @@ export class JantComposeEditor extends LitElement {
         this.#sortable?.destroy();
         this.#sortable = null;
       }
+      this.#restoreAttachmentFocus();
     }
 
+    // Every field that can change this row's answer is reactive, so `updated()`
+    // is where the owner hears about it — including the ones a user edit never
+    // touches, like an upload finishing.
+    this.#notifyStatus();
+
     // Notify parent dialog of content changes for draft auto-save. A format
     // conversion writes content fields too, but it's not a user edit, so skip
     // the notification once when asked.
@@ -1158,6 +1274,63 @@ export class JantComposeEditor extends LitElement {
     this._bodyJson = fields.bodyJson;
   }
 
+  /**
+   * Take over everything another editor holds for its post.
+   *
+   * Entering or leaving thread mode renders a different editor element for the
+   * same post, and the element being replaced has the only copy of what was
+   * written. Every field that belongs to the post moves here, in this one
+   * place: a caller picking fields out by hand drops whichever one it forgets,
+   * which is how a quote's source link used to vanish on "Add to thread".
+   * Fields hidden by the current format move too, so switching back still
+   * finds them.
+   *
+   * Safe before or after this editor's first render, and on a `previous` that
+   * has already left the DOM — its TipTap instance is gone by then, but
+   * `_bodyJson` tracks every edit.
+   *
+   * @param previous - The editor this one replaces
+   * @example
+   * await dialog.updateComplete;
+   * threadRootEditor.takeOver(singlePostEditor);
+   */
+  takeOver(previous: JantComposeEditor) {
+    this._title = previous._title;
+    this._showTitle = previous._showTitle;
+    this.#showTitleHandedOver = true;
+    this._bodyJson = previous._editor?.getJSON() ?? previous._bodyJson;
+    this._url = previous._url;
+    this._quoteText = previous._quoteText;
+    this._quoteAuthor = previous._quoteAuthor;
+    this._rating = previous._rating;
+    this._showRating = previous._showRating;
+    this._attachedTexts = [...previous._attachedTexts];
+    this._attachments = [...previous._attachments];
+    this._attachmentOrder = [...previous._attachmentOrder];
+    this._lastEditorSelection = previous.getEditorSelection();
+    // Before the first render there is no TipTap instance yet; `_initEditor`
+    // builds it from `_bodyJson` and adopts the uploads then.
+    if (this._editor) {
+      this._editor.commands.setContent(
+        this._bodyJson ?? { type: "doc", content: [{ type: "paragraph" }] },
+      );
+      this.adoptPendingUploads();
+    }
+    this.#notifyStatus();
+  }
+
+  /**
+   * Whether this editor holds the attachment an upload is working on.
+   *
+   * @param clientId - The attachment's client-side id
+   * @returns True when the attachment strip includes it
+   * @example
+   * editor.hasAttachment(clientId); // false once the post moved to another editor
+   */
+  hasAttachment(clientId: string): boolean {
+    return this._attachments.some((a) => a.clientId === clientId);
+  }
+
   /** Pre-fill all fields for edit mode or draft restore */
   populate(data: {
     format: string;
@@ -1171,6 +1344,8 @@ export class JantComposeEditor extends LitElement {
     showRating?: boolean;
     media?: Array<{
       id: string;
+      /** Preserved so a restored draft's attachmentOrder still maps by clientId */
+      clientId?: string;
       previewUrl: string;
       posterUrl?: string | null;
       alt?: string;
@@ -1196,6 +1371,8 @@ export class JantComposeEditor extends LitElement {
       this._rating = data.rating;
       this._showRating = true;
     }
+    // A post that already has a title shows the field whatever the default is —
+    // otherwise editing a titled reply would silently drop its title.
     if (data.showTitle !== undefined) this._showTitle = data.showTitle;
     else if (data.title && data.format === "note") this._showTitle = true;
     if (data.showRating !== undefined) this._showRating = data.showRating;
@@ -1217,13 +1394,14 @@ export class JantComposeEditor extends LitElement {
     // Convert media attachments to ComposeAttachment[] with status "done"
     if (data.media?.length) {
       const attachments = data.media.map((m) => ({
-        clientId: randomUUID(),
+        clientId: m.clientId ?? randomUUID(),
         file: new File([], m.originalName ?? "existing", { type: m.mimeType }),
         previewUrl: m.previewUrl,
         posterUrl: m.posterUrl ?? null,
         status: "done" as const,
         progress: null,
         mediaId: m.id,
+        remoteUrl: m.previewUrl,
         alt: m.alt ?? "",
         error: null,
         summary: m.summary ?? null,
@@ -1281,6 +1459,7 @@ export class JantComposeEditor extends LitElement {
 
     this._showUrlValidation = false;
     this._showLinkTitleValidation = false;
+    this.#notifyStatus();
   }
 
   /** Updates editor content and title from fullscreen close */
@@ -1304,6 +1483,10 @@ export class JantComposeEditor extends LitElement {
       );
     }
     this._lastEditorSelection = selection ?? this._readEditorSelection();
+    // Content handed in from outside has to be visible to the owner in the same
+    // tick: fullscreen's ⌘↵ hands the text back and publishes on the next line,
+    // with no render in between to carry the news.
+    this.#notifyStatus();
   }
 
   private static SUMMARY_LENGTH = 100;
@@ -1332,7 +1515,11 @@ export class JantComposeEditor extends LitElement {
     );
   }
 
-  private _moveAttachment(clientId: string, direction: -1 | 1) {
+  private _moveAttachment(
+    clientId: string,
+    direction: -1 | 1,
+    focusTarget: AttachmentFocusTarget = "handle",
+  ) {
     const index = this._attachmentOrder.indexOf(clientId);
     const nextIndex = index + direction;
     if (
@@ -1348,9 +1535,50 @@ export class JantComposeEditor extends LitElement {
     if (!item) return;
     nextOrder.splice(nextIndex, 0, item);
     this._attachmentOrder = nextOrder;
+    this.#focusAfterMove = { clientId, direction, focusTarget };
     this.#scrollAttachmentIntoView(clientId);
   }
 
+  /**
+   * Returns focus to the attachment that just moved.
+   *
+   * Lit reuses the strip's DOM slots, so the element that held focus now
+   * renders a different attachment. Called from `updated()`, once the new
+   * order is in the DOM.
+   */
+  #restoreAttachmentFocus() {
+    const pending = this.#focusAfterMove;
+    if (!pending) return;
+    this.#focusAfterMove = null;
+
+    const item = this.querySelector<HTMLElement>(
+      `[data-attachment-id="${pending.clientId}"]`,
+    );
+    if (!item) return;
+
+    if (pending.focusTarget === "handle") {
+      item
+        .querySelector<HTMLElement>("[data-attachment-sortable]")
+        ?.focus({ preventScroll: true });
+      return;
+    }
+
+    // The pressed button turns disabled at either end of the strip, and a
+    // disabled button cannot hold focus — fall back to its twin so the
+    // keyboard path never dead-ends.
+    const target =
+      this.#findMoveButton(item, pending.direction) ??
+      this.#findMoveButton(item, pending.direction === 1 ? -1 : 1);
+    target?.focus({ preventScroll: true });
+  }
+
+  #findMoveButton(item: HTMLElement, direction: -1 | 1) {
+    const button = item.querySelector<HTMLButtonElement>(
+      `[data-attachment-move="${direction === -1 ? "earlier" : "later"}"]`,
+    );
+    return button && !button.disabled ? button : null;
+  }
+
   private _handleAttachmentKeydown(
     clientId: string,
     e: globalThis.KeyboardEvent,
@@ -1374,13 +1602,45 @@ export class JantComposeEditor extends LitElement {
     }
   }
 
+  /**
+   * Matches when the primary pointer is a finger.
+   *
+   * Cached because `matchMedia` allocates a new list each call, and `undefined`
+   * distinguishes "not looked up yet" from "this environment has no
+   * `matchMedia`".
+   */
+  #coarsePointer(): globalThis.MediaQueryList | null {
+    if (this.#coarsePointerQuery !== undefined) return this.#coarsePointerQuery;
+    this.#coarsePointerQuery =
+      typeof window.matchMedia === "function"
+        ? window.matchMedia("(pointer: coarse)")
+        : null;
+    return this.#coarsePointerQuery;
+  }
+
+  private _onPointerTypeChange = () => {
+    this.#sortable?.destroy();
+    this.#sortable = null;
+    this.#initSortable();
+  };
+
   #initSortable() {
     const list = this.querySelector<HTMLElement>("[data-attachment-list]");
     if (!list || this.#sortable || this._attachmentOrder.length <= 1) return;
 
+    // Touch reorders through the move buttons, never by dragging. This strip
+    // scrolls along the axis it would drag, and a near-full-width thumbnail's
+    // drop target sits off-screen — so on a touch device the gesture is worth
+    // more as a plain scroll than as a reorder.
+    if (this.#coarsePointer()?.matches) return;
+
     this.#sortable = Sortable.create(list, {
       ...responsiveSortableOptions,
       chosenClass: "compose-attachment-chosen",
+      // Only reachable on a fine-pointer device that also has a touchscreen,
+      // where the scroll-versus-drag conflict above still applies to touch.
+      // Longer than the shared default so an ambiguous gesture scrolls.
+      delay: 250,
       direction: "horizontal",
       dragClass: "compose-attachment-drag",
       filter:
@@ -1528,13 +1788,78 @@ export class JantComposeEditor extends LitElement {
     el.style.height = `${el.scrollHeight}px`;
   }
 
+  /**
+   * Where the current pointer gesture over the body went down and came up. A
+   * `click` reports the nearest common ancestor of the two, so these are the
+   * only way to tell a press on blank paper from a drag that merely started or
+   * ended there.
+   */
+  #bodyPressTarget: globalThis.EventTarget | null = null;
+  #bodyReleaseTarget: globalThis.EventTarget | null = null;
+
+  private _recordBodyPress = (e: MouseEvent) => {
+    this.#bodyPressTarget = e.target;
+    this.#bodyReleaseTarget = null;
+  };
+
+  private _recordBodyRelease = (e: MouseEvent) => {
+    this.#bodyReleaseTarget = e.target;
+  };
+
+  /**
+   * Puts the caret in the body when the click landed on blank section instead
+   * of on the editor. The surfaces that reserve height — the `/new` page, the
+   * dialog on a phone — leave a stretch of empty paper under a two-line
+   * editor, and it should behave like paper: click it, write there. Only the
+   * layout wrappers forward; a click that reached a real control belongs to
+   * that control.
+   *
+   * Selecting a line right-to-left normally lifts the pointer off the text and
+   * over one of those wrappers, and the resulting click is retargeted to the
+   * wrapper — indistinguishable from a click on blank paper by its target
+   * alone. Requiring the press and the release to have landed on that same
+   * blank space keeps a drag-selection from being thrown away.
+   */
+  private _focusBodyFromBlankSpace = (e: MouseEvent) => {
+    const pressTarget = this.#bodyPressTarget;
+    const releaseTarget = this.#bodyReleaseTarget;
+    this.#bodyPressTarget = null;
+    this.#bodyReleaseTarget = null;
+    if (pressTarget !== e.target || releaseTarget !== e.target) return;
+
+    const target = e.target as HTMLElement | null;
+    if (!target) return;
+    const forwards =
+      target.classList.contains("compose-body") ||
+      target.classList.contains("compose-field-enter") ||
+      target.classList.contains("compose-tiptap-wrap");
+    if (!forwards) return;
+    this._editor?.commands.focus("end");
+  };
+
   private _setRating(star: number) {
     this._rating = this._rating === star ? 0 : star;
   }
 
+  /**
+   * Where a pasted or dropped image lands: inline in the body, or in the
+   * attachment dock.
+   *
+   * Only a note has an article mode to fall into, and a visible, filled title
+   * is what says the body is prose an image belongs inside. A link's body is
+   * commentary beside a link card and a quote's is commentary beside the
+   * quotation — images there are attachments, always. `_title` couldn't answer
+   * this for them anyway: a link's title is required, so it is never empty
+   * once the post is publishable, and a quote has no title field at all yet
+   * can still be holding one carried over from a format switch.
+   *
+   * Only the default moves — the slash `/image` command inserts inline in
+   * every format.
+   */
   private _shouldPasteInlineImage(file: File): boolean {
     if (!file.type.startsWith("image/")) return false;
-    if (this.format === "note" && !this._showTitle) return false;
+    if (this.format !== "note") return false;
+    if (!this._showTitle) return false;
     return this._title.trim().length > 0;
   }
 
@@ -1542,7 +1867,9 @@ export class JantComposeEditor extends LitElement {
     if (!this._fileInput) {
       this._fileInput = document.createElement("input");
       this._fileInput.type = "file";
-      this._fileInput.accept = UPLOAD_ACCEPT;
+      // No `accept`: the composer takes any file, and leaving the attribute
+      // off is how HTML says so. `*/*` is not a valid accept token, so every
+      // browser had to work out what it meant before the dialog could open.
       this._fileInput.multiple = true;
       this._fileInput.style.display = "none";
       this._fileInput.addEventListener("change", () =>
@@ -1588,6 +1915,7 @@ export class JantComposeEditor extends LitElement {
         status: "pending",
         progress: null,
         mediaId: null,
+        remoteUrl: null,
         alt: "",
         error: null,
         summary: null,
@@ -1959,15 +2287,17 @@ export class JantComposeEditor extends LitElement {
         <span class="compose-attachment-preview-fallback-label">
           ${unavailableLabel}
         </span>
-        ${category === "video"
-          ? html`
-              <div class="compose-attachment-play-icon">
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
-                  <path d="M8 5v14l11-7z" />
-                </svg>
-              </div>
-            `
-          : nothing}
+        ${
+          category === "video"
+            ? html`
+                <div class="compose-attachment-play-icon">
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
+                    <path d="M8 5v14l11-7z" />
+                  </svg>
+                </div>
+              `
+            : nothing
+        }
       </div>
     `;
   }
@@ -1977,30 +2307,19 @@ export class JantComposeEditor extends LitElement {
   private _renderNoteFields() {
     return html`
       <div class="compose-field-enter">
-        ${this._showTitle
-          ? html`
-              <div class="compose-note-title-row">
-                <input
-                  type="text"
-                  .value=${this._title}
-                  @input=${(e: Event) => this._onInput("_title", e)}
-                  @focus=${(e: Event) => this._onFieldFocus(e)}
-                  @keydown=${this._handleTitleKeydown}
-                  class="compose-input compose-note-title"
-                  placeholder=${this.labels.titlePlaceholder}
-                />
-                <button
-                  type="button"
-                  class="compose-note-title-dismiss"
-                  @click=${() => {
-                    this._showTitle = false;
-                  }}
-                >
-                  ✕
-                </button>
-              </div>
-            `
-          : nothing}
+        ${
+          this._showTitle
+            ? html`<input
+                type="text"
+                .value=${this._title}
+                @input=${(e: Event) => this._onInput("_title", e)}
+                @focus=${(e: Event) => this._onFieldFocus(e)}
+                @keydown=${this._handleTitleKeydown}
+                class="compose-input compose-note-title"
+                placeholder=${this.labels.titlePlaceholder}
+              />`
+            : nothing
+        }
         <div class="compose-tiptap-wrap">
           <div class="compose-tiptap-body"></div>
           <span class="compose-slash-discovery-hint" aria-hidden="true">
@@ -2013,10 +2332,10 @@ export class JantComposeEditor extends LitElement {
 
   private _renderLinkFields() {
     const urlError = this._showUrlValidation
-      ? this._getInlineUrlValidationMessage()
+      ? this.getUrlValidationMessage()
       : null;
     const titleError = this._showLinkTitleValidation
-      ? this._getInlineLinkTitleValidationMessage()
+      ? this.getLinkTitleValidationMessage()
       : null;
 
     return html`
@@ -2034,7 +2353,10 @@ export class JantComposeEditor extends LitElement {
             @input=${(e: Event) => this._onInput("_url", e)}
             @focus=${(e: Event) => this._onFieldFocus(e)}
             @blur=${() => {
-              this._showUrlValidation = true;
+              // Leaving a field empty is not yet a mistake — it becomes one at
+              // submit, where revealUrlValidation() opens this gate anyway.
+              // Blur only speaks up about something already typed and wrong.
+              if (this._url.trim()) this._showUrlValidation = true;
             }}
             class="compose-input compose-url-input"
             placeholder=${this.labels.urlPlaceholder}
@@ -2044,15 +2366,17 @@ export class JantComposeEditor extends LitElement {
             )}
           />
         </div>
-        ${urlError
-          ? html`<p
-              id=${this._urlStatusId}
-              class="compose-url-status compose-url-status-error"
-              data-compose-url-status="error"
-            >
-              ${urlError}
-            </p>`
-          : nothing}
+        ${
+          urlError
+            ? html`<p
+                id=${this._urlStatusId}
+                class="compose-url-status compose-url-status-error"
+                data-compose-url-status="error"
+              >
+                ${urlError}
+              </p>`
+            : nothing
+        }
         <input
           type="text"
           .value=${this._title}
@@ -2060,25 +2384,26 @@ export class JantComposeEditor extends LitElement {
           @focus=${(e: Event) => this._onFieldFocus(e)}
           @keydown=${this._handleTitleKeydown}
           @blur=${() => {
-            this._showLinkTitleValidation = true;
+            // Same gate as the URL above: quiet while empty, loud on submit.
+            if (this._title.trim()) this._showLinkTitleValidation = true;
           }}
           class="compose-input compose-link-title"
           placeholder=${this.labels.linkTitlePlaceholder}
           aria-invalid=${titleError ? "true" : "false"}
         />
-        ${titleError
-          ? html`<p
-              class="compose-url-status compose-url-status-error"
-              data-compose-link-title-error="error"
-            >
-              ${titleError}
-            </p>`
-          : nothing}
+        ${
+          titleError
+            ? html`<p
+                class="compose-url-status compose-url-status-error"
+                data-compose-link-title-error="error"
+              >
+                ${titleError}
+              </p>`
+            : nothing
+        }
         <div class="compose-divider"></div>
         <div class="compose-tiptap-wrap">
-          <div
-            class="compose-tiptap-body compose-tiptap-thoughts compose-tiptap-link"
-          ></div>
+          <div class="compose-tiptap-body compose-tiptap-link"></div>
           <span class="compose-slash-discovery-hint" aria-hidden="true">
             ${this.labels.slashHint}
           </span>
@@ -2102,7 +2427,7 @@ export class JantComposeEditor extends LitElement {
             @focus=${(e: Event) => this._onFieldFocus(e)}
             class="compose-input compose-quote-text"
             placeholder=${this.labels.quotePlaceholder}
-            rows="5"
+            rows="4"
           ></textarea>
         </div>
         <div class="compose-quote-author-row">
@@ -2132,24 +2457,24 @@ export class JantComposeEditor extends LitElement {
               urlError ? this._urlStatusId : undefined,
             )}
           />
-          ${urlError
-            ? html`<p
-                id=${this._urlStatusId}
-                class="compose-url-status compose-url-status-error"
-                data-compose-url-status="error"
-              >
-                ${urlError}
-              </p>`
-            : nothing}
+          ${
+            urlError
+              ? html`<p
+                  id=${this._urlStatusId}
+                  class="compose-url-status compose-url-status-error"
+                  data-compose-url-status="error"
+                >
+                  ${urlError}
+                </p>`
+              : nothing
+          }
         </div>
         <div
           class="compose-divider compose-divider-quote"
           aria-hidden="true"
         ></div>
         <div class="compose-tiptap-wrap">
-          <div
-            class="compose-tiptap-body compose-tiptap-thoughts compose-tiptap-thoughts-quote"
-          ></div>
+          <div class="compose-tiptap-body"></div>
           <span class="compose-slash-discovery-hint" aria-hidden="true">
             ${this.labels.slashHint}
           </span>
@@ -2177,9 +2502,11 @@ export class JantComposeEditor extends LitElement {
             </button>
           `,
         )}
-        ${this._rating > 0
-          ? html`<span class="compose-star-label">${this._rating}/5</span>`
-          : nothing}
+        ${
+          this._rating > 0
+            ? html`<span class="compose-star-label">${this._rating}/5</span>`
+            : nothing
+        }
       </div>
     `;
   }
@@ -2253,16 +2580,20 @@ export class JantComposeEditor extends LitElement {
             ${this._renderFileIcon(a.file.type, 20)}
           </div>
           <span class="compose-attachment-file-name">${a.file.name}</span>
-          ${a.summary
-            ? html`<span class="compose-attachment-text-summary"
-                >${a.summary}</span
-              >`
-            : nothing}
-          ${typeof a.chars === "number" && a.chars > 0
-            ? html`<span class="compose-attachment-file-size"
-                >${this._formatChars(a.chars)}</span
-              >`
-            : nothing}
+          ${
+            a.summary
+              ? html`<span class="compose-attachment-text-summary"
+                  >${a.summary}</span
+                >`
+              : nothing
+          }
+          ${
+            typeof a.chars === "number" && a.chars > 0
+              ? html`<span class="compose-attachment-file-size"
+                  >${this._formatChars(a.chars)}</span
+                >`
+              : nothing
+          }
         </div>
       `;
     }
@@ -2292,46 +2623,52 @@ export class JantComposeEditor extends LitElement {
 
   private _renderAttachmentOverlay(a: ComposeAttachment, index: number) {
     return html`
-      ${a.status === "error"
-        ? html`
-            <button
-              type="button"
-              class="compose-attachment-overlay compose-attachment-retry"
-              @click=${(e: Event) => {
-                e.stopPropagation();
-                this._retryAllFailed();
-              }}
-            >
-              <span class="compose-retry-content">
-                <svg
-                  width="20"
-                  height="20"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
-                  <path
-                    d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
-                  />
-                  <path d="M3 3v5h5" />
-                  <path
-                    d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"
-                  />
-                  <path d="M16 16h5v5" />
-                </svg>
-                <span class="compose-retry-label">${this.labels.retryAll}</span>
-              </span>
-              ${a.error
-                ? html`<span class="compose-attachment-error-msg"
-                    >${a.error}</span
-                  >`
-                : nothing}
-            </button>
-          `
-        : nothing}
+      ${
+        a.status === "error"
+          ? html`
+              <button
+                type="button"
+                class="compose-attachment-overlay compose-attachment-retry"
+                @click=${(e: Event) => {
+                  e.stopPropagation();
+                  this._retryAllFailed();
+                }}
+              >
+                <span class="compose-retry-content">
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path
+                      d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
+                    />
+                    <path d="M3 3v5h5" />
+                    <path
+                      d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"
+                    />
+                    <path d="M16 16h5v5" />
+                  </svg>
+                  <span class="compose-retry-label"
+                    >${this.labels.retryAll}</span
+                  >
+                </span>
+                ${
+                  a.error
+                    ? html`<span class="compose-attachment-error-msg"
+                        >${a.error}</span
+                      >`
+                    : nothing
+                }
+              </button>
+            `
+          : nothing
+      }
       ${this._renderAttachmentRemoveButton((e: Event) => {
         e.stopPropagation();
         this._removeAttachment(index);
@@ -2363,6 +2700,87 @@ export class JantComposeEditor extends LitElement {
     `;
   }
 
+  private _renderAttachmentMoveButton(
+    clientId: string,
+    direction: -1 | 1,
+    disabled: boolean,
+  ) {
+    const earlier = direction === -1;
+    const label = earlier
+      ? this.labels.moveAttachmentEarlier
+      : this.labels.moveAttachmentLater;
+
+    return html`
+      <button
+        type="button"
+        class="compose-attachment-move"
+        data-attachment-move=${earlier ? "earlier" : "later"}
+        ?disabled=${disabled}
+        aria-label=${label}
+        title=${label}
+        @click=${(e: Event) => {
+          e.stopPropagation();
+          this._moveAttachment(clientId, direction, "move");
+        }}
+      >
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.9"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path
+            d=${
+              earlier ? "M8.75 3.5 5.25 7l3.5 3.5" : "M5.25 3.5 8.75 7l-3.5 3.5"
+            }
+          />
+        </svg>
+      </button>
+    `;
+  }
+
+  /**
+   * Renders the quiet control row under an attachment thumbnail.
+   *
+   * Reorder buttons are the touch-reliable path: dragging a thumbnail competes
+   * with the strip's own horizontal scroll, and a near-full-width thumbnail's
+   * drop target is off-screen anyway. They appear only once there is something
+   * to reorder against.
+   */
+  private _renderAttachmentActions(
+    clientId: string,
+    extra: TemplateResult | typeof nothing = nothing,
+  ) {
+    const total = this._attachmentOrder.length;
+    const index = this._attachmentOrder.indexOf(clientId);
+    const canReorder = total > 1 && index !== -1;
+    if (!canReorder && extra === nothing) return nothing;
+
+    return html`
+      <div class="compose-attachment-actions">
+        ${
+          canReorder
+            ? html`
+                <div class="compose-attachment-move-group">
+                  ${this._renderAttachmentMoveButton(clientId, -1, index === 0)}
+                  ${this._renderAttachmentMoveButton(
+                    clientId,
+                    1,
+                    index === total - 1,
+                  )}
+                </div>
+              `
+            : nothing
+        }
+        ${extra}
+      </div>
+    `;
+  }
+
   private _renderAttachedTextCard(item: AttachedTextItem, index: number) {
     return html`
       <div class="compose-attachment" data-attachment-id=${item.clientId}>
@@ -2381,19 +2799,22 @@ export class JantComposeEditor extends LitElement {
               ${this._renderFileIcon("text/html; charset=utf-8", 20)}
             </div>
             <span class="compose-attachment-text-summary">${item.summary}</span>
-            ${item.bodyJson
-              ? html`<span class="compose-attachment-file-size"
-                  >${this._formatChars(
-                    this._extractPlainText(item.bodyJson).length,
-                  )}</span
-                >`
-              : nothing}
+            ${
+              item.bodyJson
+                ? html`<span class="compose-attachment-file-size"
+                    >${this._formatChars(
+                      this._extractPlainText(item.bodyJson).length,
+                    )}</span
+                  >`
+                : nothing
+            }
           </div>
           ${this._renderAttachmentRemoveButton((e: Event) => {
             e.stopPropagation();
             this._removeAttachedText(index);
           })}
         </div>
+        ${this._renderAttachmentActions(item.clientId)}
       </div>
     `;
   }
@@ -2406,115 +2827,122 @@ export class JantComposeEditor extends LitElement {
 
     return html`
       <div class="compose-attachment" data-attachment-id=${a.clientId}>
-        ${isFileCard
-          ? html`
-              <div class="compose-attachment-thumb">
-                <div
-                  class="compose-attachment-sortable"
-                  data-attachment-sortable
-                  tabindex="0"
-                  @keydown=${(e: globalThis.KeyboardEvent) =>
-                    this._handleAttachmentKeydown(a.clientId, e)}
-                >
-                  ${this._renderAttachmentPreview(a)}
+        ${
+          isFileCard
+            ? html`
+                <div class="compose-attachment-thumb">
+                  <div
+                    class="compose-attachment-sortable"
+                    data-attachment-sortable
+                    tabindex="0"
+                    @keydown=${(e: globalThis.KeyboardEvent) =>
+                      this._handleAttachmentKeydown(a.clientId, e)}
+                  >
+                    ${this._renderAttachmentPreview(a)}
+                  </div>
+                  ${this._renderAttachmentOverlay(a, i)}
                 </div>
-                ${this._renderAttachmentOverlay(a, i)}
-              </div>
-            `
-          : html`
-              <div class="compose-attachment-thumb">
-                <div
-                  class="compose-attachment-sortable"
-                  data-attachment-sortable
-                  tabindex="0"
-                  @keydown=${(e: globalThis.KeyboardEvent) =>
-                    this._handleAttachmentKeydown(a.clientId, e)}
-                >
-                  ${previewFailed
-                    ? this._renderAttachmentPreviewFallback(visualCategory)
-                    : category === "video"
-                      ? html`
-                          <video
-                            src=${a.previewUrl}
-                            poster=${a.posterUrl ?? nothing}
-                            class="compose-attachment-img"
-                            preload="metadata"
-                            .playsInline=${true}
-                            .muted=${true}
-                            @loadeddata=${() =>
-                              this._setAttachmentPreviewFailure(
-                                a.clientId,
-                                false,
-                              )}
-                            @error=${() =>
-                              this._setAttachmentPreviewFailure(
-                                a.clientId,
-                                true,
-                              )}
-                          ></video>
-                          <div class="compose-attachment-play-icon">
-                            <svg
-                              width="24"
-                              height="24"
-                              viewBox="0 0 24 24"
-                              fill="white"
-                            >
-                              <path d="M8 5v14l11-7z" />
-                            </svg>
-                          </div>
-                        `
-                      : a.status === "processing"
-                        ? html`
-                            <div class="compose-attachment-processing">
-                              <svg
-                                class="animate-spin size-5"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                              >
-                                <path
-                                  d="M12 2a10 10 0 1 0 10 10"
-                                  stroke-linecap="round"
+              `
+            : html`
+                <div class="compose-attachment-thumb">
+                  <div
+                    class="compose-attachment-sortable"
+                    data-attachment-sortable
+                    tabindex="0"
+                    @keydown=${(e: globalThis.KeyboardEvent) =>
+                      this._handleAttachmentKeydown(a.clientId, e)}
+                  >
+                    ${
+                      previewFailed
+                        ? this._renderAttachmentPreviewFallback(visualCategory)
+                        : category === "video"
+                          ? html`
+                              <video
+                                src=${a.previewUrl}
+                                poster=${a.posterUrl ?? nothing}
+                                class="compose-attachment-img"
+                                preload="metadata"
+                                .playsInline=${true}
+                                .muted=${true}
+                                @loadeddata=${() =>
+                                  this._setAttachmentPreviewFailure(
+                                    a.clientId,
+                                    false,
+                                  )}
+                                @error=${() =>
+                                  this._setAttachmentPreviewFailure(
+                                    a.clientId,
+                                    true,
+                                  )}
+                              ></video>
+                              <div class="compose-attachment-play-icon">
+                                <svg
+                                  width="24"
+                                  height="24"
+                                  viewBox="0 0 24 24"
+                                  fill="white"
+                                >
+                                  <path d="M8 5v14l11-7z" />
+                                </svg>
+                              </div>
+                            `
+                          : a.status === "processing"
+                            ? html`
+                                <div class="compose-attachment-processing">
+                                  <svg
+                                    class="animate-spin size-5"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                  >
+                                    <path
+                                      d="M12 2a10 10 0 1 0 10 10"
+                                      stroke-linecap="round"
+                                    />
+                                  </svg>
+                                </div>
+                              `
+                            : html`
+                                <img
+                                  src=${a.previewUrl}
+                                  alt=""
+                                  class="compose-attachment-img"
+                                  @load=${() =>
+                                    this._setAttachmentPreviewFailure(
+                                      a.clientId,
+                                      false,
+                                    )}
+                                  @error=${() =>
+                                    this._setAttachmentPreviewFailure(
+                                      a.clientId,
+                                      true,
+                                    )}
                                 />
-                              </svg>
-                            </div>
-                          `
-                        : html`
-                            <img
-                              src=${a.previewUrl}
-                              alt=""
-                              class="compose-attachment-img"
-                              @load=${() =>
-                                this._setAttachmentPreviewFailure(
-                                  a.clientId,
-                                  false,
-                                )}
-                              @error=${() =>
-                                this._setAttachmentPreviewFailure(
-                                  a.clientId,
-                                  true,
-                                )}
-                            />
-                          `}
+                              `
+                    }
+                  </div>
+                  ${this._renderAttachmentOverlay(a, i)}
                 </div>
-                ${this._renderAttachmentOverlay(a, i)}
-              </div>
-            `}
-        ${category === "image"
-          ? html`
-              <button
-                type="button"
-                class=${classMap({
-                  "compose-attachment-alt": true,
-                  "compose-attachment-alt-set": a.alt.length > 0,
-                })}
-                @click=${() => this._openAltPanel(i)}
-              >
-                ${a.alt.length > 0 ? "ALT" : "+ ALT"}
-              </button>
-            `
-          : nothing}
+              `
+        }
+        ${this._renderAttachmentActions(
+          a.clientId,
+          category === "image"
+            ? html`
+                <button
+                  type="button"
+                  class=${classMap({
+                    "compose-attachment-alt": true,
+                    "compose-attachment-alt-set": a.alt.length > 0,
+                  })}
+                  @click=${() => this._openAltPanel(i)}
+                >
+                  ${a.alt.length > 0 ? "ALT" : "+ ALT"}
+                </button>
+              `
+            : nothing,
+        )}
       </div>
     `;
   }
@@ -2573,11 +3001,13 @@ export class JantComposeEditor extends LitElement {
           @click=${() => this._openFilePicker()}
         >
           ${renderComposeToolbarIcon(COMPOSE_TOOLBAR_ICONS.media)}
-          ${this._attachments.length > 0
-            ? html`<span class="compose-tool-label"
-                >${this.labels.addMore}</span
-              >`
-            : nothing}
+          ${
+            this._attachments.length > 0
+              ? html`<span class="compose-tool-label"
+                  >${this.labels.addMore}</span
+                >`
+              : nothing
+          }
         </button>
 
         <button
@@ -2590,11 +3020,13 @@ export class JantComposeEditor extends LitElement {
           @click=${() => this._openAttachedText()}
         >
           ${renderComposeToolbarIcon(COMPOSE_TOOLBAR_ICONS.attachedText)}
-          ${hasAttached
-            ? html`<span class="compose-tool-label"
-                >${this.labels.addMore}</span
-              >`
-            : nothing}
+          ${
+            hasAttached
+              ? html`<span class="compose-tool-label"
+                  >${this.labels.addMore}</span
+                >`
+              : nothing
+          }
         </button>
 
         <button
@@ -2605,12 +3037,13 @@ export class JantComposeEditor extends LitElement {
             "compose-tool-btn-active": this._showEmojiPicker,
           })}
           title=${this.labels.emoji}
+          aria-pressed=${this._showEmojiPicker ? "true" : "false"}
           @click=${() => this._toggleEmojiPicker()}
         >
           ${renderComposeToolbarIcon(COMPOSE_TOOLBAR_ICONS.emoji)}
         </button>
 
-        <div class="compose-tool-sep"></div>
+        <div class="compose-tool-gap"></div>
 
         <button
           type="button"
@@ -2619,6 +3052,7 @@ export class JantComposeEditor extends LitElement {
             "compose-tool-btn-active": this._showRating,
           })}
           title=${this.labels.rate}
+          aria-pressed=${this._showRating ? "true" : "false"}
           @click=${() => {
             const willShow = !this._showRating;
             this._showRating = willShow;
@@ -2634,46 +3068,61 @@ export class JantComposeEditor extends LitElement {
           ${renderComposeToolbarIcon(COMPOSE_TOOLBAR_ICONS.rate)}
         </button>
 
-        ${this.format === "note"
-          ? html`
-              <button
-                type="button"
-                class=${classMap({
-                  "compose-tool-btn": true,
-                  "compose-tool-btn-active": this._showTitle,
-                })}
-                title=${this.labels.title}
-                @click=${() => {
-                  const willShow = !this._showTitle;
-                  this._showTitle = willShow;
-                  if (willShow) {
-                    this.updateComplete.then(() => {
-                      this.querySelector<HTMLInputElement>(
-                        ".compose-note-title",
-                      )?.focus();
-                    });
-                  }
-                }}
-              >
-                ${renderComposeToolbarIcon(COMPOSE_TOOLBAR_ICONS.title)}
-              </button>
-            `
-          : nothing}
-        ${this.format === "note"
-          ? html`
-              <div class="compose-tool-view-group">
+        ${
+          this.format === "note"
+            ? html`
                 <button
                   type="button"
-                  class="compose-tool-btn compose-tool-btn-view"
-                  title=${this.labels.fullscreen}
-                  aria-label=${this.labels.fullscreen}
-                  @click=${() => this.openFullscreen()}
+                  class=${classMap({
+                    "compose-tool-btn": true,
+                    "compose-tool-btn-active": this._showTitle,
+                  })}
+                  title=${this.labels.title}
+                  aria-pressed=${this._showTitle ? "true" : "false"}
+                  @click=${() => {
+                    const willShow = !this._showTitle;
+                    this._showTitle = willShow;
+                    // Only this deliberate click is worth remembering. The other
+                    // writers of `_showTitle` — H1 promotion, format conversion,
+                    // fullscreen reveal — are the program acting on one post, not
+                    // the author stating a habit, so they stay silent.
+                    this.dispatchEvent(
+                      new CustomEvent("jant:title-toggle", {
+                        bubbles: true,
+                        detail: { showTitle: willShow },
+                      }),
+                    );
+                    if (willShow) {
+                      this.updateComplete.then(() => {
+                        this.querySelector<HTMLInputElement>(
+                          ".compose-note-title",
+                        )?.focus();
+                      });
+                    }
+                  }}
                 >
-                  ${renderComposeToolbarIcon(COMPOSE_TOOLBAR_ICONS.fullscreen)}
+                  ${renderComposeToolbarIcon(COMPOSE_TOOLBAR_ICONS.title)}
                 </button>
-              </div>
-            `
-          : nothing}
+              `
+            : nothing
+        }
+        ${
+          this.format === "note"
+            ? html`
+                <div class="compose-tool-view-group">
+                  <button
+                    type="button"
+                    class="compose-tool-btn compose-tool-btn-view"
+                    title=${this.labels.fullscreen}
+                    aria-label=${this.labels.fullscreen}
+                    @click=${() => this.openFullscreen()}
+                  >
+                    ${renderComposeToolbarIcon(COMPOSE_TOOLBAR_ICONS.fullscreen)}
+                  </button>
+                </div>
+              `
+            : nothing
+        }
       </div>
     `;
   }
@@ -2689,14 +3138,10 @@ export class JantComposeEditor extends LitElement {
 
     return html`
       <div class="compose-thread-post-header">
-        <div class="compose-segmented compose-thread-segmented">
-          <div
-            class=${classMap({
-              "compose-format-pill": true,
-              "compose-format-pill-link": this.format === "link",
-              "compose-format-pill-quote": this.format === "quote",
-            })}
-          ></div>
+        <div class="compose-segmented">
+          <!-- No sliding indicator: the items size to their labels now, so a
+               thirds-based pill would not line up. The active item carries its
+               own background instead. -->
           ${formats.map(
             (f) => html`
               <button
@@ -2721,31 +3166,48 @@ export class JantComposeEditor extends LitElement {
             `,
           )}
         </div>
-        ${this.removable
-          ? html`<button
-              type="button"
-              class="compose-thread-post-remove"
-              title="Remove post"
-              @click=${() => {
-                this.dispatchEvent(
-                  new CustomEvent("jant:thread-remove", { bubbles: true }),
-                );
-              }}
-            >
-              <svg
-                width="14"
-                height="14"
-                viewBox="0 0 16 16"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.8"
-                stroke-linecap="round"
-                aria-hidden="true"
+        ${
+          this.positionLabel
+            ? html`<span class="compose-post-position"
+                >${this.positionLabel}</span
+              >`
+            : nothing
+        }
+        ${
+          this.badgeLabel
+            ? html`<span class="compose-post-position compose-post-badge"
+                >${this.badgeLabel}</span
+              >`
+            : nothing
+        }
+        ${this.headerExtra ?? nothing}
+        ${
+          this.removable
+            ? html`<button
+                type="button"
+                class="compose-thread-post-remove"
+                title="Remove post"
+                @click=${() => {
+                  this.dispatchEvent(
+                    new CustomEvent("jant:thread-remove", { bubbles: true }),
+                  );
+                }}
               >
-                ${unsafeSVG(CLOSE_ICON)}
-              </svg>
-            </button>`
-          : nothing}
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.8"
+                  stroke-linecap="round"
+                  aria-hidden="true"
+                >
+                  ${unsafeSVG(CLOSE_ICON)}
+                </svg>
+              </button>`
+            : nothing
+        }
       </div>
     `;
   }
@@ -2762,16 +3224,23 @@ export class JantComposeEditor extends LitElement {
   }
 
   render() {
+    // The format selector lives here in every mode — single post, reply, and
+    // thread item alike — so there is exactly one place it can be.
     return html`
-      ${this.threadItem || this.inlineFormat
-        ? this._renderFormatHeader()
-        : nothing}
-      <section class="compose-body">
-        ${this.format === "note"
-          ? this._renderNoteFields()
-          : this.format === "link"
-            ? this._renderLinkFields()
-            : this._renderQuoteFields()}
+      ${this._renderFormatHeader()}
+      <section
+        class="compose-body"
+        @mousedown=${this._recordBodyPress}
+        @mouseup=${this._recordBodyRelease}
+        @click=${this._focusBodyFromBlankSpace}
+      >
+        ${
+          this.format === "note"
+            ? this._renderNoteFields()
+            : this.format === "link"
+              ? this._renderLinkFields()
+              : this._renderQuoteFields()
+        }
       </section>
       ${this._renderAttachmentDock()} ${this._renderStarRating()}
       ${this._renderToolsRow()}