melta-app 0.5.3 → 0.7.0

package/src/primitives/Metric.tsx

@@ -12,9 +12,9 @@
 
 import { useMemo } from "react";
 import { Text as RNText, View, type StyleProp, type ViewStyle } from "react-native";
-import { useTheme } from "../theme";
-import { CONTRACTS, type SizeOf } from "../contracts/contract-types";
-import { resolveMetricStyles } from "./metric.styles";
+import { useTheme } from "../theme/index.js";
+import { CONTRACTS, type SizeOf } from "../contracts/contract-types.js";
+import { resolveMetricStyles } from "./metric.styles.js";
 
 type MetricSize = SizeOf<"metric">; // "sm" | "md" | "lg"
 
@@ -63,5 +63,6 @@ export function Metric({
   );
 }
 
-// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+// conformance test 用の contract メタ（§2 A-3）。scripts/lib/conformance.test.ts が
+// 「この宣言が正しい contract を指しているか」を静的スキャンで照合する。
 Metric.__contract = CONTRACTS.metric;

package/src/primitives/Row.tsx

@@ -9,10 +9,10 @@
 
 import { useMemo, type ReactNode } from "react";
 import { View, type StyleProp, type ViewStyle } from "react-native";
-import { useTheme } from "../theme";
-import type { SpacingKey } from "../theme";
-import { CONTRACTS } from "../contracts/contract-types";
-import { resolveRowStyle, type RowAlign, type RowJustify, type RowStyle } from "./row.styles";
+import { useTheme } from "../theme/index.js";
+import type { SpacingKey } from "../theme/index.js";
+import { CONTRACTS } from "../contracts/contract-types.js";
+import { resolveRowStyle, type RowAlign, type RowJustify, type RowStyle } from "./row.styles.js";
 
 interface RowProps {
   /** 子要素間の gap（spacing token キー限定）。省略時 gap なし。 */

package/src/primitives/Stack.tsx

@@ -9,10 +9,10 @@
 
 import { useMemo, type ReactNode } from "react";
 import { View, type StyleProp, type ViewStyle } from "react-native";
-import { useTheme } from "../theme";
-import type { SpacingKey } from "../theme";
-import { CONTRACTS } from "../contracts/contract-types";
-import { resolveStackStyle, type StackAlign, type StackStyle } from "./stack.styles";
+import { useTheme } from "../theme/index.js";
+import type { SpacingKey } from "../theme/index.js";
+import { CONTRACTS } from "../contracts/contract-types.js";
+import { resolveStackStyle, type StackAlign, type StackStyle } from "./stack.styles.js";
 
 interface StackProps {
   /** 子要素間の gap（spacing token キー限定）。省略時 gap なし。 */

package/src/primitives/Tag.tsx

@@ -9,16 +9,21 @@
  *   色・寸法の決定は pure resolver（tag.styles.ts）に分離、recipe との機械照合は
  *   scripts/lib/tag-conformance.test.ts が行う。
  * - label は Text primitive。filter-chip active の文字色だけ primary.700（SemanticColors 外なので style 上書き）。
- * - focus outline は Button(Step8) で Pressable focus handling を共通化してから Tag にも適用する
- *   （§1 は Phase1 scope だが acceptance 外。今は accessibilityState のみ。Button 実装時に回収）。
+ * - focus outline は Button と共通の Pressable focus handling（_internal/focus-ring）を使う
+ *   （removable / filter-chip の押せる要素に FocusRing を描く）。
  */
 
 import { Pressable, View, type StyleProp, type ViewStyle } from "react-native";
-import { Text } from "./Text";
-import { useTheme } from "../theme";
-import { useFocusRing, FocusRing } from "./_internal/focus-ring";
-import { CONTRACTS } from "../contracts/contract-types";
-import { resolveTagBase, resolveTagVariant } from "./tag.styles";
+import { Text } from "./Text.js";
+import { useTheme } from "../theme/index.js";
+import { useFocusRing, FocusRing } from "./_internal/focus-ring.js";
+import { CONTRACTS } from "../contracts/contract-types.js";
+import {
+  resolveTagBase,
+  resolveTagVariant,
+  TAG_FILTER_CHIP_VERTICAL_HIT_SLOP,
+  TAG_REMOVE_TAP_TARGET,
+} from "./tag.styles.js";
 
 interface TagBase {
   label: string;
@@ -53,6 +58,12 @@ function FilterChipTag(props: TagBase & { selected: boolean; onToggle: () => voi
       onPress={onToggle}
       accessibilityRole="button"
       accessibilityState={{ selected }}
+      // 視覚高さ 34pt（padding 駆動）に縦 hitSlop を足して実効 44pt（A11Y_MIN_TAP_TARGET_44）。
+      // 背景と枠を持つので minHeight で伸ばすと見た目が変わる → 当たり判定だけ広げる。
+      hitSlop={{
+        top: TAG_FILTER_CHIP_VERTICAL_HIT_SLOP,
+        bottom: TAG_FILTER_CHIP_VERTICAL_HIT_SLOP,
+      }}
       testID={testID}
       style={[
         base,
@@ -86,14 +97,20 @@ function RemovableTag(
       <Text variant={v.font} color="text-default">
         {label}
       </Text>
-      {/* 最小タップターゲット確保: 親 Tag の高さを超えられないので remove 自身に min 24 + hitSlop（Codex M-2）。 */}
+      {/* 最小タップターゲット確保: 親 Tag の高さを超えられないので remove 自身に正典パターン
+          （視覚 24 + hitSlop 10 = 実効 44）を持たせる（Codex M-2 / A11Y_MIN_TAP_TARGET_44）。 */}
       <Pressable
         {...focusHandlers}
         onPress={onRemove}
         accessibilityRole="button"
         accessibilityLabel={removeAccessibilityLabel}
-        hitSlop={10}
-        style={{ minWidth: 24, minHeight: 24, alignItems: "center", justifyContent: "center" }}
+        hitSlop={TAG_REMOVE_TAP_TARGET.hitSlop}
+        style={{
+          minWidth: TAG_REMOVE_TAP_TARGET.minWidth,
+          minHeight: TAG_REMOVE_TAP_TARGET.minHeight,
+          alignItems: "center",
+          justifyContent: "center",
+        }}
       >
         <Text variant="xs" color="text-muted">
           ×
@@ -122,5 +139,6 @@ export function Tag(props: TagProps) {
   );
 }
 
-// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+// conformance test 用の contract メタ（§2 A-3）。scripts/lib/conformance.test.ts が
+// 「この宣言が正しい contract を指しているか」を静的スキャンで照合する。
 Tag.__contract = CONTRACTS.tag;

package/src/primitives/Text.tsx

@@ -6,18 +6,21 @@
  *   構造一致している前提で theme.typography.fontSize[variant] を引く。乖離したら型エラーで検知
  *   される（= A-3 conformance の型レベル最低ライン、§2）。
  * - 色は token キーのみ（生 hex 不可、§5 lint の意味を保つ）。
+ * - fontScale 制御（allowFontScaling / maxFontSizeMultiplier）は RN Text へ素通しする。
+ *   既定は未指定 ＝ RN 既定（OS の文字サイズ設定に追随）。器が固定寸法の箇所だけ opt-in で絞る。
  * - letterSpacing は role(heading/body) の ratio を fontSize から pt 換算（text.styles.ts）。
  * - 形状（fontSize/lineHeight/letterSpacing/fontWeight）は variant/role/weight 依存なので useMemo で
- *   分離（B-3 の「形状/色 分離 + 参照安定性」を Phase1 は useMemo で満たす。StyleSheet 事前生成の
- *   最適化は Card で実証予定）。色のみ render 時に colors から取る。
+ *   分離（B-3 の「形状/色 分離 + 参照安定性」は useMemo で満たす。StyleSheet 事前生成による
+ *   最適化はどのコンポーネントでも採っていない）。色のみ render 時に colors から取る。
  */
 
 import { useMemo, type ReactNode } from "react";
-import { Text as RNText, type StyleProp, type TextStyle } from "react-native";
-import { useTheme } from "../theme";
-import type { FontWeightKey, SemanticColors } from "../theme";
-import { CONTRACTS, type VariantOf } from "../contracts/contract-types";
-import { resolveTextShape, type TextRole } from "./text.styles";
+import { StyleSheet, Text as RNText, type StyleProp, type TextStyle } from "react-native";
+import { useTheme } from "../theme/index.js";
+import { minLineHeightFor, minRatioOf } from "../theme/line-height.js";
+import type { FontWeightKey, SemanticColors } from "../theme/index.js";
+import { CONTRACTS, type VariantOf } from "../contracts/contract-types.js";
+import { resolveTextShape, type TextRole } from "./text.styles.js";
 
 type TextVariant = VariantOf<"text">;
 
@@ -31,6 +34,18 @@ interface TextProps {
   /** letterSpacing の切替軸。default "body"。 */
   role?: TextRole;
   numberOfLines?: number;
+  /**
+   * OS の文字サイズ設定に追随するか（RN Text へそのまま透過）。既定は未指定 = RN 既定（true）。
+   * **原則は既定のまま**（false にすると視覚障害者の拡大設定を無視することになる）。
+   * 固定寸法の図版・チャートのラベルなど、拡大するとレイアウトが壊れる箇所だけ false にする。
+   */
+  allowFontScaling?: boolean;
+  /**
+   * 文字サイズ倍率の上限（RN Text へそのまま透過）。既定は未指定 = RN 既定（上限なし）。
+   * 拡大は許しつつ器からの溢れだけ抑えたいとき（円形の Avatar initials 等）に使う。
+   * `0` は「上限なし」、`1` は「拡大しない」という RN の規約に従う。
+   */
+  maxFontSizeMultiplier?: number;
   style?: StyleProp<TextStyle>;
   testID?: string;
   children: ReactNode;
@@ -42,6 +57,8 @@ export function Text({
   color = "text-default",
   role = "body",
   numberOfLines,
+  allowFontScaling,
+  maxFontSizeMultiplier,
   style,
   testID,
   children,
@@ -55,10 +72,25 @@ export function Text({
     [theme, variant, role, weight],
   );
 
+  // 消費者 style は合成順で最後＝上書きが勝つため、resolver 内のクランプだけでは
+  // `style={{lineHeight: 16}}` を止められない。flatten した**最終値**に行間の安全下限を掛ける
+  // （fontSize の上書きにも追随させるため、下限は最終 fontSize から算出。機序は theme/line-height.ts）。
+  const flat: TextStyle = StyleSheet.flatten([shape, { color: colors[color] }, style]);
+  // `fontSize: undefined` の明示上書き（flatten は undefined でも上書きする）は、RN 既定サイズで
+  // 描画されるのにクランプ基準だけ variant 値になる齟齬を生む。variant の fontSize を復元して
+  // 「Text の文字サイズは variant が決める」契約とクランプ基準を一致させる。
+  if (typeof flat.fontSize !== "number") flat.fontSize = shape.fontSize;
+  if (flat.lineHeight !== undefined) {
+    const floor = minLineHeightFor(flat.fontSize ?? 0, minRatioOf(theme));
+    if (flat.lineHeight < floor) flat.lineHeight = floor;
+  }
+
   return (
     <RNText
-      style={[shape, { color: colors[color] }, style]}
+      style={flat}
       numberOfLines={numberOfLines}
+      allowFontScaling={allowFontScaling}
+      maxFontSizeMultiplier={maxFontSizeMultiplier}
       accessibilityRole={role === "heading" ? "header" : undefined}
       testID={testID}
     >
@@ -67,5 +99,6 @@ export function Text({
   );
 }
 
-// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+// conformance test 用の contract メタ（§2 A-3）。scripts/lib/conformance.test.ts が
+// 「この宣言が正しい contract を指しているか」を静的スキャンで照合する。
 Text.__contract = CONTRACTS.text;

package/src/primitives/_internal/focus-ring.tsx

@@ -17,7 +17,7 @@
 
 import { useState } from "react";
 import { View } from "react-native";
-import { useTheme } from "../../theme";
+import { useTheme } from "../../theme/index.js";
 
 export function useFocusRing() {
   const [focused, setFocused] = useState(false);

package/src/primitives/button.styles.ts

@@ -1,12 +1,16 @@
 /**
- * button.styles — Button の pure style resolver（P4 conformance 対応で Button.tsx から分離）。
+ * button.styles — Button の pure style resolver（styleRefs conformance 対応で Button.tsx から分離）。
  *
  * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
  * 直接実行できる。recipes/app/button.recipe.json（melta-contracts の styleRefs）との
- * 機械照合は scripts/lib/recipe-conformance.test.ts が行う。
+ * 機械照合は scripts/lib/recipe-conformance.test.ts が行う（層B）。
+ *
+ * ⚠️ このファイルは resolver 機構の**最初の実装**で、戻り値が slot 単位に揃っていない
+ * （色だけを返し、寸法は component 側で組む）。現行の書き方は AGENTS.md「style resolver の規約」
+ * を参照すること — 新規 / 改修は alert.styles.ts・textfield.styles.ts の形に寄せる。
  */
 
-import type { NativeTheme, ThemeMode, FontSizeKey, SpacingKey } from "../theme";
+import type { NativeTheme, ThemeMode, FontSizeKey, SpacingKey } from "../theme/index.js";
 
 export type ButtonVariant =
   | "contained"
@@ -18,22 +22,71 @@ export type ButtonVariant =
   | "subtle";
 export type ButtonSize = "small" | "medium" | "large";
 
-/** size → height / 横 padding / label fontSize / icon box（contract sizes/iconButton と整合）。 */
-export const SIZE_SPEC: Record<
+/**
+ * size → 最小高さ / 横 padding / label fontSize / icon box（contract sizes/iconButton と整合）。
+ *
+ * `minHeight`（`height` ではない）なのは fontScale 対策。label は Text primitive の
+ * lineHeight（base = 36pt）で伸びるため、height 固定だと fontScale 1.12x あたりから
+ * medium（40pt）で文字がクリップする。recipe 側も 0.7.0 で `minHeight` に変わっている。
+ * iconOnly だけは正方形を保つため width/height 固定のまま（recipe の iconOnlyWidth/iconOnlyHeight）。
+ */
+export const BUTTON_SIZE_SPEC: Record<
   ButtonSize,
-  { height: number; px: SpacingKey; font: FontSizeKey; iconBox: number }
+  { minHeight: number; px: SpacingKey; font: FontSizeKey; iconBox: number }
 > = {
-  small: { height: 32, px: "3", font: "sm", iconBox: 32 },
-  medium: { height: 40, px: "4", font: "base", iconBox: 40 },
-  large: { height: 48, px: "6", font: "base", iconBox: 48 },
+  small: { minHeight: 32, px: "3", font: "sm", iconBox: 32 },
+  medium: { minHeight: 40, px: "4", font: "base", iconBox: 40 },
+  large: { minHeight: 48, px: "6", font: "base", iconBox: 48 },
 };
 
+/**
+ * size → 縦方向の片側 hitSlop（実効タップ標的 44pt 確保。A11Y_MIN_TAP_TARGET_44）。
+ *
+ * 視覚寸法は据え置き、当たり判定だけを広げる:
+ *   small  32 + 6*2 = 44 / medium 40 + 2*2 = 44 / large 48（既に 44 以上なので 0）
+ *
+ * ⚠️ literal で持つ（BUTTON_SIZE_SPEC から自動導出しない）。導出にすると視覚寸法を変えたときに
+ * hitSlop が黙って追随してしまい、conformance が構造的に fail-open になる。
+ */
+export const BUTTON_VERTICAL_HIT_SLOP: Record<ButtonSize, number> = {
+  small: 6,
+  medium: 2,
+  large: 0,
+};
+
+/** Pressable の hitSlop（RN の Insets）。 */
+export interface ButtonHitSlop {
+  top: number;
+  bottom: number;
+  left?: number;
+  right?: number;
+}
+
+/**
+ * size / iconOnly → Pressable に渡す hitSlop。0 のときは undefined（prop を付けない）。
+ *
+ * - labeled: **縦だけ**。横は付けない — Row の gap 0 で隣接した Button 同士の当たり判定が
+ *   重なって押し違いが起きるため（横方向は padding で既に広い）。
+ * - iconOnly: 幅も 32/40 と狭い正方形なので**横にも同値**を付ける（左右の隣接は
+ *   iconOnly ボタンを gap 0 で並べない前提。並べる場合は消費者側で gap を取る）。
+ */
+export function resolveButtonHitSlop(
+  size: ButtonSize,
+  iconOnly: boolean,
+): ButtonHitSlop | undefined {
+  const slop = BUTTON_VERTICAL_HIT_SLOP[size];
+  if (slop === 0) return undefined;
+  return iconOnly
+    ? { top: slop, bottom: slop, left: slop, right: slop }
+    : { top: slop, bottom: slop };
+}
+
 /**
  * variant → 色解決（button.contract tokenRefs の 1:1 写像）。
  * 文字色は variant により semantic 外（primary.500 等）もあるため hex 文字列で返し、
  * Text の style で color 上書きする（Text の color prop は SemanticColors キー限定のため）。
  */
-export function resolveVariant(
+export function resolveButtonColors(
   theme: NativeTheme,
   mode: ThemeMode,
   variant: ButtonVariant,

package/src/primitives/index.ts

@@ -1,8 +1,8 @@
 /** melta-app primitives の公開エントリ。実装ごとにここへ追記する（設計書 §1）。 */
 
-export { Text } from "./Text";
-export { Metric } from "./Metric";
-export { Tag } from "./Tag";
-export { Button } from "./Button";
-export { Stack } from "./Stack";
-export { Row } from "./Row";
+export { Text } from "./Text.js";
+export { Metric } from "./Metric.js";
+export { Tag } from "./Tag.js";
+export { Button } from "./Button.js";
+export { Stack } from "./Stack.js";
+export { Row } from "./Row.js";

package/src/primitives/metric.styles.ts

@@ -7,7 +7,9 @@
  */
 
 import type { FontVariant } from "react-native";
-import type { NativeTheme, ThemeMode, FontSizeKey, FontWeightValue } from "../theme";
+import type { NativeTheme, ThemeMode, FontSizeKey, FontWeightValue } from "../theme/index.js";
+// theme index からの runtime import は ThemeProvider → react-native を引くため pure module を直接参照
+import { clampLineHeight, minRatioOf } from "../theme/line-height.js";
 
 export type MetricSize = "sm" | "md" | "lg";
 
@@ -56,7 +58,12 @@ export function resolveMetricStyles(
   return {
     valueStyle: {
       fontSize: fontSize[font.value].fontSize,
-      lineHeight: fontSize[font.value].lineHeight,
+      // カスタム theme の未クランプ値への防波堤（text.styles.ts と同じ。根拠は theme/line-height.ts）
+      lineHeight: clampLineHeight(
+        fontSize[font.value].fontSize,
+        fontSize[font.value].lineHeight,
+        minRatioOf(theme),
+      ),
       fontWeight: theme.typography.fontWeight.bold,
       color: sem["text-heading"],
       fontVariant: ["tabular-nums"],

package/src/primitives/row.styles.ts

@@ -6,7 +6,7 @@
  * 機械照合は scripts/lib/row-conformance.test.ts が行う。
  */
 
-import type { NativeTheme, SpacingKey } from "../theme";
+import type { NativeTheme, SpacingKey } from "../theme/index.js";
 
 /** 交差軸の配置（RN alignItems への写像）。default "center"（recipe default に焼いてある）。 */
 export type RowAlign = "start" | "center" | "end" | "baseline" | "stretch";

package/src/primitives/stack.styles.ts

@@ -6,7 +6,7 @@
  * 機械照合は scripts/lib/stack-conformance.test.ts が行う。
  */
 
-import type { NativeTheme, SpacingKey } from "../theme";
+import type { NativeTheme, SpacingKey } from "../theme/index.js";
 
 /** 交差軸の配置（RN alignItems への写像。default stretch = RN デフォルトなので出力しない）。 */
 export type StackAlign = "start" | "center" | "end" | "stretch";

package/src/primitives/tag.styles.ts

@@ -6,10 +6,49 @@
  * 機械照合は scripts/lib/tag-conformance.test.ts が行う。
  */
 
-import type { NativeTheme, ThemeMode, FontSizeKey } from "../theme";
+import type { NativeTheme, ThemeMode, FontSizeKey } from "../theme/index.js";
+import { CANONICAL_TAP_TARGET } from "../a11y/tap-target.js";
+import { clampLineHeight, minRatioOf } from "../theme/line-height.js";
 
 export type TagVariant = "basic" | "removable" | "filter-chip";
 
+/** label の fontSize token キー（component / resolver / 検算が同じキーを読む SSOT）。 */
+export const TAG_SPEC = {
+  /** basic / removable の label。 */
+  labelFont: "xs",
+  /** filter-chip の label（押せる要素なので一段大きい）。 */
+  chipLabelFont: "sm",
+} as const satisfies { labelFont: FontSizeKey; chipLabelFont: FontSizeKey };
+
+/**
+ * removable の × の当たり判定（正典パターン: 視覚 24pt + hitSlop 10 = 実効 44pt）。
+ * 親 Tag の高さ（padding 駆動で 34pt 前後）を超えられないので × 自身に持たせる。
+ */
+export const TAG_REMOVE_TAP_TARGET = CANONICAL_TAP_TARGET;
+
+/**
+ * filter-chip（押せる chip 本体）の縦 hitSlop。
+ *
+ * chip は背景と枠を持つので minHeight で伸ばすと**見た目が変わる**（他 variant と高さが揃わない）。
+ * よって視覚寸法は据え置き、当たり判定だけ広げる:
+ *   視覚高さ 34pt（paddingVertical 4 × 2 + label sm の lineHeight 26）+ 5 × 2 = 44pt。
+ *
+ * padding 駆動なので fontScale で視覚高さ自体が伸びる ＝ 拡大時に過剰な当たり判定にならない。
+ * ⚠️ literal で持つ（resolveTagFilterChipVisualHeight から導出しない）。導出にすると
+ * 寸法変更に hitSlop が黙って追随し、conformance が fail-open になる。
+ */
+export const TAG_FILTER_CHIP_VERTICAL_HIT_SLOP = 5;
+
+/**
+ * filter-chip の視覚高さ（padding 駆動）。conformance が 44pt 到達を検算するための実測値。
+ * = paddingVertical × 2 + label（sm）の lineHeight。
+ */
+export function resolveTagFilterChipVisualHeight(theme: NativeTheme): number {
+  const font = theme.typography.fontSize[TAG_SPEC.chipLabelFont];
+  const lineHeight = clampLineHeight(font.fontSize, font.lineHeight, minRatioOf(theme));
+  return resolveTagBase(theme).paddingVertical * 2 + lineHeight;
+}
+
 /** 共通形状（px-3 py-1 gap-1 rounded-full。tag.recipe の全 variant style と共通の寸法キー）。 */
 export function resolveTagBase(theme: NativeTheme): {
   gap: number;
@@ -44,7 +83,7 @@ export function resolveTagVariant(
   switch (variant) {
     case "basic":
     case "removable":
-      return { bg: sem["bg-page-alt"], textColor: sem["text-default"], font: "xs" };
+      return { bg: sem["bg-page-alt"], textColor: sem["text-default"], font: TAG_SPEC.labelFont };
     case "filter-chip":
       return selected
         ? {
@@ -52,14 +91,14 @@ export function resolveTagVariant(
             borderWidth: 1,
             border: c.primary["200"],
             textColor: c.primary["700"],
-            font: "sm",
+            font: TAG_SPEC.chipLabelFont,
           }
         : {
             bg: sem["bg-surface"],
             borderWidth: 1,
             border: sem["border-default"],
             textColor: sem["text-default"],
-            font: "sm",
+            font: TAG_SPEC.chipLabelFont,
           };
   }
 }

package/src/primitives/text.styles.ts

@@ -6,7 +6,11 @@
  * 機械照合は scripts/lib/text-conformance.test.ts が行う。
  */
 
-import type { NativeTheme, FontSizeKey, FontWeightKey, FontWeightValue } from "../theme";
+import type { NativeTheme, FontSizeKey, FontWeightKey, FontWeightValue } from "../theme/index.js";
+// theme index からの runtime import は ThemeProvider → react-native を引くため、
+// pure module（line-height.ts / letter-spacing.ts）を直接参照する。
+import { clampLineHeight, minRatioOf } from "../theme/line-height.js";
+import { resolveLetterSpacing } from "../theme/letter-spacing.js";
 
 /** letterSpacing の切替軸（text.recipe description の role prop に対応）。 */
 export type TextRole = "heading" | "body";
@@ -22,9 +26,7 @@ export interface TextShape {
 /**
  * variant / role / weight → 形状解決（text.recipe styleRefs の 1:1 写像）。
  * - fontSize token は複合値（px + lineHeight 比率）。theme 生成時に lineHeight は px 化済み。
- * - letterSpacing は em 比率 token のため fontSize × ratio で pt 化する。
- *   theme の resolveLetterSpacing と同一式だが、theme index 経由の runtime import は
- *   ThemeProvider → react-native を引くため、pure に保つ目的でここでは式を直書きする。
+ * - letterSpacing は em 比率 token のため fontSize × ratio で pt 化する（resolveLetterSpacing）。
  */
 export function resolveTextShape(
   theme: NativeTheme,
@@ -35,8 +37,10 @@ export function resolveTextShape(
   const fs = theme.typography.fontSize[variant];
   return {
     fontSize: fs.fontSize,
-    lineHeight: fs.lineHeight,
-    letterSpacing: fs.fontSize * theme.typography.letterSpacingRatio[role],
+    // 既定 theme は codegen 時点でクランプ済みだが、defineTheme で注入されたカスタム theme の
+    // 値はここが最初の防波堤（機序と下限の根拠は theme/line-height.ts）。
+    lineHeight: clampLineHeight(fs.fontSize, fs.lineHeight, minRatioOf(theme)),
+    letterSpacing: resolveLetterSpacing(fs.fontSize, theme.typography.letterSpacingRatio[role]),
     ...(weight ? { fontWeight: theme.typography.fontWeight[weight] } : null),
   };
 }

package/src/safe-area/index.ts

@@ -11,9 +11,10 @@
  *   import { enableSafeAreaContext } from "melta-app/safe-area";
  *   enableSafeAreaContext();
  *
- * これで Screen の SafeArea が useSafeAreaInsets() + View の adapter に切り替わる。
- * Provider の context 値を render 中に同期参照して padding を付けるため、native
- * SafeAreaView の layout/state 更新を待たず、初回 render から inset が反映される。
+ * これで Screen / ActionSheet / BottomSheet の SafeArea が useSafeAreaInsets() + View の
+ * adapter に切り替わる。Provider の context 値を render 中に同期参照して padding を付けるため、
+ * native SafeAreaView の layout/state 更新を待たず、初回 render から inset が反映される。
+ * Android でも効く（RN core の SafeAreaView は Android では完全 no-op）。
  *
  * ⚠️ 前提: アプリの root に SafeAreaProvider が必要（無いと useSafeAreaInsets が throw
  * する）。初回 render から正しい inset を使うには Provider に initialMetrics も渡す。
@@ -35,13 +36,21 @@ import {
   setSafeAreaView,
   type SafeAreaViewLike,
   type SafeAreaViewLikeProps,
-} from "../components/safe-area-registry";
+} from "../components/safe-area-registry.js";
 
 const ALL_EDGES = ["top", "right", "bottom", "left"] as const satisfies readonly Edge[];
 
 /** enableSafeAreaContext() の設定。edges 省略時は従来相当の全 edge。 */
 export interface EnableSafeAreaContextOptions {
-  /** Screen に適用する edge。tab bar 等が担当する edge は除外する。 */
+  /**
+   * **Screen の既定 edge**（`edges` prop を渡さなかった Screen に適用される）。
+   * tab bar 等が担当する edge は除外する。
+   *
+   * ⚠️ 0.5.x までは「アプリ全体で 1 個のグローバル」だったが、edge は消費者ごとに
+   * 決まるべきものなので既定値の意味に変わった。ActionSheet / BottomSheet は画面下端に
+   * 出る都合上、ここの指定に関わらず自前の edge（bottom + 左右）を使う。
+   * 画面ごとに変えたい場合は `<Screen edges={["top"]} />` のように Screen 側で指定する。
+   */
   edges?: readonly Edge[];
 }
 
@@ -100,7 +109,12 @@ function createContextSafeAreaView(selectedEdges: readonly Edge[]): SafeAreaView
   return ContextSafeAreaView;
 }
 
-/** Screen の SafeArea を context 同期参照の View adapter に切り替える。 */
+/**
+ * melta の SafeArea を context 同期参照の View adapter に切り替える。
+ *
+ * registry には**ファクトリ**を渡す（消費者ごとに edges が違うため）。同じ edges 集合には
+ * 同じコンポーネント参照が返るよう memo するのは registry 側の責務。
+ */
 export function enableSafeAreaContext(options: EnableSafeAreaContextOptions = {}): void {
-  setSafeAreaView(createContextSafeAreaView(options.edges ?? ALL_EDGES));
+  setSafeAreaView(createContextSafeAreaView, options.edges ?? ALL_EDGES);
 }

package/src/theme/ThemeProvider.tsx

@@ -14,9 +14,9 @@
 
 import { createContext, useContext, useMemo, type ReactNode } from "react";
 import { useColorScheme } from "react-native";
-import { nativeTheme } from "./native-theme";
-import { defineTheme, isDev, resolveMode, type ResolvedCapabilities, type ResolvedNativeTheme, type ThemeModeViolation } from "./define-theme";
-import type { NativeTheme, SemanticColors, ThemeMode } from "./types";
+import { nativeTheme } from "./native-theme.js";
+import { defineTheme, isDev, resolveMode, type ResolvedCapabilities, type ResolvedNativeTheme, type ThemeModeViolation } from "./define-theme.js";
+import type { NativeTheme, SemanticColors, ThemeMode } from "./types.js";
 
 export type { ThemeMode };
 
@@ -41,8 +41,11 @@ const ThemeContext = createContext<ThemeContextValue | null>(null);
 
 /**
  * 既定 theme。melta-contracts 由来の codegen 結果を注入経路と同じ形に通す（自分でも dogfood する）。
- * 副作用として dev では `nativeTheme` の入れ子オブジェクト（トークン群）も freeze される
- * — 生成物のトークンを実行時に書き換える経路は元々無いので、意図した副作用として許容する。
+ *
+ * dev で freeze されるのは **`defineTheme()` の戻り値**（= `useTheme().theme` として配られる
+ * 解決済み theme）で、入れ子のトークン群まで再帰的に凍る。公開 export の `nativeTheme` 自体は
+ * `defineTheme` 内の `cloneTokenTree` で参照が切り離されているので**凍らない**
+ * （0.4.3 で意図的にこう変えた: 凍らせると `{ ...nativeTheme }` からの正当な派生が dev で壊れるため）。
  */
 const DEFAULT_THEME: ResolvedNativeTheme = defineTheme({ ...nativeTheme, id: "melta" });