@cloudflare/realtimekit-ui 1.0.3 → 1.0.4-staging.2

package/dist/components/rtk-livestream-indicator.js

@@ -1,4 +1,4 @@
-import { R as RtkLivestreamIndicator$1, d as defineCustomElement$1 } from './p-7dcce90b.js';
+import { R as RtkLivestreamIndicator$1, d as defineCustomElement$1 } from './p-f1a781b0.js';
 
 const RtkLivestreamIndicator = RtkLivestreamIndicator$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-livestream-player.js

@@ -1,4 +1,4 @@
-import { R as RtkLivestreamPlayer$1, d as defineCustomElement$1 } from './p-783ab170.js';
+import { R as RtkLivestreamPlayer$1, d as defineCustomElement$1 } from './p-96e2ff79.js';
 
 const RtkLivestreamPlayer = RtkLivestreamPlayer$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-livestream-toggle.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { a as defaultIconPack, c as useLanguage, i as isLiveStreamHost } from './p-fc4484ae.js';
-import { S as SyncWithStore } from './p-989a34c9.js';
-import { d as defineCustomElement$4 } from './p-65da3d17.js';
-import { d as defineCustomElement$3 } from './p-a73161da.js';
-import { d as defineCustomElement$2 } from './p-23d64784.js';
+import { e as defaultIconPack, h as useLanguage, i as isLiveStreamHost } from './p-2b523e10.js';
+import { S as SyncWithStore } from './p-3968315b.js';
+import { d as defineCustomElement$4 } from './p-f31839f4.js';
+import { d as defineCustomElement$3 } from './p-cadee920.js';
+import { d as defineCustomElement$2 } from './p-24c3ffc2.js';
 
 const rtkLivestreamToggleCss = ":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:block}:host([data-hidden]){display:none}";
 const RtkLivestreamToggleStyle0 = rtkLivestreamToggleCss;
@@ -40,9 +40,7 @@ const RtkLivestreamToggle$1 = /*@__PURE__*/ proxyCustomElement(class RtkLivestre
             }
         };
         this.isLoading = () => {
-            return (this.meeting == null ||
-                this.livestreamState === 'STARTING' ||
-                this.livestreamState === 'STOPPING');
+            return (!this.meeting || this.livestreamState === 'STARTING' || this.livestreamState === 'STOPPING');
         };
     }
     connectedCallback() {
@@ -53,7 +51,7 @@ const RtkLivestreamToggle$1 = /*@__PURE__*/ proxyCustomElement(class RtkLivestre
     }
     meetingChanged(meeting) {
         var _a, _b;
-        if (meeting == null)
+        if (!meeting)
             return;
         this.livestreamState = (_a = this.meeting.livestream) === null || _a === void 0 ? void 0 : _a.state;
         (_b = this.meeting.livestream) === null || _b === void 0 ? void 0 : _b.on('livestreamUpdate', this.livestreamStateListener);
@@ -118,6 +116,8 @@ const RtkLivestreamToggle$1 = /*@__PURE__*/ proxyCustomElement(class RtkLivestre
         }
     }
     render() {
+        if (!this.meeting)
+            return null;
         if (!isLiveStreamHost(this.meeting))
             return h(Host, { "data-hidden": true });
         return (h(Host, null, h("rtk-controlbar-button", { part: "controlbar-button", size: this.size, iconPack: this.iconPack, isLoading: this.isLoading(), class: { 'active-livestream': this.livestreamState === 'LIVESTREAMING' }, onClick: () => this.toggleLivestream(), icon: this.getLivestreamIcon(), disabled: this.isLoading(), label: this.t(this.getLivestreamLabel()), variant: this.variant })));

package/dist/components/rtk-logo.js

@@ -1,4 +1,4 @@
-import { R as RtkLogo$1, d as defineCustomElement$1 } from './p-7916d083.js';
+import { R as RtkLogo$1, d as defineCustomElement$1 } from './p-17ac0da7.js';
 
 const RtkLogo = RtkLogo$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-markdown-view.js

@@ -1,4 +1,4 @@
-import { R as RtkMarkdownView$1, d as defineCustomElement$1 } from './p-3358d7dc.js';
+import { R as RtkMarkdownView$1, d as defineCustomElement$1 } from './p-b9e78c21.js';
 
 const RtkMarkdownView = RtkMarkdownView$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-meeting-title.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { a as defaultIconPack, c as useLanguage } from './p-fc4484ae.js';
-import { S as SyncWithStore } from './p-989a34c9.js';
-import { d as defineCustomElement$2 } from './p-b2b2e917.js';
+import { e as defaultIconPack, h as useLanguage } from './p-2b523e10.js';
+import { S as SyncWithStore } from './p-3968315b.js';
+import { d as defineCustomElement$2 } from './p-acbb932e.js';
 
 const rtkMeetingTitleCss = ":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{-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:16px;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}:host([data-hidden]){display:none}.title{text-align:center;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}:host([size='sm']){font-size:12px}";
 const RtkMeetingTitleStyle0 = rtkMeetingTitleCss;

package/dist/components/rtk-meeting.js

@@ -1,84 +1,76 @@
 import { p as proxyCustomElement, H, d as createEvent, h } from './p-c3592601.js';
-import { p as provideRtkDesignSystem, g as generateConfig, d as deepMerge } from './p-31f1e8e5.js';
+import { d as deepMerge } from './p-b8fe19b6.js';
 import { g as getSize } from './p-96be234f.js';
-import { n as uiState, c as useLanguage, d as defaultConfig, a as defaultIconPack } from './p-fc4484ae.js';
+import { u as uiStore, h as useLanguage, c as createDefaultConfig, e as defaultIconPack, b as createPeerStore } from './p-2b523e10.js';
 import { R as Render } from './p-60fdbd75.js';
+import { p as provideRtkDesignSystem, g as generateConfig } from './p-c5fd7cc6.js';
 import './p-a83ccdbd.js';
 import { i as index } from './p-f47d4fe8.js';
-import { S as SyncWithStore } from './p-989a34c9.js';
-import { d as defineCustomElement$S } from './p-cbc8e449.js';
-import { d as defineCustomElement$R } from './p-11048ea8.js';
-import { d as defineCustomElement$Q } from './p-6d3c8a73.js';
-import { d as defineCustomElement$P } from './p-1c22a3a0.js';
-import { d as defineCustomElement$O } from './p-273196ec.js';
-import { d as defineCustomElement$N } from './p-2507c6c8.js';
-import { d as defineCustomElement$M } from './p-0daa472f.js';
-import { d as defineCustomElement$L } from './p-e9c999f4.js';
-import { d as defineCustomElement$K } from './p-01b76741.js';
-import { d as defineCustomElement$J } from './p-b5dc3971.js';
-import { d as defineCustomElement$I } from './p-c1a12313.js';
-import { d as defineCustomElement$H } from './p-d8be719c.js';
-import { d as defineCustomElement$G } from './p-8c391f68.js';
-import { d as defineCustomElement$F } from './p-e902ab68.js';
-import { d as defineCustomElement$E } from './p-eab1b7c1.js';
-import { d as defineCustomElement$D } from './p-b76deed8.js';
-import { d as defineCustomElement$C } from './p-cac807c5.js';
-import { d as defineCustomElement$B } from './p-153e1ac6.js';
-import { d as defineCustomElement$A } from './p-5597fe9f.js';
-import { d as defineCustomElement$z } from './p-f4158e29.js';
-import { d as defineCustomElement$y } from './p-7afb8f24.js';
-import { d as defineCustomElement$x } from './p-b1030316.js';
-import { d as defineCustomElement$w } from './p-a59e060b.js';
-import { d as defineCustomElement$v } from './p-ebb19a87.js';
-import { d as defineCustomElement$u } from './p-eba76ab4.js';
-import { d as defineCustomElement$t } from './p-1f0c5462.js';
-import { d as defineCustomElement$s } from './p-de567bdf.js';
-import { d as defineCustomElement$r } from './p-11b00854.js';
-import { d as defineCustomElement$q } from './p-9b7dc3b2.js';
-import { d as defineCustomElement$p } from './p-ff6d9602.js';
-import { d as defineCustomElement$o } from './p-4b89a5d6.js';
-import { d as defineCustomElement$n } from './p-a73161da.js';
-import { d as defineCustomElement$m } from './p-c86a0f9e.js';
-import { d as defineCustomElement$l } from './p-3d5214b4.js';
-import { d as defineCustomElement$k } from './p-85665c03.js';
-import { d as defineCustomElement$j } from './p-1cc409c6.js';
-import { d as defineCustomElement$i } from './p-7916d083.js';
-import { d as defineCustomElement$h } from './p-3358d7dc.js';
-import { d as defineCustomElement$g } from './p-c1f57f6b.js';
-import { d as defineCustomElement$f } from './p-20c74379.js';
-import { d as defineCustomElement$e } from './p-2df5f773.js';
-import { d as defineCustomElement$d } from './p-8d07e4b3.js';
-import { d as defineCustomElement$c } from './p-f634f020.js';
-import { d as defineCustomElement$b } from './p-d5ce79e0.js';
-import { d as defineCustomElement$a } from './p-07c5a2da.js';
-import { d as defineCustomElement$9 } from './p-fab54b49.js';
-import { d as defineCustomElement$8 } from './p-40a18d12.js';
-import { d as defineCustomElement$7 } from './p-ba8208ac.js';
-import { d as defineCustomElement$6 } from './p-23d64784.js';
-import { d as defineCustomElement$5 } from './p-79534847.js';
-import { d as defineCustomElement$4 } from './p-f0df8c15.js';
-import { d as defineCustomElement$3 } from './p-a09473cb.js';
-import { d as defineCustomElement$2 } from './p-b2b2e917.js';
+import { d as defineCustomElement$S } from './p-81a13bf2.js';
+import { d as defineCustomElement$R } from './p-65980189.js';
+import { d as defineCustomElement$Q } from './p-5255d2f8.js';
+import { d as defineCustomElement$P } from './p-bf72bb45.js';
+import { d as defineCustomElement$O } from './p-fc56c6ea.js';
+import { d as defineCustomElement$N } from './p-4c2acc5c.js';
+import { d as defineCustomElement$M } from './p-fbe523dc.js';
+import { d as defineCustomElement$L } from './p-96362151.js';
+import { d as defineCustomElement$K } from './p-87ae32cb.js';
+import { d as defineCustomElement$J } from './p-e10e8a56.js';
+import { d as defineCustomElement$I } from './p-b8baba9f.js';
+import { d as defineCustomElement$H } from './p-4f585ec2.js';
+import { d as defineCustomElement$G } from './p-4bb5e9bb.js';
+import { d as defineCustomElement$F } from './p-c65aaf73.js';
+import { d as defineCustomElement$E } from './p-310a03ac.js';
+import { d as defineCustomElement$D } from './p-384919de.js';
+import { d as defineCustomElement$C } from './p-47f6fdfa.js';
+import { d as defineCustomElement$B } from './p-36b8529e.js';
+import { d as defineCustomElement$A } from './p-bee7d918.js';
+import { d as defineCustomElement$z } from './p-f8594d8e.js';
+import { d as defineCustomElement$y } from './p-7ac93e47.js';
+import { d as defineCustomElement$x } from './p-d1084f45.js';
+import { d as defineCustomElement$w } from './p-ea160150.js';
+import { d as defineCustomElement$v } from './p-ab84cfbb.js';
+import { d as defineCustomElement$u } from './p-7764b66b.js';
+import { d as defineCustomElement$t } from './p-2d58e36e.js';
+import { d as defineCustomElement$s } from './p-0c855484.js';
+import { d as defineCustomElement$r } from './p-b53c309c.js';
+import { d as defineCustomElement$q } from './p-32584f88.js';
+import { d as defineCustomElement$p } from './p-3081fabf.js';
+import { d as defineCustomElement$o } from './p-6b4eccd6.js';
+import { d as defineCustomElement$n } from './p-cadee920.js';
+import { d as defineCustomElement$m } from './p-40870ba7.js';
+import { d as defineCustomElement$l } from './p-9f86929b.js';
+import { d as defineCustomElement$k } from './p-c254f63b.js';
+import { d as defineCustomElement$j } from './p-885dad3e.js';
+import { d as defineCustomElement$i } from './p-17ac0da7.js';
+import { d as defineCustomElement$h } from './p-b9e78c21.js';
+import { d as defineCustomElement$g } from './p-2f9525bf.js';
+import { d as defineCustomElement$f } from './p-1035acb6.js';
+import { d as defineCustomElement$e } from './p-792de3bc.js';
+import { d as defineCustomElement$d } from './p-8320939f.js';
+import { d as defineCustomElement$c } from './p-938ee31c.js';
+import { d as defineCustomElement$b } from './p-fb038bd0.js';
+import { d as defineCustomElement$a } from './p-80efd900.js';
+import { d as defineCustomElement$9 } from './p-f44a0212.js';
+import { d as defineCustomElement$8 } from './p-7d95084a.js';
+import { d as defineCustomElement$7 } from './p-8afd3f68.js';
+import { d as defineCustomElement$6 } from './p-24c3ffc2.js';
+import { d as defineCustomElement$5 } from './p-0a0515d9.js';
+import { d as defineCustomElement$4 } from './p-7525d343.js';
+import { d as defineCustomElement$3 } from './p-095e6b83.js';
+import { d as defineCustomElement$2 } from './p-acbb932e.js';
 
 const rtkMeetingCss = ":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:flex;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));overflow:hidden;position:fixed;top:var(--rtk-space-0, 0px);right:var(--rtk-space-0, 0px);bottom:var(--rtk-space-0, 0px);left:var(--rtk-space-0, 0px);height:100%;width:100%}:host([mode='fill']){position:relative}";
 const RtkMeetingStyle0 = rtkMeetingCss;
 
-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 RtkMeeting$1 = /*@__PURE__*/ proxyCustomElement(class RtkMeeting extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
         this.statesUpdate = createEvent(this, "rtkStatesUpdate", 7);
+        /** Since RtkMeeting by design works as a provider for component, to be in sync with other providers, added provider id */
+        this.providerId = 'provider-' + Math.floor(Math.random() * 100);
         this.roomJoinedListener = () => {
             this.updateStates({ meeting: 'joined' });
         };
@@ -94,7 +86,7 @@ const RtkMeeting$1 = /*@__PURE__*/ proxyCustomElement(class RtkMeeting extends H
         this.mediaPermissionUpdateListener = ({ kind, message }) => {
             if (['audio', 'video'].includes(kind)) {
                 if ((message === 'DENIED' || message === 'SYSTEM_DENIED') &&
-                    uiState.states.activeDebugger !== true) {
+                    (this.peerStore || uiStore).state.states.activeDebugger !== true) {
                     const permissionModalSettings = {
                         enabled: true,
                         kind,
@@ -110,6 +102,7 @@ const RtkMeeting$1 = /*@__PURE__*/ proxyCustomElement(class RtkMeeting extends H
                 }, this.leaveRoomTimer);
             }
         };
+        this.peerStore = null; // peer specific store for this meeting peer instance
         /** Whether to load config from preset */
         this.loadConfigFromPreset = false;
         /** Whether to apply the design system on the document root from config */
@@ -121,14 +114,15 @@ const RtkMeeting$1 = /*@__PURE__*/ proxyCustomElement(class RtkMeeting extends H
         /** Language */
         this.t = useLanguage();
         /** UI Config */
-        this.config = defaultConfig;
+        this.config = createDefaultConfig();
         /** Grid layout */
         this.gridLayout = 'row';
         /** Icon pack */
         this.iconPack = defaultIconPack;
         this.handleChangingMeeting = (destinationMeetingId) => {
+            const currentStates = (this.peerStore || uiStore).state.states;
             this.updateStates({
-                activeBreakoutRoomsManager: Object.assign(Object.assign({}, uiState.states.activeBreakoutRoomsManager), { destinationMeetingId }),
+                activeBreakoutRoomsManager: Object.assign(Object.assign({}, currentStates.activeBreakoutRoomsManager), { destinationMeetingId }),
             });
         };
     }
@@ -142,17 +136,76 @@ const RtkMeeting$1 = /*@__PURE__*/ proxyCustomElement(class RtkMeeting extends H
             };
             window.addEventListener('rtkError', this.authErrorListener);
         }
+        // Initialize default values
         this.leaveRoomTimer = 10000;
         this.loadConfigFromPreset = true;
         this.applyDesignSystem = true;
+        // Setup event listeners
+        this.setupStoreRequestListener();
+        this.setupStateUpdateListener();
+        this.meetingChanged(this.meeting);
         this.resizeObserver = new index(() => this.handleResize());
         this.resizeObserver.observe(this.host);
         if (this.applyDesignSystem &&
             ((_a = this.config) === null || _a === void 0 ? void 0 : _a.designTokens) != null &&
-            typeof document !== 'undefined') {
+            typeof document !== 'undefined' &&
+            (this.peerStore || uiStore).state.states.activeDebugger !== true) {
             provideRtkDesignSystem(document.documentElement, this.config.designTokens);
         }
-        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this.leaveOnUnmount) {
+            (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.leaveRoom();
+        }
+        this.resizeObserver.disconnect();
+        window.removeEventListener('rtkError', this.authErrorListener);
+        // Remove event listeners
+        if (this.storeRequestListener) {
+            this.host.removeEventListener('rtkRequestStore', this.storeRequestListener);
+            this.storeRequestListener = null;
+        }
+        if (this.stateUpdateListener) {
+            this.host.removeEventListener('rtkStateUpdate', this.stateUpdateListener);
+            this.stateUpdateListener = null;
+        }
+        // Clear meeting listeners
+        if (this.meeting) {
+            this.clearListeners(this.meeting);
+        }
+    }
+    setupStoreRequestListener() {
+        // Remove existing listener if any
+        if (this.storeRequestListener) {
+            this.host.removeEventListener('rtkRequestStore', this.storeRequestListener);
+        }
+        // Listen for store requests from child components
+        this.storeRequestListener = (event) => {
+            // Provide peer specific store if available, otherwise fall back to global store
+            if (!this.peerStore)
+                return;
+            const storeToProvide = this.peerStore;
+            const responseEvent = new CustomEvent('rtkProvideStore', {
+                detail: { store: storeToProvide, requestId: event.detail.requestId },
+            });
+            document.dispatchEvent(responseEvent);
+            // Stop the event from bubbling further to prevent other meetings from handling it
+            event.stopPropagation();
+        };
+        this.host.addEventListener('rtkRequestStore', this.storeRequestListener);
+    }
+    setupStateUpdateListener() {
+        if (this.stateUpdateListener) {
+            this.host.removeEventListener('rtkStateUpdate', this.stateUpdateListener);
+        }
+        this.stateUpdateListener = (event) => {
+            const eventTarget = event.target;
+            if (!this.host.contains(eventTarget)) {
+                return;
+            }
+            this.updateStates(event.detail);
+        };
+        this.host.addEventListener('rtkStateUpdate', this.stateUpdateListener);
     }
     clearListeners(meeting) {
         if (!meeting)
@@ -163,40 +216,47 @@ const RtkMeeting$1 = /*@__PURE__*/ proxyCustomElement(class RtkMeeting extends H
         meeting.self.removeListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
         meeting.meta.removeListener('socketConnectionUpdate', this.socketConnectionUpdateListener);
     }
-    disconnectedCallback() {
-        var _a;
-        if (this.leaveOnUnmount) {
-            (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.leaveRoom();
-        }
-        this.resizeObserver.disconnect();
-        this.clearListeners(this.meeting);
-        window.removeEventListener('rtkError', this.authErrorListener);
-    }
     meetingChanged(meeting) {
         var _a, _b;
         if (!meeting)
             return;
+        // Create peer specific store for this meeting peer instance
+        if (meeting) {
+            this.peerStore = createPeerStore({
+                meeting,
+                config: this.config,
+                iconPack: this.iconPack,
+                t: this.t,
+                size: this.size,
+                providerId: this.providerId,
+            });
+            // Notify components that peer specific store is now available
+            document.dispatchEvent(new CustomEvent('rtkPeerStoreReady', {
+                detail: {
+                    peerId: meeting.self.id,
+                },
+            }));
+        }
+        else {
+            this.peerStore = null;
+        }
         this.updateStates({ viewType: meeting.meta.viewType });
         if (this.loadConfigFromPreset && meeting.self.config != null) {
             const theme = meeting.self.config;
             const { config, data } = generateConfig(theme, meeting);
-            if (this.config === defaultConfig) {
-                // only override the config if the object is same as defaultConfig
-                // which means it's a different object passed via prop
-                this.config = config;
-            }
+            this.config = config;
             if (this.showSetupScreen == null) {
-                // only override this value if the prop isn't passed
                 this.showSetupScreen = data.showSetupScreen;
             }
             if (meeting.connectedMeetings.supportsConnectedMeetings &&
-                ((_a = uiState.states.activeBreakoutRoomsManager) === null || _a === void 0 ? void 0 : _a.destinationMeetingId)) {
+                ((_a = (this.peerStore || uiStore).state.states.activeBreakoutRoomsManager) === null || _a === void 0 ? void 0 : _a.destinationMeetingId)) {
                 this.showSetupScreen = false;
             }
         }
         if (this.applyDesignSystem &&
             ((_b = this.config) === null || _b === void 0 ? void 0 : _b.designTokens) != null &&
-            typeof document !== 'undefined') {
+            typeof document !== 'undefined' &&
+            (this.peerStore || uiStore).state.states.activeDebugger !== true) {
             provideRtkDesignSystem(document.documentElement, this.config.designTokens);
         }
         meeting.self.addListener('roomJoined', this.roomJoinedListener);
@@ -215,33 +275,44 @@ const RtkMeeting$1 = /*@__PURE__*/ proxyCustomElement(class RtkMeeting extends H
                 this.updateStates({ meeting: 'setup' });
             }
             else {
-                // join directly to the meeting
                 meeting.joinRoom();
             }
         }
         window.removeEventListener('rtkError', this.authErrorListener);
     }
-    listenState(e) {
-        this.updateStates(e.detail);
+    onSizeChange(newSize) {
+        if (this.peerStore) {
+            this.peerStore.state.size = newSize;
+        }
     }
     handleResize() {
         this.size = getSize(this.host.clientWidth);
     }
     updateStates(states) {
-        const newStates = Object.assign({}, uiState.states);
-        uiState.states = deepMerge(newStates, states);
-        this.statesUpdate.emit(uiState.states);
+        // Use peer specific store if available, otherwise fall back to global store
+        const targetStore = this.peerStore || uiStore;
+        const newStates = Object.assign({}, targetStore.state.states);
+        targetStore.state.states = deepMerge(newStates, states);
+        // Emit unscoped event for backward compatibility
+        this.statesUpdate.emit(targetStore.state.states);
+        // Also emit a scoped event that only this meeting's components should listen to
+        const scopedEvent = new CustomEvent('rtkStatesUpdate', {
+            detail: targetStore.state.states,
+            bubbles: true,
+            composed: true,
+        });
+        this.host.dispatchEvent(scopedEvent);
     }
     render() {
         const defaults = {
             meeting: this.meeting,
             size: this.size,
-            states: uiState.states,
-            config: this.config,
+            states: (this.peerStore || uiStore).state.states,
+            config: this.config || createDefaultConfig(),
             iconPack: this.iconPack,
             t: this.t,
         };
-        if (uiState.states.viewType === 'CHAT') {
+        if ((this.peerStore || uiStore).state.states.viewType === 'CHAT') {
             return h("rtk-chat", Object.assign({}, defaults));
         }
         const elementProps = {
@@ -253,7 +324,8 @@ const RtkMeeting$1 = /*@__PURE__*/ proxyCustomElement(class RtkMeeting extends H
     }
     get host() { return this; }
     static get watchers() { return {
-        "meeting": ["meetingChanged"]
+        "meeting": ["meetingChanged"],
+        "size": ["onSizeChange"]
     }; }
     static get style() { return RtkMeetingStyle0; }
 }, [1, "rtk-meeting", {
@@ -268,18 +340,10 @@ const RtkMeeting$1 = /*@__PURE__*/ proxyCustomElement(class RtkMeeting extends H
         "size": [1537],
         "gridLayout": [1, "grid-layout"],
         "iconPack": [16]
-    }, [[0, "rtkStateUpdate", "listenState"]], {
-        "meeting": ["meetingChanged"]
+    }, undefined, {
+        "meeting": ["meetingChanged"],
+        "size": ["onSizeChange"]
     }]);
-__decorate([
-    SyncWithStore()
-], RtkMeeting$1.prototype, "meeting", void 0);
-__decorate([
-    SyncWithStore()
-], RtkMeeting$1.prototype, "t", void 0);
-__decorate([
-    SyncWithStore()
-], RtkMeeting$1.prototype, "iconPack", void 0);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/rtk-menu-item.js

@@ -1,4 +1,4 @@
-import { R as RtkMenuItem$1, d as defineCustomElement$1 } from './p-20c74379.js';
+import { R as RtkMenuItem$1, d as defineCustomElement$1 } from './p-1035acb6.js';
 
 const RtkMenuItem = RtkMenuItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-menu-list.js

@@ -1,4 +1,4 @@
-import { R as RtkMenuList$1, d as defineCustomElement$1 } from './p-2df5f773.js';
+import { R as RtkMenuList$1, d as defineCustomElement$1 } from './p-792de3bc.js';
 
 const RtkMenuList = RtkMenuList$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-menu.js

@@ -1,4 +1,4 @@
-import { R as RtkMenu$1, d as defineCustomElement$1 } from './p-c1f57f6b.js';
+import { R as RtkMenu$1, d as defineCustomElement$1 } from './p-2f9525bf.js';
 
 const RtkMenu = RtkMenu$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-message-list-view.js

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, w as writeTask, h } from './p-c3592601.js';
-import { a as defaultIconPack } from './p-fc4484ae.js';
+import { e as defaultIconPack } from './p-2b523e10.js';
 import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-989a34c9.js';
-import { d as defineCustomElement$3 } from './p-a73161da.js';
-import { d as defineCustomElement$2 } from './p-23d64784.js';
-import { d as debounce } from './p-a08b5a59.js';
+import { S as SyncWithStore } from './p-3968315b.js';
+import { d as defineCustomElement$3 } from './p-cadee920.js';
+import { d as defineCustomElement$2 } from './p-24c3ffc2.js';
+import { d as debounce } from './p-1dca17d1.js';
 
 const rtkMessageListViewCss = ":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)))}.loading{cursor:wait}.content-wrapper{height:100%;overflow-y:auto;position:relative;contain:strict}.scroller{width:1px;opacity:0}.content{position:absolute;top:0;width:100%}.smallest-dom-element{width:100%;height:2px;background:red}.loader{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);display:flex;justify-content:center}";
 const RtkMessageListViewStyle0 = rtkMessageListViewCss;
@@ -266,11 +266,11 @@ const RtkMessageListView$1 = /*@__PURE__*/ proxyCustomElement(class RtkMessageLi
         this.updateTotalHeight();
     }
     render() {
-        return (h("div", { key: '0bd9791d55b2c7b17e0f2165815d592e400612b6', class: "scrollbar content-wrapper", ref: (el) => (this.$listRef = el), onScroll: this.handleScroll }, h("div", { key: 'b255bce421935f065862a6a3a34e9ae588c936cd', class: "scroller" }, h("div", { key: '3eab5b317790b234f1a5c1935d7b8bf4d48620eb', style: {
+        return (h("div", { key: '17ccb3852a89ddb77e5799413f8ee0ef0ac7c132', class: "scrollbar content-wrapper", ref: (el) => (this.$listRef = el), onScroll: this.handleScroll }, h("div", { key: '044af22a10ae312a46d90f29dc9a793d86540fb8', class: "scroller" }, h("div", { key: '15a2b213883f210a44081c05c317f9da7a58380c', style: {
                 height: `${this.totalHeight}px`,
-            } }), h("div", { key: '47d070acc6cdd5e5cdd146594dbcb53906e5fc37', class: "smallest-dom-element", id: "list-end", ref: (el) => (this.$listEndRef = el) })), h("div", { key: '348ec8b65c0f76146f6ab65cbda80057dde6d93d', class: "content", style: {
+            } }), h("div", { key: '918071c6d3aed045814c1c2b3908572edae480ac', class: "smallest-dom-element", id: "list-end", ref: (el) => (this.$listEndRef = el) })), h("div", { key: '19b2f45794fa73f44d54b9b91ef1cab0df6c4aae', class: "content", style: {
                 transform: `translateY(${this.getRangeSize(0, this.range.start)}px)`,
-            } }, this.isFetching && (h("div", { key: '100d528dae04469574a6c908ba4e0159d61a928f', class: "loader" }, h("rtk-spinner", { key: 'a3a7cc932bd40b71bf67d9bb95cb7cdd8e36696f', size: "md" }))), this.getVisibleItems().map((msg, index) => (h("div", { key: msg.id, ref: (el) => this.rendererInternal(el, msg, index) }))))));
+            } }, this.isFetching && (h("div", { key: '1a05d8ec0a4a11812afef413226c472d797e7ebe', class: "loader" }, h("rtk-spinner", { key: '29f275642f8f8be5d9cbe12ff0eeedba48e1b4c1', size: "md" }))), this.getVisibleItems().map((msg, index) => (h("div", { key: msg.id, ref: (el) => this.rendererInternal(el, msg, index) }))))));
     }
     static get watchers() { return {
         "messages": ["messagesUpdated"]

package/dist/components/rtk-message-view.js

@@ -1,4 +1,4 @@
-import { R as RtkMessageView$1, d as defineCustomElement$1 } from './p-8d07e4b3.js';
+import { R as RtkMessageView$1, d as defineCustomElement$1 } from './p-8320939f.js';
 
 const RtkMessageView = RtkMessageView$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-mic-toggle.js

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { a as defaultIconPack, c as useLanguage } from './p-fc4484ae.js';
-import { S as SyncWithStore } from './p-989a34c9.js';
-import { d as defineCustomElement$5 } from './p-65da3d17.js';
-import { d as defineCustomElement$4 } from './p-a73161da.js';
-import { d as defineCustomElement$3 } from './p-23d64784.js';
-import { d as defineCustomElement$2 } from './p-b2b2e917.js';
+import { e as defaultIconPack, h as useLanguage } from './p-2b523e10.js';
+import { S as SyncWithStore } from './p-3968315b.js';
+import { d as defineCustomElement$5 } from './p-f31839f4.js';
+import { d as defineCustomElement$4 } from './p-cadee920.js';
+import { d as defineCustomElement$3 } from './p-24c3ffc2.js';
+import { d as defineCustomElement$2 } from './p-acbb932e.js';
 
 const rtkMicToggleCss = ":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:block}:host([data-hidden]){display:none}:host(.audioDisabled) :slotted(rtk-icon){--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}";
 const RtkMicToggleStyle0 = rtkMicToggleCss;
@@ -158,6 +158,8 @@ const RtkMicToggle$1 = /*@__PURE__*/ proxyCustomElement(class RtkMicToggle exten
         };
     }
     render() {
+        if (!this.meeting)
+            return null;
         if (!this.canProduceAudio ||
             ['OFF_STAGE', 'REQUESTED_TO_JOIN_STAGE'].includes(this.stageStatus)) {
             return h(Host, { "data-hidden": true });

package/dist/components/rtk-microphone-selector.js

@@ -1,4 +1,4 @@
-import { R as RtkMicrophoneSelector$1, d as defineCustomElement$1 } from './p-9007d4aa.js';
+import { R as RtkMicrophoneSelector$1, d as defineCustomElement$1 } from './p-388b17ad.js';
 
 const RtkMicrophoneSelector = RtkMicrophoneSelector$1;
 const defineCustomElement = defineCustomElement$1;