@qijenchen/design-system 0.1.0-beta.8 → 0.1.0-beta.81

package/ds-canonical/hooks/retired/2026-06-11-prune-merge/check_addon_subdir_ship.sh

@@ -0,0 +1,76 @@
+#!/bin/bash
+# check_addon_subdir_ship.sh — P0 BLOCKER
+#
+# Per 2026-05-28 beta.27 release fail anchor:
+# ds-devmode addon 2026-05-27 從 .storybook/addons/ 搬到 packages/storybook-config/
+# addons/ 時主檔(constants/manager/Panel/preset/preview)有搬,但 preview.ts 依
+# 賴的 utils/ 子資料夾(6 files:dom-geometry/computed-style/token-reverse-lookup/
+# overlay/geometry-diagnostic/token-drift-detector)沒搬 → npm package build 時
+# Rollup「Could not resolve "./utils/dom-geometry"」→ CSF parse error cascade。
+#
+# 機械強制 PreToolUse Edit/Write 對 addon 主檔(preview.ts / manager.tsx 等):
+# 偵測 import 從 `./utils/*` / `./components/*` 等 relative subdir,但對應 dir 不
+# 存在於 file_path 同層 → BLOCK + cite missing files。
+#
+# Scope:packages/storybook-config/addons/ + .storybook/addons/ 內主檔。
+# Escape:`@addon-subdir-skip:` comment。
+
+source "$(dirname "$0")/_log-fire.sh" 2>/dev/null && log_hook_fire
+
+set -uo pipefail
+
+INPUT=$(cat 2>/dev/null || echo "{}")
+TOOL=$(echo "$INPUT" | jq -r '.tool_name // ""' 2>/dev/null)
+
+case "${TOOL:-}" in
+  Edit|Write|MultiEdit) ;;
+  *) exit 0 ;;
+esac
+
+FILE=$(echo "$INPUT" | jq -r '.tool_input.file_path // ""' 2>/dev/null)
+# Only check addon main files
+if ! echo "$FILE" | grep -qE '/(\.storybook|storybook-config)/addons/[^/]+/[a-zA-Z]+\.(ts|tsx)$'; then exit 0; fi
+
+CONTENT=$(echo "$INPUT" | jq -r '.tool_input.new_string // .tool_input.content // ""' 2>/dev/null)
+[ -z "$CONTENT" ] && exit 0
+
+# Escape clause
+if echo "$CONTENT" | grep -qE '@addon-subdir-skip:'; then exit 0; fi
+
+# Find relative subdir imports `./<dir>/*`
+RELATIVE_IMPORTS=$(echo "$CONTENT" | grep -oE "from[[:space:]]+['\"]\\./[a-zA-Z][a-zA-Z0-9_-]+/[a-zA-Z][a-zA-Z0-9_./-]*['\"]" | sed -E "s|^from[[:space:]]+['\"]\./([^/]+)/.*['\"]\$|\\1|" | sort -u)
+
+[ -z "$RELATIVE_IMPORTS" ] && exit 0
+
+ADDON_DIR=$(dirname "$FILE")
+MISSING=""
+for subdir in $RELATIVE_IMPORTS; do
+  if [ ! -d "$ADDON_DIR/$subdir" ]; then
+    MISSING="${MISSING}    - ./${subdir}/ (referenced but dir absent)\n"
+  fi
+done
+
+if [ -n "$MISSING" ]; then
+  cat >&2 << EOF
+🚨 ADDON SUBDIR SHIP BLOCKER(P0,2026-05-28 beta.27 anchor)
+
+  File: $FILE
+  Imports from subdirectories that don't exist alongside this file:
+$(printf '%b' "$MISSING")
+
+  Why blocked:
+    Addon main 檔 import 子資料夾 helper,但子 dir 沒一起 ship → npm build /
+    Rollup「Could not resolve」→ Storybook build 死。本 anchor:beta.27 第 7 次 CI
+    才抓到 ds-devmode 搬家漏帶 utils/ 6 files(燒 6 prior iterations debug)。
+
+  修方向:
+    1. Copy 缺漏 dir 過來:`cp -r <source>/<dir> $ADDON_DIR/<dir>`
+    2. 跑 npm run build-storybook local 過再 commit
+    3. 或:改 import 路徑 to existing location
+
+  Escape(極罕見): add \`// @addon-subdir-skip: <rationale>\` to file content
+EOF
+  exit 2
+fi
+
+exit 0

package/ds-canonical/hooks/retired/2026-06-11-prune-merge/check_consumer_app_story_title.sh

@@ -0,0 +1,81 @@
+#!/bin/bash
+# check_consumer_app_story_title.sh — P0 BLOCKER
+#
+# 2026-05-28 codify per template create-app duplicate-id bug anchor:
+# Consumer apps(template / fork repos)裡 `apps/<name>/**/*.stories.tsx` 的
+# `title:` 必開頭 `Apps/<kebab-app-name>/...` — 否則 Storybook glob 撈到後撞 id。
+#
+# SSOT:.claude/rules/story-rules.md「Title 命名 2-namespace canonical」
+#
+# Mechanical 強制 PreToolUse Edit/Write 對 `apps/<name>/**/*.stories.tsx`:
+# - 偵測 `title:` field
+# - 若 title 開頭非 `Apps/<dir-name>/...` → BLOCK
+# - 自動推導 dir-name 從 file path(`apps/order-dashboard/src/App.stories.tsx`
+#   → expected prefix `Apps/order-dashboard/`)
+#
+# Scope:`/apps/<name>/**/*.stories.@(tsx|ts|mdx)`(consumer repos only)。
+# DS-internal stories(`packages/design-system/**`)走另條 canonical(`Design System/...`),
+# 不在本 hook scope。
+#
+# Escape:`@app-story-title-skip:` comment(極罕見)。
+
+source "$(dirname "$0")/_log-fire.sh" 2>/dev/null && log_hook_fire
+
+set -uo pipefail
+
+INPUT=$(cat 2>/dev/null || echo "{}")
+TOOL=$(echo "$INPUT" | jq -r '.tool_name // ""' 2>/dev/null)
+
+case "${TOOL:-}" in
+  Edit|Write|MultiEdit) ;;
+  *) exit 0 ;;
+esac
+
+FILE=$(echo "$INPUT" | jq -r '.tool_input.file_path // ""' 2>/dev/null)
+# Scope:apps/<name>/**/*.stories.(tsx|ts|mdx)
+if ! echo "$FILE" | grep -qE '/apps/[^/]+/.+\.stories\.(tsx|ts|mdx)$'; then exit 0; fi
+
+CONTENT=$(echo "$INPUT" | jq -r '.tool_input.new_string // .tool_input.content // ""' 2>/dev/null)
+[ -z "$CONTENT" ] && exit 0
+
+# Escape clause
+if echo "$CONTENT" | grep -qE '@app-story-title-skip:'; then exit 0; fi
+
+# Extract expected app name from file path
+APP_NAME=$(echo "$FILE" | sed -E 's|.*/apps/([^/]+)/.*|\1|')
+[ -z "$APP_NAME" ] && exit 0
+
+# Find title field(支援 single/double/backtick quote)
+TITLE_LINE=$(echo "$CONTENT" | grep -oE "title:\s*['\"\`][^'\"\`]+['\"\`]" | head -1)
+
+# 若無 title field,skip(no-op stories OK)
+[ -z "$TITLE_LINE" ] && exit 0
+
+EXPECTED_PREFIX="Apps/${APP_NAME}/"
+
+# Check title 是否開頭 `Apps/<app-name>/`
+if ! echo "$TITLE_LINE" | grep -qE "title:\s*['\"\`]Apps/${APP_NAME}/"; then
+  cat >&2 << EOF
+🚨 CONSUMER APP STORY TITLE BLOCKER(P0,2026-05-28 codify per create-app duplicate-id anchor)
+
+  File: $FILE
+  Detected title: $TITLE_LINE
+  Expected prefix: \`title: 'Apps/${APP_NAME}/...'\`
+
+  Why blocked:
+    Consumer apps 內 stories 必用 \`Apps/<app-name>/<page-purpose>\` 開頭 namespace
+    (per .claude/rules/story-rules.md「Title 命名 2-namespace canonical」)。
+    錯 prefix → Storybook glob 撈到後與 template/其他 app 撞 id → build duplicate
+    warning + 只顯第一個 → 新 app 在 sidebar 不可見。
+
+  Anchor:2026-05-28 npm run create-app 不改 story title 導致 e2e 抓 4 個 collisions。
+
+  Fix:
+    title: 'Apps/${APP_NAME}/<Your Page Purpose>'  // ex: 'Apps/${APP_NAME}/Dashboard'
+
+  Escape(極罕見):add \`// @app-story-title-skip: <rationale>\`
+EOF
+  exit 2
+fi
+
+exit 0

package/ds-canonical/hooks/retired/2026-06-11-prune-merge/check_consumer_ds_primitive_misuse.sh

@@ -0,0 +1,120 @@
+#!/bin/bash
+# check_consumer_ds_primitive_misuse.sh — P0 BLOCKER
+#
+# 偵測 consumer production code(`.tsx`)用 DS primitive 但走 anti-pattern API 用法
+# (per user 2026-05-27 verbatim「做產品真的能使用跟 ds repo 一模一樣的元件做產品嗎?」
+# +「眼不見為淨欸,重點是你他媽做產品真的要能使用跟 ds repo 一模一樣的元件才是目標」)
+#
+# Anchor 2026-05-27 — 7 bugs caught by user 在 storybook 但同樣的 anti-pattern 會出現在
+# production App.tsx / page components:
+#   1. <CircularProgress size={N}> 任意 number 而非 default 24
+#   2. <RadioGroupItem> 沒 wrap <SelectionItem control={...}>(per selection-item.spec.md:23)
+#   3. <DataTable columns={[<2 cols]}> minimal mock 看起來破
+#   4. <LinkInput placeholder=...> 沒 value prop = placeholder-only mode 抹平 link/edit pattern
+#   5. <Empty title=...> 無 icon AND 無 description = 違反 Empty.tsx:11「預設只需 description」
+#   6. <Tooltip|Popover|Dialog|Sheet|DropdownMenu> trigger 後 user 無路徑看 content
+#   7. <DS.X> 內 free-form ad-hoc layout 跟 DS canonical 結構差異
+#
+# Triggers on consumer apps/**/*.tsx + .stories.tsx edit. Blocks anti-patterns above.
+#
+# Escape:per-line `// @ds-misuse-allow: <rationale>` documented exception.
+
+source "$(dirname "$0")/_log-fire.sh" 2>/dev/null && log_hook_fire
+
+set -uo pipefail
+
+INPUT=$(cat 2>/dev/null || echo "{}")
+TOOL=$(echo "$INPUT" | jq -r '.tool_name // ""' 2>/dev/null)
+
+case "${TOOL:-}" in
+  Edit|Write|MultiEdit) ;;
+  *) exit 0 ;;
+esac
+
+FILE=$(echo "$INPUT" | jq -r '.tool_input.file_path // ""' 2>/dev/null)
+# Cover BOTH stories AND production .tsx in consumer apps
+if ! echo "$FILE" | grep -qE '/(apps|consumer)/.*\.(tsx|ts)$'; then exit 0; fi
+if echo "$FILE" | grep -qE 'packages/design-system/src/|node_modules/'; then exit 0; fi
+
+CONTENT=$(echo "$INPUT" | jq -r '.tool_input.new_string // .tool_input.content // ""' 2>/dev/null)
+[ -z "$CONTENT" ] && exit 0
+
+# 2026-06-03 修(同 R8 bug class):換行→空格 flatten。真實 JSX 屬性跨行(<DS.X\n  size={N}\n/>),
+# grep 逐行 + 各 pattern 用 [^>]+ 跨屬性匹配 → 不 flatten 的話多行 component 靜默繞過全部 anti-pattern 檢查
+# (= BLOCKER false-negative,consumer DS misuse 沒被擋)。[^>]+ 自帶 tag 邊界(遇 > 停),flatten 後不會跨 component。
+CONTENT=$(echo "$CONTENT" | tr '\n' ' ')
+
+# Global escape — file-wide allowlist
+if echo "$CONTENT" | grep -q '@ds-misuse-allow:'; then exit 0; fi
+
+VIOLATIONS=""
+
+# Pattern 1: <CircularProgress size={N}> with literal number (override default 24)
+if echo "$CONTENT" | grep -qE '<DS\.CircularProgress[^>]+size=\{[0-9]+\}'; then
+  VIOLATIONS="${VIOLATIONS}  - <CircularProgress size={N}> hardcoded number override default 24 (per circular-progress.spec.md:101)\n"
+fi
+
+# Pattern 2: <RadioGroupItem> NOT wrapped in <SelectionItem control={...}>
+# Approximation: file uses RadioGroupItem but doesn't reference SelectionItem
+if echo "$CONTENT" | grep -qE '<DS\.RadioGroupItem\b' && ! echo "$CONTENT" | grep -qE 'SelectionItem|<DS\.RadioGroupItem[^>]+label='; then
+  VIOLATIONS="${VIOLATIONS}  - <RadioGroupItem> 沒 wrap <SelectionItem control={<RadioGroupItem>}> (per selection-item.spec.md:23 SSOT spacing/padding)\n"
+fi
+
+# Pattern 3: <DataTable columns={[…]}> with literal single column
+if echo "$CONTENT" | grep -qE '<DS\.DataTable[^>]+columns=\{\[\s*\{[^}]+\}\s*\]\}' && ! echo "$CONTENT" | grep -qE 'columns=\{[^}]*\},\s*\{'; then
+  VIOLATIONS="${VIOLATIONS}  - <DataTable columns={[single-col]}> minimal one-column = 違反 data-table.spec.md canonical(min 2 cols for meaningful render)\n"
+fi
+
+# Pattern 4: <LinkInput placeholder=...> without value prop
+if echo "$CONTENT" | grep -qE '<DS\.LinkInput[^>]+placeholder=' && ! echo "$CONTENT" | grep -qE '<DS\.LinkInput[^>]+(value|defaultValue)='; then
+  VIOLATIONS="${VIOLATIONS}  - <LinkInput placeholder=...> 沒 value prop = placeholder-only mode 抹平 link/edit canonical (per link-input.spec.md:18,48-58)\n"
+fi
+
+# Pattern 5: <Empty title=...> without icon and without description
+if echo "$CONTENT" | grep -qE '<DS\.Empty[^>]+title=' && \
+   ! echo "$CONTENT" | grep -qE '<DS\.Empty[^>]+icon=' && \
+   ! echo "$CONTENT" | grep -qE '<DS\.Empty[^>]+description='; then
+  VIOLATIONS="${VIOLATIONS}  - <Empty title=...> 無 icon 無 description = 違反 Empty.tsx:11「預設只需 description」minimal mock looks weird\n"
+fi
+
+# Pattern 8: 硬寫色值 / 字級 / shadow 繞過 DS token(2026-06-02 CF conformance-model 補主防線 —
+# composition-fidelity 從 pixel-identity 收窄成 identity-opt-in 後,「consumer 用對 DS token」改由靜態
+# conformance 防線保證,對齊 Polaris stylelint-polaris / Atlassian eslint-plugin / Carbon stylelint。
+# 既有 check_layout_space_magic_numbers 守「間距」;此 pattern 補「色值/字級/shadow」缺口。
+# 零誤判優先:只抓 hardcoded(`-[var(--...)]` token 用法不匹配)。
+if echo "$CONTENT" | grep -qE '\b[a-z][a-z-]*-\[(#[0-9a-fA-F]{3,8}|rgb|rgba|hsl|hsla)[(]?|\btext-\[[0-9]|\bshadow-(sm|md|lg|xl|2xl)\b'; then
+  VIOLATIONS="${VIOLATIONS}  - 硬寫色值/字級/shadow 繞過 DS token(bg-[#hex] / text-[14px] / shadow-md)→ 改 semantic color token / text-body 等 typography token / shadow-[var(--elevation-N)](per ui-development.md「Tailwind 5 條核心」rule 3)\n"
+fi
+
+# Pattern 6: Overlay trigger without defaultOpen state for visual demo
+# (Skip in production .tsx; only enforce in .stories.tsx where visual snapshot matters)
+if echo "$FILE" | grep -qE '\.stories\.tsx$'; then
+  for overlay in Tooltip Popover Dialog Sheet DropdownMenu; do
+    if echo "$CONTENT" | grep -qE "<DS\.${overlay}\b" && \
+       ! echo "$CONTENT" | grep -qE "(defaultOpen|open=\{(true|isOpen)\})"; then
+      VIOLATIONS="${VIOLATIONS}  - Story uses <${overlay}> without defaultOpen — visual audit can't see overlay content\n"
+    fi
+  done
+fi
+
+if [ -n "$VIOLATIONS" ]; then
+  cat >&2 << EOF
+🚨 CONSUMER-DS-PRIMITIVE-MISUSE BLOCKER(P0,2026-05-27 user verbatim「做產品真的要能使用跟 ds repo 一模一樣的元件」)
+
+  File $FILE detected anti-pattern DS API usage:
+$(echo -e "$VIOLATIONS")
+  per M31 codex synthesis SSOT + DS spec.md citations(file:line 在每條 violation).
+
+  Anchor:user 2026-05-27 抓 7 個 visual bug 全 root cause = consumer minimal-mock 抹平
+  DS canonical 設計意圖。本 hook 攔 production 重犯同 pattern。
+
+  修法 2 選 1:
+    (a) 改用 DS canonical pattern(per file:line cited spec).
+    (b) Escape:加 \`// @ds-misuse-allow: <rationale>\` 顯式 documented per file OR per line.
+
+  Per-bug fix paths → /tmp/codex-ssot-output.txt(M31 codex synthesis 2026-05-27)
+EOF
+  exit 2
+fi
+
+exit 0

package/ds-canonical/hooks/retired/2026-06-11-prune-merge/check_consumer_no_ds_catalog.sh

@@ -0,0 +1,101 @@
+#!/bin/bash
+# check_consumer_no_ds_catalog.sh — P0 BLOCKER
+#
+# Block consumer apps from authoring per-component DS catalog stories
+# (per M31 codex synthesis 2026-05-27: PW only owns composition stories,
+# DS canonical Storybook is the sole per-component visual SSOT).
+#
+# Anchor 2026-05-27 user verbatim:
+#   「確保跟 ds repo 一模一樣」+「全盤避免 minimal mock 抹平」
+#   7 bugs caught by user(CircularProgress size=32 / RadioGroup raw / DataTable one-col /
+#   LinkInput placeholder / Empty 缺 icon / Overlay no-open / Tooltip)— all root cause:
+#   consumer hand-mock minimal-prop render ≠ DS canonical → 必 drift.
+#
+# Triggers on consumer apps/**/*.stories.tsx edit. Blocks:
+#   - File named EveryDsComponent / AllDsComponents (catalog naming pattern)
+#   - Story title containing「所有 DS 元件」/「Every DS Component」/「per-component default render」
+#   - `import * as DS from '@qijenchen/design-system'` + `Object.keys(DS).map`(iterate-render pattern)
+#   - `<DS.X minimal-props>` repeated mass render(detect: ≥5 different DS components rendered in same story)
+#
+# Escape:`// @consumer-catalog-allow: <rationale>` per-file marker(極罕見;eg. portal proxy file).
+
+source "$(dirname "$0")/_log-fire.sh" 2>/dev/null && log_hook_fire
+
+set -uo pipefail
+
+INPUT=$(cat 2>/dev/null || echo "{}")
+TOOL=$(echo "$INPUT" | jq -r '.tool_name // ""' 2>/dev/null)
+
+case "${TOOL:-}" in
+  Edit|Write|MultiEdit) ;;
+  *) exit 0 ;;
+esac
+
+FILE=$(echo "$INPUT" | jq -r '.tool_input.file_path // ""' 2>/dev/null)
+# Only check consumer storybook files
+if ! echo "$FILE" | grep -qE '/(apps|consumer)/.*\.stories\.tsx$'; then exit 0; fi
+# Skip DS source
+if echo "$FILE" | grep -qE 'packages/design-system/src/'; then exit 0; fi
+
+CONTENT=$(echo "$INPUT" | jq -r '.tool_input.new_string // .tool_input.content // ""' 2>/dev/null)
+[ -z "$CONTENT" ] && exit 0
+
+# Escape clause — 2026-06-03 修(同 R8 fragment-vs-file bug class):Edit 只送 new_string 片段,
+# 但 @consumer-catalog-allow marker 在檔頭(不在每次 edit 的片段裡)→ 編輯有 marker 的 portal 檔
+# 任一非 marker 行就被誤擋。本 hook 是 PostToolUse(檔已落 disk)→ 補查整檔 marker。
+if echo "$CONTENT" | grep -q '@consumer-catalog-allow:'; then exit 0; fi
+if [ -f "$FILE" ] && grep -q '@consumer-catalog-allow:' "$FILE" 2>/dev/null; then exit 0; fi
+
+VIOLATIONS=""
+
+# Pattern 1: file basename forbidden
+basename=$(basename "$FILE" .stories.tsx)
+if echo "$basename" | grep -qE '^(EveryDsComponent|AllDsComponents|AllComponents|DsCatalog|EveryComponent)$'; then
+  # AllDsComponents allowed IF it's only portal proxy (check title)
+  if [ "$basename" = "AllDsComponents" ] && echo "$CONTENT" | grep -qE 'DsCanonicalPortal|iframe.*design-system|@consumer-catalog-allow'; then
+    : # portal proxy OK
+  else
+    VIOLATIONS="${VIOLATIONS}  - File basename '$basename' = catalog pattern. PW 不該重寫 DS catalog.\n"
+  fi
+fi
+
+# Pattern 2: title claims per-component default
+if echo "$CONTENT" | grep -qE "title:.*['\"](所有 DS 元件|Every DS Component|All DS Components.*render|每元件 default)"; then
+  VIOLATIONS="${VIOLATIONS}  - Story title claims per-component default render. PW catalog 只可 import smoke + DS portal proxy.\n"
+fi
+
+# Pattern 3: iterate-render anti-pattern
+if echo "$CONTENT" | grep -qE 'Object\.keys\(DS\)\.(map|forEach)' || \
+   echo "$CONTENT" | grep -qE 'Object\.entries\(DS\)\.(map|forEach)'; then
+  VIOLATIONS="${VIOLATIONS}  - Detected Object.keys/entries(DS).map iterate-render pattern. 禁 iterate render DS exports.\n"
+fi
+
+# Pattern 4: mass hand-mock(≥5 different <DS.X> tags in same file)
+DS_TAG_COUNT=$(echo "$CONTENT" | grep -oE '<DS\.[A-Z][a-zA-Z]+' | sort -u | wc -l | tr -d ' ')
+if [ "$DS_TAG_COUNT" -ge 5 ]; then
+  VIOLATIONS="${VIOLATIONS}  - Detected ${DS_TAG_COUNT} distinct <DS.X> renders in single file. 大量 hand-mock = drift risk(per 2026-05-27 7-bug 錨例). 重構成 single composition demo.\n"
+fi
+
+if [ -n "$VIOLATIONS" ]; then
+  cat >&2 << EOF
+🚨 CONSUMER-NO-DS-CATALOG BLOCKER(P0,2026-05-27 user 永久 directive「確保跟 ds repo 一模一樣」+ M31 codex synthesis)
+
+  Consumer file $FILE 違反:
+$(echo -e "$VIOLATIONS")
+  per M31 codex synthesis SSOT:
+    - DS owns per-component canonical pixels(62/62 components ×3 tiers stories in DS Storybook)
+    - PW(consumer)owns 真實業務 composition demos(AppShell Dashboard etc.)
+    - Catalog → DS canonical Storybook iframe/link proxy,**禁** PW 重寫 <DS.X minimal mock>
+
+  歷史錨點 2026-05-27 7 bugs:CircularProgress size=32 hardcode / RadioGroup raw item 沒 SelectionItem / DataTable one-col / LinkInput placeholder mock / Empty 缺 icon / Overlay trigger-only / Tooltip context — ALL 從 PW hand-mock minimal-prop drift.
+
+  修法 2 選 1:
+    (a) 改用 DS canonical Storybook iframe portal(per template AllDsComponents.stories.tsx#DsCanonicalPortal pattern)
+    (b) Escape:加 \`// @consumer-catalog-allow: <rationale>\` 顯式 documented
+
+  完整 SSOT → DS package ds-story-manifest.json + codex M31 synthesis output /tmp/codex-ssot-output.txt
+EOF
+  exit 2
+fi
+
+exit 0

package/ds-canonical/hooks/retired/2026-06-11-prune-merge/check_consumer_story_baseline.sh

@@ -0,0 +1,76 @@
+#!/bin/bash
+# check_consumer_story_baseline.sh — P0 BLOCKER
+#
+# Consumer storybook files wrapping high-risk DS primitives MUST declare
+# `// @story-baseline: <DS-story-path>#<exportName>` marker
+# (per M31 codex synthesis 2026-05-27).
+#
+# Anchor 2026-05-27 codex M31 v1:「Consumer 若 wrap 高風險 DS primitive,
+# 檔頭必須有 @story-baseline:,並由 CI 對 DS canonical story 做 visual diff」.
+#
+# High-risk DS primitives(per codex list):
+#   DataTable / Dialog / Sheet / Popover / DropdownMenu / Tooltip / HoverCard /
+#   LinkInput / RadioGroup / CircularProgress / AppShell / Sidebar
+#
+# Triggers on consumer apps/**/*.stories.tsx edit. Blocks if file uses any of
+# these primitives but lacks @story-baseline: marker.
+#
+# Escape:`// @story-baseline-allow: <rationale>` for legitimate exceptions
+# (eg. behavior-only test stories, exception per ds-story-manifest.json).
+
+source "$(dirname "$0")/_log-fire.sh" 2>/dev/null && log_hook_fire
+
+set -uo pipefail
+
+INPUT=$(cat 2>/dev/null || echo "{}")
+TOOL=$(echo "$INPUT" | jq -r '.tool_name // ""' 2>/dev/null)
+
+case "${TOOL:-}" in
+  Edit|Write|MultiEdit) ;;
+  *) exit 0 ;;
+esac
+
+FILE=$(echo "$INPUT" | jq -r '.tool_input.file_path // ""' 2>/dev/null)
+# Only check consumer storybook files
+if ! echo "$FILE" | grep -qE '/(apps|consumer)/.*\.stories\.tsx$'; then exit 0; fi
+if echo "$FILE" | grep -qE 'packages/design-system/src/'; then exit 0; fi
+
+CONTENT=$(echo "$INPUT" | jq -r '.tool_input.new_string // .tool_input.content // ""' 2>/dev/null)
+[ -z "$CONTENT" ] && exit 0
+
+# Escape clauses
+if echo "$CONTENT" | grep -qE '@story-baseline-allow:|@consumer-catalog-allow:'; then exit 0; fi
+
+# High-risk DS primitives requiring baseline marker
+HIGH_RISK_PRIMITIVES='DataTable|Dialog|Sheet|Popover|DropdownMenu|Tooltip|HoverCard|LinkInput|RadioGroup|CircularProgress|AppShell|Sidebar'
+
+# Detect usage
+USED=$(echo "$CONTENT" | grep -oE "<DS\.($HIGH_RISK_PRIMITIVES)\\b" | sort -u | head -10)
+
+if [ -z "$USED" ]; then exit 0; fi
+
+# Check for @story-baseline: marker
+if echo "$CONTENT" | grep -qE '@story-baseline:[[:space:]]*\S'; then exit 0; fi
+
+cat >&2 << EOF
+🚨 CONSUMER-STORY-BASELINE BLOCKER(P0,2026-05-27 M31 codex synthesis)
+
+  Consumer file $FILE 用高風險 DS primitive 但無 \`// @story-baseline:\` marker:
+$(echo "$USED" | sed 's/^/    /')
+
+  per M31 codex synthesis SSOT:「Consumer wrap 高風險 DS primitive 必 @story-baseline:
+  marker,由 CI 對 DS canonical story 做 visual diff」.
+
+  High-risk list:DataTable / Dialog / Sheet / Popover / DropdownMenu / Tooltip /
+  HoverCard / LinkInput / RadioGroup / CircularProgress / AppShell / Sidebar.
+
+  修法 2 選 1:
+    (a) 加 marker(檔頭或 story body):
+        // @story-baseline: @qijenchen/design-system/components/<Name>/<name>.stories.tsx#<ExportName>
+        例:// @story-baseline: @qijenchen/design-system/components/Sidebar/sidebar.stories.tsx#IconCollapse
+    (b) Escape:\`// @story-baseline-allow: <rationale>\` 顯式 documented exception
+        (eg. pure behavior test / per ds-story-manifest.json exception list)
+
+  完整 mapping → packages/design-system/ds-story-manifest.json(DS package ship)
+EOF
+exit 2

package/ds-canonical/hooks/retired/2026-06-11-prune-merge/check_data_table_size_num_to_meta_width.sh

@@ -0,0 +1,68 @@
+#!/bin/bash
+# check_data_table_size_num_to_meta_width.sh — M23(c) mechanical enforcement(2026-05-26 backfill).
+#
+# Purpose:PreToolUse Edit/Write — 偵測 DataTable column 定義使用 TanStack `size: <number>`
+# (px width)而非 DS canonical `meta: { width: 'sm'|'md'|'lg' }` density-aware token。
+# 違反 M23(c) framework prop name namespace conflict(TanStack `size` 是 px 數字,
+# DS `size` 是 density variant)→ soft warn 要求 wrap-and-rename。
+#
+# 對齊 meta-patterns.md M23(c) + data-table.spec.md L?「Column width canonical」段。
+
+source "$(dirname "$0")/_log-fire.sh" 2>/dev/null && log_hook_fire
+
+set -uo pipefail
+INPUT=$(cat 2>/dev/null || echo "{}")
+TOOL=$(echo "$INPUT" | jq -r '.tool_name // ""' 2>/dev/null)
+FILE_PATH=$(echo "$INPUT" | jq -r '.tool_input.file_path // ""' 2>/dev/null)
+EVENT=$(echo "$INPUT" | jq -r '.hook_event_name // ""' 2>/dev/null)
+NEW=$(echo "$INPUT" | jq -r '.tool_input.content // .tool_input.new_string // ""' 2>/dev/null)
+
+[ "$EVENT" != "PreToolUse" ] && exit 0
+case "$TOOL" in Edit|Write|MultiEdit) ;; *) exit 0 ;; esac
+case "$FILE_PATH" in *.tsx|*.ts) ;; *) exit 0 ;; esac
+case "$FILE_PATH" in *.stories.tsx|*.test.*) exit 0 ;; esac
+
+# DataTable 上下文:column 定義 OR DataTable import OR ColumnDef 型別
+HAS_DATATABLE_CTX=0
+if echo "$NEW" | grep -qE '(ColumnDef|columns:|DataTable|@tanstack/react-table)'; then
+  HAS_DATATABLE_CTX=1
+fi
+
+[ "$HAS_DATATABLE_CTX" = "0" ] && exit 0
+
+# Detect raw size: <number> in column def(TanStack 用法)
+RAW_SIZE_HITS=$(echo "$NEW" | grep -cE '\bsize:\s*[0-9]+' 2>/dev/null)
+RAW_SIZE_HITS=${RAW_SIZE_HITS:-0}
+
+[ "$RAW_SIZE_HITS" -eq 0 ] && exit 0
+
+# 若同時用 meta: { width 也 OK(混用允許 transition)
+if echo "$NEW" | grep -qE 'meta:\s*\{[^}]*width'; then
+  # mixed — let it pass(transition state)
+  exit 0
+fi
+
+REL=${FILE_PATH#*/my-project/}
+
+cat >&2 <<EOF
+⚠️ M23(c) framework prop namespace conflict — DataTable column \`size: <number>\`
+
+📁 File: $REL
+🔍 偵測:$RAW_SIZE_HITS 個 \`size: <number>\` (TanStack px API)在 ColumnDef 上下文,但無 \`meta: { width: 'sm'|'md'|'lg' }\` DS density-aware variant。
+
+M23(c)要求:
+  - TanStack \`size\` prop = px 數字(framework spec)
+  - DS \`size\` prop = density variant 'sm'|'md'|'lg'(DS spec)
+  - 同名不同義 → wrap-and-rename:DataTable column 用 \`meta.width: 'sm'|'md'|'lg'\`,DS internal 再 map 成 TanStack \`size\` px
+
+修法:
+  // ❌ Avoid
+  { accessorKey: 'name', size: 280 }
+
+  // ✅ Use DS density-aware
+  { accessorKey: 'name', meta: { width: 'md' } }
+
+對應 canonical:meta-patterns.md M23(c) + components/DataTable/data-table.spec.md「Column width SSOT」。
+EOF
+
+exit 0

package/ds-canonical/hooks/retired/2026-06-11-prune-merge/check_fork_user_plugin_install.sh

@@ -0,0 +1,79 @@
+#!/bin/bash
+# check_fork_user_plugin_install.sh — SessionStart enforce plugin install on fork-user repos.
+#
+# 2026-05-26 backfill per user verbatim「我們做那麼多 plugin 不就是要避免這件事?結果還避不了?」
+#
+# Purpose:當 session 跑在「consumer fork-user repo」(non-DS repo,但 package.json
+# 含 @qijenchen/design-system dep)+ 偵測未安裝 design-system plugin → context inject
+# 強制提示用 `/plugin marketplace add github:ajenchen/design-system → /plugin install`。
+#
+# Detection logic:
+#   (a) cwd 不是 DS repo(無 packages/design-system/ folder)
+#   (b) package.json 含 `"@qijenchen/design-system"` dep
+#   (c) `.claude/plugins/design-system@qijenchen-ds/` OR plugin marketplace symlink 不存在
+#   → 三題全 YES = consumer fork-user 沒裝 plugin → 強制提示
+
+source "$(dirname "$0")/_log-fire.sh" 2>/dev/null && log_hook_fire
+
+set -uo pipefail
+INPUT=$(cat 2>/dev/null || echo "{}")
+EVENT=$(echo "$INPUT" | jq -r '.hook_event_name // ""' 2>/dev/null)
+
+[ "$EVENT" != "SessionStart" ] && exit 0
+
+CWD=$(pwd)
+
+# (a) 不是 DS repo:無 packages/design-system/src
+[ -d "$CWD/packages/design-system/src" ] && exit 0
+
+# (b) package.json 含 DS dep?
+[ ! -f "$CWD/package.json" ] && exit 0
+if ! grep -q '"@qijenchen/design-system"' "$CWD/package.json" 2>/dev/null; then
+  exit 0
+fi
+
+# (c) Plugin 已安裝?Anthropic plugin install 可能使用 <plugin> 或
+# <plugin>@<marketplace> directory name;accept both.
+PLUGIN_INSTALLED=0
+# 2026-05-31 fix(infra-audit P1):真實 Claude Code layout = ~/.claude/plugins/marketplaces/<name>/
+# + known_marketplaces.json(keyed by marketplace name)。原查 plugins/design-system + 錯的
+# .claude/marketplaces(漏 plugins/)= 裝了仍誤判未裝。marketplace name = qijenchen-ds。
+MARKETPLACE="qijenchen-ds"
+KM="$HOME/.claude/plugins/known_marketplaces.json"
+[ -d "$HOME/.claude/plugins/marketplaces/$MARKETPLACE" ] && PLUGIN_INSTALLED=1
+[ -d "$CWD/.claude/plugins/marketplaces/$MARKETPLACE" ] && PLUGIN_INSTALLED=1
+{ [ -f "$KM" ] && grep -q "\"$MARKETPLACE\"" "$KM"; } && PLUGIN_INSTALLED=1
+# legacy / 舊 layout fallback
+[ -d "$HOME/.claude/plugins/design-system" ] && PLUGIN_INSTALLED=1
+[ -d "$CWD/.claude/plugins/design-system" ] && PLUGIN_INSTALLED=1
+
+if [ "$PLUGIN_INSTALLED" = "1" ]; then
+  exit 0
+fi
+
+# All YES → fork-user 沒裝 plugin → context inject(SessionStart additional context)
+cat <<EOF
+🚨 Fork-user plugin not installed — DS governance hooks 不會 fire,憑記憶寫 mock 不會被攔。
+
+偵測:
+  cwd = $CWD
+  package.json 含 @qijenchen/design-system dep ✅
+  ~/.claude/plugins/design-system@qijenchen-ds/ 或 .claude/plugins/design-system@qijenchen-ds/ 不存在 ❌
+
+→ 後果(2026-05-26 anchor event):憑記憶寫 App.tsx mock(漏 SidebarTrigger / collapsible / startIcon /
+  tooltip / SidebarFooter)= production-grade fork-user 跑版 anti-pattern。
+
+修法:**session 開始第一件事必跑**
+  1. \`/plugin marketplace add github:ajenchen/design-system\`
+  2. \`/plugin install design-system@qijenchen-ds\`(or 對應 plugin name per marketplace.json)
+
+跑完 plugin install 後:
+  - 59 個 DS governance hooks 自動 fire(M29 anchor preflight / approval-preflight / story_invariants / inject_deploy_url_after_push 等;count snapshot 2026-05-29)
+  - DS canonical / rules / skills 從 ~/.claude/plugins/ 可 cross-load
+  - Fork-user 寫 App.tsx 時憑記憶寫 mock 會被 mechanical BLOCKER 攔
+
+對應 canonical:
+  - product-workspace CLAUDE.md「Fork-and-go onboarding」step 2-3
+  - .claude-plugin/marketplace.json
+EOF
+exit 0