lib/theme.css のトークンと lib/components.css の標準コンポーネントを表示するプレビュー画面。
右上の 🌙 / ☀ ボタンで light / dark を切り替えて両方確認できる。
ここで使われているボタン・入力欄・カードは全ツールで共通の見た目になる。
0. Header（.app-back-btn / .app-title-icon / .app-title）
標準ヘッダー: [← 戻る] [アイコン] タイトル … [テーマ切替] [sync]
← 戻る
📊
Sample Tool Name
← 戻る
🎨
DesignPocket
← 戻る
📝
Text Counter
1. Colors（lib/theme.css のトークン）
Surface / Text
Semantic（用途ベース）
Accent (Primary)
--accent — テーマカラー
Utility Palette（タグ・装飾・差別化用）
2. Surfaces & Shadows
Out (small)
--shadow-out-sm
Out (default)
--shadow-out
Out (large)
--shadow-out-lg
3. Buttons（lib/components.css の .btn）
クリックすると押し込みアニメ（shadow-out → shadow-in）が確認できます
4. Form inputs（lib/components.css の .form-input）
入力欄をクリック（フォーカス）すると shadow-in が深くなります
5. Cards（lib/components.css の .app-card）
2枚目のカードは hover で右上に rename/delete ボタンが出る（タッチデバイスは常時表示）
6. Empty State（lib/components.css の .app-empty）
✦
アイテムがありません
「＋ 新規作成」から最初のアイテムを追加
7. Modal（lib/components.css の .modal-*）
クリックすると実際のモーダルが開く。背景クリック・× ボタン・キャンセル・OK のいずれでも閉じられる。
8. Toast（lib/components.css の .toast）
画面下部にトーストが表示される（2.2 秒で自動消去）。.success / .error クラスで色が変わる。
9. Drive Sync UI（lib/drive-sync.css の状態別）
data-signed-in / data-status 属性でドット色とボタン表示が切り替わる。これらは静的モック（クリックしても何もしない）。
12. Select（lib/components.css の .select）
13. Switch（lib/components.css の .switch）
14. Slider（lib/components.css の .slider）
15. Tab Bar（lib/components.css の .tab-bar）
画面切替用。クリックで active が移動する（プレビューの JS で実装）。
16. Segmented Control（lib/components.css の .segmented）
値の選択用（タブと違って画面切替ではない）。複数選択肢の中から1つ選ぶ場面に使う。
17. Badge（lib/components.css の .badge）
Semantic
Default
Primary
Success
Danger
Warning
Info
Utility Palette
Purple
Pink
Orange
Teal
Indigo
18. Progress（lib/components.css の .progress）
19. Spinner（lib/components.css の .spinner）
20. Custom Dropdown（lib/components.css の .dropdown）
ボタンをクリックでメニュー開閉。項目クリックで閉じる。.active で選択中を示す。
21. Picker（lib/components.css の .picker + .color-field）
.color-field は swatch と hex テキストが連動。swatch を変えると hex が更新され、hex に #RRGGBB を入力すると swatch が追従する。
22. Knob（lib/components.css の .knob — 静的ビジュアルのみ）
静的な見た目のみ。--knob-angle で針の角度を制御。ドラッグ操作が必要な場合は別途 JS を実装する。
23. Range Control（lib/components.css の .range-control — 2-handle）
2つの thumb をドラッグして範囲を指定する。fill 部分が accent カラーで塗られる。
24. Divider（lib/components.css の .divider）
水平区切り線（.divider）
ラベル付き区切り線（.divider-label）
or
左
右（.divider-vertical）
25. Alert（lib/components.css の .alert）
✕
同期エラー
Google Drive との接続に失敗しました。ネットワークを確認してください。
26. Tooltip（lib/components.css の .tooltip-parent[data-tooltip]）
要素に data-tooltip="テキスト" と .tooltip-parent を追加するだけ。デフォルトは上方向、.tooltip-bottom で下方向。
27. Scrollbar（lib/components.css のグローバルスタイル）
縦スクロール
このボックスの中を
スクロールして
カスタムスクロールバーを
確認してください。
neumorphism の bg に
馴染む細いバーが
表示されるはずです。
hover でバーが
少し濃くなります。
end.
横スクロール — このテキストは十分に長いので、右にスクロールするとカスタムスクロールバーが横方向に表示されます。確認してみてください。end.
28. Skeleton（lib/components.css の .skeleton）
データ読み込み中の仮表示。シマーアニメーションが左→右に流れる。
29. Avatar（lib/components.css の .avatar）
30. Chip（lib/components.css の .chip — removable tag）
React
TypeScript
Figma
Active
Blocked
badge は表示のみ。chip は × ボタンで削除できる。フィルター選択やタグ入力に使う。
31. Table（lib/components.css の .table）
| 名前 | タイプ | ステータス | 更新日 |
|---|
| users | Table | Active | 2026/04/09 |
| orders | Table | Active | 2026/04/08 |
| products | View | Draft | 2026/04/07 |
| sessions | Table | Error | 2026/04/06 |
.table-card で角丸の card wrapper。hover で行がハイライト。badge と組み合わせ可。
32. Accordion（lib/components.css の .accordion）
プロジェクト名、言語、タイムゾーンなどの基本的な設定項目をここに配置します。.open クラスで初期展開。
キャッシュ、パフォーマンス、デバッグオプションなどの上級者向け設定。
プロジェクトの削除、データのリセットなど取り消し不可能な操作。
クリックで開閉。▾ アイコンが回転。.open を JS で付け外しする。
33. Typography
H1 32Heading 1 — yuto's dev tools
H2 24Heading 2 — section title
H3 18Heading 3 — subsection
Body 14Body text. The quick brown fox jumps over the lazy dog. 日本語サンプルも確認。
Small 12Small caption — secondary info
Mono 12--font-mono · code · 2026-04-09
35. List Chip（lib/components.css の .list-chip）
アイコン付きトグル選択リスト。エフェクト選択・機能ON/OFF等に使う。クリックで .active を切替。