@qijenchen/design-system 0.1.0-beta.83 → 0.1.0-beta.85

package/src/tokens/motion/motion.stories.tsx

@@ -15,11 +15,15 @@ const meta: Meta = {
     docs: {
       description: {
         component: `
-Motion token 系統。目前唯一 token 家族 = **hover delay 3-tier**(「hover 觸發 → 延遲 N ms → overlay 顯示」)——目的不是動畫長度,是「user 真的想看」過濾器;overlay 開閉的 enter / exit 動畫由 Radix data-state + CSS 處理,系統**無** duration / easing token。
+Motion token 系統。\`--motion-*\` 統一前綴下**兩個 sub-family**(2026-07-11 Phase 1-4 起;原「唯一家族 = hover delay」敘述已過時):
+
+**(A) delay 3-tier**(「hover 觸發 → 延遲 N ms → overlay 顯示」)——目的不是動畫長度,是「user 真的想看」過濾器。
+
+**(B) 進出場動畫**(overlay fade/zoom/slide 的 duration / easing / 幾何)——\`--motion-duration-{overlay,surface}\` + \`--motion-easing-{enter,exit}\` + \`--motion-enter-{distance,scale}\`,由 tw-animate-css 的 \`--tw-duration\` / \`--tw-ease\` 變數綁定;共用 SSOT = \`overlay-motion.ts\`(overlayMotion / surfaceMotion)。
 
 完整規則:\`packages/design-system/src/tokens/motion/motion.spec.md\`
 
-**JS mirror**:Radix props(\`delayDuration\` / \`openDelay\` / \`closeDelay\`)只吃 number 不認 CSS var,故 consumer 消費 \`motion.ts\` 的 \`HOVER_DELAY_PLAIN_MS\` / \`HOVER_DELAY_RICH_MS\` / \`HOVER_DELAY_CLOSE_MS\`(與 \`motion.css\` 同值鏡像)。
+**JS mirror**:Radix props(\`delayDuration\` / \`openDelay\` / \`closeDelay\`)只吃 number 不認 CSS var,故 consumer 消費 \`motion.ts\` 的 \`MOTION_DELAY_PLAIN_MS\` / \`MOTION_DELAY_RICH_MS\` / \`MOTION_DELAY_CLOSE_MS\`(與 \`motion.css\` 同值鏡像)。
         `,
       },
     },
@@ -59,24 +63,73 @@ export const Overview: Story = {
       </p>
 
       <DelayRow
-        token="--hover-delay-plain"
+        token="--motion-delay-plain"
         value="500ms"
         usage="純文字提示——被動 hint,user 真停留才觸發,避免滑過列表時 N 次視覺擾動"
         consumers="Tooltip / OverflowIndicator"
       />
       <DelayRow
-        token="--hover-delay-rich"
+        token="--motion-delay-rich"
         value="700ms"
         usage="內容預覽——含 fetch / multi-section,避免列表掃視誤觸發 fetch waterfall"
         consumers="HoverCard / ProfileCard / Avatar"
       />
       <DelayRow
-        token="--hover-delay-close"
+        token="--motion-delay-close"
         value="200ms"
         usage="通用關閉緩衝——mouse leave 後 200ms 內移回不會關(誤滑出容錯)"
         consumers="所有 hover overlay"
       />
 
+      {/* 2026-07-14 Dim 68 修:補 (B) 進出場動畫 sub-family 展示 — 原頁只列 delay,
+          與 motion.css / motion.spec.md 兩 sub-family 現況 drift(「系統無 duration/easing token」已過時)。
+          世界級對照值 cite:tokens/motion/motion.spec.md#L113-L116 表(m3.material.io/styles/motion/easing-and-duration
+          + carbondesignsystem.com/guidelines/motion/overview,spec frontmatter benchmark 段)。 */}
+      <h2 className="text-h3 mb-2 mt-10">進出場動畫 Tokens</h2>
+      <p className="text-body text-fg-secondary mb-6">
+        Overlay fade/zoom/slide 的 duration / easing / 幾何,由 tw-animate-css 的
+        <code>--tw-duration</code> / <code>--tw-ease</code> 變數綁定;共用 SSOT =
+        <code>overlay-motion.ts</code>(overlayMotion / surfaceMotion)。世界級對照見
+        <code>motion.spec.md</code>「進出場動畫 token」表。
+      </p>
+
+      <DelayRow
+        token="--motion-duration-overlay"
+        value="150ms"
+        usage="輕量浮層進出場(對照表 cite: motion.spec.md#L113)"
+        consumers="Tooltip / Popover / HoverCard / DropdownMenu"
+      />
+      <DelayRow
+        token="--motion-duration-surface"
+        value="250ms"
+        usage="模態面板進出場——面積大、位移遠,慢一階(對照表 cite: motion.spec.md#L114)"
+        consumers="Dialog / Sheet / FileViewer"
+      />
+      <DelayRow
+        token="--motion-easing-enter"
+        value="0,0,0,1"
+        usage="進場減速曲線——快起、平滑落定(對照表 cite: motion.spec.md#L115)"
+        consumers="所有 overlay 進場"
+      />
+      <DelayRow
+        token="--motion-easing-exit"
+        value="0.3,0,1,1"
+        usage="出場加速曲線(對照表 cite: motion.spec.md#L116)"
+        consumers="所有 overlay 出場"
+      />
+      <DelayRow
+        token="--motion-enter-distance"
+        value="0.5rem"
+        usage="slide 進場位移(沿用現行 slide-*-2 幾何,cite: motion.css#L24)"
+        consumers="slide 型進場 overlay"
+      />
+      <DelayRow
+        token="--motion-enter-scale"
+        value="0.95"
+        usage="zoom 進場 scale(沿用現行 zoom-95 幾何,cite: motion.css#L25)"
+        consumers="zoom 型進場 overlay"
+      />
+
       <p className="text-caption text-fg-muted mt-6">
         實際 CSS 值見 <code>packages/design-system/src/tokens/motion/motion.css</code>;
         JS number 鏡像見同目錄 <code>motion.ts</code>;tier 選擇表(何時用哪 token)見 <code>motion.spec.md</code>。

package/src/tokens/motion/motion.ts

@@ -1,17 +1,18 @@
 /**
- * Motion tokens — JS mirror of `motion.css` for Radix/JS API consumers.
+ * Motion tokens — JS mirror of `motion.css` delay tokens for Radix/JS API consumers.
  *
  * Radix primitive props(`delayDuration` / `openDelay` / `closeDelay`)期望 number ms,
- * 不認 CSS var。本 file 是 motion.css 對應 number value 鏡像;改值必同步兩處(或加 lint)。
+ * 不認 CSS var。本 file 是 motion.css `--motion-delay-*` 對應 number value 鏡像;改值必同步兩處。
+ * (進出場動畫 token 為純 CSS 驅動,由 tw-animate-css 消費,不需 JS 鏡像。)
  *
- * SSOT: `motion.css` + `motion.spec.md`。
+ * SSOT: `motion.css` + `motion.spec.md`。命名 2026-07-11 統一 `--motion-delay-*`(原 `--hover-delay-*`)。
  */
 
 /** 純文字提示(Tooltip)— passive hint。2026-05-20 200→500ms 對齊 Material 3 / Apple HIG / shadcn-Radix 主流 */
-export const HOVER_DELAY_PLAIN_MS = 500
+export const MOTION_DELAY_PLAIN_MS = 500
 
 /** 內容預覽(HoverCard / ProfileCard)— rich preview。2026-05-20 300→700ms 避免列表掃視誤觸發 fetch */
-export const HOVER_DELAY_RICH_MS = 700
+export const MOTION_DELAY_RICH_MS = 700
 
 /** 通用關閉延遲(所有 hover overlay)— accidental-hover 容錯 */
-export const HOVER_DELAY_CLOSE_MS = 200
+export const MOTION_DELAY_CLOSE_MS = 200

package/src/tokens/motion/overlay-motion.ts

@@ -0,0 +1,26 @@
+/**
+ * Overlay 進出場動畫 — 共用 duration / easing / reduced-motion SSOT(2026-07-11)。
+ *
+ * 消費 `motion.css` 的 `--motion-*` 動畫 token,經 tw-animate-css 的 `--tw-duration` / `--tw-ease`
+ * 變數綁定 → 7 浮層時長/曲線/無障礙守衛單一 SSOT,改 token 一處傳播全部(M17)。
+ *
+ * 幾何(fade / zoom / slide 距離方向)per-prototype 各自帶:
+ *   - 輕量浮層(Tooltip/Popover/HoverCard/DropdownMenu):fade + zoom-95 + slide-side-2(8px)
+ *   - 模態面板置中(Dialog/FileViewer):fade + zoom-95 + slide-center
+ *   - 邊緣抽屜(Sheet):slide-edge(100%),正當地無 zoom
+ * 本 module 只統一「時長 + 曲線 + reduced-motion」,不管幾何原型(對齊世界級 tier 分層)。
+ *
+ * Easing:進場減速(--motion-easing-enter)/ 出場加速(--motion-easing-exit),由 data-state gate。
+ */
+
+// enter=decelerate / exit=accelerate(對齊 Material standard-decelerate/accelerate 曲線)
+const EASING =
+  'data-[state=open]:[--tw-ease:var(--motion-easing-enter)] data-[state=closed]:[--tw-ease:var(--motion-easing-exit)]'
+// prefers-reduced-motion:關進出場動畫(無障礙,7 浮層統一 → 補齊 FileViewer 原缺口)
+const REDUCE = 'motion-reduce:animate-none'
+
+/** 輕量浮層(Tooltip / Popover / HoverCard / DropdownMenu)— 150ms */
+export const overlayMotion = `[--tw-duration:var(--motion-duration-overlay)] ${EASING} ${REDUCE}`
+
+/** 模態面板(Dialog / Sheet / FileViewer)— 250ms(面積大位移遠,慢一階) */
+export const surfaceMotion = `[--tw-duration:var(--motion-duration-surface)] ${EASING} ${REDUCE}`

package/src/tokens/orphan-tokens.spec.md

@@ -28,7 +28,7 @@ benchmark:
 | **Tailwind `@theme inline` bridge** | `--spacing-field-md` → `h-field-md` class | Tailwind 在 build time 從 bridge 讀值轉 utility class,無 `var()` 語法 |
 | **`@utility` definition** | `@utility tracking-shortcut { letter-spacing: var(--tracking-shortcut) }` | 是定義,不是消費點 |
 | **Class-name match** | `text-primary-text` 對應 `--primary-text` | 走 Tailwind 命名約定 |
-| **JS literal mirror** | `motion.ts` export `HOVER_DELAY_RICH_MS = 700` 鏡像 `--hover-delay-rich` | JS 端 hardcode 數字 + import constant,不讀 CSS var |
+| **JS literal mirror** | `motion.ts` export `MOTION_DELAY_RICH_MS = 700` 鏡像 `--motion-delay-rich` | JS 端 hardcode 數字 + import constant,不讀 CSS var |
 
 **修法**:`scripts/audit-orphan-tokens.mjs` 用 comprehensive consumer detection 涵蓋 5 條消費路徑,真實 orphan count drops from 175 → 0(2026-05-21 baseline)。
 
@@ -92,11 +92,11 @@ benchmark:
 
 ### 8. JS literal mirror(3 token,structural)
 
-**Rule**:`--hover-delay-{plain|rich|close}` motion tokens 鏡像 JS constants(`HOVER_DELAY_PLAIN_MS` / `HOVER_DELAY_RICH_MS` / `HOVER_DELAY_CLOSE_MS`),CSS 端保留供 design SSOT 可見 + 未來 programmatic 讀取(`getComputedStyle`)。
+**Rule**:`--motion-delay-{plain|rich|close}` motion tokens 鏡像 JS constants(`MOTION_DELAY_PLAIN_MS` / `MOTION_DELAY_RICH_MS` / `MOTION_DELAY_CLOSE_MS`),CSS 端保留供 design SSOT 可見 + 未來 programmatic 讀取(`getComputedStyle`)。
 
 **Why**:M17 SSOT 雙頭設計 — CSS 端是設計師 inspector 入口,JS 端是 runtime 消費入口,兩端必同步存在。
 
-**Regex**:`^--hover-delay-(plain|rich|close)$`
+**Regex**:`^--motion-delay-(plain|rich|close)$`
 
 ---
 
@@ -118,7 +118,7 @@ benchmark:
 ## Audit chain
 
 - **Dim 48**(= `design-system-audit/SKILL.md` 的「Unused / orphan token detector」audit 維度)— chain 本 spec + `audit-orphan-tokens.mjs --check`(not raw `grep var()`)
-- **CI**:`npm run audit:tokens`(future add to `package.json` scripts)— `node scripts/audit-orphan-tokens.mjs --check` fail = real orphan 出現
+- **CI**:`release.yml` deterministic-gates step + `scripts/release-preflight.mjs` 直呼 `node scripts/audit-orphan-tokens.mjs --check` — fail = real orphan 出現
 - **Hook**:無 hook(本 audit run-time / monthly cadence,非 PreToolUse 攔截場景)
 
 ## 永久解決承諾

package/src/tokens/token-system.spec.md

@@ -141,6 +141,7 @@
 | Family | 檔案 | 用途 |
 |---|---|---|
 | `--layout-space-*` | `layoutSpace.css` | **抽象** spacing rhythm(loose / tight / bottom)——多 consumer 共用 |
+| `--item-gap-label-desc-*` | `layoutSpace.css`(co-located) | item 級 label ↔ desc micro gap——概念 owner = `item-anatomy.spec.md`,住 layoutSpace.css 因同屬 spacing token 家族(見 layoutSpace.spec.md「Co-located:item-gap tokens」) |
 | `--sidebar-*` / `--chrome-header-*` / `--data-table-*-width` | `uiSize.css` | **具體** layout primitive 尺寸——對應特定 layout primitive 元件 |
 
 **Why 拆**:抽象 spacing rhythm 改值 → 整 app rhythm 動;具體 primitive 尺寸改值 → 單個 primitive 動。兩個影響半徑不同,拆檔案讓 grep / blame 直接看出。

package/src/tokens/uiSize/uiSize.css

@@ -75,7 +75,7 @@
   --tree-indent-lg: 1.75rem;    /* 28px */
 
   /* DataTable Panel Widths — Sort manager / Filter panel cells(SSOT,2026-05-23 deep-audit Phase A.4 Decision 2 codify per user verbatim「決策二照你建議做」+「確保最SSOT最簡潔」)
-     Consumer:data-table-sort-manager.tsx / data-table-filter-panel.tsx
+     Consumer:data-table-sort-manager.tsx / data-table-filter-group.tsx(FilterRow;2026-07-14 拆檔自 filter-panel)
      不 density-scale(panels 是 floating layout,不該跟密度走)
      Naming aligned to family `--<component>-<part>-<size>`(per --field-height-* / --table-row-* / --tab-height-* precedent)*/
   --data-table-sort-panel-width: 30rem;       /* 480px — sort manager root container width */

package/src/tokens/uiSize/uiSize.spec.md

@@ -67,7 +67,7 @@ Button、Input、Checkbox/Radio SelectionItem 等互動元件。
 3. 位置:必須在 spec 的「尺寸」主章節之下(不是埋在「何時不用」或「禁止事項」等其他章節)
 
 **現有已遵循此格式的元件**:Chip(本檔上表已寫,Material 3 / Atlassian / Polaris 共識)/ Checkbox / RadioGroup / Switch / Slider / Textarea / Rating(2026-04-21 批次補齊,五欄格式統一)
-**需補齊 rationale 段的元件**:(無 — Phase 2 已全部補齊)。未來新增偏離 field-height 的元件 → 必須按本格式寫,`/design-system-audit` 會 enforce。
+**需補齊 rationale 段的元件**:(無 — Phase 2 已全部補齊)。未來新增偏離 field-height 的元件 → 必須按本格式寫(三欄格式為本 spec 約定,非機械 enforce;`/design-system-audit` 僅經 audit-prompts 通用 rationale-grep + Rule B density flag 間接把關)。
 
 **audit hook 未來擴展**:若 cva `defaultVariants.size` 不是 `md`,或 `size` variants 的數值不命中 `--field-height-*`,hook 可要求 spec.md 必有符合格式的 rationale 段,否則 block merge(列為 post-Phase-2 可考慮加上的 mechanical gate)。
 

package/src/tokens/uiSize/uiSize.stories.tsx

@@ -66,8 +66,10 @@ export const Overview: Story = {
     <div className="max-w-3xl">
       <h2 className="text-h3 mb-2">Field Height</h2>
       <p className="text-body text-fg-secondary mb-4">
-        Button / Input / Checkbox SelectionItem 等互動元件的高度。所有 field-height 消費者
-        <strong>不傳 size 時自動對齊 md</strong>——Form / Toolbar 並排多控件默認等高。
+        Button / Input / Checkbox SelectionItem 等互動元件的高度。一般 field family 消費者
+        <strong>不傳 size 時預設 md</strong>——Form / Toolbar 並排多控件默認等高。
+        documented carve-outs 例外:Rating standalone 預設 xs(Field 內才跟 md)、
+        Chip 等單一尺寸消費者不在 default-md 規則內(uiSize.spec.md「單一尺寸消費者」段)。
         下列為 md density 預設值(lg density 對照見 Tokens/Density)。
       </p>
 

package/src/tokens/utility-registry.json

@@ -5,7 +5,8 @@
     "owner": "packages/design-system/src/tokens/utility-registry.json",
     "consumed_by": [
       ".claude/hooks/check_opacity_token_usage.sh",
-      ".claude/skills/design-system-audit/references/audit-prompts.md Dim 5"
+      ".claude/skills/design-system-audit/references/audit-prompts.md Dim 5",
+      ".claude/hooks/lib/_token_hygiene.sh"
     ],
     "spec_sources": [
       "packages/design-system/src/tokens/typography/typography.spec.md L118-156",
@@ -19,23 +20,38 @@
       "_added": "2026-05-17 per audit Dim 47 codex 比稿後 codify;補 anatomy stories Inspector panel UI 跟 DS surface 分層 carve-out",
       "anatomy_stories_inspector": {
         "scope": "*.anatomy.stories.tsx — Inspector panel / Side legend / Section H3 decoration UI",
-        "allowed_utilities": ["tracking-wider", "font-semibold", "text-[10px]", "text-[11px]", "text-[12px]", "leading-none"],
+        "allowed_utilities": [
+          "tracking-wider",
+          "font-semibold",
+          "text-[10px]",
+          "text-[11px]",
+          "text-[12px]",
+          "leading-none"
+        ],
         "rationale": "Anatomy stories Inspector panel 是 storybook-internal 教學工具 UI(展示元件結構的 side legend / footnote / uppercase header),非 DS component surface。需視覺辨識(uppercase label + 寬 letter-spacing / 小字 metadata)跟 DS 主元件 typography 分層。對齊 Carbon storybook addon、Material storybook addon 共識:tool UI 不受 token-first 約束。`leading-none` 2026-05-21 D1 codex 抓 badge.anatomy L117/118 後加入(10-11px monospace inspector label 需要緊湊 line-height,跟 DS body/body-lg `leading-compact 1.3` 場景分層)。",
         "audit_dim_53_fix": "Dim 47 sub-agent 抓 anatomy stories tracking-wider / font-semibold / text-[NN] / leading-none 多處違反 = false positive(本例外段 codify 後豁免)"
       },
       "token_stories_section_label": {
         "scope": "packages/design-system/src/tokens/**/*.stories.tsx — SectionLabel helper(uppercase + wider tracking section header)",
-        "allowed_utilities": ["tracking-wider", "font-semibold"],
+        "allowed_utilities": [
+          "tracking-wider",
+          "font-semibold"
+        ],
         "rationale": "Token stories(color / typography / radius / elevation / opacity / uiSize / layoutSpace / density)是 token 展示 storybook,用 SectionLabel(`uppercase + tracking-wider`)分區 swatch 群組,跟 anatomy stories Inspector panel 同 storybook-internal teaching UI 性質,非 DS component surface。Phase A audit 2026-05-21 codify。"
       },
       "principles_stories_codepre": {
         "scope": "*.principles.stories.tsx — <pre><code> code sample blocks",
-        "allowed_utilities": ["text-xs", "text-sm"],
+        "allowed_utilities": [
+          "text-xs",
+          "text-sm"
+        ],
         "rationale": "Code sample 區塊用 <pre><code> + monospace font,需小字呈現程式碼 — 跟 DS prose 不同層級。Polaris / Carbon storybook code blocks 同樣使用 smaller font。"
       },
       "icon_as_text_and_numeric_in_circle": {
         "scope": "Production tsx — icon-as-text / numeric-in-circle / single-line short text in fixed-h container",
-        "allowed_utilities": ["leading-none"],
+        "allowed_utilities": [
+          "leading-none"
+        ],
         "rule_one_liner": "icon-as-text / numeric-in-circle 一律用 `leading-none`(不用 `leading-compact`)",
         "rationale": "2026-05-23 Path B codify per user verbatim「或是其實根本不用分?」+「照你建議」:統一 leading-none,不分 fixed-box vs derived-h。對齊 Material UI Avatar `line-height: 1` / Polaris Badge `line-height: 1` / Carbon Tag(不顯式設,等效 1)世界級共識。視覺驗證:固定高度容器 + items-center 主導,line-height 1.0 vs 1.3 vs 1.5 視覺零差別(playwright probe `scripts/probe-leading-migration.mjs` Steps step-number box delta = 0px)。廢除原 2026-05-21 F1 Badge 從 leading-none → leading-compact migration(over-engineered,違 mindset #1 不取巧不發明)+ 原 production_layout_positioning_anchor exception(改 affirmative canonical 不需 exception)。",
         "current_consumers": [
@@ -52,46 +68,129 @@
   },
   "typography": {
     "allow": [
-      "text-h1", "text-h2", "text-h3", "text-h4", "text-h5", "text-h6",
-      "text-body", "text-body-lg", "text-caption", "text-footnote",
-      "leading-compact", "leading-normal",
-      "font-normal", "font-medium", "font-bold",
+      "text-h1",
+      "text-h2",
+      "text-h3",
+      "text-h4",
+      "text-h5",
+      "text-h6",
+      "text-body",
+      "text-body-lg",
+      "text-caption",
+      "text-footnote",
+      "leading-compact",
+      "leading-normal",
+      "font-normal",
+      "font-medium",
+      "font-bold",
       "tracking-shortcut"
     ],
     "block": {
-      "size_raw": ["text-xs", "text-sm", "text-base", "text-lg", "text-xl", "text-2xl", "text-3xl", "text-4xl", "text-5xl", "text-6xl", "text-7xl", "text-8xl", "text-9xl"],
-      "weight_raw": ["font-thin", "font-extralight", "font-light", "font-semibold", "font-extrabold", "font-black"],
+      "size_raw": [
+        "text-xs",
+        "text-sm",
+        "text-base",
+        "text-lg",
+        "text-xl",
+        "text-2xl",
+        "text-3xl",
+        "text-4xl",
+        "text-5xl",
+        "text-6xl",
+        "text-7xl",
+        "text-8xl",
+        "text-9xl"
+      ],
+      "weight_raw": [
+        "font-thin",
+        "font-extralight",
+        "font-light",
+        "font-semibold",
+        "font-extrabold",
+        "font-black"
+      ],
       "leading_numeric": "leading-{N}(use leading-compact / leading-normal token)",
-      "tracking_raw": ["tracking-tighter", "tracking-tight", "tracking-wide", "tracking-wider", "tracking-widest"],
+      "tracking_raw": [
+        "tracking-tighter",
+        "tracking-tight",
+        "tracking-wide",
+        "tracking-wider",
+        "tracking-widest"
+      ],
       "tracking_raw_rationale": "Block raw Tailwind tracking-* utility(unscoped letter-spacing leaks 跨元件不一致)。需要 wider letter-spacing 場景必 codify role-specific semantic utility — 例如 `tracking-shortcut`(鍵盤快捷鍵 hint,0.1em,對應 --tracking-shortcut token)。新 role 必走 typography.css 新增 `--tracking-<role>` + `@utility tracking-<role>`,再 allow 進本 registry。",
       "inline_style": "style={{ fontSize: ..., lineHeight: ... }}",
       "rationale_path": "packages/design-system/src/tokens/typography/typography.spec.md L118-156"
     }
   },
   "radius": {
-    "allow": ["rounded-xs", "rounded-sm", "rounded-md", "rounded-lg", "rounded-full", "rounded-[inherit]"],
+    "allow": [
+      "rounded-xs",
+      "rounded-sm",
+      "rounded-md",
+      "rounded-lg",
+      "rounded-full",
+      "rounded-[inherit]"
+    ],
     "allow_note": "rounded-[inherit] 是 passthrough 非 radius 值(clip 到父容器圓角,token utility 無法表達;anchor scroll-area.tsx Viewport)— 唯一合法 arbitrary bracket",
     "block": {
-      "out_of_range": ["rounded-xl", "rounded-2xl", "rounded-3xl"],
+      "out_of_range": [
+        "rounded-xl",
+        "rounded-2xl",
+        "rounded-3xl"
+      ],
       "ambiguous_default": "rounded(use rounded-md explicit)",
-      "arbitrary_value": ["rounded-[6px]", "rounded-[var(--radius-md)]"],
+      "arbitrary_value": [
+        "rounded-[6px]",
+        "rounded-[var(--radius-md)]"
+      ],
       "inline_style": "style={{ borderRadius: ... }}",
       "rationale_path": "packages/design-system/src/tokens/radius/radius.spec.md L57-71"
     }
   },
   "opacity": {
-    "allow": ["opacity-0", "opacity-100", "opacity-disabled"],
+    "allow": [
+      "opacity-0",
+      "opacity-100",
+      "opacity-disabled"
+    ],
     "block": {
-      "numeric_tier": ["opacity-5", "opacity-10", "opacity-20", "opacity-25", "opacity-30", "opacity-40", "opacity-50", "opacity-60", "opacity-70", "opacity-75", "opacity-80", "opacity-90", "opacity-95"],
+      "numeric_tier": [
+        "opacity-5",
+        "opacity-10",
+        "opacity-20",
+        "opacity-25",
+        "opacity-30",
+        "opacity-40",
+        "opacity-50",
+        "opacity-60",
+        "opacity-70",
+        "opacity-75",
+        "opacity-80",
+        "opacity-90",
+        "opacity-95"
+      ],
       "arbitrary_value": "opacity-[0.N](use --opacity-disabled or token swap)",
       "rationale_path": "packages/design-system/src/tokens/opacity/opacity.spec.md L53-57",
       "philosophy": "Single semantic token(0.45)vs Tailwind multi-tier(對齊 Polaris / Material / Apple 單值哲學)"
     }
   },
   "elevation": {
-    "allow": ["shadow-[var(--elevation-100)]", "shadow-[var(--elevation-100-hover)]", "shadow-[var(--elevation-200)]", "shadow-[var(--elevation-200-hover)]"],
+    "allow": [
+      "shadow-[var(--elevation-100)]",
+      "shadow-[var(--elevation-100-hover)]",
+      "shadow-[var(--elevation-200)]",
+      "shadow-[var(--elevation-200-hover)]"
+    ],
     "block": {
-      "tailwind_size": ["shadow-sm", "shadow", "shadow-md", "shadow-lg", "shadow-xl", "shadow-2xl", "shadow-inner"],
+      "tailwind_size": [
+        "shadow-sm",
+        "shadow",
+        "shadow-md",
+        "shadow-lg",
+        "shadow-xl",
+        "shadow-2xl",
+        "shadow-inner"
+      ],
       "rationale_path": "packages/design-system/src/tokens/elevation/elevation.spec.md",
       "philosophy": "DS 採 2-tier elevation(100 / 200)語意而非 Tailwind size ladder"
     }
@@ -99,26 +198,64 @@
   "spacing": {
     "allow_canonical": "對齊 spec(gap-2/3/4/6/8 等;layout-space token via var())",
     "warn": {
-      "micro_gap": ["gap-px", "gap-0.5", "gap-1.5"],
+      "micro_gap": [
+        "gap-px",
+        "gap-0.5",
+        "gap-1.5"
+      ],
       "rationale": "<4px gap 通常違反 item-anatomy slot 幾何。Allow exception in spec.md(Skeleton bone / inline action 等)but flag for human review."
     }
   },
   "sizing": {
     "warn": {
-      "fraction": ["w-1/3", "w-2/3", "w-1/4", "w-3/4", "w-1/5", "w-2/5", "w-3/5", "w-4/5", "w-1/6", "w-5/6", "w-1/12", "w-5/12", "w-7/12", "w-11/12"],
+      "fraction": [
+        "w-1/3",
+        "w-2/3",
+        "w-1/4",
+        "w-3/4",
+        "w-1/5",
+        "w-2/5",
+        "w-3/5",
+        "w-4/5",
+        "w-1/6",
+        "w-5/6",
+        "w-1/12",
+        "w-5/12",
+        "w-7/12",
+        "w-11/12"
+      ],
       "rationale": "Fraction width 通常 inside DS component = layout SSOT 漂移。Allow if component spec owns layout(eg. Field labelWidth 比例)but flag。"
     }
   },
   "shadcn_alias": {
     "block": {
-      "color_alias": ["bg-popover", "text-popover-foreground", "text-muted-foreground", "bg-accent", "text-accent-foreground", "bg-destructive", "bg-background", "text-background", "border-input"],
+      "color_alias": [
+        "bg-popover",
+        "text-popover-foreground",
+        "text-muted-foreground",
+        "bg-accent",
+        "text-accent-foreground",
+        "bg-destructive",
+        "bg-background",
+        "text-background",
+        "bg-card",
+        "text-card-foreground",
+        "text-primary-foreground",
+        "border-input"
+      ],
       "rationale": "shadcn compat alias 不聯動 DS dark mode。改用 direct token(--surface-raised / --fg-muted / --error 等)",
       "rationale_path": "CLAUDE.md `# 失敗記憶索引` shadcn compat alias 回流"
     }
   },
   "primitive_color_as_utility": {
     "block": {
-      "primitive_class": ["bg-neutral-1", "bg-neutral-2", "text-blue-6", "text-red-7", "border-blue-3"],
+      "primitive_class": [
+        "bg-neutral-1",
+        "bg-neutral-2",
+        "text-blue-6",
+        "text-red-7",
+        "border-blue-3"
+      ],
       "rationale": "primitive 色名作 utility = 越過 semantic 層。用 semantic utility(bg-surface / text-fg-secondary 等)或 var() bracket(bg-[var(--color-blue-6)])"
     }
   }