AI にファイルアップロードを作らせたら、自分のコンポーネントが半完成だった（やってみた #10）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。複雑系に入って #9 Kanban に続き、今回は ファイルアップロード。

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

結果 — 3/5（シリーズ最低点）

npm run build 成功、static prerender、コンソールエラー0。

支える部品（Progress/Button/Badge/EmptyState）と typed barrel は今回も良かった、provider 不要・SSR クラッシュなし。でも主役の FileUploader が、シリーズで一番の地雷だった。

目玉 — FileUploader が半完成で、docs が嘘をついていた

cold AI の報告:

① 進捗が "未実装"。しかも死にコメントが残ってる

FileUploader の内部状態には progress も status もフィールドとしては存在するのに、描画されない。ソースにこう書いてある:

{/* Progress Simulation would go here */}

実装するつもりで放置された死にコメント。なのに docs は「アップロード中の進捗を表示できる」と書いている。＝docs が実体より先に約束してしまっている（over-promise）。これは #7 の「a11y 内蔵が破れてた」と同じ、主張と実体のズレ。→ #62

② uncontrolled で、外から触れない

value prop が無く、onValueChange は最新バッチだけ返す（累積リストを返さない）。さらに内部で独自のファイル行＋削除ボタンを描画するが hook できず、外で自前リストを出すと二重表示。cold AI は [data-slot="file-uploader"] > div:nth-child(2){display:none} の CSS hack で内部リストを隠すしかなかった。「showFileList={false} が欲しい」と。

③ そして、また固定幅（監査の取りこぼし）

Progress が w-[200px]、ProgressWidget が w-[320px] 固定。これ——#58 で「固定幅デフォルトを再監査した」はずなのに、Progress 系を取りこぼしていた。 「class ごと監査」したつもりが、漏れていた。正直に #62 に入れた。

（cold AI 自身の React 19 Strict Mode バグも1個あったが、それは AI 側で自己修正・gunjo とは無関係。正直に記録。）

学び — 一番低い点が、一番誠実

#10 はシリーズ最低の 3/5。でもこれこそ、このシリーズをやる理由です。

• 自分のコンポーネントが半完成（進捗が死にコメント）
• 自分の docs が、実体より先に約束していた（進捗表示の嘘）
• 「監査した」と言った固定幅が、取りこぼしていた

これを自分のテストで、公開前に、自分で見つけた。 盛らない・隠さない——低い点を低いまま出して、issue にして直す。複雑系は、単純画面では絶対に出ない「半完成」と「docs の嘘」を炙り出してくれる。まだ全然枯れてない。

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

• カレンダー予約（Calendar / DatePicker / Select）— 日付まわりの複雑系。

試す

• gunjo.jp ／ npm @gunjo/ui ／ GitHub
• 前回まで: #1〜#9
• 母艦: 群青（@gunjo/ui） ／ なぜ要るのか: AI 時代のデザインシステム論
• GunjoUI by UIXHERO

まだ alpha。半完成も docs の嘘も、見つけたら全部直す。それが青になるということ。

---

<!-- 公開前: #62 反映後に記述更新／スクショ確定／相互URL差込／EN(dev.to)ミラー -->