melta-app 0.4.3 → 0.5.1

package/README.md

@@ -7,7 +7,9 @@
 - **Showcase / Live Catalog**: https://app.melta.tsubotax.com （Live Catalog は実 RN コンポーネントの web export。HTML 再現デモではない）
 - **Web 版 showcase**: https://melta.tsubotax.com
 
-D2I アプリが最初の adopter / dogfood。最初の実需は「活動記録をサマリーカードに焼いて外部シェア」機能。
+**現在の adopter は 1 つ**（非公開プロジェクトのモバイルアプリ）。dogfood はそこで回している。
+D2I は当初想定していた最初の adopter だが、mobile 側はまだ melta-app を導入していない
+（D2I の web 側が使っているのは melta-ui）。
 
 ## Install
 
@@ -74,10 +76,33 @@ const theme = defineTheme({
 
 > 現状 `color.primary` / `text-accent` / `elevation` / status の light 値は、単一 dark のテーマでも**必須のまま**。省略できるのは `color.semantic` の mode だけで、他の軸を「持たない」と宣言する仕組みは後続で入れる。
 
+### 押せるカード（`variant="action"` / `"link"`）
+
+**カード面そのものは操作要素ではない。** 面を押せるのはポインタ利用者向けの近道で、
+キーボードとスクリーンリーダーからの到達手段は**カード内の操作要素**が担う。
+そのため `primaryAction` が必須になっている。
+
+```tsx
+<Card
+  variant="action"
+  onPress={openLog}
+  primaryAction={<Button label="製作ログを見る" onPress={openLog} />}
+>
+  <Text variant="lg" role="heading">工房 #12</Text>
+</Card>
+```
+
+- `primaryAction` は面の `onPress` と**同じ操作**を指す（別の遷移先にしない）
+- ラベルは `primaryAction` 側に付ける。カードは名前を持たない（`role="article"` の領域）
+- カード内に操作要素が複数あってよい。`primaryAction` に置くのは**主アクション**（面を押したときの遷移先と一致するもの）
+- 面に `accessibilityRole="button"` は付かない。`Button` を内包しても DOM が壊れない
+
+0.4.x からの移行は [CHANGELOG](./CHANGELOG.md#050--2026-07-29) を参照。
+
 ## 設計の核
 
 - **契約は共有、実装は各最適**: tokens / 禁止ルール / component 契約は `melta-contracts`（JSON）が SSOT。melta-app に token は持たない（二重化を物理防止）。
-- **公開 DS の純度を守る**: 汎用 UI プリミティブだけを置く。D2I 固有 UI（アプリ固有の画面・機能）は **D2I 側**に置き、ここには混ぜない。
+- **公開 DS の純度を守る**: 汎用 UI プリミティブだけを置く。アプリ固有の UI（特定サービスの画面・機能・語彙）は**各アプリ側**に置き、ここには混ぜない。
 - **依存最小**: 初期は RN `StyleSheet` 固定（nativewind / unistyles 等の runtime styling lib を入れない）。Storybook RN も使わず自前カタログ。
 
 ## AI-Ready

package/lib/module/components/Card.js

@@ -11,26 +11,56 @@
  *   action/link は pressed 時 elevation.sm→md（§2 hover→pressed mapping）。
  *   focus-within は RN 非サポートとして Phase1 明示 drop（§2）。
  * - 型で action/link は onPress 必須を強制（§4 の DU 精神。無言で非対話に落ちる事故を防ぐ）。
+ * - **カード面自体は操作要素にしない**（contract 2.1.0 の a11y.required）。面の Pressable は
+ *   `accessibilityRole` を名乗らず `accessible={false}`。理由は2つ:
+ *     1. 面に button role を付けると、中に Button を置いたとき web で `<button>` の入れ子になり
+ *        hydration error になる（production では minified React error #418 に潰れて原因が読めない）
+ *     2. 面はキーボードでもスクリーンリーダーでも押せない。面のタップは**ポインタ向けの近道**で、
+ *        他の入力手段からの到達は内包する `primaryAction` が担う
+ *   そのため action/link は `primaryAction` を必須にする。書き忘れると「ポインタでしか押せない
+ *   カード」が静かに出来上がるので、型で止める。
+ * - `role="article"` は contract の a11y.role をそのまま表現したもの（RN の W3C 準拠 prop。
+ *   react-native-web では実際に `<article>` 要素になる）。accessibilityRole 系とは別系統。
+ * - **focus ring は Card では描かない**。フォーカスを受けるのは `primaryAction` 側で、
+ *   melta の Button は自前の ring を持つ。カードにも出すと1回のフォーカスで ring が二重に描かれる。
+ *   contract の focus-within は RN 非サポートとして Phase1 で明示 drop 済み（app recipe に記録あり）で、
+ *   web だけ動く実装を残すとプラットフォーム非対称になるため、実装ごと持たない。
+ * - `accessibilityLabel` は 0.5.0 で削除した。面が `accessible={false}` なので native では
+ *   原理的に読まれず、web だけ `aria-label` として効く非対称な prop だった。
+ *   名前は操作要素が持つべきなので `primaryAction` 側に付ける。
  * - Card は Image/Metric に依存しない（§1）。media/header/footer/children に呼び出し側が差し込む。
  *   呼び出し側（例: D2I）は用途に応じて slot に Image+Metric を compose する。
  * - media variant は overflow:hidden で角丸に画像をクリップし、body だけにパディング（contract と整合）。
  */
 
+import { useEffect } from "react";
 import { Pressable, View } from "react-native";
 import { useTheme } from "../theme/index.js";
-import { useFocusRing, FocusRing } from "../primitives/_internal/focus-ring.js";
 import { CONTRACTS } from "../contracts/contract-types.js";
+import { isDev } from "../theme/define-theme.js";
 import { CARD_INTERACTIVE, resolveCardShape, resolveCardBodyStyle } from "./card.styles.js";
+import { validateCardProps } from "./card.validate.js";
 
-// action/link（インタラクティブ）は onPress 必須、basic/media は onPress を取らない（§4 DU 精神）。
+/**
+ * 同じ問題を毎レンダー報告しないためのラッチ。
+ *
+ * **報告は effect の中で行う**（render 中ではない）。render 中だと、React が破棄する
+ * speculative render や StrictMode の二重 render でもラッチが消費され、実際に commit された
+ * 違反が報告されなくなりうる。検査の中身は card.validate.ts の純関数側でテストする。
+ */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const reported = new Set();
+
+// action/link（インタラクティブ）は onPress と primaryAction が必須、
+// basic/media はどちらも取らない（§4 DU 精神）。
+
 export function Card({
   variant = "basic",
   header,
   footer,
   media,
   onPress,
-  accessibilityLabel,
+  primaryAction,
   style,
   testID,
   children
@@ -39,18 +69,26 @@ export function Card({
     theme,
     mode
   } = useTheme();
-  const {
-    focused,
-    focusHandlers
-  } = useFocusRing();
   const interactive = CARD_INTERACTIVE[variant] && onPress != null;
+  useEffect(() => {
+    if (!isDev) return;
+    for (const problem of validateCardProps({
+      variant,
+      onPress,
+      primaryAction
+    })) {
+      if (reported.has(problem)) continue;
+      reported.add(problem);
+      console.error(`melta: ${problem}`);
+    }
+  }, [variant, onPress, primaryAction]);
   const isMedia = variant === "media";
   const inner = /*#__PURE__*/_jsxs(_Fragment, {
     children: [media != null && /*#__PURE__*/_jsx(View, {
       children: media
     }), /*#__PURE__*/_jsxs(View, {
       style: resolveCardBodyStyle(theme, variant),
-      children: [header, children, footer]
+      children: [header, children, footer, primaryAction]
     })]
   });
 
@@ -65,26 +103,27 @@ export function Card({
   }) : inner;
   if (!interactive) {
     return /*#__PURE__*/_jsx(View, {
+      role: "article",
       testID: testID,
       style: [resolveCardShape(theme, mode, variant), style],
       children: content
     });
   }
 
-  // action/link: pressed 時 elevation.sm→md、focus 時 ring overlay。
-  return /*#__PURE__*/_jsxs(Pressable, {
-    ...focusHandlers,
-    onPress: onPress,
-    accessibilityRole: "button",
-    accessibilityLabel: accessibilityLabel,
+  // action/link: pressed 時 elevation.sm→md（focus 表示は primaryAction 側が持つ）。
+  return /*#__PURE__*/_jsx(Pressable, {
+    role: "article",
+    onPress: onPress
+    // 面は「操作要素」ではなく article（contract 2.1.0）。accessibilityRole は名乗らない。
+    // accessible={false} で a11y ツリーから子を畳まないことで、内包する primaryAction が
+    // 独立した操作要素として読み上げられる（既定の Pressable は子を畳んでしまう）。
+    ,
+    accessible: false,
     testID: testID,
     style: ({
       pressed
     }) => [resolveCardShape(theme, mode, variant, pressed), style],
-    children: [content, /*#__PURE__*/_jsx(FocusRing, {
-      visible: focused,
-      radius: theme.radius.lg
-    })]
+    children: content
   });
 }
 

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

@@ -1 +1 @@
-{"version":3,"names":["Pressable","View","useTheme","useFocusRing","FocusRing","CONTRACTS","CARD_INTERACTIVE","resolveCardShape","resolveCardBodyStyle","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Card","variant","header","footer","media","onPress","accessibilityLabel","style","testID","children","theme","mode","focused","focusHandlers","interactive","isMedia","inner","content","borderRadius","radius","lg","overflow","accessibilityRole","pressed","visible","__contract","card"],"sourceRoot":"../../../src","sources":["components/Card.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,SAASA,SAAS,EAAEC,IAAI,QAAwC,cAAc;AAC9E,SAASC,QAAQ,QAAQ,mBAAU;AACnC,SAASC,YAAY,EAAEC,SAAS,QAAQ,uCAAoC;AAC5E,SAASC,SAAS,QAAQ,gCAA6B;AACvD,SAASC,gBAAgB,EAAEC,gBAAgB,EAAEC,oBAAoB,QAAQ,kBAAe;;AAaxF;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAOA,OAAO,SAASC,IAAIA,CAAC;EACnBC,OAAO,GAAG,OAAO;EACjBC,MAAM;EACNC,MAAM;EACNC,KAAK;EACLC,OAAO;EACPC,kBAAkB;EAClBC,KAAK;EACLC,MAAM;EACNC;AACS,CAAC,EAAE;EACZ,MAAM;IAAEC,KAAK;IAAEC;EAAK,CAAC,GAAGxB,QAAQ,CAAC,CAAC;EAClC,MAAM;IAAEyB,OAAO;IAAEC;EAAc,CAAC,GAAGzB,YAAY,CAAC,CAAC;EACjD,MAAM0B,WAAW,GAAGvB,gBAAgB,CAACU,OAAO,CAAC,IAAII,OAAO,IAAI,IAAI;EAChE,MAAMU,OAAO,GAAGd,OAAO,KAAK,OAAO;EAEnC,MAAMe,KAAK,gBACTnB,KAAA,CAAAE,SAAA;IAAAU,QAAA,GACGL,KAAK,IAAI,IAAI,iBAAIT,IAAA,CAACT,IAAI;MAAAuB,QAAA,EAAEL;IAAK,CAAO,CAAC,eACtCP,KAAA,CAACX,IAAI;MAACqB,KAAK,EAAEd,oBAAoB,CAACiB,KAAK,EAAET,OAAO,CAAE;MAAAQ,QAAA,GAC/CP,MAAM,EACNO,QAAQ,EACRN,MAAM;IAAA,CACH,CAAC;EAAA,CACP,CACH;;EAED;EACA;EACA,MAAMc,OAAO,GAAGF,OAAO,gBACrBpB,IAAA,CAACT,IAAI;IAACqB,KAAK,EAAE;MAAEW,YAAY,EAAER,KAAK,CAACS,MAAM,CAACC,EAAE;MAAEC,QAAQ,EAAE;IAAS,CAAE;IAAAZ,QAAA,EAAEO;EAAK,CAAO,CAAC,GAElFA,KACD;EAED,IAAI,CAACF,WAAW,EAAE;IAChB,oBACEnB,IAAA,CAACT,IAAI;MAACsB,MAAM,EAAEA,MAAO;MAACD,KAAK,EAAE,CAACf,gBAAgB,CAACkB,KAAK,EAAEC,IAAI,EAAEV,OAAO,CAAC,EAAEM,KAAK,CAAE;MAAAE,QAAA,EAC1EQ;IAAO,CACJ,CAAC;EAEX;;EAEA;EACA,oBACEpB,KAAA,CAACZ,SAAS;IAAA,GACJ4B,aAAa;IACjBR,OAAO,EAAEA,OAAQ;IACjBiB,iBAAiB,EAAC,QAAQ;IAC1BhB,kBAAkB,EAAEA,kBAAmB;IACvCE,MAAM,EAAEA,MAAO;IACfD,KAAK,EAAEA,CAAC;MAAEgB;IAAQ,CAAC,KAAK,CAAC/B,gBAAgB,CAACkB,KAAK,EAAEC,IAAI,EAAEV,OAAO,EAAEsB,OAAO,CAAC,EAAEhB,KAAK,CAAE;IAAAE,QAAA,GAEhFQ,OAAO,eACRtB,IAAA,CAACN,SAAS;MAACmC,OAAO,EAAEZ,OAAQ;MAACO,MAAM,EAAET,KAAK,CAACS,MAAM,CAACC;IAAG,CAAE,CAAC;EAAA,CAC/C,CAAC;AAEhB;;AAEA;AACApB,IAAI,CAACyB,UAAU,GAAGnC,SAAS,CAACoC,IAAI","ignoreList":[]}
+{"version":3,"names":["useEffect","Pressable","View","useTheme","CONTRACTS","isDev","CARD_INTERACTIVE","resolveCardShape","resolveCardBodyStyle","validateCardProps","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","reported","Set","Card","variant","header","footer","media","onPress","primaryAction","style","testID","children","theme","mode","interactive","problem","has","add","console","error","isMedia","inner","content","borderRadius","radius","lg","overflow","role","accessible","pressed","__contract","card"],"sourceRoot":"../../../src","sources":["components/Card.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/card.validate.js

@@ -0,0 +1,67 @@
+"use strict";
+
+/**
+ * card.validate — Card の props が contract 2.1.0 を満たしているかの検査（純関数）。
+ *
+ * **なぜ実行時に検査するか**: props の型は TypeScript を使う利用者にしか効かない。
+ * JavaScript から使われたとき、contract の要求が静かに破られるのを防ぐ。
+ *
+ * react-native を import しない純粋モジュールにして、node テスト（tsx --test）から
+ * 直接網羅できるようにしている。Card 側は結果を dev で1回だけ報告するだけ
+ * （警告のラッチに依存せずに検査内容そのものをテストできる形にするため）。
+ */
+
+import { isValidElement } from "react";
+import { CARD_INTERACTIVE } from "./card.styles.js";
+/**
+ * 問題の一覧を返す（空配列 ＝ 問題なし）。
+ *
+ * 検出できるのは「欠落」と「明らかに型が違う」ところまで。
+ * `primaryAction` が**本当に操作可能か**、面と**同じ遷移先か**は任意の ReactElement からは
+ * 判定できない（そこは契約の文と README の説明が担う）。
+ */
+export function validateCardProps({
+  variant,
+  onPress,
+  primaryAction
+}) {
+  // 未知の variant は CARD_INTERACTIVE で undefined になり、以降の分岐が
+  // 「非インタラクティブ」に倒れて静かに通ってしまう。型を持たない利用者の typo
+  //（variant="acton" 等）が押せないカードとして出荷されるので、最初に弾く。
+  //
+  // ⚠️ 文字列型の確認を hasOwnProperty より**先**に置くこと。プロパティキーは
+  // ToPropertyKey で文字列化されるため、
+  //   - `new String("action")` や `{ toString: () => "action" }` が正規 variant として通る
+  //   - `Object.create(null)` は文字列化できず **TypeError で検査自体が落ちる**
+  //     （dev の防御が防御にならない）
+  // いずれも実測で再現済み（Codex レビュー3周目）。
+  if (typeof variant !== "string") {
+    return [`Card の variant は文字列で渡す（受け取ったのは ${variant === null ? "null" : typeof variant}）。`];
+  }
+  if (!Object.prototype.hasOwnProperty.call(CARD_INTERACTIVE, variant)) {
+    return [`Card の variant="${String(variant)}" は存在しない（` + `${Object.keys(CARD_INTERACTIVE).join(" / ")} のいずれか）。`];
+  }
+  if (!CARD_INTERACTIVE[variant]) {
+    const problems = [];
+    if (onPress != null) {
+      problems.push(`Card variant="${variant}" は onPress を取らない（押せるのは action / link）。`);
+    }
+    if (primaryAction != null) {
+      problems.push(`Card variant="${variant}" は primaryAction を取らない（押せるのは action / link）。`);
+    }
+    return problems;
+  }
+  const problems = [];
+  if (onPress == null) {
+    problems.push(`Card variant="${variant}" は onPress が要る。渡さないと押せない見た目のまま非対話になる。`);
+  } else if (typeof onPress !== "function") {
+    problems.push(`Card variant="${variant}" の onPress が関数でない（${typeof onPress}）。`);
+  }
+  if (primaryAction == null) {
+    problems.push(`Card variant="${variant}" は primaryAction が要る（contract 2.1.0）。` + "カード面は操作要素ではないので、これが無いとキーボード / スクリーンリーダーから" + "カードのアクションに到達できない。面の onPress と同じ操作を指す Button 等を渡すこと。");
+  } else if (! /*#__PURE__*/isValidElement(primaryAction)) {
+    problems.push(`Card variant="${variant}" の primaryAction が React 要素でない（${typeof primaryAction}）。` + "文字列や真偽値では操作要素にならない。");
+  }
+  return problems;
+}
+//# sourceMappingURL=card.validate.js.map

package/lib/module/components/card.validate.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isValidElement","CARD_INTERACTIVE","validateCardProps","variant","onPress","primaryAction","Object","prototype","hasOwnProperty","call","String","keys","join","problems","push"],"sourceRoot":"../../../src","sources":["components/card.validate.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,OAAO;AAEtC,SAASC,gBAAgB,QAAQ,kBAAe;AAQhD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAAC;EAChCC,OAAO;EACPC,OAAO;EACPC;AACsB,CAAC,EAAY;EACnC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,IAAI,OAAOF,OAAO,KAAK,QAAQ,EAAE;IAC/B,OAAO,CACL,kCAAkCA,OAAO,KAAK,IAAI,GAAG,MAAM,GAAG,OAAOA,OAAO,IAAI,CACjF;EACH;EACA,IAAI,CAACG,MAAM,CAACC,SAAS,CAACC,cAAc,CAACC,IAAI,CAACR,gBAAgB,EAAEE,OAAO,CAAC,EAAE;IACpE,OAAO,CACL,mBAAmBO,MAAM,CAACP,OAAO,CAAC,WAAW,GAC3C,GAAGG,MAAM,CAACK,IAAI,CAACV,gBAAgB,CAAC,CAACW,IAAI,CAAC,KAAK,CAAC,UAAU,CACzD;EACH;EAEA,IAAI,CAACX,gBAAgB,CAACE,OAAO,CAAC,EAAE;IAC9B,MAAMU,QAAkB,GAAG,EAAE;IAC7B,IAAIT,OAAO,IAAI,IAAI,EAAE;MACnBS,QAAQ,CAACC,IAAI,CAAC,iBAAiBX,OAAO,yCAAyC,CAAC;IAClF;IACA,IAAIE,aAAa,IAAI,IAAI,EAAE;MACzBQ,QAAQ,CAACC,IAAI,CAAC,iBAAiBX,OAAO,+CAA+C,CAAC;IACxF;IACA,OAAOU,QAAQ;EACjB;EAEA,MAAMA,QAAkB,GAAG,EAAE;EAE7B,IAAIT,OAAO,IAAI,IAAI,EAAE;IACnBS,QAAQ,CAACC,IAAI,CACX,iBAAiBX,OAAO,wCAC1B,CAAC;EACH,CAAC,MAAM,IAAI,OAAOC,OAAO,KAAK,UAAU,EAAE;IACxCS,QAAQ,CAACC,IAAI,CAAC,iBAAiBX,OAAO,sBAAsB,OAAOC,OAAO,IAAI,CAAC;EACjF;EAEA,IAAIC,aAAa,IAAI,IAAI,EAAE;IACzBQ,QAAQ,CAACC,IAAI,CACX,iBAAiBX,OAAO,wCAAwC,GAC9D,2CAA2C,GAC3C,qDACJ,CAAC;EACH,CAAC,MAAM,IAAI,eAACH,cAAc,CAACK,aAAa,CAAC,EAAE;IACzCQ,QAAQ,CAACC,IAAI,CACX,iBAAiBX,OAAO,mCAAmC,OAAOE,aAAa,IAAI,GACjF,qBACJ,CAAC;EACH;EAEA,OAAOQ,QAAQ;AACjB","ignoreList":[]}

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

@@ -16,7 +16,7 @@ export const CONTRACTS = {
   },
   button: {
     id: "button",
-    version: "2.0.0",
+    version: "2.1.0",
     variants: ["contained", "outlined", "brand-outline", "neutral", "lighted", "danger", "subtle"],
     sizes: ["small", "medium", "large"],
     states: ["default", "hover", "focus", "disabled", "loading"]
@@ -30,7 +30,7 @@ export const CONTRACTS = {
   },
   card: {
     id: "card",
-    version: "2.0.0",
+    version: "2.1.0",
     variants: ["basic", "media", "action", "link"],
     sizes: [],
     states: ["default", "hover", "focus-within"]

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

@@ -9,17 +9,33 @@
  *   action/link は pressed 時 elevation.sm→md（§2 hover→pressed mapping）。
  *   focus-within は RN 非サポートとして Phase1 明示 drop（§2）。
  * - 型で action/link は onPress 必須を強制（§4 の DU 精神。無言で非対話に落ちる事故を防ぐ）。
+ * - **カード面自体は操作要素にしない**（contract 2.1.0 の a11y.required）。面の Pressable は
+ *   `accessibilityRole` を名乗らず `accessible={false}`。理由は2つ:
+ *     1. 面に button role を付けると、中に Button を置いたとき web で `<button>` の入れ子になり
+ *        hydration error になる（production では minified React error #418 に潰れて原因が読めない）
+ *     2. 面はキーボードでもスクリーンリーダーでも押せない。面のタップは**ポインタ向けの近道**で、
+ *        他の入力手段からの到達は内包する `primaryAction` が担う
+ *   そのため action/link は `primaryAction` を必須にする。書き忘れると「ポインタでしか押せない
+ *   カード」が静かに出来上がるので、型で止める。
+ * - `role="article"` は contract の a11y.role をそのまま表現したもの（RN の W3C 準拠 prop。
+ *   react-native-web では実際に `<article>` 要素になる）。accessibilityRole 系とは別系統。
+ * - **focus ring は Card では描かない**。フォーカスを受けるのは `primaryAction` 側で、
+ *   melta の Button は自前の ring を持つ。カードにも出すと1回のフォーカスで ring が二重に描かれる。
+ *   contract の focus-within は RN 非サポートとして Phase1 で明示 drop 済み（app recipe に記録あり）で、
+ *   web だけ動く実装を残すとプラットフォーム非対称になるため、実装ごと持たない。
+ * - `accessibilityLabel` は 0.5.0 で削除した。面が `accessible={false}` なので native では
+ *   原理的に読まれず、web だけ `aria-label` として効く非対称な prop だった。
+ *   名前は操作要素が持つべきなので `primaryAction` 側に付ける。
  * - Card は Image/Metric に依存しない（§1）。media/header/footer/children に呼び出し側が差し込む。
  *   呼び出し側（例: D2I）は用途に応じて slot に Image+Metric を compose する。
  * - media variant は overflow:hidden で角丸に画像をクリップし、body だけにパディング（contract と整合）。
  */
-import type { ReactNode } from "react";
+import { type ReactElement, type ReactNode } from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
 interface CardBase {
     header?: ReactNode;
     footer?: ReactNode;
     media?: ReactNode;
-    accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     testID?: string;
     /** body。 */
@@ -28,15 +44,22 @@ interface CardBase {
 type CardProps = CardBase & ({
     variant?: "basic" | "media";
     onPress?: never;
+    primaryAction?: never;
 } | {
     variant: "action" | "link";
     onPress: () => void;
+    /**
+     * 面のタップと同じ遷移先を持つ操作要素（Button 等）。footer 位置に描画される。
+     * 面は role を持たないので、キーボード / スクリーンリーダーからの唯一の到達手段になる。
+     * 内包する操作要素が他にもある場合、ここに置くのは**主アクション**（contract 2.1.0）。
+     */
+    primaryAction: ReactElement;
 });
-export declare function Card({ variant, header, footer, media, onPress, accessibilityLabel, style, testID, children, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ variant, header, footer, media, onPress, primaryAction, style, testID, children, }: CardProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Card {
     var __contract: {
         readonly id: "card";
-        readonly version: "2.0.0";
+        readonly version: "2.1.0";
         readonly variants: readonly ["basic", "media", "action", "link"];
         readonly sizes: readonly [];
         readonly states: readonly ["default", "hover", "focus-within"];

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Card.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAmB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAM/E,UAAU,QAAQ;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY;IACZ,QAAQ,EAAE,SAAS,CAAC;CACrB;AAGD,KAAK,SAAS,GAAG,QAAQ,GACvB,CACI;IAAE,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,GAChD;IAAE,OAAO,EAAE,QAAQ,GAAG,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CACtD,CAAC;AAEJ,wBAAgB,IAAI,CAAC,EACnB,OAAiB,EACjB,MAAM,EACN,MAAM,EACN,KAAK,EACL,OAAO,EACP,kBAAkB,EAClB,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE,SAAS,2CA+CX;yBAzDe,IAAI"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Card.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAAa,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAmB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAgB/E,UAAU,QAAQ;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY;IACZ,QAAQ,EAAE,SAAS,CAAC;CACrB;AAID,KAAK,SAAS,GAAG,QAAQ,GACvB,CACI;IAAE,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,aAAa,CAAC,EAAE,KAAK,CAAA;CAAE,GACvE;IACE,OAAO,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;OAIG;IACH,aAAa,EAAE,YAAY,CAAC;CAC7B,CACJ,CAAC;AAEJ,wBAAgB,IAAI,CAAC,EACnB,OAAiB,EACjB,MAAM,EACN,MAAM,EACN,KAAK,EACL,OAAO,EACP,aAAa,EACb,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE,SAAS,2CAyDX;yBAnEe,IAAI"}

package/lib/typescript/src/components/card.validate.d.ts

@@ -0,0 +1,25 @@
+/**
+ * card.validate — Card の props が contract 2.1.0 を満たしているかの検査（純関数）。
+ *
+ * **なぜ実行時に検査するか**: props の型は TypeScript を使う利用者にしか効かない。
+ * JavaScript から使われたとき、contract の要求が静かに破られるのを防ぐ。
+ *
+ * react-native を import しない純粋モジュールにして、node テスト（tsx --test）から
+ * 直接網羅できるようにしている。Card 側は結果を dev で1回だけ報告するだけ
+ * （警告のラッチに依存せずに検査内容そのものをテストできる形にするため）。
+ */
+import type { CardVariant } from "./card.styles";
+export interface CardPropsForValidation {
+    variant: CardVariant;
+    onPress?: unknown;
+    primaryAction?: unknown;
+}
+/**
+ * 問題の一覧を返す（空配列 ＝ 問題なし）。
+ *
+ * 検出できるのは「欠落」と「明らかに型が違う」ところまで。
+ * `primaryAction` が**本当に操作可能か**、面と**同じ遷移先か**は任意の ReactElement からは
+ * 判定できない（そこは契約の文と README の説明が担う）。
+ */
+export declare function validateCardProps({ variant, onPress, primaryAction, }: CardPropsForValidation): string[];
+//# sourceMappingURL=card.validate.d.ts.map

package/lib/typescript/src/components/card.validate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.validate.d.ts","sourceRoot":"","sources":["../../../../src/components/card.validate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGjD,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,OAAO,EACP,aAAa,GACd,EAAE,sBAAsB,GAAG,MAAM,EAAE,CA0DnC"}

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

@@ -16,7 +16,7 @@ export declare const CONTRACTS: {
     };
     readonly button: {
         readonly id: "button";
-        readonly version: "2.0.0";
+        readonly version: "2.1.0";
         readonly variants: readonly ["contained", "outlined", "brand-outline", "neutral", "lighted", "danger", "subtle"];
         readonly sizes: readonly ["small", "medium", "large"];
         readonly states: readonly ["default", "hover", "focus", "disabled", "loading"];
@@ -30,7 +30,7 @@ export declare const CONTRACTS: {
     };
     readonly card: {
         readonly id: "card";
-        readonly version: "2.0.0";
+        readonly version: "2.1.0";
         readonly variants: readonly ["basic", "media", "action", "link"];
         readonly sizes: readonly [];
         readonly states: readonly ["default", "hover", "focus-within"];

package/lib/typescript/src/primitives/Button.d.ts

@@ -38,7 +38,7 @@ export declare function Button(props: ButtonProps): import("react/jsx-runtime").
 export declare namespace Button {
     var __contract: {
         readonly id: "button";
-        readonly version: "2.0.0";
+        readonly version: "2.1.0";
         readonly variants: readonly ["contained", "outlined", "brand-outline", "neutral", "lighted", "danger", "subtle"];
         readonly sizes: readonly ["small", "medium", "large"];
         readonly states: readonly ["default", "hover", "focus", "disabled", "loading"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melta-app",
-  "version": "0.4.3",
+  "version": "0.5.1",
   "description": "melta for APP — melta デザインシステムの React Native UI kit。melta-contracts（デザイン契約）を single source of truth に RN 実装でその契約を満たす。アプリ本体ではなくライブラリ。",
   "license": "MIT",
   "homepage": "https://app.melta.tsubotax.com",
@@ -74,7 +74,7 @@
     "@types/react": "~19.2.2",
     "eslint": "^10.4.1",
     "jest": "^29.7.0",
-    "melta-contracts": "^0.4.3",
+    "melta-contracts": "^0.6.0",
     "react": "19.2.3",
     "react-native": "0.85.3",
     "react-native-builder-bob": "^0.40.13",

package/src/components/Card.tsx

@@ -9,34 +9,70 @@
  *   action/link は pressed 時 elevation.sm→md（§2 hover→pressed mapping）。
  *   focus-within は RN 非サポートとして Phase1 明示 drop（§2）。
  * - 型で action/link は onPress 必須を強制（§4 の DU 精神。無言で非対話に落ちる事故を防ぐ）。
+ * - **カード面自体は操作要素にしない**（contract 2.1.0 の a11y.required）。面の Pressable は
+ *   `accessibilityRole` を名乗らず `accessible={false}`。理由は2つ:
+ *     1. 面に button role を付けると、中に Button を置いたとき web で `<button>` の入れ子になり
+ *        hydration error になる（production では minified React error #418 に潰れて原因が読めない）
+ *     2. 面はキーボードでもスクリーンリーダーでも押せない。面のタップは**ポインタ向けの近道**で、
+ *        他の入力手段からの到達は内包する `primaryAction` が担う
+ *   そのため action/link は `primaryAction` を必須にする。書き忘れると「ポインタでしか押せない
+ *   カード」が静かに出来上がるので、型で止める。
+ * - `role="article"` は contract の a11y.role をそのまま表現したもの（RN の W3C 準拠 prop。
+ *   react-native-web では実際に `<article>` 要素になる）。accessibilityRole 系とは別系統。
+ * - **focus ring は Card では描かない**。フォーカスを受けるのは `primaryAction` 側で、
+ *   melta の Button は自前の ring を持つ。カードにも出すと1回のフォーカスで ring が二重に描かれる。
+ *   contract の focus-within は RN 非サポートとして Phase1 で明示 drop 済み（app recipe に記録あり）で、
+ *   web だけ動く実装を残すとプラットフォーム非対称になるため、実装ごと持たない。
+ * - `accessibilityLabel` は 0.5.0 で削除した。面が `accessible={false}` なので native では
+ *   原理的に読まれず、web だけ `aria-label` として効く非対称な prop だった。
+ *   名前は操作要素が持つべきなので `primaryAction` 側に付ける。
  * - Card は Image/Metric に依存しない（§1）。media/header/footer/children に呼び出し側が差し込む。
  *   呼び出し側（例: D2I）は用途に応じて slot に Image+Metric を compose する。
  * - media variant は overflow:hidden で角丸に画像をクリップし、body だけにパディング（contract と整合）。
  */
 
-import type { ReactNode } from "react";
+import { useEffect, type ReactElement, type ReactNode } from "react";
 import { Pressable, View, type StyleProp, type ViewStyle } from "react-native";
 import { useTheme } from "../theme";
-import { useFocusRing, FocusRing } from "../primitives/_internal/focus-ring";
 import { CONTRACTS } from "../contracts/contract-types";
+import { isDev } from "../theme/define-theme";
 import { CARD_INTERACTIVE, resolveCardShape, resolveCardBodyStyle } from "./card.styles";
+import { validateCardProps } from "./card.validate";
+
+/**
+ * 同じ問題を毎レンダー報告しないためのラッチ。
+ *
+ * **報告は effect の中で行う**（render 中ではない）。render 中だと、React が破棄する
+ * speculative render や StrictMode の二重 render でもラッチが消費され、実際に commit された
+ * 違反が報告されなくなりうる。検査の中身は card.validate.ts の純関数側でテストする。
+ */
+const reported = new Set<string>();
 
 interface CardBase {
   header?: ReactNode;
   footer?: ReactNode;
   media?: ReactNode;
-  accessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;
   testID?: string;
   /** body。 */
   children: ReactNode;
 }
 
-// action/link（インタラクティブ）は onPress 必須、basic/media は onPress を取らない（§4 DU 精神）。
+// action/link（インタラクティブ）は onPress と primaryAction が必須、
+// basic/media はどちらも取らない（§4 DU 精神）。
 type CardProps = CardBase &
   (
-    | { variant?: "basic" | "media"; onPress?: never }
-    | { variant: "action" | "link"; onPress: () => void }
+    | { variant?: "basic" | "media"; onPress?: never; primaryAction?: never }
+    | {
+        variant: "action" | "link";
+        onPress: () => void;
+        /**
+         * 面のタップと同じ遷移先を持つ操作要素（Button 等）。footer 位置に描画される。
+         * 面は role を持たないので、キーボード / スクリーンリーダーからの唯一の到達手段になる。
+         * 内包する操作要素が他にもある場合、ここに置くのは**主アクション**（contract 2.1.0）。
+         */
+        primaryAction: ReactElement;
+      }
   );
 
 export function Card({
@@ -45,14 +81,22 @@ export function Card({
   footer,
   media,
   onPress,
-  accessibilityLabel,
+  primaryAction,
   style,
   testID,
   children,
 }: CardProps) {
   const { theme, mode } = useTheme();
-  const { focused, focusHandlers } = useFocusRing();
   const interactive = CARD_INTERACTIVE[variant] && onPress != null;
+
+  useEffect(() => {
+    if (!isDev) return;
+    for (const problem of validateCardProps({ variant, onPress, primaryAction })) {
+      if (reported.has(problem)) continue;
+      reported.add(problem);
+      console.error(`melta: ${problem}`);
+    }
+  }, [variant, onPress, primaryAction]);
   const isMedia = variant === "media";
 
   const inner = (
@@ -62,6 +106,7 @@ export function Card({
         {header}
         {children}
         {footer}
+        {primaryAction}
       </View>
     </>
   );
@@ -76,24 +121,25 @@ export function Card({
 
   if (!interactive) {
     return (
-      <View testID={testID} style={[resolveCardShape(theme, mode, variant), style]}>
+      <View role="article" testID={testID} style={[resolveCardShape(theme, mode, variant), style]}>
         {content}
       </View>
     );
   }
 
-  // action/link: pressed 時 elevation.sm→md、focus 時 ring overlay。
+  // action/link: pressed 時 elevation.sm→md（focus 表示は primaryAction 側が持つ）。
   return (
     <Pressable
-      {...focusHandlers}
+      role="article"
       onPress={onPress}
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel}
+      // 面は「操作要素」ではなく article（contract 2.1.0）。accessibilityRole は名乗らない。
+      // accessible={false} で a11y ツリーから子を畳まないことで、内包する primaryAction が
+      // 独立した操作要素として読み上げられる（既定の Pressable は子を畳んでしまう）。
+      accessible={false}
       testID={testID}
       style={({ pressed }) => [resolveCardShape(theme, mode, variant, pressed), style]}
     >
       {content}
-      <FocusRing visible={focused} radius={theme.radius.lg} />
     </Pressable>
   );
 }

package/src/components/card.validate.ts

@@ -0,0 +1,91 @@
+/**
+ * card.validate — Card の props が contract 2.1.0 を満たしているかの検査（純関数）。
+ *
+ * **なぜ実行時に検査するか**: props の型は TypeScript を使う利用者にしか効かない。
+ * JavaScript から使われたとき、contract の要求が静かに破られるのを防ぐ。
+ *
+ * react-native を import しない純粋モジュールにして、node テスト（tsx --test）から
+ * 直接網羅できるようにしている。Card 側は結果を dev で1回だけ報告するだけ
+ * （警告のラッチに依存せずに検査内容そのものをテストできる形にするため）。
+ */
+
+import { isValidElement } from "react";
+import type { CardVariant } from "./card.styles";
+import { CARD_INTERACTIVE } from "./card.styles";
+
+export interface CardPropsForValidation {
+  variant: CardVariant;
+  onPress?: unknown;
+  primaryAction?: unknown;
+}
+
+/**
+ * 問題の一覧を返す（空配列 ＝ 問題なし）。
+ *
+ * 検出できるのは「欠落」と「明らかに型が違う」ところまで。
+ * `primaryAction` が**本当に操作可能か**、面と**同じ遷移先か**は任意の ReactElement からは
+ * 判定できない（そこは契約の文と README の説明が担う）。
+ */
+export function validateCardProps({
+  variant,
+  onPress,
+  primaryAction,
+}: CardPropsForValidation): string[] {
+  // 未知の variant は CARD_INTERACTIVE で undefined になり、以降の分岐が
+  // 「非インタラクティブ」に倒れて静かに通ってしまう。型を持たない利用者の typo
+  //（variant="acton" 等）が押せないカードとして出荷されるので、最初に弾く。
+  //
+  // ⚠️ 文字列型の確認を hasOwnProperty より**先**に置くこと。プロパティキーは
+  // ToPropertyKey で文字列化されるため、
+  //   - `new String("action")` や `{ toString: () => "action" }` が正規 variant として通る
+  //   - `Object.create(null)` は文字列化できず **TypeError で検査自体が落ちる**
+  //     （dev の防御が防御にならない）
+  // いずれも実測で再現済み（Codex レビュー3周目）。
+  if (typeof variant !== "string") {
+    return [
+      `Card の variant は文字列で渡す（受け取ったのは ${variant === null ? "null" : typeof variant}）。`,
+    ];
+  }
+  if (!Object.prototype.hasOwnProperty.call(CARD_INTERACTIVE, variant)) {
+    return [
+      `Card の variant="${String(variant)}" は存在しない（` +
+        `${Object.keys(CARD_INTERACTIVE).join(" / ")} のいずれか）。`,
+    ];
+  }
+
+  if (!CARD_INTERACTIVE[variant]) {
+    const problems: string[] = [];
+    if (onPress != null) {
+      problems.push(`Card variant="${variant}" は onPress を取らない（押せるのは action / link）。`);
+    }
+    if (primaryAction != null) {
+      problems.push(`Card variant="${variant}" は primaryAction を取らない（押せるのは action / link）。`);
+    }
+    return problems;
+  }
+
+  const problems: string[] = [];
+
+  if (onPress == null) {
+    problems.push(
+      `Card variant="${variant}" は onPress が要る。渡さないと押せない見た目のまま非対話になる。`,
+    );
+  } else if (typeof onPress !== "function") {
+    problems.push(`Card variant="${variant}" の onPress が関数でない（${typeof onPress}）。`);
+  }
+
+  if (primaryAction == null) {
+    problems.push(
+      `Card variant="${variant}" は primaryAction が要る（contract 2.1.0）。` +
+        "カード面は操作要素ではないので、これが無いとキーボード / スクリーンリーダーから" +
+        "カードのアクションに到達できない。面の onPress と同じ操作を指す Button 等を渡すこと。",
+    );
+  } else if (!isValidElement(primaryAction)) {
+    problems.push(
+      `Card variant="${variant}" の primaryAction が React 要素でない（${typeof primaryAction}）。` +
+        "文字列や真偽値では操作要素にならない。",
+    );
+  }
+
+  return problems;
+}

package/src/contracts/contract-types.ts

@@ -21,7 +21,7 @@ export const CONTRACTS = {
   },
   button: {
     id: "button",
-    version: "2.0.0",
+    version: "2.1.0",
     variants: ["contained", "outlined", "brand-outline", "neutral", "lighted", "danger", "subtle"],
     sizes: ["small", "medium", "large"],
     states: ["default", "hover", "focus", "disabled", "loading"],
@@ -35,7 +35,7 @@ export const CONTRACTS = {
   },
   card: {
     id: "card",
-    version: "2.0.0",
+    version: "2.1.0",
     variants: ["basic", "media", "action", "link"],
     sizes: [],
     states: ["default", "hover", "focus-within"],