@qijenchen/design-system 0.1.0-beta.10

package/dist/index.js

@@ -0,0 +1,371 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, accordionMeta } from "./components/Accordion/accordion.js";
+import { Alert, alertMeta, alertVariants } from "./components/Alert/alert.js";
+import { AppShell, AppShellAside, useAppShell } from "./components/AppShell/app-shell.js";
+import { AspectRatio, aspectRatioMeta } from "./components/AspectRatio/aspect-ratio.js";
+import { Avatar, avatarMeta } from "./components/Avatar/avatar.js";
+import { Badge, badgeMeta, badgeVariants } from "./components/Badge/badge.js";
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, breadcrumbMeta } from "./components/Breadcrumb/breadcrumb.js";
+import { BULK_ACTION_BAR_DEFAULT_LABELS, BulkActionBar, bulkActionBarMeta } from "./components/BulkActionBar/bulk-action-bar.js";
+import { Button, ButtonGroupContext, buttonMeta, buttonVariants } from "./components/Button/button.js";
+import { Calendar, calendarMeta } from "./components/Calendar/calendar.js";
+import { Carousel, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, carouselMeta } from "./components/Carousel/carousel.js";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, chartMeta } from "./components/Chart/chart.js";
+import { Checkbox, checkboxMeta, checkboxVariants } from "./components/Checkbox/checkbox.js";
+import { Chip, ChipGroup, chipMeta, chipVariants } from "./components/Chip/chip.js";
+import { CircularProgress, circularProgressMeta } from "./components/CircularProgress/circular-progress.js";
+import { Coachmark, coachmarkMeta } from "./components/Coachmark/coachmark.js";
+import { Combobox } from "./components/Combobox/combobox.js";
+import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, commandMeta } from "./components/Command/command.js";
+import { DataTable, MIN_COLUMN_WIDTH, dataTableMeta, dataTableVariants } from "./components/DataTable/data-table.js";
+import { DateGrid, dateGridMeta } from "./components/DateGrid/date-grid.js";
+import { DatePicker, DatePickerRange, datePickerMeta, formatDate } from "./components/DatePicker/date-picker.js";
+import { DescriptionItem, DescriptionList, descriptionListMeta } from "./components/DescriptionList/description-list.js";
+import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, dialogMeta } from "./components/Dialog/dialog.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, dropdownMenuMeta, floatingLayerClass } from "./components/DropdownMenu/dropdown-menu.js";
+import { Empty, emptyMeta } from "./components/Empty/empty.js";
+import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel, fieldMeta } from "./components/Field/field.js";
+import { FieldControlGroup, fieldControlGroupMeta } from "./components/FieldControlGroup/field-control-group.js";
+import { FileItem, fileItemMeta } from "./components/FileItem/file-item.js";
+import { FileUpload, fileUploadMeta } from "./components/FileUpload/file-upload.js";
+import { FileViewer, fileViewerMeta, registerFileRenderer } from "./components/FileViewer/file-viewer.js";
+import { HoverCard, HoverCardContent, HoverCardTrigger, hoverCardMeta } from "./components/HoverCard/hover-card.js";
+import { Input, inputMeta } from "./components/Input/input.js";
+import { LinkInput, linkInputMeta } from "./components/LinkInput/link-input.js";
+import { MenuFooter, MenuGroup, MenuItem, menuItemMeta, menuItemVariants } from "./components/Menu/menu-item.js";
+import { NAMECARD_DEFAULT_FIELD_KEYS, NameCard, NameCardDefaultActions, nameCardMeta } from "./components/NameCard/name-card.js";
+import { Notice, SUBTLE_ICON_COLOR, noticeMeta, useInverseTheme } from "./components/Notice/notice.js";
+import { NumberInput, formatNumber, numberInputMeta } from "./components/NumberInput/number-input.js";
+import { OverflowIndicator, overflowIndicatorMeta } from "./components/OverflowIndicator/overflow-indicator.js";
+import { PeoplePicker, peoplePickerMeta } from "./components/PeoplePicker/people-picker.js";
+import { Popover, PopoverAnchor, PopoverBody, PopoverClose, PopoverContent, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger, popoverMeta } from "./components/Popover/popover.js";
+import { ProgressBar, progressBarMeta } from "./components/ProgressBar/progress-bar.js";
+import { RadioGroup, RadioGroupItem, radioGroupMeta, radioItemVariants } from "./components/RadioGroup/radio-group.js";
+import { Rating, ratingMeta } from "./components/Rating/rating.js";
+import { ScrollArea, ScrollBar, scrollAreaMeta } from "./components/ScrollArea/scroll-area.js";
+import { SegmentedControl, SegmentedControlItem, segmentedControlItemVariants, segmentedControlMeta, segmentedControlVariants } from "./components/SegmentedControl/segmented-control.js";
+import { Select, selectMeta } from "./components/Select/select.js";
+import { SelectMenu, selectMenuMeta } from "./components/SelectMenu/select-menu.js";
+import { SelectionItem, selectionItemMeta, selectionItemStyles } from "./components/SelectionControl/selection-item.js";
+import { Separator, separatorMeta } from "./components/Separator/separator.js";
+import { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, sheetMeta, sheetVariants } from "./components/Sheet/sheet.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarProvider, SidebarSeparator, SidebarTrigger, sidebarMeta, useSidebar } from "./components/Sidebar/sidebar.js";
+import { Skeleton, skeletonMeta } from "./components/Skeleton/skeleton.js";
+import { Slider, sliderMeta, sliderRootVariants } from "./components/Slider/slider.js";
+import { StepContent, StepDescription, StepItem, StepLabel, Steps, stepItemVariants, stepsMeta, stepsRootVariants } from "./components/Steps/steps.js";
+import { Switch, switchMeta, switchVariants } from "./components/Switch/switch.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger, tabsMeta, tabsTriggerVariants } from "./components/Tabs/tabs.js";
+import { Tag, tagMeta, tagVariants } from "./components/Tag/tag.js";
+import { Textarea, textareaMeta, textareaVariants } from "./components/Textarea/textarea.js";
+import { TimePicker, timePickerMeta } from "./components/TimePicker/time-picker.js";
+import { Toaster, toast, toastMeta } from "./components/Toast/toast.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, tooltipMeta } from "./components/Tooltip/tooltip.js";
+import { TreeItem, TreeView } from "./components/TreeView/tree-view.js";
+import { ARROW_BUTTON_WIDTH, FADE_WIDTH, OverflowMenuTriggerButton, OverflowScrollArrow, SCROLL_PAGE_RATIO, buildFadeMask, useScrollByPage } from "./patterns/horizontal-overflow/horizontal-overflow.js";
+import { SurfaceBody, SurfaceFooter, SurfaceHeader } from "./patterns/overlay-surface/overlay-surface.js";
+import { ResizeHandle } from "./patterns/resize-handle/resize-handle.js";
+import { useControllable } from "./hooks/use-controllable.js";
+import { useIsNarrowViewport } from "./hooks/use-is-narrow-viewport.js";
+import { useIsTouchDevice } from "./hooks/use-is-touch-device.js";
+import { useOverflowIndices, useScrollEdges } from "./hooks/use-overflow-items.js";
+import { dragActiveCursor, dragHandleCursorClass, dragSourceClass, dragSourceStyle, dropIndicatorColumn, dropIndicatorInside, dropIndicatorRow, isReorderNoop, reconstructFullRowGhost, snapToCursorModifier } from "./lib/drag-visual.js";
+import { applySelectAll, clearSelection } from "./lib/multi-select-ordering.js";
+import { PEOPLE_PICKER_LENGTH1_WRAPPER_CLASS, getPeoplePickerTagWrapperClass } from "./components/PeoplePicker/people-picker-helpers.js";
+export {
+  ARROW_BUTTON_WIDTH,
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Alert,
+  AppShell,
+  AppShellAside,
+  AspectRatio,
+  Avatar,
+  BULK_ACTION_BAR_DEFAULT_LABELS,
+  Badge,
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BulkActionBar,
+  Button,
+  ButtonGroupContext,
+  Calendar,
+  Carousel,
+  CarouselContent,
+  CarouselDots,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+  ChartTooltip,
+  ChartTooltipContent,
+  Checkbox,
+  Chip,
+  ChipGroup,
+  CircularProgress,
+  Coachmark,
+  Combobox,
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+  DataTable,
+  DateGrid,
+  DatePicker,
+  DatePickerRange,
+  DescriptionItem,
+  DescriptionList,
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  Empty,
+  FADE_WIDTH,
+  Field,
+  FieldControlGroup,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FileItem,
+  FileUpload,
+  FileViewer,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  Input,
+  LinkInput,
+  MIN_COLUMN_WIDTH,
+  MenuFooter,
+  MenuGroup,
+  MenuItem,
+  NAMECARD_DEFAULT_FIELD_KEYS,
+  NameCard,
+  NameCardDefaultActions,
+  Notice,
+  NumberInput,
+  OverflowIndicator,
+  OverflowMenuTriggerButton,
+  OverflowScrollArrow,
+  PEOPLE_PICKER_LENGTH1_WRAPPER_CLASS,
+  PeoplePicker,
+  Popover,
+  PopoverAnchor,
+  PopoverBody,
+  PopoverClose,
+  PopoverContent,
+  PopoverFooter,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+  ProgressBar,
+  RadioGroup,
+  RadioGroupItem,
+  Rating,
+  ResizeHandle,
+  SCROLL_PAGE_RATIO,
+  SUBTLE_ICON_COLOR,
+  ScrollArea,
+  ScrollBar,
+  SegmentedControl,
+  SegmentedControlItem,
+  Select,
+  SelectMenu,
+  SelectionItem,
+  Separator,
+  Sheet,
+  SheetBody,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarProvider,
+  SidebarSeparator,
+  SidebarTrigger,
+  Skeleton,
+  Slider,
+  StepContent,
+  StepDescription,
+  StepItem,
+  StepLabel,
+  Steps,
+  SurfaceBody,
+  SurfaceFooter,
+  SurfaceHeader,
+  Switch,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Tag,
+  Textarea,
+  TimePicker,
+  Toaster,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  TreeItem,
+  TreeView,
+  accordionMeta,
+  alertMeta,
+  alertVariants,
+  applySelectAll,
+  aspectRatioMeta,
+  avatarMeta,
+  badgeMeta,
+  badgeVariants,
+  breadcrumbMeta,
+  buildFadeMask,
+  bulkActionBarMeta,
+  buttonMeta,
+  buttonVariants,
+  calendarMeta,
+  carouselMeta,
+  chartMeta,
+  checkboxMeta,
+  checkboxVariants,
+  chipMeta,
+  chipVariants,
+  circularProgressMeta,
+  clearSelection,
+  coachmarkMeta,
+  commandMeta,
+  dataTableMeta,
+  dataTableVariants,
+  dateGridMeta,
+  datePickerMeta,
+  descriptionListMeta,
+  dialogMeta,
+  dragActiveCursor,
+  dragHandleCursorClass,
+  dragSourceClass,
+  dragSourceStyle,
+  dropIndicatorColumn,
+  dropIndicatorInside,
+  dropIndicatorRow,
+  dropdownMenuMeta,
+  emptyMeta,
+  fieldControlGroupMeta,
+  fieldMeta,
+  fileItemMeta,
+  fileUploadMeta,
+  fileViewerMeta,
+  floatingLayerClass,
+  formatDate,
+  formatNumber,
+  getPeoplePickerTagWrapperClass,
+  hoverCardMeta,
+  inputMeta,
+  isReorderNoop,
+  linkInputMeta,
+  menuItemMeta,
+  menuItemVariants,
+  nameCardMeta,
+  noticeMeta,
+  numberInputMeta,
+  overflowIndicatorMeta,
+  peoplePickerMeta,
+  popoverMeta,
+  progressBarMeta,
+  radioGroupMeta,
+  radioItemVariants,
+  ratingMeta,
+  reconstructFullRowGhost,
+  registerFileRenderer,
+  scrollAreaMeta,
+  segmentedControlItemVariants,
+  segmentedControlMeta,
+  segmentedControlVariants,
+  selectMenuMeta,
+  selectMeta,
+  selectionItemMeta,
+  selectionItemStyles,
+  separatorMeta,
+  sheetMeta,
+  sheetVariants,
+  sidebarMeta,
+  skeletonMeta,
+  sliderMeta,
+  sliderRootVariants,
+  snapToCursorModifier,
+  stepItemVariants,
+  stepsMeta,
+  stepsRootVariants,
+  switchMeta,
+  switchVariants,
+  tabsMeta,
+  tabsTriggerVariants,
+  tagMeta,
+  tagVariants,
+  textareaMeta,
+  textareaVariants,
+  timePickerMeta,
+  toast,
+  toastMeta,
+  tooltipMeta,
+  useAppShell,
+  useControllable,
+  useInverseTheme,
+  useIsNarrowViewport,
+  useIsTouchDevice,
+  useOverflowIndices,
+  useScrollByPage,
+  useScrollEdges,
+  useSidebar
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/drag-visual.d.ts

@@ -0,0 +1,158 @@
+/**
+ * Drag visual SSOT(2026-05-06 v14.5)
+ *
+ * DS canonical drag visual,3 處 consumer(TreeView / DataTable row drag / DataTable column reorder)
+ * 共用同一組 styling constant — 對齊 TreeView 最早 codified 的 pattern。
+ *
+ * ## Pattern
+ *
+ * - **Source element**(被拖中的 row/column):`opacity-30`(半透,user 仍看得到原位)
+ *   — 不是 `opacity:0` 全隱形,因 user 拖太遠看不到「源頭」會迷失方向。對齊 TreeView 最早 v1 + Notion / Atlassian / Linear。
+ * - **Ghost preview**(浮動 follow cursor):透過 dnd-kit `<DragOverlay>` portal,clone source 的 outerHTML
+ *   strip transform/transition/opacity → render 在 portal 層,visually 跟 cursor 走。
+ * - **Drop indicator**(目標位置藍細線):2px(`h-0.5` / `w-0.5`)`bg-primary` absolute line:
+ *   - **Row context**(TreeView / table row drag):水平線 在 target row 的 top(before)/ bottom(after)
+ *   - **Column context**(table column reorder):垂直線 在 target column 的 left(before)/ right(after)
+ * - **Inside-drop highlight**(nested target,如拖到 TreeView 子層 / Table nested row 內):整 row `bg-primary-subtle`
+ *
+ * ## Why centralize
+ *
+ * 三處 drag 之前各自實作不一致(TreeView opacity:30 + indicator vs DataTable row opacity:0 no indicator
+ * vs Column reorder opacity:0 + indicator)— M23 / M27 violation(DS 內 canonical 沒對齊)。
+ * 抽到此 module 後 3 處 import 同 constants,未來改 1 處全 sync。
+ *
+ * ## Token usage
+ *
+ * - `bg-primary`:semantic state token(`--primary`)— 跟 focus state ring color 同 source(M23 一致)
+ * - `bg-primary-subtle`:semantic primary subtle(`--primary-subtle`)— inside-drop dim background
+ * - `h-0.5` / `w-0.5`:Tailwind size token = 2px(對齊 hairline divider thickness 概念)
+ * - `opacity-30`:Tailwind 30% opacity(半透但仍清楚看到 outline)
+ */
+import type * as React from 'react';
+import type { Modifier } from '@dnd-kit/core';
+/**
+ * Source element 拖中的 opacity className。
+ *
+ * **Reuse `opacity-disabled` token**(2026-05-06 v14.5.2 對齊 Atlassian Pragmatic):
+ * Atlassian dnd guidelines 也用 `opacity.disabled` token 給 drag source dim(他們值 0.40,
+ * 我們值 0.45,role 一致)。不另開 drag-source 專屬 token — single-role-per-value 哲學
+ * + DS internal SSOT。
+ */
+export declare const dragSourceClass: "opacity-disabled";
+/** Source element 拖中的 inline style(consume DS token `--opacity-disabled`)*/
+export declare function dragSourceStyle(isDragging: boolean): React.CSSProperties;
+/**
+ * DragOverlay ghost 視覺 canonical(2026-05-06 v14.5.2 對齊 dnd-kit / Atlassian / Material):
+ * **不 dim**(opacity:1)+ elevation shadow `shadow-[var(--elevation-200)]` + 顯式 bg
+ * (`bg-surface` 或 `bg-surface-raised`)+ border。Lifted preview pattern,跟 surface 拉開
+ * 視覺距離靠 shadow 不靠 opacity。
+ *
+ * Consumer 自己組 className(因 ghost 結構各自不同 — TreeView 是 icon+label compact pill,
+ * DataTable 是 cloned row HTML wrapper),這裡只 codify 規則 不導出 class string。
+ */
+/**
+ * Row drop indicator(水平線,跨 row 全寬)
+ *
+ * - `before`:在 target row top edge,提示「放開後會插入這 row 之前」
+ * - `after`:在 target row bottom edge,提示「放開後會插入這 row 之後」
+ *
+ * **Indent option**:nested context(TreeView / table nested rows)可加 `style={{ left: indentPx }}`
+ * 讓 indicator 隨 depth 縮排,視覺對齊 row content 起始位置。
+ */
+export declare const dropIndicatorRow: {
+    readonly before: "absolute top-0 left-0 right-0 h-0.5 bg-primary z-10 pointer-events-none";
+    readonly after: "absolute bottom-0 left-0 right-0 h-0.5 bg-primary z-10 pointer-events-none";
+};
+/**
+ * Column drop indicator(垂直線,跨 column header height)
+ *
+ * - `before`:在 target column left edge(-1px outset 對齊 grid line)
+ * - `after`:在 target column right edge(-1px outset 對齊 grid line)
+ *
+ * 兩種變體,視覺一致(2px primary line),只有 DOM mechanism 不同 — consumer 視 use case 選:
+ *
+ * - **`absoluteDiv`**(TreeView pattern):render absolute `<div>` child;
+ *   consumer 必須有 `position: relative` parent。
+ * - **`pseudoBefore` / `pseudoAfter`**:用 Tailwind `before:` / `after:` pseudo-element;
+ *   consumer 不需 child element(適合 cloneElement 等不能加 child 的場景)。
+ *
+ * 兩變體 thickness / color / z-index 完全一致,差別純 implementation 機制。
+ */
+export declare const dropIndicatorColumn: {
+    readonly before: "absolute top-0 bottom-0 left-[-1px] w-0.5 bg-primary z-10 pointer-events-none";
+    readonly after: "absolute top-0 bottom-0 right-[-1px] w-0.5 bg-primary z-10 pointer-events-none";
+    readonly pseudoBefore: "before:absolute before:top-0 before:bottom-0 before:left-[-1px] before:w-0.5 before:bg-primary before:z-10 before:pointer-events-none before:content-[\"\"]";
+    readonly pseudoAfter: "after:absolute after:top-0 after:bottom-0 after:right-[-1px] after:w-0.5 after:bg-primary after:z-10 after:pointer-events-none after:content-[\"\"]";
+};
+/**
+ * Nested 拖入 highlight(TreeView / nested rows 拖到子層)。整 row 加 background。
+ */
+export declare const dropIndicatorInside: "bg-primary-subtle";
+/** Draggable element 拖中時的 cursor(grabbing)*/
+export declare const dragActiveCursor: "cursor-grabbing";
+/**
+ * Combined drag handle cursor canonical(2026-05-07 v15.7 user directive):
+ * **只 cursor-grab,不變 grabbing**。對齊 Material / Carbon / Polaris canonical —
+ * drag affordance 由 visible button 提供,cursor 變化反而干擾 indicator+ghost 視覺焦點。
+ * Consumer 直接 cn(...)。
+ */
+export declare const dragHandleCursorClass: "cursor-grab";
+/**
+ * Ghost 跟 cursor 維持「cursor 在 ghost 點下時相對位置」SSOT(對齊 user directive
+ * 「ghost 和 cursor 要確保相對位置是合理的而且有 ssot」)。
+ *
+ * **Why need this**:dnd-kit DragOverlay 預設 ghost.top-left = source rect (`setNodeRef`)
+ * 的 top-left。當 source ≠ activator 位置不同(e.g. activator = portal'd Button 在
+ * table outer 邊緣;source = primary row 在 table 內 column region),cursor 點下
+ * activator → cursor 落在 source rect 的 negative offset → ghost 永遠相對 source rect
+ * 起算 → cursor 跟 ghost 起始就有大 offset(e.g. 100+ px),drag 期間維持錯位。
+ *
+ * **本 modifier**:把 (cursor.initial - source.left, cursor.initial - source.top)
+ * 加進 transform → ghost.top-left 永遠對齊 cursor 位置(cursor 在 ghost 左前角)。
+ * Consumer 套進 DndContext.modifiers array,所有 drag scenario 套用 = SSOT。
+ *
+ * **對齊世界級**:Linear / Notion / Jira / AG Grid 的 row drag ghost 都跟 cursor
+ * 維持初始相對位置(整列拖時 cursor 在 click 點;button 拖時 cursor 在 button 位置)—
+ * 這個 modifier 把「整列拖 + 整列 ghost」UX 在 button-only / 多 region 場景下也達到。
+ */
+export declare const snapToCursorModifier: Modifier;
+/**
+ * Drop position 等同 source 原位 → noop。對齊 Linear / Notion / Jira / TreeView SSOT:
+ * user 拉到 source 鄰近(視覺等同原位)應 cancel,不 commit reorder 也不顯 indicator。
+ *
+ * Consumer 在 onDragOver 用此判斷是否畫 indicator;onDragEnd 用同一函數判斷是否
+ * 觸發 reorder callback —— 兩處共享一個 invariant,避免「indicator 顯示但 commit 不 fire」
+ * 或反向 drift。
+ *
+ * 規則:
+ *   - source idx N,drop on idx N (self) → noop
+ *   - source idx N,drop on idx N-1 with side='after'  = N(原位)→ noop
+ *   - source idx N,drop on idx N+1 with side='before' = N(原位)→ noop
+ */
+export declare function isReorderNoop(activeIdx: number, overIdx: number, side: 'before' | 'after'): boolean;
+/**
+ * 為 dnd-kit DragOverlay 重建跨 region 的完整 row ghost(2026-05-07 v15.9 Bug A+B 修)。
+ *
+ * **Why cross-region**:Pinned column DataTable 結構 = 三 region(left / center / right)
+ * 各 mount 一個 row div(同 `row.id`),listeners 只在 primary(center)。之前 ghost 只
+ * 抓 primary region row → cells 只有 center 欄(missing pinned SKU / Updated)→ user 看
+ * 到 ghost「跟 source 不一樣」(Bug B)。virtualized + 無 pinning 下亦可能因 region 多
+ * 個 mount 衍生不可預期(Bug A)。
+ *
+ * **Algorithm**:
+ *   1. 收集 `[role="row"][data-sortable-row-id="${id}"]` 所有 match(可能 1-3 個 region)
+ *   2. DOM 文檔順序剛好是 left → center → right(因 body region 排列順序)
+ *   3. 從每個 region row 的 children(role=cell)抽出 outerHTML,串成單一 flex row
+ *   4. 總寬 = sum(region offsetWidth)
+ *   5. Wrap 用 primary region 的 className(視覺一致)+ inline `display:flex; width:total`
+ *
+ * **Single-region case**(無 pinning,常見):退化成 single row clone + sanitize,行為跟舊版同。
+ *
+ * **Returns** `{ html, width }` 或 `null`(找不到 row)。
+ */
+export declare function reconstructFullRowGhost(rowId: string, tableRoot: HTMLElement | null): {
+    html: string;
+    width: number;
+} | null;
+export type DropPosition = 'before' | 'after' | 'inside';
+//# sourceMappingURL=drag-visual.d.ts.map

package/dist/lib/drag-visual.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-visual.d.ts","sourceRoot":"","sources":["../../src/lib/drag-visual.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AACnC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAI7C;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAG,kBAA2B,CAAA;AAE1D,4EAA4E;AAC5E,wBAAgB,eAAe,CAAC,UAAU,EAAE,OAAO,GAAG,KAAK,CAAC,aAAa,CAExE;AAED;;;;;;;;GAQG;AAIH;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB;;;CAGnB,CAAA;AAEV;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,mBAAmB;;;;;CAOtB,CAAA;AAIV;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAG,mBAA4B,CAAA;AAI/D,6CAA6C;AAC7C,eAAO,MAAM,gBAAgB,EAAG,iBAA0B,CAAA;AAC1D;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,EAAG,aAAsB,CAAA;AAI3D;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,oBAAoB,EAAE,QAgBlC,CAAA;AAID;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,CAKnG;AAID;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,WAAW,GAAG,IAAI,GAC5B;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CA6CxC;AAqBD,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA"}

package/dist/lib/drag-visual.js

@@ -0,0 +1,96 @@
+const dragSourceClass = "opacity-disabled";
+function dragSourceStyle(isDragging) {
+  return isDragging ? { opacity: "var(--opacity-disabled)" } : {};
+}
+const dropIndicatorRow = {
+  before: "absolute top-0 left-0 right-0 h-0.5 bg-primary z-10 pointer-events-none",
+  after: "absolute bottom-0 left-0 right-0 h-0.5 bg-primary z-10 pointer-events-none"
+};
+const dropIndicatorColumn = {
+  // Absolute div 變體(consumer render <div>)
+  before: "absolute top-0 bottom-0 left-[-1px] w-0.5 bg-primary z-10 pointer-events-none",
+  after: "absolute top-0 bottom-0 right-[-1px] w-0.5 bg-primary z-10 pointer-events-none",
+  // Pseudo-element 變體(用 Tailwind before:/after:)
+  pseudoBefore: 'before:absolute before:top-0 before:bottom-0 before:left-[-1px] before:w-0.5 before:bg-primary before:z-10 before:pointer-events-none before:content-[""]',
+  pseudoAfter: 'after:absolute after:top-0 after:bottom-0 after:right-[-1px] after:w-0.5 after:bg-primary after:z-10 after:pointer-events-none after:content-[""]'
+};
+const dropIndicatorInside = "bg-primary-subtle";
+const dragActiveCursor = "cursor-grabbing";
+const dragHandleCursorClass = "cursor-grab";
+const snapToCursorModifier = ({ transform, activatorEvent, draggingNodeRect }) => {
+  if (!activatorEvent || !draggingNodeRect) return transform;
+  if (!("clientX" in activatorEvent) || !("clientY" in activatorEvent)) return transform;
+  const ev = activatorEvent;
+  if (typeof ev.clientX !== "number" || typeof ev.clientY !== "number") return transform;
+  const offsetX = ev.clientX - draggingNodeRect.left;
+  const offsetY = ev.clientY - draggingNodeRect.top;
+  return {
+    ...transform,
+    x: transform.x + offsetX,
+    y: transform.y + offsetY
+  };
+};
+function isReorderNoop(activeIdx, overIdx, side) {
+  if (activeIdx === overIdx) return true;
+  if (side === "after" && overIdx + 1 === activeIdx) return true;
+  if (side === "before" && overIdx - 1 === activeIdx) return true;
+  return false;
+}
+function reconstructFullRowGhost(rowId, tableRoot) {
+  if (!tableRoot) return null;
+  const escaped = rowId.replace(/(["\\])/g, "\\$1");
+  const allRows = Array.from(
+    tableRoot.querySelectorAll(
+      `[role="row"][data-sortable-row-id="${escaped}"]`
+    )
+  );
+  if (allRows.length === 0) return null;
+  if (allRows.length === 1) {
+    const sourceEl = allRows[0];
+    const clone = sourceEl.cloneNode(true);
+    sanitizeGhostClone(clone, sourceEl.offsetWidth);
+    return { html: clone.outerHTML, width: sourceEl.offsetWidth };
+  }
+  const primaryRow = allRows.find((r) => r.dataset.rowDragSource === "true") ?? allRows[0];
+  const cellsHtml = [];
+  let totalWidth = 0;
+  for (const regionRow of allRows) {
+    totalWidth += regionRow.offsetWidth;
+    for (const cell of Array.from(
+      regionRow.querySelectorAll('[role="cell"],[role="gridcell"]')
+    )) {
+      const cellClone = cell.cloneNode(true);
+      cellClone.querySelectorAll("[data-drag-handle-portal]").forEach((n) => n.remove());
+      cellClone.style.transform = "none";
+      cellsHtml.push(cellClone.outerHTML);
+    }
+  }
+  const inlineStyle = `display:flex; width:${totalWidth}px; transform:none; position:static; opacity:1; transition:none;`;
+  const html = `<div role="row" class="${primaryRow.className}" style="${inlineStyle}">${cellsHtml.join("")}</div>`;
+  return { html, width: totalWidth };
+}
+function sanitizeGhostClone(el, width) {
+  el.style.position = "static";
+  el.style.transform = "none";
+  el.style.transition = "none";
+  el.style.opacity = "1";
+  el.style.zIndex = "";
+  el.style.width = `${width}px`;
+  el.removeAttribute("data-row-index");
+  el.removeAttribute("aria-rowindex");
+  el.removeAttribute("data-hovered");
+  el.querySelectorAll("[data-drag-handle-portal]").forEach((n) => n.remove());
+}
+export {
+  dragActiveCursor,
+  dragHandleCursorClass,
+  dragSourceClass,
+  dragSourceStyle,
+  dropIndicatorColumn,
+  dropIndicatorInside,
+  dropIndicatorRow,
+  isReorderNoop,
+  reconstructFullRowGhost,
+  snapToCursorModifier
+};
+//# sourceMappingURL=drag-visual.js.map

package/dist/lib/drag-visual.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-visual.js","sources":["../../src/lib/drag-visual.ts"],"sourcesContent":["/**\n * Drag visual SSOT(2026-05-06 v14.5)\n *\n * DS canonical drag visual,3 處 consumer(TreeView / DataTable row drag / DataTable column reorder)\n * 共用同一組 styling constant — 對齊 TreeView 最早 codified 的 pattern。\n *\n * ## Pattern\n *\n * - **Source element**(被拖中的 row/column):`opacity-30`(半透,user 仍看得到原位)\n *   — 不是 `opacity:0` 全隱形,因 user 拖太遠看不到「源頭」會迷失方向。對齊 TreeView 最早 v1 + Notion / Atlassian / Linear。\n * - **Ghost preview**(浮動 follow cursor):透過 dnd-kit `<DragOverlay>` portal,clone source 的 outerHTML\n *   strip transform/transition/opacity → render 在 portal 層,visually 跟 cursor 走。\n * - **Drop indicator**(目標位置藍細線):2px(`h-0.5` / `w-0.5`)`bg-primary` absolute line:\n *   - **Row context**(TreeView / table row drag):水平線 在 target row 的 top(before)/ bottom(after)\n *   - **Column context**(table column reorder):垂直線 在 target column 的 left(before)/ right(after)\n * - **Inside-drop highlight**(nested target,如拖到 TreeView 子層 / Table nested row 內):整 row `bg-primary-subtle`\n *\n * ## Why centralize\n *\n * 三處 drag 之前各自實作不一致(TreeView opacity:30 + indicator vs DataTable row opacity:0 no indicator\n * vs Column reorder opacity:0 + indicator)— M23 / M27 violation(DS 內 canonical 沒對齊)。\n * 抽到此 module 後 3 處 import 同 constants,未來改 1 處全 sync。\n *\n * ## Token usage\n *\n * - `bg-primary`:semantic state token(`--primary`)— 跟 focus state ring color 同 source(M23 一致)\n * - `bg-primary-subtle`:semantic primary subtle(`--primary-subtle`)— inside-drop dim background\n * - `h-0.5` / `w-0.5`:Tailwind size token = 2px(對齊 hairline divider thickness 概念)\n * - `opacity-30`:Tailwind 30% opacity(半透但仍清楚看到 outline)\n */\n\nimport type * as React from 'react'\nimport type { Modifier } from '@dnd-kit/core'\n\n// ── Source element styling(被拖中的 source row/column)─────────────────────\n\n/**\n * Source element 拖中的 opacity className。\n *\n * **Reuse `opacity-disabled` token**(2026-05-06 v14.5.2 對齊 Atlassian Pragmatic):\n * Atlassian dnd guidelines 也用 `opacity.disabled` token 給 drag source dim(他們值 0.40,\n * 我們值 0.45,role 一致)。不另開 drag-source 專屬 token — single-role-per-value 哲學\n * + DS internal SSOT。\n */\nexport const dragSourceClass = 'opacity-disabled' as const\n\n/** Source element 拖中的 inline style(consume DS token `--opacity-disabled`)*/\nexport function dragSourceStyle(isDragging: boolean): React.CSSProperties {\n  return isDragging ? { opacity: 'var(--opacity-disabled)' } : {}\n}\n\n/**\n * DragOverlay ghost 視覺 canonical(2026-05-06 v14.5.2 對齊 dnd-kit / Atlassian / Material):\n * **不 dim**(opacity:1)+ elevation shadow `shadow-[var(--elevation-200)]` + 顯式 bg\n * (`bg-surface` 或 `bg-surface-raised`)+ border。Lifted preview pattern,跟 surface 拉開\n * 視覺距離靠 shadow 不靠 opacity。\n *\n * Consumer 自己組 className(因 ghost 結構各自不同 — TreeView 是 icon+label compact pill,\n * DataTable 是 cloned row HTML wrapper),這裡只 codify 規則 不導出 class string。\n */\n\n// ── Drop indicator className(target row/column edge 顯藍細線)──────────────\n\n/**\n * Row drop indicator(水平線,跨 row 全寬)\n *\n * - `before`:在 target row top edge,提示「放開後會插入這 row 之前」\n * - `after`:在 target row bottom edge,提示「放開後會插入這 row 之後」\n *\n * **Indent option**:nested context(TreeView / table nested rows)可加 `style={{ left: indentPx }}`\n * 讓 indicator 隨 depth 縮排,視覺對齊 row content 起始位置。\n */\nexport const dropIndicatorRow = {\n  before: 'absolute top-0 left-0 right-0 h-0.5 bg-primary z-10 pointer-events-none',\n  after: 'absolute bottom-0 left-0 right-0 h-0.5 bg-primary z-10 pointer-events-none',\n} as const\n\n/**\n * Column drop indicator(垂直線,跨 column header height)\n *\n * - `before`:在 target column left edge(-1px outset 對齊 grid line)\n * - `after`:在 target column right edge(-1px outset 對齊 grid line)\n *\n * 兩種變體,視覺一致(2px primary line),只有 DOM mechanism 不同 — consumer 視 use case 選:\n *\n * - **`absoluteDiv`**(TreeView pattern):render absolute `<div>` child;\n *   consumer 必須有 `position: relative` parent。\n * - **`pseudoBefore` / `pseudoAfter`**:用 Tailwind `before:` / `after:` pseudo-element;\n *   consumer 不需 child element(適合 cloneElement 等不能加 child 的場景)。\n *\n * 兩變體 thickness / color / z-index 完全一致,差別純 implementation 機制。\n */\nexport const dropIndicatorColumn = {\n  // Absolute div 變體(consumer render <div>)\n  before: 'absolute top-0 bottom-0 left-[-1px] w-0.5 bg-primary z-10 pointer-events-none',\n  after: 'absolute top-0 bottom-0 right-[-1px] w-0.5 bg-primary z-10 pointer-events-none',\n  // Pseudo-element 變體(用 Tailwind before:/after:)\n  pseudoBefore: 'before:absolute before:top-0 before:bottom-0 before:left-[-1px] before:w-0.5 before:bg-primary before:z-10 before:pointer-events-none before:content-[\"\"]',\n  pseudoAfter: 'after:absolute after:top-0 after:bottom-0 after:right-[-1px] after:w-0.5 after:bg-primary after:z-10 after:pointer-events-none after:content-[\"\"]',\n} as const\n\n// ── Inside-drop highlight(nested context,target row 整列亮藍 subtle)─────\n\n/**\n * Nested 拖入 highlight(TreeView / nested rows 拖到子層)。整 row 加 background。\n */\nexport const dropIndicatorInside = 'bg-primary-subtle' as const\n\n// ── Cursor classes ────────────────────────────────────────────────────────\n\n/** Draggable element 拖中時的 cursor(grabbing)*/\nexport const dragActiveCursor = 'cursor-grabbing' as const\n/**\n * Combined drag handle cursor canonical(2026-05-07 v15.7 user directive):\n * **只 cursor-grab,不變 grabbing**。對齊 Material / Carbon / Polaris canonical —\n * drag affordance 由 visible button 提供,cursor 變化反而干擾 indicator+ghost 視覺焦點。\n * Consumer 直接 cn(...)。\n */\nexport const dragHandleCursorClass = 'cursor-grab' as const\n\n// ── Modifier:Ghost 跟 cursor 維持初始相對位置 SSOT(v15.7 user directive) ─\n\n/**\n * Ghost 跟 cursor 維持「cursor 在 ghost 點下時相對位置」SSOT(對齊 user directive\n * 「ghost 和 cursor 要確保相對位置是合理的而且有 ssot」)。\n *\n * **Why need this**:dnd-kit DragOverlay 預設 ghost.top-left = source rect (`setNodeRef`)\n * 的 top-left。當 source ≠ activator 位置不同(e.g. activator = portal'd Button 在\n * table outer 邊緣;source = primary row 在 table 內 column region),cursor 點下\n * activator → cursor 落在 source rect 的 negative offset → ghost 永遠相對 source rect\n * 起算 → cursor 跟 ghost 起始就有大 offset(e.g. 100+ px),drag 期間維持錯位。\n *\n * **本 modifier**:把 (cursor.initial - source.left, cursor.initial - source.top)\n * 加進 transform → ghost.top-left 永遠對齊 cursor 位置(cursor 在 ghost 左前角)。\n * Consumer 套進 DndContext.modifiers array,所有 drag scenario 套用 = SSOT。\n *\n * **對齊世界級**:Linear / Notion / Jira / AG Grid 的 row drag ghost 都跟 cursor\n * 維持初始相對位置(整列拖時 cursor 在 click 點;button 拖時 cursor 在 button 位置)—\n * 這個 modifier 把「整列拖 + 整列 ghost」UX 在 button-only / 多 region 場景下也達到。\n */\nexport const snapToCursorModifier: Modifier = ({ transform, activatorEvent, draggingNodeRect }) => {\n  if (!activatorEvent || !draggingNodeRect) return transform\n  // **codex P1 fix(2026-05-07 v15.12)**:KeyboardSensor 走 KeyboardEvent,沒\n  // `clientX/clientY` → `offsetX/offsetY = NaN` → ghost transform 變 NaN/NaN →\n  // overlay 定位+collision 全 corrupt → keyboard-initiated drag 直接壞。Guard 條件:\n  // 只 pointer/mouse event 才平移,keyboard 走 dnd-kit 預設(無 modifier 偏移)。\n  if (!('clientX' in activatorEvent) || !('clientY' in activatorEvent)) return transform\n  const ev = activatorEvent as PointerEvent | MouseEvent\n  if (typeof ev.clientX !== 'number' || typeof ev.clientY !== 'number') return transform\n  const offsetX = ev.clientX - draggingNodeRect.left\n  const offsetY = ev.clientY - draggingNodeRect.top\n  return {\n    ...transform,\n    x: transform.x + offsetX,\n    y: transform.y + offsetY,\n  }\n}\n\n// ── Reorder noop helper(SSOT 對齊 row + column reorder canonical) ────────\n\n/**\n * Drop position 等同 source 原位 → noop。對齊 Linear / Notion / Jira / TreeView SSOT:\n * user 拉到 source 鄰近(視覺等同原位)應 cancel,不 commit reorder 也不顯 indicator。\n *\n * Consumer 在 onDragOver 用此判斷是否畫 indicator;onDragEnd 用同一函數判斷是否\n * 觸發 reorder callback —— 兩處共享一個 invariant,避免「indicator 顯示但 commit 不 fire」\n * 或反向 drift。\n *\n * 規則:\n *   - source idx N,drop on idx N (self) → noop\n *   - source idx N,drop on idx N-1 with side='after'  = N(原位)→ noop\n *   - source idx N,drop on idx N+1 with side='before' = N(原位)→ noop\n */\nexport function isReorderNoop(activeIdx: number, overIdx: number, side: 'before' | 'after'): boolean {\n  if (activeIdx === overIdx) return true\n  if (side === 'after' && overIdx + 1 === activeIdx) return true\n  if (side === 'before' && overIdx - 1 === activeIdx) return true\n  return false\n}\n\n// ── Ghost reconstruction(跨 region table row → 完整橫跨 ghost) ───────────\n\n/**\n * 為 dnd-kit DragOverlay 重建跨 region 的完整 row ghost(2026-05-07 v15.9 Bug A+B 修)。\n *\n * **Why cross-region**:Pinned column DataTable 結構 = 三 region(left / center / right)\n * 各 mount 一個 row div(同 `row.id`),listeners 只在 primary(center)。之前 ghost 只\n * 抓 primary region row → cells 只有 center 欄(missing pinned SKU / Updated)→ user 看\n * 到 ghost「跟 source 不一樣」(Bug B)。virtualized + 無 pinning 下亦可能因 region 多\n * 個 mount 衍生不可預期(Bug A)。\n *\n * **Algorithm**:\n *   1. 收集 `[role=\"row\"][data-sortable-row-id=\"${id}\"]` 所有 match(可能 1-3 個 region)\n *   2. DOM 文檔順序剛好是 left → center → right(因 body region 排列順序)\n *   3. 從每個 region row 的 children(role=cell)抽出 outerHTML,串成單一 flex row\n *   4. 總寬 = sum(region offsetWidth)\n *   5. Wrap 用 primary region 的 className(視覺一致)+ inline `display:flex; width:total`\n *\n * **Single-region case**(無 pinning,常見):退化成 single row clone + sanitize,行為跟舊版同。\n *\n * **Returns** `{ html, width }` 或 `null`(找不到 row)。\n */\nexport function reconstructFullRowGhost(\n  rowId: string,\n  tableRoot: HTMLElement | null,\n): { html: string; width: number } | null {\n  // **codex P1 fix(2026-05-07 v15.13)**:tableRoot 強制 required(non-optional)。\n  // 之前 fallback document 仍允許多 DataTable 同頁 row.id reuse(default index-based)→\n  // cross-instance ghost 污染。strict-scope canonical:caller 必傳 tableRef.current\n  // (`[data-data-table-outer]`),null 直接 return null(caller 該守 ref 已 mount)。\n  if (!tableRoot) return null\n  const escaped = rowId.replace(/([\"\\\\])/g, '\\\\$1')\n  const allRows = Array.from(\n    tableRoot.querySelectorAll<HTMLElement>(\n      `[role=\"row\"][data-sortable-row-id=\"${escaped}\"]`,\n    ),\n  )\n  if (allRows.length === 0) return null\n\n  // Single-region:直接 clone 整 row + sanitize(無 pinning 場景,跟舊版一致)\n  if (allRows.length === 1) {\n    const sourceEl = allRows[0]\n    const clone = sourceEl.cloneNode(true) as HTMLElement\n    sanitizeGhostClone(clone, sourceEl.offsetWidth)\n    return { html: clone.outerHTML, width: sourceEl.offsetWidth }\n  }\n\n  // Multi-region:抽 cells 串接。Primary region(`data-row-drag-source=\"true\"`)的\n  // className + role 給 outer wrapper,確保 hover bg / border / row-height token 一致。\n  const primaryRow =\n    allRows.find((r) => r.dataset.rowDragSource === 'true') ?? allRows[0]\n  const cellsHtml: string[] = []\n  let totalWidth = 0\n  for (const regionRow of allRows) {\n    totalWidth += regionRow.offsetWidth\n    for (const cell of Array.from(\n      regionRow.querySelectorAll<HTMLElement>('[role=\"cell\"],[role=\"gridcell\"]'),\n    )) {\n      const cellClone = cell.cloneNode(true) as HTMLElement\n      // Strip drag handle portal(只在 primary region)+ inline transform 殘餘\n      cellClone.querySelectorAll('[data-drag-handle-portal]').forEach((n) => n.remove())\n      cellClone.style.transform = 'none'\n      cellsHtml.push(cellClone.outerHTML)\n    }\n  }\n  // 套 primary row 的 class(cn 結果含 hover/border/sizing token)+ display:flex 顯式\n  // 容納 cells,inline style override transform/position/opacity 避免 stale 殘餘\n  const inlineStyle = `display:flex; width:${totalWidth}px; transform:none; position:static; opacity:1; transition:none;`\n  const html = `<div role=\"row\" class=\"${primaryRow.className}\" style=\"${inlineStyle}\">${cellsHtml.join('')}</div>`\n  return { html, width: totalWidth }\n}\n\n/**\n * Reset ghost clone inline styles + strip 干擾 attributes(transform/opacity/data-row-index 等)。\n * Internal helper, not exported.\n */\nfunction sanitizeGhostClone(el: HTMLElement, width: number): void {\n  el.style.position = 'static'\n  el.style.transform = 'none'\n  el.style.transition = 'none'\n  el.style.opacity = '1'\n  el.style.zIndex = ''\n  el.style.width = `${width}px`\n  el.removeAttribute('data-row-index')\n  el.removeAttribute('aria-rowindex')\n  el.removeAttribute('data-hovered')\n  el.querySelectorAll('[data-drag-handle-portal]').forEach((n) => n.remove())\n}\n\n// ── Type exports for consumer ─────────────────────────────────────────────\n\nexport type DropPosition = 'before' | 'after' | 'inside'\n"],"names":[],"mappings":"AA4CO,MAAM,kBAAkB;AAGxB,SAAS,gBAAgB,YAA0C;AACxE,SAAO,aAAa,EAAE,SAAS,0BAAA,IAA8B,CAAA;AAC/D;AAuBO,MAAM,mBAAmB;AAAA,EAC9B,QAAQ;AAAA,EACR,OAAO;AACT;AAiBO,MAAM,sBAAsB;AAAA;AAAA,EAEjC,QAAQ;AAAA,EACR,OAAO;AAAA;AAAA,EAEP,cAAc;AAAA,EACd,aAAa;AACf;AAOO,MAAM,sBAAsB;AAK5B,MAAM,mBAAmB;AAOzB,MAAM,wBAAwB;AAsB9B,MAAM,uBAAiC,CAAC,EAAE,WAAW,gBAAgB,uBAAuB;AACjG,MAAI,CAAC,kBAAkB,CAAC,iBAAkB,QAAO;AAKjD,MAAI,EAAE,aAAa,mBAAmB,EAAE,aAAa,gBAAiB,QAAO;AAC7E,QAAM,KAAK;AACX,MAAI,OAAO,GAAG,YAAY,YAAY,OAAO,GAAG,YAAY,SAAU,QAAO;AAC7E,QAAM,UAAU,GAAG,UAAU,iBAAiB;AAC9C,QAAM,UAAU,GAAG,UAAU,iBAAiB;AAC9C,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG,UAAU,IAAI;AAAA,IACjB,GAAG,UAAU,IAAI;AAAA,EAAA;AAErB;AAiBO,SAAS,cAAc,WAAmB,SAAiB,MAAmC;AACnG,MAAI,cAAc,QAAS,QAAO;AAClC,MAAI,SAAS,WAAW,UAAU,MAAM,UAAW,QAAO;AAC1D,MAAI,SAAS,YAAY,UAAU,MAAM,UAAW,QAAO;AAC3D,SAAO;AACT;AAwBO,SAAS,wBACd,OACA,WACwC;AAKxC,MAAI,CAAC,UAAW,QAAO;AACvB,QAAM,UAAU,MAAM,QAAQ,YAAY,MAAM;AAChD,QAAM,UAAU,MAAM;AAAA,IACpB,UAAU;AAAA,MACR,sCAAsC,OAAO;AAAA,IAAA;AAAA,EAC/C;AAEF,MAAI,QAAQ,WAAW,EAAG,QAAO;AAGjC,MAAI,QAAQ,WAAW,GAAG;AACxB,UAAM,WAAW,QAAQ,CAAC;AAC1B,UAAM,QAAQ,SAAS,UAAU,IAAI;AACrC,uBAAmB,OAAO,SAAS,WAAW;AAC9C,WAAO,EAAE,MAAM,MAAM,WAAW,OAAO,SAAS,YAAA;AAAA,EAClD;AAIA,QAAM,aACJ,QAAQ,KAAK,CAAC,MAAM,EAAE,QAAQ,kBAAkB,MAAM,KAAK,QAAQ,CAAC;AACtE,QAAM,YAAsB,CAAA;AAC5B,MAAI,aAAa;AACjB,aAAW,aAAa,SAAS;AAC/B,kBAAc,UAAU;AACxB,eAAW,QAAQ,MAAM;AAAA,MACvB,UAAU,iBAA8B,iCAAiC;AAAA,IAAA,GACxE;AACD,YAAM,YAAY,KAAK,UAAU,IAAI;AAErC,gBAAU,iBAAiB,2BAA2B,EAAE,QAAQ,CAAC,MAAM,EAAE,QAAQ;AACjF,gBAAU,MAAM,YAAY;AAC5B,gBAAU,KAAK,UAAU,SAAS;AAAA,IACpC;AAAA,EACF;AAGA,QAAM,cAAc,uBAAuB,UAAU;AACrD,QAAM,OAAO,0BAA0B,WAAW,SAAS,YAAY,WAAW,KAAK,UAAU,KAAK,EAAE,CAAC;AACzG,SAAO,EAAE,MAAM,OAAO,WAAA;AACxB;AAMA,SAAS,mBAAmB,IAAiB,OAAqB;AAChE,KAAG,MAAM,WAAW;AACpB,KAAG,MAAM,YAAY;AACrB,KAAG,MAAM,aAAa;AACtB,KAAG,MAAM,UAAU;AACnB,KAAG,MAAM,SAAS;AAClB,KAAG,MAAM,QAAQ,GAAG,KAAK;AACzB,KAAG,gBAAgB,gBAAgB;AACnC,KAAG,gBAAgB,eAAe;AAClC,KAAG,gBAAgB,cAAc;AACjC,KAAG,iBAAiB,2BAA2B,EAAE,QAAQ,CAAC,MAAM,EAAE,QAAQ;AAC5E;"}