@thestatic-tv/dcl-sdk 2.1.0 → 2.2.0

package/dist/index.d.mts

@@ -429,6 +429,7 @@ declare class GuideUIModule {
     private handleChannelClick;
     /**
      * Get the guide UI component for rendering
+     * Returns toggle button when hidden, full panel when visible
      */
     getComponent: () => any;
     private renderLeftPanel;
@@ -437,6 +438,7 @@ declare class GuideUIModule {
     private renderCardGrid;
     private renderGuideCard;
     private renderCloseButton;
+    private renderToggleButton;
 }
 
 /**
@@ -517,6 +519,7 @@ declare class ChatUIModule {
     private formatTime;
     /**
      * Get the chat UI component for rendering
+     * Returns toggle button when hidden, full panel when visible
      */
     getComponent: () => any;
     private getPositionStyle;
@@ -528,6 +531,7 @@ declare class ChatUIModule {
     private renderUserInfoBar;
     private renderInputArea;
     private renderChannelDropdown;
+    private renderToggleButton;
 }
 
 /**

package/dist/index.d.ts

@@ -429,6 +429,7 @@ declare class GuideUIModule {
     private handleChannelClick;
     /**
      * Get the guide UI component for rendering
+     * Returns toggle button when hidden, full panel when visible
      */
     getComponent: () => any;
     private renderLeftPanel;
@@ -437,6 +438,7 @@ declare class GuideUIModule {
     private renderCardGrid;
     private renderGuideCard;
     private renderCloseButton;
+    private renderToggleButton;
 }
 
 /**
@@ -517,6 +519,7 @@ declare class ChatUIModule {
     private formatTime;
     /**
      * Get the chat UI component for rendering
+     * Returns toggle button when hidden, full panel when visible
      */
     getComponent: () => any;
     private getPositionStyle;
@@ -528,6 +531,7 @@ declare class ChatUIModule {
     private renderUserInfoBar;
     private renderInputArea;
     private renderChannelDropdown;
+    private renderToggleButton;
 }
 
 /**

package/dist/index.js

@@ -778,9 +778,12 @@ var GuideUIModule = class {
     // =============================================================================
     /**
      * Get the guide UI component for rendering
+     * Returns toggle button when hidden, full panel when visible
      */
     this.getComponent = () => {
-      if (!this._isVisible) return null;
+      if (!this._isVisible) {
+        return this.renderToggleButton();
+      }
       const windowW = this.s(UI_DIMENSIONS.guide.width);
       return import_react_ecs2.default.createElement(import_react_ecs2.UiEntity, {
         uiTransform: {
@@ -1336,6 +1339,30 @@ var GuideUIModule = class {
       ]
     });
   }
+  renderToggleButton() {
+    return import_react_ecs2.default.createElement(import_react_ecs2.UiEntity, {
+      uiTransform: {
+        positionType: "absolute",
+        position: { right: 20, top: "40%" },
+        width: this.s(80),
+        height: this.s(40),
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      uiBackground: { color: import_math3.Color4.create(0, 0.5, 0.5, 0.9) },
+      onMouseDown: () => this.show(),
+      children: [
+        import_react_ecs2.default.createElement(import_react_ecs2.UiEntity, {
+          uiText: {
+            value: "GUIDE",
+            fontSize: this.s(16),
+            color: THEME.colors.white,
+            textAlign: "middle-center"
+          }
+        })
+      ]
+    });
+  }
 };
 
 // src/ui/chat-ui.tsx
@@ -1380,9 +1407,12 @@ var ChatUIModule = class {
     // =============================================================================
     /**
      * Get the chat UI component for rendering
+     * Returns toggle button when hidden, full panel when visible
      */
     this.getComponent = () => {
-      if (!this._isVisible) return null;
+      if (!this._isVisible) {
+        return this.renderToggleButton();
+      }
       const scaledTheme = scaleChatTheme(DEFAULT_CHAT_THEME, this.fontScale);
       const positionStyle = this.getPositionStyle();
       return import_react_ecs3.default.createElement(import_react_ecs3.UiEntity, {
@@ -2107,6 +2137,31 @@ var ChatUIModule = class {
       ]
     });
   }
+  renderToggleButton() {
+    const unreadBadge = this._unreadCount > 0 ? ` (${this._unreadCount})` : "";
+    return import_react_ecs3.default.createElement(import_react_ecs3.UiEntity, {
+      uiTransform: {
+        positionType: "absolute",
+        position: { right: 20, top: "48%" },
+        width: 80,
+        height: 40,
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      uiBackground: { color: import_math4.Color4.create(0.6, 0, 0.5, 0.9) },
+      onMouseDown: () => this.show(),
+      children: [
+        import_react_ecs3.default.createElement(import_react_ecs3.UiEntity, {
+          uiText: {
+            value: `CHAT${unreadBadge}`,
+            fontSize: 16,
+            color: THEME.colors.white,
+            textAlign: "middle-center"
+          }
+        })
+      ]
+    });
+  }
 };
 
 // src/StaticTVClient.ts

package/dist/index.mjs

@@ -738,9 +738,12 @@ var GuideUIModule = class {
     // =============================================================================
     /**
      * Get the guide UI component for rendering
+     * Returns toggle button when hidden, full panel when visible
      */
     this.getComponent = () => {
-      if (!this._isVisible) return null;
+      if (!this._isVisible) {
+        return this.renderToggleButton();
+      }
       const windowW = this.s(UI_DIMENSIONS.guide.width);
       return ReactEcs2.createElement(UiEntity2, {
         uiTransform: {
@@ -1296,6 +1299,30 @@ var GuideUIModule = class {
       ]
     });
   }
+  renderToggleButton() {
+    return ReactEcs2.createElement(UiEntity2, {
+      uiTransform: {
+        positionType: "absolute",
+        position: { right: 20, top: "40%" },
+        width: this.s(80),
+        height: this.s(40),
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      uiBackground: { color: Color43.create(0, 0.5, 0.5, 0.9) },
+      onMouseDown: () => this.show(),
+      children: [
+        ReactEcs2.createElement(UiEntity2, {
+          uiText: {
+            value: "GUIDE",
+            fontSize: this.s(16),
+            color: THEME.colors.white,
+            textAlign: "middle-center"
+          }
+        })
+      ]
+    });
+  }
 };
 
 // src/ui/chat-ui.tsx
@@ -1340,9 +1367,12 @@ var ChatUIModule = class {
     // =============================================================================
     /**
      * Get the chat UI component for rendering
+     * Returns toggle button when hidden, full panel when visible
      */
     this.getComponent = () => {
-      if (!this._isVisible) return null;
+      if (!this._isVisible) {
+        return this.renderToggleButton();
+      }
       const scaledTheme = scaleChatTheme(DEFAULT_CHAT_THEME, this.fontScale);
       const positionStyle = this.getPositionStyle();
       return ReactEcs3.createElement(UiEntity3, {
@@ -2067,6 +2097,31 @@ var ChatUIModule = class {
       ]
     });
   }
+  renderToggleButton() {
+    const unreadBadge = this._unreadCount > 0 ? ` (${this._unreadCount})` : "";
+    return ReactEcs3.createElement(UiEntity3, {
+      uiTransform: {
+        positionType: "absolute",
+        position: { right: 20, top: "48%" },
+        width: 80,
+        height: 40,
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      uiBackground: { color: Color44.create(0.6, 0, 0.5, 0.9) },
+      onMouseDown: () => this.show(),
+      children: [
+        ReactEcs3.createElement(UiEntity3, {
+          uiText: {
+            value: `CHAT${unreadBadge}`,
+            fontSize: 16,
+            color: THEME.colors.white,
+            textAlign: "middle-center"
+          }
+        })
+      ]
+    });
+  }
 };
 
 // src/StaticTVClient.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thestatic-tv/dcl-sdk",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Connect your Decentraland scene to thestatic.tv - full channel lineup, metrics tracking, and interactions",
   "main": "dist/index.js",
   "module": "dist/index.mjs",