## HTML Functional Class

`bf-textbox` は `bone-textbox-html-class.js` で有効化。`data-value` / `data-placeholder` / `data-width` / `data-height` / `data-theme` 等の属性を使用。Public APIは維持。

# Bone Flow #027 - TextBox

Version: 1.0.35  
Status: Development  
Specification: v1.0 Frozen

## 概要

#027 TextBox は文字列 `value` を入力・編集するInput UI。#017 Textは表示専用であり責務を分離する。

v1.0.18では既存のUntrusted IN / WAIT / BLOCKED / 接続表示 / 日本語・英語Propertyを維持し、TextBoxのTheme・背景色・外見・Active時の枠Effectを正式Propertyとして追加した。

## 正式依存

- #001 Bone Core v1.0.0: Bone正規化
- #002 Bone Joint v1.1.36: 接続、Delivery Channel、WAIT FIFO、BLOCKED、Joint描画
- #022 Bone Hover Border Effect v1.0.8: Active時 / Mouse Over時の枠Effect描画。#027は `trigger: active` と `trigger: mouseover` を別targetへattachする。
- #020 Bone Label v1.0.60: #040 ColorPicker Callerが利用するRuntime依存。
- #040 Bone ColorPicker v1.0.15: 背景 / Parent背景 / Parent文字 / Active Effect色 / Mouse Over Effect色の5 Caller。すべてsolid-only。
- #017 Bone Text: 責務境界参照のみ。Runtime依存なし。

## Property表示

テスト画面のPropertyは日本語 / Englishを切替可能。日本語を既定表示とし、技術キーを併記する。


## Appearance / Theme Property

- `theme`: `default / dark / light`
- `backgroundColor`: `theme / transparent / HEX color`。`transparent` が「無色」。CSS `url()` 等は受け付けない。
- `appearance`: `normal / flat / borderless / inherit`
  - `normal`: 従来の角丸 + 枠。
  - `flat`: 角丸なしのフラット表現。
  - `borderless`: 通常時の枠なし。
  - `inherit`: 背景・文字色・角丸を親に合わせる。
- `activeBorderEffect`: `normal / neon / spin / cross / blink`
  - 描画責務は #022 Bone Hover Border Effect v1.0.8へ委譲する。
  - #027はfocus時に #022 `setActive(true)`、blur時に `setActive(false)` を呼ぶ。
  - 色 / 時計・反時計方向 / 速度は従来Propertyをそのまま #022へ渡す。

`prefers-reduced-motion: reduce` のAnimation停止は #022 の正式実装へ委譲する。

## 接続イメージ

`bone-textbox.html` は #002 `BoneJoint.drawLine()` を使用して以下を実描画する。

- 正常接続（IN / OUT）
- IN Target Field不存在
- OUT Target Field不存在
- 型不一致（IN）
- 型不一致（OUT）

## Security

`applyJointInput()` は外部INをplain dataとして検証する。objectを `String()` へ暗黙変換しないため、悪意ある `toString()` を実行しない。getter / Proxy trap / 巨大値 / 制御文字 / 不正Unicodeは拒否し、直前の確定値を保持する。

HTML風文字列は `innerHTML` へ渡さず、`input.value` としてのみ表示する。

## OUT Delivery

`connectOutput()` は #002 `BoneJoint.createDeliveryChannel()` を利用する。TextBox自身はQueueやRetryを持たない。

- READY: 即配送
- WAITING: Joint側FIFO待機 / spinner
- BLOCKED: 接続維持、危険データ配送停止 / fa-ban + beat-fade

## Smoke / Validation

画面上でSmoke Test、Validation、全テストを再実行可能。v1.0.18でもV15を実際のWAIT状態とFIFO配送結果で検証し、privateプロパティ名の推測に依存しない。

## Test URL

`http://localhost/BoneFlow/test/bone-textbox.html`

Runtime QA ALL PASSに加え、3秒WAITとBLOCKEDを目視確認した後にCompletion Flagをtrueにできる。


## v1.0.18 追加仕様

- `inheritParent` を正式Propertyとして追加。`true` の場合は親要素の背景色・文字色・枠色・角丸へ追従する。
- `appearance: inherit` は後方互換aliasとして `inheritParent: true` と同義に扱う。
- Runtime ReportをJSON / Markdownで保存できる。
- テストページは `fetch(..., { cache: "no-store" })` で #027 JS/CSS を再取得し、HTMLだけ更新されてJS/CSSがブラウザキャッシュに残る不整合を防ぐ。


## v1.0.18 外観・配置の正式追従
- Themeに Neon を追加。
- #017 Bone Textと同じ position 9方向 / inputAlign(auto,left,center,right) を採用。
- 単体時は width / height / position / inputAlign を使用。
- inheritParent=true では単体設定を描画上無視し、親content領域へ幅・高さ100%で追従。親の背景・文字色・角丸・文字位置を継承し、通常の独自枠を描画しない。
- Active Border Effectは色、時計/反時計方向、速度（遅い/標準/速い）を保持。Neonは4辺を同じ方向へ流れる点線。
- 親Preview設定は継承確認用であり #027 OUTへ混入しない。


## v1.0.18 Neon枠Effect修正

- 時計回りを上辺→右、右辺→下、下辺→左、左辺→上として統一。
- 反時計回りは上記を完全反転。
- 各辺のbackground-positionを辺ローカル座標へ統一し、4辺の移動距離と速度差を解消。
- 下辺が消える表示不具合を修正。


## v1.0.18 Preview Flow

Preview状態表示を、`値(value) → editing → committed → Joint / Delivery` のフロー表示へ変更しました。
Propertyの値欄はPreviewのediting値と同期し、commit時にcommittedへ反映されます。


## v1.0.18 Preview Joint Flow

Previewのフロー表示を矢印ではなく、#002 Bone Joint の実描画へ変更しました。
Source / Property → TextBox（入力）と、TextBox committed → Target をJoint線・端点・WAIT/BLOCK Overlayで確認できます。


## v1.0.18 Preview spacing

Previewの Source / TextBox / Target が近すぎたため、横幅配分と gap を拡大しました。機能変更はありません。


## v1.0.18 Security IN Flow

Untrusted IN / Security Testを接続イメージより前へ移動し、#002 Bone Joint実描画で `Source / Joint IN → TextBox Security → TextBox` を表示します。PASS時のみ値を適用し、BLOCKED時は直前の確定値を保持します。


## v1.0.18 Preview整理

TextBox PreviewからSource/Propertyと同一値の重複表示を削除しました。INはSecurity Test側で表示し、PreviewはTextBox commit → #002 Joint → TargetのOUT状態だけを表示します。


## v1.0.18 Security isolation / Preview cleanup

Security TestをTextBox Previewから完全分離しました。Security Testは専用TextBox instanceに対してのみIN検証を実施し、Previewの値・編集状態・OUTへ干渉しません。TextBox Preview下のJointフロー表示は削除しました。


## v1.0.19 接続イメージ復元

接続イメージのみ #021 Shape v1.0.24 の正式構成へ復元。5ケース、BoneJoint.evaluateによる判定、4行診断、IN/OUT/型不一致/接続エラーの4色凡例、BoneJoint正式描画を使用する。TextBox本体・Property・Security・WAIT/BLOCK・Completion仕様は変更しない。

## v1.0.20 S13 初回描画タイミング修正

接続イメージ復元後、初回 Joint Path 描画が二重 `requestAnimationFrame` の完了待ちだったため、起動時 Smoke Test の S13 が描画前に評価される競合を修正。カード生成直後に一度 `redraw()` を実行し、従来の遅延再描画も維持する。接続イメージ以外の TextBox / Property / Security / WAIT / BLOCK / Completion ロジックは変更しない。

## v1.0.21 Security Gate エラー内容表示

Untrusted IN / Security Test の中央「TextBox Security」に、BLOCKED時のエラーコードに加えて `message`（エラー内容）を表示する。PASS時は「エラーなし」を表示する。Security判定・TextBox本体・Property・WAIT/BLOCK・Completionのロジックは変更しない。

## v1.0.22 OUT WAIT / BLOCKED Preview分離

OUT WAIT / BLOCKED の配送テストを通常の TextBox Preview instance から分離し、専用 `deliveryBox` に対してのみ WAIT / BLOCK / BLOCK解除を実行する。危険データ送信やWAIT用データは TextBox Preview の表示値・editing値・committed値・通常OUT状態へ干渉しない。Security Test、Property、接続イメージ、TextBox本体仕様は変更しない。


## v1.0.29 #022 Active Border Effect正式委譲

- Active時の枠Effect独自描画を#027から削除し、完成済み #022 Bone Hover Border Effect v1.0.8へ委譲。
- Triggerは `active` 固定。TextBox focusでActive、blurで解除。
- Effectは `normal / neon / spin / cross / blink`。
- 既存のEffect色 / 方向 / 速度Propertyを#022へ渡す。
- TextBoxの入力・Security・Joint・WAIT/BLOCK・接続イメージ・Completion責務は変更しない。


## v1.0.29 Consumer UI retrofit
- #022 Hover Border Effect v1.0.8
- #040 ColorPicker v1.0.15 Caller API for existing 4 solid color properties
- #040 runtime dependency #020 Bone Label is loaded before Caller attach
- Class list / Public API uses actual BoneTextBox runtime inventory
- Integrated guide: detailed per-API reference + practical usage recipes + test-page operation guide
- Normal Preview creation is isolated from ColorPicker Caller attach failure


## v1.0.30 Mouse Over Effect / Dependency compatibility

- #022 Border Effectの発動条件Property `borderEffectTrigger` を追加。`active / mouseover / both` を選択できる。既定は従来互換の `active`。
- Effect描画は引き続き #022 Public APIへ委譲し、#027独自Overlayは作らない。
- `mouseenter / mouseleave` は #022 の正式 `trigger: mouseover` 契約を利用する。
- 依存Versionは完全一致ではなく、同一majorかつ最低要求Version以上を互換候補とする。最低要求は #001 v1.0.0 / #002 v1.1.36 / #020 v1.0.60 / #022 v1.0.8 / #040 v1.0.15。
- Version条件だけではなく、#027が必要とするPublic API / capabilityも同時に確認する。


## v1.0.31 Active / Mouse Over Effect independent settings

- v1.0.30の `borderEffectTrigger` 選択方式を撤回。
- アクティブ時とマウスオーバー時は別Propertyとして同時保持する。
- Active: `activeBorderEffect / activeEffectColor / activeEffectDirection / activeEffectSpeed`。
- Mouse Over: `mouseoverBorderEffect / mouseoverEffectColor / mouseoverEffectDirection / mouseoverEffectSpeed`。
- Activeは#022 `trigger: active`、Mouse Overは#022 `trigger: mouseover` へ別targetで委譲する。
- focus中にmouse overした場合は2系統を同時に表示できる。
- Mouse Over Effect色用に#040 solid-only Callerを1つ追加し、色Callerは合計5。
- TextBox入力/Validation/Security/#002 Delivery/WAIT/BLOCK/Completionの責務は変更しない。


## v1.0.32 Guide live sample + Public API list
- Guide first panel now starts with a real `BoneTextBox.create()` live instance, not an explanatory note.
- The sample can be edited and commit/reset/recreate can be executed in the guide.
- The guide also contains a compact runtime Public API inventory plus the existing per-API detailed reference.


## v1.0.33 TEST Class sample correction

- TEST本体のPublic API検証方式は変更しない。
- 通常画面の「Class リスト」は、`BoneTextBox` Public APIを利用側Class `TextBoxClassSample` から使用し、実際にTextBoxを表示できるサンプルへ変更。
- `TextBoxClassSample` はTEST HTML内の利用例であり、`bone-textbox.js` のRuntime実装方式をClassへ変更しない。
- Public API一覧・API詳細はガイド内へ集約。ガイド内の実表示サンプルは削除。
- Classサンプルは内部DOMへ依存せず、`BoneCore.create` / `BoneTextBox.create` / `setValue` / `commit` / `getState` / `destroy` のPublic APIだけを使用する。


## v1.0.34 Class sample result pairing
- TEST Class list now shows the consumer Class sample code and, directly below it, the live execution result.
- The execution result is a real BoneTextBox instance plus live state JSON.
- Public API TEST and Guide API inventory/detail remain unchanged.


## v1.0.35 Guide Operation class documentation
- ガイド「3. 操作説明」をTEST画面操作順からクラス別の使用説明へ修正。
- 上部にクラス一覧を置き、各クラス名から該当説明へリンクする。
- 各クラス説明は「いつ・どこで使用するか / 参照するデータの説明 / コードの書き方 / サンプル / 結果」を必須とする。
- 現在のClass一覧はTEST側利用Class `TextBoxClassSample` のみ。実装に存在しないClassは追加しない。
- Public API TEST、通常画面のClassサンプル、Public API一覧/詳細、使用方法は変更しない。