@hashxltd/liveframe-vue 0.0.1

package/README.md

@@ -0,0 +1,2 @@
+# Liveframe Vue Client
+A minimal-footprint TypeScript client for Vue applications designed to communicate with the Liveframe WebSocket server. It provides reactive event streams, channel-based subscriptions, and seamless integration with Vue reactivity and Pinia while supporting middleware-driven event processing and distributed presence updates.

package/bun.lock

@@ -0,0 +1,78 @@
+{
+  "lockfileVersion": 1,
+  "configVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "liveframe-vue",
+      "dependencies": {
+        "nanoevents": "^9.1.0",
+      },
+      "devDependencies": {
+        "@types/bun": "latest",
+      },
+      "peerDependencies": {
+        "typescript": "^5",
+        "vue": "^3.5.30",
+      },
+    },
+  },
+  "packages": {
+    "@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/parser": ["@babel/parser@7.29.0", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww=="],
+
+    "@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
+
+    "@types/bun": ["@types/bun@1.3.10", "", { "dependencies": { "bun-types": "1.3.10" } }, "sha512-0+rlrUrOrTSskibryHbvQkDOWRJwJZqZlxrUs1u4oOoTln8+WIXBPmAuCF35SWB2z4Zl3E84Nl/D0P7803nigQ=="],
+
+    "@types/node": ["@types/node@25.5.0", "", { "dependencies": { "undici-types": "~7.18.0" } }, "sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw=="],
+
+    "@vue/compiler-core": ["@vue/compiler-core@3.5.30", "", { "dependencies": { "@babel/parser": "^7.29.0", "@vue/shared": "3.5.30", "entities": "^7.0.1", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "sha512-s3DfdZkcu/qExZ+td75015ljzHc6vE+30cFMGRPROYjqkroYI5NV2X1yAMX9UeyBNWB9MxCfPcsjpLS11nzkkw=="],
+
+    "@vue/compiler-dom": ["@vue/compiler-dom@3.5.30", "", { "dependencies": { "@vue/compiler-core": "3.5.30", "@vue/shared": "3.5.30" } }, "sha512-eCFYESUEVYHhiMuK4SQTldO3RYxyMR/UQL4KdGD1Yrkfdx4m/HYuZ9jSfPdA+nWJY34VWndiYdW/wZXyiPEB9g=="],
+
+    "@vue/compiler-sfc": ["@vue/compiler-sfc@3.5.30", "", { "dependencies": { "@babel/parser": "^7.29.0", "@vue/compiler-core": "3.5.30", "@vue/compiler-dom": "3.5.30", "@vue/compiler-ssr": "3.5.30", "@vue/shared": "3.5.30", "estree-walker": "^2.0.2", "magic-string": "^0.30.21", "postcss": "^8.5.8", "source-map-js": "^1.2.1" } }, "sha512-LqmFPDn89dtU9vI3wHJnwaV6GfTRD87AjWpTWpyrdVOObVtjIuSeZr181z5C4PmVx/V3j2p+0f7edFKGRMpQ5A=="],
+
+    "@vue/compiler-ssr": ["@vue/compiler-ssr@3.5.30", "", { "dependencies": { "@vue/compiler-dom": "3.5.30", "@vue/shared": "3.5.30" } }, "sha512-NsYK6OMTnx109PSL2IAyf62JP6EUdk4Dmj6AkWcJGBvN0dQoMYtVekAmdqgTtWQgEJo+Okstbf/1p7qZr5H+bA=="],
+
+    "@vue/reactivity": ["@vue/reactivity@3.5.30", "", { "dependencies": { "@vue/shared": "3.5.30" } }, "sha512-179YNgKATuwj9gB+66snskRDOitDiuOZqkYia7mHKJaidOMo/WJxHKF8DuGc4V4XbYTJANlfEKb0yxTQotnx4Q=="],
+
+    "@vue/runtime-core": ["@vue/runtime-core@3.5.30", "", { "dependencies": { "@vue/reactivity": "3.5.30", "@vue/shared": "3.5.30" } }, "sha512-e0Z+8PQsUTdwV8TtEsLzUM7SzC7lQwYKePydb7K2ZnmS6jjND+WJXkmmfh/swYzRyfP1EY3fpdesyYoymCzYfg=="],
+
+    "@vue/runtime-dom": ["@vue/runtime-dom@3.5.30", "", { "dependencies": { "@vue/reactivity": "3.5.30", "@vue/runtime-core": "3.5.30", "@vue/shared": "3.5.30", "csstype": "^3.2.3" } }, "sha512-2UIGakjU4WSQ0T4iwDEW0W7vQj6n7AFn7taqZ9Cvm0Q/RA2FFOziLESrDL4GmtI1wV3jXg5nMoJSYO66egDUBw=="],
+
+    "@vue/server-renderer": ["@vue/server-renderer@3.5.30", "", { "dependencies": { "@vue/compiler-ssr": "3.5.30", "@vue/shared": "3.5.30" }, "peerDependencies": { "vue": "3.5.30" } }, "sha512-v+R34icapydRwbZRD0sXwtHqrQJv38JuMB4JxbOxd8NEpGLny7cncMp53W9UH/zo4j8eDHjQ1dEJXwzFQknjtQ=="],
+
+    "@vue/shared": ["@vue/shared@3.5.30", "", {}, "sha512-YXgQ7JjaO18NeK2K9VTbDHaFy62WrObMa6XERNfNOkAhD1F1oDSf3ZJ7K6GqabZ0BvSDHajp8qfS5Sa2I9n8uQ=="],
+
+    "bun-types": ["bun-types@1.3.10", "", { "dependencies": { "@types/node": "*" } }, "sha512-tcpfCCl6XWo6nCVnpcVrxQ+9AYN1iqMIzgrSKYMB/fjLtV2eyAVEg7AxQJuCq/26R6HpKWykQXuSOq/21RYcbg=="],
+
+    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
+
+    "entities": ["entities@7.0.1", "", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="],
+
+    "estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
+
+    "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
+
+    "nanoevents": ["nanoevents@9.1.0", "", {}, "sha512-Jd0fILWG44a9luj8v5kED4WI+zfkkgwKyRQKItTtlPfEsh7Lznfi1kr8/iZ+XAIss4Qq5GqRB0qtWbaz9ceO/A=="],
+
+    "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
+
+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+
+    "postcss": ["postcss@8.5.8", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg=="],
+
+    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
+
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+
+    "undici-types": ["undici-types@7.18.2", "", {}, "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w=="],
+
+    "vue": ["vue@3.5.30", "", { "dependencies": { "@vue/compiler-dom": "3.5.30", "@vue/compiler-sfc": "3.5.30", "@vue/runtime-dom": "3.5.30", "@vue/server-renderer": "3.5.30", "@vue/shared": "3.5.30" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-hTHLc6VNZyzzEH/l7PFGjpcTvUgiaPK5mdLkbjrTeWSRcEfxFrv56g/XckIYlE9ckuobsdwqd5mk2g1sBkMewg=="],
+  }
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@hashxltd/liveframe-vue",
+  "version": "0.0.1",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "src/index.ts",
+  "type": "module",
+  "scripts": {
+    "build": "bun build src/index.ts --outdir dist --target bun"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5",
+    "vue": "^3.5.30"
+  },
+  "dependencies": {
+    "nanoevents": "^9.1.0"
+  }
+}

package/src/client/index.ts

@@ -0,0 +1,17 @@
+import { LVFabric } from "../fabric";
+
+export class LiveFrameClient {
+  private fabric: LVFabric;
+
+  constructor(url: string) {
+    this.fabric = new LVFabric(url);
+  }
+
+  connect() {
+    this.fabric.open();
+  }
+
+  disconnect() {
+    this.fabric.close();
+  }
+}

package/src/errors/index.ts

@@ -0,0 +1,152 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// Typed error hierarchy for the entire client library.
+// All thrown errors extend LiveFrameError so callers can discriminate with
+// a single instanceof check.
+// ─────────────────────────────────────────────────────────────────────────────
+
+// ─── Base ─────────────────────────────────────────────────────────────────────
+
+export class LiveFrameError extends Error {
+  constructor(
+    public readonly code: string,
+    message: string,
+    public override readonly cause?: unknown,
+  ) {
+    super(message);
+    this.name = "LiveFrameError";
+    // Maintains proper prototype chain in transpiled ES5.
+    Object.setPrototypeOf(this, new.target.prototype);
+  }
+}
+
+// ─── Frame-level errors (codec) ───────────────────────────────────────────────
+
+export enum FrameErrorCode {
+  MALFORMED_JSON = "MALFORMED_JSON",
+  INVALID_SHAPE = "INVALID_SHAPE",
+  VERSION_MISMATCH = "VERSION_MISMATCH",
+  MISSING_FIELD = "MISSING_FIELD",
+  INVALID_EVENT = "INVALID_EVENT",
+  PAYLOAD_TOO_LARGE = "PAYLOAD_TOO_LARGE",
+}
+
+export class FrameError extends LiveFrameError {
+  constructor(code: FrameErrorCode, message: string) {
+    super(code, message);
+    this.name = "FrameError";
+  }
+}
+
+// ─── Transport errors ─────────────────────────────────────────────────────────
+
+export enum TransportErrorCode {
+  UPGRADE_FAILED = "UPGRADE_FAILED",
+  INSECURE_URL = "INSECURE_URL",
+  SOCKET_CLOSED = "SOCKET_CLOSED",
+  CONNECT_TIMEOUT = "CONNECT_TIMEOUT",
+  SEND_FAILED = "SEND_FAILED",
+}
+
+export class TransportError extends LiveFrameError {
+  constructor(
+    code: TransportErrorCode,
+    message: string,
+    public readonly closeCode?: number,
+  ) {
+    super(code, message);
+    this.name = "TransportError";
+  }
+}
+
+// ─── Auth errors ──────────────────────────────────────────────────────────────
+
+export enum AuthErrorCode {
+  TOKEN_FETCH_FAILED = "TOKEN_FETCH_FAILED",
+  AUTH_TIMEOUT = "AUTH_TIMEOUT",
+  AUTH_REJECTED = "AUTH_REJECTED",
+  SESSION_EXPIRED = "SESSION_EXPIRED",
+  TOKEN_REFRESH_FAIL = "TOKEN_REFRESH_FAIL",
+  NOT_AUTHENTICATED = "NOT_AUTHENTICATED",
+}
+
+export class AuthError extends LiveFrameError {
+  constructor(code: AuthErrorCode, message: string, cause?: unknown) {
+    super(code, message, cause);
+    this.name = "AuthError";
+  }
+}
+
+// ─── Rate-limit errors ────────────────────────────────────────────────────────
+
+export enum RateLimitErrorCode {
+  CLIENT_LIMIT_EXCEEDED = "CLIENT_LIMIT_EXCEEDED",
+  SERVER_LIMIT_EXCEEDED = "SERVER_LIMIT_EXCEEDED",
+}
+
+export class RateLimitError extends LiveFrameError {
+  constructor(
+    code: RateLimitErrorCode,
+    message: string,
+    public readonly retryAfterMs: number,
+  ) {
+    super(code, message);
+    this.name = "RateLimitError";
+  }
+}
+
+// ─── Ack errors ───────────────────────────────────────────────────────────────
+
+export enum AckErrorCode {
+  TIMEOUT = "ACK_TIMEOUT",
+  SERVER_REJECTED = "ACK_SERVER_REJECTED",
+  CONNECTION_LOST = "ACK_CONNECTION_LOST",
+  QUEUE_FULL = "ACK_QUEUE_FULL",
+}
+
+export class AckError extends LiveFrameError {
+  constructor(
+    code: AckErrorCode,
+    message: string,
+    public readonly refId: string,
+    /** Server-provided error code when the rejection came from ack.error */
+    public readonly serverCode?: string,
+    public readonly details?: ReadonlyArray<{ field: string; message: string }>,
+  ) {
+    super(code, message);
+    this.name = "AckError";
+  }
+}
+
+// ─── State errors ─────────────────────────────────────────────────────────────
+
+export enum StateErrorCode {
+  NOT_READY = "NOT_READY",
+  ALREADY_CONNECTED = "ALREADY_CONNECTED",
+}
+
+export class StateError extends LiveFrameError {
+  constructor(code: StateErrorCode, message: string) {
+    super(code, message);
+    this.name = "StateError";
+  }
+}
+
+// ─── Presence errors ──────────────────────────────────────────────────────────
+
+export enum PresenceErrorCode {
+  SNAPSHOT_TIMEOUT = "SNAPSHOT_TIMEOUT",
+  SNAPSHOT_FAILED = "SNAPSHOT_FAILED",
+}
+
+export class PresenceError extends LiveFrameError {
+  constructor(code: PresenceErrorCode, message: string) {
+    super(code, message);
+    this.name = "PresenceError";
+  }
+}
+
+// ─── Type guard ───────────────────────────────────────────────────────────────
+
+export function isLiveFrameError(e: unknown): e is LiveFrameError {
+  return e instanceof LiveFrameError;
+}

package/src/fabric/index.ts

@@ -0,0 +1,172 @@
+import {
+  CloseCodes,
+  WS_SUBPROTOCOL,
+  isSystemEvent,
+} from "../protocol/constants";
+import { decode, encode } from "../protocol/codec";
+import { TransportError, TransportErrorCode } from "../errors";
+import {
+  SystemEventsBus,
+  SystemEventHandler,
+  type LFSystemEvents,
+} from "./systembus";
+import type { Envelope, SystemEvent } from "../protocol";
+
+export class LVFabric {
+  private ws: WebSocket | null = null;
+  private _url: string;
+  private systemBus: SystemEventsBus;
+
+  constructor(url: string) {
+    this._url = this.validateUrl(url);
+    this.systemBus = new SystemEventsBus();
+    let _ = new SystemEventHandler(this.systemBus);
+  }
+
+  async open(connectionTimoutMS = 10_0000): Promise<void> {
+    if (this.ws && this.ws.readyState < WebSocket.CLOSING) return;
+
+    const _ws = new WebSocket(this._url, [WS_SUBPROTOCOL]);
+    _ws.binaryType = "arraybuffer";
+
+    const openPromise = new Promise<void>((resolve, reject) => {
+      // On Connection Open
+      _ws.onopen = () => {
+        this.ws = _ws;
+
+        // Protocl Checks
+        resolve();
+      };
+
+      // On Frame Received
+      _ws.onmessage = (event) => {
+        this.handleIncoming(event.data);
+      };
+
+      // On Error
+      _ws.onerror = (event) => {
+        const err = new TransportError(
+          TransportErrorCode.UPGRADE_FAILED,
+          "Error while connecting to the LiveFrame Server.",
+        );
+        reject(err);
+      };
+
+      // On Close
+      _ws.onclose = (event) => {
+        this.ws = null;
+      };
+    });
+
+    const timeoutPromise = new Promise<void>((_, reject) =>
+      setTimeout(() => {
+        this.ws?.close();
+
+        reject(
+          new TransportError(
+            TransportErrorCode.CONNECT_TIMEOUT,
+            `LiveFrame Server did not open within ${connectionTimoutMS}ms`,
+          ),
+        );
+      }, connectionTimoutMS),
+    );
+
+    return Promise.race([openPromise, timeoutPromise]);
+  }
+
+  // ─────────────────────────────────────────
+  // Send
+  // ─────────────────────────────────────────
+
+  send<P>(env: Envelope<P>): void {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      throw new TransportError(
+        TransportErrorCode.SOCKET_CLOSED,
+        `Cannot send "${env.event}" — socket closed`,
+      );
+    }
+
+    const frame = encode(env);
+
+    this.ws.send(frame);
+  }
+
+  // ─────────────────────────────────────────
+  // Close
+  // ─────────────────────────────────────────
+
+  close(code: number = CloseCodes.NORMAL, reason = ""): void {
+    if (this.ws && this.ws.readyState < WebSocket.CLOSING) {
+      this.ws.close(code, reason);
+    }
+  }
+
+  // ─────────────────────────────────────────
+  // State
+  // ─────────────────────────────────────────
+
+  //   get isOpen(): boolean {
+  //     return this.ws?.readyState === WebSocket.OPEN ?? false;
+  //   }
+
+  get bufferedAmount(): number {
+    return this.ws?.bufferedAmount ?? 0;
+  }
+
+  // ─── Private ────────────────────────────────────────────────────────────────
+
+  // ─────────────────────────────────────────
+  // Incoming Frames
+  // ─────────────────────────────────────────
+
+  private handleIncoming(raw: string): void {
+    try {
+      const env = decode(raw);
+
+      if (isSystemEvent(env.event)) {
+        this.systemBus.emit(env.event as keyof LFSystemEvents, env as any);
+        return;
+      }
+
+      //this.events.emit("message", env);
+    } catch (err) {
+      console.log(err);
+      //this.log.warn("[transport] malformed frame dropped", { err });
+      //this.events.emit("error", err as Error);
+    }
+  }
+
+  private validateUrl(url: string): string {
+    let parsed: URL;
+    try {
+      parsed = new URL(url);
+    } catch {
+      throw new TransportError(
+        TransportErrorCode.UPGRADE_FAILED,
+        `Invalid WebSocket URL: "${url}"`,
+      );
+    }
+
+    if (parsed.protocol === "http:") {
+      // Rewrite http: → ws: so consumers can pass HTTP URLs conveniently.
+      parsed.protocol = "ws:";
+    } else if (parsed.protocol === "https:") {
+      parsed.protocol = "wss:";
+    }
+
+    const secure = parsed.protocol === "wss:";
+
+    // Block plaintext connections when the page itself is HTTPS.
+    const pageIsSecure =
+      typeof location !== "undefined" && location.protocol === "https:";
+
+    if (!secure && pageIsSecure) {
+      throw new TransportError(
+        TransportErrorCode.INSECURE_URL,
+        `Insecure ws:// connection blocked on an HTTPS origin. Use wss://.`,
+      );
+    }
+
+    return parsed.toString();
+  }
+}

package/src/fabric/systembus.ts

@@ -0,0 +1,93 @@
+import { createNanoEvents } from "nanoevents";
+import {
+  isSystemEvent,
+  SystemEvents,
+  type SystemEvent,
+} from "../protocol/constants";
+import {
+  decode,
+  type SysConnectedEnvelope,
+  type SysPingEnvelope,
+  type SysPongEnvelope,
+  type SysDisconnectEnvelope,
+  type SysRateLimitedEnvelope,
+  type AuthOkEnvelope,
+  type AuthRevokedEnvelope,
+  type AuthLoginPayload,
+  type AuthRefreshPayload,
+  type Envelope,
+  type AckOkEnvelope,
+  type AckErrorEnvelope,
+  type PresenceInfo,
+  type ErrorPayload,
+  type PresenceLeftPayload,
+  type PresenceUpdatePayload,
+  type PresenceListPayload,
+  type PresenceSnapshotPayload,
+} from "../protocol";
+
+interface LFSystemPayloadEnvelopes {
+  [SystemEvents.CONNECTED]: SysConnectedEnvelope;
+  [SystemEvents.PING]: SysPingEnvelope;
+  [SystemEvents.PONG]: SysPongEnvelope;
+  [SystemEvents.DISCONNECT]: SysDisconnectEnvelope;
+  [SystemEvents.RATE_LIMITED]: SysRateLimitedEnvelope;
+
+  [SystemEvents.AUTH_OK]: AuthOkEnvelope;
+  [SystemEvents.AUTH_REVOKED]: AuthRevokedEnvelope;
+  [SystemEvents.AUTH_LOGIN]: Envelope<AuthLoginPayload>;
+  [SystemEvents.AUTH_REFRESH]: Envelope<AuthRefreshPayload>;
+
+  [SystemEvents.ACK_OK]: AckOkEnvelope;
+  [SystemEvents.ACK_ERROR]: AckErrorEnvelope;
+
+  [SystemEvents.PRESENCE_JOINED]: Envelope<PresenceInfo>;
+  [SystemEvents.PRESENCE_LEFT]: Envelope<PresenceLeftPayload>;
+  [SystemEvents.PRESENCE_UPDATE]: Envelope<PresenceUpdatePayload>;
+  [SystemEvents.PRESENCE_LIST]: Envelope<PresenceListPayload>;
+  [SystemEvents.PRESENCE_SNAPSHOT]: Envelope<PresenceSnapshotPayload>;
+
+  [SystemEvents.ERROR_AUTH]: Envelope<ErrorPayload>;
+  [SystemEvents.ERROR_VALIDATION]: Envelope<ErrorPayload>;
+  [SystemEvents.ERROR_ROUTING]: Envelope<ErrorPayload>;
+  [SystemEvents.ERROR_RATE_LIMIT]: Envelope<ErrorPayload>;
+  [SystemEvents.ERROR_INTERNAL]: Envelope<ErrorPayload>;
+}
+
+export type LFSystemEvents = {
+  [K in keyof LFSystemPayloadEnvelopes]: (
+    data: LFSystemPayloadEnvelopes[K],
+  ) => void;
+};
+
+export class SystemEventsBus {
+  private emmiter = createNanoEvents<LFSystemEvents>();
+
+  on<K extends keyof LFSystemEvents>(
+    event: K,
+    listener: LFSystemEvents[K],
+  ): () => void {
+    return this.emmiter.on(event, listener);
+  }
+
+  emit<K extends keyof LFSystemEvents>(
+    event: K,
+    data: LFSystemPayloadEnvelopes[K],
+  ): void {
+    (this.emmiter as any).emit(event, data);
+  }
+}
+
+export class SystemEventHandler {
+  constructor(private bus: SystemEventsBus) {
+    this.registerListeners();
+  }
+
+  private registerListeners() {
+    this.bus.on(SystemEvents.CONNECTED, this.handleConnected);
+  }
+
+  private handleConnected(data: SysConnectedEnvelope) {
+    console.log("Connected", data);
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./client";