open-index/open-npm huggingface dataset:
npm package: @kettek/mediastream-gifrecorder
Description: GIF MediaRecorder for MediaStreams
Author: Ketchetwahmeegwun T. Southall
Latest version: 1.1.2

# MediaStream-GifRecorder
This library provides an implementation of the [MediaRecorder](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder) interface for recording MediaStreams, such as those from a webcam or desktop capture, to GIFs.

## Basic Usage
The following will record a 5 seconds GIF at 5 frames per second.
```
navigator.mediaDevices.getUserMedia({ video: true })
.then((stream) => {
  document.getElementById('preview-video').srcObject = stream

  let recorder = new GifRecorder(stream, {
    videoFramesPerSecond: 5,
    videoQuality: 10,
    videoDithering: false,

    // optional source and destination rectangles
    sx: 200,
    sy: 50,
    swidth: 1920,
    sheight: 1080,
    dx: 0,
    dy: 0,
    dwidth: 1080,
    dheight: 720,
  })

  recorder.addEventListener('dataavailable', (e) => {
    document.getElementById('preview-gif').src = URL.createObjectURL(e.data)
  })

  recorder.start()

  setTimeout(() => {
    recorder.stop()
  }, 5000)
})
.catch((err) => {
  console.log(err)
}
```
npm package: @kettil/commitlint-config
Description: The library contains the commitlint configuration
Author: Kjell Dießel
Latest version: 2.0.2

# commitlint-config

![npm](https://img.shields.io/npm/v/@kettil/commitlint-config)
![David](https://img.shields.io/david/kettil/commitlint-config)
![Release](https://github.com/kettil/commitlint-config/workflows/Release/badge.svg)
![GitHub](https://img.shields.io/github/license/kettil/commitlint-config)

The library contains the commitlint configuration.

## Installation

```bash
npm install -D @commitlint/config-conventional @commitlint/cli @kettil/commitlint-config
```

## Quick Start

To use this configuration, create the file `.commitlintrc.json` with the following content:

```json
{
  "extends": ["@kettil"]
}
```

You can find the list of rules in the [commitlint project](https://github.com/conventional-changelog/commitlint/blob/master/docs/reference-rules.md).
npm package: @kettil/npm-package-json-lint-config
Description: The library is a collection of npm-package-json-lint rules
Latest version: 1.1.0

# npm-package-json-lint-config rule collection

[![npm](https://img.shields.io/npm/v/@kettil/npm-package-json-lint-config)](https://www.npmjs.com/package/@kettil/npm-package-json-lint-config)

The library is a collection of npm-package-json-lint-config rules.
The rules can be viewed in the [npm-package-json-lint documentation](https://npmpackagejsonlint.org/docs/rules).

## Installation

```bash
npm install -D @kettil/npm-package-json-lint-config
```

## Quick Start

If you want to use the rule collection, create the file `.npmpackagejsonlintrc.json` with the following content:

```json
{
  "extends": "@kettil/npm-package-json-lint-config" // default - for a library
}
```

or an alternative rule collections:

- `@kettil/npm-package-json-lint-config/app` for an application
- `@kettil/npm-package-json-lint-config/cli` for a cli
- `@kettil/npm-package-json-lint-config/lib` for a library
- `@kettil/npm-package-json-lint-config/monorepo` for a monorepo
npm package: @kettil/semantic-release-config
Description: The library contains the semantic-release configuration.
Latest version: 2.0.4

# semantic-release-config

[![npm](https://img.shields.io/npm/v/@kettil/semantic-release-config)](https://www.npmjs.com/package/@kettil/semantic-release-config)

The library contains the semantic-release configuration.

## Installation

```bash
npm install -D eslint @kettil/semantic-release-config
```

## Quick Start

To use this configuration, create the file `.releaserc.json` with the following content:

```json
{
  "extends": "@kettil/semantic-release-config"
}
```
npm package: @kettil/tool-lib
Description: A collection from differents helper functions and types
Author: Kjell Dießel
Latest version: 3.3.2

# Tool collection

![npm](https://img.shields.io/npm/v/@kettil/tool-lib)
![David](https://img.shields.io/david/kettil/tool-lib)
![Release](https://github.com/kettil/tool-lib/workflows/Release/badge.svg)
![GitHub](https://img.shields.io/github/license/kettil/tool-lib)

A collection from differents helper functions and types

## Installation

```bash
npm install @kettil/tool-lib
```
npm package: @kettil/tools
Description: A collection from differents helper functions
Latest version: 4.1.0

# Tool collection

[![npm](https://img.shields.io/npm/v/@kettil/tools)](https://www.npmjs.com/package/@kettil/tools)

A collection from differents helper functions

## Installation

```bash
npm install @kettil/tools
```

## Documentation

- [String functions](./docs/string.md)
npm package: @kettle4ot/tailwind-class-sort
Description: Tailwind CSS 클래스 자동 정렬 (커스텀 순서 설정 지원)
Latest version: 1.0.2

# tailwind-class-sort

Tailwind CSS 클래스 문자열을 지정한 순서로 정렬하는 CLI 도구입니다.  
프로젝트 루트에 `tailwind-class-order.config.js` 를 두면 해당 설정을 사용하고, 없으면 내장 기본 순서를 사용합니다.

## 설치

```bash
npm install -D @kettle4ot/tailwind-class-sort
```

또는 매번 실행만 할 경우 (배포 후):

```bash
npx @kettle4ot/tailwind-class-sort --dir src
```

## 사용법

```bash
# 문자열 정렬 결과만 출력
npx @kettle4ot/tailwind-class-sort "flex p-4 bg-white"

# 디렉터리 내 파일들의 className / cn() 정렬 (기본: src)
npx @kettle4ot/tailwind-class-sort --dir src
npx @kettle4ot/tailwind-class-sort --dir app

# 특정 파일만 정렬
npx @kettle4ot/tailwind-class-sort --file src/App.tsx
```

## 커스텀 순서

프로젝트 루트에 `tailwind-class-order.config.js` 를 두고 `CLASS_CATEGORY_ORDER`, `MODIFIER_ORDER` 를 export 하면 이 설정이 적용됩니다.  
형식은 이 저장소의 `default-config.js` 를 참고하면 됩니다.

## 라이선스

MIT
npm package: @keumi/commitlint-config
Description: Commitlint shareable configuration
Author: zhongfake
Latest version: 0.1.0

# @keumi/commitlint-config

## 安装

除了本包，你需要同时安装 [@commitlint/cli](https://www.npmjs.com/package/@commitlint/cli)：

```bash
npm install @keumi/commitlint-config @commitlint/cli --save-dev
```

## 使用

在你的 `commitlint.config.js` 中继承本包:

```js
module.exports = {
  extends: ['@keumi/commitlint-config'],
};
```
npm package: @keumi/dep-check
Description: dependency check
Author: zhongfake
Latest version: 0.1.2

# @keumi/dep-check ![npm latest version](https://img.shields.io/npm/v/@keumi/dep-check/latest.svg)

## Install

```bash
npm i @keumi/dep-check -D
```

## 示例

package.json

```json
{
 ...
  "scripts": {
    "check": "dep-check"
  },
  ...,
  "dep-check": {
    "enable": true,
    "check-list": [
      "@keumi/utils"
    ],
    "check-action": "onlyWarn"
  }
}
```

## 配置参数

| 属性          |            含义 |  默认|  
| :------------ | --------------: |-------:|
| enable   |  是否开启 | true |
| check-list    | 包检查列表(只更新次版本) | []|
| latest-list  | 包检查列表(更新到最新版本) | []|
| check-action | 检查行为(autoFix\|onlyWran) |autoFix |
npm package: @keupoz/colorwheel2
Description: Simple HSV color wheel library
Author: keupoz
Latest version: 1.2.1

# ColorWheel 2
Demo: https://keupoz.github.io/ColorWheel2/

Touch-friendly HSV color picker. Uses one `canvas` tag and has it's own color manager.

## Usage
ColorWheel2 is a UMD module, so you can include it via script tag or require statement. Also it can be imported as an ES module (use `ColorWheel2.es.js`)

Install via npm:
```bash
npm i @keupoz/colorwheel2
```

```html
<script src="ColorWheel2.min.js"></script>
```

```javascript
import ColorWheel from '@keupoz/colorwheel2';
// or
const ColorWheel = require('./ColorWheel2.js');
let picker = new ColorWheel('#output', 256, function (eventCode, eventName) {
  // Do something here when color is changed
});
```

## API

### Constructor

```javascript
new ColorWheel(canvas, size, callback);
```

- **canvas** - CSS selector, `HTMLCanvasElement` or `CanvasRenderingContext2D`. Set to null to create new instances automatically
- **size** - output canvas size in pixels
- **callback** - called after each color change with arguments `eventCode` and `eventName`

#### Event codes
- `0`: interaction started
- `1`: interaction continued
- `2`: interaction ended
- `3`: updated picker after changing color programmatically

#### Event names
- `rotateWheel`: changed hue
- `moveCursor`: moved cursor
- `update`: updated picker. Event code is always `3`

### Properties

#### ColorWheel.version
Static property

```javascript
ColorWheel.version; // '1.0.0'
```

#### ColorWheel.domElement
Output canvas element

```javascript
document.body.appendChild(picker.domElement);
picker.canvas.classList.add('picker');
```

#### ColorWheel.color
Color instance

**Properties**:
- `HSV`, `HSL`, `RGB` - arrays. They aren't replaced while changing the color, so you can reuse them
- `hex`, `num`
- `css` - css string in HSL model

**Methods**:
- `isDark` - can be used to make text readable. Returns `true` if text color should be white
- `getName` - returns CSS name for current color if it exists, otherwise returns hex code

#### ColorWheel.setSize
Sets output canvas size

```javascript
picker.setSize(300);
```

#### ColorWheel.setColor
Removed in 1.2.0. Use set methods from color instance and update picker via `picker.update()`. See `dist/ColorWheel2.d.ts` for color methods

```javascript
picker.setHSV(180,1,1);
picker.update();
```