open-index/open-npm huggingface dataset:
npm package: @kokimoki/app
Description: Kokimoki app
Author: Loquiz OÜ
Latest version: 3.1.6

# @kokimoki/app

The core SDK for building real-time multiplayer games with Kokimoki.

## Installation

```bash
npm install @kokimoki/app
```

## Quick Start

```typescript
import { getKmClient } from "@kokimoki/app";

const kmClient = getKmClient();

// Create a synchronized store
const gameStore = kmClient.store("game", {
  players: {},
  status: "waiting",
});

// Update state with transactions
await kmClient.transact([gameStore], ([state]) => {
  state.players[kmClient.id] = { name: "Player 1", score: 0 };
});
```

## Features

- **Real-time State Sync** - Synchronized stores across all connected clients
- **Dynamic Stores** - Room-based state isolation for teams, chat, breakout rooms
- **AI Services** - Text and image generation
- **Storage** - File uploads to CDN
- **i18n** - Internationalization with AI-powered translation
- **Leaderboards** - Player rankings and scores

## Documentation

See the [docs](./docs/) folder for detailed instructions:

| File                                                                                      | Description                                   |
| ----------------------------------------------------------------------------------------- | --------------------------------------------- |
| [kokimoki-sdk.instructions.md](./docs/kokimoki-sdk.instructions.md)                       | Core SDK usage (client, stores, transactions) |
| [kokimoki-dynamic-stores.instructions.md](./docs/kokimoki-dynamic-stores.instructions.md) | Room-based state isolation                    |
| [kokimoki-ai.instructions.md](./docs/kokimoki-ai.instructions.md)                         | AI text and image generation                  |
| [kokimoki-storage.instructions.md](./docs/kokimoki-storage.instructions.md)               | File storage and CDN uploads                  |
| [kokimoki-i18n.instructions.md](./docs/kokimoki-i18n.instructions.md)                     | Internationalization                          |
| [kokimoki-leaderboard.instructions.md](./docs/kokimoki-leaderboard.instructions.md)       | Player rankings                               |

## Usage with React

```tsx
import { getKmClient, useSnapshot } from "@kokimoki/app";

const kmClient = getKmClient();
const gameStore = kmClient.store("game", { count: 0 });

function Counter() {
  const { count } = useSnapshot(gameStore.proxy);

  const increment = () => {
    kmClient.transact([gameStore], ([state]) => {
      state.count++;
    });
  };

  return <button onClick={increment}>Count: {count}</button>;
}
```
npm package: @kokimoki/kit
Description: Vite plugin and development tools for building Kokimoki apps.
Author: Loquiz OÜ
Latest version: 1.8.2

# @kokimoki/kit

Vite plugin and development tools for building Kokimoki apps.

## Installation

```bash
npm install @kokimoki/kit
```

## Quick Start

Add the plugin to your `vite.config.ts`:

```typescript
import { defineConfig } from "vite";
import { kokimokiKitPlugin } from "@kokimoki/kit";
import { z } from "@kokimoki/app";

export default defineConfig({
  plugins: [
    kokimokiKitPlugin({
      conceptId: "your-concept-id",
      deployCodes: [
        {
          name: "default",
          description: "Default configuration",
          clientContext: {},
        },
      ],
      schema: z.object({
        title: z.string(),
        maxPlayers: z.number(),
      }),
      stores: [
        { pattern: "game", schema: z.object({ status: z.string() }) },
        {
          pattern: "player-*",
          schema: z.object({ name: z.string() }),
          local: true,
        },
      ],
      i18nPath: "./src/i18n",
      i18nPrimaryLng: "en",
      devView: [
        [{ label: "host", clientContext: { mode: "host" } }],
        [
          { label: "player1", clientContext: { mode: "player" } },
          { label: "player2", clientContext: { mode: "player" } },
        ],
      ],
    }),
  ],
});
```

## Features

- **Vite Plugin** - Integrates Kokimoki into your Vite build
- **Dev Frame** - Multi-window development view for testing different player modes
- **Schema Validation** - Zod-based validation for stores and project config
- **i18n Sync** - Automatic synchronization of translations during development
- **Style Preprocessing** - Theme color processing for CSS variables

## Documentation

See the [docs](./docs/) folder for detailed instructions:

| File                                                                | Description                    |
| ------------------------------------------------------------------- | ------------------------------ |
| [kokimoki-kit.instructions.md](./docs/kokimoki-kit.instructions.md) | Plugin configuration and usage |

## Related Packages

- **@kokimoki/app** - Core SDK for runtime (stores, transactions, AI, etc.)
- **@kokimoki/cli** - CLI for project creation and deployment
npm package: @kokimoki/react-components
Description: A React components library that provides reusable UI components and hooks for Kokimoki applications.
Author: Loquiz OÜ
Latest version: 1.1.0

# React Components Library

> React components library for Kokimoki apps.

## Installation

```bash
npm install @kokimoki/react-components
```

## Setup

This library uses Tailwind CSS v4. To use the components, add the following to your CSS:

```css
@import '@kokimoki/react-components/styles.css';
@source '../node_modules/@kokimoki/react-components';
```

- `@import` includes the required animation utilities
- `@source` tells Tailwind to scan the package for utility classes used in components

## Dependencies

Built with modern libraries:

- `React 19+` with `TypeScript`
- `Tailwind CSS v4` for styling
- `Radix UI` for accessible primitives
- `Howler.js` for audio player management
npm package: @kokimoki/shared
Description: A React components library that provides reusable UI components and hooks for Kokimoki applications.
Author: Loquiz OÜ
Latest version: 1.10.0

# Shared Components Library

> React components library for kokimoki apps.

## Installation

```bash
npm install @kokimoki/shared
```

## Quick Start

Import the CSS styles in app root:

```tsx
import '@kokimoki/shared/styles.css';
```

## Dependencies

Built with modern libraries:

- `React 19+` with `TypeScript`
- `Tailwind CSS` for styling
- `Motion` for animations
- `Radix UI` for accessible primitives
- `Howler.js` for audio management