melta-app 0.5.3 → 0.6.0

package/src/primitives/Text.tsx

@@ -13,8 +13,8 @@
  */
 
 import { useMemo, type ReactNode } from "react";
-import { Text as RNText, type StyleProp, type TextStyle } from "react-native";
-import { useTheme } from "../theme";
+import { StyleSheet, Text as RNText, type StyleProp, type TextStyle } from "react-native";
+import { useTheme, DEFAULT_MIN_LINE_HEIGHT_RATIO, minLineHeightFor } from "../theme";
 import type { FontWeightKey, SemanticColors } from "../theme";
 import { CONTRACTS, type VariantOf } from "../contracts/contract-types";
 import { resolveTextShape, type TextRole } from "./text.styles";
@@ -55,9 +55,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,
+      theme.typography.minLineHeightRatio ?? DEFAULT_MIN_LINE_HEIGHT_RATIO,
+    );
+    if (flat.lineHeight < floor) flat.lineHeight = floor;
+  }
+
   return (
     <RNText
-      style={[shape, { color: colors[color] }, style]}
+      style={flat}
       numberOfLines={numberOfLines}
       accessibilityRole={role === "heading" ? "header" : undefined}
       testID={testID}

package/src/primitives/metric.styles.ts

@@ -8,6 +8,8 @@
 
 import type { FontVariant } from "react-native";
 import type { NativeTheme, ThemeMode, FontSizeKey, FontWeightValue } from "../theme";
+// theme index からの runtime import は ThemeProvider → react-native を引くため pure module を直接参照
+import { DEFAULT_MIN_LINE_HEIGHT_RATIO, clampLineHeight } from "../theme/line-height";
 
 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,
+        theme.typography.minLineHeightRatio ?? DEFAULT_MIN_LINE_HEIGHT_RATIO,
+      ),
       fontWeight: theme.typography.fontWeight.bold,
       color: sem["text-heading"],
       fontVariant: ["tabular-nums"],

package/src/primitives/text.styles.ts

@@ -7,6 +7,9 @@
  */
 
 import type { NativeTheme, FontSizeKey, FontWeightKey, FontWeightValue } from "../theme";
+// theme index からの runtime import は ThemeProvider → react-native を引くため、
+// pure module（line-height.ts）を直接参照する（letterSpacing の式直書きと同じ理由）。
+import { DEFAULT_MIN_LINE_HEIGHT_RATIO, clampLineHeight } from "../theme/line-height";
 
 /** letterSpacing の切替軸（text.recipe description の role prop に対応）。 */
 export type TextRole = "heading" | "body";
@@ -35,7 +38,13 @@ export function resolveTextShape(
   const fs = theme.typography.fontSize[variant];
   return {
     fontSize: fs.fontSize,
-    lineHeight: fs.lineHeight,
+    // 既定 theme は codegen 時点でクランプ済みだが、defineTheme で注入されたカスタム theme の
+    // 値はここが最初の防波堤（機序と下限の根拠は theme/line-height.ts）。
+    lineHeight: clampLineHeight(
+      fs.fontSize,
+      fs.lineHeight,
+      theme.typography.minLineHeightRatio ?? DEFAULT_MIN_LINE_HEIGHT_RATIO,
+    ),
     letterSpacing: fs.fontSize * theme.typography.letterSpacingRatio[role],
     ...(weight ? { fontWeight: theme.typography.fontWeight[weight] } : null),
   };

package/src/theme/define-theme.ts

@@ -373,6 +373,24 @@ export function validateTheme(options: ThemeOptions): string[] {
     }
   }
 
+  // minLineHeightRatio は任意欄だが、書くなら実在しうる比率であること
+  // （0.9 のような「詰め」を宣言されると clamp が下限の意味を失う。上限は設けない——
+  //  行間をいくら広げても字形は欠けないので、広い分には嘘にならない）。
+  // missingKeys と同じ方針で **accessor は呼ばない**（値の直読みは消費者の開発用プローブを
+  // 発火させ、「defineTheme は accessor を1度も呼ばない」契約を破る）。data property のみ検査する。
+  const minRatioDesc =
+    options.typography !== null && typeof options.typography === "object"
+      ? Object.getOwnPropertyDescriptor(options.typography, "minLineHeightRatio")
+      : undefined;
+  if (minRatioDesc !== undefined && "value" in minRatioDesc && minRatioDesc.value !== undefined) {
+    const minRatio: unknown = minRatioDesc.value;
+    if (typeof minRatio !== "number" || !Number.isFinite(minRatio) || minRatio < 1) {
+      problems.push(
+        `${where}: typography.minLineHeightRatio が不正 — ${String(minRatio)}（フォント実測の 1 以上の有限数を宣言する。根拠は theme/line-height.ts）`,
+      );
+    }
+  }
+
   const status = options.color?.status;
   if (status !== null && typeof status === "object") {
     for (const kind of STATUS_KINDS) {

package/src/theme/index.ts

@@ -9,6 +9,11 @@ export { nativeTheme } from "./native-theme";
 export { ThemeProvider, useTheme } from "./ThemeProvider";
 export type { ThemeContextValue, ThemeMode } from "./ThemeProvider";
 export { defineTheme } from "./define-theme";
+export {
+  DEFAULT_MIN_LINE_HEIGHT_RATIO,
+  minLineHeightFor,
+  clampLineHeight,
+} from "./line-height";
 /**
  * 以下は theme の解決規則を外から検証・再利用するためのヘルパ。
  * **@experimental — 安定 API ではない。** 挙動・シグネチャ・メッセージは予告なく変わりうる。

package/src/theme/line-height.ts

@@ -0,0 +1,44 @@
+/**
+ * line-height — 行間の安全下限（フォントの字形を欠かせない最小 lineHeight）。
+ *
+ * なぜ要るか（2026-08-05 modelog dogfood で実害）:
+ * RN Android の CustomLineHeightSpan は `leading = lineHeight - (ascent + descent)` を計算し、
+ * leading が負になると不足分を行の上下から半分ずつ削って帳尻を合わせる。削られた領域の字形
+ * （濁点は行の上端にある）は Text 既定の overflow: hidden で消える——「ギ」が「チ」に見える。
+ * web はこの機序を持たないため、web の実描画検査では検出できない（Android 実機のみで発現）。
+ *
+ * 下限は使用フォントのメトリクス（ascent + descent）に依存するが、melta はフォントを同梱しない
+ * （system フォント運用）ので、既定は **Android の日本語 system フォント Noto Sans CJK JP の
+ * 実測 1.448**（hhea: (1160 + 288) / 1000。AOSP 版・Google Fonts 版とも同値、2026-08-06 実測）
+ * を切り上げた 1.45 とする。iOS（Hiragino 1.50 相当）にはこの clip 機序が無いので基準にしない。
+ *
+ * フォントを同梱する消費者は、そのフォントの実測比率を theme の
+ * `typography.minLineHeightRatio` で宣言する（例: LINE Seed JP = 1.61）。
+ * 宣言が既定より小さいラテン専用フォント（例: Inter 1.21）も同じ口で下げられる。
+ */
+
+/**
+ * 既定の最小行間比。Android system 日本語フォント（Noto Sans CJK JP）の実測 1.448 の切り上げ。
+ * theme が `typography.minLineHeightRatio` を宣言しない場合にこの値へ倒れる（日本語安全側）。
+ */
+export const DEFAULT_MIN_LINE_HEIGHT_RATIO = 1.45;
+
+/**
+ * fontSize に対する安全な最小 lineHeight（px）。
+ * **切り上げ**であることが要点: 四捨五入だと 32 × 1.45 = 46.4 → 46 で下限を割る。
+ */
+export function minLineHeightFor(fontSize: number, minRatio: number): number {
+  return Math.ceil(fontSize * minRatio);
+}
+
+/**
+ * 宣言された lineHeight を安全下限でクランプする。
+ * 宣言値が下限以上ならそのまま（意匠の行間はどこまでも広げられる。詰める方向だけを止める）。
+ */
+export function clampLineHeight(
+  fontSize: number,
+  declaredLineHeight: number,
+  minRatio: number,
+): number {
+  return Math.max(declaredLineHeight, minLineHeightFor(fontSize, minRatio));
+}

package/src/theme/native-theme.ts

@@ -81,11 +81,11 @@ export const nativeTheme: NativeTheme = {
     "fontSize": {
       "xxs": {
         "fontSize": 10,
-        "lineHeight": 14
+        "lineHeight": 15
       },
       "xs": {
         "fontSize": 13,
-        "lineHeight": 18
+        "lineHeight": 19
       },
       "sm": {
         "fontSize": 15,
@@ -101,15 +101,15 @@ export const nativeTheme: NativeTheme = {
       },
       "xl": {
         "fontSize": 22,
-        "lineHeight": 31
+        "lineHeight": 32
       },
       "2xl": {
         "fontSize": 26,
-        "lineHeight": 36
+        "lineHeight": 38
       },
       "3xl": {
         "fontSize": 32,
-        "lineHeight": 45
+        "lineHeight": 47
       }
     },
     "fontWeight": {
@@ -121,7 +121,8 @@ export const nativeTheme: NativeTheme = {
     "letterSpacingRatio": {
       "heading": 0.01,
       "body": 0.02
-    }
+    },
+    "minLineHeightRatio": 1.45
   },
   "spacing": {
     "1": 4,

package/src/theme/types.ts

@@ -91,6 +91,15 @@ export interface ThemeTypography {
    * （requirements §4 の「px に換算」からの意図的な乖離。理由はこのコメントの通り）
    */
   letterSpacingRatio: { heading: number; body: number };
+  /**
+   * 使用フォントが要求する最小行間比（(ascent + descent) / unitsPerEm）。
+   * これを下回る lineHeight は RN Android で字形の描画領域を削り、濁点などが欠ける
+   * （機序と既定値 1.45 の根拠は theme/line-height.ts のコメント）。
+   * style resolver は `clampLineHeight()` でこの比率を下限として適用する。
+   * 未宣言は DEFAULT_MIN_LINE_HEIGHT_RATIO（1.45 = Android system 日本語フォント基準）へ倒れる。
+   * フォントを同梱する消費者は実測値を宣言する（例: LINE Seed JP = 1.61）。
+   */
+  minLineHeightRatio?: number;
 }
 
 /**