# #123 Particle

## 1. 概要
#123 Particle は、パーティクル表現を提供する Motion Component です。v1.0.12 では Snow / Rain / Sakura / Leaves / Smoke / Spark / Fire / Bubble の8種を扱います。UI全体は #017 Text の全体構造に合わせ、Property、Preview、Connection Image、Security、OUT WAIT / BLOCKED、Smoke Test、Validation、Completion、HTML Functional Class を1ページで確認できます。

## 2. 正式責務
#123が所有するのは「どのパーティクル表現を使うか」です。公開データは `{"type":"Snow"}` のように type だけを持ちます。#117 Animation の時間経過、#120 Trigger の開始条件、#121 Timeline の Delay / Duration / Loop / Repeat / Sequence / Parallel、#124 Filter、#125 Blend は所有しません。

## 3. 公開データ
`type` は Snow / Rain / Sakura / Leaves / Smoke / Spark / Fire / Bubble の8種のみ有効です。未知の値、`snow` のような小文字、配列、null、getter / setter を持つ object は Validation Error です。

## 4. Property Editor
Property Editor では Property Language と Particle Type だけを操作します。Particle Type は 8 項目で、Apply Particle または選択変更で Preview に反映されます。Property Language は日本語 / English を切り替えますが Component の値は変えません。

## 5. Preview
Snow は雪粒、Rain は雨筋、Sakura は花弁、Leaves は落ち葉がひらひら落ちる表現、Smoke は煙、Spark は一本の細い主線が切れずに上は短いジグザグ、下へ行くほど1区間の線を長くしながら落ち、主線から枝が分岐する落雷、Fire は同じ根元・同じ中心に外炎・内炎・芯を重ね、ろうそくの炎のように1つに見せながら各層を異なる速さで揺らし、その周囲に小さな点状の火花を持つ焚火、Bubble は泡として見分けられることを確認します。

## 6. Connection Image
Connection Image は #002 BoneJoint 1.1.36 を使い、正常接続と4つの異常接続を同じページで確認します。#123 は Joint を独自実装しません。

## 7. OUT WAIT / BLOCKED
OUT WAIT / BLOCKED も #002 公式 Delivery Channel を使います。WAIT → READY → FIFO 配送と、BLOCKED 時に Target へ届かないことを確認します。

## 8. Security
未知 Type、配列、null、getter / setter 付き object を拒否し、既存 Preview を壊さないことを確認します。

## 9. Smoke Test
Smoke Test では Runtime identity、正式8種、create / setType、bf-particle Functional Class、Preview mount、#002 Joint 1.1.36、Connection Image、WAIT → READY → FIFO、BLOCKED、Security、I18N、DOC、#017 全体構造を確認します。

## 10. Validation
Validation は責務境界、HTML ID重複なし、Completion ゲート、WAIT/BLOCKED の見た目確認項目などを確認します。localhost で実行するまで ALL PASS とは表示しません。

## 11. Completion
Completion には Smoke Test、Validation、Preview / Joint / WAIT / BLOCKED の4項目の目視確認が必要です。localhost 未確認の間は Development / Candidate です。

## 12. HTML Functional Class
一般利用 Class は `bf-particle` だけです。例: `<div class="bf-particle" data-particle-type="Leaves"></div>` 。Functional Class は DOM と BoneParticle Runtime の橋渡しだけを行います。

## 13. インストール後確認
インストール後は Top の #123 カード、#123 ページ、8種 Preview、Connection Image、WAIT/FIFO、BLOCKED、Security、Smoke、Validation、Completion、HTML Functional Class を順番に確認してください。

## 14. 補足
Spark は一本線ではなく左右ジグザグ＋分岐、Fire はろうそく状に重なった1つの炎＋点状火花、Leaves は落ち葉が落ちる表現として固定します。