melta-app 0.5.1 → 0.5.2

package/README.md

@@ -36,7 +36,7 @@ export default function App() {
 }
 ```
 
-テーマは `ThemeProvider` が OS の light / dark に自動追従（`forcedMode` で固定も可）。トークンは `useTheme()` / `nativeTheme` から取れる。Icon だけは subpath（[後述](#icon-だけ-subpath-エントリmelta-appicons)）。
+テーマは `ThemeProvider` が OS の light / dark に自動追従（`forcedMode` で固定も可）。トークンは `useTheme()` / `nativeTheme` から取れる。本体エントリ以外は subpath 3 つ（[Icon](#subpath-エントリ-iconmelta-appicons) / [SafeArea 差替](#safearea-の差し替えmelta-appsafe-area) / [lint plugin](#lint-pluginmelta-appeslint-plugin)）。
 
 ### ブランドテーマを注入する
 
@@ -221,9 +221,10 @@ npm run ios   # または android / web
 | tooltip | — | 🚫 not-planned | — | hover 前提のため。iPhone HIG に tooltip 概念なし。必要になれば長押し Hint として別契約を切る |
 <!-- END GENERATED: component-status -->
 
-### Icon だけ subpath エントリ（`melta-app/icons`）
+### subpath エントリ: Icon（`melta-app/icons`）
 
-Icon は唯一 `react-native-svg`（optional peerDependency）に依存するため、本体エントリから分離している。
+subpath は Icon / SafeArea 差替（`melta-app/safe-area`）/ lint plugin（`melta-app/eslint-plugin`）の 3 つ。
+このうち Icon は唯一 `react-native-svg`（optional peerDependency）に依存するため、本体エントリから分離している。
 本体 `melta-app` は依存ゼロのまま — Icon を使うアプリだけが以下を行う:
 
 ```bash
@@ -272,18 +273,46 @@ enableSafeAreaContext({ edges: ["top"] });
 - safe-area と合成する padding は**数値のみ**サポート（`"5%"` 等の非数値は基底として扱えず、
   対象 edge は inset 値に置き換わる）。RTL / `paddingStart`・`paddingEnd` は対応済み
 
+### lint plugin（`melta-app/eslint-plugin`）
+
+melta 契約からの逸脱を機械検知する eslint カスタムルール 4 本を同梱している。
+消費者プロジェクトの flat config に組み込むと、生値の直書きが lint で止まる:
+
+```js
+// eslint.config.mjs
+import { meltaPlugin } from "melta-app/eslint-plugin";
+
+export default [
+  {
+    plugins: { melta: meltaPlugin },
+    rules: {
+      "melta/no-raw-color": "error",    // 生 hex/rgb/hsl → theme.color.*
+      "melta/no-raw-radius": "error",   // borderRadius 数値直書き → theme.radius.*
+      "melta/no-raw-spacing": "warn",   // padding/margin/gap 数値直書き（false positive あり）
+      "melta/no-raw-fontsize": "warn",  // fontSize 数値直書き
+    },
+  },
+];
+```
+
+- 依存ゼロの自己完結 ESM（eslint 本体以外に何も要らない）。ESLint 9+ の flat config を想定（このリポでは 10.x で検証）
+- `meltaPlugin` は **named export のみ**（default export なし）
+- 検知は AST の構文形状ベースの補助線。変数経由・spread は漏れるので、値の純度の本丸は
+  token 経由（`theme.*`）で書く習慣の側にある
+
 ## ステータス
 
 - ✅ ライブラリ化（root=ライブラリ / example=カタログアプリ、peerDeps react + react-native、runtime deps ゼロ）
 - ✅ `melta-contracts` を npm 依存として購読（recipes/app の styleRefs 同梱）
 - ✅ conformance: 契約源 ↔ 生成メタ ↔ `__contract` 宣言の照合 + consumer テスト（契約 subset / token 実在 / contractVersion 同期）+ styleRefs conformance（全実装コンポーネント展開済み）+ RN mount smoke（light/dark × 全公開コンポーネント）
-- ✅ ハーネス: design lint（CI `--max-warnings 0` + PostToolUse hook）/ drift 検査（README・catalog・allowlist 突合）/ installability ゲート（pack → install → import → typecheck）
+- ✅ ハーネス: design lint（CI `--max-warnings 0` + PostToolUse hook）/ drift 検査（README・catalog・allowlist 突合）/ installability ゲート（pack → tarball 実体検査 → fixture へ install → 本体 / icons / safe-area の import + typecheck → eslint plugin を実 import してルール 4 本の実在を照合 → exports の解決先確認。`npm run release` チェーンの必須ステップ）
 - ✅ layout 6 個（Stack / Row / Screen / Header / Icon / Avatar）— dogfood 不足 1〜4 を解消、ProjectFeedScreen は公開 primitive だけで構成
   - Screen の SafeArea は adapter registry 化済み: default は RN core SafeAreaView（依存ゼロ維持）、`melta-app/safe-area` の `enableSafeAreaContext()` で react-native-safe-area-context に差し替え可（optional peer）
 - ✅ form / feedback 10 個（TextField / Toggle / Checkbox / Radio / Alert / Toast / Progress / Modal / ActionSheet / BottomSheet）— checkbox / radio は Pressable + 描画（svg 非依存）、ActionSheet / BottomSheet は select / dropdown の adapted 変換先の受け皿
 - ✅ showcase（https://app.melta.tsubotax.com — melta-ui 様式シェル + 実 RN カタログの Live 埋め込み。表・統計は契約からビルド時生成）
 - ✅ AI 入口: [llms.txt](https://app.melta.tsubotax.com/llms.txt)（契約から生成・drift 検査対象）+ [docs/patterns.md](docs/patterns.md)（フォームの組み方規範。スニペットは実コードと機械同期）
-- ✅ [npm publish（0.1.0）](https://www.npmjs.com/package/melta-app)
+- ✅ lint 強制層の npm 配布（0.5.2）: `melta-app/eslint-plugin` を公開 subpath 化。消費者プロジェクトの flat config に組めば、生値の直書きが消費者側でも lint で止まる
+- ✅ [npm publish（0.5.2）](https://www.npmjs.com/package/melta-app)
 - ⬜ React Native Directory 登録（[PR #2606](https://github.com/react-native-community/directory/pull/2606) レビュー待ち）
 
 詳細は D2I リポの `.team/specs/requirements-melta-app.md`。

package/docs/patterns.md

@@ -261,3 +261,5 @@ form ライブラリを DS として強制しない。素の React で必要十
 | disabled-until-valid の常用 | 「なぜ押せないか」を伝えられない。常時活性 + submit 時全量検証 + サマリー Alert |
 | placeholder をラベル代わりにする | 入力を始めた瞬間に文脈が消える。placeholder は例示専用 |
 | 生値スタイル（hex / 数値 spacing 直書き） | lint（--max-warnings 0）が落とす。`theme.color.*` / `theme.spacing[*]` 経由のみ |
+
+※ この lint はこのリポジトリ専用ではない。消費者プロジェクトでも `melta-app/eslint-plugin` を flat config に組めば（`plugins: { melta: meltaPlugin }` + `melta/no-raw-color` 等）、同じルールが同じように効く。設定は README の「lint plugin」節を参照。

package/eslint-rules/melta.mjs

@@ -0,0 +1,98 @@
+/**
+ * melta design lint ルール（設計書 §5、D-1）。
+ *
+ * RN で機械検知できる raw 値の 4 類型のみを対象とする補助線（AST 検知は変数経由/spread で漏れるので
+ * 純度の本丸は A-3 conformance）。token 経由（theme.* の MemberExpression）は許可、生値を弾く。
+ *
+ * - no-raw-color   : hex/rgb/hsl の文字列リテラル → error
+ * - no-raw-radius  : borderRadius 系プロパティに数値リテラル直書き → error
+ * - no-raw-spacing : padding/margin/gap 系に数値リテラル直書き → warn（false positive 多）
+ * - no-raw-fontsize: fontSize に数値リテラル直書き → warn
+ */
+
+const COLOR_RE = /#[0-9a-fA-F]{3,8}\b|\brgba?\s*\(|\bhsla?\s*\(/;
+// RN の特殊カラーキーワードは token 化対象外として許可する（subtle variant の背景透明など）。
+const SAFE_COLORS = new Set(["transparent", "currentColor", "inherit", "none"]);
+
+/** Property の key 名を取る（Identifier / 文字列 Literal の両対応）。 */
+function keyName(node) {
+  if (!node.key) return null;
+  if (node.key.type === "Identifier") return node.key.name;
+  if (node.key.type === "Literal" && typeof node.key.value === "string") return node.key.value;
+  return null;
+}
+
+/** value が数値リテラル直書きか（負数 UnaryExpression も拾う）。token 由来の MemberExpression は false。 */
+function isRawNumber(value) {
+  if (!value) return false;
+  if (value.type === "Literal" && typeof value.value === "number") return true;
+  if (value.type === "UnaryExpression" && value.operator === "-") return isRawNumber(value.argument);
+  return false;
+}
+
+const isRadiusKey = (k) => typeof k === "string" && /^border([A-Za-z]*)Radius$/.test(k);
+const isSpacingKey = (k) =>
+  typeof k === "string" &&
+  (/^(padding|margin)([A-Za-z]*)?$/.test(k) || k === "gap" || k === "rowGap" || k === "columnGap");
+
+export const meltaPlugin = {
+  rules: {
+    "no-raw-color": {
+      meta: { type: "problem", docs: { description: "色は theme.color.* を使う（生 hex/rgb/hsl 禁止）" } },
+      create(context) {
+        const check = (node, text) => {
+          if (typeof text === "string" && !SAFE_COLORS.has(text) && COLOR_RE.test(text)) {
+            context.report({ node, message: `生の色 "${text}" は禁止。theme.color.* を使う。` });
+          }
+        };
+        return {
+          Literal(node) {
+            check(node, node.value);
+          },
+          // テンプレートリテラル内の生色も拾う（`#fff` や `rgb(...)` を quasi に直書きするケース）。
+          TemplateLiteral(node) {
+            for (const quasi of node.quasis) {
+              check(quasi, quasi.value.cooked);
+            }
+          },
+        };
+      },
+    },
+    "no-raw-radius": {
+      meta: { type: "problem", docs: { description: "borderRadius は theme.radius.* を使う" } },
+      create(context) {
+        return {
+          Property(node) {
+            if (isRadiusKey(keyName(node)) && isRawNumber(node.value)) {
+              context.report({ node, message: "borderRadius の生数値は禁止。theme.radius.* を使う。" });
+            }
+          },
+        };
+      },
+    },
+    "no-raw-spacing": {
+      meta: { type: "suggestion", docs: { description: "padding/margin/gap は theme.spacing.* を使う" } },
+      create(context) {
+        return {
+          Property(node) {
+            if (isSpacingKey(keyName(node)) && isRawNumber(node.value)) {
+              context.report({ node, message: "spacing の生数値は theme.spacing.* 推奨。" });
+            }
+          },
+        };
+      },
+    },
+    "no-raw-fontsize": {
+      meta: { type: "suggestion", docs: { description: "fontSize は theme.typography.fontSize.* を使う" } },
+      create(context) {
+        return {
+          Property(node) {
+            if (keyName(node) === "fontSize" && isRawNumber(node.value)) {
+              context.report({ node, message: "fontSize の生数値は theme.typography.fontSize.* 推奨。" });
+            }
+          },
+        };
+      },
+    },
+  },
+};

package/llms.txt

@@ -58,5 +58,5 @@ UI を組む前に docs/patterns.md（組み方の規範）を読むこと。exa
 ## Optional
 
 - [melta-ui llms.txt](https://melta.tsubotax.com/llms.txt): web 版デザインシステムの AI 入口（デザイン言語の一次資料）
-- [npm](https://www.npmjs.com/package/melta-app): パッケージ（Icon は melta-app/icons、SafeArea 差替は melta-app/safe-area サブパス）
+- [npm](https://www.npmjs.com/package/melta-app): パッケージ（サブパスは Icon = melta-app/icons、SafeArea 差替 = melta-app/safe-area、lint 強制層 = melta-app/eslint-plugin の 3 つ）
 - [THIRD_PARTY_LICENSES.md](https://github.com/tsubotax/melta-app/blob/main/THIRD_PARTY_LICENSES.md): Icon グリフの帰属表示

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melta-app",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "melta for APP — melta デザインシステムの React Native UI kit。melta-contracts（デザイン契約）を single source of truth に RN 実装でその契約を満たす。アプリ本体ではなくライブラリ。",
   "license": "MIT",
   "homepage": "https://app.melta.tsubotax.com",
@@ -37,12 +37,15 @@
       "import": "./lib/module/safe-area/index.js",
       "default": "./lib/module/safe-area/index.js"
     },
+    "./eslint-plugin": "./eslint-rules/melta.mjs",
+    "./eslint-rules/melta.mjs": "./eslint-rules/melta.mjs",
     "./package.json": "./package.json"
   },
   "files": [
     "lib",
     "src",
     "!src/**/*.test.*",
+    "eslint-rules",
     "llms.txt",
     "docs",
     "THIRD_PARTY_LICENSES.md"
@@ -104,7 +107,7 @@
     "check:drift": "tsx scripts/check-drift.ts",
     "check:installability": "bash scripts/check-installability.sh",
     "check:build-fresh": "tsx scripts/check-build-fresh.ts",
-    "release": "npm run build && npm run typecheck && npm run lint && npm test && npm run test:rn && npm run check:drift && npm run check:build-fresh && npm publish",
+    "release": "npm run build && npm run typecheck && npm run lint && npm test && npm run test:rn && npm run check:drift && npm run check:build-fresh && npm run check:installability && npm publish",
     "build:llms": "tsx scripts/build-llms-txt.ts"
   },
   "jest": {