@cloudflare/realtimekit-ui 0.0.0 → 1.0.0-staging.11

package/dist/components/rtk-participants-audio.js

@@ -0,0 +1,248 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { e as disableSettingSinkId, a as defaultIconPack, c as useLanguage, m as isLiveStreamViewer } from './p-e6d09c50.js';
+import { l as logger } from './p-5605a420.js';
+import { S as SyncWithStore } from './p-d5791958.js';
+import { d as defineCustomElement$4 } from './p-4cc0e9a5.js';
+import { d as defineCustomElement$3 } from './p-cd50770d.js';
+import { d as defineCustomElement$2 } from './p-2f2fb96d.js';
+
+/**
+ * Handles audio from participants in a meeting
+ */
+class RTKAudio {
+    constructor(meeting, audio) {
+        this.meeting = meeting;
+        this.audio = audio !== null && audio !== void 0 ? audio : document.createElement('audio');
+        this.audio.autoplay = true;
+        this.audioStream = new MediaStream();
+        this.audio.srcObject = this.audioStream;
+        this.audioTracks = [];
+    }
+    addTrack(id, track) {
+        if (!this.audioTracks.some((a) => a.id === id)) {
+            this.audioTracks.push({ id, track });
+            this.audioStream.addTrack(track);
+            this.play();
+        }
+    }
+    removeTrack(id) {
+        const track = this.audioTracks.find((a) => a.id === id);
+        if (track != null) {
+            this.audioStream.removeTrack(track.track);
+            this.audioTracks = this.audioTracks.filter((a) => a.id !== id);
+        }
+    }
+    async play() {
+        var _a;
+        this.audio.srcObject = this.audioStream;
+        await ((_a = this.audio.play()) === null || _a === void 0 ? void 0 : _a.catch((err) => {
+            if (err.name === 'NotAllowedError') {
+                if (this._onError != null) {
+                    this._onError();
+                }
+            }
+            else if (err.name !== 'AbortError') {
+                logger.error('[rtk-audio] play() error\n', err);
+            }
+        }));
+    }
+    async setDevice(id) {
+        var _a, _b, _c;
+        if (disableSettingSinkId(this.meeting))
+            return;
+        await ((_c = (_b = (_a = this.audio).setSinkId) === null || _b === void 0 ? void 0 : _b.call(_a, id)) === null || _c === void 0 ? void 0 : _c.catch((err) => {
+            logger.error('[rtk-audio] setSinkId() error\n', err);
+        }));
+    }
+    onError(onError) {
+        this._onError = onError;
+    }
+}
+
+const rtkParticipantsAudioCss = ":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;overflow-wrap:break-word;color:rgb(var(--rtk-colors-text-1000, 255 255 255));word-wrap:break-word}.modal{box-sizing:border-box;width:100%;max-width:var(--rtk-space-96, 384px);padding:var(--rtk-space-4, 16px);border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}.modal h3{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px);font-size:24px;font-weight:500}.modal p{margin-top:var(--rtk-space-4, 16px);margin-bottom:var(--rtk-space-6, 24px)}.modal rtk-button{width:100%}";
+const RtkParticipantsAudioStyle0 = rtkParticipantsAudioCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RtkParticipantsAudio$1 = /*@__PURE__*/ proxyCustomElement(class RtkParticipantsAudio extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dialogClose = createEvent(this, "dialogClose", 7);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Pass existing audio element */
+        this.preloadedAudioElem = undefined;
+        this.showPlayDialog = false;
+        this.onRtkDialogClose = () => {
+            this.showPlayDialog = false;
+            this.dialogClose.emit();
+        };
+    }
+    componentDidLoad() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this.meeting == null)
+            return;
+        this.audioUpdateListener &&
+            this.meeting.participants.joined.removeListener('audioUpdate', this.audioUpdateListener);
+        this.screenShareUpdateListener &&
+            this.meeting.participants.joined.removeListener('screenShareUpdate', this.screenShareUpdateListener);
+        this.participantLeftListener &&
+            this.meeting.participants.joined.removeListener('participantLeft', this.participantLeftListener);
+        this.deviceUpdateListener &&
+            this.meeting.self.removeListener('deviceUpdate', this.deviceUpdateListener);
+        this.stageStatusUpdateListener &&
+            ((_a = this.meeting.stage) === null || _a === void 0 ? void 0 : _a.removeListener('stageStatusUpdate', this.stageStatusUpdateListener));
+    }
+    async setupAudio() {
+        this.audio = new RTKAudio(this.meeting, this.preloadedAudioElem);
+        // Set the device to the current speaker device
+        const currentDevices = this.meeting.self.getCurrentDevices();
+        if (currentDevices.speaker != null) {
+            await this.audio.setDevice(currentDevices.speaker.deviceId);
+        }
+    }
+    async handleAutoPlayError() {
+        if (!this.audio) {
+            await this.setupAudio();
+        }
+        this.audio.onError(() => {
+            this.showPlayDialog = true;
+        });
+        this.audio.play();
+        return;
+    }
+    async handleEvents(meeting) {
+        this.audioUpdateListener = ({ id, audioEnabled, audioTrack }) => {
+            const audioId = `audio-${id}`;
+            if (audioEnabled && audioTrack != null) {
+                this.audio.addTrack(audioId, audioTrack);
+            }
+            else {
+                this.audio.removeTrack(audioId);
+            }
+        };
+        const participants = meeting.participants.joined.toArray();
+        for (const participant of participants) {
+            this.audioUpdateListener(participant);
+        }
+        this.participantLeftListener = ({ id }) => {
+            this.audio.removeTrack(`audio-${id}`);
+            this.audio.removeTrack(`screenshare-${id}`);
+        };
+        this.screenShareUpdateListener = ({ id, screenShareEnabled, screenShareTracks }) => {
+            const audioId = `screenshare-${id}`;
+            if (screenShareEnabled && screenShareTracks.audio != null) {
+                this.audio.addTrack(audioId, screenShareTracks.audio);
+            }
+            else {
+                this.audio.removeTrack(audioId);
+            }
+        };
+        this.deviceUpdateListener = ({ device, preview }) => {
+            if (preview)
+                return;
+            if (device.kind === 'audiooutput') {
+                this.audio.setDevice(device.deviceId);
+            }
+        };
+        meeting.participants.joined.addListener('audioUpdate', this.audioUpdateListener);
+        meeting.participants.joined.addListener('screenShareUpdate', this.screenShareUpdateListener);
+        meeting.participants.joined.addListener('participantLeft', this.participantLeftListener);
+        meeting.self.addListener('deviceUpdate', this.deviceUpdateListener);
+    }
+    async meetingChanged(meeting) {
+        var _a;
+        if (meeting == null)
+            return;
+        this.setupAudio();
+        if (isLiveStreamViewer(meeting)) {
+            this.stageStatusUpdateListener = async (status) => {
+                if (status === 'ON_STAGE') {
+                    // NOTE(@madhugb): When someone joins stage handle autoplay and also handle events
+                    await this.handleAutoPlayError();
+                }
+            };
+            (_a = meeting.stage) === null || _a === void 0 ? void 0 : _a.on('stageStatusUpdate', this.stageStatusUpdateListener);
+        }
+        else {
+            await this.handleAutoPlayError();
+        }
+        await this.handleEvents(meeting);
+    }
+    render() {
+        return (h(Host, { key: '8f6ac797ceb5f3fa6c8633e72174e9ae91e7979a' }, this.showPlayDialog && (h("rtk-dialog", { key: 'd1f5723dec7d7e9e66625deb9cebce63e26520e1', open: true, onRtkDialogClose: this.onRtkDialogClose, hideCloseButton: true, disableEscapeKey: true, iconPack: this.iconPack, t: this.t }, h("div", { key: 'cd0de80766e3f1c665666f463bf405f44ed8323d', class: "modal" }, h("h3", { key: '098d978b8c3aeba86328e23104fa7e73f12f2296' }, this.t('audio_playback.title')), h("p", { key: '74d242093687ab9734392a8d5357c7a2c5cce8b9' }, this.t('audio_playback.description')), h("rtk-button", { key: '6382f33f9b3907989c5559c49091f2173be708e3', kind: "wide", onClick: () => {
+                this.audio.play();
+                this.onRtkDialogClose();
+            }, title: this.t('audio_playback') }, this.t('audio_playback')))))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+    static get style() { return RtkParticipantsAudioStyle0; }
+}, [1, "rtk-participants-audio", {
+        "meeting": [16],
+        "iconPack": [16],
+        "t": [16],
+        "preloadedAudioElem": [16],
+        "showPlayDialog": [32]
+    }, undefined, {
+        "meeting": ["meetingChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkParticipantsAudio$1.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantsAudio$1.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantsAudio$1.prototype, "t", void 0);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-participants-audio", "rtk-button", "rtk-dialog", "rtk-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-participants-audio":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkParticipantsAudio$1);
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-dialog":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const RtkParticipantsAudio = RtkParticipantsAudio$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkParticipantsAudio, defineCustomElement };

package/dist/components/rtk-participants-stage-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RtkParticipantsStageList extends Components.RtkParticipantsStageList, HTMLElement {}
+export const RtkParticipantsStageList: {
+    prototype: RtkParticipantsStageList;
+    new (): RtkParticipantsStageList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/rtk-participants-stage-list.js

@@ -0,0 +1,6 @@
+import { R as RtkParticipants, d as defineCustomElement$1 } from './p-2ecf028f.js';
+
+const RtkParticipantsStageList = RtkParticipants;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkParticipantsStageList, defineCustomElement };

package/dist/components/rtk-participants-stage-queue.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RtkParticipantsStageQueue extends Components.RtkParticipantsStageQueue, HTMLElement {}
+export const RtkParticipantsStageQueue: {
+    prototype: RtkParticipantsStageQueue;
+    new (): RtkParticipantsStageQueue;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/rtk-participants-stage-queue.js

@@ -0,0 +1,6 @@
+import { R as RtkParticipantsStaged, d as defineCustomElement$1 } from './p-aa9ee9a5.js';
+
+const RtkParticipantsStageQueue = RtkParticipantsStaged;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkParticipantsStageQueue, defineCustomElement };

package/dist/components/rtk-participants-toggle.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RtkParticipantsToggle extends Components.RtkParticipantsToggle, HTMLElement {}
+export const RtkParticipantsToggle: {
+    prototype: RtkParticipantsToggle;
+    new (): RtkParticipantsToggle;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,199 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-e6d09c50.js';
+import { a as canViewParticipants } from './p-c11b2f37.js';
+import { S as SyncWithStore } from './p-d5791958.js';
+import { d as defineCustomElement$4 } from './p-bdbaa65b.js';
+import { d as defineCustomElement$3 } from './p-2f2fb96d.js';
+import { d as defineCustomElement$2 } from './p-81f4e985.js';
+
+const rtkParticipantsToggleCss = ":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:relative;display:block}:host([data-hidden]){display:none}.waiting-participants-count{position:absolute;right:var(--rtk-space-3, 12px);box-sizing:border-box;padding:var(--rtk-space-0\\.5, 2px);-webkit-user-select:none;-moz-user-select:none;user-select:none;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));font-size:12px;display:flex;height:var(--rtk-space-5, 20px);min-width:var(--rtk-space-5, 20px);align-items:center;justify-content:center;border-radius:9999px;z-index:1}:host([variant='horizontal']) .waiting-participants-count{right:var(--rtk-space-4, 16px);top:50%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}";
+const RtkParticipantsToggleStyle0 = rtkParticipantsToggleCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RtkParticipantsToggle$1 = /*@__PURE__*/ proxyCustomElement(class RtkParticipantsToggle extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        /** Variant */
+        this.variant = 'button';
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.participantsActive = false;
+        this.waitlistedParticipants = [];
+        this.stageRequestedParticipants = [];
+        this.badgeCount = 0;
+        this.canViewParticipants = false;
+        this.updateStageRequests = async (stageRequests) => {
+            var _a, _b, _c;
+            if (!stageRequests) {
+                stageRequests = (_c = (_b = (_a = this.meeting.stage) === null || _a === void 0 ? void 0 : _a.getAccessRequests()) === null || _b === void 0 ? void 0 : _b.stageRequests) !== null && _c !== void 0 ? _c : [];
+            }
+            this.stageRequestedParticipants = stageRequests;
+            this.stageRequestedParticipants =
+                this.meeting.stage.status === 'REQUESTED_TO_JOIN_STAGE'
+                    ? [this.meeting.self, ...stageRequests]
+                    : stageRequests;
+            this.updateBadgeCount();
+        };
+        this.updateBadgeCount = () => {
+            this.badgeCount = this.waitlistedParticipants.length + this.stageRequestedParticipants.length;
+        };
+        this.updateCanView = () => {
+            this.canViewParticipants = canViewParticipants(this.meeting);
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+        this.statesChanged(this.states);
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        if (this.meeting == null)
+            return;
+        (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.stage) === null || _b === void 0 ? void 0 : _b.removeListener('stageStatusUpdate', this.updateCanView);
+        this.waitlistedParticipantJoinedListener &&
+            this.meeting.participants.waitlisted.removeListener('participantJoined', this.waitlistedParticipantJoinedListener);
+        this.waitlistedParticipantLeftListener &&
+            this.meeting.participants.waitlisted.removeListener('participantLeft', this.waitlistedParticipantLeftListener);
+        (_c = this.meeting.stage) === null || _c === void 0 ? void 0 : _c.removeListener('stageAccessRequestUpdate', this.updateStageRequests);
+    }
+    meetingChanged(meeting) {
+        var _a;
+        if (meeting == null)
+            return;
+        this.canViewParticipants = canViewParticipants(meeting);
+        (_a = meeting === null || meeting === void 0 ? void 0 : meeting.stage) === null || _a === void 0 ? void 0 : _a.on('stageStatusUpdate', this.updateCanView);
+        if (meeting.self.permissions.acceptWaitingRequests) {
+            this.waitlistedParticipants = meeting.participants.waitlisted.toArray();
+            this.waitlistedParticipantJoinedListener = (participant) => {
+                if (!this.waitlistedParticipants.some((p) => p.id === participant.id)) {
+                    this.waitlistedParticipants = [...this.waitlistedParticipants, participant];
+                    this.updateBadgeCount();
+                }
+            };
+            this.waitlistedParticipantLeftListener = (participant) => {
+                this.waitlistedParticipants = this.waitlistedParticipants.filter((p) => p.id !== participant.id);
+                this.updateBadgeCount();
+            };
+            meeting.participants.waitlisted.addListener('participantJoined', this.waitlistedParticipantJoinedListener);
+            meeting.participants.waitlisted.addListener('participantLeft', this.waitlistedParticipantLeftListener);
+        }
+        if (this.meeting.self.permissions.stageEnabled &&
+            this.meeting.self.permissions.acceptStageRequests) {
+            this.updateStageRequests();
+            meeting === null || meeting === void 0 ? void 0 : meeting.stage.on('stageAccessRequestUpdate', this.updateStageRequests);
+        }
+        this.updateBadgeCount();
+    }
+    statesChanged(states) {
+        if (states != null) {
+            this.participantsActive = states.activeSidebar === true && states.sidebar === 'participants';
+        }
+    }
+    toggleParticipantsTab() {
+        const states = this.states;
+        this.participantsActive = !((states === null || states === void 0 ? void 0 : states.activeSidebar) && (states === null || states === void 0 ? void 0 : states.sidebar) === 'participants');
+        this.stateUpdate.emit({
+            activeSidebar: this.participantsActive,
+            sidebar: this.participantsActive ? 'participants' : undefined,
+            activeMoreMenu: false,
+            activeAI: false,
+        });
+    }
+    handleParticipantsActiveChange() {
+        // Participants sidebar closed without opening a different sidebar
+        if (!this.participantsActive && !this.states.activeSidebar) {
+            this.buttonEl.focus();
+        }
+    }
+    render() {
+        if (!this.canViewParticipants)
+            return h(Host, { "data-hidden": true });
+        const text = this.t('participants');
+        return (h(Host, { title: text }, this.badgeCount !== 0 && !this.participantsActive && (h("div", { class: "waiting-participants-count", part: "waiting-participants-count" }, h("span", null, this.badgeCount <= 100 ? this.badgeCount : '99+'))), h("rtk-controlbar-button", { ref: (el) => (this.buttonEl = el), part: "controlbar-button", size: this.size, iconPack: this.iconPack, class: { active: this.participantsActive }, onClick: () => this.toggleParticipantsTab(), icon: this.iconPack.participants, label: text, variant: this.variant })));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "states": ["statesChanged"],
+        "participantsActive": ["handleParticipantsActiveChange"]
+    }; }
+    static get style() { return RtkParticipantsToggleStyle0; }
+}, [1, "rtk-participants-toggle", {
+        "variant": [513],
+        "meeting": [16],
+        "states": [16],
+        "size": [513],
+        "iconPack": [16],
+        "t": [16],
+        "participantsActive": [32],
+        "waitlistedParticipants": [32],
+        "stageRequestedParticipants": [32],
+        "badgeCount": [32],
+        "canViewParticipants": [32]
+    }, undefined, {
+        "meeting": ["meetingChanged"],
+        "states": ["statesChanged"],
+        "participantsActive": ["handleParticipantsActiveChange"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkParticipantsToggle$1.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantsToggle$1.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantsToggle$1.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantsToggle$1.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkParticipantsToggle$1.prototype, "t", void 0);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-participants-toggle", "rtk-controlbar-button", "rtk-icon", "rtk-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-participants-toggle":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkParticipantsToggle$1);
+            }
+            break;
+        case "rtk-controlbar-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const RtkParticipantsToggle = RtkParticipantsToggle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkParticipantsToggle, defineCustomElement };

package/dist/components/rtk-participants-viewer-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RtkParticipantsViewerList extends Components.RtkParticipantsViewerList, HTMLElement {}
+export const RtkParticipantsViewerList: {
+    prototype: RtkParticipantsViewerList;
+    new (): RtkParticipantsViewerList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/rtk-participants-viewer-list.js

@@ -0,0 +1,6 @@
+import { R as RtkParticipantsViewers, d as defineCustomElement$1 } from './p-f33bb583.js';
+
+const RtkParticipantsViewerList = RtkParticipantsViewers;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkParticipantsViewerList, defineCustomElement };

package/dist/components/rtk-participants-waiting-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RtkParticipantsWaitingList extends Components.RtkParticipantsWaitingList, HTMLElement {}
+export const RtkParticipantsWaitingList: {
+    prototype: RtkParticipantsWaitingList;
+    new (): RtkParticipantsWaitingList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/rtk-participants-waiting-list.js

@@ -0,0 +1,6 @@
+import { R as RtkParticipantsWaitlisted, d as defineCustomElement$1 } from './p-24e9b37b.js';
+
+const RtkParticipantsWaitingList = RtkParticipantsWaitlisted;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkParticipantsWaitingList, defineCustomElement };

package/dist/components/rtk-participants.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RtkParticipants extends Components.RtkParticipants, HTMLElement {}
+export const RtkParticipants: {
+    prototype: RtkParticipants;
+    new (): RtkParticipants;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;