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

package/AGENTS.md

@@ -0,0 +1,8 @@
+# `@qijenchen/design-system` package scope
+
+This file is a **scoped augmentation**, not a second repository or product-governance SSOT.
+
+- Inside the design-system monorepo, inherit the repository-root `AGENTS.md`; do not restate or override it here. Author governance only in the canonical owners classified by `infra/governance/protected-root-classification.json`, then regenerate the declared build graph.
+- Inside an installed npm package, treat every file under `node_modules/@qijenchen/design-system` as immutable release material. Never patch it in place; fix the upstream DS source, publish an immutable exact version/BOM, and upgrade the consumer through its governed PR flow.
+- Consumer product governance comes from the authenticated `ds-canonical/fork/manifest.json` snapshot materialized into the consumer repository. This package-scoped file is navigation only and must never substitute for that snapshot, its lock, provider adapters, verifier, or protected CI.
+- Rules, hooks, skills, commands, and provider views under this package follow the same owner/output boundary: `ds-canonical/` is the shipped canonical corpus; generated `.claude`, `.codex`, and `.agents` views are rebuildable adapters and are not edit targets.

package/CLAUDE.md

@@ -0,0 +1,5 @@
+@AGENTS.md
+
+# Claude Code package-scope adapter
+
+The import above loads only the concise package augmentation. In the author monorepo, repository-wide Claude instructions are already inherited from the root `CLAUDE.md`; in an installed package, consumer governance still comes from the authenticated `ds-canonical/fork` snapshot rather than this file.

package/README.md

@@ -12,29 +12,21 @@ Tailwind v4 + React 18+ project required. License: UNLICENSED (internal use).
 
 ## Quick start(consumer side)
 
-### 推薦:1-line preset(beta.9+,零偏移即取即用)
+### CSS entry — 3 line setup(Tailwind v4 canonical)
 
 ```css
 /* globals.css (or main.css / src/index.css) */
-@import '@qijenchen/design-system/styles/preset';
-```
-
-這 1 行展開等於:`tailwindcss` + DS tokens + `@source` directive(自動 scan DS source 產出 utility class)。Consumer 0 config,**Button 立即正確 render with 所有設計準則樣式**。
-
-> 為何要 preset:Tailwind v4 預設只掃 `src/**` 不掃 `node_modules`。沒 preset 的 `@source`,DS 元件內用的 `h-field-md` / `bg-primary-hover` 等 class 不會被產出 → 元件純文字無樣式。preset 把 setup 收成 1 行。
-
-### 替代:4 步驟手動 setup(beta.8 或想自己管 Tailwind scan source)
-
-```css
-/* globals.css */
 @import 'tailwindcss';
 @import '@qijenchen/design-system/styles/tokens';
-
-/* 必要:讓 Tailwind v4 掃 DS 元件原始碼產生 utility class */
 @source '../node_modules/@qijenchen/design-system/src/**/*.{js,ts,jsx,tsx}';
 ```
 
-> ⚠️ 漏 `@source` → 元件看起來像沒套樣式。
+3 行皆必要:
+1. `@import 'tailwindcss'` — Tailwind v4 entry
+2. `@import '@qijenchen/design-system/styles/tokens'` — DS token system(`@theme inline` + color / spacing / typography / radius)
+3. `@source '../node_modules/...'` — **不能省**。Tailwind v4 預設只掃 `src/**` 不掃 `node_modules`,沒這行 DS 元件內用的 `h-field-md` / `bg-primary-hover` 等 class 不會被產出 → 元件純文字無樣式。
+
+> 為何不能合 1 行 preset?Tailwind v4 `@source` directive 在從 `node_modules` 來的 imported CSS 內不被正確 resolve(本 DS 試過 preset.css 失敗),consumer 必須 inline 寫 `@source` 在自己的 entry CSS。對齊 Material UI / Polaris / shadcn 慣例(各自 README 都要 consumer 寫 Tailwind config)。
 
 ### 2. App-level Provider(必要)
 
@@ -84,7 +76,7 @@ import { Button, Avatar, Dialog } from '@qijenchen/design-system'
 <Dialog>...</Dialog>
 ```
 
-**只用 top barrel import**(對齊 Material UI canonical)。`./components/<Name>` subpath 目前未支援 — v1.0.0 stable 才會開啟(待 cross-component export name collision rename 完成)。
+**預設用 top barrel import**(對齊 Material UI canonical)。需要更窄的 import surface 時,也支援 `@qijenchen/design-system/components/<Name>` / `patterns/<Name>` / `hooks/<name>` subpath(見 package `exports`)。
 
 Tree-shake 透過 `sideEffects: ["**/*.css"]` 配置自動 work,unused JS 被 bundler 剝除。
 
@@ -114,7 +106,7 @@ Token `--font-sans` stack = `Roboto, -apple-system, BlinkMacSystemFont, "Segoe U
 
 ## Storybook(consumer 看 DS 元件用法)
 
-- Production:**https://ajenchen.github.io/design-system/**
+- Production:**https://ajenchen-design-system.netlify.app/**(GH Pages mirror: <https://ajenchen.github.io/design-system/>)
 - 看每個元件的「展示」/「設計規格」/「設計原則」3 層 stories
 
 ---
@@ -123,10 +115,11 @@ Token `--font-sans` stack = `Roboto, -apple-system, BlinkMacSystemFont, "Segoe U
 
 | 路徑 | 內容 |
 |---|---|
-| `@qijenchen/design-system` | Top barrel — components / patterns / hooks / lib utilities |
+| `@qijenchen/design-system` | Top barrel — components / patterns / hooks / lib utilities / token JS mirrors。**策展後 front-door**(2026-07-14 API 策展):named re-exports,`*Meta`(componentMeta 建置/稽核 metadata)與 internal 單元不在此 |
+| `@qijenchen/design-system/components/<Dir>`、`…/patterns/<dir>` | Per-component subpath — 完整 `export *`(含 `*Meta`;internal 單元「包裝後 + 自行確認」的唯一管道)|
 | `@qijenchen/design-system/styles/tokens` | CSS aggregator(全 token + Tailwind `@theme inline`)|
 | `@qijenchen/design-system/hooks/<name>` | 單一 hook subpath |
-| `@qijenchen/design-system/tokens/<category>` | Token JS 模組(eg `motion`, `icon-size`)— CSS 透過 `styles/tokens` aggregator |
+| `@qijenchen/design-system/tokens/<path>` | Token JS 模組(編譯品;eg `tokens/motion/motion`、`tokens/uiSize/icon-size`)— 原始 `.ts` / `.spec.md` 不經此路徑曝露;CSS 透過 `styles/tokens` aggregator |
 
 **禁** import:
 - `@qijenchen/design-system/src/...`(internal source path,未來 SSOT 結構改會壞)
@@ -142,6 +135,7 @@ Token `--font-sans` stack = `Roboto, -apple-system, BlinkMacSystemFont, "Segoe U
 | `react-dom` | `>= 18.0.0` | peer |
 | `tailwindcss` | `>= 4.0.0` | peer,Tailwind v4 only |
 | `lucide-react` | `>= 0.400.0` | peer(consumer 已裝,DS 不重複,避免 hoisting 雙裝)|
+| Document direction | **LTR only** | RTL 不在目前支援矩陣；元件可能使用 physical left/right、LTR scrollLeft 與未鏡像 directional icons。consumer 不得把 `dir="rtl"` 視為已支援。若未來要支援，必須以 DS-wide proposal 同步 tokens、layout、icons、keyboard/scroll behavior 與 visual/a11y matrix，不能逐元件局部宣稱。|
 
 ---
 

package/cli-init.mjs

@@ -0,0 +1,118 @@
+#!/usr/bin/env node
+// cli-init.mjs — `npx @qijenchen/design-system-init` consumer-side 1-cmd setup
+//
+// What it does:
+//   1. Symlink consumer-cwd/.claude/design-system → node_modules/@qijenchen/design-system/ds-canonical
+//      → Claude Code 自動 load DS skills / hooks / rules / references / commands
+//   2. Symlink consumer-cwd/CLAUDE.design-system.md → node_modules/@qijenchen/design-system/CLAUDE.md
+//      → Consumer 自己的 CLAUDE.md import this for inherit DS mindset
+//   3. Print consumer should add to their entry CSS(3-line setup)
+//
+// Why symlink not copy:
+//   `npm update @qijenchen/design-system` 自動 sync 全部 SSOT(consumer 不用再跑)
+//   per user 2026-05-25「每次手動更新 package 都能獲取最新跟 ds repo 同步的 ssot 等所有檔案」
+//
+// Idempotent: re-run safe(skip if symlink exists pointing same place).
+
+import { existsSync, mkdirSync, symlinkSync, readlinkSync, lstatSync, unlinkSync, writeFileSync } from 'node:fs'
+import { join, relative, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const CWD = process.cwd()
+const __dirname = dirname(fileURLToPath(import.meta.url))
+// 本檔 ship 在 package root(package.json bin: "./cli-init.mjs")→ __dirname 即
+// node_modules/@qijenchen/design-system/。2026-07-16 修(PNG §4 疑點證實為 bug):原
+// `join(__dirname, '..')` 指到 node_modules/@qijenchen/ → 所有 source「not found」→
+// init 全程靜默 skip(symlink 一個都沒建,假成功)。
+const PACKAGE_ROOT = __dirname
+
+function ensureSymlink(from, to, label) {
+  const fromAbs = join(CWD, from)
+  const toAbs = join(PACKAGE_ROOT, to)
+  if (!existsSync(toAbs)) {
+    console.warn(`⚠️ source not found: ${toAbs} — skip ${label}`)
+    return
+  }
+  mkdirSync(dirname(fromAbs), { recursive: true })
+  if (existsSync(fromAbs) || lstatSync(fromAbs, { throwIfNoEntry: false })) {
+    // Check if it's already the right symlink
+    try {
+      const current = readlinkSync(fromAbs)
+      const expected = relative(dirname(fromAbs), toAbs)
+      if (current === expected) {
+        console.log(`✓ ${label} already in sync(${from})`)
+        return
+      }
+      // Wrong target — remove + redo
+      unlinkSync(fromAbs)
+    } catch {
+      console.warn(`⚠️ ${from} exists but not a symlink — skip(remove manually if you want to re-link)`)
+      return
+    }
+  }
+  const relPath = relative(dirname(fromAbs), toAbs)
+  symlinkSync(relPath, fromAbs, 'dir')
+  console.log(`✓ linked ${label}: ${from} → ${relPath}`)
+}
+
+console.log('═══ @qijenchen/design-system init ═══')
+console.log(`Consumer cwd: ${CWD}`)
+console.log(`Package root: ${PACKAGE_ROOT}`)
+console.log('')
+
+// 1. Symlink DS canonical → .claude/design-system/
+ensureSymlink('.claude/design-system', 'ds-canonical', 'DS canonical(skills/hooks/rules/references/commands)')
+
+// 2. Symlink DS CLAUDE.md → CLAUDE.design-system.md
+//    Consumer's own CLAUDE.md can `@import` or reference this file.
+const dsCLAUDEsrc = join(PACKAGE_ROOT, 'CLAUDE.md')
+if (existsSync(dsCLAUDEsrc)) {
+  const dest = join(CWD, 'CLAUDE.design-system.md')
+  if (!existsSync(dest)) {
+    const rel = relative(dirname(dest), dsCLAUDEsrc)
+    symlinkSync(rel, dest)
+    console.log(`✓ linked CLAUDE.design-system.md → ${rel}`)
+  } else {
+    console.log(`✓ CLAUDE.design-system.md already exists(skip)`)
+  }
+}
+
+// 3. AGENTS.md 投影到 consumer root(PNG P2.4:Codex 等 AGENTS.md 標準 agent 原生 discovery)
+//    Consumer-owned:存在則 skip + 提示 merge,絕不覆蓋。內容 = pointer stub(指 npm 內
+//    DS AGENTS.md 本體 → npm update 自動最新,stub 零 drift;對齊 ADR-1 禁 symlink 作唯一機制)。
+const consumerAgents = join(CWD, 'AGENTS.md')
+if (existsSync(join(PACKAGE_ROOT, 'AGENTS.md'))) {
+  if (!existsSync(consumerAgents)) {
+    writeFileSync(consumerAgents, `# AI agent instructions(this repo consumes @qijenchen/design-system)
+
+<!-- generated once by qijenchen-ds-init;consumer-owned — 建立後歸你維護,可自由增寫。 -->
+
+本 repo 消費 \`@qijenchen/design-system\`。**寫 UI / 設計決策前先讀 DS 治理核心**(隨 npm update 自動最新):
+
+- \`node_modules/@qijenchen/design-system/AGENTS.md\` — DS 治理核心(mindset / SSOT 消費 / 命名 / 4-Family)
+- \`node_modules/@qijenchen/design-system/ds-canonical/\` — rules / references / skills 全文
+- \`node_modules/@qijenchen/design-system/src/components/<Name>/<name>.spec.md\` + \`.stories.tsx\` — 元件何時用 / 官方 composition
+
+(在下方加入你產品自己的 instructions。)
+`)
+    console.log('✓ created AGENTS.md(pointer stub → DS 治理核心;consumer-owned,可自由增寫)')
+  } else {
+    console.log('✓ AGENTS.md already exists(skip;如要吃 DS 治理,手動 merge 一行指路 node_modules/@qijenchen/design-system/AGENTS.md)')
+  }
+}
+
+console.log('')
+console.log('═══ Next steps ═══')
+console.log('1. Add to your entry CSS(globals.css):')
+console.log('   @import \'tailwindcss\';')
+console.log('   @import \'@qijenchen/design-system/styles/tokens\';')
+console.log('   @source \'../node_modules/@qijenchen/design-system/src/**/*.{js,ts,jsx,tsx}\';')
+console.log('')
+console.log('2. Wrap your app root in <TooltipProvider>:')
+console.log('   import { TooltipProvider } from \'@qijenchen/design-system\'')
+console.log('   <TooltipProvider><App /></TooltipProvider>')
+console.log('')
+console.log('3. Restart your Claude Code session to pick up newly-linked .claude/design-system/.')
+console.log('   Claude 自動 load DS skills / hooks / rules / references / commands。')
+console.log('')
+console.log('All Done. Future `npm update @qijenchen/design-system` 會 auto-sync all SSOT via symlink.')

package/dist/components/Accordion/accordion.d.ts

@@ -19,14 +19,14 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
  */
 declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
 declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref">, "asChild"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref">, "asChild"> & React.RefAttributes<HTMLDivElement>>;
 export declare const accordionMeta: {
     readonly component: "Accordion";
     readonly family: null;
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "hover", "focus-visible", "disabled"];
     readonly tokens: {
         readonly bg: readonly [];
         readonly fg: readonly ["text-fg-disabled", "text-fg-muted", "text-fg-secondary", "text-foreground"];

package/dist/components/Accordion/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAI/D;;;;;;;;;;;;;;;;GAgBG;AAEH,QAAA,MAAM,SAAS,8JAA0B,CAAA;AAEzC,QAAA,MAAM,aAAa,iKASjB,CAAA;AAGF,QAAA,MAAM,gBAAgB,0KA2BpB,CAAA;AAGF,QAAA,MAAM,gBAAgB,oKAcpB,CAAA;AAKF,eAAO,MAAM,aAAa;;;;;;;;;;;CAehB,CAAA;AAEV,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAI/D;;;;;;;;;;;;;;;;GAgBG;AAEH,QAAA,MAAM,SAAS,8JAA0B,CAAA;AAEzC,QAAA,MAAM,aAAa,iKASjB,CAAA;AAGF,QAAA,MAAM,gBAAgB,2LAiCpB,CAAA;AAGF,QAAA,MAAM,gBAAgB,qLAgBpB,CAAA;AAKF,eAAO,MAAM,aAAa;;;;;;;;;;;CAehB,CAAA;AAEV,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/Accordion/accordion.js

@@ -24,6 +24,9 @@ const AccordionTrigger = React.forwardRef(({ className, children, ...props }, re
       "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",
+      // 2026-05-31 M24:disabled 時 chevron(icon 載體)亦降 text-fg-disabled,不停留 text-fg-muted
+      //（muted=neutral-7 比 disabled=neutral-6 深 → 層級顛倒)。覆寫 chevron 自身 text-fg-muted。
+      "disabled:[&>svg]:text-fg-disabled",
       "[&[data-state=open]>svg]:rotate-180",
       className
     ),
@@ -61,7 +64,7 @@ const accordionMeta = {
   // non-family composite / overlay / layout
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  states: ["default", "hover", "focus-visible", "disabled"],
   tokens: {
     bg: [],
     fg: ["text-fg-disabled", "text-fg-muted", "text-fg-secondary", "text-foreground"],

package/dist/components/Accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sources":["../../../src/components/Accordion/accordion.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\nimport { ChevronDown } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\n/**\n * Accordion — Radix Accordion + 本 DS token\n *\n * 結構對齊 shadcn/ui accordion(Accordion / AccordionItem / AccordionTrigger /\n * AccordionContent),但視覺全改本 DS token。\n *\n * ── 視覺差異 vs shadcn 預設 ──\n * Shadcn 預設 hover 加底線(web 早期 link style),本 DS 改為文字色 tint\n * (`hover:text-fg-secondary`)——維持現代 SaaS 質感(Notion / Linear / Stripe 皆不用\n * 底線),但保留 hover 顏色變化作為可點擊提示(user 決策 2026-04-20)。\n * Chevron 用 Lucide + 本 DS icon size(16px),rotate 動畫 200ms。\n *\n * ── 使用情境 ──\n * FAQ / settings section 收合 / 多區塊表單分組 / 進階選項可隱藏。\n * 不用於「單純顯示 / 隱藏單一區塊」(那是 Collapsible,本 DS 尚未建立;用 details 或\n * 自組 toggle),Accordion 是「多個 item 可互斥或獨立收合」的 pattern。\n */\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn('border-b border-divider', className)}\n    {...props}\n  />\n))\nAccordionItem.displayName = 'AccordionItem'\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'flex flex-1 items-center justify-between gap-2',\n        'py-4 text-body font-medium text-foreground text-left',\n        'transition-colors hover:text-fg-secondary',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n        // AccordionTrigger 單一 text-style 列 → semantic `text-fg-disabled`(非 opacity);Button canonical 對齊\n        'disabled:text-fg-disabled disabled:pointer-events-none',\n        \"[&[data-state=open]>svg]:rotate-180\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDown\n        size={16}\n        className=\"shrink-0 text-fg-muted transition-transform duration-200\"\n        aria-hidden\n      />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = 'AccordionTrigger'\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className={cn(\n      'overflow-hidden text-body text-fg-secondary',\n      'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',\n    )}\n    {...props}\n  >\n    <div className={cn('pb-4', className)}>{children}</div>\n  </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = 'AccordionContent'\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const accordionMeta = {\n  component: 'Accordion',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: ['text-fg-disabled', 'text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n    ring: ['ring-ring'],\n  },\n} as const\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"],"names":[],"mappings":";;;;;AAuBA,MAAM,YAAY,mBAAmB;AAErC,MAAM,gBAAgB,MAAM,WAG1B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,mBAAmB;AAAA,EAAnB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,2BAA2B,SAAS;AAAA,IACjD,GAAG;AAAA,EAAA;AACN,CACD;AACD,cAAc,cAAc;AAE5B,MAAM,mBAAmB,MAAM,WAG7B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QACpC,oBAAC,mBAAmB,QAAnB,EAA0B,WAAU,QACnC,UAAA;AAAA,EAAC,mBAAmB;AAAA,EAAnB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEH,UAAA;AAAA,MAAA;AAAA,MACD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACV,eAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IACb;AAAA,EAAA;AACF,GACF,CACD;AACD,iBAAiB,cAAc;AAE/B,MAAM,mBAAmB,MAAM,WAG7B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC;AAAA,EAAC,mBAAmB;AAAA,EAAnB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,8BAAC,OAAA,EAAI,WAAW,GAAG,QAAQ,SAAS,GAAI,SAAA,CAAS;AAAA,EAAA;AACnD,CACD;AACD,iBAAiB,cAAc;AAIxB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAC,oBAAoB,iBAAiB,qBAAqB,iBAAiB;AAAA,IAChF,MAAM,CAAC,WAAW;AAAA,EAAA;AAEtB;"}
+{"version":3,"file":"accordion.js","sources":["../../../src/components/Accordion/accordion.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\nimport { ChevronDown } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\n/**\n * Accordion — Radix Accordion + 本 DS token\n *\n * 結構對齊 shadcn/ui accordion(Accordion / AccordionItem / AccordionTrigger /\n * AccordionContent),但視覺全改本 DS token。\n *\n * ── 視覺差異 vs shadcn 預設 ──\n * Shadcn 預設 hover 加底線(web 早期 link style),本 DS 改為文字色 tint\n * (`hover:text-fg-secondary`)——維持現代 SaaS 質感(Notion / Linear / Stripe 皆不用\n * 底線),但保留 hover 顏色變化作為可點擊提示(user 決策 2026-04-20)。\n * Chevron 用 Lucide + 本 DS icon size(16px),rotate 動畫 200ms。\n *\n * ── 使用情境 ──\n * FAQ / settings section 收合 / 多區塊表單分組 / 進階選項可隱藏。\n * 不用於「單純顯示 / 隱藏單一區塊」(那是 Collapsible,本 DS 尚未建立;用 details 或\n * 自組 toggle),Accordion 是「多個 item 可互斥或獨立收合」的 pattern。\n */\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn('border-b border-divider', className)}\n    {...props}\n  />\n))\nAccordionItem.displayName = 'AccordionItem'\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  // asChild 不對外開放:Trigger 固定渲染 children + ChevronDown 兩個子節點,傳 asChild\n  // 會讓 Radix Slot 觸發 React.Children.only runtime 錯(見 CLAUDE.md 失敗記憶索引\n  // 「asChild 分支內部仍渲染多 children」)。固定 anatomy 見 accordion.spec.md「邊界狀態」。\n  Omit<React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>, 'asChild'>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'flex flex-1 items-center justify-between gap-2',\n        'py-4 text-body font-medium text-foreground text-left',\n        'transition-colors hover:text-fg-secondary',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n        // AccordionTrigger 單一 text-style 列 → semantic `text-fg-disabled`(非 opacity);Button canonical 對齊\n        'disabled:text-fg-disabled disabled:pointer-events-none',\n        // 2026-05-31 M24:disabled 時 chevron(icon 載體)亦降 text-fg-disabled,不停留 text-fg-muted\n        //（muted=neutral-7 比 disabled=neutral-6 深 → 層級顛倒)。覆寫 chevron 自身 text-fg-muted。\n        'disabled:[&>svg]:text-fg-disabled',\n        \"[&[data-state=open]>svg]:rotate-180\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDown\n        size={16}\n        className=\"shrink-0 text-fg-muted transition-transform duration-200\"\n        aria-hidden\n      />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = 'AccordionTrigger'\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  // asChild 不對外開放:Content 固定以內層 <div className=\"pb-4\"> 包住 children,傳 asChild\n  // 只會讓 Slot clone 該內層 div,consumer 元素無法成為 Content host(等同無效 API)。\n  Omit<React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>, 'asChild'>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className={cn(\n      'overflow-hidden text-body text-fg-secondary',\n      'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',\n    )}\n    {...props}\n  >\n    <div className={cn('pb-4', className)}>{children}</div>\n  </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = 'AccordionContent'\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const accordionMeta = {\n  component: 'Accordion',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: ['text-fg-disabled', 'text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n    ring: ['ring-ring'],\n  },\n} as const\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"],"names":[],"mappings":";;;;;AAuBA,MAAM,YAAY,mBAAmB;AAErC,MAAM,gBAAgB,MAAM,WAG1B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,mBAAmB;AAAA,EAAnB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,2BAA2B,SAAS;AAAA,IACjD,GAAG;AAAA,EAAA;AACN,CACD;AACD,cAAc,cAAc;AAE5B,MAAM,mBAAmB,MAAM,WAM7B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QACpC,oBAAC,mBAAmB,QAAnB,EAA0B,WAAU,QACnC,UAAA;AAAA,EAAC,mBAAmB;AAAA,EAAnB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEH,UAAA;AAAA,MAAA;AAAA,MACD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACV,eAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IACb;AAAA,EAAA;AACF,GACF,CACD;AACD,iBAAiB,cAAc;AAE/B,MAAM,mBAAmB,MAAM,WAK7B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC;AAAA,EAAC,mBAAmB;AAAA,EAAnB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,8BAAC,OAAA,EAAI,WAAW,GAAG,QAAQ,SAAS,GAAI,SAAA,CAAS;AAAA,EAAA;AACnD,CACD;AACD,iBAAiB,cAAc;AAIxB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,SAAS,iBAAiB,UAAU;AAAA,EACxD,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAC,oBAAoB,iBAAiB,qBAAqB,iBAAiB;AAAA,IAChF,MAAM,CAAC,WAAW;AAAA,EAAA;AAEtB;"}

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export * from './accordion';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAA"}

package/dist/components/Accordion/index.js

@@ -0,0 +1,9 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, accordionMeta } from "./accordion.js";
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  accordionMeta
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/AccountMenu/account-menu.d.ts

@@ -0,0 +1,86 @@
+/**
+ * AccountMenu — 全域 chrome「自己的帳號入口」(24px avatar 觸發 + 帳號選單)
+ *
+ * ── 定位 ──
+ * Primary-header 派 globalHeader 右側(desktop)/ mobile Sheet SidebarHeader 右側的
+ * 帳號入口成品元件:點 avatar 開「個人資料 / 設定 / 登出」navigation 選單。
+ * 是「自己」的入口,不是看「別人」的 ProfileCard(後者預設動作 Chat/通話,語義是聯絡某人)。
+ * **Placement-agnostic**:哪個 mode 放哪裡是 consumer 職責,放置 canonical owner =
+ * `../AppShell/app-shell.spec.md`「帳號入口(Account entry)放置 SSOT」(本元件不收 mode prop,
+ * 不複製該 SSOT;consumer 讀 `useAppShell().layout` + `useSidebar().isMobile` 決定放置)。
+ *
+ * ── 實作基礎 ──
+ * 消費:Avatar(raw size=24 trigger)+ DropdownMenu(Trigger asChild / Content / Group / Label / Item)
+ * 對應 pattern:patterns/header-canonical(4.5 chrome header avatar SSOT)
+ *
+ * ── 消費的 SSOT ──
+ * - components: [Avatar, DropdownMenu(DropdownMenuTrigger/Content/Group/Label/Item)]
+ * - patterns: [header-canonical 4.5(chrome header avatar = raw `<Avatar size={24}>`,非 ItemAvatar)]
+ * - tokens: [--chrome-header-avatar-size(JS 端 24 literal sync), --ring(focus-visible ring canonical)]
+ * - spec refs: app-shell.spec.md「帳號入口(Account entry)放置 SSOT」/ header-canonical.spec.md 4.5
+ *   / dropdown-menu.spec.md / profile-card.spec.md(近親分界:看別人 vs 自己)
+ *
+ * 升級歷程:2026-06-17 `AppShell/_demo-helpers.tsx` demo helper 誕生(user directive)→
+ * 2026-07-30 F9 升 public:app-shell.spec.md + sidebar.spec.md 兩處 canonical 都 mandate
+ * 消費本元件,「文件教得到、import 拿不到」= DT-EXPORT 斷鏈同款缺口(gen-component-indexes.mjs
+ * 檔頭 anchor),npm consumer 被迫整包重造。世界級對照:Atlassian `@atlaskit/atlassian-navigation`
+ * 出貨專門 `Profile` 元件作 top bar 帳號 trigger(ProfileProps = IconButtonProps,選單內容
+ * composition;https://unpkg.com/@atlaskit/atlassian-navigation/dist/types/index.d.ts +
+ * dist/types/components/Profile/types.d.ts);shadcn / Primer 走 DropdownMenu / ActionMenu
+ * composition recipe(https://ui.shadcn.com/docs/components/dropdown-menu「An account switcher
+ * dropdown triggered by an avatar」/ https://primer.style/components/action-menu)。本元件 =
+ * Atlassian 專門元件 + shadcn canonical 內容組(Label(user)+ Groups)的收斂。
+ */
+import * as React from 'react';
+import { type AvatarData } from '../../components/Avatar/avatar';
+export interface AccountMenuUser {
+    /** 顯示名(選單 Label 區;alt 未傳時同時作 avatar alt fallback) */
+    name: string;
+    /**
+     * Avatar 資料(消費既有 `AvatarData` type)。`hoverCard` 刻意排除:帳號入口是「自己」,
+     * 不掛 ProfileCard(per app-shell.spec.md 帳號入口 SSOT「不用 ProfileCard」);
+     * `alt` 可省,fallback `name`。
+     */
+    avatar?: Omit<AvatarData, 'hoverCard' | 'alt'> & {
+        alt?: string;
+    };
+}
+export interface AccountMenuProps {
+    /** 當前登入使用者 */
+    user: AccountMenuUser;
+    /** 「個人資料」item handler(default 選單消費;命名對齊 `PersonData.onViewProfile` 既有 canonical) */
+    onViewProfile?: () => void;
+    /** 「設定」item handler(default 選單消費) */
+    onOpenSettings?: () => void;
+    /** 「登出」item handler(default 選單消費) */
+    onSignOut?: () => void;
+    /**
+     * 取代 default 選單內容(自組 `DropdownMenuGroup` / `DropdownMenuItem`;i18n / 產品自訂項走這)。
+     * Identity Label(user.name)恆由本元件渲染於選單頂(對齊 shadcn account 例 Label(user)慣例);
+     * 傳入 children 時三個 default callback 不再消費。
+     */
+    children?: React.ReactNode;
+    /** 選單對齊(轉傳 DropdownMenuContent `align`)。預設 `'end'`:右上入口靠右展開(demo baseline) */
+    align?: 'start' | 'center' | 'end';
+    /** Trigger aria-label(i18n override,對齊 Avatar `badgeAriaLabel` pattern)。預設「帳號與設定」 */
+    triggerAriaLabel?: string;
+    /** 預設展開(uncontrolled,Radix passthrough)。Storybook OpenSnapshot(M15 visual-audit coverable)用 */
+    defaultOpen?: boolean;
+}
+export declare function AccountMenu({ user, onViewProfile, onOpenSettings, onSignOut, children, align, triggerAriaLabel, defaultOpen, }: AccountMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace AccountMenu {
+    var displayName: string;
+}
+export declare const accountMenuMeta: {
+    readonly component: "AccountMenu";
+    readonly family: null;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "focus-visible"];
+    readonly tokens: {
+        readonly bg: readonly [];
+        readonly fg: readonly [];
+        readonly ring: readonly ["--ring"];
+    };
+};
+//# sourceMappingURL=account-menu.d.ts.map

package/dist/components/AccountMenu/account-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"account-menu.d.ts","sourceRoot":"","sources":["../../../src/components/AccountMenu/account-menu.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAYlF,MAAM,WAAW,eAAe;IAC9B,qDAAqD;IACrD,IAAI,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAClE;AAED,MAAM,WAAW,gBAAgB;IAC/B,cAAc;IACd,IAAI,EAAE,eAAe,CAAA;IACrB,oFAAoF;IACpF,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,qCAAqC;IACrC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,qFAAqF;IACrF,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,+FAA+F;IAC/F,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAID,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,cAAc,EACd,SAAS,EACT,QAAQ,EACR,KAAa,EACb,gBAA0B,EAC1B,WAAW,GACZ,EAAE,gBAAgB,2CA6DlB;yBAtEe,WAAW;;;AA2E3B,eAAO,MAAM,eAAe;;;;;;;;;;;CAWlB,CAAA"}

package/dist/components/AccountMenu/account-menu.js

@@ -0,0 +1,64 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { User, Settings, LogOut } from "lucide-react";
+import { Avatar } from "../Avatar/avatar.js";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem } from "../DropdownMenu/dropdown-menu.js";
+function AccountMenu({
+  user,
+  onViewProfile,
+  onOpenSettings,
+  onSignOut,
+  children,
+  align = "end",
+  triggerAriaLabel = "帳號與設定",
+  defaultOpen
+}) {
+  if (process.env.NODE_ENV !== "production" && !children && !onViewProfile && !onOpenSettings && !onSignOut) {
+    console.warn(
+      "[DS AccountMenu] default 選單項未接 onViewProfile/onOpenSettings/onSignOut——item 點擊無反應。請傳入 callback 或自組 children。"
+    );
+  }
+  const avatar = user.avatar ?? {};
+  return /* @__PURE__ */ jsxs(DropdownMenu, { defaultOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": triggerAriaLabel,
+        className: "flex items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+        children: /* @__PURE__ */ jsx(Avatar, { size: 24, ...avatar, alt: avatar.alt ?? user.name })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align, children: children ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuLabel, { children: user.name }) }),
+      children
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: user.name }),
+        /* @__PURE__ */ jsx(DropdownMenuItem, { startIcon: User, onSelect: onViewProfile, children: "個人資料" }),
+        /* @__PURE__ */ jsx(DropdownMenuItem, { startIcon: Settings, onSelect: onOpenSettings, children: "設定" })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuItem, { startIcon: LogOut, onSelect: onSignOut, children: "登出" }) })
+    ] }) })
+  ] });
+}
+AccountMenu.displayName = "AccountMenu";
+const accountMenuMeta = {
+  component: "AccountMenu",
+  family: null,
+  // composite(trigger = chrome header 24px avatar;浮層 = DropdownMenu Family 1 消費者)
+  variants: {},
+  sizes: {},
+  // trigger avatar 24px density-fixed(header-canonical.spec.md 4.5),無 size 軸 → 兩欄留空為 intentional
+  states: ["default", "focus-visible"],
+  tokens: {
+    bg: [],
+    fg: [],
+    ring: ["--ring"]
+    // trigger focus-visible ring canonical
+  }
+};
+export {
+  AccountMenu,
+  accountMenuMeta
+};
+//# sourceMappingURL=account-menu.js.map

package/dist/components/AccountMenu/account-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"account-menu.js","sources":["../../../src/components/AccountMenu/account-menu.tsx"],"sourcesContent":["/**\n * AccountMenu — 全域 chrome「自己的帳號入口」(24px avatar 觸發 + 帳號選單)\n *\n * ── 定位 ──\n * Primary-header 派 globalHeader 右側(desktop)/ mobile Sheet SidebarHeader 右側的\n * 帳號入口成品元件:點 avatar 開「個人資料 / 設定 / 登出」navigation 選單。\n * 是「自己」的入口,不是看「別人」的 ProfileCard(後者預設動作 Chat/通話,語義是聯絡某人)。\n * **Placement-agnostic**:哪個 mode 放哪裡是 consumer 職責,放置 canonical owner =\n * `../AppShell/app-shell.spec.md`「帳號入口(Account entry)放置 SSOT」(本元件不收 mode prop,\n * 不複製該 SSOT;consumer 讀 `useAppShell().layout` + `useSidebar().isMobile` 決定放置)。\n *\n * ── 實作基礎 ──\n * 消費:Avatar(raw size=24 trigger)+ DropdownMenu(Trigger asChild / Content / Group / Label / Item)\n * 對應 pattern:patterns/header-canonical(4.5 chrome header avatar SSOT)\n *\n * ── 消費的 SSOT ──\n * - components: [Avatar, DropdownMenu(DropdownMenuTrigger/Content/Group/Label/Item)]\n * - patterns: [header-canonical 4.5(chrome header avatar = raw `<Avatar size={24}>`,非 ItemAvatar)]\n * - tokens: [--chrome-header-avatar-size(JS 端 24 literal sync), --ring(focus-visible ring canonical)]\n * - spec refs: app-shell.spec.md「帳號入口(Account entry)放置 SSOT」/ header-canonical.spec.md 4.5\n *   / dropdown-menu.spec.md / profile-card.spec.md(近親分界:看別人 vs 自己)\n *\n * 升級歷程:2026-06-17 `AppShell/_demo-helpers.tsx` demo helper 誕生(user directive)→\n * 2026-07-30 F9 升 public:app-shell.spec.md + sidebar.spec.md 兩處 canonical 都 mandate\n * 消費本元件,「文件教得到、import 拿不到」= DT-EXPORT 斷鏈同款缺口(gen-component-indexes.mjs\n * 檔頭 anchor),npm consumer 被迫整包重造。世界級對照:Atlassian `@atlaskit/atlassian-navigation`\n * 出貨專門 `Profile` 元件作 top bar 帳號 trigger(ProfileProps = IconButtonProps,選單內容\n * composition;https://unpkg.com/@atlaskit/atlassian-navigation/dist/types/index.d.ts +\n * dist/types/components/Profile/types.d.ts);shadcn / Primer 走 DropdownMenu / ActionMenu\n * composition recipe(https://ui.shadcn.com/docs/components/dropdown-menu「An account switcher\n * dropdown triggered by an avatar」/ https://primer.style/components/action-menu)。本元件 =\n * Atlassian 專門元件 + shadcn canonical 內容組(Label(user)+ Groups)的收斂。\n */\nimport * as React from 'react'\nimport { User, Settings, LogOut } from 'lucide-react'\nimport { Avatar, type AvatarData } from '@/design-system/components/Avatar/avatar'\nimport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuGroup,\n} from '@/design-system/components/DropdownMenu/dropdown-menu'\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\nexport interface AccountMenuUser {\n  /** 顯示名(選單 Label 區;alt 未傳時同時作 avatar alt fallback) */\n  name: string\n  /**\n   * Avatar 資料(消費既有 `AvatarData` type)。`hoverCard` 刻意排除:帳號入口是「自己」,\n   * 不掛 ProfileCard(per app-shell.spec.md 帳號入口 SSOT「不用 ProfileCard」);\n   * `alt` 可省,fallback `name`。\n   */\n  avatar?: Omit<AvatarData, 'hoverCard' | 'alt'> & { alt?: string }\n}\n\nexport interface AccountMenuProps {\n  /** 當前登入使用者 */\n  user: AccountMenuUser\n  /** 「個人資料」item handler(default 選單消費;命名對齊 `PersonData.onViewProfile` 既有 canonical) */\n  onViewProfile?: () => void\n  /** 「設定」item handler(default 選單消費) */\n  onOpenSettings?: () => void\n  /** 「登出」item handler(default 選單消費) */\n  onSignOut?: () => void\n  /**\n   * 取代 default 選單內容(自組 `DropdownMenuGroup` / `DropdownMenuItem`;i18n / 產品自訂項走這)。\n   * Identity Label(user.name)恆由本元件渲染於選單頂(對齊 shadcn account 例 Label(user)慣例);\n   * 傳入 children 時三個 default callback 不再消費。\n   */\n  children?: React.ReactNode\n  /** 選單對齊(轉傳 DropdownMenuContent `align`)。預設 `'end'`:右上入口靠右展開(demo baseline) */\n  align?: 'start' | 'center' | 'end'\n  /** Trigger aria-label(i18n override,對齊 Avatar `badgeAriaLabel` pattern)。預設「帳號與設定」 */\n  triggerAriaLabel?: string\n  /** 預設展開(uncontrolled,Radix passthrough)。Storybook OpenSnapshot(M15 visual-audit coverable)用 */\n  defaultOpen?: boolean\n}\n\n// ── AccountMenu ─────────────────────────────────────────────────────────────\n\nexport function AccountMenu({\n  user,\n  onViewProfile,\n  onOpenSettings,\n  onSignOut,\n  children,\n  align = 'end',\n  triggerAriaLabel = '帳號與設定',\n  defaultOpen,\n}: AccountMenuProps) {\n  // Dev-mode warning(對齊 ProfileCardDefaultActions dev-warn 先例):default 選單項沒接任何\n  // handler = item 點了永遠沒反應;production 必接 callback 或自組 children。\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    !children &&\n    !onViewProfile &&\n    !onOpenSettings &&\n    !onSignOut\n  ) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      '[DS AccountMenu] default 選單項未接 onViewProfile/onOpenSettings/onSignOut——item 點擊無反應。請傳入 callback 或自組 children。'\n    )\n  }\n  const avatar = user.avatar ?? {}\n  return (\n    <DropdownMenu defaultOpen={defaultOpen}>\n      <DropdownMenuTrigger asChild>\n        {/* 互動感由 focus-visible ring 提供(無 hover bg,chrome 輕量 entry),不放大到 field height\n            — per app-shell.spec.md「Avatar 尺寸 + 邊距」+ header-canonical.spec.md 4.5 */}\n        <button\n          type=\"button\"\n          aria-label={triggerAriaLabel}\n          className=\"flex items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1\"\n        >\n          {/* 24 per header-canonical.spec.md 4.5 chrome header avatar canonical(brand + account 同尺寸); sync with --chrome-header-avatar-size */}\n          <Avatar size={24} {...avatar} alt={avatar.alt ?? user.name} />\n        </button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align={align}>\n        {children ? (\n          <>\n            <DropdownMenuGroup>\n              <DropdownMenuLabel>{user.name}</DropdownMenuLabel>\n            </DropdownMenuGroup>\n            {children}\n          </>\n        ) : (\n          <>\n            {/* Default 選單集合 = app-shell.spec.md「入口開什麼」canonical(個人資料 / 設定 / 登出,\n                登出獨立 group — 破壞性動作分區,對齊 GitHub / Gmail / Slack 帳號選單慣例) */}\n            <DropdownMenuGroup>\n              <DropdownMenuLabel>{user.name}</DropdownMenuLabel>\n              <DropdownMenuItem startIcon={User} onSelect={onViewProfile}>\n                個人資料\n              </DropdownMenuItem>\n              <DropdownMenuItem startIcon={Settings} onSelect={onOpenSettings}>\n                設定\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuGroup>\n              <DropdownMenuItem startIcon={LogOut} onSelect={onSignOut}>\n                登出\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\nAccountMenu.displayName = 'AccountMenu'\n\n// Story auto-compile metadata — F9 public 升級(2026-07-30)\n// Phase 2 fill needed: purpose descriptions + when rationale\nexport const accountMenuMeta = {\n  component: 'AccountMenu',\n  family: null, // composite(trigger = chrome header 24px avatar;浮層 = DropdownMenu Family 1 消費者)\n  variants: {},\n  sizes: {}, // trigger avatar 24px density-fixed(header-canonical.spec.md 4.5),無 size 軸 → 兩欄留空為 intentional\n  states: ['default', 'focus-visible'],\n  tokens: {\n    bg: [],\n    fg: [],\n    ring: ['--ring'], // trigger focus-visible ring canonical\n  },\n} as const\n"],"names":[],"mappings":";;;;AAmFO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,mBAAmB;AAAA,EACnB;AACF,GAAqB;AAGnB,MACE,QAAQ,IAAI,aAAa,gBACzB,CAAC,YACD,CAAC,iBACD,CAAC,kBACD,CAAC,WACD;AAEA,YAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AACA,QAAM,SAAS,KAAK,UAAU,CAAA;AAC9B,SACE,qBAAC,gBAAa,aACZ,UAAA;AAAA,IAAA,oBAAC,qBAAA,EAAoB,SAAO,MAG1B,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,WAAU;AAAA,QAGV,UAAA,oBAAC,QAAA,EAAO,MAAM,IAAK,GAAG,QAAQ,KAAK,OAAO,OAAO,KAAK,KAAA,CAAM;AAAA,MAAA;AAAA,IAAA,GAEhE;AAAA,IACA,oBAAC,qBAAA,EAAoB,OAClB,UAAA,WACC,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA,oBAAC,mBAAA,EACC,UAAA,oBAAC,mBAAA,EAAmB,UAAA,KAAK,MAAK,GAChC;AAAA,MACC;AAAA,IAAA,EAAA,CACH,IAEA,qBAAA,UAAA,EAGE,UAAA;AAAA,MAAA,qBAAC,mBAAA,EACC,UAAA;AAAA,QAAA,oBAAC,mBAAA,EAAmB,eAAK,KAAA,CAAK;AAAA,4BAC7B,kBAAA,EAAiB,WAAW,MAAM,UAAU,eAAe,UAAA,QAE5D;AAAA,4BACC,kBAAA,EAAiB,WAAW,UAAU,UAAU,gBAAgB,UAAA,KAAA,CAEjE;AAAA,MAAA,GACF;AAAA,MACA,oBAAC,qBACC,UAAA,oBAAC,kBAAA,EAAiB,WAAW,QAAQ,UAAU,WAAW,UAAA,KAAA,CAE1D,EAAA,CACF;AAAA,IAAA,EAAA,CACF,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;AACA,YAAY,cAAc;AAInB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EACV,OAAO,CAAA;AAAA;AAAA,EACP,QAAQ,CAAC,WAAW,eAAe;AAAA,EACnC,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAC,QAAQ;AAAA;AAAA,EAAA;AAEnB;"}

package/dist/components/AccountMenu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './account-menu';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/AccountMenu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AccountMenu/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAA"}

package/dist/components/AccountMenu/index.js

@@ -0,0 +1,6 @@
+import { AccountMenu, accountMenuMeta } from "./account-menu.js";
+export {
+  AccountMenu,
+  accountMenuMeta
+};
+//# sourceMappingURL=index.js.map

package/dist/components/AccountMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Alert/alert.d.ts

@@ -10,13 +10,18 @@ export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     title: React.ReactNode;
     description?: React.ReactNode;
     endContent?: React.ReactNode;
+    /**
+     * 顯示關閉鈕(預設 true)。**需同時傳 `onDismiss` 才會渲染 X** — Alert 是 controlled-only
+     * (不自我移除),無 handler 的 X 是死按鈕(2026-07-05 D4;對齊 Polaris Banner / Ant Alert)。
+     * 條件判斷 SSOT 在 Notice(notice.tsx `showDismiss`),Alert 原樣 forward。
+     */
     dismissible?: boolean;
     onDismiss?: () => void;
 }
 declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
 export declare const alertMeta: {
     readonly component: "Alert";
-    readonly family: null;
+    readonly family: 2;
     readonly variants: {
         readonly neutral: {
             readonly purpose: "中性提示(系統公告、非緊急說明);無情緒色";
@@ -35,7 +40,7 @@ export declare const alertMeta: {
         };
     };
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default"];
     readonly tokens: {
         readonly bg: readonly ["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"];
         readonly fg: readonly ["text-foreground"];

package/dist/components/Alert/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAA8C,KAAK,aAAa,EAAE,MAAM,0CAA0C,CAAA;AA2CzH,QAAA,MAAM,aAAa;;8EAQjB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAC/B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAGD,QAAA,MAAM,KAAK,mFA2FV,CAAA;AAMD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAA8C,KAAK,aAAa,EAAE,MAAM,0CAA0C,CAAA;AA8CzH,QAAA,MAAM,aAAa;;8EAQjB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAC/B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAGD,QAAA,MAAM,KAAK,mFA8FV,CAAA;AAMD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/Alert/alert.js

@@ -5,10 +5,10 @@ import { cn } from "../../lib/utils.js";
 import { useInverseTheme, SUBTLE_ICON_COLOR, Notice } from "../Notice/notice.js";
 const SUBTLE_CONTAINER = {
   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)]"
+  info: "bg-info-subtle border border-[var(--info-text)]",
+  success: "bg-success-subtle border border-[var(--success-text)]",
+  warning: "bg-warning-subtle border border-[var(--warning-text)]",
+  error: "bg-error-subtle border border-[var(--error-text)]"
 };
 const SOLID_HUE_BG = {
   info: "bg-info",
@@ -39,7 +39,10 @@ const Alert = React.forwardRef(
     title,
     description,
     endContent,
-    dismissible = true,
+    // 2026-07-05 D4:不 destructure-default(原 `= true` 會把「consumer 沒傳」materialize 成顯式
+    // true,讓 Notice 的 dev-warn 無法分辨消費端矛盾)。等效預設 true 由 Notice showDismiss
+    // `!== false` 承擔,行為不變;X 僅在同時傳 onDismiss 時渲染(SSOT 在 notice.tsx)。
+    dismissible,
     onDismiss,
     className,
     ...props
@@ -106,8 +109,8 @@ const Alert = React.forwardRef(
 Alert.displayName = "Alert";
 const alertMeta = {
   component: "Alert",
-  family: null,
-  // non-family composite / overlay / layout
+  family: 2,
+  // List item(對齊 alert.spec.md frontmatter family: 2)
   variants: {
     neutral: { purpose: "中性提示(系統公告、非緊急說明);無情緒色" },
     info: { purpose: "資訊性提示(版本更新、流程說明);藍色 hue" },
@@ -116,7 +119,8 @@ const alertMeta = {
     error: { purpose: "錯誤但非阻斷(系統錯誤可重試、API 失敗摘要);aria-live=assertive" }
   },
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  states: ["default"],
+  // 2026-06-11 R2:Alert 本體無互動 state(spec L183 明文無 disabled;dismiss 互動屬內部 Button),
   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"],