AI にファイルブラウザを作らせてみた — 直した穴が全部「武器」になって返ってきた回（やってみた #28）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。今回は ファイルブラウザ / ファイルマネージャ（Finder / Google Drive 風）。

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

結果 — 4.5/5

tsc/build 緑・console 0・hydration なし・h1 1個・ファイルは role=option/aria-selected の listbox・tree キーボード・context menu role=menu・375px overflow 0・グリッドは2列に reflow。

この回の主役 — 直した穴が全部「武器」になってた

cold AI が「baked-in な a11y の良さ」として名指ししたもの、全部これまでの修正:

「見つけて直す→次の回で検証される」ループが、ついに "次の回が前の修正を称賛する" 段階に来た。 TS フリクションゼロ・全型 export 済み。

4.5/5 を阻んだ穴 — やっぱり「選べるコレクション」が無い

選択可能な item-grid primitive が無い（#135 を grid に拡張）。 グリッド/リスト両ビューが共有する選択モデル（単/Cmd/Shift-range・role=option・checkbox・Enter で開く・ダブルクリックで移動）を ~250行手巻き。

面白いのは: AssetGrid/AssetCard は選択モデルを持ってた（selectedIds/selectionMode）——でも media-library 型（thumbnail-first・button/pressed・list view も checkbox も folder もメニューも無し）で、ファイルマネージャには合わず手巻きに。＝「選択を持つコレクション」という核 primitive が #26 リスト・#28 グリッドで2回名指し。

今ラウンドの修正（全部 src・非破壊）

• #147 TreeView: chevron を独立ヒット領域に → フォルダを「選択せず展開」できる（ブラウザ実証: chevron クリックで aria-expanded だけ反転）。
• #148 Breadcrumb: items＋maxItems でパスを自動省略（中間を ellipsis メニューに畳む）。
• #149 Checkbox: label/description 追加（Switch #130 と同型・ラベル付けを caller 任せにしない）。

学び — ループが複利で効いてる

#1〜#27: 見つけて直す（src/Codex）→ 次の回で cold AI が検証
#28:     直した穴が "DS の強み" として総取りで称賛される段階に
残る核:  「選択を持つコレクション」primitive（list #135 ＋ grid #28）

毎ラウンドの小修正は捨てコストじゃなく "次の信頼性" に複利で積まれる——#28 はそれが一番はっきり出た回。残る大物は scheduler(#142)・typography(#110)・選べるコレクション(#135)の "未実装の核 primitive" 群。

次回予告（やってみた #29）

• エラー画面 / 設定ウィザード / ダッシュボード設定 ほか。

試す

• gunjo.jp ／ npm @gunjo/ui ／ GitHub
• 前回まで: #1〜#27
• GunjoUI by UIXHERO

まだ alpha。直した穴が武器になって返ってくる——ループが複利で回り始めた回。

---

<!-- 公開前: 相互URL差込／スクショ確定／EN(dev.to)ミラー -->