melta-app 0.1.0

package/src/components/skeleton.styles.ts

@@ -0,0 +1,155 @@
+/**
+ * skeleton.styles — Skeleton の pure style resolver（styleRefs conformance 対応で Skeleton.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/skeleton.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/skeleton-conformance.test.ts が行う。
+ */
+
+import type {
+  ElevationKey,
+  ElevationStyle,
+  NativeTheme,
+  RadiusKey,
+  SemanticColors,
+  SpacingKey,
+  ThemeMode,
+} from "../theme";
+
+export type SkeletonVariant = "text" | "circle" | "card";
+/** contract states（loading = pulse、loaded = Skeleton 自体をアンマウント）。 */
+export type SkeletonState = "loading" | "loaded";
+
+/**
+ * card variant の Surface 土台へ渡す props（token キー）。
+ * component は Surface にこのキーをそのまま渡し、resolver は同じキーから style 値を解決する
+ * （component と resolver が別々のキーを持って drift する事故を防ぐ SSOT）。
+ */
+export const CARD_SURFACE_SPEC = {
+  bg: "bg-surface",
+  radius: "lg",
+  elevation: "sm",
+  padding: "6",
+} as const satisfies {
+  bg: keyof SemanticColors;
+  radius: RadiusKey;
+  elevation: ElevationKey;
+  padding: SpacingKey;
+};
+
+/** バー / アバター円の寸法。recipe と同じく token に対応が無い literal（recipe description 参照）。 */
+export const SKELETON_METRICS = {
+  /** text variant の行バー高さ */
+  textBarHeight: 14,
+  /** card variant 内のバー高さ */
+  cardBarHeight: 12,
+  /** circle variant / card 内アバター円の直径 */
+  circleSize: 40,
+} as const;
+
+/**
+ * pulse の opacity 振れ幅（states.loading.animation の opacityFrom/opacityTo）。
+ * to は states.loading.style.opacity（= dim 側の見た目）と同値。
+ */
+export const PULSE_OPACITY = { from: 1, to: 0.4 } as const;
+
+/** バー1本分の style（text の行バー / card 内バーで共通の形）。 */
+export interface SkeletonBarStyle {
+  height: number;
+  borderRadius: number;
+  backgroundColor: string;
+}
+
+/** variant ごとの slot 構成（recipe の style / barStyle と 1:1）。 */
+export interface SkeletonVariantStyles {
+  /** text: 行バー style + 行間 gap。recipe は 1 slot に併記（component 側で gap をコンテナへ分離） */
+  text: { style: SkeletonBarStyle & { gap: number } };
+  circle: {
+    style: { width: number; height: number; borderRadius: number; backgroundColor: string };
+  };
+  card: {
+    /** Surface 土台の style。elevation は複合値（iOS shadow* + Android elevation）のまま保持 */
+    style: {
+      backgroundColor: string;
+      borderRadius: number;
+      borderWidth: number;
+      borderColor: string;
+      padding: number;
+      elevation: ElevationStyle;
+    };
+    barStyle: SkeletonBarStyle;
+  };
+}
+
+/**
+ * variant → style 解決（skeleton.recipe styleRefs の 1:1 写像）。
+ * バーの色は text / circle / card すべて border-default（contract に忠実、§1 Agent m2）。
+ * card の土台は CARD_SURFACE_SPEC のキーから解決する（component 側の Surface props と同源）。
+ */
+export function resolveSkeletonVariants(theme: NativeTheme, mode: ThemeMode): SkeletonVariantStyles {
+  const sem = theme.color.semantic[mode];
+  const bar = sem["border-default"];
+  return {
+    text: {
+      style: {
+        height: SKELETON_METRICS.textBarHeight,
+        borderRadius: theme.radius.sm,
+        backgroundColor: bar,
+        gap: theme.spacing["2"],
+      },
+    },
+    circle: {
+      style: {
+        width: SKELETON_METRICS.circleSize,
+        height: SKELETON_METRICS.circleSize,
+        borderRadius: theme.radius.full,
+        backgroundColor: bar,
+      },
+    },
+    card: {
+      style: {
+        backgroundColor: sem[CARD_SURFACE_SPEC.bg],
+        borderRadius: theme.radius[CARD_SURFACE_SPEC.radius],
+        borderWidth: 1,
+        borderColor: bar,
+        padding: theme.spacing[CARD_SURFACE_SPEC.padding],
+        elevation: theme.elevation[CARD_SURFACE_SPEC.elevation],
+      },
+      barStyle: {
+        height: SKELETON_METRICS.cardBarHeight,
+        borderRadius: theme.radius.sm,
+        backgroundColor: bar,
+      },
+    },
+  };
+}
+
+/** states ごとの slot 構成（recipe の states.*.style / animation と 1:1）。 */
+export interface SkeletonStateStyles {
+  loading: {
+    /** dim 側の見た目（pulse の下限） */
+    style: { opacity: number };
+    /** pulse アニメーション仕様（duration は motion token 由来の ms 数値） */
+    animation: { opacityFrom: number; opacityTo: number; duration: number };
+  };
+  /** loaded は Skeleton 自体をアンマウント（style 差分なし） */
+  loaded: { style: Record<string, never> };
+}
+
+/**
+ * states → 値解決。loading の pulse は opacity from↔to を motion.duration.slow で loop
+ * （reduce-motion ON 時の完全停止は component 側の責務）。
+ */
+export function resolveSkeletonStates(theme: NativeTheme): SkeletonStateStyles {
+  return {
+    loading: {
+      style: { opacity: PULSE_OPACITY.to },
+      animation: {
+        opacityFrom: PULSE_OPACITY.from,
+        opacityTo: PULSE_OPACITY.to,
+        duration: theme.motion.duration.slow,
+      },
+    },
+    loaded: { style: {} },
+  };
+}

package/src/components/surface.styles.ts

@@ -0,0 +1,50 @@
+/**
+ * surface.styles — Surface の pure style resolver（styleRefs conformance 対応で Surface.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/surface.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/surface-conformance.test.ts が行う。
+ */
+
+import type {
+  ElevationKey,
+  ElevationStyle,
+  NativeTheme,
+  RadiusKey,
+  SemanticColors,
+  SpacingKey,
+  ThemeMode,
+} from "../theme";
+
+/** Surface の見た目 props（すべて token キー限定。デフォルトは recipe default variant と 1:1）。 */
+export interface SurfaceStyleProps {
+  bg?: keyof SemanticColors;
+  radius?: RadiusKey;
+  elevation?: ElevationKey;
+  padding?: SpacingKey;
+}
+
+/**
+ * props → 最終 style 値の解決。
+ * base（背景・角丸・padding）と elevation（iOS shadow* + Android elevation の複合値）を
+ * 分けて返し、呼び出し側が [base, elevation, style] の順で合成する（従来の適用順を維持）。
+ * デフォルト（bg=bg-surface / radius=lg / elevation=none、padding は無し）は
+ * recipe（surface.recipe.json）の default variant と一致させている。
+ */
+export function resolveSurfaceStyle(
+  theme: NativeTheme,
+  mode: ThemeMode,
+  { bg = "bg-surface", radius = "lg", elevation = "none", padding }: SurfaceStyleProps = {},
+): {
+  base: { backgroundColor: string; borderRadius: number; padding?: number };
+  elevation: ElevationStyle;
+} {
+  return {
+    base: {
+      backgroundColor: theme.color.semantic[mode][bg],
+      borderRadius: theme.radius[radius],
+      ...(padding != null ? { padding: theme.spacing[padding] } : null),
+    },
+    elevation: theme.elevation[elevation],
+  };
+}

package/src/components/textfield.styles.ts

@@ -0,0 +1,135 @@
+/**
+ * textfield.styles — TextField の pure style resolver（styleRefs conformance 対応で TextField.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/textfield.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/textfield-conformance.test.ts が行う。
+ *
+ * - variant は入力の検証状態（default/error/success/disabled = 契約の variant 語彙）。
+ *   disabled は component 側で prop disabled=true から上書きされる（TextField.tsx 参照）。
+ * - label/helperText/errorText は variant 非依存の共通部（recipe は default にのみ載せる規約、
+ *   実装は全 variant で同じものを返す）。
+ * - status 色（error の bg / errorText の文字色）は mode で subtle-light/dark・text-light/dark を
+ *   切り替える（semantic 色を semantic[mode] で引くのと同じ規約。recipe は light 側を encode）。
+ * - focus は state 差分（borderColor のみ）。resolveTextFieldFocusStyle で別関数にし、
+ *   conformance が recipe states.focus と照合する。
+ */
+
+import type {
+  NativeTheme,
+  ThemeMode,
+  FontSizeKey,
+  FontWeightValue,
+  SpacingKey,
+} from "../theme";
+
+/** 検証状態（textfield.contract の variant 語彙と 1:1）。 */
+export type TextFieldVariant = "default" | "error" | "success" | "disabled";
+export type TextFieldSize = "small" | "medium" | "large";
+
+/**
+ * size → height / 横 padding / 入力文字 fontSize（textfield.recipe sizes と整合）。
+ * height の literal は recipe の値を直書きし、conformance で recipe と照合する。
+ */
+export const TEXTFIELD_SIZE_SPEC: Record<
+  TextFieldSize,
+  { height: number; px: SpacingKey; font: FontSizeKey }
+> = {
+  small: { height: 36, px: "3", font: "sm" },
+  medium: { height: 42, px: "3", font: "base" },
+  large: { height: 48, px: "3", font: "lg" },
+};
+
+/** resolver の出力（label → input → helperText / errorText の縦構成の各パート）。 */
+export interface TextFieldResolvedStyle {
+  input: {
+    height: number;
+    paddingHorizontal: number;
+    fontSize: number;
+    borderWidth: number;
+    borderColor: string;
+    backgroundColor: string;
+    borderRadius: number;
+    /** 入力文字色。recipe description の「disabled のテキスト色は text-muted」を担う。 */
+    color: string;
+  };
+  label: {
+    fontSize: number;
+    fontWeight: FontWeightValue;
+    color: string;
+    marginBottom: number;
+  };
+  helperText: { fontSize: number; color: string; marginTop: number };
+  errorText: { fontSize: number; color: string; marginTop: number };
+}
+
+/**
+ * variant / size → 最終 style 値の解決（textfield.recipe styleRefs の 1:1 写像）。
+ * デフォルト（variant=default / size=medium）は component の prop デフォルトと一致させている。
+ */
+export function resolveTextFieldStyle(
+  theme: NativeTheme,
+  mode: ThemeMode,
+  {
+    variant = "default",
+    size = "medium",
+  }: { variant?: TextFieldVariant; size?: TextFieldSize } = {},
+): TextFieldResolvedStyle {
+  const c = theme.color;
+  const sem = c.semantic[mode];
+  const spec = TEXTFIELD_SIZE_SPEC[size];
+
+  // variant → border / bg（recipe variants.*.inputStyle の写像）
+  const colors = (() => {
+    switch (variant) {
+      case "default":
+        return { borderColor: sem["input-border"], backgroundColor: sem["input-bg"] };
+      case "error":
+        return {
+          borderColor: c.status.danger.base,
+          backgroundColor:
+            mode === "light" ? c.status.danger.subtleLight : c.status.danger.subtleDark,
+        };
+      case "success":
+        return { borderColor: c.status.success.base, backgroundColor: sem["input-bg"] };
+      case "disabled":
+        return { borderColor: sem["border-default"], backgroundColor: sem["bg-page-alt"] };
+    }
+  })();
+
+  return {
+    input: {
+      height: spec.height,
+      paddingHorizontal: theme.spacing[spec.px],
+      fontSize: theme.typography.fontSize[spec.font].fontSize,
+      borderWidth: 1,
+      borderRadius: theme.radius.md,
+      color: variant === "disabled" ? sem["text-muted"] : sem["text-default"],
+      ...colors,
+    },
+    label: {
+      fontSize: theme.typography.fontSize.sm.fontSize,
+      fontWeight: theme.typography.fontWeight.medium,
+      color: sem["text-heading"],
+      marginBottom: theme.spacing["2"],
+    },
+    helperText: {
+      fontSize: theme.typography.fontSize.xs.fontSize,
+      color: sem["text-muted"],
+      marginTop: theme.spacing["1"],
+    },
+    errorText: {
+      fontSize: theme.typography.fontSize.xs.fontSize,
+      color: mode === "light" ? c.status.danger.textLight : c.status.danger.textDark,
+      marginTop: theme.spacing["1"],
+    },
+  };
+}
+
+/**
+ * focus state の inputStyle 差分（recipe states.focus の写像。borderColor のみ —
+ * web の ring は RN 非対応、border 幅を変えるとレイアウトシフトするため色だけ）。
+ */
+export function resolveTextFieldFocusStyle(theme: NativeTheme): { borderColor: string } {
+  return { borderColor: theme.color.primary["500"] };
+}

package/src/components/toast.styles.ts

@@ -0,0 +1,115 @@
+/**
+ * toast.styles — Toast の pure style resolver（styleRefs conformance 対応で Toast.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/toast.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/toast-conformance.test.ts が行う。
+ *
+ * - Alert と同系の bg subtle + text 色に elevation.sm を重ねる（浮いている通知、recipe description）。
+ *   elevation は iOS shadow* + Android elevation の複合 token のため containerStyle と分けて返し、
+ *   呼び出し側が [containerStyle, elevation, style] の順で合成する（Surface と同じ扱い）。
+ * - dark mode は status.*.subtleDark / textDark 側を解決する。info variant のみ primary 固定
+ *   （dark token が無い既知の割り切り、alert と同じ）。
+ */
+
+import type {
+  ElevationKey,
+  ElevationStyle,
+  FontSizeKey,
+  FontWeightKey,
+  FontWeightValue,
+  NativeTheme,
+  RadiusKey,
+  SpacingKey,
+  ThemeMode,
+} from "../theme";
+
+export type ToastVariant = "success" | "error" | "warning" | "info";
+
+/**
+ * 構成キー（token キー）。component は Text にこのキーをそのまま渡し、resolver は同じキーから
+ * style 値を解決する（component と resolver が別々のキーを持って drift する事故を防ぐ SSOT）。
+ */
+export const TOAST_SPEC = {
+  padding: "4",
+  gap: "3",
+  radius: "md",
+  elevation: "sm",
+  messageFont: "sm",
+  messageWeight: "medium",
+} as const satisfies {
+  padding: SpacingKey;
+  gap: SpacingKey;
+  radius: RadiusKey;
+  elevation: ElevationKey;
+  messageFont: FontSizeKey;
+  messageWeight: FontWeightKey;
+};
+
+/**
+ * slot 構成（toast.recipe 各 variant の containerStyle / messageStyle と 1:1。
+ * containerStyle 内の elevation 参照だけは複合 token のため別 slot に分離して返す）。
+ */
+export interface ToastStyles {
+  containerStyle: {
+    backgroundColor: string;
+    borderRadius: number;
+    padding: number;
+    flexDirection: "row";
+    alignItems: "center";
+    gap: number;
+  };
+  /** iOS shadow* + Android elevation の複合値。container へ spread する。 */
+  elevation: ElevationStyle;
+  /** compose する Text primitive（message）へ渡す値の解決結果 */
+  messageStyle: {
+    color: string;
+    fontSize: number;
+    fontWeight: FontWeightValue;
+  };
+}
+
+/**
+ * variant → bg / text 色の解決。
+ * - info: primary.50 / primary.800 固定（mode 非依存）。
+ * - success / error / warning: status token（error は status キー上は danger）。
+ *   light は subtleLight / textLight、dark は subtleDark / textDark（recipe description の写像）。
+ */
+export function resolveToastColors(
+  theme: NativeTheme,
+  mode: ThemeMode,
+  variant: ToastVariant,
+): { bg: string; text: string } {
+  if (variant === "info") {
+    return { bg: theme.color.primary["50"], text: theme.color.primary["800"] };
+  }
+  const status = theme.color.status[variant === "error" ? "danger" : variant];
+  return mode === "dark"
+    ? { bg: status.subtleDark, text: status.textDark }
+    : { bg: status.subtleLight, text: status.textLight };
+}
+
+/** variant → 全 slot の style 解決（toast.recipe styleRefs の 1:1 写像）。 */
+export function resolveToastStyles(
+  theme: NativeTheme,
+  mode: ThemeMode,
+  variant: ToastVariant,
+): ToastStyles {
+  const { bg, text } = resolveToastColors(theme, mode, variant);
+  return {
+    containerStyle: {
+      backgroundColor: bg,
+      borderRadius: theme.radius[TOAST_SPEC.radius],
+      padding: theme.spacing[TOAST_SPEC.padding],
+      flexDirection: "row",
+      alignItems: "center",
+      gap: theme.spacing[TOAST_SPEC.gap],
+    },
+    elevation: theme.elevation[TOAST_SPEC.elevation],
+    messageStyle: {
+      color: text,
+      fontSize: theme.typography.fontSize[TOAST_SPEC.messageFont].fontSize,
+      fontWeight: theme.typography.fontWeight[TOAST_SPEC.messageWeight],
+    },
+  };
+}

package/src/components/toggle.styles.ts

@@ -0,0 +1,73 @@
+/**
+ * toggle.styles — Toggle の pure style resolver（styleRefs conformance 対応で Toggle.tsx から分離）。
+ *
+ * react-native を import しない純粋モジュールにすることで node テスト（tsx --test）から
+ * 直接実行できる。recipes/app/toggle.recipe.json（melta-contracts の styleRefs）との
+ * 機械照合は scripts/lib/toggle-conformance.test.ts が行う。
+ *
+ * - variant = variantModeledStates（off/on）。component 側で value:boolean から暗黙決定する。
+ * - track の寸法・thumbOffset の literal は recipe の値を直書きし、conformance で照合する。
+ *   thumb 位置は track に padding=thumbOffset を持たせ、component 側が justifyContent
+ *   flex-start / flex-end で寄せる（recipe description の「on 時は右端へ」の RN 表現）。
+ * - disabled は state 差分（opacity）。TOGGLE_DISABLED_OPACITY を component が適用し、
+ *   conformance が recipe states.disabled と照合する。
+ */
+
+import type { NativeTheme, ThemeMode } from "../theme";
+
+/** ON/OFF（toggle.contract の variantModeledStates と 1:1）。 */
+export type ToggleVariant = "off" | "on";
+export type ToggleSize = "medium" | "large";
+
+/**
+ * size → track / thumb 寸法（toggle.recipe sizes と整合）。
+ * literal は recipe の値を直書きし、conformance で recipe と照合する。
+ */
+export const TOGGLE_SIZE_SPEC: Record<
+  ToggleSize,
+  { trackWidth: number; trackHeight: number; thumbSize: number; thumbOffset: number }
+> = {
+  medium: { trackWidth: 44, trackHeight: 24, thumbSize: 20, thumbOffset: 2 },
+  large: { trackWidth: 56, trackHeight: 28, thumbSize: 24, thumbOffset: 2 },
+};
+
+/** disabled state の opacity（recipe states.disabled.style.opacity と照合）。 */
+export const TOGGLE_DISABLED_OPACITY = 0.5;
+
+/**
+ * variant / size → track + thumb の最終 style 値の解決（toggle.recipe styleRefs の 1:1 写像）。
+ * track.padding = thumbOffset（thumb を track 内で浮かせる余白）。
+ */
+export function resolveToggleStyle(
+  theme: NativeTheme,
+  mode: ThemeMode,
+  { variant, size = "medium" }: { variant: ToggleVariant; size?: ToggleSize },
+): {
+  track: {
+    width: number;
+    height: number;
+    backgroundColor: string;
+    borderRadius: number;
+    padding: number;
+  };
+  thumb: { width: number; height: number; backgroundColor: string; borderRadius: number };
+} {
+  const c = theme.color;
+  const sem = c.semantic[mode];
+  const spec = TOGGLE_SIZE_SPEC[size];
+  return {
+    track: {
+      width: spec.trackWidth,
+      height: spec.trackHeight,
+      backgroundColor: variant === "on" ? c.primary["500"] : sem["border-strong"],
+      borderRadius: theme.radius.full,
+      padding: spec.thumbOffset,
+    },
+    thumb: {
+      width: spec.thumbSize,
+      height: spec.thumbSize,
+      backgroundColor: sem["bg-surface"],
+      borderRadius: theme.radius.full,
+    },
+  };
+}