@qijenchen/design-system 0.1.0-beta.13 → 0.1.0-beta.130

package/dist/index.js

@@ -1,81 +1,102 @@
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, accordionMeta } from "./components/Accordion/accordion.js";
-import { Alert, alertMeta, alertVariants } from "./components/Alert/alert.js";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/Accordion/accordion.js";
+import { AccountMenu } from "./components/AccountMenu/account-menu.js";
+import { AgentConversation, AgentDecisionCard, AgentDecisionSummary, AgentMessage, AgentPanel, AgentPanelHeader, AgentPromptInput, AgentThinking, AgentToolbar } from "./components/AgentPanel/agent-panel.js";
+import { Alert, 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 { AspectRatio } from "./components/AspectRatio/aspect-ratio.js";
+import { Avatar } from "./components/Avatar/avatar.js";
+import { Badge, badgeVariants } from "./components/Badge/badge.js";
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/Breadcrumb/breadcrumb.js";
+import { BULK_ACTION_BAR_DEFAULT_LABELS, BulkActionBar } from "./components/BulkActionBar/bulk-action-bar.js";
+import { Button, buttonVariants } from "./components/Button/button.js";
+import { ButtonDivider, ButtonGroup } from "./components/Button/button-group.js";
+import { Calendar } from "./components/Calendar/calendar.js";
+import { Carousel, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious } from "./components/Carousel/carousel.js";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from "./components/Chart/chart.js";
+import { Checkbox, checkboxVariants } from "./components/Checkbox/checkbox.js";
+import { CheckboxGroup, CheckboxGroupContext } from "./components/Checkbox/checkbox-group.js";
+import { Chip, ChipGroup, chipVariants } from "./components/Chip/chip.js";
+import { CircularProgress } from "./components/CircularProgress/circular-progress.js";
+import { Coachmark } 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 { DataTable, MIN_COLUMN_WIDTH, dataTableVariants } from "./components/DataTable/data-table.js";
+import { DataTableColumnVisibilityPanel } from "./components/DataTable/data-table-column-visibility-panel.js";
+import { DataTableFilterPanel } from "./components/DataTable/data-table-filter-panel.js";
+import { DataTableSortManager } from "./components/DataTable/data-table-sort-manager.js";
+import { DatePicker, DatePickerRange, formatDate } from "./components/DatePicker/date-picker.js";
+import { DescriptionItem, DescriptionList } from "./components/DescriptionList/description-list.js";
+import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/Dialog/dialog.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./components/DropdownMenu/dropdown-menu.js";
+import { Empty } from "./components/Empty/empty.js";
+import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from "./components/Field/field.js";
+import { FieldControlGroup } from "./components/FieldControlGroup/field-control-group.js";
+import { FileItem } from "./components/FileItem/file-item.js";
+import { FileUpload } from "./components/FileUpload/file-upload.js";
+import { FileViewer, registerFileRenderer } from "./components/FileViewer/file-viewer.js";
+import { InlineEdit } from "./components/InlineEdit/inline-edit.js";
+import { Input } from "./components/Input/input.js";
+import { LinkInput } from "./components/LinkInput/link-input.js";
+import { NumberInput, formatNumber } from "./components/NumberInput/number-input.js";
+import { Pagination } from "./components/Pagination/pagination.js";
+import { PeoplePicker } from "./components/PeoplePicker/people-picker.js";
+import { Popover, PopoverAnchor, PopoverBody, PopoverClose, PopoverContent, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger } from "./components/Popover/popover.js";
+import { NAMECARD_DEFAULT_FIELD_KEYS, ProfileCard, ProfileCardDefaultActions } from "./components/ProfileCard/profile-card.js";
+import { ProgressBar } from "./components/ProgressBar/progress-bar.js";
+import { RadioGroup, RadioGroupItem, radioItemVariants } from "./components/RadioGroup/radio-group.js";
+import { Rating } from "./components/Rating/rating.js";
+import { ScrollArea, ScrollBar } from "./components/ScrollArea/scroll-area.js";
+import { SegmentedControl, SegmentedControlItem, segmentedControlItemVariants, segmentedControlVariants } from "./components/SegmentedControl/segmented-control.js";
+import { Select } from "./components/Select/select.js";
+import { Separator } from "./components/Separator/separator.js";
+import { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, 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, useSidebar } from "./components/Sidebar/sidebar.js";
+import { Skeleton } from "./components/Skeleton/skeleton.js";
+import { Slider, sliderRootVariants } from "./components/Slider/slider.js";
+import { StepContent, StepDescription, StepItem, StepLabel, Steps, stepItemVariants, stepsRootVariants } from "./components/Steps/steps.js";
+import { Switch, switchVariants } from "./components/Switch/switch.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger, tabsTriggerVariants } from "./components/Tabs/tabs.js";
+import { Tag, tagVariants } from "./components/Tag/tag.js";
+import { Textarea, textareaVariants } from "./components/Textarea/textarea.js";
+import { TimePicker } from "./components/TimePicker/time-picker.js";
+import { Toaster, toast } from "./components/Toast/toast.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/Tooltip/tooltip.js";
+import { TreeItem, TreeView, treeItemVariants } from "./components/TreeView/tree-view.js";
+import { AVATAR_SIZE, ICON_SIZE, INLINE_ACTION_HOVER_BG_SIZE, ItemAvatar, ItemContent, ItemIcon, ItemLabel, ItemPrefix, ItemSuffix, ROW_PADDING_BY_SIZE, getUniformPrefixSlotStyle, itemPrefixAlignVariants, useRowSize } from "./patterns/element-anatomy/item-anatomy.js";
+import { ChromeHeader, HEADER_TABS_SLOT_WRAPPER_CLASS } from "./patterns/header-canonical/chrome-header.js";
 import { ResizeHandle } from "./patterns/resize-handle/resize-handle.js";
+import { CATEGORICAL_HUES, CAT_ACCENT, CAT_EVENT, CAT_INTERACT, CAT_SOLID, CAT_SOLID_TOKENS, CAT_SUBTLE, CAT_SUBTLE_TOKENS } from "./tokens/categorical-color.js";
+import { OVERLAY_COLLISION_PADDING, OVERLAY_SIDE_OFFSET } from "./tokens/elevation/overlay-geometry.js";
+import { MOTION_DELAY_CLOSE_MS, MOTION_DELAY_PLAIN_MS, MOTION_DELAY_RICH_MS } from "./tokens/motion/motion.js";
+import { overlayMotion, surfaceMotion } from "./tokens/motion/overlay-motion.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 { useTruncated } from "./hooks/use-truncated.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 { cn, lineClampClass } from "./lib/utils.js";
+import { DATA_TABLE_FILTER_PANEL_DEFAULT_LABELS } from "./components/DataTable/data-table-filter-labels.js";
+import { MultiPersonDisplay, PersonAvatarTag, PersonDisplay, buildPersonProfileCard, resolvePerson } from "./components/PeoplePicker/person-display.js";
 import { PEOPLE_PICKER_LENGTH1_WRAPPER_CLASS, getPeoplePickerTagWrapperClass } from "./components/PeoplePicker/people-picker-helpers.js";
+import { createEmptyFilterTree, dataTableFilterMatch, evaluateTree, isFilterTreeActive } from "./components/DataTable/filter-tree.js";
+import { useFormValidation } from "./components/Field/use-form-validation.js";
 export {
-  ARROW_BUTTON_WIDTH,
+  AVATAR_SIZE,
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
+  AccountMenu,
+  AgentConversation,
+  AgentDecisionCard,
+  AgentDecisionSummary,
+  AgentMessage,
+  AgentPanel,
+  AgentPanelHeader,
+  AgentPromptInput,
+  AgentThinking,
+  AgentToolbar,
   Alert,
   AppShell,
   AppShellAside,
@@ -92,7 +113,16 @@ export {
   BreadcrumbSeparator,
   BulkActionBar,
   Button,
-  ButtonGroupContext,
+  ButtonDivider,
+  ButtonGroup,
+  CATEGORICAL_HUES,
+  CAT_ACCENT,
+  CAT_EVENT,
+  CAT_INTERACT,
+  CAT_SOLID,
+  CAT_SOLID_TOKENS,
+  CAT_SUBTLE,
+  CAT_SUBTLE_TOKENS,
   Calendar,
   Carousel,
   CarouselContent,
@@ -107,22 +137,19 @@ export {
   ChartTooltip,
   ChartTooltipContent,
   Checkbox,
+  CheckboxGroup,
+  CheckboxGroupContext,
   Chip,
   ChipGroup,
+  ChromeHeader,
   CircularProgress,
   Coachmark,
   Combobox,
-  Command,
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
+  DATA_TABLE_FILTER_PANEL_DEFAULT_LABELS,
   DataTable,
-  DateGrid,
+  DataTableColumnVisibilityPanel,
+  DataTableFilterPanel,
+  DataTableSortManager,
   DatePicker,
   DatePickerRange,
   DescriptionItem,
@@ -154,7 +181,6 @@ export {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
   Empty,
-  FADE_WIDTH,
   Field,
   FieldControlGroup,
   FieldDescription,
@@ -164,25 +190,32 @@ export {
   FileItem,
   FileUpload,
   FileViewer,
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
+  HEADER_TABS_SLOT_WRAPPER_CLASS,
+  ICON_SIZE,
+  INLINE_ACTION_HOVER_BG_SIZE,
+  InlineEdit,
   Input,
+  ItemAvatar,
+  ItemContent,
+  ItemIcon,
+  ItemLabel,
+  ItemPrefix,
+  ItemSuffix,
   LinkInput,
   MIN_COLUMN_WIDTH,
-  MenuFooter,
-  MenuGroup,
-  MenuItem,
+  MOTION_DELAY_CLOSE_MS,
+  MOTION_DELAY_PLAIN_MS,
+  MOTION_DELAY_RICH_MS,
+  MultiPersonDisplay,
   NAMECARD_DEFAULT_FIELD_KEYS,
-  NameCard,
-  NameCardDefaultActions,
-  Notice,
   NumberInput,
-  OverflowIndicator,
-  OverflowMenuTriggerButton,
-  OverflowScrollArrow,
+  OVERLAY_COLLISION_PADDING,
+  OVERLAY_SIDE_OFFSET,
   PEOPLE_PICKER_LENGTH1_WRAPPER_CLASS,
+  Pagination,
   PeoplePicker,
+  PersonAvatarTag,
+  PersonDisplay,
   Popover,
   PopoverAnchor,
   PopoverBody,
@@ -192,20 +225,19 @@ export {
   PopoverHeader,
   PopoverTitle,
   PopoverTrigger,
+  ProfileCard,
+  ProfileCardDefaultActions,
   ProgressBar,
+  ROW_PADDING_BY_SIZE,
   RadioGroup,
   RadioGroupItem,
   Rating,
   ResizeHandle,
-  SCROLL_PAGE_RATIO,
-  SUBTLE_ICON_COLOR,
   ScrollArea,
   ScrollBar,
   SegmentedControl,
   SegmentedControlItem,
   Select,
-  SelectMenu,
-  SelectionItem,
   Separator,
   Sheet,
   SheetBody,
@@ -243,9 +275,6 @@ export {
   StepItem,
   StepLabel,
   Steps,
-  SurfaceBody,
-  SurfaceFooter,
-  SurfaceHeader,
   Switch,
   Tabs,
   TabsContent,
@@ -261,36 +290,18 @@ export {
   TooltipTrigger,
   TreeItem,
   TreeView,
-  accordionMeta,
-  alertMeta,
   alertVariants,
   applySelectAll,
-  aspectRatioMeta,
-  avatarMeta,
-  badgeMeta,
   badgeVariants,
-  breadcrumbMeta,
-  buildFadeMask,
-  bulkActionBarMeta,
-  buttonMeta,
+  buildPersonProfileCard,
   buttonVariants,
-  calendarMeta,
-  carouselMeta,
-  chartMeta,
-  checkboxMeta,
   checkboxVariants,
-  chipMeta,
   chipVariants,
-  circularProgressMeta,
   clearSelection,
-  coachmarkMeta,
-  commandMeta,
-  dataTableMeta,
+  cn,
+  createEmptyFilterTree,
+  dataTableFilterMatch,
   dataTableVariants,
-  dateGridMeta,
-  datePickerMeta,
-  descriptionListMeta,
-  dialogMeta,
   dragActiveCursor,
   dragHandleCursorClass,
   dragSourceClass,
@@ -298,74 +309,43 @@ export {
   dropIndicatorColumn,
   dropIndicatorInside,
   dropIndicatorRow,
-  dropdownMenuMeta,
-  emptyMeta,
-  fieldControlGroupMeta,
-  fieldMeta,
-  fileItemMeta,
-  fileUploadMeta,
-  fileViewerMeta,
-  floatingLayerClass,
+  evaluateTree,
   formatDate,
   formatNumber,
   getPeoplePickerTagWrapperClass,
-  hoverCardMeta,
-  inputMeta,
+  getUniformPrefixSlotStyle,
+  isFilterTreeActive,
   isReorderNoop,
-  linkInputMeta,
-  menuItemMeta,
-  menuItemVariants,
-  nameCardMeta,
-  noticeMeta,
-  numberInputMeta,
-  overflowIndicatorMeta,
-  peoplePickerMeta,
-  popoverMeta,
-  progressBarMeta,
-  radioGroupMeta,
+  itemPrefixAlignVariants,
+  lineClampClass,
+  overlayMotion,
   radioItemVariants,
-  ratingMeta,
   reconstructFullRowGhost,
   registerFileRenderer,
-  scrollAreaMeta,
+  resolvePerson,
   segmentedControlItemVariants,
-  segmentedControlMeta,
   segmentedControlVariants,
-  selectMenuMeta,
-  selectMeta,
-  selectionItemMeta,
-  selectionItemStyles,
-  separatorMeta,
-  sheetMeta,
   sheetVariants,
-  sidebarMeta,
-  skeletonMeta,
-  sliderMeta,
   sliderRootVariants,
   snapToCursorModifier,
   stepItemVariants,
-  stepsMeta,
   stepsRootVariants,
-  switchMeta,
+  surfaceMotion,
   switchVariants,
-  tabsMeta,
   tabsTriggerVariants,
-  tagMeta,
   tagVariants,
-  textareaMeta,
   textareaVariants,
-  timePickerMeta,
   toast,
-  toastMeta,
-  tooltipMeta,
+  treeItemVariants,
   useAppShell,
   useControllable,
-  useInverseTheme,
+  useFormValidation,
   useIsNarrowViewport,
   useIsTouchDevice,
   useOverflowIndices,
-  useScrollByPage,
+  useRowSize,
   useScrollEdges,
-  useSidebar
+  useSidebar,
+  useTruncated
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

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

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

@@ -6,7 +6,7 @@
  *
  * ## Pattern
  *
- * - **Source element**(被拖中的 row/column):`opacity-30`(半透,user 仍看得到原位)
+ * - **Source element**(被拖中的 row/column):`opacity-disabled`(= var(--opacity-disabled) 0.45 半透,user 仍看得到原位;2026-05-06 v14.5.2 由 opacity-30 改)
  *   — 不是 `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 走。
@@ -26,7 +26,7 @@
  * - `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)
+ * - `opacity-disabled`:DS token var(--opacity-disabled)= 0.45(半透但仍清楚看到 outline;見下方 v14.5.2 note)
  */
 import type * as React from 'react';
 import type { Modifier } from '@dnd-kit/core';

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

@@ -1 +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;"}
+{"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-disabled`(= var(--opacity-disabled) 0.45 半透,user 仍看得到原位;2026-05-06 v14.5.2 由 opacity-30 改)\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-disabled`:DS token var(--opacity-disabled)= 0.45(半透但仍清楚看到 outline;見下方 v14.5.2 note)\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;"}

package/dist/lib/utils.d.ts

@@ -9,4 +9,5 @@ import { type ClassValue } from 'clsx';
  * 例如 cn("px-4", "px-2") → "px-2"（後者優先）
  */
 export declare function cn(...inputs: ClassValue[]): string;
+export declare function lineClampClass(n: number | undefined | null): string | undefined;
 //# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAiF5C;;;;;;;;GAQG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAkF5C;;;;;;;;GAQG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAUD,wBAAgB,cAAc,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAS/E"}

package/dist/lib/utils.js

@@ -32,7 +32,9 @@ const twMerge = extendTailwindMerge({
         "text-fg-disabled",
         "text-inverse-fg",
         "text-on-emphasis",
-        // 白字於飽和色底(Avatar color variants / Steps filled indicator)
+        // 白字於夠深的飽和色底(Avatar / Tag solid / Steps filled indicator)
+        "text-on-emphasis-dark",
+        // 深字於太亮的飽和色底(yellow/amber/orange/lime solid;原 warning-foreground)
         // Status 基色(base)
         "text-primary",
         "text-error",
@@ -73,7 +75,27 @@ const twMerge = extendTailwindMerge({
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+const LINE_CLAMP = {
+  1: "line-clamp-1",
+  2: "line-clamp-2",
+  3: "line-clamp-3",
+  4: "line-clamp-4",
+  5: "line-clamp-5",
+  6: "line-clamp-6"
+};
+function lineClampClass(n) {
+  var _a;
+  if (n == null || n <= 0) return void 0;
+  const rounded = Math.round(n);
+  if (rounded !== n || n > 6) {
+    if (typeof process !== "undefined" && ((_a = process.env) == null ? void 0 : _a.NODE_ENV) !== "production") {
+      console.warn(`[DS] line-clamp 值 ${n} 超出 canonical 範圍 1-6(或非整數)→ clamp 回 6。請傳 1-6 整數。`);
+    }
+  }
+  return LINE_CLAMP[Math.min(6, Math.max(1, rounded))];
+}
 export {
-  cn
+  cn,
+  lineClampClass
 };
 //# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\n/**\n * 擴充 tailwind-merge,讓它認識設計系統的自訂 typography 與 text-color utilities。\n *\n * 預設 tailwind-merge 看到 `text-{xxx}` 自訂 class 會用 heuristic 猜它是 font-size\n * 還是 color——猜錯就會把不該放在同一組的 class 誤判為衝突,然後 strip 掉其中一個。\n *\n * 實際發生過的 bug:`text-body`(font-size 14px)和 `text-fg-secondary`(color)\n * 被同時放進 font-size group,tailwind-merge 把 `text-body` 吃掉,導致元件\n * inherit 父層 16px,description 永遠跟 label 同字級。\n *\n * 修法:**font-size group 和 text-color group 都明確列舉**,不留猜測空間。\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [\n        'text-h1', 'text-h2', 'text-h3', 'text-h4', 'text-h5', 'text-h6',\n        'text-body-lg', 'text-body', 'text-caption', 'text-footnote',\n      ],\n      // 自訂 text-color utilities(對應 semantic.css 的 `@theme inline --color-*` bridge)。\n      //\n      // 任何新增的 text-{semantic-name} color utility 都必須在這裡登記,否則\n      // tailwind-merge 會誤判成 font-size 與 typography 衝突(歷史 bug:\n      // text-body + text-fg-secondary 被 strip)。\n      //\n      // 完整家族對齊 semantic.css: 5 狀態色(primary/error/success/warning/info)\n      // × 3 互動階(base/hover/active)+ text(on-subtle-bg)+ subtle(含 primary)\n      // + notification(紅 badge)+ neutral foreground 四階。\n      'text-color': [\n        // Neutral foreground 家族\n        'text-foreground',\n        'text-fg-secondary',\n        'text-fg-muted',\n        'text-fg-disabled',\n        'text-inverse-fg',\n        'text-on-emphasis',  // 白字於飽和色底(Avatar color variants / Steps filled indicator)\n\n        // Status 基色(base)\n        'text-primary',\n        'text-error',\n        'text-success',\n        'text-warning',\n        'text-info',\n        'text-notification',\n\n        // Status 互動階(hover / active)\n        'text-primary-hover',\n        'text-primary-active',\n        'text-error-hover',\n        'text-error-active',\n        'text-success-hover',\n        'text-success-active',\n        'text-warning-hover',\n        'text-warning-active',\n        'text-info-hover',\n        'text-info-active',\n\n        // on-subtle-bg 版本(深色文字配淺色底)\n        'text-primary-text',\n        'text-error-text',\n        'text-success-text',\n        'text-warning-text',\n        'text-info-text',\n\n        // Subtle 文字(少用,保持完整家族一致)\n        'text-primary-subtle',\n        'text-error-subtle',\n        'text-success-subtle',\n        'text-warning-subtle',\n        'text-info-subtle',\n      ],\n      // Custom opacity utility(對應 tokens/opacity/opacity.css `@utility opacity-disabled`)。\n      // 不註冊 group → tailwind-merge 用 default opacity-N heuristic,可能誤判 class 衝突。\n      'opacity': ['opacity-disabled'],\n    },\n  },\n})\n\n/**\n * cn() — Tailwind class 合併工具\n *\n * 用法：\n *   cn(\"px-4 py-2\", isActive && \"bg-primary\", className)\n *\n * 原理：clsx 處理條件式 class，twMerge 解決 Tailwind class 衝突\n * 例如 cn(\"px-4\", \"px-2\") → \"px-2\"（後者優先）\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"names":[],"mappings":";;AAeA,MAAM,UAAU,oBAAoB;AAAA,EAClC,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,aAAa;AAAA,QACX;AAAA,QAAW;AAAA,QAAW;AAAA,QAAW;AAAA,QAAW;AAAA,QAAW;AAAA,QACvD;AAAA,QAAgB;AAAA,QAAa;AAAA,QAAgB;AAAA,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAW/C,cAAc;AAAA;AAAA,QAEZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA;AAAA;AAAA,MAIF,WAAW,CAAC,kBAAkB;AAAA,IAAA;AAAA,EAChC;AAEJ,CAAC;AAWM,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;"}
+{"version":3,"file":"utils.js","sources":["../../src/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\n/**\n * 擴充 tailwind-merge,讓它認識設計系統的自訂 typography 與 text-color utilities。\n *\n * 預設 tailwind-merge 看到 `text-{xxx}` 自訂 class 會用 heuristic 猜它是 font-size\n * 還是 color——猜錯就會把不該放在同一組的 class 誤判為衝突,然後 strip 掉其中一個。\n *\n * 實際發生過的 bug:`text-body`(font-size 14px)和 `text-fg-secondary`(color)\n * 被同時放進 font-size group,tailwind-merge 把 `text-body` 吃掉,導致元件\n * inherit 父層 16px,description 永遠跟 label 同字級。\n *\n * 修法:**font-size group 和 text-color group 都明確列舉**,不留猜測空間。\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [\n        'text-h1', 'text-h2', 'text-h3', 'text-h4', 'text-h5', 'text-h6',\n        'text-body-lg', 'text-body', 'text-caption', 'text-footnote',\n      ],\n      // 自訂 text-color utilities(對應 semantic.css 的 `@theme inline --color-*` bridge)。\n      //\n      // 任何新增的 text-{semantic-name} color utility 都必須在這裡登記,否則\n      // tailwind-merge 會誤判成 font-size 與 typography 衝突(歷史 bug:\n      // text-body + text-fg-secondary 被 strip)。\n      //\n      // 完整家族對齊 semantic.css: 5 狀態色(primary/error/success/warning/info)\n      // × 3 互動階(base/hover/active)+ text(on-subtle-bg)+ subtle(含 primary)\n      // + notification(紅 badge)+ neutral foreground 四階。\n      'text-color': [\n        // Neutral foreground 家族\n        'text-foreground',\n        'text-fg-secondary',\n        'text-fg-muted',\n        'text-fg-disabled',\n        'text-inverse-fg',\n        'text-on-emphasis',       // 白字於夠深的飽和色底(Avatar / Tag solid / Steps filled indicator)\n        'text-on-emphasis-dark',  // 深字於太亮的飽和色底(yellow/amber/orange/lime solid;原 warning-foreground)\n\n        // Status 基色(base)\n        'text-primary',\n        'text-error',\n        'text-success',\n        'text-warning',\n        'text-info',\n        'text-notification',\n\n        // Status 互動階(hover / active)\n        'text-primary-hover',\n        'text-primary-active',\n        'text-error-hover',\n        'text-error-active',\n        'text-success-hover',\n        'text-success-active',\n        'text-warning-hover',\n        'text-warning-active',\n        'text-info-hover',\n        'text-info-active',\n\n        // on-subtle-bg 版本(深色文字配淺色底)\n        'text-primary-text',\n        'text-error-text',\n        'text-success-text',\n        'text-warning-text',\n        'text-info-text',\n\n        // Subtle 文字(少用,保持完整家族一致)\n        'text-primary-subtle',\n        'text-error-subtle',\n        'text-success-subtle',\n        'text-warning-subtle',\n        'text-info-subtle',\n      ],\n      // Custom opacity utility(對應 tokens/opacity/opacity.css `@utility opacity-disabled`)。\n      // 不註冊 group → tailwind-merge 用 default opacity-N heuristic,可能誤判 class 衝突。\n      'opacity': ['opacity-disabled'],\n    },\n  },\n})\n\n/**\n * cn() — Tailwind class 合併工具\n *\n * 用法：\n *   cn(\"px-4 py-2\", isActive && \"bg-primary\", className)\n *\n * 原理：clsx 處理條件式 class，twMerge 解決 Tailwind class 衝突\n * 例如 cn(\"px-4\", \"px-2\") → \"px-2\"（後者優先）\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\n// ── line-clamp 安全對照(2026-07-18 決策4)────────────────────────────────────\n// 動態 `line-clamp-${n}` / `line-clamp-[${n}]` = Tailwind 掃不到具體值 → silent 失效(失敗記憶索引:\n//   「Tailwind v4 動態 class」陷阱)。此 map 全靜態字串 → Tailwind 可掃。canonical 上限 1-6(spec maxLines/\n//   descriptionClamp ≤6);超界值 dev-warn + clamp 回 6(不 crash、不靜默失效)。null/0/undefined → 不 clamp。\nconst LINE_CLAMP: Record<number, string> = {\n  1: 'line-clamp-1', 2: 'line-clamp-2', 3: 'line-clamp-3',\n  4: 'line-clamp-4', 5: 'line-clamp-5', 6: 'line-clamp-6',\n}\nexport function lineClampClass(n: number | undefined | null): string | undefined {\n  if (n == null || n <= 0) return undefined\n  const rounded = Math.round(n)\n  if (rounded !== n || n > 6) {\n    if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {\n      console.warn(`[DS] line-clamp 值 ${n} 超出 canonical 範圍 1-6(或非整數)→ clamp 回 6。請傳 1-6 整數。`)\n    }\n  }\n  return LINE_CLAMP[Math.min(6, Math.max(1, rounded))]\n}\n"],"names":[],"mappings":";;AAeA,MAAM,UAAU,oBAAoB;AAAA,EAClC,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,aAAa;AAAA,QACX;AAAA,QAAW;AAAA,QAAW;AAAA,QAAW;AAAA,QAAW;AAAA,QAAW;AAAA,QACvD;AAAA,QAAgB;AAAA,QAAa;AAAA,QAAgB;AAAA,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAW/C,cAAc;AAAA;AAAA,QAEZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QACA;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA;AAAA;AAAA,MAIF,WAAW,CAAC,kBAAkB;AAAA,IAAA;AAAA,EAChC;AAEJ,CAAC;AAWM,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;AAMA,MAAM,aAAqC;AAAA,EACzC,GAAG;AAAA,EAAgB,GAAG;AAAA,EAAgB,GAAG;AAAA,EACzC,GAAG;AAAA,EAAgB,GAAG;AAAA,EAAgB,GAAG;AAC3C;AACO,SAAS,eAAe,GAAkD;;AAC/E,MAAI,KAAK,QAAQ,KAAK,EAAG,QAAO;AAChC,QAAM,UAAU,KAAK,MAAM,CAAC;AAC5B,MAAI,YAAY,KAAK,IAAI,GAAG;AAC1B,QAAI,OAAO,YAAY,iBAAe,aAAQ,QAAR,mBAAa,cAAa,cAAc;AAC5E,cAAQ,KAAK,qBAAqB,CAAC,kDAAkD;AAAA,IACvF;AAAA,EACF;AACA,SAAO,WAAW,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AACrD;"}

package/dist/patterns/element-anatomy/index.d.ts

@@ -0,0 +1,3 @@
+export * from './item-anatomy';
+export * from './truncated-text';
+//# sourceMappingURL=index.d.ts.map