open-index/open-npm huggingface dataset:
npm package: @milenyumai/film-kit-hybrid
Description: Hybrid cinematic prompt kit for OpenAI Codex App, Claude Code, Cursor, Copilot, and Antigravity: Nano Banana Pro (Google) for start/end frame image prompts + Kling 3.0 for video prompts.
Latest version: 0.2.3

# @milenyumai/film-kit-hybrid

Professional hybrid cinematic prompt kit for Nano Banana stills and Kling 3.0 video prompts.

## What It Does

- Writes `ILK/SON` still prompts for Nano Banana Pro / Google.
- Writes `VIDEO` prompts for Kling 3.0.
- Keeps start/end stills and video motion under one editorial contract.
- Enforces spatial realism rules for gaze, depth, light cohesion, and anti-cutout staging.

## Install

```bash
npm i -D @milenyumai/film-kit-hybrid
```

## Init

```bash
npx @milenyumai/film-kit-hybrid init
npx @milenyumai/film-kit-hybrid init --aspect 16:9 --nano-size 4K
npx @milenyumai/film-kit-hybrid init --kling-preset balanced
npx @milenyumai/film-kit-hybrid init --overwrite
```

## Generated Runtime

- `CLAUDE.md` + `.claude/CLAUDE.md`
- native Claude `prompt-engineer` subagent
- OpenAI Codex App / Cursor / Copilot / Antigravity surfaces
- `.codex/config.toml` + `.codex/agents/prompt-engineer.toml`
- `.agents/skills/*/SKILL.md` Codex skill mirror with the hybrid prompt-structure override
- hybrid overrides and prompt-structure overrides

## Contracts

- one file per shot
- `shot-plan.json` carries project-level `voiceCast`
- speaking `VIDEO` sections carry machine-readable `AUDIO PLAN`
- parser-compatible `Audio direction:` blocks stay available for backward compatibility
- `VIDEO` route is always `kling-3.0`
- app.kling custom storyboard cap: `4`
- Kling prompt code blocks start with `[CHARACTER / SUBJECT CONSISTENCY]`
- hard gate:
  - `ILK >= 120`
  - `SON >= 120`
  - `VIDEO >= 160`
  - coverage still `>= 90`
  - coverage video `>= 110`
- spatial realism gate for interacting subjects:
  - eyeline target
  - plane map
  - shared light source
  - contact and depth cues

## Best For

- image-to-video shot design
- start/end anchor workflows
- editorially controlled Kling 3.0 prompting

## License

MIT
npm package: @milenyumai/film-kit-hybrid-smart
Description: Smart hybrid cinematic prompt kit for OpenAI Codex App, Claude Code, Cursor, Copilot, and Antigravity: Nano Banana Pro (Google) for start/end frame image prompts + dialogue-aware video routing.
Latest version: 0.2.3

# @milenyumai/film-kit-hybrid-smart

Professional smart hybrid cinematic prompt kit for Nano Banana stills and dialogue-aware Veo/Kling video routing.

## What It Does

- Writes `ILK/SON` still prompts for Nano Banana Pro / Google.
- Routes video prompt sections automatically:
  - dialogue / lip-sync -> Veo 3.1
  - no-dialogue action / inserts / atmosphere / silent reactions -> Kling 3.0
- Keeps all routes under one editorial and continuity contract.
- Enforces spatial realism rules for gaze, depth, scale, and compositing realism.

## Install

```bash
npm i -D @milenyumai/film-kit-hybrid-smart
```

## Init

```bash
npx @milenyumai/film-kit-hybrid-smart init
npx @milenyumai/film-kit-hybrid-smart init --aspect 16:9 --nano-size 4K
npx @milenyumai/film-kit-hybrid-smart init --kling-preset balanced
npx @milenyumai/film-kit-hybrid-smart init --overwrite
```

## Generated Runtime

- `CLAUDE.md` + `.claude/CLAUDE.md`
- native Claude `prompt-engineer` subagent
- OpenAI Codex App / Cursor / Copilot / Antigravity surfaces
- `.codex/config.toml` + `.codex/agents/prompt-engineer.toml`
- `.agents/skills/*/SKILL.md` Codex skill mirror with the smart hybrid prompt-structure override
- smart hybrid overrides and route-aware prompt-structure overrides

## Contracts

- one file per shot
- `shot-plan.json` carries project-level `voiceCast`
- speaking video sections carry machine-readable `AUDIO PLAN`
- parser-compatible `Audio direction:` blocks stay available across routes
- per-section route declaration
- app.kling custom storyboard cap: `4`
- Kling-routed no-dialogue prompt code blocks start with `[CHARACTER / SUBJECT CONSISTENCY]`
- Veo/Kling grammar separation is enforced
- hard gate:
  - `ILK >= 120`
  - `SON >= 120`
  - `VIDEO >= 160`
  - coverage still `>= 90`
  - coverage video `>= 110`
- spatial realism gate for interacting subjects:
  - eyeline target
  - plane map
  - shared light source
  - contact and depth cues

## Best For

- dialogue-heavy scenes with silent coverage
- mixed Veo + Kling productions
- editorial routing by shot section

## License

MIT
npm package: @milenyumai/film-kit-studio
Description: End-to-end cinematic production for OpenAI Codex App, Claude Code, and Antigravity: scenario to rendered media with fal.ai integration, Nano Banana stills, Kling 3.0 video, and reference image support.
Latest version: 1.0.3

# @milenyumai/film-kit-studio

End-to-end cinematic production: scenario to rendered media.

## What It Does

- Everything film-kit-multi does (lead-directed multi-agent production with 8 specialists)
- PLUS actual image and video rendering via fal.ai MCP integration
- OpenAI Codex App repo-scoped config, custom agents, skill mirror, and fal.ai MCP setup
- Generates real still frames using Nano Banana 2
- Generates real videos using Kling 3.0 Pro
- Supports reference images for character/location consistency
- Cost estimation before rendering

## Install

```bash
npm i -D @milenyumai/film-kit-studio
```

## Init

```bash
npx film-kit-studio init
npx film-kit-studio init --model veo31
npx film-kit-studio init --model kling-3.0 --kling-preset ultra-realism
npx film-kit-studio init --refs-dir ./my-refs
npx film-kit-studio init --overwrite
```

## Prerequisites

- FAL_KEY environment variable must be set with your fal.ai API key
- Reference images (optional) in `./refs/` directory

## Render Pipeline

After `/generate` completes and all specialists pass:

| Step | Input | fal.ai Model | Output |
|------|-------|-------------|--------|
| 1 | ILK FRAME prompt + refs | `fal-ai/nano-banana-2/edit` | Start frame image |
| 2 | SON FRAME prompt + refs | `fal-ai/nano-banana-2/edit` | End frame image |
| 3 | Start image + VIDEO prompt | `fal-ai/kling-video/v3/pro/image-to-video` | Video file |

## Reference Images

Place reference images in `./refs/`:

```
refs/
├── characters/
│   ├── protagonist.jpg
│   └── antagonist.jpg
├── locations/
│   ├── cafe.jpg
│   └── street.jpg
└── props/
    └── weapon.jpg
```

The render supervisor automatically maps characters and locations from shot prompts to reference images.

## Workflows

- `/generate` → multi-agent shot prompt generation (inherited from film-kit-multi)
- `/render` → fal.ai rendering pipeline (NEW)
- `/chain`, `/safety-check`, `/recover`, `/finish` → inherited from film-kit-multi

## Cost Control

Before rendering, the system:
1. Checks pricing for both image and video models
2. Calculates total estimated cost
3. Reports to user and waits for confirmation

## License

MIT
npm package: @mileschou/hexo-mdlink
Description: Auto generate .md link.
Author: MilesChou
Latest version: 0.3.0

# Hexo mdlink

Auto generate .md link.

## Concept

```markdown
[Here is foo link](/absolute/to/foo.md)
[Here is bar link](relative/to/bar.md)
```

translate to URI:

```html
<a href="to/foo.html">Here is foo link</a>
<a href="to/bar.html">Here is bar link</a>
```
npm package: @milesight/responsive-style
Description: A powerful, accessible, developer friendly Toolkit for building responsive websites.
Latest version: 1.1.4

# @milesight/responsive-style

[![npm](https://img.shields.io/npm/v/@milesight/responsive-style)](https://www.npmjs.com/package/@milesight/responsive-style)
![npm package minimized gzipped size (scoped)](https://img.shields.io/bundlejs/size/%40milesight/responsive-style?label=Gzipped)
![GitHub License](https://img.shields.io/github/license/Milesight-IoT/responsive-toolkit)

---

Responsive Style is a powerful yet easy-to-use CSS framework designed to help developers quickly build responsive websites. It provides a set of straightforward classes for creating flexible and scalable layouts.

## Installation

### 1. Using Package Managers

Install with npm:

```bash
npm install @milesight/responsive-style
```

Install with yarn:

```bash
yarn add @milesight/responsive-style
```

### 2. Using Free CDN

You can skip downloading files and directly use the compiled CSS via [jsDelivr](https://www.jsdelivr.com/):

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@milesight/responsive-style/dist/index.min.css">
```

## Usage

Please refer to the [Usage Documentation](https://milesight-iot.github.io/responsive-toolkit/style/start/quick-start).
npm package: @milesight/spec
Description: Modern code specification library for Milesight projects
Author: Milesight
Latest version: 1.0.5

# @milesight/spec

现代化代码规范库，专为 Milesight 项目打造，基于 ESLint 9+ flat config 格式。

[English](./README.md) | [简体中文](./README.zh-CN.md) | [文档](https://milesight-iot.github.io/frontend-spec/zh/)

## 特性

- ✨ **现代化 ESLint 9+** - 最新的 flat config 格式
- 🎯 **TypeScript 优先** - 完整的 TypeScript 支持，可选类型检查
- ⚛️ **React & Vue** - 内置 React、Vue 2/3 支持
- 📦 **一体化** - ESLint、Prettier、Commitlint 和 Stylelint
- 🎨 **灵活的格式化** - Prettier 或 @stylistic/eslint-plugin
- 🚀 **导入排序** - 自动组织导入语句
- 🔧 **高度可配置** - 对每条规则进行细粒度控制

## 快速开始

### 安装

```bash
pnpm add -D @milesight/spec eslint prettier typescript
```

### 配置

在项目根目录创建 `eslint.config.ts`：

```typescript
import { defineConfig } from '@milesight/spec';

export default defineConfig({
    typescript: true,
    react: true,  // 或 vue: true
    stylistic: 'prettier',
});
```

### 使用

```bash
# 检查代码
pnpm exec eslint .

# 自动修复问题
pnpm exec eslint . --fix
```

在 `package.json` 中添加脚本：

```json
{
    "scripts": {
        "lint": "eslint .",
        "lint:fix": "eslint . --fix",
        "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md}\""
    }
}
```

## 文档

完整文档请访问 [https://milesight-iot.github.io/frontend-spec/zh/](https://milesight-iot.github.io/frontend-spec/zh/)

- [快速开始](https://milesight-iot.github.io/frontend-spec/zh/guide/getting-started)
- [配置指南](https://milesight-iot.github.io/frontend-spec/zh/config/basic)
- [使用示例](https://milesight-iot.github.io/frontend-spec/zh/examples/library)
- [API 参考](https://milesight-iot.github.io/frontend-spec/zh/api/)

## 贡献

欢迎贡献！请阅读我们的[贡献指南](./CONTRIBUTING.zh-CN.md)了解开发流程。

## 许可证

MIT © Milesight

## 链接

- [文档](https://milesight-iot.github.io/frontend-spec/zh/)
- [GitHub 仓库](https://github.com/Milesight-IoT/frontend-spec)
- [问题追踪](https://github.com/Milesight-IoT/frontend-spec/issues)
- [更新日志](https://github.com/Milesight-IoT/frontend-spec/blob/main/CHANGELOG.md)
npm package: @milesight/themes
Description: Milesight Design System Themes - Unified theme tokens for ysd-iot and dcform
Author: Milesight Frontend Team
Latest version: 1.1.1

# @milesight/themes

Milesight Design System Themes - 统一的主题令牌系统

## 特性

- 🎨 **统一变量命名**：采用 `--ms-` 前缀，统一 Milesight 生态系统
- 📦 **多平台支持**：基于 Style Dictionary，支持 Web、iOS、Android
- 🔄 **热更新**：Watch 模式支持开发时实时编译
- 🛡 **类型安全**：完整的 TypeScript 类型定义
- ⚡️ **高性能**：基于 CSS 变量的主题切换
- 🌓 **深色模式**：内置浅色和深色主题

## 安装

```bash
pnpm add @milesight/themes
```

## 使用

### 引入 CSS

```typescript
import '@milesight/themes/dist/css/index.css';
```

### React Hooks

```tsx
import { useTheme, ThemeProvider } from '@milesight/themes';

function App() {
    return (
        <ThemeProvider defaultTheme="auto">
            <YourApp />
        </ThemeProvider>
    );
}

function ThemeToggle() {
    const { theme, toggleTheme } = useTheme();
    return <button onClick={toggleTheme}>Current: {theme}</button>;
}
```

### 直接使用 CSS 变量

```css
.my-component {
    color: var(--ms-color-primary);
    padding: var(--ms-spacing-4);
    border-radius: var(--ms-border-radius-base);
}
```

## 开发

```bash
# 安装依赖
pnpm install

# 开发模式（watch）
pnpm dev

# 构建
pnpm build

# 测试
pnpm test
```

## 文档

详细文档请查看 [packages/docs](../docs)

## License

MIT
npm package: @milesoft/typescript-constants
Description: Single source of truth for all application-wide fixed values, keys, and configurations.
Author: Milesoft
Latest version: 2.0.0

# `@milesoft/typescript-constants` 🧱

[![npm version](https://badge.fury.io/js/%40milesoft%2Ftypescript-constants.svg)](https://www.npmjs.com/package/@milesoft/typescript-constants)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

**A centralized collection of fixed, non-computational constants and application-wide configurations shared across
Milesoft's TypeScript applications.**

This package serves as the **single source of truth** for values like configuration settings, enumerations, and
localStorage keys, ensuring consistency across all projects that depend on it.

## ✨ Features

The following constants are available for import:

| Export Name  | Description                                                                                  | Example Value                                    |
|:-------------|:---------------------------------------------------------------------------------------------|:-------------------------------------------------|
| **`themes`** | Provides standardized string values for UI themes.                                           | `{ light: "Light", dark: "Dark" }`               |
| **`limits`** | Defines common numeric size limits for different contexts (e.g., pagination, thresholds).    | `{ small: 10, medium: 100 }`                     |
| **`keys`**   | Contains commonly used string keys, typically for local storage, cookies, or URL parameters. | `{ authToken: "auth_token" }`                    |
| **`time`**   | Defines fundamental units of time as integers.                                               | `{ millisecondsInSecond: 1000, hoursInDay: 24 }` |
| **`times`**  | Calculates common time periods in milliseconds.                                              | `{ minute: 60000, day: 86400000 }`               |

-----

## 🚀 Installation

To use this package in your project, install it using npm or yarn:

```bash
# Using npm
npm install @milesoft/typescript-constants

# Using yarn
yarn add @milesoft/typescript-constants
```

-----

## 💡 Usage

Once installed, you can import the constant objects directly into your TypeScript files.

```typescript
import {keys, limits, themes} from "@milesoft/typescript-constants";

// Accessing a key for local storage
localStorage.setItem('USER_TOKEN', keys.authToken);

// Using a predefined limit
if (userList.length > limits.medium) {
    console.log(`Maximum allowed users exceeded: ${limits.medium}`);
}

// Applying a theme
document.body.className = themes.dark;

// Accessing a time unit (time)
const maxAgeInSeconds = time.hoursInDay * time.secondsInMinute;

// Using a calculated time period (times)
const isRecent = Date.now() - timestamp < times.day;
```
npm package: @milestone-sys/web-design-system
Description: Milestone web design system
Author: Milestone systems
Latest version: 4.0.14

# web-design-system
[![Build Status](https://travis-ci.org/milestone-sys/web-design-system.svg?branch=master)](https://travis-ci.org/milestone-sys/web-design-system)

Design system for Milestone Systems online presence..

Public site: https://milestone-sys.github.io/web-design-system/
<br>NPM location: https://www.npmjs.com/package/@milestone-sys/web-design-system
npm package: @milestones/babel-plugin-strip-milestones
Description: This package allows you to strip the `milestone()` calls completely out of your code to eliminate any overhead in production.
Latest version: 1.0.0

# @milestones/babel-plugin-strip-milestones

This package allows you to strip the `milestone()` calls completely out of your code to eliminate any overhead in production.

Full documentation can be found at https://salsify.github.io/milestones/docs/babel-plugin.

## Usage

Include `@milestones/babel-plugin-strip-milestones` in your package dependencies and then add `'@milestones/babel-plugin-strip-milestones'` to the `plugins` array in your `babel.config.json` or the corresponding configuration location for your particular Babel integration.
npm package: @milestones/core
Description: Milestones are a tool for annotating points in time in your code.
Latest version: 1.0.0

# @milestones/core

Milestones are a tool for annotating points in time in your code.

A milestone can act as a named synchronization point, allowing you to ensure the state of your application code at the moment in time in your testing when you wish to make assertions. They also give you the ability to change the behavior of annotated code during testing, skipping pauses or mocking out results.

Full interactive documentation can be found at https://salsify.github.io/milestones.

## Example

#### Application Code
```ts
import { milestone } from '@milestones/core';

export const Save = Symbol('save');
export const ShowCompletion = Symbol('show-completion-message');

// ...

async function save() {
  renderMessage('Saving...');
  await milestone(Save, () => saveData());

  renderMessage('Saved!');
  await milestone(ShowCompletion, () => sleep(4000));

  renderMessage('');
}
```

#### Test Code
```ts
import { advanceTo } from '@milestones/core';
import { Save, ShowCompletion } from '../app/code/under/test';

// ...

it('renders the current saving status', async () => {
  click('.save-button');

  // Wait until we start saving, then check that
  // the expected message is being shown.
  let saveHandle = await advanceTo(Save);
  expect(currentMessage()).to.equal('Saving...');

  // Now go ahead and perform the save
  await saveHandle.continue();
  expect(currentMessage()).to.equal('Saved!');

  // Now advance to where we pause to show the
  // the status message, but skip the sleep
  await advanceTo(ShowCompletion).andReturn();
  expect(currentMessage()).to.equal('');
});
```
npm package: @milestones/ember
Description: @milestones/core integration for Ember.js
Author: Dan Freeman
Latest version: 1.0.4

# @milestones/ember

The `@milestones/ember` addon integrates with the Ember runtime and ember-cli to provide zero-config setup for working with milestones.

Full documentation can be found at https://salsify.github.io/milestones/docs/ember.

## Runtime

All milestones are configured by `@milestones/ember` to use RSVP for their promise implementation, ensuring that any code that executes as a result of a milestone occurs within a runloop.

## Build

By default, milestones will be stripped from your code in production builds using `@milestones/babel-plugin-strip-milestones`. This behavior is always controlled by the host application, and it can be overridden in the host's `ember-cli-build.js`.

```ts
let app = new EmberApp(defaults, {
  milestones: {
    stripMilestones: false, // or whatever your preference
  },
});
```

## Ember Concurrency

If `ember-concurrency` is present in your project, any milestones you create will be task-like promises that will bubble cancelation appropriately. They will also be cancelable from your test code.
npm package: @mileszim/actioncable-nodejs
Description: Rails ActionCable Client for Node
Author: mileszim
Latest version: 0.0.5

# actioncable-nodejs

Rails ActionCable Client for Node

[Literally just @rails/actioncable](https://github.com/rails/rails/tree/master/actioncable/app/javascript/action_cable) but with adjustments for browser calls.

## Install
```bash
$ npm i @mileszim/actioncable-nodejs
```

```javacript
const ActionCable = require("@mileszim/actioncable-nodejs");
```

## Usage
See https://edgeguides.rubyonrails.org/action_cable_overview.html
npm package: @mileszim/ember-export-application-global
Description: Sets `window.MyAppName` up as the application instance upon boot.
Latest version: 1.0.0

# ember-export-application-global

[![Build Status](https://travis-ci.org/mileszim/ember-export-application-global.svg?branch=master)](https://travis-ci.org/mileszim/ember-export-application-global)
[![devDependency Status](https://david-dm.org/mileszim/ember-export-application-global/dev-status.svg)](https://david-dm.org/mileszim/ember-export-application-global#info=devDependencies)
[![npm version](https://badge.fury.io/js/ember-export-application-global.svg)](http://badge.fury.io/js/ember-export-application-global)

Sets `window.MyAppName` up as the application instance upon boot.

By default this is only done when not running in production mode, but you can fully
control when it is executed by including `exportApplicationGlobal` in your `config/environment.js`
with `true` if you want the global exported, or `false` if you do not.

## Example Configuration

```javascript
// config/environment.js

module.exports = function(environment) {
  var ENV = {
    // other configuration
    exportApplicationGlobal: ['staging', 'production'].indexOf(environment) === -1
  }
};
```

## Installation

```sh
ember install @mileszim/export-ember-application-global
# or for ember-cli < 0.1.5
npm install --save-dev @mileszim/export-ember-application-global
```

## Available Configuration

* `exportApplicationGlobal` - Specify if you want the global to be exported.
  A `true` will export global as the application name, but a string will export
  it as that string.

## Contributing

This README outlines the details of collaborating on this Ember addon.

### Dev Installation

* `git clone <repository-url>` this repository
* `cd ember-export-application-global`
* `npm install`
* `bower install`

## Running

* `ember serve`
* Visit your app at [http://localhost:4200](http://localhost:4200).

## Running Tests

* `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions)
* `ember test`
* `ember test --server`

## Building

* `ember build`

For more information on using ember-cli, visit [http://ember-cli.com/](http://ember-cli.com/).

## License

MIT
npm package: @mileszim/prisma-cursorstream
Description: Prisma Stream Client Extension (Cursor-based Implementation)
Author: Hasan Arous
Latest version: 0.4.0

# prisma-cursorstream

Prisma Stream Client Extension (Cursor-based Implementation)

## Features

- Clean API (`for await`)
- Fully typed <img src="https://www.typescriptlang.org/favicon-32x32.png" height="16" width="16" alt="" />
- Minimal implementation. The [source](https://github.com/etabits/prisma-cursorstream/blob/main/src/index.ts) itself is well below 100 LOCs.

## Installation & Activation

```sh
npm install prisma-cursorstream
```

Then, extend your prisma client like this:

```js
import { PrismaClient } from "@prisma/client";
import cursorStream from "prisma-cursorstream";

const db = new PrismaClient().$extends(cursorStream);
```

<details>
<summary>Using CommonJS `require`?</summary>

### CommonJS `require`

```js
const cursorStream = require("prisma-cursorstream").default;

const db = new PrismaClient().$extends(cursorStream);
```

Refer to [#1](https://github.com/etabits/prisma-cursorstream/issues/1).

</details>

## Usage

```js
const stream = db.post.cursorStream({
  // Your usual findMany args
  select: {
    id: true,
    title: true,
  },
  where: {
    published: true,
  },
});
for await (const post of stream) {
  console.log(post); // {id: 1, title: 'Hello!'}
}
```

## Advanced API

The following options (passed as a second argument) provide additional controls over the streaming process.

- **Batch size**: `batchSize` specifies how many rows are fetched each batch. Defaults to `100`
- **Pre-fill size**: Since the streaming happens asynchronously, it may be useful to fetch more rows well before current batch is completely consumed. `prefill` specifies the internal `highWaterMark` of the `Readable` stream. Defaults to double the batch size (usually `200`).
- **Batch transformation**: Sometimes you may need to pre-process the resulting rows in batches before they are consumed. This is where the `batchTransformer` comes in. If provided, it receives an array of the last fetched batch of rows, can operate on them asynchronously, and then return an array of transformed rows to be consumed instead. Types are properly handled.

```js
const stream = db.post.cursorStream(
  {
    where: {
      published: true,
    },
  },
  {
    batchSize: 42, // batches of 42 posts at a time
    prefill: 69, // prefetch up to 69+ posts
    async batchTransformer(posts) {
      const translations = await translate(posts.map((p) => p.title));
      return posts.map((p, i) => ({
        ...p,
        translatedTitle: translations[i],
      }));
    },
  }
);

for await (const translatedPost of stream) {
  console.log(translatedPost); // {..., translatedTitle: "مرحبا!"}
}
```
npm package: @mileszim/useworker
Description: useWorker() - Web worker using React hook
Author: mileszim
Latest version: 4.1.2

<h1 align="center">
  <br>
  <img width="300px" src="https://raw.githubusercontent.com/alewin/useWorker/refs/heads/master/logo.png" alt="useWorker"
    title="useWorker() Use web workers with react hook" />
  <br>
</h1>

<h2 align="center">
  Use web workers with react hook
  <br />
  https://useworker.js.org/
  <a
    href="https://twitter.com/intent/tweet?text=useWorker - Use web workers with react hooks&url=https://github.com/alewin/useWorker&via=alessiokoci&hashtags=react,useworker,hooks,javascript">
    <br />
    <img alt="Tweet" src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social" />
  </a>
</h2>

<h3 align="center">
  <img alt="GitHub" src="https://img.shields.io/npm/dm/@koale/useworker" />
  <img alt="size" src="https://img.shields.io/bundlephobia/minzip/@koale/useworker/4.0.2" />
  <img alt="GitHub" src="https://img.shields.io/npm/l/@koale/useworker" />
 <img src="https://badgen.net/badge/TypeScript/Support" alt="TypeScript Support" title="TypeScript Support" data-canonical-src="https://badgen.net/badge/TypeScript/Support" style="max-width:100%;">
</h3>

---

## Docs

Read [Docs](../../README.md)
npm package: @miletorix/vitepress-back-to-top-button
Description: A lightweight Back-to-Top button Vue 3 component for VitePress. Features smooth scroll, progress ring indicating scroll percentage, dark/light theme support.
Author: miletorix
Latest version: 1.0.3

# vitepress-back-to-top-button

A lightweight Back-to-Top button Vue 3 component for VitePress. Features smooth scroll, progress ring indicating scroll percentage, dark/light theme support.

## Live Demo and more information

✨ See it in action:  
👉 [https://miletorix.github.io/vitepress-back-to-top-button/](https://miletorix.github.io/vitepress-back-to-top-button/)

## Installation

```sh
npm i @miletorix/vitepress-back-to-top-button
```

## Usage

### Configuration

```typescript
// docs/.vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'

import BackToTopButton from '@miletorix/vitepress-back-to-top-button' //[!code ++]
import '@miletorix/vitepress-back-to-top-button/style.css' //[!code ++]

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    BackToTopButton(ctx.app) //[!code ++]
  }
}
```

### Advanced configuration

```typescript
// docs/.vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'

import BackToTopButton from '@miletorix/vitepress-back-to-top-button' //[!code ++]
import '@miletorix/vitepress-back-to-top-button/style.css' //[!code ++]

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    BackToTopButton(ctx.app, { // [!code ++]
      progressColor: 'string', // default is #42b983 [!code ++]
      arrowSvg: `string` // only svg code [!code ++]
    })
  }
}
```

## Preview

### Preview - Desktop

![demo-1](https://github.com/miletorix/vitepress-back-to-top-button/raw/main/assets/demo.gif)
npm package: @miletorix/vitepress-enhanced-site-links
Description: Vue components for enhanced link cards and link groups for VitePress.
Author: miletorix
Latest version: 1.0.6

# vitepress-enhanced-site-links

Vue components for enhanced link cards in VitePress.

<p align="center">
  <img src="https://raw.githubusercontent.com/miletorix/vitepress-enhanced-site-links/main/assets/demo.png" alt="vitepress-enhanced-site-links demo" width="800">
</p>

## Live Demo and more information

See it in action:  
👉 [https://miletorix.github.io/vitepress-enhanced-site-links/](https://miletorix.github.io/vitepress-enhanced-site-links/)

## Installation

```sh
npm i @miletorix/vitepress-enhanced-site-links
```

## Usage

### Configuration

```typescript
// docs/.vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'

import { Card, CardsGroup } from '@miletorix/vitepress-enhanced-site-links' // [!code ++]
import '@miletorix/vitepress-enhanced-site-links/style.css' // [!code ++]

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    ctx.app.component('Card', Card) // [!code ++]
    ctx.app.component('CardsGroup', CardsGroup) // [!code ++]
  }
}
```

### Single Link Card
```vue
<Card
  title="title..."
  link="https://url.../" 
  desc="desc..."
  logo="path-to-img"
/>
```

### Multiple Link Cards
```vue
<CardsGroup :cards="[
  { title: 'title...', link: 'https://url.../', desc: 'desc...' },
  { title: 'title...', link: 'https://url.../', desc: 'desc...' },
  { title: 'title...', link: 'https://url.../', desc: 'desc...', logo: 'path-to-url' }
]" />
```

## Examples

### Example 1

**Input**

```vue
<Card title="Github" link="https://github.com/" />
```

**Output**

![demo-2](https://raw.githubusercontent.com/miletorix/vitepress-enhanced-site-links/main/assets/demo-2.png)

![demo-2](https://raw.githubusercontent.com/miletorix/vitepress-enhanced-site-links/main/assets/demo-2-1.png)

### Example 2

**Input**

```vue
<Card title="Github" link="https://github.com/" desc="Github Homepage" />
```

**Output**

![demo-3](https://raw.githubusercontent.com/miletorix/vitepress-enhanced-site-links/main/assets/demo-3.png)

![demo-3](https://raw.githubusercontent.com/miletorix/vitepress-enhanced-site-links/main/assets/demo-3-1.png)

### Example 3

**Input**

```vue
<Card
  title="YouTube"
  link="https://youtube.com/" 
  desc="YouTube Homepage"
  logo="/img/youtube-logo-1.png"
/>
```

**Output**

![demo-4](https://raw.githubusercontent.com/miletorix/vitepress-enhanced-site-links/main/assets/demo-4.png)

### Example 4

**Input**

```vue
<CardsGroup :cards="[
  { title: 'YouTube', link: 'https://youtube.com/', desc: '' },
  { title: 'Github', link: 'https://github.com/', desc: 'Github Homepage' },
  { 
    title: 'Notepad', 
    link: 'https://apps.microsoft.com/detail/9msmlrh6lzf3?hl=en-US&gl=US', 
    desc: 'MS Store',
    logo: '/img/notepad-logo.png' 
  }
]" />  
```

**Output**

![demo-5](https://raw.githubusercontent.com/miletorix/vitepress-enhanced-site-links/main/assets/demo-5.png)
npm package: @miletorix/vitepress-gallery
Description: A responsive, swipeable image gallery component for VitePress with thumbnails, navigation, captions, and smooth transitions.
Author: miletorix
Latest version: 1.0.1

# vitepress-gallery
A responsive, swipeable image gallery component for VitePress with thumbnails, navigation, captions, and smooth transitions.

![npm](https://img.shields.io/npm/v/@miletorix/vitepress-gallery) ![npm](https://img.shields.io/npm/dw/@miletorix/vitepress-gallery) ![license](https://img.shields.io/npm/l/@miletorix/vitepress-gallery)


<p align="center">
  <img src="/assets/demo-1.png" alt="demo" width="800">
</p>

## Installation

```sh
npm i @miletorix/vitepress-gallery
```

## Usage

### Configuration

```typescript
// docs/.vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
 
import { Gallery } from '@miletorix/vitepress-gallery' // [!code ++]
import '@miletorix/vitepress-gallery/style.css' // [!code ++]

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    ctx.app.component('Gallery', Gallery) // [!code ++]
  }
}
```

### Gallery

```vue
<Gallery 
  :images="[
    'demo-1.png',
    'demo-2.jpg',
    'demo-3.jpg',
    'demo-4.jpg'
  ]" 
  :captions="[
    'Image caption Nr.1 ...',
    'Image caption Nr.2 ...',
    'Image caption Nr.3 ...',
    'Image caption Nr.4 ...'
  ]"
/>
```

> Captions are optional.

> Alt text by default if captions are not specified - Image 1, Image 2, Image ... etc. If captions are specified, then alt = captions
npm package: @miletorix/vitepress-html-preview
Description: A Vue component for embedding external HTML files via iframe in VitePress. Its useful for showcasing interactive demos with full HTML, CSS, and JavaScript support.
Author: miletorix
Latest version: 0.0.4

# vitepress-html-preview

A Vue component for embedding external HTML files via `iframe` in VitePress. It’s useful for showcasing interactive demos with full HTML, CSS, and JavaScript support.

![npm](https://img.shields.io/npm/v/@miletorix/vitepress-html-preview) ![npm](https://img.shields.io/npm/dw/@miletorix/vitepress-html-preview) ![license](https://img.shields.io/npm/l/@miletorix/vitepress-html-preview)

<p align="center">
  <img src="https://github.com/miletorix/vitepress-html-preview/raw/main/assets/demo-1.png" alt="vitepress-enhanced-site-links demo" width="800">
</p>

## Live Demo and more information

✨ See it in action:  
👉 [https://miletorix.github.io/vitepress-html-preview/](https://miletorix.github.io/vitepress-html-preview/)

## Installation

```sh [npm]
npm i @miletorix/vitepress-html-preview
```

## Usage

### Configuration

```typescript
// docs/.vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'

import { HtmlPreview } from '@miletorix/vitepress-html-preview' // [!code ++]

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    ctx.app.component('HtmlPreview', HtmlPreview) // [!code ++]
  }
}
```

### Html Preview

```vue
<HtmlPreview src="path-to-.html-file" width="..." height="..." />
```

> - Default **width**: `100%`
> - Default **height**: `400px`

## Example

**Input:**

```vue
<HtmlPreview src="/demo/point-sketch.html" height="600px" />
```

**Output:**

![demo-2](https://github.com/miletorix/vitepress-html-preview/raw/main/assets/demo-2.png)
npm package: @miletorix/vitepress-image-viewer
Description: VitePress image viewer with zoom, drag, fullscreen overlay, captions and download button. Automatically enhances all images on the page. Built with Vue 3.
Author: miletorix
Latest version: 1.3.2

# vitepress-image-viewer 

VitePress image viewer with zoom, drag, fullscreen overlay, captions and download button. Ability to change the background to transparent. Automatically enhances all images on the page. Built with Vue 3. 

![npm](https://img.shields.io/npm/v/@miletorix/vitepress-image-viewer)  ![npm](https://img.shields.io/npm/dw/@miletorix/vitepress-image-viewer)  ![license](https://img.shields.io/npm/l/@miletorix/vitepress-image-viewer)

## Live Demo and more information

✨ See it in action:  
👉 [https://miletorix.github.io/vitepress-image-viewer/](https://miletorix.github.io/vitepress-image-viewer/)

## Installation

```sh [npm]
npm i @miletorix/vitepress-image-viewer
```

## Usage

### Configuration

```typescript
// docs/.vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'

import ImageViewerP from '@miletorix/vitepress-image-viewer' //[!code ++]
import '@miletorix/vitepress-image-viewer/style.css' //[!code ++]

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    ImageViewerP(ctx.app) //[!code ++]
  }
}
```

### Advanced configuration
```transparentBg?: boolean``` - Use transparent dark overlay instead of solid background. Default is true.

```autoShowThumbnails?: boolean``` - Automatically show thumbnails on desktop. Default is true.

```typescript
// docs/.vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'

import ImageViewerP from '@miletorix/vitepress-image-viewer' //[!code ++]
import '@miletorix/vitepress-image-viewer/style.css' //[!code ++]

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) { 
    ImageViewerP(ctx.app, { //[!code ++]
      transparentBg: false, //[!code ++] default is true
      autoShowThumbnails: false //[!code ++] default is true
    }) //[!code ++]
  }
}
```

## Preview

![preview](https://github.com/miletorix/vitepress-image-viewer/raw/main/assets/preview-2.png)
![preview](https://github.com/miletorix/vitepress-image-viewer/raw/main/assets/preview-1.png)
npm package: @miletorix/vitepress-youtube-embed
Description: A minimal Vue 3 component to embed responsive YouTube videos in VitePress markdown pages using a simple syntax.
Author: miletorix
Latest version: 1.0.3

# vitepress-youtube-embed

Vue component to embed responsive YouTube videos in VitePress markdown pages using a simple syntax.

<p align="center">
  <img src="https://github.com/miletorix/vitepress-youtube-embed/raw/main/assets/demo.png" alt="vitepress-youtube-embed demo" width="800">
</p>

## Live Demo and more information

✨ See it in action:  
👉 [https://miletorix.github.io/vitepress-youtube-embed/](https://miletorix.github.io/vitepress-youtube-embed/)

## Installation

```sh
npm i @miletorix/vitepress-youtube-embed
```

## Usage

### Configuration

```typescript
// docs/.vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
 
import { YouTubeEmbed } from '@miletorix/vitepress-youtube-embed' // [!code ++]
import '@miletorix/vitepress-youtube-embed/style.css' // [!code ++]

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    ctx.app.component('YouTubeEmbed', YouTubeEmbed) // [!code ++]
  }
}
```

### YouTube Embed

```vue
<YouTubeEmbed video-id="video-id..." />
```

## Example

**Source**: 

youtu.be/<span style="color: CornflowerBlue">**dQw4w9WgXcQ**</span>?feature=shared

**or** 

youtube.com/watch?v=<span style="color: CornflowerBlue">**dQw4w9WgXcQ**</span>&list=RDdQw4w9WgXcQ&start_radio=1

**Input**

```vue
<YouTubeEmbed video-id="dQw4w9WgXcQ" />
```

**Output**

![demo-2](https://github.com/miletorix/vitepress-youtube-embed/raw/main/assets/demo-2.png)
npm package: @mili-handlers/additional-property
Description: The mili handler used to add property to `file.addition`.
Latest version: 1.0.1
Deprecated: never support mili@4

# @mili-handlers/additional-property

[![version](https://img.shields.io/npm/v/@mili-handlers/additional-property.svg?style=flat-square)](https://www.npmjs.com/package/@mili-handlers/additional-property)
[![downloads](https://img.shields.io/npm/dm/@mili-handlers/additional-property.svg?style=flat-square)](https://www.npmjs.com/package/@mili-handlers/additional-property)
[![license](https://img.shields.io/npm/l/@mili-handlers/additional-property.svg?style=flat-square)](https://www.npmjs.com/package/@mili-handlers/additional-property)
[![dependencies](https://img.shields.io/david/Val-istar-Guo/mili-handler-additional-property.svg?style=flat-square)](https://www.npmjs.com/package/@mili-handlers/additional-property)
[![coveralls](https://img.shields.io/coveralls/github/Val-istar-Guo/mili-handler-additional-property.svg?style=flat-square)](https://coveralls.io/github/Val-istar-Guo/mili-handler-additional-property)



<!-- description -->
The mili handler used to add property to `file.addition`.
<!-- description -->

## Usage

<!-- usage -->
```
import addAdditionalProperty from '@mili-handlers/additional-property'

const rules = {
  path: 'path_to_file',
  handlers: [
    // file.addition.key = 'values'
    addAdditionalProperty('key', 'values'),
    // file.addition.notProd = !resource.anwsers.isProd
    addAdditionalProperty('notProd', ({ anwsers }) => !anwsers.isProd),
    'mustache',
  ],
}
```
<!-- usage -->

<!-- addition -->
<!-- addition -->

## Sponsor

Support code development on patron.

[![patron](https://c5.patreon.com/external/logo/become_a_patron_button@2x.png)](https://www.patreon.com/bePatron?u=22478507)

## Contributing & Development

If there is any doubt, it is very welcome to discuss the issue together.
Please read [Contributor Covenant Code of Conduct](.github/CODE_OF_CONDUCT.md) and [CONTRIBUTING](.github/CONTRIBUTING.md).
npm package: @mili-handlers/ejs
Description: The mili handler used to parse ejs template.
Latest version: 1.0.1
Deprecated: never support mili@4

# @mili-handlers/ejs

[![version](https://img.shields.io/npm/v/@mili-handlers/ejs.svg?style=flat-square)](https://www.npmjs.com/package/@mili-handlers/ejs)
[![downloads](https://img.shields.io/npm/dm/@mili-handlers/ejs.svg?style=flat-square)](https://www.npmjs.com/package/@mili-handlers/ejs)
[![license](https://img.shields.io/npm/l/@mili-handlers/ejs.svg?style=flat-square)](https://www.npmjs.com/package/@mili-handlers/ejs)
[![dependencies](https://img.shields.io/david/Val-istar-Guo/mili-handler-ejs.svg?style=flat-square)](https://www.npmjs.com/package/@mili-handlers/ejs)
[![coveralls](https://img.shields.io/coveralls/github/Val-istar-Guo/mili-handler-ejs.svg?style=flat-square)](https://coveralls.io/github/Val-istar-Guo/mili-handler-ejs)



<!-- description -->
The mili handler used to parse ejs template.
<!-- description -->

## Usage

<!-- usage -->
```javascript
import ejs from '@mili-handlers/ejs'

const rules = {
  // the ext(.ejs) will be removed by ejs handler
  path: 'file_path.ejs',
  handlers: [ejs],
}
```
<!-- usage -->

<!-- addition -->
<!-- addition -->

## Sponsor

Support code development on patron.

[![patron](https://c5.patreon.com/external/logo/become_a_patron_button@2x.png)](https://www.patreon.com/bePatron?u=22478507)

## Contributing & Development

If there is any doubt, it is very welcome to discuss the issue together.
Please read [Contributor Covenant Code of Conduct](.github/CODE_OF_CONDUCT.md) and [CONTRIBUTING](.github/CONTRIBUTING.md).
npm package: @mili-handlers/prettier
Description: The mili handler used to format code by prettier
Latest version: 1.0.1
Deprecated: never support mili@4

# @mili-handlers/prettier

[![version](https://img.shields.io/npm/v/@mili-handlers/prettier.svg?style=flat-square)](https://www.npmjs.com/package/@mili-handlers/prettier)
[![downloads](https://img.shields.io/npm/dm/@mili-handlers/prettier.svg?style=flat-square)](https://www.npmjs.com/package/@mili-handlers/prettier)
[![license](https://img.shields.io/npm/l/@mili-handlers/prettier.svg?style=flat-square)](https://www.npmjs.com/package/@mili-handlers/prettier)
[![dependencies](https://img.shields.io/david/Val-istar-Guo/mili-handler-prettier.svg?style=flat-square)](https://www.npmjs.com/package/@mili-handlers/prettier)
[![coveralls](https://img.shields.io/coveralls/github/Val-istar-Guo/mili-handler-prettier.svg?style=flat-square)](https://coveralls.io/github/Val-istar-Guo/mili-handler-prettier)



<!-- description -->
The mili handler used to format code by prettier.
<!-- description -->

## Usage

<!-- usage -->
```
import prettier from '@mili-handlers/prettier'

const rules = [{
  path: 'file_path',
  handler: prettier({ semi: false })
}]
```
<!-- usage -->

<!-- addition -->
<!-- addition -->

## Sponsor

Support code development on patron.

[![patron](https://c5.patreon.com/external/logo/become_a_patron_button@2x.png)](https://www.patreon.com/bePatron?u=22478507)

## Contributing & Development

If there is any doubt, it is very welcome to discuss the issue together.
Please read [Contributor Covenant Code of Conduct](.github/CODE_OF_CONDUCT.md) and [CONTRIBUTING](.github/CONTRIBUTING.md).
npm package: @milient/init
Description: This is the placeholder package to initialize the [Milient](https://milientsoftware.com/) organization namespace on npm.
Latest version: 1.1.1

# @milient/init

This is the placeholder package to initialize the [Milient](https://milientsoftware.com/) organization namespace on npm.

## Usage

- **As a CLI:**  
  You can run this package using `npx` to get the Milient website URL:

  ```
  npx @milient/init
  ```

  This will print welcome log with url.

- **As a module:**  
  If you import or require this package in your code, it will log an informational message with the website URL.

## More Information

Visit [https://milientsoftware.com/](https://milientsoftware.com/) for more details.
npm package: @milieutic/ui
Description: Vue component library for Milieutic projects
Latest version: 0.1.0

# Milieutic UI

A Vue 3 component library with a focus on clean, reusable components.

## Installation

```bash
npm install @milieutic/ui
```

## Usage

### Register Components Globally

```typescript
// main.ts
import { createApp } from 'vue'
import MilieuticUI from '@milieutic/ui'
import '@milieutic/ui/style.css'

const app = createApp(App)
app.use(MilieuticUI)
app.mount('#app')
```

### Use Components

```vue
<template>
  <MButton 
    color="primary" 
    size="md" 
    text="Click me!"
    @click="handleClick"
  />
</template>
```

### Individual Component Import

```vue
<script setup>
import { Button } from '@milieutic/ui'
import '@milieutic/ui/style.css'
</script>

<template>
  <Button color="primary" size="md">
    Click me!
  </Button>
</template>
```

## Available Components

### MButton

A versatile button component with various styles and states.

Props:
- `type`: 'button' | 'submit' (default: 'button')
- `text`: string (optional)
- `size`: 'sm' | 'md' (default: 'md')
- `color`: 'primary' | 'secondary' | 'error' (default: 'primary')
- `disabled`: boolean (default: false)
- `loading`: boolean (default: false)
- `width`: 'inherit' | 'auto' | 'full' (default: 'inherit')

### Customization

You can customize the theme by overriding CSS variables:

```css
:root {
  --primary-100: #007bff;
  --accent-200: #6c757d;
  --text-200: #374151;
  --text-inverted-100: #ffffff;
  --bg-100: #ffffff;
  --bg-200: #f3f4f6;
  --bg-error: #dc3545;
}
```

## License

MIT