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

package/ds-canonical/hooks/tests/test_check_consumer_ds_primitive_misuse.sh

@@ -230,6 +230,118 @@ expect_silent "25. P8 nearmiss shadow-[var(--elevation-100)] → silent"
 run_hook "$PROD_TSX" 'export const C = () => <div className="max-w-[600px] grid-cols-[1fr_2fr]">x</div>'
 expect_silent "26. P8 nearmiss max-w-[600px]/grid-cols-[...](非色字 shadow)→ silent"
 
+# ── 手刻 menu-item 可點列(2026-07-10 WM TypeSettingsDialog 左 rail 錨例)──
+# 27. POSITIVE:手刻 button + hover:bg-neutral-hover + bg-neutral-selected 成對 → BLOCK
+run_hook "$PROD_TSX" 'const cls = `flex w-full items-center gap-2 rounded-md hover:bg-neutral-hover ${sel ? "bg-neutral-selected" : ""}`; export const C = () => <button type="button" className={cls}>Task</button>'
+expect_block "27. 手刻 nav row(hover+selected 成對)→ BLOCK"
+
+# 28. NEGATIVE:同簽名 token 出現但已消費 <MenuItem>(正道)→ silent
+run_hook "$PROD_TSX" 'export const C = () => <MenuItem size="sm" selected startContent={<Badge/>}>Task</MenuItem> /* hover:bg-neutral-hover bg-neutral-selected */'
+expect_silent "28. 消費 <MenuItem> → silent"
+
+# 29. NEGATIVE:只有 hover 無 selected(單純 hover row,非 menu-item family 簽名)→ silent
+run_hook "$PROD_TSX" 'export const C = () => <button className="hover:bg-neutral-hover">row</button>'
+expect_silent "29. 只 hover 無 selected → silent"
+
+# 30. NEGATIVE:escape marker → silent
+run_hook "$PROD_TSX" 'export const C = () => <div className="hover:bg-neutral-hover bg-neutral-selected">x</div> // @nav-row-handcraft-ok: calendar cell 非 menu 語義'
+expect_silent "30. @nav-row-handcraft-ok escape → silent"
+
+# ── 2026-07-10 批次 A(治理覆蓋 matrix 收官)──
+# 31. C5 POSITIVE:亮色底 + text-white 對比配對違規 → BLOCK
+run_hook "$PROD_TSX" 'export const T = () => <span className="bg-[var(--color-amber-6)] text-white size-4">A</span>'
+expect_block "31. C5 亮色底+text-white 配對 → BLOCK"
+
+# 32. C5 NEGATIVE:CAT_SOLID 正道(深字桶自帶 on-emphasis-dark)→ silent
+run_hook "$PROD_TSX" 'export const T = () => <span className={`size-4 ${CAT_SOLID[hue]}`}>A</span>'
+expect_silent "32. C5 消費 CAT_SOLID → silent"
+
+# 33. C18 POSITIVE:children 計數括號串接 → BLOCK
+run_hook "$PROD_TSX" 'export const H = () => <span>{group.label} ({items.length})</span>'
+expect_block "33. C18 {label} ({count}) 串接 → BLOCK"
+
+# 34. C18 NEGATIVE:aria-label 字串層(attr 非 children)→ silent
+run_hook "$PROD_TSX" 'export const H = () => <span aria-label={`${label} (${count})`}>{label}</span>'
+expect_silent "34. C18 aria-label 括號形 → silent"
+
+# 35. C17 POSITIVE:vertical Separator 無 mx → BLOCK
+run_hook "$PROD_TSX" 'export const B = () => <><Button>A</Button><Separator orientation="vertical" className="h-6" /><Button>B</Button></>'
+expect_block "35. C17 vertical Separator 無 mx → BLOCK"
+
+# 36. C17 NEGATIVE:h-6 mx-1 canonical → silent
+run_hook "$PROD_TSX" 'export const B = () => <><Button>A</Button><Separator orientation="vertical" className="h-6 mx-1" /><Button>B</Button></>'
+expect_silent "36. C17 h-6 mx-1 canonical → silent"
+
+# 37. C20 POSITIVE:手刻 underline 連結字 → BLOCK
+run_hook "$PROD_TSX" 'export const D = () => <span className="text-primary underline">upload</span>'
+expect_block "37. C20 裸 underline 連結 → BLOCK"
+
+# 38. C20 NEGATIVE:no-underline(合規移除底線)→ silent
+run_hook "$PROD_TSX" 'export const D = () => <a className="no-underline text-primary">upload</a>'
+expect_silent "38. C20 no-underline → silent"
+
+# 39. C10 POSITIVE:spacer 把 Search 推最右 → BLOCK
+run_hook "$PROD_TSX" 'export const T = () => <div><Button>Add</Button><span className="flex-1" /><Input placeholder="Search employees" /></div>'
+expect_block "39. C10 業務 search 被推最右 → BLOCK"
+
+# 40. C10 NEGATIVE:search 在業務層(無 spacer 前置)→ silent
+run_hook "$PROD_TSX" 'export const T = () => <div><Button>Add</Button><Input placeholder="Search employees" /><span className="flex-1" /></div>'
+expect_silent "40. C10 search 歸業務層 → silent"
+
+# 41. C11 POSITIVE:DialogHeader 手放 X(雙 X)→ BLOCK
+run_hook "$PROD_TSX" 'export const D = () => <DialogHeader><DialogTitle>Edit</DialogTitle><Button iconOnly startIcon={X} aria-label="Close" /></DialogHeader>'
+expect_block "41. C11 DialogHeader 雙 X → BLOCK"
+
+# 42. C11 NEGATIVE:header 操作走 actions slot → silent
+run_hook "$PROD_TSX" 'export const D = () => <DialogHeader actions={<Button iconOnly startIcon={X} aria-label="Prev" />}><DialogTitle>Edit</DialogTitle></DialogHeader>'
+expect_silent "42. C11 actions slot → silent"
+
+# 43. C12 POSITIVE:Select 硬寬 w-36 → BLOCK
+run_hook "$PROD_TSX" 'export const F = () => <Select className="w-36" options={opts} />'
+expect_block "43. C12 Select 硬寬 w-36 → BLOCK"
+
+# 44. C12 NEGATIVE:width="hug" 語義軸 → silent
+run_hook "$PROD_TSX" 'export const F = () => <Select width="hug" options={opts} />'
+expect_silent "44. C12 width=hug → silent"
+
+# 45. named-import 除鏽 POSITIVE:無 DS. 前綴的 LinkInput placeholder-only 也要抓 → BLOCK
+run_hook "$PROD_TSX" 'export const L = () => <LinkInput placeholder="https://" />'
+expect_block "45. named-import <LinkInput placeholder-only → BLOCK(除鏽)"
+
+# ── C19 兩欄 dialog 共用捲軸(2026-07-10 user 拍板組合 canonical)──
+# 46. POSITIVE:兩欄(border-l)+ 只有 1 個 ScrollArea = 共用捲軸 → BLOCK
+run_hook "$PROD_TSX" 'export const D = () => <DialogBody><ScrollArea><div className="flex"><div>main</div><aside className="border-l">meta</aside></div></ScrollArea></DialogBody>'
+expect_block "46. C19 兩欄共用單一 ScrollArea → BLOCK"
+
+# 47. NEGATIVE:各欄自帶 ScrollArea(組合 canonical)→ silent
+run_hook "$PROD_TSX" 'export const D = () => <DialogBody><div className="flex"><ScrollArea>main</ScrollArea><aside className="border-l"><ScrollArea>meta</ScrollArea></aside></div></DialogBody>'
+expect_silent "47. C19 各欄自帶 ScrollArea → silent"
+
+# 48. NEGATIVE:escape → silent
+run_hook "$PROD_TSX" 'export const D = () => <DialogBody><div className="flex border-l">x</div></DialogBody> // @two-pane-dialog-ok: 非兩欄,版面裝飾線'
+expect_silent "48. C19 @two-pane-dialog-ok escape → silent"
+
+# ── C7 SelectMenu 直用 + C13 手刻 section header(2026-07-10 收官)──
+# 49. C7 POSITIVE:<SelectMenu> 直用 → BLOCK
+run_hook "$PROD_TSX" 'export const M = () => <SelectMenu options={opts} onSelect={pick} />'
+expect_block "49. C7 <SelectMenu> 直用 → BLOCK"
+
+# 50. C7 NEGATIVE:<Select>(正道)→ silent
+run_hook "$PROD_TSX" 'export const M = () => <Select options={opts} onChange={pick} />'
+expect_silent "50. C7 <Select> 正道 → silent"
+
+# 51. C13 POSITIVE:手刻可收合標題列(Chevron + justify-between + button)→ BLOCK
+run_hook "$PROD_TSX" 'export const H = () => <button onClick={toggle} className="flex w-full items-center justify-between"><span>Description</span><ChevronDown className="size-4" /></button>'
+expect_block "51. C13 手刻可收合標題列 → BLOCK"
+
+# 52. C13 NEGATIVE:共用 SectionHeader 元件(正道)→ silent
+run_hook "$PROD_TSX" 'export const H = () => <SectionHeader title="Description" collapsed={c} onToggle={toggle} />'
+expect_silent "52. C13 共用 SectionHeader → silent"
+
+# 53. C13 NEGATIVE:escape(非 section 標題語義)→ silent
+run_hook "$PROD_TSX" 'export const P = () => <button onClick={next} className="flex justify-between">next<ChevronRight /></button> // @section-header-ok: 分頁導航非 section 標題'
+expect_silent "53. C13 @section-header-ok escape → silent"
+
 echo ""
 echo "=== Summary ==="
 echo "Passed: $PASS / $((PASS + FAIL))"

package/ds-canonical/hooks/tests/test_check_consumer_story_baseline.sh

@@ -161,12 +161,19 @@ expect_pass_silent "N4. DS internal stories → excluded silent"
 run_hook "Read" "$CONSUMER_STORY" "$CONTENT_VIOLATION"
 expect_pass_silent "N5. tool=Read → silent"
 
-# N6. over-broad guard A:bare <Dialog>(no DS. namespace prefix)→ silent
+# N6. over-broad guard A:bare <Dialog>(no DS. namespace prefix)from consumer-local import → silent
 #     consumer 用自己的 local Dialog,不是高風險 DS primitive → 不該 fire
 CONTENT_BARE='import { Dialog } from "./local-dialog";
 export const Basic = () => <Dialog open>hi</Dialog>;'
 run_hook "Write" "$CONSUMER_STORY" "$CONTENT_BARE"
-expect_pass_silent "N6. bare <Dialog> (no DS. prefix) → silent (over-broad guard)"
+expect_pass_silent "N6. bare <Dialog> (local import) → silent (over-broad guard)"
+
+# P5. named-import 除鏽 POSITIVE(2026-07-10):bare <Dialog> 但由 DS package named-import 進來
+#     → 是真 DS Dialog(fork 慣用 named import 繞過 <DS.> 前綴)→ 無 marker 必 BLOCK
+CONTENT_NAMED='import { Dialog, Button } from "@qijenchen/design-system";
+export const Basic = () => <Dialog open><Button>ok</Button></Dialog>;'
+run_hook "Write" "$CONSUMER_STORY" "$CONTENT_NAMED"
+expect_block "P5. named-import <Dialog> from DS pkg 無 marker → BLOCK" "CONSUMER-STORY-BASELINE BLOCKER"
 
 # N7. over-broad guard B:comment / prose mentioning "Dialog DataTable Sheet" but no JSX usage → silent
 CONTENT_PROSE='// This story demonstrates a layout. We avoid Dialog and DataTable here.

package/ds-canonical/hooks/tests/test_check_dynamic_tailwind_class.sh

@@ -0,0 +1,76 @@
+#!/bin/bash
+# test_check_dynamic_tailwind_class.sh — 動態 Tailwind class 哨測試
+# (2026-07-10 補 hook-test-coverage debt;hook 2026-07-09 建,anchor = h-table-row-${size} row 塌)
+set -uo pipefail
+cd "$(dirname "$0")/../../.."
+HOOK=".claude/hooks/check_dynamic_tailwind_class.sh"
+PASS=0; FAIL=0; FAILED_TESTS=""
+
+TMP_DIR=$(mktemp -d)
+trap 'rm -rf "$TMP_DIR"' EXIT
+export CLAUDE_PROJECT_DIR="$TMP_DIR"
+mkdir -p "$TMP_DIR/.claude/logs"
+
+PROD_TSX="/Users/x/proj/packages/design-system/src/components/DataTable/data-table.tsx"
+
+run_hook() {
+  local file_path="$1"; local content="$2"
+  local payload
+  payload=$(jq -n --arg fp "$file_path" --arg c "$content" \
+    '{tool_name:"Edit", tool_input:{file_path:$fp, new_string:$c}}')
+  STDERR=$(mktemp)
+  set +e
+  printf '%s' "$payload" | bash "$HOOK" >/dev/null 2>"$STDERR"
+  EXIT=$?
+  set -e
+  STDERR_TEXT=$(cat "$STDERR" 2>/dev/null); rm -f "$STDERR"
+}
+
+expect_block() {
+  local name="$1"
+  if [ "$EXIT" = "2" ]; then echo "  PASS  $name"; PASS=$((PASS+1))
+  else echo "  FAIL  $name (expected exit=2, got exit=$EXIT)"; FAIL=$((FAIL+1)); FAILED_TESTS="${FAILED_TESTS}\n  - $name"; fi
+}
+expect_silent() {
+  local name="$1"
+  if [ "$EXIT" = "0" ] && [ -z "$STDERR_TEXT" ]; then echo "  PASS  $name"; PASS=$((PASS+1))
+  else echo "  FAIL  $name (expected silent exit=0, got exit=$EXIT, stderr=${STDERR_TEXT:+non-empty})"; FAIL=$((FAIL+1)); FAILED_TESTS="${FAILED_TESTS}\n  - $name"; fi
+}
+
+# 1. POSITIVE:病根錨例 h-table-row-${size}(class 名含插值)→ BLOCK
+run_hook "$PROD_TSX" 'const cls = `h-table-row-${size} flex`'
+expect_block "1. h-table-row-\${size} → BLOCK"
+
+# 2. POSITIVE:間距 utility gap-${g} → BLOCK
+run_hook "$PROD_TSX" 'const cls = `flex gap-${g}`'
+expect_block "2. gap-\${g} → BLOCK"
+
+# 3. NEGATIVE:正解 literal map → silent
+run_hook "$PROD_TSX" "const cls = { sm: 'h-table-row-sm', md: 'h-table-row-md', lg: 'h-table-row-lg' }[size]"
+expect_silent "3. literal class 對照表 → silent"
+
+# 4. NEGATIVE:arbitrary value 內插值(是值不是 class 名)→ silent
+run_hook "$PROD_TSX" 'const cls = `h-[calc(100%_-_${offset}px)]`'
+expect_silent "4. h-[calc(\${x})] arbitrary → silent"
+
+# 5. NEGATIVE:var() 內插值 → silent
+run_hook "$PROD_TSX" 'const cls = `w-[var(--col-${i})]`'
+expect_silent "5. w-[var(--x-\${i})] → silent"
+
+# 6. NEGATIVE:色彩 utility 不在 scope(hook 只鎖尺寸/間距)→ silent
+run_hook "$PROD_TSX" 'const cls = `text-${color}`'
+expect_silent "6. text-\${color}(非尺寸間距)→ silent"
+
+# 7. NEGATIVE:escape 註解 → silent
+run_hook "$PROD_TSX" 'const cls = `size-${px}` // @dynamic-tailwind-allow: 傳給 canvas 非 class'
+expect_silent "7. @dynamic-tailwind-allow escape → silent"
+
+# 8. NEGATIVE:非 production path(tests/)→ silent
+run_hook "/Users/x/proj/scripts/gen-something.mjs" 'const cls = `h-${x}`'
+expect_silent "8. 非 tsx production path → silent"
+
+echo ""
+echo "=== Summary ==="
+echo "Passed: $PASS / $((PASS + FAIL))"
+if [ "$FAIL" -gt 0 ]; then printf "Failed:%b\n" "$FAILED_TESTS"; exit 1; fi
+exit 0

package/ds-canonical/hooks/tests/test_check_escape_marker_abuse.sh

@@ -182,6 +182,30 @@ expect_not_block "N8. empty content → not blocked"
 run_hook_bypass "Write" "$CONSUMER" "content" "$C_3DISTINCT"
 expect_not_block "N9. CLAUDE_BYPASS_ESCAPE_MARKER_AUDIT=1 override → not blocked"
 
+# ── R-series:repo 級累計 ratchet(2026-07-08 WM 戰役 R4)──────────────────────
+# 存量 ≥10(apps/** 全 repo)後,只擋「本次 edit 再新增 marker」;無 marker edit 不 brick。
+mkdir -p "$TMP_DIR/apps/work/src"
+for i in 1 2 3 4 5 6; do
+  printf '// @ds-misuse-allow: seeded reason %s\n// @layout-space-magic-ok: seeded reason %sb\n' "$i" "$i" \
+    > "$TMP_DIR/apps/work/src/seed$i.tsx"
+done
+
+# R1. 存量 12 ≥ cap 10 + 本次新增 1 marker → BLOCK(ratchet)
+run_hook "Write" "/repo/apps/work/src/new.tsx" "content" '<div /> // @ds-misuse-allow: one more'
+expect_block "R1. repo 存量 12 ≥ cap + edit 加 marker → blocked (ratchet)" "ESCAPE-MARKER-REPO-RATCHET"
+
+# R2. 存量 12 ≥ cap 但本次 edit 無 marker → not blocked(不因存量 brick 無關 edit)
+run_hook "Write" "/repo/apps/work/src/new.tsx" "content" '<div className="flex" />'
+expect_not_block "R2. repo 存量 ≥ cap 但 edit 無 marker → not blocked"
+
+# R3. 存量降到 4 < cap + 本次加 1 marker → not blocked
+rm -f "$TMP_DIR/apps/work/src/seed3.tsx" "$TMP_DIR/apps/work/src/seed4.tsx" \
+      "$TMP_DIR/apps/work/src/seed5.tsx" "$TMP_DIR/apps/work/src/seed6.tsx"
+run_hook "Write" "/repo/apps/work/src/new.tsx" "content" '<div /> // @ds-misuse-allow: legit case'
+expect_not_block "R3. repo 存量 4 < cap + edit 加 marker → not blocked"
+
+rm -rf "$TMP_DIR/apps"
+
 echo ""
 echo "=== Summary ==="
 echo "Passed: $PASS / $((PASS + FAIL))"

package/ds-canonical/hooks/tests/test_check_field_family_invariants.sh

@@ -1,11 +1,13 @@
 #!/bin/bash
-# Tests for check_field_family_invariants.sh — merged 4 sub-rules(A.1-A.4)
+# Tests for check_field_family_invariants.sh — merged sub-rules(A.1-A.4 + A.6)
 #
-# Coverage(每 sub-rule pass + block 各 1 case,共 12 case):
+# Coverage(每 sub-rule pass + block 各 1 case):
 #   A.1 naked row-mode propagation:pass / block / allowlist
 #   A.2 FieldControlGroup wrapper child:pass / block / allowlist
 #   A.3 Field state ring SSOT:pass / 3 block(shadow inset / outline / per-control open)
 #   A.4 disabled placeholder color:pass / 1 stderr-warn(exit 0)/ allowlist
+#   A.6 空值顯示 SSOT(2026-07-08 半形 hyphen):非 owner import EMPTY_DISPLAY block /
+#       owner skip / 全形 em dash block / 半形 pass / allowlist
 #   non-target:non-tsx skip / SSOT host skip(field-wrapper.tsx)
 
 set -u
@@ -183,6 +185,29 @@ else
   FAIL=$((FAIL+1)); FAILED_TESTS="${FAILED_TESTS}\n  - A.4.3"
 fi
 
+echo ""
+echo "=== A.6 空值顯示 SSOT(2026-07-08 半形 hyphen)==="
+
+# 17. 非 owner import EMPTY_DISPLAY → BLOCK(應消費 useFieldEmptyDisplay hook 分流)
+run_hook "/r/packages/design-system/src/components/Bad/bad.tsx" "import { EMPTY_DISPLAY } from '@/design-system/components/Field/field-wrapper'"
+expect_exit "A.6.1 非 owner import EMPTY_DISPLAY → BLOCK" 2 "EMPTY_DISPLAY 直引"
+
+# 18. owner field-context.ts import EMPTY_DISPLAY → pass(SSOT owner skip)
+run_hook "/r/packages/design-system/src/components/Field/field-context.ts" "import { EMPTY_DISPLAY } from './field-wrapper'"
+expect_exit "A.6.1 owner field-context.ts import → pass" 0
+
+# 19. components tsx hardcode 全形 em dash '—' → BLOCK
+run_hook "/r/packages/design-system/src/components/Bad/bad.tsx" "const cls = value ?? '—'"
+expect_exit "A.6.2 hardcode 全形 em dash → BLOCK" 2 "全形 em dash"
+
+# 20. 半形 hyphen '-' → pass(非全形,不觸發)
+run_hook "/r/packages/design-system/src/components/Bad/bad.tsx" "const sep = '-'"
+expect_exit "A.6.2 半形 hyphen → pass" 0
+
+# 21. allowlist → pass
+run_hook "/r/packages/design-system/src/components/Bad/bad.tsx" "const cls = value ?? '—' // @empty-display-allow: legacy N/A marker"
+expect_exit "A.6 allowlist → pass" 0
+
 echo ""
 echo "=== Skip cases ==="
 

package/ds-canonical/hooks/tests/test_check_opacity_token_usage.sh

@@ -56,6 +56,18 @@ expect_warn() {
   fi
 }
 
+# #71 soft WARN tier(micro_gap / fraction):exit 0(不 block)+ stderr 含 'soft flag'
+expect_soft_flag() {
+  local name="$1"
+  if [ "$EXIT" = "0" ] && echo "$STDERR_TEXT" | grep -qF "soft flag"; then
+    echo "  PASS  $name"; PASS=$((PASS+1))
+  else
+    echo "  FAIL  $name (expected exit=0 + 'soft flag', got exit=$EXIT)"
+    echo "  --- stderr ---"; echo "$STDERR_TEXT" | sed 's/^/    /'; echo "  --- end ---"
+    FAIL=$((FAIL+1)); FAILED_TESTS="${FAILED_TESTS}\n  - $name"
+  fi
+}
+
 echo "=== check_opacity_token_usage tests ==="
 
 # 1. raw opacity-30 → warn
@@ -101,6 +113,33 @@ const b = "opacity-75"
 '
 expect_warn "7. multi opacity-N values → warn" "opacity-25"
 
+# ── #71 micro_gap / fraction soft WARN tier(2026-07-11 接線)──────────────────
+FP71="/repo/packages/design-system/src/components/Calendar/calendar.tsx"
+
+# 8. gap-0.5(micro gap)→ soft flag(exit 0,非 block)
+run_hook "$FP71" 'const a = <div className="gap-0.5" />'
+expect_soft_flag "8. gap-0.5 micro gap → soft WARN(非 block)"
+
+# 9. w-1/3(registry fraction)→ soft flag(exit 0)
+run_hook "$FP71" 'const a = <div className="w-1/3" />'
+expect_soft_flag "9. w-1/3 registry fraction → soft WARN"
+
+# 10. w-1/2(合法,不在 registry 14 條)→ silent(不誤殺)
+run_hook "$FP71" 'const a = <div className="w-1/2" />'
+expect_pass_silent "10. w-1/2(合法留白)→ silent 不誤殺"
+
+# 11. gap-2(合法)→ silent
+run_hook "$FP71" 'const a = <div className="gap-2" />'
+expect_pass_silent "11. gap-2(合法)→ silent"
+
+# 12. 硬 violation + gap-0.5 → exit 2(hard block 不被 soft tier 弱化)
+run_hook "$FP71" 'const a = <div className="text-muted-foreground gap-0.5" />'
+expect_warn "12. 硬 violation + gap-0.5 → exit 2 block" "shadcn alias"
+
+# 13. gap-0.5 + @token-registry-ok escape → silent
+run_hook "$FP71" 'const a = <div className="gap-0.5" /> // @token-registry-ok: skeleton bone'
+expect_pass_silent "13. gap-0.5 + escape → silent"
+
 echo ""
 echo "=== Summary ==="
 echo "Passed: $PASS / $((PASS + FAIL))"

package/ds-canonical/hooks/tests/test_check_tabs_content_chrome_body_double_gap.sh

@@ -0,0 +1,76 @@
+#!/bin/bash
+# test_check_tabs_content_chrome_body_double_gap.sh — overlay-body layout-space 哨測試
+# (2026-07-10 補 hook-test-coverage debt;hook 2026-07-01 建,anchor = 專案設定 Dialog 雙 tight)
+# 注意:本 hook 是 PostToolUse「讀完整檔」型(防 partial-edit 盲區)→ 測試必寫真實 temp 檔,
+# 且路徑必須匹配 scope regex(packages/design-system/src/ 或 /apps/)。
+set -uo pipefail
+cd "$(dirname "$0")/../../.."
+HOOK=".claude/hooks/check_tabs_content_chrome_body_double_gap.sh"
+PASS=0; FAIL=0; FAILED_TESTS=""
+
+TMP_DIR=$(mktemp -d)
+trap 'rm -rf "$TMP_DIR"' EXIT
+export CLAUDE_PROJECT_DIR="$TMP_DIR"
+mkdir -p "$TMP_DIR/.claude/logs"
+
+# scope 內的真實 temp 檔路徑(hook 讀 disk)
+DS_DIR="$TMP_DIR/packages/design-system/src/components/Dialog"
+mkdir -p "$DS_DIR"
+
+run_hook_file() {
+  local file_path="$1"; local content="$2"
+  mkdir -p "$(dirname "$file_path")"
+  printf '%s' "$content" > "$file_path"
+  local payload
+  payload=$(jq -n --arg fp "$file_path" --arg c "$content" \
+    '{tool_name:"Edit", tool_input:{file_path:$fp, new_string:$c}}')
+  STDERR=$(mktemp)
+  set +e
+  printf '%s' "$payload" | bash "$HOOK" >/dev/null 2>"$STDERR"
+  EXIT=$?
+  set -e
+  STDERR_TEXT=$(cat "$STDERR" 2>/dev/null); rm -f "$STDERR"
+  rm -f "$file_path"
+}
+
+expect_block() {
+  local name="$1"
+  if [ "$EXIT" = "2" ]; then echo "  PASS  $name"; PASS=$((PASS+1))
+  else echo "  FAIL  $name (expected exit=2, got exit=$EXIT)"; FAIL=$((FAIL+1)); FAILED_TESTS="${FAILED_TESTS}\n  - $name"; fi
+}
+expect_silent() {
+  local name="$1"
+  if [ "$EXIT" = "0" ] && [ -z "$STDERR_TEXT" ]; then echo "  PASS  $name"; PASS=$((PASS+1))
+  else echo "  FAIL  $name (expected silent exit=0, got exit=$EXIT, stderr=${STDERR_TEXT:+non-empty})"; FAIL=$((FAIL+1)); FAILED_TESTS="${FAILED_TESTS}\n  - $name"; fi
+}
+
+# 1. POSITIVE(Check 1 錨例):chrome body 內 TabsContent 無 mt-0 → 雙重 gap → BLOCK
+run_hook_file "$DS_DIR/case1.stories.tsx" '<DialogBody><Tabs value={t}><TabsContent value="a"><p>內容</p></TabsContent></Tabs></DialogBody>'
+expect_block "1. DialogBody 內 TabsContent 無 mt-0 → BLOCK"
+
+# 2. NEGATIVE:TabsContent 帶 mt-0(ownership 轉移給 body)→ silent
+run_hook_file "$DS_DIR/case2.stories.tsx" '<DialogBody><Tabs value={t}><TabsContent value="a" className="mt-0"><p>內容</p></TabsContent></Tabs></DialogBody>'
+expect_silent "2. TabsContent className=mt-0 → silent"
+
+# 3. NEGATIVE:TabsContent 不在 chrome body 內(頁面級 Tabs)→ silent
+run_hook_file "$DS_DIR/case3.stories.tsx" '<Tabs value={t}><TabsList>…</TabsList><TabsContent value="a"><p>內容</p></TabsContent></Tabs>'
+expect_silent "3. 頁面級 Tabs(無 chrome body)→ silent"
+
+# 4. POSITIVE(Check 3 root 簽名):TabsList 手塞 DialogBody 同檔且無 tabsSlot → BLOCK
+run_hook_file "$DS_DIR/case4.stories.tsx" '<DialogBody><TabsList size="sm"><TabsTrigger value="a">A</TabsTrigger></TabsList><TabsContent value="a" className="mt-0">x</TabsContent></DialogBody>'
+expect_block "4. TabsList 手塞 chrome body 無 tabsSlot → BLOCK(root)"
+
+# 5. NEGATIVE:escape 註解 → silent
+run_hook_file "$DS_DIR/case5.stories.tsx" '{/* @tabs-content-gap-ok: 內容層分頁非 dialog chrome */}
+<DialogBody><Tabs value={t}><TabsContent value="a">x</TabsContent></Tabs></DialogBody>'
+expect_silent "5. @tabs-content-gap-ok escape → silent"
+
+# 6. NEGATIVE:scope 外路徑(非 DS-src / apps)→ silent
+run_hook_file "$TMP_DIR/docs/example.tsx" '<DialogBody><TabsContent value="a">x</TabsContent></DialogBody>'
+expect_silent "6. scope 外路徑 → silent"
+
+echo ""
+echo "=== Summary ==="
+echo "Passed: $PASS / $((PASS + FAIL))"
+if [ "$FAIL" -gt 0 ]; then printf "Failed:%b\n" "$FAILED_TESTS"; exit 1; fi
+exit 0

package/ds-canonical/references/audit-coverage-vs-24-checklist.md

@@ -45,7 +45,7 @@
 
 | 真缺項 | 補的形式 | Commit |
 |---|---|---|
-| #13 i18n 硬寫字串 | `.claude/hooks/check_hardcoded_strings.sh` PostToolUse,flag DS primitive tsx(非 stories)CJK ≥ 3 chars / 英文 sentence-case label;支援 `// i18n-allow: {rationale}` 白名單 | 本次 session |
+| #13 i18n 硬寫字串 | `post_edit_dispatcher.sh → lib/_hardcoded_strings.sh` PostToolUse flag(2026-05-13 由獨立 hook `check_hardcoded_strings.sh` folded 進 dispatcher lib),flag DS primitive tsx(非 stories)CJK ≥ 3 chars / 英文 sentence-case label;支援 `// i18n-allow: {rationale}` 白名單 | 本次 session |
 | #3 Controlled / Uncontrolled + #12 Form dual-mode | `design-system-audit` Dim 26(新 Group J)— 掃 form + overlay 元件 value/defaultValue / open/defaultOpen / checked/defaultChecked 的 pair 完整性;V1-V4 violation types | 本次 session |
 | #23 edge case(null / empty / rapid / success) | `/ux-audit` Phase 5 從 3 態 → 5 態 + null-safety + rapid-interaction + edge case corollary | 本次 session |
 

package/ds-canonical/references/build-ui-canonicals.md

@@ -18,6 +18,7 @@
 | 資料表格(含 header / sorting / sticky) | `<table><thead>...</thead><tbody>...</tbody></table>` | `<DataTable columns={...} data={...} />` |
 | 檔案上傳列表 | `<div>filename</div><ProgressBar /><Paperclip />` | `<FileItem mode="compact" />` or `<FileUpload>` |
 | 表單欄位(label + control + error) | `<label>...</label><input/><span className="text-error">...</span>` | `<Field><FieldLabel>...<Input />...<FieldError/>` |
+| 表單提交驗證(何時顯錯 / 提交可點性) | 手刻 `useState(showErrors)` + `submitAttempt` 旗標自組顯錯時機 | `useFormValidation`(Field 家族 hook,`intent:'create'` = 提交恆可點、點擊時 validate 顯錯;搭 `<FieldError>`)|
 | 全頁 / 區域 loading | `<div className="absolute inset-0 flex center"><Spinner /></div>` | `<Empty icon={<CircularProgress />} description="..." />` |
 | 確認對話框 | raw `<div className="fixed inset-0 bg-black/50">...<button>OK</button>` | `<Dialog>` + `<DialogHeader>` etc |
 | 分隔線 | `<hr className="..." />` or `<div className="h-px bg-..."/>` | `<Separator />`(必要時)or CSS border(見 separator.spec) |
@@ -60,7 +61,7 @@
 - 以上都沒命中 → 才可自建,但 **建完要立刻回來加行**(防下一個人又重造輪子)
 - **本規則同樣適用 story / consumer / exploration code**:不 hand-craft 已有 prop 能做的事(如 Input loading 走 `loading` prop 不自刻 `<div className="relative"><input/><div className="absolute">` / 全頁 loading 走 `<Empty icon={<CircularProgress/>}/>` 不自刻 `absolute inset-0`)。遇缺口**回元件 spec 擴 API**,不自刻繞過 — hand-craft 視覺對齊 bug 上游
 
-具體 anti-pattern signals → `/design-system-audit` Dim 21;pixel-level 視覺 regression(API 用對但視覺仍跑掉)→ `/visual-audit`(D5)抓(原 memory `project_pending_tasks` 已 retire)。
+具體 anti-pattern signals → `design-system-audit/references/audit-prompts.md`「L1. 手刻繞 DS canonical」+ Dim 71 consumer 手刻(Pattern 10;現行 Dim 21 已是「連續 item list wrapper gap」,勿誤指);pixel-level 視覺 regression(API 用對但視覺仍跑掉)→ `/visual-audit`(D5)抓(原 memory `project_pending_tasks` 已 retire)。
 
 ---
 

package/ds-canonical/references/failure-class-registry.json

@@ -0,0 +1,145 @@
+{
+  "_meta": {
+    "invariant": "每類被抓過的 failure class 必須終有 ship 到 consumer 的機械防線(user 2026-07-10 verbatim「建立治理的基本原則」)。status 三態:protected(已有 MECHANICAL_CONSUMER / DS_API_FIXED 防線)/ remediating(必帶 plan 指標)/ judgment(regex 不可判,必帶 auditDim 兜底)。gate = scripts/audit-failure-class-coverage.mjs --check(deep-audit dim 91 chain)。",
+    "source": ".claude/logs/failure-class-coverage-matrix.json(2026-07-10 41-agent 對抗 workflow,每 verdict cite 驗證)",
+    "addRule": "新 failure class(deep-audit / user 抓 / codex 抓)→ 本 registry 加 row;沒 row 或 status 缺 = gate 紅燈。remediation 落地後把 status 升 protected 並記 landedAt。"
+  },
+  "classes": [
+    {
+      "id": "phantom-layout-token",
+      "name": "幻覺 layout token / utility",
+      "status": "protected",
+      "note": "check_layout_space_magic_numbers PHANTOM 白名單(SHIP_AS_IS)+ opacity hook 第 10 類幻覺 state 尾綴(2026-07-10)"
+    },
+    {
+      "id": "handcraft-mini-table",
+      "name": "手刻 mini-table(grid-cols 黏死欄寬)",
+      "status": "protected",
+      "note": "r3 偽表格簽名 + magic-hook grid-cols px(皆 SHIP_AS_IS)"
+    },
+    {
+      "id": "handcraft-menu-item-row",
+      "name": "手刻 menu-item 可點列",
+      "status": "protected",
+      "landedAt": "2026-07-10",
+      "note": "根因 MenuItem startContent(beta.84)+ r3 nav-row 簽名(hover+selected 成對)"
+    },
+    {
+      "id": "export-chain-break",
+      "name": "export 斷鏈逼手刻(R2)",
+      "status": "protected",
+      "note": "DS_API_FIXED — barrel generator + preflight --check drift gate;beta.84 發版後 consumer 正式接上"
+    },
+    {
+      "id": "contrast-pair-violation",
+      "name": "對比配對違規(亮色底 × text-white)",
+      "status": "protected",
+      "landedAt": "2026-07-10",
+      "note": "r3 C5 簽名 → CAT_SOLID pair"
+    },
+    {
+      "id": "handcraft-form-validation",
+      "name": "手刻表單驗證 state",
+      "status": "protected",
+      "note": "r3 useFormValidation 零消費簽名(SHIP_AS_IS)"
+    },
+    {
+      "id": "selectmenu-direct-use",
+      "name": "SelectMenu internal 直用",
+      "status": "protected",
+      "note": "r3 C7 簽名(<SelectMenu 直用 → BLOCK,escape @selectmenu-direct-ok:;select-menu.spec.md:53 明文禁直用特例)",
+      "landedAt": "2026-07-10"
+    },
+    {
+      "id": "handcraft-header-tabs",
+      "name": "頁內手刻 header+TabsList(未走 tabsSlot)",
+      "status": "judgment",
+      "note": "dialog/surface 半邊已有 check_tabs_content_chrome_body_double_gap P0(SHIP_AS_IS);頁內 h2+TabsList 存在合法場景(TypeSettings 內容層分頁 @tabs-content-gap-ok 錨例)= context 判斷,倉促 regex = 誤殺",
+      "auditDim": "product-ui-audit + header-canonical.spec.md Rule W4"
+    },
+    {
+      "id": "spacing-tier-semantic",
+      "name": "spacing 親疏語義誤用(tier 選錯)",
+      "status": "judgment",
+      "auditDim": "90(layout-space macro judgment sweep)+ product-ui-audit",
+      "note": "合法 token 用錯 tier = context 判斷,regex 不可判;magic/phantom 機械半邊已 protected"
+    },
+    {
+      "id": "search-action-position",
+      "name": "業務 search 被推工具層位置",
+      "status": "protected",
+      "landedAt": "2026-07-10",
+      "note": "r3 C10 簽名(spacer+Search Input);業務 vs 工具判定本身 judgment → escape @search-right-ok"
+    },
+    {
+      "id": "dialog-chrome-double-x",
+      "name": "dialog chrome 雙 X / header 操作不走 actions",
+      "status": "protected",
+      "landedAt": "2026-07-10",
+      "note": "r3 C11 簽名(DialogHeader 250 字窗)"
+    },
+    {
+      "id": "field-width-misuse",
+      "name": "Field 家族硬寬 / hug-fill 語義",
+      "status": "protected",
+      "landedAt": "2026-07-10",
+      "note": "硬寬 w-N 機械(r3 C12);hug vs fill 語義選擇 = judgment 半邊歸 product-ui-audit"
+    },
+    {
+      "id": "handcraft-section-header",
+      "name": "手刻可收合 section header",
+      "status": "protected",
+      "note": "R3-7 拍板 codify 進 item-anatomy.spec.md「可收合 section header 組合 canonical」(組合非元件,隨 npm ship)+ r3 C13 簽名(Chevron+justify-between+可點且無共用元件 → BLOCK)",
+      "landedAt": "2026-07-10"
+    },
+    {
+      "id": "avatar-anatomy-misuse",
+      "name": "avatar row-context 直用(未走 ItemAvatar/PersonValue 鏈)",
+      "status": "judgment",
+      "note": "前置已清:PersonValue/PersonDisplay/PersonAvatarTag 2026-07-10 補進 export 面(probe 驗 root barrel 解析)= 正道可 import;「row context 內 raw Avatar」判定 = context 判斷,regex 不可判(Avatar 合法 standalone 場景遍地)",
+      "auditDim": "product-ui-audit + item-anatomy.spec.md:178(Prefix 垂直對齊)"
+    },
+    {
+      "id": "datatable-density-structure",
+      "name": "DataTable 密度/tree 佔位/inline-create idle 未消費",
+      "status": "judgment",
+      "note": "tree 佔位半邊 DS_API_FIXED(data-table.tsx sibling-aware,beta.84 生效);size 密度選擇與 idle 列樣式 = context 判斷(嵌入式 vs 主表格),spec 隨 npm ship 供讀",
+      "auditDim": "product-ui-audit + data-table.spec.md:71/80(size 密度)+ :360(inline-create idle)"
+    },
+    {
+      "id": "always-edit-cell",
+      "name": "恆-edit cell(display 態渲染 edit 控件)",
+      "status": "judgment",
+      "note": "機械半邊已上:story-baseline-registry antiPattern datatable-always-edit-cell(cell: 直渲 edit 控件 → R8 BLOCK,unless onCellCommit/editable/display);custom cell 元件包裹子集 regex 看不進去 + RoleCell 拍板反例證實 context 判斷 → judgment 兜底",
+      "auditDim": "product-ui-audit + data-table.spec.md:373(indicator A 案)"
+    },
+    {
+      "id": "separator-geometry",
+      "name": "分隔線幾何(黏按鈕無 mx)",
+      "status": "protected",
+      "landedAt": "2026-07-10",
+      "note": "r3 C17 簽名 + magic-hook divider 行豁免(治理自我打架修正)"
+    },
+    {
+      "id": "count-label-concat",
+      "name": "計數括號串接(children 層)",
+      "status": "protected",
+      "landedAt": "2026-07-10",
+      "note": "r3 C18 簽名(children 錨定,aria attr 合法)"
+    },
+    {
+      "id": "two-pane-dialog",
+      "name": "兩欄 dialog 版型 canonical 缺席",
+      "status": "protected",
+      "landedAt": "2026-07-10",
+      "note": "user 拍板:組合非元件(對齊 Atlassian/MUI composition verdict)→ overlay-surface.spec.md「兩欄 dialog 組合 canonical」(隨 npm ship)+ r3 C19 簽名(共用捲軸機械攔)"
+    },
+    {
+      "id": "handcraft-link-underline",
+      "name": "連結字手刻 underline",
+      "status": "protected",
+      "landedAt": "2026-07-10",
+      "note": "r3 C20 簽名(no-underline / hover:underline 形不誤殺)"
+    }
+  ]
+}