@auxilium/datalynk-client 1.6.2 → 1.6.4

package/dist/chat.cjs

@@ -1394,6 +1394,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       __publicField(this, "socketUnsubscribe");
       __publicField(this, "typingTimers", /* @__PURE__ */ new Map());
       __publicField(this, "initialized", false);
+      __publicField(this, "resyncing");
+      __publicField(this, "readVisibility", () => false);
+      __publicField(this, "directorySeq", 0);
       this.api = api;
     }
     async initialize(force = false) {
@@ -1419,14 +1422,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     async loadDirectory(search = "", cursor) {
       const query = search.trim();
-      if (query.length < 2) {
-        this.users$.next([]);
-        return [];
-      }
+      const seq = ++this.directorySeq;
       const response = await this.run({
-        "$/chat/directory": { query, cursor, limit: 25 }
+        "$/chat/directory": { query, cursor, limit: 10 }
       });
       const users = response.users || [];
+      if (seq !== this.directorySeq) return users;
       this.users$.next(users);
       const selected = this.selectedUser$.value;
       const replacement = selected && users.find((user) => user.id === selected.id);
@@ -1456,7 +1457,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           "$/chat/history": { userId, before, limit: 75 }
         });
         const messages = (response.messages || []).map((message) => ({ ...message, status: "sent" }));
-        this.messages$.next(before ? this.mergeMessages(messages, this.messages$.value) : messages);
+        if (this.selectedUser$.value && this.selectedUser$.value.id !== userId) return messages;
+        this.messages$.next(this.sortMessages(this.mergeMessages(messages, this.messages$.value)));
         this.hasMore$.next(Boolean(response.hasMore));
         return messages;
       } finally {
@@ -1499,7 +1501,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     async setTyping(userId, typing) {
       await this.run({ "$/chat/typing": { userId, typing } }, true);
     }
+    /** Only the visible chat window may acknowledge messages as seen. */
+    setReadVisibility(visible) {
+      this.readVisibility = visible;
+      return () => {
+        if (this.readVisibility === visible) this.readVisibility = () => false;
+      };
+    }
     async markLatestRead() {
+      if (!this.readVisibility()) return;
       const peer = this.selectedUser$.value;
       const messages = this.messages$.value;
       const latest = [...messages].reverse().find((message) => message.senderId === (peer == null ? void 0 : peer.id) && !message.id.startsWith("pending:"));
@@ -1524,17 +1534,43 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         () => this.api.socket.send({ chat: { subscribe: true } })
       );
     }
+    /**
+     * Catch up after every (re)subscribe. Events published while the socket was down
+     * (up to the reconnect delay plus ticket fetch) are never replayed, so reload the
+     * inbox and the newest page of the open thread from the API.
+     */
+    resync() {
+      if (this.resyncing) return this.resyncing;
+      this.resyncing = (async () => {
+        var _a;
+        try {
+          await this.loadConversations();
+          const peer = this.selectedUser$.value;
+          if (!peer) return;
+          const response = await this.run({ "$/chat/history": { userId: peer.id, limit: 75 } }, true);
+          if (((_a = this.selectedUser$.value) == null ? void 0 : _a.id) !== peer.id) return;
+          const latest = (response.messages || []).map((message) => ({ ...message, status: "sent" }));
+          this.messages$.next(this.sortMessages(this.mergeMessages(latest, this.messages$.value)));
+          await this.markLatestRead();
+        } catch {
+        } finally {
+          this.resyncing = void 0;
+        }
+      })();
+      return this.resyncing;
+    }
     onSocketEvent(event) {
       var _a, _b, _c, _d, _e;
       if (!(event == null ? void 0 : event.type) || event.type.indexOf("chat.") !== 0) return;
-      if (event.type === "chat.message") {
+      if (event.type === "chat.subscribed") {
+        void this.resync();
+      } else if (event.type === "chat.message") {
         const message = (_a = event.data) == null ? void 0 : _a.message;
         const selected = this.selectedUser$.value;
         if (message && selected && (message.senderId === selected.id || message.recipientId === selected.id)) {
           this.upsertMessage({ ...message, status: "sent" });
-          if (message.senderId === selected.id) void this.markLatestRead();
         }
-        void this.loadConversations();
+        void this.loadConversations().then(() => this.markLatestRead()).catch(() => void 0);
       } else if (event.type === "chat.read") {
         this.applyReadReceipt(event.data);
         void this.loadConversations();
@@ -1588,6 +1624,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         this.messages$.next(next);
       }
     }
+    /** Stream order for persisted messages; optimistic/failed sends stay at the end in send order. */
+    sortMessages(messages) {
+      const persisted = messages.filter((message) => !message.id.startsWith("pending:"));
+      const pending = messages.filter((message) => message.id.startsWith("pending:"));
+      return [...persisted.sort((a, b) => this.compareStreamIds(a.id, b.id)), ...pending];
+    }
     mergeMessages(first, second) {
       const out = [];
       const seen = /* @__PURE__ */ new Set();
@@ -1626,16 +1668,23 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   }
   const icon = (path) => `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="${path}"/></svg>`;
+  const SOUND_ON_ICON = "M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05A4.47 4.47 0 0 0 16.5 12zM14 3.23v2.06a7 7 0 0 1 0 13.42v2.06A9 9 0 0 0 14 3.23z";
+  const SOUND_OFF_ICON = "M16.5 12A4.5 4.5 0 0 0 14 7.97v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.8 8.8 0 0 0 21 12a9 9 0 0 0-7-8.77v2.06A7 7 0 0 1 19 12zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a9 9 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z";
   const CHAT_HTML = `
 <section class="dl-chat" role="dialog" aria-label="Datalynk Chat">
   <header class="dl-chat__titlebar">
-    <div class="dl-chat__brand"><span class="dl-chat__mark">${icon("M4 5h16v11H9l-5 4V5zm3 4v2h2V9H7zm4 0v2h2V9h-2zm4 0v2h2V9h-2z")}</span><strong>Chat</strong></div>
+    <div class="dl-chat__brand"><span class="dl-chat__mark">${icon("M4 5h16v11H9l-5 4V5zm3 4v2h2V9H7zm4 0v2h2V9h-2zm4 0v2h2V9h-2z")}</span><strong>Chat</strong><span class="dl-chat__title-unread" aria-live="polite" hidden></span></div>
     <div class="dl-chat__window-actions">
+      <button class="dl-chat__icon-button dl-chat__sound" type="button" aria-pressed="false" aria-label="Mute message sound" title="Mute message sound">${icon(SOUND_ON_ICON)}</button>
       <button class="dl-chat__icon-button dl-chat__popout" type="button" aria-label="Open chat in a separate window" title="Open in new window">${icon("M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM5 5h6v2H5v12h12v-6h2v8H3V5h2z")}</button>
       <button class="dl-chat__icon-button dl-chat__minimize" type="button" aria-label="Minimize chat" title="Minimize">${icon("M5 11h14v2H5z")}</button>
       <button class="dl-chat__icon-button dl-chat__close" type="button" aria-label="Close chat" title="Close">${icon("M6.4 5 12 10.6 17.6 5 19 6.4 13.4 12 19 17.6 17.6 19 12 13.4 6.4 19 5 17.6 10.6 12 5 6.4z")}</button>
     </div>
   </header>
+  <button class="dl-chat__restore" type="button" aria-label="Restore chat" hidden>
+    <span class="dl-chat__mark">${icon("M4 5h16v11H9l-5 4V5zm3 4v2h2V9H7zm4 0v2h2V9h-2zm4 0v2h2V9h-2z")}</span>
+    <span><strong>Chat</strong><small>Open conversations</small></span>
+  </button>
   <div class="dl-chat__connection" role="status" hidden></div>
   <div class="dl-chat__error" role="alert" hidden></div>
   <div class="dl-chat__body">
@@ -1681,25 +1730,39 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 :host{all:initial;position:fixed;inset:0;z-index:2147483000;pointer-events:none;color:#17242b;font-family:"Segoe UI",Tahoma,Arial,sans-serif}
 *{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 button,input,textarea{font:inherit}
-.dl-chat{--teal:#3f6f85;--teal-deep:#2f596d;--teal-soft:#e9f1f4;--red:#c42d27;--green:#599e21;--ink:#17242b;--muted:#60717a;--line:#d7e0e4;position:fixed;right:22px;bottom:22px;width:min(720px,calc(100vw - 32px));height:min(640px,calc(100dvh - 32px));min-width:360px;min-height:460px;display:flex;flex-direction:column;overflow:hidden;resize:both;pointer-events:auto;background:#fff;border:1px solid #c7d2d7;border-radius:10px;box-shadow:0 18px 54px rgba(23,36,43,.24),0 3px 10px rgba(23,36,43,.12);container-type:inline-size}
+.dl-chat{--teal:var(--primary,#3f6f85);--teal-fore:var(--primary-fore,#fff);--teal-deep:color-mix(in srgb,var(--teal) 78%,#000);--teal-soft:color-mix(in srgb,var(--teal) 12%,#fff);--teal-wash:color-mix(in srgb,var(--teal) 5%,#fff);--teal-hover:color-mix(in srgb,var(--teal) 10%,#fff);--teal-selected:color-mix(in srgb,var(--teal) 17%,#fff);--red:var(--accent,#c42d27);--red-fore:var(--accentText,#fff);--green:#599e21;--ink:#17242b;--muted:#60717a;--line:#d7e0e4;position:fixed;right:22px;bottom:22px;width:min(720px,calc(100vw - 32px));height:min(640px,calc(100dvh - 32px));min-width:360px;min-height:460px;display:flex;flex-direction:column;overflow:hidden;resize:both;pointer-events:auto;background:#fff;border:1px solid #c7d2d7;border-radius:10px;box-shadow:0 18px 54px rgba(23,36,43,.24),0 3px 10px rgba(23,36,43,.12);container-type:inline-size}
 .dl-chat.is-popout{inset:0;width:100%;height:100dvh;min-width:0;min-height:0;resize:none;border:0;border-radius:0;box-shadow:none}.dl-chat.is-popout .dl-chat__minimize{display:none}
-.dl-chat__titlebar{height:46px;flex:0 0 46px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 14px;color:#fff;background:var(--teal);cursor:move;touch-action:none;user-select:none}
+.dl-chat__titlebar{height:46px;flex:0 0 46px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 14px;color:var(--teal-fore);background:var(--teal);cursor:move;touch-action:none;user-select:none}
 .dl-chat__brand{display:flex;align-items:center;gap:9px;font-size:15px;letter-spacing:.01em}.dl-chat__mark{display:grid;place-items:center;width:24px;height:24px}.dl-chat__mark svg{width:22px;height:22px;fill:currentColor}
+.dl-chat__title-unread{min-width:20px;height:20px;padding:0 6px;border-radius:10px;font-size:12px;font-weight:700;line-height:20px;text-align:center;color:var(--red-fore);background:var(--red);box-shadow:0 0 0 2px rgba(255,255,255,.85)}.dl-chat__title-unread[hidden]{display:none}
 .dl-chat__window-actions{display:flex;gap:2px}.dl-chat__icon-button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:5px;color:inherit;background:transparent;cursor:pointer;transition:background-color 120ms ease-out,color 120ms ease-out}.dl-chat__icon-button:hover{background:rgba(255,255,255,.14)}.dl-chat__icon-button:focus-visible,.dl-chat button:focus-visible,.dl-chat input:focus-visible,.dl-chat textarea:focus-visible{outline:2px solid #f2c94c;outline-offset:2px}.dl-chat__icon-button svg{width:18px;height:18px;fill:currentColor}
 .dl-chat__connection,.dl-chat__error{padding:7px 14px;font-size:12px;line-height:1.35}.dl-chat__connection{color:#654d00;background:#fff4c7;border-bottom:1px solid #e8d68c}.dl-chat__error{color:#7b201c;background:#fbe9e8;border-bottom:1px solid #efbfbc}
-.dl-chat__body{min-height:0;flex:1;display:grid;grid-template-columns:260px minmax(0,1fr)}.dl-chat__sidebar{min-width:0;display:flex;flex-direction:column;background:#f4f7f8;border-right:1px solid var(--line)}
-.dl-chat__search-wrap{position:relative;display:block;margin:14px 12px 9px}.dl-chat__search-wrap>svg{position:absolute;left:10px;top:50%;width:17px;height:17px;fill:#70818a;transform:translateY(-50%);pointer-events:none}.dl-chat__search{width:100%;height:36px;padding:0 10px 0 34px;color:var(--ink);background:#fff;border:1px solid #c7d2d7;border-radius:6px;outline:0}.dl-chat__search:focus,.dl-chat__composer:focus{border-color:var(--teal);box-shadow:0 0 0 2px rgba(63,111,133,.15)}
-.dl-chat__scroll{min-height:0;overflow:auto;padding:0 8px 16px}.dl-chat__scroll h2{margin:14px 8px 6px;color:#63757e;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
-.dl-chat__person{position:relative;width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) 8px;align-items:center;gap:10px;padding:8px;border:0;border-radius:7px;text-align:left;color:var(--ink);background:transparent;cursor:pointer;transition:background-color 120ms ease-out}.dl-chat__person:hover{background:#e5edef}.dl-chat__person.is-selected{background:#dce8ed}.dl-chat__avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#fff;background:var(--teal);font-size:12px;font-weight:700;letter-spacing:.03em}.dl-chat__person-copy{min-width:0}.dl-chat__person-top,.dl-chat__person-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}.dl-chat__person-top strong,.dl-chat__person-bottom>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dl-chat__person-top strong{font-size:13px;font-weight:600}.dl-chat__person-top time{flex:0 0 auto;color:#778891;font-size:10px}.dl-chat__person-bottom>span:first-child{color:var(--muted);font-size:11px}.dl-chat__presence{width:8px;height:8px;border:2px solid #87969d;border-radius:50%}.dl-chat__presence.is-online{border-color:var(--green);background:var(--green)}.dl-chat__unread{display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;color:#fff!important;background:var(--red);font-size:10px!important;font-weight:700}.dl-chat__list-empty{margin:6px 8px 12px;color:var(--muted);font-size:12px;line-height:1.45}
-.dl-chat__main{min-width:0;min-height:0}.dl-chat__empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px;text-align:center}.dl-chat__empty-icon{display:grid;place-items:center;width:58px;height:58px;color:var(--teal);background:var(--teal-soft);border-radius:50%}.dl-chat__empty-icon svg{width:27px;height:27px;fill:currentColor}.dl-chat__empty h2{margin:17px 0 5px;font-size:17px}.dl-chat__empty p{max-width:280px;margin:0;color:var(--muted);font-size:13px;line-height:1.5}
-.dl-chat__thread{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto}.dl-chat__thread[hidden],.dl-chat__empty[hidden]{display:none}.dl-chat__thread-header{height:62px;display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line)}.dl-chat__thread-header .dl-chat__avatar{width:36px;height:36px;flex:0 0 36px}.dl-chat__thread-header>div{min-width:0;display:flex;flex-direction:column}.dl-chat__thread-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.dl-chat__thread-status{position:relative;padding-left:11px;color:var(--muted);font-size:11px}.dl-chat__thread-status:before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;border:1.5px solid #87969d;border-radius:50%;transform:translateY(-50%)}.dl-chat__thread-status.is-online:before{border-color:var(--green);background:var(--green)}.dl-chat__back{display:none;color:var(--teal)}
-.dl-chat__older{justify-self:center;margin:7px 0 0;padding:4px 8px;border:0;color:var(--teal-deep);background:transparent;font-size:11px;cursor:pointer}.dl-chat__older:hover{text-decoration:underline}.dl-chat__messages{min-height:0;overflow-y:auto;padding:12px 18px 18px;scroll-behavior:smooth}.dl-chat__date{display:flex;align-items:center;gap:10px;margin:12px 0;color:#71838c;font-size:10px}.dl-chat__date:before,.dl-chat__date:after{content:"";height:1px;flex:1;background:#e3e9ec}.dl-chat__message{display:flex;margin:4px 0}.dl-chat__message.is-mine{justify-content:flex-end}.dl-chat__bubble{max-width:min(76%,430px);padding:8px 10px 6px;color:var(--ink);background:#edf2f4;border-radius:5px 11px 11px 11px;font-size:13px;line-height:1.42;overflow-wrap:anywhere}.dl-chat__message.is-mine .dl-chat__bubble{color:#fff;background:var(--teal);border-radius:11px 5px 11px 11px}.dl-chat__bubble>span{white-space:pre-wrap}.dl-chat__bubble time{display:block;margin-top:3px;color:#6c7e87;font-size:9px;text-align:right}.dl-chat__message.is-mine time{color:rgba(255,255,255,.72)}.dl-chat__retry{display:block;margin:5px 0 0 auto;padding:2px 7px;border:1px solid rgba(255,255,255,.65);border-radius:4px;color:#fff;background:transparent;font-size:10px;cursor:pointer}.dl-chat__retry:hover{background:rgba(255,255,255,.12)}.dl-chat__thread-empty{max-width:300px;margin:auto;padding:24px;color:var(--muted);font-size:12px;line-height:1.5;text-align:center}.dl-chat__typing{height:20px;padding:0 18px;color:var(--muted);font-size:11px;font-style:italic}
-.dl-chat__compose{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:8px;padding:10px 14px 22px;border-top:1px solid var(--line)}.dl-chat__composer{width:100%;min-height:38px;max-height:92px;resize:none;padding:9px 11px;color:var(--ink);border:1px solid #bdcbd1;border-radius:7px;line-height:1.35;outline:0}.dl-chat__send{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:7px;color:#fff;background:var(--teal);cursor:pointer;transition:background-color 120ms ease-out}.dl-chat__send:hover{background:var(--teal-deep)}.dl-chat__send:disabled{cursor:not-allowed;opacity:.45}.dl-chat__send svg{width:19px;height:19px;fill:currentColor}.dl-chat__hint{position:absolute;left:15px;bottom:5px;color:#829098;font-size:9px}
-.dl-chat.is-minimized{left:auto!important;top:auto!important;right:22px!important;bottom:0!important;width:280px!important;height:46px!important;min-height:46px;resize:none;border-radius:9px 9px 0 0}.dl-chat.is-minimized .dl-chat__titlebar{cursor:pointer}.dl-chat.is-minimized .dl-chat__body,.dl-chat.is-minimized .dl-chat__connection,.dl-chat.is-minimized .dl-chat__error{display:none}
-@container (max-width:520px){.dl-chat__body{grid-template-columns:1fr}.dl-chat__main{display:none}.dl-chat.has-selection .dl-chat__sidebar{display:none}.dl-chat.has-selection .dl-chat__main{display:block}.dl-chat__back{display:grid}.dl-chat__hint{display:none}.dl-chat__compose{padding-bottom:10px}}
-@media(max-width:600px){.dl-chat{inset:0;width:100%;height:100dvh;min-width:0;min-height:0;border:0;border-radius:0;resize:none}.dl-chat.is-minimized{inset:auto 12px 0 auto!important;width:min(280px,calc(100vw - 24px))!important;border:1px solid #c7d2d7;border-bottom:0}.dl-chat__titlebar{cursor:default}.dl-chat__popout{display:none}}
+.dl-chat__body{min-height:0;flex:1;display:grid;grid-template-columns:260px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.dl-chat__sidebar{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--teal-wash);border-right:1px solid var(--line)}
+.dl-chat__search-wrap{position:relative;display:block;margin:14px 12px 9px}.dl-chat__search-wrap>svg{position:absolute;left:10px;top:50%;width:17px;height:17px;fill:#70818a;transform:translateY(-50%);pointer-events:none}.dl-chat__search{width:100%;height:36px;padding:0 10px 0 34px;color:var(--ink);background:#fff;border:1px solid #c7d2d7;border-radius:6px;outline:0}.dl-chat__search:focus,.dl-chat__composer:focus{border-color:var(--teal);box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 15%,transparent)}
+.dl-chat__scroll{flex:1 1 auto;min-height:0;overflow:auto;padding:0 8px 16px}.dl-chat__scroll h2{margin:14px 8px 6px;color:#63757e;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
+.dl-chat__person{position:relative;width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) 8px;align-items:center;gap:10px;padding:8px;border:0;border-radius:7px;text-align:left;color:var(--ink);background:transparent;cursor:pointer;transition:background-color 120ms ease-out}.dl-chat__person:hover{background:var(--teal-hover)}.dl-chat__person.is-selected{background:var(--teal-selected)}.dl-chat__avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--teal-fore);background:var(--teal);font-size:12px;font-weight:700;letter-spacing:.03em}.dl-chat__person-copy{min-width:0}.dl-chat__person-top,.dl-chat__person-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}.dl-chat__person-top strong,.dl-chat__person-bottom>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dl-chat__person-top strong{font-size:13px;font-weight:600}.dl-chat__person-top time{flex:0 0 auto;color:#778891;font-size:10px}.dl-chat__person-bottom>span:first-child{color:var(--muted);font-size:11px}.dl-chat__presence{width:8px;height:8px;border:2px solid #87969d;border-radius:50%}.dl-chat__presence.is-online{border-color:var(--green);background:var(--green)}.dl-chat__unread{display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;color:var(--red-fore)!important;background:var(--red);font-size:10px!important;font-weight:700}.dl-chat__list-empty{margin:6px 8px 12px;color:var(--muted);font-size:12px;line-height:1.45}
+.dl-chat__main{min-width:0;min-height:0;overflow:hidden;height:100%;display:flex;flex-direction:column}.dl-chat__empty{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px;text-align:center}.dl-chat__empty-icon{display:grid;place-items:center;width:58px;height:58px;color:var(--teal);background:var(--teal-soft);border-radius:50%}.dl-chat__empty-icon svg{width:27px;height:27px;fill:currentColor}.dl-chat__empty h2{margin:17px 0 5px;font-size:17px}.dl-chat__empty p{max-width:280px;margin:0;color:var(--muted);font-size:13px;line-height:1.5}
+.dl-chat__thread{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.dl-chat__thread[hidden],.dl-chat__empty[hidden]{display:none}.dl-chat__thread-header{flex:0 0 auto;height:62px;display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line)}.dl-chat__thread-header .dl-chat__avatar{width:36px;height:36px;flex:0 0 36px}.dl-chat__thread-header>div{min-width:0;display:flex;flex-direction:column}.dl-chat__thread-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.dl-chat__thread-status{position:relative;padding-left:11px;color:var(--muted);font-size:11px}.dl-chat__thread-status:before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;border:1.5px solid #87969d;border-radius:50%;transform:translateY(-50%)}.dl-chat__thread-status.is-online:before{border-color:var(--green);background:var(--green)}.dl-chat__back{display:none;color:var(--teal)}
+.dl-chat__older{flex:0 0 auto;align-self:center;margin:7px 0 0;padding:4px 8px;border:0;color:var(--teal-deep);background:transparent;font-size:11px;cursor:pointer}.dl-chat__older:hover{text-decoration:underline}.dl-chat__messages{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 18px 18px;scroll-behavior:smooth}.dl-chat__date{display:flex;align-items:center;gap:10px;margin:12px 0;color:#71838c;font-size:10px}.dl-chat__date:before,.dl-chat__date:after{content:"";height:1px;flex:1;background:#e3e9ec}.dl-chat__message{display:flex;margin:4px 0}.dl-chat__message.is-mine{justify-content:flex-end}.dl-chat__bubble{max-width:min(76%,430px);padding:8px 10px 6px;color:var(--ink);background:#edf2f4;border-radius:5px 11px 11px 11px;font-size:13px;line-height:1.42;overflow-wrap:anywhere}.dl-chat__message.is-mine .dl-chat__bubble{color:var(--teal-fore);background:var(--teal);border-radius:11px 5px 11px 11px}.dl-chat__bubble>span{white-space:pre-wrap}.dl-chat__bubble time{display:block;margin-top:3px;color:#6c7e87;font-size:9px;text-align:right}.dl-chat__message.is-mine time{color:color-mix(in srgb,var(--teal-fore) 72%,transparent)}.dl-chat__retry{display:block;margin:5px 0 0 auto;padding:2px 7px;border:1px solid rgba(255,255,255,.65);border-radius:4px;color:var(--teal-fore);background:transparent;font-size:10px;cursor:pointer}.dl-chat__retry:hover{background:rgba(255,255,255,.12)}.dl-chat__thread-empty{max-width:300px;margin:auto;padding:24px;color:var(--muted);font-size:12px;line-height:1.5;text-align:center}.dl-chat__typing{flex:0 0 auto;height:20px;padding:0 18px;color:var(--muted);font-size:11px;font-style:italic}
+.dl-chat__compose{flex:0 0 auto;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:8px;padding:10px 14px 22px;border-top:1px solid var(--line)}.dl-chat__composer{width:100%;min-height:38px;max-height:92px;overflow-y:auto;resize:none;box-sizing:border-box;padding:9px 11px;color:var(--ink);border:1px solid #bdcbd1;border-radius:7px;line-height:1.35;outline:0}.dl-chat__send{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:7px;color:var(--teal-fore);background:var(--teal);cursor:pointer;transition:background-color 120ms ease-out}.dl-chat__send:hover{background:var(--teal-deep)}.dl-chat__send:disabled{cursor:not-allowed;opacity:.45}.dl-chat__send svg{width:19px;height:19px;fill:currentColor}.dl-chat__hint{position:absolute;left:15px;bottom:5px;color:#829098;font-size:9px}
+.dl-chat__restore{display:none}
+.dl-chat.is-minimized{left:auto!important;top:auto!important;right:max(22px,env(safe-area-inset-right))!important;bottom:max(22px,env(safe-area-inset-bottom))!important;width:min(310px,calc(100vw - 32px))!important;min-width:0;height:68px!important;min-height:68px;resize:none;border:1px solid var(--teal-deep);border-radius:12px;background:var(--teal);color:var(--teal-fore);box-shadow:0 6px 24px rgba(23,36,43,.24)}
+.dl-chat.is-minimized .dl-chat__titlebar{position:absolute;inset:0 0 0 auto;height:68px;padding:0 8px;cursor:default;background:transparent;touch-action:auto}
+.dl-chat.is-minimized .dl-chat__brand{display:contents}
+.dl-chat.is-minimized .dl-chat__brand>.dl-chat__mark,.dl-chat.is-minimized .dl-chat__brand>strong,.dl-chat.is-minimized .dl-chat__sound,.dl-chat.is-minimized .dl-chat__popout,.dl-chat.is-minimized .dl-chat__minimize{display:none}
+.dl-chat.is-minimized .dl-chat__title-unread{margin-right:10px}
+.dl-chat.is-minimized .dl-chat__close{width:44px;height:44px;border:1px solid rgba(255,255,255,.4);border-radius:7px}
+.dl-chat.is-minimized .dl-chat__restore{display:flex;align-items:center;gap:12px;flex:1;width:100%;padding:10px 110px 10px 16px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;touch-action:manipulation}
+.dl-chat.is-minimized .dl-chat__restore:hover{background:rgba(255,255,255,.1)}
+.dl-chat__restore .dl-chat__mark{flex:none;width:32px;height:32px}.dl-chat__restore .dl-chat__mark svg{width:28px;height:28px}
+.dl-chat__restore strong,.dl-chat__restore small{display:block;white-space:nowrap}.dl-chat__restore strong{font-size:15px}.dl-chat__restore small{margin-top:3px;font-size:11px}
+.dl-chat.is-minimized .dl-chat__body,.dl-chat.is-minimized .dl-chat__connection,.dl-chat.is-minimized .dl-chat__error{display:none}
+@container (max-width:520px){.dl-chat__body{grid-template-columns:1fr}.dl-chat__main{display:none}.dl-chat.has-selection .dl-chat__sidebar{display:none}.dl-chat.has-selection .dl-chat__main{display:flex}.dl-chat__back{display:grid}.dl-chat__hint{display:none}.dl-chat__compose{padding-bottom:10px}}
+@media(max-width:600px){.dl-chat{inset:0;width:100%;height:100dvh;min-width:0;min-height:0;border:0;border-radius:0;resize:none}.dl-chat.is-minimized{right:max(12px,env(safe-area-inset-right))!important;bottom:max(12px,env(safe-area-inset-bottom))!important;width:min(310px,calc(100vw - 24px))!important}.dl-chat__titlebar{cursor:default}.dl-chat__popout{display:none}}
+@supports not (color:color-mix(in srgb,red,blue)){.dl-chat{--teal-deep:#2f596d;--teal-soft:#e9f1f4;--teal-wash:#f4f7f8;--teal-hover:#e5edef;--teal-selected:#dce8ed}}
 @media(prefers-reduced-motion:reduce){.dl-chat *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
 `;
+  const SOUND_KEY = "datalynk-chat-sound";
   const windows = /* @__PURE__ */ new WeakMap();
   function openChat(chat, options = {}) {
     const doc = options.document || document;
@@ -1730,6 +1793,8 @@ button,input,textarea{font:inherit}
       __publicField(this, "resizeObserver");
       __publicField(this, "renderedMessageIds", "");
       __publicField(this, "destroyed", false);
+      __publicField(this, "stopReadVisibility");
+      __publicField(this, "onVisibilityChange", () => void this.chat.markLatestRead().catch(() => void 0));
       __publicField(this, "onDestroyed");
       this.chat = chat;
       this.options = options;
@@ -1740,9 +1805,11 @@ button,input,textarea{font:inherit}
       this.root.innerHTML = `<style>${CHAT_CSS}</style>${CHAT_HTML}`;
       this.doc.body.appendChild(this.host);
       this.bind();
+      this.stopReadVisibility = this.chat.setReadVisibility(() => this.canReadSelectedThread());
       this.restoreGeometry();
       this.subscribe();
       this.restoreMinimized();
+      this.renderSound();
       void this.initializeGui();
       this.searchInput.focus();
     }
@@ -1753,20 +1820,24 @@ button,input,textarea{font:inherit}
       this.host.hidden = false;
       this.setMinimized(false);
       this.searchInput.focus();
+      this.onVisibilityChange();
     }
     destroy() {
-      var _a, _b, _c, _d, _e, _f;
+      var _a, _b, _c, _d, _e, _f, _g, _h;
       if (this.destroyed) return;
       this.destroyed = true;
+      (_a = this.stopReadVisibility) == null ? void 0 : _a.call(this);
+      this.doc.removeEventListener("visibilitychange", this.onVisibilityChange);
+      (_b = this.doc.defaultView) == null ? void 0 : _b.removeEventListener("focus", this.onVisibilityChange);
       this.subscriptions.forEach((subscription) => subscription.unsubscribe());
-      (_a = this.resizeObserver) == null ? void 0 : _a.disconnect();
+      (_c = this.resizeObserver) == null ? void 0 : _c.disconnect();
       clearTimeout(this.searchTimer);
       clearTimeout(this.typingTimer);
       if (this.typingSent && this.selected) void this.chat.setTyping(this.selected.id, false).catch(() => void 0);
       this.host.remove();
-      (_c = (_b = this.options).onClose) == null ? void 0 : _c.call(_b);
-      (_d = this.onDestroyed) == null ? void 0 : _d.call(this);
-      if (this.options.popout && !((_e = this.doc.defaultView) == null ? void 0 : _e.closed)) (_f = this.doc.defaultView) == null ? void 0 : _f.close();
+      (_e = (_d = this.options).onClose) == null ? void 0 : _e.call(_d);
+      (_f = this.onDestroyed) == null ? void 0 : _f.call(this);
+      if (this.options.popout && !((_g = this.doc.defaultView) == null ? void 0 : _g.closed)) (_h = this.doc.defaultView) == null ? void 0 : _h.close();
     }
     get shell() {
       return this.query(".dl-chat");
@@ -1786,23 +1857,49 @@ button,input,textarea{font:inherit}
     get sendButton() {
       return this.query(".dl-chat__send");
     }
+    canReadSelectedThread() {
+      return !this.destroyed && !this.host.hidden && !this.shell.classList.contains("is-minimized") && this.doc.visibilityState === "visible" && Boolean(this.doc.hasFocus()) && this.query(".dl-chat__thread").getClientRects().length > 0;
+    }
     query(selector) {
       const node = this.root.querySelector(selector);
       if (!node) throw new Error(`Missing chat element: ${selector}`);
       return node;
     }
     bind() {
-      var _a;
+      var _a, _b;
       this.query(".dl-chat__close").addEventListener("click", () => this.destroy());
+      this.query(".dl-chat__restore").addEventListener("click", () => this.setMinimized(false));
       this.query(".dl-chat__minimize").addEventListener("click", () => this.setMinimized(!this.shell.classList.contains("is-minimized")));
       this.query(".dl-chat__popout").addEventListener("click", () => this.popout());
+      this.query(".dl-chat__sound").addEventListener("click", () => this.setMuted(!this.isMuted()));
       this.query(".dl-chat__back").addEventListener("click", () => {
         this.shell.classList.remove("has-selection");
         this.searchInput.focus();
       });
       this.searchInput.addEventListener("input", () => {
+        this.renderPeople(this.chat.users$.value);
         clearTimeout(this.searchTimer);
-        this.searchTimer = setTimeout(() => void this.chat.loadDirectory(this.searchInput.value).catch(() => void 0), 220);
+        this.searchTimer = setTimeout(() => void this.chat.loadDirectory(this.searchInput.value).catch(() => void 0), 150);
+      });
+      this.searchInput.addEventListener("keydown", (event) => {
+        const first = this.query(".dl-chat__people").querySelector(".dl-chat__person");
+        if (event.key === "Enter" && first) {
+          event.preventDefault();
+          first.click();
+        } else if (event.key === "ArrowDown" && first) {
+          event.preventDefault();
+          first.focus();
+        }
+      });
+      this.query(".dl-chat__people").addEventListener("keydown", (event) => {
+        if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+        const buttons = Array.from(this.query(".dl-chat__people").querySelectorAll(".dl-chat__person"));
+        const index = buttons.indexOf(this.doc.activeElement);
+        if (index < 0) return;
+        event.preventDefault();
+        if (event.key === "ArrowDown") buttons[Math.min(index + 1, buttons.length - 1)].focus();
+        else if (index === 0) this.searchInput.focus();
+        else buttons[index - 1].focus();
       });
       this.composer.addEventListener("input", () => this.onComposerInput());
       this.composer.addEventListener("keydown", (event) => {
@@ -1822,6 +1919,8 @@ button,input,textarea{font:inherit}
         this.resizeObserver.observe(this.shell);
       }
       (_a = this.doc.defaultView) == null ? void 0 : _a.addEventListener("beforeunload", () => this.destroy(), { once: true });
+      this.doc.addEventListener("visibilitychange", this.onVisibilityChange);
+      (_b = this.doc.defaultView) == null ? void 0 : _b.addEventListener("focus", this.onVisibilityChange);
     }
     subscribe() {
       this.subscriptions.push(
@@ -1838,10 +1937,18 @@ button,input,textarea{font:inherit}
         this.api.status$.subscribe((status) => this.renderConnection(status)),
         this.chat.unread$.subscribe((count) => {
           var _a, _b;
-          return (_b = (_a = this.options).onUnreadChange) == null ? void 0 : _b.call(_a, count);
+          this.renderUnread(count);
+          (_b = (_a = this.options).onUnreadChange) == null ? void 0 : _b.call(_a, count);
         })
       );
     }
+    /** Titlebar count; stays visible while the window is minimized. */
+    renderUnread(count) {
+      const badge = this.query(".dl-chat__title-unread");
+      badge.toggleAttribute("hidden", count <= 0);
+      badge.textContent = count > 99 ? "99+" : String(count);
+      badge.setAttribute("aria-label", `${count} unread message${count === 1 ? "" : "s"}`);
+    }
     renderPeople(users) {
       const query = this.searchInput.value.trim().toLowerCase();
       const conversationIds = new Set(this.chat.conversations$.value.map((row) => row.peer.id));
@@ -1851,11 +1958,11 @@ button,input,textarea{font:inherit}
       if (!filtered.length) {
         const empty = this.doc.createElement("p");
         empty.className = "dl-chat__list-empty";
-        empty.textContent = query ? "No matching people" : "Search for someone to start a conversation.";
+        empty.textContent = query ? "No matching people" : "No other people to start a conversation with.";
         target.appendChild(empty);
         return;
       }
-      filtered.slice(0, query ? 30 : 8).forEach((user) => target.appendChild(this.personButton(user)));
+      filtered.slice(0, 10).forEach((user) => target.appendChild(this.personButton(user)));
     }
     renderConversations(rows) {
       this.conversationList.replaceChildren();
@@ -1997,7 +2104,13 @@ button,input,textarea{font:inherit}
       node.textContent = status === "unauthorized" ? "Your session expired. Sign in again to continue chatting." : "Chat is reconnecting. Messages cannot be sent yet.";
       this.sendButton.disabled = status !== "online" || !this.composer.value.trim();
     }
+    growComposer() {
+      const box = this.composer;
+      box.style.height = "auto";
+      box.style.height = `${box.scrollHeight + box.offsetHeight - box.clientHeight}px`;
+    }
     onComposerInput() {
+      this.growComposer();
       if (!this.selected) return;
       this.writeDraft(this.selected.id, this.composer.value);
       this.sendButton.disabled = !this.composer.value.trim() || this.api.status !== "online";
@@ -2021,6 +2134,7 @@ button,input,textarea{font:inherit}
       try {
         await this.chat.send(peer.id, body);
         this.composer.value = "";
+        this.growComposer();
         this.writeDraft(peer.id, "");
         if (this.typingSent) await this.chat.setTyping(peer.id, false).catch(() => void 0);
         this.typingSent = false;
@@ -2031,7 +2145,7 @@ button,input,textarea{font:inherit}
       }
     }
     popout() {
-      var _a;
+      var _a, _b;
       const popup = (_a = this.doc.defaultView) == null ? void 0 : _a.open("", "datalynk-chat", "popup,width=760,height=720,resizable=yes");
       if (!popup) {
         this.chat.error$.next("Allow pop-ups to open chat in a separate window.");
@@ -2039,6 +2153,11 @@ button,input,textarea{font:inherit}
       }
       popup.document.title = this.options.title || "Datalynk Chat";
       popup.document.body.style.margin = "0";
+      const theme = (_b = this.doc.defaultView) == null ? void 0 : _b.getComputedStyle(this.doc.documentElement);
+      ["--primary", "--primary-fore", "--accent", "--accentText"].forEach((name) => {
+        const value = theme == null ? void 0 : theme.getPropertyValue(name).trim();
+        if (value) popup.document.documentElement.style.setProperty(name, value);
+      });
       openChat(this.chat, { ...this.options, document: popup.document, popout: true });
       this.destroy();
     }
@@ -2084,6 +2203,7 @@ button,input,textarea{font:inherit}
     async initializeGui() {
       try {
         await this.chat.initialize();
+        void this.chat.loadDirectory(this.searchInput.value).catch(() => void 0);
         const selectedId = this.readSelectedUser();
         if (!selectedId || this.chat.selectedUser$.value) return;
         const conversation = this.chat.conversations$.value.find((row) => row.peer.id === selectedId);
@@ -2094,6 +2214,30 @@ button,input,textarea{font:inherit}
       } catch {
       }
     }
+    isMuted() {
+      try {
+        return localStorage.getItem(SOUND_KEY) === "off";
+      } catch {
+        return false;
+      }
+    }
+    setMuted(muted) {
+      try {
+        if (muted) localStorage.setItem(SOUND_KEY, "off");
+        else localStorage.removeItem(SOUND_KEY);
+      } catch {
+      }
+      this.renderSound();
+    }
+    renderSound() {
+      var _a;
+      const muted = this.isMuted();
+      const button = this.query(".dl-chat__sound");
+      button.setAttribute("aria-pressed", String(muted));
+      button.setAttribute("aria-label", muted ? "Unmute message sound" : "Mute message sound");
+      button.title = muted ? "Unmute message sound" : "Mute message sound";
+      (_a = button.querySelector("path")) == null ? void 0 : _a.setAttribute("d", muted ? SOUND_OFF_ICON : SOUND_ON_ICON);
+    }
     restoreMinimized() {
       try {
         if (localStorage.getItem(this.storageKey("minimized")) === "1") this.setMinimized(true, false);
@@ -2105,11 +2249,17 @@ button,input,textarea{font:inherit}
       if (this.options.popout) return;
       if (minimized && !this.shell.classList.contains("is-minimized")) this.saveGeometry();
       this.shell.classList.toggle("is-minimized", minimized);
+      this.query(".dl-chat__restore").hidden = !minimized;
       const button = this.query(".dl-chat__minimize");
       button.setAttribute("aria-label", minimized ? "Restore chat" : "Minimize chat");
       button.title = minimized ? "Restore" : "Minimize";
       (_a = button.querySelector("path")) == null ? void 0 : _a.setAttribute("d", minimized ? "M7.4 15.4 12 10.8l4.6 4.6L18 14l-6-6-6 6 1.4 1.4z" : "M5 11h14v2H5z");
       if (!minimized) this.restoreGeometry();
+      if (!minimized) this.onVisibilityChange();
+      if (persist) {
+        if (minimized) this.query(".dl-chat__restore").focus();
+        else this.searchInput.focus();
+      }
       if (persist) this.saveMinimized(minimized);
     }
     saveMinimized(value) {
@@ -2138,22 +2288,41 @@ button,input,textarea{font:inherit}
       var _a, _b;
       if (this.options.popout) return;
       try {
+        const viewWidth = ((_a = this.doc.defaultView) == null ? void 0 : _a.innerWidth) || 760;
+        const viewHeight = ((_b = this.doc.defaultView) == null ? void 0 : _b.innerHeight) || 720;
+        if (viewWidth <= 600) {
+          ["width", "height", "left", "top", "right", "bottom"].forEach((key) => this.shell.style.removeProperty(key));
+          return;
+        }
         const stored = JSON.parse(localStorage.getItem(this.storageKey("geometry")) || "null");
-        if (!stored) return;
-        const maxWidth = Math.max(360, (((_a = this.doc.defaultView) == null ? void 0 : _a.innerWidth) || 760) - 16);
-        const maxHeight = Math.max(460, (((_b = this.doc.defaultView) == null ? void 0 : _b.innerHeight) || 720) - 16);
-        this.shell.style.width = Math.min(maxWidth, Math.max(360, stored.width || 720)) + "px";
-        this.shell.style.height = Math.min(maxHeight, Math.max(460, stored.height || 640)) + "px";
-        this.shell.style.left = Math.max(0, Math.min(stored.left || 8, maxWidth - 120)) + "px";
-        this.shell.style.top = Math.max(0, Math.min(stored.top || 8, maxHeight - 60)) + "px";
-        this.shell.style.right = "auto";
-        this.shell.style.bottom = "auto";
+        const valid = stored && [stored.width, stored.height, stored.left, stored.top].every((value) => typeof value === "number" && Number.isFinite(value)) && stored.width > 0 && stored.height > 0;
+        const margin = this.options.placement === "bottom-right" ? 22 : 8;
+        if (valid) {
+          const width = Math.min(viewWidth - margin * 2, Math.max(560, stored.width));
+          const height = Math.min(viewHeight - margin * 2, Math.max(460, stored.height));
+          this.shell.style.width = width + "px";
+          this.shell.style.height = height + "px";
+          if (this.options.placement !== "bottom-right") {
+            const clamp = (value, max) => Math.max(margin, Math.min(value, max));
+            this.shell.style.left = clamp(stored.left, viewWidth - width - margin) + "px";
+            this.shell.style.top = clamp(stored.top, viewHeight - height - margin) + "px";
+            this.shell.style.right = "auto";
+            this.shell.style.bottom = "auto";
+          }
+        }
+        if (this.options.placement === "bottom-right") {
+          this.shell.style.left = "auto";
+          this.shell.style.top = "auto";
+          this.shell.style.right = margin + "px";
+          this.shell.style.bottom = margin + "px";
+        }
       } catch {
       }
     }
     saveGeometry() {
       if (this.options.popout || this.destroyed || this.shell.classList.contains("is-minimized")) return;
       const rect = this.shell.getBoundingClientRect();
+      if (!this.host.isConnected || this.host.hidden || rect.width <= 0 || rect.height <= 0) return;
       try {
         localStorage.setItem(this.storageKey("geometry"), JSON.stringify({
           left: rect.left,

package/dist/chat.d.ts

@@ -49,9 +49,12 @@ export declare class Chat {
     private socketUnsubscribe?;
     private typingTimers;
     private initialized;
+    private resyncing?;
+    private readVisibility;
     constructor(api: Api);
     initialize(force?: boolean): Promise<void>;
     available(): Promise<boolean>;
+    private directorySeq;
     loadDirectory(search?: string, cursor?: string): Promise<ChatUser[]>;
     loadConversations(): Promise<ChatConversation[]>;
     selectUser(user: ChatUser): Promise<void>;
@@ -59,12 +62,22 @@ export declare class Chat {
     send(userId: number, body: string, clientId?: string): Promise<ChatMessage>;
     retry(message: ChatMessage): Promise<ChatMessage>;
     setTyping(userId: number, typing: boolean): Promise<void>;
+    /** Only the visible chat window may acknowledge messages as seen. */
+    setReadVisibility(visible: () => boolean): () => void;
     markLatestRead(): Promise<void>;
     destroy(): void;
     private connectRealtime;
+    /**
+     * Catch up after every (re)subscribe. Events published while the socket was down
+     * (up to the reconnect delay plus ticket fetch) are never replayed, so reload the
+     * inbox and the newest page of the open thread from the API.
+     */
+    private resync;
     private onSocketEvent;
     private applyReadReceipt;
     private upsertMessage;
+    /** Stream order for persisted messages; optimistic/failed sends stay at the end in send order. */
+    private sortMessages;
     private mergeMessages;
     private run;
     private currentUserId;

package/dist/chat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat.d.ts","sourceRoot":"","sources":["../src/chat.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"chat.d.ts","sourceRoot":"","sources":["../src/chat.ts"],"names":[],"mappings":"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"}