v1.7.0

changelog.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## 2026-01-02 - 1.7.0 - feat(recorder)
+lazy-load rrweb and rrweb-player from CDN via SioServiceLibLoader and switch sio-recorder to use the loader
+
+- Add SioServiceLibLoader service to lazy-load rrweb and rrweb-player (and inject rrweb-player CSS)
+- Add versions file (CDN_VERSIONS and CDN_BASE) and export loader from ts_web/index.ts
+- Update sio-recorder to use the loader for recording and playback instead of bundling rrweb/rrweb-player
+- Remove rrweb, rrweb-player and rrweb-snapshot from dependencies and bump lucide and @design.estate/dees-wcctools versions
+- Small package.json changes: remove --skiplibcheck from build script and bump @git.zone/tstest devDependency
+
+## 2025-12-18 - 1.6.1 - fix(sio-combox)
+tweak dropdown shadow and bind close event on conversation selector
+
+- Replaced unsafeCSS(shadows.xl) with explicit box-shadow values for the combox dropdown to adjust visual appearance
+- Added @close listener on <sio-conversation-selector> to call this.close(), enabling the selector to close the combox when it emits a close event
+- Affected file: ts_web/elements/sio-combox.ts
+
+## 2025-12-18 - 1.6.0 - feat(conversation-selector)
+add conversation status badges to conversation selector and include status in sample data
+
+- Introduce TConversationStatus type and add optional status property to IConversation
+- Render status badges in sio-conversation-selector with CSS classes and a getBadgeLabel helper
+- Update sample conversations in sio-combox.ts to include statuses: 'new', 'needs-action', 'waiting', 'resolved'
+
+## 2025-12-17 - 1.5.0 - feat(combox)
+Introduce singleton SioCombox attached to document.body with open/close/toggle API and animated show/hide; integrate SioFab to use the singleton and update styles/positioning
+
+- Add SioCombox.createOnBody() and SioCombox.getInstance() singletons
+- Add isOpen state, open(), close(), toggle(), getIsOpen() and emit opened/closed/close events
+- Move combox out of the FAB shadow DOM — attach to body and position fixed bottom-right with z-index and enter/exit transitions
+- Update mobile layout to full-screen sizing and adjust transform origin for phablet
+- Update SioFab to create the singleton on firstUpdated(), listen for close events, and toggle the singleton instead of rendering it inside the FAB
+- Remove previous in-FAB combox container markup/CSS and hasShownOnce logic
+- Minor visual/UX improvements: scale/opacity transitions, pointer-events control, and positioning variables for consistent behavior
+
 ## 2025-12-17 - 1.4.1 - fix(ui)
 handle on-screen keyboard visibility to adjust layout and prevent inputs from being obscured
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social.io/catalog",
-  "version": "1.4.1",
+  "version": "1.7.0",
   "private": false,
   "description": "catalog for social.io",
   "main": "dist_ts_web/index.js",
@@ -8,7 +8,7 @@
   "type": "module",
   "scripts": {
     "test": "tstest test/",
-    "build": "tsbuild tsfolders --allowimplicitany --skiplibcheck && tsbundle element --production",
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
     "watch": "tswatch element",
     "buildDocs": "tsdoc"
   },
@@ -17,19 +17,16 @@
   "dependencies": {
     "@design.estate/dees-domtools": "^2.3.6",
     "@design.estate/dees-element": "^2.1.3",
-    "@design.estate/dees-wcctools": "^2.0.1",
+    "@design.estate/dees-wcctools": "^3.4.0",
     "@losslessone_private/loint-pubapi": "^1.0.14",
     "@social.io/interfaces": "^1.2.1",
-    "lucide": "^0.561.0",
-    "rrweb": "2.0.0-alpha.4",
-    "rrweb-player": "1.0.0-alpha.4",
-    "rrweb-snapshot": "2.0.0-alpha.4"
+    "lucide": "^0.562.0"
   },
   "devDependencies": {
     "@git.zone/tsbuild": "^4.0.2",
     "@git.zone/tsbundle": "^2.6.3",
     "@git.zone/tsrun": "^2.0.1",
-    "@git.zone/tstest": "^3.1.3",
+    "@git.zone/tstest": "^3.1.4",
     "@git.zone/tswatch": "^2.3.13",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/smartenv": "^6.0.0",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@social.io/catalog',
-  version: '1.4.1',
+  version: '1.7.0',
   description: 'catalog for social.io'
 }

ts_web/elements/sio-combox.ts

@@ -36,6 +36,27 @@ declare global {
 export class SioCombox extends DeesElement {
   public static demo = () => html` <sio-combox></sio-combox> `;
 
+  // Singleton instance
+  private static instance: SioCombox | null = null;
+
+  /**
+   * Creates and appends a singleton combox to document.body
+   */
+  public static createOnBody(): SioCombox {
+    if (!SioCombox.instance) {
+      SioCombox.instance = new SioCombox();
+      document.body.appendChild(SioCombox.instance);
+    }
+    return SioCombox.instance;
+  }
+
+  /**
+   * Gets the singleton instance if it exists
+   */
+  public static getInstance(): SioCombox | null {
+    return SioCombox.instance;
+  }
+
   @property({ type: Object })
   public accessor referenceObject: HTMLElement;
 
@@ -45,6 +66,9 @@ export class SioCombox extends DeesElement {
   @state()
   private accessor isKeyboardVisible: boolean = false;
 
+  @state()
+  private accessor isOpen: boolean = false;
+
   private keyboardBlurTimeout?: number;
 
   @state()
@@ -55,24 +79,28 @@ export class SioCombox extends DeesElement {
       lastMessage: 'Thanks for your help with the login issue!',
       time: '2 min ago',
       unread: true,
+      status: 'new',
     },
     {
       id: '2',
       title: 'Billing Question',
       lastMessage: 'I need help understanding my invoice',
       time: '1 hour ago',
+      status: 'needs-action',
     },
     {
       id: '3',
       title: 'Feature Request',
       lastMessage: 'That would be great! Looking forward to it',
       time: 'Yesterday',
+      status: 'waiting',
     },
     {
       id: '4',
       title: 'General Inquiry',
       lastMessage: 'Thank you for the information',
       time: '2 days ago',
+      status: 'resolved',
     }
   ];
 
@@ -174,6 +202,48 @@ export class SioCombox extends DeesElement {
         this.removeAttribute('keyboard-visible');
       }
     }
+    if (changedProperties.has('isOpen')) {
+      if (this.isOpen) {
+        this.classList.add('open');
+        this.dispatchEvent(new CustomEvent('opened', { bubbles: true, composed: true }));
+      } else {
+        this.classList.remove('open');
+        this.dispatchEvent(new CustomEvent('closed', { bubbles: true, composed: true }));
+      }
+    }
+  }
+
+  /**
+   * Opens the combox
+   */
+  public open() {
+    this.isOpen = true;
+  }
+
+  /**
+   * Closes the combox
+   */
+  public close() {
+    this.isOpen = false;
+    this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+  }
+
+  /**
+   * Toggles the combox open/closed state
+   */
+  public toggle() {
+    if (this.isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  /**
+   * Returns whether the combox is currently open
+   */
+  public getIsOpen(): boolean {
+    return this.isOpen;
   }
 
   public static styles = [
@@ -181,32 +251,32 @@ export class SioCombox extends DeesElement {
     css`
       :host {
         display: block;
+        position: fixed;
+        bottom: 100px;
+        right: 20px;
         height: 600px;
         width: 800px;
         background: ${bdTheme('background')};
         border-radius: ${unsafeCSS(radius['2xl'])};
         border: 1px solid ${bdTheme('border')};
-        box-shadow: ${unsafeCSS(shadows.xl)};
+        box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.35), 0 12px 24px -8px rgb(0 0 0 / 0.15);
         overflow: hidden;
         font-family: ${unsafeCSS(fontFamilies.sans)};
-        position: relative;
         transform-origin: bottom right;
-      }
+        z-index: 10001;
 
-      :host(.animate-in) {
-        animation: scaleIn 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
-      }
-      
-      @keyframes scaleIn {
-        from {
+        /* Hidden by default */
         opacity: 0;
-          transform: scale(0.9) translateY(10px);
+        pointer-events: none;
+        transform: scale(0.95) translateY(10px);
+        transition: opacity 200ms ease, transform 200ms ease;
       }
-        to {
+
+      :host(.open) {
         opacity: 1;
+        pointer-events: all;
         transform: scale(1) translateY(0);
       }
-      }
 
       :host::before {
         content: '';
@@ -243,9 +313,19 @@ export class SioCombox extends DeesElement {
     // Mobile responsive layout - full screen with sliding mechanics
     cssManager.cssForPhablet(css`
       :host {
-        width: 100%;
-        height: 100%;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100vw;
+        height: 100vh;
+        height: 100dvh;
         border-radius: 0;
+        transform-origin: center center;
+      }
+
+      :host(.open) {
+        transform: scale(1) translateY(0);
       }
 
       :host::before {
@@ -321,6 +401,7 @@ export class SioCombox extends DeesElement {
           .conversations=${this.conversations}
           .selectedConversationId=${this.selectedConversationId}
           @conversation-selected=${this.handleConversationSelected}
+          @close=${() => this.close()}
         ></sio-conversation-selector>
         
         <sio-conversation-view

ts_web/elements/sio-conversation-selector.ts

@@ -16,6 +16,8 @@ import { spacing, radius, shadows, transitions } from './00tokens.js';
 import { fontFamilies, typography } from './00fonts.js';
 
 // Types
+export type TConversationStatus = 'new' | 'waiting' | 'needs-action' | 'resolved';
+
 export interface IConversation {
   id: string;
   title: string;
@@ -23,6 +25,7 @@ export interface IConversation {
   time: string;
   unread?: boolean;
   avatar?: string;
+  status?: TConversationStatus;
 }
 
 declare global {
@@ -232,6 +235,38 @@ export class SioConversationSelector extends DeesElement {
         }
       }
 
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px ${unsafeCSS(spacing["2"])};
+        font-size: 0.625rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.025em;
+        border-radius: ${unsafeCSS(radius.full)};
+        white-space: nowrap;
+      }
+
+      .badge.new {
+        background: ${bdTheme('primary')}20;
+        color: ${bdTheme('primary')};
+      }
+
+      .badge.waiting {
+        background: ${bdTheme('muted')};
+        color: ${bdTheme('mutedForeground')};
+      }
+
+      .badge.needs-action {
+        background: hsl(38 92% 50% / 0.15);
+        color: hsl(38 92% 40%);
+      }
+
+      .badge.resolved {
+        background: ${bdTheme('success')}20;
+        color: ${bdTheme('success')};
+      }
+
       .empty-state {
         display: flex;
         flex-direction: column;
@@ -331,6 +366,7 @@ export class SioConversationSelector extends DeesElement {
                 <span class="conversation-title">
                   ${conv.title}
                   ${conv.unread ? html`<span class="unread-dot"></span>` : ''}
+                  ${conv.status ? html`<span class="badge ${conv.status}">${this.getBadgeLabel(conv.status)}</span>` : ''}
                 </span>
                 <span class="conversation-time">${conv.time}</span>
               </div>
@@ -389,4 +425,14 @@ export class SioConversationSelector extends DeesElement {
       composed: true
     }));
   }
+
+  private getBadgeLabel(status: TConversationStatus): string {
+    const labels: Record<TConversationStatus, string> = {
+      'new': 'New',
+      'waiting': 'Waiting',
+      'needs-action': 'Action',
+      'resolved': 'Resolved',
+    };
+    return labels[status];
+  }
 }

ts_web/elements/sio-dropdown-menu.ts

@@ -160,27 +160,6 @@ export class SioDropdownMenu extends DeesElement {
         background: ${bdTheme('border')};
         margin: ${unsafeCSS(spacing["1"])} 0;
       }
-
-      /* Mobile adjustments */
-      @media (max-width: 600px) {
-        .dropdown {
-          position: fixed;
-          top: auto !important;
-          left: ${unsafeCSS(spacing["4"])} !important;
-          right: ${unsafeCSS(spacing["4"])};
-          bottom: ${unsafeCSS(spacing["4"])};
-          width: auto;
-          transform-origin: bottom center;
-        }
-
-        .dropdown.open {
-          transform: translateY(0) scale(1);
-        }
-
-        .dropdown:not(.open) {
-          transform: translateY(10px) scale(0.95);
-        }
-      }
     `,
   ];
 

ts_web/elements/sio-fab.ts

@@ -32,9 +32,6 @@ export class SioFab extends DeesElement {
   @property({ type: Boolean })
   public accessor showCombox = false;
 
-  @state()
-  private accessor hasShownOnce = false;
-
   @state()
   private accessor shouldPulse = false;
 
@@ -62,7 +59,6 @@ export class SioFab extends DeesElement {
         --fab-gradient-hover-end: #c026d3;
         --fab-shadow-color: rgba(139, 92, 246, 0.25);
         --fab-size: 60px;
-        --fab-combox-offset: calc(var(--fab-size) + ${unsafeCSS(spacing["4"])});
       }
 
       #mainbox {
@@ -201,63 +197,13 @@ export class SioFab extends DeesElement {
       #mainbox .icon.close sio-icon {
         transform: scale(1);
       }
-
-      #comboxContainer {
-        position: absolute;
-        bottom: 0;
-        right: 0;
-        pointer-events: none;
-      }
-
-      #comboxContainer sio-combox {
-        position: absolute;
-        bottom: var(--fab-combox-offset);
-        right: 0;
-        transition: ${unsafeCSS(transitions.all)};
-        will-change: transform;
-        transform: translateY(${unsafeCSS(spacing["5"])});
-        opacity: 0;
-        pointer-events: none;
-      }
-
-      #comboxContainer.show {
-        pointer-events: all;
-      }
-
-      #comboxContainer.show sio-combox {
-        transform: translateY(0px);
-        opacity: 1;
-        pointer-events: all;
-      }
     `,
-    // Mobile responsive styles - smaller FAB and full-screen combox
+    // Mobile responsive styles - smaller FAB
     cssManager.cssForPhablet(css`
       :host {
         --fab-size: 48px;
         bottom: 16px;
         right: 16px;
-        will-change: auto;
-      }
-
-      #comboxContainer {
-        position: fixed;
-        top: 0;
-        left: 0;
-        bottom: auto;
-        right: auto;
-        width: 100vw;
-        height: 100vh;
-        height: 100dvh;
-      }
-
-      #comboxContainer sio-combox {
-        bottom: 0;
-        right: 0;
-        transform: none;
-      }
-
-      #comboxContainer.show sio-combox {
-        transform: none;
       }
     `),
   ];
@@ -276,11 +222,6 @@ export class SioFab extends DeesElement {
           <sio-icon icon="x" size="20"></sio-icon>
         </div>
       </div>
-      <div id="comboxContainer" class="${this.showCombox ? 'show' : ''}">
-        ${this.showCombox || this.hasShownOnce ? html`
-          <sio-combox @close=${() => this.showCombox = false}></sio-combox>
-        ` : ''}
-      </div>
     `;
   }
 
@@ -288,12 +229,12 @@ export class SioFab extends DeesElement {
    * toggles the combox
    */
   public async toggleCombox() {
-    console.log('toggle combox');
-    const wasOpen = this.showCombox;
-    this.showCombox = !this.showCombox;
-    if (this.showCombox) {
-      this.hasShownOnce = true;
-      if (!wasOpen) {
+    const combox = SioCombox.getInstance();
+    if (combox) {
+      const wasOpen = combox.getIsOpen();
+      combox.toggle();
+      this.showCombox = combox.getIsOpen();
+      if (this.showCombox && !wasOpen) {
         this.shouldPulse = true;
       }
     }
@@ -303,6 +244,14 @@ export class SioFab extends DeesElement {
     super.firstUpdated(args);
     const domtools = await this.domtoolsPromise;
 
+    // Create the singleton combox on body
+    const combox = SioCombox.createOnBody();
+
+    // Listen for close events
+    combox.addEventListener('close', () => {
+      this.showCombox = false;
+    });
+
     // Set up keyboard shortcut
     domtools.keyboard
       .on([domtools.keyboard.keyEnum.Ctrl, domtools.keyboard.keyEnum.S])
@@ -322,15 +271,5 @@ export class SioFab extends DeesElement {
         this.classList.remove('combox-open');
       }
     }
-
-    // Set reference object when combox is rendered
-    if ((changedProperties.has('showCombox') || changedProperties.has('hasShownOnce')) &&
-        (this.showCombox || this.hasShownOnce)) {
-      const sioCombox: SioCombox = this.shadowRoot.querySelector('sio-combox');
-      const mainBox: HTMLElement = this.shadowRoot.querySelector('#mainbox');
-      if (sioCombox && mainBox && !sioCombox.referenceObject) {
-        sioCombox.referenceObject = mainBox;
-      }
-    }
   }
 }

ts_web/elements/sio-recorder.ts

@@ -6,11 +6,7 @@ import {
   property,
   query,
 } from '@design.estate/dees-element';
-import * as rrwebMod from 'rrweb';
-import rrwebPlayerMod from 'rrweb-player';
-
-const rrweb: any = rrwebMod;
-const rrwebPlayer: typeof rrwebPlayerMod.default = rrwebPlayerMod as any;
+import { SioServiceLibLoader } from '../services/SioServiceLibLoader.js';
 
 /**
  * Use rrweb's eventWithTime if you like strict typing:
@@ -106,6 +102,10 @@ export class SioRecorder extends DeesElement {
    */
   private async startRecording(): Promise<void> {
     await this.domtoolsPromise;
+
+    // Load rrweb from CDN
+    const rrweb = await SioServiceLibLoader.getInstance().loadRrweb();
+
     this.status = 'recording';
     this.events = [];
 
@@ -148,7 +148,12 @@ export class SioRecorder extends DeesElement {
   private async playRecording(): Promise<void> {
     await this.domtoolsPromise;
     if (!this.playbackDiv) return;
-    const replayer = new rrwebPlayer({
+
+    // Load rrweb-player from CDN
+    const rrwebPlayerBundle = await SioServiceLibLoader.getInstance().loadRrwebPlayer();
+    const RrwebPlayer = rrwebPlayerBundle.default;
+
+    const replayer = new RrwebPlayer({
       target: this.playbackDiv, // customizable root element
       props: {
         events: this.events as any,

ts_web/index.ts

@@ -1 +1,2 @@
 export * from './elements/index.js';
+export * from './services/SioServiceLibLoader.js';

ts_web/services/SioServiceLibLoader.ts

@@ -0,0 +1,200 @@
+import { CDN_BASE, CDN_VERSIONS } from './versions.js';
+
+/**
+ * rrweb record options
+ */
+export interface IRrwebRecordOptions {
+  emit: (event: any) => void;
+  recordCanvas?: boolean;
+  recordCrossOriginIframes?: boolean;
+  checkoutEveryNms?: number;
+  [key: string]: any;
+}
+
+/**
+ * rrweb record function type
+ */
+export type TRrwebRecordFn = (options: IRrwebRecordOptions) => () => void;
+
+/**
+ * Bundle type for rrweb recording library
+ */
+export interface IRrwebBundle {
+  record: TRrwebRecordFn;
+}
+
+/**
+ * rrweb-player constructor options
+ */
+export interface IRrwebPlayerOptions {
+  target: HTMLElement;
+  props: {
+    events: any[];
+    root?: HTMLElement;
+    showController?: boolean;
+    width?: number;
+    height?: number;
+    [key: string]: any;
+  };
+}
+
+/**
+ * rrweb-player instance
+ */
+export interface IRrwebPlayerInstance {
+  play: () => Promise<void>;
+  pause: () => void;
+  [key: string]: any;
+}
+
+/**
+ * rrweb-player constructor type
+ */
+export type TRrwebPlayerConstructor = new (options: IRrwebPlayerOptions) => IRrwebPlayerInstance;
+
+/**
+ * Bundle type for rrweb-player
+ */
+export interface IRrwebPlayerBundle {
+  default: TRrwebPlayerConstructor;
+}
+
+/**
+ * Singleton service for lazy-loading rrweb libraries from CDN.
+ *
+ * This reduces initial bundle size by loading libraries only when needed.
+ * Libraries are cached after first load to avoid duplicate fetches.
+ *
+ * @example
+ * ```typescript
+ * const libLoader = SioServiceLibLoader.getInstance();
+ * const rrweb = await libLoader.loadRrweb();
+ * const stopFn = rrweb.record({ emit: (event) => { ... } });
+ * ```
+ */
+export class SioServiceLibLoader {
+  private static instance: SioServiceLibLoader;
+
+  // Cached library references
+  private rrwebLib: IRrwebBundle | null = null;
+  private rrwebPlayerLib: IRrwebPlayerBundle | null = null;
+
+  // Loading promises to prevent duplicate concurrent loads
+  private rrwebLoadingPromise: Promise<IRrwebBundle> | null = null;
+  private rrwebPlayerLoadingPromise: Promise<IRrwebPlayerBundle> | null = null;
+
+  private constructor() {}
+
+  /**
+   * Get the singleton instance of SioServiceLibLoader
+   */
+  public static getInstance(): SioServiceLibLoader {
+    if (!SioServiceLibLoader.instance) {
+      SioServiceLibLoader.instance = new SioServiceLibLoader();
+    }
+    return SioServiceLibLoader.instance;
+  }
+
+  /**
+   * Load rrweb recording library from CDN
+   * @returns Promise resolving to rrweb module with record function
+   */
+  public async loadRrweb(): Promise<IRrwebBundle> {
+    if (this.rrwebLib) {
+      return this.rrwebLib;
+    }
+
+    if (this.rrwebLoadingPromise) {
+      return this.rrwebLoadingPromise;
+    }
+
+    this.rrwebLoadingPromise = (async () => {
+      const url = `${CDN_BASE}/rrweb@${CDN_VERSIONS.rrweb}/+esm`;
+      const module = await import(/* @vite-ignore */ url);
+
+      this.rrwebLib = {
+        record: module.record,
+      };
+      return this.rrwebLib;
+    })();
+
+    return this.rrwebLoadingPromise;
+  }
+
+  /**
+   * Load rrweb-player from CDN
+   * @returns Promise resolving to rrweb-player module
+   */
+  public async loadRrwebPlayer(): Promise<IRrwebPlayerBundle> {
+    if (this.rrwebPlayerLib) {
+      return this.rrwebPlayerLib;
+    }
+
+    if (this.rrwebPlayerLoadingPromise) {
+      return this.rrwebPlayerLoadingPromise;
+    }
+
+    this.rrwebPlayerLoadingPromise = (async () => {
+      const url = `${CDN_BASE}/rrweb-player@${CDN_VERSIONS.rrwebPlayer}/+esm`;
+      const module = await import(/* @vite-ignore */ url);
+
+      // Inject rrweb-player CSS styles
+      await this.injectRrwebPlayerStyles();
+
+      this.rrwebPlayerLib = {
+        default: module.default,
+      };
+      return this.rrwebPlayerLib;
+    })();
+
+    return this.rrwebPlayerLoadingPromise;
+  }
+
+  /**
+   * Inject rrweb-player CSS styles into the document head
+   */
+  private async injectRrwebPlayerStyles(): Promise<void> {
+    const styleId = 'rrweb-player-cdn-styles';
+    if (document.getElementById(styleId)) {
+      return; // Already injected
+    }
+
+    const cssUrl = `${CDN_BASE}/rrweb-player@${CDN_VERSIONS.rrwebPlayer}/dist/style.css`;
+    try {
+      const response = await fetch(cssUrl);
+      const cssText = await response.text();
+
+      const style = document.createElement('style');
+      style.id = styleId;
+      style.textContent = cssText;
+      document.head.appendChild(style);
+    } catch (error) {
+      console.warn('Failed to load rrweb-player styles from CDN:', error);
+    }
+  }
+
+  /**
+   * Preload all rrweb libraries in parallel
+   * Useful for warming the cache before recording is needed
+   */
+  public async preloadAll(): Promise<void> {
+    await Promise.all([
+      this.loadRrweb(),
+      this.loadRrwebPlayer(),
+    ]);
+  }
+
+  /**
+   * Check if a specific library is already loaded
+   */
+  public isLoaded(library: 'rrweb' | 'rrwebPlayer'): boolean {
+    switch (library) {
+      case 'rrweb':
+        return this.rrwebLib !== null;
+      case 'rrwebPlayer':
+        return this.rrwebPlayerLib !== null;
+      default:
+        return false;
+    }
+  }
+}

ts_web/services/versions.ts

@@ -0,0 +1,13 @@
+/**
+ * CDN versions for lazy-loaded libraries.
+ * Keep these in sync with package.json for type compatibility.
+ */
+export const CDN_VERSIONS = {
+  rrweb: '2.0.0-alpha.4',
+  rrwebPlayer: '1.0.0-alpha.4',
+} as const;
+
+/**
+ * Base CDN URL for jsdelivr ESM imports
+ */
+export const CDN_BASE = 'https://cdn.jsdelivr.net/npm';