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

package/src/components/DataTable/data-table.stories.tsx

@@ -63,18 +63,33 @@ const dataWithNotes: Product[] = sampleData.map((p, i) => ({
     : 'Standard delivery.',
 }))
 
+// 真實商品名池（品名 × 規格版本組合，避免 "Product item N" 佔位符）
+const PRODUCT_NAMES: Record<string, string[]> = {
+  Electronics: ['Wireless Bluetooth Headphones', 'USB-C 7-in-1 Hub', 'Mechanical Keyboard', '4K Webcam', 'Portable SSD 1TB', '65W GaN Charger', 'Noise-Cancelling Earbuds', 'Ergonomic Wireless Mouse'],
+  Furniture: ['Ergonomic Office Chair', 'Standing Desk Converter', '5-Tier Bookshelf', 'Storage Cabinet', '3-Seat Fabric Sofa', 'Bedside Table', 'Coat Rack Stand', 'Adjustable Monitor Arm'],
+  Food: ['Organic Green Tea 100 Bags', 'Single-Origin Coffee Beans', 'Mixed Nuts Gift Box', 'Dark Chocolate Bar', 'Rolled Oats 1kg', 'Manuka Honey Jar', 'Herbal Tea Sampler', 'Cold-Pressed Olive Oil'],
+  Lifestyle: ['Stainless Steel Water Bottle', 'Scented Candle Set', 'Cordless Vacuum Cleaner', 'HEPA Air Purifier', 'Leather Notebook A5', 'Non-Slip Yoga Mat', 'Aroma Diffuser', 'Weighted Blanket'],
+}
+const PRODUCT_EDITIONS = ['Standard', 'Pro', 'Lite', 'Max', 'Mini', '2-Pack', 'Bundle', 'Refill']
+
 function generateLargeData(count: number): Product[] {
   const categories = ['Electronics', 'Furniture', 'Food', 'Lifestyle']
   const stocks = ['In stock', 'Low stock', 'Out of stock', 'Pre-order']
-  return Array.from({ length: count }, (_, i) => ({
-    sku: `PRD-${String(i + 1).padStart(4, '0')}`,
-    name: `Product item ${i + 1} — ${categories[i % 4]}`,
-    category: categories[i % 4],
-    stock: stocks[i % 4],
-    seller: SELLERS[i % SELLERS.length],
-    updatedAt: `2025/03/${String(1 + (i % 28)).padStart(2, '0')}`,
-    price: Math.round(100 + Math.random() * 9900),
-  }))
+  return Array.from({ length: count }, (_, i) => {
+    const category = categories[i % 4]
+    const names = PRODUCT_NAMES[category]
+    const baseName = names[i % names.length]
+    const edition = PRODUCT_EDITIONS[Math.floor(i / names.length) % PRODUCT_EDITIONS.length]
+    return {
+      sku: `PRD-${String(i + 1).padStart(4, '0')}`,
+      name: `${baseName} (${edition})`,
+      category,
+      stock: stocks[i % 4],
+      seller: SELLERS[i % SELLERS.length],
+      updatedAt: `2025/03/${String(1 + (i % 28)).padStart(2, '0')}`,
+      price: Math.round(100 + Math.random() * 9900),
+    }
+  })
 }
 
 // ── Column Definitions ───────────────────────────────────────────────────────
@@ -230,7 +245,7 @@ export const ColumnReorder: Story = {
 
 /* ── 行高模式 — autoRowHeight prop(每 row 內容驅動高度) ── */
 export const RowAutoHeightInlineEdit: Story = {
-  name: '自動行高 × 就地編輯（顯示與編輯位置驗證）',
+  name: '自動行高 × 就地編輯',
   render: () => {
     // 2026-05-14 I7 fix(per codex verdict):note 初始化進 state 一次,commit 寫同一 state。
     // 原 `dataWithNotes = list.map(...)` 每 render derive 覆蓋 commit value → user 看似不能編。
@@ -258,7 +273,7 @@ export const RowAutoHeightInlineEdit: Story = {
       <div className="max-w-5xl">
         <p className="text-caption text-fg-muted mb-2">
           autoRowHeight=true。Note 欄位 wrap text 撐高 row。其他單行 cell 在高 row 中應**頂對齊**。
-          Click 任一 cell 進 edit:文字位置 display↔edit 不偏移(仍頂對齊),
+          Click 任一 cell 進 edit:文字位置 view↔edit 不偏移(仍頂對齊),
           frame 填 cell,Field 自帶 state ring(focus-within → primary)。
         </p>
         <DataTable
@@ -594,7 +609,7 @@ export const InlineEdit: Story = {
  *   3. `spreadsheetMode` — Excel-like cell selection: click 1=select / click 2=edit /
  *      Shift+click=range / ArrowKeys=nav
  *   4. `experimentalActiveEditorController` — portal Field active editor(Slice D Step 5 D.3,
- *      cell 永遠 mode="display" SSOT preserved + portal host renders mode="edit")
+ *      cell 永遠 mode="view" SSOT preserved + portal host renders mode="edit")
  *
  * 驗證點:
  *   - hover editable cell → 1px overlay 邊框 var(--border-hover)
@@ -651,7 +666,7 @@ export const InlineEditWithSpreadsheetOverlay: Story = {
 
 /**
  * Issue 9 cell error system(2026-05-10):consumer-supplied `cellErrors` map shows error message
- * 14px text-error 在 display content 下方,gap-1 spacing。Edit cell 自動 clear visual error。
+ * 14px text-error 在 view content 下方,gap-1 spacing。Edit cell 自動 clear visual error。
  * Multi-error 用 array → ul li 分行。aria-describedby + aria-invalid for AT。
  *
  * 對齊 AG Grid `cellClassRules='ag-cell-error'` + Material X-DataGrid `errorMessage` cell prop +
@@ -1002,7 +1017,6 @@ export const WithBulkActions: Story = {
               </PopoverTrigger>
               <PopoverContent align="end" className="w-auto p-0">
                 <DataTableFilterPanel
-                  mode="flat"
                   columns={baseColumns}
                   value={filterTree}
                   onChange={setFilterTree}
@@ -1132,7 +1146,7 @@ export const WithBulkActions: Story = {
               <BulkActionBar
                 selection={visibleSelectedIds}
                 totalSelected={selectedCount}
-                onClear={() => setSelection({ mode: 'include', ids: [] })}
+                onClearSelection={() => setSelection({ mode: 'include', ids: [] })}
                 actions={
                   <>
                     <Button variant="tertiary" size="md" startIcon={Download}>下載</Button>
@@ -1266,7 +1280,6 @@ export const FilterPanelEmpty: Story = {
     return (
       <div className="w-full max-w-[680px]">
         <DataTableFilterPanel
-          mode="flat"
           columns={[...FILTER_COLUMNS]}
           value={value}
           onChange={setValue}
@@ -1292,7 +1305,6 @@ export const FilterPanelWithConditions: Story = {
     return (
       <div className="w-full max-w-[680px]">
         <DataTableFilterPanel
-          mode="flat"
           columns={[...FILTER_COLUMNS]}
           value={value}
           onChange={setValue}
@@ -1329,7 +1341,6 @@ export const FilterPanelNested: Story = {
     return (
       <div className="w-full max-w-[680px]">
         <DataTableFilterPanel
-          mode="nested"
           columns={[...FILTER_COLUMNS]}
           value={value}
           onChange={setValue}
@@ -1354,7 +1365,6 @@ export const FilterPanelRelativeDate: Story = {
       <div className="w-full max-w-[680px]">
         <p className="text-caption text-fg-muted mb-3">時間下拉分 過去 / 目前 / 未來 三組（Linear/Notion 共識）。</p>
         <DataTableFilterPanel
-          mode="flat"
           columns={[...FILTER_COLUMNS]}
           value={value}
           onChange={setValue}
@@ -1382,7 +1392,6 @@ export const FilterPanelModified: Story = {
       <div className="w-full max-w-[680px]">
         <p className="text-caption text-fg-muted mb-3">值偏離 default 時 header 出現 ↻ — 點擊 reset 回 default。</p>
         <DataTableFilterPanel
-          mode="flat"
           columns={[...FILTER_COLUMNS]}
           value={value}
           defaultValue={initial}
@@ -1424,7 +1433,6 @@ export const FilterPanelLongTagOverflow: Story = {
       <div className="w-full max-w-[680px]">
         <p className="text-caption text-fg-muted mb-3">產品分類名稱很長(製造業 ERP 常見)時,已選的多個標籤超出單行寬度,Combobox 自動收斂為 +N 摘要。</p>
         <DataTableFilterPanel
-          mode="flat"
           columns={[...longLabelColumns]}
           value={value}
           onChange={setValue}
@@ -1603,6 +1611,9 @@ const ROADMAP_DATA: RoadmapItem[] = [
   { id: 'RDM-008', title: 'Dark mode 全站支援', status: 'in-progress', priority: 'P2', owner: SELLERS[1], reviewers: [SELLERS[0], SELLERS[3]], tags: ['frontend', 'design'], startDate: '2026-04-20', dueDate: '2026-06-10', progress: 75, spec: 'https://notion.so/dark-mode', hours: 90, standup: '10:00' },
 ]
 
+// 大量 roadmap row 衍生用的真實工作範疇後綴（避免 "(#N)" 佔位符計數）
+const ROADMAP_SCOPES = ['行動版', '桌面版', 'API 層', '後台管理', '資料遷移', '效能優化', '無障礙改善', '國際化', '監控告警', '權限控管']
+
 // Roadmap shared columns helper(主 demo + 5 stress stories 共用)
 function useRoadmapColumns() {
   const col = createColumnHelper<RoadmapItem>()
@@ -1666,13 +1677,13 @@ export const RoadmapAllInOne: Story = {
         const item: RoadmapItem = {
           ...base,
           id,
-          title: `${base.title} (#${i + 1})`,
+          title: `${base.title} — ${ROADMAP_SCOPES[i % ROADMAP_SCOPES.length]}`,
         }
         // 前 8 個 top row 補 sub-tasks(展示 nested row + drag canonical:top-level only)
         if (i < 8) {
           item.children = [
-            { ...base, id: `${id}-1`, title: `${base.title} 子任務 A`, progress: Math.min(100, base.progress + 10), hours: Math.max(0, Math.floor(base.hours / 3)) },
-            { ...base, id: `${id}-2`, title: `${base.title} 子任務 B`, progress: Math.max(0, base.progress - 10), hours: Math.max(0, Math.floor(base.hours / 4)) },
+            { ...base, id: `${id}-1`, title: `${base.title}：介面設計與前端實作`, progress: Math.min(100, base.progress + 10), hours: Math.max(0, Math.floor(base.hours / 3)) },
+            { ...base, id: `${id}-2`, title: `${base.title}：API 整合與 QA 驗收`, progress: Math.max(0, base.progress - 10), hours: Math.max(0, Math.floor(base.hours / 4)) },
           ]
         }
         arr.push(item)
@@ -1762,7 +1773,6 @@ export const RoadmapAllInOne: Story = {
               </PopoverTrigger>
               <PopoverContent align="end" className="w-auto p-0">
                 <DataTableFilterPanel
-                  mode="flat"
                   columns={columns}
                   value={filterTree}
                   onChange={setFilterTree}
@@ -1867,7 +1877,7 @@ export const RoadmapAllInOne: Story = {
         {selection.length > 0 && (
           <BulkActionBar
             selection={selection}
-            onClear={() => setSelection([])}
+            onClearSelection={() => setSelection([])}
             actions={
               <>
                 <Button variant="tertiary" size="md" startIcon={Download}>匯出</Button>
@@ -1901,7 +1911,7 @@ export const RoadmapAllInOne: Story = {
    scripts/runtime-perf-datatable.mjs:20 仍指向本 story,gate 形同不可跑):──────────────────
    獨立 perf 量測 story — 同 Roadmap 13 cols rich-cell data(useRoadmapColumns SSOT),但**禁用**
    row drag / column reorder / column resize / selection / spreadsheet overlay,只保 inline edit
-   display。目的:隔離 feature-stack 疊加 cost(SortableRowProvider / filter / sort / columnOrder
+   view。目的:隔離 feature-stack 疊加 cost(SortableRowProvider / filter / sort / columnOrder
    state),驗證 rich cell 本體 scroll budget(avg ≤ 50ms / p95 ≤ 80ms / long-task ≤ 1,CPU 4x
    throttle)。**不動** RoadmapAllInOne demo IA(user 2026-05-10 directive 全合一)。
    重建版去掉原手刻說明 banner(px-loose + border-b border-divider = R9 chrome-header drift
@@ -1916,7 +1926,7 @@ export const RoadmapPerfBudget: Story = {
       for (let i = 0; i < 500; i++) {
         const base = ROADMAP_DATA[i % ROADMAP_DATA.length]
         const id = `RDM-${String(i + 100).padStart(3, '0')}`
-        arr.push({ ...base, id, title: `${base.title} (#${i + 1})` })
+        arr.push({ ...base, id, title: `${base.title} — ${ROADMAP_SCOPES[i % ROADMAP_SCOPES.length]}` })
       }
       return arr
     }, [])
@@ -1956,7 +1966,7 @@ const ORDER_ROWS: OrderRow[] = Array.from({ length: 128 }, (_, i) => ({
 const orderColumns: ColumnDef<OrderRow>[] = [
   { accessorKey: 'orderNo', header: '訂單編號' },
   { accessorKey: 'customer', header: '客戶' },
-  { accessorKey: 'amount', header: '金額', cell: ({ getValue }) => `$${(getValue() as number).toLocaleString()}` },
+  { accessorKey: 'amount', header: '金額', meta: { type: 'currency', prefix: '$' } },
   { accessorKey: 'placedAt', header: '成立日期' },
 ]
 

package/src/components/DataTable/data-table.tsx

@@ -7,7 +7,7 @@
 //   - data-table-filter-panel.tsx + data-table-sort-manager.tsx + data-table-column-visibility-panel.tsx(panel state 隔離)
 //   - data-table-filter-group.tsx + data-table-filter-value-picker.tsx(@internal;2026-07-14 filter panel
 //     過 800 hard cap 拆檔 — row/nested-group renderer + ValueShape picker,只被 panel 消費)
-//   - cell-registry.tsx(column type → cell display / edit 解析 SSOT)
+//   - cell-registry.tsx(column type → cell view / edit 解析 SSOT)
 //   - data-table-interaction-layer.tsx + active-editor-controller.ts(spreadsheet overlay + portal editor)
 //   - column-types.ts + filter-operators.ts(✓ Rule-of-3 SSOT,3+ consumer)
 //   - filter-tree.ts(pure data + eval,test isolation)
@@ -96,7 +96,7 @@ export interface DataTableProps<TData>
   /**
    * Issue 9 cell error system(2026-05-10)。
    *
-   * Map of `${rowId}:${colId}` → error message(string | string[])。Cell display mode 在 content
+   * Map of `${rowId}:${colId}` → error message(string | string[])。Cell view mode 在 content
    * 下方渲 `text-body text-error` 訊息,gap-1 spacing。Multi-error 用 array → ul / li 分行渲。
    *
    * **使用建議**:
@@ -279,13 +279,13 @@ export interface DataTablePaginationOptions {
 //
 // 原 `renderTypedValue` switch + `EditableCellContent` switch 兩條平行 type-switch
 // 已 collapse 為單一 `cellRegistry`(./cell-registry.ts)— 每個 type → 一個 cell component,
-// 同時處理 display + edit mode(底層 Field control 的 mode prop)。對齊 M17 SSOT consolidation。
+// 同時處理 view + edit mode(底層 Field control 的 mode prop)。對齊 M17 SSOT consolidation。
 //
 // 對齊 Notion / Airtable type-aware inline edit canonical(詳 spec §十二):
 //   - string / number / currency:cell click → inline edit
 //   - date / time / select / multiSelect / person / multiPerson:cell click → 進 edit mode
 //   - boolean:不分 read/edit mode,直接 `<Checkbox>` 點即 toggle + commit
-//   - url:read = LinkInput display + hover Pencil button,click Pencil 才進 edit mode
+//   - url:read = LinkInput view + hover Pencil button,click Pencil 才進 edit mode
 //
 // Cell id format: `${rowId}__${columnId}`(編輯狀態 keying)
 // Commit: blur OR Enter OR overlay close → 呼叫 onCellCommit
@@ -393,10 +393,10 @@ function columnSizeStyle(
   //
   // **flex-basis: baseSize(2026-05-06 v14.2)**:把 baseSize 當 explicit basis(不是 `0%`)。
   // 為什麼:flex item base = basis + padding(box-sizing: border-box content-box 行為)。前 `0%`
-  // basis → cell padding 變 base 一部分。display(padding 12)vs edit(padding 0,Field 接管)
+  // basis → cell padding 變 base 一部分。view(padding 12)vs edit(padding 0,Field 接管)
   // 兩態 base 不同 → flex 重分配 → user 報「Price cell 進 edit 寬度縮 12px」
-  // (量測:Price display 130.5 → edit 118.5 = -12px)。
-  // explicit basis = baseSize 讓 padding 不參與 base 計算 → display↔edit 寬度穩定。
+  // (量測:Price view 130.5 → edit 118.5 = -12px)。
+  // explicit basis = baseSize 讓 padding 不參與 base 計算 → view↔edit 寬度穩定。
   return { flex: `1 1 ${baseSize}px`, minWidth: baseSize, maxWidth: maxSize }
 }
 
@@ -649,12 +649,33 @@ function DraggableHeaderCell({
     : dropIndicatorSide === 'after'
     ? dropIndicatorColumn.pseudoAfter
     : ''
+  // dnd-kit KeyboardSensor 的 activator = listeners.onKeyDown,掛在整個 header cell 上(column
+  // 無獨立 activator node,不像 row drag 的 button-only handle)。巢狀互動 descendant(more-menu
+  // 按鈕 / resize separator / 排序 chevron)的 Enter/Space 冒泡到此 → dnd-kit preventDefault 啟動
+  // 欄位拖曳,吃掉按鈕原生啟動。包一層 guard:事件來自互動 descendant(非 header cell 本身)時
+  // 交回原生,不啟動拖曳。對齊 dnd-kit「activator node 排除互動 descendant」idiom。
+  const rawListeners = draggable.listeners as Record<string, ((e: React.SyntheticEvent) => void) | undefined> | undefined
+  const guardedListeners: Record<string, unknown> | undefined = rawListeners
+    ? {
+        ...rawListeners,
+        onKeyDown: (e: React.KeyboardEvent) => {
+          const target = e.target as HTMLElement
+          if (
+            target !== e.currentTarget &&
+            target.closest('button, a, input, select, textarea, [role="menuitem"], [role="separator"]')
+          ) {
+            return
+          }
+          rawListeners.onKeyDown?.(e)
+        },
+      }
+    : rawListeners
   return React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {
     ref: setRefs,
     style: { ...(childProps.style ?? {}), ...dragStyle },
     'data-column-id': id,
     'data-column-locked': isLocked || undefined,
-    ...(disabled ? {} : { ...draggableAttrs, ...(draggable.listeners as unknown as Record<string, unknown>) }),
+    ...(disabled ? {} : { ...draggableAttrs, ...(guardedListeners ?? {}) }),
     // 2026-05-06 v14.9 cursor canonical(對齊 Notion / Jira):
     // **idle hover NOT 顯 cursor-grab** — header click 觸發 sort,grab cursor 會誤導 user 以為「點 = 拖」;
     // **drag activation 後**(isDragging=true,過 8px activationConstraint)才顯 cursor-grabbing。
@@ -869,7 +890,7 @@ function RowDragHandle({ disabled, anyDragActive }: { disabled: boolean; anyDrag
 // 但 renderCellContent 每次 render 傳 3 個全新 inline closure(onCommit / onCommitLive /
 // onRequestEdit)+ `meta ?? {}` 新 object → memo shallow-compare 100% fail,防線靜默失效
 // (DataTableInner 任何 re-render — scroll / resize / drag / spreadsheet 選取 / portal keystroke —
-// 都讓全部 visible cells 的 Field display subtree 整棵重渲)。
+// 都讓全部 visible cells 的 Field view subtree 整棵重渲)。
 // Fix:中介 memo slot — 從 parent 接 stable callback(commitCell / cancelCellEdit / onCellCommit /
 // enterCellEdit)+ primitive rowId / colId,在 slot 內 useCallback 綁 per-cell closure;
 // props 全 primitive / stable reference → memo 真命中,unchanged cells render 成本歸零。
@@ -884,11 +905,10 @@ interface MemoCellSlotProps {
   value: any
   // any-allow: free-form consumer meta bag(同 CellComponentProps.meta)
   meta: Record<string, any>
-  mode: 'display' | 'edit'
+  mode: 'view' | 'edit'
   size: 'sm' | 'md' | 'lg'
   autoRowHeight: boolean
   isEditable: boolean
-  isDisabled: boolean
   onCommitCell: (rowId: string, colId: string, next: unknown) => void
   onCancelCell: (rowId: string, colId: string) => void
   onCellCommitLive?: (rowId: string, colId: string, next: unknown) => void
@@ -897,13 +917,12 @@ interface MemoCellSlotProps {
 
 const MemoCellSlot = React.memo(function MemoCellSlot({
   Cell, rowId, colId, value, meta, mode, size, autoRowHeight,
-  isEditable, isDisabled, onCommitCell, onCancelCell, onCellCommitLive, onEnterEdit,
+  isEditable, onCommitCell, onCancelCell, onCellCommitLive, onEnterEdit,
 }: MemoCellSlotProps) {
   const onCommit = React.useCallback((next: unknown) => onCommitCell(rowId, colId, next), [onCommitCell, rowId, colId])
   const onCommitLive = React.useCallback((next: unknown) => onCellCommitLive?.(rowId, colId, next), [onCellCommitLive, rowId, colId])
   const onCancel = React.useCallback(() => onCancelCell(rowId, colId), [onCancelCell, rowId, colId])
-  // disabled guard 保留原 renderCellContent inline closure 語意(`() => !disabled && setEditingCellId(...)`)
-  const onRequestEdit = React.useCallback(() => { if (!isDisabled) onEnterEdit(rowId, colId) }, [onEnterEdit, isDisabled, rowId, colId])
+  const onRequestEdit = React.useCallback(() => onEnterEdit(rowId, colId), [onEnterEdit, rowId, colId])
   return (
     <Cell
       value={value}
@@ -912,7 +931,6 @@ const MemoCellSlot = React.memo(function MemoCellSlot({
       size={size}
       autoRowHeight={autoRowHeight}
       isEditable={isEditable}
-      isDisabled={isDisabled}
       onCommit={onCommit}
       onCommitLive={onCommitLive}
       onCancel={onCancel}
@@ -1040,28 +1058,13 @@ function DataTableInner<TData>(
     },
     [],
   )
-  // 2026-05-13 Stream C Cluster B Q3 ship(per codex Q3 verdict + user 拍板「全部馬不停蹄做完」):
-  // Mirror isCellEditable pattern。`column.meta.disabled` 接 bool 或 (row) => boolean fn。
-  // cell disabled → (a) TD 加 `bg-disabled cursor-not-allowed` + 抑制 hover, (b) inner Field
-  // 透過 isDisabled prop 走 mode='disabled'(各 Field type 內部具體 disabled token,非 wrapper blanket opacity),
-  // (c) edit entry condition: `cellEditable && !cellDisabled`。
-  const isCellDisabled = React.useCallback(
-    // any-allow: free-form consumer meta — same rationale as L143 renderTypedValue
-    (meta: Record<string, any> | undefined, row: unknown): boolean => {
-      const d = meta?.disabled
-      if (typeof d === 'function') return d(row) === true
-      return d === true
-    },
-    [],
-  )
-  // 2026-05-13:canEditCell helper consolidation(per codex V4 follow-up + user「沒理由不做」拍板)
-  // 抽 4-site repeated `editable && !disabled` pattern。3 path sites(keyboard / Tab / InteractionLayer)
-  // call canEditCell;另 2 sites(renderCellContent + onEditableCellClick)用 already-computed `editable`/
-  // `disabled` 變數(因為 disabled 還要單獨給 isDisabled prop + bg-disabled class),不 collapse to helper。
+  // 2026-07-16 round16:cell「disabled」態廢除(世界級 grid 無 disabled cell;meta.disabled 全庫 0 消費)。
+  // 鎖定 cell = `editable:(row)=>false`(= isCellEditable 模型),非灰化 disabled 態。原 isCellDisabled
+  // helper + bg-disabled TD 灰化 + isDisabled prop 全移除;canEditCell 收斂為 isCellEditable。
   const canEditCell = React.useCallback(
     (meta: Record<string, unknown> | undefined, row: unknown): boolean =>
-      isCellEditable(meta, row) && !isCellDisabled(meta, row),
-    [isCellEditable, isCellDisabled],
+      isCellEditable(meta, row),
+    [isCellEditable],
   )
   const [sorting, setSorting] = React.useState<SortingState>(tableOptions?.state?.sorting as SortingState ?? [])
 
@@ -1502,7 +1505,7 @@ function DataTableInner<TData>(
   const hoverProps = (_idx: number): Record<string, never> => ({})
 
   // ── Cell render(Phase C 2026-05-05 — type-keyed registry SSOT)──
-  // 命中 columnType → 走 cellRegistry(display / edit mode 同元件 with `mode` prop);
+  // 命中 columnType → 走 cellRegistry(view / edit mode 同元件 with `mode` prop);
   // 無 columnType → consumer 自訂 cell.columnDef.cell。
   const renderCellContent = (cell: ReturnType<typeof rows[number]['getVisibleCells']>[number]) => {
     const meta = cell.column.columnDef.meta
@@ -1510,27 +1513,25 @@ function DataTableInner<TData>(
     const wrap = autoRowHeight && meta?.wrap === true
     // 已知 compound 欄位(Tag / PersonDisplay / LinkInput 等自帶 layout)直接 bypass TruncateCell,
     // 因為 `truncate` 的 inline baseline context 會破壞自訂 layout 的垂直對齊。
-    // 2026-05-09 D-path:date / time 加入(showDisplayEndIcon → Field naked-display 需 full width 才能
+    // 2026-05-09 D-path:date / time 加入(showDisplayEndIcon → Field naked-view 需 full width 才能
     //   右對齊 ItemSuffix。TruncateCell 的 `<span truncate min-w-0>` block-display 會 collapse Field
     //   to content size,讓 Calendar / Clock icon 緊貼 value text 而非右邊緣)。
     const isKnownCompound = colType === 'select' || colType === 'multiSelect' || colType === 'person' || colType === 'multiPerson' || colType === 'url' || colType === 'date' || colType === 'time'
     const rowId = cell.row.id
     const colId = cell.column.id
     const editable = isCellEditable(meta, cell.row.original)
-    const disabled = isCellDisabled(meta, cell.row.original)
     const isEditingThisCell = editingCellId === cellEditId(rowId, colId)
 
     let content: React.ReactNode
     if (colType) {
       const Cell = resolveCellComponent(colType)
       // 2026-05-10 Slice D Step 5(D.3 portal Field):當 portal flag 啟 + cell 編輯中 →
-      // cell 保持 display mode(SSOT preserved per codex Q6.2),portal layer 渲 edit Field 在上。
-      // 預設 inline-edit:isEditingThisCell ? edit : display。
-      // 2026-05-13 Q3 cell-disabled:disabled cell 永遠 display lifecycle(state overlay,不進 edit)。
-      const cellMode: 'edit' | 'display' =
+      // cell 保持 view mode(SSOT preserved per codex Q6.2),portal layer 渲 edit Field 在上。
+      // 預設 inline-edit:isEditingThisCell ? edit : view。
+      const cellMode: 'edit' | 'view' =
         (experimentalActiveEditorController && isEditingThisCell)
-          ? 'display'
-          : (isEditingThisCell && !disabled) ? 'edit' : 'display'
+          ? 'view'
+          : isEditingThisCell ? 'edit' : 'view'
       // 2026-07-05 D3 perf fix:改經 MemoCellSlot — 原 inline closure props 讓 CellWithSurface
       // memo 100% miss(詳 MemoCellSlot 檔頭註解)。
       content = (
@@ -1544,7 +1545,6 @@ function DataTableInner<TData>(
           size={size}
           autoRowHeight={autoRowHeight}
           isEditable={editable}
-          isDisabled={disabled}
           onCommitCell={commitCell}
           onCancelCell={cancelCellEdit}
           onCellCommitLive={onCellCommit}
@@ -1572,8 +1572,8 @@ function DataTableInner<TData>(
   const iconSize = ICON_SIZE[size as 'sm' | 'md' | 'lg']
 
   // 2026-05-09 D-path retired:`getEditIndicator(colType)` parallel system 移除。
-  // Indicator authority 從 DataTable cellEl 移交 **Field naked-display branch via `showDisplayEndIcon` opt-in**
-  //   — Select / TimePicker / DatePicker / Combobox / PeoplePicker 5 picker 的 display mode 內建
+  // Indicator authority 從 DataTable cellEl 移交 **Field naked-view branch via `showDisplayEndIcon` opt-in**
+  //   — Select / TimePicker / DatePicker / Combobox / PeoplePicker 5 picker 的 view mode 內建
   //   `<ItemSuffix>` 渲對應 trigger icon(同 edit DOM 結構)。LinkInput URL anchor 例外(無 suffix)。
   // SSOT chain:cell-registry.tsx(opt-in props)→ Field component(intrinsic icon + ItemSuffix DOM)→
   //   item-anatomy ItemPrefix/ItemSuffix layout SSOT。詳 `.claude/planning/cell-indicator-ssot-rfc.md`。
@@ -1681,17 +1681,15 @@ function DataTableInner<TData>(
     const cellRowId = cell.row.id
     const cellColId = cell.column.id
     const cellEditable = isCellEditable(meta, cell.row.original)
-    const cellDisabled = isCellDisabled(meta, cell.row.original)
     const isEditingThisCell = editingCellId === cellEditId(cellRowId, cellColId)
-    // Indicator canonical(2026-05-09 D-path retire):**Field naked-display branch own** via
+    // Indicator canonical(2026-05-09 D-path retire):**Field naked-view branch own** via
     //   `showDisplayEndIcon` opt-in(per-picker `<ItemSuffix>` 渲 ChevronDown/Calendar/Clock)。
     //   DataTable cellEl 不再 render parallel indicator — SSOT 對齊 Field family。
     //   詳 `.claude/planning/cell-indicator-ssot-rfc.md` Step 9。
     // Cell click → 進 edit mode(boolean 不需 — 自己 toggle;url 不需 — 走內部 Pencil button,Phase C 由 UrlCell 內處理)
     const cellSpreadsheetId = `${cellRowId}:${cellColId}`
     const isSelectedCell = spreadsheetMode && selectedCellId === cellSpreadsheetId
-    // 2026-05-13 Q3:cellDisabled → 抑制 editable click(對齊 `editable && !disabled` invariant)
-    const onEditableCellClick = cellEditable && !cellDisabled && colType !== 'boolean' && colType !== 'url' && !isEditingThisCell
+    const onEditableCellClick = cellEditable && colType !== 'boolean' && colType !== 'url' && !isEditingThisCell
       ? (e: React.MouseEvent) => {
         if (spreadsheetMode) {
           // Slice D Step 4 spreadsheet semantics(2026-05-10 user 拍板,2026-05-12 v2 fix):
@@ -1767,7 +1765,7 @@ function DataTableInner<TData>(
         role="cell"
         // group/cell + data-row-mode:讓 Field naked 用 `group-data-[row-mode=...]/cell:items-X`
         // 從 cell 取 alignment(autoRowHeight=auto 頂對齊 / fixed=fixed 置中)。CSS propagation,
-        // Field API 不變;每個 mode 內 display↔edit 同 alignment(同 Field, 同 group → 同 items)。
+        // Field API 不變;每個 mode 內 view↔edit 同 alignment(同 Field, 同 group → 同 items)。
         // H1(2026-05-10):per-row error → effectiveAutoRowForCell 同 row.tsx effectiveAutoRow
         data-row-mode={effectiveAutoRowForCell ? 'auto' : 'fixed'}
         data-column-id={cell.column.id}
@@ -1777,8 +1775,6 @@ function DataTableInner<TData>(
         // Phase 9 Issue 1 fix(2026-05-10):range cell bg fill via CSS [data-range-cell],
         // 不在 overlay layer(避免 layer fixed-position bg 蓋 cell content)。
         data-range-cell={spreadsheetMode && rangeCellIdSet.has(`${cell.row.id}:${cell.column.id}`) ? '' : undefined}
-        // 2026-05-13 V1.6:data-cell-disabled attribute 給 CSS `:not([data-cell-disabled])` 過濾,disabled cell 不被 range fill 蓋
-        data-cell-disabled={cellDisabled ? 'true' : undefined}
         // Issue 9 cell error(2026-05-10):aria-describedby 接 error message id 給 AT 讀
         aria-describedby={cellErrorId}
         aria-invalid={hasCellError || undefined}
@@ -1817,19 +1813,16 @@ function DataTableInner<TData>(
           // Field naked edit border 仍 own(per Field SSOT)— 編輯時 Field 自帶 border 1px,
           // 跟 cell 4 邊 inset divider 視覺相疊(同 pixel)= 1 line visual,不雙線。
           inlineEdit && 'dtCellGrid',
-          onEditableCellClick && ['cursor-pointer', nakedCellEditableDisplayHover],  // editable cell display hover affordance(對齊 Notion / Airtable hover-cell-shows-border canonical)
+          onEditableCellClick && ['cursor-pointer', nakedCellEditableDisplayHover],  // editable cell view hover affordance(對齊 Notion / Airtable hover-cell-shows-border canonical)
           // a11y(2026-07-14 dim-10 修):非 spreadsheet inlineEdit cell 可 Tab 聚焦(見下方
           // tabIndex/onKeyDown)— focus-visible ring 對齊本檔 expand button / sortable header canonical。
           onEditableCellClick && !spreadsheetMode && 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
-          // 2026-05-13 Q3 cell disabled SSOT(per codex Q3 verdict + user 拍板「全部馬不停蹄做完」):
-          // bg `--bg-disabled` component-state token(color.spec.md:671 owner)+ cursor 抑制 click affordance。
-          cellDisabled && 'bg-disabled cursor-not-allowed',
           // z-10 raise inline-edit cell;portal mode 不需(layer z-3 already on top)。
           isEditingThisCell && !experimentalActiveEditorController && 'z-10',
         )}
         style={{
           ...columnSizeStyle(cell.column, { resize: enableColumnResize, isSystemCol: isSystemColumn(cell.column.id) }),
-          // Padding override 只在 inline-edit cell(naked Field 撐滿 cell);portal mode cell 走正常 display padding
+          // Padding override 只在 inline-edit cell(naked Field 撐滿 cell);portal mode cell 走正常 view padding
           ...(isEditingThisCell && !experimentalActiveEditorController ? {} : cellPadding),
           // Slice D Step 2(2026-05-10):flag 開時 set CSS variable 抑制 Field naked hover outline,
           // 讓 overlay layer 接管 hover ring paint(per RFC Contract 8 「one geometry owner, two paint owners」)。
@@ -1839,7 +1832,7 @@ function DataTableInner<TData>(
         onClick={onEditableCellClick}
         // a11y(2026-07-14 dim-10 修):非 spreadsheet 的 inlineEdit cell 原本只有 onClick —
         // 鍵盤 user 無法聚焦 cell、無法進入編輯(WCAG 2.1.1)。對齊 Atlassian InlineEdit
-        // read-view-focusable idiom:editable display cell 可 Tab 聚焦,Enter / F2 進 edit。
+        // read-view-focusable idiom:editable view cell 可 Tab 聚焦,Enter / F2 進 edit。
         // spreadsheetMode 不加(該模式走 table-level selectedCellId 鍵盤導覽 SSOT,per-cell
         // tab stop 會跟 roving 模型衝突);cell 內 embedded 控件事件不攔(target guard)。
         tabIndex={onEditableCellClick && !spreadsheetMode ? 0 : undefined}
@@ -1852,7 +1845,7 @@ function DataTableInner<TData>(
         } : undefined}
       >
         {/* Issue 9 cell error(2026-05-10):有 error → cell 內外結構切 flex-col,
-            上 row 渲既有 nested + content,下 row 渲 error message 14px text-error。
+            上 row 渲既有 nested + content,下 row 渲 error message `text-body text-error`。
             無 error 時走原 flex-row(backward-compat 0 layout shift)。 */}
         {hasCellError ? (
           <span className="flex flex-col self-stretch w-full min-w-0 gap-1">
@@ -2085,8 +2078,7 @@ function DataTableInner<TData>(
         else if (e.key === 'ArrowLeft' && curColIdx > 0) { nextColIdx = curColIdx - 1 }
         else if (e.key === 'ArrowRight' && curColIdx < allCols.length - 1) { nextColIdx = curColIdx + 1 }
         else if (e.key === 'Enter' || e.key === 'F2') {
-          // Enter / F2 → 進 edit(若 cell editable + 非 boolean / url + 非 disabled)
-          // 2026-05-13 codex V1 fix:加 `!isCellDisabled(meta, row)` gate(對齊 mouse click invariant)
+          // Enter / F2 → 進 edit(若 cell editable + 非 boolean / url)。edit 入口統一走 canEditCell(= isCellEditable)。
           const row = table.getRowModel().rowsById[curRowId]
           const colDef = table.getAllLeafColumns().find((c) => c.id === curColId)
           // any-allow: column meta free-form
@@ -2142,7 +2134,7 @@ function DataTableInner<TData>(
     },
     // D3 dep-hygiene fix(2026-07-06):handler 內(portal edit Enter 分支)呼叫的是 canEditCell,
     // 非 isCellEditable — 原 deps 列 isCellEditable 是靠 canEditCell identity-stable 才無實害的
-    // stale-closure 地雷;改列真實依賴 canEditCell(其 useCallback deps 已含 isCellEditable + isCellDisabled)。
+    // stale-closure 地雷;改列真實依賴 canEditCell(其 useCallback deps 已含 isCellEditable)。
     [enabled, mode, hasAnySelection, selectableVisibleIds, setSelection,
      spreadsheetMode, selectedCellId, editingCellId, table, canEditCell]
   )
@@ -2315,16 +2307,40 @@ function DataTableInner<TData>(
           const colOptIn = colMeta?.resizable !== false
           const isResizable = enableColumnResize && !isSystemColumn(colId) && colOptIn
           const isResizing = header.column.getIsResizing?.()
+          // 鍵盤 resize(WAI-ARIA window-splitter):方向鍵調整欄寬,公開目前值 + 下限。
+          // effectiveMinWidth 對齊 drag 路徑(resolveColumnSizing minSize),step 16px。
+          const effectiveMinWidth = header.column.columnDef.minSize ?? MIN_COLUMN_WIDTH
+          const currentWidth = Math.round(header.column.getSize())
+          const RESIZE_KEY_STEP = 16
           // H2: 不論 showDivider,只要 isResizable 就 render hot zone(panel boundary col 仍可拖)
           if (!showDivider && !isResizable) return null
           return (
             <span
               role={isResizable ? 'separator' : undefined}
               aria-orientation={isResizable ? 'vertical' : undefined}
-              aria-label={isResizable ? '拖曳調整欄寬' : undefined}
+              aria-label={isResizable ? '調整欄寬' : undefined}
+              // 鍵盤可操作 separator(WAI-ARIA window-splitter):focusable + 方向鍵調整 +
+              // 公開目前寬度 / 下限。aria-valuetext 給 SR px 值(避免無 valuemax 時被誤讀成百分比)。
+              tabIndex={isResizable ? 0 : undefined}
+              aria-valuenow={isResizable ? currentWidth : undefined}
+              aria-valuemin={isResizable ? effectiveMinWidth : undefined}
+              aria-valuetext={isResizable ? `${currentWidth}px` : undefined}
+              onKeyDown={isResizable ? (e: React.KeyboardEvent<HTMLSpanElement>) => {
+                let next: number | null = null
+                if (e.key === 'ArrowLeft') next = Math.max(effectiveMinWidth, currentWidth - RESIZE_KEY_STEP)
+                else if (e.key === 'ArrowRight') next = currentWidth + RESIZE_KEY_STEP
+                else if (e.key === 'Home') next = effectiveMinWidth
+                if (next == null) return
+                // stopPropagation:不讓方向鍵冒泡到 header 排序 / 欄位拖曳 keyboard listener。
+                e.preventDefault()
+                e.stopPropagation()
+                table.setColumnSizing((prev) => ({ ...prev, [colId]: next as number }))
+                // onColumnResize 由 columnSizing useEffect 自動 fire(非 drag 路徑不經 isResizingColumn)。
+              } : undefined}
               className={cn(
                 'group/resize absolute top-0 bottom-0 right-0 -mr-[3px] w-[7px]',
                 isResizable && 'cursor-col-resize select-none',
+                isResizable && 'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',
               )}
               // 2026-05-12 fix v2(user 抓 R3 stopPropagation 沒生效):dnd-kit PointerSensor
               // 監聽 `pointerdown`,我前一輪只 stop `onMouseDown` → pointerdown 仍冒泡 →
@@ -2721,12 +2737,19 @@ function DataTableInner<TData>(
           // Center body 同時擁有 H + V scroll;maxHeight 限制讓 H scrollbar 落在 visible 底部
           data-datatable-hscroll
           data-datatable-panel="center"
+          // a11y(scrollable-region-focusable,對齊 DS ScrollArea Viewport canonical):唯讀表格
+          // 的可捲動 body 若無任何 focusable descendant,鍵盤使用者無法捲動。read-only 模式
+          // (非 enabled / spreadsheet)outer table 也不 focusable → 這裡補 tabIndex=0 + 具名 +
+          // inset focus ring,讓鍵盤可聚焦後方向鍵捲動;互動模式已由 outer table keyboard handler
+          // + focusable cells 覆蓋,不重複加 tab stop。
+          tabIndex={enabled || spreadsheetMode ? undefined : 0}
+          aria-label={enabled || spreadsheetMode ? undefined : '表格內容,可捲動'}
           // overflow-x/y: auto — 沒 overflow 就不顯 bar。wrapper minWidth 仍 trigger H 真 overflow。
           // **不**用 scrollbar-gutter: stable — 那會永遠保留 V 軸 15px 空間,
           // content fit 時看起來像「永遠有 V 捲軸」(Image #5 bug)。
           // trade-off:V scroll 出現時 body 內側少 15px,header 不縮 → 右端微 misalign,
           // 但 content fit 視覺乾淨優先(Mac 用戶 overlay scrollbar 不可見)。
-          className="flex-1 min-w-0 overflow-x-auto overflow-y-auto"
+          className="flex-1 min-w-0 overflow-x-auto overflow-y-auto focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring"
           // isFillHeight:用 JS 算的 px(bodyMaxHeight),bypass CSS % 在 flex 場景的不可靠 shrink。
           // 固定 px(300px etc):直接套 height。
           style={
@@ -2779,7 +2802,7 @@ function DataTableInner<TData>(
         activeEditorEnabled={experimentalActiveEditorController}
         // Slice D Step 5(D.3 portal Field,2026-05-10):real portal Field render callback。
         // Layer 在 ActiveEditorHost(z 3 float rect)render `<Cell mode="edit" />` 同 registry。
-        // Cell wrapper 保持 mode="display"(SSOT preserved per codex Q6.2)。
+        // Cell wrapper 保持 mode="view"(SSOT preserved per codex Q6.2)。
         activeEditorRender={experimentalActiveEditorController ? (cellId) => {
           const lastColon = cellId.lastIndexOf(':')
           if (lastColon < 0) return null

package/src/components/DataTable/filter-operators.spec.md

@@ -245,6 +245,8 @@
 - **巢狀深度**:1-level cap 由 TypeScript 型別鎖死(`FilterGroup.children: FilterCondition[]`),無 runtime guard;繞過型別塞入的非 condition 物件缺 `field`/`op` → incomplete → pass-through,不 crash
 - **relative 區間邊界**:全部 local time、雙端 inclusive(`startOfDay`–`endOfDay`);`past_7_days` = 7 天前 00:00 起**含今天整天**;week 以週一起算(`weekStartsOn: 1`)
 
+**A11y / Loading(明文 N/A)**:本 spec 是 Operator × ColumnType × ValueShape 資料模型 SSOT(非 UI 元件)——filter panel 的互動 a11y / loading 狀態屬 UI 層 owner(`data-table.spec.md` + filter panel 家族元件)與各 Field 控件 spec。
+
 ## 9. Phase B 進度
 
 - [x] ValueShape × DS 元件對照 — 完成,coverage 8/12 直接消費 + 4 預留;datetime 走 `<DatePicker showTime>` / `<DatePickerRange showTime>` prop variant(M21,非新元件)

package/src/components/DateGrid/date-grid.spec.md

@@ -58,7 +58,7 @@ DateGrid 是 internal primitive(見「定位」),一般 consumer 經 `DatePicker
 | 場景 | 改用 | 原因 |
 |------|------|------|
 | 日期輸入欄位 | `DatePicker` | DateGrid 是 inline,欄位需要 trigger + popup 結構 |
-| 純顯示單日期 | `<DatePicker mode="display">` / `Intl.DateTimeFormat` | 不需 interactive 月曆 |
+| 純顯示單日期 | `<DatePicker mode="view">` / `Intl.DateTimeFormat` | 不需 interactive 月曆 |
 | 時間選擇(時分) | `TimePicker`(見 `../TimePicker/time-picker.spec.md`)| DateGrid 只處理日期層級 |
 | 事件行事曆(日程本) | 專用行事曆元件 | DateGrid 是日期選擇;事件日誌需要 event overlay / drag / week/month view 切換 |