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

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

@@ -0,0 +1,148 @@
+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 { Host, h } from "@stencil/core";
+import { useLanguage } from "../../lib/lang";
+import { defaultIconPack } from "../../lib/icons";
+import { defaultConfig } from "../../exports";
+import { SyncWithStore } from "../../utils/sync-with-store";
+export class RtkWaitingScreen {
+    constructor() {
+        /** Config */
+        this.config = defaultConfig;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+    }
+    render() {
+        return (h(Host, { key: 'f2c47d3259b2df855467a20acb9c3cf9efba0656' }, h("slot", { key: 'f00f36e15ecf6279903d8512f3dee23057de734a' }, h("div", { key: '980543555369e3547a6ba36a4235e885ca65ee4b', class: "centered", part: "content" }, h("rtk-logo", { key: '9a82a757b90ceb5ec2d143cc2e4ba3a85e4b5ead', meeting: this.meeting, config: this.config, part: "logo", t: this.t }), h("p", { key: 'e9c2f4e21f075ee74e147249bd52e8947bdfa37d' }, this.t('waitlist.body_text'))))));
+    }
+    static get is() { return "rtk-waiting-screen"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rtk-waiting-screen.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rtk-waiting-screen.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "meeting": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Meeting",
+                    "resolved": "RealtimeKitClient",
+                    "references": {
+                        "Meeting": {
+                            "location": "import",
+                            "path": "../../types/rtk-client",
+                            "id": "src/types/rtk-client.ts::Meeting"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Meeting object"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "config": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "UIConfig",
+                    "resolved": "UIConfig",
+                    "references": {
+                        "UIConfig": {
+                            "location": "import",
+                            "path": "../../types/ui-config",
+                            "id": "src/types/ui-config/index.ts::UIConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Config"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "defaultConfig"
+            },
+            "iconPack": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconPack",
+                    "resolved": "{ people: string; people_checked: string; chat: string; poll: string; participants: string; rocket: string; call_end: string; share: string; mic_on: string; mic_off: string; video_on: string; video_off: string; share_screen_start: string; share_screen_stop: string; share_screen_person: string; clock: string; dismiss: string; send: string; search: string; more_vertical: string; chevron_down: string; chevron_up: string; chevron_left: string; chevron_right: string; settings: string; wifi: string; speaker: string; speaker_off: string; download: string; full_screen_maximize: string; full_screen_minimize: string; copy: string; attach: string; image: string; emoji_multiple: string; image_off: string; disconnected: string; wand: string; recording: string; subtract: string; stop_recording: string; warning: string; pin: string; pin_off: string; spinner: string; breakout_rooms: string; add: string; shuffle: string; edit: string; delete: string; back: string; save: string; web: string; checkmark: string; spotlight: string; join_stage: string; leave_stage: string; pip_off: string; pip_on: string; signal_1: string; signal_2: string; signal_3: string; signal_4: string; signal_5: string; start_livestream: string; stop_livestream: string; viewers: string; debug: string; info: string; devices: string; horizontal_dots: string; ai_sparkle: string; meeting_ai: string; create_channel: string; create_channel_illustration: string; captionsOn: string; captionsOff: string; play: string; pause: string; fastForward: string; minimize: string; maximize: string; }",
+                    "references": {
+                        "IconPack": {
+                            "location": "import",
+                            "path": "../../lib/icons",
+                            "id": "src/lib/icons/index.ts::IconPack"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon pack"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "defaultIconPack"
+            },
+            "t": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RtkI18n",
+                    "resolved": "(key: \"pin\" | \"unpin\" | \"kick\" | \"ended\" | \"disconnected\" | \"failed\" | \"(you)\" | \"everyone\" | (string & {}) | \"about_call\" | \"screen\" | \"camera\" | \"leave\" | \"dismiss\" | \"logo\" | \"page\" | \"more\" | \"page.prev\" | \"page.next\" | \"layout\" | \"layout.auto\" | \"settings\" | \"file\" | \"image\" | \"connection\" | \"leave_confirmation\" | \"cancel\" | \"yes\" | \"you\" | \"to\" | \"mute\" | \"pinned\" | \"accept\" | \"pip_on\" | \"pip_off\" | \"viewers\" | \"join\" | \"joined\" | \"create\" | \"close\" | \"ask\" | \"type\" | \"activate\" | \"requests\" | \"mic_off\" | \"disable_mic\" | \"mic_on\" | \"enable_mic\" | \"audio\" | \"test\" | \"minimize\" | \"maximize\" | \"mute_all\" | \"mute_all.description\" | \"mute_all.header\" | \"mute_all.allow_unmute\" | \"video_off\" | \"disable_video\" | \"video_on\" | \"enable_video\" | \"video\" | \"offline\" | \"offline.description\" | \"failed.description\" | \"disconnected.description\" | \"participants\" | \"participants.errors.empty_results\" | \"participants.empty_list\" | \"participants.no_pending_requests\" | \"participants.turn_off_video\" | \"polls\" | \"polls.by\" | \"polls.question\" | \"polls.question.placeholder\" | \"polls.answers\" | \"polls.option\" | \"polls.option.placeholder\" | \"polls.results.anon\" | \"polls.results.hide\" | \"polls.create\" | \"polls.cancel\" | \"polls.empty\" | \"polls.errors.question_required\" | \"polls.errors.empty_option\" | \"screenshare\" | \"screenshare.min_preview\" | \"screenshare.max_preview\" | \"screenshare.shared\" | \"screenshare.start\" | \"screenshare.stop\" | \"screenshare.error.unknown\" | \"screenshare.error.max_count\" | \"plugins\" | \"perm_denied\" | \"perm_denied.audio\" | \"perm_denied.video\" | \"perm_denied.screenshare\" | \"perm_denied.audio.chrome.message\" | \"perm_denied.video.chrome.message\" | \"perm_denied.screenshare.chrome.message\" | \"perm_denied.audio.safari.message\" | \"perm_denied.video.safari.message\" | \"perm_denied.screenshare.safari.message\" | \"perm_denied.audio.edge.message\" | \"perm_denied.video.edge.message\" | \"perm_denied.screenshare.edge.message\" | \"perm_denied.audio.microsoft edge.message\" | \"perm_denied.video.microsoft edge.message\" | \"perm_denied.screenshare.microsoft edge.message\" | \"perm_denied.audio.firefox.message\" | \"perm_denied.video.firefox.message\" | \"perm_denied.screenshare.firefox.message\" | \"perm_denied.audio.others.message\" | \"perm_denied.video.others.message\" | \"perm_denied.screenshare.others.message\" | \"perm_sys_denied\" | \"perm_sys_denied.audio\" | \"perm_sys_denied.video\" | \"perm_sys_denied.screenshare\" | \"perm_sys_denied.audio.macos.message\" | \"perm_sys_denied.video.macos.message\" | \"perm_sys_denied.screenshare.macos.message\" | \"perm_sys_denied.audio.ios.message\" | \"perm_sys_denied.video.ios.message\" | \"perm_sys_denied.screenshare.ios.message\" | \"perm_sys_denied.audio.windows.message\" | \"perm_sys_denied.video.windows.message\" | \"perm_sys_denied.screenshare.windows.message\" | \"perm_sys_denied.audio.android.message\" | \"perm_sys_denied.video.android.message\" | \"perm_sys_denied.screenshare.android.message\" | \"perm_sys_denied.audio.others.message\" | \"perm_sys_denied.video.others.message\" | \"perm_sys_denied.screenshare.others.message\" | \"perm_could_not_start\" | \"perm_could_not_start.audio\" | \"perm_could_not_start.video\" | \"perm_could_not_start.screenshare\" | \"perm_could_not_start.audio.message\" | \"perm_could_not_start.video.message\" | \"perm_could_not_start.screenshare.message\" | \"full_screen\" | \"full_screen.exit\" | \"waitlist.header_title\" | \"waitlist.body_text\" | \"waitlist.deny_request\" | \"waitlist.accept_request\" | \"waitlist.accept_all\" | \"stage_request.header_title\" | \"stage_request.deny_request\" | \"stage_request.accept_request\" | \"stage_request.accept_all\" | \"stage_request.deny_all\" | \"stage_request.approval_pending\" | \"stage_request.denied\" | \"stage_request.request\" | \"stage_request.requested\" | \"stage_request.cancel_request\" | \"stage_request.leave_stage\" | \"stage_request.request_tip\" | \"stage_request.leave_tip\" | \"stage_request.pending_tip\" | \"stage_request.denied_tip\" | \"stage.empty_host\" | \"stage.empty_host_summary\" | \"stage.empty_viewer\" | \"stage.remove_from_stage\" | \"stage.invited_notification\" | \"stage.add_to_stage\" | \"stage.join_title\" | \"stage.join_summary\" | \"stage.join_cancel\" | \"stage.join_confirm\" | \"setup_screen.join_in_as\" | \"setup_screen.joining_as\" | \"setup_screen.your_name\" | \"stage.reconnecting\" | \"recording.label\" | \"recording.indicator\" | \"recording.started\" | \"recording.stopped\" | \"recording.paused\" | \"recording.error.start\" | \"recording.error.stop\" | \"recording.error.resume\" | \"recording.start\" | \"recording.stop\" | \"recording.resume\" | \"recording.starting\" | \"recording.stopping\" | \"recording.loading\" | \"recording.idle\" | \"audio_playback\" | \"audio_playback.title\" | \"audio_playback.description\" | \"breakout_rooms\" | \"breakout_rooms.room_config_header\" | \"breakout_rooms.join_breakout_header\" | \"breakout_rooms.empty\" | \"breakout_rooms.delete\" | \"breakout_rooms.switch\" | \"breakout_rooms.main_room\" | \"breakout_rooms.shuffle_participants\" | \"breakout_rooms.deselect\" | \"breakout_rooms.selected\" | \"breakout_rooms.num_of_rooms\" | \"breakout_rooms.approx\" | \"breakout_rooms.participants_per_room\" | \"breakout_rooms.division_text\" | \"breakout_rooms.start_breakout\" | \"breakout_rooms.close_breakout\" | \"breakout_rooms.update_breakout\" | \"breakout_rooms.discard_changes\" | \"breakout_rooms.room\" | \"breakout_rooms.rooms\" | \"breakout_rooms.room_name\" | \"breakout_rooms.edit_room_name\" | \"breakout_rooms.save_room_name\" | \"breakout_rooms.add_room\" | \"breakout_rooms.add_room_brief\" | \"breakout_rooms.select_all\" | \"breakout_rooms.unassign_all\" | \"breakout_rooms.assign\" | \"breakout_rooms.assign_participants\" | \"breakout_rooms.none_assigned\" | \"breakout_rooms.drag_drop_participants\" | \"breakout_rooms.click_drop_participants\" | \"breakout_rooms.status.assign_multiple\" | \"breakout_rooms.status.select_room\" | \"breakout_rooms.ephemeral_status.participants_assigned\" | \"breakout_rooms.ephemeral_status.participants_assigned_randomly\" | \"breakout_rooms.ephemeral_status.changes_discarded\" | \"breakout_rooms.confirm_modal.start_breakout.header\" | \"breakout_rooms.confirm_modal.start_breakout.content\" | \"breakout_rooms.confirm_modal.start_breakout.cancelText\" | \"breakout_rooms.confirm_modal.start_breakout.ctaText\" | \"breakout_rooms.confirm_modal.close_breakout.header\" | \"breakout_rooms.confirm_modal.close_breakout.content\" | \"breakout_rooms.confirm_modal.close_breakout.ctaText\" | \"breakout_rooms.move_reason.started_msg\" | \"breakout_rooms.move_reason.started_desc\" | \"breakout_rooms.move_reason.closed_msg\" | \"breakout_rooms.move_reason.closed_desc\" | \"breakout_rooms.move_reason.switch_room\" | \"breakout_rooms.move_reason.switch_main_room\" | \"breakout_rooms.all_assigned\" | \"breakout_rooms.empty_main_room\" | \"breakout_rooms.leave_confirmation\" | \"breakout_rooms.leave_confirmation.main_room_btn\" | \"ai\" | \"ai.meeting_ai\" | \"ai.home\" | \"ai.transcriptions\" | \"ai.personal\" | \"ai.caption_view\" | \"ai.chat.tooltip\" | \"ai.chat.summerise\" | \"ai.chat.agenda\" | \"search\" | \"search.could_not_find\" | \"search.empty\" | \"end\" | \"end.all\" | \"ended.rejected\" | \"ended.left\" | \"ended.kicked\" | \"ended.disconnected\" | \"ended.network\" | \"ended.unauthorized\" | \"network\" | \"network.reconnecting\" | \"network.delay_extended\" | \"network.disconnected\" | \"network.leaving\" | \"network.restored\" | \"network.delay\" | \"network.lost\" | \"network.lost_extended\" | \"livestream\" | \"livestream.indicator\" | \"livestream.skip\" | \"livestream.idle\" | \"livestream.starting\" | \"livestream.stopping\" | \"livestream.waiting_on_manual_ingestion\" | \"livestream.error.not_supported\" | \"livestream.error.not_found\" | \"livestream.error.unknown\" | \"livestream.error.sync\" | \"livestream.error.start\" | \"livestream.error.stop\" | \"livestream.go_live\" | \"livestream.end_live\" | \"livestream.error\" | \"cta.help\" | \"cta.continue\" | \"cta.reload\" | \"cta.confirmation\" | \"cta.system_settings\" | \"remote_access.empty\" | \"remote_access.requests\" | \"remote_access.allow\" | \"remote_access.grant\" | \"remote_access.indicator\" | \"chat\" | \"chat.new\" | \"chat.max_limit_warning\" | \"chat.rate_limit_error\" | \"chat.new_channel\" | \"chat.channel_name\" | \"chat.member_name\" | \"chat.add_members\" | \"chat.delete_msg\" | \"chat.edit_msg\" | \"chat.send_msg\" | \"chat.send_attachment\" | \"chat.send_img\" | \"chat.send_file\" | \"chat.send_emoji\" | \"chat.update_msg\" | \"chat.channel_members\" | \"chat.img.loading\" | \"chat.error.img_not_found\" | \"chat.error.empty_results\" | \"chat.img.shared_by\" | \"chat.reply\" | \"chat.message_placeholder\" | \"chat.click_to_send\" | \"chat.search_msgs\" | \"chat.search_conversations\" | \"chat.start_conversation\" | \"chat.empty_search\" | \"chat.empty_channel\" | \"chat.cancel_upload\" | \"chat.view_chats\" | \"chat.everyone\" | \"chat.pinned_msgs\" | \"chat.toggle_pinned_msgs\" | \"date.today\" | \"date.yesteday\" | \"date.sunday\" | \"date.monday\" | \"date.tuesday\" | \"date.wednesday\" | \"date.thursday\" | \"date.friday\" | \"date.saturday\" | \"list.empty\" | \"grid.listening\" | \"transcript.off\" | \"transcript.on\" | \"settings.notification_sound\" | \"settings.microphone_input\" | \"settings.speaker_output\" | \"settings.mirror_video\" | \"settings.camera_off\" | \"dialog.close\" | \"notifications.joined\" | \"notifications.left\" | \"notifications.requesting_to_join_meeting\" | \"notifications.requested_to_join_stage\" | \"notifications.joined_stage\" | \"notifications.request_to_join_accepted\" | \"notifications.request_to_join_rejected\" | \"notifications.accept\" | \"notifications.new_poll_created_by\" | \"notifications.connected_to\" | \"notifications.plugin_switched_to\" | \"notifications.remote_control_requested\" | \"notifications.remote_control_request_sent\" | \"notifications.remote_control_request_accepted\" | \"notifications.remote_control_granted\" | \"notifications.remote_control_terminated\" | \"debugger.troubleshooting.label\" | \"debugger.quality.good\" | \"debugger.quality.average\" | \"debugger.quality.poor\" | \"debugger.stats.bitrate.label\" | \"debugger.stats.bitrate.description\" | \"debugger.stats.packet_loss.label\" | \"debugger.stats.packet_loss.description\" | \"debugger.stats.jitter.label\" | \"debugger.stats.jitter.description\" | \"debugger.stats.cpu_limitations.label\" | \"debugger.stats.cpu_limitations.description\" | \"debugger.stats.bandwidth_limitations.label\" | \"debugger.stats.bandwidth_limitations.description\" | \"debugger.audio.label\" | \"debugger.audio.troubleshooting.label\" | \"debugger.audio.messages.generating_report\" | \"debugger.audio.messages.enable_media\" | \"debugger.audio.sections.network_media\" | \"debugger.video.label\" | \"debugger.video.troubleshooting.label\" | \"debugger.video.messages.generating_report\" | \"debugger.video.messages.enable_media\" | \"debugger.video.sections.network_media\" | \"debugger.screenshare.label\" | \"debugger.screenshare.troubleshooting.label\" | \"debugger.screenshare.sections.network_media\" | \"debugger.screenshare.messages.generating_report\" | \"debugger.screenshare.messages.enable_media\" | \"debugger.system.label\" | \"debugger.system.troubleshooting.label\" | \"debugger.system.sections.battery\" | \"debugger.system.battery.level.label\" | \"debugger.system.battery.level.description\" | \"debugger.system.battery.charging.label\" | \"debugger.system.battery.charging.description\" | \"debugger.system.battery.charging.is_charging\" | \"debugger.system.battery.charging.is_not_charging\") => string",
+                    "references": {
+                        "RtkI18n": {
+                            "location": "import",
+                            "path": "../../lib/lang",
+                            "id": "src/lib/lang/index.ts::RtkI18n"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "useLanguage()"
+            }
+        };
+    }
+}
+__decorate([
+    SyncWithStore()
+], RtkWaitingScreen.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkWaitingScreen.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkWaitingScreen.prototype, "t", void 0);

package/dist/collection/exports.js

@@ -0,0 +1,16 @@
+// utilities
+import BreakoutRoomsManager from "./utils/breakout-rooms-manager";
+export { BreakoutRoomsManager };
+export { provideRtkDesignSystem } from './utils/provide-design-system';
+export { extendConfig, generateConfig } from './utils/config';
+export { sendNotification } from './utils/notification';
+export { RtkUiBuilder } from './lib/builder';
+export { uiStore, getInitialStates } from './utils/sync-with-store/ui-store';
+// addons
+export { registerAddons } from './lib/addons';
+// UIConfig, Icon Pack, i18n and Notification Sounds
+export { defaultConfig } from './lib/default-ui-config';
+export { defaultIconPack } from './lib/icons';
+export { defaultLanguage, useLanguage } from './lib/lang';
+export { default as RtkNotificationsAudio } from './lib/notification';
+export { generateChatGroupKey, getChatGroups, getUnreadChatCounts, getParticipantUserId, } from './utils/chat';

package/dist/collection/index.js

@@ -0,0 +1,2 @@
+// all other exports (used in documentation)
+export * from './exports';

package/dist/collection/lib/addons/index.js

@@ -0,0 +1,19 @@
+import { generateConfig } from "../../utils/config";
+import { RtkUiBuilder } from "../builder";
+/**
+ * Register addons to the meeting
+ * @param addons The list of addons to register
+ * @param meeting The meeting object
+ * @param config The current UIConfig
+ * @returns The updated UIConfig
+ */
+export function registerAddons(addons, meeting, config) {
+    if (!config) {
+        const generated = generateConfig(meeting.self.config, meeting);
+        config = generated.config;
+    }
+    addons.map((addon) => {
+        config = addon.register(config, meeting, (c) => new RtkUiBuilder(c));
+    });
+    return config;
+}

package/dist/collection/lib/audio.js

@@ -0,0 +1,54 @@
+import { disableSettingSinkId } from "../utils/flags";
+import logger from "../utils/logger";
+/**
+ * Handles audio from participants in a meeting
+ */
+export default 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;
+    }
+}

package/dist/collection/lib/builder/index.js

@@ -0,0 +1,203 @@
+import { defaultConfig } from "../default-ui-config";
+/* eslint-disable no-console */
+/*
+    Elements can be of two types
+    'rtk-mic-toggle' or ['rtk-mic-toggle', {prop: 1}]
+    Custom findByName function to check for both
+*/
+function getFinder(query) {
+    return (value) => {
+        if (Array.isArray(value)) {
+            return value[0] === query;
+        }
+        return value === query;
+    };
+}
+/*
+    Elements can be of two types
+    'rtk-mic-toggle' or ['rtk-mic-toggle', {prop: 1}]
+    Custom filterByName function to check for both
+*/
+function getFilter(query) {
+    return (value) => {
+        if (Array.isArray(value)) {
+            return value[0] !== query;
+        }
+        return value !== query;
+    };
+}
+/*
+    transform JSX Component Name -> web component format
+    eg. RtkMicToggle -> rtk-mic-toggle
+*/
+function convertComponentName(jsxName) {
+    return jsxName.replace(/([a-z])([A-Z])/g, (g) => `${g[0]}-${g[1]}`.toLowerCase());
+}
+export class UIElemEditor {
+    constructor(elem, config, keyString) {
+        this.elem = elem;
+        this.config = config;
+        this.keyString = keyString;
+    }
+    /**
+     * Adds an element to the chilren
+     * @param el :Name of the element - `rtk-mic-toggle`
+     * @param props :Optional props for the element `{variant: 'solid'}`
+     */
+    add(el, props = {}) {
+        var _a;
+        el = convertComponentName(el);
+        let composedElem = el;
+        if (Object.keys(props).length > 0) {
+            composedElem = [el, props];
+        }
+        if (Array.isArray(this.elem)) {
+            this.elem.push(composedElem);
+        }
+        else if ('children' in this.elem && Array.isArray(this.elem.children)) {
+            this.elem.children = [...this.elem.children, composedElem];
+        }
+        else if ('remove' in this.elem &&
+            Array.isArray(this.elem.remove) &&
+            this.elem.remove.find(getFinder(el))) {
+            this.elem.remove = this.elem.remove.filter(getFilter(el));
+        }
+        else {
+            if (!('add' in this.elem)) {
+                this.elem.add = [];
+            }
+            (_a = this.elem.add) === null || _a === void 0 ? void 0 : _a.push(composedElem);
+        }
+        return this;
+    }
+    /**
+     * Removes an element from the chilren
+     * @param el :Name of the element to remove - `rtk-mic-toggle`
+     */
+    remove(el) {
+        var _a;
+        el = convertComponentName(el);
+        if (Array.isArray(this.elem)) {
+            const idx = this.elem.findIndex(getFinder(el));
+            if (idx > -1) {
+                this.elem.splice(idx, 1);
+            }
+        }
+        else if ('children' in this.elem && Array.isArray(this.elem.children)) {
+            this.elem.children = this.elem.children.filter(getFilter(el));
+        }
+        else if ('add' in this.elem &&
+            Array.isArray(this.elem.add) &&
+            this.elem.add.find((e) => e === el)) {
+            this.elem.add = this.elem.add.filter(getFilter(el));
+        }
+        else {
+            if (!('remove' in this.elem)) {
+                this.elem.remove = [];
+            }
+            (_a = this.elem.remove) === null || _a === void 0 ? void 0 : _a.push(el);
+        }
+        return this;
+    }
+    set style(s) {
+        console.log(s);
+        // TODO: Not Implemented
+    }
+    setChildrenProps(childElem, props) {
+        console.log(this.keyString, childElem, props);
+        // TODO: Not Implemented
+    }
+    getChildrenProps(childElem) {
+        console.log(this.keyString, childElem);
+        // TODO: Not Implemented
+        return {};
+    }
+    replace(e) {
+        console.log(this.config, e);
+        // TODO: Not Implemented
+    }
+}
+/* eslint-enable no-console */
+export class RtkUiBuilder {
+    constructor(config) {
+        this.config = config || defaultConfig;
+    }
+    /**
+     * Find an element anywhere in the hierarachy and returns an editor object
+     * @param elem = 'rtk-participant-tile'
+     * @param states = { activeSidebar: true, activeSettings: true, meeting: 'joined'}
+     * @returns `UIElemEditor`
+     */
+    find(elem, states = {}) {
+        elem = convertComponentName(elem);
+        // eg. [activeSidebar, activeSettings]
+        const booleanStates = [];
+        // eg. [[meeting,joined]]
+        const nonBooleanStates = [];
+        Object.keys(states || {}).forEach((key) => {
+            if (typeof states[key] === 'boolean') {
+                booleanStates.push(key);
+            }
+            else {
+                nonBooleanStates.push([key, states[key]]);
+            }
+        });
+        booleanStates.sort();
+        const root = this.config.root;
+        if (root === undefined)
+            return;
+        let keyString = elem;
+        let booleanStateString = '';
+        if (booleanStates.length > 0) {
+            // eg. '.activeSettings.activeSidebar'
+            booleanStateString = `.${booleanStates.join('.')}`;
+            // eg. 'rtk-participant-tile.activeSettings.activeSidebar'
+            keyString = `${elem}${booleanStateString}`;
+            // An element will only re-render when a state described in its `states` key changes
+            // If the element has no states defined, ie. just array of children
+            // convert to a complex element type
+            if (Array.isArray(root[elem])) {
+                root[elem] = {
+                    states: [],
+                    children: root[elem],
+                };
+            }
+            if (root[elem].states === undefined) {
+                root[elem].states = [];
+            }
+            // Add each boolean state if it is not there already
+            booleanStates.forEach((e) => {
+                var _a, _b;
+                if (((_a = root[elem].states) === null || _a === void 0 ? void 0 : _a.indexOf(e)) === -1) {
+                    (_b = root[elem].states) === null || _b === void 0 ? void 0 : _b.push(e);
+                }
+            });
+        }
+        if (nonBooleanStates.length > 0) {
+            nonBooleanStates.forEach((k) => {
+                // eg. '[meeting=joined]'
+                const v = `[${k[0]}=${k[1]}]`;
+                // eg. 'rtk-participant-tile[meeting=joined].activeSettings.activeSidebar'
+                keyString = `${elem}${v}${booleanStateString}`;
+                // An element will only re-render when a state described in its `states` key changes
+                // If the element has no states defined, ie. just array of children
+                // convert to a complex element type
+                if (Array.isArray(root[elem])) {
+                    root[elem] = {
+                        state: k[0],
+                        children: root[elem],
+                    };
+                }
+            });
+        }
+        let target = root[keyString];
+        if (target === undefined) {
+            root[keyString] = {};
+            target = root[keyString];
+        }
+        return new UIElemEditor(target, this.config, keyString);
+    }
+    build() {
+        return this.config;
+    }
+}