open-index/open-npm huggingface dataset:
npm package: @hiloenergie/capacitor-plugin-android-minimize
Description: Capacitor plugin for minimizing app
Author: Hilo Energie
Latest version: 0.0.12

# @hiloenergie/capacitor-plugin-android-minimize

Capacitor plugin for minimizing app

## Install

```bash
npm install @hiloenergie/capacitor-plugin-android-minimize
npx cap sync
```

## API

<docgen-index>

* [`minimizeApp()`](#minimizeapp)

</docgen-index>

<docgen-api>
<!--Update the source file JSDoc comments and rerun docgen to update the docs below-->

### minimizeApp()

```typescript
minimizeApp() => any
```

**Returns:** <code>any</code>

--------------------

</docgen-api>
npm package: @hiloenergie/capacitor-plugin-insets
Description: Capacitor plugin to obtain insets from platform screen
Author: Hilo Energie
Latest version: 0.0.11

# @hiloenergie/capacitor-plugin-insets

Capacitor plugin to obtain insets from platform main view (Ex: Notch area, safe area)

## Install

```bash
npm install @hiloenergie/capacitor-plugin-insets
npx cap sync
```

## API

<docgen-index></docgen-index>

<docgen-api>
<!-- run docgen to generate docs from the source -->
<!-- More info: https://github.com/ionic-team/capacitor-docgen -->
</docgen-api>
npm package: @hilosiva/oreset
Description: reset.css
Author: Shibata Hironori
Latest version: 3.0.2

# Oreset.css

俺の reset.css （Oreset CSS）

## Oreset の特徴

- 全ての要素は `box-sizing: border-box`
- 不必要な `margin` 、 `padding`、 `border` を排除
- `line-height` は 1.5 　をデフォルトにする
- `line-break: strict` による禁則処理
- カスタムプロパティで、ベースの文字サイズ、書体、カラーなどをカスタマイズ
- アクセシビリティに考慮

## ブラウザサポート

- Google Chrome 114 –
- Edge 114 –
- Firefox 121 –
- Safari 17.5 –
- Opera 99 –

## ライセンス

MIT License.
npm package: @hilosiva/postcss-transore
Description: remやem、clampの変換を行うPostCSSのプラグイン
Author: Shibata Hironori
Latest version: 0.1.0

# PostCSS TransOre

PostCSS TransOreは、CSSファイル内で、pxをremやemに変換したり、clamp関数を計算したりするのに便利なプラグインです。

## インストール

```zsh
npm i @hilosiva/postcss-transore -D
```

postcss.config.js などの設定ファイルに読み込み


```javascript
module.exports = {
  plugins: [
    require("@hilosiva/postcss-transore"),
  ],
};
```

## 利用できる関数

### `pxtorem(px: number)`

pxからremに変換する関数、引数にはpxの値（number）を指定します。


```css
h2 {
  font-size: pxtorem(24);
}
```

↓

```css
h2 {
  font-size: 1.5rem;
}
```

### `pxtoem(px: number, base?: number)`

pxからemに変換する関数、引数には変換するpxの値（number）と、ベースとなるpxの値（number）[default: 16]を指定します。

```css
h2 {
  font-size: pxtoem(24);
  margin-top: pxtoem(24, 24);
}
```

↓

```css
h2 {
  font-size: 1.5em;
  margin-top: 1em;
}
```


### `fluid(minSize: number, maxSize: number, minViewPort?: number, maxViewPort?: number)`

最小値のpx（number）と最大値のpx（number）から推奨値を計算し `clamp()` を返す関数です。
minViewPort[default: 375]や、maxViewPort[default: 1920]を指定することで可変するビューポートを指定可能です。


```css
h2 {
  font-size: fluid(16, 24);
}
```

↓

```css
h2 {
  font-size: clamp(1rem, 0.8786407766990291rem + 0.517799352750809vw, 1.5rem);
}
```


## オプション

### minViewPort

`fluid()`の最小ビューポートのデフォルト値を変更できます。（default: 320）

```javascript
module.exports = {
  plugins: [
    require("@hilosiva/postcss-transore", {
      minViewPort: 320
    }),
  ],
};
```



### maxViewPort

`fluid()`の最大ビューポートのデフォルト値を変更できます。（default: 1920）

```javascript
module.exports = {
  plugins: [
    require("@hilosiva/postcss-transore", {
      maxViewPort: 1440
    }),
  ],
};
```
npm package: @hilosiva/rola
Description: Rola is JavaScript library for managing IntersectionObserver and scroll-based animations.
Author: Shibata Hironori
Latest version: 0.2.5

# Rola

![Rola](/docs/public/ogp.png)

[![npm version](https://badge.fury.io/js/@hilosiva%2Frola.svg)](https://badge.fury.io/js/@hilosiva%2Frola)

Rola は、スクロールマネジメントライブラリです。
IntersectionObserver によるビューポート内の要素の監視とスクラブ機能をパフォーマンスに考慮して提供します。

Rola は スクロールによる要素の状態を HTML の属性や CSS カスタムプロパティにセットすることにフォーカスしているため、
あとは、あなたの CSS の知見を使って自由にアニメーションを作成することが可能です。

## ドキュメント

Rolaの詳しい使い方は[ドキュメント](https://hilosiva.github.io/rola/)をご確認ください。


## インストール

### CDN

```html
<script src="https://cdn.jsdelivr.net/npm/@hilosiva/rola@0.2.5/dist/rola.min.js" defer></script>
```

### NPM

```
npm i -D @hilosiva/rola
```

```javascript [main.js]
import Rola from "@hilosiva/rola";
```

## セットアップ

### 基本

スクロールアニメーションをトリガーしたい HTML の要素をセレクターとして、Rola に要素の監視を登録します。

```html
<div data-rola-trigger>...</div>
```

```javascript
new Rola("[data-rola-trigger]");
```

これで、トリガー要素に `data-rola-inview="false"` がセットされ、トリガー要素がビューポート内に入った時に、`data-rola-inview` が　`true` に切り替わります。

## 新機能（v0.2.0）

### 直接スタイル適用

関数を使って動的にスタイルを適用できます：

```javascript
new Rola("[data-rola-trigger]", {
  scrub: true,
  styles: {
    transform: (progress) => `translateX(${progress * 100}px)`,
    opacity: (progress) => `${progress}`
  }
});
```

### 複数ターゲット

複数の要素に個別のスタイルを適用できます：

```javascript
new Rola("[data-rola-trigger]", {
  scrub: true,
  targets: [
    {
      selector: ".element1",
      styles: {
        transform: (progress) => `translateX(${progress * 100}px)`
      }
    },
    {
      selector: ".element2", 
      styles: {
        opacity: (progress) => `${progress}`
      }
    }
  ]
});
```

### 改良されたコールバック

オブジェクト形式でvelocity情報も利用できます：

```javascript
new Rola("[data-rola-trigger]", {
  scrub: true
}, ({ element, progress, velocity }) => {
  console.log(`Progress: ${progress}, Velocity: ${velocity}`);
});
```

### アクセシビリティ対応（v0.2.1+）

`prefers-reduced-motion`メディアクエリに対応し、ユーザーの視差効果軽減設定を自動的に尊重します：

```javascript
new Rola("[data-rola-trigger]", {
  scrub: true,
  respectReducedMotion: true, // デフォルト: true
  styles: {
    transform: (progress) => `translateX(${progress * 100}px)`
  }
});
```

ユーザーがシステム設定で「視差効果を減らす」を有効にしている場合、stylesの適用が自動的にスキップされます。強制的にアニメーションを実行したい場合は `respectReducedMotion: false` を設定してください。

**v0.2.2の改善:** スクラブ実行中にユーザーが設定を変更した場合、既に適用されているスタイルも自動的にクリアされるようになりました。


## ライセンス

MIT License
npm package: @hilosiva/vite-plugin-html-loader
Description: Vite用のHTML Loader
Author: Shibata Hironori
Latest version: 0.1.0

# vite-plugin-html-loader

[vite-plugin-html-loader](https://github.com/hilosiva/vite-plugins/packages/vite-plugin-html-loader) は、俺流の Vite 用 HTML ローダーです。



## 特徴

- ルートディレクトリ内のすべての HTML ファイルをビルドできる。

## インストール

■ npm の場合

```console
  npm i @hilosiva/vite-plugin-html-loader -D
```

■ yarn の場合

```console
  yarn add @hilosiva/vite-plugin-html-loader -D
```

■ pnpm の場合

```console
  pnpm i @hilosiva/vite-plugin-html-loader -D
```

## 使用方法

「vite.config.js」でインポートし、プラグインに追加してください。

```javascript
import { defineConfig } from "vite";
import { viteHtmlLoader } from "@hilosiva/vite-plugin-html-loader"; // 追加

export default defineConfig({
  plugins: [
    // 追加
    viteHtmlLoader(),
  ],
});
```
npm package: @hilosiva/vite-plugin-html-oreder
Description: Vite用のHTML Loader
Author: Shibata Hironori
Latest version: 0.1.4
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# vite-plugin-html-oreder

[vite-plugin-html-oreder](https://github.com/hilosiva/vite-plugin-html-oreder) は、俺流の Vite 用 HTML ローダーです。

[![Publish package to GitHub Packages](https://github.com/hilosiva/vite-plugin-html-oreder/actions/workflows/auto-publish.yml/badge.svg?branch=main)](https://github.com/hilosiva/vite-plugin-html-oreder/actions/workflows/auto-publish.yml)

## 特徴

- ルートディレクトリ内のすべての HTML ファイルをビルドできる。

## インストール

■ npm の場合

```console
  npm i @hilosiva/vite-plugin-html-oreder -D
```

■ yarn の場合

```console
  yarn add @hilosiva/vite-plugin-html-oreder -D
```

■ pnpm の場合

```console
  pnpm i @hilosiva/vite-plugin-html-oreder -D
```

> **警告**
>
> vite-plugin-html-oreder は内部で「glob」を利用しています。自動でインストールはされませんので、予めご自身で開発依存関係として追加して下さい。
>
> ```console
> npm i glob -D
> ```

## 使用方法

「vite.config.js」でインポートし、プラグインに追加してください。

```javascript
import { defineConfig } from "vite";
import { viteHtmlOreder } from "@hilosiva/vite-plugin-html-oreder"; // 追加

export default defineConfig({
  plugins: [
    // 追加
    viteHtmlOreder(),
  ],
});
```
npm package: @hilosiva/vite-plugin-php-loader
Description: Vite用のPHP Loader
Author: Shibata Hironori
Latest version: 0.1.1

# vite-plugin-php-loadder

[vite-plugin-php-loadder](https://github.com/hilosiva/vite-plugins/packages/vite-plugin-php-loadder/) は、俺流の Vite 用 PHP ローダーです。



## 特徴

- PHP ファイルを更新時にライブリロード
- ビルド時に PHP ファイル内に含まれる img 要素のファイルパスを更新
- [Orelop WP](https://github.com/hilosiva/orelop-wp)利用時、ビルド時に開発用を表す定数を「false」に変更

## インストール

■ npm の場合

```console
  npm i @hilosiva/vite-plugin-php-loadder -D
```

■ yarn の場合

```console
  yarn add @hilosiva/vite-plugin-php-loadder -D
```

■ pnpm の場合

```console
  pnpm i @hilosiva/vite-plugin-php-loadder -D
```


## 使用方法

「vite.config.js」でインポートし、プラグインに追加してください。

```javascript
import { defineConfig } from "vite";
import { vitePhpLoader } from "@hilosiva/vite-plugin-php-loadder"; // 追加

export default defineConfig({
  plugins: [
    // 追加
    vitePhpLoader({
      /* オプション */
    }),
  ],
});
```

## オプション

### `entryPoint`

- タイプ： String
- デフォルト： `'assets/scripts/main.js'`

PHP ファイルに読み込ませるエントリーポイントとなる JS ファイルのパス



### `viteHelperFile`

- タイプ： String
- デフォルト： `'lib/ViteHelper.php'`

[Orelop WP](https://github.com/hilosiva/orelop-wp)のヘルパー用 PHP ファイルのファイルパス
npm package: @hilosiva/vite-plugin-php-oreder
Description: Orelop WPで利用するVite用のPHP Loader
Author: Shibata Hironori
Latest version: 0.1.5
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# vite-plugin-php-oreder

[vite-plugin-php-oreder](https://github.com/hilosiva/vite-plugin-php-oreder) は、俺流の Vite 用 PHP ローダーです。

[![Publish package to GitHub Packages](https://github.com/hilosiva/vite-plugin-php-oreder/actions/workflows/auto-publish.yml/badge.svg?branch=main)](https://github.com/hilosiva/vite-plugin-php-oreder/actions/workflows/auto-publish.yml)

## 特徴

- PHP ファイルを更新時にライブリロード
- ビルド時に PHP ファイル内に含まれる img 要素のファイルパスを更新
- [Orelop WP](https://github.com/hilosiva/orelop-wp)利用時、ビルド時に開発用を表す定数を「false」に変更

## インストール

■ npm の場合

```console
  npm i @hilosiva/vite-plugin-php-oreder -D
```

■ yarn の場合

```console
  yarn add @hilosiva/vite-plugin-php-oreder -D
```

■ pnpm の場合

```console
  pnpm i @hilosiva/vite-plugin-php-oreder -D
```

> **警告**
>
> vite-plugin-php-oreder は内部で「glob」を利用しています。自動でインストールはされませんので、予めご自身で開発依存関係として追加して下さい。
>
> ```console
> npm i glob -D
> ```

## 使用方法

「vite.config.js」でインポートし、プラグインに追加してください。

```javascript
import { defineConfig } from "vite";
import { vitePhpOreder } from "@hilosiva/vite-plugin-php-oreder"; // 追加

export default defineConfig({
  plugins: [
    // 追加
    vitePhpOreder({
      /* オプション */
    }),
  ],
});
```

## オプション

### `entryPoint`

- タイプ： String
- デフォルト： `'assets/js/main.js'`

PHP ファイルに読み込ませるエントリーポイントとなる JS ファイルのパス

### `proxy`

- タイプ： String
- デフォルト： `'http://localhost:80'`

PHP が実行しているサーバー URL

### `viteHelperFile`

- タイプ： String
- デフォルト： `'lib/ViteHelper.php'`

[Orelop WP](https://github.com/hilosiva/orelop-wp)のヘルパー用 PHP ファイルのファイルパス

### `reloadOnChange`

- タイプ： Boolean
- デフォルト： true

PHP ファイルの更新時にライブリロードを行うかどうか
npm package: @himadajin/vscode-components
Description: React component library for building VS Code-like interfaces.
Latest version: 0.1.0

# @himadajin/vscode-components

React components for building VS Code-like interfaces.

This package is currently in alpha. The API, styling, and package contents may change without notice.

## Requirements

- React 19 and React DOM 19
- A browser-based React app, including VS Code webviews
- A bundler that can import CSS from npm packages, such as Vite

## Installation

```sh
npm install react react-dom @himadajin/vscode-components
```

## Usage in VS Code webviews

```tsx
// main.tsx
import '@himadajin/vscode-components/styles.css';
import { Example } from './Example';

export function App() {
  return <Example />;
}
```

```tsx
// Example.tsx
import { Button } from '@himadajin/vscode-components';

export function Example() {
  return <Button>Run</Button>;
}
```

Import `@himadajin/vscode-components/styles.css` once in your webview entry file, such as `main.tsx`.

## Usage on the web

```tsx
// main.tsx
import '@himadajin/vscode-components/styles.css';
import '@himadajin/vscode-components/theme/defaults.css';
import { Example } from './Example';

export function App() {
  return <Example />;
}
```

```tsx
// Example.tsx
import { Button } from '@himadajin/vscode-components';

export function Example() {
  return <Button>Run</Button>;
}
```

In a regular web app, import `@himadajin/vscode-components/styles.css` and `@himadajin/vscode-components/theme/defaults.css` once in your app entry file, such as `main.tsx` or `App.tsx`.