@cueplusplus/ui 0.3.0 → 0.6.0

package/dist/icons/containers.js

@@ -0,0 +1,295 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/icons/containers.tsx
+/**
+* The containers a catalogue sorts things into, drawn.
+*
+* A console's navigation column is a list of *places*: everything, one person's
+* stack, everyone's stacks at once, an audience, a channel, a folder somebody
+* made, and the two kinds of thing a registry files beside a skill. Every one
+* of those rows has a name, and a name is enough — right up until the column
+* rails, at which point the row is nothing but its glyph and a place with no
+* glyph is a place that has disappeared. That is what this set is for, and it
+* is why it is a set rather than ten icons: they are read in one column, one
+* after another, so a grid or a weight that drifts on any one of them is read
+* as a mistake on that row rather than as a style.
+*
+* Drawn inline, on the same terms as the library's own `_glyphs` modules: a
+* navigation column should not put an icon dependency on its render path, and
+* hand-set strokes stay hairline-thin at the 10–16px `--cue-icon-*` sizes
+* console density asks for. `lucide-react` stays the answer for everything
+* outside this vocabulary — it is an optional peer, and these ten are here
+* only because no icon library has a mark for "everyone's stacks, side by
+* side".
+*
+* Three rules hold the set together, and the suite holds all three:
+*
+* - **One grid.** `0 0 16 16` at `stroke-width` 1.5, the grid and the weight
+*   every glyph in this library is already drawn on. A 24 grid is what
+*   `lucide-react` uses and what the prototype these came from used, but 1.5
+*   on a 24 grid renders two-thirds the weight of 1.5 on a 16 grid at the same
+*   box — so matching the number there would have meant not matching the line.
+*   The line is the thing a reader sees.
+* - **No size.** No `width`, no `height`: the caller sizes them, and in this
+*   library that means a density token — `size-icon-md` on a navigation row,
+*   `size-icon-sm` inside a control. An icon that measured itself would be the
+*   one thing in a density island that did not move.
+* - **No colour.** `currentColor` throughout, so the tone comes from the row:
+*   muted at rest, `--cue-fg` when it is the current place, `--cue-danger`
+*   inside a destructive menu item. Nothing here reads a token directly.
+*
+* They are decorative by default — `aria-hidden` — because they mark a row that
+* already carries its name, and a second announcement of the same word is
+* noise. The props spread last, so a glyph that has become the *only* name for
+* something (an icon-only rail with no `sr-only` label, which is a shape this
+* library argues against but does not forbid) can be turned back into a picture
+* with `aria-hidden={false} role="img"` and a `<title>`.
+*/
+/**
+* The chassis every icon in the set is drawn on.
+*
+* One object rather than six attributes written ten times: consistency by
+* construction is the only kind that survives an eleventh icon being added in a
+* hurry.
+*
+* @internal Not part of the public API.
+*/
+const CONTAINER_ICON = {
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": true
+};
+/**
+* The catalogue itself: everything there is, before anything has been narrowed.
+*
+* One tile repeated over a 2×2 rather than a stack of rows, because the row
+* this marks is the one that *undoes* a filter — "all of it" is a shape, and a
+* list glyph would have promised an ordering the row does not have.
+*/
+function CatalogueIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...CONTAINER_ICON,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: "2.25",
+				y: "2.25",
+				width: "5",
+				height: "5",
+				rx: "1"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "8.75",
+				y: "2.25",
+				width: "5",
+				height: "5",
+				rx: "1"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "2.25",
+				y: "8.75",
+				width: "5",
+				height: "5",
+				rx: "1"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "8.75",
+				y: "8.75",
+				width: "5",
+				height: "5",
+				rx: "1"
+			})
+		]
+	});
+}
+/**
+* One person's stack: the set of things they have actually installed.
+*
+* Plates seen edge-on — the layers idiom — because a stack is an accumulation
+* and not a container: things go into it one at a time and the order they went
+* in is part of what it is.
+*/
+function StackIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...CONTAINER_ICON,
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M8 2.75 14 6l-6 3.25L2 6z" }), /* @__PURE__ */ jsx("path", { d: "m2 10 6 3.25L14 10" })]
+	});
+}
+/**
+* Every stack at once, one column each: who has what, read across.
+*
+* A table rather than more plates. The head rule and the name column are what
+* make it a matrix instead of a grid — the question it answers is "which of
+* these does that person not have", and that is a question with two axes.
+*/
+function StacksMatrixIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...CONTAINER_ICON,
+		...props,
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "2.25",
+			y: "3",
+			width: "11.5",
+			height: "10",
+			rx: "1.25"
+		}), /* @__PURE__ */ jsx("path", { d: "M2.25 6.5h11.5M6.25 6.5V13" })]
+	});
+}
+/**
+* An audience: a named group of people something is published to.
+*
+* People, not an abstract shape. An audience is the one container in this set
+* whose members are humans rather than artefacts, and drawing it as a diamond
+* or a tag would have filed it with the folders — which is exactly the mistake
+* a reader makes when deciding where to publish something.
+*/
+function AudienceIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...CONTAINER_ICON,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "6.25",
+				cy: "5.5",
+				r: "2.25"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M2 13.25c0-2.2 1.9-3.5 4.25-3.5s4.25 1.3 4.25 3.5" }),
+			/* @__PURE__ */ jsx("path", { d: "M10.5 3.6a2.25 2.25 0 0 1 0 3.8" }),
+			/* @__PURE__ */ jsx("path", { d: "M11.9 9.95c1.35.5 2.1 1.6 2.1 3.3" })
+		]
+	});
+}
+/**
+* The released channel: what a colleague gets when they install without asking
+* for anything in particular.
+*
+* A ring filled solid. Its pair, {@link ChannelBetaIcon}, is the same ring
+* filled halfway — the two are one mark told twice, so a reader never has to
+* learn which of two unrelated pictures means "finished".
+*/
+function ChannelReleasedIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...CONTAINER_ICON,
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "5.5"
+		}), /* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "3",
+			fill: "currentColor",
+			stroke: "none"
+		})]
+	});
+}
+/**
+* The beta channel: the same things, one merge earlier.
+*
+* The released ring at half fill. Half rather than empty because a beta is not
+* an absence of a release — it is a release that has not finished happening,
+* and an empty ring would have read as "nothing here yet".
+*/
+function ChannelBetaIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...CONTAINER_ICON,
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "5.5"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M8 5a3 3 0 0 1 0 6z",
+			fill: "currentColor",
+			stroke: "none"
+		})]
+	});
+}
+/**
+* A folder somebody made: a shelf of bookmarks, filed by hand.
+*
+* The tab is the whole glyph. A plain rounded box in this library is a panel,
+* a card or a dialog, and the one thing a folder has to say is that a person
+* put these here on purpose rather than a query having returned them.
+*/
+function FolderIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		...CONTAINER_ICON,
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M2 12.5V4.5a1 1 0 0 1 1-1h3.4l1.6 2H13a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z" })
+	});
+}
+/**
+* An MCP server in the registry: a thing an agent connects *to*.
+*
+* Two rack units with a status lamp each. It is drawn as hardware on purpose —
+* an MCP server is the one entry in a catalogue of files that is a running
+* process somewhere, with an address and a session, and a row that looked like
+* a document would hide the only fact about it that matters operationally.
+*/
+function McpServerIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...CONTAINER_ICON,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: "2.25",
+				y: "3",
+				width: "11.5",
+				height: "4.5",
+				rx: "1.25"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "2.25",
+				y: "8.5",
+				width: "11.5",
+				height: "4.5",
+				rx: "1.25"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M4.75 5.25h.01M4.75 10.75h.01" })
+		]
+	});
+}
+/**
+* A CLI tool in the registry: a thing that runs in a terminal.
+*
+* A window with a prompt in it, rather than a bare chevron. A chevron on its
+* own is a disclosure everywhere else in this library, and a navigation row
+* that appeared to expand and then navigated instead is a worse failure than a
+* slightly busier glyph at 10px.
+*/
+function CliToolIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...CONTAINER_ICON,
+		...props,
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "2.25",
+			y: "2.75",
+			width: "11.5",
+			height: "10.5",
+			rx: "1.5"
+		}), /* @__PURE__ */ jsx("path", { d: "m5 6.75 1.9 1.75L5 10.25M8.75 10.25h2.5" })]
+	});
+}
+/**
+* A skill: the thing every other container in this set holds.
+*
+* One mark, and a spark rather than a document, because what is being filed is
+* a capability. The file it happens to be written in is an implementation
+* detail of how it travels, and a page glyph would have made the catalogue look
+* like a folder of documents rather than a list of things an agent can now do.
+*/
+function SkillIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		...CONTAINER_ICON,
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M8 2.25 9.6 6.4l4.15 1.6-4.15 1.6L8 13.75 6.4 9.6 2.25 8 6.4 6.4z" })
+	});
+}
+//#endregion
+export { AudienceIcon, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, CliToolIcon, FolderIcon, McpServerIcon, SkillIcon, StackIcon, StacksMatrixIcon };

package/dist/icons/index.d.ts

@@ -0,0 +1,2 @@
+import { AudienceIcon, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, CliToolIcon, FolderIcon, McpServerIcon, SkillIcon, StackIcon, StacksMatrixIcon } from "./containers.js";
+export { AudienceIcon, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, CliToolIcon, FolderIcon, McpServerIcon, SkillIcon, StackIcon, StacksMatrixIcon };

package/dist/index.d.ts

@@ -1,9 +1,9 @@
+import { AskAnswer, AskBox, AskBoxProps, AskDanger, AskKind, AskOption } from "./chat/ask-box.js";
+import { Message, MessageProps, MessageRole } from "./chat/message.js";
 import { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, AgentColorOptions, agentColor, agentColorStyle } from "./chat/agent-color.js";
 import { AgentPile, AgentPileEntry, AgentPileProps, AgentPileSize } from "./chat/agent-pile.js";
-import { AskAnswer, AskBox, AskBoxProps, AskDanger, AskKind, AskOption } from "./chat/ask-box.js";
 import { Composer, ComposerProps, ComposerSubmitKey } from "./chat/composer.js";
 import { DelegationCard, DelegationCardProps, DelegationDirection, DelegationStatus } from "./chat/delegation-card.js";
-import { Message, MessageProps, MessageRole } from "./chat/message.js";
 import { MessageList, MessageListProps } from "./chat/message-list.js";
 import "./chat/index.js";
 import { ScrollEdges, TAB_FADE_PX, computeScrollEdges, edgeFadeMask } from "./chrome/_tabs-scroll.js";
@@ -13,7 +13,7 @@ import { Link, LinkProps, linkVariants } from "./layout/link.js";
 import { Separator, SeparatorProps } from "./primitives/separator.js";
 import { AppBar, AppBarActionsProps, AppBarBrandProps, AppBarLinkProps, AppBarNavProps, AppBarRegister, AppBarRootProps, AppBarSeparatorProps } from "./chrome/app-bar.js";
 import { Sidebar, SidebarItemProps, SidebarRailProps, SidebarRootProps, SidebarSectionProps, useSidebar } from "./layout/sidebar.js";
-import { AppShell, AppShellAsideProps, AppShellBodyProps, AppShellContentProps, AppShellNavTriggerProps, AppShellRootProps, AppShellScrollerProps, AppShellSidebarProps } from "./chrome/app-shell.js";
+import { AppShell, AppShellAsideProps, AppShellBarProps, AppShellBodyProps, AppShellContentProps, AppShellNavTriggerProps, AppShellRootProps, AppShellScrollerProps, AppShellSidebarProps } from "./chrome/app-shell.js";
 import { EmptyState, EmptyStateProps } from "./chrome/empty-state.js";
 import { Eyebrow, EyebrowProps } from "./chrome/eyebrow.js";
 import { Container, ContainerProps, ContainerWidth } from "./layout/container.js";
@@ -25,7 +25,8 @@ import { Row, RowProps, SeamList, SeamListProps, rowVariants } from "./chrome/ro
 import { ScrollArea, ScrollAreaOrientation, ScrollAreaProps } from "./chrome/scroll-area.js";
 import { SectionHeader, SectionHeaderProps } from "./chrome/section-header.js";
 import { SegmentedControl, SegmentedControlItem, SegmentedControlProps, SegmentedControlSize } from "./chrome/segmented-control.js";
-import { StatusBar, StatusBarItemProps, StatusBarProps, StatusBarTone } from "./chrome/status-bar.js";
+import { StatusBarProminence } from "./chrome/_status-bar.js";
+import { StatusBar, StatusBarGroupProps, StatusBarItemProps, StatusBarProps, StatusBarTone } from "./chrome/status-bar.js";
 import { ScrollableTabsList, ScrollableTabsListProps, Tabs, TabsListProps, TabsPanelProps, TabsRootProps, TabsTabProps } from "./chrome/tabs.js";
 import { TitleBar, TitleBarProps } from "./chrome/title-bar.js";
 import { Tree, TreeProps, TreeVisibility, TreeVisibilityToggle, TreeVisibilityToggleProps } from "./chrome/tree.js";
@@ -63,16 +64,21 @@ import { CueLogotype, CueLogotypeProps } from "./brand/cue-logotype.js";
 import { CueMark, CueMarkProps } from "./brand/cue-mark.js";
 import { Plussie, PlussieExpression, PlussieProps } from "./brand/plussie.js";
 import "./brand/index.js";
+import { AudienceIcon, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, CliToolIcon, FolderIcon, McpServerIcon, SkillIcon, StackIcon, StacksMatrixIcon } from "./icons/containers.js";
+import "./icons/index.js";
 import { AppWindowFrame, AppWindowFrameProps } from "./instruments/app-window-frame.js";
 import { Button, ButtonProps, buttonVariants } from "./primitives/button.js";
 import { CopyButton, CopyButtonProps } from "./instruments/copy-button.js";
+import { DataRow, DataRowDisclosure, DataRowRootProps, DataRowSlotProps } from "./instruments/data-row.js";
+import { DataTree, DataTreeItem, DataTreeProps, DataTreeRowState } from "./instruments/data-tree.js";
 import { GroupBar, GroupBarItem, GroupBarProps, GroupBarTone } from "./instruments/group-bar.js";
+import { Ledger, LedgerEmptyProps, LedgerGroupProps, LedgerRootProps, LedgerTierProps } from "./instruments/ledger.js";
 import { Meter, MeterProps, MeterProvenance, MeterTone } from "./instruments/meter.js";
 import { Progress, ProgressProps } from "./instruments/progress.js";
 import { SeamCell, SeamCellProps, SeamGrid, SeamGridProps, SeamGround } from "./instruments/seam-grid.js";
 import { Sparkline, SparklineProps } from "./instruments/sparkline.js";
 import { Stat, StatProps, StatTone } from "./instruments/stat.js";
-import { Table, TableCaptionProps, TableCellProps, TableHeadProps, TableRootProps, TableRowProps, TableScrollRegion, TableScrollRegionProps, TableSectionProps } from "./instruments/table.js";
+import { Table, TableCaptionProps, TableCellProps, TableGroupRowProps, TableHeadProps, TableRootProps, TableRowProps, TableScrollRegion, TableScrollRegionProps, TableSectionProps } from "./instruments/table.js";
 import { TerminalFrame, TerminalFrameLine, TerminalFrameProps, TerminalLine, TerminalLineTone, TerminalScript, TerminalStep } from "./instruments/terminal-frame.js";
 import { TwoStepButton, TwoStepButtonProps, TwoStepTone } from "./instruments/two-step-button.js";
 import { UsageChart, UsageChartPoint, UsageChartProps, UsageChartTone } from "./instruments/usage-chart.js";
@@ -118,4 +124,4 @@ import { DEFAULT_STORAGE_KEY, PersistedPreferences, PrepaintDefaults, PrepaintOp
 import { ControlSize, useControlHeight, useDensity } from "./system/use-density.js";
 import { useTheme } from "./system/use-theme.js";
 import { DensityLevel, FontName, Mode, ThemeName } from "./system/index.js";
-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 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, 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, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, 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, 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, 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, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, type StackJustify, type StackProps, 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 };
+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

@@ -66,9 +66,13 @@ import { TagsInput } from "./forms/tags-input.js";
 import { Textarea } from "./forms/textarea.js";
 import { ToggleGroup } from "./forms/toggle-group.js";
 import { Toggle } from "./forms/toggle.js";
+import { AudienceIcon, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, CliToolIcon, FolderIcon, McpServerIcon, SkillIcon, StackIcon, StacksMatrixIcon } from "./icons/containers.js";
 import { AppWindowFrame } from "./instruments/app-window-frame.js";
 import { CopyButton } from "./instruments/copy-button.js";
+import { DataRow } from "./instruments/data-row.js";
+import { DataTree } from "./instruments/data-tree.js";
 import { GroupBar } from "./instruments/group-bar.js";
+import { Ledger } from "./instruments/ledger.js";
 import { Meter } from "./instruments/meter.js";
 import { Progress } from "./instruments/progress.js";
 import { SeamCell, SeamGrid } from "./instruments/seam-grid.js";
@@ -107,4 +111,4 @@ import { Kbd } from "./primitives/kbd.js";
 import { Skeleton } from "./primitives/skeleton.js";
 import { useControlHeight, useDensity } from "./system/use-density.js";
 import { useTheme } from "./system/use-theme.js";
-export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, Autocomplete, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, Checkbox, CheckboxGroup, Chip, 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, Footer, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Item, Kbd, Link, 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, Slider, Sparkline, Spinner, Stack, 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 };
+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 };

package/dist/instruments/_data-row.js

@@ -0,0 +1,118 @@
+import { cva } from "../lib/cva.js";
+//#region src/instruments/_data-row.ts
+/**
+* The row recipe, in the three shapes the surfaces need.
+*
+* `layout` — `grid` is the row proper, whose children are its columns; `flex`
+* is the tree row, which puts a disclosure chevron outside the grid so the
+* chevron is not a column the caller has to count (see the column-count rule in
+* {@link DATA_ROW_COLUMNS}).
+*
+* `indent` — the tree's depth step, folded into the row's own left padding
+* rather than applied to an inner wrapper, because the guides
+* ({@link DataTreeProps.guides}) are painted on the row's background box and
+* have to start where the padding does.
+*
+* `interactive` — the row responds to a pointer and to the keyboard. The focus
+* ring is *inset* (`-outline-offset-2`), the same ruling as `Row`: these rows
+* live in clipped panes, where an outset ring on the first or last row is cut
+* off by the pane's own rim. `outline-solid` rides along with every
+* `outline-<n>` in this file because Tailwind v4 leaves `--tw-outline-style`
+* unset otherwise and the ring never paints — `test/focus-ring.test.ts` is what
+* keeps the pair together.
+*
+* The selected tint is in the base rather than in `interactive`: a static row in
+* a selected group still reads as selected, and the attribute is the contract
+* either way. It is declared after the hover wash on purpose — Tailwind emits
+* `data-*` variants after `hover:`, so a selected row keeps its accent tint
+* while the pointer is over it instead of flickering back to the hover grey.
+*
+* @example
+* cn(dataRowVariants({ interactive: true }), className)
+*/
+const dataRowVariants = cva([
+	"group/data-row w-full items-center gap-(--cue-space-3) py-(--cue-pad-row-y)",
+	"font-mono text-(length:--cue-text-ui) text-fg",
+	"border-t border-t-(--cue-hair) first:border-t-0",
+	"data-[selected]:bg-accent-soft data-[disabled]:pointer-events-none data-[disabled]:opacity-40"
+].join(" "), {
+	variants: {
+		layout: {
+			grid: "grid [grid-template-columns:var(--cue-data-row-cols,1fr_auto)]",
+			flex: "flex"
+		},
+		indent: {
+			true: "pr-(--cue-pad-row-x) pl-[calc(var(--cue-pad-row-x)_+_var(--depth)_*_var(--cue-data-tree-indent,1.25rem))]",
+			false: "px-(--cue-pad-row-x)"
+		},
+		interactive: {
+			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",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		layout: "grid",
+		indent: false,
+		interactive: false
+	}
+});
+/**
+* Whether a click on a row means "open this row", and act on it if it does.
+*
+* Four cases a naive `onClick={open}` gets wrong, and this is the whole reason
+* the row is not simply a `<button>`:
+*
+* - **A control inside the row.** The action cluster, a menu trigger, a
+*   checkbox — pressing one is not the same gesture as picking the row. Anything
+*   under a `[data-stop]` ancestor is left entirely alone, which is why
+*   `DataRow.Actions` stamps that attribute on itself.
+* - **A link inside the row.** A plain click on it should open the row's own
+*   surface (the drawer, the detail pane), so the anchor's navigation is
+*   suppressed — but ⌘/Ctrl/Shift/Alt-click must still open a tab, which is the
+*   whole value of having shipped a real `<a href>` in the first place.
+* - **A secondary button.** Only the primary button activates; the middle
+*   button belongs to the browser.
+* - **An already-handled event.** A caller's own `onClick` that called
+*   `preventDefault()` has said no.
+*
+* @param event The row's own click event.
+* @param activate What "open this row" means to the surface.
+* @example
+* onClick={(event) => activateRowFromClick(event, () => open(row))}
+*/
+function activateRowFromClick(event, activate) {
+	if (event.defaultPrevented || event.button !== 0) return;
+	const target = event.target;
+	if (target === null) return;
+	if (target.closest("[data-stop]") !== null) return;
+	if (target.closest("a[href]") !== null) {
+		if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+		event.preventDefault();
+	}
+	activate();
+}
+/**
+* Whether a key press on a row means "open this row", and act on it if it does.
+*
+* Guarded on `event.target === event.currentTarget` so a control inside the row
+* keeps its own keys: without it a rename field on a row could never contain a
+* space, and every action button's Enter would also open the row behind it.
+*
+* Space is prevented rather than merely handled, because the browser's default
+* for Space on a focused non-control is to scroll the page — a row that opened
+* a drawer *and* jumped the list a screenful would read as a bug.
+*
+* @param event The row's own keydown event.
+* @param activate What "open this row" means to the surface.
+* @example
+* onKeyDown={(event) => activateRowFromKeyDown(event, () => open(row))}
+*/
+function activateRowFromKeyDown(event, activate) {
+	if (event.defaultPrevented) return;
+	if (event.target !== event.currentTarget) return;
+	if (event.key !== "Enter" && event.key !== " ") return;
+	event.preventDefault();
+	activate();
+}
+//#endregion
+export { activateRowFromClick, activateRowFromKeyDown, dataRowVariants };

package/dist/instruments/data-row.d.ts

@@ -0,0 +1,94 @@
+import * as React from "react";
+//#region src/instruments/data-row.d.ts
+/** What an interactive row discloses, when it discloses something. */
+interface DataRowDisclosure {
+  /** Whether the surface this row opens is currently showing. */
+  expanded: boolean;
+  /**
+   * The `id` of the element the row opens, when that element is in the DOM.
+   *
+   * Omit it while the surface is closed and unrendered: `aria-controls`
+   * pointing at an id that does not exist is worse than no `aria-controls`.
+   */
+  controls?: string;
+}
+interface DataRowRootProps extends React.ComponentPropsWithoutRef<"div"> {
+  /**
+   * The row responds to a pointer and to the keyboard: hover wash, `cursor`,
+   * an inset focus ring and a tab stop. Defaults to `false`.
+   */
+  interactive?: boolean;
+  /**
+   * Draw the row as picked out of the list. Defaults to `false`.
+   *
+   * Sets `data-selected`, which is also what the hover-revealed action track and
+   * the accent tint key off — so a `<tr data-selected>` in the table idiom gets
+   * exactly the same treatment without going through this component.
+   */
+  selected?: boolean;
+  /** Grey the row out and stop it responding to anything. Defaults to `false`. */
+  disabled?: boolean;
+  /** What "open this row" means — a drawer, a detail pane, a route. */
+  onActivate?: () => void;
+  /**
+   * Expose the row as a disclosure: `data-expanded` always, `aria-expanded`
+   * when the row has a `role` that can carry it, and `aria-controls` when the
+   * disclosed element is on the page.
+   *
+   * **`aria-expanded` is gated on the role, because on a bare `<div>` it is
+   * worse than nothing.** A role-less div maps to `generic`, which supports
+   * only the global attributes — so the state is dropped outright by Blink,
+   * WebKit and Gecko alike (verified through Chromium's own accessibility
+   * tree), announces nothing, and adds a critical `aria-allowed-attr` finding
+   * to any axe run over the console that used it. `role` passes straight
+   * through as a div prop, so a row that genuinely is a disclosure says which
+   * kind it is — `role="button"` for a row that opens a drawer, `role="row"`
+   * inside a grid — and gets the attribute with it. Everything else gets
+   * `data-expanded`, which styles and tests exactly as well and promises
+   * nothing to a screen reader.
+   *
+   * The row is still not given a widget role on its own account: a
+   * `role="button"` row could not legally hold the buttons and links these rows
+   * exist to contain, and that judgement belongs to the caller who knows what
+   * their row does. Where the disclosure has to be bulletproof for assistive
+   * technology, reach for `DataTree` (real `treeitem` expansion) or a
+   * `Table.GroupRow` with a real toggle button in it.
+   */
+  disclosure?: DataRowDisclosure;
+}
+/** The native `<span>` surface every row slot shares, plus `className`. */
+type DataRowSlotProps = React.ComponentPropsWithoutRef<"span">;
+/**
+ * The dense interactive row, as one anatomy three surfaces share.
+ *
+ * `Ledger`, a grouped `Table` and `DataTree` are three drawings of the same row
+ * model, and this is the model: a marker, a label, a description, tags, a
+ * figure, and a trailing action cluster that is only there when you are looking
+ * at the row. Composing them yourself — rather than passing a `columns` array —
+ * is what keeps the primitive domain-neutral: a corpus of skills and a rig of
+ * fixtures need the same six slots and completely different columns.
+ *
+ * The slots are thin: each is a `<span>` with a `data-slot`, the type and
+ * truncation rule for its column, and nothing else. They may be used inside a
+ * `DataTree` row and inside a `Table.Cell` too — `Table.Row` carries the same
+ * `group/data-row` name, so `DataRow.Actions` reveals in the table idiom
+ * without a second implementation.
+ *
+ * @example
+ * <DataRow.Root interactive onActivate={() => open(skill)}>
+ *   <DataRow.Marker><StatusDot tone="ok" /></DataRow.Marker>
+ *   <DataRow.Label>{skill.name}</DataRow.Label>
+ *   <DataRow.Meta>{skill.installs}</DataRow.Meta>
+ * </DataRow.Root>
+ */
+declare const DataRow: {
+  Root: React.ForwardRefExoticComponent<DataRowRootProps & React.RefAttributes<HTMLDivElement>>;
+  Marker: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+  Label: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+  Description: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+  Tags: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+  Meta: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+  Actions: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { DataRow, DataRowDisclosure, DataRowRootProps, DataRowSlotProps };