@jant/core 0.3.37 → 0.3.39

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

@@ -10,14 +10,24 @@
 
 import { LitElement, html, nothing } 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";
 import type { Editor, JSONContent } from "@tiptap/core";
 import Sortable from "sortablejs";
+import {
+  captureSortableRevertNextSibling,
+  getSortableMove,
+  readSortableDataIds,
+  responsiveSortableOptions,
+  revertSortableDomMove,
+  setSortableDraggingState,
+} from "../sortable-list.js";
 import type {
   ComposeFormat,
   ComposeLabels,
   ComposeAttachment,
   AttachedTextItem,
+  ComposeFullscreenOpenDetail,
 } from "./compose-types.js";
 import {
   UPLOAD_ACCEPT,
@@ -27,6 +37,99 @@ import {
 import type { MediaCategory } from "../../lib/upload.js";
 import { showToast } from "../toast.js";
 import { createTiptapEditor } from "../tiptap/create-editor.js";
+import { uploadAndInsertInlineImage } from "../tiptap/inline-image-upload.js";
+import { isSafeAbsoluteUrl } from "../../lib/url.js";
+
+interface ComposeFilePickerCloseDetail {
+  cancelled: boolean;
+}
+
+const COMPOSE_TOOLBAR_ICONS = {
+  media: `
+    <rect x="2.75" y="3" width="12.5" height="11.25" rx="3" />
+    <circle cx="6.15" cy="6.85" r="0.85" fill="currentColor" stroke="none" />
+    <path d="M3.6 11.95 6.75 8.8c.42-.42 1.11-.42 1.53 0l1.4 1.4" />
+    <path d="m8.95 10.2 1.38-1.38c.46-.46 1.21-.46 1.67 0l2.4 2.4" />
+  `,
+  attachedText: `
+    <rect x="3" y="2.75" width="12" height="12.5" rx="3.1" />
+    <path d="M5.85 6.35h6.3" />
+    <path d="M5.85 9h6.3" />
+    <path d="M5.85 11.65h4.35" />
+  `,
+  emoji: `
+    <circle cx="9" cy="9" r="6.8" />
+    <path d="M6.2 10.55c.52 1.08 1.46 1.8 2.8 1.8s2.28-.72 2.8-1.8" />
+    <circle cx="6.5" cy="7.15" r="0.7" fill="currentColor" stroke="none" />
+    <circle cx="11.5" cy="7.15" r="0.7" fill="currentColor" stroke="none" />
+  `,
+  rate: `
+    <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"
+      fill="currentColor"
+      fill-opacity="0.12"
+      stroke="none"
+    />
+    <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"
+    />
+  `,
+  title: `
+    <rect
+      x="3.35"
+      y="3.2"
+      width="11.3"
+      height="2.05"
+      rx="0.68"
+      fill="currentColor"
+      stroke="none"
+    />
+    <rect
+      x="7.8"
+      y="4.6"
+      width="2.4"
+      height="9.45"
+      rx="0.78"
+      fill="currentColor"
+      stroke="none"
+    />
+    <rect
+      x="6.75"
+      y="13.15"
+      width="4.5"
+      height="1.12"
+      rx="0.56"
+      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" />
+  `,
+} as const;
+
+function renderComposeToolbarIcon(
+  icon: (typeof COMPOSE_TOOLBAR_ICONS)[keyof typeof COMPOSE_TOOLBAR_ICONS],
+) {
+  return html`<svg
+    class="compose-tool-icon"
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.55"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    ${unsafeSVG(icon)}
+  </svg>`;
+}
 
 export class JantComposeEditor extends LitElement {
   static properties = {
@@ -47,6 +150,8 @@ export class JantComposeEditor extends LitElement {
     _showAltPanel: { state: true },
     _altPanelIndex: { state: true },
     _showEmojiPicker: { state: true },
+    _showUrlValidation: { state: true },
+    _showLinkTitleValidation: { state: true },
   };
 
   declare format: ComposeFormat;
@@ -66,6 +171,8 @@ export class JantComposeEditor extends LitElement {
   declare _showAltPanel: boolean;
   declare _altPanelIndex: number;
   declare _showEmojiPicker: boolean;
+  declare _showUrlValidation: boolean;
+  declare _showLinkTitleValidation: boolean;
 
   private _editor: Editor | null = null;
   private _fileInput: HTMLInputElement | null = null;
@@ -73,8 +180,10 @@ export class JantComposeEditor extends LitElement {
     null;
   private _emojiPickerEl: HTMLElement | null = null;
   private _emojiContainer: HTMLElement | null = null;
+  private readonly _urlStatusId = `compose-url-status-${crypto.randomUUID()}`;
   private _onDocClickBound = this._onDocumentClick.bind(this);
   private _scrollBufferApplied = false;
+  private _filePickerCleanup: (() => void) | null = null;
   private _suppressAttachedTextOpenUntil = 0;
   #sortable: { destroy(): void } | null = null;
   #revertNextSibling: globalThis.Node | null = null;
@@ -102,6 +211,8 @@ export class JantComposeEditor extends LitElement {
     this._showAltPanel = false;
     this._altPanelIndex = 0;
     this._showEmojiPicker = false;
+    this._showUrlValidation = false;
+    this._showLinkTitleValidation = false;
   }
 
   connectedCallback() {
@@ -118,6 +229,8 @@ export class JantComposeEditor extends LitElement {
     document.removeEventListener("jant:slash-image", this._onSlashImage);
     document.removeEventListener("click", this._onDocClickBound, true);
     this._emojiContainer?.remove();
+    this._filePickerCleanup?.();
+    this._filePickerCleanup = null;
   }
 
   private _onSlashImage = () => {
@@ -144,60 +257,60 @@ export class JantComposeEditor extends LitElement {
       });
       document.body.appendChild(this._slashImageInput);
     }
+    this._trackFilePickerSession(this._slashImageInput);
     this._slashImageInput.click();
   }
 
-  private async _uploadAndInsertImage(file: File) {
-    if (!this._editor) return;
+  private _uploadAndInsertImage(file: File) {
+    const editor = this._editor;
+    if (!editor) return;
+    void uploadAndInsertInlineImage(editor, file);
+  }
 
-    const placeholderUrl = URL.createObjectURL(file);
-    this._editor.chain().focus().setImage({ src: placeholderUrl }).run();
+  private _dispatchFilePickerEvent(
+    type: "jant:file-picker-open" | "jant:file-picker-close",
+    detail?: ComposeFilePickerCloseDetail,
+  ) {
+    this.dispatchEvent(
+      new CustomEvent(type, {
+        bubbles: true,
+        composed: true,
+        detail,
+      }),
+    );
+  }
 
-    try {
-      const formData = new FormData();
-      formData.append("file", file);
-      const response = await fetch("/api/upload", {
-        method: "POST",
-        body: formData,
-      });
-      if (!response.ok) throw new Error(`Upload failed: ${response.status}`);
-      const data = (await response.json()) as { url: string };
-
-      const { doc } = this._editor.state;
-      let replaced = false;
-      doc.descendants((node, pos) => {
-        if (
-          replaced ||
-          node.type.name !== "image" ||
-          node.attrs.src !== placeholderUrl
-        )
-          return;
-        this._editor
-          ?.chain()
-          .focus()
-          .command(({ tr }) => {
-            tr.setNodeMarkup(pos, undefined, { ...node.attrs, src: data.url });
-            return true;
-          })
-          .run();
-        replaced = true;
-      });
-    } catch {
-      const { doc } = this._editor.state;
-      doc.descendants((node, pos) => {
-        if (node.type.name === "image" && node.attrs.src === placeholderUrl) {
-          this._editor
-            ?.chain()
-            .command(({ tr }) => {
-              tr.delete(pos, pos + node.nodeSize);
-              return true;
-            })
-            .run();
-        }
-      });
-    } finally {
-      URL.revokeObjectURL(placeholderUrl);
-    }
+  private _trackFilePickerSession(input: HTMLInputElement) {
+    this._filePickerCleanup?.();
+
+    let closed = false;
+    const close = (cancelled: boolean) => {
+      if (closed) return;
+      closed = true;
+      cleanup();
+      this._dispatchFilePickerEvent("jant:file-picker-close", { cancelled });
+    };
+    const onChange = () => close(false);
+    const onCancel = () => close(true);
+    const onWindowFocus = () => {
+      globalThis.setTimeout(() => {
+        close(!(input.files && input.files.length > 0));
+      }, 0);
+    };
+    const cleanup = () => {
+      input.removeEventListener("change", onChange);
+      input.removeEventListener("cancel", onCancel as EventListener);
+      window.removeEventListener("focus", onWindowFocus);
+      if (this._filePickerCleanup === cleanup) {
+        this._filePickerCleanup = null;
+      }
+    };
+
+    this._filePickerCleanup = cleanup;
+    input.addEventListener("change", onChange, { once: true });
+    input.addEventListener("cancel", onCancel as EventListener, { once: true });
+    window.addEventListener("focus", onWindowFocus, { once: true });
+    this._dispatchFilePickerEvent("jant:file-picker-open");
   }
 
   private _isEmptyDoc(json: JSONContent): boolean {
@@ -209,16 +322,59 @@ export class JantComposeEditor extends LitElement {
     );
   }
 
+  private _normalizeDocJson(json: JSONContent | null): JSONContent | null {
+    if (!json) return null;
+    return this._isEmptyDoc(json) ? null : json;
+  }
+
+  getNormalizedBodyJson(): JSONContent | null {
+    return this._normalizeDocJson(this._bodyJson);
+  }
+
+  getEffectiveAttachedTexts(): AttachedTextItem[] {
+    return this._attachedTexts.flatMap((item) => {
+      const bodyJson = this._normalizeDocJson(item.bodyJson);
+      if (!bodyJson) return [];
+      return [
+        {
+          ...item,
+          bodyJson,
+          originalBodyJson: this._normalizeDocJson(
+            item.originalBodyJson ?? null,
+          ),
+        },
+      ];
+    });
+  }
+
+  getEffectiveAttachmentOrder(): string[] {
+    const attachedTextIds = new Set(
+      this.getEffectiveAttachedTexts().map((item) => item.clientId),
+    );
+    const attachmentIds = new Set(
+      this._attachments.map((item) => item.clientId),
+    );
+
+    return this._attachmentOrder.filter(
+      (clientId) =>
+        attachmentIds.has(clientId) || attachedTextIds.has(clientId),
+    );
+  }
+
+  private _getEffectiveRating(): number {
+    return this._showRating ? this._rating : 0;
+  }
+
   getData() {
-    const body =
-      this._bodyJson && !this._isEmptyDoc(this._bodyJson)
-        ? JSON.stringify(this._bodyJson)
-        : "";
+    const bodyJson = this.getNormalizedBodyJson();
+    const attachedTexts = this.getEffectiveAttachedTexts();
+    const attachmentOrder = this.getEffectiveAttachmentOrder();
+    const body = bodyJson ? JSON.stringify(bodyJson) : "";
     const shared = {
-      rating: this._rating,
-      attachedTexts: this._attachedTexts,
+      rating: this._getEffectiveRating(),
+      attachedTexts,
       attachments: this._attachments,
-      attachmentOrder: this._attachmentOrder,
+      attachmentOrder,
     };
 
     switch (this.format) {
@@ -271,6 +427,8 @@ export class JantComposeEditor extends LitElement {
     this._attachmentOrder = [];
     this._showAltPanel = false;
     this._altPanelIndex = 0;
+    this._showUrlValidation = false;
+    this._showLinkTitleValidation = false;
     this.closeEmojiPicker();
   }
 
@@ -299,14 +457,89 @@ export class JantComposeEditor extends LitElement {
     );
   }
 
-  focusInput() {
+  focusInput(position?: "start" | "end") {
     if (this.format === "link") {
-      this.querySelector<HTMLElement>('.compose-input[type="url"]')?.focus();
-    } else if (this.format === "quote") {
-      this.querySelector<HTMLElement>(".compose-quote-text")?.focus();
-    } else {
-      this._editor?.commands.focus();
+      this.focusUrlInput(position);
+      return;
     }
+    if (this.format === "quote") {
+      this._focusTextControl(
+        this.querySelector<HTMLTextAreaElement>(".compose-quote-text"),
+        position,
+      );
+      return;
+    }
+    if (position) {
+      this._editor?.commands.focus(position);
+      return;
+    }
+    this._editor?.commands.focus();
+  }
+
+  focusUrlInput(position?: "start" | "end") {
+    this._focusTextControl(
+      this.querySelector<HTMLInputElement>(".compose-url-input"),
+      position,
+    );
+  }
+
+  focusLinkTitleInput(position?: "start" | "end") {
+    this._focusTextControl(
+      this.querySelector<HTMLInputElement>(".compose-link-title"),
+      position,
+    );
+  }
+
+  getUrlValidationMessage(): string | null {
+    if (this.format === "note") return null;
+    if (!this._url.trim()) {
+      return this.format === "link" ? this.labels.linkUrlRequired : null;
+    }
+    return isSafeAbsoluteUrl(this._url) ? null : this.labels.urlInvalid;
+  }
+
+  getLinkTitleValidationMessage(): string | null {
+    if (this.format !== "link") return null;
+    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();
+  }
+
+  revealLinkTitleValidation(): string | null {
+    this._showLinkTitleValidation = true;
+    return this.getLinkTitleValidationMessage();
+  }
+
+  isEmojiPickerOpen(): boolean {
+    return this._showEmojiPicker;
+  }
+
+  private _focusTextControl(
+    field: HTMLInputElement | HTMLTextAreaElement | null,
+    position?: "start" | "end",
+  ) {
+    if (!field) return;
+    field.focus();
+    if (!position) return;
+    const caret = position === "end" ? field.value.length : 0;
+    field.setSelectionRange(caret, caret);
   }
 
   private _initEditor() {
@@ -320,6 +553,7 @@ export class JantComposeEditor extends LitElement {
           ? this.labels.bodyPlaceholder
           : this.labels.thoughtsPlaceholder,
       content: this._bodyJson,
+      toolbarMode: "compose",
       onUpdate: (json) => {
         this._bodyJson = json;
         this._ensureScrollBuffer();
@@ -327,6 +561,12 @@ export class JantComposeEditor extends LitElement {
       onFocus: () => {
         this._lastFocusedField = null;
       },
+      pasteMedia: {
+        shouldInsertInline: (file) => this._shouldPasteInlineImage(file),
+        onPasteFiles: (files) => {
+          this.addFiles(files);
+        },
+      },
     });
 
     // Lock editor min-height once so new lines fill existing space
@@ -384,6 +624,12 @@ export class JantComposeEditor extends LitElement {
     }
 
     if (changed.has("format") && changed.get("format") !== undefined) {
+      if (this._showUrlValidation) {
+        this._showUrlValidation = false;
+      }
+      if (this._showLinkTitleValidation) {
+        this._showLinkTitleValidation = false;
+      }
       // Format changed — recreate editor with appropriate placeholder
       this._destroyEditor();
       // Schedule init after Lit re-renders the new template
@@ -510,6 +756,7 @@ export class JantComposeEditor extends LitElement {
           bodyHtml: t.bodyHtml ?? "",
           summary: t.summary,
           mediaId: t.mediaId,
+          originalBodyJson: parsed,
         };
       });
       this._attachedTexts = texts;
@@ -539,18 +786,25 @@ export class JantComposeEditor extends LitElement {
       );
       this._attachmentOrder = [...orderedClientIds, ...remainingClientIds];
     }
+
+    this._showUrlValidation = false;
+    this._showLinkTitleValidation = false;
   }
 
   /** Updates editor content and title from fullscreen close */
-  setEditorState(json: JSONContent | null, title: string) {
+  setEditorState(json: JSONContent | null, title: string, showTitle: boolean) {
     this._bodyJson = json;
     this._title = title;
-    // Show the title field if user typed a title in fullscreen
-    if (title && this.format === "note") {
-      this._showTitle = true;
+    if (this.format === "note") {
+      this._showTitle = showTitle || title.length > 0;
     }
-    if (this._editor && json) {
-      this._editor.commands.setContent(json);
+    if (this._editor) {
+      this._editor.commands.setContent(
+        json ?? {
+          type: "doc",
+          content: [{ type: "paragraph" }],
+        },
+      );
     }
   }
 
@@ -627,57 +881,41 @@ export class JantComposeEditor extends LitElement {
     if (!list || this.#sortable || this._attachmentOrder.length <= 1) return;
 
     this.#sortable = Sortable.create(list, {
-      animation: 180,
-      bubbleScroll: false,
+      ...responsiveSortableOptions,
       chosenClass: "compose-attachment-chosen",
       direction: "horizontal",
       dragClass: "compose-attachment-drag",
-      fallbackTolerance: 4,
       filter:
         "button, a, input, textarea, select, option, [contenteditable='true']",
-      forceAutoScrollFallback: true,
       ghostClass: "compose-attachment-ghost",
       handle: "[data-attachment-sortable]",
       preventOnFilter: false,
       scroll: list,
-      scrollSensitivity: 56,
-      scrollSpeed: 18,
       onChoose: () => {
-        list.dataset.dragging = "true";
+        setSortableDraggingState(list, true);
       },
       onStart: (evt) => {
-        this.#revertNextSibling = evt.item.nextSibling;
+        this.#revertNextSibling = captureSortableRevertNextSibling(evt);
       },
       onUnchoose: () => {
-        delete list.dataset.dragging;
+        setSortableDraggingState(list, false);
       },
       onEnd: (evt) => {
-        const els = [
-          ...list.querySelectorAll<HTMLElement>("[data-attachment-id]"),
-        ];
-        const orderedIds = els
-          .map((el) => el.dataset.attachmentId)
-          .filter((id): id is string => id !== undefined);
-
-        const { item, oldIndex, newIndex } = evt;
-        if (oldIndex != null && newIndex != null && oldIndex !== newIndex) {
-          item.parentNode?.removeChild(item);
-          if (this.#revertNextSibling) {
-            list.insertBefore(item, this.#revertNextSibling);
-          } else {
-            list.appendChild(item);
-          }
-        }
+        const orderedIds = readSortableDataIds(
+          list,
+          "[data-attachment-id]",
+          "attachmentId",
+        );
+        revertSortableDomMove(list, evt, this.#revertNextSibling);
         this.#revertNextSibling = null;
-        delete list.dataset.dragging;
+        setSortableDraggingState(list, false);
 
         this.#sortable?.destroy();
         this.#sortable = null;
 
         if (orderedIds.length === this._attachmentOrder.length) {
           this._attachmentOrder = orderedIds;
-          const movedId =
-            evt.newIndex != null ? orderedIds[evt.newIndex] : undefined;
+          const { movedId } = getSortableMove(orderedIds, evt.newIndex);
           if (movedId) {
             this._suppressAttachedTextOpenUntil = Date.now() + 250;
             this.#scrollAttachmentIntoView(movedId);
@@ -731,13 +969,14 @@ export class JantComposeEditor extends LitElement {
     bodyJson: JSONContent | null,
     bodyHtml?: string,
   ) {
-    const plainText = this._extractPlainText(bodyJson);
+    const normalizedBodyJson = this._normalizeDocJson(bodyJson);
+    const plainText = this._extractPlainText(normalizedBodyJson);
     this._attachedTexts = this._attachedTexts.map((item, i) =>
       i === index
         ? {
             ...item,
-            bodyJson,
-            bodyHtml: bodyHtml ?? "",
+            bodyJson: normalizedBodyJson,
+            bodyHtml: normalizedBodyJson ? (bodyHtml ?? "") : "",
             summary: this._computeSummary(plainText),
           }
         : item,
@@ -755,8 +994,9 @@ export class JantComposeEditor extends LitElement {
   }
 
   private _hasAttachedTextContent(bodyJson: JSONContent | null): boolean {
-    if (!bodyJson) return false;
-    return this._extractPlainText(bodyJson).trim().length > 0;
+    const normalizedBodyJson = this._normalizeDocJson(bodyJson);
+    if (!normalizedBodyJson) return false;
+    return this._extractPlainText(normalizedBodyJson).trim().length > 0;
   }
 
   private _extractPlainText(json: JSONContent | null): string {
@@ -787,6 +1027,20 @@ export class JantComposeEditor extends LitElement {
     this._rating = this._rating === star ? 0 : star;
   }
 
+  private _shouldPasteInlineImage(file: File): boolean {
+    if (!file.type.startsWith("image/")) return false;
+
+    if (this.format === "quote") {
+      return false;
+    }
+
+    if (this.format === "note") {
+      return this._showTitle && this._title.trim().length > 0;
+    }
+
+    return this._title.trim().length > 0;
+  }
+
   private _openFilePicker() {
     if (!this._fileInput) {
       this._fileInput = document.createElement("input");
@@ -800,16 +1054,24 @@ export class JantComposeEditor extends LitElement {
       this.appendChild(this._fileInput);
     }
     this._fileInput.value = "";
+    this._trackFilePickerSession(this._fileInput);
     this._fileInput.click();
   }
 
   private _handleFilesSelected() {
-    if (!this._fileInput?.files?.length) return;
+    const files = this._fileInput?.files;
+    if (!files || files.length === 0) return;
+    this.addFiles(files);
+  }
+
+  addFiles(files: Iterable<File>) {
+    const selectedFiles = Array.from(files);
+    if (selectedFiles.length === 0) return;
 
     const newAttachments: ComposeAttachment[] = [];
-    const files: { file: File; clientId: string }[] = [];
+    const uploadQueue: { file: File; clientId: string }[] = [];
 
-    for (const file of Array.from(this._fileInput.files)) {
+    for (const file of selectedFiles) {
       // Validate before creating attachment preview
       const error = validateUploadFile(file, {
         maxFileSizeMB: this.uploadMaxFileSize,
@@ -833,7 +1095,7 @@ export class JantComposeEditor extends LitElement {
         summary: null,
         chars: null,
       });
-      files.push({ file, clientId });
+      uploadQueue.push({ file, clientId });
     }
 
     if (newAttachments.length === 0) return;
@@ -861,7 +1123,7 @@ export class JantComposeEditor extends LitElement {
     this.dispatchEvent(
       new CustomEvent("jant:files-selected", {
         bubbles: true,
-        detail: { files },
+        detail: { files: uploadQueue },
       }),
     );
   }
@@ -961,11 +1223,28 @@ export class JantComposeEditor extends LitElement {
     }
   }
 
-  closeEmojiPicker() {
-    if (!this._showEmojiPicker) return;
+  closeEmojiPicker(options?: { restoreFocus?: boolean }) {
+    if (!this._showEmojiPicker) {
+      if (options?.restoreFocus) {
+        this._restoreEmojiFocus();
+      }
+      return;
+    }
     this._showEmojiPicker = false;
     this._emojiContainer?.remove();
     document.removeEventListener("click", this._onDocClickBound);
+    if (options?.restoreFocus) {
+      this._restoreEmojiFocus();
+    }
+  }
+
+  private _restoreEmojiFocus() {
+    const field = this._lastFocusedField;
+    if (field && this.contains(field) && !field.disabled) {
+      this._focusTextControl(field, "end");
+      return;
+    }
+    this.focusInput("end");
   }
 
   private _onDocumentClick(e: Event) {
@@ -1157,27 +1436,67 @@ export class JantComposeEditor extends LitElement {
   }
 
   private _renderLinkFields() {
+    const urlError = this._showUrlValidation
+      ? this._getInlineUrlValidationMessage()
+      : null;
+    const titleError = this._showLinkTitleValidation
+      ? this._getInlineLinkTitleValidationMessage()
+      : null;
+
     return html`
       <div class="compose-field-enter">
-        <div class="compose-link-url-wrap">
+        <div
+          class=${classMap({
+            "compose-link-url-wrap": true,
+            "compose-link-url-wrap-invalid": Boolean(urlError),
+          })}
+        >
           <span class="text-base opacity-50 shrink-0">🔗</span>
           <input
             type="url"
             .value=${this._url}
             @input=${(e: Event) => this._onInput("_url", e)}
             @focus=${(e: Event) => this._onFieldFocus(e)}
-            class="compose-input text-[0.9rem]"
+            @blur=${() => {
+              this._showUrlValidation = true;
+            }}
+            class="compose-input compose-url-input text-[0.9rem]"
             placeholder=${this.labels.urlPlaceholder}
+            aria-invalid=${urlError ? "true" : "false"}
+            aria-describedby=${ifDefined(
+              urlError ? this._urlStatusId : undefined,
+            )}
           />
         </div>
+        ${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}
           @input=${(e: Event) => this._onInput("_title", e)}
           @focus=${(e: Event) => this._onFieldFocus(e)}
+          @blur=${() => {
+            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}
         <div class="compose-divider"></div>
         <div class="compose-tiptap-body compose-tiptap-thoughts"></div>
       </div>
@@ -1185,6 +1504,10 @@ export class JantComposeEditor extends LitElement {
   }
 
   private _renderQuoteFields() {
+    const urlError = this._showUrlValidation
+      ? this.getUrlValidationMessage()
+      : null;
+
     return html`
       <div class="compose-field-enter">
         <div class="compose-quote-wrap">
@@ -1195,7 +1518,7 @@ export class JantComposeEditor extends LitElement {
             @focus=${(e: Event) => this._onFieldFocus(e)}
             class="compose-input compose-quote-text"
             placeholder=${this.labels.quotePlaceholder}
-            rows="3"
+            rows="5"
           ></textarea>
         </div>
         <div class="compose-quote-author-row">
@@ -1215,12 +1538,30 @@ export class JantComposeEditor extends LitElement {
             .value=${this._url}
             @input=${(e: Event) => this._onInput("_url", e)}
             @focus=${(e: Event) => this._onFieldFocus(e)}
-            class="compose-input text-[0.78rem]"
+            @blur=${() => {
+              this._showUrlValidation = true;
+            }}
+            class="compose-input compose-url-input text-[0.78rem]"
             placeholder=${this.labels.sourcePlaceholder}
+            aria-invalid=${urlError ? "true" : "false"}
+            aria-describedby=${ifDefined(
+              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}
         </div>
         <div class="compose-divider"></div>
-        <div class="compose-tiptap-body compose-tiptap-thoughts"></div>
+        <div
+          class="compose-tiptap-body compose-tiptap-thoughts compose-tiptap-thoughts-quote"
+        ></div>
       </div>
     `;
   }
@@ -1394,12 +1735,34 @@ export class JantComposeEditor extends LitElement {
             </button>
           `
         : nothing}
+      ${this._renderAttachmentRemoveButton((e: Event) => {
+        e.stopPropagation();
+        this._removeAttachment(index);
+      })}
+    `;
+  }
+
+  private _renderAttachmentRemoveButton(onClick: (e: Event) => void) {
+    return html`
       <button
         type="button"
         class="compose-attachment-remove"
-        @click=${() => this._removeAttachment(index)}
+        title=${this.labels.removeAttachment}
+        aria-label=${this.labels.removeAttachment}
+        @click=${onClick}
       >
-        ✕
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.9"
+          stroke-linecap="round"
+        >
+          <path d="M3.5 3.5 10.5 10.5" />
+          <path d="M10.5 3.5 3.5 10.5" />
+        </svg>
       </button>
     `;
   }
@@ -1430,16 +1793,10 @@ export class JantComposeEditor extends LitElement {
                 >`
               : nothing}
           </div>
-          <button
-            type="button"
-            class="compose-attachment-remove"
-            @click=${(e: Event) => {
-              e.stopPropagation();
-              this._removeAttachedText(index);
-            }}
-          >
-            ✕
-          </button>
+          ${this._renderAttachmentRemoveButton((e: Event) => {
+            e.stopPropagation();
+            this._removeAttachedText(index);
+          })}
         </div>
       </div>
     `;
@@ -1575,7 +1932,6 @@ export class JantComposeEditor extends LitElement {
     const hasAttached = this._attachedTexts.length > 0;
     return html`
       <div class="compose-tools-row">
-        <!-- Media / Add -->
         <button
           type="button"
           class=${classMap({
@@ -1585,22 +1941,7 @@ export class JantComposeEditor extends LitElement {
           title=${this._attachments.length > 0 ? "" : this.labels.media}
           @click=${() => this._openFilePicker()}
         >
-          <svg
-            class="icon-fine"
-            width="18"
-            height="18"
-            viewBox="0 0 18 18"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.4"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <rect x="2" y="3" width="14" height="12" rx="2.5" />
-            <circle cx="6.5" cy="7.5" r="1.5" />
-            <path d="M2 13l4-4c.6-.6 1.4-.6 2 0l4 4" />
-            <path d="M11 11l1.5-1.5c.6-.6 1.4-.6 2 0L16 11" />
-          </svg>
+          ${renderComposeToolbarIcon(COMPOSE_TOOLBAR_ICONS.media)}
           ${this._attachments.length > 0
             ? html`<span class="compose-tool-label"
                 >${this.labels.addMore}</span
@@ -1608,7 +1949,6 @@ export class JantComposeEditor extends LitElement {
             : nothing}
         </button>
 
-        <!-- Attached Text -->
         <button
           type="button"
           class=${classMap({
@@ -1618,21 +1958,7 @@ export class JantComposeEditor extends LitElement {
           title=${hasAttached ? "" : this.labels.attachedText}
           @click=${() => this._openAttachedText()}
         >
-          <svg
-            class="icon-fine"
-            width="18"
-            height="18"
-            viewBox="0 0 18 18"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.3"
-            stroke-linecap="round"
-          >
-            <rect x="3" y="2" width="12" height="14" rx="2" />
-            <line x1="6" y1="6" x2="12" y2="6" />
-            <line x1="6" y1="9" x2="12" y2="9" />
-            <line x1="6" y1="12" x2="9.5" y2="12" />
-          </svg>
+          ${renderComposeToolbarIcon(COMPOSE_TOOLBAR_ICONS.attachedText)}
           ${hasAttached
             ? html`<span class="compose-tool-label"
                 >${this.labels.addMore}</span
@@ -1640,155 +1966,84 @@ export class JantComposeEditor extends LitElement {
             : nothing}
         </button>
 
-        <!-- Rate -->
         <button
           type="button"
           class=${classMap({
             "compose-tool-btn": true,
-            "compose-tool-btn-active": this._showRating,
+            "compose-emoji-btn": true,
+            "compose-tool-btn-active": this._showEmojiPicker,
           })}
-          title=${this.labels.rate}
-          @click=${() => {
-            this._showRating = !this._showRating;
-          }}
+          title=${this.labels.emoji}
+          @click=${() => this._toggleEmojiPicker()}
         >
-          <svg
-            class="icon-fine"
-            width="18"
-            height="18"
-            viewBox="0 0 24 24"
-            fill="none"
-          >
-            <defs>
-              <clipPath id="half-left">
-                <rect x="0" y="0" width="12" height="24" />
-              </clipPath>
-            </defs>
-            <polygon
-              points="12 2 14.8 9.2 22.5 9.7 16.8 14.8 18.8 22.3 12 18.2 5.2 22.3 7.2 14.8 1.5 9.7 9.2 9.2"
-              fill="currentColor"
-              opacity="0.45"
-              clip-path="url(#half-left)"
-            />
-            <polygon
-              points="12 2 14.8 9.2 22.5 9.7 16.8 14.8 18.8 22.3 12 18.2 5.2 22.3 7.2 14.8 1.5 9.7 9.2 9.2"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2.4"
-              stroke-linejoin="round"
-            />
-          </svg>
+          ${renderComposeToolbarIcon(COMPOSE_TOOLBAR_ICONS.emoji)}
         </button>
 
-        <!-- Emoji -->
+        <div class="compose-tool-sep"></div>
+
         <button
           type="button"
           class=${classMap({
             "compose-tool-btn": true,
-            "compose-emoji-btn": true,
-            "compose-tool-btn-active": this._showEmojiPicker,
+            "compose-tool-btn-active": this._showRating,
           })}
-          title=${this.labels.emoji}
-          @click=${() => this._toggleEmojiPicker()}
+          title=${this.labels.rate}
+          @click=${() => {
+            this._showRating = !this._showRating;
+          }}
         >
-          <svg
-            class="icon-fine"
-            width="18"
-            height="18"
-            viewBox="0 0 18 18"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.4"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <circle cx="9" cy="9" r="7" />
-            <path d="M6 10.5c.5 1.2 1.5 2 3 2s2.5-.8 3-2" />
-            <circle cx="6.5" cy="7" r="0.5" fill="currentColor" stroke="none" />
-            <circle
-              cx="11.5"
-              cy="7"
-              r="0.5"
-              fill="currentColor"
-              stroke="none"
-            />
-          </svg>
+          ${renderComposeToolbarIcon(COMPOSE_TOOLBAR_ICONS.rate)}
         </button>
 
-        <!-- Title toggle (Note only) -->
         ${this.format === "note"
           ? html`
-              <div class="flex items-center gap-0.5">
-                <div class="compose-tool-sep"></div>
+              <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">
                 <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();
-                      });
-                    }
-                  }}
+                  class="compose-tool-btn compose-tool-btn-view"
+                  title=${this.labels.fullscreen}
+                  aria-label=${this.labels.fullscreen}
+                  @click=${() => this.openFullscreen()}
                 >
-                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
-                    <text
-                      x="3.5"
-                      y="14"
-                      font-family="serif"
-                      font-size="14"
-                      font-weight="400"
-                      fill="currentColor"
-                    >
-                      T
-                    </text>
-                  </svg>
+                  ${renderComposeToolbarIcon(COMPOSE_TOOLBAR_ICONS.fullscreen)}
                 </button>
               </div>
             `
           : nothing}
-
-        <div class="flex-1"></div>
-
-        <!-- Expand to fullscreen -->
-        <button
-          type="button"
-          class="compose-tool-btn"
-          @click=${() => this._openFullscreen()}
-        >
-          <svg
-            class="icon-fine"
-            width="18"
-            height="18"
-            viewBox="0 0 18 18"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.4"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <polyline points="6 2 2 2 2 6" />
-            <polyline points="12 16 16 16 16 12" />
-            <line x1="2" y1="2" x2="7" y2="7" />
-            <line x1="16" y1="16" x2="11" y2="11" />
-          </svg>
-        </button>
       </div>
     `;
   }
 
-  private _openFullscreen() {
+  openFullscreen() {
+    if (this.format !== "note") return;
     const state = this.getEditorState();
     this.dispatchEvent(
-      new CustomEvent("jant:fullscreen-open", {
+      new CustomEvent<ComposeFullscreenOpenDetail>("jant:fullscreen-open", {
         bubbles: true,
         detail: { ...state, labels: this.labels },
       }),