open-index/open-npm huggingface dataset:
npm package: @spicato-inc/leggiero
Description: 画像圧縮ツール
Author: spicato inc.
Latest version: 2.1.0

# leggiero

**leggiero** は [sharp](https://sharp.pixelplumbing.com/) を用いた画像圧縮ツールです。

『leggiero』 とは、音楽用語で「軽やかで優美に」という意味を持ち、画像ファイルを軽くするという意図を込めています。

このツールを使うと、JPEG、PNG、GIF などの画像を圧縮し、元のディレクトリ構造を保持したまま出力先に保存できます。また、WebP, AVIF 形式への変換にも対応しています。（ただし、ファイル名に「no-webp, no-avif」が含まれている場合は変換をスキップします。）

なお、SVG ファイルについては、圧縮せずにそのままコピーします。

> [!CAUTION]
> 社内ツールのため突然の仕様変更や削除がある可能性があります。予めご了承ください。
> もし利用する場合は、ダウンロードしてローカルで実行することをお勧めします。

## 特徴

- **all モード** - 指定したディレクトリ内の全画像を再帰的に処理します
- **watch モード** - 指定したディレクトリの画像変更を監視し、変更時に自動処理します
- 元ディレクトリと同じ構造を出力先にも再現します
- 圧縮品質やパスを柔軟にカスタマイズ可能

## インストール

leggiero をインストールすると、必要な依存パッケージ（sharp, onchange）も自動的にインストールされます。

```bash
# グローバルインストール
npm install -g @spicato-inc/leggiero

# または、プロジェクト内でのインストール
npm install --save-dev @spicato-inc/leggiero
```

## 使い方

### 圧縮 (all モード)

指定したディレクトリ内の全画像を圧縮します。

```bash
leggiero all <入力ディレクトリ> [出力ディレクトリ]
```

例:

```bash
leggiero all src/assets/images dist/img
```

### 監視 (watch モード)

指定したディレクトリを監視し、画像に変更があった場合に自動で処理を行います。

```bash
leggiero watch <入力ディレクトリ> [出力ディレクトリ]
```

例:

```bash
leggiero watch src/assets/images dist/img
```

### 設定ファイル

プロジェクトのルートディレクトリに `.leggierorc` ファイルを作成することで、設定をカスタマイズできます。

```json
{
  "quality": {
    "jpg": 70,
    "png": 70,
    "gif": 70,
    "webp": 70,
	"avif": 70
  },
  "only": false,
  "webp": true,
  "avif": false,
  "input": "src/img",
  "output": "dist/assets/img"
}
```

設定ファイルの詳細:

- `quality`: 各フォーマットの圧縮品質 (0-100)
- `only`: 変換後の画像を指定フォーマットのみにするかどうか (boolean | 'webp' | 'avif')
- `webp`: 変換後にWebP形式の画像も生成するかどうか (boolean)
- `avif`: 変換後にAVIF形式の画像も生成するかどうか (boolean)
- `input`: 入力ディレクトリパス
- `output`: 出力ディレクトリパス

注意点:

- 設定ファイルが存在しない場合は、デフォルト値が使用されます
- コマンドライン引数が指定された場合、設定ファイルの値より優先されます
- 数値が大きいほど高品質になりますが、ファイルサイズも大きくなります

## 内部動作

1. **all モード**:
   - 指定したディレクトリ内のファイルをすべて再帰的に走査します
   - 対応するファイル (jpg, png, gif, svg) のみを処理します
   - 出力先にディレクトリ構造を再現して保存します

2. **watch モード**:
   - `onchange` ライブラリを使って、指定ディレクトリの変更を監視します
   - 変更があったファイルのみを処理します

3. **処理内容**:
   - JPEG, PNG, GIF: 指定した品質で圧縮し保存
   - SVG: そのままコピー
   - WebP: 上記のすべての形式を追加でWebP形式にも変換 (no-webp除外)

## ディレクトリ構造

``` plaintext
leggiero/
├── bin/                # 実行ファイル
├── schemas/            # JSONスキーマ
├── sharp/              # 画像処理スクリプト
├── templates/          # テンプレートファイル
├── utils/              # ユーティリティ関数
└── README.md           # このファイル
```

## ライセンス

MIT License
© spicato inc.
npm package: @spicenet-io/spiceflow-ui
Description: Spiceflow UI SDK
Latest version: 2.4.7

# SpiceFlow UI SDK

A React component library for building DeFi swap interfaces with multi-chain support.

## Installation

```bash
npm install @spicenet-io/spiceflow-ui
```

## Usage

```tsx
import { SwapWidget, SpiceFlowProvider } from "@spicenet-io/spiceflow-ui";
import "@spicenet-io/spiceflow-ui/styles.css";

function App() {
  return (
    <SpiceFlowProvider
      provider="privy"
      privyAppId="your-privy-app-id"
      dynamicEnvironmentId="your-env-id"
      paraApiKey="your-para-api-key"
      paraAppName="your-app-name"
    >
      <SwapWidget
        swapBatches={swapBatches}
        supportedChains={[1, 137, 42161]}
        showSlippageSettings={true}
        enableFlipSwap={true}
        theme="dark"
      />
    </SpiceFlowProvider>
  );
}
```

## Components

- **SwapWidget** - Main swap interface component
- **AssetSelector** - Token selection component
- **SpiceDeposit** - Deposit modal component
- **StatusDisplay** - Transaction status display
- **ProviderLogin** - Wallet connection component
- **DebugWidget** - Development debugging component
- **Button**, **Input**, **Modal** - UI primitives

## Development

### Building the Library

```bash
npm run build
```

### Type Checking

```bash
npm run typecheck
```

### Linting

```bash
npm run lint
npm run lint:fix
```

## Component Playground

This repository includes a lightweight React playground app for viewing and testing all components without the complexity of Storybook.

### Running the Playground

1. Install dependencies (if not already done):

   ```bash
   npm install
   ```

2. Navigate to the playground directory:

   ```bash
   cd playground
   ```

3. Install playground dependencies:

   ```bash
   npm install
   ```

4. Start the development server:

   ```bash
   npm run dev
   ```

   The playground will open automatically at `http://localhost:3000`

### Using the Playground

- **Left Sidebar**: Browse available components
- **Main Area**: View the selected component with different example variants
- **Example Tabs**: Switch between different states/examples for each component

### Adding a New Component Example

To add a new example variant for a component:

1. Open `playground/src/ComponentRegistry.tsx`
2. Find the component's entry in the `examples` object
3. Add a new entry to the array:
   ```tsx
   {
     label: 'Your Example Name',
     render: () => <YourComponent {...props} />,
   }
   ```

The playground will automatically pick up the new example and display it as a tab.

## License

MIT
npm package: @spices/ginger-body
Description: Customize the body from the GingerView instance
Author: Alexandre Masy
Latest version: 1.0.3

# Ginger Body Plugin

Allows the alteration of the HTML body directly from the ginger views. 
e.g. Change the bodyClass of the document based on dynamically loaded data


## Setup

1. Install the plugin

```
yarn add @spices/ginger-body
```

2. Declare the plugin

```
import { GingerBodyPlugin } from '@spices/ginger-body'

app.use(VueGinger, {
  plugins: [{ optins: {}, plugin: GingerBodyPlugin }]
})
```
npm package: @spices/ginger-head
Description: Customize the head from the GingerView instance
Author: Alexandre Masy
Latest version: 1.0.1

# Ginger Head Plugin

Allows the alteration of the HTML header directly from the ginger views. 
e.g. Change the title of the document based on dynamically loaded data


## Setup

1. Install the plugin

```
yarn add @spices/ginger-head
```

2. Declare the plugin

```
import { GingerHeadPlugin } from '@spices/ginger-head'

let opts = {
  key: 'ABC'
}

app.use(VueGinger, {
  plugins: [{ optins: opts, plugin: GingerHeadPlugin }]
})
```

## Configuration

## Declare head from the view

## Trigger an update from a view