ksk-design-system 1.64.0 → 1.65.0

package/README.md

@@ -308,6 +308,9 @@ DS を import して委譲するだけの薄いラッパー（段階移行の型
 <!-- docs-drift-ignore: PrimaryButton AppTextInput BottomSheet CandidateOverflowMenu CrisisBanner AvatarView -->
 さらに、`contracts/components.json` と完全一致しない名前でも、DS 部品を連想させる命名パターン（`PrimaryButton` → `Button` / `AppTextInput` → `Input` / `BottomSheet` → `Sheet` / `CandidateOverflowMenu` → `DropdownMenu` / `CrisisBanner` → `Banner` / `AvatarView` → `Avatar` 等）は「重複の疑い」として `⚠` 付きで warn 表示されます。これは名前一致のみによる推測（AST は使いません）のため確度は下がり、`--strict` でも exit code には影響しません。誤検知の場合は無視して構いませんが、恒常的に抑制したい場合はそのファイル内のコメントに `ksk-ds-local-fallback` を含めてください。
 
+<!-- docs-drift-ignore: CandidateOverflowMenu -->
+ただし、ファイルが `ksk-design-system`（`/native` 等のサブパス含む）から named import し、その import した識別子を JSX またはコールとして実際に使っている場合は、名前が DS と異なっていても「DS 委譲ラッパー」とみなし疑い検出の対象から除外します（例: `CandidateOverflowMenu` が `DropdownMenu` を import して `<DropdownMenu>` として使うケース）。DS を import しているだけで実際には使っていない場合はこの除外の対象外です。
+
 ### Media overlay utilities
 
 動画・写真の上に文字や操作を置く場合は、`--Text-on-Media` と `.text-on-media` / `.text-on-media-secondary`、上下の `.media-scrim-top` / `.media-scrim-bottom` を使います。TikTok / Reels 型の操作群は `MediaActionCluster` が glass ボタン、ラベル、safe-area anchor、idle auto-hide をまとめて扱います。

package/bin/check-duplicates.js

@@ -174,6 +174,34 @@ function collectDsImportSourceNames(source) {
   return names
 }
 
+// このファイルが ksk-design-system から named import している要素の
+// ローカル名（alias 込み）の集合。DS 委譲ラッパー判定（実使用チェック）に使う。
+function collectDsImportLocalNames(source) {
+  const names = new Set()
+  const importPattern = /import\s*\{([^}]*)\}\s*from\s*["']([^"']+)["']/g
+
+  for (const match of source.matchAll(importPattern)) {
+    const [, specifierList, moduleSpecifier] = match
+    if (!isDsModuleSpecifier(moduleSpecifier)) continue
+    for (const { localName } of parseSpecifierList(specifierList)) {
+      names.add(localName)
+    }
+  }
+
+  return names
+}
+
+// import した DS のローカル名が、JSX（`<Name`）または関数呼び出し（`Name(`）として
+// 実際に使われているか。import しているだけで使っていないケース（不要 import 等）は
+// 「実際に委譲している」とは言えないため対象外にする。
+function usesAnyIdentifierAsJsxOrCall(source, localNames) {
+  for (const localName of localNames) {
+    const usagePattern = new RegExp(`<${localName}[\\s/>]|\\b${localName}\\s*\\(`)
+    if (usagePattern.test(source)) return true
+  }
+  return false
+}
+
 // `export { X as Y } from 'ksk-design-system/...'` のような re-export 形式。
 // これは常に DS の実装をそのまま右から左へ渡すだけなので、localName が
 // registry と一致する場合は無条件でラッパー（除外対象）として扱う。
@@ -249,7 +277,11 @@ function findDuplicateExports(file, cwd, registry) {
 
   const codeForImportScan = stripComments(source)
   const dsImportSourceNames = collectDsImportSourceNames(codeForImportScan)
+  const dsImportLocalNames = collectDsImportLocalNames(codeForImportScan)
   const dsReExportLocalNames = collectDsReExports(codeForImportScan)
+  // issue #451: 名前が DS と違っても、DS を import してそれを JSX/関数呼び出しで
+  // 実際に使っていれば「DS 委譲ラッパー」とみなし、名前ヒューリスティックの疑い対象から除外する。
+  const isDsDelegatingWrapper = usesAnyIdentifierAsJsxOrCall(codeForImportScan, dsImportLocalNames)
 
   const declarationPattern =
     /^\s*export\s+(?:default\s+)?(?:(?:async|declare)\s+)?(?:function|const)\s+([A-Z][A-Za-z0-9]*)\b/
@@ -265,6 +297,7 @@ function findDuplicateExports(file, cwd, registry) {
       // DS を import しているファイル（何らかの形で DS を使っている＝別部品のラッパー等）
       // でも疑いは出す。抑制は SUPPRESSION_MARKER コメントのみ。
       if (suppressSuspicions) continue
+      if (isDsDelegatingWrapper) continue
       const suggested = suggestDsNameForLocalName(name)
       if (!suggested) continue
       suspicions.push({

package/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Component Contracts",
-    "version": "1.64.0",
+    "version": "1.65.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
       "ui": 68,
@@ -77,6 +77,7 @@
         "リンクを Button として表示する場合は <Button asChild><a href=... /></Button> を使う",
         "Icon-only buttons require aria-label",
         "Native Button supports loading/loadingLabel and leadingIcon/trailingIcon; do not wrap ActivityIndicator in Text",
+        "Native Button supports spinnerColor to override the loading ActivityIndicator color; default unchanged (falls back to variant fg color, issue #450)",
         "variant=glass は背景がグラデーション/写真の場合のみ使用",
         "variant=glass-inverse は暗い写真・動画・濃色面上の Liquid Glass CTA 専用",
         "variant=inverse / ghost-inverse は暗背景・ヒーローセクション専用",
@@ -103,7 +104,8 @@
         "Must use <Input> not <input>",
         "showCount + maxLength で controlled / uncontrolled / IME 対応の文字数カウンタを表示",
         "showCount 未指定時は wrapper / counter DOM を追加しない",
-        "既存の手書き CSS を持つ画面の段階移行では unstyled を使う（showCount / adornment / IME 追従は維持される）"
+        "既存の手書き CSS を持つ画面の段階移行では unstyled を使う（showCount / adornment / IME 追従は維持される）",
+        "Native Input supports style (outer container View) and inputStyle (inner TextInput) as RN-idiomatic style overrides, merged after DS defaults (issue #447)"
       ]
     },
     {
@@ -344,7 +346,8 @@
       ],
       "rules": [
         "rounded-full only",
-        "Use DiceBear shapes for placeholder, not pravatar.cc"
+        "Use DiceBear shapes for placeholder, not pravatar.cc",
+        "native (src/native/components/Avatar.tsx): size はプリセット(sm/md/lg/xl)に加えて pt の数値も可。shape=\"circle\"(既定)|\"rounded\"、rounded の角丸は radius(lg/xl/2xl・既定 xl)。fallback は文字列に加えて ReactNode を受け、独自のフォールバック表示（決定論グラデ+絵文字等）を差し込める。source はリモート URL 文字列も受け取り {uri} に正規化する（issue #449）"
       ]
     },
     {
@@ -408,7 +411,8 @@
         "autoFocus は first-input / title / ref / false を指定可能",
         "description prop はRadix管理IDの sr-only description を自動生成する",
         "SheetTitle は level=\"page\"|\"section\"|\"card\" で見出しの役割を指定する（値は contracts/composition.json の textHierarchy と1対1）。未指定時は BottomSheetFrame preset=\"mobile-full\"|\"mobile-page\" 配下で page 相当、それ以外は従来の typo-heading-lg",
-        "native (src/native/components/Sheet.tsx): safeArea(既定 true) で side=\"top\" の上端 inset 退避と、画面いっぱいに近い side=\"bottom\" の食い込み分の退避を行う。実測 inset は SafeAreaInsetsProvider から供給し、未供給なら回避量 0（従来どおり）"
+        "native (src/native/components/Sheet.tsx): safeArea(既定 true) で side=\"top\" の上端 inset 退避と、画面いっぱいに近い side=\"bottom\" の食い込み分の退避を行う。実測 inset は SafeAreaInsetsProvider から供給し、未供給なら回避量 0（従来どおり）",
+        "native (src/native/components/Sheet.tsx): surfaceColor でパネル（および snap モードの footer）の面色を上書きできる。未指定なら theme.surface.primary（従来どおり）。scrim の色は変えない（issue #448）"
       ],
       "variants": {
         "titleLevel": [
@@ -1599,7 +1603,8 @@
         "placement: start / end / center",
         "bottomOffset: none / bottom-nav / bottom-nav-pill / bottom-nav-pill-inline",
         "keyboardBehavior: hide / lift / stay",
-        "fullWidth: true / false"
+        "fullWidth: true / false",
+        "bottomOffsetExtra: CSS length（web）/ number pt（native）。bottomOffset プリセット値へ加算する任意の追加オフセット"
       ],
       "accessibility": [
         "label prop is required and used as aria-label"
@@ -1611,7 +1616,8 @@
         "pill BottomTabBar の上に重ねる場合は bottomOffset=bottom-nav-pill、横並びに置く場合は bottomOffset=bottom-nav-pill-inline を使う",
         "keyboard 表示中に入力を邪魔する場合は keyboardBehavior=hide を使う",
         "variant=glass に shadow-* を重ねない（glass-accent が inset 3層 + drop shadow を内包するため二重になる）",
-        "下部固定の全幅 CTA は fullWidth を使い、fixed inset-x + Button を手組みしない。fullWidth 時は placement が無視されラベルが常に表示される"
+        "下部固定の全幅 CTA は fullWidth を使い、fixed inset-x + Button を手組みしない。fullWidth 時は placement が無視されラベルが常に表示される",
+        "広告バナー等で動的に持ち上げる必要があるときは、内部変数 --ksk-fab-bottom-offset を直接上書きせず bottomOffsetExtra を使う（issue #453）"
       ]
     },
     {
@@ -2203,7 +2209,8 @@
       ],
       "rules": [
         "長い SheetContent className recipe を consumer 側に重複させず BottomSheetFrame preset を使う",
-        "フォーム/詳細の中身は DetailSheetScaffold と KeyboardAwareSheetFooter を使う"
+        "フォーム/詳細の中身は DetailSheetScaffold と KeyboardAwareSheetFooter を使う",
+        "native (src/native/components/BottomSheetFrame.tsx): height=\"preset\"(既定・従来の固定高)|\"fitContent\"(min/max を外して内容量に追従)。maxHeight で上限だけ明示できる。safeArea(既定 false) で bottom inset 分の内側余白、handle(既定 false) で上端のつまみを表示（issue #448）"
       ]
     },
     {

package/contracts/rules.json

@@ -70,7 +70,7 @@
       "severity": "error",
       "category": "component",
       "appliesTo": ["dom"],
-      "pattern": "<a href",
+      "pattern": "(?<!(?:asChild|<Slot)[\\s\\S]{0,300})<a href",
       "excludePaths": [".stories."],
       "excludeDsPaths": ["components/ui/", "components/patterns/"],
       "excludeLines": ["data-slot", "asChild"],

package/contracts/token-hex-cache.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Semantic Token Hex Cache",
-    "version": "1.64.0",
+    "version": "1.65.0",
     "description": "semantic / semanticDark トークン（var(--Primitive-*) 参照）を実 hex に解決したサイドカー生成物。hex はデフォルト（Blue）テーマでの解決値であり、Brand 系（meta.themeDependentKeys に列挙）はテーマ差し替え（orange/green/violet 等）で実色が変わる。テーマ別の完全解決値は `ksk-design-system/native` エクスポート（バンドル済み native トークンモジュール）の themes を参照。tokens.json 本体のスキーマは変更せず、AI がこのファイルだけで実色を把握できるようにし、primitive 値の変更による semantic 実色のドリフトを --check で機械検出する。",
     "generatedBy": "scripts/generate-token-hex-cache.mjs",
     "theme": "default",