v1.6.1

changelog.md

@@ -1,5 +1,47 @@
 # Changelog
 
+## 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
+
+- Refactor color tokens to a neutral HSL palette (ts_web/elements/00colors.ts) and adjust focus ring token (ts_web/elements/00tokens.ts).
+- Refactor sio-fab: move styles to static property, add responsive FAB sizing and getMobileIconSize(), bind icon sizes, manage host class ('combox-open'), and tidy lifecycle methods for better behavior and mobile support.
+- Bump dependencies and devDependencies: @design.estate/dees-wcctools -> ^2.0.1, lucide -> ^0.561.0; @git.zone/tsbuild -> ^4.0.2, @git.zone/tsrun -> ^2.0.1, @git.zone/tswatch -> ^2.3.13, @types/node -> ^25.0.3, etc.
+- Update npmextra.json: rename configuration keys (gitzone -> @git.zone/cli, npmci -> @ship.zone/szci) and add release.registries and accessLevel for publishing. 
+
 ## 2025-12-08 - 1.3.0 - feat(components)
 Add reusable message input component, refactor element properties to use accessor, update styles and docs, bump dependencies
 

npmextra.json

@@ -1,5 +1,5 @@
 {
-  "gitzone": {
+  "@git.zone/cli": {
     "projectType": "wcc",
     "module": {
       "githost": "gitlab.com",
@@ -9,11 +9,16 @@
       "npmPackagename": "@social.io_private/catalog",
       "license": "UNLICENSED",
       "projectDomain": "social.io"
+    },
+    "release": {
+      "registries": [
+        "https://verdaccio.lossless.digital"
+      ],
+      "accessLevel": "public"
     }
   },
-  "npmci": {
+  "@ship.zone/szci": {
     "npmRegistryUrl": "verdaccio.lossless.one",
-    "npmGlobalTools": [],
-    "npmAccessLevel": "private"
+    "npmGlobalTools": []
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social.io/catalog",
-  "version": "1.3.0",
+  "version": "1.6.1",
   "private": false,
   "description": "catalog for social.io",
   "main": "dist_ts_web/index.js",
@@ -17,23 +17,23 @@
   "dependencies": {
     "@design.estate/dees-domtools": "^2.3.6",
     "@design.estate/dees-element": "^2.1.3",
-    "@design.estate/dees-wcctools": "^1.2.1",
+    "@design.estate/dees-wcctools": "^2.0.1",
     "@losslessone_private/loint-pubapi": "^1.0.14",
     "@social.io/interfaces": "^1.2.1",
-    "lucide": "^0.556.0",
+    "lucide": "^0.561.0",
     "rrweb": "2.0.0-alpha.4",
     "rrweb-player": "1.0.0-alpha.4",
     "rrweb-snapshot": "2.0.0-alpha.4"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^3.1.2",
+    "@git.zone/tsbuild": "^4.0.2",
     "@git.zone/tsbundle": "^2.6.3",
-    "@git.zone/tsrun": "^2.0.0",
+    "@git.zone/tsrun": "^2.0.1",
     "@git.zone/tstest": "^3.1.3",
-    "@git.zone/tswatch": "^2.3.5",
+    "@git.zone/tswatch": "^2.3.13",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/smartenv": "^6.0.0",
-    "@types/node": "^24.10.1"
+    "@types/node": "^25.0.3"
   },
   "files": [
     "ts/**/*",

ts_web/00_commitinfo_data.ts

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

ts_web/elements/00colors.ts

@@ -4,102 +4,102 @@ export const colors = {
   // Background colors - softer, more subtle
   background: {
     light: 'hsl(0 0% 100%)',
-    dark: 'hsl(224 71.4% 4.1%)'
+    dark: 'hsl(0 0% 4%)'
   },
-  
+
   // Foreground colors - less contrast for modern look
   foreground: {
-    light: 'hsl(224 71.4% 4.1%)',
-    dark: 'hsl(210 20% 98%)'
+    light: 'hsl(0 0% 4%)',
+    dark: 'hsl(0 0% 98%)'
   },
-  
+
   // Card colors - subtle elevation
   card: {
     light: 'hsl(0 0% 100%)',
-    dark: 'hsl(224 71.4% 4.1%)'
+    dark: 'hsl(0 0% 4%)'
   },
-  
+
   cardForeground: {
-    light: 'hsl(224 71.4% 4.1%)',
-    dark: 'hsl(210 20% 98%)'
+    light: 'hsl(0 0% 4%)',
+    dark: 'hsl(0 0% 98%)'
   },
-  
+
   // Popover colors
   popover: {
     light: 'hsl(0 0% 100%)',
-    dark: 'hsl(222.2 84% 4.9%)'
+    dark: 'hsl(0 0% 5%)'
   },
-  
+
   popoverForeground: {
-    light: 'hsl(222.2 84% 4.9%)',
-    dark: 'hsl(210 40% 98%)'
+    light: 'hsl(0 0% 5%)',
+    dark: 'hsl(0 0% 98%)'
   },
-  
+
   // Primary colors - modern indigo/blue
   primary: {
     light: 'hsl(221.2 83.2% 53.3%)',
     dark: 'hsl(217.2 91.2% 59.8%)'
   },
-  
+
   primaryForeground: {
-    light: 'hsl(210 20% 98%)',
-    dark: 'hsl(224 71.4% 4.1%)'
+    light: 'hsl(0 0% 98%)',
+    dark: 'hsl(0 0% 4%)'
   },
-  
+
   // Secondary colors - more subtle
   secondary: {
-    light: 'hsl(220 14.3% 95.9%)',
-    dark: 'hsl(215 27.9% 16.9%)'
+    light: 'hsl(0 0% 96%)',
+    dark: 'hsl(0 0% 17%)'
   },
-  
+
   secondaryForeground: {
-    light: 'hsl(220.9 39.3% 11%)',
-    dark: 'hsl(210 20% 98%)'
+    light: 'hsl(0 0% 11%)',
+    dark: 'hsl(0 0% 98%)'
   },
-  
+
   // Muted colors - softer grays
   muted: {
-    light: 'hsl(220 14.3% 95.9%)',
-    dark: 'hsl(215 27.9% 16.9%)'
+    light: 'hsl(0 0% 96%)',
+    dark: 'hsl(0 0% 17%)'
   },
-  
+
   mutedForeground: {
-    light: 'hsl(220 8.9% 46.1%)',
-    dark: 'hsl(217.9 10.6% 64.9%)'
+    light: 'hsl(0 0% 46%)',
+    dark: 'hsl(0 0% 65%)'
   },
-  
+
   // Accent colors - subtle hover states
   accent: {
-    light: 'hsl(220 14.3% 95.9%)',
-    dark: 'hsl(215 27.9% 16.9%)'
+    light: 'hsl(0 0% 96%)',
+    dark: 'hsl(0 0% 17%)'
   },
-  
+
   accentForeground: {
-    light: 'hsl(220.9 39.3% 11%)',
-    dark: 'hsl(210 20% 98%)'
+    light: 'hsl(0 0% 11%)',
+    dark: 'hsl(0 0% 98%)'
   },
-  
+
   // Destructive colors - softer red
   destructive: {
     light: 'hsl(0 72.2% 50.6%)',
     dark: 'hsl(0 62.8% 30.6%)'
   },
-  
+
   destructiveForeground: {
     light: 'hsl(0 0% 98%)',
     dark: 'hsl(0 0% 98%)'
   },
-  
+
   // Border color - very subtle
   border: {
-    light: 'hsl(220 13% 91%)',
-    dark: 'hsl(215 27.9% 16.9%)'
+    light: 'hsl(0 0% 91%)',
+    dark: 'hsl(0 0% 17%)'
   },
-  
+
   // Input color
   input: {
-    light: 'hsl(214.3 31.8% 91.4%)',
-    dark: 'hsl(217.2 32.6% 17.5%)'
+    light: 'hsl(0 0% 91%)',
+    dark: 'hsl(0 0% 18%)'
   },
   
   // Ring color - subtle focus indicator

ts_web/elements/00tokens.ts

@@ -185,7 +185,7 @@ export const focusRing = css`
   outline: 2px solid transparent;
   outline-offset: 2px;
   &:focus-visible {
-    outline-color: ${cssManager.bdTheme('hsl(222.2 84% 4.9%)', 'hsl(212.7 26.8% 83.9%)')};
+    outline-color: ${cssManager.bdTheme('hsl(0 0% 5%)', 'hsl(0 0% 84%)')};
   }
 `;
 

ts_web/elements/sio-combox.ts

@@ -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;
 
   @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

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;
@@ -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];
+  }
 }

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

@@ -6,12 +6,13 @@ import {
   type TemplateResult,
   cssManager,
   css,
+  unsafeCSS,
+  state,
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
 import { SioCombox } from './sio-combox.js';
 import { SioIcon } from './sio-icon.js';
-import { state } from '@design.estate/dees-element';
 SioCombox;
 SioIcon;
 
@@ -31,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;
 
@@ -44,201 +42,186 @@ export class SioFab extends DeesElement {
     domtools.DomTools.setupDomTools();
   }
 
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        will-change: transform;
+        position: absolute;
+        display: block;
+        bottom: 20px;
+        right: 20px;
+        z-index: 10000;
+        color: #fff;
+        --fab-gradient-start: #6366f1;
+        --fab-gradient-mid: #8b5cf6;
+        --fab-gradient-end: #a855f7;
+        --fab-gradient-hover-end: #c026d3;
+        --fab-shadow-color: rgba(139, 92, 246, 0.25);
+        --fab-size: 60px;
+      }
+
+      #mainbox {
+        transition: ${unsafeCSS(transitions.all)};
+        position: absolute;
+        bottom: 0px;
+        right: 0px;
+        height: var(--fab-size);
+        width: var(--fab-size);
+        box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.1), 0 2px 8px -2px rgba(0, 0, 0, 0.06);
+        line-height: var(--fab-size);
+        text-align: center;
+        cursor: pointer;
+        background: linear-gradient(135deg, var(--fab-gradient-start) 0%, var(--fab-gradient-mid) 50%, var(--fab-gradient-end) 100%);
+        color: white;
+        border-radius: ${unsafeCSS(radius.full)};
+        user-select: none;
+        border: none;
+        animation: fabEntrance 300ms cubic-bezier(0.4, 0, 0.2, 1);
+        overflow: hidden;
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+      }
+
+      #mainbox::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 50%);
+        opacity: 0;
+        transition: opacity 200ms ease;
+      }
+
+      #mainbox::after {
+        content: '';
+        position: absolute;
+        top: -4px;
+        left: -4px;
+        right: -4px;
+        bottom: -4px;
+        background: linear-gradient(135deg, var(--fab-gradient-start), var(--fab-gradient-end));
+        border-radius: inherit;
+        z-index: -1;
+        opacity: 0;
+        filter: blur(12px);
+        transition: opacity 300ms ease;
+      }
+
+      #mainbox:hover::before {
+        opacity: 1;
+      }
+
+      #mainbox:hover::after {
+        opacity: 0.3;
+      }
+
+      @keyframes fabEntrance {
+        from {
+          transform: scale(0.8);
+          opacity: 0;
+        }
+        to {
+          transform: scale(1);
+          opacity: 1;
+        }
+      }
+
+      #mainbox:hover {
+        transform: scale(1.02);
+        background: linear-gradient(135deg, var(--fab-gradient-start) 0%, var(--fab-gradient-mid) 50%, var(--fab-gradient-hover-end) 100%);
+        box-shadow: 0 8px 20px -4px var(--fab-shadow-color);
+      }
+
+      #mainbox:active {
+        transform: scale(0.98);
+        box-shadow: 0 4px 12px -2px var(--fab-shadow-color);
+      }
+
+      #mainbox.pulse::after {
+        animation: fabPulse 0.6s ease-out forwards;
+      }
+
+      @keyframes fabPulse {
+        0% {
+          box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
+          opacity: 1;
+        }
+        100% {
+          box-shadow: 0 0 0 12px rgba(139, 92, 246, 0);
+          opacity: 0;
+        }
+      }
+
+      #mainbox .icon {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        will-change: transform, opacity;
+        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+        height: 100%;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      #mainbox .icon.open {
+        opacity: 1;
+        transform: rotate(0deg) scale(1);
+      }
+
+      #mainbox .icon.close {
+        opacity: 0;
+        transform: rotate(-45deg) scale(0.9);
+      }
+
+      /* When combox is open */
+      :host(.combox-open) #mainbox .icon.open {
+        opacity: 0;
+        transform: rotate(45deg) scale(0.9);
+      }
+
+      :host(.combox-open) #mainbox .icon.close {
+        opacity: 1;
+        transform: rotate(0deg) scale(1);
+      }
+
+      #mainbox .icon sio-icon {
+        color: white;
+        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+      }
+
+      #mainbox .icon.close sio-icon {
+        transform: scale(1);
+      }
+    `,
+    // Mobile responsive styles - smaller FAB
+    cssManager.cssForPhablet(css`
+      :host {
+        --fab-size: 48px;
+        bottom: 16px;
+        right: 16px;
+      }
+    `),
+  ];
+
   public render(): TemplateResult {
     return html`
-      ${domtools.elementBasic.styles}
-      <style>
-        :host {
-          will-change: transform;
-          position: absolute;
-          display: block;
-          bottom: 20px;
-          right: 20px;
-          z-index: 10000;
-          color: #fff;
-          --fab-gradient-start: #6366f1;
-          --fab-gradient-mid: #8b5cf6;
-          --fab-gradient-end: #a855f7;
-          --fab-gradient-hover-end: #c026d3;
-          --fab-shadow-color: rgba(139, 92, 246, 0.25);
-        }
-
-        #mainbox {
-          transition: ${transitions.all};
-          position: absolute;
-          bottom: 0px;
-          right: 0px;
-          height: 60px;
-          width: 60px;
-          box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.1), 0 2px 8px -2px rgba(0, 0, 0, 0.06);
-          line-height: 60px;
-          text-align: center;
-          cursor: pointer;
-          background: linear-gradient(135deg, var(--fab-gradient-start) 0%, var(--fab-gradient-mid) 50%, var(--fab-gradient-end) 100%);
-          color: white;
-          border-radius: ${radius.full};
-          user-select: none;
-          border: none;
-          animation: fabEntrance 300ms cubic-bezier(0.4, 0, 0.2, 1);
-          overflow: hidden;
-          position: relative;
-          backdrop-filter: blur(10px);
-          -webkit-backdrop-filter: blur(10px);
-        }
-        
-        #mainbox::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 50%);
-          opacity: 0;
-          transition: opacity 200ms ease;
-        }
-        
-        #mainbox::after {
-          content: '';
-          position: absolute;
-          top: -4px;
-          left: -4px;
-          right: -4px;
-          bottom: -4px;
-          background: linear-gradient(135deg, var(--fab-gradient-start), var(--fab-gradient-end));
-          border-radius: inherit;
-          z-index: -1;
-          opacity: 0;
-          filter: blur(12px);
-          transition: opacity 300ms ease;
-        }
-        
-        #mainbox:hover::before {
-          opacity: 1;
-        }
-        
-        #mainbox:hover::after {
-          opacity: 0.3;
-        }
-        
-        @keyframes fabEntrance {
-          from {
-            transform: scale(0.8);
-            opacity: 0;
-          }
-          to {
-            transform: scale(1);
-            opacity: 1;
-          }
-        }
-
-        #mainbox:hover {
-          transform: scale(1.02);
-          background: linear-gradient(135deg, var(--fab-gradient-start) 0%, var(--fab-gradient-mid) 50%, var(--fab-gradient-hover-end) 100%);
-        }
-        
-        #mainbox:hover {
-          box-shadow: 0 8px 20px -4px var(--fab-shadow-color);
-        }
-
-        #mainbox:active {
-          transform: scale(0.98);
-          box-shadow: 0 4px 12px -2px var(--fab-shadow-color);
-        }
-        
-        #mainbox.pulse::after {
-          animation: fabPulse 0.6s ease-out forwards;
-        }
-        
-        @keyframes fabPulse {
-          0% {
-            box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
-            opacity: 1;
-          }
-          100% {
-            box-shadow: 0 0 0 12px rgba(139, 92, 246, 0);
-            opacity: 0;
-          }
-        }
-
-        #mainbox .icon {
-          position: absolute;
-          top: 0px;
-          left: 0px;
-          will-change: transform, opacity;
-          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
-          height: 100%;
-          width: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-
-
-        #mainbox .icon.open {
-          opacity: ${this.showCombox ? '0' : '1'};
-          transform: ${this.showCombox ? 'rotate(45deg) scale(0.9)' : 'rotate(0deg) scale(1)'};
-        }
-
-        #mainbox .icon.close {
-          opacity: ${this.showCombox ? '1' : '0'};
-          transform: ${this.showCombox ? 'rotate(0deg) scale(1)' : 'rotate(-45deg) scale(0.9)'};
-        }
-
-        #mainbox .icon sio-icon {
-          color: white;
-          filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
-        }
-
-        #mainbox .icon.close sio-icon {
-          transform: scale(1);
-        }
-
-        #comboxContainer {
-          position: absolute;
-          bottom: 0;
-          right: 0;
-          pointer-events: none;
-        }
-
-        #comboxContainer sio-combox {
-          position: absolute;
-          bottom: calc(60px + ${spacing["4"]});
-          right: 0;
-          transition: ${transitions.all};
-          will-change: transform;
-          transform: translateY(${spacing["5"]});
-          opacity: 0;
-          pointer-events: none;
-        }
-
-        #comboxContainer.show {
-          pointer-events: all;
-        }
-
-        #comboxContainer.show sio-combox {
-          transform: translateY(0px);
-          opacity: 1;
-          pointer-events: all;
-        }
-      </style>
-      <div id="mainbox" 
+      <div id="mainbox"
         class="${this.shouldPulse ? 'pulse' : ''}"
         @click=${this.toggleCombox}
         @animationend=${() => { this.shouldPulse = false; }}
       >
         <div class="icon open">
-          <sio-icon icon="message-square" size="28"></sio-icon>
+          <sio-icon icon="message-square" size="24"></sio-icon>
         </div>
         <div class="icon close">
-          <sio-icon icon="x" size="22"></sio-icon>
+          <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>
     `;
   }
 
@@ -246,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;
       }
     }
@@ -260,7 +243,15 @@ export class SioFab extends DeesElement {
   public async firstUpdated(args: any) {
     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])
@@ -268,17 +259,16 @@ export class SioFab extends DeesElement {
         this.toggleCombox();
       });
   }
-  
+
   public async updated(changedProperties: Map<string | number | symbol, unknown>) {
     super.updated(changedProperties);
-    
-    // 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;
+
+    // Update host class based on combox state
+    if (changedProperties.has('showCombox')) {
+      if (this.showCombox) {
+        this.classList.add('combox-open');
+      } else {
+        this.classList.remove('combox-open');
       }
     }
   }

ts_web/elements/sio-message-input.ts

@@ -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;