# BONE FLOW #021 UI Parts Shape Pack / v1.0.89 Candidate

## 目的
仕様書・UI画面設計・説明図に使う **SVG静的Shape**。クリックして入力する実動作UIではない。既存40種類を保持し、追加42種類を **同じ `bone-shapes.json`** に登録する。別のShape定義JSONや直書きJavaScriptは作らない。

## ファイル
- `boneflow/js/bone-shape.js`：#021 SVG描画Runtime
- `boneflow/css/bone-shape.css`：SVG見た目（`[data-category="ui-parts"]` に限定したCSS）
- `boneflow/data/bone-shapes.json`：既存40種類＋追加42種類のアセット定義
- `boneflow/test/bone-shape-ui-parts.html`：表示サンプル／一覧ボタン
- `boneflow/test/bone-shape.html`：TYPE一覧ボタン（Installerは差分追加のみ）

## HTML記入例
以下は #021 のHTML Functional Classを利用する静的図形の記述例。`?v=...` 等のURLクエリを付けない。

```html
<link rel="stylesheet" href="../css/bone-shape.css">
<span class="bf-inline-shape" data-shape-type="CALENDAR_MONTH" data-inline-size="120"></span>
<span class="bf-inline-shape" data-shape-type="TIMELINE_BAR" data-inline-size="120"></span>
<span class="bf-inline-shape" data-shape-type="COLOR_PICKER_UI" data-inline-size="120"></span>
<script src="../js/bone-shape.js"></script>
```

### JavaScript APIの例
```js
await BoneShape.load('../data/bone-shapes.json');
const ui = BoneShape.create({type:'COMBOBOX_UI',theme:'light',label:''}, {thumbnail:true});
document.querySelector('#preview').append(ui);
```

### テーマとサイズ
`data-theme="light"` / `dark` / `neon`、`data-inline-size="80"` 等。図形はSVGなので拡縮はベクターで行われる。本文ラベルのFITと装飾中の固定文字は別物。UI Partsの内部文字はアセットで定義された初期表示文字であり、実入力値ではない。

## TYPE一覧

### 基本UI

| TYPE | 表示名 | 用途 |
|---|---|---|
| `WINDOW_FRAME_UI` | ウィンドウ枠 | タイトルと内容領域を持つ画面枠 |
| `WINDOW_CONTROL_MINIMIZE` | 最小化 | ウィンドウを最小化するボタン |
| `WINDOW_CONTROL_MAXIMIZE` | 最大化 | ウィンドウを最大化するボタン |
| `WINDOW_CONTROL_RESTORE` | 元に戻す | 最大化前の大きさに戻すボタン |
| `WINDOW_CONTROL_CLOSE` | 閉じる | ウィンドウを閉じるボタン |
| `BUTTON_RECT` | ボタン | 標準操作ボタン |
| `BUTTON_ICON` | アイコンボタン | アイコンのみの操作ボタン |
| `BUTTON_SPLIT` | スプリットボタン | 主操作と候補の分割ボタン |
| `CHECKBOX_UI` | チェックボックス | ON/OFF選択 |
| `RADIO_BUTTON_UI` | オプションボタン | 単一選択 |
| `TEXTBOX_UI` | テキストボックス | 1行文字入力 |
| `COMBOBOX_UI` | コンボボックス | 候補付き入力 |
| `TOAST_UI` | トースト通知 | 簡易通知 |
| `DIALOG_UI` | ダイアログ | モーダルダイアログ |
| `TAB_UI` | タブ | タブ切替見出し |
| `MENU_UI` | メニュー | 操作候補の一覧 |

### カレンダー

| TYPE | 表示名 | 用途 |
|---|---|---|
| `CALENDAR_MONTH` | 月カレンダー | 1か月の予定表示 |
| `CALENDAR_WEEK` | 週カレンダー | 1週間の予定表示 |
| `CALENDAR_DAY_CELL` | 日付セル | 通常の日付セル |
| `CALENDAR_DAY_SELECTED` | 選択日セル | 選択状態の日付セル |
| `CALENDAR_DAY_TODAY` | 今日セル | 今日の強調表示 |
| `CALENDAR_DAY_HOLIDAY` | 祝日セル | 祝日の日付 |
| `CALENDAR_DAY_EVENT` | イベントセル | イベントを持つ日付 |
| `CALENDAR_DAY_TASK` | タスクセル | タスクを持つ日付 |
| `CALENDAR_HEADER` | カレンダーヘッダ | 年月と前月/翌月 |
| `CALENDAR_NAV_PREV` | 前へ | 前月/前週へ移動 |
| `CALENDAR_NAV_NEXT` | 次へ | 翌月/翌週へ移動 |

### タイムライン

| TYPE | 表示名 | 用途 |
|---|---|---|
| `TIMELINE_GRID` | 時間グリッド | 時間目盛りと背景格子 |
| `TIMELINE_BAR` | タイムバー | 開始・終了を示す時間帯 |
| `TIMELINE_BAR_RANGE` | 範囲バー | 開始・終了ハンドル付き |
| `TIMELINE_BAR_SELECTED` | 選択バー | 選択中のバー |
| `TIMELINE_VERTICAL` | 縦タイムライン | 時間を縦方向に表す |
| `TIMELINE_HORIZONTAL` | 横タイムライン | 時間を横方向に表す |
| `TIMELINE_LABEL_HOUR` | 時刻ラベル | 時間目盛りの文字 |
| `TIMELINE_MARKER_NOW` | 現在時刻線 | 現在時刻位置 |

### Picker

| TYPE | 表示名 | 用途 |
|---|---|---|
| `DATE_PICKER_UI` | DatePicker | 日付選択UIの概観 |
| `TIME_PICKER_UI` | TimePicker | 時刻選択UIの概観 |
| `DATETIME_PICKER_UI` | DateTimePicker | 日時入力UIの概観 |
| `COLOR_PICKER_UI` | ColorPicker | 色の選択UIの概観 |
| `FILE_PICKER_UI` | FilePicker | ファイル選択UIの概観 |
| `PICKER_POPUP_UI` | Pickerポップアップ | 展開時の選択パネル |
| `OPTION_LIST_UI` | 候補一覧 | 選択候補リスト |

## 安全なインストール
1. 既存 `bone-shapes.json` の40種類を保持する。新しい42種類だけをマージする。
2. JSとCSSは必要なソース差分だけを適用する。照合不能ならインストールを失敗扱いにして既存ファイルを保護する。
3. `bone-shape.html` を丸ごと置換しない。指定ボタンとダイアログのみ差分追加する。
4. #000累積回帰や他のUI/HTMLは変更しない。
5. インストール後は `http://localhost/boneflow/test/bone-shape-ui-parts.html` と `http://localhost/boneflow/test/bone-shape.html` を開く。

## アセットテスト
- 旧40種類のTYPEがすべて保持される
- 新42種類が一意に登録される
- SVG定義に危険なタグや属性が含まれない
- Runtimeによる42種類のSVG生成、分類、一覧ボタン表示と開閉を確認する
- PNG等のビットマップをShape本体へ混ぜない
- IN/OUTの表示や旧40種類の定義を変更しない

状態: Development Candidate / WindowsでのInstaller実行およびユーザーlocalhostは未検証。

## インストールに関する制限（v1.0.89）
インストーラーは既存の回帰テストを改変しません。既存テストで期待値40固定の箇所がある場合、失敗をPASSに置き換えず、結果をそのまま記録してください。
Windows PowerShell 5.1での実行確認、実ユーザーlocalhost及び#000累積回帰は未実施です。インストールエラー原因はユーザーログ未取得のため確定していません。