@cueplusplus/ui 0.3.0 → 0.5.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";
@@ -63,6 +63,8 @@ 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";
@@ -118,4 +120,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, 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 };

package/dist/index.js

@@ -66,6 +66,7 @@ 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 { GroupBar } from "./instruments/group-bar.js";
@@ -107,4 +108,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, 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 };

package/dist/instruments/two-step-button.js

@@ -7,14 +7,33 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * The armed confirm button's fill.
 *
-* The ink is a literal rather than a token because there is no `--cue-warn-fg`
-* or `--cue-danger-fg` in the palette — the same pragmatism as `Button`'s
-* `danger` variant, which is also `text-white`. Every theme's `warn` is an
-* amber and every theme's `danger` is a red, so the two literals hold.
+* Both tones now take the ink their own theme authors against them —
+* `danger-fg` on the red, `warn-fg` on the amber — which is the same shape
+* `Button`'s `danger` variant and `RevertDock`'s confirm paint on the red, and
+* the only place in the package the amber's ink is spent.
+*
+* Both replaced literals, and both literals were wrong in the same way. The
+* red's `text-white` measured 2.99:1 on cue's dark block, which is the default
+* theme. The amber's `text-black` was the better guess of the two — an amber is
+* usually light — but "usually" is not a measurement: it fell to 3.58:1 on
+* requestport's light amber, 3.74:1 on dusk's and 4.22:1 on cue's own, because
+* a light theme darkens its amber to clear the paper and a darkened amber wants
+* paper back. Neither pairing could be fixed by choosing a better literal:
+* which ink a tone can carry is a property of that tone, so each theme derives
+* one. Both tokens clear 4.5:1 on all twenty shipped blocks, and
+* `test/destructive-ink.test.ts` measures this string rather than trusting it.
+*
+* Both tokens are spelled without their prefix on purpose. `tokensUsed` in the
+* package manifest is scanned out of the source text, *comments included*, so a
+* `--cue-…` written in prose is published as a token this component resolves
+* whether or not any class string resolves one. Spelling the amber's ink that
+* way while the palette still had none would have published a token that did
+* not exist; spelling it that way now would still put the claim in the wrong
+* place. The class strings below are where this component names its tokens.
 */
 const CONFIRM_TONES = {
-	danger: "border-transparent bg-danger text-white hover:opacity-90",
-	warn: "border-transparent bg-warn text-black hover:opacity-90"
+	danger: "border-transparent bg-danger text-danger-fg hover:opacity-90",
+	warn: "border-transparent bg-warn text-warn-fg hover:opacity-90"
 };
 /** The idle trigger: outline only, so a destructive action is never the loudest thing on screen. */
 const IDLE_TONES = {

package/dist/layout/sidebar.d.ts

@@ -5,7 +5,25 @@ interface SidebarContextValue {
   collapsed: boolean;
   toggle: () => void;
 }
-/** Read the collapse state of the nearest {@link SidebarRoot}. */
+/**
+ * Read the collapse state of the nearest {@link SidebarRoot}.
+ *
+ * Hands back `{ collapsed, toggle }`: whether the column is at its narrow
+ * width, and the same valve `Sidebar.Rail` pulls. It is for the part the kit
+ * does not ship — a footer that drops its labels when the column narrows, a
+ * keyboard shortcut, a collapse control somewhere other than the rail.
+ *
+ * Outside a `Sidebar.Root` it reports `collapsed: false` and a `toggle` that
+ * does nothing, rather than throwing. A row rendered on its own — in a test, on
+ * a docs page, in a menu that reuses the same markup — is a legitimate thing,
+ * and the honest answer for it is that nothing is collapsed.
+ *
+ * @example
+ * const { collapsed } = useSidebar();
+ * <Button variant="ghost" icon={Plus} aria-label="New scene">
+ *   {collapsed ? null : "New scene"}
+ * </Button>
+ */
 declare function useSidebar(): SidebarContextValue;
 /**
  * Which landmark a navigation column announces as.

package/dist/layout/sidebar.js

@@ -15,7 +15,25 @@ const SidebarContext = React.createContext({
 	collapsed: false,
 	toggle: () => {}
 });
-/** Read the collapse state of the nearest {@link SidebarRoot}. */
+/**
+* Read the collapse state of the nearest {@link SidebarRoot}.
+*
+* Hands back `{ collapsed, toggle }`: whether the column is at its narrow
+* width, and the same valve `Sidebar.Rail` pulls. It is for the part the kit
+* does not ship — a footer that drops its labels when the column narrows, a
+* keyboard shortcut, a collapse control somewhere other than the rail.
+*
+* Outside a `Sidebar.Root` it reports `collapsed: false` and a `toggle` that
+* does nothing, rather than throwing. A row rendered on its own — in a test, on
+* a docs page, in a menu that reuses the same markup — is a legitimate thing,
+* and the honest answer for it is that nothing is collapsed.
+*
+* @example
+* const { collapsed } = useSidebar();
+* <Button variant="ghost" icon={Plus} aria-label="New scene">
+*   {collapsed ? null : "New scene"}
+* </Button>
+*/
 function useSidebar() {
 	return React.useContext(SidebarContext);
 }

package/dist/primitives/button.js

@@ -26,6 +26,16 @@ const buttonChassis = "inline-flex select-none items-center justify-center gap-[
 * reads as white-on-black in `cue` and cyan-on-near-black in `terminal` with no
 * per-theme branching here.
 *
+* `danger` is one of the two tones this system fills a control with — the other
+* is the amber on `TwoStepButton`'s confirm — and they are the two the palette
+* gives an ink of their own. It used to be painted `text-white`, a
+* literal chosen when there was nothing else to choose: white measures 2.99:1
+* on cue's own red in dark mode — the default theme, under AA and under the 3:1
+* floor a non-text control gets — and under AA on eight of the ten dark blocks
+* this system ships. `--cue-danger-fg` is authored against each theme's red and
+* clears 4.5:1 on all twenty. `test/destructive-ink.test.ts` measures it here,
+* at the call site, rather than measuring the token pair on its own.
+*
 * @internal Not part of the public API; imported by `icon-button.tsx`.
 */
 const buttonTones = {
@@ -33,7 +43,7 @@ const buttonTones = {
 	secondary: "border border-border text-fg-muted hover:border-border-strong hover:text-fg bg-surface-2",
 	ghost: "text-fg-muted hover:text-fg hover:bg-surface-2 border border-transparent",
 	outline: "border border-border text-fg hover:border-accent hover:text-accent bg-transparent",
-	danger: "bg-danger text-white hover:opacity-90 border border-transparent",
+	danger: "bg-danger text-danger-fg hover:opacity-90 border border-transparent",
 	"danger-outline": "border text-danger bg-transparent hover:bg-danger/10 border-danger/40"
 };
 /**

package/dist/primitives/chip.d.ts

@@ -2,21 +2,36 @@ import { ClassProp, VariantProps } from "../lib/cva.js";
 import * as React from "react";
 //#region src/primitives/chip.d.ts
 /**
- * The tinted-chip recipe: `bg-<tone>/10 border-<tone>/35 text-<tone>`.
+ * The tinted-chip recipe: `bg-<tone>/10 border-<tone>/35 text-<tone>`, and the
+ * two quieter readings of it — `outline`, which drops the fill, and `tag`,
+ * which drops the fill and the voice with it.
  *
- * Tone and fill are split across `variants` and `compoundVariants` on purpose.
- * Emitting `bg-<tone>/10` from the tone map and then cancelling it with
- * `bg-transparent` for the outline variant would leave two competing background
- * utilities in the class string and lean on `tailwind-merge` to pick a winner —
- * which it cannot do reliably for token-named colours. Compound variants emit
- * exactly one fill, always.
+ * Every property that varies is emitted from exactly one place: one rim, one
+ * ink, one fill, one gutter, one type size, always. Emitting `bg-<tone>/10`
+ * from the tone map and then cancelling it with `bg-transparent` would leave
+ * two competing utilities in the class string, and `chipVariants` is exported —
+ * a caller who uses it without `cn` gets a raw string where the winner is
+ * decided by stylesheet order rather than by which utility was written last.
+ * `h-chip h-4` proves the point at the other end: `tailwind-merge` cannot even
+ * see that as a conflict, because `chip` is a token name and not a scale step.
+ * So nothing here cancels anything. What varies moves into `variants` or
+ * `compoundVariants` until only one of it is ever emitted.
+ *
+ * That is why `neutral` carries no rim of its own. The other six tones rim
+ * themselves at `/35` in all three variants, but the neutral line has two
+ * weights in this system: `--cue-border` is a box edge, and a chip is a box;
+ * `--cue-hair-strong` is the rule between things, and a tag is a mark on the
+ * page rather than a container. The rim is therefore a compound of tone and
+ * variant, exactly as the fill is.
  *
  * @example
  * <span className={chipVariants({ tone: "danger", variant: "outline" })}>fault</span>
+ * @example
+ * <span className={chipVariants({ variant: "tag" })}>mcp</span>
  */
 declare const chipVariants: (props?: ({
-  tone?: "info" | "warn" | "danger" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
-  variant?: "outline" | "tinted" | null | undefined;
+  tone?: "danger" | "info" | "warn" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
+  variant?: "outline" | "tinted" | "tag" | null | undefined;
   interactive?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;
 interface ChipProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof chipVariants> {
@@ -37,10 +52,21 @@ interface ChipProps extends React.HTMLAttributes<HTMLElement>, VariantProps<type
  * plus `neutral` and `accent`, so a chip, a `StatusDot` and a `Meter` always
  * agree on what "warn" looks like.
  *
+ * `variant` sets how loudly it says it. `tinted` is the chip proper — a tone
+ * tint behind tone ink. `outline` drops the fill and keeps the voice, for a
+ * chip on an already-busy ground. `tag` drops both: a hairline rim, micro type
+ * and closed tracking, for the facts that sit *beside* a row's name — a kind, a
+ * lifecycle, a scope — where a row full of tinted chips would read as a row of
+ * buttons. All three keep `h-chip`, so a mixed row still has one baseline.
+ *
  * @example
  * <Chip tone="ok">online</Chip>
  * @example
  * <Chip tone="accent" variant="outline" interactive onClick={toggle}>dimmer</Chip>
+ * @example
+ * <Chip variant="tag">mcp</Chip>
+ * @example
+ * <Chip tone="danger" variant="tag">needs auth</Chip>
  */
 declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLElement>>;
 //#endregion