@qijenchen/design-system 0.1.0-beta.101 → 0.1.0-beta.103

package/dist/components/Accordion/accordion.js

@@ -37,7 +37,7 @@ const AccordionTrigger = React.forwardRef(({ className, children, ...props }, re
         ChevronDown,
         {
           size: 16,
-          className: "shrink-0 text-fg-muted transition-transform duration-200",
+          className: "shrink-0 text-fg-muted transition-transform duration-200 motion-reduce:duration-0",
           "aria-hidden": true
         }
       )
@@ -51,7 +51,7 @@ const AccordionContent = React.forwardRef(({ className, children, ...props }, re
     ref,
     className: cn(
       "overflow-hidden text-body text-fg-secondary",
-      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down motion-reduce:animate-none"
     ),
     ...props,
     children: /* @__PURE__ */ jsx("div", { className: cn("pb-4", className), children })

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

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

@@ -64,13 +64,20 @@ export interface AccountMenuProps {
     align?: 'start' | 'center' | 'end';
     /** Trigger aria-label(i18n override,對齊 Avatar `badgeAriaLabel` pattern)。預設「帳號與設定」 */
     triggerAriaLabel?: string;
+    /** 受控展開狀態(Radix passthrough) */
+    open?: boolean;
     /** 預設展開(uncontrolled,Radix passthrough)。Storybook OpenSnapshot(M15 visual-audit coverable)用 */
     defaultOpen?: boolean;
+    /** 展開狀態變更 callback(Radix passthrough) */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Trigger button 的非視覺 DOM attributes / event handlers。
+     * `children`、`type`、`aria-label`、`className`、`disabled` 由 AccountMenu canonical contract
+     * 擁有；分析與測試所需的 `data-*`、`aria-*`、事件可由此傳入。
+     */
+    triggerProps?: Omit<React.ComponentPropsWithoutRef<'button'>, 'children' | 'type' | 'aria-label' | 'className' | 'disabled'>;
 }
-export declare function AccountMenu({ user, onViewProfile, onOpenSettings, onSignOut, children, align, triggerAriaLabel, defaultOpen, }: AccountMenuProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace AccountMenu {
-    var displayName: string;
-}
+export declare const AccountMenu: React.ForwardRefExoticComponent<AccountMenuProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const accountMenuMeta: {
     readonly component: "AccountMenu";
     readonly family: null;

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

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

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

@@ -1,46 +1,54 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import * as React from "react";
 import { User, Settings, LogOut } from "lucide-react";
 import { Avatar } from "../Avatar/avatar.js";
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem } from "../DropdownMenu/dropdown-menu.js";
-function AccountMenu({
-  user,
-  onViewProfile,
-  onOpenSettings,
-  onSignOut,
-  children,
-  align = "end",
-  triggerAriaLabel = "帳號與設定",
-  defaultOpen
-}) {
-  if (process.env.NODE_ENV !== "production" && !children && !onViewProfile && !onOpenSettings && !onSignOut) {
-    console.warn(
-      "[DS AccountMenu] default 選單項未接 onViewProfile/onOpenSettings/onSignOut——item 點擊無反應。請傳入 callback 或自組 children。"
-    );
+const AccountMenu = React.forwardRef(
+  ({
+    user,
+    onViewProfile,
+    onOpenSettings,
+    onSignOut,
+    children,
+    align = "end",
+    triggerAriaLabel = "帳號與設定",
+    open,
+    defaultOpen,
+    onOpenChange,
+    triggerProps
+  }, ref) => {
+    if (process.env.NODE_ENV !== "production" && !children && !onViewProfile && !onOpenSettings && !onSignOut) {
+      console.warn(
+        "[DS AccountMenu] default 選單項未接 onViewProfile/onOpenSettings/onSignOut——item 點擊無反應。請傳入 callback 或自組 children。"
+      );
+    }
+    const avatar = user.avatar ?? {};
+    return /* @__PURE__ */ jsxs(DropdownMenu, { open, defaultOpen, onOpenChange, children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          ...triggerProps,
+          ref,
+          type: "button",
+          "aria-label": triggerAriaLabel,
+          className: "flex items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+          children: /* @__PURE__ */ jsx(Avatar, { size: 24, ...avatar, alt: avatar.alt ?? user.name })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { align, children: children ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuLabel, { children: user.name }) }),
+        children
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { children: user.name }),
+          /* @__PURE__ */ jsx(DropdownMenuItem, { startIcon: User, onSelect: onViewProfile, children: "個人資料" }),
+          /* @__PURE__ */ jsx(DropdownMenuItem, { startIcon: Settings, onSelect: onOpenSettings, children: "設定" })
+        ] }),
+        /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuItem, { startIcon: LogOut, onSelect: onSignOut, children: "登出" }) })
+      ] }) })
+    ] });
   }
-  const avatar = user.avatar ?? {};
-  return /* @__PURE__ */ jsxs(DropdownMenu, { defaultOpen, children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": triggerAriaLabel,
-        className: "flex items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-        children: /* @__PURE__ */ jsx(Avatar, { size: 24, ...avatar, alt: avatar.alt ?? user.name })
-      }
-    ) }),
-    /* @__PURE__ */ jsx(DropdownMenuContent, { align, children: children ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuLabel, { children: user.name }) }),
-      children
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
-        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: user.name }),
-        /* @__PURE__ */ jsx(DropdownMenuItem, { startIcon: User, onSelect: onViewProfile, children: "個人資料" }),
-        /* @__PURE__ */ jsx(DropdownMenuItem, { startIcon: Settings, onSelect: onOpenSettings, children: "設定" })
-      ] }),
-      /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuItem, { startIcon: LogOut, onSelect: onSignOut, children: "登出" }) })
-    ] }) })
-  ] });
-}
+);
 AccountMenu.displayName = "AccountMenu";
 const accountMenuMeta = {
   component: "AccountMenu",

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

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

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

@@ -72,5 +72,20 @@ declare const AppShell: React.ForwardRefExoticComponent<AppShellProps & React.Re
  *   - title 強制(aria-labelledby per sheet.spec.md:98)
  */
 declare const AppShellAside: React.ForwardRefExoticComponent<AppShellAsideProps & React.RefAttributes<HTMLElement>>;
+export declare const appShellMeta: {
+    readonly component: "AppShell";
+    readonly family: "composite";
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly [];
+    readonly tokens: {
+        readonly bg: readonly ["bg-canvas", "bg-surface"];
+        readonly fg: readonly ["text-foreground"];
+        readonly border: readonly ["border-divider"];
+        readonly ring: readonly ["ring-primary"];
+    };
+    readonly defaultVariant: undefined;
+    readonly defaultSize: undefined;
+};
 export { AppShell, AppShellAside, useAppShell };
 //# sourceMappingURL=app-shell.d.ts.map

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;AAgB9B,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,qFAAqF;IACrF,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;AAiED,QAAA,MAAM,QAAQ,sFAiIb,CAAA;AAKD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,aAAa,wFA6FlB,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;AAgB9B,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,qFAAqF;IACrF,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;AAiED,QAAA,MAAM,QAAQ,sFAiIb,CAAA;AAKD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,aAAa,wFA6FlB,CAAA;AAQD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;CAcf,CAAA;AAKV,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,CAAA"}

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

@@ -227,9 +227,25 @@ const AppShellAside = React.forwardRef(
   }
 );
 AppShellAside.displayName = "AppShellAside";
+const appShellMeta = {
+  component: "AppShell",
+  family: "composite",
+  variants: {},
+  sizes: {},
+  states: [],
+  tokens: {
+    bg: ["bg-canvas", "bg-surface"],
+    fg: ["text-foreground"],
+    border: ["border-divider"],
+    ring: ["ring-primary"]
+  },
+  defaultVariant: void 0,
+  defaultSize: void 0
+};
 export {
   AppShell,
   AppShellAside,
+  appShellMeta,
   useAppShell
 };
 //# sourceMappingURL=app-shell.js.map

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 邊界:本 composite component 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:`components/AppShell/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  handleSheetOpenAutoFocus,\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 紀律;型別 optional 不機械強制,對齊 spec「應」措辭)*/\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    <nav aria-label=\"Skip links\">\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    </nav>\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 右側(AppShell 恆 render {aside};AppShellAside 於 !asideOpen 自行 return null — 內部自決,非 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    // R1:mobile Sheet 關閉後焦點還原目標(open 時 snapshot)\n    const asideOpenerRef = React.useRef<HTMLElement | null>(null)\n\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    // 2026-07-14 dim-9 修:同步轉交 forwarded ref + 合併 consumer className —— 原 mobile 分支\n    // 兩者皆遺失,同一 API(ref / className)隨 breakpoint 靜默失效(desktop 有效、mobile 無效)。\n    if (isMobile) {\n      return (\n        <Sheet open={asideOpen} onOpenChange={setAsideOpen}>\n          <SheetContent\n            ref={ref as React.Ref<HTMLDivElement>}\n            side=\"right\"\n            // R1 WCAG 2.4.3(2026-07-14,Claude+codex A′ 共識):controlled Sheet 無 SheetTrigger →\n            // Radix onCloseAutoFocus triggerRef=null + preventDefault 吃掉 fallback → 焦點掉 <body>。\n            // 解:開啟時 snapshot opener(事件 dispatch 時 Radix 尚未移焦;MUI/React Aria/Ant snapshot\n            // 共識 + DatePicker Range 先例 date-picker.tsx:1061),關閉手動還原;opener 已 unmount →\n            // fallback skip-link main(#app-shell-main tabIndex=-1)。\n            onOpenAutoFocus={(e) => {\n              asideOpenerRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null\n              handleSheetOpenAutoFocus(e) // 接力 DS 預設 body-focus(自訂 handler 覆寫預設,故顯式呼叫)\n            }}\n            onCloseAutoFocus={(e) => {\n              e.preventDefault()\n              const opener = asideOpenerRef.current\n              asideOpenerRef.current = null\n              if (opener?.isConnected) { opener.focus({ preventScroll: true }); return }\n              document.getElementById('app-shell-main')?.focus({ preventScroll: true })\n            }}\n            className={cn(\n              'w-[min(90vw,var(--app-shell-aside-modal-width))] flex flex-col p-0 [&>button]:hidden',\n              className\n            )}\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":";;;;;;;;;AA8EA,MAAM,kBAAkB,MAAM,cAA2C,IAAI;AAE7E,SAAS,cAAoC;AAC3C,QAAM,MAAM,MAAM,WAAW,eAAe;AAC5C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,8CAA8C;AACxE,SAAO;AACT;AAMA,MAAM,mBAAmB;AAEzB,SAAS,UAAmB;AAC1B,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAkB,MAAM;AACpD,QAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,WAAO,OAAO,WAAW,eAAe,gBAAgB,KAAK,EAAE;AAAA,EACjE,CAAC;AAED,QAAM,UAAU,MAAM;AACpB,UAAM,KAAK,OAAO,WAAW,eAAe,gBAAgB,KAAK;AACjE,UAAM,UAAU,CAAC,MAA2B,QAAQ,EAAE,OAAO;AAC7D,OAAG,iBAAiB,UAAU,OAAO;AACrC,WAAO,MAAM,GAAG,oBAAoB,UAAU,OAAO;AAAA,EACvD,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;AAIA,MAAM,kBAAkB;AACxB,MAAM,kBAAkB;AACxB,MAAM,sBAAsB;AAE5B,SAAS,kBAAkB,OAAoC,MAAuB;AACpF,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,KAAK,IAAI,iBAAiB,KAAK,IAAI,iBAAiB,KAAK,CAAC;AAAA,EACnE;AACA,MAAI,SAAS,OAAO,UAAU,UAAU;AAEtC,UAAM,KAAK,OAAO,MAAM,MAAM,MAAM,KAAK,MAAM,OAAO;AACtD,WAAO,KAAK,IAAI,iBAAiB,KAAK,IAAI,iBAAiB,CAAC,CAAC;AAAA,EAC/D;AACA,SAAO;AACT;AAIA,SAAS,aAAa;AACpB,SACE,oBAAC,OAAA,EAAI,cAAW,cACd,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA,GAGH;AAEJ;AAIA,MAAM,WAAW,MAAM;AAAA,EACrB,CACE;AAAA,IACE,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,CAAC,mBAAmB,oBAAoB,IAAI,MAAM,SAAS,KAAK;AACtE,UAAM,eAAe,kBAAkB;AACvC,UAAM,YAAY,eAAe,gBAAgB;AAEjD,UAAM,eAAe,MAAM;AAAA,MACzB,CAAC,SAAkB;AACjB,YAAI,CAAC,aAAc,sBAAqB,IAAI;AAC5C,+DAAoB;AAAA,MACtB;AAAA,MACA,CAAC,cAAc,iBAAiB;AAAA,IAAA;AAGlC,UAAM,WAAW,oBAAA;AAIjB,UAAM,UAAU,MAAM;AACpB,YAAM,QAAQ,CAAC,MAAqB;AAClC,YAAI,EAAE,QAAQ,QAAQ,EAAE,WAAW,EAAE,UAAU;AAC7C,YAAE,eAAA;AACF,uBAAa,CAAC,SAAS;AAAA,QACzB;AAAA,MACF;AACA,aAAO,iBAAiB,WAAW,KAAK;AACxC,aAAO,MAAM,OAAO,oBAAoB,WAAW,KAAK;AAAA,IAC1D,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,UAAM,WAAW,MAAM;AAAA,MACrB,OAAO,EAAE,QAAQ,WAAW,cAAc,SAAA;AAAA,MAC1C,CAAC,QAAQ,WAAW,cAAc,QAAQ;AAAA,IAAA;AAa5C,QAAI,WAAW,kBAAkB;AAM/B,aACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,UAC/B,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,wDAAwD,SAAS;AAAA,UAC9E,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAA,oBAAC,YAAA,EAAW;AAAA,YAEX,gBAAgB,oBAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,cAAa;AAAA,YAE9D,qBAAC,OAAA,EAAI,WAAU,8BACZ,UAAA;AAAA,cAAA;AAAA,cAED,qBAAC,OAAA,EAAI,WAAU,wDACZ,UAAA;AAAA,gBAAA,UAAU,oBAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,QAAO;AAAA,gBAClD;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAG;AAAA,oBACH,UAAU;AAAA,oBACV,WAAU;AAAA,oBAET;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACH,GACF;AAAA,cACC;AAAA,YAAA,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,IAEJ;AAGA,WACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,UAC/B,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,+CAA+C,SAAS;AAAA,QACrE,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,YAAA,EAAW;AAAA,UAEX;AAAA,UAED,qBAAC,OAAA,EAAI,WAAU,wDACZ,UAAA;AAAA,YAAA;AAAA;AAAA;AAAA;AAAA,YAKC,oBAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,QAAO;AAAA,YAEzC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAG;AAAA,gBACH,UAAU;AAAA,gBACV,WAAU;AAAA,gBAET;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,GACF;AAAA,UAEC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;AAiBvB,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CAAC,EAAE,OAAO,OAAO,UAAU,UAAA,GAAa,QAAQ;AAC9C,UAAM,EAAE,WAAW,cAAc,SAAA,IAAa,YAAA;AAC9C,UAAM,OAAO,QAAA;AACb,UAAM,gBAAgB,kBAAkB,OAAO,IAAI;AAanD,UAAM,iBAAiB,MAAM,OAA2B,IAAI;AAE5D,UAAM,cAAc,CAAC,cACnB,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA,qBAAC,cAAA,EACE,UAAA;AAAA,QAAA;AAAA,QACD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,UAAQ;AAAA,YACR,SAAO;AAAA,YACP,MAAK;AAAA,YACL,WAAWA;AAAAA,YACX,cAAW;AAAA,YACX,SAAS,MAAM,aAAa,KAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACnC,GACF;AAAA,MACA,oBAAC,YAAA,EAAW,WAAU,kBACnB,SAAA,CACH;AAAA,IAAA,GACF;AAMF,QAAI,UAAU;AACZ,aACE,oBAAC,OAAA,EAAM,MAAM,WAAW,cAAc,cACpC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA,UAML,iBAAiB,CAAC,MAAM;AACtB,2BAAe,UAAU,SAAS,yBAAyB,cAAc,SAAS,gBAAgB;AAClG,qCAAyB,CAAC;AAAA,UAC5B;AAAA,UACA,kBAAkB,CAAC,MAAM;;AACvB,cAAE,eAAA;AACF,kBAAM,SAAS,eAAe;AAC9B,2BAAe,UAAU;AACzB,gBAAI,iCAAQ,aAAa;AAAE,qBAAO,MAAM,EAAE,eAAe,KAAA,CAAM;AAAG;AAAA,YAAO;AACzE,2BAAS,eAAe,gBAAgB,MAAxC,mBAA2C,MAAM,EAAE,eAAe;UACpE;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,OAAO,EAAE,CAAC,+BAAyC,GAAG,GAAG,aAAa,KAAA;AAAA,UAErE,sBAAY,oBAAC,YAAA,EAAW,WAAU,UAAU,iBAAM,CAAa;AAAA,QAAA;AAAA,MAAA,GAEpE;AAAA,IAEJ;AAGA,QAAI,CAAC,UAAW,QAAO;AAEvB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,OAAO,cAAA;AAAA,QAEf,sBAAY,oBAAC,MAAA,EAAG,WAAU,4CAA4C,iBAAM,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGxF;AACF;AACA,cAAc,cAAc;"}
+{"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 邊界:本 composite component 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:`components/AppShell/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  handleSheetOpenAutoFocus,\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 紀律;型別 optional 不機械強制,對齊 spec「應」措辭)*/\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    <nav aria-label=\"Skip links\">\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    </nav>\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 右側(AppShell 恆 render {aside};AppShellAside 於 !asideOpen 自行 return null — 內部自決,非 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    // R1:mobile Sheet 關閉後焦點還原目標(open 時 snapshot)\n    const asideOpenerRef = React.useRef<HTMLElement | null>(null)\n\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    // 2026-07-14 dim-9 修:同步轉交 forwarded ref + 合併 consumer className —— 原 mobile 分支\n    // 兩者皆遺失,同一 API(ref / className)隨 breakpoint 靜默失效(desktop 有效、mobile 無效)。\n    if (isMobile) {\n      return (\n        <Sheet open={asideOpen} onOpenChange={setAsideOpen}>\n          <SheetContent\n            ref={ref as React.Ref<HTMLDivElement>}\n            side=\"right\"\n            // R1 WCAG 2.4.3(2026-07-14,Claude+codex A′ 共識):controlled Sheet 無 SheetTrigger →\n            // Radix onCloseAutoFocus triggerRef=null + preventDefault 吃掉 fallback → 焦點掉 <body>。\n            // 解:開啟時 snapshot opener(事件 dispatch 時 Radix 尚未移焦;MUI/React Aria/Ant snapshot\n            // 共識 + DatePicker Range 先例 date-picker.tsx:1061),關閉手動還原;opener 已 unmount →\n            // fallback skip-link main(#app-shell-main tabIndex=-1)。\n            onOpenAutoFocus={(e) => {\n              asideOpenerRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null\n              handleSheetOpenAutoFocus(e) // 接力 DS 預設 body-focus(自訂 handler 覆寫預設,故顯式呼叫)\n            }}\n            onCloseAutoFocus={(e) => {\n              e.preventDefault()\n              const opener = asideOpenerRef.current\n              asideOpenerRef.current = null\n              if (opener?.isConnected) { opener.focus({ preventScroll: true }); return }\n              document.getElementById('app-shell-main')?.focus({ preventScroll: true })\n            }}\n            className={cn(\n              'w-[min(90vw,var(--app-shell-aside-modal-width))] flex flex-col p-0 [&>button]:hidden',\n              className\n            )}\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// Story auto-compile metadata — canonical migration(2026-08-01)\n// AppShell is a page-level composition primitive. `layout` is a structural mode,\n// not a visual variant axis; slot controls own their interaction states and sizes.\nexport const appShellMeta = {\n  component: 'AppShell',\n  family: 'composite',\n  variants: {},\n  sizes: {},\n  states: [],\n  tokens: {\n    bg: ['bg-canvas', 'bg-surface'],\n    fg: ['text-foreground'],\n    border: ['border-divider'],\n    ring: ['ring-primary'],\n  },\n  defaultVariant: undefined,\n  defaultSize: undefined,\n} as const\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/AppShell/index.js

@@ -1,7 +1,8 @@
-import { AppShell, AppShellAside, useAppShell } from "./app-shell.js";
+import { AppShell, AppShellAside, appShellMeta, useAppShell } from "./app-shell.js";
 export {
   AppShell,
   AppShellAside,
+  appShellMeta,
   useAppShell
 };
 //# sourceMappingURL=index.js.map

package/dist/components/BulkActionBar/bulk-action-bar.d.ts

@@ -14,7 +14,7 @@ export interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement>
     selection: readonly string[];
     /** Clear 觸發,user 點 X icon 或 Esc(consumer 在 page-level 監聽) */
     onClearSelection?: () => void;
-    /** 批次 actions(consumer 提供 md Button,variant=tertiary 或 tertiary+danger;不用 primary) */
+    /** 批次 actions(consumer 提供 md Button,一律 variant=tertiary；不用 primary/danger) */
     actions?: React.ReactNode;
     /** Filter 模式:hidden 數量,顯示在 count 區 inline「已選 {N} 項 · {M} 個被 filter 隱藏」 */
     hiddenByFilter?: number;

package/dist/components/BulkActionBar/bulk-action-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bulk-action-bar.d.ts","sourceRoot":"","sources":["../../../src/components/BulkActionBar/bulk-action-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAmB9B,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAA;IACxC,8GAA8G;IAC9G,gBAAgB,EAAE,MAAM,CAAA;IACxB,oFAAoF;IACpF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAGD,eAAO,MAAM,8BAA8B,EAAE,mBAK5C,CAAA;AAID,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,wCAAwC;IACxC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAA;IAC5B,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC7B,sFAAsF;IACtF,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,0EAA0E;IAC1E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;CACtC;AAeD,QAAA,MAAM,aAAa,2FAsElB,CAAA;AAID,eAAO,MAAM,iBAAiB;;;;;;;;;;CAUpB,CAAA;AAEV,OAAO,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"bulk-action-bar.d.ts","sourceRoot":"","sources":["../../../src/components/BulkActionBar/bulk-action-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAmB9B,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAA;IACxC,8GAA8G;IAC9G,gBAAgB,EAAE,MAAM,CAAA;IACxB,oFAAoF;IACpF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAGD,eAAO,MAAM,8BAA8B,EAAE,mBAK5C,CAAA;AAID,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,wCAAwC;IACxC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAA;IAC5B,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC7B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,0EAA0E;IAC1E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;CACtC;AAeD,QAAA,MAAM,aAAa,2FAsElB,CAAA;AAID,eAAO,MAAM,iBAAiB;;;;;;;;;;CAUpB,CAAA;AAEV,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/BulkActionBar/bulk-action-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"bulk-action-bar.js","sources":["../../../src/components/BulkActionBar/bulk-action-bar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ButtonDivider } from '@/design-system/components/Button/button-group'\n\n// ── 消費的 SSOT ───────────────────────────────────────────────────────────────\n// - bulk-action-bar.spec.md(本元件 SSOT)\n// - DataTable/data-table.spec.md「L2 選取」(整合方式)\n// - button.spec.md + button-group.tsx(action variant=tertiary,size=md,\n//   gap-2 + ButtonDivider 自帶 mx-1 = 12px 視覺距離)\n// - inline-action.spec.md「same-row consistency rule」(close X 同尺寸 md)\n// - tokens/layoutSpace/layoutSpace.spec.md(footer 用 px-loose py-tight)\n// - patterns/overlay-surface/overlay-surface.spec.md SurfaceFooter canonical\n// - Alert(banner)用 title ReactNode 帶 inline link CTA\n\n// ── i18n labels ─────────────────────────────────────────────────────────────\n\n// code-quality-allow: dead-export — public API per spec.md(consumer i18n override hook)\nexport interface BulkActionBarLabels {\n  count: (n: number) => string\n  clear: string\n  hiddenSuffix: (hidden: number) => string\n  /** @deprecated 2026-07-06 role 已降級 \"group\"(user 拍板),改用 `ariaLabel`;此 key 保留 backward-compat(值仍作 fallback)。 */\n  toolbarAriaLabel: string\n  /** root `role=\"group\"` 的 aria-label(2026-07-06 新名;未傳 fallback toolbarAriaLabel)。 */\n  ariaLabel?: string\n}\n\n// code-quality-allow: dead-export — public API per spec.md(consumer spread + override)\nexport const BULK_ACTION_BAR_DEFAULT_LABELS: BulkActionBarLabels = {\n  count: (n) => `已選 ${n} 項`,\n  clear: '清除選取',\n  hiddenSuffix: (hidden) => `· ${hidden} 個被 filter 隱藏`,\n  toolbarAriaLabel: '批次操作',\n}\n\n// ── Props ───────────────────────────────────────────────────────────────────\n\nexport interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** 已選 ID,length === 0 時自動隱藏(回傳 null) */\n  selection: readonly string[]\n  /** Clear 觸發,user 點 X icon 或 Esc(consumer 在 page-level 監聽) */\n  onClearSelection?: () => void\n  /** 批次 actions(consumer 提供 md Button,variant=tertiary 或 tertiary+danger;不用 primary) */\n  actions?: React.ReactNode\n  /** Filter 模式:hidden 數量,顯示在 count 區 inline「已選 {N} 項 · {M} 個被 filter 隱藏」 */\n  hiddenByFilter?: number\n  /**\n   * 「擴選整個 dataset」狀態(2026-05-13 ship,per user 抓 Alert「已選 5370」但 BulkActionBar\n   * 仍顯「已選 50 項」regression):\n   * - undefined / null(default):count 走 `selection.length`(page-level 視覺選取)\n   * - number:count 走此數值(整個 dataset 擴選後 user 已選的真總數)\n   *\n   * Canonical pattern:consumer 把 BulkActionBar 跟「Alert info banner(提示擴選 dataset)」\n   * 一起 mount,Alert 點「點此選取全部 N 個」→ setTotalSelected(N) → BulkActionBar count 同步。\n   * 對齊 Gmail / Linear / Notion 全選 dataset hint pattern。\n   * 詳 `bulk-action-bar.spec.md`「Extend dataset pattern」段。\n   */\n  totalSelected?: number | null\n  /** i18n labels(Partial,merge with default) */\n  labels?: Partial<BulkActionBarLabels>\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n// 視覺結構(同 SurfaceFooter / DataTable toolbar canonical):\n//   px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]\n//   gap-2 between elements\n//   全 md Buttons(same-row consistency)\n//   <ButtonDivider /> 自帶 mx-1 = 12px 視覺距離\n//\n// Hint banner(擴 dataset 提示)完全外包給 Alert 元件 — consumer 視 ref 圖\n// 黏在 BulkActionBar 上方/下方,用 Alert variant=\"info\" placement=\"fixed\"\n// title={inline link JSX}。BulkActionBar 自己不再有 hint banner slot。\n//\n// 浮起 / fixed positioning 由 consumer wrap 決定(BulkActionBar 不限定 placement)。\n\nconst BulkActionBar = React.forwardRef<HTMLDivElement, BulkActionBarProps>(\n  function BulkActionBar(\n    { selection, onClearSelection, actions, hiddenByFilter, totalSelected, labels: labelsOverride, className, ...props },\n    ref\n  ) {\n    const labels: BulkActionBarLabels = React.useMemo(\n      () => ({ ...BULK_ACTION_BAR_DEFAULT_LABELS, ...labelsOverride }),\n      [labelsOverride]\n    )\n\n    // selection.length === 0 自動藏(對齊 spec 禁止事項 #3)。\n    // 反向選取(DataTable all 模式)例外:visible 全被 excluded 但 totalSelected>0 仍有選取 → 顯示(2026-06-22)\n    if (selection.length === 0 && (totalSelected ?? 0) === 0) return null\n\n    return (\n      <div\n        ref={ref}\n        // 2026-07-06 user 拍板:role \"toolbar\" → \"group\" — 原宣告 toolbar 但未實作 APG toolbar\n        // 方向鍵 roving 契約(AT 告知「工具列」但方向鍵無反應 = 空承諾);group 語意誠實,\n        // Tab 序照 DOM(spec 本有 canonical),Gmail / Linear bulk bar 實務同款。\n        role=\"group\"\n        aria-label={labels.ariaLabel ?? labels.toolbarAriaLabel}\n        className={cn(\n          'flex items-center gap-2',\n          'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',\n          // 上分隔線:bottom toolbar canonical(Linear / Apple Mail / Notion 共識)— 視覺從上方內容收尾\n          'border-t border-divider',\n          className\n        )}\n        {...props}\n      >\n        {/* X close — md dismiss(2026-05-04 spec update:default placement = footer variant,\n            visual weight 對齊 Dialog footer commitment buttons md;same-row consistency 維持)\n            未來若有 top-toolbar variant(覆蓋 sm-density toolbar)→ 該 variant override sm */}\n        {onClearSelection && (\n          <Button\n            variant=\"text\"\n            size=\"md\"\n            iconOnly\n            dismiss\n            startIcon={X}\n            aria-label={labels.clear}\n            onClick={onClearSelection}\n          />\n        )}\n\n        {/* count + filter hidden inline\n            color canonical(2026-05-04):count = primary foreground + medium weight\n            理由:count 是 state-bearing 主資訊(「你在 selection mode + N items」),非裝飾\n            World-class 共識:Linear/Notion/Carbon/Polaris 均用 primary foreground;muted 化弱化 state signal\n            hiddenByFilter suffix 維持 muted(這是次資訊,視覺層次正確) */}\n        {/* 2026-05-31 #3:aria-live 通知 SR 選取數變更;#20:補 font-medium 對齊 spec「Count text color canonical」表 + 上方 comment(state-bearing 主資訊) */}\n        <span className=\"text-body text-foreground font-medium tabular-nums\" aria-live=\"polite\" aria-atomic=\"true\">\n          {/* 2026-05-13:totalSelected override 走 dataset 擴選後真總數,否則 fallback page-level selection.length */}\n          {labels.count(typeof totalSelected === 'number' ? totalSelected : selection.length)}\n          {hiddenByFilter !== undefined && hiddenByFilter > 0 && (\n            <span className=\"text-fg-muted font-normal\"> {labels.hiddenSuffix(hiddenByFilter)}</span>\n          )}\n        </span>\n\n        {/* divider */}\n        {actions && <ButtonDivider />}\n\n        {/* batch actions slot(consumer 提供 md Buttons) */}\n        {actions && (\n          <div className=\"flex items-center gap-2 flex-1 min-w-0\">{actions}</div>\n        )}\n      </div>\n    )\n  }\n)\nBulkActionBar.displayName = 'BulkActionBar'\n\n// Story auto-compile metadata\nexport const bulkActionBarMeta = {\n  component: 'BulkActionBar',\n  family: null,\n  variants: {},\n  sizes: {},\n  states: ['default'],\n  tokens: {\n    fg: ['text-foreground', 'text-fg-muted'],\n    border: ['border-divider'],\n  },\n} as const\n\nexport { BulkActionBar }\n"],"names":["BulkActionBar"],"mappings":";;;;;;AA8BO,MAAM,iCAAsD;AAAA,EACjE,OAAO,CAAC,MAAM,MAAM,CAAC;AAAA,EACrB,OAAO;AAAA,EACP,cAAc,CAAC,WAAW,KAAK,MAAM;AAAA,EACrC,kBAAkB;AACpB;AA0CA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,SAASA,eACP,EAAE,WAAW,kBAAkB,SAAS,gBAAgB,eAAe,QAAQ,gBAAgB,WAAW,GAAG,MAAA,GAC7G,KACA;AACA,UAAM,SAA8B,MAAM;AAAA,MACxC,OAAO,EAAE,GAAG,gCAAgC,GAAG;MAC/C,CAAC,cAAc;AAAA,IAAA;AAKjB,QAAI,UAAU,WAAW,MAAM,iBAAiB,OAAO,EAAG,QAAO;AAEjE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QAIA,MAAK;AAAA,QACL,cAAY,OAAO,aAAa,OAAO;AAAA,QACvC,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAKH,UAAA;AAAA,UAAA,oBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,UAAQ;AAAA,cACR,SAAO;AAAA,cACP,WAAW;AAAA,cACX,cAAY,OAAO;AAAA,cACnB,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,+BAUZ,QAAA,EAAK,WAAU,sDAAqD,aAAU,UAAS,eAAY,QAEjG,UAAA;AAAA,YAAA,OAAO,MAAM,OAAO,kBAAkB,WAAW,gBAAgB,UAAU,MAAM;AAAA,YACjF,mBAAmB,UAAa,iBAAiB,KAChD,qBAAC,QAAA,EAAK,WAAU,6BAA4B,UAAA;AAAA,cAAA;AAAA,cAAE,OAAO,aAAa,cAAc;AAAA,YAAA,EAAA,CAAE;AAAA,UAAA,GAEtF;AAAA,UAGC,+BAAY,eAAA,EAAc;AAAA,UAG1B,WACC,oBAAC,OAAA,EAAI,WAAU,0CAA0C,UAAA,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIzE;AACF;AACA,cAAc,cAAc;AAGrB,MAAM,oBAAoB;AAAA,EAC/B,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU,CAAA;AAAA,EACV,OAAO,CAAA;AAAA,EACP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAC,mBAAmB,eAAe;AAAA,IACvC,QAAQ,CAAC,gBAAgB;AAAA,EAAA;AAE7B;"}
+{"version":3,"file":"bulk-action-bar.js","sources":["../../../src/components/BulkActionBar/bulk-action-bar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ButtonDivider } from '@/design-system/components/Button/button-group'\n\n// ── 消費的 SSOT ───────────────────────────────────────────────────────────────\n// - bulk-action-bar.spec.md(本元件 SSOT)\n// - DataTable/data-table.spec.md「L2 選取」(整合方式)\n// - button.spec.md + button-group.tsx(action variant=tertiary,size=md,\n//   gap-2 + ButtonDivider 自帶 mx-1 = 12px 視覺距離)\n// - inline-action.spec.md「same-row consistency rule」(close X 同尺寸 md)\n// - tokens/layoutSpace/layoutSpace.spec.md(footer 用 px-loose py-tight)\n// - patterns/overlay-surface/overlay-surface.spec.md SurfaceFooter canonical\n// - Alert(banner)用 title ReactNode 帶 inline link CTA\n\n// ── i18n labels ─────────────────────────────────────────────────────────────\n\n// code-quality-allow: dead-export — public API per spec.md(consumer i18n override hook)\nexport interface BulkActionBarLabels {\n  count: (n: number) => string\n  clear: string\n  hiddenSuffix: (hidden: number) => string\n  /** @deprecated 2026-07-06 role 已降級 \"group\"(user 拍板),改用 `ariaLabel`;此 key 保留 backward-compat(值仍作 fallback)。 */\n  toolbarAriaLabel: string\n  /** root `role=\"group\"` 的 aria-label(2026-07-06 新名;未傳 fallback toolbarAriaLabel)。 */\n  ariaLabel?: string\n}\n\n// code-quality-allow: dead-export — public API per spec.md(consumer spread + override)\nexport const BULK_ACTION_BAR_DEFAULT_LABELS: BulkActionBarLabels = {\n  count: (n) => `已選 ${n} 項`,\n  clear: '清除選取',\n  hiddenSuffix: (hidden) => `· ${hidden} 個被 filter 隱藏`,\n  toolbarAriaLabel: '批次操作',\n}\n\n// ── Props ───────────────────────────────────────────────────────────────────\n\nexport interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** 已選 ID,length === 0 時自動隱藏(回傳 null) */\n  selection: readonly string[]\n  /** Clear 觸發,user 點 X icon 或 Esc(consumer 在 page-level 監聽) */\n  onClearSelection?: () => void\n  /** 批次 actions(consumer 提供 md Button,一律 variant=tertiary；不用 primary/danger) */\n  actions?: React.ReactNode\n  /** Filter 模式:hidden 數量,顯示在 count 區 inline「已選 {N} 項 · {M} 個被 filter 隱藏」 */\n  hiddenByFilter?: number\n  /**\n   * 「擴選整個 dataset」狀態(2026-05-13 ship,per user 抓 Alert「已選 5370」但 BulkActionBar\n   * 仍顯「已選 50 項」regression):\n   * - undefined / null(default):count 走 `selection.length`(page-level 視覺選取)\n   * - number:count 走此數值(整個 dataset 擴選後 user 已選的真總數)\n   *\n   * Canonical pattern:consumer 把 BulkActionBar 跟「Alert info banner(提示擴選 dataset)」\n   * 一起 mount,Alert 點「點此選取全部 N 個」→ setTotalSelected(N) → BulkActionBar count 同步。\n   * 對齊 Gmail / Linear / Notion 全選 dataset hint pattern。\n   * 詳 `bulk-action-bar.spec.md`「Extend dataset pattern」段。\n   */\n  totalSelected?: number | null\n  /** i18n labels(Partial,merge with default) */\n  labels?: Partial<BulkActionBarLabels>\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n// 視覺結構(同 SurfaceFooter / DataTable toolbar canonical):\n//   px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]\n//   gap-2 between elements\n//   全 md Buttons(same-row consistency)\n//   <ButtonDivider /> 自帶 mx-1 = 12px 視覺距離\n//\n// Hint banner(擴 dataset 提示)完全外包給 Alert 元件 — consumer 視 ref 圖\n// 黏在 BulkActionBar 上方/下方,用 Alert variant=\"info\" placement=\"fixed\"\n// title={inline link JSX}。BulkActionBar 自己不再有 hint banner slot。\n//\n// 浮起 / fixed positioning 由 consumer wrap 決定(BulkActionBar 不限定 placement)。\n\nconst BulkActionBar = React.forwardRef<HTMLDivElement, BulkActionBarProps>(\n  function BulkActionBar(\n    { selection, onClearSelection, actions, hiddenByFilter, totalSelected, labels: labelsOverride, className, ...props },\n    ref\n  ) {\n    const labels: BulkActionBarLabels = React.useMemo(\n      () => ({ ...BULK_ACTION_BAR_DEFAULT_LABELS, ...labelsOverride }),\n      [labelsOverride]\n    )\n\n    // selection.length === 0 自動藏(對齊 spec 禁止事項 #3)。\n    // 反向選取(DataTable all 模式)例外:visible 全被 excluded 但 totalSelected>0 仍有選取 → 顯示(2026-06-22)\n    if (selection.length === 0 && (totalSelected ?? 0) === 0) return null\n\n    return (\n      <div\n        ref={ref}\n        // 2026-07-06 user 拍板:role \"toolbar\" → \"group\" — 原宣告 toolbar 但未實作 APG toolbar\n        // 方向鍵 roving 契約(AT 告知「工具列」但方向鍵無反應 = 空承諾);group 語意誠實,\n        // Tab 序照 DOM(spec 本有 canonical),Gmail / Linear bulk bar 實務同款。\n        role=\"group\"\n        aria-label={labels.ariaLabel ?? labels.toolbarAriaLabel}\n        className={cn(\n          'flex items-center gap-2',\n          'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',\n          // 上分隔線:bottom toolbar canonical(Linear / Apple Mail / Notion 共識)— 視覺從上方內容收尾\n          'border-t border-divider',\n          className\n        )}\n        {...props}\n      >\n        {/* X close — md dismiss(2026-05-04 spec update:default placement = footer variant,\n            visual weight 對齊 Dialog footer commitment buttons md;same-row consistency 維持)\n            未來若有 top-toolbar variant(覆蓋 sm-density toolbar)→ 該 variant override sm */}\n        {onClearSelection && (\n          <Button\n            variant=\"text\"\n            size=\"md\"\n            iconOnly\n            dismiss\n            startIcon={X}\n            aria-label={labels.clear}\n            onClick={onClearSelection}\n          />\n        )}\n\n        {/* count + filter hidden inline\n            color canonical(2026-05-04):count = primary foreground + medium weight\n            理由:count 是 state-bearing 主資訊(「你在 selection mode + N items」),非裝飾\n            World-class 共識:Linear/Notion/Carbon/Polaris 均用 primary foreground;muted 化弱化 state signal\n            hiddenByFilter suffix 維持 muted(這是次資訊,視覺層次正確) */}\n        {/* 2026-05-31 #3:aria-live 通知 SR 選取數變更;#20:補 font-medium 對齊 spec「Count text color canonical」表 + 上方 comment(state-bearing 主資訊) */}\n        <span className=\"text-body text-foreground font-medium tabular-nums\" aria-live=\"polite\" aria-atomic=\"true\">\n          {/* 2026-05-13:totalSelected override 走 dataset 擴選後真總數,否則 fallback page-level selection.length */}\n          {labels.count(typeof totalSelected === 'number' ? totalSelected : selection.length)}\n          {hiddenByFilter !== undefined && hiddenByFilter > 0 && (\n            <span className=\"text-fg-muted font-normal\"> {labels.hiddenSuffix(hiddenByFilter)}</span>\n          )}\n        </span>\n\n        {/* divider */}\n        {actions && <ButtonDivider />}\n\n        {/* batch actions slot(consumer 提供 md Buttons) */}\n        {actions && (\n          <div className=\"flex items-center gap-2 flex-1 min-w-0\">{actions}</div>\n        )}\n      </div>\n    )\n  }\n)\nBulkActionBar.displayName = 'BulkActionBar'\n\n// Story auto-compile metadata\nexport const bulkActionBarMeta = {\n  component: 'BulkActionBar',\n  family: null,\n  variants: {},\n  sizes: {},\n  states: ['default'],\n  tokens: {\n    fg: ['text-foreground', 'text-fg-muted'],\n    border: ['border-divider'],\n  },\n} as const\n\nexport { BulkActionBar }\n"],"names":["BulkActionBar"],"mappings":";;;;;;AA8BO,MAAM,iCAAsD;AAAA,EACjE,OAAO,CAAC,MAAM,MAAM,CAAC;AAAA,EACrB,OAAO;AAAA,EACP,cAAc,CAAC,WAAW,KAAK,MAAM;AAAA,EACrC,kBAAkB;AACpB;AA0CA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,SAASA,eACP,EAAE,WAAW,kBAAkB,SAAS,gBAAgB,eAAe,QAAQ,gBAAgB,WAAW,GAAG,MAAA,GAC7G,KACA;AACA,UAAM,SAA8B,MAAM;AAAA,MACxC,OAAO,EAAE,GAAG,gCAAgC,GAAG;MAC/C,CAAC,cAAc;AAAA,IAAA;AAKjB,QAAI,UAAU,WAAW,MAAM,iBAAiB,OAAO,EAAG,QAAO;AAEjE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QAIA,MAAK;AAAA,QACL,cAAY,OAAO,aAAa,OAAO;AAAA,QACvC,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAKH,UAAA;AAAA,UAAA,oBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,UAAQ;AAAA,cACR,SAAO;AAAA,cACP,WAAW;AAAA,cACX,cAAY,OAAO;AAAA,cACnB,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,+BAUZ,QAAA,EAAK,WAAU,sDAAqD,aAAU,UAAS,eAAY,QAEjG,UAAA;AAAA,YAAA,OAAO,MAAM,OAAO,kBAAkB,WAAW,gBAAgB,UAAU,MAAM;AAAA,YACjF,mBAAmB,UAAa,iBAAiB,KAChD,qBAAC,QAAA,EAAK,WAAU,6BAA4B,UAAA;AAAA,cAAA;AAAA,cAAE,OAAO,aAAa,cAAc;AAAA,YAAA,EAAA,CAAE;AAAA,UAAA,GAEtF;AAAA,UAGC,+BAAY,eAAA,EAAc;AAAA,UAG1B,WACC,oBAAC,OAAA,EAAI,WAAU,0CAA0C,UAAA,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIzE;AACF;AACA,cAAc,cAAc;AAGrB,MAAM,oBAAoB;AAAA,EAC/B,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU,CAAA;AAAA,EACV,OAAO,CAAA;AAAA,EACP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAC,mBAAmB,eAAe;AAAA,IACvC,QAAQ,CAAC,gBAAgB;AAAA,EAAA;AAE7B;"}

package/dist/components/Calendar/calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/calendar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAMrG;;;;;;;;;;;;;;;;GAgBG;AAIH,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,8DAA8D;IAC9D,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,KAAK,CAAC,EAAE,cAAc,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACnC;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC3F,wBAAwB;IACxB,aAAa,CAAC,EAAE,IAAI,CAAA;IACpB,oBAAoB,CAAC,EAAE,IAAI,CAAA;IAC3B,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAC5C;;;;OAIG;IACH,KAAK,CAAC,EAAE,IAAI,CAAA;IAEZ,WAAW;IACX,MAAM,CAAC,EAAE,aAAa,EAAE,CAAA;IAExB,sBAAsB;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC7C,uBAAuB;IACvB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAClC,kBAAkB;IAClB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAE1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IAEpB,uBAAuB;IACvB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,KAAK,CAAC,SAAS,CAAA;IAE3D,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAkFD,QAAA,MAAM,QAAQ,sFAqQZ,CAAA;AAKF,eAAO,MAAM,YAAY;;;;;;;;;;;CAgBf,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/calendar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAMrG;;;;;;;;;;;;;;;;GAgBG;AAIH,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,8DAA8D;IAC9D,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,KAAK,CAAC,EAAE,cAAc,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACnC;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC3F,wBAAwB;IACxB,aAAa,CAAC,EAAE,IAAI,CAAA;IACpB,oBAAoB,CAAC,EAAE,IAAI,CAAA;IAC3B,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAC5C;;;;OAIG;IACH,KAAK,CAAC,EAAE,IAAI,CAAA;IAEZ,WAAW;IACX,MAAM,CAAC,EAAE,aAAa,EAAE,CAAA;IAExB,sBAAsB;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC7C,uBAAuB;IACvB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAClC,kBAAkB;IAClB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAE1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IAEpB,uBAAuB;IACvB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,KAAK,CAAC,SAAS,CAAA;IAE3D,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAkFD,QAAA,MAAM,QAAQ,sFAgRZ,CAAA;AAKF,eAAO,MAAM,YAAY;;;;;;;;;;;CAgBf,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/Calendar/calendar.js

@@ -257,10 +257,21 @@ const Calendar = React.forwardRef(function Calendar2({
                             return /* @__PURE__ */ jsx(
                               "div",
                               {
+                                role: "button",
+                                tabIndex: 0,
+                                "aria-label": `事件:${event.title}`,
                                 onClick: (e) => {
                                   e.stopPropagation();
                                   onEventClick == null ? void 0 : onEventClick(event);
                                 },
+                                onKeyDown: (e) => {
+                                  if (e.key === "Enter" || e.key === " ") {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    onEventClick == null ? void 0 : onEventClick(event);
+                                  }
+                                },
+                                className: "rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                                 children: renderEventTile(event)
                               },
                               event.id