@cloudflare/realtimekit-ui 1.0.4-staging.1 → 1.0.4-staging.3

package/dist/components/rtk-speaker-selector.js

@@ -1,4 +1,4 @@
-import { R as RtkSpeakerSelector$1, d as defineCustomElement$1 } from './p-09ec425b.js';
+import { R as RtkSpeakerSelector$1, d as defineCustomElement$1 } from './p-8e257589.js';
 
 const RtkSpeakerSelector = RtkSpeakerSelector$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-spinner.js

@@ -1,4 +1,4 @@
-import { R as RtkSpinner$1, d as defineCustomElement$1 } from './p-24c3ffc2.js';
+import { R as RtkSpinner$1, d as defineCustomElement$1 } from './p-0748e03c.js';
 
 const RtkSpinner = RtkSpinner$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rtk-spotlight-grid.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './p-2b523e10.js';
+import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './p-f367f8a7.js';
 import { d as defaultGridSize } from './p-b13ddb7d.js';
 import { R as Render } from './p-60fdbd75.js';
-import { S as SyncWithStore } from './p-3968315b.js';
+import { S as SyncWithStore } from './p-8bbaf6c2.js';
 
 const rtkSpotlightGridCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:flex;height:100%;width:100%}main{flex:1 1 0%}.grid-width-sm{width:25%}.grid-width-md{width:50%}.grid-width-lg{width:66.666667%}:host([size='sm']),:host([size='md']){flex-direction:column}:host([size='md']) aside{max-height:var(--rtk-space-96, 384px);width:100%;max-width:100%}:host([size='md']) .grid-width-sm{height:25%}:host([size='md']) .grid-width-md{height:50%}:host([size='md']) .grid-width-lg{height:66.666667%}:host([size='sm']) aside{max-height:var(--rtk-space-96, 384px);width:100%;max-width:100%}:host([size='sm']) .grid-width-sm,:host([size='sm']) .grid-width-md,:host([size='sm']) .grid-width-lg{height:50%}:host([size='xl']) .grid-width-sm,:host([size='xl']) .grid-width-md,:host([size='xl']) .grid-width-lg{width:400px}:host([layout='column']){flex-direction:column}:host([layout='column']) main{flex:4}:host([layout='column']) aside{flex:2;max-width:100%;width:100%}";
 const RtkSpotlightGridStyle0 = rtkSpotlightGridCss;

package/dist/components/rtk-spotlight-indicator.js

@@ -1,4 +1,4 @@
-import { R as RtkSpotlightIndicator$1, d as defineCustomElement$1 } from './p-57973e22.js';
+import { R as RtkSpotlightIndicator$1, d as defineCustomElement$1 } from './p-a9755f31.js';
 
 const RtkSpotlightIndicator = RtkSpotlightIndicator$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-2b523e10.js';
+import { e as defaultIconPack, h as useLanguage } from './p-f367f8a7.js';
 import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-3968315b.js';
-import { d as defineCustomElement$5 } from './p-f31839f4.js';
-import { d as defineCustomElement$4 } from './p-cadee920.js';
-import { d as defineCustomElement$3 } from './p-24c3ffc2.js';
-import { d as defineCustomElement$2 } from './p-acbb932e.js';
+import { S as SyncWithStore } from './p-8bbaf6c2.js';
+import { d as defineCustomElement$5 } from './p-bfc8d680.js';
+import { d as defineCustomElement$4 } from './p-c722ac0b.js';
+import { d as defineCustomElement$3 } from './p-0748e03c.js';
+import { d as defineCustomElement$2 } from './p-5c2b1ba2.js';
 
 const canJoinStage = (meeting) => {
     var _a, _b;

package/dist/components/rtk-stage.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage } from './p-2b523e10.js';
-import { S as SyncWithStore } from './p-3968315b.js';
+import { e as defaultIconPack, h as useLanguage } from './p-f367f8a7.js';
+import { S as SyncWithStore } from './p-8bbaf6c2.js';
 
 const rtkStageCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block;position:relative;overflow:hidden}";
 const RtkStageStyle0 = rtkStageCss;

package/dist/components/rtk-switch.js

@@ -1,4 +1,4 @@
-import { R as RtkSwitch$1, d as defineCustomElement$1 } from './p-f3f1b0c0.js';
+import { R as RtkSwitch$1, d as defineCustomElement$1 } from './p-e956f8f7.js';
 
 const RtkSwitch = RtkSwitch$1;
 const defineCustomElement = defineCustomElement$1;

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

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

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

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

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

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

package/dist/components/rtk-tooltip.js

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

package/dist/components/rtk-transcript.js

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

package/dist/components/rtk-transcripts.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, w as writeTask, h, e as Host } from './p-c3592601.js';
-import { c as createDefaultConfig, h as useLanguage, F as clone } from './p-2b523e10.js';
+import { c as createDefaultConfig, h as useLanguage, F as clone } from './p-f367f8a7.js';
 import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-3968315b.js';
-import { d as defineCustomElement$2 } from './p-54de25c6.js';
+import { S as SyncWithStore } from './p-8bbaf6c2.js';
+import { d as defineCustomElement$2 } from './p-74f9ac6e.js';
 
 const rtkTranscriptsCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{position:absolute;top:var(--rtk-space-4, 16px);right:var(--rtk-space-4, 16px);bottom:var(--rtk-space-4, 16px);left:var(--rtk-space-4, 16px);top:auto;display:flex;flex-direction:column;pointer-events:none;justify-content:center;width:100%;z-index:5}rtk-transcript{margin-top:var(--rtk-space-2, 8px)}";
 const RtkTranscriptsStyle0 = rtkTranscriptsCss;

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

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
-import { e as defaultIconPack, h as useLanguage, c as createDefaultConfig, u as uiStore, b as createPeerStore } from './p-2b523e10.js';
-import { d as deepMerge } from './p-b8fe19b6.js';
+import { e as defaultIconPack, h as useLanguage, c as createDefaultConfig, u as uiStore, b as createPeerStore } from './p-f367f8a7.js';
+import { d as deepMerge, p as provideRtkDesignSystem } from './p-ba0e5882.js';
 import './p-a83ccdbd.js';
 import { g as getSize } from './p-96be234f.js';
 
@@ -209,6 +209,11 @@ const RtkUiProvider$1 = /*@__PURE__*/ proxyCustomElement(class RtkUiProvider ext
         if (this.peerStore) {
             this.peerStore.state.config = config;
         }
+        if ((config === null || config === void 0 ? void 0 : config.designTokens) &&
+            typeof document !== 'undefined' &&
+            (this.peerStore || uiStore).state.states.activeDebugger !== true) {
+            provideRtkDesignSystem(document.documentElement, config.designTokens);
+        }
     }
     onSizeChange(newSize) {
         if (this.peerStore) {

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

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

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

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
-import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './p-2b523e10.js';
+import { c as createDefaultConfig, e as defaultIconPack, h as useLanguage } from './p-f367f8a7.js';
 import './p-a83ccdbd.js';
-import { S as SyncWithStore } from './p-3968315b.js';
-import { d as defineCustomElement$2 } from './p-17ac0da7.js';
+import { S as SyncWithStore } from './p-8bbaf6c2.js';
+import { d as defineCustomElement$2 } from './p-6eba9a98.js';
 
 const rtkWaitingScreenCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.centered{display:flex;flex-direction:column;align-items:center}rtk-logo{margin-bottom:var(--rtk-space-8, 32px);height:var(--rtk-space-12, 48px)}p{font-size:16px;border-radius:var(--rtk-border-radius-lg, 12px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));padding-left:var(--rtk-space-8, 32px);padding-right:var(--rtk-space-8, 32px);padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-1000, 255 255 255))}";
 const RtkWaitingScreenStyle0 = rtkWaitingScreenCss;

package/dist/docs/docs-components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-07-17T04:53:30",
+  "timestamp": "2025-07-25T05:47:09",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.27.2",

package/dist/esm/{TextMessage-a699d8da.js → TextMessage-8f228811.js}

@@ -1,5 +1,5 @@
 import { h } from './index-c1fb98bb.js';
-import { M as MAX_TEXT_LENGTH, j as extractReplyBlock, s as stripOutReplyBlock, f as parseRichText } from './chat-0fec85e9.js';
+import { M as MAX_TEXT_LENGTH, j as extractReplyBlock, s as stripOutReplyBlock, f as parseRichText } from './chat-923c5f59.js';
 
 const renderLink = (content) => {
     return (h("a", { class: "link", href: content, target: "_blank", rel: "noopener noreferrer" }, content));

package/dist/esm/{chat-0fec85e9.js → chat-923c5f59.js}

@@ -1,4 +1,4 @@
-import { k as chatUnreadTimestamps } from './ui-store-fabf2b32.js';
+import { G as chatUnreadTimestamps } from './ui-store-51db54bf.js';
 
 const parseMessageForTarget = (message) => {
     let parsedMessage = null;

package/dist/esm/{debounce-29e3a983.js → debounce-5b758f09.js}

@@ -1,4 +1,4 @@
-import { q as isObjectLike, r as baseGetTag, m as isObject, Q as root } from './ui-store-fabf2b32.js';
+import { n as isObjectLike, o as baseGetTag, j as isObject, Q as root } from './ui-store-51db54bf.js';
 
 /** `Object#toString` result references. */
 var symbolTag = '[object Symbol]';

package/dist/esm/{index-21637ec2.js → index-02905f52.js}

@@ -1,5 +1,5 @@
 import { a as getElement } from './index-c1fb98bb.js';
-import { u as uiStore, O as appendElement, P as removeElement } from './ui-store-fabf2b32.js';
+import { u as uiStore, O as appendElement, P as removeElement } from './ui-store-51db54bf.js';
 
 function SyncWithStore() {
     return function (proto, propName) {
@@ -25,7 +25,15 @@ function SyncWithStore() {
                 if (event.detail.requestId === requestId) {
                     // Blindly put peer specific store's value for propName in host propName
                     const storeValue = event.detail.store.state[propName];
-                    host[propName] = storeValue;
+                    host.componentOnReady().then(() => {
+                        /**
+                         * NOTE(ravindra-dyte):
+                         * https://stenciljs.com/docs/api#componentonready
+                         * This psudo ready callback is to ensure that the component is ready to accept props
+                         * Without this, changing the prop would not trigger @Watch of prop in the initial mount phase
+                         *  */
+                        host[propName] = storeValue;
+                    });
                     appendElement(propName, host, event.detail.store);
                     host[`_rtkStoreToCleanup-${propName}`] = event.detail.store;
                     // Since peer specific store is available, remove element prop from global store

package/dist/esm/index.js

@@ -1,10 +1,10 @@
-import { c as createDefaultConfig } from './ui-store-fabf2b32.js';
-export { B as BreakoutRoomsManager, c as createDefaultConfig, b as createPeerStore, d as defaultConfig, e as defaultIconPack, f as defaultLanguage, g as getInitialStates, a as uiState, u as uiStore, h as useLanguage } from './ui-store-fabf2b32.js';
-import { g as generateConfig } from './notification-deef1123.js';
-export { R as RtkNotificationsAudio, e as extendConfig, g as generateConfig, p as provideRtkDesignSystem } from './notification-deef1123.js';
-export { g as generateChatGroupKey, a as getChatGroups, c as getParticipantUserId, b as getUnreadChatCounts } from './chat-0fec85e9.js';
+import { c as createDefaultConfig } from './ui-store-51db54bf.js';
+export { B as BreakoutRoomsManager, c as createDefaultConfig, b as createPeerStore, d as defaultConfig, e as defaultIconPack, f as defaultLanguage, g as getInitialStates, a as uiState, u as uiStore, h as useLanguage } from './ui-store-51db54bf.js';
+export { p as provideRtkDesignSystem } from './merge-1a2358a4.js';
+import { g as generateConfig } from './notification-c1e1a387.js';
+export { R as RtkNotificationsAudio, e as extendConfig, g as generateConfig } from './notification-c1e1a387.js';
+export { g as generateChatGroupKey, a as getChatGroups, c as getParticipantUserId, b as getUnreadChatCounts } from './chat-923c5f59.js';
 import './index-c1fb98bb.js';
-import './merge-ef938315.js';
 
 /**
  * Send notification which will be displayed in the `<rtk-notifications />` component.