@kokimoki/app 1.17.0 → 2.0.0

package/dist/kokimoki-client.js

@@ -7,10 +7,162 @@ import { WsMessageType } from "./ws-message-type";
 import { WsMessageWriter } from "./ws-message-writer";
 import { WsMessageReader } from "./ws-message-reader";
 import { RoomSubscription } from "./room-subscription";
-// import { KokimokiQueue } from "./kokimoki-queue";
-import { KokimokiAwareness } from "./kokimoki-awareness";
-// import { KokimokiReqRes } from "./kokimoki-req-res";
 import { KokimokiLocalStore } from "./kokimoki-local-store";
+import { KokimokiAi } from "./kokimoki-ai";
+import { KokimokiLeaderboard } from "./kokimoki-leaderboard";
+/**
+ * Kokimoki Client - Real-time Collaborative Game Development SDK
+ *
+ * The main entry point for building multiplayer games and collaborative applications.
+ * Provides real-time state synchronization, AI integration, cloud storage, leaderboards,
+ * and more - all without complex backend setup.
+ *
+ * **Core Capabilities:**
+ * - **Real-time Stores**: Synchronized state with automatic conflict resolution (powered by Valtio + Y.js)
+ * - **Atomic Transactions**: Update multiple stores consistently with automatic batching
+ * - **AI Integration**: Built-in text generation, structured JSON output, and image modification
+ * - **Cloud Storage**: File uploads with CDN delivery and tag-based organization
+ * - **Leaderboards**: Efficient player ranking with database indexes and pagination
+ * - **Presence Tracking**: Real-time connection status for all players
+ * - **Time Sync**: Server-synchronized timestamps across all clients
+ * - **Webhooks**: Send data to external services for backend processing
+ *
+ * **Quick Start:**
+ * ```typescript
+ * import { KokimokiClient } from '@kokimoki/app';
+ *
+ * // Initialize the client
+ * const kmClient = new KokimokiClient(
+ *   'your-host.kokimoki.com',
+ *   'your-app-id',
+ *   'optional-access-code'
+ * );
+ *
+ * // Connect to the server
+ * await kmClient.connect();
+ *
+ * // Create a synchronized store
+ * interface GameState {
+ *   players: Record<string, { name: string; score: number }>;
+ *   round: number;
+ * }
+ *
+ * const gameStore = kmClient.store<GameState>('game', {
+ *   players: {},
+ *   round: 1
+ * });
+ *
+ * // Update state atomically
+ * await kmClient.transact([gameStore], ([game]) => {
+ *   game.players[kmClient.id] = { name: 'Player 1', score: 0 };
+ *   game.round = 2;
+ * });
+ *
+ * // Use in React components with Valtio
+ * import { useSnapshot } from 'valtio';
+ *
+ * function GameComponent() {
+ *   const game = useSnapshot(gameStore.proxy);
+ *   return <div>Round: {game.round}</div>;
+ * }
+ * ```
+ *
+ * **Key Features:**
+ *
+ * **1. Real-time State Management**
+ * - Create global stores shared across all players: `kmClient.store()`
+ * - Create local stores for client-side data: `kmClient.localStore()`
+ * - Automatic synchronization and conflict resolution
+ * - Use `useSnapshot()` from Valtio for reactive React components
+ *
+ * **2. Atomic Transactions**
+ * ```typescript
+ * // Update multiple stores atomically
+ * await kmClient.transact([playerStore, gameStore], ([player, game]) => {
+ *   player.score += 10;
+ *   game.lastUpdate = kmClient.serverTimestamp();
+ * });
+ * ```
+ *
+ * **3. AI Integration (No API keys required)**
+ * ```typescript
+ * // Generate text
+ * const story = await kmClient.ai.chat({
+ *   model: 'gpt-4o',
+ *   userPrompt: 'Write a quest description',
+ *   temperature: 0.8
+ * });
+ *
+ * // Generate structured data
+ * interface Quest { title: string; reward: number; }
+ * const quest = await kmClient.ai.generateJson<Quest>({
+ *   userPrompt: 'Create a level 5 quest'
+ * });
+ *
+ * // Modify images
+ * const modified = await kmClient.ai.modifyImage(url, 'Make it pixel art');
+ * ```
+ *
+ * **4. Cloud Storage**
+ * ```typescript
+ * // Upload files with tags
+ * const upload = await kmClient.storage.upload('avatar.jpg', blob, ['profile']);
+ *
+ * // Query uploads
+ * const images = await kmClient.storage.listUploads({
+ *   clientId: kmClient.id,
+ *   mimeTypes: ['image/jpeg', 'image/png']
+ * });
+ * ```
+ *
+ * **5. Leaderboards**
+ * ```typescript
+ * // Submit score (replaces previous entry)
+ * await kmClient.leaderboard.upsertEntry(
+ *   'high-scores',
+ *   'desc',
+ *   1500,
+ *   { playerName: 'Alice' },
+ *   {}
+ * );
+ *
+ * // Get top 10
+ * const top10 = await kmClient.leaderboard.listEntries('high-scores', 'desc', 0, 10);
+ * ```
+ *
+ * **6. Presence Tracking**
+ * ```typescript
+ * // Track online players
+ * const onlineClientIds = useSnapshot(gameStore.connections).clientIds;
+ * const isPlayerOnline = onlineClientIds.has(playerId);
+ * ```
+ *
+ * **Best Practices:**
+ * - Always use `kmClient.serverTimestamp()` for time-sensitive operations
+ * - Prefer Records over Arrays: `Record<string, T>` with timestamp keys
+ * - Use `kmClient.transact()` for all state updates to ensure atomicity
+ * - Tag uploads for easy filtering and organization
+ * - Use local stores for client-side settings and preferences
+ * - Leverage TypeScript generics for type-safe stores
+ *
+ * **Events:**
+ * - `connected`: Fired when client connects/reconnects to server
+ * - `disconnected`: Fired when connection is lost
+ *
+ * @template ClientContextT The type of client context data (custom user data from your backend)
+ *
+ * @example
+ * ```typescript
+ * // Listen for connection events
+ * kmClient.on('connected', () => {
+ *   console.log('Connected to Kokimoki!');
+ * });
+ *
+ * kmClient.on('disconnected', () => {
+ *   console.log('Connection lost, will auto-reconnect...');
+ * });
+ * ```
+ */
 export class KokimokiClient extends EventEmitter {
     host;
     appId;
@@ -37,6 +189,9 @@ export class KokimokiClient extends EventEmitter {
     _pingInterval;
     _clientTokenKey = "KM_TOKEN";
     _editorContext;
+    _ai;
+    _storage;
+    _leaderboard;
     constructor(host, appId, code = "") {
         super();
         this.host = host;
@@ -46,6 +201,9 @@ export class KokimokiClient extends EventEmitter {
         const secure = this.host.indexOf(":") === -1;
         this._wsUrl = `ws${secure ? "s" : ""}://${this.host}`;
         this._apiUrl = `http${secure ? "s" : ""}://${this.host}`;
+        // Initialize modules
+        this._ai = new KokimokiAi(this);
+        this._leaderboard = new KokimokiLeaderboard(this);
         // Set up ping interval
         const pingMsg = new WsMessageWriter();
         pingMsg.writeInt32(WsMessageType.Ping);
@@ -106,6 +264,9 @@ export class KokimokiClient extends EventEmitter {
         }
         return this._clientContext;
     }
+    /**
+     * Indicates whether the client is currently connected to the server.
+     */
     get connected() {
         return this._connected;
     }
@@ -115,9 +276,21 @@ export class KokimokiClient extends EventEmitter {
         }
         return this._ws;
     }
+    /**
+     * Indicates whether the client is running in editor/development mode.
+     */
     get isEditor() {
         return !!this._editorContext;
     }
+    /**
+     * Establishes a connection to the Kokimoki server.
+     *
+     * Handles authentication, WebSocket setup, and automatic reconnection.
+     * If already connecting, returns the existing connection promise.
+     *
+     * @returns A promise that resolves when the connection is established.
+     * @throws Error if the connection fails.
+     */
     async connect() {
         if (this._connectPromise) {
             return await this._connectPromise;
@@ -322,10 +495,21 @@ export class KokimokiClient extends EventEmitter {
             }
         }
     }
+    /**
+     * Gets the current server timestamp, accounting for client-server time offset.
+     *
+     * @returns The current server timestamp in milliseconds.
+     */
     serverTimestamp() {
         return Date.now() - this._serverTimeOffset;
     }
-    // Send Y update to room
+    /**
+     * Sends a Y.js update to a specific room.
+     *
+     * @param room - The name of the room to update.
+     * @param update - The Y.js update as a Uint8Array.
+     * @returns A promise that resolves with the server response.
+     */
     async patchRoomState(room, update) {
         const res = await fetch(`${this._apiUrl}/rooms/${room}`, {
             method: "PATCH",
@@ -334,81 +518,6 @@ export class KokimokiClient extends EventEmitter {
         });
         return await res.json();
     }
-    // Storage
-    async createUpload(name, blob, tags) {
-        const res = await fetch(`${this._apiUrl}/uploads`, {
-            method: "POST",
-            headers: this.apiHeaders,
-            body: JSON.stringify({
-                name,
-                size: blob.size,
-                mimeType: blob.type,
-                tags,
-            }),
-        });
-        return await res.json();
-    }
-    async uploadChunks(blob, chunkSize, signedUrls) {
-        return await Promise.all(signedUrls.map(async (url, index) => {
-            const start = index * chunkSize;
-            const end = Math.min(start + chunkSize, blob.size);
-            const chunk = blob.slice(start, end);
-            const res = await fetch(url, { method: "PUT", body: chunk });
-            return JSON.parse(res.headers.get("ETag") || '""');
-        }));
-    }
-    async completeUpload(id, etags) {
-        const res = await fetch(`${this._apiUrl}/uploads/${id}`, {
-            method: "PUT",
-            headers: this.apiHeaders,
-            body: JSON.stringify({ etags }),
-        });
-        return await res.json();
-    }
-    async upload(name, blob, tags = []) {
-        const { id, chunkSize, urls } = await this.createUpload(name, blob, tags);
-        const etags = await this.uploadChunks(blob, chunkSize, urls);
-        return await this.completeUpload(id, etags);
-    }
-    async updateUpload(id, update) {
-        const res = await fetch(`${this._apiUrl}/uploads/${id}`, {
-            method: "PUT",
-            headers: this.apiHeaders,
-            body: JSON.stringify(update),
-        });
-        return await res.json();
-    }
-    async listUploads(filter = {}, skip = 0, limit = 100) {
-        const url = new URL("/uploads", this._apiUrl);
-        url.searchParams.set("skip", skip.toString());
-        url.searchParams.set("limit", limit.toString());
-        if (filter.clientId) {
-            url.searchParams.set("clientId", filter.clientId);
-        }
-        if (filter.mimeTypes) {
-            url.searchParams.set("mimeTypes", filter.mimeTypes.join());
-        }
-        if (filter.tags) {
-            url.searchParams.set("tags", filter.tags.join());
-        }
-        const res = await fetch(url.href, {
-            headers: this.apiHeaders,
-        });
-        return await res.json();
-    }
-    async deleteUpload(id) {
-        const res = await fetch(`${this._apiUrl}/uploads/${id}`, {
-            method: "DELETE",
-            headers: this.apiHeaders,
-        });
-        return await res.json();
-    }
-    async exposeScriptingContext(context) {
-        // @ts-ignore
-        window.KM_SCRIPTING_CONTEXT = context;
-        // @ts-ignore
-        window.dispatchEvent(new CustomEvent("km:scriptingContextExposed"));
-    }
     async sendSubscribeReq(roomName, mode) {
         // Set up sync resolver
         const reqId = ++this._messageId;
@@ -443,6 +552,15 @@ export class KokimokiClient extends EventEmitter {
             this.ws.send(msg.getBuffer());
         });
     }
+    /**
+     * Joins a store by subscribing to its corresponding room.
+     *
+     * If already joined, this method does nothing. For local stores, initializes
+     * the store locally. For remote stores, sends a subscription request to the server.
+     *
+     * @param store - The KokimokiStore to join.
+     * @template T - The type of the store's state object.
+     */
     async join(store) {
         let subscription = this._subscriptionsByName.get(store.roomName);
         if (!subscription) {
@@ -464,6 +582,14 @@ export class KokimokiClient extends EventEmitter {
             await store.onJoin(this);
         }
     }
+    /**
+     * Leaves a store by unsubscribing from its corresponding room.
+     *
+     * Triggers the store's `onBeforeLeave` and `onLeave` lifecycle hooks.
+     *
+     * @param store - The KokimokiStore to leave.
+     * @template T - The type of the store's state object.
+     */
     async leave(store) {
         const subscription = this._subscriptionsByName.get(store.roomName);
         if (subscription) {
@@ -476,6 +602,27 @@ export class KokimokiClient extends EventEmitter {
             store.onLeave(this);
         }
     }
+    /**
+     * Executes a transaction across one or more stores.
+     *
+     * Provides proxies to the stores that track changes. All changes are batched
+     * and sent to the server atomically. The transaction ensures consistency across
+     * multiple stores.
+     *
+     * @param stores - Array of stores to include in the transaction.
+     * @param handler - Function that receives store proxies and performs modifications.
+     * @returns A promise that resolves with the return value of the handler.
+     * @template TStores - Tuple type of the stores array.
+     * @template ReturnT - The return type of the handler function.
+     *
+     * @example
+     * ```ts
+     * await client.transact([playerStore, gameStore], ([player, game]) => {
+     *   player.score += 10;
+     *   game.lastUpdate = Date.now();
+     * });
+     * ```
+     */
     async transact(stores, handler) {
         // if (!this._connected) {
         //   throw new Error("Client not connected");
@@ -550,6 +697,11 @@ export class KokimokiClient extends EventEmitter {
         }
         return returnValue;
     }
+    /**
+     * Closes the client connection and cleans up resources.
+     *
+     * Disables automatic reconnection, closes the WebSocket, and clears all intervals.
+     */
     async close() {
         this._autoReconnect = false;
         if (this._ws) {
@@ -559,7 +711,14 @@ export class KokimokiClient extends EventEmitter {
             clearInterval(this._pingInterval);
         }
     }
-    // Get room hash value for store
+    /**
+     * Gets the internal room hash identifier for a store.
+     *
+     * @param store - The store to get the room hash for.
+     * @returns The room hash as a number.
+     * @throws Error if the store hasn't been joined.
+     * @template T - The type of the store's state object.
+     */
     getRoomHash(store) {
         const subscription = this._subscriptionsByName.get(store.roomName);
         if (!subscription) {
@@ -567,8 +726,20 @@ export class KokimokiClient extends EventEmitter {
         }
         return subscription.roomHash;
     }
-    /** Initializers */
-    // store
+    /**
+     * Creates a new remote store synchronized with the server.
+     *
+     * @param name - The name of the room/store.
+     * @param defaultState - The initial state of the store.
+     * @param autoJoin - Whether to automatically join the store (default: true).
+     * @returns A new KokimokiStore instance.
+     * @template T - The type of the store's state object.
+     *
+     * @example
+     * ```ts
+     * const gameStore = client.store('game', { players: [], score: 0 });
+     * ```
+     */
     store(name, defaultState, autoJoin = true) {
         const store = new KokimokiStore(name, defaultState);
         if (autoJoin) {
@@ -578,7 +749,22 @@ export class KokimokiClient extends EventEmitter {
         }
         return store;
     }
-    // local store
+    /**
+     * Creates a new local store that persists only in the client's browser.
+     *
+     * Local stores are automatically joined and are not synchronized with the server.
+     * Data is stored locally per client and app.
+     *
+     * @param name - The name of the local store.
+     * @param defaultState - The initial state of the store.
+     * @returns A new KokimokiLocalStore instance.
+     * @template T - The type of the store's state object.
+     *
+     * @example
+     * ```ts
+     * const settingsStore = client.localStore('settings', { volume: 0.5, theme: 'dark' });
+     * ```
+     */
     localStore(name, defaultState) {
         const store = new KokimokiLocalStore(name, defaultState);
         this.join(store)
@@ -586,122 +772,18 @@ export class KokimokiClient extends EventEmitter {
             .catch(() => { });
         return store;
     }
-    // // queue
-    // queue<T extends S.Generic<unknown>>(
-    //   name: string,
-    //   schema: T,
-    //   mode: RoomSubscriptionMode,
-    //   autoJoin = true
-    // ) {
-    //   const queue = new KokimokiQueue<T>(name, schema, mode);
-    //   if (autoJoin) {
-    //     this.join(queue)
-    //       .then(() => {})
-    //       .catch(() => {});
-    //   }
-    //   return queue;
-    // }
-    // awareness
-    awareness(name, initialData, autoJoin = true) {
-        const awareness = new KokimokiAwareness(name, initialData);
-        if (autoJoin) {
-            this.join(awareness)
-                .then(() => { })
-                .catch(() => { });
-        }
-        return awareness;
-    }
-    // // req-res
-    // reqRes<Req extends S.Generic<unknown>, Res extends S.Generic<unknown>>(
-    //   serviceName: string,
-    //   reqSchema: Req,
-    //   resSchema: Res,
-    //   handleRequest: (
-    //     payload: Req["defaultValue"]
-    //   ) => Promise<Res["defaultValue"]>
-    // ) {
-    //   return new KokimokiReqRes(
-    //     this,
-    //     serviceName,
-    //     reqSchema,
-    //     resSchema,
-    //     handleRequest
-    //   );
-    // }
     /**
-     * Add a new entry to a leaderboard
-     * @param leaderboardName
-     * @param score
-     * @param metadata
-     * @returns
-     */
-    async insertLeaderboardEntry(leaderboardName, sortDir, score, metadata, privateMetadata) {
-        const res = await fetch(`${this._apiUrl}/leaderboard-entries`, {
-            method: "POST",
-            headers: this.apiHeaders,
-            body: JSON.stringify({
-                leaderboardName,
-                sortDir,
-                score,
-                metadata,
-                privateMetadata,
-                upsert: false,
-            }),
-        });
-        return await res.json();
-    }
-    /**
-     * Add or update latest entry to a leaderboard
-     * @param leaderboardName
-     * @param score
-     * @param metadata
-     * @param privateMetadata Can only be read using the leaderboard API
-     * @returns
-     */
-    async upsertLeaderboardEntry(leaderboardName, sortDir, score, metadata, privateMetadata) {
-        const res = await fetch(`${this._apiUrl}/leaderboard-entries`, {
-            method: "POST",
-            headers: this.apiHeaders,
-            body: JSON.stringify({
-                leaderboardName,
-                sortDir,
-                score,
-                metadata,
-                privateMetadata,
-                upsert: true,
-            }),
-        });
-        return await res.json();
-    }
-    /**
-     * List entries in a leaderboard
-     * @param leaderboardName
-     * @param skip
-     * @param limit
-     * @returns
-     */
-    async listLeaderboardEntries(leaderboardName, sortDir, skip = 0, limit = 100) {
-        const encodedLeaderboardName = encodeURIComponent(leaderboardName);
-        const res = await fetch(`${this._apiUrl}/leaderboard-entries?leaderboardName=${encodedLeaderboardName}&sortDir=${sortDir}&skip=${skip}&limit=${limit}`, {
-            headers: this.apiHeaders,
-        });
-        return await res.json();
-    }
-    /**
-     * Get best entry in leaderboard for a client, defaults to current client
-     * @param leaderboardName
-     * @param sortDir
-     * @param clientId
-     */
-    async getBestLeaderboardEntry(leaderboardName, sortDir, clientId) {
-        const encodedLeaderboardName = encodeURIComponent(leaderboardName);
-        const res = await fetch(`${this._apiUrl}/leaderboard-entries/best?leaderboardName=${encodedLeaderboardName}&sortDir=${sortDir}&clientId=${clientId || this.id}`, {
-            headers: this._apiHeaders,
-        });
-        return await res.json();
-    }
-    /**
-     * Send app data via webhook
+     * Sends app data to the server via webhook for external processing.
+     *
+     * @param event - The name of the webhook event.
+     * @param data - The data to send with the webhook.
+     * @returns A promise that resolves with the job ID.
+     * @template T - The type of the data being sent.
+     *
+     * @example
+     * ```ts
+     * await client.sendWebhook('game-ended', { winner: 'player1', score: 100 });
+     * ```
      */
     async sendWebhook(event, data) {
         const res = await fetch(`${this._apiUrl}/webhooks`, {
@@ -712,49 +794,30 @@ export class KokimokiClient extends EventEmitter {
         return await res.json();
     }
     /**
-     * Generic AI chat endpoint: send a system prompt (and optional user prompt) to get a response.
+     * Access AI capabilities including text generation, structured JSON output, and image modification.
      */
-    async chat(systemPrompt, userPrompt, temperature, maxTokens) {
-        const res = await fetch(`${this._apiUrl}/ai/chat`, {
-            method: "POST",
-            headers: this.apiHeaders,
-            body: JSON.stringify({
-                systemPrompt,
-                userPrompt,
-                temperature,
-                maxTokens,
-            }),
-        });
-        if (!res.ok) {
-            throw await res.json();
+    get ai() {
+        if (!this._ai) {
+            throw new Error("AI client not initialized");
         }
-        return await res.json();
+        return this._ai;
     }
     /**
-     * Use AI to apply prompt to an image
+     * Access file upload and management for media files, images, and user-generated content.
      */
-    async transformImage(baseImageUrl, prompt, tags = []) {
-        const res = await fetch(`${this._apiUrl}/ai/images`, {
-            method: "POST",
-            headers: this.apiHeaders,
-            body: JSON.stringify({ baseImageUrl, prompt, tags }),
-        });
-        if (!res.ok) {
-            throw await res.json();
+    get storage() {
+        if (!this._storage) {
+            throw new Error("Storage client not initialized");
         }
-        return await res.json();
+        return this._storage;
     }
     /**
-     * Load app config - optionally translated to any language
+     * Access player ranking and score tracking with efficient queries and pagination.
      */
-    async getConfig(language = "") {
-        const res = await fetch(`${this._apiUrl}/app/config?language=${encodeURIComponent(language)}`, {
-            headers: this.apiHeaders,
-        });
-        if (!res.ok) {
-            throw await res.json();
+    get leaderboard() {
+        if (!this._leaderboard) {
+            throw new Error("Leaderboard client not initialized");
         }
-        const { status, config } = await res.json();
-        return { status, config };
+        return this._leaderboard;
     }
 }