melta-app 0.8.1 → 0.10.0

package/README.md

@@ -668,3 +668,39 @@ telemetry / 使用状況の収集は無い。runtime 依存ゼロ（peerDependen
 ## License
 
 MIT（[LICENSE](./LICENSE)）。同梱するアイコングリフの帰属表示は [THIRD_PARTY_LICENSES.md](./THIRD_PARTY_LICENSES.md)。
+
+
+### 操作バーとしてのHeader
+
+`<Header variant="actions" title="作業ログを残す" leading={closeButton} trailing={actions} />` は、
+タイトルを画面では隠し、読み上げ可能な見出しとして残します。`title`には空でない画面名を渡します。
+左右の操作は既存のslotで渡し、操作間のgapと各ボタンの有効領域はslot内で確保してください。
+Headerの上下余白と下線は標準recipeが持つため、アプリ側で複製しません。
+中央spacer前後のgapはactionsではspacing.1、defaultでは従来のspacing.3です。
+variant省略時は従来どおり可視タイトルを表示します。
+
+カタログをWeb exportしてローカル配信した後、`npm run check:header-layout -- --base <URL>` で
+320/393px幅・大きな子要素の余白と44pt標的を測定できます。Playwrightは検証環境に用意し、
+別のインストールを使う場合は `--playwright-module <playwrightのディレクトリ>` を渡します。
+この実描画検査は手動レーンで、OSの文字拡大・読み上げ確認は別途必要です。
+
+### 中央タイトルのHeader
+
+`variant="centered"` は親のページ余白内に置く中央タイトル（内側横余白と下線なし）、
+`variant="navigation"` は左右のページ余白と端末hairlineを持つ詳細画面用です。
+いずれも最小高44で、左右に同じ幅を予約し、長いタイトルは1行で省略します。
+左右slotには44ptの単独アイコン操作を渡してください。幅の広い文字操作はdefault/actionsを使います。
+見出しと左右操作は独立した読み上げ対象です。
+
+```tsx
+<Header variant="centered" title="ホーム" />
+<Header variant="navigation" title="詳細" leading={backButton} />
+```
+
+中央タイトルの組版はlg/boldです。長い動的タイトルは`titleVariant="base"`で1段下げられます。
+`wrapTitle={heading => <Animated.View ...>{heading}</Animated.View>}`で見出しを保持したまま
+外部のアニメーションを適用できます。非表示中はwrapperに`aria-hidden`等を設定し、
+戻る操作まで隠さないでください。MeltaはReanimatedへ依存しません。
+
+`HEADER_CENTERED_MIN_HEIGHT`は初期見積もり用です。スクロール退避は可能な限りonLayoutの実測値を使い、
+文字拡大時の高くなったHeaderを固定高で切らないでください。

package/lib/module/components/Header.js

@@ -1,25 +1,24 @@
 "use strict";
 
 /**
- * Header — 画面ヘッダー primitive（title + leading? / trailing? slot + 下 border）。
- * contract: header（app 先行定義、melta-contracts）。dogfood 不足-3 の解消。
- * Screen の header slot に差して使う想定（単体でも使える）。
- *
- * - title は melta の Text（xl / bold / text-heading / heading role）で描画し、
- *   heading として読み上げられる（contract a11y required）。
- * - titleWrapStyle の flex:1 で title が余白を占有し trailing を右端へ押す。
- * - 決定ロジックは pure resolver（header.styles.ts）に分離 — recipe との機械照合対象。
+ * Header — 画面名と左右の操作を持つ共通ヘッダー。
+ * 配置・余白・見出しの組版を所有し、navigationやタイトルのアニメーションは利用側が渡す。
  */
-
 import { useMemo } from "react";
-import { View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { useTheme } from "../theme/index.js";
 import { CONTRACTS } from "../contracts/contract-types.js";
 import { Text } from "../primitives/Text.js";
-import { resolveHeaderStyle } from "./header.styles.js";
+import { HEADER_SPEC, isCenteredHeader, resolveHeaderStyle } from "./header.styles.js";
+
+/** 中央タイトルの最小高。スクロール量には可能な限りonLayoutの実測を使う。 */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const HEADER_CENTERED_MIN_HEIGHT = HEADER_SPEC.centeredMinHeight;
 export function Header({
   title,
+  variant = "default",
+  titleVariant = HEADER_SPEC.centeredTitleFont,
+  wrapTitle,
   leading,
   trailing,
   style,
@@ -31,22 +30,58 @@ export function Header({
   } = useTheme();
   const {
     containerStyle,
-    titleWrapStyle
-  } = useMemo(() => resolveHeaderStyle(theme, mode), [theme, mode]);
+    titleWrapStyle,
+    hiddenTitleStyle,
+    leadingStyle,
+    trailingStyle
+  } = useMemo(() => resolveHeaderStyle(theme, mode, {
+    variant
+  }, StyleSheet.hairlineWidth), [theme, mode, variant]);
+  const centered = isCenteredHeader(variant);
+  // 中央タイトルは既存の本文字間を維持し、独立した見出しの意味をwrapperで与える。
+  const centeredTitle = centered ? /*#__PURE__*/_jsx(View, {
+    accessible: true,
+    accessibilityRole: "header",
+    accessibilityLabel: title,
+    children: /*#__PURE__*/_jsx(Text, {
+      variant: titleVariant,
+      weight: HEADER_SPEC.titleWeight,
+      color: HEADER_SPEC.titleColor,
+      numberOfLines: 1,
+      children: title
+    })
+  }) : null;
   return /*#__PURE__*/_jsxs(View, {
     style: [containerStyle, style],
     testID: testID,
-    children: [leading, /*#__PURE__*/_jsx(View, {
+    children: [centered ? /*#__PURE__*/_jsx(View, {
+      style: leadingStyle,
+      children: leading
+    }) : leading, /*#__PURE__*/_jsx(View, {
       style: titleWrapStyle,
-      children: /*#__PURE__*/_jsx(Text, {
-        variant: "xl",
-        weight: "bold",
-        color: "text-heading",
+      children: centered ? wrapTitle ? wrapTitle(centeredTitle) : centeredTitle : variant === "actions" ? /*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        style: hiddenTitleStyle,
+        children: /*#__PURE__*/_jsx(Text, {
+          variant: HEADER_SPEC.titleFont,
+          weight: HEADER_SPEC.titleWeight,
+          color: HEADER_SPEC.titleColor,
+          role: "heading",
+          numberOfLines: 1,
+          children: title
+        })
+      }) : /*#__PURE__*/_jsx(Text, {
+        variant: HEADER_SPEC.titleFont,
+        weight: HEADER_SPEC.titleWeight,
+        color: HEADER_SPEC.titleColor,
         role: "heading",
         numberOfLines: 1,
         children: title
       })
-    }), trailing]
+    }), centered ? /*#__PURE__*/_jsx(View, {
+      style: trailingStyle,
+      children: trailing
+    }) : trailing]
   });
 }
 Header.__contract = CONTRACTS.header;

package/lib/module/components/Header.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","View","useTheme","CONTRACTS","Text","resolveHeaderStyle","jsx","_jsx","jsxs","_jsxs","Header","title","leading","trailing","style","testID","theme","mode","containerStyle","titleWrapStyle","children","variant","weight","color","role","numberOfLines","__contract","header"],"sourceRoot":"../../../src","sources":["components/Header.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,OAAO,QAAwB,OAAO;AAC/C,SAASC,IAAI,QAAwC,cAAc;AACnE,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,SAAS,QAAQ,gCAAgC;AAC1D,SAASC,IAAI,QAAQ,uBAAuB;AAC5C,SAASC,kBAAkB,QAA0B,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAa1E,OAAO,SAASC,MAAMA,CAAC;EAAEC,KAAK;EAAEC,OAAO;EAAEC,QAAQ;EAAEC,KAAK;EAAEC;AAAoB,CAAC,EAAE;EAC/E,MAAM;IAAEC,KAAK;IAAEC;EAAK,CAAC,GAAGf,QAAQ,CAAC,CAAC;EAElC,MAAM;IAAEgB,cAAc;IAAEC;EAAe,CAAC,GAAGnB,OAAO,CAChD,MAAMK,kBAAkB,CAACW,KAAK,EAAEC,IAAI,CAAC,EACrC,CAACD,KAAK,EAAEC,IAAI,CACd,CAAC;EAED,oBACER,KAAA,CAACR,IAAI;IAACa,KAAK,EAAE,CAACI,cAAc,EAAEJ,KAAK,CAAE;IAACC,MAAM,EAAEA,MAAO;IAAAK,QAAA,GAClDR,OAAO,eACRL,IAAA,CAACN,IAAI;MAACa,KAAK,EAAEK,cAAe;MAAAC,QAAA,eAC1Bb,IAAA,CAACH,IAAI;QAACiB,OAAO,EAAC,IAAI;QAACC,MAAM,EAAC,MAAM;QAACC,KAAK,EAAC,cAAc;QAACC,IAAI,EAAC,SAAS;QAACC,aAAa,EAAE,CAAE;QAAAL,QAAA,EACnFT;MAAK,CACF;IAAC,CACH,CAAC,EACNE,QAAQ;EAAA,CACL,CAAC;AAEX;AAEAH,MAAM,CAACgB,UAAU,GAAGvB,SAAS,CAACwB,MAAM","ignoreList":[]}
+{"version":3,"names":["useMemo","StyleSheet","View","useTheme","CONTRACTS","Text","HEADER_SPEC","isCenteredHeader","resolveHeaderStyle","jsx","_jsx","jsxs","_jsxs","HEADER_CENTERED_MIN_HEIGHT","centeredMinHeight","Header","title","variant","titleVariant","centeredTitleFont","wrapTitle","leading","trailing","style","testID","theme","mode","containerStyle","titleWrapStyle","hiddenTitleStyle","leadingStyle","trailingStyle","hairlineWidth","centered","centeredTitle","accessible","accessibilityRole","accessibilityLabel","children","weight","titleWeight","color","titleColor","numberOfLines","pointerEvents","titleFont","role","__contract","header"],"sourceRoot":"../../../src","sources":["components/Header.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/header.styles.js

@@ -1,33 +1,80 @@
 "use strict";
 
-/**
- * header.styles — Header の pure style resolver（styleRefs conformance 対応で Header.tsx から分離）。
- *
- * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
- * 直接実行できる。recipes/app/header.recipe.json（melta-contracts の styleRefs）との
- * 機械照合は scripts/lib/header-conformance.test.ts が行う。
- */
+/** Headerの見た目をrecipeと照合できるpure resolverへ集約する。 */
 
-/**
- * mode → ヘッダー style の解決（header.recipe styleRefs の 1:1 写像）。
- * title の typography はここでは持たない — Header は melta の Text
- * （variant="xl" weight="bold" color="text-heading" role="heading"）を compose する（text recipe が正）。
- */
-export function resolveHeaderStyle(theme, mode) {
+export const HEADER_SPEC = {
+  gap: "3",
+  actionsGap: "1",
+  paddingX: "4",
+  paddingY: "3",
+  titleFont: "xl",
+  centeredTitleFont: "lg",
+  titleWeight: "bold",
+  titleColor: "text-heading",
+  borderWidth: 1,
+  hiddenTitleSize: 1,
+  centeredMinHeight: 44,
+  sideMinWidth: 44
+};
+/** 中央タイトルの2形だけが同じ配置と組版を共有する。 */
+export function isCenteredHeader(variant) {
+  return variant === "centered" || variant === "navigation";
+}
+export function resolveHeaderStyle(theme, mode, props = {},
+// recipeは密度1で照合し、実機のhairline値だけを外から注入する。
+hairlineWidth = HEADER_SPEC.borderWidth) {
+  if (isCenteredHeader(props.variant)) {
+    return {
+      containerStyle: {
+        flexDirection: "row",
+        alignItems: "center",
+        minHeight: HEADER_SPEC.centeredMinHeight,
+        ...(props.variant === "navigation" ? {
+          paddingHorizontal: theme.spacing[HEADER_SPEC.paddingX],
+          borderBottomWidth: hairlineWidth,
+          borderBottomColor: theme.color.semantic[mode]["border-default"]
+        } : {})
+      },
+      titleWrapStyle: {
+        flexShrink: 1,
+        minWidth: 0
+      },
+      leadingStyle: {
+        flex: 1,
+        minWidth: HEADER_SPEC.sideMinWidth,
+        flexDirection: "row",
+        justifyContent: "flex-start"
+      },
+      trailingStyle: {
+        flex: 1,
+        minWidth: HEADER_SPEC.sideMinWidth,
+        flexDirection: "row",
+        justifyContent: "flex-end"
+      }
+    };
+  }
   return {
     containerStyle: {
       flexDirection: "row",
       alignItems: "center",
-      gap: theme.spacing["3"],
-      paddingHorizontal: theme.spacing["4"],
-      paddingVertical: theme.spacing["3"],
+      gap: theme.spacing[props.variant === "actions" ? HEADER_SPEC.actionsGap : HEADER_SPEC.gap],
+      paddingHorizontal: theme.spacing[HEADER_SPEC.paddingX],
+      paddingVertical: theme.spacing[HEADER_SPEC.paddingY],
       backgroundColor: theme.color.semantic[mode]["bg-page"],
-      borderBottomWidth: 1,
+      borderBottomWidth: HEADER_SPEC.borderWidth,
       borderBottomColor: theme.color.semantic[mode]["border-default"]
     },
     titleWrapStyle: {
       flex: 1
-    }
+    },
+    ...(props.variant === "actions" ? {
+      hiddenTitleStyle: {
+        position: "absolute",
+        width: HEADER_SPEC.hiddenTitleSize,
+        height: HEADER_SPEC.hiddenTitleSize,
+        overflow: "hidden"
+      }
+    } : {})
   };
 }
 //# sourceMappingURL=header.styles.js.map

package/lib/module/components/header.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["resolveHeaderStyle","theme","mode","containerStyle","flexDirection","alignItems","gap","spacing","paddingHorizontal","paddingVertical","backgroundColor","color","semantic","borderBottomWidth","borderBottomColor","titleWrapStyle","flex"],"sourceRoot":"../../../src","sources":["components/header.styles.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAkBA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,kBAAkBA,CAACC,KAAkB,EAAEC,IAAe,EAAe;EACnF,OAAO;IACLC,cAAc,EAAE;MACdC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,GAAG,EAAEL,KAAK,CAACM,OAAO,CAAC,GAAG,CAAC;MACvBC,iBAAiB,EAAEP,KAAK,CAACM,OAAO,CAAC,GAAG,CAAC;MACrCE,eAAe,EAAER,KAAK,CAACM,OAAO,CAAC,GAAG,CAAC;MACnCG,eAAe,EAAET,KAAK,CAACU,KAAK,CAACC,QAAQ,CAACV,IAAI,CAAC,CAAC,SAAS,CAAC;MACtDW,iBAAiB,EAAE,CAAC;MACpBC,iBAAiB,EAAEb,KAAK,CAACU,KAAK,CAACC,QAAQ,CAACV,IAAI,CAAC,CAAC,gBAAgB;IAChE,CAAC;IACDa,cAAc,EAAE;MAAEC,IAAI,EAAE;IAAE;EAC5B,CAAC;AACH","ignoreList":[]}
+{"version":3,"names":["HEADER_SPEC","gap","actionsGap","paddingX","paddingY","titleFont","centeredTitleFont","titleWeight","titleColor","borderWidth","hiddenTitleSize","centeredMinHeight","sideMinWidth","isCenteredHeader","variant","resolveHeaderStyle","theme","mode","props","hairlineWidth","containerStyle","flexDirection","alignItems","minHeight","paddingHorizontal","spacing","borderBottomWidth","borderBottomColor","color","semantic","titleWrapStyle","flexShrink","minWidth","leadingStyle","flex","justifyContent","trailingStyle","paddingVertical","backgroundColor","hiddenTitleStyle","position","width","height","overflow"],"sourceRoot":"../../../src","sources":["components/header.styles.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/contracts/contract-types.js

@@ -93,8 +93,8 @@ export const CONTRACTS = {
   },
   header: {
     id: "header",
-    version: "0.1.0",
-    variants: ["default"],
+    version: "0.3.0",
+    variants: ["default", "actions", "centered", "navigation"],
     sizes: [],
     states: ["default"]
   },

package/lib/module/contracts/contract-types.js.map

@@ -1 +1 @@
-{"version":3,"names":["CONTRACTS","text","id","version","variants","sizes","states","button","tag","card","image","surface","skeleton","emptyState","metric","stack","row","screen","header","icon","avatar","textfield","toggle","checkbox","radio","alert","toast","progress","modal","actionSheet","bottomSheet"],"sourceRoot":"../../../src","sources":["contracts/contract-types.ts"],"mappings":";;AAAA;AACA;AACA;;AAEA;;AASA,OAAO,MAAMA,SAAS,GAAG;EACvBC,IAAI,EAAE;IACJC,EAAE,EAAE,MAAM;IACVC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC;IAC/DC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC,SAAS;EACpB,CAAC;EACDC,MAAM,EAAE;IACNL,EAAE,EAAE,QAAQ;IACZC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,CAAC;IAC9FC,KAAK,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;IACnCC,MAAM,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS;EAC7D,CAAC;EACDE,GAAG,EAAE;IACHN,EAAE,EAAE,KAAK;IACTC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,aAAa,CAAC;IAC/CC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO;EAC5D,CAAC;EACDG,IAAI,EAAE;IACJP,EAAE,EAAE,MAAM;IACVC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC;IAC9CC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,cAAc;EAC7C,CAAC;EACDI,KAAK,EAAE;IACLR,EAAE,EAAE,OAAO;IACXC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,SAAS,CAAC;IACrBC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC,SAAS,EAAE,OAAO;EAC7B,CAAC;EACDK,OAAO,EAAE;IACPT,EAAE,EAAE,SAAS;IACbC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,SAAS,CAAC;IACrBC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC,SAAS;EACpB,CAAC;EACDM,QAAQ,EAAE;IACRV,EAAE,EAAE,UAAU;IACdC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC;IACpCC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ;EACzC,CAAC;EACDO,UAAU,EAAE;IACVX,EAAE,EAAE,aAAa;IACjBC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,SAAS,CAAC;IACrBC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC,SAAS;EACpB,CAAC;EACDQ,MAAM,EAAE;IACNZ,EAAE,EAAE,QAAQ;IACZC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,SAAS,CAAC;IACrBC,KAAK,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;IACzBC,MAAM,EAAE,CAAC,SAAS;EACpB,CAAC;EACDS,KAAK,EAAE;IACLb,EAAE,EAAE,OAAO;IACXC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,SAAS,CAAC;IACrBC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC,SAAS;EACpB,CAAC;EACDU,GAAG,EAAE;IACHd,EAAE,EAAE,KAAK;IACTC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,SAAS,CAAC;IACrBC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC,SAAS;EACpB,CAAC;EACDW,MAAM,EAAE;IACNf,EAAE,EAAE,QAAQ;IACZC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;IAC7BC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC,SAAS;EACpB,CAAC;EACDY,MAAM,EAAE;IACNhB,EAAE,EAAE,QAAQ;IACZC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,SAAS,CAAC;IACrBC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC,SAAS;EACpB,CAAC;EACDa,IAAI,EAAE;IACJjB,EAAE,EAAE,MAAM;IACVC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,SAAS,CAAC;IACrBC,KAAK,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;IACzBC,MAAM,EAAE,CAAC,SAAS;EACpB,CAAC;EACDc,MAAM,EAAE;IACNlB,EAAE,EAAE,QAAQ;IACZC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,CAAC;IACxCC,KAAK,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;IACnCC,MAAM,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS;EACjD,CAAC;EACDe,SAAS,EAAE;IACTnB,EAAE,EAAE,WAAW;IACfC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,CAAC;IACrDC,KAAK,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;IACnCC,MAAM,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS;EACtE,CAAC;EACDgB,MAAM,EAAE;IACNpB,EAAE,EAAE,QAAQ;IACZC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC;IACvBC,KAAK,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC1BC,MAAM,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU;EACpD,CAAC;EACDiB,QAAQ,EAAE;IACRrB,EAAE,EAAE,UAAU;IACdC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,SAAS,EAAE,UAAU,EAAE,eAAe,CAAC;IAClDC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO;EAC3F,CAAC;EACDkB,KAAK,EAAE;IACLtB,EAAE,EAAE,OAAO;IACXC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,YAAY,CAAC;IAClDC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO;EAC5E,CAAC;EACDmB,KAAK,EAAE;IACLvB,EAAE,EAAE,OAAO;IACXC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;IACjDC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC,SAAS,EAAE,YAAY;EAClC,CAAC;EACDoB,KAAK,EAAE;IACLxB,EAAE,EAAE,OAAO;IACXC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC;IACjDC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO;EAClE,CAAC;EACDqB,QAAQ,EAAE;IACRzB,EAAE,EAAE,UAAU;IACdC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,eAAe,CAAC;IACjDC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,UAAU;EAChE,CAAC;EACDsB,KAAK,EAAE;IACL1B,EAAE,EAAE,OAAO;IACXC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,OAAO,CAAC;IAC3CC,KAAK,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;IACnCC,MAAM,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS;EACvC,CAAC;EACDuB,WAAW,EAAE;IACX3B,EAAE,EAAE,cAAc;IAClBC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,SAAS,CAAC;IACrBC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC,SAAS;EACpB,CAAC;EACDwB,WAAW,EAAE;IACX5B,EAAE,EAAE,cAAc;IAClBC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,CAAC,SAAS,CAAC;IACrBC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC,SAAS;EACpB;AACF,CAAkD;;AAIlD;;AAEA;;AAEA","ignoreList":[]}
+{"version":3,"names":["CONTRACTS","text","id","version","variants","sizes","states","button","tag","card","image","surface","skeleton","emptyState","metric","stack","row","screen","header","icon","avatar","textfield","toggle","checkbox","radio","alert","toast","progress","modal","actionSheet","bottomSheet"],"sourceRoot":"../../../src","sources":["contracts/contract-types.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/index.js

@@ -17,4 +17,5 @@ export * from "./components/index.js";
 
 // 契約メタ（variant/size/state の実行時参照 + 型。__contract 照合にも使う）
 export { CONTRACTS } from "./contracts/contract-types.js";
+export { HEADER_CENTERED_MIN_HEIGHT } from "./components/Header.js";
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["CONTRACTS"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,cAAc,kBAAkB;;AAEhC;AACA,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;;AAErC;AACA,SACEA,SAAS,QAMJ,+BAA+B","ignoreList":[]}
+{"version":3,"names":["CONTRACTS","HEADER_CENTERED_MIN_HEIGHT"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,cAAc,kBAAkB;;AAEhC;AACA,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;;AAErC;AACA,SACEA,SAAS,QAMJ,+BAA+B;AAEtC,SAASC,0BAA0B,QAAQ,wBAAwB","ignoreList":[]}

package/lib/typescript/src/components/Header.d.ts

@@ -1,31 +1,31 @@
 /**
- * Header — 画面ヘッダー primitive（title + leading? / trailing? slot + 下 border）。
- * contract: header（app 先行定義、melta-contracts）。dogfood 不足-3 の解消。
- * Screen の header slot に差して使う想定（単体でも使える）。
- *
- * - title は melta の Text（xl / bold / text-heading / heading role）で描画し、
- *   heading として読み上げられる（contract a11y required）。
- * - titleWrapStyle の flex:1 で title が余白を占有し trailing を右端へ押す。
- * - 決定ロジックは pure resolver（header.styles.ts）に分離 — recipe との機械照合対象。
+ * Header — 画面名と左右の操作を持つ共通ヘッダー。
+ * 配置・余白・見出しの組版を所有し、navigationやタイトルのアニメーションは利用側が渡す。
  */
 import { type ReactNode } from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
+import { type VariantOf } from "../contracts/contract-types.js";
+/** 中央タイトルの最小高。スクロール量には可能な限りonLayoutの実測を使う。 */
+export declare const HEADER_CENTERED_MIN_HEIGHT: 44;
 interface HeaderProps {
-    /** 画面タイトル（heading として読み上げ）。 */
+    /** 空でない画面名。actionsでも読み上げるため必須。 */
     title: string;
-    /** title の左の slot（戻るボタン等）。 */
+    variant?: VariantOf<"header">;
+    /** 中央タイトルの長い画面名を1段下げる。default/actionsの組版は変更しない。 */
+    titleVariant?: "base" | "lg";
+    /** 中央タイトルのfade用。渡された見出しを保ち、アニメーションと読み上げ非表示だけを包む。 */
+    wrapTitle?: (heading: ReactNode) => ReactNode;
     leading?: ReactNode;
-    /** 右端の slot（アクション等）。 */
     trailing?: ReactNode;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }
-export declare function Header({ title, leading, trailing, style, testID }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ title, variant, titleVariant, wrapTitle, leading, trailing, style, testID }: HeaderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Header {
     var __contract: {
         readonly id: "header";
-        readonly version: "0.1.0";
-        readonly variants: readonly ["default"];
+        readonly version: "0.3.0";
+        readonly variants: readonly ["default", "actions", "centered", "navigation"];
         readonly sizes: readonly [];
         readonly states: readonly ["default"];
     };

package/lib/typescript/src/components/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/Header.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAMpE,UAAU,WAAW;IACnB,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,WAAW,2CAmB9E;yBAnBe,MAAM"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/Header.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhF,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAI3E,8CAA8C;AAC9C,eAAO,MAAM,0BAA0B,IAAgC,CAAC;AAExE,UAAU,WAAW;IACnB,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC9B,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,oDAAoD;IACpD,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,SAAS,CAAC;IAC9C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,OAAmB,EAAE,YAA4C,EAC/F,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,WAAW,2CAkC3D;yBAnCe,MAAM"}

package/lib/typescript/src/components/header.styles.d.ts

@@ -1,30 +1,31 @@
-/**
- * header.styles — Header の pure style resolver（styleRefs conformance 対応で Header.tsx から分離）。
- *
- * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
- * 直接実行できる。recipes/app/header.recipe.json（melta-contracts の styleRefs）との
- * 機械照合は scripts/lib/header-conformance.test.ts が行う。
- */
+/** Headerの見た目をrecipeと照合できるpure resolverへ集約する。 */
+import type { ViewStyle } from "react-native";
 import type { NativeTheme, ThemeMode } from "../theme/index.js";
+import type { VariantOf } from "../contracts/contract-types.js";
+export declare const HEADER_SPEC: {
+    readonly gap: "3";
+    readonly actionsGap: "1";
+    readonly paddingX: "4";
+    readonly paddingY: "3";
+    readonly titleFont: "xl";
+    readonly centeredTitleFont: "lg";
+    readonly titleWeight: "bold";
+    readonly titleColor: "text-heading";
+    readonly borderWidth: 1;
+    readonly hiddenTitleSize: 1;
+    readonly centeredMinHeight: 44;
+    readonly sideMinWidth: 44;
+};
 export interface HeaderStyle {
-    containerStyle: {
-        flexDirection: "row";
-        alignItems: "center";
-        gap: number;
-        paddingHorizontal: number;
-        paddingVertical: number;
-        backgroundColor: string;
-        borderBottomWidth: 1;
-        borderBottomColor: string;
-    };
-    titleWrapStyle: {
-        flex: 1;
-    };
+    containerStyle: ViewStyle;
+    titleWrapStyle: ViewStyle;
+    hiddenTitleStyle?: ViewStyle;
+    leadingStyle?: ViewStyle;
+    trailingStyle?: ViewStyle;
 }
-/**
- * mode → ヘッダー style の解決（header.recipe styleRefs の 1:1 写像）。
- * title の typography はここでは持たない — Header は melta の Text
- * （variant="xl" weight="bold" color="text-heading" role="heading"）を compose する（text recipe が正）。
- */
-export declare function resolveHeaderStyle(theme: NativeTheme, mode: ThemeMode): HeaderStyle;
+/** 中央タイトルの2形だけが同じ配置と組版を共有する。 */
+export declare function isCenteredHeader(variant?: VariantOf<"header">): boolean;
+export declare function resolveHeaderStyle(theme: NativeTheme, mode: ThemeMode, props?: {
+    variant?: VariantOf<"header">;
+}, hairlineWidth?: number): HeaderStyle;
 //# sourceMappingURL=header.styles.d.ts.map

package/lib/typescript/src/components/header.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/header.styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEhE,MAAM,WAAW,WAAW;IAC1B,cAAc,EAAE;QACd,aAAa,EAAE,KAAK,CAAC;QACrB,UAAU,EAAE,QAAQ,CAAC;QACrB,GAAG,EAAE,MAAM,CAAC;QACZ,iBAAiB,EAAE,MAAM,CAAC;QAC1B,eAAe,EAAE,MAAM,CAAC;QACxB,eAAe,EAAE,MAAM,CAAC;QACxB,iBAAiB,EAAE,CAAC,CAAC;QACrB,iBAAiB,EAAE,MAAM,CAAC;KAC3B,CAAC;IACF,cAAc,EAAE;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,GAAG,WAAW,CAcnF"}
+{"version":3,"file":"header.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/header.styles.ts"],"names":[],"mappings":"AAAA,iDAAiD;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAA0D,MAAM,mBAAmB,CAAC;AACxH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAEhE,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAQvB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,cAAc,EAAE,SAAS,CAAC;IAC1B,cAAc,EAAE,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,gCAAgC;AAChC,wBAAgB,gBAAgB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,GAAG,OAAO,CAEvE;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,GAAE;IAAE,OAAO,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAA;CAAO,EAElF,aAAa,GAA8B,MAAM,GAChD,WAAW,CAiCb"}

package/lib/typescript/src/contracts/contract-types.d.ts

@@ -93,8 +93,8 @@ export declare const CONTRACTS: {
     };
     readonly header: {
         readonly id: "header";
-        readonly version: "0.1.0";
-        readonly variants: readonly ["default"];
+        readonly version: "0.3.0";
+        readonly variants: readonly ["default", "actions", "centered", "navigation"];
         readonly sizes: readonly [];
         readonly states: readonly ["default"];
     };

package/lib/typescript/src/index.d.ts

@@ -9,4 +9,5 @@ export * from "./theme/index.js";
 export * from "./primitives/index.js";
 export * from "./components/index.js";
 export { CONTRACTS, type ContractId, type ContractShape, type VariantOf, type SizeOf, type StateOf, } from "./contracts/contract-types.js";
+export { HEADER_CENTERED_MIN_HEIGHT } from "./components/Header.js";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,kBAAkB,CAAC;AAGjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AAGtC,OAAO,EACL,SAAS,EACT,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,MAAM,EACX,KAAK,OAAO,GACb,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,kBAAkB,CAAC;AAGjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AAGtC,OAAO,EACL,SAAS,EACT,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,MAAM,EACX,KAAK,OAAO,GACb,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC"}

package/llms.txt

@@ -23,7 +23,7 @@ UI を組む前に docs/patterns.md（組み方の規範）を読むこと。exa
 - [card](https://melta.tsubotax.com/design/contracts/components/card.contract.json): ✅ `Card` — コンテンツコンテナ。Basic / Metrics / Media / Action / Link の5バリエーション。
 - [checkbox](https://melta.tsubotax.com/design/contracts/components/checkbox.contract.json): ✅ `Checkbox` — 複数選択フォームコントロール。CSS 18px サイズ。
 - [empty-state](https://melta.tsubotax.com/design/contracts/components/empty-state.contract.json): ✅ `EmptyState` — データ無し時のプレースホルダー（アイコン + タイトル + 説明 + 任意のアクション）。Text + Button の compose。
-- [header](https://melta.tsubotax.com/design/contracts/components/header.contract.json): ✅ `Header` — 画面ヘッダー primitive（title + leading? / trailing? slot、下 border）。Screen の header slot に差して使う想定。title は text-heading の見出しとして読
+- [header](https://melta.tsubotax.com/design/contracts/components/header.contract.json): ✅ `Header` — 画面ヘッダー。defaultは左寄せ見出し、actionsは可視タイトルなしの操作バー、centered/navigationは中央タイトル。配置・寸法・文字組みはHeaderが所有し、画面の操作内容とnavigationは利用側が渡す。
 - [icon](https://melta.tsubotax.com/design/contracts/components/icon.contract.json): ✅ `Icon` — 統一アイコン primitive。name prop でグリフを選択し（グリフ集合は実装側の公開面 = assets/icons の Charcoal セット由来）、色は semantic token キー限定の prop（default 
 - [image](https://melta.tsubotax.com/design/contracts/components/image.contract.json): ✅ `Image` — 画像表示 primitive。aspectRatio / radius / contentFit / onError fallback を持つ。Phase1 は RN コア Image、expo-image は Phase2。
 - [metric](https://melta.tsubotax.com/design/contracts/components/metric.contract.json): ✅ `Metric` — 数値 + 単位 + ラベルの指標表示 primitive（距離 / 時間 / 獲得標高 等の走行サマリー表示）。tabular-nums で桁揃え。sizes の height は数値テキストの想定行高(px)で、実 fontSize は実

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melta-app",
-  "version": "0.8.1",
+  "version": "0.10.0",
   "description": "melta for APP — melta デザインシステムの React Native UI kit。melta-contracts（デザイン契約）を single source of truth に RN 実装でその契約を満たす。アプリ本体ではなくライブラリ。",
   "license": "MIT",
   "homepage": "https://app.melta.tsubotax.com",
@@ -86,7 +86,7 @@
     "@types/react": "~19.2.2",
     "eslint": "^10.4.1",
     "jest": "^29.7.0",
-    "melta-contracts": "^0.7.0",
+    "melta-contracts": "0.9.0",
     "react": "19.2.3",
     "react-native": "0.85.3",
     "react-native-builder-bob": "^0.40.13",
@@ -117,7 +117,8 @@
     "check:installability": "bash scripts/check-installability.sh",
     "check:build-fresh": "tsx scripts/check-build-fresh.ts",
     "release": "npm run build && npm run typecheck && npm run lint && npm test && npm run test:rn && npm run check:drift && npm run check:build-fresh && npm run check:installability && npm publish",
-    "build:llms": "tsx scripts/build-llms-txt.ts"
+    "build:llms": "tsx scripts/build-llms-txt.ts",
+    "check:header-layout": "node scripts/check-header-layout.mjs"
   },
   "jest": {
     "preset": "@react-native/jest-preset",

package/src/components/Header.tsx

@@ -1,51 +1,65 @@
 /**
- * Header — 画面ヘッダー primitive（title + leading? / trailing? slot + 下 border）。
- * contract: header（app 先行定義、melta-contracts）。dogfood 不足-3 の解消。
- * Screen の header slot に差して使う想定（単体でも使える）。
- *
- * - title は melta の Text（xl / bold / text-heading / heading role）で描画し、
- *   heading として読み上げられる（contract a11y required）。
- * - titleWrapStyle の flex:1 で title が余白を占有し trailing を右端へ押す。
- * - 決定ロジックは pure resolver（header.styles.ts）に分離 — recipe との機械照合対象。
+ * Header — 画面名と左右の操作を持つ共通ヘッダー。
+ * 配置・余白・見出しの組版を所有し、navigationやタイトルのアニメーションは利用側が渡す。
  */
-
 import { useMemo, type ReactNode } from "react";
-import { View, type StyleProp, type ViewStyle } from "react-native";
+import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
 import { useTheme } from "../theme/index.js";
-import { CONTRACTS } from "../contracts/contract-types.js";
+import { CONTRACTS, type VariantOf } from "../contracts/contract-types.js";
 import { Text } from "../primitives/Text.js";
-import { resolveHeaderStyle, type HeaderStyle } from "./header.styles.js";
+import { HEADER_SPEC, isCenteredHeader, resolveHeaderStyle } from "./header.styles.js";
+
+/** 中央タイトルの最小高。スクロール量には可能な限りonLayoutの実測を使う。 */
+export const HEADER_CENTERED_MIN_HEIGHT = HEADER_SPEC.centeredMinHeight;
 
 interface HeaderProps {
-  /** 画面タイトル（heading として読み上げ）。 */
+  /** 空でない画面名。actionsでも読み上げるため必須。 */
   title: string;
-  /** title の左の slot（戻るボタン等）。 */
+  variant?: VariantOf<"header">;
+  /** 中央タイトルの長い画面名を1段下げる。default/actionsの組版は変更しない。 */
+  titleVariant?: "base" | "lg";
+  /** 中央タイトルのfade用。渡された見出しを保ち、アニメーションと読み上げ非表示だけを包む。 */
+  wrapTitle?: (heading: ReactNode) => ReactNode;
   leading?: ReactNode;
-  /** 右端の slot（アクション等）。 */
   trailing?: ReactNode;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
 
-export function Header({ title, leading, trailing, style, testID }: HeaderProps) {
+export function Header({ title, variant = "default", titleVariant = HEADER_SPEC.centeredTitleFont,
+  wrapTitle, leading, trailing, style, testID }: HeaderProps) {
   const { theme, mode } = useTheme();
-
-  const { containerStyle, titleWrapStyle } = useMemo<HeaderStyle>(
-    () => resolveHeaderStyle(theme, mode),
-    [theme, mode],
+  const { containerStyle, titleWrapStyle, hiddenTitleStyle, leadingStyle, trailingStyle } = useMemo(
+    () => resolveHeaderStyle(theme, mode, { variant }, StyleSheet.hairlineWidth), [theme, mode, variant],
   );
-
+  const centered = isCenteredHeader(variant);
+  // 中央タイトルは既存の本文字間を維持し、独立した見出しの意味をwrapperで与える。
+  const centeredTitle = centered ? (
+    <View accessible accessibilityRole="header" accessibilityLabel={title}>
+      <Text variant={titleVariant} weight={HEADER_SPEC.titleWeight}
+        color={HEADER_SPEC.titleColor} numberOfLines={1}>{title}</Text>
+    </View>
+  ) : null;
   return (
     <View style={[containerStyle, style]} testID={testID}>
-      {leading}
+      {centered ? <View style={leadingStyle}>{leading}</View> : leading}
       <View style={titleWrapStyle}>
-        <Text variant="xl" weight="bold" color="text-heading" role="heading" numberOfLines={1}>
-          {title}
-        </Text>
+        {centered ? (wrapTitle ? wrapTitle(centeredTitle) : centeredTitle) : variant === "actions" ? (
+          <View pointerEvents="none" style={hiddenTitleStyle}>
+            <Text variant={HEADER_SPEC.titleFont} weight={HEADER_SPEC.titleWeight}
+              color={HEADER_SPEC.titleColor} role="heading" numberOfLines={1}>
+              {title}
+            </Text>
+          </View>
+        ) : (
+          <Text variant={HEADER_SPEC.titleFont} weight={HEADER_SPEC.titleWeight}
+            color={HEADER_SPEC.titleColor} role="heading" numberOfLines={1}>
+            {title}
+          </Text>
+        )}
       </View>
-      {trailing}
+      {centered ? <View style={trailingStyle}>{trailing}</View> : trailing}
     </View>
   );
 }
-
 Header.__contract = CONTRACTS.header;

package/src/components/header.styles.ts

@@ -1,44 +1,66 @@
-/**
- * header.styles — Header の pure style resolver（styleRefs conformance 対応で Header.tsx から分離）。
- *
- * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
- * 直接実行できる。recipes/app/header.recipe.json（melta-contracts の styleRefs）との
- * 機械照合は scripts/lib/header-conformance.test.ts が行う。
- */
+/** Headerの見た目をrecipeと照合できるpure resolverへ集約する。 */
+import type { ViewStyle } from "react-native";
+import type { NativeTheme, ThemeMode, SpacingKey, FontSizeKey, FontWeightKey, SemanticColors } from "../theme/index.js";
+import type { VariantOf } from "../contracts/contract-types.js";
 
-import type { NativeTheme, ThemeMode } from "../theme/index.js";
+export const HEADER_SPEC = {
+  gap: "3", actionsGap: "1", paddingX: "4", paddingY: "3",
+  titleFont: "xl", centeredTitleFont: "lg", titleWeight: "bold", titleColor: "text-heading",
+  borderWidth: 1, hiddenTitleSize: 1, centeredMinHeight: 44, sideMinWidth: 44,
+} as const satisfies {
+  gap: SpacingKey; actionsGap: SpacingKey; paddingX: SpacingKey; paddingY: SpacingKey;
+  titleFont: FontSizeKey; centeredTitleFont: FontSizeKey; titleWeight: FontWeightKey; titleColor: keyof SemanticColors;
+  borderWidth: 1; hiddenTitleSize: 1; centeredMinHeight: 44; sideMinWidth: 44;
+};
 
 export interface HeaderStyle {
-  containerStyle: {
-    flexDirection: "row";
-    alignItems: "center";
-    gap: number;
-    paddingHorizontal: number;
-    paddingVertical: number;
-    backgroundColor: string;
-    borderBottomWidth: 1;
-    borderBottomColor: string;
-  };
-  titleWrapStyle: { flex: 1 };
+  containerStyle: ViewStyle;
+  titleWrapStyle: ViewStyle;
+  hiddenTitleStyle?: ViewStyle;
+  leadingStyle?: ViewStyle;
+  trailingStyle?: ViewStyle;
+}
+
+/** 中央タイトルの2形だけが同じ配置と組版を共有する。 */
+export function isCenteredHeader(variant?: VariantOf<"header">): boolean {
+  return variant === "centered" || variant === "navigation";
 }
 
-/**
- * mode → ヘッダー style の解決（header.recipe styleRefs の 1:1 写像）。
- * title の typography はここでは持たない — Header は melta の Text
- * （variant="xl" weight="bold" color="text-heading" role="heading"）を compose する（text recipe が正）。
- */
-export function resolveHeaderStyle(theme: NativeTheme, mode: ThemeMode): HeaderStyle {
+export function resolveHeaderStyle(
+  theme: NativeTheme, mode: ThemeMode, props: { variant?: VariantOf<"header"> } = {},
+  // recipeは密度1で照合し、実機のhairline値だけを外から注入する。
+  hairlineWidth = HEADER_SPEC.borderWidth as number,
+): HeaderStyle {
+  if (isCenteredHeader(props.variant)) {
+    return {
+      containerStyle: {
+        flexDirection: "row", alignItems: "center", minHeight: HEADER_SPEC.centeredMinHeight,
+        ...(props.variant === "navigation" ? {
+          paddingHorizontal: theme.spacing[HEADER_SPEC.paddingX],
+          borderBottomWidth: hairlineWidth,
+          borderBottomColor: theme.color.semantic[mode]["border-default"],
+        } : {}),
+      },
+      titleWrapStyle: { flexShrink: 1, minWidth: 0 },
+      leadingStyle: { flex: 1, minWidth: HEADER_SPEC.sideMinWidth, flexDirection: "row", justifyContent: "flex-start" },
+      trailingStyle: { flex: 1, minWidth: HEADER_SPEC.sideMinWidth, flexDirection: "row", justifyContent: "flex-end" },
+    };
+  }
   return {
     containerStyle: {
-      flexDirection: "row",
-      alignItems: "center",
-      gap: theme.spacing["3"],
-      paddingHorizontal: theme.spacing["4"],
-      paddingVertical: theme.spacing["3"],
+      flexDirection: "row", alignItems: "center", gap: theme.spacing[props.variant === "actions" ? HEADER_SPEC.actionsGap : HEADER_SPEC.gap],
+      paddingHorizontal: theme.spacing[HEADER_SPEC.paddingX],
+      paddingVertical: theme.spacing[HEADER_SPEC.paddingY],
       backgroundColor: theme.color.semantic[mode]["bg-page"],
-      borderBottomWidth: 1,
+      borderBottomWidth: HEADER_SPEC.borderWidth,
       borderBottomColor: theme.color.semantic[mode]["border-default"],
     },
     titleWrapStyle: { flex: 1 },
+    ...(props.variant === "actions" ? {
+      hiddenTitleStyle: {
+        position: "absolute" as const, width: HEADER_SPEC.hiddenTitleSize,
+        height: HEADER_SPEC.hiddenTitleSize, overflow: "hidden" as const,
+      },
+    } : {}),
   };
 }

package/src/contracts/contract-types.ts

@@ -98,8 +98,8 @@ export const CONTRACTS = {
   },
   header: {
     id: "header",
-    version: "0.1.0",
-    variants: ["default"],
+    version: "0.3.0",
+    variants: ["default", "actions", "centered", "navigation"],
     sizes: [],
     states: ["default"],
   },

package/src/index.ts

@@ -22,3 +22,5 @@ export {
   type SizeOf,
   type StateOf,
 } from "./contracts/contract-types.js";
+
+export { HEADER_CENTERED_MIN_HEIGHT } from "./components/Header.js";