open-index/open-npm huggingface dataset:
npm package: @kenkaiii/n8n-nodes-super-agent
Description: AI-powered Super Agent, Super Prompts, and Super MCP nodes for n8n workflows
Author: Ken Kai does AI
Latest version: 0.1.17

# n8n-nodes-super-agent

Better AI agents for n8n. Because the default ones were driving me crazy.

## What is this?

I got tired of n8n's AI limitations, so I built my own nodes that actually work how you'd expect them to.

**Super Agent** - An AI agent that can use multiple system prompts and multiple memories. Finally.

**Super Prompts** - Routes your messages to different prompts/models based on what you're asking. One agent, multiple personalities.

**Super MCP** - Connect all your MCP tools with one node. And they actually work.

## Why I built this

The standard n8n AI agent forces you to:

- Use ONE system prompt (seriously?)
- Connect ONE memory (what if I need short-term AND long-term?)
- Create separate nodes for each MCP tool
- Build separate workflows for different types of requests

That's dumb. So I fixed it.

## What's different

### Multiple System Prompts

Instead of one agent = one prompt, you can have:

- Technical prompt for coding questions → Claude 4 Sonnet
- Creative prompt for writing → Claude 4 Sonnet
- Data analysis → Gemini 2.5 Pro
- Quick responses → GPT-4.1-mini
- All in ONE workflow

The router (GPT-4.1-mini) figures out which prompt to use based on your message.

### Multiple Memories

Connect as many as you want:

- Window memory for recent context
- Buffer memory for full history
- Different memories for different purposes
- They all work together

### MCP That Works

- One node for all your MCP servers
- Actually follows the MCP spec
- No more debugging why tools won't load

## Installation

In your n8n instance:

1. Go to Settings > Community nodes
2. Click "Install a community node"
3. Paste in `@kenkaiii/n8n-nodes-super-agent`
4. Click Install

## Basic Setup

1. Add Super Agent node
2. Connect Super Prompts with your different system prompts
3. Add Super MCP if you need tools
4. Connect whatever memories you want
5. Done

## Example

Let's say you want an agent that can:

- Write code
- Create marketing copy
- Analyze data

Old way: 3 different workflows or a really confused agent

My way:

- One Super Agent
- Three prompts in Super Prompts
- Each with the right model for the job
- Router figures out which to use

## Who's this for?

Anyone who's tried to build a serious AI workflow in n8n and thought "why is this so limited?"

## Not a magic fix

This doesn't make your prompts better or your workflow faster. It just removes the artificial limitations that were annoying me (and probably you).

## Built by

Ken Kai does AI

## License

MIT
npm package: @kenkaiiii/flowforge-mcp
Description: FlowForge MCP Server - Connect LLMs to FlowForge workflow automation platform
Author: FlowForge Team
Latest version: 1.0.14

# FlowForge MCP Server

Professional MCP server that connects LLMs to FlowForge workflow automation platform.

## Installation

```bash
npm install -g flowforge
```

## Setup

1. Set your FlowForge API key:
```bash
export FLOWFORGE_API_KEY="ff_sk_your_api_key_here"
export FLOWFORGE_API_URL="http://localhost:8080"  # Optional, defaults to localhost
```

2. Run the MCP server:
```bash
flowforge-mcp
```

## MCP Tools

### Node Discovery
- `flowforge_discover_nodes` - Get available node types
- `flowforge_get_node_schema` - Get node configuration requirements  
- `flowforge_get_node_examples` - Get real-world config examples

### Workflow Operations
- `flowforge_validate_workflow` - Validate workflow before creation
- `flowforge_test_workflow` - Dry-run workflow execution
- `flowforge_create_workflow` - Create workflow from DSL
- `flowforge_list_workflows` - List existing workflows
- `flowforge_manage_workflow` - Update/delete/test workflows

## Example Usage

### Create E-commerce Workflow
```
LLM: Use flowforge_create_workflow with:
dsl: "webhook -> ai_agent -> slack"
configs: {
  "webhook": {"endpoint": "/orders"},
  "ai_agent": {
    "model": {"provider": "openai", "model_name": "gpt-4"},
    "prompt": {"system_prompt": "Sales analyst", "user_prompt": "Analyze: {{webhook.data}}"}
  },
  "slack": {"channel": "#sales", "message": "Order: {{ai_agent.output}}"}
}
```

### Validate Before Creating
```
LLM: Use flowforge_validate_workflow to check configuration
```

### Test Workflow
```
LLM: Use flowforge_test_workflow with sample data
```

## Configuration

Required environment variables:
- `FLOWFORGE_API_KEY` - Your FlowForge API key
- `FLOWFORGE_API_URL` - FlowForge server URL (optional)

## License

MIT
npm package: @kenkaiiii/gg-ai
Description: Unified LLM streaming API for Anthropic and OpenAI
Latest version: 4.3.29

# @kenkaiiii/gg-ai

<p align="center">
  <strong>Unified LLM streaming API. Four providers. One interface.</strong>
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@kenkaiiii/gg-ai"><img src="https://img.shields.io/npm/v/@kenkaiiii/gg-ai?style=for-the-badge" alt="npm version"></a>
  <a href="../../LICENSE"><img src="https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge" alt="MIT License"></a>
</p>

One function. Flat options. Switch providers by changing a string. No adapters, no plugins, no wrapper classes.

Part of the [GG Framework](../../README.md) monorepo.

---

## Install

```bash
npm i @kenkaiiii/gg-ai
```

---

## How it works

Call `stream()` with a provider, model, and messages. That's the entire API.

- **`for await`** gives you streaming events (`text_delta`, `thinking_delta`, `toolcall_done`, etc.)
- **`await`** gives you the final response (`message`, `stopReason`, `usage`)

Same function, same call. Dual-nature `StreamResult` — async iterable and thenable.

Tool parameters are Zod schemas. Converted to JSON Schema at the provider boundary automatically.

---

## Providers

| Provider | Models | Notes |
|---|---|---|
| `anthropic` | Claude Opus 4.6, Sonnet 4.6, Haiku 4.5 | Extended thinking, prompt caching, server-side compaction |
| `openai` | GPT-4.1, o3, o4-mini | Supports OAuth (codex endpoint) and API keys |
| `glm` | GLM-5.1, GLM-4.7 | Z.AI platform, OpenAI-compatible |
| `moonshot` | Kimi K2.5 | Moonshot platform, OpenAI-compatible |

---

## Stream events

| Event | Description |
|---|---|
| `text_delta` | Incremental text output |
| `thinking_delta` | Extended thinking output (Anthropic) |
| `toolcall_delta` | Streaming tool call arguments |
| `toolcall_done` | Completed tool call with parsed args |
| `server_toolcall` | Server-side tool invocation |
| `server_toolresult` | Server-side tool result |
| `done` | Stream finished, includes stop reason |
| `error` | Error occurred |

---

## Options

| Option | Type | Description |
|---|---|---|
| `provider` | `"anthropic" \| "openai" \| "glm" \| "moonshot"` | Required |
| `model` | `string` | Required |
| `messages` | `Message[]` | Required |
| `tools` | `Tool[]` | Tool definitions with Zod schemas |
| `toolChoice` | `"auto" \| "none" \| "required" \| { name }` | Tool selection strategy |
| `serverTools` | `ServerToolDefinition[]` | Server-side tool definitions |
| `maxTokens` | `number` | Max output tokens |
| `temperature` | `number` | Sampling temperature |
| `topP` | `number` | Nucleus sampling |
| `stop` | `string[]` | Stop sequences |
| `thinking` | `"low" \| "medium" \| "high" \| "max"` | Extended thinking (Anthropic) |
| `apiKey` | `string` | Provider API key |
| `baseUrl` | `string` | Custom endpoint |
| `signal` | `AbortSignal` | Cancellation |
| `cacheRetention` | `"none" \| "short" \| "long"` | Prompt cache preference |
| `compaction` | `boolean` | Server-side compaction (Anthropic only) |

---

## License

MIT
npm package: @kenkaiiii/queen-agent-mcp
Description: MCP server for Queen Agent artifact tools
Author: kenkaiiii
Latest version: 1.0.0

# Queen Agent MCP Server

MCP (Model Context Protocol) server for Queen Agent artifact tools.

## Features

- **createDocument**: Create text, code, or spreadsheet artifacts
- **updateDocument**: Update existing artifacts

## Installation

```bash
pnpm install
pnpm build
```

## Usage

Import and register with Claude Agent SDK:

```typescript
import { query } from "@anthropic-ai/claude-agent-sdk";
import { queenAgentMcpServer } from "queen-agent-mcp";

async function* promptGenerator() {
  yield "Your prompt here";
}

for await (const message of query({
  prompt: promptGenerator(),
  options: {
    mcpServers: [queenAgentMcpServer],
    allowedTools: [
      "mcp__queen-agent__createDocument",
      "mcp__queen-agent__updateDocument"
    ]
  }
})) {
  // Handle messages
}
```

## Tools

### createDocument

Creates a new artifact document.

**Parameters:**
- `title` (string): Document title
- `kind` (enum): Document type - "text", "code", or "sheet"

### updateDocument

Updates an existing artifact document.

**Parameters:**
- `documentId` (string): ID of document to update
- `description` (string): What changes to make
npm package: @kenkaiiii/queen-chrome-ext
Description: Production-ready Chrome extension template with Manifest V3, TypeScript, React 19, Vite 7, comprehensive testing, and zero-config setup
Author: Kenkaiiii
Latest version: 3.0.0

# Queen Chrome Extension Template

<div align="center">

![Version](https://img.shields.io/npm/v/@kenkaiiii/queen-chrome-ext)
![License](https://img.shields.io/npm/l/@kenkaiiii/queen-chrome-ext)
![Downloads](https://img.shields.io/npm/dt/@kenkaiiii/queen-chrome-ext)

**Production-ready Chrome extension template with zero configuration**

[Quick Start](#quick-start) • [Features](#features) • [Documentation](#documentation)

</div>

## 🎯 What You Get

A complete Chrome extension starter with:

- ✅ **Manifest V3** - Latest Chrome standard (required 2025)
- ✅ **React 19** - Modern UI with latest hooks
- ✅ **TypeScript 5.9** - Full type safety
- ✅ **Vite 7** - Lightning-fast builds & HMR
- ✅ **Vitest 3** - Comprehensive testing suite
- ✅ **ESLint 9** - Code quality (flat config)
- ✅ **Prettier** - Consistent formatting
- ✅ **GitHub Actions** - CI/CD ready
- ✅ **Zero Warnings** - Clean production builds
- ✅ **Zero Vulnerabilities** - Security first

## 🚀 Quick Start

\`\`\`bash
# Create new extension
npx @kenkaiiii/queen-chrome-ext my-extension

# Navigate and install
cd my-extension
npm install

# Start development
npm run dev

# Build for production
npm run build
\`\`\`

### Load in Chrome

1. Open \`chrome://extensions\`
2. Enable "Developer mode" (top right)
3. Click "Load unpacked"
4. Select the \`dist/\` folder

## 📦 Features

### Complete Development Setup

\`\`\`
✨ Manifest V3 compliant
🔷 TypeScript configured
⚡ Vite with HMR
⚛️  React 19 with hooks
🧪 Vitest + Testing Library
🎨 ESLint + Prettier
🔒 Content Security Policy
📊 Bundle analyzer ready
🔄 Hot reload support
📦 Chrome Web Store ready
\`\`\`

### Scripts Included

| Command | Description |
|---------|-------------|
| \`npm run dev\` | Start development server |
| \`npm run build\` | Build for production |
| \`npm run test\` | Run test suite |
| \`npm run test:ui\` | Visual test runner |
| \`npm run lint\` | Check code quality |
| \`npm run format\` | Format code |
| \`npm run validate\` | Validate manifest |
| \`npm run zip\` | Create Web Store ZIP |

## 📝 License

MIT © [Kenkaiiii](https://github.com/kenkaiiii)

## 🔗 Links

- [NPM Package](https://www.npmjs.com/package/@kenkaiiii/queen-chrome-ext)
- [GitHub Repository](https://github.com/kenkaiiii/queen-chrome-ext)
- [Chrome Extension Docs](https://developer.chrome.com/docs/extensions/)

---

<div align="center">

**Built with ❤️ for Chrome Extension developers**

</div>
npm package: @kenkaiiii/queen-claude
Description: Complete Queen Claude autonomous development system installer - includes SaaS templates, RAG applications, Next.js projects, and MCP configuration
Author: kenkaiiii
Latest version: 3.8.5

# Queen Claude Installer

Complete autonomous development system installer for Queen Claude.

## Installation

```bash
npx @kenkaiiii/queen-claude
```

## What It Installs

This installer automatically sets up the complete Queen Claude ecosystem:

### 📦 Packages Installed Globally
- **@kenkaiiii/queen-init@latest** - Database & project initialization
- **@kenkaiiii/queen-nextjs@latest** - Next.js foundation with 31 packages
- **@kenkaiiii/queen-saas@latest** - Production-ready SaaS template with auth, billing, and multi-tenancy
- **@kenkaiiii/queen-rag@latest** - RAG application template with ChromaDB, Next.js, and FastAPI
- **@kenkaiiii/queen-tauri@latest** - Cross-platform desktop app template with React and Rust
- **@kenkaiiii/queen-chrome-ext@latest** - Chrome extension template with TypeScript
- **@kenkaiiii/queen-mcp@latest** - MCP server for Claude Code integration

### 🔧 MCP Configuration
Automatically configures Claude Code with:
```bash
claude mcp add queen-mcp -s user -- npx -y @kenkaiiii/queen-mcp@latest
```

### 🚀 Latest Versions
Always installs @latest versions of all packages, ensuring you get:
- Latest bug fixes (including feature_id bug fixes)
- Latest design system features
- Latest autonomous development capabilities

## After Installation

Choose your development path:

### Option 1: Production SaaS (Fastest to Market)
```bash
# Create production-ready SaaS with auth, billing, multi-tenancy
queen-saas my-saas-app
cd my-saas-app
npm run dev
```

### Option 2: Next.js Foundation (Customizable)
```bash
# Create Next.js project with 31 packages
queen-nextjs my-app

# Initialize Queen environment
cd my-app && queen-init

# Set up design system (in Claude Code)
/1-setup-design     # Choose colors, fonts
/2-setup-foundation # Configure Tailwind + templates
/3-setup-features   # Plan features
/4-start-features   # Launch autonomous development

# Start development
npm run dev
```

### Option 3: RAG Application
```bash
# Create RAG app with ChromaDB + Next.js + FastAPI
queen-rag my-rag-app
cd my-rag-app
# Follow setup instructions in README
```

### Option 4: Desktop Application
```bash
# Create cross-platform desktop app with Tauri
queen-tauri my-desktop-app
cd my-desktop-app
npm run dev
```

### Option 5: Chrome Extension
```bash
# Create Chrome extension with TypeScript + Vite
queen-chrome my-extension
cd my-extension
npm run dev
```

## System Requirements

- Node.js 16+ 
- Claude Code (for MCP integration)
- Git

---

**🤖 Queen Claude - Autonomous Development Made Simple**
npm package: @kenkaiiii/queen-nextjs
Description: Create a modern Next.js application with Queen Claude foundation, Claude Code configuration, and Queen Styles design system enforcement
Author: Queen Claude Development Team
Latest version: 3.4.0

# create-nextjs-queen

A modern Next.js scaffold with Queen Claude foundation - clean, opinionated, and ready to build.

## Features

- ⚡ **Next.js 15** with App Router
- 🔒 **TypeScript** in strict mode  
- 🎨 **Tailwind CSS** with dark mode
- 🛠️ **ESLint & Prettier** configured
- 📦 **Latest dependencies** at install time
- 🚀 **Zero configuration** needed

## Quick Start

```bash
npx create-nextjs-queen my-app
cd my-app
npm install
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) - your app is ready!

## What You Get

### Perfect Foundation
- Modern Next.js setup with App Router
- TypeScript with strict configuration
- Tailwind CSS with sensible defaults
- Professional ESLint and Prettier setup

### Clean Structure
```
src/
├── app/          # Next.js App Router
├── components/   # React components (ready to use)
├── lib/          # Utilities and helpers
└── types/        # TypeScript definitions
```

### Ready-to-Use Scripts
- `npm run dev` - Development server
- `npm run build` - Production build
- `npm run lint` - Code linting
- `npm run format` - Code formatting
- `npm run type-check` - TypeScript validation

## Philosophy

**Bare-bones but complete** - Everything you need to start building, nothing you don't.

- ✅ **Infrastructure included**: All tooling configured perfectly
- ❌ **Opinions excluded**: No auth, database, or deployment assumptions
- 🎯 **Latest everything**: Dependencies fetched fresh at install time

## Part of Queen Claude System

This scaffold is Phase 1 of the Queen Claude spec-driven development system. Future phases will add:
- MCP integration for AI collaboration
- Database-driven project management  
- Constitutional development principles
- Real-time development dashboards

For now, enjoy the cleanest Next.js foundation available.

---

Built with ❤️ for developers who want to start building immediately.
npm package: @kenkaiiii/queen-rag
Description: RAG (Retrieval-Augmented Generation) project initializer for Queen Claude ecosystem
Author: kenkaiiii
Latest version: 1.3.0

# 🚀 Queen RAG Installer

Create production-ready RAG (Retrieval-Augmented Generation) applications with the Queen Claude ecosystem.

## Features

- **Full-Stack RAG Application**: Next.js frontend + FastAPI backend
- **Vector Database**: ChromaDB for efficient document retrieval
- **Assistant UI**: Pre-configured chat interface with streaming
- **OpenAI Integration**: GPT-4 with vision capabilities
- **Queen Claude Ecosystem**: Specialized agents and commands for RAG development

## Installation

```bash
npm install -g @kenkaiiii/queen-rag
```

## Usage

```bash
queen-rag my-rag-app
cd my-rag-app
```

## Project Structure

```
my-rag-app/
├── frontend/          # Next.js + Assistant UI
├── backend/           # FastAPI + ChromaDB
├── .claude/           # Queen Claude configuration
│   ├── agents/        # RAG-specialized agents
│   └── commands/      # Custom slash commands
└── CLAUDE.md          # RAG development guidelines
```

## Specialized Agents

- **rag_backend**: FastAPI & ChromaDB specialist
- **rag_frontend**: React & Assistant UI specialist
- **vector_specialist**: Embeddings & search optimization
- **debuggy**: RAG system debugging
- **cheeky_backend**: Python validation
- **cheeky_frontend**: Frontend validation

## Available Commands

- `/start-rag`: Get everything running quickly
- `/check`: Verify code quality and fix issues
- `/commit`: Create a git commit

## Quick Start

### Backend Setup

```bash
cd backend
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
pip install -r requirements.txt
cp .env.example .env
# Add your OpenAI API key to .env
python main.py
```

### Frontend Setup

```bash
cd frontend
npm install
cp .env.example .env
npm run dev
```

## Requirements

- Node.js 18+
- Python 3.10+
- OpenAI API key

## Development Guidelines

The project includes strict RAG development guidelines in `CLAUDE.md`:

- **KISS**: Keep It Simple - use existing components
- **YAGNI**: Build only what's needed
- **DRY**: Don't repeat yourself
- **SOLID**: Single responsibility for agents

## Quality Gates

Before committing:
- Backend: MyPy strict mode, Ruff checks
- Frontend: TypeScript strict, ESLint
- Vector ops: 1536 dimensions, cosine similarity
- Performance: <200ms search, <1s first token

## License

MIT

## Support

For issues and questions: https://github.com/kenkaiiii/queen-claude/issues
npm package: @kenkaiiii/queen-tauri
Description: Create cross-platform desktop applications with Tauri, featuring a modern React frontend and Rust backend, optimized for Mac, Linux, and Windows
Author: Queen Claude Development Team
Latest version: 2.1.0

# Queen Tauri Template

Create cross-platform desktop applications with Tauri, featuring a modern React frontend and Rust backend, optimized for Mac, Linux, and Windows.

## 🚀 Installation

```bash
npm install -g @kenkaiiii/queen-tauri
```

## 📦 Usage

```bash
queen-tauri my-desktop-app
```

## ✨ Features

- 🤖 AI-powered development with Claude agents specialized for Tauri
- 🎨 Modern React frontend with TypeScript
- 🦀 Performant Rust backend with async support
- 🖥️ Cross-platform: macOS, Linux, Windows
- 🔒 Security-first with Tauri's capabilities system
- 📦 Small bundle size (< 10MB typical)
- ⚡ Fast startup and native performance
- 🎯 Type-safe IPC communication

## 🛠️ Technology Stack

### Frontend
- React 18+ with TypeScript
- Vite for fast builds
- Tailwind CSS for styling
- Tauri API bindings

### Backend
- Rust with Tokio async runtime
- Tauri v2.0 framework
- SQLite for local storage
- Native OS integrations

## 📁 Project Structure

```
my-app/
├── frontend/           # React application
│   ├── src/           # Source code
│   ├── public/        # Static assets
│   └── package.json   # Frontend dependencies
├── backend/           # Rust/Tauri backend
│   ├── src/          # Rust source
│   ├── Cargo.toml    # Rust dependencies
│   └── tauri.conf.json # Tauri config
└── .claude/          # AI agents
    ├── agents/       # Tauri-specific agents
    └── commands/     # Development commands
```

## 🏗️ Development

```bash
# Install dependencies
cd frontend && npm install
cd ../backend && cargo build

# Run in development
npm run tauri dev

# Build for production
npm run tauri build
```

## 🎯 Queen Claude Integration

This template includes specialized Claude agents:

- **tauriking**: Expert in Tauri framework and cross-platform development
- **rustmaster**: Rust backend optimization and async patterns
- **reactpro**: React frontend with Tauri integrations

## 📚 Resources

- [Tauri Documentation](https://tauri.app)
- [Rust Book](https://doc.rust-lang.org/book/)
- [React Documentation](https://react.dev)
- [Queen Claude Docs](https://github.com/kenkaiiii/queen-claude)

## 📄 License

MIT

---

*Part of the Queen Claude ecosystem for AI-powered development*
npm package: @kenkinsai/usedapp
Description: ### Ethereum 🤝 React Framework for rapid Dapp development. Simple. Robust. Extendable. Testable.
Author: Ethworks
Latest version: 1.1.7

# useDapp

### Ethereum 🤝 React 
Framework for rapid Dapp development.  
Simple. Robust. Extendable. Testable.

## About
Introduces great features:
- 🏗️ **React hooks** - Uses React hooks as your primary building ingredient
- 🚅 **Auto refresh** - Refreshes on a new block, wallet change or network change
- 🛒 **Multicall** - Combines multiple blockchain calls into a single multicall

Combines the best practices:
- 🔧 **Modern stack** - Employs [ethers.js](https://github.com/ethers-io/), [web3-react](https://github.com/NoahZinsmeister/web3-react), [multicall](https://github.com/makerdao/multicall) & [waffle](https://getwaffle.io/)
- 📚 **Extendability** - Extends easily with custom hooks
- 💡 **Testability** - Simple integration tests for UI and blockchain


## Example

```tsx
const config = {
  readOnlyChainId: ChainId.Mainnet,
  readOnlyUrls: {
    [ChainId.Mainnet]: 'https://mainnet.infura.io/v3/62687d1a985d4508b2b7a24827551934',
  },
}

ReactDOM.render(
  <DAppProvider config={config}>
    <App />
  </DAppProvider>,
  document.getElementById('root')
)

const STAKING_CONTRACT = '0x00000000219ab540356cBB839Cbe05303d7705Fa'

export function App() {
  const { activateBrowserWallet, deactivate, account } = useEthers()
  const userBalance = useEtherBalance(account)
  const stakingBalance = useEtherBalance(STAKING_CONTRACT)

  return (
    <div>
      {!account && <button onClick={activateBrowserWallet}> Connect </button>}
      {account && <button onClick={deactivate}> Disconnect </button>}
    
      {stakingBalance && <p>ETH2 staking balance: {formatEther(stakingBalance)} ETH </p>}
      {account && <p>Account: {account}</p>}
      {userBalance && <p>Ether balance: {formatEther(userBalance)} ETH </p>}
    </div>
  )
}
```

See application [here](https://example.usedapp.io/balance).


## Documentation
For detailed feature walkthrough checkout [documentation](https://usedapp.readthedocs.io/en/latest/).

## Contributing

Contributions are always welcome, no matter how large or small. Before contributing, please read the [code of conduct](https://github.com/EthWorks/useDapp/blob/master/CODE_OF_CONDUCT.md) and [contribution policy](https://github.com/EthWorks/useDapp/blob/master/CONTRIBUTION.md).

### Before you issue pull request:

* Make sure all tests pass.
* Make sure linter passes.
* Make sure you have test coverage for any new features.

To install dependencies type:
```sh
yarn
```

To build project:
```sh
yarn build
```

To run tests type:
```sh
yarn test
```

To run linter type:
```sh
yarn lint
```

### Building documentation

[Install Sphinx](https://www.sphinx-doc.org/en/master/usage/installation.html) to build documentation:

```sh
cd docs
make html
```

Before building documentation for the first time you may have to install required python packages:
```sh
pip3 install -r docs/requirements.txt
```

## License

useDapp is released under the [MIT License](https://opensource.org/licenses/MIT).
npm package: @kenkou/vue-stripe-elements
Description: A Vue wrapper for stripe elements. This library was inspired in [fromAtoB/vue-stripe-elements](https://github.com/fromatob/vue-stripe-elements), but has the following improvements:
Author: Kenkou GmbH
Latest version: 2.0.0

[![NPM](https://nodei.co/npm/@kenkou/vue-stripe-elements.png)](https://nodei.co/npm/@kenkou/vue-stripe-elements/)
[![npm](https://img.shields.io/npm/dm/@kenkou/vue-stripe-elements.svg?style=flat-square)](https://www.npmjs.com/package/@kenkou/vue-stripe-elements)

# @kenkou/vue-stripe-elements

A Vue wrapper for stripe elements. This library was inspired in [fromAtoB/vue-stripe-elements](https://github.com/fromatob/vue-stripe-elements), but has the following improvements:

- No need to previously setup `stripe.js`: is injected at runtime, currently `v3`. If it is already configured it works as well.
- No custom api defined: you can access the `stripe.js` instance by calling `getStripe` (returns a `Promise`) and then use[`stripe.js`](https://stripe.com/docs/stripe-js/reference) api itself.

## Install

```sh
npm install --save @kenkou/vue-stripe-elements
```

or

```sh
yarn add @kenkou/vue-stripe-elements
```

## Usage

Stripe official javascript library `stripe.js` `v3` will be automatically injected if `window.Stripe` global variable is not set.

```js
<Stripe spk="pk_test_xxxxxxxxxxxxxxxxx">
  ...
  <Elements>
    <card-number ref="cardNumber" />
    ...
    <card-cvc />
    ...
    <card-expiry />
  </Elements>
  ...
</Stripe>
```

To access the stripe element created in each component call the `element()` method. To access the stripe instance use `getStripe` to get a promise to it. For example, to tokenize a card do:

```js
<script>
import { getStripe } from '@kenkou/vue-stripe-elements'

export default {
  ...
  methods: {
   async tokenize() {
    // get one of the stripe elements created
    const cardNumber = this.$refs.cardNumber.element()
    // see the https://stripe.com/docs/stripe-js/reference api
    const stripe = await getStripe()
    const result = await stripe.createToken(cardNumber)
    console.log('tokenized element', result)
  }
}
</script>
```

See `src/App.vue` for a complete example.

## Live demo

We got a free demo for you!

[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-template-7wqy3?fontsize=14)

Remember to set the `spk` value inside `data()` function.

## Building and running on localhost

First install dependencies:

```sh
yarn install
```

To run `App.vue` example:

```sh
yarn serve
```

To create a production build:

```sh
yarn build
```

Built with love at [KenKou](https://www.kenkou.de).
npm package: @kenmon/email-otp-provider
Description: Email OTP authentication provider for Kenmon
Author: Junyoung Choi
Latest version: 1.0.0-pre.0

# @kenmon/email-otp-provider

Email OTP authentication provider for Kenmon.

## Installation

```bash
npm install @kenmon/email-otp-provider
```

## Usage

```typescript
import { KenmonEmailOTPProvider } from '@kenmon/email-otp-provider'

auth.registerProvider(
  new KenmonEmailOTPProvider({
    mailer: new MyMailer(),
    otpStorage: new MyOTPStorage(),
    otp: {
      ttl: 300, // 5 minutes
      length: 6,
    },
    email: {
      from: 'noreply@example.com',
      subject: 'Your verification code',
    },
  }),
)
```

## Configuration

### `mailer` (required)

**You must implement this yourself.** Instance of `KenmonMailer` for sending emails via your email service (SendGrid, AWS SES, etc.).

```typescript
class MyMailer extends KenmonMailer {
  async sendEmail(params: {
    from: string
    to: string | string[]
    subject: string
    textContent?: string
    htmlContent?: string
  }): Promise<void> {
    // Send via your email service
  }
}
```

### `otpStorage` (required)

**You must implement this yourself.** Implementation of `KenmonEmailOTPStorage` for OTP persistence in your database.

```typescript
class MyOTPStorage implements KenmonEmailOTPStorage {
  async createOTP(
    email: string,
    code: string,
    expiresAt: Date,
  ): Promise<KenmonEmailOTP> {
    // Save OTP to database and return it
  }

  async getOTPById(id: string): Promise<KenmonEmailOTP | null> {
    // Fetch OTP from database by ID
  }

  async markOTPAsUsed(id: string): Promise<void> {
    // Mark OTP as used in database
  }
}
```

### `otp` (optional)

- `ttl` - OTP lifetime in seconds (default: 300)
- `length` - OTP code length (default: 6)

### `email` (optional)

- `from` - Sender email address (default: 'noreply@example.com')
- `subject` - Email subject (string or function)
- `textContent` - Plain text email body (function)
- `htmlContent` - HTML email body (function)

### Custom Email Content

You can customize email content using generator functions:

```typescript
new KenmonEmailOTPProvider({
  mailer: new MyMailer(),
  otpStorage: new MyOTPStorage(),
  email: {
    from: 'auth@example.com',
    subject: (code: string, ttl: number) => `Your code: ${code}`,
    textContent: (code: string, ttl: number) =>
      `Code: ${code}\nExpires in ${ttl}s`,
    htmlContent: (code: string, ttl: number) =>
      `<h1>${code}</h1><p>Expires: ${ttl}s</p>`,
  },
})
```

## See Also

- [kenmon](../kenmon) - Core authentication service
- [nextjs-example](../../apps/nextjs-example) - Full implementation with Drizzle
npm package: @kenmon/nextjs-adapter
Description: Next.js framework adapter for Kenmon
Author: Junyoung Choi
Latest version: 1.0.0-pre.5

# @kenmon/nextjs-adapter

Next.js framework adapter for Kenmon.

## Installation

```bash
npm install @kenmon/nextjs-adapter
```

## Usage

```typescript
import { KenmonNextJSAdapter } from '@kenmon/nextjs-adapter'
import { KenmonAuthService } from 'kenmon'

const auth = new KenmonAuthService({
  secret: process.env.SESSION_SECRET,
  adapter: new KenmonNextJSAdapter(),
  storage: /* your storage implementation */
})
```

## What it does

Provides Next.js-specific implementations for:

- Cookie management (using `next/headers`)
- Server-side cookie operations
- SessionRefresh component for automatic session renewal

## SessionRefresh Component

The `SessionRefresh` component automatically refreshes user sessions in the background, keeping users logged in without interruption.

### Setup

**Step 1: Create a server action**

Create a server action file in your app (e.g., `src/lib/auth/actions.ts`):

```typescript
'use server'

import { auth } from './auth' // Your Kenmon instance

export async function refreshSession() {
  const result = await auth.refreshSession()

  if (!result.success) {
    return { success: false, error: result.error.message }
  }

  return { success: true }
}
```

**Step 2: Add SessionRefresh to your root layout**

```typescript
// src/app/layout.tsx
import { SessionRefresh } from '@kenmon/nextjs-adapter'
import { refreshSession } from '@/lib/auth/actions'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <SessionRefresh
          refreshAction={refreshSession}
          refreshInterval={86400} // 24 hours in seconds
        />
        {children}
      </body>
    </html>
  )
}
```

### Props

- `refreshAction` (required): The server action that refreshes the session
- `refreshInterval` (optional): Time in seconds before a session needs refresh. Default: 86400 (24 hours)
- `storageKey` (optional): localStorage key to store the last refresh timestamp. Default: 'session_last_refresh'

### How it works

The component:

- Checks if the session needs refreshing:
  - Every 15 minutes
  - When the window regains focus
  - When the tab becomes visible again
- Refreshes the session only if `refreshInterval` seconds have passed since the last refresh
- Uses localStorage to track the last refresh time
- Renders nothing to the DOM (invisible component)

## See Also

- [kenmon](../kenmon) - Core authentication service
- [nextjs-example](../../apps/nextjs-example) - Full implementation example
npm package: @kenmori/clean-react-comments
Description: A CLI tool to remove comments from JavaScript, TypeScript, and JSX/TSX files.
Author: Kenji Morita
Latest version: 1.1.0

# clean-react-comments Documentation

## Description

`clean-react-comments` is a CLI tool that removes comments from JavaScript, TypeScript, and JSX/TSX files. It supports flexible options to control which comments are removed.

## Features

- Remove single-line (`//`) and block (`/* */`) comments
- Handle JSX comments (`{/* comment */}`) with optional fine-tuning
- Preserve meaningful JSDoc comments (`/** ... */`)
- Support for annotation comments like `// TODO`, `// FIXME`, `// HACK`, `// XXX`, `// REVIEW`, `// OPTIMIZE`, `// CHANGED`, `// NOTE`, `// WARNING`.
- Default exclusion of `node_modules` and `dist` directories

## Installation

```sh
npm install -g @kenmori/clean-react-comments
```

## Usage

```sh
clean-react-comments <directory> [options]
```

## Default Behavior

By default, the tool ignores `node_modules` and `dist` directories.

## Options

| Option               | Description | Default |
|----------------------|-------------|---------|
| `--exclude <glob>` | Exclude files matching the pattern | `node_modules`, `dist` |
| `--only-code-comments` | Remove only `//` and `/* */` comments, preserving JSDoc & JSX | `false` |
| `--keep-jsdoc` | Preserve JSDoc comments (`/** ... */`) | `true` |
| `--remove-all-jsx-comments` | Remove all JSX comments (`{/* ... */}`) | `false` |
| `--remove-tag-jsx-comments` | Remove JSX comments wrapping tags (`{/* <div>...</div> */}`) | `true` |
| `--remove-annotations` | Remove annotation comments like `// TODO`, `// FIXME` | `false` |

## Examples

### `--only-code-comments`

Before:

```tsx
// This is a comment
const x = 42; /* inline comment */

{/** JSX Comment */}
```

After:

```tsx
{/** JSX Comment */}
const x = 42;
```

### `--keep-jsdoc`

Before:

```ts
/**
 * This is a JSDoc comment
 */
function test() {}
```

After:

```ts
/**
 * This is a JSDoc comment
 */
function test() {}
```

### `--remove-all-jsx-comments`

Before:

```tsx
const App = () => {
  return (
    <div>
      {/* JSX comment */}
    </div>
  );
};
```

After:

```tsx
const App = () => {
  return (
    <div>
    </div>
  );
};
```

### `--remove-tag-jsx-comments`

Before:

```tsx
const App = () => {
  return (
    <div>
      {/* <Button>Click</Button> */}
      <Button>Click</Button>
    </div>
  );
};
```

After:

```tsx
const App = () => {
  return (
    <div>
      <Button>Click</Button>
    </div>
  );
};
```

### `--remove-annotations`

Before:

```ts
// TODO: Implement this function
function foo() {
  // FIXME: Handle edge cases
  return 42;
}
```

After:

```ts
function foo() {
  return 42;
}
```
npm package: @kenmori/corner-islands
Description: corner-islands is a lightweight utility for dynamically determining the border-radius and other styles of connected elements in a sequence. By treating groups of elements as "islands," this package allows you to easily style connected corners, apply custo
Author: Kenji Morita
Latest version: 0.2.1

# corner-islands

<img src="https://kenjimorita.jp/wp-content/uploads/2024/08/スクリーンショット-2024-08-17-10.23.19.png" width="600px" />

corner-islands is a lightweight utility for dynamically determining the border-radius and other styles of connected elements in a sequence. By treating groups of elements as \"islands,\" this package allows you to easily style connected corners, apply custom styles, and manage layout logic based on the relationship between elements. Perfect for React and other UI frameworks where flexible, conditional styling is needed.

## install

```bash
npm install corner-islands
```


## API

```js
getIsland(fields: { condition: 'And' | 'Or' }[]): (1 | 2 | 3 | 4)[]
```

Represents connections between elements as "islands" and returns the state of each element as a number.

```text
1: Independent element (only one island)
2: Start of an island
3: Middle of an island
4: End of an island
```

## Example


`[2, 4, 2, 4]` => Contains two islands

`[2, 3, 3, 4]` => One island composed of four elements

`[2, 3, 4, 1]` => Contains two islands


- [stackblitz](https://stackblitz.com/edit/corner-islands?file=README.md)

```ts
import { CornerIslands } from 'corner-islands';

const cornerIslands = new CornerIslands();

const fields = [
  { condition: 'And' },
  { condition: 'And' },
  { condition: 'Or' },
  { condition: 'And' }
];

const result = cornerIslands.getIsland(fields);
console.log(result); // [2, 3, 4, 1]
```

if you using react

```tsx
const conditions = [{ condition: 'And' as const }];
const landsByOne = new CornerIslands().getIsland(conditions);
.
.
.
<Settings>
  {conditions.map((_, i) => {
    return (
      <Land land={landsByOne[i]}>
        <ConditionText>{i + 1}</ConditionText>
      </Land>
  );
  })}
</Settings>

//// style (ex: styled-components)
const Land = styled.div<{ land: 1 | 2 | 3 | 4 }>`
  padding: 8px 12px;
  font-weight: bold;
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: ${({ land }) =>
    land === 1
      ? '6px'
      : land === 2
      ? '6px 0 0 6px'
      : land === 3
      ? '0'
      : land === 4
      ? '0 6px 6px 0'
      : '0'};
  background: ${({ land }) => (land ? '#47cd47' : '#fff')}
`;
```

## License

MIT License

## Contributing

Issues and pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

## Author

[@kenmori](https://x.com/terrace_tech)
npm package: @kennanhunter/npm-package-template
Description: Kennan Hunter's simple package template
Author: Kennan Hunter
Latest version: 0.0.0-alpha.1

> For almost everything, just replace
> `kennanhunter` with your username,
> `@kennanhunter/npm-package-template` with your npm name (line 20 + 21 of readme.md),
> and `npm-package-template` with your repo name
>
> For github actions add
>
> - NPM_TOKEN: found in access tokens on your npm settings
> - CODECOV_TOKEN: found in code coverage
>
> Always remember [grug's timeless advice on testing](https://grugbrain.dev/#grug-on-testing)
>
> You also will want to change the `funding` key in [package.json](./package.json)
> and the ko-fi key in [FUNDING.yml](./.github/FUNDING.yml)
> to your financial details

# NPM Package Template

![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/kennanhunter/npm-package-template/publish.yml?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dt/@kennanhunter/npm-package-template?style=for-the-badge)
![NPM License](https://img.shields.io/npm/l/@kennanhunter/npm-package-template?style=for-the-badge)
[![Code coverage](https://img.shields.io/codecov/c/github/kennanhunter/npm-package-template?style=for-the-badge)](https://app.codecov.io/gh/KennanHunter/npm-package-template)

## Usage

### Installing

```shell
# npm
npm install @kennanhunter/npm-package-template
# Yarn
yarn add @kennanhunter/npm-package-template
```

### Adding

```typescript
import { add } from "zod";

const res = add(5, 7);

console.log(res); // 13
```

## Developing

```shell
git clone https://github.com/KennanHunter/npm-package-template.git
cd npm-package-template

yarn
yarn test

# Benchmarking (builds in background)
yarn benchmark

# Only needed for final publishing
yarn build
```

There exists recommended extensions and basic settings in the [.vscode](./.vscode) folder.
npm package: @kennarddh/react-use-history-state
Description: Undo or redo changes in state
Author: kennarddh
Latest version: 1.2.1

# React useHistoryState

Undo or redo changes in state

Here is the [demo](https://react-eghud9.stackblitz.io/).

## Installation

```bash
npm install @kennarddh/react-use-history-state
```

## Usage

```js
import React from 'react'

import { useHistoryState } from '@kennarddh/react-use-history-state'

const App = () => {
	const [Count, SetCount, [Undo, Redo, ClearHistory, History]] = useHistoryState(1, options)

	return (
		<>
			<p>Count: {Count}</p>
			<p>History Length: {History.length}</p>
			<button onClick={() => SetCount(Count + 1)}>increment</button>
			<button onClick={() => SetCount(Count - 1)}>decrement</button>
			<button onClick={Undo}>Undo</button>
			<button onClick={Redo}>Redo</button>
			<button onClick={ClearHistory}>Clear History</button>
		</>
	)
}

export default App
```

### Options

```javascript
{
	onUndo: callback(previous, current),
	onRedo: callback(previous, current),
	onChangeState: callback(previous, current),
	onClearHistory: callback(previous, current),
}
```

## License

[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## Contributing

![Contributors](https://img.shields.io/badge/Contributors-1-blue.svg)
npm package: @kennarddh/react-usestore
Description: React hooks for state management
Author: kennarddh
Latest version: 1.4.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# DEPRECATED React usestore

React hooks for state management

## What is usestore?

usestore is a library for managing state in React applications.

Here is the [demo](https://react-kttczk.stackblitz.io/).

## Installation

```bash
npm i @kennarddh/react-usestore
```

## Usage

```javascript
import React from 'react'

import { useStore, StoreProvider } from '@kennarddh/react-usestore'

const SubSubComponent = () => {
	const [Store] = useStore('test-store')

	return <p>SubSubComponent: {Store?.data}</p>
}

const SubComponent = () => <SubSubComponent />
const Component = () => {
	// Create a store
	// Pass true to third argument to store in localstorage
	// Key in localstorage is 'react_usestore__{storeName}'
	useStore('test-store', { data: 'dataForSubSubComponent' })

	return <SubComponent />
}

const App = () => {
	return (
		<StoreProvider>
			<Component />
		</StoreProvider>
	)
}

export default App
```

### Using WithStoreProvider HOC

```javascript
import React from 'react'

import { useStore, StoreProvider } from '@kennarddh/react-usestore'

const WithStoreProvider = WrappedComponent => {
	const Wrapper = () => (
		<StoreProvider>
			<WrappedComponent />
		</StoreProvider>
	)

	return Wrapper
}

const SubSubComponent = () => {
	const [Store] = useStore('test-store')

	return <p>SubSubComponent: {Store?.data}</p>
}

const SubComponent = () => <SubSubComponent />

const Component = () => {
	useStore('test-store', { data: 'dataForSubSubComponent' })

	return <SubComponent />
}

const App = () => <Component />

export default WithStoreProvider(App)
```

### Using WithStoreConsumer HOC

```javascript
import React from 'react'

import {
	useStore,
	StoreProvider,
	WithStoreConsumer,
} from '@kennarddh/react-usestore'

class SubSubComponent extends React.Component {
	render() {
		const { Store } = this.props['test-store']
		return <p>{Store?.data}</p>
	}
}

const WrappedSubSubComponent = WithStoreConsumer(SubSubComponent, 'test-store')

const SubComponent = () => <WrappedSubSubComponent />

const Component = () => {
	useStore('test-store', { data: 'dataForWrappedSubSubComponent' })

	return <SubComponent />
}

const App = () => {
	return (
		<StoreProvider>
			<Component />
		</StoreProvider>
	)
}

export default App
```

## License

[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## Contributing

![Contributors](https://img.shields.io/badge/Contributors-1-blue.svg)
npm package: @kennarddh/spinning-prize-wheel
Description: Spinning Prize Wheel
Author: kennarddh
Latest version: 1.0.4

# Spinning Prize Wheel

[Demo](https://kennarddh.github.io/spinning-prize-wheel/)

[Demo Source](https://github.com/kennarddh/spinning-prize-wheel/tree/main/sites)

## Install

```bash
npm i @kennarddh/spinning-prize-wheel
```

## Guide

### Ref Handle

-   Reset {function} = Reset to 0 position
-   Rotate {function} = Rotate the wheel

### Props

-   rotateDuration {number} = Rotate duration in second
-   rarityGroups {array} = Rarity groups
-   choices {array} = Choices
-   onEndRotate {function} = On end rotate callback
-   onStartRotate {function} = On start rotate callback
-   onReset {function} = On reset callback
-   withoutArrow {boolean} = Remove default arrow
-   fullRotationAddBeforeDestination {number|numberFactory} = How many times should wheel full spin before stop
-   counterClockwise {boolean} = Rotate wheel counter clockwise
-   groupColorByRarity {boolean} = Should group color by rarity
-   resetRotateDuration {number} = Reset rotate duration in second
-   shuffleChoices {boolean} = Shuffle choices
-   size {number} = Wheel size
-   fontSize {number} = Content font size,
-   needReset {boolean} = Need reset before another spin

### Example

```typescriptreact
import { FC, useRef, useState } from 'react'

import LuckyWheel, {
	IRarityGroups,
	IChoices,
	ILuckyWheel,
} from '@kennarddh/spinning-prize-wheel'

const App: FC = () => {
	const [RarityGroups] = useState<IRarityGroups>({
		common: {
			label: 'Common',
			rarity: 89,
			color: '#f00',
		},
		uncommon: {
			label: 'Uncommon',
			rarity: 10,
			color: '#0f0',
		},
		rare: {
			label: 'Rare',
			rarity: 1,
			color: '#00f',
		},
	})

	const [Counter, SetCounter] = useState({ common: 0, uncommon: 0, rare: 0 })

	const [Choices] = useState<IChoices>(
		Array(8)
			.fill(null)
			.map((_, i) => {
				const rand = Math.random()

				let rarity = ''

				if (rand < 0.5) rarity = 'common'
				else if (rand < 0.8) rarity = 'uncommon'
				else rarity = 'rare'

				return {
					id: `${i}`,
					label: `${i}`,
					rarityGroup: rarity,
				}
			})
	)

	const OnEndRotate = (id: string) => {
		const choice = Choices.find(item => item.id === id)

		alert(
			`You get ${choice?.label} ${
				RarityGroups[choice?.rarityGroup ?? ''].label
			}`
		)

		const get = choice?.rarityGroup as 'common' | 'uncommon' | 'rare'

		SetCounter(prev => ({
			...prev,
			// eslint-disable-next-line security/detect-object-injection
			[get]: prev[get] + 1,
		}))
	}

	const LuckyWheelRef = useRef<ILuckyWheel>(null)

	const Rotate = () => {
		LuckyWheelRef.current?.Rotate()
	}

	const Reset = () => {
		LuckyWheelRef.current?.Reset()
	}

	console.log(Counter)

	return (
		<div>
			<LuckyWheel
				rotateDuration={3}
				rarityGroups={RarityGroups}
				choices={Choices}
				onEndRotate={OnEndRotate}
				ref={LuckyWheelRef}
				groupColorByRarity
				size={400}
				fontSize={25}
				shuffleChoices
			/>
			<div>
				<button onClick={Rotate}>Rotate</button>
				<button onClick={Reset}>Reset</button>
			</div>
		</div>
	)
}
```