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

package/dist/cjs/rtk-spotlight-grid.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-7807fa2a.js');
+const uiStore = require('./ui-store-af000a8e.js');
 const grid = require('./grid-edc342a7.js');
 const index$2 = require('./index-821d14b7.js');
-const index = require('./index-49c92728.js');
+const index = require('./index-2ae99c70.js');
 
 const rtkSpotlightGridCss = ":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%}main{flex:1 1 0%}.grid-width-sm{width:25%}.grid-width-md{width:50%}.grid-width-lg{width:66.666667%}:host([size='sm']),:host([size='md']){flex-direction:column}:host([size='md']) aside{max-height:var(--rtk-space-96, 384px);width:100%;max-width:100%}:host([size='md']) .grid-width-sm{height:25%}:host([size='md']) .grid-width-md{height:50%}:host([size='md']) .grid-width-lg{height:66.666667%}:host([size='sm']) aside{max-height:var(--rtk-space-96, 384px);width:100%;max-width:100%}:host([size='sm']) .grid-width-sm,:host([size='sm']) .grid-width-md,:host([size='sm']) .grid-width-lg{height:50%}:host([size='xl']) .grid-width-sm,:host([size='xl']) .grid-width-md,:host([size='xl']) .grid-width-lg{width:400px}:host([layout='column']){flex-direction:column}:host([layout='column']) main{flex:4}:host([layout='column']) aside{flex:2;max-width:100%;width:100%}";
 const RtkSpotlightGridStyle0 = rtkSpotlightGridCss;
@@ -39,7 +39,7 @@ const RtkSpotlightGrid = class {
         /** Gap between participant tiles */
         this.gap = 8;
         /** UI Config */
-        this.config = uiStore.defaultConfig;
+        this.config = uiStore.createDefaultConfig();
         /** Icon Pack */
         this.iconPack = uiStore.defaultIconPack;
         /** Language */
@@ -71,13 +71,13 @@ const RtkSpotlightGrid = class {
             t: this.t,
         };
         const nonPinnedParticipants = this.participants.filter((p) => this.pinnedParticipants.some((pt) => pt.id != p.id));
-        return (index$1.h(index$1.Host, { key: '84e2ba9e414e03e433ace1a49b6b382755448646' }, index$1.h("main", { key: 'cc9324d3d21c8660085276edd5cba1541fd786d9', part: "main" }, index$1.h(index$2.Render, { key: '50779559a7f22d60f6191eef4a15ce21bb4a4723', element: "rtk-simple-grid", defaults: defaults, props: {
+        return (index$1.h(index$1.Host, { key: 'fe2e120c0c1f470d5a0fdfb6fdbb44fd140107bc' }, index$1.h("main", { key: 'c39da6b382cdf4cc1420f98e39e69d7113859ad0', part: "main" }, index$1.h(index$2.Render, { key: 'bc3d575d85416389c525af7b15848be00ef890e1', element: "rtk-simple-grid", defaults: defaults, props: {
                 part: 'main-grid',
                 participants: this.pinnedParticipants,
                 aspectRatio: this.aspectRatio,
                 gap: this.gap,
                 size: this.getAdaptiveSize(this.pinnedParticipants.length),
-            } })), nonPinnedParticipants.length > 0 && (index$1.h("aside", { key: '0d5e6b89cf403050bcbaa6b3129883e5facff0d7', part: "aside", class: this.gridSize.spotlight ? `grid-width-${this.gridSize.spotlight}` : 'grid-width-md' }, index$1.h(index$2.Render, { key: 'b1dbb1c84169e6cee5b6d62f669458fbd36446ff', element: "rtk-simple-grid", defaults: defaults, props: {
+            } })), nonPinnedParticipants.length > 0 && (index$1.h("aside", { key: '51abe4bf1ca7de9bf5f9dc713865b195091406f1', part: "aside", class: this.gridSize.spotlight ? `grid-width-${this.gridSize.spotlight}` : 'grid-width-md' }, index$1.h(index$2.Render, { key: '20826029b56895974ca36ccda99b9d1dffaadacb', element: "rtk-simple-grid", defaults: defaults, props: {
                 part: 'aside-grid',
                 participants: nonPinnedParticipants,
                 aspectRatio: this.aspectRatio,
@@ -96,6 +96,9 @@ __decorate([
 __decorate([
     index.SyncWithStore()
 ], RtkSpotlightGrid.prototype, "states", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkSpotlightGrid.prototype, "config", void 0);
 __decorate([
     index.SyncWithStore()
 ], RtkSpotlightGrid.prototype, "iconPack", void 0);

package/dist/cjs/rtk-spotlight-indicator.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-7807fa2a.js');
-const index = require('./index-49c92728.js');
+const uiStore = require('./ui-store-af000a8e.js');
+const index = require('./index-2ae99c70.js');
 
 const rtkSpotlightIndicatorCss = ":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{font-size:12px}#sync-button{flex-direction:row;border-radius:var(--rtk-border-radius-sm, 4px);padding-left:var(--rtk-space-1, 4px);display:flex;align-items:center;justify-content:center;margin-bottom:var(--rtk-space-1, 4px);font-size:12px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}:host([size='sm']) rtk-tooltip,:host([size='md']) rtk-tooltip{width:100%}:host([size='sm'])>#sync-button{height:var(--rtk-space-8, 32px);width:var(--rtk-space-16, 64px);padding-left:var(--rtk-space-0, 0px)}:host([size='md'])>#sync-button{height:var(--rtk-space-8, 32px);width:var(--rtk-space-16, 64px)}:host([size='lg'])>#sync-button{flex-direction:row;height:var(--rtk-space-8, 32px);width:var(--rtk-space-16, 64px)}@media (orientation: portrait){:host([size='lg']) #sync-button{flex-direction:column-reverse;height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px)}:host([size='md']) #sync-button{height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px)}:host([size='sm']) #sync-button{height:var(--rtk-space-10, 40px);width:var(--rtk-space-16, 64px);flex-direction:row}}#sync-button>rtk-icon{max-height:14px}#sync-button rtk-icon{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}:host([size='sm']) #sync-button>rtk-icon{width:auto}#sync-button.active rtk-icon{color:rgb(var(--rtk-colors-text-1000, 255 255 255))}div{align-content:center;line-height:2rem}rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-8, 32px)}#sync-button.active{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-success, 98 165 4) / var(--tw-bg-opacity))}";
 const RtkSpotlightIndicatorStyle0 = rtkSpotlightIndicatorCss;

package/dist/cjs/rtk-stage-toggle.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-7807fa2a.js');
-const index = require('./index-49c92728.js');
+const uiStore = require('./ui-store-af000a8e.js');
+const index = require('./index-2ae99c70.js');
 
 const canJoinStage = (meeting) => {
     var _a, _b;
@@ -54,7 +54,7 @@ const RtkStageToggle = class {
             if (stageStatus === 'OFF_STAGE') {
                 (_e = (_d = this === null || this === void 0 ? void 0 : this.meeting) === null || _d === void 0 ? void 0 : _d.stage) === null || _e === void 0 ? void 0 : _e.requestAccess();
                 if (canJoinStage(this.meeting)) {
-                    uiStore.uiState.states.activeJoinStage = true;
+                    this.states.activeJoinStage = true;
                     this.stateUpdate.emit({ activeJoinStage: true });
                 }
             }
@@ -80,7 +80,7 @@ const RtkStageToggle = class {
     }
     meetingChanged(meeting) {
         var _a, _b, _c, _d;
-        if (meeting == null)
+        if (!meeting)
             return;
         this.stageStatus = (_a = meeting.stage) === null || _a === void 0 ? void 0 : _a.status;
         this.stageStatusHandler(meeting, (_b = meeting.stage) === null || _b === void 0 ? void 0 : _b.status);

package/dist/cjs/rtk-stage.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-7807fa2a.js');
-const index = require('./index-49c92728.js');
+const uiStore = require('./ui-store-af000a8e.js');
+const index = require('./index-2ae99c70.js');
 
 const rtkStageCss = ":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;position:relative;overflow:hidden}";
 const RtkStageStyle0 = rtkStageCss;
@@ -29,7 +29,7 @@ const RtkStage = class {
         this.t = uiStore.useLanguage();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '6f350737bc0425eb6112badf128310e9f6a489a0' }, index$1.h("slot", { key: 'd8d99aaeb1277e13be9052a3136d5677113a2bc1' })));
+        return (index$1.h(index$1.Host, { key: 'cfccb12248bda74943e89cfd663504499925e73f' }, index$1.h("slot", { key: 'c48c7b62c93cefeeaad9904bbd62ea06c376199e' })));
     }
 };
 __decorate([

package/dist/cjs/rtk-transcript.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-7807fa2a.js');
-const index = require('./index-49c92728.js');
+const uiStore = require('./ui-store-af000a8e.js');
+const index = require('./index-2ae99c70.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;
@@ -44,7 +44,7 @@ const RtkTranscript = class {
         }, 10000);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'd3efdcb1d165c36ffcb706dea742420f8c6c003d' }, index$1.h("div", { key: '3b00a1827697ff4d13b62edfa46889b71226f004', class: "ctr" }, index$1.h("p", { key: '908819abb385a61cf06de6f43f57274e5f494b93', class: "message" }, index$1.h("span", { key: '7f951cddb567daed904a6ecbabb766794e659438', class: "name" }, this.transcript.name), ": ", this.transcript.transcript))));
+        return (index$1.h(index$1.Host, { key: '178bec61ca4e702446a1d8ef9cc700d614e473cb' }, index$1.h("div", { key: 'cc7f9847399f373bb93b74d5b56acb2636df3668', class: "ctr" }, index$1.h("p", { key: 'c8d6e26e1ce9038b73ca69e5ca75e658e9df2465', class: "message" }, index$1.h("span", { key: '1138ba7e3f8c131fb4c22315791ec480b8233e24', class: "name" }, this.transcript.name), ": ", this.transcript.transcript))));
     }
     static get watchers() { return {
         "transcript": ["transcriptChanged"]

package/dist/cjs/rtk-transcripts.cjs.entry.js

@@ -3,11 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-7807fa2a.js');
-const index = require('./index-49c92728.js');
-const clone = require('./clone-2e9a4cae.js');
-require('./keysIn-8bdbe83d.js');
-require('./isObjectLike-73d13a39.js');
+const uiStore = require('./ui-store-af000a8e.js');
+const index = require('./index-2ae99c70.js');
 
 const rtkTranscriptsCss = ":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{position:absolute;top:var(--rtk-space-4, 16px);right:var(--rtk-space-4, 16px);bottom:var(--rtk-space-4, 16px);left:var(--rtk-space-4, 16px);top:auto;display:flex;flex-direction:column;pointer-events:none;justify-content:center;width:100%;z-index:5}rtk-transcript{margin-top:var(--rtk-space-2, 8px)}";
 const RtkTranscriptsStyle0 = rtkTranscriptsCss;
@@ -26,7 +23,7 @@ const RtkTranscripts = class {
     constructor(hostRef) {
         index$1.registerInstance(this, hostRef);
         /** Config object */
-        this.config = uiStore.defaultConfig;
+        this.config = uiStore.createDefaultConfig();
         /** Language */
         this.t = uiStore.useLanguage();
         this.transcripts = [];
@@ -53,15 +50,15 @@ const RtkTranscripts = class {
         this.transcripts = [];
     }
     disconnectedCallback() {
-        if (this.meeting == null)
+        if (!this.meeting)
             return;
         this.clearListeners(this.meeting);
     }
     meetingChanged(meeting, oldMeeting) {
         clearTimeout(this.disconnectTimeout);
-        if (oldMeeting !== undefined)
+        if (oldMeeting)
             this.clearListeners(oldMeeting);
-        if (meeting == null)
+        if (!meeting)
             return;
         if (this.states.activeCaptions) {
             this.addListener(meeting);
@@ -88,7 +85,7 @@ const RtkTranscripts = class {
         if (lastElement.id === t.id) {
             lastElement.transcript = t.transcript;
             acc.pop();
-            return acc.concat(clone.clone(lastElement));
+            return acc.concat(uiStore.clone(lastElement));
         }
         return acc.concat(t);
     }
@@ -159,6 +156,9 @@ __decorate([
 __decorate([
     index.SyncWithStore()
 ], RtkTranscripts.prototype, "states", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkTranscripts.prototype, "config", void 0);
 __decorate([
     index.SyncWithStore()
 ], RtkTranscripts.prototype, "t", void 0);

package/dist/cjs/rtk-ui-provider.cjs.entry.js

@@ -3,13 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-7807fa2a.js');
-const config = require('./config-9632c81a.js');
+const uiStore = require('./ui-store-af000a8e.js');
+const merge = require('./merge-ee976be5.js');
 const size = require('./size-2a406e36.js');
-require('./keysIn-8bdbe83d.js');
-require('./isObjectLike-73d13a39.js');
 
-const rtkUiProviderCss = "rtk-ui-provider{display:block;width:100%;height:100%}";
+const rtkUiProviderCss = ":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 RtkUiProviderStyle0 = rtkUiProviderCss;
 
 const LEAVE_ROOM_TIMER = 10000;
@@ -17,28 +15,23 @@ const RtkUiProvider = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.statesUpdate = index.createEvent(this, "rtkStatesUpdate", 7);
+        this.peerStore = null;
+        this.providerId = 'provider-' + Math.floor(Math.random() * 100);
+        /** Meeting */
+        this.meeting = null;
+        /** Icon pack */
+        this.iconPack = uiStore.defaultIconPack;
+        /** Language utility */
+        this.t = uiStore.useLanguage();
         /** Config */
-        this.config = uiStore.defaultConfig;
+        this.config = uiStore.createDefaultConfig();
+        /** Fill type */
+        this.mode = 'fixed';
         /** Whether to show setup screen or not */
         this.showSetupScreen = false;
-        /**
-         * Do not render children until meeting is initialized
-         * @default false
-         */
-        this.noRenderUntilMeeting = false;
         this.handleResize = () => {
             this.size = size.getSize(this.host.clientWidth);
         };
-        this.loadTheme = () => {
-            var _a;
-            if (this.config === uiStore.defaultConfig) {
-                const { config: config$1 } = config.generateConfig(this.meeting.self.config, this.meeting);
-                this.config = config$1;
-            }
-            if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.designTokens) {
-                config.provideRtkDesignSystem(document.documentElement, this.config.designTokens);
-            }
-        };
         this.roomJoinedListener = () => {
             this.updateStates({ meeting: 'joined' });
         };
@@ -46,7 +39,6 @@ const RtkUiProvider = class {
             this.updateStates({ meeting: 'waiting' });
         };
         this.roomLeftListener = ({ state }) => {
-            // Let socketConnectionUpdate listener handle this case.
             if (state === 'disconnected' || state === 'failed')
                 return;
             this.updateStates({ meeting: 'ended', roomLeftState: state });
@@ -54,7 +46,7 @@ const RtkUiProvider = class {
         this.mediaPermissionUpdateListener = ({ kind, message }) => {
             if (['audio', 'video'].includes(kind)) {
                 if ((message === 'DENIED' || message === 'SYSTEM_DENIED') &&
-                    uiStore.uiState.states.activeDebugger !== true) {
+                    (this.peerStore || uiStore.uiStore).state.states.activeDebugger !== true) {
                     const permissionModalSettings = {
                         enabled: true,
                         kind,
@@ -71,19 +63,12 @@ const RtkUiProvider = class {
             }
         };
         this.handleChangingMeeting = (destinationMeetingId) => {
+            const currentStates = this.peerStore.state.states;
             this.updateStates({
-                activeBreakoutRoomsManager: Object.assign(Object.assign({}, uiStore.uiState.states.activeBreakoutRoomsManager), { destinationMeetingId }),
+                activeBreakoutRoomsManager: Object.assign(Object.assign({}, currentStates.activeBreakoutRoomsManager), { destinationMeetingId }),
             });
         };
     }
-    listenState(e) {
-        this.updateStates(e.detail);
-    }
-    updateStates(states) {
-        const newStates = Object.assign({}, uiStore.uiState.states);
-        uiStore.uiState.states = config.deepMerge(newStates, states);
-        this.statesUpdate.emit(uiStore.uiState.states);
-    }
     connectedCallback() {
         if (typeof window !== 'undefined') {
             this.authErrorListener = (ev) => {
@@ -93,6 +78,8 @@ const RtkUiProvider = class {
             };
             window.addEventListener('rtkError', this.authErrorListener);
         }
+        // Listen for store requests from child components
+        this.setupStoreRequestListener();
         this.onMeetingChange(this.meeting);
         this.onIconPackChange(this.iconPack);
         this.onTChange(this.t);
@@ -104,6 +91,13 @@ const RtkUiProvider = class {
     disconnectedCallback() {
         this.resizeObserver.disconnect();
         window.removeEventListener('rtkError', this.authErrorListener);
+        // Remove event listeners
+        if (this.storeRequestListener) {
+            this.host.removeEventListener('rtkRequestStore', this.storeRequestListener);
+        }
+        if (this.stateUpdateListener) {
+            this.host.removeEventListener('rtkStateUpdate', this.stateUpdateListener);
+        }
         if (!this.meeting)
             return;
         this.meeting.self.removeListener('roomLeft', this.roomLeftListener);
@@ -112,47 +106,123 @@ const RtkUiProvider = class {
         this.meeting.self.removeListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
         this.meeting.meta.removeListener('socketConnectionUpdate', this.socketConnectionUpdateListener);
     }
-    onMeetingChange(meeting) {
-        uiStore.uiStore.state.meeting = meeting;
-        if (!meeting)
-            return;
-        this.updateStates({ viewType: meeting.meta.viewType });
-        this.loadTheme();
-        meeting.self.addListener('roomJoined', this.roomJoinedListener);
-        meeting.self.addListener('waitlisted', this.waitlistedListener);
-        meeting.self.addListener('roomLeft', this.roomLeftListener);
-        meeting.self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
-        meeting.meta.addListener('socketConnectionUpdate', this.socketConnectionUpdateListener);
-        if (meeting.connectedMeetings.supportsConnectedMeetings) {
-            meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
+    updateStates(states) {
+        // Use peer specific store if available, otherwise fall back to global store
+        const targetStore = this.peerStore || uiStore.uiStore;
+        const newStates = Object.assign({}, targetStore.state.states);
+        targetStore.state.states = merge.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);
+    }
+    setupStateUpdateListener() {
+        // Remove existing listener if any
+        if (this.stateUpdateListener) {
+            this.host.removeEventListener('rtkStateUpdate', this.stateUpdateListener);
         }
-        if (meeting.self.roomJoined) {
-            this.updateStates({ meeting: 'joined' });
+        // Create new listener
+        this.stateUpdateListener = (event) => {
+            this.updateStates(event.detail);
+        };
+        // Listen for both generic events (backward compatibility) and peer-specific events
+        this.host.addEventListener('rtkStateUpdate', this.stateUpdateListener);
+    }
+    setupStoreRequestListener() {
+        // Remove existing listener if any
+        if (this.storeRequestListener) {
+            this.host.removeEventListener('rtkRequestStore', this.storeRequestListener);
         }
-        else {
-            if (this.showSetupScreen) {
-                this.updateStates({ meeting: 'setup' });
+        // Listen for store requests from child components
+        this.storeRequestListener = (event) => {
+            if (!this.peerStore)
+                return;
+            // Provide the actual store object, not a wrapper
+            const responseEvent = new CustomEvent('rtkProvideStore', {
+                detail: { store: this.peerStore, requestId: event.detail.requestId },
+            });
+            document.dispatchEvent(responseEvent);
+            // Stop the event from bubbling further to prevent other providers from handling it
+            event.stopPropagation();
+        };
+        this.host.addEventListener('rtkRequestStore', this.storeRequestListener);
+    }
+    onMeetingChange(meeting) {
+        if (meeting) {
+            this.peerStore = uiStore.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,
+                },
+            }));
+        }
+        // Setup state update listener now that we have peerId
+        this.setupStateUpdateListener();
+        if (meeting) {
+            const targetStore = this.peerStore || uiStore.uiStore;
+            targetStore.state.meeting = meeting;
+            this.updateStates({ viewType: meeting.meta.viewType });
+            meeting.self.addListener('roomJoined', this.roomJoinedListener);
+            meeting.self.addListener('waitlisted', this.waitlistedListener);
+            meeting.self.addListener('roomLeft', this.roomLeftListener);
+            meeting.self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
+            meeting.meta.addListener('socketConnectionUpdate', this.socketConnectionUpdateListener);
+            if (meeting.connectedMeetings.supportsConnectedMeetings) {
+                meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
+            }
+            if (meeting.self.roomJoined) {
+                this.updateStates({ meeting: 'joined' });
             }
             else {
-                meeting.joinRoom();
+                if (this.showSetupScreen) {
+                    this.updateStates({ meeting: 'setup' });
+                }
+                else {
+                    meeting.joinRoom();
+                }
             }
+            window.removeEventListener('rtkError', this.authErrorListener);
         }
-        window.removeEventListener('rtkError', this.authErrorListener);
     }
     onIconPackChange(newIconPack) {
-        uiStore.uiStore.state.iconPack = newIconPack;
+        if (this.peerStore) {
+            this.peerStore.state.iconPack = newIconPack;
+        }
     }
     onTChange(newT) {
-        uiStore.uiStore.state.t = newT;
+        if (this.peerStore) {
+            this.peerStore.state.t = newT;
+        }
     }
     onConfigChange(config) {
-        uiStore.uiStore.state.config = config;
+        if (this.peerStore) {
+            this.peerStore.state.config = config;
+        }
     }
     onSizeChange(newSize) {
-        uiStore.uiStore.state.size = newSize;
+        if (this.peerStore) {
+            this.peerStore.state.size = newSize;
+        }
     }
     render() {
-        return index.h(index.Host, { key: '255d40656744b2906c20a139a1af87c66acc310a' }, this.noRenderUntilMeeting && !this.meeting ? null : index.h("slot", null));
+        // Don't render children until meeting is properly initialized
+        if (!this.meeting) {
+            return null;
+        }
+        return (index.h(index.Host, null, index.h("slot", null)));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/rtk-waiting-screen.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-05554ce6.js');
-const uiStore = require('./ui-store-7807fa2a.js');
-const index = require('./index-49c92728.js');
+const uiStore = require('./ui-store-af000a8e.js');
+const index = require('./index-2ae99c70.js');
 
 const rtkWaitingScreenCss = ":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{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.centered{display:flex;flex-direction:column;align-items:center}rtk-logo{margin-bottom:var(--rtk-space-8, 32px);height:var(--rtk-space-12, 48px)}p{font-size:16px;border-radius:var(--rtk-border-radius-lg, 12px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding-left:var(--rtk-space-8, 32px);padding-right:var(--rtk-space-8, 32px);padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}";
 const RtkWaitingScreenStyle0 = rtkWaitingScreenCss;
@@ -23,19 +23,22 @@ const RtkWaitingScreen = class {
     constructor(hostRef) {
         index$1.registerInstance(this, hostRef);
         /** Config */
-        this.config = uiStore.defaultConfig;
+        this.config = uiStore.createDefaultConfig();
         /** Icon pack */
         this.iconPack = uiStore.defaultIconPack;
         /** Language */
         this.t = uiStore.useLanguage();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '06c3f95f6b37b0b6dac40c39f0006dfd8e2f1527' }, index$1.h("slot", { key: '76e9f7369a1aa9c2b5a6bbb602ff1f26289c5d80' }, index$1.h("div", { key: '8214ae3640c401b4d1ba1333aaa996ef49b7ec1c', class: "centered", part: "content" }, index$1.h("rtk-logo", { key: 'ec1f1f220f39f674510e1c95699f92d53a9fbf00', meeting: this.meeting, config: this.config, part: "logo", t: this.t }), index$1.h("p", { key: '9123734c61b424b323701f99ac8da6ee0b2885e4' }, this.t('waitlist.body_text'))))));
+        return (index$1.h(index$1.Host, { key: '42ab084403fb118e17ca88c0aa9ca896d44893b7' }, index$1.h("slot", { key: 'd92a248417603793da8efb8d3b914f1730bd2fc0' }, index$1.h("div", { key: '45a4c570273ee8e070fea17c340c800859ee72e3', class: "centered", part: "content" }, index$1.h("rtk-logo", { key: '7c5fe652ea18ed2cac0c20351525250c83cf8a1d', meeting: this.meeting, config: this.config, part: "logo", t: this.t }), index$1.h("p", { key: 'a3ac66ef146ac1f04a9a8e912befa3de40d534a1' }, this.t('waitlist.body_text'))))));
     }
 };
 __decorate([
     index.SyncWithStore()
 ], RtkWaitingScreen.prototype, "meeting", void 0);
+__decorate([
+    index.SyncWithStore()
+], RtkWaitingScreen.prototype, "config", void 0);
 __decorate([
     index.SyncWithStore()
 ], RtkWaitingScreen.prototype, "iconPack", void 0);

package/dist/cjs/{sidebar-8256d60e.js → sidebar-8b82a470.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const uiStore = require('./ui-store-7807fa2a.js');
+const uiStore = require('./ui-store-af000a8e.js');
 
 const canViewChat = (meeting) => {
     if (meeting && !meeting.chat)