# 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累積回帰は未実施です。インストールエラー原因はユーザーログ未取得のため確定していません。


## v1.0.90 変更点

- TYPE一覧ダイアログ上部に固定表示の「✕ 閉じる」を追加。テーブルのみスクロールし、上部ボタンを常に操作可能にします。
- 既存 #021 の Shape List に「仕様書用UI (42)」タブを追加し、Registryの ui-parts 分類を既存 BoneShape.create APIで表示します。
- 既存の5分類とSmoke IDを残したまま、分類数の期待値を6へ更新します。


## v1.0.94 Theme / 文章表現 / 絵文字風フォント

- UI PartsはRegistry内42種類、既存40種類は不変。色は `.bone-shape[data-category="ui-parts"].theme-*` のCSS変数でLight/Dark/Neon別に変更します。
- 文章表現: `test/bone-shape-ui-parts-sentence.html` は `bf-inline-shape` を使用します。TYPEはRegistry由来、SVGコードや独自定義JSONを持ちません。
- 絵文字風フォント: `test/bone-shape-ui-parts-emoji.html` は82種類の絵文字風 SVG 一覧です。標準Unicode絵文字やTTFではありません。
- 83文字のTTF/WOFF2をZIPに同梱します。再生成用 `tools/build-shape-font.py` は既存v1.0.10（旧40字）フォントを入力として使い、追加43文字を**専用の認識しやすい単色ピクトグラム**として設計します。
- 既存のフォントの文字コードを保つため、TTFの再生成は自動Installer処理に含めていません。
- 例: `<span class="bf-inline-shape" data-shape-type="CALENDAR_MONTH" data-theme="dark" data-inline-size="40"></span>`
- TTFコード位置は既存40文字がU+E001〜U+E028、追加42文字がU+E029〜U+E052です。

| # | TYPE | PUA | 表示名 |
|---:|---|---|---|
| 1 | START | U+E001 | 開始 |
| 2 | END | U+E002 | 終了 |
| 3 | PROCESS | U+E003 | 処理 |
| 4 | DECISION | U+E004 | 条件分岐 |
| 5 | INPUT_OUTPUT | U+E005 | 入出力 |
| 6 | SUB_PROCESS | U+E006 | サブプロセス |
| 7 | DOCUMENT | U+E007 | ドキュメント |
| 8 | DATABASE | U+E008 | データベース |
| 9 | DATA_STORE | U+E009 | データストア |
| 10 | MANUAL_INPUT | U+E00A | 手動入力 |
| 11 | MANUAL_OPERATION | U+E00B | 手動処理 |
| 12 | PREPARATION | U+E00C | 準備 |
| 13 | DELAY | U+E00D | 遅延 |
| 14 | CONNECTOR | U+E00E | 接続 |
| 15 | OFFPAGE_CONNECTOR | U+E00F | ページ外 |
| 16 | TABLE | U+E010 | テーブル |
| 17 | VIEW | U+E011 | ビュー |
| 18 | API | U+E012 | API |
| 19 | FILE | U+E013 | ファイル |
| 20 | JSON | U+E014 | JSON |
| 21 | XML | U+E015 | XML |
| 22 | CSV | U+E016 | CSV |
| 23 | OBJECT | U+E017 | オブジェクト |
| 24 | IMAGE | U+E018 | 画像 |
| 25 | ICON | U+E019 | アイコン |
| 26 | LABEL | U+E01A | ラベル |
| 27 | PANEL | U+E01B | パネル |
| 28 | GROUP | U+E01C | グループ |
| 29 | MULTI_DOCUMENT | U+E01D | 複数ドキュメント |
| 30 | COLLECTION | U+E01E | コレクション |
| 31 | TABLE_DETAIL | U+E01F | テーブル詳細 |
| 32 | INTERNAL_DETAIL | U+E020 | 内部表現 |
| 33 | STAMP_CIRCLE | U+E021 | 丸印 |
| 34 | STAMP_SQUARE | U+E022 | 角印 |
| 35 | STAMP_OVAL | U+E023 | 楕円印 |
| 36 | STAMP_DATE | U+E024 | データ印 |
| 37 | STAMP_CORRECTION | U+E025 | 訂正印 |
| 38 | SCHEDULE_TRIGGER | U+E026 | スケジュール起点 |
| 39 | JOB | U+E027 | ジョブ |
| 40 | JOBNET | U+E028 | ジョブネット |
| 41 | WINDOW_FRAME_UI | U+E029 | ウィンドウ枠 |
| 42 | WINDOW_CONTROL_MINIMIZE | U+E02A | 最小化 |
| 43 | WINDOW_CONTROL_MAXIMIZE | U+E02B | 最大化 |
| 44 | WINDOW_CONTROL_RESTORE | U+E02C | 元に戻す |
| 45 | WINDOW_CONTROL_CLOSE | U+E02D | 閉じる |
| 46 | BUTTON_RECT | U+E02E | ボタン |
| 47 | BUTTON_ICON | U+E02F | アイコンボタン |
| 48 | BUTTON_SPLIT | U+E030 | スプリットボタン |
| 49 | CHECKBOX_UI | U+E031 | チェックボックス |
| 50 | RADIO_BUTTON_UI | U+E032 | オプションボタン |
| 51 | TEXTBOX_UI | U+E033 | テキストボックス |
| 52 | COMBOBOX_UI | U+E034 | コンボボックス |
| 53 | TOAST_UI | U+E035 | トースト通知 |
| 54 | DIALOG_UI | U+E036 | ダイアログ |
| 55 | TAB_UI | U+E037 | タブ |
| 56 | MENU_UI | U+E038 | メニュー |
| 57 | CALENDAR_MONTH | U+E039 | 月カレンダー |
| 58 | CALENDAR_WEEK | U+E03A | 週カレンダー |
| 59 | CALENDAR_DAY_CELL | U+E03B | 日付セル |
| 60 | CALENDAR_DAY_SELECTED | U+E03C | 選択日セル |
| 61 | CALENDAR_DAY_TODAY | U+E03D | 今日セル |
| 62 | CALENDAR_DAY_HOLIDAY | U+E03E | 祝日セル |
| 63 | CALENDAR_DAY_EVENT | U+E03F | イベントセル |
| 64 | CALENDAR_DAY_TASK | U+E040 | タスクセル |
| 65 | CALENDAR_HEADER | U+E041 | カレンダーヘッダ |
| 66 | CALENDAR_NAV_PREV | U+E042 | 前へ |
| 67 | CALENDAR_NAV_NEXT | U+E043 | 次へ |
| 68 | TIMELINE_GRID | U+E044 | 時間グリッド |
| 69 | TIMELINE_BAR | U+E045 | タイムバー |
| 70 | TIMELINE_BAR_RANGE | U+E046 | 範囲バー |
| 71 | TIMELINE_BAR_SELECTED | U+E047 | 選択バー |
| 72 | TIMELINE_VERTICAL | U+E048 | 縦タイムライン |
| 73 | TIMELINE_HORIZONTAL | U+E049 | 横タイムライン |
| 74 | TIMELINE_LABEL_HOUR | U+E04A | 時刻ラベル |
| 75 | TIMELINE_MARKER_NOW | U+E04B | 現在時刻線 |
| 76 | DATE_PICKER_UI | U+E04C | DatePicker |
| 77 | TIME_PICKER_UI | U+E04D | TimePicker |
| 78 | DATETIME_PICKER_UI | U+E04E | DateTimePicker |
| 79 | COLOR_PICKER_UI | U+E04F | ColorPicker |
| 80 | FILE_PICKER_UI | U+E050 | FilePicker |
| 81 | PICKER_POPUP_UI | U+E051 | Pickerポップアップ |
| 82 | OPTION_LIST_UI | U+E052 | 候補一覧 |

### 手動TTF拡張

`python boneflow/tools/build-shape-font.py <既存BoneShape-Regular.ttf> <出力ディレクトリ>`

実行時に既存40文字が同一であることを比較し、失敗時は生成物を採用しないでください。


### v1.0.94 Label shape

- `LABEL_UI`: #020 Label表示用の静的 SVG（項目名・必須印・補足説明）。
- 登録：既存40 + UI Parts 43 = 83 TYPE。既存82件のShape定義には変更なし。
- 表示確認：UI Parts / 文章表現 / 絵文字風一覧から `LABEL_UI` を選ぶ。
- TTF割当：U+E053（既存42個分のU+E029〜U+E052は不変）。バイナリ同梱なし。
- Windowsインストーラー・ユーザーlocalhost・累積回帰は未検証。


## v1.0.96: TTF本体のダウンロードと使用例

* TTF: `/boneflow/font/shape/v1.0.96/BoneShape-Regular.ttf`（83字、U+E001–U+E053）
* WOFF2: `/boneflow/font/shape/v1.0.96/bone-shape.woff2`
* CSS: `/boneflow/css/bone-shape-font.css`（@font-faceのローカル相対パス）
* 使用サンプル: `/boneflow/test/bone-shape-font.html`
* ダウンロードボタンは本体画面、UI Parts一覧、フォントサンプル内に配置。
* 既存40字の割当U+E001–U+E028不変。追加43字はU+E029–U+E053。
* フォントはモノクロでCSS `color` に追従。Light/Dark/Neonの多色SVGテーマとは異なる。
* HTML使用例：

```html
<link rel="stylesheet" href="../css/bone-shape-font.css">
<span class="bf-shape-font" aria-hidden="true">&#xE053;</span> <!-- LABEL_UI -->
```

配布ZIPへ実フォントバイナリを含め、Installerはバイナリとしてハッシュ検証・バックアップ・Rollbackを行う。
Windows実機インストールおよびユーザーlocalhostは未検証。


## v1.0.96: フォントの視認性修復

- v1.0.95でUI Partsのグリフが四角や点に見えた不具合を修正。原因は背景矩形のフィルの合成と、閉じたパスの内側の穴をフォント輪郭に書き出していなかったことです。
- 新43グリフはUI部品として判別できる単色ピクトグラムに専用設計し、実際のフォントレンダリング画像（`FONT-VISUAL-QA-v1.0.96.png`）で検査しています。旧40グリフは輪郭バイナリ一致で保持。
- HTML使用例のグリフを52pxから76pxへ変更し視認性改善。CSSのフォント参照はバージョン付き**ディレクトリ**へ変更し、クエリ／ハッシュによるバージョン管理は使いません。既存互換パスも保管します。
- TTFは単色フォントです。装飾や文字を含む完全なUI画面はSVG Runtimeで表示してください。
- 最終実ブラウザ／Windows Installer実行はユーザーlocalhost側で確認してください。未実施をPASSにしません。


## v1.0.98: 絵文字風SVG一覧のカード内フィット修正

- `bone-shape-ui-parts-emoji.html` の83種類は、レンダリング後に `bf-inline-shape-host` 全体の実寸を読み取り、各カードのステージ（112×56px）に収まる倍率で縮小します。
- 従来は子 `.bone-shape` のみを縮小し、横長TYPEの親DOMの幅が維持されて隣カードと重なっていました。
- ステージを `position:relative`、親Shapeを中央基準の `position:absolute` として整列させます。
- 描画状態は `SVG描画 X/83 ／ 枠内 X/83` を画面下部に表示します。
- Chromium仮想ページに実Runtime/CSS/Registryを読み込ませたレンダリング試験で、960px・520pxの2画面幅 × Light/Dark/Neonの3テーマ、各83/83が枠内に収まることを確認しました。実HTTP/Windows環境は未検証です。
- テストは実レンダリングDOMの `getBoundingClientRect()` を計測し、枠外の描画状態でPASSにしません。