open-index/open-npm huggingface dataset:
npm package: @olptools/http-server
Description: Unete is a microservice framework that exposes an HTTP & Socket.IO server based on native JS functions. Socket.IO server can be used to return observables that can be read in the @unete/io client.
Latest version: 1.0.0-c

# @mysticaldragon/unete

Unete is a microservice framework that exposes an HTTP & Socket.IO server based on native JS functions.
Socket.IO server can be used to return observables that can be read in the @unete/io client.

## Options

```js
{
    port: any;
    endpoints: any;
    responseType?: "object" | "raw"; // Default: "object", if = "raw", results won't be parsed as JSON

    ssl?: { // If != undefined, will expose the server as https:// & wss://
        key: string;
        cert: string;
        ca: string;
    }
}
```

## Usage Example

```js
import { Server } from "@mysticaldragon/unete";

new Server({
    port: 8080,
    endpoints: {
        helloWorld () {
            return "Hello World!";
        }
    }
}).listen();
```

Then enter http://localhost:8080/helloWorld

## Response

### If Options.responseType == "object"

If the function success, it will return 200 - { result }
If the function throws an exception, it will return 500 - { error }


### If Options.responseType == "raw"

If the function success, it will return 200 - result
If the function throws an exception, it will return 500 - error
npm package: @olptools/node
Description: ```javascript Node.create({   storagePath: string, // Persistent storage path   p2p: {     // Actual addresses where the server will be listening, ex. 0.0.0.0, 8080 		listeningAddresses: {       host: string,       port: string     }[],
Latest version: 0.1.4

# Protocol Node

```javascript
Node.create({
  storagePath: string, // Persistent storage path
  p2p: {
    // Actual addresses where the server will be listening, ex. 0.0.0.0, 8080
		listeningAddresses: {
      host: string,
      port: string
    }[],
    
    // Addresses where the server can be found (Ej. Public Addresses, LAN Addresses, etc)
		advertisingAddresses: {
      host: string,
      port: string
    }[],
    
    // Known peers that are used as entry point for peer discovery
		knownPeers: {
      host: string,
      port: string,
      did: string
    }[],
  },
  
  // Network which the node will connect
  // If a string is passed, it will ask the knownPeers for the network settings
  // If a Network Object is passed, it will take it at it is
  // If a NetworkSettings Object is passed, it will create the network
  network: string | Network | <NetworkSettings>{
    name: string, // Custom name for your network
    salt: string, // Random salt to prevent similar networks to point to the same
    
    // Whitelist / Blacklist of which IP addresses can work on the network
    // Whitelist: "AA.BB.CC.DD/XX", Blacklist: "!AA.BB.CC.DD/XX"
    // Ex. ["0.0.0.0/0", "!127.0.0.1/8"] Allows all networks except localhost
    netmasks: string[]
  },
  
  http: {
    host: string,
    port: string
  },
  
  // List of `Protocol` objects, that extends the functionalities of the node
  // All node custom behavior and logic are defined as protocols.
  protocols: Protocol[]
})
```
npm package: @olros/stats
Description: Simple tool to track analytics to Stats
Author: Olaf Rosendahl
Latest version: 2.2.1

# Stats

Simple tool to track analytics to Stats (https://stats.olafros.com). This package is only exported as an ESM-module.

## Usage

Create an instance of Stats:

```tsx
// utils/stats.ts
import { Stats } from '@olros/stats';

const TEAM = 'your-team-ID';
const PROJECT = 'your-project-ID';

export const stats = Stats({ team: TEAM, project: PROJECT });`}
```

Use the `stats.pageview`-method on each pagenavigation to track pageviews. Example from React with React-Router:

```tsx
// route.ts
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

import { stats } from 'utils/stats'; // Import the stats-instance

// ...

const location = useLocation();

useEffect(() => {
  stats.pageview();
}, [location.pathname, location.search]);
```

Use the `stats.event`-method to track custom events:

```tsx
// route.ts
import { stats } from 'utils/stats'; // Import the stats-instance

// ...

const handleClick = () => {
  stats.event('buy');
}
```

## Configuration

### `Stats<CustomEvents>()`:

- `team`: The team-ID, required
- `project`: The project-ID, required
- `baseUrl`: URL of Stats. Must be set if self-hosted. Defaults to `https://stats.olafros.com`
- `allowLocalhost`: Send events from localhost, defaults to false

The `CustomEvents`-generic can be used to optionally typecheck which custom events are allowed.
By default all strings are accepted:

```ts
const statsWithGenerics = Stats<'buy' | 'save'>(init);

statsWithGenerics.event('buy'); // ✅ No errors
statsWithGenerics.event('delete'); // ❌ Error

const statsWithoutGenerics = Stats(init);

statsWithoutGenerics.event('delete'); // ✅ No errors
```
npm package: @olrtg/emmet-ls
Description: A language server for emmet.io
Author: José Olórtegui
Latest version: 1.0.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!-- markdownlint-disable MD033 MD041 -->
<div align="center">
    <img src="./assets/logo.svg">
    <h3>emmet-ls</h3>
    <p>A language server for <a href="https://emmet.io/" target="_blank">emmet.io</a></p>
</div>

---

### Why another language server?

While [aca/emmet-ls](https://github.com/aca/emmet-ls) works for what I need, there were a couple of things that annoyed me from time to time and while trying to fix one of those things (aca/emmet-ls#55) I've discovered that we can leverage [microsoft/vscode-emmet-helper](https://github.com/microsoft/vscode-emmet-helper) and make a simple language server that wraps the library to provide completions.

So I decided to do that and it worked!

The most important thing is that [microsoft/vscode](https://github.com/microsoft/vscode) has an excelent integration with emmet and we can have that, in all editors that implement the [Language Server Protocol](https://microsoft.github.io/language-server-protocol/).

### Setup

First install:

```sh
npm i -g @olrtg/emmet-ls
```

#### Neovim (withouth nvim-lspconfig)

```lua
vim.api.nvim_create_autocmd({ "FileType" }, {
  pattern = "astro,css,eruby,html,htmldjango,javascriptreact,less,pug,sass,scss,svelte,typescriptreact,vue",
  callback = function()
    vim.lsp.start({
      cmd = { "emmet-ls", "--stdio" },
      root_dir = vim.fs.dirname(vim.fs.find({ ".git" }, { upward = true })[1]),
      init_options = {
        --- @type table<string, any> https://docs.emmet.io/customization/preferences/
        preferences = {},
        --- @type "always" | "never" Defaults to `"always"`
        showExpandedAbbreviation = "always",
        --- @type boolean Defaults to `false`
        showAbbreviationSuggestions = false,
        --- @type boolean Defaults to `false`
        showSuggestionsAsSnippets = false,
        --- @type table<string, any> https://docs.emmet.io/customization/syntax-profiles/
        syntaxProfiles = {},
        --- @type table<string, string> https://docs.emmet.io/customization/snippets/#variables
        variables = {},
        --- @type string[]
        excludeLanguages = {},
      },
    })
  end,
})
```

### Credits

- [@aca](https://github.com/aca) for the first language server ([aca/emmet-ls](https://github.com/aca/emmet-ls))
- [@wassimk](https://github.com/wassimk) for bringing the [microsoft/vscode-emmet-helper](https://github.com/microsoft/vscode-emmet-helper) repo to my attention in aca/emmet-ls#55
- [microsoft/vscode](https://github.com/microsoft/vscode) for having such an amazing integration with emmet and the easy and open package to integrate with
- [emmetio/emmet](https://github.com/emmetio/emmet) for the awesome tool
npm package: @olrtg/macd
Description: macOS defaults for humans
Author: José Olórtegui
Latest version: 0.1.0

<!-- markdownlint-disable MD033 MD041-->
<h3 align="center">
  macd
</h3>

<p align="center">
  macOS defaults for humans.
</p>

> ⚠️ macd is still in early stages of development.

# Usage

You need to have a yaml file where you define your default config for your macOS system, for example:

```yaml
# defaults.yml
dock:
  autohide: true

menubar:
  autohide: true
```

And then you execute:

```bash
npx @olrtg/macd ~/dotfiles/macos/defaults.yml
```

For the full list of commands, take a look at the [mapper.ts](https://github.com/olrtg/macd/blob/main/src/constants.ts#L1) file.

# To-do

- [ ] Add the full list of commands in the README
- [ ] Add some kind of descriptive logging of the commands that are being executed
- [ ] JSON schema for text editor intellisense
- [ ] Add more commands

If you can help with one of the items above any contributions will be appreciated.
npm package: @olsigjeci/falcon-start
Description: The official command-line tool to start a new FalconJS project.
Latest version: 0.1.2

# 🦅 falcon-start

The official command-line tool to create a new FalconJS project.

This tool sets up a complete, pre-configured project with a development server, build process, and a showcase application, allowing you to start building with FalconJS in seconds.

Quick Start
To create a new FalconJS app, open your terminal and run:

# npm 7+
npm create falcon-start

# Using an older npm version
npx falcon-start

The command will prompt you for a project name and then generate a new directory with the following structure:

/my-falcon-app
├── package.json
├── vite.config.js
├── index.html
├── style.css
└── /src
    └── ... (FalconJS source files)
└── /examples
    └── app.js (The showcase application)

Development Workflow
Once the project is created, navigate into the new directory and follow these steps:

Install Dependencies:

cd my-falcon-app
npm install

Start the Development Server:

npm run dev

This will start a Vite development server with Hot Module Replacement (HMR) for a fast and efficient development experience.

Build for Production:
When you're ready to deploy, you can build the optimized version of the FalconJS library itself:

npm run build

License
falcon-start is open-source and licensed under the MIT License.
npm package: @olsigjeci/falconjs
Description: A lightweight, fine-grained reactive JS framework built from scratch.
Latest version: 0.1.22

# 🦅 FalconJS

FalconJS is a lightweight and powerful JavaScript framework for building modern user interfaces. Inspired by the principles of SolidJS, it provides a fine-grained reactive system that minimizes DOM updates and maximizes performance, all without a Virtual DOM.

## Key Features

Fine-Grained Reactivity: Built from the ground up with reactive primitives (createSignal, createEffect, createMemo) that automatically track dependencies and update only what's necessary.

Component-Based Architecture: Create reusable UI components as simple JavaScript functions with modern JSX syntax.

High-Performance Rendering: Includes efficient, keyed list rendering (`<For>`) and conditional rendering (`<Show>`) components.

Client-Side Routing: A complete routing solution (`<Route>, <Link>`) for building fast single-page applications.

Global State Management: A simple yet powerful createStore utility for managing shared application state.

Async Handling: A dedicated createResource primitive to elegantly manage asynchronous data fetching.

### Documentation

See [https://falconjs.netlify.app/](https://falconjs.netlify.app/)

### API

See [https://falconjs.netlify.app/api-reactivity.html](https://falconjs.netlify.app/api-reactivity.html)

### Getting Started

The best way to start a new FalconJS project is by using the official starter template. Open your terminal and run:

```bash
npx @olsigjeci/falcon-start my-falcon-app
```

Then, navigate into your new project and start the development server:

```bash
cd my-falcon-app
npm install
npm run dev
```

### Core Concepts

Reactivity with Signals
State in FalconJS is managed with signals. A signal is a container for a value that automatically tracks where it's used and notifies them of changes.

```jsx
import { createSignal, createMemo } from '@olsigjeci/falconjs';

function Counter() {
  const [count, setCount] = createSignal(0);
  const doubleCount = createMemo(() => count() \* 2);

  return (
    <div>
      <p>Count: {count()}</p>
      <p>Double Count: {doubleCount()}</p>
      <button onClick={() => setCount(count() + 1)}>Increment</button>
    </div>
  );
}
```

List Rendering with `<For>`
The `<For>` component efficiently renders a list of items from an array. It uses keyed reconciliation to minimize DOM operations during updates, shuffles, or re-orders.

```jsx
import { createSignal, For } from '@olsigjeci/falconjs';

function TodoList() {
  const [todos, setTodos] = createSignal([
    { id: 1, text: 'Learn FalconJS' },
    { id: 2, text: 'Build something amazing' },
  ]);

  return (
    <ul>
      <For each={todos()}>{todo => <li>{todo.text}</li>}</For>
    </ul>
  );
}
```

License: FalconJS is open-source and licensed under the MIT License.
npm package: @olszowskijacek/randomid-generator
Description: The package allows you to generate unique identifiers
Author: Jacek Olszowski
Latest version: 1.0.2

# Unique ID Generator

The package allows you to generate unique identifiers

## Installation

With npm:
```
npm install @olszowskijacek/randomid-generator
```

With yarn:
```
yarn add @olszowskijacek/randomid-generator
```

### Usage
```
const randomID = require('your-package-name');

console.log(randomID(10));
```
npm package: @olton/ajax
Description: javascript class designed to work with ajax technology
Author: Sergey Pimenov
Latest version: 1.0.0

<p align="center">
    <img src="https://github.com/olton/ajax/raw/master/public/images/logo.png">
</p>

<div align="center">

![Dependencies](https://img.shields.io/badge/Dependencies-none-darklime.svg?style=for-the-badge)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge)](https://github.com/olton/ajax/blob/master/LICENSE)
![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/olton/ajax.svg?style=for-the-badge)
![GitHub release](https://img.shields.io/github/v/release/olton/ajax?color=darkLime&style=for-the-badge)

</div>

[Ajax]() - Javascript Ajax implementation 
===============================
**Ajax** is a javascript class designed to work with ajax technology. 

Contributing
--------------------
Clone repository / Get source
```
git clone https://github.com/olton/ajax
```

Run tests
```
yarn test
```

Install
---------------
With `npm`
```
npm install @olton/ajax --save-dev
```
With `yarn`
```
yarn add --dev @olton/ajax
```

Using Ajax
-------------
```javascript
import {ajax} from "@olton/ajax";

const request = ajax({...});

request.then(function(rawResponse){

    // resolve

}, function(xhrObject){

    // reject

});
```

Documentation
-------------
You can find the documentation at this [link](https://github.com/olton/ajax/blob/master/DOCUMENTATION.md).

License
-------
This software is free to use under the MIT license. See the [LICENSE](https://github.com/olton/ajax/blob/master/LICENSE) file for license text and copyright information.
npm package: @olton/animation
Description: Animation library (JavaScript)
Author: Serhii Pimenov
Latest version: 0.5.0

# Animation.JS
Animation.js - is a small library for animating HTML elements.

## Install
```shell
npm install @olton/animation
```

## Using example
![](https://raw.githubusercontent.com/olton/animationjs/master/public/images/animating-ball.gif?token=GHSAT0AAAAAAB6BLCLN7XLLTPZMTSWSGMU2Y7QVIRA)

Style
```style
body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

#field {
    width: 500px;
    height: 500px;
    border: 1px solid #1e2128;
    position: relative;
}

#ball {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: red;
    position: absolute;
    background: url("ball.svg") center no-repeat;
    background-size: cover;
}
```
Html
```html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="field">
        <div id="ball"></div>
    </div>
    <script src="index.js" type="module"></script>
</body>
</html>
```
JavaScript
```javascript
import {animate} from "@olton/animation"

const field = document.querySelector(".wrapper");
const w = field.clientWidth, h = field.clientHeight;
const ball = document.querySelector(".ball");

// Move ball left
animate({
    el: ball,
    draw: {
        left: [0, w - ball.clientWidth]
    },
    dur: 2000,
    ease: "easeOutQuad",
    loop: true
});

// Drop ball down
animate({
    el: ball,
    draw: {
        top: [0, h - ball.clientHeight]
    },
    dur: 2000,
    ease: "easeOutBounce",
    loop: true
});

// Rotate ball
animate({
    el: ball,
    draw: {
        rotate: [0, 360]
    },
    dur: 1200,
    loop: true
});
```

## License
This software is free to use under the MIT license. See the [LICENSE](LICENSE) file for license text and copyright information.
npm package: @olton/animationjs
Description: The small library for animation html elements
Author: Sergey Pimenov
Latest version: 2.0.8
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<p align="center">
    <img src="https://github.com/olton/animationjs/raw/master/logo.png">
</p>

<div align="center">

![David](https://img.shields.io/david/olton/animationjs?style=for-the-badge)
![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/olton/animationjs.svg?style=for-the-badge&color=9cf)
![GitHub release](https://img.shields.io/github/v/release/olton/animationjs?color=blueviolet&style=for-the-badge)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge)](https://github.com/olton/animationjs/blob/master/LICENSE)

</div>

[AnimationJS]() - Animate HTML elements
===============================
**AnimationJS** is a javascript class designed to animate html elements. 

Contributing
--------------------
Clone repository / Get source
```
git clone https://github.com/olton/animationjs
```

Install dependencies
```
npm i
```
```
yarn add
```

Run tests
```
yarn test
```
```
npm test
```

Install
---------------
With `npm`
```
npm install @olton/animationjs --save-dev
```
With `yarn`
```
yarn add --dev @olton/animationjs
```

Using
-------------

#### Example
<img src="https://github.com/olton/animationjs/raw/master/public/images/animating-ball.gif">

```javascript
import {animate} from "../src";

const field = document.querySelector(".wrapper");
const w = field.clientWidth, h = field.clientHeight;
const ball = document.querySelector(".ball");

// Move ball left
animate({
    el: ball,
    draw: {
        left: [0, w - ball.clientWidth]
    },
    dur: 2000,
    ease: "easeOutQuad",
    loop: true
});

// Drop ball down
animate({
    el: ball,
    draw: {
        top: [0, h - ball.clientHeight]
    },
    dur: 2000,
    ease: "easeOutBounce",
    loop: true
});

// Rotate ball
animate({
    el: ball,
    draw: {
        rotate: 360
    },
    dur: 1200,
    loop: true
});

```

Documentation
-------------
You can find the documentation at this [link](https://github.com/olton/animationjs/blob/master/DOCUMENTATION.md).

License
-------
This software is free to use under the MIT license. See the [LICENSE](https://github.com/olton/animationjs/blob/master/LICENSE) file for license text and copyright information.
npm package: @olton/color
Description: Color Manipulation library
Author: Serhii Pimenov
Latest version: 1.0.2

# Color.JS
Color.js - small javascript library for manipulating with a color. 
ColorJS is a javascript class designed to work with color. 
The class implements methods for conveniently working with color, 
converting it to various formats and generating special color schemes. 
Color.js provides simple API that may be used to create colors (HEX, RGB, RGBA, HSV, HSL, HSLA, CMYK), 
and perform various color related operations (conversions and such) and create 
any color schemes (complementary, triple, ...)

## Install
```shell
npm i @olton/color
```

## Using
```javascript
import Color from "@olton/color"

const col = new Color("#fff")

console.log(color.toRGB()); // RGB {r: 255, g: 255, b: 255}
console.log(color.toRGB().toString()); // rgb(255,255,255)
```

## License
This software is free to use under the MIT license. See the [LICENSE](LICENSE) file for license text and copyright information.
npm package: @olton/dom
Description: DOM - Work with HTML elements, animation HTML elements and props, and ajax routines. JQuery replacer.
Author: Serhii Pimenov
Latest version: 1.5.1

# DOM – Work with HTML elements

 Dom is a small library for work with HTML elements. 
 This library is designed for [Metro UI](https://metroui.org.ua) project to replace jQuery.

---
#### Status
![Dependencies](https://img.shields.io/badge/Dependencies-none-darklime.svg)
![Package Version](https://img.shields.io/github/package-json/v/olton/dom)
![NPM Version](https://img.shields.io/npm/v/%40olton%2Fdom)
![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?color=7852a9)
![Code size](https://img.shields.io/github/languages/code-size/olton/dom.svg?color=830000)



## Documentation

Read about `Dom` usage in the [Metro UI](https://docs-new.metroui.org.ua/libraries/dom) documentation.

## License

Dom is licensed under a [MIT license](LICENSE).


## Support

If you like this project, please consider supporting it by:

+ Star this repository on GitHub
+ Sponsor this project on GitHub Sponsors
+ **PayPal** to `serhii@pimenov.com.ua`.
+ [**Patreon**](https://www.patreon.com/metroui)
+ [**Buy me a coffee**](https://buymeacoffee.com/pimenov)

---

Copyright (c) 2025 by [Serhii Pimenov](https://pimenov.com.ua)
npm package: @olton/effects
Description: javascript extension to @olton/query with animation effects for elements
Author: Sergey Pimenov
Latest version: 0.10.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<p align="center">
    <img src="https://github.com/olton/effects/raw/master/logo.png">
</p>

<div align="center">

![David](https://img.shields.io/david/olton/effects?style=for-the-badge)
![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/olton/effects.svg?style=for-the-badge&color=9cf)
![GitHub release](https://img.shields.io/github/v/release/olton/effects?color=blueviolet&style=for-the-badge)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge)](https://github.com/olton/effects/blob/master/LICENSE)

</div>

[Effects]() - Extension for @olton/query  
========================================
**Effects** is a javascript extension to `@olton/query` with animation effects for elements such as fade, slide, opacity, and others. 

Contributing
--------------------
Clone repository / Get source
```
git clone https://github.com/olton/effects
```

Run tests
```
yarn test
```

Install
---------------
With `npm`
```
npm install @olton/effects --save-dev
```
With `yarn`
```
yarn add --dev @olton/effects
```

Using
-------------
```javascript
import Effects from "@olton/effects";
import $, {Query} from "@olton/query";

Query.use(Effects);

$("h1").fadeIn();
```

Documentation
-------------
You can find the documentation at this [link](https://github.com/olton/effects/blob/master/DOCUMENTATION.md).

License
-------
This software is free to use under the MIT license. See the [LICENSE](https://github.com/olton/effects/blob/master/LICENSE) file for license text and copyright information.
npm package: @olton/enei-editor
Description: The content editor for enei cms
Author: Serhii Pimenov
Latest version: 0.1.6

# ENEI Editor

Enei Editor - InPlace html editor for ENEI CMS.

![img.png](img.webp)

## Install

```shell
npm i @olton/enei-editor
```

## Using
```javascript
import {createEneiEditor} from "@olton/enei-editor"

createEneiEditor({
    shortcut: "alt+ctrl+e",
    serverEndpoint: "http://localhost:5232",
    maxHeight: 300
})
```

or use a precompiled version directly in browser
```html
<script src="https://cdn.jsdelivr.net/gh/olton/enei-editor/lib/enei-editor.js"></script>
<script>
    EneiEditor.createEneiEditor({
        shortcut: "alt+ctrl+e",
        serverEndpoint: "http://localhost:5232",
        maxHeight: 300
    })
</script>
```

Copyright 2023 by [Serhii Pimenov](https://pimenov.com.ua). Licensed Under MIT license.
npm package: @olton/esbuild-plugin-autoprefixer
Description: A CSS autoprefixer plugin for esbuild
Author: Serhii Pimenov
Latest version: 0.2.2

# esbuild-plugin-autoprefixer

A CSS autoprefixer plugin for esbuild.

---

[![npm](https://img.shields.io/npm/v/@olton/esbuild-plugin-autoprefixer)](https://www.npmjs.com/package/@olton/esbuild-plugin-autoprefixer)
![GitHub](https://img.shields.io/github/license/olton/esbuild-plugin-autoprefixer)

---

## Installation
```bash
npm i -D @olton/esbuild-plugin-autoprefixer
```

## Usage
```js
import { build } from 'esbuild';
import autoprefixer from "@olton/esbuild-plugin-autoprefixer"

await build({
  entryPoints: ...,
  bundle: true,
  outfile: ...,
  plugins: [autoprefixer()],
});
```

---

## License
This software is released under the MIT License.

---

Copyright (c) 2024 by Serhii Pimenov
npm package: @olton/esbuild-plugin-copy
Description: A esbuild plugin to copy files after build
Author: Serhii Pimenov
Latest version: 0.3.0

# esbuild-plugin-copy

Esbuild plugin to copy files after build

---

[![npm](https://img.shields.io/npm/v/@olton/esbuild-plugin-copy)](https://www.npmjs.com/package/@olton/esbuild-plugin-copy)
![GitHub](https://img.shields.io/github/license/olton/esbuild-plugin-copy)

---

## Installation
```bash
npm i -D @olton/esbuild-plugin-copy
```

## Usage
```js
import { build } from 'esbuild';
import copy from "@olton/esbuild-plugin-copy"

await build({
  entryPoints: ...,
  bundle: true,
  outfile: ...,
  plugins: [copy({
      files: ['assets/**/*.jpg'],
      dest: 'dist/',
      skip: ['assets/no-copy.jpg'],
  })],
});
```

---

## License
This software is released under the MIT License.

---

Copyright (c) 2024 by Serhii Pimenov
npm package: @olton/esbuild-plugin-progress
Description: A plugin for esbuild that shows a progress bar
Author: Serhii Pimenov
Latest version: 0.4.0

# esbuild-plugin-progress

A plugin to add a progress spinner to esbuild

---

[![npm](https://img.shields.io/npm/v/@olton/esbuild-plugin-progress)](https://www.npmjs.com/package/@olton/esbuild-plugin-progress)
![GitHub](https://img.shields.io/github/license/olton/esbuild-plugin-progress)

---

## Installation
```bash
npm i -D @olton/esbuild-plugin-progress
```

## Usage
```js
import { build } from 'esbuild';
import progress from '@olton/esbuild-plugin-progress';

await build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/index.js',
  plugins: [progress()],
});

```

## Options
Progress plugin has the following options:
- `color` - color of the spinner (default: `cyan`, values: `black` | `red` | `green` | `yellow` | `blue` | `magenta` | `cyan` | `white` | `gray`)
- `text` - text to display after the spinner (default: `Building...`)
- `failText` - text to display after the spinner when build failed (default: `Build failed with %s errors.`)
- `successText` - text to display after the spinner when build succeeded (default: `Build completed in %s ms.`)
- `spinner` - spinner type (default: `dots`, values: `dots` | `dots2` | `dots3` | `dots4` | `dots5` | `dots6` | `dots7` | `dots8` | `dots9` | `dots10` | `dots11` | `dots12` | `dots13` | `dots14` | `dots8bit` | `dotsCircle` | `sand` | `line` | `line2` | `pipe` | `simpleDots` | `simpleDotsScrolling` | `star` | `star2` | `flip` | `hamburger` | `growVertical` | `growHorizontal` | `balloon` | `balloon2` | `noise` | `bounce` | `boxBounce` | `boxBounce2` | `triangle` | `binary` | `arc` | `circle` | `squareCorners` | `circleQuarters` | `circleHalves` | `squish` | `toggle` | `toggle2` | `toggle3` | `toggle4` | `toggle5` | `toggle6` | `toggle7` | `toggle8` | `toggle9` | `toggle10` | `toggle11` | `toggle12` | `toggle13` | `arrow` | `arrow2` | `arrow3` | `bouncingBar` | `bouncingBall` | `smiley` | `monkey` | `hearts` | `clock` | `earth` | `material` | `moon` | `runner` | `pong` | `shark` | `dqpb` | `weather` | `christmas` | `grenade` | `point` | `layer` | `betaWave` | `fingerDance` | `fistBump` | `soccerHeader` | `mindblown` | `speaker` | `orangePulse` | `orangeBluePulse` | `timeTravel` | `aesthetic` | `dwarfFortress` )

> You can see all available spinners [here](https://github.com/sindresorhus/cli-spinners/blob/main/spinners.json)

```js
import { build } from 'esbuild';
import progress from '@olton/esbuild-plugin-progress';

await build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/index.js',
  plugins: [
      progress({
          color: 'green',
          text: 'Building project...',
          failText: 'Fuck! Build failed with %s errors.',
          saccessText: `Yes, yes, yes! I'm hero!` 
      }),
  ],
});
```

---

## License
This software is released under the MIT License.

---

Copyright (c) 2024 by Serhii Pimenov
npm package: @olton/esbuild-plugin-unlink
Description: A esbuild plugin for unlink files after build
Author: Serhii Pimenov
Latest version: 0.2.2

# esbuild-plugin-unlink

Esbuild plugin for unlink files after build

---

[![npm](https://img.shields.io/npm/v/@olton/esbuild-plugin-unlink)](https://www.npmjs.com/package/@olton/esbuild-plugin-unlink)
![GitHub](https://img.shields.io/github/license/olton/esbuild-plugin-unlink)

---

## Installation
```bash
npm i -D @olton/esbuild-plugin-unlink
```

## Usage
```js
import { build } from 'esbuild';
import unlink from "@olton/esbuild-plugin-unlink"

await build({
  entryPoints: ...,
  bundle: true,
  outfile: ...,
  plugins: [unlink({
      files: ['dist/**/*.map'],
      skip: ['dist/index.js.map'],
  })],
});
```

---

## License
This software is released under the MIT License.

---

Copyright (c) 2024 by Serhii Pimenov
npm package: @olton/farbe
Description: Color Manipulation library
Author: Serhii Pimenov
Latest version: 1.0.11

# Farbe

 **Farbe** - is a small JavaScript library for manipulating with a color.

#### Status
![Dependencies](https://img.shields.io/badge/Dependencies-none-darklime.svg)
![Package Version](https://img.shields.io/github/package-json/v/olton/farbe)
![NPM Version](https://img.shields.io/npm/v/%40olton%2Ffarbe)
![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?color=7852a9)
![Code size](https://img.shields.io/github/languages/code-size/olton/farbe.svg?color=830000)

Farbe provides `class` and `routines` for operations with color. 

**Farbe** provides simple API that may be used to create colors (`HEX`, `RGB`, `RGBA`, `HSV`, `HSL`, `HSLA`, `CMYK`), 
and perform various color related operations (conversions and such) and create 
any color schemes (complementary, triple, ...)

## Install
```shell
npm i @olton/farbe
```

## Documentation

Read about `Hooks` usage in the [Metro UI](https://docs-new.metroui.org.ua/libraries/farbe) documentation.

## License

Hooks are licensed under a [MIT license](LICENSE).

## Support

If you like this project, please consider supporting it by:

+ Star this repository on GitHub
+ Sponsor this project on GitHub Sponsors
+ **PayPal** to `serhii@pimenov.com.ua`.
+ [**Patreon**](https://www.patreon.com/metroui)
+ [**Buy me a coffee**](https://buymeacoffee.com/pimenov)

---

Copyright (c) 2025 by [Serhii Pimenov](https://pimenov.com.ua)
npm package: @olton/freemarker
Description: Freemarker integration for NodeJS.
Author: Serhii Pimenov
Latest version: 0.4.0

# @olton/freemarker

> [npm package](https://npmjs.org/package/@olton/freemarker)

Apache FreeMarker® is a template engine: a Java library to generate text output (HTML web pages, e-mails, configuration files, source code, etc.) based on templates and changing data. Templates are written in the FreeMarker Template Language (FTL), which is a simple, specialized language (not a full-blown programming language like PHP). Usually, a general-purpose programming language (like Java) is used to prepare the data (issue database queries, do business calculations). Then, Apache FreeMarker displays that prepared data using templates. In the template you are focusing on how to present the data, and outside the template you are focusing on what data to present.

## Freemarker integration for NodeJS

This package is a wrapper for Apache FreeMarker.
This version doesn't include fmpp source, only `jar` files:

- bsh v2.1.1
- freemarker v2.3.34
- resolver v1.2
- imageinfo v1.9

## How to use

  - `JAVA_HOME` should be set properly
  - `npm i @olton/freemarker -S`

#### Render string

```javascript
import Freemarker from '@olton/freemarker';

const freemarker = new Freemarker();

freemarker.render('<h1>${title}</h1>', { title: 'test render' }, (err, result) => {
  if (err) {
    throw new Error(err);
  }
  console.log(result);
});
```

*NOTICE: Don't use `#include` in string for rendering.*

#### Render file

```javascript
import Freemarker from '@olton/freemarker';
import { fileURLToPath } from 'url'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

const freemarker = new Freemarker({ root: __dirname, suffix: '.tpl' });

freemarker.renderFile(path.join(__dirname, 'index'), data, (err, result) => {
  if (err) {
    throw new Error(err);
  }
  console.log(result);
});
```
In this example, `path.join(__dirname, 'index')` can be replaced with `index` or `index.tpl` because we set `root` and `suffix` options.

## Test
Node with ESM support is required!

`npm test`

## License
This product is licensed under a [MIT](LICENSE) license.

---

Thanks to [kaola-fed](https://github.com/kaola-fed) for original release.
npm package: @olton/guardian
Description: Data validation library
Author: Serhii Pimenov
Latest version: 0.7.3

<div align="center">
    <h1 align="center">Guardian</h1>
    
        Data guard and validation library.
        Validate user input with Guardian.
</div>


---
#### Status
![Dependencies](https://img.shields.io/badge/Dependencies-none-darklime.svg)
![Package Version](https://img.shields.io/github/package-json/v/olton/guardian)
![NPM Version](https://img.shields.io/npm/v/%40olton%2Fguardian)
![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?color=7852a9)
![Code size](https://img.shields.io/github/languages/code-size/olton/guardian.svg?color=830000)


### Install
```shell
npm i @olton/guardian
```

## Documentation

Read about `Guardian` usage in the [Metro UI](https://docs-new.metroui.org.ua/libraries/guardian) documentation.

## License

Guardian are licensed under a [MIT license](LICENSE).

## Support

If you like this project, please consider supporting it by:

+ Star this repository on GitHub
+ Sponsor this project on GitHub Sponsors
+ **PayPal** to `serhii@pimenov.com.ua`.
+ [**Patreon**](https://www.patreon.com/metroui)
+ [**Buy me a coffee**](https://buymeacoffee.com/pimenov)

---

Copyright (c) 2025 by [Serhii Pimenov](https://pimenov.com.ua)
npm package: @olton/hooks
Description: The set of js hooks.
Author: Serhii Pimenov
Latest version: 0.13.1

<div align="center">
  <h1 align="center">Hooks</h1>

    The set of functions to create user hooks.
</div>

![Alt](https://repobeats.axiom.co/api/embed/c2ef4e8e81d471e5d6634d84cef18755ce1d2b63.svg "Repobeats analytics image")

#### Status
![Dependencies](https://img.shields.io/badge/Dependencies-none-darklime.svg)
![Package Version](https://img.shields.io/github/package-json/v/olton/hooks)
![GitHub Release](https://img.shields.io/github/v/release/olton/hooks)
![NPM Version](https://img.shields.io/npm/v/%40olton%2Fhooks)
![Website](https://img.shields.io/website/https/hooks.org.ua.svg)
![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?color=7852a9)
![Code size](https://img.shields.io/github/languages/code-size/olton/hooks.svg?color=830000)
![GitHub JS Size](https://img.shields.io/github/size/olton/hooks/lib%2Fhooks.js?label=JS%20Size&color=8f99ff)

---

Current implemented:

+ [x] [useState()](#usestate)
+ [x] [useEvent()](#useevent)
+ [x] [useMemo()](#usememo)
+ [x] [usePipe](#usepipe)
+ [x] [useDebounce](#usedebounce)
+ [x] [useCurry](#usecurry)
+ [x] [useCompose](#usecompose)
+ [x] [useThrottle](#usethrottle)

## Using

### Install
```shell
npm i --save @olton/hooks
```

## Documentation

Read about `Hooks` usage in the [Metro UI](https://docs-new.metroui.org.ua/libraries/hooks) documentation.

## License

Hooks are licensed under a [MIT license](LICENSE).

## Sponsors

No sponsor yet :(
Support this project by [donating](https://www.patreon.com/metroui).

---
Copyright © 2025 by [Serhii Pimenov](https://pimenov.com.ua)
npm package: @olton/html
Description: Create HTML pages in JavaScript! Including all standard components, and a Router for creating SPA.
Author: Serhii Pimenov
Latest version: 0.15.1

# html
Create HTML pages in pure JavaScript!

---
#### Status
![Dependencies](https://img.shields.io/badge/Dependencies-none-darklime.svg)
![Package Version](https://img.shields.io/github/package-json/v/olton/html)
![NPM Version](https://img.shields.io/npm/v/%40olton%2Fhtml)
![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?color=7852a9)
![Code size](https://img.shields.io/github/languages/code-size/olton/html.svg?color=830000)

---
## Install
```shell
npm i @olton/html
```

of use from `CDN`:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@olton/html@latest">
```

## Using
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="path-to/html.js"></script>
</head>
<body>

<script>
    ((() => {
        htmljs.extract()
        const body = document.querySelector("body")
        const root = document.createElement("main")
        body.appendChild(root)
        root.innerHTML = div(
            h1("Header"),
            form(
                label("Label", {class: "class1"}),
                input({type: "text", value:"123", data:{role: "input"}}),
                hr(),
                div(
                    button("Ok", {events: {onclick: "alert('Click Button')"}}),
                    button("Cancel", {type: "button"}),
                    {class: "actions"}
                )    
            )
        )
    })())
</script>
</body>
</html>
```

## Documentation

Read about `Html.js` usage in the [Metro UI](https://docs-new.metroui.org.ua/libraries/html) documentation.

## Support

If you like this project, please consider supporting it by:

+ Star this repository on GitHub
+ Sponsor this project on GitHub Sponsors
+ **PayPal** to `serhii@pimenov.com.ua`.
+ [**Patreon**](https://www.patreon.com/metroui)
+ [**Buy me a coffee**](https://buymeacoffee.com/pimenov)

---

Copyright (c) 2025 by [Serhii Pimenov](https://pimenov.com.ua)
npm package: @olton/js-utils
Description: JS Utils - The set of utilities functions, classes and routines written on javascript
Author: Sergey Pimenov
Latest version: 0.28.0

<p align="center">
    <img src="https://github.com/olton/js-utils/raw/master/logo.png">
</p>

<div align="center">

![Dependencies](https://img.shields.io/badge/Dependencies-none-darklime.svg?style=for-the-badge)
![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/olton/js-utils.svg?style=for-the-badge&color=9cf)
![GitHub release](https://img.shields.io/github/v/release/olton/js-utils?color=blueviolet&style=for-the-badge)
![GitHub pre-release](https://img.shields.io/github/v/release/olton/js-utils?include_prereleases&label=pre-release&style=for-the-badge&color=yellow)
![GitHub](https://img.shields.io/github/license/olton/js-utils?color=blue&style=for-the-badge)

</div>

[JS:Utils]() - Utilities functions, classes and routines
===============================
**JS Utils** is a set of utilities functions, classes and routines written on javascript 

Contributing
--------------------
Clone repository / Get source
```
git clone https://github.com/olton/js-utils
```

Run tests
```
yarn test
```

Install
---------------
With `npm`
```
npm install @olton/js-utils --save-dev
```
With `yarn`
```
yarn add --dev @olton/js-utils
```

Using
-------------
```javascript
import {each} from "@olton/js-utils";

const a = [1, 2, 3, 4, 5];

each(a, function(){
    console.log(this);
})
```

Documentation
-------------
You can find the documentation at this [link](https://github.com/olton/js-utils/blob/master/DOCUMENTATION.md).

License
-------
This software is free to use under the MIT license. See the [LICENSE](https://github.com/olton/js-utils/blob/master/LICENSE) file for license text and copyright information.
npm package: @olton/metro5
Description: Components library
Author: Serhii Pimenov
Latest version: 0.68.2

# Metro5

Metro 5 - Sleek, intuitive, and powerful front-end framework for faster and easier web development. Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style.

## Contributing
All contributions are welcome. Learn more about how you can contribute to this project [here](CONTRIBUTING.md).

> Important! Before you create Pull Request, you must sign CLA!

### Docs

Please click [here](https://metroui.org.ua/) for Documentation and Demo.

### Releases

Metro 5 releases frequently. I create release when there are significant bug fixes, new APIs or components.

### LTS
**Long term support** of older versions of Metro 5 does not currently exist.
If your current version of Metro 5 works for you, you can stay on it for as long as you'd like.
If you want to make use of new features as they come in you should upgrade to a newer version.

### Browser Compatibility
![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png)
--- | --- | --- | --- | --- |
Latest 2 ✔ | Latest 2 ✔ | Latest 2 ✔ | Latest 2 ✔ | Latest 2 ✔ |

### Activities

![Alt](https://repobeats.axiom.co/api/embed/fb58f3ae886bb9674e0c4afea23802f6f45ce5ec.svg "Repobeats analytics image")

### Thanks
Thanks to all Metro UI community. Special thanks to all those who financially supported the project.

---

2023 © Copyright by Serhii Pimenov. All Rights Reserved. Created by Serhii Pimenov.
npm package: @olton/model
Description: Reactive model with two-way data binding
Author: Serhii Pimenov
Latest version: 0.18.1

<div align="center">

# Model

Model – Is a reactive data model for two-way data binding

</div>

![Alt](https://repobeats.axiom.co/api/embed/f9fb207d1b8878c829433a10ad16e86ca9c59d4e.svg "Repobeats analytics image")

<div align="center">

![Dependencies](https://img.shields.io/badge/Dependencies-none-darklime.svg)
![Package Version](https://img.shields.io/github/package-json/v/olton/model)
![GitHub Release](https://img.shields.io/github/v/release/olton/model)
![NPM Version](https://img.shields.io/npm/v/%40olton%2Fmodel)
![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?color=7852a9)
![Code size](https://img.shields.io/github/languages/code-size/olton/model.svg?color=830000)
![GitHub JS Size](https://img.shields.io/github/size/olton/model/dist%2Fmodel.js?label=JS%20Size&color=8f99ff)

</div>

## Documentation

Read about `Model` usage in the [Metro UI](https://docs-new.metroui.org.ua/libraries/model) documentation.

## License

Model are licensed under a [MIT license](LICENSE).

## Sponsors

No sponsor yet :(
Support this project by [donating](https://www.patreon.com/metroui).

---
Copyright © 2025 by [Serhii Pimenov](https://pimenov.com.ua)
npm package: @olton/octo-menu
Description: Octo Menu for React (Ribbon style menu)
Author: Serhii Pimenov
Latest version: 0.1.4

# Octo-Menu

![](preview.png)

Octo-Menu - Ribbon style menu for React.

The following components are available to you: 
- Push Button 
- Icon Button
- Tool Button (same as an icon button, but without caption) 
- Split Button 
- Dropdown Menu
- Dropdown Menu Groups
- Dividers (vertical and horizontal) for divide buttons (or any elements) inside a group
- Hotkey binder
- Service Panel
- Group
- Button Group

You can group elements into groups. Each group can have a title. If elements do not fit in the section, left and right menu scroll buttons appear.


You can create a button group where buttons will work as switchers. In the Dropdown Menu, elements also can work as switchers, including radio style.


Also, available is a service-panel, which is shown in the top right corner of the menu. You can put elements into this panel.

## Install
```shell
npm install @olton/octo-menu
```

## Using
```javascript
import React from "react"
import {
    Menu,
    Group,
    Divider,
    Button,
    Dropdown,
    DropdownMenu,
    DropdownMenuItem,
    DropdownMenuDivider,
    DropdownMenuGroup,
    IconButton,
    ToolButton,
    SplitButton,
    ButtonGroup,
    HorizontalDivider,
    VerticalDivider,
    ServicePanel 
} from "@olton/octo-menu"

const App = () => {
    return (
        <>
            <Menu>...</Menu>
        </>
    )
}
```

[Demo](https://codesandbox.io/s/octo-menu-lbtu3j) on CodeSandbox.
npm package: @olton/query
Description: Query is a minimalist JavaScript library for manipulating with HTML Elements
Author: Serhii Pimenov
Latest version: 0.5.3

<p align="center">
    <img src="https://github.com/olton/query/raw/master/logo.png">
</p>

# Query

![Dependencies](https://img.shields.io/badge/Dependencies-none-darklime.svg)
![Size](https://img.badgesize.io/olton/query/master/lib/query.js.svg)
![Size gzip](https://img.badgesize.io/olton/query/master/lib/query.js.svg?compression=gzip)
![GitHub release](https://img.shields.io/github/v/release/olton/query?color=darkLime)
![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=flat)
![GitHub issues](https://img.shields.io/github/issues-raw/olton/query.svg?color=red)

<hr>

**Query** is a minimalist JavaScript library for manipulating DOM and HTML elements for Browsers with a **comfortable modern API**.

* 🕒 Quick and accurate
* 🔥 Chainable
* 👫 Modern browsers, Electron supported

## Sponsors
No sponsor yet :(

## License

Query is licensed under a [MIT license](LICENSE).