@convokitapp/vue-ui 0.7.0 → 0.9.0

package/dist/index.js

@@ -26,6 +26,10 @@ function createConvoKitUiClient(client) {
     getMessages: (options) => client.getMessages(options),
     getMessage: (id) => client.getMessage(id),
     sendMessage: (input) => client.sendMessage(input),
+    editMessage: (messageId, input) => client.editMessage(messageId, input),
+    deleteMessage: (messageId) => client.deleteMessage(messageId),
+    getReplyPreviews: (conversationId, messageIds) => client.getReplyPreviews(conversationId, messageIds),
+    getMessageContext: (conversationId, options) => client.getMessageContext(conversationId, options),
     markConversationRead: (conversationId, options) => client.markConversationRead(conversationId, options),
     markConversationUnread: (conversationId) => client.markConversationUnread(conversationId),
     clearConversationUnread: (conversationId, options) => client.clearConversationUnread(conversationId, options),
@@ -186,12 +190,13 @@ var ConvoKitAvatar = defineComponent({
 });
 
 // src/components/conversation.ts
-import { ArrowLeft, LoaderCircle as LoaderCircle2, Paperclip, RefreshCw, Send } from "@lucide/vue";
+import { ArrowDown, ArrowLeft, Check as Check2, LoaderCircle as LoaderCircle2, Paperclip, Pencil as Pencil2, Reply as Reply2, RefreshCw, Send } from "@lucide/vue";
 import {
   defineComponent as defineComponent3,
   h as h3,
   onBeforeUnmount,
   ref as ref2,
+  watch as watch3,
   watchEffect
 } from "vue";
 
@@ -206,9 +211,33 @@ function version(message) {
 function hasContent(message) {
   return !!message.text?.trim() || message.media.length > 0;
 }
+function revisionOrder(left, right) {
+  const a = left.revision, b = right.revision;
+  if (typeof a !== "number" || typeof b !== "number" || a <= 0 && b <= 0) return void 0;
+  return a === b ? void 0 : a - b;
+}
+function older(candidate, reference) {
+  const byRevision = revisionOrder(candidate, reference);
+  return byRevision === void 0 ? version(candidate) < version(reference) : byRevision < 0;
+}
 function newest(current, incoming, incomingComplete = true) {
+  const byRevision = revisionOrder(current, incoming);
+  if (byRevision !== void 0) return byRevision > 0 ? current : incoming;
   return version(current) > version(incoming) || !incomingComplete && version(current) === version(incoming) ? current : incoming;
 }
+function isRevisionConflict(cause) {
+  if (typeof cause !== "object" || cause === null) return false;
+  const { code, status } = cause;
+  return code === "REVISION_CONFLICT" || code === void 0 && status === 409;
+}
+function isMessageMissing(cause) {
+  return typeof cause === "object" && cause !== null && cause.code === "MESSAGE_NOT_FOUND";
+}
+function localConflict() {
+  return Object.assign(new Error("Message was changed since it was loaded"), { code: "REVISION_CONFLICT" });
+}
+var JUMP_GUARD_MS = 150;
+var HIGHLIGHT_MS = 2e3;
 var compare = compareMessageOrder;
 function positionCursor(position) {
   return { createdAt: position.createdAt, id: position.messageId };
@@ -228,7 +257,26 @@ function isTargetMiss(cause) {
   const { code, status } = cause;
   return code === "MESSAGE_NOT_FOUND" || code === void 0 && status === 404;
 }
-function blank(currentUserId = "") {
+function isRouteMissing(cause) {
+  if (typeof cause !== "object" || cause === null) return false;
+  const { code, status } = cause;
+  return status === 404 && code !== "MESSAGE_NOT_FOUND";
+}
+var REPLY_PREVIEW_TEXT_LIMIT = 500;
+function previewOf(message) {
+  const text = message.text;
+  return {
+    id: message.id,
+    conversationId: message.conversationId,
+    senderId: message.senderId,
+    text: text === null ? null : text.slice(0, REPLY_PREVIEW_TEXT_LIMIT),
+    textTruncated: (text?.length ?? 0) > REPLY_PREVIEW_TEXT_LIMIT,
+    createdAt: message.createdAt,
+    revision: message.revision,
+    mediaCount: message.media.length
+  };
+}
+function blank(currentUserId = "", support = { edit: false, delete: false, jump: false, previews: false }) {
   return {
     conversation: null,
     messages: [],
@@ -242,7 +290,19 @@ function blank(currentUserId = "") {
     hasOlderMessages: true,
     hasLoaded: false,
     error: null,
-    currentUserId
+    currentUserId,
+    editingMessage: null,
+    canEditMessages: support.edit,
+    canDeleteMessages: support.delete,
+    replyTarget: null,
+    replyPreviews: /* @__PURE__ */ new Map(),
+    highlightedMessageId: null,
+    jumpInFlight: false,
+    windowMode: "live",
+    hasNewerMessages: false,
+    isLoadingNewer: false,
+    canJumpToMessage: support.jump,
+    canResolveReplyPreviews: support.previews
   };
 }
 var ConversationStore = class {
@@ -261,7 +321,13 @@ var ConversationStore = class {
     }
     this.owner = this.client.sessionIdentity;
     this.user = this.owner ? this.client.currentUserId : "";
-    this.state = blank(this.user);
+    this.support = {
+      edit: typeof this.client.editMessage === "function",
+      delete: typeof this.client.deleteMessage === "function",
+      jump: typeof this.client.getMessageContext === "function",
+      previews: typeof this.client.getReplyPreviews === "function"
+    };
+    this.state = blank(this.user, this.support);
   }
   options;
   client;
@@ -288,7 +354,34 @@ var ConversationStore = class {
   visible = true;
   sendRevision;
   activeSend;
+  /** Adapter support for author edits/deletes, decided once like `listInbox`. */
+  support;
+  /** The id whose `saveEdit` request is in flight: its outcome (success or 409) decides the edit, so newer rows for
+   * it arriving meanwhile (its own UPDATE image, typically) are not reported as a local conflict while it lasts;
+   * `settleEditing` re-evaluates them once the request has settled any other way.
+   */
+  activeEdit;
   refreshQueued = false;
+  /** A reconcile owed to the JUMPED window (0.9.0). `refreshQueued` stays owed across a jump so the tail-anchored
+   * reconcile still runs on the return to `live`; this flag is the one a jumped window consumes.
+   */
+  jumpedRefreshQueued = false;
+  /** The jumped window's paging cursors (0.9.0), opaque and server-minted; null at that end of the history. */
+  olderContextCursor = null;
+  newerContextCursor = null;
+  /** Preview entries that must be re-read on the next batch: a quoted parent changed outside the window, or the
+   * subscription reconnected (0.9.0). `'unavailable'` is terminal and never enters this set.
+   */
+  stalePreviews = /* @__PURE__ */ new Set();
+  /** Ids a batch is already asking for (0.9.0): two triggers that overlap share one request instead of racing. */
+  requestedPreviews = /* @__PURE__ */ new Set();
+  /** Live inserts recorded but not rendered while jumped (0.9.0); drained — and acknowledged — by the return. */
+  deferred = /* @__PURE__ */ new Set();
+  /** The message the current jumped window was centred on, until the window is paged (0.9.0). */
+  jumpAnchor;
+  previewTimer;
+  jumpTimer;
+  highlightTimer;
   typingTimers = /* @__PURE__ */ new Map();
   ownTypingTimer;
   sentTyping = false;
@@ -306,9 +399,33 @@ var ConversationStore = class {
       for (const message of patch.messages) this.confirmSend(message);
       if (this.activeSend.confirmed) patch.messages = patch.messages.filter((message) => message.id !== this.activeSend.pending.id);
     }
+    if (patch.messages) patch = this.trackEditing(patch);
     this.state = { ...this.state, ...patch };
     for (const listener of this.listeners) listener();
   }
+  /** Edit mode follows the edited row wherever a message list reaches the state: the row leaving the list (deletion,
+   * reconcile tombstone, eviction) ends it, and a row for it with a higher revision than the snapshot (UPDATE image,
+   * hydration, reconcile, refresh) is the local conflict: the snapshot is replaced and `error` carries the conflict
+   * code, without a request. A save in flight owns its own outcome (`activeEdit`) and re-checks when it settles
+   * (`settleEditing`).
+   */
+  trackEditing(patch) {
+    const editing = patch.editingMessage === void 0 ? this.state.editingMessage : patch.editingMessage;
+    if (!editing || !patch.messages) return patch;
+    const live = patch.messages.find((message) => message.id === editing.id);
+    if (!live) return { ...patch, editingMessage: null };
+    if (this.activeEdit === editing.id || !(live.revision > editing.revision)) return patch;
+    return { ...patch, editingMessage: live, error: localConflict() };
+  }
+  /** After a save for `id` has settled without deciding the edit (a failure, or a 409 whose reload failed), a newer
+   * row for it that arrived during the request is the local conflict after all: the snapshot is replaced and
+   * `error` carries the conflict code, so the next save carries the fresh revision without another round trip.
+   */
+  settleEditing(id) {
+    const editing = this.state.editingMessage;
+    const live = editing?.id === id ? this.state.messages.find((message) => message.id === id) : void 0;
+    if (editing && live && live.revision > editing.revision) this.patch({ editingMessage: live, error: localConflict() });
+  }
   alive(generation = this.generation) {
     return !this.disposed && generation === this.generation && this.owner !== null && this.client.sessionIdentity === this.owner;
   }
@@ -352,7 +469,21 @@ var ConversationStore = class {
     this.captured = capture();
     this.sendRevision = void 0;
     this.activeSend = void 0;
+    this.activeEdit = void 0;
     this.refreshQueued = false;
+    this.jumpedRefreshQueued = false;
+    this.olderContextCursor = null;
+    this.newerContextCursor = null;
+    this.jumpAnchor = void 0;
+    this.stalePreviews.clear();
+    this.requestedPreviews.clear();
+    this.deferred.clear();
+    clearTimeout(this.previewTimer);
+    this.previewTimer = void 0;
+    clearTimeout(this.jumpTimer);
+    this.jumpTimer = void 0;
+    clearTimeout(this.highlightTimer);
+    this.highlightTimer = void 0;
   }
   dispose = () => {
     if (this.alive() && this.sentTyping) {
@@ -360,14 +491,14 @@ var ConversationStore = class {
     }
     this.disposed = true;
     this.clear();
-    this.patch(blank());
+    this.patch(blank("", this.support));
   };
   fail(cause, generation, history = false) {
     if (!this.alive(generation)) return;
     const status = typeof cause === "object" && cause !== null && "status" in cause ? cause.status : void 0;
     if (history && (status === 401 || status === 403 || status === 404)) {
       this.clear();
-      this.patch({ ...blank(this.user), error: cause, hasLoaded: true, hasOlderMessages: false });
+      this.patch({ ...blank(this.user, this.support), error: cause, hasLoaded: true, hasOlderMessages: false });
     } else this.patch({ error: cause });
   }
   attach(generation, data = true) {
@@ -382,8 +513,10 @@ var ConversationStore = class {
       add(() => this.client.onConnectionEvent({
         onEvent: ({ topic, status }) => {
           if (!data || !this.alive(generation) || topic !== `messages:${this.room}` && topic !== `conversation:${this.room}`) return;
-          if (status === "SUBSCRIBED") this.queueRefresh();
-          else this.clearTyping();
+          if (status === "SUBSCRIBED") {
+            this.markPreviewsStale();
+            this.queueRefresh();
+          } else this.clearTyping();
         },
         onSessionEnded: () => {
           if (this.disposed || generation !== this.generation) return;
@@ -439,9 +572,12 @@ var ConversationStore = class {
     if (!this.alive(generation) || type !== "insert" && type !== "update" || !this.validMessage(message) || this.deleted.has(message.id)) return;
     const existing = this.state.messages.find((item) => item.id === message.id);
     const known = existing ?? this.changes.get(message.id)?.message;
-    if (known && version(message) < version(known)) return;
+    if (known && older(message, known)) return;
     const insert = type === "insert" || this.changes.get(message.id)?.insert === true;
-    if (!existing && !insert && type === "update" && !this.state.isInitialLoading && !this.state.isLoadingOlder && !this.state.isReconciling) return;
+    if (!existing && !insert && type === "update") {
+      this.notePreviewSource(message.id);
+      if (!this.state.isInitialLoading && !this.state.isLoadingOlder && !this.state.isReconciling) return;
+    }
     const revision = ++this.revision;
     const provisional = existing && !message.media.length ? { ...message, media: existing.media } : message;
     this.record(provisional, insert, revision, false);
@@ -452,14 +588,21 @@ var ConversationStore = class {
   }
   record(message, insert, revision, complete) {
     const existing = this.state.messages.find((item) => item.id === message.id);
-    if (existing && version(existing) > version(message)) return;
+    if (existing && older(message, existing)) return;
     if (this.confirmSend(message) && !complete && !message.media.length) {
       message = { ...message, media: this.activeSend.pending.media };
       this.confirmSend(message);
     }
     this.changes.set(message.id, { revision, message, insert, complete });
     if (!existing && !(insert && hasContent(message))) return;
+    if (!existing && this.state.windowMode === "jumped") {
+      this.deferred.add(message.id);
+      if (!this.state.hasNewerMessages) this.patch({ hasNewerMessages: true });
+      return;
+    }
     this.patch({ messages: mergeMessages(this.state.messages, [message]) });
+    this.notePreviewSource(message.id);
+    if (message.replyToMessageId) this.schedulePreviews();
     if (!existing && message.senderId !== this.user && (this.options.markReadOnReceive ?? true)) void this.acknowledge(true);
   }
   confirmSend(message) {
@@ -481,6 +624,9 @@ var ConversationStore = class {
     this.changes.delete(id);
     this.hydrations.delete(id);
     this.hydrationPool.queued.delete(id);
+    this.deferred.delete(id);
+    this.markUnavailable(id);
+    if (this.state.replyTarget?.id === id) this.patch({ replyTarget: null });
     const ack = this.ack;
     if (ack.target !== id && ack.acknowledged?.id !== id) return;
     ack.unacknowledgeable.add(id);
@@ -503,7 +649,7 @@ var ConversationStore = class {
       if (!this.currentHydration(job)) return;
       const full = await this.client.getMessage(id);
       if (!this.currentHydration(job)) return;
-      if (!this.validMessage(full) || full.id !== id || full.senderId !== job.message.senderId || version(full) < version(job.message)) {
+      if (!this.validMessage(full) || full.id !== id || full.senderId !== job.message.senderId || older(full, job.message)) {
         throw new Error("Complete message response does not match the observed resource/revision");
       }
       this.record(full, job.insert, job.revision, true);
@@ -549,6 +695,23 @@ var ConversationStore = class {
       previous = message;
     }
   }
+  /** Context windows get their OWN validator (0.9.0): `validatePage` measures a page against the backward cursor
+   * it was fetched with, and a window centred on a message has no such cursor. Only the per-row predicates are
+   * shared. A CENTRED window must carry its target exactly once; a cursor page must not be held to that.
+   */
+  validateContextPage(page, limit, targetId) {
+    if (page.length > limit) throw new Error("Message context exceeds the requested limit");
+    let previous;
+    for (const message of page) {
+      if (!this.validMessage(message) || previous && compare(message, previous) >= 0) {
+        throw new Error("Message context must contain distinct, room-scoped rows in newest-first order");
+      }
+      previous = message;
+    }
+    if (targetId !== void 0 && page.filter((message) => message.id === targetId).length !== 1) {
+      throw new Error("Centred message context must contain its target exactly once");
+    }
+  }
   fetchPage(before) {
     return this.client.getMessages({
       conversationId: this.room,
@@ -571,6 +734,148 @@ var ConversationStore = class {
     }
     return mergeMessages([], [...byId.values()]);
   }
+  /** `overlay` for a JUMPED window (0.9.0): the same precedence for rows the window already holds, WITHOUT the
+   * pending replay and the `changes`-insert replay, either of which would inject live-tail rows into a
+   * historical window. A jumped window only ever holds rows a context response carried.
+   */
+  overlayWindow(rows, revision) {
+    const byId = new Map(rows.filter((message) => !this.deleted.has(message.id)).map((message) => [message.id, message]));
+    for (const [id, change] of this.changes) {
+      const current = byId.get(id);
+      if (current && change.revision > revision) byId.set(id, newest(current, change.message, change.complete));
+    }
+    return mergeMessages([], [...byId.values()]);
+  }
+  /** The distinct quoted parents the rendered rows point at (0.9.0). */
+  referencedParents() {
+    const referenced = /* @__PURE__ */ new Set();
+    for (const message of this.state.messages) {
+      if (message.replyToMessageId) referenced.add(message.replyToMessageId);
+    }
+    return referenced;
+  }
+  /** Cache the terminal `'unavailable'` for a quoted parent that is gone, while any rendered row still quotes it
+   * (or an entry for it already exists). Never re-requested: absence from a resolved batch is the only deletion
+   * signal the backend gives, and a deleted message cannot come back.
+   */
+  markUnavailable(id) {
+    const cached = this.state.replyPreviews.get(id);
+    if (cached === "unavailable") return;
+    if (cached === void 0 && !this.referencedParents().has(id)) return;
+    const next = new Map(this.state.replyPreviews);
+    next.set(id, "unavailable");
+    this.stalePreviews.delete(id);
+    this.patch({ replyPreviews: next });
+  }
+  /** Re-read every non-terminal preview on the next batch (reconnect/`SUBSCRIBED`). */
+  markPreviewsStale() {
+    for (const [id, entry] of this.state.replyPreviews) if (entry !== "unavailable") this.stalePreviews.add(id);
+  }
+  /** A row for a quoted parent reached the store: the preview that references it is refreshed from the rendered
+   * row, or marked stale when the parent is outside the window. Previews are re-read, never copied — a parent
+   * edit bumps the PARENT's revision, which no row-precedence rule on the reply can see.
+   */
+  notePreviewSource(id) {
+    const cached = this.state.replyPreviews.get(id);
+    if (cached === void 0) return;
+    const row = this.state.messages.find((message) => message.id === id);
+    if (row && !isConvoKitPendingMessage(row)) {
+      const fresh = previewOf(row);
+      this.stalePreviews.delete(id);
+      if (cached !== "unavailable" && cached.revision === fresh.revision && cached.text === fresh.text && cached.mediaCount === fresh.mediaCount) return;
+      const next = new Map(this.state.replyPreviews);
+      next.set(id, fresh);
+      this.patch({ replyPreviews: next });
+      return;
+    }
+    if (cached === "unavailable") return;
+    this.stalePreviews.add(id);
+    this.schedulePreviews();
+  }
+  /** Coalesce a burst of live inserts into one batch; the handle is cleared wherever subscriptions are torn down
+   * and the callback is dropped when the store is no longer alive for the generation that scheduled it.
+   */
+  schedulePreviews() {
+    if (this.previewTimer !== void 0 || !this.support.previews) return;
+    const generation = this.generation;
+    const timer = setTimeout(() => {
+      this.previewTimer = void 0;
+      if (this.alive(generation)) void this.resolvePreviews();
+    }, 120);
+    timer.unref?.();
+    this.previewTimer = timer;
+  }
+  /** Resolve the quoted parents of the rendered rows in ONE request, never one per row (0.9.0). A parent inside
+   * the loaded window is derived locally and costs nothing; `'unavailable'` is terminal; an id with no entry is
+   * "not resolved yet", so a rejection — which says nothing about which ids exist — writes no entry at all and
+   * the next trigger asks again. `prune` drops entries no rendered row references (reconcile completion), which
+   * is what bounds the map to the window.
+   */
+  async resolvePreviews(prune = false) {
+    if (!this.alive() || !this.support.previews || !this.state.canResolveReplyPreviews) return;
+    const referenced = this.referencedParents();
+    const previews = new Map(this.state.replyPreviews);
+    let changed = false;
+    if (prune) {
+      for (const id of [...previews.keys()]) {
+        if (referenced.has(id)) continue;
+        previews.delete(id);
+        this.stalePreviews.delete(id);
+        changed = true;
+      }
+    }
+    const window = new Map(this.state.messages.filter((message) => !isConvoKitPendingMessage(message)).map((message) => [message.id, message]));
+    const wanted = [];
+    for (const id of referenced) {
+      const local = window.get(id);
+      if (local) {
+        this.stalePreviews.delete(id);
+        const cached2 = previews.get(id);
+        const fresh = previewOf(local);
+        if (cached2 === void 0 || cached2 === "unavailable" || cached2.revision !== fresh.revision || cached2.text !== fresh.text || cached2.mediaCount !== fresh.mediaCount) {
+          previews.set(id, fresh);
+          changed = true;
+        }
+        continue;
+      }
+      const cached = previews.get(id);
+      if (cached === "unavailable") continue;
+      if (cached !== void 0 && !this.stalePreviews.has(id)) continue;
+      if (this.requestedPreviews.has(id)) continue;
+      wanted.push(id);
+    }
+    if (changed) this.patch({ replyPreviews: previews });
+    if (wanted.length === 0) return;
+    const generation = this.generation;
+    for (const id of wanted) this.requestedPreviews.add(id);
+    try {
+      const resolved = await this.client.getReplyPreviews(this.room, wanted);
+      if (!this.alive(generation)) return;
+      const next = new Map(this.state.replyPreviews);
+      const returned = /* @__PURE__ */ new Set();
+      for (const preview of resolved) {
+        if (preview.conversationId !== this.room) continue;
+        returned.add(preview.id);
+        next.set(preview.id, preview);
+        this.stalePreviews.delete(preview.id);
+      }
+      for (const id of wanted) {
+        if (returned.has(id)) continue;
+        next.set(id, "unavailable");
+        this.stalePreviews.delete(id);
+      }
+      this.patch({ replyPreviews: next });
+    } catch (cause) {
+      if (!this.alive(generation)) return;
+      if (isRouteMissing(cause)) {
+        this.support.previews = false;
+        this.patch({ canResolveReplyPreviews: false });
+      }
+      this.fail(cause, generation);
+    } finally {
+      for (const id of wanted) this.requestedPreviews.delete(id);
+    }
+  }
   prune(revision) {
     const safeRevision = Math.min(revision, this.sendRevision ?? Infinity);
     for (const [id, change] of this.changes) if (change.revision <= safeRevision) this.changes.delete(id);
@@ -583,7 +888,7 @@ var ConversationStore = class {
     if (!this.alive()) return;
     this.clear();
     const generation = this.generation;
-    this.patch({ ...blank(this.user), isInitialLoading: true });
+    this.patch({ ...blank(this.user, this.support), isInitialLoading: true });
     const revision = this.revision;
     try {
       this.attach(generation);
@@ -597,6 +902,7 @@ var ConversationStore = class {
       this.captured = capture(conversation);
       this.mergeReads(conversation.participants.map(readEntry));
       this.prune(revision);
+      void this.resolvePreviews();
       if ((this.options.markReadOnLoad ?? true) || this.ack.suppressed) {
         this.ack.suppressed = false;
         await this.acknowledge(true);
@@ -612,19 +918,36 @@ var ConversationStore = class {
   };
   queueRefresh() {
     this.refreshQueued = true;
+    this.jumpedRefreshQueued = true;
     this.flushRefresh();
   }
   flushRefresh() {
     const generation = this.generation;
     void Promise.resolve().then(() => {
-      if (!this.alive(generation) || !this.refreshQueued || this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isReconciling) return;
+      if (!this.alive(generation) || !this.refreshQueued || this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isLoadingNewer || this.state.isReconciling) return;
+      if (this.state.windowMode === "jumped") {
+        if (!this.jumpedRefreshQueued) return;
+        this.jumpedRefreshQueued = false;
+        void this.reconcileWindow();
+        return;
+      }
       this.refreshQueued = false;
+      this.jumpedRefreshQueued = false;
       void this.refresh();
     });
   }
   /** Re-fetch the entire viewed range atomically; a first-page-only refresh loses history. */
   refresh = async () => {
     if (!this.alive()) return;
+    if (this.state.windowMode === "jumped") {
+      this.refreshQueued = true;
+      if (this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isLoadingNewer || this.state.isReconciling) {
+        this.jumpedRefreshQueued = true;
+        return;
+      }
+      this.jumpedRefreshQueued = false;
+      return this.reconcileWindow();
+    }
     if (this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isReconciling) {
       this.refreshQueued = true;
       return;
@@ -662,6 +985,7 @@ var ConversationStore = class {
       if (opening) this.captured = capture(conversation);
       this.mergeReads(conversation.participants.map(readEntry));
       this.prune(revision);
+      void this.resolvePreviews(true);
       if (opening) void this.resumeAcknowledgement();
     } catch (cause) {
       this.fail(cause, generation, true);
@@ -673,7 +997,8 @@ var ConversationStore = class {
     }
   };
   loadOlderMessages = async () => {
-    if (!this.alive() || !this.state.hasLoaded || this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isReconciling || !this.state.hasOlderMessages) return;
+    if (!this.alive() || !this.state.hasLoaded || this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isReconciling || this.state.isLoadingNewer || !this.state.hasOlderMessages) return;
+    if (this.state.windowMode === "jumped") return this.loadContextPage("older");
     const generation = this.generation;
     const revision = this.revision;
     const cursor = this.cursor;
@@ -687,6 +1012,7 @@ var ConversationStore = class {
         messages: this.overlay(mergeMessages(page, this.state.messages), revision),
         hasOlderMessages: page.length === this.pageSize
       });
+      void this.resolvePreviews();
     } catch (cause) {
       this.fail(cause, generation, true);
     } finally {
@@ -696,6 +1022,298 @@ var ConversationStore = class {
       }
     }
   };
+  /** Page a jumped window towards the start (0.9.0); a no-op while the window is live or already at the end. */
+  loadNewerMessages = async () => {
+    if (!this.alive() || !this.state.hasLoaded || this.state.windowMode !== "jumped" || !this.state.hasNewerMessages || this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isLoadingNewer || this.state.isReconciling) return;
+    return this.loadContextPage("newer");
+  };
+  /** One page of the jumped window in either direction, through the cursor the previous window returned. When
+   * the newer side reaches the tail the store does NOT flip to `live` on the spot — `newerCursor: null` was only
+   * true as of the server's query time and inserts have been deferred throughout the round trip, so the return
+   * to the live tail is a full `returnToLatest()`.
+   */
+  async loadContextPage(direction) {
+    const cursor = direction === "older" ? this.olderContextCursor : this.newerContextCursor;
+    if (cursor === null || typeof this.client.getMessageContext !== "function") return;
+    const generation = this.generation;
+    const revision = this.revision;
+    let reachedTail = false;
+    this.patch(direction === "older" ? { isLoadingOlder: true, error: null } : { isLoadingNewer: true, error: null });
+    try {
+      const page = await this.client.getMessageContext(this.room, {
+        ...direction === "older" ? { olderCursor: cursor } : { newerCursor: cursor },
+        limit: this.pageSize
+      });
+      if (!this.alive(generation)) return;
+      this.validateContextPage(page.messages, this.pageSize);
+      this.jumpAnchor = void 0;
+      if (direction === "older") {
+        this.olderContextCursor = page.olderCursor;
+        this.patch({
+          messages: this.overlayWindow(mergeMessages(this.state.messages, page.messages), revision),
+          hasOlderMessages: page.olderCursor !== null
+        });
+      } else {
+        this.newerContextCursor = page.newerCursor;
+        reachedTail = page.newerCursor === null;
+        this.patch({
+          messages: this.overlayWindow(mergeMessages(this.state.messages, page.messages), revision),
+          hasNewerMessages: page.newerCursor !== null
+        });
+      }
+      void this.resolvePreviews();
+    } catch (cause) {
+      if (!this.alive(generation)) return;
+      if (isRouteMissing(cause)) this.retireJump();
+      this.fail(cause, generation);
+    } finally {
+      if (this.alive(generation)) {
+        this.patch(direction === "older" ? { isLoadingOlder: false } : { isLoadingNewer: false });
+        this.flushRefresh();
+      }
+    }
+    if (reachedTail && this.alive(generation)) await this.returnToLatest();
+  }
+  /** Re-read the JUMPED window with one bounded request, in place of the tail-anchored boundary walk (0.9.0).
+   * The anchor is the jump target while the window has not been paged, otherwise the newest non-pending row at
+   * or older than the window's midpoint, and the limit is the window's own size. Tombstones are bounded by the
+   * returned range: a known row inside it that the response did not carry is gone, anything outside is not.
+   */
+  async reconcileWindow() {
+    const anchor = this.windowAnchor();
+    if (!anchor || typeof this.client.getMessageContext !== "function") return;
+    const generation = this.generation;
+    const revision = this.revision;
+    const rendered = this.state.messages.filter((message) => !isConvoKitPendingMessage(message));
+    const limit = Math.min(Math.max(rendered.length, 1), 100);
+    this.patch({ isReconciling: true, error: null });
+    try {
+      let conversation;
+      try {
+        conversation = await this.client.getConversation(this.room);
+      } catch (cause) {
+        this.fail(cause, generation, true);
+        return;
+      }
+      if (!this.alive(generation)) return;
+      if (conversation.id !== this.room) {
+        this.fail(new Error("Conversation response belongs to a different room"), generation, true);
+        return;
+      }
+      const page = await this.client.getMessageContext(this.room, { messageId: anchor, limit });
+      if (!this.alive(generation)) return;
+      this.validateContextPage(page.messages, limit, anchor);
+      this.olderContextCursor = page.olderCursor;
+      this.newerContextCursor = page.newerCursor;
+      const reconciled = this.overlayWindow(page.messages, revision);
+      const surviving = new Set(reconciled.map((message) => message.id));
+      const newestRow = page.messages[0];
+      const oldestRow = page.messages.at(-1);
+      if (newestRow && oldestRow) {
+        for (const message of rendered) {
+          if (surviving.has(message.id)) continue;
+          if (compare(message, oldestRow) < 0 || compare(message, newestRow) > 0) continue;
+          this.forget(message.id);
+        }
+      }
+      this.patch({
+        conversation,
+        messages: reconciled,
+        hasOlderMessages: page.olderCursor !== null,
+        hasNewerMessages: page.newerCursor !== null
+      });
+      this.mergeReads(conversation.participants.map(readEntry));
+      this.prune(revision);
+      void this.resolvePreviews(true);
+    } catch (cause) {
+      if (!this.alive(generation)) return;
+      if (isMessageMissing(cause)) this.removeMessage(anchor);
+      else if (isRouteMissing(cause)) this.retireJump();
+      this.fail(cause, generation);
+    } finally {
+      if (this.alive(generation)) {
+        this.patch({ isReconciling: false });
+        this.flushRefresh();
+      }
+    }
+  }
+  /** The row a jumped window re-reads around: its jump target while it has not been paged, otherwise the newest
+   * non-pending row at or older than the window's midpoint.
+   */
+  windowAnchor() {
+    const rendered = this.state.messages.filter((message) => !isConvoKitPendingMessage(message));
+    if (rendered.length === 0) return void 0;
+    if (this.jumpAnchor && rendered.some((message) => message.id === this.jumpAnchor)) return this.jumpAnchor;
+    return rendered[Math.floor((rendered.length - 1) / 2)]?.id;
+  }
+  /** A 0.8 backend does not serve the context route: the jump affordance disappears for the store's life rather
+   * than failing repeatedly. A coded `MESSAGE_NOT_FOUND` never trips this — that is a real missing target.
+   */
+  retireJump() {
+    this.support.jump = false;
+    this.patch({ canJumpToMessage: false });
+  }
+  /** Bring a message into view (0.9.0). A row already in the loaded window is only highlighted and scrolled to;
+   * otherwise the window is REPLACED by a context window centred on it and `windowMode` becomes `jumped`. A jump
+   * is a window operation, never a re-open: tombstones, the acknowledgement floor, this open's captured private
+   * state, edit mode and the reply target all survive it, and it arms no acknowledgement. It is a no-op while a
+   * send is in flight, so a replacement can never strand a pending row. A coded `MESSAGE_NOT_FOUND` is the
+   * guaranteed answer for a quoted message that was deleted: it marks the preview `'unavailable'` instead of
+   * reporting an error. Resolves true once the target is highlighted.
+   */
+  jumpToMessage = async (messageId) => {
+    if (!this.alive() || !this.state.hasLoaded) return false;
+    const id = messageId.trim();
+    if (!id || this.state.isSending) return false;
+    const rendered = this.state.messages.find((message) => message.id === id);
+    if (rendered) return isConvoKitPendingMessage(rendered) ? false : (this.beginJump(), this.landJump(id), true);
+    if (this.deleted.has(id)) {
+      this.markUnavailable(id);
+      return false;
+    }
+    if (!this.support.jump || typeof this.client.getMessageContext !== "function") return false;
+    if (this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isLoadingNewer || this.state.isReconciling) return false;
+    const generation = this.generation;
+    this.beginJump();
+    this.patch({ isLoadingNewer: true, error: null, highlightedMessageId: null });
+    try {
+      const page = await this.client.getMessageContext(this.room, { messageId: id, limit: this.pageSize });
+      if (!this.alive(generation)) return false;
+      this.validateContextPage(page.messages, this.pageSize, id);
+      this.olderContextCursor = page.olderCursor;
+      this.newerContextCursor = page.newerCursor;
+      this.jumpAnchor = id;
+      this.patch({
+        messages: mergeMessages([], page.messages.filter((message) => !this.deleted.has(message.id))),
+        windowMode: "jumped",
+        hasOlderMessages: page.olderCursor !== null,
+        hasNewerMessages: page.newerCursor !== null
+      });
+      this.landJump(id);
+      void this.resolvePreviews(true);
+      return true;
+    } catch (cause) {
+      if (!this.alive(generation)) return false;
+      this.releaseJump();
+      if (isMessageMissing(cause)) {
+        this.markUnavailable(id);
+        return false;
+      }
+      if (isRouteMissing(cause)) this.retireJump();
+      this.fail(cause, generation);
+      return false;
+    } finally {
+      if (this.alive(generation)) {
+        this.patch({ isLoadingNewer: false });
+        this.flushRefresh();
+      }
+    }
+  };
+  /** Drop a jumped window and render the live tail again (0.9.0), through the normal newest-page load. There is
+   * no in-place flip: `windowMode` becomes `live` BEFORE the request, so inserts arriving during the round trip
+   * are folded in by `overlay` exactly as `loadInitial()` and `refresh()` already tolerate, and the rows
+   * deferred while jumped are drained — and acknowledged — with it. A failure stays `jumped` with the window and
+   * its affordance intact; the highlight is carried through so the target re-anchors when it is still in the
+   * newest page. Resolves true once the live tail is rendered.
+   */
+  returnToLatest = async () => {
+    if (!this.alive() || !this.state.hasLoaded) return false;
+    if (this.state.windowMode !== "jumped") return true;
+    if (this.state.isInitialLoading || this.state.isLoadingOlder || this.state.isLoadingNewer || this.state.isReconciling) return false;
+    const generation = this.generation;
+    const revision = this.revision;
+    const highlighted = this.state.highlightedMessageId;
+    clearTimeout(this.highlightTimer);
+    this.highlightTimer = void 0;
+    this.patch({ windowMode: "live", isLoadingNewer: true, error: null, highlightedMessageId: null });
+    try {
+      const page = await this.fetchPage();
+      if (!this.alive(generation)) return false;
+      this.validatePage(page);
+      this.cursor = page.at(-1);
+      this.olderContextCursor = null;
+      this.newerContextCursor = null;
+      this.jumpAnchor = void 0;
+      this.patch({
+        messages: this.overlay(page, revision),
+        hasOlderMessages: page.length === this.pageSize,
+        hasNewerMessages: false
+      });
+      this.prune(revision);
+      const drained = [...this.deferred].some((id) => this.state.messages.some((message) => message.id === id && message.senderId !== this.user));
+      this.deferred.clear();
+      void this.resolvePreviews(true);
+      if (drained && (this.options.markReadOnReceive ?? true) || this.ack.followUp) void this.acknowledge(true);
+      if (highlighted && this.state.messages.some((message) => message.id === highlighted)) {
+        this.beginJump();
+        this.landJump(highlighted);
+      }
+      return true;
+    } catch (cause) {
+      if (!this.alive(generation)) return false;
+      this.patch({
+        windowMode: "jumped",
+        hasNewerMessages: this.newerContextCursor !== null,
+        highlightedMessageId: highlighted
+      });
+      this.fail(cause, generation, true);
+      return false;
+    } finally {
+      if (this.alive(generation)) {
+        this.patch({ isLoadingNewer: false });
+        this.flushRefresh();
+      }
+    }
+  };
+  /** The guard the views read while a jump lands: it is set BEFORE the window is replaced, because shrinking the
+   * list clamps `scrollTop` and emits a scroll event of its own.
+   */
+  beginJump() {
+    clearTimeout(this.jumpTimer);
+    this.jumpTimer = void 0;
+    clearTimeout(this.highlightTimer);
+    this.highlightTimer = void 0;
+    if (!this.state.jumpInFlight) this.patch({ jumpInFlight: true });
+  }
+  /** The window is in place: highlight the target and release the guard on a timer, never on "the first scroll
+   * event" — a target already in view produces none. The highlight's own timeout starts when the guard clears.
+   */
+  landJump(id) {
+    this.patch({ highlightedMessageId: id });
+    const generation = this.generation;
+    const timer = setTimeout(() => {
+      this.jumpTimer = void 0;
+      if (!this.alive(generation)) return;
+      this.patch({ jumpInFlight: false });
+      const clearing = setTimeout(() => {
+        this.highlightTimer = void 0;
+        if (this.alive(generation) && this.state.highlightedMessageId === id) this.patch({ highlightedMessageId: null });
+      }, HIGHLIGHT_MS);
+      clearing.unref?.();
+      this.highlightTimer = clearing;
+    }, JUMP_GUARD_MS);
+    timer.unref?.();
+    this.jumpTimer = timer;
+  }
+  releaseJump() {
+    clearTimeout(this.jumpTimer);
+    this.jumpTimer = void 0;
+    if (this.state.jumpInFlight) this.patch({ jumpInFlight: false });
+  }
+  /** Quote a rendered, confirmed message in the composer (0.9.0). A no-op for pending, tombstoned and unknown
+   * rows and while the caller's role (when known) is `READ`; any member may quote any row, own or not. Replying
+   * and editing are mutually exclusive, so this leaves edit mode. Sends nothing.
+   */
+  startReply = (messageId) => {
+    if (!this.alive() || this.ownRole() === "READ") return;
+    const row = this.state.messages.find((message) => message.id === messageId);
+    if (!row || isConvoKitPendingMessage(row) || this.deleted.has(messageId)) return;
+    this.patch({ replyTarget: row, editingMessage: null });
+  };
+  /** Drop the reply target without a request; the draft is untouched (replying never replaces it). */
+  cancelReply = () => {
+    if (this.state.replyTarget) this.patch({ replyTarget: null });
+  };
   /** Acknowledge through the newest rendered row now, regardless of visibility; no acknowledgement without a
    * target (a room opened with a marker that renders nothing clears the marker instead, once).
    */
@@ -725,6 +1343,7 @@ var ConversationStore = class {
   }
   /** Resolves when the request this call issued or joined settles; a follow-up is issued, not awaited. */
   acknowledge(automatic) {
+    if (this.state.windowMode === "jumped") return Promise.resolve();
     const ack = this.ack;
     if (automatic && (!this.visible || this.state.conversation === null)) {
       ack.suppressed = true;
@@ -737,6 +1356,10 @@ var ConversationStore = class {
     return this.issue(ack, this.generation) ?? Promise.resolve();
   }
   issue(ack, generation) {
+    if (this.state.windowMode === "jumped") {
+      ack.followUp = true;
+      return void 0;
+    }
     ack.followUp = false;
     const target = this.ackTarget(ack);
     const request = target ? this.send(ack, generation, target) : this.clearMarker(ack, generation);
@@ -813,11 +1436,14 @@ var ConversationStore = class {
   sendMessage = async ({ text, media }) => {
     const normalized = text?.trim();
     if (!this.alive() || this.state.isSending || !normalized && !media?.length) return null;
+    if (this.state.windowMode === "jumped" && !await this.returnToLatest()) return null;
+    if (!this.alive() || this.state.isSending) return null;
     const generation = this.generation;
     const revision = this.revision;
     this.sendRevision = revision;
     const clientMessageId = createClientMessageId();
     const pendingId = `convokit-pending-${clientMessageId}`;
+    const replyToMessageId = this.state.replyTarget?.id;
     const pending = {
       id: pendingId,
       clientMessageId,
@@ -826,7 +1452,9 @@ var ConversationStore = class {
       text: normalized || null,
       media: media ?? [],
       createdAt: /* @__PURE__ */ new Date(),
-      updatedAt: null
+      updatedAt: null,
+      revision: 0,
+      ...replyToMessageId ? { replyToMessageId } : {}
     };
     const send = { pending };
     this.activeSend = send;
@@ -836,7 +1464,9 @@ var ConversationStore = class {
         conversationId: this.room,
         clientMessageId,
         ...normalized ? { text: normalized } : {},
-        ...media?.length ? { media } : {}
+        ...media?.length ? { media } : {},
+        // Omitted entirely when there is no quote, so a plain send is byte-identical to 0.8.
+        ...replyToMessageId ? { replyToMessageId } : {}
       });
       if (!this.alive(generation)) return null;
       if (!this.validMessage(message) || message.senderId !== this.user) throw new Error("Send response belongs to a different room or sender");
@@ -846,10 +1476,15 @@ var ConversationStore = class {
       let latest = existing ? newest(message, existing, live?.complete !== false) : message;
       if (live && live.revision > revision) latest = newest(latest, live.message, live.complete);
       if (!this.deleted.has(message.id)) this.changes.set(message.id, { revision: ++this.revision, message: latest, insert: true, complete: true });
-      this.patch({ messages: mergeMessages(
-        this.state.messages.filter((item) => item.id !== pendingId),
-        this.deleted.has(message.id) ? [] : [latest]
-      ) });
+      this.patch({
+        messages: mergeMessages(
+          this.state.messages.filter((item) => item.id !== pendingId),
+          this.deleted.has(message.id) ? [] : [latest]
+        ),
+        // The quote is spent: it is cleared only once the server accepted the send.
+        ...replyToMessageId ? { replyTarget: null } : {}
+      });
+      if (replyToMessageId) void this.resolvePreviews();
       void this.updateTyping(false);
       return this.alive(generation) ? latest : null;
     } catch (cause) {
@@ -870,6 +1505,132 @@ var ConversationStore = class {
       }
     }
   };
+  /** The caller's role in the open room when known (0.7 `membership`, else the caller's participant row). */
+  ownRole() {
+    const conversation = this.state.conversation;
+    return conversation?.membership?.role ?? conversation?.participants.find((participant) => participant.appUserId === this.user || participant.id === this.user)?.role;
+  }
+  /** A rendered, confirmed row of the caller's own that is not known to be gone. */
+  ownRow(messageId) {
+    const row = this.state.messages.find((message) => message.id === messageId);
+    return row && row.senderId === this.user && !isConvoKitPendingMessage(row) && !this.deleted.has(messageId) ? row : void 0;
+  }
+  /** Enter edit mode on one of the caller's own confirmed messages (0.8.0): the row as it stands now becomes the
+   * snapshot whose `revision` every save sends. A no-op unless the adapter implements `editMessage`, the row is
+   * rendered, own, confirmed, not tombstoned and the caller's role (when known) is not `READ`. Sends nothing.
+   */
+  startEditing = (messageId) => {
+    if (!this.alive() || !this.support.edit || this.ownRole() === "READ") return;
+    const row = this.ownRow(messageId);
+    if (row) this.patch({ editingMessage: row, replyTarget: null });
+  };
+  /** Leave edit mode without a request; the draft is the view's to restore. */
+  cancelEditing = () => {
+    if (this.state.editingMessage) this.patch({ editingMessage: null });
+  };
+  /** Save the edit in progress with the snapshot's revision (never the live row's), trimming the text and sending
+   * `null` for an empty caption. Resolves true when the server accepted the edit (the response is merged through the
+   * tombstone and precedence guards and edit mode ends); false when nothing was saved: a stale revision (409
+   * `REVISION_CONFLICT`) reloads the row once through `getMessage`, replaces the snapshot with it (the next save
+   * carries the fresh revision) and reports the conflict through `error`, keeping edit mode; a coded 404
+   * (`MESSAGE_NOT_FOUND`, on the save or on that reload) removes the row and ends edit mode; any other failure
+   * (403, 500, network, an uncoded 404 from a 0.7 backend) is reported through `error` without evicting anything and
+   * keeps edit mode; if a newer row for the message arrived during such a request, that row is then the local
+   * conflict (`settleEditing`). A text-only message cannot be saved empty (no request). Rejects when the adapter
+   * lacks `editMessage`.
+   */
+  saveEdit = async (text) => {
+    const client = this.client;
+    if (typeof client.editMessage !== "function") {
+      throw new TypeError("This ConvoKitUiClient adapter does not implement editMessage (0.8)");
+    }
+    const snapshot = this.state.editingMessage;
+    if (!this.alive() || !snapshot || this.activeEdit !== void 0) return false;
+    const trimmed = text.trim();
+    const normalized = trimmed === "" ? null : trimmed;
+    if (normalized === null && snapshot.media.length === 0) return false;
+    const generation = this.generation;
+    const id = snapshot.id;
+    this.activeEdit = id;
+    this.patch({ error: null });
+    try {
+      const message = await client.editMessage(id, { text: normalized, revision: snapshot.revision });
+      if (!this.alive(generation)) return false;
+      if (!this.validMessage(message) || message.id !== id || message.senderId !== this.user) {
+        throw new Error("Edit response belongs to a different message or sender");
+      }
+      if (this.state.editingMessage?.id === id) this.patch({ editingMessage: null });
+      this.applyRow(message);
+      return true;
+    } catch (cause) {
+      if (!this.alive(generation)) return false;
+      if (isRevisionConflict(cause)) await this.reloadConflict(id, cause, generation);
+      else if (isMessageMissing(cause)) {
+        this.removeMessage(id);
+        this.patch({ error: cause });
+      } else this.fail(cause, generation);
+      return false;
+    } finally {
+      if (this.alive(generation)) {
+        this.activeEdit = void 0;
+        this.settleEditing(id);
+      }
+    }
+  };
+  /** Merge a complete REST row for a known id through the live-row guards: a tombstoned id is dropped, and an older
+   * revision (or timestamp) never overwrites the newer row already recorded. Recorded as a non-insert change, so a
+   * reconcile keeps it only while the row is still in the fetched range.
+   */
+  applyRow(message) {
+    if (this.deleted.has(message.id)) return;
+    this.record(message, this.changes.get(message.id)?.insert === true, ++this.revision, true);
+  }
+  /** The 409 path: one `getMessage` shows the conflicting content. Its row is merged through the guards and becomes
+   * the new snapshot; a `MESSAGE_NOT_FOUND` answer removes the row and ends edit mode; another failure keeps the
+   * snapshot. `error` carries the conflict (or the reload failure).
+   */
+  async reloadConflict(id, conflict, generation) {
+    try {
+      const current = await this.client.getMessage(id);
+      if (!this.alive(generation)) return;
+      if (!this.validMessage(current) || current.id !== id) throw new Error("Complete message response does not match the edited message");
+      this.applyRow(current);
+      const row = this.state.messages.find((message) => message.id === id);
+      const editing = this.state.editingMessage?.id === id && row ? { editingMessage: row } : {};
+      this.patch({ ...editing, error: conflict });
+    } catch (cause) {
+      if (!this.alive(generation)) return;
+      if (isTargetMiss(cause)) this.removeMessage(id);
+      this.patch({ error: cause });
+    }
+  }
+  /** Delete one of the caller's own confirmed messages (0.8.0). The row stays until the server answers: on success,
+   * or when the server no longer knows it (`MESSAGE_NOT_FOUND`), it is tombstoned and removed (late responses, row
+   * images and hydrations for it are dropped, the acknowledgement target is re-resolved and edit mode on it ends)
+   * and the call resolves true; any other failure keeps the row, reports through `error` and resolves false. Rejects
+   * when the adapter lacks `deleteMessage`.
+   */
+  deleteMessage = async (messageId) => {
+    const client = this.client;
+    if (typeof client.deleteMessage !== "function") {
+      throw new TypeError("This ConvoKitUiClient adapter does not implement deleteMessage (0.8)");
+    }
+    if (!this.alive() || !this.ownRow(messageId)) return false;
+    const generation = this.generation;
+    this.patch({ error: null });
+    try {
+      await client.deleteMessage(messageId);
+    } catch (cause) {
+      if (!this.alive(generation)) return false;
+      if (!isMessageMissing(cause)) {
+        this.fail(cause, generation);
+        return false;
+      }
+    }
+    if (!this.alive(generation)) return false;
+    this.removeMessage(messageId);
+    return true;
+  };
   readerIdsFor = (message) => readerIdsFor(message, this.state.readAtByUserId, this.state.readPositionByUserId);
 };
 
@@ -923,11 +1684,32 @@ function useConversation(options) {
     hasLoaded: field("hasLoaded"),
     error: field("error"),
     currentUserId: field("currentUserId"),
+    editingMessage: field("editingMessage"),
+    canEditMessages: field("canEditMessages"),
+    canDeleteMessages: field("canDeleteMessages"),
+    replyTarget: field("replyTarget"),
+    replyPreviews: field("replyPreviews"),
+    highlightedMessageId: field("highlightedMessageId"),
+    jumpInFlight: field("jumpInFlight"),
+    windowMode: field("windowMode"),
+    hasNewerMessages: field("hasNewerMessages"),
+    isLoadingNewer: field("isLoadingNewer"),
+    canJumpToMessage: field("canJumpToMessage"),
+    canResolveReplyPreviews: field("canResolveReplyPreviews"),
     readerIdsFor: (message) => store.readerIdsFor(message),
     loadInitial: () => store.loadInitial(),
     refresh: () => store.refresh(),
     loadOlderMessages: () => store.loadOlderMessages(),
     sendMessage: (input) => store.sendMessage(input),
+    startEditing: (messageId) => store.startEditing(messageId),
+    cancelEditing: () => store.cancelEditing(),
+    saveEdit: (text) => store.saveEdit(text),
+    deleteMessage: (messageId) => store.deleteMessage(messageId),
+    startReply: (messageId) => store.startReply(messageId),
+    cancelReply: () => store.cancelReply(),
+    jumpToMessage: (messageId) => store.jumpToMessage(messageId),
+    loadNewerMessages: () => store.loadNewerMessages(),
+    returnToLatest: () => store.returnToLatest(),
     markRead: () => store.markRead(),
     updateTyping: (isTyping) => store.updateTyping(isTyping),
     setVisible: (value) => {
@@ -939,6 +1721,7 @@ function useConversation(options) {
 }
 
 // src/components/message-list.ts
+import { isEditedMessage } from "@convokitapp/sdk";
 import {
   Check,
   CheckCheck,
@@ -948,7 +1731,10 @@ import {
   ImageOff,
   LoaderCircle,
   MapPin,
-  MessageCircle
+  MessageCircle,
+  Pencil,
+  Reply,
+  Trash2
 } from "@lucide/vue";
 import {
   computed as computed2,
@@ -1010,6 +1796,19 @@ var MessageListView = defineComponent2({
     isLoadingOlder: { type: Boolean, default: false },
     error: { type: null, required: false },
     onAttachmentClick: { type: Function, default: void 0 },
+    onEditMessage: { type: Function, default: void 0 },
+    onDeleteMessage: { type: Function, default: void 0 },
+    canEditMessage: { type: Function, default: void 0 },
+    confirmDelete: { type: Function, default: void 0 },
+    onReplyToMessage: { type: Function, default: void 0 },
+    canReplyToMessage: { type: Function, default: void 0 },
+    replyPreviewByMessageId: { type: Object, default: void 0 },
+    onJumpToMessage: { type: Function, default: void 0 },
+    highlightedMessageId: { type: String, default: null },
+    jumpInFlight: { type: Boolean, default: false },
+    hasNewerMessages: { type: Boolean, default: false },
+    isLoadingNewer: { type: Boolean, default: false },
+    onLoadNewer: { type: Function, default: void 0 },
     scrollElement: { type: Object, default: void 0 },
     paginationThreshold: { type: Number, default: 240 },
     reverse: { type: Boolean, default: true },
@@ -1017,12 +1816,18 @@ var MessageListView = defineComponent2({
     formatTime: { type: Function, default: formatMessageTime },
     imageLoading: { type: String, default: "lazy" }
   },
-  emits: ["load-older", "attachment-click"],
+  emits: ["load-older", "load-newer", "attachment-click", "edit-message", "delete-message", "reply-to-message", "jump-to-message"],
   setup(props, { attrs, emit, slots }) {
     const internalElement = ref(null);
+    const confirming = ref(null);
+    const highlightCleared = ref(false);
     let requestInFlight = false;
     let lastRequestedLength = null;
+    let newerInFlight = false;
+    let lastNewerLength = null;
     let previousMessageCount = 0;
+    let scrolledTo = null;
+    let jumpArmed = false;
     const participants = computed2(() => new Map(props.conversation.participants.flatMap((participant) => [
       [participant.id, participant],
       [participant.appUserId, participant]
@@ -1045,13 +1850,26 @@ var MessageListView = defineComponent2({
         requestInFlight = false;
       }
     };
-    watch2(() => [props.messages.length, props.hasOlderMessages], async ([count, hasOlder]) => {
+    const requestNewer = async () => {
+      if (newerInFlight || lastNewerLength === props.messages.length || props.isLoadingNewer || !props.hasNewerMessages || !props.onLoadNewer) return;
+      newerInFlight = true;
+      lastNewerLength = props.messages.length;
+      try {
+        await props.onLoadNewer();
+      } catch {
+        lastNewerLength = null;
+      } finally {
+        newerInFlight = false;
+      }
+    };
+    watch2(() => [props.messages.length, props.hasOlderMessages, props.hasNewerMessages], async ([count, hasOlder, hasNewer]) => {
       const previous = previousMessageCount;
       if (count !== previousMessageCount || !hasOlder) lastRequestedLength = null;
+      if (count !== previousMessageCount || !hasNewer) lastNewerLength = null;
       const appended = count > previous;
       const element = internalElement.value;
       previousMessageCount = count;
-      if (element && props.reverse && props.stickToBottom && appended) {
+      if (element && props.reverse && props.stickToBottom && appended && !props.jumpInFlight) {
         const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
         if (previous === 0 || distanceFromBottom < 320) {
           await nextTick();
@@ -1059,16 +1877,136 @@ var MessageListView = defineComponent2({
         }
       }
     }, { flush: "post", immediate: true });
+    watch2(() => [props.highlightedMessageId, props.messages, props.jumpInFlight], ([highlighted, , inFlight]) => {
+      if (inFlight && !jumpArmed) scrolledTo = null;
+      jumpArmed = !!inFlight;
+      if (!highlighted) {
+        scrolledTo = null;
+        highlightCleared.value = false;
+        return;
+      }
+      if (scrolledTo === highlighted) return;
+      const root = internalElement.value;
+      const row = root ? [...root.querySelectorAll("[data-message-id]")].find((node) => node.dataset.messageId === highlighted) : void 0;
+      if (!row) return;
+      scrolledTo = highlighted;
+      highlightCleared.value = false;
+      row.scrollIntoView({ block: "center", behavior: "instant" });
+      if (props.onJumpToMessage) row.focus({ preventScroll: true });
+    }, { flush: "post" });
+    const viewerRole = computed2(() => props.conversation.membership?.role ?? props.conversation.participants.find((participant) => participant.appUserId === props.currentUserId || participant.id === props.currentUserId)?.role);
+    const remove = async (message) => {
+      if (props.confirmDelete && !await props.confirmDelete(message)) return false;
+      return await props.onDeleteMessage?.(message) !== false;
+    };
+    const renderQuote = (parentId, preview, jump) => {
+      const resolved = preview === void 0 || preview === "unavailable" ? void 0 : preview;
+      const author = resolved ? participants.value.get(resolved.senderId)?.name || resolved.senderId : void 0;
+      const attachments = resolved && resolved.mediaCount > 0 ? resolved.mediaCount === 1 ? "1 attachment" : `${resolved.mediaCount} attachments` : "";
+      const body = resolved ? resolved.text?.trim() || attachments : preview === "unavailable" ? "Original message unavailable" : "";
+      return h2(jump ? "button" : "div", {
+        class: cx("ckui-message-quote", preview === "unavailable" && "ckui-message-quote--unavailable"),
+        "data-reply-to": parentId,
+        "aria-label": resolved ? `Quoted message from ${author}` : preview === "unavailable" ? "Original message unavailable" : "Quoted message",
+        ...jump ? { type: "button", onClick: jump } : {}
+      }, [
+        ...author ? [h2("strong", { class: "ckui-message-quote__author" }, author)] : [],
+        ...body ? [h2("span", { class: "ckui-message-quote__body" }, body)] : []
+      ]);
+    };
     const renderMessage = (message, index) => {
       const isCurrentUser = message.senderId === props.currentUserId;
       const sender = participants.value.get(message.senderId);
       const isPending = isConvoKitPendingMessage(message);
       const readerIds = isPending ? /* @__PURE__ */ new Set() : props.readersResolver ? props.readersResolver(message) : readerIdsFor(message, props.readAtByUserId, props.readPositionByUserId);
-      const slotProps = { message, chronologicalIndex: index, isCurrentUser, sender, readerIds };
+      const isEdited = !isPending && isEditedMessage(message);
+      const eligible = !isPending && (props.canEditMessage ? props.canEditMessage(message) : isCurrentUser && viewerRole.value !== "READ");
+      const canEdit = eligible && !!props.onEditMessage;
+      const canDelete = eligible && !!props.onDeleteMessage;
+      const replyEligible = !isPending && (props.canReplyToMessage ? props.canReplyToMessage(message) : viewerRole.value !== "READ");
+      const canReply = replyEligible && !!props.onReplyToMessage;
+      const edit = () => {
+        props.onEditMessage?.(message);
+      };
+      const replyTo = () => {
+        props.onReplyToMessage?.(message);
+      };
+      const parentId = message.replyToMessageId;
+      const replyPreview = parentId ? props.replyPreviewByMessageId?.get(parentId) : void 0;
+      const jumpToReplyTarget = parentId && props.onJumpToMessage ? () => {
+        props.onJumpToMessage?.(parentId);
+      } : void 0;
+      const slotProps = {
+        message,
+        chronologicalIndex: index,
+        isCurrentUser,
+        sender,
+        readerIds,
+        isEdited,
+        canEdit,
+        canDelete,
+        canReply,
+        ...canEdit ? { edit } : {},
+        ...canDelete ? { remove: () => remove(message) } : {},
+        ...canReply ? { reply: replyTo } : {},
+        ...parentId && replyPreview !== void 0 ? { replyPreview } : {},
+        ...jumpToReplyTarget ? { jumpToReplyTarget } : {}
+      };
+      const anchor = {
+        "data-message-id": message.id,
+        ...props.onJumpToMessage ? { tabindex: "-1" } : {}
+      };
+      const highlighted = !highlightCleared.value && props.highlightedMessageId === message.id;
       const custom = slots.message?.(slotProps);
-      if (custom) return h2("div", { key: message.id, role: "listitem" }, custom);
+      if (custom) {
+        return h2("div", {
+          key: message.id,
+          role: "listitem",
+          ...anchor,
+          ...highlighted ? { class: "ckui-message-highlight" } : {}
+        }, custom);
+      }
       const currentAppearance = appearance();
       const messagePart = isCurrentUser ? "outgoingMessage" : "incomingMessage";
+      const iconButton = (label, onClick, icon) => h2("button", {
+        type: "button",
+        "aria-label": label,
+        onClick,
+        class: partClass("button", currentAppearance, "ckui-icon-button"),
+        style: partStyle("button", currentAppearance)
+      }, [icon]);
+      const actions = canReply || canEdit || canDelete ? h2("div", { class: "ckui-message-actions" }, [
+        ...canReply ? [iconButton("Reply to message", replyTo, h2(Reply, { size: 16, "aria-hidden": "true" }))] : [],
+        ...canEdit ? [iconButton("Edit message", edit, h2(Pencil, { size: 16, "aria-hidden": "true" }))] : [],
+        ...canDelete ? [iconButton("Delete message", () => {
+          if (props.confirmDelete) void remove(message);
+          else confirming.value = message.id;
+        }, h2(Trash2, { size: 16, "aria-hidden": "true" }))] : []
+      ]) : null;
+      const confirm = canDelete && confirming.value === message.id ? h2("div", {
+        class: "ckui-message-confirm",
+        role: "group",
+        "aria-label": "Delete this message?"
+      }, [
+        h2("span", "Delete this message?"),
+        h2("button", {
+          type: "button",
+          class: "ckui-link-button",
+          "aria-label": "Confirm delete",
+          onClick: () => {
+            confirming.value = null;
+            void props.onDeleteMessage?.(message);
+          }
+        }, "Delete"),
+        h2("button", {
+          type: "button",
+          class: "ckui-link-button",
+          "aria-label": "Cancel delete",
+          onClick: () => {
+            confirming.value = null;
+          }
+        }, "Cancel")
+      ]) : null;
       const mediaNodes = message.media.map((media, mediaIndex) => {
         const open = props.onAttachmentClick ? () => {
           props.onAttachmentClick?.(media, message);
@@ -1081,26 +2019,33 @@ var MessageListView = defineComponent2({
         }, slots.media?.(mediaSlotProps) ?? [defaultMedia(media, open, props.imageLoading)]);
       });
       const receiptSlotProps = { message, readerIds };
+      const quote = parentId ? renderQuote(parentId, replyPreview, jumpToReplyTarget) : null;
       return h2("div", { key: message.id, role: "listitem" }, [
         h2("article", {
           class: cx(
             !props.unstyled && "ckui-message-row",
             isCurrentUser && !props.unstyled && "ckui-message-row--outgoing",
+            highlighted && "ckui-message-highlight",
             props.classNames?.message,
             props.classNames?.[messagePart]
           ),
           style: [props.styles?.message, props.styles?.[messagePart]],
-          "data-message-id": message.id
+          ...anchor
         }, [
+          // Spread, not null: an absent action/label/prompt must not leave a comment node (0.7 markup stays byte-identical).
+          ...actions ? [actions] : [],
           h2("div", { class: "ckui-message-bubble" }, [
             !isCurrentUser ? h2("strong", { class: "ckui-message-sender" }, sender?.name || message.senderId) : null,
+            ...quote ? [quote] : [],
             message.text ? h2("div", { class: "ckui-message-text" }, message.text) : null,
             ...mediaNodes,
             h2("span", { class: "ckui-message-time" }, [
               isPending ? "Sending\u2026" : props.formatTime(message.createdAt),
+              ...isEdited ? [h2("span", { class: "ckui-message-edited", "aria-label": "Edited" }, "Edited")] : [],
               isCurrentUser && !isPending ? readerIds.size > 0 ? h2(CheckCheck, { size: 14, "aria-label": "Read" }) : h2(Check, { size: 14, "aria-label": "Sent" }) : null
             ])
           ]),
+          ...confirm ? [confirm] : [],
           isCurrentUser && !isPending ? slots["read-receipt"]?.(receiptSlotProps) ?? h2("div", {
             class: partClass("receipt", currentAppearance, "ckui-read-receipt"),
             style: partStyle("receipt", currentAppearance)
@@ -1139,6 +2084,13 @@ var MessageListView = defineComponent2({
       } else {
         children.push(...props.messages.map(renderMessage));
       }
+      if (props.isLoadingNewer) {
+        children.push(slots["loading-newer"]?.() ?? h2("div", {
+          class: partClass("loading", currentAppearance, "ckui-inline-state"),
+          style: partStyle("loading", currentAppearance),
+          role: "status"
+        }, [h2(LoaderCircle, { class: "ckui-spin", "aria-hidden": "true" }), " Loading newer messages\u2026"]));
+      }
       return h2("div", {
         ...attrs,
         ref: (element) => {
@@ -1151,12 +2103,18 @@ var MessageListView = defineComponent2({
         role: "log",
         "aria-live": "polite",
         "aria-label": `Messages in ${props.conversation.displayTitle}`,
+        // Omitted entirely while idle, never `aria-busy="false"`: the 0.7 markup of this element is pinned.
+        ...props.jumpInFlight ? { "aria-busy": "true" } : {},
         onScroll: (event) => {
           const nativeHandler = attrs.onScroll;
           if (typeof nativeHandler === "function") nativeHandler(event);
+          if (props.jumpInFlight) return;
+          if (props.highlightedMessageId && !highlightCleared.value) highlightCleared.value = true;
           const element = event.currentTarget;
           const distanceFromOldest = props.reverse ? element.scrollTop : element.scrollHeight - element.scrollTop - element.clientHeight;
           if (distanceFromOldest <= props.paginationThreshold) void requestOlder();
+          const distanceFromNewest = props.reverse ? element.scrollHeight - element.scrollTop - element.clientHeight : element.scrollTop;
+          if (distanceFromNewest <= props.paginationThreshold) void requestNewer();
         }
       }, children);
     };
@@ -1189,6 +2147,25 @@ var viewProps = {
   onTypingChange: { type: Function, default: void 0 },
   onAddAttachment: { type: Function, default: void 0 },
   onAttachmentClick: { type: Function, default: void 0 },
+  editingMessage: { type: Object, default: null },
+  onEditMessage: { type: Function, default: void 0 },
+  onSaveEdit: { type: Function, default: void 0 },
+  onCancelEdit: { type: Function, default: void 0 },
+  onDeleteMessage: { type: Function, default: void 0 },
+  canEditMessage: { type: Function, default: void 0 },
+  confirmDelete: { type: Function, default: void 0 },
+  replyTarget: { type: Object, default: null },
+  onReplyToMessage: { type: Function, default: void 0 },
+  onCancelReply: { type: Function, default: void 0 },
+  canReplyToMessage: { type: Function, default: void 0 },
+  replyPreviewByMessageId: { type: Object, default: void 0 },
+  onJumpToMessage: { type: Function, default: void 0 },
+  highlightedMessageId: { type: String, default: null },
+  jumpInFlight: { type: Boolean, default: false },
+  hasNewerMessages: { type: Boolean, default: false },
+  isLoadingNewer: { type: Boolean, default: false },
+  onLoadNewer: { type: Function, default: void 0 },
+  onReturnToLatest: { type: Function, default: void 0 },
   isInitialLoading: { type: Boolean, default: false },
   isLoadingOlder: { type: Boolean, default: false },
   isSending: { type: Boolean, default: false },
@@ -1208,6 +2185,9 @@ var viewProps = {
   defaultDraft: { type: String, default: "" },
   onDraftChange: { type: Function, default: void 0 }
 };
+function messageSummary(message) {
+  return message.text?.trim() || (message.media.length === 1 ? "1 attachment" : `${message.media.length} attachments`);
+}
 function typingLabel(userIds, displayNameForUser) {
   const names = [...userIds].map(displayNameForUser);
   if (names.length === 0) return "";
@@ -1227,7 +2207,16 @@ var ConversationView = defineComponent3({
     "load-older",
     "add-attachment",
     "attachment-click",
-    "update:modelValue"
+    "update:modelValue",
+    "edit-message",
+    "save-edit",
+    "cancel-edit",
+    "delete-message",
+    "reply-to-message",
+    "cancel-reply",
+    "jump-to-message",
+    "load-newer",
+    "return-to-latest"
   ],
   setup(props, { attrs, emit, slots }) {
     const internalDraft = ref2(props.defaultDraft);
@@ -1240,15 +2229,61 @@ var ConversationView = defineComponent3({
     });
     const draft = () => props.modelValue ?? internalDraft.value;
     let latestDraft = draft();
-    const setDraft = (value) => {
+    let stash;
+    let saving = false;
+    const setDraft = (value, typing = true) => {
       latestDraft = value;
       if (props.modelValue === void 0) internalDraft.value = value;
       props.onDraftChange?.(value);
       emit("update:modelValue", value);
-      const isTyping = value.trim().length > 0;
-      void props.onTypingChange?.(isTyping);
+      if (typing) void props.onTypingChange?.(value.trim().length > 0);
+    };
+    const enterEdit = (message) => {
+      if (stash === void 0) stash = draft();
+      setDraft(message.text ?? "", false);
+    };
+    const leaveEdit = (message, restore) => {
+      if (stash === void 0) return;
+      const saved = stash;
+      stash = void 0;
+      const current = draft();
+      if (restore === "always" || current.trim() === "" || current === (message.text ?? "")) setDraft(saved);
     };
+    watch3(() => props.editingMessage, (next, previous) => {
+      if (next && (!previous || previous.id !== next.id)) enterEdit(next);
+      else if (!next && previous && !saving) leaveEdit(previous, "unchanged");
+    }, { immediate: true });
+    const cancelEdit = () => {
+      const editing = props.editingMessage;
+      if (!editing) return;
+      leaveEdit(editing, "always");
+      props.onCancelEdit?.();
+    };
+    const cancelReply = () => {
+      props.onCancelReply?.();
+    };
+    const returnToLatest = () => props.onReturnToLatest?.();
+    const canSave = (editing) => draft().trim().length > 0 || editing.media.length > 0;
     const submit = async () => {
+      const editing = props.editingMessage;
+      if (editing) {
+        const text2 = draft().trim();
+        if (!canSave(editing) || props.isSending || submitting.value) return;
+        submitting.value = true;
+        saving = true;
+        try {
+          const saved = await props.onSaveEdit?.(editing, text2);
+          if (saved === false) {
+            if (props.editingMessage === null) leaveEdit(editing, "unchanged");
+            return;
+          }
+          leaveEdit(editing, "always");
+        } finally {
+          saving = false;
+          submitting.value = false;
+        }
+        return;
+      }
       const originalDraft = draft();
       const text = originalDraft.trim();
       if (!text || props.isSending || submitting.value) return;
@@ -1272,6 +2307,7 @@ var ConversationView = defineComponent3({
     };
     const refresh = () => props.onRefresh?.();
     const loadOlder = () => props.onLoadOlder?.();
+    const loadNewer = () => props.onLoadNewer?.();
     const addAttachment = () => {
       props.onAddAttachment?.();
     };
@@ -1317,6 +2353,8 @@ var ConversationView = defineComponent3({
       }, typingLabel(props.typingUserIds, nameForUser));
     };
     const renderComposer = () => {
+      const editing = props.editingMessage;
+      const replying = editing ? null : props.replyTarget;
       const slotProps = {
         value: draft(),
         setValue: setDraft,
@@ -1324,16 +2362,40 @@ var ConversationView = defineComponent3({
         send: () => {
           void submit();
         },
-        ...props.onAddAttachment ? { addAttachment } : {}
+        ...props.onAddAttachment ? { addAttachment } : {},
+        ...editing ? { editing, cancelEdit } : {},
+        ...replying ? { replying, cancelReply } : {}
       };
+      const busy = props.isSending || submitting.value;
       return slots.composer?.(slotProps) ?? h3("form", {
-        class: partClass("composer", appearance(), "ckui-composer"),
+        class: cx(
+          partClass("composer", appearance(), "ckui-composer"),
+          editing && !props.unstyled && "ckui-composer--editing",
+          replying && !props.unstyled && "ckui-composer--replying"
+        ),
         style: partStyle("composer", appearance()),
         onSubmit: (event) => {
           event.preventDefault();
           void submit();
         }
       }, [
+        // Spread, not null: outside edit mode the composer markup stays byte-identical to 0.7.
+        ...editing ? [h3("div", { class: "ckui-composer__editing", role: "status" }, [
+          h3(Pencil2, { size: 14, "aria-hidden": "true" }),
+          h3("span", { class: "ckui-composer__editing-body" }, [
+            h3("strong", "Editing message"),
+            h3("span", messageSummary(editing))
+          ]),
+          h3("button", { type: "button", class: "ckui-link-button", "aria-label": "Cancel editing", onClick: cancelEdit }, "Cancel")
+        ])] : [],
+        ...replying ? [h3("div", { class: "ckui-composer__replying", role: "status" }, [
+          h3(Reply2, { size: 14, "aria-hidden": "true" }),
+          h3("span", { class: "ckui-composer__replying-body" }, [
+            h3("strong", `Replying to ${nameForUser(replying.senderId)}`),
+            h3("span", messageSummary(replying))
+          ]),
+          h3("button", { type: "button", class: "ckui-link-button", "aria-label": "Cancel reply", onClick: cancelReply }, "Cancel")
+        ])] : [],
         props.onAddAttachment ? h3("button", {
           type: "button",
           "aria-label": "Add attachment",
@@ -1362,15 +2424,22 @@ var ConversationView = defineComponent3({
               event.preventDefault();
               void submit();
             }
+            if (event.key === "Escape" && props.editingMessage) {
+              event.preventDefault();
+              cancelEdit();
+            } else if (event.key === "Escape" && props.replyTarget) {
+              event.preventDefault();
+              cancelReply();
+            }
           }
         }),
         h3("button", {
           type: "submit",
-          "aria-label": "Send message",
-          disabled: !draft().trim() || props.isSending || submitting.value,
+          "aria-label": editing ? "Save message" : "Send message",
+          disabled: (editing ? !canSave(editing) : !draft().trim()) || busy,
           class: partClass("button", appearance(), "ckui-send-button"),
           style: partStyle("button", appearance())
-        }, [props.isSending || submitting.value ? h3(LoaderCircle2, { class: "ckui-spin", size: 18, "aria-hidden": "true" }) : h3(Send, { size: 18, "aria-hidden": "true" })])
+        }, [busy ? h3(LoaderCircle2, { class: "ckui-spin", size: 18, "aria-hidden": "true" }) : h3(editing ? Check2 : Send, { size: 18, "aria-hidden": "true" })])
       ]);
     };
     return () => {
@@ -1403,6 +2472,7 @@ var ConversationView = defineComponent3({
         ...slots["read-receipt"] ? { "read-receipt": slots["read-receipt"] } : {},
         ...slots.empty ? { empty: slots.empty } : {},
         ...slots["loading-older"] ? { "loading-older": slots["loading-older"] } : {},
+        ...slots["loading-newer"] ? { "loading-newer": slots["loading-newer"] } : {},
         ...slots["message-error"] ? { error: slots["message-error"] } : {}
       };
       children.push(h3(MessageListView, {
@@ -1419,6 +2489,25 @@ var ConversationView = defineComponent3({
         ...props.onAttachmentClick ? { onAttachmentClick: (media, message) => {
           props.onAttachmentClick?.(media, message);
         } } : {},
+        ...props.onEditMessage ? { onEditMessage: (message) => {
+          props.onEditMessage?.(message);
+        } } : {},
+        ...props.onDeleteMessage ? { onDeleteMessage: (message) => props.onDeleteMessage?.(message) } : {},
+        ...props.canEditMessage ? { canEditMessage: props.canEditMessage } : {},
+        ...props.confirmDelete ? { confirmDelete: props.confirmDelete } : {},
+        ...props.onReplyToMessage ? { onReplyToMessage: (message) => {
+          props.onReplyToMessage?.(message);
+        } } : {},
+        ...props.canReplyToMessage ? { canReplyToMessage: props.canReplyToMessage } : {},
+        ...props.replyPreviewByMessageId ? { replyPreviewByMessageId: props.replyPreviewByMessageId } : {},
+        ...props.onJumpToMessage ? { onJumpToMessage: (messageId) => {
+          props.onJumpToMessage?.(messageId);
+        } } : {},
+        highlightedMessageId: props.highlightedMessageId,
+        jumpInFlight: props.jumpInFlight,
+        hasNewerMessages: props.hasNewerMessages,
+        isLoadingNewer: props.isLoadingNewer,
+        ...props.onLoadNewer ? { onLoadNewer: loadNewer } : {},
         reverse: props.reverseMessages,
         stickToBottom: props.stickToBottom,
         paginationThreshold: props.paginationThreshold,
@@ -1429,6 +2518,19 @@ var ConversationView = defineComponent3({
         density: props.density,
         unstyled: props.unstyled
       }, messageSlots));
+      if (props.onReturnToLatest) {
+        const jumpSlotProps = { returnToLatest };
+        children.push(slots["jump-to-latest"]?.(jumpSlotProps) ?? h3("div", { class: "ckui-conversation-jump" }, [
+          h3("button", {
+            type: "button",
+            class: "ckui-link-button",
+            "aria-label": "Jump to latest messages",
+            onClick: () => {
+              void returnToLatest();
+            }
+          }, [h3(ArrowDown, { size: 14, "aria-hidden": "true" }), " Jump to latest"])
+        ]));
+      }
       children.push(renderTyping(), renderComposer());
       return h3("section", {
         ...attrs,
@@ -1449,6 +2551,15 @@ var Conversation = defineComponent3({
     messages: { type: Array, default: () => [] },
     currentUserId: { type: String, default: "" },
     onSendMessage: { type: Function, default: void 0 },
+    editingMessage: { type: Object, default: void 0 },
+    onEditMessage: { type: Function, default: void 0 },
+    onSaveEdit: { type: Function, default: void 0 },
+    onCancelEdit: { type: Function, default: void 0 },
+    onDeleteMessage: { type: Function, default: void 0 },
+    replyTarget: { type: Object, default: void 0 },
+    onReplyToMessage: { type: Function, default: void 0 },
+    onCancelReply: { type: Function, default: void 0 },
+    onJumpToMessage: { type: Function, default: void 0 },
     client: { type: Object, required: true },
     conversationId: { type: String, required: true },
     messagePageSize: { type: Number, default: 30 },
@@ -1458,7 +2569,26 @@ var Conversation = defineComponent3({
     autoLoad: { type: Boolean, default: true },
     onControllerChange: { type: Function, default: void 0 }
   },
-  emits: ["controller-change", "send-message", "typing-change", "back", "refresh", "load-older", "add-attachment", "attachment-click", "update:modelValue"],
+  emits: [
+    "controller-change",
+    "send-message",
+    "typing-change",
+    "back",
+    "refresh",
+    "load-older",
+    "add-attachment",
+    "attachment-click",
+    "update:modelValue",
+    "edit-message",
+    "save-edit",
+    "cancel-edit",
+    "delete-message",
+    "reply-to-message",
+    "cancel-reply",
+    "jump-to-message",
+    "load-newer",
+    "return-to-latest"
+  ],
   setup(props, { attrs, emit, expose, slots }) {
     const controller = useConversation({
       client: () => props.client,
@@ -1522,6 +2652,22 @@ var Conversation = defineComponent3({
         isSending: _isSending,
         hasOlderMessages: _hasOlderMessages,
         error: _error,
+        editingMessage: _editingMessage,
+        onEditMessage: _onEditMessage,
+        onSaveEdit: _onSaveEdit,
+        onCancelEdit: _onCancelEdit,
+        onDeleteMessage: _onDeleteMessage,
+        replyTarget: _replyTarget,
+        onReplyToMessage: _onReplyToMessage,
+        onCancelReply: _onCancelReply,
+        replyPreviewByMessageId: _replyPreviewByMessageId,
+        onJumpToMessage: _onJumpToMessage,
+        highlightedMessageId: _highlightedMessageId,
+        jumpInFlight: _jumpInFlight,
+        hasNewerMessages: _hasNewerMessages,
+        isLoadingNewer: _isLoadingNewer,
+        onLoadNewer: _onLoadNewer,
+        onReturnToLatest: _onReturnToLatest,
         ...forwarded
       } = props;
       return h3(ConversationView, {
@@ -1545,6 +2691,61 @@ var Conversation = defineComponent3({
         isSending: controller.isSending.value,
         hasOlderMessages: controller.hasOlderMessages.value,
         ...controller.error.value == null ? {} : { error: controller.error.value },
+        // Edit mode is the store's; the actions render only while the adapter supports them (0.8.0).
+        editingMessage: controller.editingMessage.value,
+        ...controller.canEditMessages.value ? {
+          onEditMessage: (message) => {
+            emit("edit-message", message);
+            controller.startEditing(message.id);
+          },
+          onSaveEdit: async (message, text) => {
+            emit("save-edit", message, text);
+            return controller.saveEdit(text);
+          },
+          onCancelEdit: () => {
+            emit("cancel-edit");
+            controller.cancelEditing();
+          }
+        } : {},
+        ...controller.canDeleteMessages.value ? {
+          onDeleteMessage: async (message) => {
+            emit("delete-message", message);
+            return controller.deleteMessage(message.id);
+          }
+        } : {},
+        // Quoted replies and jump windows are the store's (0.9.0). Replying needs no adapter member; the jump
+        // affordances appear only while the adapter can fetch a context window, and disappear for the store's
+        // life against a backend that does not serve the route.
+        replyTarget: controller.replyTarget.value,
+        onReplyToMessage: (message) => {
+          emit("reply-to-message", message);
+          controller.startReply(message.id);
+        },
+        onCancelReply: () => {
+          emit("cancel-reply");
+          controller.cancelReply();
+        },
+        replyPreviewByMessageId: controller.replyPreviews.value,
+        highlightedMessageId: controller.highlightedMessageId.value,
+        jumpInFlight: controller.jumpInFlight.value,
+        hasNewerMessages: controller.hasNewerMessages.value,
+        isLoadingNewer: controller.isLoadingNewer.value,
+        ...controller.canJumpToMessage.value ? {
+          onJumpToMessage: (messageId) => {
+            emit("jump-to-message", messageId);
+            void controller.jumpToMessage(messageId);
+          }
+        } : {},
+        ...controller.windowMode.value === "jumped" ? {
+          onLoadNewer: () => {
+            emit("load-newer");
+            return controller.loadNewerMessages();
+          },
+          onReturnToLatest: () => {
+            emit("return-to-latest");
+            return controller.returnToLatest();
+          }
+        } : {},
         "onUpdate:modelValue": (value) => emit("update:modelValue", value),
         ...props.onBack ? { onBack: () => {
           props.onBack?.();
@@ -1573,7 +2774,7 @@ import {
 } from "vue";
 
 // src/composables/use-conversation-list.ts
-import { computed as computed3, getCurrentScope as getCurrentScope2, onScopeDispose as onScopeDispose2, shallowRef as shallowRef2, toValue as toValue2, watch as watch3 } from "vue";
+import { computed as computed3, getCurrentScope as getCurrentScope2, onScopeDispose as onScopeDispose2, shallowRef as shallowRef2, toValue as toValue2, watch as watch4 } from "vue";
 
 // src/conversation-list-store.ts
 var defaultActivityRefreshWindowMs = 500;
@@ -2031,7 +3232,7 @@ function useConversationList(options) {
   let store = createStore();
   const snapshot = shallowRef2(store.getSnapshot());
   let unsubscribe;
-  const stop = watch3(
+  const stop = watch4(
     () => [toValue2(options.client), toValue2(options.client).sessionIdentity],
     () => {
       store.dispose();
@@ -2381,6 +3582,7 @@ var defaultConvoKitTheme = {
   outgoingBubble: "#18181b",
   outgoingText: "#fafafa",
   badge: "#18181b",
+  highlight: "color-mix(in srgb, #18181b 14%, transparent)",
   radius: "10px",
   avatarSize: "40px",
   fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
@@ -2413,6 +3615,7 @@ var ConvoKitThemeProvider = defineComponent5({
         "--ckui-outgoing": theme.outgoingBubble,
         "--ckui-outgoing-text": theme.outgoingText,
         "--ckui-badge": theme.badge,
+        "--ckui-highlight": theme.highlight,
         "--ckui-radius": theme.radius,
         "--ckui-avatar-size": theme.avatarSize,
         "--ckui-font": theme.fontFamily