Timer

カウントダウン/カウントアップを表示する unstyled 部品です。時計 API を一切使わず、時間の前進は tick（デルタミリ秒）の明示的な注入のみで進む決定的な状態機械です。

Themes 版（fandhe-frontend-pre-styled-ui）はこの構造へ既定 CSS を追加するだけの薄いラッパーであり、CSS は持ちません。スタイル済みの表示例は Timer を参照してください。

実際の計時駆動（setInterval 相当）はクライアントランタイム側の責務であり、本部品は経過値の表示 anatomy と現在フェーズの表示状態のみを提供します。

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

00min

45sec

Root/Area/Item/ItemValue/ItemLabel/Separator/Control/ActionTrigger の 8 anatomy パーツと、idle/running/paused/completed の 4 値状態機械 `Timer` を提供する。
時計 API（`std::time`・`Instant`・`js_sys::Date`）を一切使用しない。時間の前進は `TimerAction::Tick`（デルタミリ秒）の明示的注入のみで行われ、同一 tick 列を dispatch すれば常に同一の状態列に到達する決定的設計。
`countdown`/`start_ms`/`target_ms`/`interval_ms`/`elapsed_ms` を `data-*` としてそのまま出力し、クライアント配線層がこれらを読み取って tick 駆動・完了判定の表示反映を行う契約。
実 tick 駆動（`setInterval` 相当）・ロケール依存の表示形式は本コンポーネントの責務外であり、ミリ秒の加算とゼロ埋め 2 桁整形のみを提供する（`docs/policy/intentional-non-adoption.md` §3.25）。

root
  area
    item
      item-value
      item-label
    separator
  control
    action-trigger

Name	Type	Default	Description
countdown	bool	（必須）	カウントダウン（`true`）かカウントアップ（`false`）か。
start_ms / target_ms	u64	（必須）	カウントダウンの開始値・カウントアップの目標値（`target_ms = 0` は無期限）。
interval_ms	u64	1000	tick の間隔（表示上のヒント。実 tick 駆動はクライアント配線層の責務）。
elapsed_ms	u64	0	経過ミリ秒。`data-elapsed` へ反映される。
phase	TimerPhase	（必須）	`data-state` へ反映する現在フェーズ（idle/running/paused/completed）。

`TimerPhase::Completed` を渡すと `data-state="completed"` となり、`action_trigger` は Reset のみを表示する構成にできます。

00sec

Key	Description
Tab / Space / Enter	`action_trigger` はネイティブ `<button type="button">` であり、フォーカス・押下操作はブラウザ既定動作で成立する。