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

package/dist/components/DataTable/cell-registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"cell-registry.js","sources":["../../../src/components/DataTable/cell-registry.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// code-quality-allow: file-size — Cell Registry 含 10 cell-type components(string/number/date/time/select/multiSelect/person/multiPerson/boolean/url)+ shared helpers,split-into-files 會破壞 type-keyed registry SSOT canonical\n// DataTable Cell Registry — type-keyed SSOT for cell rendering(Phase C 2026-05-05)\n//\n// 對齊 M17 SSOT consolidation + audit recommendation:\n//   原 `renderTypedValue` switch + `EditableCellContent` switch 兩條平行 type-switch 已 collapse\n//   為**一張 type → cell component** registry。每個 cell component 同時處理 display / edit mode,\n//   靠底層 Field control 的 `mode` prop 切換。\n//\n// 設計原則:\n//   - 每個 cell component 接同一組 props(`CellComponentProps`)\n//   - 用 `variant=\"naked\"` — DataTable cell-as-input substrate(對齊 Field B1 chrome=bare)\n//   - 消費 full Field 家族 primitive(無 stub)\n//   - 不再用 `meta._editable` 私有 flag — `isEditable` 直接顯式入參(消除 M1 hack)\n//\n// World-class 對照(@benchmark-unverified):AG Grid cellRendererSelector / Material X-Grid\n// `valueGetter + renderCell` / Notion property type registry。\n\nimport * as React from 'react'\nimport type { ComponentType } from 'react'\nimport { Pencil } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport type { ColumnType } from './column-types'\nimport { Input } from '@/design-system/components/Input/input'\nimport { Textarea } from '@/design-system/components/Textarea/textarea'\nimport { NumberInput } from '@/design-system/components/NumberInput/number-input'\nimport { Select } from '@/design-system/components/Select/select'\nimport { Combobox } from '@/design-system/components/Combobox/combobox'\nimport { DatePicker } from '@/design-system/components/DatePicker/date-picker'\nimport { TimePicker } from '@/design-system/components/TimePicker/time-picker'\nimport { PeoplePicker } from '@/design-system/components/PeoplePicker/people-picker'\nimport { LinkInput } from '@/design-system/components/LinkInput/link-input'\nimport { Checkbox } from '@/design-system/components/Checkbox/checkbox'\nimport { Button } from '@/design-system/components/Button/button'\nimport type { PersonValue } from '@/design-system/components/PeoplePicker/person-display'\nimport { FieldSurfaceProvider, FieldSurfaceSizeProvider } from '@/design-system/components/Field/field-context'\n\n// ── Types ────────────────────────────────────────────────────────────────────\n\nexport type CellMode = 'display' | 'edit'\nexport type CellSize = 'sm' | 'md' | 'lg'\n\nexport interface CellComponentProps {\n  // any-allow: free-form column value(consumer-defined,跨 type 共用 signature)\n  value: any\n  // any-allow: free-form consumer meta bag(prefix / options / formatOptions / locale / linkLabel 等)\n  meta: Record<string, any>\n  mode: CellMode\n  size: CellSize\n  autoRowHeight: boolean\n  /** 該 cell 是否可編。replaces 舊 `meta._editable` 私有 flag(Phase C M1 hack 移除)。 */\n  isEditable?: boolean\n  /** 2026-05-13:cell 是否 disabled(state overlay,orthogonal to display/edit lifecycle)。\n   *  per codex Q3 verdict:不擴 CellMode='disabled',加 prop。各 Cell function 收 true 時\n   *  傳 `mode='disabled'` 給 inner Field control,各 Field 內部走具體 disabled token(非 wrapper opacity)。 */\n  isDisabled?: boolean\n  /** Cell 進 edit mode → 提交新值(blur / Enter / option select 都觸發)— 提交後**自動 exit edit**。\n   *  適用 single-shot commit:string / number / select(single)/ person(single)/ date / time / boolean / url。 */\n  onCommit?: (next: unknown) => void\n  /** Live commit — 提交新值但 **不 exit edit**(popover 持續開)。\n   *  適用 multi-select 類:multiSelect / multiPerson — user 連續勾選,直到點外面才關。\n   *  對齊 Notion / Linear / Airtable canonical:multi-pick popover 不在每次 toggle 後關閉。 */\n  onCommitLive?: (next: unknown) => void\n  /** Esc 取消編輯,不 commit。 */\n  onCancel?: () => void\n  /** URL cell 專用:hover 顯示的 Pencil 鈕 → 進 edit mode(read mode 保留 link click 語意)。 */\n  onRequestEdit?: () => void\n  /** Per-keystroke draft propagation(2026-05-10 Phase 7 D.3 portal Field virtualizer unmount preserve draft):\n   *  Edit mode 內部 input onChange/onValueChange 每 keystroke 呼叫 onDraft,讓 lifted draft state(in\n   *  data-table.tsx)持有 user 編輯中字。Cell DOM unmount(virtualizer scroll out)時 draft 在\n   *  parent state 不丟;mount-back 時 portal Field value 從 draft 取,user 字保留。\n   *  非 portal mode(inline edit)不傳此 prop,各 Cell 走原 uncontrolled defaultValue 路徑。 */\n  onDraft?: (next: unknown) => void\n}\n\n// ── Helpers ──────────────────────────────────────────────────────────────────\n\n/** 鍵盤 commit / cancel — string / number cell edit mode 共用 */\nfunction makeKeyHandler(\n  onCommit?: (v: unknown) => void,\n  onCancel?: () => void,\n  parseValue?: (raw: string) => unknown,\n) {\n  return (e: React.KeyboardEvent<HTMLInputElement>) => {\n    // IME 組字 guard(2026-07-05 D4 fix):中文輸入法選字的 Enter 是組字確認、Esc 是取消組字,\n    // 非 commit / cancel 意圖 — 無 guard 會把半截組字提交並退出 edit(Esc 則丟棄整個 draft)。\n    // 同 data-table.tsx nav handler 既有寫法(isComposing + Safari/舊 Chrome keyCode 229)。\n    if (e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) return\n    if (e.key === 'Escape') { e.preventDefault(); onCancel?.() }\n    if (e.key === 'Enter') {\n      e.preventDefault()\n      const raw = (e.target as HTMLInputElement).value\n      onCommit?.(parseValue ? parseValue(raw) : raw)\n    }\n  }\n}\n\nconst sizeForInput = (size: CellSize): CellSize => size\n\n/** 2026-05-13 Q3 helper(per codex Q3 verdict):cell display + isDisabled → Field mode='disabled'。\n *  Cell display lifecycle 不擴 CellMode='disabled',而是各 Cell 在 display branch 翻譯 isDisabled\n *  → Field mode='disabled' prop。inner Field 內部走具體 disabled token(text-fg-disabled / bg-disabled 等),\n *  非 wrapper blanket opacity-disabled 逃生艙(per color.spec.md:729)。 */\nconst displayOrDisabled = (isDisabled?: boolean): 'display' | 'disabled' =>\n  isDisabled ? 'disabled' : 'display'\n\n// ── Cell Components ──────────────────────────────────────────────────────────\n\nfunction StringCell({ value, meta, mode, size, isDisabled, autoRowHeight, onCommit, onCancel, onDraft }: CellComponentProps) {\n  // 2026-05-14 I9 fix(per codex+Layer A 共識):meta.maxLines opt-in line-clamp。\n  // display autoRow 用 Tailwind arbitrary line-clamp 支援 N rows;edit textarea field-sizing\n  // 已 auto-grow to content,natural match clamp。\n  // 2026-05-16 Round 5 audit Dim 27 fix:narrow type 取代 `as any` cast。\n  const maxLines: number | undefined = (meta as { maxLines?: number } | undefined)?.maxLines\n  const clampClass = maxLines && autoRowHeight ? `line-clamp-[${maxLines}]` : undefined\n  // string type canonical(2026-05-05 v2 user 校正:input space ≥ display space):\n  //   - autoRowHeight: Textarea(display + edit)— display wrap text 撐高 row,edit textarea\n  //     多行輸入、`!h-full` 填 cell。對齊 Notion long-text cell canonical。\n  //   - fixed: Input(display + edit)— 單行 truncate display,單行 input edit;Field naked intrinsic\n  //     高 = cell 高 = h-field-md,文字位置 display↔edit 完全一致。對齊 AG Grid / Material X-Grid。\n  //   - autoRowHeight 是 table 框架決定(consumer 不需 per-column 設 meta.wrap)。\n  //   - 互動(Textarea):Esc cancel / Cmd|Ctrl+Enter commit / blur commit;Enter 保留換行\n  //   - 互動(Input):Esc cancel / Enter commit / blur commit\n  const v = value != null ? String(value) : ''\n  if (mode === 'display') {\n    // size 必傳:DataTable cell 字級隨 size 變(sm/md text-body / lg text-body-lg),\n    // 對齊 Field family size→font SSOT(field-wrapper.tsx:60-64)。漏傳 → fallback md → lg 表格\n    // 字卡 14px 跟 Select/Date 等有傳 size 的 cell 不一致(2026-06-08 user 抓 frozen string 欄字偏小)。\n    return autoRowHeight\n      ? <Textarea variant=\"naked\" mode={displayOrDisabled(isDisabled)} value={v} size={size} className={clampClass} />\n      : <Input variant=\"naked\" mode={displayOrDisabled(isDisabled)} value={v} size={size} />\n  }\n  if (autoRowHeight) {\n    // 2026-05-14 I8 fix(per codex verdict + user 抓「edit cell shrink」):\n    // 原 `wrapRows = value.length / 40` 字元估算不準(對應實際 column width 不同\n    // → cell 進 edit shrink)。改 CSS `field-sizing: content`(Chrome 123+ / FF 122+ /\n    // Safari 17+)讓 textarea 自動 grow to content,匹配 display wrap 真實高度。\n    // Fallback rows 仍保留給舊 browser(rows attr 在 field-sizing 支援時被覆蓋)。\n    const newlineRows = (v.match(/\\n/g) || []).length + 1\n    const wrapRows = Math.ceil(v.length / 40)\n    const estimateRows = Math.min(10, Math.max(1, newlineRows, wrapRows))\n    return (\n      <Textarea\n        autoFocus\n        variant=\"naked\"\n        size={sizeForInput(size)}\n        rows={estimateRows}\n        defaultValue={v}\n        // any-allow: CSS `field-sizing` 屬性 Chrome 123+/FF 122+/Safari 17+ 支援但 TypeScript lib.dom\n        // 尚未加 type;narrow 到 CSSProperties 仍需 cast,保留 single-site any 較 type aug 簡潔。\n        style={{ fieldSizing: 'content' } as React.CSSProperties}\n        onChange={(e) => onDraft?.((e.target as HTMLTextAreaElement).value)}\n        onBlur={(e) => onCommit?.((e.target as HTMLTextAreaElement).value)}\n        onKeyDown={(e) => {\n          // IME 組字 guard(2026-07-05 D4 fix,同 makeKeyHandler)\n          if (e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) return\n          if (e.key === 'Escape') { e.preventDefault(); onCancel?.() }\n          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n            e.preventDefault()\n            onCommit?.((e.target as HTMLTextAreaElement).value)\n          }\n        }}\n      />\n    )\n  }\n  return (\n    <Input\n      autoFocus\n      variant=\"naked\"\n      size={sizeForInput(size)}\n      defaultValue={v}\n      onChange={(e) => onDraft?.(e.target.value)}\n      onBlur={(e) => onCommit?.(e.target.value)}\n      onKeyDown={makeKeyHandler(onCommit, onCancel)}\n    />\n  )\n}\n\nfunction NumberCell({ value, meta, mode, size, isDisabled, onCommit, onCancel, onDraft }: CellComponentProps) {\n  // currency 透過 columnType-aware prefix:type='currency' → 預設 '$'(可 override)\n  const isCurrency = meta?.type === 'currency'\n  const prefix = isCurrency ? (meta?.prefix ?? '$') : meta?.prefix\n  // React #310 fix:useState 必在 display early-return 前無條件呼叫。同一 memo'd cell instance\n  // 在 display↔edit 切換時被重用(render site 無 key={mode},data-table.tsx:1352),hook 數量不可變,\n  // 否則 Rules of Hooks violation → React #310 crash。對齊 combobox/select hoist pattern。\n  const initial = typeof value === 'number' ? value : null\n  const [localValue, setLocalValue] = React.useState<number | null>(initial)\n  if (mode === 'display') {\n    return (\n      <NumberInput\n        variant=\"naked\"\n        mode={displayOrDisabled(isDisabled)}\n        value={value as number | null}\n        // size 必傳(同 StringCell)— currency/number cell 字級隨 DataTable size 變,對齊 Field SSOT。\n        size={size}\n        prefix={prefix}\n        suffix={meta?.suffix}\n        precision={meta?.precision}\n        locale={meta?.locale}\n      />\n    )\n  }\n  // Edit mode value pre-fill canonical(2026-05-05):NumberInput edit 強制 controlled\n  // (`value={value ?? ''}`)— 若 NumberCell 以 `defaultValue` 傳入,NumberInput value=undefined → ''\n  // empty。對齊 cell-as-input「edit mode 自動帶入 display 值」(對齊 Notion / Airtable 共識),\n  // 改用 local state controlled。User typing → setLocalValue;blur/Enter → onCommit(localValue)。\n  // (initial + useState 已 hoist 到 display-return 前 — 見上方 React #310 fix。)\n  return (\n    <NumberInput\n      autoFocus\n      variant=\"naked\"\n      size={sizeForInput(size)}\n      value={localValue}\n      onChange={(v) => { setLocalValue(v); onDraft?.(v) }}\n      prefix={prefix}\n      suffix={meta?.suffix}\n      precision={meta?.precision}\n      onBlur={() => onCommit?.(localValue)}\n      onKeyDown={(e) => {\n        // IME 組字 guard(2026-07-05 D4 fix,同 makeKeyHandler;IME 可在 number 欄輸入全形數字)\n        if (e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) return\n        if (e.key === 'Escape') { e.preventDefault(); onCancel?.() }\n        if (e.key === 'Enter') { e.preventDefault(); onCommit?.(localValue) }\n      }}\n    />\n  )\n}\n\n// Cell-as-input dismiss canonical(2026-05-05):defaultOpen=true 開始 → user click 外 popover 關\n// → 元件 fire onOpenChange(false) → cell call onCancel exit edit。否則 cell 卡 edit mode 不可 re-trigger\n// (對齊 Airtable / Notion canonical:click 外即關)。\nconst dismissOnClose = (onCancel?: () => void) => (open: boolean) => { if (!open) onCancel?.() }\n\n// Mode-keyed remount canonical(2026-05-05):display↔edit 切換時,因 React reconciliation 同 type 同\n// position 會重用 instance,導致 `useState(defaultOpen)` 只在首次 mount 跑(那時 mode='display'\n// defaultOpen 沒給→預設 false)。後續 mode='edit' 即使傳 defaultOpen=true 也無效。\n// Fix:`key={mode}` 強制 React unmount + remount,每次切 mode 都重跑 useState init。\n// 對齊 Notion / Airtable cell-as-input「display 跟 edit 是不同 mount cycle」語義。\n\nfunction DateCell({ value, meta, mode, size, isDisabled, isEditable, onCommit, onCancel }: CellComponentProps) {\n  if (mode === 'display') {\n    return (\n      <DatePicker\n        key=\"display\"\n        variant=\"naked\"\n        mode={displayOrDisabled(isDisabled)}\n        value={value as string | null}\n        size={size}\n        formatOptions={meta?.formatOptions}\n        locale={meta?.locale}\n        // Indicator(calendar icon)= editable affordance(2026-05-10 user 糾正)。\n        // Non-editable cell 不該顯 picker indicator(誤導 read-only 為 editable)。\n        // 對齊 UrlCell L394 / BooleanCell L368 既有 isEditable conditional pattern。\n        showDisplayEndIcon={isEditable === true}\n      />\n    )\n  }\n  return (\n    <DatePicker\n      key=\"edit\"\n      autoFocus\n      variant=\"naked\"\n      size={sizeForInput(size)}\n      value={typeof value === 'string' ? value : null}\n      showTime={meta?.includeTime === true}\n      onChange={(v) => onCommit?.(v)}\n      defaultOpen\n      onOpenChange={dismissOnClose(onCancel)}\n    />\n  )\n}\n\nfunction TimeCell({ value, meta, mode, size, isDisabled, isEditable, onCommit, onCancel }: CellComponentProps) {\n  if (mode === 'display') {\n    return (\n      <TimePicker\n        key=\"display\"\n        variant=\"naked\"\n        mode={displayOrDisabled(isDisabled)}\n        value={value as string | null}\n        size={size}\n        formatOptions={meta?.formatOptions}\n        locale={meta?.locale}\n        showDisplayEndIcon={isEditable === true}  // 2026-05-10:non-editable 不顯 indicator\n      />\n    )\n  }\n  return (\n    <TimePicker\n      key=\"edit\"\n      variant=\"naked\"\n      size={sizeForInput(size)}\n      value={typeof value === 'string' ? value : null}\n      showSeconds={meta?.showSeconds === true}\n      minuteStep={meta?.minuteStep}\n      secondStep={meta?.secondStep}\n      onChange={(v) => onCommit?.(v)}\n      defaultOpen\n      onOpenChange={dismissOnClose(onCancel)}\n    />\n  )\n}\n\nfunction SelectCell({ value, meta, mode, size, isDisabled, isEditable, onCommit, onCancel }: CellComponentProps) {\n  // Display canonical(2026-05-05):cell IS variant,default plain text(no Tag pill 疊在 cell border 內)。\n  // Consumer 可在 column meta.display='tag' opt-in 內容導向的 Tag 視覺(category 含色彩標籤等)。\n  // 對齊 JTable / AG Grid「renderer/editor 視覺一致」canonical。\n  const displayMode = (meta?.display as 'plain' | 'tag' | undefined) ?? 'plain'\n  if (mode === 'display') {\n    return (\n      <Select\n        key=\"display\"\n        variant=\"naked\"\n        mode={displayOrDisabled(isDisabled)}\n        value={value as string | null}\n        options={meta?.options ?? []}\n        size={size}\n        display={displayMode}\n        showDisplayEndIcon={isEditable === true}  // 2026-05-10:non-editable 不顯 chevron indicator\n      />\n    )\n  }\n  return (\n    <Select\n      key=\"edit\"\n      autoFocus\n      variant=\"naked\"\n      size={sizeForInput(size)}\n      options={meta?.options ?? []}\n      value={value as string | null | undefined}\n      onChange={(v) => onCommit?.(v)}\n      // B7(2026-05-05):cell 編輯時支援 inline search,沿用 Select.searchable 機制(對齊 cell-as-input\n      // 「沿用既有輸入框互動」原則)。Default false,consumer 在 meta.searchable 開啟。\n      searchable={meta?.searchable === true}\n      display={displayMode}\n      defaultOpen\n      onOpenChange={dismissOnClose(onCancel)}\n    />\n  )\n}\n\nfunction MultiSelectCell({ value, meta, mode, size, isDisabled, autoRowHeight, isEditable, onCommitLive, onCancel }: CellComponentProps) {\n  const wrap = autoRowHeight && meta?.wrap === true\n  if (mode === 'display') {\n    return (\n      <Combobox\n        key=\"display\"\n        variant=\"naked\"\n        mode={displayOrDisabled(isDisabled)}\n        value={(value as string[] | null) ?? []}\n        options={meta?.options ?? []}\n        wrap={wrap}\n        size={size}\n        showDisplayEndIcon={isEditable === true}  // 2026-05-10:non-editable 不顯 chevron indicator\n      />\n    )\n  }\n  // Multi 用 onCommitLive(commit 但不 exit edit)— 每勾一項即時生效,popover 持續開\n  // 直到點外面;onOpenChange(false) → onCancel exit edit。對齊 Notion / Linear / Airtable canonical。\n  return (\n    <Combobox\n      key=\"edit\"\n      variant=\"naked\"\n      size={sizeForInput(size)}\n      options={meta?.options ?? []}\n      value={Array.isArray(value) ? (value as string[]) : []}\n      onChange={(v) => onCommitLive?.(v)}\n      defaultOpen\n      onOpenChange={dismissOnClose(onCancel)}\n    />\n  )\n}\n\nfunction PersonCell({ value, mode, size, isDisabled, isEditable, onCommit, onCancel, meta }: CellComponentProps) {\n  if (mode === 'display') {\n    // 2026-05-10:non-editable 不顯 chevron indicator(對齊 UrlCell isEditable conditional pattern)\n    return <PeoplePicker key=\"display\" variant=\"naked\" mode={displayOrDisabled(isDisabled)} value={value as PersonValue | null} size={size} showDisplayEndIcon={isEditable === true} />\n  }\n  return (\n    <PeoplePicker\n      key=\"edit\"\n      variant=\"naked\"\n      size={sizeForInput(size)}\n      value={value as PersonValue | null}\n      people={meta?.people ?? []}\n      // PeoplePicker onChange 永遠 emit array(API contract);single mode commit 取首位\n      onChange={(next) => onCommit?.(next[0] ?? null)}\n      defaultOpen\n      onOpenChange={dismissOnClose(onCancel)}\n    />\n  )\n}\n\nfunction MultiPersonCell({ value, mode, size, isDisabled, isEditable, onCommitLive, onCancel, meta }: CellComponentProps) {\n  if (mode === 'display') {\n    // 2026-05-10:non-editable 不顯 chevron indicator\n    return <PeoplePicker key=\"display\" variant=\"naked\" mode={displayOrDisabled(isDisabled)} value={(value as PersonValue[]) ?? []} size={size} showDisplayEndIcon={isEditable === true} />\n  }\n  // Multi 用 onCommitLive(commit 但不 exit edit)— 每勾一人即時生效,popover 持續開\n  // 直到點外面;onOpenChange(false) → onCancel exit edit。對齊 multiSelect canonical。\n  return (\n    <PeoplePicker\n      key=\"edit\"\n      variant=\"naked\"\n      size={sizeForInput(size)}\n      value={Array.isArray(value) ? (value as PersonValue[]) : []}\n      people={meta?.people ?? []}\n      onChange={(next) => onCommitLive?.(next)}\n      defaultOpen\n      onOpenChange={dismissOnClose(onCancel)}\n    />\n  )\n}\n\nfunction BooleanCell({ value, mode, meta, size, isEditable, isDisabled, onCommit }: CellComponentProps) {\n  // boolean 不分 read/edit mode — display 渲 mode='display' 純展示;editable 時直接 toggle Checkbox\n  // 2026-05-13 codex V1 fix:editable=true + disabled=true 之前 fall through to live Checkbox,\n  // onCheckedChange 仍 fire(violate disabled contract)。Fix:`!isEditable || isDisabled` →\n  // 走 display branch,Checkbox 拿 disabled mode + 不接 onCheckedChange。\n  if (mode === 'display' && (!isEditable || isDisabled)) {\n    return <Checkbox variant=\"naked\" mode={displayOrDisabled(isDisabled)} checked={value === true} />\n  }\n  return (\n    <Checkbox\n      size={size === 'lg' ? 'lg' : 'md'}\n      checked={value === true}\n      onCheckedChange={(checked) => onCommit?.(checked === true)}\n      aria-label={meta?.ariaLabel ?? '切換'}\n    />\n  )\n}\n\n/**\n * UrlCell — Phase C drift fix:\n *   舊 EditableCellContent edit mode 對 url 走 plain `<Input>`(失去 URL 驗證 + auto-link)。\n *   現改用 `<LinkInput>` edit mode → 保留 URL parse / hostname 顯示一致性 + 鍵盤 commit / cancel。\n *   read mode 仍 `<LinkInput mode={displayOrDisabled(isDisabled)}>` = 一致 SSOT。\n *   editable 互動:hover 時右側出 Pencil 鈕 → 進 edit(保留 link click 語意,對齊原 spec)。\n */\nfunction UrlCell({ value, meta, mode, size, isDisabled, isEditable, onRequestEdit, onCommit, onCancel }: CellComponentProps) {\n  if (mode === 'display') {\n    // showDisplayEndIcon ← D path Phase 2(2026-05-08):Field naked wrapper 包 anchor,與 Input edit 同 chrome\n    const display = (\n      <LinkInput variant=\"naked\" mode={displayOrDisabled(isDisabled)} value={value as string | null} label={meta?.linkLabel} size={size} showDisplayEndIcon />\n    )\n    // 2026-05-13 codex V1 fix:disabled URL 不顯 Pencil affordance(parent onRequestEdit 已被攔但 UI 仍誤導)\n    if (!isEditable || isDisabled) return display\n    // editable read mode:hover Pencil 鈕(對齊 spec 第十二段「url:read = 連結 + Pencil」)\n    return (\n      <span className=\"group/cell relative flex items-center w-full\"> {/* @naked-row-mode-allow: URL hover-Pencil 是 inline action 不是 value content,items-center 鎖 Pencil 對齊行高第一行(autoRow 跟 fixed 皆同視覺正確) */}\n        <span className=\"flex-1 min-w-0\">{display}</span>\n        <Button\n          variant=\"tertiary\"\n          size=\"xs\"\n          iconOnly\n          startIcon={Pencil}\n          aria-label=\"編輯連結\"\n          className={cn('ml-1 opacity-0 group-hover/cell:opacity-100 transition-opacity')}\n          onClick={(e) => {\n            e.stopPropagation()\n            onRequestEdit?.()\n          }}\n        />\n      </span>\n    )\n  }\n  // edit mode value pre-fill canonical(2026-05-05):LinkInput edit `value` prop 強制 controlled\n  // (line 113 `useState(value ?? '')`)+ `showLink = !editing && hasValidValue` 預設顯 link 不顯 input\n  // → cell-as-input editing 場景需要 input 直接 focus 編輯。改用 plain `<Input>`(uncontrolled\n  // `defaultValue` 正確 pre-fill,Input.tsx `value={value}` 是 undefined → uncontrolled 走 defaultValue)。\n  // URL 驗證等 deferred 到 commit phase(consumer 可在 onCommit 時 validate)。\n  return (\n    <Input\n      autoFocus\n      variant=\"naked\"\n      size={sizeForInput(size)}\n      defaultValue={value != null ? String(value) : ''}\n      onBlur={(e) => onCommit?.(e.target.value)}\n      onKeyDown={makeKeyHandler(onCommit, onCancel)}\n    />\n  )\n}\n\n// ── Registry ────────────────────────────────────────────────────────────────\n//\n// type → cell component。新增 columnType 必同步註冊一條(否則 fallback 到 string)。\n\nexport const cellRegistry: Record<ColumnType, ComponentType<CellComponentProps>> = {\n  string:      StringCell,\n  number:      NumberCell,\n  currency:    NumberCell,  // 共用 NumberCell — currency-ness 走 meta.type 判 prefix='$'\n  date:        DateCell,\n  time:        TimeCell,\n  select:      SelectCell,\n  multiSelect: MultiSelectCell,\n  person:      PersonCell,\n  multiPerson: MultiPersonCell,\n  boolean:     BooleanCell,\n  url:         UrlCell,\n}\n\n/** Resolve cell component by type;default = StringCell(consumer 沒設 type 的 fallback)。\n *  2026-05-12 Stream C Cluster B fix:wrap with FieldSurfaceProvider `surface='table-cell'`\n *  讓所有 Cell 內的 Field family controls 透過 `useFieldSurface()` 取得「我在 cell 裡」context,\n *  取代散落的 `variant === 'naked'` cell-detection heuristic + per-prop hardcoded padding。\n *\n *  **2026-05-13 (a) perf fix(user 拍板 + codex V1 verdict + Layer A grep root cause)**:\n *  原 factory pattern 每次 call 在 function body 內宣告新 `CellWithSurface` FC closure → 每 scroll\n *  × 每 visible cell 都 return 新 FC reference → React 認 component type 變,**整 subtree mount/\n *  unmount cascade**(Field + ItemPrefix/Suffix + Avatar / Tag / PersonDisplay)。\n *  Fix:每 ColumnType **module-level 預建** wrapped FC + `React.memo`,resolve 走 cached map,\n *  identity stable across scroll → memo 真生效 + subtree 不 mount/unmount。\n *  Cite world-class:AG Grid「cell renderer per-type stable reference」/ MUI X DataGrid「memoized\n *  subcomponents」/ Glide Data Grid「DOM virtualization 加解掛 = bottleneck」。 */\nconst cellWithSurfaceCache = new Map<ColumnType | '_default_', ComponentType<CellComponentProps>>()\n\nfunction buildCellWithSurface(Inner: ComponentType<CellComponentProps>, key: string): ComponentType<CellComponentProps> {\n  const CellWithSurface = React.memo(function CellWithSurface(props: CellComponentProps) {\n    return (\n      <FieldSurfaceProvider surface=\"table-cell\">\n        {/* 2026-06-08:把 table-density size 經獨立 surface-size context 注給 child Field controls,\n            漏傳 size 的 cell 也自動繼承(根治「新 cell 漏傳 size」class);size primitive 不破壞 memo identity。*/}\n        <FieldSurfaceSizeProvider size={props.size}>\n          <Inner {...props} />\n        </FieldSurfaceSizeProvider>\n      </FieldSurfaceProvider>\n    )\n  })\n  ;(CellWithSurface as { displayName?: string }).displayName = `CellWithSurface(${key})`\n  return CellWithSurface as ComponentType<CellComponentProps>\n}\n\n// Pre-build per-type cached wrapped components(module-level,one-time init)\nfor (const type of Object.keys(cellRegistry) as ColumnType[]) {\n  cellWithSurfaceCache.set(type, buildCellWithSurface(cellRegistry[type], type))\n}\ncellWithSurfaceCache.set('_default_', buildCellWithSurface(StringCell, 'StringCell-fallback'))\n\nexport function resolveCellComponent(type?: ColumnType): ComponentType<CellComponentProps> {\n  return cellWithSurfaceCache.get(type ?? '_default_') ?? cellWithSurfaceCache.get('_default_')!\n}\n"],"names":["DatePicker","CellWithSurface"],"mappings":"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"}
+{"version":3,"file":"cell-registry.js","sources":["../../../src/components/DataTable/cell-registry.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// code-quality-allow: file-size — Cell Registry 含 10 cell-type components(string/number/date/time/select/multiSelect/person/multiPerson/boolean/url)+ shared helpers,split-into-files 會破壞 type-keyed registry SSOT canonical\n// DataTable Cell Registry — type-keyed SSOT for cell rendering(Phase C 2026-05-05)\n//\n// 對齊 M17 SSOT consolidation + audit recommendation:\n//   原 `renderTypedValue` switch + `EditableCellContent` switch 兩條平行 type-switch 已 collapse\n//   為**一張 type → cell component** registry。每個 cell component 同時處理 display / edit mode,\n//   靠底層 Field control 的 `mode` prop 切換。\n//\n// 設計原則:\n//   - 每個 cell component 接同一組 props(`CellComponentProps`)\n//   - 用 `variant=\"naked\"` — DataTable cell-as-input substrate(Field chrome variant;bare 2026-07-09 退役)\n//   - 消費 full Field 家族 primitive(無 stub)\n//   - 不再用 `meta._editable` 私有 flag — `isEditable` 直接顯式入參(消除 M1 hack)\n//\n// World-class 對照(@benchmark-unverified):AG Grid cellRendererSelector / Material X-Grid\n// `valueGetter + renderCell` / Notion property type registry。\n\nimport * as React from 'react'\nimport type { ComponentType } from 'react'\nimport { Pencil } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport type { ColumnType } from './column-types'\nimport { Input as InputPublic } from '@/design-system/components/Input/input'\nimport { Textarea as TextareaPublic } from '@/design-system/components/Textarea/textarea'\nimport { NumberInput as NumberInputPublic } from '@/design-system/components/NumberInput/number-input'\nimport { Select as SelectPublic } from '@/design-system/components/Select/select'\nimport { Combobox as ComboboxPublic } from '@/design-system/components/Combobox/combobox'\nimport { DatePicker as DatePickerPublic } from '@/design-system/components/DatePicker/date-picker'\nimport { TimePicker as TimePickerPublic } from '@/design-system/components/TimePicker/time-picker'\nimport { PeoplePicker as PeoplePickerPublic } from '@/design-system/components/PeoplePicker/people-picker'\nimport { LinkInput as LinkInputPublic } from '@/design-system/components/LinkInput/link-input'\nimport { Checkbox as CheckboxPublic } from '@/design-system/components/Checkbox/checkbox'\nimport { Button } from '@/design-system/components/Button/button'\nimport type { PersonValue } from '@/design-system/components/PeoplePicker/person-display'\nimport { FieldSurfaceProvider, FieldSurfaceSizeProvider, FieldSurfaceEditableProvider } from '@/design-system/components/Field/field-context'\nimport { makeEditSettleKeyHandler } from '@/design-system/components/Field/field-edit-keys'\nimport type { WithFieldVariantInternal } from '@/design-system/components/Field/field-types'\n\n// ── @internal naked variant 通道(2026-07-14 API 策展 E,user 拍板「全部收窄」)──────────────\n// `naked` 已從公開 FieldVariant 拆出(field-types.ts `FieldVariantInternal`);本檔是唯一合法\n// naked 消費者(field-controls.spec.md「軸二 variant」明文)。以 `WithFieldVariantInternal`\n// 型別層 widen 各 Field control 的 `variant` prop — 純型別、零 runtime;元件內部 cva / resolver\n// 分支本就吃 FieldVariantInternal,widen 不引入 unsound 行為。\nconst Input = InputPublic as WithFieldVariantInternal<typeof InputPublic>\nconst Textarea = TextareaPublic as WithFieldVariantInternal<typeof TextareaPublic>\nconst NumberInput = NumberInputPublic as WithFieldVariantInternal<typeof NumberInputPublic>\nconst Select = SelectPublic as WithFieldVariantInternal<typeof SelectPublic>\nconst Combobox = ComboboxPublic as WithFieldVariantInternal<typeof ComboboxPublic>\nconst DatePicker = DatePickerPublic as WithFieldVariantInternal<typeof DatePickerPublic>\nconst TimePicker = TimePickerPublic as WithFieldVariantInternal<typeof TimePickerPublic>\nconst PeoplePicker = PeoplePickerPublic as WithFieldVariantInternal<typeof PeoplePickerPublic>\nconst LinkInput = LinkInputPublic as WithFieldVariantInternal<typeof LinkInputPublic>\nconst Checkbox = CheckboxPublic as WithFieldVariantInternal<typeof CheckboxPublic>\n\n// ── Types ────────────────────────────────────────────────────────────────────\n\nexport type CellMode = 'display' | 'edit'\nexport type CellSize = 'sm' | 'md' | 'lg'\n\nexport interface CellComponentProps {\n  // any-allow: free-form column value(consumer-defined,跨 type 共用 signature)\n  value: any\n  // any-allow: free-form consumer meta bag(prefix / options / formatOptions / locale / linkLabel 等)\n  meta: Record<string, any>\n  mode: CellMode\n  size: CellSize\n  autoRowHeight: boolean\n  /** 該 cell 是否可編。replaces 舊 `meta._editable` 私有 flag(Phase C M1 hack 移除)。 */\n  isEditable?: boolean\n  /** 2026-05-13:cell 是否 disabled(state overlay,orthogonal to display/edit lifecycle)。\n   *  per codex Q3 verdict:不擴 CellMode='disabled',加 prop。各 Cell function 收 true 時\n   *  傳 `mode='disabled'` 給 inner Field control,各 Field 內部走具體 disabled token(非 wrapper opacity)。 */\n  isDisabled?: boolean\n  /** Cell 進 edit mode → 提交新值(blur / Enter / option select 都觸發)— 提交後**自動 exit edit**。\n   *  適用 single-shot commit:string / number / select(single)/ person(single)/ date / time / boolean / url。 */\n  onCommit?: (next: unknown) => void\n  /** Live commit — 提交新值但 **不 exit edit**(popover 持續開)。\n   *  適用 multi-select 類:multiSelect / multiPerson — user 連續勾選,直到點外面才關。\n   *  對齊 Notion / Linear / Airtable canonical:multi-pick popover 不在每次 toggle 後關閉。 */\n  onCommitLive?: (next: unknown) => void\n  /** Esc 取消編輯,不 commit。 */\n  onCancel?: () => void\n  /** URL cell 專用:hover 顯示的 Pencil 鈕 → 進 edit mode(read mode 保留 link click 語意)。 */\n  onRequestEdit?: () => void\n  /** Per-keystroke draft propagation(2026-05-10 Phase 7 D.3 portal Field virtualizer unmount preserve draft):\n   *  Edit mode 內部 input onChange/onValueChange 每 keystroke 呼叫 onDraft,讓 lifted draft state(in\n   *  data-table.tsx)持有 user 編輯中字。Cell DOM unmount(virtualizer scroll out)時 draft 在\n   *  parent state 不丟;mount-back 時 portal Field value 從 draft 取,user 字保留。\n   *  非 portal mode(inline edit)不傳此 prop,各 Cell 走原 uncontrolled defaultValue 路徑。 */\n  onDraft?: (next: unknown) => void\n}\n\n// ── Helpers ──────────────────────────────────────────────────────────────────\n\n/** 鍵盤 commit / cancel — string / number cell edit mode 共用 */\nfunction makeKeyHandler(\n  onCommit?: (v: unknown) => void,\n  onCancel?: () => void,\n  parseValue?: (raw: string) => unknown,\n) {\n  // 消費 edit-in-place 鍵盤結算 SSOT(field-edit-keys.ts):IME guard + Enter/Esc dispatch 統一\n  // (2026-07-09 抽出;原本 InlineEdit 漏 IME guard = bug,現同源)。value 讀取為 input-specific,留本地。\n  return makeEditSettleKeyHandler({\n    onCommit: (e) => {\n      const raw = (e.target as HTMLInputElement).value\n      onCommit?.(parseValue ? parseValue(raw) : raw)\n    },\n    onCancel: () => onCancel?.(),\n  })\n}\n\nconst sizeForInput = (size: CellSize): CellSize => size\n\n/** 2026-05-13 Q3 helper(per codex Q3 verdict):cell display + isDisabled → Field mode='disabled'。\n *  Cell display lifecycle 不擴 CellMode='disabled',而是各 Cell 在 display branch 翻譯 isDisabled\n *  → Field mode='disabled' prop。inner Field 內部走具體 disabled token(text-fg-disabled / bg-disabled 等),\n *  非 wrapper blanket opacity-disabled 逃生艙(per color.spec.md:729)。 */\nconst displayOrDisabled = (isDisabled?: boolean): 'display' | 'disabled' =>\n  isDisabled ? 'disabled' : 'display'\n\n// ── Cell Components ──────────────────────────────────────────────────────────\n\nfunction StringCell({ value, meta, mode, size, isDisabled, autoRowHeight, onCommit, onCancel, onDraft }: CellComponentProps) {\n  // 2026-05-14 I9 fix(per codex+Layer A 共識):meta.maxLines opt-in line-clamp。\n  // display autoRow 用 Tailwind arbitrary line-clamp 支援 N rows;edit textarea field-sizing\n  // 已 auto-grow to content,natural match clamp。\n  // 2026-05-16 Round 5 audit Dim 27 fix:narrow type 取代 `as any` cast。\n  const maxLines: number | undefined = (meta as { maxLines?: number } | undefined)?.maxLines\n  const clampClass = maxLines && autoRowHeight ? `line-clamp-[${maxLines}]` : undefined\n  // string type canonical(2026-05-05 v2 user 校正:input space ≥ display space):\n  //   - autoRowHeight: Textarea(display + edit)— display wrap text 撐高 row,edit textarea\n  //     多行輸入、`!h-full` 填 cell。對齊 Notion long-text cell canonical。\n  //   - fixed: Input(display + edit)— 單行 truncate display,單行 input edit;Field naked intrinsic\n  //     高 = cell 高 = h-field-md,文字位置 display↔edit 完全一致。對齊 AG Grid / Material X-Grid。\n  //   - autoRowHeight 是 table 框架決定(consumer 不需 per-column 設 meta.wrap)。\n  //   - 互動(Textarea):Esc cancel / Cmd|Ctrl+Enter commit / blur commit;Enter 保留換行\n  //   - 互動(Input):Esc cancel / Enter commit / blur commit\n  const v = value != null ? String(value) : ''\n  if (mode === 'display') {\n    // size 必傳:DataTable cell 字級隨 size 變(sm/md text-body / lg text-body-lg),\n    // 對齊 Field family size→font SSOT(field-wrapper.tsx:60-64)。漏傳 → fallback md → lg 表格\n    // 字卡 14px 跟 Select/Date 等有傳 size 的 cell 不一致(2026-06-08 user 抓 frozen string 欄字偏小)。\n    return autoRowHeight\n      ? <Textarea variant=\"naked\" mode={displayOrDisabled(isDisabled)} value={v} size={size} className={clampClass} />\n      : <Input variant=\"naked\" mode={displayOrDisabled(isDisabled)} value={v} size={size} />\n  }\n  if (autoRowHeight) {\n    // 2026-05-14 I8 fix(per codex verdict + user 抓「edit cell shrink」):\n    // 原 `wrapRows = value.length / 40` 字元估算不準(對應實際 column width 不同\n    // → cell 進 edit shrink)。改 CSS `field-sizing: content`(Chrome 123+ / FF 122+ /\n    // Safari 17+)讓 textarea 自動 grow to content,匹配 display wrap 真實高度。\n    // Fallback rows 仍保留給舊 browser(rows attr 在 field-sizing 支援時被覆蓋)。\n    const newlineRows = (v.match(/\\n/g) || []).length + 1\n    const wrapRows = Math.ceil(v.length / 40)\n    const estimateRows = Math.min(10, Math.max(1, newlineRows, wrapRows))\n    return (\n      <Textarea\n        autoFocus\n        variant=\"naked\"\n        size={sizeForInput(size)}\n        rows={estimateRows}\n        defaultValue={v}\n        // any-allow: CSS `field-sizing` 屬性 Chrome 123+/FF 122+/Safari 17+ 支援但 TypeScript lib.dom\n        // 尚未加 type;narrow 到 CSSProperties 仍需 cast,保留 single-site any 較 type aug 簡潔。\n        style={{ fieldSizing: 'content' } as React.CSSProperties}\n        onChange={(e) => onDraft?.((e.target as HTMLTextAreaElement).value)}\n        onBlur={(e) => onCommit?.((e.target as HTMLTextAreaElement).value)}\n        // 多行:走 edit-in-place 鍵盤結算 SSOT(IME guard + Esc + Cmd/Ctrl+Enter commit;\n        // plain Enter=換行)。commitOnEnter:false → 純 Enter 不攔。\n        onKeyDown={makeEditSettleKeyHandler({\n          onCommit: (e) => onCommit?.((e.target as HTMLTextAreaElement).value),\n          onCancel: () => onCancel?.(),\n          commitOnEnter: false,\n        })}\n      />\n    )\n  }\n  return (\n    <Input\n      autoFocus\n      variant=\"naked\"\n      size={sizeForInput(size)}\n      defaultValue={v}\n      onChange={(e) => onDraft?.(e.target.value)}\n      onBlur={(e) => onCommit?.(e.target.value)}\n      onKeyDown={makeKeyHandler(onCommit, onCancel)}\n    />\n  )\n}\n\nfunction NumberCell({ value, meta, mode, size, isDisabled, onCommit, onCancel, onDraft }: CellComponentProps) {\n  // currency 透過 columnType-aware prefix:type='currency' → 預設 '$'(可 override)\n  const isCurrency = meta?.type === 'currency'\n  const prefix = isCurrency ? (meta?.prefix ?? '$') : meta?.prefix\n  // React #310 fix:useState 必在 display early-return 前無條件呼叫。同一 memo'd cell instance\n  // 在 display↔edit 切換時被重用(render site 無 key={mode},data-table.tsx:1352),hook 數量不可變,\n  // 否則 Rules of Hooks violation → React #310 crash。對齊 combobox/select hoist pattern。\n  const initial = typeof value === 'number' ? value : null\n  const [localValue, setLocalValue] = React.useState<number | null>(initial)\n  if (mode === 'display') {\n    return (\n      <NumberInput\n        variant=\"naked\"\n        mode={displayOrDisabled(isDisabled)}\n        value={value as number | null}\n        // size 必傳(同 StringCell)— currency/number cell 字級隨 DataTable size 變,對齊 Field SSOT。\n        size={size}\n        prefix={prefix}\n        suffix={meta?.suffix}\n        precision={meta?.precision}\n        locale={meta?.locale}\n      />\n    )\n  }\n  // Edit mode value pre-fill canonical(2026-05-05):NumberInput edit 強制 controlled\n  // (`value={value ?? ''}`)— 若 NumberCell 以 `defaultValue` 傳入,NumberInput value=undefined → ''\n  // empty。對齊 cell-as-input「edit mode 自動帶入 display 值」(對齊 Notion / Airtable 共識),\n  // 改用 local state controlled。User typing → setLocalValue;blur/Enter → onCommit(localValue)。\n  // (initial + useState 已 hoist 到 display-return 前 — 見上方 React #310 fix。)\n  return (\n    <NumberInput\n      autoFocus\n      variant=\"naked\"\n      size={sizeForInput(size)}\n      value={localValue}\n      onChange={(v) => { setLocalValue(v); onDraft?.(v) }}\n      prefix={prefix}\n      suffix={meta?.suffix}\n      precision={meta?.precision}\n      onBlur={() => onCommit?.(localValue)}\n      // 單行:走 edit-in-place 鍵盤結算 SSOT(IME guard + Esc + Enter commit)。\n      // commit localValue(controlled state,非 e.target.value)。\n      onKeyDown={makeEditSettleKeyHandler({\n        onCommit: () => onCommit?.(localValue),\n        onCancel: () => onCancel?.(),\n      })}\n    />\n  )\n}\n\n// Cell-as-input dismiss canonical(2026-05-05):defaultOpen=true 開始 → user click 外 popover 關\n// → 元件 fire onOpenChange(false) → cell call onCancel exit edit。否則 cell 卡 edit mode 不可 re-trigger\n// (對齊 Airtable / Notion canonical:click 外即關)。\nconst dismissOnClose = (onCancel?: () => void) => (open: boolean) => { if (!open) onCancel?.() }\n\n// Mode-keyed remount canonical(2026-05-05):display↔edit 切換時,因 React reconciliation 同 type 同\n// position 會重用 instance,導致 `useState(defaultOpen)` 只在首次 mount 跑(那時 mode='display'\n// defaultOpen 沒給→預設 false)。後續 mode='edit' 即使傳 defaultOpen=true 也無效。\n// Fix:`key={mode}` 強制 React unmount + remount,每次切 mode 都重跑 useState init。\n// 對齊 Notion / Airtable cell-as-input「display 跟 edit 是不同 mount cycle」語義。\n\nfunction DateCell({ value, meta, mode, size, isDisabled, onCommit, onCancel }: CellComponentProps) {\n  if (mode === 'display') {\n    return (\n      <DatePicker\n        key=\"display\"\n        variant=\"naked\"\n        mode={displayOrDisabled(isDisabled)}\n        value={value as string | null}\n        size={size}\n        formatOptions={meta?.formatOptions}\n        locale={meta?.locale}\n        // 2026-07-08 user 拍板 A 案(推翻 2026-05-10/06-26 兩次拍板,per 6 家 benchmark 6/6 共識\n        // Ant/MUI X/AG Grid/Atlaskit/Notion/Airtable:display 態零恆顯型別 icon;editable\n        // affordance 統一 = hover outline(field.spec.md L4)。showDisplayEndIcon 不再傳\n        //(prop 保留為 spreadsheet-flavored 消費端 opt-in 逃生門,見 field.spec.md L6)。\n      />\n    )\n  }\n  return (\n    <DatePicker\n      key=\"edit\"\n      autoFocus\n      variant=\"naked\"\n      size={sizeForInput(size)}\n      value={typeof value === 'string' ? value : null}\n      showTime={meta?.includeTime === true}\n      onChange={(v) => onCommit?.(v)}\n      defaultOpen\n      onOpenChange={dismissOnClose(onCancel)}\n    />\n  )\n}\n\nfunction TimeCell({ value, meta, mode, size, isDisabled, onCommit, onCancel }: CellComponentProps) {\n  if (mode === 'display') {\n    return (\n      <TimePicker\n        key=\"display\"\n        variant=\"naked\"\n        mode={displayOrDisabled(isDisabled)}\n        value={value as string | null}\n        size={size}\n        formatOptions={meta?.formatOptions}\n        locale={meta?.locale}\n        // showDisplayEndIcon 不傳 — 2026-07-08 A 案:display 態零恆顯 icon(同 DateCell 註)\n      />\n    )\n  }\n  return (\n    <TimePicker\n      key=\"edit\"\n      variant=\"naked\"\n      size={sizeForInput(size)}\n      value={typeof value === 'string' ? value : null}\n      showSeconds={meta?.showSeconds === true}\n      minuteStep={meta?.minuteStep}\n      secondStep={meta?.secondStep}\n      onChange={(v) => onCommit?.(v)}\n      defaultOpen\n      onOpenChange={dismissOnClose(onCancel)}\n    />\n  )\n}\n\nfunction SelectCell({ value, meta, mode, size, isDisabled, onCommit, onCancel }: CellComponentProps) {\n  // Display canonical(2026-05-05):cell IS variant,default plain text(no Tag pill 疊在 cell border 內)。\n  // Consumer 可在 column meta.display='tag' opt-in 內容導向的 Tag 視覺(category 含色彩標籤等)。\n  // 對齊 JTable / AG Grid「renderer/editor 視覺一致」canonical。\n  const displayMode = (meta?.display as 'plain' | 'tag' | undefined) ?? 'plain'\n  if (mode === 'display') {\n    return (\n      <Select\n        key=\"display\"\n        variant=\"naked\"\n        mode={displayOrDisabled(isDisabled)}\n        value={value as string | null}\n        options={meta?.options ?? []}\n        size={size}\n        display={displayMode}\n        // showDisplayEndIcon 不傳 — 2026-07-08 A 案:display 態零恆顯 icon(同 DateCell 註)\n        selectedItemRenderer={meta?.selectedItemRenderer}  // 2026-07-08 WM 戰役:status 類彩色 cell 顯示通道\n      />\n    )\n  }\n  return (\n    <Select\n      key=\"edit\"\n      autoFocus\n      variant=\"naked\"\n      size={sizeForInput(size)}\n      selectedItemRenderer={meta?.selectedItemRenderer}\n      options={meta?.options ?? []}\n      value={value as string | null | undefined}\n      onChange={(v) => onCommit?.(v)}\n      // B7(2026-05-05):cell 編輯時支援 inline search,沿用 Select.searchable 機制(對齊 cell-as-input\n      // 「沿用既有輸入框互動」原則)。Default false,consumer 在 meta.searchable 開啟。\n      searchable={meta?.searchable === true}\n      display={displayMode}\n      defaultOpen\n      onOpenChange={dismissOnClose(onCancel)}\n    />\n  )\n}\n\nfunction MultiSelectCell({ value, meta, mode, size, isDisabled, autoRowHeight, onCommitLive, onCancel }: CellComponentProps) {\n  const wrap = autoRowHeight && meta?.wrap === true\n  if (mode === 'display') {\n    return (\n      <Combobox\n        key=\"display\"\n        variant=\"naked\"\n        mode={displayOrDisabled(isDisabled)}\n        value={(value as string[] | null) ?? []}\n        options={meta?.options ?? []}\n        wrap={wrap}\n        size={size}\n        // showDisplayEndIcon 不傳 — 2026-07-08 A 案:display 態零恆顯 icon(同 DateCell 註)\n      />\n    )\n  }\n  // Multi 用 onCommitLive(commit 但不 exit edit)— 每勾一項即時生效,popover 持續開\n  // 直到點外面;onOpenChange(false) → onCancel exit edit。對齊 Notion / Linear / Airtable canonical。\n  return (\n    <Combobox\n      key=\"edit\"\n      variant=\"naked\"\n      size={sizeForInput(size)}\n      options={meta?.options ?? []}\n      value={Array.isArray(value) ? (value as string[]) : []}\n      onChange={(v) => onCommitLive?.(v)}\n      defaultOpen\n      onOpenChange={dismissOnClose(onCancel)}\n    />\n  )\n}\n\nfunction PersonCell({ value, mode, size, isDisabled, onCommit, onCancel, meta }: CellComponentProps) {\n  if (mode === 'display') {\n    // 2026-07-08 A 案:display 態零恆顯 icon(同 DateCell 註)\n    return <PeoplePicker key=\"display\" variant=\"naked\" mode={displayOrDisabled(isDisabled)} value={value as PersonValue | null} size={size} />\n  }\n  return (\n    <PeoplePicker\n      key=\"edit\"\n      variant=\"naked\"\n      size={sizeForInput(size)}\n      value={value as PersonValue | null}\n      people={meta?.people ?? []}\n      // PeoplePicker onChange 永遠 emit array(API contract);single mode commit 取首位\n      onChange={(next) => onCommit?.(next[0] ?? null)}\n      defaultOpen\n      onOpenChange={dismissOnClose(onCancel)}\n    />\n  )\n}\n\nfunction MultiPersonCell({ value, mode, size, isDisabled, onCommitLive, onCancel, meta }: CellComponentProps) {\n  if (mode === 'display') {\n    // 2026-07-08 A 案:display 態零恆顯 icon(同 DateCell 註)\n    return <PeoplePicker key=\"display\" variant=\"naked\" mode={displayOrDisabled(isDisabled)} value={(value as PersonValue[]) ?? []} size={size} />\n  }\n  // Multi 用 onCommitLive(commit 但不 exit edit)— 每勾一人即時生效,popover 持續開\n  // 直到點外面;onOpenChange(false) → onCancel exit edit。對齊 multiSelect canonical。\n  return (\n    <PeoplePicker\n      key=\"edit\"\n      variant=\"naked\"\n      size={sizeForInput(size)}\n      value={Array.isArray(value) ? (value as PersonValue[]) : []}\n      people={meta?.people ?? []}\n      onChange={(next) => onCommitLive?.(next)}\n      defaultOpen\n      onOpenChange={dismissOnClose(onCancel)}\n    />\n  )\n}\n\nfunction BooleanCell({ value, mode, meta, size, isEditable, isDisabled, onCommit }: CellComponentProps) {\n  // boolean 不分 read/edit mode — display 渲 mode='display' 純展示;editable 時直接 toggle Checkbox\n  // 2026-05-13 codex V1 fix:editable=true + disabled=true 之前 fall through to live Checkbox,\n  // onCheckedChange 仍 fire(violate disabled contract)。Fix:`!isEditable || isDisabled` →\n  // 走 display branch,Checkbox 拿 disabled mode + 不接 onCheckedChange。\n  if (mode === 'display' && (!isEditable || isDisabled)) {\n    // size 傳入 → boolean 值 icon(Check/X)@lg 縮放對齊其他 cell(對齊 editable 分支同 size 邏輯)\n    return <Checkbox variant=\"naked\" size={size === 'lg' ? 'lg' : 'md'} mode={displayOrDisabled(isDisabled)} checked={value === true} />\n  }\n  return (\n    <Checkbox\n      size={size === 'lg' ? 'lg' : 'md'}\n      checked={value === true}\n      onCheckedChange={(checked) => onCommit?.(checked === true)}\n      aria-label={meta?.ariaLabel ?? '切換'}\n    />\n  )\n}\n\n/**\n * UrlCell(2026-07-14 docblock 對齊實作):\n *   display branch = `<LinkInput mode={displayOrDisabled(isDisabled)}>`(URL parse / hostname\n *   顯示一致性 SSOT);editable 互動:hover 時右側出 Pencil 鈕 → 進 edit(保留 link click 語意)。\n *   edit branch = plain `<Input variant=\"naked\">`(LinkInput edit 的 controlled value 衝突\n *   revert,詳下方 edit branch 註解);URL 驗證 deferred 到 onCommit(consumer 端 validate)。\n */\nfunction UrlCell({ value, meta, mode, size, isDisabled, isEditable, onRequestEdit, onCommit, onCancel }: CellComponentProps) {\n  if (mode === 'display') {\n    // showDisplayEndIcon ← D path Phase 2(2026-05-08):Field naked wrapper 包 anchor,與 Input edit 同 chrome。\n    // LinkInput 此 prop = wrapper-only(無 icon,field.spec.md L6 例外)→ A 案(2026-07-08)不撤;\n    // 但修 I1:原無條件 true 違反「= isEditable」knob 等式(field-controls.spec.md cell 例外),改等式。\n    const display = (\n      <LinkInput variant=\"naked\" mode={displayOrDisabled(isDisabled)} value={value as string | null} label={meta?.linkLabel} size={size} showDisplayEndIcon={isEditable === true} />\n    )\n    // 2026-05-13 codex V1 fix:disabled URL 不顯 Pencil affordance(parent onRequestEdit 已被攔但 UI 仍誤導)\n    if (!isEditable || isDisabled) return display\n    // editable read mode:hover Pencil 鈕(對齊 spec 第十二段「url:read = 連結 + Pencil」)\n    return (\n      <span className=\"group/cell relative flex items-center w-full\"> {/* @naked-row-mode-allow: URL hover-Pencil 是 inline action 不是 value content,items-center 鎖 Pencil 對齊行高第一行(autoRow 跟 fixed 皆同視覺正確) */}\n        <span className=\"flex-1 min-w-0\">{display}</span>\n        <Button\n          variant=\"tertiary\"\n          size=\"xs\"\n          iconOnly\n          startIcon={Pencil}\n          aria-label=\"編輯連結\"\n          className={cn('ml-1 opacity-0 group-hover/cell:opacity-100 transition-opacity')}\n          onClick={(e) => {\n            e.stopPropagation()\n            onRequestEdit?.()\n          }}\n        />\n      </span>\n    )\n  }\n  // edit mode value pre-fill canonical(2026-05-05):LinkInput edit `value` prop 強制 controlled\n  // (line 113 `useState(value ?? '')`)+ `showLink = !editing && hasValidValue` 預設顯 link 不顯 input\n  // → cell-as-input editing 場景需要 input 直接 focus 編輯。改用 plain `<Input>`(uncontrolled\n  // `defaultValue` 正確 pre-fill,Input.tsx `value={value}` 是 undefined → uncontrolled 走 defaultValue)。\n  // URL 驗證等 deferred 到 commit phase(consumer 可在 onCommit 時 validate)。\n  return (\n    <Input\n      autoFocus\n      variant=\"naked\"\n      size={sizeForInput(size)}\n      defaultValue={value != null ? String(value) : ''}\n      onBlur={(e) => onCommit?.(e.target.value)}\n      onKeyDown={makeKeyHandler(onCommit, onCancel)}\n    />\n  )\n}\n\n// ── Registry ────────────────────────────────────────────────────────────────\n//\n// type → cell component。新增 columnType 必同步註冊一條(否則 fallback 到 string)。\n\nexport const cellRegistry: Record<ColumnType, ComponentType<CellComponentProps>> = {\n  string:      StringCell,\n  number:      NumberCell,\n  currency:    NumberCell,  // 共用 NumberCell — currency-ness 走 meta.type 判 prefix='$'\n  date:        DateCell,\n  time:        TimeCell,\n  select:      SelectCell,\n  multiSelect: MultiSelectCell,\n  person:      PersonCell,\n  multiPerson: MultiPersonCell,\n  boolean:     BooleanCell,\n  url:         UrlCell,\n}\n\n/** Resolve cell component by type;default = StringCell(consumer 沒設 type 的 fallback)。\n *  2026-05-12 Stream C Cluster B fix:wrap with FieldSurfaceProvider `surface='table-cell'`\n *  讓所有 Cell 內的 Field family controls 透過 `useFieldSurface()` 取得「我在 cell 裡」context,\n *  取代散落的 `variant === 'naked'` cell-detection heuristic + per-prop hardcoded padding。\n *\n *  **2026-05-13 (a) perf fix(user 拍板 + codex V1 verdict + Layer A grep root cause)**:\n *  原 factory pattern 每次 call 在 function body 內宣告新 `CellWithSurface` FC closure → 每 scroll\n *  × 每 visible cell 都 return 新 FC reference → React 認 component type 變,**整 subtree mount/\n *  unmount cascade**(Field + ItemPrefix/Suffix + Avatar / Tag / PersonDisplay)。\n *  Fix:每 ColumnType **module-level 預建** wrapped FC + `React.memo`,resolve 走 cached map,\n *  identity stable across scroll → memo 真生效 + subtree 不 mount/unmount。\n *  Cite world-class:AG Grid「cell renderer per-type stable reference」/ MUI X DataGrid「memoized\n *  subcomponents」/ Glide Data Grid「DOM virtualization 加解掛 = bottleneck」。 */\nconst cellWithSurfaceCache = new Map<ColumnType | '_default_', ComponentType<CellComponentProps>>()\n\nfunction buildCellWithSurface(Inner: ComponentType<CellComponentProps>, key: string): ComponentType<CellComponentProps> {\n  const CellWithSurface = React.memo(function CellWithSurface(props: CellComponentProps) {\n    return (\n      <FieldSurfaceProvider surface=\"table-cell\">\n        {/* 2026-06-08:把 table-density size 經獨立 surface-size context 注給 child Field controls,\n            漏傳 size 的 cell 也自動繼承(根治「新 cell 漏傳 size」class);size primitive 不破壞 memo identity。*/}\n        <FieldSurfaceSizeProvider size={props.size}>\n          {/* 2026-07-08 user 拍板:cell 可編輯訊號經獨立 boolean context 注給 child Field controls,\n              讓 useFieldEmptyDisplay 分流「可編輯 cell 空 display → 空白」vs「不可編輯 cell → '-'」。\n              boolean primitive 不破壞 memo identity(同 size context)。 */}\n          <FieldSurfaceEditableProvider isEditable={props.isEditable ?? false}>\n            <Inner {...props} />\n          </FieldSurfaceEditableProvider>\n        </FieldSurfaceSizeProvider>\n      </FieldSurfaceProvider>\n    )\n  })\n  ;(CellWithSurface as { displayName?: string }).displayName = `CellWithSurface(${key})`\n  return CellWithSurface as ComponentType<CellComponentProps>\n}\n\n// Pre-build per-type cached wrapped components(module-level,one-time init)\nfor (const type of Object.keys(cellRegistry) as ColumnType[]) {\n  cellWithSurfaceCache.set(type, buildCellWithSurface(cellRegistry[type], type))\n}\ncellWithSurfaceCache.set('_default_', buildCellWithSurface(StringCell, 'StringCell-fallback'))\n\nexport function resolveCellComponent(type?: ColumnType): ComponentType<CellComponentProps> {\n  return cellWithSurfaceCache.get(type ?? '_default_') ?? cellWithSurfaceCache.get('_default_')!\n}\n"],"names":["InputPublic","TextareaPublic","NumberInputPublic","SelectPublic","ComboboxPublic","DatePickerPublic","TimePickerPublic","PeoplePickerPublic","LinkInputPublic","CheckboxPublic","CellWithSurface"],"mappings":"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"}

package/dist/components/DataTable/column-types.d.ts

@@ -79,10 +79,16 @@ declare module '@tanstack/react-table' {
         precision?: number;
         locale?: string;
         /** Select/multiSelect options — maps value to display label */
-        options?: Array<{
-            value: string;
-            label: string;
-        }>;
+        /** select/multiSelect 選項:消費 Select 的 SelectOption 完整 schema(M30 wrapper-extends-primitive;
+         *  2026-07-08 原 {value,label} 窄型別讓 icon/description/iconClassName 傳不進 = 假 SSOT)*/
+        options?: Array<import('../Select/select').SelectOption>;
+        /** select cell 的 trigger/display 自訂渲染(轉發 Select.selectedItemRenderer;status 彩色 icon 場景)*/
+        selectedItemRenderer?: (opt: import('../Select/select').SelectOption) => React.ReactNode;
+        /** select cell 顯示模式(轉發 Select.display;cell-registry SelectCell 消費 `meta?.display`)。
+         *  default `'plain'` 純文字;`'tag'` opt-in 內容導向 Tag 視覺(status / category 彩色標籤,
+         *  搭配 options 的 `tagVariant`)。2026-07-14 deep-audit 補型別:runtime 一直消費此欄位
+         *  (cell-registry.tsx SelectCell displayMode),但 ColumnMeta 漏宣告 → typed consumer 傳不進(假 SSOT)。 */
+        display?: 'plain' | 'tag';
         /** Date: Intl.DateTimeFormat options */
         formatOptions?: Intl.DateTimeFormatOptions;
         /**

package/dist/components/DataTable/column-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"column-types.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/column-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AASpD,eAAO,MAAM,WAAW,+HAYd,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAIrD,MAAM,WAAW,gBAAgB;IAC/B,mCAAmC;IACnC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;CAInC;AAED,qCAAqC;AACrC,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,UAAU,EAAE,gBAAgB,CAYnE,CAAA;AAID,OAAO,QAAQ,uBAAuB,CAAC;IACrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD;;;;;WAKG;QACH,IAAI,CAAC,EAAE,UAAU,CAAA;QACjB,kDAAkD;QAClD,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;QACnC,sEAAsE;QACtE,IAAI,CAAC,EAAE,OAAO,CAAA;QACd;;;;;WAKG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB;;;;;;;;;;;;;;;WAeG;QACH,KAAK,CAAC,EAAE,MAAM,CAAA;QACd;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB;;;;;;;;;;;WAWG;QACH,SAAS,CAAC,EAAE,OAAO,CAAA;QACnB;;;;;WAKG;QACH,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,yCAAyC;QACzC,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,+DAA+D;QAC/D,OAAO,CAAC,EAAE,KAAK,CAAC;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAC,CAAA;QACjD,wCAAwC;QACxC,aAAa,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAA;QAC1C;;;;;;;;;WASG;QACH,WAAW,CAAC,EAAE,OAAO,CAAA;QACrB,2CAA2C;QAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB;;;;;;;;;;;;;WAaG;QACH,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,KAAK,OAAO,CAAC,CAAA;QAC9C;;;;;;;;;;;;;;WAcG;QACH,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,KAAK,OAAO,CAAC,CAAA;QAC9C;;;WAGG;QACH,MAAM,CAAC,EAAE,OAAO,CAAA;QAChB,6FAA6F;QAC7F,MAAM,CAAC,EAAE,KAAK,CAAC;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,SAAS,CAAC,EAAE,MAAM,CAAC;YAAC,WAAW,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAA;KAC3E;CACF"}
+{"version":3,"file":"column-types.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/column-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AASpD,eAAO,MAAM,WAAW,+HAYd,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAIrD,MAAM,WAAW,gBAAgB;IAC/B,mCAAmC;IACnC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;CAInC;AAED,qCAAqC;AACrC,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,UAAU,EAAE,gBAAgB,CAYnE,CAAA;AAID,OAAO,QAAQ,uBAAuB,CAAC;IACrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD;;;;;WAKG;QACH,IAAI,CAAC,EAAE,UAAU,CAAA;QACjB,kDAAkD;QAClD,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;QACnC,sEAAsE;QACtE,IAAI,CAAC,EAAE,OAAO,CAAA;QACd;;;;;WAKG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB;;;;;;;;;;;;;;;WAeG;QACH,KAAK,CAAC,EAAE,MAAM,CAAA;QACd;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB;;;;;;;;;;;WAWG;QACH,SAAS,CAAC,EAAE,OAAO,CAAA;QACnB;;;;;WAKG;QACH,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,yCAAyC;QACzC,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,+DAA+D;QAC/D;0FACkF;QAClF,OAAO,CAAC,EAAE,KAAK,CAAC,OAAO,kBAAkB,EAAE,YAAY,CAAC,CAAA;QACxD,0FAA0F;QAC1F,oBAAoB,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,kBAAkB,EAAE,YAAY,KAAK,KAAK,CAAC,SAAS,CAAA;QACxF;;;wGAGgG;QAChG,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;QACzB,wCAAwC;QACxC,aAAa,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAA;QAC1C;;;;;;;;;WASG;QACH,WAAW,CAAC,EAAE,OAAO,CAAA;QACrB,2CAA2C;QAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB;;;;;;;;;;;;;WAaG;QACH,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,KAAK,OAAO,CAAC,CAAA;QAC9C;;;;;;;;;;;;;;WAcG;QACH,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,KAAK,OAAO,CAAC,CAAA;QAC9C;;;WAGG;QACH,MAAM,CAAC,EAAE,OAAO,CAAA;QAChB,6FAA6F;QAC7F,MAAM,CAAC,EAAE,KAAK,CAAC;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,SAAS,CAAC,EAAE,MAAM,CAAC;YAAC,WAAW,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAA;KAC3E;CACF"}

package/dist/components/DataTable/column-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-types.js","sources":["../../../src/components/DataTable/column-types.ts"],"sourcesContent":["import type { RowData } from '@tanstack/react-table'\n\n// ── Column Types ─────────────────────────────────────────────────────────────\n\n// ── Column Types ─────────────────────────────────────────────────────────────\n//\n// 命名原則:描述**資料型別**本身,不是視覺變體。命名要避開撞 Button `variant` 值。\n// `string` / `url` 是世界級 DS(Atlassian / Notion / Ant Table)的資料型別用語,\n// 跟 Button 的視覺變體 `text` / `link` 在 consumer 心智不會混淆。\nexport const columnTypes = [\n  'string',      // 前身為 'text',因撞 Button variant=\"text\"(文字樣式按鈕)改名\n  'number',\n  'currency',\n  'date',\n  'time',        // Phase C(2026-05-05):time-only column,渲 `<TimePicker>`\n  'select',\n  'multiSelect',\n  'person',\n  'multiPerson',\n  'boolean',\n  'url',         // 前身為 'link',因撞 Button variant=\"link\"(連結樣式按鈕)改名\n] as const\n\nexport type ColumnType = (typeof columnTypes)[number]\n\n// ── Column Type Config ───────────────────────────────────────────────────────\n\nexport interface ColumnTypeConfig {\n  /** Default horizontal alignment */\n  align: 'left' | 'right' | 'center'\n  // L3: sortingFn\n  // L4: filterVariant, filterFn\n  // L5: cellRenderer, cellEditor\n}\n\n/** Default config per column type */\nexport const columnTypeDefaults: Record<ColumnType, ColumnTypeConfig> = {\n  string:      { align: 'left' },\n  number:      { align: 'right' },\n  currency:    { align: 'right' },\n  date:        { align: 'left' },\n  time:        { align: 'left' },\n  select:      { align: 'left' },\n  multiSelect: { align: 'left' },\n  person:      { align: 'left' },\n  multiPerson: { align: 'left' },\n  boolean:     { align: 'left' },\n  url:         { align: 'left' },\n}\n\n// ── Extend TanStack Table ColumnMeta ─────────────────────────────────────────\n\ndeclare module '@tanstack/react-table' {\n  interface ColumnMeta<TData extends RowData, TValue> {\n    /**\n     * Column data type — determines default alignment, rendering, sorting, filtering.\n     *\n     * **Filterable column 必須設此 prop**(filter UI 只列有 `type` 的 column,\n     * 對齊 Notion / Airtable / Linear:每 property 強制有 type)。\n     */\n    type?: ColumnType\n    /** Override default alignment from column type */\n    align?: 'left' | 'right' | 'center'\n    /** Allow text wrapping (only effective when autoRowHeight is true) */\n    wrap?: boolean\n    /**\n     * Max visible lines before ellipsis(2026-05-14 I9 per codex verdict + user 拍板)。\n     * Only effective when `autoRowHeight + wrap=true`。Display 用 `line-clamp-N`,edit textarea\n     * 高度 match clamp。對齊 Notion 「Truncate」row toggle / AG Grid `cellClassRules` 上限 row height。\n     * Default = undefined(無 clamp,完整 wrap)。\n     */\n    maxLines?: number\n    /**\n     * Column 寬度(px)— DS canonical 命名(2026-05-06 v14.3)。\n     *\n     * **為何不用 TanStack 的 `size`** — DS 內 `size` 既定意為元件 density string\n     * `'sm' | 'md' | 'lg'`(Field / Button / Input 等 49+ 處 use case)。Column 寬\n     * 是 px 數字,跟 density 概念衝突 → 走 DS-internal 命名 `width`/`minWidth`/`maxWidth`\n     * (對齊 CSS 原生 + AG Grid 的命名共識)。\n     *\n     * 內部 pre-process 會把 `meta.width` copy 到 TanStack 的 root `size`,確保 column\n     * resize feature(`enableColumnResize=true` 拖拉 + columnSizing state)正常運作。\n     *\n     * - **No resize mode**(default): `width` = column 寬度 reserve(cell ≥ width,\n     *   flex 可 grow,**不可 shrink** 低於 width)。對齊 user 預期「我設多寬就多寬」。\n     * - **Resize mode**(`enableColumnResize=true`):`width` = 初始寬度,user 可拖拉\n     *   到 `minWidth` 為止。\n     */\n    width?: number\n    /**\n     * Column 最小寬度(px)— resize 模式下的拖拉下限。No resize 模式不使用(`width` 即下限)。\n     * Default(resize mode 沒明示時)= 80px(`MIN_COLUMN_WIDTH`)。\n     */\n    minWidth?: number\n    /**\n     * Column 最大寬度(px)— resize 模式下的拖拉上限。預設無上限。\n     */\n    maxWidth?: number\n    /**\n     * Column 是否可被 user 拖拉 resize(opt-out per col)。Default `true`(when `enableColumnResize` 也 true)。\n     *\n     * Set `false` 表「此 col 寬度由內容決定不允許 resize」(2026-05-10 加,per user\n     * 「操作列這種內容決定寬度的欄位應該不允許 resize」)。對齊 AG Grid `colDef.resizable` /\n     * Material X-DataGrid 同 API。\n     *\n     * System cols(__select__ / __drag__ / __actions__)自動 false(內部 hard-code,\n     * consumer 不需設)— 永遠固定寬。\n     *\n     * 典型 use case:custom 圖示欄、status indicator 欄、密度太緊不該 user 動的欄。\n     */\n    resizable?: boolean\n    /**\n     * Explicit opt-out from filter UI(預設 accessor column 有 type 即 filterable)。\n     *\n     * 用於:有 `type` 但不想在 filter UI 出現的 accessor column\n     * (例如:internal sorting key、composite display 用的 hidden column)。\n     */\n    filterable?: boolean\n    /** Number/currency formatting options */\n    prefix?: string\n    suffix?: string\n    precision?: number\n    locale?: string\n    /** Select/multiSelect options — maps value to display label */\n    options?: Array<{ value: string; label: string }>\n    /** Date: Intl.DateTimeFormat options */\n    formatOptions?: Intl.DateTimeFormatOptions\n    /**\n     * Date: 是否含時間部分(datetime mode)。對齊 Notion idiom — 不另設 datetime column type。\n     *\n     * - `false`(default):cell 顯示與 filter 比對僅日期(day-level 精度)\n     * - `true`:cell 渲 date+time;filter 比對走 ms 精度(避開 Airtable 著名地雷)\n     *\n     * 在 advanced filter 中,`date` columnType 配 `includeTime=true` 時,\n     * `date_*` ValueShape 自動 promote 到 `datetime_*`,渲 `<DatePicker showTime>` /\n     * `<DatePickerRange showTime>`(詳 `filter-operators.ts` `getValueShape`)。\n     */\n    includeTime?: boolean\n    /** Link: 自訂顯示文字（不設則自動從 URL 提取 hostname） */\n    linkLabel?: string\n    /**\n     * Inline edit:column 是否可編輯。\n     * - `true`:可編\n     * - `false`(default):唯讀\n     * - `(row) => boolean`:per-row 動態決定(e.g. row.status !== 'archived' 才能編)\n     *\n     * 互動 per type(對齊 Notion / Airtable):\n     * - string / number / currency:click cell → inline `<Input>` autoFocus + selected\n     * - date / select / multiSelect / person / multiPerson:click cell → 進 edit mode 的 Field control(用戶按 trigger 開 picker)\n     * - boolean:不分 read/edit mode,直接 `<Checkbox>` 點即 toggle + commit\n     * - url:read = 連結;**hover cell** 右側出 Pencil 按鈕,click 才進 `<Input>` edit mode(保留 click 連結語意)\n     *\n     * Esc cancel / blur or Enter commit。Commit 觸發 `onCellCommit`。\n     */\n    editable?: boolean | ((row: TData) => boolean)\n    /**\n     * Inline disabled state(2026-05-13 Stream C Cluster B Q3 ship,per codex Q3 verdict):\n     * cell 不可操作 state(orthogonal to editable readonly)。\n     * - `true`:cell 永遠 disabled\n     * - `false` / undef(default):cell normal\n     * - `(row) => boolean`:per-row 動態(e.g. row.archived 或 row.locked 才 disabled)\n     *\n     * 視覺(per `color.spec.md` `--bg-disabled` component-state token):\n     * - TD 外殼:`bg-disabled` + `cursor-not-allowed` + 抑制 hover ring\n     * - Cell content(Field family):`mode='disabled'` → 各 Field type 內部走具體 disabled token\n     * - edit entry 抑制:disabled cell 點擊不進 edit(對齊 `editable && !disabled` invariant)\n     *\n     * 跟 `editable=false` 區分:editable=false = readonly(可看不可編);disabled = 不可操作 state。\n     * 對齊 MUI X `isCellEditable` + cellClassName / AG Grid `cellClassRules` / Notion locked properties。\n     */\n    disabled?: boolean | ((row: TData) => boolean)\n    /**\n     * Locked column — column reorder 不可拖,Notion 「primary column」 pattern。\n     * 對齊 SKU / ID 等不可移欄位。\n     */\n    locked?: boolean\n    /** Person/multiPerson edit mode: people pool for picker(2026-05-05 v4 type-augmentation)。 */\n    people?: Array<{ name: string; avatarUrl?: string; description?: string }>\n  }\n}\n"],"names":[],"mappings":"AAoCO,MAAM,qBAA2D;AAAA,EACtE,QAAa,EAAE,OAAO,OAAA;AAAA,EACtB,QAAa,EAAE,OAAO,QAAA;AAAA,EACtB,UAAa,EAAE,OAAO,QAAA;AAAA,EACtB,MAAa,EAAE,OAAO,OAAA;AAAA,EACtB,MAAa,EAAE,OAAO,OAAA;AAAA,EACtB,QAAa,EAAE,OAAO,OAAA;AAAA,EACtB,aAAa,EAAE,OAAO,OAAA;AAAA,EACtB,QAAa,EAAE,OAAO,OAAA;AAAA,EACtB,aAAa,EAAE,OAAO,OAAA;AAAA,EACtB,SAAa,EAAE,OAAO,OAAA;AAAA,EACtB,KAAa,EAAE,OAAO,OAAA;AACxB;"}
+{"version":3,"file":"column-types.js","sources":["../../../src/components/DataTable/column-types.ts"],"sourcesContent":["import type { RowData } from '@tanstack/react-table'\n\n// ── Column Types ─────────────────────────────────────────────────────────────\n\n// ── Column Types ─────────────────────────────────────────────────────────────\n//\n// 命名原則:描述**資料型別**本身,不是視覺變體。命名要避開撞 Button `variant` 值。\n// `string` / `url` 是世界級 DS(Atlassian / Notion / Ant Table)的資料型別用語,\n// 跟 Button 的視覺變體 `text` / `link` 在 consumer 心智不會混淆。\nexport const columnTypes = [\n  'string',      // 前身為 'text',因撞 Button variant=\"text\"(文字樣式按鈕)改名\n  'number',\n  'currency',\n  'date',\n  'time',        // Phase C(2026-05-05):time-only column,渲 `<TimePicker>`\n  'select',\n  'multiSelect',\n  'person',\n  'multiPerson',\n  'boolean',\n  'url',         // 前身為 'link',因撞 Button variant=\"link\"(連結樣式按鈕)改名\n] as const\n\nexport type ColumnType = (typeof columnTypes)[number]\n\n// ── Column Type Config ───────────────────────────────────────────────────────\n\nexport interface ColumnTypeConfig {\n  /** Default horizontal alignment */\n  align: 'left' | 'right' | 'center'\n  // L3: sortingFn\n  // L4: filterVariant, filterFn\n  // L5: cellRenderer, cellEditor\n}\n\n/** Default config per column type */\nexport const columnTypeDefaults: Record<ColumnType, ColumnTypeConfig> = {\n  string:      { align: 'left' },\n  number:      { align: 'right' },\n  currency:    { align: 'right' },\n  date:        { align: 'left' },\n  time:        { align: 'left' },\n  select:      { align: 'left' },\n  multiSelect: { align: 'left' },\n  person:      { align: 'left' },\n  multiPerson: { align: 'left' },\n  boolean:     { align: 'left' },\n  url:         { align: 'left' },\n}\n\n// ── Extend TanStack Table ColumnMeta ─────────────────────────────────────────\n\ndeclare module '@tanstack/react-table' {\n  interface ColumnMeta<TData extends RowData, TValue> {\n    /**\n     * Column data type — determines default alignment, rendering, sorting, filtering.\n     *\n     * **Filterable column 必須設此 prop**(filter UI 只列有 `type` 的 column,\n     * 對齊 Notion / Airtable / Linear:每 property 強制有 type)。\n     */\n    type?: ColumnType\n    /** Override default alignment from column type */\n    align?: 'left' | 'right' | 'center'\n    /** Allow text wrapping (only effective when autoRowHeight is true) */\n    wrap?: boolean\n    /**\n     * Max visible lines before ellipsis(2026-05-14 I9 per codex verdict + user 拍板)。\n     * Only effective when `autoRowHeight + wrap=true`。Display 用 `line-clamp-N`,edit textarea\n     * 高度 match clamp。對齊 Notion 「Truncate」row toggle / AG Grid `cellClassRules` 上限 row height。\n     * Default = undefined(無 clamp,完整 wrap)。\n     */\n    maxLines?: number\n    /**\n     * Column 寬度(px)— DS canonical 命名(2026-05-06 v14.3)。\n     *\n     * **為何不用 TanStack 的 `size`** — DS 內 `size` 既定意為元件 density string\n     * `'sm' | 'md' | 'lg'`(Field / Button / Input 等 49+ 處 use case)。Column 寬\n     * 是 px 數字,跟 density 概念衝突 → 走 DS-internal 命名 `width`/`minWidth`/`maxWidth`\n     * (對齊 CSS 原生 + AG Grid 的命名共識)。\n     *\n     * 內部 pre-process 會把 `meta.width` copy 到 TanStack 的 root `size`,確保 column\n     * resize feature(`enableColumnResize=true` 拖拉 + columnSizing state)正常運作。\n     *\n     * - **No resize mode**(default): `width` = column 寬度 reserve(cell ≥ width,\n     *   flex 可 grow,**不可 shrink** 低於 width)。對齊 user 預期「我設多寬就多寬」。\n     * - **Resize mode**(`enableColumnResize=true`):`width` = 初始寬度,user 可拖拉\n     *   到 `minWidth` 為止。\n     */\n    width?: number\n    /**\n     * Column 最小寬度(px)— resize 模式下的拖拉下限。No resize 模式不使用(`width` 即下限)。\n     * Default(resize mode 沒明示時)= 80px(`MIN_COLUMN_WIDTH`)。\n     */\n    minWidth?: number\n    /**\n     * Column 最大寬度(px)— resize 模式下的拖拉上限。預設無上限。\n     */\n    maxWidth?: number\n    /**\n     * Column 是否可被 user 拖拉 resize(opt-out per col)。Default `true`(when `enableColumnResize` 也 true)。\n     *\n     * Set `false` 表「此 col 寬度由內容決定不允許 resize」(2026-05-10 加,per user\n     * 「操作列這種內容決定寬度的欄位應該不允許 resize」)。對齊 AG Grid `colDef.resizable` /\n     * Material X-DataGrid 同 API。\n     *\n     * System cols(__select__ / __drag__ / __actions__)自動 false(內部 hard-code,\n     * consumer 不需設)— 永遠固定寬。\n     *\n     * 典型 use case:custom 圖示欄、status indicator 欄、密度太緊不該 user 動的欄。\n     */\n    resizable?: boolean\n    /**\n     * Explicit opt-out from filter UI(預設 accessor column 有 type 即 filterable)。\n     *\n     * 用於:有 `type` 但不想在 filter UI 出現的 accessor column\n     * (例如:internal sorting key、composite display 用的 hidden column)。\n     */\n    filterable?: boolean\n    /** Number/currency formatting options */\n    prefix?: string\n    suffix?: string\n    precision?: number\n    locale?: string\n    /** Select/multiSelect options — maps value to display label */\n    /** select/multiSelect 選項:消費 Select 的 SelectOption 完整 schema(M30 wrapper-extends-primitive;\n     *  2026-07-08 原 {value,label} 窄型別讓 icon/description/iconClassName 傳不進 = 假 SSOT)*/\n    options?: Array<import('../Select/select').SelectOption>\n    /** select cell 的 trigger/display 自訂渲染(轉發 Select.selectedItemRenderer;status 彩色 icon 場景)*/\n    selectedItemRenderer?: (opt: import('../Select/select').SelectOption) => React.ReactNode\n    /** select cell 顯示模式(轉發 Select.display;cell-registry SelectCell 消費 `meta?.display`)。\n     *  default `'plain'` 純文字;`'tag'` opt-in 內容導向 Tag 視覺(status / category 彩色標籤,\n     *  搭配 options 的 `tagVariant`)。2026-07-14 deep-audit 補型別:runtime 一直消費此欄位\n     *  (cell-registry.tsx SelectCell displayMode),但 ColumnMeta 漏宣告 → typed consumer 傳不進(假 SSOT)。 */\n    display?: 'plain' | 'tag'\n    /** Date: Intl.DateTimeFormat options */\n    formatOptions?: Intl.DateTimeFormatOptions\n    /**\n     * Date: 是否含時間部分(datetime mode)。對齊 Notion idiom — 不另設 datetime column type。\n     *\n     * - `false`(default):cell 顯示與 filter 比對僅日期(day-level 精度)\n     * - `true`:cell 渲 date+time;filter 比對走 ms 精度(避開 Airtable 著名地雷)\n     *\n     * 在 advanced filter 中,`date` columnType 配 `includeTime=true` 時,\n     * `date_*` ValueShape 自動 promote 到 `datetime_*`,渲 `<DatePicker showTime>` /\n     * `<DatePickerRange showTime>`(詳 `filter-operators.ts` `getValueShape`)。\n     */\n    includeTime?: boolean\n    /** Link: 自訂顯示文字（不設則自動從 URL 提取 hostname） */\n    linkLabel?: string\n    /**\n     * Inline edit:column 是否可編輯。\n     * - `true`:可編\n     * - `false`(default):唯讀\n     * - `(row) => boolean`:per-row 動態決定(e.g. row.status !== 'archived' 才能編)\n     *\n     * 互動 per type(對齊 Notion / Airtable):\n     * - string / number / currency:click cell → inline `<Input>` autoFocus + selected\n     * - date / select / multiSelect / person / multiPerson:click cell → 進 edit mode 的 Field control(用戶按 trigger 開 picker)\n     * - boolean:不分 read/edit mode,直接 `<Checkbox>` 點即 toggle + commit\n     * - url:read = 連結;**hover cell** 右側出 Pencil 按鈕,click 才進 `<Input>` edit mode(保留 click 連結語意)\n     *\n     * Esc cancel / blur or Enter commit。Commit 觸發 `onCellCommit`。\n     */\n    editable?: boolean | ((row: TData) => boolean)\n    /**\n     * Inline disabled state(2026-05-13 Stream C Cluster B Q3 ship,per codex Q3 verdict):\n     * cell 不可操作 state(orthogonal to editable readonly)。\n     * - `true`:cell 永遠 disabled\n     * - `false` / undef(default):cell normal\n     * - `(row) => boolean`:per-row 動態(e.g. row.archived 或 row.locked 才 disabled)\n     *\n     * 視覺(per `color.spec.md` `--bg-disabled` component-state token):\n     * - TD 外殼:`bg-disabled` + `cursor-not-allowed` + 抑制 hover ring\n     * - Cell content(Field family):`mode='disabled'` → 各 Field type 內部走具體 disabled token\n     * - edit entry 抑制:disabled cell 點擊不進 edit(對齊 `editable && !disabled` invariant)\n     *\n     * 跟 `editable=false` 區分:editable=false = readonly(可看不可編);disabled = 不可操作 state。\n     * 對齊 MUI X `isCellEditable` + cellClassName / AG Grid `cellClassRules` / Notion locked properties。\n     */\n    disabled?: boolean | ((row: TData) => boolean)\n    /**\n     * Locked column — column reorder 不可拖,Notion 「primary column」 pattern。\n     * 對齊 SKU / ID 等不可移欄位。\n     */\n    locked?: boolean\n    /** Person/multiPerson edit mode: people pool for picker(2026-05-05 v4 type-augmentation)。 */\n    people?: Array<{ name: string; avatarUrl?: string; description?: string }>\n  }\n}\n"],"names":[],"mappings":"AAoCO,MAAM,qBAA2D;AAAA,EACtE,QAAa,EAAE,OAAO,OAAA;AAAA,EACtB,QAAa,EAAE,OAAO,QAAA;AAAA,EACtB,UAAa,EAAE,OAAO,QAAA;AAAA,EACtB,MAAa,EAAE,OAAO,OAAA;AAAA,EACtB,MAAa,EAAE,OAAO,OAAA;AAAA,EACtB,QAAa,EAAE,OAAO,OAAA;AAAA,EACtB,aAAa,EAAE,OAAO,OAAA;AAAA,EACtB,QAAa,EAAE,OAAO,OAAA;AAAA,EACtB,aAAa,EAAE,OAAO,OAAA;AAAA,EACtB,SAAa,EAAE,OAAO,OAAA;AAAA,EACtB,KAAa,EAAE,OAAO,OAAA;AACxB;"}

package/dist/components/DataTable/data-table-column-visibility-panel.d.ts

@@ -9,7 +9,7 @@
  *   - Locked 欄位(`lockedIds`)— 顯 Lock icon,不可 toggle / 不可 drag
  *   - 可選 search filter(`searchable`,跨欄位 label match)
  *   - 可選 column drag reorder(`onColumnOrderChange` 傳 → 啟 DnD)
- *   - 可選 reset 按鈕(`onReset`,header 區 RotateCcw)
+ *   - 可選 reset 按鈕(`resettable: boolean` opt-in,header 區 RotateCcw;點擊 `onVisibilityChange({})` 還原全顯示,無獨立 onReset prop)
  *   - Bidirectional bulk toggle(footer button:全可見 → 全部隱藏 / 任一隱藏 → 顯示全部)
  *
  * **Why 抽 primitive**(per Issue 3 Rule-of-3):RoadmapAllInOne + WithBulkActions + 未來 product

package/dist/components/DataTable/data-table-column-visibility-panel.js

@@ -0,0 +1,183 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { RotateCcw, X, Search, Lock, GripVertical, Eye, EyeOff } from "lucide-react";
+import { Button } from "../Button/button.js";
+import { ButtonDivider } from "../Button/button-group.js";
+import { Input } from "../Input/input.js";
+import { ScrollArea } from "../ScrollArea/scroll-area.js";
+import { PopoverHeader, PopoverTitle, PopoverClose, PopoverFooter } from "../Popover/popover.js";
+import { ItemPrefix, ItemInlineActionButton, ItemLabel, ROW_PADDING_BY_SIZE } from "../../patterns/element-anatomy/item-anatomy.js";
+import { cn } from "../../lib/utils.js";
+import { DndContext, closestCenter } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { dragSourceStyle } from "../../lib/drag-visual.js";
+function DataTableColumnVisibilityPanel({
+  columns,
+  visibility,
+  onVisibilityChange,
+  columnOrder,
+  onColumnOrderChange,
+  lockedIds = [],
+  searchable = false,
+  resettable = false
+}) {
+  const [search, setSearch] = React.useState("");
+  const lockedSet = React.useMemo(() => new Set(lockedIds), [lockedIds]);
+  const dndEnabled = !!(columnOrder && onColumnOrderChange);
+  const orderedIds = React.useMemo(() => {
+    if (columnOrder && columnOrder.length > 0) {
+      const colSet = new Set(columns.map((c) => c.id));
+      return columnOrder.filter((id) => colSet.has(id));
+    }
+    return columns.map((c) => c.id);
+  }, [columnOrder, columns]);
+  const filteredEntries = React.useMemo(() => {
+    return orderedIds.map((id) => columns.find((c) => c.id === id)).filter((c) => c != null).filter((c) => search ? c.label.toLowerCase().includes(search.toLowerCase()) : true);
+  }, [orderedIds, columns, search]);
+  const togglableIds = columns.map((c) => c.id).filter((id) => !lockedSet.has(id));
+  const allVisible = togglableIds.every((id) => visibility[id] !== false);
+  const anyHidden = togglableIds.some((id) => visibility[id] === false);
+  const handleToggle = (id) => {
+    const visible = visibility[id] !== false;
+    onVisibilityChange({ ...visibility, [id]: !visible });
+  };
+  const handleReset = () => onVisibilityChange({});
+  const handleBulkToggle = () => {
+    if (allVisible) {
+      const next = {};
+      togglableIds.forEach((id) => {
+        next[id] = false;
+      });
+      onVisibilityChange(next);
+    } else {
+      onVisibilityChange({});
+    }
+  };
+  const handleDragEnd = (e) => {
+    if (!dndEnabled) return;
+    const { active, over } = e;
+    if (!over || active.id === over.id) return;
+    const oldIdx = columnOrder.indexOf(active.id);
+    const newIdx = columnOrder.indexOf(over.id);
+    if (oldIdx < 0 || newIdx < 0) return;
+    if (lockedSet.has(columnOrder[oldIdx]) || lockedSet.has(columnOrder[newIdx])) return;
+    const next = [...columnOrder];
+    const [m] = next.splice(oldIdx, 1);
+    next.splice(newIdx, 0, m);
+    onColumnOrderChange(next);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PopoverHeader, { hideClose: true, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 w-full min-w-0", children: [
+      /* @__PURE__ */ jsx(PopoverTitle, { className: "flex-1", children: "欄位顯示" }),
+      resettable && anyHidden && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "text",
+            size: "sm",
+            iconOnly: true,
+            startIcon: RotateCcw,
+            "aria-label": "恢復預設",
+            onClick: handleReset
+          }
+        ),
+        /* @__PURE__ */ jsx(ButtonDivider, {})
+      ] }),
+      /* @__PURE__ */ jsx(PopoverClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { "data-dismiss": true, iconOnly: true, dismiss: true, size: "sm", startIcon: X, "aria-label": "關閉" }) })
+    ] }) }),
+    searchable && /* @__PURE__ */ jsx("div", { className: "px-[var(--layout-space-loose)] pt-[var(--layout-space-tight)]", children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        size: "md",
+        placeholder: "搜尋欄位…",
+        value: search,
+        onChange: (e) => setSearch(e.target.value),
+        startIcon: Search
+      }
+    ) }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-72", children: /* @__PURE__ */ jsx("div", { className: "py-2 flex flex-col", style: { "--item-prefix-slot": "16px" }, children: dndEnabled ? /* @__PURE__ */ jsx(DndContext, { collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(
+      SortableContext,
+      {
+        items: filteredEntries.map((e) => e.id).filter((id) => !lockedSet.has(id)),
+        strategy: verticalListSortingStrategy,
+        children: filteredEntries.map(({ id, label }) => /* @__PURE__ */ jsx(
+          VisibilityRow,
+          {
+            id,
+            label,
+            visible: visibility[id] !== false,
+            locked: lockedSet.has(id),
+            draggable: true,
+            onToggle: () => handleToggle(id)
+          },
+          id
+        ))
+      }
+    ) }) : filteredEntries.map(({ id, label }) => /* @__PURE__ */ jsx(
+      VisibilityRow,
+      {
+        id,
+        label,
+        visible: visibility[id] !== false,
+        locked: lockedSet.has(id),
+        draggable: false,
+        onToggle: () => handleToggle(id)
+      },
+      id
+    )) }) }),
+    /* @__PURE__ */ jsx(PopoverFooter, { className: "justify-start", children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: handleBulkToggle, children: allVisible ? "全部隱藏" : "顯示全部" }) })
+  ] });
+}
+function VisibilityRow({
+  id,
+  label,
+  visible,
+  locked,
+  draggable,
+  onToggle
+}) {
+  const sortable = useSortable({ id, disabled: locked || !draggable });
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = sortable;
+  const style = draggable ? { transform: CSS.Transform.toString(transform), transition, ...dragSourceStyle(isDragging) } : {};
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: draggable ? setNodeRef : void 0,
+      style,
+      className: cn(
+        "flex items-start gap-2 w-full px-[var(--layout-space-loose)]",
+        ROW_PADDING_BY_SIZE.md
+      ),
+      children: [
+        /* @__PURE__ */ jsx(ItemPrefix, { children: locked ? /* @__PURE__ */ jsx(Lock, { size: 16, className: "text-fg-muted", "aria-hidden": true }) : draggable ? /* @__PURE__ */ jsx(
+          ItemInlineActionButton,
+          {
+            icon: GripVertical,
+            size: "md",
+            "aria-label": "拖曳重排",
+            className: "cursor-grab active:cursor-grabbing",
+            ...attributes,
+            ...listeners
+          }
+        ) : null }),
+        /* @__PURE__ */ jsx(ItemLabel, { className: locked ? "text-fg-disabled" : void 0, children: label }),
+        /* @__PURE__ */ jsx(
+          ItemInlineActionButton,
+          {
+            icon: visible ? Eye : EyeOff,
+            size: "md",
+            "aria-label": visible ? "隱藏此欄" : "顯示此欄",
+            disabled: locked,
+            onClick: onToggle,
+            className: locked ? "cursor-not-allowed text-fg-disabled" : ""
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  DataTableColumnVisibilityPanel
+};
+//# sourceMappingURL=data-table-column-visibility-panel.js.map

package/dist/components/DataTable/data-table-column-visibility-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-column-visibility-panel.js","sources":["../../../src/components/DataTable/data-table-column-visibility-panel.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/**\n * DataTableColumnVisibilityPanel — Issue 3 primitive(2026-05-10)。\n *\n * 從 WithBulkActions story L868+(149 lines)+ RoadmapAllInOne(L1796+,53 lines)抽出 SSOT\n * primitive。Roadmap demo 跟 WithBulkActions 都用此 panel 開啟「欄位顯示」popover。\n *\n * **Feature SSOT**(對齊 Linear / Airtable / Notion / Material X-DataGrid 的 columnVisibility panel idiom):\n *   - 列出所有 togglable 欄位 + Eye / EyeOff 切換\n *   - Locked 欄位(`lockedIds`)— 顯 Lock icon,不可 toggle / 不可 drag\n *   - 可選 search filter(`searchable`,跨欄位 label match)\n *   - 可選 column drag reorder(`onColumnOrderChange` 傳 → 啟 DnD)\n *   - 可選 reset 按鈕(`resettable: boolean` opt-in,header 區 RotateCcw;點擊 `onVisibilityChange({})` 還原全顯示,無獨立 onReset prop)\n *   - Bidirectional bulk toggle(footer button:全可見 → 全部隱藏 / 任一隱藏 → 顯示全部)\n *\n * **Why 抽 primitive**(per Issue 3 Rule-of-3):RoadmapAllInOne + WithBulkActions + 未來 product\n * UI 至少 3 處消費同 panel。重複 hand-craft → 設計語言 drift(已抓到:Roadmap 版無 search /\n * 無 drag / 無 reset,WithBulkActions 版有,語意不一致)。Primitive 把所有 feature 集中,\n * consumer opt-in via props 確保 SSOT。\n *\n * **對齊**:Linear column-visibility-panel pattern / Material X-DataGrid `<GridColumnsPanel>`\n * / Airtable Field-config drawer。\n */\n\nimport * as React from 'react'\nimport { Eye, EyeOff, Lock, GripVertical, Search, RotateCcw, X as XIcon } from 'lucide-react'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ButtonDivider } from '@/design-system/components/Button/button-group'\nimport { Input } from '@/design-system/components/Input/input'\nimport { ScrollArea } from '@/design-system/components/ScrollArea/scroll-area'\nimport { PopoverHeader, PopoverFooter, PopoverTitle, PopoverClose } from '@/design-system/components/Popover/popover'\nimport { ItemPrefix, ItemLabel, ItemInlineActionButton, ROW_PADDING_BY_SIZE } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { cn } from '@/lib/utils'\nimport { DndContext, closestCenter, type DragEndEvent } from '@dnd-kit/core'\nimport { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { dragSourceStyle } from '@/design-system/lib/drag-visual'\n\ninterface ColumnVisibilityPanelColumn {\n  /** Column id(stable identifier;對齊 DataTable column.id / accessorKey)*/\n  id: string\n  /** Column header label(human-readable)*/\n  label: string\n}\n\nexport interface DataTableColumnVisibilityPanelProps {\n  /** 全部可 toggle 欄位(consumer 已過濾掉 system cols 如 __select__)*/\n  columns: ColumnVisibilityPanelColumn[]\n  /** 受控 visibility map(`true` / undefined = visible / `false` = hidden)*/\n  visibility: Record<string, boolean>\n  /** Visibility 變更 callback */\n  onVisibilityChange: (next: Record<string, boolean>) => void\n  /** 受控 column order(若提供啟 DnD reorder) */\n  columnOrder?: string[]\n  /** Order 變更 callback;若提供 → 啟用 drag handle / DnD reorder */\n  onColumnOrderChange?: (next: string[]) => void\n  /** Locked column ids(顯 Lock icon,不可 toggle / 不可 drag)*/\n  lockedIds?: string[]\n  /** 是否啟搜尋 input(預設 false)*/\n  searchable?: boolean\n  /** 是否顯 reset button(任一欄隱藏才顯,onClick 清空 visibility map)*/\n  resettable?: boolean\n  // Issue 3 post-codex audit(2026-05-10):`onClose` prop retired — Radix `PopoverClose asChild`\n  // 已自帶 popover dismiss,沒 concrete consumer 需 callback。Future 若需要再加。\n}\n\nexport function DataTableColumnVisibilityPanel({\n  columns,\n  visibility,\n  onVisibilityChange,\n  columnOrder,\n  onColumnOrderChange,\n  lockedIds = [],\n  searchable = false,\n  resettable = false,\n}: DataTableColumnVisibilityPanelProps) {\n  const [search, setSearch] = React.useState('')\n  const lockedSet = React.useMemo(() => new Set(lockedIds), [lockedIds])\n  const dndEnabled = !!(columnOrder && onColumnOrderChange)\n\n  // 計算 visible order:用 columnOrder 排,fallback columns 順序。\n  const orderedIds = React.useMemo(() => {\n    if (columnOrder && columnOrder.length > 0) {\n      const colSet = new Set(columns.map((c) => c.id))\n      return columnOrder.filter((id) => colSet.has(id))\n    }\n    return columns.map((c) => c.id)\n  }, [columnOrder, columns])\n\n  const filteredEntries = React.useMemo(() => {\n    return orderedIds\n      .map((id) => columns.find((c) => c.id === id))\n      .filter((c): c is ColumnVisibilityPanelColumn => c != null)\n      .filter((c) => (search ? c.label.toLowerCase().includes(search.toLowerCase()) : true))\n  }, [orderedIds, columns, search])\n\n  const togglableIds = columns.map((c) => c.id).filter((id) => !lockedSet.has(id))\n  const allVisible = togglableIds.every((id) => visibility[id] !== false)\n  const anyHidden = togglableIds.some((id) => visibility[id] === false)\n\n  const handleToggle = (id: string) => {\n    const visible = visibility[id] !== false\n    onVisibilityChange({ ...visibility, [id]: !visible })\n  }\n\n  const handleReset = () => onVisibilityChange({})\n\n  const handleBulkToggle = () => {\n    if (allVisible) {\n      const next: Record<string, boolean> = {}\n      togglableIds.forEach((id) => { next[id] = false })\n      onVisibilityChange(next)\n    } else {\n      onVisibilityChange({})\n    }\n  }\n\n  const handleDragEnd = (e: DragEndEvent) => {\n    if (!dndEnabled) return\n    const { active, over } = e\n    if (!over || active.id === over.id) return\n    const oldIdx = columnOrder!.indexOf(active.id as string)\n    const newIdx = columnOrder!.indexOf(over.id as string)\n    if (oldIdx < 0 || newIdx < 0) return\n    // Locked id 不可被 reorder 動到\n    if (lockedSet.has(columnOrder![oldIdx]) || lockedSet.has(columnOrder![newIdx])) return\n    const next = [...columnOrder!]\n    const [m] = next.splice(oldIdx, 1)\n    next.splice(newIdx, 0, m)\n    onColumnOrderChange!(next)\n  }\n\n  return (\n    <>\n      <PopoverHeader hideClose>\n        <div className=\"flex items-center gap-1 w-full min-w-0\">\n          <PopoverTitle className=\"flex-1\">欄位顯示</PopoverTitle>\n          {resettable && anyHidden && (\n            <>\n              <Button\n                variant=\"text\" size=\"sm\" iconOnly startIcon={RotateCcw}\n                aria-label=\"恢復預設\"\n                onClick={handleReset}\n              />\n              <ButtonDivider />\n            </>\n          )}\n          <PopoverClose asChild>\n            <Button data-dismiss iconOnly dismiss size=\"sm\" startIcon={XIcon} aria-label=\"關閉\" />\n          </PopoverClose>\n        </div>\n      </PopoverHeader>\n      {searchable && (\n        <div className=\"px-[var(--layout-space-loose)] pt-[var(--layout-space-tight)]\">\n          <Input\n            size=\"md\"\n            placeholder=\"搜尋欄位…\"\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n            startIcon={Search}\n          />\n        </div>\n      )}\n      <ScrollArea className=\"max-h-72\">\n        <div className=\"py-2 flex flex-col\" style={{ '--item-prefix-slot': '16px' } as React.CSSProperties}>\n          {dndEnabled ? (\n            <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>\n              <SortableContext\n                items={filteredEntries.map((e) => e.id).filter((id) => !lockedSet.has(id))}\n                strategy={verticalListSortingStrategy}\n              >\n                {filteredEntries.map(({ id, label }) => (\n                  <VisibilityRow\n                    key={id}\n                    id={id}\n                    label={label}\n                    visible={visibility[id] !== false}\n                    locked={lockedSet.has(id)}\n                    draggable\n                    onToggle={() => handleToggle(id)}\n                  />\n                ))}\n              </SortableContext>\n            </DndContext>\n          ) : (\n            filteredEntries.map(({ id, label }) => (\n              <VisibilityRow\n                key={id}\n                id={id}\n                label={label}\n                visible={visibility[id] !== false}\n                locked={lockedSet.has(id)}\n                draggable={false}\n                onToggle={() => handleToggle(id)}\n              />\n            ))\n          )}\n        </div>\n      </ScrollArea>\n      <PopoverFooter className=\"justify-start\">\n        <Button variant=\"tertiary\" size=\"sm\" onClick={handleBulkToggle}>\n          {allVisible ? '全部隱藏' : '顯示全部'}\n        </Button>\n      </PopoverFooter>\n    </>\n  )\n}\n\n// VisibilityRow:single column row。Draggable mode → GripVertical handle / static mode → 無 handle。\nfunction VisibilityRow({\n  id, label, visible, locked, draggable, onToggle,\n}: {\n  id: string\n  label: string\n  visible: boolean\n  locked: boolean\n  draggable: boolean\n  onToggle: () => void\n}) {\n  // Conditional hooks 不行 — 永遠呼 useSortable,只是 disabled 時 listeners no-op\n  const sortable = useSortable({ id, disabled: locked || !draggable })\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = sortable\n  const style: React.CSSProperties = draggable\n    ? { transform: CSS.Transform.toString(transform), transition, ...dragSourceStyle(isDragging) }\n    : {}\n  return (\n    <div\n      ref={draggable ? setNodeRef : undefined}\n      style={style}\n      className={cn(\n        'flex items-start gap-2 w-full px-[var(--layout-space-loose)]',\n        ROW_PADDING_BY_SIZE.md,\n      )}\n    >\n      <ItemPrefix>\n        {/* 2026-05-18 改 per user「做完」approval:14 → 16 對齊 uiSize.spec.md Icon Tier */}\n        {locked ? (\n          <Lock size={16} className=\"text-fg-muted\" aria-hidden />\n        ) : draggable ? (\n          <ItemInlineActionButton\n            icon={GripVertical}\n            size=\"md\"\n            aria-label=\"拖曳重排\"\n            className=\"cursor-grab active:cursor-grabbing\"\n            {...attributes}\n            {...listeners}\n          />\n        ) : null}\n      </ItemPrefix>\n      <ItemLabel className={locked ? 'text-fg-disabled' : undefined}>{label}</ItemLabel>\n      <ItemInlineActionButton\n        icon={visible ? Eye : EyeOff}\n        size=\"md\"\n        aria-label={visible ? '隱藏此欄' : '顯示此欄'}\n        disabled={locked}\n        onClick={onToggle}\n        className={locked ? 'cursor-not-allowed text-fg-disabled' : ''}\n      />\n    </div>\n  )\n}\n"],"names":["XIcon"],"mappings":"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"}

package/dist/components/DataTable/data-table-filter-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-filter-panel.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/data-table-filter-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAyBtD,OAAO,EACL,qBAAqB,EACrB,kBAAkB,EAElB,YAAY,EACZ,oBAAoB,EACpB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACtB,MAAM,eAAe,CAAA;AAGtB,OAAO,EACL,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,EACZ,oBAAoB,GACrB,CAAA;AACD,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,cAAc,EAAE,gBAAgB,EAAE,CAAA;AA6TvG,MAAM,WAAW,yBAAyB,CAAC,KAAK;IAC9C,yDAAyD;IACzD,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAA;IACvB,0BAA0B;IAC1B,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAA;IAChC,gCAAgC;IAChC,KAAK,EAAE,UAAU,CAAA;IACjB,wBAAwB;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAA;IACpC;;;;OAIG;IACH,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA2PD,eAAO,MAAM,oBAAoB,EAAkD,CAAC,KAAK,EACvF,KAAK,EAAE,yBAAyB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;CAAE,KACnF,KAAK,CAAC,YAAY,CACtB"}
+{"version":3,"file":"data-table-filter-panel.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/data-table-filter-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAyBtD,OAAO,EACL,qBAAqB,EACrB,kBAAkB,EAElB,YAAY,EACZ,oBAAoB,EACpB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACtB,MAAM,eAAe,CAAA;AAGtB,OAAO,EACL,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,EACZ,oBAAoB,GACrB,CAAA;AACD,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,cAAc,EAAE,gBAAgB,EAAE,CAAA;AA6TvG,MAAM,WAAW,yBAAyB,CAAC,KAAK;IAC9C,yDAAyD;IACzD,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAA;IACvB,0BAA0B;IAC1B,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAA;IAChC,gCAAgC;IAChC,KAAK,EAAE,UAAU,CAAA;IACjB,wBAAwB;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAA;IACpC;;;;OAIG;IACH,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA8PD,eAAO,MAAM,oBAAoB,EAAkD,CAAC,KAAK,EACvF,KAAK,EAAE,yBAAyB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;CAAE,KACnF,KAAK,CAAC,YAAY,CACtB"}