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

package/dist/collection/components/rtk-idle-screen/rtk-idle-screen.js

@@ -9,7 +9,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Host, h } from "@stencil/core";
-import { defaultConfig } from "../../exports";
+import { createDefaultConfig } from "../../exports";
 import { defaultIconPack } from "../../lib/icons";
 import { useLanguage } from "../../lib/lang";
 import { SyncWithStore } from "../../utils/sync-with-store";
@@ -20,14 +20,14 @@ import { SyncWithStore } from "../../utils/sync-with-store";
 export class RtkIdleScreen {
     constructor() {
         /** Config object */
-        this.config = defaultConfig;
+        this.config = createDefaultConfig();
         /** Icon pack */
         this.iconPack = defaultIconPack;
         /** Language */
         this.t = useLanguage();
     }
     render() {
-        return (h(Host, { key: '9f9d0064dfc52af63ae90921929b25c822cb4d8c' }, h("slot", { key: 'c1c5744d86e89b22fa5f5c1b623ea97c0a1d2731' }, h("div", { key: '25e311957c411c61940fa1d51e350d466b0b2c92', class: "ctr", part: "container" }, h("rtk-logo", { key: 'daac0467ba4c3f5f9c7e23667c928e4ed40d6f96', meeting: this.meeting, config: this.config, t: this.t, part: "logo" }), h("rtk-spinner", { key: 'c36f58219362cb8d6c31eb975004428439592d3f', "aria-label": "Idle, waiting for meeting data", part: "spinner", iconPack: this.iconPack })))));
+        return (h(Host, { key: '9542c3ce51e79f077f59e3c260884b117ee8d327' }, h("slot", { key: 'b0d7e6f916ef6bc00eb77c89a6ee6c4f55fe81c5' }, h("div", { key: '028702fec102195179abb5ad93803478cda2cd4d', class: "ctr", part: "container" }, h("rtk-logo", { key: '5fa9163f969de1ee7f9f02b585138e16d583bf2b', meeting: this.meeting, config: this.config, t: this.t, part: "logo" }), h("rtk-spinner", { key: 'cbf0b91e0455cb2be65059766d6eb713674f2dcb', "aria-label": "Idle, waiting for meeting data", part: "spinner", iconPack: this.iconPack })))));
     }
     static get is() { return "rtk-idle-screen"; }
     static get encapsulation() { return "shadow"; }
@@ -88,7 +88,7 @@ export class RtkIdleScreen {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "defaultConfig"
+                "defaultValue": "createDefaultConfig()"
             },
             "iconPack": {
                 "type": "unknown",
@@ -144,6 +144,9 @@ export class RtkIdleScreen {
 __decorate([
     SyncWithStore()
 ], RtkIdleScreen.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkIdleScreen.prototype, "config", void 0);
 __decorate([
     SyncWithStore()
 ], RtkIdleScreen.prototype, "iconPack", void 0);

package/dist/collection/components/rtk-image-message/rtk-image-message.js

@@ -33,10 +33,10 @@ export class RtkImageMessage {
         this.status = 'loading';
     }
     render() {
-        return (h(Host, { key: '60b7d1f3569a3bd335b7db047ef5f5a7b8fa518c' }, !this.isContinued && (h(ChatHead, { key: 'e897d7239be3ba0a2594f5c6285cc5a5fd553375', name: this.message.displayName, time: this.message.time, now: this.now })), h("div", { key: 'f99332c642a51af6d4ab20eff1654826479b420b', class: {
+        return (h(Host, { key: 'd041223e2bcae326044ca2151b44d715b2490fa6' }, !this.isContinued && (h(ChatHead, { key: '35bdbb35d3bdb4c595f8185cd81327c86cd0524a', name: this.message.displayName, time: this.message.time, now: this.now })), h("div", { key: '44084f1be980d115f66caa8e82e97fcfb50e9827', class: {
                 body: true,
                 bubble: this.showBubble,
-            }, part: "body" }, h("div", { key: '667e081aff8edd5792cc2b0fac09d83d6520d6a7', class: { image: true, loaded: this.status === 'loaded' } }, h("img", { key: 'f079a0f75038bdf6a83e450bfdb68ab84d6f1663', src: sanitizeLink(this.message.link), onLoad: () => {
+            }, part: "body" }, h("div", { key: 'ae0e85f9d657025e71a2ecfe27b828717d52c7f1', class: { image: true, loaded: this.status === 'loaded' } }, h("img", { key: 'b28173a53512ec4ba0bb239441453f5d081eb504', src: sanitizeLink(this.message.link), onLoad: () => {
                 this.status = 'loaded';
             }, onError: () => {
                 this.status = 'errored';
@@ -44,9 +44,9 @@ export class RtkImageMessage {
                 if (this.status === 'loaded') {
                     this.stateUpdate.emit({ image: this.message });
                 }
-            } }), this.status === 'loading' && (h("div", { key: '00968152adade14971180db8df90553a17aaaaa8', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, h("rtk-spinner", { key: '0e236fd24f70e5dfbd5528d1198c9ecf7f2f4888', iconPack: this.iconPack }))), this.status === 'errored' && (h("div", { key: '8cd94804cb58c23c9c4636e7d8e14e3121b3e169', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, h("rtk-icon", { key: '625d50f65dfbd6af0f2061d96b5332452b060a12', icon: this.iconPack.image_off }))), this.status === 'loaded' && (h("div", { key: '4a5105c9deef32a5526d5adf8f6075230a09a90f', class: "actions" }, h("rtk-button", { key: 'f8519c23a87d30909451ceaf9c874b6b5258f4cb', class: "action", variant: "secondary", kind: "icon", onClick: () => {
+            } }), this.status === 'loading' && (h("div", { key: '408010e071e11a36613713759c4cfa6479f384b7', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, h("rtk-spinner", { key: '8b30e18bec4dfbbcd088d6e3c1e2f62b69d02123', iconPack: this.iconPack }))), this.status === 'errored' && (h("div", { key: '19db09c9ad48452d2b13f186bba8d637ef6bde3c', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, h("rtk-icon", { key: '6affdcac8b7f639a44012f003d27b5095b0d923c', icon: this.iconPack.image_off }))), this.status === 'loaded' && (h("div", { key: 'c81093571c1d33bc3f1a9755c5e4150108571506', class: "actions" }, h("rtk-button", { key: '075a5832d89c4ae5c89b994e1b35649984174c32', class: "action", variant: "secondary", kind: "icon", onClick: () => {
                 this.stateUpdate.emit({ image: this.message });
-            } }, h("rtk-icon", { key: '3b8e52922b59e9f75f8a25bc9605f4d044b7981c', icon: this.iconPack.full_screen_maximize })), h("rtk-button", { key: 'dc2703a02f091383498eaddfdcdf148e93471a88', class: "action", variant: "secondary", kind: "icon", onClick: () => downloadFile(this.message.link, { fallbackName: 'image' }) }, h("rtk-icon", { key: '1d9c9406e7937c64c93d77d685e86c3d1def4ec1', icon: this.iconPack.download }))))))));
+            } }, h("rtk-icon", { key: 'b00d1497ae3db0adc34add3e6cfc8537be04a581', icon: this.iconPack.full_screen_maximize })), h("rtk-button", { key: '9421be2f6b98623a3aebe4c3809a939f44660105', class: "action", variant: "secondary", kind: "icon", onClick: () => downloadFile(this.message.link, { fallbackName: 'image' }) }, h("rtk-icon", { key: '1623fc6cf182cb5df03ab7bb4cd858941a7f216e', icon: this.iconPack.download }))))))));
     }
     static get is() { return "rtk-image-message"; }
     static get originalStyleUrls() {
@@ -71,7 +71,7 @@ export class RtkImageMessage {
                         "ImageMessage": {
                             "location": "import",
                             "path": "@cloudflare/realtimekit",
-                            "id": "../../node_modules/@cloudflare/realtimekit/dist/index.d.ts::ImageMessage"
+                            "id": "node_modules::ImageMessage"
                         }
                     }
                 },

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

@@ -25,7 +25,7 @@ export class RtkImageMessageView {
         this.status = 'loading';
     }
     render() {
-        return (h("div", { key: '9d7c32348bb52dc60533d9d99cfbd4099d89fad0', class: { image: true, loaded: this.status === 'loaded' } }, h("img", { key: '1c66e60f69842cc1c372545759201ae8e70cbfe8', src: sanitizeLink(this.url), onLoad: () => {
+        return (h("div", { key: '066606e6ae62634b2466bb46b453e0c2d91b17ea', class: { image: true, loaded: this.status === 'loaded' } }, h("img", { key: 'f042e5d3c1a6341e9fc0845e6643016f1be5b5f7', src: sanitizeLink(this.url), onLoad: () => {
                 this.status = 'loaded';
             }, onError: () => {
                 this.status = 'errored';
@@ -33,9 +33,9 @@ export class RtkImageMessageView {
                 if (this.status === 'loaded') {
                     this.onPreview.emit(this.url);
                 }
-            } }), this.status === 'loading' && (h("div", { key: 'ee5cce91357ec2974c691ea95faacc78db9fa796', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, h("rtk-spinner", { key: '3c9236319042a7b9c5ff45dd196b4e14c38a7b0a', iconPack: this.iconPack }))), this.status === 'errored' && (h("div", { key: 'a176782a3ea63795ed154d8bf4cc3342cb20cd32', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, h("rtk-icon", { key: '4d4275e21b280a3b981634a8da7b2d752a620be1', icon: this.iconPack.image_off }))), this.status === 'loaded' && (h("div", { key: 'ca5468642912ad5407e3b828083b6e3f232b42e5', class: "actions" }, h("rtk-button", { key: '3b8a485a435023cb9819d98541cd9b1f40a96911', class: "action", variant: "secondary", kind: "icon", onClick: () => {
+            } }), this.status === 'loading' && (h("div", { key: 'd4a5030468fbf70afae62bd55ae4d0fa989e15c2', class: "image-spinner", title: this.t('chat.img.loading'), "aria-label": this.t('chat.img.loading') }, h("rtk-spinner", { key: '216aba361a46cc100e7d26cc2daf1ffb0948d695', iconPack: this.iconPack }))), this.status === 'errored' && (h("div", { key: '01f5da8f70872c9fa22dc9a9b70b046b0001d05b', class: "image-errored", title: this.t('chat.error.img_not_found'), "aria-label": this.t('chat.error.img_not_found') }, h("rtk-icon", { key: '0f7e6fed2730f6366d07fc6afddb2b247e9b7d3a', icon: this.iconPack.image_off }))), this.status === 'loaded' && (h("div", { key: '5ac0e61c65a88a8d6b9ee54c900b856854d1b84b', class: "actions" }, h("rtk-button", { key: 'fd83dfecd7b5d9c3976374c3c55731b1f026fc0a', class: "action", variant: "secondary", kind: "icon", onClick: () => {
                 this.onPreview.emit(this.url);
-            } }, h("rtk-icon", { key: '31e7ff096ca3e1db148f2808ad79aa79f56fa91e', icon: this.iconPack.full_screen_maximize })), h("rtk-button", { key: 'a1de648d80f8ac6d4d2197f0148e9708123434f3', class: "action", variant: "secondary", kind: "icon", onClick: () => downloadFile(this.url, { fallbackName: 'image' }) }, h("rtk-icon", { key: '4a06af4520a81fce102397907b66202a18f0c191', icon: this.iconPack.download }))))));
+            } }, h("rtk-icon", { key: '3ca7384fa28e6716345acacf9225ae9471ff8d63', icon: this.iconPack.full_screen_maximize })), h("rtk-button", { key: '198787808c389e4df48d3609a53c2d27cf2e7fb3', class: "action", variant: "secondary", kind: "icon", onClick: () => downloadFile(this.url, { fallbackName: 'image' }) }, h("rtk-icon", { key: 'f38fe3da48d1fc854001c719164c95f0673808c5', icon: this.iconPack.download }))))));
     }
     static get is() { return "rtk-image-message-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-image-viewer/rtk-image-viewer.js

@@ -39,7 +39,7 @@ export class RtkImageViewer {
         document.removeEventListener('click', this.handleOutsideClick);
     }
     render() {
-        return (h(Host, { key: '2bb235425497f7932f5cfd73ab7faa2c15d3691d', class: "scrollbar", onClick: (e) => e.stopPropagation() }, h("div", { key: '04dd5a250967f61e20b7b8fe559ca4ea1012f949', class: "header" }, h("div", { key: '9f533863c5d32c7333c872333d7c6c14c02f5827', class: "shared-by-user" }, this.t('chat.img.shared_by'), ' ', h("span", { key: '6e24710128bef29114ba0fa4f7c06561a7293a96', class: "displayName" }, formatName(shorten(this.image.displayName)))), h("div", { key: '1d7e518f2b61c74634885518450a0364691205cb', class: "actions" }, h("rtk-button", { key: 'b9ca96cf9eef4dfe347412daeec77f6b5183e5c5', onClick: () => downloadFile(this.image.link, { fallbackName: 'image' }) }, h("rtk-icon", { key: 'ee1326105412e04d113b35a8b1815f22c0699b87', icon: this.iconPack.download, slot: "start" }), "Download"), h("rtk-button", { key: '240d7f9f00f19031402bfca7c54d65a1f3bbef6d', kind: "icon", variant: "secondary", onClick: () => this.close.emit() }, h("rtk-icon", { key: '91e47a9b52baf9f28efda7b1d98f12d90724da1f', icon: this.iconPack.dismiss })))), h("div", { key: 'e50deb0d992a18b49641ccfde023f256083d05c7', class: "image-ctr" }, h("img", { key: 'febe53b5401100dd4a7e9c46693302e4c8dd711c', src: this.image.link }))));
+        return (h(Host, { key: 'b8fc805f0987197ddcd03f10e90e6a91150d3a3f', class: "scrollbar", onClick: (e) => e.stopPropagation() }, h("div", { key: '59d56e6174e4aaa6e5dc04f6a061fece48bf6a9a', class: "header" }, h("div", { key: 'd212463748bd8e3300ee745d3ef3ce10954a5fda', class: "shared-by-user" }, this.t('chat.img.shared_by'), ' ', h("span", { key: '140150887c27d5d45ee782e960304d1e2db38348', class: "displayName" }, formatName(shorten(this.image.displayName)))), h("div", { key: 'd9b1ef781318f0cc910905a77f9da6e9234c68e9', class: "actions" }, h("rtk-button", { key: '3e155e29b6e4d045f19d142b2935e1670be22c9a', onClick: () => downloadFile(this.image.link, { fallbackName: 'image' }) }, h("rtk-icon", { key: 'ed310a1ad5a00321806f0cee1ac078332ea8587f', icon: this.iconPack.download, slot: "start" }), "Download"), h("rtk-button", { key: 'bb8a9c255580dcd624d80684f64fa107f74d4485', kind: "icon", variant: "secondary", onClick: () => this.close.emit() }, h("rtk-icon", { key: 'd408bb24110614f4e33aba1892d9b05625e4d830', icon: this.iconPack.dismiss })))), h("div", { key: '177d1b3bdfe5a6b805721a7440ddedeca30f44fb', class: "image-ctr" }, h("img", { key: '21a491e7b8a513a547b996d5d2f1fd23c851a29d', src: this.image.link }))));
     }
     static get is() { return "rtk-image-viewer"; }
     static get encapsulation() { return "shadow"; }
@@ -65,7 +65,7 @@ export class RtkImageViewer {
                         "ImageMessage": {
                             "location": "import",
                             "path": "@cloudflare/realtimekit",
-                            "id": "../../node_modules/@cloudflare/realtimekit/dist/index.d.ts::ImageMessage"
+                            "id": "node_modules::ImageMessage"
                         }
                     }
                 },

package/dist/collection/components/rtk-information-tooltip/rtk-information-tooltip.js

@@ -17,7 +17,7 @@ export class RtkInformationTooltip {
         this.iconPack = defaultIconPack;
     }
     render() {
-        return (h(Host, { key: '3dc48c8a69876a68b038340a948057dd04a5e9ef' }, h("div", { key: '1f5a9c5379f882b249dee77376959d9b4de09d0b', class: "tooltip-container" }, h("rtk-icon", { key: 'cb0232b6e72f565895d3027747f957cba0e4910f', icon: this.iconPack.info, size: "sm" }), h("div", { key: '35a1b7abbb2026badb606444b330fcb239865d9f', class: "tooltip" }, h("slot", { key: '3295df905bcd5c10f31d211e74bf7a0e4413dd87', name: "tootlip-text" })))));
+        return (h(Host, { key: 'e6592aeb2d479a084f6100d1a32f6df61c2e979c' }, h("div", { key: '9406039d36b98781c2eb8dbbe37fab9a3390c90b', class: "tooltip-container" }, h("rtk-icon", { key: '97fd3324d790e8dc81d81bb272cacd95a2a95997', icon: this.iconPack.info, size: "sm" }), h("div", { key: 'e3b5b3a8e69cea34a1aa86b1a6eff2008028b673', class: "tooltip" }, h("slot", { key: '88608c68efc3287baf74d717a5e3ca418ef0dc9b', name: "tootlip-text" })))));
     }
     static get is() { return "rtk-information-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-join-stage/rtk-join-stage.js

@@ -9,7 +9,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Host, h } from "@stencil/core";
-import { defaultConfig } from "../../lib/default-ui-config";
+import { createDefaultConfig } from "../../lib/default-ui-config";
 import { defaultIconPack } from "../../lib/icons";
 import { useLanguage } from "../../lib/lang";
 import { Render } from "../../lib/render";
@@ -17,7 +17,7 @@ import { SyncWithStore } from "../../utils/sync-with-store";
 export class RtkJoinStage {
     constructor() {
         /** UI Config */
-        this.config = defaultConfig;
+        this.config = createDefaultConfig();
         /** Icon pack */
         this.iconPack = defaultIconPack;
         /** Language */
@@ -43,7 +43,7 @@ export class RtkJoinStage {
             iconPack: this.iconPack,
             t: this.t,
         };
-        return (h(Host, { key: '5adc039e20d21d089d3b34bb67d046387c46db06', class: { stage: true } }, h("header", { key: '43d3a4d1f004ae347fa8297b808ee9318b6a6a91' }, h("h2", { key: 'bdd9070ea15b136717ae060f86b46a32adbfcc99' }, this.dataConfig.title)), h(Render, { key: '7def3aec36f8616d88f41be6e503b033c98623ad', element: "rtk-participant-setup", defaults: defaults, props: { participant: (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self, size: 'md' }, childProps: { participant: (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.self, size: 'md' }, deepProps: true }), h("div", { key: 'b464fd360e42c6201f6e2cbed7107c4410648a7e', class: "summary" }, this.dataConfig.description), h("div", { key: '760a61c9d4b8284408a56818bd0d715d05bee9e6', class: "container" }, h("rtk-button", { key: '4b23c3a442fed701f66f600a1bbd1633c4036ae2', variant: "secondary", onClick: () => this.leaveStage.emit(), title: this.dataConfig.label.reject }, this.dataConfig.label.reject), h("rtk-button", { key: '8f7745aba52c737a57c2158ae23eb17f32d7b56e', onClick: () => {
+        return (h(Host, { key: 'ee254941b89cdcfbe322d8e913ca3dd2790d1ea6', class: { stage: true } }, h("header", { key: 'be0b1d01f1130eb94e5359a72dc95d9ce686e31d' }, h("h2", { key: 'aadacf690b450d5be0f2c86e029882e4345a5f52' }, this.dataConfig.title)), h(Render, { key: 'ea1f369c29e31d4c60e8dfe1f324a9d58866904b', element: "rtk-participant-setup", defaults: defaults, props: { participant: (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self, size: 'md' }, childProps: { participant: (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.self, size: 'md' }, deepProps: true }), h("div", { key: 'dc4258092491548d8434be632a3b0e0c18b8b161', class: "summary" }, this.dataConfig.description), h("div", { key: '83d272287d60dc1a18cdac4baf2d0aa88ed5360c', class: "container" }, h("rtk-button", { key: 'c6eadb7cbf2b933e702e9f5fdd34ef88d0b01147', variant: "secondary", onClick: () => this.leaveStage.emit(), title: this.dataConfig.label.reject }, this.dataConfig.label.reject), h("rtk-button", { key: 'e1c685560706b75b9f9118c18d82b4148c1bb32a', onClick: () => {
                 if (this.isLoading)
                     return;
                 this.isLoading = true;
@@ -109,7 +109,7 @@ export class RtkJoinStage {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "defaultConfig"
+                "defaultValue": "createDefaultConfig()"
             },
             "states": {
                 "type": "unknown",
@@ -296,6 +296,9 @@ export class RtkJoinStage {
 __decorate([
     SyncWithStore()
 ], RtkJoinStage.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkJoinStage.prototype, "config", void 0);
 __decorate([
     SyncWithStore()
 ], RtkJoinStage.prototype, "states", void 0);

package/dist/collection/components/rtk-leave-button/rtk-leave-button.js

@@ -29,7 +29,7 @@ export class RtkLeaveButton {
     }
     render() {
         const text = this.t('leave');
-        return (h(Host, { key: '2ce38b68e83d44e924766230f74b18111db72771', label: text }, h("rtk-controlbar-button", { key: '5bdc59145416c548a980178df00225781bbbadcc', size: this.size, iconPack: this.iconPack, class: "leave red-icon", onClick: this.leave, icon: this.iconPack.call_end, label: text, variant: this.variant, part: "controlbar-button" })));
+        return (h(Host, { key: '90606f784dc8305e5d7754f5442f644476ab24c6', label: text }, h("rtk-controlbar-button", { key: '5c3363d98a12c65ce2feba1b53ddc09d1654582c', size: this.size, iconPack: this.iconPack, class: "leave red-icon", onClick: this.leave, icon: this.iconPack.call_end, label: text, variant: this.variant, part: "controlbar-button" })));
     }
     static get is() { return "rtk-leave-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-leave-meeting/rtk-leave-meeting.js

@@ -75,9 +75,9 @@ export class RtkLeaveMeeting {
         }
     }
     render() {
-        return (h(Host, { key: 'd6e7a2eba47854f5f3da4008137081383769d159' }, h("div", { key: 'afffb6ce1dd2b38dd3cf2731723dbd0c8e68e046', class: "leave-modal" }, h("div", { key: 'f60a1660e94307fdf36e5e52a513648adc741aa5', class: "header" }, h("h2", { key: '5e80bd3031ed95929d6560e79e5edfcca607b169', class: "title" }, this.t('leave'))), h("p", { key: 'adfd75ca8e0408f90687f39de5de3b237378deb0', class: "message" }, this.isBreakoutRoomsActive && this.isChildMeeting
+        return (h(Host, { key: '55991a2b1b60bb963ee7dfb10fbea5d5bc63c186' }, h("div", { key: 'bc50b5a89ff7ee5348aadbba4fe8f709fa35bee9', class: "leave-modal" }, h("div", { key: '7a19d21b272222e7cf83bbb6dbd8bb4284ea9d29', class: "header" }, h("h2", { key: '935e06a35f3669457c63761697a9152972d69c54', class: "title" }, this.t('leave'))), h("p", { key: 'cd1ba755b4f73c0d3fb4c9078ee11afc31cee726', class: "message" }, this.isBreakoutRoomsActive && this.isChildMeeting
             ? this.t('breakout_rooms.leave_confirmation')
-            : this.t('leave_confirmation')), h("div", { key: '395b4f29350512c4c9d512984482bb934aadf983', class: "content" }, h("rtk-button", { key: '85adbf49f8ae02e05e16a349c99152b525ff6520', variant: "secondary", onClick: this.close, class: "secondary-btn" }, this.t('cancel')), this.isBreakoutRoomsActive && this.isChildMeeting && this.canJoinMainRoom && (h("rtk-button", { key: '6a965a9e4cad6f07624c7ac5255207b7b021b47c', variant: "secondary", onClick: this.handleJoinMainRoom, class: "secondary-btn" }, this.t('breakout_rooms.leave_confirmation.main_room_btn'))), h("rtk-button", { key: '41050c3895eeab4edc56742799505790d881cad9', variant: "danger", title: this.t('leave'), onClick: this.handleLeave }, this.t('leave')), this.canEndMeeting && (h("rtk-button", { key: '15fafd5ba16a9b545ba170ca1c0b113294d65ce9', variant: "danger", class: "secondary-btn secondary-danger-btn", onClick: this.handleEndMeeting }, this.t('end.all')))))));
+            : this.t('leave_confirmation')), h("div", { key: 'd4031f068f492f76d5feb9dd39587263e9b545f0', class: "content" }, h("rtk-button", { key: 'a014dc329e5f861de85468e04715d8aeb87f4e8c', variant: "secondary", onClick: this.close, class: "secondary-btn" }, this.t('cancel')), this.isBreakoutRoomsActive && this.isChildMeeting && this.canJoinMainRoom && (h("rtk-button", { key: '501a689793bb5e1ff2a8d03f5b9d0ab3d6baafbf', variant: "secondary", onClick: this.handleJoinMainRoom, class: "secondary-btn" }, this.t('breakout_rooms.leave_confirmation.main_room_btn'))), h("rtk-button", { key: '35a6941049928fa81f1e0a73b64f4ce937c86451', variant: "danger", title: this.t('leave'), onClick: this.handleLeave }, this.t('leave')), this.canEndMeeting && (h("rtk-button", { key: '7c6367e3f9322235e126c01cc16014f5b2c81ecc', variant: "danger", class: "secondary-btn secondary-danger-btn", onClick: this.handleEndMeeting }, this.t('end.all')))))));
     }
     static get is() { return "rtk-leave-meeting"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,7 @@ export class RtkLivestreamIndicator {
     }
     meetingChanged(meeting) {
         var _a, _b;
-        if (meeting == null)
+        if (!meeting)
             return;
         this.setIsLivestreaming((_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.setIsLivestreaming);

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

@@ -266,7 +266,7 @@ export class RtkLivestreamPlayer {
         window.rtk_hls = null;
     }
     meetingChanged(meeting) {
-        if (meeting == null)
+        if (!meeting)
             return;
         this.playbackUrl = this.meeting.livestream.playbackUrl;
         this.livestreamState = this.meeting.livestream.state;

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

@@ -30,9 +30,7 @@ export class RtkLivestreamToggle {
             }
         };
         this.isLoading = () => {
-            return (this.meeting == null ||
-                this.livestreamState === 'STARTING' ||
-                this.livestreamState === 'STOPPING');
+            return (!this.meeting || this.livestreamState === 'STARTING' || this.livestreamState === 'STOPPING');
         };
     }
     connectedCallback() {
@@ -43,7 +41,7 @@ export class RtkLivestreamToggle {
     }
     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);
@@ -108,6 +106,8 @@ export class RtkLivestreamToggle {
         }
     }
     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/collection/components/rtk-logo/rtk-logo.js

@@ -11,14 +11,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Host, h } from "@stencil/core";
 import { useLanguage } from "../../lib/lang";
 import { SyncWithStore } from "../../utils/sync-with-store";
-import { defaultConfig } from "../../exports";
+import { createDefaultConfig } from "../../exports";
 /**
  * A component which loads the logo from your config, or via the `logo-url` attribute.
  */
 export class RtkLogo {
     constructor() {
         /** Config object */
-        this.config = defaultConfig;
+        this.config = createDefaultConfig();
         /** Language */
         this.t = useLanguage();
     }
@@ -108,7 +108,7 @@ export class RtkLogo {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "defaultConfig"
+                "defaultValue": "createDefaultConfig()"
             },
             "meeting": {
                 "type": "unknown",
@@ -169,6 +169,9 @@ export class RtkLogo {
             }];
     }
 }
+__decorate([
+    SyncWithStore()
+], RtkLogo.prototype, "config", void 0);
 __decorate([
     SyncWithStore()
 ], RtkLogo.prototype, "meeting", void 0);

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

@@ -76,7 +76,7 @@ export class RtkMarkdownView {
         const slicedMessage = this.text.slice(0, this.maxLength);
         const withReply = extractReplyBlock(slicedMessage, true);
         const withoutReply = stripOutReplyBlock(slicedMessage);
-        return (h("p", { key: '0edda34be90038b70316ff2732939a7ea42f2b30' }, withReply.length !== 0 && h("blockquote", { key: 'c58ade9478aee1080c922c29245509dc94672fc4' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
+        return (h("p", { key: '787e6d3177f4faf1c8dcd7c73d83a6de9c57b42b' }, withReply.length !== 0 && h("blockquote", { key: '1c4b82fb870994e6707d35adcd5e6f2f0e65dd26' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
     }
     static get is() { return "rtk-markdown-view"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,25 +1,14 @@
-var __decorate = (this && this.__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;
-};
 import { h } from "@stencil/core";
 import deepMerge from "lodash-es/merge";
 import { getSize } from "../../utils/size";
 import { useLanguage } from "../../lib/lang";
 import { defaultIconPack } from "../../lib/icons";
-import { defaultConfig } from "../../lib/default-ui-config";
+import { createDefaultConfig } from "../../lib/default-ui-config";
 import { Render } from "../../lib/render";
 import { provideRtkDesignSystem } from "../../index";
 import { generateConfig } from "../../utils/config";
 import ResizeObserver from "resize-observer-polyfill";
-import { SyncWithStore } from "../../utils/sync-with-store";
-import { uiState } from "../../utils/sync-with-store/ui-store";
+import { createPeerStore, uiStore as legacyGlobalUIStore, } from "../../utils/sync-with-store/ui-store";
 /**
  * A single component which renders an entire meeting UI.
  *
@@ -29,6 +18,8 @@ import { uiState } from "../../utils/sync-with-store/ui-store";
  */
 export class RtkMeeting {
     constructor() {
+        /** 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' });
         };
@@ -44,7 +35,7 @@ export class RtkMeeting {
         this.mediaPermissionUpdateListener = ({ kind, message }) => {
             if (['audio', 'video'].includes(kind)) {
                 if ((message === 'DENIED' || message === 'SYSTEM_DENIED') &&
-                    uiState.states.activeDebugger !== true) {
+                    (this.peerStore || legacyGlobalUIStore).state.states.activeDebugger !== true) {
                     const permissionModalSettings = {
                         enabled: true,
                         kind,
@@ -60,6 +51,7 @@ export class RtkMeeting {
                 }, 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 */
@@ -71,14 +63,15 @@ export class RtkMeeting {
         /** 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 || legacyGlobalUIStore).state.states;
             this.updateStates({
-                activeBreakoutRoomsManager: Object.assign(Object.assign({}, uiState.states.activeBreakoutRoomsManager), { destinationMeetingId }),
+                activeBreakoutRoomsManager: Object.assign(Object.assign({}, currentStates.activeBreakoutRoomsManager), { destinationMeetingId }),
             });
         };
     }
@@ -92,17 +85,76 @@ export class RtkMeeting {
             };
             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 ResizeObserver(() => 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 || legacyGlobalUIStore).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)
@@ -113,40 +165,47 @@ export class RtkMeeting {
         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 || legacyGlobalUIStore).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 || legacyGlobalUIStore).state.states.activeDebugger !== true) {
             provideRtkDesignSystem(document.documentElement, this.config.designTokens);
         }
         meeting.self.addListener('roomJoined', this.roomJoinedListener);
@@ -165,33 +224,44 @@ export class RtkMeeting {
                 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 || legacyGlobalUIStore;
+        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 || legacyGlobalUIStore).state.states,
+            config: this.config || createDefaultConfig(),
             iconPack: this.iconPack,
             t: this.t,
         };
-        if (uiState.states.viewType === 'CHAT') {
+        if ((this.peerStore || legacyGlobalUIStore).state.states.viewType === 'CHAT') {
             return h("rtk-chat", Object.assign({}, defaults));
         }
         const elementProps = {
@@ -389,7 +459,7 @@ export class RtkMeeting {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "defaultConfig"
+                "defaultValue": "createDefaultConfig()"
             },
             "size": {
                 "type": "string",
@@ -477,7 +547,7 @@ export class RtkMeeting {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "States"
+                    "text": "Emits `rtkStatesUpdate` so that developers can listen to onRtkStatesUpdate and update their own stores\nDo not confuse this with `rtkStateUpdate` that other components emit"
                 },
                 "complexType": {
                     "original": "States",
@@ -497,24 +567,9 @@ export class RtkMeeting {
         return [{
                 "propName": "meeting",
                 "methodName": "meetingChanged"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "rtkStateUpdate",
-                "method": "listenState",
-                "target": undefined,
-                "capture": false,
-                "passive": false
+            }, {
+                "propName": "size",
+                "methodName": "onSizeChange"
             }];
     }
 }
-__decorate([
-    SyncWithStore()
-], RtkMeeting.prototype, "meeting", void 0);
-__decorate([
-    SyncWithStore()
-], RtkMeeting.prototype, "t", void 0);
-__decorate([
-    SyncWithStore()
-], RtkMeeting.prototype, "iconPack", void 0);