# Bone Flow #031 — TimeBox Specification v1.0 ## 1. 役割 #031 TimeBox は、24時間制の時刻 value を入力・編集・確定する Input UI Component である。 Bone Flow の UI 層として `TYPE = TIMEBOX` を判断し、時刻 value の表示・入力・編集・操作を担当する。 Core / Joint の責務は取り込まない。 ## 2. 正式 value ```text HH:mm | null ``` 例： ```text 09:30 23:59 00:00 null ``` - `HH` は `00` ～ `23` - `mm` は `00` ～ `59` - 1桁表記（`9:30` 等）は受理しない - `Date` object は value として受理しない - `Date.parse` に依存しない - timezone 変換を行わない - 文字列 value を勝手に Date object へ変換しない ## 3. TimeBox 固有 Property - `value` - `placeholder` - `min` - `max` - `step` - `required` - `readonly` - `disabled` `min` / `max` は `HH:mm | null`。 `step` の内部APIは `any` または 1～1440 の整数分を受け付ける。Property UI は `1 / 5 / 10 / 15 / 30` から選択する。刻み基準は常に各時刻の `00` 分とする。 native `input[type=time]` へ反映するときだけ `step` を秒へ換算する。Bone value / API value は `HH:mm | null` を維持する。 時刻候補は「時」「分」を2列で分離表示する。時は通常 `00～23`、分は `step` に従う。`min` / `max` が設定されている場合だけ、範囲外となる時・分の組み合わせを選択不可とする。候補パネルは要素の下側に表示し、左 / 中央 / 右を選択できる。 ## 4. Input UI 共通 Property 完成済み Input UI の共通構成を維持する。 - Property 日本語 / English - theme - backgroundColor - appearance - 親要素に依存 - width / height - 9方向表示位置 - 入力時文字位置 - Font FIT / 固定サイズ - Active Border Effect（#022へ委譲） - Effect Color - Direction - Speed - 親要素 Preview 設定 DateBox 固有 Property である「非アクティブ時の日付表示形式」「日付ピッカー表示（アイコン / 絵文字）」は TimeBox へ流用しない。 ## 5. Font FIT `fontSizeMode = fit` の場合、TimeBox 領域に合わせて `HH:mm` の文字サイズを調整する。 native time control の右側領域を予約し、文字とブラウザ標準 time picker indicator が重ならないようにする。 ## 6. Validation 以下を独立して確認する。 - HH:mm 形式 - 00:00 ～ 23:59 - required - min - max - step - readonly / disabled 時の commit 禁止 - Enter commit - Escape rollback ## 7. Untrusted IN Joint IN は plain object の data property のみ安全に読む。 拒否対象例： - getter / setter - Proxy trap - `Date` object - `9:30` - `24:00` - 制御文字 - 不正 surrogate - securityMaxLength 超過 拒否時は既存 committed value を保持する。 ## 8. #002 Bone Joint TimeBox は commit した value snapshot を OUT として #002 Bone Joint の Delivery Channel へ渡す。 #002 Joint に委譲するもの： - WAIT - FIFO queue - Target Ready - BLOCKED - guard 判定後の配送停止 - Delivery State TimeBox が独自 Joint を再実装しない。 ## 9. 使用コンポーネント Test UI では次を表示し、リンクを維持する。 - #001 Bone Core - #002 Bone Joint - #022 Bone Hover Border Effect v1.0.1 - #026 Bone TimePicker v1.0.4 - #017 Bone Text #017 Bone Text は Runtime 非依存であり、表示責務境界の基準として扱う。 ## 10. QA / Completion パッケージには以下を含める。 - Smoke Test - Validation - Runtime QA - WAIT - BLOCK - WAIT 目視確認 - BLOCK 目視確認 - Runtime QA / Report - JSON Report - MD Report - Completion Runtime 未実施の状態を PASS / ALL PASS と記録しない。 ## 11. Dependency 管理 Component 専用 `DEPENDENCY-LOCK`、`dependency-locks/*.json`、依存先 JS の SHA-256 固定は使用しない。 `MANIFEST.sha256` は #031 パッケージ自身のファイル整合性確認だけに使用する。 ## v1.0.8 正式Picker追従 - 正式依存: `#026 Bone TimePicker v1.0.4`。 - 時刻選択UI・時/分列・Picker開閉は #026 へ委譲する。 - #031 は `HH:mm | null`、Validation、commit、Bone.value、OUT、Security、WAIT/BLOCKED、#002 Delivery Channel を保持する。 - #031 の `step` は分刻み。Property UI は `1 / 5 / 10 / 15 / 30`。`step=any` の内部API時は #026 へ1分刻みとして委譲する。 - #031 は秒をvalueに持たないため、#026は `showHour=true / showMinute=true / showSecond=false` で利用する。 ## v1.0.9 #022 Active Border Effect正式委譲 - アクティブ時の枠Effect描画を `#022 Bone Hover Border Effect v1.0.1` へ委譲する。 - #031 は input の `focus / blur` を Active ON / OFF として #022 へ通知する。 - Effect種別は `normal / neon / spin / cross / blink`。 - Effect Color / Direction / Speed は #031 Property から #022 へ渡す。 - #031 内で独自の枠Effect描画を再実装しない。 - `HH:mm | null`、#026 TimePicker、Validation、commit、Security、#002 WAIT/BLOCKED、接続イメージ、Completion の既存責務は変更しない。