tp-custom

Tweakpane 向けのカスタム Blade 集です。
text, row, plain, textinput, toggle, dynamiclist, imagecontainer, iconbutton などを提供します。

インストール

npm install tp-custom tweakpane @tweakpane/core

• tweakpane と @tweakpane/core は peerDependencies です。
• 利用側プロジェクトで明示的にインストールしてください。

利用手順（最小）

1) スタイルを読み込む

import 'tp-custom/styles';

2) プラグインを登録する

import {Pane} from 'tweakpane';
import {registerCustomPlugins} from 'tp-custom';

const pane = new Pane({container: document.querySelector('#pane')!});

registerCustomPlugins(pane, [
  'plain',
  'text',
  'row',
  'textinput',
  'toggle',
  'dynamiclist',
  'imagecontainer',
  'iconbutton',
]);

3) コンテナに tp-custom クラスを付ける

<div id="pane" class="tp-custom"></div>

tp-custom.scss の一部スタイルは .tp-custom を前提にしています。
このクラスがないと、特にトグル等の見た目が崩れます。

直接 import 例

import {
  PlainBladePluginBundle,
  RowBladePluginBundle,
  TextInputBladePluginBundle,
} from 'tp-custom';

pane.registerPlugin(PlainBladePluginBundle);
pane.registerPlugin(RowBladePluginBundle);
pane.registerPlugin(TextInputBladePluginBundle);

注意点

• Canvas のモザイク/反転などの加工ロジックはライブラリ本体ではなく利用側責務です。
• このリポジトリの Storybook 実装はデモ用途です。