configurePanel

configurePanel の初期化契約と、PanelConfig.domTweaker による開発用クラスエディターの設定。

PanelConfig.domTweaker

configurePanel 全体のリファレンスは現在 英語版を参照してください。このページでは domTweaker の設定を日本語で説明します。

PanelConfig に domTweaker オブジェクトを置くと、パネルのヘッダーに DOM Tweaker のトグルが現れます。設定を省略したホストではトグルを表示せず、以前の有効状態が localStorage に残っていても DOM Tweaker を起動しません。

export interface DomTweakerConfig {
  themeCss?: string;
}

export interface PanelConfig {
  // ...ほかのフィールド...
  domTweaker?: DomTweakerConfig;
}

空のオブジェクトでも有効化できます。ホスト固有の Tailwind v4 テーマを候補表示とブラウザーランタイムへ渡したい場合だけ、themeCss を指定します。

configurePanel({
  // ...必須フィールド...
  domTweaker: {
    themeCss: `
      @theme {
        --color-brand: oklch(0.62 0.2 285);
        --spacing-card: 1.5rem;
      }
    `,
  },
});

バリデーション

• domTweaker は JSON にシリアライズできるプレーンオブジェクトでなければなりません。null、配列、関数は受け付けません。

• v1 で使える子フィールドは themeCss だけです。未知のフィールドや文字列以外の値は configurePanel がエラーにします。

• themeCss に @import を含めることはできません。DOM Tweaker が preflight を読み込まない状態を守り、外部スタイルシートをこの経路へ持ち込ませないためです。

操作方法、themeCss の役割、対応範囲については DOM Tweakerを参照してください。