@cloudflare/realtimekit-ui 1.1.0-staging.9 → 1.1.0

package/dist/components/p-c3bfa8f1.js

@@ -0,0 +1,437 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-fdad14c9.js';
+import { e as defaultIconPack, i as useLanguage } from './p-f19b4abc.js';
+import { S as SyncWithStore } from './p-e334e15c.js';
+import { d as defineCustomElement$3 } from './p-e229128b.js';
+import { d as defineCustomElement$2 } from './p-a3cc7425.js';
+import { d as defineCustomElement$1 } from './p-dfdbb665.js';
+import { d as debounce } from './p-1dca17d1.js';
+
+const rtkPaginatedListCss = ".scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{position:relative;display:flex;flex-direction:column;flex:1}:host(.chat-selector-paginated-list) .container{box-sizing:border-box;display:flex;flex-direction:column;padding:var(--rtk-space-2, 8px);flex:1 0 0px;overflow-y:scroll}:host(.chat-selector-paginated-list) .private-chat-label{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px)}:host(.chat-selector-paginated-list) .private-chat-label rtk-avatar{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}:host(.chat-selector-paginated-list) .show-new-messages-ctr.active{display:none}.private-chat-unread-badge{height:var(--rtk-space-2, 8px);width:var(--rtk-space-2, 8px);border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}:host(.pinned-message-selector-paginated-list) .container{box-sizing:border-box;display:flex;flex-direction:column-reverse;padding:var(--rtk-space-2, 8px);flex:1 0 0px;overflow-y:scroll}:host(.pinned-message-selector-paginated-list) .page{position:relative;box-sizing:border-box}:host(.pinned-message-selector-paginated-list) .pinned-message{box-sizing:border-box;display:flex;width:100%;cursor:pointer;flex-direction:row;overflow:hidden;border-radius:var(--rtk-border-radius-sm, 4px)}:host(.pinned-message-selector-paginated-list) .pinned-message:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}:host(.pinned-message-selector-paginated-list) .pinned-message-container{display:flex;width:100%;flex-direction:row;align-items:flex-start;padding:var(--rtk-space-2, 8px)}:host(.pinned-message-selector-paginated-list) .pinned-message-content{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);display:flex;min-width:var(--rtk-space-0, 0px);flex:1 1 0%;flex-direction:column}:host(.pinned-message-selector-paginated-list) .pinned-message-time{font-size:12px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}:host(.pinned-message-selector-paginated-list) .pinned-message-preview{margin-bottom:var(--rtk-space-2, 8px);word-break:break-all;color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}:host(.pinned-message-selector-paginated-list) rtk-avatar{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}.container{box-sizing:border-box;display:flex;flex-direction:column-reverse;padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);flex:1 0 0px;overflow-y:scroll}.file-picker{display:none}.chat *:first-child{margin-top:var(--rtk-space-0, 0px)}.chat .head{display:flex;align-items:center}.chat .head .name{margin-right:var(--rtk-space-4, 16px);font-size:12px;font-weight:700}.chat .head .time{font-size:12px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.chat .body{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);overflow-wrap:break-word;font-size:14px;line-height:1.375}.chat .body .emoji{font-size:24px}p{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-3, 12px)}rtk-text-message,rtk-image-message,rtk-file-message{margin-top:var(--rtk-space-4, 16px);display:block;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);font-family:var(--rtk-font-family, sans-serif);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));box-sizing:border-box}*[is-continued]{margin-top:var(--rtk-space-3, 12px)}rtk-text-message[is-continued]{margin-top:var(--rtk-space-2, 8px)}.chat .image{position:relative;height:var(--rtk-space-40, 160px);max-width:var(--rtk-space-64, 256px);cursor:pointer}.chat .image img{display:none;height:100%;width:100%;border-radius:var(--rtk-border-radius-sm, 4px);-o-object-fit:cover;object-fit:cover}.chat .image .image-spinner{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.chat .image .image-spinner rtk-spinner{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}.chat .image .image-errored{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);background-color:rgba(var(--rtk-colors-danger, 255 45 45) / 0.1);--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}.chat .image .actions{display:none;height:var(--rtk-space-8, 32px);align-items:center;position:absolute;top:var(--rtk-space-2, 8px);right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.chat .image .actions .action{height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);border-radius:var(--rtk-border-radius-none, 0);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.chat .image .actions .action:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.image.loaded img{display:block}.image.loaded .image-spinner{display:none}.image:hover .actions,.image:focus .actions{display:flex}.chat .file{display:flex;align-items:center;gap:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);padding-top:var(--rtk-space-1\\.5, 6px);padding-bottom:var(--rtk-space-1\\.5, 6px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.chat .file .file-data{flex:1 1 0%}.chat .file .file-data .name{word-break:break-all;color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.chat .file .file-data .file-data-split{margin-top:var(--rtk-space-0\\.5, 2px);display:flex;align-items:center;font-size:12px}.chat .file .file-data .file-data-split .ext{margin-right:var(--rtk-space-2, 8px);text-transform:uppercase;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.chat .file .file-data .file-data-split .divider{height:var(--rtk-space-4, 16px);width:var(--rtk-space-0\\.5, 2px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.chat .file .file-data .file-data-split .size{margin-left:var(--rtk-space-2, 8px)}.smallest-dom-element{width:1px}#top-scroll{transform:translateY(20vh);transform:translateY(20px)}a{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity));text-decoration-line:none}a:hover{text-decoration-line:underline}.show-new-messages-ctr{position:absolute;bottom:var(--rtk-space-4, 16px);right:var(--rtk-space-4, 16px);z-index:10;margin-top:calc(var(--rtk-space-14, 56px) * -1);--tw-translate-y:var(--rtk-space-28, 112px);transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.show-new-messages-ctr.active{--tw-translate-y:var(--rtk-space-0, 0px);transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:pointer;opacity:1}.show-new-messages{pointer-events:auto;border-radius:9999px}.show-new-messages:hover{border-radius:9999px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-ring-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}rtk-spinner,.empty-list{margin:auto}.page-wrapper{margin-left:var(--rtk-space-1, 4px);margin-right:var(--rtk-space-1, 4px);display:flex;flex-direction:column-reverse}.message-wrapper{margin-bottom:var(--rtk-space-2, 8px)}.pinned .message-wrapper{position:relative}.pinned .pin-icon{position:absolute;right:calc(var(--rtk-space-1, 4px) * -1);top:calc(var(--rtk-space-1, 4px) * -1);display:flex;border-radius:var(--rtk-border-radius-sm, 4px)}.pinned rtk-message-view{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));padding-top:var(--rtk-space-1, 4px);padding-bottom:var(--rtk-space-1, 4px)}.load-more-on-top-container{pointer-events:none;position:absolute;top:var(--rtk-space-2, 8px);right:var(--rtk-space-4, 16px);z-index:10}.load-more-icon{pointer-events:auto;border-radius:9999px}.load-more-icon:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-ring-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}";
+const RtkPaginatedListStyle0 = rtkPaginatedListCss;
+
+/**
+ * NOTE(ikabra): INFINITE SCROLL IMPLEMENTATION:
+ *
+ * Uses scrollend listener for 2way scrolling.
+ * Empty divs ($topRef, $bottomRef) act as scroll triggers to fetch new messages.
+ *
+ * UPWARD SCROLLING:
+ * - Fetch top anchor (element currently visible to the user near top)
+ * - Fetch older messages, push to end of 2D array
+ * - When exceeding pagesAllowed, delete pages and scroll back to anchor
+ *
+ * DOWNWARD SCROLLING:
+ * - Fetch bottom anchor (element currently visible to the user near bottom)
+ * - Fetch new page, insert at the start
+ * - Update timestamps & firstEmptyIndex, then rerender
+ * - When exceeding pagesAllowed, delete pages and scroll back to anchor
+ *
+ * ADDING NEW NODES:
+ * - If no pages exist, load old page
+ * - If on 1st page, append messages till page size is full and then load new page
+ *
+ * DELETE NODE:
+ * - If deleting the only available node, reset to initial state
+ * - If page is empty, delete it
+ * - Update timestamp curors
+ */
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RtkPaginatedList = /*@__PURE__*/ proxyCustomElement(class RtkPaginatedList extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        // Timestamp pertaining to the oldest stored message
+        this.oldestPaginatedTimestamp = 0;
+        // Timestamp pertaining to the latest stored message
+        this.latestPaginatedTimestamp = null;
+        // Timestamp pertaining to the latest message stored in backend
+        this.latestMessageTimestamp = null;
+        // the length of pages will always be pageSize + 2
+        this.pages = [];
+        // Controls whether to keep auto-scrolling when a new page load.
+        this.shouldScrollToBottom = false;
+        // Shows "scroll to bottom" button when new nodes arrive and autoscroll is off.
+        this.showNewMessagesCTR = false;
+        /** label to show when empty */
+        this.emptyListLabel = null;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.rerenderBoolean = false;
+        this.showEmptyListLabel = false;
+        this.isLoading = false;
+        this.isLoadingTop = false;
+        this.isLoadingBottom = false;
+        // Tells us if we need to scroll to a specific anchor after a rerender
+        this.pendingScrollAnchor = null;
+        this.isInView = (el) => {
+            const rect = el.getBoundingClientRect();
+            return rect.top >= 0 && rect.bottom <= window.innerHeight;
+        };
+    }
+    /**
+     * Rerender paginated list
+     */
+    async rerenderList() {
+        this.rerenderBoolean = !this.rerenderBoolean;
+    }
+    /**
+     * Adds a new node to the beginning of the paginated list
+     * @param {DataNode} node - The data node to add to the beginning of the list
+     */
+    async onNewNode(node) {
+        // if there are no pages, append to the first page
+        if (this.pages.length < 1) {
+            this.oldestPaginatedTimestamp = node.timeMs;
+            this.pages.unshift([node]);
+            this.latestPaginatedTimestamp = node.timeMs;
+            this.latestMessageTimestamp = node.timeMs;
+            this.rerender();
+            if (this.autoScroll)
+                this.$bottomRef.scrollIntoView({ behavior: 'smooth' });
+        }
+        else if (this.latestMessageTimestamp === this.latestPaginatedTimestamp) {
+            // append messages to the page if page has not reached full capacity
+            if (this.pages[0].length < this.pageSize) {
+                this.pages[0].unshift(node);
+                this.latestPaginatedTimestamp = node.timeMs;
+                this.latestMessageTimestamp = node.timeMs;
+                this.rerender();
+            }
+            else {
+                // if page is at full capacity, load next page
+                this.pages.unshift([node]);
+                this.latestPaginatedTimestamp = node.timeMs;
+                this.latestMessageTimestamp = node.timeMs;
+                // remove pages if out of bounds
+                if (this.pages.length > this.pagesAllowed)
+                    this.pages.pop();
+                // update timestamps
+                const lastPage = this.pages[this.pages.length - 1];
+                this.oldestPaginatedTimestamp = lastPage[lastPage.length - 1].timeMs;
+                this.rerender();
+            }
+            if (this.autoScroll)
+                this.$bottomRef.scrollIntoView({ behavior: 'smooth' });
+        }
+        else {
+            if (this.autoScroll)
+                this.scrollToBottom();
+        }
+        this.pendingScrollAnchor = null;
+    }
+    /**
+     * Deletes a node anywhere from the list
+     * @param {string} id - The id of the node to delete
+     * */
+    async onNodeDelete(id) {
+        var _a, _b;
+        for (let i = this.pages.length - 1; i >= 0; i--) {
+            const index = this.pages[i].findIndex((node) => node.id === id);
+            // if message not found, move on
+            if (index === -1)
+                continue;
+            // delete message
+            this.pages[i].splice(index, 1);
+            // if page is empty, delete it
+            if (this.pages[i].length === 0)
+                this.pages.splice(i, 1);
+            // update timestamps
+            const firstPage = this.pages[0];
+            const lastPage = this.pages[this.pages.length - 1];
+            this.latestPaginatedTimestamp = (_a = firstPage === null || firstPage === void 0 ? void 0 : firstPage[0]) === null || _a === void 0 ? void 0 : _a.timeMs;
+            this.oldestPaginatedTimestamp = (_b = lastPage === null || lastPage === void 0 ? void 0 : lastPage[lastPage.length - 1]) === null || _b === void 0 ? void 0 : _b.timeMs;
+            // if I have deleted the latest message, update latestMessageTimestamp
+            if (index === 0 && i === 0)
+                this.latestMessageTimestamp = this.latestPaginatedTimestamp;
+            this.rerender();
+            break;
+        }
+    }
+    /**
+     * Updates a new node anywhere in the list
+     * @param {string} id - The id of the node to update
+     * @param {DataNode} node - The updated data node
+     * */
+    async onNodeUpdate(id, node) {
+        for (let i = this.pages.length - 1; i >= 0; i--) {
+            const index = this.pages[i].findIndex((node) => node.id === id);
+            // if message not found, move on
+            if (index === -1)
+                continue;
+            // edit message
+            this.pages[i][index] = Object.assign(Object.assign({}, this.pages[i][index]), node);
+            this.rerender();
+            break;
+        }
+    }
+    /**
+     * Resets the paginated list to a given timestamp
+     */
+    async reset(timestamp = 0) {
+        this.oldestPaginatedTimestamp = timestamp;
+        this.latestPaginatedTimestamp = null;
+        this.pages = [];
+        this.shouldScrollToBottom = false;
+        this.showNewMessagesCTR = false;
+        this.pendingScrollAnchor = null;
+        this.isLoading = false;
+        this.isLoadingTop = false;
+        this.isLoadingBottom = false;
+        if (timestamp === 0) {
+            // preserve latestMessageTimestamp if reseting to a particular message
+            this.latestMessageTimestamp = null;
+        }
+        this.rerender();
+        await this.loadPrevPage();
+    }
+    connectedCallback() {
+        this.rerender = debounce(this.rerender.bind(this), 50, { maxWait: 200 });
+    }
+    componentDidLoad() {
+        // initial load
+        this.loadPrevPage();
+        if (this.$containerRef) {
+            this.$containerRef.onscrollend = async () => {
+                // do not do anything if we are scrolling to bottom
+                if (this.shouldScrollToBottom)
+                    return;
+                // handle top and bottom scroll
+                if (this.isInView(this.$bottomRef) &&
+                    this.latestMessageTimestamp > this.latestPaginatedTimestamp) {
+                    await this.loadNextPage();
+                }
+                else if (this.isInView(this.$topRef)) {
+                    this.showNewMessagesCTR = true;
+                    await this.loadPrevPage();
+                }
+            };
+        }
+    }
+    componentDidRender() {
+        if (!this.pendingScrollAnchor)
+            return;
+        const anchor = this.pendingScrollAnchor;
+        this.pendingScrollAnchor = null;
+        this.restoreScrollToAnchor(anchor);
+    }
+    async loadPrevPage() {
+        if (this.isLoading)
+            return;
+        const scrollAnchor = this.getScrollAnchor('top');
+        // if old timestamp is 0, it means we are at initial state
+        if (this.oldestPaginatedTimestamp === 0)
+            this.oldestPaginatedTimestamp = new Date().getTime();
+        // load data
+        this.isLoading = true;
+        this.isLoadingTop = true;
+        const data = await this.fetchData(this.oldestPaginatedTimestamp - 1, this.pageSize, true);
+        this.isLoading = false;
+        this.isLoadingTop = false;
+        // no more old messages to show, we are at the top of the page
+        if (!data.length)
+            return;
+        // add old data to the end of the array
+        this.pages.push(data);
+        // clear old pages when we reach the limit
+        if (this.pages.length > this.pagesAllowed)
+            this.pages.shift();
+        // update timestamps
+        const lastPage = this.pages[this.pages.length - 1];
+        this.oldestPaginatedTimestamp = lastPage[lastPage.length - 1].timeMs;
+        this.latestPaginatedTimestamp = this.pages[0][0].timeMs;
+        if (!this.latestMessageTimestamp)
+            this.latestMessageTimestamp = this.latestPaginatedTimestamp;
+        this.rerender();
+        // fix scroll position
+        if (scrollAnchor)
+            this.pendingScrollAnchor = scrollAnchor;
+    }
+    async loadNextPage() {
+        if (this.isLoading)
+            return [];
+        // Do nothing. New timestamp needs to be assigned by loadPrevPage method
+        if (!this.latestPaginatedTimestamp) {
+            this.showNewMessagesCTR = false;
+            return [];
+        }
+        this.isLoading = true;
+        this.isLoadingBottom = true;
+        const scrollAnchor = this.getScrollAnchor('bottom');
+        const data = await this.fetchData(this.latestPaginatedTimestamp + 1, this.pageSize, false);
+        this.isLoading = false;
+        this.isLoadingBottom = false;
+        // no more new messages to load
+        if (!data.length) {
+            this.latestMessageTimestamp = this.latestPaginatedTimestamp;
+            this.showNewMessagesCTR = false;
+            return [];
+        }
+        // load new messages and append to the start
+        const incoming = [...data].reverse();
+        if (this.pages.length === 0)
+            this.pages.unshift([]);
+        const firstPage = this.pages[0];
+        const spaceInFirstPage = this.pageSize - firstPage.length;
+        if (spaceInFirstPage > 0) {
+            const toFill = incoming.splice(0, spaceInFirstPage);
+            firstPage.unshift(...toFill);
+        }
+        while (incoming.length > 0) {
+            this.pages.unshift(incoming.splice(0, this.pageSize));
+        }
+        // remove pages if out of bounds
+        if (this.pages.length > this.pagesAllowed)
+            this.pages.pop();
+        // update timestamps
+        const lastPage = this.pages[this.pages.length - 1];
+        this.oldestPaginatedTimestamp = lastPage[lastPage.length - 1].timeMs;
+        this.latestPaginatedTimestamp = this.pages[0][0].timeMs;
+        this.rerender();
+        this.pendingScrollAnchor = scrollAnchor;
+        return data;
+    }
+    // Find the element that is closest to the top/bottom of the container
+    getScrollAnchor(edge = 'top') {
+        if (!this.$containerRef)
+            return null;
+        const containerRect = this.$containerRef.getBoundingClientRect();
+        const candidates = Array.from(this.$containerRef.querySelectorAll('[id]')).filter((el) => el.id !== 'top-scroll' && el.id !== 'bottom-scroll');
+        let best = null;
+        for (const el of candidates) {
+            const rect = el.getBoundingClientRect();
+            const isVisibleInContainer = rect.bottom > containerRect.top && rect.top < containerRect.bottom;
+            if (!isVisibleInContainer)
+                continue;
+            if (edge === 'top') {
+                const offsetTop = rect.top - containerRect.top;
+                if (best == null || (best.edge === 'top' && offsetTop < best.offsetTop)) {
+                    best = { id: el.id, edge: 'top', offsetTop };
+                }
+            }
+            else {
+                const offsetBottom = containerRect.bottom - rect.bottom;
+                if (best == null || (best.edge === 'bottom' && offsetBottom < best.offsetBottom)) {
+                    best = { id: el.id, edge: 'bottom', offsetBottom };
+                }
+            }
+        }
+        return best;
+    }
+    //instant scroll to anchor to make sure we are at the same position after a rerender
+    restoreScrollToAnchor(anchor) {
+        if (!this.$containerRef)
+            return;
+        // make element id safe to use inside a CSS selector
+        const escapeId = (id) => {
+            var _a;
+            const cssEscape = (_a = globalThis.CSS) === null || _a === void 0 ? void 0 : _a.escape;
+            return typeof cssEscape === 'function'
+                ? cssEscape(id)
+                : id.replace(/[^a-zA-Z0-9_-]/g, '\\$&');
+        };
+        const el = this.$containerRef.querySelector(`#${escapeId(anchor.id)}`);
+        if (!el)
+            return;
+        const containerRect = this.$containerRef.getBoundingClientRect();
+        const rect = el.getBoundingClientRect();
+        if (anchor.edge === 'top') {
+            const newOffsetTop = rect.top - containerRect.top;
+            this.$containerRef.scrollTop += newOffsetTop - anchor.offsetTop;
+        }
+        else {
+            const newOffsetBottom = containerRect.bottom - rect.bottom;
+            this.$containerRef.scrollTop += anchor.offsetBottom - newOffsetBottom;
+        }
+    }
+    // this method is called recursively based on shouldScrollToBottom (see loadNextPage)
+    async scrollToBottom() {
+        this.shouldScrollToBottom = true;
+        while (this.shouldScrollToBottom) {
+            const response = await this.loadNextPage();
+            this.$bottomRef.scrollIntoView({ behavior: 'smooth' });
+            if (response.length === 0)
+                this.shouldScrollToBottom = false;
+        }
+    }
+    rerender() {
+        this.rerenderBoolean = !this.rerenderBoolean;
+    }
+    render() {
+        var _a;
+        /**
+         * div.container is flex=column-reversewhich is why div#bottom-scroll comes before div#top-scroll
+         */
+        return (h(Host, { key: 'bff4fc91b737334c5764e690fbf2adafa1444408' }, h("div", { key: 'f4efa98ef0bd178602ee03718d35fcb833487909', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, h("div", { key: '37403f6462812a6662efa9577ae9ed43d27f63d6', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, h("rtk-button", { key: 'ee7e04e6281370dddb1b1e10b753e96dc602d42a', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
+                this.scrollToBottom();
+            } }, this.shouldScrollToBottom ? (h("rtk-spinner", { size: "sm" })) : (h("rtk-icon", { icon: this.iconPack.chevron_down })))), h("div", { key: '91bcdadd2518313fa06306a172575f5acc786596', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && h("rtk-spinner", { key: '932af19af69c3ecd5af22dd3051a5eea5cb25e7a', size: "sm" }), this.isLoading && this.pages.length < 1 && h("rtk-spinner", { key: '9fa60fb784a09800a32a3accdc81d940476330d2', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (h("div", { class: "empty-list" }, (_a = this.emptyListLabel) !== null && _a !== void 0 ? _a : this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && h("rtk-spinner", { key: '73103f58338bdb89be69f9f6dc742e3cdd2c95d8', size: "sm" }), h("div", { key: '9c4c43ffb6442d58040448fe1b2d7332505fc81e', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
+    }
+    static get style() { return RtkPaginatedListStyle0; }
+}, [1, "rtk-paginated-list", {
+        "pageSize": [2, "page-size"],
+        "pagesAllowed": [2, "pages-allowed"],
+        "emptyListLabel": [1, "empty-list-label"],
+        "fetchData": [16],
+        "createNodes": [16],
+        "autoScroll": [4, "auto-scroll"],
+        "iconPack": [16],
+        "t": [16],
+        "rerenderBoolean": [32],
+        "showEmptyListLabel": [32],
+        "isLoading": [32],
+        "isLoadingTop": [32],
+        "isLoadingBottom": [32],
+        "rerenderList": [64],
+        "onNewNode": [64],
+        "onNodeDelete": [64],
+        "onNodeUpdate": [64],
+        "reset": [64]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkPaginatedList.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkPaginatedList.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-paginated-list", "rtk-button", "rtk-icon", "rtk-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-paginated-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkPaginatedList);
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkPaginatedList as R, defineCustomElement as d };

package/dist/components/{p-6ec01673.js → p-c6c4c24e.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, i as useLanguage, N as showLivestream } from './p-e847fee9.js';
-import { S as SyncWithStore } from './p-6f7c46d2.js';
-import { d as defineCustomElement$1 } from './p-3b29dda1.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-fdad14c9.js';
+import { e as defaultIconPack, i as useLanguage, M as showLivestream } from './p-f19b4abc.js';
+import { S as SyncWithStore } from './p-e334e15c.js';
+import { d as defineCustomElement$1 } from './p-a3cc7425.js';
 
 const rtkViewerCountCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:inline-flex;height:var(--rtk-space-10, 40px);-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;font-size:14px}:host([data-hidden]){display:none}:host([size='sm']){font-size:12px}rtk-icon{margin-right:var(--rtk-space-1, 4px);height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}:host([size='sm']) rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}:host([variant='embedded']){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));opacity:0.5;margin-top:var(--rtk-space-1, 4px);margin-left:var(--rtk-space-1, 4px);height:var(--rtk-space-5, 20px);border-radius:var(--rtk-border-radius-sm, 4px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);font-size:12px}:host([variant='embedded']) rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}";
 const RtkViewerCountStyle0 = rtkViewerCountCss;

package/dist/components/{p-241a8245.js → p-c9db1b82.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, i as useLanguage } from './p-e847fee9.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-fdad14c9.js';
+import { e as defaultIconPack, i as useLanguage } from './p-f19b4abc.js';
 import { f as formatName, g as getInitials } from './p-efabd2ce.js';
-import { S as SyncWithStore } from './p-6f7c46d2.js';
-import { d as defineCustomElement$2 } from './p-3b29dda1.js';
-import { d as defineCustomElement$1 } from './p-4ebf9684.js';
+import { S as SyncWithStore } from './p-e334e15c.js';
+import { d as defineCustomElement$2 } from './p-a3cc7425.js';
+import { d as defineCustomElement$1 } from './p-dfdbb665.js';
 
 const rtkAvatarCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:flex;height:var(--rtk-space-32, 128px);width:var(--rtk-space-32, 128px);align-items:center;justify-content:center;font-size:28px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));overflow:clip;border-radius:9999px;-webkit-user-select:none;-moz-user-select:none;user-select:none}rtk-icon{height:50%;width:50%}.image-ctr{display:flex;height:100%;width:100%;align-items:center;justify-content:center;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))}img{height:var(--rtk-space-0, 0px);width:var(--rtk-space-0, 0px);-o-object-fit:cover;object-fit:cover}img.loaded{height:100%;width:100%}.initials{display:flex;height:100%;width:100%;align-items:center;justify-content:center;text-transform:uppercase}.image{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.image img{display:none;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.image img.loaded{display:block}:host([variant='hexagon']){border-radius:var(--rtk-border-radius-none, 0);clip-path:polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)}:host([variant='square']){border-radius:var(--rtk-border-radius-none, 0);clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}:host([size='sm']){height:var(--rtk-space-14, 56px);width:var(--rtk-space-14, 56px);font-size:12px}:host([size='md']){height:var(--rtk-space-28, 112px);width:var(--rtk-space-28, 112px)}:host([size='lg']){height:var(--rtk-space-32, 128px);width:var(--rtk-space-32, 128px)}";
 const RtkAvatarStyle0 = rtkAvatarCss;
@@ -45,7 +45,7 @@ const RtkAvatar = /*@__PURE__*/ proxyCustomElement(class RtkAvatar extends H {
         };
     }
     render() {
-        return (h(Host, { key: 'c1a0be37edb75c40b275ad59af85cee7df3f1cdf' }, this.getAvatar(), h("slot", { key: '1cd71e7494a09d68a52051edc279911dc3168515' })));
+        return (h(Host, { key: 'd7d3a7b03a3807984dc6798b5e35cec4418e06e7' }, this.getAvatar(), h("slot", { key: '25aa9fe632a132c1e2f8ef88ac98043bb8ef085a' })));
     }
     static get style() { return RtkAvatarStyle0; }
 }, [1, "rtk-avatar", {