@cloudflare/realtimekit-ui 1.0.3-staging.4 → 1.0.4-staging.1

package/dist/components/rtk-tab-bar.js

@@ -1,4 +1,4 @@
-import { R as RtkTabBar$1, d as defineCustomElement$1 } from './p-a0000935.js';
+import { R as RtkTabBar$1, d as defineCustomElement$1 } from './p-1f5e21d0.js';
 
 const RtkTabBar = RtkTabBar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-text-composer-view.js

@@ -1,4 +1,4 @@
-import { R as RtkTextComposerView$1, d as defineCustomElement$1 } from './p-79534847.js';
+import { R as RtkTextComposerView$1, d as defineCustomElement$1 } from './p-0a0515d9.js';
 
 const RtkTextComposerView = RtkTextComposerView$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { R as RtkTextMessageView$1, d as defineCustomElement$1 } from './p-a09473cb.js';
+import { R as RtkTextMessageView$1, d as defineCustomElement$1 } from './p-095e6b83.js';
 
 const RtkTextMessageView = RtkTextMessageView$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { R as RtkTextMessage$1, d as defineCustomElement$1 } from './p-f0df8c15.js';
+import { R as RtkTextMessage$1, d as defineCustomElement$1 } from './p-7525d343.js';
 
 const RtkTextMessage = RtkTextMessage$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-tooltip.js

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

package/dist/components/rtk-transcript.js

@@ -1,4 +1,4 @@
-import { R as RtkTranscript$1, d as defineCustomElement$1 } from './p-b1161cb8.js';
+import { R as RtkTranscript$1, d as defineCustomElement$1 } from './p-54de25c6.js';
 
 const RtkTranscript = RtkTranscript$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-transcripts.js

@@ -1,9 +1,8 @@
 import { p as proxyCustomElement, H, w as writeTask, h, e as Host } from './p-c3592601.js';
-import { d as defaultConfig, c as useLanguage } from './p-fc4484ae.js';
+import { c as createDefaultConfig, h as useLanguage, F as clone } from './p-2b523e10.js';
 import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-989a34c9.js';
-import { c as clone } from './p-c15d924f.js';
-import { d as defineCustomElement$2 } from './p-b1161cb8.js';
+import { S as SyncWithStore } from './p-3968315b.js';
+import { d as defineCustomElement$2 } from './p-54de25c6.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;
@@ -24,7 +23,7 @@ const RtkTranscripts$1 = /*@__PURE__*/ proxyCustomElement(class RtkTranscripts e
         this.__registerHost();
         this.__attachShadow();
         /** Config object */
-        this.config = defaultConfig;
+        this.config = createDefaultConfig();
         /** Language */
         this.t = useLanguage();
         this.transcripts = [];
@@ -51,15 +50,15 @@ const RtkTranscripts$1 = /*@__PURE__*/ proxyCustomElement(class RtkTranscripts e
         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);
@@ -168,6 +167,9 @@ __decorate([
 __decorate([
     SyncWithStore()
 ], RtkTranscripts$1.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkTranscripts$1.prototype, "config", void 0);
 __decorate([
     SyncWithStore()
 ], RtkTranscripts$1.prototype, "t", void 0);

package/dist/components/rtk-ui-provider.js

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { d as defaultConfig, n as uiState, u as uiStore } from './p-fc4484ae.js';
-import { g as generateConfig, p as provideRtkDesignSystem, d as deepMerge } from './p-31f1e8e5.js';
+import { e as defaultIconPack, h as useLanguage, c as createDefaultConfig, u as uiStore, b as createPeerStore } from './p-2b523e10.js';
+import { d as deepMerge } from './p-b8fe19b6.js';
 import './p-a83ccdbd.js';
 import { g as getSize } from './p-96be234f.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;
@@ -13,28 +13,23 @@ const RtkUiProvider$1 = /*@__PURE__*/ proxyCustomElement(class RtkUiProvider ext
         super();
         this.__registerHost();
         this.statesUpdate = createEvent(this, "rtkStatesUpdate", 7);
+        this.peerStore = null;
+        this.providerId = 'provider-' + Math.floor(Math.random() * 100);
+        /** Meeting */
+        this.meeting = null;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language utility */
+        this.t = useLanguage();
         /** Config */
-        this.config = defaultConfig;
+        this.config = 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 = getSize(this.host.clientWidth);
         };
-        this.loadTheme = () => {
-            var _a;
-            if (this.config === defaultConfig) {
-                const { config } = generateConfig(this.meeting.self.config, this.meeting);
-                this.config = config;
-            }
-            if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.designTokens) {
-                provideRtkDesignSystem(document.documentElement, this.config.designTokens);
-            }
-        };
         this.roomJoinedListener = () => {
             this.updateStates({ meeting: 'joined' });
         };
@@ -42,7 +37,6 @@ const RtkUiProvider$1 = /*@__PURE__*/ proxyCustomElement(class RtkUiProvider ext
             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 });
@@ -50,7 +44,7 @@ const RtkUiProvider$1 = /*@__PURE__*/ proxyCustomElement(class RtkUiProvider ext
         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,
@@ -67,19 +61,12 @@ const RtkUiProvider$1 = /*@__PURE__*/ proxyCustomElement(class RtkUiProvider ext
             }
         };
         this.handleChangingMeeting = (destinationMeetingId) => {
+            const currentStates = this.peerStore.state.states;
             this.updateStates({
-                activeBreakoutRoomsManager: Object.assign(Object.assign({}, uiState.states.activeBreakoutRoomsManager), { destinationMeetingId }),
+                activeBreakoutRoomsManager: Object.assign(Object.assign({}, currentStates.activeBreakoutRoomsManager), { destinationMeetingId }),
             });
         };
     }
-    listenState(e) {
-        this.updateStates(e.detail);
-    }
-    updateStates(states) {
-        const newStates = Object.assign({}, uiState.states);
-        uiState.states = deepMerge(newStates, states);
-        this.statesUpdate.emit(uiState.states);
-    }
     connectedCallback() {
         if (typeof window !== 'undefined') {
             this.authErrorListener = (ev) => {
@@ -89,6 +76,8 @@ const RtkUiProvider$1 = /*@__PURE__*/ proxyCustomElement(class RtkUiProvider ext
             };
             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);
@@ -100,6 +89,13 @@ const RtkUiProvider$1 = /*@__PURE__*/ proxyCustomElement(class RtkUiProvider ext
     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);
@@ -108,47 +104,123 @@ const RtkUiProvider$1 = /*@__PURE__*/ proxyCustomElement(class RtkUiProvider ext
         this.meeting.self.removeListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
         this.meeting.meta.removeListener('socketConnectionUpdate', this.socketConnectionUpdateListener);
     }
-    onMeetingChange(meeting) {
-        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;
+        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);
+    }
+    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 = 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;
+            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.state.iconPack = newIconPack;
+        if (this.peerStore) {
+            this.peerStore.state.iconPack = newIconPack;
+        }
     }
     onTChange(newT) {
-        uiStore.state.t = newT;
+        if (this.peerStore) {
+            this.peerStore.state.t = newT;
+        }
     }
     onConfigChange(config) {
-        uiStore.state.config = config;
+        if (this.peerStore) {
+            this.peerStore.state.config = config;
+        }
     }
     onSizeChange(newSize) {
-        uiStore.state.size = newSize;
+        if (this.peerStore) {
+            this.peerStore.state.size = newSize;
+        }
     }
     render() {
-        return h(Host, { key: '255d40656744b2906c20a139a1af87c66acc310a' }, this.noRenderUntilMeeting && !this.meeting ? null : h("slot", null));
+        // Don't render children until meeting is properly initialized
+        if (!this.meeting) {
+            return null;
+        }
+        return (h(Host, null, h("slot", null)));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -164,10 +236,10 @@ const RtkUiProvider$1 = /*@__PURE__*/ proxyCustomElement(class RtkUiProvider ext
         "iconPack": [16],
         "t": [16],
         "config": [16],
+        "mode": [513],
         "size": [1537],
-        "showSetupScreen": [4, "show-setup-screen"],
-        "noRenderUntilMeeting": [4, "no-render-until-meeting"]
-    }, [[0, "rtkStateUpdate", "listenState"]], {
+        "showSetupScreen": [4, "show-setup-screen"]
+    }, undefined, {
         "meeting": ["onMeetingChange"],
         "iconPack": ["onIconPackChange"],
         "t": ["onTChange"],

package/dist/components/rtk-viewer-count.js

@@ -1,4 +1,4 @@
-import { R as RtkViewerCount$1, d as defineCustomElement$1 } from './p-afc2ce7b.js';
+import { R as RtkViewerCount$1, d as defineCustomElement$1 } from './p-12e64755.js';
 
 const RtkViewerCount = RtkViewerCount$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-virtualized-participant-list.js

@@ -1,4 +1,4 @@
-import { R as RtkVirtualizedParticipantList$1, d as defineCustomElement$1 } from './p-9e5b47ea.js';
+import { R as RtkVirtualizedParticipantList$1, d as defineCustomElement$1 } from './p-dc3143c0.js';
 
 const RtkVirtualizedParticipantList = RtkVirtualizedParticipantList$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-waiting-screen.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { d as defaultConfig, a as defaultIconPack, c as useLanguage } from './p-fc4484ae.js';
+import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './p-2b523e10.js';
 import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-989a34c9.js';
-import { d as defineCustomElement$2 } from './p-7916d083.js';
+import { S as SyncWithStore } from './p-3968315b.js';
+import { d as defineCustomElement$2 } from './p-17ac0da7.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,14 +23,14 @@ const RtkWaitingScreen$1 = /*@__PURE__*/ proxyCustomElement(class RtkWaitingScre
         this.__registerHost();
         this.__attachShadow();
         /** Config */
-        this.config = defaultConfig;
+        this.config = createDefaultConfig();
         /** Icon pack */
         this.iconPack = defaultIconPack;
         /** Language */
         this.t = useLanguage();
     }
     render() {
-        return (h(Host, { key: '06c3f95f6b37b0b6dac40c39f0006dfd8e2f1527' }, h("slot", { key: '76e9f7369a1aa9c2b5a6bbb602ff1f26289c5d80' }, h("div", { key: '8214ae3640c401b4d1ba1333aaa996ef49b7ec1c', class: "centered", part: "content" }, h("rtk-logo", { key: 'ec1f1f220f39f674510e1c95699f92d53a9fbf00', meeting: this.meeting, config: this.config, part: "logo", t: this.t }), h("p", { key: '9123734c61b424b323701f99ac8da6ee0b2885e4' }, this.t('waitlist.body_text'))))));
+        return (h(Host, { key: '42ab084403fb118e17ca88c0aa9ca896d44893b7' }, h("slot", { key: 'd92a248417603793da8efb8d3b914f1730bd2fc0' }, h("div", { key: '45a4c570273ee8e070fea17c340c800859ee72e3', class: "centered", part: "content" }, h("rtk-logo", { key: '7c5fe652ea18ed2cac0c20351525250c83cf8a1d', meeting: this.meeting, config: this.config, part: "logo", t: this.t }), h("p", { key: 'a3ac66ef146ac1f04a9a8e912befa3de40d534a1' }, this.t('waitlist.body_text'))))));
     }
     static get style() { return RtkWaitingScreenStyle0; }
 }, [1, "rtk-waiting-screen", {
@@ -42,6 +42,9 @@ const RtkWaitingScreen$1 = /*@__PURE__*/ proxyCustomElement(class RtkWaitingScre
 __decorate([
     SyncWithStore()
 ], RtkWaitingScreen$1.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkWaitingScreen$1.prototype, "config", void 0);
 __decorate([
     SyncWithStore()
 ], RtkWaitingScreen$1.prototype, "iconPack", void 0);