@cloudflare/realtimekit-ui 1.1.0-staging.1 → 1.1.0-staging.11

package/dist/components/p-33db910f.js

@@ -0,0 +1,409 @@
+import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
+import { e as defaultIconPack, i as useLanguage } from './p-dc9dde66.js';
+import { S as SyncWithStore } from './p-9c3c75a9.js';
+import { d as defineCustomElement$3 } from './p-1391bef0.js';
+import { d as defineCustomElement$2 } from './p-73baf5ba.js';
+import { d as defineCustomElement$1 } from './p-19d83dd6.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}.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, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-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 = null;
+        // 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;
+        };
+    }
+    /**
+     * 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] = node;
+            this.rerender();
+            break;
+        }
+    }
+    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 no old timestamp, it means we are at initial state
+        if (!this.oldestPaginatedTimestamp)
+            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() {
+        /**
+         * div.container is flex=column-reversewhich is why div#bottom-scroll comes before div#top-scroll
+         */
+        return (h(Host, { key: '90112894b4d06b91240bcf4c1dfadad784097ec4' }, h("div", { key: '339f02629a39ce0f7d2552325b9f6a7c82ffa036', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, h("div", { key: '10de785a969cac74d840e0311087b85b67e97fb6', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, h("rtk-button", { key: '68991f70a24417ca79d6583cca50f2dd9f55892d', 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: '24098a445c1a9b1a3ef77436988c36c8f2a8c205', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && h("rtk-spinner", { key: '93c029599cf61fb61ae57651064f4f0a8c7ac39b', size: "sm" }), this.isLoading && this.pages.length < 1 && h("rtk-spinner", { key: 'd49e8bbbf34036bb6559b5b0e5c54d32513f6bc6', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (h("div", { class: "empty-list" }, 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: '067d8da823c27e3c5fb18f138c58eb537a4b67f5', size: "sm" }), h("div", { key: '16fef008d5831bd5f6b4136e2a58cccc34e08064', 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],
+        "selectedItemId": [1, "selected-item-id"],
+        "autoScroll": [4, "auto-scroll"],
+        "iconPack": [16],
+        "t": [16],
+        "rerenderBoolean": [32],
+        "showEmptyListLabel": [32],
+        "isLoading": [32],
+        "isLoadingTop": [32],
+        "isLoadingBottom": [32],
+        "onNewNode": [64],
+        "onNodeDelete": [64],
+        "onNodeUpdate": [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-188bfe87.js → p-34654ffc.js}

@@ -1,15 +1,15 @@
 import { p as proxyCustomElement, H, h } from './p-c3592601.js';
-import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
+import { c as createDefaultConfig, e as defaultIconPack, i as useLanguage } from './p-dc9dde66.js';
 import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
-import { d as defineCustomElement$8 } from './p-f4e75ea9.js';
+import { S as SyncWithStore } from './p-9c3c75a9.js';
+import { d as defineCustomElement$8 } from './p-cec4d080.js';
 import { d as defineCustomElement$7 } from './p-1391bef0.js';
-import { d as defineCustomElement$6 } from './p-3b29dda1.js';
-import { d as defineCustomElement$5 } from './p-a6296b02.js';
-import { d as defineCustomElement$4 } from './p-080acf18.js';
-import { d as defineCustomElement$3 } from './p-e8df7ac5.js';
-import { d as defineCustomElement$2 } from './p-0a35a909.js';
-import { d as defineCustomElement$1 } from './p-0d582365.js';
+import { d as defineCustomElement$6 } from './p-73baf5ba.js';
+import { d as defineCustomElement$5 } from './p-7e6ca4af.js';
+import { d as defineCustomElement$4 } from './p-fe648db5.js';
+import { d as defineCustomElement$3 } from './p-e09955f3.js';
+import { d as defineCustomElement$2 } from './p-19d83dd6.js';
+import { d as defineCustomElement$1 } from './p-8e285a44.js';
 
 const rtkParticipantsViewerListCss = ":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:100%;width:100%;flex-direction:column;font-size:14px}.list{margin-bottom:var(--rtk-space-4, 16px);display:flex;height:100%;flex-direction:column}h3,.heading-count{margin:var(--rtk-space-0, 0px);align-items:center;justify-content:center;padding:var(--rtk-space-0, 0px);font-size:16px;font-weight:400;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));text-align:center}.heading-count{font-size:14px}.participants{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.empty-viewers-list{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);text-align:center;font-size:12px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}";
 const RtkParticipantsViewerListStyle0 = rtkParticipantsViewerListCss;

package/dist/components/{p-d107e9f4.js → p-410cef02.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { h as useLanguage, e as defaultIconPack } from './p-7fc0dc2f.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
+import { i as useLanguage, e as defaultIconPack } from './p-dc9dde66.js';
+import { S as SyncWithStore } from './p-9c3c75a9.js';
 import { d as defineCustomElement$2 } from './p-1391bef0.js';
-import { d as defineCustomElement$1 } from './p-3b29dda1.js';
+import { d as defineCustomElement$1 } from './p-73baf5ba.js';
 
 const rtkPermissionsMessageCss = ":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{box-sizing:border-box;display:block;max-height:100%;width:600px;overflow-y:auto;padding:var(--rtk-space-6, 24px);border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));overflow-wrap:break-word;color:rgb(var(--rtk-colors-text-1000, 255 255 255));word-wrap:break-word}.actions{display:flex;align-items:center;gap:var(--rtk-space-2, 8px)}.text-icon{display:inline-block;vertical-align:middle}h2{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-4, 16px)}h2 .text-icon{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}p{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-4, 16px)}.need-help-link{margin-top:var(--rtk-space-2, 8px);display:inline-block;text-underline-offset:2px;--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-400, 53 110 253) / var(--tw-text-opacity))}.need-help-link:hover{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-text-opacity))}a rtk-icon{margin-right:var(--rtk-space-2, 8px);height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}:host([size='sm']) .actions{flex-direction:column;align-items:flex-start;justify-content:center}:host([size='sm']) .action{width:100%;padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px)}.actions{margin-top:var(--rtk-space-6, 24px)}.actions rtk-button{flex:1 1 0%}.svg-container{display:flex;width:100%;justify-content:center !important}.svg-ins{width:80%;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}";
 const RtkPermissionsMessageStyle0 = rtkPermissionsMessageCss;
@@ -166,7 +166,7 @@ const RtkPermissionsMessage = /*@__PURE__*/ proxyCustomElement(class RtkPermissi
             this.stepsTimer = setTimeout(this.nextStep, 2500);
         }
         const showMacDeepLink = isDeniedBySystem && this.meeting.self.device.osName == 'macOS';
-        return (h(Host, { key: '2286180903192f50c5a5f427f4b71b7764f908ff' }, h("h2", { key: '02bd9de1404b366114eac1b36ee94f4afa8666e4' }, h("rtk-icon", { key: 'eae918cb5e321c8ed4f853b3f7942a5ff4a06ec0', class: "text-icon", icon: this.iconPack.warning }), this.getTitle()), this.svgSteps.length > 0 && (h("div", { key: '2ee086e9dfcf6bbce679c0714c40dbc28ccc6318', class: 'svg-container' }, this.svgSteps.map((e, index) => (h("p", { innerHTML: e, class: "svg-ins", key: this.currentStep, hidden: index !== this.currentStep }))))), h("div", { key: 'ee719e6edab99a1998a2284e596c6e5becc0f078' }, this.getMessage()), !isDeniedBySystem && (h("a", { key: 'baaef2813309bde6be2087b18969dfd556ad5f1e', class: "need-help-link", href: this.getLink((_c = (_b = (_a = this.states) === null || _a === void 0 ? void 0 : _a.activePermissionsMessage) === null || _b === void 0 ? void 0 : _b.kind) !== null && _c !== void 0 ? _c : 'audio'), target: "_blank", rel: "noreferrer external noreferrer noopener" }, h("rtk-icon", { key: '23e3df4cc997eec1dedd53c5a89c611d93feb95e', class: "text-icon", icon: this.iconPack.attach }), this.t('cta.help'))), h("div", { key: '27e0eec473b0328d503428802c46f7c648861804', class: "actions" }, h("rtk-button", { key: '4dbb461bbc79ccc78ef964c3596bf61816a941ff', size: "lg", kind: "wide", variant: "secondary", onClick: this.continue }, this.t('cta.continue')), showMacDeepLink ? (h("rtk-button", { size: "lg", kind: "wide", onClick: this.openMacSystemSettings }, this.t('cta.system_settings'))) : (h("rtk-button", { size: "lg", kind: "wide", onClick: this.reload }, this.t('cta.reload')))), h("slot", { key: 'c86e688c04b116c225daed08d622d48dcab064da' })));
+        return (h(Host, { key: 'f0e558f0b98d021926c7f9f90cfb8670d103db05' }, h("h2", { key: '4b6e9f52cda1abb9d8da4c1edd503e64b35f086b' }, h("rtk-icon", { key: '47af44fab9d26df7236f819d2903b6a2c5061bdb', class: "text-icon", icon: this.iconPack.warning }), this.getTitle()), this.svgSteps.length > 0 && (h("div", { key: '869f949a2bd2baf5dbeb4d4cd31989ec0a6f488a', class: 'svg-container' }, this.svgSteps.map((e, index) => (h("p", { innerHTML: e, class: "svg-ins", key: this.currentStep, hidden: index !== this.currentStep }))))), h("div", { key: '0e6a2d11de6bea2ee3b7d1f888c2ec0ea48f0714' }, this.getMessage()), !isDeniedBySystem && (h("a", { key: 'd61322bd60473fbcf3b6a3e5df80a626e488c041', class: "need-help-link", href: this.getLink((_c = (_b = (_a = this.states) === null || _a === void 0 ? void 0 : _a.activePermissionsMessage) === null || _b === void 0 ? void 0 : _b.kind) !== null && _c !== void 0 ? _c : 'audio'), target: "_blank", rel: "noreferrer external noreferrer noopener" }, h("rtk-icon", { key: '6a1b76774ba6c930bc3c6f4b241a473ed0c0200e', class: "text-icon", icon: this.iconPack.attach }), this.t('cta.help'))), h("div", { key: '0459c0fe9d191a65a8e310bf124d2527ed7339fb', class: "actions" }, h("rtk-button", { key: '263785815c225dc50688d63bd19c80812fe37e18', size: "lg", kind: "wide", variant: "secondary", onClick: this.continue }, this.t('cta.continue')), showMacDeepLink ? (h("rtk-button", { size: "lg", kind: "wide", onClick: this.openMacSystemSettings }, this.t('cta.system_settings'))) : (h("rtk-button", { size: "lg", kind: "wide", onClick: this.reload }, this.t('cta.reload')))), h("slot", { key: '138acdaf33fe00d1200b776c817321115938d916' })));
     }
     static get watchers() { return {
         "meeting": ["meetingChanged"]

package/dist/components/{p-afe77b50.js → p-4c82be72.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
 import { s as shorten, f as formatName } from './p-efabd2ce.js';
-import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
+import { e as defaultIconPack, i as useLanguage } from './p-dc9dde66.js';
+import { S as SyncWithStore } from './p-9c3c75a9.js';
 
 const rtkNameTagCss = ":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;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;padding-top:var(--rtk-space-1, 4px);padding-bottom:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-1\\.5, 6px);padding-right:var(--rtk-space-1\\.5, 6px);font-size:14px;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-900, 255 255 255 / 0.88))}span.name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}::slotted(rtk-audio-visualizer[slot='start']){margin-right:var(--rtk-space-1\\.5, 6px)}::slotted(rtk-audio-visualizer[slot='end']){margin-left:var(--rtk-space-1\\.5, 6px)}:host([size='sm']){font-size:12px;--tw-bg-opacity:0.6}:host([variant='text']){background-color:transparent;padding:var(--rtk-space-0, 0px)}";
 const RtkNameTagStyle0 = rtkNameTagCss;
@@ -47,7 +47,7 @@ const RtkNameTag = /*@__PURE__*/ proxyCustomElement(class RtkNameTag extends H {
         var _a, _b, _c;
         const name = formatName(((_a = this.participant) === null || _a === void 0 ? void 0 : _a.name) || '');
         const isSelf = ((_b = this.participant) === null || _b === void 0 ? void 0 : _b.id) === ((_c = this.meeting) === null || _c === void 0 ? void 0 : _c.self.id);
-        return (h(Host, { key: 'd42b26fe39b4a8643e32b420ec6cded7450dde20', title: name }, h("slot", { key: '5235adedfaef8eb0b99d46f9b6e89efe40e53f68', name: "start" }), h("span", { key: 'bd15296809e2caf334c6786e45e3b751633ff001', class: "name" }, this.formatNameTag(name, isSelf)), h("slot", { key: '6f5a39cfecf90b9d449b08274eb20b450bcba196', name: "end" })));
+        return (h(Host, { key: '9040aabe429bea4cfcdc7a6635eeb336f2154961', title: name }, h("slot", { key: 'f66091f5af1914e91e14415a4758f9bdc15c0c85', name: "start" }), h("span", { key: '241ca42f60b258c5b3c20f423e9ade272f8f5a8b', class: "name" }, this.formatNameTag(name, isSelf)), h("slot", { key: '7f6f9b8e5c2ea76042a0ff812458af6ed702b43d', name: "end" })));
     }
     static get watchers() { return {
         "size": ["sizeChanged"]

package/dist/components/{p-b011763d.js → p-5194f4d6.js}

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
+import { c as createDefaultConfig, e as defaultIconPack, i as useLanguage } from './p-dc9dde66.js';
+import { S as SyncWithStore } from './p-9c3c75a9.js';
 import './p-a83ccdbd.js';
 import { d as defineCustomElement$2 } from './p-1391bef0.js';
-import { d as defineCustomElement$1 } from './p-3b29dda1.js';
+import { d as defineCustomElement$1 } from './p-73baf5ba.js';
 
 const rtkPluginsCss = ":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)}.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{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);display:flex;height:100%;width:100%;flex-direction:column;font-size:14px;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}h3{margin-left:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-0, 0px);margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-4, 16px);display:block;padding:var(--rtk-space-0, 0px);font-size:16px;font-weight:400;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));text-align:center}ul{overflow-y:auto;padding:var(--rtk-space-0, 0px);flex-grow:1;flex-basis:0}.metadata{display:flex;align-items:center}.metadata img{height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);border-radius:var(--rtk-border-radius-sm, 4px)}.metadata .name{margin-left:var(--rtk-space-2, 8px);font-weight:500}.plugin{display:flex;align-items:center;justify-content:space-between;padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px);padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px)}.plugin .buttons{display:flex;align-items:center}rtk-button: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-brand-500, 33 96 253) / var(--tw-ring-opacity));--tw-ring-offset-width:2px;--tw-ring-offset-color:rgb(var(--rtk-colors-background-1000, 8 8 8))}";
 const RtkPluginsStyle0 = rtkPluginsCss;
@@ -60,7 +60,7 @@ const RtkPlugins = /*@__PURE__*/ proxyCustomElement(class RtkPlugins extends H {
         }
     }
     render() {
-        return (h(Host, { key: 'd9d69e3e7ceca30ee32a1594f2271ee3223240cb' }, h("ul", { key: '98ecf8bcb2186c55cfe0763e2058408b7dba1384', class: "scrollbar" }, this.plugins.map((plugin) => (h("li", { key: plugin.name, class: "plugin" }, h("div", { class: "metadata" }, h("img", { src: plugin.picture }), h("div", { class: "name" }, plugin.name)), !this.activatedPluginsId.includes(plugin.id) && this.canStartPlugins && (h("div", { class: "buttons" }, h("rtk-button", { kind: "icon", size: "lg", onClick: () => {
+        return (h(Host, { key: 'a6a2bb353164417dc70670c7834adb4b33e00368' }, h("ul", { key: 'c449c6826be87a7eb3f28a784cda0251adb9429a', class: "scrollbar" }, this.plugins.map((plugin) => (h("li", { key: plugin.name, class: "plugin" }, h("div", { class: "metadata" }, h("img", { src: plugin.picture }), h("div", { class: "name" }, plugin.name)), !this.activatedPluginsId.includes(plugin.id) && this.canStartPlugins && (h("div", { class: "buttons" }, h("rtk-button", { kind: "icon", size: "lg", onClick: () => {
                 plugin.activate();
                 this.close();
             }, "aria-label": `${this.t('activate')} ${plugin.name}` }, h("rtk-icon", { icon: this.iconPack.rocket, tabIndex: -1, "aria-hidden": true })))), this.activatedPluginsId.includes(plugin.id) && this.canClosePlugins && (h("div", { class: "buttons" }, h("rtk-button", { kind: "icon", size: "lg", onClick: () => {

package/dist/components/{p-f7430e46.js → p-51ef5a21.js}

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-7fc0dc2f.js';
+import { e as defaultIconPack, i as useLanguage } from './p-dc9dde66.js';
 import { b as getPreference, s as setPreference } from './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
-import { d as defineCustomElement$4 } from './p-6756b222.js';
-import { d as defineCustomElement$3 } from './p-3b29dda1.js';
-import { d as defineCustomElement$2 } from './p-7481511c.js';
-import { d as defineCustomElement$1 } from './p-e81fc1e8.js';
+import { S as SyncWithStore } from './p-9c3c75a9.js';
+import { d as defineCustomElement$4 } from './p-f95c314b.js';
+import { d as defineCustomElement$3 } from './p-73baf5ba.js';
+import { d as defineCustomElement$2 } from './p-93db20a6.js';
+import { d as defineCustomElement$1 } from './p-93947678.js';
 
 const rtkSettingsVideoCss = ":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)}.rtk-select{--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-1000, 255 255 255))}.rtk-select:focus{--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(0px + 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)}.rtk-select{display:block;border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--rtk-space-3, 12px);font-size:16px;--icon-size:var(--rtk-select-chevron-size, var(--rtk-space-6, 24px));--icon-right-position:var(--rtk-select-chevron-right-position, var(--rtk-space-2, 8px));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");background-position:right var(--icon-right-position) center;background-repeat:no-repeat;background-size:var(--icon-size) var(--icon-size);padding-right:calc(var(--icon-right-position) * 5)}:host{display:flex;width:100%;flex-direction:column}.rtk-select{width:100%;text-overflow:ellipsis}rtk-participant-tile{margin-left:auto;margin-right:auto;margin-bottom:var(--rtk-space-4, 16px);max-width:100%}#icon{padding-bottom:var(--rtk-space-1, 4px)}.apply-button{height:var(--rtk-space-10, 40px)}label{-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:14px}.group{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px)}.group>*{margin-bottom:var(--rtk-space-2, 8px)}.group>*:last-child{margin-bottom:var(--rtk-space-0, 0px)}.group select{flex:1 1 0%}.row{display:flex;align-items:center;justify-content:space-between;gap:var(--rtk-space-3, 12px)}.section{display:flex;flex-direction:column}@media only screen and (max-height: 480px) and (orientation: landscape){:host{flex-direction:row}:host([size='sm']){flex-direction:row}.section[part='tile-preview']{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);max-height:90%;max-width:40%;flex-shrink:1}.section[part='video-settings']{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);flex-grow:1}}";
 const RtkSettingsVideoStyle0 = rtkSettingsVideoCss;

package/dist/components/{p-0b4e526c.js → p-52e95364.js}

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, h } from './p-c3592601.js';
-import { e as defaultIconPack } from './p-7fc0dc2f.js';
+import { e as defaultIconPack } from './p-dc9dde66.js';
 import './p-a83ccdbd.js';
 import { a as sanitizeLink } from './p-efabd2ce.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
+import { S as SyncWithStore } from './p-9c3c75a9.js';
 import { g as getExtension, a as getFileSize, d as downloadFile } from './p-47314bc7.js';
 import { d as defineCustomElement$2 } from './p-1391bef0.js';
-import { d as defineCustomElement$1 } from './p-3b29dda1.js';
+import { d as defineCustomElement$1 } from './p-73baf5ba.js';
 
 const rtkFileMessageViewCss = ":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)}.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, 4px);padding-bottom:var(--rtk-space-1, 4px);min-width:var(--rtk-space-40, 160px);max-width:var(--rtk-space-64, 256px);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))}.file .file-data{margin-left:var(--rtk-space-1, 4px);flex:1 1 0%}.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}.file .file-data .file-data-split{margin-top:var(--rtk-space-0\\.5, 2px);display:flex;align-items:center;font-size:12px}.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}.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))}.file .file-data .file-data-split .size{margin-left:var(--rtk-space-2, 8px)}";
 const RtkFileMessageViewStyle0 = rtkFileMessageViewCss;
@@ -29,7 +29,7 @@ const RtkFileMessageView = /*@__PURE__*/ proxyCustomElement(class RtkFileMessage
         this.iconPack = defaultIconPack;
     }
     render() {
-        return (h("div", { key: 'cdd46a1be912f807688dc86671dddd2fa5b9e7c9', class: "file" }, h("rtk-button", { key: '20bd6c448ec64902989cd742a8f18de32e368194', variant: "secondary", kind: "icon", onClick: () => downloadFile(sanitizeLink(this.url), { name: this.name, fallbackName: 'file' }), part: "button" }, h("rtk-icon", { key: '11ac30db5146132be8aaba67a79f66f8aba7bb8d', icon: this.iconPack.download })), h("div", { key: '342dd8daa944a5857a6519339b4d3bfb6c369eda', class: "file-data" }, h("div", { key: 'e161743b75677b1e81d09d7c373be494ccf8411a', class: "name" }, this.name), h("div", { key: '99f2d8d77ef3c129aa0c229260f6e79901ce268c', class: "file-data-split" }, h("div", { key: '7b9beadca2a810c151fb1ad43ee7c47ba451a37a', class: "ext" }, getExtension(this.name)), h("span", { key: 'd55f69a96bbe26c262461fa87f1a0a506854cf59', class: "divider" }), h("div", { key: 'cad33d263ab75aeb3083886e83063b8ccb2ea976', class: "size" }, getFileSize(this.size))))));
+        return (h("div", { key: '8b4778c0c9cff1d4fc5b45e446cd450d7b8b9156', class: "file" }, h("rtk-button", { key: '6c72f68880e3bba50e8e5ebe7abd6127de227178', variant: "secondary", kind: "icon", onClick: () => downloadFile(sanitizeLink(this.url), { name: this.name, fallbackName: 'file' }), part: "button" }, h("rtk-icon", { key: '62be4e65fc87ca1721b3ab1e3e634afb6d45f3b4', icon: this.iconPack.download })), h("div", { key: '407c9ca4a0f1be967f5d2cb08f3c15b814d425bb', class: "file-data" }, h("div", { key: '89fdb171090b4f0500db05bd1ee2908c9f393036', class: "name" }, this.name), h("div", { key: 'fafc637f7077925b9f25dc9615124a18c47ff684', class: "file-data-split" }, h("div", { key: '80f45099fbe958ac7d951af08334509d4bada1e0', class: "ext" }, getExtension(this.name)), h("span", { key: 'befbc0bc7065dbf3cc76c2c20091fa30c2f30a52', class: "divider" }), h("div", { key: '75a2ad121ac602c079eb7e08390a5379ec35f4d8', class: "size" }, getFileSize(this.size))))));
     }
     static get style() { return RtkFileMessageViewStyle0; }
 }, [1, "rtk-file-message-view", {

package/dist/components/{p-10ef077c.js → p-541e6de7.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { h as useLanguage } from './p-7fc0dc2f.js';
-import { S as SyncWithStore } from './p-47c25f64.js';
+import { i as useLanguage } from './p-dc9dde66.js';
+import { S as SyncWithStore } from './p-9c3c75a9.js';
 
 const rtkTranscriptCss = ":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{pointer-events:none;display:block;color:rgb(var(--rtk-colors-text-1000, 255 255 255));display:flex;justify-content:center;vertical-align:middle;animation:show 0.4s ease;transition:0.4s;z-index:5;width:100%}.ctr{box-sizing:border-box;display:inline-flex;height:100%;align-items:center;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-shadow-color:rgb(var(--rtk-colors-background-1000, 8 8 8));--tw-shadow:var(--tw-shadow-colored);pointer-events:auto;padding:var(--rtk-space-3, 12px);overflow:auto;max-width:50%}.message{margin:var(--rtk-space-0, 0px);display:inline-block;justify-content:center;max-width:100%;text-wrap:wrap;line-height:1.5rem}.message .name{font-weight:bold}:host(.exit){animation:exit 0.4s ease}@keyframes show{0%{opacity:0;transform:translateY(120px)}100%{opacity:1;transform:translateY(0px)}}@keyframes exit{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-120px)}}:host([size='sm']){font-size:14px}";
 const RtkTranscriptStyle0 = rtkTranscriptCss;
@@ -42,7 +42,7 @@ const RtkTranscript = /*@__PURE__*/ proxyCustomElement(class RtkTranscript exten
         }, 10000);
     }
     render() {
-        return (h(Host, { key: 'ef273b9fcb4646120b31fce89d9c2cc5d4f2c811' }, h("div", { key: '68ec72f68aa52761f1b29c021a9babbe72ed0fd6', class: "ctr" }, h("p", { key: 'db08ea2b280f097b700163954ce8f7893f312919', class: "message" }, h("span", { key: '06fd5928dd075d4edc35bc09859ad51c6b2ec54f', class: "name" }, this.transcript.name), ": ", this.transcript.transcript))));
+        return (h(Host, { key: '1f1b1df183a375365bc978637305a9485603ba06' }, h("div", { key: '81424af54263199079b796559efaecc0e9a476df', class: "ctr" }, h("p", { key: '1d2d0eb2c17eb508eea0fe3260828982a03848a8', class: "message" }, h("span", { key: '895dc32dbc3bb8e6f97a4c1efb750e5f539dad70', class: "name" }, this.transcript.name), ": ", this.transcript.transcript))));
     }
     static get watchers() { return {
         "transcript": ["transcriptChanged"]

package/dist/components/{p-aae4c250.js → p-56134994.js}

@@ -1,5 +1,5 @@
 import { h } from './p-c3592601.js';
-import { M as MAX_TEXT_LENGTH, e as extractReplyBlock, s as stripOutReplyBlock, p as parseRichText } from './p-dab9d3d6.js';
+import { M as MAX_TEXT_LENGTH, e as extractReplyBlock, s as stripOutReplyBlock, d as parseRichText } from './p-addb4be5.js';
 
 const renderLink = (content) => {
     return (h("a", { class: "link", href: content, target: "_blank", rel: "noopener noreferrer" }, content));