@thestatic-tv/dcl-sdk 2.2.10 → 2.3.0-beta.0

package/dist/index.mjs

@@ -96,8 +96,8 @@ function getPlayerWallet() {
     return cachedWallet;
   }
   try {
-    const { getPlayer: getPlayer2 } = __require("@dcl/sdk/players");
-    const player = getPlayer2();
+    const { getPlayer: getPlayer3 } = __require("@dcl/sdk/players");
+    const player = getPlayer3();
     return player?.userId ?? null;
   } catch {
     return null;
@@ -108,8 +108,8 @@ function getPlayerDisplayName() {
     return cachedDisplayName;
   }
   try {
-    const { getPlayer: getPlayer2 } = __require("@dcl/sdk/players");
-    const player = getPlayer2();
+    const { getPlayer: getPlayer3 } = __require("@dcl/sdk/players");
+    const player = getPlayer3();
     return player?.name ?? null;
   } catch {
     return null;
@@ -132,7 +132,7 @@ function ensureTimerSystem() {
         try {
           timer.callback();
         } catch (e) {
-          console.error("[StaticTV Timer] Callback error:", e);
+          console.error("[TheStatic] Timer error");
         }
       }
     }
@@ -173,7 +173,7 @@ function ensureTimeoutSystem() {
         try {
           timeout.callback();
         } catch (e) {
-          console.error("[StaticTV Timer] Timeout callback error:", e);
+          console.error("[TheStatic] Timeout error");
         }
       }
     }
@@ -204,20 +204,41 @@ function dclClearTimeout(timeoutId) {
 }
 
 // src/modules/session.ts
+function normalizeTier(tier) {
+  if (tier === "lite") return "free";
+  if (tier === "full") return "standard";
+  if (tier === "free" || tier === "standard" || tier === "pro") return tier;
+  return "free";
+}
 var SessionModule = class {
   constructor(client) {
     this.sessionId = null;
+    this._keyId = null;
     this.heartbeatTimerId = null;
     this.isActive = false;
-    this._sdkType = "lite";
+    this._tier = "free";
     this.client = client;
   }
   /**
-   * Get the SDK type returned by the server
-   * Determines what features are available (lite = sessions only, full = guide + chat + more)
+   * Get the API key ID (used as default sceneId for Pro users)
+   */
+  get keyId() {
+    return this._keyId;
+  }
+  /**
+   * Get the SDK tier returned by the server
+   * - free: Session tracking only
+   * - standard: Guide, Chat, Heartbeat, Interactions
+   * - pro: Everything + Admin Panel
+   */
+  get tier() {
+    return this._tier;
+  }
+  /**
+   * @deprecated Use `tier` instead. Returns mapped value for compatibility.
    */
   get sdkType() {
-    return this._sdkType;
+    return this._tier === "free" ? "lite" : "full";
   }
   /**
    * Get the appropriate session endpoint based on key type
@@ -264,13 +285,12 @@ var SessionModule = class {
       });
       if (response.success && response.sessionId) {
         this.sessionId = response.sessionId;
+        this._keyId = response.keyId || null;
         this.isActive = true;
-        this._sdkType = response.sdkType || "lite";
+        this._tier = normalizeTier(response.sdkType);
         this.startHeartbeat();
-        this.client.log(`Session started: ${this.sessionId}, sdkType: ${this._sdkType}`);
-        if (this._sdkType === "full") {
-          this.client._enableFullFeatures();
-        }
+        this.client.log(`Session started: ${this.sessionId}, tier: ${this._tier}`);
+        this.client._enableFeaturesForTier(this._tier, this._keyId);
         return this.sessionId;
       }
       return null;
@@ -558,7 +578,8 @@ var UI_DIMENSIONS = {
   // Guide UI - positioned to the left of chat (chat is 380px wide at right:20)
   guide: {
     width: 900,
-    height: "55%",
+    height: 580,
+    // Numeric value for scaling (matches chat/admin)
     bottom: 55,
     right: 410,
     // 20 + 380 (chat width) + 10 (gap)
@@ -577,15 +598,33 @@ var UI_DIMENSIONS = {
       padding: 15
     }
   },
-  // Chat UI - match m1d-hq-lifted dimensions
+  // Chat UI - positioned at right side
   chat: {
     width: 380,
     height: 580,
     bottom: 55,
     right: 20,
+    headerHeight: 40,
     messagesPerPage: 5,
     channelsPerPage: 6
   },
+  // Admin Panel - positioned left of chat
+  admin: {
+    width: 400,
+    height: 580,
+    // Match chat height
+    maxHeight: 700,
+    bottom: 55,
+    right: 410,
+    // 20 + 380 (chat width) + 10 (gap)
+    headerHeight: 48,
+    tabHeight: 40,
+    footerHeight: 32,
+    sectionHeadHeight: 28,
+    buttonHeight: 36,
+    buttonHeightSmall: 30,
+    inputHeight: 36
+  },
   // Shared
   closeButton: {
     size: 40,
@@ -593,18 +632,18 @@ var UI_DIMENSIONS = {
   }
 };
 var DEFAULT_CHAT_THEME = {
-  header: 22,
+  header: 16,
   channelButton: 14,
   channelDropdown: 14,
-  systemMessage: 14,
-  chatUsername: 16,
+  systemMessage: 13,
+  chatUsername: 14,
   chatTimestamp: 11,
-  chatMessage: 16,
-  input: 16,
+  chatMessage: 14,
+  input: 14,
   sendButton: 14,
-  userInfo: 14,
+  userInfo: 13,
   authStatus: 12,
-  notification: 18,
+  notification: 16,
   closeButton: 16
 };
 function scaleChatTheme(theme, fontScale) {
@@ -624,6 +663,30 @@ function scaleChatTheme(theme, fontScale) {
     closeButton: Math.round(theme.closeButton * fontScale)
   };
 }
+var DEFAULT_ADMIN_THEME = {
+  header: 16,
+  tabButton: 14,
+  sectionHead: 13,
+  label: 13,
+  labelSmall: 11,
+  button: 13,
+  buttonSmall: 11,
+  input: 13,
+  status: 12
+};
+function scaleAdminTheme(theme, fontScale) {
+  return {
+    header: Math.round(theme.header * fontScale),
+    tabButton: Math.round(theme.tabButton * fontScale),
+    sectionHead: Math.round(theme.sectionHead * fontScale),
+    label: Math.round(theme.label * fontScale),
+    labelSmall: Math.round(theme.labelSmall * fontScale),
+    button: Math.round(theme.button * fontScale),
+    buttonSmall: Math.round(theme.buttonSmall * fontScale),
+    input: Math.round(theme.input * fontScale),
+    status: Math.round(theme.status * fontScale)
+  };
+}
 
 // src/ui/components.tsx
 import ReactEcs, { UiEntity, Label, Input } from "@dcl/sdk/react-ecs";
@@ -679,21 +742,21 @@ var PanelHeader = (props) => {
             }),
             ReactEcs.createElement(UiEntity, { key: "pos-spacer", uiTransform: { width: 6 } })
           ] : [],
-          // Font controls
+          // Font controls (with visual disabled state at limits)
           ...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 } })]
+              uiBackground: { color: props.fontScaleAtMin ? Color42.create(0.1, 0.1, 0.1, 0.3) : THEME.colors.buttonBackground },
+              onMouseDown: () => !props.fontScaleAtMin && props.onFontScaleDown?.(),
+              children: [ReactEcs.createElement(UiEntity, { uiText: { value: "\u2212", fontSize: 14, color: props.fontScaleAtMin ? THEME.colors.gray : 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 } })]
+              uiBackground: { color: props.fontScaleAtMax ? Color42.create(0.1, 0.1, 0.1, 0.3) : THEME.colors.buttonBackground },
+              onMouseDown: () => !props.fontScaleAtMax && props.onFontScaleUp?.(),
+              children: [ReactEcs.createElement(UiEntity, { uiText: { value: "+", fontSize: 14, color: props.fontScaleAtMax ? THEME.colors.gray : THEME.colors.cyan } })]
             }),
             ReactEcs.createElement(UiEntity, { key: "font-spacer", uiTransform: { width: 6 } })
           ] : [],
@@ -731,7 +794,6 @@ var GuideUIModule = class {
     this.currentPage = 0;
     this.itemsPerPage = 6;
     this.searchQuery = "";
-    this.uiScale = 1;
     // Current video tracking (for "PLAYING" indicator)
     this._currentVideoId = null;
     // =============================================================================
@@ -739,34 +801,46 @@ var GuideUIModule = class {
     // =============================================================================
     /**
      * Get the guide UI component for rendering
-     * Returns toggle button when hidden, full panel when visible
+     * Always renders toggle button, plus panel when visible
      */
     this.getComponent = () => {
-      if (!this._isVisible) {
-        return this.renderToggleButton();
-      }
-      const windowW = this.s(UI_DIMENSIONS.guide.width);
+      const windowW = UI_DIMENSIONS.guide.width;
+      const windowH = UI_DIMENSIONS.guide.height;
       return ReactEcs2.createElement(UiEntity2, {
+        key: `guide-root-${this.client.uiScale}`,
         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
+          width: "100%",
+          height: "100%",
+          positionType: "absolute"
         },
-        uiBackground: { color: THEME.colors.panel },
         children: [
-          this.renderLeftPanel(),
-          this.renderRightPanel(),
-          this.renderCloseButton()
+          // Always render toggle button
+          this.renderToggleButton(),
+          // Render panel when visible - Guide positioned relative to Chat's scaled width
+          // Guide.right = Chat.right + Chat.scaledWidth + gap (10px)
+          this._isVisible ? ReactEcs2.createElement(UiEntity2, {
+            key: `guide-panel-${this.client.uiScale}`,
+            uiTransform: {
+              width: windowW,
+              height: windowH,
+              positionType: "absolute",
+              position: { bottom: UI_DIMENSIONS.guide.bottom, right: UI_DIMENSIONS.chat.right + this.s(UI_DIMENSIONS.chat.width) + 10 },
+              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()
+            ]
+          }) : null
         ]
       });
     };
     this.client = client;
     this.config = config;
-    this.uiScale = config.uiScale || 1;
     this._currentVideoId = config.currentVideoId || null;
   }
   /**
@@ -780,6 +854,8 @@ var GuideUIModule = class {
    * Show the guide UI
    */
   show() {
+    if (this._isVisible) return;
+    this.client.closeOtherPanels("guide");
     this._isVisible = true;
     this.fetchGuideData().catch(() => {
     });
@@ -915,7 +991,7 @@ var GuideUIModule = class {
   // --- UTILITIES ---
   // =============================================================================
   s(value) {
-    return Math.round(value * this.uiScale);
+    return Math.round(value * this.client.uiScale);
   }
   handleVideoSelect(video) {
     if (this.config.onVideoSelect) {
@@ -951,15 +1027,26 @@ var GuideUIModule = class {
         ReactEcs2.createElement(UiEntity2, {
           uiTransform: { width: "100%", flexDirection: "column", padding: 10 },
           children: [
-            // Title
+            // Title row
             ReactEcs2.createElement(UiEntity2, {
-              uiText: {
-                value: "THE STATIC TV",
-                fontSize: this.s(UI_DIMENSIONS.guide.sidebar.headerSize),
-                color: THEME.colors.cyan,
-                textAlign: "middle-center"
+              uiTransform: {
+                width: "100%",
+                height: this.s(40),
+                marginBottom: 10,
+                flexDirection: "row",
+                alignItems: "center"
               },
-              uiTransform: { height: this.s(40), marginBottom: 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-left"
+                  }
+                })
+              ]
             }),
             // Random Signal button
             ReactEcs2.createElement(UiEntity2, {
@@ -1309,23 +1396,25 @@ var GuideUIModule = class {
     });
   }
   renderToggleButton() {
+    const buttonText = this._isVisible ? "CLOSE" : "GUIDE";
+    const buttonColor = this._isVisible ? Color43.create(0.2, 0.2, 0.28, 0.9) : Color43.create(0, 0.5, 0.5, 0.9);
+    const buttonPos = 20 + this.s(100) + 10 + this.s(100) + 10;
     return ReactEcs2.createElement(UiEntity2, {
       uiTransform: {
         positionType: "absolute",
-        position: { right: 130, bottom: 10 },
-        // To the left of CHAT button
+        position: { right: buttonPos, bottom: 10 },
         width: this.s(100),
         height: this.s(45),
         justifyContent: "center",
         alignItems: "center"
       },
-      uiBackground: { color: Color43.create(0, 0.5, 0.5, 0.9) },
-      onMouseDown: () => this.show(),
+      uiBackground: { color: buttonColor },
+      onMouseDown: () => this._isVisible ? this.hide() : this.show(),
       children: [
         ReactEcs2.createElement(UiEntity2, {
           uiText: {
-            value: "GUIDE",
-            fontSize: this.s(16),
+            value: buttonText,
+            fontSize: this.s(14),
             color: THEME.colors.white,
             textAlign: "middle-center"
           }
@@ -1367,7 +1456,6 @@ var ChatUIModule = class {
     this.chatScrollOffset = 0;
     // UI preferences
     this.position = "right";
-    this.fontScale = 1;
     // Timers
     this.chatTimerId = null;
     this.playerInfoTimerId = null;
@@ -1377,43 +1465,52 @@ var ChatUIModule = class {
     // =============================================================================
     /**
      * Get the chat UI component for rendering
-     * Returns toggle button when hidden, full panel when visible
+     * Always renders toggle button, plus panel when visible
      */
     this.getComponent = () => {
-      if (!this._isVisible) {
-        return this.renderToggleButton();
-      }
-      const scaledTheme = scaleChatTheme(DEFAULT_CHAT_THEME, this.fontScale);
+      const scaledTheme = scaleChatTheme(DEFAULT_CHAT_THEME, this.client.uiScale);
       const positionStyle = this.getPositionStyle();
       return ReactEcs3.createElement(UiEntity3, {
         uiTransform: {
-          width: UI_DIMENSIONS.chat.width,
-          height: UI_DIMENSIONS.chat.height,
-          positionType: "absolute",
-          position: positionStyle,
-          // Must be nested object, not spread!
-          flexDirection: "column",
-          border: { top: 2, bottom: 2, left: 2, right: 2 },
-          borderColor: THEME.colors.panelBorder
+          width: "100%",
+          height: "100%",
+          positionType: "absolute"
         },
-        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)
+          // Always render toggle button
+          this.renderToggleButton(),
+          // Render panel when visible - scaled sizes, fixed position
+          // Key includes uiScale to force re-render when scale changes from other panels
+          this._isVisible ? ReactEcs3.createElement(UiEntity3, {
+            key: `chat-panel-${this.client.uiScale}`,
+            uiTransform: {
+              width: this.s(UI_DIMENSIONS.chat.width),
+              height: this.s(UI_DIMENSIONS.chat.height),
+              positionType: "absolute",
+              position: { bottom: UI_DIMENSIONS.chat.bottom, right: UI_DIMENSIONS.chat.right },
+              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)
+            ]
+          }) : null
         ]
       });
     };
     this.client = client;
     this.config = config;
-    this.fontScale = config.fontScale || 1;
   }
   /**
    * Initialize the chat system
@@ -1432,6 +1529,7 @@ var ChatUIModule = class {
    * Show the chat UI
    */
   show() {
+    if (this._isVisible) return;
     this._isVisible = true;
     this._unreadCount = 0;
     this.chatScrollOffset = 0;
@@ -1693,6 +1791,10 @@ var ChatUIModule = class {
       const d = new Date(input);
       if (!isNaN(d.getTime())) return d.getTime();
     }
+    if (input instanceof Date) return input.getTime();
+    if (typeof input === "object" && "seconds" in input) {
+      return input.seconds * 1e3;
+    }
     return 0;
   }
   formatTime(isoString) {
@@ -1705,6 +1807,10 @@ var ChatUIModule = class {
       return "";
     }
   }
+  /** Scale a dimension by shared uiScale */
+  s(value) {
+    return Math.round(value * this.client.uiScale);
+  }
   getPositionStyle() {
     return { bottom: 55, right: 20 };
   }
@@ -1712,15 +1818,9 @@ var ChatUIModule = class {
     return PanelHeader({
       title: "LIVE CHAT",
       fontSize: 14,
-      fontScale: this.fontScale,
+      fontScale: 1,
       showPositionControls: false,
-      showFontControls: true,
-      onFontScaleUp: () => {
-        this.fontScale = Math.min(1.4, this.fontScale + 0.1);
-      },
-      onFontScaleDown: () => {
-        this.fontScale = Math.max(0.7, this.fontScale - 0.1);
-      },
+      showFontControls: false,
       onClose: () => this.hide()
     });
   }
@@ -2095,23 +2195,24 @@ var ChatUIModule = class {
   }
   renderToggleButton() {
     const unreadBadge = this._unreadCount > 0 ? ` (${this._unreadCount})` : "";
+    const buttonText = this._isVisible ? "CLOSE" : `CHAT${unreadBadge}`;
+    const buttonColor = this._isVisible ? Color44.create(0.2, 0.2, 0.28, 0.9) : Color44.create(0.6, 0, 0.5, 0.9);
     return ReactEcs3.createElement(UiEntity3, {
       uiTransform: {
         positionType: "absolute",
         position: { right: 20, bottom: 10 },
-        // Far right corner
-        width: 100,
-        height: 45,
+        width: this.s(100),
+        height: this.s(45),
         justifyContent: "center",
         alignItems: "center"
       },
-      uiBackground: { color: Color44.create(0.6, 0, 0.5, 0.9) },
-      onMouseDown: () => this.show(),
+      uiBackground: { color: buttonColor },
+      onMouseDown: () => this._isVisible ? this.hide() : this.show(),
       children: [
         ReactEcs3.createElement(UiEntity3, {
           uiText: {
-            value: `CHAT${unreadBadge}`,
-            fontSize: 16,
+            value: buttonText,
+            fontSize: this.s(14),
             color: THEME.colors.white,
             textAlign: "middle-center"
           }
@@ -2121,6 +2222,1232 @@ var ChatUIModule = class {
   }
 };
 
+// src/ui/admin-panel-ui.tsx
+import ReactEcs4, { UiEntity as UiEntity4, Button as Button3, Label as Label4, Input as Input4 } from "@dcl/sdk/react-ecs";
+import { Color4 as Color45, Vector3 } from "@dcl/sdk/math";
+import { getPlayer as getPlayer2 } from "@dcl/sdk/players";
+import { movePlayerTo, openExternalUrl as openExternalUrl3 } from "~system/RestrictedActions";
+var BAN_KICK_POSITION = Vector3.create(16, -50, 16);
+var C = {
+  bg: Color45.create(0.08, 0.08, 0.12, 0.98),
+  header: Color45.create(0.9, 0.15, 0.15, 1),
+  tabActive: Color45.create(0, 0.7, 0.7, 1),
+  tabInactive: Color45.create(0.15, 0.15, 0.2, 1),
+  section: Color45.create(0.12, 0.12, 0.18, 1),
+  btn: Color45.create(0.2, 0.2, 0.28, 1),
+  cyan: Color45.create(0, 0.8, 0.8, 1),
+  magenta: Color45.create(0.85, 0.2, 0.55, 1),
+  yellow: Color45.create(0.95, 0.75, 0.1, 1),
+  green: Color45.create(0.2, 0.75, 0.3, 1),
+  red: Color45.create(0.85, 0.2, 0.2, 1),
+  purple: Color45.create(0.6, 0.3, 0.85, 1),
+  orange: Color45.create(0.95, 0.5, 0.15, 1),
+  text: Color45.White(),
+  textDim: Color45.create(0.6, 0.6, 0.7, 1)
+};
+var AdminPanelUIModule = class {
+  // UI scaling - uses shared client.uiScale
+  constructor(client, config) {
+    // State
+    this.isAdmin = false;
+    this.isOwner = false;
+    this.panelOpen = false;
+    this.activeTab = "video";
+    this.playerWallet = "";
+    // Video tab state
+    this.customVideoUrl = "";
+    this.streamData = null;
+    this.streamFetched = false;
+    this.videoState = null;
+    this.videoStateFetched = false;
+    this.channelCreating = false;
+    this.channelCreateError = "";
+    this.channelDeleting = false;
+    this.channelDeleteError = "";
+    this.keyRotating = false;
+    this.keyRotateStatus = "";
+    this.streamControlling = false;
+    this.streamControlStatus = "";
+    this.pollIntervalId = null;
+    this.trialClaiming = false;
+    this.trialClaimError = "";
+    // Mod tab state
+    this.sceneAdmins = [];
+    this.bannedWallets = [];
+    this.newAdminWallet = "";
+    this.newBanWallet = "";
+    this.broadcastText = "";
+    this.modStatus = "";
+    this.modsFetched = false;
+    // --- UI Components ---
+    this.SectionHead = ({ label, color }) => /* @__PURE__ */ ReactEcs4.createElement(
+      UiEntity4,
+      {
+        uiTransform: { width: "100%", height: this.s(UI_DIMENSIONS.admin.sectionHeadHeight), margin: { bottom: 8 }, padding: { left: 10 }, alignItems: "center" },
+        uiBackground: { color: Color45.create(color.r * 0.3, color.g * 0.3, color.b * 0.3, 0.5) }
+      },
+      /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: label, fontSize: this.theme.sectionHead, color })
+    );
+    this.TabBtn = ({ label, tab }) => /* @__PURE__ */ ReactEcs4.createElement(
+      Button3,
+      {
+        uiTransform: { flexGrow: 1, height: this.s(UI_DIMENSIONS.admin.tabHeight), justifyContent: "center", alignItems: "center" },
+        uiBackground: { color: this.activeTab === tab ? C.tabActive : C.tabInactive },
+        value: label,
+        fontSize: this.theme.tabButton,
+        color: this.activeTab === tab ? Color45.Black() : C.text,
+        textAlign: "middle-center",
+        onMouseDown: () => this.setActiveTab(tab)
+      }
+    );
+    this.VideoTab = () => {
+      if (!this.streamFetched) {
+        this.fetchStreamData();
+      }
+      const t = this.theme;
+      return /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", width: "100%", padding: 10 } }, !this.streamData?.hasChannel && /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "LIVE STREAM", color: C.btn }), /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "No streaming channel linked", fontSize: t.labelSmall, color: C.textDim, uiTransform: { margin: { bottom: 8 } } }), this.isOwner && /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column" } }, this.streamData?.trialAvailable && /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 10 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: this.s(200), height: this.s(UI_DIMENSIONS.admin.buttonHeight), margin: { bottom: 6 } },
+          uiBackground: { color: this.trialClaiming ? C.btn : C.green },
+          value: this.trialClaiming ? "Claiming..." : "Start Free 4-Hour Trial",
+          fontSize: t.button,
+          color: C.text,
+          onMouseDown: () => this.claimTrial()
+        }
+      ), this.trialClaimError && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: this.trialClaimError, fontSize: t.status, color: C.red }), /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "One-time trial \u2022 4 hours of streaming", fontSize: t.labelSmall, color: C.textDim, uiTransform: { margin: { top: 4 } } })), !this.streamData?.trialAvailable && /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column" } }, /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: this.s(170), height: this.s(UI_DIMENSIONS.admin.buttonHeight), margin: { bottom: 6 } },
+          uiBackground: { color: this.channelCreating ? C.btn : C.cyan },
+          value: this.channelCreating ? "Creating..." : "+ Create Channel",
+          fontSize: t.button,
+          color: C.text,
+          onMouseDown: () => this.createChannel()
+        }
+      ), this.channelCreateError && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: this.channelCreateError, fontSize: t.status, color: C.red }), /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Relay tier \u2022 $25/mo \u2022 8 hours streaming", fontSize: t.labelSmall, color: C.textDim, uiTransform: { margin: { top: 4 } } })))), this.streamData?.hasChannel && this.isOwner && /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: this.streamData.isLive ? "LIVE STREAM" : "STREAM SETTINGS", color: this.streamData.isLive ? C.red : C.yellow }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 8 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+        Label4,
+        {
+          value: this.streamData.isLive ? `LIVE \u2022 ${this.streamData.currentViewers || 0} viewers` : "OFFLINE",
+          fontSize: t.label,
+          color: this.streamData.isLive ? C.red : C.textDim
+        }
+      ), /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: ` \u2022 ${this.streamData.tier?.toUpperCase() || "RELAY"}`, fontSize: t.labelSmall, color: C.cyan }), /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: ` \u2022 ${this.streamData.sparksBalance || 0} Sparks`, fontSize: t.labelSmall, color: C.textDim })), /* @__PURE__ */ ReactEcs4.createElement(
+        Label4,
+        {
+          value: `Channel: ${this.streamData.channelName || this.streamData.channelId}`,
+          fontSize: t.labelSmall,
+          color: C.textDim,
+          uiTransform: { margin: { bottom: 10 } }
+        }
+      ), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 6 } } }, /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "RTMP Server:", fontSize: t.labelSmall, color: C.textDim }), /* @__PURE__ */ ReactEcs4.createElement(
+        Label4,
+        {
+          value: this.streamData.rtmpUrl || "Loading...",
+          fontSize: t.label,
+          color: this.streamData.rtmpUrl ? C.text : C.textDim,
+          uiTransform: { margin: { left: 6 } }
+        }
+      )), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 6 } } }, /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Stream Key:", fontSize: t.labelSmall, color: C.textDim }), /* @__PURE__ */ ReactEcs4.createElement(
+        Label4,
+        {
+          value: this.streamData.streamKey || "Loading...",
+          fontSize: t.label,
+          color: this.streamData.streamKey ? C.cyan : C.textDim,
+          uiTransform: { margin: { left: 6 } }
+        }
+      )), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 10 } } }, /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "HLS Playback:", fontSize: t.labelSmall, color: C.textDim }), /* @__PURE__ */ ReactEcs4.createElement(
+        Label4,
+        {
+          value: this.streamData.hlsUrl || "Not available",
+          fontSize: t.label,
+          color: this.streamData.hlsUrl ? C.green : C.textDim,
+          uiTransform: { margin: { left: 6 } }
+        }
+      )), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 6 } } }, !this.streamData.isLive && /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: this.s(110), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
+          uiBackground: { color: this.streamControlling ? C.btn : C.green },
+          value: this.streamControlling ? "Starting..." : "Start Stream",
+          fontSize: t.buttonSmall,
+          color: C.text,
+          onMouseDown: () => this.startStream()
+        }
+      ), this.streamData.isLive && /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: this.s(110), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
+          uiBackground: { color: this.streamControlling ? C.btn : C.red },
+          value: this.streamControlling ? "Stopping..." : "Stop Stream",
+          fontSize: t.buttonSmall,
+          color: C.text,
+          onMouseDown: () => this.stopStream()
+        }
+      ), this.streamData.isLive && this.streamData.hlsUrl && /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: this.s(100), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
+          uiBackground: { color: C.cyan },
+          value: "Play on Screen",
+          fontSize: t.buttonSmall,
+          color: C.text,
+          onMouseDown: () => this.config.onVideoPlay?.(this.streamData.hlsUrl)
+        }
+      )), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 6 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: this.s(80), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
+          uiBackground: { color: C.btn },
+          value: "Refresh",
+          fontSize: t.buttonSmall,
+          color: C.text,
+          onMouseDown: () => this.refreshStreamStatus()
+        }
+      ), /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: this.s(95), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
+          uiBackground: { color: this.keyRotating ? C.btn : C.yellow },
+          value: this.keyRotating ? "..." : "Rotate Key",
+          fontSize: t.buttonSmall,
+          color: C.text,
+          onMouseDown: () => this.rotateStreamKey()
+        }
+      ), !this.streamData.isLive && /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: this.s(70), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
+          uiBackground: { color: this.channelDeleting ? C.btn : C.red },
+          value: this.channelDeleting ? "..." : "Delete",
+          fontSize: t.buttonSmall,
+          color: C.text,
+          onMouseDown: () => this.deleteChannel()
+        }
+      )), this.streamControlStatus === "started" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Stream started - begin broadcasting in OBS", fontSize: t.status, color: C.green }), this.streamControlStatus === "stopped" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Stream stopped", fontSize: t.status, color: C.textDim }), this.keyRotateStatus === "success" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Key rotated! Update OBS", fontSize: t.status, color: C.green }), this.keyRotateStatus === "error" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Failed to rotate key", fontSize: t.status, color: C.red }), this.channelDeleteError && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: this.channelDeleteError, fontSize: t.status, color: C.red }), this.streamControlStatus === "error" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Stream control failed", fontSize: t.status, color: C.red })), /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "PLAY NOW", color: C.orange }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+        Input4,
+        {
+          uiTransform: { width: this.s(230), height: this.s(UI_DIMENSIONS.admin.inputHeight) },
+          uiBackground: { color: Color45.create(0.15, 0.15, 0.2, 1) },
+          placeholder: "Video URL...",
+          placeholderColor: C.textDim,
+          color: C.text,
+          fontSize: t.input,
+          value: this.customVideoUrl,
+          onChange: (val) => {
+            this.customVideoUrl = val;
+          }
+        }
+      ), /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: this.s(75), height: this.s(UI_DIMENSIONS.admin.inputHeight), margin: { left: 8 } },
+          uiBackground: { color: C.green },
+          value: "Play",
+          fontSize: t.button,
+          color: C.text,
+          onMouseDown: () => {
+            if (this.customVideoUrl) this.config.onVideoPlay?.(this.customVideoUrl);
+          }
+        }
+      ), /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: this.s(65), height: this.s(UI_DIMENSIONS.admin.inputHeight), margin: { left: 6 } },
+          uiBackground: { color: C.btn },
+          value: "Clear",
+          fontSize: t.button,
+          color: C.text,
+          onMouseDown: () => {
+            this.customVideoUrl = "";
+          }
+        }
+      )), /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "PLAYBACK", color: C.green }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: this.s(75), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
+          uiBackground: { color: C.green },
+          value: "Play",
+          fontSize: t.button,
+          color: C.text,
+          onMouseDown: () => this.config.onCommand?.("videoPlay", { playing: true })
+        }
+      ), /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: this.s(75), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
+          uiBackground: { color: C.red },
+          value: "Stop",
+          fontSize: t.button,
+          color: C.text,
+          onMouseDown: () => this.config.onVideoStop?.()
+        }
+      ), /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: this.s(100), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
+          uiBackground: { color: C.btn },
+          value: "Reset Default",
+          fontSize: t.buttonSmall,
+          color: C.text,
+          onMouseDown: () => this.config.onCommand?.("videoClear", {})
+        }
+      )), /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "VIDEO SLOTS", color: C.cyan }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 10 } } }, /* @__PURE__ */ ReactEcs4.createElement(Button3, { uiTransform: { width: this.s(70), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 }, uiBackground: { color: C.cyan }, value: "Play 1", fontSize: t.button, color: C.text, onMouseDown: () => this.playSlot("slot1") }), /* @__PURE__ */ ReactEcs4.createElement(Button3, { uiTransform: { width: this.s(70), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 }, uiBackground: { color: C.cyan }, value: "Play 2", fontSize: t.button, color: C.text, onMouseDown: () => this.playSlot("slot2") }), /* @__PURE__ */ ReactEcs4.createElement(Button3, { uiTransform: { width: this.s(70), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 }, uiBackground: { color: C.cyan }, value: "Play 3", fontSize: t.button, color: C.text, onMouseDown: () => this.playSlot("slot3") }), /* @__PURE__ */ ReactEcs4.createElement(Button3, { uiTransform: { width: this.s(70), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 }, uiBackground: { color: C.cyan }, value: "Play 4", fontSize: t.button, color: C.text, onMouseDown: () => this.playSlot("slot4") }), /* @__PURE__ */ ReactEcs4.createElement(Button3, { uiTransform: { width: this.s(70), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 }, uiBackground: { color: C.cyan }, value: "Play 5", fontSize: t.button, color: C.text, onMouseDown: () => this.playSlot("slot5") })), /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { height: this.s(24) },
+          uiBackground: { color: Color45.create(0, 0, 0, 0) },
+          value: "Edit slots at thestatic.tv \u2192",
+          fontSize: t.labelSmall,
+          color: C.cyan,
+          onMouseDown: () => openExternalUrl3({ url: this.config.footerLink || `https://thestatic.tv/scene/${this.config.sceneId}` })
+        }
+      ));
+    };
+    this.ModTab = () => {
+      const t = this.theme;
+      return /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", width: "100%", padding: 10 } }, this.modStatus === "loading" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Loading...", fontSize: t.status, color: C.yellow }), this.modStatus === "saved" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Saved!", fontSize: t.status, color: C.green }), this.modStatus === "error" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Error - check input", fontSize: t.status, color: C.red }), /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "BROADCAST", color: C.orange }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+        Input4,
+        {
+          uiTransform: { width: this.s(230), height: this.s(UI_DIMENSIONS.admin.inputHeight) },
+          uiBackground: { color: Color45.create(0.15, 0.15, 0.2, 1) },
+          placeholder: "Message to all players...",
+          placeholderColor: C.textDim,
+          color: C.text,
+          fontSize: t.input,
+          value: this.broadcastText,
+          onChange: (val) => {
+            this.broadcastText = val;
+          }
+        }
+      ), /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: this.s(65), height: this.s(UI_DIMENSIONS.admin.inputHeight), margin: { left: 8 } },
+          uiBackground: { color: C.orange },
+          value: "Send",
+          fontSize: t.button,
+          color: C.text,
+          onMouseDown: () => this.sendBroadcast()
+        }
+      )), /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "CHAOS MODE", color: C.red }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: this.s(130), height: this.s(UI_DIMENSIONS.admin.buttonHeight), margin: 4 },
+          uiBackground: { color: C.red },
+          value: "KICK ALL",
+          fontSize: t.button,
+          color: C.text,
+          onMouseDown: () => {
+            this.log("KICK ALL clicked");
+            this.config.onCommand?.("kickAll", {});
+          }
+        }
+      )), /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "SCENE ADMINS", color: C.purple }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 6 } } }, this.sceneAdmins.length === 0 && this.modStatus !== "loading" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "No scene admins", fontSize: t.labelSmall, color: C.textDim }), this.sceneAdmins.map((wallet, i) => /* @__PURE__ */ ReactEcs4.createElement(
+        UiEntity4,
+        {
+          key: `admin-${i}`,
+          uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 5 }, width: "100%" }
+        },
+        /* @__PURE__ */ ReactEcs4.createElement(
+          Label4,
+          {
+            value: `${wallet.slice(0, 6)}...${wallet.slice(-4)}`,
+            fontSize: t.label,
+            color: C.text,
+            uiTransform: { width: this.s(130) }
+          }
+        ),
+        /* @__PURE__ */ ReactEcs4.createElement(
+          Button3,
+          {
+            uiTransform: { width: this.s(70), height: this.s(28), margin: { left: 8 } },
+            uiBackground: { color: C.btn },
+            value: "Remove",
+            fontSize: t.buttonSmall,
+            color: C.text,
+            onMouseDown: () => this.removeSceneAdmin(wallet)
+          }
+        )
+      ))), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+        Input4,
+        {
+          uiTransform: { width: this.s(230), height: this.s(UI_DIMENSIONS.admin.inputHeight) },
+          uiBackground: { color: Color45.create(0.15, 0.15, 0.2, 1) },
+          placeholder: "0x... add admin",
+          placeholderColor: C.textDim,
+          color: C.text,
+          fontSize: t.input,
+          value: this.newAdminWallet,
+          onChange: (val) => {
+            this.newAdminWallet = val;
+          }
+        }
+      ), /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: this.s(60), height: this.s(UI_DIMENSIONS.admin.inputHeight), margin: { left: 8 } },
+          uiBackground: { color: C.purple },
+          value: "Add",
+          fontSize: t.button,
+          color: C.text,
+          onMouseDown: () => {
+            if (this.newAdminWallet) this.addSceneAdmin(this.newAdminWallet);
+          }
+        }
+      )), /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "BANNED WALLETS", color: C.red }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 6 } } }, this.bannedWallets.length === 0 && this.modStatus !== "loading" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "No banned wallets", fontSize: t.labelSmall, color: C.textDim }), this.bannedWallets.map((wallet, i) => /* @__PURE__ */ ReactEcs4.createElement(
+        UiEntity4,
+        {
+          key: `ban-${i}`,
+          uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 5 }, width: "100%" }
+        },
+        /* @__PURE__ */ ReactEcs4.createElement(
+          Label4,
+          {
+            value: `${wallet.slice(0, 6)}...${wallet.slice(-4)}`,
+            fontSize: t.label,
+            color: C.red,
+            uiTransform: { width: this.s(130) }
+          }
+        ),
+        /* @__PURE__ */ ReactEcs4.createElement(
+          Button3,
+          {
+            uiTransform: { width: this.s(70), height: this.s(28), margin: { left: 8 } },
+            uiBackground: { color: C.green },
+            value: "Unban",
+            fontSize: t.buttonSmall,
+            color: C.text,
+            onMouseDown: () => this.unbanWallet(wallet)
+          }
+        )
+      ))), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 10 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+        Input4,
+        {
+          uiTransform: { width: this.s(230), height: this.s(UI_DIMENSIONS.admin.inputHeight) },
+          uiBackground: { color: Color45.create(0.15, 0.15, 0.2, 1) },
+          placeholder: "0x... ban wallet",
+          placeholderColor: C.textDim,
+          color: C.text,
+          fontSize: t.input,
+          value: this.newBanWallet,
+          onChange: (val) => {
+            this.newBanWallet = val;
+          }
+        }
+      ), /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: this.s(60), height: this.s(UI_DIMENSIONS.admin.inputHeight), margin: { left: 8 } },
+          uiBackground: { color: C.red },
+          value: "Ban",
+          fontSize: t.button,
+          color: C.text,
+          onMouseDown: () => {
+            if (this.newBanWallet) this.banWallet(this.newBanWallet);
+          }
+        }
+      )), /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { height: this.s(24) },
+          uiBackground: { color: Color45.create(0, 0, 0, 0) },
+          value: "Manage at thestatic.tv \u2192",
+          fontSize: t.labelSmall,
+          color: C.cyan,
+          onMouseDown: () => openExternalUrl3({ url: this.config.footerLink || `https://thestatic.tv/scene/${this.config.sceneId}` })
+        }
+      ));
+    };
+    /**
+     * Get the React-ECS component for the admin panel
+     */
+    this.getComponent = () => {
+      if (!this.isAdmin) return null;
+      const t = this.theme;
+      const tabs = [];
+      if (this.config.sceneTabs && this.config.sceneTabs.length > 0) {
+        this.config.sceneTabs.forEach((tab) => tabs.push({ label: tab.label, id: tab.id }));
+      }
+      if (this.config.showVideoTab !== false) {
+        tabs.push({ label: "VIDEO", id: "video" });
+      }
+      if (this.config.showModTab !== false && this.isOwner) {
+        tabs.push({ label: "MOD", id: "mod" });
+      }
+      if (!tabs.find((tab) => tab.id === this.activeTab) && tabs.length > 0) {
+        this.activeTab = tabs[0].id;
+      }
+      return /* @__PURE__ */ ReactEcs4.createElement(
+        UiEntity4,
+        {
+          uiTransform: {
+            width: "100%",
+            height: "100%",
+            positionType: "absolute"
+          }
+        },
+        /* @__PURE__ */ ReactEcs4.createElement(
+          UiEntity4,
+          {
+            uiTransform: {
+              position: { right: 20 + this.s(100) + 10, bottom: 10 },
+              positionType: "absolute"
+            }
+          },
+          /* @__PURE__ */ ReactEcs4.createElement(
+            Button3,
+            {
+              uiTransform: { width: this.s(100), height: this.s(45) },
+              uiBackground: { color: this.panelOpen ? C.btn : C.header },
+              value: this.panelOpen ? "CLOSE" : "ADMIN",
+              fontSize: this.s(14),
+              color: C.text,
+              onMouseDown: () => this.toggle()
+            }
+          )
+        ),
+        this.panelOpen && /* @__PURE__ */ ReactEcs4.createElement(
+          UiEntity4,
+          {
+            key: `admin-panel-${this.client.uiScale}`,
+            uiTransform: {
+              width: this.s(UI_DIMENSIONS.admin.width),
+              height: this.s(UI_DIMENSIONS.admin.height),
+              maxHeight: this.s(UI_DIMENSIONS.admin.maxHeight),
+              position: { right: UI_DIMENSIONS.chat.right + this.s(UI_DIMENSIONS.chat.width) + 10, bottom: UI_DIMENSIONS.admin.bottom },
+              positionType: "absolute",
+              flexDirection: "column"
+            },
+            uiBackground: { color: C.bg }
+          },
+          /* @__PURE__ */ ReactEcs4.createElement(
+            UiEntity4,
+            {
+              uiTransform: {
+                width: "100%",
+                height: this.s(UI_DIMENSIONS.admin.headerHeight),
+                justifyContent: "space-between",
+                alignItems: "center",
+                flexDirection: "row",
+                padding: { left: 12, right: 8 }
+              },
+              uiBackground: { color: C.header }
+            },
+            /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: this.config.title || "ADMIN PANEL", fontSize: t.header, color: C.text }),
+            /* @__PURE__ */ ReactEcs4.createElement(
+              Button3,
+              {
+                uiTransform: { width: this.s(28), height: this.s(28) },
+                uiBackground: { color: Color45.create(0, 0, 0, 0.3) },
+                value: "X",
+                fontSize: t.header,
+                color: THEME.colors.red,
+                onMouseDown: () => this.hide()
+              }
+            )
+          ),
+          /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { width: "100%", height: this.s(UI_DIMENSIONS.admin.tabHeight), flexDirection: "row" } }, tabs.map((tab) => /* @__PURE__ */ ReactEcs4.createElement(this.TabBtn, { label: tab.label, tab: tab.id }))),
+          /* @__PURE__ */ ReactEcs4.createElement(
+            UiEntity4,
+            {
+              uiTransform: {
+                width: "100%",
+                flexGrow: 1,
+                overflow: "scroll",
+                flexDirection: "column"
+              }
+            },
+            this.activeTab === "video" && /* @__PURE__ */ ReactEcs4.createElement(this.VideoTab, null),
+            this.activeTab === "mod" && this.isOwner && /* @__PURE__ */ ReactEcs4.createElement(this.ModTab, null),
+            this.config.sceneTabs?.map((tab) => this.activeTab === tab.id && tab.render())
+          ),
+          /* @__PURE__ */ ReactEcs4.createElement(
+            UiEntity4,
+            {
+              uiTransform: {
+                width: "100%",
+                height: this.s(UI_DIMENSIONS.admin.footerHeight),
+                justifyContent: "center",
+                alignItems: "center"
+              },
+              uiBackground: { color: C.section }
+            },
+            /* @__PURE__ */ ReactEcs4.createElement(
+              Button3,
+              {
+                uiTransform: { height: this.s(24) },
+                uiBackground: { color: Color45.create(0, 0, 0, 0) },
+                value: `thestatic.tv/scene/${this.config.sceneId} \u2192`,
+                fontSize: t.labelSmall,
+                color: C.cyan,
+                onMouseDown: () => openExternalUrl3({ url: this.config.footerLink || `https://thestatic.tv/scene/${this.config.sceneId}` })
+              }
+            )
+          )
+        )
+      );
+    };
+    this.client = client;
+    if (!config.sceneId) {
+      throw new Error("[AdminPanel] sceneId is required");
+    }
+    this.config = {
+      showVideoTab: true,
+      showModTab: true,
+      title: "ADMIN PANEL",
+      debug: false,
+      ...config,
+      sceneId: config.sceneId
+      // Ensure sceneId is set
+    };
+    this.baseUrl = client.getBaseUrl();
+    if (config.headerColor) {
+      C.header = Color45.create(
+        config.headerColor.r,
+        config.headerColor.g,
+        config.headerColor.b,
+        config.headerColor.a
+      );
+    }
+  }
+  log(msg, ...args) {
+    if (this.config.debug) {
+      console.log(`[AdminPanel] ${msg}`, ...args);
+    }
+  }
+  /** Scale a dimension by shared uiScale */
+  s(value) {
+    return Math.round(value * this.client.uiScale);
+  }
+  /** Get scaled theme */
+  get theme() {
+    return scaleAdminTheme(DEFAULT_ADMIN_THEME, this.client.uiScale);
+  }
+  /**
+   * Initialize the admin panel - checks admin status and fetches video state
+   */
+  async init() {
+    await this.checkAdminStatus();
+    await this.fetchVideoState();
+    this.autoPlayDefault();
+    this.log("Initialized");
+  }
+  /**
+   * Check if current player is an admin for this scene
+   */
+  async checkAdminStatus() {
+    const player = getPlayer2();
+    if (!player?.userId) {
+      this.log("No player data yet");
+      return;
+    }
+    this.playerWallet = player.userId;
+    if (this.config.forceAdmin) {
+      this.isAdmin = true;
+      this.isOwner = true;
+      this.log("Admin status FORCED (forceAdmin: true)");
+      return;
+    }
+    try {
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/admin-check?wallet=${player.userId}`
+      );
+      if (res.ok) {
+        const data = await res.json();
+        this.isAdmin = data.showButton ?? data.hasAccess;
+        this.isOwner = data.isOwner || data.isSceneAdmin;
+        if (data.isBanned) {
+          this.config.onBroadcast?.("You have been banned from this scene.");
+          this.banKickPlayer();
+          this.log("Player is banned - kicking");
+        }
+        this.log("Admin status:", this.isAdmin, "Owner:", this.isOwner);
+      }
+    } catch (err) {
+      this.log("Admin check error:", err);
+    }
+  }
+  /**
+   * Toggle the admin panel open/closed
+   */
+  toggle() {
+    if (this.panelOpen) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  /**
+   * Show the admin panel
+   */
+  show() {
+    if (this.panelOpen) return;
+    this.client.closeOtherPanels("admin");
+    this.panelOpen = true;
+    if (this.activeTab === "video") {
+      this.startStreamPolling();
+    }
+  }
+  /**
+   * Hide the admin panel
+   */
+  hide() {
+    if (!this.panelOpen) return;
+    this.panelOpen = false;
+    this.stopStreamPolling();
+  }
+  /**
+   * Check if the panel is currently open
+   */
+  get isOpen() {
+    return this.panelOpen;
+  }
+  /**
+   * Check if current user has admin access
+   */
+  get hasAccess() {
+    return this.isAdmin;
+  }
+  /**
+     * Register a custom scene tab (Pro tier)
+     */
+  registerSceneTab(tab) {
+    if (!this.config.sceneTabs) {
+      this.config.sceneTabs = [];
+    }
+    this.config.sceneTabs.push(tab);
+    this.log("Registered scene tab:", tab.label);
+  }
+  // --- Stream Polling ---
+  startStreamPolling() {
+    if (this.pollIntervalId !== null) return;
+    this.pollIntervalId = dclSetInterval(() => {
+      if (this.activeTab === "video" && this.panelOpen && this.streamData?.hasChannel) {
+        this.refreshStreamStatus();
+      }
+    }, 1e4);
+    this.log("Stream polling started");
+  }
+  stopStreamPolling() {
+    if (this.pollIntervalId !== null) {
+      dclClearInterval(this.pollIntervalId);
+      this.pollIntervalId = null;
+      this.log("Stream polling stopped");
+    }
+  }
+  // --- Stream API Calls ---
+  async fetchStreamData() {
+    if (this.streamFetched || !this.playerWallet) return;
+    try {
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/stream?wallet=${this.playerWallet}`
+      );
+      if (res.ok) {
+        this.streamData = await res.json();
+        this.streamFetched = true;
+        this.log("Stream data fetched:", this.streamData?.channelId || "no channel");
+      }
+    } catch (err) {
+      this.log("Stream fetch error:", err);
+    }
+  }
+  async refreshStreamStatus() {
+    if (!this.playerWallet) return;
+    try {
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/stream?wallet=${this.playerWallet}`
+      );
+      if (res.ok) {
+        this.streamData = await res.json();
+      }
+    } catch (err) {
+    }
+  }
+  // --- Video State (Slots) ---
+  async fetchVideoState() {
+    if (this.videoStateFetched) return;
+    try {
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/video-state`
+      );
+      if (res.ok) {
+        const data = await res.json();
+        this.videoState = {
+          defaultSlot: data.defaultSlot || null,
+          videoSlots: data.videoSlots || {}
+        };
+        this.videoStateFetched = true;
+        this.log("Video state fetched:", this.videoState.defaultSlot || "no default");
+      }
+    } catch (err) {
+      this.log("Video state fetch error:", err);
+    }
+  }
+  /**
+   * Play a video slot by ID - looks up URL and calls onVideoPlay
+   */
+  playSlot(slotId) {
+    const slot = this.videoState?.videoSlots?.[slotId];
+    if (slot?.url) {
+      this.log("Playing slot:", slotId, slot.url);
+      this.config.onVideoPlay?.(slot.url);
+    } else {
+      this.log("Slot has no URL:", slotId);
+      this.config.onVideoSlotPlay?.(slotId);
+    }
+  }
+  /**
+   * Auto-play the default slot if configured
+   */
+  autoPlayDefault() {
+    if (!this.videoState?.defaultSlot) return;
+    const defaultSlot = this.videoState.defaultSlot;
+    const slot = this.videoState.videoSlots?.[defaultSlot];
+    if (slot?.url) {
+      this.log("Auto-playing default slot:", defaultSlot);
+      this.config.onVideoPlay?.(slot.url);
+    }
+  }
+  async createChannel() {
+    if (!this.playerWallet || this.channelCreating) return;
+    this.channelCreating = true;
+    this.channelCreateError = "";
+    try {
+      this.log("Creating channel for scene...");
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/stream/create`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ wallet: this.playerWallet })
+        }
+      );
+      const data = await res.json();
+      if (res.ok) {
+        this.log("Channel created:", data.channel);
+        this.streamFetched = false;
+        await this.fetchStreamData();
+        this.config.onBroadcast?.(`Channel created: ${data.channel.channelId}`);
+      } else {
+        this.channelCreateError = data.error || "Failed to create channel";
+        this.log("Channel creation failed:", data.error);
+      }
+    } catch (err) {
+      this.channelCreateError = "Network error creating channel";
+      this.log("Channel creation error:", err);
+    }
+    this.channelCreating = false;
+  }
+  async claimTrial() {
+    if (!this.playerWallet || this.trialClaiming) return;
+    this.trialClaiming = true;
+    this.trialClaimError = "";
+    try {
+      this.log("Claiming streaming trial...");
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/stream/claim-trial`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ wallet: this.playerWallet })
+        }
+      );
+      const data = await res.json();
+      if (res.ok) {
+        this.log("Trial claimed:", data.channel);
+        this.streamFetched = false;
+        await this.fetchStreamData();
+        this.config.onBroadcast?.(`4-hour streaming trial activated!`);
+      } else {
+        this.trialClaimError = data.error || "Failed to claim trial";
+        this.log("Trial claim failed:", data.error);
+      }
+    } catch (err) {
+      this.trialClaimError = "Network error claiming trial";
+      this.log("Trial claim error:", err);
+    }
+    this.trialClaiming = false;
+  }
+  async deleteChannel() {
+    if (!this.playerWallet || this.channelDeleting || !this.streamData?.hasChannel) return;
+    this.channelDeleting = true;
+    this.channelDeleteError = "";
+    try {
+      this.log("Deleting channel for scene...");
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/stream/delete`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ wallet: this.playerWallet })
+        }
+      );
+      const data = await res.json();
+      if (res.ok) {
+        this.log("Channel deleted:", data);
+        this.streamData = null;
+        this.streamFetched = false;
+        this.config.onBroadcast?.("Channel deleted successfully");
+      } else {
+        this.channelDeleteError = data.error || "Failed to delete channel";
+        this.log("Channel deletion failed:", data.error);
+      }
+    } catch (err) {
+      this.channelDeleteError = "Network error deleting channel";
+      this.log("Channel deletion error:", err);
+    }
+    this.channelDeleting = false;
+  }
+  async startStream() {
+    if (!this.playerWallet || this.streamControlling || !this.streamData?.hasChannel || this.streamData.isLive) return;
+    if ((this.streamData.sparksBalance || 0) <= 0) {
+      this.streamControlStatus = "error";
+      this.config.onBroadcast?.("No Sparks - cannot start stream");
+      return;
+    }
+    this.streamControlling = true;
+    this.streamControlStatus = "";
+    try {
+      this.log("Starting stream...");
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/stream`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ action: "start", wallet: this.playerWallet })
+        }
+      );
+      const data = await res.json();
+      if (res.ok) {
+        this.streamControlStatus = "started";
+        this.log("Stream started");
+        this.config.onBroadcast?.("Stream started!");
+        this.streamFetched = false;
+        await this.fetchStreamData();
+      } else {
+        this.streamControlStatus = "error";
+        this.log("Start stream failed:", data.error);
+        this.config.onBroadcast?.(data.error || "Failed to start");
+      }
+    } catch (err) {
+      this.streamControlStatus = "error";
+      this.log("Start stream error:", err);
+    }
+    this.streamControlling = false;
+  }
+  async stopStream() {
+    if (!this.playerWallet || this.streamControlling || !this.streamData?.hasChannel || !this.streamData.isLive) return;
+    this.streamControlling = true;
+    this.streamControlStatus = "";
+    try {
+      this.log("Stopping stream...");
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/stream`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ action: "stop", wallet: this.playerWallet })
+        }
+      );
+      const data = await res.json();
+      if (res.ok) {
+        this.streamControlStatus = "stopped";
+        this.log("Stream stopped");
+        this.config.onBroadcast?.("Stream stopped");
+        this.streamFetched = false;
+        await this.fetchStreamData();
+      } else {
+        this.streamControlStatus = "error";
+        this.log("Stop stream failed:", data.error);
+      }
+    } catch (err) {
+      this.streamControlStatus = "error";
+      this.log("Stop stream error:", err);
+    }
+    this.streamControlling = false;
+  }
+  async rotateStreamKey() {
+    if (!this.playerWallet || this.keyRotating || !this.streamData?.hasChannel) return;
+    this.keyRotating = true;
+    this.keyRotateStatus = "";
+    try {
+      this.log("Rotating stream key...");
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/stream`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ action: "rotateKey", wallet: this.playerWallet })
+        }
+      );
+      const data = await res.json();
+      if (res.ok) {
+        this.keyRotateStatus = "success";
+        this.log("Key rotated:", data.message);
+        this.config.onBroadcast?.("Stream key rotated - update OBS settings");
+      } else {
+        this.keyRotateStatus = "error";
+        this.log("Key rotation failed:", data.error);
+      }
+    } catch (err) {
+      this.keyRotateStatus = "error";
+      this.log("Key rotation error:", err);
+    }
+    this.keyRotating = false;
+  }
+  // --- Mod Tab API Calls ---
+  async fetchModData() {
+    if (!this.playerWallet) return;
+    this.modStatus = "loading";
+    try {
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/config?wallet=${this.playerWallet}`,
+        { headers: { "Content-Type": "application/json" } }
+      );
+      if (res.ok) {
+        const data = await res.json();
+        this.sceneAdmins = data.sceneAdmins || [];
+        this.bannedWallets = data.bannedWallets || [];
+        this.modsFetched = true;
+        this.modStatus = "";
+        this.log("Fetched mod data:", { sceneAdmins: this.sceneAdmins, bannedWallets: this.bannedWallets });
+      } else {
+        this.modStatus = "error";
+      }
+    } catch (err) {
+      this.modStatus = "error";
+      this.log("Fetch mod data error:", err);
+    }
+  }
+  async addSceneAdmin(wallet) {
+    if (!wallet || !this.playerWallet) return;
+    const normalized = wallet.toLowerCase().trim();
+    if (!/^0x[a-f0-9]{40}$/i.test(normalized)) {
+      this.modStatus = "error";
+      return;
+    }
+    if (this.sceneAdmins.includes(normalized)) return;
+    this.modStatus = "loading";
+    try {
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/config`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            sceneAdmins: [...this.sceneAdmins, normalized],
+            wallet: this.playerWallet
+          })
+        }
+      );
+      if (res.ok) {
+        this.sceneAdmins = [...this.sceneAdmins, normalized];
+        this.newAdminWallet = "";
+        this.modStatus = "saved";
+        this.log("Added scene admin:", normalized);
+      } else {
+        this.modStatus = "error";
+      }
+    } catch (err) {
+      this.modStatus = "error";
+      this.log("Add admin error:", err);
+    }
+  }
+  async removeSceneAdmin(wallet) {
+    if (!wallet || !this.playerWallet) return;
+    this.modStatus = "loading";
+    try {
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/config`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            sceneAdmins: this.sceneAdmins.filter((w) => w !== wallet),
+            wallet: this.playerWallet
+          })
+        }
+      );
+      if (res.ok) {
+        this.sceneAdmins = this.sceneAdmins.filter((w) => w !== wallet);
+        this.modStatus = "saved";
+        this.log("Removed scene admin:", wallet);
+      } else {
+        this.modStatus = "error";
+      }
+    } catch (err) {
+      this.modStatus = "error";
+      this.log("Remove admin error:", err);
+    }
+  }
+  async banWallet(wallet) {
+    if (!wallet || !this.playerWallet) return;
+    const normalized = wallet.toLowerCase().trim();
+    if (!/^0x[a-f0-9]{40}$/i.test(normalized)) {
+      this.modStatus = "error";
+      return;
+    }
+    if (this.bannedWallets.includes(normalized)) return;
+    this.modStatus = "loading";
+    try {
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/config`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            bannedWallets: [...this.bannedWallets, normalized],
+            wallet: this.playerWallet
+          })
+        }
+      );
+      if (res.ok) {
+        this.bannedWallets = [...this.bannedWallets, normalized];
+        this.newBanWallet = "";
+        this.modStatus = "saved";
+        this.log("Banned wallet:", normalized);
+        this.config.onCommand?.("kickBanned", { wallet: normalized });
+      } else {
+        this.modStatus = "error";
+      }
+    } catch (err) {
+      this.modStatus = "error";
+      this.log("Ban error:", err);
+    }
+  }
+  async unbanWallet(wallet) {
+    if (!wallet || !this.playerWallet) return;
+    this.modStatus = "loading";
+    try {
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/config`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            bannedWallets: this.bannedWallets.filter((w) => w !== wallet),
+            wallet: this.playerWallet
+          })
+        }
+      );
+      if (res.ok) {
+        this.bannedWallets = this.bannedWallets.filter((w) => w !== wallet);
+        this.modStatus = "saved";
+        this.log("Unbanned wallet:", wallet);
+      } else {
+        this.modStatus = "error";
+      }
+    } catch (err) {
+      this.modStatus = "error";
+      this.log("Unban error:", err);
+    }
+  }
+  banKickPlayer() {
+    movePlayerTo({ newRelativePosition: BAN_KICK_POSITION });
+    this.log("Player ban-kicked");
+  }
+  sendBroadcast() {
+    if (!this.broadcastText.trim()) return;
+    this.config.onBroadcast?.(this.broadcastText.trim());
+    this.broadcastText = "";
+    this.log("Broadcast sent");
+  }
+  setActiveTab(tab) {
+    const previousTab = this.activeTab;
+    this.activeTab = tab;
+    if (tab === "mod" && !this.modsFetched && this.isOwner) {
+      this.fetchModData();
+    }
+    if (tab === "video" && previousTab !== "video") {
+      this.startStreamPolling();
+    } else if (tab !== "video" && previousTab === "video") {
+      this.stopStreamPolling();
+    }
+  }
+};
+
+// src/ui/ui-renderer.tsx
+import ReactEcs5, { ReactEcsRenderer, UiEntity as UiEntity5, Label as Label5 } from "@dcl/sdk/react-ecs";
+import { Color4 as Color46 } from "@dcl/sdk/math";
+import { engine as engine2 } from "@dcl/sdk/ecs";
+var notificationText = "";
+var notificationVisible = false;
+var notificationEndTime = 0;
+var notificationInitialized = false;
+function showNotification(message, durationMs = 5e3) {
+  notificationText = message;
+  notificationVisible = true;
+  notificationEndTime = Date.now() + durationMs;
+}
+function initNotificationSystem() {
+  if (notificationInitialized) return;
+  notificationInitialized = true;
+  engine2.addSystem(() => {
+    if (notificationVisible && Date.now() > notificationEndTime) {
+      notificationVisible = false;
+    }
+  });
+}
+function NotificationBanner() {
+  if (!notificationVisible) return null;
+  return /* @__PURE__ */ ReactEcs5.createElement(
+    UiEntity5,
+    {
+      uiTransform: {
+        positionType: "absolute",
+        position: { top: 80 },
+        width: 500,
+        height: 60,
+        padding: 16,
+        alignSelf: "center",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      uiBackground: { color: Color46.create(0.1, 0.1, 0.15, 0.95) }
+    },
+    /* @__PURE__ */ ReactEcs5.createElement(
+      Label5,
+      {
+        value: notificationText,
+        fontSize: 18,
+        color: Color46.create(0, 1, 1, 1),
+        textAlign: "middle-center"
+      }
+    )
+  );
+}
+function createStaticUI(client) {
+  initNotificationSystem();
+  return function StaticUI() {
+    const currentScale = client.uiScale;
+    const guideComponent = client.guideUI?.getComponent() ?? null;
+    const chatComponent = client.chatUI?.getComponent() ?? null;
+    const adminComponent = client.adminPanel?.getComponent() ?? null;
+    return /* @__PURE__ */ ReactEcs5.createElement(
+      UiEntity5,
+      {
+        key: `static-ui-root-${currentScale}`,
+        uiTransform: {
+          width: "100%",
+          height: "100%",
+          positionType: "absolute",
+          flexDirection: "column",
+          alignItems: "center"
+        }
+      },
+      /* @__PURE__ */ ReactEcs5.createElement(NotificationBanner, null),
+      guideComponent,
+      chatComponent,
+      adminComponent
+    );
+  };
+}
+function setupStaticUI(client) {
+  const StaticUI = createStaticUI(client);
+  ReactEcsRenderer.setUiRenderer(StaticUI);
+}
+
 // src/StaticTVClient.ts
 var DEFAULT_BASE_URL = "https://thestatic.tv/api/v1/dcl";
 var KEY_TYPE_CHANNEL = "channel";
@@ -2133,34 +3460,41 @@ var StaticTVClient = class {
    *
    * @example
    * ```typescript
-   * // Full access with channel key
-   * const staticTV = new StaticTVClient({
-   *   apiKey: 'dclk_your_channel_key_here',
-   *   debug: true
-   * });
+   * let staticTV: StaticTVClient
    *
-   * // Lite mode with scene key (visitors only)
-   * const staticTV = new StaticTVClient({
-   *   apiKey: 'dcls_your_scene_key_here'
-   * });
+   * export function main() {
+   *   // All keys use dcls_ prefix - features determined by subscription
+   *   staticTV = new StaticTVClient({
+   *     apiKey: 'dcls_your_key_here'
+   *   })
+   *   // Session tracking starts automatically!
+   * }
    * ```
    */
   constructor(config) {
     this._keyType = null;
+    this._keyId = null;
     this._disabled = false;
-    this._fullFeaturesEnabled = false;
-    /** Guide module - fetch channel lineup (full SDK only) */
+    this._tier = "free";
+    this._standardFeaturesEnabled = false;
+    this._proFeaturesEnabled = false;
+    this._pendingProConfig = null;
+    /** Guide module - fetch channel lineup (standard/pro tier) */
     this.guide = null;
-    /** Session module - track visitor sessions (all keys, null when disabled) */
+    /** Session module - track visitor sessions (all tiers, null when disabled) */
     this.session = null;
-    /** Heartbeat module - track video watching (full SDK only) */
+    /** Heartbeat module - track video watching (standard/pro tier) */
     this.heartbeat = null;
-    /** Interactions module - like/follow channels (full SDK only) */
+    /** Interactions module - like/follow channels (standard/pro tier) */
     this.interactions = null;
-    /** Guide UI module - channel browser UI (full SDK only) */
+    /** Guide UI module - channel browser UI (standard/pro tier) */
     this.guideUI = null;
-    /** Chat UI module - real-time chat UI (full SDK only) */
+    /** Chat UI module - real-time chat UI (standard/pro tier) */
     this.chatUI = null;
+    /** Admin Panel module - Video/Mod tabs (pro tier only) */
+    this.adminPanel = null;
+    /** UI scale - fixed at 1.0. DCL's UI system auto-scales based on viewport. */
+    this.uiScale = 1;
     this.config = {
       autoStartSession: true,
       sessionHeartbeatInterval: 3e4,
@@ -2170,7 +3504,6 @@ var StaticTVClient = class {
     };
     this.baseUrl = config.baseUrl || DEFAULT_BASE_URL;
     if (!config.apiKey) {
-      console.log("[StaticTV] No apiKey provided - tracking disabled. Scene will load normally.");
       this._disabled = true;
       this._keyType = null;
       this.session = null;
@@ -2186,14 +3519,15 @@ var StaticTVClient = class {
     } else if (config.apiKey.startsWith("dcls_")) {
       this._keyType = KEY_TYPE_SCENE;
     } else {
-      console.log("[StaticTV] Invalid apiKey format (must start with dclk_ or dcls_) - tracking disabled. Scene will load normally.");
+      console.warn("[TheStatic] Invalid API key format - get your key at thestatic.tv/dashboard");
       this._disabled = true;
       this._keyType = null;
       return;
     }
     this.session = new SessionModule(this);
     if (this._keyType === KEY_TYPE_CHANNEL) {
-      this._initFullModules();
+      this._tier = "standard";
+      this._initStandardModules();
     }
     if (this.config.autoStartSession) {
       fetchUserData().then(() => {
@@ -2209,6 +3543,10 @@ var StaticTVClient = class {
     }
     this.log(`StaticTVClient initialized (${this._keyType} mode)`);
   }
+  /** Get the API base URL (for internal module use) */
+  getBaseUrl() {
+    return this.baseUrl;
+  }
   /**
    * Get the key type (channel, scene, or null if disabled)
    */
@@ -2222,11 +3560,23 @@ var StaticTVClient = class {
     return this._disabled;
   }
   /**
-   * Check if this is a lite client (no full features)
-   * Returns true until session confirms sdkType is 'full'
+   * Get the current SDK tier (free, standard, or pro)
+   */
+  get tier() {
+    return this._tier;
+  }
+  /**
+   * Check if this is a free tier client (session tracking only)
+   * Returns true until session confirms a higher tier
+   */
+  get isFree() {
+    return this._tier === "free";
+  }
+  /**
+   * @deprecated Use `isFree` instead. Kept for backward compatibility.
    */
   get isLite() {
-    return !this._fullFeaturesEnabled;
+    return this.isFree;
   }
   /**
    * Make an authenticated API request
@@ -2244,14 +3594,29 @@ var StaticTVClient = class {
     });
   }
   /**
-   * Log a message if debug is enabled
+   * Log a debug message (only when debug: true)
    * @internal
    */
   log(message, ...args) {
     if (this.config.debug) {
-      console.log(`[StaticTV] ${message}`, ...args);
+      console.log(`[TheStatic] ${message}`, ...args);
     }
   }
+  /**
+   * Log a warning (always shown)
+   * @internal
+   */
+  warn(message) {
+    console.warn(`[TheStatic] ${message}`);
+  }
+  /**
+   * Log an error (always shown, user-friendly format)
+   * @internal
+   */
+  error(message, err) {
+    const errorDetail = err instanceof Error ? err.message : String(err || "");
+    console.error(`[TheStatic] ${message}${errorDetail ? `: ${errorDetail}` : ""}`);
+  }
   /**
    * Get the current configuration
    * @internal
@@ -2260,41 +3625,199 @@ var StaticTVClient = class {
     return this.config;
   }
   /**
-   * Initialize full feature modules (guide, heartbeat, interactions, UI)
+   * Initialize standard feature modules (guide, heartbeat, interactions, UI)
    * @internal
    */
-  _initFullModules() {
-    if (this._fullFeaturesEnabled) return;
+  _initStandardModules() {
+    if (this._standardFeaturesEnabled) return;
     this.guide = new GuideModule(this);
     this.heartbeat = new HeartbeatModule(this);
     this.interactions = new InteractionsModule(this);
     this.guideUI = new GuideUIModule(this, this.config.guideUI);
     this.chatUI = new ChatUIModule(this, this.config.chatUI);
-    this._fullFeaturesEnabled = true;
+    this._standardFeaturesEnabled = true;
     this.chatUI.init().catch((err) => {
       this.log(`Chat init failed: ${err}`);
     });
-    this.log("Full features enabled (guide, chat, heartbeat, interactions)");
+    this.log("Standard features enabled (guide, chat, heartbeat, interactions)");
   }
   /**
-   * Called by SessionModule when server confirms sdkType is 'full'
-   * Enables guide, chat, heartbeat, and interactions modules
+   * Initialize pro feature modules (admin panel)
+   * @internal
+   */
+  _initProModules() {
+    if (this._proFeaturesEnabled || !this._pendingProConfig) return;
+    const configWithDefaults = {
+      ...this._pendingProConfig,
+      sceneId: this._pendingProConfig.sceneId || this._keyId || void 0
+    };
+    if (!configWithDefaults.sceneId) {
+      this.log("Pro features: No sceneId and no keyId available - admin panel disabled");
+      return;
+    }
+    this.adminPanel = new AdminPanelUIModule(this, configWithDefaults);
+    this._proFeaturesEnabled = true;
+    this.adminPanel.init().catch((err) => {
+      this.log(`Admin panel init failed: ${err}`);
+    });
+    this.log(`Pro features enabled (admin panel) - sceneId: ${configWithDefaults.sceneId}`);
+  }
+  /**
+   * Called by SessionModule when server returns the tier
+   * Enables modules based on tier level
+   * @internal
+   */
+  _enableFeaturesForTier(tier, keyId) {
+    this._tier = tier;
+    if (keyId) {
+      this._keyId = keyId;
+    }
+    if (tier === "standard" || tier === "pro") {
+      this._initStandardModules();
+    }
+    if (tier === "pro" && this._pendingProConfig) {
+      this._initProModules();
+    }
+  }
+  /**
+   * @deprecated Use `_enableFeaturesForTier` instead
    * @internal
    */
   _enableFullFeatures() {
-    this._initFullModules();
+    this._enableFeaturesForTier("standard");
   }
   /**
-   * Check if full features are enabled (server confirmed sdkType: 'full')
+   * Check if standard features are enabled (guide, chat, etc.)
+   */
+  get hasStandardFeatures() {
+    return this._standardFeaturesEnabled;
+  }
+  /**
+   * @deprecated Use `hasStandardFeatures` instead
    */
   get hasFullFeatures() {
-    return this._fullFeaturesEnabled;
+    return this._standardFeaturesEnabled;
+  }
+  /**
+   * Check if pro features are enabled (admin panel)
+   */
+  get hasProFeatures() {
+    return this._proFeaturesEnabled;
   }
   /**
-   * Get the SDK type (lite or full) - only available after session starts
+   * @deprecated Use `tier` instead
    */
   get sdkType() {
-    return this.session?.sdkType || "lite";
+    return this._tier === "free" ? "lite" : "full";
+  }
+  /**
+   * Configure Pro features (Admin Panel with Video + Mod tabs)
+   * Call this after creating the client to configure admin panel.
+   * The panel will auto-enable when server confirms Pro tier.
+   *
+   * @param config Admin panel configuration (optional - defaults work for basic usage)
+   *
+   * @example
+   * ```typescript
+   * const staticTV = new StaticTVClient({ apiKey: 'dcls_...' })
+   *
+   * // Simplest usage - just enable with callbacks:
+   * staticTV.enableProFeatures({
+   *   onVideoPlay: (url) => videoPlayer.play(url),
+   *   onVideoStop: () => videoPlayer.stop()
+   * })
+   *
+   * // Advanced usage - custom sceneId and title:
+   * staticTV.enableProFeatures({
+   *   sceneId: 'my-scene', // optional - defaults to API key ID
+   *   title: 'MY SCENE ADMIN',
+   *   onVideoPlay: (url) => videoPlayer.play(url),
+   *   onVideoStop: () => videoPlayer.stop(),
+   *   onBroadcast: (text) => showNotification(text)
+   * })
+   * ```
+   */
+  enableProFeatures(config = {}) {
+    if (this._proFeaturesEnabled) {
+      this.log("Pro features already enabled");
+      return;
+    }
+    this._pendingProConfig = config;
+    if (this._tier === "pro") {
+      this._initProModules();
+    } else {
+      this.log("Pro features configured - will enable when Pro tier is confirmed");
+    }
+  }
+  /**
+     * Register a custom scene tab for the admin panel (Pro tier)
+     * Must call enableProFeatures() first.
+     *
+     * @param tab The tab definition with label, id, and render function
+     *
+     * @example
+     * ```typescript
+     * staticTV.registerSceneTab({
+     *   label: 'LIGHTS',
+     *   id: 'lights',
+     *   render: () => <MyLightsControls />
+     * })
+     * ```
+     */
+  registerSceneTab(tab) {
+    if (!this.adminPanel) {
+      this.log("Cannot register scene tab - call enableProFeatures() first");
+      return;
+    }
+    this.adminPanel.registerSceneTab(tab);
+  }
+  /**
+   * Close Admin/Guide panels (they share the same screen space)
+   * Chat is independent and stays open.
+   * @param except The panel that should stay open: 'admin' | 'guide'
+   */
+  closeOtherPanels(except) {
+    if (except !== "guide" && this.guideUI?.isVisible) {
+      this.guideUI.hide();
+    }
+    if (except !== "admin" && this.adminPanel?.isOpen) {
+      this.adminPanel.hide();
+    }
+  }
+  /**
+   * Set up the UI renderer for all SDK panels
+   * Call this in your scene's main() function to render Guide, Chat, Admin panels.
+   * No need to create your own ui.tsx - the SDK handles everything.
+   *
+   * @example
+   * ```typescript
+   * const staticTV = new StaticTVClient({ apiKey: 'dcls_...' })
+   *
+   * export function main() {
+   *   staticTV.setupUI()
+   *   // That's it! All panels will render automatically
+   * }
+   * ```
+   */
+  setupUI() {
+    setupStaticUI(this);
+    this.log("UI renderer initialized");
+  }
+  /**
+   * Show a notification message on screen
+   * Works with both SDK-rendered UI and custom UI setups.
+   *
+   * @param message The message to display
+   * @param durationMs How long to show (default 5000ms)
+   *
+   * @example
+   * ```typescript
+   * staticTV.showNotification('Stream started!')
+   * staticTV.showNotification('Custom message', 10000) // 10 seconds
+   * ```
+   */
+  showNotification(message, durationMs = 5e3) {
+    showNotification(message, durationMs);
   }
   /**
    * Cleanup when done (call before scene unload)
@@ -2317,6 +3840,7 @@ var StaticTVClient = class {
   }
 };
 export {
+  AdminPanelUIModule,
   ChatUIModule,
   GuideModule,
   GuideUIModule,
@@ -2328,5 +3852,7 @@ export {
   StaticTVClient,
   fetchUserData,
   getPlayerDisplayName,
-  getPlayerWallet
+  getPlayerWallet,
+  setupStaticUI,
+  showNotification
 };