UI 統合

プラグインの UI は React で書き、useNiyase() ブリッジ経由でデータ・通知・ナビにアクセスします。 1 プラグイン = 1 サイドメニュー（役割別に表示が変わる）。

useNiyase() の全面

名前空間	用途
niyase.data	自プラグインの plg_* テーブル CRUD（データモデル）
niyase.core	コアデータ読み取り（社員・部署・スペース、コア API）
niyase.context	{ spaceId, role, audience, activeIndustry, locale, theme, ... }（反応的）
niyase.i18n	業種ごとの用語言い換え（resolveTerm）
niyase.navigate	自プラグイン内のタブ / ルート遷移
niyase.toast	success / error / info 通知
niyase.palette	統合パレットの intent 登録 / 発火

const niyase = useNiyase();

// 反応的コンテキスト購読（テーマ・業種・言語の切替に追従）
useEffect(() => niyase.context.subscribe((ctx) => setTheme(ctx.theme)), []);

// 業種で言い換え（例: 既定「案件」、建設業プリセットで「工事」）
const itemLabel = niyase.i18n.resolveTerm("itemSingular", "案件");

niyase.toast.success("保存しました");
niyase.navigate.toTab("settings");

audience role

manifest.audiences[] で役割別の表示を宣言します。

role	想定ユーザー	表示
executive	経営者・管理者	管理 + 実行のすべてのタブ
employee	社員	実行系タブのみ
customer	取引先	PROVIDER-CLIENT 型で顧客に渡す画面

audience は現在のロールから導出され niyase.context.audience で取得できます。

UI コンポーネント

niyase の UI コンポーネントは @niyase/plugin-sdk/ui から import します（ホストが本物を供給）。

import {
  Button,
  Input,
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@niyase/plugin-sdk/ui";

素の HTML + Tailwind ライクなクラスでも書けます。niyase.context.theme（light/dark）に追従するよう、 色は意味トークンで扱うのが安全です。

3 アプリで同一バンドル

ビルドした 1 つのバンドルが、cloud（Web）・desktop（Electron）・mobile（Expo）で動きます。 通信方式（iframe / WebView + postMessage）の差は SDK が吸収するため、プラグイン側のコードは共通です。

ローカルで見た目を確認

niyase-plugin dev

汎用シェルの中で実際に描画し、DevBar でロール・業種・テーマ・言語を切り替えながら確認できます （セットアップ 参照）。