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

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

@@ -1,11 +1,10 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { RotateCcw, X, Search, Lock, GripVertical, Eye, EyeOff } from "lucide-react";
 import { Button } from "../Button/button.js";
 import { ButtonDivider } from "../Button/button-group.js";
 import { Input } from "../Input/input.js";
-import { ScrollArea } from "../ScrollArea/scroll-area.js";
-import { PopoverHeader, PopoverTitle, PopoverClose, PopoverFooter } from "../Popover/popover.js";
+import { PopoverHeader, PopoverTitle, PopoverClose, PopoverBody, PopoverFooter } from "../Popover/popover.js";
 import { ItemPrefix, ItemInlineActionButton, ItemLabel, ROW_PADDING_BY_SIZE } from "../../patterns/element-anatomy/item-anatomy.js";
 import { cn } from "../../lib/utils.js";
 import { DndContext, closestCenter } from "@dnd-kit/core";
@@ -67,67 +66,75 @@ function DataTableColumnVisibilityPanel({
     next.splice(newIdx, 0, m);
     onColumnOrderChange(next);
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(PopoverHeader, { hideClose: true, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 w-full min-w-0", children: [
-      /* @__PURE__ */ jsx(PopoverTitle, { className: "flex-1", children: "欄位顯示" }),
-      resettable && anyHidden && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "text",
-            size: "sm",
-            iconOnly: true,
-            startIcon: RotateCcw,
-            "aria-label": "恢復預設",
-            onClick: handleReset
-          }
-        ),
-        /* @__PURE__ */ jsx(ButtonDivider, {})
-      ] }),
-      /* @__PURE__ */ jsx(PopoverClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { "data-dismiss": true, iconOnly: true, dismiss: true, size: "sm", startIcon: X, "aria-label": "關閉" }) })
-    ] }) }),
-    searchable && /* @__PURE__ */ jsx("div", { className: "px-[var(--layout-space-loose)] pt-[var(--layout-space-tight)]", children: /* @__PURE__ */ jsx(
-      Input,
-      {
-        size: "md",
-        placeholder: "搜尋欄位…",
-        value: search,
-        onChange: (e) => setSearch(e.target.value),
-        startIcon: Search
-      }
-    ) }),
-    /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-72", children: /* @__PURE__ */ jsx("div", { className: "py-2 flex flex-col", style: { "--item-prefix-slot": "16px" }, children: dndEnabled ? /* @__PURE__ */ jsx(DndContext, { collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(
-      SortableContext,
-      {
-        items: filteredEntries.map((e) => e.id).filter((id) => !lockedSet.has(id)),
-        strategy: verticalListSortingStrategy,
-        children: filteredEntries.map(({ id, label }) => /* @__PURE__ */ jsx(
-          VisibilityRow,
-          {
-            id,
-            label,
-            visible: visibility[id] !== false,
-            locked: lockedSet.has(id),
-            draggable: true,
-            onToggle: () => handleToggle(id)
-          },
-          id
-        ))
-      }
-    ) }) : filteredEntries.map(({ id, label }) => /* @__PURE__ */ jsx(
-      VisibilityRow,
-      {
-        id,
-        label,
-        visible: visibility[id] !== false,
-        locked: lockedSet.has(id),
-        draggable: false,
-        onToggle: () => handleToggle(id)
-      },
-      id
-    )) }) }),
-    /* @__PURE__ */ jsx(PopoverFooter, { className: "justify-start", children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: handleBulkToggle, children: allVisible ? "全部隱藏" : "顯示全部" }) })
-  ] });
+  return (
+    // 決策16 定案(2026-07-18,SSOT consistency 稽核後):對齊 sibling FilterPanel/SortManager 的
+    //   overlay-surface canonical shape —— root `<div flex flex-col h-full min-h-0>`(M25 viewport-aware
+    //   scroll chain)+ viewport-adaptive `PopoverBody`(取代原 fixed `ScrollArea max-h-72`)。三個
+    //   DataTable state-panel 收斂成同一形狀,body 隨視窗高度自適應(高螢幕多欄不再硬卡 288px)。
+    //   寬度仍由 consumer 的 `<PopoverContent w-72>` 提供(panel root w-full 撐滿)。
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full min-h-0 w-full", children: [
+      /* @__PURE__ */ jsx(PopoverHeader, { hideClose: true, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 w-full min-w-0", children: [
+        /* @__PURE__ */ jsx(PopoverTitle, { className: "flex-1", children: "欄位顯示" }),
+        resettable && anyHidden && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "text",
+              size: "sm",
+              iconOnly: true,
+              startIcon: RotateCcw,
+              "aria-label": "恢復預設",
+              onClick: handleReset
+            }
+          ),
+          /* @__PURE__ */ jsx(ButtonDivider, {})
+        ] }),
+        /* @__PURE__ */ jsx(PopoverClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { "data-dismiss": true, iconOnly: true, dismiss: true, size: "sm", startIcon: X, "aria-label": "關閉" }) })
+      ] }) }),
+      searchable && /* @__PURE__ */ jsx("div", { className: "shrink-0 px-[var(--layout-space-loose)] pt-[var(--layout-space-tight)]", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          size: "md",
+          placeholder: "搜尋欄位…",
+          "aria-label": "搜尋欄位",
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          startIcon: Search
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverBody, { className: "!px-0 !py-0", children: /* @__PURE__ */ jsx("div", { className: "py-2 flex flex-col", style: { "--item-prefix-slot": "16px" }, children: dndEnabled ? /* @__PURE__ */ jsx(DndContext, { collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(
+        SortableContext,
+        {
+          items: filteredEntries.map((e) => e.id).filter((id) => !lockedSet.has(id)),
+          strategy: verticalListSortingStrategy,
+          children: filteredEntries.map(({ id, label }) => /* @__PURE__ */ jsx(
+            VisibilityRow,
+            {
+              id,
+              label,
+              visible: visibility[id] !== false,
+              locked: lockedSet.has(id),
+              draggable: true,
+              onToggle: () => handleToggle(id)
+            },
+            id
+          ))
+        }
+      ) }) : filteredEntries.map(({ id, label }) => /* @__PURE__ */ jsx(
+        VisibilityRow,
+        {
+          id,
+          label,
+          visible: visibility[id] !== false,
+          locked: lockedSet.has(id),
+          draggable: false,
+          onToggle: () => handleToggle(id)
+        },
+        id
+      )) }) }),
+      /* @__PURE__ */ jsx(PopoverFooter, { className: "justify-start", children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: handleBulkToggle, children: allVisible ? "全部隱藏" : "顯示全部" }) })
+    ] })
+  );
 }
 function VisibilityRow({
   id,

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-column-visibility-panel.js","sources":["../../../src/components/DataTable/data-table-column-visibility-panel.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\n/**\n * DataTableColumnVisibilityPanel — Issue 3 primitive(2026-05-10)。\n *\n * 從 WithBulkActions story L868+(149 lines)+ RoadmapAllInOne(L1796+,53 lines)抽出 SSOT\n * primitive。Roadmap demo 跟 WithBulkActions 都用此 panel 開啟「欄位顯示」popover。\n *\n * **Feature SSOT**(對齊 Linear / Airtable / Notion / Material X-DataGrid 的 columnVisibility panel idiom):\n *   - 列出所有 togglable 欄位 + Eye / EyeOff 切換\n *   - Locked 欄位(`lockedIds`)— 顯 Lock icon,不可 toggle / 不可 drag\n *   - 可選 search filter(`searchable`,跨欄位 label match)\n *   - 可選 column drag reorder(`onColumnOrderChange` 傳 → 啟 DnD)\n *   - 可選 reset 按鈕(`resettable: boolean` opt-in,header 區 RotateCcw;點擊 `onVisibilityChange({})` 還原全顯示,無獨立 onReset prop)\n *   - Bidirectional bulk toggle(footer button:全可見 → 全部隱藏 / 任一隱藏 → 顯示全部)\n *\n * **Why 抽 primitive**(per Issue 3 Rule-of-3):RoadmapAllInOne + WithBulkActions + 未來 product\n * UI 至少 3 處消費同 panel。重複 hand-craft → 設計語言 drift(已抓到:Roadmap 版無 search /\n * 無 drag / 無 reset,WithBulkActions 版有,語意不一致)。Primitive 把所有 feature 集中,\n * consumer opt-in via props 確保 SSOT。\n *\n * **對齊**:Linear column-visibility-panel pattern / Material X-DataGrid `<GridColumnsPanel>`\n * / Airtable Field-config drawer。\n */\n\nimport * as React from 'react'\nimport { Eye, EyeOff, Lock, GripVertical, Search, RotateCcw, X as XIcon } from 'lucide-react'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ButtonDivider } from '@/design-system/components/Button/button-group'\nimport { Input } from '@/design-system/components/Input/input'\nimport { ScrollArea } from '@/design-system/components/ScrollArea/scroll-area'\nimport { PopoverHeader, PopoverFooter, PopoverTitle, PopoverClose } from '@/design-system/components/Popover/popover'\nimport { ItemPrefix, ItemLabel, ItemInlineActionButton, ROW_PADDING_BY_SIZE } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { cn } from '@/lib/utils'\nimport { DndContext, closestCenter, type DragEndEvent } from '@dnd-kit/core'\nimport { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { dragSourceStyle } from '@/design-system/lib/drag-visual'\n\ninterface ColumnVisibilityPanelColumn {\n  /** Column id(stable identifier;對齊 DataTable column.id / accessorKey)*/\n  id: string\n  /** Column header label(human-readable)*/\n  label: string\n}\n\nexport interface DataTableColumnVisibilityPanelProps {\n  /** 全部可 toggle 欄位(consumer 已過濾掉 system cols 如 __select__)*/\n  columns: ColumnVisibilityPanelColumn[]\n  /** 受控 visibility map(`true` / undefined = visible / `false` = hidden)*/\n  visibility: Record<string, boolean>\n  /** Visibility 變更 callback */\n  onVisibilityChange: (next: Record<string, boolean>) => void\n  /** 受控 column order(若提供啟 DnD reorder) */\n  columnOrder?: string[]\n  /** Order 變更 callback;若提供 → 啟用 drag handle / DnD reorder */\n  onColumnOrderChange?: (next: string[]) => void\n  /** Locked column ids(顯 Lock icon,不可 toggle / 不可 drag)*/\n  lockedIds?: string[]\n  /** 是否啟搜尋 input(預設 false)*/\n  searchable?: boolean\n  /** 是否顯 reset button(任一欄隱藏才顯,onClick 清空 visibility map)*/\n  resettable?: boolean\n  // Issue 3 post-codex audit(2026-05-10):`onClose` prop retired — Radix `PopoverClose asChild`\n  // 已自帶 popover dismiss,沒 concrete consumer 需 callback。Future 若需要再加。\n}\n\nexport function DataTableColumnVisibilityPanel({\n  columns,\n  visibility,\n  onVisibilityChange,\n  columnOrder,\n  onColumnOrderChange,\n  lockedIds = [],\n  searchable = false,\n  resettable = false,\n}: DataTableColumnVisibilityPanelProps) {\n  const [search, setSearch] = React.useState('')\n  const lockedSet = React.useMemo(() => new Set(lockedIds), [lockedIds])\n  const dndEnabled = !!(columnOrder && onColumnOrderChange)\n\n  // 計算 visible order:用 columnOrder 排,fallback columns 順序。\n  const orderedIds = React.useMemo(() => {\n    if (columnOrder && columnOrder.length > 0) {\n      const colSet = new Set(columns.map((c) => c.id))\n      return columnOrder.filter((id) => colSet.has(id))\n    }\n    return columns.map((c) => c.id)\n  }, [columnOrder, columns])\n\n  const filteredEntries = React.useMemo(() => {\n    return orderedIds\n      .map((id) => columns.find((c) => c.id === id))\n      .filter((c): c is ColumnVisibilityPanelColumn => c != null)\n      .filter((c) => (search ? c.label.toLowerCase().includes(search.toLowerCase()) : true))\n  }, [orderedIds, columns, search])\n\n  const togglableIds = columns.map((c) => c.id).filter((id) => !lockedSet.has(id))\n  const allVisible = togglableIds.every((id) => visibility[id] !== false)\n  const anyHidden = togglableIds.some((id) => visibility[id] === false)\n\n  const handleToggle = (id: string) => {\n    const visible = visibility[id] !== false\n    onVisibilityChange({ ...visibility, [id]: !visible })\n  }\n\n  const handleReset = () => onVisibilityChange({})\n\n  const handleBulkToggle = () => {\n    if (allVisible) {\n      const next: Record<string, boolean> = {}\n      togglableIds.forEach((id) => { next[id] = false })\n      onVisibilityChange(next)\n    } else {\n      onVisibilityChange({})\n    }\n  }\n\n  const handleDragEnd = (e: DragEndEvent) => {\n    if (!dndEnabled) return\n    const { active, over } = e\n    if (!over || active.id === over.id) return\n    const oldIdx = columnOrder!.indexOf(active.id as string)\n    const newIdx = columnOrder!.indexOf(over.id as string)\n    if (oldIdx < 0 || newIdx < 0) return\n    // Locked id 不可被 reorder 動到\n    if (lockedSet.has(columnOrder![oldIdx]) || lockedSet.has(columnOrder![newIdx])) return\n    const next = [...columnOrder!]\n    const [m] = next.splice(oldIdx, 1)\n    next.splice(newIdx, 0, m)\n    onColumnOrderChange!(next)\n  }\n\n  return (\n    <>\n      <PopoverHeader hideClose>\n        <div className=\"flex items-center gap-1 w-full min-w-0\">\n          <PopoverTitle className=\"flex-1\">欄位顯示</PopoverTitle>\n          {resettable && anyHidden && (\n            <>\n              <Button\n                variant=\"text\" size=\"sm\" iconOnly startIcon={RotateCcw}\n                aria-label=\"恢復預設\"\n                onClick={handleReset}\n              />\n              <ButtonDivider />\n            </>\n          )}\n          <PopoverClose asChild>\n            <Button data-dismiss iconOnly dismiss size=\"sm\" startIcon={XIcon} aria-label=\"關閉\" />\n          </PopoverClose>\n        </div>\n      </PopoverHeader>\n      {searchable && (\n        <div className=\"px-[var(--layout-space-loose)] pt-[var(--layout-space-tight)]\">\n          <Input\n            size=\"md\"\n            placeholder=\"搜尋欄位…\"\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n            startIcon={Search}\n          />\n        </div>\n      )}\n      <ScrollArea className=\"max-h-72\">\n        <div className=\"py-2 flex flex-col\" style={{ '--item-prefix-slot': '16px' } as React.CSSProperties}>\n          {dndEnabled ? (\n            <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>\n              <SortableContext\n                items={filteredEntries.map((e) => e.id).filter((id) => !lockedSet.has(id))}\n                strategy={verticalListSortingStrategy}\n              >\n                {filteredEntries.map(({ id, label }) => (\n                  <VisibilityRow\n                    key={id}\n                    id={id}\n                    label={label}\n                    visible={visibility[id] !== false}\n                    locked={lockedSet.has(id)}\n                    draggable\n                    onToggle={() => handleToggle(id)}\n                  />\n                ))}\n              </SortableContext>\n            </DndContext>\n          ) : (\n            filteredEntries.map(({ id, label }) => (\n              <VisibilityRow\n                key={id}\n                id={id}\n                label={label}\n                visible={visibility[id] !== false}\n                locked={lockedSet.has(id)}\n                draggable={false}\n                onToggle={() => handleToggle(id)}\n              />\n            ))\n          )}\n        </div>\n      </ScrollArea>\n      <PopoverFooter className=\"justify-start\">\n        <Button variant=\"tertiary\" size=\"sm\" onClick={handleBulkToggle}>\n          {allVisible ? '全部隱藏' : '顯示全部'}\n        </Button>\n      </PopoverFooter>\n    </>\n  )\n}\n\n// VisibilityRow:single column row。Draggable mode → GripVertical handle / static mode → 無 handle。\nfunction VisibilityRow({\n  id, label, visible, locked, draggable, onToggle,\n}: {\n  id: string\n  label: string\n  visible: boolean\n  locked: boolean\n  draggable: boolean\n  onToggle: () => void\n}) {\n  // Conditional hooks 不行 — 永遠呼 useSortable,只是 disabled 時 listeners no-op\n  const sortable = useSortable({ id, disabled: locked || !draggable })\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = sortable\n  const style: React.CSSProperties = draggable\n    ? { transform: CSS.Transform.toString(transform), transition, ...dragSourceStyle(isDragging) }\n    : {}\n  return (\n    <div\n      ref={draggable ? setNodeRef : undefined}\n      style={style}\n      className={cn(\n        'flex items-start gap-2 w-full px-[var(--layout-space-loose)]',\n        ROW_PADDING_BY_SIZE.md,\n      )}\n    >\n      <ItemPrefix>\n        {/* 2026-05-18 改 per user「做完」approval:14 → 16 對齊 uiSize.spec.md Icon Tier */}\n        {locked ? (\n          <Lock size={16} className=\"text-fg-muted\" aria-hidden />\n        ) : draggable ? (\n          <ItemInlineActionButton\n            icon={GripVertical}\n            size=\"md\"\n            aria-label=\"拖曳重排\"\n            className=\"cursor-grab active:cursor-grabbing\"\n            {...attributes}\n            {...listeners}\n          />\n        ) : null}\n      </ItemPrefix>\n      <ItemLabel className={locked ? 'text-fg-disabled' : undefined}>{label}</ItemLabel>\n      <ItemInlineActionButton\n        icon={visible ? Eye : EyeOff}\n        size=\"md\"\n        aria-label={visible ? '隱藏此欄' : '顯示此欄'}\n        disabled={locked}\n        onClick={onToggle}\n        className={locked ? 'cursor-not-allowed text-fg-disabled' : ''}\n      />\n    </div>\n  )\n}\n"],"names":["XIcon"],"mappings":"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"}
+{"version":3,"file":"data-table-column-visibility-panel.js","sources":["../../../src/components/DataTable/data-table-column-visibility-panel.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\n/**\n * DataTableColumnVisibilityPanel — Issue 3 primitive(2026-05-10)。\n *\n * 從 WithBulkActions story L868+(149 lines)+ RoadmapAllInOne(L1796+,53 lines)抽出 SSOT\n * primitive。Roadmap demo 跟 WithBulkActions 都用此 panel 開啟「欄位顯示」popover。\n *\n * **Feature SSOT**(對齊 Linear / Airtable / Notion / Material X-DataGrid 的 columnVisibility panel idiom):\n *   - 列出所有 togglable 欄位 + Eye / EyeOff 切換\n *   - Locked 欄位(`lockedIds`)— 顯 Lock icon,不可 toggle / 不可 drag\n *   - 可選 search filter(`searchable`,跨欄位 label match)\n *   - 可選 column drag reorder(`onColumnOrderChange` 傳 → 啟 DnD)\n *   - 可選 reset 按鈕(`resettable: boolean` opt-in,header 區 RotateCcw;點擊 `onVisibilityChange({})` 還原全顯示,無獨立 onReset prop)\n *   - Bidirectional bulk toggle(footer button:全可見 → 全部隱藏 / 任一隱藏 → 顯示全部)\n *\n * **Why 抽 primitive**(per Issue 3 Rule-of-3):RoadmapAllInOne + WithBulkActions + 未來 product\n * UI 至少 3 處消費同 panel。重複 hand-craft → 設計語言 drift(已抓到:Roadmap 版無 search /\n * 無 drag / 無 reset,WithBulkActions 版有,語意不一致)。Primitive 把所有 feature 集中,\n * consumer opt-in via props 確保 SSOT。\n *\n * **對齊**:Linear column-visibility-panel pattern / Material X-DataGrid `<GridColumnsPanel>`\n * / Airtable Field-config drawer。\n */\n\nimport * as React from 'react'\nimport { Eye, EyeOff, Lock, GripVertical, Search, RotateCcw, X as XIcon } from 'lucide-react'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ButtonDivider } from '@/design-system/components/Button/button-group'\nimport { Input } from '@/design-system/components/Input/input'\nimport { PopoverHeader, PopoverBody, PopoverFooter, PopoverTitle, PopoverClose } from '@/design-system/components/Popover/popover'\nimport { ItemPrefix, ItemLabel, ItemInlineActionButton, ROW_PADDING_BY_SIZE } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { cn } from '@/lib/utils'\nimport { DndContext, closestCenter, type DragEndEvent } from '@dnd-kit/core'\nimport { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { dragSourceStyle } from '@/design-system/lib/drag-visual'\n\ninterface ColumnVisibilityPanelColumn {\n  /** Column id(stable identifier;對齊 DataTable column.id / accessorKey)*/\n  id: string\n  /** Column header label(human-readable)*/\n  label: string\n}\n\nexport interface DataTableColumnVisibilityPanelProps {\n  /** 全部可 toggle 欄位(consumer 已過濾掉 system cols 如 __select__)*/\n  columns: ColumnVisibilityPanelColumn[]\n  /** 受控 visibility map(`true` / undefined = visible / `false` = hidden)*/\n  visibility: Record<string, boolean>\n  /** Visibility 變更 callback */\n  onVisibilityChange: (next: Record<string, boolean>) => void\n  /** 受控 column order(若提供啟 DnD reorder) */\n  columnOrder?: string[]\n  /** Order 變更 callback;若提供 → 啟用 drag handle / DnD reorder */\n  onColumnOrderChange?: (next: string[]) => void\n  /** Locked column ids(顯 Lock icon,不可 toggle / 不可 drag)*/\n  lockedIds?: string[]\n  /** 是否啟搜尋 input(預設 false)*/\n  searchable?: boolean\n  /** 是否顯 reset button(任一欄隱藏才顯,onClick 清空 visibility map)*/\n  resettable?: boolean\n  // Issue 3 post-codex audit(2026-05-10):`onClose` prop retired — Radix `PopoverClose asChild`\n  // 已自帶 popover dismiss,沒 concrete consumer 需 callback。Future 若需要再加。\n}\n\nexport function DataTableColumnVisibilityPanel({\n  columns,\n  visibility,\n  onVisibilityChange,\n  columnOrder,\n  onColumnOrderChange,\n  lockedIds = [],\n  searchable = false,\n  resettable = false,\n}: DataTableColumnVisibilityPanelProps) {\n  const [search, setSearch] = React.useState('')\n  const lockedSet = React.useMemo(() => new Set(lockedIds), [lockedIds])\n  const dndEnabled = !!(columnOrder && onColumnOrderChange)\n\n  // 計算 visible order:用 columnOrder 排,fallback columns 順序。\n  const orderedIds = React.useMemo(() => {\n    if (columnOrder && columnOrder.length > 0) {\n      const colSet = new Set(columns.map((c) => c.id))\n      return columnOrder.filter((id) => colSet.has(id))\n    }\n    return columns.map((c) => c.id)\n  }, [columnOrder, columns])\n\n  const filteredEntries = React.useMemo(() => {\n    return orderedIds\n      .map((id) => columns.find((c) => c.id === id))\n      .filter((c): c is ColumnVisibilityPanelColumn => c != null)\n      .filter((c) => (search ? c.label.toLowerCase().includes(search.toLowerCase()) : true))\n  }, [orderedIds, columns, search])\n\n  const togglableIds = columns.map((c) => c.id).filter((id) => !lockedSet.has(id))\n  const allVisible = togglableIds.every((id) => visibility[id] !== false)\n  const anyHidden = togglableIds.some((id) => visibility[id] === false)\n\n  const handleToggle = (id: string) => {\n    const visible = visibility[id] !== false\n    onVisibilityChange({ ...visibility, [id]: !visible })\n  }\n\n  const handleReset = () => onVisibilityChange({})\n\n  const handleBulkToggle = () => {\n    if (allVisible) {\n      const next: Record<string, boolean> = {}\n      togglableIds.forEach((id) => { next[id] = false })\n      onVisibilityChange(next)\n    } else {\n      onVisibilityChange({})\n    }\n  }\n\n  const handleDragEnd = (e: DragEndEvent) => {\n    if (!dndEnabled) return\n    const { active, over } = e\n    if (!over || active.id === over.id) return\n    const oldIdx = columnOrder!.indexOf(active.id as string)\n    const newIdx = columnOrder!.indexOf(over.id as string)\n    if (oldIdx < 0 || newIdx < 0) return\n    // Locked id 不可被 reorder 動到\n    if (lockedSet.has(columnOrder![oldIdx]) || lockedSet.has(columnOrder![newIdx])) return\n    const next = [...columnOrder!]\n    const [m] = next.splice(oldIdx, 1)\n    next.splice(newIdx, 0, m)\n    onColumnOrderChange!(next)\n  }\n\n  // 2026-07-18 決策16 錯誤史(明記以免再犯):原本這個 panel 是 Fragment + fixed `ScrollArea max-h-72`,\n  //   與 sibling FilterPanel/SortManager(root-div + viewport-aware SurfaceBody)不一致。我給過**兩個都錯**\n  //   的辯護理由 —— (1)「PopoverHeader 用 -mx 負邊距、包 root 會破壞」= 錯(SurfaceHeader 用正 px-loose+border-b,\n  //   無 -mx);(2)「sibling 自刻 header 不用 primitive」= 錯(三 panel 皆消費 SurfaceHeader/PopoverHeader primitive)。\n  //   真正差異只是 body/scroll 策略。multi-agent SSOT consistency 稽核定案:**是 drift,該統一**(fixed 288px cap\n  //   在高螢幕多欄下劣於 sibling 的 viewport-adaptive;且是唯一不能當 template 複製的 panel)。故下方已改成 canonical shape。\n  return (\n    // 決策16 定案(2026-07-18,SSOT consistency 稽核後):對齊 sibling FilterPanel/SortManager 的\n    //   overlay-surface canonical shape —— root `<div flex flex-col h-full min-h-0>`(M25 viewport-aware\n    //   scroll chain)+ viewport-adaptive `PopoverBody`(取代原 fixed `ScrollArea max-h-72`)。三個\n    //   DataTable state-panel 收斂成同一形狀,body 隨視窗高度自適應(高螢幕多欄不再硬卡 288px)。\n    //   寬度仍由 consumer 的 `<PopoverContent w-72>` 提供(panel root w-full 撐滿)。\n    <div className=\"flex flex-col h-full min-h-0 w-full\">\n      <PopoverHeader hideClose>\n        <div className=\"flex items-center gap-1 w-full min-w-0\">\n          <PopoverTitle className=\"flex-1\">欄位顯示</PopoverTitle>\n          {resettable && anyHidden && (\n            <>\n              <Button\n                variant=\"text\" size=\"sm\" iconOnly startIcon={RotateCcw}\n                aria-label=\"恢復預設\"\n                onClick={handleReset}\n              />\n              <ButtonDivider />\n            </>\n          )}\n          <PopoverClose asChild>\n            <Button data-dismiss iconOnly dismiss size=\"sm\" startIcon={XIcon} aria-label=\"關閉\" />\n          </PopoverClose>\n        </div>\n      </PopoverHeader>\n      {searchable && (\n        <div className=\"shrink-0 px-[var(--layout-space-loose)] pt-[var(--layout-space-tight)]\">\n          <Input\n            size=\"md\"\n            placeholder=\"搜尋欄位…\"\n            aria-label=\"搜尋欄位\"\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n            startIcon={Search}\n          />\n        </div>\n      )}\n      {/* viewport-adaptive body(List-as-region idiom:PopoverBody !px-0 !py-0 撤 chrome padding,\n          內層 py-2 給垂直呼吸、row 自帶 px-loose 水平 padding)。取代原 fixed ScrollArea max-h-72。 */}\n      <PopoverBody className=\"!px-0 !py-0\">\n        <div className=\"py-2 flex flex-col\" style={{ '--item-prefix-slot': '16px' } as React.CSSProperties}>\n          {dndEnabled ? (\n            <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>\n              <SortableContext\n                items={filteredEntries.map((e) => e.id).filter((id) => !lockedSet.has(id))}\n                strategy={verticalListSortingStrategy}\n              >\n                {filteredEntries.map(({ id, label }) => (\n                  <VisibilityRow\n                    key={id}\n                    id={id}\n                    label={label}\n                    visible={visibility[id] !== false}\n                    locked={lockedSet.has(id)}\n                    draggable\n                    onToggle={() => handleToggle(id)}\n                  />\n                ))}\n              </SortableContext>\n            </DndContext>\n          ) : (\n            filteredEntries.map(({ id, label }) => (\n              <VisibilityRow\n                key={id}\n                id={id}\n                label={label}\n                visible={visibility[id] !== false}\n                locked={lockedSet.has(id)}\n                draggable={false}\n                onToggle={() => handleToggle(id)}\n              />\n            ))\n          )}\n        </div>\n      </PopoverBody>\n      <PopoverFooter className=\"justify-start\">\n        <Button variant=\"tertiary\" size=\"sm\" onClick={handleBulkToggle}>\n          {allVisible ? '全部隱藏' : '顯示全部'}\n        </Button>\n      </PopoverFooter>\n    </div>\n  )\n}\n\n// VisibilityRow:single column row。Draggable mode → GripVertical handle / static mode → 無 handle。\nfunction VisibilityRow({\n  id, label, visible, locked, draggable, onToggle,\n}: {\n  id: string\n  label: string\n  visible: boolean\n  locked: boolean\n  draggable: boolean\n  onToggle: () => void\n}) {\n  // Conditional hooks 不行 — 永遠呼 useSortable,只是 disabled 時 listeners no-op\n  const sortable = useSortable({ id, disabled: locked || !draggable })\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = sortable\n  const style: React.CSSProperties = draggable\n    ? { transform: CSS.Transform.toString(transform), transition, ...dragSourceStyle(isDragging) }\n    : {}\n  return (\n    <div\n      ref={draggable ? setNodeRef : undefined}\n      style={style}\n      className={cn(\n        'flex items-start gap-2 w-full px-[var(--layout-space-loose)]',\n        ROW_PADDING_BY_SIZE.md,\n      )}\n    >\n      <ItemPrefix>\n        {/* 2026-05-18 改 per user「做完」approval:14 → 16 對齊 uiSize.spec.md Icon Tier */}\n        {locked ? (\n          <Lock size={16} className=\"text-fg-muted\" aria-hidden />\n        ) : draggable ? (\n          <ItemInlineActionButton\n            icon={GripVertical}\n            size=\"md\"\n            aria-label=\"拖曳重排\"\n            className=\"cursor-grab active:cursor-grabbing\"\n            {...attributes}\n            {...listeners}\n          />\n        ) : null}\n      </ItemPrefix>\n      <ItemLabel className={locked ? 'text-fg-disabled' : undefined}>{label}</ItemLabel>\n      <ItemInlineActionButton\n        icon={visible ? Eye : EyeOff}\n        size=\"md\"\n        aria-label={visible ? '隱藏此欄' : '顯示此欄'}\n        disabled={locked}\n        onClick={onToggle}\n        className={locked ? 'cursor-not-allowed text-fg-disabled' : ''}\n      />\n    </div>\n  )\n}\n"],"names":["XIcon"],"mappings":"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"}

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

@@ -4,8 +4,6 @@ import { createEmptyFilterTree, isFilterTreeActive, evaluateTree, dataTableFilte
 export { createEmptyFilterTree, isFilterTreeActive, evaluateTree, dataTableFilterMatch, };
 export type { Conjunction, FilterCondition, FilterGroup, FilterTree, FilterTreeFlat, FilterTreeNested };
 export interface DataTableFilterPanelProps<TData> {
-    /** flat(無 group)or nested(1-level group)— consumer 拍板 */
-    mode: 'flat' | 'nested';
     /** 可被 filter 的 columns */
     columns: ColumnDef<TData, any>[];
     /** 當前 FilterTree(controlled) */

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

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

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

@@ -61,7 +61,6 @@ const newEmptyGroup = () => ({
   children: [newEmptyCondition()]
 });
 function DataTableFilterPanelInner({
-  mode,
   columns,
   value,
   onChange,
@@ -201,7 +200,7 @@ function DataTableFilterPanelInner({
     // 必加 `min-h-0` 才能讓 panel 在 PopoverContent max-h cap 下正確 shrink + body scroll。
     /* @__PURE__ */ jsxs("div", { ref, className: cn(
       "flex flex-col h-full min-h-0",
-      mode === "nested" ? "w-[min(760px,calc(100vw-2rem))]" : "w-[min(640px,calc(100vw-2rem))]",
+      value.mode === "nested" ? "w-[min(760px,calc(100vw-2rem))]" : "w-[min(640px,calc(100vw-2rem))]",
       className
     ), children: [
       /* @__PURE__ */ jsxs(SurfaceHeader, { className: COMPACT_HEADER_SLOT, children: [
@@ -265,8 +264,8 @@ function DataTableFilterPanelInner({
             variant: "tertiary",
             size: "sm",
             startIcon: Plus,
-            onClick: mode === "flat" ? addFlatCondition : addGroup,
-            children: mode === "nested" ? "加入篩選器" : "加篩選"
+            onClick: value.mode === "flat" ? addFlatCondition : addGroup,
+            children: value.mode === "nested" ? "加入篩選器" : "加篩選"
           }
         ) })
       ] })

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-filter-panel.js","sources":["../../../src/components/DataTable/data-table-filter-panel.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\n// same-row-mixed-allow: header chrome corner buttons(close)跟 row inline actions(trash)不在同 row\nimport * as React from 'react'\nimport { Plus, X as XIcon, RotateCcw } from 'lucide-react'\nimport type { ColumnDef } from '@tanstack/react-table'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\nimport type { SelectOption } from '@/design-system/components/Select/select'\nimport { SurfaceHeader, SurfaceBody, COMPACT_HEADER_SLOT } from '@/design-system/patterns/overlay-surface/overlay-surface'\nimport { PopoverTitle, PopoverClose } from '@/design-system/components/Popover/popover'\nimport { ButtonDivider } from '@/design-system/components/Button/button-group'\nimport type { ColumnType } from './column-types'\nimport { getColumnId, getColumnLabel, getColumnMeta } from './lib/column-meta'\nimport {\n  FilterRow,\n  GroupBlock,\n  getDefaultOperator,\n  datePrecisionOf,\n  type FilterColumn,\n} from './data-table-filter-group'\nimport {\n  createEmptyFilterTree,\n  isFilterTreeActive,\n  isFilterTreeEqual,\n  evaluateTree,\n  dataTableFilterMatch,\n  type Conjunction,\n  type FilterCondition,\n  type FilterGroup,\n  type FilterTree,\n  type FilterTreeFlat,\n  type FilterTreeNested,\n} from './filter-tree'\n\n// Re-export public API from filter-tree(consumer 既有 import path 不變)\nexport {\n  createEmptyFilterTree,\n  isFilterTreeActive,\n  evaluateTree,\n  dataTableFilterMatch,\n}\nexport type { Conjunction, FilterCondition, FilterGroup, FilterTree, FilterTreeFlat, FilterTreeNested }\n\n/**\n * DataTableFilterPanel — ClickUp-style 進階篩選 panel\n *\n * 對齊 ClickUp / Airtable / Notion / Coda / Linear advanced-filter 派 —\n * parenthesized boolean expression builder。\n *\n * 兩種 mode 由 consumer 拍板:\n * - `flat`:root 下只能裝 condition,無 group\n * - `nested`:root 下裝 1+ group(灰底框),每個 group 內裝 1+ condition,**剛好 1 層**\n *\n * Source-of-truth:\n * - Operator definitions:`./filter-operators.ts` `OPERATOR_REGISTRY`(SSOT,禁 hardcode op 字串)\n * - Filter state:**FilterTree**(本檔自管;搭配 TanStack `globalFilter` 求值)\n * - Row / nested-group renderer:`./data-table-filter-group.tsx`;value picker:\n *   `./data-table-filter-value-picker.tsx`(皆 @internal — 2026-07-14 file-size 拆檔,\n *   本檔只留 orchestration:columns 抽取 / FilterTree mutators / panel chrome)\n *\n * 詳:`./filter-operators.spec.md`\n */\n\n// ── Internal — id seed ──────────────────────────────────────────────────\n\nlet _idSeed = 0\nconst newId = () => `f${++_idSeed}-${Date.now().toString(36)}`\n\n// ── Helpers — column extraction + condition factories ──────────────────\n// (FilterColumn type + operator helpers 住 ./data-table-filter-group.tsx)\n\nfunction extractColumns<TData>(columns: ColumnDef<TData, any>[]): FilterColumn[] {\n  const out: FilterColumn[] = []\n  for (const col of columns) {\n    const id = getColumnId(col)\n    if (!id || id === '__select__') continue\n    const meta = getColumnMeta(col)\n    const type: ColumnType | undefined = meta?.type\n    if (!type) continue\n    if (meta?.filterable === false) continue\n    out.push({\n      id,\n      label: getColumnLabel(col, id),\n      type,\n      options: meta?.options,\n      people: meta?.people,\n      includeTime: meta?.includeTime,\n    })\n  }\n  return out\n}\n\nconst newCondition = (firstCol: FilterColumn | undefined): FilterCondition => ({\n  kind: 'cond',\n  id: newId(),\n  field: firstCol?.id ?? '',\n  op: firstCol ? getDefaultOperator(firstCol.type) : '',\n  value: '',\n  datePrecision: datePrecisionOf(firstCol),\n})\n\n// **G fix(2026-05-04)**:initial-mount 用 — field 不預選,user 自選後 op/value 才 enable\n//   Disabled state(field='')→ op + value 在 FilterRow 內走 `disabled={!hasField}` 自動連動\nconst newEmptyCondition = (): FilterCondition => ({\n  kind: 'cond',\n  id: newId(),\n  field: '',\n  op: '',\n  value: '',\n})\n\nconst newGroup = (firstCol: FilterColumn | undefined): FilterGroup => ({\n  kind: 'group',\n  id: newId(),\n  conjunction: 'or',                                // group 內 default OR(對齊 ref 圖)\n  children: [newCondition(firstCol)],\n})\n\nconst newEmptyGroup = (): FilterGroup => ({\n  kind: 'group',\n  id: newId(),\n  conjunction: 'or',\n  children: [newEmptyCondition()],\n})\n\n// ── Component Props ─────────────────────────────────────────────────────\n\nexport interface DataTableFilterPanelProps<TData> {\n  /** flat(無 group)or nested(1-level group)— consumer 拍板 */\n  mode: 'flat' | 'nested'\n  /** 可被 filter 的 columns */\n  columns: ColumnDef<TData, any>[]\n  /** 當前 FilterTree(controlled) */\n  value: FilterTree\n  /** state 變更 callback */\n  onChange: (next: FilterTree) => void\n  /**\n   * 管理員 set-as-default 的 baseline(refresh icon 顯示判定用)。\n   * 當 `value` ≠ `defaultValue`(deep equal)→ panel header 顯示 refresh icon,\n   * click → reset 回 defaultValue。對齊 sort 邏輯(相同 modified-from-default UX)。\n   */\n  defaultValue?: FilterTree\n  /** Cell ⌄ menu「Filter by this」帶入的 column id(自動 add 一條 condition) */\n  prefilledColumnId?: string\n  onPrefillConsumed?: () => void\n  onClose?: () => void\n  className?: string\n}\n\n// ── Main Component ──────────────────────────────────────────────────────\n\n// 內部 fn — generic + ref 轉發。export 走 cast(對齊 DataTable 同 pattern)\nfunction DataTableFilterPanelInner<TData>({\n  mode,\n  columns,\n  value,\n  onChange,\n  defaultValue,\n  prefilledColumnId,\n  onPrefillConsumed,\n  onClose,\n  className,\n}: DataTableFilterPanelProps<TData>, ref: React.ForwardedRef<HTMLDivElement>): React.ReactElement {\n  const filterableColumns = React.useMemo(() => extractColumns(columns), [columns])\n  const fieldOptions: SelectOption[] = React.useMemo(\n    () => filterableColumns.map((c) => ({ value: c.id, label: c.label })),\n    [filterableColumns],\n  )\n  // K13 後 firstCol 不再被 add* 消費(改用 newEmpty*),這裡只留 prefill effect 用(已直接讀 prefilledColumnId)。\n\n  // **G fix(2026-05-04 v2)**:initial-mount 預設 1 empty row(field 未選 → op+value 自動 disabled)\n  //   useRef gate → 只 mount 一次;user 後續手動刪光 → 不 re-add → 維持「全清 = empty CTA only」UX\n  //   Two states clearly separated:\n  //     (a) Initial mount with empty value → auto-add 1 empty row(讓 user 看到 row shape,不必先點 CTA)\n  //     (b) User explicitly deletes all → empty CTA only(無 row,respect user intent)\n  const initialMountDoneRef = React.useRef(false)\n  React.useEffect(() => {\n    if (initialMountDoneRef.current) return\n    initialMountDoneRef.current = true\n    if (filterableColumns.length === 0) return\n    if (value.children.length > 0) return\n    if (value.mode === 'flat') {\n      onChange({ ...value, children: [newEmptyCondition()] } as FilterTreeFlat)\n    } else {\n      onChange({ ...value, children: [newEmptyGroup()] } as FilterTreeNested)\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [filterableColumns.length])\n\n  // Prefill from cell ⌄ menu「Filter by this」\n  React.useEffect(() => {\n    if (!prefilledColumnId) return\n    const colInfo = filterableColumns.find((c) => c.id === prefilledColumnId)\n    if (colInfo) {\n      const cond: FilterCondition = {\n        kind: 'cond',\n        id: newId(),\n        field: prefilledColumnId,\n        op: getDefaultOperator(colInfo.type),\n        value: '',\n        // 2026-07-14 deep-audit fix:補 datePrecision(原漏 → datetime(includeTime=true)欄\n        // prefill 掉到 undefined=day 精度忽略 ms;對齊初始 add / changeField 路徑的 datePrecisionOf)\n        datePrecision: datePrecisionOf(colInfo),\n      }\n      if (value.mode === 'flat') {\n        onChange({ ...value, children: [...value.children, cond] })\n      } else {\n        // nested mode:add 到第 1 個 group(若無則新建)\n        if (value.children.length === 0) {\n          onChange({ ...value, children: [{ ...newGroup(colInfo), children: [cond] }] })\n        } else {\n          const updatedGroups = value.children.map((g, i) =>\n            i === 0 ? { ...g, children: [...g.children, cond] } : g\n          )\n          onChange({ ...value, children: updatedGroups })\n        }\n      }\n    }\n    onPrefillConsumed?.()\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [prefilledColumnId])\n\n  // ── flat-mode mutators ──\n  const flatTree = value.mode === 'flat' ? value : null\n  const updateFlatCondition = (id: string, patch: Partial<FilterCondition>) => {\n    if (!flatTree) return\n    onChange({\n      ...flatTree,\n      children: flatTree.children.map((c) => (c.id === id ? { ...c, ...patch } : c)),\n    })\n  }\n  const removeFlatCondition = (id: string) => {\n    if (!flatTree) return\n    onChange({ ...flatTree, children: flatTree.children.filter((c) => c.id !== id) })\n  }\n  const addFlatCondition = () => {\n    if (!flatTree) return\n    // K13 fix(2026-05-04):加篩選 → empty row(field 未選 → op+value disabled)\n    //   World-class:Notion / Coda / ClickUp 不 auto-select;對齊 initial mount canonical\n    onChange({ ...flatTree, children: [...flatTree.children, newEmptyCondition()] })\n  }\n  const setFlatConjunction = (conj: Conjunction) => {\n    if (!flatTree) return\n    onChange({ ...flatTree, conjunction: conj })\n  }\n\n  // ── nested-mode mutators ──\n  const nestedTree = value.mode === 'nested' ? value : null\n  const updateGroup = (groupId: string, patch: Partial<FilterGroup>) => {\n    if (!nestedTree) return\n    onChange({\n      ...nestedTree,\n      children: nestedTree.children.map((g) => (g.id === groupId ? { ...g, ...patch } : g)),\n    })\n  }\n  const updateGroupCondition = (groupId: string, condId: string, patch: Partial<FilterCondition>) => {\n    if (!nestedTree) return\n    onChange({\n      ...nestedTree,\n      children: nestedTree.children.map((g) =>\n        g.id === groupId\n          ? { ...g, children: g.children.map((c) => (c.id === condId ? { ...c, ...patch } : c)) }\n          : g\n      ),\n    })\n  }\n  const removeGroupCondition = (groupId: string, condId: string) => {\n    if (!nestedTree) return\n    onChange({\n      ...nestedTree,\n      children: nestedTree.children.map((g) =>\n        g.id === groupId ? { ...g, children: g.children.filter((c) => c.id !== condId) } : g\n      ),\n    })\n  }\n  // K13 fix(2026-05-04):同 addFlatCondition,巢狀內加條件也 empty row\n  const addConditionToGroup = (groupId: string) => {\n    if (!nestedTree) return\n    onChange({\n      ...nestedTree,\n      children: nestedTree.children.map((g) =>\n        g.id === groupId ? { ...g, children: [...g.children, newEmptyCondition()] } : g\n      ),\n    })\n  }\n  const removeGroup = (groupId: string) => {\n    if (!nestedTree) return\n    onChange({ ...nestedTree, children: nestedTree.children.filter((g) => g.id !== groupId) })\n  }\n  const addGroup = () => {\n    if (!nestedTree) return\n    // K13:加群組也用 empty group\n    onChange({ ...nestedTree, children: [...nestedTree.children, newEmptyGroup()] })\n  }\n  const setRootConjunction = (conj: Conjunction) => {\n    if (!nestedTree) return\n    onChange({ ...nestedTree, conjunction: conj })\n  }\n\n  return (\n    // 寬度策略:desktop 680px;mobile 縮到 viewport 內留 32px 邊(避溢出 popover 切右半)。\n    // 對齊 Notion / Airtable 的 advanced filter 在 mobile 走 full-width 邊處理。\n    // **#8 fix(2026-05-04)**:popover width by mode(由 cell min-w 與 group nested chrome 反推)\n    //   flat:cell ConjunctionLabel(80) + gap-2(8) + FCG(field-min 160 + op-min 120 + value 200) +\n    //         gap-2(8) + trash(28) + 2×loose padding(32) = ~636 → 640px\n    //   nested:再加 group p-2 (16) + outer ConjunctionLabel (80) + outer gap (8) → ~740 → 760px\n    //   對齊 Airtable / Notion / Linear filter row 視覺密度 @benchmark-unverified(non-OSS)\n    // **K11 fix(2026-05-04)**:viewport-aware scroll chain invariant\n    //   parent PopoverContent 是 flex flex-col + max-h + overflow-hidden,\n    //   panel root 必 forward `flex flex-col h-full` 才能讓 SurfaceBody flex-1 min-h-0 overflow-y-auto 生效\n    //   無此 forward → 中間 wrapper 斷鏈 → body 不 scroll(ProfileCard 因為自身設 max-h flex-col 才繞過)\n    //   詳 overlay-surface.spec.md「viewport-aware scroll chain invariant」段\n    // K11 v2 fix(2026-05-04):flex item 預設 min-h:auto 讓 content 撐 height,h-full 失效。\n    // 必加 `min-h-0` 才能讓 panel 在 PopoverContent max-h cap 下正確 shrink + body scroll。\n    <div ref={ref} className={cn(\n      'flex flex-col h-full min-h-0',\n      mode === 'nested'\n        ? 'w-[min(760px,calc(100vw-2rem))]'\n        : 'w-[min(640px,calc(100vw-2rem))]',\n      className,\n    )}>\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        {/* Refresh icon — 只在 value ≠ defaultValue 時顯示(對齊 sort modified-from-default UX)\n            含 ButtonDivider 對齊「欄位顯示」+「排序」chrome corner action canonical(2026-05-04) */}\n        {defaultValue && !isFilterTreeEqual(value, defaultValue) && (\n          <>\n            <Button\n              variant=\"text\" size=\"sm\" iconOnly startIcon={RotateCcw}\n              aria-label=\"恢復預設\"\n              onClick={() => onChange(defaultValue)}\n            />\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 — flat / nested 條件;空條件 → 直接顯 + 加篩選 CTA(對齊 Notion / Airtable / Linear inline 派,\n          無條件時不需要 Empty 元件大區塊,單顆 CTA 引導即可。SurfaceFooter 整層拔除,\n          + Add filter / + 加篩選器 inline 緊貼最後一條 row,讓 user 感受到「條件」與「加入」屬同一語境)*/}\n      <SurfaceBody className=\"flex flex-col gap-[var(--layout-space-tight)]\">\n        {flatTree && flatTree.children.map((cond, idx) => (\n          <FilterRow\n            key={cond.id}\n            index={idx}\n            condition={cond}\n            conjunction={flatTree.conjunction}\n            filterableColumns={filterableColumns}\n            fieldOptions={fieldOptions}\n            onChangeConjunction={setFlatConjunction}\n            onChangeField={(v) => {\n              const newCol = filterableColumns.find((c) => c.id === v)\n              updateFlatCondition(cond.id, { field: v, op: getDefaultOperator(newCol?.type), value: '', datePrecision: datePrecisionOf(newCol) })\n            }}\n            onChangeOp={(v) => updateFlatCondition(cond.id, { op: v, value: '' })}\n            onChangeValue={(v) => updateFlatCondition(cond.id, { value: v })}\n            onRemove={() => removeFlatCondition(cond.id)}\n          />\n        ))}\n\n        {nestedTree && nestedTree.children.map((group, gIdx) => (\n          <GroupBlock\n            key={group.id}\n            index={gIdx}\n            group={group}\n            rootConjunction={nestedTree.conjunction}\n            filterableColumns={filterableColumns}\n            fieldOptions={fieldOptions}\n            onChangeRootConjunction={setRootConjunction}\n            onChangeGroupConjunction={(c) => updateGroup(group.id, { conjunction: c })}\n            onChangeCondition={(condId, patch) => updateGroupCondition(group.id, condId, patch)}\n            onRemoveCondition={(condId) => removeGroupCondition(group.id, condId)}\n            onAddCondition={() => addConditionToGroup(group.id)}\n            onRemoveGroup={() => removeGroup(group.id)}\n          />\n        ))}\n\n        {/* Inline CTA(2026-05-04 A1)— root-level「加篩選」用 tertiary(視覺輕量但有邊界,\n            符合 root-CTA 視覺重量);nested 內「加入巢狀篩選」走 text variant(更輕,在 group 內 inline)\n            不放 SurfaceFooter:條件與「加入」屬同一語義群,中間插 footer 切斷敘事 */}\n        <div>\n          <Button\n            variant=\"tertiary\" size=\"sm\" startIcon={Plus}\n            onClick={mode === 'flat' ? addFlatCondition : addGroup}\n          >\n            {mode === 'nested' ? '加入篩選器' : '加篩選'}\n          </Button>\n        </div>\n      </SurfaceBody>\n    </div>\n  )\n}\n\n// Generic + ref forward 套 cast 的 idiom — 對齊 DataTable(同檔家)。\n// React.forwardRef 對 generic component 會丟掉 type param,改 cast 成 generic-preserving signature。\nexport const DataTableFilterPanel = React.forwardRef(DataTableFilterPanelInner) as <TData>(\n  props: DataTableFilterPanelProps<TData> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => React.ReactElement\n;(DataTableFilterPanel as { displayName?: string }).displayName = 'DataTableFilterPanel'\n"],"names":["XIcon"],"mappings":"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"}
+{"version":3,"file":"data-table-filter-panel.js","sources":["../../../src/components/DataTable/data-table-filter-panel.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\n// same-row-mixed-allow: header chrome corner buttons(close)跟 row inline actions(trash)不在同 row\nimport * as React from 'react'\nimport { Plus, X as XIcon, RotateCcw } from 'lucide-react'\nimport type { ColumnDef } from '@tanstack/react-table'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\nimport type { SelectOption } from '@/design-system/components/Select/select'\nimport { SurfaceHeader, SurfaceBody, COMPACT_HEADER_SLOT } from '@/design-system/patterns/overlay-surface/overlay-surface'\nimport { PopoverTitle, PopoverClose } from '@/design-system/components/Popover/popover'\nimport { ButtonDivider } from '@/design-system/components/Button/button-group'\nimport type { ColumnType } from './column-types'\nimport { getColumnId, getColumnLabel, getColumnMeta } from './lib/column-meta'\nimport {\n  FilterRow,\n  GroupBlock,\n  getDefaultOperator,\n  datePrecisionOf,\n  type FilterColumn,\n} from './data-table-filter-group'\nimport {\n  createEmptyFilterTree,\n  isFilterTreeActive,\n  isFilterTreeEqual,\n  evaluateTree,\n  dataTableFilterMatch,\n  type Conjunction,\n  type FilterCondition,\n  type FilterGroup,\n  type FilterTree,\n  type FilterTreeFlat,\n  type FilterTreeNested,\n} from './filter-tree'\n\n// Re-export public API from filter-tree(consumer 既有 import path 不變)\nexport {\n  createEmptyFilterTree,\n  isFilterTreeActive,\n  evaluateTree,\n  dataTableFilterMatch,\n}\nexport type { Conjunction, FilterCondition, FilterGroup, FilterTree, FilterTreeFlat, FilterTreeNested }\n\n/**\n * DataTableFilterPanel — ClickUp-style 進階篩選 panel\n *\n * 對齊 ClickUp / Airtable / Notion / Coda / Linear advanced-filter 派 —\n * parenthesized boolean expression builder。\n *\n * 兩種 mode 由 consumer 拍板:\n * - `flat`:root 下只能裝 condition,無 group\n * - `nested`:root 下裝 1+ group(灰底框),每個 group 內裝 1+ condition,**剛好 1 層**\n *\n * Source-of-truth:\n * - Operator definitions:`./filter-operators.ts` `OPERATOR_REGISTRY`(SSOT,禁 hardcode op 字串)\n * - Filter state:**FilterTree**(本檔自管;搭配 TanStack `globalFilter` 求值)\n * - Row / nested-group renderer:`./data-table-filter-group.tsx`;value picker:\n *   `./data-table-filter-value-picker.tsx`(皆 @internal — 2026-07-14 file-size 拆檔,\n *   本檔只留 orchestration:columns 抽取 / FilterTree mutators / panel chrome)\n *\n * 詳:`./filter-operators.spec.md`\n */\n\n// ── Internal — id seed ──────────────────────────────────────────────────\n\nlet _idSeed = 0\nconst newId = () => `f${++_idSeed}-${Date.now().toString(36)}`\n\n// ── Helpers — column extraction + condition factories ──────────────────\n// (FilterColumn type + operator helpers 住 ./data-table-filter-group.tsx)\n\nfunction extractColumns<TData>(columns: ColumnDef<TData, any>[]): FilterColumn[] {\n  const out: FilterColumn[] = []\n  for (const col of columns) {\n    const id = getColumnId(col)\n    if (!id || id === '__select__') continue\n    const meta = getColumnMeta(col)\n    const type: ColumnType | undefined = meta?.type\n    if (!type) continue\n    if (meta?.filterable === false) continue\n    out.push({\n      id,\n      label: getColumnLabel(col, id),\n      type,\n      options: meta?.options,\n      people: meta?.people,\n      includeTime: meta?.includeTime,\n    })\n  }\n  return out\n}\n\nconst newCondition = (firstCol: FilterColumn | undefined): FilterCondition => ({\n  kind: 'cond',\n  id: newId(),\n  field: firstCol?.id ?? '',\n  op: firstCol ? getDefaultOperator(firstCol.type) : '',\n  value: '',\n  datePrecision: datePrecisionOf(firstCol),\n})\n\n// **G fix(2026-05-04)**:initial-mount 用 — field 不預選,user 自選後 op/value 才 enable\n//   Disabled state(field='')→ op + value 在 FilterRow 內走 `disabled={!hasField}` 自動連動\nconst newEmptyCondition = (): FilterCondition => ({\n  kind: 'cond',\n  id: newId(),\n  field: '',\n  op: '',\n  value: '',\n})\n\nconst newGroup = (firstCol: FilterColumn | undefined): FilterGroup => ({\n  kind: 'group',\n  id: newId(),\n  conjunction: 'or',                                // group 內 default OR(對齊 ref 圖)\n  children: [newCondition(firstCol)],\n})\n\nconst newEmptyGroup = (): FilterGroup => ({\n  kind: 'group',\n  id: newId(),\n  conjunction: 'or',\n  children: [newEmptyCondition()],\n})\n\n// ── Component Props ─────────────────────────────────────────────────────\n\nexport interface DataTableFilterPanelProps<TData> {\n  // 2026-07-18 決策17:移除獨立 `mode` prop(單一真相源 = `value.mode` discriminant)——\n  //   舊設計 mode + value.mode 兩來源型別允許矛盾(mode='nested' 配 flat value → CTA 錯文案 + 死操作);\n  //   無外部消費者傳 mode(grep 0),全由 value.mode 推導。對齊 MUI X GridFilterModel / AG Grid 單一 model。\n  /** 可被 filter 的 columns */\n  columns: ColumnDef<TData, any>[]\n  /** 當前 FilterTree(controlled) */\n  value: FilterTree\n  /** state 變更 callback */\n  onChange: (next: FilterTree) => void\n  /**\n   * 管理員 set-as-default 的 baseline(refresh icon 顯示判定用)。\n   * 當 `value` ≠ `defaultValue`(deep equal)→ panel header 顯示 refresh icon,\n   * click → reset 回 defaultValue。對齊 sort 邏輯(相同 modified-from-default UX)。\n   */\n  defaultValue?: FilterTree\n  /** Cell ⌄ menu「Filter by this」帶入的 column id(自動 add 一條 condition) */\n  prefilledColumnId?: string\n  onPrefillConsumed?: () => void\n  onClose?: () => void\n  className?: string\n}\n\n// ── Main Component ──────────────────────────────────────────────────────\n\n// 內部 fn — generic + ref 轉發。export 走 cast(對齊 DataTable 同 pattern)\nfunction DataTableFilterPanelInner<TData>({\n  columns,\n  value,\n  onChange,\n  defaultValue,\n  prefilledColumnId,\n  onPrefillConsumed,\n  onClose,\n  className,\n}: DataTableFilterPanelProps<TData>, ref: React.ForwardedRef<HTMLDivElement>): React.ReactElement {\n  const filterableColumns = React.useMemo(() => extractColumns(columns), [columns])\n  const fieldOptions: SelectOption[] = React.useMemo(\n    () => filterableColumns.map((c) => ({ value: c.id, label: c.label })),\n    [filterableColumns],\n  )\n  // K13 後 firstCol 不再被 add* 消費(改用 newEmpty*),這裡只留 prefill effect 用(已直接讀 prefilledColumnId)。\n\n  // **G fix(2026-05-04 v2)**:initial-mount 預設 1 empty row(field 未選 → op+value 自動 disabled)\n  //   useRef gate → 只 mount 一次;user 後續手動刪光 → 不 re-add → 維持「全清 = empty CTA only」UX\n  //   Two states clearly separated:\n  //     (a) Initial mount with empty value → auto-add 1 empty row(讓 user 看到 row shape,不必先點 CTA)\n  //     (b) User explicitly deletes all → empty CTA only(無 row,respect user intent)\n  const initialMountDoneRef = React.useRef(false)\n  React.useEffect(() => {\n    if (initialMountDoneRef.current) return\n    initialMountDoneRef.current = true\n    if (filterableColumns.length === 0) return\n    if (value.children.length > 0) return\n    if (value.mode === 'flat') {\n      onChange({ ...value, children: [newEmptyCondition()] } as FilterTreeFlat)\n    } else {\n      onChange({ ...value, children: [newEmptyGroup()] } as FilterTreeNested)\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [filterableColumns.length])\n\n  // Prefill from cell ⌄ menu「Filter by this」\n  React.useEffect(() => {\n    if (!prefilledColumnId) return\n    const colInfo = filterableColumns.find((c) => c.id === prefilledColumnId)\n    if (colInfo) {\n      const cond: FilterCondition = {\n        kind: 'cond',\n        id: newId(),\n        field: prefilledColumnId,\n        op: getDefaultOperator(colInfo.type),\n        value: '',\n        // 2026-07-14 deep-audit fix:補 datePrecision(原漏 → datetime(includeTime=true)欄\n        // prefill 掉到 undefined=day 精度忽略 ms;對齊初始 add / changeField 路徑的 datePrecisionOf)\n        datePrecision: datePrecisionOf(colInfo),\n      }\n      if (value.mode === 'flat') {\n        onChange({ ...value, children: [...value.children, cond] })\n      } else {\n        // nested mode:add 到第 1 個 group(若無則新建)\n        if (value.children.length === 0) {\n          onChange({ ...value, children: [{ ...newGroup(colInfo), children: [cond] }] })\n        } else {\n          const updatedGroups = value.children.map((g, i) =>\n            i === 0 ? { ...g, children: [...g.children, cond] } : g\n          )\n          onChange({ ...value, children: updatedGroups })\n        }\n      }\n    }\n    onPrefillConsumed?.()\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [prefilledColumnId])\n\n  // ── flat-mode mutators ──\n  const flatTree = value.mode === 'flat' ? value : null\n  const updateFlatCondition = (id: string, patch: Partial<FilterCondition>) => {\n    if (!flatTree) return\n    onChange({\n      ...flatTree,\n      children: flatTree.children.map((c) => (c.id === id ? { ...c, ...patch } : c)),\n    })\n  }\n  const removeFlatCondition = (id: string) => {\n    if (!flatTree) return\n    onChange({ ...flatTree, children: flatTree.children.filter((c) => c.id !== id) })\n  }\n  const addFlatCondition = () => {\n    if (!flatTree) return\n    // K13 fix(2026-05-04):加篩選 → empty row(field 未選 → op+value disabled)\n    //   World-class:Notion / Coda / ClickUp 不 auto-select;對齊 initial mount canonical\n    onChange({ ...flatTree, children: [...flatTree.children, newEmptyCondition()] })\n  }\n  const setFlatConjunction = (conj: Conjunction) => {\n    if (!flatTree) return\n    onChange({ ...flatTree, conjunction: conj })\n  }\n\n  // ── nested-mode mutators ──\n  const nestedTree = value.mode === 'nested' ? value : null\n  const updateGroup = (groupId: string, patch: Partial<FilterGroup>) => {\n    if (!nestedTree) return\n    onChange({\n      ...nestedTree,\n      children: nestedTree.children.map((g) => (g.id === groupId ? { ...g, ...patch } : g)),\n    })\n  }\n  const updateGroupCondition = (groupId: string, condId: string, patch: Partial<FilterCondition>) => {\n    if (!nestedTree) return\n    onChange({\n      ...nestedTree,\n      children: nestedTree.children.map((g) =>\n        g.id === groupId\n          ? { ...g, children: g.children.map((c) => (c.id === condId ? { ...c, ...patch } : c)) }\n          : g\n      ),\n    })\n  }\n  const removeGroupCondition = (groupId: string, condId: string) => {\n    if (!nestedTree) return\n    onChange({\n      ...nestedTree,\n      children: nestedTree.children.map((g) =>\n        g.id === groupId ? { ...g, children: g.children.filter((c) => c.id !== condId) } : g\n      ),\n    })\n  }\n  // K13 fix(2026-05-04):同 addFlatCondition,巢狀內加條件也 empty row\n  const addConditionToGroup = (groupId: string) => {\n    if (!nestedTree) return\n    onChange({\n      ...nestedTree,\n      children: nestedTree.children.map((g) =>\n        g.id === groupId ? { ...g, children: [...g.children, newEmptyCondition()] } : g\n      ),\n    })\n  }\n  const removeGroup = (groupId: string) => {\n    if (!nestedTree) return\n    onChange({ ...nestedTree, children: nestedTree.children.filter((g) => g.id !== groupId) })\n  }\n  const addGroup = () => {\n    if (!nestedTree) return\n    // K13:加群組也用 empty group\n    onChange({ ...nestedTree, children: [...nestedTree.children, newEmptyGroup()] })\n  }\n  const setRootConjunction = (conj: Conjunction) => {\n    if (!nestedTree) return\n    onChange({ ...nestedTree, conjunction: conj })\n  }\n\n  return (\n    // 寬度策略:desktop 680px;mobile 縮到 viewport 內留 32px 邊(避溢出 popover 切右半)。\n    // 對齊 Notion / Airtable 的 advanced filter 在 mobile 走 full-width 邊處理。\n    // **#8 fix(2026-05-04)**:popover width by mode(由 cell min-w 與 group nested chrome 反推)\n    //   flat:cell ConjunctionLabel(80) + gap-2(8) + FCG(field-min 160 + op-min 120 + value 200) +\n    //         gap-2(8) + trash(28) + 2×loose padding(32) = ~636 → 640px\n    //   nested:再加 group p-2 (16) + outer ConjunctionLabel (80) + outer gap (8) → ~740 → 760px\n    //   對齊 Airtable / Notion / Linear filter row 視覺密度 @benchmark-unverified(non-OSS)\n    // **K11 fix(2026-05-04)**:viewport-aware scroll chain invariant\n    //   parent PopoverContent 是 flex flex-col + max-h + overflow-hidden,\n    //   panel root 必 forward `flex flex-col h-full` 才能讓 SurfaceBody flex-1 min-h-0 overflow-y-auto 生效\n    //   無此 forward → 中間 wrapper 斷鏈 → body 不 scroll(ProfileCard 因為自身設 max-h flex-col 才繞過)\n    //   詳 overlay-surface.spec.md「viewport-aware scroll chain invariant」段\n    // K11 v2 fix(2026-05-04):flex item 預設 min-h:auto 讓 content 撐 height,h-full 失效。\n    // 必加 `min-h-0` 才能讓 panel 在 PopoverContent max-h cap 下正確 shrink + body scroll。\n    <div ref={ref} className={cn(\n      'flex flex-col h-full min-h-0',\n      value.mode === 'nested'\n        ? 'w-[min(760px,calc(100vw-2rem))]'\n        : 'w-[min(640px,calc(100vw-2rem))]',\n      className,\n    )}>\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        {/* Refresh icon — 只在 value ≠ defaultValue 時顯示(對齊 sort modified-from-default UX)\n            含 ButtonDivider 對齊「欄位顯示」+「排序」chrome corner action canonical(2026-05-04) */}\n        {defaultValue && !isFilterTreeEqual(value, defaultValue) && (\n          <>\n            <Button\n              variant=\"text\" size=\"sm\" iconOnly startIcon={RotateCcw}\n              aria-label=\"恢復預設\"\n              onClick={() => onChange(defaultValue)}\n            />\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 — flat / nested 條件;空條件 → 直接顯 + 加篩選 CTA(對齊 Notion / Airtable / Linear inline 派,\n          無條件時不需要 Empty 元件大區塊,單顆 CTA 引導即可。SurfaceFooter 整層拔除,\n          + Add filter / + 加篩選器 inline 緊貼最後一條 row,讓 user 感受到「條件」與「加入」屬同一語境)*/}\n      <SurfaceBody className=\"flex flex-col gap-[var(--layout-space-tight)]\">\n        {flatTree && flatTree.children.map((cond, idx) => (\n          <FilterRow\n            key={cond.id}\n            index={idx}\n            condition={cond}\n            conjunction={flatTree.conjunction}\n            filterableColumns={filterableColumns}\n            fieldOptions={fieldOptions}\n            onChangeConjunction={setFlatConjunction}\n            onChangeField={(v) => {\n              const newCol = filterableColumns.find((c) => c.id === v)\n              updateFlatCondition(cond.id, { field: v, op: getDefaultOperator(newCol?.type), value: '', datePrecision: datePrecisionOf(newCol) })\n            }}\n            onChangeOp={(v) => updateFlatCondition(cond.id, { op: v, value: '' })}\n            onChangeValue={(v) => updateFlatCondition(cond.id, { value: v })}\n            onRemove={() => removeFlatCondition(cond.id)}\n          />\n        ))}\n\n        {nestedTree && nestedTree.children.map((group, gIdx) => (\n          <GroupBlock\n            key={group.id}\n            index={gIdx}\n            group={group}\n            rootConjunction={nestedTree.conjunction}\n            filterableColumns={filterableColumns}\n            fieldOptions={fieldOptions}\n            onChangeRootConjunction={setRootConjunction}\n            onChangeGroupConjunction={(c) => updateGroup(group.id, { conjunction: c })}\n            onChangeCondition={(condId, patch) => updateGroupCondition(group.id, condId, patch)}\n            onRemoveCondition={(condId) => removeGroupCondition(group.id, condId)}\n            onAddCondition={() => addConditionToGroup(group.id)}\n            onRemoveGroup={() => removeGroup(group.id)}\n          />\n        ))}\n\n        {/* Inline CTA(2026-05-04 A1)— root-level「加篩選」用 tertiary(視覺輕量但有邊界,\n            符合 root-CTA 視覺重量);nested 內「加入巢狀篩選」走 text variant(更輕,在 group 內 inline)\n            不放 SurfaceFooter:條件與「加入」屬同一語義群,中間插 footer 切斷敘事 */}\n        <div>\n          <Button\n            variant=\"tertiary\" size=\"sm\" startIcon={Plus}\n            onClick={value.mode === 'flat' ? addFlatCondition : addGroup}\n          >\n            {value.mode === 'nested' ? '加入篩選器' : '加篩選'}\n          </Button>\n        </div>\n      </SurfaceBody>\n    </div>\n  )\n}\n\n// Generic + ref forward 套 cast 的 idiom — 對齊 DataTable(同檔家)。\n// React.forwardRef 對 generic component 會丟掉 type param,改 cast 成 generic-preserving signature。\nexport const DataTableFilterPanel = React.forwardRef(DataTableFilterPanelInner) as <TData>(\n  props: DataTableFilterPanelProps<TData> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => React.ReactElement\n;(DataTableFilterPanel as { displayName?: string }).displayName = 'DataTableFilterPanel'\n"],"names":["XIcon"],"mappings":"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"}

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

@@ -58,8 +58,8 @@ interface DataTableInteractionLayerProps {
      * truthy → layer call this 拿 React node(已 bind value/onCommit/onCancel from controller),
      * 在 ActiveEditorHost portal(z 3,float rect)render 之。
      *
-     * Per codex Q6.2 outline:cell 永遠 mode="display"(SSOT preserved);portal host 渲
-     * mode="edit" 同 registry component;float pass-through + z-index 3 cover display below。
+     * Per codex Q6.2 outline:cell 永遠 mode="view"(SSOT preserved);portal host 渲
+     * mode="edit" 同 registry component;float pass-through + z-index 3 cover view below。
      */
     activeEditorRender?: (cellId: CellId, rect: CellRect) => React.ReactNode;
 }

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":["// @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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"}
+{"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=\"view\"(SSOT preserved);portal host 渲\n   * mode=\"edit\" 同 registry component;float pass-through + z-index 3 cover view 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 view 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

@@ -129,8 +129,8 @@ function SortRow({
         ...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("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(Select, { size: "sm", "aria-label": "排序欄位", options: optionsForRow, value: sort.id, onChange: onChangeId }) }),
+    /* @__PURE__ */ jsx("div", { className: "w-32 shrink-0", children: /* @__PURE__ */ jsx(Select, { size: "sm", "aria-label": "排序方向", 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 })
   ] });
 }