基盤UI・汎用のコールドテスト — 連載最初の30画面で、群青が業界を問わずどこまで通用するかを試す

`@gunjo/ui` を作るとき、私は「**AI から使えるように設計した**」と書きました。コンポーネントを型つきで一か所からまとめて呼べること、コンポーネントの仕様を機械が読めること、AI にそのまま渡せる説明があること——AI が「眺める」だけでなく「読んでそのまま使える」形を、最初から組み込んだ、と。

[前回](#)と同じ条件です。群青のことをまったく知らない AI エージェント1体に、**公開済みの npm `@gunjo/ui`（alpha.2）と [gunjo.jp](https://gunjo.jp) の docs だけ**を渡す。ソースリポジトリは見せない。まっさらな Next.js（React 19 / Tailwind v4）で、`npm run build` が通るところまで自力で。

条件は毎回同じ。予備知識ゼロの AI に、**公開済みの npm `@gunjo/ui`（alpha.2）と [gunjo.jp](https://gunjo.jp) の docs だけ**を渡す。ソースは見せない。まっさらな Next.js（React 19 / Tailwind v4）で `npm run build` が通るまで自力で。

群青のチャートは SVG じゃなく **HTML/CSS のレイアウト用のコンポーネント**で作ってある。狙いは「**任意のデータで崩れないこと**」。固定された綺麗なサンプルじゃなく、現実の汚いデータ——桁違いのスケール、外れ値、ゼロ、極小値——を入れても破綻しない、を担保したい。

今回は条件を1つだけ変えた。**渡すパッケージを、出荷物そのもの（直前まで直していた最新版）にした。** #3 で見つけた、全体に共通する欠陥——`Tooltip` を使う ~28 コンポーネントが provider 無しで、サーバー側の事前描画（SSR）でクラッシュする問題（[#52](https://github.com/uixhero/gunjo/issues/52)）——を直した版です。条件は相変わらず「**パッケージ＋docs だけ・ソースは見せない**」。そして今回は **「TooltipProvider で包め」というヒントを、あえて…

条件は同じ。**出荷物そのもの（#52/#53 修正入り）＋docs だけ、ソースは見せない、provider のヒントも渡さない。** お題は、名前・ロール・ステータス・参加日・MRR を持つ ~16 行の**ユーザー一覧**に、テキスト検索＋ステータスの Select フィルタ＋列ソート＋ページネーション＋ステータス Badge。

条件は同じ（出荷しているパッケージそのもの＋docs だけを渡し、ソースは非公開、TooltipProvider の巻き方などのヒントも与えない）。お題は、⌘K（と Ctrl+K）で開くパレット、入力での絞り込み、グループ分けされたコマンド（Navigation / Actions / Settings）、アイコン、ショートカットの表示、矢印キー＋Enter でのキーボード操作、選ぶと閉じてトースト、まで。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は `/inbox` に、ローディング（Skeleton）／空（EmptyState）／一覧（Card）の3つの状態を切り替えられる UI と、操作したときのトースト。

#8 のあと「粗さが出尽くし始めた」と書きかけました。でも——**それは早とちりでした**。バグの "種類" は収束してきたけれど、**試した画面の幅が全然足りていない**。特に**操作の重い画面**は一度も通していません。そこに新しい粗さが潜んでいる。だから、作りの複雑な画面から再開します。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は `/upload` に、ドロップゾーン、選択したファイルの一覧（名前・サイズ・種類・削除）、**ファイルごとの進捗バー**、全体の Upload all、そして空状態。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は `/booking` に、日付選択（過去日・満席日は無効）、時間帯の選択、サービス選択、氏名/メール、確定すると内容がまとめに反映される、まで。日付・時刻まわりは、サーバーとブラウザで描画がずれる罠（hydration）や、地域設定（ロケール）の落とし穴が多い、作りの複雑な領域です。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は `/chat` に、メッセージ列（送信者・アバター・時刻・自分/相手の見分け）、入力欄（Enter で送信）、送信後の「入力中…」→返信のシミュレート、空状態。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は `/onboarding` に、5ステップ（Welcome → プロフィール入力 → 設定 → チーム招待 → 完了）、ステップの進み具合の表示、Back/Next、**各ステップの入力が妥当になるまで Next を止める**、完了のまとめ。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は `/pricing` に、3〜4 プランのカード（"Most popular" を強調）、月額/年額トグル（年額は割引で、価格がその場で更新）、機能リスト（✓/✗）、比較表、FAQ。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は `/notifications` に、種別つきの通知列（mention/comment/reaction/system）、アバター、相対時刻、既読/未読＋未読バッジ、全件既読、時間ごとのグループ分け、空状態、スケルトン。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は `/editor` に、メニューバー＋ツールバー、パンくず、左のファイルツリー、中央のタブ＋エディタ、右パネル、下のステータスバー。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は `/search` に、検索バー＋結果件数、フィルタ（カテゴリのチェックボックス・種別の Combobox・タグ）、選択中フィルタのチップ、並べ替え、結果カード、ページネーション、読み込み中→結果→空状態。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は `/profile` に、ヘッダー（アバター・名前・自己紹介・統計）、フォロー/編集、タブ（Posts/About/Activity）、About（メタデータ）、Activity（タイムライン）、編集フォーム（モーダル＋入力チェック）。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は `/settings/notifications` に、チャンネル別（Email/Push/SMS/In-app）のまとめ＋個別トグル、通知レベルの RadioGroup、ダイジェスト頻度の Select、Quiet hours の TimePicker、保存/破棄＋未保存の表示。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は `/dashboard-empty` に、ようこそバナー、値がゼロの Statistic、データが空のチャート、オンボーディングのチェックリスト（Progress）、空のアクティビティ（EmptyState）、フルページの StatusScreen。

条件は同じ（出荷しているパッケージそのもの＋docs だけ、ソース非公開）。お題は `/blog/post` に、パンくず・タイトル・著者・タグ、目次、h2/h3 の本文、リスト、引用、複数の CodeBlock、囲み（callout）、関連記事。

条件はいつも通り（出荷している npm パッケージ＋docs サイトだけ。ソース非公開）。お題は、ナビ・主役ブロック（h1＋CTA）・ロゴの帯・特徴グリッド・指標バンド・お客様の声・価格3プラン・FAQ・最終CTA・フッターの全部入りランディング。

条件はいつも通り（出荷している npm パッケージ＋docs サイトだけ。ソース非公開）。お題は、上部ナビ＋検索（⌘K）、左サイドバー（グループ分けされたナビ・モバイルではドロワー）、パンくず、本文（h1＋クイックスタートの CodeBlock＋囲み＋特徴リスト）、右の「On this page」目次、前へ/次へ、フッター。

条件はいつも通り（出荷している npm パッケージ＋docs サイトだけ。ソース非公開）。お題は、サイドバー＋トップバーの外枠に、**KPI 行・データテーブル（ステータスバッジ・行選択・一括アクション・行メニュー・ソート・ページネーション）・複合フィルタ・編集 Sheet・空状態・読み込み中・トースト**。#4（チャート）/#6（素の table）とは別の、**重い「データ操作」の組み立て**を突きました。

条件はいつも通り（出荷している npm パッケージ＋docs サイトだけ。ソース非公開）。お題は、月/年トグル（価格が実際に変わる）・3〜4プランのカード（1つを「おすすめ」強調）・**機能比較のマトリクス（行=機能・列=プラン・✓/✗/値）**・FAQ・最終 CTA。

条件はいつも通り（出荷している npm パッケージ＋docs サイトだけ。ソース非公開）。お題は、フォルダのサイドバー（未読数つき）・メッセージ一覧（送信者・件名・抜粋・未読・スター・選択・一括操作）・詳細ペイン（本文＋返信ツールバー）・**デスクトップは分割／モバイルは一覧↔詳細を戻るボタンで切替**・空状態・スケルトン。#15 通知センターや #16 エディタとは別の「一覧＋詳細」の組み立てです。

条件はいつも通り（出荷している npm パッケージ＋docs サイトだけ。ソース非公開）。お題は Google カレンダー風の週ビュー: ツールバー（週の移動・Day/Week/Month 切替・新規）・7日×時間軸のグリッド・終日レーン・**イベントブロック（開始/終了から配置・重なりは横並び・カテゴリ色）**・現在時刻ライン・イベント詳細 Popover・空きスロットで作成 Dialog・375px では単日/一覧表示にまとめる。

条件はいつも通り（出荷している npm パッケージ＋docs サイトだけ。ソース非公開）。お題は、フォルダツリー＋パンくず＋検索/ツールバー＋**グリッド/リスト切替**のファイル一覧＋**右クリックメニュー**＋その場でのリネーム＋プレビューペイン＋空状態。

条件はいつも通り（出荷している npm パッケージ＋docs サイトだけ。ソース非公開）。お題は「ワークスペース作成」4ステップ: アカウント→組織→設定→確認。**Next を押すと必須/形式をチェック→止める→その場にエラー表示→最初の不正なフィールドへフォーカス移動**、確認ステップで編集にジャンプ＋規約に同意で送信。**フォームの入力チェックの軸**を初めて深く突きました。

条件はいつも通り（出荷している npm パッケージ＋docs サイトだけ。ソース非公開）。お題は GitHub/Stripe 風の複数セクション設定: 各セクションのフォーム＋検証＋保存、チーム表、招待ダイアログ、そして「ワークスペース名を入力して確定」する危険な操作エリア。