@qijenchen/design-system 0.1.0-beta.10

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

@@ -0,0 +1,49 @@
+/**
+ * DataTableColumnVisibilityPanel — Issue 3 primitive(2026-05-10)。
+ *
+ * 從 WithBulkActions story L868+(149 lines)+ RoadmapAllInOne(L1796+,53 lines)抽出 SSOT
+ * primitive。Roadmap demo 跟 WithBulkActions 都用此 panel 開啟「欄位顯示」popover。
+ *
+ * **Feature SSOT**(對齊 Linear / Airtable / Notion / Material X-DataGrid 的 columnVisibility panel idiom):
+ *   - 列出所有 togglable 欄位 + Eye / EyeOff 切換
+ *   - Locked 欄位(`lockedIds`)— 顯 Lock icon,不可 toggle / 不可 drag
+ *   - 可選 search filter(`searchable`,跨欄位 label match)
+ *   - 可選 column drag reorder(`onColumnOrderChange` 傳 → 啟 DnD)
+ *   - 可選 reset 按鈕(`onReset`,header 區 RotateCcw)
+ *   - Bidirectional bulk toggle(footer button:全可見 → 全部隱藏 / 任一隱藏 → 顯示全部)
+ *
+ * **Why 抽 primitive**(per Issue 3 Rule-of-3):RoadmapAllInOne + WithBulkActions + 未來 product
+ * UI 至少 3 處消費同 panel。重複 hand-craft → 設計語言 drift(已抓到:Roadmap 版無 search /
+ * 無 drag / 無 reset,WithBulkActions 版有,語意不一致)。Primitive 把所有 feature 集中,
+ * consumer opt-in via props 確保 SSOT。
+ *
+ * **對齊**:Linear column-visibility-panel pattern / Material X-DataGrid `<GridColumnsPanel>`
+ * / Airtable Field-config drawer。
+ */
+interface ColumnVisibilityPanelColumn {
+    /** Column id(stable identifier;對齊 DataTable column.id / accessorKey)*/
+    id: string;
+    /** Column header label(human-readable)*/
+    label: string;
+}
+export interface DataTableColumnVisibilityPanelProps {
+    /** 全部可 toggle 欄位(consumer 已過濾掉 system cols 如 __select__)*/
+    columns: ColumnVisibilityPanelColumn[];
+    /** 受控 visibility map(`true` / undefined = visible / `false` = hidden)*/
+    visibility: Record<string, boolean>;
+    /** Visibility 變更 callback */
+    onVisibilityChange: (next: Record<string, boolean>) => void;
+    /** 受控 column order(若提供啟 DnD reorder) */
+    columnOrder?: string[];
+    /** Order 變更 callback;若提供 → 啟用 drag handle / DnD reorder */
+    onColumnOrderChange?: (next: string[]) => void;
+    /** Locked column ids(顯 Lock icon,不可 toggle / 不可 drag)*/
+    lockedIds?: string[];
+    /** 是否啟搜尋 input(預設 false)*/
+    searchable?: boolean;
+    /** 是否顯 reset button(任一欄隱藏才顯,onClick 清空 visibility map)*/
+    resettable?: boolean;
+}
+export declare function DataTableColumnVisibilityPanel({ columns, visibility, onVisibilityChange, columnOrder, onColumnOrderChange, lockedIds, searchable, resettable, }: DataTableColumnVisibilityPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=data-table-column-visibility-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-column-visibility-panel.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/data-table-column-visibility-panel.tsx"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAgBH,UAAU,2BAA2B;IACnC,uEAAuE;IACvE,EAAE,EAAE,MAAM,CAAA;IACV,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,mCAAmC;IAClD,2DAA2D;IAC3D,OAAO,EAAE,2BAA2B,EAAE,CAAA;IACtC,wEAAwE;IACxE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACnC,6BAA6B;IAC7B,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;IAC3D,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IACtB,2DAA2D;IAC3D,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC9C,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,yDAAyD;IACzD,UAAU,CAAC,EAAE,OAAO,CAAA;CAGrB;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,OAAO,EACP,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,mBAAmB,EACnB,SAAc,EACd,UAAkB,EAClB,UAAkB,GACnB,EAAE,mCAAmC,2CAmIrC"}

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { ColumnDef } from '@tanstack/react-table';
+import { createEmptyFilterTree, isFilterTreeActive, evaluateTree, dataTableFilterMatch, type Conjunction, type FilterCondition, type FilterGroup, type FilterTree, type FilterTreeFlat, type FilterTreeNested } from './filter-tree';
+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) */
+    value: FilterTree;
+    /** state 變更 callback */
+    onChange: (next: FilterTree) => void;
+    /**
+     * 管理員 set-as-default 的 baseline(refresh icon 顯示判定用)。
+     * 當 `value` ≠ `defaultValue`(deep equal)→ panel header 顯示 refresh icon,
+     * click → reset 回 defaultValue。對齊 sort 邏輯(相同 modified-from-default UX)。
+     */
+    defaultValue?: FilterTree;
+    /** Cell ⌄ menu「Filter by this」帶入的 column id(自動 add 一條 condition) */
+    prefilledColumnId?: string;
+    onPrefillConsumed?: () => void;
+    onClose?: () => void;
+    className?: string;
+}
+export declare const DataTableFilterPanel: <TData>(props: DataTableFilterPanelProps<TData> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.ReactElement;
+//# sourceMappingURL=data-table-filter-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-filter-panel.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/data-table-filter-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAyBtD,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;AAuTvG,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;AA2PD,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-interaction-layer.d.ts

@@ -0,0 +1,78 @@
+/**
+ * DataTableInteractionLayer — Slice D Step 1A scaffold(per `.claude/planning/datatable-spreadsheet-rfc.md`)
+ *
+ * Singleton overlay root inside DataTable(M21 private,不抽 global pattern)。
+ * 5 sub-layer children(per RFC §Overlay Geometry):
+ *   - HoverCellRect(z 1):hover 邊框,「one geometry owner, two paint owners」(Contract 8)
+ *   - SelectionRect / RangeRect(z 1.5):spreadsheet mode 才顯示(Contract 5,defer)
+ *   - ActiveEditorHost(z 3):portal active edit Field(Slice C wire-up)
+ *   - NestedPortalRegistry(z 4):date/select popup 註冊為 inside editor(Contract 7)
+ *
+ * Slice D Step 1A scope:
+ *   - getCellRect(cellId)geometry source(per Contract 8)
+ *   - HoverCellRect 1 layer 先做(Contract 8 / Contract 15 cellClickEntersEdit predicate)
+ *   - 默認 disabled via `experimentalSpreadsheetOverlay` flag,不破現有 outline
+ *   - 後續 Step 1B/C/D 漸進切換 + 拆 outline
+ */
+import * as React from 'react';
+type CellId = string;
+interface CellRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface DataTableInteractionLayerProps {
+    /** Flag default false:不破現有 outline。enable 後 hover/editor 走 overlay。 */
+    enabled: boolean;
+    /** Container ref;layer absolute position 對 container origin */
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    /** Per Contract 15:`cellClickEntersEdit` predicate;hover overlay 顯示與否 */
+    cellClickEntersEdit?: (cellId: CellId) => boolean;
+    /**
+     * Slice D Step 3 scaffold(2026-05-10):active editor cell id。null = 無 active editor。
+     * 當前只 render rect placeholder layer(z-index 3,higher than hover ring z-index 1)。
+     * Future:ActiveEditorHost portal active edit Field per Contract 8 「two paint owners」。
+     * Wire-up 走 codex Q-7 string-first canary(text cell first,picker types 漸進)。
+     */
+    activeEditorCellId?: CellId | null;
+    /**
+     * Slice D Step 3.x flag:啟用 ActiveEditorHost dashed scaffold rect rendering。
+     * 2026-05-10 bug fix(user 圖1 雙 ring 同時顯示):dashed scaffold 之前綁
+     * `enabled`(= experimentalSpreadsheetOverlay)→ 任何 cell 進 edit mode 就 leak
+     * 出 dashed rect。改 gate 給 `experimentalActiveEditorController`(Step 3.3 真
+     * portal Field 工作),hover overlay scope 不會看到 dashed scaffold。
+     */
+    activeEditorEnabled?: boolean;
+    /**
+     * Slice D Step 4(spreadsheet semantics,2026-05-10 user 圖1 ask + RFC Contract 5):
+     * Excel-like 選取 cell ID。Click 1 select / Click 2 enter edit。
+     * Layer renders solid border SelectionRect(per user「不要 dash 直接實的就好」)。
+     */
+    selectedCellId?: CellId | null;
+    /**
+     * Slice D Step 4 range support(per user「應該支援 range」+ codex Q2.1 Airtable/AG Grid
+     * cite):range cell IDs from anchor↔focus rectangle。Layer renders bg-fill RangeRect
+     * (z 1,bg `--primary-subtle`)+ selection border on focus cell。
+     */
+    rangeCellIds?: CellId[];
+    /**
+     * Slice D Step 5(D.3 portal Field,2026-05-10 user 拍板「在乎完美乾淨」+ codex Q6.1
+     * 撤回 defer):active editor render callback。當 activeEditorEnabled + activeEditorCellId
+     * 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。
+     */
+    activeEditorRender?: (cellId: CellId, rect: CellRect) => React.ReactNode;
+}
+/**
+ * Singleton interaction layer。
+ *
+ * Slice D Step 1A:HoverCellRect only。
+ * Slice D Step 2/3/4:SelectionRect / ActiveEditorHost / RangeRect 漸進加入。
+ */
+export declare function DataTableInteractionLayer({ enabled, containerRef, cellClickEntersEdit, activeEditorCellId, activeEditorEnabled, activeEditorRender, selectedCellId, rangeCellIds: _rangeCellIds, }: DataTableInteractionLayerProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=data-table-interaction-layer.d.ts.map

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

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

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

@@ -0,0 +1,220 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+function getCellRect(containerEl, cellId) {
+  if (!containerEl) return null;
+  const cellEl = containerEl.querySelector(`[data-cell-id="${cellId}"]`);
+  if (!cellEl) return null;
+  const rect = cellEl.getBoundingClientRect();
+  return {
+    x: rect.x,
+    y: rect.y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+function getCellGeometry(containerEl, cellId) {
+  if (!containerEl) return null;
+  const cellEl = containerEl.querySelector(`[data-cell-id="${cellId}"]`);
+  if (!cellEl) return null;
+  const panelEl = cellEl.closest("[data-datatable-panel]");
+  if (!panelEl) return null;
+  const panel = panelEl.dataset.datatablePanel;
+  const cellR = cellEl.getBoundingClientRect();
+  const panelR = panelEl.getBoundingClientRect();
+  return {
+    rect: { x: cellR.x, y: cellR.y, width: cellR.width, height: cellR.height },
+    clipRect: { x: panelR.x, y: panelR.y, width: panelR.width, height: panelR.height },
+    panel
+  };
+}
+function useReactiveRect(containerRef, enabled) {
+  const [, setVersion] = React.useState(0);
+  React.useEffect(() => {
+    if (!enabled) return;
+    let rafId = null;
+    const force = () => {
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        setVersion((v) => v + 1);
+      });
+    };
+    window.addEventListener("scroll", force, { capture: true, passive: true });
+    window.addEventListener("resize", force, { passive: true });
+    const container = containerRef.current;
+    let ro = null;
+    if (container && typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(force);
+      ro.observe(container);
+    }
+    return () => {
+      window.removeEventListener("scroll", force, { capture: true });
+      window.removeEventListener("resize", force);
+      if (ro) ro.disconnect();
+      if (rafId !== null) cancelAnimationFrame(rafId);
+    };
+  }, [enabled, containerRef]);
+}
+function useHoveredCell(containerRef, enabled) {
+  const [hoveredCellId, setHoveredCellId] = React.useState(null);
+  React.useEffect(() => {
+    if (!enabled) {
+      setHoveredCellId(null);
+      return;
+    }
+    const container = containerRef.current;
+    if (!container) return;
+    const handleMouseOver = (e) => {
+      const target = e.target;
+      const cellEl = target == null ? void 0 : target.closest("[data-cell-id]");
+      const id = (cellEl == null ? void 0 : cellEl.dataset.cellId) ?? null;
+      setHoveredCellId(id);
+    };
+    const handleMouseLeave = () => setHoveredCellId(null);
+    container.addEventListener("mouseover", handleMouseOver);
+    container.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      container.removeEventListener("mouseover", handleMouseOver);
+      container.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [enabled, containerRef]);
+  return hoveredCellId;
+}
+function DataTableInteractionLayer({
+  enabled,
+  containerRef,
+  cellClickEntersEdit,
+  activeEditorCellId,
+  activeEditorEnabled = false,
+  activeEditorRender,
+  selectedCellId = null,
+  // rangeCellIds retired 2026-05-10(outer ring 已 retire,range visual 靠 cell-bg `[data-range-cell]`)
+  rangeCellIds: _rangeCellIds
+}) {
+  const hoveredCellId = useHoveredCell(containerRef, enabled);
+  useReactiveRect(containerRef, enabled);
+  const isEditingHovered = activeEditorCellId != null && activeEditorCellId === hoveredCellId;
+  const isSelectedHovered = selectedCellId != null && selectedCellId === hoveredCellId;
+  const shouldShowHover = enabled && hoveredCellId != null && !isEditingHovered && !isSelectedHovered && (cellClickEntersEdit ? cellClickEntersEdit(hoveredCellId) : true);
+  const hoverGeo = shouldShowHover ? getCellGeometry(containerRef.current, hoveredCellId) : null;
+  const activeEditorRect = activeEditorEnabled && activeEditorCellId != null ? getCellRect(containerRef.current, activeEditorCellId) : null;
+  const selectedGeo = enabled && selectedCellId != null ? getCellGeometry(containerRef.current, selectedCellId) : null;
+  if (!enabled) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": true,
+      style: { position: "fixed", inset: 0, pointerEvents: "none", zIndex: 1 },
+      children: [
+        hoverGeo && /* @__PURE__ */ jsx(ClipMask, { clipRect: hoverGeo.clipRect, children: /* @__PURE__ */ jsx(CellRingOverlay, { rect: toRelRect(hoverGeo.rect, hoverGeo.clipRect), kind: "hover" }) }),
+        selectedGeo && /* @__PURE__ */ jsx(ClipMask, { clipRect: selectedGeo.clipRect, children: /* @__PURE__ */ jsx(
+          CellRingOverlay,
+          {
+            rect: toRelRect(selectedGeo.rect, selectedGeo.clipRect),
+            kind: "selected",
+            cellId: selectedCellId
+          }
+        ) }),
+        activeEditorRect && /* @__PURE__ */ jsx(ActiveEditorHost, { rect: activeEditorRect, children: activeEditorRender ? activeEditorRender(activeEditorCellId, activeEditorRect) : null })
+      ]
+    }
+  );
+}
+function toRelRect(cellRect, clipRect) {
+  return {
+    x: cellRect.x - clipRect.x,
+    y: cellRect.y - clipRect.y,
+    width: cellRect.width,
+    height: cellRect.height
+  };
+}
+const CELL_RING_STYLES = {
+  hover: { width: 1, color: "var(--border-hover)", zIndex: 1 },
+  selected: { width: 1, color: "var(--primary)", zIndex: 2 }
+  // future kinds(per codex Q6 outline,加 entry 即可擴展):
+  // focus:  { width: 2, color: 'var(--primary)',      zIndex: 2 },
+  // error:  { width: 1, color: 'var(--error)',        zIndex: 2 },
+};
+function rectStyle(rect) {
+  return {
+    position: "absolute",
+    left: rect.x,
+    top: rect.y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+function CellRingOverlay({ rect, kind, cellId }) {
+  const ring = CELL_RING_STYLES[kind];
+  const dataAttr = kind === "selected" && cellId ? { "data-selected-cell-id": cellId } : {};
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      style: {
+        ...rectStyle(rect),
+        outline: `${ring.width}px solid ${ring.color}`,
+        outlineOffset: `-${ring.width}px`,
+        boxSizing: "border-box",
+        pointerEvents: "none",
+        transition: "none",
+        zIndex: ring.zIndex
+      },
+      ...dataAttr
+    }
+  );
+}
+function ClipMask({ clipRect, children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      style: {
+        position: "absolute",
+        left: clipRect.x,
+        top: clipRect.y,
+        width: clipRect.width,
+        height: clipRect.height,
+        overflow: "hidden",
+        pointerEvents: "none"
+      },
+      children
+    }
+  );
+}
+function ActiveEditorHost({ rect, children }) {
+  if (!children) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        style: {
+          ...rectStyle(rect),
+          pointerEvents: "none",
+          zIndex: 3,
+          border: "1px dashed var(--primary)",
+          boxSizing: "border-box"
+        },
+        "data-active-editor-host-scaffold": true
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        ...rectStyle(rect),
+        pointerEvents: "auto",
+        zIndex: 3,
+        boxSizing: "border-box",
+        background: "var(--canvas)"
+      },
+      "data-active-editor-host": true,
+      children
+    }
+  );
+}
+export {
+  DataTableInteractionLayer
+};
+//# sourceMappingURL=data-table-interaction-layer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-interaction-layer.js","sources":["../../../src/components/DataTable/data-table-interaction-layer.tsx"],"sourcesContent":["/**\n * DataTableInteractionLayer — Slice D Step 1A scaffold(per `.claude/planning/datatable-spreadsheet-rfc.md`)\n *\n * Singleton overlay root inside DataTable(M21 private,不抽 global pattern)。\n * 5 sub-layer children(per RFC §Overlay Geometry):\n *   - HoverCellRect(z 1):hover 邊框,「one geometry owner, two paint owners」(Contract 8)\n *   - SelectionRect / RangeRect(z 1.5):spreadsheet mode 才顯示(Contract 5,defer)\n *   - ActiveEditorHost(z 3):portal active edit Field(Slice C wire-up)\n *   - NestedPortalRegistry(z 4):date/select popup 註冊為 inside editor(Contract 7)\n *\n * Slice D Step 1A scope:\n *   - getCellRect(cellId)geometry source(per Contract 8)\n *   - HoverCellRect 1 layer 先做(Contract 8 / Contract 15 cellClickEntersEdit predicate)\n *   - 默認 disabled via `experimentalSpreadsheetOverlay` flag,不破現有 outline\n *   - 後續 Step 1B/C/D 漸進切換 + 拆 outline\n */\n\nimport * as React from 'react'\n\ntype CellId = string\n\ninterface CellRect {\n  x: number\n  y: number\n  width: number\n  height: number\n}\n\ninterface DataTableInteractionLayerProps {\n  /** Flag default false:不破現有 outline。enable 後 hover/editor 走 overlay。 */\n  enabled: boolean\n  /** Container ref;layer absolute position 對 container origin */\n  containerRef: React.RefObject<HTMLDivElement | null>\n  /** Per Contract 15:`cellClickEntersEdit` predicate;hover overlay 顯示與否 */\n  cellClickEntersEdit?: (cellId: CellId) => boolean\n  /**\n   * Slice D Step 3 scaffold(2026-05-10):active editor cell id。null = 無 active editor。\n   * 當前只 render rect placeholder layer(z-index 3,higher than hover ring z-index 1)。\n   * Future:ActiveEditorHost portal active edit Field per Contract 8 「two paint owners」。\n   * Wire-up 走 codex Q-7 string-first canary(text cell first,picker types 漸進)。\n   */\n  activeEditorCellId?: CellId | null\n  /**\n   * Slice D Step 3.x flag:啟用 ActiveEditorHost dashed scaffold rect rendering。\n   * 2026-05-10 bug fix(user 圖1 雙 ring 同時顯示):dashed scaffold 之前綁\n   * `enabled`(= experimentalSpreadsheetOverlay)→ 任何 cell 進 edit mode 就 leak\n   * 出 dashed rect。改 gate 給 `experimentalActiveEditorController`(Step 3.3 真\n   * portal Field 工作),hover overlay scope 不會看到 dashed scaffold。\n   */\n  activeEditorEnabled?: boolean\n  /**\n   * Slice D Step 4(spreadsheet semantics,2026-05-10 user 圖1 ask + RFC Contract 5):\n   * Excel-like 選取 cell ID。Click 1 select / Click 2 enter edit。\n   * Layer renders solid border SelectionRect(per user「不要 dash 直接實的就好」)。\n   */\n  selectedCellId?: CellId | null\n  /**\n   * Slice D Step 4 range support(per user「應該支援 range」+ codex Q2.1 Airtable/AG Grid\n   * cite):range cell IDs from anchor↔focus rectangle。Layer renders bg-fill RangeRect\n   * (z 1,bg `--primary-subtle`)+ selection border on focus cell。\n   */\n  rangeCellIds?: CellId[]\n  /**\n   * Slice D Step 5(D.3 portal Field,2026-05-10 user 拍板「在乎完美乾淨」+ codex Q6.1\n   * 撤回 defer):active editor render callback。當 activeEditorEnabled + activeEditorCellId\n   * truthy → layer call this 拿 React node(已 bind value/onCommit/onCancel from controller),\n   * 在 ActiveEditorHost portal(z 3,float rect)render 之。\n   *\n   * Per codex Q6.2 outline:cell 永遠 mode=\"display\"(SSOT preserved);portal host 渲\n   * mode=\"edit\" 同 registry component;float pass-through + z-index 3 cover display below。\n   */\n  activeEditorRender?: (cellId: CellId, rect: CellRect) => React.ReactNode\n}\n\n/**\n * `getCellRect(cellId)` geometry source(per Contract 8)。\n *\n * 從 DOM 量(per-call `getBoundingClientRect()`)而非 layoutCache,因為:\n *   1. cell DOM 是 React-rendered,getBoundingClientRect 永遠是 source of truth\n *   2. layoutCache 需另寫 invalidation logic,added complexity\n *   3. Hover overlay re-render 頻率低(per cell hover,不是 per frame)\n *\n * 0.5px sub-pixel snap per RFC §Overlay Geometry。\n */\nfunction getCellRect(containerEl: HTMLElement | null, cellId: CellId): CellRect | null {\n  if (!containerEl) return null\n  const cellEl = containerEl.querySelector<HTMLElement>(`[data-cell-id=\"${cellId}\"]`)\n  if (!cellEl) return null\n  // Page-absolute coords for viewport-fixed layer(per Step 1C bug fix:layer\n  // 用 position:fixed,讓 paint owner 跟 reference frame 解耦 outer container 的 positioning)。\n  // 2026-05-10 v3 fix(user 圖5 SSOT consistency):**float coords no rounding**。\n  //   Cell 自身 layout 用 sub-pixel float position(CSS 不 snap to integer)— 跨 cell 累積\n  //   常見 144.328 / 244.0 / 524.172 等 fractional。任何 Math.round / floor / ceil 都引入\n  //   varying rounding error(visual audit verified:dx=0.17/0.5/0.83 不一致)。\n  //   Float pass-through + outline + outline-offset:-1px(下方 paint)→ overlay 永遠跟\n  //   cell exact pixel-perfect overlap,user verbatim「在內容起始位置不變的前提下讓\n  //   overlay 的邊框直接剛好壓住 cell 邊框」達成。\n  const rect = cellEl.getBoundingClientRect()\n  return {\n    x: rect.x,\n    y: rect.y,\n    width: rect.width,\n    height: rect.height,\n  }\n}\n\n/**\n * Issue 6 viewport clip(2026-05-10):cell 跟 panel(left/center/right)bounding rect 一起取,\n * layer 用 panel rect 當 clip viewport intersect cell rect → overlay 永不畫到 panel 外。\n *\n * Per codex 13-issues verdict:「getCellRect 找最近 scroll viewport;intersect(cellRect, viewportRect),\n * 空 → 不 render,部分 → clipped rect render。」\n *\n * 對齊 AG Grid `cellsForRangeSet` viewport-aware paint / Glide DataGrid clip helpers /\n * Notion sticky-cell virtualizer mask。\n */\ninterface CellGeometry {\n  /** Cell exact viewport rect(no rounding,float pass-through per Bug 5 SSOT) */\n  rect: CellRect\n  /** Nearest panel container rect(left/center/right body)— clip viewport for overlays */\n  clipRect: CellRect\n  /** Panel identifier(`left` / `center` / `right`)— grouped range outer ring 分段用 */\n  panel: 'left' | 'center' | 'right'\n}\n\nfunction getCellGeometry(containerEl: HTMLElement | null, cellId: CellId): CellGeometry | null {\n  if (!containerEl) return null\n  const cellEl = containerEl.querySelector<HTMLElement>(`[data-cell-id=\"${cellId}\"]`)\n  if (!cellEl) return null\n  const panelEl = cellEl.closest<HTMLElement>('[data-datatable-panel]')\n  if (!panelEl) return null\n  const panel = panelEl.dataset.datatablePanel as 'left' | 'center' | 'right'\n  const cellR = cellEl.getBoundingClientRect()\n  const panelR = panelEl.getBoundingClientRect()\n  return {\n    rect: { x: cellR.x, y: cellR.y, width: cellR.width, height: cellR.height },\n    clipRect: { x: panelR.x, y: panelR.y, width: panelR.width, height: panelR.height },\n    panel,\n  }\n}\n\n\n/**\n * Reactive rect sync hook — 確保 overlay rect 跨 RWD / scroll / resize 永遠對齊 cell(2026-05-10\n * user 拍板「所有 overlay 在各種 RWD 和捲動時都能處在正確位置上」)。\n *\n * 監聽 3 source(rAF coalesce 避 frame storm):\n *   1. window scroll(capture mode 抓 nested table body scroll + page scroll)\n *   2. window resize(viewport size change → cell width 變)\n *   3. ResizeObserver on container(column resize / table dimension 變)\n *\n * 每次事件 fire → setVersion(v+1) → 觸發 layer re-render → rect 用最新 getBoundingClientRect\n * 重算。getBoundingClientRect 本身永遠 return 當下 viewport-relative coords,沒 stale cache。\n *\n * Per codex(brief: codex-brief-rwd-future-2026-05-10):rAF coalesce 不需要 debounce,scroll\n * 跟到不延遲才對(Glide / AG Grid 同 idiom)。\n */\nfunction useReactiveRect(containerRef: React.RefObject<HTMLElement | null>, enabled: boolean) {\n  const [, setVersion] = React.useState(0)\n  React.useEffect(() => {\n    if (!enabled) return\n    let rafId: number | null = null\n    const force = () => {\n      if (rafId !== null) return\n      rafId = requestAnimationFrame(() => {\n        rafId = null\n        setVersion((v) => v + 1)\n      })\n    }\n    window.addEventListener('scroll', force, { capture: true, passive: true })\n    window.addEventListener('resize', force, { passive: true })\n    const container = containerRef.current\n    let ro: ResizeObserver | null = null\n    if (container && typeof ResizeObserver !== 'undefined') {\n      ro = new ResizeObserver(force)\n      ro.observe(container)\n    }\n    return () => {\n      window.removeEventListener('scroll', force, { capture: true } as EventListenerOptions)\n      window.removeEventListener('resize', force)\n      if (ro) ro.disconnect()\n      if (rafId !== null) cancelAnimationFrame(rafId)\n    }\n  }, [enabled, containerRef])\n}\n\n/**\n * Hover state hook — 監聽 container hover events,track hovered cell id。\n *\n * Implementation:event delegation on container(不 per-cell mount listeners),\n * 利用 `data-cell-id` attribute + closest()。\n */\nfunction useHoveredCell(\n  containerRef: React.RefObject<HTMLElement | null>,\n  enabled: boolean,\n): CellId | null {\n  const [hoveredCellId, setHoveredCellId] = React.useState<CellId | null>(null)\n\n  React.useEffect(() => {\n    if (!enabled) { setHoveredCellId(null); return }\n    const container = containerRef.current\n    if (!container) return\n\n    const handleMouseOver = (e: MouseEvent) => {\n      const target = e.target as HTMLElement | null\n      const cellEl = target?.closest<HTMLElement>('[data-cell-id]')\n      const id = cellEl?.dataset.cellId ?? null\n      setHoveredCellId(id)\n    }\n    const handleMouseLeave = () => setHoveredCellId(null)\n\n    container.addEventListener('mouseover', handleMouseOver)\n    container.addEventListener('mouseleave', handleMouseLeave)\n    return () => {\n      container.removeEventListener('mouseover', handleMouseOver)\n      container.removeEventListener('mouseleave', handleMouseLeave)\n    }\n  }, [enabled, containerRef])\n\n  return hoveredCellId\n}\n\n/**\n * Singleton interaction layer。\n *\n * Slice D Step 1A:HoverCellRect only。\n * Slice D Step 2/3/4:SelectionRect / ActiveEditorHost / RangeRect 漸進加入。\n */\nexport function DataTableInteractionLayer({\n  enabled,\n  containerRef,\n  cellClickEntersEdit,\n  activeEditorCellId,\n  activeEditorEnabled = false,\n  activeEditorRender,\n  selectedCellId = null,\n  // rangeCellIds retired 2026-05-10(outer ring 已 retire,range visual 靠 cell-bg `[data-range-cell]`)\n  rangeCellIds: _rangeCellIds,\n}: DataTableInteractionLayerProps) {\n  const hoveredCellId = useHoveredCell(containerRef, enabled)\n  // 2026-05-10 RWD/scroll sync(per user mandate「所有 overlay 在各種 RWD 和捲動時都處在正確位置」):\n  // window scroll(capture)+ resize + ResizeObserver(container)→ rAF coalesced re-render → rect 重算\n  useReactiveRect(containerRef, enabled)\n\n  // Contract 14 state precedence:editing > selected > hover(per RFC §State Precedence Matrix)\n  const isEditingHovered = activeEditorCellId != null && activeEditorCellId === hoveredCellId\n  const isSelectedHovered = selectedCellId != null && selectedCellId === hoveredCellId\n  const shouldShowHover = enabled && hoveredCellId != null && !isEditingHovered && !isSelectedHovered\n    && (cellClickEntersEdit ? cellClickEntersEdit(hoveredCellId) : true)\n\n  // Issue 6 viewport clip(2026-05-10):每個 overlay rect 都跟最近 panel(left/center/right body)\n  // intersect。Cell scroll 出 panel viewport(H scroll / pinned 範圍)→ rect null → 不 render;\n  // 部分 → 用 ClipMask wrap 在 panel viewport 內裁切,outline 永遠在 cell 真邊但被 mask 限制視覺。\n  const hoverGeo = shouldShowHover\n    ? getCellGeometry(containerRef.current, hoveredCellId!)\n    : null\n\n  // Slice D Step 3 scaffold:ActiveEditorHost rect placeholder(per Contract 8 active editor paint owner)。\n  // 2026-05-10 bug fix:gate by `activeEditorEnabled` flag(Step 3.3 portal Field work)。\n  // Issue 6:active editor host **不**做 viewport clip(per codex「editor 必可見」),\n  // 仍走原 path 從 getCellRect 取 viewport coords。User 應將 active editor cell 滾到 viewport 內。\n  const activeEditorRect = activeEditorEnabled && activeEditorCellId != null\n    ? getCellRect(containerRef.current, activeEditorCellId)\n    : null\n\n  // Slice D Step 4(spreadsheet semantics):SelectionRect + RangeRect with viewport clip。\n  const selectedGeo = enabled && selectedCellId != null\n    ? getCellGeometry(containerRef.current, selectedCellId)\n    : null\n\n  // 2026-05-10 retire `rangeOuterRingsByPanel` calc + render(per user 抓 range 2px outer\n  // ring 不需要 — cell-bg `--primary-subtle` 已給「這些 cell 在範圍內」訊號,outer ring 是\n  // redundant visual)。`CellRangeOuterRing` primitive 已 retire(下方刪),getCellGeometry 仍\n  // 給 hover / selected overlay 使用,保留。Future 若需 outer ring 復用,從 git history 取\n  // commit `763b3ac`(Issue 6 viewport clip)的 implementation。\n\n  if (!enabled) return null\n\n  // Layer absolute fixed-position relative to viewport(避 outer container 缺 position:relative\n  // 找錯 reference frame)。getCellRect 已 return container-relative,但這裡 set top/left 用\n  // page coords 一致 — 改用 viewport-fixed 簡化。\n  return (\n    <div\n      aria-hidden\n      style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 1 }}\n    >\n      {/* HoverRing — kind=hover(1px var(--border-hover)) z 1。Wrap 在 ClipMask(panel viewport)\n          內 → cell scroll 出 panel 時 outline 自動被 mask 裁切,不會 leak 到 panel 外。 */}\n      {hoverGeo && (\n        <ClipMask clipRect={hoverGeo.clipRect}>\n          <CellRingOverlay rect={toRelRect(hoverGeo.rect, hoverGeo.clipRect)} kind=\"hover\" />\n        </ClipMask>\n      )}\n      {/* SelectionRing — kind=selected(1px var(--primary)) z 2,SSOT 同 hover wide */}\n      {selectedGeo && (\n        <ClipMask clipRect={selectedGeo.clipRect}>\n          <CellRingOverlay\n            rect={toRelRect(selectedGeo.rect, selectedGeo.clipRect)}\n            kind=\"selected\"\n            cellId={selectedCellId!}\n          />\n        </ClipMask>\n      )}\n      {/* 2026-05-10 retire RangeOuterRing(per user 抓 image 4 + verbatim「range 的 cell 本來就有顏色變化,\n          那樣就夠了,不需要再有 2px 藍色的框」)。Range visual now relies purely on cell-bg\n          (`--primary-subtle` via `[data-range-cell]` CSS in `data-table.css`)+ focus cell 2px selected\n          border。Outer 2px primary ring 從 Issue 6 ship 但 visual 太重 — bg-fill 已給「這些 cell 在範圍內」\n          訊號,outer ring 是 redundant。`rangeOuterRingsByPanel` 計算保留但不 render(future 若需 reinstate\n          只需打開 .map)。 */}\n      {/* {rangeOuterRingsByPanel.map((group) => (\n        <ClipMask key={group.panel} clipRect={group.clipRect}>\n          <CellRangeOuterRing rect={toRelRect(group.bbox, group.clipRect)} />\n        </ClipMask>\n      ))} */}\n      {/* ActiveEditorHost — z 3,float rect,pointerEvents:auto opaque host(NOT a ring)。\n          Issue 6:active editor 不 clip(editor 必可見) — user 滾出 viewport 自負責。 */}\n      {activeEditorRect && (\n        <ActiveEditorHost rect={activeEditorRect}>\n          {activeEditorRender ? activeEditorRender(activeEditorCellId!, activeEditorRect) : null}\n        </ActiveEditorHost>\n      )}\n    </div>\n  )\n}\n\n/**\n * `toRelRect(cellRect, clipRect)` — Issue 6 helper(2026-05-10):\n * 把 viewport coords cell rect 轉成 ClipMask containing-block 內 relative coords。\n * ClipMask 用 panel rect 做 absolute container + overflow:hidden,內部 child absolute 定位\n * 以 mask 為 reference frame,所以 cellRect.x - clipRect.x 才對齊 cell 真實位置。\n */\nfunction toRelRect(cellRect: CellRect, clipRect: CellRect): CellRect {\n  return {\n    x: cellRect.x - clipRect.x,\n    y: cellRect.y - clipRect.y,\n    width: cellRect.width,\n    height: cellRect.height,\n  }\n}\n\n// ── Private primitives(per codex unified-ring-overlay-2026-05-10 Final A')──────\n//\n// 三個 private primitive 各自 own 一個 paint concern:\n//   1. CellRingOverlay  — outline ring(hover / selected / future focus / error)\n//   2. CellRangeFill    — bg fill(range cells in spreadsheet mode)\n//   3. ActiveEditorHost — opaque host(portal Field edit)\n//\n// SSOT pattern(共 3 primitives):rect float pass-through + boxSizing:border-box +\n//   pointerEvents 視 kind / position:absolute on viewport-fixed layer。\n//\n// Token mapping 集中 `CELL_RING_STYLES`(per codex Q3 verdict 不開 global `--cell-ring-*` token,\n// 在 primitive 內 kind → semantic token mapping)。\n\nconst CELL_RING_STYLES = {\n  hover:    { width: 1, color: 'var(--border-hover)', zIndex: 1 },\n  selected: { width: 1, color: 'var(--primary)',      zIndex: 2 },\n  // future kinds(per codex Q6 outline,加 entry 即可擴展):\n  // focus:  { width: 2, color: 'var(--primary)',      zIndex: 2 },\n  // error:  { width: 1, color: 'var(--error)',        zIndex: 2 },\n} as const\n\ntype CellRingKind = keyof typeof CELL_RING_STYLES\n\nfunction rectStyle(rect: CellRect): React.CSSProperties {\n  return {\n    position: 'absolute',\n    left: rect.x,\n    top: rect.y,\n    width: rect.width,\n    height: rect.height,\n  }\n}\n\n/**\n * CellRingOverlay — paint owner for hover / selected / future focus / error rings。\n *\n * 共用 SSOT(per Bug 5 fix + codex Q2 unified primitive):\n *   - Float pass-through rect(getCellRect 不 round)\n *   - outline + outline-offset:`-${width}px` paint 在 cell 既有 border 上 in-place\n *   - boxSizing:border-box(避免 outline 影響 layout)\n *   - pointerEvents:none(透視點擊穿透)\n *   - transition:none(避 fade flash)\n */\nfunction CellRingOverlay({ rect, kind, cellId }: {\n  rect: CellRect\n  kind: CellRingKind\n  cellId?: CellId\n}) {\n  const ring = CELL_RING_STYLES[kind]\n  const dataAttr = kind === 'selected' && cellId ? { 'data-selected-cell-id': cellId } : {}\n  return (\n    <div\n      aria-hidden\n      style={{\n        ...rectStyle(rect),\n        outline: `${ring.width}px solid ${ring.color}`,\n        outlineOffset: `-${ring.width}px`,\n        boxSizing: 'border-box',\n        pointerEvents: 'none',\n        transition: 'none',\n        zIndex: ring.zIndex,\n      }}\n      {...dataAttr}\n    />\n  )\n}\n\n// `CellRangeOuterRing` primitive retired 2026-05-10(per user 「range cell 本來就有顏色變化\n// 那樣就夠了,不需要再有 2px 藍色的框」)。Source 留 git history commit `763b3ac`(Issue 6\n// viewport clip ship)若需 reinstate。\n\n/**\n * ClipMask — Issue 6 primitive(2026-05-10):panel viewport 裁切容器。\n *\n * 用在 hover / selected / range outer ring overlay,避免 cell 滾出 panel viewport(H scroll /\n * pinned 範圍)時 overlay 仍漂浮在 panel 外。Layer 是 `position: fixed` viewport-anchor,\n * ClipMask 用 panel rect 當 absolute container + `overflow: hidden` mask;child overlay 用\n * `toRelRect(cellRect, clipRect)` 算出 mask-relative 座標,在 mask 內精準定位但被 mask 邊緣裁切。\n *\n * 對齊 AG Grid `cellsForRangeSet` viewport-aware paint / Glide DataGrid clip helpers /\n * Notion sticky-cell virtualizer mask。\n */\nfunction ClipMask({ clipRect, children }: { clipRect: CellRect; children: React.ReactNode }) {\n  return (\n    <div\n      aria-hidden\n      style={{\n        position: 'absolute',\n        left: clipRect.x,\n        top: clipRect.y,\n        width: clipRect.width,\n        height: clipRect.height,\n        overflow: 'hidden',\n        pointerEvents: 'none',\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * ActiveEditorHost — opaque host for portal Field edit(D.3,Slice D Step 5)。\n *\n * Per codex Q2 verdict:不該進 CellRingOverlay primitive — 它是 host 不是 ring。\n *   - pointerEvents:auto(child Field 接收 click / keyboard)\n *   - background:var(--canvas)(opaque cover display Field below;Cell SSOT 保留)\n *   - z-index 3(above hover / selected / range)\n *   - children = activeEditorRender 的回傳 React node\n *\n * Empty children fallback = dashed debug indicator(no portal Field provided)。\n */\nfunction ActiveEditorHost({ rect, children }: { rect: CellRect; children: React.ReactNode }) {\n  if (!children) {\n    return (\n      <div\n        aria-hidden\n        style={{\n          ...rectStyle(rect),\n          pointerEvents: 'none',\n          zIndex: 3,\n          border: '1px dashed var(--primary)',\n          boxSizing: 'border-box',\n        }}\n        data-active-editor-host-scaffold\n      />\n    )\n  }\n  return (\n    <div\n      style={{\n        ...rectStyle(rect),\n        pointerEvents: 'auto',\n        zIndex: 3,\n        boxSizing: 'border-box',\n        background: 'var(--canvas)',\n      }}\n      data-active-editor-host\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,19 @@
+import type { ColumnDef, SortingState } from '@tanstack/react-table';
+export interface DataTableSortManagerProps<TData> {
+    /** 可排序欄位來源(讀 columnDef.header / id);會自動排除 enableSorting=false */
+    columns: ColumnDef<TData, any>[];
+    /** 當前排序 state(TanStack SortingState) */
+    sorting: SortingState;
+    /** 排序變更 callback */
+    onSortingChange: (next: SortingState) => void;
+    /** Refresh 按鈕點擊(可選 — 重置或外部 refetch) */
+    onReset?: () => void;
+    /** Close 按鈕點擊(若有 — 通常是包在 Popover 外層的 close 行為) */
+    onClose?: () => void;
+    className?: string;
+}
+export declare function DataTableSortManager<TData>({ columns, sorting, onSortingChange, onReset, onClose, className, }: DataTableSortManagerProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare namespace DataTableSortManager {
+    var displayName: string;
+}
+//# sourceMappingURL=data-table-sort-manager.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-sort-manager.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/data-table-sort-manager.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAiCpE,MAAM,WAAW,yBAAyB,CAAC,KAAK;IAC9C,iEAAiE;IACjE,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAA;IAChC,wCAAwC;IACxC,OAAO,EAAE,YAAY,CAAA;IACrB,oBAAoB;IACpB,eAAe,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IAC7C,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAkBD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,EAC1C,OAAO,EACP,OAAO,EACP,eAAe,EACf,OAAO,EACP,OAAO,EACP,SAAS,GACV,EAAE,yBAAyB,CAAC,KAAK,CAAC,2CA2FlC;yBAlGe,oBAAoB"}