@cueplusplus/ui 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/dist/chrome/_drag.js +59 -0
  3. package/dist/chrome/_status-bar-item.js +85 -0
  4. package/dist/chrome/_status-bar.d.ts +15 -0
  5. package/dist/chrome/_status-bar.js +171 -0
  6. package/dist/chrome/app-shell.d.ts +69 -1
  7. package/dist/chrome/app-shell.js +38 -11
  8. package/dist/chrome/index.d.ts +3 -2
  9. package/dist/chrome/status-bar.d.ts +87 -4
  10. package/dist/chrome/status-bar.js +80 -16
  11. package/dist/chrome/title-bar.d.ts +11 -1
  12. package/dist/chrome/title-bar.js +1 -3
  13. package/dist/date/_segments.js +15 -4
  14. package/dist/forms/_chassis.d.ts +104 -4
  15. package/dist/forms/_chassis.js +104 -4
  16. package/dist/forms/input-group.d.ts +8 -3
  17. package/dist/forms/input-group.js +8 -3
  18. package/dist/forms/number-field.d.ts +3 -2
  19. package/dist/forms/number-field.js +3 -2
  20. package/dist/index.d.ts +7 -3
  21. package/dist/index.js +4 -1
  22. package/dist/instruments/_data-row.js +118 -0
  23. package/dist/instruments/data-row.d.ts +94 -0
  24. package/dist/instruments/data-row.js +151 -0
  25. package/dist/instruments/data-tree.d.ts +126 -0
  26. package/dist/instruments/data-tree.js +303 -0
  27. package/dist/instruments/index.d.ts +5 -2
  28. package/dist/instruments/index.js +4 -1
  29. package/dist/instruments/ledger.d.ts +105 -0
  30. package/dist/instruments/ledger.js +114 -0
  31. package/dist/instruments/table.d.ts +70 -2
  32. package/dist/instruments/table.js +133 -39
  33. package/dist/theming/_presets.js +3 -3
  34. package/manifest/components/app-shell.json +45 -4
  35. package/manifest/components/autocomplete.json +2 -0
  36. package/manifest/components/color-field.json +2 -0
  37. package/manifest/components/color-picker.json +2 -0
  38. package/manifest/components/combobox.json +2 -0
  39. package/manifest/components/composer.json +2 -0
  40. package/manifest/components/data-row.json +203 -0
  41. package/manifest/components/data-tree.json +151 -0
  42. package/manifest/components/date-field.json +2 -0
  43. package/manifest/components/date-picker.json +2 -0
  44. package/manifest/components/date-range-picker.json +2 -0
  45. package/manifest/components/env-var-input.json +2 -0
  46. package/manifest/components/input-group.json +4 -2
  47. package/manifest/components/input.json +3 -1
  48. package/manifest/components/ledger.json +187 -0
  49. package/manifest/components/multi-select.json +2 -0
  50. package/manifest/components/musical-time-input.json +2 -0
  51. package/manifest/components/number-field.json +3 -1
  52. package/manifest/components/otp-field.json +2 -0
  53. package/manifest/components/password-input.json +2 -0
  54. package/manifest/components/scrub-input.json +2 -0
  55. package/manifest/components/search-input.json +2 -0
  56. package/manifest/components/select.json +1 -0
  57. package/manifest/components/status-bar.json +146 -12
  58. package/manifest/components/table-scroll-region.json +6 -0
  59. package/manifest/components/table.json +88 -4
  60. package/manifest/components/tags-input.json +2 -0
  61. package/manifest/components/textarea.json +3 -1
  62. package/manifest/components/time-field.json +2 -0
  63. package/manifest/components/title-bar.json +1 -1
  64. package/manifest/components/toggle-group.json +2 -0
  65. package/manifest/components/toggle.json +2 -0
  66. package/manifest/manifest.json +72 -33
  67. package/manifest/tokens.json +1 -1
  68. package/package.json +4 -4
package/dist/index.d.ts CHANGED
@@ -25,7 +25,8 @@ import { Row, RowProps, SeamList, SeamListProps, rowVariants } from "./chrome/ro
25
25
  import { ScrollArea, ScrollAreaOrientation, ScrollAreaProps } from "./chrome/scroll-area.js";
26
26
  import { SectionHeader, SectionHeaderProps } from "./chrome/section-header.js";
27
27
  import { SegmentedControl, SegmentedControlItem, SegmentedControlProps, SegmentedControlSize } from "./chrome/segmented-control.js";
28
- import { StatusBar, StatusBarItemProps, StatusBarProps, StatusBarTone } from "./chrome/status-bar.js";
28
+ import { StatusBarProminence } from "./chrome/_status-bar.js";
29
+ import { StatusBar, StatusBarGroupProps, StatusBarItemProps, StatusBarProps, StatusBarTone } from "./chrome/status-bar.js";
29
30
  import { ScrollableTabsList, ScrollableTabsListProps, Tabs, TabsListProps, TabsPanelProps, TabsRootProps, TabsTabProps } from "./chrome/tabs.js";
30
31
  import { TitleBar, TitleBarProps } from "./chrome/title-bar.js";
31
32
  import { Tree, TreeProps, TreeVisibility, TreeVisibilityToggle, TreeVisibilityToggleProps } from "./chrome/tree.js";
@@ -68,13 +69,16 @@ import "./icons/index.js";
68
69
  import { AppWindowFrame, AppWindowFrameProps } from "./instruments/app-window-frame.js";
69
70
  import { Button, ButtonProps, buttonVariants } from "./primitives/button.js";
70
71
  import { CopyButton, CopyButtonProps } from "./instruments/copy-button.js";
72
+ import { DataRow, DataRowDisclosure, DataRowRootProps, DataRowSlotProps } from "./instruments/data-row.js";
73
+ import { DataTree, DataTreeItem, DataTreeProps, DataTreeRowState } from "./instruments/data-tree.js";
71
74
  import { GroupBar, GroupBarItem, GroupBarProps, GroupBarTone } from "./instruments/group-bar.js";
75
+ import { Ledger, LedgerEmptyProps, LedgerGroupProps, LedgerRootProps, LedgerTierProps } from "./instruments/ledger.js";
72
76
  import { Meter, MeterProps, MeterProvenance, MeterTone } from "./instruments/meter.js";
73
77
  import { Progress, ProgressProps } from "./instruments/progress.js";
74
78
  import { SeamCell, SeamCellProps, SeamGrid, SeamGridProps, SeamGround } from "./instruments/seam-grid.js";
75
79
  import { Sparkline, SparklineProps } from "./instruments/sparkline.js";
76
80
  import { Stat, StatProps, StatTone } from "./instruments/stat.js";
77
- import { Table, TableCaptionProps, TableCellProps, TableHeadProps, TableRootProps, TableRowProps, TableScrollRegion, TableScrollRegionProps, TableSectionProps } from "./instruments/table.js";
81
+ import { Table, TableCaptionProps, TableCellProps, TableGroupRowProps, TableHeadProps, TableRootProps, TableRowProps, TableScrollRegion, TableScrollRegionProps, TableSectionProps } from "./instruments/table.js";
78
82
  import { TerminalFrame, TerminalFrameLine, TerminalFrameProps, TerminalLine, TerminalLineTone, TerminalScript, TerminalStep } from "./instruments/terminal-frame.js";
79
83
  import { TwoStepButton, TwoStepButtonProps, TwoStepTone } from "./instruments/two-step-button.js";
80
84
  import { UsageChart, UsageChartPoint, UsageChartProps, UsageChartTone } from "./instruments/usage-chart.js";
@@ -120,4 +124,4 @@ import { DEFAULT_STORAGE_KEY, PersistedPreferences, PrepaintDefaults, PrepaintOp
120
124
  import { ControlSize, useControlHeight, useDensity } from "./system/use-density.js";
121
125
  import { useTheme } from "./system/use-theme.js";
122
126
  import { DensityLevel, FontName, Mode, ThemeName } from "./system/index.js";
123
- export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type BarOverflow, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontFamilies, type FontName, Footer, type FooterProps, type FormControlSize, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Item, type ItemProps, Kbd, type KbdProps, Link, type LinkProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, type StatProps, type StatTone, StatusBar, type StatusBarItemProps, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, Textarea, type TextareaProps, type ThemeContextValue, type ThemeName, ThemeProvider, type ThemeProviderProps, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensity, useSidebar, useTheme, useToast };
127
+ export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type BarOverflow, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontFamilies, type FontName, Footer, type FooterProps, type FormControlSize, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Item, type ItemProps, Kbd, type KbdProps, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Link, type LinkProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, type StatProps, type StatTone, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, Textarea, type TextareaProps, type ThemeContextValue, type ThemeName, ThemeProvider, type ThemeProviderProps, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensity, useSidebar, useTheme, useToast };
package/dist/index.js CHANGED
@@ -69,7 +69,10 @@ import { Toggle } from "./forms/toggle.js";
69
69
  import { AudienceIcon, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, CliToolIcon, FolderIcon, McpServerIcon, SkillIcon, StackIcon, StacksMatrixIcon } from "./icons/containers.js";
70
70
  import { AppWindowFrame } from "./instruments/app-window-frame.js";
71
71
  import { CopyButton } from "./instruments/copy-button.js";
72
+ import { DataRow } from "./instruments/data-row.js";
73
+ import { DataTree } from "./instruments/data-tree.js";
72
74
  import { GroupBar } from "./instruments/group-bar.js";
75
+ import { Ledger } from "./instruments/ledger.js";
73
76
  import { Meter } from "./instruments/meter.js";
74
77
  import { Progress } from "./instruments/progress.js";
75
78
  import { SeamCell, SeamGrid } from "./instruments/seam-grid.js";
@@ -108,4 +111,4 @@ import { Kbd } from "./primitives/kbd.js";
108
111
  import { Skeleton } from "./primitives/skeleton.js";
109
112
  import { useControlHeight, useDensity } from "./system/use-density.js";
110
113
  import { useTheme } from "./system/use-theme.js";
111
- export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_STORAGE_KEY, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, Footer, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Item, Kbd, Link, McpServerIcon, Menubar, Message, MessageList, Meter, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PageShell, Pagination, Panel, PanelHeader, PasswordInput, Plussie, Popover, Progress, Radio, RadioGroup, Rating, Row, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatusBar, StatusDot, Stepper, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensity, useSidebar, useTheme, useToast };
114
+ export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_STORAGE_KEY, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, Footer, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Item, Kbd, Ledger, Link, McpServerIcon, Menubar, Message, MessageList, Meter, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PageShell, Pagination, Panel, PanelHeader, PasswordInput, Plussie, Popover, Progress, Radio, RadioGroup, Rating, Row, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatusBar, StatusDot, Stepper, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensity, useSidebar, useTheme, useToast };
@@ -0,0 +1,118 @@
1
+ import { cva } from "../lib/cva.js";
2
+ //#region src/instruments/_data-row.ts
3
+ /**
4
+ * The row recipe, in the three shapes the surfaces need.
5
+ *
6
+ * `layout` — `grid` is the row proper, whose children are its columns; `flex`
7
+ * is the tree row, which puts a disclosure chevron outside the grid so the
8
+ * chevron is not a column the caller has to count (see the column-count rule in
9
+ * {@link DATA_ROW_COLUMNS}).
10
+ *
11
+ * `indent` — the tree's depth step, folded into the row's own left padding
12
+ * rather than applied to an inner wrapper, because the guides
13
+ * ({@link DataTreeProps.guides}) are painted on the row's background box and
14
+ * have to start where the padding does.
15
+ *
16
+ * `interactive` — the row responds to a pointer and to the keyboard. The focus
17
+ * ring is *inset* (`-outline-offset-2`), the same ruling as `Row`: these rows
18
+ * live in clipped panes, where an outset ring on the first or last row is cut
19
+ * off by the pane's own rim. `outline-solid` rides along with every
20
+ * `outline-<n>` in this file because Tailwind v4 leaves `--tw-outline-style`
21
+ * unset otherwise and the ring never paints — `test/focus-ring.test.ts` is what
22
+ * keeps the pair together.
23
+ *
24
+ * The selected tint is in the base rather than in `interactive`: a static row in
25
+ * a selected group still reads as selected, and the attribute is the contract
26
+ * either way. It is declared after the hover wash on purpose — Tailwind emits
27
+ * `data-*` variants after `hover:`, so a selected row keeps its accent tint
28
+ * while the pointer is over it instead of flickering back to the hover grey.
29
+ *
30
+ * @example
31
+ * cn(dataRowVariants({ interactive: true }), className)
32
+ */
33
+ const dataRowVariants = cva([
34
+ "group/data-row w-full items-center gap-(--cue-space-3) py-(--cue-pad-row-y)",
35
+ "font-mono text-(length:--cue-text-ui) text-fg",
36
+ "border-t border-t-(--cue-hair) first:border-t-0",
37
+ "data-[selected]:bg-accent-soft data-[disabled]:pointer-events-none data-[disabled]:opacity-40"
38
+ ].join(" "), {
39
+ variants: {
40
+ layout: {
41
+ grid: "grid [grid-template-columns:var(--cue-data-row-cols,1fr_auto)]",
42
+ flex: "flex"
43
+ },
44
+ indent: {
45
+ true: "pr-(--cue-pad-row-x) pl-[calc(var(--cue-pad-row-x)_+_var(--depth)_*_var(--cue-data-tree-indent,1.25rem))]",
46
+ false: "px-(--cue-pad-row-x)"
47
+ },
48
+ interactive: {
49
+ true: "cursor-pointer outline-none hover:bg-(--cue-row-hover) focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent",
50
+ false: ""
51
+ }
52
+ },
53
+ defaultVariants: {
54
+ layout: "grid",
55
+ indent: false,
56
+ interactive: false
57
+ }
58
+ });
59
+ /**
60
+ * Whether a click on a row means "open this row", and act on it if it does.
61
+ *
62
+ * Four cases a naive `onClick={open}` gets wrong, and this is the whole reason
63
+ * the row is not simply a `<button>`:
64
+ *
65
+ * - **A control inside the row.** The action cluster, a menu trigger, a
66
+ * checkbox — pressing one is not the same gesture as picking the row. Anything
67
+ * under a `[data-stop]` ancestor is left entirely alone, which is why
68
+ * `DataRow.Actions` stamps that attribute on itself.
69
+ * - **A link inside the row.** A plain click on it should open the row's own
70
+ * surface (the drawer, the detail pane), so the anchor's navigation is
71
+ * suppressed — but ⌘/Ctrl/Shift/Alt-click must still open a tab, which is the
72
+ * whole value of having shipped a real `<a href>` in the first place.
73
+ * - **A secondary button.** Only the primary button activates; the middle
74
+ * button belongs to the browser.
75
+ * - **An already-handled event.** A caller's own `onClick` that called
76
+ * `preventDefault()` has said no.
77
+ *
78
+ * @param event The row's own click event.
79
+ * @param activate What "open this row" means to the surface.
80
+ * @example
81
+ * onClick={(event) => activateRowFromClick(event, () => open(row))}
82
+ */
83
+ function activateRowFromClick(event, activate) {
84
+ if (event.defaultPrevented || event.button !== 0) return;
85
+ const target = event.target;
86
+ if (target === null) return;
87
+ if (target.closest("[data-stop]") !== null) return;
88
+ if (target.closest("a[href]") !== null) {
89
+ if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
90
+ event.preventDefault();
91
+ }
92
+ activate();
93
+ }
94
+ /**
95
+ * Whether a key press on a row means "open this row", and act on it if it does.
96
+ *
97
+ * Guarded on `event.target === event.currentTarget` so a control inside the row
98
+ * keeps its own keys: without it a rename field on a row could never contain a
99
+ * space, and every action button's Enter would also open the row behind it.
100
+ *
101
+ * Space is prevented rather than merely handled, because the browser's default
102
+ * for Space on a focused non-control is to scroll the page — a row that opened
103
+ * a drawer *and* jumped the list a screenful would read as a bug.
104
+ *
105
+ * @param event The row's own keydown event.
106
+ * @param activate What "open this row" means to the surface.
107
+ * @example
108
+ * onKeyDown={(event) => activateRowFromKeyDown(event, () => open(row))}
109
+ */
110
+ function activateRowFromKeyDown(event, activate) {
111
+ if (event.defaultPrevented) return;
112
+ if (event.target !== event.currentTarget) return;
113
+ if (event.key !== "Enter" && event.key !== " ") return;
114
+ event.preventDefault();
115
+ activate();
116
+ }
117
+ //#endregion
118
+ export { activateRowFromClick, activateRowFromKeyDown, dataRowVariants };
@@ -0,0 +1,94 @@
1
+ import * as React from "react";
2
+ //#region src/instruments/data-row.d.ts
3
+ /** What an interactive row discloses, when it discloses something. */
4
+ interface DataRowDisclosure {
5
+ /** Whether the surface this row opens is currently showing. */
6
+ expanded: boolean;
7
+ /**
8
+ * The `id` of the element the row opens, when that element is in the DOM.
9
+ *
10
+ * Omit it while the surface is closed and unrendered: `aria-controls`
11
+ * pointing at an id that does not exist is worse than no `aria-controls`.
12
+ */
13
+ controls?: string;
14
+ }
15
+ interface DataRowRootProps extends React.ComponentPropsWithoutRef<"div"> {
16
+ /**
17
+ * The row responds to a pointer and to the keyboard: hover wash, `cursor`,
18
+ * an inset focus ring and a tab stop. Defaults to `false`.
19
+ */
20
+ interactive?: boolean;
21
+ /**
22
+ * Draw the row as picked out of the list. Defaults to `false`.
23
+ *
24
+ * Sets `data-selected`, which is also what the hover-revealed action track and
25
+ * the accent tint key off — so a `<tr data-selected>` in the table idiom gets
26
+ * exactly the same treatment without going through this component.
27
+ */
28
+ selected?: boolean;
29
+ /** Grey the row out and stop it responding to anything. Defaults to `false`. */
30
+ disabled?: boolean;
31
+ /** What "open this row" means — a drawer, a detail pane, a route. */
32
+ onActivate?: () => void;
33
+ /**
34
+ * Expose the row as a disclosure: `data-expanded` always, `aria-expanded`
35
+ * when the row has a `role` that can carry it, and `aria-controls` when the
36
+ * disclosed element is on the page.
37
+ *
38
+ * **`aria-expanded` is gated on the role, because on a bare `<div>` it is
39
+ * worse than nothing.** A role-less div maps to `generic`, which supports
40
+ * only the global attributes — so the state is dropped outright by Blink,
41
+ * WebKit and Gecko alike (verified through Chromium's own accessibility
42
+ * tree), announces nothing, and adds a critical `aria-allowed-attr` finding
43
+ * to any axe run over the console that used it. `role` passes straight
44
+ * through as a div prop, so a row that genuinely is a disclosure says which
45
+ * kind it is — `role="button"` for a row that opens a drawer, `role="row"`
46
+ * inside a grid — and gets the attribute with it. Everything else gets
47
+ * `data-expanded`, which styles and tests exactly as well and promises
48
+ * nothing to a screen reader.
49
+ *
50
+ * The row is still not given a widget role on its own account: a
51
+ * `role="button"` row could not legally hold the buttons and links these rows
52
+ * exist to contain, and that judgement belongs to the caller who knows what
53
+ * their row does. Where the disclosure has to be bulletproof for assistive
54
+ * technology, reach for `DataTree` (real `treeitem` expansion) or a
55
+ * `Table.GroupRow` with a real toggle button in it.
56
+ */
57
+ disclosure?: DataRowDisclosure;
58
+ }
59
+ /** The native `<span>` surface every row slot shares, plus `className`. */
60
+ type DataRowSlotProps = React.ComponentPropsWithoutRef<"span">;
61
+ /**
62
+ * The dense interactive row, as one anatomy three surfaces share.
63
+ *
64
+ * `Ledger`, a grouped `Table` and `DataTree` are three drawings of the same row
65
+ * model, and this is the model: a marker, a label, a description, tags, a
66
+ * figure, and a trailing action cluster that is only there when you are looking
67
+ * at the row. Composing them yourself — rather than passing a `columns` array —
68
+ * is what keeps the primitive domain-neutral: a corpus of skills and a rig of
69
+ * fixtures need the same six slots and completely different columns.
70
+ *
71
+ * The slots are thin: each is a `<span>` with a `data-slot`, the type and
72
+ * truncation rule for its column, and nothing else. They may be used inside a
73
+ * `DataTree` row and inside a `Table.Cell` too — `Table.Row` carries the same
74
+ * `group/data-row` name, so `DataRow.Actions` reveals in the table idiom
75
+ * without a second implementation.
76
+ *
77
+ * @example
78
+ * <DataRow.Root interactive onActivate={() => open(skill)}>
79
+ * <DataRow.Marker><StatusDot tone="ok" /></DataRow.Marker>
80
+ * <DataRow.Label>{skill.name}</DataRow.Label>
81
+ * <DataRow.Meta>{skill.installs}</DataRow.Meta>
82
+ * </DataRow.Root>
83
+ */
84
+ declare const DataRow: {
85
+ Root: React.ForwardRefExoticComponent<DataRowRootProps & React.RefAttributes<HTMLDivElement>>;
86
+ Marker: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
87
+ Label: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
88
+ Description: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
89
+ Tags: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
90
+ Meta: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
91
+ Actions: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
92
+ };
93
+ //#endregion
94
+ export { DataRow, DataRowDisclosure, DataRowRootProps, DataRowSlotProps };
@@ -0,0 +1,151 @@
1
+ "use client";
2
+ import { cn } from "../lib/cn.js";
3
+ import { activateRowFromClick, activateRowFromKeyDown, dataRowVariants } from "./_data-row.js";
4
+ import * as React from "react";
5
+ import { jsx } from "react/jsx-runtime";
6
+ //#region src/instruments/data-row.tsx
7
+ /**
8
+ * The roles that carry `aria-expanded`, per ARIA 1.2's own "supported in roles"
9
+ * list, filtered to the ones a row could plausibly be given.
10
+ *
11
+ * The absent case is the one that matters: no `role` at all. A `<div>` is
12
+ * `generic`, `generic` supports only the globals, and every engine drops an
13
+ * `aria-expanded` it finds there rather than exposing a state — so emitting it
14
+ * anyway buys nothing and costs a critical axe violation.
15
+ */
16
+ const ROLES_SUPPORTING_EXPANDED = /* @__PURE__ */ new Set([
17
+ "application",
18
+ "button",
19
+ "checkbox",
20
+ "columnheader",
21
+ "combobox",
22
+ "grid",
23
+ "gridcell",
24
+ "link",
25
+ "listbox",
26
+ "menuitem",
27
+ "menuitemcheckbox",
28
+ "menuitemradio",
29
+ "row",
30
+ "rowheader",
31
+ "searchbox",
32
+ "switch",
33
+ "tab",
34
+ "table",
35
+ "textbox",
36
+ "treeitem"
37
+ ]);
38
+ /**
39
+ * The dense interactive row, as one anatomy three surfaces share.
40
+ *
41
+ * `Ledger`, a grouped `Table` and `DataTree` are three drawings of the same row
42
+ * model, and this is the model: a marker, a label, a description, tags, a
43
+ * figure, and a trailing action cluster that is only there when you are looking
44
+ * at the row. Composing them yourself — rather than passing a `columns` array —
45
+ * is what keeps the primitive domain-neutral: a corpus of skills and a rig of
46
+ * fixtures need the same six slots and completely different columns.
47
+ *
48
+ * The slots are thin: each is a `<span>` with a `data-slot`, the type and
49
+ * truncation rule for its column, and nothing else. They may be used inside a
50
+ * `DataTree` row and inside a `Table.Cell` too — `Table.Row` carries the same
51
+ * `group/data-row` name, so `DataRow.Actions` reveals in the table idiom
52
+ * without a second implementation.
53
+ *
54
+ * @example
55
+ * <DataRow.Root interactive onActivate={() => open(skill)}>
56
+ * <DataRow.Marker><StatusDot tone="ok" /></DataRow.Marker>
57
+ * <DataRow.Label>{skill.name}</DataRow.Label>
58
+ * <DataRow.Meta>{skill.installs}</DataRow.Meta>
59
+ * </DataRow.Root>
60
+ */
61
+ const DataRow = {
62
+ Root: React.forwardRef(function DataRowRoot({ className, interactive = false, selected = false, disabled = false, onActivate, disclosure, onClick, onKeyDown, role, ...elementProps }, ref) {
63
+ const expandable = role !== void 0 && ROLES_SUPPORTING_EXPANDED.has(role);
64
+ const activate = React.useCallback(() => {
65
+ if (!disabled) onActivate?.();
66
+ }, [disabled, onActivate]);
67
+ const handleClick = React.useCallback((event) => {
68
+ onClick?.(event);
69
+ if (interactive) activateRowFromClick(event, activate);
70
+ }, [
71
+ activate,
72
+ interactive,
73
+ onClick
74
+ ]);
75
+ const handleKeyDown = React.useCallback((event) => {
76
+ onKeyDown?.(event);
77
+ if (interactive) activateRowFromKeyDown(event, activate);
78
+ }, [
79
+ activate,
80
+ interactive,
81
+ onKeyDown
82
+ ]);
83
+ return /* @__PURE__ */ jsx("div", {
84
+ ref,
85
+ ...elementProps,
86
+ role,
87
+ "data-slot": "data-row",
88
+ "data-selected": selected ? "" : void 0,
89
+ "data-disabled": disabled ? "" : void 0,
90
+ "data-expanded": disclosure?.expanded === true ? "" : void 0,
91
+ tabIndex: interactive && !disabled ? 0 : void 0,
92
+ "aria-expanded": disclosure === void 0 || !expandable ? void 0 : disclosure.expanded,
93
+ "aria-controls": disclosure?.controls,
94
+ "aria-disabled": disabled ? true : void 0,
95
+ onClick: handleClick,
96
+ onKeyDown: handleKeyDown,
97
+ className: cn(dataRowVariants({ interactive }), className)
98
+ });
99
+ }),
100
+ Marker: React.forwardRef(function DataRowMarker({ className, ...elementProps }, ref) {
101
+ return /* @__PURE__ */ jsx("span", {
102
+ ref,
103
+ "data-slot": "data-row-marker",
104
+ className: cn("flex shrink-0 items-center", className),
105
+ ...elementProps
106
+ });
107
+ }),
108
+ Label: React.forwardRef(function DataRowLabel({ className, ...elementProps }, ref) {
109
+ return /* @__PURE__ */ jsx("span", {
110
+ ref,
111
+ "data-slot": "data-row-label",
112
+ className: cn("min-w-0 truncate text-fg", className),
113
+ ...elementProps
114
+ });
115
+ }),
116
+ Description: React.forwardRef(function DataRowDescription({ className, ...elementProps }, ref) {
117
+ return /* @__PURE__ */ jsx("span", {
118
+ ref,
119
+ "data-slot": "data-row-description",
120
+ className: cn("min-w-0 truncate text-(length:--cue-text-label) text-fg-muted", className),
121
+ ...elementProps
122
+ });
123
+ }),
124
+ Tags: React.forwardRef(function DataRowTags({ className, ...elementProps }, ref) {
125
+ return /* @__PURE__ */ jsx("span", {
126
+ ref,
127
+ "data-slot": "data-row-tags",
128
+ className: cn("flex min-w-0 items-center gap-(--cue-space-1)", className),
129
+ ...elementProps
130
+ });
131
+ }),
132
+ Meta: React.forwardRef(function DataRowMeta({ className, ...elementProps }, ref) {
133
+ return /* @__PURE__ */ jsx("span", {
134
+ ref,
135
+ "data-slot": "data-row-meta",
136
+ className: cn("shrink-0 tabular-nums text-fg-subtle", className),
137
+ ...elementProps
138
+ });
139
+ }),
140
+ Actions: React.forwardRef(function DataRowActions({ className, ...elementProps }, ref) {
141
+ return /* @__PURE__ */ jsx("span", {
142
+ ref,
143
+ "data-slot": "data-row-actions",
144
+ "data-stop": "",
145
+ className: cn("invisible inline-flex shrink-0 items-center gap-(--cue-space-1) [&>*]:shrink-0", "group-hover/data-row:visible group-focus-within/data-row:visible group-data-[selected]/data-row:visible", "[@media(hover:none)]:visible", className),
146
+ ...elementProps
147
+ });
148
+ })
149
+ };
150
+ //#endregion
151
+ export { DataRow };
@@ -0,0 +1,126 @@
1
+ import * as React from "react";
2
+ //#region src/instruments/data-tree.d.ts
3
+ /** What a row knows about itself when its content is a function. */
4
+ interface DataTreeRowState {
5
+ /** Depth from the roots; `0` for a root. */
6
+ level: number;
7
+ /** Whether the node declares children at all. */
8
+ hasChildren: boolean;
9
+ /** Whether those children are currently shown. */
10
+ expanded: boolean;
11
+ /** Whether this row is the selected one. */
12
+ selected: boolean;
13
+ }
14
+ /** One node of the tree: an identity, a row's worth of content, and children. */
15
+ interface DataTreeItem {
16
+ /** Stable identity: what selection, expansion and focus are keyed on. */
17
+ id: string;
18
+ /**
19
+ * The row's content — normally `DataRow` slots, in the same order and with
20
+ * the same tracks as the other idioms drawing this dataset.
21
+ *
22
+ * A function receives the row's own state, for the cases where the content
23
+ * differs by it: a count that only shows while a node is folded, a different
24
+ * marker for an expanded parent.
25
+ */
26
+ row: React.ReactNode | ((state: DataTreeRowState) => React.ReactNode);
27
+ /**
28
+ * Nested nodes. An empty array still makes the row a parent — an empty folder
29
+ * is a folder, and `aria-expanded` on it is the truth.
30
+ */
31
+ children?: readonly DataTreeItem[];
32
+ /** Grey the row out; it stays reachable by keyboard but cannot be selected. */
33
+ disabled?: boolean;
34
+ }
35
+ interface DataTreeProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onSelect"> {
36
+ /** The roots, in display order. */
37
+ items: readonly DataTreeItem[];
38
+ /** Expanded ids when controlled. Pass with `onExpandedChange`. */
39
+ expanded?: readonly string[];
40
+ /** Initially expanded ids when uncontrolled. */
41
+ defaultExpanded?: readonly string[];
42
+ /** Called with the whole next expanded set whenever a row is folded or unfolded. */
43
+ onExpandedChange?: (expanded: string[]) => void;
44
+ /** Selected id when controlled. Pass with `onSelect`. */
45
+ selected?: string | null;
46
+ /** Initially selected id when uncontrolled. */
47
+ defaultSelected?: string | null;
48
+ /** Called with the id of the row the user selected. */
49
+ onSelect?: (id: string) => void;
50
+ /**
51
+ * Draw the depth guides. Defaults to `true`.
52
+ *
53
+ * Roots never draw one — there is no ancestor to draw — so a flat tree draws
54
+ * none at all whatever this is set to.
55
+ */
56
+ guides?: boolean;
57
+ /** Accessible name for the tree. Required in practice — name what it lists. */
58
+ "aria-label"?: string;
59
+ }
60
+ /**
61
+ * A hierarchy of multi-column rows: the tree idiom over the `DataRow` anatomy.
62
+ *
63
+ * ## The ARIA pattern, chosen before the component was written
64
+ *
65
+ * `role="treegrid"` is **rejected** for this foundation. It is the semantically
66
+ * exact answer — tabular *and* hierarchical — and it is the one with the worst
67
+ * real-world assistive-technology record: Adrian Roselli's survey of expando
68
+ * tables calls its support poor and notes that the APG's own worked example
69
+ * carries unresolved issues; fancytree's maintainer describes treegrid support
70
+ * as unproven ground; MUI X shipped hierarchical rows with no `aria-level` /
71
+ * `aria-expanded` / `aria-setsize` at all and retrofitted them later. Treegrid
72
+ * earns its cost when cells are individually interactive or editable, because
73
+ * then a reader genuinely needs two-dimensional cell navigation. This surface is
74
+ * read-and-navigate: you move down rows, fold a branch, and open the thing a row
75
+ * names.
76
+ *
77
+ * So the pattern is `role="tree"` with `role="treeitem"` rows — VS Code's
78
+ * choice and Carbon's, and the best-supported composite pattern in ARIA:
79
+ *
80
+ * - A **flat DOM** with `aria-level` / `aria-posinset` / `aria-setsize` per row
81
+ * rather than nested `role="group"` wrappers.
82
+ * - **Roving tabindex**: the tree is one Tab stop and the arrows move inside it.
83
+ * - The **APG tree keyboard map**: Up/Down between visible rows, Home/End to the
84
+ * ends, Right to unfold then to descend, Left to fold then to ascend,
85
+ * Enter/Space to select.
86
+ * - Expansion lives on the **row**, as `aria-expanded` on the `treeitem` — that
87
+ * is what tree semantics mean by a parent, and it is why the chevron here is
88
+ * `role="presentation"` rather than a button. (The other half of this trade
89
+ * is `Table.GroupRow`, where the table's semantics own the grouping and a real
90
+ * `<button aria-expanded>` owns the disclosure. Two patterns, each internally
91
+ * consistent; what would be wrong is half of each.)
92
+ *
93
+ * **The documented trade**: columns are not independently navigable. A row's
94
+ * multi-column content lives *inside* the treeitem, so a screen-reader user
95
+ * hears the row as one string rather than moving cell to cell through it. For a
96
+ * dense browse-and-open surface that is the better bargain — `tree` works today
97
+ * on every screen reader, `treegrid` does not — but a surface whose cells are
98
+ * genuinely editable has outgrown this component and wants a real treegrid from
99
+ * a library that maintains one.
100
+ *
101
+ * ## Everything else
102
+ *
103
+ * Rows are the `DataRow` chassis: same padding, same hairline, same hover wash,
104
+ * same inset focus ring, same `group/data-row`, so `DataRow.Actions` reveals in
105
+ * a tree exactly as it does in a ledger. The row element itself is the
106
+ * treeitem — one element owns focus, expansion, selection and the click reading
107
+ * — and the caller's `DataRow.*` slots are its content.
108
+ *
109
+ * A tree whose items declare no children anywhere is a flat list: no chevrons,
110
+ * no spacer column where a chevron would be, no guides, and `aria-expanded` on
111
+ * nothing. A leaf row that carried `aria-expanded="false"` would tell a screen
112
+ * reader it has children it does not have.
113
+ *
114
+ * @example
115
+ * <DataTree
116
+ * aria-label="Patch"
117
+ * items={nodes}
118
+ * defaultExpanded={["inputs"]}
119
+ * selected={selected}
120
+ * onSelect={setSelected}
121
+ * className="[--cue-data-row-cols:1fr_8rem_auto]"
122
+ * />
123
+ */
124
+ declare const DataTree: React.ForwardRefExoticComponent<DataTreeProps & React.RefAttributes<HTMLDivElement>>;
125
+ //#endregion
126
+ export { DataTree, DataTreeItem, DataTreeProps, DataTreeRowState };