@thestatic-tv/dcl-sdk 1.0.7 → 2.0.1

package/dist/index.mjs

@@ -96,8 +96,8 @@ function getPlayerWallet() {
     return cachedWallet;
   }
   try {
-    const { getPlayer } = __require("@dcl/sdk/players");
-    const player = getPlayer();
+    const { getPlayer: getPlayer2 } = __require("@dcl/sdk/players");
+    const player = getPlayer2();
     return player?.userId ?? null;
   } catch {
     return null;
@@ -108,8 +108,8 @@ function getPlayerDisplayName() {
     return cachedDisplayName;
   }
   try {
-    const { getPlayer } = __require("@dcl/sdk/players");
-    const player = getPlayer();
+    const { getPlayer: getPlayer2 } = __require("@dcl/sdk/players");
+    const player = getPlayer2();
     return player?.name ?? null;
   } catch {
     return null;
@@ -158,6 +158,50 @@ function dclClearInterval(timerId) {
     timers.delete(timerId);
   }
 }
+var timeouts = /* @__PURE__ */ new Map();
+var timeoutSystemAdded = false;
+function ensureTimeoutSystem() {
+  if (timeoutSystemAdded) return;
+  engine.addSystem((dt) => {
+    const toRemove = [];
+    for (const timeout of timeouts.values()) {
+      if (!timeout.active) continue;
+      timeout.elapsedTime += dt;
+      if (timeout.elapsedTime >= timeout.delaySeconds) {
+        timeout.active = false;
+        toRemove.push(timeout.id);
+        try {
+          timeout.callback();
+        } catch (e) {
+          console.error("[StaticTV Timer] Timeout callback error:", e);
+        }
+      }
+    }
+    for (const id of toRemove) {
+      timeouts.delete(id);
+    }
+  });
+  timeoutSystemAdded = true;
+}
+function dclSetTimeout(callback, delayMs) {
+  ensureTimeoutSystem();
+  const id = nextTimerId++;
+  timeouts.set(id, {
+    id,
+    callback,
+    delaySeconds: delayMs / 1e3,
+    elapsedTime: 0,
+    active: true
+  });
+  return id;
+}
+function dclClearTimeout(timeoutId) {
+  const timeout = timeouts.get(timeoutId);
+  if (timeout) {
+    timeout.active = false;
+    timeouts.delete(timeoutId);
+  }
+}
 
 // src/modules/session.ts
 var SessionModule = class {
@@ -470,6 +514,1548 @@ var InteractionsModule = class {
   }
 };
 
+// src/ui/guide-ui.tsx
+import ReactEcs2, { UiEntity as UiEntity2, Input as Input2, Label as Label2 } from "@dcl/sdk/react-ecs";
+import { Color4 as Color43 } from "@dcl/sdk/math";
+import { openExternalUrl } from "~system/RestrictedActions";
+
+// src/ui/theme.ts
+import { Color4 } from "@dcl/sdk/math";
+var THEME = {
+  colors: {
+    panel: Color4.create(0.05, 0.05, 0.08, 0.98),
+    panelDark: Color4.create(0.04, 0.04, 0.06, 1),
+    panelBorder: Color4.create(0.2, 0.2, 0.2, 1),
+    inputBackground: Color4.create(0.1, 0.1, 0.12, 1),
+    buttonBackground: Color4.create(0.15, 0.15, 0.18, 1),
+    buttonHover: Color4.create(0.2, 0.2, 0.24, 1),
+    activeBackground: Color4.create(0, 1, 1, 0.1),
+    cyan: Color4.create(0, 1, 1, 1),
+    magenta: Color4.create(1, 0, 1, 1),
+    yellow: Color4.create(1, 0.8, 0, 1),
+    red: Color4.create(1, 0.2, 0.2, 1),
+    green: Color4.create(0, 1, 0, 1),
+    white: Color4.White(),
+    gray: Color4.create(0.5, 0.5, 0.5, 1),
+    grayText: Color4.create(0.35, 0.35, 0.35, 1),
+    darkGray: Color4.create(0.15, 0.15, 0.15, 1)
+  }
+};
+var UI_DIMENSIONS = {
+  // Guide UI
+  guide: {
+    width: 900,
+    height: "55%",
+    bottom: 55,
+    right: 20,
+    sidebar: {
+      width: 300,
+      buttonHeight: 42,
+      fontSize: 16,
+      headerSize: 24,
+      subHeaderSize: 14
+    },
+    content: {
+      cardHeight: 150,
+      cardWidth: 260,
+      headerSize: 20,
+      bodySize: 16,
+      padding: 15
+    }
+  },
+  // Chat UI
+  chat: {
+    width: 340,
+    height: 480,
+    bottom: 55,
+    right: 20,
+    messagesPerPage: 5,
+    channelsPerPage: 6
+  },
+  // Shared
+  closeButton: {
+    size: 40,
+    fontSize: 24
+  }
+};
+var DEFAULT_CHAT_THEME = {
+  header: 22,
+  channelButton: 14,
+  channelDropdown: 14,
+  systemMessage: 14,
+  chatUsername: 16,
+  chatTimestamp: 11,
+  chatMessage: 16,
+  input: 16,
+  sendButton: 14,
+  userInfo: 14,
+  authStatus: 12,
+  notification: 18,
+  closeButton: 16
+};
+function scaleChatTheme(theme, fontScale) {
+  return {
+    header: Math.round(theme.header * fontScale),
+    channelButton: Math.round(theme.channelButton * fontScale),
+    channelDropdown: Math.round(theme.channelDropdown * fontScale),
+    systemMessage: Math.round(theme.systemMessage * fontScale),
+    chatUsername: Math.round(theme.chatUsername * fontScale),
+    chatTimestamp: Math.round(theme.chatTimestamp * fontScale),
+    chatMessage: Math.round(theme.chatMessage * fontScale),
+    input: Math.round(theme.input * fontScale),
+    sendButton: Math.round(theme.sendButton * fontScale),
+    userInfo: Math.round(theme.userInfo * fontScale),
+    authStatus: Math.round(theme.authStatus * fontScale),
+    notification: Math.round(theme.notification * fontScale),
+    closeButton: Math.round(theme.closeButton * fontScale)
+  };
+}
+
+// src/ui/components.tsx
+import ReactEcs, { UiEntity, Label, Input } from "@dcl/sdk/react-ecs";
+import { Color4 as Color42 } from "@dcl/sdk/math";
+var PanelHeader = (props) => {
+  const fontSize = props.fontSize || 14;
+  const fontScale = props.fontScale || 1;
+  const scaledFontSize = Math.round(fontSize * fontScale);
+  const currentPos = props.position || "right";
+  return ReactEcs.createElement(UiEntity, {
+    uiTransform: {
+      height: 36,
+      minHeight: 36,
+      flexShrink: 0,
+      width: "100%",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      padding: { left: 10, right: 6 }
+    },
+    uiBackground: { color: THEME.colors.panelDark },
+    children: [
+      // Title
+      ReactEcs.createElement(UiEntity, {
+        uiText: { value: props.title, fontSize: scaledFontSize, color: THEME.colors.cyan }
+      }),
+      // Controls
+      ReactEcs.createElement(UiEntity, {
+        uiTransform: { flexDirection: "row", gap: 4, alignItems: "center" },
+        children: [
+          // Position controls
+          ...props.showPositionControls ? [
+            ReactEcs.createElement(UiEntity, {
+              key: "pos-left",
+              uiTransform: { width: 22, height: 22, justifyContent: "center", alignItems: "center" },
+              uiBackground: { color: currentPos === "left" ? Color42.create(0, 0.3, 0.3, 1) : THEME.colors.buttonBackground },
+              onMouseDown: () => props.onPositionChange?.("left"),
+              children: [ReactEcs.createElement(UiEntity, { uiText: { value: "\u25C0", fontSize: 10, color: THEME.colors.cyan } })]
+            }),
+            ReactEcs.createElement(UiEntity, {
+              key: "pos-center",
+              uiTransform: { width: 22, height: 22, justifyContent: "center", alignItems: "center" },
+              uiBackground: { color: currentPos === "center" ? Color42.create(0, 0.3, 0.3, 1) : THEME.colors.buttonBackground },
+              onMouseDown: () => props.onPositionChange?.("center"),
+              children: [ReactEcs.createElement(UiEntity, { uiText: { value: "\u25CF", fontSize: 10, color: THEME.colors.cyan } })]
+            }),
+            ReactEcs.createElement(UiEntity, {
+              key: "pos-right",
+              uiTransform: { width: 22, height: 22, justifyContent: "center", alignItems: "center" },
+              uiBackground: { color: currentPos === "right" ? Color42.create(0, 0.3, 0.3, 1) : THEME.colors.buttonBackground },
+              onMouseDown: () => props.onPositionChange?.("right"),
+              children: [ReactEcs.createElement(UiEntity, { uiText: { value: "\u25B6", fontSize: 10, color: THEME.colors.cyan } })]
+            }),
+            ReactEcs.createElement(UiEntity, { key: "pos-spacer", uiTransform: { width: 6 } })
+          ] : [],
+          // Font controls
+          ...props.showFontControls ? [
+            ReactEcs.createElement(UiEntity, {
+              key: "font-down",
+              uiTransform: { width: 22, height: 22, justifyContent: "center", alignItems: "center" },
+              uiBackground: { color: THEME.colors.buttonBackground },
+              onMouseDown: () => props.onFontScaleDown?.(),
+              children: [ReactEcs.createElement(UiEntity, { uiText: { value: "\u2212", fontSize: 14, color: THEME.colors.cyan } })]
+            }),
+            ReactEcs.createElement(UiEntity, {
+              key: "font-up",
+              uiTransform: { width: 22, height: 22, justifyContent: "center", alignItems: "center" },
+              uiBackground: { color: THEME.colors.buttonBackground },
+              onMouseDown: () => props.onFontScaleUp?.(),
+              children: [ReactEcs.createElement(UiEntity, { uiText: { value: "+", fontSize: 14, color: THEME.colors.cyan } })]
+            }),
+            ReactEcs.createElement(UiEntity, { key: "font-spacer", uiTransform: { width: 6 } })
+          ] : [],
+          // Close button
+          ...props.onClose ? [
+            ReactEcs.createElement(UiEntity, {
+              key: "close",
+              uiTransform: { width: 24, height: 22, justifyContent: "center", alignItems: "center" },
+              uiBackground: { color: THEME.colors.buttonBackground },
+              onMouseDown: () => props.onClose?.(),
+              children: [ReactEcs.createElement(UiEntity, { uiText: { value: "X", fontSize: 12, color: THEME.colors.red } })]
+            })
+          ] : []
+        ]
+      })
+    ]
+  });
+};
+function truncateText(text, maxLength) {
+  if (text.length <= maxLength) return text;
+  return text.substring(0, maxLength - 3) + "...";
+}
+
+// src/ui/guide-ui.tsx
+var GuideUIModule = class {
+  constructor(client, config = {}) {
+    // Visibility state
+    this._isVisible = false;
+    // Data state
+    this.videos = [];
+    this.featuredPlaylists = [];
+    this.liveVideos = [];
+    // UI state
+    this.activeTab = "SIGNALS";
+    this.currentPage = 0;
+    this.itemsPerPage = 6;
+    this.searchQuery = "";
+    this.uiScale = 1;
+    // Current video tracking (for "PLAYING" indicator)
+    this._currentVideoId = null;
+    // =============================================================================
+    // --- UI RENDERING ---
+    // =============================================================================
+    /**
+     * Get the guide UI component for rendering
+     */
+    this.getComponent = () => {
+      if (!this._isVisible) return null;
+      const windowW = this.s(UI_DIMENSIONS.guide.width);
+      return ReactEcs2.createElement(UiEntity2, {
+        uiTransform: {
+          width: windowW,
+          height: UI_DIMENSIONS.guide.height,
+          positionType: "absolute",
+          position: { bottom: UI_DIMENSIONS.guide.bottom, right: UI_DIMENSIONS.guide.right },
+          flexDirection: "row",
+          border: { top: 2, bottom: 2, left: 2, right: 2 },
+          borderColor: THEME.colors.panelBorder
+        },
+        uiBackground: { color: THEME.colors.panel },
+        children: [
+          this.renderLeftPanel(),
+          this.renderRightPanel(),
+          this.renderCloseButton()
+        ]
+      });
+    };
+    this.client = client;
+    this.config = config;
+    this.uiScale = config.uiScale || 1;
+    this._currentVideoId = config.currentVideoId || null;
+  }
+  /**
+   * Initialize the guide - fetch channel data
+   */
+  async init() {
+    await this.fetchGuideData();
+    this.client.log("GuideUI initialized");
+  }
+  /**
+   * Show the guide UI
+   */
+  show() {
+    this._isVisible = true;
+    this.fetchGuideData().catch(() => {
+    });
+  }
+  /**
+   * Hide the guide UI
+   */
+  hide() {
+    this._isVisible = false;
+    this.activeTab = "SIGNALS";
+    this.searchQuery = "";
+    this.currentPage = 0;
+  }
+  /**
+   * Toggle guide visibility
+   */
+  toggle() {
+    if (this._isVisible) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  /**
+   * Check if guide is visible
+   */
+  get isVisible() {
+    return this._isVisible;
+  }
+  /**
+   * Set the currently playing video ID (for "PLAYING" indicator)
+   */
+  set currentVideoId(id) {
+    this._currentVideoId = id;
+  }
+  /**
+   * Get the currently playing video ID
+   */
+  get currentVideoId() {
+    return this._currentVideoId;
+  }
+  /**
+   * Get all videos
+   */
+  getVideos() {
+    return this.videos;
+  }
+  /**
+   * Get live videos only
+   */
+  getLiveVideos() {
+    return this.liveVideos;
+  }
+  /**
+   * Refresh guide data
+   */
+  async refresh() {
+    await this.fetchGuideData();
+  }
+  // =============================================================================
+  // --- INTERNAL DATA FETCHING ---
+  // =============================================================================
+  getBaseUrl() {
+    const config = this.client.getConfig();
+    const baseUrl = config.baseUrl || "https://thestatic.tv/api/v1/dcl";
+    return baseUrl.replace("/api/v1/dcl", "");
+  }
+  async fetchGuideData() {
+    try {
+      const baseUrl = this.getBaseUrl();
+      const response = await fetch(`${baseUrl}/api/v1/guide`);
+      if (!response.ok) {
+        this.client.log("Guide API request failed");
+        return;
+      }
+      const data = await response.json();
+      const videos = [];
+      const liveVideos = [];
+      if (data.videoMap) {
+        for (const [slug, video] of Object.entries(data.videoMap)) {
+          const v = video;
+          const mapped = {
+            id: v.id || slug,
+            name: v.name || v.title || "Unknown",
+            src: v.src || v.liveStreamUrl || "",
+            isLive: v.isLive === true || v.type === "live",
+            isCreator: v.isCreator || v.type === "live",
+            channelId: v.channelId || slug,
+            duration: v.duration,
+            requiresAuth: v.requiresAuth
+          };
+          videos.push(mapped);
+          if (mapped.isLive) {
+            liveVideos.push(mapped);
+          }
+        }
+      }
+      const playlists = [];
+      if (data.featuredPlaylists) {
+        for (const pl of data.featuredPlaylists) {
+          playlists.push({
+            name: pl.name,
+            videos: (pl.videos || []).map((v) => ({
+              id: v.id,
+              name: v.name || v.title || "Unknown",
+              src: v.src || v.liveStreamUrl || "",
+              isLive: v.isLive === true,
+              isCreator: v.isCreator,
+              channelId: v.channelId || v.id,
+              duration: v.duration,
+              requiresAuth: v.requiresAuth
+            }))
+          });
+        }
+      }
+      this.videos = videos;
+      this.liveVideos = liveVideos;
+      this.featuredPlaylists = playlists;
+      this.client.log(`Guide loaded: ${videos.length} videos, ${playlists.length} playlists`);
+    } catch (e) {
+      this.client.log(`Failed to fetch guide data: ${e}`);
+    }
+  }
+  // =============================================================================
+  // --- UTILITIES ---
+  // =============================================================================
+  s(value) {
+    return Math.round(value * this.uiScale);
+  }
+  handleVideoSelect(video) {
+    if (this.config.onVideoSelect) {
+      this.config.onVideoSelect(video);
+    }
+  }
+  handleChannelClick(video) {
+    const baseUrl = this.getBaseUrl();
+    const channelUrl = `${baseUrl}/${video.channelId || video.id}`;
+    openExternalUrl({ url: channelUrl });
+  }
+  renderLeftPanel() {
+    const sidebarW = this.s(UI_DIMENSIONS.guide.sidebar.width);
+    const liveCount = this.liveVideos.length;
+    const signalCount = this.videos.filter((v) => !v.isLive).length;
+    const nodesPlaylist = this.featuredPlaylists.find((p) => p.name === "NODES");
+    const nodesCount = nodesPlaylist ? nodesPlaylist.videos.filter((v) => v.isCreator).length : 0;
+    const displayedPlaylists = this.featuredPlaylists.filter((p) => p.name !== "NODES").slice(0, 6);
+    return ReactEcs2.createElement(UiEntity2, {
+      uiTransform: {
+        width: sidebarW,
+        minWidth: sidebarW,
+        maxWidth: sidebarW,
+        height: "100%",
+        flexDirection: "column",
+        border: { right: 1 },
+        borderColor: THEME.colors.panelBorder,
+        justifyContent: "flex-start"
+      },
+      uiBackground: { color: Color43.create(0, 0, 0, 0.4) },
+      children: [
+        // Header & Search
+        ReactEcs2.createElement(UiEntity2, {
+          uiTransform: { width: "100%", flexDirection: "column", padding: 10 },
+          children: [
+            // Title
+            ReactEcs2.createElement(UiEntity2, {
+              uiText: {
+                value: "THE STATIC TV",
+                fontSize: this.s(UI_DIMENSIONS.guide.sidebar.headerSize),
+                color: THEME.colors.cyan,
+                textAlign: "middle-center"
+              },
+              uiTransform: { height: this.s(40), marginBottom: 10 }
+            }),
+            // Random Signal button
+            ReactEcs2.createElement(UiEntity2, {
+              uiTransform: {
+                width: "100%",
+                height: this.s(40),
+                marginBottom: 10,
+                justifyContent: "center",
+                alignItems: "center",
+                border: { top: 1, bottom: 1, left: 1, right: 1 },
+                borderColor: THEME.colors.cyan
+              },
+              uiBackground: { color: Color43.create(0, 0.2, 0.2, 0.3) },
+              onMouseDown: () => {
+                if (this.videos.length > 0) {
+                  const randomVideo = this.videos[Math.floor(Math.random() * this.videos.length)];
+                  this.handleVideoSelect(randomVideo);
+                }
+              },
+              children: [
+                ReactEcs2.createElement(UiEntity2, {
+                  uiText: { value: ">> RANDOM SIGNAL <<", fontSize: this.s(14), color: THEME.colors.cyan }
+                })
+              ]
+            }),
+            // Search input
+            ReactEcs2.createElement(Input2, {
+              placeholder: "SCAN FREQ...",
+              fontSize: this.s(UI_DIMENSIONS.guide.sidebar.fontSize),
+              uiTransform: {
+                width: "100%",
+                height: this.s(40),
+                border: { top: 1, bottom: 1, left: 1, right: 1 },
+                borderColor: THEME.colors.grayText
+              },
+              color: THEME.colors.cyan,
+              placeholderColor: THEME.colors.grayText,
+              uiBackground: { color: Color43.create(0, 0, 0, 1) },
+              onChange: (val) => {
+                this.searchQuery = val;
+                this.currentPage = 0;
+              }
+            })
+          ]
+        }),
+        // Menu items
+        ReactEcs2.createElement(UiEntity2, {
+          uiTransform: { flexGrow: 1, flexDirection: "column", width: "100%", padding: { top: 5 } },
+          children: [
+            // Section header
+            ReactEcs2.createElement(UiEntity2, {
+              uiTransform: { padding: { left: 10, bottom: 8, top: 5 } },
+              uiText: { value: "GLOBAL NETWORK", fontSize: this.s(12), color: THEME.colors.cyan }
+            }),
+            // Menu buttons
+            this.renderMenuButton("LIVE NOW", liveCount, THEME.colors.red, liveCount > 0 ? "\u25CF" : void 0, "ACTIVE STREAMS"),
+            this.renderMenuButton("SIGNALS", signalCount, THEME.colors.white, void 0, "ALL VIDEOS"),
+            this.renderMenuButton("NODES", nodesCount, THEME.colors.magenta, void 0, "CHANNELS & CREATORS"),
+            // Divider
+            ReactEcs2.createElement(UiEntity2, {
+              uiTransform: { height: 1, width: "90%", margin: { top: 12, bottom: 8, left: 5 } },
+              uiBackground: { color: THEME.colors.panelBorder }
+            }),
+            // Archives section
+            ReactEcs2.createElement(UiEntity2, {
+              uiTransform: { padding: { left: 10, bottom: 8 } },
+              uiText: { value: "ARCHIVES", fontSize: this.s(12), color: THEME.colors.cyan }
+            }),
+            // Playlist buttons
+            ...displayedPlaylists.map(
+              (pl) => this.renderMenuButton(pl.name.toUpperCase(), pl.videos.length, THEME.colors.white, void 0, "PLAYLIST")
+            )
+          ]
+        })
+      ]
+    });
+  }
+  renderMenuButton(label, count, color, badge, subtitle) {
+    const isActive = this.activeTab === label;
+    const buttonHeight = this.s(UI_DIMENSIONS.guide.sidebar.buttonHeight);
+    return ReactEcs2.createElement(UiEntity2, {
+      key: label,
+      uiTransform: {
+        width: "100%",
+        height: buttonHeight,
+        marginBottom: 2,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: { left: 10, right: 10 },
+        border: { left: 4 },
+        borderColor: isActive ? color : Color43.Clear()
+      },
+      uiBackground: { color: isActive ? Color43.create(color.r, color.g, color.b, 0.15) : Color43.Clear() },
+      onMouseDown: () => {
+        this.activeTab = label;
+        this.currentPage = 0;
+      },
+      children: [
+        ReactEcs2.createElement(UiEntity2, {
+          uiTransform: { flexDirection: "column", alignItems: "flex-start", justifyContent: "center", gap: 0 },
+          children: [
+            ReactEcs2.createElement(UiEntity2, {
+              uiTransform: { height: this.s(18) },
+              uiText: {
+                value: `${label} [${count}]`,
+                fontSize: this.s(UI_DIMENSIONS.guide.sidebar.fontSize),
+                color: isActive ? color : THEME.colors.white,
+                textAlign: "middle-left"
+              }
+            }),
+            ...subtitle ? [
+              ReactEcs2.createElement(UiEntity2, {
+                key: "subtitle",
+                uiTransform: { height: this.s(12), marginTop: -2 },
+                uiText: {
+                  value: subtitle,
+                  fontSize: this.s(9),
+                  color: THEME.colors.grayText,
+                  textAlign: "middle-left"
+                }
+              })
+            ] : []
+          ]
+        }),
+        ...badge ? [
+          ReactEcs2.createElement(UiEntity2, {
+            key: "badge",
+            uiText: { value: badge, fontSize: this.s(UI_DIMENSIONS.guide.sidebar.fontSize), color: THEME.colors.red }
+          })
+        ] : []
+      ]
+    });
+  }
+  renderRightPanel() {
+    let videosToShow = [];
+    const nodePl = this.featuredPlaylists.find((p) => p.name === "NODES");
+    if (this.activeTab === "SIGNALS") {
+      videosToShow = this.videos.filter((v) => !v.isLive);
+    } else if (this.activeTab === "NODES") {
+      videosToShow = nodePl ? nodePl.videos.filter((v) => v.isCreator) : [];
+    } else if (this.activeTab === "LIVE NOW") {
+      videosToShow = this.liveVideos;
+    } else {
+      const pl = this.featuredPlaylists.find((p) => p.name.toUpperCase() === this.activeTab);
+      if (pl) videosToShow = pl.videos;
+    }
+    if (this.searchQuery) {
+      videosToShow = videosToShow.filter(
+        (v) => v.name?.toLowerCase().includes(this.searchQuery.toLowerCase())
+      );
+    }
+    const start = this.currentPage * this.itemsPerPage;
+    const paged = videosToShow.slice(start, start + this.itemsPerPage);
+    const totalPages = Math.ceil(videosToShow.length / this.itemsPerPage);
+    return ReactEcs2.createElement(UiEntity2, {
+      uiTransform: {
+        flexGrow: 1,
+        flexDirection: "column",
+        height: "100%",
+        padding: this.s(UI_DIMENSIONS.guide.content.padding)
+      },
+      children: [
+        this.renderCardGrid(paged),
+        // Pagination
+        ...totalPages > 1 ? [
+          ReactEcs2.createElement(UiEntity2, {
+            key: "pagination",
+            uiTransform: {
+              width: "100%",
+              height: this.s(40),
+              flexShrink: 0,
+              flexDirection: "row",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: 15
+            },
+            children: [
+              ...this.currentPage > 0 ? [
+                ReactEcs2.createElement(UiEntity2, {
+                  key: "prev",
+                  uiText: {
+                    value: "< PREV",
+                    fontSize: this.s(UI_DIMENSIONS.guide.content.bodySize),
+                    color: THEME.colors.cyan
+                  },
+                  onMouseDown: () => this.currentPage--
+                })
+              ] : [],
+              ReactEcs2.createElement(UiEntity2, {
+                uiText: {
+                  value: `${this.currentPage + 1}/${totalPages}`,
+                  fontSize: this.s(UI_DIMENSIONS.guide.content.bodySize),
+                  color: THEME.colors.grayText
+                }
+              }),
+              ...this.currentPage < totalPages - 1 ? [
+                ReactEcs2.createElement(UiEntity2, {
+                  key: "next",
+                  uiText: {
+                    value: "NEXT >",
+                    fontSize: this.s(UI_DIMENSIONS.guide.content.bodySize),
+                    color: THEME.colors.cyan
+                  },
+                  onMouseDown: () => this.currentPage++
+                })
+              ] : []
+            ]
+          })
+        ] : []
+      ]
+    });
+  }
+  renderCardGrid(videos) {
+    if (videos.length === 0) {
+      return ReactEcs2.createElement(UiEntity2, {
+        uiTransform: { width: "100%", flexGrow: 1, justifyContent: "center", alignItems: "center" },
+        uiText: { value: "NO SIGNAL", fontSize: this.s(UI_DIMENSIONS.guide.content.bodySize), color: THEME.colors.gray }
+      });
+    }
+    const rows = [];
+    for (let i = 0; i < videos.length; i += 2) {
+      rows.push(videos.slice(i, i + 2));
+    }
+    const cardH = this.s(UI_DIMENSIONS.guide.content.cardHeight);
+    return ReactEcs2.createElement(UiEntity2, {
+      uiTransform: {
+        width: "100%",
+        flexGrow: 1,
+        flexDirection: "column",
+        alignItems: "flex-start",
+        gap: 8
+      },
+      children: rows.map(
+        (row, rowIndex) => ReactEcs2.createElement(UiEntity2, {
+          key: `row-${rowIndex}`,
+          uiTransform: {
+            width: "100%",
+            height: cardH + 8,
+            flexDirection: "row",
+            gap: 10
+          },
+          children: row.map((v) => this.renderGuideCard(v))
+        })
+      )
+    });
+  }
+  renderGuideCard(video) {
+    const cardW = this.s(UI_DIMENSIONS.guide.content.cardWidth);
+    const cardH = this.s(UI_DIMENSIONS.guide.content.cardHeight);
+    const isActive = this._currentVideoId === video.id;
+    return ReactEcs2.createElement(UiEntity2, {
+      key: video.id,
+      uiTransform: {
+        width: cardW,
+        minWidth: cardW,
+        maxWidth: cardW,
+        height: cardH,
+        minHeight: cardH,
+        flexShrink: 0,
+        flexDirection: "column",
+        margin: 4
+      },
+      uiBackground: { color: isActive ? Color43.create(0, 0.4, 0, 0.5) : Color43.create(0.15, 0.15, 0.15, 0.8) },
+      children: [
+        // Main click area
+        ReactEcs2.createElement(UiEntity2, {
+          uiTransform: {
+            width: "100%",
+            height: "70%",
+            justifyContent: "center",
+            alignItems: "center",
+            flexDirection: "column"
+          },
+          onMouseDown: () => this.handleVideoSelect(video),
+          children: [
+            ReactEcs2.createElement(UiEntity2, {
+              uiText: {
+                value: truncateText(video.name || "Unknown", 22),
+                fontSize: this.s(UI_DIMENSIONS.guide.content.headerSize),
+                color: THEME.colors.white
+              }
+            }),
+            ...isActive ? [
+              ReactEcs2.createElement(UiEntity2, {
+                key: "playing",
+                uiText: {
+                  value: "PLAYING",
+                  fontSize: this.s(UI_DIMENSIONS.guide.content.bodySize),
+                  color: THEME.colors.green
+                }
+              })
+            ] : video.isLive ? [
+              ReactEcs2.createElement(UiEntity2, {
+                key: "live",
+                uiTransform: { padding: { left: 4, right: 4, top: 2, bottom: 2 }, marginTop: 4 },
+                uiBackground: { color: THEME.colors.red },
+                children: [
+                  ReactEcs2.createElement(Label2, { value: "LIVE", fontSize: this.s(10), color: THEME.colors.white })
+                ]
+              })
+            ] : []
+          ]
+        }),
+        // Channel link
+        ReactEcs2.createElement(UiEntity2, {
+          uiTransform: {
+            width: "100%",
+            height: "30%",
+            justifyContent: "center",
+            alignItems: "center",
+            padding: 4
+          },
+          uiBackground: { color: Color43.create(0, 0, 0, 0.3) },
+          onMouseDown: () => this.handleChannelClick(video),
+          children: [
+            ReactEcs2.createElement(UiEntity2, {
+              uiText: {
+                value: "CHANNEL",
+                fontSize: this.s(UI_DIMENSIONS.guide.content.bodySize),
+                color: THEME.colors.cyan
+              }
+            })
+          ]
+        })
+      ]
+    });
+  }
+  renderCloseButton() {
+    const closeSize = this.s(UI_DIMENSIONS.closeButton.size);
+    return ReactEcs2.createElement(UiEntity2, {
+      uiTransform: {
+        positionType: "absolute",
+        position: { top: -5, right: -5 },
+        width: closeSize,
+        height: closeSize,
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      uiBackground: { color: THEME.colors.panel },
+      onMouseDown: () => this.hide(),
+      children: [
+        ReactEcs2.createElement(UiEntity2, {
+          uiText: { value: "X", fontSize: this.s(UI_DIMENSIONS.closeButton.fontSize), color: THEME.colors.red }
+        })
+      ]
+    });
+  }
+};
+
+// src/ui/chat-ui.tsx
+import ReactEcs3, { UiEntity as UiEntity3, Label as Label3, Input as Input3, Button as Button2 } from "@dcl/sdk/react-ecs";
+import { Color4 as Color44 } from "@dcl/sdk/math";
+import { signedFetch } from "~system/SignedFetch";
+import { getPlayer } from "@dcl/sdk/players";
+import { openExternalUrl as openExternalUrl2 } from "~system/RestrictedActions";
+var FIREBASE_API_KEY = "AIzaSyCX5jViDWUSagUmAX7S4OXgXyJZ9shaC5Y";
+var POLL_INTERVAL_ACTIVE = 2500;
+var POLL_INTERVAL_PASSIVE = 2e4;
+var ChatUIModule = class {
+  constructor(client, config = {}) {
+    // Visibility state
+    this._isVisible = false;
+    this._unreadCount = 0;
+    // Authentication state
+    this.idToken = null;
+    this.isSigningIn = false;
+    this.isRegisteredUser = false;
+    this.currentUsername = "Guest";
+    this.currentUserId = "";
+    // Channel state
+    this.channels = [{ id: "global-community", name: "GLOBAL COMMUNITY" }];
+    this.currentChannelId = "global-community";
+    this.showChannelDropdown = false;
+    this.channelPage = 0;
+    // Message state
+    this.realMessages = [];
+    this.systemMessages = [];
+    this.inputText = "";
+    this.chatScrollOffset = 0;
+    // UI preferences
+    this.position = "right";
+    this.fontScale = 1;
+    // Timers
+    this.chatTimerId = null;
+    this.playerInfoTimerId = null;
+    this.isInitialized = false;
+    // =============================================================================
+    // --- UI RENDERING ---
+    // =============================================================================
+    /**
+     * Get the chat UI component for rendering
+     */
+    this.getComponent = () => {
+      if (!this._isVisible) return null;
+      const scaledTheme = scaleChatTheme(DEFAULT_CHAT_THEME, this.fontScale);
+      const positionStyle = this.getPositionStyle();
+      return ReactEcs3.createElement(UiEntity3, {
+        uiTransform: {
+          width: UI_DIMENSIONS.chat.width,
+          height: UI_DIMENSIONS.chat.height,
+          positionType: "absolute",
+          ...positionStyle,
+          flexDirection: "column",
+          border: { top: 2, bottom: 2, left: 2, right: 2 },
+          borderColor: THEME.colors.panelBorder
+        },
+        uiBackground: { color: THEME.colors.panel },
+        children: [
+          this.renderHeader(),
+          this.renderChannelButton(scaledTheme),
+          this.renderMessagesArea(scaledTheme),
+          ReactEcs3.createElement(UiEntity3, {
+            uiTransform: { width: "100%", height: 1, flexShrink: 0 },
+            uiBackground: { color: THEME.colors.panelBorder }
+          }),
+          this.renderUserInfoBar(scaledTheme),
+          this.renderInputArea(scaledTheme),
+          this.renderChannelDropdown(scaledTheme)
+        ]
+      });
+    };
+    this.client = client;
+    this.config = config;
+    this.position = config.position || "right";
+    this.fontScale = config.fontScale || 1;
+  }
+  /**
+   * Initialize the chat system
+   */
+  async init() {
+    if (this.isInitialized) return;
+    this.isInitialized = true;
+    this.generateBootSequence();
+    this.fetchPlayerInfo();
+    await this.fetchChannels();
+    this.performAuth();
+    this.startChatLoop();
+    this.client.log("ChatUI initialized");
+  }
+  /**
+   * Show the chat UI
+   */
+  show() {
+    this._isVisible = true;
+    this._unreadCount = 0;
+    this.chatScrollOffset = 0;
+    this.resetChatTimer();
+  }
+  /**
+   * Hide the chat UI
+   */
+  hide() {
+    this._isVisible = false;
+  }
+  /**
+   * Toggle chat visibility
+   */
+  toggle() {
+    if (this._isVisible) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  /**
+   * Check if chat is visible
+   */
+  get isVisible() {
+    return this._isVisible;
+  }
+  /**
+   * Get unread message count
+   */
+  get unreadCount() {
+    return this._unreadCount;
+  }
+  /**
+   * Get current channel ID
+   */
+  get currentChannel() {
+    return this.currentChannelId;
+  }
+  /**
+   * Switch to a different channel
+   */
+  setChannel(channelId) {
+    if (this.currentChannelId !== channelId) {
+      this.switchChannel(channelId);
+    }
+  }
+  /**
+   * Cleanup resources
+   */
+  destroy() {
+    if (this.chatTimerId !== null) {
+      dclClearTimeout(this.chatTimerId);
+      this.chatTimerId = null;
+    }
+    if (this.playerInfoTimerId !== null) {
+      dclClearTimeout(this.playerInfoTimerId);
+      this.playerInfoTimerId = null;
+    }
+  }
+  // =============================================================================
+  // --- INTERNAL API LOGIC ---
+  // =============================================================================
+  getBaseUrl() {
+    const config = this.client.getConfig();
+    const baseUrl = config.baseUrl || "https://thestatic.tv/api/v1/dcl";
+    return baseUrl.replace("/api/v1/dcl", "");
+  }
+  async performAuth() {
+    if (this.isSigningIn || this.idToken) return;
+    this.isSigningIn = true;
+    try {
+      const baseUrl = this.getBaseUrl();
+      const response = await signedFetch({
+        url: `${baseUrl}/api/auth/dcl`,
+        init: {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({})
+        }
+      });
+      if (!response.ok) throw new Error("Backend refused login");
+      const authData = JSON.parse(response.body);
+      if (authData.username) this.currentUsername = authData.username;
+      this.isRegisteredUser = !!authData.isRegistered;
+      const exchangeRes = await fetch(
+        `https://identitytoolkit.googleapis.com/v1/accounts:signInWithCustomToken?key=${FIREBASE_API_KEY}`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ token: authData.token, returnSecureToken: true })
+        }
+      );
+      const exchangeData = await exchangeRes.json();
+      if (exchangeData.idToken) {
+        this.idToken = exchangeData.idToken;
+        if (this.inputText && this.isRegisteredUser) {
+          this.handleSend();
+        }
+      }
+      this.client.log("Chat auth successful");
+    } catch (e) {
+      this.client.log(`Chat auth failed: ${e}`);
+    } finally {
+      this.isSigningIn = false;
+    }
+  }
+  async fetchChannels() {
+    try {
+      const baseChannels = [{ id: "global-community", name: "GLOBAL COMMUNITY" }];
+      const baseUrl = this.getBaseUrl();
+      const response = await fetch(`${baseUrl}/api/v1/guide`);
+      if (response.ok) {
+        const guideData = await response.json();
+        if (guideData.videoMap) {
+          const creatorChannels = [];
+          for (const [slug, video] of Object.entries(guideData.videoMap)) {
+            const v = video;
+            if ((v.type === "live" || v.isCreator === true) && slug !== "global-community") {
+              creatorChannels.push({
+                id: slug,
+                name: (v.name || v.creator_name || slug).toUpperCase()
+              });
+            }
+          }
+          creatorChannels.sort((a, b) => a.name.localeCompare(b.name));
+          this.channels = [...baseChannels, ...creatorChannels];
+        }
+      }
+    } catch (e) {
+      this.client.log(`Failed to fetch channels: ${e}`);
+    }
+  }
+  async fetchMessages() {
+    try {
+      const baseUrl = this.getBaseUrl();
+      const response = await fetch(`${baseUrl}/api/chat/history?channelId=${this.currentChannelId}`);
+      const data = await response.json();
+      if (data.messages) {
+        const twentyFourHoursAgo = Date.now() - 24 * 60 * 60 * 1e3;
+        const recentMsgs = data.messages.filter(
+          (m) => this.parseServerTime(m.createdAt) > twentyFourHoursAgo
+        );
+        const sortedMsgs = [...recentMsgs].sort(
+          (a, b) => this.parseServerTime(a.createdAt) - this.parseServerTime(b.createdAt)
+        );
+        const lastOldMsg = this.realMessages[this.realMessages.length - 1];
+        if (!this._isVisible && sortedMsgs.length > 0) {
+          if (lastOldMsg) {
+            const lastOldTime = this.parseServerTime(lastOldMsg.createdAt);
+            const newMsgsCount = sortedMsgs.filter(
+              (m) => this.parseServerTime(m.createdAt) > lastOldTime
+            ).length;
+            this._unreadCount += newMsgsCount;
+          } else {
+            this._unreadCount = sortedMsgs.length;
+          }
+        }
+        const lastNewMsg = sortedMsgs[sortedMsgs.length - 1];
+        if (lastNewMsg && lastOldMsg && lastNewMsg.id !== lastOldMsg.id) {
+          this.chatScrollOffset = 0;
+        }
+        this.realMessages = sortedMsgs;
+      }
+    } catch (e) {
+    }
+  }
+  async handleSend() {
+    if (!this.inputText.trim()) return;
+    if (!this.idToken) {
+      await this.performAuth();
+      return;
+    }
+    if (!this.isRegisteredUser) return;
+    const message = this.inputText.trim();
+    this.inputText = "";
+    try {
+      const baseUrl = this.getBaseUrl();
+      const response = await signedFetch({
+        url: `${baseUrl}/api/chat/send`,
+        init: {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${this.idToken}`
+          },
+          body: JSON.stringify({ channelId: this.currentChannelId, text: message })
+        }
+      });
+      if (response.ok) {
+        await this.fetchMessages();
+        this.resetChatTimer();
+      } else if (response.status === 401) {
+        this.idToken = null;
+        this.performAuth();
+      }
+    } catch (e) {
+      this.client.log(`Failed to send message: ${e}`);
+    }
+  }
+  generateBootSequence() {
+    const now = (/* @__PURE__ */ new Date()).toISOString();
+    this.systemMessages = [
+      { id: "sys-1", username: "SYSTEM", text: "ESTABLISHING SECURE CONNECTION...", uid: "system", createdAt: now, isSystem: true },
+      { id: "sys-2", username: "SYSTEM", text: "ENCRYPTION KEYS EXCHANGED.", uid: "system", createdAt: now, isSystem: true },
+      { id: "sys-3", username: "SYSTEM", text: `CONNECTED TO: ${this.currentChannelId.toUpperCase()}`, uid: "system", createdAt: now, isSystem: true }
+    ];
+  }
+  async fetchPlayerInfo() {
+    if (this.currentUserId) return;
+    try {
+      const player = await getPlayer();
+      if (player && player.userId) {
+        this.currentUserId = player.userId;
+        if (this.currentUsername === "Guest") {
+          this.currentUsername = player.name;
+        }
+      }
+    } catch (e) {
+    }
+  }
+  switchChannel(channelId) {
+    this.currentChannelId = channelId;
+    this.realMessages = [];
+    this.showChannelDropdown = false;
+    this.chatScrollOffset = 0;
+    this.channelPage = 0;
+    this.generateBootSequence();
+    this.resetChatTimer();
+  }
+  startChatLoop() {
+    this.chatLoop();
+  }
+  chatLoop() {
+    const startTime = Date.now();
+    this.fetchMessages().finally(() => {
+      const duration = Date.now() - startTime;
+      const targetInterval = this._isVisible ? POLL_INTERVAL_ACTIVE : POLL_INTERVAL_PASSIVE;
+      const nextDelay = Math.max(0, targetInterval - duration);
+      if (this.chatTimerId !== null) {
+        dclClearTimeout(this.chatTimerId);
+      }
+      this.chatTimerId = dclSetTimeout(() => this.chatLoop(), nextDelay);
+    });
+  }
+  resetChatTimer() {
+    if (this.chatTimerId !== null) {
+      dclClearTimeout(this.chatTimerId);
+    }
+    this.chatLoop();
+  }
+  // =============================================================================
+  // --- UTILITIES ---
+  // =============================================================================
+  parseServerTime(input) {
+    if (!input) return 0;
+    if (typeof input === "number") return input;
+    if (typeof input === "string") {
+      const d = new Date(input);
+      if (!isNaN(d.getTime())) return d.getTime();
+    }
+    return 0;
+  }
+  formatTime(isoString) {
+    const ms = this.parseServerTime(isoString);
+    if (ms === 0) return "";
+    try {
+      const date = new Date(ms);
+      return `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
+    } catch (e) {
+      return "";
+    }
+  }
+  getPositionStyle() {
+    const base = { bottom: UI_DIMENSIONS.chat.bottom };
+    switch (this.position) {
+      case "left":
+        return { ...base, left: 20 };
+      case "center":
+        return { ...base, left: 400 };
+      // Approximate center
+      case "right":
+      default:
+        return { ...base, right: UI_DIMENSIONS.chat.right };
+    }
+  }
+  renderHeader() {
+    return PanelHeader({
+      title: "LIVE CHAT",
+      fontSize: 14,
+      fontScale: this.fontScale,
+      showPositionControls: true,
+      position: this.position,
+      onPositionChange: (pos) => {
+        this.position = pos;
+      },
+      showFontControls: true,
+      onFontScaleUp: () => {
+        this.fontScale = Math.min(1.4, this.fontScale + 0.1);
+      },
+      onFontScaleDown: () => {
+        this.fontScale = Math.max(0.7, this.fontScale - 0.1);
+      },
+      onClose: () => this.hide()
+    });
+  }
+  renderChannelButton(theme) {
+    const currentChannel = this.channels.find((c) => c.id === this.currentChannelId);
+    const displayName = currentChannel?.name || this.currentChannelId;
+    return ReactEcs3.createElement(UiEntity3, {
+      uiTransform: {
+        height: 40,
+        width: "100%",
+        padding: { left: 15, right: 15 },
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexShrink: 0
+      },
+      uiBackground: { color: THEME.colors.inputBackground },
+      onMouseDown: () => {
+        this.showChannelDropdown = !this.showChannelDropdown;
+      },
+      children: [
+        ReactEcs3.createElement(Label3, {
+          value: `// ${truncateText(displayName, 24)}`,
+          fontSize: theme.channelButton,
+          color: THEME.colors.white
+        }),
+        ReactEcs3.createElement(Label3, {
+          value: this.showChannelDropdown ? "\u25B2" : "\u25BC",
+          fontSize: 10,
+          color: THEME.colors.cyan
+        })
+      ]
+    });
+  }
+  renderMessagesArea(theme) {
+    const allMessages = [...this.systemMessages, ...this.realMessages];
+    const totalMessages = allMessages.length;
+    const maxOffset = Math.max(0, totalMessages - UI_DIMENSIONS.chat.messagesPerPage);
+    if (this.chatScrollOffset > maxOffset) this.chatScrollOffset = maxOffset;
+    if (this.chatScrollOffset < 0) this.chatScrollOffset = 0;
+    const startIdx = Math.max(0, totalMessages - UI_DIMENSIONS.chat.messagesPerPage - this.chatScrollOffset);
+    const endIdx = totalMessages - this.chatScrollOffset;
+    const visibleMessages = allMessages.slice(startIdx, endIdx);
+    const canScrollUp = this.chatScrollOffset < maxOffset;
+    const canScrollDown = this.chatScrollOffset > 0;
+    return ReactEcs3.createElement(UiEntity3, {
+      uiTransform: { flexGrow: 1, width: "100%", flexDirection: "row", overflow: "hidden" },
+      children: [
+        // Messages
+        ReactEcs3.createElement(UiEntity3, {
+          uiTransform: {
+            flexGrow: 1,
+            flexDirection: "column",
+            padding: { left: 12, right: 8, top: 8, bottom: 8 },
+            overflow: "hidden"
+          },
+          children: visibleMessages.map(
+            (msg) => msg.isSystem ? this.renderSystemMessage(msg, theme) : this.renderChatMessage(msg, theme)
+          )
+        }),
+        // Scroll controls
+        ReactEcs3.createElement(UiEntity3, {
+          uiTransform: {
+            width: 28,
+            height: "100%",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: 8
+          },
+          children: [
+            ReactEcs3.createElement(UiEntity3, {
+              uiTransform: { width: 26, height: 36, justifyContent: "center", alignItems: "center" },
+              uiBackground: { color: canScrollUp ? THEME.colors.buttonBackground : Color44.create(0.1, 0.1, 0.1, 0.3) },
+              onMouseDown: () => {
+                if (canScrollUp) this.chatScrollOffset += 1;
+              },
+              children: [
+                ReactEcs3.createElement(UiEntity3, {
+                  uiText: { value: "\u25B2", fontSize: 14, color: canScrollUp ? THEME.colors.cyan : THEME.colors.gray }
+                })
+              ]
+            }),
+            ReactEcs3.createElement(UiEntity3, {
+              uiTransform: { width: 26, height: 24, justifyContent: "center", alignItems: "center" },
+              children: [
+                ReactEcs3.createElement(UiEntity3, {
+                  uiText: {
+                    value: totalMessages > UI_DIMENSIONS.chat.messagesPerPage ? `${this.chatScrollOffset}` : "-",
+                    fontSize: 10,
+                    color: THEME.colors.gray
+                  }
+                })
+              ]
+            }),
+            ReactEcs3.createElement(UiEntity3, {
+              uiTransform: { width: 26, height: 36, justifyContent: "center", alignItems: "center" },
+              uiBackground: { color: canScrollDown ? THEME.colors.buttonBackground : Color44.create(0.1, 0.1, 0.1, 0.3) },
+              onMouseDown: () => {
+                if (canScrollDown) this.chatScrollOffset -= 1;
+              },
+              children: [
+                ReactEcs3.createElement(UiEntity3, {
+                  uiText: { value: "\u25BC", fontSize: 14, color: canScrollDown ? THEME.colors.cyan : THEME.colors.gray }
+                })
+              ]
+            })
+          ]
+        })
+      ]
+    });
+  }
+  renderSystemMessage(msg, theme) {
+    return ReactEcs3.createElement(UiEntity3, {
+      key: msg.id,
+      uiTransform: { width: "100%", height: 24, marginBottom: 4 },
+      uiText: { value: msg.text, fontSize: theme.systemMessage, color: THEME.colors.green, textAlign: "middle-left" }
+    });
+  }
+  renderChatMessage(msg, theme) {
+    const time = this.formatTime(msg.createdAt);
+    let displayName = msg.username || "Anonymous";
+    const isCurrentUser = this.currentUserId && msg.uid === this.currentUserId || msg.username === this.currentUserId;
+    if (isCurrentUser) displayName = this.currentUsername;
+    let accentColor = THEME.colors.cyan;
+    if (displayName.toLowerCase().includes("admin")) accentColor = THEME.colors.magenta;
+    else if (isCurrentUser) accentColor = THEME.colors.green;
+    return ReactEcs3.createElement(UiEntity3, {
+      key: msg.id,
+      uiTransform: { width: "100%", flexDirection: "column", marginBottom: 16 },
+      children: [
+        // Header row
+        ReactEcs3.createElement(UiEntity3, {
+          uiTransform: {
+            width: "100%",
+            height: 24,
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: 4
+          },
+          children: [
+            ReactEcs3.createElement(UiEntity3, {
+              uiText: { value: displayName, fontSize: theme.chatUsername, color: accentColor, textAlign: "middle-left" }
+            }),
+            ReactEcs3.createElement(UiEntity3, {
+              uiText: { value: time, fontSize: theme.chatTimestamp, color: THEME.colors.gray, textAlign: "middle-right" }
+            })
+          ]
+        }),
+        // Message content
+        ReactEcs3.createElement(UiEntity3, {
+          uiTransform: { width: "100%", flexDirection: "row", alignItems: "stretch", paddingLeft: 8 },
+          children: [
+            ReactEcs3.createElement(UiEntity3, {
+              uiTransform: { width: 3, minHeight: 28 },
+              uiBackground: { color: accentColor }
+            }),
+            ReactEcs3.createElement(UiEntity3, {
+              uiTransform: { flexGrow: 1, paddingLeft: 12, paddingTop: 4, paddingBottom: 4 },
+              uiText: {
+                value: msg.text,
+                fontSize: theme.chatMessage,
+                color: THEME.colors.white,
+                textWrap: "wrap",
+                textAlign: "middle-left"
+              }
+            })
+          ]
+        })
+      ]
+    });
+  }
+  renderUserInfoBar(theme) {
+    return ReactEcs3.createElement(UiEntity3, {
+      uiTransform: {
+        width: "100%",
+        height: 34,
+        flexShrink: 0,
+        padding: { left: 15, right: 15 },
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center"
+      },
+      uiBackground: { color: Color44.create(0.03, 0.03, 0.05, 1) },
+      children: [
+        ReactEcs3.createElement(Label3, {
+          value: `// ${this.currentUsername || "Guest"}`,
+          fontSize: theme.userInfo,
+          color: THEME.colors.yellow
+        }),
+        ReactEcs3.createElement(Label3, {
+          value: this.isRegisteredUser ? "\u25CF CITIZEN" : "\u25CB GUEST",
+          fontSize: theme.authStatus,
+          color: this.isRegisteredUser ? THEME.colors.green : THEME.colors.gray
+        })
+      ]
+    });
+  }
+  renderInputArea(theme) {
+    const baseUrl = this.getBaseUrl();
+    if (!this.isRegisteredUser) {
+      return ReactEcs3.createElement(UiEntity3, {
+        uiTransform: {
+          height: 75,
+          minHeight: 75,
+          flexShrink: 0,
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          padding: 5,
+          borderColor: THEME.colors.panelBorder,
+          border: { top: 1 }
+        },
+        uiBackground: { color: Color44.create(0.08, 0.08, 0.1, 1) },
+        children: [
+          ReactEcs3.createElement(Label3, {
+            value: "ACCESS RESTRICTED: CITIZENS ONLY",
+            fontSize: 12,
+            color: THEME.colors.red,
+            textAlign: "middle-center",
+            uiTransform: { marginBottom: 5 }
+          }),
+          ReactEcs3.createElement(Button2, {
+            value: "REGISTER IDENTITY",
+            fontSize: 14,
+            uiTransform: { width: 200, height: 30 },
+            uiBackground: { color: THEME.colors.cyan },
+            color: Color44.Black(),
+            onMouseDown: () => {
+              openExternalUrl2({ url: `${baseUrl}/apply` });
+            }
+          })
+        ]
+      });
+    }
+    return ReactEcs3.createElement(UiEntity3, {
+      uiTransform: {
+        height: 75,
+        minHeight: 75,
+        flexShrink: 0,
+        flexDirection: "row",
+        padding: 15,
+        borderColor: THEME.colors.panelBorder,
+        border: { top: 1 }
+      },
+      uiBackground: { color: Color44.create(0.08, 0.08, 0.1, 1) },
+      children: [
+        ReactEcs3.createElement(Input3, {
+          onChange: (v) => {
+            this.inputText = v;
+          },
+          onSubmit: () => this.handleSend(),
+          value: this.inputText,
+          placeholder: "Transmit message...",
+          fontSize: theme.input,
+          placeholderColor: THEME.colors.grayText,
+          color: THEME.colors.white,
+          uiBackground: { color: Color44.create(0.12, 0.12, 0.14, 1) },
+          uiTransform: { flexGrow: 1, height: "100%", margin: { right: 10 } }
+        }),
+        ReactEcs3.createElement(Button2, {
+          value: this.isSigningIn ? "..." : "SEND",
+          onMouseDown: () => this.handleSend(),
+          uiTransform: { width: 80, height: "100%" },
+          fontSize: theme.sendButton,
+          uiBackground: { color: THEME.colors.cyan },
+          color: Color44.Black()
+        })
+      ]
+    });
+  }
+  renderChannelDropdown(theme) {
+    if (!this.showChannelDropdown) return null;
+    const startIdx = this.channelPage * UI_DIMENSIONS.chat.channelsPerPage;
+    const endIdx = startIdx + UI_DIMENSIONS.chat.channelsPerPage;
+    const visibleChannels = this.channels.slice(startIdx, endIdx);
+    const totalPages = Math.ceil(this.channels.length / UI_DIMENSIONS.chat.channelsPerPage);
+    return ReactEcs3.createElement(UiEntity3, {
+      uiTransform: {
+        width: "100%",
+        height: 260,
+        flexDirection: "column",
+        positionType: "absolute",
+        position: { top: 95, left: 0 }
+      },
+      uiBackground: { color: Color44.create(0.08, 0.1, 0.14, 1) },
+      children: [
+        // Top border
+        ReactEcs3.createElement(UiEntity3, {
+          uiTransform: { width: "100%", height: 2, flexShrink: 0 },
+          uiBackground: { color: THEME.colors.cyan }
+        }),
+        // Channel list
+        ...visibleChannels.map(
+          (channel) => ReactEcs3.createElement(UiEntity3, {
+            key: channel.id,
+            uiTransform: {
+              height: 38,
+              width: "100%",
+              padding: { left: 15, right: 15 },
+              alignItems: "center"
+            },
+            uiBackground: {
+              color: channel.id === this.currentChannelId ? Color44.create(0, 0.8, 0.8, 0.25) : Color44.create(0.08, 0.1, 0.14, 1)
+            },
+            onMouseDown: () => this.switchChannel(channel.id),
+            children: [
+              ReactEcs3.createElement(Label3, {
+                value: channel.id === this.currentChannelId ? `\u25B8 ${channel.name}` : channel.name,
+                fontSize: theme.channelDropdown,
+                color: channel.id === this.currentChannelId ? THEME.colors.cyan : THEME.colors.gray
+              })
+            ]
+          })
+        ),
+        // Pagination
+        ...totalPages > 1 ? [
+          ReactEcs3.createElement(UiEntity3, {
+            key: "pagination",
+            uiTransform: {
+              width: "100%",
+              height: 30,
+              flexDirection: "row",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: 10,
+              marginTop: 5
+            },
+            children: [
+              ...this.channelPage > 0 ? [
+                ReactEcs3.createElement(UiEntity3, {
+                  key: "prev",
+                  onMouseDown: () => this.channelPage--,
+                  children: [
+                    ReactEcs3.createElement(Label3, {
+                      value: "<< PREV",
+                      fontSize: 10,
+                      color: THEME.colors.cyan
+                    })
+                  ]
+                })
+              ] : [],
+              ReactEcs3.createElement(Label3, {
+                value: `${this.channelPage + 1}/${totalPages}`,
+                fontSize: 10,
+                color: THEME.colors.gray
+              }),
+              ...this.channelPage < totalPages - 1 ? [
+                ReactEcs3.createElement(UiEntity3, {
+                  key: "next",
+                  onMouseDown: () => this.channelPage++,
+                  children: [
+                    ReactEcs3.createElement(Label3, {
+                      value: "NEXT >>",
+                      fontSize: 10,
+                      color: THEME.colors.cyan
+                    })
+                  ]
+                })
+              ] : []
+            ]
+          })
+        ] : [],
+        // Bottom border
+        ReactEcs3.createElement(UiEntity3, {
+          uiTransform: { width: "100%", height: 1, flexShrink: 0 },
+          uiBackground: { color: THEME.colors.panelBorder }
+        })
+      ]
+    });
+  }
+};
+
 // src/StaticTVClient.ts
 var DEFAULT_BASE_URL = "https://thestatic.tv/api/v1/dcl";
 var KEY_TYPE_CHANNEL = "channel";
@@ -518,10 +2104,14 @@ var StaticTVClient = class {
       this.guide = new GuideModule(this);
       this.heartbeat = new HeartbeatModule(this);
       this.interactions = new InteractionsModule(this);
+      this.guideUI = new GuideUIModule(this, config.guideUI);
+      this.chatUI = new ChatUIModule(this, config.chatUI);
     } else {
       this.guide = null;
       this.heartbeat = null;
       this.interactions = null;
+      this.guideUI = null;
+      this.chatUI = null;
     }
     if (this.config.autoStartSession) {
       fetchUserData().then(() => {
@@ -587,12 +2177,17 @@ var StaticTVClient = class {
     if (this.heartbeat) {
       this.heartbeat.stopWatching();
     }
+    if (this.chatUI) {
+      this.chatUI.destroy();
+    }
     await this.session.endSession();
     this.log("StaticTVClient destroyed");
   }
 };
 export {
+  ChatUIModule,
   GuideModule,
+  GuideUIModule,
   HeartbeatModule,
   InteractionsModule,
   KEY_TYPE_CHANNEL,