@qijenchen/design-system 0.1.0-beta.13 → 0.1.0-beta.131

package/dist/components/DropdownMenu/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","sources":["../../../src/components/DropdownMenu/dropdown-menu.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport type { AvatarData } from \"@/design-system/components/Avatar/avatar\"\nimport { MenuItem } from \"@/design-system/components/Menu/menu-item\"\nimport { ScrollArea } from \"@/design-system/components/ScrollArea/scroll-area\"\nimport { OVERLAY_SIDE_OFFSET, OVERLAY_COLLISION_PADDING } from \"@/design-system/tokens/elevation/overlay-geometry\"\nimport {\n  RowSizeProvider,\n  useRowSize,\n  ICON_SIZE as ROW_ICON_SIZE,\n  type RowSize,\n} from \"@/design-system/patterns/element-anatomy/item-anatomy\"\n\n/**\n * DropdownMenu — Radix DropdownMenu + MenuItem visual layer\n *\n * 架構分工：\n * - Radix primitives：behavior（keyboard nav, focus management, aria roles）\n * - MenuItem：visual（layout, padding, icon alignment, typography）\n *\n * Radix primitive 是外層容器,控制 `data-[highlighted]:bg-neutral-hover`。\n * MenuItem 內層只負責佈局,不加互動樣式。\n *\n * ── Hover / highlight canonical(2026-04-22 修正)──\n * 用 Radix 官方的 `data-[highlighted]` attribute,**不用 `:focus-visible` / `:hover` /\n * `:focus`**:\n *   - Radix 在 **mouse hover、keyboard arrow nav、focus move in** 時自動 set `data-highlighted`\n *   - mouse leave / focus move out / menu close 時自動清掉\n *   - 不會在 click 後留殘影(Radix 內部已處理)\n *   - 跨瀏覽器一致(不依賴 `:focus-visible` 的 heuristic)\n *\n * 曾經用過 `focus-visible:bg-neutral-hover` 的理由:避免 click 後殘影。但實測:mouse hover\n * 觸發 Radix 程式化 `.focus()`,Chromium / Safari / Firefox 對 programmatic focus 是否 fire\n * `:focus-visible` 行為不一致,導致 mouse hover 有時無 bg。改用 `data-[highlighted]:` 後行為\n * 一致 —— 世界級 canonical(shadcn / Radix docs / Ariakit 皆此)。\n */\n\n// ── Floating layer 共用樣式 ──\nconst floatingLayerClass = [\n  'z-50 overflow-hidden rounded-lg border border-border bg-surface-raised',\n  'data-[state=open]:animate-in data-[state=closed]:animate-out motion-reduce:animate-none',\n  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n  'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n  'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',\n  'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n  'origin-[var(--radix-dropdown-menu-content-transform-origin)]',\n].join(' ')\n\n// ── Size:統一用 RowSizeContext(item-layout module),消除本地 SizeContext 漂移 ──\ntype SizeKey = RowSize\n// Re-export for backward compat(內部命名)\nconst ICON_SIZE = ROW_ICON_SIZE\n\n// ── Shared item classes on Radix primitive ──\n// Highlight(hover + keyboard nav): 用 Radix `data-[highlighted]` canonical(見 docblock)\nconst radixItemClass = [\n  'relative cursor-pointer select-none outline-none',\n  'transition-colors duration-150',\n  'data-[highlighted]:bg-neutral-hover',\n  'data-[disabled]:pointer-events-none data-[disabled]:text-fg-disabled data-[disabled]:cursor-default',\n].join(' ')\n\n// ── Root ──\nconst DropdownMenu = DropdownMenuPrimitive.Root\nconst DropdownMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Trigger\n    ref={ref}\n    className={cn('outline-none', className)}\n    {...props}\n  />\n))\nDropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName\n// DropdownMenuGroup — 對齊 MenuGroup 的 group separation 設計語言\n//\n// 設計語言(跨 Menu-like 元件統一,SSOT 見 item-anatomy.spec.md\n// 「Group auto-separation」):\n//   每個 group 上下各 8px padding,相鄰 group 之間用 border-divider 分隔\n//   兩個 group 之間視覺 gap = 8px(上一個 bottom)+ 8px(下一個 top)= 16px + border\n//\n// MenuGroup(menu-item.tsx)實作:`py-2 [&+&]:border-t [&+&]:border-divider`\n//   (在 Command.List 下提供 Content 邊界 8px + group 間 16px gap)\n//\n// DropdownMenuGroup(本元件)實作:`[&+&]:mt-2 [&+&]:pt-2 [&+&]:border-t\n// [&+&]:border-divider`(因為 DropdownMenuContent 已有 py-2 提供 Content 邊界\n// 的 8px,只需在第二個起的 group 加 8+8 = 16px gap + border)\n//\n// **視覺結果等同**:兩種實作的 visual output 一致,只是「padding 住在哪層」\n// 不同。不強制統一 CSS 表達式——DropdownMenuContent 的 py-2 是既有 Radix\n// 期望的行為,移除會影響 trigger 鍵盤導覽的 focus offset。\nconst DropdownMenuGroup = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Group\n    ref={ref}\n    className={cn('[&+&]:border-t [&+&]:border-divider [&+&]:mt-2 [&+&]:pt-2', className)}\n    {...props}\n  />\n))\nDropdownMenuGroup.displayName = 'DropdownMenuGroup'\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\n// ── Content ──\ninterface DropdownMenuContentProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {\n  size?: SizeKey\n  /** 最小寬度（px），預設跟隨觸發元件寬度 */\n  minWidth?: number\n  /** 最大高度（px），超過時捲動 */\n  maxHeight?: number\n}\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  DropdownMenuContentProps\n>(({ className, size = 'md', sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = OVERLAY_COLLISION_PADDING, align = 'start', minWidth, maxHeight, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      collisionPadding={collisionPadding}\n      align={align}\n      onCloseAutoFocus={(e) => e.preventDefault()}\n      className={cn(floatingLayerClass, !maxHeight && 'py-2', className)}\n      style={{\n        boxShadow: 'var(--elevation-200)',\n        minWidth: minWidth ?? 'max(180px, var(--radix-dropdown-menu-trigger-width))',\n        maxHeight,\n      }}\n      {...props}\n    >\n      <RowSizeProvider value={size}>\n        {maxHeight ? (\n          // 長選單用 ScrollArea 跨 OS 一致捲動(不吃寬度,macOS/Windows 視覺一致)\n          // py-2 移到內層,ScrollArea Viewport 才能 scroll 整個 padded 區\n          <ScrollArea className=\"max-h-[inherit]\">\n            <div className=\"py-2\">{children}</div>\n          </ScrollArea>\n        ) : (\n          children\n        )}\n      </RowSizeProvider>\n    </DropdownMenuPrimitive.Content>\n  </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\n// ── SubContent ──\nconst DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, children, ...props }, ref) => {\n  const size = useRowSize()\n  return (\n    <DropdownMenuPrimitive.SubContent\n      ref={ref}\n      sideOffset={OVERLAY_SIDE_OFFSET}\n      className={cn(floatingLayerClass, 'py-2', className)}\n      style={{ boxShadow: 'var(--elevation-200)', minWidth: 180 }}\n      {...props}\n    >\n      <RowSizeProvider value={size}>\n        {children}\n      </RowSizeProvider>\n    </DropdownMenuPrimitive.SubContent>\n  )\n})\nDropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName\n\n// ── Helper: build endContent from badge + endIcon + shortcut ──\nfunction buildEndContent(\n  size: SizeKey,\n  badge?: React.ReactNode,\n  endIcon?: LucideIcon,\n  shortcut?: string,\n): React.ReactNode | undefined {\n  const EndIcon = endIcon\n  if (!badge && !EndIcon && !shortcut) return undefined\n  const iconPx = ICON_SIZE[size]\n  return (\n    <>\n      {badge}\n      {EndIcon && <EndIcon size={iconPx} className=\"text-fg-muted\" aria-hidden />}\n      {shortcut && <span className=\"text-caption text-fg-muted\">{shortcut}</span>}\n    </>\n  )\n}\n\n// ── Item ──\ninterface DropdownMenuItemProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>, 'children'> {\n  children: React.ReactNode\n  /** 左側 icon */\n  startIcon?: LucideIcon\n  /** 左側頭像資料（AvatarData），與 startIcon 互斥 */\n  avatar?: AvatarData\n  /** 次要說明文字 */\n  description?: React.ReactNode\n  /** 後綴 Tag（ReactNode） */\n  tag?: React.ReactNode\n  /** 後綴 Badge（ReactNode） */\n  badge?: React.ReactNode\n  /** 後綴指示型 icon（LucideIcon），fg-muted */\n  endIcon?: LucideIcon\n  /** 鍵盤快捷鍵 */\n  shortcut?: string\n  /** 單選選中（bg-neutral-selected，持續選中狀態）*/\n  selected?: boolean\n}\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  DropdownMenuItemProps\n>(({ className, children, startIcon, avatar, description, tag, badge, endIcon, shortcut, selected, disabled, ...props }, ref) => {\n  const size = useRowSize()\n  const endContent = buildEndContent(size, badge, endIcon, shortcut)\n\n  return (\n    <DropdownMenuPrimitive.Item\n      ref={ref}\n      disabled={disabled}\n      className={cn(\n        radixItemClass,\n        selected && 'bg-neutral-selected',\n        className,\n      )}\n      {...props}\n    >\n      <MenuItem\n        size={size}\n        startIcon={startIcon}\n        avatar={avatar}\n        description={description}\n        tag={tag}\n        endContent={endContent}\n        disabled={disabled}\n        // Pure visual — Radix parent handles role/aria/interaction\n        role=\"presentation\"\n        className=\"!bg-transparent hover:!bg-transparent pointer-events-none\"\n      >\n        {children}\n      </MenuItem>\n    </DropdownMenuPrimitive.Item>\n  )\n})\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\n// ── SubTrigger（子選單觸發器，自動附加 ChevronRight）──\ninterface DropdownMenuSubTriggerProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger>, 'children'> {\n  children: React.ReactNode\n  /** 左側 icon */\n  startIcon?: LucideIcon\n  /** 子選單目前狀態值文字（如 \"深色\"） */\n  value?: string\n  /** 子選單狀態 badge */\n  badge?: React.ReactNode\n}\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  DropdownMenuSubTriggerProps\n>(({ className, children, startIcon, value, badge, ...props }, ref) => {\n  const size = useRowSize()\n  const iconPx = ICON_SIZE[size]\n\n  // SubTrigger suffix: [value?] [badge?] [ChevronRight] with gap-1\n  const endContent = (\n    <div className=\"flex items-center gap-1\">\n      {value && <span className=\"text-fg-muted\">{value}</span>}\n      {badge}\n      <ChevronRight size={iconPx} className=\"text-fg-muted\" />\n    </div>\n  )\n\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      ref={ref}\n      className={cn(\n        radixItemClass,\n        'data-[state=open]:bg-neutral-hover',\n        className,\n      )}\n      {...props}\n    >\n      <MenuItem\n        size={size}\n        startIcon={startIcon}\n        endContent={endContent}\n        role=\"presentation\"\n        className=\"!bg-transparent hover:!bg-transparent pointer-events-none\"\n      >\n        {children}\n      </MenuItem>\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n})\nDropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName\n\n// ── CheckboxItem ──\ninterface DropdownMenuCheckboxItemProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>, 'children'> {\n  children: React.ReactNode\n  /** 左側 icon */\n  startIcon?: LucideIcon\n  /** 次要說明文字 */\n  description?: React.ReactNode\n}\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  DropdownMenuCheckboxItemProps\n>(({ className, children, startIcon, description, checked, disabled, ...props }, ref) => {\n  const size = useRowSize()\n\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      ref={ref}\n      checked={checked}\n      disabled={disabled}\n      onSelect={(e) => e.preventDefault()}\n      className={cn(radixItemClass, className)}\n      {...props}\n    >\n      <MenuItem\n        size={size}\n        checkbox\n        checked={!!checked}\n        startIcon={startIcon}\n        description={description}\n        disabled={disabled}\n        role=\"presentation\"\n        className=\"!bg-transparent hover:!bg-transparent pointer-events-none\"\n      >\n        {children}\n      </MenuItem>\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n})\nDropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName\n\n// ── Label（群組標題）──\nconst DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>\n>(({ className, children, ...props }, ref) => {\n  const size = useRowSize()\n  return (\n    <DropdownMenuPrimitive.Label\n      ref={ref}\n      className={cn('outline-none', className)}\n      {...props}\n    >\n      <MenuItem\n        size={size}\n        header\n        role=\"presentation\"\n        className=\"pointer-events-none\"\n      >\n        {children}\n      </MenuItem>\n    </DropdownMenuPrimitive.Label>\n  )\n})\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\n// ── Separator ──\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"my-2 h-px bg-divider\", className)}\n    {...props}\n  />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\n// ── RadioItem（單選，排序方式等）──\n// Radix handles checked state; visual用 MenuItem 的 selected highlight。\ninterface DropdownMenuRadioItemProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {\n  /** Prefix icon(LucideIcon) */\n  startIcon?: LucideIcon\n  /** 次要說明文字 */\n  description?: React.ReactNode\n}\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  DropdownMenuRadioItemProps\n>(({ className, children, startIcon, description, disabled, ...props }, ref) => {\n  const size = useRowSize()\n\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      ref={ref}\n      disabled={disabled}\n      onSelect={(e) => e.preventDefault()}\n      className={cn(radixItemClass, 'data-[state=checked]:[&>*]:bg-neutral-selected', className)}\n      {...props}\n    >\n      <MenuItem\n        size={size}\n        startIcon={startIcon}\n        description={description}\n        disabled={disabled}\n        role=\"presentation\"\n        className=\"!bg-transparent hover:!bg-transparent pointer-events-none\"\n      >\n        {children}\n      </MenuItem>\n    </DropdownMenuPrimitive.RadioItem>\n  )\n})\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\n// ── Shortcut（鍵盤快捷鍵提示，ml-auto 靠右）──\n// 作為 MenuItem children 的後綴,視覺為 fg-muted 小字。\nconst DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (\n  <span\n    className={cn('ml-auto text-footnote text-fg-muted tracking-shortcut', className)}\n    {...props}\n  />\n)\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut'\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 dropdownMenuMeta = {\n  component: 'DropdownMenu',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-neutral-hover', 'bg-surface-raised', 'bg-transparent'],\n    fg: ['text-fg-disabled', 'text-fg-muted'],\n    ring: [],\n  },\n} as const\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuShortcut,\n  floatingLayerClass,\n}\nexport type { SizeKey, DropdownMenuItemProps }\n"],"names":["ROW_ICON_SIZE"],"mappings":"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"}
+{"version":3,"file":"dropdown-menu.js","sources":["../../../src/components/DropdownMenu/dropdown-menu.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport type { AvatarData } from \"@/design-system/components/Avatar/avatar\"\nimport { MenuItem } from \"@/design-system/components/Menu/menu-item\"\nimport { ScrollArea } from \"@/design-system/components/ScrollArea/scroll-area\"\nimport { OVERLAY_SIDE_OFFSET, OVERLAY_COLLISION_PADDING } from \"@/design-system/tokens/elevation/overlay-geometry\"\nimport {\n  RowSizeProvider,\n  useRowSize,\n  ICON_SIZE as ROW_ICON_SIZE,\n  type RowSize,\n} from \"@/design-system/patterns/element-anatomy/item-anatomy\"\nimport { overlayMotion } from \"@/design-system/tokens/motion/overlay-motion\"\n\n/**\n * DropdownMenu — Radix DropdownMenu + MenuItem visual layer\n *\n * 架構分工：\n * - Radix primitives：behavior（keyboard nav, focus management, aria roles）\n * - MenuItem：visual（layout, padding, icon alignment, typography）\n *\n * Radix primitive 是外層容器,控制 `data-[highlighted]:bg-neutral-hover`。\n * MenuItem 內層只負責佈局,不加互動樣式。\n *\n * ── Hover / highlight canonical(2026-04-22 修正)──\n * 用 Radix 官方的 `data-[highlighted]` attribute,**不用 `:focus-visible` / `:hover` /\n * `:focus`**:\n *   - Radix 在 **mouse hover、keyboard arrow nav、focus move in** 時自動 set `data-highlighted`\n *   - mouse leave / focus move out / menu close 時自動清掉\n *   - 不會在 click 後留殘影(Radix 內部已處理)\n *   - 跨瀏覽器一致(不依賴 `:focus-visible` 的 heuristic)\n *\n * 曾經用過 `focus-visible:bg-neutral-hover` 的理由:避免 click 後殘影。但實測:mouse hover\n * 觸發 Radix 程式化 `.focus()`,Chromium / Safari / Firefox 對 programmatic focus 是否 fire\n * `:focus-visible` 行為不一致,導致 mouse hover 有時無 bg。改用 `data-[highlighted]:` 後行為\n * 一致 —— 世界級 canonical(shadcn / Radix docs / Ariakit 皆此)。\n */\n\n// ── Floating layer 共用樣式 ──\n/** @internal — menu 形浮層共用 class(DropdownMenu/SelectMenu/Command 內部);consumer 不 hand-craft menu surface,用元件本身。root barrel 排除(subpath 仍可 wrap 後用)。 */\nconst floatingLayerClass = [\n  'z-50 overflow-hidden rounded-lg border border-border bg-surface-raised',\n  overlayMotion,\n  'data-[state=open]:animate-in data-[state=closed]:animate-out',\n  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n  'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n  'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',\n  'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n  'origin-[var(--radix-dropdown-menu-content-transform-origin)]',\n].join(' ')\n\n// ── Size:統一用 RowSizeContext(item-layout module),消除本地 SizeContext 漂移 ──\ntype SizeKey = RowSize\n// Re-export for backward compat(內部命名)\nconst ICON_SIZE = ROW_ICON_SIZE\n\n// ── Shared item classes on Radix primitive ──\n// Highlight(hover + keyboard nav): 用 Radix `data-[highlighted]` canonical(見 docblock)\nconst radixItemClass = [\n  'relative cursor-pointer select-none outline-none',\n  'transition-colors duration-150',\n  'data-[highlighted]:bg-neutral-hover',\n  'data-[disabled]:pointer-events-none data-[disabled]:text-fg-disabled data-[disabled]:cursor-default',\n].join(' ')\n\n// ── Root ──\n// Radix modal menu 會在 open 時把 trigger 所在的 app subtree 設成 aria-hidden。瀏覽器仍可\n// 讓 subtree 內原本的 trigger 留在 sequential focus order，axe 因而正確報\n// aria-hidden-focus。由 Root SSOT 對所有 DropdownMenu 統一同步 trigger tab stop；Portal\n// 仍保留 React context，所以不需要 consumer/story 各自 patch。\nconst DropdownMenuModalOpenContext = React.createContext(false)\n\nconst DropdownMenu = ({\n  open,\n  defaultOpen,\n  onOpenChange,\n  modal = true,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false)\n  const resolvedOpen = open ?? uncontrolledOpen\n  const handleOpenChange = React.useCallback(\n    (nextOpen: boolean) => {\n      if (open === undefined) setUncontrolledOpen(nextOpen)\n      onOpenChange?.(nextOpen)\n    },\n    [onOpenChange, open],\n  )\n\n  return (\n    <DropdownMenuModalOpenContext.Provider value={modal && resolvedOpen}>\n      <DropdownMenuPrimitive.Root\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={handleOpenChange}\n        modal={modal}\n        {...props}\n      />\n    </DropdownMenuModalOpenContext.Provider>\n  )\n}\nDropdownMenu.displayName = DropdownMenuPrimitive.Root.displayName\n\nconst DropdownMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>(({ className, tabIndex, ...props }, ref) => {\n  const modalOpen = React.useContext(DropdownMenuModalOpenContext)\n  return (\n    <DropdownMenuPrimitive.Trigger\n      ref={ref}\n      // modal open 時 trigger 位於 Radix aria-hidden subtree：移出 sequential focus order；\n      // 關閉時仍由 Radix programmatically focus，且恢復 consumer 原 tabIndex。\n      tabIndex={modalOpen ? -1 : tabIndex}\n      // 2026-07-05:非 asChild 裸用需可見 focus 指示(WCAG 2.4.7)——原 `outline-none` 讓裸 Trigger\n      // 完全無 focus ring。消費 Button focus canonical(button.tsx buttonVariants base)。\n      // asChild+Button 場景同名 class 重複,無影響。\n      className={cn(\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nDropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName\n// DropdownMenuGroup — 對齊 MenuGroup 的 group separation 設計語言\n//\n// 設計語言(跨 Menu-like 元件統一,SSOT 見 item-anatomy.spec.md\n// 「Group auto-separation」):\n//   每個 group 上下各 8px padding,相鄰 group 之間用 border-divider 分隔\n//   兩個 group 之間視覺 gap = 8px(上一個 bottom)+ 8px(下一個 top)= 16px + border\n//\n// MenuGroup(menu-item.tsx)實作:`py-2 [&+&]:border-t [&+&]:border-divider`\n//   (在 Command.List 下提供 Content 邊界 8px + group 間 16px gap)\n//\n// DropdownMenuGroup(本元件)實作:`[&+&]:mt-2 [&+&]:pt-2 [&+&]:border-t\n// [&+&]:border-divider`(因為 DropdownMenuContent 已有 py-2 提供 Content 邊界\n// 的 8px,只需在第二個起的 group 加 8+8 = 16px gap + border)\n//\n// **視覺結果等同**:兩種實作的 visual output 一致,只是「padding 住在哪層」\n// 不同。不強制統一 CSS 表達式——DropdownMenuContent 的 py-2 是純視覺 Content\n// 邊界 padding(Radix roving focus 依 collection refs + element.focus(),不讀\n// CSS padding;對齊 spec.md「為什麼不直接套 py-2」段)。Group 若再套 py-2 會\n// double padding,故 Group 用 mt-2/pt-2 只加在第二個起。\nconst DropdownMenuGroup = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Group\n    ref={ref}\n    className={cn('[&+&]:border-t [&+&]:border-divider [&+&]:mt-2 [&+&]:pt-2', className)}\n    {...props}\n  />\n))\nDropdownMenuGroup.displayName = 'DropdownMenuGroup'\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\n// ── Content ──\ninterface DropdownMenuContentProps\n  // asChild Omit(2026-07-18 決策2):Content 恆注入固定 <RowSizeProvider> + <ScrollArea>\n  // wrapper 於 Portal 內 → <Content asChild> 會把 Content props slot-merge 到非-DOM Provider 上而壞。\n  // children 保留(合法渲染於固定 wrapper 內)。\n  extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>, 'asChild'> {\n  size?: SizeKey\n  /** 最小寬度（px），預設 `max(180px, 觸發元件寬度)`——窄 trigger 時吃 180px 地板 */\n  minWidth?: number\n  /**\n   * 最大高度（px）——**可選更低上限**。預設已 viewport-adaptive(夾到 trigger→視窗碰撞邊界的剩餘高度、\n   * 離窗 ≥8px、超過即捲動);傳 `maxHeight` 只在「想比視窗剩餘更矮」時用(取 `min(視窗剩餘, maxHeight)`)。\n   */\n  maxHeight?: number\n}\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  DropdownMenuContentProps\n>(({ className, size = 'md', sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = OVERLAY_COLLISION_PADDING, align = 'start', minWidth, maxHeight, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      collisionPadding={collisionPadding}\n      align={align}\n      // Density:繼承 page density(2026-06-15 canonical)。menu item 高度 = field-height-{size},而\n      // field-height 隨 density 變(md 28/32/36 → lg 32/36/40)→ 鎖 data-density=\"md\" 會把選單釘在 md-scale,\n      // lg page 上對不上 lg 觸發點。原 data-density 是 409b91da a11y 批次順手加(對齊 Popover),非設計\n      // 決策 → 移除,item 隨 page density 與觸發點一致(tier 仍由 size prop 決定)。\n      // Focus return on close:不 override `onCloseAutoFocus` — 用 Radix 內建 default\n      // (close 時 focus 還 trigger;outside-interaction 例外由 Radix `hasInteractedOutsideRef` 自管)。\n      // W3C APG menubar「Escape: …return focus to the element…from which the menu was opened」\n      // (w3.org/WAI/ARIA/apg/patterns/menubar/);shadcn dropdown-menu 同樣不 override。\n      // 2026-06-11 移除 2026-04-08 的 `(e) => e.preventDefault()` hardcode:它跑在 Radix\n      // composeEventHandlers 內建 handler 之前,defaultPrevented → trigger focus 被 skip →\n      // Esc 關閉後 focus 掉到 body(APG violation)。原動機「mouse close 後 trigger 殘留\n      // focus ring」不構成 override 理由:實測(2026-06-12 playwright)pointer item-click\n      // close 後 programmatic refocus 在 Chromium 仍可 match `:focus-visible`(UA heuristic),\n      // 但與 shadcn 官方 live demo 同流程 DOM 比對 IDENTICAL — Radix 生態一致接受此\n      // tradeoff:APG keyboard focus-return 優先於 cosmetic ring。\n      className={cn(floatingLayerClass, 'flex flex-col min-h-0', className)}\n      style={{\n        boxShadow: 'var(--elevation-200)',\n        minWidth: minWidth ?? 'max(180px, var(--radix-dropdown-menu-trigger-width))',\n        // 2026-07-18 viewport-adaptive max-h(對齊 HoverCard/Popover 既有 canonical):夾到「trigger 到\n        //   碰撞邊界(已內縮 collisionPadding=8px)的剩餘高度」→ 高選單不溢出視窗、離視窗邊 ≥8px、\n        //   短選單仍貼內容;consumer `maxHeight` 為**可選更低上限**(min 取小者)。inline style 非 class,\n        //   故動態 maxHeight 不觸 Tailwind 掃描陷阱。\n        maxHeight: maxHeight\n          ? `min(var(--radix-dropdown-menu-content-available-height, 100vh), ${maxHeight}px)`\n          : 'var(--radix-dropdown-menu-content-available-height, 100vh)',\n      }}\n      {...props}\n    >\n      <RowSizeProvider value={size}>\n        {/* body 恆在 flex-1 ScrollArea 內:超過 clamped 高度即跨-OS 一致捲動(不吃寬度);\n            短選單 flex-1 貼內容不塌(同 HoverCard/Popover/DataTable panel 已驗)。py-2 在內層,整 padded 區可捲。 */}\n        <ScrollArea className=\"flex-1 min-h-0\" viewportTabIndex={null}>\n          <div className=\"py-2\">{children}</div>\n        </ScrollArea>\n      </RowSizeProvider>\n    </DropdownMenuPrimitive.Content>\n  </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\n// ── SubContent ──\nconst DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, children, ...props }, ref) => {\n  const size = useRowSize()\n  return (\n    <DropdownMenuPrimitive.SubContent\n      ref={ref}\n      sideOffset={OVERLAY_SIDE_OFFSET}\n      className={cn(floatingLayerClass, 'py-2', className)}\n      style={{ boxShadow: 'var(--elevation-200)', minWidth: 180 }}\n      {...props}\n    >\n      <RowSizeProvider value={size}>\n        {children}\n      </RowSizeProvider>\n    </DropdownMenuPrimitive.SubContent>\n  )\n})\nDropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName\n\n// ── Helper: build endContent from badge + endIcon + shortcut ──\nfunction buildEndContent(\n  size: SizeKey,\n  badge?: React.ReactNode,\n  endIcon?: LucideIcon,\n  shortcut?: string,\n): React.ReactNode | undefined {\n  const EndIcon = endIcon\n  if (!badge && !EndIcon && !shortcut) return undefined\n  const iconPx = ICON_SIZE[size]\n  return (\n    <>\n      {badge}\n      {EndIcon && <EndIcon size={iconPx} className=\"text-fg-muted\" aria-hidden />}\n      {shortcut && <span className=\"text-caption text-fg-muted tracking-shortcut\">{shortcut}</span>}\n    </>\n  )\n}\n\n// ── Item ──\ninterface DropdownMenuItemProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>, 'children'> {\n  children: React.ReactNode\n  /** 左側 icon */\n  startIcon?: LucideIcon\n  /** 左側頭像資料（AvatarData），與 startIcon 互斥 */\n  avatar?: AvatarData\n  /** 次要說明文字 */\n  description?: React.ReactNode\n  /** 後綴 Tag（ReactNode） */\n  tag?: React.ReactNode\n  /** 後綴 Badge（ReactNode） */\n  badge?: React.ReactNode\n  /** 後綴指示型 icon（LucideIcon），fg-muted */\n  endIcon?: LucideIcon\n  /** 鍵盤快捷鍵提示(canonical)——渲染進 MenuItem `endContent` 正規後綴 slot。\n   *  替代方案是 `<DropdownMenuShortcut>` child(composition escape-hatch);**同 item 勿混用**。 */\n  shortcut?: string\n  /** 單選選中（bg-neutral-selected，持續選中狀態）*/\n  selected?: boolean\n}\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  DropdownMenuItemProps\n>(({ className, children, startIcon, avatar, description, tag, badge, endIcon, shortcut, selected, disabled, ...props }, ref) => {\n  const size = useRowSize()\n  const endContent = buildEndContent(size, badge, endIcon, shortcut)\n\n  return (\n    <DropdownMenuPrimitive.Item\n      ref={ref}\n      disabled={disabled}\n      // 2026-07-05:typeahead 只比對 label——children 為字串時 auto-forward textValue,避免 Radix\n      // fallback 拿整段 textContent(label+description+badge+shortcut 串接)比對。consumer 顯式\n      // textValue 在 {...props} 較後 spread,仍優先。\n      textValue={typeof children === 'string' ? children : undefined}\n      className={cn(\n        radixItemClass,\n        // 2026-07-04 Q2 拍板:selected bg 勝 hover/highlighted(bg 是唯一選中指示器,被 hover 洗掉\n        // = 選中資訊消失)。對齊 MenuItem(menu-item.tsx selected 時關 hover bg)+ Ant Menu\n        // `:not(-item-selected)` + VS Code list `:hover:not(.selected)`;Radix highlighted 同時是\n        // keyboard cursor,selected 項停留時維持 selected bg(DS bg 通道單一職責)。\n        // 2026-07-05 D4 補完 Q2 附帶條件:selected×highlighted(鍵盤 cursor 停留)深化一階,cursor 可感知\n        //(WCAG 2.4.7)。2026-08-11 user 拍板糾正兩處(SSOT = item-anatomy「選中 × 互動疊加」):\n        //(1) Radix highlighted 滑鼠也觸發,深化僅限鍵盤 — 滑鼠 hover 釘住不變(not-hover 分流,\n        //     深化 (0,3,0) > 釘住 (0,2,0));(2) token 從借用的 -active(按壓專屬)歸位 -focus。\n        selected && 'bg-neutral-selected data-[highlighted]:bg-neutral-selected data-[highlighted]:not-hover:bg-neutral-selected-focus',\n        className,\n      )}\n      {...props}\n    >\n      <MenuItem\n        size={size}\n        startIcon={startIcon}\n        avatar={avatar}\n        description={description}\n        tag={tag}\n        endContent={endContent}\n        disabled={disabled}\n        // Pure visual — Radix parent handles role/aria/interaction\n        role=\"presentation\"\n        className=\"!bg-transparent hover:!bg-transparent pointer-events-none\"\n      >\n        {children}\n      </MenuItem>\n    </DropdownMenuPrimitive.Item>\n  )\n})\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\n// ── SubTrigger（子選單觸發器，自動附加 ChevronRight）──\ninterface DropdownMenuSubTriggerProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger>, 'children'> {\n  children: React.ReactNode\n  /** 左側 icon */\n  startIcon?: LucideIcon\n  /** 子選單目前狀態值文字（如 \"深色\"） */\n  value?: string\n  /** 子選單狀態 badge */\n  badge?: React.ReactNode\n}\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  DropdownMenuSubTriggerProps\n>(({ className, children, startIcon, value, badge, ...props }, ref) => {\n  const size = useRowSize()\n  const iconPx = ICON_SIZE[size]\n\n  // SubTrigger suffix: [value?] [badge?] [ChevronRight] with gap-1\n  const endContent = (\n    <div className=\"flex items-center gap-1\">\n      {value && <span className=\"text-fg-muted\">{value}</span>}\n      {badge}\n      <ChevronRight size={iconPx} className=\"text-fg-muted\" />\n    </div>\n  )\n\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      ref={ref}\n      // 2026-07-05:同 DropdownMenuItem——typeahead 只比對 label(endContent 的 value/badge 不進比對)。\n      textValue={typeof children === 'string' ? children : undefined}\n      className={cn(\n        radixItemClass,\n        'data-[state=open]:bg-neutral-hover',\n        className,\n      )}\n      {...props}\n    >\n      <MenuItem\n        size={size}\n        startIcon={startIcon}\n        endContent={endContent}\n        role=\"presentation\"\n        className=\"!bg-transparent hover:!bg-transparent pointer-events-none\"\n      >\n        {children}\n      </MenuItem>\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n})\nDropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName\n\n// ── CheckboxItem ──\ninterface DropdownMenuCheckboxItemProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>, 'children'> {\n  children: React.ReactNode\n  /** 左側 icon */\n  startIcon?: LucideIcon\n  /** 次要說明文字 */\n  description?: React.ReactNode\n}\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  DropdownMenuCheckboxItemProps\n>(({ className, children, startIcon, description, checked, disabled, ...props }, ref) => {\n  const size = useRowSize()\n\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      ref={ref}\n      checked={checked}\n      disabled={disabled}\n      // 2026-07-05:同 DropdownMenuItem——typeahead 只比對 label(M10 同 pattern:帶 description)。\n      textValue={typeof children === 'string' ? children : undefined}\n      onSelect={(e) => e.preventDefault()}\n      className={cn(radixItemClass, className)}\n      {...props}\n    >\n      <MenuItem\n        size={size}\n        checkbox\n        checked={!!checked}\n        startIcon={startIcon}\n        description={description}\n        disabled={disabled}\n        role=\"presentation\"\n        className=\"!bg-transparent hover:!bg-transparent pointer-events-none\"\n      >\n        {children}\n      </MenuItem>\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n})\nDropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName\n\n// ── Label（群組標題）──\nconst DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>\n>(({ className, children, ...props }, ref) => {\n  const size = useRowSize()\n  return (\n    <DropdownMenuPrimitive.Label\n      ref={ref}\n      className={cn('outline-none', className)}\n      {...props}\n    >\n      <MenuItem\n        size={size}\n        header\n        role=\"presentation\"\n        className=\"pointer-events-none text-fg-secondary\"\n      >\n        {children}\n      </MenuItem>\n    </DropdownMenuPrimitive.Label>\n  )\n})\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\n// ── Separator ──\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"my-2 h-px bg-divider\", className)}\n    {...props}\n  />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\n// ── RadioItem（單選，排序方式等）──\n// Radix handles checked state;checked 底色套在外層 Radix RadioItem 本身(parent-bg\n// pattern,詳下方 2026-05-31 #10 註解),內層 MenuItem 恆 !bg-transparent 讓它透出。\ninterface DropdownMenuRadioItemProps\n  // children Omit + redeclare required(2026-07-18 決策2 一致性):對齊 sibling Item/SubTrigger/\n  // CheckboxItem — menu item 必有 label,children 為 required 非 Radix optional。RadioItem 恆渲染\n  // 固定 <MenuItem>{children}</MenuItem>,children 是合法 label(非 lie),此為 required 化一致性修。\n  extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>, 'children'> {\n  children: React.ReactNode\n  /** Prefix icon(LucideIcon) */\n  startIcon?: LucideIcon\n  /** 次要說明文字 */\n  description?: React.ReactNode\n}\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  DropdownMenuRadioItemProps\n>(({ className, children, startIcon, description, disabled, ...props }, ref) => {\n  const size = useRowSize()\n\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      ref={ref}\n      disabled={disabled}\n      // 2026-07-05:同 DropdownMenuItem——typeahead 只比對 label(M10 同 pattern:帶 description)。\n      textValue={typeof children === 'string' ? children : undefined}\n      onSelect={(e) => e.preventDefault()}\n      // 2026-05-31 #10:selected 底色套在外層 Radix RadioItem 本身(非 `[&>*]` 子 MenuItem),\n      // 因內層 MenuItem 自帶 `!bg-transparent` 會蓋掉子層 bg → 選中底色從不顯示。\n      // 改 parent-bg pattern(對齊 DropdownMenuItem selected):RadioItem 上底色,MenuItem 透明讓它透出。\n      // 2026-07-04 Q2:checked 亦勝 highlighted(同 DropdownMenuItem selected 規則)\n      className={cn(radixItemClass, 'data-[state=checked]:bg-neutral-selected data-[state=checked]:data-[highlighted]:bg-neutral-selected data-[state=checked]:data-[highlighted]:not-hover:bg-neutral-selected-focus', className)}\n      {...props}\n    >\n      <MenuItem\n        size={size}\n        startIcon={startIcon}\n        description={description}\n        disabled={disabled}\n        role=\"presentation\"\n        className=\"!bg-transparent hover:!bg-transparent pointer-events-none\"\n      >\n        {children}\n      </MenuItem>\n    </DropdownMenuPrimitive.RadioItem>\n  )\n})\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\n// ── Shortcut（鍵盤快捷鍵提示 child;escape-hatch,不靠右）──\n// **Canonical 是 `<DropdownMenuItem shortcut=\"⌘C\">`** prop —— 走 MenuItem `endContent` 正規後綴 slot\n// (跟 badge / endIcon 同槽、gap/對齊一致,真正靠右對齊列尾)。本 child 是 **composition\n// escape-hatch**(相容 shadcn DropdownMenuShortcut idiom = `ml-auto` span,source:\n// https://ui.shadcn.com/docs/components/dropdown-menu;npm published API 不砍)。⚠️ 在\n// DropdownMenuItem 內 children 會進 MenuItem ItemContent 的 label `<span>`(inline context,\n// 非 flex row),故 `ml-auto` **不生效、不會靠右**——只會 inline 附加在 label 文字尾;`ml-auto`\n// 僅在 consumer 自組 flex row 時生效。要靠右一律用 canonical `shortcut` prop。**同一 item\n// 只用一種,勿混用**(見 spec.md「快捷鍵提示 API」+ 禁止事項)。\n// 字體樣式統一:text-caption + tracking-shortcut + fg-muted(對齊 prop 後綴 + CommandShortcut);位置不等價。\nconst DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (\n  <span\n    className={cn('ml-auto text-caption text-fg-muted tracking-shortcut', className)}\n    {...props}\n  />\n)\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut'\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 dropdownMenuMeta = {\n  component: 'DropdownMenu',\n  family: 1, // 對齊 dropdown-menu.spec.md frontmatter L3(Family 1 消費者;DS 慣例 = meta 對齊 spec frontmatter,原 null 是 Phase 1 boilerplate 殘留)\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  // 'selected' = 單選/checked item 持續選中(bg-neutral-selected);'active' 保留 — highlight-on-selected\n  // 走 bg-neutral-selected-focus(2026-08-11 token 歸位:-active 回歸按壓專屬;深化僅限鍵盤反白)。\n  states: ['default', 'hover', 'active', 'selected', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-neutral-hover', 'bg-neutral-selected', 'bg-neutral-selected-focus', 'bg-surface-raised', 'bg-transparent'],\n    fg: ['text-fg-disabled', 'text-fg-muted'],\n    ring: ['ring-ring'], // 2026-07-05:Trigger focus canonical ring(對齊 Checkbox/Tabs 等 meta 慣例)\n  },\n} as const\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuShortcut,\n  floatingLayerClass,\n}\nexport type { SizeKey, DropdownMenuItemProps }\n"],"names":["ROW_ICON_SIZE"],"mappings":"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"}

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

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

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

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

package/dist/components/DropdownMenu/index.js

@@ -0,0 +1,21 @@
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, dropdownMenuMeta, floatingLayerClass } from "./dropdown-menu.js";
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  dropdownMenuMeta,
+  floatingLayerClass
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/Empty/empty.d.ts

@@ -4,12 +4,14 @@ import type { LucideIcon } from 'lucide-react';
  * Empty — 空狀態視覺元件
  *
  * 居中垂直堆疊:icon(Avatar) → title → description → action。
- * 所有 slot 皆可選,預設只需 description。
+ * description 必填；icon / title / action 可選。
  *
  * 間距固定,不隨 density 變（Empty 是展示性元件,不是工作區域元件）:
  *   icon → text = mb-4（16px）
  *   desc → action = mt-6（24px）
- *   title → desc = `var(--item-gap-label-desc)`（token,預設 2px,item-anatomy SSOT）
+ *   title → desc = `var(--item-gap-label-desc-reading-lg)`（reading-lg tier token,item-anatomy SSOT;bare `--item-gap-label-desc` 已 retire）
+ *
+ * description 字級隨 RowSizeContext 變（sm/md → text-body 14px,lg → text-body-lg 16px）。
  *
  * Outer padding 由 consumer 容器決定(py-12 / py-6 / py-16 等）。
  */
@@ -18,10 +20,16 @@ export interface EmptyProps extends React.HTMLAttributes<HTMLDivElement> {
     icon?: LucideIcon | React.ReactElement;
     /** 標題(可選,font-medium,適用於首次引導) */
     title?: string;
-    /** 說明文字 */
-    description?: string;
+    /** 必填的情境說明；不得用空字串代替載入中或其他狀態。 */
+    description: string;
     /** 行動按鈕(可選) */
     action?: React.ReactNode;
+    /**
+     * Disabled context(2026-06-03 加 — FileUpload disabled 等情境消費):title / description 轉
+     * `text-fg-disabled`(語意 disabled token,非 opacity)。icon glyph 也 → fg-disabled(icon 是文字一環);icon-circle bg 維持 muted。
+     * 預設 false,不影響既有 consumer。
+     */
+    disabled?: boolean;
 }
 declare const Empty: React.ForwardRefExoticComponent<EmptyProps & React.RefAttributes<HTMLDivElement>>;
 export declare const emptyMeta: {
@@ -29,10 +37,10 @@ export declare const emptyMeta: {
     readonly family: null;
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "disabled"];
     readonly tokens: {
         readonly bg: readonly [];
-        readonly fg: readonly ["text-fg-muted", "text-fg-secondary", "text-foreground"];
+        readonly fg: readonly ["text-fg-muted", "text-fg-secondary", "text-foreground", "text-fg-disabled"];
         readonly ring: readonly [];
     };
 };

package/dist/components/Empty/empty.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../../src/components/Empty/empty.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAK9C;;;;;;;;;;;;GAYG;AAEH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,+DAA+D;IAC/D,IAAI,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,YAAY,CAAA;IACtC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe;IACf,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,QAAA,MAAM,KAAK,mFAsDV,CAAA;AAKD,eAAO,MAAM,SAAS;;;;;;;;;;;CAeZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../../src/components/Empty/empty.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAK9C;;;;;;;;;;;;;;GAcG;AAEH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,+DAA+D;IAC/D,IAAI,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,YAAY,CAAA;IACtC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe;IACf,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,KAAK,mFA0DV,CAAA;AAKD,eAAO,MAAM,SAAS;;;;;;;;;;;CAeZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/Empty/empty.js

@@ -4,16 +4,16 @@ import { cn } from "../../lib/utils.js";
 import { Avatar } from "../Avatar/avatar.js";
 import { useRowSize } from "../../patterns/element-anatomy/item-anatomy.js";
 const Empty = React.forwardRef(
-  ({ icon, title, description, action, className, ...props }, ref) => {
+  ({ icon, title, description, action, disabled = false, className, ...props }, ref) => {
     const rowSize = useRowSize("md");
     const descFont = rowSize === "lg" ? "text-body-lg" : "text-body";
     let iconElement = null;
     if (icon) {
       if (React.isValidElement(icon)) {
-        iconElement = icon;
+        iconElement = disabled ? /* @__PURE__ */ jsx("span", { className: "contents [&_svg]:!text-fg-disabled", children: icon }) : icon;
       } else {
         const Icon = icon;
-        iconElement = /* @__PURE__ */ jsx(Avatar, { icon: Icon, size: 48, color: "neutral" });
+        iconElement = /* @__PURE__ */ jsx(Avatar, { icon: Icon, size: 48, color: "neutral", className: disabled ? "[&_svg]:!text-fg-disabled" : void 0 });
       }
     }
     return /* @__PURE__ */ jsxs(
@@ -24,7 +24,7 @@ const Empty = React.forwardRef(
         ...props,
         children: [
           iconElement && /* @__PURE__ */ jsx("div", { className: "mb-4", children: iconElement }),
-          title && /* @__PURE__ */ jsx("span", { className: "text-body-lg font-medium text-foreground", children: title }),
+          title && /* @__PURE__ */ jsx("span", { className: cn("text-body-lg font-medium", disabled ? "text-fg-disabled" : "text-foreground"), children: title }),
           description && /* @__PURE__ */ jsx(
             "span",
             {
@@ -32,7 +32,7 @@ const Empty = React.forwardRef(
                 // 字體跟 RowSizeContext 對齊:sm/md = text-body (14px),lg = text-body-lg (16px)
                 // 在 menu 內自動對齊 menu items;standalone 時 fallback text-body
                 descFont,
-                title || action ? "text-fg-secondary" : "text-fg-muted",
+                disabled ? "text-fg-disabled" : title || action ? "text-fg-secondary" : "text-fg-muted",
                 // Empty title 永遠 body-lg(16)→ 用 reading-lg token(label tier 決定)
                 title && "mt-[var(--item-gap-label-desc-reading-lg)]"
               ),
@@ -52,10 +52,10 @@ const emptyMeta = {
   // non-family composite / overlay / layout
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  states: ["default", "disabled"],
   tokens: {
     bg: [],
-    fg: ["text-fg-muted", "text-fg-secondary", "text-foreground"],
+    fg: ["text-fg-muted", "text-fg-secondary", "text-foreground", "text-fg-disabled"],
     ring: []
   }
 };

package/dist/components/Empty/empty.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty.js","sources":["../../../src/components/Empty/empty.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar } from '@/design-system/components/Avatar/avatar'\nimport { useRowSize } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/**\n * Empty — 空狀態視覺元件\n *\n * 居中垂直堆疊:icon(Avatar) → title → description → action。\n * 所有 slot 皆可選,預設只需 description。\n *\n * 間距固定,不隨 density 變（Empty 是展示性元件,不是工作區域元件）:\n *   icon → text = mb-4（16px）\n *   desc → action = mt-6（24px）\n *   title → desc = `var(--item-gap-label-desc)`（token,預設 2px,item-anatomy SSOT）\n *\n * Outer padding 由 consumer 容器決定(py-12 / py-6 / py-16 等）。\n */\n\nexport interface EmptyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** LucideIcon → 自動包 Avatar 48px neutral;ReactElement → 原樣渲染 */\n  icon?: LucideIcon | React.ReactElement\n  /** 標題(可選,font-medium,適用於首次引導) */\n  title?: string\n  /** 說明文字 */\n  description?: string\n  /** 行動按鈕(可選) */\n  action?: React.ReactNode\n}\n\nconst Empty = React.forwardRef<HTMLDivElement, EmptyProps>(\n  ({ icon, title, description, action, className, ...props }, ref) => {\n    // 字體 tier:讀 RowSizeContext(menu 內自動對齊 menu items 的字體）\n    // 沒有 context(standalone）→ fallback 'md' → text-body (14px)\n    const rowSize = useRowSize('md')\n    const descFont = rowSize === 'lg' ? 'text-body-lg' : 'text-body'\n\n    // Icon rendering: ReactElement → as-is;LucideIcon(component,包括 forwardRef 物件)→ 包 Avatar\n    // 注意:Lucide v0.577+ icons 是 forwardRef 物件(`typeof === 'object'`),不是 function。\n    // 必用 React.isValidElement 判斷 element vs component(typeof 會把 forwardRef 物件誤歸 object)。\n    let iconElement: React.ReactNode = null\n    if (icon) {\n      if (React.isValidElement(icon)) {\n        iconElement = icon\n      } else {\n        const Icon = icon as LucideIcon\n        iconElement = <Avatar icon={Icon} size={48} color=\"neutral\" />\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn('flex flex-col items-center text-center', className)}\n        {...props}\n      >\n        {iconElement && (\n          <div className=\"mb-4\">{iconElement}</div>\n        )}\n        {title && (\n          <span className=\"text-body-lg font-medium text-foreground\">\n            {title}\n          </span>\n        )}\n        {description && (\n          <span\n            className={cn(\n              // 字體跟 RowSizeContext 對齊:sm/md = text-body (14px),lg = text-body-lg (16px)\n              // 在 menu 內自動對齊 menu items;standalone 時 fallback text-body\n              descFont,\n              (title || action) ? 'text-fg-secondary' : 'text-fg-muted',\n              // Empty title 永遠 body-lg(16)→ 用 reading-lg token(label tier 決定)\n              title && 'mt-[var(--item-gap-label-desc-reading-lg)]',\n            )}\n          >\n            {description}\n          </span>\n        )}\n        {action && (\n          <div className=\"mt-6\">{action}</div>\n        )}\n      </div>\n    )\n  },\n)\nEmpty.displayName = 'Empty'\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 emptyMeta = {\n  component: 'Empty',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: ['text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport { Empty }\n"],"names":[],"mappings":";;;;;AA+BA,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,MAAM,OAAO,aAAa,QAAQ,WAAW,GAAG,MAAA,GAAS,QAAQ;AAGlE,UAAM,UAAU,WAAW,IAAI;AAC/B,UAAM,WAAW,YAAY,OAAO,iBAAiB;AAKrD,QAAI,cAA+B;AACnC,QAAI,MAAM;AACR,UAAI,MAAM,eAAe,IAAI,GAAG;AAC9B,sBAAc;AAAA,MAChB,OAAO;AACL,cAAM,OAAO;AACb,0CAAe,QAAA,EAAO,MAAM,MAAM,MAAM,IAAI,OAAM,WAAU;AAAA,MAC9D;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,0CAA0C,SAAS;AAAA,QAChE,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,eACC,oBAAC,OAAA,EAAI,WAAU,QAAQ,UAAA,aAAY;AAAA,UAEpC,SACC,oBAAC,QAAA,EAAK,WAAU,4CACb,UAAA,OACH;AAAA,UAED,eACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA;AAAA;AAAA,gBAGT;AAAA,gBACC,SAAS,SAAU,sBAAsB;AAAA;AAAA,gBAE1C,SAAS;AAAA,cAAA;AAAA,cAGV,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,UACC,oBAAC,OAAA,EAAI,WAAU,QAAQ,UAAA,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAItC;AACF;AACA,MAAM,cAAc;AAIb,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAC,iBAAiB,qBAAqB,iBAAiB;AAAA,IAC5D,MAAM,CAAA;AAAA,EAAC;AAEX;"}
+{"version":3,"file":"empty.js","sources":["../../../src/components/Empty/empty.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar } from '@/design-system/components/Avatar/avatar'\nimport { useRowSize } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/**\n * Empty — 空狀態視覺元件\n *\n * 居中垂直堆疊:icon(Avatar) → title → description → action。\n * description 必填；icon / title / action 可選。\n *\n * 間距固定,不隨 density 變（Empty 是展示性元件,不是工作區域元件）:\n *   icon → text = mb-4（16px）\n *   desc → action = mt-6（24px）\n *   title → desc = `var(--item-gap-label-desc-reading-lg)`（reading-lg tier token,item-anatomy SSOT;bare `--item-gap-label-desc` 已 retire）\n *\n * description 字級隨 RowSizeContext 變（sm/md → text-body 14px,lg → text-body-lg 16px）。\n *\n * Outer padding 由 consumer 容器決定(py-12 / py-6 / py-16 等）。\n */\n\nexport interface EmptyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** LucideIcon → 自動包 Avatar 48px neutral;ReactElement → 原樣渲染 */\n  icon?: LucideIcon | React.ReactElement\n  /** 標題(可選,font-medium,適用於首次引導) */\n  title?: string\n  /** 必填的情境說明；不得用空字串代替載入中或其他狀態。 */\n  description: string\n  /** 行動按鈕(可選) */\n  action?: React.ReactNode\n  /**\n   * Disabled context(2026-06-03 加 — FileUpload disabled 等情境消費):title / description 轉\n   * `text-fg-disabled`(語意 disabled token,非 opacity)。icon glyph 也 → fg-disabled(icon 是文字一環);icon-circle bg 維持 muted。\n   * 預設 false,不影響既有 consumer。\n   */\n  disabled?: boolean\n}\n\nconst Empty = React.forwardRef<HTMLDivElement, EmptyProps>(\n  ({ icon, title, description, action, disabled = false, className, ...props }, ref) => {\n    // 字體 tier:讀 RowSizeContext(menu 內自動對齊 menu items 的字體）\n    // 沒有 context(standalone）→ fallback 'md' → text-body (14px)\n    const rowSize = useRowSize('md')\n    const descFont = rowSize === 'lg' ? 'text-body-lg' : 'text-body'\n\n    // Icon rendering: ReactElement → as-is;LucideIcon(component,包括 forwardRef 物件)→ 包 Avatar\n    // 注意:Lucide v0.577+ icons 是 forwardRef 物件(`typeof === 'object'`),不是 function。\n    // 必用 React.isValidElement 判斷 element vs component(typeof 會把 forwardRef 物件誤歸 object)。\n    let iconElement: React.ReactNode = null\n    if (icon) {\n      if (React.isValidElement(icon)) {\n        // disabled:自訂 element 同樣變淡(2026-07-07 補漏 — docblock/spec 無條件宣稱「icon glyph →\n        // fg-disabled」但原僅 LucideIcon 分支生效)。`contents` wrapper 不進 layout,[&_svg] token swap\n        // 只染 svg 系自訂 icon;非 svg(img 照片)不強制染色。\n        iconElement = disabled ? <span className=\"contents [&_svg]:!text-fg-disabled\">{icon}</span> : icon\n      } else {\n        const Icon = icon as LucideIcon\n        // disabled:glyph → fg-disabled([&_svg]:!… 蓋過 Avatar 內聯 color;circle bg 維持 muted)。icon 是文字一環,隨 disabled 變淡。\n        iconElement = <Avatar icon={Icon} size={48} color=\"neutral\" className={disabled ? '[&_svg]:!text-fg-disabled' : undefined} />\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn('flex flex-col items-center text-center', className)}\n        {...props}\n      >\n        {iconElement && (\n          <div className=\"mb-4\">{iconElement}</div>\n        )}\n        {title && (\n          <span className={cn('text-body-lg font-medium', disabled ? 'text-fg-disabled' : 'text-foreground')}>\n            {title}\n          </span>\n        )}\n        {description && (\n          <span\n            className={cn(\n              // 字體跟 RowSizeContext 對齊:sm/md = text-body (14px),lg = text-body-lg (16px)\n              // 在 menu 內自動對齊 menu items;standalone 時 fallback text-body\n              descFont,\n              disabled ? 'text-fg-disabled' : (title || action) ? 'text-fg-secondary' : 'text-fg-muted',\n              // Empty title 永遠 body-lg(16)→ 用 reading-lg token(label tier 決定)\n              title && 'mt-[var(--item-gap-label-desc-reading-lg)]',\n            )}\n          >\n            {description}\n          </span>\n        )}\n        {action && (\n          <div className=\"mt-6\">{action}</div>\n        )}\n      </div>\n    )\n  },\n)\nEmpty.displayName = 'Empty'\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 emptyMeta = {\n  component: 'Empty',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: ['text-fg-muted', 'text-fg-secondary', 'text-foreground', 'text-fg-disabled'],\n    ring: [],\n  },\n} as const\n\nexport { Empty }\n"],"names":[],"mappings":";;;;;AAuCA,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,MAAM,OAAO,aAAa,QAAQ,WAAW,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AAGpF,UAAM,UAAU,WAAW,IAAI;AAC/B,UAAM,WAAW,YAAY,OAAO,iBAAiB;AAKrD,QAAI,cAA+B;AACnC,QAAI,MAAM;AACR,UAAI,MAAM,eAAe,IAAI,GAAG;AAI9B,sBAAc,WAAW,oBAAC,QAAA,EAAK,WAAU,sCAAsC,gBAAK,IAAU;AAAA,MAChG,OAAO;AACL,cAAM,OAAO;AAEb,sBAAc,oBAAC,QAAA,EAAO,MAAM,MAAM,MAAM,IAAI,OAAM,WAAU,WAAW,WAAW,8BAA8B,OAAA,CAAW;AAAA,MAC7H;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,0CAA0C,SAAS;AAAA,QAChE,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,eACC,oBAAC,OAAA,EAAI,WAAU,QAAQ,UAAA,aAAY;AAAA,UAEpC,SACC,oBAAC,QAAA,EAAK,WAAW,GAAG,4BAA4B,WAAW,qBAAqB,iBAAiB,GAC9F,UAAA,MAAA,CACH;AAAA,UAED,eACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA;AAAA;AAAA,gBAGT;AAAA,gBACA,WAAW,qBAAsB,SAAS,SAAU,sBAAsB;AAAA;AAAA,gBAE1E,SAAS;AAAA,cAAA;AAAA,cAGV,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,UACC,oBAAC,OAAA,EAAI,WAAU,QAAQ,UAAA,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAItC;AACF;AACA,MAAM,cAAc;AAIb,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,UAAU;AAAA,EAC9B,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAC,iBAAiB,qBAAqB,mBAAmB,kBAAkB;AAAA,IAChF,MAAM,CAAA;AAAA,EAAC;AAEX;"}

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

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

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

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

package/dist/components/Empty/index.js

@@ -0,0 +1,6 @@
+import { Empty, emptyMeta } from "./empty.js";
+export {
+  Empty,
+  emptyMeta
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/Field/field-context.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { FieldMode, FieldVariant } from './field-types';
-export type { FieldMode, FieldVariant };
+import type { FieldMode, FieldVariant, FieldVariantInternal, FieldWidth } from './field-types';
+export type { FieldMode, FieldVariant, FieldVariantInternal, FieldWidth };
 export type FieldOrientation = 'vertical' | 'horizontal';
 export type FieldSize = 'sm' | 'md' | 'lg';
 export type FieldControlLayout = 'inline' | 'block';
@@ -13,8 +13,14 @@ export type FieldControlLayout = 'inline' | 'block';
  * - `'toolbar'`— Toolbar / Action bar inline Field(future,目前無 consumer)
  * - `'table-cell'`— DataTable cell-as-input substrate(取代 variant='naked' cell-detection
  *   heuristic;canonical metrics 由 surface 推導,不再 hardcode in Field consumer)
+ * - `'inline-edit'`(2026-07-17)— InlineEdit view 委派 surface。**唯一語義 = 委派控件 view 態
+ *   左 px 統一 `--field-px`(不繼承 tagPadding / avatar inset / bare-span 0px)**,讓 InlineEdit
+ *   固定 `-mx-[--field-px]` 對齊盒精準抵銷 → 值/tag/avatar 左緣落 label 左緣(x=0)。edit 態**不套**
+ *   本 surface(edit 完全繼承原 field,含 tagPadding — Jira 式)。對齊 Atlassian inline-edit
+ *   read-view「fixed negative margin + read=edit geometry by construction」。只 InlineEdit display
+ *   box 注入;DataTable cell(table-cell)/ 純表單(form)的 tagPadding + bare-span 完全不受影響。
  */
-type FieldSurface = 'form' | 'toolbar' | 'table-cell';
+type FieldSurface = 'form' | 'toolbar' | 'table-cell' | 'inline-edit';
 export interface FieldContextValue {
     id: string;
     /** a11y(2026-04-25):FieldLabel 渲染時若元素為 div-based role(combobox/slider
@@ -24,13 +30,19 @@ export interface FieldContextValue {
     descriptionId: string;
     errorId: string;
     mode: FieldMode;
-    /** 視覺外殼透傳(2026-05-05)。default = 含 border+bg;bare = 透明 variant,hover/focus reveal。
+    /** 視覺外殼透傳(2026-05-05)。default = 含 border+bg;naked = cell-as-input(edit×naked 自畫 border-based state machine;view×naked 用 transparent border 由 host cell 供邊框);`bare` 2026-07-09 退役;naked 2026-07-14 型別收窄至
+     *  FieldVariantInternal(@internal)— 公開 `<Field variant>` 只收 default,故本欄位維持 FieldVariant。
      *  child Field control 自動繼承,per-control prop override 可覆寫。詳 field-types.ts。 */
     variant: FieldVariant;
     disabled: boolean;
     required: boolean;
     invalid: boolean;
     size: FieldSize;
+    /** `size` 是被決定過的(consumer 顯式傳 / control 宣告偏好)還是 Field 的預設 md。
+     *  預設 md 不得壓過 control 自己宣告的 fallback —— 詳 useResolvedFieldSize 與 field.spec.md。 */
+    sizeExplicit: boolean;
+    /** Control 於掛載時宣告偏好尺寸(wrapper/HOC 遮蔽靜態 `fieldPreferredSize` 時的補位通道)。 */
+    registerPreferredSize?: (preferred: FieldSize) => void;
     orientation: FieldOrientation;
     controlLayout: FieldControlLayout;
     hasFieldWrapper: true;
@@ -74,4 +86,99 @@ export declare function TableScrollProvider({ isScrolling, children, }: {
     isScrolling: boolean;
     children: React.ReactNode;
 }): React.ReactElement;
+/**
+ * Resolve Field control size — 控件用此 helper 取代散落的 `sizeProp ?? fieldCtx?.size ?? 'md'`。
+ * 優先序:prop(caller 顯式)> FieldContext.size(真 <Field> wrapper)> surface-size(host 如 cell)> 'md'。
+ * 真 <Field> 永遠勝 host surface(安全序);cell 無 Field wrapper(fieldCtx=null)→ 自動接 surface-size,
+ * 漏傳 size 的新 cell 也字級一致。
+ */
+export declare function useResolvedFieldSize<T extends string = FieldSize>(sizeProp?: T | null, fallback?: T): T;
+/**
+ * Control 向外層 Field 宣告偏好尺寸(render-time)。靜態 `fieldPreferredSize` 只有在 control 是
+ * Field 的**直接子元件**時才偵測得到;包 wrapper / `React.memo` / HOC 會遮蔽它。本 hook 讓 control
+ * 在掛載時主動註冊,Field 的**控件槽高度**因此也能跟上(控件本身的尺寸則由 `useResolvedFieldSize`
+ * 同步解析,不等這次註冊)。
+ */
+export declare function useRegisterFieldPreferredSize(preferred?: FieldSize | null): void;
+/**
+ * Resolve Field control 的 **disabled** — 取代散落的 `disabledProp ?? fieldCtx?.disabled`(2026-06-08 SSOT)。
+ * 優先序:顯式 prop > FieldContext.disabled(`<Field disabled>` / `<Field mode="disabled">`)> false。
+ * **caller 必傳「未預設」的原始 prop**(沒傳 = undefined),否則 `disabled=false` 預設會吃掉 `??` fallback。
+ * DataTable cell 無 FieldContext(fieldCtx=null)→ 回 prop 或 false,行為與現況完全一致(inert)。
+ */
+export declare function useResolvedFieldDisabled(disabledProp?: boolean | null): boolean;
+/**
+ * Resolve Field control 的 **mode**(view / readonly / disabled / edit)— 2026-06-08 SSOT,統一兩派散落:
+ *   舊 Input 派 `modeProp ?? fieldCtx?.mode ?? (...)` → `<Field disabled>` 時 ctx.mode 仍 'edit',漏 disabled chrome。
+ *   舊 picker 派 `disabled ? 'disabled' : mode`(mode 預設 'edit')→ 完全不讀 fieldCtx.mode,`<Field mode="view">` 失效。
+ * 統一優先序(world-class:MUI FormControl disabled 完整 cascade + 顯式 prop 永遠最優先):
+ *   1. 顯式 mode prop(caller / DataTable cell 傳 mode="view")→ **永遠最優先**,故表格等顯式場景 inert
+ *   2. 有效 disabled(prop 或 `<Field disabled>`)→ 'disabled'(完整 disabled chrome)
+ *   3. FieldContext.mode(`<Field mode="view"/"readonly">`)→ 讓 mode cascade 真正生效
+ *   4. 本地 readOnly → 'readonly'
+ *   5. 'edit'
+ * cell:mode prop 必有 → step 1 命中、fieldCtx=null → 完全 inert(Δ=0)。`disabled` 傳已 resolve 的 boolean 或未預設 prop。
+ */
+export declare function useResolvedFieldMode({ mode, disabled, readOnly, }: {
+    mode?: FieldMode | null;
+    disabled?: boolean | null;
+    readOnly?: boolean;
+}): FieldMode;
+/**
+ * Resolve Field control 的 **variant**(default / naked 視覺外殼;`bare` 2026-07-09 退役)— 2026-06-08 SSOT。
+ * 優先序:顯式 prop > FieldContext.variant > 'default'。與既有各控件公式一字不差(Δ=0),統一以利 gate 強制。
+ * 2026-07-14 API 策展 E:入參 / 回傳 widen 為 FieldVariantInternal — naked 僅 DataTable cell-registry
+ * 經 @internal 通道傳入(公開 prop 型別 = FieldVariant,不含 naked)。
+ */
+export declare function useResolvedFieldVariant(variantProp?: FieldVariantInternal | null): FieldVariantInternal;
+/**
+ * Resolve Field control 的 **error/invalid** — 取代散落的 `errorProp || (fieldCtx?.invalid ?? false)`(2026-06-08 SSOT)。
+ * 自身 error prop **或** FieldContext.invalid(`<Field invalid>`)任一為真即 error。與既有公式一致(Δ=0)。
+ */
+export declare function useResolvedFieldInvalid(errorProp?: boolean): boolean;
+/**
+ * Host(non-Field-wrapper,如 DataTable cell)注 surface density size 給 child Field controls。
+ * 僅注 size 視覺訊號,不污染 FieldContext。Usage:cell-registry buildCellWithSurface。
+ */
+export declare function FieldSurfaceSizeProvider({ size, children, }: {
+    size: FieldSize;
+    children: React.ReactNode;
+}): React.ReactElement;
+export declare function FieldSurfaceEditableProvider({ isEditable, children, }: {
+    isEditable: boolean;
+    children: React.ReactNode;
+}): React.ReactElement;
+/**
+ * 空值顯示分流(2026-07-08 user 拍板,verbatim「...都用"-"...我從頭到尾哪裡有說要用全形的」):
+ *
+ * | 情境                                           | 空值顯示 |
+ * |------------------------------------------------|----------|
+ * | table-cell **可編輯** 的 view 靜止態        | **空白 `''`**(不佔位,affordance = hover outline)|
+ * | table-cell **不可編輯**(readonly cell)        | **半形 `-`** |
+ * | standalone view / readonly / form / toolbar | **半形 `-`** |
+ *
+ * 收斂式:`surface==='table-cell' && isEditable ? '' : EMPTY_DISPLAY`。
+ * 可編輯 form / edit 輸入框走 native placeholder(不經此 hook)。boolean → unchecked / disabled →
+ * 同上文字 + text-fg-disabled(M24),各控件自理。
+ * 世界級對照:table-cell blank = MUI X / AG Grid / Ant core / Notion / Airtable grid 域共識;
+ * 非 table `-` = Ant ProTable `columnEmptyText`(見 field-wrapper.tsx EMPTY_DISPLAY 註)。
+ * SSOT 條文 → field-controls.spec.md「null / undefined 值」;全 Field family view/readonly/disabled
+ * 空值渲染必經此 hook,禁直接引 EMPTY_DISPLAY 常數(genre 分流會漏)。
+ */
+export declare function useFieldEmptyDisplay(): string;
+/**
+ * 空值符號「-」顏色分流(2026-07-09 user 拍板 verbatim「「-」代表的是不可編輯只拿來供檢視的值
+ * 所以應該跟readonly 的value同樣顏色吧」):
+ *
+ * 「-」是「不可編輯、供檢視的值」→ 同 readonly value 色 = `text-foreground`
+ * (field-wrapper.tsx base `text-foreground`),**非** `text-fg-muted`(muted 是「可編輯 placeholder
+ * 提示」的裝飾語意;空值符號不是提示、是被檢視的值狀態)。
+ * disabled 態維持 `text-fg-disabled`(M24 disabled 顯著性 > foreground/muted,不可被蓋)。
+ *
+ * SSOT:全 Field family view/readonly/disabled 空值 span 消費此 helper,傳入已 resolve 的
+ * resolvedMode。純函式(非 hook)—— resolvedMode 已由 useResolvedFieldMode 解析(含控件自身
+ * disabled prop,context hook 讀不到);故以 resolvedMode 為入參,可條件呼叫、不受 Rules of Hooks 限制。
+ * 世界級對照:Ant read-only / Carbon read-only value = 正常前景色;placeholder 才 muted。
+ */
+export declare function fieldEmptyColorClass(resolvedMode: FieldMode): string;
 //# sourceMappingURL=field-context.d.ts.map

package/dist/components/Field/field-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-context.d.ts","sourceRoot":"","sources":["../../../src/components/Field/field-context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAG5D,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA;AACvC,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,YAAY,CAAA;AACxD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAC1C,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEnD;;;;;;;;;GASG;AACH,KAAK,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,CAAA;AAGrD,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAA;IACV;;wEAEoE;IACpE,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,SAAS,CAAA;IACf;mFAC+E;IAC/E,OAAO,EAAE,YAAY,CAAA;IACrB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,EAAE,SAAS,CAAA;IACf,WAAW,EAAE,gBAAgB,CAAA;IAC7B,aAAa,EAAE,kBAAkB,CAAA;IACjC,eAAe,EAAE,IAAI,CAAA;IACrB;;qDAEiD;IACjD,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAED,eAAO,MAAM,YAAY,yCAAsD,CAAA;AAE/E,uEAAuE;AACvE,wBAAgB,eAAe,IAAI,iBAAiB,GAAG,IAAI,CAE1D;AAgBD;;;;;;;;;GASG;AACH,wBAAgB,eAAe,IAAI,YAAY,CAK9C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,YAAY,CAAA;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,GAAG,KAAK,CAAC,YAAY,CAErB;AAkBD,wBAAgB,mBAAmB,IAAI,OAAO,CAE7C;AAED,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,QAAQ,GACT,EAAE;IACD,WAAW,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,GAAG,KAAK,CAAC,YAAY,CAErB"}
+{"version":3,"file":"field-context.d.ts","sourceRoot":"","sources":["../../../src/components/Field/field-context.ts"],"names":[],"mappings":"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"}

package/dist/components/Field/field-context.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { EMPTY_DISPLAY } from "./field-wrapper.js";
 const FieldContext = React.createContext(null);
 function useFieldContext() {
   return React.useContext(FieldContext);
@@ -26,12 +27,81 @@ function TableScrollProvider({
 }) {
   return React.createElement(TableScrollContext.Provider, { value: isScrolling }, children);
 }
+const FieldSurfaceSizeContext = React.createContext(null);
+function useResolvedFieldSize(sizeProp, fallback) {
+  const fieldCtx = React.useContext(FieldContext);
+  const surfaceSize = React.useContext(FieldSurfaceSizeContext);
+  const contextSize = fieldCtx && fieldCtx.sizeExplicit ? fieldCtx.size : void 0;
+  return sizeProp ?? contextSize ?? fallback ?? (fieldCtx == null ? void 0 : fieldCtx.size) ?? surfaceSize ?? "md";
+}
+function useRegisterFieldPreferredSize(preferred) {
+  const fieldCtx = React.useContext(FieldContext);
+  const register = fieldCtx == null ? void 0 : fieldCtx.registerPreferredSize;
+  React.useEffect(() => {
+    if (register) register(preferred);
+  }, [preferred, register]);
+}
+function useResolvedFieldDisabled(disabledProp) {
+  const fieldCtx = React.useContext(FieldContext);
+  return disabledProp ?? (fieldCtx == null ? void 0 : fieldCtx.disabled) ?? false;
+}
+function useResolvedFieldMode({
+  mode,
+  disabled,
+  readOnly
+}) {
+  const fieldCtx = React.useContext(FieldContext);
+  if (mode) return mode;
+  if ((disabled ?? (fieldCtx == null ? void 0 : fieldCtx.disabled)) === true) return "disabled";
+  if (fieldCtx == null ? void 0 : fieldCtx.mode) return fieldCtx.mode;
+  if (readOnly) return "readonly";
+  return "edit";
+}
+function useResolvedFieldVariant(variantProp) {
+  const fieldCtx = React.useContext(FieldContext);
+  return variantProp ?? (fieldCtx == null ? void 0 : fieldCtx.variant) ?? "default";
+}
+function useResolvedFieldInvalid(errorProp) {
+  const fieldCtx = React.useContext(FieldContext);
+  return Boolean(errorProp) || ((fieldCtx == null ? void 0 : fieldCtx.invalid) ?? false);
+}
+function FieldSurfaceSizeProvider({
+  size,
+  children
+}) {
+  return React.createElement(FieldSurfaceSizeContext.Provider, { value: size }, children);
+}
+const FieldSurfaceEditableContext = React.createContext(false);
+function FieldSurfaceEditableProvider({
+  isEditable,
+  children
+}) {
+  return React.createElement(FieldSurfaceEditableContext.Provider, { value: isEditable }, children);
+}
+function useFieldEmptyDisplay() {
+  const surface = useFieldSurface();
+  const isEditable = React.useContext(FieldSurfaceEditableContext);
+  return surface === "table-cell" && isEditable ? "" : EMPTY_DISPLAY;
+}
+function fieldEmptyColorClass(resolvedMode) {
+  return resolvedMode === "disabled" ? "text-fg-disabled" : "text-foreground";
+}
 export {
   FieldContext,
+  FieldSurfaceEditableProvider,
   FieldSurfaceProvider,
+  FieldSurfaceSizeProvider,
   TableScrollProvider,
+  fieldEmptyColorClass,
   useFieldContext,
+  useFieldEmptyDisplay,
   useFieldSurface,
+  useRegisterFieldPreferredSize,
+  useResolvedFieldDisabled,
+  useResolvedFieldInvalid,
+  useResolvedFieldMode,
+  useResolvedFieldSize,
+  useResolvedFieldVariant,
   useTableIsScrolling
 };
 //# sourceMappingURL=field-context.js.map