# Bone Flow #017 - Text ## 1. 概要 TextはPhase 3 UIの最初のPrimitive UIである。TYPE `TEXT` のvalueを安全に表示し、Text・Number・Passwordの入力UIを提供する。 ## 2. 責務 Textは値表示、入力、9方向の配置基準、入力時フォント、アクセシビリティ、長文制御を担当する。表示時のフォントや業務固有装飾は親UIまたはPerspectiveへ委譲する。Jointの判定と線描画は担当しない。 ## 3. 入力 文字列、数値、真偽値、BigInt、Date、または`type: "TEXT"`のBoneを受け付ける。Bone valueは直接値、または`{ text: value }`を利用できる。 ## 4. 安全な表示 表示には`textContent`を使用し、value内のHTMLを実行しない。表示タグは許可リストから選択する。 ## 5. 公開API - `BoneText.create(value, options)` - `BoneText.render(target, value, options)` - `BoneText.createEditor(value, options)` - `BoneText.renderEditor(target, value, options)` - `BoneText.update(element, value, options)` - `BoneText.setText(element, value)` - `BoneText.getText(element)` - `BoneText.getValue(element)` - `BoneText.getOptions(element)` - `BoneText.setOptions(element, options)` - `BoneText.destroy(element)` - `BoneText.isInstance(element)` - `BoneText.normalizeValue(value, emptyText)` - `BoneText.getCompletionState()` - `BoneText.complete(validation)` - `BoneText.reopen()` ## 6. 値の種類・位置・入力時フォント `valueType`は`text` / `number` / `password`を提供する。`position`は9方向を提供する。`inputFont`は入力中だけに適用し、表示時のフォントは親UIへ委譲する。 ## 7. 表示オプション `tag`、`className`、`id`、`role`、`ariaLabel`、`title`、`lang`、`direction`、`whitespace`、`overflow`、`selectable`、`hidden`、`maxLines`、`emptyText`、`prefix`、`suffix`、`formatter`を提供する。 ## 8. イベント 値または表示設定の更新後に`bone-text-change`を発行する。detailは更新値と最終表示文字列を保持する。 ## 9. CSS `bone-text.css`は基本表示、選択禁止、1行省略、複数行省略、クリップを提供する。色や業務固有装飾は上位UIまたはPerspectiveが指定する。 ## 10. Joint状態表示 テスト画面では、Textへ値を渡すJointのINとOUTの正常接続、Target Field不存在、値型不一致を同一画面に表示する。接続線・終端記号・吹き出し・診断事実はBone Jointへ委譲し、Text自身はJoint判定や線描画を実装しない。 ## 11. 依存方向 TextはCoreのBone構造を入力として利用できるが、CoreやJointへUI処理を追加しない。TextはComposite、Studio、Applicationを知らない。 ## 12. Validation 公開API、TEXT Bone、プリミティブ値、HTML無害化、更新イベント、表示設定、長文制御、破棄、Joint正常系・異常系表示、診断事実、異常入力、JSON、相対参照、MANIFEST、ZIP整合性を検証しALL PASSとする。 ## v1.0.21 修正 - Textテスト画面のDOMポートとJoint SVG端点マーカーの二重描画を廃止。 - Joint線はBone Jointによる1本の経路だけを描画する。 - IN、OUT、異常、型不一致の線色を明示し、端点の重なりを防止。 ## v1.0.21 更新 - Textの各設定を「プロパティ設定」へ統合。 - 種類、値、Placeholder、Required、Read Only、9方向Position、入力中フォントを一括反映する合算プレビューを追加。 - Joint表示領域を「Joint 使用イメージ」として整理。 - IN Target Field不存在ではSourceとTextのみを表示し、Text手前で未接続表示。 - OUT Target Field不存在ではSourceを表示せず、Textから存在しない接続先方向へ未接続表示。 - 型不一致をINとOUTへ分離し、接続できない側の手前で線を終了。 - Joint線、端点、エラー終端はBone Joint v1.1.4の正式描画APIを使用。 ## v1.0.21 更新 - Windows用正式インストールバッチ `install.bat` を追加。 - PowerShell実処理 `install.ps1` を追加。 - インストール後に必須ファイルとMANIFEST SHA-256を検査する。 ## v1.0.21 修正 - 「表示位置」を入力欄内の文字位置として再定義。 - Auto時はText／Passwordを左寄せ、Numberを右寄せとする。 - 明示指定としてleft／center／rightを提供。 - テスト画面の大見出しを「プロパティ設定」「接続イメージ」に統一。 ## v1.0.21 修正 - Textテスト側の独自Joint線描画を廃止。 - TextはJoint定義・状態・Endpoint要素を `BoneJoint.renderConnection()` へ渡すだけとする。 - 線、端点、不存在終端、型不一致終端はBone Joint側で描画する。 - テスト対象説明、「プロパティ設定」「接続イメージ」の見出し視認性を修正。 ## v1.0.21 Validation Report修正 - 各検査について検査名、PASS／FAIL、結果理由を表示する。 - 総検査件数、PASS件数、FAIL件数を集計表示する。 - FAIL時は失敗した項目の直下に理由を表示する。 - OUT型不一致のテストデータを文字列から数値への接続へ修正する。 - Target不存在終端の検査件数をBone Joint正式描画結果へ合わせる。 ## v1.0.21 更新 - Requiredを「必須入力」として説明し、空欄時の入力エラーを合算プレビューへ表示。 - Read Onlyを「読取専用」として説明し、編集不可状態を合算プレビューへ表示。 - Validation Reportから `Expected true` を除去し、期待値と実際値をBone Flow用語で表示。 - 正常IN/OUT線の検査を、線数と方向（IN/OUT）を個別確認する方式へ変更。 ## v1.0.21 テスト実行UI テストページに `Smoke Test 実行`、`Validation 実行`、`全テスト実行`、`結果クリア` を追加した。 検証結果はボタン操作によって実際に生成され、実行日時・実行時間・PASS件数・FAIL件数を画面へ表示する。 ページ表示だけでは検証済みと扱わず、実行後の `BONE_FLOW_017_TEST_RESULT` を当該実行の結果とする。 ## 18. v1.0.21 テスト結果画面 Smoke Test結果とValidation結果を独立した表題付きセクションとして表示する。全体結果、実行日時、検査件数、PASS、FAIL、実行時間、Versionを上部集計欄へ表示し、JSON／Markdownレポート保存に対応する。 ## 19. v1.0.21 Jointライン可視化 - IN／OUTの接続線は `BoneJoint.renderConnection()` の返却Pathを直接利用する。 - 描画Pathへ `data-joint-engine="BoneJoint"` を付与し、Joint実使用を確認可能にした。 - INは入力方向、OUTは出力方向へ流れるダッシュアニメーションを表示する。 - 不存在・型不一致のJoint線も状態を維持したまま低速アニメーションする。 - Smoke TestでBone Joint実描画数とIN／OUTアニメーション対象を検証する。 ## 20. v1.0.21 Joint正式機能利用修正 - #017 Text独自のJointラインCSSアニメーションを廃止した。 - #002 Bone Joint v1.1.4の正式公開API `BoneJoint.drawLine()` を使用する。 - 全Jointラインへ既存設定 `animationEnabled: true`、`animationSpeed: "normal"` を渡す。 - 正常・Target Field不存在・型不一致の全表示で、Jointが生成する固定長グラデーション `gradient-flow` を利用する。 - 状態、線色、起点、終点記号、エラー終端の仕様は#002 Bone Jointへ委譲し、#017独自仕様を追加しない。 ## Version 1.0.21 更新内容 - 接続イメージの直下に「表示色（凡例）」を追加した。 - 青色／緑色／オレンジ／赤色のライン見本と日本語表記を併記し、色覚差および白黒印刷でも状態を識別できる構成とした。 - 公開API検査を Version 1.0.21 に更新した。 - Bone Joint実描画と既存グラデーション機能の検査期待値を、実仕様どおり6本へ修正した。 - Bone Joint v1.1.4 の既存描画仕様およびTextの既存仕様は変更していない。 ## 18. Version 1.0.21 更新 - タイトル直下に使用コンポーネント表示を追加した。 - #001 Bone Coreと#002 Bone JointのVersion、接続状態、公開API状態を実行時情報から表示する。 - #017 Textは使用側であり、Jointの判定・状態・描画ロジックを独自実装しないことを画面上に明示した。 - #002 Bone Joint v1.1.4を正式基準として同梱した。 - Smoke Testへ依存コンポーネントの読込、Version一致、公開API、画面表示一致の検査を追加した。 ## Version 1.0.22 更新内容 - 配布ZIPのルートへWindows用 `install.bat` と `install.ps1` を実際に同梱した。 - 使用コンポーネント欄へ「使用中」、Version、Status、APIの状態バッジを追加した。 - `#001 Bone Core` と `#002 Bone Joint` の名称および「テスト画面を開く」から、それぞれの正式テスト画面を新しいタブで確認できるようにした。 - Smoke TestへBone Core／Bone Jointテスト画面リンクの存在と参照先検査を追加した。 ## Version 1.0.24 更新内容 - 使用コンポーネント欄の「テスト画面を開く」ボタンを削除した。 - `#001 Bone Core` と `#002 Bone Joint` のコンポーネント名自体を、それぞれの正式テスト画面へのリンクとして維持した。 - Smoke Testのリンク検査を、コンポーネント名リンクの参照先検査へ変更した。 - Text公開APIのVersion検査を1.0.24へ更新した。 ## Version 1.0.24 更新内容 - タイトル直下に検証済み依存バージョンを示す `Dependencies` 表示を追加した。 - `#001 Bone Core v1.0.0` と `#002 Bone Joint v1.1.4` を明示した。 - Dependenciesのコンポーネント名から各テスト画面を開ける構成とした。 - Smoke TestにDependencies表示内容の実DOM検査を追加した。 ## Version 1.0.25 更新内容 - 入力時フォント設定の既存 `color` / `backgroundColor` Property値を変更せず、色選択UIのみ #040 ColorPicker v1.0.8 へ委譲した。 - #017 v1.0.24 の既定色 `#111111` / `#FFFFFF` をColorPicker初期値として復元する。 - Text側の2色Propertyは単色契約のため、#040を `allowedKinds: ["solid"]` で使用する。transparent / gradientは追加しない。 - #040で確定した値は既存 `font-color` / `font-bg` を経由して `inputFont.color` / `inputFont.backgroundColor` へRETURNする。 - 現行共通 #002 Bone Joint v1.1.36 / #020 Bone Label v1.0.50 / #022 Hover Border Effect v1.0.5 / #040 ColorPicker v1.0.8 を外部依存として使用し、インストール時に他Componentを上書きしない。 ## Version 1.0.26 更新内容 - テスト画面へ「コンポーネント完了管理」を追加した。 - Smoke TestとValidationの両方が実行済みかつALL PASSの場合だけ `BoneText.complete()` を許可する。 - `BoneText.getCompletionState()` / `complete()` / `reopen()` を公開し、完了状態を `boneflow.017.text.completion` に保存する。 - Completion Flag / Status / Validation / 完了日時を画面で確認できる。 - v1.0.25の#040 ColorPicker共通化、既存inputFont色、Property / Joint / Smoke / Validation契約は変更しない。 ## Version 1.0.27 更新内容 - #017の旧 `input[type=color]` は値保持用の非表示Propertyとして維持し、ポインター／フォーカス／親labelの暗黙Native Picker起動経路を停止した。 - #040 ColorPicker内部のNative color inputは表示用swatchとしてのみ利用し、ポインター操作ではブラウザ標準ColorPickerを起動しない。 - 色選択UIは#040 ColorPicker v1.0.8だけを表示する。文字色 `#111111` / 背景色 `#FFFFFF` と `inputFont` 契約は変更しない。 - 「既存色を#040へ復元」Smoke Testは、起動時の正本色確認と現在の#017 Property／#040値同期を分離し、ユーザーが色を変更した後でも同期が正しければPASSとする。 - v1.0.26のCompletion、Joint、Smoke / Validation、公開API契約は変更しない。 ## Version 1.0.29 更新内容 - #017 Property内の#040 Pickerで、31色パレットの下にある「カスタム追加」が表示領域外へ隠れないようConsumer側パネル表示を修正。 - 「カスタム追加」summaryをパネル下端で常時到達可能にし、展開後のカスタム色入力・追加ボタンをその場で操作可能にした。 - #040 ColorPicker本体、Textの文字色/背景色値、Property/Joint/Completion/Text Runtime契約は変更しない。 ## Version 1.0.28 更新内容 - #040 ColorPicker consumer統合を修正。旧 `input[type=color]` は値保持用 `text` inputへ切替え、ブラウザNative Pickerを起動しない。 - Consumer host全体の `preventDefault()` を廃止し、#040の「カスタム追加」details / input / buttonを正常操作可能に復元。 - #040 main swatchはNative Pickerではなく#040 panelへrouteする。 ## Version 1.0.30 更新内容 - 入力時の文字色 / 背景色で #040 ColorPicker の solid / transparent / gradient を利用可能にした。 - 既存の `#RRGGBB` 値はそのまま互換維持する。 - Gradientは #040正式 `GRADIENT_V1`（2色 linear gradient）を `inputFont.color / backgroundColor` に保持する。 - 文字色Gradientは文字へクリップし、背景色Gradientは背景へ描画する。両方同時指定にも対応する。 - `transparent` は文字色・背景色の双方で利用できる。 - Native browser ColorPicker停止、#040カスタム追加、Completion管理は維持する。 ## Version 1.0.31 更新内容 - #017 Property内の#040 Pickerが画面下端付近で開いた場合、Solid部分だけが見えてGradient / カスタム追加がViewport外へ隠れる問題を修正した。 - Pickerを開いた時に上下の空き領域を実測し、下側が不足する場合はPanelをPropertyの上側へ自動反転する。 - Panelの最大高さを利用可能なViewport領域に合わせ、Solid / Transparent / Gradient / カスタム追加へ到達できる状態を維持する。 - #040 ColorPicker本体、色値契約、Text Runtime、Property、Joint、Completionは変更しない。 ## Version 1.0.32 更新内容 - #040 ColorPickerの表示方向判定をviewport基準から#017 Property要素基準へ修正。 - クリックしたColorPicker controlをアンカーとし、所属するPropertyカード内の上側/下側空間だけで直上/直下を決定する。 - window.innerHeightやscrollYを配置判定に使用しないため、ブラウザのスクロール位置だけでPicker表示方向が変化しない。 - Solid / Transparent / Gradient / カスタム追加、既存Property契約、Completionは維持。 ## Version 1.0.33 更新内容 - ColorPicker連携を#040 v1.0.15の正式Caller / RETURN方式へ変更した。 - #017 Propertyが所有する表示要素は色を示す□だけとし、#040内部DOMを#017 Propertyへ埋め込まない。 - `□ click → #040 INPUT → document.body直下の独立Overlay → RETURN → inputFont.color / backgroundColor` の責務境界とした。 - #017から#040内部DOM/CSSへの参照、Consumer側Panel位置補正、Native ColorPicker経路制御を削除した。 - Solid / Transparent / GRADIENT_V1 / カスタム追加は#040側の責務として利用する。 - #040 Callerの値ツールチップはhover / focusで実表示されることをSmoke Testで確認し、表示されなければALL PASSにしない。 - #017 v1.0.32のText Runtime、既存色、Property、Joint、Completion契約はColorPicker連携以外変更しない。 ## Version 1.0.34 更新内容 - 依存Version判定を完全一致から互換判定へ修正した。 - 各依存は表示Versionを最低要求Versionとして扱い、同一 major.minor の範囲で patch が最低値以上なら互換として `Connected` とする。 - 最低Version未満は `Version Below Minimum`、major/minor不一致は `Version Incompatible`、解析不能Versionは `Version Invalid` とする。 - Versionが互換でも、#001 / #002 / #020 / #022 / #040 の必須Public APIが不足する場合はAPI `FAIL` とする。 - #020 v1.0.60 は最低 v1.0.50 を満たすため正常、#022 v1.0.8 は最低 v1.0.5 を満たすため正常として扱う。 - Installerも同じ Minimum Version + API Contract 判定へ統一し、依存Componentを上書きしない。 - Text Runtime、Property、ColorPicker Caller/RETURN、Joint、Completionの既存契約は変更しない。