open-index/open-npm huggingface dataset:
npm package: @piying/orm
Description: piying-orm;Valibot to Orm
Author: wszgrcy
Latest version: 1.0.16

<div><a href="https://www.npmjs.com/package/@piying/orm"><img src="https://img.shields.io/npm/v/@piying/orm" alt="NPM Version" /></a> <a href="https://coveralls.io/github/piying-org/piying-orm?branch=main"><img src="https://coveralls.io/repos/github/piying-org/piying-orm/badge.svg" alt="Coverage Status" ></a> <a href=""><img src="https://img.shields.io/badge/License-MIT-teal.svg" alt="MIT License" /></a></div>


## document

- https://piying-org.github.io/website/docs/orm/intro


## Use

```ts
import { convert, column, columnPrimaryKey } from "@piying/orm/typeorm";
import * as v from 'valibot';
export const Account = v.pipe(
  v.object({
    id: v.pipe(v.string(), columnPrimaryKey({ generated: "uuid" })),
    createdAt: v.pipe(v.date(), column({ createDate: true })),
    updateAt: v.pipe(v.date(), column({ updateDate: true })),
    username: v.pipe(v.string(), v.title("用户名"), column({ length: 50 })),
  }),
);
const instance = convert(
  {
    Account,
  },
  {
    dataSourceOptions: {
      type: "better-sqlite3",
      database: path.join(process.cwd(), ".tmp", "data.sqlite"),
      synchronize: false,
      logging: true,
    },
  },
);
await instance.dataSource.initialize();
result.object.Account;
```
npm package: @piying/view-angular
Description: Piying view For Angular;Valibot to Component
Author: wszgrcy
Latest version: 2.8.3

<div><a href="https://www.npmjs.com/package/@piying/view-core"><img src="https://img.shields.io/npm/v/@piying/view-core" alt="NPM Version" /></a> <a href="https://coveralls.io/github/piying-org/piying-view?branch=main"><img src="https://coveralls.io/repos/github/piying-org/piying-view/badge.svg" alt="Coverage Status" ></a> <a href=""><img src="https://img.shields.io/badge/License-MIT-teal.svg" alt="MIT License" /></a></div>

## document

- https://piying-org.github.io/website/docs/client/intro

## start

- npm i
- npm run build:core

## test

- npx playwright install
- npm run test:all

### test Core/Angular

- npm run test

### test Vue

- npm run test:vue

### test React

- npm run test:react

### test Solid

- npm run test:solid

### test Svelte

- npm run test:svelte
npm package: @piying/view-angular-core
Description: <div><a href="https://www.npmjs.com/package/@piying/view-core"><img src="https://img.shields.io/npm/v/@piying/view-core" alt="NPM Version" /></a> <a href="https://coveralls.io/github/piying-org/piying-view?branch=main"><img src="https://coveralls.io/repos
Author: wszgrcy
Latest version: 2.8.3

<div><a href="https://www.npmjs.com/package/@piying/view-core"><img src="https://img.shields.io/npm/v/@piying/view-core" alt="NPM Version" /></a> <a href="https://coveralls.io/github/piying-org/piying-view?branch=main"><img src="https://coveralls.io/repos/github/piying-org/piying-view/badge.svg" alt="Coverage Status" ></a> <a href=""><img src="https://img.shields.io/badge/License-MIT-teal.svg" alt="MIT License" /></a></div>

## document

- https://piying-org.github.io/website/docs/client/intro

## start

- npm i
- npm run build:core

## test

- npx playwright install
- npm run test:all

### test Core/Angular

- npm run test

### test Vue

- npm run test:vue

### test React

- npm run test:react

### test Solid

- npm run test:solid

### test Svelte

- npm run test:svelte
npm package: @piying/view-core
Description: <div><a href="https://www.npmjs.com/package/@piying/view-core"><img src="https://img.shields.io/npm/v/@piying/view-core" alt="NPM Version" /></a> <a href="https://coveralls.io/github/piying-org/piying-view?branch=main"><img src="https://coveralls.io/repos
Author: wszgrcy
Latest version: 2.8.3

<div><a href="https://www.npmjs.com/package/@piying/view-core"><img src="https://img.shields.io/npm/v/@piying/view-core" alt="NPM Version" /></a> <a href="https://coveralls.io/github/piying-org/piying-view?branch=main"><img src="https://coveralls.io/repos/github/piying-org/piying-view/badge.svg" alt="Coverage Status" ></a> <a href=""><img src="https://img.shields.io/badge/License-MIT-teal.svg" alt="MIT License" /></a></div>

## document

- https://piying-org.github.io/website/docs/client/intro

## start

- npm i
- npm run build:core

## test

- npx playwright install
- npm run test:all

### test Core/Angular

- npm run test

### test Vue

- npm run test:vue

### test React

- npm run test:react

### test Solid

- npm run test:solid

### test Svelte

- npm run test:svelte
npm package: @piying/view-react
Description: Piying view For React;Valibot to Component
Author: wszgrcy
Latest version: 2.8.3

<div><a href="https://www.npmjs.com/package/@piying/view-core"><img src="https://img.shields.io/npm/v/@piying/view-core" alt="NPM Version" /></a> <a href="https://coveralls.io/github/piying-org/piying-view?branch=main"><img src="https://coveralls.io/repos/github/piying-org/piying-view/badge.svg" alt="Coverage Status" ></a> <a href=""><img src="https://img.shields.io/badge/License-MIT-teal.svg" alt="MIT License" /></a></div>

## document

- https://piying-org.github.io/website/docs/client/intro

## start

- npm i
- npm run build:core

## test

- npx playwright install
- npm run test:all

### test Core/Angular

- npm run test

### test Vue

- npm run test:vue

### test React

- npm run test:react

### test Solid

- npm run test:solid

### test Svelte

- npm run test:svelte
npm package: @piying/view-solid
Description: Piying view For Solid;Valibot to Component
Author: wszgrcy
Latest version: 2.8.3

<div><a href="https://www.npmjs.com/package/@piying/view-core"><img src="https://img.shields.io/npm/v/@piying/view-core" alt="NPM Version" /></a> <a href="https://coveralls.io/github/piying-org/piying-view?branch=main"><img src="https://coveralls.io/repos/github/piying-org/piying-view/badge.svg" alt="Coverage Status" ></a> <a href=""><img src="https://img.shields.io/badge/License-MIT-teal.svg" alt="MIT License" /></a></div>

## document

- https://piying-org.github.io/website/docs/client/intro

## start

- npm i
- npm run build:core

## test

- npx playwright install
- npm run test:all

### test Core/Angular

- npm run test

### test Vue

- npm run test:vue

### test React

- npm run test:react

### test Solid

- npm run test:solid

### test Svelte

- npm run test:svelte
npm package: @piying/view-svelte
Description: Piying view For Svelte;Valibot to Component
Author: wszgrcy
Latest version: 2.8.3

<div><a href="https://www.npmjs.com/package/@piying/view-core"><img src="https://img.shields.io/npm/v/@piying/view-core" alt="NPM Version" /></a> <a href="https://coveralls.io/github/piying-org/piying-view?branch=main"><img src="https://coveralls.io/repos/github/piying-org/piying-view/badge.svg" alt="Coverage Status" ></a> <a href=""><img src="https://img.shields.io/badge/License-MIT-teal.svg" alt="MIT License" /></a></div>

## document

- https://piying-org.github.io/website/docs/client/intro

## start

- npm i
- npm run build:core

## test

- npx playwright install
- npm run test:all

### test Core/Angular

- npm run test

### test Vue

- npm run test:vue

### test React

- npm run test:react

### test Solid

- npm run test:solid

### test Svelte

- npm run test:svelte
npm package: @piying/view-vue
Description: Piying view For Vue;Valibot to Component
Author: wszgrcy
Latest version: 2.8.3

<div><a href="https://www.npmjs.com/package/@piying/view-core"><img src="https://img.shields.io/npm/v/@piying/view-core" alt="NPM Version" /></a> <a href="https://coveralls.io/github/piying-org/piying-view?branch=main"><img src="https://coveralls.io/repos/github/piying-org/piying-view/badge.svg" alt="Coverage Status" ></a> <a href=""><img src="https://img.shields.io/badge/License-MIT-teal.svg" alt="MIT License" /></a></div>

## document

- https://piying-org.github.io/website/docs/client/intro

## start

- npm i
- npm run build:core

## test

- npx playwright install
- npm run test:all

### test Core/Angular

- npm run test

### test Vue

- npm run test:vue

### test React

- npm run test:react

### test Solid

- npm run test:solid

### test Svelte

- npm run test:svelte
npm package: @piying/view-vue2-legacy
Description: Piying view For Vue2;Valibot to Component
Author: wszgrcy
Latest version: 2.8.3

<div><a href="https://www.npmjs.com/package/@piying/view-core"><img src="https://img.shields.io/npm/v/@piying/view-core" alt="NPM Version" /></a> <a href="https://coveralls.io/github/piying-org/piying-view?branch=main"><img src="https://coveralls.io/repos/github/piying-org/piying-view/badge.svg" alt="Coverage Status" ></a> <a href=""><img src="https://img.shields.io/badge/License-MIT-teal.svg" alt="MIT License" /></a></div>

## document

- https://piying-org.github.io/website/docs/client/intro

## start

- npm i
- npm run build:core

## test

- npx playwright install
- npm run test:all

### test Core/Angular

- npm run test

### test Vue

- npm run test:vue

### test React

- npm run test:react

### test Solid

- npm run test:solid

### test Svelte

- npm run test:svelte
npm package: @piyoppi/counter-button
Description: Simple counter tools for web pages
Latest version: 0.1.4

# @piyoppi/counter-button

Custom elements that increment counts, display counts.

This elements call API provided by [@piyoppi/counter-api](../counter).
The API must be deployed previously.

## Install

To get packages from github package registry, you should edit .npmrc file. Show an example below. (authToken must have the read:packages scope. [ref](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry))

```
//npm.pkg.github.com/:_authToken=xxxxxxxx
@piyoppi:registry=https://npm.pkg.github.com
```

```
npm install --save @piyoppi/counter-button
```

## Example

Displays the count of the page on which this element is placed. It also places a vote button.

```html
<counter-container
  apiurl="https://api.example.com"
  >
  <counter-increment-button>
    <span>
      &#x1f31f;
      <counter-display>
        <span slot="loading">...</span>
      </counter-display>
    </span>
  </counter-increment-button>
</counter-container>
```

## `counter-increment-button`

The button is used to increment the counter. The API (`POST /count`) is called when the button is clicked.

### Attributes

| attribute | detail |
| --- | --- |
| apiurl | The url of API (ex: `https://api.example.com`) |
| url (optional) | The url of a current page  (default `window.location.href`) |


## `counter-display`

The element displays the counted value. The API (`GET /current`) is called when the element is shown.

### Attributes

| attribute | detail |
| --- | --- |
| apiurl | The url of API (ex: `https://api.example.com`) |
| addition (optional) | Additional count values. The element is displayed the value provided by api + addition value|
| url (optional) | The url of a current page (default `window.location.href`) |

### Slots

| name | detail |
| --- | --- |
| loading | Displayed when calling api. |
| error | Displayed when api call fails. |

## `counter-container`

This element integrates `counter-increment-button` and `counter-display`.

- Attribute `apiurl` and `url` on this element is applied in the child elements.
- When the counter display button in this element is clicked, the attribute `addition` is incremented by the `counter-display`.


### Attributes

| attribute | detail |
| --- | --- |
| apiurl | The url of API (ex: `https://api.example.com`) |
| url (optional) | The url of a current page (default `window.location.href`) |
npm package: @piyoppi/object-key-converter
Description: convert object keys
Author: piyoppi
Latest version: 0.0.3

# @piyoppi/object-key-converter

## Example

```js
const map = [
  ['hoge', 'a'],
  ['fuga', 'b'],
  ['piyo', 'c',
    [
      ['foo', 'd'],
      ['bar', 'e']
    ]
  ]
];

const obj = {
  hoge: 1,
  fuga: 2,
  piyo: {
    foo: 3,
    bar: 4
  },
  baz: 5
};

console.log(convertKey(obj, map, false));

// log output:
//
// {
//   a: 1,
//   b: 2,
//   c: {
//     d: 3,
//     e: 4
//   },
//   baz: 5
// }
```

---

```js
const map = [
  ['hoge', 'a'],
  ['fuga', 'b'],
  ['piyo', 'c',
    [
      ['foo', 'd'],
      ['bar', 'e']
    ]
  ]
];

const obj = {
  a: 1,
  b: 2,
  c: {
    d: 3,
    e: 4
  },
  f: 5
};

console.log(convertKey(obj, map, true));

// log output:
//
// {
//   hoge: 1,
//   fuga: 2,
//   piyo: {
//     foo: 3,
//     bar: 4
//   },
//   f: 5
// }
```
npm package: @piyoppi/pixelart-element
Description: The custom element by displaying pixelart beautifully
Author: piyoppi
Latest version: 1.0.0

# @piyoppi/pixelart-element

The custom element by displaying pixelart beautifully

Sample page is here -> https://garakuta-toolbox.com/pixelart-element/

## Install

```
npm install --save @piyoppi/pixelart-element
```

## Usage

### Import using a script tag

You can use a built file `dist/pixelart-element.bundle.js` in the package.

The `pixelart-img` element is also available on https://cdn.jsdelivr.net/npm/@piyoppi/pixelart-element/

You need to put a script tag after `pixelart-img` tag.

For example,
```html
<pixelart-img scale="2" src="path/to/pixelart.png"></pixelart-img>

<script src="https://cdn.jsdelivr.net/npm/@piyoppi/pixelart-element@0.0.5/dist/pixelart-element.bundle.js"></script>
```

### Import as a module
You can also import an element as a module.

```
// Import <pixelart-img> element
import { PixelartElement } from '@piyoppi/pixelart-element';

// Register custom element manually
customElements.define('pixelart-img', PixelartElement);
```

### Display a pixelart.

```html
<pixelart-img src="path/to/pixelart.png"></pixelart-img>
```

### Scaling

```html
<!-- Set scale -->
<pixelart-img scale="2" src="path/to/pixelart.png"></pixelart-img>

<!-- Set width and height -->
<pixelart-img width="600" height="600" src="path/to/pixelart.png"></pixelart-img>
```
npm package: @piyush_007/tweak-extension
Description: Chrome Extension built with React, Vite, and TypeScript
Author: Piyush Dixit
Latest version: 1.0.3

# 🧠 Tweak AI Prompts – Chrome Extension

Boost your productivity by injecting a ✨ **Tweak** button into AI input boxes (ChatGPT, Claude, Gemini, DeepSeek) that optimizes your prompts for better AI responses.

---

## ✨ Features

- Injects a "Tweak Prompt" button directly into supported AI chat UIs.
- Uses the [OpenRouter API](https://openrouter.ai/) to optimize the written prompt.
- Works with:
  - ChatGPT (`chat.openai.com`)
  - Claude (`claude.ai`)
  - Gemini (`gemini.google.com`)
  - DeepSeek (`chat.deepseek.com`)
- Prompt output is returned **as plain optimized text** — no clutter.

---

## 🧩 How It Works

1. On AI input boxes, a ✨ button appears once you start typing.
2. When clicked, your prompt is sent to OpenRouter using the `deepseek-chat` model.
3. You get back a smarter, more specific version of your prompt, which replaces the original input.

---

## 🚀 Installation (Dev)

1. Clone this repo:
   ```bash
   git clone https://github.com/yourname/tweak-extension.git
   cd tweak-extension
   ```
2. Create a .env file:

```env
    VITE_OPENROUTER_API_KEY=your_openrouter_api_key_here
    VITE_BACKEND_URL=your_backend_url
```

3. Run the dev build:
```bash
npm install
npm run build
```

Go to chrome://extensions/, enable Developer Mode, click Load unpacked, and select the /dist folder.

🔧 Configuration
Make sure to include your OpenRouter key in the .env file as:

```env
    VITE_OPENROUTER_API_KEY=your_key
    VITE_BACKEND_URL=your_backend_url
```

You can get one from https://openrouter.ai/

📁 Project Structure
```
@piyush_007/tweak-extension/
│── dist/
│   ├── assets
│   |     ├──popup-Cb2gFt_V.css
│   ├── icon
│   |     ├──icon128.png
│   ├── content.js
│   ├── icon.svg
│   ├── index.html
│   ├── manifest.json
│   ├── popup.js
│── eslint.config.js
│── package.json
│── README.md
```


  
🛡️ Permissions
This extension requires the following permissions:

activeTab – To access the current tab’s DOM

storage – To optionally store prompt count locally

🧠 Example API Call

```ts
const response = await axios.post("https://openrouter.ai/api/v1/chat/completions", {
  model: "deepseek/deepseek-chat-v3-0324:free",
  messages: [
    {
      role: "system",
      content: "You are a prompt optimizer. ONLY return the improved prompt."
    },
    {
      role: "user",
      content: "Summarize this article with key insights."
    }
  ]
}, {
  headers: {
    Authorization: `Bearer ${VITE_OPENROUTER_API_KEY}`,
    "Content-Type": "application/json"
  }
});
```

❤️ Contributing
Have ideas or want to add support for more models or AI tools? PRs and feedback are welcome!

📄 License
MIT License. Use it, fork it, build your AI toolkit.
npm package: @piyush_rn_ui_lib/react-native-ui-library
Description: Desc
Author: Piyush Kumar Pandey
Latest version: 0.1.7

# react-native-ui-library

Desc

## Installation

```sh
npm install react-native-ui-library
```

## Usage


```js
import { UiLibraryView } from "react-native-ui-library";

// ...

<UiLibraryView color="tomato" />
```


## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @piyushchourey11/ai-chat-widget
Description: A pluggable, standalone AI chatbot widget component for React applications with WebSocket support and form synchronization
Author: Piyush chourey
Latest version: 1.0.1

# @piyushchourey11/ai-chat-widget

A pluggable, standalone AI chatbot widget component for React applications with WebSocket support and form synchronization.

## Installation

```bash
npm install @piyushchourey11/ai-chat-widget
```

## Quick Start

```tsx
import { ChatBotProvider, ChatBot } from '@piyushchourey11/ai-chat-widget';

function App() {
  const [isChatOpen, setIsChatOpen] = useState(false);

  const config = {
    apiEndpoint: 'http://localhost:7000/api/chat',
    socketServer: 'http://localhost:7000',
    enabled: true,
    title: 'My Assistant',
    subtitle: 'Powered by AI',
  };

  return (
    <ChatBotProvider config={config}>
      <YourApp />
      <ChatBot
        isOpen={isChatOpen}
        setIsOpen={setIsChatOpen}
        flowType="default"
      />
    </ChatBotProvider>
  );
}
```

## Features

- ✅ **Pluggable**: Easy to attach/detach from any React project
- ✅ **Standalone**: Works independently or with provider
- ✅ **WebSocket Support**: Built-in Socket.IO integration
- ✅ **Form Synchronization**: Bidirectional form field updates
- ✅ **TypeScript**: Full type safety
- ✅ **Configurable**: Extensive configuration options
- ✅ **Responsive**: Mobile-friendly design
- ✅ **Theme Support**: Light/dark/auto themes

## Documentation

See the [full documentation](./docs/README.md) for detailed usage examples and API reference.

## License

MIT
npm package: @piyushimraw/react-swipe-card
Description: Tinder style swipe cards
Author: Piyush Shrivastava
Latest version: 0.2.0

# react-swipe-card
Tinder style swipe cards

[![npm](https://img.shields.io/npm/v/react-swipe-card.svg?style=flat-square)](https://www.npmjs.com/package/react-swipe-card)

 - [Usage](#usage)
 - [Demo](#demo)
 - [Code](#code)
 - [Components](#components)
 - [License](#License)

## Usage

Install

```bash
 $ npm install react-swipe-card -save
```


## Demo

[Demo](https://alexandre-garrec.github.io/react-swipe-card/)

## Code

```javascript
import Cards, { Card } from 'react-swipe-card'


const data = ['Alexandre', 'Thomas', 'Lucien']

const Wrapper = () => {
  return (
	  <Cards onEnd={action('end')} className='master-root'>
        {data.map(item => 
          <Card 
            onSwipeLeft={action('swipe left')} 
            onSwipeRight={action('swipe right')}>
            <h2>{item}</h2>
          </Card>
        )}
      </Cards>
  )
}
```

## Components

Cards
---
Props:

 - className: string
 - onEnd: function
 - alertRight: component
 - alertLeft: component
 - alertTop: component
 - alertBottom: component

Card
---
Props:

 - onSwipeLeft: function
 - onSwipeRight: function
 - onSwipeTop: function
 - onSwipeBottom: function

## License

[MIT License](https://opensource.org/licenses/MIT)