open-index/open-npm huggingface dataset:
npm package: @shwilliam/basesheet
Description: A better CSS foundation
Author: William L
Latest version: 0.2.0

# basesheet

> A better CSS foundation

## Overview

- Lightweight reset (based on [Eric Meyer's CSS reset v2](https://meyerweb.com/eric/tools/css/reset/))
- Helpful utility classes
- Disables animations based on `prefers-reduced-motion`
- Dispatches single taps without delay
- Color, font, layout, and sizing custom variables

## Usage

### CDN

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/@shwilliam/basesheet@latest/basesheet.css"
/>
```

### NPM package

- Add this package as a dependency (`npm i @shwilliam/basesheet`)
- Import it in your JavaScript file

```js
import '@shwilliam/basesheet'
```

## FAQ

### What's up with these long class names?

This stylesheet loosely follows the [BEM conventions](http://getbem.com/introduction/) with several exceptions.

1. Modifier classes can be used on their own
2. Classes prefixed with a hyphen (eg. `-success`) modify a style and should **not** be used on their own

### This font size is gross; how do I change it?

```css
body {
  font-size: 13px;
}
```

## Contributing

This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the [issues](https://github.com/shwilliam/basesheet/issues). If you wish to work on this project:

1. Fork [this project](https://github.com/shwilliam/basesheet)
2. Create a branch (`git checkout -b new-branch`)
3. Commit your changes (`git commit -am 'add new feature'`)
4. Push to the branch (`git push origin new-branch`)
5. [Submit a pull request!](https://github.com/shwilliam/basesheet/pull/new/master)
npm package: @shwilliam/lorem-cli
Description: Generate & copy 'lorem ipsum' text from your command line
Author: William L
Latest version: 0.1.0

# @shwilliam/lorem-cli

[![Version](https://img.shields.io/npm/v/@shwilliam/lorem-cli.svg)](https://npmjs.org/package/@shwilliam/lorem-cli)
[![Downloads/week](https://img.shields.io/npm/dw/@shwilliam/lorem-cli.svg)](https://npmjs.org/package/@shwilliam/lorem-cli)
[![License](https://img.shields.io/npm/l/@shwilliam/lorem-cli.svg)](https://github.com/shwilliam/lorem-cli/blob/master/package.json)

Generate & copy 'lorem ipsum' text from your command line

- [Installation](#installation)
- [Usage](#usage)
- [Contributing](#contributing)

# Installation

```sh-session
$ npm install -g @shwilliam/lorem-cli
```

# Usage

## `lorem`

```sh-session
USAGE
  $ lorem [PARAGRAPHS]

EXAMPLE
  $ lorem 2
```

## Version

```sh-session
USAGE
  $ lorem (-v|--version|version)
```

## Help

```sh-session
USAGE
  $ lorem --help
```

# Contributing

This project is open to and encourages contributions! Feel free to discuss any
bug fixes/features in the [issues](https://github.com/shwilliam/lorem-cli/issues).
If you wish to work on this project:

1. Fork [this project](https://github.com/shwilliam/lorem-cli)
2. Create a branch (`git checkout -b new-branch`)
3. Commit your changes (`git commit -am 'add new feature'`)
4. Push to the branch (`git push origin new-branch`)
5. [Submit a pull request!](https://github.com/shwilliam/lorem-cli/pull/new/master)
npm package: @shwilliam/react-css-var
Description: Custom hook to interface with CSS custom properties
Author: William L
Latest version: 0.1.0

# React useCSSVar (--\*)

> A tiny hook to interface with CSS custom properties

## Installation

```shell
npm i @shwilliam/react-use-css-var
```

## Usage

```jsx
import React, {useState} from 'react'
import {useCssVar} from './react-use-css-var'

const App = () => {
  const [get, set] = useCssVar('--color-bg')

  return (
    <main style={{backgroundColor: '--color-bg'}}>
      <p>Current bg: {get()}</p>

      <button onClick={() => set('blue')}>Blue</button>
      <button onClick={() => set('red')}>Red</button>
    </main>
  )
}
```

## Development

To start local development, simply install npm dependencies (`npm i`) and run
`npm run dev` to watch ts files in `src/`. Built files can be found in `dist/`.

## Demo

To run the demo, ensure you have run the build script and have a `dist` dir in
your project root. Then run `npm run demo:setup` to copy these to the demo.
Navigate to the demo and install its dependencies (`cd demo && npm i`). You can
now start the demo app locally by running `npm start`.

## Contributing

This project is open to and encourages contributions! Feel free to discuss any
bug fixes/features in the [issues](https://github.com/shwilliam/react-use-css-var/issues).
If you wish to work on this project:

1. Fork [this project](https://github.com/shwilliam/react-use-css-var)
2. Create a branch (`git checkout -b new-branch`)
3. Commit your changes (`git commit -am 'add new feature'`)
4. Push to the branch (`git push origin new-branch`)
5. [Submit a pull request!](https://github.com/shwilliam/react-use-css-var/pull/new/master)
npm package: @shwilliam/react-rubber-slider
Description: A springy React range input
Author: William L
Latest version: 0.1.4

# \<RubberSlider/\>

![Demo screengrab](https://user-images.githubusercontent.com/38357771/86651082-16ff8480-bf98-11ea-822a-74bf6323b8b7.gif)

## Installation

```shell
$ npm i @shwilliam/react-rubber-slider
$ npm i @reach/slider d3
```

## Usage

```jsx
import React, {useState} from 'react'
import RubberSlider from '@shwilliam/react-rubber-slider'
import '@shwilliam/react-rubber-slider/dist/styles.css'

export const App = () => {
  const [value, setValue] = useState(0.5)

  return <RubberSlider width={250} value={value} onChange={setValue} />
}
```

[![@shwilliam/react-rubber-slider demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/gifted-shannon-qed9g?fontsize=14&hidenavigation=1&theme=dark)

## Component API

| Prop         | Type     | Required | Default         |
| ------------ | -------- | -------- | --------------- |
| name         | string   | false    | undefined       |
| id           | string   | false    | 'rubber-slider' |
| value        | number   | false    | 0               |
| onChange     | function | false    | no-op           |
| width        | number   | false    | 200             |
| height       | number   | false    | 100             |
| max          | number   | false    | 100             |
| min          | number   | false    | 0               |
| step         | number   | false    | 1               |
| easeFunction | function | false    | d3.easeElastic  |
| easeDuration | number   | false    | 700             |
| onDragStart  | function | false    | no-op           |
| onDrag       | function | false    | no-op           |
| onDragEnd    | function | false    | no-op           |

## Styling

Override the default slider styles by targeting the following:

```css
.rubber-slider {
}
.rubber-slider-input {
}
.rubber-slider-pseudo-track {
}
.rubber-slider-pseudo-handle {
}
```

## Development

To start local development, simply install npm dependencies (`npm i`) and run `npm run build:watch` to watch ts files in `src/`. Built files can be found in `dist/`.

## Testing

To run existing tests locally, run the command `npm t`, or `npm run test:watch` for watch mode.

## Demo

To run the demo, ensure you have run the build script and have a `dist` dir in your project root. Then run `npm run demo:setup` to copy these to the demo and `npm run demo` to start it locally.

## Contributing

This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the [issues](https://github.com/shwilliam/react-rubber-slider/issues). If you wish to work on this project:

1. Fork [this project](https://github.com/shwilliam/react-rubber-slider)
2. Create a branch (`git checkout -b new-branch`)
3. Commit your changes (`git commit -am 'add new feature'`)
4. Push to the branch (`git push origin new-branch`)
5. [Submit a pull request!](https://github.com/shwilliam/react-rubber-slider/pull/new/master)
npm package: @shwilliam/react-use-css-var
Description: Custom hook to interface with CSS custom properties
Author: William L
Latest version: 0.1.0

# React useCssVar (--\*)

> A tiny hook to interface with CSS custom properties

## Installation

```shell
npm i @shwilliam/react-css-var
```

## Usage

```jsx
import React, {useState} from 'react'
import {useCssVar} from '@shwilliam/react-use-css-var'

const App = () => {
  const [get, set] = useCssVar('--color-bg')

  return (
    <main style={{backgroundColor: 'var(--color-bg)'}}>
      <p>Current bg: {get()}</p>

      <button onClick={() => set('blue')}>Blue</button>
      <button onClick={() => set('red')}>Red</button>
    </main>
  )
}
```

## Development

To start local development, simply install npm dependencies (`npm i`) and run
`npm run dev` to watch ts files in `src/`. Built files can be found in `dist/`.

## Demo

To run the demo, ensure you have run the build script and have a `dist` dir in
your project root. Then run `npm run demo:setup` to copy these to the demo.
Navigate to the demo and install its dependencies (`cd demo && npm i`). You can
now start the demo app locally by running `npm start`.

## Contributing

This project is open to and encourages contributions! Feel free to discuss any
bug fixes/features in the [issues](https://github.com/shwilliam/react-use-css-var/issues).
If you wish to work on this project:

1. Fork [this project](https://github.com/shwilliam/react-use-css-var)
2. Create a branch (`git checkout -b new-branch`)
3. Commit your changes (`git commit -am 'add new feature'`)
4. Push to the branch (`git push origin new-branch`)
5. [Submit a pull request!](https://github.com/shwilliam/react-use-css-var/pull/new/master)
npm package: @shwilliam/react-use-form
Description: A tiny custom form hook with a small API
Author: William L
Latest version: 0.1.1

# React useForm

> A tiny custom form hook with a small API

## Installation

```shell
npm i @shwilliam/react-use-form
```

## Usage

The following example demonstrates how to use the `useForm` hook in a simple
form component. Refer to the [documentation](https://react-use-form.netlify.app/)
for more details.

```jsx
import React from 'react'
import {useForm} from '@shwilliam/react-use-form'
import {doSomethingFancy} from './fancy-things'

const validateName = value => (!value ? 'Name required' : null)

export const App = () => {
  const {props, values, errors, touched, submitting, valid} = useForm(
    {
      name: {initial: '', validate: validateName},
      favColor: {initial: 'blue', onFocus: doSomethingFancy},
    },
    {
      onSubmit: (values, onSuccess, onError) => {
        doSomethingWithValues(values)
          .then(onSuccess)
          .catch(() => onError('Something went wrong'))
      },
    },
  )

  return (
    <form {...props.form}>
      <label>
        Name:
        <input name="name" type="text" {...props.name} />
      </label>

      <label>
        Favorite color:
        <input name="favColor" type="text" {...props.favColor} />
      </label>

      <button type="submit" disabled={!valid}>
        Submit
      </button>
    </form>
  )
}
```

## Opinions

This hook has several opinions about using/building forms. Some of these align
closely with similar libraries such as [`Formik`](https://jaredpalmer.com/formik/)
or [`react-hook-form`](https://react-hook-form.com/), and some don't. Before you
choose to use this package in your project, ensure you agree with or have a
workaround for the following:

- Field validation runs on blur and only on input if field is invalid
- A field is considered touched when left (on blur)
- Each field can have a single error message at a time
- `onSubmit` should only be triggered if all fields are valid
- `onSubmit` handler passed to hook is called with form values
- All form-related values and handlers are accessed from one hook call per form

## Development

To start local development, simply install npm dependencies (`npm i`) and run
`npm run dev` to watch ts files in `src/`. Built files can be found in `dist/`.

## Demo

To run the demo, ensure you have run the build script and have a `dist` dir in
your project root. Then run `npm run demo:setup` to copy these to the demo.
Navigate to the demo and install its dependencies (`cd demo && npm i`). You can
now start the demo app locally by running `npm start`.
npm package: @shwilliam/react-use-hover-direction
Description: Custom hook to retrieve hover direction
Author: William L
Latest version: 0.1.0

# React useHoverDirection

![Example usage](https://user-images.githubusercontent.com/38357771/53678998-b326c680-3c94-11e9-8e4f-f65feee8651f.gif)

## Installation

```shell
npm i @shwilliam/react-use-hover-direction
```

## Usage

Import `useHoverDirection` and call it in your React component with a `ref` to
the target component. For example:

```jsx
import React, {useRef} from 'react'
import {useHoverDirection} from '@shwilliam/react-use-hover-direction'

export const App = () => {
  const boxRef = useRef()
  const mouseDirection = useHoverDirection(boxRef)

  return (
    <>
      <div ref={boxRef}>Hover me</div>

      <p>
        {mouseDirection.x} {mouseDirection.y}
      </p>
    </>
  )
}
```

## Development

To start local development, simply install npm dependencies (`npm i`) and run
`npm run dev` to watch ts files in `src/`. Built files can be found in `dist/`.

## Demo

To run the demo, ensure you have run the build script and have a `dist` dir in
your project root. Then run `npm run demo:setup` to copy these to the demo.
Navigate to the demo and install its dependencies (`cd demo && npm i`). You can
now start the demo app locally by running `npm start`.

## Contributing

This project is open to and encourages contributions! Feel free to discuss any
bug fixes/features in the [issues](https://github.com/shwilliam/react-use-hover-direction/issues).
If you wish to work on this project:

1. Fork [this project](https://github.com/shwilliam/react-use-hover-direction)
2. Create a branch (`git checkout -b new-branch`)
3. Commit your changes (`git commit -am 'add new feature'`)
4. Push to the branch (`git push origin new-branch`)
5. [Submit a pull request!](https://github.com/shwilliam/react-use-hover-direction/pull/new/master)
npm package: @shwilliam/todo
Description: A todo CLI
Author: William L
Latest version: 0.1.2

# @shwilliam/todo

A todo CLI

![Example output](https://user-images.githubusercontent.com/38357771/82704719-0767ee80-9c2b-11ea-88c5-c959bc718666.png)

[![oclif](https://img.shields.io/badge/cli-oclif-brightgreen.svg)](https://oclif.io)
[![Version](https://img.shields.io/npm/v/@shwilliam/todo.svg)](https://npmjs.org/package/@shwilliam/todo)
[![Downloads/week](https://img.shields.io/npm/dw/@shwilliam/todo.svg)](https://npmjs.org/package/@shwilliam/todo)
[![License](https://img.shields.io/npm/l/@shwilliam/todo.svg)](https://github.com/shwilliam/todo/blob/master/package.json)

<!-- toc -->
* [@shwilliam/todo](#shwilliamtodo)
* [Usage](#usage)
* [Commands](#commands)
<!-- tocstop -->

# Usage

<!-- usage -->
```sh-session
$ npm install -g @shwilliam/todo
$ t COMMAND
running command...
$ t (-v|--version|version)
@shwilliam/todo/0.1.1 darwin-x64 node-v14.1.0
$ t --help [COMMAND]
USAGE
  $ t COMMAND
...
```
<!-- usagestop -->

# Commands

<!-- commands -->
* [`t add TODO`](#t-add-todo)
* [`t autocomplete [SHELL]`](#t-autocomplete-shell)
* [`t done INDEX`](#t-done-index)
* [`t help [COMMAND]`](#t-help-command)
* [`t list [FILTER]`](#t-list-filter)
* [`t remove TARGET`](#t-remove-target)
* [`t todo [INDEX]`](#t-todo-index)

## `t add TODO`

add todo

```
USAGE
  $ t add TODO

ARGUMENTS
  TODO  todo text
```

_See code: [src/commands/add.ts](https://github.com/shwilliam/todo/blob/v0.1.1/src/commands/add.ts)_

## `t autocomplete [SHELL]`

display autocomplete installation instructions

```
USAGE
  $ t autocomplete [SHELL]

ARGUMENTS
  SHELL  shell type

OPTIONS
  -r, --refresh-cache  Refresh cache (ignores displaying instructions)

EXAMPLES
  $ t autocomplete
  $ t autocomplete bash
  $ t autocomplete zsh
  $ t autocomplete --refresh-cache
```

_See code: [@oclif/plugin-autocomplete](https://github.com/oclif/plugin-autocomplete/blob/v0.2.0/src/commands/autocomplete/index.ts)_

## `t done INDEX`

mark as done

```
USAGE
  $ t done INDEX

ARGUMENTS
  INDEX  index of target todo
```

_See code: [src/commands/done.ts](https://github.com/shwilliam/todo/blob/v0.1.1/src/commands/done.ts)_

## `t help [COMMAND]`

display help for t

```
USAGE
  $ t help [COMMAND]

ARGUMENTS
  COMMAND  command to show help for

OPTIONS
  --all  see all commands in CLI
```

_See code: [@oclif/plugin-help](https://github.com/oclif/plugin-help/blob/v3.0.1/src/commands/help.ts)_

## `t list [FILTER]`

list todos

```
USAGE
  $ t list [FILTER]

ARGUMENTS
  FILTER  (todo|done|important) filter output by status
```

_See code: [src/commands/list.ts](https://github.com/shwilliam/todo/blob/v0.1.1/src/commands/list.ts)_

## `t remove TARGET`

remove todo

```
USAGE
  $ t remove TARGET

ARGUMENTS
  TARGET  index of target todo or 'all'
```

_See code: [src/commands/remove.ts](https://github.com/shwilliam/todo/blob/v0.1.1/src/commands/remove.ts)_

## `t todo [INDEX]`

mark as incomplete

```
USAGE
  $ t todo [INDEX]

ARGUMENTS
  INDEX  index of target todo
```

_See code: [src/commands/todo.ts](https://github.com/shwilliam/todo/blob/v0.1.1/src/commands/todo.ts)_
<!-- commandsstop -->
npm package: @shxlab/env-inject
Description: CLI tool to inject environment variables into files at build time for Docker, CI/CD, and static frontend frameworks
Author: shxlab
Latest version: 0.1.1

# @shxlab/env-inject

A minimal and fast CLI tool to inject environment variables directly into files at build time — ideal for Docker, CI/CD, and static frontend frameworks.

## 🚀 Why use `env-inject`?

This utility helps in scenarios where:

- Environment variables aren't accessible during `ng build`, `vite build`, or `next build`
- You want to inject values at **build time**, not runtime
- You want to avoid bundling `process.env.*` into frontend code
- You want to ensure secrets never get committed into git
- You prefer simple, file-based environment injection instead of build system hacks

> Think of it as a lightweight, build-time `envsubst` for TypeScript, JSON, or any text-based config file.

---

## 📦 Installation

```bash
npm install -g @shxlab/env-inject
```

Or run without installing:

```bash
npx @shxlab/env-inject <file>
```

---

## 🔧 Usage

### ▶️ Inject environment variables

```bash
# Replaces all {{process.env.VAR_NAME}} with actual values from process.env
env-inject config.ts
```

### ♻️ Restore from backup

```bash
# Restores original file from .bak file
env-inject config.ts --restore
```

---

## 💡 Example

🔹 **Original file:** `config.ts`

```typescript
export const config = {
  apiUrl: '{{process.env.API_URL}}',
  port: {{process.env.PORT}},
  debug: {{process.env.DEBUG}}
};
```

🔹 **After running:**

```bash
API_URL=https://api.example.com PORT=3000 DEBUG=true \
npx @shxlab/env-inject config.ts
```

🔹 **Output:**

```typescript
export const config = {
  apiUrl: "https://api.example.com",
  port: 3000,
  debug: true,
};
```

---

## ✅ Features

- 🔁 Replaces `{{process.env.VAR}}` with actual values
- 🧾 Automatically creates `.bak` backups before changes
- 🔙 `--restore` flag restores files from `.bak`
- 💡 No external dependencies — pure Node.js + TypeScript
- 📦 Ready for use in Docker and CI pipelines
- 🚫 Prevents hardcoding env values in source control

---

## 🛠 Development

```bash
# Install dependencies
npm install

# Build with tsup
npm run build

# Watch changes during development
npm run dev

# Clean build output
npm run clean
```

---

## 📄 License

MIT — use it freely in your projects.
npm package: @shxlab/ui-utils
Description: Tiny utility functions for UI development: cn() for smart Tailwind CSS class merging and more
Author: shxlab
Latest version: 0.1.0

# @shxlab/ui-utils

Tiny utility functions for UI development. Currently includes smart Tailwind CSS class merging.

## Installation

```bash
npm install @shxlab/ui-utils
# or
pnpm add @shxlab/ui-utils
# or
yarn add @shxlab/ui-utils
```

## Usage

### `cn()` - Smart Tailwind CSS Class Merging

Combines the power of `clsx` for conditional classes with `tailwind-merge` for intelligent deduplication.

```typescript
import { cn } from "@shxlab/ui-utils";

// Basic usage
cn("px-2 py-1", "text-red-500");
// → 'px-2 py-1 text-red-500'

// Conditional classes
cn("px-2", isError && "text-red-500", isDisabled && "opacity-50");

// Smart deduplication (tailwind-merge)
cn("px-2 py-1", "px-4");
// → 'py-1 px-4' (px-2 is overridden by px-4)

// Complex example
cn(
  "base-class",
  {
    "text-red-500": hasError,
    "text-green-500": isSuccess,
  },
  size === "large" && "px-4 py-2",
  size === "small" && "px-2 py-1"
);
```

### Direct import

You can also import the function directly:

```typescript
import { cn } from "@shxlab/ui-utils/cn";
```

## API

### `cn(...inputs: ClassValue[]): string`

Merges class names intelligently.

**Parameters:**

- `inputs` - Any number of class values (strings, objects, arrays, etc.)

**Returns:**

- A merged and deduplicated class string

## Dependencies

- [`clsx`](https://github.com/lukeed/clsx) - For conditional class handling
- [`tailwind-merge`](https://github.com/dcastil/tailwind-merge) - For intelligent Tailwind CSS class deduplication
npm package: @shxnovel/rinne
Description: Rinne 是一个面向现代 Web 的高性能、纯叠加补间动画引擎。
Author: Aurora-creeper
Latest version: 0.1.0

# Rinne 0.1.0

Rinne 是一个面向现代 Web 的高性能、纯叠加补间动画引擎。

## 特色

Rinne 尝试采用一种基于物理偏移的累加模型，通过在内部维护统一的计算缓冲区，在高性能与复杂编排之间取得平衡。

- **增量叠加**: 将动画视为偏移信号进行实时累加，用数学手段处理并发动画间的逻辑冲突。
- **单次写回**: 无论有多少叠加信号，每帧仅对目标执行一次物理赋值。
- **确定性**: 提供稳定的 seek 功能，为交互式预览与动画调试提供可靠基础。

## 安装

```shell
npm install @shxnovel/rinne
```

## 子路径导出

Rinne 支持按需引入插件以优化包体积：

```typescript
import { rinne } from "@shxnovel/rinne";
import { ColorPlugin } from "@shxnovel/rinne/plugins/color";
import { VectorPlugin } from "@shxnovel/rinne/plugins/vector";
// ...
```

## 快速上手

### 实时动画

```typescript
// 1. 目标值动画：将属性平滑移动至 100。
// 动画结束后，物体将停留在 100。
rinne.to(target, { x: 100 }, { duration: 1000 });

// 2. 叠加 (Additive)：在当前位置上额外叠加 50 的位移信号。
// 结束后该信号自动归零，物体回到其基础位置 (E.g. 震动、呼吸感)。
rinne.to(target, { x: 50 }, { duration: 1000, additive: true });

// 3. 固定 (Commit)：配合 additive 使用，控制信号结束后是否永久合并进状态。
rinne.to(target, { x: 50 }, { duration: 1000, additive: true, commit: true });

// 4. 相对位移 (快捷语法)：在当前基础上增加 100，在结束时合并进状态。
rinne.to(target, { x: "+=100" }, { duration: 1000 });
```

### 演出编排 (Timeline)

Rinne 提供时间轴，用于编排复杂的序列逻辑与时间轴回溯。

```typescript
const tl = rinne.timeline({ repeat: -1, yoyo: true });

tl.to(mesh.position, { z: 5 }, { duration: 2000, ease: "expo.out" })

  .set(mesh, { visible: true }, 500)

  .addLabel("scene", 3000)

  .to(light, { intensity: 0 }, { duration: 500 }, "scene+=200")

  .call(() => console.log("event"), "scene");

tl.seek(1500);
```

### 回调

<!-- prettier-ignore -->
```typescript
rinne.to(target, { x: 100 }, {
    duration: 1000,
    onStart: () => console.log("Started"),
    onUpdate: (p) => console.log(`Progress: ${p}`), // p in [0, 1]
    onComplete: () => console.log("Completed"),
  },
);
```

## 性能表现

_50,000 活跃节点实测 (Node.js/V8):_

- **渲染循环**: ~1.3ms / 帧
- **物理写回**: ~1.2ms / 帧

## 许可证

MIT

## 局限

目前，timeline 的实验性 add 方法用于同步不同的时间轴，但
* 这会忽视子轴的 TimeScale 等，无法从父轴确定总时长。
* 忽视无视子轴的 pause

为了避免这些问题，在编排动画时，请先构建一个完整的 timeline，再将它添加到其他 timeline 中。

```ts
tl.add(otherTimeline, 1000);
```
npm package: @shxnovel/splay
Description: Generic Splay Tree implementation in TypeScript
Author: Aurora-creeper
Latest version: 1.0.0

# @shxnovel/splay

A TypeScript implementation of **Splay Tree**, a self-adjusting binary search tree with amortized O(log n) time complexity.

## Features

- Generic key type support
- Custom comparison function
- Full CRUD operations (insert, find, delete)
- Order statistics (rank, kth)
- Predecessor / successor queries
- Tree merge and join operations
- Zero runtime dependencies

## Installation

```bash
npm install @shxnovel/splay
```

Or with pnpm:

```bash
pnpm add @shxnovel/splay
```

## Quick Start

```typescript
import { SplayTree, SplayNode } from '@shxnovel/splay';

// 1. Define your node class
class MyNode extends SplayNode<number, MyNode> {
  size: number = 1;

  pushup(): void {
    this.size = 1 
      + (this.left?.size ?? 0) 
      + (this.right?.size ?? 0);
  }
}

// 2. Create tree
const tree = new SplayTree<number, MyNode>(MyNode);

// 3. Use it
tree.insert(10);
tree.insert(5);
tree.insert(15);

console.log(tree.root?.key); // 15 (last inserted, splayed to root)
console.log(tree.find(5)?.key); // 5
console.log(tree.kth(1)?.key); // 5 (1st smallest)
```

## API Reference

### SplayNode<K, Node>

Base node class. Extend it to add custom properties and implement `pushup()`.

```typescript
abstract class SplayNode<K, Node> {
  key: K;
  parent: Node | null;
  left: Node | null;
  right: Node | null;
  
  abstract pushup(): void;
}
```

### SplayTree<K, Node>

```typescript
new SplayTree<Node>(NodeCtor, compareFn?)
```

#### Methods

| Method | Description |
|--------|-------------|
| `insert(key)` | Insert a key. Splays node to root. |
| `find(key)` | Find key. Splays to root if found, otherwise splays last accessed node. |
| `findMax()` | Find maximum key. Splays to root. |
| `findMin()` | Find minimum key. Splays to root. |
| `delete(key)` | Delete a key. Returns `true` if found. |
| `rank(key)` | Get rank (1-based index) of key. Requires `size` in `pushup()`. |
| `kth(k)` | Find k-th smallest element (1-based). Splays to root. |
| `prev(key)` | Find predecessor (largest key < key). Splays to root. |
| `next(key)` | Find successor (smallest key > key). Splays to root. |
| `join(other)` | Join another tree (all keys in `other` must be larger). O(log n). |
| `merge(other)` | Merge another tree by inserting all keys. Destroys `other`. |

## Advanced Usage

### Custom Key Type

```typescript
interface Person {
  id: number;
  name: string;
}

class PersonNode extends SplayNode<Person, PersonNode> {
  size: number = 1;

  pushup(): void {
    this.size = 1 
      + (this.left?.size ?? 0) 
      + (this.right?.size ?? 0);
  }
}

const compareById = (a: Person, b: Person) => a.id - b.id;
const tree = new SplayTree<Person, PersonNode>(PersonNode, compareById);
```

### Interval Query Example

See [`src/example/timeline.ts`](./src/example/timeline.ts) and [`test/timeline.test.ts`](./test/timeline.test.ts)for a complete interval tree implementation.

## License

MIT
npm package: @shy-plugins/vue3-colorpicker
Description: A very beautiful color picker, supports input and output of multiple color formats, and supports gradient color selection.
Author: aesoper
Latest version: 0.0.2

# colorpicker

A very beautiful color picker, supports input and output of multiple color formats, and supports gradient color selection.

Note: This document is for Vue3ColorPicker v2. If you are looking for an older versions, refer to the v1 branches.The v2 version is a destructive update, and some functions in v1 are no longer supported. Please use it with caution

[Live Demo](https://aesoper101.github.io/vue3-colorpicker/)

[中文文档](https://github.com/aesoper101/vue3-colorpicker/blob/main/README.ZH-cn.md)

## Installation

```
yarn add vue3-colorpicker
```

OR

```
npm install vue3-colorpicker
```

## How to use

### The first step is global registration

```
import Vue3ColorPicker from "vue3-colorpicker";
import "vue3-colorpicker/style.css";

createApp(App)
  .use(router)
  .use(Vue3ColorPicker)
  .mount("#app");
```

OR

```vue3
import { ColorPicker } from "vue3-colorpicker";
import "vue3-colorpicker/style.css";

export default defineComponent({
components: { ColorPicker },
});
```

### Usage

```vue3
<template>
  <div>
     <color-picker v-model:pureColor="pureColor" v-model:gradientColor="gradientColor"/>
  </div>
</template>
<script lang="ts">
  import { ref } from "vue";
  import { ColorInputWithoutInstance } from "tinycolor2";

  export default defineComponent({
     setup() {
       const pureColor = ref<ColorInputWithoutInstance>("red");
       const gradientColor = ref("linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)");

       return { pureColor, gradientColor }
     }
  });
</script>

```

[Live Demo](https://aesoper101.github.io/vue3-colorpicker/)
npm package: @shy1132/bunny
Description: a simple buffer reader/writer for JavaScript
Author: shy
Latest version: 1.0.0

# bunny

a very simple buffer reader/writer for JavaScript, written with ease-of-use in mind, for small projects

## example

reading/writing a custom Minecraft Classic level format
```js
const zlib = require('zlib')
const bunny = require('bunny')

const levelMagic = 0x11326351;
const levelVersion = 1;

function parse(buffer) {
    const reader = new bunny.Reader(buffer, bunny.BIG_ENDIAN)

    let magic = reader.u32()
    if (magic !== levelMagic) throw new Error('invalid level');

    let version = reader.u8()
    if (version > levelVersion) throw new Error(`version ${version} is newer than ${levelVersion}`);

    let [ dimX, dimY, dimZ ] = [ reader.u16(), reader.u16(), reader.u16() ]
    let [ spawnX, spawnY, spawnZ ] = [ reader.u16(), reader.u16(), reader.u16() ]

    let compressed = reader.u8() === 1;

    let serializedBlockArray = reader.read(buffer.length - reader.peek())
    let blockArray;
    if (compressed) {
        blockArray = zlib.gunzipSync(serializedBlockArray)
    } else {
        blockArray = serializedBlockArray;
    }

    return {
        blockArray,
        dim: {
            x: dimX,
            y: dimY,
            z: dimZ
        },
        spawn: {
            x: spawnX,
            y: spawnY,
            z: spawnZ
        }
    };
}

function create(blockArray, dim, spawn) {
    const writer = new bunny.Writer(null, bunny.BIG_ENDIAN)

    writer.u32(levelMagic)
    writer.u8(levelVersion)

    writer.u16(dim.x)
    writer.u16(dim.y)
    writer.u16(dim.z)

    writer.u16(spawn.x)
    writer.u16(spawn.y)
    writer.u16(spawn.z)

    writer.u8(1) //compressed

    let serializedBlockArray = zlib.gzipSync(blockArray, { level: 3 })
    writer.write(serializedBlockArray)

    return writer.buffer;
}
```

## documentation

there currently is no documentation right now, i intend to write one in the future. it should be fairly simple to tell how to use it from the example and from the exposed api

## when should i use this instead of the native node.js buffer module?

it's good for handling buffers in very simple contexts, like simple file formats and simple protocols. it's not so good for huge stuff, you should probably roll your own module at that point. i wrote this because it's useful for me across many of my simpler projects

## contributing

i don't want this to be some huge project i have to manage, but i don't mind issues and pull requests! if adding a feature, please make sure it doesn't compromise on ease-of-use and doesn't do *too* much
npm package: @shyaam19/my-lib
Description: Library just for trial
Author: Shyam Dhamecha
Latest version: 0.0.5

# MyLib

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.0.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build my-lib
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:
   ```bash
   cd dist/my-lib
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.