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

package/dist/components/DataTable/data-table-filter-value-picker.js

@@ -0,0 +1,187 @@
+import { jsx } from "react/jsx-runtime";
+import { Select } from "../Select/select.js";
+import { Combobox } from "../Combobox/combobox.js";
+import { Input } from "../Input/input.js";
+import { NumberInput } from "../NumberInput/number-input.js";
+import { DatePickerRange, DatePicker as DatePickerWithRange } from "../DatePicker/date-picker.js";
+import { PeoplePicker } from "../PeoplePicker/people-picker.js";
+import { DATE_RELATIVE_OPTIONS, DATE_RELATIVE_GROUPS } from "./filter-operators.js";
+function FilterValuePicker({
+  shape,
+  value,
+  onChange,
+  colInfo,
+  disabled,
+  ariaLabel,
+  className
+}) {
+  if (!shape || disabled) {
+    return /* @__PURE__ */ jsx(Input, { size: "sm", value: "", onChange: () => {
+    }, placeholder: "輸入值…", disabled: true, "aria-label": ariaLabel, className });
+  }
+  switch (shape) {
+    case "none":
+      return null;
+    case "text":
+      return /* @__PURE__ */ jsx(
+        Input,
+        {
+          size: "sm",
+          value: String(value ?? ""),
+          onChange: (e) => onChange(e.target.value),
+          placeholder: "輸入值…",
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ jsx(
+        NumberInput,
+        {
+          size: "sm",
+          value: typeof value === "number" ? value : null,
+          onChange: (v) => onChange(v ?? ""),
+          placeholder: "輸入數字…",
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    case "date_single":
+      return /* @__PURE__ */ jsx(
+        DatePickerWithRange,
+        {
+          size: "sm",
+          value: typeof value === "string" ? value : null,
+          onChange: (v) => onChange(v ?? ""),
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    case "date_range":
+      return /* @__PURE__ */ jsx(
+        DatePickerRange,
+        {
+          size: "sm",
+          value: Array.isArray(value) && value.length === 2 ? value : null,
+          onChange: (v) => onChange(v),
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    case "date_relative": {
+      const opts = DATE_RELATIVE_OPTIONS.map((o) => ({
+        value: o.value,
+        label: o.label,
+        group: o.group
+      }));
+      return /* @__PURE__ */ jsx(
+        Select,
+        {
+          size: "sm",
+          options: opts,
+          groups: DATE_RELATIVE_GROUPS,
+          value: String(value ?? ""),
+          onChange: (v) => onChange(v),
+          placeholder: "選擇相對日期",
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    }
+    case "select_single": {
+      const opts = ((colInfo == null ? void 0 : colInfo.options) ?? []).map((o) => ({
+        value: o.value,
+        label: o.label
+      }));
+      return /* @__PURE__ */ jsx(
+        Select,
+        {
+          size: "sm",
+          options: opts,
+          value: String(value ?? ""),
+          onChange: (v) => onChange(v),
+          placeholder: "選擇值",
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    }
+    case "select_multi": {
+      const opts = ((colInfo == null ? void 0 : colInfo.options) ?? []).map((o) => ({
+        value: o.value,
+        label: o.label
+      }));
+      const arr = Array.isArray(value) ? value : [];
+      return /* @__PURE__ */ jsx(
+        Combobox,
+        {
+          size: "sm",
+          options: opts,
+          value: arr,
+          onChange: (v) => onChange(v),
+          placeholder: "選擇值…",
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    }
+    case "datetime_single":
+      return /* @__PURE__ */ jsx(
+        DatePickerWithRange,
+        {
+          size: "sm",
+          showTime: true,
+          value: typeof value === "string" ? value : null,
+          onChange: (v) => onChange(v ?? ""),
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    case "datetime_range":
+      return /* @__PURE__ */ jsx(
+        DatePickerRange,
+        {
+          size: "sm",
+          showTime: true,
+          value: Array.isArray(value) && value.length === 2 ? value : null,
+          onChange: (v) => onChange(v),
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    case "person_single": {
+      const v = value;
+      return /* @__PURE__ */ jsx(
+        PeoplePicker,
+        {
+          size: "sm",
+          value: v ?? null,
+          people: (colInfo == null ? void 0 : colInfo.people) ?? [],
+          onChange: (next) => onChange(next[0] ?? null),
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    }
+    case "person_multi": {
+      const v = Array.isArray(value) ? value : [];
+      return /* @__PURE__ */ jsx(
+        PeoplePicker,
+        {
+          size: "sm",
+          value: v,
+          people: (colInfo == null ? void 0 : colInfo.people) ?? [],
+          onChange: (next) => onChange(next),
+          "aria-label": ariaLabel,
+          className
+        }
+      );
+    }
+    default:
+      return null;
+  }
+}
+export {
+  FilterValuePicker
+};
+//# sourceMappingURL=data-table-filter-value-picker.js.map

package/dist/components/DataTable/data-table-filter-value-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-filter-value-picker.js","sources":["../../../src/components/DataTable/data-table-filter-value-picker.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved(2026-07-14 自 data-table-filter-panel.tsx 拆檔搬移,原檔級 escape 隨段落帶入)。\n// @internal — DS-internal 單元(FilterValuePicker value-picker switcher,只被\n// data-table-filter-group.tsx FilterRow 消費);不隨 index.ts re-export 進 npm public surface。\n// ────────────────────────────── 消費的 SSOT ──────────────────────────────\n// - Field controls(Family 4,統一 size=\"sm\"):Input / NumberInput / Select / Combobox /\n//   DatePicker + DatePickerRange(showTime)/ PeoplePicker — 按 ValueShape dispatch\n//   (ValueShape ↔ picker 對照 canonical:./data-table.spec.md「三、Operator × ValueShape SSOT」)\n// - className 直接 forward 給 inner Field control(不另開 wrapper div)—\n//   field-control-group.spec.md「forward className」canonical(2026-05-04 #2 fix)\n// - Operator / ValueShape SSOT:./filter-operators.ts(DATE_RELATIVE_OPTIONS / DATE_RELATIVE_GROUPS)\n// - Person pool:PeoplePicker PersonValue(對齊 cell-registry meta.people SSOT)\n// 設計規則:./filter-operators.spec.md「ValueShape canonical」+ ./data-table.spec.md「進階篩選」段\n\nimport { Select, type SelectOption } from '@/design-system/components/Select/select'\nimport { Combobox } from '@/design-system/components/Combobox/combobox'\nimport { Input } from '@/design-system/components/Input/input'\nimport { NumberInput } from '@/design-system/components/NumberInput/number-input'\nimport { DatePicker, DatePickerRange } from '@/design-system/components/DatePicker/date-picker'\nimport { PeoplePicker } from '@/design-system/components/PeoplePicker/people-picker'\nimport type { PersonValue } from '@/design-system/components/PeoplePicker/person-display'\nimport {\n  DATE_RELATIVE_OPTIONS,\n  DATE_RELATIVE_GROUPS,\n  type ValueShape,\n} from './filter-operators'\n\n// ── FilterValuePicker(value-picker switcher per ValueShape)────────────────\n//\n// 2026-05-03 M21 retract:本 helper 原獨立檔 filter-value-picker.tsx(187 行 / 1 consumer),\n// claim「未來 inline filter UI 共用」= premature abstraction → inline 回 panel。\n// 2026-07-14 拆檔 refactor:panel 822 行過 800 hard cap(file-size escalation)→ 重新抽出為\n// @internal 私有模組(非 public API 抽象,與 M21 不衝突;consumer 仍只見 DataTableFilterPanel)。\n\nexport interface FilterValuePickerColInfo {\n  id: string\n  label: string\n  options?: Array<{ value: string; label: string }>\n  /** Person pool — person/multiPerson filter picker 用(2026-05-07 升級,SSOT 對齊 cell-registry) */\n  people?: Array<{ name: string; avatarUrl?: string; description?: string }>\n}\n\nexport interface FilterValuePickerProps {\n  shape: ValueShape | null\n  value: unknown\n  onChange: (v: unknown) => void\n  colInfo?: FilterValuePickerColInfo\n  disabled?: boolean\n  /** 用 column.label 組「{label} 篩選值」(panel 每 row 不顯式 label,a11y 必填) */\n  ariaLabel?: string\n  /** Forward 給內部 Field control 的 className(2026-05-04 #2 fix)\n   *  避免外層包 wrapper div 破壞 FieldControlGroup CSS variants(rounded radii / margin overlap) */\n  className?: string\n}\n\nexport function FilterValuePicker({\n  shape,\n  value,\n  onChange,\n  colInfo,\n  disabled,\n  ariaLabel,\n  className,\n}: FilterValuePickerProps) {\n  if (!shape || disabled) {\n    return <Input size=\"sm\" value=\"\" onChange={() => {}} placeholder=\"輸入值…\" disabled aria-label={ariaLabel} className={className} />\n  }\n\n  switch (shape) {\n    case 'none':\n      return null\n\n    case 'text':\n      return (\n        <Input\n          size=\"sm\"\n          value={String(value ?? '')}\n          onChange={(e) => onChange(e.target.value)}\n          placeholder=\"輸入值…\"\n          aria-label={ariaLabel}\n          className={className}\n        />\n      )\n\n    case 'number':\n      return (\n        <NumberInput\n          size=\"sm\"\n          value={typeof value === 'number' ? value : null}\n          onChange={(v) => onChange(v ?? '')}\n          placeholder=\"輸入數字…\"\n          aria-label={ariaLabel}\n          className={className}\n        />\n      )\n\n    case 'date_single':\n      return (\n        <DatePicker\n          size=\"sm\"\n          value={typeof value === 'string' ? value : null}\n          onChange={(v) => onChange(v ?? '')}\n          aria-label={ariaLabel}\n          className={className}\n        />\n      )\n\n    case 'date_range':\n      return (\n        <DatePickerRange\n          size=\"sm\"\n          value={Array.isArray(value) && value.length === 2\n            ? (value as [string | null, string | null])\n            : null}\n          onChange={(v) => onChange(v)}\n          aria-label={ariaLabel}\n          className={className}\n        />\n      )\n\n    case 'date_relative': {\n      // 群組分類:Past / Current / Future(對齊 Linear / Notion idiom),走 Select.groups → SelectMenu\n      const opts: SelectOption[] = DATE_RELATIVE_OPTIONS.map((o) => ({\n        value: o.value,\n        label: o.label,\n        group: o.group,\n      }))\n      return (\n        <Select\n          size=\"sm\"\n          options={opts}\n          groups={DATE_RELATIVE_GROUPS as unknown as Array<{ key: string; label: string }>}\n          value={String(value ?? '')}\n          onChange={(v) => onChange(v)}\n          placeholder=\"選擇相對日期\"\n          aria-label={ariaLabel}\n          className={className}\n        />\n      )\n    }\n\n    case 'select_single': {\n      const opts: SelectOption[] = (colInfo?.options ?? []).map((o) => ({\n        value: o.value,\n        label: o.label,\n      }))\n      return (\n        <Select\n          size=\"sm\"\n          options={opts}\n          value={String(value ?? '')}\n          onChange={(v) => onChange(v)}\n          placeholder=\"選擇值\"\n          aria-label={ariaLabel}\n          className={className}\n        />\n      )\n    }\n\n    case 'select_multi': {\n      const opts = (colInfo?.options ?? []).map((o) => ({\n        value: o.value,\n        label: o.label,\n      }))\n      const arr = Array.isArray(value) ? (value as string[]) : []\n      return (\n        <Combobox\n          size=\"sm\"\n          options={opts}\n          value={arr}\n          onChange={(v) => onChange(v)}\n          placeholder=\"選擇值…\"\n          aria-label={ariaLabel}\n          className={className}\n        />\n      )\n    }\n\n    case 'datetime_single':\n      return (\n        <DatePicker\n          size=\"sm\"\n          showTime\n          value={typeof value === 'string' ? value : null}\n          onChange={(v) => onChange(v ?? '')}\n          aria-label={ariaLabel}\n          className={className}\n        />\n      )\n\n    case 'datetime_range':\n      return (\n        <DatePickerRange\n          size=\"sm\"\n          showTime\n          value={Array.isArray(value) && value.length === 2\n            ? (value as [string | null, string | null])\n            : null}\n          onChange={(v) => onChange(v)}\n          aria-label={ariaLabel}\n          className={className}\n        />\n      )\n\n    // person_single / person_multi — 走 PeoplePicker(2026-05-07 升級,對齊 cell-registry SSOT)。\n    // colInfo.people 來自 column meta.people。Filter value:\n    //   - person_single:存 PersonValue | null(picker emit array,我們取 [0])\n    //   - person_multi:存 PersonValue[]\n    case 'person_single': {\n      const v = value as PersonValue | null | undefined\n      return (\n        <PeoplePicker\n          size=\"sm\"\n          value={v ?? null}\n          people={colInfo?.people ?? []}\n          onChange={(next) => onChange(next[0] ?? null)}\n          aria-label={ariaLabel}\n          className={className}\n        />\n      )\n    }\n    case 'person_multi': {\n      const v = Array.isArray(value) ? (value as PersonValue[]) : []\n      return (\n        <PeoplePicker\n          size=\"sm\"\n          value={v}\n          people={colInfo?.people ?? []}\n          onChange={(next) => onChange(next)}\n          aria-label={ariaLabel}\n          className={className}\n        />\n      )\n    }\n    default:\n      return null\n  }\n}\n"],"names":["DatePicker"],"mappings":"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"}

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

@@ -26,15 +26,16 @@ interface CellRect {
 interface DataTableInteractionLayerProps {
     /** Flag default false:不破現有 outline。enable 後 hover/editor 走 overlay。 */
     enabled: boolean;
-    /** Container ref;layer absolute position 對 container origin */
+    /** Container ref;geometry source(getCellRect 由此 query cell DOM)。layer root 本身是
+     *  position:fixed inset:0 viewport-anchor(見 render),非 container-origin absolute */
     containerRef: React.RefObject<HTMLDivElement | null>;
     /** Per Contract 15:`cellClickEntersEdit` predicate;hover overlay 顯示與否 */
     cellClickEntersEdit?: (cellId: CellId) => boolean;
     /**
-     * Slice D Step 3 scaffold(2026-05-10):active editor cell id。null = 無 active editor。
-     * 當前只 render rect placeholder layer(z-index 3,higher than hover ring z-index 1)。
-     * Future:ActiveEditorHost portal active edit Field per Contract 8 「two paint owners」。
-     * Wire-up 走 codex Q-7 string-first canary(text cell first,picker types 漸進)。
+     * Active editor cell id。null = 無 active editor。
+     * 已接線(Slice D Step 5 完成,2026-07-14 docblock 對齊):activeEditorEnabled +
+     * activeEditorCellId + activeEditorRender 齊 → ActiveEditorHost(z 3)portal render
+     * 真 edit Field(per Contract 8「two paint owners」)。
      */
     activeEditorCellId?: CellId | null;
     /**
@@ -51,12 +52,6 @@ interface DataTableInteractionLayerProps {
      * Layer renders solid border SelectionRect(per user「不要 dash 直接實的就好」)。
      */
     selectedCellId?: CellId | null;
-    /**
-     * Slice D Step 4 range support(per user「應該支援 range」+ codex Q2.1 Airtable/AG Grid
-     * cite):range cell IDs from anchor↔focus rectangle。Layer renders bg-fill RangeRect
-     * (z 1,bg `--primary-subtle`)+ selection border on focus cell。
-     */
-    rangeCellIds?: CellId[];
     /**
      * Slice D Step 5(D.3 portal Field,2026-05-10 user 拍板「在乎完美乾淨」+ codex Q6.1
      * 撤回 defer):active editor render callback。當 activeEditorEnabled + activeEditorCellId
@@ -69,11 +64,12 @@ interface DataTableInteractionLayerProps {
     activeEditorRender?: (cellId: CellId, rect: CellRect) => React.ReactNode;
 }
 /**
- * Singleton interaction layer。
+ * Singleton interaction layer(全 sub-layer 已接線;2026-07-14 docblock 對齊實作)。
  *
- * Slice D Step 1A:HoverCellRect only。
- * Slice D Step 2/3/4:SelectionRect / ActiveEditorHost / RangeRect 漸進加入。
+ * 現況:HoverCellRect(z 1)+ SelectionRing(z 2)+ ActiveEditorHost(z 3,portal edit Field);
+ * range 視覺走 cell 自身 CSS `[data-range-cell]`(RangeRect / rangeCellIds prop 已 retire)。
+ * layer root = position:fixed inset:0 viewport-anchor,pointerEvents:none(僅 ActiveEditorHost 開 auto)。
  */
-export declare function DataTableInteractionLayer({ enabled, containerRef, cellClickEntersEdit, activeEditorCellId, activeEditorEnabled, activeEditorRender, selectedCellId, rangeCellIds: _rangeCellIds, }: DataTableInteractionLayerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function DataTableInteractionLayer({ enabled, containerRef, cellClickEntersEdit, activeEditorCellId, activeEditorEnabled, activeEditorRender, selectedCellId, }: DataTableInteractionLayerProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=data-table-interaction-layer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-interaction-layer.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/data-table-interaction-layer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,MAAM,GAAG,MAAM,CAAA;AAEpB,UAAU,QAAQ;IAChB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,UAAU,8BAA8B;IACtC,uEAAuE;IACvE,OAAO,EAAE,OAAO,CAAA;IAChB,+DAA+D;IAC/D,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACpD,yEAAyE;IACzE,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAA;IACjD;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAClC;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB;;;;;;;;OAQG;IACH,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAA;CACzE;AAsJD;;;;;GAKG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,mBAA2B,EAC3B,kBAAkB,EAClB,cAAqB,EAErB,YAAY,EAAE,aAAa,GAC5B,EAAE,8BAA8B,kDAqFhC"}
+{"version":3,"file":"data-table-interaction-layer.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/data-table-interaction-layer.tsx"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,MAAM,GAAG,MAAM,CAAA;AAEpB,UAAU,QAAQ;IAChB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,UAAU,8BAA8B;IACtC,uEAAuE;IACvE,OAAO,EAAE,OAAO,CAAA;IAChB;uFACmF;IACnF,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACpD,yEAAyE;IACzE,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAA;IACjD;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAClC;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B;;;;;;;;OAQG;IACH,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAA;CACzE;AAsJD;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,mBAA2B,EAC3B,kBAAkB,EAClB,cAAqB,GACtB,EAAE,8BAA8B,kDAqFhC"}

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

@@ -87,9 +87,7 @@ function DataTableInteractionLayer({
   activeEditorCellId,
   activeEditorEnabled = false,
   activeEditorRender,
-  selectedCellId = null,
-  // rangeCellIds retired 2026-05-10(outer ring 已 retire,range visual 靠 cell-bg `[data-range-cell]`)
-  rangeCellIds: _rangeCellIds
+  selectedCellId = null
 }) {
   const hoveredCellId = useHoveredCell(containerRef, enabled);
   useReactiveRect(containerRef, enabled);

package/dist/components/DataTable/data-table-interaction-layer.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-interaction-layer.js","sources":["../../../src/components/DataTable/data-table-interaction-layer.tsx"],"sourcesContent":["/**\n * DataTableInteractionLayer — Slice D Step 1A scaffold(per `.claude/planning/datatable-spreadsheet-rfc.md`)\n *\n * Singleton overlay root inside DataTable(M21 private,不抽 global pattern)。\n * Sub-layer children(2026-07-04 對齊實作;原 RFC 5-layer 清單含未實作元件):\n *   - HoverCellRect(z 1):hover 邊框,「one geometry owner, two paint owners」(Contract 8)\n *   - SelectionRing(z 2):spreadsheet mode selected cell 1px ring(CELL_RING_STYLES.selected)\n *   - ActiveEditorHost(z 3):portal active edit Field(Slice C wire-up)\n *   -(range 視覺 = CSS [data-range-cell] cell-bg,非 layer 元件;nested popup 走 Radix idiom\n *     見 active-editor-controller.ts — RangeRect / NestedPortalRegistry 元件不存在)\n *\n * Slice D Step 1A scope:\n *   - getCellRect(cellId)geometry source(per Contract 8)\n *   - HoverCellRect 1 layer 先做(Contract 8 / Contract 15 cellClickEntersEdit predicate)\n *   - 默認 disabled via `experimentalSpreadsheetOverlay` flag,不破現有 outline\n *   - 後續 Step 1B/C/D 漸進切換 + 拆 outline\n */\n\nimport * as React from 'react'\n\ntype CellId = string\n\ninterface CellRect {\n  x: number\n  y: number\n  width: number\n  height: number\n}\n\ninterface DataTableInteractionLayerProps {\n  /** Flag default false:不破現有 outline。enable 後 hover/editor 走 overlay。 */\n  enabled: boolean\n  /** Container ref;layer absolute position 對 container origin */\n  containerRef: React.RefObject<HTMLDivElement | null>\n  /** Per Contract 15:`cellClickEntersEdit` predicate;hover overlay 顯示與否 */\n  cellClickEntersEdit?: (cellId: CellId) => boolean\n  /**\n   * Slice D Step 3 scaffold(2026-05-10):active editor cell id。null = 無 active editor。\n   * 當前只 render rect placeholder layer(z-index 3,higher than hover ring z-index 1)。\n   * Future:ActiveEditorHost portal active edit Field per Contract 8 「two paint owners」。\n   * Wire-up 走 codex Q-7 string-first canary(text cell first,picker types 漸進)。\n   */\n  activeEditorCellId?: CellId | null\n  /**\n   * Slice D Step 3.x flag:啟用 ActiveEditorHost dashed scaffold rect rendering。\n   * 2026-05-10 bug fix(user 圖1 雙 ring 同時顯示):dashed scaffold 之前綁\n   * `enabled`(= experimentalSpreadsheetOverlay)→ 任何 cell 進 edit mode 就 leak\n   * 出 dashed rect。改 gate 給 `experimentalActiveEditorController`(Step 3.3 真\n   * portal Field 工作),hover overlay scope 不會看到 dashed scaffold。\n   */\n  activeEditorEnabled?: boolean\n  /**\n   * Slice D Step 4(spreadsheet semantics,2026-05-10 user 圖1 ask + RFC Contract 5):\n   * Excel-like 選取 cell ID。Click 1 select / Click 2 enter edit。\n   * Layer renders solid border SelectionRect(per user「不要 dash 直接實的就好」)。\n   */\n  selectedCellId?: CellId | null\n  /**\n   * Slice D Step 4 range support(per user「應該支援 range」+ codex Q2.1 Airtable/AG Grid\n   * cite):range cell IDs from anchor↔focus rectangle。Layer renders bg-fill RangeRect\n   * (z 1,bg `--primary-subtle`)+ selection border on focus cell。\n   */\n  rangeCellIds?: CellId[]\n  /**\n   * Slice D Step 5(D.3 portal Field,2026-05-10 user 拍板「在乎完美乾淨」+ codex Q6.1\n   * 撤回 defer):active editor render callback。當 activeEditorEnabled + activeEditorCellId\n   * truthy → layer call this 拿 React node(已 bind value/onCommit/onCancel from controller),\n   * 在 ActiveEditorHost portal(z 3,float rect)render 之。\n   *\n   * Per codex Q6.2 outline:cell 永遠 mode=\"display\"(SSOT preserved);portal host 渲\n   * mode=\"edit\" 同 registry component;float pass-through + z-index 3 cover display below。\n   */\n  activeEditorRender?: (cellId: CellId, rect: CellRect) => React.ReactNode\n}\n\n/**\n * `getCellRect(cellId)` geometry source(per Contract 8)。\n *\n * 從 DOM 量(per-call `getBoundingClientRect()`)而非 layoutCache,因為:\n *   1. cell DOM 是 React-rendered,getBoundingClientRect 永遠是 source of truth\n *   2. layoutCache 需另寫 invalidation logic,added complexity\n *   3. Hover overlay re-render 頻率低(per cell hover,不是 per frame)\n *\n * Float coords pass-through — no rounding / no snap(v3 fix,見下方 v3 註解;原 RFC 0.5px snap 已撤)。\n */\nfunction getCellRect(containerEl: HTMLElement | null, cellId: CellId): CellRect | null {\n  if (!containerEl) return null\n  const cellEl = containerEl.querySelector<HTMLElement>(`[data-cell-id=\"${cellId}\"]`)\n  if (!cellEl) return null\n  // Page-absolute coords for viewport-fixed layer(per Step 1C bug fix:layer\n  // 用 position:fixed,讓 paint owner 跟 reference frame 解耦 outer container 的 positioning)。\n  // 2026-05-10 v3 fix(user 圖5 SSOT consistency):**float coords no rounding**。\n  //   Cell 自身 layout 用 sub-pixel float position(CSS 不 snap to integer)— 跨 cell 累積\n  //   常見 144.328 / 244.0 / 524.172 等 fractional。任何 Math.round / floor / ceil 都引入\n  //   varying rounding error(visual audit verified:dx=0.17/0.5/0.83 不一致)。\n  //   Float pass-through + outline + outline-offset:-1px(下方 paint)→ overlay 永遠跟\n  //   cell exact pixel-perfect overlap,user verbatim「在內容起始位置不變的前提下讓\n  //   overlay 的邊框直接剛好壓住 cell 邊框」達成。\n  const rect = cellEl.getBoundingClientRect()\n  return {\n    x: rect.x,\n    y: rect.y,\n    width: rect.width,\n    height: rect.height,\n  }\n}\n\n/**\n * Issue 6 viewport clip(2026-05-10):cell 跟 panel(left/center/right)bounding rect 一起取,\n * layer 用 panel rect 當 clip viewport intersect cell rect → overlay 永不畫到 panel 外。\n *\n * Per codex 13-issues verdict:「getCellRect 找最近 scroll viewport;intersect(cellRect, viewportRect),\n * 空 → 不 render,部分 → clipped rect render。」\n *\n * 對齊 AG Grid `cellsForRangeSet` viewport-aware paint / Glide DataGrid clip helpers /\n * Notion sticky-cell virtualizer mask。\n */\ninterface CellGeometry {\n  /** Cell exact viewport rect(no rounding,float pass-through per Bug 5 SSOT) */\n  rect: CellRect\n  /** Nearest panel container rect(left/center/right body)— clip viewport for overlays */\n  clipRect: CellRect\n  /** Panel identifier(`left` / `center` / `right`)— grouped range outer ring 分段用 */\n  panel: 'left' | 'center' | 'right'\n}\n\nfunction getCellGeometry(containerEl: HTMLElement | null, cellId: CellId): CellGeometry | null {\n  if (!containerEl) return null\n  const cellEl = containerEl.querySelector<HTMLElement>(`[data-cell-id=\"${cellId}\"]`)\n  if (!cellEl) return null\n  const panelEl = cellEl.closest<HTMLElement>('[data-datatable-panel]')\n  if (!panelEl) return null\n  const panel = panelEl.dataset.datatablePanel as 'left' | 'center' | 'right'\n  const cellR = cellEl.getBoundingClientRect()\n  const panelR = panelEl.getBoundingClientRect()\n  return {\n    rect: { x: cellR.x, y: cellR.y, width: cellR.width, height: cellR.height },\n    clipRect: { x: panelR.x, y: panelR.y, width: panelR.width, height: panelR.height },\n    panel,\n  }\n}\n\n\n/**\n * Reactive rect sync hook — 確保 overlay rect 跨 RWD / scroll / resize 永遠對齊 cell(2026-05-10\n * user 拍板「所有 overlay 在各種 RWD 和捲動時都能處在正確位置上」)。\n *\n * 監聽 3 source(rAF coalesce 避 frame storm):\n *   1. window scroll(capture mode 抓 nested table body scroll + page scroll)\n *   2. window resize(viewport size change → cell width 變)\n *   3. ResizeObserver on container(column resize / table dimension 變)\n *\n * 每次事件 fire → setVersion(v+1) → 觸發 layer re-render → rect 用最新 getBoundingClientRect\n * 重算。getBoundingClientRect 本身永遠 return 當下 viewport-relative coords,沒 stale cache。\n *\n * Per codex(brief: codex-brief-rwd-future-2026-05-10):rAF coalesce 不需要 debounce,scroll\n * 跟到不延遲才對(Glide / AG Grid 同 idiom)。\n */\nfunction useReactiveRect(containerRef: React.RefObject<HTMLElement | null>, enabled: boolean) {\n  const [, setVersion] = React.useState(0)\n  React.useEffect(() => {\n    if (!enabled) return\n    let rafId: number | null = null\n    const force = () => {\n      if (rafId !== null) return\n      rafId = requestAnimationFrame(() => {\n        rafId = null\n        setVersion((v) => v + 1)\n      })\n    }\n    window.addEventListener('scroll', force, { capture: true, passive: true })\n    window.addEventListener('resize', force, { passive: true })\n    const container = containerRef.current\n    let ro: ResizeObserver | null = null\n    if (container && typeof ResizeObserver !== 'undefined') {\n      ro = new ResizeObserver(force)\n      ro.observe(container)\n    }\n    return () => {\n      window.removeEventListener('scroll', force, { capture: true } as EventListenerOptions)\n      window.removeEventListener('resize', force)\n      if (ro) ro.disconnect()\n      if (rafId !== null) cancelAnimationFrame(rafId)\n    }\n  }, [enabled, containerRef])\n}\n\n/**\n * Hover state hook — 監聽 container hover events,track hovered cell id。\n *\n * Implementation:event delegation on container(不 per-cell mount listeners),\n * 利用 `data-cell-id` attribute + closest()。\n */\nfunction useHoveredCell(\n  containerRef: React.RefObject<HTMLElement | null>,\n  enabled: boolean,\n): CellId | null {\n  const [hoveredCellId, setHoveredCellId] = React.useState<CellId | null>(null)\n\n  React.useEffect(() => {\n    if (!enabled) { setHoveredCellId(null); return }\n    const container = containerRef.current\n    if (!container) return\n\n    const handleMouseOver = (e: MouseEvent) => {\n      const target = e.target as HTMLElement | null\n      const cellEl = target?.closest<HTMLElement>('[data-cell-id]')\n      const id = cellEl?.dataset.cellId ?? null\n      setHoveredCellId(id)\n    }\n    const handleMouseLeave = () => setHoveredCellId(null)\n\n    container.addEventListener('mouseover', handleMouseOver)\n    container.addEventListener('mouseleave', handleMouseLeave)\n    return () => {\n      container.removeEventListener('mouseover', handleMouseOver)\n      container.removeEventListener('mouseleave', handleMouseLeave)\n    }\n  }, [enabled, containerRef])\n\n  return hoveredCellId\n}\n\n/**\n * Singleton interaction layer。\n *\n * Slice D Step 1A:HoverCellRect only。\n * Slice D Step 2/3/4:SelectionRect / ActiveEditorHost / RangeRect 漸進加入。\n */\nexport function DataTableInteractionLayer({\n  enabled,\n  containerRef,\n  cellClickEntersEdit,\n  activeEditorCellId,\n  activeEditorEnabled = false,\n  activeEditorRender,\n  selectedCellId = null,\n  // rangeCellIds retired 2026-05-10(outer ring 已 retire,range visual 靠 cell-bg `[data-range-cell]`)\n  rangeCellIds: _rangeCellIds,\n}: DataTableInteractionLayerProps) {\n  const hoveredCellId = useHoveredCell(containerRef, enabled)\n  // 2026-05-10 RWD/scroll sync(per user mandate「所有 overlay 在各種 RWD 和捲動時都處在正確位置」):\n  // window scroll(capture)+ resize + ResizeObserver(container)→ rAF coalesced re-render → rect 重算\n  useReactiveRect(containerRef, enabled)\n\n  // Contract 14 state precedence:editing > selected > hover(per RFC §State Precedence Matrix)\n  const isEditingHovered = activeEditorCellId != null && activeEditorCellId === hoveredCellId\n  const isSelectedHovered = selectedCellId != null && selectedCellId === hoveredCellId\n  const shouldShowHover = enabled && hoveredCellId != null && !isEditingHovered && !isSelectedHovered\n    && (cellClickEntersEdit ? cellClickEntersEdit(hoveredCellId) : true)\n\n  // Issue 6 viewport clip(2026-05-10):每個 overlay rect 都跟最近 panel(left/center/right body)\n  // intersect。Cell scroll 出 panel viewport(H scroll / pinned 範圍)→ rect null → 不 render;\n  // 部分 → 用 ClipMask wrap 在 panel viewport 內裁切,outline 永遠在 cell 真邊但被 mask 限制視覺。\n  const hoverGeo = shouldShowHover\n    ? getCellGeometry(containerRef.current, hoveredCellId!)\n    : null\n\n  // Slice D Step 3 scaffold:ActiveEditorHost rect placeholder(per Contract 8 active editor paint owner)。\n  // 2026-05-10 bug fix:gate by `activeEditorEnabled` flag(Step 3.3 portal Field work)。\n  // Issue 6:active editor host **不**做 viewport clip(per codex「editor 必可見」),\n  // 仍走原 path 從 getCellRect 取 viewport coords。User 應將 active editor cell 滾到 viewport 內。\n  const activeEditorRect = activeEditorEnabled && activeEditorCellId != null\n    ? getCellRect(containerRef.current, activeEditorCellId)\n    : null\n\n  // Slice D Step 4(spreadsheet semantics):SelectionRect + RangeRect with viewport clip。\n  const selectedGeo = enabled && selectedCellId != null\n    ? getCellGeometry(containerRef.current, selectedCellId)\n    : null\n\n  // 2026-05-10 retire `rangeOuterRingsByPanel` calc + render(per user 抓 range 2px outer\n  // ring 不需要 — cell-bg `--primary-subtle` 已給「這些 cell 在範圍內」訊號,outer ring 是\n  // redundant visual)。`CellRangeOuterRing` primitive 已 retire(下方刪),getCellGeometry 仍\n  // 給 hover / selected overlay 使用,保留。Future 若需 outer ring 復用,從 git history 取\n  // commit `763b3ac`(Issue 6 viewport clip)的 implementation。\n\n  if (!enabled) return null\n\n  // Layer absolute fixed-position relative to viewport(避 outer container 缺 position:relative\n  // 找錯 reference frame)。getCellRect 已 return container-relative,但這裡 set top/left 用\n  // page coords 一致 — 改用 viewport-fixed 簡化。\n  return (\n    <div\n      aria-hidden\n      style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 1 }}\n    >\n      {/* HoverRing — kind=hover(1px var(--border-hover)) z 1。Wrap 在 ClipMask(panel viewport)\n          內 → cell scroll 出 panel 時 outline 自動被 mask 裁切,不會 leak 到 panel 外。 */}\n      {hoverGeo && (\n        <ClipMask clipRect={hoverGeo.clipRect}>\n          <CellRingOverlay rect={toRelRect(hoverGeo.rect, hoverGeo.clipRect)} kind=\"hover\" />\n        </ClipMask>\n      )}\n      {/* SelectionRing — kind=selected(1px var(--primary)) z 2,SSOT 同 hover wide */}\n      {selectedGeo && (\n        <ClipMask clipRect={selectedGeo.clipRect}>\n          <CellRingOverlay\n            rect={toRelRect(selectedGeo.rect, selectedGeo.clipRect)}\n            kind=\"selected\"\n            cellId={selectedCellId!}\n          />\n        </ClipMask>\n      )}\n      {/* 2026-05-10 retire RangeOuterRing(per user 抓 image 4 + verbatim「range 的 cell 本來就有顏色變化,\n          那樣就夠了,不需要再有 2px 藍色的框」)。Range visual now relies purely on cell-bg\n          (`--primary-subtle` via `[data-range-cell]` CSS in `data-table.css`)+ focus cell 1px selected\n          border。Outer 2px primary ring 從 Issue 6 ship 但 visual 太重 — bg-fill 已給「這些 cell 在範圍內」\n          訊號,outer ring 是 redundant。calc + render 皆已 retire(變數已移除;future 若需 reinstate\n          參考 git history 2026-05-10)。 */}\n      {/* {rangeOuterRingsByPanel.map((group) => (\n        <ClipMask key={group.panel} clipRect={group.clipRect}>\n          <CellRangeOuterRing rect={toRelRect(group.bbox, group.clipRect)} />\n        </ClipMask>\n      ))} */}\n      {/* ActiveEditorHost — z 3,float rect,pointerEvents:auto opaque host(NOT a ring)。\n          Issue 6:active editor 不 clip(editor 必可見) — user 滾出 viewport 自負責。 */}\n      {activeEditorRect && (\n        <ActiveEditorHost rect={activeEditorRect}>\n          {activeEditorRender ? activeEditorRender(activeEditorCellId!, activeEditorRect) : null}\n        </ActiveEditorHost>\n      )}\n    </div>\n  )\n}\n\n/**\n * `toRelRect(cellRect, clipRect)` — Issue 6 helper(2026-05-10):\n * 把 viewport coords cell rect 轉成 ClipMask containing-block 內 relative coords。\n * ClipMask 用 panel rect 做 absolute container + overflow:hidden,內部 child absolute 定位\n * 以 mask 為 reference frame,所以 cellRect.x - clipRect.x 才對齊 cell 真實位置。\n */\nfunction toRelRect(cellRect: CellRect, clipRect: CellRect): CellRect {\n  return {\n    x: cellRect.x - clipRect.x,\n    y: cellRect.y - clipRect.y,\n    width: cellRect.width,\n    height: cellRect.height,\n  }\n}\n\n// ── Private primitives(per codex unified-ring-overlay-2026-05-10 Final A')──────\n//\n// 三個 private primitive 各自 own 一個 paint concern:\n//   1. CellRingOverlay  — outline ring(hover / selected / future focus / error)\n//   2. CellRangeFill    — bg fill(range cells in spreadsheet mode)\n//   3. ActiveEditorHost — opaque host(portal Field edit)\n//\n// SSOT pattern(共 3 primitives):rect float pass-through + boxSizing:border-box +\n//   pointerEvents 視 kind / position:absolute on viewport-fixed layer。\n//\n// Token mapping 集中 `CELL_RING_STYLES`(per codex Q3 verdict 不開 global `--cell-ring-*` token,\n// 在 primitive 內 kind → semantic token mapping)。\n\nconst CELL_RING_STYLES = {\n  hover:    { width: 1, color: 'var(--border-hover)', zIndex: 1 },\n  selected: { width: 1, color: 'var(--primary)',      zIndex: 2 },\n  // future kinds(per codex Q6 outline,加 entry 即可擴展):\n  // focus:  { width: 2, color: 'var(--primary)',      zIndex: 2 },\n  // error:  { width: 1, color: 'var(--error)',        zIndex: 2 },\n} as const\n\ntype CellRingKind = keyof typeof CELL_RING_STYLES\n\nfunction rectStyle(rect: CellRect): React.CSSProperties {\n  return {\n    position: 'absolute',\n    left: rect.x,\n    top: rect.y,\n    width: rect.width,\n    height: rect.height,\n  }\n}\n\n/**\n * CellRingOverlay — paint owner for hover / selected / future focus / error rings。\n *\n * 共用 SSOT(per Bug 5 fix + codex Q2 unified primitive):\n *   - Float pass-through rect(getCellRect 不 round)\n *   - outline + outline-offset:`-${width}px` paint 在 cell 既有 border 上 in-place\n *   - boxSizing:border-box(避免 outline 影響 layout)\n *   - pointerEvents:none(透視點擊穿透)\n *   - transition:none(避 fade flash)\n */\nfunction CellRingOverlay({ rect, kind, cellId }: {\n  rect: CellRect\n  kind: CellRingKind\n  cellId?: CellId\n}) {\n  const ring = CELL_RING_STYLES[kind]\n  const dataAttr = kind === 'selected' && cellId ? { 'data-selected-cell-id': cellId } : {}\n  return (\n    <div\n      aria-hidden\n      style={{\n        ...rectStyle(rect),\n        outline: `${ring.width}px solid ${ring.color}`,\n        outlineOffset: `-${ring.width}px`,\n        boxSizing: 'border-box',\n        pointerEvents: 'none',\n        transition: 'none',\n        zIndex: ring.zIndex,\n      }}\n      {...dataAttr}\n    />\n  )\n}\n\n// `CellRangeOuterRing` primitive retired 2026-05-10(per user 「range cell 本來就有顏色變化\n// 那樣就夠了,不需要再有 2px 藍色的框」)。Source 留 git history commit `763b3ac`(Issue 6\n// viewport clip ship)若需 reinstate。\n\n/**\n * ClipMask — Issue 6 primitive(2026-05-10):panel viewport 裁切容器。\n *\n * 用在 hover / selected / range outer ring overlay,避免 cell 滾出 panel viewport(H scroll /\n * pinned 範圍)時 overlay 仍漂浮在 panel 外。Layer 是 `position: fixed` viewport-anchor,\n * ClipMask 用 panel rect 當 absolute container + `overflow: hidden` mask;child overlay 用\n * `toRelRect(cellRect, clipRect)` 算出 mask-relative 座標,在 mask 內精準定位但被 mask 邊緣裁切。\n *\n * 對齊 AG Grid `cellsForRangeSet` viewport-aware paint / Glide DataGrid clip helpers /\n * Notion sticky-cell virtualizer mask。\n */\nfunction ClipMask({ clipRect, children }: { clipRect: CellRect; children: React.ReactNode }) {\n  return (\n    <div\n      aria-hidden\n      style={{\n        position: 'absolute',\n        left: clipRect.x,\n        top: clipRect.y,\n        width: clipRect.width,\n        height: clipRect.height,\n        overflow: 'hidden',\n        pointerEvents: 'none',\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * ActiveEditorHost — opaque host for portal Field edit(D.3,Slice D Step 5)。\n *\n * Per codex Q2 verdict:不該進 CellRingOverlay primitive — 它是 host 不是 ring。\n *   - pointerEvents:auto(child Field 接收 click / keyboard)\n *   - background:var(--canvas)(opaque cover display Field below;Cell SSOT 保留)\n *   - z-index 3(above hover / selected / range)\n *   - children = activeEditorRender 的回傳 React node\n *\n * Empty children fallback = dashed debug indicator(no portal Field provided)。\n */\nfunction ActiveEditorHost({ rect, children }: { rect: CellRect; children: React.ReactNode }) {\n  if (!children) {\n    return (\n      <div\n        aria-hidden\n        style={{\n          ...rectStyle(rect),\n          pointerEvents: 'none',\n          zIndex: 3,\n          border: '1px dashed var(--primary)',\n          boxSizing: 'border-box',\n        }}\n        data-active-editor-host-scaffold\n      />\n    )\n  }\n  return (\n    <div\n      style={{\n        ...rectStyle(rect),\n        pointerEvents: 'auto',\n        zIndex: 3,\n        boxSizing: 'border-box',\n        background: 'var(--canvas)',\n      }}\n      data-active-editor-host\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;AAqFA,SAAS,YAAY,aAAiC,QAAiC;AACrF,MAAI,CAAC,YAAa,QAAO;AACzB,QAAM,SAAS,YAAY,cAA2B,kBAAkB,MAAM,IAAI;AAClF,MAAI,CAAC,OAAQ,QAAO;AAUpB,QAAM,OAAO,OAAO,sBAAA;AACpB,SAAO;AAAA,IACL,GAAG,KAAK;AAAA,IACR,GAAG,KAAK;AAAA,IACR,OAAO,KAAK;AAAA,IACZ,QAAQ,KAAK;AAAA,EAAA;AAEjB;AAqBA,SAAS,gBAAgB,aAAiC,QAAqC;AAC7F,MAAI,CAAC,YAAa,QAAO;AACzB,QAAM,SAAS,YAAY,cAA2B,kBAAkB,MAAM,IAAI;AAClF,MAAI,CAAC,OAAQ,QAAO;AACpB,QAAM,UAAU,OAAO,QAAqB,wBAAwB;AACpE,MAAI,CAAC,QAAS,QAAO;AACrB,QAAM,QAAQ,QAAQ,QAAQ;AAC9B,QAAM,QAAQ,OAAO,sBAAA;AACrB,QAAM,SAAS,QAAQ,sBAAA;AACvB,SAAO;AAAA,IACL,MAAM,EAAE,GAAG,MAAM,GAAG,GAAG,MAAM,GAAG,OAAO,MAAM,OAAO,QAAQ,MAAM,OAAA;AAAA,IAClE,UAAU,EAAE,GAAG,OAAO,GAAG,GAAG,OAAO,GAAG,OAAO,OAAO,OAAO,QAAQ,OAAO,OAAA;AAAA,IAC1E;AAAA,EAAA;AAEJ;AAkBA,SAAS,gBAAgB,cAAmD,SAAkB;AAC5F,QAAM,CAAA,EAAG,UAAU,IAAI,MAAM,SAAS,CAAC;AACvC,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,QAAS;AACd,QAAI,QAAuB;AAC3B,UAAM,QAAQ,MAAM;AAClB,UAAI,UAAU,KAAM;AACpB,cAAQ,sBAAsB,MAAM;AAClC,gBAAQ;AACR,mBAAW,CAAC,MAAM,IAAI,CAAC;AAAA,MACzB,CAAC;AAAA,IACH;AACA,WAAO,iBAAiB,UAAU,OAAO,EAAE,SAAS,MAAM,SAAS,MAAM;AACzE,WAAO,iBAAiB,UAAU,OAAO,EAAE,SAAS,MAAM;AAC1D,UAAM,YAAY,aAAa;AAC/B,QAAI,KAA4B;AAChC,QAAI,aAAa,OAAO,mBAAmB,aAAa;AACtD,WAAK,IAAI,eAAe,KAAK;AAC7B,SAAG,QAAQ,SAAS;AAAA,IACtB;AACA,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,OAAO,EAAE,SAAS,MAA8B;AACrF,aAAO,oBAAoB,UAAU,KAAK;AAC1C,UAAI,OAAO,WAAA;AACX,UAAI,UAAU,KAAM,sBAAqB,KAAK;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,SAAS,YAAY,CAAC;AAC5B;AAQA,SAAS,eACP,cACA,SACe;AACf,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAwB,IAAI;AAE5E,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,SAAS;AAAE,uBAAiB,IAAI;AAAG;AAAA,IAAO;AAC/C,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAEhB,UAAM,kBAAkB,CAAC,MAAkB;AACzC,YAAM,SAAS,EAAE;AACjB,YAAM,SAAS,iCAAQ,QAAqB;AAC5C,YAAM,MAAK,iCAAQ,QAAQ,WAAU;AACrC,uBAAiB,EAAE;AAAA,IACrB;AACA,UAAM,mBAAmB,MAAM,iBAAiB,IAAI;AAEpD,cAAU,iBAAiB,aAAa,eAAe;AACvD,cAAU,iBAAiB,cAAc,gBAAgB;AACzD,WAAO,MAAM;AACX,gBAAU,oBAAoB,aAAa,eAAe;AAC1D,gBAAU,oBAAoB,cAAc,gBAAgB;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,SAAS,YAAY,CAAC;AAE1B,SAAO;AACT;AAQO,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB;AAAA,EACA,iBAAiB;AAAA;AAAA,EAEjB,cAAc;AAChB,GAAmC;AACjC,QAAM,gBAAgB,eAAe,cAAc,OAAO;AAG1D,kBAAgB,cAAc,OAAO;AAGrC,QAAM,mBAAmB,sBAAsB,QAAQ,uBAAuB;AAC9E,QAAM,oBAAoB,kBAAkB,QAAQ,mBAAmB;AACvE,QAAM,kBAAkB,WAAW,iBAAiB,QAAQ,CAAC,oBAAoB,CAAC,sBAC5E,sBAAsB,oBAAoB,aAAa,IAAI;AAKjE,QAAM,WAAW,kBACb,gBAAgB,aAAa,SAAS,aAAc,IACpD;AAMJ,QAAM,mBAAmB,uBAAuB,sBAAsB,OAClE,YAAY,aAAa,SAAS,kBAAkB,IACpD;AAGJ,QAAM,cAAc,WAAW,kBAAkB,OAC7C,gBAAgB,aAAa,SAAS,cAAc,IACpD;AAQJ,MAAI,CAAC,QAAS,QAAO;AAKrB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,OAAO,EAAE,UAAU,SAAS,OAAO,GAAG,eAAe,QAAQ,QAAQ,EAAA;AAAA,MAIpE,UAAA;AAAA,QAAA,gCACE,UAAA,EAAS,UAAU,SAAS,UAC3B,8BAAC,iBAAA,EAAgB,MAAM,UAAU,SAAS,MAAM,SAAS,QAAQ,GAAG,MAAK,SAAQ,GACnF;AAAA,QAGD,eACC,oBAAC,UAAA,EAAS,UAAU,YAAY,UAC9B,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM,UAAU,YAAY,MAAM,YAAY,QAAQ;AAAA,YACtD,MAAK;AAAA,YACL,QAAQ;AAAA,UAAA;AAAA,QAAA,GAEZ;AAAA,QAeD,oBACC,oBAAC,kBAAA,EAAiB,MAAM,kBACrB,+BAAqB,mBAAmB,oBAAqB,gBAAgB,IAAI,KAAA,CACpF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;AAQA,SAAS,UAAU,UAAoB,UAA8B;AACnE,SAAO;AAAA,IACL,GAAG,SAAS,IAAI,SAAS;AAAA,IACzB,GAAG,SAAS,IAAI,SAAS;AAAA,IACzB,OAAO,SAAS;AAAA,IAChB,QAAQ,SAAS;AAAA,EAAA;AAErB;AAeA,MAAM,mBAAmB;AAAA,EACvB,OAAU,EAAE,OAAO,GAAG,OAAO,uBAAuB,QAAQ,EAAA;AAAA,EAC5D,UAAU,EAAE,OAAO,GAAG,OAAO,kBAAuB,QAAQ,EAAA;AAAA;AAAA;AAAA;AAI9D;AAIA,SAAS,UAAU,MAAqC;AACtD,SAAO;AAAA,IACL,UAAU;AAAA,IACV,MAAM,KAAK;AAAA,IACX,KAAK,KAAK;AAAA,IACV,OAAO,KAAK;AAAA,IACZ,QAAQ,KAAK;AAAA,EAAA;AAEjB;AAYA,SAAS,gBAAgB,EAAE,MAAM,MAAM,UAIpC;AACD,QAAM,OAAO,iBAAiB,IAAI;AAClC,QAAM,WAAW,SAAS,cAAc,SAAS,EAAE,yBAAyB,OAAA,IAAW,CAAA;AACvF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,OAAO;AAAA,QACL,GAAG,UAAU,IAAI;AAAA,QACjB,SAAS,GAAG,KAAK,KAAK,YAAY,KAAK,KAAK;AAAA,QAC5C,eAAe,IAAI,KAAK,KAAK;AAAA,QAC7B,WAAW;AAAA,QACX,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,QAAQ,KAAK;AAAA,MAAA;AAAA,MAEd,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAiBA,SAAS,SAAS,EAAE,UAAU,YAA+D;AAC3F,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,OAAO;AAAA,QACL,UAAU;AAAA,QACV,MAAM,SAAS;AAAA,QACf,KAAK,SAAS;AAAA,QACd,OAAO,SAAS;AAAA,QAChB,QAAQ,SAAS;AAAA,QACjB,UAAU;AAAA,QACV,eAAe;AAAA,MAAA;AAAA,MAGhB;AAAA,IAAA;AAAA,EAAA;AAGP;AAaA,SAAS,iBAAiB,EAAE,MAAM,YAA2D;AAC3F,MAAI,CAAC,UAAU;AACb,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAW;AAAA,QACX,OAAO;AAAA,UACL,GAAG,UAAU,IAAI;AAAA,UACjB,eAAe;AAAA,UACf,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,WAAW;AAAA,QAAA;AAAA,QAEb,oCAAgC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGtC;AACA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,GAAG,UAAU,IAAI;AAAA,QACjB,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,YAAY;AAAA,MAAA;AAAA,MAEd,2BAAuB;AAAA,MAEtB;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"data-table-interaction-layer.js","sources":["../../../src/components/DataTable/data-table-interaction-layer.tsx"],"sourcesContent":["// @internal — DS-internal 單元(viewport 覆蓋 paint layer,只被 data-table.tsx 內部消費);不隨 index.ts re-export 進 npm public surface。\n/**\n * DataTableInteractionLayer — Slice D Step 1A scaffold(per `.claude/planning/datatable-spreadsheet-rfc.md`)\n *\n * Singleton overlay root inside DataTable(M21 private,不抽 global pattern)。\n * Sub-layer children(2026-07-04 對齊實作;原 RFC 5-layer 清單含未實作元件):\n *   - HoverCellRect(z 1):hover 邊框,「one geometry owner, two paint owners」(Contract 8)\n *   - SelectionRing(z 2):spreadsheet mode selected cell 1px ring(CELL_RING_STYLES.selected)\n *   - ActiveEditorHost(z 3):portal active edit Field(Slice C wire-up)\n *   -(range 視覺 = CSS [data-range-cell] cell-bg,非 layer 元件;nested popup 走 Radix idiom\n *     見 active-editor-controller.ts — RangeRect / NestedPortalRegistry 元件不存在)\n *\n * Slice D Step 1A scope:\n *   - getCellRect(cellId)geometry source(per Contract 8)\n *   - HoverCellRect 1 layer 先做(Contract 8 / Contract 15 cellClickEntersEdit predicate)\n *   - 默認 disabled via `experimentalSpreadsheetOverlay` flag,不破現有 outline\n *   - 後續 Step 1B/C/D 漸進切換 + 拆 outline\n */\n\nimport * as React from 'react'\n\ntype CellId = string\n\ninterface CellRect {\n  x: number\n  y: number\n  width: number\n  height: number\n}\n\ninterface DataTableInteractionLayerProps {\n  /** Flag default false:不破現有 outline。enable 後 hover/editor 走 overlay。 */\n  enabled: boolean\n  /** Container ref;geometry source(getCellRect 由此 query cell DOM)。layer root 本身是\n   *  position:fixed inset:0 viewport-anchor(見 render),非 container-origin absolute */\n  containerRef: React.RefObject<HTMLDivElement | null>\n  /** Per Contract 15:`cellClickEntersEdit` predicate;hover overlay 顯示與否 */\n  cellClickEntersEdit?: (cellId: CellId) => boolean\n  /**\n   * Active editor cell id。null = 無 active editor。\n   * 已接線(Slice D Step 5 完成,2026-07-14 docblock 對齊):activeEditorEnabled +\n   * activeEditorCellId + activeEditorRender 齊 → ActiveEditorHost(z 3)portal render\n   * 真 edit Field(per Contract 8「two paint owners」)。\n   */\n  activeEditorCellId?: CellId | null\n  /**\n   * Slice D Step 3.x flag:啟用 ActiveEditorHost dashed scaffold rect rendering。\n   * 2026-05-10 bug fix(user 圖1 雙 ring 同時顯示):dashed scaffold 之前綁\n   * `enabled`(= experimentalSpreadsheetOverlay)→ 任何 cell 進 edit mode 就 leak\n   * 出 dashed rect。改 gate 給 `experimentalActiveEditorController`(Step 3.3 真\n   * portal Field 工作),hover overlay scope 不會看到 dashed scaffold。\n   */\n  activeEditorEnabled?: boolean\n  /**\n   * Slice D Step 4(spreadsheet semantics,2026-05-10 user 圖1 ask + RFC Contract 5):\n   * Excel-like 選取 cell ID。Click 1 select / Click 2 enter edit。\n   * Layer renders solid border SelectionRect(per user「不要 dash 直接實的就好」)。\n   */\n  selectedCellId?: CellId | null\n  /**\n   * Slice D Step 5(D.3 portal Field,2026-05-10 user 拍板「在乎完美乾淨」+ codex Q6.1\n   * 撤回 defer):active editor render callback。當 activeEditorEnabled + activeEditorCellId\n   * truthy → layer call this 拿 React node(已 bind value/onCommit/onCancel from controller),\n   * 在 ActiveEditorHost portal(z 3,float rect)render 之。\n   *\n   * Per codex Q6.2 outline:cell 永遠 mode=\"display\"(SSOT preserved);portal host 渲\n   * mode=\"edit\" 同 registry component;float pass-through + z-index 3 cover display below。\n   */\n  activeEditorRender?: (cellId: CellId, rect: CellRect) => React.ReactNode\n}\n\n/**\n * `getCellRect(cellId)` geometry source(per Contract 8)。\n *\n * 從 DOM 量(per-call `getBoundingClientRect()`)而非 layoutCache,因為:\n *   1. cell DOM 是 React-rendered,getBoundingClientRect 永遠是 source of truth\n *   2. layoutCache 需另寫 invalidation logic,added complexity\n *   3. Hover overlay re-render 頻率低(per cell hover,不是 per frame)\n *\n * Float coords pass-through — no rounding / no snap(v3 fix,見下方 v3 註解;原 RFC 0.5px snap 已撤)。\n */\nfunction getCellRect(containerEl: HTMLElement | null, cellId: CellId): CellRect | null {\n  if (!containerEl) return null\n  const cellEl = containerEl.querySelector<HTMLElement>(`[data-cell-id=\"${cellId}\"]`)\n  if (!cellEl) return null\n  // Page-absolute coords for viewport-fixed layer(per Step 1C bug fix:layer\n  // 用 position:fixed,讓 paint owner 跟 reference frame 解耦 outer container 的 positioning)。\n  // 2026-05-10 v3 fix(user 圖5 SSOT consistency):**float coords no rounding**。\n  //   Cell 自身 layout 用 sub-pixel float position(CSS 不 snap to integer)— 跨 cell 累積\n  //   常見 144.328 / 244.0 / 524.172 等 fractional。任何 Math.round / floor / ceil 都引入\n  //   varying rounding error(visual audit verified:dx=0.17/0.5/0.83 不一致)。\n  //   Float pass-through + outline + outline-offset:-1px(下方 paint)→ overlay 永遠跟\n  //   cell exact pixel-perfect overlap,user verbatim「在內容起始位置不變的前提下讓\n  //   overlay 的邊框直接剛好壓住 cell 邊框」達成。\n  const rect = cellEl.getBoundingClientRect()\n  return {\n    x: rect.x,\n    y: rect.y,\n    width: rect.width,\n    height: rect.height,\n  }\n}\n\n/**\n * Issue 6 viewport clip(2026-05-10):cell 跟 panel(left/center/right)bounding rect 一起取,\n * layer 用 panel rect 當 clip viewport intersect cell rect → overlay 永不畫到 panel 外。\n *\n * Per codex 13-issues verdict:「getCellRect 找最近 scroll viewport;intersect(cellRect, viewportRect),\n * 空 → 不 render,部分 → clipped rect render。」\n *\n * 對齊 AG Grid `cellsForRangeSet` viewport-aware paint / Glide DataGrid clip helpers /\n * Notion sticky-cell virtualizer mask。\n */\ninterface CellGeometry {\n  /** Cell exact viewport rect(no rounding,float pass-through per Bug 5 SSOT) */\n  rect: CellRect\n  /** Nearest panel container rect(left/center/right body)— clip viewport for overlays */\n  clipRect: CellRect\n  /** Panel identifier(`left` / `center` / `right`)— grouped range outer ring 分段用 */\n  panel: 'left' | 'center' | 'right'\n}\n\nfunction getCellGeometry(containerEl: HTMLElement | null, cellId: CellId): CellGeometry | null {\n  if (!containerEl) return null\n  const cellEl = containerEl.querySelector<HTMLElement>(`[data-cell-id=\"${cellId}\"]`)\n  if (!cellEl) return null\n  const panelEl = cellEl.closest<HTMLElement>('[data-datatable-panel]')\n  if (!panelEl) return null\n  const panel = panelEl.dataset.datatablePanel as 'left' | 'center' | 'right'\n  const cellR = cellEl.getBoundingClientRect()\n  const panelR = panelEl.getBoundingClientRect()\n  return {\n    rect: { x: cellR.x, y: cellR.y, width: cellR.width, height: cellR.height },\n    clipRect: { x: panelR.x, y: panelR.y, width: panelR.width, height: panelR.height },\n    panel,\n  }\n}\n\n\n/**\n * Reactive rect sync hook — 確保 overlay rect 跨 RWD / scroll / resize 永遠對齊 cell(2026-05-10\n * user 拍板「所有 overlay 在各種 RWD 和捲動時都能處在正確位置上」)。\n *\n * 監聽 3 source(rAF coalesce 避 frame storm):\n *   1. window scroll(capture mode 抓 nested table body scroll + page scroll)\n *   2. window resize(viewport size change → cell width 變)\n *   3. ResizeObserver on container(column resize / table dimension 變)\n *\n * 每次事件 fire → setVersion(v+1) → 觸發 layer re-render → rect 用最新 getBoundingClientRect\n * 重算。getBoundingClientRect 本身永遠 return 當下 viewport-relative coords,沒 stale cache。\n *\n * Per codex(brief: codex-brief-rwd-future-2026-05-10):rAF coalesce 不需要 debounce,scroll\n * 跟到不延遲才對(Glide / AG Grid 同 idiom)。\n */\nfunction useReactiveRect(containerRef: React.RefObject<HTMLElement | null>, enabled: boolean) {\n  const [, setVersion] = React.useState(0)\n  React.useEffect(() => {\n    if (!enabled) return\n    let rafId: number | null = null\n    const force = () => {\n      if (rafId !== null) return\n      rafId = requestAnimationFrame(() => {\n        rafId = null\n        setVersion((v) => v + 1)\n      })\n    }\n    window.addEventListener('scroll', force, { capture: true, passive: true })\n    window.addEventListener('resize', force, { passive: true })\n    const container = containerRef.current\n    let ro: ResizeObserver | null = null\n    if (container && typeof ResizeObserver !== 'undefined') {\n      ro = new ResizeObserver(force)\n      ro.observe(container)\n    }\n    return () => {\n      window.removeEventListener('scroll', force, { capture: true } as EventListenerOptions)\n      window.removeEventListener('resize', force)\n      if (ro) ro.disconnect()\n      if (rafId !== null) cancelAnimationFrame(rafId)\n    }\n  }, [enabled, containerRef])\n}\n\n/**\n * Hover state hook — 監聽 container hover events,track hovered cell id。\n *\n * Implementation:event delegation on container(不 per-cell mount listeners),\n * 利用 `data-cell-id` attribute + closest()。\n */\nfunction useHoveredCell(\n  containerRef: React.RefObject<HTMLElement | null>,\n  enabled: boolean,\n): CellId | null {\n  const [hoveredCellId, setHoveredCellId] = React.useState<CellId | null>(null)\n\n  React.useEffect(() => {\n    if (!enabled) { setHoveredCellId(null); return }\n    const container = containerRef.current\n    if (!container) return\n\n    const handleMouseOver = (e: MouseEvent) => {\n      const target = e.target as HTMLElement | null\n      const cellEl = target?.closest<HTMLElement>('[data-cell-id]')\n      const id = cellEl?.dataset.cellId ?? null\n      setHoveredCellId(id)\n    }\n    const handleMouseLeave = () => setHoveredCellId(null)\n\n    container.addEventListener('mouseover', handleMouseOver)\n    container.addEventListener('mouseleave', handleMouseLeave)\n    return () => {\n      container.removeEventListener('mouseover', handleMouseOver)\n      container.removeEventListener('mouseleave', handleMouseLeave)\n    }\n  }, [enabled, containerRef])\n\n  return hoveredCellId\n}\n\n/**\n * Singleton interaction layer(全 sub-layer 已接線;2026-07-14 docblock 對齊實作)。\n *\n * 現況:HoverCellRect(z 1)+ SelectionRing(z 2)+ ActiveEditorHost(z 3,portal edit Field);\n * range 視覺走 cell 自身 CSS `[data-range-cell]`(RangeRect / rangeCellIds prop 已 retire)。\n * layer root = position:fixed inset:0 viewport-anchor,pointerEvents:none(僅 ActiveEditorHost 開 auto)。\n */\nexport function DataTableInteractionLayer({\n  enabled,\n  containerRef,\n  cellClickEntersEdit,\n  activeEditorCellId,\n  activeEditorEnabled = false,\n  activeEditorRender,\n  selectedCellId = null,\n}: DataTableInteractionLayerProps) {\n  const hoveredCellId = useHoveredCell(containerRef, enabled)\n  // 2026-05-10 RWD/scroll sync(per user mandate「所有 overlay 在各種 RWD 和捲動時都處在正確位置」):\n  // window scroll(capture)+ resize + ResizeObserver(container)→ rAF coalesced re-render → rect 重算\n  useReactiveRect(containerRef, enabled)\n\n  // Contract 14 state precedence:editing > selected > hover(per RFC §State Precedence Matrix)\n  const isEditingHovered = activeEditorCellId != null && activeEditorCellId === hoveredCellId\n  const isSelectedHovered = selectedCellId != null && selectedCellId === hoveredCellId\n  const shouldShowHover = enabled && hoveredCellId != null && !isEditingHovered && !isSelectedHovered\n    && (cellClickEntersEdit ? cellClickEntersEdit(hoveredCellId) : true)\n\n  // Issue 6 viewport clip(2026-05-10):每個 overlay rect 都跟最近 panel(left/center/right body)\n  // intersect。Cell scroll 出 panel viewport(H scroll / pinned 範圍)→ rect null → 不 render;\n  // 部分 → 用 ClipMask wrap 在 panel viewport 內裁切,outline 永遠在 cell 真邊但被 mask 限制視覺。\n  const hoverGeo = shouldShowHover\n    ? getCellGeometry(containerRef.current, hoveredCellId!)\n    : null\n\n  // Slice D Step 3 scaffold:ActiveEditorHost rect placeholder(per Contract 8 active editor paint owner)。\n  // 2026-05-10 bug fix:gate by `activeEditorEnabled` flag(Step 3.3 portal Field work)。\n  // Issue 6:active editor host **不**做 viewport clip(per codex「editor 必可見」),\n  // 仍走原 path 從 getCellRect 取 viewport coords。User 應將 active editor cell 滾到 viewport 內。\n  const activeEditorRect = activeEditorEnabled && activeEditorCellId != null\n    ? getCellRect(containerRef.current, activeEditorCellId)\n    : null\n\n  // Slice D Step 4(spreadsheet semantics):SelectionRing with viewport clip(RangeRect 已 retire — range 視覺走 CSS [data-range-cell])。\n  const selectedGeo = enabled && selectedCellId != null\n    ? getCellGeometry(containerRef.current, selectedCellId)\n    : null\n\n  // 2026-05-10 retire `rangeOuterRingsByPanel` calc + render(per user 抓 range 2px outer\n  // ring 不需要 — cell-bg `--primary-subtle` 已給「這些 cell 在範圍內」訊號,outer ring 是\n  // redundant visual)。`CellRangeOuterRing` primitive 已 retire(下方刪),getCellGeometry 仍\n  // 給 hover / selected overlay 使用,保留。Future 若需 outer ring 復用,從 git history 取\n  // commit `763b3ac`(Issue 6 viewport clip)的 implementation。\n\n  if (!enabled) return null\n\n  // Layer absolute fixed-position relative to viewport(避 outer container 缺 position:relative\n  // 找錯 reference frame)。getCellRect 已 return container-relative,但這裡 set top/left 用\n  // page coords 一致 — 改用 viewport-fixed 簡化。\n  return (\n    <div\n      aria-hidden\n      style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 1 }}\n    >\n      {/* HoverRing — kind=hover(1px var(--border-hover)) z 1。Wrap 在 ClipMask(panel viewport)\n          內 → cell scroll 出 panel 時 outline 自動被 mask 裁切,不會 leak 到 panel 外。 */}\n      {hoverGeo && (\n        <ClipMask clipRect={hoverGeo.clipRect}>\n          <CellRingOverlay rect={toRelRect(hoverGeo.rect, hoverGeo.clipRect)} kind=\"hover\" />\n        </ClipMask>\n      )}\n      {/* SelectionRing — kind=selected(1px var(--primary)) z 2,SSOT 同 hover wide */}\n      {selectedGeo && (\n        <ClipMask clipRect={selectedGeo.clipRect}>\n          <CellRingOverlay\n            rect={toRelRect(selectedGeo.rect, selectedGeo.clipRect)}\n            kind=\"selected\"\n            cellId={selectedCellId!}\n          />\n        </ClipMask>\n      )}\n      {/* 2026-05-10 retire RangeOuterRing(per user 抓 image 4 + verbatim「range 的 cell 本來就有顏色變化,\n          那樣就夠了,不需要再有 2px 藍色的框」)。Range visual now relies purely on cell-bg\n          (`--primary-subtle` via `[data-range-cell]` CSS in `data-table.css`)+ focus cell 1px selected\n          border。Outer 2px primary ring 從 Issue 6 ship 但 visual 太重 — bg-fill 已給「這些 cell 在範圍內」\n          訊號,outer ring 是 redundant。calc + render 皆已 retire(變數已移除;future 若需 reinstate\n          參考 git history 2026-05-10)。 */}\n      {/* {rangeOuterRingsByPanel.map((group) => (\n        <ClipMask key={group.panel} clipRect={group.clipRect}>\n          <CellRangeOuterRing rect={toRelRect(group.bbox, group.clipRect)} />\n        </ClipMask>\n      ))} */}\n      {/* ActiveEditorHost — z 3,float rect,pointerEvents:auto opaque host(NOT a ring)。\n          Issue 6:active editor 不 clip(editor 必可見) — user 滾出 viewport 自負責。 */}\n      {activeEditorRect && (\n        <ActiveEditorHost rect={activeEditorRect}>\n          {activeEditorRender ? activeEditorRender(activeEditorCellId!, activeEditorRect) : null}\n        </ActiveEditorHost>\n      )}\n    </div>\n  )\n}\n\n/**\n * `toRelRect(cellRect, clipRect)` — Issue 6 helper(2026-05-10):\n * 把 viewport coords cell rect 轉成 ClipMask containing-block 內 relative coords。\n * ClipMask 用 panel rect 做 absolute container + overflow:hidden,內部 child absolute 定位\n * 以 mask 為 reference frame,所以 cellRect.x - clipRect.x 才對齊 cell 真實位置。\n */\nfunction toRelRect(cellRect: CellRect, clipRect: CellRect): CellRect {\n  return {\n    x: cellRect.x - clipRect.x,\n    y: cellRect.y - clipRect.y,\n    width: cellRect.width,\n    height: cellRect.height,\n  }\n}\n\n// ── Private primitives(per codex unified-ring-overlay-2026-05-10 Final A')──────\n//\n// 三個 private primitive 各自 own 一個 paint concern(2026-07-14 對齊實作:CellRangeFill\n// 不存在 — range bg 走 cell 自身 CSS `[data-range-cell]`,非 layer 元件):\n//   1. CellRingOverlay  — outline ring(hover / selected / future focus / error)\n//   2. ClipMask         — panel viewport 裁切 wrapper(Issue 6 partial-visibility)\n//   3. ActiveEditorHost — opaque host(portal Field edit)\n//\n// SSOT pattern(共 3 primitives):rect float pass-through + boxSizing:border-box +\n//   pointerEvents 視 kind / position:absolute on viewport-fixed layer。\n//\n// Token mapping 集中 `CELL_RING_STYLES`(per codex Q3 verdict 不開 global `--cell-ring-*` token,\n// 在 primitive 內 kind → semantic token mapping)。\n\nconst CELL_RING_STYLES = {\n  hover:    { width: 1, color: 'var(--border-hover)', zIndex: 1 },\n  selected: { width: 1, color: 'var(--primary)',      zIndex: 2 },\n  // future kinds(per codex Q6 outline,加 entry 即可擴展):\n  // focus:  { width: 2, color: 'var(--primary)',      zIndex: 2 },\n  // error:  { width: 1, color: 'var(--error)',        zIndex: 2 },\n} as const\n\ntype CellRingKind = keyof typeof CELL_RING_STYLES\n\nfunction rectStyle(rect: CellRect): React.CSSProperties {\n  return {\n    position: 'absolute',\n    left: rect.x,\n    top: rect.y,\n    width: rect.width,\n    height: rect.height,\n  }\n}\n\n/**\n * CellRingOverlay — paint owner for hover / selected / future focus / error rings。\n *\n * 共用 SSOT(per Bug 5 fix + codex Q2 unified primitive):\n *   - Float pass-through rect(getCellRect 不 round)\n *   - outline + outline-offset:`-${width}px` paint 在 cell 既有 border 上 in-place\n *   - boxSizing:border-box(避免 outline 影響 layout)\n *   - pointerEvents:none(透視點擊穿透)\n *   - transition:none(避 fade flash)\n */\nfunction CellRingOverlay({ rect, kind, cellId }: {\n  rect: CellRect\n  kind: CellRingKind\n  cellId?: CellId\n}) {\n  const ring = CELL_RING_STYLES[kind]\n  const dataAttr = kind === 'selected' && cellId ? { 'data-selected-cell-id': cellId } : {}\n  return (\n    <div\n      aria-hidden\n      style={{\n        ...rectStyle(rect),\n        outline: `${ring.width}px solid ${ring.color}`,\n        outlineOffset: `-${ring.width}px`,\n        boxSizing: 'border-box',\n        pointerEvents: 'none',\n        transition: 'none',\n        zIndex: ring.zIndex,\n      }}\n      {...dataAttr}\n    />\n  )\n}\n\n// `CellRangeOuterRing` primitive retired 2026-05-10(per user 「range cell 本來就有顏色變化\n// 那樣就夠了,不需要再有 2px 藍色的框」)。Source 留 git history commit `763b3ac`(Issue 6\n// viewport clip ship)若需 reinstate。\n\n/**\n * ClipMask — Issue 6 primitive(2026-05-10):panel viewport 裁切容器。\n *\n * 用在 hover / selected / range outer ring overlay,避免 cell 滾出 panel viewport(H scroll /\n * pinned 範圍)時 overlay 仍漂浮在 panel 外。Layer 是 `position: fixed` viewport-anchor,\n * ClipMask 用 panel rect 當 absolute container + `overflow: hidden` mask;child overlay 用\n * `toRelRect(cellRect, clipRect)` 算出 mask-relative 座標,在 mask 內精準定位但被 mask 邊緣裁切。\n *\n * 對齊 AG Grid `cellsForRangeSet` viewport-aware paint / Glide DataGrid clip helpers /\n * Notion sticky-cell virtualizer mask。\n */\nfunction ClipMask({ clipRect, children }: { clipRect: CellRect; children: React.ReactNode }) {\n  return (\n    <div\n      aria-hidden\n      style={{\n        position: 'absolute',\n        left: clipRect.x,\n        top: clipRect.y,\n        width: clipRect.width,\n        height: clipRect.height,\n        overflow: 'hidden',\n        pointerEvents: 'none',\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * ActiveEditorHost — opaque host for portal Field edit(D.3,Slice D Step 5)。\n *\n * Per codex Q2 verdict:不該進 CellRingOverlay primitive — 它是 host 不是 ring。\n *   - pointerEvents:auto(child Field 接收 click / keyboard)\n *   - background:var(--canvas)(opaque cover display Field below;Cell SSOT 保留)\n *   - z-index 3(above hover / selected / range)\n *   - children = activeEditorRender 的回傳 React node\n *\n * Empty children fallback = dashed debug indicator(no portal Field provided)。\n */\nfunction ActiveEditorHost({ rect, children }: { rect: CellRect; children: React.ReactNode }) {\n  if (!children) {\n    return (\n      <div\n        aria-hidden\n        style={{\n          ...rectStyle(rect),\n          pointerEvents: 'none',\n          zIndex: 3,\n          border: '1px dashed var(--primary)',\n          boxSizing: 'border-box',\n        }}\n        data-active-editor-host-scaffold\n      />\n    )\n  }\n  return (\n    <div\n      style={{\n        ...rectStyle(rect),\n        pointerEvents: 'auto',\n        zIndex: 3,\n        boxSizing: 'border-box',\n        background: 'var(--canvas)',\n      }}\n      data-active-editor-host\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,140 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { RotateCcw, X, Plus, GripVertical, Trash2 } from "lucide-react";
+import { DndContext, closestCenter } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn } from "../../lib/utils.js";
+import { dragSourceStyle, dragHandleCursorClass } from "../../lib/drag-visual.js";
+import { Button } from "../Button/button.js";
+import { Select } from "../Select/select.js";
+import { SurfaceHeader, COMPACT_HEADER_SLOT, SurfaceBody } from "../../patterns/overlay-surface/overlay-surface.js";
+import { ButtonDivider } from "../Button/button-group.js";
+import { PopoverTitle, PopoverClose } from "../Popover/popover.js";
+import { ItemInlineActionButton } from "../../patterns/element-anatomy/item-anatomy.js";
+import { getColumnId, getColumnLabel } from "./lib/column-meta.js";
+function extractColumns(columns) {
+  const out = [];
+  for (const col of columns) {
+    const id = getColumnId(col);
+    if (!id || id === "__select__") continue;
+    if (col.enableSorting === false) continue;
+    out.push({ id, label: getColumnLabel(col, id), enableSorting: true });
+  }
+  return out;
+}
+const DIRECTION_OPTIONS = [
+  { value: "asc", label: "升冪" },
+  { value: "desc", label: "降冪" }
+];
+function DataTableSortManager({
+  columns,
+  sorting,
+  onSortingChange,
+  onReset,
+  onClose,
+  className
+}) {
+  const sortableColumns = React.useMemo(() => extractColumns(columns), [columns]);
+  const fieldOptions = React.useMemo(
+    () => sortableColumns.map((c) => ({ value: c.id, label: c.label })),
+    [sortableColumns]
+  );
+  const updateAt = (index, patch) => {
+    const next = sorting.map((s, i) => i === index ? { ...s, ...patch } : s);
+    onSortingChange(next);
+  };
+  const removeAt = (index) => {
+    onSortingChange(sorting.filter((_, i) => i !== index));
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const oldIndex = sorting.findIndex((s) => s.id === active.id);
+    const newIndex = sorting.findIndex((s) => s.id === over.id);
+    if (oldIndex < 0 || newIndex < 0) return;
+    const next = [...sorting];
+    const [moved] = next.splice(oldIndex, 1);
+    next.splice(newIndex, 0, moved);
+    onSortingChange(next);
+  };
+  const addSort = () => {
+    const used = new Set(sorting.map((s) => s.id));
+    const firstUnused = sortableColumns.find((c) => !used.has(c.id));
+    if (!firstUnused) return;
+    onSortingChange([...sorting, { id: firstUnused.id, desc: false }]);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full min-h-0 w-[var(--data-table-sort-panel-width)]", className), children: [
+    /* @__PURE__ */ jsxs(SurfaceHeader, { className: COMPACT_HEADER_SLOT, children: [
+      /* @__PURE__ */ jsx(PopoverTitle, { className: "flex-1", children: "排序" }),
+      onReset && sorting.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", iconOnly: true, startIcon: RotateCcw, "aria-label": "重置", onClick: onReset }),
+        onClose && /* @__PURE__ */ jsx(ButtonDivider, {})
+      ] }),
+      onClose && /* @__PURE__ */ jsx(PopoverClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { "data-dismiss": true, iconOnly: true, dismiss: true, size: "sm", startIcon: X, "aria-label": "關閉", onClick: onClose }) })
+    ] }),
+    /* @__PURE__ */ jsxs(SurfaceBody, { className: "flex flex-col gap-[var(--layout-space-tight)]", children: [
+      sorting.length > 0 && /* @__PURE__ */ jsx(DndContext, { collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: sorting.map((s) => s.id), strategy: verticalListSortingStrategy, children: sorting.map((sort, index) => {
+        const usedByOthers = new Set(sorting.filter((_, i) => i !== index).map((s) => s.id));
+        const optionsForRow = fieldOptions.filter((o) => !usedByOthers.has(o.value));
+        return /* @__PURE__ */ jsx(
+          SortRow,
+          {
+            sort,
+            optionsForRow,
+            onChangeId: (v) => updateAt(index, { id: v }),
+            onChangeDir: (v) => updateAt(index, { desc: v === "desc" }),
+            onRemove: () => removeAt(index)
+          },
+          sort.id
+        );
+      }) }) }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "tertiary",
+          size: "sm",
+          startIcon: Plus,
+          onClick: addSort,
+          disabled: sorting.length >= sortableColumns.length,
+          children: "加排序"
+        }
+      ) })
+    ] })
+  ] });
+}
+DataTableSortManager.displayName = "DataTableSortManager";
+function SortRow({
+  sort,
+  optionsForRow,
+  onChangeId,
+  onChangeDir,
+  onRemove
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: sort.id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    ...dragSourceStyle(isDragging)
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: setNodeRef, style, className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      ItemInlineActionButton,
+      {
+        icon: GripVertical,
+        size: "sm",
+        "aria-label": "拖曳重排",
+        className: dragHandleCursorClass,
+        ...attributes,
+        ...listeners
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(Select, { size: "sm", options: optionsForRow, value: sort.id, onChange: onChangeId }) }),
+    /* @__PURE__ */ jsx("div", { className: "w-32 shrink-0", children: /* @__PURE__ */ jsx(Select, { size: "sm", options: DIRECTION_OPTIONS, value: sort.desc ? "desc" : "asc", onChange: onChangeDir, minRows: 2 }) }),
+    /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", iconOnly: true, startIcon: Trash2, "aria-label": "刪除", onClick: onRemove })
+  ] });
+}
+export {
+  DataTableSortManager
+};
+//# sourceMappingURL=data-table-sort-manager.js.map

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

@@ -0,0 +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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"}

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

@@ -83,9 +83,6 @@ export interface DataTableProps<TData> extends Omit<React.HTMLAttributes<HTMLDiv
     defaultSelection?: string[] | DataTableSelection;
     /** Selection 變更 callback(emit DataTableSelection union;include / all 兩模型) */
     onSelectionChange?: (next: DataTableSelection) => void;
-    /** 全資料集筆數 M(server-side / filter 後);all 模式 count = totalCount − excluded.length。
-     *  **DS 內部零消費(no-op prop)**:僅型別文件 + destructure 防 spread 到 DOM;count 全由 consumer 計算 */
-    totalCount?: number;
     /** 是否啟用 selection / 模式;true 等同 'multi' */
     selectable?: boolean | 'single' | 'multi';
     /** Row 是否可選(disabled rows 只 disable checkbox,row 內容正常 render) */
@@ -124,7 +121,7 @@ export interface DataTableProps<TData> extends Omit<React.HTMLAttributes<HTMLDiv
      *
      * **v2(2026-05-05)修正**:
      * - Virtualizer × transform:被拖 row 略過 `measureElement`(透過 SortableRowCtx 廣播 active id),避免 transform 干擾測量
-     * - 3-panel mirror sync:每 region 對同 row id 各呼叫 `useDraggable` + `useDroppable`,mirror 自然取得相同 transform
+     * - 3-panel mirror sync:primary region 呼叫 `useDraggable` + `useDroppable`;mirror region 只 `useDroppable`(v15.4 split),isDragging 由 `useDndContext` active.id 同步 → 三 region 視覺一致
      * - Cross-parent drop:nested 全 row 各自 `useDroppable`,自訂 collisionDetection 過濾出「同 parent siblings」;cross-parent over → 不觸發,handle cursor `not-allowed`
      *
      * 詳 `data-table.spec.md`「L4 Row drag」段。
@@ -185,7 +182,7 @@ export interface DataTablePaginationOptions {
     pageSize?: number;
     /** 每頁筆數選項;傳了才渲染「每頁 N 筆」Select(消費既有 Select size="sm") */
     pageSizeOptions?: number[];
-    /** 左側「共 N 筆」文字(opt-in,= Ant showTotal 邏輯;數源 = filter 後全集 getPrePaginationRowModel,非 selection all-mode 的 totalCount) */
+    /** 左側「共 N 筆」文字(opt-in,= Ant showTotal 邏輯;數源 = filter 後全集 getPrePaginationRowModel,非 selection all-mode 的 server-side 全集數 M — 那是 consumer 自持) */
     showTotal?: boolean;
     /** 當前頁(1-based,controlled;不傳 = uncontrolled) */
     page?: number;
@@ -203,7 +200,9 @@ export interface DataTablePaginationOptions {
  *   解決「全選 10k 筆只載 50 筆 → 無法列舉其餘 ID」:all 模式「選取 = 全集 − excluded」,
  *   任何 toggle 都只是 excluded 的 add/remove,對任意順序封閉、O(1)、不需列舉未載入 ID。
  *
- * 計數(consumer):mode==='all' ? totalCount − excluded.length : ids.length(需傳 totalCount)。
+ * 計數(consumer):mode==='all' ? M − excluded.length : ids.length(M = consumer 自持的
+ * server-side / filter 後全集筆數;2026-07-13 D1 拍板:DataTable 不收 totalCount prop — DS 內部
+ * 零消費 no-op 已移除,計數本來就全由 consumer 端算)。
  * 進入 all 模式:consumer 在「選取全部 M」hint 點擊時 setSelection({ mode: 'all', excluded: [] })。
  */
 export type DataTableSelection = {