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

package/dist/index.mjs

@@ -96,8 +96,8 @@ function getPlayerWallet() {
     return cachedWallet;
   }
   try {
-    const { getPlayer: getPlayer2 } = __require("@dcl/sdk/players");
-    const player = getPlayer2();
+    const { getPlayer: getPlayer3 } = __require("@dcl/sdk/players");
+    const player = getPlayer3();
     return player?.userId ?? null;
   } catch {
     return null;
@@ -108,8 +108,8 @@ function getPlayerDisplayName() {
     return cachedDisplayName;
   }
   try {
-    const { getPlayer: getPlayer2 } = __require("@dcl/sdk/players");
-    const player = getPlayer2();
+    const { getPlayer: getPlayer3 } = __require("@dcl/sdk/players");
+    const player = getPlayer3();
     return player?.name ?? null;
   } catch {
     return null;
@@ -2121,6 +2121,1064 @@ var ChatUIModule = class {
   }
 };
 
+// src/ui/admin-panel-ui.tsx
+import ReactEcs4, { UiEntity as UiEntity4, Button as Button3, Label as Label4, Input as Input4 } from "@dcl/sdk/react-ecs";
+import { Color4 as Color45, Vector3 } from "@dcl/sdk/math";
+import { getPlayer as getPlayer2 } from "@dcl/sdk/players";
+import { movePlayerTo, openExternalUrl as openExternalUrl3 } from "~system/RestrictedActions";
+var BAN_KICK_POSITION = Vector3.create(16, -50, 16);
+var C = {
+  bg: Color45.create(0.08, 0.08, 0.12, 0.98),
+  header: Color45.create(0.9, 0.15, 0.15, 1),
+  tabActive: Color45.create(0, 0.7, 0.7, 1),
+  tabInactive: Color45.create(0.15, 0.15, 0.2, 1),
+  section: Color45.create(0.12, 0.12, 0.18, 1),
+  btn: Color45.create(0.2, 0.2, 0.28, 1),
+  cyan: Color45.create(0, 0.8, 0.8, 1),
+  magenta: Color45.create(0.85, 0.2, 0.55, 1),
+  yellow: Color45.create(0.95, 0.75, 0.1, 1),
+  green: Color45.create(0.2, 0.75, 0.3, 1),
+  red: Color45.create(0.85, 0.2, 0.2, 1),
+  purple: Color45.create(0.6, 0.3, 0.85, 1),
+  orange: Color45.create(0.95, 0.5, 0.15, 1),
+  text: Color45.White(),
+  textDim: Color45.create(0.6, 0.6, 0.7, 1)
+};
+var AdminPanelUIModule = class {
+  constructor(client, config) {
+    // State
+    this.isAdmin = false;
+    this.isOwner = false;
+    this.panelOpen = false;
+    this.activeTab = "video";
+    this.playerWallet = "";
+    // Video tab state
+    this.customVideoUrl = "";
+    this.streamData = null;
+    this.streamFetched = false;
+    this.channelCreating = false;
+    this.channelCreateError = "";
+    this.channelDeleting = false;
+    this.channelDeleteError = "";
+    this.keyRotating = false;
+    this.keyRotateStatus = "";
+    this.streamControlling = false;
+    this.streamControlStatus = "";
+    this.pollIntervalId = null;
+    this.trialClaiming = false;
+    this.trialClaimError = "";
+    // Mod tab state
+    this.sceneAdmins = [];
+    this.bannedWallets = [];
+    this.newAdminWallet = "";
+    this.newBanWallet = "";
+    this.broadcastText = "";
+    this.modStatus = "";
+    this.modsFetched = false;
+    // --- UI Components ---
+    this.SectionHead = ({ label, color }) => /* @__PURE__ */ ReactEcs4.createElement(
+      UiEntity4,
+      {
+        uiTransform: { width: "100%", height: 24, margin: { bottom: 6 }, padding: { left: 8 }, alignItems: "center" },
+        uiBackground: { color: Color45.create(color.r * 0.3, color.g * 0.3, color.b * 0.3, 0.5) }
+      },
+      /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: label, fontSize: 12, color })
+    );
+    this.TabBtn = ({ label, tab }) => /* @__PURE__ */ ReactEcs4.createElement(
+      Button3,
+      {
+        uiTransform: { flexGrow: 1, height: 36, justifyContent: "center", alignItems: "center" },
+        uiBackground: { color: this.activeTab === tab ? C.tabActive : C.tabInactive },
+        value: label,
+        fontSize: 12,
+        color: this.activeTab === tab ? Color45.Black() : C.text,
+        textAlign: "middle-center",
+        onMouseDown: () => this.setActiveTab(tab)
+      }
+    );
+    this.VideoTab = () => {
+      if (!this.streamFetched) {
+        this.fetchStreamData();
+      }
+      return /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", width: "100%", padding: 8 } }, !this.streamData?.hasChannel && /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 12 } } }, /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "LIVE STREAM", color: C.btn }), /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "No streaming channel linked", fontSize: 10, color: C.textDim, uiTransform: { margin: { bottom: 6 } } }), this.isOwner && /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column" } }, this.streamData?.trialAvailable && /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 8 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: 180, height: 40, margin: { bottom: 4 } },
+          uiBackground: { color: this.trialClaiming ? C.btn : C.green },
+          value: this.trialClaiming ? "Claiming..." : "\u{1F381} Start Free 4-Hour Trial",
+          fontSize: 11,
+          color: C.text,
+          onMouseDown: () => this.claimTrial()
+        }
+      ), this.trialClaimError && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: this.trialClaimError, fontSize: 9, color: C.red }), /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "One-time trial \u2022 4 hours of streaming", fontSize: 8, color: C.textDim, uiTransform: { margin: { top: 2 } } })), !this.streamData?.trialAvailable && /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column" } }, /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: 150, height: 36, margin: { bottom: 4 } },
+          uiBackground: { color: this.channelCreating ? C.btn : C.cyan },
+          value: this.channelCreating ? "Creating..." : "+ Create Channel",
+          fontSize: 11,
+          color: C.text,
+          onMouseDown: () => this.createChannel()
+        }
+      ), this.channelCreateError && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: this.channelCreateError, fontSize: 9, color: C.red }), /* @__PURE__ */ ReactEcs4.createElement(Label4, { 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__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 12 } } }, /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: this.streamData.isLive ? "\u{1F534} LIVE STREAM" : "STREAM SETTINGS", color: this.streamData.isLive ? C.red : C.yellow }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 6 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+        Label4,
+        {
+          value: this.streamData.isLive ? `LIVE \u2022 ${this.streamData.currentViewers || 0} viewers` : "OFFLINE",
+          fontSize: 11,
+          color: this.streamData.isLive ? C.red : C.textDim
+        }
+      ), /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: ` \u2022 ${this.streamData.tier?.toUpperCase() || "RELAY"}`, fontSize: 10, color: C.cyan }), /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: ` \u2022 ${this.streamData.sparksBalance || 0} Sparks`, fontSize: 10, color: C.textDim })), /* @__PURE__ */ ReactEcs4.createElement(
+        Label4,
+        {
+          value: `Channel: ${this.streamData.channelName || this.streamData.channelId}`,
+          fontSize: 9,
+          color: C.textDim,
+          uiTransform: { margin: { bottom: 8 } }
+        }
+      ), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 4 } } }, /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "RTMP Server:", fontSize: 9, color: C.textDim }), /* @__PURE__ */ ReactEcs4.createElement(
+        Label4,
+        {
+          value: this.streamData.rtmpUrl || "Loading...",
+          fontSize: 10,
+          color: this.streamData.rtmpUrl ? C.text : C.textDim,
+          uiTransform: { margin: { left: 4 } }
+        }
+      )), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 4 } } }, /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Stream Key:", fontSize: 9, color: C.textDim }), /* @__PURE__ */ ReactEcs4.createElement(
+        Label4,
+        {
+          value: this.streamData.streamKey || "Loading...",
+          fontSize: 10,
+          color: this.streamData.streamKey ? C.cyan : C.textDim,
+          uiTransform: { margin: { left: 4 } }
+        }
+      )), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 8 } } }, /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "HLS Playback:", fontSize: 9, color: C.textDim }), /* @__PURE__ */ ReactEcs4.createElement(
+        Label4,
+        {
+          value: this.streamData.hlsUrl || "Not available",
+          fontSize: 10,
+          color: this.streamData.hlsUrl ? C.green : C.textDim,
+          uiTransform: { margin: { left: 4 } }
+        }
+      )), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 4 } } }, !this.streamData.isLive && /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: 100, height: 32, margin: 3 },
+          uiBackground: { color: this.streamControlling ? C.btn : C.green },
+          value: this.streamControlling ? "Starting..." : "Start Stream",
+          fontSize: 10,
+          color: C.text,
+          onMouseDown: () => this.startStream()
+        }
+      ), this.streamData.isLive && /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: 100, height: 32, margin: 3 },
+          uiBackground: { color: this.streamControlling ? C.btn : C.red },
+          value: this.streamControlling ? "Stopping..." : "Stop Stream",
+          fontSize: 10,
+          color: C.text,
+          onMouseDown: () => this.stopStream()
+        }
+      ), this.streamData.isLive && this.streamData.hlsUrl && /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: 90, height: 32, margin: 3 },
+          uiBackground: { color: C.cyan },
+          value: "Play on Screen",
+          fontSize: 9,
+          color: C.text,
+          onMouseDown: () => this.config.onVideoPlay?.(this.streamData.hlsUrl)
+        }
+      )), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 4 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: 70, height: 28, margin: 3 },
+          uiBackground: { color: C.btn },
+          value: "Refresh",
+          fontSize: 9,
+          color: C.text,
+          onMouseDown: () => this.refreshStreamStatus()
+        }
+      ), /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: 85, height: 28, margin: 3 },
+          uiBackground: { color: this.keyRotating ? C.btn : C.yellow },
+          value: this.keyRotating ? "..." : "Rotate Key",
+          fontSize: 9,
+          color: C.text,
+          onMouseDown: () => this.rotateStreamKey()
+        }
+      ), !this.streamData.isLive && /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: 60, height: 28, margin: 3 },
+          uiBackground: { color: this.channelDeleting ? C.btn : C.red },
+          value: this.channelDeleting ? "..." : "Delete",
+          fontSize: 9,
+          color: C.text,
+          onMouseDown: () => this.deleteChannel()
+        }
+      )), this.streamControlStatus === "started" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Stream started - begin broadcasting in OBS", fontSize: 9, color: C.green }), this.streamControlStatus === "stopped" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Stream stopped", fontSize: 9, color: C.textDim }), this.keyRotateStatus === "success" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Key rotated! Update OBS", fontSize: 9, color: C.green }), this.keyRotateStatus === "error" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Failed to rotate key", fontSize: 9, color: C.red }), this.channelDeleteError && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: this.channelDeleteError, fontSize: 9, color: C.red }), this.streamControlStatus === "error" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Stream control failed", fontSize: 9, color: C.red })), /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "PLAY NOW", color: C.orange }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 12 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+        Input4,
+        {
+          uiTransform: { width: 220, height: 32 },
+          uiBackground: { color: Color45.create(0.15, 0.15, 0.2, 1) },
+          placeholder: "Video URL...",
+          placeholderColor: C.textDim,
+          color: C.text,
+          fontSize: 11,
+          value: this.customVideoUrl,
+          onChange: (val) => {
+            this.customVideoUrl = val;
+          }
+        }
+      ), /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: 70, height: 32, margin: { left: 6 } },
+          uiBackground: { color: C.green },
+          value: "Play",
+          fontSize: 11,
+          color: C.text,
+          onMouseDown: () => {
+            if (this.customVideoUrl) this.config.onVideoPlay?.(this.customVideoUrl);
+          }
+        }
+      ), /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: 60, height: 32, margin: { left: 4 } },
+          uiBackground: { color: C.btn },
+          value: "Clear",
+          fontSize: 11,
+          color: C.text,
+          onMouseDown: () => {
+            this.customVideoUrl = "";
+          }
+        }
+      )), /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "PLAYBACK", color: C.green }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 12 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: 70, height: 32, margin: 3 },
+          uiBackground: { color: C.green },
+          value: "Play",
+          fontSize: 11,
+          color: C.text,
+          onMouseDown: () => this.config.onCommand?.("videoPlay", { playing: true })
+        }
+      ), /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: 70, height: 32, margin: 3 },
+          uiBackground: { color: C.red },
+          value: "Stop",
+          fontSize: 11,
+          color: C.text,
+          onMouseDown: () => this.config.onVideoStop?.()
+        }
+      ), /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: 90, height: 32, margin: 3 },
+          uiBackground: { color: C.btn },
+          value: "Reset Default",
+          fontSize: 10,
+          color: C.text,
+          onMouseDown: () => this.config.onCommand?.("videoClear", {})
+        }
+      )), /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "VIDEO SLOTS", color: C.cyan }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 8 } } }, /* @__PURE__ */ ReactEcs4.createElement(Button3, { 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__ */ ReactEcs4.createElement(Button3, { 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__ */ ReactEcs4.createElement(Button3, { 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__ */ ReactEcs4.createElement(Button3, { 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__ */ ReactEcs4.createElement(Button3, { 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__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { height: 20 },
+          uiBackground: { color: Color45.create(0, 0, 0, 0) },
+          value: "Edit slots at thestatic.tv \u2192",
+          fontSize: 10,
+          color: C.cyan,
+          onMouseDown: () => openExternalUrl3({ url: this.config.footerLink || `https://thestatic.tv/scene/${this.config.sceneId}` })
+        }
+      ));
+    };
+    this.ModTab = () => /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", width: "100%", padding: 8 } }, this.modStatus === "loading" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Loading...", fontSize: 11, color: C.yellow }), this.modStatus === "saved" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Saved!", fontSize: 11, color: C.green }), this.modStatus === "error" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Error - check input", fontSize: 11, color: C.red }), /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "BROADCAST", color: C.orange }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 12 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+      Input4,
+      {
+        uiTransform: { width: 200, height: 32 },
+        uiBackground: { color: Color45.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;
+        }
+      }
+    ), /* @__PURE__ */ ReactEcs4.createElement(
+      Button3,
+      {
+        uiTransform: { width: 55, height: 32, margin: { left: 6 } },
+        uiBackground: { color: C.orange },
+        value: "Send",
+        fontSize: 11,
+        color: C.text,
+        onMouseDown: () => this.sendBroadcast()
+      }
+    )), /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "CHAOS MODE", color: C.red }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 12 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+      Button3,
+      {
+        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__ */ ReactEcs4.createElement(this.SectionHead, { label: "SCENE ADMINS", color: C.purple }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 4 } } }, this.sceneAdmins.length === 0 && this.modStatus !== "loading" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "No scene admins", fontSize: 10, color: C.textDim }), this.sceneAdmins.map((wallet, i) => /* @__PURE__ */ ReactEcs4.createElement(
+      UiEntity4,
+      {
+        key: `admin-${i}`,
+        uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 3 }, width: "100%" }
+      },
+      /* @__PURE__ */ ReactEcs4.createElement(
+        Label4,
+        {
+          value: `${wallet.slice(0, 6)}...${wallet.slice(-4)}`,
+          fontSize: 10,
+          color: C.text,
+          uiTransform: { width: 110 }
+        }
+      ),
+      /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: 55, height: 24, margin: { left: 6 } },
+          uiBackground: { color: C.btn },
+          value: "Remove",
+          fontSize: 9,
+          color: C.text,
+          onMouseDown: () => this.removeSceneAdmin(wallet)
+        }
+      )
+    ))), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 12 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+      Input4,
+      {
+        uiTransform: { width: 200, height: 28 },
+        uiBackground: { color: Color45.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__ */ ReactEcs4.createElement(
+      Button3,
+      {
+        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__ */ ReactEcs4.createElement(this.SectionHead, { label: "BANNED WALLETS", color: C.red }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 4 } } }, this.bannedWallets.length === 0 && this.modStatus !== "loading" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "No banned wallets", fontSize: 10, color: C.textDim }), this.bannedWallets.map((wallet, i) => /* @__PURE__ */ ReactEcs4.createElement(
+      UiEntity4,
+      {
+        key: `ban-${i}`,
+        uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 3 }, width: "100%" }
+      },
+      /* @__PURE__ */ ReactEcs4.createElement(
+        Label4,
+        {
+          value: `${wallet.slice(0, 6)}...${wallet.slice(-4)}`,
+          fontSize: 10,
+          color: C.red,
+          uiTransform: { width: 110 }
+        }
+      ),
+      /* @__PURE__ */ ReactEcs4.createElement(
+        Button3,
+        {
+          uiTransform: { width: 55, height: 24, margin: { left: 6 } },
+          uiBackground: { color: C.green },
+          value: "Unban",
+          fontSize: 9,
+          color: C.text,
+          onMouseDown: () => this.unbanWallet(wallet)
+        }
+      )
+    ))), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 8 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+      Input4,
+      {
+        uiTransform: { width: 200, height: 28 },
+        uiBackground: { color: Color45.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;
+        }
+      }
+    ), /* @__PURE__ */ ReactEcs4.createElement(
+      Button3,
+      {
+        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__ */ ReactEcs4.createElement(
+      Button3,
+      {
+        uiTransform: { height: 20 },
+        uiBackground: { color: Color45.create(0, 0, 0, 0) },
+        value: "Manage at thestatic.tv \u2192",
+        fontSize: 9,
+        color: C.cyan,
+        onMouseDown: () => openExternalUrl3({ url: this.config.footerLink || `https://thestatic.tv/scene/${this.config.sceneId}` })
+      }
+    ));
+    /**
+     * Get the React-ECS component for the admin panel
+     */
+    this.getComponent = () => {
+      if (!this.isAdmin) return null;
+      const tabs = [];
+      if (this.config.sceneTabs && this.config.sceneTabs.length > 0) {
+        this.config.sceneTabs.forEach((tab) => tabs.push({ label: tab.label, id: tab.id }));
+      }
+      if (this.config.showVideoTab !== false) {
+        tabs.push({ label: "VIDEO", id: "video" });
+      }
+      if (this.config.showModTab !== false && this.isOwner) {
+        tabs.push({ label: "MOD", id: "mod" });
+      }
+      if (!tabs.find((t) => t.id === this.activeTab) && tabs.length > 0) {
+        this.activeTab = tabs[0].id;
+      }
+      return /* @__PURE__ */ ReactEcs4.createElement(
+        UiEntity4,
+        {
+          uiTransform: {
+            width: "100%",
+            height: "100%",
+            positionType: "absolute"
+          }
+        },
+        /* @__PURE__ */ ReactEcs4.createElement(
+          UiEntity4,
+          {
+            uiTransform: {
+              position: { right: 16, bottom: 16 },
+              positionType: "absolute"
+            }
+          },
+          /* @__PURE__ */ ReactEcs4.createElement(
+            Button3,
+            {
+              uiTransform: { width: 90, height: 36 },
+              uiBackground: { color: this.panelOpen ? C.btn : C.header },
+              value: this.panelOpen ? "CLOSE" : "ADMIN",
+              fontSize: 13,
+              color: C.text,
+              onMouseDown: () => this.toggle()
+            }
+          )
+        ),
+        this.panelOpen && /* @__PURE__ */ ReactEcs4.createElement(
+          UiEntity4,
+          {
+            uiTransform: {
+              width: 380,
+              maxHeight: 800,
+              position: { right: 16, bottom: 60 },
+              positionType: "absolute",
+              flexDirection: "column"
+            },
+            uiBackground: { color: C.bg }
+          },
+          /* @__PURE__ */ ReactEcs4.createElement(
+            UiEntity4,
+            {
+              uiTransform: {
+                width: "100%",
+                height: 44,
+                justifyContent: "center",
+                alignItems: "center",
+                flexDirection: "row"
+              },
+              uiBackground: { color: C.header }
+            },
+            /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: this.config.title || "ADMIN PANEL", fontSize: 15, color: C.text })
+          ),
+          /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { width: "100%", height: 36, flexDirection: "row" } }, tabs.map((tab) => /* @__PURE__ */ ReactEcs4.createElement(this.TabBtn, { label: tab.label, tab: tab.id }))),
+          /* @__PURE__ */ ReactEcs4.createElement(
+            UiEntity4,
+            {
+              uiTransform: {
+                width: "100%",
+                flexGrow: 1,
+                overflow: "scroll",
+                flexDirection: "column"
+              }
+            },
+            this.activeTab === "video" && /* @__PURE__ */ ReactEcs4.createElement(this.VideoTab, null),
+            this.activeTab === "mod" && this.isOwner && /* @__PURE__ */ ReactEcs4.createElement(this.ModTab, null),
+            this.config.sceneTabs?.map((tab) => this.activeTab === tab.id && tab.render())
+          ),
+          /* @__PURE__ */ ReactEcs4.createElement(
+            UiEntity4,
+            {
+              uiTransform: {
+                width: "100%",
+                height: 28,
+                justifyContent: "center",
+                alignItems: "center"
+              },
+              uiBackground: { color: C.section }
+            },
+            /* @__PURE__ */ ReactEcs4.createElement(
+              Button3,
+              {
+                uiTransform: { height: 20 },
+                uiBackground: { color: Color45.create(0, 0, 0, 0) },
+                value: `thestatic.tv/scene/${this.config.sceneId} \u2192`,
+                fontSize: 10,
+                color: C.cyan,
+                onMouseDown: () => openExternalUrl3({ url: this.config.footerLink || `https://thestatic.tv/scene/${this.config.sceneId}` })
+              }
+            )
+          )
+        )
+      );
+    };
+    this.client = client;
+    this.config = {
+      showVideoTab: true,
+      showModTab: true,
+      title: "ADMIN PANEL",
+      debug: false,
+      ...config
+    };
+    this.baseUrl = client.baseUrl || "https://thestatic.tv/api/v1/dcl";
+    if (config.headerColor) {
+      C.header = Color45.create(
+        config.headerColor.r,
+        config.headerColor.g,
+        config.headerColor.b,
+        config.headerColor.a
+      );
+    }
+  }
+  log(msg, ...args) {
+    if (this.config.debug) {
+      console.log(`[AdminPanel] ${msg}`, ...args);
+    }
+  }
+  /**
+   * Initialize the admin panel - checks admin status
+   */
+  async init() {
+    await new Promise((resolve) => setTimeout(resolve, 3e3));
+    await this.checkAdminStatus();
+    this.log("Initialized");
+  }
+  /**
+   * Check if current player is an admin for this scene
+   */
+  async checkAdminStatus() {
+    const player = getPlayer2();
+    if (!player?.userId) {
+      this.log("No player data yet");
+      return;
+    }
+    this.playerWallet = player.userId;
+    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;
+        if (data.isBanned) {
+          this.config.onBroadcast?.("You have been banned from this scene.");
+          setTimeout(() => this.banKickPlayer(), 2e3);
+          this.log("Player is banned - kicking");
+        }
+        this.log("Admin status:", this.isAdmin, "Owner:", this.isOwner);
+      }
+    } catch (err) {
+      this.log("Admin check error:", err);
+    }
+  }
+  /**
+   * Toggle the admin panel open/closed
+   */
+  toggle() {
+    this.panelOpen = !this.panelOpen;
+    if (!this.panelOpen) {
+      this.stopStreamPolling();
+    } else if (this.activeTab === "video") {
+      this.startStreamPolling();
+    }
+  }
+  /**
+   * Check if the panel is currently open
+   */
+  get isOpen() {
+    return this.panelOpen;
+  }
+  /**
+   * Check if current user has admin access
+   */
+  get hasAccess() {
+    return this.isAdmin;
+  }
+  /**
+   * Register a custom scene tab (Full/Custom tier)
+   */
+  registerSceneTab(tab) {
+    if (!this.config.sceneTabs) {
+      this.config.sceneTabs = [];
+    }
+    this.config.sceneTabs.push(tab);
+    this.log("Registered scene tab:", tab.label);
+  }
+  // --- Stream Polling ---
+  startStreamPolling() {
+    if (this.pollIntervalId !== null) return;
+    this.pollIntervalId = setInterval(() => {
+      if (this.activeTab === "video" && this.panelOpen && this.streamData?.hasChannel) {
+        this.refreshStreamStatus();
+      }
+    }, 1e4);
+    this.log("Stream polling started");
+  }
+  stopStreamPolling() {
+    if (this.pollIntervalId !== null) {
+      clearInterval(this.pollIntervalId);
+      this.pollIntervalId = null;
+      this.log("Stream polling stopped");
+    }
+  }
+  // --- Stream API Calls ---
+  async fetchStreamData() {
+    if (this.streamFetched || !this.playerWallet) return;
+    try {
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/stream?wallet=${this.playerWallet}`
+      );
+      if (res.ok) {
+        this.streamData = await res.json();
+        this.streamFetched = true;
+        this.log("Stream data fetched:", this.streamData?.channelId || "no channel");
+      }
+    } catch (err) {
+      this.log("Stream fetch error:", err);
+    }
+  }
+  async refreshStreamStatus() {
+    if (!this.playerWallet) return;
+    try {
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/stream?wallet=${this.playerWallet}`
+      );
+      if (res.ok) {
+        this.streamData = await res.json();
+      }
+    } catch (err) {
+    }
+  }
+  async createChannel() {
+    if (!this.playerWallet || this.channelCreating) return;
+    this.channelCreating = true;
+    this.channelCreateError = "";
+    try {
+      this.log("Creating channel for scene...");
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/stream/create`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ wallet: this.playerWallet })
+        }
+      );
+      const data = await res.json();
+      if (res.ok) {
+        this.log("Channel created:", data.channel);
+        this.streamFetched = false;
+        await this.fetchStreamData();
+        this.config.onBroadcast?.(`Channel created: ${data.channel.channelId}`);
+      } else {
+        this.channelCreateError = data.error || "Failed to create channel";
+        this.log("Channel creation failed:", data.error);
+      }
+    } catch (err) {
+      this.channelCreateError = "Network error creating channel";
+      this.log("Channel creation error:", err);
+    }
+    this.channelCreating = false;
+  }
+  async claimTrial() {
+    if (!this.playerWallet || this.trialClaiming) return;
+    this.trialClaiming = true;
+    this.trialClaimError = "";
+    try {
+      this.log("Claiming streaming trial...");
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/stream/claim-trial`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ wallet: this.playerWallet })
+        }
+      );
+      const data = await res.json();
+      if (res.ok) {
+        this.log("Trial claimed:", data.channel);
+        this.streamFetched = false;
+        await this.fetchStreamData();
+        this.config.onBroadcast?.(`4-hour streaming trial activated!`);
+      } else {
+        this.trialClaimError = data.error || "Failed to claim trial";
+        this.log("Trial claim failed:", data.error);
+      }
+    } catch (err) {
+      this.trialClaimError = "Network error claiming trial";
+      this.log("Trial claim error:", err);
+    }
+    this.trialClaiming = false;
+  }
+  async deleteChannel() {
+    if (!this.playerWallet || this.channelDeleting || !this.streamData?.hasChannel) return;
+    this.channelDeleting = true;
+    this.channelDeleteError = "";
+    try {
+      this.log("Deleting channel for scene...");
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/stream/delete`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ wallet: this.playerWallet })
+        }
+      );
+      const data = await res.json();
+      if (res.ok) {
+        this.log("Channel deleted:", data);
+        this.streamData = null;
+        this.streamFetched = false;
+        this.config.onBroadcast?.("Channel deleted successfully");
+      } else {
+        this.channelDeleteError = data.error || "Failed to delete channel";
+        this.log("Channel deletion failed:", data.error);
+      }
+    } catch (err) {
+      this.channelDeleteError = "Network error deleting channel";
+      this.log("Channel deletion error:", err);
+    }
+    this.channelDeleting = false;
+  }
+  async startStream() {
+    if (!this.playerWallet || this.streamControlling || !this.streamData?.hasChannel || this.streamData.isLive) return;
+    if ((this.streamData.sparksBalance || 0) <= 0) {
+      this.streamControlStatus = "error";
+      this.config.onBroadcast?.("No Sparks - cannot start stream");
+      return;
+    }
+    this.streamControlling = true;
+    this.streamControlStatus = "";
+    try {
+      this.log("Starting stream...");
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/stream`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ action: "start", wallet: this.playerWallet })
+        }
+      );
+      const data = await res.json();
+      if (res.ok) {
+        this.streamControlStatus = "started";
+        this.log("Stream started");
+        this.config.onBroadcast?.("Stream started!");
+        this.streamFetched = false;
+        await this.fetchStreamData();
+        setTimeout(() => {
+          this.streamControlStatus = "";
+        }, 3e3);
+      } else {
+        this.streamControlStatus = "error";
+        this.log("Start stream failed:", data.error);
+        this.config.onBroadcast?.(data.error || "Failed to start");
+      }
+    } catch (err) {
+      this.streamControlStatus = "error";
+      this.log("Start stream error:", err);
+    }
+    this.streamControlling = false;
+  }
+  async stopStream() {
+    if (!this.playerWallet || this.streamControlling || !this.streamData?.hasChannel || !this.streamData.isLive) return;
+    this.streamControlling = true;
+    this.streamControlStatus = "";
+    try {
+      this.log("Stopping stream...");
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/stream`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ action: "stop", wallet: this.playerWallet })
+        }
+      );
+      const data = await res.json();
+      if (res.ok) {
+        this.streamControlStatus = "stopped";
+        this.log("Stream stopped");
+        this.config.onBroadcast?.("Stream stopped");
+        this.streamFetched = false;
+        await this.fetchStreamData();
+        setTimeout(() => {
+          this.streamControlStatus = "";
+        }, 3e3);
+      } else {
+        this.streamControlStatus = "error";
+        this.log("Stop stream failed:", data.error);
+      }
+    } catch (err) {
+      this.streamControlStatus = "error";
+      this.log("Stop stream error:", err);
+    }
+    this.streamControlling = false;
+  }
+  async rotateStreamKey() {
+    if (!this.playerWallet || this.keyRotating || !this.streamData?.hasChannel) return;
+    this.keyRotating = true;
+    this.keyRotateStatus = "";
+    try {
+      this.log("Rotating stream key...");
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/stream`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ action: "rotateKey", wallet: this.playerWallet })
+        }
+      );
+      const data = await res.json();
+      if (res.ok) {
+        this.keyRotateStatus = "success";
+        this.log("Key rotated:", data.message);
+        this.config.onBroadcast?.("Stream key rotated - update OBS settings");
+        setTimeout(() => {
+          this.keyRotateStatus = "";
+        }, 3e3);
+      } else {
+        this.keyRotateStatus = "error";
+        this.log("Key rotation failed:", data.error);
+      }
+    } catch (err) {
+      this.keyRotateStatus = "error";
+      this.log("Key rotation error:", err);
+    }
+    this.keyRotating = false;
+  }
+  // --- Mod Tab API Calls ---
+  async fetchModData() {
+    if (!this.playerWallet) return;
+    this.modStatus = "loading";
+    try {
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/config?wallet=${this.playerWallet}`,
+        { headers: { "Content-Type": "application/json" } }
+      );
+      if (res.ok) {
+        const data = await res.json();
+        this.sceneAdmins = data.sceneAdmins || [];
+        this.bannedWallets = data.bannedWallets || [];
+        this.modsFetched = true;
+        this.modStatus = "";
+        this.log("Fetched mod data:", { sceneAdmins: this.sceneAdmins, bannedWallets: this.bannedWallets });
+      } else {
+        this.modStatus = "error";
+      }
+    } catch (err) {
+      this.modStatus = "error";
+      this.log("Fetch mod data error:", err);
+    }
+  }
+  async addSceneAdmin(wallet) {
+    if (!wallet || !this.playerWallet) return;
+    const normalized = wallet.toLowerCase().trim();
+    if (!/^0x[a-f0-9]{40}$/i.test(normalized)) {
+      this.modStatus = "error";
+      return;
+    }
+    if (this.sceneAdmins.includes(normalized)) return;
+    this.modStatus = "loading";
+    try {
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/config`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            sceneAdmins: [...this.sceneAdmins, normalized],
+            wallet: this.playerWallet
+          })
+        }
+      );
+      if (res.ok) {
+        this.sceneAdmins = [...this.sceneAdmins, normalized];
+        this.newAdminWallet = "";
+        this.modStatus = "saved";
+        setTimeout(() => {
+          this.modStatus = "";
+        }, 2e3);
+        this.log("Added scene admin:", normalized);
+      } else {
+        this.modStatus = "error";
+      }
+    } catch (err) {
+      this.modStatus = "error";
+      this.log("Add admin error:", err);
+    }
+  }
+  async removeSceneAdmin(wallet) {
+    if (!wallet || !this.playerWallet) return;
+    this.modStatus = "loading";
+    try {
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/config`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            sceneAdmins: this.sceneAdmins.filter((w) => w !== wallet),
+            wallet: this.playerWallet
+          })
+        }
+      );
+      if (res.ok) {
+        this.sceneAdmins = this.sceneAdmins.filter((w) => w !== wallet);
+        this.modStatus = "saved";
+        setTimeout(() => {
+          this.modStatus = "";
+        }, 2e3);
+        this.log("Removed scene admin:", wallet);
+      } else {
+        this.modStatus = "error";
+      }
+    } catch (err) {
+      this.modStatus = "error";
+      this.log("Remove admin error:", err);
+    }
+  }
+  async banWallet(wallet) {
+    if (!wallet || !this.playerWallet) return;
+    const normalized = wallet.toLowerCase().trim();
+    if (!/^0x[a-f0-9]{40}$/i.test(normalized)) {
+      this.modStatus = "error";
+      return;
+    }
+    if (this.bannedWallets.includes(normalized)) return;
+    this.modStatus = "loading";
+    try {
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/config`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            bannedWallets: [...this.bannedWallets, normalized],
+            wallet: this.playerWallet
+          })
+        }
+      );
+      if (res.ok) {
+        this.bannedWallets = [...this.bannedWallets, normalized];
+        this.newBanWallet = "";
+        this.modStatus = "saved";
+        setTimeout(() => {
+          this.modStatus = "";
+        }, 2e3);
+        this.log("Banned wallet:", normalized);
+        this.config.onCommand?.("kickBanned", { wallet: normalized });
+      } else {
+        this.modStatus = "error";
+      }
+    } catch (err) {
+      this.modStatus = "error";
+      this.log("Ban error:", err);
+    }
+  }
+  async unbanWallet(wallet) {
+    if (!wallet || !this.playerWallet) return;
+    this.modStatus = "loading";
+    try {
+      const res = await fetch(
+        `${this.baseUrl}/scene/${this.config.sceneId}/config`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            bannedWallets: this.bannedWallets.filter((w) => w !== wallet),
+            wallet: this.playerWallet
+          })
+        }
+      );
+      if (res.ok) {
+        this.bannedWallets = this.bannedWallets.filter((w) => w !== wallet);
+        this.modStatus = "saved";
+        setTimeout(() => {
+          this.modStatus = "";
+        }, 2e3);
+        this.log("Unbanned wallet:", wallet);
+      } else {
+        this.modStatus = "error";
+      }
+    } catch (err) {
+      this.modStatus = "error";
+      this.log("Unban error:", err);
+    }
+  }
+  banKickPlayer() {
+    movePlayerTo({ newRelativePosition: BAN_KICK_POSITION });
+    this.log("Player ban-kicked");
+  }
+  sendBroadcast() {
+    if (!this.broadcastText.trim()) return;
+    this.config.onBroadcast?.(this.broadcastText.trim());
+    this.broadcastText = "";
+    this.log("Broadcast sent");
+  }
+  setActiveTab(tab) {
+    const previousTab = this.activeTab;
+    this.activeTab = tab;
+    if (tab === "mod" && !this.modsFetched && this.isOwner) {
+      this.fetchModData();
+    }
+    if (tab === "video" && previousTab !== "video") {
+      this.startStreamPolling();
+    } else if (tab !== "video" && previousTab === "video") {
+      this.stopStreamPolling();
+    }
+  }
+};
+
 // src/StaticTVClient.ts
 var DEFAULT_BASE_URL = "https://thestatic.tv/api/v1/dcl";
 var KEY_TYPE_CHANNEL = "channel";
@@ -2133,22 +3191,22 @@ var StaticTVClient = class {
    *
    * @example
    * ```typescript
-   * // Full access with channel key
-   * const staticTV = new StaticTVClient({
-   *   apiKey: 'dclk_your_channel_key_here',
-   *   debug: true
-   * });
+   * let staticTV: StaticTVClient
    *
-   * // Lite mode with scene key (visitors only)
-   * const staticTV = new StaticTVClient({
-   *   apiKey: 'dcls_your_scene_key_here'
-   * });
+   * export function main() {
+   *   // All keys use dcls_ prefix - features determined by subscription
+   *   staticTV = new StaticTVClient({
+   *     apiKey: 'dcls_your_key_here'
+   *   })
+   *   // Session tracking starts automatically!
+   * }
    * ```
    */
   constructor(config) {
     this._keyType = null;
     this._disabled = false;
     this._fullFeaturesEnabled = false;
+    this._proFeaturesEnabled = false;
     /** Guide module - fetch channel lineup (full SDK only) */
     this.guide = null;
     /** Session module - track visitor sessions (all keys, null when disabled) */
@@ -2161,6 +3219,8 @@ var StaticTVClient = class {
     this.guideUI = null;
     /** Chat UI module - real-time chat UI (full SDK only) */
     this.chatUI = null;
+    /** Admin Panel module - Video/Mod tabs (pro SDK only) */
+    this.adminPanel = null;
     this.config = {
       autoStartSession: true,
       sessionHeartbeatInterval: 3e4,
@@ -2290,12 +3350,72 @@ var StaticTVClient = class {
   get hasFullFeatures() {
     return this._fullFeaturesEnabled;
   }
+  /**
+   * Check if pro features are enabled (admin panel)
+   */
+  get hasProFeatures() {
+    return this._proFeaturesEnabled;
+  }
   /**
    * Get the SDK type (lite or full) - only available after session starts
    */
   get sdkType() {
     return this.session?.sdkType || "lite";
   }
+  /**
+   * Enable Pro features (Admin Panel with Video + Mod tabs)
+   * Call this after creating the client to add admin panel functionality.
+   *
+   * @param config Admin panel configuration
+   *
+   * @example
+   * ```typescript
+   * const staticTV = new StaticTVClient({ apiKey: 'dcls_...' })
+   *
+   * // Enable admin panel
+   * staticTV.enableProFeatures({
+   *   sceneId: 'my-scene',
+   *   title: 'MY SCENE ADMIN',
+   *   onVideoPlay: (url) => videoPlayer.play(url),
+   *   onVideoStop: () => videoPlayer.stop(),
+   *   onBroadcast: (text) => showNotification(text)
+   * })
+   * ```
+   */
+  enableProFeatures(config) {
+    if (this._proFeaturesEnabled) {
+      this.log("Pro features already enabled");
+      return;
+    }
+    this.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)");
+  }
+  /**
+   * Register a custom scene tab for the admin panel (Full/Custom 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);
+  }
   /**
    * Cleanup when done (call before scene unload)
    */
@@ -2317,6 +3437,7 @@ var StaticTVClient = class {
   }
 };
 export {
+  AdminPanelUIModule,
   ChatUIModule,
   GuideModule,
   GuideUIModule,