v1.7.1

fix(build): migrate smart config setup and align TypeScript compatibility updates
v1.7.0
2026-04-02 12:50:20 +00:00 · 2026-04-02 12:50:20 +00:00 · 2026-01-02 10:59:51 +00:00 · 2026-01-02 10:59:51 +00:00 · 2025-12-18 08:28:40 +00:00 · 2025-12-18 08:28:40 +00:00
21 changed files with 3472 additions and 3050 deletions
@@ -17,6 +17,20 @@
      "accessLevel": "public"
    }
  },
+  "@git.zone/tsbundle": {
+    "bundles": [
+      {
+        "from": "./ts_web/index.ts",
+        "to": "./dist_bundle/bundle.js",
+        "outputMode": "bundle",
+        "bundler": "esbuild",
+        "production": true
+      }
+    ]
+  },
+  "@git.zone/tswatch": {
+    "preset": "element"
+  },
  "@ship.zone/szci": {
    "npmRegistryUrl": "verdaccio.lossless.one",
    "npmGlobalTools": []
@@ -1,7 +1,7 @@
 {
  "json.schemas": [
    {
-      "fileMatch": ["/npmextra.json"],
+      "fileMatch": ["/.smartconfig.json"],
      "schema": {
        "type": "object",
        "properties": {
@@ -1,5 +1,56 @@
 # Changelog

+## 2026-04-02 - 1.7.1 - fix(build)
+migrate smart config setup and align TypeScript compatibility updates
+
+- replace npmextra.json with .smartconfig.json and simplify build/watch script usage
+- update runtime and development dependencies to newer versions
+- rename browser tests to the Chromium-specific convention expected by the test tooling
+- add explicit property initializers and non-null assertions to satisfy stricter TypeScript checks
+
+## 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
+
+- Add keyboard visibility state (isKeyboardVisible) and keyboardBlurTimeout in sio-combox.ts
+- Listen for custom 'input-focus' and 'input-blur' events and toggle keyboard-visible host attribute
+- Dispatch 'input-focus'/'input-blur' from sio-conversation-selector and sio-message-input on focus/blur
+- Add connected/disconnected lifecycle handlers and updated() hook to manage attribute and cleanup timeouts
+- Apply :host([keyboard-visible]) CSS to set height to 100vh / 100dvh when keyboard is visible
+
 ## 2025-12-17 - 1.4.0 - feat(elements)
 update design tokens and sio-fab component; bump deps and update npmextra config

@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Social.io Catalog Demo</title>
-    <style>
-        body {
-            margin: 0;
-            padding: 20px;
-            font-family: sans-serif;
-            background: #f5f5f5;
-        }
-        .demo-section {
-            margin: 20px 0;
-            padding: 20px;
-            background: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-        }
-        h2 {
-            margin-top: 0;
-        }
-        .component-container {
-            position: relative;
-            height: 600px;
-            margin: 20px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            overflow: hidden;
-        }
-        sio-combox {
-            position: relative !important;
-            width: 100% !important;
-            height: 100% !important;
-            right: auto !important;
-        }
-    </style>
-    <script type="module" src="./dist_bundle/bundle.js"></script>
-</head>
-<body>
-    <div class="demo-section">
-        <h2>Combox Component</h2>
-        <div class="component-container">
-            <sio-combox></sio-combox>
-        </div>
-    </div>
-
-    <div class="demo-section">
-        <h2>FAB with Combox</h2>
-        <div style="position: relative; height: 700px;">
-            <sio-fab showCombox></sio-fab>
-        </div>
-    </div>
-</body>
-</html>
@@ -1,4 +1,4 @@
-Copyright (c) 2020 Lossless GmbH (hello@lossless.com)
+Copyright (c) 2020 Task Venture Capital GmbH (hello@task.vc)

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -1,6 +1,6 @@
 {
  "name": "@social.io/catalog",
-  "version": "1.4.0",
+  "version": "1.7.1",
  "private": false,
  "description": "catalog for social.io",
  "main": "dist_ts_web/index.js",
@@ -8,32 +8,28 @@
  "type": "module",
  "scripts": {
    "test": "tstest test/",
-    "build": "tsbuild tsfolders --allowimplicitany --skiplibcheck && tsbundle element --production",
-    "watch": "tswatch element",
+    "build": "tsbuild tsfolders --allowimplicitany --skiplibcheck && tsbundle",
+    "watch": "tswatch",
    "buildDocs": "tsdoc"
  },
  "author": "Lossless GmbH",
  "license": "UNLICENSED",
  "dependencies": {
-    "@design.estate/dees-domtools": "^2.3.6",
-    "@design.estate/dees-element": "^2.1.3",
-    "@design.estate/dees-wcctools": "^2.0.1",
-    "@losslessone_private/loint-pubapi": "^1.0.14",
+    "@design.estate/dees-domtools": "^2.5.1",
+    "@design.estate/dees-element": "^2.2.3",
+    "@design.estate/dees-wcctools": "^3.8.0",
    "@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": "^1.6.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/tswatch": "^2.3.13",
+    "@git.zone/tsbuild": "^4.4.0",
+    "@git.zone/tsbundle": "^2.10.0",
+    "@git.zone/tsrun": "^2.0.2",
+    "@git.zone/tstest": "^3.6.0",
+    "@git.zone/tswatch": "^3.3.2",
    "@push.rocks/projectinfo": "^5.0.2",
    "@push.rocks/smartenv": "^6.0.0",
-    "@types/node": "^25.0.3"
+    "@types/node": "^25.5.0"
  },
  "files": [
    "ts/**/*",
@@ -44,7 +40,7 @@
    "dist_ts_web/**/*",
    "assets/**/*",
    "cli.js",
-    "npmextra.json",
+    ".smartconfig.json",
    "readme.md"
  ],
  "browserslist": [
@@ -1,6 +1,6 @@
 # @social.io/catalog

-A modern, beautifully designed UI component library for building conversational interfaces and support chat experiences. Built with Lit Element and TypeScript.
+A modern, beautifully crafted UI component library for building conversational interfaces and support chat experiences. Built with [Lit Element](https://lit.dev/) and TypeScript, featuring a shadcn-inspired design system with full dark mode support. 🚀

 ## Issue Reporting and Security

@@ -8,20 +8,19 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community

 ## 🎯 Features

- **Complete Chat UI** - Ready-to-use conversation components with message threads, typing indicators, and attachments
- **Floating Action Button** - Eye-catching FAB with smooth animations for triggering the chat interface
- **PDF Viewer** - Built-in PDF rendering with zoom, pagination, and download capabilities
- **Image Lightbox** - Full-featured lightbox with zoom, pan, and keyboard navigation
- **Modern Design Tokens** - Consistent styling with customizable colors, spacing, typography, and shadows
- **Dark Mode Ready** - Full light/dark theme support out of the box
- **Accessibility** - Keyboard navigation and proper ARIA attributes
- **TypeScript First** - Full type definitions for all components
+- **Complete Chat UI** — Ready-to-use conversation components with message threads, typing indicators, and file attachments
+- **Floating Action Button** — Eye-catching FAB with smooth gradient animations and glow effects
+- **PDF Viewer** — Built-in PDF rendering with zoom, pagination, and download capabilities
+- **Image Lightbox** — Full-featured lightbox with zoom, pan, and keyboard navigation
+- **Design Token System** — Comprehensive tokens for colors, spacing, typography, shadows, and animations
+- **Dark Mode Ready** — Full light/dark theme support out of the box via `bdTheme()` helper
+- **Accessibility** — Keyboard navigation and proper ARIA attributes throughout
+- **TypeScript First** — Full type definitions and IntelliSense for all components
+- **Lazy-loaded Libraries** — rrweb for session recording is loaded on-demand from CDN via `SioServiceLibLoader`

 ## 📦 Installation

 ```bash
-npm install @social.io/catalog
-# or
 pnpm add @social.io/catalog
 ```

@@ -30,8 +29,7 @@ pnpm add @social.io/catalog
 ```typescript
 import { SioFab, SioCombox } from '@social.io/catalog';

-// Components auto-register as custom elements
-// Just use them in your HTML:
+// Components auto-register as custom elements — just drop them into your HTML:
 ```

 ```html
@@ -46,54 +44,74 @@ import { SioFab, SioCombox } from '@social.io/catalog';

 ### Core Components

-| Component | Description |
-|-----------|-------------|
-| `<sio-fab>` | Floating action button with animated chat icon |
-| `<sio-combox>` | Complete chat interface with conversation list and message view |
-| `<sio-button>` | Styled button with variants (primary, secondary, destructive, outline, ghost) |
-| `<sio-icon>` | Lucide icon wrapper with size and color customization |
-| `<sio-dropdown-menu>` | Animated dropdown menu with keyboard support |
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| `SioFab` | `<sio-fab>` | Floating action button with animated gradient, glow effects, and pulse animation |
+| `SioCombox` | `<sio-combox>` | Complete chat interface combining conversation list, message view, and input |
+| `SioButton` | `<sio-button>` | Styled button with variants: `primary`, `secondary`, `destructive`, `outline`, `ghost` |
+| `SioIcon` | `<sio-icon>` | [Lucide](https://lucide.dev/) icon wrapper with size, color, and strokeWidth customization |
+| `SioDropdownMenu` | `<sio-dropdown-menu>` | Animated dropdown menu with keyboard support and auto-positioning |

 ### Conversation Components

-| Component | Description |
-|-----------|-------------|
-| `<sio-conversation-selector>` | Searchable list of conversations with unread indicators |
-| `<sio-conversation-view>` | Message thread with typing indicators and file attachments |
-| `<sio-message-input>` | Auto-expanding textarea with file upload |
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| `SioConversationSelector` | `<sio-conversation-selector>` | Searchable list of conversations with unread indicators and status badges |
+| `SioConversationView` | `<sio-conversation-view>` | Message thread with typing indicators, timestamps, and file attachment support |
+| `SioMessageInput` | `<sio-message-input>` | Auto-expanding textarea with file upload capabilities |

 ### Media Components

-| Component | Description |
-|-----------|-------------|
-| `<sio-image-lightbox>` | Fullscreen image viewer with zoom and pan |
-| `<sio-pdf-viewer>` | PDF renderer with page navigation and zoom controls |
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| `SioImageLightbox` | `<sio-image-lightbox>` | Fullscreen image viewer with zoom, pan, and keyboard navigation; also handles PDF files |
+| `SioPdfViewer` | `<sio-pdf-viewer>` | PDF renderer with page navigation, zoom controls, and download button |

 ### Utility Components

-| Component | Description |
-|-----------|-------------|
-| `<sio-recorder>` | Session recording using rrweb |
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| `SioRecorder` | `<sio-recorder>` | Session recording and playback using [rrweb](https://www.rrweb.io/), lazy-loaded from CDN |

-## 💅 Styling & Theming
+### Services

-The library uses CSS custom properties for theming. The design system includes:
+| Export | Description |
+|--------|-------------|
+| `SioServiceLibLoader` | CDN-based lazy loader for rrweb and rrweb-player libraries |

- **Colors** - Primary, secondary, accent, destructive, muted, and semantic colors
- **Typography** - System font stack with size and weight variants
- **Spacing** - Consistent spacing scale (0.5rem increments)
- **Radius** - Border radius tokens from sm to full
- **Shadows** - Elevation system from sm to 2xl
- **Transitions** - Smooth animation presets
+## 💅 Design System
+
+The library ships a comprehensive, shadcn/ui-inspired design token system. All tokens are exported so you can use them in your own components.
+
+### Colors
+
+```typescript
+import { colors, bdTheme } from '@social.io/catalog/elements/00colors.js';
+```
+
+Includes `primary`, `secondary`, `accent`, `destructive`, `muted`, `success`, `background`, `foreground`, `card`, `popover`, `border`, `input`, `ring`, and 5 chart colors — each with light and dark variants.
+
+### Spacing, Radius, Shadows & More
+
+```typescript
+import { spacing, radius, shadows, transitions, sizes, zIndex, breakpoints } from '@social.io/catalog/elements/00tokens.js';
+```
+
+- **Spacing** — Tailwind-compatible scale from `0` to `96` (0–384px)
+- **Radius** — From `sm` (2px) through `full` (9999px)
+- **Shadows** — Elevation system from `sm` to `2xl`, plus theme-aware `card` and `dropdown` shadows
+- **Transitions** — Presets (`all`, `colors`, `opacity`, `shadow`, `transform`) with timing functions
+- **Z-index** — Semantic layers: `dropdown`, `sticky`, `fixed`, `modal`, `popover`, `tooltip`
+- **Breakpoints** — `sm` (640px) through `2xl` (1536px)

 ### Dark Mode

-Dark mode is automatically supported. The components use `bdTheme()` helper that switches between light and dark values:
+Dark mode is automatically supported. Use the `bdTheme()` helper for theme-aware values:

 ```typescript
-import { bdTheme } from '@social.io/catalog';
+import { bdTheme } from '@social.io/catalog/elements/00colors.js';

-// Usage in styles
+// Returns the correct value based on the current theme
 css`
  background: ${bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 10%)')};
 `
@@ -101,40 +119,55 @@ css`

 ## 📖 Usage Examples

-### Basic Chat FAB
+### 💬 Chat FAB

 ```html
 <sio-fab></sio-fab>
 ```

-The FAB opens a complete chat interface when clicked. It includes:
- Keyboard shortcut (Ctrl+S) to toggle
+The FAB positions itself at the bottom-right corner and opens a complete chat interface when clicked. It features:
+- Animated gradient background (indigo → violet → purple)
+- Glow effect on hover
 - Smooth scale and pulse animations
- Gradient background with glow effects

-### Custom Button Variants
+### 🔘 Buttons

 ```html
+<sio-button>Default</sio-button>
 <sio-button type="primary">Submit</sio-button>
 <sio-button type="destructive">Delete</sio-button>
 <sio-button type="outline">Cancel</sio-button>
 <sio-button type="ghost" size="sm">
  <sio-icon icon="settings"></sio-icon>
 </sio-button>
+<sio-button size="lg">Large</sio-button>
+<sio-button disabled>Disabled</sio-button>
 ```

-### Image Lightbox
+Sizes: `sm`, `default`, `lg`. Status: `normal`, `pending`, `success`, `error`.
+
+### 🖼️ Image Lightbox

 ```typescript
 const lightbox = document.querySelector('sio-image-lightbox');
-lightbox.open({
+
+// Open with an image
+await lightbox.open({
  url: 'https://example.com/photo.jpg',
  name: 'My Photo',
  size: 1024000
 });
+
+// Or open with a PDF
+await lightbox.open({
+  url: 'https://example.com/document.pdf',
+  name: 'report.pdf',
+  type: 'application/pdf',
+  size: 565000
+});
 ```

-### PDF Viewer
+### 📄 PDF Viewer

 ```html
 <sio-pdf-viewer
@@ -143,12 +176,13 @@ lightbox.open({
 ></sio-pdf-viewer>
 ```

-### Dropdown Menu
+### ☰ Dropdown Menu

 ```html
 <sio-dropdown-menu
  .items=${[
    { id: 'edit', label: 'Edit', icon: 'pencil' },
+    { id: 'divider', label: '', divider: true },
    { id: 'delete', label: 'Delete', icon: 'trash', destructive: true }
  ]}
  @item-selected=${(e) => console.log('Selected:', e.detail.item)}
@@ -159,6 +193,17 @@ lightbox.open({
 </sio-dropdown-menu>
 ```

+### 🎨 Icons
+
+Uses the full [Lucide](https://lucide.dev/) icon set. Pass kebab-case icon names:
+
+```html
+<sio-icon icon="search"></sio-icon>
+<sio-icon icon="message-square" color="#3b82f6"></sio-icon>
+<sio-icon icon="x" size="32"></sio-icon>
+<sio-icon icon="send" .strokeWidth=${3}></sio-icon>
+```
+
 ## 🔧 Development

 ```bash
@@ -168,23 +213,26 @@ pnpm install
 # Start development server with hot reload
 pnpm watch

-# Run tests
-pnpm test
-
 # Build for production
 pnpm build
+
+# Run tests (Chromium browser tests)
+pnpm test
 ```

 ## 📚 Dependencies

- **@design.estate/dees-element** - Lit Element base with utilities
- **@design.estate/dees-domtools** - DOM manipulation helpers
- **lucide** - Beautiful open-source icons
- **rrweb** - Session recording/replay (for recorder component)
+| Package | Purpose |
+|---------|---------|
+| [`@design.estate/dees-element`](https://www.npmjs.com/package/@design.estate/dees-element) | Lit Element base class with theming utilities |
+| [`@design.estate/dees-domtools`](https://www.npmjs.com/package/@design.estate/dees-domtools) | DOM manipulation and convenience helpers |
+| [`@design.estate/dees-wcctools`](https://www.npmjs.com/package/@design.estate/dees-wcctools) | Web component catalog tools |
+| [`lucide`](https://lucide.dev/) | Beautiful, consistent open-source icon set |
+| [`rrweb`](https://www.rrweb.io/) | Session recording/replay (lazy-loaded from CDN) |

 ## License and Legal Information

-This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./LICENSE) file.
+This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [license](./license) file.

 **Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.

@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@social.io/catalog',
-  version: '1.4.0',
+  version: '1.7.1',
  description: 'catalog for social.io'
 }
@@ -36,12 +36,41 @@ 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;
+  public accessor referenceObject: HTMLElement = null as any;

  @state()
  private accessor selectedConversationId: string | null = null;

+  @state()
+  private accessor isKeyboardVisible: boolean = false;
+
+  @state()
+  private accessor isOpen: boolean = false;
+
+  private keyboardBlurTimeout?: number;
+
  @state()
  private accessor conversations: IConversation[] = [
    {
@@ -50,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',
    }
  ];

@@ -127,38 +160,124 @@ export class SioCombox extends DeesElement {
    domtools.DomTools.setupDomTools();
  }

+  async connectedCallback() {
+    await super.connectedCallback();
+    this.addEventListener('input-focus', this.handleInputFocus as EventListener);
+    this.addEventListener('input-blur', this.handleInputBlur as EventListener);
+  }
+
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    this.removeEventListener('input-focus', this.handleInputFocus as EventListener);
+    this.removeEventListener('input-blur', this.handleInputBlur as EventListener);
+    if (this.keyboardBlurTimeout) {
+      clearTimeout(this.keyboardBlurTimeout);
+    }
+  }
+
+  private handleInputFocus = () => {
+    if (this.keyboardBlurTimeout) {
+      clearTimeout(this.keyboardBlurTimeout);
+      this.keyboardBlurTimeout = undefined;
+    }
+    this.isKeyboardVisible = true;
+  }
+
+  private handleInputBlur = () => {
+    if (this.keyboardBlurTimeout) {
+      clearTimeout(this.keyboardBlurTimeout);
+    }
+    this.keyboardBlurTimeout = window.setTimeout(() => {
+      this.isKeyboardVisible = false;
+      this.keyboardBlurTimeout = undefined;
+    }, 150);
+  }
+
+  updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('isKeyboardVisible')) {
+      if (this.isKeyboardVisible) {
+        this.setAttribute('keyboard-visible', '');
+      } else {
+        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 = [
    cssManager.defaultStyles,
    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;
+
+        /* Hidden by default */
+        opacity: 0;
+        pointer-events: none;
+        transform: scale(0.95) translateY(10px);
+        transition: opacity 200ms ease, transform 200ms ease;
      }
-      
-      :host(.animate-in) {
-        animation: scaleIn 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+
+      :host(.open) {
+        opacity: 1;
+        pointer-events: all;
+        transform: scale(1) translateY(0);
      }
-      
-      @keyframes scaleIn {
-        from {
-          opacity: 0;
-          transform: scale(0.9) translateY(10px);
-        }
-        to {
-          opacity: 1;
-          transform: scale(1) translateY(0);
-        }
-      }
-      
+
      :host::before {
        content: '';
        position: absolute;
@@ -181,65 +300,84 @@ export class SioCombox extends DeesElement {
        border-radius: ${unsafeCSS(radius['2xl'])};
      }

-      /* Responsive layout */
-      @media (max-width: 600px) {
-        :host {
-          width: 100%;
-          height: 100%;
-          border-radius: 0;
-        }
-
-        .container {
-          position: relative;
-        }
-
-        sio-conversation-selector {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          transition: left 300ms ease, opacity 200ms ease;
-        }
-
-        sio-conversation-view {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          transition: left 300ms ease, opacity 200ms ease;
-        }
-
-        /* Mobile navigation states */
-        .container.show-list sio-conversation-selector {
-          left: 0;
-          opacity: 1;
-        }
-
-        .container.show-list sio-conversation-view {
-          left: 100%;
-          opacity: 0;
-        }
-
-        .container.show-conversation sio-conversation-selector {
-          left: -100%;
-          opacity: 0;
-        }
-
-        .container.show-conversation sio-conversation-view {
-          left: 0;
-          opacity: 1;
-        }
+      /* Desktop layout (default) */
+      sio-conversation-selector {
+        width: 320px;
+        flex-shrink: 0;
      }

-      @media (min-width: 601px) {
-        sio-conversation-selector {
-          width: 320px;
-          flex-shrink: 0;
-        }
-
-        sio-conversation-view {
-          flex: 1;
-        }
+      sio-conversation-view {
+        flex: 1;
      }
    `,
+    // Mobile responsive layout - full screen with sliding mechanics
+    cssManager.cssForPhablet(css`
+      :host {
+        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 {
+        border-radius: 0;
+      }
+
+      .container {
+        position: relative;
+        overflow: hidden;
+      }
+
+      sio-conversation-selector {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        transition: left 300ms ease, opacity 200ms ease;
+      }
+
+      sio-conversation-view {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        transition: left 300ms ease, opacity 200ms ease;
+      }
+
+      /* Mobile navigation states */
+      .container.show-list sio-conversation-selector {
+        left: 0;
+        opacity: 1;
+      }
+
+      .container.show-list sio-conversation-view {
+        left: 100%;
+        opacity: 0;
+      }
+
+      .container.show-conversation sio-conversation-selector {
+        left: -100%;
+        opacity: 0;
+      }
+
+      .container.show-conversation sio-conversation-view {
+        left: 0;
+        opacity: 1;
+      }
+
+      /* Keyboard visible adjustments */
+      :host([keyboard-visible]) {
+        height: 100vh;
+        height: 100dvh;
+      }
+    `),
  ];

  public render(): TemplateResult {
@@ -263,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
@@ -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;
@@ -266,7 +301,17 @@ export class SioConversationSelector extends DeesElement {
      .conversation-list::-webkit-scrollbar-thumb:hover {
        background: ${bdTheme('mutedForeground')};
      }
+
+      .close-button {
+        display: none;
+      }
    `,
+    // Mobile: show close button
+    cssManager.cssForPhablet(css`
+      .close-button {
+        display: flex;
+      }
+    `),
  ];

  public render(): TemplateResult {
@@ -278,9 +323,17 @@ export class SioConversationSelector extends DeesElement {
    return html`
      <div class="header">
        <div class="header-top">
+          <sio-button
+            class="close-button"
+            type="ghost"
+            size="sm"
+            @click=${() => this.handleClose()}
+          >
+            <sio-icon icon="x" size="20"></sio-icon>
+          </sio-button>
          <h2 class="title">Messages</h2>
-          <sio-button 
-            type="primary" 
+          <sio-button
+            type="primary"
            size="sm"
            @click=${() => this.startNewConversation()}
          >
@@ -295,6 +348,8 @@ export class SioConversationSelector extends DeesElement {
            placeholder="Search conversations..."
            .value=${this.searchQuery}
            @input=${(e: Event) => this.searchQuery = (e.target as HTMLInputElement).value}
+            @focus=${this.handleInputFocus}
+            @blur=${this.handleInputBlur}
          />
          <sio-icon class="search-icon" icon="search" size="16"></sio-icon>
        </div>
@@ -311,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>
@@ -346,4 +402,37 @@ export class SioConversationSelector extends DeesElement {
      composed: true
    }));
  }
+
+  private handleClose() {
+    this.dispatchEvent(new CustomEvent('close', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleInputFocus() {
+    setTimeout(() => {
+      this.dispatchEvent(new CustomEvent('input-focus', {
+        bubbles: true,
+        composed: true
+      }));
+    }, 50);
+  }
+
+  private handleInputBlur() {
+    this.dispatchEvent(new CustomEvent('input-blur', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private getBadgeLabel(status: TConversationStatus): string {
+    const labels: Record<TConversationStatus, string> = {
+      'new': 'New',
+      'waiting': 'Waiting',
+      'needs-action': 'Action',
+      'resolved': 'Resolved',
+    };
+    return labels[status];
+  }
 }
@@ -57,9 +57,9 @@ export class SioDropdownMenu extends DeesElement {
  @state()
  private accessor isOpen: boolean = false;

-  private documentClickHandler: (e: MouseEvent) => void;
-  private scrollHandler: () => void;
-  private resizeHandler: () => void;
+  private documentClickHandler!: (e: MouseEvent) => void;
+  private scrollHandler!: () => void;
+  private resizeHandler!: () => void;

  public static styles = [
    cssManager.defaultStyles,
@@ -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);
-        }
-      }
    `,
  ];

@@ -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,40 +197,11 @@ 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 on phablet and phone
+    // Mobile responsive styles - smaller FAB
    cssManager.cssForPhablet(css`
      :host {
        --fab-size: 48px;
-        --fab-combox-offset: calc(var(--fab-size) + ${unsafeCSS(spacing["3"])});
        bottom: 16px;
        right: 16px;
      }
@@ -255,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>
    `;
  }

@@ -267,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;
      }
    }
@@ -282,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])
@@ -301,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;
-      }
-    }
  }
 }
@@ -29,7 +29,7 @@ export class SioIcon extends DeesElement {
  `;

  @property({ type: String })
-  public accessor icon: string;
+  public accessor icon: string = '';

  @property({ type: Number })
  public accessor size: number = 24;
@@ -140,7 +140,7 @@ export class SioIcon extends DeesElement {
        
        // Limit cache size
        if (SioIcon.iconCache.size > SioIcon.MAX_CACHE_SIZE) {
-          const firstKey = SioIcon.iconCache.keys().next().value;
+          const firstKey = SioIcon.iconCache.keys().next().value!;
          SioIcon.iconCache.delete(firstKey);
        }

@@ -168,6 +168,8 @@ export class SioMessageInput extends DeesElement {
          .value=${this.messageText}
          @input=${this.handleInput}
          @keydown=${this.handleKeyDown}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
          ?disabled=${this.disabled}
          rows="1"
        ></textarea>
@@ -216,6 +218,22 @@ export class SioMessageInput extends DeesElement {
    }
  }

+  private handleFocus() {
+    setTimeout(() => {
+      this.dispatchEvent(new CustomEvent('input-focus', {
+        bubbles: true,
+        composed: true
+      }));
+    }, 50);
+  }
+
+  private handleBlur() {
+    this.dispatchEvent(new CustomEvent('input-blur', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
  private sendMessage() {
    if (!this.messageText.trim() && this.pendingAttachments.length === 0) {
      return;
@@ -523,7 +523,7 @@ export class SioPdfViewer extends DeesElement {
      this.renderTask = page.render(renderContext);
      await this.renderTask.promise;
    } catch (error) {
-      if (error.name !== 'RenderingCancelledException') {
+      if ((error as any).name !== 'RenderingCancelledException') {
        console.error('Error rendering page:', error);
      }
    }
@@ -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,
@@ -172,11 +177,11 @@ export class SioRecorder extends DeesElement {
  public async fixPosition() {
    await this.domtoolsPromise;
    await this.domtools.convenience.smartdelay.delayFor(0);
-    const playbackDiv = this.shadowRoot.querySelector('#playback') as HTMLElement;
-    const replayerWrapper = this.shadowRoot.querySelector('.replayer-wrapper') as HTMLElement;
-    const replayerMouse = this.shadowRoot.querySelector('.replayer-mouse') as HTMLElement;
-    const replayerMouseTail = this.shadowRoot.querySelector('.replayer-mouse-tail') as HTMLElement;
-    const iframe = this.shadowRoot.querySelector('iframe');
+    const playbackDiv = this.shadowRoot!.querySelector('#playback') as HTMLElement;
+    const replayerWrapper = this.shadowRoot!.querySelector('.replayer-wrapper') as HTMLElement;
+    const replayerMouse = this.shadowRoot!.querySelector('.replayer-mouse') as HTMLElement;
+    const replayerMouseTail = this.shadowRoot!.querySelector('.replayer-mouse-tail') as HTMLElement;
+    const iframe = this.shadowRoot!.querySelector('iframe')!;
    replayerWrapper.style.position = 'absolute';
    replayerWrapper.style.top = '0px';
    replayerWrapper.style.left = '0px';
@@ -1 +1,2 @@
 export * from './elements/index.js';
+export * from './services/SioServiceLibLoader.js';
@@ -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;
+    }
+  }
+}
@@ -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';
Author	SHA1	Message	Date
jkunz	1d71f45309	v1.7.1 Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-04-02 12:50:20 +00:00
jkunz	47f2a64a61	fix(build): migrate smart config setup and align TypeScript compatibility updates	2026-04-02 12:50:20 +00:00
jkunz	3338261cfa	v1.7.0 Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-01-02 10:59:51 +00:00
jkunz	888ec95185	feat(recorder): lazy-load rrweb and rrweb-player from CDN via SioServiceLibLoader and switch sio-recorder to use the loader	2026-01-02 10:59:51 +00:00
jkunz	673af0e39c	v1.6.1 Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-18 08:28:40 +00:00
jkunz	dc8774718d	fix(sio-combox): tweak dropdown shadow and bind close event on conversation selector	2025-12-18 08:28:40 +00:00
jkunz	9a87888f5a	v1.6.0 Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-18 08:16:46 +00:00
jkunz	d61c3b6643	feat(conversation-selector): add conversation status badges to conversation selector and include status in sample data	2025-12-18 08:16:46 +00:00
jkunz	c8554418de	update	2025-12-17 11:50:04 +00:00
jkunz	c1a8a57729	v1.5.0 Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-17 11:41:47 +00:00
jkunz	053d0c8e8f	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	2025-12-17 11:41:47 +00:00
jkunz	55e8e192c9	v1.4.1 Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-17 10:07:18 +00:00
jkunz	286f6fd120	fix(ui): handle on-screen keyboard visibility to adjust layout and prevent inputs from being obscured	2025-12-17 10:07:18 +00:00
jkunz	1401cd2c92	update	2025-12-17 09:27:53 +00:00
jkunz	2323d1a01c	update	2025-12-17 09:22:02 +00:00