@qijenchen/design-system 0.1.0-beta.10

package/dist/stories-helpers/anatomy/anatomy-utils.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+/**
+ * Shared helper components for all `*.anatomy.stories.tsx` files.
+ *
+ * Canonical definitions picked from Button/button.anatomy.stories.tsx and
+ * Slider/slider.anatomy.stories.tsx. Before duplicating these helpers locally,
+ * consider whether the shared version meets your need — visual consistency
+ * across anatomy stories is intentional.
+ *
+ * If you must diverge locally, add a comment explaining why.
+ */
+export declare const H3: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Desc: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Td: ({ children, mono, className }: {
+    children: React.ReactNode;
+    mono?: boolean;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Th: ({ children }: {
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Token color preview swatch.
+ * - `transparent` / `none` / `—` → checkerboard pattern (communicates "no color")
+ * - `white` → literal #fff (CSS var won't resolve to white in all themes)
+ * - otherwise → `var(--token-name)` via backgroundColor
+ */
+export declare const Swatch: ({ value, size }: {
+    value: string;
+    size?: "sm" | "md";
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const TokenCell: ({ token, display }: {
+    token: string;
+    display?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=anatomy-utils.d.ts.map

package/dist/stories-helpers/anatomy/anatomy-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"anatomy-utils.d.ts","sourceRoot":"","sources":["../../../src/stories-helpers/anatomy/anatomy-utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;;GASG;AAEH,eAAO,MAAM,EAAE,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CAE7D,CAAA;AAED,eAAO,MAAM,IAAI,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CAE/D,CAAA;AAED,eAAO,MAAM,EAAE,GAAI,+BAA+B;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,4CAElH,CAAA;AAED,eAAO,MAAM,EAAE,GAAI,cAAc;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CAE9D,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,MAAM,GAAI,iBAAwB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;CAAE,4CAqBnF,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,oBAAoB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,4CAKhF,CAAA"}

package/dist/tokens/elevation/overlay-geometry.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Overlay geometry SSOT — Radix prop number constants(non-CSS-var,JS-side single source).
+ *
+ * Why JS const not CSS var:Radix `sideOffset` / `collisionPadding` 接 number prop,
+ * 不接 `var(--...)`。改值要動 5+ primitive default = 假 SSOT。本檔抽 const,
+ * primitive default 統一 import → 改值只動一處全部聯動。
+ *
+ * Canonical source:`elevation.spec.md` § 浮層間距 sideOffset。
+ */
+export declare const OVERLAY_SIDE_OFFSET = 8;
+export declare const OVERLAY_COLLISION_PADDING = 8;
+//# sourceMappingURL=overlay-geometry.d.ts.map

package/dist/tokens/elevation/overlay-geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-geometry.d.ts","sourceRoot":"","sources":["../../../src/tokens/elevation/overlay-geometry.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,eAAO,MAAM,mBAAmB,IAAI,CAAA;AAEpC,eAAO,MAAM,yBAAyB,IAAI,CAAA"}

package/dist/tokens/elevation/overlay-geometry.js

@@ -0,0 +1,7 @@
+const OVERLAY_SIDE_OFFSET = 8;
+const OVERLAY_COLLISION_PADDING = 8;
+export {
+  OVERLAY_COLLISION_PADDING,
+  OVERLAY_SIDE_OFFSET
+};
+//# sourceMappingURL=overlay-geometry.js.map

package/dist/tokens/elevation/overlay-geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-geometry.js","sources":["../../../src/tokens/elevation/overlay-geometry.ts"],"sourcesContent":["/**\n * Overlay geometry SSOT — Radix prop number constants(non-CSS-var,JS-side single source).\n *\n * Why JS const not CSS var:Radix `sideOffset` / `collisionPadding` 接 number prop,\n * 不接 `var(--...)`。改值要動 5+ primitive default = 假 SSOT。本檔抽 const,\n * primitive default 統一 import → 改值只動一處全部聯動。\n *\n * Canonical source:`elevation.spec.md` § 浮層間距 sideOffset。\n */\n\nexport const OVERLAY_SIDE_OFFSET = 8\n\nexport const OVERLAY_COLLISION_PADDING = 8\n"],"names":[],"mappings":"AAUO,MAAM,sBAAsB;AAE5B,MAAM,4BAA4B;"}

package/dist/tokens/motion/motion.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Motion tokens — JS mirror of `motion.css` for Radix/JS API consumers.
+ *
+ * Radix primitive props(`delayDuration` / `openDelay` / `closeDelay`)期望 number ms,
+ * 不認 CSS var。本 file 是 motion.css 對應 number value 鏡像;改值必同步兩處(或加 lint)。
+ *
+ * SSOT: `motion.css` + `motion.spec.md`。
+ */
+/** 純文字提示(Tooltip)— passive hint。2026-05-20 200→500ms 對齊 Material 3 / Apple HIG / shadcn-Radix 主流 */
+export declare const HOVER_DELAY_PLAIN_MS = 500;
+/** 內容預覽(HoverCard / NameCard)— rich preview。2026-05-20 300→700ms 避免列表掃視誤觸發 fetch */
+export declare const HOVER_DELAY_RICH_MS = 700;
+/** 通用關閉延遲(所有 hover overlay)— accidental-hover 容錯 */
+export declare const HOVER_DELAY_CLOSE_MS = 200;
+//# sourceMappingURL=motion.d.ts.map

package/dist/tokens/motion/motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../../src/tokens/motion/motion.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,oGAAoG;AACpG,eAAO,MAAM,oBAAoB,MAAM,CAAA;AAEvC,oFAAoF;AACpF,eAAO,MAAM,mBAAmB,MAAM,CAAA;AAEtC,oDAAoD;AACpD,eAAO,MAAM,oBAAoB,MAAM,CAAA"}

package/dist/tokens/motion/motion.js

@@ -0,0 +1,9 @@
+const HOVER_DELAY_PLAIN_MS = 500;
+const HOVER_DELAY_RICH_MS = 700;
+const HOVER_DELAY_CLOSE_MS = 200;
+export {
+  HOVER_DELAY_CLOSE_MS,
+  HOVER_DELAY_PLAIN_MS,
+  HOVER_DELAY_RICH_MS
+};
+//# sourceMappingURL=motion.js.map

package/dist/tokens/motion/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","sources":["../../../src/tokens/motion/motion.ts"],"sourcesContent":["/**\n * Motion tokens — JS mirror of `motion.css` for Radix/JS API consumers.\n *\n * Radix primitive props(`delayDuration` / `openDelay` / `closeDelay`)期望 number ms,\n * 不認 CSS var。本 file 是 motion.css 對應 number value 鏡像;改值必同步兩處(或加 lint)。\n *\n * SSOT: `motion.css` + `motion.spec.md`。\n */\n\n/** 純文字提示(Tooltip)— passive hint。2026-05-20 200→500ms 對齊 Material 3 / Apple HIG / shadcn-Radix 主流 */\nexport const HOVER_DELAY_PLAIN_MS = 500\n\n/** 內容預覽(HoverCard / NameCard)— rich preview。2026-05-20 300→700ms 避免列表掃視誤觸發 fetch */\nexport const HOVER_DELAY_RICH_MS = 700\n\n/** 通用關閉延遲(所有 hover overlay)— accidental-hover 容錯 */\nexport const HOVER_DELAY_CLOSE_MS = 200\n"],"names":[],"mappings":"AAUO,MAAM,uBAAuB;AAG7B,MAAM,sBAAsB;AAG5B,MAAM,uBAAuB;"}

package/dist/tokens/uiSize/icon-size.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Icon Size SSOT — cross-domain re-export entry
+ *
+ * Owner:`packages/design-system/src/patterns/element-anatomy/item-anatomy.tsx:66` `ICON_SIZE`
+ * Spec:`packages/design-system/src/tokens/uiSize/uiSize.spec.md` 「Icon Size Tier」段
+ *
+ * ── 為什麼 re-export 不直接動 owner ──
+ * `ICON_SIZE` const codified in `item-anatomy.tsx` 是 row primitive SSOT(MenuItem / TreeView /
+ * Sidebar / DropdownMenu / SelectionItem / Item-anatomy 等 row-based primitives 消費)。
+ *
+ * Form control(Button / Input / Combobox / DatePicker / Tabs / Select / SegmentedControl 等)
+ * 不該 cross-domain import patterns/element-anatomy(會造成 components→patterns 反向 dependency
+ * 增加 cycle 風險)。透過 `tokens/uiSize/` 作 token home 是 cross-domain SSOT 的慣例(token 是 DS
+ * 內最底層,所有 layer 都可 consume 不違反 dependency direction)。
+ *
+ * ── Tier ──
+ * `field-height-xs / sm / md` → icon **16px**
+ * `field-height-lg`           → icon **20px**
+ *
+ * 詳 spec L132+ Icon Size Tier 段(stroke 下限 12px / Tag-Field 配對 / etc.)
+ *
+ * ── Consumer 用法 ──
+ * ```tsx
+ * import { ICON_SIZE } from '../../tokens/uiSize/icon-size'
+ *
+ * // sm/md → 16, lg → 20
+ * <LucideIcon size={ICON_SIZE[size]} />
+ *
+ * // form control xs(field-height-xs 24)用 ICON_SIZE.sm(同 16,per spec L132 Tier)
+ * <LucideIcon size={size === 'xs' ? ICON_SIZE.sm : ICON_SIZE[size]} />
+ * ```
+ *
+ * ── 防漂移 ──
+ * 1. uiSize.spec.md「Icon Size Tier」段 codify 16/16/16/20 tier(text-based canonical)
+ * 2. 本 const 程式化 SSOT(type-safe Record<RowSize, number>)
+ * 3. Hook `check_icon_size_literal.sh`(write-time regex 攔非標準 literal)
+ * 4. Audit Dim「Icon size literal compliance」DS-wide audit-time scan
+ *
+ * ── Carve-out(不適用本 SSOT)──
+ * - `rating.spec.md` Rating star 20/24/24(identity scale,cite Ant/Material/Airbnb)
+ * - `avatar.spec.md` Avatar 內 icon `round_even(size × 0.6)`(Material/Apple HIG)
+ * - `empty.tsx` Empty 用 Avatar 48 wrap → icon 28(Avatar formula derived)
+ * - `file-viewer.tsx` thumb 64 → icon 20(thumbnail file-type indicator,hardcode 無公式)
+ * - `circular-progress.tsx` `strokeWidth = max(2, size/10)`(stroke ring 厚度公式,非 icon)
+ * - `steps.tsx` INDICATOR_ICON_SIZE `{sm:0, md:16, lg:20}`(部分對齊 tier,sm 因圓圈 8px 太小)
+ * - `slider.tsx` thumb 固定不隨 size 變(視覺 single tier)
+ * - `checkbox.tsx` + `switch.tsx` check `{sm:12, md:12, lg:16}`(form-control internal,stroke 下限)
+ *
+ * 詳 uiSize.spec.md「跨 regime pointer index」段。
+ */
+export { ICON_SIZE } from '../../patterns/element-anatomy/item-anatomy';
+export type { RowSize } from '../../patterns/element-anatomy/item-anatomy';
+//# sourceMappingURL=icon-size.d.ts.map

package/dist/tokens/uiSize/icon-size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-size.d.ts","sourceRoot":"","sources":["../../../src/tokens/uiSize/icon-size.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,uDAAuD,CAAA;AACjF,YAAY,EAAE,OAAO,EAAE,MAAM,uDAAuD,CAAA"}

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@qijenchen/design-system",
+  "version": "0.1.0-beta.10",
+  "private": false,
+  "description": "World-class design system — components, patterns, tokens, hooks (single source of truth for team distribution).",
+  "type": "module",
+  "license": "UNLICENSED",
+  "files": [
+    "dist",
+    "src/**/*.{tsx,ts,css}",
+    "!src/**/*.stories.tsx",
+    "!src/**/*.anatomy.stories.tsx",
+    "!src/**/*.principles.stories.tsx",
+    "!src/**/*.spec.md",
+    "!src/**/*.spec.ts",
+    "!src/**/*.test.ts",
+    "README.md",
+    "scripts"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens/*": "./src/tokens/*",
+    "./hooks/*": {
+      "types": "./dist/hooks/*.d.ts",
+      "import": "./dist/hooks/*.js"
+    },
+    "./styles/tokens.css": "./src/styles/tokens.css",
+    "./styles/tokens": "./src/styles/tokens.css",
+    "./styles/preset.css": "./src/styles/preset.css",
+    "./styles/preset": "./src/styles/preset.css",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "build:dts": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.23",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "lucide-react": "^0.577.0",
+    "react-day-picker": "^9.14.0",
+    "react-zoom-pan-pinch": "^4.0.3",
+    "recharts": "^3.8.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "tailwindcss": ">=4.0.0"
+  },
+  "devDependencies": {
+    "tsc-alias": "^1.8.17"
+  }
+}

package/src/README.md

@@ -0,0 +1,32 @@
+# Design System Home
+
+本資料夾是 design system 的原始碼 + 設計規格 SSOT。
+
+## 子資料夾 charter(建立新檔案前必讀對應子 dir 的 README)
+
+| 子 dir | 收什麼 | 不收什麼 | Charter |
+|--------|-------|---------|---------|
+| `tokens/` | CSS 變數定義 + token spec + token stories | 元件 code、文件撰寫指南 | `tokens/README.md` |
+| `components/` | 每個元件一個 PascalCase folder(內含 tsx / spec / stories) | 平坦 `.md` 檔、cross-cutting rule | `components/README.md` |
+| `patterns/` | runtime UI 佈局 / 互動 primitive(.tsx + .spec.md),多元件 consume | 文件撰寫指南、governance meta rule、taxonomy | `patterns/README.md` |
+| `hooks/` | React hooks(跨 DS 元件共用的 `use-*.ts`) | Claude Code hooks(那屬 `.claude/hooks/`) | N/A |
+| `stories-helpers/` | Storybook 共用 helper(非 runtime,僅 `.stories.tsx` / `.anatomy.stories.tsx` 消費的 anatomy 排版 util 等) | 任何 runtime consume(應用 / 元件 / pattern code 不得 import);runtime primitive 應住 `patterns/` | N/A |
+
+## 本層級(`packages/design-system/src/` 根)只收 `README.md`
+
+所有 DS 內容必屬於某個子 dir(tokens / components / patterns / hooks / stories-helpers)。即使跨 pattern 的 taxonomy(如 4-Family Model)也住在最相關的 pattern topic 資料夾內(`patterns/element-anatomy/element-anatomy.spec.md`)—— 這樣 folder = topic home,不需要頂層 flat 檔案。
+
+若未來真有 scope 橫跨 3+ 子 dir 且不屬任一 topic 的純 meta doc,才重新評估是否加頂層檔(屆時更新本 charter)。
+
+## 不屬於本資料夾的 DS 相關內容
+
+| 內容類型 | 實際位置 |
+|---------|---------|
+| AI 工作流 / workflow guide(寫 story / 做 prototype / audit) | `.claude/skills/<skill>/` |
+| AI 每 session 需要的 signal rule | `CLAUDE.md` |
+| AI session 狀態(audit progress / tech debt) | `~/.claude/projects/.../memory/` |
+| Tool-level 機械檢查 | `.claude/hooks/` |
+
+## 建立新檔案決策
+
+不確定檔案放這裡還是別處 → **先 Read 該目標 dir 的 README.md 再 Write**。這是 CLAUDE.md 的硬規則。

package/src/components/Accordion/accordion.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+/**
+ * Accordion — Radix Accordion + 本 DS token
+ *
+ * 結構對齊 shadcn/ui accordion(Accordion / AccordionItem / AccordionTrigger /
+ * AccordionContent),但視覺全改本 DS token。
+ *
+ * ── 視覺差異 vs shadcn 預設 ──
+ * Shadcn 預設 hover 加底線(web 早期 link style),本 DS 改為文字色 tint
+ * (`hover:text-fg-secondary`)——維持現代 SaaS 質感(Notion / Linear / Stripe 皆不用
+ * 底線),但保留 hover 顏色變化作為可點擊提示(user 決策 2026-04-20)。
+ * Chevron 用 Lucide + 本 DS icon size(16px),rotate 動畫 200ms。
+ *
+ * ── 使用情境 ──
+ * FAQ / settings section 收合 / 多區塊表單分組 / 進階選項可隱藏。
+ * 不用於「單純顯示 / 隱藏單一區塊」(那是 Collapsible,本 DS 尚未建立;用 details 或
+ * 自組 toggle),Accordion 是「多個 item 可互斥或獨立收合」的 pattern。
+ */
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-b border-divider', className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = 'AccordionItem'
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between gap-2',
+        'py-4 text-body font-medium text-foreground text-left',
+        'transition-colors hover:text-fg-secondary',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        // AccordionTrigger 單一 text-style 列 → semantic `text-fg-disabled`(非 opacity);Button canonical 對齊
+        'disabled:text-fg-disabled disabled:pointer-events-none',
+        "[&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown
+        size={16}
+        className="shrink-0 text-fg-muted transition-transform duration-200"
+        aria-hidden
+      />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = 'AccordionTrigger'
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      'overflow-hidden text-body text-fg-secondary',
+      'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+    )}
+    {...props}
+  >
+    <div className={cn('pb-4', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = 'AccordionContent'
+
+// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)
+// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs
+export const accordionMeta = {
+  component: 'Accordion',
+  family: null, // non-family composite / overlay / layout
+  variants: {
+
+  },
+  sizes: {
+
+  },
+  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],
+  tokens: {
+    bg: [],
+    fg: ['text-fg-disabled', 'text-fg-muted', 'text-fg-secondary', 'text-foreground'],
+    ring: ['ring-ring'],
+  },
+} as const
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/components/Alert/alert.tsx

@@ -0,0 +1,188 @@
+// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+import { Notice, useInverseTheme, SUBTLE_ICON_COLOR, type NoticeVariant } from '@/design-system/components/Notice/notice'
+
+/**
+ * Alert — inline / fixed 通知
+ *
+ * ── data-theme 必須搭配 text-foreground ──
+ * CSS color 從 body 繼承已解析值,data-theme 只改 --foreground 不改 color。
+ * 在 theme boundary 設 text-foreground 強制 re-resolve。
+ *
+ * ── Appearance ──
+ * subtle: 淺底色 + 四邊 1px border(色相 hover 色)。不設 data-theme,跟隨頁面。
+ * solid: 跟 Toast 對齊:
+ *   neutral → data-theme={inverse} + bg-surface-raised（同層翻轉）
+ *   info/success/error → bg on outer, data-theme="dark" on inner
+ *   warning → bg on outer, data-theme="light" on inner
+ *
+ * ── Placement ──
+ * inline: rounded-md(card-level 圓角,非 overlay — 因 Alert 在頁面流內,非 floating)
+ * fixed: 無圓角,full-width,無 border
+ */
+
+const SUBTLE_CONTAINER: Record<NoticeVariant, string> = {
+  neutral: 'bg-muted border border-border',
+  info: 'bg-info-subtle border border-[var(--info-hover)]',
+  success: 'bg-success-subtle border border-[var(--success-hover)]',
+  warning: 'bg-warning-subtle border border-[var(--warning-hover)]',
+  error: 'bg-error-subtle border border-[var(--error-hover)]',
+}
+
+const SOLID_HUE_BG: Record<string, string> = {
+  info: 'bg-info',
+  success: 'bg-success',
+  warning: 'bg-warning',
+  error: 'bg-error',
+}
+
+const SOLID_HUE_THEME: Record<string, string> = {
+  info: 'dark',
+  success: 'dark',
+  warning: 'light',
+  error: 'dark',
+}
+
+const alertVariants = cva('w-full overflow-hidden', {
+  variants: {
+    placement: {
+      inline: 'rounded-md',
+      fixed: 'rounded-none border-none',
+    },
+  },
+  defaultVariants: { placement: 'inline' },
+})
+
+export interface AlertProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
+    VariantProps<typeof alertVariants> {
+  variant?: NoticeVariant
+  appearance?: 'subtle' | 'solid'
+  title: React.ReactNode
+  description?: React.ReactNode
+  endContent?: React.ReactNode
+  dismissible?: boolean
+  onDismiss?: () => void
+}
+
+// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {
+      variant = 'neutral',
+      appearance = 'subtle',
+      placement,
+      title,
+      description,
+      endContent,
+      dismissible = true,
+      onDismiss,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const inverseTheme = useInverseTheme()
+    const isSolid = appearance === 'solid'
+    const iconClassName = !isSolid ? SUBTLE_ICON_COLOR[variant] : undefined
+
+    // ── Live region 由 wrapping consumer 擁有(WAI-ARIA + Atlassian / Polaris / Material 共識) ──
+    // Alert 是 outer host —— 自己擁有 role + aria-live;Notice(inner layout)不再帶 role,
+    // 避免 nested live region 造成 screen reader 重複朗讀。
+    // - error / warning → role="alert" + aria-live="assertive"(中斷,使用者必須立刻知道)
+    // - info / success / neutral → role="status" + aria-live="polite"(空閒朗讀,不打斷)
+    const isCritical = variant === 'error' || variant === 'warning'
+    const liveRole = isCritical ? 'alert' : 'status'
+    const liveLevel = isCritical ? 'assertive' : 'polite'
+
+    // placement="fixed" 用 loose px(density-aware)讓 Alert 嵌在更大佈局內時跟周圍
+   // loose-padding 元素(Toolbar / BulkActionBar / DataTable 等)左右對齊。
+    // py 維持 py-3 fixed(notification banner family canonical,垂直不隨 density)。
+    const noticeEl = (
+      <Notice
+        variant={variant}
+        title={title}
+        description={description}
+        endContent={endContent}
+        dismissible={dismissible}
+        onDismiss={onDismiss}
+        iconClassName={iconClassName}
+        className={placement === 'fixed' ? 'px-[var(--layout-space-loose)]' : undefined}
+      />
+    )
+
+    // ── Subtle ──
+    if (!isSolid) {
+      return (
+        <div
+          ref={ref}
+          role={liveRole}
+          aria-live={liveLevel}
+          className={cn(alertVariants({ placement }), SUBTLE_CONTAINER[variant], className)}
+          {...props}
+        >
+          {noticeEl}
+        </div>
+      )
+    }
+
+    // ── Solid neutral (inverse: bg + theme 同層) ──
+    if (variant === 'neutral') {
+      return (
+        <div
+          ref={ref}
+          role={liveRole}
+          aria-live={liveLevel}
+          data-theme={inverseTheme}
+          className={cn(alertVariants({ placement }), 'bg-surface-raised text-foreground', className)}
+          {...props}
+        >
+          {noticeEl}
+        </div>
+      )
+    }
+
+    // ── Solid 有色相: bg outer + data-theme inner ──
+    return (
+      <div
+        ref={ref}
+        role={liveRole}
+        aria-live={liveLevel}
+        className={cn(alertVariants({ placement }), SOLID_HUE_BG[variant], className)}
+        {...props}
+      >
+        <div data-theme={SOLID_HUE_THEME[variant]} className="text-foreground">
+          {noticeEl}
+        </div>
+      </div>
+    )
+  },
+)
+Alert.displayName = 'Alert'
+
+// Story auto-compile metadata — Phase 2 fill(2026-05-15)
+// Variants = NoticeVariant 5 hues(prop name `variant`,cva 內僅 placement,色相由 SUBTLE_CONTAINER / SOLID_HUE_BG map 控)
+// Sizes = none(Alert 視覺尺寸繼承 Notice primitive,不隨 size 變;見 spec「為何無 SizeMatrix」)
+export const alertMeta = {
+  component: 'Alert',
+  family: null, // non-family composite / overlay / layout
+  variants: {
+    neutral: { purpose: '中性提示(系統公告、非緊急說明);無情緒色' },
+    info: { purpose: '資訊性提示(版本更新、流程說明);藍色 hue' },
+    success: { purpose: '成功狀態的持久性宣告(綁定生效、付款完成需保留確認)' },
+    warning: { purpose: '警告但非阻斷(方案到期、需更新付款方式);最高頻' },
+    error: { purpose: '錯誤但非阻斷(系統錯誤可重試、API 失敗摘要);aria-live=assertive' },
+  },
+  sizes: {},
+  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],
+  tokens: {
+    bg: ['bg-error', 'bg-error-subtle', 'bg-info', 'bg-info-subtle', 'bg-muted', 'bg-success', 'bg-success-subtle', 'bg-surface-raised', 'bg-warning', 'bg-warning-subtle'],
+    fg: ['text-foreground'],
+    ring: [],
+  },
+  defaultVariant: 'neutral',
+} as const
+
+export { Alert, alertVariants }