open-index/open-npm huggingface dataset:
npm package: @itihon/position-observer
Description: Observes position change of an element within viewport as a result of resize, scroll, left or top coordinates change, or zooming in and out
Author: Alexandr Kalabin
Latest version: 1.2.10

## Position observer

Runs a callback function when position or size of an observed element changes as a result of scroll or resize of a parent container or window, zooming in and out the page, or setting left and top coordinates of an observed element.
Uses `IntersectionObserver` to detect position change.
When position change detected, stops observing the element and starts a [`requestAnimationFrame` loop](https://github.com/itihon/request-animation-frame-loop/) in which the callback will be invoked.
When position stops changing, it stops the `requestAnimationFrame` loop and returns to observing the element.

![position observer flow chart](./position_observer_flow_chart.svg)

 - **It doesn't run anything in the background when the observed element's bounding box doesn't change.**
 - **It doesn't listen to scroll or resize events.**

> **See [Position observer](https://itihon.github.io/position-observer/) demo page.**

Also, for more details see [Detecting size and position change of a DOM element as a result of scroll, resize or zoom with IntersectionObserver.](https://dev.to/itihon/detecting-size-and-position-change-of-a-dom-element-as-a-result-of-scroll-resize-or-zoom-with-29ai).

### Installation

```sh
npm install @itihon/position-observer
```

### Usage

```js
  import PositionObserver from '@itihon/position-observer';

  const ctx = {
    // a context to be passed in the callback
  };

  function callback(target, targetRect, ctx) {
    // do something when position change of the target is detected
  }

  const positionObserver = new PositionObserver(callback, ctx);

  // ... 
  // ... 

  // start observing target's position change
  positionObserver.observe(target);

  // ... 
  // ... 
  
  // stop observing target's position change
  positionObserver.unobserve(target);

  // ... 
  // ... 
  
  // stop observing all targets' position change
  positionObserver.disconnect();

  // ... 
  // ... 
  
  // get an iterator of currently observed target elements
  positionObserver.getTargets();

```

### Debugging

If you encountered a situation in which for some reason it doesn't behave as you expected, you can change import of `PositionObserver` to debug subfolder. It will be displaying actual observed areas of each side observer as it is demonstrated on this page [How it works?](https://itihon.github.io/position-observer/how-it-works.html). In order to see them, you may need to temporarily make all document's body children half-transparent `opacity: .5;`.

```js 
import PositionObserver from '@itihon/position-observer/debug';
```
npm package: @itihon/split-pane
Description: Split pane component based on Web Components API
Author: Alexandr Kalabin
Latest version: 0.2.1

# split-pane
[![License][]](https://opensource.org/licenses/MIT)
[![Build Status]](https://github.com/itihon/split-pane/actions/workflows/code-quality-and-test.yml)
[![NPM Package]](https://npmjs.org/package/@itihon/split-pane)
[![Code Coverage]](https://codecov.io/gh/itihon/split-pane)
[![semantic-release]](https://github.com/semantic-release/semantic-release)

[License]: https://img.shields.io/badge/License-MIT-blue.svg
[Build Status]: https://github.com/itihon/split-pane/actions/workflows/code-quality-and-test.yml/badge.svg
[NPM Package]: https://img.shields.io/npm/v/@itihon/split-pane.svg
[Code Coverage]: https://codecov.io/gh/itihon/split-pane/branch/master/graph/badge.svg
[semantic-release]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg

Split pane web component. Resizable grid. Changes percentage for adjacent panes in CSS `grid-template-columns`/`grid-template-rows` when divider is being dragged by the user.

## 🕑 Developing...

## Install

``` shell
npm install @itihon/split-pane
```

## Use

``` typescript
import splitPane from 'split-pane'
// TODO: describe usage
```

### In HTML

``` html
<script type="module" src="/path/to/split-pane.js"></script>

<split-pane type="horizontal">
  <div>pane 1</div>
  <div>pane 2</div>
  <div>pane 3</div>
</split-pane>

<split-pane type="vertical">
  <div>pane 1</div>
  <div>pane 2</div>
  <div>pane 3</div>
</split-pane>

<!-- nested --->
<split-pane type="horizontal">
  <div>pane 1</div>
  <split-pane type="vertical">
    <div>pane 2</div>
    <div>pane 3</div>
  </split-pane>
</split-pane>
```

> Do not add or remove child elements directly after an instance of component was mounted. Use `addPane()` and `removePane()` API methods instead.

### In JS or TS

#### Create an instance and add to DOM:

``` js
import SplitPane from "@itihon/split-pane";

const splitPane = new SplitPane();

document.body.append(splitPane);
```

#### or get a reference to an existing instance:

``` js
const splitPane = document.getElementById('split-pane-1');
```

#### API 

```ts
class SplitPane extends HTMLElement {
  get length(): number;
  getPane(idx: number): HTMLElement | null;
  getAllPanes(): NodeListOf<HTMLElement>;
  addPane(container: HTMLElement, idx?: number): void;
  removePane(idx: number): boolean;
  getState(): SplitPaneState;
}
```

#### Events

```ts 
type SplitPaneState = {
  gridTemplate: string;
  panes: NodeListOf<HTMLElement>;
};

type SplitPaneStateChangeKind = 'addpane' | 'removepane' | 'resizepane';

interface SplitPaneStateChangeEventDetail {
  oldState: SplitPaneState;
  newState: SplitPaneState;
  kind: SplitPaneStateChangeKind;
}
```

```js
import SplitPane from "@itihon/split-pane";

const splitPane = new SplitPane();

document.body.append(splitPane);

splitPane.addEventListener('statechange', event => {
  const { oldState, newState, kind } = event.detail;
  // ...
  // ...
});

```

## Related

TODO

## Acknowledgments

TODO
npm package: @itihon/visibility-observer
Description: Observes visibility state of a DOM element, allows to check if an element is visible in viewport.
Author: Alexandr Kalabin
Latest version: 1.0.3

## Visibility observer. Check visibility of a DOM element in viewport.

### Installation

```sh
npm install @itihon/visibility-observer
```

### Usage

```js
  import visibilityObserver from '@itihon/visibility-observer';

  // start observing the target element
  visibilityObserver.observe(target);

  // get viewport size based on the property `rootBounds` of an IntersectionObserver instance
  const { width, height } = visibilityObserver.getLastViewportRect();

  // get a visibility state string for the target element: "FULLY_VISIBLE" | "PARTLY_VISIBLE" | "INVISIBLE"
  const visibilityState = visibilityObserver.getVisibilityState(target);

  // get the last IntersectionObserverEntry for the target element
  const lastRecord = visibilityObserver.getLastRecord(target);

  // stop observing the target element
  visibilityObserver.unobserve(target);
 
  // stop observing all target elements
  visibilityObserver.disconnect();
```
npm package: @itilite/lumina-ui
Description: Itilite Lumina Design System UI Components
Author: Itilite
Latest version: 1.1.14

# @itilite/lumina-ui

Itilite Lumina Design System UI Components - A React component library built with TypeScript, Ant Design, and Tailwind CSS.

## Installation

```bash
npm install @itilite/lumina-ui
# or
pnpm add @itilite/lumina-ui
# or
yarn add @itilite/lumina-ui
```

## Peer Dependencies

Make sure you have the following peer dependencies installed:

```bash
npm install react antd
```

## Usage

### Prerequisites

This component library requires Tailwind CSS to be set up in your consuming application. The components use Tailwind utility classes and will not be styled without it.

#### Setting up Tailwind CSS in your app

1. Install Tailwind CSS:
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
```

2. Configure Tailwind to scan your app (you don't need to scan the component library):
```js
// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    // No need to scan node_modules - component utilities are pre-compiled
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

3. Add Tailwind directives to your main CSS file:
```css
/* app.css or index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

**Important:** The component library includes only the Tailwind utilities it uses. Your app must provide the base/reset styles via `@tailwind base`.

### Importing Components

You can import components individually (recommended for tree-shaking):

```tsx
import { Button } from '@itilite/lumina-ui/button';
import { Checkbox } from '@itilite/lumina-ui/checkbox';
import '@itilite/lumina-ui/styles.css'; // Import component styles
```

Or import all components from the main entry point:

```tsx
import { Button, Checkbox } from '@itilite/lumina-ui';
import '@itilite/lumina-ui/styles.css'; // Import component styles
```

### Button Component

```tsx
import { Button } from '@itilite/lumina-ui/button';

function App() {
  return (
    <Button onClick={() => console.log('Clicked!')}>
      Click Me
    </Button>
  );
}
```

### Checkbox Component

```tsx
import { Checkbox } from '@itilite/lumina-ui/checkbox';

function App() {
  return (
    <Checkbox onChange={(checked) => console.log(checked)}>
      Accept Terms
    </Checkbox>
  );
}
```

## Requirements

- **Tailwind CSS**: This library requires Tailwind CSS to be configured in your consuming application
- **React**: 18+
- **Ant Design**: 5.13.1

## Available Components

- **Button** - Customizable button component
- **Checkbox** - Checkbox input component

More components coming soon!

## TypeScript Support

This package is built with TypeScript and includes type definitions out of the box.

## Browser Support

- Modern browsers (Chrome, Firefox, Safari, Edge)
- React 18+

## License

MIT

## Contributing

For bugs and feature requests, please visit our [GitHub repository](https://github.com/Itilite/dev-design-system).

## Maintainer

Itilite
npm package: @itinerisltd/bud-favicons
Description: Bud.js extension to automatically generate favicons.
Latest version: 0.1.0

<p align="center"><img src="https://cdn.roots.io/app/uploads/logo-bud.svg" height="100" alt="bud.js" /></p>

<p align="center">
  <img alt="MIT License" src="https://img.shields.io/github/license/itinerisltd/bud-favicons?color=%23525ddc&style=flat-square" />
  <img alt="npm" src="https://img.shields.io/npm/v/itinerisltd/bud-favicons.svg?color=%23525ddc&style=flat-square" />
</p>

<h1 align="center"><strong>Bud Favicons</strong></h1>

<p align="center">
  Bud.js extension to automatically generate favicons
</p>

---

## Installation

Install **bud-favicons** to your project.

Yarn:

```sh
yarn add bud-favicons --dev
```

npm:

```sh
npm install bud-favicons --save-dev
```

## Configuration

**bud-favicons** works with zero configuration. But there is a robust and developer friendly configuration API should you need to make a modification to the provided defaults.
You can see the full list of options in the [favicons documentation](https://github.com/itgalaxy/favicons#usage).

## Default configuration

```ts
const options = {
  logo: bud.path('resources/images/favicon.svg'),
  mode: 'webapp',
  devMode: 'webapp',
  outputPath: bud.path('public'),
  favicons: {
      icons: {
          android: true,
          appleIcon: true,
          appleStartup: true,
          favicons: true,
          windows: true,
          yandex: false,
      },
  },
};
```

## Configuration with `bud.favicons.config`

You can configure `favicons` with the `bud.favicons` method:

```ts title=bud.config.ts
bud.favicons.setup({
  logo: bud.path('resources/images/favicon.svg'),
});
```

OR

```ts title=bud.config.ts
bud.favicons.setup({
  logo: bud.path('resources/images/favicon.svg'),
  mode: 'webapp',
  devMode: 'webapp',
  outputPath: bud.path('public'),
  favicons: {
      background: '#030321',
      theme_color: '#ffffff',
      icons: {
          android: true,
          appleIcon: true,
          appleStartup: true,
          favicons: true,
          windows: true,
          yandex: false,
      },
  },
});
```

## Contributing

Contributions are welcome from everyone.

## Credits

[Bud Favicons](https://github.com/ItinerisLtd/bud-favicons) is a [Itineris Limited](https://www.itineris.co.uk/) project created by [Dan Lapteacru](https://github.com/danlapteacru).

Full list of contributors can be found [here](https://github.com/ItinerisLtd/bud-favicons/graphs/contributors).

## License

[Bud Favicons](https://github.com/ItinerisLtd/bud-favicons) is released under the [MIT License](https://opensource.org/licenses/MIT).
npm package: @itinerisltd/twoohoh
Description: HTTP status code checker
Author: TangRufus @TangRufus
Latest version: 0.3.4
Deprecated: Package no longer supported. Use at your own risk.

# @itinerisltd/twoohoh

HTTP status code checker

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [I am a test](#i-am-a-test)
  - [I am another test](#i-am-another-test)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## I am a test

### I am another test