melta-app 0.1.0

package/src/primitives/Stack.tsx

@@ -0,0 +1,42 @@
+/**
+ * Stack — 縦積み layout primitive。RN コア View の薄いラッパ。
+ * contract: stack（app 先行定義、melta-contracts）。dogfood 不足-1（生 flexbox 手書き）の解消。
+ *
+ * - gap は spacing token キー限定（生数値不可、§5 lint の意味を保つ）。
+ * - align は交差軸の配置（default stretch = RN デフォルト）。
+ * - 決定ロジックは pure resolver（stack.styles.ts）に分離 — recipe との機械照合対象。
+ */
+
+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";
+
+interface StackProps {
+  /** 子要素間の gap（spacing token キー限定）。省略時 gap なし。 */
+  gap?: SpacingKey;
+  /** 交差軸の配置。default "stretch"。 */
+  align?: StackAlign;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  children: ReactNode;
+}
+
+export function Stack({ gap, align = "stretch", style, testID, children }: StackProps) {
+  const { theme } = useTheme();
+
+  const layout = useMemo<StackStyle>(
+    () => resolveStackStyle(theme, { gap, align }),
+    [theme, gap, align],
+  );
+
+  return (
+    <View style={[layout, style]} testID={testID}>
+      {children}
+    </View>
+  );
+}
+
+Stack.__contract = CONTRACTS.stack;

package/src/primitives/Tag.tsx

@@ -0,0 +1,126 @@
+/**
+ * Tag — タグ / フィルターチップ primitive（設計書 §1, §4 C-3）。contract: tag。discriminated union。
+ *
+ * - variant で必須 prop が変わるため DU（§4: basic は表示のみ、removable は onRemove 必須、
+ *   filter-chip は selected/onToggle 必須）。
+ * - contract states active/inactive → prop selected:boolean（§2）。selected→accessibilityState.selected。
+ * - 配色: basic/removable は bg-page-alt、filter-chip は bg-surface+border、selected 時は
+ *   active-bg=primary.50 / active-border=primary.200 / active-text=primary.700（tag.contract tokenRefs）。
+ *   色・寸法の決定は 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 実装時に回収）。
+ */
+
+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";
+
+interface TagBase {
+  label: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+type TagProps =
+  | (TagBase & { variant?: "basic" })
+  | (TagBase & { variant: "removable"; onRemove: () => void; removeAccessibilityLabel: string })
+  | (TagBase & { variant: "filter-chip"; selected: boolean; onToggle: () => void });
+
+/** 共通形状（px-3 py-1 rounded-full。寸法は resolver、layout はここで足す）。 */
+function useTagBase(): ViewStyle {
+  const { theme } = useTheme();
+  return {
+    flexDirection: "row",
+    alignItems: "center",
+    ...resolveTagBase(theme),
+  };
+}
+
+function FilterChipTag(props: TagBase & { selected: boolean; onToggle: () => void }) {
+  const { theme, mode } = useTheme();
+  const base = useTagBase();
+  const { focused, focusHandlers } = useFocusRing();
+  const { label, selected, onToggle, style, testID } = props;
+  const v = resolveTagVariant(theme, mode, "filter-chip", selected);
+  return (
+    <Pressable
+      {...focusHandlers}
+      onPress={onToggle}
+      accessibilityRole="button"
+      accessibilityState={{ selected }}
+      testID={testID}
+      style={[
+        base,
+        {
+          backgroundColor: v.bg,
+          borderWidth: v.borderWidth,
+          borderColor: v.border,
+        },
+        style,
+      ]}
+    >
+      {/* 非選択時の文字色は Text の color prop（text-default）と同値なので上書き不要。 */}
+      <Text variant={v.font} color="text-default" style={selected ? { color: v.textColor } : undefined}>
+        {label}
+      </Text>
+      <FocusRing visible={focused} radius={theme.radius.full} />
+    </Pressable>
+  );
+}
+
+function RemovableTag(
+  props: TagBase & { onRemove: () => void; removeAccessibilityLabel: string },
+) {
+  const { theme, mode } = useTheme();
+  const base = useTagBase();
+  const { focused, focusHandlers } = useFocusRing();
+  const { label, onRemove, removeAccessibilityLabel, style, testID } = props;
+  const v = resolveTagVariant(theme, mode, "removable");
+  return (
+    <View testID={testID} style={[base, { backgroundColor: v.bg }, style]}>
+      <Text variant={v.font} color="text-default">
+        {label}
+      </Text>
+      {/* 最小タップターゲット確保: 親 Tag の高さを超えられないので remove 自身に min 24 + hitSlop（Codex M-2）。 */}
+      <Pressable
+        {...focusHandlers}
+        onPress={onRemove}
+        accessibilityRole="button"
+        accessibilityLabel={removeAccessibilityLabel}
+        hitSlop={10}
+        style={{ minWidth: 24, minHeight: 24, alignItems: "center", justifyContent: "center" }}
+      >
+        <Text variant="xs" color="text-muted">
+          ×
+        </Text>
+        <FocusRing visible={focused} radius={theme.radius.full} />
+      </Pressable>
+    </View>
+  );
+}
+
+export function Tag(props: TagProps) {
+  const { theme, mode } = useTheme();
+  const base = useTagBase();
+
+  if (props.variant === "filter-chip") return <FilterChipTag {...props} />;
+  if (props.variant === "removable") return <RemovableTag {...props} />;
+
+  // basic（表示のみ）
+  const v = resolveTagVariant(theme, mode, "basic");
+  return (
+    <View testID={props.testID} style={[base, { backgroundColor: v.bg }, props.style]}>
+      <Text variant={v.font} color="text-default">
+        {props.label}
+      </Text>
+    </View>
+  );
+}
+
+// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+Tag.__contract = CONTRACTS.tag;

package/src/primitives/Text.tsx

@@ -0,0 +1,71 @@
+/**
+ * Text — 基本テキスト primitive（設計書 §1）。RN コア Text の薄いラッパ。
+ * contract: text（app 先行定義、melta-contracts）。
+ *
+ * - variant は contract 由来の VariantOf<"text">（= fontSize の段階）。theme の FontSizeKey と
+ *   構造一致している前提で theme.typography.fontSize[variant] を引く。乖離したら型エラーで検知
+ *   される（= A-3 conformance の型レベル最低ライン、§2）。
+ * - 色は token キーのみ（生 hex 不可、§5 lint の意味を保つ）。
+ * - 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 から取る。
+ */
+
+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";
+
+type TextVariant = VariantOf<"text">;
+
+interface TextProps {
+  /** fontSize の段階（contract variant）。default "base"。 */
+  variant?: TextVariant;
+  /** フォントウェイト（token キー）。未指定は RN デフォルト。 */
+  weight?: FontWeightKey;
+  /** 文字色（semantic token キーのみ）。default "text-default"。 */
+  color?: keyof SemanticColors;
+  /** letterSpacing の切替軸。default "body"。 */
+  role?: TextRole;
+  numberOfLines?: number;
+  style?: StyleProp<TextStyle>;
+  testID?: string;
+  children: ReactNode;
+}
+
+export function Text({
+  variant = "base",
+  weight,
+  color = "text-default",
+  role = "body",
+  numberOfLines,
+  style,
+  testID,
+  children,
+}: TextProps) {
+  const { theme, colors } = useTheme();
+
+  // 形状（mode 非依存）は variant/role/weight にだけ依存させてメモ化（B-3）。
+  // 決定ロジックは pure resolver（text.styles.ts）に分離済み — recipe との機械照合対象。
+  const shape = useMemo<TextStyle>(
+    () => resolveTextShape(theme, variant, role, weight),
+    [theme, variant, role, weight],
+  );
+
+  return (
+    <RNText
+      style={[shape, { color: colors[color] }, style]}
+      numberOfLines={numberOfLines}
+      accessibilityRole={role === "heading" ? "header" : undefined}
+      testID={testID}
+    >
+      {children}
+    </RNText>
+  );
+}
+
+// Phase 2 conformance test 用の contract メタ（§2 A-3）。
+Text.__contract = CONTRACTS.text;

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

@@ -0,0 +1,59 @@
+/**
+ * focus-ring — Pressable の focus 可視化を共通化する internal helper（設計書 §1/§2）。
+ *
+ * RN にブラウザの focus-visible / ring はないので、focus 時に「outline 相当の View overlay」を
+ * 対象の外側に絶対配置で描く（§2 mapping: focus → accessible + Pressable onFocus で outline）。
+ * 外付けキーボード / TV / a11y focus で効く。Button / Tag / Card で共有する（個別実装の重複を防ぐ）。
+ *
+ * 使い方:
+ *   const { focused, focusHandlers } = useFocusRing();
+ *   <Pressable {...focusHandlers} style={{ ... }}>
+ *     {children}
+ *     <FocusRing visible={focused} radius={theme.radius.md} />
+ *   </Pressable>
+ * 注: 親 Pressable は position:relative（RN 既定）かつ overflow を hidden にしないこと
+ *     （ring は inset 負値で外側に出るため）。
+ */
+
+import { useState } from "react";
+import { View } from "react-native";
+import { useTheme } from "../../theme";
+
+export function useFocusRing() {
+  const [focused, setFocused] = useState(false);
+  return {
+    focused,
+    focusHandlers: {
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false),
+    },
+  };
+}
+
+interface FocusRingProps {
+  visible: boolean;
+  /** 対象の borderRadius。ring はこれに inset 分を足した角丸で描く。 */
+  radius: number;
+}
+
+const INSET = 3;
+
+export function FocusRing({ visible, radius }: FocusRingProps) {
+  const { theme } = useTheme();
+  if (!visible) return null;
+  return (
+    <View
+      pointerEvents="none"
+      style={{
+        position: "absolute",
+        top: -INSET,
+        left: -INSET,
+        right: -INSET,
+        bottom: -INSET,
+        borderWidth: 2,
+        borderColor: theme.color.primary["500"],
+        borderRadius: radius + INSET,
+      }}
+    />
+  );
+}

package/src/primitives/button.styles.ts

@@ -0,0 +1,69 @@
+/**
+ * button.styles — Button の pure style resolver（P4 conformance 対応で Button.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/button.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/recipe-conformance.test.ts が行う。
+ */
+
+import type { NativeTheme, ThemeMode, FontSizeKey, SpacingKey } from "../theme";
+
+export type ButtonVariant =
+  | "contained"
+  | "outlined"
+  | "brand-outline"
+  | "neutral"
+  | "lighted"
+  | "danger"
+  | "subtle";
+export type ButtonSize = "small" | "medium" | "large";
+
+/** size → height / 横 padding / label fontSize / icon box（contract sizes/iconButton と整合）。 */
+export const SIZE_SPEC: Record<
+  ButtonSize,
+  { height: 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 },
+};
+
+/**
+ * variant → 色解決（button.contract tokenRefs の 1:1 写像）。
+ * 文字色は variant により semantic 外（primary.500 等）もあるため hex 文字列で返し、
+ * Text の style で color 上書きする（Text の color prop は SemanticColors キー限定のため）。
+ */
+export function resolveVariant(
+  theme: NativeTheme,
+  mode: ThemeMode,
+  variant: ButtonVariant,
+): { bg?: string; pressedBg?: string; textColor: string; border?: string } {
+  const c = theme.color;
+  const sem = c.semantic[mode];
+  switch (variant) {
+    case "contained":
+      return { bg: c.primary["500"], pressedBg: c.primary["700"], textColor: sem["text-on-accent"] };
+    case "outlined":
+      return {
+        bg: sem["bg-surface"],
+        pressedBg: sem["bg-surface-alt"],
+        textColor: sem["text-default"],
+        border: sem["border-default"],
+      };
+    case "brand-outline":
+      return {
+        bg: sem["bg-surface"],
+        pressedBg: c.primary["50"],
+        textColor: c.primary["500"],
+        border: c.primary["500"],
+      };
+    case "neutral":
+      return { bg: sem["bg-surface-alt"], pressedBg: sem["border-default"], textColor: sem["text-default"] };
+    case "lighted":
+      return { bg: c.primary["50"], pressedBg: c.primary["100"], textColor: c.primary["500"] };
+    case "danger":
+      return { bg: c.status.danger.base, pressedBg: c.status.danger.textLight, textColor: sem["text-on-accent"] };
+    case "subtle":
+      return { bg: "transparent", pressedBg: sem["bg-surface-alt"], textColor: sem["text-default"] };
+  }
+}

package/src/primitives/index.ts

@@ -0,0 +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";

package/src/primitives/metric.styles.ts

@@ -0,0 +1,75 @@
+/**
+ * metric.styles — Metric の pure style resolver（styleRefs conformance 対応で Metric.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュール（型 import のみ可）にすることで node テスト
+ * （tsx --test）から直接実行できる。recipes/app/metric.recipe.json（melta-contracts の
+ * styleRefs）との機械照合は scripts/lib/metric-conformance.test.ts が行う。
+ */
+
+import type { FontVariant } from "react-native";
+import type { NativeTheme, ThemeMode, FontSizeKey, FontWeightValue } from "../theme";
+
+export type MetricSize = "sm" | "md" | "lg";
+
+/**
+ * size → value / unit の fontSize token（metric.recipe sizes と整合）。
+ * unit は value の1段下の fontSize（ベースライン揃え用）。
+ */
+export const METRIC_FONT: Record<MetricSize, { value: FontSizeKey; unit: FontSizeKey }> = {
+  sm: { value: "lg", unit: "base" },
+  md: { value: "2xl", unit: "lg" },
+  lg: { value: "3xl", unit: "xl" },
+};
+
+export interface MetricStyles {
+  /** value（数値本体）: tabular-nums で桁揃え + bold + text-heading。 */
+  valueStyle: {
+    fontSize: number;
+    lineHeight: number;
+    fontWeight: FontWeightValue;
+    color: string;
+    fontVariant: FontVariant[];
+  };
+  /** unit（単位）: value の1段下 fontSize / medium / text-muted / marginLeft spacing.1。 */
+  unitStyle: {
+    fontSize: number;
+    fontWeight: FontWeightValue;
+    color: string;
+    marginLeft: number;
+  };
+  /** label（ラベル）: sm / text-muted。 */
+  labelStyle: {
+    fontSize: number;
+    color: string;
+  };
+}
+
+/** size → value / unit / label の style 解決（metric.recipe styleRefs の 1:1 写像）。 */
+export function resolveMetricStyles(
+  theme: NativeTheme,
+  mode: ThemeMode,
+  size: MetricSize,
+): MetricStyles {
+  const sem = theme.color.semantic[mode];
+  const fontSize = theme.typography.fontSize;
+  const font = METRIC_FONT[size];
+  return {
+    valueStyle: {
+      fontSize: fontSize[font.value].fontSize,
+      lineHeight: fontSize[font.value].lineHeight,
+      fontWeight: theme.typography.fontWeight.bold,
+      color: sem["text-heading"],
+      fontVariant: ["tabular-nums"],
+    },
+    unitStyle: {
+      fontSize: fontSize[font.unit].fontSize,
+      fontWeight: theme.typography.fontWeight.medium,
+      color: sem["text-muted"],
+      marginLeft: theme.spacing["1"],
+    },
+    labelStyle: {
+      fontSize: fontSize.sm.fontSize,
+      color: sem["text-muted"],
+    },
+  };
+}

package/src/primitives/row.styles.ts

@@ -0,0 +1,66 @@
+/**
+ * row.styles — Row の pure style resolver（styleRefs conformance 対応で Row.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/row.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/row-conformance.test.ts が行う。
+ */
+
+import type { NativeTheme, SpacingKey } from "../theme";
+
+/** 交差軸の配置（RN alignItems への写像）。default "center"（recipe default に焼いてある）。 */
+export type RowAlign = "start" | "center" | "end" | "baseline" | "stretch";
+/** 主軸の配置（RN justifyContent への写像）。default "start"（= RN デフォルト、style 出力なし）。 */
+export type RowJustify = "start" | "center" | "end" | "between";
+
+const ALIGN_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  baseline: "baseline",
+  stretch: "stretch",
+} as const;
+
+const JUSTIFY_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+} as const;
+
+export interface RowStyleProps {
+  /** 子要素間の gap（spacing token キー限定）。省略時は gap を出力しない。 */
+  gap?: SpacingKey;
+  /** 交差軸の配置。default "center"。 */
+  align?: RowAlign;
+  /** 主軸の配置。default "start"（style 出力なし）。 */
+  justify?: RowJustify;
+  /** 折返し。default false（style 出力なし）。 */
+  wrap?: boolean;
+}
+
+export interface RowStyle {
+  flexDirection: "row";
+  alignItems: (typeof ALIGN_MAP)[RowAlign];
+  justifyContent?: (typeof JUSTIFY_MAP)[RowJustify];
+  flexWrap?: "wrap";
+  gap?: number;
+}
+
+/**
+ * props → 横並び style の解決（row.recipe styleRefs の 1:1 写像）。
+ * デフォルト（align=center / justify=start / wrap=false / gap なし）は
+ * recipe の default variant（flexDirection + alignItems: "center"）と一致させている。
+ */
+export function resolveRowStyle(
+  theme: NativeTheme,
+  { gap, align = "center", justify = "start", wrap = false }: RowStyleProps = {},
+): RowStyle {
+  return {
+    flexDirection: "row",
+    alignItems: ALIGN_MAP[align],
+    ...(justify !== "start" ? { justifyContent: JUSTIFY_MAP[justify] } : null),
+    ...(wrap ? { flexWrap: "wrap" as const } : null),
+    ...(gap != null ? { gap: theme.spacing[gap] } : null),
+  };
+}

package/src/primitives/stack.styles.ts

@@ -0,0 +1,47 @@
+/**
+ * stack.styles — Stack の pure style resolver（styleRefs conformance 対応で Stack.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/stack.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/stack-conformance.test.ts が行う。
+ */
+
+import type { NativeTheme, SpacingKey } from "../theme";
+
+/** 交差軸の配置（RN alignItems への写像。default stretch = RN デフォルトなので出力しない）。 */
+export type StackAlign = "start" | "center" | "end" | "stretch";
+
+const ALIGN_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch",
+} as const;
+
+export interface StackStyleProps {
+  /** 子要素間の gap（spacing token キー限定）。省略時は gap を出力しない。 */
+  gap?: SpacingKey;
+  /** 交差軸の配置。default "stretch"（= RN デフォルト、style 出力なし）。 */
+  align?: StackAlign;
+}
+
+export interface StackStyle {
+  flexDirection: "column";
+  gap?: number;
+  alignItems?: (typeof ALIGN_MAP)[StackAlign];
+}
+
+/**
+ * props → 縦積み style の解決（stack.recipe styleRefs の 1:1 写像）。
+ * デフォルト（gap なし / align=stretch）は recipe の default variant（flexDirection のみ）と一致させている。
+ */
+export function resolveStackStyle(
+  theme: NativeTheme,
+  { gap, align = "stretch" }: StackStyleProps = {},
+): StackStyle {
+  return {
+    flexDirection: "column",
+    ...(gap != null ? { gap: theme.spacing[gap] } : null),
+    ...(align !== "stretch" ? { alignItems: ALIGN_MAP[align] } : null),
+  };
+}

package/src/primitives/tag.styles.ts

@@ -0,0 +1,65 @@
+/**
+ * tag.styles — Tag の pure style resolver（styleRefs conformance 対応で Tag.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/tag.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/tag-conformance.test.ts が行う。
+ */
+
+import type { NativeTheme, ThemeMode, FontSizeKey } from "../theme";
+
+export type TagVariant = "basic" | "removable" | "filter-chip";
+
+/** 共通形状（px-3 py-1 gap-1 rounded-full。tag.recipe の全 variant style と共通の寸法キー）。 */
+export function resolveTagBase(theme: NativeTheme): {
+  gap: number;
+  paddingHorizontal: number;
+  paddingVertical: number;
+  borderRadius: number;
+} {
+  return {
+    gap: theme.spacing["1"],
+    paddingHorizontal: theme.spacing["3"],
+    paddingVertical: theme.spacing["1"],
+    borderRadius: theme.radius.full,
+  };
+}
+
+/**
+ * variant（+ filter-chip の selected 状態）→ 配色 + label fontSize（tag.recipe styleRefs の 1:1 写像）。
+ *
+ * - selected は contract states active/inactive → prop selected:boolean の写像（filter-chip のみ有効）。
+ *   active は bg=primary.50 / border=primary.200 / text=primary.700 の差分、inactive は variant style そのまま。
+ * - 文字色は active 時に semantic 外（primary.700）になるため hex 文字列で返し、
+ *   Text の style で color 上書きする（Text の color prop は SemanticColors キー限定のため）。
+ */
+export function resolveTagVariant(
+  theme: NativeTheme,
+  mode: ThemeMode,
+  variant: TagVariant,
+  selected = false,
+): { bg: string; border?: string; borderWidth?: number; textColor: string; font: FontSizeKey } {
+  const c = theme.color;
+  const sem = c.semantic[mode];
+  switch (variant) {
+    case "basic":
+    case "removable":
+      return { bg: sem["bg-page-alt"], textColor: sem["text-default"], font: "xs" };
+    case "filter-chip":
+      return selected
+        ? {
+            bg: c.primary["50"],
+            borderWidth: 1,
+            border: c.primary["200"],
+            textColor: c.primary["700"],
+            font: "sm",
+          }
+        : {
+            bg: sem["bg-surface"],
+            borderWidth: 1,
+            border: sem["border-default"],
+            textColor: sem["text-default"],
+            font: "sm",
+          };
+  }
+}

package/src/primitives/text.styles.ts

@@ -0,0 +1,42 @@
+/**
+ * text.styles — Text の pure style resolver（styleRefs conformance 対応で Text.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/text.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/text-conformance.test.ts が行う。
+ */
+
+import type { NativeTheme, FontSizeKey, FontWeightKey, FontWeightValue } from "../theme";
+
+/** letterSpacing の切替軸（text.recipe description の role prop に対応）。 */
+export type TextRole = "heading" | "body";
+
+/** Text の形状 style（mode 非依存部分。文字色は render 時に semantic colors から取る）。 */
+export interface TextShape {
+  fontSize: number;
+  lineHeight: number;
+  letterSpacing: number;
+  fontWeight?: FontWeightValue;
+}
+
+/**
+ * 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 に保つ目的でここでは式を直書きする。
+ */
+export function resolveTextShape(
+  theme: NativeTheme,
+  variant: FontSizeKey,
+  role: TextRole,
+  weight?: FontWeightKey,
+): TextShape {
+  const fs = theme.typography.fontSize[variant];
+  return {
+    fontSize: fs.fontSize,
+    lineHeight: fs.lineHeight,
+    letterSpacing: fs.fontSize * theme.typography.letterSpacingRatio[role],
+    ...(weight ? { fontWeight: theme.typography.fontWeight[weight] } : null),
+  };
+}