テンプレート

コンポーネントは各部品を単体で ドキュメントし、ブロックはそれらを セクションに組み合わせます。テンプレートはブロックの一段上のレイヤー — ページ全体です。各テンプレートは hc-shell のアプリフレーム、 ブロック規模のコンポジション、そして レシピのサーバレスポンス契約を 1 つの動くページに組み上げます — 部品がどうやってページになるかを 教えるためのものです。

各テンプレートページには次があります:

• フレームつきライブプレビュー — レシピページと同じデモ API (api/recipes/<name>/)への本物の htmx ラウンドトリップ;
• 完全なページスケルトン — 実アプリ形の URL で書かれた 1 つの HTML フェンス;
• 配線マップ — どのコンポーネントがどのリージョンを動かし、その サーバエンドポイントがどのレシピ契約を実装すべきか;
• 本番投入のための 「適応させる」 リスト。

テンプレート一覧

テンプレート	何を組み上げるか
設定ページ	アプリシェル + アカウント設定フォーム: ヒントつきフィールド、mutating-form 流のサブミット、422 でのフィールドエラー分配、成功時のトースト。
CRUD リストページ	アプリシェル + リストの道具立て: ページングされたデータグリッド、一括操作ツールバー、リモートダイアログ編集、Undo つき削除の行。
データグリッドページ	アプリシェルの中でグリッドが残りの高さを占め、グリッドだけがスクロールする — 多段の固定ヘッダー、固定列、ダイアログの検索パネル。
データ入力フォーム	ガード付きフォーム 1 本に業務フォームの全スタック: フォーマットされた金額、IME 正規化、郵便番号→住所補完、自動保存ドラフト、未保存ガード、二重送信の衛生。
確認画面	入力 → 確認 → 完了フロー: サーバが自分のパース結果を描画するレビュー、hidden フィールドで運ぶ値、確認描画時に発行する冪等キー、名前付きボタンの「戻る」。

テンプレートの使い方

1. HTML フェンスからページスケルトンをコピーし、サーバのページ テンプレートに貼り付けます。
2. URL を自分のエンドポイントに差し替えます。 ライブプレビューは このサイトのデモ API に対して動きます。フェンスははじめから 実アプリ形の URL(/members、/products?page=1 など)を使って いるので、リンクされた契約を実装したエンドポイントに向けるだけです。
3. ビヘイビアバンドルをインストールします (import '@hypermedia-components/core/behaviors'; — インストール → ビヘイビア を参照)。テンプレートに必要なもの(トースト、フィールドエラー、 データグリッドの選択、リモートダイアログ、シェルのモバイルナビ)は すべてここから自動インストールされます。
4. 各ページの**「適応させる」**リスト — CSRF、認証、文言 — を ひととおり確認します。

テンプレートは何も再ドキュメントしません: 各リージョンはコンポーネント ページとレシピにリンクし、マークアップ・バリアント・サーバ契約の全体は そちらにあります。