@smoregg/sdk 0.4.1 → 0.6.0

package/dist/umd/smore-sdk.umd.js

@@ -1,382 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SmoreSDK = {}, global.ReactJSXRuntime, global.React));
-})(this, (function (exports, jsxRuntime, react) { 'use strict';
-
-  function styleInject(css, ref) {
-    if ( ref === void 0 ) ref = {};
-    var insertAt = ref.insertAt;
-
-    if (!css || typeof document === 'undefined') { return; }
-
-    var head = document.head || document.getElementsByTagName('head')[0];
-    var style = document.createElement('style');
-    style.type = 'text/css';
-
-    if (insertAt === 'top') {
-      if (head.firstChild) {
-        head.insertBefore(style, head.firstChild);
-      } else {
-        head.appendChild(style);
-      }
-    } else {
-      head.appendChild(style);
-    }
-
-    if (style.styleSheet) {
-      style.styleSheet.cssText = css;
-    } else {
-      style.appendChild(document.createTextNode(css));
-    }
-  }
-
-  var css_248z$3 = ".TapButton-module_tapButton__dqJr9{-webkit-tap-highlight-color:transparent;align-items:center;background:var(--color-primary,#6366f1);border:none;border-radius:16px;color:#fff;cursor:pointer;display:flex;font-size:18px;font-weight:700;justify-content:center;min-height:80px;min-width:80px;padding:16px 24px;touch-action:manipulation;transition:transform .1s ease,background .1s ease;user-select:none;-webkit-user-select:none}.TapButton-module_pressed__Z2nfR,.TapButton-module_tapButton__dqJr9:active{background:var(--color-primary-dark,#4f46e5);transform:scale(.95)}.TapButton-module_disabled__3bR6q{cursor:not-allowed;opacity:.5}.TapButton-module_disabled__3bR6q.TapButton-module_pressed__Z2nfR,.TapButton-module_disabled__3bR6q:active{background:var(--color-primary,#6366f1);transform:none}";
-  var styles$3 = {"tapButton":"TapButton-module_tapButton__dqJr9","pressed":"TapButton-module_pressed__Z2nfR","disabled":"TapButton-module_disabled__3bR6q"};
-  styleInject(css_248z$3);
-
-  function TapButton({
-    onTap,
-    children,
-    className,
-    disabled = false
-  }) {
-    const isPressed = react.useRef(false);
-    const buttonRef = react.useRef(null);
-    const handleTouchStart = react.useCallback((e) => {
-      if (disabled) return;
-      e.preventDefault();
-      isPressed.current = true;
-      buttonRef.current?.classList.add(styles$3.pressed);
-      if (navigator.vibrate) {
-        navigator.vibrate(10);
-      }
-      onTap();
-    }, [onTap, disabled]);
-    const handleTouchEnd = react.useCallback((e) => {
-      e.preventDefault();
-      isPressed.current = false;
-      buttonRef.current?.classList.remove(styles$3.pressed);
-    }, []);
-    const handleMouseDown = react.useCallback(() => {
-      if (disabled) return;
-      isPressed.current = true;
-      buttonRef.current?.classList.add(styles$3.pressed);
-      onTap();
-    }, [onTap, disabled]);
-    const handleMouseUp = react.useCallback(() => {
-      isPressed.current = false;
-      buttonRef.current?.classList.remove(styles$3.pressed);
-    }, []);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        ref: buttonRef,
-        className: `${styles$3.tapButton} ${className || ""} ${disabled ? styles$3.disabled : ""}`,
-        onTouchStart: handleTouchStart,
-        onTouchEnd: handleTouchEnd,
-        onTouchCancel: handleTouchEnd,
-        onMouseDown: handleMouseDown,
-        onMouseUp: handleMouseUp,
-        onMouseLeave: handleMouseUp,
-        disabled,
-        children
-      }
-    );
-  }
-
-  var css_248z$2 = ".HoldButton-module_holdButton__tu4mi{-webkit-tap-highlight-color:transparent;align-items:center;background:var(--color-secondary,#f59e0b);border:none;border-radius:16px;color:#fff;cursor:pointer;display:flex;font-size:18px;font-weight:700;justify-content:center;min-height:80px;min-width:80px;padding:16px 24px;touch-action:manipulation;transition:transform .1s ease,background .1s ease;user-select:none;-webkit-user-select:none}.HoldButton-module_holdButton__tu4mi:active,.HoldButton-module_pressed__JWIRG{background:var(--color-secondary-dark,#d97706);transform:scale(.95)}.HoldButton-module_disabled__4QwwT{cursor:not-allowed;opacity:.5}.HoldButton-module_disabled__4QwwT.HoldButton-module_pressed__JWIRG,.HoldButton-module_disabled__4QwwT:active{background:var(--color-secondary,#f59e0b);transform:none}";
-  var styles$2 = {"holdButton":"HoldButton-module_holdButton__tu4mi","pressed":"HoldButton-module_pressed__JWIRG","disabled":"HoldButton-module_disabled__4QwwT"};
-  styleInject(css_248z$2);
-
-  function HoldButton({
-    onHoldStart,
-    onHoldEnd,
-    children,
-    className,
-    disabled = false
-  }) {
-    const isHolding = react.useRef(false);
-    const buttonRef = react.useRef(null);
-    const startHold = react.useCallback(() => {
-      if (disabled || isHolding.current) return;
-      isHolding.current = true;
-      buttonRef.current?.classList.add(styles$2.pressed);
-      if (navigator.vibrate) {
-        navigator.vibrate(10);
-      }
-      onHoldStart();
-    }, [onHoldStart, disabled]);
-    const endHold = react.useCallback(() => {
-      if (!isHolding.current) return;
-      isHolding.current = false;
-      buttonRef.current?.classList.remove(styles$2.pressed);
-      onHoldEnd();
-    }, [onHoldEnd]);
-    const handleTouchStart = react.useCallback((e) => {
-      e.preventDefault();
-      startHold();
-    }, [startHold]);
-    const handleTouchEnd = react.useCallback((e) => {
-      e.preventDefault();
-      endHold();
-    }, [endHold]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        ref: buttonRef,
-        className: `${styles$2.holdButton} ${className || ""} ${disabled ? styles$2.disabled : ""}`,
-        onTouchStart: handleTouchStart,
-        onTouchEnd: handleTouchEnd,
-        onTouchCancel: handleTouchEnd,
-        onMouseDown: startHold,
-        onMouseUp: endHold,
-        onMouseLeave: endHold,
-        disabled,
-        children
-      }
-    );
-  }
-
-  var css_248z$1 = ".DirectionPad-module_padContainer__iL-rh{align-items:center;display:flex;flex-direction:column;gap:8px;user-select:none;-webkit-user-select:none}.DirectionPad-module_horizontal__kI4j7{flex-direction:row;gap:16px}.DirectionPad-module_vertical__b8Xec{flex-direction:column;gap:16px}.DirectionPad-module_row__mzuUr{display:flex;gap:8px}.DirectionPad-module_dirButton__QCCHz{-webkit-tap-highlight-color:transparent;align-items:center;background:var(--color-surface,#374151);border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;font-size:24px;height:70px;justify-content:center;touch-action:manipulation;transition:transform .1s ease,background .1s ease;width:70px}.DirectionPad-module_dirButton__QCCHz:active{background:var(--color-primary,#6366f1);transform:scale(.9)}.DirectionPad-module_horizontal__kI4j7 .DirectionPad-module_dirButton__QCCHz,.DirectionPad-module_vertical__b8Xec .DirectionPad-module_dirButton__QCCHz{font-size:32px;height:100px;width:100px}";
-  var styles$1 = {"padContainer":"DirectionPad-module_padContainer__iL-rh","horizontal":"DirectionPad-module_horizontal__kI4j7","vertical":"DirectionPad-module_vertical__b8Xec","row":"DirectionPad-module_row__mzuUr","dirButton":"DirectionPad-module_dirButton__QCCHz"};
-  styleInject(css_248z$1);
-
-  function DirectionPad({
-    onDirection,
-    leftRightOnly = false,
-    upDownOnly = false,
-    className
-  }) {
-    const pressedRef = react.useRef(/* @__PURE__ */ new Set());
-    const handlePress = react.useCallback((direction) => {
-      if (pressedRef.current.has(direction)) return;
-      pressedRef.current.add(direction);
-      if (navigator.vibrate) {
-        navigator.vibrate(10);
-      }
-      onDirection(direction);
-    }, [onDirection]);
-    const handleRelease = react.useCallback((direction) => {
-      pressedRef.current.delete(direction);
-    }, []);
-    const createButton = (direction, label) => /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        className: `${styles$1.dirButton} ${styles$1[direction]}`,
-        onTouchStart: (e) => {
-          e.preventDefault();
-          handlePress(direction);
-        },
-        onTouchEnd: (e) => {
-          e.preventDefault();
-          handleRelease(direction);
-        },
-        onTouchCancel: () => handleRelease(direction),
-        onMouseDown: () => handlePress(direction),
-        onMouseUp: () => handleRelease(direction),
-        onMouseLeave: () => handleRelease(direction),
-        children: label
-      },
-      direction
-    );
-    if (leftRightOnly) {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles$1.padContainer} ${styles$1.horizontal} ${className || ""}`, children: [
-        createButton("left", "\u25C0"),
-        createButton("right", "\u25B6")
-      ] });
-    }
-    if (upDownOnly) {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles$1.padContainer} ${styles$1.vertical} ${className || ""}`, children: [
-        createButton("up", "\u25B2"),
-        createButton("down", "\u25BC")
-      ] });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles$1.padContainer} ${styles$1.full} ${className || ""}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$1.row, children: createButton("up", "\u25B2") }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$1.row, children: [
-        createButton("left", "\u25C0"),
-        createButton("right", "\u25B6")
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$1.row, children: createButton("down", "\u25BC") })
-    ] });
-  }
-
-  var css_248z = ".SwipeArea-module_swipeArea__yob7L{height:100%;touch-action:none;user-select:none;-webkit-user-select:none;width:100%}";
-  var styles = {"swipeArea":"SwipeArea-module_swipeArea__yob7L"};
-  styleInject(css_248z);
-
-  function SwipeArea({
-    onSwipe,
-    threshold = 50,
-    children,
-    className
-  }) {
-    const touchStart = react.useRef(null);
-    const handleTouchStart = react.useCallback((e) => {
-      const touch = e.touches[0];
-      if (!touch) return;
-      touchStart.current = { x: touch.clientX, y: touch.clientY };
-    }, []);
-    const handleTouchEnd = react.useCallback((e) => {
-      if (!touchStart.current) return;
-      const touch = e.changedTouches[0];
-      if (!touch) return;
-      const deltaX = touch.clientX - touchStart.current.x;
-      const deltaY = touch.clientY - touchStart.current.y;
-      const absX = Math.abs(deltaX);
-      const absY = Math.abs(deltaY);
-      if (absX < threshold && absY < threshold) {
-        touchStart.current = null;
-        return;
-      }
-      let direction;
-      if (absX > absY) {
-        direction = deltaX > 0 ? "right" : "left";
-      } else {
-        direction = deltaY > 0 ? "down" : "up";
-      }
-      if (navigator.vibrate) {
-        navigator.vibrate(15);
-      }
-      onSwipe(direction);
-      touchStart.current = null;
-    }, [onSwipe, threshold]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: `${styles.swipeArea} ${className || ""}`,
-        onTouchStart: handleTouchStart,
-        onTouchEnd: handleTouchEnd,
-        onTouchCancel: () => {
-          touchStart.current = null;
-        },
-        children
-      }
-    );
-  }
-
-  class DirectTransport {
-    constructor(socket) {
-      this.socket = socket;
-    }
-    emit(event, ...args) {
-      this.socket.emit(event, ...args);
-    }
-    on(event, handler) {
-      this.socket.on(event, handler);
-    }
-    off(event, handler) {
-      if (handler) {
-        this.socket.off(event, handler);
-      } else {
-        this.socket.off(event);
-      }
-    }
-  }
-
-  const TransportContext = react.createContext(null);
-  function useTransport() {
-    const transport = react.useContext(TransportContext);
-    if (!transport) {
-      throw new Error("useTransport must be used within a RoomProvider that supplies a Transport");
-    }
-    return transport;
-  }
-  const RoomContext = react.createContext(null);
-  const HostRoomProvider = ({
-    roomCode,
-    players,
-    leaderId,
-    socket,
-    children
-  }) => {
-    const connectedPlayers = react.useMemo(
-      () => players.filter((p) => p.connected !== false),
-      [players]
-    );
-    const hostState = react.useMemo(
-      () => ({ roomCode, players, connectedPlayers, leaderId, socket }),
-      [roomCode, players, connectedPlayers, leaderId, socket]
-    );
-    const value = react.useMemo(
-      () => ({
-        roomCode,
-        players,
-        connectedPlayers,
-        leaderId,
-        side: "host",
-        host: hostState,
-        player: null
-      }),
-      [roomCode, players, connectedPlayers, leaderId, hostState]
-    );
-    const transport = react.useMemo(() => new DirectTransport(socket), [socket]);
-    return /* @__PURE__ */ jsxRuntime.jsx(TransportContext.Provider, { value: transport, children: /* @__PURE__ */ jsxRuntime.jsx(RoomContext.Provider, { value, children }) });
-  };
-  const PlayerRoomProvider = ({
-    roomCode,
-    players,
-    leaderId,
-    mySessionId,
-    isLeader,
-    socket,
-    isConnected,
-    children
-  }) => {
-    const connectedPlayers = react.useMemo(
-      () => players.filter((p) => p.connected !== false),
-      [players]
-    );
-    const playerState = react.useMemo(
-      () => ({
-        roomCode,
-        players,
-        connectedPlayers,
-        leaderId,
-        mySessionId,
-        isLeader,
-        socket,
-        isConnected
-      }),
-      [roomCode, players, connectedPlayers, leaderId, mySessionId, isLeader, socket, isConnected]
-    );
-    const value = react.useMemo(
-      () => ({
-        roomCode,
-        players,
-        connectedPlayers,
-        leaderId,
-        side: "player",
-        host: null,
-        player: playerState
-      }),
-      [roomCode, players, connectedPlayers, leaderId, playerState]
-    );
-    const transport = react.useMemo(() => new DirectTransport(socket), [socket]);
-    return /* @__PURE__ */ jsxRuntime.jsx(TransportContext.Provider, { value: transport, children: /* @__PURE__ */ jsxRuntime.jsx(RoomContext.Provider, { value, children }) });
-  };
-  function useRoom() {
-    const context = react.useContext(RoomContext);
-    if (!context) {
-      throw new Error("useRoom must be used within HostRoomProvider or PlayerRoomProvider");
-    }
-    return context;
-  }
-  function useHostRoom() {
-    const context = useRoom();
-    if (context.side !== "host" || !context.host) {
-      throw new Error("useHostRoom must be used within HostRoomProvider");
-    }
-    return context.host;
-  }
-  function usePlayerRoom() {
-    const context = useRoom();
-    if (context.side !== "player" || !context.player) {
-      throw new Error("usePlayerRoom must be used within PlayerRoomProvider");
-    }
-    return context.player;
-  }
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SmoreSDK = {}));
+})(this, (function (exports) { 'use strict';
 
   const SMORE_MSG_PREFIX = "smore:";
   function isSmoreMessage(data) {
@@ -449,244 +75,912 @@
     }
   }
 
-  const SYSTEM_PREFIX = "smore:";
-  const SYSTEM_EVENTS = {
-    READY: `${SYSTEM_PREFIX}ready`,
-    PLAYER_JOIN: `${SYSTEM_PREFIX}player-join`,
-    PLAYER_LEAVE: `${SYSTEM_PREFIX}player-leave`,
-    GAME_OVER: `${SYSTEM_PREFIX}game-over`,
-    RETURN_TO_LOBBY: `${SYSTEM_PREFIX}return-to-lobby`,
-    SEND_TO_PLAYER: `${SYSTEM_PREFIX}send-to-player`,
-    BROADCAST: `${SYSTEM_PREFIX}broadcast`
+  const SYSTEM_PREFIX$1 = "smore:";
+  const SYSTEM_EVENTS$1 = {
+    PLAYER_JOIN: `${SYSTEM_PREFIX$1}player-join`,
+    PLAYER_LEAVE: `${SYSTEM_PREFIX$1}player-leave`,
+    PLAYER_RECONNECT: `${SYSTEM_PREFIX$1}player-reconnect`,
+    GAME_OVER: `${SYSTEM_PREFIX$1}game-over`
   };
-  const EVENT_NAME_REGEX$1 = /^[a-zA-Z]([a-zA-Z_-]*[a-zA-Z])?$/;
+  const DEFAULT_TIMEOUT$1 = 1e4;
+  let SmoreSDKError$1 = class SmoreSDKError extends Error {
+    code;
+    cause;
+    details;
+    constructor(code, message, options) {
+      super(message);
+      this.name = "SmoreSDKError";
+      this.code = code;
+      this.cause = options?.cause;
+      this.details = options?.details;
+      const ErrorWithCapture = Error;
+      if (typeof ErrorWithCapture.captureStackTrace === "function") {
+        ErrorWithCapture.captureStackTrace(this, SmoreSDKError);
+      }
+    }
+    toSmoreError() {
+      return {
+        code: this.code,
+        message: this.message,
+        cause: this.cause,
+        details: this.details
+      };
+    }
+  };
+  const EVENT_NAME_REGEX$1 = /^[a-zA-Z]([a-zA-Z0-9_-]*[a-zA-Z0-9])?$/;
   function validateEventName$1(event) {
+    if (!event || typeof event !== "string") {
+      throw new SmoreSDKError$1("INVALID_EVENT", "Event name must be a non-empty string");
+    }
     if (!EVENT_NAME_REGEX$1.test(event)) {
-      throw new Error(
-        `[SDK] Invalid event name "${event}". Event names must:
-  - Only contain letters (a-z, A-Z), hyphens (-), and underscores (_)
-  - Start and end with a letter (no leading/trailing - or _)`
+      throw new SmoreSDKError$1(
+        "INVALID_EVENT",
+        `Invalid event name "${event}". Event names must start with a letter, contain only letters, numbers, hyphens, or underscores, and end with a letter or number.`,
+        { details: { event } }
       );
     }
   }
-  function useGameHost(config = {}) {
-    const { onReady, onPlayerJoin, onPlayerLeave, listeners } = config;
-    const hostRoom = useHostRoom();
-    const transport = useTransport();
-    const onReadyRef = react.useRef(onReady);
-    const onPlayerJoinRef = react.useRef(onPlayerJoin);
-    const onPlayerLeaveRef = react.useRef(onPlayerLeave);
-    const listenersRef = react.useRef(listeners);
-    react.useEffect(() => {
-      onReadyRef.current = onReady;
-    }, [onReady]);
-    react.useEffect(() => {
-      onPlayerJoinRef.current = onPlayerJoin;
-    }, [onPlayerJoin]);
-    react.useEffect(() => {
-      onPlayerLeaveRef.current = onPlayerLeave;
-    }, [onPlayerLeave]);
-    react.useEffect(() => {
-      listenersRef.current = listeners;
-    }, [listeners]);
-    react.useEffect(() => {
-      if (!transport) return;
-      const handleReady = () => {
-        onReadyRef.current?.();
-      };
-      const handlePlayerJoin = (data) => {
-        onPlayerJoinRef.current?.(data.player);
-      };
-      const handlePlayerLeave = (data) => {
-        onPlayerLeaveRef.current?.(data.sessionId);
-      };
-      transport.on(SYSTEM_EVENTS.READY, handleReady);
-      transport.on(SYSTEM_EVENTS.PLAYER_JOIN, handlePlayerJoin);
-      transport.on(SYSTEM_EVENTS.PLAYER_LEAVE, handlePlayerLeave);
-      transport.on("room:player-left", (data) => {
-        onPlayerLeaveRef.current?.(data?.sessionId ?? data?.playerId);
+  function validatePlayerIndex(playerIndex, controllersCount) {
+    if (typeof playerIndex !== "number" || !Number.isInteger(playerIndex)) {
+      throw new SmoreSDKError$1("INVALID_PLAYER", "Player index must be an integer");
+    }
+    if (playerIndex < 0 || playerIndex >= controllersCount) {
+      throw new SmoreSDKError$1(
+        "INVALID_PLAYER",
+        `Invalid player index ${playerIndex}. Valid range: 0-${controllersCount - 1}`,
+        { details: { playerIndex, controllersCount } }
+      );
+    }
+  }
+  class DebugLogger {
+    enabled;
+    level;
+    prefix;
+    logSend;
+    logReceive;
+    logLifecycle;
+    customLogger;
+    static levelOrder = {
+      debug: 0,
+      info: 1,
+      warn: 2,
+      error: 3
+    };
+    constructor(options) {
+      if (typeof options === "boolean") {
+        this.enabled = options;
+        this.level = "debug";
+        this.prefix = "[SmoreScreen]";
+        this.logSend = true;
+        this.logReceive = true;
+        this.logLifecycle = true;
+      } else if (options) {
+        this.enabled = options.enabled ?? false;
+        this.level = options.level ?? "debug";
+        this.prefix = options.prefix ?? "[SmoreScreen]";
+        this.logSend = options.logSend ?? true;
+        this.logReceive = options.logReceive ?? true;
+        this.logLifecycle = options.logLifecycle ?? true;
+        this.customLogger = options.logger;
+      } else {
+        this.enabled = false;
+        this.level = "debug";
+        this.prefix = "[SmoreScreen]";
+        this.logSend = true;
+        this.logReceive = true;
+        this.logLifecycle = true;
+      }
+    }
+    shouldLog(level) {
+      return this.enabled && DebugLogger.levelOrder[level] >= DebugLogger.levelOrder[this.level];
+    }
+    log(level, message, data) {
+      if (!this.shouldLog(level)) return;
+      if (this.customLogger) {
+        this.customLogger(level, `${this.prefix} ${message}`, data);
+        return;
+      }
+      const consoleMethod = level === "error" ? "error" : level === "warn" ? "warn" : "log";
+      if (data !== void 0) {
+        console[consoleMethod](`${this.prefix} ${message}`, data);
+      } else {
+        console[consoleMethod](`${this.prefix} ${message}`);
+      }
+    }
+    debug(message, data) {
+      this.log("debug", message, data);
+    }
+    info(message, data) {
+      this.log("info", message, data);
+    }
+    warn(message, data) {
+      this.log("warn", message, data);
+    }
+    error(message, data) {
+      this.log("error", message, data);
+    }
+    send(event, data) {
+      if (this.logSend) {
+        this.debug(`-> SEND: ${event}`, data);
+      }
+    }
+    receive(event, data) {
+      if (this.logReceive) {
+        this.debug(`<- RECV: ${event}`, data);
+      }
+    }
+    lifecycle(message, data) {
+      if (this.logLifecycle) {
+        this.info(`[Lifecycle] ${message}`, data);
+      }
+    }
+  }
+  class ScreenImpl {
+    transport = null;
+    config;
+    logger;
+    _controllers = [];
+    _roomCode = "";
+    _leaderIndex = -1;
+    _isReady = false;
+    _isDestroyed = false;
+    eventHandlers = /* @__PURE__ */ new Map();
+    registeredTransportHandlers = [];
+    boundMessageHandler = null;
+    constructor(config = {}) {
+      this.config = config;
+      this.logger = new DebugLogger(config.debug);
+      if (config.listeners) {
+        for (const event of Object.keys(config.listeners)) {
+          validateEventName$1(event);
+        }
+      }
+    }
+    // ---------------------------------------------------------------------------
+    // Initialization (called by factory)
+    // ---------------------------------------------------------------------------
+    async initialize() {
+      this.logger.lifecycle("Initializing screen...");
+      const parentOrigin = this.config.parentOrigin ?? "*";
+      const timeout = this.config.timeout ?? DEFAULT_TIMEOUT$1;
+      return new Promise((resolve, reject) => {
+        const timeoutId = setTimeout(() => {
+          this.cleanup();
+          const error = new SmoreSDKError$1(
+            "TIMEOUT",
+            `Screen initialization timed out after ${timeout}ms. Make sure the parent frame sends smore:init.`,
+            { details: { timeout } }
+          );
+          this.handleError(error);
+          reject(error);
+        }, timeout);
+        this.boundMessageHandler = (e) => {
+          if (parentOrigin !== "*" && e.origin !== parentOrigin) return;
+          const msg = e.data;
+          if (!isSmoreMessage(msg)) return;
+          if (msg.type === "smore:init") {
+            clearTimeout(timeoutId);
+            const initData = msg.payload;
+            if (initData.side !== "host") {
+              const error = new SmoreSDKError$1(
+                "INIT_FAILED",
+                `Received init for wrong side: ${initData.side}. Expected "host".`,
+                { details: { side: initData.side } }
+              );
+              this.handleError(error);
+              reject(error);
+              return;
+            }
+            this.transport = new PostMessageTransport(parentOrigin);
+            this._roomCode = initData.roomCode;
+            this._controllers = this.mapControllersFromInit(initData.players);
+            this._leaderIndex = this.findLeaderIndex(initData.players, initData.leaderId);
+            this.setupEventHandlers();
+            this._isReady = true;
+            this.logger.lifecycle("Screen ready", {
+              roomCode: this._roomCode,
+              controllers: this._controllers.length,
+              leaderIndex: this._leaderIndex
+            });
+            this.config.onReady?.();
+            resolve();
+          } else if (msg.type === "smore:update") {
+            const updateData = msg.payload;
+            if (updateData.players) {
+              this._controllers = this.mapControllersFromInit(updateData.players);
+            }
+            if (updateData.leaderId !== void 0) {
+              this._leaderIndex = this.findLeaderIndex(
+                updateData.players ?? [],
+                updateData.leaderId
+              );
+            }
+            this.logger.lifecycle("Room updated", {
+              controllers: this._controllers.length,
+              leaderIndex: this._leaderIndex
+            });
+          }
+        };
+        window.addEventListener("message", this.boundMessageHandler);
+        window.parent.postMessage({ type: "smore:ready" }, parentOrigin);
+        this.logger.lifecycle("Sent smore:ready to parent");
       });
-      transport.on("room:player-joined", (data) => {
-        if (data?.player) {
-          onPlayerJoinRef.current?.(data.player);
+    }
+    mapControllersFromInit(players) {
+      return players.map((p, index) => ({
+        playerIndex: p.playerIndex ?? index,
+        nickname: p.nickname || `Player ${index + 1}`,
+        connected: p.connected !== false,
+        appearance: p.appearance
+      }));
+    }
+    findLeaderIndex(players, leaderId) {
+      if (!leaderId) return -1;
+      const idx = players.findIndex(
+        (p) => p.sessionId === leaderId
+      );
+      return idx >= 0 ? idx : -1;
+    }
+    setupEventHandlers() {
+      if (!this.transport) return;
+      this.registerTransportHandler(SYSTEM_EVENTS$1.PLAYER_JOIN, (data) => {
+        const payload = data;
+        const player = payload?.player;
+        if (player && typeof player.playerIndex === "number") {
+          this.logger.lifecycle("Controller joined", { playerIndex: player.playerIndex });
+          this.config.onControllerJoin?.(player.playerIndex, player);
         }
       });
-      return () => {
-        transport.off(SYSTEM_EVENTS.READY, handleReady);
-        transport.off(SYSTEM_EVENTS.PLAYER_JOIN, handlePlayerJoin);
-        transport.off(SYSTEM_EVENTS.PLAYER_LEAVE, handlePlayerLeave);
-        transport.off("room:player-left");
-        transport.off("room:player-joined");
+      this.registerTransportHandler(SYSTEM_EVENTS$1.PLAYER_LEAVE, (data) => {
+        const payload = data;
+        if (typeof payload?.playerIndex === "number") {
+          this.logger.lifecycle("Controller left", { playerIndex: payload.playerIndex });
+          this.config.onControllerLeave?.(payload.playerIndex);
+        }
+      });
+      this.registerTransportHandler(SYSTEM_EVENTS$1.PLAYER_RECONNECT, (data) => {
+        const payload = data;
+        const player = payload?.player;
+        if (player && typeof player.playerIndex === "number") {
+          this.logger.lifecycle("Controller reconnected", { playerIndex: player.playerIndex });
+          this.config.onControllerReconnect?.(player.playerIndex, player);
+        }
+      });
+      this.registerTransportHandler("room:player-joined", (data) => {
+        const payload = data;
+        const playerIndex = payload?.player?.playerIndex ?? payload?.playerIndex;
+        if (typeof playerIndex === "number") {
+          this.config.onControllerJoin?.(playerIndex, {
+            playerIndex,
+            nickname: `Player ${playerIndex + 1}`,
+            connected: true
+          });
+        }
+      });
+      this.registerTransportHandler("room:player-left", (data) => {
+        const payload = data;
+        const playerIndex = payload?.playerIndex ?? payload?.player?.playerIndex;
+        if (typeof playerIndex === "number") {
+          this.config.onControllerLeave?.(playerIndex);
+        }
+      });
+      if (this.config.listeners) {
+        for (const [event, handler] of Object.entries(this.config.listeners)) {
+          if (!handler) continue;
+          this.setupUserEventHandler(event, handler);
+        }
+      }
+    }
+    setupUserEventHandler(event, handler) {
+      const wrappedHandler = (data) => {
+        this.logger.receive(event, data);
+        const payload = data;
+        const { playerIndex, ...rest } = payload;
+        if (typeof playerIndex === "number") {
+          try {
+            handler(playerIndex, rest);
+          } catch (err) {
+            this.handleError(
+              new SmoreSDKError$1("UNKNOWN", `Error in handler for event "${event}"`, {
+                cause: err instanceof Error ? err : void 0,
+                details: { event, playerIndex }
+              })
+            );
+          }
+        }
       };
-    }, [transport]);
-    react.useEffect(() => {
-      if (!transport || !listeners) return;
-      const entries = Object.entries(listeners);
-      const cleanups = [];
-      for (const [event, handler] of entries) {
-        if (!handler) continue;
-        validateEventName$1(event);
+      this.registerTransportHandler(event, wrappedHandler);
+      let handlers = this.eventHandlers.get(event);
+      if (!handlers) {
+        handlers = /* @__PURE__ */ new Set();
+        this.eventHandlers.set(event, handlers);
+      }
+      handlers.add(handler);
+    }
+    registerTransportHandler(event, handler) {
+      if (!this.transport) return;
+      this.transport.on(event, handler);
+      this.registeredTransportHandlers.push({ event, handler });
+    }
+    // ---------------------------------------------------------------------------
+    // Properties (readonly)
+    // ---------------------------------------------------------------------------
+    get controllers() {
+      return [...this._controllers];
+    }
+    get roomCode() {
+      return this._roomCode;
+    }
+    get leaderIndex() {
+      return this._leaderIndex;
+    }
+    get isReady() {
+      return this._isReady;
+    }
+    get isDestroyed() {
+      return this._isDestroyed;
+    }
+    // ---------------------------------------------------------------------------
+    // Communication Methods
+    // ---------------------------------------------------------------------------
+    broadcast(event, data) {
+      this.ensureReady("broadcast");
+      validateEventName$1(event);
+      this.logger.send(event, data);
+      this.transport.emit(event, data);
+    }
+    broadcastRaw(event, data) {
+      this.ensureReady("broadcastRaw");
+      validateEventName$1(event);
+      this.logger.send(event, data);
+      this.transport.emit(event, data);
+    }
+    sendToController(playerIndex, event, data) {
+      this.ensureReady("sendToController");
+      validateEventName$1(event);
+      validatePlayerIndex(playerIndex, this._controllers.length);
+      this.logger.send(`${event} -> Player ${playerIndex}`, data);
+      this.transport.emit(event, {
+        targetPlayerIndex: playerIndex,
+        ...data && typeof data === "object" ? data : { data }
+      });
+    }
+    sendToControllerRaw(playerIndex, event, data) {
+      this.ensureReady("sendToControllerRaw");
+      validateEventName$1(event);
+      validatePlayerIndex(playerIndex, this._controllers.length);
+      this.logger.send(`${event} -> Player ${playerIndex}`, data);
+      this.transport.emit(event, {
+        targetPlayerIndex: playerIndex,
+        ...data && typeof data === "object" ? data : { data }
+      });
+    }
+    // ---------------------------------------------------------------------------
+    // Game Lifecycle
+    // ---------------------------------------------------------------------------
+    gameOver(results) {
+      this.ensureReady("gameOver");
+      this.logger.lifecycle("Game over", results);
+      this.transport.emit(SYSTEM_EVENTS$1.GAME_OVER, { results });
+    }
+    // ---------------------------------------------------------------------------
+    // Event Subscription
+    // ---------------------------------------------------------------------------
+    on(event, handler) {
+      validateEventName$1(event);
+      let handlers = this.eventHandlers.get(event);
+      if (!handlers) {
+        handlers = /* @__PURE__ */ new Set();
+        this.eventHandlers.set(event, handlers);
+      }
+      handlers.add(handler);
+      if (this.transport) {
         const wrappedHandler = (data) => {
-          const { sessionId, ...rest } = data;
-          handler(sessionId, rest);
+          this.logger.receive(event, data);
+          const payload = data;
+          const { playerIndex, ...rest } = payload;
+          if (typeof playerIndex === "number") {
+            try {
+              handler(playerIndex, rest);
+            } catch (err) {
+              this.handleError(
+                new SmoreSDKError$1("UNKNOWN", `Error in handler for event "${event}"`, {
+                  cause: err instanceof Error ? err : void 0
+                })
+              );
+            }
+          }
         };
-        transport.on(event, wrappedHandler);
-        cleanups.push(() => transport.off(event, wrappedHandler));
+        this.registerTransportHandler(event, wrappedHandler);
       }
       return () => {
-        cleanups.forEach((cleanup) => cleanup());
+        handlers?.delete(handler);
+        if (handlers?.size === 0) {
+          this.eventHandlers.delete(event);
+        }
       };
-    }, [transport, listeners]);
-    const emit = react.useCallback(
-      (event, data) => {
-        validateEventName$1(event);
-        transport?.emit(SYSTEM_EVENTS.BROADCAST, { event, data });
-      },
-      [transport]
-    );
-    const sendToPlayer = react.useCallback(
-      (sessionId, event, data) => {
-        validateEventName$1(event);
-        transport?.emit(SYSTEM_EVENTS.SEND_TO_PLAYER, {
-          targetSessionId: sessionId,
-          event,
-          data
-        });
-      },
-      [transport]
-    );
-    const gameOver = react.useCallback(
-      (results) => {
-        transport?.emit(SYSTEM_EVENTS.GAME_OVER, { results });
-      },
-      [transport]
-    );
-    const returnToLobby = react.useCallback(() => {
-      transport?.emit(SYSTEM_EVENTS.RETURN_TO_LOBBY, {});
-    }, [transport]);
-    return {
-      players: hostRoom.players,
-      leaderId: hostRoom.leaderId,
-      roomCode: hostRoom.roomCode,
-      emit,
-      sendToPlayer,
-      gameOver,
-      returnToLobby
-    };
+    }
+    once(event, handler) {
+      const wrappedHandler = (playerIndex, data) => {
+        unsubscribe();
+        handler(playerIndex, data);
+      };
+      const unsubscribe = this.on(event, wrappedHandler);
+      return unsubscribe;
+    }
+    off(event, handler) {
+      if (!handler) {
+        this.eventHandlers.delete(event);
+        this.transport?.off(event);
+      } else {
+        const handlers = this.eventHandlers.get(event);
+        handlers?.delete(handler);
+        if (handlers?.size === 0) {
+          this.eventHandlers.delete(event);
+        }
+      }
+    }
+    // ---------------------------------------------------------------------------
+    // Utilities
+    // ---------------------------------------------------------------------------
+    getController(playerIndex) {
+      return this._controllers.find((c) => c.playerIndex === playerIndex);
+    }
+    isLeader(playerIndex) {
+      return playerIndex === this._leaderIndex;
+    }
+    getControllerCount() {
+      return this._controllers.filter((c) => c.connected).length;
+    }
+    // ---------------------------------------------------------------------------
+    // Cleanup
+    // ---------------------------------------------------------------------------
+    destroy() {
+      if (this._isDestroyed) return;
+      this.logger.lifecycle("Destroying screen...");
+      this._isDestroyed = true;
+      this._isReady = false;
+      this.cleanup();
+      this.logger.lifecycle("Screen destroyed");
+    }
+    cleanup() {
+      for (const { event, handler } of this.registeredTransportHandlers) {
+        this.transport?.off(event, handler);
+      }
+      this.registeredTransportHandlers = [];
+      this.eventHandlers.clear();
+      if (this.transport instanceof PostMessageTransport) {
+        this.transport.destroy();
+      }
+      this.transport = null;
+      if (this.boundMessageHandler) {
+        window.removeEventListener("message", this.boundMessageHandler);
+        this.boundMessageHandler = null;
+      }
+    }
+    // ---------------------------------------------------------------------------
+    // Error Handling
+    // ---------------------------------------------------------------------------
+    handleError(error) {
+      const smoreError = error.toSmoreError();
+      if (this.config.onError) {
+        this.config.onError(smoreError);
+      } else {
+        this.logger.error(error.message, error.details);
+      }
+    }
+    ensureReady(method) {
+      if (this._isDestroyed) {
+        throw new SmoreSDKError$1(
+          "DESTROYED",
+          `Cannot call ${method}() after destroy()`,
+          { details: { method } }
+        );
+      }
+      if (!this._isReady || !this.transport) {
+        throw new SmoreSDKError$1(
+          "NOT_READY",
+          `Cannot call ${method}() before screen is ready. Use await createScreen() or onReady callback.`,
+          { details: { method } }
+        );
+      }
+    }
+  }
+  function createScreen(config) {
+    const screen = new ScreenImpl(config);
+    const promise = screen.initialize().then(() => screen);
+    promise.instance = screen;
+    return promise;
   }
 
-  const EVENT_NAME_REGEX = /^[a-zA-Z]([a-zA-Z_-]*[a-zA-Z])?$/;
+  const SYSTEM_PREFIX = "smore:";
+  const SYSTEM_EVENTS = {
+    PLAYER_JOIN: `${SYSTEM_PREFIX}player-join`,
+    PLAYER_LEAVE: `${SYSTEM_PREFIX}player-leave`
+  };
+  const DEFAULT_TIMEOUT = 1e4;
+  class SmoreSDKError extends Error {
+    code;
+    cause;
+    details;
+    constructor(code, message, options) {
+      super(message);
+      this.name = "SmoreSDKError";
+      this.code = code;
+      this.cause = options?.cause;
+      this.details = options?.details;
+      const ErrorWithCapture = Error;
+      if (typeof ErrorWithCapture.captureStackTrace === "function") {
+        ErrorWithCapture.captureStackTrace(this, SmoreSDKError);
+      }
+    }
+    toSmoreError() {
+      return {
+        code: this.code,
+        message: this.message,
+        cause: this.cause,
+        details: this.details
+      };
+    }
+  }
+  const EVENT_NAME_REGEX = /^[a-zA-Z]([a-zA-Z0-9_-]*[a-zA-Z0-9])?$/;
   function validateEventName(event) {
+    if (!event || typeof event !== "string") {
+      throw new SmoreSDKError("INVALID_EVENT", "Event name must be a non-empty string");
+    }
     if (!EVENT_NAME_REGEX.test(event)) {
-      throw new Error(
-        `[SDK] Invalid event name "${event}". Event names must:
-  - Only contain letters (a-z, A-Z), hyphens (-), and underscores (_)
-  - Start and end with a letter (no leading/trailing - or _)`
+      throw new SmoreSDKError(
+        "INVALID_EVENT",
+        `Invalid event name "${event}". Event names must:
+  - Start with a letter (a-z, A-Z)
+  - Only contain letters, numbers, hyphens (-), and underscores (_)
+  - End with a letter or number`,
+        { details: { event } }
       );
     }
   }
-  function useGamePlayer(config = {}) {
-    const room = usePlayerRoom();
-    const transport = useTransport();
-    const { onReady, onPlayerJoin, onPlayerLeave, listeners } = config;
-    const onReadyRef = react.useRef(onReady);
-    const onPlayerJoinRef = react.useRef(onPlayerJoin);
-    const onPlayerLeaveRef = react.useRef(onPlayerLeave);
-    const listenersRef = react.useRef(listeners);
-    onReadyRef.current = onReady;
-    onPlayerJoinRef.current = onPlayerJoin;
-    onPlayerLeaveRef.current = onPlayerLeave;
-    listenersRef.current = listeners;
-    react.useEffect(() => {
-      if (!transport) return;
-      const handleReady = () => {
-        onReadyRef.current?.();
-      };
-      const handlePlayerJoin = (player) => {
-        onPlayerJoinRef.current?.(player);
-      };
-      const handlePlayerLeave = (data) => {
-        onPlayerLeaveRef.current?.(data.sessionId);
-      };
-      transport.on("smore:ready", handleReady);
-      transport.on("smore:player-join", handlePlayerJoin);
-      transport.on("smore:player-leave", handlePlayerLeave);
-      return () => {
-        transport.off("smore:ready", handleReady);
-        transport.off("smore:player-join", handlePlayerJoin);
-        transport.off("smore:player-leave", handlePlayerLeave);
-      };
-    }, [transport]);
-    react.useEffect(() => {
-      if (!transport || !listenersRef.current) return;
-      const cleanups = [];
-      Object.entries(listenersRef.current).forEach(([event, handler]) => {
-        if (handler) {
-          transport.on(event, handler);
-          cleanups.push(() => transport.off(event, handler));
-        }
-      });
-      return () => cleanups.forEach((fn) => fn());
-    }, [transport, listeners]);
-    const emit = react.useCallback(
-      (event, data) => {
-        if (!transport) return;
-        validateEventName(event);
-        transport.emit(event, data);
-      },
-      [transport]
-    );
+  function createLogger(options) {
+    const enabled = typeof options === "boolean" ? options : options?.enabled ?? false;
+    const level = (typeof options === "object" ? options.level : void 0) ?? "debug";
+    const prefix = (typeof options === "object" ? options.prefix : void 0) ?? "[SmoreController]";
+    const customLogger = typeof options === "object" ? options.logger : void 0;
+    const levelPriority = {
+      debug: 0,
+      info: 1,
+      warn: 2,
+      error: 3
+    };
+    const shouldLog = (msgLevel) => {
+      if (!enabled) return false;
+      return levelPriority[msgLevel] >= levelPriority[level];
+    };
+    const log = (msgLevel, message, data) => {
+      if (!shouldLog(msgLevel)) return;
+      if (customLogger) {
+        customLogger(msgLevel, message, data);
+        return;
+      }
+      const fullMessage = `${prefix} ${message}`;
+      const consoleFn = console[msgLevel] ?? console.log;
+      if (data !== void 0) {
+        consoleFn(fullMessage, data);
+      } else {
+        consoleFn(fullMessage);
+      }
+    };
     return {
-      players: room.players,
-      leaderId: room.leaderId,
-      roomCode: room.roomCode,
-      mySessionId: room.mySessionId,
-      isLeader: room.isLeader,
-      emit
+      debug: (msg, data) => log("debug", msg, data),
+      info: (msg, data) => log("info", msg, data),
+      warn: (msg, data) => log("warn", msg, data),
+      error: (msg, data) => log("error", msg, data)
     };
   }
-
-  function useExternalGames(config) {
-    const { serverUrl, enabled = true } = config;
-    const [games, setGames] = react.useState([]);
-    const [loading, setLoading] = react.useState(false);
-    const [error, setError] = react.useState(null);
-    const [refreshKey, setRefreshKey] = react.useState(0);
-    react.useEffect(() => {
-      if (!enabled) return;
-      let cancelled = false;
-      setLoading(true);
-      fetch(`${serverUrl}/api/games`).then((res) => res.json()).then((data) => {
-        if (cancelled) return;
-        const external = (data.games || []).map((g) => ({
-          id: g.id,
-          title: g.title,
-          description: g.description || "",
-          minPlayers: g.minPlayers || 2,
-          maxPlayers: g.maxPlayers || 8,
-          thumbnail: g.thumbnail || "/thumbnails/g8.jpeg",
-          categories: g.categories || ["party"],
-          type: "external",
-          hostUrl: g.hostUrl,
-          playerUrl: g.playerUrl,
-          available: !!(g.hostUrl && g.playerUrl),
-          rating: 4,
-          heroRequired: false
-        }));
-        setGames(external);
-        setError(null);
-      }).catch((err) => {
-        if (cancelled) return;
-        setError(err.message);
-      }).finally(() => {
-        if (!cancelled) setLoading(false);
+  class ControllerImpl {
+    transport = null;
+    config;
+    logger;
+    _roomCode = "";
+    _myIndex = -1;
+    _isLeader = false;
+    _isReady = false;
+    _isDestroyed = false;
+    boundMessageHandler = null;
+    registeredHandlers = [];
+    eventListeners = /* @__PURE__ */ new Map();
+    constructor(config = {}) {
+      this.config = config;
+      this.logger = createLogger(config.debug);
+      if (config.listeners) {
+        for (const event of Object.keys(config.listeners)) {
+          validateEventName(event);
+        }
+      }
+    }
+    // ---------------------------------------------------------------------------
+    // Properties (readonly)
+    // ---------------------------------------------------------------------------
+    get myIndex() {
+      return this._myIndex;
+    }
+    get isLeader() {
+      return this._isLeader;
+    }
+    get roomCode() {
+      return this._roomCode;
+    }
+    get isReady() {
+      return this._isReady;
+    }
+    get isDestroyed() {
+      return this._isDestroyed;
+    }
+    // ---------------------------------------------------------------------------
+    // Initialization
+    // ---------------------------------------------------------------------------
+    async initialize() {
+      const parentOrigin = this.config.parentOrigin ?? "*";
+      const timeout = this.config.timeout ?? DEFAULT_TIMEOUT;
+      this.logger.debug("Initializing controller...", { parentOrigin, timeout });
+      return new Promise((resolve, reject) => {
+        const timeoutId = setTimeout(() => {
+          this.cleanup();
+          const error = new SmoreSDKError(
+            "TIMEOUT",
+            `Controller initialization timed out after ${timeout}ms. Make sure the parent window sends smore:init message.`,
+            { details: { timeout } }
+          );
+          this.handleError(error);
+          reject(error);
+        }, timeout);
+        this.boundMessageHandler = (e) => {
+          if (parentOrigin !== "*" && e.origin !== parentOrigin) return;
+          const msg = e.data;
+          if (!isSmoreMessage(msg)) return;
+          if (msg.type === "smore:init") {
+            clearTimeout(timeoutId);
+            this.handleInit(msg, parentOrigin, resolve, reject);
+          } else if (msg.type === "smore:update") {
+            this.handleUpdate(msg);
+          }
+        };
+        window.addEventListener("message", this.boundMessageHandler);
+        this.logger.debug("Sending smore:ready to parent");
+        window.parent.postMessage({ type: "smore:ready" }, parentOrigin);
+      });
+    }
+    handleInit(msg, parentOrigin, resolve, reject) {
+      const initData = msg.payload;
+      this.logger.debug("Received smore:init", initData);
+      if (initData.side !== "player") {
+        const error = new SmoreSDKError(
+          "INIT_FAILED",
+          `Controller received init for wrong side: ${initData.side}`,
+          { details: { side: initData.side } }
+        );
+        this.handleError(error);
+        reject(error);
+        return;
+      }
+      if (initData.myIndex === void 0) {
+        const error = new SmoreSDKError(
+          "INIT_FAILED",
+          "Missing myIndex in init payload",
+          { details: initData }
+        );
+        this.handleError(error);
+        reject(error);
+        return;
+      }
+      this.transport = new PostMessageTransport(parentOrigin);
+      this._roomCode = initData.roomCode;
+      this._myIndex = initData.myIndex;
+      this._isLeader = initData.isLeader ?? false;
+      this.setupEventHandlers();
+      this._isReady = true;
+      this.logger.info("Controller ready", {
+        roomCode: this._roomCode,
+        myIndex: this._myIndex,
+        isLeader: this._isLeader
       });
+      this.config.onReady?.();
+      resolve();
+    }
+    handleUpdate(msg) {
+      const updateData = msg.payload;
+      this.logger.debug("Received smore:update", updateData);
+    }
+    setupEventHandlers() {
+      if (!this.transport) return;
+      this.registerHandler(
+        SYSTEM_EVENTS.PLAYER_JOIN,
+        (data) => {
+          const playerIndex = data.player?.playerIndex ?? data.playerIndex;
+          if (playerIndex !== void 0) {
+            this.logger.debug("Player joined", { playerIndex });
+            this.config.onControllerJoin?.(playerIndex, data.player);
+          }
+        }
+      );
+      this.registerHandler(
+        SYSTEM_EVENTS.PLAYER_LEAVE,
+        (data) => {
+          const playerIndex = data.player?.playerIndex ?? data.playerIndex;
+          if (playerIndex !== void 0) {
+            this.logger.debug("Player left", { playerIndex });
+            this.config.onControllerLeave?.(playerIndex);
+          }
+        }
+      );
+      if (this.config.listeners) {
+        for (const [event, handler] of Object.entries(this.config.listeners)) {
+          if (!handler) continue;
+          this.registerHandler(event, (data) => {
+            this.logReceive(event, data);
+            handler(data);
+          });
+        }
+      }
+    }
+    registerHandler(event, handler) {
+      if (!this.transport) return;
+      this.transport.on(event, handler);
+      this.registeredHandlers.push({ event, handler });
+    }
+    // ---------------------------------------------------------------------------
+    // Communication Methods
+    // ---------------------------------------------------------------------------
+    send(event, data) {
+      this.ensureReady("send");
+      validateEventName(event);
+      this.logSend(event, data);
+      this.transport.emit(event, data);
+    }
+    sendRaw(event, data) {
+      this.ensureReady("sendRaw");
+      validateEventName(event);
+      this.logSend(event, data);
+      this.transport.emit(event, data);
+    }
+    // ---------------------------------------------------------------------------
+    // Event Subscription
+    // ---------------------------------------------------------------------------
+    on(event, handler) {
+      validateEventName(event);
+      let listeners = this.eventListeners.get(event);
+      if (!listeners) {
+        listeners = /* @__PURE__ */ new Set();
+        this.eventListeners.set(event, listeners);
+      }
+      listeners.add(handler);
+      const transportHandler = (data) => {
+        this.logReceive(event, data);
+        handler(data);
+      };
+      if (this.transport) {
+        this.transport.on(event, transportHandler);
+        this.registeredHandlers.push({ event, handler: transportHandler });
+      }
       return () => {
-        cancelled = true;
+        listeners?.delete(handler);
+        if (listeners?.size === 0) {
+          this.eventListeners.delete(event);
+        }
+        this.transport?.off(event, transportHandler);
+        this.registeredHandlers = this.registeredHandlers.filter(
+          (h) => h.handler !== transportHandler
+        );
       };
-    }, [serverUrl, enabled, refreshKey]);
-    const refresh = () => setRefreshKey((k) => k + 1);
-    return { games, loading, error, refresh };
+    }
+    once(event, handler) {
+      const unsubscribe = this.on(event, ((data) => {
+        unsubscribe();
+        handler(data);
+      }));
+      return unsubscribe;
+    }
+    off(event, handler) {
+      if (!handler) {
+        this.eventListeners.delete(event);
+        this.transport?.off(event);
+        this.registeredHandlers = this.registeredHandlers.filter((h) => h.event !== event);
+      } else {
+        const listeners = this.eventListeners.get(event);
+        listeners?.delete(handler);
+        if (listeners?.size === 0) {
+          this.eventListeners.delete(event);
+        }
+      }
+    }
+    // ---------------------------------------------------------------------------
+    // Cleanup
+    // ---------------------------------------------------------------------------
+    destroy() {
+      if (this._isDestroyed) return;
+      this.logger.info("Destroying controller");
+      this.cleanup();
+      this._isDestroyed = true;
+    }
+    cleanup() {
+      this._isReady = false;
+      for (const { event, handler } of this.registeredHandlers) {
+        this.transport?.off(event, handler);
+      }
+      this.registeredHandlers = [];
+      this.eventListeners.clear();
+      if (this.transport) {
+        this.transport.destroy();
+        this.transport = null;
+      }
+      if (this.boundMessageHandler) {
+        window.removeEventListener("message", this.boundMessageHandler);
+        this.boundMessageHandler = null;
+      }
+    }
+    // ---------------------------------------------------------------------------
+    // Private Helpers
+    // ---------------------------------------------------------------------------
+    ensureReady(method) {
+      if (this._isDestroyed) {
+        throw new SmoreSDKError(
+          "DESTROYED",
+          `Cannot call ${method}() after destroy()`,
+          { details: { method } }
+        );
+      }
+      if (!this._isReady || !this.transport) {
+        throw new SmoreSDKError(
+          "NOT_READY",
+          `Cannot call ${method}() before controller is ready. Use await createController() or wait for onReady callback.`,
+          { details: { method, isReady: this._isReady } }
+        );
+      }
+    }
+    handleError(error) {
+      if (this.config.onError) {
+        this.config.onError(error.toSmoreError());
+      } else {
+        this.logger.error(error.message, error.details);
+      }
+    }
+    logSend(event, data) {
+      const options = this.config.debug;
+      const shouldLog = typeof options === "object" ? options.logSend ?? true : Boolean(options);
+      if (shouldLog) {
+        this.logger.debug(`\u2192 SEND [${event}]`, data);
+      }
+    }
+    logReceive(event, data) {
+      const options = this.config.debug;
+      const shouldLog = typeof options === "object" ? options.logReceive ?? true : Boolean(options);
+      if (shouldLog) {
+        this.logger.debug(`\u2190 RECV [${event}]`, data);
+      }
+    }
+  }
+  function createController(config) {
+    const controller = new ControllerImpl(config ?? {});
+    const promise = controller.initialize().then(() => controller);
+    promise.instance = controller;
+    return promise;
+  }
+
+  class DirectTransport {
+    constructor(socket) {
+      this.socket = socket;
+    }
+    emit(event, ...args) {
+      this.socket.emit(event, ...args);
+    }
+    on(event, handler) {
+      this.socket.on(event, handler);
+    }
+    off(event, handler) {
+      if (handler) {
+        this.socket.off(event, handler);
+      } else {
+        this.socket.off(event);
+      }
+    }
   }
 
   const SMORE_EVENTS = {
@@ -714,24 +1008,267 @@
     return event.startsWith("smore:");
   }
 
+  function createMockScreen(options = {}) {
+    const {
+      roomCode = "TEST",
+      controllers: initialControllers = [],
+      autoReady = true
+    } = options;
+    let _controllers = [...initialControllers];
+    let _isReady = false;
+    let _isDestroyed = false;
+    let _leaderIndex = initialControllers[0]?.playerIndex ?? -1;
+    const listeners = /* @__PURE__ */ new Map();
+    const broadcasts = [];
+    const sends = [];
+    const screen = {
+      // === Properties ===
+      get controllers() {
+        return [..._controllers];
+      },
+      get roomCode() {
+        return roomCode;
+      },
+      get leaderIndex() {
+        return _leaderIndex;
+      },
+      get isReady() {
+        return _isReady;
+      },
+      get isDestroyed() {
+        return _isDestroyed;
+      },
+      // === Communication Methods ===
+      broadcast(event, data) {
+        if (_isDestroyed) {
+          throw new Error("Cannot broadcast: screen is destroyed");
+        }
+        broadcasts.push({ event, data });
+      },
+      broadcastRaw(event, data) {
+        if (_isDestroyed) {
+          throw new Error("Cannot broadcast: screen is destroyed");
+        }
+        broadcasts.push({ event, data });
+      },
+      sendToController(playerIndex, event, data) {
+        if (_isDestroyed) {
+          throw new Error("Cannot send: screen is destroyed");
+        }
+        if (!_controllers.some((c) => c.playerIndex === playerIndex)) {
+          throw new Error(`Invalid player index: ${playerIndex}`);
+        }
+        sends.push({ playerIndex, event, data });
+      },
+      sendToControllerRaw(playerIndex, event, data) {
+        if (_isDestroyed) {
+          throw new Error("Cannot send: screen is destroyed");
+        }
+        if (!_controllers.some((c) => c.playerIndex === playerIndex)) {
+          throw new Error(`Invalid player index: ${playerIndex}`);
+        }
+        sends.push({ playerIndex, event, data });
+      },
+      // === Game Lifecycle ===
+      gameOver(results) {
+        screen.broadcastRaw("game-over", results);
+      },
+      // === Event Subscription ===
+      on(event, handler) {
+        const eventStr = event;
+        if (!listeners.has(eventStr)) {
+          listeners.set(eventStr, /* @__PURE__ */ new Set());
+        }
+        listeners.get(eventStr).add(handler);
+        return () => {
+          listeners.get(eventStr)?.delete(handler);
+        };
+      },
+      once(event, handler) {
+        const wrapper = (playerIndex, data) => {
+          handler(playerIndex, data);
+          screen.off(event, wrapper);
+        };
+        return screen.on(event, wrapper);
+      },
+      off(event, handler) {
+        const eventStr = event;
+        if (!handler) {
+          listeners.delete(eventStr);
+        } else {
+          listeners.get(eventStr)?.delete(handler);
+        }
+      },
+      // === Utilities ===
+      getController(playerIndex) {
+        return _controllers.find((c) => c.playerIndex === playerIndex);
+      },
+      isLeader(playerIndex) {
+        return playerIndex === _leaderIndex;
+      },
+      getControllerCount() {
+        return _controllers.length;
+      },
+      // === Cleanup ===
+      destroy() {
+        _isDestroyed = true;
+        listeners.clear();
+        broadcasts.length = 0;
+        sends.length = 0;
+      },
+      // === Mock-specific methods ===
+      simulateEvent(playerIndex, event, data) {
+        const eventStr = event;
+        const handlers = listeners.get(eventStr);
+        if (handlers) {
+          handlers.forEach((handler) => {
+            handler(playerIndex, data);
+          });
+        }
+      },
+      simulateControllerJoin(info) {
+        _controllers.push(info);
+        if (_leaderIndex === -1) {
+          _leaderIndex = info.playerIndex;
+        }
+      },
+      simulateControllerLeave(playerIndex) {
+        _controllers = _controllers.filter((c) => c.playerIndex !== playerIndex);
+        if (_leaderIndex === playerIndex) {
+          _leaderIndex = _controllers[0]?.playerIndex ?? -1;
+        }
+      },
+      getBroadcasts() {
+        return [...broadcasts];
+      },
+      getSentToController(playerIndex) {
+        return sends.filter((s) => s.playerIndex === playerIndex).map((s) => ({ event: s.event, data: s.data }));
+      },
+      clearRecordedEvents() {
+        broadcasts.length = 0;
+        sends.length = 0;
+      },
+      triggerReady() {
+        _isReady = true;
+      }
+    };
+    if (autoReady) {
+      setTimeout(() => screen.triggerReady(), 0);
+    }
+    return screen;
+  }
+  function createMockController(options = {}) {
+    const {
+      roomCode = "TEST",
+      myIndex = 0,
+      isLeader: initialIsLeader = false,
+      autoReady = true
+    } = options;
+    let _isReady = false;
+    let _isDestroyed = false;
+    let _isLeader = initialIsLeader;
+    const listeners = /* @__PURE__ */ new Map();
+    const sentEvents = [];
+    const controller = {
+      // === Properties ===
+      get myIndex() {
+        return myIndex;
+      },
+      get isLeader() {
+        return _isLeader;
+      },
+      get roomCode() {
+        return roomCode;
+      },
+      get isReady() {
+        return _isReady;
+      },
+      get isDestroyed() {
+        return _isDestroyed;
+      },
+      // === Communication Methods ===
+      send(event, data) {
+        if (_isDestroyed) {
+          throw new Error("Cannot send: controller is destroyed");
+        }
+        sentEvents.push({ event, data });
+      },
+      sendRaw(event, data) {
+        if (_isDestroyed) {
+          throw new Error("Cannot send: controller is destroyed");
+        }
+        sentEvents.push({ event, data });
+      },
+      // === Event Subscription ===
+      on(event, handler) {
+        const eventStr = event;
+        if (!listeners.has(eventStr)) {
+          listeners.set(eventStr, /* @__PURE__ */ new Set());
+        }
+        listeners.get(eventStr).add(handler);
+        return () => {
+          listeners.get(eventStr)?.delete(handler);
+        };
+      },
+      once(event, handler) {
+        const wrapper = (data) => {
+          handler(data);
+          controller.off(event, wrapper);
+        };
+        return controller.on(event, wrapper);
+      },
+      off(event, handler) {
+        const eventStr = event;
+        if (!handler) {
+          listeners.delete(eventStr);
+        } else {
+          listeners.get(eventStr)?.delete(handler);
+        }
+      },
+      // === Cleanup ===
+      destroy() {
+        _isDestroyed = true;
+        listeners.clear();
+        sentEvents.length = 0;
+      },
+      // === Mock-specific methods ===
+      simulateEvent(event, data) {
+        const eventStr = event;
+        const handlers = listeners.get(eventStr);
+        if (handlers) {
+          handlers.forEach((handler) => {
+            handler(data);
+          });
+        }
+      },
+      getSentEvents() {
+        return [...sentEvents];
+      },
+      clearRecordedEvents() {
+        sentEvents.length = 0;
+      },
+      triggerReady() {
+        _isReady = true;
+      },
+      setLeader(isLeader) {
+        _isLeader = isLeader;
+      }
+    };
+    if (autoReady) {
+      setTimeout(() => controller.triggerReady(), 0);
+    }
+    return controller;
+  }
+
   exports.DirectTransport = DirectTransport;
-  exports.DirectionPad = DirectionPad;
-  exports.HoldButton = HoldButton;
-  exports.HostRoomProvider = HostRoomProvider;
-  exports.PlayerRoomProvider = PlayerRoomProvider;
   exports.PostMessageTransport = PostMessageTransport;
   exports.SMORE_EVENTS = SMORE_EVENTS;
-  exports.SwipeArea = SwipeArea;
-  exports.TapButton = TapButton;
-  exports.TransportContext = TransportContext;
+  exports.SmoreSDKError = SmoreSDKError$1;
+  exports.createController = createController;
+  exports.createMockController = createMockController;
+  exports.createMockScreen = createMockScreen;
+  exports.createScreen = createScreen;
   exports.isSystemEvent = isSystemEvent;
-  exports.useExternalGames = useExternalGames;
-  exports.useGameHost = useGameHost;
-  exports.useGamePlayer = useGamePlayer;
-  exports.useHostRoom = useHostRoom;
-  exports.usePlayerRoom = usePlayerRoom;
-  exports.useRoom = useRoom;
-  exports.useTransport = useTransport;
   exports.validateUserEvent = validateUserEvent;
 
 }));