Bone Flow #119 - State v1.0.0

UIの現在のsemantic stateを保持・管理する Motion UI。見た目・Trigger・Animation・Transitionの責務は持ちません。

Motion UI that holds and manages the current semantic state without owning visual styling, Trigger, Animation, or Transition behavior.

累積回帰テストCumulative Regression
Development8 Examples + Custom
Dependencies #002 Bone Joint checking Runtime状態Runtime status CHECKING API CHECKING

使用コンポーネントUsed Components

#002 Bone Joint使用中IN USE
Version CHECKING Status CHECKING API CHECKING 用途Use OUT WAIT・FIFO・BLOCKED実配送Real OUT WAIT/FIFO/BLOCKED delivery
Development Orderの Normal / Hover / Focus / Active / Disabled / Selected / Checked / Error は代表例です。#119は「今の状態」を保持するComponentであり、この8値だけに閉じません。Normal / Hover / Focus / Active / Disabled / Selected / Checked / Error are representative Development Order examples. #119 holds the current state and is not closed to only these eight tokens.

#119 State は何に使う?What is #119 State for?

対象UIが今どの状態なのかを、UI本体とは分離した共通Stateとして保持します。見た目を変えるComponentではなく、後続処理が参照できる「現在状態」を管理するComponentです。

#119 holds what state a target UI is in now as a Motion UI relation separate from the UI itself. It manages the current semantic state; it is not the visual effect itself.

現在StateCurrent StateNormal
TARGET UI#027 TextBox 例UI-DEMO-001 / whole
#119 STATENormal「今どういう状態か」を保持Holds what state it is in now
REFERENCE / OUTPUT後続処理が参照Available to downstream logic#120 Trigger / #116 Effect / #117 Animation 等との組合せ候補can be combined as separate responsibilities

#119 がすること#119 does

  • 現在Stateを保持Hold current State
  • Previous Stateを保持Hold previous State
  • Target UI / PartとのRelationを持つRelate to Target UI / Part
  • State変更を通知 / OUT payload化Notify changes / expose OUT payload

#119 がしないこと#119 does not

  • 何が起きたら変わるかを決めない(#120 Trigger)Decide when to change (#120 Trigger)
  • 色・Glow等の見た目を直接作らない(#116 Effect等)Own visual effects (#116 Effect, etc.)
  • 動きを実行しない(#117 Animation)Run motion (#117 Animation)
  • 状態変化の補間をしない(#118 Transition)Interpolate state changes (#118 Transition)
1Targetを決めるChoose TargetTarget UI Number + Part KEY
2現在Stateを設定Set current StateNormal / Error / Custom...
3後続が参照するDownstream reads itevent / getOutput / OUT payload

Stateを実際に切り替えるSwitch State in the live Preview

下のボタンでTarget UIの「現在State」を切り替えてください。見た目は確認用Consumer表現で、#119 Runtime自身が色やdisabledを所有しているわけではありません。

Switch the Target UI's current State below. Visual styling is a consumer-side demonstration; BoneState itself does not own colors or disabled behavior.

-→Normal

Property / State ControllerProperty / State Controller

Property 表示言語Property display language
使い方How to use① Targetを指定 → ② Stateを設定 → ③ Targetの現在状態として保持・通知1) choose Target → 2) set State → 3) hold/notify it as the Target's current state

まず Error を押すと「Normal → Error」がPreviewで確認できます。

Press Error first to see the Preview change from Normal → Error.

State例をワンクリックで切替Switch example States

任意Stateも入力可能:Custom State is also allowed: Busy, Warning ...

Preview / 使用例:入力状態Preview / Example: input state

Normal
#027 TextBox Target UI: UI-DEMO-001
ABC-001Normal
通常状態。入力を受け付けられる状態です。Normal state. The field is in its ordinary state. Current State: Normal

ここで赤枠・透明度などが変わるのは「Stateを目で確認するためのConsumer例」です。#119の本体責務はCurrent / Previous StateとRelationを保持・通知することです。Borders/opacity change here only to make the State visible. #119 itself owns Current/Previous State and Relation, not the consumer's visual design.

Current StateNormal
Previous State-
Relation Key-
Built-in Exampletrue
State OutputState Output後続処理が参照できる現在StateCurrent State available to downstream logic

    

HTML Functional Class bf-state

Live SampleLive Sample
#119 StateController / Error
State UI UI-119-FC-001 Target UI UI-FC-DEMO Part whole Current Error Relation Key - Target reflection Error

詳細なHTML属性・利用手順は操作ガイドに集約しています。Detailed HTML attributes and usage steps are in the Operation Guide.

State Relation 技術検証State Relation Technical Validation #002 Bone Joint v1.1.36

Stateの意味・保持は#119の責務です。この接続イメージでは、Relationの接続線・端点・異常マーカーを正式#002 Bone Joint APIで実描画します。

#119 owns State semantics and storage. This relation image uses the formal #002 Bone Joint API for lines, endpoints, and error markers.

1. 正常RelationAttached Relation

#119 StateUI-119-REL-001
Current = Error
Target UIUI-REL-TARGET / label
State UI UI-119-REL-001Target UI UI-REL-TARGETTarget Part labelRelation State CHECKINGCurrent State -Error Code -

2. Target UI不存在

#119 StateUI-119-REL-002
Current = Error
Target UIUI-NOT-FOUND
State UI UI-119-REL-002Target UI UI-NOT-FOUNDTarget Part wholeRelation State ERRORCurrent State ErrorError Code TARGET_UI_NOT_FOUND

3. Target Part不存在

#119 StateUI-119-REL-003
Current = Error
Target UIUI-REL-TARGET / missing-part
State UI UI-119-REL-003Target UI UI-REL-TARGETTarget Part missing-partRelation State ERRORCurrent State ErrorError Code TARGET_PART_NOT_FOUND

Untrusted IN / Security Test 通常Previewとは独立isolated from normal Preview

Security専用Stateで検証し、通常Previewは変更しません。接続線・BLOCK異常表示は#002 Bone Jointを使用します。Tests use an isolated Security State and do not mutate the normal Preview. #002 Bone Joint renders the relation path and BLOCK error marker.

INUntrusted SourceNOT RUN
Security GateNOT RUN-
#119 Security StateNormalisolated instance
Before Normal
After Normal
Result NOT RUN
Getter calls 0
Security test is not run.

OUT WAIT / FIFO / BLOCKED - #002 Joint v1.1.36 Integration

通常Previewとは独立した#119 State OUT専用Targetで確認します。Target BUSY中は接続を維持したままQueueへ保持し、READY復帰時に#002 Delivery ChannelがFIFO順で自動配送します。BLOCKEDは接続を維持したまま#002正式fa-ban / beat-fadeを表示し、ErrorをTargetへ配送しません。

This isolated #119 State OUT target verifies the formal #002 delivery contract. While the Target is BUSY, the connection remains established and values stay queued; when READY returns, the #002 Delivery Channel automatically flushes FIFO. BLOCKED keeps the connection established, shows the official #002 fa-ban / beat-fade marker, and does not deliver Error.

State OUTNormal
TargetREADY
Joint Stateready
TargetREADY
Queue0
Delivered0
READY
Joint描画確認中...

Smoke Test / Validation Report

OverallNOT RUN
SmokeNOT RUN
ValidationNOT RUN
Runtime1.0.0

Smoke Test 結果

Smoke Testは未実行です。

Validation 結果

Validationは未実行です。

Runtime Console

[INIT] #119 State v1.0.0 / NOT RUN

コンポーネント完了管理Component Completion

Component#119 State
Version1.0.0
Completion Flagfalse
StatusDevelopment
ValidationNOT RUN
完了日時Completed At-

Smoke + Validation ALL PASS と State / WAIT / BLOCKED の目視確認後に完了操作できます。

HTML Functional Classbf-state→ BoneState 1.0.0