# Bone Flow #036 - Select

Version: 1.1.22  
Status: Development

## 責務

SELECT Boneの選択UI。

- 親項目はグループ表示で選択不可。
- 子項目だけ選択可能。`value / label / URL / #019 Image設定` を持つ。
- 階層は親→子の1階層のみ。
- 未選択optionは作らない。`null / "" / items外value` はValidation Error、Security BLOCKED。
- `readonly / disabled` を維持する。`required` Propertyは持たない。
- 選択した子項目の`value`をOUTし、URL OUT有効時はURLもOUTする。

## Dropdown

Dropdownは通常overlay。Component本体の外へ表示し、開閉でComponent幅・高さを変えない。表示不良を隠すためのscrollは使用しない。通常最大高を超える大量項目の場合のみDropdown自身をscroll可能にする。

## Label / Image

- Select左側Labelは #020 Bone Labelへ委譲。
- 項目Image/Iconは #019 Bone Image v1.0.64へ委譲。
- #036独自Icon Pickerは持たない。
- #019設定は保存値を変更せず、リスト表示時だけ表示サイズをリスト文字/アイコンサイズへ合わせる。
- Test UIの#019 Image設定はSelect Preview直下へ表示し、対象子項目を選択できる。Alpha固定にはしない。
- Property表示は日本語 / Englishを切り替えられる。

## Layout

親要素を使用OFF: 幅、高さ、表示位置9方向、単体FITを使用。  
親要素を使用ON: 上記単体設定を描画へ使用しない。実際の親要素を参照し、親要素用FITを使用できる。親吸着位置9方向（parentSnap）は持たない。

## Mouse Over Border Effect

Dropdown内の各子項目へのMouse Over時だけ、その項目の枠Effectが発火し、Mouse Outで停止する。value / selected状態とは無関係。Effect描画は #022 Bone Hover Border Effect v1.0.1へ委譲する。

- normal
- neon
- spin
- cross
- blink
- Effect色
- clockwise / counterclockwise
- Effect速度 slow / normal / fast
- spin外周幅（既定2px、1〜24px）
- spin発光量（既定12px、0〜40px）

項目ごとの独立したMouse Over Effect Propertyは存在しない。

## Joint / Security

OUT Deliveryは #002 Bone Joint v1.1.36 `createDeliveryChannel()`へ委譲し、WAIT / FIFO / BLOCKEDを使用する。SecurityはDeliveryとは別責務。接続イメージは正常接続 / IN型不一致 / OUT型不一致の3ケースだけで、本体state/render/value/OUT/Deliveryへ干渉しない。

## v1.1.6 correction

- `normal` は通常の静的な枠だけ。conic-gradient発光を表示しない。
- `neon` はv1.1.3の外周移動線Effectを維持する。
- `spin` はv1.1.1の `conic-gradient + rotate()` 外周発光構造を基準にし、既定は外周幅2px / 発光量12px。外周幅1〜24px、発光量0〜40pxを調整可能。
- v1.1.5で`normal`へ混入していた中央へ向かうconic-gradient発光は削除せず、追加Effect `cross`（日本語: クロス / English: Cross）として分離する。
- `blink` は維持する。Effectは `normal / neon / spin / cross / blink` の5種類。
- すべて各子項目のMouse Over時だけ発火し、Mouse Outで停止する。
- Items Tree、#019各子項目接続、日本語 / English、親要素設定は変更しない。

## v1.1.7 correction

- 各子項目のMouse Over Border Effect描画を #022 Bone Hover Border Effect v1.0.1へ正式委譲。
- #036から#022へ `trigger=mouseover`、Effect種別、色、方向、速度、spinWidth、spinGlowを渡す。
- #036独自のEffect描画DOM/CSSは廃止し、発火条件は従来どおり各子項目Mouse Over / Mouse Outのみ。
- Dropdown、親→子1階層Items、#019 Image、#020 Label、Validation、Security、#002 Delivery、接続イメージ3ケース、Completionは変更しない。

## v1.1.8 correction

- Test UIのItems各子項目に `#019 Image設定` ボタンを持たせ、クリックした子項目をSelect Preview直下の正式#019 Image Editorへ直接bindingする。
- #019 Editorはbinding対象の `gi:ci / value` を保持し、commitした完全な#019設定objectは同じ子項目の `image` にだけ保存する。別Itemへ書き込まない。
- 対象中のItems行は表示上も選択状態を示す。#019 Image Editor自体は従来どおりSelect Preview直下に置き、Items行内へ複製しない。

## v1.1.9 correction

- #019 Image設定はItem単位bindingを維持し、`BoneImage.createEditor()` を「基本」として使用し、「その他のアイコン設定」は #019 v1.0.64 の正式 `bone-image.html` 内 `icon-property-section`（画像アイコン表示設定）を直接利用する。#036独自のProperty入力群は作らず、同じ対象Item.imageへ反映する。
- 変更確定はbinding中の同一Itemの `image` objectだけへ保存し、他Itemへ波及させない。


## v1.1.11 correction

- #020 Label設定は完成Input UIの共通契約に合わせ、`label / labelGap / labelFontSize` を #020 Bone Label の正式 `create/getOutput` へ委譲する。独自Label描画は行わない。
- #019 Image設定は、ユーザー指定の見出し `基本` / `その他のアイコン設定` を使用する。内容は #019 v1.0.64 の正式 `createEditor()` と `bone-image.html` の `icon-property-section` を直接利用し、Item単位bindingを維持する。
- 初期サンプルItemsには #019 `normalizeValue()` で生成した仮のFont Awesome Icon設定を持たせ、設定・描画経路を初期状態で確認可能にする。

## v1.1.16 correction

- v1.1.11の `BoneImage.createEditor()` と別iframe sectionを組み合わせるImage Editor構成は不採用。
- Select Preview直下では、#019 Bone Image v1.0.64 の正式 `bone-image.html` Property UI実体をそのまま使用し、#036独自のImage/Icon Property Editorを作らない。
- #019正式UI内の実グループを、指定どおり `基本` / `その他のアイコン設定` として表示する。`その他のアイコン設定` は実 `icon-property-section` であり、見出しだけの代替UIではない。
- v1.1.12で残っていた `max-height:600px / overflow:auto` の内側スクロールを廃止し、#019正式Property UIをSelect Preview直下で全高表示する。
- #019 Property panelの実属性を `data-select-019-property-panel="true"` に統一し、iframeの高さ計算が実DOMへ届くよう修正する。
- #019の `icon-picker-section` を保持し、#018 Bone Icon正式 `bone-icon.html` へのPicker委譲経路もそのまま使用する。
- 変更確定は現在bindingしている同一子Itemの `image` にだけ保存する。別Item、Select本体、Label、Effect、Security、WAIT/BLOCK、OUT、接続イメージへ波及させない。
- Browser Runtimeはユーザーlocalhost確認前は未確認、Completionはfalseのままとする。


## v1.1.16 Group icon binding
- 親項目（グループ名）の行に `アイコン設定` を追加する。
- 親項目も `image` を保持し、#019 Bone Image v1.0.64 → #018 Bone Icon の正式経路へ委譲する。
- アイコン選択UIは右側の #019 Image設定領域を使用し、#036独自Pickerは作らない。
- 選択した親項目iconは開いたSelectのグループ名へ表示する。


## v1.1.16 選択アイコン名表示

Items編集UIでは、各グループおよび各子項目のImage/Icon設定ボタンに、現在保存されている選択アイコン名を表示する。#019/#018で確定後は同じ行と対象項目選択へ即時反映する。未設定は「未設定」と表示する。

## v1.1.18 #018 Picker draft selection bridge

- #018正式Pickerでアイコンをクリックした時点で、#019内の未確定 `source / icon.name` 変更を#036へ通知する。
- #036のグループ／子項目の「選択アイコン」表示と対象項目selectは、未確定選択中も即時にアイコン名を表示する。
- #019の「変更を確定」契約は維持し、正式な `item.image` 保存とSelect実表示更新は確定時のみ行う。


## v1.1.18 group/item icon live preview bridge
- #018 Pickerで選択した未確定アイコンを、対象グループ/子項目のSelect実描画へ即時プレビューする。
- #019の変更確定で正式保存する。
- Editor破棄/対象切替で未確定値は最後の確定値へ戻す。


## v1.1.19 Tree hierarchy display

- 親グループと子項目の階層を視覚的に明確化する。
- Items編集UIでは子項目を親グループより一段深くインデントし、縦線・枝線を維持する。
- Dropdownでも子項目をグループ名より一段深くインデントする。
- データ階層、選択、Image/Icon binding、OUT、Effect等の動作は変更しない。


## v1.1.21 QA / Image accordion correction

- #019正式Imageプレビューは表示を維持し、その直下のProperty summaryを `Imageプレビュー プロパティ` のアコーディオンへ格納する。初期状態は閉じる。
- #019正式 `icon-picker-section` は `#018 Bone Icon` アコーディオンへ格納し、初期状態は開く。ICON / `018-icon-fontawesome` 時は#018正式Picker本体も初期表示する。
- 接続イメージは3ケースを維持し、IN / OUT型不一致とも #002 Bone Joint正式 `drawCompatibilityMarker()` を使用する。
- Smoke Test / Validation実行時のプログラム操作でページ位置を移動させない。FAIL時に `OK` を表示しない。
- 未確定Image/Icon draftは実表示へプレビューしてよいが、commitせずEditorを破棄した場合は直前の確定値（未設定ならnull）へ戻す。
- ユーザーlocalhost Browser Runtime確認前はCompleted扱いにしない。


## v1.1.22 compact Image editor / formal report appearance
- Collapsed #019 accordions reclaim layout height; the formal iframe follows visible content height.
- #018 Bone Icon starts open and the formal picker viewport is enlarged for icon selection.
- Smoke Test / Validation Report and component completion management use the established Bone Flow report/completion visual structure without changing their runtime contracts.