melta-app 0.1.0

package/lib/typescript/src/theme/types.d.ts

@@ -0,0 +1,121 @@
+/**
+ * NativeTheme — melta の design contracts(melta-contracts の tokens.json)を
+ * React Native 向けに正規化した theme の型。
+ *
+ * 生成は scripts/generate-native-theme.ts（純粋変換は scripts/lib/normalize-tokens.ts）。
+ * web 形式 → RN 形式の正規化規則は requirements-melta-app.md §4 を参照。
+ */
+import type { ViewStyle } from "react-native";
+/** primary パレット（50〜950）。値は hex 文字列。 */
+export type PrimaryScale = "50" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "950";
+/** semantic カラー（light / dark で同じキー集合を持つ）。値は色文字列。 */
+export interface SemanticColors {
+    "bg-page": string;
+    "bg-page-alt": string;
+    "bg-surface": string;
+    "bg-surface-alt": string;
+    "text-heading": string;
+    "text-default": string;
+    "text-muted": string;
+    "border-default": string;
+    "border-strong": string;
+    "input-bg": string;
+    "input-border": string;
+    "text-on-accent": string;
+}
+/** status カラー（success / warning / danger）。light/dark の subtle・text を保持。 */
+export interface StatusColors {
+    base: string;
+    subtleLight: string;
+    textLight: string;
+    subtleDark: string;
+    textDark: string;
+}
+export interface ThemeColor {
+    primary: Record<PrimaryScale, string>;
+    body: string;
+    semantic: {
+        light: SemanticColors;
+        dark: SemanticColors;
+    };
+    status: {
+        success: StatusColors;
+        warning: StatusColors;
+        danger: StatusColors;
+    };
+}
+export type FontSizeKey = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
+export type FontWeightKey = "normal" | "medium" | "semibold" | "bold";
+/** RN の fontWeight は文字列。tokens の数値(400 等)を文字列化したもの。 */
+export type FontWeightValue = "400" | "500" | "600" | "700";
+export interface FontSizeEntry {
+    /** px 数値（tokens.json の px をそのまま採用） */
+    fontSize: number;
+    /** fontSize × lineHeight比率 を px に丸めた値 */
+    lineHeight: number;
+}
+export interface ThemeTypography {
+    /**
+     * 初期は system default（未指定 = OS デフォルトフォント）。RN の fontFamily は string 一本で
+     * web の fallback 配列のようには効かず、Inter 等を焼くと expo-font でのロード必須になり実機で崩れる。
+     * Inter / JetBrains Mono の embed は expo-font 導入後に generator へ font マップを渡す Phase 2。
+     * それまでは sans/mono とも未指定（= OS の sans / monospace）にする。
+     */
+    fontFamily: {
+        sans?: string;
+        mono?: string;
+    };
+    fontSize: Record<FontSizeKey, FontSizeEntry>;
+    fontWeight: Record<FontWeightKey, FontWeightValue>;
+    /**
+     * letterSpacing の em ratio を数値で保持する（px ではない）。
+     * tokens は em（fontSize 相対）だが RN の letterSpacing は絶対 pt のため token 単体では px 換算できない。
+     * 適用側は `resolveLetterSpacing(fontSize, ratio)`（= fontSize × ratio）で pt を算出すること。
+     * 名前を `Ratio` 付きにしているのは、ratio をそのまま style.letterSpacing に入れる誤用を防ぐため。
+     * （requirements §4 の「px に換算」からの意図的な乖離。理由はこのコメントの通り）
+     */
+    letterSpacingRatio: {
+        heading: number;
+        body: number;
+    };
+}
+/**
+ * elevation 1段。iOS は shadow* を、Android は elevation を読む（互いに無視するので
+ * 1つの ViewStyle に同居させて spread すれば両 OS に効く）。
+ */
+export type ElevationStyle = Pick<ViewStyle, "shadowColor" | "shadowOffset" | "shadowOpacity" | "shadowRadius" | "elevation">;
+/** iOS 側の shadow props だけ（Android elevation は別途 mapping table で決める）。 */
+export type ShadowStyle = Omit<ElevationStyle, "elevation">;
+export type ElevationKey = "none" | "sm" | "md" | "overlay";
+export type SpacingKey = "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "14" | "16";
+export type RadiusKey = "sm" | "md" | "lg" | "full";
+export interface ThemeMotion {
+    /** ms 数値 */
+    duration: {
+        fast: number;
+        normal: number;
+        slow: number;
+    };
+    /** cubic-bezier の 4 引数（Easing.bezier(...) に展開して使う） */
+    easing: {
+        default: [number, number, number, number];
+        in: [number, number, number, number];
+        out: [number, number, number, number];
+    };
+}
+export interface NativeTheme {
+    color: ThemeColor;
+    typography: ThemeTypography;
+    spacing: Record<SpacingKey, number>;
+    radius: Record<RadiusKey, number>;
+    elevation: Record<ElevationKey, ElevationStyle>;
+    motion: ThemeMotion;
+    zIndex: {
+        base: number;
+        dropdown: number;
+        sticky: number;
+        overlay: number;
+        modal: number;
+    };
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/theme/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/theme/types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,uCAAuC;AACvC,MAAM,MAAM,YAAY,GACpB,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAEV,oDAAoD;AACpD,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,2EAA2E;AAC3E,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE;QAAE,KAAK,EAAE,cAAc,CAAC;QAAC,IAAI,EAAE,cAAc,CAAA;KAAE,CAAC;IAC1D,MAAM,EAAE;QAAE,OAAO,EAAE,YAAY,CAAC;QAAC,OAAO,EAAE,YAAY,CAAC;QAAC,MAAM,EAAE,YAAY,CAAA;KAAE,CAAC;CAChF;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC;AAC7E,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AACtE,uDAAuD;AACvD,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAE5D,MAAM,WAAW,aAAa;IAC5B,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;OAKG;IACH,UAAU,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,QAAQ,EAAE,MAAM,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;IAC7C,UAAU,EAAE,MAAM,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC;IACnD;;;;;;OAMG;IACH,kBAAkB,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CACvD;AAED;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,SAAS,EACT,aAAa,GAAG,cAAc,GAAG,eAAe,GAAG,cAAc,GAAG,WAAW,CAChF,CAAC;AAEF,wEAAwE;AACxE,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;AAE5D,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;AAE5D,MAAM,MAAM,UAAU,GAClB,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,CAAC;AAET,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEpD,MAAM,WAAW,WAAW;IAC1B,YAAY;IACZ,QAAQ,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,sDAAsD;IACtD,MAAM,EAAE;QACN,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;QAC1C,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;QACrC,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;KACvC,CAAC;CACH;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,UAAU,CAAC;IAClB,UAAU,EAAE,eAAe,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IACpC,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAClC,SAAS,EAAE,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;IAChD,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5F"}

package/package.json

@@ -0,0 +1,120 @@
+{
+  "name": "melta-app",
+  "version": "0.1.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",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tsubotax/melta-app.git"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "design-system",
+    "ui-kit",
+    "melta",
+    "ai-ready"
+  ],
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/src/index.d.ts",
+      "react-native": "./lib/module/index.js",
+      "import": "./lib/module/index.js",
+      "default": "./lib/module/index.js"
+    },
+    "./icons": {
+      "types": "./lib/typescript/src/icons/index.d.ts",
+      "react-native": "./lib/module/icons/index.js",
+      "import": "./lib/module/icons/index.js",
+      "default": "./lib/module/icons/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "src",
+    "!src/**/*.test.*",
+    "THIRD_PARTY_LICENSES.md"
+  ],
+  "sideEffects": false,
+  "workspaces": [
+    "example"
+  ],
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-svg": ">=15"
+  },
+  "peerDependenciesMeta": {
+    "react-native-svg": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@jest/globals": "^29.7.0",
+    "@react-native/babel-preset": "^0.85.3",
+    "@react-native/jest-preset": "^0.85.3",
+    "@testing-library/react-native": "^14.0.1",
+    "@types/node": "^25.9.1",
+    "@types/react": "~19.2.2",
+    "eslint": "^10.4.1",
+    "jest": "^29.7.0",
+    "melta-contracts": "^0.4.0",
+    "react": "19.2.3",
+    "react-native": "0.85.3",
+    "react-native-builder-bob": "^0.40.13",
+    "react-native-svg": "^15.15.4",
+    "tsx": "^4.19.0",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.60.0"
+  },
+  "scripts": {
+    "start": "npm run start -w example",
+    "android": "npm run android -w example",
+    "ios": "npm run ios -w example",
+    "web": "npm run web -w example",
+    "export:web": "npm run export:web -w example",
+    "build:showcase": "bash scripts/build-showcase.sh",
+    "generate:theme": "tsx scripts/generate-native-theme.ts",
+    "generate:contracts": "tsx scripts/generate-contract-types.ts",
+    "generate": "npm run generate:theme && npm run generate:contracts",
+    "build": "bob build",
+    "prepare": "bob build",
+    "test": "tsx --test scripts/lib/*.test.ts",
+    "test:rn": "jest",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p example/tsconfig.json && tsc --noEmit -p scripts/tsconfig.json",
+    "lint": "eslint . --max-warnings 0",
+    "check:drift": "tsx scripts/check-drift.ts",
+    "check:installability": "bash scripts/check-installability.sh"
+  },
+  "jest": {
+    "preset": "@react-native/jest-preset",
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.test.tsx"
+    ]
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/src/components/ActionSheet.tsx

@@ -0,0 +1,112 @@
+/**
+ * ActionSheet — 画面下から出るアクション/選択リスト。contract: action-sheet（appFirst、feedback）。
+ * RN core Modal（transparent + slide）+ 下端 sheet。web の select / dropdown を APP に
+ * adapted 変換する際の受け皿。
+ *
+ * - actions は縦積み（区切り線 border-default）、cancel は下に分離した独立ブロック
+ *   （閉じる手段を複数持つ: cancelAction + overlay tap + Android back = contract a11y required）。
+ * - destructive アクションは destructiveTextStyle（status.danger.base）で色を差し替える。
+ *   色だけでなくラベル文言でも破壊的操作と分かる文言にするのは呼び出し側の責務（contract a11y）。
+ * - 先頭 action の borderTop は title が無い場合は消す（title がある時だけ区切りとして意味を持つ）。
+ * - action の onPress 後は onClose も呼ぶ（選択 = シートを閉じる）。
+ * - sheet 群は SafeAreaView で包み下余白（ホームインジケータ）を確保（recipe description 参照）。
+ * - sheet 側は onStartShouldSetResponder で touch を claim し、overlay tap でだけ閉じる。
+ * - style の決定は pure resolver（action-sheet.styles.ts）に分離 — recipe との機械照合対象。
+ */
+
+import { useMemo } from "react";
+import {
+  Modal as RNModal,
+  Pressable,
+  SafeAreaView,
+  Text as RNText,
+  View,
+} from "react-native";
+import { useTheme } from "../theme";
+import { CONTRACTS } from "../contracts/contract-types";
+import { resolveActionSheetStyle, type ActionSheetStyle } from "./action-sheet.styles";
+
+export interface ActionSheetAction {
+  label: string;
+  onPress: () => void;
+  /** 破壊的操作（色を danger に差し替え。文言でも破壊的と分かるようにすること）。 */
+  destructive?: boolean;
+}
+
+interface ActionSheetProps {
+  visible: boolean;
+  /** 閉じ要求（cancel / overlay tap / Android back / action 選択後の全経路で呼ばれる）。 */
+  onClose: () => void;
+  /** シート上部の説明ラベル（任意）。 */
+  title?: string;
+  /** 縦積みするアクション群。 */
+  actions: ActionSheetAction[];
+  /** キャンセル行のラベル。default "キャンセル"。 */
+  cancelLabel?: string;
+  testID?: string;
+}
+
+export function ActionSheet({
+  visible,
+  onClose,
+  title,
+  actions,
+  cancelLabel = "キャンセル",
+  testID,
+}: ActionSheetProps) {
+  const { theme, mode } = useTheme();
+
+  const styles = useMemo<ActionSheetStyle>(
+    () => resolveActionSheetStyle(theme, mode),
+    [theme, mode],
+  );
+
+  return (
+    <RNModal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <Pressable style={styles.overlayStyle} onPress={onClose} accessible={false}>
+        {/* sheet 群（sheet + cancel）: SafeArea で下余白を確保し、touch を claim して overlay へ流さない */}
+        <SafeAreaView
+          accessibilityViewIsModal
+          onStartShouldSetResponder={() => true}
+          testID={testID}
+        >
+          <View style={styles.sheetStyle}>
+            {title != null && <RNText style={styles.titleStyle}>{title}</RNText>}
+            {actions.map((action, index) => (
+              <Pressable
+                key={`${index}-${action.label}`}
+                accessibilityRole="button"
+                onPress={() => {
+                  action.onPress();
+                  onClose();
+                }}
+                style={[
+                  styles.actionStyle,
+                  // 先頭 action の区切り線は title がある時だけ意味を持つ
+                  index === 0 && title == null ? { borderTopWidth: 0 } : null,
+                ]}
+              >
+                <RNText
+                  style={action.destructive ? styles.destructiveTextStyle : styles.actionTextStyle}
+                >
+                  {action.label}
+                </RNText>
+              </Pressable>
+            ))}
+          </View>
+          <Pressable accessibilityRole="button" onPress={onClose} style={styles.cancelStyle}>
+            <RNText style={styles.cancelTextStyle}>{cancelLabel}</RNText>
+          </Pressable>
+        </SafeAreaView>
+      </Pressable>
+    </RNModal>
+  );
+}
+
+ActionSheet.__contract = CONTRACTS.actionSheet;

package/src/components/Alert.tsx

@@ -0,0 +1,84 @@
+/**
+ * Alert — インラインアラート通知（feedback）。contract: alert。
+ * Info / Success / Warning / Error の4タイプ。Text の compose + 任意 icon slot / 閉じるボタン。
+ *
+ * - RN では border を持たず bg subtle + text 色で表現（status token に border 用の中間色が無い、
+ *   recipe description）。COLOR_ONLY_FORBIDDEN は title/message のテキストと icon slot で担保する設計。
+ * - icon は ReactNode slot（EmptyState 前例。Icon を差すなら melta-app/icons を利用者が opt-in）。
+ * - a11y（§2 web→RN mapping）: web の role=alert(error/warning) / status(info/success) を、
+ *   error/warning → accessibilityRole="alert"、info/success → accessibilityLiveRegion="polite"
+ *   （Android のみ有効。RN に status role が無いための写像）に落とす。
+ * - 色・寸法の決定は pure resolver（alert.styles.ts）に分離。dark mode は resolver が
+ *   status.*.subtleDark / textDark を解決（info のみ primary 固定）。
+ *   recipes/app/alert.recipe.json との機械照合は scripts/lib/alert-conformance.test.ts が行う。
+ */
+
+import { useMemo, type ReactNode } from "react";
+import { Pressable, View, type StyleProp, type ViewStyle } from "react-native";
+import { Text } from "../primitives/Text";
+import { useTheme } from "../theme";
+import { CONTRACTS } from "../contracts/contract-types";
+import { ALERT_SPEC, resolveAlertStyles, type AlertVariant } from "./alert.styles";
+
+interface AlertProps {
+  /** 通知タイプ（contract variant）。 */
+  variant: AlertVariant;
+  /** 見出し（任意）。 */
+  title?: string;
+  /** 本文（必須）。 */
+  message: string;
+  /** 先頭の icon slot（デフォルト無し）。 */
+  icon?: ReactNode;
+  /** あれば右端に閉じるボタン（Pressable の ×）を出す。 */
+  onClose?: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function Alert({ variant, title, message, icon, onClose, style, testID }: AlertProps) {
+  const { theme, mode } = useTheme();
+  const styles = useMemo(() => resolveAlertStyles(theme, mode, variant), [theme, mode, variant]);
+  const urgent = variant === "error" || variant === "warning";
+
+  return (
+    <View
+      accessibilityRole={urgent ? "alert" : undefined}
+      accessibilityLiveRegion={urgent ? undefined : "polite"}
+      testID={testID}
+      style={[styles.containerStyle, style]}
+    >
+      {icon != null && <View>{icon}</View>}
+      <View style={{ flex: 1, gap: theme.spacing["1"] }}>
+        {title != null && (
+          <Text
+            variant={ALERT_SPEC.titleFont}
+            weight={ALERT_SPEC.titleWeight}
+            style={{ color: styles.titleStyle.color }}
+          >
+            {title}
+          </Text>
+        )}
+        <Text variant={ALERT_SPEC.messageFont} style={{ color: styles.messageStyle.color }}>
+          {message}
+        </Text>
+      </View>
+      {onClose != null && (
+        // 最小タップターゲット確保: min 24 + hitSlop（Tag removable と同じ手当て）。
+        <Pressable
+          onPress={onClose}
+          accessibilityRole="button"
+          accessibilityLabel="閉じる"
+          hitSlop={10}
+          style={{ minWidth: 24, minHeight: 24, alignItems: "center", justifyContent: "center" }}
+        >
+          <Text variant="xs" style={{ color: styles.messageStyle.color }}>
+            ×
+          </Text>
+        </Pressable>
+      )}
+    </View>
+  );
+}
+
+// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+Alert.__contract = CONTRACTS.alert;

package/src/components/Avatar.tsx

@@ -0,0 +1,110 @@
+/**
+ * Avatar — ユーザーアバター（Image / Initials / Status / Group）。
+ * contract: avatar（web 契約 v2.0.0 の app 実装）。dogfood 不足-4 の解消。
+ *
+ * - variant は props から暗黙決定: source があれば image、無ければ initials（name から生成）。
+ *   contract の group variant は Avatar.Group（重ね表示コンテナ、-spacing.2 相当のオーバーラップ）。
+ * - status（online / away / offline）指定時は右下に statusDot（bg-surface の ring 付き）。
+ * - a11y: role img + accessibilityLabel=name（contract required）。
+ * - 決定ロジックは pure resolver（avatar.styles.ts）に分離 — recipe との機械照合対象。
+ */
+
+import { Children, useMemo, type ReactNode } from "react";
+import {
+  Image as RNImage,
+  Text as RNText,
+  View,
+  type ImageSourcePropType,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { useTheme } from "../theme";
+import { CONTRACTS } from "../contracts/contract-types";
+import {
+  resolveAvatarGroupStyle,
+  resolveAvatarStatusColor,
+  resolveAvatarStyle,
+  type AvatarSize,
+  type AvatarStatus,
+  type AvatarStyleResult,
+} from "./avatar.styles";
+
+interface AvatarProps {
+  /** 表示名（initials の生成元 + accessibilityLabel。contract a11y required）。 */
+  name: string;
+  /** プロフィール画像。省略時は initials variant にフォールバック。 */
+  source?: ImageSourcePropType;
+  /** サイズ（contract sizes）。default "medium"。 */
+  size?: AvatarSize;
+  /** 在席状態（contract states）。指定時のみ statusDot を表示。 */
+  status?: AvatarStatus;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** name → initials（先頭2文字。空白区切りなら各語の頭文字を優先: "Taro Tanaka" → "TT"）。 */
+function toInitials(name: string): string {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase();
+  return name.trim().slice(0, 2).toUpperCase();
+}
+
+export function Avatar({ name, source, size = "medium", status, style, testID }: AvatarProps) {
+  const { theme, mode } = useTheme();
+  const variant = source ? "image" : "initials";
+
+  const resolved = useMemo<AvatarStyleResult>(
+    () => resolveAvatarStyle(theme, mode, variant, size),
+    [theme, mode, variant, size],
+  );
+  const dotColor = status ? resolveAvatarStatusColor(theme, mode, status) : undefined;
+
+  // clip（overflow hidden）は内側の円に閉じ、statusDot は外側（クリップされない層）に置く。
+  // accessible 明示で「1つの読み上げ単位」にする（非 Touchable の View は暗黙では discoverable でない）
+  return (
+    <View
+      style={[{ width: resolved.container.width, height: resolved.container.height }, style]}
+      accessible
+      accessibilityRole="image"
+      accessibilityLabel={name}
+      testID={testID}
+    >
+      <View style={resolved.container}>
+        {source ? (
+          <RNImage source={source} style={{ width: "100%", height: "100%" }} />
+        ) : (
+          <RNText style={resolved.text}>{toInitials(name)}</RNText>
+        )}
+      </View>
+      {status ? (
+        <View
+          style={[
+            resolved.dot,
+            { backgroundColor: dotColor, position: "absolute", right: 0, bottom: 0 },
+          ]}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+interface AvatarGroupProps {
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  children: ReactNode;
+}
+
+/** 複数アバターの重ね表示（contract の group variant）。2枚目以降を負 margin で重ねる。 */
+function AvatarGroup({ style, testID, children }: AvatarGroupProps) {
+  const group = resolveAvatarGroupStyle();
+  return (
+    <View style={[group.container, style]} testID={testID}>
+      {Children.map(children, (child, index) => (
+        <View style={index > 0 ? group.overlap : null}>{child}</View>
+      ))}
+    </View>
+  );
+}
+
+Avatar.Group = AvatarGroup;
+Avatar.__contract = CONTRACTS.avatar;

package/src/components/BottomSheet.tsx

@@ -0,0 +1,81 @@
+/**
+ * BottomSheet — 画面下から出る汎用シート container（content は自由 slot）。
+ * contract: bottom-sheet（appFirst、feedback）。RN core Modal（transparent + slide）+
+ * 下端 sheet（上角のみ radius）。ActionSheet がリスト特化なのに対しこちらは容器。
+ *
+ * - grabber は装飾バー。a11y ツリーから除外する（importantForAccessibility="no" +
+ *   accessibilityElementsHidden。recipe description 参照）。
+ * - スワイプで閉じるジェスチャは実装しない（overlay tap + Android back で閉じる、Phase 外）。
+ * - sheet は下端密着（bg-surface）のため、SafeAreaView を sheet の内側に置いて
+ *   下余白（ホームインジケータ）まで sheet 背景で覆いつつ content を安全域に収める。
+ * - sheet 側は onStartShouldSetResponder で touch を claim し、overlay tap でだけ閉じる。
+ * - style の決定は pure resolver（bottom-sheet.styles.ts）に分離 — recipe との機械照合対象。
+ */
+
+import { useMemo, type ReactNode } from "react";
+import {
+  Modal as RNModal,
+  Pressable,
+  SafeAreaView,
+  Text as RNText,
+  View,
+} from "react-native";
+import { useTheme } from "../theme";
+import { CONTRACTS } from "../contracts/contract-types";
+import { resolveBottomSheetStyle, type BottomSheetStyle } from "./bottom-sheet.styles";
+
+interface BottomSheetProps {
+  visible: boolean;
+  /** 閉じ要求（overlay tap / Android back の全経路で呼ばれる）。 */
+  onClose: () => void;
+  /** シート見出し（任意）。 */
+  title?: string;
+  testID?: string;
+  /** content slot（自由）。 */
+  children: ReactNode;
+}
+
+export function BottomSheet({ visible, onClose, title, testID, children }: BottomSheetProps) {
+  const { theme, mode } = useTheme();
+
+  const styles = useMemo<BottomSheetStyle>(
+    () => resolveBottomSheetStyle(theme, mode),
+    [theme, mode],
+  );
+
+  return (
+    <RNModal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <Pressable style={styles.overlayStyle} onPress={onClose} accessible={false}>
+        <View
+          style={styles.sheetStyle}
+          accessibilityViewIsModal
+          onStartShouldSetResponder={() => true}
+          testID={testID}
+        >
+          <SafeAreaView>
+            {/* grabber: 装飾のみ（スワイプ操作は持たないため a11y から隠す） */}
+            <View
+              style={styles.grabberStyle}
+              importantForAccessibility="no"
+              accessibilityElementsHidden
+            />
+            {title != null && (
+              <RNText style={styles.titleStyle} accessibilityRole="header">
+                {title}
+              </RNText>
+            )}
+            <View style={styles.contentStyle}>{children}</View>
+          </SafeAreaView>
+        </View>
+      </Pressable>
+    </RNModal>
+  );
+}
+
+BottomSheet.__contract = CONTRACTS.bottomSheet;