open-index/open-npm huggingface dataset:
npm package: @overmindtech/sdp-js
Description: Javascript and Typescript libraries for the State Description Protocol
Latest version: 14.0.0

# sdp.js

JavaScript libraries for the [SDP](https://github.com/overmindtech/workspace/sdp) protocol.

## Developing

Please make any changes in a feature branch and add a pull request. All changes should have relevant tests and documentation.

### Testing

Tests can be run with `pnpm run test` or the VSCode Test task.

### Style

Code formatting/style can be validated using:

```shell
pnpm codequality:check
```

And fixed using:

```shell
pnpm codequality:fix
```

### Local Development

To use a local version of this package in the frontend. You can build the package and then linking it:

```shell
pnpm build
```

Then in the frontend edit the `package.json` to point to the local package:

```json
"dependencies": {
  "@overmindtech/sdp": "file:../sdp-js/dist"
}
```

## Releasing

The package is automatically released each time a tag is created, so to release just create a tag such as `sdp-js/v1.23.6` and push that tag. This automatically triggers NPM publish etc.
npm package: @overmise/use-local-storage
Description: React Hook to help with using localStorage
Author: benvilliere
Latest version: 1.0.4

# useLocalStorage(key, value)

> React Hook to help with using localStorage

[![NPM](https://img.shields.io/npm/v/use-local-storage.svg)](https://www.npmjs.com/package/use-local-storage) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Goal

Hook the localStorage browser API in React so that you can use it like you'd useState, while supporting all data types inculding automatic JSON encoding/decoding.

## Install

```bash
npm install --save @overmise/use-local-storage
```

## Usage

You should useLocalStorage() almost like you useState, the only difference is you must provide a key within which the data should be stored like so:

```jsx
const [username, setUsername] = useStorage('username', '')
```
From there on, you can use your state and it will automatically sync with localStorage:

```jsx
setUsername('Bob')
```
To unset values, simply null out by invoking the same method with a blank string:

```jsx
setUsername('')
```

## Example

The following example component illustrates how this hooks works with objects, and how you could use it to store form data inside localStorage for later retrieval (this hook was extracted from a project that needed to do exactly this). 

```jsx
import React from 'react'

import { useLocalStorage } from '@overmise/use-local-storage'

const Form = () => {
    const [draft, setDraft] = useLocalStorage('draft', {
        title: 'An article about the meaning of life',
        body: 'Now I realize this was too ambitious and am gonna stop myself there.'
    })

    return (
        <form>
            <input value={draft.title} onChange={(event) => setDraft({ ...draft, title: event.target.value })} />
            <textarea value={draft.body} onChange={(event) => setDraft({ ...draft, body: event.target.value })} />
        </form>
    )
}
```

When you change values and reload the page, the values should have been persisted, hence what you typed should have been preserved and being displayed in the newly rendered page.   

## License

MIT © [benvilliere](https://github.com/benvilliere)
npm package: @overmise/use-validator
Description: Validation hook for React
Author: benvilliere
Latest version: 0.1.1

# @overmise/use-validator

> Validation hook for React

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

## Install

```bash
npm install --save @overmise/use-validator
```

## Usage

```jsx
import React, { useEffect, useState } from 'react'
import { useValidator, useError } from '@overmise/use-validator'

const SCHEMA = {
    username: '',
    email: '',
    password: ''
}

const Form = () => {
    const validator = useValidator()
    const [firstError, hasError] = useError()
    const [data, setData] = useState(SCHEMA)
    const [errors, setErrors] = useState(SCHEMA)

    const handleSubmit = (event) => {
        event.preventDefault()

        const [validates, errors] = validator(data, {
            username: ['required', 'min:3', 'max:255'],
            email: ['required', 'email'],
            password: ['required', 'min:8']
        })

        setErrors(errors)

        if (validates) {
            // Perform request...
            console.log(data)
        } else {
            console.error(errors)
        }
    }

    return (
        <form onSubmit={(event) => handleSubmit(event)}>
            <fieldset>
                <label htmlFor="username">Username</label>
                <input
                    id="username"
                    name="username"
                    value={data.username}
                    onChange={(event) => setData({ ...data, username: event.target.value })}
                    styles={hasError(errors.username) ? { border: '1px solid red' } : { border: '1px solid #ccc' }}
                />
                {hasError(errors.username) && <span>{firstError(errors.username)}</span>}
            </fieldset>
            <fieldset>
                <label htmlFor="email">Email</label>
                <input
                    id="email"
                    name="email"
                    type="email"
                    value={data.email}
                    onChange={(event) => setData({ ...data, email: event.target.value })}
                    styles={hasError(errors.email) ? { border: '1px solid red' } : { border: '1px solid #ccc' }}
                />
                {hasError(errors.email) && <span>{firstError(errors.email)}</span>}
            </fieldset>
            <fieldset>
                <label htmlFor="password">Password</label>
                <input
                    type="password"
                    value={data.password}
                    onChange={(event) => setData({ ...data, password: event.target.value })}
                    styles={hasError(errors.password) ? { border: '1px solid red' } : { border: '1px solid #ccc' }}
                />
                {hasError(errors.password) && <span>{firstError(errors.password)}</span>}
            </fieldset>
        </form>
    )
}
```

## License

MIT © [Ben Villiere](https://github.com/benvilliere)
npm package: @overreact/engine
Description: Browser-based game engine, built on top of React.
Author: Craig Smith
Latest version: 2.1.0

# @overreact/engine

Overreact is a browser-based game engine, built on top of React, that renders to the DOM, and is styled with plain old CSS!

⚛️ Built on top of React, allowing you to utilize the same patterns and architecture you're familiar with.

⚡️ Share components with the rest of your app. Use your design system components in your game!

💅 Style your game elements using regular CSS. Or bring in your favorite CSS frameworks, such as tailwind.

Full docs and getting started guide at: https://overreactjs.github.io/
npm package: @overrideveloper/adjectiver
Description: An npm package that returns adjectives that begin with input letter of first letter of input.
Author: Overrideveloper
Latest version: 1.1.1

# @overrideveloper/adjectiver

[![npm version](https://badge.fury.io/js/%40overrideveloper%2Fadjectiver.svg)](https://badge.fury.io/js/%40overrideveloper%2Fadjectiver)

Returns adjectives that begin with first character of input.

## Install

```
$ npm install @overrideveloper/adjectiver --save
```

## Usage

```js
const adjectiver = require("@overrideveloper/adjectiver");

adjectiver.getAdjectives(3, "Tolu");
//=> [ 'Textual', 'Tensionless', 'Textile' ]

adjectiver.getAdjective("Korede");
//=> "Kindest"

adjectiver.getAdjectives("Korede", 3);
//=> Uncaught TypeError: parameter 'count' should be a number

adjectiver.getAdjectives(3, 5);
//=> Uncaught TypeError: parameter 'noun' should be a string

adjectiver.getAdjective(3);
//=> Uncaught TypeError: parameter 'noun' should be a string
```

##### N.B: These adjectives have not been filtered.
npm package: @overscore-team/overscore
Author: overscore-team
Latest version: 0.1.10

# overscore



前端工具库

> 以往接触的多个前端项目中，总是重复性的使用各种公共方法，我们可以根据日常业务开发中的这一需求，针对性的将一部分公共业务方法整合成前端工具库，以减少重复开发的成本，提高开发效率。



## 安装使用

1. 因为当前库使用 umd 规范打包构建，可以访问 [unpkg](https://unpkg.com/@overscore-team/overscore) 下载最新版本，直接在 html 文档中引用

```html
<script src="overscore.min.js"></script>
<script>
	var deepClone = overscore.deepClone
</script>
```



2. 使用 npm 安装

```shell
npm i @overscore-team/overscore@latest -S-D
```

在项目中使用

```js
const { deepClone } = require('@overscore-team/overscore')
```





## API

### Object

- deepClone 深拷贝
- mergeObject 合并对象
- mergeArray 合并数组


### fn

- throttle 节流
- debounce 防抖
npm package: @overscroll/overzine
Description: Collection of components for a online zine 
Author: Tobias Block
Latest version: 0.0.1

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.<br>
You will also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.<br>
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.<br>
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.<br>
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `npm run eject`

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**

If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).
npm package: @overseerai/sdk
Description: Node.js SDK for Overseer AI content safety
Author: Overseer AI
Latest version: 1.0.5

# @overseerai/sdk

Node.js SDK for Overseer AI content safety validation.

## Installation

```bash
npm install @overseerai/sdk
```

## Usage

```typescript
import { Overseer } from '@overseerai/sdk';

// Initialize the SDK
const overseer = new Overseer({
  apiKey: 'your-api-key',
  // Optional: Override the base URL if needed
  baseUrl: 'https://api.overseer.ai'
});

// Validate content
try {
  const result = await overseer.validate('Hello! How can I help you today?');
  if (result.isAllowed) {
    console.log('Content is safe:', result.text);
  } else {
    console.log('Content was rejected:', result.text);
    console.log('Reason:', result.details?.reason);
  }
} catch (error) {
  console.error('Error validating content:', error);
}
```

## API Reference

### `new Overseer(options)`

Creates a new instance of the Overseer SDK.

#### Options

- `apiKey` (required): Your Overseer AI API key
- `baseUrl` (optional): Override the default API base URL

### `validate(text: string): Promise<ValidationResult>`

Validates the given text content against Overseer AI's safety policies.

#### Returns

A promise that resolves to a `ValidationResult` object:

```typescript
interface ValidationResult {
  isAllowed: boolean;
  text: string;
  details?: {
    reason: string | null;
  };
}
```

## License

MIT
npm package: @overseers/black-ice
Description: [![NPM](https://img.shields.io/npm/v/black_ice.svg)](https://www.npmjs.com/package/@overseers/black-ice) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
Author: Overseers
Latest version: 0.0.3

# black-ice component library

[![NPM](https://img.shields.io/npm/v/black_ice.svg)](https://www.npmjs.com/package/@overseers/black-ice) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
npm package: @oversightstudio/blur-data-urls
Description: Automatically assign URLs for blur data to media collections in Payload.
Author: oversightstudio
Latest version: 1.0.4

# Blur Data URLs Payload Plugin

## Install

`pnpm add @oversightstudio/blur-data-urls sharp`

## About
This plugin automatically assigns URLs for blur data to media collections in Payload. It will automatically add the ``blurDataUrl`` field to the collections you provide and automatically generate and assign a blurDataUrl to the field whenever a media item is uploaded.

## Payload Setup 
```tsx
import { buildConfig } from 'payload'
import { blurDataUrlsPlugin } from '@oversightstudio/blur-data-urls'
import { Media } from './collections/Media'

export default buildConfig({
  plugins: [
    blurDataUrlsPlugin({
        enabled: true,
        collections: [Media],
        // Blur data URLs Settings (Optional) 
        blurOptions: {
            blur: 18,
            width: 32,
            height: "auto",
        }
    }),
  ],
})
```

## Options 

| Option            | Type                             | Default  | Description |
|------------------|--------------------------------|----------|-------------|
| `enabled`       | `boolean`                      | `true`   | Whether the plugin is enabled. |
| `collections`   | `PluginCollectionConfig[]`     | **Required** | A list of collections where `blurDataUrl` should be implemented. Should typically be the main media collection. |
| `blurOptions`   | `object`                       | *Optional* | Additional settings for generating blurDataUrls. |

### `blurOptions` Settings

| Option  | Type              | Default | Description |
|---------|-----------------|---------|-------------|
| `width`  | `number`        | `32`    | Width of the blurDataUrl. |
| `height` | `number` \| `'auto'` | `'auto'` | Height of the blurDataUrl. If `'auto'`, it maintains the image’s aspect ratio. |
| `blur`   | `number`        | `18`    | The amount of blur applied to the generated blurDataUrl. |

## Usage with next/image
```tsx
import Image from 'next/image'

<Image
// Your other image settings
placeholder="blur"
blurDataURL={image.blurDataUrl ?? undefined}
/>
```

## Generating BlurData URLs for Existing Images
If you already have images in your media collection, you might want to generate blurDataUrls for them.

To do so:
1. Place [this script](/scripts/blurDataUrlsMigrationScript.ts) on your `./src/scripts/ directory`.
2. Make sure you have `tsx` installed either globally or on your project. You can uninstall it after running the script.
3. Modify the plugin configuration **on the script**. You'll be able to set the blur options + which collections to migrate. 
4. Run the script: ``tsx ./src/scripts/blurDataUrlsMigrationScript.ts``
5. Let it cook.

## Credits
* Shoutout to [Paul](https://github.com/paulpopus) for being a real one.
npm package: @overspeed/oas3-remote-refs
Description: Convert remote OpenAPI3 spec refs to local.
Author: Kevin Gilbert
Latest version: 0.0.2

# OpenAPI 3 Remote Ref Merge Tool

[![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard)

## Usage
```javascript
const apiMergeRemoteRefs = require('@overspeed/oas3-remote-refs');

apiMergeRemoteRefs(apiSpecUri)
  .then((apiSpec) => {
    // api spec with all local refs
    console.log(apiSpec);
  })
  .catch((err) => {
    // make sure to track errors
    console.error(err);
  });
```
npm package: @overstart/wslpath-fish
Description: wslpath-fish 是一个 Fish shell 插件，用于在 Windows 路径和 WSL 路径之间快速转换
Author: overstart
Latest version: 1.0.0

# WSL/Windows 路径转换 Fish 插件

快速在 Windows 路径和 WSL 路径之间转换的 Fish shell 插件。

## 功能

- `to_wsl` - Windows 路径转 WSL 路径
- `to_windows` - WSL 路径转 Windows 路径
- `convert_path` - 自动检测并转换路径

## 安装

### 使用 Fisher（推荐）

如果你已经安装了 [Fisher](https://github.com/jorgebucaran/fisher)：

```bash
fisher install overstart/wslpath-fish
```

### 手动安装

1. 创建 fish functions 目录（如果不存在）：

```bash
mkdir -p ~/.config/fish/functions
```

2. 复制函数文件：

```bash
cp functions/to_wsl.fish ~/.config/fish/functions/
cp functions/to_windows.fish ~/.config/fish/functions/
cp functions/convert_path.fish ~/.config/fish/functions/
```

3. 重新加载 fish 配置或重启终端：

```bash
source ~/.config/fish/config.fish
```

## 使用方法

### to_wsl

将 Windows 路径转换为 WSL 路径：

```fish
to_wsl "C:\\Users\\test\\file.txt"
# 输出: /mnt/c/Users/test/file.txt

to_wsl "D:\\project\\code"
# 输出: /mnt/d/project/code
```

### to_windows

将 WSL 路径转换为 Windows 路径：

```fish
# 转换 /mnt/ 驱动器路径
to_windows "/mnt/c/Users/test/file.txt"
# 输出: C:\Users\test\file.txt

to_windows "/mnt/d/project/code"
# 输出: D:\project\code

# 转换 WSL 内部路径为 WSL 网络路径
to_windows "/etc/config/"
# 输出: \\wsl.localhost\archlinux\etc\config\

to_windows "/home/user/documents"
# 输出: \\wsl.localhost\archlinux\home\user\documents
```

### convert_path

自动检测路径格式并转换：

```fish
convert_path "C:\\test"
# 输出: /mnt/c/test

convert_path "/mnt/c/test"
# 输出: C:\test

convert_path "/etc/config/"
# 输出: \\wsl.localhost\archlinux\etc\config\
```

## 路径格式

**Windows 路径格式：**
- `C:\path\to\file`
- `D:\project\code`

**WSL 路径格式：**
- `/mnt/c/path/to/file` - Windows 驱动器映射路径
- `/mnt/d/project/code`
- `/etc/config/` - WSL 内部路径

**WSL 网络路径格式：**
- `\\wsl.localhost\<发行版名称>\path\to\file`
- 用于从 Windows 访问 WSL 文件系统

## WSL 网络路径格式说明

`to_windows` 函数支持将 WSL 内部路径（如 `/etc/config/`）转换为 Windows WSL 网络路径格式。

**格式**：`\\wsl.localhost\<发行版名称>\<路径>`

**示例**：
```fish
to_windows "/etc/config/"
# 输出: \\wsl.localhost\archlinux\etc\config\

to_windows "/home/user/documents"
# 输出: \\wsl.localhost\archlinux\home\user\documents
```

**发行版名称获取**：
- 函数从 `WSL_DISTRO_NAME` 环境变量获取当前 WSL 发行版名称
- 如果环境变量未设置，函数会返回错误信息
- 常见发行版名称：`Ubuntu`、`Debian`、`ArchLinux`、`archlinux` 等

**使用场景**：
- 在 Windows 资源管理器中访问 WSL 文件系统
- 在 Windows 应用程序中访问 WSL 文件
- 在 Windows 命令提示符或 PowerShell 中访问 WSL 文件

## 注意事项

- 支持的驱动器盘符：A-Z
- 自动处理路径分隔符转换（`\` ↔ `/`）
- 如果输入路径格式无法识别，函数会返回错误信息
- `to_windows` 函数需要 `WSL_DISTRO_NAME` 环境变量来转换 WSL 内部路径
- 不支持 Windows 网络路径（如 `\\server\share`）

## CLI 技能集成

本项目提供了通用的 CLI 技能支持，可在多个支持技能系统的 CLI 工具中使用，包括：
- [iFlow CLI](https://github.com/iflow-ai/iflow-cli)
- Codex
- Claude CLI
- Gemini CLI

### 安装技能

使用 npx 快速安装技能：

```bash
npx skills install overstart/wslpath-fish
```

安装完成后，技能会自动集成到支持的 CLI 工具中。

### 在 CLI 中使用

安装后，你可以在 CLI 对话中直接请求使用此技能：

```
请使用 wslpath-fish 技能将 "C:\Users\username\Documents\file.txt" 转换为 WSL 路径
```

CLI 工具会自动调用技能并执行路径转换，无需手动运行转换命令。

### 技能特性

- **自动识别**：CLI 工具会根据任务描述自动识别何时需要使用此技能
- **路径转换**：支持 A-Z 驱动器盘符的完整转换
- **格式处理**：自动转换路径分隔符和驱动器大小写
- **错误处理**：无效路径会返回清晰的错误信息
npm package: @oversteer/automation
Description: Client SDK for Oversteer web-automation backend.
Author: Oversteer
Latest version: 1.0.0

# Oversteer Automation SDK

Lean TypeScript client for Oversteer web-automation backend. Transport + ergonomics only.

> **🎉 NEW:** We've overhauled the runs framework! The new API uses a browser-use-style pattern with `Run` instances and async methods. See [MIGRATION_GUIDE.md](./MIGRATION_GUIDE.md) for complete details.

## Install

```bash
npm install @oversteer/automation
```

## Quick Start

```ts
import { createClient } from '@oversteer/automation';

const client = createClient({
  apiKey: process.env.OVERSTEER_API_KEY!,
  // baseUrl defaults to 'https://api.oversteer.com'
  // Override if needed: baseUrl: 'https://staging.oversteer.com'
});

// Create and run a flow
const run = await client.runs.createRun({
  flowId: 'flow_123',
  initialVars: { key: 'value' },
});

// Wait for completion and get results
const result = await run.complete();
console.log('Results:', result.results);
```

## Usage Patterns

### 1. Simple Completion (Wait for Results)

```ts
const run = await client.runs.createRun({ flowId: 'flow_123' });
const result = await run.complete();

if (result.status === 'succeeded') {
  console.log('✓ Success:', result.results);
}
```

### 2. Stream Progress Updates

```ts
const run = await client.runs.createRun({ flowId: 'flow_123' });

// Live step updates
for await (const step of run.stream()) {
  console.log(`[${step.index}] ${step.type}: ${step.status}`);
}

// Get final results after streaming
const final = await run.get();
console.log('Results:', final.results);
```

### 3. Watch All Events

```ts
const run = await client.runs.createRun({ flowId: 'flow_123' });

for await (const event of run.watch()) {
  switch (event.event) {
    case 'step_progress':
      console.log('Step:', event.step);
      break;
    case 'completed':
      console.log('Done:', event.results);
      break;
  }
}
```

### 4. Create Flows

```ts
// Create from prompt
await client.flows.createFromPrompt({
  url: 'https://example.com',
  prompt: 'Extract all product prices',
});

// Create from steps
await client.flows.create({
  url: 'https://example.com',
  steps: ['1. Click the search button', '2. Type "query" into search', '3. Extract the results'],
});
```

## API

### Flows

- `client.flows.create({ url, name?, steps, options? })` - Create a flow from steps
- `client.flows.createFromPrompt({ url, prompt, name?, options? })` - Create a flow from a prompt

### Runs

- `client.runs.createRun({ flowId, initialVars?, authorMode?, schema? })` - Create a new run and return a Run instance

### Run Methods

- `run.complete()` - Wait for the run to complete and return results
- `run.stream()` - Stream step updates as they happen
- `run.watch()` - Stream all events (steps, artifacts, completion, etc.)
- `run.get()` - Get the current status and details of the run
- `run.cancel()` - Cancel the run
- `run.getRunId()` - Get the run ID

## Development

- `npm run build` – build ESM+CJS with types
- `npm test` – run tests
- `npm run lint` – lint
- `npm run format` – format
npm package: @overtrue/easywechat-theme
Description: Theme for easywechat.com based on @vuejs/theme
Author: overtrue
Latest version: 1.0.6

# EasyWeChat Theme

This is the [VitePress](https://vitepress.vuejs.org/) theme for the EasyWeChat documentation at `easywechat.com`.

## Development Setup

This repo can be developed on its own since it is a self-contained VitePress theme. Make sure to use [pnpm](https://pnpm.io/) as the package manager when installing deps. A demo app is available in `/demo` and can be run with `npm run dev`:

```bash
$ pnpm install
$ npm run dev
```

## Developing with Real Content

To work on this theme in the context of the `vuejs.org` website requires cloning both repos and linking the theme into the docs repo:

1. Clone repositories:

   ```bash
   git clone git@github.com:vuejs/docs.git
   git clone git@github.com:vuejs/theme.git
   ```

2. Link theme into docs repo:

   ```bash
   # In ./theme
   pnpm install
   # Make @vue/theme available for global linking
   pnpm link --global

   # in ./docs
   pnpm install
   # Link teme
   pnpm link --global @vue/theme
   ```

3. Start VitePress server:

   ```bash
   # in ./docs
   pnpm run dev
   ```

### Available Scripts

Here is the list of available scripts that can be used during the development.

```bash
# Boot local dev server.
$ npm run dev

# Build demo, then serve locally. This is for testing
# production build in the local environment.
$ npm run serve

# Run lint via Prettier.
$ npm run lint

# Run type check via tsc.
$ npm run type
```

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2021-present Evan You
npm package: @overtrue/pivot
Description: Pivot - A modern React UI library for OpenAPI specifications
Latest version: 1.0.2

# Pivot

A modern React component library for visualizing and interacting with OpenAPI specifications.

## Features

- 🚀 Full support for OpenAPI 3.x specifications
- 🎨 Beautiful and responsive UI components
- ⚡️ Interactive "Try it out" functionality
- 📦 Lightweight and tree-shakable

## Installation

```bash
npm install @overtrue/pivot
# or
yarn add @overtrue/pivot
```

## Basic Usage

```tsx
import { OpenApiLayout } from '@overtrue/pivot';
import spec from './openapi-spec.json';

function App() {
  return <OpenApiLayout spec={spec} />;
}
```

## Components

### OpenApiLayout

The main layout component that renders the complete OpenAPI documentation.

### TryItOutPanel

Standalone component for making API requests:

```tsx
import { TryItOutPanel } from '@overtrue/pivot';

function TestPage() {
  return (
    <TryItOutPanel
      operation={operationObject}
      method="post"
      path="/api/users"
    />
  );
}
```

## Development

```bash
# Install dependencies
npm install

# Build the library
npm run build
```

## License

MIT
npm package: @overtrue/responsive-preview-container
Description: A simple and elegant responsive prewview container
Author: overtrue
Latest version: 1.0.1

<h1 align="center">Vue Avatar Cropper</h1>

<p align="center"> :girl: A simple and elegant responsive prewview container.</p>

## Installing

```shell
$ npm i @overtrue/responsive-preview-container
```

## Usage

```vue
<template>
  <responsive-preview-container>
    <p>Hello world!</p>
  </responsive-preview-container>
</template>

<script>
import ResponsivePreviewContainer from '@overtrue/responsive-preview-container'

export default {
  components: { ResponsivePreviewContainer },
}
</script>
```

## License

MIT