@thestatic-tv/dcl-sdk 2.3.0-dev.0 → 2.4.0

package/dist/index.js

@@ -42,7 +42,9 @@ __export(index_exports, {
   StaticTVClient: () => StaticTVClient,
   fetchUserData: () => fetchUserData,
   getPlayerDisplayName: () => getPlayerDisplayName,
-  getPlayerWallet: () => getPlayerWallet
+  getPlayerWallet: () => getPlayerWallet,
+  setupStaticUI: () => setupStaticUI,
+  showNotification: () => showNotification
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -173,7 +175,7 @@ function ensureTimerSystem() {
         try {
           timer.callback();
         } catch (e) {
-          console.error("[StaticTV Timer] Callback error:", e);
+          console.error("[TheStatic] Timer error");
         }
       }
     }
@@ -214,7 +216,7 @@ function ensureTimeoutSystem() {
         try {
           timeout.callback();
         } catch (e) {
-          console.error("[StaticTV Timer] Timeout callback error:", e);
+          console.error("[TheStatic] Timeout error");
         }
       }
     }
@@ -245,20 +247,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
@@ -305,13 +328,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;
@@ -599,7 +621,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)
@@ -618,15 +641,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,
@@ -634,18 +675,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) {
@@ -665,6 +706,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
 var import_react_ecs = __toESM(require("@dcl/sdk/react-ecs"));
@@ -720,21 +785,21 @@ var PanelHeader = (props) => {
             }),
             import_react_ecs.default.createElement(import_react_ecs.UiEntity, { key: "pos-spacer", uiTransform: { width: 6 } })
           ] : [],
-          // Font controls
+          // Font controls (with visual disabled state at limits)
           ...props.showFontControls ? [
             import_react_ecs.default.createElement(import_react_ecs.UiEntity, {
               key: "font-down",
               uiTransform: { width: 22, height: 22, justifyContent: "center", alignItems: "center" },
-              uiBackground: { color: THEME.colors.buttonBackground },
-              onMouseDown: () => props.onFontScaleDown?.(),
-              children: [import_react_ecs.default.createElement(import_react_ecs.UiEntity, { uiText: { value: "\u2212", fontSize: 14, color: THEME.colors.cyan } })]
+              uiBackground: { color: props.fontScaleAtMin ? import_math2.Color4.create(0.1, 0.1, 0.1, 0.3) : THEME.colors.buttonBackground },
+              onMouseDown: () => !props.fontScaleAtMin && props.onFontScaleDown?.(),
+              children: [import_react_ecs.default.createElement(import_react_ecs.UiEntity, { uiText: { value: "\u2212", fontSize: 14, color: props.fontScaleAtMin ? THEME.colors.gray : THEME.colors.cyan } })]
             }),
             import_react_ecs.default.createElement(import_react_ecs.UiEntity, {
               key: "font-up",
               uiTransform: { width: 22, height: 22, justifyContent: "center", alignItems: "center" },
-              uiBackground: { color: THEME.colors.buttonBackground },
-              onMouseDown: () => props.onFontScaleUp?.(),
-              children: [import_react_ecs.default.createElement(import_react_ecs.UiEntity, { uiText: { value: "+", fontSize: 14, color: THEME.colors.cyan } })]
+              uiBackground: { color: props.fontScaleAtMax ? import_math2.Color4.create(0.1, 0.1, 0.1, 0.3) : THEME.colors.buttonBackground },
+              onMouseDown: () => !props.fontScaleAtMax && props.onFontScaleUp?.(),
+              children: [import_react_ecs.default.createElement(import_react_ecs.UiEntity, { uiText: { value: "+", fontSize: 14, color: props.fontScaleAtMax ? THEME.colors.gray : THEME.colors.cyan } })]
             }),
             import_react_ecs.default.createElement(import_react_ecs.UiEntity, { key: "font-spacer", uiTransform: { width: 6 } })
           ] : [],
@@ -772,7 +837,6 @@ var GuideUIModule = class {
     this.currentPage = 0;
     this.itemsPerPage = 6;
     this.searchQuery = "";
-    this.uiScale = 1;
     // Current video tracking (for "PLAYING" indicator)
     this._currentVideoId = null;
     // =============================================================================
@@ -780,34 +844,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 import_react_ecs2.default.createElement(import_react_ecs2.UiEntity, {
+        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 ? import_react_ecs2.default.createElement(import_react_ecs2.UiEntity, {
+            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;
   }
   /**
@@ -821,6 +897,8 @@ var GuideUIModule = class {
    * Show the guide UI
    */
   show() {
+    if (this._isVisible) return;
+    this.client.closeOtherPanels("guide");
     this._isVisible = true;
     this.fetchGuideData().catch(() => {
     });
@@ -956,7 +1034,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) {
@@ -971,7 +1049,7 @@ var GuideUIModule = class {
   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 signalCount = this.videos.filter((v) => !v.isLive && !v.isCreator).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);
@@ -992,15 +1070,26 @@ var GuideUIModule = class {
         import_react_ecs2.default.createElement(import_react_ecs2.UiEntity, {
           uiTransform: { width: "100%", flexDirection: "column", padding: 10 },
           children: [
-            // Title
+            // Title row
             import_react_ecs2.default.createElement(import_react_ecs2.UiEntity, {
-              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
+                import_react_ecs2.default.createElement(import_react_ecs2.UiEntity, {
+                  uiText: {
+                    value: "THE STATIC TV",
+                    fontSize: this.s(UI_DIMENSIONS.guide.sidebar.headerSize),
+                    color: THEME.colors.cyan,
+                    textAlign: "middle-left"
+                  }
+                })
+              ]
             }),
             // Random Signal button
             import_react_ecs2.default.createElement(import_react_ecs2.UiEntity, {
@@ -1057,7 +1146,7 @@ var GuideUIModule = class {
             }),
             // 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("SIGNALS", signalCount, THEME.colors.white, void 0, "VODS & RECORDINGS"),
             this.renderMenuButton("NODES", nodesCount, THEME.colors.magenta, void 0, "CHANNELS & CREATORS"),
             // Divider
             import_react_ecs2.default.createElement(import_react_ecs2.UiEntity, {
@@ -1139,7 +1228,7 @@ var GuideUIModule = class {
     let videosToShow = [];
     const nodePl = this.featuredPlaylists.find((p) => p.name === "NODES");
     if (this.activeTab === "SIGNALS") {
-      videosToShow = this.videos.filter((v) => !v.isLive);
+      videosToShow = this.videos.filter((v) => !v.isLive && !v.isCreator);
     } else if (this.activeTab === "NODES") {
       videosToShow = nodePl ? nodePl.videos.filter((v) => v.isCreator) : [];
     } else if (this.activeTab === "LIVE NOW") {
@@ -1350,23 +1439,25 @@ var GuideUIModule = class {
     });
   }
   renderToggleButton() {
+    const buttonText = this._isVisible ? "CLOSE" : "GUIDE";
+    const buttonColor = this._isVisible ? import_math3.Color4.create(0.2, 0.2, 0.28, 0.9) : import_math3.Color4.create(0, 0.5, 0.5, 0.9);
+    const buttonPos = 20 + this.s(100) + 10;
     return import_react_ecs2.default.createElement(import_react_ecs2.UiEntity, {
       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: import_math3.Color4.create(0, 0.5, 0.5, 0.9) },
-      onMouseDown: () => this.show(),
+      uiBackground: { color: buttonColor },
+      onMouseDown: () => this._isVisible ? this.hide() : this.show(),
       children: [
         import_react_ecs2.default.createElement(import_react_ecs2.UiEntity, {
           uiText: {
-            value: "GUIDE",
-            fontSize: this.s(16),
+            value: buttonText,
+            fontSize: this.s(14),
             color: THEME.colors.white,
             textAlign: "middle-center"
           }
@@ -1408,7 +1499,6 @@ var ChatUIModule = class {
     this.chatScrollOffset = 0;
     // UI preferences
     this.position = "right";
-    this.fontScale = 1;
     // Timers
     this.chatTimerId = null;
     this.playerInfoTimerId = null;
@@ -1418,43 +1508,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 import_react_ecs3.default.createElement(import_react_ecs3.UiEntity, {
         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),
-          import_react_ecs3.default.createElement(import_react_ecs3.UiEntity, {
-            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 ? import_react_ecs3.default.createElement(import_react_ecs3.UiEntity, {
+            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),
+              import_react_ecs3.default.createElement(import_react_ecs3.UiEntity, {
+                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
@@ -1473,6 +1572,7 @@ var ChatUIModule = class {
    * Show the chat UI
    */
   show() {
+    if (this._isVisible) return;
     this._isVisible = true;
     this._unreadCount = 0;
     this.chatScrollOffset = 0;
@@ -1734,6 +1834,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) {
@@ -1746,6 +1850,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 };
   }
@@ -1753,15 +1861,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()
     });
   }
@@ -2136,23 +2238,24 @@ var ChatUIModule = class {
   }
   renderToggleButton() {
     const unreadBadge = this._unreadCount > 0 ? ` (${this._unreadCount})` : "";
+    const buttonText = this._isVisible ? "CLOSE" : `CHAT${unreadBadge}`;
+    const buttonColor = this._isVisible ? import_math4.Color4.create(0.2, 0.2, 0.28, 0.9) : import_math4.Color4.create(0.6, 0, 0.5, 0.9);
     return import_react_ecs3.default.createElement(import_react_ecs3.UiEntity, {
       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: import_math4.Color4.create(0.6, 0, 0.5, 0.9) },
-      onMouseDown: () => this.show(),
+      uiBackground: { color: buttonColor },
+      onMouseDown: () => this._isVisible ? this.hide() : this.show(),
       children: [
         import_react_ecs3.default.createElement(import_react_ecs3.UiEntity, {
           uiText: {
-            value: `CHAT${unreadBadge}`,
-            fontSize: 16,
+            value: buttonText,
+            fontSize: this.s(14),
             color: THEME.colors.white,
             textAlign: "middle-center"
           }
@@ -2186,6 +2289,7 @@ var C = {
   textDim: import_math5.Color4.create(0.6, 0.6, 0.7, 1)
 };
 var AdminPanelUIModule = class {
+  // UI scaling - uses shared client.uiScale
   constructor(client, config) {
     // State
     this.isAdmin = false;
@@ -2197,6 +2301,8 @@ var AdminPanelUIModule = class {
     this.customVideoUrl = "";
     this.streamData = null;
     this.streamFetched = false;
+    this.videoState = null;
+    this.videoStateFetched = false;
     this.channelCreating = false;
     this.channelCreateError = "";
     this.channelDeleting = false;
@@ -2220,18 +2326,18 @@ var AdminPanelUIModule = class {
     this.SectionHead = ({ label, color }) => /* @__PURE__ */ import_react_ecs4.default.createElement(
       import_react_ecs4.UiEntity,
       {
-        uiTransform: { width: "100%", height: 24, margin: { bottom: 6 }, padding: { left: 8 }, alignItems: "center" },
+        uiTransform: { width: "100%", height: this.s(UI_DIMENSIONS.admin.sectionHeadHeight), margin: { bottom: 8 }, padding: { left: 10 }, alignItems: "center" },
         uiBackground: { color: import_math5.Color4.create(color.r * 0.3, color.g * 0.3, color.b * 0.3, 0.5) }
       },
-      /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: label, fontSize: 12, color })
+      /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: label, fontSize: this.theme.sectionHead, color })
     );
     this.TabBtn = ({ label, tab }) => /* @__PURE__ */ import_react_ecs4.default.createElement(
       import_react_ecs4.Button,
       {
-        uiTransform: { flexGrow: 1, height: 36, justifyContent: "center", alignItems: "center" },
+        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: 12,
+        fontSize: this.theme.tabButton,
         color: this.activeTab === tab ? import_math5.Color4.Black() : C.text,
         textAlign: "middle-center",
         onMouseDown: () => this.setActiveTab(tab)
@@ -2241,134 +2347,135 @@ var AdminPanelUIModule = class {
       if (!this.streamFetched) {
         this.fetchStreamData();
       }
-      return /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column", width: "100%", padding: 8 } }, !this.streamData?.hasChannel && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column", margin: { bottom: 12 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(this.SectionHead, { label: "LIVE STREAM", color: C.btn }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "No streaming channel linked", fontSize: 10, color: C.textDim, uiTransform: { margin: { bottom: 6 } } }), this.isOwner && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column" } }, this.streamData?.trialAvailable && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column", margin: { bottom: 8 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(
+      const t = this.theme;
+      return /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column", width: "100%", padding: 10 } }, !this.streamData?.hasChannel && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column", margin: { bottom: 14 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(this.SectionHead, { label: "LIVE STREAM", color: C.btn }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "No streaming channel linked", fontSize: t.labelSmall, color: C.textDim, uiTransform: { margin: { bottom: 8 } } }), this.isOwner && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column" } }, this.streamData?.trialAvailable && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column", margin: { bottom: 10 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Button,
         {
-          uiTransform: { width: 180, height: 40, margin: { bottom: 4 } },
+          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..." : "\u{1F381} Start Free 4-Hour Trial",
-          fontSize: 11,
+          value: this.trialClaiming ? "Claiming..." : "Start Free 4-Hour Trial",
+          fontSize: t.button,
           color: C.text,
           onMouseDown: () => this.claimTrial()
         }
-      ), this.trialClaimError && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: this.trialClaimError, fontSize: 9, color: C.red }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "One-time trial \u2022 4 hours of streaming", fontSize: 8, color: C.textDim, uiTransform: { margin: { top: 2 } } })), !this.streamData?.trialAvailable && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column" } }, /* @__PURE__ */ import_react_ecs4.default.createElement(
+      ), this.trialClaimError && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: this.trialClaimError, fontSize: t.status, color: C.red }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "One-time trial \u2022 4 hours of streaming", fontSize: t.labelSmall, color: C.textDim, uiTransform: { margin: { top: 4 } } })), !this.streamData?.trialAvailable && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column" } }, /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Button,
         {
-          uiTransform: { width: 150, height: 36, margin: { bottom: 4 } },
+          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: 11,
+          fontSize: t.button,
           color: C.text,
           onMouseDown: () => this.createChannel()
         }
-      ), this.channelCreateError && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: this.channelCreateError, fontSize: 9, color: C.red }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "Relay tier \u2022 $25/mo \u2022 8 hours streaming", fontSize: 8, color: C.textDim, uiTransform: { margin: { top: 2 } } })))), this.streamData?.hasChannel && this.isOwner && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column", margin: { bottom: 12 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(this.SectionHead, { label: this.streamData.isLive ? "\u{1F534} LIVE STREAM" : "STREAM SETTINGS", color: this.streamData.isLive ? C.red : C.yellow }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 6 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(
+      ), this.channelCreateError && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: this.channelCreateError, fontSize: t.status, color: C.red }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { 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__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column", margin: { bottom: 14 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(this.SectionHead, { label: this.streamData.isLive ? "LIVE STREAM" : "STREAM SETTINGS", color: this.streamData.isLive ? C.red : C.yellow }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 8 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Label,
         {
           value: this.streamData.isLive ? `LIVE \u2022 ${this.streamData.currentViewers || 0} viewers` : "OFFLINE",
-          fontSize: 11,
+          fontSize: t.label,
           color: this.streamData.isLive ? C.red : C.textDim
         }
-      ), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: ` \u2022 ${this.streamData.tier?.toUpperCase() || "RELAY"}`, fontSize: 10, color: C.cyan }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: ` \u2022 ${this.streamData.sparksBalance || 0} Sparks`, fontSize: 10, color: C.textDim })), /* @__PURE__ */ import_react_ecs4.default.createElement(
+      ), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: ` \u2022 ${this.streamData.tier?.toUpperCase() || "RELAY"}`, fontSize: t.labelSmall, color: C.cyan }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: ` \u2022 ${this.streamData.sparksBalance || 0} Sparks`, fontSize: t.labelSmall, color: C.textDim })), /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Label,
         {
           value: `Channel: ${this.streamData.channelName || this.streamData.channelId}`,
-          fontSize: 9,
+          fontSize: t.labelSmall,
           color: C.textDim,
-          uiTransform: { margin: { bottom: 8 } }
+          uiTransform: { margin: { bottom: 10 } }
         }
-      ), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column", margin: { bottom: 4 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "RTMP Server:", fontSize: 9, color: C.textDim }), /* @__PURE__ */ import_react_ecs4.default.createElement(
+      ), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column", margin: { bottom: 6 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "RTMP Server:", fontSize: t.labelSmall, color: C.textDim }), /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Label,
         {
           value: this.streamData.rtmpUrl || "Loading...",
-          fontSize: 10,
+          fontSize: t.label,
           color: this.streamData.rtmpUrl ? C.text : C.textDim,
-          uiTransform: { margin: { left: 4 } }
+          uiTransform: { margin: { left: 6 } }
         }
-      )), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column", margin: { bottom: 4 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "Stream Key:", fontSize: 9, color: C.textDim }), /* @__PURE__ */ import_react_ecs4.default.createElement(
+      )), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column", margin: { bottom: 6 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "Stream Key:", fontSize: t.labelSmall, color: C.textDim }), /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Label,
         {
           value: this.streamData.streamKey || "Loading...",
-          fontSize: 10,
+          fontSize: t.label,
           color: this.streamData.streamKey ? C.cyan : C.textDim,
-          uiTransform: { margin: { left: 4 } }
+          uiTransform: { margin: { left: 6 } }
         }
-      )), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column", margin: { bottom: 8 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "HLS Playback:", fontSize: 9, color: C.textDim }), /* @__PURE__ */ import_react_ecs4.default.createElement(
+      )), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column", margin: { bottom: 10 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "HLS Playback:", fontSize: t.labelSmall, color: C.textDim }), /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Label,
         {
           value: this.streamData.hlsUrl || "Not available",
-          fontSize: 10,
+          fontSize: t.label,
           color: this.streamData.hlsUrl ? C.green : C.textDim,
-          uiTransform: { margin: { left: 4 } }
+          uiTransform: { margin: { left: 6 } }
         }
-      )), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 4 } } }, !this.streamData.isLive && /* @__PURE__ */ import_react_ecs4.default.createElement(
+      )), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 6 } } }, !this.streamData.isLive && /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Button,
         {
-          uiTransform: { width: 100, height: 32, margin: 3 },
+          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: 10,
+          fontSize: t.buttonSmall,
           color: C.text,
           onMouseDown: () => this.startStream()
         }
       ), this.streamData.isLive && /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Button,
         {
-          uiTransform: { width: 100, height: 32, margin: 3 },
+          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: 10,
+          fontSize: t.buttonSmall,
           color: C.text,
           onMouseDown: () => this.stopStream()
         }
       ), this.streamData.isLive && this.streamData.hlsUrl && /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Button,
         {
-          uiTransform: { width: 90, height: 32, margin: 3 },
+          uiTransform: { width: this.s(100), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
           uiBackground: { color: C.cyan },
           value: "Play on Screen",
-          fontSize: 9,
+          fontSize: t.buttonSmall,
           color: C.text,
           onMouseDown: () => this.config.onVideoPlay?.(this.streamData.hlsUrl)
         }
-      )), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 4 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(
+      )), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 6 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Button,
         {
-          uiTransform: { width: 70, height: 28, margin: 3 },
+          uiTransform: { width: this.s(80), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
           uiBackground: { color: C.btn },
           value: "Refresh",
-          fontSize: 9,
+          fontSize: t.buttonSmall,
           color: C.text,
           onMouseDown: () => this.refreshStreamStatus()
         }
       ), /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Button,
         {
-          uiTransform: { width: 85, height: 28, margin: 3 },
+          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: 9,
+          fontSize: t.buttonSmall,
           color: C.text,
           onMouseDown: () => this.rotateStreamKey()
         }
       ), !this.streamData.isLive && /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Button,
         {
-          uiTransform: { width: 60, height: 28, margin: 3 },
+          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: 9,
+          fontSize: t.buttonSmall,
           color: C.text,
           onMouseDown: () => this.deleteChannel()
         }
-      )), this.streamControlStatus === "started" && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "Stream started - begin broadcasting in OBS", fontSize: 9, color: C.green }), this.streamControlStatus === "stopped" && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "Stream stopped", fontSize: 9, color: C.textDim }), this.keyRotateStatus === "success" && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "Key rotated! Update OBS", fontSize: 9, color: C.green }), this.keyRotateStatus === "error" && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "Failed to rotate key", fontSize: 9, color: C.red }), this.channelDeleteError && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: this.channelDeleteError, fontSize: 9, color: C.red }), this.streamControlStatus === "error" && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "Stream control failed", fontSize: 9, color: C.red })), /* @__PURE__ */ import_react_ecs4.default.createElement(this.SectionHead, { label: "PLAY NOW", color: C.orange }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 12 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(
+      )), this.streamControlStatus === "started" && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "Stream started - begin broadcasting in OBS", fontSize: t.status, color: C.green }), this.streamControlStatus === "stopped" && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "Stream stopped", fontSize: t.status, color: C.textDim }), this.keyRotateStatus === "success" && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "Key rotated! Update OBS", fontSize: t.status, color: C.green }), this.keyRotateStatus === "error" && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "Failed to rotate key", fontSize: t.status, color: C.red }), this.channelDeleteError && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: this.channelDeleteError, fontSize: t.status, color: C.red }), this.streamControlStatus === "error" && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "Stream control failed", fontSize: t.status, color: C.red })), /* @__PURE__ */ import_react_ecs4.default.createElement(this.SectionHead, { label: "PLAY NOW", color: C.orange }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 14 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Input,
         {
-          uiTransform: { width: 220, height: 32 },
+          uiTransform: { width: this.s(230), height: this.s(UI_DIMENSIONS.admin.inputHeight) },
           uiBackground: { color: import_math5.Color4.create(0.15, 0.15, 0.2, 1) },
           placeholder: "Video URL...",
           placeholderColor: C.textDim,
           color: C.text,
-          fontSize: 11,
+          fontSize: t.input,
           value: this.customVideoUrl,
           onChange: (val) => {
             this.customVideoUrl = val;
@@ -2377,10 +2484,10 @@ var AdminPanelUIModule = class {
       ), /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Button,
         {
-          uiTransform: { width: 70, height: 32, margin: { left: 6 } },
+          uiTransform: { width: this.s(75), height: this.s(UI_DIMENSIONS.admin.inputHeight), margin: { left: 8 } },
           uiBackground: { color: C.green },
           value: "Play",
-          fontSize: 11,
+          fontSize: t.button,
           color: C.text,
           onMouseDown: () => {
             if (this.customVideoUrl) this.config.onVideoPlay?.(this.customVideoUrl);
@@ -2389,211 +2496,218 @@ var AdminPanelUIModule = class {
       ), /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Button,
         {
-          uiTransform: { width: 60, height: 32, margin: { left: 4 } },
+          uiTransform: { width: this.s(65), height: this.s(UI_DIMENSIONS.admin.inputHeight), margin: { left: 6 } },
           uiBackground: { color: C.btn },
           value: "Clear",
-          fontSize: 11,
+          fontSize: t.button,
           color: C.text,
           onMouseDown: () => {
             this.customVideoUrl = "";
           }
         }
-      )), /* @__PURE__ */ import_react_ecs4.default.createElement(this.SectionHead, { label: "PLAYBACK", color: C.green }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 12 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(
+      )), /* @__PURE__ */ import_react_ecs4.default.createElement(this.SectionHead, { label: "PLAYBACK", color: C.green }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 14 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Button,
         {
-          uiTransform: { width: 70, height: 32, margin: 3 },
+          uiTransform: { width: this.s(75), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
           uiBackground: { color: C.green },
           value: "Play",
-          fontSize: 11,
+          fontSize: t.button,
           color: C.text,
           onMouseDown: () => this.config.onCommand?.("videoPlay", { playing: true })
         }
       ), /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Button,
         {
-          uiTransform: { width: 70, height: 32, margin: 3 },
+          uiTransform: { width: this.s(75), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
           uiBackground: { color: C.red },
           value: "Stop",
-          fontSize: 11,
+          fontSize: t.button,
           color: C.text,
           onMouseDown: () => this.config.onVideoStop?.()
         }
       ), /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Button,
         {
-          uiTransform: { width: 90, height: 32, margin: 3 },
+          uiTransform: { width: this.s(100), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
           uiBackground: { color: C.btn },
           value: "Reset Default",
-          fontSize: 10,
+          fontSize: t.buttonSmall,
           color: C.text,
           onMouseDown: () => this.config.onCommand?.("videoClear", {})
         }
-      )), /* @__PURE__ */ import_react_ecs4.default.createElement(this.SectionHead, { label: "VIDEO SLOTS", color: C.cyan }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 8 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Button, { uiTransform: { width: 65, height: 32, margin: 3 }, uiBackground: { color: C.cyan }, value: "Play 1", fontSize: 11, color: C.text, onMouseDown: () => this.config.onVideoSlotPlay?.("slot1") }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Button, { uiTransform: { width: 65, height: 32, margin: 3 }, uiBackground: { color: C.cyan }, value: "Play 2", fontSize: 11, color: C.text, onMouseDown: () => this.config.onVideoSlotPlay?.("slot2") }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Button, { uiTransform: { width: 65, height: 32, margin: 3 }, uiBackground: { color: C.cyan }, value: "Play 3", fontSize: 11, color: C.text, onMouseDown: () => this.config.onVideoSlotPlay?.("slot3") }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Button, { uiTransform: { width: 65, height: 32, margin: 3 }, uiBackground: { color: C.cyan }, value: "Play 4", fontSize: 11, color: C.text, onMouseDown: () => this.config.onVideoSlotPlay?.("slot4") }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Button, { uiTransform: { width: 65, height: 32, margin: 3 }, uiBackground: { color: C.cyan }, value: "Play 5", fontSize: 11, color: C.text, onMouseDown: () => this.config.onVideoSlotPlay?.("slot5") })), /* @__PURE__ */ import_react_ecs4.default.createElement(
+      )), /* @__PURE__ */ import_react_ecs4.default.createElement(this.SectionHead, { label: "VIDEO SLOTS", color: C.cyan }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 10 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Button, { 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__ */ import_react_ecs4.default.createElement(import_react_ecs4.Button, { 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__ */ import_react_ecs4.default.createElement(import_react_ecs4.Button, { 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__ */ import_react_ecs4.default.createElement(import_react_ecs4.Button, { 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__ */ import_react_ecs4.default.createElement(import_react_ecs4.Button, { 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__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Button,
         {
-          uiTransform: { height: 20 },
+          uiTransform: { height: this.s(24) },
           uiBackground: { color: import_math5.Color4.create(0, 0, 0, 0) },
-          value: "Edit slots at thestatic.tv \u2192",
-          fontSize: 10,
+          value: "Edit slots at thestatic.tv",
+          fontSize: t.labelSmall,
           color: C.cyan,
           onMouseDown: () => (0, import_RestrictedActions3.openExternalUrl)({ url: this.config.footerLink || `https://thestatic.tv/scene/${this.config.sceneId}` })
         }
       ));
     };
-    this.ModTab = () => /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column", width: "100%", padding: 8 } }, this.modStatus === "loading" && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "Loading...", fontSize: 11, color: C.yellow }), this.modStatus === "saved" && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "Saved!", fontSize: 11, color: C.green }), this.modStatus === "error" && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "Error - check input", fontSize: 11, color: C.red }), /* @__PURE__ */ import_react_ecs4.default.createElement(this.SectionHead, { label: "BROADCAST", color: C.orange }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 12 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(
-      import_react_ecs4.Input,
-      {
-        uiTransform: { width: 200, height: 32 },
-        uiBackground: { color: import_math5.Color4.create(0.15, 0.15, 0.2, 1) },
-        placeholder: "Message to all players...",
-        placeholderColor: C.textDim,
-        color: C.text,
-        fontSize: 11,
-        value: this.broadcastText,
-        onChange: (val) => {
-          this.broadcastText = val;
+    this.ModTab = () => {
+      const t = this.theme;
+      return /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column", width: "100%", padding: 10 } }, this.modStatus === "loading" && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "Loading...", fontSize: t.status, color: C.yellow }), this.modStatus === "saved" && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "Saved!", fontSize: t.status, color: C.green }), this.modStatus === "error" && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "Error - check input", fontSize: t.status, color: C.red }), /* @__PURE__ */ import_react_ecs4.default.createElement(this.SectionHead, { label: "BROADCAST", color: C.orange }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 14 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(
+        import_react_ecs4.Input,
+        {
+          uiTransform: { width: this.s(230), height: this.s(UI_DIMENSIONS.admin.inputHeight) },
+          uiBackground: { color: import_math5.Color4.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__ */ import_react_ecs4.default.createElement(
-      import_react_ecs4.Button,
-      {
-        uiTransform: { width: 55, height: 32, margin: { left: 6 } },
-        uiBackground: { color: C.orange },
-        value: "Send",
-        fontSize: 11,
-        color: C.text,
-        onMouseDown: () => this.sendBroadcast()
-      }
-    )), /* @__PURE__ */ import_react_ecs4.default.createElement(this.SectionHead, { label: "CHAOS MODE", color: C.red }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 12 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(
-      import_react_ecs4.Button,
-      {
-        uiTransform: { width: 120, height: 32, margin: 3 },
-        uiBackground: { color: C.red },
-        value: "KICK ALL",
-        fontSize: 11,
-        color: C.text,
-        onMouseDown: () => this.config.onCommand?.("kickAll", {})
-      }
-    )), /* @__PURE__ */ import_react_ecs4.default.createElement(this.SectionHead, { label: "SCENE ADMINS", color: C.purple }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column", margin: { bottom: 4 } } }, this.sceneAdmins.length === 0 && this.modStatus !== "loading" && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "No scene admins", fontSize: 10, color: C.textDim }), this.sceneAdmins.map((wallet, i) => /* @__PURE__ */ import_react_ecs4.default.createElement(
-      import_react_ecs4.UiEntity,
-      {
-        key: `admin-${i}`,
-        uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 3 }, width: "100%" }
-      },
-      /* @__PURE__ */ import_react_ecs4.default.createElement(
-        import_react_ecs4.Label,
+      ), /* @__PURE__ */ import_react_ecs4.default.createElement(
+        import_react_ecs4.Button,
         {
-          value: `${wallet.slice(0, 6)}...${wallet.slice(-4)}`,
-          fontSize: 10,
+          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,
-          uiTransform: { width: 110 }
+          onMouseDown: () => this.sendBroadcast()
         }
-      ),
-      /* @__PURE__ */ import_react_ecs4.default.createElement(
+      )), /* @__PURE__ */ import_react_ecs4.default.createElement(this.SectionHead, { label: "CHAOS MODE", color: C.red }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 14 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Button,
         {
-          uiTransform: { width: 55, height: 24, margin: { left: 6 } },
-          uiBackground: { color: C.btn },
-          value: "Remove",
-          fontSize: 9,
+          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.removeSceneAdmin(wallet)
+          onMouseDown: () => {
+            this.log("KICK ALL clicked");
+            this.config.onCommand?.("kickAll", {});
+          }
         }
-      )
-    ))), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 12 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(
-      import_react_ecs4.Input,
-      {
-        uiTransform: { width: 200, height: 28 },
-        uiBackground: { color: import_math5.Color4.create(0.15, 0.15, 0.2, 1) },
-        placeholder: "0x... add admin",
-        placeholderColor: C.textDim,
-        color: C.text,
-        fontSize: 10,
-        value: this.newAdminWallet,
-        onChange: (val) => {
-          this.newAdminWallet = val;
+      )), /* @__PURE__ */ import_react_ecs4.default.createElement(this.SectionHead, { label: "SCENE ADMINS", color: C.purple }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column", margin: { bottom: 6 } } }, this.sceneAdmins.length === 0 && this.modStatus !== "loading" && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "No scene admins", fontSize: t.labelSmall, color: C.textDim }), this.sceneAdmins.map((wallet, i) => /* @__PURE__ */ import_react_ecs4.default.createElement(
+        import_react_ecs4.UiEntity,
+        {
+          key: `admin-${i}`,
+          uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 5 }, width: "100%" }
+        },
+        /* @__PURE__ */ import_react_ecs4.default.createElement(
+          import_react_ecs4.Label,
+          {
+            value: `${wallet.slice(0, 6)}...${wallet.slice(-4)}`,
+            fontSize: t.label,
+            color: C.text,
+            uiTransform: { width: this.s(130) }
+          }
+        ),
+        /* @__PURE__ */ import_react_ecs4.default.createElement(
+          import_react_ecs4.Button,
+          {
+            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__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 14 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(
+        import_react_ecs4.Input,
+        {
+          uiTransform: { width: this.s(230), height: this.s(UI_DIMENSIONS.admin.inputHeight) },
+          uiBackground: { color: import_math5.Color4.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__ */ import_react_ecs4.default.createElement(
-      import_react_ecs4.Button,
-      {
-        uiTransform: { width: 50, height: 28, margin: { left: 6 } },
-        uiBackground: { color: C.purple },
-        value: "Add",
-        fontSize: 10,
-        color: C.text,
-        onMouseDown: () => {
-          if (this.newAdminWallet) this.addSceneAdmin(this.newAdminWallet);
+      ), /* @__PURE__ */ import_react_ecs4.default.createElement(
+        import_react_ecs4.Button,
+        {
+          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__ */ import_react_ecs4.default.createElement(this.SectionHead, { label: "BANNED WALLETS", color: C.red }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column", margin: { bottom: 4 } } }, this.bannedWallets.length === 0 && this.modStatus !== "loading" && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "No banned wallets", fontSize: 10, color: C.textDim }), this.bannedWallets.map((wallet, i) => /* @__PURE__ */ import_react_ecs4.default.createElement(
-      import_react_ecs4.UiEntity,
-      {
-        key: `ban-${i}`,
-        uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 3 }, width: "100%" }
-      },
-      /* @__PURE__ */ import_react_ecs4.default.createElement(
-        import_react_ecs4.Label,
+      )), /* @__PURE__ */ import_react_ecs4.default.createElement(this.SectionHead, { label: "BANNED WALLETS", color: C.red }), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "column", margin: { bottom: 6 } } }, this.bannedWallets.length === 0 && this.modStatus !== "loading" && /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: "No banned wallets", fontSize: t.labelSmall, color: C.textDim }), this.bannedWallets.map((wallet, i) => /* @__PURE__ */ import_react_ecs4.default.createElement(
+        import_react_ecs4.UiEntity,
         {
-          value: `${wallet.slice(0, 6)}...${wallet.slice(-4)}`,
-          fontSize: 10,
-          color: C.red,
-          uiTransform: { width: 110 }
+          key: `ban-${i}`,
+          uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 5 }, width: "100%" }
+        },
+        /* @__PURE__ */ import_react_ecs4.default.createElement(
+          import_react_ecs4.Label,
+          {
+            value: `${wallet.slice(0, 6)}...${wallet.slice(-4)}`,
+            fontSize: t.label,
+            color: C.red,
+            uiTransform: { width: this.s(130) }
+          }
+        ),
+        /* @__PURE__ */ import_react_ecs4.default.createElement(
+          import_react_ecs4.Button,
+          {
+            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__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 10 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(
+        import_react_ecs4.Input,
+        {
+          uiTransform: { width: this.s(230), height: this.s(UI_DIMENSIONS.admin.inputHeight) },
+          uiBackground: { color: import_math5.Color4.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__ */ import_react_ecs4.default.createElement(
+      ), /* @__PURE__ */ import_react_ecs4.default.createElement(
         import_react_ecs4.Button,
         {
-          uiTransform: { width: 55, height: 24, margin: { left: 6 } },
-          uiBackground: { color: C.green },
-          value: "Unban",
-          fontSize: 9,
+          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: () => this.unbanWallet(wallet)
-        }
-      )
-    ))), /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 8 } } }, /* @__PURE__ */ import_react_ecs4.default.createElement(
-      import_react_ecs4.Input,
-      {
-        uiTransform: { width: 200, height: 28 },
-        uiBackground: { color: import_math5.Color4.create(0.15, 0.15, 0.2, 1) },
-        placeholder: "0x... ban wallet",
-        placeholderColor: C.textDim,
-        color: C.text,
-        fontSize: 10,
-        value: this.newBanWallet,
-        onChange: (val) => {
-          this.newBanWallet = val;
+          onMouseDown: () => {
+            if (this.newBanWallet) this.banWallet(this.newBanWallet);
+          }
         }
-      }
-    ), /* @__PURE__ */ import_react_ecs4.default.createElement(
-      import_react_ecs4.Button,
-      {
-        uiTransform: { width: 50, height: 28, margin: { left: 6 } },
-        uiBackground: { color: C.red },
-        value: "Ban",
-        fontSize: 10,
-        color: C.text,
-        onMouseDown: () => {
-          if (this.newBanWallet) this.banWallet(this.newBanWallet);
+      )), /* @__PURE__ */ import_react_ecs4.default.createElement(
+        import_react_ecs4.Button,
+        {
+          uiTransform: { height: this.s(24) },
+          uiBackground: { color: import_math5.Color4.create(0, 0, 0, 0) },
+          value: "Manage at thestatic.tv",
+          fontSize: t.labelSmall,
+          color: C.cyan,
+          onMouseDown: () => (0, import_RestrictedActions3.openExternalUrl)({ url: this.config.footerLink || `https://thestatic.tv/scene/${this.config.sceneId}` })
         }
-      }
-    )), /* @__PURE__ */ import_react_ecs4.default.createElement(
-      import_react_ecs4.Button,
-      {
-        uiTransform: { height: 20 },
-        uiBackground: { color: import_math5.Color4.create(0, 0, 0, 0) },
-        value: "Manage at thestatic.tv \u2192",
-        fontSize: 9,
-        color: C.cyan,
-        onMouseDown: () => (0, import_RestrictedActions3.openExternalUrl)({ 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 }));
@@ -2604,7 +2718,7 @@ var AdminPanelUIModule = class {
       if (this.config.showModTab !== false && this.isOwner) {
         tabs.push({ label: "MOD", id: "mod" });
       }
-      if (!tabs.find((t) => t.id === this.activeTab) && tabs.length > 0) {
+      if (!tabs.find((tab) => tab.id === this.activeTab) && tabs.length > 0) {
         this.activeTab = tabs[0].id;
       }
       return /* @__PURE__ */ import_react_ecs4.default.createElement(
@@ -2620,17 +2734,17 @@ var AdminPanelUIModule = class {
           import_react_ecs4.UiEntity,
           {
             uiTransform: {
-              position: { right: 16, bottom: 16 },
+              position: { right: 20 + this.s(100) + 10 + this.s(100) + 10, bottom: 10 },
               positionType: "absolute"
             }
           },
           /* @__PURE__ */ import_react_ecs4.default.createElement(
             import_react_ecs4.Button,
             {
-              uiTransform: { width: 90, height: 36 },
+              uiTransform: { width: this.s(100), height: this.s(45) },
               uiBackground: { color: this.panelOpen ? C.btn : C.header },
               value: this.panelOpen ? "CLOSE" : "ADMIN",
-              fontSize: 13,
+              fontSize: this.s(14),
               color: C.text,
               onMouseDown: () => this.toggle()
             }
@@ -2639,10 +2753,12 @@ var AdminPanelUIModule = class {
         this.panelOpen && /* @__PURE__ */ import_react_ecs4.default.createElement(
           import_react_ecs4.UiEntity,
           {
+            key: `admin-panel-${this.client.uiScale}`,
             uiTransform: {
-              width: 380,
-              maxHeight: 800,
-              position: { right: 16, bottom: 60 },
+              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"
             },
@@ -2653,16 +2769,28 @@ var AdminPanelUIModule = class {
             {
               uiTransform: {
                 width: "100%",
-                height: 44,
-                justifyContent: "center",
+                height: this.s(UI_DIMENSIONS.admin.headerHeight),
+                justifyContent: "space-between",
                 alignItems: "center",
-                flexDirection: "row"
+                flexDirection: "row",
+                padding: { left: 12, right: 8 }
               },
               uiBackground: { color: C.header }
             },
-            /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: this.config.title || "ADMIN PANEL", fontSize: 15, color: C.text })
+            /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.Label, { value: this.config.title || "ADMIN PANEL", fontSize: t.header, color: C.text }),
+            /* @__PURE__ */ import_react_ecs4.default.createElement(
+              import_react_ecs4.Button,
+              {
+                uiTransform: { width: this.s(28), height: this.s(28) },
+                uiBackground: { color: import_math5.Color4.create(0, 0, 0, 0.3) },
+                value: "X",
+                fontSize: t.header,
+                color: THEME.colors.red,
+                onMouseDown: () => this.hide()
+              }
+            )
           ),
-          /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { width: "100%", height: 36, flexDirection: "row" } }, tabs.map((tab) => /* @__PURE__ */ import_react_ecs4.default.createElement(this.TabBtn, { label: tab.label, tab: tab.id }))),
+          /* @__PURE__ */ import_react_ecs4.default.createElement(import_react_ecs4.UiEntity, { uiTransform: { width: "100%", height: this.s(UI_DIMENSIONS.admin.tabHeight), flexDirection: "row" } }, tabs.map((tab) => /* @__PURE__ */ import_react_ecs4.default.createElement(this.TabBtn, { label: tab.label, tab: tab.id }))),
           /* @__PURE__ */ import_react_ecs4.default.createElement(
             import_react_ecs4.UiEntity,
             {
@@ -2682,7 +2810,7 @@ var AdminPanelUIModule = class {
             {
               uiTransform: {
                 width: "100%",
-                height: 28,
+                height: this.s(UI_DIMENSIONS.admin.footerHeight),
                 justifyContent: "center",
                 alignItems: "center"
               },
@@ -2691,10 +2819,10 @@ var AdminPanelUIModule = class {
             /* @__PURE__ */ import_react_ecs4.default.createElement(
               import_react_ecs4.Button,
               {
-                uiTransform: { height: 20 },
+                uiTransform: { height: this.s(24) },
                 uiBackground: { color: import_math5.Color4.create(0, 0, 0, 0) },
-                value: `thestatic.tv/scene/${this.config.sceneId} \u2192`,
-                fontSize: 10,
+                value: `thestatic.tv/scene/${this.config.sceneId}`,
+                fontSize: t.labelSmall,
                 color: C.cyan,
                 onMouseDown: () => (0, import_RestrictedActions3.openExternalUrl)({ url: this.config.footerLink || `https://thestatic.tv/scene/${this.config.sceneId}` })
               }
@@ -2704,14 +2832,19 @@ var AdminPanelUIModule = class {
       );
     };
     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
+      ...config,
+      sceneId: config.sceneId
+      // Ensure sceneId is set
     };
-    this.baseUrl = client.baseUrl || "https://thestatic.tv/api/v1/dcl";
+    this.baseUrl = client.getBaseUrl();
     if (config.headerColor) {
       C.header = import_math5.Color4.create(
         config.headerColor.r,
@@ -2726,12 +2859,21 @@ var AdminPanelUIModule = class {
       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
+   * Initialize the admin panel - checks admin status and fetches video state
    */
   async init() {
-    await new Promise((resolve) => setTimeout(resolve, 3e3));
     await this.checkAdminStatus();
+    await this.fetchVideoState();
+    this.autoPlayDefault();
     this.log("Initialized");
   }
   /**
@@ -2744,17 +2886,23 @@ var AdminPanelUIModule = class {
       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.hasAccess;
-        this.isOwner = data.isOwner || data.isAdmin || data.isSceneAdmin;
+        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.");
-          setTimeout(() => this.banKickPlayer(), 2e3);
+          this.banKickPlayer();
           this.log("Player is banned - kicking");
         }
         this.log("Admin status:", this.isAdmin, "Owner:", this.isOwner);
@@ -2767,13 +2915,31 @@ var AdminPanelUIModule = class {
    * Toggle the admin panel open/closed
    */
   toggle() {
-    this.panelOpen = !this.panelOpen;
-    if (!this.panelOpen) {
-      this.stopStreamPolling();
-    } else if (this.activeTab === "video") {
+    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
    */
@@ -2787,8 +2953,8 @@ var AdminPanelUIModule = class {
     return this.isAdmin;
   }
   /**
-   * Register a custom scene tab (Full/Custom tier)
-   */
+     * Register a custom scene tab (Pro tier)
+     */
   registerSceneTab(tab) {
     if (!this.config.sceneTabs) {
       this.config.sceneTabs = [];
@@ -2799,7 +2965,7 @@ var AdminPanelUIModule = class {
   // --- Stream Polling ---
   startStreamPolling() {
     if (this.pollIntervalId !== null) return;
-    this.pollIntervalId = setInterval(() => {
+    this.pollIntervalId = dclSetInterval(() => {
       if (this.activeTab === "video" && this.panelOpen && this.streamData?.hasChannel) {
         this.refreshStreamStatus();
       }
@@ -2808,7 +2974,7 @@ var AdminPanelUIModule = class {
   }
   stopStreamPolling() {
     if (this.pollIntervalId !== null) {
-      clearInterval(this.pollIntervalId);
+      dclClearInterval(this.pollIntervalId);
       this.pollIntervalId = null;
       this.log("Stream polling stopped");
     }
@@ -2841,6 +3007,51 @@ var AdminPanelUIModule = class {
     } 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;
@@ -2957,9 +3168,6 @@ var AdminPanelUIModule = class {
         this.config.onBroadcast?.("Stream started!");
         this.streamFetched = false;
         await this.fetchStreamData();
-        setTimeout(() => {
-          this.streamControlStatus = "";
-        }, 3e3);
       } else {
         this.streamControlStatus = "error";
         this.log("Start stream failed:", data.error);
@@ -2992,9 +3200,6 @@ var AdminPanelUIModule = class {
         this.config.onBroadcast?.("Stream stopped");
         this.streamFetched = false;
         await this.fetchStreamData();
-        setTimeout(() => {
-          this.streamControlStatus = "";
-        }, 3e3);
       } else {
         this.streamControlStatus = "error";
         this.log("Stop stream failed:", data.error);
@@ -3024,9 +3229,6 @@ var AdminPanelUIModule = class {
         this.keyRotateStatus = "success";
         this.log("Key rotated:", data.message);
         this.config.onBroadcast?.("Stream key rotated - update OBS settings");
-        setTimeout(() => {
-          this.keyRotateStatus = "";
-        }, 3e3);
       } else {
         this.keyRotateStatus = "error";
         this.log("Key rotation failed:", data.error);
@@ -3086,9 +3288,6 @@ var AdminPanelUIModule = class {
         this.sceneAdmins = [...this.sceneAdmins, normalized];
         this.newAdminWallet = "";
         this.modStatus = "saved";
-        setTimeout(() => {
-          this.modStatus = "";
-        }, 2e3);
         this.log("Added scene admin:", normalized);
       } else {
         this.modStatus = "error";
@@ -3116,9 +3315,6 @@ var AdminPanelUIModule = class {
       if (res.ok) {
         this.sceneAdmins = this.sceneAdmins.filter((w) => w !== wallet);
         this.modStatus = "saved";
-        setTimeout(() => {
-          this.modStatus = "";
-        }, 2e3);
         this.log("Removed scene admin:", wallet);
       } else {
         this.modStatus = "error";
@@ -3153,9 +3349,6 @@ var AdminPanelUIModule = class {
         this.bannedWallets = [...this.bannedWallets, normalized];
         this.newBanWallet = "";
         this.modStatus = "saved";
-        setTimeout(() => {
-          this.modStatus = "";
-        }, 2e3);
         this.log("Banned wallet:", normalized);
         this.config.onCommand?.("kickBanned", { wallet: normalized });
       } else {
@@ -3184,9 +3377,6 @@ var AdminPanelUIModule = class {
       if (res.ok) {
         this.bannedWallets = this.bannedWallets.filter((w) => w !== wallet);
         this.modStatus = "saved";
-        setTimeout(() => {
-          this.modStatus = "";
-        }, 2e3);
         this.log("Unbanned wallet:", wallet);
       } else {
         this.modStatus = "error";
@@ -3220,7 +3410,89 @@ var AdminPanelUIModule = class {
   }
 };
 
+// src/ui/ui-renderer.tsx
+var import_react_ecs5 = __toESM(require("@dcl/sdk/react-ecs"));
+var import_math6 = require("@dcl/sdk/math");
+var import_ecs2 = require("@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;
+  import_ecs2.engine.addSystem(() => {
+    if (notificationVisible && Date.now() > notificationEndTime) {
+      notificationVisible = false;
+    }
+  });
+}
+function NotificationBanner() {
+  if (!notificationVisible) return null;
+  return /* @__PURE__ */ import_react_ecs5.default.createElement(
+    import_react_ecs5.UiEntity,
+    {
+      uiTransform: {
+        positionType: "absolute",
+        position: { top: 80 },
+        width: 500,
+        height: 60,
+        padding: 16,
+        alignSelf: "center",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      uiBackground: { color: import_math6.Color4.create(0.1, 0.1, 0.15, 0.95) }
+    },
+    /* @__PURE__ */ import_react_ecs5.default.createElement(
+      import_react_ecs5.Label,
+      {
+        value: notificationText,
+        fontSize: 18,
+        color: import_math6.Color4.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__ */ import_react_ecs5.default.createElement(
+      import_react_ecs5.UiEntity,
+      {
+        key: `static-ui-root-${currentScale}`,
+        uiTransform: {
+          width: "100%",
+          height: "100%",
+          positionType: "absolute",
+          flexDirection: "column",
+          alignItems: "center"
+        }
+      },
+      /* @__PURE__ */ import_react_ecs5.default.createElement(NotificationBanner, null),
+      guideComponent,
+      chatComponent,
+      adminComponent
+    );
+  };
+}
+function setupStaticUI(client) {
+  const StaticUI = createStaticUI(client);
+  import_react_ecs5.ReactEcsRenderer.setUiRenderer(StaticUI);
+}
+
 // src/StaticTVClient.ts
+var import_ecs3 = require("@dcl/sdk/ecs");
 var DEFAULT_BASE_URL = "https://thestatic.tv/api/v1/dcl";
 var KEY_TYPE_CHANNEL = "channel";
 var KEY_TYPE_SCENE = "scene";
@@ -3230,38 +3502,63 @@ var StaticTVClient = class {
    *
    * @param config Configuration options
    *
-   * @example
+   * @example Free tier (session tracking only):
    * ```typescript
-   * let staticTV: StaticTVClient
+   * const staticTV = new StaticTVClient({
+   *   apiKey: 'dcls_your_key_here'
+   * })
+   * ```
+   *
+   * @example Standard/Pro with video screen (SDK handles playback):
+   * ```typescript
+   * // Create your video screen
+   * const screen = engine.addEntity()
+   * Transform.create(screen, { position: Vector3.create(8, 3, 14), scale: Vector3.create(8, 4.5, 0.1) })
+   * MeshRenderer.setPlane(screen)
+   *
+   * // SDK handles everything - Guide selection + Pro admin controls just work
+   * const staticTV = new StaticTVClient({
+   *   apiKey: 'dcls_your_key_here',
+   *   videoScreen: screen  // That's it! SDK manages video playback
+   * })
    *
    * export function main() {
-   *   // All keys use dcls_ prefix - features determined by subscription
-   *   staticTV = new StaticTVClient({
-   *     apiKey: 'dcls_your_key_here'
-   *   })
-   *   // Session tracking starts automatically!
+   *   staticTV.setupUI()
    * }
    * ```
    */
   constructor(config) {
     this._keyType = null;
+    this._keyId = null;
     this._disabled = false;
-    this._fullFeaturesEnabled = false;
+    this._tier = "free";
+    this._standardFeaturesEnabled = false;
     this._proFeaturesEnabled = false;
-    /** Guide module - fetch channel lineup (full SDK only) */
+    this._pendingProConfig = null;
+    this._featuresResolved = false;
+    /** 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 SDK only) */
+    /** 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;
+    // =============================================================================
+    // --- VIDEO PLAYBACK (Internal handler for videoScreen) ---
+    // =============================================================================
+    this._currentVideoUrl = "";
+    this._featuresReadyPromise = new Promise((resolve) => {
+      this._featuresReadyResolve = resolve;
+    });
     this.config = {
       autoStartSession: true,
       sessionHeartbeatInterval: 3e4,
@@ -3271,7 +3568,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;
@@ -3280,6 +3576,7 @@ var StaticTVClient = class {
       this.interactions = null;
       this.guideUI = null;
       this.chatUI = null;
+      this._resolveFeaturesReady("free");
       return;
     }
     if (config.apiKey.startsWith("dclk_")) {
@@ -3287,14 +3584,17 @@ 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;
+      this._resolveFeaturesReady("free");
       return;
     }
     this.session = new SessionModule(this);
     if (this._keyType === KEY_TYPE_CHANNEL) {
-      this._initFullModules();
+      this._tier = "standard";
+      this._initStandardModules();
+      this._resolveFeaturesReady("standard");
     }
     if (this.config.autoStartSession) {
       fetchUserData().then(() => {
@@ -3310,6 +3610,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)
    */
@@ -3323,11 +3627,52 @@ 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;
+  }
+  /**
+   * Wait for tier confirmation from the server.
+   * Resolves when the SDK knows which features are available.
+   *
+   * Use this instead of polling `isLite` or `isFree` in a while loop.
+   *
+   * @returns Promise that resolves with the confirmed tier ('free', 'standard', or 'pro')
+   *
+   * @example
+   * ```typescript
+   * const staticTV = new StaticTVClient({ apiKey: 'dcls_...' })
+   *
+   * // Wait for tier to be confirmed
+   * const tier = await staticTV.onFeaturesReady()
+   *
+   * // Now modules are guaranteed to be initialized (or confirmed unavailable)
+   * if (staticTV.guideUI) {
+   *   await staticTV.guideUI.init()
+   *   console.log('Guide ready!')
+   * }
+   *
+   * if (tier === 'free') {
+   *   console.log('Upgrade at thestatic.tv for Guide & Chat!')
+   * }
+   * ```
+   */
+  async onFeaturesReady() {
+    return this._featuresReadyPromise;
   }
   /**
    * Make an authenticated API request
@@ -3345,14 +3690,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
@@ -3361,35 +3721,190 @@ var StaticTVClient = class {
     return this.config;
   }
   /**
-   * Initialize full feature modules (guide, heartbeat, interactions, UI)
+   * Play a video on the configured videoScreen entity.
+   * Called by Guide UI and Admin Panel.
+   *
+   * @param url Video URL to play
+   */
+  playVideo(url) {
+    const screen = this.config.videoScreen;
+    if (screen !== void 0) {
+      this.log(`Playing video: ${url}`);
+      this._currentVideoUrl = url;
+      if (import_ecs3.VideoPlayer.has(screen)) {
+        import_ecs3.VideoPlayer.deleteFrom(screen);
+      }
+      import_ecs3.VideoPlayer.create(screen, {
+        src: url,
+        playing: true,
+        volume: 1
+      });
+      import_ecs3.Material.setBasicMaterial(screen, {
+        texture: import_ecs3.Material.Texture.Video({ videoPlayerEntity: screen })
+      });
+      if (this.guideUI) {
+        const videos = this.guideUI.getVideos();
+        const video = videos.find((v) => v.src === url);
+        if (video) {
+          this.guideUI.currentVideoId = video.id;
+        }
+      }
+    }
+    if (this.config.onVideoPlay) {
+      this.config.onVideoPlay(url);
+    }
+  }
+  /**
+   * Stop video playback on the configured videoScreen entity.
+   * Called by Admin Panel.
+   */
+  stopVideo() {
+    const screen = this.config.videoScreen;
+    if (screen !== void 0 && import_ecs3.VideoPlayer.has(screen)) {
+      this.log("Stopping video");
+      import_ecs3.VideoPlayer.getMutable(screen).playing = false;
+      this._currentVideoUrl = "";
+      if (this.guideUI) {
+        this.guideUI.currentVideoId = null;
+      }
+    }
+    if (this.config.onVideoStop) {
+      this.config.onVideoStop();
+    }
+  }
+  /**
+   * Get the currently playing video URL
+   */
+  get currentVideoUrl() {
+    return this._currentVideoUrl;
+  }
+  /**
+   * Internal handler for Guide video selection
+   * @internal
+   */
+  _handleGuideVideoSelect(video) {
+    if (video.src) {
+      this.playVideo(video.src);
+    }
+  }
+  /**
+   * Internal handler for broadcast messages
+   * @internal
+   */
+  _handleBroadcast(text) {
+    if (this.config.onBroadcast) {
+      this.config.onBroadcast(text);
+    } else {
+      this.showNotification(text);
+    }
+  }
+  /**
+   * 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);
+    const guideConfig = {
+      ...this.config.guideUI,
+      onVideoSelect: (video) => {
+        if (this.config.videoScreen !== void 0 || this.config.onVideoPlay) {
+          this._handleGuideVideoSelect(video);
+        }
+        if (this.config.guideUI?.onVideoSelect) {
+          this.config.guideUI.onVideoSelect(video);
+        }
+      }
+    };
+    this.guideUI = new GuideUIModule(this, guideConfig);
     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)");
+  }
+  /**
+   * Initialize pro feature modules (admin panel)
+   * @internal
+   */
+  _initProModules() {
+    if (this._proFeaturesEnabled) return;
+    const sceneId = this._pendingProConfig?.sceneId || this.config.sceneId || this._keyId || void 0;
+    if (!sceneId) {
+      this.log("Pro features: No sceneId and no keyId available - admin panel disabled");
+      return;
+    }
+    const adminConfig = {
+      sceneId,
+      // Use internal handlers that manage videoScreen + call user callbacks
+      onVideoPlay: (url) => this.playVideo(url),
+      onVideoStop: () => this.stopVideo(),
+      onBroadcast: (text) => this._handleBroadcast(text),
+      onCommand: this.config.onCommand || this._pendingProConfig?.onCommand,
+      // Merge other settings from enableProFeatures if provided
+      ...this._pendingProConfig
+    };
+    this.adminPanel = new AdminPanelUIModule(this, adminConfig);
+    this._proFeaturesEnabled = true;
+    this.adminPanel.init().catch((err) => {
+      this.log(`Admin panel init failed: ${err}`);
+    });
+    this.log(`Pro features enabled (admin panel) - sceneId: ${sceneId}`);
+  }
+  /**
+   * Resolve the features ready promise (only once)
+   * @internal
+   */
+  _resolveFeaturesReady(tier) {
+    if (!this._featuresResolved) {
+      this._featuresResolved = true;
+      this._featuresReadyResolve(tier);
+    }
+  }
+  /**
+   * 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") {
+      const hasVideoConfig = this.config.videoScreen !== void 0 || this.config.onVideoPlay !== void 0 || this.config.sceneId !== void 0 || this._pendingProConfig !== null;
+      if (hasVideoConfig) {
+        this._initProModules();
+      } else {
+        this.log("Pro tier detected but no video config - call enableProFeatures() or set videoScreen to enable admin panel");
+      }
+    }
+    this._resolveFeaturesReady(tier);
   }
   /**
-   * Called by SessionModule when server confirms sdkType is 'full'
-   * Enables guide, chat, heartbeat, and interactions modules
+   * @deprecated Use `_enableFeaturesForTier` instead
    * @internal
    */
   _enableFullFeatures() {
-    this._initFullModules();
+    this._enableFeaturesForTier("standard");
+  }
+  /**
+   * Check if standard features are enabled (guide, chat, etc.)
+   */
+  get hasStandardFeatures() {
+    return this._standardFeaturesEnabled;
   }
   /**
-   * Check if full features are enabled (server confirmed sdkType: 'full')
+   * @deprecated Use `hasStandardFeatures` instead
    */
   get hasFullFeatures() {
-    return this._fullFeaturesEnabled;
+    return this._standardFeaturesEnabled;
   }
   /**
    * Check if pro features are enabled (admin panel)
@@ -3398,64 +3913,121 @@ var StaticTVClient = class {
     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";
   }
   /**
-   * Enable Pro features (Admin Panel with Video + Mod tabs)
-   * Call this after creating the client to add admin panel functionality.
+   * Configure Pro features (Admin Panel with Video + Mod tabs)
+   *
+   * **OPTIONAL**: If you set `videoScreen` in the constructor, you don't need
+   * to call this method - the Admin Panel will auto-enable with sensible defaults.
+   *
+   * Use this method only if you need:
+   * - Custom scene tab UI
+   * - Custom panel title/styling
+   * - Advanced command handlers
    *
    * @param config Admin panel configuration
    *
-   * @example
+   * @example Using videoScreen (recommended - no enableProFeatures needed):
    * ```typescript
-   * const staticTV = new StaticTVClient({ apiKey: 'dcls_...' })
+   * const staticTV = new StaticTVClient({
+   *   apiKey: 'dcls_...',
+   *   videoScreen: myScreen  // Admin Panel auto-enabled for Pro tier!
+   * })
+   * ```
    *
-   * // Enable admin panel
+   * @example Advanced: Custom scene tabs
+   * ```typescript
    * staticTV.enableProFeatures({
-   *   sceneId: 'my-scene',
    *   title: 'MY SCENE ADMIN',
-   *   onVideoPlay: (url) => videoPlayer.play(url),
-   *   onVideoStop: () => videoPlayer.stop(),
-   *   onBroadcast: (text) => showNotification(text)
+   *   sceneTabs: [{ label: 'LIGHTS', id: 'lights', render: () => <LightsTab /> }]
    * })
    * ```
    */
-  enableProFeatures(config) {
+  enableProFeatures(config = {}) {
     if (this._proFeaturesEnabled) {
       this.log("Pro features already enabled");
       return;
     }
-    this.adminPanel = new AdminPanelUIModule(this, config);
-    this._proFeaturesEnabled = true;
-    this.adminPanel.init().catch((err) => {
-      this.log(`Admin panel init failed: ${err}`);
-    });
-    this.log("Pro features enabled (admin panel)");
+    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");
   }
   /**
-   * Register a custom scene tab for the admin panel (Full/Custom tier)
-   * Must call enableProFeatures() first.
+   * Show a notification message on screen
+   * Works with both SDK-rendered UI and custom UI setups.
    *
-   * @param tab The tab definition with label, id, and render function
+   * @param message The message to display
+   * @param durationMs How long to show (default 5000ms)
    *
    * @example
    * ```typescript
-   * staticTV.registerSceneTab({
-   *   label: 'LIGHTS',
-   *   id: 'lights',
-   *   render: () => <MyLightsControls />
-   * })
+   * staticTV.showNotification('Stream started!')
+   * staticTV.showNotification('Custom message', 10000) // 10 seconds
    * ```
    */
-  registerSceneTab(tab) {
-    if (!this.adminPanel) {
-      this.log("Cannot register scene tab - call enableProFeatures() first");
-      return;
-    }
-    this.adminPanel.registerSceneTab(tab);
+  showNotification(message, durationMs = 5e3) {
+    showNotification(message, durationMs);
   }
   /**
    * Cleanup when done (call before scene unload)
@@ -3491,5 +4063,7 @@ var StaticTVClient = class {
   StaticTVClient,
   fetchUserData,
   getPlayerDisplayName,
-  getPlayerWallet
+  getPlayerWallet,
+  setupStaticUI,
+  showNotification
 });