open-index/open-npm huggingface dataset:
npm package: @paidaxinghaha/my-ui-react
Description: 一个现代化的 React 组件库
Author: Your Name
Latest version: 1.0.1

# MyUI 组件库

🎨 一个现代化的 React 组件库，基于 TypeScript 构建，支持主题切换和响应式设计。

## ✨ 特性

- 🎯 **TypeScript 支持** - 完整的类型定义
- 🎨 **现代化设计** - 基于设计系统的组件
- 🌙 **主题切换** - 支持浅色/深色主题
- 📱 **响应式设计** - 移动端友好
- 🎭 **动画效果** - 基于 Framer Motion
- 🔧 **高度可定制** - CSS 变量支持
- 📦 **Tree Shaking** - 按需加载
- 🔍 **类型检查** - 完整的 TypeScript 类型检查

## 📦 安装

```bash
npm install @paidaxinghaha/my-ui-react
# 或
yarn add @paidaxinghaha/my-ui-react
# 或
pnpm add @paidaxinghaha/my-ui-react
```

## 🚀 快速开始

```tsx
import React from 'react'
import { ThemeProvider, Button, Input, Card } from '@paidaxinghaha/my-ui-react'
import '@paidaxinghaha/my-ui-react/dist/style.css'

function App() {
  return (
    <ThemeProvider>
      <div>
        <Card header={<h2>欢迎使用 MyUI</h2>}>
          <Input placeholder="输入一些内容..." />
          <Button variant="primary">点击我</Button>
        </Card>
      </div>
    </ThemeProvider>
  )
}

export default App
```

## 🎨 组件

### Button 按钮

```tsx
import { Button } from '@paidaxinghaha/my-ui-react'

// 基础用法
<Button variant="primary">主要按钮</Button>
<Button variant="secondary">次要按钮</Button>
<Button variant="outline">轮廓按钮</Button>

// 不同尺寸
<Button size="sm">小按钮</Button>
<Button size="md">中按钮</Button>
<Button size="lg">大按钮</Button>

// 带图标
<Button leftIcon={<Icon />}>左图标</Button>
<Button rightIcon={<Icon />}>右图标</Button>

// 加载状态
<Button loading>加载中...</Button>
```

### Input 输入框

```tsx
import { Input } from '@paidaxinghaha/my-ui-react'

// 基础用法
<Input placeholder="请输入内容" />

// 带标签
<Input label="用户名" placeholder="请输入用户名" />

// 带图标
<Input leftIcon={<SearchIcon />} placeholder="搜索..." />

// 错误状态
<Input error helperText="输入格式不正确" />
```

### Card 卡片

```tsx
import { Card } from '@paidaxinghaha/my-ui-react'

// 基础用法
<Card>
  <p>卡片内容</p>
</Card>

// 带头部和底部
<Card
  header={<h3>卡片标题</h3>}
  footer={<Button>操作</Button>}
>
  <p>卡片内容</p>
</Card>

// 不同变体
<Card variant="outlined">轮廓卡片</Card>
<Card variant="elevated">阴影卡片</Card>
```

## 🎭 主题

MyUI 支持浅色和深色主题，可以通过 `ThemeProvider` 和 `useTheme` Hook 来管理主题。

```tsx
import { ThemeProvider, useTheme, Button } from '@paidaxinghaha/my-ui-react'

function ThemeToggle() {
  const { theme, toggleTheme } = useTheme()
  
  return (
    <Button onClick={toggleTheme}>
      切换到{theme === 'light' ? '深色' : '浅色'}主题
    </Button>
  )
}

function App() {
  return (
    <ThemeProvider>
      <ThemeToggle />
    </ThemeProvider>
  )
}
```

## 🎨 自定义样式

MyUI 使用 CSS 变量来支持主题定制，你可以覆盖这些变量来自定义样式：

```css
:root {
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --border-radius: 8px;
  --font-family-sans: 'Your Font', sans-serif;
}
```

## 📚 开发

```bash
# 安装依赖
npm install

# 启动开发服务器（默认端口 5173）
npm run dev

# 启动开发服务器（指定端口 3050）
npm run dev:3050

# 构建应用
npm run build

# 构建组件库（库模式）
npm run build:lib

# 构建前检查类型
npm run build:check

# 预览构建结果
npm run preview

# 代码检查
npm run lint

# TypeScript 类型检查
npm run type-check
```

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📞 联系

如有问题，请通过 GitHub Issues 联系我们。
npm package: @paigewilliams/react-responsive-navbar
Description: A simple, flexible & completely customisable responsive navigation bar react component. This is a fork from Stephanie Inez
Author: Paige Williams
Latest version: 1.0.13

# react-responsive-navbar

This is a React hooks version of [react-responsive-navbar.](https://github.com/paigewilliams/react-responsive-navbar)

Nothing crazy, nothing flashy, just a simple, flexible & completely customisable
responsive navigation bar component. Check out
[this demo](https://stephanieinez.github.io/react-responsive-navbar/).

[![NPM](https://img.shields.io/npm/v/react-responsive-navbar.svg)](https://www.npmjs.com/package/@paigewilliams/react-responsive-navbar)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save npm i @paigewilliams/react-responsive-navbar
```

## Usage

```jsx
import React, { Component } from 'react';

import ResponsiveMenu from 'react-responsive-navbar';

class Example extends Component {
  render() {
    return (
      <ResponsiveMenu
        menuOpenButton={<div />}
        menuCloseButton={<div />}
        changeMenuOn="500px"
        largeMenuClassName="large-menu-classname"
        smallMenuClassName="small-menu-classname"
        menu={
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
          </ul>
        }
      />
    );
  }
}
```

## Props

* **menuOpenButton** & **menuCloseButton**: the icons for small screens. I use
  `react-icons` in the
  [example](https://stephanieinez.github.io/react-responsive-navbar/) however
  you are free to use any `div` that you please.
* **changeMenuOn**: specify the page width as a string in `px` that you would
  like to switch between the small and large menu.
* **menu**: takes in any `div` to create your menu content.
* You can also specify individual stylings for each of the large or small menus
  by adding a `className` to **largeMenuClassName** or **smallMenuClassName**

| name               | type            | required |
| ------------------ | --------------- | -------- |
| menuOpenButton     | react component | yes       |
| menuCloseButton    | react component | yes       |
| changeMenuOn       | string          | yes      |
| menu               | react component | yes      |
| largeMenuClassName | string          | no       |
| smallMenuClassName | string          | no       |

## License

MIT © [Paige Williams](https://github.com/paigewilliams)
npm package: @pailhead/use-init-ref
Description: useRef for react but it doesnt create/initialize the contents with ever render
Author: Dusan Bosnjak
Latest version: 0.1.4

# use-init-ref

[![npm version](https://img.shields.io/npm/v/@pailhead/use-init-ref.svg)](https://www.npmjs.com/package/@pailhead/use-init-ref)

## Demo

[Codesandbox](https://codesandbox.io/p/sandbox/useref-yydrkz?file=%2Fsrc%2FApp.tsx)

![](https://github.com/pailhead/use-init-ref/blob/master/useRef.gif)

## Usage

Be explicit that `useInitRef` takes an initializer, use normal `useRef` for primitives.

```
import {useInitRef} from '@pailhead/use-init-ref'
const myRef = useInitRef(()=>new Matrix4())
```

Or, if you want to just swap out `useRef` altogether, you can overload it like so:

```
import {useRef} from '@pailhead/use-init-ref'
const myRef = useRef(null,()=>new Matrix4())
```

`myRef` gets inferred as `MutableRefObject<Matrix4>`

## Issues

The most concise and easiest way to get what you want is to express it like so:

```
const myRef = useRef(new Matrix4())
```

But this will create a new instance of `Matrix4()` every time the component renders. It's not a memory leak, as these will eventually be garbage collected. The docs say to do this:

```
const myRef = useRef<?>(null)
if(myRef.current===null){
  myRef.current = new Matrix4()
}
```

But for TS users, what do you declare as a type?

- Just passing `null` will infer it as `MutableRefObject<null>`
- Typing it as `Matrix4()` requires you to cast `null` as something
- Typing it as `Matrix4|null` changes the whole program

In general, TS or not, if you want to later nullify this reference, ie do:

```
myRef.current = null
```

It seems impossible, since the render loop would just instantiate it again.

Some suggested:

```
const [myMatrix] = useState(()=>new Matrix4())
```

But you don't get a `MutableRefObject` at all, there is no `current` to be changed.
npm package: @pailye/graphlib
Description: A graph lib based on graphlib and write in typescript
Author: ryannz
Latest version: 0.1.10

# graph-tools

Based on [graphlib](https://github.com/dagrejs/graphlib), written in TypeScript.

[![npm version](https://badge.fury.io/js/graph-tools.svg)](https://badge.fury.io/js/graph-tools)
[![Build Status](https://travis-ci.org/zhanba/graph-lib.svg?branch=master)](https://travis-ci.org/zhanba/graph-lib)
[![Coverage Status](https://coveralls.io/repos/github/zhanba/graph-lib/badge.svg?branch=master)](https://coveralls.io/github/zhanba/graph-lib?branch=master)
## Usage

```bash
npm install graph-tools
```

```js
const { Graph, json, alg } = require('graph-tools')

const g = new Graph()

g.setNode('a')
```


## TODO

- add benchmark
- add doc
npm package: @paima/aiken-mdx
Description: Aiken documentation generator
Author: Paima Studios
Latest version: 1.0.3

# aiken-mdx

A tool to generate mdx documentation for `plutus.json` files generated from Aiken

You can see what the output looks like visually [here](https://docs.paimastudios.com/home/libraries/cardano-contracts/contrats)

## How to use

`aiken-md` comes with two parts to it:

1. Command-line options for generating documentation from Aiken projects
1. A set of UI components meant to help render the resulting generated docs in [docusaurus](https://github.com/facebook/docusaurus)

### Command-line tools

There are 2 options for using `aiken-md`

#### Single-file mode

Single-file mode outputs MDX documentation for a single project. This is useful if you prefer organizing your docs with 1 page per Aiken project

`npx aiken-mdx --single <path-to-plutus.json> --output <output-path.mdx>`

### Multi-file mode

Single-file mode outputs MDX documentation for multiple projects at once. This is useful if you prefer organizing your docs with 1 page for all your Aiken project

`npx aiken-mdx --single <path-to-template.hbs> --output <output-path.mdx>`

To specify which projects to import and where to place them on the page, you need to specify a template [handlebar](https://handlebarsjs.com/) file

```hbs
# My contract library Data structures:
<ul>
  <li>[Some data structure](#aiken-project-title): My cool data structure.</li>
</ul>

Helper contracts:
<ul>
  <li>[Some helper contract](#aiken-project-title): My cool helper contract.</li>
</ul>

## Core contracts

{{{import '../data-structure-project'}}}

## Helper contracts

{{{import '../helper-contract-project'}}}
```

### Docusaurus utils

Docusaurus integration is simple!

1. `npm install @paima/aiken-mdx` in your docusaurus project
2. copy-paste the resulting mdx file inside your docs

## Read more

- [CIP57](https://github.com/cardano-foundation/CIPs/blob/master/CIP-0057) which defines the `plutus.json` format
npm package: @paima/cardano-projected-nft-browser
Description: The Projected NFT Whirlpool is a new protocol for the Paima Whirlpool vision to allow users from other ecosystems to naturally be able to use existing NFTs in games from other ecosystems while still maintaining custody.
Author: paima
Latest version: 0.1.0

# Projected NFT Whirlpool

The Projected NFT Whirlpool is a new protocol for the Paima Whirlpool vision to allow users from other ecosystems to naturally be able to use existing NFTs in games from other ecosystems while still maintaining custody.

You can find the full docs on this [here](https://docs.paimastudios.com/home/multichain-support/projected-nfts/cross-chain/basics)
npm package: @paima/cardano-projected-nft-nodejs
Description: The Projected NFT Whirlpool is a new protocol for the Paima Whirlpool vision to allow users from other ecosystems to naturally be able to use existing NFTs in games from other ecosystems while still maintaining custody.
Author: paima
Latest version: 0.1.0

# Projected NFT Whirlpool

The Projected NFT Whirlpool is a new protocol for the Paima Whirlpool vision to allow users from other ecosystems to naturally be able to use existing NFTs in games from other ecosystems while still maintaining custody.

You can find the full docs on this [here](https://docs.paimastudios.com/home/multichain-support/projected-nfts/cross-chain/basics)
npm package: @paima/evm-contracts
Description: EVM contracts for the Paima ecosystem
Author: Paima Studios
Latest version: 3.1.0

# Paima EVM contracts

NPM package for EVM contracts for Paima Engine and related utilities.

See [the Paima documentation](https://docs.paimastudios.com/home/libraries/evm-contracts/introduction) for full documentation.
npm package: @paimon-labs/ara-embed-first
Description: Lightweight JS SDK to embed ARA AI Agent chat via streaming API.
Latest version: 0.1.9

# ara-embed-test-001

ARA AI Agent를 웹/앱에 손쉽게 임베드하기 위한 경량 JS SDK입니다. ARA API의 스트리밍 출력(begin/item/end)을 그대로 지원합니다.

## 설치

npm

```bash
npm install ara-embed-test-001
```

pnpm

```bash
pnpm add ara-embed-test-001
```

## 빠른 시작 (모듈)

```ts
import { AraClient } from 'ara-embed-test-001';

const client = new AraClient({
  baseUrl: 'https://<YOUR_ARA_API_ENDPOINT>',
  bearerToken: '<OPTIONAL_BEARER_TOKEN>'
});

await client.start(
  {
    body: {
      chatId: 'your-chat-id',
      question: 'Hello ARA!',
      locale: navigator.language || 'en-US',
      requestType: 'com.nexus.crosswallet.desktop',
      walletAddress: '0x...',
    },
  },
  {
    onBegin: (meta) => console.log('begin', meta),
    onItem: (t) => console.log('token', t),
    onEnd: (meta) => console.log('end', meta),
    onError: (e) => console.error(e),
  }
);
```

## 스크립트 태그 사용(IIFE)

빌드 산출물에는 전역 `window.AraEmbed`가 노출됩니다.

```html
<script src="https://unpkg.com/ara-embed-test-001/dist/index.global.js"></script>
<script>
  const { AraClient, createAraWidget } = window.AraEmbed;
  const client = new AraClient({ baseUrl: 'https://<YOUR_ARA_API_ENDPOINT>', bearerToken: '<TOKEN>' });
  createAraWidget({ client, chatId: 'your-chat-id', locale: 'ko-KR' });
  // 옵션: container 선택자, requestType, walletAddress 등 전달 가능
  // createAraWidget({ container: '#chat', client, chatId, requestType: 'com.nexus...', walletAddress: '0x...' })
  
</script>
```

## Flowise 스타일(ESM) 임베드

```html
<script type="module">
  import Chatbot from 'https://cdn.jsdelivr.net/npm/ara-embed-test-001/dist/web.js';
  Chatbot.init({
    baseUrl: 'https://<YOUR_ARA_API_ENDPOINT>',
    // bearerToken: '<TOKEN>',
  });
  // Chatbot.initFull({ baseUrl: 'https://<YOUR_ARA_API_ENDPOINT>' });
  // 또는 로컬: import Chatbot from '../dist/web.js'
</script>
```

### 웹 컴포넌트 `<ara-fullchat>`

```html
<script src="https://unpkg.com/ara-embed-test-001/dist/index.global.js"></script>
<ara-fullchat base-url="https://<YOUR_ARA_API_ENDPOINT>" bearer-token="<TOKEN>"></ara-fullchat>
```

## API

- `AraClient`
  - `constructor({ baseUrl, bearerToken, defaultHeaders })`
  - `start(params, handlers)`
    - `params.body`는 ARA 사양(`chatId`, `question`, `locale`, `requestType`, `walletAddress`, 등)을 따릅니다.
  - `cancel()` 스트림 중단

- `createAraWidget({ container?, client, chatId, locale?, placeholder?, requestType?, walletAddress? })`
  - 최소한의 기본 채팅 위젯을 DOM에 생성합니다.

## 빌드

```bash
pnpm build
```

- ESM, CJS, IIFE 번들이 생성됩니다.
- 타입 선언(`.d.ts`)이 포함됩니다.

## 라이선스

MIT
npm package: @pain-org/eslint-config
Description: @pain global eslint config
Author: Rajesh
Latest version: 1.0.10

# @pain-org/eslint-config

@pain-org global eslint config

## Installation

```
npm install --save-dev @pain-org/eslint-config eslint prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-scope eslint-config-prettier typescript
```

### .eslintrc.js

```
module.exports = {
    extends: "@pain-org/eslint-config"
};

```
npm package: @pain-org/template
Description: `eslint --print-config .\.eslintrc.js`
Author: Rajesh
Latest version: 1.1.2

#### Check ESLINT Configuration

`eslint --print-config .\.eslintrc.js`

#### ESLINT Fix

`eslint --fix .`

#### Check TS Config

`tsc --showConfig`

### Fix With Prettier

`yarn prettier --write .`

---

`npm install @pain-org/template -g`

### Plugin Commands

```
Usage: pain-template [options] [command]

Options:
  -V, --version        output the version number
  -h, --help           display help for command

Commands:
  workspace [options]
  node [options]
  help [command]       display help for command
```

### Workspace Options

```
Usage: pain-template workspace [options]

Options:
  -n --name <value>                       Specify Package/Folder Name
  -s --scope <value>                      Specify Scope Name. eg: @google
  -c --cli <true|false>                   Add Command Options cli (commander) (default: false)
  -cc --conventional-commit <true|false>  With: Husky, Conventional-Commit, Lint-Staged (default: true)
  -p --packages <items>                   Specify Packages With <,> Separators
  -h, --help                              display help for command
```

### Lerna Workspace Eg:

`pain-template workspace -n FOLDER_NAME -p "one,two,three" -s "@scope_name" -c true`

### Node Options

```
Usage: pain-template node [options]

Options:
  -n --name <value>                       Specify Package/Folder Name
  -s --scope <value>                      Specify Scope Name. eg: @google
  -c --cli <true|false>                   Add Command Options cli (commander) (default: false)
  -cc --conventional-commit <true|false>  With: Husky, Conventional-Commit, Lint-Staged (default: true)
  -h, --help                              display help for command
```

### Lerna Workspace Eg With Scope:

`pain-template node -n APP_NAME -s "@scope_name" -c true`

### Lerna Workspace Eg WithOut Scope:

`pain-template node -n APP_NAME -c true`
npm package: @painda/admin
Description: Lightweight admin dashboard for PaindaProtocol — monitoring, metrics, connected clients
Author: Painda
Latest version: 0.1.8

# 🐼 @painda/admin

**Real-time monitoring and management dashboard for PaindaProtocol.**

`@painda/admin` provides a powerful interface for overseeing your real-time infrastructure. Monitor server health, track connected clients, manage rooms, and visualize performance metrics through a sleek, low-latency dashboard.

### ⚡ Highlights

- **Live Server Stats**: Monitor CPU, memory, and connection counts in real-time.
- **Client Management**: Inspect and manage individual socket connections.
- **Room Oversight**: View active rooms and their current synchronization states.
- **Real-Time Logs**: Stream server logs directly to the admin interface for easy debugging.

## Installation

```bash
npm install @painda/admin @painda/core
```

## Quick Start

```typescript
import { PPServer } from '@painda/core';
import { PPAdmin } from '@painda/admin';

const server = new PPServer({ port: 3000 });
const admin = new PPAdmin(server, {
  auth: { username: "admin", password: "secure-password" },
  port: 7000, // Dashboard on separate port
});
```

## License

**MIT License** — free for private projects, open-source, and community use.
npm package: @painda/chat
Description: Room and direct messaging module for PaindaProtocol
Author: Painda
Latest version: 0.1.8

# 🐼 @painda/chat

**High-level room and direct messaging management for PaindaProtocol.**

`@painda/chat` simplifies the creation of real-time communication features like global rooms, selective broadcasting, and direct messaging between clients. It is optimized for both simple chat apps and complex multiplayer lobbies.

### ⚡ Highlights

- **Room Management**: Easy join/leave logic with automatic cleanup on disconnect.
- **Selective Broadcasting**: Send messages to entire rooms with an optional sender exclusion.
- **Direct Messaging**: One-to-one communication between clients by ID.
- **Scalability Ready**: Designed to work seamlessly with Painda's Redis Adapters for horizontal scaling.

## Installation

```bash
npm install @painda/chat @painda/core
```

## Quick Start

```typescript
import { PPServer } from '@painda/core';
import { RoomManager, directMessage } from '@painda/chat';

const server = new PPServer({ port: 3000 });
const rooms = new RoomManager(server);

server.on('connection', (client) => {
  // Join a room
  rooms.join(client, 'general');

  client.on('message', (msg) => {
    if (msg.type === 'chat') {
      // Broadcast to room
      rooms.broadcast('general', {
        type: 'chat',
        payload: msg.payload,
      }, client); // exclude sender
    }

    if (msg.type === 'dm') {
      // Direct message to another client
      directMessage(server, msg.payload.to, {
        type: 'dm',
        payload: msg.payload.text,
      });
    }
  });
});
```

## API

### `RoomManager`
- `join(client, room)` — add client to room
- `leave(client, room)` — remove client from room
- `broadcast(room, message, exclude?)` — send to all in room

### `directMessage(server, targetId, message)`
Send a message directly to a specific client by ID.

## License

**MIT License** — free for private projects, open-source, and community use.

- **Enterprise (Paid):** Commercial projects above a certain company size or revenue threshold require a commercial license. Inquiries via [pp.painda.tools/enterprise](https://pp.painda.tools/enterprise).
- **Pro Plugins:** Premium modules (Dashboard, Redis Adapter, Enterprise Support) available at [pp.painda.tools/plugins](https://pp.painda.tools/plugins).
npm package: @painda/persistence
Description: PaindaProtocol persistence and database bridging middleware
Author: Painda
Latest version: 0.1.8

# 🐼 @painda/persistence

**High-performance database bridging middleware for PaindaProtocol.**

`@painda/persistence` ensures your real-time data is safely stored without sacrificing performance. It uses intelligent batching and background flushing to persist messages, providing a seamless bridge between volatile WebSocket streams and your permanent data storage.

### ⚡ Highlights

- **Batch Persistence**: Buffers messages and flushes them in bulk to reduce DB pressure.
- **Pluggable Adapters**: Easily connect to any database (SQL, NoSQL, etc.) via a simple interface.
- **Real-Time Metrics**: Monitor persistence health, throughput, and error rates in real-time.
- **Silent Recovery**: Built-in error handling to ensure server stability even during DB downtime.

## Installation

```bash
npm install @painda/persistence @painda/core
```

## Quick Start

```typescript
import { PPServer } from '@painda/core';
import { PPPersistenceMiddleware } from '@painda/persistence';

const server = new PPServer({ port: 3000 });

const persistence = new PPPersistenceMiddleware(server, {
  adapter: {
    async saveMessage(type, payload, context) {
      await db.messages.insert({ type, payload, ...context });
    },
    async loadState(roomId) {
      return db.rooms.findOne({ id: roomId });
    },
  },
  syncTypes: ['chat-message', 'game-state'],
  batchSize: 10,       // buffer 10 messages before flush
  silentErrors: true,   // don't throw on DB errors
});

// Check metrics
setInterval(() => {
  console.log(persistence.getMetrics());
  // { messagesReceived: 150, messagesPersisted: 148, persistenceErrors: 2 }
}, 10000);
```

## Options

| Option | Default | Description |
|--------|---------|-------------|
| `adapter` | required | `{ saveMessage, loadState }` |
| `syncTypes` | `['chat-message', 'game-state']` | Message types to persist |
| `batchSize` | `1` | Batch writes (1 = immediate) |
| `silentErrors` | `true` | Swallow DB errors |

## License

**MIT License** — free for private projects, open-source, and community use.

- **Enterprise (Paid):** Commercial projects above a certain company size or revenue threshold require a commercial license. Inquiries via [pp.painda.tools/enterprise](https://pp.painda.tools/enterprise).
- **Pro Plugins:** Premium modules (Dashboard, Redis Adapter, Enterprise Support) available at [pp.painda.tools/plugins](https://pp.painda.tools/plugins).
npm package: @painda/redis
Description: Redis adapter for PaindaProtocol — binary-format pub/sub for horizontal scaling
Author: Painda
Latest version: 0.1.8

# 🐼 @painda/redis

**Scalable Redis Adapter for PaindaProtocol.**

`@painda/redis` enables horizontal scaling for your PaindaProtocol infrastructure. By using Redis as a shared backplane, multiple server instances can communicate, broadcast to the same rooms, and track global presence across a distributed cluster.

### ⚡ Highlights

- **Horizontal Scaling**: Broadcast messages to clients across any number of server nodes.
- **Shared Rooms**: Synchronize typed room states and deltas across the entire cluster.
- **Global Presence**: Track who's online regardless of which server instance they are connected to.
- **High Performance**: Optimized Pub/Sub implementation with minimal latency overhead.

## Installation

```bash
npm install @painda/redis @painda/core
```

## Quick Start

```typescript
import { PPServer } from '@painda/core';
import { PPRedisAdapter } from '@painda/redis';

const server = new PPServer({
  port: 3000,
  adapter: new PPRedisAdapter({
    host: 'localhost',
    port: 6379,
    prefix: 'painda-app',
  }),
});
```

## License

**MIT License** — free for private projects, open-source, and community use.
npm package: @painda/video
Description: WebRTC signaling server module for PaindaProtocol
Author: Painda
Latest version: 0.1.8

# 🐼 @painda/video

**Reliable, low-latency WebRTC signaling for PaindaProtocol.**

`@painda/video` provides a robust signaling layer for peer-to-peer communication. It handles complex SDP negotiations and ICE candidate relaying, allowing you to integrate high-quality video and audio calls directly into your real-time applications with minimal setup.

### ⚡ Highlights

- **P2P Signaling**: Optimized for NAT traversal and low-latency peer discovery.
- **Room-Based Calling**: Integrated support for call rooms and multi-peer discovery.
- **Protocol-First**: Leverages Painda's binary framing for lightweight signaling overhead.
- **Developer Friendly**: Simplified API for offer/answer and candidate exchange.

## Installation

```bash
npm install @painda/video @painda/core
```

## Quick Start

```typescript
import { PPServer } from '@painda/core';
import { SignalingServer } from '@painda/video';

const server = new PPServer({ port: 3000 });
const signaling = new SignalingServer(server);

// Clients can now join calls and exchange WebRTC signals:
// 1. Client A sends { type: "signal", payload: { callId, signal: "offer", sdp } }
// 2. SignalingServer relays to Client B
// 3. Client B responds with "answer"
// 4. ICE candidates are exchanged automatically
```

## Signal Types

| Signal | Description |
|--------|-------------|
| `offer` | SDP offer from caller |
| `answer` | SDP answer from callee |
| `ice-candidate` | ICE candidate for NAT traversal |
| `join` | Join a call room |
| `leave` | Leave a call room |

## License

**MIT License** — free for private projects, open-source, and community use.

- **Enterprise (Paid):** Commercial projects above a certain company size or revenue threshold require a commercial license. Inquiries via [pp.painda.tools/enterprise](https://pp.painda.tools/enterprise).
- **Pro Plugins:** Premium modules (Dashboard, Redis Adapter, Enterprise Support) available at [pp.painda.tools/plugins](https://pp.painda.tools/plugins).
npm package: @painsoftware/steno
Description: CommonJS version of steno 3.0.0. See https://github.com/mifi/commonify
Author: Typicode
Latest version: 3.0.0

# Steno [![](http://img.shields.io/npm/dm/steno.svg?style=flat)](https://www.npmjs.org/package/steno) [![Node.js CI](https://github.com/typicode/steno/actions/workflows/node.js.yml/badge.svg)](https://github.com/typicode/steno/actions/workflows/node.js.yml)

> Specialized fast async file writer

**Steno** makes writing to the same file often/concurrently fast and safe.

Used in [lowdb](https://github.com/typicode/lowdb).

_https://en.wikipedia.org/wiki/Stenotype_

## Features

- ⚡ Fast (see benchmark)
- 🐦 Lightweight (~6kb)
- 👍 ⚛️ Safe: No partial writes (writes are atomic)
- 👍 🏁 Safe: No race conditions (writes are ordered even if they're async)

## Usage

```javascript
import { Writer } from 'steno'

// Create a singleton writer
const file = new Writer('file.txt')

// Use it in the rest of your code
async function save() {
  await file.write('some data')
}
```

## Benchmark

`npm run benchmark` (see `src/benchmark.ts`)

```
Write 1KB data to the same file x 1000
  fs     :   62ms
  steno  :    1ms

Write 1MB data to the same file x 1000
  fs     : 2300ms
  steno  :    5ms
```

_Steno uses a smart queue and avoids unnecessary writes._

## License

MIT - [Typicode](https://github.com/typicode)
npm package: @paint-bucket/css-plugin
Description: CSS color values parsing and serialization plugin for Paint Bucket.
Author: Savva Mikhalevski
Latest version: 1.1.0
Deprecated: Merged into https://www.npmjs.com/package/paint-bucket

# @paint-bucket/css-plugin

CSS color values parsing and serialization plugin for [Paint Bucket](https://github.com/smikhalevski/paint-bucket/).
npm package: @paint-bucket/gradient-plugin
Description: Gradient manipulation plugin for Paint Bucket.
Author: Savva Mikhalevski
Latest version: 1.1.0
Deprecated: Merged into https://www.npmjs.com/package/paint-bucket

# @paint-bucket/gradient-plugin

Gradient manipulation plugin for [Paint Bucket](https://github.com/smikhalevski/paint-bucket/).

```ts
import {color} from '@paint-bucket/core';
import '@paint-bucket/gradient-plugin';
import '@paint-bucket/css-plugin';

color.gradient(['#fff', '#000']).at(0.7).css(); // → #4d4d4d

color.gradient(['#fff', '#000'], [0, 100]).at(70).css(); // → #4d4d4d

color('#fff').gradient('#000').at(0.7).css(); // → #4d4d4d
```
npm package: @paint-bucket/hsl
Description: HSLa color model plugin for Paint Bucket.
Author: Savva Mikhalevski
Latest version: 1.1.0
Deprecated: Merged into https://www.npmjs.com/package/paint-bucket

# @paint-bucket/hsl

HSLa color model plugin for [Paint Bucket](https://github.com/smikhalevski/paint-bucket/).
npm package: @paint-bucket/hsl-plugin
Description: HSLa color model manipulation plugin for Paint Bucket.
Author: Savva Mikhalevski
Latest version: 1.1.0
Deprecated: Merged into https://www.npmjs.com/package/paint-bucket

# @paint-bucket/hsl-plugin

HSLa color model manipulation plugin for [Paint Bucket](https://github.com/smikhalevski/paint-bucket/).
npm package: @paint-bucket/hsv
Description: HSVa color model plugin for Paint Bucket.
Author: Savva Mikhalevski
Latest version: 1.1.0
Deprecated: Merged into https://www.npmjs.com/package/paint-bucket

# @paint-bucket/hsv

HSVa color model plugin for [Paint Bucket](https://github.com/smikhalevski/paint-bucket/).
npm package: @paint-bucket/lab
Description: CIE-L*a*b* color model plugin for Paint Bucket.
Author: Savva Mikhalevski
Latest version: 1.1.0
Deprecated: Merged into https://www.npmjs.com/package/paint-bucket

# @paint-bucket/lab

CIE-L\*a\*b\* color model plugin for [Paint Bucket](https://github.com/smikhalevski/paint-bucket/).
npm package: @paint-bucket/plugin-utils
Description: Utils to simplify plugin development for Paint Bucket.
Author: Savva Mikhalevski
Latest version: 1.1.0
Deprecated: Merged into https://www.npmjs.com/package/paint-bucket

# @paint-bucket/plugin-utils

Utils to simplify plugin development for [Paint Bucket](https://github.com/smikhalevski/paint-bucket/).
npm package: @paint-bucket/rgb-plugin
Description: RGBa color model manipulation plugin for Paint Bucket.
Author: Savva Mikhalevski
Latest version: 1.1.0
Deprecated: Merged into https://www.npmjs.com/package/paint-bucket

# @paint-bucket/rgb-plugin

RGBa color model manipulation plugin for [Paint Bucket](https://github.com/smikhalevski/paint-bucket/).
npm package: @paint-bucket/x11-plugin
Description: X11 color name parsing plugin for Paint Bucket.
Author: Savva Mikhalevski
Latest version: 1.1.0
Deprecated: Merged into https://www.npmjs.com/package/paint-bucket

# @paint-bucket/x11-plugin

X11 color name parsing plugin for [Paint Bucket](https://github.com/smikhalevski/paint-bucket/).
npm package: @paint-bucket/xyz
Description: CIE 1931 XYZa color model plugin for Paint Bucket.
Author: Savva Mikhalevski
Latest version: 1.1.0
Deprecated: Merged into https://www.npmjs.com/package/paint-bucket

# @paint-bucket/xyz

CIE 1931 XYZa color model plugin for [Paint Bucket](https://github.com/smikhalevski/paint-bucket/).
npm package: @paintable/vue
Description: Paintable for vue
Author: Philip
Latest version: 0.4.1

# @paintable/vue

This package is a complete rewrite of vue-paintable. It's based on this core module: [https://github.com/ph1p/paintable-core](https://github.com/ph1p/paintable-core)

This plugin works with **Vue 3+**

**Demo:** [https://paintable-vue.vercel.app/](https://paintable-vue.vercel.app/)

### How to use?

Follow these three simple steps:

```bash
npm install @paintable/vue
```

**main.js**

```javascript
import { createApp } from 'vue';
import App from './App.vue';
// import the plugin
import Paintable from '@paintable/vue';

const app = createApp(App);

app.use(Paintable);

app.mount('#app');
```

Inside your **\*.vue** file (full example **./src/App.vue**)

```vue
<template>
  <paintable
    ref="paintable"
    :active="active"
    :width="800"
    :height="800"
    :hide="hidePaintable"
    :name="isFirstPaintable ? 'my-screen' : 'my-second-screen'"
    :lineWidth="lineWidth"
    :color="color"
  >
    <h1>Content</h1>
  </paintable>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isFirstPaintable: true,
      hidePaintable: false,
      lineWidth: 5,
      active: true,
      color: '#000000'
    };
  }
};
</script>
```

### Development

```bash
npm run install
npm run serve
```
npm package: @painted/http
Description: React hooks library for data fetching
Latest version: 0.0.1-rc.11

## Introduction

`@painted/http` is a React hooks library for data fetching.

## Quick start

```ts
// file: src/apis/user.ts
import { createHttpFactory } from "@painted/http";

export const useGETForUser = createHttpFactory('GET:/users/{userId}')
  .apply<"Path", { userId: string }>() // will automatic inferred from url, without to write this line.
  .apply<"Response", { id: number, name: string, avatar: string }>() // apply response data type.
  .apply<"Query", { t: number }>  // apply query params type structure.
  .doQueryRequest(); // generate query react hooks.

```

```tsx
// file: src/app.tsx
import { useGETForUser } from "./apis/user.ts";

export function App(){
  const {data: user, pending, error } = useGETForUser({
    // path params
    path: {
      userId: "36ce21c7-15f5-4e9a-beec-b6604fbebd0f"
    },
    // query params
    query: {
      t: Date.now()
    }
  })
  return (<>
     {pending && <span>loading...</span>}
     {error && <span>Oops something in wrong.</span>}
     {user && <pre>{JSON.string(user, null, 2)}</pre>}
   </>
  )
}
```

## License

The MIT License.