@smoregg/sdk 0.4.0 → 0.5.0

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

@@ -1,260 +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
-      }
-    );
-  }
+  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';
 
   class DirectTransport {
     constructor(socket) {
@@ -275,109 +23,6 @@
     }
   }
 
-  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;
-  }
-
   const SMORE_MSG_PREFIX = "smore:";
   function isSmoreMessage(data) {
     return data && typeof data === "object" && typeof data.type === "string" && data.type.startsWith(SMORE_MSG_PREFIX);
@@ -449,237 +94,523 @@
     }
   }
 
-  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`,
+    GAME_OVER: `${SYSTEM_PREFIX$1}game-over`
   };
+  const EVENT_NAME_REGEX$1 = /^[a-zA-Z]([a-zA-Z_-]*[a-zA-Z])?$/;
   function validateEventName$1(event) {
-    if (event.includes(":")) {
+    if (!EVENT_NAME_REGEX$1.test(event)) {
       throw new Error(
-        `[SDK] Invalid event name "${event}". Event names must not contain colons (:). Use underscores (_) or hyphens (-) instead.`
+        `[SmoreHost] 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 _)`
       );
     }
   }
-  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.playerId);
+  class SmoreHost {
+    transport = null;
+    config;
+    _players = [];
+    _roomCode = "";
+    _leaderIndex = -1;
+    _isReady = false;
+    _isDestroyed = false;
+    boundMessageHandler = null;
+    registeredHandlers = [];
+    constructor(config = {}) {
+      this.config = config;
+      if (config.listeners) {
+        for (const event of Object.keys(config.listeners)) {
+          validateEventName$1(event);
+        }
+      }
+      if (config.socket) {
+        this.initBundled(config);
+      } else {
+        this.initIframe(config);
+      }
+    }
+    // ---------------------------------------------------------------------------
+    // Initialization
+    // ---------------------------------------------------------------------------
+    initBundled(config) {
+      if (!config.socket) {
+        throw new Error("[SmoreHost] socket is required for bundled games");
+      }
+      this.transport = new DirectTransport(config.socket);
+      this._roomCode = config.roomCode || "";
+      this._players = config.players || [];
+      this._leaderIndex = config.leaderIndex ?? -1;
+      this.setupEventHandlers();
+      this._isReady = true;
+      this.config.onReady?.();
+    }
+    initIframe(config) {
+      const parentOrigin = config.parentOrigin || "*";
+      window.parent.postMessage({ type: "smore:ready" }, parentOrigin);
+      this.boundMessageHandler = (e) => {
+        if (parentOrigin !== "*" && e.origin !== parentOrigin) return;
+        const msg = e.data;
+        if (!isSmoreMessage(msg)) return;
+        if (msg.type === "smore:init") {
+          const initData = msg.payload;
+          if (initData.side !== "host") {
+            console.error("[SmoreHost] Received init for wrong side:", initData.side);
+            return;
+          }
+          this.transport = new PostMessageTransport(parentOrigin);
+          this._roomCode = initData.roomCode;
+          this._players = this.mapPlayersFromInit(initData.players);
+          this._leaderIndex = this.findLeaderIndex(initData.players, initData.leaderId);
+          this.setupEventHandlers();
+          this._isReady = true;
+          this.config.onReady?.();
+        } else if (msg.type === "smore:update") {
+          const updateData = msg.payload;
+          if (updateData.players) {
+            this._players = this.mapPlayersFromInit(updateData.players);
+          }
+          if (updateData.leaderId !== void 0) {
+            this._leaderIndex = this.findLeaderIndex(this._players, updateData.leaderId);
+          }
+        }
       };
-      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);
+      window.addEventListener("message", this.boundMessageHandler);
+    }
+    mapPlayersFromInit(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.registerHandler(SYSTEM_EVENTS$1.PLAYER_JOIN, (data) => {
+        const playerIndex = data.player?.playerIndex;
+        if (playerIndex !== void 0) {
+          this.config.onPlayerJoin?.(playerIndex);
+        }
       });
-      transport.on("room:player-joined", (data) => {
-        if (data?.player) {
-          onPlayerJoinRef.current?.(data.player);
+      this.registerHandler(SYSTEM_EVENTS$1.PLAYER_LEAVE, (data) => {
+        if (data.playerIndex !== void 0) {
+          this.config.onPlayerLeave?.(data.playerIndex);
         }
       });
-      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.registerHandler("room:player-joined", (data) => {
+        const playerIndex = data?.player?.playerIndex ?? data?.playerIndex;
+        if (playerIndex !== void 0) {
+          this.config.onPlayerJoin?.(playerIndex);
+        }
+      });
+      this.registerHandler("room:player-left", (data) => {
+        const playerIndex = data?.playerIndex ?? data?.player?.playerIndex;
+        if (playerIndex !== void 0) {
+          this.config.onPlayerLeave?.(playerIndex);
+        }
+      });
+      if (this.config.listeners) {
+        for (const [event, handler] of Object.entries(this.config.listeners)) {
+          if (!handler) continue;
+          this.registerHandler(event, (data) => {
+            const { playerIndex, ...rest } = data;
+            if (playerIndex !== void 0) {
+              handler(playerIndex, rest);
+            }
+          });
+        }
+      }
+    }
+    registerHandler(event, handler) {
+      if (!this.transport) return;
+      this.transport.on(event, handler);
+      this.registeredHandlers.push({ event, handler });
+    }
+    // ---------------------------------------------------------------------------
+    // Public Properties
+    // ---------------------------------------------------------------------------
+    /**
+     * Get all players in the room.
+     * Returns a copy to prevent external mutation.
+     */
+    get players() {
+      return [...this._players];
+    }
+    /**
+     * Get the room code.
+     */
+    get roomCode() {
+      return this._roomCode;
+    }
+    /**
+     * Get the leader's player index (-1 if no leader).
+     */
+    get leaderIndex() {
+      return this._leaderIndex;
+    }
+    /**
+     * Check if the host is initialized and ready.
+     */
+    get isReady() {
+      return this._isReady;
+    }
+    // ---------------------------------------------------------------------------
+    // Public Methods
+    // ---------------------------------------------------------------------------
+    /**
+     * Broadcast an event to all players.
+     *
+     * @param event - Event name (no colons allowed)
+     * @param data - Optional data payload
+     *
+     * @example
+     * ```ts
+     * host.broadcast('phase-update', { phase: 'playing' });
+     * host.broadcast('timer-tick', { remaining: 30 });
+     * ```
+     */
+    broadcast(event, data) {
+      this.ensureReady("broadcast");
+      validateEventName$1(event);
+      this.transport.emit(event, data);
+    }
+    /**
+     * Send an event to a specific player.
+     *
+     * @param playerIndex - Target player index (0, 1, 2, ...)
+     * @param event - Event name (no colons allowed)
+     * @param data - Optional data payload
+     *
+     * @example
+     * ```ts
+     * host.sendToPlayer(0, 'your-turn', { timeLimit: 30 });
+     * host.sendToPlayer(1, 'wait', { message: 'Not your turn' });
+     * ```
+     */
+    sendToPlayer(playerIndex, event, data) {
+      this.ensureReady("sendToPlayer");
+      validateEventName$1(event);
+      this.transport.emit(event, {
+        targetPlayerIndex: playerIndex,
+        ...data && typeof data === "object" ? data : { data }
+      });
+    }
+    /**
+     * Signal game over with results.
+     * This will broadcast the game over event to all players.
+     *
+     * @param results - Game results (scores, winner, etc.)
+     *
+     * @example
+     * ```ts
+     * host.gameOver({
+     *   scores: { 0: 100, 1: 75, 2: 50 },
+     *   winner: 0,
+     * });
+     * ```
+     */
+    gameOver(results) {
+      this.ensureReady("gameOver");
+      this.transport.emit(SYSTEM_EVENTS$1.GAME_OVER, { results });
+    }
+    /**
+     * Add a listener for a specific event after construction.
+     *
+     * @param event - Event name (no colons allowed)
+     * @param handler - Handler function (playerIndex, data) => void
+     * @returns Cleanup function to remove the listener
+     *
+     * @example
+     * ```ts
+     * const cleanup = host.on('tap', (playerIndex, data) => {
+     *   console.log(`Player ${playerIndex} tapped`);
+     * });
+     *
+     * // Later
+     * cleanup();
+     * ```
+     */
+    on(event, handler) {
+      validateEventName$1(event);
+      const wrappedHandler = (data) => {
+        const { playerIndex, ...rest } = data;
+        if (playerIndex !== void 0) {
+          handler(playerIndex, rest);
+        }
       };
-    }, [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);
-        const wrappedHandler = (data) => {
-          handler(data.playerId, data.payload);
-        };
-        transport.on(event, wrappedHandler);
-        cleanups.push(() => transport.off(event, wrappedHandler));
+      if (this.transport) {
+        this.transport.on(event, wrappedHandler);
+        this.registeredHandlers.push({ event, handler: wrappedHandler });
       }
       return () => {
-        cleanups.forEach((cleanup) => cleanup());
+        this.transport?.off(event, wrappedHandler);
+        this.registeredHandlers = this.registeredHandlers.filter(
+          (h) => h.event !== event || h.handler !== wrappedHandler
+        );
       };
-    }, [transport, listeners]);
-    const emit = react.useCallback(
-      (event, data) => {
-        validateEventName$1(event);
-        transport?.emit(SYSTEM_EVENTS.BROADCAST, { event, data });
-      },
-      [transport]
-    );
-    const sendToPlayer = react.useCallback(
-      (playerId, event, data) => {
-        validateEventName$1(event);
-        transport?.emit(SYSTEM_EVENTS.SEND_TO_PLAYER, {
-          targetPlayerId: playerId,
-          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
-    };
+    }
+    /**
+     * Clean up all resources.
+     * Call this when unmounting/destroying the game.
+     */
+    destroy() {
+      if (this._isDestroyed) return;
+      this._isDestroyed = true;
+      this._isReady = false;
+      for (const { event, handler } of this.registeredHandlers) {
+        this.transport?.off(event, handler);
+      }
+      this.registeredHandlers = [];
+      if (this.transport instanceof PostMessageTransport) {
+        this.transport.destroy();
+      }
+      this.transport = null;
+      if (this.boundMessageHandler) {
+        window.removeEventListener("message", this.boundMessageHandler);
+        this.boundMessageHandler = null;
+      }
+    }
+    // ---------------------------------------------------------------------------
+    // Private Helpers
+    // ---------------------------------------------------------------------------
+    ensureReady(method) {
+      if (!this._isReady || !this.transport) {
+        throw new Error(`[SmoreHost] Cannot call ${method}() before host is ready. Wait for onReady callback.`);
+      }
+      if (this._isDestroyed) {
+        throw new Error(`[SmoreHost] Cannot call ${method}() after destroy()`);
+      }
+    }
   }
 
+  const SYSTEM_PREFIX = "smore:";
+  const SYSTEM_EVENTS = {
+    PLAYER_JOIN: `${SYSTEM_PREFIX}player-join`,
+    PLAYER_LEAVE: `${SYSTEM_PREFIX}player-leave`
+  };
+  const EVENT_NAME_REGEX = /^[a-zA-Z]([a-zA-Z_-]*[a-zA-Z])?$/;
   function validateEventName(event) {
-    if (event.includes(":")) {
+    if (!EVENT_NAME_REGEX.test(event)) {
       throw new Error(
-        `[SDK] Invalid event name "${event}". Event names must not contain ':' (reserved for system prefixes). Use '_' or '-' instead.`
+        `[SmorePlayer] 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 _)`
       );
     }
   }
-  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.playerId);
-      };
-      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);
+  class SmorePlayer {
+    transport = null;
+    config;
+    _roomCode = "";
+    _myIndex = -1;
+    _isLeader = false;
+    _isReady = false;
+    _isDestroyed = false;
+    boundMessageHandler = null;
+    registeredHandlers = [];
+    constructor(config = {}) {
+      this.config = config;
+      if (config.listeners) {
+        for (const event of Object.keys(config.listeners)) {
+          validateEventName(event);
+        }
+      }
+      if (config.socket) {
+        this.initBundled(config);
+      } else {
+        this.initIframe(config);
+      }
+    }
+    // ---------------------------------------------------------------------------
+    // Initialization
+    // ---------------------------------------------------------------------------
+    initBundled(config) {
+      if (!config.socket) {
+        throw new Error("[SmorePlayer] socket is required for bundled games");
+      }
+      this.transport = new DirectTransport(config.socket);
+      this._roomCode = config.roomCode || "";
+      this._myIndex = config.myIndex ?? -1;
+      this._isLeader = config.isLeader ?? false;
+      this.setupEventHandlers();
+      this._isReady = true;
+      this.config.onReady?.();
+    }
+    initIframe(config) {
+      const parentOrigin = config.parentOrigin || "*";
+      window.parent.postMessage({ type: "smore:ready" }, parentOrigin);
+      this.boundMessageHandler = (e) => {
+        if (parentOrigin !== "*" && e.origin !== parentOrigin) return;
+        const msg = e.data;
+        if (!isSmoreMessage(msg)) return;
+        if (msg.type === "smore:init") {
+          const initData = msg.payload;
+          if (initData.side !== "player") {
+            console.error("[SmorePlayer] Received init for wrong side:", initData.side);
+            return;
+          }
+          if (initData.myIndex === void 0) {
+            console.error("[SmorePlayer] Missing myIndex in init payload");
+            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.config.onReady?.();
+        } else if (msg.type === "smore:update") {
+          const updateData = msg.payload;
+          if (updateData.leaderId !== void 0) ;
+        }
       };
-    }, [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));
+      window.addEventListener("message", this.boundMessageHandler);
+    }
+    setupEventHandlers() {
+      if (!this.transport) return;
+      this.registerHandler(SYSTEM_EVENTS.PLAYER_JOIN, (data) => {
+        const playerIndex = data.player?.playerIndex ?? data.playerIndex;
+        if (playerIndex !== void 0) {
+          this.config.onPlayerJoin?.(playerIndex);
         }
       });
-      return () => cleanups.forEach((fn) => fn());
-    }, [transport, listeners]);
-    const emit = react.useCallback(
-      (event, data) => {
-        if (!transport) return;
-        validateEventName(event);
-        transport.emit(event, data);
-      },
-      [transport]
-    );
-    return {
-      players: room.players,
-      leaderId: room.leaderId,
-      roomCode: room.roomCode,
-      myPlayerId: room.mySessionId,
-      isLeader: room.isLeader,
-      emit
-    };
-  }
-
-  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);
+      this.registerHandler(SYSTEM_EVENTS.PLAYER_LEAVE, (data) => {
+        const playerIndex = data.player?.playerIndex ?? data.playerIndex;
+        if (playerIndex !== void 0) {
+          this.config.onPlayerLeave?.(playerIndex);
+        }
       });
+      if (this.config.listeners) {
+        for (const [event, handler] of Object.entries(this.config.listeners)) {
+          if (!handler) continue;
+          this.registerHandler(event, handler);
+        }
+      }
+    }
+    registerHandler(event, handler) {
+      if (!this.transport) return;
+      this.transport.on(event, handler);
+      this.registeredHandlers.push({ event, handler });
+    }
+    // ---------------------------------------------------------------------------
+    // Public Properties
+    // ---------------------------------------------------------------------------
+    /**
+     * Get my player index (0, 1, 2, ...).
+     */
+    get myIndex() {
+      return this._myIndex;
+    }
+    /**
+     * Check if I am the room leader.
+     */
+    get isLeader() {
+      return this._isLeader;
+    }
+    /**
+     * Get the room code.
+     */
+    get roomCode() {
+      return this._roomCode;
+    }
+    /**
+     * Check if the player is initialized and ready.
+     */
+    get isReady() {
+      return this._isReady;
+    }
+    // ---------------------------------------------------------------------------
+    // Public Methods
+    // ---------------------------------------------------------------------------
+    /**
+     * Send an event to the host.
+     *
+     * @param event - Event name (no colons allowed)
+     * @param data - Optional data payload
+     *
+     * @example
+     * ```ts
+     * player.send('tap', { timestamp: Date.now() });
+     * player.send('answer', { choice: 2 });
+     * ```
+     */
+    send(event, data) {
+      this.ensureReady("send");
+      validateEventName(event);
+      this.transport.emit(event, data);
+    }
+    /**
+     * Add a listener for a specific event after construction.
+     *
+     * @param event - Event name (no colons allowed)
+     * @param handler - Handler function (data) => void
+     * @returns Cleanup function to remove the listener
+     *
+     * @example
+     * ```ts
+     * const cleanup = player.on('phase-update', (data) => {
+     *   console.log('New phase:', data.phase);
+     * });
+     *
+     * // Later
+     * cleanup();
+     * ```
+     */
+    on(event, handler) {
+      validateEventName(event);
+      if (this.transport) {
+        this.transport.on(event, handler);
+        this.registeredHandlers.push({ event, handler });
+      }
       return () => {
-        cancelled = true;
+        this.transport?.off(event, handler);
+        this.registeredHandlers = this.registeredHandlers.filter(
+          (h) => h.event !== event || h.handler !== handler
+        );
       };
-    }, [serverUrl, enabled, refreshKey]);
-    const refresh = () => setRefreshKey((k) => k + 1);
-    return { games, loading, error, refresh };
+    }
+    /**
+     * Clean up all resources.
+     * Call this when unmounting/destroying the game.
+     */
+    destroy() {
+      if (this._isDestroyed) return;
+      this._isDestroyed = true;
+      this._isReady = false;
+      for (const { event, handler } of this.registeredHandlers) {
+        this.transport?.off(event, handler);
+      }
+      this.registeredHandlers = [];
+      if (this.transport instanceof PostMessageTransport) {
+        this.transport.destroy();
+      }
+      this.transport = null;
+      if (this.boundMessageHandler) {
+        window.removeEventListener("message", this.boundMessageHandler);
+        this.boundMessageHandler = null;
+      }
+    }
+    // ---------------------------------------------------------------------------
+    // Private Helpers
+    // ---------------------------------------------------------------------------
+    ensureReady(method) {
+      if (!this._isReady || !this.transport) {
+        throw new Error(`[SmorePlayer] Cannot call ${method}() before player is ready. Wait for onReady callback.`);
+      }
+      if (this._isDestroyed) {
+        throw new Error(`[SmorePlayer] Cannot call ${method}() after destroy()`);
+      }
+    }
   }
 
   const SMORE_EVENTS = {
@@ -708,23 +639,11 @@
   }
 
   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.SmoreHost = SmoreHost;
+  exports.SmorePlayer = SmorePlayer;
   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;
 
 }));