@qijenchen/design-system 0.1.0-beta.62 → 0.1.0-beta.64

package/CLAUDE.md

@@ -154,7 +154,7 @@ CLAUDE.md target ≤ 200(Anthropic best-practice)/ transition ≤ 400 / hard cap
 **Trigger phrase auto-pipeline**(M19 升級):「依原則自主」/「不需問」/「馬不停蹄」/「全部做完」/「自動」→ 進 autonomous mode,僅 SSOT-affecting UI/UX 停下 ASK。
 
 **2026-05-23 永久 reinforcement(user verbatim,hook 機械強制)**:
-- **Triple-verify before propose**(M18 Q0 universal gate):propose / 列 option / 發現「問題」(含 codex / deep audit findings)前必 inline 跑 (1) grep DS-wide (2) Read spec.md / tsx (3) 對照 canonical exception。三題全過才 propose;任一 NO → 自動撤回不煩 user。Hook `check_propose_pre_grep_verify.sh`。Anchor:2026-05-18 Sheet/inline-action/SurfaceBody false positive、2026-05-23 Badge `text-[10px]` 誤判為 drift(spec L161-167 documented exception)
+- **Triple-verify before propose**(M18 Q0 universal gate):propose / 列 option / 發現「問題」(含 codex / deep audit findings)前必 inline 跑 (1) grep DS-wide (2) Read spec.md / tsx (3) 對照 canonical exception。三題全過才 propose;任一 NO → 自動撤回不煩 user。Hook `check_propose_pre_grep_verify.sh`。Anchor:2026-05-18 Sheet/inline-action/SurfaceBody false positive、2026-05-23 Badge `text-[10px]` 誤判為 drift(badge.spec.md「字體例外」段 documented exception)
 - **SSOT auto-sync invariant**:M-rule count / hook count / dim count / npm scope / version / plugin name 等跨 file 數字禁 hardcode 多處;SSOT in `session_start_governance_check.sh` Check 7 / `meta-patterns.md` / `design-system-audit/SKILL.md` / `package.json` / `.claude-plugin/plugin.json`;其他 file reference 或 `scripts/sync-governance-counters.mjs` 機械對齊,drift 偵測 auto fix
 
 # 遇不確定時的協議
@@ -184,8 +184,7 @@ CLAUDE.md target ≤ 200(Anthropic best-practice)/ transition ≤ 400 / hard cap
 
 # 專案 Stack
 
-Vite + React + TypeScript + Tailwind v4 + shadcn/ui + Storybook + 自訂 Design Token。必要檔案:`index.html` / `src/main.tsx` / `src/globals.css` / `vite.config.ts` / `package.json` / `tsconfig.json`。
-完整路徑 + Token 系統 → `packages/design-system/src/tokens/README.md`(charter)— Phase 1 後 DS 內化在 npm workspace。
+Vite + React + TypeScript + Tailwind v4 + shadcn/ui + Storybook + 自訂 Design Token(必要檔案:`index.html` / `src/main.tsx` / `src/globals.css` / `vite.config.ts` / `package.json` / `tsconfig.json`);完整路徑 + Token 系統 → `packages/design-system/src/tokens/README.md`(charter)— Phase 1 後 DS 內化在 npm workspace。
 
 # Path-scoped rules(2026 Anthropic 推薦)
 

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

@@ -26,7 +26,7 @@ export declare const accordionMeta: {
     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.js

@@ -64,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        // 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  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;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,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  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        // 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  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', '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;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,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,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/Alert/alert.d.ts

@@ -16,7 +16,7 @@ export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
 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 +35,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.js

@@ -106,8 +106,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 +116,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"],

package/dist/components/Alert/alert.js.map

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

package/dist/components/AppShell/app-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/app-shell.tsx"],"names":[],"mappings":"AACA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,KAAK,cAAc,GAAG,iBAAiB,GAAG,gBAAgB,CAAA;AAE1D,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,6FAA6F;IAC7F,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,sDAAsD;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,mDAAmD;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3C,iDAAiD;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,MAAM,WAAW,kBAAkB;IACjC,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAA;IACb,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,GAAG;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC7C,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAID,UAAU,oBAAoB;IAC5B,MAAM,EAAE,cAAc,CAAA;IACtB,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,EAAE,OAAO,CAAA;CAClB;AAID,iBAAS,WAAW,IAAI,oBAAoB,CAI3C;AA+DD,QAAA,MAAM,QAAQ,sFAgIb,CAAA;AAKD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,aAAa,wFAoElB,CAAA;AAQD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/app-shell.tsx"],"names":[],"mappings":"AACA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,KAAK,cAAc,GAAG,iBAAiB,GAAG,gBAAgB,CAAA;AAE1D,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,6FAA6F;IAC7F,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,sDAAsD;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,mDAAmD;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3C,iDAAiD;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,MAAM,WAAW,kBAAkB;IACjC,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAA;IACb,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,GAAG;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC7C,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAID,UAAU,oBAAoB;IAC5B,MAAM,EAAE,cAAc,CAAA;IACtB,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,EAAE,OAAO,CAAA;CAClB;AAID,iBAAS,WAAW,IAAI,oBAAoB,CAI3C;AA+DD,QAAA,MAAM,QAAQ,sFAiIb,CAAA;AAKD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,aAAa,wFAoElB,CAAA;AAQD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/AppShell/app-shell.js

@@ -134,9 +134,10 @@ const AppShell = React.forwardRef(
           /* @__PURE__ */ jsx(SkipToMain, {}),
           sidebar,
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden", children: [
-            header && // Header 在 main column 內(main col sibling,非 main descendant)→ 跟 W3C ARIA in HTML
-            // banner rule 對照:`<header>` 在 main descendant 才不是 banner,本 ChromeHeader 是 <div>
-            // 所以本來就不會被 banner role 計算。仍包 wrap div not <header> 確保不無意觸發 banner。
+            header && // Header 在 main column 內(main col sibling,非 main descendant)。ChromeHeader 自
+            // 2026-05-20 起 render `<header>`(chrome-header.tsx);依 W3C HTML-AAM,`<div>` wrapper
+            // 不 scope out banner(只有 main/article/aside/nav/section 能)→ 仍得 implicit banner ✓
+            // (對齊 app-shell.spec.md「W3C ARIA in HTML banner rule」段)。
             /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: header }),
             /* @__PURE__ */ jsx(
               "main",

package/dist/components/AppShell/app-shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.js","sources":["../../../src/components/AppShell/app-shell.tsx"],"sourcesContent":["// @benchmark-cited: 2026-05-19 — Mantine AppShell / Ant Layout / Material 3 Drawer / Atlassian Navigation System cite in app-shell.spec.md frontmatter.\n/**\n * AppShell — web service page-level layout primitive。\n *\n * 組合 Sidebar + ChromeHeader + Aside + main 成完整 page shell。SSOT 邊界:本 pattern only\n * own slot composition + layout mode + Aside responsive mode;不 own sidebar / header /\n * sheet 視覺(各自 spec own)。\n *\n * 對齊 Mantine AppShell compound API + Ant Layout slot 模式 + Material 3 standard/modal\n * drawer canonical(per spec.md frontmatter cite)。\n *\n * Spec SSOT:`patterns/app-shell/app-shell.spec.md`\n */\n\nimport * as React from 'react'\nimport { X as XIcon } from 'lucide-react'\nimport {\n  Sheet,\n  SheetContent,\n  SheetTitle,\n} from '@/design-system/components/Sheet/sheet'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ScrollArea } from '@/design-system/components/ScrollArea/scroll-area'\nimport { ChromeHeader } from '@/design-system/patterns/header-canonical/chrome-header'\nimport { useIsNarrowViewport } from '@/design-system/hooks/use-is-narrow-viewport'\nimport { cn } from '@/lib/utils'\n\n// ── Types ────────────────────────────────────────────────────────────────────\n\ntype AppShellLayout = 'primary-sidebar' | 'primary-header'\n\nexport interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** primary-sidebar (Linear/Notion 派) | primary-header (GitHub/Slack 派);預設 primary-sidebar */\n  layout?: AppShellLayout\n  /** Sidebar 元素(必傳 Sidebar primitive,per Consumer 紀律)*/\n  sidebar?: React.ReactNode\n  /**\n   * Local page header(永遠 render 在 main column 頂部,當前頁 actions / breadcrumb / page-level filter)。\n   * 兩 layout mode 都會 render 此 slot — `primary-header` mode 多了 globalHeader 在上方,\n   * **不取代** local header(per 2026-05-20 user clarification「primary-header = primary-sidebar + 一條 global header」)。\n   */\n  header?: React.ReactNode\n  /**\n   * Global header(僅 `primary-header` mode render)。橫跨整 viewport 的頂部 bar:\n   * account avatar / workspace switcher / global search / notifications。\n   * 對齊 GitHub top nav / Slack workspace bar / Gmail logo bar 慣例。\n   * `primary-sidebar` mode 傳此 prop 會被忽略。\n   */\n  globalHeader?: React.ReactNode\n  /** Aside 元素(`<AppShellAside>` sub-component);可選 */\n  aside?: React.ReactNode\n  /** Aside open state(modal mode 必須)*/\n  asideOpen?: boolean\n  onAsideOpenChange?: (open: boolean) => void\n  /** Main content;`<main>` landmark + padding=0 */\n  children: React.ReactNode\n}\n\nexport interface AppShellAsideProps {\n  /** Required:modal mode 走 Sheet → aria-labelledby 強制,per sheet.spec.md:98 */\n  title: string\n  /** Width(number 或 breakpoint-keyed object);clamp min:240 max:640 */\n  width?: number | { md?: number; xl?: number }\n  /** Children content */\n  children: React.ReactNode\n  className?: string\n}\n\n// ── Context ──────────────────────────────────────────────────────────────────\n\ninterface AppShellContextValue {\n  layout: AppShellLayout\n  asideOpen: boolean\n  setAsideOpen: (open: boolean) => void\n  isMobile: boolean\n}\n\nconst AppShellContext = React.createContext<AppShellContextValue | null>(null)\n\nfunction useAppShell(): AppShellContextValue {\n  const ctx = React.useContext(AppShellContext)\n  if (!ctx) throw new Error('AppShellAside must be used within <AppShell>')\n  return ctx\n}\n\n// Mobile breakpoint:**消費既有 `useIsNarrowViewport`**(`hooks/use-is-narrow-viewport.ts` SSOT,\n// 768px,跟 Sidebar SSOT 同源)— 不發明 local hook,per codex Layer B D2/D4 verdict 避 drift。\n\n// xl breakpoint(對齊 Tailwind v4 xl = 1280px,DS-wide consensus)\nconst XL_BREAKPOINT_PX = 1280\n\nfunction useIsXl(): boolean {\n  const [isXl, setIsXl] = React.useState<boolean>(() => {\n    if (typeof window === 'undefined') return false\n    return window.matchMedia(`(min-width: ${XL_BREAKPOINT_PX}px)`).matches\n  })\n\n  React.useEffect(() => {\n    const mq = window.matchMedia(`(min-width: ${XL_BREAKPOINT_PX}px)`)\n    const handler = (e: MediaQueryListEvent) => setIsXl(e.matches)\n    mq.addEventListener('change', handler)\n    return () => mq.removeEventListener('change', handler)\n  }, [])\n\n  return isXl\n}\n\n// ── Width resolve(consumer 自傳 + clamp 240-640)──────────────────────────────\n\nconst ASIDE_WIDTH_MIN = 240\nconst ASIDE_WIDTH_MAX = 640\nconst ASIDE_WIDTH_DEFAULT = 320\n\nfunction resolveAsideWidth(width: AppShellAsideProps['width'], isXl: boolean): number {\n  if (typeof width === 'number') {\n    return Math.max(ASIDE_WIDTH_MIN, Math.min(ASIDE_WIDTH_MAX, width))\n  }\n  if (width && typeof width === 'object') {\n    // breakpoint-keyed:xl viewport(≥1280px)用 xl,否則 md\n    const v = (isXl ? width.xl ?? width.md : width.md) ?? ASIDE_WIDTH_DEFAULT\n    return Math.max(ASIDE_WIDTH_MIN, Math.min(ASIDE_WIDTH_MAX, v))\n  }\n  return ASIDE_WIDTH_DEFAULT\n}\n\n// ── Skip-to-main link(a11y WCAG 2.4.1)───────────────────────────────────────\n\nfunction SkipToMain() {\n  return (\n    <a\n      href=\"#app-shell-main\"\n      className={cn(\n        'sr-only focus:not-sr-only',\n        'focus:fixed focus:top-2 focus:left-2 focus:z-50',\n        'focus:px-3 focus:py-2 focus:rounded-md',\n        'focus:bg-surface focus:text-foreground focus:shadow-[var(--elevation-200)]',\n        'focus:outline-none focus:ring-2 focus:ring-primary'\n      )}\n    >\n      Skip to main content\n    </a>\n  )\n}\n\n// ── AppShell root ────────────────────────────────────────────────────────────\n\nconst AppShell = React.forwardRef<HTMLDivElement, AppShellProps>(\n  (\n    {\n      layout = 'primary-sidebar',\n      sidebar,\n      header,\n      globalHeader,\n      aside,\n      asideOpen: asideOpenProp,\n      onAsideOpenChange,\n      children,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const [asideOpenInternal, setAsideOpenInternal] = React.useState(false)\n    const isControlled = asideOpenProp !== undefined\n    const asideOpen = isControlled ? asideOpenProp : asideOpenInternal\n\n    const setAsideOpen = React.useCallback(\n      (open: boolean) => {\n        if (!isControlled) setAsideOpenInternal(open)\n        onAsideOpenChange?.(open)\n      },\n      [isControlled, onAsideOpenChange]\n    )\n\n    const isMobile = useIsNarrowViewport()\n\n    // ── Keyboard: cmd+. toggle aside ──\n    // ⌘B sidebar toggle by Sidebar SSOT(本 component 不重覆 register)\n    React.useEffect(() => {\n      const onKey = (e: KeyboardEvent) => {\n        if (e.key === '.' && (e.metaKey || e.ctrlKey)) {\n          e.preventDefault()\n          setAsideOpen(!asideOpen)\n        }\n      }\n      window.addEventListener('keydown', onKey)\n      return () => window.removeEventListener('keydown', onKey)\n    }, [asideOpen, setAsideOpen])\n\n    const ctxValue = React.useMemo<AppShellContextValue>(\n      () => ({ layout, asideOpen, setAsideOpen, isMobile }),\n      [layout, asideOpen, setAsideOpen, isMobile]\n    )\n\n    // ── Layout grid(2 mode)──\n    // primary-sidebar:\n    //   row1: [sidebar (頂天)][main col (header + main)][aside (頂天)]\n    // primary-header:\n    //   row1: [header (橫跨整 viewport, banner role)]\n    //   row2: [sidebar][main][aside]\n\n    // AppShellAside 自決 inline vs modal mode(via AppShellContext.isMobile)。\n    // AppShell 一律只 render `{aside}` 一次,AppShellAside 內部根據 isMobile 決定 render 形式。\n\n    if (layout === 'primary-header') {\n      // primary-header layout(2026-05-21 v2 — user clarification「primary-header = primary-sidebar + 一條 global header」):\n      // 結構:row1 globalHeader(全寬 global bar)/ row2 [sidebar][main col: localHeader + main][aside]\n      // - globalHeader = 跨頁 account / workspace switcher / notifications(對齊 GitHub top nav / Slack workspace bar)\n      // - header = local page header,**仍存在**(per page actions / breadcrumb,對齊 GitHub repo header / Slack channel header / Gmail email-list toolbar 2-layer 慣例)\n      // Consumer 必傳 `<Sidebar viewportInsetTop=\"var(--chrome-header-height)\">` 讓 sidebar 從 globalHeader 下方起算。\n      return (\n        <AppShellContext.Provider value={ctxValue}>\n          <div\n            ref={ref}\n            className={cn('flex h-svh w-full flex-col overflow-hidden bg-canvas', className)}\n            {...props}\n          >\n            <SkipToMain />\n            {/* Row 1:Global header(account / workspace switcher / notifications,橫跨整 viewport)*/}\n            {globalHeader && <div className=\"flex-shrink-0\">{globalHeader}</div>}\n            {/* Row 2:[sidebar][main col][aside]horizontal row */}\n            <div className=\"flex flex-1 min-h-0 w-full\">\n              {sidebar}\n              {/* Main column:local header + main content(per user model「primary-header = primary-sidebar + global header」)*/}\n              <div className=\"flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden\">\n                {header && <div className=\"flex-shrink-0\">{header}</div>}\n                <main\n                  id=\"app-shell-main\"\n                  tabIndex={-1}\n                  className=\"flex-1 min-w-0 min-h-0 overflow-y-auto focus:outline-none\"\n                >\n                  {children}\n                </main>\n              </div>\n              {aside}\n            </div>\n          </div>\n        </AppShellContext.Provider>\n      )\n    }\n\n    // primary-sidebar layout\n    return (\n      <AppShellContext.Provider value={ctxValue}>\n        <div\n          ref={ref}\n          className={cn('flex h-svh w-full overflow-hidden bg-canvas', className)}\n          {...props}\n        >\n          <SkipToMain />\n          {/* Sidebar — 頂天 */}\n          {sidebar}\n          {/* Main column(header + main 垂直堆)*/}\n          <div className=\"flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden\">\n            {header && (\n              // Header 在 main column 內(main col sibling,非 main descendant)→ 跟 W3C ARIA in HTML\n              // banner rule 對照:`<header>` 在 main descendant 才不是 banner,本 ChromeHeader 是 <div>\n              // 所以本來就不會被 banner role 計算。仍包 wrap div not <header> 確保不無意觸發 banner。\n              <div className=\"flex-shrink-0\">{header}</div>\n            )}\n            <main\n              id=\"app-shell-main\"\n              tabIndex={-1}\n              className=\"flex-1 min-h-0 overflow-y-auto focus:outline-none\"\n            >\n              {children}\n            </main>\n          </div>\n          {/* Aside slot — desktop inline OR mobile Sheet,內部自決 */}\n          {aside}\n        </div>\n      </AppShellContext.Provider>\n    )\n  }\n)\nAppShell.displayName = 'AppShell'\n\n// ── AppShellAside sub-component ──────────────────────────────────────────────\n\n/**\n * AppShellAside — right panel:standard inline(desktop) vs modal overlay(mobile)。\n *\n * Desktop(viewport ≥ 768px):\n *   - Render 直接放 layout grid 右側(asideOpen=true 才 mount,close hide via parent)\n *   - 不蓋 mask / background 可操作 / 佔 layout 寬\n *   - Vertical extent:primary-sidebar → 頂天立地 / primary-header → header 下方\n *\n * Mobile(viewport < 768px):\n *   - Render 走 Sheet primitive(side=\"right\",per sheet.spec.md)\n *   - Mask 蓋 / background 不可操作 / 不佔 layout 寬\n *   - title 強制(aria-labelledby per sheet.spec.md:98)\n */\nconst AppShellAside = React.forwardRef<HTMLElement, AppShellAsideProps>(\n  ({ title, width, children, className }, ref) => {\n    const { asideOpen, setAsideOpen, isMobile } = useAppShell()\n    const isXl = useIsXl()\n    const resolvedWidth = resolveAsideWidth(width, isXl)\n\n    // Shared frame:always-on header(title + close X)+ body(ScrollArea + layoutSpace 規則 1B 父層 padding)\n    // 對齊 codex Layer B 2026-05-20「container mode 可變,panel role/content 不該變」+ Notion/Figma right\n    // panel 共識(modal vs inline 結構相同,host wrapper 不同)。\n    // 2026-05-20 migrate 消費 ChromeHeader primitive(撤回自刻 + 撤回 bg-surface 疊加 — 對齊\n    // `header-canonical.spec.md`「6. Background ownership」段「Nested chrome header 透明繼承\n    // parent」:aside container 自身已 bg-surface,內 header 不該再畫 bg 避免疊加 drift)。\n    // titleNode 依 mode 不同:modal(Sheet)用 SheetTitle 綁 Radix Dialog titleId — 否則\n    // SheetContent 的 aria-labelledby 指向不存在的 id → SR 念「unnamed dialog」+ Radix\n    // TitleWarning console.error(違 sheet.spec.md:98「Sheet content 必有可見 title」)。\n    // inline(aside)用純 <h2>:aside 自身已 aria-label={title},且無 Dialog context 不可用 SheetTitle。\n    const renderFrame = (titleNode: React.ReactNode) => (\n      <>\n        <ChromeHeader>\n          {titleNode}\n          <Button\n            iconOnly\n            dismiss\n            size=\"sm\"\n            startIcon={XIcon}\n            aria-label=\"關閉\"\n            onClick={() => setAsideOpen(false)}\n          />\n        </ChromeHeader>\n        <ScrollArea className=\"flex-1 min-h-0\">\n          {children}\n        </ScrollArea>\n      </>\n    )\n\n    // Modal mode(mobile)— Sheet from right\n    if (isMobile) {\n      return (\n        <Sheet open={asideOpen} onOpenChange={setAsideOpen}>\n          <SheetContent\n            side=\"right\"\n            className=\"w-[min(90vw,var(--app-shell-aside-modal-width))] flex flex-col p-0 [&>button]:hidden\"\n            style={{ ['--app-shell-aside-modal-width' as string]: `${resolvedWidth}px` }}\n          >\n            {renderFrame(<SheetTitle className=\"flex-1\">{title}</SheetTitle>)}\n          </SheetContent>\n        </Sheet>\n      )\n    }\n\n    // Standard inline mode(desktop)\n    if (!asideOpen) return null\n\n    return (\n      <aside\n        ref={ref}\n        aria-label={title}\n        className={cn(\n          'flex flex-col h-full min-h-0 overflow-hidden',\n          'bg-surface border-l border-divider',\n          className\n        )}\n        style={{ width: resolvedWidth }}\n      >\n        {renderFrame(<h2 className=\"text-body-lg font-medium flex-1 truncate\">{title}</h2>)}\n      </aside>\n    )\n  }\n)\nAppShellAside.displayName = 'AppShellAside'\n\n// ── Exports ──────────────────────────────────────────────────────────────────\n\n// code-quality-allow: dead-export useAppShell — public compound API hook(consumer 可自拼 custom aside layout,\n// 對齊 Radix `useDialogContext` / MUI `useFormControl` 慣例)。內部 AppShellAside 已消費(L294),\n// audit script 抓「無 cross-file import」是 false positive(2026-05-21 D2 codify)。\nexport { AppShell, AppShellAside, useAppShell }\n"],"names":["XIcon"],"mappings":"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"}
+{"version":3,"file":"app-shell.js","sources":["../../../src/components/AppShell/app-shell.tsx"],"sourcesContent":["// @benchmark-cited: 2026-05-19 — Mantine AppShell / Ant Layout / Material 3 Drawer / Atlassian Navigation System cite in app-shell.spec.md frontmatter.\n/**\n * AppShell — web service page-level layout primitive。\n *\n * 組合 Sidebar + ChromeHeader + Aside + main 成完整 page shell。SSOT 邊界:本 pattern only\n * own slot composition + layout mode + Aside responsive mode;不 own sidebar / header /\n * sheet 視覺(各自 spec own)。\n *\n * 對齊 Mantine AppShell compound API + Ant Layout slot 模式 + Material 3 standard/modal\n * drawer canonical(per spec.md frontmatter cite)。\n *\n * Spec SSOT:`patterns/app-shell/app-shell.spec.md`\n */\n\nimport * as React from 'react'\nimport { X as XIcon } from 'lucide-react'\nimport {\n  Sheet,\n  SheetContent,\n  SheetTitle,\n} from '@/design-system/components/Sheet/sheet'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ScrollArea } from '@/design-system/components/ScrollArea/scroll-area'\nimport { ChromeHeader } from '@/design-system/patterns/header-canonical/chrome-header'\nimport { useIsNarrowViewport } from '@/design-system/hooks/use-is-narrow-viewport'\nimport { cn } from '@/lib/utils'\n\n// ── Types ────────────────────────────────────────────────────────────────────\n\ntype AppShellLayout = 'primary-sidebar' | 'primary-header'\n\nexport interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** primary-sidebar (Linear/Notion 派) | primary-header (GitHub/Slack 派);預設 primary-sidebar */\n  layout?: AppShellLayout\n  /** Sidebar 元素(必傳 Sidebar primitive,per Consumer 紀律)*/\n  sidebar?: React.ReactNode\n  /**\n   * Local page header(永遠 render 在 main column 頂部,當前頁 actions / breadcrumb / page-level filter)。\n   * 兩 layout mode 都會 render 此 slot — `primary-header` mode 多了 globalHeader 在上方,\n   * **不取代** local header(per 2026-05-20 user clarification「primary-header = primary-sidebar + 一條 global header」)。\n   */\n  header?: React.ReactNode\n  /**\n   * Global header(僅 `primary-header` mode render)。橫跨整 viewport 的頂部 bar:\n   * account avatar / workspace switcher / global search / notifications。\n   * 對齊 GitHub top nav / Slack workspace bar / Gmail logo bar 慣例。\n   * `primary-sidebar` mode 傳此 prop 會被忽略。\n   */\n  globalHeader?: React.ReactNode\n  /** Aside 元素(`<AppShellAside>` sub-component);可選 */\n  aside?: React.ReactNode\n  /** Aside open state(modal mode 必須)*/\n  asideOpen?: boolean\n  onAsideOpenChange?: (open: boolean) => void\n  /** Main content;`<main>` landmark + padding=0 */\n  children: React.ReactNode\n}\n\nexport interface AppShellAsideProps {\n  /** Required:modal mode 走 Sheet → aria-labelledby 強制,per sheet.spec.md:98 */\n  title: string\n  /** Width(number 或 breakpoint-keyed object);clamp min:240 max:640 */\n  width?: number | { md?: number; xl?: number }\n  /** Children content */\n  children: React.ReactNode\n  className?: string\n}\n\n// ── Context ──────────────────────────────────────────────────────────────────\n\ninterface AppShellContextValue {\n  layout: AppShellLayout\n  asideOpen: boolean\n  setAsideOpen: (open: boolean) => void\n  isMobile: boolean\n}\n\nconst AppShellContext = React.createContext<AppShellContextValue | null>(null)\n\nfunction useAppShell(): AppShellContextValue {\n  const ctx = React.useContext(AppShellContext)\n  if (!ctx) throw new Error('AppShellAside must be used within <AppShell>')\n  return ctx\n}\n\n// Mobile breakpoint:**消費既有 `useIsNarrowViewport`**(`hooks/use-is-narrow-viewport.ts` SSOT,\n// 768px,跟 Sidebar SSOT 同源)— 不發明 local hook,per codex Layer B D2/D4 verdict 避 drift。\n\n// xl breakpoint(對齊 Tailwind v4 xl = 1280px,DS-wide consensus)\nconst XL_BREAKPOINT_PX = 1280\n\nfunction useIsXl(): boolean {\n  const [isXl, setIsXl] = React.useState<boolean>(() => {\n    if (typeof window === 'undefined') return false\n    return window.matchMedia(`(min-width: ${XL_BREAKPOINT_PX}px)`).matches\n  })\n\n  React.useEffect(() => {\n    const mq = window.matchMedia(`(min-width: ${XL_BREAKPOINT_PX}px)`)\n    const handler = (e: MediaQueryListEvent) => setIsXl(e.matches)\n    mq.addEventListener('change', handler)\n    return () => mq.removeEventListener('change', handler)\n  }, [])\n\n  return isXl\n}\n\n// ── Width resolve(consumer 自傳 + clamp 240-640)──────────────────────────────\n\nconst ASIDE_WIDTH_MIN = 240\nconst ASIDE_WIDTH_MAX = 640\nconst ASIDE_WIDTH_DEFAULT = 320\n\nfunction resolveAsideWidth(width: AppShellAsideProps['width'], isXl: boolean): number {\n  if (typeof width === 'number') {\n    return Math.max(ASIDE_WIDTH_MIN, Math.min(ASIDE_WIDTH_MAX, width))\n  }\n  if (width && typeof width === 'object') {\n    // breakpoint-keyed:xl viewport(≥1280px)用 xl,否則 md\n    const v = (isXl ? width.xl ?? width.md : width.md) ?? ASIDE_WIDTH_DEFAULT\n    return Math.max(ASIDE_WIDTH_MIN, Math.min(ASIDE_WIDTH_MAX, v))\n  }\n  return ASIDE_WIDTH_DEFAULT\n}\n\n// ── Skip-to-main link(a11y WCAG 2.4.1)───────────────────────────────────────\n\nfunction SkipToMain() {\n  return (\n    <a\n      href=\"#app-shell-main\"\n      className={cn(\n        'sr-only focus:not-sr-only',\n        'focus:fixed focus:top-2 focus:left-2 focus:z-50',\n        'focus:px-3 focus:py-2 focus:rounded-md',\n        'focus:bg-surface focus:text-foreground focus:shadow-[var(--elevation-200)]',\n        'focus:outline-none focus:ring-2 focus:ring-primary'\n      )}\n    >\n      Skip to main content\n    </a>\n  )\n}\n\n// ── AppShell root ────────────────────────────────────────────────────────────\n\nconst AppShell = React.forwardRef<HTMLDivElement, AppShellProps>(\n  (\n    {\n      layout = 'primary-sidebar',\n      sidebar,\n      header,\n      globalHeader,\n      aside,\n      asideOpen: asideOpenProp,\n      onAsideOpenChange,\n      children,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const [asideOpenInternal, setAsideOpenInternal] = React.useState(false)\n    const isControlled = asideOpenProp !== undefined\n    const asideOpen = isControlled ? asideOpenProp : asideOpenInternal\n\n    const setAsideOpen = React.useCallback(\n      (open: boolean) => {\n        if (!isControlled) setAsideOpenInternal(open)\n        onAsideOpenChange?.(open)\n      },\n      [isControlled, onAsideOpenChange]\n    )\n\n    const isMobile = useIsNarrowViewport()\n\n    // ── Keyboard: cmd+. toggle aside ──\n    // ⌘B sidebar toggle by Sidebar SSOT(本 component 不重覆 register)\n    React.useEffect(() => {\n      const onKey = (e: KeyboardEvent) => {\n        if (e.key === '.' && (e.metaKey || e.ctrlKey)) {\n          e.preventDefault()\n          setAsideOpen(!asideOpen)\n        }\n      }\n      window.addEventListener('keydown', onKey)\n      return () => window.removeEventListener('keydown', onKey)\n    }, [asideOpen, setAsideOpen])\n\n    const ctxValue = React.useMemo<AppShellContextValue>(\n      () => ({ layout, asideOpen, setAsideOpen, isMobile }),\n      [layout, asideOpen, setAsideOpen, isMobile]\n    )\n\n    // ── Layout grid(2 mode)──\n    // primary-sidebar:\n    //   row1: [sidebar (頂天)][main col (header + main)][aside (頂天)]\n    // primary-header:\n    //   row1: [header (橫跨整 viewport, banner role)]\n    //   row2: [sidebar][main][aside]\n\n    // AppShellAside 自決 inline vs modal mode(via AppShellContext.isMobile)。\n    // AppShell 一律只 render `{aside}` 一次,AppShellAside 內部根據 isMobile 決定 render 形式。\n\n    if (layout === 'primary-header') {\n      // primary-header layout(2026-05-21 v2 — user clarification「primary-header = primary-sidebar + 一條 global header」):\n      // 結構:row1 globalHeader(全寬 global bar)/ row2 [sidebar][main col: localHeader + main][aside]\n      // - globalHeader = 跨頁 account / workspace switcher / notifications(對齊 GitHub top nav / Slack workspace bar)\n      // - header = local page header,**仍存在**(per page actions / breadcrumb,對齊 GitHub repo header / Slack channel header / Gmail email-list toolbar 2-layer 慣例)\n      // Consumer 必傳 `<Sidebar viewportInsetTop=\"var(--chrome-header-height)\">` 讓 sidebar 從 globalHeader 下方起算。\n      return (\n        <AppShellContext.Provider value={ctxValue}>\n          <div\n            ref={ref}\n            className={cn('flex h-svh w-full flex-col overflow-hidden bg-canvas', className)}\n            {...props}\n          >\n            <SkipToMain />\n            {/* Row 1:Global header(account / workspace switcher / notifications,橫跨整 viewport)*/}\n            {globalHeader && <div className=\"flex-shrink-0\">{globalHeader}</div>}\n            {/* Row 2:[sidebar][main col][aside]horizontal row */}\n            <div className=\"flex flex-1 min-h-0 w-full\">\n              {sidebar}\n              {/* Main column:local header + main content(per user model「primary-header = primary-sidebar + global header」)*/}\n              <div className=\"flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden\">\n                {header && <div className=\"flex-shrink-0\">{header}</div>}\n                <main\n                  id=\"app-shell-main\"\n                  tabIndex={-1}\n                  className=\"flex-1 min-w-0 min-h-0 overflow-y-auto focus:outline-none\"\n                >\n                  {children}\n                </main>\n              </div>\n              {aside}\n            </div>\n          </div>\n        </AppShellContext.Provider>\n      )\n    }\n\n    // primary-sidebar layout\n    return (\n      <AppShellContext.Provider value={ctxValue}>\n        <div\n          ref={ref}\n          className={cn('flex h-svh w-full overflow-hidden bg-canvas', className)}\n          {...props}\n        >\n          <SkipToMain />\n          {/* Sidebar — 頂天 */}\n          {sidebar}\n          {/* Main column(header + main 垂直堆)*/}\n          <div className=\"flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden\">\n            {header && (\n              // Header 在 main column 內(main col sibling,非 main descendant)。ChromeHeader 自\n              // 2026-05-20 起 render `<header>`(chrome-header.tsx);依 W3C HTML-AAM,`<div>` wrapper\n              // 不 scope out banner(只有 main/article/aside/nav/section 能)→ 仍得 implicit banner ✓\n              // (對齊 app-shell.spec.md「W3C ARIA in HTML banner rule」段)。\n              <div className=\"flex-shrink-0\">{header}</div>\n            )}\n            <main\n              id=\"app-shell-main\"\n              tabIndex={-1}\n              className=\"flex-1 min-h-0 overflow-y-auto focus:outline-none\"\n            >\n              {children}\n            </main>\n          </div>\n          {/* Aside slot — desktop inline OR mobile Sheet,內部自決 */}\n          {aside}\n        </div>\n      </AppShellContext.Provider>\n    )\n  }\n)\nAppShell.displayName = 'AppShell'\n\n// ── AppShellAside sub-component ──────────────────────────────────────────────\n\n/**\n * AppShellAside — right panel:standard inline(desktop) vs modal overlay(mobile)。\n *\n * Desktop(viewport ≥ 768px):\n *   - Render 直接放 layout grid 右側(asideOpen=true 才 mount,close hide via parent)\n *   - 不蓋 mask / background 可操作 / 佔 layout 寬\n *   - Vertical extent:primary-sidebar → 頂天立地 / primary-header → header 下方\n *\n * Mobile(viewport < 768px):\n *   - Render 走 Sheet primitive(side=\"right\",per sheet.spec.md)\n *   - Mask 蓋 / background 不可操作 / 不佔 layout 寬\n *   - title 強制(aria-labelledby per sheet.spec.md:98)\n */\nconst AppShellAside = React.forwardRef<HTMLElement, AppShellAsideProps>(\n  ({ title, width, children, className }, ref) => {\n    const { asideOpen, setAsideOpen, isMobile } = useAppShell()\n    const isXl = useIsXl()\n    const resolvedWidth = resolveAsideWidth(width, isXl)\n\n    // Shared frame:always-on header(title + close X)+ body(ScrollArea + layoutSpace 規則 1B 父層 padding)\n    // 對齊 codex Layer B 2026-05-20「container mode 可變,panel role/content 不該變」+ Notion/Figma right\n    // panel 共識(modal vs inline 結構相同,host wrapper 不同)。\n    // 2026-05-20 migrate 消費 ChromeHeader primitive(撤回自刻 + 撤回 bg-surface 疊加 — 對齊\n    // `header-canonical.spec.md`「6. Background ownership」段「Nested chrome header 透明繼承\n    // parent」:aside container 自身已 bg-surface,內 header 不該再畫 bg 避免疊加 drift)。\n    // titleNode 依 mode 不同:modal(Sheet)用 SheetTitle 綁 Radix Dialog titleId — 否則\n    // SheetContent 的 aria-labelledby 指向不存在的 id → SR 念「unnamed dialog」+ Radix\n    // TitleWarning console.error(違 sheet.spec.md:98「Sheet content 必有可見 title」)。\n    // inline(aside)用純 <h2>:aside 自身已 aria-label={title},且無 Dialog context 不可用 SheetTitle。\n    const renderFrame = (titleNode: React.ReactNode) => (\n      <>\n        <ChromeHeader>\n          {titleNode}\n          <Button\n            iconOnly\n            dismiss\n            size=\"sm\"\n            startIcon={XIcon}\n            aria-label=\"關閉\"\n            onClick={() => setAsideOpen(false)}\n          />\n        </ChromeHeader>\n        <ScrollArea className=\"flex-1 min-h-0\">\n          {children}\n        </ScrollArea>\n      </>\n    )\n\n    // Modal mode(mobile)— Sheet from right\n    if (isMobile) {\n      return (\n        <Sheet open={asideOpen} onOpenChange={setAsideOpen}>\n          <SheetContent\n            side=\"right\"\n            className=\"w-[min(90vw,var(--app-shell-aside-modal-width))] flex flex-col p-0 [&>button]:hidden\"\n            style={{ ['--app-shell-aside-modal-width' as string]: `${resolvedWidth}px` }}\n          >\n            {renderFrame(<SheetTitle className=\"flex-1\">{title}</SheetTitle>)}\n          </SheetContent>\n        </Sheet>\n      )\n    }\n\n    // Standard inline mode(desktop)\n    if (!asideOpen) return null\n\n    return (\n      <aside\n        ref={ref}\n        aria-label={title}\n        className={cn(\n          'flex flex-col h-full min-h-0 overflow-hidden',\n          'bg-surface border-l border-divider',\n          className\n        )}\n        style={{ width: resolvedWidth }}\n      >\n        {renderFrame(<h2 className=\"text-body-lg font-medium flex-1 truncate\">{title}</h2>)}\n      </aside>\n    )\n  }\n)\nAppShellAside.displayName = 'AppShellAside'\n\n// ── Exports ──────────────────────────────────────────────────────────────────\n\n// code-quality-allow: dead-export useAppShell — public compound API hook(consumer 可自拼 custom aside layout,\n// 對齊 Radix `useDialogContext` / MUI `useFormControl` 慣例)。內部 AppShellAside 已消費(L294),\n// audit script 抓「無 cross-file import」是 false positive(2026-05-21 D2 codify)。\nexport { AppShell, AppShellAside, useAppShell }\n"],"names":["XIcon"],"mappings":"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"}

package/dist/components/Avatar/avatar.d.ts

@@ -74,7 +74,7 @@ export declare const avatarMeta: {
     readonly family: null;
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "focus-visible", "disabled"];
     readonly tokens: {
         readonly bg: readonly ["bg-surface-raised"];
         readonly fg: readonly ["--foreground", "--on-emphasis"];

package/dist/components/Avatar/avatar.js

@@ -167,7 +167,8 @@ const avatarMeta = {
   // non-family composite / overlay / layout
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  states: ["default", "focus-visible", "disabled"],
+  // 2026-06-11 R2:本身無自有 hover/active(spec L279;hoverCard 互動屬 HoverCard),
   tokens: {
     bg: ["bg-surface-raised"],
     fg: ["--foreground", "--on-emphasis"],

package/dist/components/Avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../src/components/Avatar/avatar.tsx"],"sourcesContent":["// @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.\nimport * as React from 'react'\nimport { User } from 'lucide-react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { CAT_SUBTLE_TOKENS, CAT_SOLID_TOKENS, type CategoricalColor } from '@/design-system/tokens/categorical-color'\nimport { HoverCard, HoverCardTrigger, HoverCardContent } from '@/design-system/components/HoverCard/hover-card'\nimport { HOVER_DELAY_RICH_MS, HOVER_DELAY_CLOSE_MS } from '@/design-system/tokens/motion/motion'\nimport { Badge } from '@/design-system/components/Badge/badge'\nimport { useResolvedFieldDisabled, useTableIsScrolling } from '@/design-system/components/Field/field-context'\n\n/**\n * Avatar — 頭像元件\n *\n * 三種內容模式（按優先順序）：\n *   1. src → 圖片\n *   2. icon → icon 在底色圓/方形內\n *   3. alt → 取首字作文字 fallback\n *   4. 都沒有 → 預設 User icon\n *\n * ── 尺寸 ──\n *   size 接受任意 px 值，icon 自動 = round_even(size × 0.6)\n *   文字 fallback 字體 = size × 0.5\n *\n * ── 形狀 ──\n *   circle（預設）→ rounded-full，用於人物\n *   square → rounded-md (4px)，用於實體（專案、組織、App）\n */\n\n// ── 色彩 ──\n// **消費 categorical-color SSOT**(CAT_SUBTLE_TOKENS / CAT_SOLID_TOKENS,key X 一律對 `--color-X-*`,\n// 1:1 零 offset)。subtle=step-1 底 + step-7 字;solid=step-6 全色底 + on-emphasis 字\n//(亮 hue yellow/amber/orange/lime 用 --on-emphasis-dark 深字;green 白字例外)。neutral 非色相,自處理(subtle=muted、solid=neutral-9)。\n// 2026-06-04 修:原 `red` 誤接 `--color-deep-orange-*`(red=品牌紅 hue-25 ≠ deep-orange);\n// 改消費 SSOT 後 red→`--color-red-*`,並補齊全 12 色相。\ntype ColorKey = CategoricalColor\ntype VariantKey = 'subtle' | 'solid'\n\nconst COLOR_MAP: Record<VariantKey, Record<ColorKey, { bg: string; text: string }>> = {\n  subtle: {\n    neutral: { bg: 'var(--muted)', text: 'var(--foreground)' },\n    ...CAT_SUBTLE_TOKENS,\n  },\n  solid: {\n    neutral: { bg: 'var(--color-neutral-9)', text: 'var(--inverse-fg)' },\n    ...CAT_SOLID_TOKENS,\n  },\n}\n\n// ── Icon size: round to nearest even, ≈ 60% ──\nfunction getIconSize(avatarSize: number): number {\n  return Math.round((avatarSize * 0.6) / 2) * 2\n}\n\n// ── Text fallback: first character ──\nfunction getInitial(text: string): string {\n  return text.trim().charAt(0).toUpperCase()\n}\n\n// Semantic presence tokens — 見 color/semantic.css\n// Module-level constant(2026-04-22 D3 perf audit):從 render body 移到 module scope,\n// 避免每次 Avatar render 都 re-declare 此 4-entry object(Low impact 但渲染大量 avatars 時累積可觀)\nconst STATUS_DOT_COLOR: Record<string, string> = {\n  online: 'var(--status-online)',\n  away: 'var(--status-away)',\n  busy: 'var(--status-busy)',\n  offline: 'var(--status-offline)',\n}\n\n// ── useDocumentTheme(2026-04-23;M3 Portal 逃脫防線,scope verified 2026-04-25)──\n// 讀 `<html data-theme>` 並 observe mutation。用於 Avatar hoverCard ProfileCard:\n// Portal 後的 HoverCardContent 會繼承 trigger subtree theme(如 OverflowIndicator\n// dark tooltip 內部),造成 ProfileCard 被污染成 dark。顯式 bind app-level theme\n// 確保 ProfileCard 永遠跟 app 本身 theme 一致(light-in-light-app / dark-in-dark-app)。\n//\n// 範圍 audit 2026-04-25:觀察對象是 `document.documentElement` 自有 DOM,非 3rd-party\n// lib 內部(不屬 M2 scope);attributeFilter 限定 `data-theme` 單一 attr,re-render 成本\n// 為每次全站 theme 切換 × Avatar 數量,可接受。\nfunction useDocumentTheme(): string | null {\n  const [theme, setTheme] = React.useState<string | null>(() =>\n    typeof document !== 'undefined' ? document.documentElement.getAttribute('data-theme') : null,\n  )\n  React.useEffect(() => {\n    if (typeof document === 'undefined') return\n    const root = document.documentElement\n    const update = () => setTheme(root.getAttribute('data-theme'))\n    update()\n    const obs = new MutationObserver(update)\n    obs.observe(root, { attributes: true, attributeFilter: ['data-theme'] })\n    return () => obs.disconnect()\n  }, [])\n  return theme\n}\n\n// ── Component ──\n\nexport interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** 尺寸：number (px) 或 'fill'（填滿父容器，由父層決定大小）。預設 32 */\n  size?: number | 'fill'\n  /** 形狀：circle（人物）或 square（實體），預設 circle */\n  shape?: 'circle' | 'square'\n  /** 圖片 URL */\n  src?: string\n  /** 替代文字（圖片失敗時取首字作 fallback） */\n  alt?: string\n  /** Icon 模式（LucideIcon） */\n  icon?: LucideIcon\n  /** Icon / text fallback 的背景色，預設 neutral */\n  color?: ColorKey\n  /** 深底模式（step-6 背景 + on-emphasis 配對前景；亮色 hue yellow/amber/orange/lime 用深字 --on-emphasis-dark），預設 false */\n  solid?: boolean\n  /**\n   * 在線狀態指示器(presence),顯示在 avatar **右下角**。\n   * 世界級對照:Slack / Teams / Discord — `online` 是最廣泛被理解的術語。\n   * 位置語義:右下 = \"此人的 presence\"(使用者聚焦於「這個人是誰 + 現在 在不在」)。\n   */\n  status?: 'online' | 'away' | 'busy' | 'offline'\n  /**\n   * 未讀 / 通知計數 badge,顯示在 avatar **右上角**。\n   * 世界級對照:chat app(iMessage / Slack thread / LINE / WhatsApp)一律右上角。\n   * 位置語義:右上 = \"關於此對話的新事件數量\"(使用者聚焦於「有多少未處理」);\n   * 與右下的 presence 共存不衝突(不同角、不同語義)。\n   * `> 99` 自動顯示 \"99+\"(交給內部 Badge 的 `max` 行為)。\n   */\n  badgeCount?: number\n  /**\n   * 傳入 HoverCard 內容（如 ProfileCard），hover avatar 時自動顯示。\n   * 只有人員 avatar 需要傳；實體 avatar（專案、組織）不傳。\n   */\n  hoverCard?: React.ReactNode\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\n// 2026-05-13 (a) perf fix part-2(per codex Layer C Roadmap rich-cell dominant + user 拍 Path (a)):\n// `React.memo` wrap forwardRef Avatar — Roadmap 13 columns 含 person/multiPerson,每 row 多 avatar\n// × HoverCard subtree + useDocumentTheme observer = 重渲染 hotspot。memo shallow-equal props,\n// HoverCard / themeRef stable across scroll 時 skip re-render。對齊 codex Profile Plan step 5\n// (filter Avatar/PeoplePicker/FieldSurfaceProvider remounts)。\n// code-quality-allow: long-function — size × shape × color × solid × status × badgeCount × hoverCard × img-fallback 多軸 prop 組合,拆 sub-fn 會跨 fn 傳 imgError state + isTableScrolling observer 結果\nconst AvatarInner = React.forwardRef<HTMLDivElement, AvatarProps>(\n  ({ size = 32, shape = 'circle', src, alt, icon: Icon, color = 'neutral', solid = false, status, badgeCount, hoverCard, className, style, ...props }, ref) => {\n    const [imgError, setImgError] = React.useState(false)\n    const documentTheme = useDocumentTheme()\n    const isTableScrolling = useTableIsScrolling()\n    // 2026-05-13 R3.5(per codex Q3 verdict + user 拍「想盡辦法 auto-handle prereq」):\n    // Avatar self-dim when in disabled Field wrapper context(取代既有 wrapper opacity-disabled blanket\n    // 逃生艙 — color.spec.md:729 specific-disabled-color canonical)。\n    // Scope:`useResolvedFieldDisabled()`(= fieldCtx.disabled,涵蓋 <Field disabled> 與 <Field mode=\"disabled\">),標準 Field\n    // 家族 wrapper disabled 時才 dim;**沒包在 Field wrapper 內的 standalone Avatar**(ProfileCard / FileItem /\n    // HoverCard / Dialog 等 display 場景)**backward compat 不變**。對齊 avatar.spec.md「Avatar 在 disabled\n    // 元件內 host-controlled opacity」canonical — 升級成「Avatar self-managed via fieldCtx」。\n    // 2026-06-08 SSOT:欄位內 Avatar 跟隨 <Field disabled>/<Field mode=\"disabled\"> 變淡(fieldCtx-scoped,cell 無 fieldCtx → 不影響)\n    const isDisabledInField = useResolvedFieldDisabled()\n    const isFill = size === 'fill'\n    // Fill 模式下 icon 用 60% 寬高、text 用 50cqi（container query inline-size）；\n    // 數字模式下用既有 px 計算\n    const numSize = isFill ? 32 : (size as number)\n    const iconPx = getIconSize(numSize)\n    const fontSizePx = Math.round(numSize * 0.5)\n    const variantKey: VariantKey = solid ? 'solid' : 'subtle'\n    const colors = COLOR_MAP[variantKey]?.[color] ?? COLOR_MAP.subtle.neutral\n    const radius = shape === 'circle' ? '9999px' : '4px'\n\n    // 決定內容\n    const showImage = src && !imgError\n    const showIcon = !showImage && (Icon || (!alt))\n    const showText = !showImage && !showIcon && alt\n\n    const FallbackIcon = Icon ?? User\n\n    // Status dot 尺寸:avatar 的 28%(Slack / Teams / Discord 世界級平均),\n    // clamp [8, 16] — floor 8 保小 avatar 仍可辨識但不喧賓奪主(10 floor 會讓 24px\n    // avatar 的 dot 占 42% 太大);ceiling 16 防大 avatar dot 過度放大\n    const dotSize = isFill ? 10 : Math.max(8, Math.min(16, Math.round(numSize * 0.28)))\n    // Border ring 在 surface 上分離 dot 與 avatar,dotSize ≥ 12 時升階到 3px 保持視覺比例\n    const dotBorder = dotSize >= 12 ? 3 : 2\n\n    const avatarEl = (\n      <div\n        className={cn(\n          'inline-flex items-center justify-center shrink-0 overflow-hidden select-none',\n          isFill && 'w-full h-full',\n          // 2026-05-13 R3.5 self-dim:Avatar 在 disabled Field wrapper context 內自 dim\n          // (取代 field-wrapper.tsx default/bare/naked disabled blanket opacity-disabled 逃生艙)\n          isDisabledInField && 'opacity-disabled',\n        )}\n        style={{\n          ...(isFill\n            ? { containerType: 'inline-size' as React.CSSProperties['containerType'] }\n            : { width: numSize, height: numSize }),\n          borderRadius: radius,\n          backgroundColor: showImage ? undefined : colors.bg,\n          color: showImage ? undefined : colors.text,\n        }}\n        data-avatar-size={isFill ? 'fill' : numSize}\n        role={!showImage && alt && !hoverCard ? 'img' : undefined}\n        aria-label={!showImage && alt && !hoverCard ? alt : undefined}\n      >\n        {showImage && (\n          <img\n            src={src}\n            alt={alt ?? ''}\n            className=\"w-full h-full object-cover\"\n            onError={() => setImgError(true)}\n          />\n        )}\n        {showIcon && (\n          isFill\n            ? <FallbackIcon className=\"w-[60%] h-[60%]\" aria-hidden />\n            : <FallbackIcon size={iconPx} aria-hidden />\n        )}\n        {showText && (\n          <span\n            className=\"font-medium leading-none\"\n            style={{ fontSize: isFill ? '50cqi' : fontSizePx }}\n            aria-hidden\n          >\n            {getInitial(alt!)}\n          </span>\n        )}\n      </div>\n    )\n\n    const hasOverlay = status || typeof badgeCount === 'number'\n    // Keyboard access canonical(D4 UX audit 2026-04-22 finding):Avatar with `hoverCard`\n    // 需 keyboard 可達 — Radix `HoverCardTrigger asChild` 不自動加 tabIndex,non-focusable\n    // `<div>` 會讓 keyboard-only user 無法 reach ProfileCard popover(WCAG 2.1.1 / 4.1.2 違反)。\n    // 解:當 `hoverCard` 存在時,wrapper `<div>` 變 focusable(`tabIndex=0` + `role=\"button\"` +\n    // `aria-haspopup=\"dialog\"` + focus-visible ring)。若無 hoverCard 則維持純展示 `<div>`。\n    const focusableProps = hoverCard\n      ? {\n          tabIndex: 0,\n          role: 'button' as const,\n          'aria-haspopup': 'dialog' as const,\n          'aria-label': alt ?? 'View profile',\n        }\n      : {}\n    // 2026-05-31:focus ring 圓角跟隨 shape(circle→rounded-full / square→rounded-md 對齊 body radius L173),\n    // 原寫死 rounded-full 會讓方形 avatar(實體)配 hoverCard 時出現圓形 ring。hoverCard 為通用行為(任意內容),\n    // 方形 avatar 合法可配(內容非 ProfileCard 而已),故 ring 必跟形狀。\n    const focusableClass = hoverCard\n      ? cn('focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1', shape === 'circle' ? 'rounded-full' : 'rounded-md')\n      : ''\n    const baseEl = !hasOverlay\n      ? <div ref={ref} className={cn('inline-flex shrink-0', focusableClass, className)} style={style} {...focusableProps} {...props}>{avatarEl}</div>\n      : (\n        <div ref={ref} className={cn('relative inline-flex shrink-0', focusableClass, className)} style={style} {...focusableProps} {...props}>\n          {avatarEl}\n          {/* Status dot:bottom-right(presence — 世界級對照 Slack / Teams / Discord),\n              落在 circle avatar 圓周 45° 位置 / square avatar 右下直角;\n              border ring 用 surface 色讓 dot 從 avatar 邊界視覺分離。\n              a11y:`aria-hidden` — presence 資訊整合到 parent avatar 的 aria-label\n              (world-class Slack 做法),避免多 `role=\"status\"` 造成 screen reader 洪水 */}\n          {status && (\n            <span\n              className=\"absolute block rounded-full\"\n              style={{\n                width: dotSize,\n                height: dotSize,\n                bottom: 0,\n                right: 0,\n                backgroundColor: STATUS_DOT_COLOR[status],\n                boxShadow: `0 0 0 ${dotBorder}px var(--surface-raised, var(--canvas))`,\n              }}\n              aria-hidden\n            />\n          )}\n          {/* Count badge:top-right(chat 未讀 / 通知計數 — 世界級對照 iMessage /\n              Slack thread / LINE / WhatsApp)。消費 DS Badge(critical variant),\n              再加 ring 與 avatar 分離 */}\n          {typeof badgeCount === 'number' && badgeCount > 0 && (\n            <Badge\n              variant=\"critical\"\n              count={badgeCount}\n              max={99}\n              className=\"absolute -top-1 -right-1\"\n              style={{\n                boxShadow: `0 0 0 2px var(--surface-raised, var(--canvas))`,\n              }}\n              aria-label={`${badgeCount} unread`}\n            />\n          )}\n        </div>\n      )\n\n    // 2026-05-13 (c) scroll-defer perf(per user 拍 Path (c) + codex Q3 verdict):\n    // DataTable scrolling 期間跳 HoverCard wrapper(Portal + useDocumentTheme observer 是\n    // Roadmap 重渲 hotspot,per codex Layer C 分析)。scroll 結束 → context flips false →\n    // re-render 接回完整 HoverCard tree(ProfileCard 仍可 hover 顯示)。\n    // 對齊 AG Grid `deferRender` for slow React cell components / MUI X DataGrid scroll-defer。\n    if (!hoverCard || isTableScrolling) return baseEl\n\n    return (\n      <HoverCard openDelay={HOVER_DELAY_RICH_MS} closeDelay={HOVER_DELAY_CLOSE_MS}>\n        <HoverCardTrigger asChild>\n          {baseEl}\n        </HoverCardTrigger>\n        {/* HoverCardContent canonical(2026-04-23):\n            - 無 inner padding(consumer ProfileCard 自帶 `px-4 py-3` chrome)\n            - `overflow-hidden` + `rounded-lg` → child(ProfileCard)圓角裁切\n            - **不設 max-height**:ProfileCard 自己消費 `--radix-hover-card-content-available-height`\n              自約束高度 + 內部 ScrollArea 處理捲動\n            - `data-theme={documentTheme}`:ProfileCard 永遠跟隨 **app-level theme**(從 `<html data-theme>`\n              動態讀),不受 trigger subtree theme 污染。範例:Avatar 位於 OverflowIndicator 的 dark\n              tooltip 內,其 Portal 會繼承該 subtree dark theme → ProfileCard 變全黑。顯式設回 app theme\n              確保 ProfileCard 永遠 light-in-light-app / dark-in-dark-app。 */}\n        <HoverCardContent\n          data-theme={documentTheme ?? undefined}\n          className=\"bg-surface-raised rounded-lg border border-border overflow-hidden\"\n          style={{ boxShadow: 'var(--elevation-200)' }}\n        >\n          {hoverCard}\n        </HoverCardContent>\n      </HoverCard>\n    )\n  }\n)\nAvatarInner.displayName = 'AvatarInner'\n\n// ── AvatarData ─────────────────────────────────────────────────────────────\n// 資料型別，讓 consumer 傳資料而非 ReactNode。\n// 接收端內部用 Avatar 元件渲染，統一控制尺寸與 fallback。\n\nexport interface AvatarData {\n  /** 圖片 URL */\n  src?: string\n  /** 替代文字（圖片失敗時取首字作 fallback） */\n  alt: string\n  /** Icon / text fallback 的背景色，預設 neutral */\n  color?: ColorKey\n  /**\n   * Person avatar hover ProfileCard(DS-wide canonical,person avatar 預設必有,見 avatar.spec.md)。\n   * Entity avatar(專案 / 組織 logo)不帶 → consumer 不傳 hoverCard 即豁免。\n   * 所有消費 AvatarData 的 primitive(MenuItem / DropdownMenu / SelectMenu / SelectionItem / ProfileCard)\n   * 需 forward 此 prop 到內部 <Avatar hoverCard={avatar.hoverCard} />。\n   */\n  hoverCard?: React.ReactNode\n}\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 avatarMeta = {\n  component: 'Avatar',\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: ['bg-surface-raised'],\n    fg: ['--foreground', '--on-emphasis'],\n    ring: ['ring-ring'],\n  },\n} as const\n\nAvatarInner.displayName = 'Avatar'\nconst Avatar = React.memo(AvatarInner)\n\nexport { Avatar }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"avatar.js","sources":["../../../src/components/Avatar/avatar.tsx"],"sourcesContent":["// @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.\nimport * as React from 'react'\nimport { User } from 'lucide-react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { CAT_SUBTLE_TOKENS, CAT_SOLID_TOKENS, type CategoricalColor } from '@/design-system/tokens/categorical-color'\nimport { HoverCard, HoverCardTrigger, HoverCardContent } from '@/design-system/components/HoverCard/hover-card'\nimport { HOVER_DELAY_RICH_MS, HOVER_DELAY_CLOSE_MS } from '@/design-system/tokens/motion/motion'\nimport { Badge } from '@/design-system/components/Badge/badge'\nimport { useResolvedFieldDisabled, useTableIsScrolling } from '@/design-system/components/Field/field-context'\n\n/**\n * Avatar — 頭像元件\n *\n * 三種內容模式（按優先順序）：\n *   1. src → 圖片\n *   2. icon → icon 在底色圓/方形內\n *   3. alt → 取首字作文字 fallback\n *   4. 都沒有 → 預設 User icon\n *\n * ── 尺寸 ──\n *   size 接受任意 px 值，icon 自動 = round_even(size × 0.6)\n *   文字 fallback 字體 = size × 0.5\n *\n * ── 形狀 ──\n *   circle（預設）→ rounded-full，用於人物\n *   square → rounded-md (4px)，用於實體（專案、組織、App）\n */\n\n// ── 色彩 ──\n// **消費 categorical-color SSOT**(CAT_SUBTLE_TOKENS / CAT_SOLID_TOKENS,key X 一律對 `--color-X-*`,\n// 1:1 零 offset)。subtle=step-1 底 + step-7 字;solid=step-6 全色底 + on-emphasis 字\n//(亮 hue yellow/amber/orange/lime 用 --on-emphasis-dark 深字;green 白字例外)。neutral 非色相,自處理(subtle=muted、solid=neutral-9)。\n// 2026-06-04 修:原 `red` 誤接 `--color-deep-orange-*`(red=品牌紅 hue-25 ≠ deep-orange);\n// 改消費 SSOT 後 red→`--color-red-*`,並補齊全 12 色相。\ntype ColorKey = CategoricalColor\ntype VariantKey = 'subtle' | 'solid'\n\nconst COLOR_MAP: Record<VariantKey, Record<ColorKey, { bg: string; text: string }>> = {\n  subtle: {\n    neutral: { bg: 'var(--muted)', text: 'var(--foreground)' },\n    ...CAT_SUBTLE_TOKENS,\n  },\n  solid: {\n    neutral: { bg: 'var(--color-neutral-9)', text: 'var(--inverse-fg)' },\n    ...CAT_SOLID_TOKENS,\n  },\n}\n\n// ── Icon size: round to nearest even, ≈ 60% ──\nfunction getIconSize(avatarSize: number): number {\n  return Math.round((avatarSize * 0.6) / 2) * 2\n}\n\n// ── Text fallback: first character ──\nfunction getInitial(text: string): string {\n  return text.trim().charAt(0).toUpperCase()\n}\n\n// Semantic presence tokens — 見 color/semantic.css\n// Module-level constant(2026-04-22 D3 perf audit):從 render body 移到 module scope,\n// 避免每次 Avatar render 都 re-declare 此 4-entry object(Low impact 但渲染大量 avatars 時累積可觀)\nconst STATUS_DOT_COLOR: Record<string, string> = {\n  online: 'var(--status-online)',\n  away: 'var(--status-away)',\n  busy: 'var(--status-busy)',\n  offline: 'var(--status-offline)',\n}\n\n// ── useDocumentTheme(2026-04-23;M3 Portal 逃脫防線,scope verified 2026-04-25)──\n// 讀 `<html data-theme>` 並 observe mutation。用於 Avatar hoverCard ProfileCard:\n// Portal 後的 HoverCardContent 會繼承 trigger subtree theme(如 OverflowIndicator\n// dark tooltip 內部),造成 ProfileCard 被污染成 dark。顯式 bind app-level theme\n// 確保 ProfileCard 永遠跟 app 本身 theme 一致(light-in-light-app / dark-in-dark-app)。\n//\n// 範圍 audit 2026-04-25:觀察對象是 `document.documentElement` 自有 DOM,非 3rd-party\n// lib 內部(不屬 M2 scope);attributeFilter 限定 `data-theme` 單一 attr,re-render 成本\n// 為每次全站 theme 切換 × Avatar 數量,可接受。\nfunction useDocumentTheme(): string | null {\n  const [theme, setTheme] = React.useState<string | null>(() =>\n    typeof document !== 'undefined' ? document.documentElement.getAttribute('data-theme') : null,\n  )\n  React.useEffect(() => {\n    if (typeof document === 'undefined') return\n    const root = document.documentElement\n    const update = () => setTheme(root.getAttribute('data-theme'))\n    update()\n    const obs = new MutationObserver(update)\n    obs.observe(root, { attributes: true, attributeFilter: ['data-theme'] })\n    return () => obs.disconnect()\n  }, [])\n  return theme\n}\n\n// ── Component ──\n\nexport interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** 尺寸：number (px) 或 'fill'（填滿父容器，由父層決定大小）。預設 32 */\n  size?: number | 'fill'\n  /** 形狀：circle（人物）或 square（實體），預設 circle */\n  shape?: 'circle' | 'square'\n  /** 圖片 URL */\n  src?: string\n  /** 替代文字（圖片失敗時取首字作 fallback） */\n  alt?: string\n  /** Icon 模式（LucideIcon） */\n  icon?: LucideIcon\n  /** Icon / text fallback 的背景色，預設 neutral */\n  color?: ColorKey\n  /** 深底模式（step-6 背景 + on-emphasis 配對前景；亮色 hue yellow/amber/orange/lime 用深字 --on-emphasis-dark），預設 false */\n  solid?: boolean\n  /**\n   * 在線狀態指示器(presence),顯示在 avatar **右下角**。\n   * 世界級對照:Slack / Teams / Discord — `online` 是最廣泛被理解的術語。\n   * 位置語義:右下 = \"此人的 presence\"(使用者聚焦於「這個人是誰 + 現在 在不在」)。\n   */\n  status?: 'online' | 'away' | 'busy' | 'offline'\n  /**\n   * 未讀 / 通知計數 badge,顯示在 avatar **右上角**。\n   * 世界級對照:chat app(iMessage / Slack thread / LINE / WhatsApp)一律右上角。\n   * 位置語義:右上 = \"關於此對話的新事件數量\"(使用者聚焦於「有多少未處理」);\n   * 與右下的 presence 共存不衝突(不同角、不同語義)。\n   * `> 99` 自動顯示 \"99+\"(交給內部 Badge 的 `max` 行為)。\n   */\n  badgeCount?: number\n  /**\n   * 傳入 HoverCard 內容（如 ProfileCard），hover avatar 時自動顯示。\n   * 只有人員 avatar 需要傳；實體 avatar（專案、組織）不傳。\n   */\n  hoverCard?: React.ReactNode\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\n// 2026-05-13 (a) perf fix part-2(per codex Layer C Roadmap rich-cell dominant + user 拍 Path (a)):\n// `React.memo` wrap forwardRef Avatar — Roadmap 13 columns 含 person/multiPerson,每 row 多 avatar\n// × HoverCard subtree + useDocumentTheme observer = 重渲染 hotspot。memo shallow-equal props,\n// HoverCard / themeRef stable across scroll 時 skip re-render。對齊 codex Profile Plan step 5\n// (filter Avatar/PeoplePicker/FieldSurfaceProvider remounts)。\n// code-quality-allow: long-function — size × shape × color × solid × status × badgeCount × hoverCard × img-fallback 多軸 prop 組合,拆 sub-fn 會跨 fn 傳 imgError state + isTableScrolling observer 結果\nconst AvatarInner = React.forwardRef<HTMLDivElement, AvatarProps>(\n  ({ size = 32, shape = 'circle', src, alt, icon: Icon, color = 'neutral', solid = false, status, badgeCount, hoverCard, className, style, ...props }, ref) => {\n    const [imgError, setImgError] = React.useState(false)\n    const documentTheme = useDocumentTheme()\n    const isTableScrolling = useTableIsScrolling()\n    // 2026-05-13 R3.5(per codex Q3 verdict + user 拍「想盡辦法 auto-handle prereq」):\n    // Avatar self-dim when in disabled Field wrapper context(取代既有 wrapper opacity-disabled blanket\n    // 逃生艙 — color.spec.md:729 specific-disabled-color canonical)。\n    // Scope:`useResolvedFieldDisabled()`(= fieldCtx.disabled,涵蓋 <Field disabled> 與 <Field mode=\"disabled\">),標準 Field\n    // 家族 wrapper disabled 時才 dim;**沒包在 Field wrapper 內的 standalone Avatar**(ProfileCard / FileItem /\n    // HoverCard / Dialog 等 display 場景)**backward compat 不變**。對齊 avatar.spec.md「Avatar 在 disabled\n    // 元件內 host-controlled opacity」canonical — 升級成「Avatar self-managed via fieldCtx」。\n    // 2026-06-08 SSOT:欄位內 Avatar 跟隨 <Field disabled>/<Field mode=\"disabled\"> 變淡(fieldCtx-scoped,cell 無 fieldCtx → 不影響)\n    const isDisabledInField = useResolvedFieldDisabled()\n    const isFill = size === 'fill'\n    // Fill 模式下 icon 用 60% 寬高、text 用 50cqi（container query inline-size）；\n    // 數字模式下用既有 px 計算\n    const numSize = isFill ? 32 : (size as number)\n    const iconPx = getIconSize(numSize)\n    const fontSizePx = Math.round(numSize * 0.5)\n    const variantKey: VariantKey = solid ? 'solid' : 'subtle'\n    const colors = COLOR_MAP[variantKey]?.[color] ?? COLOR_MAP.subtle.neutral\n    const radius = shape === 'circle' ? '9999px' : '4px'\n\n    // 決定內容\n    const showImage = src && !imgError\n    const showIcon = !showImage && (Icon || (!alt))\n    const showText = !showImage && !showIcon && alt\n\n    const FallbackIcon = Icon ?? User\n\n    // Status dot 尺寸:avatar 的 28%(Slack / Teams / Discord 世界級平均),\n    // clamp [8, 16] — floor 8 保小 avatar 仍可辨識但不喧賓奪主(10 floor 會讓 24px\n    // avatar 的 dot 占 42% 太大);ceiling 16 防大 avatar dot 過度放大\n    const dotSize = isFill ? 10 : Math.max(8, Math.min(16, Math.round(numSize * 0.28)))\n    // Border ring 在 surface 上分離 dot 與 avatar,dotSize ≥ 12 時升階到 3px 保持視覺比例\n    const dotBorder = dotSize >= 12 ? 3 : 2\n\n    const avatarEl = (\n      <div\n        className={cn(\n          'inline-flex items-center justify-center shrink-0 overflow-hidden select-none',\n          isFill && 'w-full h-full',\n          // 2026-05-13 R3.5 self-dim:Avatar 在 disabled Field wrapper context 內自 dim\n          // (取代 field-wrapper.tsx default/bare/naked disabled blanket opacity-disabled 逃生艙)\n          isDisabledInField && 'opacity-disabled',\n        )}\n        style={{\n          ...(isFill\n            ? { containerType: 'inline-size' as React.CSSProperties['containerType'] }\n            : { width: numSize, height: numSize }),\n          borderRadius: radius,\n          backgroundColor: showImage ? undefined : colors.bg,\n          color: showImage ? undefined : colors.text,\n        }}\n        data-avatar-size={isFill ? 'fill' : numSize}\n        role={!showImage && alt && !hoverCard ? 'img' : undefined}\n        aria-label={!showImage && alt && !hoverCard ? alt : undefined}\n      >\n        {showImage && (\n          <img\n            src={src}\n            alt={alt ?? ''}\n            className=\"w-full h-full object-cover\"\n            onError={() => setImgError(true)}\n          />\n        )}\n        {showIcon && (\n          isFill\n            ? <FallbackIcon className=\"w-[60%] h-[60%]\" aria-hidden />\n            : <FallbackIcon size={iconPx} aria-hidden />\n        )}\n        {showText && (\n          <span\n            className=\"font-medium leading-none\"\n            style={{ fontSize: isFill ? '50cqi' : fontSizePx }}\n            aria-hidden\n          >\n            {getInitial(alt!)}\n          </span>\n        )}\n      </div>\n    )\n\n    const hasOverlay = status || typeof badgeCount === 'number'\n    // Keyboard access canonical(D4 UX audit 2026-04-22 finding):Avatar with `hoverCard`\n    // 需 keyboard 可達 — Radix `HoverCardTrigger asChild` 不自動加 tabIndex,non-focusable\n    // `<div>` 會讓 keyboard-only user 無法 reach ProfileCard popover(WCAG 2.1.1 / 4.1.2 違反)。\n    // 解:當 `hoverCard` 存在時,wrapper `<div>` 變 focusable(`tabIndex=0` + `role=\"button\"` +\n    // `aria-haspopup=\"dialog\"` + focus-visible ring)。若無 hoverCard 則維持純展示 `<div>`。\n    const focusableProps = hoverCard\n      ? {\n          tabIndex: 0,\n          role: 'button' as const,\n          'aria-haspopup': 'dialog' as const,\n          'aria-label': alt ?? 'View profile',\n        }\n      : {}\n    // 2026-05-31:focus ring 圓角跟隨 shape(circle→rounded-full / square→rounded-md,對齊 body 的 `radius` 變數 '9999px'/'4px'),\n    // 原寫死 rounded-full 會讓方形 avatar(實體)配 hoverCard 時出現圓形 ring。hoverCard 為通用行為(任意內容),\n    // 方形 avatar 合法可配(內容非 ProfileCard 而已),故 ring 必跟形狀。\n    const focusableClass = hoverCard\n      ? cn('focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1', shape === 'circle' ? 'rounded-full' : 'rounded-md')\n      : ''\n    const baseEl = !hasOverlay\n      ? <div ref={ref} className={cn('inline-flex shrink-0', focusableClass, className)} style={style} {...focusableProps} {...props}>{avatarEl}</div>\n      : (\n        <div ref={ref} className={cn('relative inline-flex shrink-0', focusableClass, className)} style={style} {...focusableProps} {...props}>\n          {avatarEl}\n          {/* Status dot:bottom-right(presence — 世界級對照 Slack / Teams / Discord),\n              落在 circle avatar 圓周 45° 位置 / square avatar 右下直角;\n              border ring 用 surface 色讓 dot 從 avatar 邊界視覺分離。\n              a11y:`aria-hidden` — presence 資訊整合到 parent avatar 的 aria-label\n              (world-class Slack 做法),避免多 `role=\"status\"` 造成 screen reader 洪水 */}\n          {status && (\n            <span\n              className=\"absolute block rounded-full\"\n              style={{\n                width: dotSize,\n                height: dotSize,\n                bottom: 0,\n                right: 0,\n                backgroundColor: STATUS_DOT_COLOR[status],\n                boxShadow: `0 0 0 ${dotBorder}px var(--surface-raised, var(--canvas))`,\n              }}\n              aria-hidden\n            />\n          )}\n          {/* Count badge:top-right(chat 未讀 / 通知計數 — 世界級對照 iMessage /\n              Slack thread / LINE / WhatsApp)。消費 DS Badge(critical variant),\n              再加 ring 與 avatar 分離 */}\n          {typeof badgeCount === 'number' && badgeCount > 0 && (\n            <Badge\n              variant=\"critical\"\n              count={badgeCount}\n              max={99}\n              className=\"absolute -top-1 -right-1\"\n              style={{\n                boxShadow: `0 0 0 2px var(--surface-raised, var(--canvas))`,\n              }}\n              aria-label={`${badgeCount} unread`}\n            />\n          )}\n        </div>\n      )\n\n    // 2026-05-13 (c) scroll-defer perf(per user 拍 Path (c) + codex Q3 verdict):\n    // DataTable scrolling 期間跳 HoverCard wrapper(Portal + useDocumentTheme observer 是\n    // Roadmap 重渲 hotspot,per codex Layer C 分析)。scroll 結束 → context flips false →\n    // re-render 接回完整 HoverCard tree(ProfileCard 仍可 hover 顯示)。\n    // 對齊 AG Grid `deferRender` for slow React cell components / MUI X DataGrid scroll-defer。\n    if (!hoverCard || isTableScrolling) return baseEl\n\n    return (\n      <HoverCard openDelay={HOVER_DELAY_RICH_MS} closeDelay={HOVER_DELAY_CLOSE_MS}>\n        <HoverCardTrigger asChild>\n          {baseEl}\n        </HoverCardTrigger>\n        {/* HoverCardContent canonical(2026-04-23):\n            - 無 inner padding(consumer ProfileCard 自帶 `px-4 py-3` chrome)\n            - `overflow-hidden` + `rounded-lg` → child(ProfileCard)圓角裁切\n            - **不設 max-height**:ProfileCard 自己消費 `--radix-hover-card-content-available-height`\n              自約束高度 + 內部 ScrollArea 處理捲動\n            - `data-theme={documentTheme}`:ProfileCard 永遠跟隨 **app-level theme**(從 `<html data-theme>`\n              動態讀),不受 trigger subtree theme 污染。範例:Avatar 位於 OverflowIndicator 的 dark\n              tooltip 內,其 Portal 會繼承該 subtree dark theme → ProfileCard 變全黑。顯式設回 app theme\n              確保 ProfileCard 永遠 light-in-light-app / dark-in-dark-app。 */}\n        <HoverCardContent\n          data-theme={documentTheme ?? undefined}\n          className=\"bg-surface-raised rounded-lg border border-border overflow-hidden\"\n          style={{ boxShadow: 'var(--elevation-200)' }}\n        >\n          {hoverCard}\n        </HoverCardContent>\n      </HoverCard>\n    )\n  }\n)\nAvatarInner.displayName = 'AvatarInner'\n\n// ── AvatarData ─────────────────────────────────────────────────────────────\n// 資料型別，讓 consumer 傳資料而非 ReactNode。\n// 接收端內部用 Avatar 元件渲染，統一控制尺寸與 fallback。\n\nexport interface AvatarData {\n  /** 圖片 URL */\n  src?: string\n  /** 替代文字（圖片失敗時取首字作 fallback） */\n  alt: string\n  /** Icon / text fallback 的背景色，預設 neutral */\n  color?: ColorKey\n  /**\n   * Person avatar hover ProfileCard(DS-wide canonical,person avatar 預設必有,見 avatar.spec.md)。\n   * Entity avatar(專案 / 組織 logo)不帶 → consumer 不傳 hoverCard 即豁免。\n   * 所有消費 AvatarData 的 primitive(MenuItem / DropdownMenu / SelectMenu / SelectionItem / ProfileCard)\n   * 需 forward 此 prop 到內部 <Avatar hoverCard={avatar.hoverCard} />。\n   */\n  hoverCard?: React.ReactNode\n}\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 avatarMeta = {\n  component: 'Avatar',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'focus-visible', 'disabled'], // 2026-06-11 R2:本身無自有 hover/active(spec L279;hoverCard 互動屬 HoverCard),\n  tokens: {\n    bg: ['bg-surface-raised'],\n    fg: ['--foreground', '--on-emphasis'],\n    ring: ['ring-ring'],\n  },\n} as const\n\nAvatarInner.displayName = 'Avatar'\nconst Avatar = React.memo(AvatarInner)\n\nexport { Avatar }\n"],"names":[],"mappings":"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"}

package/dist/components/Badge/badge.d.ts

@@ -27,7 +27,7 @@ export type BadgeProps = BadgeDotProps | BadgeCountProps;
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
 export declare const badgeMeta: {
     readonly component: "Badge";
-    readonly family: 3;
+    readonly family: null;
     readonly variants: {
         readonly critical: {
             readonly purpose: "deep-orange 底白字（bg-notification = deep-orange-6）";

package/dist/components/Badge/badge.js

@@ -46,7 +46,8 @@ const Badge = React.forwardRef(
 Badge.displayName = "Badge";
 const badgeMeta = {
   component: "Badge",
-  family: 3,
+  family: null,
+  // self-contained(對齊 spec frontmatter 2026-06-11 修),
   variants: {
     critical: { purpose: "deep-orange 底白字（bg-notification = deep-orange-6）" },
     high: { purpose: "藍底白字（bg-info）" },

package/dist/components/Badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../src/components/Badge/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// ── Badge（notification count indicator）────────────────────────────────────\n// 通知計數指示器，用於未讀數量、待辦計數等。\n//\n// 兩種模式：\n//   count — 16px 高，10px 字，font-medium。個位數正圓，多位數膠囊。\n//   dot   — 6×6px 純色圓點，無文字。\n//\n// 四個層級（由 passive 到 urgent）：\n//   low（預設） — 灰底灰字（neutral-3 + neutral-7），被動計數\n//   medium      — 淺藍底藍字（bg-info-subtle + text-info-text），可延後看\n//   high        — 藍底白字（bg-info），有感影響的待辦\n//   critical    — deep-orange 底白字（bg-notification = --color-deep-orange-6,hue 38;非 categorical red hue 25），立即處理\n//\n// dot 模式只接 critical / high（單一 attention 點,實心可見色）—— 不提供 medium/low dot:\n// dot = 「這裡有東西要看」,淡點不 earn existence(對齊 Material small-badge / Ant status dot /\n// Polaris:dot 是單一 attention/status,非 4 級 severity 刻度;2026-06-05 user 拍板 Option A)。\n// medium/low 仍完整存在於 count/text badge。\n//\n// 規則：count default low, escalate with reason。見 badge.spec.md「選 level 的流程」+「dot 變體」。\n\nconst badgeVariants = cva(\n  // 2026-05-23 Path B revert:icon-as-text / numeric-in-circle 用 leading-none canonical(對齊 Material Avatar `line-height: 1` / Polaris Badge / Carbon Tag 共識)。\n  // 視覺等效驗證:Badge container 顯式 `h-4 (16px)` + `flex items-center` 主導,text 被 items-center 置中,line-height 1.0 vs 1.3 視覺零差別。\n  // user 2026-05-23「或是其實根本不用分?」+「照你建議」path B:統一 leading-none,不分。\n  // 廢除 2026-05-21 F1 fix 的 leading-compact migration(那次 anchor「不影響高度的話就改」core constraint 是高度不變,Path B 同樣滿足且更簡單)。\n  'inline-flex items-center justify-center rounded-full leading-none',\n  {\n    variants: {\n      variant: {\n        critical: 'bg-notification text-on-emphasis',\n        high: 'bg-info text-on-emphasis',\n        medium: 'bg-info-subtle text-info-text',\n        low: 'bg-secondary text-fg-muted',\n      },\n      dot: {\n        true: 'w-1.5 h-1.5',\n        false: 'min-w-4 h-4 px-1 text-[10px] font-medium',\n      },\n    },\n    defaultVariants: {\n      variant: 'low',\n      dot: false,\n    },\n  }\n)\n\ntype BadgeBaseProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>\n\nexport interface BadgeDotProps extends BadgeBaseProps {\n  /** dot 模式：6×6px 純色圓點，無文字 */\n  dot: true\n  /** dot 只接高訊號 attention 色:critical(立即)/ high(有感)。預設 critical。\n   * 不提供 medium/low —— dot = 「這裡有東西要看」,淡點不 earn existence\n   * (對齊 Material/Ant/Polaris:dot 是單一 attention/status,非 severity 刻度)。 */\n  variant?: 'critical' | 'high'\n  count?: never\n  max?: never\n}\n\nexport interface BadgeCountProps extends BadgeBaseProps {\n  dot?: false\n  /** 四級 severity（low→critical),見 badge.spec.md「選 level 的流程」 */\n  variant?: 'critical' | 'high' | 'medium' | 'low'\n  /** 顯示的數量 */\n  count?: number\n  /** 數量上限，超過時顯示 \"max+\"（例：max=99 → \"99+\"） */\n  max?: number\n}\n\nexport type BadgeProps = BadgeDotProps | BadgeCountProps\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ variant, dot = false, count, max, className, role, ...props }, ref) => {\n    // dot 預設 attention 色 = critical(非 cva 的 count default 'low');count 沿用 cva default 'low'。\n    const effectiveVariant = variant ?? (dot ? 'critical' : 'low')\n    const display = dot ? null : (\n      max != null && count != null && count > max ? `${max}+` : `${count}`\n    )\n\n    // a11y(2026-04-25 axe aria-prohibited-attr fix):\n    // span default 無 role → 不接 aria-label(WCAG 禁止)。Badge 是通知指示器,\n    // `role=\"status\"` 語意正確(live region 可播報計數變化)且允許 aria-label。\n    // Consumer 可 override(傳 role=\"img\" / role={undefined})。\n    return (\n      <span\n        ref={ref}\n        role={role ?? 'status'}\n        className={cn(badgeVariants({ variant: effectiveVariant, dot }), className)}\n        {...props}\n      >\n        {display}\n      </span>\n    )\n  }\n)\nBadge.displayName = 'Badge'\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 badgeMeta = {\n  component: 'Badge',\n  family: 3,\n  variants: {\n    critical: { purpose: 'deep-orange 底白字（bg-notification = deep-orange-6）' },\n    high: { purpose: '藍底白字（bg-info）' },\n    medium: { purpose: '淺藍底藍字（bg-info-subtle）' },\n    low: { purpose: '使用者切 tab 才看，不需搶注意力' },\n  },\n  sizes: {\n\n  },\n  states: ['default'],\n  tokens: {\n    bg: ['bg-info', 'bg-info-subtle', 'bg-notification', 'bg-secondary'],\n    fg: ['text-fg-muted', 'text-info-text', 'text-on-emphasis'],\n    ring: [],\n  },\n  defaultVariant: 'low',\n} as const\n\nexport { Badge, badgeVariants }\n"],"names":[],"mappings":";;;;AAwBA,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,UAAU;AAAA,QACV,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,KAAK;AAAA,MAAA;AAAA,MAEP,KAAK;AAAA,QACH,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AA2BA,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,SAAS,MAAM,OAAO,OAAO,KAAK,WAAW,MAAM,GAAG,MAAA,GAAS,QAAQ;AAExE,UAAM,mBAAmB,YAAY,MAAM,aAAa;AACxD,UAAM,UAAU,MAAM,OACpB,OAAO,QAAQ,SAAS,QAAQ,QAAQ,MAAM,GAAG,GAAG,MAAM,GAAG,KAAK;AAOpE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,QAAQ;AAAA,QACd,WAAW,GAAG,cAAc,EAAE,SAAS,kBAAkB,IAAA,CAAK,GAAG,SAAS;AAAA,QACzE,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,MAAM,cAAc;AAIb,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,UAAU,EAAE,SAAS,mDAAA;AAAA,IACrB,MAAM,EAAE,SAAS,gBAAA;AAAA,IACjB,QAAQ,EAAE,SAAS,wBAAA;AAAA,IACnB,KAAK,EAAE,SAAS,qBAAA;AAAA,EAAqB;AAAA,EAEvC,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAC,WAAW,kBAAkB,mBAAmB,cAAc;AAAA,IACnE,IAAI,CAAC,iBAAiB,kBAAkB,kBAAkB;AAAA,IAC1D,MAAM,CAAA;AAAA,EAAC;AAAA,EAET,gBAAgB;AAClB;"}
+{"version":3,"file":"badge.js","sources":["../../../src/components/Badge/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// ── Badge（notification count indicator）────────────────────────────────────\n// 通知計數指示器，用於未讀數量、待辦計數等。\n//\n// 兩種模式：\n//   count — 16px 高，10px 字，font-medium。個位數正圓，多位數膠囊。\n//   dot   — 6×6px 純色圓點，無文字。\n//\n// 四個層級（由 passive 到 urgent）：\n//   low（預設） — 灰底灰字（neutral-3 + neutral-7），被動計數\n//   medium      — 淺藍底藍字（bg-info-subtle + text-info-text），可延後看\n//   high        — 藍底白字（bg-info），有感影響的待辦\n//   critical    — deep-orange 底白字（bg-notification = --color-deep-orange-6,hue 38;非 categorical red hue 25），立即處理\n//\n// dot 模式只接 critical / high（單一 attention 點,實心可見色）—— 不提供 medium/low dot:\n// dot = 「這裡有東西要看」,淡點不 earn existence(對齊 Material small-badge / Ant status dot /\n// Polaris:dot 是單一 attention/status,非 4 級 severity 刻度;2026-06-05 user 拍板 Option A)。\n// medium/low 仍完整存在於 count/text badge。\n//\n// 規則：count default low, escalate with reason。見 badge.spec.md「選 level 的流程」+「dot 變體」。\n\nconst badgeVariants = cva(\n  // 2026-05-23 Path B revert:icon-as-text / numeric-in-circle 用 leading-none canonical(對齊 Material Avatar `line-height: 1` / Polaris Badge / Carbon Tag 共識)。\n  // 視覺等效驗證:Badge container 顯式 `h-4 (16px)` + `flex items-center` 主導,text 被 items-center 置中,line-height 1.0 vs 1.3 視覺零差別。\n  // user 2026-05-23「或是其實根本不用分?」+「照你建議」path B:統一 leading-none,不分。\n  // 廢除 2026-05-21 F1 fix 的 leading-compact migration(那次 anchor「不影響高度的話就改」core constraint 是高度不變,Path B 同樣滿足且更簡單)。\n  'inline-flex items-center justify-center rounded-full leading-none',\n  {\n    variants: {\n      variant: {\n        critical: 'bg-notification text-on-emphasis',\n        high: 'bg-info text-on-emphasis',\n        medium: 'bg-info-subtle text-info-text',\n        low: 'bg-secondary text-fg-muted',\n      },\n      dot: {\n        true: 'w-1.5 h-1.5',\n        false: 'min-w-4 h-4 px-1 text-[10px] font-medium',\n      },\n    },\n    defaultVariants: {\n      variant: 'low',\n      dot: false,\n    },\n  }\n)\n\ntype BadgeBaseProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>\n\nexport interface BadgeDotProps extends BadgeBaseProps {\n  /** dot 模式：6×6px 純色圓點，無文字 */\n  dot: true\n  /** dot 只接高訊號 attention 色:critical(立即)/ high(有感)。預設 critical。\n   * 不提供 medium/low —— dot = 「這裡有東西要看」,淡點不 earn existence\n   * (對齊 Material/Ant/Polaris:dot 是單一 attention/status,非 severity 刻度)。 */\n  variant?: 'critical' | 'high'\n  count?: never\n  max?: never\n}\n\nexport interface BadgeCountProps extends BadgeBaseProps {\n  dot?: false\n  /** 四級 severity（low→critical),見 badge.spec.md「選 level 的流程」 */\n  variant?: 'critical' | 'high' | 'medium' | 'low'\n  /** 顯示的數量 */\n  count?: number\n  /** 數量上限，超過時顯示 \"max+\"（例：max=99 → \"99+\"） */\n  max?: number\n}\n\nexport type BadgeProps = BadgeDotProps | BadgeCountProps\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ variant, dot = false, count, max, className, role, ...props }, ref) => {\n    // dot 預設 attention 色 = critical(非 cva 的 count default 'low');count 沿用 cva default 'low'。\n    const effectiveVariant = variant ?? (dot ? 'critical' : 'low')\n    const display = dot ? null : (\n      max != null && count != null && count > max ? `${max}+` : `${count}`\n    )\n\n    // a11y(2026-04-25 axe aria-prohibited-attr fix):\n    // span default 無 role → 不接 aria-label(WCAG 禁止)。Badge 是通知指示器,\n    // `role=\"status\"` 語意正確(live region 可播報計數變化)且允許 aria-label。\n    // Consumer 可 override(傳 role=\"img\" / role={undefined})。\n    return (\n      <span\n        ref={ref}\n        role={role ?? 'status'}\n        className={cn(badgeVariants({ variant: effectiveVariant, dot }), className)}\n        {...props}\n      >\n        {display}\n      </span>\n    )\n  }\n)\nBadge.displayName = 'Badge'\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 badgeMeta = {\n  component: 'Badge',\n  family: null, // self-contained(對齊 spec frontmatter 2026-06-11 修),\n  variants: {\n    critical: { purpose: 'deep-orange 底白字（bg-notification = deep-orange-6）' },\n    high: { purpose: '藍底白字（bg-info）' },\n    medium: { purpose: '淺藍底藍字（bg-info-subtle）' },\n    low: { purpose: '使用者切 tab 才看，不需搶注意力' },\n  },\n  sizes: {\n\n  },\n  states: ['default'],\n  tokens: {\n    bg: ['bg-info', 'bg-info-subtle', 'bg-notification', 'bg-secondary'],\n    fg: ['text-fg-muted', 'text-info-text', 'text-on-emphasis'],\n    ring: [],\n  },\n  defaultVariant: 'low',\n} as const\n\nexport { Badge, badgeVariants }\n"],"names":[],"mappings":";;;;AAwBA,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,UAAU;AAAA,QACV,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,KAAK;AAAA,MAAA;AAAA,MAEP,KAAK;AAAA,QACH,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AA2BA,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,SAAS,MAAM,OAAO,OAAO,KAAK,WAAW,MAAM,GAAG,MAAA,GAAS,QAAQ;AAExE,UAAM,mBAAmB,YAAY,MAAM,aAAa;AACxD,UAAM,UAAU,MAAM,OACpB,OAAO,QAAQ,SAAS,QAAQ,QAAQ,MAAM,GAAG,GAAG,MAAM,GAAG,KAAK;AAOpE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,QAAQ;AAAA,QACd,WAAW,GAAG,cAAc,EAAE,SAAS,kBAAkB,IAAA,CAAK,GAAG,SAAS;AAAA,QACzE,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,MAAM,cAAc;AAIb,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU;AAAA,IACR,UAAU,EAAE,SAAS,mDAAA;AAAA,IACrB,MAAM,EAAE,SAAS,gBAAA;AAAA,IACjB,QAAQ,EAAE,SAAS,wBAAA;AAAA,IACnB,KAAK,EAAE,SAAS,qBAAA;AAAA,EAAqB;AAAA,EAEvC,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAC,WAAW,kBAAkB,mBAAmB,cAAc;AAAA,IACnE,IAAI,CAAC,iBAAiB,kBAAkB,kBAAkB;AAAA,IAC1D,MAAM,CAAA;AAAA,EAAC;AAAA,EAET,gBAAgB;AAClB;"}

package/dist/components/Breadcrumb/breadcrumb.d.ts

@@ -28,7 +28,7 @@ import { ItemInlineActionButton } from '../../patterns/element-anatomy/item-anat
  * ── 視覺 ──
  *   Link (預設): text-fg-secondary
  *   Link hover:  text-primary-hover (canonical「互動高亮」, 跟 Tabs / Chip 用法一致)
- *   Page (當前): text-foreground + font-medium
+ *   Page (當前): text-foreground(不加粗 — 加粗會讓 breadcrumb 最右端視覺過重,見 spec)
  *   Separator:  ChevronRight (size 跟 list 一致), text-fg-muted
  *
  * ── 詳見 breadcrumb.spec.md ──