@tokioapp/overlay 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Italo Alfaro
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,276 @@
-# Temporary Holding Version
+# @tokioapp/overlay
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Receive TikTok LIVE events from [Tokio](https://tokio.ialfaro.com) in your stream overlays.
+
+Tokio connects to a TikTok LIVE and sends its events (chat, gifts, likes, follows, music requests and more) to overlays over a local WebSocket. This library connects to it, reconnects when Tokio restarts, and hands you each event with typed data. It also receives the events Tokio's previews post to the overlay's iframe, so every overlay you import into Tokio needs it.
+
+It has no dependencies and ships an ES module, a CommonJS build and a browser build, with TypeScript types. Formerly `tokio-event-loader`.
+
+## Install
+
+```sh
+npm install @tokioapp/overlay
+```
+
+Or load the browser build from a CDN. It defines a global `TokioOverlay`:
+
+```html
+<script src="https://unpkg.com/@tokioapp/overlay@1"></script>
+```
+
+## The setup block
+
+Your overlay's `index.html` must contain a `<script id="tokio-setup">` block. Write it yourself, before the scripts that read it:
+
+```html
+<script id="tokio-setup">
+  window.__OVERLAY_ID__ = "";
+  window.__OVERLAY_CONFIG__ = { title: "Likes" };
+</script>
+```
+
+- `window.__OVERLAY_ID__` is required. Pass it to `tokio.connect`.
+- `window.__OVERLAY_CONFIG__` is only for overlays with settings (`config: true` in `info.yaml`). Give it your `config.yaml` defaults.
+
+Tokio rewrites the block with the overlay's ID and saved settings when it imports the overlay, and again when the streamer saves its settings. The values you write are what the page uses outside Tokio. Tokio refuses to import an overlay without the block.
+
+If you build the overlay with a framework, keep the block in the `index.html` template so it survives the build. See [Building an overlay](https://tokio.ialfaro.com/docs/developers/building-an-overlay/) for the folder layout, `info.yaml` and `config.yaml`.
+
+## Usage
+
+```js
+import { tokio, TOKIO_EVENTS } from "@tokioapp/overlay";
+
+tokio.on(TOKIO_EVENTS.LIKE, (data) => {
+  console.log(`${data.user.username} liked, ${data.totalLikes} likes in total`);
+});
+
+tokio.connect(window.__OVERLAY_ID__);
+```
+
+### In a plain HTML page
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://unpkg.com/@tokioapp/overlay@1"></script>
+    <script id="tokio-setup">
+      window.__OVERLAY_ID__ = "";
+      window.__OVERLAY_CONFIG__ = { title: "Likes" };
+    </script>
+  </head>
+  <body>
+    <h1 id="title">Likes</h1>
+    <p id="likes">0</p>
+
+    <script>
+      const { tokio, TOKIO_EVENTS } = TokioOverlay;
+      const title = document.getElementById("title");
+      const likes = document.getElementById("likes");
+
+      const apply = (config) => {
+        title.textContent = config.title;
+      };
+
+      apply(window.__OVERLAY_CONFIG__);
+      // Sent when the streamer saves the overlay's settings.
+      tokio.on(TOKIO_EVENTS.CONFIG, apply);
+
+      tokio.on(TOKIO_EVENTS.LIKE, (data) => {
+        likes.textContent = data.totalLikes;
+      });
+
+      tokio.connect(window.__OVERLAY_ID__);
+    </script>
+  </body>
+</html>
+```
+
+### In React
+
+`tokio.on` returns its own unsubscribe function, so it fits an effect's cleanup:
+
+```jsx
+useEffect(
+  () => tokio.on(TOKIO_EVENTS.LIKE, (data) => setLikes(data.totalLikes)),
+  [],
+);
+```
+
+Call `tokio.connect` once, when the overlay starts, not in each component.
+
+### Testing while you build
+
+Before you import the overlay, its ID is still empty. To test it:
+
+1. In Tokio, turn on **Settings → Overlay Server**.
+2. Create an ID under **Tools → Test Overlays**.
+3. Connect with it, for example `tokio.connect("<test ID>")`, and open the overlay in your browser.
+4. Click **Test**. Tokio sends your overlay a sample of every LIVE event.
+
+Switch back to `window.__OVERLAY_ID__` before you import it.
+
+## API
+
+### `tokio.connect(id, wsurl?)`
+
+Connects to Tokio. Calling it again closes the previous connection first.
+
+| Parameter | Description                                                                               |
+| --------- | ----------------------------------------------------------------------------------------- |
+| `id`      | The overlay ID, from `window.__OVERLAY_ID__`. Without one, it logs a warning and returns. |
+| `wsurl`   | The WebSocket server. Defaults to `ws://localhost:37891`.                                 |
+
+If Tokio isn't running or the connection drops, it keeps retrying: first after 2 to 3 seconds, then less often, up to every 30 seconds. Each attempt times out after 5 seconds.
+
+Inside Tokio's own previews (the overlay cards in the app), it doesn't open a WebSocket. Tokio posts the events to the preview's iframe instead, and the loader only accepts them from the app page that embeds it.
+
+### `tokio.disconnect()`
+
+Closes the connection. No `CLOSE` event is sent for it. Subscribers stay registered, so you can call `connect` again.
+
+### `tokio.on(event, callback)`
+
+Subscribes `callback` to an event and returns a function that unsubscribes it. You can subscribe before or after `connect`. If a callback throws, the error is logged and the other callbacks still run.
+
+### `tokio.off(event, callback)`
+
+Removes a callback added with `on`.
+
+## Events
+
+Use the `TOKIO_EVENTS` constants. Messages with an unknown event are logged and ignored.
+
+### LIVE events
+
+| Constant         | Event name                 | Sent when                               |
+| ---------------- | -------------------------- | --------------------------------------- |
+| `CHAT`           | `tokio:event:chat`         | A viewer sends a chat message           |
+| `FOLLOW`         | `tokio:event:follow`       | A viewer follows you                    |
+| `SHARE`          | `tokio:event:share`        | A viewer shares the LIVE                |
+| `LIKE`           | `tokio:event:like`         | A viewer likes the LIVE                 |
+| `GIFT`           | `tokio:event:gift`         | A viewer sends a gift                   |
+| `ENVELOPE`       | `tokio:event:envelope`     | A treasure envelope is sent             |
+| `SUPER_FAN`      | `tokio:event:superfan`     | A viewer becomes a Super Fan            |
+| `SUPER_FAN_BOX`  | `tokio:event:superfanbox`  | A Super Fan box is sent                 |
+| `SUPER_FAN_JOIN` | `tokio:event:superfanjoin` | A Super Fan joins the LIVE              |
+| `MEMBER_JOIN`    | `tokio:event:memberjoin`   | A viewer joins the LIVE                 |
+| `ROOM_USER`      | `tokio:event:roomuser`     | The viewer count and top viewers change |
+| `MUSIC_CHANGE`   | `tokio:event:music:change` | The music request queue changes         |
+
+### Library events
+
+| Constant | Event name     | Sent when                                                                             |
+| -------- | -------------- | ------------------------------------------------------------------------------------- |
+| `OPEN`   | `tokio:open`   | The connection to Tokio opens, also after each reconnect                              |
+| `CLOSE`  | `tokio:close`  | The connection closes or an attempt fails. A failed one has code 1006, not `wasClean` |
+| `ERROR`  | `tokio:error`  | The connection fails or times out                                                     |
+| `CONFIG` | `tokio:config` | The streamer saves the overlay's settings                                             |
+
+### Data
+
+Each event's data has a type named after it:
+
+| Event                               | Type               | Data                                                                    |
+| ----------------------------------- | ------------------ | ----------------------------------------------------------------------- |
+| `CHAT`                              | `ChatData`         | `{ user, comment: { content, emotes, lang } }`                          |
+| `FOLLOW`                            | `FollowData`       | `{ user }`                                                              |
+| `SHARE`                             | `ShareData`        | `{ user, shareCount }`                                                  |
+| `LIKE`                              | `LikeData`         | `{ user, likeCount, totalLikes }`                                       |
+| `GIFT`                              | `GiftData`         | `{ user, gift: { id, name, coins, type, comboCount, repeatEnd } }`      |
+| `SUPER_FAN`                         | `SuperFanData`     | `{ user }`                                                              |
+| `SUPER_FAN_JOIN`                    | `SuperFanJoinData` | `{ user }`                                                              |
+| `MEMBER_JOIN`                       | `MemberJoinData`   | `{ user }`                                                              |
+| `ROOM_USER`                         | `RoomUserData`     | `{ views, viewers, ranks: (UserData & { score, position })[] }`         |
+| `MUSIC_CHANGE`                      | `MusicChangeData`  | The whole queue, `MusicInfo[]`: `{ title, thumbnail, playing, played }` |
+| `CLOSE`                             | `CloseData`        | `{ code, reason, wasClean }`                                            |
+| `ERROR`                             | `ErrorData`        | `{ type: "error", message, error }`                                     |
+| `CONFIG`                            | `ConfigData`       | The settings, the same object as `window.__OVERLAY_CONFIG__`            |
+| `ENVELOPE`, `SUPER_FAN_BOX`, `OPEN` |                    | none                                                                    |
+
+`user` is the viewer who triggered the event:
+
+```ts
+interface UserData {
+  username: string; // display name
+  handle: string; // @handle
+  profilePictures: string[];
+  superfan?: boolean;
+  follower?: boolean;
+  moderator?: boolean;
+  fanLevel?: number;
+}
+```
+
+Each chat emote is `{ emoteID, index, images }`. A gift setting in `ConfigData` is a `CustomGift`: `{ value, label, img, coins }`.
+
+A gift streak sends several `GIFT` events with a growing `comboCount`. The last one has `repeatEnd: true`; react to that one for a single reaction per combo.
+
+## TypeScript
+
+Event data is typed from the event you subscribe to. To name a type, import it:
+
+```ts
+import { tokio, TOKIO_EVENTS, type GiftData } from "@tokioapp/overlay";
+
+const onGift = (data: GiftData) => {
+  if (data.gift.repeatEnd) showGift(data.user, data.gift);
+};
+
+tokio.on(TOKIO_EVENTS.GIFT, onGift);
+```
+
+Besides the data types above, the package exports `UserData`, `Emotes`, `MusicInfo`, `CustomGift`, `EventMap` (each event's data) and `TokioPayload` (a message from Tokio).
+
+To type the setup block's values:
+
+```ts
+import type { ConfigData } from "@tokioapp/overlay";
+
+declare global {
+  interface Window {
+    __OVERLAY_ID__: string;
+    __OVERLAY_CONFIG__: ConfigData; // generic config type, you can use your own.
+  }
+}
+```
+
+## Raw WebSocket
+
+Overlays you import into Tokio need the library, since Tokio's previews post their events to the overlay's iframe. A page you don't import can connect a WebSocket itself, to `ws://localhost:37891/?id=<overlay ID>`. Each message is JSON with the event name and its data:
+
+```json
+{
+  "type": "tokio:event:like",
+  "data": { "user": {}, "likeCount": 5, "totalLikes": 1200 }
+}
+```
+
+## Development
+
+```sh
+yarn install
+yarn build      # dist/: index.es.js, index.cjs, index.umd.js and the types
+yarn typecheck  # tsc
+yarn lint       # oxlint
+yarn format     # prettier
+```
+
+Commits follow [Conventional Commits](https://www.conventionalcommits.org/), checked by a commitlint hook.
+
+### Releasing
+
+Bump `version` in `package.json`, commit, and push a matching tag:
+
+```sh
+git tag v1.0.1
+git push origin v1.0.1
+```
+
+The [Publish](.github/workflows/publish.yml) workflow checks the code, publishes the version to npm and creates its GitHub release. Prereleases such as `1.1.0-beta.1` are published under the `next` tag.
+
+## License
+
+[MIT](LICENSE)

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e="ws://localhost:37891",t=function(e){return e.OPEN="tokio:open",e.ERROR="tokio:error",e.CLOSE="tokio:close",e.CONFIG="tokio:config",e.CHAT="tokio:event:chat",e.SHARE="tokio:event:share",e.FOLLOW="tokio:event:follow",e.GIFT="tokio:event:gift",e.LIKE="tokio:event:like",e.ENVELOPE="tokio:event:envelope",e.SUPER_FAN="tokio:event:superfan",e.SUPER_FAN_BOX="tokio:event:superfanbox",e.SUPER_FAN_JOIN="tokio:event:superfanjoin",e.MEMBER_JOIN="tokio:event:memberjoin",e.ROOM_USER="tokio:event:roomuser",e.MUSIC_CHANGE="tokio:event:music:change",e}({}),s=class{target;type;constructor(e,t){this.target=t,this.type=e}},n=class extends s{message;error;constructor(e,t){super("error",t),e instanceof Error?(this.message=e.message,this.error=e):this.message=e}},o=class extends s{code;reason;wasClean;constructor(e=1e3,t="",s,n=!0){super("close",s),this.code=e,this.reason=t,this.wasClean=n}},i=()=>{if("undefined"!=typeof WebSocket)return WebSocket},r=function(e){return e[e.CONNECTING=0]="CONNECTING",e[e.OPEN=1]="OPEN",e[e.CLOSING=2]="CLOSING",e[e.CLOSED=3]="CLOSED",e}({}),c={maxReconnectionDelay:1e4,minReconnectionDelay:1e3+4e3*Math.random(),minUptime:5e3,reconnectionDelayGrowFactor:1.3,connectionTimeout:4e3,maxRetries:1/0,maxEnqueuedMessages:1/0,startClosed:!1,debug:!1},h=class{_ws;_listeners={error:[],message:[],open:[],close:[]};_retryCount=-1;_uptimeTimeout;_connectTimeout;_shouldReconnect=!0;_connectLock=!1;_binaryType="blob";_closeCalled=!1;_messageQueue=[];_url;_protocols;_options;constructor(e,t,s={}){this._url=e,this._protocols=t,this._options=s,this._options.startClosed&&(this._shouldReconnect=!1),this._connect()}get readyStateConstants(){return r}get binaryType(){return this._ws?this._ws.binaryType:this._binaryType}set binaryType(e){this._binaryType=e,this._ws&&(this._ws.binaryType=e)}get retryCount(){return Math.max(this._retryCount,0)}get bufferedAmount(){return this._messageQueue.reduce((e,t)=>"string"==typeof t?e+new Blob([t]).size:t instanceof Blob?e+t.size:e+t.byteLength,0)+(this._ws?this._ws.bufferedAmount:0)}get extensions(){return this._ws?this._ws.extensions:""}get protocol(){return this._ws?this._ws.protocol:""}get readyState(){return this._ws?this._ws.readyState:this._options.startClosed?3:0}get url(){return this._ws?this._ws.url:""}onclose=null;onerror=null;onmessage=null;onopen=null;close(e=1e3,t){this._closeCalled=!0,this._shouldReconnect=!1,this._clearTimeouts(),this._ws?3!==this._ws.readyState?this._ws.close(e,t):this._debug("close: already closed"):this._debug("close enqueued: no ws instance")}reconnect(e,t){this._shouldReconnect=!0,this._closeCalled=!1,this._retryCount=-1,this._ws&&3!==this._ws.readyState?(this._disconnect(e,t),this._connect()):this._connect()}send(e){if(this._ws&&1===this._ws.readyState)this._debug("send",e),this._ws.send(e);else{const{maxEnqueuedMessages:t=c.maxEnqueuedMessages}=this._options;this._messageQueue.length<t&&(this._debug("enqueue",e),this._messageQueue.push(e))}}addEventListener(e,t){const s=this._listeners[e];s&&s.push(t)}dispatchEvent(e){const t=this._listeners[e.type];if(t)for(const s of t)this._callEventListener(e,s);return!0}removeEventListener(e,t){if(this._listeners[e]){const s=this._listeners[e];this._listeners[e]=s.filter(e=>e!==t)}}_debug(...e){this._options.debug&&console.log.apply(console,["RWS>",...e])}_getNextDelay(){const{reconnectionDelayGrowFactor:e=c.reconnectionDelayGrowFactor,minReconnectionDelay:t=c.minReconnectionDelay,maxReconnectionDelay:s=c.maxReconnectionDelay}=this._options;let n=0;return this._retryCount>0&&(n=t*Math.pow(e,this._retryCount-1),n>s&&(n=s)),this._debug("next delay",n),n}_wait(){return new Promise(e=>{setTimeout(e,this._getNextDelay())})}async _getNextUrl(e){if("string"==typeof e)return e;if("function"==typeof e){const t=await Promise.resolve(e());if("string"==typeof t)return t}throw new Error("Invalid URL")}async _connect(){if(this._connectLock||!this._shouldReconnect)return;this._connectLock=!0;const{maxRetries:e=c.maxRetries,connectionTimeout:t=c.connectionTimeout,WebSocket:s=i()}=this._options;if(this._retryCount>=e)this._debug("max retries reached",this._retryCount,">=",e);else{if(this._retryCount++,this._debug("connect",this._retryCount),this._removeListeners(),null==s)throw new Error("No valid WebSocket class provided");try{await this._wait();const e=await this._getNextUrl(this._url);if(this._closeCalled)return void(this._connectLock=!1);this._debug("connect",{url:e,protocols:this._protocols}),this._ws=this._protocols?new s(e,this._protocols):new s(e),this._ws.binaryType=this._binaryType,this._connectLock=!1,this._addListeners(),this._connectTimeout=setTimeout(()=>this._handleTimeout(),t)}catch(o){this._connectLock=!1,this._handleError(new n(o instanceof Error?o:new Error(String(o)),this))}}}_handleTimeout(){this._debug("timeout event"),this._handleError(new n(new Error("timeout"),this))}_disconnect(e=1e3,t,s=!0){if(this._clearTimeouts(),this._ws){this._removeListeners();try{this._ws.close(e,t),this._handleClose(new o(s?e:1006,t,this,s))}catch{}}}_acceptOpen(){this._debug("accept open"),this._retryCount=0}_callEventListener(e,t){"function"==typeof t?t(e):t&&"handleEvent"in t&&t.handleEvent(e)}_handleOpen=e=>{this._debug("open event");const{minUptime:t=c.minUptime}=this._options;clearTimeout(this._connectTimeout),this._uptimeTimeout=setTimeout(()=>this._acceptOpen(),t),this._ws&&(this._ws.binaryType=this._binaryType);const n=e instanceof s?e:new s("open",this);this._messageQueue.forEach(e=>this._ws?.send(e)),this._messageQueue=[],this.onopen&&this.onopen(n),this._listeners.open.forEach(e=>this._callEventListener(n,e))};_handleMessage=e=>{this._debug("message event"),this.onmessage&&this.onmessage(e),this._listeners.message.forEach(t=>this._callEventListener(e,t))};_handleError=e=>{let t="WebSocket Error";e instanceof n&&(t=e.message),this._debug("error event",t),this._disconnect(void 0,"timeout"===t?"timeout":void 0,!1);const s=e instanceof n?e:new n(t,this);this.onerror&&this.onerror(s),this._debug("exec error listeners"),this._listeners.error.forEach(e=>this._callEventListener(s,e)),this._connect()};_handleClose=e=>{this._debug("close event"),this._clearTimeouts(),this._shouldReconnect&&this._connect();const t=e instanceof o?e:new o(e.code,e.reason,this);this.onclose&&this.onclose(t),this._listeners.close.forEach(e=>this._callEventListener(t,e))};_removeListeners(){this._ws&&(this._debug("removeListeners"),this._ws.removeEventListener("open",this._handleOpen),this._ws.removeEventListener("close",this._handleClose),this._ws.removeEventListener("message",this._handleMessage),this._ws.removeEventListener("error",this._handleError))}_addListeners(){this._ws&&(this._debug("addListeners"),this._ws.addEventListener("open",this._handleOpen),this._ws.addEventListener("close",this._handleClose),this._ws.addEventListener("message",this._handleMessage),this._ws.addEventListener("error",this._handleError))}_clearTimeouts(){clearTimeout(this._connectTimeout),clearTimeout(this._uptimeTimeout)}},a=new Set(Object.values(t).filter(e=>e!==t.OPEN&&e!==t.ERROR&&e!==t.CLOSE)),_=new class{_ws=null;_subscribers={};_iframeListener=null;connect(t,s){this.disconnect(),window.name===`TOKIO_APP-${t}`?this._initIframeListener():this._initWebSocket(t,s??e)}disconnect(){this._ws&&(this._ws.onopen=null,this._ws.onmessage=null,this._ws.onerror=null,this._ws.onclose=null,this._ws.close(),this._ws=null),this._iframeListener&&(window.removeEventListener("message",this._iframeListener),this._iframeListener=null)}on(e,t){return this._subscribers[e]||(this._subscribers[e]=new Set),this._subscribers[e].add(t),()=>this.off(e,t)}off(e,t){const s=this._subscribers[e];s&&s.delete(t)}_publish(e,t){const s=this._subscribers[e];s&&s.forEach(s=>{try{s(t)}catch(n){console.error(`Tokio subscriber for ${e} failed:`,n)}})}_initWebSocket(e,s){if(!e)return void console.warn("Tokio: connect() needs the overlay ID, not connecting.");const n=new URL(s);n.searchParams.set("id",e),this._ws=new h(n.toString(),[],{minReconnectionDelay:2e3+1e3*Math.random(),reconnectionDelayGrowFactor:1.5,maxReconnectionDelay:3e4,connectionTimeout:5e3}),this._ws.onopen=()=>{this._publish(t.OPEN,void 0)},this._ws.onmessage=e=>{let t;try{t=JSON.parse(e.data)}catch(s){return void console.error("Failed to parse WebSocket message:",s)}this._handleEvents(t)},this._ws.onerror=e=>{const s={type:"error",message:e.message||"WebSocket Error",error:e.error||new Error(e.message||"WebSocket Error")};this._publish(t.ERROR,s)},this._ws.onclose=e=>{const s={code:e.code,reason:e.reason,wasClean:e.wasClean};this._publish(t.CLOSE,s)}}_initIframeListener(){this._iframeListener=e=>{if(e.source!==window.parent)return;let t=e.data;if("string"==typeof t)try{t=JSON.parse(t)}catch{return}"object"==typeof t&&null!==t&&"action"in t&&"TOKIO_PREVIEW"===t.action&&"payload"in t&&this._handleEvents(t.payload)},window.addEventListener("message",this._iframeListener)}_handleEvents(e){if((e=>"object"==typeof e&&null!==e&&"type"in e&&"string"==typeof e.type&&a.has(e.type))(e))this._publish(e.type,e.data);else{const t="object"==typeof e&&null!==e&&"type"in e?e.type:void 0;console.warn(`Received unknown Tokio event type: ${String(t)}`)}}};exports.TOKIO_EVENTS=t,exports.tokio=_;

package/dist/index.es.js

@@ -0,0 +1 @@
+var e="ws://localhost:37891",t=/* @__PURE__ */function(e){return e.OPEN="tokio:open",e.ERROR="tokio:error",e.CLOSE="tokio:close",e.CONFIG="tokio:config",e.CHAT="tokio:event:chat",e.SHARE="tokio:event:share",e.FOLLOW="tokio:event:follow",e.GIFT="tokio:event:gift",e.LIKE="tokio:event:like",e.ENVELOPE="tokio:event:envelope",e.SUPER_FAN="tokio:event:superfan",e.SUPER_FAN_BOX="tokio:event:superfanbox",e.SUPER_FAN_JOIN="tokio:event:superfanjoin",e.MEMBER_JOIN="tokio:event:memberjoin",e.ROOM_USER="tokio:event:roomuser",e.MUSIC_CHANGE="tokio:event:music:change",e}({}),s=class{target;type;constructor(e,t){this.target=t,this.type=e}},n=class extends s{message;error;constructor(e,t){super("error",t),e instanceof Error?(this.message=e.message,this.error=e):this.message=e}},i=class extends s{code;reason;wasClean;constructor(e=1e3,t="",s,n=!0){super("close",s),this.code=e,this.reason=t,this.wasClean=n}},o=()=>{if("undefined"!=typeof WebSocket)return WebSocket},r=/* @__PURE__ */function(e){return e[e.CONNECTING=0]="CONNECTING",e[e.OPEN=1]="OPEN",e[e.CLOSING=2]="CLOSING",e[e.CLOSED=3]="CLOSED",e}({}),c={maxReconnectionDelay:1e4,minReconnectionDelay:1e3+4e3*Math.random(),minUptime:5e3,reconnectionDelayGrowFactor:1.3,connectionTimeout:4e3,maxRetries:1/0,maxEnqueuedMessages:1/0,startClosed:!1,debug:!1},h=class{_ws;_listeners={error:[],message:[],open:[],close:[]};_retryCount=-1;_uptimeTimeout;_connectTimeout;_shouldReconnect=!0;_connectLock=!1;_binaryType="blob";_closeCalled=!1;_messageQueue=[];_url;_protocols;_options;constructor(e,t,s={}){this._url=e,this._protocols=t,this._options=s,this._options.startClosed&&(this._shouldReconnect=!1),this._connect()}get readyStateConstants(){return r}get binaryType(){return this._ws?this._ws.binaryType:this._binaryType}set binaryType(e){this._binaryType=e,this._ws&&(this._ws.binaryType=e)}get retryCount(){return Math.max(this._retryCount,0)}get bufferedAmount(){return this._messageQueue.reduce((e,t)=>"string"==typeof t?e+new Blob([t]).size:t instanceof Blob?e+t.size:e+t.byteLength,0)+(this._ws?this._ws.bufferedAmount:0)}get extensions(){return this._ws?this._ws.extensions:""}get protocol(){return this._ws?this._ws.protocol:""}get readyState(){return this._ws?this._ws.readyState:this._options.startClosed?3:0}get url(){return this._ws?this._ws.url:""}onclose=null;onerror=null;onmessage=null;onopen=null;close(e=1e3,t){this._closeCalled=!0,this._shouldReconnect=!1,this._clearTimeouts(),this._ws?3!==this._ws.readyState?this._ws.close(e,t):this._debug("close: already closed"):this._debug("close enqueued: no ws instance")}reconnect(e,t){this._shouldReconnect=!0,this._closeCalled=!1,this._retryCount=-1,this._ws&&3!==this._ws.readyState?(this._disconnect(e,t),this._connect()):this._connect()}send(e){if(this._ws&&1===this._ws.readyState)this._debug("send",e),this._ws.send(e);else{const{maxEnqueuedMessages:t=c.maxEnqueuedMessages}=this._options;this._messageQueue.length<t&&(this._debug("enqueue",e),this._messageQueue.push(e))}}addEventListener(e,t){const s=this._listeners[e];s&&s.push(t)}dispatchEvent(e){const t=this._listeners[e.type];if(t)for(const s of t)this._callEventListener(e,s);return!0}removeEventListener(e,t){if(this._listeners[e]){const s=this._listeners[e];this._listeners[e]=s.filter(e=>e!==t)}}_debug(...e){this._options.debug&&console.log.apply(console,["RWS>",...e])}_getNextDelay(){const{reconnectionDelayGrowFactor:e=c.reconnectionDelayGrowFactor,minReconnectionDelay:t=c.minReconnectionDelay,maxReconnectionDelay:s=c.maxReconnectionDelay}=this._options;let n=0;return this._retryCount>0&&(n=t*Math.pow(e,this._retryCount-1),n>s&&(n=s)),this._debug("next delay",n),n}_wait(){return new Promise(e=>{setTimeout(e,this._getNextDelay())})}async _getNextUrl(e){if("string"==typeof e)return e;if("function"==typeof e){const t=await Promise.resolve(e());if("string"==typeof t)return t}throw new Error("Invalid URL")}async _connect(){if(this._connectLock||!this._shouldReconnect)return;this._connectLock=!0;const{maxRetries:e=c.maxRetries,connectionTimeout:t=c.connectionTimeout,WebSocket:s=o()}=this._options;if(this._retryCount>=e)this._debug("max retries reached",this._retryCount,">=",e);else{if(this._retryCount++,this._debug("connect",this._retryCount),this._removeListeners(),null==s)throw new Error("No valid WebSocket class provided");try{await this._wait();const e=await this._getNextUrl(this._url);if(this._closeCalled)return void(this._connectLock=!1);this._debug("connect",{url:e,protocols:this._protocols}),this._ws=this._protocols?new s(e,this._protocols):new s(e),this._ws.binaryType=this._binaryType,this._connectLock=!1,this._addListeners(),this._connectTimeout=setTimeout(()=>this._handleTimeout(),t)}catch(i){this._connectLock=!1,this._handleError(new n(i instanceof Error?i:new Error(String(i)),this))}}}_handleTimeout(){this._debug("timeout event"),this._handleError(new n(/* @__PURE__ */new Error("timeout"),this))}_disconnect(e=1e3,t,s=!0){if(this._clearTimeouts(),this._ws){this._removeListeners();try{this._ws.close(e,t),this._handleClose(new i(s?e:1006,t,this,s))}catch{}}}_acceptOpen(){this._debug("accept open"),this._retryCount=0}_callEventListener(e,t){"function"==typeof t?t(e):t&&"handleEvent"in t&&t.handleEvent(e)}_handleOpen=e=>{this._debug("open event");const{minUptime:t=c.minUptime}=this._options;clearTimeout(this._connectTimeout),this._uptimeTimeout=setTimeout(()=>this._acceptOpen(),t),this._ws&&(this._ws.binaryType=this._binaryType);const n=e instanceof s?e:new s("open",this);this._messageQueue.forEach(e=>this._ws?.send(e)),this._messageQueue=[],this.onopen&&this.onopen(n),this._listeners.open.forEach(e=>this._callEventListener(n,e))};_handleMessage=e=>{this._debug("message event"),this.onmessage&&this.onmessage(e),this._listeners.message.forEach(t=>this._callEventListener(e,t))};_handleError=e=>{let t="WebSocket Error";e instanceof n&&(t=e.message),this._debug("error event",t),this._disconnect(void 0,"timeout"===t?"timeout":void 0,!1);const s=e instanceof n?e:new n(t,this);this.onerror&&this.onerror(s),this._debug("exec error listeners"),this._listeners.error.forEach(e=>this._callEventListener(s,e)),this._connect()};_handleClose=e=>{this._debug("close event"),this._clearTimeouts(),this._shouldReconnect&&this._connect();const t=e instanceof i?e:new i(e.code,e.reason,this);this.onclose&&this.onclose(t),this._listeners.close.forEach(e=>this._callEventListener(t,e))};_removeListeners(){this._ws&&(this._debug("removeListeners"),this._ws.removeEventListener("open",this._handleOpen),this._ws.removeEventListener("close",this._handleClose),this._ws.removeEventListener("message",this._handleMessage),this._ws.removeEventListener("error",this._handleError))}_addListeners(){this._ws&&(this._debug("addListeners"),this._ws.addEventListener("open",this._handleOpen),this._ws.addEventListener("close",this._handleClose),this._ws.addEventListener("message",this._handleMessage),this._ws.addEventListener("error",this._handleError))}_clearTimeouts(){clearTimeout(this._connectTimeout),clearTimeout(this._uptimeTimeout)}},a=new Set(Object.values(t).filter(e=>e!==t.OPEN&&e!==t.ERROR&&e!==t.CLOSE)),_=new class{_ws=null;_subscribers={};_iframeListener=null;connect(t,s){this.disconnect(),window.name===`TOKIO_APP-${t}`?this._initIframeListener():this._initWebSocket(t,s??e)}disconnect(){this._ws&&(this._ws.onopen=null,this._ws.onmessage=null,this._ws.onerror=null,this._ws.onclose=null,this._ws.close(),this._ws=null),this._iframeListener&&(window.removeEventListener("message",this._iframeListener),this._iframeListener=null)}on(e,t){return this._subscribers[e]||(this._subscribers[e]=/* @__PURE__ */new Set),this._subscribers[e].add(t),()=>this.off(e,t)}off(e,t){const s=this._subscribers[e];s&&s.delete(t)}_publish(e,t){const s=this._subscribers[e];s&&s.forEach(s=>{try{s(t)}catch(n){console.error(`Tokio subscriber for ${e} failed:`,n)}})}_initWebSocket(e,s){if(!e)return void console.warn("Tokio: connect() needs the overlay ID, not connecting.");const n=new URL(s);n.searchParams.set("id",e),this._ws=new h(n.toString(),[],{minReconnectionDelay:2e3+1e3*Math.random(),reconnectionDelayGrowFactor:1.5,maxReconnectionDelay:3e4,connectionTimeout:5e3}),this._ws.onopen=()=>{this._publish(t.OPEN,void 0)},this._ws.onmessage=e=>{let t;try{t=JSON.parse(e.data)}catch(s){return void console.error("Failed to parse WebSocket message:",s)}this._handleEvents(t)},this._ws.onerror=e=>{const s={type:"error",message:e.message||"WebSocket Error",error:e.error||new Error(e.message||"WebSocket Error")};this._publish(t.ERROR,s)},this._ws.onclose=e=>{const s={code:e.code,reason:e.reason,wasClean:e.wasClean};this._publish(t.CLOSE,s)}}_initIframeListener(){this._iframeListener=e=>{if(e.source!==window.parent)return;let t=e.data;if("string"==typeof t)try{t=JSON.parse(t)}catch{return}"object"==typeof t&&null!==t&&"action"in t&&"TOKIO_PREVIEW"===t.action&&"payload"in t&&this._handleEvents(t.payload)},window.addEventListener("message",this._iframeListener)}_handleEvents(e){if((e=>"object"==typeof e&&null!==e&&"type"in e&&"string"==typeof e.type&&a.has(e.type))(e))this._publish(e.type,e.data);else{const t="object"==typeof e&&null!==e&&"type"in e?e.type:void 0;console.warn(`Received unknown Tokio event type: ${String(t)}`)}}};export{t as TOKIO_EVENTS,_ as tokio};

package/dist/index.umd.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).TokioOverlay={})}(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:"Module"});var t="ws://localhost:37891",s=function(e){return e.OPEN="tokio:open",e.ERROR="tokio:error",e.CLOSE="tokio:close",e.CONFIG="tokio:config",e.CHAT="tokio:event:chat",e.SHARE="tokio:event:share",e.FOLLOW="tokio:event:follow",e.GIFT="tokio:event:gift",e.LIKE="tokio:event:like",e.ENVELOPE="tokio:event:envelope",e.SUPER_FAN="tokio:event:superfan",e.SUPER_FAN_BOX="tokio:event:superfanbox",e.SUPER_FAN_JOIN="tokio:event:superfanjoin",e.MEMBER_JOIN="tokio:event:memberjoin",e.ROOM_USER="tokio:event:roomuser",e.MUSIC_CHANGE="tokio:event:music:change",e}({}),n=class{target;type;constructor(e,t){this.target=t,this.type=e}},o=class extends n{message;error;constructor(e,t){super("error",t),e instanceof Error?(this.message=e.message,this.error=e):this.message=e}},i=class extends n{code;reason;wasClean;constructor(e=1e3,t="",s,n=!0){super("close",s),this.code=e,this.reason=t,this.wasClean=n}},r=()=>{if("undefined"!=typeof WebSocket)return WebSocket},c=function(e){return e[e.CONNECTING=0]="CONNECTING",e[e.OPEN=1]="OPEN",e[e.CLOSING=2]="CLOSING",e[e.CLOSED=3]="CLOSED",e}({}),h={maxReconnectionDelay:1e4,minReconnectionDelay:1e3+4e3*Math.random(),minUptime:5e3,reconnectionDelayGrowFactor:1.3,connectionTimeout:4e3,maxRetries:1/0,maxEnqueuedMessages:1/0,startClosed:!1,debug:!1},a=class{_ws;_listeners={error:[],message:[],open:[],close:[]};_retryCount=-1;_uptimeTimeout;_connectTimeout;_shouldReconnect=!0;_connectLock=!1;_binaryType="blob";_closeCalled=!1;_messageQueue=[];_url;_protocols;_options;constructor(e,t,s={}){this._url=e,this._protocols=t,this._options=s,this._options.startClosed&&(this._shouldReconnect=!1),this._connect()}get readyStateConstants(){return c}get binaryType(){return this._ws?this._ws.binaryType:this._binaryType}set binaryType(e){this._binaryType=e,this._ws&&(this._ws.binaryType=e)}get retryCount(){return Math.max(this._retryCount,0)}get bufferedAmount(){return this._messageQueue.reduce((e,t)=>"string"==typeof t?e+new Blob([t]).size:t instanceof Blob?e+t.size:e+t.byteLength,0)+(this._ws?this._ws.bufferedAmount:0)}get extensions(){return this._ws?this._ws.extensions:""}get protocol(){return this._ws?this._ws.protocol:""}get readyState(){return this._ws?this._ws.readyState:this._options.startClosed?3:0}get url(){return this._ws?this._ws.url:""}onclose=null;onerror=null;onmessage=null;onopen=null;close(e=1e3,t){this._closeCalled=!0,this._shouldReconnect=!1,this._clearTimeouts(),this._ws?3!==this._ws.readyState?this._ws.close(e,t):this._debug("close: already closed"):this._debug("close enqueued: no ws instance")}reconnect(e,t){this._shouldReconnect=!0,this._closeCalled=!1,this._retryCount=-1,this._ws&&3!==this._ws.readyState?(this._disconnect(e,t),this._connect()):this._connect()}send(e){if(this._ws&&1===this._ws.readyState)this._debug("send",e),this._ws.send(e);else{const{maxEnqueuedMessages:t=h.maxEnqueuedMessages}=this._options;this._messageQueue.length<t&&(this._debug("enqueue",e),this._messageQueue.push(e))}}addEventListener(e,t){const s=this._listeners[e];s&&s.push(t)}dispatchEvent(e){const t=this._listeners[e.type];if(t)for(const s of t)this._callEventListener(e,s);return!0}removeEventListener(e,t){if(this._listeners[e]){const s=this._listeners[e];this._listeners[e]=s.filter(e=>e!==t)}}_debug(...e){this._options.debug&&console.log.apply(console,["RWS>",...e])}_getNextDelay(){const{reconnectionDelayGrowFactor:e=h.reconnectionDelayGrowFactor,minReconnectionDelay:t=h.minReconnectionDelay,maxReconnectionDelay:s=h.maxReconnectionDelay}=this._options;let n=0;return this._retryCount>0&&(n=t*Math.pow(e,this._retryCount-1),n>s&&(n=s)),this._debug("next delay",n),n}_wait(){return new Promise(e=>{setTimeout(e,this._getNextDelay())})}async _getNextUrl(e){if("string"==typeof e)return e;if("function"==typeof e){const t=await Promise.resolve(e());if("string"==typeof t)return t}throw new Error("Invalid URL")}async _connect(){if(this._connectLock||!this._shouldReconnect)return;this._connectLock=!0;const{maxRetries:e=h.maxRetries,connectionTimeout:t=h.connectionTimeout,WebSocket:s=r()}=this._options;if(this._retryCount>=e)this._debug("max retries reached",this._retryCount,">=",e);else{if(this._retryCount++,this._debug("connect",this._retryCount),this._removeListeners(),null==s)throw new Error("No valid WebSocket class provided");try{await this._wait();const e=await this._getNextUrl(this._url);if(this._closeCalled)return void(this._connectLock=!1);this._debug("connect",{url:e,protocols:this._protocols}),this._ws=this._protocols?new s(e,this._protocols):new s(e),this._ws.binaryType=this._binaryType,this._connectLock=!1,this._addListeners(),this._connectTimeout=setTimeout(()=>this._handleTimeout(),t)}catch(n){this._connectLock=!1,this._handleError(new o(n instanceof Error?n:new Error(String(n)),this))}}}_handleTimeout(){this._debug("timeout event"),this._handleError(new o(new Error("timeout"),this))}_disconnect(e=1e3,t,s=!0){if(this._clearTimeouts(),this._ws){this._removeListeners();try{this._ws.close(e,t),this._handleClose(new i(s?e:1006,t,this,s))}catch{}}}_acceptOpen(){this._debug("accept open"),this._retryCount=0}_callEventListener(e,t){"function"==typeof t?t(e):t&&"handleEvent"in t&&t.handleEvent(e)}_handleOpen=e=>{this._debug("open event");const{minUptime:t=h.minUptime}=this._options;clearTimeout(this._connectTimeout),this._uptimeTimeout=setTimeout(()=>this._acceptOpen(),t),this._ws&&(this._ws.binaryType=this._binaryType);const s=e instanceof n?e:new n("open",this);this._messageQueue.forEach(e=>this._ws?.send(e)),this._messageQueue=[],this.onopen&&this.onopen(s),this._listeners.open.forEach(e=>this._callEventListener(s,e))};_handleMessage=e=>{this._debug("message event"),this.onmessage&&this.onmessage(e),this._listeners.message.forEach(t=>this._callEventListener(e,t))};_handleError=e=>{let t="WebSocket Error";e instanceof o&&(t=e.message),this._debug("error event",t),this._disconnect(void 0,"timeout"===t?"timeout":void 0,!1);const s=e instanceof o?e:new o(t,this);this.onerror&&this.onerror(s),this._debug("exec error listeners"),this._listeners.error.forEach(e=>this._callEventListener(s,e)),this._connect()};_handleClose=e=>{this._debug("close event"),this._clearTimeouts(),this._shouldReconnect&&this._connect();const t=e instanceof i?e:new i(e.code,e.reason,this);this.onclose&&this.onclose(t),this._listeners.close.forEach(e=>this._callEventListener(t,e))};_removeListeners(){this._ws&&(this._debug("removeListeners"),this._ws.removeEventListener("open",this._handleOpen),this._ws.removeEventListener("close",this._handleClose),this._ws.removeEventListener("message",this._handleMessage),this._ws.removeEventListener("error",this._handleError))}_addListeners(){this._ws&&(this._debug("addListeners"),this._ws.addEventListener("open",this._handleOpen),this._ws.addEventListener("close",this._handleClose),this._ws.addEventListener("message",this._handleMessage),this._ws.addEventListener("error",this._handleError))}_clearTimeouts(){clearTimeout(this._connectTimeout),clearTimeout(this._uptimeTimeout)}},_=new Set(Object.values(s).filter(e=>e!==s.OPEN&&e!==s.ERROR&&e!==s.CLOSE)),l=new class{_ws=null;_subscribers={};_iframeListener=null;connect(e,s){this.disconnect(),window.name===`TOKIO_APP-${e}`?this._initIframeListener():this._initWebSocket(e,s??t)}disconnect(){this._ws&&(this._ws.onopen=null,this._ws.onmessage=null,this._ws.onerror=null,this._ws.onclose=null,this._ws.close(),this._ws=null),this._iframeListener&&(window.removeEventListener("message",this._iframeListener),this._iframeListener=null)}on(e,t){return this._subscribers[e]||(this._subscribers[e]=new Set),this._subscribers[e].add(t),()=>this.off(e,t)}off(e,t){const s=this._subscribers[e];s&&s.delete(t)}_publish(e,t){const s=this._subscribers[e];s&&s.forEach(s=>{try{s(t)}catch(n){console.error(`Tokio subscriber for ${e} failed:`,n)}})}_initWebSocket(e,t){if(!e)return void console.warn("Tokio: connect() needs the overlay ID, not connecting.");const n=new URL(t);n.searchParams.set("id",e),this._ws=new a(n.toString(),[],{minReconnectionDelay:2e3+1e3*Math.random(),reconnectionDelayGrowFactor:1.5,maxReconnectionDelay:3e4,connectionTimeout:5e3}),this._ws.onopen=()=>{this._publish(s.OPEN,void 0)},this._ws.onmessage=e=>{let t;try{t=JSON.parse(e.data)}catch(s){return void console.error("Failed to parse WebSocket message:",s)}this._handleEvents(t)},this._ws.onerror=e=>{const t={type:"error",message:e.message||"WebSocket Error",error:e.error||new Error(e.message||"WebSocket Error")};this._publish(s.ERROR,t)},this._ws.onclose=e=>{const t={code:e.code,reason:e.reason,wasClean:e.wasClean};this._publish(s.CLOSE,t)}}_initIframeListener(){this._iframeListener=e=>{if(e.source!==window.parent)return;let t=e.data;if("string"==typeof t)try{t=JSON.parse(t)}catch{return}"object"==typeof t&&null!==t&&"action"in t&&"TOKIO_PREVIEW"===t.action&&"payload"in t&&this._handleEvents(t.payload)},window.addEventListener("message",this._iframeListener)}_handleEvents(e){if((e=>"object"==typeof e&&null!==e&&"type"in e&&"string"==typeof e.type&&_.has(e.type))(e))this._publish(e.type,e.data);else{const t="object"==typeof e&&null!==e&&"type"in e?e.type:void 0;console.warn(`Received unknown Tokio event type: ${String(t)}`)}}};e.TOKIO_EVENTS=s,e.tokio=l});

package/dist/types/config/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    WS_URL: string;
+};
+export default _default;

package/dist/types/core/index.d.ts

@@ -0,0 +1,47 @@
+import { EventMap, TOKIO_EVENTS } from '../types';
+export { TOKIO_EVENTS };
+export declare class EventLoader {
+    private _ws;
+    private _subscribers;
+    private _iframeListener;
+    /**
+     * Initializes the event loader. Inside a `Tokio App` preview it listens for the
+     * events the App posts to the iframe, anywhere else it connects to the WebSocket server.
+     *
+     * @param id - Overlay ID assigned by the `Tokio App`.
+     * @param wsurl - Optional WebSocket server URL. If omitted, it falls back to `Tokio App default`.
+     */
+    connect(id: string, wsurl?: string): void;
+    /**
+     * Closes the active WebSocket connection and stops listening for previews.
+     * Subscribers stay registered, and no CLOSE event is sent for this connection.
+     */
+    disconnect(): void;
+    /**
+     * Subscribes a callback function to a specific `Tokio` event.
+     *
+     * @param event - The name of the event to listen for.
+     * @param callback - The callback function executed when the event fires.
+     * @returns A cleanup function that unsubscribes this specific listener when called.
+     *
+     * @example
+     * const unsubscribe = tokio.on(TOKIO_EVENTS.CHAT, (data) => {
+     *   console.log('Received CHAT payload:', data);
+     * });
+     *
+     * // Later, to unsubscribe:
+     * unsubscribe();
+     */
+    on<K extends TOKIO_EVENTS>(event: K, callback: (payload: EventMap[K]) => void): () => void;
+    /**
+     * Removes a previously registered callback function from an event.
+     *
+     * @param event - The event name the callback was subscribed to.
+     * @param callback - The exact callback function instance to remove.
+     */
+    off<K extends TOKIO_EVENTS>(event: K, callback: (payload: EventMap[K]) => void): void;
+    private _publish;
+    private _initWebSocket;
+    private _initIframeListener;
+    private _handleEvents;
+}

package/dist/types/core/websocket/events.d.ts

@@ -0,0 +1,36 @@
+export declare class Event {
+    target: unknown;
+    type: string;
+    constructor(type: string, target: unknown);
+}
+export declare class ErrorEvent extends Event {
+    message: string;
+    error?: Error;
+    constructor(error: Error | string, target: unknown);
+}
+export declare class CloseEvent extends Event {
+    code: number;
+    reason: string;
+    wasClean: boolean;
+    constructor(code: number | undefined, reason: string | undefined, target: unknown, wasClean?: boolean);
+}
+export interface WebSocketEventMap {
+    close: CloseEvent;
+    error: ErrorEvent;
+    message: MessageEvent;
+    open: Event;
+}
+export interface WebSocketEventListenerMap {
+    close: ((event: CloseEvent) => void) | {
+        handleEvent: (event: CloseEvent) => void;
+    };
+    error: ((event: ErrorEvent) => void) | {
+        handleEvent: (event: ErrorEvent) => void;
+    };
+    message: ((event: MessageEvent) => void) | {
+        handleEvent: (event: MessageEvent) => void;
+    };
+    open: ((event: Event) => void) | {
+        handleEvent: (event: Event) => void;
+    };
+}

package/dist/types/core/websocket/index.d.ts

@@ -0,0 +1,85 @@
+import * as Events from "./events";
+interface WebSocketConstructor {
+    new (url: string, protocols?: string | string[]): WebSocket;
+}
+export declare enum ReadyState {
+    CONNECTING = 0,
+    OPEN = 1,
+    CLOSING = 2,
+    CLOSED = 3
+}
+export type Event = Events.Event;
+export type ErrorEvent = Events.ErrorEvent;
+export type CloseEvent = Events.CloseEvent;
+export type Options = {
+    WebSocket?: WebSocketConstructor;
+    maxReconnectionDelay?: number;
+    minReconnectionDelay?: number;
+    reconnectionDelayGrowFactor?: number;
+    minUptime?: number;
+    connectionTimeout?: number;
+    maxRetries?: number;
+    maxEnqueuedMessages?: number;
+    startClosed?: boolean;
+    debug?: boolean;
+};
+export type UrlProvider = string | (() => string) | (() => Promise<string>);
+export type Message = string | ArrayBuffer | Blob | ArrayBufferView;
+export type ListenersMap = {
+    error: Array<Events.WebSocketEventListenerMap["error"]>;
+    message: Array<Events.WebSocketEventListenerMap["message"]>;
+    open: Array<Events.WebSocketEventListenerMap["open"]>;
+    close: Array<Events.WebSocketEventListenerMap["close"]>;
+};
+export default class ReconnectingWebSocket {
+    private _ws?;
+    private _listeners;
+    private _retryCount;
+    private _uptimeTimeout?;
+    private _connectTimeout?;
+    private _shouldReconnect;
+    private _connectLock;
+    private _binaryType;
+    private _closeCalled;
+    private _messageQueue;
+    private readonly _url;
+    private readonly _protocols?;
+    private readonly _options;
+    constructor(url: UrlProvider, protocols?: string | string[], options?: Options);
+    get readyStateConstants(): typeof ReadyState;
+    get binaryType(): BinaryType;
+    set binaryType(value: BinaryType);
+    get retryCount(): number;
+    get bufferedAmount(): number;
+    get extensions(): string;
+    get protocol(): string;
+    get readyState(): ReadyState;
+    get url(): string;
+    onclose: ((event: Events.CloseEvent) => void) | null;
+    onerror: ((event: Events.ErrorEvent) => void) | null;
+    onmessage: ((event: MessageEvent) => void) | null;
+    onopen: ((event: Event) => void) | null;
+    close(code?: number, reason?: string): void;
+    reconnect(code?: number, reason?: string): void;
+    send(data: Message): void;
+    addEventListener<T extends keyof Events.WebSocketEventListenerMap>(type: T, listener: Events.WebSocketEventListenerMap[T]): void;
+    dispatchEvent(event: Event): boolean;
+    removeEventListener<T extends keyof Events.WebSocketEventListenerMap>(type: T, listener: Events.WebSocketEventListenerMap[T]): void;
+    private _debug;
+    private _getNextDelay;
+    private _wait;
+    private _getNextUrl;
+    private _connect;
+    private _handleTimeout;
+    private _disconnect;
+    private _acceptOpen;
+    private _callEventListener;
+    private _handleOpen;
+    private _handleMessage;
+    private _handleError;
+    private _handleClose;
+    private _removeListeners;
+    private _addListeners;
+    private _clearTimeouts;
+}
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,5 @@
+import { EventLoader, TOKIO_EVENTS } from './core';
+declare const tokio: EventLoader;
+export { tokio, TOKIO_EVENTS };
+export type { CloseData, ConfigData, CustomGift, ErrorData, EventMap, TokioPayload, } from './types';
+export type { ChatData, Emotes, FollowData, GiftData, LikeData, MemberJoinData, MusicChangeData, MusicInfo, RoomUserData, ShareData, SuperFanData, SuperFanJoinData, UserData, } from './types/events';

package/dist/types/types/events.d.ts

@@ -0,0 +1,65 @@
+export interface UserData {
+    username: string;
+    handle: string;
+    profilePictures: string[];
+    superfan?: boolean;
+    follower?: boolean;
+    moderator?: boolean;
+    fanLevel?: number;
+}
+export interface ChatData {
+    user: UserData;
+    comment: {
+        content: string;
+        emotes: Emotes[];
+        lang: string;
+    };
+}
+export type RoomUserData = {
+    ranks: (UserData & {
+        score: number;
+        position: number;
+    })[];
+    views: number;
+    viewers: number;
+};
+export interface Emotes {
+    emoteID: string;
+    index: number;
+    images: string[];
+}
+export interface ShareData {
+    shareCount: number;
+    user: UserData;
+}
+interface SingleUserData {
+    user: UserData;
+}
+export type FollowData = SingleUserData;
+export type SuperFanData = SingleUserData;
+export type MemberJoinData = SingleUserData;
+export type SuperFanJoinData = SingleUserData;
+export interface GiftData {
+    user: UserData;
+    gift: {
+        id: string;
+        coins: number;
+        repeatEnd: boolean;
+        type: number;
+        name: string;
+        comboCount: number;
+    };
+}
+export interface LikeData {
+    user: UserData;
+    likeCount: number;
+    totalLikes: number;
+}
+export type MusicInfo = {
+    title: string;
+    thumbnail: string;
+    playing: boolean;
+    played: boolean;
+};
+export type MusicChangeData = MusicInfo[];
+export {};

package/dist/types/types/index.d.ts

@@ -0,0 +1,72 @@
+import { ChatData, FollowData, GiftData, LikeData, MemberJoinData, MusicChangeData, RoomUserData, ShareData, SuperFanData, SuperFanJoinData } from './events';
+export type CustomGift = {
+    value: number;
+    label: string;
+    img: string;
+    coins: number;
+};
+type ConfigValue = string | number | boolean | string[] | number[] | CustomGift | CustomGift[] | undefined;
+export type ConfigData = {
+    [id: string]: ConfigValue;
+};
+export declare enum TOKIO_EVENTS {
+    OPEN = "tokio:open",
+    ERROR = "tokio:error",
+    CLOSE = "tokio:close",
+    CONFIG = "tokio:config",
+    CHAT = "tokio:event:chat",
+    SHARE = "tokio:event:share",
+    FOLLOW = "tokio:event:follow",
+    GIFT = "tokio:event:gift",
+    LIKE = "tokio:event:like",
+    ENVELOPE = "tokio:event:envelope",
+    SUPER_FAN = "tokio:event:superfan",
+    SUPER_FAN_BOX = "tokio:event:superfanbox",
+    SUPER_FAN_JOIN = "tokio:event:superfanjoin",
+    MEMBER_JOIN = "tokio:event:memberjoin",
+    ROOM_USER = "tokio:event:roomuser",
+    MUSIC_CHANGE = "tokio:event:music:change"
+}
+export interface EventMap {
+    [TOKIO_EVENTS.OPEN]: void;
+    [TOKIO_EVENTS.ERROR]: ErrorData;
+    [TOKIO_EVENTS.CLOSE]: CloseData;
+    [TOKIO_EVENTS.CONFIG]: ConfigData;
+    [TOKIO_EVENTS.CHAT]: ChatData;
+    [TOKIO_EVENTS.SHARE]: ShareData;
+    [TOKIO_EVENTS.FOLLOW]: FollowData;
+    [TOKIO_EVENTS.GIFT]: GiftData;
+    [TOKIO_EVENTS.LIKE]: LikeData;
+    [TOKIO_EVENTS.ENVELOPE]: void;
+    [TOKIO_EVENTS.SUPER_FAN_BOX]: void;
+    [TOKIO_EVENTS.SUPER_FAN]: SuperFanData;
+    [TOKIO_EVENTS.MEMBER_JOIN]: MemberJoinData;
+    [TOKIO_EVENTS.SUPER_FAN_JOIN]: SuperFanJoinData;
+    [TOKIO_EVENTS.ROOM_USER]: RoomUserData;
+    [TOKIO_EVENTS.MUSIC_CHANGE]: MusicChangeData;
+}
+export type AppEvents = Exclude<TOKIO_EVENTS, TOKIO_EVENTS.OPEN | TOKIO_EVENTS.ERROR | TOKIO_EVENTS.CLOSE>;
+export type TokioPayload = {
+    [K in AppEvents]: {
+        type: K;
+        data: EventMap[K];
+    };
+}[AppEvents];
+export interface TokioPreviewMessage {
+    action: "TOKIO_PREVIEW";
+    payload: TokioPayload;
+}
+export interface ErrorData {
+    message?: string;
+    type: string;
+    error?: Error;
+}
+export interface CloseData {
+    code: number;
+    reason: string;
+    wasClean: boolean;
+}
+export type Subscribers = {
+    [K in TOKIO_EVENTS]?: Set<(payload: EventMap[K]) => void>;
+};
+export {};

package/package.json

@@ -1,6 +1,64 @@
 {
   "name": "@tokioapp/overlay",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "Receive TikTok LIVE events from Tokio in your stream overlays.",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.es.js",
+  "types": "./dist/types/index.d.ts",
+  "private": false,
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "unpkg": "dist/index.umd.js",
+  "jsdelivr": "dist/index.umd.js",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "format": "prettier --write .",
+    "lint": "oxlint --type-aware",
+    "typecheck": "tsc --noEmit -p .",
+    "build": "vite build",
+    "prepublishOnly": "yarn build",
+    "prepare": "husky"
+  },
+  "author": "Akuqt",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tokio-app/overlay.git"
+  },
+  "keywords": [
+    "tiktok",
+    "overlays",
+    "alerts",
+    "tokio"
+  ],
+  "bugs": {
+    "url": "https://github.com/tokio-app/overlay/issues"
+  },
+  "homepage": "https://tokio.ialfaro.com",
+  "devDependencies": {
+    "@commitlint/cli": "^21.2.2",
+    "@commitlint/config-conventional": "^21.2.2",
+    "@typescript/typescript6": "^6.0.2",
+    "fallow": "^3.22.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^17.4.1",
+    "oxlint": "^1.81.0",
+    "oxlint-tsgolint": "^7.0.2001",
+    "prettier": "^3.9.6",
+    "terser": "^5.51.2",
+    "typescript": "^7.0.2",
+    "vite": "^8.2.2",
+    "vite-plugin-dts": "^5.1.0"
+  }
+}