@qijenchen/design-system 0.1.0-beta.35 → 0.1.0-beta.37

package/ds-canonical/skills/visual-audit/SKILL.md

@@ -15,7 +15,7 @@ description: Pixel-level visual audit for design-system components based on user
 - **Carousel** prev/next 箭頭覆蓋 content
 - **Rating** 星星有多餘邊框
 - **Image viewer** 滾輪縮放跳大步(對標 Figma 該每 notch ~1.1×)
-- **Button 群 gap** 被 hover bg overflow 吃掉(CLAUDE.md 有「同 flex 列互動 slot 幾何鐵律」但缺視覺 audit gate 鎖住)
+- **Button 群 gap** 被 hover bg overflow 吃掉(.claude/references/ui-dev-rules.md 有「同 flex 列互動 slot 幾何鐵律」但缺視覺 audit gate 鎖住)
 - **FileViewer 工具列** dark mode 切換後對比跑掉
 - **FileUpload / FileItem** 沒 fill container
 
@@ -84,7 +84,7 @@ description: Pixel-level visual audit for design-system components based on user
 |---|------|---------|
 | 1 | **4 邊邊距對稱** | 容器 top / right / bottom / left padding 實測值相等(除明文 asymmetric spec 外) |
 | 2 | **垂直對稱(to-top ↔ to-bottom)** | 最外層 element 到容器頂 = 最內層 element 到容器底(DatePicker 箭頭 vs 最後排日期) |
-| 3 | **水平 gap 實際值 == gap token 宣告值** | hover bg / ring / focus outline 不可溢出 box 吃掉宣告 gap(CLAUDE.md「同 flex 列互動 slot 幾何鐵律」) |
+| 3 | **水平 gap 實際值 == gap token 宣告值** | hover bg / ring / focus outline 不可溢出 box 吃掉宣告 gap(.claude/references/ui-dev-rules.md「同 flex 列互動 slot 幾何鐵律」) |
 | 4 | **Overlay 定位(badge / popover / hover-card)** | anchor-offset / side-offset 對稱;不覆蓋 anchor 內容 |
 | 5 | **Typography baseline 對齊** | icon 與同行 text 的 baseline 對齊(非 geometric center 誤植) |
 | 6 | **Icon ↔ text gap 一致** | 同類型 row 裡所有 icon-to-text 距離相等 |
@@ -240,6 +240,6 @@ FAIL 項摘要:
 - `.claude/skills/design-system-audit/SKILL.md` — 全 dim code/spec audit(per design-system-audit SSOT);本 skill 是其 pixel-level 補位
 - `.claude/skills/product-ui-audit/SKILL.md` — consumer UI 對 DS 消費 audit(code 層),不處理視覺
 - `.claude/skills/component-quality-gate/SKILL.md` — 元件合入 DS 前的 45 項 checklist;Ship phase 可 chain 本 skill
-- CLAUDE.md `# 同 flex 列的互動 slot 幾何鐵律` — 本 skill checklist #3 的主要 canonical 來源
+- .claude/references/ui-dev-rules.md `# 同 flex 列的互動 slot 幾何鐵律` — 本 skill checklist #3 的主要 canonical 來源
 - `.claude/rules/ui-development.md`「建立 UI 前必讀」 → layout primitive / token spec 清單 — 本 skill「合格標準」的對照錨
 - `memory/project_pending_tasks`「視覺 regression 基建」條目 — 長期 tech debt(Chromatic / screenshot-diff)

package/ds-canonical/skills/visual-audit/references/visual-checklist.md

@@ -34,7 +34,7 @@
 
 **FAIL 範例**:DatePicker 量到 top=12 / right=12 / bottom=8 / left=12,spec 未宣告 bottom asymmetric → FAIL,建議討論是對齊 12 還是補 spec rationale
 
-**對應規則**:CLAUDE.md `# Consistency Audit 原則`(actual == canonical OR rationale-for-deviation)
+**對應規則**:CLAUDE.md `# 稽核 canonical`「Consistency 類稽核必 Phase 0 全掃再判」(actual == canonical OR rationale-for-deviation;design-system-audit Dim 13 enforce)
 
 ---
 
@@ -60,7 +60,7 @@
 
 ## 3. 水平 gap 實際值 == gap token 宣告值(hover bg 不可吃掉)
 
-**Canonical source**: CLAUDE.md `# 同 flex 列的互動 slot 幾何鐵律`(gap 鐵律)
+**Canonical source**: .claude/references/ui-dev-rules.md `# 同 flex 列的互動 slot 幾何鐵律`(gap 鐵律)
 
 **怎麼量**:
 1. 量同一 flex row 相鄰兩 interactive slot 的 **box 邊** 之間距離(不是「視覺中心距離」,是右邊 slot 左緣 - 左邊 slot 右緣)
@@ -70,7 +70,7 @@
 
 **合格標準**:
 - default + hover 兩態的 gap 都 == 宣告值(±1px) → PASS
-- hover 狀態 gap 被 bg overflow 吃掉 → FAIL(違反 CLAUDE.md「同 flex 列幾何鐵律」)
+- hover 狀態 gap 被 bg overflow 吃掉 → FAIL(違反 .claude/references/ui-dev-rules.md「同 flex 列幾何鐵律」)
 
 **FAIL 範例**:FileItem 2026-04-19 bug,Button hover-bg 24px 超出 16px box,`gap-2`(8px)實際剩 ~4px
 

package/ds-canonical/skills/visual-audit/references/world-class-benchmarks.md

@@ -32,7 +32,7 @@
 | **Atlassian Button group** | 8px gap;ring/focus outline 限制在 box 內,不 overflow |
 | **Ant Design Space** | default `gap-8`,hover bg 限制 box 內 |
 
-**世界級 idiom**:**hover bg / ring / focus outline 不超出 slot box**,保護 gap token 如實呈現。這對齊 CLAUDE.md`# 同 flex 列的互動 slot 幾何鐵律`。
+**世界級 idiom**:**hover bg / ring / focus outline 不超出 slot box**,保護 gap token 如實呈現。這對齊 .claude/references/ui-dev-rules.md`# 同 flex 列的互動 slot 幾何鐵律`。
 
 ---
 
@@ -114,7 +114,7 @@
 - **Web DS 用 overlay scrollbar 跨 OS 一致**(Radix ScrollArea / Ant Design Scrollbar 都這樣做)
 - **原因**:Windows native scrollbar 吃寬度會讓同一 page 在 Mac 和 Windows 上 layout 不同,違反「設計在任何平台視覺一致」
 
-對應 DS:`components/ScrollArea/` + CLAUDE.md「overflow 使用三規則」。
+對應 DS:`components/ScrollArea/` + `.claude/references/build-ui-canonicals.md`「overflow 使用三規則」。
 
 ---
 

package/ds-story-manifest.json

@@ -7,7 +7,7 @@
       "scripts/composition-fidelity-visual-diff.mjs",
       "product-workspace apps/template/src/AllDsComponents.stories.tsx (DsCanonicalPortal)"
     ],
-    "generatedAt": "2026-05-29T08:01:40.949Z"
+    "generatedAt": "2026-05-30T02:15:38.027Z"
   },
   "components": {
     "accordion": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qijenchen/design-system",
-  "version": "0.1.0-beta.35",
+  "version": "0.1.0-beta.37",
   "private": false,
   "description": "World-class design system — components, patterns, tokens, hooks (single source of truth for team distribution).",
   "type": "module",

package/src/styles/base.css

@@ -1,10 +1,9 @@
-/* @qijenchen/design-system/styles/base — consumer base layer SSOT
+/* @qijenchen/design-system/styles/base — consumer runtime CSS SSOT
  *
  * Why(2026-05-29 fix:ds-product-template storybook 字體 drift,user「請你追根究底去解決」授權):
- *   `styles/tokens` 只 ship token 變數(`--font-sans` / `--canvas` / `--foreground` 等),
- *   不含「把變數套到 body」的 base 層。DS repo `src/globals.css` 自帶此 base 層,但 consumer
- *   (apps/template globals + storybook.css)只 import tokens → body 字體/底色/前景退回瀏覽器預設
- *   → consumer storybook 跟 DS storybook 字體不同。
+ *   `styles/tokens` is the single consumer import. It must include the runtime CSS
+ *   needed by shipped DS components: base element styles plus custom utilities
+ *   backed by DS-owned keyframes.
  *
  *   本檔抽出 base 層為單一 SSOT:DS `src/globals.css` + consumer 都 import,字體/reset 永不 drift。
  *   codex 2026-05-29 dual-track 共識 option (a)。
@@ -46,3 +45,41 @@
     cursor: pointer;
   }
 }
+
+/* Radix Collapsible height animation — consumed by TreeView. */
+@keyframes collapsible-down {
+  from { height: 0; }
+  to { height: var(--radix-collapsible-content-height); }
+}
+
+@keyframes collapsible-up {
+  from { height: var(--radix-collapsible-content-height); }
+  to { height: 0; }
+}
+
+@utility animate-collapsible-down {
+  animation: collapsible-down 150ms ease-out;
+}
+
+@utility animate-collapsible-up {
+  animation: collapsible-up 150ms ease-out;
+}
+
+/* Radix Accordion height animation — Radix exposes a different content-height var. */
+@keyframes accordion-down {
+  from { height: 0; }
+  to { height: var(--radix-accordion-content-height); }
+}
+
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to { height: 0; }
+}
+
+@utility animate-accordion-down {
+  animation: accordion-down 200ms ease-out;
+}
+
+@utility animate-accordion-up {
+  animation: accordion-up 200ms ease-out;
+}

package/src/styles/tokens.css

@@ -34,7 +34,7 @@
 @import './../tokens/opacity/opacity.css';
 @import './../tokens/motion/motion.css';
 
-/* Non-token CSS (patterns/ + components/) containing :root token declarations
+/* Non-token CSS (patterns/ + components/) containing token/runtime declarations
    or component-internal styles — auto-detected by generator scan. Per 2026-05-27
    root-cause fix: src/globals.css 已 import for DS internal, 但 consumer-facing
    tokens.css aggregator 必須也包含, 不然 consumer 拿不到 → 跑版。 */

package/src/tokens/color/primitives.css

@@ -245,6 +245,13 @@
 
 }
 
+/* Tailwind bridge for absolute anchors.
+   Keep the bridge in the primitive color SSOT so text-white/bg-white ship to consumers. */
+@theme inline {
+  --color-white: oklch(1 0 0);
+  --color-black: oklch(0 0 0);
+}
+
 
 /* ── Layer 1 — Dark Mode Overrides ── */
 [data-theme="dark"] {