@qijenchen/design-system 0.1.0-beta.85 → 0.1.0-beta.87

package/src/components/Combobox/combobox.tsx

@@ -1,5 +1,5 @@
 // @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.
-// @renderer-symmetry-allow: ComboboxTagStack(display path)接 consumer tagRenderer 是 Stream C 下 cycle 工作 — 2026-05-12 先 ship Issues 2/3/4 surgical fixes(placeholder vocabulary + cell surface metrics + placeholder truncate),tagRenderer display-path unify deferred per field-controls.spec.md 共享 contract a。當前 multi=1 顯示已透過 PeoplePicker tagRenderer(people-picker.tsx:426-444)PersonDisplay SSOT 對齊;其他 Combobox consumer 走 default `<Tag>` 純文字 backward-compat。
+// @renderer-symmetry-allow: ComboboxTagStack(view path)接 consumer tagRenderer 是 Stream C 下 cycle 工作 — 2026-05-12 先 ship Issues 2/3/4 surgical fixes(placeholder vocabulary + cell surface metrics + placeholder truncate),tagRenderer view-path unify deferred per field-controls.spec.md 共享 contract a。當前 multi=1 顯示已透過 PeoplePicker tagRenderer(people-picker.tsx:426-444)PersonDisplay SSOT 對齊;其他 Combobox consumer 走 default `<Tag>` 純文字 backward-compat。
 // code-quality-allow: file-size — Combobox 含 NativeCombobox/CustomCombobox/useOverflowCount/OverflowTagList/ComboboxTagStack 5 子元件 + 共用 helpers,split-into-files 會破壞 measurement closures + 重複 type definitions。
 import * as React from 'react'
 import { X, ChevronDown } from 'lucide-react'
@@ -237,7 +237,7 @@ interface OverflowTagListProps {
    * 2026-05-14 I4 fix(per codex M31 verdict + user 抓「display overflow 有 avatar / edit 無」):
    * Optional renderer for hidden items in `+N` overflow popover。Default fallback = `<Tag>{label}</Tag>`
    * (純文字 chip,backward-compat)。Consumer pass 此 prop 讓 hidden items 顯示同 avatar 視覺
-   * (對齊 display MultiPersonDisplay overflow popover Tag avatar SSOT)。
+   * (對齊 view path MultiPersonDisplay overflow popover Tag avatar SSOT)。
    */
   renderHiddenTag?: (item: { value: string; label: string }) => React.ReactNode
   onRemove?: (value: string) => void
@@ -297,7 +297,7 @@ function OverflowTagList({ containerRef, items, size, wrap, renderTag, renderHid
       {items.map((item, i) => (
         // 2026-05-14 I5 fix(per codex M31 verdict + user 抓「avatar stack 堆疊方向不一致」):
         // 加 z-index per-index — 前 item z 高(對齊 MultiPersonDisplay zIndex: visible.length - i
-        // canonical + MUI AvatarGroup surplus pattern)。display + edit stack 堆疊方向統一。
+        // canonical + MUI AvatarGroup surplus pattern)。view + edit stack 堆疊方向統一。
         <div key={item.value} ref={el => { tagEls.current[i] = el }} className={cn('shrink-0 max-w-full', tagWrapperClassName)} style={{ zIndex: items.length - i }}>{renderTag(item, i)}</div>
       ))}
       <div ref={overflowEl} className={cn('shrink-0', overflowWrapperClassName)}>
@@ -316,9 +316,9 @@ function OverflowTagList({ containerRef, items, size, wrap, renderTag, renderHid
   )
 }
 
-// ── Internal tag-stack renderer (consumed by ReadonlyMultiSelect / mode='display') ───
+// ── Internal tag-stack renderer (consumed by ReadonlyMultiSelect / mode='view') ───
 //
-// Phase B2(2026-05-05):原 ComboboxDisplay sub-component 已 retire,改 inline `<Combobox mode="display">`。
+// Phase B2(2026-05-05):原 ComboboxDisplay sub-component 已 retire,改 inline `<Combobox mode="view">`。
 // 本 helper 只負責 tag-stack 內容渲染(OverflowTagList 消費),不包 Field wrapper。
 function ComboboxTagStack({
   value, options, tagSize = 'md', wrap = false, containerRef: externalRef, disabled = false,
@@ -328,7 +328,7 @@ function ComboboxTagStack({
 }) {
   const emptyDisplay = useFieldEmptyDisplay()
   const ownRef = React.useRef<HTMLDivElement>(null)
-  if (!value || value.length === 0) return <span className={fieldEmptyColorClass(disabled ? 'disabled' : 'display')}>{emptyDisplay}</span>
+  if (!value || value.length === 0) return <span className={fieldEmptyColorClass(disabled ? 'disabled' : 'view')}>{emptyDisplay}</span>
   const items = value.map(v => ({ value: v, label: options?.find(o => o.value === v)?.label ?? v }))
   const disabledClass = disabled ? 'bg-disabled text-fg-disabled' : undefined
 
@@ -345,10 +345,10 @@ function ComboboxTagStack({
   )
 
   if (externalRef) return content
-  // 2026-05-05 v9 fix(Bug 4):display path 內 wrapper 必須 `flex-1 min-w-0`,否則在 cell flex
+  // 2026-05-05 v9 fix(Bug 4):view path 內 wrapper 必須 `flex-1 min-w-0`,否則在 cell flex
   // parent 下不認領完整可用寬度 → OverflowTagList 量得寬度小於 edit path → 顯 `+N` 多於 edit。
   // edit path tagAreaRef wrapper 已是 `flex-1 min-w-0`(NativeCombobox/CustomCombobox line 258 / 354),
-  // display 必對稱才 SSOT。
+  // view 必對稱才 SSOT。
   // 2026-05-15 F1 Q3 fix(per user round 3 verbatim「單人選取時 Tag 越界蓋 indicator」):
   // `overflow-visible` → `overflow-hidden` 讓 narrow cell width 強制 clip(Tag 內建 truncate
   // 處理 text ellipsis,stack `-ml-0.5` 負 margin 在 wrapper 內不受影響)。對齊
@@ -384,8 +384,9 @@ export interface ComboboxProps {
   /** 啟用搜尋 */
   searchable?: boolean
   /** Loading state(2026-05-15 audit B fix per user verbatim「dropdown 隨時可開,讀取在 panel 中間 CircularProgress」)。
-   *  Forward 給 SelectMenu primitive SSOT;dropdown 開啟時取代 options 顯 CircularProgress + loadingText。
-   *  Trigger 不變(user 隨時可開)。對齊 MUI Autocomplete `loadingText` + Field SSOT + Empty 元件 compose。*/
+   *  Forward 給 SelectMenu primitive SSOT;spinner 只在無可顯示選項時佔 CommandEmpty slot 顯 CircularProgress
+   *  (已有 options 保留顯示,不取代)。Trigger 不變(user 隨時可開)。
+   *  對齊 MUI Autocomplete「loading 只在無 suggestions 時顯 loadingText」+ Field SSOT + Empty 元件 compose。*/
   loading?: boolean
   /** 搜尋框位置：menu（浮層內，預設）或 trigger（inline input） */
   searchIn?: 'menu' | 'trigger'
@@ -397,6 +398,14 @@ export interface ComboboxProps {
   emptyPlaceholder?: string
   /** 搜尋無結果提示(2026-07-04 Q4 拍板接線)— forward SelectMenu primitive SSOT(default「沒有符合的選項」) */
   emptyText?: string
+  /** 可建立新選項(creatable tag,2026-07-18 user 拍板 forward)—— 搜尋非空且無完全同名既有選項時,
+   *  dropdown 顯 create row(Plus + `createLabel`);forward 給底層 SelectMenu(邏輯/顯示/互動 SSOT 住在 SelectMenu)。
+   *  僅 searchable 桌機路徑生效(需打字);native mobile 路徑不支援。對齊 Ant tags / react-select Creatable。 */
+  creatable?: boolean
+  /** 建立新選項 callback(forward SelectMenu `onCreate`)。 */
+  onCreate?: (value: string) => void
+  /** create row 文字格式(forward SelectMenu `createLabel`,預設「直接使用「{query}」」)。 */
+  createLabel?: (query: string) => string
   /** a11y:無 Field wrapper 時提供 role='combobox' 的 accessible name(axe aria-input-field-name) */
   'aria-label'?: string
   /** Initial open state(uncontrolled)— 對齊 Select.defaultOpen / Radix Popover canonical。
@@ -416,8 +425,8 @@ export interface ComboboxProps {
   tagRenderer?: (item: { value: string; label: string }, onRemove: () => void) => React.ReactNode
   /**
    * 2026-05-14 I4 fix:Optional renderer for hidden items in `+N` overflow popover
-   * (對齊 display MultiPersonDisplay overflow popover 含 avatar SSOT)。PeoplePicker stack
-   * pass 此 prop 讓 hidden items 顯 avatar + name(同 display path)。Default fallback
+   * (對齊 view path MultiPersonDisplay overflow popover 含 avatar SSOT)。PeoplePicker stack
+   * pass 此 prop 讓 hidden items 顯 avatar + name(同 view path)。Default fallback
    * `<Tag>{label}</Tag>` 純文字 backward-compat。
    */
   renderHiddenTag?: (item: { value: string; label: string }) => React.ReactNode
@@ -477,8 +486,8 @@ export interface ComboboxProps {
   visibleCountOverride?: number
   /**
    * Display 是否渲 ChevronDown + Field naked wrapper(D-path opt-in,2026-05-08)
-   * — DataTable cell display↔edit 像素級對齊用。預設 false(裸 tag stack,backward compat)。
-   * 設 true 時 display 走 fieldWrapperStyles(naked variant)+ ItemSuffix ChevronDown,
+   * — DataTable cell view↔edit 像素級對齊用。預設 false(裸 tag stack,backward compat)。
+   * 設 true 時 view 走 fieldWrapperStyles(naked variant)+ ItemSuffix ChevronDown,
    * 與 edit 同 DOM 結構,消除 Layer-B padding mismatch。
    */
   showDisplayEndIcon?: boolean
@@ -487,7 +496,7 @@ export interface ComboboxProps {
 // 2026-05-18 改 import ICON_SIZE SSOT(per user『做完』approval,消除 M17 違反)
 const getIconSize = (size: string) => ICON_SIZE[size as 'sm' | 'md' | 'lg']
 
-// ── Shared readonly/disabled/display render ─────────────────────────────────
+// ── Shared readonly/disabled/view render ─────────────────────────────────
 
 function ReadonlyMultiSelect({
   mode, variant: variantProp, width, size, options, value, wrap, className, showDisplayEndIcon = false,
@@ -504,13 +513,13 @@ function ReadonlyMultiSelect({
   const containerRef = React.useRef<HTMLDivElement>(null)
   const hasTags = (value?.length ?? 0) > 0
 
-  // mode='display'(Phase B2 2026-05-05):純內容輸出 — tag stack 不包 Field wrapper / 不 reserve 高度。
+  // mode='view'(Phase B2 2026-05-05):純內容輸出 — tag stack 不包 Field wrapper / 不 reserve 高度。
   //   對齊原 ComboboxDisplay sub-component(retired)。
   //   Opt-in(showDisplayEndIcon=true,2026-05-08 D-path):Field naked wrapper + ItemSuffix ChevronDown,
-  //   與 edit 同結構消除 cell display↔edit 像素偏移(Layer-B padding mismatch)。
-  if (resolvedMode === 'display') {
+  //   與 edit 同結構消除 cell view↔edit 像素偏移(Layer-B padding mismatch)。
+  if (resolvedMode === 'view') {
     if (!showDisplayEndIcon) {
-      // 2026-05-14 I2 fix(spec contract (e) display typography canonical):empty bare span 套
+      // 2026-05-14 I2 fix(spec contract (e) view typography canonical):empty bare span 套
       // `fieldDisplayTextClass(sz)`(sm/md→text-body,lg→text-body-lg)— 對齊跨 Field family 統一。
       if (!hasTags) return <span className={cn(fieldDisplayTextClass(sz), fieldEmptyColorClass(resolvedMode), className)}>{emptyDisplay}</span>
       return (
@@ -519,8 +528,8 @@ function ReadonlyMultiSelect({
     }
     return (
       <div
-        className={cn(fieldWrapperStyles({ mode: 'display', variant, width, size: sz }), hasTags && tagPadding[sz], className)}
-        data-field-mode="display"
+        className={cn(fieldWrapperStyles({ mode: 'view', variant, width, size: sz }), hasTags && tagPadding[sz], className)}
+        data-field-mode="view"
       >
         {hasTags ? (
           <ComboboxTagStack value={value} options={options} tagSize={sz} wrap={wrap} />
@@ -538,8 +547,8 @@ function ReadonlyMultiSelect({
     <div ref={containerRef}
       className={cn(fieldWrapperStyles({ mode: resolvedMode, variant, width, size: sz }), hasTags && tagPadding[sz],
         // 2026-05-18 #6A Round 1 Step 1/4(per user 拍板「決策6選a」+ codex M31 Step 5 verdict cite combobox.tsx:451):
-        // readonly/disabled path 對齊 L293 display wrapper 已 ship 的 overflow-hidden fix。
-        // M10 propagation:原 overflow-visible 讓 readonly tag 越界蓋 indicator,跟 display 不對稱。
+        // readonly/disabled path 對齊 L293 view wrapper 已 ship 的 overflow-hidden fix。
+        // M10 propagation:原 overflow-visible 讓 readonly tag 越界蓋 indicator,跟 view 不對稱。
         // 2026-06-27 對齊 edit path(L598-617):wrap 時 items-start + chevron self-start/tagHeight 鎖第一行;
         // paddingRight: var(--field-px) re-assert 右緣 12px(tagPadding 對稱 calc 會吃掉右緣,跟 edit 一致)。
         wrap ? 'flex-wrap items-start py-1' : 'overflow-hidden', className)}
@@ -586,7 +595,7 @@ function NativeCombobox({
   const fieldCtx = useFieldContext()
   const disabled = useResolvedFieldDisabled(disabledProp)
   const variant: FieldVariantInternal = useResolvedFieldVariant(variantProp)
-  // 2026-06-08 SSOT:mode 經 useResolvedFieldMode;修 <Field mode="display"> 漏 cascade
+  // 2026-06-08 SSOT:mode 經 useResolvedFieldMode;修 <Field mode="view"> 漏 cascade
   const resolvedMode = useResolvedFieldMode({ mode, disabled })
   const iconSize = getIconSize(size)
   const showClear = clearable && value.length > 0 && resolvedMode === 'edit'
@@ -633,7 +642,7 @@ function NativeCombobox({
       onClick={(e) => { if (e.target === e.currentTarget) { selectRef.current?.showPicker?.(); selectRef.current?.focus() } }}>
       {/* 2026-05-18 F2 sync(per user verbatim「modifying 修好 PeoplePicker stack 後改壞 Combobox tag display」
           + 「tag 應該要判斷所在空間最多可以呈現幾個tag(包括＋n)去自動判斷何時要變成+n」):
-          edit path tagArea 對齊 display path L293 已 ship 的 `overflow-hidden` fix。原 `overflow-visible`
+          edit path tagArea 對齊 view path L293 已 ship 的 `overflow-hidden` fix。原 `overflow-visible`
           讓 tag 視覺越界蓋 chevron / +N indicator(useOverflowCount measurement 對但 CSS overflow 仍露)。
           M10 violation root cause:2026-05-15 F1 Q3 只 fix display path,edit + Native(L518)沒同步。 */}
       <div ref={tagAreaRef} className={cn('flex-1 min-w-0 flex items-center relative', nakedCellRowModeAlign, wrap ? 'flex-wrap' : 'overflow-hidden')} style={{ gap: GAP }}
@@ -670,6 +679,9 @@ function CustomCombobox({
   searchAriaLabel = '搜尋選項', // i18n-allow: DS default
   emptyPlaceholder = '選擇…', // i18n-allow: DS default
   emptyText,
+  creatable = false,
+  onCreate,
+  createLabel,
   defaultOpen = false,
   onOpenChange,
   __triggerRef,
@@ -688,7 +700,7 @@ function CustomCombobox({
   const fieldCtx = useFieldContext()
   const error = useResolvedFieldInvalid(errorProp)
   const disabled = useResolvedFieldDisabled(disabledProp)
-  // 2026-06-08 SSOT:mode 經 useResolvedFieldMode;修 <Field mode="display"> 漏 cascade
+  // 2026-06-08 SSOT:mode 經 useResolvedFieldMode;修 <Field mode="view"> 漏 cascade
   const resolvedMode = useResolvedFieldMode({ mode, disabled })
   const variant: FieldVariantInternal = useResolvedFieldVariant(variantProp)
   const iconSize = getIconSize(size)
@@ -797,7 +809,7 @@ function CustomCombobox({
         if (e.key === 'Escape') setOpen(false)
       }}>
       {/* 2026-05-18 #6A Round 1 Step 2/4(per user 拍板「決策6選a」+ codex M31 Step 5 verdict cite combobox.tsx:648):
-          CustomCombobox edit non-wrap tagArea 對齊 L293 display + L451 readonly + L518 native edit 已 ship 的 overflow-hidden fix。
+          CustomCombobox edit non-wrap tagArea 對齊 L293 view + L451 readonly + L518 native edit 已 ship 的 overflow-hidden fix。
           原 overflow-visible 讓 tag 越界蓋 chevron / +N indicator(user 圖三)。M10 propagation 完整 4-path align。 */}
       <div ref={tagAreaRef} className={cn('flex-1 min-w-0 flex items-center relative', nakedCellRowModeAlign, wrap ? 'flex-wrap' : 'overflow-hidden')} style={{ gap: tagAreaGap, paddingLeft: tagAreaPaddingLeftPx }}>
         {value.length > 0 ? (
@@ -863,6 +875,9 @@ function CustomCombobox({
       value={value}
       onValueChange={onChange as (value: string | string[]) => void}
       multiple
+      creatable={creatable}
+      onCreate={onCreate}
+      createLabel={createLabel}
       searchable={searchable && searchIn === 'menu'}
       searchPlaceholder={searchPlaceholder}
       size={size}

package/src/components/Command/command.spec.md

@@ -20,7 +20,7 @@ Command 是**搜尋 + 鍵盤導覽的指令清單**——提供搜尋框、分
 
 **實作基礎**：shadcn passthrough——基於 cmdk + Radix Dialog（Command Palette 模式）。本 DS 保留 shadcn 原結構,視覺樣式以 inline Tailwind class 直接掛在 cmdk primitive 上（`command.tsx`），token 值對齊（非結構繼承）MenuItem / Input / Empty 的 canonical token——改 MenuItem 不會自動連動 Command。
 
-**分類**：Internal primitive——由 SelectMenu 消費（Select / Combobox / PeoplePicker 透過 SelectMenu 使用）。App 不直接使用 Command;若要 Command Palette 類 UX,用本檔 export 的 `CommandDialog`(cmdk + Radix Dialog 包裝,showcase「CommandPalette」story 消費)。
+**分類**：Internal primitive——由 SelectMenu 消費（Select / Combobox / PeoplePicker 透過 SelectMenu 使用）。App **不從 root barrel front-door 直接 import** Command 家族;若要 Command Palette 類 UX,經 per-component subpath `@qijenchen/design-system/components/Command` 取用 `CommandDialog`(自行包裝確認後使用,對齊 `.claude/rules/ui-development.md`「Root barrel front-door 排除」— internal ≠ 禁用;cmdk + Radix Dialog 包裝,showcase「CommandPalette」story 消費)。
 
 **Layout Family**：非上述 family — composite / multi-section（多區塊組合，自 own layout）。
 
@@ -66,7 +66,7 @@ Command 通常由 `SelectMenu` 或自訂 Command Palette 元件消費——直
 - **SelectMenu**：Select / Combobox / PeoplePicker 的 searchable 浮層（**由 Field 觸發**,帶有 input field + 選中值回填）
 - **獨立 Command Palette**（Cmd+K）：也用 Command 但**不在 Field 觸發**——透過全域快捷鍵開啟,用於跨頁面搜尋 / 快速動作入口
 
-兩者底層都消費 Command。Field 場景用 SelectMenu（已處理 input binding）；非 Field 場景(Cmd+K)用 `CommandDialog`(cmdk + Radix Dialog 包裝)。
+兩者底層都消費 Command。Field 場景用 SelectMenu（已處理 input binding）；非 Field 場景(Cmd+K)用 `CommandDialog`(經 subpath `@qijenchen/design-system/components/Command` 取用,cmdk + Radix Dialog 包裝)。
 
 ---
 
@@ -97,7 +97,7 @@ Consumer 無需額外處理 a11y,保留 cmdk 原結構 + 使用 `<CommandInput>`
 - **Disabled item**:`<CommandItem disabled>` 透過 cmdk 內建支援,視覺繼承 MenuItem SSOT(`text-fg-disabled` + `aria-disabled=true` + 鍵盤導覽自動 skip + Enter 不觸發 onSelect)。skip 是「不進導覽清單」(cmdk `:not([aria-disabled="true"])` selector)— ↑/↓ 直接跳到下一個可選項,無中途 highlight。
 - **Group heading 不可選中**:heading 是 `aria-hidden` 裝飾 div(group container `role="presentation"`),不參與導覽與選取;SR 經 items wrapper `role="group"` + `aria-labelledby` 取得群組語意。
 - **Empty 後持續打字**:cmdk 每個 keystroke 重新過濾(`filtered.count` 驅動),`<CommandEmpty>` 持續顯示直到有 match;input 不鎖、不清空。
-- **Loading**:Command 本身非 async surface。async option fetch 應由 consumer(SelectMenu / Cmd+K palette)在外層處理 — 將 `<CommandList>` body 切換為 `<Empty icon={<CircularProgress size={48}/>}/>`(對齊 `empty.spec.md`「現有消費者」SelectMenu loading row SSOT,禁止事項見其「禁止事項」loading 條)。Command primitive 不獨立 own loading prop。
+- **Loading**:Command 本身非 async surface。async option fetch 應由 consumer(SelectMenu / Cmd+K palette)在外層處理 — 在 `<CommandEmpty>` slot 內渲 `<Empty icon={<CircularProgress size={48}/>}/>`(spinner 只在無可顯示選項時出現;已有 options 保留顯示,不取代 — 對齊 `select.spec.md`「Loading」2026-07-04 拍板措辭 + `empty.spec.md`「現有消費者」SelectMenu loading SSOT,禁止事項見其「禁止事項」loading 條)。Command primitive 不獨立 own loading prop。
 - **Empty(no results)**:`<CommandEmpty>` 自動偵測 search filter result = 0 時渲;consumer 必傳 fallback 文案(預設 cmdk 不渲)。
 - **Dark mode / density**:Command 的 inline Tailwind class 直接消費 semantic token（`bg-neutral-hover` / `text-fg-muted` / `text-fg-disabled` 等），token 在 dark mode 自動切值——非透過 MenuItem / Input / Empty primitive 連動。density 不獨立 own（由 consumer SelectMenu 控）。
 

package/src/components/Command/command.tsx

@@ -48,7 +48,7 @@ const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b border-divider px-3" cmdk-input-wrapper="">
+  <div className="flex shrink-0 items-center border-b border-divider px-3" cmdk-input-wrapper="">
     <Search className="mr-2 h-4 w-4 shrink-0 text-fg-muted" />
     <CommandPrimitive.Input
       ref={ref}
@@ -80,7 +80,14 @@ const CommandList = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 >(({ className, ...props }, ref) => (
-  <ScrollArea className="max-h-[var(--menu-max-height,300px)]">
+  /* @story-baseline: overlay-surface.spec.md#Viewport-aware-scroll-chain-invariant(M25 SSOT owner)
+      owner spec: overlay-surface.spec.md:34/53/347-362 —— 「浮層 body 永遠 flex-1 min-h-0 overflow-y-auto;
+        中間 wrapper 都必 flex flex-col h-full min-h-0;viewport 太小 body 內壓縮捲動」。
+      conflicting code(修前): 本 ScrollArea 固定 max-h-300 無 flex-1 → 在夾住的 SelectMenu PopoverContent
+        (max-h=available-height)內撐破外殼、底部選項被裁(320px viewport 實測 bottom 425 > 320 溢出)。
+      修: 加 flex-1 min-h-0(對齊 M25 canonical + HoverCard/Popover),max-h-300 降為上限。Command root 已
+        `flex h-full flex-col`(command.tsx:23)= chain 完整;非 flex 容器內 flex-1 為 no-op(spec:34 backward compat)。 */
+  <ScrollArea className="flex-1 min-h-0 max-h-[var(--menu-max-height,300px)]">
     <CommandPrimitive.List ref={ref} className={cn("overflow-x-hidden", className)} {...props} />
   </ScrollArea>
 ))

package/src/components/DataTable/cell-registry.tsx

@@ -4,7 +4,7 @@
 //
 // 對齊 M17 SSOT consolidation + audit recommendation:
 //   原 `renderTypedValue` switch + `EditableCellContent` switch 兩條平行 type-switch 已 collapse
-//   為**一張 type → cell component** registry。每個 cell component 同時處理 display / edit mode,
+//   為**一張 type → cell component** registry。每個 cell component 同時處理 view / edit mode,
 //   靠底層 Field control 的 `mode` prop 切換。
 //
 // 設計原則:
@@ -19,7 +19,7 @@
 import * as React from 'react'
 import type { ComponentType } from 'react'
 import { Pencil } from 'lucide-react'
-import { cn } from '@/lib/utils'
+import { cn, lineClampClass } from '@/lib/utils'
 import type { ColumnType } from './column-types'
 import { Input as InputPublic } from '@/design-system/components/Input/input'
 import { Textarea as TextareaPublic } from '@/design-system/components/Textarea/textarea'
@@ -55,7 +55,7 @@ const Checkbox = CheckboxPublic as WithFieldVariantInternal<typeof CheckboxPubli
 
 // ── Types ────────────────────────────────────────────────────────────────────
 
-export type CellMode = 'display' | 'edit'
+export type CellMode = 'view' | 'edit'
 export type CellSize = 'sm' | 'md' | 'lg'
 
 export interface CellComponentProps {
@@ -65,13 +65,13 @@ export interface CellComponentProps {
   meta: Record<string, any>
   mode: CellMode
   size: CellSize
+  /** 該 cell 的 accessible name(= 欄標題)。naked Field 控件在 cell 內無 FieldLabel,
+   *  漏此名 → editor 成無名控件(axe aria-input-field-name / select-name)。由 renderCellContent
+   *  從 columnDef.header 解析後注入。對齊 AG Grid / MUI X「editor aria-label = column headerName」。 */
+  ariaLabel?: string
   autoRowHeight: boolean
   /** 該 cell 是否可編。replaces 舊 `meta._editable` 私有 flag(Phase C M1 hack 移除)。 */
   isEditable?: boolean
-  /** 2026-05-13:cell 是否 disabled(state overlay,orthogonal to display/edit lifecycle)。
-   *  per codex Q3 verdict:不擴 CellMode='disabled',加 prop。各 Cell function 收 true 時
-   *  傳 `mode='disabled'` 給 inner Field control,各 Field 內部走具體 disabled token(非 wrapper opacity)。 */
-  isDisabled?: boolean
   /** Cell 進 edit mode → 提交新值(blur / Enter / option select 都觸發)— 提交後**自動 exit edit**。
    *  適用 single-shot commit:string / number / select(single)/ person(single)/ date / time / boolean / url。 */
   onCommit?: (next: unknown) => void
@@ -112,44 +112,41 @@ function makeKeyHandler(
 
 const sizeForInput = (size: CellSize): CellSize => size
 
-/** 2026-05-13 Q3 helper(per codex Q3 verdict):cell display + isDisabled → Field mode='disabled'。
- *  Cell display lifecycle 不擴 CellMode='disabled',而是各 Cell 在 display branch 翻譯 isDisabled
- *  → Field mode='disabled' prop。inner Field 內部走具體 disabled token(text-fg-disabled / bg-disabled 等),
- *  非 wrapper blanket opacity-disabled 逃生艙(per color.spec.md:729)。 */
-const displayOrDisabled = (isDisabled?: boolean): 'display' | 'disabled' =>
-  isDisabled ? 'disabled' : 'display'
+// 2026-07-16 round16:cell「disabled」態廢除(世界級 grid 無 disabled cell — MUI X / AG Grid /
+//   Handsontable 皆只有 editable/readonly;meta.disabled 全庫 0 消費)。cell view 態一律 mode="view",
+//   鎖定用 `editable:(row)=>false` 閘(= isCellEditable 模型)。原 displayOrDisabled helper 已移除。
 
 // ── Cell Components ──────────────────────────────────────────────────────────
 
-function StringCell({ value, meta, mode, size, isDisabled, autoRowHeight, onCommit, onCancel, onDraft }: CellComponentProps) {
+function StringCell({ value, meta, mode, size, autoRowHeight, onCommit, onCancel, onDraft, ariaLabel }: CellComponentProps) {
   // 2026-05-14 I9 fix(per codex+Layer A 共識):meta.maxLines opt-in line-clamp。
-  // display autoRow 用 Tailwind arbitrary line-clamp 支援 N rows;edit textarea field-sizing
+  // view autoRow 用 Tailwind arbitrary line-clamp 支援 N rows;edit textarea field-sizing
   // 已 auto-grow to content,natural match clamp。
   // 2026-05-16 Round 5 audit Dim 27 fix:narrow type 取代 `as any` cast。
   const maxLines: number | undefined = (meta as { maxLines?: number } | undefined)?.maxLines
-  const clampClass = maxLines && autoRowHeight ? `line-clamp-[${maxLines}]` : undefined
+  const clampClass = autoRowHeight ? lineClampClass(maxLines) : undefined
   // string type canonical(2026-05-05 v2 user 校正:input space ≥ display space):
-  //   - autoRowHeight: Textarea(display + edit)— display wrap text 撐高 row,edit textarea
+  //   - autoRowHeight: Textarea(view + edit)— view wrap text 撐高 row,edit textarea
   //     多行輸入、`!h-full` 填 cell。對齊 Notion long-text cell canonical。
-  //   - fixed: Input(display + edit)— 單行 truncate display,單行 input edit;Field naked intrinsic
-  //     高 = cell 高 = h-field-md,文字位置 display↔edit 完全一致。對齊 AG Grid / Material X-Grid。
+  //   - fixed: Input(view + edit)— 單行 truncate view,單行 input edit;Field naked intrinsic
+  //     高 = cell 高 = h-field-md,文字位置 view↔edit 完全一致。對齊 AG Grid / Material X-Grid。
   //   - autoRowHeight 是 table 框架決定(consumer 不需 per-column 設 meta.wrap)。
   //   - 互動(Textarea):Esc cancel / Cmd|Ctrl+Enter commit / blur commit;Enter 保留換行
   //   - 互動(Input):Esc cancel / Enter commit / blur commit
   const v = value != null ? String(value) : ''
-  if (mode === 'display') {
+  if (mode === 'view') {
     // size 必傳:DataTable cell 字級隨 size 變(sm/md text-body / lg text-body-lg),
     // 對齊 Field family size→font SSOT(field-wrapper.tsx:60-64)。漏傳 → fallback md → lg 表格
     // 字卡 14px 跟 Select/Date 等有傳 size 的 cell 不一致(2026-06-08 user 抓 frozen string 欄字偏小)。
     return autoRowHeight
-      ? <Textarea variant="naked" mode={displayOrDisabled(isDisabled)} value={v} size={size} className={clampClass} />
-      : <Input variant="naked" mode={displayOrDisabled(isDisabled)} value={v} size={size} />
+      ? <Textarea variant="naked" mode="view" value={v} size={size} className={clampClass} aria-label={ariaLabel} />
+      : <Input variant="naked" mode="view" value={v} size={size} aria-label={ariaLabel} />
   }
   if (autoRowHeight) {
     // 2026-05-14 I8 fix(per codex verdict + user 抓「edit cell shrink」):
     // 原 `wrapRows = value.length / 40` 字元估算不準(對應實際 column width 不同
     // → cell 進 edit shrink)。改 CSS `field-sizing: content`(Chrome 123+ / FF 122+ /
-    // Safari 17+)讓 textarea 自動 grow to content,匹配 display wrap 真實高度。
+    // Safari 17+)讓 textarea 自動 grow to content,匹配 view wrap 真實高度。
     // Fallback rows 仍保留給舊 browser(rows attr 在 field-sizing 支援時被覆蓋)。
     const newlineRows = (v.match(/\n/g) || []).length + 1
     const wrapRows = Math.ceil(v.length / 40)
@@ -158,6 +155,7 @@ function StringCell({ value, meta, mode, size, isDisabled, autoRowHeight, onComm
       <Textarea
         autoFocus
         variant="naked"
+        aria-label={ariaLabel}
         size={sizeForInput(size)}
         rows={estimateRows}
         defaultValue={v}
@@ -180,6 +178,7 @@ function StringCell({ value, meta, mode, size, isDisabled, autoRowHeight, onComm
     <Input
       autoFocus
       variant="naked"
+      aria-label={ariaLabel}
       size={sizeForInput(size)}
       defaultValue={v}
       onChange={(e) => onDraft?.(e.target.value)}
@@ -189,20 +188,21 @@ function StringCell({ value, meta, mode, size, isDisabled, autoRowHeight, onComm
   )
 }
 
-function NumberCell({ value, meta, mode, size, isDisabled, onCommit, onCancel, onDraft }: CellComponentProps) {
+function NumberCell({ value, meta, mode, size, onCommit, onCancel, onDraft, ariaLabel }: CellComponentProps) {
   // currency 透過 columnType-aware prefix:type='currency' → 預設 '$'(可 override)
   const isCurrency = meta?.type === 'currency'
   const prefix = isCurrency ? (meta?.prefix ?? '$') : meta?.prefix
-  // React #310 fix:useState 必在 display early-return 前無條件呼叫。同一 memo'd cell instance
-  // 在 display↔edit 切換時被重用(render site 無 key={mode},data-table.tsx:1352),hook 數量不可變,
+  // React #310 fix:useState 必在 view early-return 前無條件呼叫。同一 memo'd cell instance
+  // 在 view↔edit 切換時被重用(render site 無 key={mode},data-table.tsx:1352),hook 數量不可變,
   // 否則 Rules of Hooks violation → React #310 crash。對齊 combobox/select hoist pattern。
   const initial = typeof value === 'number' ? value : null
   const [localValue, setLocalValue] = React.useState<number | null>(initial)
-  if (mode === 'display') {
+  if (mode === 'view') {
     return (
       <NumberInput
         variant="naked"
-        mode={displayOrDisabled(isDisabled)}
+        mode="view"
+        aria-label={ariaLabel}
         value={value as number | null}
         // size 必傳(同 StringCell)— currency/number cell 字級隨 DataTable size 變,對齊 Field SSOT。
         size={size}
@@ -215,13 +215,14 @@ function NumberCell({ value, meta, mode, size, isDisabled, onCommit, onCancel, o
   }
   // Edit mode value pre-fill canonical(2026-05-05):NumberInput edit 強制 controlled
   // (`value={value ?? ''}`)— 若 NumberCell 以 `defaultValue` 傳入,NumberInput value=undefined → ''
-  // empty。對齊 cell-as-input「edit mode 自動帶入 display 值」(對齊 Notion / Airtable 共識),
+  // empty。對齊 cell-as-input「edit mode 自動帶入 view 值」(對齊 Notion / Airtable 共識),
   // 改用 local state controlled。User typing → setLocalValue;blur/Enter → onCommit(localValue)。
-  // (initial + useState 已 hoist 到 display-return 前 — 見上方 React #310 fix。)
+  // (initial + useState 已 hoist 到 view-return 前 — 見上方 React #310 fix。)
   return (
     <NumberInput
       autoFocus
       variant="naked"
+      aria-label={ariaLabel}
       size={sizeForInput(size)}
       value={localValue}
       onChange={(v) => { setLocalValue(v); onDraft?.(v) }}
@@ -244,25 +245,25 @@ function NumberCell({ value, meta, mode, size, isDisabled, onCommit, onCancel, o
 // (對齊 Airtable / Notion canonical:click 外即關)。
 const dismissOnClose = (onCancel?: () => void) => (open: boolean) => { if (!open) onCancel?.() }
 
-// Mode-keyed remount canonical(2026-05-05):display↔edit 切換時,因 React reconciliation 同 type 同
-// position 會重用 instance,導致 `useState(defaultOpen)` 只在首次 mount 跑(那時 mode='display'
+// Mode-keyed remount canonical(2026-05-05):view↔edit 切換時,因 React reconciliation 同 type 同
+// position 會重用 instance,導致 `useState(defaultOpen)` 只在首次 mount 跑(那時 mode='view'
 // defaultOpen 沒給→預設 false)。後續 mode='edit' 即使傳 defaultOpen=true 也無效。
 // Fix:`key={mode}` 強制 React unmount + remount,每次切 mode 都重跑 useState init。
-// 對齊 Notion / Airtable cell-as-input「display 跟 edit 是不同 mount cycle」語義。
+// 對齊 Notion / Airtable cell-as-input「view 跟 edit 是不同 mount cycle」語義。
 
-function DateCell({ value, meta, mode, size, isDisabled, onCommit, onCancel }: CellComponentProps) {
-  if (mode === 'display') {
+function DateCell({ value, meta, mode, size, onCommit, onCancel }: CellComponentProps) {
+  if (mode === 'view') {
     return (
       <DatePicker
-        key="display"
+        key="view"
         variant="naked"
-        mode={displayOrDisabled(isDisabled)}
+        mode="view"
         value={value as string | null}
         size={size}
         formatOptions={meta?.formatOptions}
         locale={meta?.locale}
         // 2026-07-08 user 拍板 A 案(推翻 2026-05-10/06-26 兩次拍板,per 6 家 benchmark 6/6 共識
-        // Ant/MUI X/AG Grid/Atlaskit/Notion/Airtable:display 態零恆顯型別 icon;editable
+        // Ant/MUI X/AG Grid/Atlaskit/Notion/Airtable:view 態零恆顯型別 icon;editable
         // affordance 統一 = hover outline(field.spec.md L4)。showDisplayEndIcon 不再傳
         //(prop 保留為 spreadsheet-flavored 消費端 opt-in 逃生門,見 field.spec.md L6)。
       />
@@ -283,18 +284,18 @@ function DateCell({ value, meta, mode, size, isDisabled, onCommit, onCancel }: C
   )
 }
 
-function TimeCell({ value, meta, mode, size, isDisabled, onCommit, onCancel }: CellComponentProps) {
-  if (mode === 'display') {
+function TimeCell({ value, meta, mode, size, onCommit, onCancel }: CellComponentProps) {
+  if (mode === 'view') {
     return (
       <TimePicker
-        key="display"
+        key="view"
         variant="naked"
-        mode={displayOrDisabled(isDisabled)}
+        mode="view"
         value={value as string | null}
         size={size}
         formatOptions={meta?.formatOptions}
         locale={meta?.locale}
-        // showDisplayEndIcon 不傳 — 2026-07-08 A 案:display 態零恆顯 icon(同 DateCell 註)
+        // showDisplayEndIcon 不傳 — 2026-07-08 A 案:view 態零恆顯 icon(同 DateCell 註)
       />
     )
   }
@@ -314,22 +315,22 @@ function TimeCell({ value, meta, mode, size, isDisabled, onCommit, onCancel }: C
   )
 }
 
-function SelectCell({ value, meta, mode, size, isDisabled, onCommit, onCancel }: CellComponentProps) {
-  // Display canonical(2026-05-05):cell IS variant,default plain text(no Tag pill 疊在 cell border 內)。
+function SelectCell({ value, meta, mode, size, onCommit, onCancel }: CellComponentProps) {
+  // View canonical(2026-05-05):cell IS variant,default plain text(no Tag pill 疊在 cell border 內)。
   // Consumer 可在 column meta.display='tag' opt-in 內容導向的 Tag 視覺(category 含色彩標籤等)。
   // 對齊 JTable / AG Grid「renderer/editor 視覺一致」canonical。
   const displayMode = (meta?.display as 'plain' | 'tag' | undefined) ?? 'plain'
-  if (mode === 'display') {
+  if (mode === 'view') {
     return (
       <Select
-        key="display"
+        key="view"
         variant="naked"
-        mode={displayOrDisabled(isDisabled)}
+        mode="view"
         value={value as string | null}
         options={meta?.options ?? []}
         size={size}
         display={displayMode}
-        // showDisplayEndIcon 不傳 — 2026-07-08 A 案:display 態零恆顯 icon(同 DateCell 註)
+        // showDisplayEndIcon 不傳 — 2026-07-08 A 案:view 態零恆顯 icon(同 DateCell 註)
         selectedItemRenderer={meta?.selectedItemRenderer}  // 2026-07-08 WM 戰役:status 類彩色 cell 顯示通道
       />
     )
@@ -354,19 +355,19 @@ function SelectCell({ value, meta, mode, size, isDisabled, onCommit, onCancel }:
   )
 }
 
-function MultiSelectCell({ value, meta, mode, size, isDisabled, autoRowHeight, onCommitLive, onCancel }: CellComponentProps) {
+function MultiSelectCell({ value, meta, mode, size, autoRowHeight, onCommitLive, onCancel }: CellComponentProps) {
   const wrap = autoRowHeight && meta?.wrap === true
-  if (mode === 'display') {
+  if (mode === 'view') {
     return (
       <Combobox
-        key="display"
+        key="view"
         variant="naked"
-        mode={displayOrDisabled(isDisabled)}
+        mode="view"
         value={(value as string[] | null) ?? []}
         options={meta?.options ?? []}
         wrap={wrap}
         size={size}
-        // showDisplayEndIcon 不傳 — 2026-07-08 A 案:display 態零恆顯 icon(同 DateCell 註)
+        // showDisplayEndIcon 不傳 — 2026-07-08 A 案:view 態零恆顯 icon(同 DateCell 註)
       />
     )
   }
@@ -386,10 +387,10 @@ function MultiSelectCell({ value, meta, mode, size, isDisabled, autoRowHeight, o
   )
 }
 
-function PersonCell({ value, mode, size, isDisabled, onCommit, onCancel, meta }: CellComponentProps) {
-  if (mode === 'display') {
-    // 2026-07-08 A 案:display 態零恆顯 icon(同 DateCell 註)
-    return <PeoplePicker key="display" variant="naked" mode={displayOrDisabled(isDisabled)} value={value as PersonValue | null} size={size} />
+function PersonCell({ value, mode, size, onCommit, onCancel, meta }: CellComponentProps) {
+  if (mode === 'view') {
+    // 2026-07-08 A 案:view 態零恆顯 icon(同 DateCell 註)
+    return <PeoplePicker key="view" variant="naked" mode="view" value={value as PersonValue | null} size={size} />
   }
   return (
     <PeoplePicker
@@ -406,10 +407,10 @@ function PersonCell({ value, mode, size, isDisabled, onCommit, onCancel, meta }:
   )
 }
 
-function MultiPersonCell({ value, mode, size, isDisabled, onCommitLive, onCancel, meta }: CellComponentProps) {
-  if (mode === 'display') {
-    // 2026-07-08 A 案:display 態零恆顯 icon(同 DateCell 註)
-    return <PeoplePicker key="display" variant="naked" mode={displayOrDisabled(isDisabled)} value={(value as PersonValue[]) ?? []} size={size} />
+function MultiPersonCell({ value, mode, size, onCommitLive, onCancel, meta }: CellComponentProps) {
+  if (mode === 'view') {
+    // 2026-07-08 A 案:view 態零恆顯 icon(同 DateCell 註)
+    return <PeoplePicker key="view" variant="naked" mode="view" value={(value as PersonValue[]) ?? []} size={size} />
   }
   // Multi 用 onCommitLive(commit 但不 exit edit)— 每勾一人即時生效,popover 持續開
   // 直到點外面;onOpenChange(false) → onCancel exit edit。對齊 multiSelect canonical。
@@ -427,14 +428,12 @@ function MultiPersonCell({ value, mode, size, isDisabled, onCommitLive, onCancel
   )
 }
 
-function BooleanCell({ value, mode, meta, size, isEditable, isDisabled, onCommit }: CellComponentProps) {
-  // boolean 不分 read/edit mode — display 渲 mode='display' 純展示;editable 時直接 toggle Checkbox
-  // 2026-05-13 codex V1 fix:editable=true + disabled=true 之前 fall through to live Checkbox,
-  // onCheckedChange 仍 fire(violate disabled contract)。Fix:`!isEditable || isDisabled` →
-  // 走 display branch,Checkbox 拿 disabled mode + 不接 onCheckedChange。
-  if (mode === 'display' && (!isEditable || isDisabled)) {
+function BooleanCell({ value, mode, meta, size, isEditable, onCommit }: CellComponentProps) {
+  // boolean 不分 read/edit mode — view 渲 mode='view' 純展示;editable 時直接 toggle Checkbox。
+  // 不可編(!isEditable)→ 走 view branch,Checkbox mode="view" 純展示不接 onCheckedChange。
+  if (mode === 'view' && !isEditable) {
     // size 傳入 → boolean 值 icon(Check/X)@lg 縮放對齊其他 cell(對齊 editable 分支同 size 邏輯)
-    return <Checkbox variant="naked" size={size === 'lg' ? 'lg' : 'md'} mode={displayOrDisabled(isDisabled)} checked={value === true} />
+    return <Checkbox variant="naked" size={size === 'lg' ? 'lg' : 'md'} mode="view" checked={value === true} />
   }
   return (
     <Checkbox
@@ -448,21 +447,21 @@ function BooleanCell({ value, mode, meta, size, isEditable, isDisabled, onCommit
 
 /**
  * UrlCell(2026-07-14 docblock 對齊實作):
- *   display branch = `<LinkInput mode={displayOrDisabled(isDisabled)}>`(URL parse / hostname
+ *   view branch = `<LinkInput mode="view">`(URL parse / hostname
  *   顯示一致性 SSOT);editable 互動:hover 時右側出 Pencil 鈕 → 進 edit(保留 link click 語意)。
  *   edit branch = plain `<Input variant="naked">`(LinkInput edit 的 controlled value 衝突
  *   revert,詳下方 edit branch 註解);URL 驗證 deferred 到 onCommit(consumer 端 validate)。
  */
-function UrlCell({ value, meta, mode, size, isDisabled, isEditable, onRequestEdit, onCommit, onCancel }: CellComponentProps) {
-  if (mode === 'display') {
+function UrlCell({ value, meta, mode, size, isEditable, onRequestEdit, onCommit, onCancel }: CellComponentProps) {
+  if (mode === 'view') {
     // showDisplayEndIcon ← D path Phase 2(2026-05-08):Field naked wrapper 包 anchor,與 Input edit 同 chrome。
     // LinkInput 此 prop = wrapper-only(無 icon,field.spec.md L6 例外)→ A 案(2026-07-08)不撤;
     // 但修 I1:原無條件 true 違反「= isEditable」knob 等式(field-controls.spec.md cell 例外),改等式。
     const display = (
-      <LinkInput variant="naked" mode={displayOrDisabled(isDisabled)} value={value as string | null} label={meta?.linkLabel} size={size} showDisplayEndIcon={isEditable === true} />
+      <LinkInput variant="naked" mode="view" value={value as string | null} label={meta?.linkLabel} size={size} showDisplayEndIcon={isEditable === true} />
     )
-    // 2026-05-13 codex V1 fix:disabled URL 不顯 Pencil affordance(parent onRequestEdit 已被攔但 UI 仍誤導)
-    if (!isEditable || isDisabled) return display
+    // 不可編 URL 不顯 Pencil affordance(純 view 顯示連結,無編輯入口)
+    if (!isEditable) return display
     // editable read mode:hover Pencil 鈕(對齊 spec 第十二段「url:read = 連結 + Pencil」)
     return (
       <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 皆同視覺正確) */}
@@ -540,7 +539,7 @@ function buildCellWithSurface(Inner: ComponentType<CellComponentProps>, key: str
             漏傳 size 的 cell 也自動繼承(根治「新 cell 漏傳 size」class);size primitive 不破壞 memo identity。*/}
         <FieldSurfaceSizeProvider size={props.size}>
           {/* 2026-07-08 user 拍板:cell 可編輯訊號經獨立 boolean context 注給 child Field controls,
-              讓 useFieldEmptyDisplay 分流「可編輯 cell 空 display → 空白」vs「不可編輯 cell → '-'」。
+              讓 useFieldEmptyDisplay 分流「可編輯 cell 空 view → 空白」vs「不可編輯 cell → '-'」。
               boolean primitive 不破壞 memo identity(同 size context)。 */}
           <FieldSurfaceEditableProvider isEditable={props.isEditable ?? false}>
             <Inner {...props} />