@insession/design-system 1.3.1 → 1.4.1

package/package.json

@@ -1,27 +1,34 @@
 {
   "name": "@insession/design-system",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "description": "InSession / loophub 共通のデザインシステム。純粋 leaf UI プリミティブ + デザイントークン（アプリ依存なし。i18n 等は props で注入する）",
-  "license": "UNLICENSED",
+  "license": "MIT",
   "type": "module",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/insession-space/design-system.git"
   },
-  "//": "ビルド成果物(dist)を配布する。theme.css はパッケージ直下に置いたまま ./theme.css として公開する(tsup は CSS を処理しないため)。react はホストと同一インスタンスを使うため peerDependency。",
+  "//": "ビルド成果物(dist)を配布する。CSS はパッケージ直下に置いたまま公開する(tsup は CSS を処理しないため)。react はホストと同一インスタンスを使うため peerDependency。",
+  "//exports": "CSS の入口は3つ。./styles.css が既定(トークン + 部品 CSS + このパッケージが使うユーティリティを全部含むプリビルド。消費側に Tailwind は不要)。./theme.css はトークンだけ(消費側が Tailwind で自分のマークアップに DS トークンを使いたい場合の @theme 統合用)。./components.css は部品 CSS だけ(Tailwind + @source 方式を続ける消費側が、ユーティリティで表現できない部品 CSS だけを足すため)。",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./theme.css": "./theme.css"
+    "./styles.css": "./dist/styles.css",
+    "./theme.css": "./theme.css",
+    "./base.css": "./base.css",
+    "./components.css": "./components.css"
   },
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
     "theme.css",
-    "CHANGELOG.md"
+    "base.css",
+    "components.css",
+    "CHANGELOG.md",
+    "LICENSE"
   ],
   "sideEffects": [
     "*.css"
@@ -31,6 +38,7 @@
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
+  "//scripts": "build は js/d.ts(tsup) と配布 CSS(Tailwind CLI) の2本立て。build:css は minify しない — dist を @source で走査する従来方式の消費側がまだ居るため、クラス名の文字列リテラルを壊さない。check:styles は「DOM に出るのに CSS が無い」欠損を検出する回帰ネット。",
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -41,6 +49,7 @@
     "@fontsource/jetbrains-mono": "^5.2.8",
     "@storybook/addon-docs": "^10.5.0",
     "@storybook/react-vite": "^10.5.0",
+    "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/vite": "^4.3.2",
     "@types/node": "^22.10.0",
     "@types/react": "^19.2.0",
@@ -57,12 +66,15 @@
     "node": ">=22.18"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "pnpm build:js && pnpm build:css",
+    "build:js": "tsup",
+    "build:css": "tailwindcss -i styles.src.css -o dist/styles.css",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "check": "biome check .",
+    "check:styles": "node scripts/check-styles.mjs",
     "format": "biome format --write .",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build -o storybook-static",
+    "storybook": "pnpm build:css && storybook dev -p 6006",
+    "build-storybook": "pnpm build:css && storybook build -o storybook-static",
     "changeset": "changeset",
     "changeset:version": "changeset version"
   }

package/theme.css

@@ -6,13 +6,22 @@
  * ── 消費側アプリのセットアップ ──────────────────────────────
  *   @import "tailwindcss";
  *   @import "@insession/design-system/theme.css";
- *   @source "../../node_modules/@insession/design-system/dist";
+ *   @source "../node_modules/@insession/design-system/dist";
  *
  * ⚠ `@source` は必須。これが無いとコンポーネント内のクラス名から Tailwind
- * ユーティリティが生成されず、**ビルドは通るのにスタイルだけが静かに消える**。
- * パスは各アプリの style.css から node_modules への相対パスに合わせること。
- * pnpm では node_modules 配下が symlink になるため、初回セットアップ時は
- * 実際にビルドして見た目を目視確認すること。
+ * ユーティリティが生成されず、**ビルドは通るのにスタイルが部分的に欠ける**
+ * （エラーもワーニングも出ない。Vite のモジュールグラフ経由で一部のクラスは
+ * 拾われるので「全崩れ」にならず、一見それらしく描画されるため気づきにくい。
+ * 実測では CSS の約4割が欠けた状態でビルドが緑になった）。
+ *
+ * ⚠ pnpm workspace では **リポジトリルートの node_modules を指してはいけない**。
+ * pnpm は依存をそれを宣言したパッケージ自身の node_modules にリンクし、ルートには
+ * 置かない。apps/<app>/src/style.css からの正しいパスは `../node_modules/...`
+ * （= apps/<app>/node_modules/...）で、ルートを指すと空振りする。
+ *
+ * ⚠ CI でビルド成果物を検査すること。生成CSSに DS 由来のユーティリティ
+ * （アプリのソースには書かれていないもの。例 bg-accent / rounded-card）が
+ * 入っているかを確かめれば機械的に防げる。
  *
  * ── ライトテーマについて ────────────────────────────────
  * このファイルはダーク単一トーンで、[data-theme] のライトテーマオーバーレイを含まない。
@@ -202,6 +211,9 @@
   --radius-card: 16px;
   --radius-panel: 16px;
   --radius-pill: 999px;
+  /* ボトムシート上端の角丸。BottomSheet の .bottom-sheet が参照する(components.css)。
+     insession-app 側の同名トークンと値を揃えて保守する。 */
+  --radius-sheet: 22px;
 
   /* グロー(旧 #457 ブランドの hover 発光)は新 DS で廃止(#463)。新 DS の hover は「ふわっと光る」
      ではなく surface-hover への面変化 / filled は brightness(.93) / カード等は translateY(-2px) の