@jant/core 0.3.36 → 0.3.37

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

@@ -10,11 +10,14 @@
 
 import { LitElement, html, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 import type { Editor, JSONContent } from "@tiptap/core";
+import Sortable from "sortablejs";
 import type {
   ComposeFormat,
   ComposeLabels,
   ComposeAttachment,
+  AttachedTextItem,
 } from "./compose-types.js";
 import {
   UPLOAD_ACCEPT,
@@ -38,9 +41,9 @@ export class JantComposeEditor extends LitElement {
     _rating: { state: true },
     _showTitle: { state: true },
     _showRating: { state: true },
-    _attachedText: { state: true },
-    _showAttachedText: { state: true },
+    _attachedTexts: { state: true },
     _attachments: { state: true },
+    _attachmentOrder: { state: true },
     _showAltPanel: { state: true },
     _altPanelIndex: { state: true },
     _showEmojiPicker: { state: true },
@@ -57,9 +60,9 @@ export class JantComposeEditor extends LitElement {
   declare _rating: number;
   declare _showTitle: boolean;
   declare _showRating: boolean;
-  declare _attachedText: string;
-  declare _showAttachedText: boolean;
+  declare _attachedTexts: AttachedTextItem[];
   declare _attachments: ComposeAttachment[];
+  declare _attachmentOrder: string[];
   declare _showAltPanel: boolean;
   declare _altPanelIndex: number;
   declare _showEmojiPicker: boolean;
@@ -71,6 +74,10 @@ export class JantComposeEditor extends LitElement {
   private _emojiPickerEl: HTMLElement | null = null;
   private _emojiContainer: HTMLElement | null = null;
   private _onDocClickBound = this._onDocumentClick.bind(this);
+  private _scrollBufferApplied = false;
+  private _suppressAttachedTextOpenUntil = 0;
+  #sortable: { destroy(): void } | null = null;
+  #revertNextSibling: globalThis.Node | null = null;
 
   createRenderRoot() {
     return this;
@@ -89,9 +96,9 @@ export class JantComposeEditor extends LitElement {
     this._rating = 0;
     this._showTitle = false;
     this._showRating = false;
-    this._attachedText = "";
-    this._showAttachedText = false;
+    this._attachedTexts = [];
     this._attachments = [];
+    this._attachmentOrder = [];
     this._showAltPanel = false;
     this._altPanelIndex = 0;
     this._showEmojiPicker = false;
@@ -106,6 +113,8 @@ export class JantComposeEditor extends LitElement {
     super.disconnectedCallback();
     this._editor?.destroy();
     this._editor = null;
+    this.#sortable?.destroy();
+    this.#sortable = null;
     document.removeEventListener("jant:slash-image", this._onSlashImage);
     document.removeEventListener("click", this._onDocClickBound, true);
     this._emojiContainer?.remove();
@@ -191,12 +200,25 @@ export class JantComposeEditor extends LitElement {
     }
   }
 
+  private _isEmptyDoc(json: JSONContent): boolean {
+    if (!json.content || json.content.length === 0) return true;
+    return json.content.every(
+      (node) =>
+        node.type === "paragraph" &&
+        (!node.content || node.content.length === 0),
+    );
+  }
+
   getData() {
-    const body = this._bodyJson ? JSON.stringify(this._bodyJson) : "";
+    const body =
+      this._bodyJson && !this._isEmptyDoc(this._bodyJson)
+        ? JSON.stringify(this._bodyJson)
+        : "";
     const shared = {
       rating: this._rating,
-      attachedText: this._attachedText,
+      attachedTexts: this._attachedTexts,
       attachments: this._attachments,
+      attachmentOrder: this._attachmentOrder,
     };
 
     switch (this.format) {
@@ -240,13 +262,13 @@ export class JantComposeEditor extends LitElement {
     this._rating = 0;
     this._showTitle = false;
     this._showRating = false;
-    this._attachedText = "";
-    this._showAttachedText = false;
+    this._attachedTexts = [];
     // Revoke preview URLs before clearing
     for (const a of this._attachments) {
       URL.revokeObjectURL(a.previewUrl);
     }
     this._attachments = [];
+    this._attachmentOrder = [];
     this._showAltPanel = false;
     this._altPanelIndex = 0;
     this.closeEmojiPicker();
@@ -263,6 +285,20 @@ export class JantComposeEditor extends LitElement {
     );
   }
 
+  updateAttachmentPreview(clientId: string, file: File) {
+    this._attachments = this._attachments.map((a) => {
+      if (a.clientId !== clientId) return a;
+      URL.revokeObjectURL(a.previewUrl);
+      return { ...a, file, previewUrl: URL.createObjectURL(file) };
+    });
+  }
+
+  updateAttachmentProgress(clientId: string, progress: number) {
+    this._attachments = this._attachments.map((a) =>
+      a.clientId === clientId ? { ...a, progress } : a,
+    );
+  }
+
   focusInput() {
     if (this.format === "link") {
       this.querySelector<HTMLElement>('.compose-input[type="url"]')?.focus();
@@ -286,11 +322,38 @@ export class JantComposeEditor extends LitElement {
       content: this._bodyJson,
       onUpdate: (json) => {
         this._bodyJson = json;
+        this._ensureScrollBuffer();
       },
       onFocus: () => {
         this._lastFocusedField = null;
       },
     });
+
+    // Lock editor min-height once so new lines fill existing space
+    // instead of growing the dialog line-by-line.
+    this._scrollBufferApplied = false;
+    const dom = this._editor.view.dom as HTMLElement;
+    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 = "80px";
+      this._scrollBufferApplied = true;
+    }
   }
 
   private _destroyEditor() {
@@ -298,6 +361,20 @@ export class JantComposeEditor extends LitElement {
     this._editor = null;
   }
 
+  /** Content-relevant properties that trigger a change event for draft auto-save */
+  private static _CONTENT_PROPS = new Set([
+    "_title",
+    "_bodyJson",
+    "_url",
+    "_quoteText",
+    "_quoteAuthor",
+    "_rating",
+    "_showTitle",
+    "_showRating",
+    "_attachedTexts",
+    "_attachmentOrder",
+  ]);
+
   protected updated(changed: Map<string, unknown>) {
     super.updated(changed);
 
@@ -312,6 +389,29 @@ export class JantComposeEditor extends LitElement {
       // Schedule init after Lit re-renders the new template
       this.updateComplete.then(() => this._initEditor());
     }
+
+    if (
+      changed.has("_attachmentOrder") ||
+      changed.has("_attachments") ||
+      changed.has("_attachedTexts")
+    ) {
+      if (this._attachmentOrder.length > 1) {
+        this.#initSortable();
+      } else {
+        this.#sortable?.destroy();
+        this.#sortable = null;
+      }
+    }
+
+    // Notify parent dialog of content changes for draft auto-save
+    for (const key of changed.keys()) {
+      if (JantComposeEditor._CONTENT_PROPS.has(key as string)) {
+        this.dispatchEvent(
+          new Event("jant:compose-content-changed", { bubbles: true }),
+        );
+        break;
+      }
+    }
   }
 
   /** Returns Tiptap editor content and title for fullscreen handoff */
@@ -323,6 +423,124 @@ export class JantComposeEditor extends LitElement {
     };
   }
 
+  /** Pre-fill all fields for edit mode or draft restore */
+  populate(data: {
+    format: string;
+    title?: string;
+    bodyJson?: string;
+    url?: string;
+    quoteText?: string;
+    quoteAuthor?: string;
+    rating?: number;
+    showTitle?: boolean;
+    showRating?: boolean;
+    media?: Array<{
+      id: string;
+      previewUrl: string;
+      alt?: string;
+      mimeType: string;
+      originalName?: string;
+      summary?: string;
+      chars?: number;
+    }>;
+    textAttachments?: Array<{
+      clientId?: string;
+      bodyJson: string;
+      bodyHtml?: string;
+      summary: string;
+      mediaId?: string;
+    }>;
+    attachmentOrder?: string[];
+  }) {
+    if (data.title) this._title = data.title;
+    if (data.url) this._url = data.url;
+    if (data.quoteText) this._quoteText = data.quoteText;
+    if (data.quoteAuthor) this._quoteAuthor = data.quoteAuthor;
+    if (data.rating && data.rating > 0) {
+      this._rating = data.rating;
+      this._showRating = true;
+    }
+    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;
+
+    // Parse body JSON and set editor content
+    if (data.bodyJson) {
+      try {
+        const parsed = JSON.parse(data.bodyJson) as JSONContent;
+        this._bodyJson = parsed;
+        if (this._editor) {
+          this._editor.commands.setContent(parsed);
+        }
+      } catch {
+        // Body is not valid JSON — ignore
+      }
+    }
+
+    // Convert media attachments to ComposeAttachment[] with status "done"
+    if (data.media?.length) {
+      const attachments = data.media.map((m) => ({
+        clientId: crypto.randomUUID(),
+        file: new File([], m.originalName ?? "existing", { type: m.mimeType }),
+        previewUrl: m.previewUrl,
+        status: "done" as const,
+        progress: null,
+        mediaId: m.id,
+        alt: m.alt ?? "",
+        error: null,
+        summary: m.summary ?? null,
+        chars: m.chars ?? null,
+      }));
+      this._attachments = attachments;
+      this._attachmentOrder = attachments.map((a) => a.clientId);
+    }
+
+    // Restore attached texts from server data
+    if (data.textAttachments?.length) {
+      const texts: AttachedTextItem[] = data.textAttachments.map((t) => {
+        let parsed: JSONContent | null = null;
+        try {
+          parsed = JSON.parse(t.bodyJson) as JSONContent;
+        } catch {
+          // Invalid JSON — leave as null
+        }
+        return {
+          clientId: t.clientId ?? crypto.randomUUID(),
+          bodyJson: parsed,
+          bodyHtml: t.bodyHtml ?? "",
+          summary: t.summary,
+          mediaId: t.mediaId,
+        };
+      });
+      this._attachedTexts = texts;
+      this._attachmentOrder = [
+        ...this._attachmentOrder,
+        ...texts.map((t) => t.clientId),
+      ];
+    }
+
+    if (data.attachmentOrder?.length) {
+      const orderedClientIds = data.attachmentOrder
+        .map((attachmentId) => {
+          const mediaClientId = this._attachments.find(
+            (item) =>
+              item.mediaId === attachmentId || item.clientId === attachmentId,
+          )?.clientId;
+          if (mediaClientId) return mediaClientId;
+          return this._attachedTexts.find(
+            (item) =>
+              item.mediaId === attachmentId || item.clientId === attachmentId,
+          )?.clientId;
+        })
+        .filter((clientId): clientId is string => clientId !== undefined);
+
+      const remainingClientIds = this._attachmentOrder.filter(
+        (clientId) => !orderedClientIds.includes(clientId),
+      );
+      this._attachmentOrder = [...orderedClientIds, ...remainingClientIds];
+    }
+  }
+
   /** Updates editor content and title from fullscreen close */
   setEditorState(json: JSONContent | null, title: string) {
     this._bodyJson = json;
@@ -336,28 +554,226 @@ export class JantComposeEditor extends LitElement {
     }
   }
 
+  private static SUMMARY_LENGTH = 100;
+
+  private _computeSummary(text: string): string {
+    const plain = text.replace(/\s+/g, " ").trim();
+    if (plain.length <= JantComposeEditor.SUMMARY_LENGTH) return plain;
+    return plain.slice(0, JantComposeEditor.SUMMARY_LENGTH) + "…";
+  }
+
   private _openAttachedText() {
-    this._showAttachedText = true;
+    const item: AttachedTextItem = {
+      clientId: crypto.randomUUID(),
+      bodyJson: null,
+      bodyHtml: "",
+      summary: "",
+    };
+    this._attachedTexts = [...this._attachedTexts, item];
+    this._attachmentOrder = [...this._attachmentOrder, item.clientId];
+    const index = this._attachedTexts.length - 1;
     this.dispatchEvent(
-      new CustomEvent("jant:attached-panel-open", { bubbles: true }),
+      new CustomEvent("jant:attached-panel-open", {
+        bubbles: true,
+        detail: { index },
+      }),
     );
   }
 
-  updateAttachedText(value: string) {
-    this._attachedText = value;
+  private _moveAttachment(clientId: string, direction: -1 | 1) {
+    const index = this._attachmentOrder.indexOf(clientId);
+    const nextIndex = index + direction;
+    if (
+      index === -1 ||
+      nextIndex < 0 ||
+      nextIndex >= this._attachmentOrder.length
+    ) {
+      return;
+    }
+
+    const nextOrder = [...this._attachmentOrder];
+    const [item] = nextOrder.splice(index, 1);
+    if (!item) return;
+    nextOrder.splice(nextIndex, 0, item);
+    this._attachmentOrder = nextOrder;
+    this.#scrollAttachmentIntoView(clientId);
   }
 
-  closeAttachedPanel() {
-    this._showAttachedText = false;
+  private _handleAttachmentKeydown(
+    clientId: string,
+    e: globalThis.KeyboardEvent,
+    onActivate?: () => void,
+  ) {
+    if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      e.preventDefault();
+      this._moveAttachment(clientId, -1);
+      return;
+    }
+
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      e.preventDefault();
+      this._moveAttachment(clientId, 1);
+      return;
+    }
+
+    if (onActivate && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      onActivate();
+    }
+  }
+
+  #initSortable() {
+    const list = this.querySelector<HTMLElement>("[data-attachment-list]");
+    if (!list || this.#sortable || this._attachmentOrder.length <= 1) return;
+
+    this.#sortable = Sortable.create(list, {
+      animation: 180,
+      bubbleScroll: false,
+      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";
+      },
+      onStart: (evt) => {
+        this.#revertNextSibling = evt.item.nextSibling;
+      },
+      onUnchoose: () => {
+        delete list.dataset.dragging;
+      },
+      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);
+          }
+        }
+        this.#revertNextSibling = null;
+        delete list.dataset.dragging;
+
+        this.#sortable?.destroy();
+        this.#sortable = null;
+
+        if (orderedIds.length === this._attachmentOrder.length) {
+          this._attachmentOrder = orderedIds;
+          const movedId =
+            evt.newIndex != null ? orderedIds[evt.newIndex] : undefined;
+          if (movedId) {
+            this._suppressAttachedTextOpenUntil = Date.now() + 250;
+            this.#scrollAttachmentIntoView(movedId);
+          }
+        }
+      },
+    });
+  }
+
+  #scrollAttachmentIntoView(clientId: string) {
+    void this.updateComplete.then(() => {
+      const target = this.querySelector<HTMLElement>(
+        `[data-attachment-id="${clientId}"]`,
+      );
+      target?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "nearest",
+      });
+    });
+  }
+
+  private _maybeEditAttachedText(index: number) {
+    if (Date.now() < this._suppressAttachedTextOpenUntil) {
+      return;
+    }
+    this._editAttachedText(index);
+  }
+
+  private _editAttachedText(index: number) {
+    this.dispatchEvent(
+      new CustomEvent("jant:attached-panel-open", {
+        bubbles: true,
+        detail: { index },
+      }),
+    );
+  }
+
+  private _removeAttachedText(index: number) {
+    const removed = this._attachedTexts[index];
+    this._attachedTexts = this._attachedTexts.filter((_, i) => i !== index);
+    if (removed) {
+      this._attachmentOrder = this._attachmentOrder.filter(
+        (id) => id !== removed.clientId,
+      );
+    }
+  }
+
+  updateAttachedText(
+    index: number,
+    bodyJson: JSONContent | null,
+    bodyHtml?: string,
+  ) {
+    const plainText = this._extractPlainText(bodyJson);
+    this._attachedTexts = this._attachedTexts.map((item, i) =>
+      i === index
+        ? {
+            ...item,
+            bodyJson,
+            bodyHtml: bodyHtml ?? "",
+            summary: this._computeSummary(plainText),
+          }
+        : item,
+    );
+  }
+
+  closeAttachedPanel(index: number) {
+    const item = this._attachedTexts[index];
+    if (item && !this._hasAttachedTextContent(item.bodyJson)) {
+      this._attachedTexts = this._attachedTexts.filter((_, i) => i !== index);
+      this._attachmentOrder = this._attachmentOrder.filter(
+        (id) => id !== item.clientId,
+      );
+    }
+  }
+
+  private _hasAttachedTextContent(bodyJson: JSONContent | null): boolean {
+    if (!bodyJson) return false;
+    return this._extractPlainText(bodyJson).trim().length > 0;
+  }
+
+  private _extractPlainText(json: JSONContent | null): string {
+    if (!json) return "";
+    let text = "";
+    const walk = (node: JSONContent) => {
+      if (node.text) text += node.text;
+      if (node.content) node.content.forEach(walk);
+    };
+    walk(json);
+    return text;
   }
 
   private _onInput(field: string, e: Event) {
     const target = e.target as HTMLInputElement | HTMLTextAreaElement;
     (this as Record<string, unknown>)[field] = target.value;
-    if (
-      target.tagName === "TEXTAREA" &&
-      !target.classList.contains("compose-attached-textarea")
-    ) {
+    if (target.tagName === "TEXTAREA") {
       this._autoResize(target as HTMLElement);
     }
   }
@@ -410,9 +826,12 @@ export class JantComposeEditor extends LitElement {
         file,
         previewUrl,
         status: "pending",
+        progress: null,
         mediaId: null,
         alt: "",
         error: null,
+        summary: null,
+        chars: null,
       });
       files.push({ file, clientId });
     }
@@ -420,6 +839,24 @@ export class JantComposeEditor extends LitElement {
     if (newAttachments.length === 0) return;
 
     this._attachments = [...this._attachments, ...newAttachments];
+    this._attachmentOrder = [
+      ...this._attachmentOrder,
+      ...newAttachments.map((a) => a.clientId),
+    ];
+
+    // Extract summaries and char counts for text-category files asynchronously
+    for (const att of newAttachments) {
+      const category = getMediaCategory(att.file.type);
+      if (category === "text") {
+        att.file.text().then((content) => {
+          const summary = this._computeSummary(content);
+          const chars = content.length;
+          this._attachments = this._attachments.map((a) =>
+            a.clientId === att.clientId ? { ...a, summary, chars } : a,
+          );
+        });
+      }
+    }
 
     this.dispatchEvent(
       new CustomEvent("jant:files-selected", {
@@ -429,6 +866,11 @@ export class JantComposeEditor extends LitElement {
     );
   }
 
+  removeAttachment(clientId: string) {
+    const index = this._attachments.findIndex((a) => a.clientId === clientId);
+    if (index !== -1) this._removeAttachment(index);
+  }
+
   private _removeAttachment(index: number) {
     const attachment = this._attachments[index];
     if (attachment) {
@@ -443,6 +885,11 @@ export class JantComposeEditor extends LitElement {
         }),
       );
     }
+    if (attachment) {
+      this._attachmentOrder = this._attachmentOrder.filter(
+        (id) => id !== attachment.clientId,
+      );
+    }
     this._attachments = this._attachments.filter((_, i) => i !== index);
     // Close alt panel if it was showing the removed item
     if (this._showAltPanel && this._altPanelIndex === index) {
@@ -462,7 +909,7 @@ export class JantComposeEditor extends LitElement {
     // Reset failed attachments to pending
     this._attachments = this._attachments.map((a) =>
       a.status === "error"
-        ? { ...a, status: "pending" as const, error: null }
+        ? { ...a, status: "pending" as const, progress: null, error: null }
         : a,
     );
 
@@ -619,7 +1066,7 @@ export class JantComposeEditor extends LitElement {
 
   // ── Helpers ──────────────────────────────────────────────────────
 
-  private _getCategory(a: ComposeAttachment): MediaCategory | null {
+  private _getCategory(a: ComposeAttachment): MediaCategory {
     return getMediaCategory(a.file.type);
   }
 
@@ -629,6 +1076,47 @@ export class JantComposeEditor extends LitElement {
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   }
 
+  private _formatChars(count: number): string {
+    if (count < 1000) return `${count} chars`;
+    if (count < 1_000_000) {
+      return `${parseFloat((count / 1000).toFixed(1))}k chars`;
+    }
+    return `${parseFloat((count / 1_000_000).toFixed(1))}M chars`;
+  }
+
+  private _renderFileIcon(mimeType: string, size: number) {
+    const doc = `<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>`;
+
+    let inner: string;
+    if (mimeType === "application/pdf") {
+      inner = `<text x="12" y="16.5" text-anchor="middle" fill="currentColor" stroke="none" font-size="6" font-weight="700" font-family="system-ui, sans-serif">PDF</text>`;
+    } else if (mimeType === "text/markdown") {
+      inner = `<text x="12" y="16.5" text-anchor="middle" fill="currentColor" stroke="none" font-size="10" font-weight="700" font-family="system-ui, sans-serif">#</text>`;
+    } else if (mimeType === "text/csv") {
+      inner = `<line x1="8" y1="12" x2="16" y2="12"/><line x1="8" y1="15" x2="16" y2="15"/><line x1="8" y1="18" x2="16" y2="18"/><line x1="10.7" y1="12" x2="10.7" y2="18"/><line x1="13.3" y1="12" x2="13.3" y2="18"/>`;
+    } else if (getMediaCategory(mimeType) === "archive") {
+      inner = `<line x1="12" y1="10" x2="12" y2="11.5"/><line x1="12" y1="13" x2="12" y2="14.5"/><line x1="12" y1="16" x2="12" y2="17.5"/>`;
+    } else if (mimeType === "text/x-tiptap+json") {
+      inner = `<line x1="16" y1="11" x2="8" y2="11"/><line x1="16" y1="14" x2="8" y2="14"/><line x1="12" y1="17" x2="8" y2="17"/>`;
+    } else {
+      // Plain text default — 3 text lines
+      inner = `<line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><line x1="10" y1="9" x2="8" y2="9"/>`;
+    }
+
+    return html`<svg
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      ${unsafeSVG(doc + inner)}
+    </svg>`;
+  }
+
   // ── Render helpers ────────────────────────────────────────────────
 
   private _renderNoteFields() {
@@ -763,48 +1251,6 @@ export class JantComposeEditor extends LitElement {
     `;
   }
 
-  private _renderAttachedBadge() {
-    if (this._attachedText.trim().length === 0 || this._showAttachedText)
-      return nothing;
-    return html`
-      <div
-        class="compose-attached-badge"
-        @click=${() => this._openAttachedText()}
-      >
-        <svg
-          width="14"
-          height="14"
-          viewBox="0 0 18 18"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.3"
-          stroke-linecap="round"
-          class="text-muted-foreground icon-fine"
-        >
-          <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>
-        <span class="text-xs font-medium">${this.labels.attachedText}</span>
-        <span class="text-xs text-muted-foreground"
-          >· ${this._attachedText.length.toLocaleString()} chars</span
-        >
-        <div class="flex-1"></div>
-        <button
-          type="button"
-          class="compose-attached-badge-dismiss"
-          @click=${(e: Event) => {
-            e.stopPropagation();
-            this._attachedText = "";
-          }}
-        >
-          ✕
-        </button>
-      </div>
-    `;
-  }
-
   private _renderAttachmentPreview(a: ComposeAttachment) {
     const category = this._getCategory(a);
 
@@ -846,6 +1292,9 @@ export class JantComposeEditor extends LitElement {
             </svg>
           </div>
           <span class="compose-attachment-file-name">${a.file.name}</span>
+          <span class="compose-attachment-file-size"
+            >${this._formatSize(a.file.size)}</span
+          >
         </div>
       `;
     }
@@ -854,23 +1303,43 @@ export class JantComposeEditor extends LitElement {
       return html`
         <div class="compose-attachment-file-card">
           <div class="compose-attachment-file-icon">
-            <svg
-              width="20"
-              height="20"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path
-                d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
-              />
-              <polyline points="14 2 14 8 20 8" />
-              <line x1="16" y1="13" x2="8" y2="13" />
-              <line x1="16" y1="17" x2="8" y2="17" />
-            </svg>
+            ${this._renderFileIcon(a.file.type, 20)}
+          </div>
+          <span class="compose-attachment-file-name">${a.file.name}</span>
+          <span class="compose-attachment-file-size"
+            >${this._formatSize(a.file.size)}</span
+          >
+        </div>
+      `;
+    }
+
+    if (category === "text") {
+      return html`
+        <div class="compose-attachment-file-card">
+          <div class="compose-attachment-file-icon">
+            ${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}
+        </div>
+      `;
+    }
+
+    // Default for non-visual types: generic file card (archive, office, font, 3d, code, etc.)
+    if (category !== "image") {
+      return html`
+        <div class="compose-attachment-file-card">
+          <div class="compose-attachment-file-icon">
+            ${this._renderFileIcon(a.file.type, 20)}
           </div>
           <span class="compose-attachment-file-name">${a.file.name}</span>
           <span class="compose-attachment-file-size"
@@ -880,7 +1349,7 @@ export class JantComposeEditor extends LitElement {
       `;
     }
 
-    // Default: image
+    // Image
     return html`
       <div class="compose-attachment-thumb">
         <img src=${a.previewUrl} alt="" class="compose-attachment-img" />
@@ -890,48 +1359,38 @@ export class JantComposeEditor extends LitElement {
 
   private _renderAttachmentOverlay(a: ComposeAttachment, index: number) {
     return html`
-      ${a.status === "pending" || a.status === "uploading"
-        ? html`
-            <div class="compose-attachment-overlay">
-              <svg
-                class="animate-spin size-4"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                style="stroke-width: 2.5"
-                stroke-linecap="round"
-              >
-                <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-              </svg>
-            </div>
-          `
-        : nothing}
       ${a.status === "error"
         ? html`
             <button
               type="button"
               class="compose-attachment-overlay compose-attachment-retry"
-              title="${a.error ?? "Upload failed"}. ${this.labels.retryAll}"
               @click=${(e: Event) => {
                 e.stopPropagation();
                 this._retryAllFailed();
               }}
             >
-              <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-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>
             </button>
           `
         : nothing}
@@ -945,55 +1404,126 @@ export class JantComposeEditor extends LitElement {
     `;
   }
 
-  private _renderAttachments() {
-    if (this._attachments.length === 0) return nothing;
+  private _renderAttachedTextCard(item: AttachedTextItem, index: number) {
+    return html`
+      <div class="compose-attachment" data-attachment-id=${item.clientId}>
+        <div
+          class="compose-attachment-thumb compose-attachment-sortable"
+          data-attachment-sortable
+          tabindex="0"
+          @click=${() => this._maybeEditAttachedText(index)}
+          @keydown=${(e: globalThis.KeyboardEvent) =>
+            this._handleAttachmentKeydown(item.clientId, e, () =>
+              this._maybeEditAttachedText(index),
+            )}
+        >
+          <div class="compose-attachment-text-card">
+            <div class="compose-attachment-file-icon">
+              ${this._renderFileIcon("text/x-tiptap+json", 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}
+          </div>
+          <button
+            type="button"
+            class="compose-attachment-remove"
+            @click=${(e: Event) => {
+              e.stopPropagation();
+              this._removeAttachedText(index);
+            }}
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+    `;
+  }
+
+  private _renderMediaAttachment(a: ComposeAttachment, i: number) {
+    const category = this._getCategory(a);
+    const isFileCard = category !== "image" && category !== "video";
 
     return html`
-      <div class="compose-attachments">
-        ${this._attachments.map((a, i) => {
-          const category = this._getCategory(a);
-          const isFileCard = category === "audio" || category === "document";
-
-          return html`
-            <div class="compose-attachment">
-              ${isFileCard
-                ? html`
-                    <div class="compose-attachment-thumb">
-                      ${this._renderAttachmentPreview(a)}
-                      ${this._renderAttachmentOverlay(a, i)}
-                    </div>
-                  `
-                : html`
-                    <div class="compose-attachment-thumb">
-                      ${category === "video"
-                        ? html`
-                            <video
-                              src=${a.previewUrl}
-                              class="compose-attachment-img"
-                              preload="metadata"
-                              muted
-                            ></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>
-                          `
-                        : html`
-                            <img
-                              src=${a.previewUrl}
-                              alt=""
-                              class="compose-attachment-img"
-                            />
-                          `}
-                      ${this._renderAttachmentOverlay(a, i)}
-                    </div>
-                  `}
+      <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)}
+                </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)}
+                >
+                  ${category === "video"
+                    ? html`
+                        <video
+                          src=${a.previewUrl}
+                          class="compose-attachment-img"
+                          preload="metadata"
+                          muted
+                        ></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"
+                          />
+                        `}
+                </div>
+                ${this._renderAttachmentOverlay(a, i)}
+              </div>
+            `}
+        ${category === "image"
+          ? html`
               <button
                 type="button"
                 class=${classMap({
@@ -1004,15 +1534,45 @@ export class JantComposeEditor extends LitElement {
               >
                 ${a.alt.length > 0 ? "ALT" : "+ ALT"}
               </button>
-            </div>
-          `;
+            `
+          : nothing}
+      </div>
+    `;
+  }
+
+  private _renderAttachments() {
+    if (this._attachments.length === 0 && this._attachedTexts.length === 0)
+      return nothing;
+
+    return html`
+      <div class="compose-attachments" data-attachment-list>
+        ${this._attachmentOrder.map((clientId) => {
+          const mediaIndex = this._attachments.findIndex(
+            (a) => a.clientId === clientId,
+          );
+          if (mediaIndex !== -1) {
+            return this._renderMediaAttachment(
+              this._attachments[mediaIndex],
+              mediaIndex,
+            );
+          }
+          const textIndex = this._attachedTexts.findIndex(
+            (t) => t.clientId === clientId,
+          );
+          if (textIndex !== -1) {
+            return this._renderAttachedTextCard(
+              this._attachedTexts[textIndex],
+              textIndex,
+            );
+          }
+          return nothing;
         })}
       </div>
     `;
   }
 
   private _renderToolsRow() {
-    const hasAttached = this._attachedText.trim().length > 0;
+    const hasAttached = this._attachedTexts.length > 0;
     return html`
       <div class="compose-tools-row">
         <!-- Media / Add -->
@@ -1053,9 +1613,9 @@ export class JantComposeEditor extends LitElement {
           type="button"
           class=${classMap({
             "compose-tool-btn": true,
-            "compose-tool-btn-active": hasAttached,
+            "compose-tool-btn-add": hasAttached,
           })}
-          title=${this.labels.attachedText}
+          title=${hasAttached ? "" : this.labels.attachedText}
           @click=${() => this._openAttachedText()}
         >
           <svg
@@ -1073,6 +1633,11 @@ export class JantComposeEditor extends LitElement {
             <line x1="6" y1="9" x2="12" y2="9" />
             <line x1="6" y1="12" x2="9.5" y2="12" />
           </svg>
+          ${hasAttached
+            ? html`<span class="compose-tool-label"
+                >${this.labels.addMore}</span
+              >`
+            : nothing}
         </button>
 
         <!-- Rate -->
@@ -1238,8 +1803,7 @@ export class JantComposeEditor extends LitElement {
           : this.format === "link"
             ? this._renderLinkFields()
             : this._renderQuoteFields()}
-        ${this._renderStarRating()} ${this._renderAttachedBadge()}
-        ${this._renderAttachments()}
+        ${this._renderAttachments()} ${this._renderStarRating()}
       </section>
       ${this._renderToolsRow()}
     `;