@qijenchen/design-system 0.1.0-beta.10 → 0.1.0-beta.13

package/ds-canonical/references/ssot-index.md

@@ -0,0 +1,40 @@
+# SSOT Index — High-risk interface ownership map
+
+**Purpose**:per codex round 5 (e) — 設計提案前必查本 index 找 owner,再 grep spec verify。
+避免 round 1-4 反覆「沒查就提案 → 提錯 owner → user 糾 → 再來」的 loop。
+
+**Usage**:
+1. 動視覺 / 結構前 → grep 本 file 找該 interface 是否列管
+2. 命中 → 跳 owner spec 查 canonical sentence + 看 conflicting code 嗎?
+3. 沒命中 → grep `*.spec.md` 找 anchor,**找到後加進本 index**(防下次再漏)
+
+## High-risk interfaces(active divergence / past trap)
+
+| Interface | Owner spec | Canonical sentence | Drift status | Last divergence event |
+|---|---|---|---|---|
+| **DataTable body cell internal indicator**(display endAction / clear / edit indicator)| `data-table.spec.md:204` + `inline-action.spec.md:157` | 「Body cell internal = Field family endAction(自動繼承)」「Field display 元件已對齊」 | ⚠ **DRIFT**:`data-table.tsx:1074-1191` `getEditIndicator(colType)` parallel system,`:1190` comment 反向說 SSOT 在 DataTable cellEl | 2026-05-08 round 5(`.claude/planning/cell-indicator-ssot-rfc.md` pending decision)|
+| **Field naked variant state ring**(hover / focus / open / error)| `field-wrapper.tsx:140-189` cva compoundVariants(v13.3)+ `field.spec.md:371-415`「focus dominates everything」| 「SSOT 在 field-wrapper.tsx 三 compoundVariant — 改一處全 control + cell + variant 跟動」 | ✅ aligned(2026-05-08 D path canary 違反後 revert)| 2026-05-08 round 4(D path canary 違反 SSOT,已 revert `f0faab9`)|
+| **Row prefix/suffix slot**(`<ItemPrefix>` / `<ItemSuffix>`)| `patterns/element-anatomy/item-anatomy.spec.md:175+190` | 「row prefix/suffix slot 必走 patterns/element-anatomy L1 primitive」「`h-[1lh] shrink-0 flex items-center` 普世正確」 | ✅ aligned(hook `check_pattern_invariants.sh` C.4 enforce)| — |
+| **Inline action gap**(ItemInlineAction sibling spacing)| `patterns/element-anatomy/inline-action.spec.md:80` | 「inline-action 跟 sibling gap 必 = `gap-2`(8px)」 | ✅ aligned(hook C.2 enforce)| — |
+| **Drag visual**(drop indicator / drag overlay)| `lib/drag-visual.ts`(2026-05-06 v14.5)+ `tree-view.spec.md:265` | 「TreeView 是 DS 內最早 codified 的 drag canonical,DataTable row drag + column reorder 都 inherit via drag-visual.ts SSOT module」 | ✅ aligned | — |
+| **Color tokens**(primitive vs semantic)| `tokens/color/color.spec.md`(架構流派定位)+ `tokens/color/semantic.css` | 「禁 primitive 色名作 utility,用 semantic alias」 | ✅ aligned(hook D.3 enforce)| — |
+| **Layout space**(region/element + 親疏三級)| `tokens/layoutSpace/layoutSpace.spec.md` v6 + `feedback_layout_v6_canonical.md` | 「region/element + bounded/unbounded + 親疏三級」 | ✅ aligned(2026-05-01 flush variant retire)| 2026-05-01 |
+| **DataTable scroll**(3-region synced + cross-OS scrollbar)| `data-table.spec.md:245-251` | 「center body 用 native overflow-x-auto(非 ScrollArea),pinned column 三 region 同步」 | ✅ aligned(v15.13 interim CSS parity for Windows Bug H,deferred ScrollArea full migration)| 2026-04-30 / 2026-05-07 |
+| **Cell display vs edit content position**(picker offset)| `field.spec.md:407` Layout Family 4 + `data-table.spec.md:204` | 「Field control display + edit 共用同 wrapper geometry」 | ⚠ **MISALIGNED**:6 picker display 走裸 span,跟 edit Field wrapper 不同 DOM | 2026-05-07~08 round 1-5(blocked on indicator SSOT decision)|
+| **Field state machine focus dominates**(v13.3)| `field-wrapper.tsx:140-189` + `field.spec.md:371-415` + `check_field_family_invariants.sh` A.3 | 「focus dominates everything;naked 不寫平行 outline ring」 | ✅ aligned;hook A.3 enforce | 2026-05-06 v9-v13.3 5 round refinement |
+| **Solo dev workflow**(1 chat = 1 branch / Netlify gate / squash merge)| `feedback_solo_dev_workflow.md` + CLAUDE.md「Git solo-work canonical」 | 「1 chat = 1 working branch;Netlify preview = user gate;『push / OK』trigger 才 merge main」 | ✅ aligned(M28 + hook `check_solo_workflow.sh`)| 2026-05-08 M28 codify |
+| **Wrapper-vs-primitive schema unify**(SelectOption / MenuItemProps 等)| `SelectMenu/select-menu.tsx` SelectMenuOption + `Combobox/combobox.tsx` extends + `PeoplePicker/people-picker.tsx` extends | 「wrapper API schema 必 `extends primitive`,wrapper 內部 mapping 必 forward 全 primitive surface field(M30)」 | ✅ aligned(2026-05-10 Round 1 commit `561945b` Combobox extends + forward 全 field;PeoplePicker 對齊 + hook `check_wrapper_primitive_schema_drift.sh` BLOCKER)| 2026-05-10 M30 codify |
+
+## How to maintain
+
+- 新 interface 第一次 surface → 加進本 index
+- 新 divergence 發現 → 加 row + 標 ⚠ DRIFT
+- Drift 解決 → 改 ✅ aligned
+- 重大 round 結束 → 跑 audit Dim 38 反 grep verify
+
+## 與 hook 關係
+
+- `check_ds_anchor_preflight.sh`(待 ship)— 偵測編 Field / DataTable / patterns code 時 stderr 提醒「先 grep ssot-index.md」
+- `check_field_family_invariants.sh` A.3 — 機械化 enforce v13.3 SSOT
+- `check_pattern_invariants.sh` C.4 — 機械化 enforce row slot SSOT
+- `check_canonical_propagation.sh` E.2 — 機械化 enforce L3 primitive import

package/ds-canonical/references/story-baseline-registry.json

@@ -0,0 +1,79 @@
+{
+  "$schema": "./story-baseline-registry.schema.json",
+  "_meta": {
+    "purpose": "Anti-drift registry for stories wrap既有 primitive(Sidebar / ChromeHeader / DataTable / Dialog / Sheet / Popover)— machine-readable canonical archetype。Hook `check_story_invariants.sh R8` reads this(not grep spec.md / not憑 Claude judgment)to enforce nearest same-purpose canonical usage(per codex Layer B D4 2026-05-20)。新增 primitive entry 必先寫 baseline + helper list + antiPatterns regex + variantRules。",
+    "owner": ".claude/references/story-baseline-registry.json",
+    "consumed_by": [
+      ".claude/hooks/check_story_invariants.sh#R8(story_archetype_registry)",
+      ".claude/skills/story-writing/SKILL.md#Phase-0.0(load registry + read baseline + produce diff table)"
+    ],
+    "rollout": "ship as warn mode first;確認 zero existing violation → 升 P0 BLOCKER"
+  },
+  "components": {
+    "Sidebar": {
+      "baseline": "packages/design-system/src/components/Sidebar/sidebar.stories.tsx#IconCollapse",
+      "requiredHelpers": ["WorkspaceBrand", "MAIN_NAV", "SidebarHeader", "SidebarFooter"],
+      "antiPatterns": [
+        {
+          "id": "sidebar-header-simplified-span",
+          "regex": "<SidebarHeader>\\s*<span",
+          "severity": "block",
+          "rationale": "SidebarHeader 必 wrap WorkspaceBrand-like ItemAvatar block(per sidebar.stories#IconCollapse baseline);simplified <span> mock = drift"
+        },
+        {
+          "id": "sidebar-menu-button-inline-icon",
+          "regex": "<SidebarMenuButton>[^<]*<[A-Z][a-zA-Z]+\\s+className=\"size-",
+          "severity": "block",
+          "rationale": "SidebarMenuButton 必用 startIcon prop + tooltip prop;children inline icon = drift"
+        }
+      ]
+    },
+    "DataTable": {
+      "baseline": "packages/design-system/src/components/DataTable/data-table.stories.tsx#WithBulkActions",
+      "toolbar": {
+        "requiredHelpers": ["Popover", "PopoverTrigger", "PopoverContent", "Input"],
+        "filterPanel": "DataTableFilterPanel",
+        "sortManager": "DataTableSortManager",
+        "buttonCanonical": {
+          "variant": "text",
+          "size": "sm",
+          "iconOnly": true,
+          "pressed": "required(state expression)",
+          "rationale": "per codex D2 verdict 2026-05-20 + action-bar.spec.md narrow scope:dense always-visible toolbar = low visual weight + pressed/chips/badges 顯示 state;tertiary 只用 standalone/labeled context"
+        }
+      },
+      "antiPatterns": [
+        {
+          "id": "datatable-toolbar-tertiary-filter-sort",
+          "regex": "startIcon=\\{(Filter|ArrowUpDown)\\}[^>]*variant=\"tertiary\"|variant=\"tertiary\"[^>]*startIcon=\\{(Filter|ArrowUpDown)\\}",
+          "severity": "block",
+          "rationale": "DataTable toolbar filter/sort 必 variant=text(per data-table.stories#WithBulkActions L998 canonical)"
+        },
+        {
+          "id": "datatable-toolbar-button-with-label",
+          "regex": "startIcon=\\{(Filter|ArrowUpDown)\\}[^>]*>[^<]+(篩選|排序|Filter|Sort)[^<]*</Button>",
+          "severity": "block",
+          "rationale": "DataTable toolbar 必 iconOnly(per WithBulkActions L998 canonical),不掛 label"
+        },
+        {
+          "id": "datatable-toolbar-no-popover-wrap",
+          "regex": "startIcon=\\{(Filter|ArrowUpDown)\\}(?![\\s\\S]*?(DataTableFilterPanel|DataTableSortManager))",
+          "severity": "warn",
+          "rationale": "DataTable toolbar filter/sort button 必包在 Popover 內,內含真 DataTableFilterPanel / DataTableSortManager primitive"
+        }
+      ]
+    },
+    "ChromeHeader": {
+      "baseline": "packages/design-system/src/components/Sidebar/sidebar.stories.tsx#IconCollapse (PageContent helper)",
+      "requiredStructure": "SidebarTrigger + h1.text-body-lg.font-medium 緊鄰 gap-2",
+      "antiPatterns": [
+        {
+          "id": "chromeheader-span-flex-1",
+          "regex": "<ChromeHeader>[\\s\\S]*?<span\\s+className=\"[^\"]*flex-1[^\"]*\">",
+          "severity": "block",
+          "rationale": "ChromeHeader title 該用 <h1 className=\"text-body-lg font-medium\"> 緊鄰 SidebarTrigger,不該用 <span flex-1> 撐空間造成 toggle + title 巨大間距"
+        }
+      ]
+    }
+  }
+}

package/ds-canonical/references/structural-token-retention.md

@@ -0,0 +1,42 @@
+# 結構性保留 token canonical(audit Dim 48 SSOT,2026-05-17 codified)
+
+某些 token 看起來「0 consumer」但屬**結構性保留**,不該 retire。**Sub-agent 跑 audit Dim 48 抓 0-consumer candidate 時必先過此 table,屬下列 6 類則 retract finding(不列為 violation)**。
+
+## 6 類結構性保留(對齊 Radix Color / Atlassian @atlaskit/tokens / Polaris polaris-tokens 三家共識)
+
+| 類別 | Examples | 保留 rationale |
+|---|---|---|
+| **1. Radix-style palette completeness** | `--color-{blue,deep-orange,orange,amber,yellow,lime,green,turquoise,indigo,purple,magenta}-{3,4,5,8,9,10}` / `--white-a{12,15,25,45,65,85}` / `--color-red-{1..10}`(red palette 因 semantic 重映射 deep-orange 而不直接消費)| Radix Color idiom 必 12 步階完整,即使目前只消費 step-{1,2,6,7} 給 Tag/Avatar,中間步階保留供未來 hue scale 擴充 / hue calibration 對照。Retire = 破壞 palette 完整契約,新加 hue 時需重新訂全套 |
+| **2. Forward-looking consumer reservation** | `--brand` / `--color-brand` | 預留給 consumer-layer(`src/app` / product UI)消費的品牌色 token。DS 本身不消費,跟 `--primary`(DS UI accent)分層。Retire = 未來產品做品牌頁時要重補 token + spec |
+| **3. Tailwind bridge alias to semantic state SOP** | `--color-warning-foreground` / `--color-status-{online,busy,away,offline}` / `--color-inverse-neutral-{hover,active}` | `@theme inline` bridge 讓 `bg-status-online` 類 utility 可用,即使現有 code 走 `var(--status-online)` direct(NameCard.tsx / Avatar.tsx / Tag.tsx 實際消費 underlying token 非 alias)。Bridge 是 future-proof Tailwind class consumption,retire = 限縮使用方式 |
+| **4. State SOP 5 件套** | `--info-active / --success-active / --warning-active / --primary-text` 等 | semantic state 5 件套(base / hover / active / subtle / text)結構完整性,即使現有 active variant 無 consumer,保留供未來互動 state 擴充 |
+| **5. Type scale completeness** | `--font-h1-size` / `--font-h4-size` 等 typography utility | Type scale 12-tier completeness,即使現有 production 只用 h2/h3/h5,h1/h4/h6 預留供 marketing / hero / drawer title 等場景 |
+| **6. Elevation dark-mode pair** | `--elevation-100-hover / --elevation-200-hover` | `primitives.css:236,238,419,421` light + dark 雙模式各自定義 → 結構性 dual-tier,retire 會破 dark mode visual contract |
+
+## Retire criteria 真實 strict(只有以下才 retire)
+
+- 真實 0 consumer + **0 forward-looking reservation** + **0 dark-mode pair** + **0 palette completeness role**
+- 對齊 Radix Color / Atlassian `@atlaskit/tokens` / Polaris polaris-tokens 三家 retire 政策共識
+
+## Sub-agent 強制 triple-verify before propose retire
+
+對每 candidate retire token,sub-agent 必 verify 3 layer:
+
+1. **`grep -rn var(--TOKEN_NAME)` DS-wide**(含 `packages/design-system/src/**` + `src/app/**` + `src/explorations/**`)— 抓 direct `var()` consumption
+2. **`grep -rn "TOKEN_NAME"` 排除 css/spec.md 定義 + template literal usage**(eg. `\`h-table-row-${size}\``)— 抓動態 utility class generation
+3. **Cross-check 上 6 類**:屬任一 → retract finding,**不列 retire candidate**
+
+**任一 layer 顯示「有 consumer / 屬結構保留」→ 從 retire report 中拿掉**(不要送 user 拍板浪費時間)。
+
+## Audit Dim 48 false-positive 經驗(2026-05-17,user 抓教訓)
+
+Sub-agent 用 narrow grep(只看 utility class hit,沒看 `var()` direct + template literal + dark mode override + forward-looking)抓 58 個 retire candidate;Layer A own re-verify 後 100% 為 false positive(全是結構性保留)。
+
+User verbatim 2026-05-17:「每次抓出的問題你他媽要給我基於我們所有的檔案包括設計原則去再三確認到底是不是問題,避免明明就不是問題卻一直要我決策浪費我的時間」。
+
+本檔 codify 後類似 audit 跑時自動辨識結構性保留 token,不再誤判。
+
+## 引用
+
+- `tokens/color/color.spec.md`「結構性保留 token canonical」(pointer 段)
+- `.claude/skills/design-system-audit/SKILL.md` Dim 48(sub-agent prompt 必 cite 本檔)

package/ds-canonical/references/tailwind-gotchas.md

@@ -0,0 +1,87 @@
+# Tailwind 使用完整陷阱對照(從 CLAUDE.md 拆出)
+
+`.claude/rules/ui-development.md`「Tailwind 5 條核心」段保留最精要 rules 和一行 bug anchor;完整範例、完整禁止清單、每條 bug 的詳細歷史在本檔。
+
+---
+
+## Tailwind v4 任意值:CSS variable 必須用 `var()` 包覆
+
+**必須寫 `w-[var(--foo)]`,不能寫 `w-[--foo]`**。Tailwind v4 對任意值裡的 CSS variable 處理改了——舊的 `[--foo]` shorthand **不會自動包 `var()`**,會被當成 custom property declaration,整個 class **靜默失效**(不報錯,但完全沒效果)。
+
+**曾經發生的 bug**:Sidebar 從 shadcn 複製的 `w-[--sidebar-width]` 在 8 個位置寬度全失效,sidebar 寬度變成 content fallback 導致主內容被蓋住。
+
+```tsx
+// ❌ 錯(v4 失效)
+<div className="w-[--sidebar-width] min-w-[--sidebar-width-min]" />
+
+// ✅ 對
+<div className="w-[var(--sidebar-width)] min-w-[var(--sidebar-width-min)]" />
+```
+
+**自我檢查**:若 CSS var 相關寬高看起來怪怪的,先 `grep '\[--[a-z]'` 在 src 裡找有沒有漏網的 shorthand 語法。
+
+---
+
+## 圓角對應表
+
+| Utility class   | 值                         |
+|----------------|---------------------------|
+| `rounded-md`   | 4px(--radius-md)    |
+| `rounded-lg`   | 8px(--radius-lg)    |
+| `rounded-full` | 9999px(--radius-full)|
+
+---
+
+## tailwind-merge 自訂 utility 註冊(技術陷阱)
+
+新增任何 `text-*`、`bg-*`、`border-*`、`ring-*` 自訂 utility 後,**必須到 `lib/utils.ts` 顯式註冊到正確的 group**(font-size / text-color 等)。否則 tailwind-merge 會用 heuristic 猜分組,把不衝突的 class 誤判為衝突並 strip 掉。
+
+**曾發生的 bug**:`text-body`(font-size)和 `text-fg-secondary`(color)被誤判同組,description 失去 font-size。
+
+**診斷法**:`cn()` 後某個 class 消失 → 99% 是 tailwind-merge 誤判 → 去 `lib/utils.ts` 註冊。
+**逃生艙**:inline style + CSS variable(`style={{ fontSize: 'var(--font-body-size)' }}`)。
+
+---
+
+## 何時可以 / 不可以用 Tailwind utility
+
+### 核可清單(我們的元件 code 可以直接用)
+
+| 類別 | 允許 utility | 備註 |
+|------|-------------|------|
+| **Layout / Flex / Grid** | `flex`, `grid`, `items-*`, `justify-*`, `gap-*`, `p-*`, `m-*`, `w-*`, `h-*`, `min-*`, `max-*` 等 Tailwind 預設 | spacing scale `p-4` / `gap-2` 等都 OK |
+| **Display / Position** | `block`, `hidden`, `absolute`, `relative`, `z-*` | |
+| **我們 DS 自訂 token utility** | `bg-surface-raised`, `text-foreground`, `text-fg-secondary`, `text-fg-muted`, `border-border`, `border-divider`, `text-body`, `text-caption`, `h-field-*`, `rounded-md` 等 | 所有 semantic token 對應的 utility |
+| **CSS variable 任意值** | `shadow-[var(--elevation-200)]`, `h-[var(--field-height-md)]` 等 | **必須 `var()` 包覆**,不能 `[--foo]` shorthand |
+
+### 禁止清單
+
+| 類別 | 為什麼禁止 | 改用 |
+|------|----------|------|
+| `shadow-sm/md/lg/xl/2xl` | 繞過 elevation token 系統,沒跟 dark mode 調整聯動 | `shadow-[var(--elevation-100/200/300)]` |
+| 硬寫色值 `#xxx`, `rgb(...)`, `bg-red-500` | 繞過 semantic token,dark mode / brand swap 會斷 | 對應 semantic token |
+| Tailwind 預設 typography `text-xs/sm/base/lg` | 我們有自己的 `text-caption/body/body-lg/h1/h2` 系統 | 用我們的 typography token |
+| 硬寫 px 值 `w-[48px]` 當有 token | 失去 token 關聯,改值時零散處要一起改 | 對應 token 或 calc() |
+
+---
+
+## shadcn compat aliases — 不給我們元件用
+
+`semantic.css` 的「shadcn Compat Aliases」段(`--popover`, `--popover-foreground`, `--muted-foreground`, `--accent`, `--accent-foreground` 等)**只是 `npx shadcn add X` 複製貼上時的安全網**,讓 shadcn 原生 className 不會因找不到 CSS variable 而 fallback。
+
+**我們自己 design-system 的元件 code 禁止直接使用這些 alias**:
+
+| 禁止(shadcn alias) | 必用(我們的 token) |
+|--------------------|--------------------|
+| `bg-popover` | `bg-surface-raised` |
+| `text-popover-foreground` | `text-foreground` |
+| `text-muted-foreground` | `text-fg-muted` |
+| `bg-accent` | `bg-neutral-hover` |
+| `text-accent-foreground` | `text-foreground` |
+| `bg-muted` | 這個是我們核可的 token(neutral-2 subtle bg),**不是** shadcn alias,OK 用 |
+
+**原則**:shadcn 原生 utility 只在 shadcn 自動生成的檔案**暫時**存在(作遷移緩衝);任何人類編輯或新增的元件 code 都必須用我們的 direct token。**用 shadcn alias = 設計 bug**,優先改為 direct token。
+
+**為什麼**:shadcn alias 是「臨時橋」讓 shadcn add 不炸;我們有自己 design opinion 後直接用 own token,保持 DS 單一真實來源。允許 shadcn alias 進我們的 code = 慢慢讓 shadcn 命名污染回流,DS 自主性退化。
+
+**曾經發生的 bug**:Popover.tsx / Command.tsx 保留 shadcn template 的 `bg-popover`, `text-popover-foreground`, `text-muted-foreground`, `bg-accent`, `text-accent-foreground` 多處,2026-04-18 session 時 audit 發現統一遷移為 direct token(`bg-surface-raised` / `text-foreground` / `text-fg-muted` / `bg-neutral-hover`)。hook `check_token_hygiene.sh` 現已自動攔截此類回流。

package/ds-canonical/references/ui-dev-rules.md

@@ -0,0 +1,60 @@
+# UI 開發規則 — 深度展開
+
+`.claude/rules/ui-development.md` 的 detail 版本。主章留 meta 規則(必重用既有 / 用 token / 檢查 pattern / `cn()` / 清 imports 後 runtime 驗證 / 一句話 pointer),本檔放 4 個 sub-rule 的完整規格。
+
+---
+
+## 同 flex 列的互動 slot 幾何鐵律(避免 gap token 被破壞)
+
+任何新 slot(status indicator / inline action / hover-swap button)放進既有 flex row 之前,**必須**執行 3 步 mechanical check:
+
+1. **grep 該行既有 interactive slot 的 box 尺寸**:讀 row host spec(FileItem rich row=56 用 Button xs 24 / compact row=24 用 Inline Action,依 item-anatomy「≤24 cap」canonical);grep stories 看 consumer 傳什麼
+2. **新 slot box 尺寸 = 既有 slot 尺寸**(嚴格相等):不同 → `gap-*` token 被 overflow 吃掉,實際 gap ≠ 宣告值;例外需明文 spec 註解
+3. **Hover state 也要驗**:hover-bg / ring / focus outline 若超出 box 會吃進 gap 空間
+
+**失敗案例**:2026-04-19 FileItem status-slot hover-swap 用 `ItemInlineActionButton` 16px(不符 rich 用 Button),hover-bg 24px overflow 吃掉 4px `gap-2` → status ↔ delete 實際 gap 變 ~4px 違反 8px。修法:rich row=56 用 Button xs 24 / compact row=24 用 Inline Action。
+
+**世界級鐵律**:同 flex 列互動元素統一 box 尺寸,gap token 才能如實呈現 — 跨元件治理層不變量,非元件內部細節。
+
+---
+
+## 新增數值前必先查既有 pattern(舉一反三)
+
+寫 gap / padding / font-size / line-height / icon size / border-radius 數值前,**必 grep 系統現值**。
+
+- `gap` → `fieldWrapperStyles`(gap-2)/ MenuItem cva / SelectionItem cva
+- `padding` → `--layout-space-loose/tight` / fieldWrapperStyles `px-3`
+- `font-size` → `typography.css` + item-anatomy reading/scanning 規則
+- `line-height` → scanning = leading-compact 1.3,reading = default 1.5
+- `icon size` → `ICON_SIZE` 常數(sm/md=16, lg=20)
+- `inline action` → item-anatomy「Inline Action 設計規格」(icon 16 / hover-bg=icon+2 / gap-2 / fg-muted → hover foreground)
+
+**舉一反三**:Select inline action gap-2 → 所有元件 inline action gap-2。MenuItem description reading 14px → 所有 reading mode desc 14px。確實需要新值 → 先提理由讓 user 確認,不自決。
+
+---
+
+## Padding source 分層規則(三層各自 canonical)
+
+| 層級 | 用途 | 來源 | 例 |
+|------|------|------|---|
+| **Chrome / Section / Card**(跨元件、密度切換)| page gutter / card padding / toolbar / dialog body | `p-[var(--layout-space-loose)]` / `p-[var(--layout-space-tight)]` | FileViewer toolbar / Dialog body |
+| **元件內 slot**(結構性、不隨 density)| MenuItem row / Field wrapper / Dropdown item padding | Tailwind `p-N`(`p-3` / `px-2 py-1.5` 等) | item-anatomy row `px-2` / Field `px-3` |
+| **精確幾何**(icon ↔ text 對齊、calc-based)| Button padding = `(field-height - icon-size)/2` | `p-[calc(...)]` / `p-[var(...)]` | Button `px-[calc((h-field-md-icon-md)/2)]` |
+
+**判斷法**:padding 會隨 density/theme 變動嗎?是 → layout-space token;元件內部 layout 結構?是 → Tailwind `p-N`;跟 icon/text/token 算出來?是 → calc()/var。
+
+**禁止**:Chrome padding 硬寫 `p-4`(density 切換會壞)/ 元件內 slot 用 `p-[var(--layout-space-tight)]`(密度切換讓 row 結構跑掉)。
+
+---
+
+## Icon size 來源分層規則
+
+Icon 尺寸按 context 分三類:
+
+| Context | 來源 | 例 |
+|---------|------|---|
+| **Row primitive 內**(MenuItem / TreeItem / SelectionItem / FileItem slot)| `ICON_SIZE[size]` 讀 `RowSizeContext`(自動 size-aware) | `<ItemIcon icon={User} />` 內部走 `ICON_SIZE[contextSize]` |
+| **Button startIcon / endIcon** | Button 自己 mapping(固定 16/16/20 by size)| `<Button size="lg" startIcon={Save} />` 自動走 20px |
+| **一次性 / 非 row / 非 Button**(chrome / decorative / toolbar)| inline `size={n}`,**n 必對齊 uiSize token**(16/20/24,不自創)| `<FileIcon size={16} />` |
+
+**禁止**:Tailwind `w-4 h-4` / `size-4` 表達 icon size(是 dimension 非 semantic)/ Row 內手刻 `<Icon size={16} />` 繞過 Context(density 切換不聯動)/ 自創非 uiSize 值(`size={18}` / `size={22}`)。

package/ds-canonical/rules/README.md

@@ -0,0 +1,34 @@
+# .claude/rules/ Charter
+
+## 這裡只收:path-scoped 規則(編特定 file 才 load,降 every-session context cost)
+
+每條 rule 一個 `.md` file,內含:
+- frontmatter `paths:` glob(`**/*.spec.md` / `**/*.tsx` 等)— Claude Code 自動只在編該 path 時 inject 進 context
+- body — 該 file family 的設計 / 撰寫 / 命名 / 紀律規則
+
+**核心特徵**:**只在編對應 file 才載入**(不像 CLAUDE.md 每 session 載入)。對齊 Anthropic 2026 推薦 path-scoped CLAUDE.md fragment pattern。
+
+## 當前居民
+
+| Rule | Paths | Scope |
+|------|-------|-------|
+| [meta-patterns.md](meta-patterns.md) | always(fundamental)| 31 active M-rules(M1-M32,M27/M33/M34/M35 retired)|
+| [spec-rules.md](spec-rules.md) | `**/*.spec.md` + `packages/design-system/src/**` | Spec 撰寫紀律 + SSOT / 邊界案例 / 職責分離 |
+| [ui-development.md](ui-development.md) | `**/*.tsx` + `**/*.ts` | 建 UI 前必讀 / Tailwind 5 條 / Token 4 條 / Props 命名 / shadcn |
+| [story-rules.md](story-rules.md) | `**/*.stories.tsx` | 三層 stories canonical + Title / 範例 / 撰寫紀律 |
+| [self-verify.md](self-verify.md) | `src/**` + `.claude/**` + `*.spec.md` + `*.tsx` + `*.css` | 4 階段(Pre/Mid/Post/Pre-commit)自主驗證 routine(2026-05-17 codify M10/M11/M20/M32 散在 meta-patterns 之 SSOT)|
+
+## 跟 CLAUDE.md 分工
+
+| | CLAUDE.md | .claude/rules/ |
+|---|---|---|
+| 載入時機 | 每 session start 載入(行數預算 ≤ 200)| 編對應 path file 才載入(降 context cost)|
+| 內容 | 6 mindset + 治理 / 稽核 / SSOT canonical / 任務導航 / fundamental rules | 該 file family 細節規則(spec 撰寫 / UI 開發 / story / self-verify)|
+
+## 新增 rule 流程
+
+1. **過 3 題**(per CLAUDE.md `# 治理 canonical`)— 既有 rule cover?Rule-of-3?7 天後還 fire 嗎?
+2. **檔名**:`<topic>.md`(kebab-case),內含 frontmatter
+3. **paths frontmatter**:glob 該 rule 該 load 的 path
+4. **加進本 README.md 表格**
+5. **MEMORY.md / CLAUDE.md 補 pointer**(若 cross-reference)

package/ds-canonical/rules/meta-patterns.md

@@ -0,0 +1,87 @@
+# Meta-Pattern 預警(31 active M-rules)
+
+**mindset #6 的具體化**。每條吸收數十個具體 bug,是失敗記憶索引上游。任務前先過全部 M-rules(M1-M32,M27 retired 2026-05-15 → M23(c) child / M33-M35 retired 2026-05-22 → folded into M20/M7/M23(d) per `/knowledge-prune` deep audit Lens 1+2)。
+
+## 2026-05-10 cluster cross-link(per codex Q-13 deep prune audit + 2026-05-22 fold update)
+
+31 M-rules(M1-M32,M27/M33/M34/M35 retired)分 6 cluster(舉一反三 grouping):
+
+| Cluster | M-rules | 共同主軸 |
+|---|---|---|
+| **A. SSOT-first / DS-anchor preflight** | M1 / M23(含 M27+M35 子規則)/ M29 / M30 | 視覺決策前必消費既有 SSOT;DS canonical 優先;spec.md 先 grep 找 owner;wrapper schema extends primitive;nearest same-purpose canonical wins |
+| **B. Benchmark discipline stages** | M8 / M22 / M26 | 訂 rule ≥3 家對照 / 寫 spec 含 cite / propose 前 WebFetch |
+| **C. Auto-integrate pipeline** | M14 / M19 / M31 | 對話結論 5-layer / trigger phrase auto-pipeline / claude-codex 5-step |
+| **D. Verify / similar-bug / visual coverage** | M10 / M13 / M15 | proactive scan / user 第 2 次截圖 / visual-audit-coverable |
+| **E. Propose-time discipline** | M18 / M21@watch | 4-Q 自檢 / 新元件抽象前 prop variant test |
+| **F. Sharp invariants(各自獨立)** | M2 / M3 / M4 / M5 / M6 / M7(含 M34 子規則)/ M9 / M11 / M12 / M16@watch / M17 / M20(含 M33 子規則)/ M24 / M25@watch / M28 / M30@watch / M32 | sharp invariant |
+
+`@watch` 標記(2026-05-15)= 該 M-rule 目前 absorbs 1-2 bugs(charter 要 ≥3)。1 quarter 觀察:無新 bug → demote 為既有 M-rule 子規則;有新 bug → 升 sharp keep。**2026-05-22 fold prune**:M33/M34/M35 各 absorb 1 bug → folded into parent cluster home(M33→M20 / M34→M7 / M35→M23(d)),減 3 條 M-rule 同時保留全部 invariants。Velocity 修正:本季 net add 12 rules(15 new − 3 fold)= 18 → 12 趨近 charter ≤3/quarter target,持續觀察。
+
+**Why no merge content**:per codex Q-13「Keep M24/M25 because they are sharp, reusable state/chain invariants」+ Layer A own 認 cluster headers 是檢索輔助,不該強行 merge content(各 M-rule 已 1-line tight)。Cluster headers help 「舉一反三」without 削減 M-rule 數量。**Task #19 M21-M29 meta-merge analysis(2026-05-10 closed)**:re-audit M21-M31 全部,verdict **無 merge candidate**,各 rule sharp invariant 覆蓋 distinct failure mode(M22 implement-time cite vs M26 propose-time cite / M30 wrapper-primitive 跟 M27 framework-vs-DS / M31 collab discipline 跟 M14 / M19 auto-pipeline 各 unique scope)。Cluster table 已 cross-link,不需 merge。
+
+## 2026-05-10 skills consolidation analysis(Task #20 closed)
+
+**Per Anthropic「~10 sweet spot」benchmark**:DS 現有 20 skills(`.claude/skills/` minus README),約 2x Anthropic typical recommend。**Verdict:無 aggressive merge candidate**,維持 20 skills justified:
+
+| 類別 | Skills | 為何不 merge |
+|---|---|---|
+| Core audit | design-system-audit / visual-audit / component-quality-gate / knowledge-prune | 各 sharp trigger,invoke logs 顯示高頻(design-system-audit 6 / knowledge-prune 7) |
+| Domain audit | ux-audit / performance-audit / code-quality-audit / product-ui-audit | D2/D3/D4/consumer-code dim 已 chain 進 design-system-audit |
+| Workflow | prototype / new-component / delivery-handoff / story-writing / story-auto-compile-migrate | create / prototype / final-handoff / story 各 phase distinct rare-event(per knowledge-prune retire rule 例外) |
+| Discipline | ensure-canonical / propose-options / codify-principle / codify-corrections / scan-similar-bugs / governance-health | trigger phrase / 4-Q gate / 5-layer artifact gen / batch log / post-fix scan / monthly metric 各 unique |
+| Collab | codex-collab | M31 5-step home,unique |
+
+**Marginal merge candidate**(留 user 後續 explicit approve):`codify-principle` + `codify-corrections` 都產 5-layer artifact,trigger 不同(live propose vs batch log)— 可合 `codify` 一統 skill。**不執行原因**:codex Q-13 sharp-rule preference + auto-mode 不 destructive 風險 + 兩 skill SKILL.md 各自 250 lines budget 內。User 後續 invoke `/knowledge-prune` 並 explicit approve 才動。
+
+**RFC**:Anthropic「~10 sweet spot」是 typical CRUD app benchmark;DS governance complexity(31 active M-rules + 全 dim audit per design-system-audit SSOT + dual-track codex collab + 8-home 治理)justified higher skill count。每 skill 都過 knowledge-prune retire rule(6 月 fire 或 rare-event 豁免)。
+
+
+| # | Meta-Principle | 能吸收的 bug 類型(舉例,非窮舉) |
+|---|---|---|
+| **M1** | **視覺決策前必消費 SSOT**(元件 / token / pattern / spec)。強制跑 `# SSOT 消費 canonical` 清單,沒列出 = 自創。 | `variant="bare"` 自發明 / chrome-header token 漏用 / Row 沒用 item-anatomy(詳 historical-bugs.md) |
+| **M2** | **消費 3rd-party lib 必驗 rendered DOM**(不信 docs)。任何 `[&\[data-...\]]:` attribute selector 針對第三方元件前,inspect 真實 DOM 有無該 attribute。Library API(fit / zoom / wheel step)先寫 3 行 POC 驗證行為,再寫到元件裡。 | react-day-picker `data-range-*` 不存在 / react-zoom-pan-pinch fit-to-page 算錯(詳 historical-bugs.md) |
+| **M3** | **Portal 逃逸 subtree context**(theme / density / provider)。任何 overlay 元件(DropdownMenu / Popover / Dialog / HoverCard)走 Portal 到 document body **不繼承觸發點的 subtree attribute**;theme 預設從 `<html data-theme>` 經 CSS 繼承(Portal 後 CSS chain 從 app root 起算)— 需要 override 才顯式 set `data-theme` on Portal Content;`data-density` 部分 overlay 刻意 lock `md`(詳 `density.spec.md`)。 | DropdownMenu 在 dark subtree 變亮 / Avatar HoverCard NameCard 文字白色(詳 historical-bugs.md) |
+| **M4** | **`_Group` 元件必隔離單 item 的 fieldCtx**。當 Group 元件(CheckboxGroup / RadioGroup / SwitchGroup)包在 Field 內,其 child items **不可共用 fieldCtx.id / fieldCtx.hasFieldWrapper**;Group 必建自己的 Context 告訴 items「你在 group 裡」。 | CheckboxGroup 共 fieldCtx.id,label 全抑制 / 點擊只 toggle 第一個(詳 historical-bugs.md) |
+| **M5** | **視覺 canonical 必 spec 聲明所有 state 疊加組合**。單一 state(today / selected / hover / disabled)有視覺定義不夠;**所有兩兩疊加、三疊加組合也要在 spec 有明文**。 | DatePicker today+selected 隱形 / hover+disabled ring 仍顯示(詳 historical-bugs.md) |
+| **M6** | **Stakeholder-visible 產出 → 強制進階稽核才出稿**(不是 merge 後補)。任何「有視覺可以給 stakeholder 看」的產出(新元件 / 元件新功能 / 新產品頁 / 比稿)**必過進階完整稽核**(6 維 + 全截圖視覺驗證)。日常 dev 可用高效模式,stakeholder gate 不可。 | FileViewer 初版 8+ 項給人看才發現(詳 historical-bugs.md) |
+| **M7** | **新 protocol / skill / rule 寫完,必反向 cross-check 既有 Meta-Principle 是否該套用**。尤其:consistency-class 的 protocol 必走「一致性類稽核必先全掃再判」(本章節);audit skill 必加「Self-improvement capture」Phase F step;Rule 觸及「canonical」「SSOT」「rationale」keyword → 必明示 substantive vs 表達層分權。**+ Sub-rule M34 (folded 2026-05-22)**:Hook detection regex 必對齊 spec wording 廣度。Triple test before merge new hook — (1) Spec rule wording 是「一般類別」(broad)還是「特定 keyword」(narrow)?(2) Hook regex 匹配「一般類別」還是只「特定 keyword subset」?(3) Spec broad + Hook narrow → **gap**,必擴 hook regex(unicode pattern / negative-list approach / counter-example DS-wide scan)。Propose 新 hook 必先寫 3-column table:`Spec wording` / `Hook regex` / `Gap?(broad-vs-narrow)`。 | principle-audit-protocol v1 漏套既有 Phase 0 全掃;2026-05-17 story name `照妳` `決策N` 等中英人話 detection regex 漏 |
+| **M8** | **訂立 / 修改 cross-component canonical 前必 world-class benchmark**。任何 predicate / decision tree / taxonomy 類 spec,**必先 grep 至少 3 家世界級 DS**(Polaris / Material / Atlassian / Ant Design / Carbon / Apple HIG / VS Code / Figma 等)列對照表,再訂 rule。**絕對禁止**憑直覺開場寫 predicate,user 問才補對照。每個 category / variant / case 必附世界級 reference(實作名或 API 指向),沒有對照的 rule 視同未成熟,走 Checkpoint 3。 | item-anatomy Inline Action 疊代 4 次才有世界級對照 |
+| **M9** | **Predicate / decision tree 寫完,present 前必 4 題自測**,防 membership drift。(a) 每 example 回跑決策樹;(b) cap / constraint cross-check;(c) 每 example 對 ≥3 家 world-class DS;(d) 每 category ≥1 example。任一題失敗 → 重收斂,**禁止 present**。 | Cat 1 IA 塞 endAction / FileItem sm 違 ≤24 cap |
+| **M10** | **Proactive exhaustive scan**:canonical migration 完成前禁止只改「直覺相關」元件;final report 前禁止省略「我知道但沒講」的 tech debt。**Mechanical 落地**:每 fix commit 後 `/scan-similar-bugs` skill 強制 grep DS-wide。 | dismiss migration 漏 FileViewer / 7 題 silent tech debt user 一次炸 |
+| **M11** | **User-perspective interactive state walk**:改完 UI 後 present 前必親自走 7 題 self-test(static / hover / focus-visible / active / keyboard / 範例真實性 / CSS 對稱)。每 UI 改動未跑 7 題就 commit = 違反。 | ListBody 修完 user 連抓 5 波 |
+| **M12** | **Binary strict rule + fix-time root-invariant pre-question(「必 X」/「禁 Y」/ bug fix)前必 benchmark + invariant test**。3 題自測:≥3 家世界級一致 / counter-example scan / root invariant vs surface observation。震盪症狀(A→not A→A)= meta invariant 沒抓到,**停下 present**。**Fix-time 延伸**(2026-05-12 absorbs 原 M32(b)):visual / behavior bug 改前必 inline 答 3 題 — Q1「root invariant 是什麼?」Q2「symptom 在哪 layer?」Q3「fix 是 root-layer 還是 surface-layer?」。surface-only 修(改 symptom 不動 invariant)違反。對齊 5-whys / Toyota TPS / Linux kernel「fix the root not symptom」canonical。 | hover bg 震盪 4 次(bg-edge vs content-padding invariant);2026-05-12 cell-align fix surface-modify Field padding 不動 inline-flex `!h-full` root invariant |
+| **M13** | **User 第 2 次提相關問題 → 自動截圖 verify**。當 user 就同一視覺 / 行為主題第 2 次問 / 糾正,AI 必 invoke 截圖 verify(`visual-audit.mjs --scope=component:XXX`)。第 3 次才 verify = 違反。**Corollary**:user 指定「所有 X 都要 Y」,同 session 全部做完 + 建 hook 防線。 | avatar-NameCard migration 分批拖延 user 第 2 次催才全改 |
+| **M14** | **對話結論 → AUTO integrate pipeline**(不等 user 催)。每次 canonical / 設計決策 / 新 rule 結論時必執行 5-layer pipeline ≥ 3 層落地:M8 benchmark / SSOT home 識別 / spec / code / hook / CLAUDE.md / memory / 驗證。User 問「有沒有整合到 X」= M14 violation。**Governance auto-trigger**:`session_start_governance_check.sh` 檢查 hook / memory / CLAUDE.md / 上次 prune 達標 → 自動 inject「建議 /knowledge-prune」directive(soft 提示;hard cap 升 BLOCKER)。**數值 SSOT**:`session_start_governance_check.sh`(L19-22 + L173)+ CLAUDE.md `# 治理 canonical` 行數預算表;本 M-rule 不重述,避免 drift。 | chrome-header / dismiss / hoverCard 每個都 user 提醒才整合 |
+| **M15** | **Product UI flow 必須 visual-audit coverable**。任何 stakeholder-facing flow 必含 OpenSnapshot 類 stories(`defaultOpen` / `useState(true)` / `play()`)。禁留「需真人點擊才能看到的 state」未截圖。 | Sheet / FileViewer 只截 trigger 缺 OpenSnapshot |
+| **M16** | **訂 standalone card/pill 容器 canonical 必同步訂 multi-instance gap canonical**(`@watch` 2026-05-22)。3 條公式:同類 standalone → 必 gap;同類 permanent flush → 0 gap OK;混合語言 → 必取最保守 gap。Hook `check_item_list_gap.sh` 預警 + audit dim verify。**@watch 2026-05-22**:單 bug source(FileItem rich/compact)— 1 quarter 觀察是否 absorb ≥3 同類 bug,否則 demote 為 item-anatomy.spec.md 子規則。 | FileItem rich card + compact bg 連續相連 |
+| **M17** | **SSOT 必可傳播**(非僅 markdown)。同值 / 同公式 hard-code 在 3+ consumer = 必抽成 token / primitive / utility class。**兩層 SSOT 架構**:底層 token(值可調)+ primitive(結構封裝 + 消費 token);世界級對照 Material/Carbon/Ant/Polaris 共識。 | mt-0.5 canonical 13 consumer hard-code 假 SSOT |
+| **M18** | **Propose-time 6 題自檢 gate**(2026-05-18 升 4→6 加 Q0 + Q5)。列 option / 建議前必 inline 跑 **Q0 Pre-ASK self-verify problem 真存在**(2026-05-18 加,absorbs Sheet/inline-action/SurfaceBody 三題誤判)/ Q1 M8 benchmark / Q1' M23 DS canonical / Q2 M17 SSOT / Q3 Rule-of-3 / Q4 M10 下游吸收 / Q5 Issue 100% mapped。Reject 不列出,通過寫 6-Q 證據表。**Q0 強制動作**:propose 給 user 拍板前必 grep DS-wide + Read 相關 spec.md + Read consumer usage 確認 problem 真存在,沒 grep 就斷言「N 元件缺 X / 該 migrate」= 撤回 propose。SSOT → `.claude/skills/propose-options/SKILL.md`。Hook `check_propose_pre_grep_verify.sh` 機械強制 Q0。 | 2026-05-18:Sheet 補 / 5 元件 inline-action migrate / 5 元件 SurfaceBody migrate 三題全錯誤 propose 給 user 拍板,grep 後 0 個真 gap(Sheet 已完整 / 6 元件全消費 inline action / Dialog 走 ScrollArea canonical 不該用 SurfaceBody / HoverCard 是 behavior primitive / DatePicker TimePicker 是專用 layout / Sidebar 是 chrome 不是浮層)。User verbatim「不是老早就跟你說過要我決策前請先基於我們所有的檔案包括設計原則包括 ssot 包括所有實作代碼,自主自動驗證這些問題是否真的是問題」 |
+| **M19** | **Trigger phrase auto-pipeline**。「確保 / 一定 / 永不漂移 / ensure / always」trigger → 自動 5-layer ≥ 3 層落地 + M8 + M17 + M10。Substantive 走 STOP。SSOT → `.claude/skills/ensure-canonical/SKILL.md`。 | story splitting 2026-04-26 user 第 N 次強調才落地 |
+| **M20** | **AI 自問 best-practice + 自動 self-improve**(不靠 user 提醒)。Stop hook `rule_infra_best_practice_score`(R5 in `stop_passive_logging.sh`,2026-05-13 folded from retired `stop_meta_self_audit.sh`)每 turn 跑 score → < 80 / regression ≥ 5 log to `score-history.jsonl`;next-turn UserPromptSubmit `inject_pending_self_audit.sh` 注入 BLOCKER prompt。**Threshold 數值 SSOT**:`session_start_governance_check.sh`(L19-22 + L173)+ CLAUDE.md `# 治理 canonical` 行數預算表;本 M-rule 不重述具體 cap,避免多 home 漂移(2026-05-22 prune codify per Rule-of-3 violation fix)。**+ Sub-rule M33 (folded 2026-05-22)**:Stop hook overfire → AI conservative-defer 反 pattern。同 stop hook fire ≥ 5 次 within session → AI 自動 hedge / 撤回 claim / 「下個 session」defer **可做工作**。真理由 vs 偽 prereq 區辨 — (a)真 prereq 缺(cross-frame test fixture 等)= 具體 deliverable need;(b)偽 prereq(「context budget」「省工」「下個 session」)= conditioned hedge,user 反覆催 = 真理由不存在。**Rule**:AI reply 含「下個 session」「context budget」「省工」keyword 且前 1 turn user 已拍板「全部做完」/「繼續」/「沒理由不做」→ BLOCKER。對齊 Atlassian「stop using vague defer」+ Linux kernel patch review。 | user 10 次問「best-practice 嗎」直到外部 benchmark 確認真 gap;2026-05-13 claim-verify-gap stop hook fire 12+ 次 → 我每 reply 自動 hedge → user 多次糾正「沒理由不做」 |
+| **M21** | **新元件 / 新 sub-component 抽象前必過 prop variant test**。當新元件名 = `<Existing>+suffix`(Time / Range / Color / Light / Dark / Filled / Outline / Compact / Rich)→ 強烈 signal 應為 prop variant on `<Existing>`。3-test 通過才能分(全失敗 → prop):(1) `<Existing>` 加 prop 無法達成同 DOM/behavior?(2) ≥3 家 world-class DS 用分離元件而非 prop(必 cite source)?(3) value 結構或 contract 真的不同(如 Range = [start, end])?Hook check_premature_abstraction(retired/未實作;mindset enforcement)。 | DateTimePicker 從 DatePicker 拆 → 撤回合併 `<DatePicker showTime>`(2026-05-02);DataTableFilterPanel 5-file → 撤回 sub-file pattern |
+| **M22** | **Benchmark claim 必附 inline source citation**(不可憑印象)。寫 spec / tsx 含「Ant / Material / Polaris / Atlassian / Carbon / shadcn / Radix」等 world-class DS claim,必同段附:(a) inline URL(domain 對應 DS 官網 / GitHub source);(b) GitHub source path + line ref `#L42`;(c) screenshot reference `snapshots/...`;(d) 顯式撤回 `@benchmark-unverified`。Hook `check_benchmark_citation.sh` 機械化警告(P1 soft)。每次 implement 前跑 WebFetch 取真 source,不憑印象解碼。 | claim「Ant showTime range = 2 calendars」憑印象,實證 source code `multiplePanel = false` = 1 calendar(2026-05-02 鬼話事件)|
+| **M23** | **DS 內既有 canonical 優先於外部 benchmark**。寫 visual decision(color / size / spacing / typography / state)/ prop name namespace 前必先 grep DS 既有 codified token / variant / pattern / prop;命中 → 必對齊;沒命中 → 才引 world-class + 同步補 canonical。**禁止**:外部 benchmark(M22 cite OK)直接覆蓋 DS 內已有 canonical。Mindset #2「優先消費既有」的 visual layer。判斷流程:(a) grep 該屬性 / prop 既有 token/variant/usage;(b) 命中 canonical?有 → 用,沒 → 走 M22 cite 然後 codify;(c) **prop name conflict 子規則**(former M27,2026-05-15 collapsed):外部 framework prop name(TanStack `size` / Radix `disabled` / dnd-kit attrs 等)跟 DS 既有 prop 同字不同義 → wrap-and-rename(DS-internal naming + pre-process map);(d) **nearest same-purpose canonical wins 子規則**(former M35,2026-05-22 folded):寫 stories / UI composition wrap 既有 primitive 前必先 grep + Read primitive 的「完整佈局」production canonical story(eg. `sidebar.stories.tsx#IconCollapse`)抄 archetype 結構 / helper / variant — 不准憑記憶寫 simplified mock。**Cite 存在 ≠ consume 落實**(codex 2026-05-20 verdict)。最相近同目的 canonical 用法 > 泛用 component spec / 寬鬆 pattern wording。Registry SSOT `.claude/references/story-baseline-registry.json` + hook `check_story_invariants.sh R8 story_archetype_registry`。 | 2026-05-03 chevron color:DS `text-foreground` (icon-only Button neutral-9 85%) vs 我憑「Ant 5 家 muted」覆蓋 → 自開新 tier 違反一致設計語言。2026-05-06 column width:DS 49+ 處 `size: 'sm'\|'md'\|'lg'` density vs TanStack `size: 280` px = 同 prop 不同義 → `meta.width` wrap。2026-05-20 AppShell-vs-Sidebar drift:simplified mock + jargon + wrong variant + 不消費 primitive props。Hook `check_data_table_size_num_to_meta_width.sh` + `check_story_invariants.sh R8` |
+| **M24** | **State 顯著性 precedence:disabled > muted > emphasis**。元件在 disabled state 時,內部所有文字載體(label / value / placeholder / icon)統一切 disabled token(`text-fg-disabled` neutral-6),**不**繼續 muted token(`text-fg-muted` neutral-7)。muted 是裝飾,disabled 是語意 state — state 勝 emphasis。同理:error / warning state 內 placeholder 應對應 state token。Hook check_disabled_placeholder_color(retired/未實作;mindset enforcement)。 | 2026-05-04 5+ violation:`bareInputStyles` 永遠 muted / `select.tsx` 3 處 plain&tag empty 不分 mode / `textarea.tsx` 同;Input.tsx 唯一做對。User 5+ 次糾正才 codify |
+| **M25** | **Layered chain invariant 必整鏈 forward(viewport-aware overlay scroll 範例)**。Overlay surface(Popover / HoverCard / Dialog / Sheet)的 viewport-aware scroll 機制要求 root → SurfaceBody 之間**所有中間 wrapper 都 forward `flex flex-col h-full`**;任何中間 div 沒 forward → SurfaceBody flex-1 失效 → body 不 scroll。同類 chain pattern:density 透傳 / fieldCtx 鏈 / theme subtree(M3 portal 逃逸對偶)。Hook check_overlay_panel_scroll_chain(retired/未實作;mindset enforcement)。 | 2026-05-04:Filter / Sort panel root `<div w-[640px]>` 無 flex-col → user 縮 viewport 時 body 不 scroll。NameCard 因自設 max-h flex-col 才繞過(無中間 wrapper) |
+| **M26** | **Behavior / visual canonical decision 前必跑 WebFetch + WebSearch 取 ≥ 3 source,不可憑印象 propose**。M22 升級版 — M22 管「寫 spec / tsx 含 claim 必附 cite」(實作後),M26 管「propose / 決策前必先 fetch」(實作前)。Pipeline:(1) WebFetch 3 家世界級 source(Atlassian / Material / Polaris / Ant / Carbon / Apple HIG / shadcn / Radix);(2) 全 403 → WebSearch fallback 用 snippet,**明示「search-only confidence」**;(3) WebFetch + WebSearch 都失敗 → STOP propose,告知 user「無法 verify,要看 screenshot/實機」。Hook `check_propose_without_benchmark.sh`(PreToolUse Edit/Write 攔截 visual decision keywords + 近 N turn 無 fetch tool call → BLOCKER)。 | 2026-05-05:user 反覆糾「為什麼每次都沒 webfetch 只憑印象」— Jira drag handle / cell display 兩題我憑印象 propose 多輪;升級成硬規範 |
+<!-- M27 retired 2026-05-15(per /knowledge-prune D3 audit):self-flagged「M23 子規則」 → collapsed into M23 sub-bullet (c) "framework prop name namespace conflict"。Original case (TanStack size vs DS density) + hook `check_data_table_size_num_to_meta_width.sh` retained 在 M23 children。 -->
+
+| **M28** | **Solo-work git ops 必先 grep canonical**(mindset #2 AI-ops 子規則)。AI 自己 git/branch/PR/merge ops(`git checkout -b` / `gh pr create` / `git push origin main` / `mcp__github__create_pull_request` / `mcp__github__merge_pull_request`)前必 grep `.claude/memory/feedback_solo_dev_workflow.md` + CLAUDE.md `# Git solo-work canonical`,**不憑直覺反射開新 branch / 開 PR / 自決 merge**。Solo work 鐵律:1 chat = 1 working branch / no PR / 等 user「push」 trigger 才 merge main。Hook `check_solo_workflow.sh` 機械化攔(R1 第 2 個 branch / R2 PR creation / R3 merge 無 user trigger keyword)+ override `CLAUDE_BYPASS_SOLO_WORKFLOW=1` audit-logged。 | 2026-05-08:同 session AI 開 5 branch + 2 PR (#7 #8),user 第 3 次糾正才升 mechanical;memory file 2026-05-04 codified 但 markdown 級 + AI 沒 grep 直接憑印象 = mindset #2 違反 |
+| **M29** | **DS Anchor Preflight invariant — 視覺 / 結構 propose 前必 grep `*.spec.md` 找 owner SSOT**。動 component / pattern / token 視覺結構前,**必先**:(a) `rg <touched component> + <behavior keyword>` in `packages/design-system/src/**/*.spec.md` (b) 出 **3-column owner table**(`candidate owner spec` / `canonical sentence/table row` / `conflicting code/comment if any`)(c) 若 spec ≠ code → STOP 寫 RFC 不直接 propose implementation。沒 3-column = anti-pattern,提案不被接受。SSOT index `.claude/references/ssot-index.md`(high-risk interface owner mapping)Step 0.1 先查再 grep verify。Hook `check_ds_anchor_preflight.sh` soft warn。codex-collab/SKILL.md Step 0.1 mandatory pre-grep。對齊 Carbon「design spec is source of truth」+ Atlassian「system-wide coordination first」。 | 2026-05-08:Claude+Codex 連 5 round 跳過 spec anchor pre-grep,直覺加 primitive(D path / Path A);user 抓「為何沒研讀設計原則」 |
+| **M30** | **Wrapper-vs-primitive schema unify invariant — wrapper API option / config schema 必 `extends` primitive SSOT,且 wrapper 內部轉換 mapping 必 forward 全 primitive surface field**。Primitive(`SelectMenuOption` / `MenuItemProps` / `ItemAnatomyProps` 等)宣告 SSOT 後,所有 wrapper(`Select.SelectOption` / `Combobox.SelectOption` / `PeoplePicker` 等)若有同類 schema,(a) 用 TypeScript `extends primitive` 機械繼承,**不可平行 declare** weak schema(同名 / 部分欄位)(b) wrapper 內部 `xxxToYyy()` mapping 必 forward 全 primitive surface field(不可只 forward `value` + `label`,silently drop avatar / description / disabled 等)(c) wrapper-only field 加在 `extends body`(不污染 primitive)。Hook `check_wrapper_primitive_schema_drift.sh` 機械強制(P0 BLOCKER):grep `export interface .*Option \{` cross components/,同名 ≥ 2 處且未 `extends` primitive → BLOCK。對齊 Polaris ChoiceList / Material Autocomplete / Carbon Dropdown wrapper-vs-primitive schema-extension idiom。 | 2026-05-10 PeoplePicker multi-mode 漏 avatar:`Combobox.SelectOption = { value, label }` weak schema(跟 `Select.SelectOption` 同名不同 fields)+ `Combobox.menuOptions` mapping 只 forward 2 fields → dropdown rows 永遠純文字。user 抓「為什麼之前會把 people picker 改壞 + 還有沒有其他東西也改壞」。Round 1 commit `561945b` 修(Combobox extends + forward 全 field)+ Round 2 codify。 |
+| **M32** | **Audit script 必 pixel-quantified verify ≠ attribute existence**(2026-05-12)。Audit 必驗 `rect.top / .left / .height` numeric pixel,**不**可只驗 `getAttribute('data-state')` / `class.includes(...)` = false-positive trap(DOM-pass ≠ visual-pass)。對齊 Material X-DataGrid / AG Grid playwright pixel snapshot / Polaris visual diff canonical。Hook `check_pixel_quantified_audit.sh` 機械強制(scans `getAttribute(` without paired `getBoundingClientRect(`)。**Split note**:原 mega 8 sub-invariants 拆 4 home — (b) fix-time root-invariant → M12 extension / (c)(d)(h) batch + parallel + claim-verify → `/bug-fix-rhythm` skill / (e) tool preflight → memory `feedback_tool_binary_preflight_sweep.md` / (f) ship gate → CLAUDE.md `# 稽核 canonical` / (g) Layer marker → M31 + hook。git blame 2026-05-12 commit 留 audit trail。 | 2026-05-12 4 audit-vs-visual gap absorbed:cell-align / divider 2px / breadcrumb tooltip / row-alignment 全 audit「Δ=0 ALL PASS」但 user 抓視覺壞(詳 historical-bugs.md)。|
+| **M31** | **Adversarial dual-track 5-step canonical**(2026-05-10 user directive,verbatim quotes → `memory/feedback_codex_dual_track_synthesizer.md`)。**Step 0 入口 gate**:Claude 自試(grep / read source / cite DS canonical / WebFetch)完;啟 codex collab criteria 兩種:(a)自試卡 root cause / design tradeoff,OR(b)user 明確 keyword「跟 codex 討論 / 比稿 / 辯論 / dual-track」。**禁** auto-fire。**Step 1-5**(啟動後每題必過):(1)各自熟讀 spec/canonical/source(M29 anchor pre-grep + M23 既有 canonical 優先)(2)各自驗證(`tsc -b` + invariant + audit;codex `exec -s read-only`)— **不可只一方 verify**(M20)(3)各自視覺稽核(playwright + DOM inspect + pixel-level)(4)各自 3-column cite propose(`spec.md path:line / 引文 quote / reasoning`)— hand-wave 無 cite 自動撤回(5)整合「完美完整版本」**not pass-through**:agree → synthesize 補對方缺漏;disagree → cite battle,evidence stronger 勝。**禁**:pass-through codex propose(M28「被牽著走」);commit 無 3-column cite verdict。Hook `check_codex_collab_5step.sh` 機械化攔(P1 soft)。對齊 RFC 學術同儕審查 / Linux kernel-mailinglist cite source / Google ML eng-design-review。 | 2026-05-10 Issue 8 cell border:codex propose「Field edit border 透明」Claude pass-through ship → user「被 codex 牽著走」→ cite battle: `field-controls.spec.md` state machine + `item-anatomy.spec.md` cell 4-edge grid not in Field scope → 落地雙 owner;Issue 11 同 pattern cite battle ship retire + RFC backfill。 |
+<!-- M33 retired 2026-05-22(per /knowledge-prune deep audit Lens 1+2):folded into M20 as sub-rule「Stop hook overfire defer anti-pattern」。Original session context(2026-05-13 claim-verify-gap)+ hook `stop_self_audit.sh` P0 detection retained at M20 entry。Single-bug rule → 與 M20 同類「AI self-correction under feedback signals」合併。 -->
+
+<!-- M34 retired 2026-05-22(per /knowledge-prune deep audit Lens 1+2):folded into M7 as sub-rule「Hook detection regex 必對齊 spec wording 廣度」。Original Triple test + 錨例(story-rules.md name field detection)retained at M7 entry。Single-bug rule + same-class「rule-authoring hygiene」與 M7 合併。 -->
+
+<!-- M35 retired 2026-05-22(per /knowledge-prune deep audit Lens 1+2):folded into M23(d) as sub-rule「Nearest same-purpose canonical wins」。Original verdict(codex 2026-05-20「Cite 存在 ≠ consume 落實」)+ Triple test + registry SSOT + hook R8 retained at M23(d)。Single-bug rule + same-class「優先消費既有」與 M23 合併。 -->
+
+## 判斷 meta-principle 是否漏寫的 test
+
+- 同類 bug 一年內被糾正 3 次 → meta-principle 漏寫或沒執行,檢討本清單
+- 某 bug 跟現有 M-rules 任一條對不上 → **先評估 meta-merge 既有 M-rule(velocity ≤ 3/quarter,單 M-rule 必吸收 ≥ 3 prior bugs)**;真無上游覆蓋才考慮新增 M-rule。M-rule 不該無限膨脹
+
+## 與失敗記憶索引的關係
+
+Meta-principle 是**上游**(預防);具體 bug 歷史詳解移到 `.claude/skills/design-system-audit/references/historical-bugs.md`。CLAUDE.md 只留 meta-principle one-liner anchor + pointer。

package/ds-canonical/rules/self-verify.md

@@ -0,0 +1,53 @@
+# Self-verify canonical(path-scoped)
+
+僅在編輯任何 file(`src/**` / `.claude/**` / `*.spec.md` / `*.tsx` / `*.css`)時 load。
+
+**Why**:M10/M11/M20/M32 散在 meta-patterns,缺單一「改檔前中後該驗什麼」canonical。本 rule SSOT。對齊 Linux kernel patch checklist / Toyota TPS 自働化 / Google CL pre-submit。
+
+## 4 階段強制(每階段 fail 任一 → STOP)
+
+| 階段 | 動作 | 工具 / cmd |
+|---|---|---|
+| **Pre-edit** | (1) M29 3-column owner table(grep `*.spec.md` 找 anchor)(2) M23 既有 canonical 優先(`# SSOT 消費 canonical` 清單)(3) Touched file inventory + Read 真讀(非憑記憶)(4) 若 SSOT-UI/UX substantive → STOP 用中文 propose 等 user 拍板 | grep / Read / propose-options skill |
+| **Mid-edit** | (1) 每 5-8 個檔案或跨新 domain 跑 scoped invariant grep(2) 發現 spec/code 衝突 STOP,不選邊(3) Hook 自動 intercept(check_substantive_edit_approval_preflight / check_solo_workflow / check_story_invariants 等)| auto-fire hooks |
+| **Post-edit** | (1) `npx tsc -b`(任何 tsx/ts 改)(2) 相關 invariant script(`node scripts/data-table-invariants.mjs` 若動 DataTable / `node scripts/audit-content-quality.mjs --check` 若動 spec)(3) M10 proactive scan(`/scan-similar-bugs` 或 manual grep 同 pattern DS-wide)(4) UI 改動加 visual probe(`/visual-audit --scope=changed` 或 Playwright screenshot)(5) M14 5-layer pipeline(spec / hook / SKILL / CLAUDE.md / memory 該動的同步)| `tsc` / `*.mjs` 腳本 / visual-audit |
+| **Pre-commit / Pre-final** | (1) Claim-verify table:每「已修」「已驗」對應具體 command + artifact + file:line(2) 過 `scripts/audit-content-quality.mjs --check`(3) Stop hook BLOCKER 紅燈通過(claim-verify-gap / codex-verify / codex-transport)(4) Commit message 含 cite + verdict keyword 滿足 `check_codex_collab_5step.sh` | claim-verify table + content-quality + stop hook |
+
+## 強制 trigger condition(滿足任一 → 整 4 階段必跑)
+
+- 動 `packages/design-system/src/**`(production code)
+- 動 `*.spec.md`(canonical text)
+- 動 `.claude/{rules,skills,hooks,memory,commands}/**`(governance)
+- 動 `CLAUDE.md`
+- 動 token(`packages/design-system/src/tokens/**`)
+- 動 component primitive consumer 行為
+
+## 例外 escape(明寫,**不**靠記憶)
+
+- Typo fix(無語意改變)→ Pre-edit + tsc 即可
+- 純 markdown layout / 標點 → tsc + content-quality 即可
+- Hook script 內部 logic refactor(無 BLOCKER 邏輯變)→ Pre-edit + smoke test(`bash -n` + `echo {} | bash hook.sh`)
+- Audit / explore agent dispatch(不動 file)→ Pre-edit 即可
+
+## Mechanical enforcement
+
+- **Pre-edit**:`check_substantive_edit_approval_preflight.sh`(production code)+ `stop_self_audit.sh`(spec/canonical 補位)+ `check_ds_anchor_preflight.sh`(M29 anchor)
+- **Post-edit**:`stop_self_audit.sh` Mechanism 1(claim-verify-gap)BLOCKER
+- **Pre-commit**:`scripts/audit-content-quality.mjs --check` + `scripts/extract-canonical-rules.mjs` 各 fail = block
+
+## Anti-pattern(永久 ban)
+
+- ❌「我感覺修好了」沒跑 tsc / invariant 就 claim done
+- ❌ 動 spec / src 沒先 grep owner anchor(M29 違反)
+- ❌ 改 hook 沒跑 syntax check + smoke test
+- ❌「下個 session 補」defer 可做的 verify(M33 違反)
+- ❌ pass-through Explore / codex propose 沒 own-version 比稿
+
+## 對齊歷史
+
+- Linux kernel:`scripts/checkpatch.pl` pre-submit + `git log --oneline | head -3` 後 sign-off
+- Toyota TPS:Jidoka(自働化)— 機器發現異常自己停,人別繼續(對應 hook BLOCKER)
+- Google CL:LGTM + 必跑 presubmit(對應 Pre-commit table)
+- Atlassian RFC:cite + counter-example scan 必過 reviewer round
+
+對應 CLAUDE.md `# 自主執行 canonical` + meta-patterns M10/M11/M20/M32。

package/ds-canonical/rules/spec-rules.md

@@ -0,0 +1,25 @@
+---
+paths:
+  - "**/*.spec.md"
+  - "src/design-system/**"
+  - "packages/design-system/**"
+---
+
+# Spec 規則(path-scoped)
+
+僅在編 `*.spec.md` 或 `src/design-system/` 內容時 load。
+
+## 核心原則
+
+- 回答設計問題前必先讀相關 spec.md,不憑記憶
+- 編輯 spec 或建新元件時必對照 **Polaris / Material / Ant / Atlassian / Carbon / Apple HIG** 的 7 維度:何時用 / 何時不用 / 近親分界 / 常見誤解 / 相關 links / 空值 / 驗證 / Loading / a11y 預設。SegmentedControl spec 是本專案 template
+- 編輯 spec 必交叉比對相關 spec + Storybook,確認無矛盾 / 術語一致 / 無重複
+- 與既有 spec 有邏輯衝突 / 概念混淆 → 主動提出討論,不默默改 / 不迴避
+- 所有元件遵循 shadcn 框架(forwardRef / Slot / data-* / cva),不從零重寫
+- 每個元件 spec「定位」段必明確宣告實作基礎:`基於 Radix X` / `基於 cmdk / sonner` / native / `自建 + 理由`(自建必說明為何不用現有 primitive)
+- Spec 文字品質:不描述視覺形狀 / 實作細節(「窄長形」「會變寬」「zero layout shift」屬 story 不進 spec);術語一致;「禁止事項(❌)」列所有常見誤用
+- **a11y 段強制**:互動元件 spec.md 必含 `## A11y 預設` 段(列 ARIA + Keyboard map);純視覺 indicator(Badge / Tag / Separator / Skeleton)豁免明文寫「本元件無互動」
+
+## SSOT + 邊界案例覆蓋 + 職責分離
+
+詳 `.claude/references/spec-rules.md` — SSOT 深度判斷 / reciprocal 規則 / 目前 6 個 SSOT anchors / 邊界案例 scope 預設(Field 家族 / dark mode / density / 純 wrapper)/ spec 與 tsx 職責分離 / calc() 公式表達。