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

package/dist/components/DataTable/data-table-sort-manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-sort-manager.js","sources":["../../../src/components/DataTable/data-table-sort-manager.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// same-row-mixed-allow: header chrome corner buttons(refresh/close)跟 row inline actions(drag/trash)不在同 row\nimport * as React from 'react'\nimport { Plus, Trash2, X as XIcon, RotateCcw, GripVertical } from 'lucide-react'\nimport type { ColumnDef, SortingState } from '@tanstack/react-table'\nimport { DndContext, closestCenter, type DragEndEvent } from '@dnd-kit/core'\nimport { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { cn } from '@/lib/utils'\nimport { dragSourceStyle, dragHandleCursorClass } from '@/design-system/lib/drag-visual'\nimport { Button } from '@/design-system/components/Button/button'\nimport { Select, type SelectOption } from '@/design-system/components/Select/select'\nimport { SurfaceHeader, SurfaceBody, COMPACT_HEADER_SLOT } from '@/design-system/patterns/overlay-surface/overlay-surface'\nimport { ButtonDivider } from '@/design-system/components/Button/button-group'\nimport { PopoverTitle, PopoverClose } from '@/design-system/components/Popover/popover'\nimport { ItemInlineActionButton } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { getColumnId, getColumnLabel } from './lib/column-meta'\n\n/**\n * DataTableSortManager — Notion-style 多欄排序管理 panel\n *\n * 對齊 ref/進階篩選/sort.png 設計:\n *   Header(title + refresh + close)/ list(field + direction + delete + reorder)/\n *   footer(+ 加排序)。\n *\n * Source-of-truth: TanStack `SortingState`(同 `useReactTable.state.sorting`)。\n * 跟 cell click sort 共享 state — single source-of-truth across cell + panel。\n *\n * Reorder:DnD(useSortable + GripVertical handle,見下方 SortRow)——原 MVP ↑/↓ button 已退役。\n */\n\ninterface SortColumn {\n  id: string\n  label: string\n  enableSorting?: boolean\n}\n\nexport interface DataTableSortManagerProps<TData> {\n  /** 可排序欄位來源(讀 columnDef.header / id);會自動排除 enableSorting=false */\n  columns: ColumnDef<TData, any>[]\n  /** 當前排序 state(TanStack SortingState) */\n  sorting: SortingState\n  /** 排序變更 callback */\n  onSortingChange: (next: SortingState) => void\n  /** Refresh 按鈕點擊(可選 — 重置或外部 refetch) */\n  onReset?: () => void\n  /** Close 按鈕點擊(若有 — 通常是包在 Popover 外層的 close 行為) */\n  onClose?: () => void\n  className?: string\n}\n\nfunction extractColumns<TData>(columns: ColumnDef<TData, any>[]): SortColumn[] {\n  const out: SortColumn[] = []\n  for (const col of columns) {\n    const id = getColumnId(col)\n    if (!id || id === '__select__') continue\n    if (col.enableSorting === false) continue\n    out.push({ id, label: getColumnLabel(col, id), enableSorting: true })\n  }\n  return out\n}\n\nconst DIRECTION_OPTIONS: SelectOption[] = [\n  { value: 'asc', label: '升冪' },\n  { value: 'desc', label: '降冪' },\n]\n\nexport function DataTableSortManager<TData>({\n  columns,\n  sorting,\n  onSortingChange,\n  onReset,\n  onClose,\n  className,\n}: DataTableSortManagerProps<TData>) {\n  const sortableColumns = React.useMemo(() => extractColumns(columns), [columns])\n  const fieldOptions: SelectOption[] = React.useMemo(\n    () => sortableColumns.map((c) => ({ value: c.id, label: c.label })),\n    [sortableColumns]\n  )\n\n  const updateAt = (index: number, patch: Partial<{ id: string; desc: boolean }>) => {\n    const next = sorting.map((s, i) => (i === index ? { ...s, ...patch } : s))\n    onSortingChange(next)\n  }\n  const removeAt = (index: number) => {\n    onSortingChange(sorting.filter((_, i) => i !== index))\n  }\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (!over || active.id === over.id) return\n    const oldIndex = sorting.findIndex((s) => s.id === active.id)\n    const newIndex = sorting.findIndex((s) => s.id === over.id)\n    if (oldIndex < 0 || newIndex < 0) return\n    const next = [...sorting]\n    const [moved] = next.splice(oldIndex, 1)\n    next.splice(newIndex, 0, moved)\n    onSortingChange(next)\n  }\n  const addSort = () => {\n    const used = new Set(sorting.map((s) => s.id))\n    const firstUnused = sortableColumns.find((c) => !used.has(c.id))\n    if (!firstUnused) return\n    onSortingChange([...sorting, { id: firstUnused.id, desc: false }])\n  }\n\n  // K11 fix(2026-05-04): viewport-aware scroll chain invariant — 詳 overlay-surface.spec.md\n  // 2026-05-23 Phase A.4 Decision 2: w-[480px] → token `--data-table-sort-panel-width`(SSOT in uiSize.css)\n  return (\n    <div className={cn('flex flex-col h-full min-h-0 w-[var(--data-table-sort-panel-width)]', className)}>\n      {/* Popover 派輕量 chrome — slot 走 COMPACT_HEADER_SLOT(=21,衍生自 PopoverTitle text-body line-box),header 自然 ~45px */}\n      <SurfaceHeader className={COMPACT_HEADER_SLOT}>\n        <PopoverTitle className=\"flex-1\">排序</PopoverTitle>\n        {onReset && sorting.length > 0 && (\n          <>\n            <Button variant=\"text\" size=\"sm\" iconOnly startIcon={RotateCcw} aria-label=\"重置\" onClick={onReset} />\n            {onClose && <ButtonDivider />}\n          </>\n        )}\n        {onClose && (\n          <PopoverClose asChild>\n            <Button data-dismiss iconOnly dismiss size=\"sm\" startIcon={XIcon} aria-label=\"關閉\" onClick={onClose} />\n          </PopoverClose>\n        )}\n      </SurfaceHeader>\n\n      {/* Body — 條件 list + inline 加排序 CTA(對齊 filter panel canonical Q3+Q6,2026-05-04)\n          無條件時 CTA 直接顯示,不需要 Empty 大區塊 */}\n      <SurfaceBody className=\"flex flex-col gap-[var(--layout-space-tight)]\">\n        {sorting.length > 0 && (\n          <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>\n            <SortableContext items={sorting.map(s => s.id)} strategy={verticalListSortingStrategy}>\n              {sorting.map((sort, index) => {\n                const usedByOthers = new Set(sorting.filter((_, i) => i !== index).map((s) => s.id))\n                const optionsForRow = fieldOptions.filter((o) => !usedByOthers.has(o.value))\n                return (\n                  <SortRow\n                    key={sort.id}\n                    sort={sort}\n                    optionsForRow={optionsForRow}\n                    onChangeId={(v) => updateAt(index, { id: v })}\n                    onChangeDir={(v) => updateAt(index, { desc: v === 'desc' })}\n                    onRemove={() => removeAt(index)}\n                  />\n                )\n              })}\n            </SortableContext>\n          </DndContext>\n        )}\n\n        {/* B1 加排序 → tertiary,parallel filter「加篩選」(root-level CTA 對等視覺重量) */}\n        <div>\n          <Button\n            variant=\"tertiary\"\n            size=\"sm\"\n            startIcon={Plus}\n            onClick={addSort}\n            disabled={sorting.length >= sortableColumns.length}\n          >\n            加排序\n          </Button>\n        </div>\n      </SurfaceBody>\n    </div>\n  )\n}\n\nDataTableSortManager.displayName = 'DataTableSortManager'\n\n// SortRow:DnD-enabled row。GripVertical 為 drag listener handle(對齊 Notion / Airtable 拖曳 idiom)。\nfunction SortRow({\n  sort, optionsForRow, onChangeId, onChangeDir, onRemove,\n}: {\n  sort: { id: string; desc: boolean }\n  optionsForRow: SelectOption[]\n  onChangeId: (v: string) => void\n  onChangeDir: (v: string) => void\n  onRemove: () => void\n}) {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: sort.id })\n  // 對齊 lib/drag-visual.ts SSOT:source dim 用 `--opacity-disabled` token(不 hardcode 0.5)\n  const style: React.CSSProperties = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n    ...dragSourceStyle(isDragging),\n  }\n  // **#5 fix(2026-05-04)**:row 內水平 gap = gap-2 (8px),layoutSpace 規則 5 緊密相關\n  // SurfaceBody row↔row vertical 仍 tight(12)— 不同 row 不緊密\n  return (\n    <div ref={setNodeRef} style={style} className=\"flex items-center gap-2\">\n      <ItemInlineActionButton\n        icon={GripVertical}\n        size=\"sm\"\n        aria-label=\"拖曳重排\"\n        className={dragHandleCursorClass}\n        {...attributes}\n        {...listeners}\n      />\n      <div className=\"flex-1 min-w-0\">\n        <Select size=\"sm\" options={optionsForRow} value={sort.id} onChange={onChangeId} />\n      </div>\n      <div className=\"w-32 shrink-0\">\n        {/* minRows={2} — 升冪/降冪只 2 選項,顯式縮 menu 高度(Q5) */}\n        <Select size=\"sm\" options={DIRECTION_OPTIONS} value={sort.desc ? 'desc' : 'asc'} onChange={onChangeDir} minRows={2} />\n      </div>\n      {/* Trash 用 text Button(Q4 對齊 filter panel)— form-control row 必 Field 同高 */}\n      <Button variant=\"text\" size=\"sm\" iconOnly startIcon={Trash2} aria-label=\"刪除\" onClick={onRemove} />\n    </div>\n  )\n}\n"],"names":["XIcon"],"mappings":"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"}
+{"version":3,"file":"data-table-sort-manager.js","sources":["../../../src/components/DataTable/data-table-sort-manager.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// same-row-mixed-allow: header chrome corner buttons(refresh/close)跟 row inline actions(drag/trash)不在同 row\nimport * as React from 'react'\nimport { Plus, Trash2, X as XIcon, RotateCcw, GripVertical } from 'lucide-react'\nimport type { ColumnDef, SortingState } from '@tanstack/react-table'\nimport { DndContext, closestCenter, type DragEndEvent } from '@dnd-kit/core'\nimport { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { cn } from '@/lib/utils'\nimport { dragSourceStyle, dragHandleCursorClass } from '@/design-system/lib/drag-visual'\nimport { Button } from '@/design-system/components/Button/button'\nimport { Select, type SelectOption } from '@/design-system/components/Select/select'\nimport { SurfaceHeader, SurfaceBody, COMPACT_HEADER_SLOT } from '@/design-system/patterns/overlay-surface/overlay-surface'\nimport { ButtonDivider } from '@/design-system/components/Button/button-group'\nimport { PopoverTitle, PopoverClose } from '@/design-system/components/Popover/popover'\nimport { ItemInlineActionButton } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { getColumnId, getColumnLabel } from './lib/column-meta'\n\n/**\n * DataTableSortManager — Notion-style 多欄排序管理 panel\n *\n * 對齊 ref/進階篩選/sort.png 設計:\n *   Header(title + refresh + close)/ list(field + direction + delete + reorder)/\n *   footer(+ 加排序)。\n *\n * Source-of-truth: TanStack `SortingState`(同 `useReactTable.state.sorting`)。\n * 跟 cell click sort 共享 state — single source-of-truth across cell + panel。\n *\n * Reorder:DnD(useSortable + GripVertical handle,見下方 SortRow)——原 MVP ↑/↓ button 已退役。\n */\n\ninterface SortColumn {\n  id: string\n  label: string\n  enableSorting?: boolean\n}\n\nexport interface DataTableSortManagerProps<TData> {\n  /** 可排序欄位來源(讀 columnDef.header / id);會自動排除 enableSorting=false */\n  columns: ColumnDef<TData, any>[]\n  /** 當前排序 state(TanStack SortingState) */\n  sorting: SortingState\n  /** 排序變更 callback */\n  onSortingChange: (next: SortingState) => void\n  /** Refresh 按鈕點擊(可選 — 重置或外部 refetch) */\n  onReset?: () => void\n  /** Close 按鈕點擊(若有 — 通常是包在 Popover 外層的 close 行為) */\n  onClose?: () => void\n  className?: string\n}\n\nfunction extractColumns<TData>(columns: ColumnDef<TData, any>[]): SortColumn[] {\n  const out: SortColumn[] = []\n  for (const col of columns) {\n    const id = getColumnId(col)\n    if (!id || id === '__select__') continue\n    if (col.enableSorting === false) continue\n    out.push({ id, label: getColumnLabel(col, id), enableSorting: true })\n  }\n  return out\n}\n\nconst DIRECTION_OPTIONS: SelectOption[] = [\n  { value: 'asc', label: '升冪' },\n  { value: 'desc', label: '降冪' },\n]\n\nexport function DataTableSortManager<TData>({\n  columns,\n  sorting,\n  onSortingChange,\n  onReset,\n  onClose,\n  className,\n}: DataTableSortManagerProps<TData>) {\n  const sortableColumns = React.useMemo(() => extractColumns(columns), [columns])\n  const fieldOptions: SelectOption[] = React.useMemo(\n    () => sortableColumns.map((c) => ({ value: c.id, label: c.label })),\n    [sortableColumns]\n  )\n\n  const updateAt = (index: number, patch: Partial<{ id: string; desc: boolean }>) => {\n    const next = sorting.map((s, i) => (i === index ? { ...s, ...patch } : s))\n    onSortingChange(next)\n  }\n  const removeAt = (index: number) => {\n    onSortingChange(sorting.filter((_, i) => i !== index))\n  }\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (!over || active.id === over.id) return\n    const oldIndex = sorting.findIndex((s) => s.id === active.id)\n    const newIndex = sorting.findIndex((s) => s.id === over.id)\n    if (oldIndex < 0 || newIndex < 0) return\n    const next = [...sorting]\n    const [moved] = next.splice(oldIndex, 1)\n    next.splice(newIndex, 0, moved)\n    onSortingChange(next)\n  }\n  const addSort = () => {\n    const used = new Set(sorting.map((s) => s.id))\n    const firstUnused = sortableColumns.find((c) => !used.has(c.id))\n    if (!firstUnused) return\n    onSortingChange([...sorting, { id: firstUnused.id, desc: false }])\n  }\n\n  // K11 fix(2026-05-04): viewport-aware scroll chain invariant — 詳 overlay-surface.spec.md\n  // 2026-05-23 Phase A.4 Decision 2: w-[480px] → token `--data-table-sort-panel-width`(SSOT in uiSize.css)\n  return (\n    <div className={cn('flex flex-col h-full min-h-0 w-[var(--data-table-sort-panel-width)]', className)}>\n      {/* Popover 派輕量 chrome — slot 走 COMPACT_HEADER_SLOT(=21,衍生自 PopoverTitle text-body line-box),header 自然 ~45px */}\n      <SurfaceHeader className={COMPACT_HEADER_SLOT}>\n        <PopoverTitle className=\"flex-1\">排序</PopoverTitle>\n        {onReset && sorting.length > 0 && (\n          <>\n            <Button variant=\"text\" size=\"sm\" iconOnly startIcon={RotateCcw} aria-label=\"重置\" onClick={onReset} />\n            {onClose && <ButtonDivider />}\n          </>\n        )}\n        {onClose && (\n          <PopoverClose asChild>\n            <Button data-dismiss iconOnly dismiss size=\"sm\" startIcon={XIcon} aria-label=\"關閉\" onClick={onClose} />\n          </PopoverClose>\n        )}\n      </SurfaceHeader>\n\n      {/* Body — 條件 list + inline 加排序 CTA(對齊 filter panel canonical Q3+Q6,2026-05-04)\n          無條件時 CTA 直接顯示,不需要 Empty 大區塊 */}\n      <SurfaceBody className=\"flex flex-col gap-[var(--layout-space-tight)]\">\n        {sorting.length > 0 && (\n          <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>\n            <SortableContext items={sorting.map(s => s.id)} strategy={verticalListSortingStrategy}>\n              {sorting.map((sort, index) => {\n                const usedByOthers = new Set(sorting.filter((_, i) => i !== index).map((s) => s.id))\n                const optionsForRow = fieldOptions.filter((o) => !usedByOthers.has(o.value))\n                return (\n                  <SortRow\n                    key={sort.id}\n                    sort={sort}\n                    optionsForRow={optionsForRow}\n                    onChangeId={(v) => updateAt(index, { id: v })}\n                    onChangeDir={(v) => updateAt(index, { desc: v === 'desc' })}\n                    onRemove={() => removeAt(index)}\n                  />\n                )\n              })}\n            </SortableContext>\n          </DndContext>\n        )}\n\n        {/* B1 加排序 → tertiary,parallel filter「加篩選」(root-level CTA 對等視覺重量) */}\n        <div>\n          <Button\n            variant=\"tertiary\"\n            size=\"sm\"\n            startIcon={Plus}\n            onClick={addSort}\n            disabled={sorting.length >= sortableColumns.length}\n          >\n            加排序\n          </Button>\n        </div>\n      </SurfaceBody>\n    </div>\n  )\n}\n\nDataTableSortManager.displayName = 'DataTableSortManager'\n\n// SortRow:DnD-enabled row。GripVertical 為 drag listener handle(對齊 Notion / Airtable 拖曳 idiom)。\nfunction SortRow({\n  sort, optionsForRow, onChangeId, onChangeDir, onRemove,\n}: {\n  sort: { id: string; desc: boolean }\n  optionsForRow: SelectOption[]\n  onChangeId: (v: string) => void\n  onChangeDir: (v: string) => void\n  onRemove: () => void\n}) {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: sort.id })\n  // 對齊 lib/drag-visual.ts SSOT:source dim 用 `--opacity-disabled` token(不 hardcode 0.5)\n  const style: React.CSSProperties = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n    ...dragSourceStyle(isDragging),\n  }\n  // **#5 fix(2026-05-04)**:row 內水平 gap = gap-2 (8px),layoutSpace 規則 5 緊密相關\n  // SurfaceBody row↔row vertical 仍 tight(12)— 不同 row 不緊密\n  return (\n    <div ref={setNodeRef} style={style} className=\"flex items-center gap-2\">\n      <ItemInlineActionButton\n        icon={GripVertical}\n        size=\"sm\"\n        aria-label=\"拖曳重排\"\n        className={dragHandleCursorClass}\n        {...attributes}\n        {...listeners}\n      />\n      <div className=\"flex-1 min-w-0\">\n        <Select size=\"sm\" aria-label=\"排序欄位\" options={optionsForRow} value={sort.id} onChange={onChangeId} />\n      </div>\n      <div className=\"w-32 shrink-0\">\n        {/* minRows={2} — 升冪/降冪只 2 選項,顯式縮 menu 高度(Q5) */}\n        <Select size=\"sm\" aria-label=\"排序方向\" options={DIRECTION_OPTIONS} value={sort.desc ? 'desc' : 'asc'} onChange={onChangeDir} minRows={2} />\n      </div>\n      {/* Trash 用 text Button(Q4 對齊 filter panel)— form-control row 必 Field 同高 */}\n      <Button variant=\"text\" size=\"sm\" iconOnly startIcon={Trash2} aria-label=\"刪除\" onClick={onRemove} />\n    </div>\n  )\n}\n"],"names":["XIcon"],"mappings":"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"}

package/dist/components/DataTable/data-table.d.ts

@@ -26,7 +26,7 @@ export interface DataTableProps<TData> extends Omit<React.HTMLAttributes<HTMLDiv
     /**
      * 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 分行渲。
      *
      * **使用建議**:

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

@@ -1 +1 @@
-{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/data-table.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/data-table.tsx"],"names":[],"mappings":"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"}

package/dist/components/DataTable/data-table.js

@@ -189,12 +189,24 @@ function DraggableHeaderCell({
   const childProps = children.props;
   const { role: _draggableRole, ...draggableAttrs } = draggable.attributes;
   const indicatorClass = dropIndicatorSide === "before" ? dropIndicatorColumn.pseudoBefore : dropIndicatorSide === "after" ? dropIndicatorColumn.pseudoAfter : "";
+  const rawListeners = draggable.listeners;
+  const guardedListeners = rawListeners ? {
+    ...rawListeners,
+    onKeyDown: (e) => {
+      var _a;
+      const target = e.target;
+      if (target !== e.currentTarget && target.closest('button, a, input, select, textarea, [role="menuitem"], [role="separator"]')) {
+        return;
+      }
+      (_a = rawListeners.onKeyDown) == null ? void 0 : _a.call(rawListeners, e);
+    }
+  } : rawListeners;
   return React.cloneElement(children, {
     ref: setRefs,
     style: { ...childProps.style ?? {}, ...dragStyle },
     "data-column-id": id,
     "data-column-locked": isLocked || void 0,
-    ...disabled ? {} : { ...draggableAttrs, ...draggable.listeners },
+    ...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。
@@ -326,7 +338,6 @@ const MemoCellSlot = React.memo(function MemoCellSlot2({
   size,
   autoRowHeight,
   isEditable,
-  isDisabled,
   onCommitCell,
   onCancelCell,
   onCellCommitLive,
@@ -335,9 +346,7 @@ const MemoCellSlot = React.memo(function MemoCellSlot2({
   const onCommit = React.useCallback((next) => onCommitCell(rowId, colId, next), [onCommitCell, rowId, colId]);
   const onCommitLive = React.useCallback((next) => onCellCommitLive == null ? void 0 : onCellCommitLive(rowId, colId, next), [onCellCommitLive, rowId, colId]);
   const onCancel = React.useCallback(() => onCancelCell(rowId, colId), [onCancelCell, rowId, colId]);
-  const onRequestEdit = React.useCallback(() => {
-    if (!isDisabled) onEnterEdit(rowId, colId);
-  }, [onEnterEdit, isDisabled, rowId, colId]);
+  const onRequestEdit = React.useCallback(() => onEnterEdit(rowId, colId), [onEnterEdit, rowId, colId]);
   return /* @__PURE__ */ jsx(
     Cell,
     {
@@ -347,7 +356,6 @@ const MemoCellSlot = React.memo(function MemoCellSlot2({
       size,
       autoRowHeight,
       isEditable,
-      isDisabled,
       onCommit,
       onCommitLive,
       onCancel,
@@ -460,18 +468,9 @@ function DataTableInner({
     },
     []
   );
-  const isCellDisabled = React.useCallback(
-    // any-allow: free-form consumer meta — same rationale as L143 renderTypedValue
-    (meta, row) => {
-      const d = meta == null ? void 0 : meta.disabled;
-      if (typeof d === "function") return d(row) === true;
-      return d === true;
-    },
-    []
-  );
   const canEditCell = React.useCallback(
-    (meta, row) => isCellEditable(meta, row) && !isCellDisabled(meta, row),
-    [isCellEditable, isCellDisabled]
+    (meta, row) => isCellEditable(meta, row),
+    [isCellEditable]
   );
   const [sorting, setSorting] = React.useState(((_a = tableOptions == null ? void 0 : tableOptions.state) == null ? void 0 : _a.sorting) ?? []);
   const [columnVisibility, setColumnVisibility] = useControllable({
@@ -775,12 +774,11 @@ function DataTableInner({
     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;
     if (colType) {
       const Cell = resolveCellComponent(colType);
-      const cellMode = experimentalActiveEditorController && isEditingThisCell ? "display" : isEditingThisCell && !disabled ? "edit" : "display";
+      const cellMode = experimentalActiveEditorController && isEditingThisCell ? "view" : isEditingThisCell ? "edit" : "view";
       content = /* @__PURE__ */ jsx(
         MemoCellSlot,
         {
@@ -793,7 +791,6 @@ function DataTableInner({
           size,
           autoRowHeight,
           isEditable: editable,
-          isDisabled: disabled,
           onCommitCell: commitCell,
           onCancelCell: cancelCellEdit,
           onCellCommitLive: onCellCommit,
@@ -891,11 +888,10 @@ function DataTableInner({
     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);
     const cellSpreadsheetId = `${cellRowId}:${cellColId}`;
     const isSelectedCell = spreadsheetMode && selectedCellId === cellSpreadsheetId;
-    const onEditableCellClick = cellEditable && !cellDisabled && colType !== "boolean" && colType !== "url" && !isEditingThisCell ? (e) => {
+    const onEditableCellClick = cellEditable && colType !== "boolean" && colType !== "url" && !isEditingThisCell ? (e) => {
       if (spreadsheetMode) {
         if (e.shiftKey && rangeAnchor != null) {
           setRangeFocus(cellSpreadsheetId);
@@ -949,7 +945,6 @@ function DataTableInner({
         "data-column-id": cell.column.id,
         "data-cell-id": `${cell.row.id}:${cell.column.id}`,
         "data-range-cell": spreadsheetMode && rangeCellIdSet.has(`${cell.row.id}:${cell.column.id}`) ? "" : void 0,
-        "data-cell-disabled": cellDisabled ? "true" : void 0,
         "aria-describedby": cellErrorId,
         "aria-invalid": hasCellError || void 0,
         className: cn(
@@ -988,19 +983,16 @@ function DataTableInner({
           // 跟 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)
+          // 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」)。
@@ -1238,7 +1230,7 @@ function DataTableInner({
     },
     // 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,
@@ -1386,16 +1378,34 @@ function DataTableInner({
             const colOptIn = (colMeta == null ? void 0 : colMeta.resizable) !== false;
             const isResizable = enableColumnResize && !isSystemColumn(colId) && colOptIn;
             const isResizing = (_b2 = (_a3 = header.column).getIsResizing) == null ? void 0 : _b2.call(_a3);
+            const effectiveMinWidth = header.column.columnDef.minSize ?? MIN_COLUMN_WIDTH;
+            const currentWidth = Math.round(header.column.getSize());
+            const RESIZE_KEY_STEP = 16;
             if (!showDivider && !isResizable) return null;
             return /* @__PURE__ */ jsx(
               "span",
               {
                 role: isResizable ? "separator" : void 0,
                 "aria-orientation": isResizable ? "vertical" : void 0,
-                "aria-label": isResizable ? "拖曳調整欄寬" : void 0,
+                "aria-label": isResizable ? "調整欄寬" : void 0,
+                tabIndex: isResizable ? 0 : void 0,
+                "aria-valuenow": isResizable ? currentWidth : void 0,
+                "aria-valuemin": isResizable ? effectiveMinWidth : void 0,
+                "aria-valuetext": isResizable ? `${currentWidth}px` : void 0,
+                onKeyDown: isResizable ? (e) => {
+                  let next = 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;
+                  e.preventDefault();
+                  e.stopPropagation();
+                  table.setColumnSizing((prev) => ({ ...prev, [colId]: next }));
+                } : void 0,
                 className: cn(
                   "group/resize absolute top-0 bottom-0 right-0 -mr-[3px] w-[7px]",
-                  isResizable && "cursor-col-resize select-none"
+                  isResizable && "cursor-col-resize select-none",
+                  isResizable && "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring"
                 ),
                 onPointerDownCapture: isResizable ? (e) => {
                   var _a4;
@@ -1627,7 +1637,9 @@ function DataTableInner({
               ref: centerBodyRef,
               "data-datatable-hscroll": true,
               "data-datatable-panel": "center",
-              className: "flex-1 min-w-0 overflow-x-auto overflow-y-auto",
+              tabIndex: enabled || spreadsheetMode ? void 0 : 0,
+              "aria-label": enabled || spreadsheetMode ? void 0 : "表格內容,可捲動",
+              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",
               style: isFillHeight && bodyMaxHeight != null ? { maxHeight: bodyMaxHeight } : hasHeightConstraint ? { maxHeight: height } : void 0,
               onScroll: onCenterBodyScroll,
               children: /* @__PURE__ */ jsx("div", { style: { minWidth: centerColsWidth }, children: renderBodyRows(centerCols, true, false) })