@qijenchen/design-system 0.1.0-beta.10

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

@@ -0,0 +1,25 @@
+import { nakedCellRowModeAlign } from "../Field/field-wrapper.js";
+import { resolvePerson, buildPersonNameCard } from "./person-display.js";
+const PEOPLE_PICKER_LENGTH1_WRAPPER_CLASS = `flex-1 min-w-0 inline-flex items-center ${nakedCellRowModeAlign}`;
+function getPeoplePickerTagWrapperClass(selectedCount) {
+  return selectedCount === 1 ? PEOPLE_PICKER_LENGTH1_WRAPPER_CLASS : "-ml-0.5 first:ml-0 relative inline-flex group/avatar";
+}
+function personToSelectOption(person) {
+  const p = resolvePerson(person);
+  return {
+    value: p.name,
+    label: p.name,
+    avatar: { src: p.avatarUrl, alt: p.name, hoverCard: buildPersonNameCard(p) },
+    description: p.description
+  };
+}
+function findPerson(people, name) {
+  return people.find((p) => resolvePerson(p).name === name) ?? name;
+}
+export {
+  PEOPLE_PICKER_LENGTH1_WRAPPER_CLASS,
+  findPerson,
+  getPeoplePickerTagWrapperClass,
+  personToSelectOption
+};
+//# sourceMappingURL=people-picker-helpers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"people-picker-helpers.js","sources":["../../../src/components/PeoplePicker/people-picker-helpers.ts"],"sourcesContent":["// PeoplePicker — pure helpers extracted from `people-picker.tsx`(2026-05-18 file-size refactor)\n//\n// 抽出原因:`people-picker.tsx` 達 P1 file-size budget (500 lines)。本檔收 **不消費 component\n// closure** 的純 helper（constant / pure function），讓主檔 ≤ 480。視覺 / behavior /\n// user-facing API 完全未動 — 只是 module-level 邊界搬家。\n//\n// SSOT-bearing render logic(tagRenderer / selectedItemRenderer / 多人 stack 視覺等）仍留在\n// `people-picker.tsx`,因為消費 Combobox / Select / state 等 closure。\n//\n// Hook `check_peoplepicker_ssot_drift.sh` 不檢查本檔 literal — 因規則 cite spec.md row 的義務\n// 在主檔 SSOT-bearing API 邊界處,本檔屬機械搬移。\nimport { nakedCellRowModeAlign } from '@/design-system/components/Field/field-wrapper'\nimport type { SelectOption } from '@/design-system/components/Select/select'\nimport { buildPersonNameCard, resolvePerson, type PersonValue } from './person-display'\n\n// ── Tag wrapper className SSOT ──────────────────────────────────────────────\n//\n// **2026-05-15 Bug 1 fix(Claude+Codex Step 5 比稿 consensus)**:length=1 走 PersonDisplay\n// (avatar+人名+ellipsis,per spec.md §C row 1)需要 width constraint chain;length>=2 走\n// PersonAvatarTag stack overlap(per spec.md §D row 1)需要 negative margin overlap visual。\n// 一個 static wrapper class 涵蓋兩 contract 不可能 — Combobox `OverflowTagList` 把 result 包\n// `shrink-0`,如果 wrapper 還疊 `inline-flex` 就 intrinsic content-width → PersonDisplay\n// truncate 無效(Bug 1 user 抓「越界蓋 indicator」)。\n//\n// **Why centralize**:M14 mechanical guard against future drift。任何人未來改 stack mode 邏輯,\n// 必經此 helper(hook `check_peoplepicker_ssot_drift.sh` 攔接 wrapper class literal in tsx)。\n//\n// **2026-05-15 SSOT alignment**(user verbatim「單選 people picker 沒壞,難道沒有 SSOT?」):\n// 單選 picker wrapper(`select.tsx:229`)= `flex-1 min-w-0 inline-flex items-center +\n// nakedCellRowModeAlign` — proven working,canonical SSOT。本 helper 對齊 single SSOT,\n// **不**自定一套(spec.md §C row 1 +「length=1 視覺 = 跟單人 closed 一致」+ §E「PersonDisplay\n// 共享 renderer」)。\n//\n// `inline-flex items-center` 提供:wrapper 對 PersonDisplay flex container 適當 vertical centering,\n//   不靠外層 tagArea items-center cascade(避免 wrapper 高度 collapse 不可控)。\n// `nakedCellRowModeAlign` 提供:autoRow cell 內 first-line align(對齊既有 row geometry SSOT)。\n//\n// **禁加 overflow-hidden**:inner `<span truncate>` 自帶 overflow-hidden + text-overflow:ellipsis,\n//   wrapper overflow-hidden 反而 clip 24px avatar(ItemPrefix h-[1lh]~20px slot 容不下)+ break inner\n//   ellipsis trigger(圖一 + 圖二 root cause)。\n\n// code-quality-allow: dead-export — SSOT primitive 公開供 future cross-file 消費 + hook\n// `check_peoplepicker_ssot_drift.sh` enforce wrapper class literal pattern\nexport const PEOPLE_PICKER_LENGTH1_WRAPPER_CLASS = `flex-1 min-w-0 inline-flex items-center ${nakedCellRowModeAlign}`\n\n// code-quality-allow: dead-export — paired helper for SSOT primitive(同上 hook + future use rationale)\nexport function getPeoplePickerTagWrapperClass(selectedCount: number): string {\n  return selectedCount === 1\n    ? PEOPLE_PICKER_LENGTH1_WRAPPER_CLASS  // SSOT aligned to single picker wrapper(select.tsx:229)\n    // length>=2 stack 視覺(spec.md §D row 1):圓形 avatar overlap + group/avatar selector for dismiss overlay\n    : '-ml-0.5 first:ml-0 relative inline-flex group/avatar'\n}\n\n// ── Person → SelectOption mapping ───────────────────────────────────────────\n//\n// Issue 4(2026-05-10):forward person 的 description + avatar 給 Select(SelectOption schema\n// 已 unified with SelectMenuOption per Issue 4)。先前 PeoplePicker single mode 透過 Select 開\n// menu 時 dropdown row 只顯純文字 name(資訊弱)— 現透過 wrapper schema unify 直接帶 avatar /\n// description 給 SelectMenu primitive 渲。\n//\n// 2026-05-18 fix(per user directive「所有 avatar hover 都要 NameCard」+ avatar.spec.md\n// DS-wide canonical):dropdown menu items Avatar 必帶 hoverCard,跟 PersonDisplay / Tag\n// avatar 對齊。漏掉 = user 抓「PeoplePicker 選單內 avatar 沒有 namecard」。\nexport function personToSelectOption(person: PersonValue): SelectOption {\n  const p = resolvePerson(person)\n  return {\n    value: p.name,\n    label: p.name,\n    avatar: { src: p.avatarUrl, alt: p.name, hoverCard: buildPersonNameCard(p) },\n    description: p.description,\n  }\n}\n\nexport function findPerson(people: PersonValue[], name: string): PersonValue {\n  return people.find(p => resolvePerson(p).name === name) ?? name\n}\n"],"names":[],"mappings":";;AA2CO,MAAM,sCAAsC,2CAA2C,qBAAqB;AAG5G,SAAS,+BAA+B,eAA+B;AAC5E,SAAO,kBAAkB,IACrB,sCAEA;AACN;AAYO,SAAS,qBAAqB,QAAmC;AACtE,QAAM,IAAI,cAAc,MAAM;AAC9B,SAAO;AAAA,IACL,OAAO,EAAE;AAAA,IACT,OAAO,EAAE;AAAA,IACT,QAAQ,EAAE,KAAK,EAAE,WAAW,KAAK,EAAE,MAAM,WAAW,oBAAoB,CAAC,EAAA;AAAA,IACzE,aAAa,EAAE;AAAA,EAAA;AAEnB;AAEO,SAAS,WAAW,QAAuB,MAA2B;AAC3E,SAAO,OAAO,KAAK,CAAA,MAAK,cAAc,CAAC,EAAE,SAAS,IAAI,KAAK;AAC7D;"}

package/dist/components/PeoplePicker/people-picker.d.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import type { FieldMode, FieldVariant } from '../../components/Field/field-types';
+import { type PersonValue } from './person-display';
+import { PEOPLE_PICKER_LENGTH1_WRAPPER_CLASS, getPeoplePickerTagWrapperClass } from './people-picker-helpers';
+export { PEOPLE_PICKER_LENGTH1_WRAPPER_CLASS, getPeoplePickerTagWrapperClass };
+export interface PeoplePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Field mode(edit / display / readonly / disabled),默認 inherit Field context 或 'edit' */
+    mode?: FieldMode;
+    /** Field chrome variant(對齊 Select / Combobox)*/
+    variant?: FieldVariant;
+    size?: 'sm' | 'md' | 'lg';
+    /** 當前已選的人(單選 PersonValue,多選 PersonValue[])*/
+    value?: PersonValue | PersonValue[] | null;
+    /** 值變更 callback(永遠 emit array — single mode 取 [0] 即 single value)*/
+    onChange?: (value: PersonValue[]) => void;
+    /** 可選人員清單(edit mode 下拉顯示)*/
+    people?: PersonValue[];
+    /** 2026-05-12 Stream C Issue 4 fix(codex Q3 Cluster C):trigger empty placeholder。
+     *  Default '請選擇人員'。**禁** 將 `emptyText`(search-empty)當 trigger placeholder 傳。 */
+    placeholder?: string;
+    /** 搜尋框 placeholder */
+    searchPlaceholder?: string;
+    /** 搜尋無結果訊息(filtered menu empty)。**僅**用於 SelectMenu noResultsText,
+     *  不再 silent 轉 trigger placeholder(2026-05-12 Issue 4 semantic fix)。 */
+    emptyText?: string;
+    className?: string;
+    disabled?: boolean;
+    /** Initial open state(uncontrolled)*/
+    defaultOpen?: boolean;
+    /** open state 變更 callback */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Multi mode 顯示樣式(default 'stack')。Single mode 此 prop 忽略。
+     * - 'stack' — Avatar 疊合 + `+N`(空間省、不可 wrap;default)
+     * - 'pill'  — 每人 Tag pill(可 wrap)
+     */
+    multiDisplay?: 'stack' | 'pill';
+    /**
+     * `multiDisplay='pill'` 模式下是否顯示 avatar prefix(default true)。
+     * 設 false → 純文字 pill,進一步節省空間。對齊 Tag 元件 `avatar` prop SSOT。
+     */
+    pillShowAvatar?: boolean;
+    /** Pill 模式下是否允許 wrap(default true)— 對齊 Combobox `wrap` prop */
+    pillWrap?: boolean;
+    /**
+     * 搜尋型態(2026-05-12 規則 3 ship,3-mode SSOT 對齊 A1-A5 spec):
+     * - `'menu'`(default,backward-compat)— 浮層內搜尋(panel-top search)
+     * - `'trigger'`(multi 模式 opt-in)— inline 搜尋(浮層開時 name 拿掉,avatar 後接 input cursor,
+     *   類 Combobox inline-trigger idiom)
+     * Single mode 永遠 inline-trigger(wrap Select searchable 直接走 inline),此 prop multi 才有意義。
+     */
+    searchIn?: 'menu' | 'trigger';
+    /**
+     * Display 是否渲 ChevronDown + Field naked wrapper(D-path opt-in,2026-05-08)
+     * — DataTable cell display↔edit 像素級對齊用。預設 false(裸 PersonDisplay,backward compat)。
+     * 設 true 時 display 走 fieldWrapperStyles(naked variant)+ ItemSuffix ChevronDown,
+     * 與 edit (Select / Combobox wrapped) 同 DOM 結構,消除 Layer-B padding mismatch。
+     */
+    showDisplayEndIcon?: boolean;
+    /** a11y label */
+    'aria-label'?: string;
+}
+declare const PeoplePicker: React.ForwardRefExoticComponent<PeoplePickerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const peoplePickerMeta: {
+    readonly component: "PeoplePicker";
+    readonly family: 4;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly [];
+        readonly fg: readonly ["text-fg-disabled", "text-fg-muted"];
+        readonly ring: readonly [];
+    };
+};
+export { PeoplePicker };
+//# sourceMappingURL=people-picker.d.ts.map

package/dist/components/PeoplePicker/people-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"people-picker.d.ts","sourceRoot":"","sources":["../../../src/components/PeoplePicker/people-picker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAQ3F,OAAO,EAA0F,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAU3I,OAAO,EACL,mCAAmC,EACnC,8BAA8B,EAG/B,MAAM,yBAAyB,CAAA;AAEhC,OAAO,EAAE,mCAAmC,EAAE,8BAA8B,EAAE,CAAA;AAoB9E,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC/F,yFAAyF;IACzF,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,GAAG,IAAI,CAAA;IAC1C,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,IAAI,CAAA;IACzC,4BAA4B;IAC5B,MAAM,CAAC,EAAE,WAAW,EAAE,CAAA;IACtB;oFACgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,sBAAsB;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;4EACwE;IACxE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sCAAsC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6BAA6B;IAC7B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC/B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,iBAAiB;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,QAAA,MAAM,YAAY,0FAwUhB,CAAA;AAIF,eAAO,MAAM,gBAAgB;;;;;;;;;;;CAWnB,CAAA;AAEV,OAAO,EAAE,YAAY,EAAE,CAAA"}

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

@@ -0,0 +1,263 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { EMPTY_DISPLAY, fieldWrapperStyles, nakedCellRowModeAlign } from "../Field/field-wrapper.js";
+import { ItemSuffix, ICON_SIZE } from "../../patterns/element-anatomy/item-anatomy.js";
+import { useFieldContext, useFieldSurface } from "../Field/field-context.js";
+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, buildPersonNameCard, 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";
+const PeoplePicker = React.forwardRef(function PeoplePicker2({
+  mode: modeProp,
+  variant: variantProp,
+  size = "md",
+  value,
+  onChange,
+  people = [],
+  placeholder = "請選擇人員",
+  // i18n-allow: DS default(2026-05-12 Stream C Issue 4)
+  searchPlaceholder = "搜尋人員…",
+  // i18n-allow: DS default
+  emptyText = "沒有符合的人員",
+  // i18n-allow: DS default — only for SelectMenu noResultsText
+  className,
+  disabled,
+  defaultOpen = false,
+  onOpenChange,
+  multiDisplay = "stack",
+  pillShowAvatar = true,
+  pillWrap = true,
+  searchIn = "menu",
+  showDisplayEndIcon = false,
+  "aria-label": ariaLabel,
+  ...rest
+}, ref) {
+  const fieldCtx = useFieldContext();
+  const surface = useFieldSurface();
+  const mode = modeProp ?? (fieldCtx == null ? void 0 : fieldCtx.mode) ?? "edit";
+  const resolvedMode = disabled ? "disabled" : mode;
+  const resolvedVariant = variantProp ?? (fieldCtx == null ? void 0 : fieldCtx.variant) ?? "default";
+  const isMulti = Array.isArray(value);
+  const isEmpty = !value || isMulti && value.length === 0;
+  if (resolvedMode === "display") {
+    if (!showDisplayEndIcon) {
+      if (isEmpty) return /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: EMPTY_DISPLAY });
+      return isMulti ? /* @__PURE__ */ jsx(MultiPersonDisplay, { value, size, measured: true }) : /* @__PURE__ */ jsx(PersonDisplay, { value, size });
+    }
+    const iconSize = ICON_SIZE[size];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(fieldWrapperStyles({ mode: "display", variant: resolvedVariant, size }), className),
+        "data-field-mode": "display",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn("flex-1 min-w-0 inline-flex items-center", nakedCellRowModeAlign), children: isEmpty ? /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: EMPTY_DISPLAY }) : isMulti ? /* @__PURE__ */ jsx(MultiPersonDisplay, { value, size, measured: true }) : /* @__PURE__ */ jsx(PersonDisplay, { value, size }) }),
+          /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(ChevronDown, { size: iconSize, className: "shrink-0 text-fg-muted", "aria-hidden": true }) })
+        ]
+      }
+    );
+  }
+  if (resolvedMode !== "edit") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(fieldWrapperStyles({ mode: resolvedMode, variant: resolvedVariant, size }), className),
+        "data-field-mode": resolvedMode,
+        "aria-label": ariaLabel,
+        ...rest,
+        children: /* @__PURE__ */ jsx("span", { className: cn("flex-1 min-w-0 inline-flex items-center", nakedCellRowModeAlign, resolvedMode === "disabled" && "text-fg-disabled"), children: isEmpty ? /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: EMPTY_DISPLAY }) : isMulti ? /* @__PURE__ */ jsx(MultiPersonDisplay, { value, size, measured: true }) : /* @__PURE__ */ jsx(PersonDisplay, { value, size }) })
+      }
+    );
+  }
+  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(
+      Select,
+      {
+        ref,
+        size,
+        variant: resolvedVariant,
+        options: people.map(personToSelectOption),
+        value: selectedNames[0] ?? null,
+        onChange: handleSingleChange,
+        searchable: true,
+        placeholder,
+        defaultOpen,
+        onOpenChange,
+        className,
+        "aria-label": ariaLabel,
+        selectedItemRenderer: (opt) => /* @__PURE__ */ jsx(PersonDisplay, { value: findPerson(people, opt.value), size }),
+        ...rest
+      }
+    );
+  }
+  if (multiDisplay === "pill") {
+    const handleMultiChange2 = (next) => {
+      onChange == null ? void 0 : onChange(next.map((name) => findPerson(people, name)));
+    };
+    return /* @__PURE__ */ jsx(
+      Combobox,
+      {
+        ref,
+        size,
+        variant: resolvedVariant,
+        options: people.map(personToSelectOption),
+        value: selectedNames,
+        onChange: handleMultiChange2,
+        searchable: true,
+        searchPlaceholder,
+        placeholder,
+        emptyPlaceholder: emptyText,
+        wrap: pillWrap,
+        defaultOpen,
+        onOpenChange,
+        className,
+        "aria-label": ariaLabel,
+        ...rest,
+        tagRenderer: (item, onRemove) => {
+          const p = resolvePerson(findPerson(people, item.value));
+          return /* @__PURE__ */ jsx(
+            Tag,
+            {
+              size,
+              color: "neutral",
+              avatar: pillShowAvatar ? /* @__PURE__ */ jsx(Avatar, { src: p.avatarUrl, alt: p.name, size: 16, hoverCard: buildPersonNameCard(p) }) : void 0,
+              onDismiss: onRemove,
+              children: p.name
+            },
+            item.value
+          );
+        }
+      }
+    );
+  }
+  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,
+    {
+      ref: mergedStackRef,
+      size,
+      variant: resolvedVariant,
+      options: people.map(personToSelectOption),
+      value: selectedNames,
+      onChange: handleMultiChange,
+      searchable: true,
+      searchIn,
+      searchPlaceholder,
+      placeholder,
+      emptyPlaceholder: emptyText,
+      wrap: false,
+      defaultOpen,
+      onOpenChange,
+      className: cn(className, !isEmpty && surface === "form" && "!px-3"),
+      "aria-label": ariaLabel,
+      tagWrapperClassName: getPeoplePickerTagWrapperClass(selectedNames.length),
+      overflowWrapperClassName: "-ml-0.5 first:ml-0 relative inline-flex",
+      tagAreaGapPx: 0,
+      tagAreaPaddingLeftPx: void 0,
+      overflowShape: "circle",
+      visibleCountOverride: stackVisibleCount,
+      renderHiddenTag: (item) => {
+        const p = resolvePerson(findPerson(people, item.value));
+        return /* @__PURE__ */ jsx(
+          Tag,
+          {
+            color: "neutral",
+            size: "sm",
+            avatar: /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                src: p.avatarUrl,
+                alt: p.name,
+                size: 16,
+                hoverCard: buildPersonNameCard(p)
+              }
+            ),
+            onDismiss: () => {
+              onChange == null ? void 0 : onChange(selectedNames.filter((n) => n !== item.value).map((n) => findPerson(people, n)));
+            },
+            children: p.name
+          },
+          item.value
+        );
+      },
+      ...rest,
+      tagRenderer: (item, onRemove) => {
+        const p = resolvePerson(findPerson(people, item.value));
+        if (selectedNames.length === 1) {
+          return /* @__PURE__ */ jsx(PersonDisplay, { value: p, size }, item.value);
+        }
+        return /* @__PURE__ */ jsx(
+          PersonAvatarTag,
+          {
+            person: p,
+            size,
+            onRemove
+          },
+          item.value
+        );
+      }
+    }
+  );
+});
+PeoplePicker.displayName = "PeoplePicker";
+const peoplePickerMeta = {
+  component: "PeoplePicker",
+  family: 4,
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: [],
+    fg: ["text-fg-disabled", "text-fg-muted"],
+    ring: []
+  }
+};
+export {
+  PEOPLE_PICKER_LENGTH1_WRAPPER_CLASS,
+  PeoplePicker,
+  getPeoplePickerTagWrapperClass,
+  peoplePickerMeta
+};
+//# sourceMappingURL=people-picker.js.map

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

@@ -0,0 +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 509 `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-3`; 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 { useFieldContext, useFieldSurface } 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, buildPersonNameCard, 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 自選):\n//       - **'stack'**(default,baseline 既有視覺)— Avatar 疊合 + `+N` overflow indicator,\n//         不可 wrap。Trigger 自組 + 直接 wrap `<SelectMenu multiple>` primitive,\n//         trigger 內 render `<MultiPersonDisplay>` reuse baseline primitive(SSOT)。\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 = 'md',\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,\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 fieldCtx = useFieldContext()\n  const surface = useFieldSurface()\n  const mode: FieldMode = modeProp ?? fieldCtx?.mode ?? 'edit'\n  const resolvedMode: FieldMode = disabled ? 'disabled' : mode\n  const resolvedVariant: FieldVariant = variantProp ?? fieldCtx?.variant ?? 'default'\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-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      </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 509 `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={buildPersonNameCard(p)} />\n                : undefined}\n              onDismiss={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-3`(固定 12px)直接 override `tagPadding[size]`,\n      // 達成 GitHub PeoplePicker fixed 12px inset(對齊 cell context 同 13px from cell.left 含 1px border)。\n      // - form + 有 tag → `!px-3`(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-3')}\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={buildPersonNameCard(p)}\n              />\n            }\n            onDismiss={() => {\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        // 是 future 工作(需 PeoplePicker 加 searchIn='trigger' opt-in,當前 wrapped Combobox 走 menu 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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"}

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

@@ -0,0 +1,66 @@
+import * as React from 'react';
+export interface PersonData {
+    name: string;
+    avatarUrl?: string;
+    /** 角色 / 部門 / ID 等 meta 單行(NameCard subtitle) */
+    description?: string;
+    /** Presence 狀態(對齊 Avatar presence canonical)。**2026-05-14 v12 update**(per user 拍板):
+     *  production 每 user 一定有 presence state,**undefined = loading transient(資料還沒讀到)**,
+     *  不是「user 沒設定」。NameCard 在 undefined 期間隱藏整 status block,**禁** render「Status not set」
+     *  placeholder 文字。 */
+    status?: 'online' | 'away' | 'busy' | 'offline';
+    /** Status 訊息(NameCard status section)。只在 status defined 時 render,缺則顯 `—` placeholder。
+     *  Status undefined 整 block skip(無 statusMessage 也跟著 skip)。 */
+    statusMessage?: React.ReactNode;
+    /** **2026-05-07 v15.7 user directive**:NameCard default 只 render `id` + `employeeNumber`,
+     *  其他 description 一律 opt-in by consumer 透過 `fields` array prop。對齊
+     *  `NAMECARD_DEFAULT_FIELD_KEYS = ['id', 'employeeNumber']`。 */
+    id?: string;
+    employeeNumber?: string;
+    /** 自訂額外 fields(在 default fields 之後 append)。Email / Phone / Department / Location
+     *  / 任何其他 description 一律走這個 prop(opt-in,consumer 自選)。 */
+    fields?: {
+        label: string;
+        value: string;
+    }[];
+    /** 跳至完整 profile 頁的 handler(hover NameCard 必含,不傳時 fallback noop placeholder) */
+    onViewProfile?: () => void;
+}
+export type PersonValue = string | PersonData;
+declare function resolvePerson(value: PersonValue): PersonData;
+declare function buildPersonNameCard(person: PersonData): React.ReactNode;
+declare function PersonDisplay({ value, size }: {
+    value?: PersonValue | null;
+    size?: 'sm' | 'md' | 'lg';
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace PersonDisplay {
+    var displayName: string;
+}
+declare function MultiPersonDisplay({ value, size, max, measured, onRemove, }: {
+    value?: PersonValue[] | null;
+    size?: 'sm' | 'md' | 'lg';
+    /** 最多顯示幾個 avatar(不含 +N),預設 3。`measured=true` 時忽略此 prop(改 container width 算)*/
+    max?: number;
+    /**
+     * 2026-05-15 codex Round 5 C+ SSOT fix:`measured=true` 啟動 container-width 量測(取代 hardcode `max ?? 3`)
+     * → display + edit stack 同 algorithm(同 cell width → 同 overflow 判斷),不再 display 用固定 3 vs edit
+     * 用 useOverflowCount。對齊 field-controls.spec.md:286 「4-mode 共享 renderer」contract + user round 3
+     * verbatim「同空間兩判斷點」SSOT directive。Default false 保 backward compat(non-cell context 仍 max ?? 3)。
+     */
+    measured?: boolean;
+    /** 傳入時啟用 dismiss(edit mode),callback 接收被移除的 person */
+    onRemove?: (person: PersonValue) => void;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace MultiPersonDisplay {
+    var displayName: string;
+}
+declare function PersonAvatarTag({ person, size, onRemove, }: {
+    person: PersonData;
+    size?: 'sm' | 'md' | 'lg';
+    onRemove?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace PersonAvatarTag {
+    var displayName: string;
+}
+export { PersonDisplay, MultiPersonDisplay, PersonAvatarTag, buildPersonNameCard, resolvePerson };
+//# sourceMappingURL=person-display.d.ts.map

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

@@ -0,0 +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,gDAAgD;IAChD,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,+EAA+E;IAC/E,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,mBAAmB,CAAC,MAAM,EAAE,UAAU,GAAG,KAAK,CAAC,SAAS,CAoBhE;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;;;AAqL3B,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,mBAAmB,EAAE,aAAa,EAAE,CAAA"}