@qijenchen/design-system 0.1.0-beta.80 → 0.1.0-beta.82

package/dist/components/PeoplePicker/people-picker.js

@@ -9,7 +9,7 @@ import { Avatar } from "../Avatar/avatar.js";
 import { Tag } from "../Tag/tag.js";
 import { Select } from "../Select/select.js";
 import { Combobox } from "../Combobox/combobox.js";
-import { MultiPersonDisplay, PersonDisplay, resolvePerson, buildPersonProfileCard, PersonAvatarTag } from "./person-display.js";
+import { resolvePerson, MultiPersonDisplay, PersonDisplay, buildPersonProfileCard, PersonAvatarTag } from "./person-display.js";
 import { getAvatarStackVisibleCount, AVATAR_STACK_AVATAR_PX, AVATAR_STACK_OVERFLOW_CHIP_PX } from "./avatar-stack-overflow.js";
 import { findPerson, personToSelectOption, getPeoplePickerTagWrapperClass } from "./people-picker-helpers.js";
 import { PEOPLE_PICKER_LENGTH1_WRAPPER_CLASS } from "./people-picker-helpers.js";
@@ -45,6 +45,38 @@ const PeoplePicker = React.forwardRef(function PeoplePicker2({
   const resolvedVariant = useResolvedFieldVariant(variantProp);
   const isMulti = Array.isArray(value);
   const isEmpty = !value || isMulti && value.length === 0;
+  const selectedNames = !value ? [] : Array.isArray(value) ? value.map((v) => resolvePerson(v).name) : [resolvePerson(value).name];
+  const stackContainerRef = React.useRef(null);
+  const [stackVisibleCount, setStackVisibleCount] = React.useState(void 0);
+  React.useLayoutEffect(() => {
+    if (resolvedMode !== "edit" || !isMulti || multiDisplay !== "stack" || selectedNames.length <= 1) {
+      setStackVisibleCount(void 0);
+      return;
+    }
+    const root = stackContainerRef.current;
+    if (!root) return;
+    const calc = () => {
+      const trigger = root.matches('[role="combobox"]') ? root : root.querySelector('[role="combobox"]');
+      const tagArea = trigger == null ? void 0 : trigger.querySelector('div[class*="flex-1"][class*="min-w-0"]');
+      const available = (tagArea == null ? void 0 : tagArea.clientWidth) ?? (trigger == null ? void 0 : trigger.clientWidth) ?? 0;
+      const visible = getAvatarStackVisibleCount({
+        availablePx: available,
+        total: selectedNames.length,
+        avatarPx: AVATAR_STACK_AVATAR_PX[size],
+        overflowChipPx: AVATAR_STACK_OVERFLOW_CHIP_PX[size]
+      });
+      setStackVisibleCount(visible);
+    };
+    calc();
+    const ro = new ResizeObserver(calc);
+    ro.observe(root);
+    return () => ro.disconnect();
+  }, [resolvedMode, isMulti, multiDisplay, selectedNames.length, size]);
+  const mergedStackRef = React.useCallback((el) => {
+    stackContainerRef.current = el;
+    if (typeof ref === "function") ref(el);
+    else if (ref) ref.current = el;
+  }, [ref]);
   if (resolvedMode === "display") {
     if (!showDisplayEndIcon) {
       if (isEmpty) return /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: EMPTY_DISPLAY });
@@ -80,7 +112,6 @@ const PeoplePicker = React.forwardRef(function PeoplePicker2({
       }
     );
   }
-  const selectedNames = !value ? [] : Array.isArray(value) ? value.map((v) => resolvePerson(v).name) : [resolvePerson(value).name];
   if (!isMulti) {
     const handleSingleChange = (name) => onChange == null ? void 0 : onChange([findPerson(people, name)]);
     return /* @__PURE__ */ jsx(
@@ -94,6 +125,7 @@ const PeoplePicker = React.forwardRef(function PeoplePicker2({
         onChange: handleSingleChange,
         searchable: true,
         placeholder,
+        emptyText,
         defaultOpen,
         onOpenChange,
         className,
@@ -119,7 +151,7 @@ const PeoplePicker = React.forwardRef(function PeoplePicker2({
         searchable: true,
         searchPlaceholder,
         placeholder,
-        emptyPlaceholder: emptyText,
+        emptyText,
         wrap: pillWrap,
         defaultOpen,
         onOpenChange,
@@ -146,37 +178,6 @@ const PeoplePicker = React.forwardRef(function PeoplePicker2({
   const handleMultiChange = (next) => {
     onChange == null ? void 0 : onChange(next.map((name) => findPerson(people, name)));
   };
-  const stackContainerRef = React.useRef(null);
-  const [stackVisibleCount, setStackVisibleCount] = React.useState(void 0);
-  React.useLayoutEffect(() => {
-    if (!isMulti || selectedNames.length <= 1) {
-      setStackVisibleCount(void 0);
-      return;
-    }
-    const root = stackContainerRef.current;
-    if (!root) return;
-    const calc = () => {
-      const trigger = root.matches('[role="combobox"]') ? root : root.querySelector('[role="combobox"]');
-      const tagArea = trigger == null ? void 0 : trigger.querySelector('div[class*="flex-1"][class*="min-w-0"]');
-      const available = (tagArea == null ? void 0 : tagArea.clientWidth) ?? (trigger == null ? void 0 : trigger.clientWidth) ?? 0;
-      const visible = getAvatarStackVisibleCount({
-        availablePx: available,
-        total: selectedNames.length,
-        avatarPx: AVATAR_STACK_AVATAR_PX[size],
-        overflowChipPx: AVATAR_STACK_OVERFLOW_CHIP_PX[size]
-      });
-      setStackVisibleCount(visible);
-    };
-    calc();
-    const ro = new ResizeObserver(calc);
-    ro.observe(root);
-    return () => ro.disconnect();
-  }, [isMulti, multiDisplay, selectedNames.length, size]);
-  const mergedStackRef = React.useCallback((el) => {
-    stackContainerRef.current = el;
-    if (typeof ref === "function") ref(el);
-    else if (ref) ref.current = el;
-  }, [ref]);
   return /* @__PURE__ */ jsx(
     Combobox,
     {
@@ -190,7 +191,7 @@ const PeoplePicker = React.forwardRef(function PeoplePicker2({
       searchIn,
       searchPlaceholder,
       placeholder,
-      emptyPlaceholder: emptyText,
+      emptyText,
       wrap: false,
       defaultOpen,
       onOpenChange,
@@ -251,7 +252,8 @@ const peoplePickerMeta = {
   family: 4,
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 'active' 移除 — trigger 走 Field chrome、menu 走 MenuItem,皆無自有按壓視覺(2026-07-07 詞彙統一 DS-wide 按壓訊號盤點:檔內 0 active: utility / 0 *-active token)。
+  states: ["default", "hover", "focus-visible", "disabled"],
   tokens: {
     bg: [],
     fg: ["text-fg-disabled", "text-fg-muted"],

package/dist/components/PeoplePicker/people-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"people-picker.js","sources":["../../../src/components/PeoplePicker/people-picker.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\n// @placeholder-vocabulary-allow: 1-cycle backward-compat — `placeholder` 已加(trigger empty SSOT),`emptyPlaceholder={emptyText}` forward 仍保留讓既有 consumer 不被 silent break;Combobox line 760 `placeholder ?? emptyPlaceholder` fallback → placeholder 永遠 takes precedence。Future cycle 移除 emptyPlaceholder forward(per field-controls.spec.md 共享 contract b)。\n// @cell-metric-escape-allow: comment describes RETIRED `tagAreaPaddingLeftPx={8}` magic — current code is surface-guarded (`surface === 'form'` only injects `!px-[var(--field-px)]`; table-cell context untouched, lets naked `!px-[var(--table-cell-px)]` SSOT take over). Hook regex grep'd the comment word, not the live code path. Per (a) fix 2026-05-13 user-approved Path a.\nimport * as React from 'react'\nimport { ChevronDown } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant } from '@/design-system/components/Field/field-types'\nimport { fieldWrapperStyles, EMPTY_DISPLAY, nakedCellRowModeAlign } from '@/design-system/components/Field/field-wrapper'\nimport { ItemSuffix } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { useFieldSurface, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldVariant } from '@/design-system/components/Field/field-context'\nimport { Avatar } from '@/design-system/components/Avatar/avatar'\nimport { Tag } from '@/design-system/components/Tag/tag'\nimport { Select } from '@/design-system/components/Select/select'\nimport { Combobox } from '@/design-system/components/Combobox/combobox'\nimport { PersonDisplay, MultiPersonDisplay, PersonAvatarTag, buildPersonProfileCard, resolvePerson, type PersonValue } from './person-display'\nimport {\n  getAvatarStackVisibleCount,\n  AVATAR_STACK_AVATAR_PX,\n  AVATAR_STACK_OVERFLOW_CHIP_PX,\n} from './avatar-stack-overflow'\n// Pure helpers extracted to sibling for file-size budget(2026-05-18,P1 ≤ 500 lines)。\n// 不消費 component closure 的純 constant / 純 mapping function 全部搬走,主檔保留 SSOT-bearing\n// render logic(消費 Combobox / Select / state 等 closure 的部分)。\n// SSOT primitive re-export(backward-compat 對外 import 路徑保持 `./people-picker`)。\nimport {\n  PEOPLE_PICKER_LENGTH1_WRAPPER_CLASS,\n  getPeoplePickerTagWrapperClass,\n  personToSelectOption,\n  findPerson,\n} from './people-picker-helpers'\nimport { ICON_SIZE } from '@/design-system/tokens/uiSize/icon-size'\nexport { PEOPLE_PICKER_LENGTH1_WRAPPER_CLASS, getPeoplePickerTagWrapperClass }\n\n// ── PeoplePicker ────────────────────────────────────────────────────────────\n// **2026-05-07 v15.6 SSOT 重構 v2**:\n//\n//   - **single mode** wraps `<Select searchable selectedItemRenderer>`\n//   - **multi mode** 兩種 displayMode(consumer 自選),**皆 wrap `<Combobox>`**(同 SSOT,\n//     差別在 tagRenderer 視覺):\n//       - **'stack'**(default,baseline 既有視覺)— Avatar 疊合 + `+N` overflow indicator,\n//         不可 wrap。tagRenderer 渲染 avatar stack(visible count 走 shared `avatar-stack-overflow`\n//         primitive deterministic formula,2026-05-15 Bug 3 fix;display 路徑 `<MultiPersonDisplay>` 同 primitive)。\n//         對齊 Notion / Linear / Atlassian / Slack 多人 quick-glance idiom。\n//       - **'pill'**(opt-in)— 每人 Tag pill,可 wrap。Wrap `<Combobox tagRenderer>`,\n//         tagRenderer 用 Tag 元件 `avatar` prop SSOT(不塞 children)。\n//         `pillShowAvatar` 控 pill 內是否顯 avatar prefix(default true,false → 純文字 pill)。\n//         對齊 GitHub Reviewers / Combobox tag-input idiom。\n\n// **codex P2 fix(2026-05-07 v15.10)**:`extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>`\n// 讓 consumer 可傳 `id` / `data-testid` / `onBlur` / `onFocus` / `aria-*` 等 HTML root props,\n// component 內部 `...rest` forward 到 trigger 容器(對齊 DS 既有 Combobox / Select 慣例)。\n// `onChange` 衝突走 Omit(本 component 用 PersonValue[] custom signature)。\nexport interface PeoplePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Field mode(edit / display / readonly / disabled),默認 inherit Field context 或 'edit' */\n  mode?: FieldMode\n  /** Field chrome variant(對齊 Select / Combobox)*/\n  variant?: FieldVariant\n  size?: 'sm' | 'md' | 'lg'\n  /** 當前已選的人(單選 PersonValue,多選 PersonValue[])*/\n  value?: PersonValue | PersonValue[] | null\n  /** 值變更 callback(永遠 emit array — single mode 取 [0] 即 single value)*/\n  onChange?: (value: PersonValue[]) => void\n  /** 可選人員清單(edit mode 下拉顯示)*/\n  people?: PersonValue[]\n  /** 2026-05-12 Stream C Issue 4 fix(codex Q3 Cluster C):trigger empty placeholder。\n   *  Default '請選擇人員'。**禁** 將 `emptyText`(search-empty)當 trigger placeholder 傳。 */\n  placeholder?: string\n  /** 搜尋框 placeholder */\n  searchPlaceholder?: string\n  /** 搜尋無結果訊息(filtered menu empty)。**僅**用於 SelectMenu noResultsText,\n   *  不再 silent 轉 trigger placeholder(2026-05-12 Issue 4 semantic fix)。 */\n  emptyText?: string\n  className?: string\n  disabled?: boolean\n  /** Initial open state(uncontrolled)*/\n  defaultOpen?: boolean\n  /** open state 變更 callback */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Multi mode 顯示樣式(default 'stack')。Single mode 此 prop 忽略。\n   * - 'stack' — Avatar 疊合 + `+N`(空間省、不可 wrap;default)\n   * - 'pill'  — 每人 Tag pill(可 wrap)\n   */\n  multiDisplay?: 'stack' | 'pill'\n  /**\n   * `multiDisplay='pill'` 模式下是否顯示 avatar prefix(default true)。\n   * 設 false → 純文字 pill,進一步節省空間。對齊 Tag 元件 `avatar` prop SSOT。\n   */\n  pillShowAvatar?: boolean\n  /** Pill 模式下是否允許 wrap(default true)— 對齊 Combobox `wrap` prop */\n  pillWrap?: boolean\n  /**\n   * 搜尋型態(2026-05-12 規則 3 ship,3-mode SSOT 對齊 A1-A5 spec):\n   * - `'menu'`(default,backward-compat)— 浮層內搜尋(panel-top search)\n   * - `'trigger'`(multi 模式 opt-in)— inline 搜尋(浮層開時 name 拿掉,avatar 後接 input cursor,\n   *   類 Combobox inline-trigger idiom)\n   * Single mode 永遠 inline-trigger(wrap Select searchable 直接走 inline),此 prop multi 才有意義。\n   */\n  searchIn?: 'menu' | 'trigger'\n  /**\n   * Display 是否渲 ChevronDown + Field naked wrapper(D-path opt-in,2026-05-08)\n   * — DataTable cell display↔edit 像素級對齊用。預設 false(裸 PersonDisplay,backward compat)。\n   * 設 true 時 display 走 fieldWrapperStyles(naked variant)+ ItemSuffix ChevronDown,\n   * 與 edit (Select / Combobox wrapped) 同 DOM 結構,消除 Layer-B padding mismatch。\n   */\n  showDisplayEndIcon?: boolean\n  /** a11y label */\n  'aria-label'?: string\n}\n\nconst PeoplePicker = React.forwardRef<HTMLDivElement, PeoplePickerProps>(function PeoplePicker({\n  mode: modeProp,\n  variant: variantProp,\n  size: sizeProp,\n  value,\n  onChange,\n  people = [],\n  placeholder = '請選擇人員', // i18n-allow: DS default(2026-05-12 Stream C Issue 4)\n  searchPlaceholder = '搜尋人員…', // i18n-allow: DS default\n  emptyText = '沒有符合的人員', // i18n-allow: DS default — only for SelectMenu noResultsText\n  className,\n  disabled: disabledProp,\n  defaultOpen = false,\n  onOpenChange,\n  multiDisplay = 'stack',\n  pillShowAvatar = true,\n  pillWrap = true,\n  searchIn = 'menu',\n  showDisplayEndIcon = false,\n  'aria-label': ariaLabel,\n  ...rest\n}, ref) {\n  const surface = useFieldSurface()\n  const size = useResolvedFieldSize(sizeProp)  // B 組 cascade fix\n  const disabled = useResolvedFieldDisabled(disabledProp)\n  // 2026-06-08 SSOT:mode/disabled/variant 統一經 helper;修 <Field disabled> 漏 cascade(原只讀 fieldCtx.mode)\n  const resolvedMode: FieldMode = useResolvedFieldMode({ mode: modeProp, disabled })\n  const resolvedVariant: FieldVariant = useResolvedFieldVariant(variantProp)\n  const isMulti = Array.isArray(value)\n  const isEmpty = !value || (isMulti && value.length === 0)\n\n  // ── mode='display' ────────────────────────────────────────────────────────\n  // Default(showDisplayEndIcon=false):裸 PersonDisplay / MultiPersonDisplay — backward compat。\n  // Opt-in(showDisplayEndIcon=true,2026-05-08 D-path):Field naked wrapper + ItemSuffix ChevronDown,\n  // 與 edit (Select / Combobox wrapped) 同 DOM 結構消除 cell display↔edit 像素偏移。\n  if (resolvedMode === 'display') {\n    if (!showDisplayEndIcon) {\n      if (isEmpty) return <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>\n      return isMulti\n        ? <MultiPersonDisplay value={value as PersonValue[]} size={size} measured />\n        : <PersonDisplay value={value as PersonValue} size={size} />\n    }\n    // 2026-05-18 改 import ICON_SIZE SSOT(per user『做完』approval,消除 M17 違反 7+ 重複 ternary)\n  const iconSize = ICON_SIZE[size as 'sm' | 'md' | 'lg']\n    return (\n      <div\n        className={cn(fieldWrapperStyles({ mode: 'display', variant: resolvedVariant, size }), className)}\n        data-field-mode=\"display\"\n      >\n        <span className={cn('flex-1 min-w-0 inline-flex items-center', nakedCellRowModeAlign)}>\n          {isEmpty\n            ? <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>\n            : isMulti\n              ? <MultiPersonDisplay value={value as PersonValue[]} size={size} measured />\n              : <PersonDisplay value={value as PersonValue} size={size} />}\n        </span>\n        <ItemSuffix className=\"pointer-events-none\">\n          <ChevronDown size={iconSize} className=\"shrink-0 text-fg-muted\" aria-hidden />\n        </ItemSuffix>\n      </div>\n    )\n  }\n\n  // ── readonly / disabled — Field wrapper chrome,Avatar 視覺保留 ───────────\n  if (resolvedMode !== 'edit') {\n    return (\n      <div\n        ref={ref}\n        className={cn(fieldWrapperStyles({ mode: resolvedMode, variant: resolvedVariant, size }), className)}\n        data-field-mode={resolvedMode}\n        aria-disabled={resolvedMode === 'disabled' ? true : undefined}\n        aria-label={ariaLabel}\n        {...rest}\n      >\n        <span className={cn('flex-1 min-w-0 inline-flex items-center', nakedCellRowModeAlign, resolvedMode === 'disabled' && 'text-fg-disabled')}>\n          {isEmpty\n            ? <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>\n            : isMulti\n              ? <MultiPersonDisplay value={value as PersonValue[]} size={size} measured />\n              : <PersonDisplay value={value as PersonValue} size={size} />}\n        </span>\n        {/* 2026-06-26 類型身份 indicator:edit 顯示 / readonly 不顯示 / disabled 保留(fg-disabled,對齊原生 <select disabled>);naked cell 依 showDisplayEndIcon */}\n        {(resolvedVariant === 'naked' ? showDisplayEndIcon : resolvedMode === 'disabled') && (\n          <ItemSuffix className=\"pointer-events-none\">\n            <ChevronDown size={ICON_SIZE[size as 'sm' | 'md' | 'lg']} className={cn('shrink-0', resolvedMode === 'disabled' ? 'text-fg-disabled' : 'text-fg-muted')} aria-hidden />\n          </ItemSuffix>\n        )}\n      </div>\n    )\n  }\n\n  // ── edit mode ─────────────────────────────────────────────────────────────\n  const selectedNames: string[] = !value\n    ? []\n    : Array.isArray(value)\n      ? value.map(v => resolvePerson(v).name)\n      : [resolvePerson(value).name]\n\n  // ── single mode → wraps Select ────────────────────────────────────────────\n  if (!isMulti) {\n    const handleSingleChange = (name: string) => onChange?.([findPerson(people, name)])\n    return (\n      <Select\n        ref={ref as React.Ref<HTMLDivElement>}\n        size={size}\n        variant={resolvedVariant}\n        options={people.map(personToSelectOption)}\n        value={selectedNames[0] ?? null}\n        onChange={handleSingleChange}\n        searchable\n        placeholder={placeholder}\n        // 2026-05-12 Stream C Issue 4 fix(codex Q3):傳 `placeholder` 給 Select trigger empty。\n        // 不再傳 `emptyText`(search-empty semantic 跟 trigger-empty 分離,canonical SSOT)。\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        className={className}\n        aria-label={ariaLabel}\n        selectedItemRenderer={(opt) => <PersonDisplay value={findPerson(people, opt.value)} size={size} />}\n        // **codex P2 forward**:Select extends `SelectHTMLAttributes<HTMLSelectElement>`,\n        // event handler element 型別跟 PeoplePicker `HTMLAttributes<HTMLDivElement>` 不一致\n        // (`onCopy` / `onChange` 等)。Runtime spread 等效 — DOM 收到 attrs 不挑剔。\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        // any-allow: rest 含 `onChange: FormEventHandler` 跟 Select onChange signature 衝突 — DOM runtime spread 安全(per codex P2 forward)\n        {...(rest as any)}\n      />\n    )\n  }\n\n  // ── multi 'pill' → wraps Combobox(對齊 GitHub Reviewers / Combobox idiom)────\n  if (multiDisplay === 'pill') {\n    const handleMultiChange = (next: string[]) => {\n      onChange?.(next.map(name => findPerson(people, name)))\n    }\n    return (\n      <Combobox\n        ref={ref as React.Ref<HTMLDivElement>}\n        size={size}\n        variant={resolvedVariant}\n        options={people.map(personToSelectOption)}\n        value={selectedNames}\n        onChange={handleMultiChange}\n        searchable\n        searchPlaceholder={searchPlaceholder}\n        // 2026-05-12 Stream C Issue 4(codex Q3):placeholder = trigger empty hint('請選擇人員')\n        // — semantic clean separation;emptyText 不再 silent 轉 trigger placeholder。\n        // emptyPlaceholder backward-compat forward(Combobox line 760 `placeholder ?? emptyPlaceholder` fallback)\n        // 1 cycle:future 移除 emptyPlaceholder forward,emptyText 改傳 SelectMenu noResultsText。\n        placeholder={placeholder}\n        emptyPlaceholder={emptyText}\n        wrap={pillWrap}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        className={className}\n        aria-label={ariaLabel}\n        // codex P2 forward(see Select branch comment for type-cast rationale)\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        // any-allow: rest 含 `onChange: FormEventHandler` 跟 Combobox onChange signature 衝突 — DOM runtime spread 安全(per codex P2 forward)\n        {...(rest as any)}\n        // **Tag SSOT canonical**:用 `avatar` prop(不塞 children),Tag 內部統一\n        // wrap 進 16×16 圓形 mask container(per Tag tsx line 175)。\n        tagRenderer={(item, onRemove) => {\n          const p = resolvePerson(findPerson(people, item.value))\n          return (\n            <Tag\n              key={item.value}\n              size={size}\n              color=\"neutral\"\n              // 2026-05-18 7B' fix(per user 拍板「執行」+ Codex Round 3 共識,paired with Combobox L286):\n              // 拿掉 `unbounded` 對齊 Tag canonical max-w-40 cap + 內建 ellipsis。PeoplePicker pill 走\n              // Combobox tagRenderer slot,SSOT = Tag primitive 視覺(per codex Round 3 verdict)。\n              // 人名 99% < 25 chars 不觸發 cap;極端長名(複數姓 + middle name)觸發 ellipsis 是合理 UX。\n              avatar={pillShowAvatar\n                ? <Avatar src={p.avatarUrl} alt={p.name} size={16} hoverCard={buildPersonProfileCard(p)} />\n                : undefined}\n              onRemove={onRemove}\n            >\n              {p.name}\n            </Tag>\n          )\n        }}\n      />\n    )\n  }\n\n  // ── multi 'stack' (default) → wraps Combobox 跟 pill mode 同 SSOT,差別在 tagRenderer 視覺。\n  //\n  // **2026-05-15 Bug 3 fix(Claude+Codex Step 5 比稿 consensus)**:visible count 走 shared\n  // `avatar-stack-overflow` primitive deterministic formula(取代 Combobox DOM offsetWidth-based\n  // useOverflowCount + 60px fallback 不 deterministic),pass override 給 Combobox bypass internal\n  // measurement。`MultiPersonDisplay`(display path)同 primitive,display + edit 結果一致。\n  // 對齊 user verbatim SSOT「同 cell width 同 overflow 判斷」+ codex Q3 consensus shared primitive。\n  const handleMultiChange = (next: string[]) => {\n    onChange?.(next.map(name => findPerson(people, name)))\n  }\n  // SSOT visible count compute via formula primitive + ResizeObserver\n  const stackContainerRef = React.useRef<HTMLDivElement | null>(null)\n  const [stackVisibleCount, setStackVisibleCount] = React.useState<number | undefined>(undefined)\n  React.useLayoutEffect(() => {\n    // 注:此 effect 只在 multi stack mode 跑(early return if not stack);length<=1 不需 override\n    if (!isMulti || selectedNames.length <= 1) {\n      setStackVisibleCount(undefined); return\n    }\n    const root = stackContainerRef.current\n    if (!root) return\n    // 2026-05-15 ROOT CAUSE FIX(user 抓「之前說的問題都還是存在」):\n    // stackContainerRef 透過 mergedStackRef 接 Combobox forwarded ref → root **就是** [role=combobox]\n    // div 自己。原 `root.querySelector('[role=combobox]')` 不找 self 永遠 null → trigger=null →\n    // tagArea=null → available=0 → setStackVisibleCount(0) → 整 stack 全 overflow → fallback 到\n    // Combobox DOM-based useOverflowCount(非 deterministic 那個算法)。修:用 root 自己當 trigger,\n    // 從 root 內找 tagArea(flex-1 min-w-0 div)。\n    const calc = () => {\n      const trigger = root.matches('[role=\"combobox\"]') ? root : root.querySelector<HTMLElement>('[role=\"combobox\"]')\n      const tagArea = trigger?.querySelector<HTMLElement>('div[class*=\"flex-1\"][class*=\"min-w-0\"]')\n      const available = tagArea?.clientWidth ?? trigger?.clientWidth ?? 0\n      const visible = getAvatarStackVisibleCount({\n        availablePx: available,\n        total: selectedNames.length,\n        avatarPx: AVATAR_STACK_AVATAR_PX[size],\n        overflowChipPx: AVATAR_STACK_OVERFLOW_CHIP_PX[size],\n      })\n      setStackVisibleCount(visible)\n    }\n    calc()\n    const ro = new ResizeObserver(calc)\n    ro.observe(root)\n    return () => ro.disconnect()\n  }, [isMulti, multiDisplay, selectedNames.length, size])\n  // Merge ref:forward to parent + capture for ResizeObserver\n  const mergedStackRef = React.useCallback((el: HTMLDivElement | null) => {\n    stackContainerRef.current = el\n    if (typeof ref === 'function') ref(el)\n    else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = el\n  }, [ref])\n\n  return (\n    <Combobox\n      ref={mergedStackRef}\n      size={size}\n      variant={resolvedVariant}\n      options={people.map(personToSelectOption)}\n      value={selectedNames}\n      onChange={handleMultiChange}\n      searchable\n      searchIn={searchIn}\n      searchPlaceholder={searchPlaceholder}\n      // 2026-05-12 Stream C Issue 4(codex Q3):placeholder = trigger empty('請選擇人員');emptyText = search-empty(僅 backward-compat forward 1 cycle)\n      placeholder={placeholder}\n      emptyPlaceholder={emptyText}\n      wrap={false}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      // 2026-05-13 (a) fix(user 拍 Path a + Layer A density-drift root-cause):\n      // 撤掉 `tagAreaPaddingLeftPx={8}` magic — Combobox `tagPadding[size]` 是 density-dependent\n      // calc 公式(`(field-height - icon-size) / 2`),只在 md size + default density 才 = 4px;\n      // 其他 size/density 漂 6px / 8px → 4+8=12 spec 公式不成立。\n      // (a) fix:form context + 有 tag → 改 inject `!px-[var(--field-px)]`(固定 12px)直接 override `tagPadding[size]`,\n      // 達成 GitHub PeoplePicker fixed 12px inset(對齊 cell context 同 13px from cell.left 含 1px border)。\n      // - form + 有 tag → `!px-[var(--field-px)]`(12px 固定 inset)+ tagAreaPaddingLeftPx undefined → field.padL=12 ✓\n      // - table-cell + 有 tag → naked variant `!px-[var(--table-cell-px)]` 已是 12px,不 inject ✓\n      // - isEmpty → 不 inject,走 Combobox 預設文字 inset(`tagPadding[size]` 公式自然 vertical center)\n      className={cn(className, !isEmpty && surface === 'form' && '!px-[var(--field-px)]')}\n      aria-label={ariaLabel}\n      // 2026-05-15 Bug 1 fix(Claude+Codex Step 5 比稿 consensus,user verbatim「就 A」):per-length 動態\n      // wrapper class — length=1 降階單人視覺需要 width constraint chain(`flex-1 min-w-0 overflow-hidden`),\n      // length>=2 stack 視覺保留 overlap(`-ml-0.5 first:ml-0 relative inline-flex group/avatar`)。對齊\n      // spec.md §C row 1(length=1 = avatar+人名+ellipsis)+ §D row 1(length>=2 = stack overlap)。\n      // 真根因:Combobox `OverflowTagList` 把所有 tagRenderer 結果包 `shrink-0`,加 `inline-flex` 後\n      // wrapper 變 intrinsic content-width → PersonDisplay `w-full` resolves to intrinsic → truncate 無效。\n      // 修法:length=1 wrapper 改 `flex-1 min-w-0 overflow-hidden` 提供 width constraint 給 PersonDisplay。\n      // SSOT helper `getPeoplePickerTagWrapperClass(count)` 集中,future 改 wrapper 行為改一處。\n      tagWrapperClassName={getPeoplePickerTagWrapperClass(selectedNames.length)}\n      // 2026-05-16 真 root cause fix:overflow chip wrapper 套同 `-ml-0.5` 讓 chip 物理上\n      // 跟 avatar 同 slot(等寬同 step,non-overlapping 多 24px 區塊不再 saw)。對齊 user\n      // 「avatars 和 +N 都是同尺寸圓形,空間最多容固定數量圓形」物理模型 directive +\n      // MUI AvatarGroup / Primer AvatarStack 共識(`AvatarGroup.js` L54-59 same negative margin)。\n      overflowWrapperClassName=\"-ml-0.5 first:ml-0 relative inline-flex\"\n      tagAreaGapPx={0}\n      tagAreaPaddingLeftPx={undefined}\n      // 2026-05-12 Round 7 fix(user 抓 image 2「+N tag 應該圓形不是矩形」+ 對齊 GitHub picker idiom):\n      // Combobox default `overflowShape='tag'`(矩形 chip,文字 Combobox 慣例);PeoplePicker stack\n      // mode pass `'circle'`(圓形 avatar-shape,跟 avatar 一樣大)。對齊 MultiPersonDisplay readonly path\n      // 既有 OverflowIndicator default 'circle' SSOT。\n      overflowShape=\"circle\"\n      // 2026-05-15 Bug 3 fix:formula-based visible count override(避免 Combobox DOM measurement +\n      // 60px fallback 不 deterministic)。SSOT in `./avatar-stack-overflow.ts`,display + edit 共用。\n      visibleCountOverride={stackVisibleCount}\n      // 2026-05-14 I4 fix(per codex+Layer A 共識):hidden items 在 `+N` overflow popover 顯\n      // Tag with avatar(對齊 display MultiPersonDisplay popover SSOT,user 抓 display vs edit\n      // overflow 視覺不一致)。\n      renderHiddenTag={(item) => {\n        const p = resolvePerson(findPerson(people, item.value))\n        return (\n          <Tag\n            key={item.value}\n            color=\"neutral\"\n            size=\"sm\"\n            avatar={\n              <Avatar\n                src={p.avatarUrl}\n                alt={p.name}\n                size={16}\n                hoverCard={buildPersonProfileCard(p)}\n              />\n            }\n            onRemove={() => {\n              onChange?.(selectedNames.filter(n => n !== item.value).map(n => findPerson(people, n)))\n            }}\n          >\n            {p.name}\n          </Tag>\n        )\n      }}\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      // any-allow: rest 含 `onChange: FormEventHandler` 跟 Combobox onChange signature 衝突 — DOM runtime spread 安全(per codex P2 forward)\n      {...(rest as any)}\n      tagRenderer={(item, onRemove) => {\n        const p = resolvePerson(findPerson(people, item.value))\n        // 2026-05-12 Q2 fix(user 拍板「multi 只選 1 人時 trigger = avatar + name,跟 single mode 同」):\n        // selectedNames.length === 1 → PersonDisplay(avatar + name)代替 PersonAvatarTag(avatar only)。\n        // SSOT 對齊 PeoplePicker single mode line 201 selectedItemRenderer。多選 1 人時視覺等同單選,\n        // 只在 length > 1 才走 stack(各 avatar 純 chip)。多選 + inline 搜尋場景拿掉 name 改 cursor\n        // 走 `searchIn='trigger'` opt-in(2026-05-12 規則 3 ship,已轉傳 Combobox;default 'menu' 走 panel-top search)。\n        if (selectedNames.length === 1) {\n          return <PersonDisplay key={item.value} value={p} size={size} />\n        }\n        return (\n          <PersonAvatarTag\n            key={item.value}\n            person={p}\n            size={size}\n            onRemove={onRemove}\n          />\n        )\n      }}\n    />\n  )\n})\nPeoplePicker.displayName = 'PeoplePicker'\n\n// Story auto-compile metadata\nexport const peoplePickerMeta = {\n  component: 'PeoplePicker',\n  family: 4,\n  variants: {},\n  sizes: {},\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: ['text-fg-disabled', 'text-fg-muted'],\n    ring: [],\n  },\n} as const\n\nexport { PeoplePicker }\n"],"names":["PeoplePicker","handleMultiChange"],"mappings":"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"}
+{"version":3,"file":"people-picker.js","sources":["../../../src/components/PeoplePicker/people-picker.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\n// @placeholder-vocabulary-allow: 2026-07-04 Q4 完成 field-controls.spec.md 共享 contract b — emptyPlaceholder forward 已移除,emptyText 直達 Combobox → SelectMenu emptyText(search-empty 真住所);placeholder 為 trigger empty SSOT。\n// @cell-metric-escape-allow: comment describes RETIRED `tagAreaPaddingLeftPx={8}` magic — current code is surface-guarded (`surface === 'form'` only injects `!px-[var(--field-px)]`; table-cell context untouched, lets naked `!px-[var(--table-cell-px)]` SSOT take over). Hook regex grep'd the comment word, not the live code path. Per (a) fix 2026-05-13 user-approved Path a.\nimport * as React from 'react'\nimport { ChevronDown } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant } from '@/design-system/components/Field/field-types'\nimport { fieldWrapperStyles, EMPTY_DISPLAY, nakedCellRowModeAlign } from '@/design-system/components/Field/field-wrapper'\nimport { ItemSuffix } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { useFieldSurface, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldVariant } from '@/design-system/components/Field/field-context'\nimport { Avatar } from '@/design-system/components/Avatar/avatar'\nimport { Tag } from '@/design-system/components/Tag/tag'\nimport { Select } from '@/design-system/components/Select/select'\nimport { Combobox } from '@/design-system/components/Combobox/combobox'\nimport { PersonDisplay, MultiPersonDisplay, PersonAvatarTag, buildPersonProfileCard, resolvePerson, type PersonValue } from './person-display'\nimport {\n  getAvatarStackVisibleCount,\n  AVATAR_STACK_AVATAR_PX,\n  AVATAR_STACK_OVERFLOW_CHIP_PX,\n} from './avatar-stack-overflow'\n// Pure helpers extracted to sibling for file-size budget(2026-05-18,P1 ≤ 500 lines)。\n// 不消費 component closure 的純 constant / 純 mapping function 全部搬走,主檔保留 SSOT-bearing\n// render logic(消費 Combobox / Select / state 等 closure 的部分)。\n// SSOT primitive re-export(backward-compat 對外 import 路徑保持 `./people-picker`)。\nimport {\n  PEOPLE_PICKER_LENGTH1_WRAPPER_CLASS,\n  getPeoplePickerTagWrapperClass,\n  personToSelectOption,\n  findPerson,\n} from './people-picker-helpers'\nimport { ICON_SIZE } from '@/design-system/tokens/uiSize/icon-size'\nexport { PEOPLE_PICKER_LENGTH1_WRAPPER_CLASS, getPeoplePickerTagWrapperClass }\n\n// ── PeoplePicker ────────────────────────────────────────────────────────────\n// **2026-05-07 v15.6 SSOT 重構 v2**:\n//\n//   - **single mode** wraps `<Select searchable selectedItemRenderer>`\n//   - **multi mode** 兩種 displayMode(consumer 自選),**皆 wrap `<Combobox>`**(同 SSOT,\n//     差別在 tagRenderer 視覺):\n//       - **'stack'**(default,baseline 既有視覺)— Avatar 疊合 + `+N` overflow indicator,\n//         不可 wrap。tagRenderer 渲染 avatar stack(visible count 走 shared `avatar-stack-overflow`\n//         primitive deterministic formula,2026-05-15 Bug 3 fix;display 路徑 `<MultiPersonDisplay>` 同 primitive)。\n//         對齊 Notion / Linear / Atlassian / Slack 多人 quick-glance idiom。\n//       - **'pill'**(opt-in)— 每人 Tag pill,可 wrap。Wrap `<Combobox tagRenderer>`,\n//         tagRenderer 用 Tag 元件 `avatar` prop SSOT(不塞 children)。\n//         `pillShowAvatar` 控 pill 內是否顯 avatar prefix(default true,false → 純文字 pill)。\n//         對齊 GitHub Reviewers / Combobox tag-input idiom。\n\n// **codex P2 fix(2026-05-07 v15.10)**:`extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>`\n// 讓 consumer 可傳 `id` / `data-testid` / `onBlur` / `onFocus` / `aria-*` 等 HTML root props,\n// component 內部 `...rest` forward 到 trigger 容器(對齊 DS 既有 Combobox / Select 慣例)。\n// `onChange` 衝突走 Omit(本 component 用 PersonValue[] custom signature)。\nexport interface PeoplePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Field mode(edit / display / readonly / disabled),默認 inherit Field context 或 'edit' */\n  mode?: FieldMode\n  /** Field chrome variant(對齊 Select / Combobox)*/\n  variant?: FieldVariant\n  size?: 'sm' | 'md' | 'lg'\n  /** 當前已選的人(單選 PersonValue,多選 PersonValue[])*/\n  value?: PersonValue | PersonValue[] | null\n  /** 值變更 callback(永遠 emit array — single mode 取 [0] 即 single value)*/\n  onChange?: (value: PersonValue[]) => void\n  /** 可選人員清單(edit mode 下拉顯示)*/\n  people?: PersonValue[]\n  /** 2026-05-12 Stream C Issue 4 fix(codex Q3 Cluster C):trigger empty placeholder。\n   *  Default '請選擇人員'。**禁** 將 `emptyText`(search-empty)當 trigger placeholder 傳。 */\n  placeholder?: string\n  /** 搜尋框 placeholder */\n  searchPlaceholder?: string\n  /** 搜尋無結果訊息(filtered menu empty)。**僅**用於 SelectMenu `emptyText`(菜單空狀態,\n   *  2026-07-04 Q4 接線完成),不轉 trigger placeholder(2026-05-12 Issue 4 semantic fix)。 */\n  emptyText?: string\n  className?: string\n  disabled?: boolean\n  /** Initial open state(uncontrolled)*/\n  defaultOpen?: boolean\n  /** open state 變更 callback */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Multi mode 顯示樣式(default 'stack')。Single mode 此 prop 忽略。\n   * - 'stack' — Avatar 疊合 + `+N`(空間省、不可 wrap;default)\n   * - 'pill'  — 每人 Tag pill(可 wrap)\n   */\n  multiDisplay?: 'stack' | 'pill'\n  /**\n   * `multiDisplay='pill'` 模式下是否顯示 avatar prefix(default true)。\n   * 設 false → 純文字 pill,進一步節省空間。對齊 Tag 元件 `avatar` prop SSOT。\n   */\n  pillShowAvatar?: boolean\n  /** Pill 模式下是否允許 wrap(default true)— 對齊 Combobox `wrap` prop */\n  pillWrap?: boolean\n  /**\n   * 搜尋型態(2026-05-12 規則 3 ship,3-mode SSOT 對齊 A1-A5 spec):\n   * - `'menu'`(default,backward-compat)— 浮層內搜尋(panel-top search)\n   * - `'trigger'`(multi 模式 opt-in)— inline 搜尋(浮層開時 name 拿掉,avatar 後接 input cursor,\n   *   類 Combobox inline-trigger idiom)\n   * Single mode 永遠 inline-trigger(wrap Select searchable 直接走 inline),此 prop multi 才有意義。\n   */\n  searchIn?: 'menu' | 'trigger'\n  /**\n   * Display 是否渲 ChevronDown + Field naked wrapper(D-path opt-in,2026-05-08)\n   * — DataTable cell display↔edit 像素級對齊用。預設 false(裸 PersonDisplay,backward compat)。\n   * 設 true 時 display 走 fieldWrapperStyles(naked variant)+ ItemSuffix ChevronDown,\n   * 與 edit (Select / Combobox wrapped) 同 DOM 結構,消除 Layer-B padding mismatch。\n   */\n  showDisplayEndIcon?: boolean\n  /** a11y label */\n  'aria-label'?: string\n}\n\nconst PeoplePicker = React.forwardRef<HTMLDivElement, PeoplePickerProps>(function PeoplePicker({\n  mode: modeProp,\n  variant: variantProp,\n  size: sizeProp,\n  value,\n  onChange,\n  people = [],\n  placeholder = '請選擇人員', // i18n-allow: DS default(2026-05-12 Stream C Issue 4)\n  searchPlaceholder = '搜尋人員…', // i18n-allow: DS default\n  emptyText = '沒有符合的人員', // i18n-allow: DS default — only for SelectMenu noResultsText\n  className,\n  disabled: disabledProp,\n  defaultOpen = false,\n  onOpenChange,\n  multiDisplay = 'stack',\n  pillShowAvatar = true,\n  pillWrap = true,\n  searchIn = 'menu',\n  showDisplayEndIcon = false,\n  'aria-label': ariaLabel,\n  ...rest\n}, ref) {\n  const surface = useFieldSurface()\n  const size = useResolvedFieldSize(sizeProp)  // B 組 cascade fix\n  const disabled = useResolvedFieldDisabled(disabledProp)\n  // 2026-06-08 SSOT:mode/disabled/variant 統一經 helper;修 <Field disabled> 漏 cascade(原只讀 fieldCtx.mode)\n  const resolvedMode: FieldMode = useResolvedFieldMode({ mode: modeProp, disabled })\n  const resolvedVariant: FieldVariant = useResolvedFieldVariant(variantProp)\n  const isMulti = Array.isArray(value)\n  const isEmpty = !value || (isMulti && value.length === 0)\n\n  // 2026-07-05 D3 P0 修:以下派生 + 4 hooks 原宣告在 display/readonly/single/pill 四個 early return\n  // 之後 — 同一 mounted instance 的 resolvedMode 於 edit↔display/disabled 切換(<Field mode>/<Field\n  // disabled> cascade 正是 runtime 翻轉機制)時 hook 數 7→11 變動 → React #310 crash(與 Combobox\n  // beta.76 / LinkInput 2026-07-04 同家族)。全部 hoist 到任何 early return 之前(對齊 select.tsx\n  // 「所有 hooks 必在 early return 前 call」canonical);effect 加 mode/stack guard,邏輯不變。\n  const selectedNames: string[] = !value\n    ? []\n    : Array.isArray(value)\n      ? value.map(v => resolvePerson(v).name)\n      : [resolvePerson(value).name]\n\n  // SSOT visible count compute via formula primitive + ResizeObserver(multi stack mode 專用)\n  const stackContainerRef = React.useRef<HTMLDivElement | null>(null)\n  const [stackVisibleCount, setStackVisibleCount] = React.useState<number | undefined>(undefined)\n  React.useLayoutEffect(() => {\n    if (resolvedMode !== 'edit' || !isMulti || multiDisplay !== 'stack' || selectedNames.length <= 1) {\n      setStackVisibleCount(undefined); return\n    }\n    const root = stackContainerRef.current\n    if (!root) return\n    // 2026-05-15 ROOT CAUSE FIX(user 抓「之前說的問題都還是存在」):\n    // stackContainerRef 透過 mergedStackRef 接 Combobox forwarded ref → root **就是** [role=combobox]\n    // div 自己。原 `root.querySelector('[role=combobox]')` 不找 self 永遠 null → trigger=null →\n    // tagArea=null → available=0 → setStackVisibleCount(0) → 整 stack 全 overflow → fallback 到\n    // Combobox DOM-based useOverflowCount(非 deterministic 那個算法)。修:用 root 自己當 trigger,\n    // 從 root 內找 tagArea(flex-1 min-w-0 div)。\n    const calc = () => {\n      const trigger = root.matches('[role=\"combobox\"]') ? root : root.querySelector<HTMLElement>('[role=\"combobox\"]')\n      const tagArea = trigger?.querySelector<HTMLElement>('div[class*=\"flex-1\"][class*=\"min-w-0\"]')\n      const available = tagArea?.clientWidth ?? trigger?.clientWidth ?? 0\n      const visible = getAvatarStackVisibleCount({\n        availablePx: available,\n        total: selectedNames.length,\n        avatarPx: AVATAR_STACK_AVATAR_PX[size],\n        overflowChipPx: AVATAR_STACK_OVERFLOW_CHIP_PX[size],\n      })\n      setStackVisibleCount(visible)\n    }\n    calc()\n    const ro = new ResizeObserver(calc)\n    ro.observe(root)\n    return () => ro.disconnect()\n  }, [resolvedMode, isMulti, multiDisplay, selectedNames.length, size])\n  // Merge ref:forward to parent + capture for ResizeObserver\n  const mergedStackRef = React.useCallback((el: HTMLDivElement | null) => {\n    stackContainerRef.current = el\n    if (typeof ref === 'function') ref(el)\n    else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = el\n  }, [ref])\n\n  // ── mode='display' ────────────────────────────────────────────────────────\n  // Default(showDisplayEndIcon=false):裸 PersonDisplay / MultiPersonDisplay — backward compat。\n  // Opt-in(showDisplayEndIcon=true,2026-05-08 D-path):Field naked wrapper + ItemSuffix ChevronDown,\n  // 與 edit (Select / Combobox wrapped) 同 DOM 結構消除 cell display↔edit 像素偏移。\n  if (resolvedMode === 'display') {\n    if (!showDisplayEndIcon) {\n      if (isEmpty) return <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>\n      return isMulti\n        ? <MultiPersonDisplay value={value as PersonValue[]} size={size} measured />\n        : <PersonDisplay value={value as PersonValue} size={size} />\n    }\n    // 2026-05-18 改 import ICON_SIZE SSOT(per user『做完』approval,消除 M17 違反 7+ 重複 ternary)\n  const iconSize = ICON_SIZE[size as 'sm' | 'md' | 'lg']\n    return (\n      <div\n        className={cn(fieldWrapperStyles({ mode: 'display', variant: resolvedVariant, size }), className)}\n        data-field-mode=\"display\"\n      >\n        <span className={cn('flex-1 min-w-0 inline-flex items-center', nakedCellRowModeAlign)}>\n          {isEmpty\n            ? <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>\n            : isMulti\n              ? <MultiPersonDisplay value={value as PersonValue[]} size={size} measured />\n              : <PersonDisplay value={value as PersonValue} size={size} />}\n        </span>\n        <ItemSuffix className=\"pointer-events-none\">\n          <ChevronDown size={iconSize} className=\"shrink-0 text-fg-muted\" aria-hidden />\n        </ItemSuffix>\n      </div>\n    )\n  }\n\n  // ── readonly / disabled — Field wrapper chrome,Avatar 視覺保留 ───────────\n  if (resolvedMode !== 'edit') {\n    return (\n      <div\n        ref={ref}\n        className={cn(fieldWrapperStyles({ mode: resolvedMode, variant: resolvedVariant, size }), className)}\n        data-field-mode={resolvedMode}\n        aria-disabled={resolvedMode === 'disabled' ? true : undefined}\n        aria-label={ariaLabel}\n        {...rest}\n      >\n        <span className={cn('flex-1 min-w-0 inline-flex items-center', nakedCellRowModeAlign, resolvedMode === 'disabled' && 'text-fg-disabled')}>\n          {isEmpty\n            ? <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>\n            : isMulti\n              ? <MultiPersonDisplay value={value as PersonValue[]} size={size} measured />\n              : <PersonDisplay value={value as PersonValue} size={size} />}\n        </span>\n        {/* 2026-06-26 類型身份 indicator:edit 顯示 / readonly 不顯示 / disabled 保留(fg-disabled,對齊原生 <select disabled>);naked cell 依 showDisplayEndIcon */}\n        {(resolvedVariant === 'naked' ? showDisplayEndIcon : resolvedMode === 'disabled') && (\n          <ItemSuffix className=\"pointer-events-none\">\n            <ChevronDown size={ICON_SIZE[size as 'sm' | 'md' | 'lg']} className={cn('shrink-0', resolvedMode === 'disabled' ? 'text-fg-disabled' : 'text-fg-muted')} aria-hidden />\n          </ItemSuffix>\n        )}\n      </div>\n    )\n  }\n\n  // ── edit mode ─────────────────────────────────────────────────────────────\n  // (selectedNames 派生已 hoist 至檔上方 hooks 區,見 D3 P0 修註解)\n\n  // ── single mode → wraps Select ────────────────────────────────────────────\n  if (!isMulti) {\n    const handleSingleChange = (name: string) => onChange?.([findPerson(people, name)])\n    return (\n      <Select\n        ref={ref as React.Ref<HTMLDivElement>}\n        size={size}\n        variant={resolvedVariant}\n        options={people.map(personToSelectOption)}\n        value={selectedNames[0] ?? null}\n        onChange={handleSingleChange}\n        searchable\n        placeholder={placeholder}\n        // 2026-05-12 Issue 4:placeholder = trigger empty。2026-07-04 Q4:emptyText 走 Select →\n        // SelectMenu 接線(search-empty 語意,與 trigger-empty 分離)。\n        emptyText={emptyText}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        className={className}\n        aria-label={ariaLabel}\n        selectedItemRenderer={(opt) => <PersonDisplay value={findPerson(people, opt.value)} size={size} />}\n        // **codex P2 forward**:Select extends `SelectHTMLAttributes<HTMLSelectElement>`,\n        // event handler element 型別跟 PeoplePicker `HTMLAttributes<HTMLDivElement>` 不一致\n        // (`onCopy` / `onChange` 等)。Runtime spread 等效 — DOM 收到 attrs 不挑剔。\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        // any-allow: rest 含 `onChange: FormEventHandler` 跟 Select onChange signature 衝突 — DOM runtime spread 安全(per codex P2 forward)\n        {...(rest as any)}\n      />\n    )\n  }\n\n  // ── multi 'pill' → wraps Combobox(對齊 GitHub Reviewers / Combobox idiom)────\n  if (multiDisplay === 'pill') {\n    const handleMultiChange = (next: string[]) => {\n      onChange?.(next.map(name => findPerson(people, name)))\n    }\n    return (\n      <Combobox\n        ref={ref as React.Ref<HTMLDivElement>}\n        size={size}\n        variant={resolvedVariant}\n        options={people.map(personToSelectOption)}\n        value={selectedNames}\n        onChange={handleMultiChange}\n        searchable\n        searchPlaceholder={searchPlaceholder}\n        // 2026-05-12 Stream C Issue 4(codex Q3):placeholder = trigger empty hint('請選擇人員')\n        // — semantic clean separation。2026-07-04 Q4 拍板完成 1-cycle 承諾:emptyPlaceholder forward\n        // 移除,emptyText 改傳 Combobox → SelectMenu emptyText(search-empty 真住所,菜單空狀態)。\n        placeholder={placeholder}\n        emptyText={emptyText}\n        wrap={pillWrap}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        className={className}\n        aria-label={ariaLabel}\n        // codex P2 forward(see Select branch comment for type-cast rationale)\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        // any-allow: rest 含 `onChange: FormEventHandler` 跟 Combobox onChange signature 衝突 — DOM runtime spread 安全(per codex P2 forward)\n        {...(rest as any)}\n        // **Tag SSOT canonical**:用 `avatar` prop(不塞 children),Tag 內部統一\n        // wrap 進 16×16 圓形 mask container(per Tag tsx line 175)。\n        tagRenderer={(item, onRemove) => {\n          const p = resolvePerson(findPerson(people, item.value))\n          return (\n            <Tag\n              key={item.value}\n              size={size}\n              color=\"neutral\"\n              // 2026-05-18 7B' fix(per user 拍板「執行」+ Codex Round 3 共識,paired with Combobox L286):\n              // 拿掉 `unbounded` 對齊 Tag canonical max-w-40 cap + 內建 ellipsis。PeoplePicker pill 走\n              // Combobox tagRenderer slot,SSOT = Tag primitive 視覺(per codex Round 3 verdict)。\n              // 人名 99% < 25 chars 不觸發 cap;極端長名(複數姓 + middle name)觸發 ellipsis 是合理 UX。\n              avatar={pillShowAvatar\n                ? <Avatar src={p.avatarUrl} alt={p.name} size={16} hoverCard={buildPersonProfileCard(p)} />\n                : undefined}\n              onRemove={onRemove}\n            >\n              {p.name}\n            </Tag>\n          )\n        }}\n      />\n    )\n  }\n\n  // ── multi 'stack' (default) → wraps Combobox 跟 pill mode 同 SSOT,差別在 tagRenderer 視覺。\n  //\n  // **2026-05-15 Bug 3 fix(Claude+Codex Step 5 比稿 consensus)**:visible count 走 shared\n  // `avatar-stack-overflow` primitive deterministic formula(取代 Combobox DOM offsetWidth-based\n  // useOverflowCount + 60px fallback 不 deterministic),pass override 給 Combobox bypass internal\n  // measurement。`MultiPersonDisplay`(display path)同 primitive,display + edit 結果一致。\n  // 對齊 user verbatim SSOT「同 cell width 同 overflow 判斷」+ codex Q3 consensus shared primitive。\n  const handleMultiChange = (next: string[]) => {\n    onChange?.(next.map(name => findPerson(people, name)))\n  }\n  // ── edit mode ─────────────────────────────────────────────────────────────\n  // (selectedNames 派生已 hoist 至檔上方 hooks 區,見 D3 P0 修註解)\n\n  return (\n    <Combobox\n      ref={mergedStackRef}\n      size={size}\n      variant={resolvedVariant}\n      options={people.map(personToSelectOption)}\n      value={selectedNames}\n      onChange={handleMultiChange}\n      searchable\n      searchIn={searchIn}\n      searchPlaceholder={searchPlaceholder}\n      // 2026-05-12 Stream C Issue 4(codex Q3):placeholder = trigger empty('請選擇人員');emptyText = search-empty(僅 backward-compat forward 1 cycle)\n      placeholder={placeholder}\n      emptyText={emptyText}\n      wrap={false}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      // 2026-05-13 (a) fix(user 拍 Path a + Layer A density-drift root-cause):\n      // 撤掉 `tagAreaPaddingLeftPx={8}` magic — Combobox `tagPadding[size]` 是 density-dependent\n      // calc 公式(`(field-height - icon-size) / 2`),只在 md size + default density 才 = 4px;\n      // 其他 size/density 漂 6px / 8px → 4+8=12 spec 公式不成立。\n      // (a) fix:form context + 有 tag → 改 inject `!px-[var(--field-px)]`(固定 12px)直接 override `tagPadding[size]`,\n      // 達成 GitHub PeoplePicker fixed 12px inset(對齊 cell context 同 13px from cell.left 含 1px border)。\n      // - form + 有 tag → `!px-[var(--field-px)]`(12px 固定 inset)+ tagAreaPaddingLeftPx undefined → field.padL=12 ✓\n      // - table-cell + 有 tag → naked variant `!px-[var(--table-cell-px)]` 已是 12px,不 inject ✓\n      // - isEmpty → 不 inject,走 Combobox 預設文字 inset(`tagPadding[size]` 公式自然 vertical center)\n      className={cn(className, !isEmpty && surface === 'form' && '!px-[var(--field-px)]')}\n      aria-label={ariaLabel}\n      // 2026-05-15 Bug 1 fix(Claude+Codex Step 5 比稿 consensus,user verbatim「就 A」):per-length 動態\n      // wrapper class — length=1 降階單人視覺需要 width constraint chain(`flex-1 min-w-0 overflow-hidden`),\n      // length>=2 stack 視覺保留 overlap(`-ml-0.5 first:ml-0 relative inline-flex group/avatar`)。對齊\n      // spec.md §C row 1(length=1 = avatar+人名+ellipsis)+ §D row 1(length>=2 = stack overlap)。\n      // 真根因:Combobox `OverflowTagList` 把所有 tagRenderer 結果包 `shrink-0`,加 `inline-flex` 後\n      // wrapper 變 intrinsic content-width → PersonDisplay `w-full` resolves to intrinsic → truncate 無效。\n      // 修法:length=1 wrapper 改 `flex-1 min-w-0 overflow-hidden` 提供 width constraint 給 PersonDisplay。\n      // SSOT helper `getPeoplePickerTagWrapperClass(count)` 集中,future 改 wrapper 行為改一處。\n      tagWrapperClassName={getPeoplePickerTagWrapperClass(selectedNames.length)}\n      // 2026-05-16 真 root cause fix:overflow chip wrapper 套同 `-ml-0.5` 讓 chip 物理上\n      // 跟 avatar 同 slot(等寬同 step,non-overlapping 多 24px 區塊不再 saw)。對齊 user\n      // 「avatars 和 +N 都是同尺寸圓形,空間最多容固定數量圓形」物理模型 directive +\n      // MUI AvatarGroup / Primer AvatarStack 共識(`AvatarGroup.js` L54-59 same negative margin)。\n      overflowWrapperClassName=\"-ml-0.5 first:ml-0 relative inline-flex\"\n      tagAreaGapPx={0}\n      tagAreaPaddingLeftPx={undefined}\n      // 2026-05-12 Round 7 fix(user 抓 image 2「+N tag 應該圓形不是矩形」+ 對齊 GitHub picker idiom):\n      // Combobox default `overflowShape='tag'`(矩形 chip,文字 Combobox 慣例);PeoplePicker stack\n      // mode pass `'circle'`(圓形 avatar-shape,跟 avatar 一樣大)。對齊 MultiPersonDisplay readonly path\n      // 既有 OverflowIndicator default 'circle' SSOT。\n      overflowShape=\"circle\"\n      // 2026-05-15 Bug 3 fix:formula-based visible count override(避免 Combobox DOM measurement +\n      // 60px fallback 不 deterministic)。SSOT in `./avatar-stack-overflow.ts`,display + edit 共用。\n      visibleCountOverride={stackVisibleCount}\n      // 2026-05-14 I4 fix(per codex+Layer A 共識):hidden items 在 `+N` overflow popover 顯\n      // Tag with avatar(對齊 display MultiPersonDisplay popover SSOT,user 抓 display vs edit\n      // overflow 視覺不一致)。\n      renderHiddenTag={(item) => {\n        const p = resolvePerson(findPerson(people, item.value))\n        return (\n          <Tag\n            key={item.value}\n            color=\"neutral\"\n            size=\"sm\"\n            avatar={\n              <Avatar\n                src={p.avatarUrl}\n                alt={p.name}\n                size={16}\n                hoverCard={buildPersonProfileCard(p)}\n              />\n            }\n            onRemove={() => {\n              onChange?.(selectedNames.filter(n => n !== item.value).map(n => findPerson(people, n)))\n            }}\n          >\n            {p.name}\n          </Tag>\n        )\n      }}\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      // any-allow: rest 含 `onChange: FormEventHandler` 跟 Combobox onChange signature 衝突 — DOM runtime spread 安全(per codex P2 forward)\n      {...(rest as any)}\n      tagRenderer={(item, onRemove) => {\n        const p = resolvePerson(findPerson(people, item.value))\n        // 2026-05-12 Q2 fix(user 拍板「multi 只選 1 人時 trigger = avatar + name,跟 single mode 同」):\n        // selectedNames.length === 1 → PersonDisplay(avatar + name)代替 PersonAvatarTag(avatar only)。\n        // SSOT 對齊 PeoplePicker single mode line 201 selectedItemRenderer。多選 1 人時視覺等同單選,\n        // 只在 length > 1 才走 stack(各 avatar 純 chip)。多選 + inline 搜尋場景拿掉 name 改 cursor\n        // 走 `searchIn='trigger'` opt-in(2026-05-12 規則 3 ship,已轉傳 Combobox;default 'menu' 走 panel-top search)。\n        if (selectedNames.length === 1) {\n          return <PersonDisplay key={item.value} value={p} size={size} />\n        }\n        return (\n          <PersonAvatarTag\n            key={item.value}\n            person={p}\n            size={size}\n            onRemove={onRemove}\n          />\n        )\n      }}\n    />\n  )\n})\nPeoplePicker.displayName = 'PeoplePicker'\n\n// Story auto-compile metadata\nexport const peoplePickerMeta = {\n  component: 'PeoplePicker',\n  family: 4,\n  variants: {},\n  sizes: {},\n  // 'active' 移除 — trigger 走 Field chrome、menu 走 MenuItem,皆無自有按壓視覺(2026-07-07 詞彙統一 DS-wide 按壓訊號盤點:檔內 0 active: utility / 0 *-active token)。\n  states: ['default', 'hover', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: ['text-fg-disabled', 'text-fg-muted'],\n    ring: [],\n  },\n} as const\n\nexport { PeoplePicker }\n"],"names":["PeoplePicker","handleMultiChange"],"mappings":";;;;;;;;;;;;;;;AA8GA,MAAM,eAAe,MAAM,WAA8C,SAASA,cAAa;AAAA,EAC7F,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,SAAS,CAAA;AAAA,EACT,cAAc;AAAA;AAAA,EACd,oBAAoB;AAAA;AAAA,EACpB,YAAY;AAAA;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,EACV,cAAc;AAAA,EACd;AAAA,EACA,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,WAAW;AAAA,EACX,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,GAAG;AACL,GAAG,KAAK;AACN,QAAM,UAAU,gBAAA;AAChB,QAAM,OAAO,qBAAqB,QAAQ;AAC1C,QAAM,WAAW,yBAAyB,YAAY;AAEtD,QAAM,eAA0B,qBAAqB,EAAE,MAAM,UAAU,UAAU;AACjF,QAAM,kBAAgC,wBAAwB,WAAW;AACzE,QAAM,UAAU,MAAM,QAAQ,KAAK;AACnC,QAAM,UAAU,CAAC,SAAU,WAAW,MAAM,WAAW;AAOvD,QAAM,gBAA0B,CAAC,QAC7B,CAAA,IACA,MAAM,QAAQ,KAAK,IACjB,MAAM,IAAI,CAAA,MAAK,cAAc,CAAC,EAAE,IAAI,IACpC,CAAC,cAAc,KAAK,EAAE,IAAI;AAGhC,QAAM,oBAAoB,MAAM,OAA8B,IAAI;AAClE,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,MAAM,SAA6B,MAAS;AAC9F,QAAM,gBAAgB,MAAM;AAC1B,QAAI,iBAAiB,UAAU,CAAC,WAAW,iBAAiB,WAAW,cAAc,UAAU,GAAG;AAChG,2BAAqB,MAAS;AAAG;AAAA,IACnC;AACA,UAAM,OAAO,kBAAkB;AAC/B,QAAI,CAAC,KAAM;AAOX,UAAM,OAAO,MAAM;AACjB,YAAM,UAAU,KAAK,QAAQ,mBAAmB,IAAI,OAAO,KAAK,cAA2B,mBAAmB;AAC9G,YAAM,UAAU,mCAAS,cAA2B;AACpD,YAAM,aAAY,mCAAS,iBAAe,mCAAS,gBAAe;AAClE,YAAM,UAAU,2BAA2B;AAAA,QACzC,aAAa;AAAA,QACb,OAAO,cAAc;AAAA,QACrB,UAAU,uBAAuB,IAAI;AAAA,QACrC,gBAAgB,8BAA8B,IAAI;AAAA,MAAA,CACnD;AACD,2BAAqB,OAAO;AAAA,IAC9B;AACA,SAAA;AACA,UAAM,KAAK,IAAI,eAAe,IAAI;AAClC,OAAG,QAAQ,IAAI;AACf,WAAO,MAAM,GAAG,WAAA;AAAA,EAClB,GAAG,CAAC,cAAc,SAAS,cAAc,cAAc,QAAQ,IAAI,CAAC;AAEpE,QAAM,iBAAiB,MAAM,YAAY,CAAC,OAA8B;AACtE,sBAAkB,UAAU;AAC5B,QAAI,OAAO,QAAQ,WAAY,KAAI,EAAE;AAAA,aAC5B,IAAM,KAAsD,UAAU;AAAA,EACjF,GAAG,CAAC,GAAG,CAAC;AAMR,MAAI,iBAAiB,WAAW;AAC9B,QAAI,CAAC,oBAAoB;AACvB,UAAI,QAAS,QAAO,oBAAC,QAAA,EAAK,WAAU,iBAAiB,UAAA,eAAc;AACnE,aAAO,UACH,oBAAC,oBAAA,EAAmB,OAA+B,MAAY,UAAQ,KAAA,CAAC,IACxE,oBAAC,eAAA,EAAc,OAA6B,KAAA,CAAY;AAAA,IAC9D;AAEF,UAAM,WAAW,UAAU,IAA0B;AACnD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,mBAAmB,EAAE,MAAM,WAAW,SAAS,iBAAiB,MAAM,GAAG,SAAS;AAAA,QAChG,mBAAgB;AAAA,QAEhB,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAW,GAAG,2CAA2C,qBAAqB,GACjF,UAAA,UACG,oBAAC,QAAA,EAAK,WAAU,iBAAiB,UAAA,cAAA,CAAc,IAC/C,UACE,oBAAC,oBAAA,EAAmB,OAA+B,MAAY,UAAQ,KAAA,CAAC,IACxE,oBAAC,eAAA,EAAc,OAA6B,KAAA,CAAY,GAChE;AAAA,UACA,oBAAC,YAAA,EAAW,WAAU,uBACpB,UAAA,oBAAC,aAAA,EAAY,MAAM,UAAU,WAAU,0BAAyB,eAAW,KAAA,CAAC,EAAA,CAC9E;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAGA,MAAI,iBAAiB,QAAQ;AAC3B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mBAAmB,EAAE,MAAM,cAAc,SAAS,iBAAiB,MAAM,GAAG,SAAS;AAAA,QACnG,mBAAiB;AAAA,QACjB,iBAAe,iBAAiB,aAAa,OAAO;AAAA,QACpD,cAAY;AAAA,QACX,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAW,GAAG,2CAA2C,uBAAuB,iBAAiB,cAAc,kBAAkB,GACpI,UAAA,UACG,oBAAC,QAAA,EAAK,WAAU,iBAAiB,UAAA,cAAA,CAAc,IAC/C,UACE,oBAAC,oBAAA,EAAmB,OAA+B,MAAY,UAAQ,KAAA,CAAC,IACxE,oBAAC,eAAA,EAAc,OAA6B,KAAA,CAAY,GAChE;AAAA,WAEE,oBAAoB,UAAU,qBAAqB,iBAAiB,mCACnE,YAAA,EAAW,WAAU,uBACpB,UAAA,oBAAC,aAAA,EAAY,MAAM,UAAU,IAA0B,GAAG,WAAW,GAAG,YAAY,iBAAiB,aAAa,qBAAqB,eAAe,GAAG,eAAW,KAAA,CAAC,EAAA,CACvK;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AAMA,MAAI,CAAC,SAAS;AACZ,UAAM,qBAAqB,CAAC,SAAiB,qCAAW,CAAC,WAAW,QAAQ,IAAI,CAAC;AACjF,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,SAAS,OAAO,IAAI,oBAAoB;AAAA,QACxC,OAAO,cAAc,CAAC,KAAK;AAAA,QAC3B,UAAU;AAAA,QACV,YAAU;AAAA,QACV;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,sBAAsB,CAAC,QAAQ,oBAAC,eAAA,EAAc,OAAO,WAAW,QAAQ,IAAI,KAAK,GAAG,KAAA,CAAY;AAAA,QAM/F,GAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAGX;AAGA,MAAI,iBAAiB,QAAQ;AAC3B,UAAMC,qBAAoB,CAAC,SAAmB;AAC5C,2CAAW,KAAK,IAAI,CAAA,SAAQ,WAAW,QAAQ,IAAI,CAAC;AAAA,IACtD;AACA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,SAAS,OAAO,IAAI,oBAAoB;AAAA,QACxC,OAAO;AAAA,QACP,UAAUA;AAAAA,QACV,YAAU;AAAA,QACV;AAAA,QAIA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QAIX,GAAI;AAAA,QAGL,aAAa,CAAC,MAAM,aAAa;AAC/B,gBAAM,IAAI,cAAc,WAAW,QAAQ,KAAK,KAAK,CAAC;AACtD,iBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC;AAAA,cACA,OAAM;AAAA,cAKN,QAAQ,iBACJ,oBAAC,QAAA,EAAO,KAAK,EAAE,WAAW,KAAK,EAAE,MAAM,MAAM,IAAI,WAAW,uBAAuB,CAAC,GAAG,IACvF;AAAA,cACJ;AAAA,cAEC,UAAA,EAAE;AAAA,YAAA;AAAA,YAZE,KAAK;AAAA,UAAA;AAAA,QAehB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AASA,QAAM,oBAAoB,CAAC,SAAmB;AAC5C,yCAAW,KAAK,IAAI,CAAA,SAAQ,WAAW,QAAQ,IAAI,CAAC;AAAA,EACtD;AAIA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,SAAS;AAAA,MACT,SAAS,OAAO,IAAI,oBAAoB;AAAA,MACxC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,YAAU;AAAA,MACV;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MAUA,WAAW,GAAG,WAAW,CAAC,WAAW,YAAY,UAAU,uBAAuB;AAAA,MAClF,cAAY;AAAA,MASZ,qBAAqB,+BAA+B,cAAc,MAAM;AAAA,MAKxE,0BAAyB;AAAA,MACzB,cAAc;AAAA,MACd,sBAAsB;AAAA,MAKtB,eAAc;AAAA,MAGd,sBAAsB;AAAA,MAItB,iBAAiB,CAAC,SAAS;AACzB,cAAM,IAAI,cAAc,WAAW,QAAQ,KAAK,KAAK,CAAC;AACtD,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAM;AAAA,YACN,MAAK;AAAA,YACL,QACE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK,EAAE;AAAA,gBACP,KAAK,EAAE;AAAA,gBACP,MAAM;AAAA,gBACN,WAAW,uBAAuB,CAAC;AAAA,cAAA;AAAA,YAAA;AAAA,YAGvC,UAAU,MAAM;AACd,mDAAW,cAAc,OAAO,CAAA,MAAK,MAAM,KAAK,KAAK,EAAE,IAAI,CAAA,MAAK,WAAW,QAAQ,CAAC,CAAC;AAAA,YACvF;AAAA,YAEC,UAAA,EAAE;AAAA,UAAA;AAAA,UAfE,KAAK;AAAA,QAAA;AAAA,MAkBhB;AAAA,MAGC,GAAI;AAAA,MACL,aAAa,CAAC,MAAM,aAAa;AAC/B,cAAM,IAAI,cAAc,WAAW,QAAQ,KAAK,KAAK,CAAC;AAMtD,YAAI,cAAc,WAAW,GAAG;AAC9B,qCAAQ,eAAA,EAA+B,OAAO,GAAG,KAAA,GAAtB,KAAK,KAA6B;AAAA,QAC/D;AACA,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,UAAA;AAAA,UAHK,KAAK;AAAA,QAAA;AAAA,MAMhB;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AACD,aAAa,cAAc;AAGpB,MAAM,mBAAmB;AAAA,EAC9B,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU,CAAA;AAAA,EACV,OAAO,CAAA;AAAA;AAAA,EAEP,QAAQ,CAAC,WAAW,SAAS,iBAAiB,UAAU;AAAA,EACxD,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAC,oBAAoB,eAAe;AAAA,IACxC,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/PeoplePicker/person-display.d.ts

@@ -25,6 +25,10 @@ export interface PersonData {
     }[];
     /** 跳至完整 profile 頁的 handler(hover ProfileCard 必含,不傳時 fallback noop placeholder) */
     onViewProfile?: () => void;
+    /** ProfileCard 預設 Chat 按鈕 handler(2026-07-06 user 拍板加接線;未傳 dev-warn,見 ProfileCardDefaultActions) */
+    onChat?: () => void;
+    /** ProfileCard 預設 Audio call 按鈕 handler(ChevronDown 下拉行為留 v2) */
+    onCall?: () => void;
 }
 export type PersonValue = string | PersonData;
 declare function resolvePerson(value: PersonValue): PersonData;

package/dist/components/PeoplePicker/person-display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"person-display.d.ts","sourceRoot":"","sources":["../../../src/components/PeoplePicker/person-display.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqB9B,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;0BAGsB;IACtB,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC/C;mEAC+D;IAC/D,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B;;oEAEgE;IAChE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;6DACyD;IACzD,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,kFAAkF;IAClF,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;CAC3B;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,UAAU,CAAA;AAE7C,iBAAS,aAAa,CAAC,KAAK,EAAE,WAAW,GAAG,UAAU,CAErD;AASD,iBAAS,sBAAsB,CAAC,MAAM,EAAE,UAAU,GAAG,KAAK,CAAC,SAAS,CAoBnE;AAwDD,iBAAS,aAAa,CAAC,EAAE,KAAK,EAAE,IAAW,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAAE,2CAgBvG;kBAhBQ,aAAa;;;AAwBtB,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,IAAW,EACX,GAAG,EACH,QAAgB,EAChB,QAAQ,GACT,EAAE;IACD,KAAK,CAAC,EAAE,WAAW,EAAE,GAAG,IAAI,CAAA;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,8EAA8E;IAC9E,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;CACzC,2CA+FA;kBAnHQ,kBAAkB;;;AAsL3B,iBAAS,eAAe,CAAC,EACvB,MAAM,EAAE,IAAW,EAAE,QAAQ,GAC9B,EAAE;IACD,MAAM,EAAE,UAAU,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB,2CAOA;kBAbQ,eAAe;;;AAgBxB,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,eAAe,EAAE,sBAAsB,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"person-display.d.ts","sourceRoot":"","sources":["../../../src/components/PeoplePicker/person-display.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqB9B,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;0BAGsB;IACtB,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC/C;mEAC+D;IAC/D,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B;;oEAEgE;IAChE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;6DACyD;IACzD,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,kFAAkF;IAClF,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,oGAAoG;IACpG,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,UAAU,CAAA;AAE7C,iBAAS,aAAa,CAAC,KAAK,EAAE,WAAW,GAAG,UAAU,CAErD;AASD,iBAAS,sBAAsB,CAAC,MAAM,EAAE,UAAU,GAAG,KAAK,CAAC,SAAS,CAoBnE;AAwDD,iBAAS,aAAa,CAAC,EAAE,KAAK,EAAE,IAAW,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAAE,2CAgBvG;kBAhBQ,aAAa;;;AAwBtB,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,IAAW,EACX,GAAG,EACH,QAAgB,EAChB,QAAQ,GACT,EAAE;IACD,KAAK,CAAC,EAAE,WAAW,EAAE,GAAG,IAAI,CAAA;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,8EAA8E;IAC9E,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;CACzC,2CAiGA;kBArHQ,kBAAkB;;;AAwL3B,iBAAS,eAAe,CAAC,EACvB,MAAM,EAAE,IAAW,EAAE,QAAQ,GAC9B,EAAE;IACD,MAAM,EAAE,UAAU,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB,2CAOA;kBAbQ,eAAe;;;AAgBxB,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,eAAe,EAAE,sBAAsB,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/PeoplePicker/person-display.js

@@ -26,7 +26,7 @@ function buildPersonProfileCard(person) {
         employeeNumber: person.employeeNumber
       },
       fields: person.fields,
-      actions: /* @__PURE__ */ jsx(ProfileCardDefaultActions, {}),
+      actions: /* @__PURE__ */ jsx(ProfileCardDefaultActions, { onChat: person.onChat, onCall: person.onCall }),
       onViewMore: person.onViewProfile ?? (() => {
       })
     }
@@ -72,11 +72,10 @@ function MultiPersonDisplay({
   measured = false,
   onRemove
 }) {
-  if (!value || value.length === 0) return /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: EMPTY_DISPLAY });
   const containerRef = React.useRef(null);
   const [measuredCount, setMeasuredCount] = React.useState(null);
   React.useLayoutEffect(() => {
-    if (!measured) return;
+    if (!measured || !value || value.length === 0) return;
     const el = containerRef.current;
     if (!el) return;
     const calc = () => {
@@ -93,6 +92,7 @@ function MultiPersonDisplay({
     ro.observe(el);
     return () => ro.disconnect();
   }, [measured, size, value]);
+  if (!value || value.length === 0) return /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: EMPTY_DISPLAY });
   const resolvedMax = measured && measuredCount !== null ? measuredCount : max ?? 3;
   const people = value.map(resolvePerson);
   const visible = people.slice(0, resolvedMax);

package/dist/components/PeoplePicker/person-display.js.map

@@ -1 +1 @@
-{"version":3,"file":"person-display.js","sources":["../../../src/components/PeoplePicker/person-display.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport { X } from 'lucide-react'\nimport { EMPTY_DISPLAY } from '@/design-system/components/Field/field-wrapper'\nimport { Tag } from '@/design-system/components/Tag/tag'\nimport { OverflowIndicator } from '@/design-system/components/OverflowIndicator/overflow-indicator'\nimport { Avatar } from '@/design-system/components/Avatar/avatar'\nimport { ProfileCard, ProfileCardDefaultActions } from '@/design-system/components/ProfileCard/profile-card'\nimport { useTableIsScrolling } from '@/design-system/components/Field/field-context'\nimport { ItemPrefix } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport {\n  getAvatarStackVisibleCount,\n  AVATAR_STACK_AVATAR_PX,\n  AVATAR_STACK_OVERFLOW_CHIP_PX,\n} from './avatar-stack-overflow'\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\n// PersonData 承載 ProfileCard 所需的完整資訊。DS 全域 person avatar 的 hoverCard ProfileCard 永遠\n// 顯示同一組 sections(name + subtitle + status + 4 default fields + 自訂 fields + actions + View more)\n// — 缺資料顯 placeholder,不會 collapse。對齊 avatar.spec.md「person avatar hover → ProfileCard」\n// DS-wide canonical(2026-05-06 v11 always-render schema 升級)。\nexport interface PersonData {\n  name: string\n  avatarUrl?: string\n  /** 角色 / 部門 / ID 等 meta 單行(ProfileCard subtitle) */\n  description?: string\n  /** Presence 狀態(對齊 Avatar presence canonical)。**2026-05-14 v12 update**(per user 拍板):\n   *  production 每 user 一定有 presence state,**undefined = loading transient(資料還沒讀到)**,\n   *  不是「user 沒設定」。ProfileCard 在 undefined 期間隱藏整 status block,**禁** render「Status not set」\n   *  placeholder 文字。 */\n  status?: 'online' | 'away' | 'busy' | 'offline'\n  /** Status 訊息(ProfileCard status section)。只在 status defined 時 render,缺則顯 `—` placeholder。\n   *  Status undefined 整 block skip(無 statusMessage 也跟著 skip)。 */\n  statusMessage?: React.ReactNode\n  /** **2026-05-07 v15.7 user directive**:ProfileCard default 只 render `id` + `employeeNumber`,\n   *  其他 description 一律 opt-in by consumer 透過 `fields` array prop。對齊\n   *  `NAMECARD_DEFAULT_FIELD_KEYS = ['id', 'employeeNumber']`。 */\n  id?: string\n  employeeNumber?: string\n  /** 自訂額外 fields(在 default fields 之後 append)。Email / Phone / Department / Location\n   *  / 任何其他 description 一律走這個 prop(opt-in,consumer 自選)。 */\n  fields?: { label: string; value: string }[]\n  /** 跳至完整 profile 頁的 handler(hover ProfileCard 必含,不傳時 fallback noop placeholder) */\n  onViewProfile?: () => void\n}\n\nexport type PersonValue = string | PersonData\n\nfunction resolvePerson(value: PersonValue): PersonData {\n  return typeof value === 'string' ? { name: value } : value\n}\n\n// buildPersonProfileCard — DS 全域 person avatar hoverCard 的 canonical ProfileCard JSX 建構器。\n// SSOT for「avatar hover ProfileCard 一致視覺」— 任何 person avatar consumer 都走這個 helper,\n// 不可繞道直接 build ProfileCard。\n//\n// **2026-05-07 v15.7 user directive**:default field values 只 `id` + `employeeNumber`,\n// 對齊 NAMECARD_DEFAULT_FIELD_KEYS。其他 description(email/phone/department/location/etc)\n// consumer 想顯式透過 `person.fields` opt-in 傳入。\nfunction buildPersonProfileCard(person: PersonData): React.ReactNode {\n  return (\n    <ProfileCard\n      name={person.name}\n      subtitle={person.description}\n      avatar={{ src: person.avatarUrl, alt: person.name }}\n      status={person.status}\n      statusMessage={person.statusMessage}\n      defaultFieldValues={{\n        id: person.id,\n        employeeNumber: person.employeeNumber,\n      }}\n      fields={person.fields}\n      actions={<ProfileCardDefaultActions />}\n      // onViewMore hover context 必含(avatar.spec.md canonical)。consumer 傳\n      // `onViewProfile` 則用真 handler,否則 noop placeholder(UI 仍渲染 View more\n      // footer,避免 preview 變死路)。\n      onViewMore={person.onViewProfile ?? (() => {})}\n    />\n  )\n}\n\n// ── Avatar Size ─────────────────────────────────────────────────────────────\n// 與 Tag 高度對齊:sm=20px, md/lg=24px(對齊 item-anatomy AVATAR_SIZE.inline)\n\nconst AVATAR_PX: Record<'sm' | 'md' | 'lg', number> = { sm: 20, md: 24, lg: 24 }\n\n// ── PersonAvatar ────────────────────────────────────────────────────────────\n// Consume DS `Avatar` primitive(2026-04-22 refactor,M1 SSOT consumption)+ 預設 ProfileCard\n// hoverCard(avatar.spec.md DS-wide「person avatar hover → ProfileCard」canonical)。\n//\n// 之前用 local `<img>` / `<User icon />` hand-craft 繞過 DS Avatar,違反 M1。本次 refactor:\n// - 所有 person avatar 經過 DS Avatar primitive(size 對應 uiSize family,fallback / icon / badge 集中管理)\n// - 人員資訊 → ProfileCard(subtitle = description,actions = ProfileCardDefaultActions)\n\n// 2026-05-13 (a) perf fix(per codex Layer C HoverCard subtree dominant):\n// useMemo `buildPersonProfileCard` per-person stable ref。原 every render call → new JSX ref →\n// Avatar.memo bails → HoverCard subtree 重建。Stable ref → memo skip → big win on scroll。\n//\n// (c) push-up scroll-defer:當 DataTable virtualizer.isScrolling=true,**完全不 build ProfileCard**\n// (Avatar 收 undefined → 跳 HoverCard wrapper)。原 (c) v1 在 Avatar 層 skip wrapper 但 ProfileCard\n// JSX subtree 仍在此處 build → 浪費 React reconciliation work。push 到此處才真省。\nfunction PersonAvatar({\n  person,\n  size = 'md',\n  className = '',\n  style,\n}: {\n  person: PersonData\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  style?: React.CSSProperties\n}) {\n  const isTableScrolling = useTableIsScrolling()\n  const nameCard = React.useMemo(\n    () => (isTableScrolling ? undefined : buildPersonProfileCard(person)),\n    [person, isTableScrolling]\n  )\n  return (\n    <Avatar\n      src={person.avatarUrl}\n      alt={person.name}\n      size={AVATAR_PX[size]}\n      className={className}\n      style={style}\n      hoverCard={nameCard}\n    />\n  )\n}\n\n// ── Single Person Display ───────────────────────────────────────────────────\n\n// 2026-05-14 item-anatomy SSOT fix(per codex+Layer A 共識 path (a) + user 拍板「全部做完」):\n// outer 改 items-start + Avatar 外包 ItemPrefix primitive consumption。單行視覺 = items-center 等效;\n// 多行(autoRowHeight cell)避免 avatar+name center 整 row 不對齊 first-line text top。M1 消費既有\n// 對齊 TreeView / MenuItem / SelectionItem 共用 ItemPrefix wrap chevron/icon/avatar canonical。\nfunction PersonDisplay({ value, size = 'md' }: { value?: PersonValue | null; size?: 'sm' | 'md' | 'lg' }) {\n  if (!value) return <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>\n\n  const person = resolvePerson(value)\n\n  // 2026-05-14 I1 fix(per codex addendum verdict):outer `inline-flex` → `flex w-full`\n  // 完成 truncate 寬度約束鏈。原 inline-flex content-width parent constrain 不到 name span\n  // → cell overflow-hidden 硬裁 → ellipsis dots 不可見。改 flex(block-level full width)\n  // + inner name span `flex-1 min-w-0 truncate` 真實 truncate-with-ellipsis 顯示。\n  // 對齊 GitHub Primer ActionList / Slack users_select / Atlassian UserPicker truncation canonical。\n  return (\n    <span className=\"flex items-start gap-2 min-w-0 w-full\">\n      <ItemPrefix><PersonAvatar person={person} size={size} /></ItemPrefix>\n      <span className=\"truncate flex-1 min-w-0\">{person.name}</span>\n    </span>\n  )\n}\nPersonDisplay.displayName = 'PersonDisplay'\n\n// ── Multi Person Display ────────────────────────────────────────────────────\n// 多人堆疊:avatar 重疊(-2px),不顯示人名。\n// 第一個 avatar z-index 最高(在最上面),依此類推。\n// 溢出時顯示 +N 指示器,hover 出 tooltip 列出溢出的人(avatar + 人名)。\n\nfunction MultiPersonDisplay({\n  value,\n  size = 'md',\n  max,\n  measured = false,\n  onRemove,\n}: {\n  value?: PersonValue[] | null\n  size?: 'sm' | 'md' | 'lg'\n  /** 最多顯示幾個 avatar(不含 +N),預設 3。`measured=true` 時忽略此 prop(改 container width 算)*/\n  max?: number\n  /**\n   * 2026-05-15 codex Round 5 C+ SSOT fix:`measured=true` 啟動 container-width 量測(取代 hardcode `max ?? 3`)\n   * → display + edit stack 同 algorithm(同 cell width → 同 overflow 判斷),不再 display 用固定 3 vs edit\n   * 用 useOverflowCount。對齊 field-controls.spec.md:286 「4-mode 共享 renderer」contract + user round 3\n   * verbatim「同空間兩判斷點」SSOT directive。Default false 保 backward compat(non-cell context 仍 max ?? 3)。\n   */\n  measured?: boolean\n  /** 傳入時啟用 dismiss(edit mode),callback 接收被移除的 person */\n  onRemove?: (person: PersonValue) => void\n}) {\n  if (!value || value.length === 0) return <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>\n\n  // 2026-05-15 Bug 3 fix(Claude+Codex Step 5 比稿 consensus):消費 shared `avatar-stack-overflow`\n  // primitive。原 inline canvas-based formula 是 dual-implementation 違反 user SSOT「同 cell width 同\n  // overflow 判斷」(edit path 用 Combobox useOverflowCount DOM offsetWidth / display path 用 inline\n  // canvas)。**抽 primitive 統一**:display + edit 共用 `getAvatarStackVisibleCount` formula。\n  // SSOT in `./avatar-stack-overflow.ts`,M14 mechanical guard 防 future drift。\n  const containerRef = React.useRef<HTMLSpanElement>(null)\n  const [measuredCount, setMeasuredCount] = React.useState<number | null>(null)\n  React.useLayoutEffect(() => {\n    if (!measured) return\n    const el = containerRef.current\n    if (!el) return\n    const calc = () => {\n      const visible = getAvatarStackVisibleCount({\n        availablePx: el.clientWidth,\n        total: value.length,\n        avatarPx: AVATAR_STACK_AVATAR_PX[size],\n        overflowChipPx: AVATAR_STACK_OVERFLOW_CHIP_PX[size],\n      })\n      setMeasuredCount(visible)\n    }\n    calc()\n    const ro = new ResizeObserver(calc)\n    ro.observe(el)\n    return () => ro.disconnect()\n  }, [measured, size, value])\n\n  const resolvedMax = measured && measuredCount !== null ? measuredCount : (max ?? 3)\n  const people = value.map(resolvePerson)\n  const visible = people.slice(0, resolvedMax)\n  const hidden = people.slice(resolvedMax)\n  const overflow = hidden.length\n\n  // 單人回退到 PersonDisplay(顯示名字)\n  if (people.length === 1) {\n    return <PersonDisplay value={value[0]} size={size} />\n  }\n\n  // 2026-05-14 item-anatomy SSOT fix(per codex+Layer A 共識):outer items-start + avatar stack\n  // 鎖 first-line baseline(整 stack 是 prefix slot,h-[1lh] 對齊 first line)。\n  return (\n    <span ref={containerRef} className=\"inline-flex items-start min-w-0\">\n      <ItemPrefix className=\"!justify-start\"><span className=\"inline-flex items-center min-w-0\">\n      {visible.map((person, i) => {\n        // **2026-05-07 v15.11 Bug D 升級 SSOT**:visible avatar 也支援 inline dismiss\n        // (對齊 user directive「avatar = tag」)。Dismiss overlay 走 `AvatarDismissOverlay`\n        // 共用 SSOT(下方 export),Combobox tagRenderer / 此處 / 任何 future avatar consumer\n        // 都用同一視覺 — 紅圈 X 對齊 avatar 右上,hover/focus-visible 才顯。\n        const handleDismiss = onRemove ? () => onRemove(value![i]) : undefined\n        return (\n          <span key={person.name + i} className={`relative inline-flex group/avatar ${i > 0 ? '-ml-0.5' : ''}`} style={{ zIndex: visible.length - i }}>\n            <PersonAvatar\n              person={person}\n              size={size}\n              className=\"ring-2 ring-[var(--surface)]\"\n            />\n            {handleDismiss && <AvatarDismissOverlay onRemove={handleDismiss} label={person.name} />}\n          </span>\n        )\n      })}\n      {overflow > 0 && (\n        <OverflowIndicator\n          count={overflow}\n          size={size}\n          className=\"ring-2 ring-[var(--surface)] -ml-0.5\"\n        >\n          {hidden.map((person, i) => (\n            <Tag\n              key={person.name + i}\n              color=\"neutral\"\n              size=\"sm\"\n              // Tag.avatar 是 ReactNode(非 AvatarData object)——傳 <Avatar> 元素。\n              // Tag 內部用 `w-4 h-4 rounded-full` 容器 slot,Avatar 填滿 object-cover。\n              // **hoverCard 必帶**(avatar.spec.md DS-wide canonical:所有 person avatar 必 hover → ProfileCard)。\n              // 跟 PersonAvatar 共用 `buildPersonProfileCard` helper 確保顯示資訊一致。\n              avatar={\n                <Avatar\n                  src={person.avatarUrl}\n                  alt={person.name}\n                  size={16}\n                  hoverCard={buildPersonProfileCard(person)}\n                />\n              }\n              onRemove={onRemove ? () => onRemove(value![resolvedMax + i]) : undefined}\n            >\n              {person.name}\n            </Tag>\n          ))}\n        </OverflowIndicator>\n      )}\n      </span></ItemPrefix>\n    </span>\n  )\n}\nMultiPersonDisplay.displayName = 'MultiPersonDisplay'\n\n// ── AvatarDismissOverlay ────────────────────────────────────────────────────\n// SSOT for「person avatar overlay dismiss」(2026-05-07 v15.12,user spec confirmed)。\n//\n// **Visual canonical**(對齊 DS new token `--surface-strong`):\n//   - **12×12 圓**(固定,不隨 field size 變)\n//   - **bg `--surface-strong`**(neutral-6),hover → `--surface-strong-hover`\n//     (light=neutral-5 / dark=neutral-7,跨 mode 對稱)\n//   - **X icon size=12 strokeWidth=3**(icon 跟底色一樣大,對齊 checkbox checkmark\n//     sm/md stroke 規格;2026-06-12 同步 checkbox 2026-05-18 簡化 3.5→3,SSOT →\n//     .claude/references/ui-dev-rules.md「小尺寸 icon stroke 補償」)\n//   - **text-on-emphasis**(白 X,確保飽和色底對比)\n//   - **位置 `absolute top-0 right-0`**(button 右上角貼齊 avatar 右上角,完全在 avatar\n//     內 — user-confirmed canonical)\n//\n// **a11y**(codex P1 fix):`opacity-0` 而非 `display:none` — element 在 DOM/tab-order,\n// keyboard tab 可達,觸控 focus-within 也顯。Hover / focus-within / focus-visible\n// 三條件之一觸發 `opacity-100`。\n//\n// **Why centralize**:Combobox tagRenderer (PeoplePicker stack mode) + MultiPersonDisplay\n// dismiss 共用 SSOT,改 1 處全 sync(M17 propagation)。\nfunction AvatarDismissOverlay({ onRemove, label }: { onRemove: () => void; label: string }) {\n  return (\n    <button\n      type=\"button\"\n      onClick={(e) => { e.stopPropagation(); onRemove() }}\n      aria-label={`移除 ${label}`}\n      className={[\n        // **Position(2026-05-07 v15.15 user-confirmed)**:asymmetric `-top-px -right-1`\n        // (top -1px / right -4px)— field padding-y(4px sm/md)緊 → top 只 -1px 安全;\n        // padding-x 12px 寬鬆 → right 凸 4px 達 badge canonical visual。對齊 ClickUp\n        // 世界級 idiom(asymmetric offset by avatar/field size constraint)。\n        'absolute -top-px -right-1 z-10',\n        'inline-flex items-center justify-center',\n        // **12×12 + 2px white ring**(SSOT match stacked avatar,Slack/Material/iOS\n        // notification badge 2px ring canonical)。改用 `[box-shadow:...]` 而非 `ring-2`\n        // 避免跟下方 `focus-visible:ring-2` 在 tailwind-merge 衝突(同 ring family\n        // override 互殺)。Box-shadow inset 0 不影響 layout,也不被 focus-visible ring\n        // 蓋掉(focus 那邊另一條 outline ring 不同 layer)。\n        'w-3 h-3 rounded-full [box-shadow:0_0_0_2px_var(--surface)]',\n        // bg-surface-strong = neutral-6-opaque / hover = neutral-7-opaque(both modes,\n        // step-7 dark 公式自動 lighter → engaged 跨 mode 對稱)\n        'bg-surface-strong text-on-emphasis hover:bg-surface-strong-hover',\n        // a11y(codex P1 fix):opacity 而非 display:none — element 在 DOM/tab-order,\n        // keyboard 可達。Hover / focus-within / focus-visible 三條件之一觸發。\n        'opacity-0 group-hover/avatar:opacity-100 group-focus-within/avatar:opacity-100 focus-visible:opacity-100',\n        'transition-opacity duration-150',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n      ].join(' ')}\n    >\n      <X size={12} strokeWidth={3} aria-hidden />\n    </button>\n  )\n}\n\n// ── PersonAvatarTag(Combobox tagRenderer SSOT for stack mode)─────────────\n// PeoplePicker `multiDisplay='stack'` 模式 wraps Combobox,tagRenderer 不能用 Tag pill\n// (那是 pill mode),改 render 此元件 — Avatar overlap 視覺 + AvatarDismissOverlay。\n// 對齊 user directive「avatar = tag 概念,差別只在視覺,SSOT 一致」(2026-05-07 v15.13)。\n//\n// **架構**(v15.13 重構):本元件**不自包** `group/avatar` / `-ml-0.5` overlap wrapper,\n// 因 Combobox `tagRenderer` 結果會被內部 `<div shrink-0>` 包成 measurement wrapper\n// (useOverflowCount 必要)。把 overlap + group 拉到 Combobox 的 `tagWrapperClassName`\n// 上,sibling-level overlap + group selector 才能正確 chain → AvatarDismissOverlay 的\n// `group-hover/avatar:opacity-100` 才會通。\nfunction PersonAvatarTag({\n  person, size = 'md', onRemove,\n}: {\n  person: PersonData\n  size?: 'sm' | 'md' | 'lg'\n  onRemove?: () => void\n}) {\n  return (\n    <>\n      <PersonAvatar person={person} size={size} className=\"ring-2 ring-[var(--surface)]\" />\n      {onRemove && <AvatarDismissOverlay onRemove={onRemove} label={person.name} />}\n    </>\n  )\n}\nPersonAvatarTag.displayName = 'PersonAvatarTag'\n\nexport { PersonDisplay, MultiPersonDisplay, PersonAvatarTag, buildPersonProfileCard, resolvePerson }\n"],"names":["visible"],"mappings":"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"}
+{"version":3,"file":"person-display.js","sources":["../../../src/components/PeoplePicker/person-display.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport { X } from 'lucide-react'\nimport { EMPTY_DISPLAY } from '@/design-system/components/Field/field-wrapper'\nimport { Tag } from '@/design-system/components/Tag/tag'\nimport { OverflowIndicator } from '@/design-system/components/OverflowIndicator/overflow-indicator'\nimport { Avatar } from '@/design-system/components/Avatar/avatar'\nimport { ProfileCard, ProfileCardDefaultActions } from '@/design-system/components/ProfileCard/profile-card'\nimport { useTableIsScrolling } from '@/design-system/components/Field/field-context'\nimport { ItemPrefix } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport {\n  getAvatarStackVisibleCount,\n  AVATAR_STACK_AVATAR_PX,\n  AVATAR_STACK_OVERFLOW_CHIP_PX,\n} from './avatar-stack-overflow'\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\n// PersonData 承載 ProfileCard 所需的完整資訊。DS 全域 person avatar 的 hoverCard ProfileCard 永遠\n// 顯示同一組 sections(name + subtitle + status + 4 default fields + 自訂 fields + actions + View more)\n// — 缺資料顯 placeholder,不會 collapse。對齊 avatar.spec.md「person avatar hover → ProfileCard」\n// DS-wide canonical(2026-05-06 v11 always-render schema 升級)。\nexport interface PersonData {\n  name: string\n  avatarUrl?: string\n  /** 角色 / 部門 / ID 等 meta 單行(ProfileCard subtitle) */\n  description?: string\n  /** Presence 狀態(對齊 Avatar presence canonical)。**2026-05-14 v12 update**(per user 拍板):\n   *  production 每 user 一定有 presence state,**undefined = loading transient(資料還沒讀到)**,\n   *  不是「user 沒設定」。ProfileCard 在 undefined 期間隱藏整 status block,**禁** render「Status not set」\n   *  placeholder 文字。 */\n  status?: 'online' | 'away' | 'busy' | 'offline'\n  /** Status 訊息(ProfileCard status section)。只在 status defined 時 render,缺則顯 `—` placeholder。\n   *  Status undefined 整 block skip(無 statusMessage 也跟著 skip)。 */\n  statusMessage?: React.ReactNode\n  /** **2026-05-07 v15.7 user directive**:ProfileCard default 只 render `id` + `employeeNumber`,\n   *  其他 description 一律 opt-in by consumer 透過 `fields` array prop。對齊\n   *  `NAMECARD_DEFAULT_FIELD_KEYS = ['id', 'employeeNumber']`。 */\n  id?: string\n  employeeNumber?: string\n  /** 自訂額外 fields(在 default fields 之後 append)。Email / Phone / Department / Location\n   *  / 任何其他 description 一律走這個 prop(opt-in,consumer 自選)。 */\n  fields?: { label: string; value: string }[]\n  /** 跳至完整 profile 頁的 handler(hover ProfileCard 必含,不傳時 fallback noop placeholder) */\n  onViewProfile?: () => void\n  /** ProfileCard 預設 Chat 按鈕 handler(2026-07-06 user 拍板加接線;未傳 dev-warn,見 ProfileCardDefaultActions) */\n  onChat?: () => void\n  /** ProfileCard 預設 Audio call 按鈕 handler(ChevronDown 下拉行為留 v2) */\n  onCall?: () => void\n}\n\nexport type PersonValue = string | PersonData\n\nfunction resolvePerson(value: PersonValue): PersonData {\n  return typeof value === 'string' ? { name: value } : value\n}\n\n// buildPersonProfileCard — DS 全域 person avatar hoverCard 的 canonical ProfileCard JSX 建構器。\n// SSOT for「avatar hover ProfileCard 一致視覺」— 任何 person avatar consumer 都走這個 helper,\n// 不可繞道直接 build ProfileCard。\n//\n// **2026-05-07 v15.7 user directive**:default field values 只 `id` + `employeeNumber`,\n// 對齊 NAMECARD_DEFAULT_FIELD_KEYS。其他 description(email/phone/department/location/etc)\n// consumer 想顯式透過 `person.fields` opt-in 傳入。\nfunction buildPersonProfileCard(person: PersonData): React.ReactNode {\n  return (\n    <ProfileCard\n      name={person.name}\n      subtitle={person.description}\n      avatar={{ src: person.avatarUrl, alt: person.name }}\n      status={person.status}\n      statusMessage={person.statusMessage}\n      defaultFieldValues={{\n        id: person.id,\n        employeeNumber: person.employeeNumber,\n      }}\n      fields={person.fields}\n      actions={<ProfileCardDefaultActions onChat={person.onChat} onCall={person.onCall} />}\n      // onViewMore hover context 必含(avatar.spec.md canonical)。consumer 傳\n      // `onViewProfile` 則用真 handler,否則 noop placeholder(UI 仍渲染 View more\n      // footer,避免 preview 變死路)。\n      onViewMore={person.onViewProfile ?? (() => {})}\n    />\n  )\n}\n\n// ── Avatar Size ─────────────────────────────────────────────────────────────\n// 與 Tag 高度對齊:sm=20px, md/lg=24px(對齊 item-anatomy AVATAR_SIZE.inline)\n\nconst AVATAR_PX: Record<'sm' | 'md' | 'lg', number> = { sm: 20, md: 24, lg: 24 }\n\n// ── PersonAvatar ────────────────────────────────────────────────────────────\n// Consume DS `Avatar` primitive(2026-04-22 refactor,M1 SSOT consumption)+ 預設 ProfileCard\n// hoverCard(avatar.spec.md DS-wide「person avatar hover → ProfileCard」canonical)。\n//\n// 之前用 local `<img>` / `<User icon />` hand-craft 繞過 DS Avatar,違反 M1。本次 refactor:\n// - 所有 person avatar 經過 DS Avatar primitive(size 對應 uiSize family,fallback / icon / badge 集中管理)\n// - 人員資訊 → ProfileCard(subtitle = description,actions = ProfileCardDefaultActions)\n\n// 2026-05-13 (a) perf fix(per codex Layer C HoverCard subtree dominant):\n// useMemo `buildPersonProfileCard` per-person stable ref。原 every render call → new JSX ref →\n// Avatar.memo bails → HoverCard subtree 重建。Stable ref → memo skip → big win on scroll。\n//\n// (c) push-up scroll-defer:當 DataTable virtualizer.isScrolling=true,**完全不 build ProfileCard**\n// (Avatar 收 undefined → 跳 HoverCard wrapper)。原 (c) v1 在 Avatar 層 skip wrapper 但 ProfileCard\n// JSX subtree 仍在此處 build → 浪費 React reconciliation work。push 到此處才真省。\nfunction PersonAvatar({\n  person,\n  size = 'md',\n  className = '',\n  style,\n}: {\n  person: PersonData\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  style?: React.CSSProperties\n}) {\n  const isTableScrolling = useTableIsScrolling()\n  const nameCard = React.useMemo(\n    () => (isTableScrolling ? undefined : buildPersonProfileCard(person)),\n    [person, isTableScrolling]\n  )\n  return (\n    <Avatar\n      src={person.avatarUrl}\n      alt={person.name}\n      size={AVATAR_PX[size]}\n      className={className}\n      style={style}\n      hoverCard={nameCard}\n    />\n  )\n}\n\n// ── Single Person Display ───────────────────────────────────────────────────\n\n// 2026-05-14 item-anatomy SSOT fix(per codex+Layer A 共識 path (a) + user 拍板「全部做完」):\n// outer 改 items-start + Avatar 外包 ItemPrefix primitive consumption。單行視覺 = items-center 等效;\n// 多行(autoRowHeight cell)避免 avatar+name center 整 row 不對齊 first-line text top。M1 消費既有\n// 對齊 TreeView / MenuItem / SelectionItem 共用 ItemPrefix wrap chevron/icon/avatar canonical。\nfunction PersonDisplay({ value, size = 'md' }: { value?: PersonValue | null; size?: 'sm' | 'md' | 'lg' }) {\n  if (!value) return <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>\n\n  const person = resolvePerson(value)\n\n  // 2026-05-14 I1 fix(per codex addendum verdict):outer `inline-flex` → `flex w-full`\n  // 完成 truncate 寬度約束鏈。原 inline-flex content-width parent constrain 不到 name span\n  // → cell overflow-hidden 硬裁 → ellipsis dots 不可見。改 flex(block-level full width)\n  // + inner name span `flex-1 min-w-0 truncate` 真實 truncate-with-ellipsis 顯示。\n  // 對齊 GitHub Primer ActionList / Slack users_select / Atlassian UserPicker truncation canonical。\n  return (\n    <span className=\"flex items-start gap-2 min-w-0 w-full\">\n      <ItemPrefix><PersonAvatar person={person} size={size} /></ItemPrefix>\n      <span className=\"truncate flex-1 min-w-0\">{person.name}</span>\n    </span>\n  )\n}\nPersonDisplay.displayName = 'PersonDisplay'\n\n// ── Multi Person Display ────────────────────────────────────────────────────\n// 多人堆疊:avatar 重疊(-2px),不顯示人名。\n// 第一個 avatar z-index 最高(在最上面),依此類推。\n// 溢出時顯示 +N 指示器,hover 出 tooltip 列出溢出的人(avatar + 人名)。\n\nfunction MultiPersonDisplay({\n  value,\n  size = 'md',\n  max,\n  measured = false,\n  onRemove,\n}: {\n  value?: PersonValue[] | null\n  size?: 'sm' | 'md' | 'lg'\n  /** 最多顯示幾個 avatar(不含 +N),預設 3。`measured=true` 時忽略此 prop(改 container width 算)*/\n  max?: number\n  /**\n   * 2026-05-15 codex Round 5 C+ SSOT fix:`measured=true` 啟動 container-width 量測(取代 hardcode `max ?? 3`)\n   * → display + edit stack 同 algorithm(同 cell width → 同 overflow 判斷),不再 display 用固定 3 vs edit\n   * 用 useOverflowCount。對齊 field-controls.spec.md:286 「4-mode 共享 renderer」contract + user round 3\n   * verbatim「同空間兩判斷點」SSOT directive。Default false 保 backward compat(non-cell context 仍 max ?? 3)。\n   */\n  measured?: boolean\n  /** 傳入時啟用 dismiss(edit mode),callback 接收被移除的 person */\n  onRemove?: (person: PersonValue) => void\n}) {\n  // 2026-07-05 D3 P1 修(React #310 家族):3 hooks 原在 empty early return 之後 — value 非空↔空\n  // 切換時 hook 數 0↔3 變動必 crash(現靠 consumer 三元切換 element type 偶然避開)。hoist 到 return 前。\n  // 2026-05-15 Bug 3 fix(Claude+Codex Step 5 比稿 consensus):消費 shared `avatar-stack-overflow`\n  // primitive。原 inline canvas-based formula 是 dual-implementation 違反 user SSOT「同 cell width 同\n  // overflow 判斷」(edit path 用 Combobox useOverflowCount DOM offsetWidth / display path 用 inline\n  // canvas)。**抽 primitive 統一**:display + edit 共用 `getAvatarStackVisibleCount` formula。\n  // SSOT in `./avatar-stack-overflow.ts`,M14 mechanical guard 防 future drift。\n  const containerRef = React.useRef<HTMLSpanElement>(null)\n  const [measuredCount, setMeasuredCount] = React.useState<number | null>(null)\n  React.useLayoutEffect(() => {\n    if (!measured || !value || value.length === 0) return\n    const el = containerRef.current\n    if (!el) return\n    const calc = () => {\n      const visible = getAvatarStackVisibleCount({\n        availablePx: el.clientWidth,\n        total: value.length,\n        avatarPx: AVATAR_STACK_AVATAR_PX[size],\n        overflowChipPx: AVATAR_STACK_OVERFLOW_CHIP_PX[size],\n      })\n      setMeasuredCount(visible)\n    }\n    calc()\n    const ro = new ResizeObserver(calc)\n    ro.observe(el)\n    return () => ro.disconnect()\n  }, [measured, size, value])\n\n  if (!value || value.length === 0) return <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>\n\n  const resolvedMax = measured && measuredCount !== null ? measuredCount : (max ?? 3)\n  const people = value.map(resolvePerson)\n  const visible = people.slice(0, resolvedMax)\n  const hidden = people.slice(resolvedMax)\n  const overflow = hidden.length\n\n  // 單人回退到 PersonDisplay(顯示名字)\n  if (people.length === 1) {\n    return <PersonDisplay value={value[0]} size={size} />\n  }\n\n  // 2026-05-14 item-anatomy SSOT fix(per codex+Layer A 共識):outer items-start + avatar stack\n  // 鎖 first-line baseline(整 stack 是 prefix slot,h-[1lh] 對齊 first line)。\n  return (\n    <span ref={containerRef} className=\"inline-flex items-start min-w-0\">\n      <ItemPrefix className=\"!justify-start\"><span className=\"inline-flex items-center min-w-0\">\n      {visible.map((person, i) => {\n        // **2026-05-07 v15.11 Bug D 升級 SSOT**:visible avatar 也支援 inline dismiss\n        // (對齊 user directive「avatar = tag」)。Dismiss overlay 走 `AvatarDismissOverlay`\n        // 共用 SSOT(下方 export),Combobox tagRenderer / 此處 / 任何 future avatar consumer\n        // 都用同一視覺 — 紅圈 X 對齊 avatar 右上,hover/focus-visible 才顯。\n        const handleDismiss = onRemove ? () => onRemove(value![i]) : undefined\n        return (\n          <span key={person.name + i} className={`relative inline-flex group/avatar ${i > 0 ? '-ml-0.5' : ''}`} style={{ zIndex: visible.length - i }}>\n            <PersonAvatar\n              person={person}\n              size={size}\n              className=\"ring-2 ring-[var(--surface)]\"\n            />\n            {handleDismiss && <AvatarDismissOverlay onRemove={handleDismiss} label={person.name} />}\n          </span>\n        )\n      })}\n      {overflow > 0 && (\n        <OverflowIndicator\n          count={overflow}\n          size={size}\n          className=\"ring-2 ring-[var(--surface)] -ml-0.5\"\n        >\n          {hidden.map((person, i) => (\n            <Tag\n              key={person.name + i}\n              color=\"neutral\"\n              size=\"sm\"\n              // Tag.avatar 是 ReactNode(非 AvatarData object)——傳 <Avatar> 元素。\n              // Tag 內部用 `w-4 h-4 rounded-full` 容器 slot,Avatar 填滿 object-cover。\n              // **hoverCard 必帶**(avatar.spec.md DS-wide canonical:所有 person avatar 必 hover → ProfileCard)。\n              // 跟 PersonAvatar 共用 `buildPersonProfileCard` helper 確保顯示資訊一致。\n              avatar={\n                <Avatar\n                  src={person.avatarUrl}\n                  alt={person.name}\n                  size={16}\n                  hoverCard={buildPersonProfileCard(person)}\n                />\n              }\n              onRemove={onRemove ? () => onRemove(value![resolvedMax + i]) : undefined}\n            >\n              {person.name}\n            </Tag>\n          ))}\n        </OverflowIndicator>\n      )}\n      </span></ItemPrefix>\n    </span>\n  )\n}\nMultiPersonDisplay.displayName = 'MultiPersonDisplay'\n\n// ── AvatarDismissOverlay ────────────────────────────────────────────────────\n// SSOT for「person avatar overlay dismiss」(2026-05-07 v15.12,user spec confirmed)。\n//\n// **Visual canonical**(對齊 DS new token `--surface-strong`):\n//   - **12×12 圓**(固定,不隨 field size 變)\n//   - **bg `--surface-strong`**(neutral-6),hover → `--surface-strong-hover`\n//     (light=neutral-5 / dark=neutral-7,跨 mode 對稱)\n//   - **X icon size=12 strokeWidth=3**(icon 跟底色一樣大,對齊 checkbox checkmark\n//     sm/md stroke 規格;2026-06-12 同步 checkbox 2026-05-18 簡化 3.5→3,SSOT →\n//     .claude/references/ui-dev-rules.md「小尺寸 icon stroke 補償」)\n//   - **text-on-emphasis**(白 X,確保飽和色底對比)\n//   - **位置 `absolute top-0 right-0`**(button 右上角貼齊 avatar 右上角,完全在 avatar\n//     內 — user-confirmed canonical)\n//\n// **a11y**(codex P1 fix):`opacity-0` 而非 `display:none` — element 在 DOM/tab-order,\n// keyboard tab 可達,觸控 focus-within 也顯。Hover / focus-within / focus-visible\n// 三條件之一觸發 `opacity-100`。\n//\n// **Why centralize**:Combobox tagRenderer (PeoplePicker stack mode) + MultiPersonDisplay\n// dismiss 共用 SSOT,改 1 處全 sync(M17 propagation)。\nfunction AvatarDismissOverlay({ onRemove, label }: { onRemove: () => void; label: string }) {\n  return (\n    <button\n      type=\"button\"\n      onClick={(e) => { e.stopPropagation(); onRemove() }}\n      aria-label={`移除 ${label}`}\n      className={[\n        // **Position(2026-05-07 v15.15 user-confirmed)**:asymmetric `-top-px -right-1`\n        // (top -1px / right -4px)— field padding-y(4px sm/md)緊 → top 只 -1px 安全;\n        // padding-x 12px 寬鬆 → right 凸 4px 達 badge canonical visual。對齊 ClickUp\n        // 世界級 idiom(asymmetric offset by avatar/field size constraint)。\n        'absolute -top-px -right-1 z-10',\n        'inline-flex items-center justify-center',\n        // **12×12 + 2px white ring**(SSOT match stacked avatar,Slack/Material/iOS\n        // notification badge 2px ring canonical)。改用 `[box-shadow:...]` 而非 `ring-2`\n        // 避免跟下方 `focus-visible:ring-2` 在 tailwind-merge 衝突(同 ring family\n        // override 互殺)。Box-shadow inset 0 不影響 layout,也不被 focus-visible ring\n        // 蓋掉(focus 那邊另一條 outline ring 不同 layer)。\n        'w-3 h-3 rounded-full [box-shadow:0_0_0_2px_var(--surface)]',\n        // bg-surface-strong = neutral-6-opaque / hover = neutral-7-opaque(both modes,\n        // step-7 dark 公式自動 lighter → engaged 跨 mode 對稱)\n        'bg-surface-strong text-on-emphasis hover:bg-surface-strong-hover',\n        // a11y(codex P1 fix):opacity 而非 display:none — element 在 DOM/tab-order,\n        // keyboard 可達。Hover / focus-within / focus-visible 三條件之一觸發。\n        'opacity-0 group-hover/avatar:opacity-100 group-focus-within/avatar:opacity-100 focus-visible:opacity-100',\n        'transition-opacity duration-150',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n      ].join(' ')}\n    >\n      <X size={12} strokeWidth={3} aria-hidden />\n    </button>\n  )\n}\n\n// ── PersonAvatarTag(Combobox tagRenderer SSOT for stack mode)─────────────\n// PeoplePicker `multiDisplay='stack'` 模式 wraps Combobox,tagRenderer 不能用 Tag pill\n// (那是 pill mode),改 render 此元件 — Avatar overlap 視覺 + AvatarDismissOverlay。\n// 對齊 user directive「avatar = tag 概念,差別只在視覺,SSOT 一致」(2026-05-07 v15.13)。\n//\n// **架構**(v15.13 重構):本元件**不自包** `group/avatar` / `-ml-0.5` overlap wrapper,\n// 因 Combobox `tagRenderer` 結果會被內部 `<div shrink-0>` 包成 measurement wrapper\n// (useOverflowCount 必要)。把 overlap + group 拉到 Combobox 的 `tagWrapperClassName`\n// 上,sibling-level overlap + group selector 才能正確 chain → AvatarDismissOverlay 的\n// `group-hover/avatar:opacity-100` 才會通。\nfunction PersonAvatarTag({\n  person, size = 'md', onRemove,\n}: {\n  person: PersonData\n  size?: 'sm' | 'md' | 'lg'\n  onRemove?: () => void\n}) {\n  return (\n    <>\n      <PersonAvatar person={person} size={size} className=\"ring-2 ring-[var(--surface)]\" />\n      {onRemove && <AvatarDismissOverlay onRemove={onRemove} label={person.name} />}\n    </>\n  )\n}\nPersonAvatarTag.displayName = 'PersonAvatarTag'\n\nexport { PersonDisplay, MultiPersonDisplay, PersonAvatarTag, buildPersonProfileCard, resolvePerson }\n"],"names":["visible"],"mappings":"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"}

package/dist/components/Popover/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/popover.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAQ3D;;;;;;;;;;;;;;;;;GAiBG;AAEH,QAAA,MAAM,OAAO,yCAAwB,CAAA;AACrC,QAAA,MAAM,cAAc,gHAA2B,CAAA;AAC/C,QAAA,MAAM,aAAa,4GAA0B,CAAA;AAC7C,QAAA,MAAM,YAAY,8GAAyB,CAAA;AAgB3C,QAAA,MAAM,cAAc,gKA6BlB,CAAA;AAKF,UAAU,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,QAAA,MAAM,aAAa,2FAqBlB,CAAA;AAYD,QAAA,MAAM,WAAW,6GAEhB,CAAA;AAGD,QAAA,MAAM,aAAa,6GAElB,CAAA;AAcD,QAAA,MAAM,YAAY,qHAShB,CAAA;AAKF,eAAO,MAAM,WAAW;;;;;;;;;;;CAed,CAAA;AAEV,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,cAAc,EACd,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,GACb,CAAA"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/popover.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAQ3D;;;;;;;;;;;;;;;;;GAiBG;AAEH,QAAA,MAAM,OAAO,yCAAwB,CAAA;AACrC,QAAA,MAAM,cAAc,gHAA2B,CAAA;AAC/C,QAAA,MAAM,aAAa,4GAA0B,CAAA;AAC7C,QAAA,MAAM,YAAY,8GAAyB,CAAA;AAsC3C,QAAA,MAAM,cAAc,gKA0ClB,CAAA;AAKF,UAAU,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,QAAA,MAAM,aAAa,2FAqBlB,CAAA;AAYD,QAAA,MAAM,WAAW,6GAEhB,CAAA;AAGD,QAAA,MAAM,aAAa,6GAElB,CAAA;AAcD,QAAA,MAAM,YAAY,qHAuBhB,CAAA;AAKF,eAAO,MAAM,WAAW;;;;;;;;;;;CAed,CAAA;AAEV,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,cAAc,EACd,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,GACb,CAAA"}

package/dist/components/Popover/popover.js

@@ -14,35 +14,49 @@ const handlePopoverOpenAutoFocus = (e) => {
   e.preventDefault();
   const content = e.currentTarget;
   const firstBodyTarget = content.querySelector(
-    "[data-popover-body] input:not([disabled]),[data-popover-body] textarea:not([disabled]),[data-popover-body] select:not([disabled]),[data-popover-body] button:not([disabled]):not([data-dismiss]),input:not([disabled]),textarea:not([disabled]),button:not([disabled]):not([data-dismiss])"
+    "[data-popover-body] input:not([disabled]),[data-popover-body] textarea:not([disabled]),[data-popover-body] select:not([disabled]),[data-popover-body] button:not([disabled]):not([data-dismiss])"
+  );
+  const firstBareTarget = content.querySelector(
+    "input:not([disabled]),textarea:not([disabled]),select:not([disabled]),button:not([disabled]):not([data-dismiss])"
   );
   const firstFooterButton = content.querySelector(
     "[data-popover-footer] button:not([disabled]):not([data-dismiss])"
   );
-  (firstBodyTarget ?? firstFooterButton ?? content).focus({ preventScroll: true });
+  (firstBodyTarget ?? firstBareTarget ?? firstFooterButton ?? content).focus({ preventScroll: true });
 };
-const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = OVERLAY_COLLISION_PADDING, onOpenAutoFocus, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  PopoverPrimitive.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    collisionPadding,
-    "data-layout-space": "md",
-    onOpenAutoFocus: onOpenAutoFocus ?? handlePopoverOpenAutoFocus,
-    className: cn(
-      "z-50 w-72 rounded-lg border border-border bg-surface-raised text-foreground shadow-[var(--elevation-200)] outline-none",
-      // 2026-05-04 viewport-aware max-h SSOT(從 ProfileCard 升 DS-wide):header/footer 永遠 in-viewport,body 壓縮 scroll
-      // 2026-05-05 audit dim 35 補:加 `min-h-0` 完成 M25 chain invariant(flex item default min-h: auto 阻 shrink)
-      "max-h-[var(--radix-popover-content-available-height,100vh)] flex flex-col overflow-hidden min-h-0",
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 motion-reduce:animate-none",
-      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      "origin-[var(--radix-popover-content-transform-origin)]",
-      className
-    ),
-    ...props
-  }
-) }));
+const PopoverTitleContext = React.createContext(null);
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = OVERLAY_COLLISION_PADDING, onOpenAutoFocus, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) => {
+  const titleId = React.useId();
+  const [hasTitle, setHasTitle] = React.useState(false);
+  const titleContext = React.useMemo(
+    () => ({ titleId, onTitleMount: () => setHasTitle(true), onTitleUnmount: () => setHasTitle(false) }),
+    [titleId]
+  );
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverTitleContext.Provider, { value: titleContext, children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Content,
+    {
+      ref,
+      align,
+      sideOffset,
+      collisionPadding,
+      "data-layout-space": "md",
+      onOpenAutoFocus: onOpenAutoFocus ?? handlePopoverOpenAutoFocus,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy ?? (ariaLabel == null && hasTitle ? titleId : void 0),
+      className: cn(
+        "z-50 w-72 rounded-lg border border-border bg-surface-raised text-foreground shadow-[var(--elevation-200)] outline-none",
+        // 2026-05-04 viewport-aware max-h SSOT(從 ProfileCard 升 DS-wide):header/footer 永遠 in-viewport,body 壓縮 scroll
+        // 2026-05-05 audit dim 35 補:加 `min-h-0` 完成 M25 chain invariant(flex item default min-h: auto 阻 shrink)
+        "max-h-[var(--radix-popover-content-available-height,100vh)] flex flex-col overflow-hidden min-h-0",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 motion-reduce:animate-none",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "origin-[var(--radix-popover-content-transform-origin)]",
+        className
+      ),
+      ...props
+    }
+  ) }) });
+});
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 const PopoverHeader = React.forwardRef(
   ({ className, children, hideClose = false, ...props }, ref) => (
@@ -75,14 +89,26 @@ const PopoverFooter = React.forwardRef(
   ({ ...props }, ref) => /* @__PURE__ */ jsx(SurfaceFooter, { ref, "data-popover-footer": true, ...props })
 );
 PopoverFooter.displayName = "PopoverFooter";
-const PopoverTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "h2",
-  {
-    ref,
-    className: cn("text-body font-medium truncate", className),
-    ...props
-  }
-));
+const PopoverTitle = React.forwardRef(({ className, id, ...props }, ref) => {
+  const titleCtx = React.useContext(PopoverTitleContext);
+  const shouldRegister = id == null && titleCtx != null;
+  const onTitleMount = titleCtx == null ? void 0 : titleCtx.onTitleMount;
+  const onTitleUnmount = titleCtx == null ? void 0 : titleCtx.onTitleUnmount;
+  React.useLayoutEffect(() => {
+    if (!shouldRegister) return;
+    onTitleMount == null ? void 0 : onTitleMount();
+    return onTitleUnmount;
+  }, [shouldRegister, onTitleMount, onTitleUnmount]);
+  return /* @__PURE__ */ jsx(
+    "h2",
+    {
+      ref,
+      id: id ?? (titleCtx == null ? void 0 : titleCtx.titleId),
+      className: cn("text-body font-medium truncate", className),
+      ...props
+    }
+  );
+});
 PopoverTitle.displayName = "PopoverTitle";
 const popoverMeta = {
   component: "Popover",