@cueplusplus/ui 0.1.0

package/dist/forms/toggle-group.d.ts

@@ -0,0 +1,41 @@
+import { FormControlSize } from "./_chassis.js";
+import * as React from "react";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/forms/toggle-group.d.ts
+interface ToggleGroupProps extends Omit<ToggleGroup.Props, "className" | "value" | "defaultValue" | "onValueChange" | "children"> {
+  /** The pressed values when controlled. Pass with `onValueChange`. */
+  value?: readonly string[];
+  /** The initially pressed values when uncontrolled. */
+  defaultValue?: readonly string[];
+  /** Called with every pressed value, in the order the toggles are declared. */
+  onValueChange?: (value: string[]) => void;
+  /** Rung of the control ladder for every toggle inside. Defaults to `"md"`. */
+  size?: FormControlSize;
+  /** Extra classes for the group frame. */
+  className?: string;
+  /** The {@link Toggle}s, each carrying a `value`. */
+  children: React.ReactNode;
+}
+/**
+ * A cluster of {@link Toggle}s sharing one pressed state.
+ *
+ * The difference from {@link SegmentedControl} is not cosmetic: a toggle group
+ * can be **empty**. Pressing the pressed item unpresses it, so "no filter" is a
+ * reachable state — which is what a filter bar needs and what a view switcher
+ * must never offer. Reach for `SegmentedControl` when the answer is always one
+ * of N, and for this when the answer may be none, or several (`multiple`).
+ *
+ * Arrow-key roving focus and the pressed-state ARIA come from Base UI; this
+ * layer supplies the density rung (published to the children through context)
+ * and the flat frame-less layout — a group of toggles is a row of controls, not
+ * a boxed widget.
+ *
+ * @example
+ * <ToggleGroup aria-label="Layers" multiple value={layers} onValueChange={setLayers}>
+ *   <Toggle value="beams">Beams</Toggle>
+ *   <Toggle value="haze">Haze</Toggle>
+ * </ToggleGroup>
+ */
+declare const ToggleGroup$1: React.ForwardRefExoticComponent<Omit<ToggleGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ToggleGroup$1 as ToggleGroup, ToggleGroupProps };

package/dist/forms/toggle-group.js

@@ -0,0 +1,56 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/forms/toggle-group.tsx
+/**
+* The rung the group publishes to the {@link Toggle}s inside it, so a caller
+* sizes the cluster once instead of repeating `size` on every member.
+*
+* `null` outside a group — a lone toggle then falls back to its own default.
+*
+* @internal Not part of the public API; read by `toggle.tsx`.
+*/
+const ToggleGroupSizeContext = React.createContext(null);
+/**
+* A cluster of {@link Toggle}s sharing one pressed state.
+*
+* The difference from {@link SegmentedControl} is not cosmetic: a toggle group
+* can be **empty**. Pressing the pressed item unpresses it, so "no filter" is a
+* reachable state — which is what a filter bar needs and what a view switcher
+* must never offer. Reach for `SegmentedControl` when the answer is always one
+* of N, and for this when the answer may be none, or several (`multiple`).
+*
+* Arrow-key roving focus and the pressed-state ARIA come from Base UI; this
+* layer supplies the density rung (published to the children through context)
+* and the flat frame-less layout — a group of toggles is a row of controls, not
+* a boxed widget.
+*
+* @example
+* <ToggleGroup aria-label="Layers" multiple value={layers} onValueChange={setLayers}>
+*   <Toggle value="beams">Beams</Toggle>
+*   <Toggle value="haze">Haze</Toggle>
+* </ToggleGroup>
+*/
+const ToggleGroup$1 = React.forwardRef(function ToggleGroup$2({ value, defaultValue, onValueChange, size = "md", orientation, className, children, ...groupProps }, ref) {
+	const handleValueChange = React.useCallback((next) => {
+		onValueChange?.(next);
+	}, [onValueChange]);
+	return /* @__PURE__ */ jsx(ToggleGroup, {
+		ref,
+		"data-slot": "toggle-group",
+		value,
+		defaultValue,
+		onValueChange: onValueChange === void 0 ? void 0 : handleValueChange,
+		orientation,
+		className: cn("inline-flex items-center gap-(--cue-space-1)", orientation === "vertical" && "flex-col items-stretch", className),
+		...groupProps,
+		children: /* @__PURE__ */ jsx(ToggleGroupSizeContext.Provider, {
+			value: size,
+			children
+		})
+	});
+});
+//#endregion
+export { ToggleGroup$1 as ToggleGroup, ToggleGroupSizeContext };

package/dist/forms/toggle.d.ts

@@ -0,0 +1,41 @@
+import { FormControlSize } from "./_chassis.js";
+import * as React from "react";
+import { Toggle } from "@base-ui/react/toggle";
+//#region src/forms/toggle.d.ts
+interface ToggleProps extends Omit<Toggle.Props, "className"> {
+  /** Extra classes, merged over the recipe. */
+  className?: string;
+  /**
+   * Rung of the control ladder. Defaults to the enclosing {@link ToggleGroup}'s
+   * rung, or `"md"` outside one.
+   */
+  size?: FormControlSize;
+  /**
+   * Optional leading icon component (e.g. a lucide icon). Rendered `aria-hidden`
+   * and sized to the density icon token. With no `children` the toggle collapses
+   * to a square target instead of a wide pill.
+   */
+  icon?: React.ElementType;
+  /** The label. Leave it off for an icon-only toggle — and then pass `aria-label`. */
+  children?: React.ReactNode;
+}
+/**
+ * A two-state button: solo, mute, snap-to-grid, "show hidden".
+ *
+ * Distinct from {@link Switch}, which sets a *setting* and reads as a physical
+ * throw; a toggle is a **button that stays down**, so it belongs in a toolbar
+ * next to other buttons rather than in a settings list. `aria-pressed` — not
+ * `aria-checked` — is what says so to assistive technology, and Base UI wires
+ * that for us.
+ *
+ * Inside a {@link ToggleGroup} it inherits the group's density rung and joins
+ * its roving-focus ring; on its own it is a perfectly good standalone control.
+ *
+ * @example
+ * <Toggle aria-label="Solo" icon={Headphones} pressed={solo} onPressedChange={setSolo} />
+ * @example
+ * <Toggle defaultPressed>Snap</Toggle>
+ */
+declare const Toggle$1: React.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Toggle$1 as Toggle, ToggleProps };

package/dist/forms/toggle.js

@@ -0,0 +1,100 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "../lib/cva.js";
+import { ToggleGroupSizeContext } from "./toggle-group.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+//#region src/forms/toggle.tsx
+/**
+* A toggle is a *ghost* button until it is pressed, and then it is a **tint**,
+* never a solid fill — the same ruling that governs the segmented control and
+* the highlighted menu row. A solid accent block on a 22px control reads as a
+* second, louder button and drowns the labels beside it.
+*/
+const toggleVariants = cva("inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-[0.4em] whitespace-nowrap rounded-(--radius-control) border border-transparent bg-transparent font-mono font-medium text-fg-muted transition-colors duration-150 outline-none hover:bg-surface-2 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent data-[pressed]:bg-accent-soft data-[pressed]:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-40", {
+	variants: {
+		size: {
+			sm: "text-(length:--cue-text-label)",
+			md: "text-(length:--cue-text-ui)",
+			lg: "text-(length:--cue-text-body)"
+		},
+		/** Icon-only toggles are square; labelled ones get a height and padding. */
+		square: {
+			true: "",
+			false: ""
+		}
+	},
+	compoundVariants: [
+		{
+			size: "sm",
+			square: false,
+			class: "h-control-sm px-(--cue-space-3)"
+		},
+		{
+			size: "md",
+			square: false,
+			class: "h-control-md px-(--cue-space-4)"
+		},
+		{
+			size: "lg",
+			square: false,
+			class: "h-control-lg px-(--cue-space-5)"
+		},
+		{
+			size: "sm",
+			square: true,
+			class: "size-control-sm"
+		},
+		{
+			size: "md",
+			square: true,
+			class: "size-control-md"
+		},
+		{
+			size: "lg",
+			square: true,
+			class: "size-control-lg"
+		}
+	],
+	defaultVariants: {
+		size: "md",
+		square: false
+	}
+});
+/**
+* A two-state button: solo, mute, snap-to-grid, "show hidden".
+*
+* Distinct from {@link Switch}, which sets a *setting* and reads as a physical
+* throw; a toggle is a **button that stays down**, so it belongs in a toolbar
+* next to other buttons rather than in a settings list. `aria-pressed` — not
+* `aria-checked` — is what says so to assistive technology, and Base UI wires
+* that for us.
+*
+* Inside a {@link ToggleGroup} it inherits the group's density rung and joins
+* its roving-focus ring; on its own it is a perfectly good standalone control.
+*
+* @example
+* <Toggle aria-label="Solo" icon={Headphones} pressed={solo} onPressedChange={setSolo} />
+* @example
+* <Toggle defaultPressed>Snap</Toggle>
+*/
+const Toggle$1 = React.forwardRef(function Toggle$2({ className, size, icon: Icon, children, ...elementProps }, ref) {
+	const groupSize = React.useContext(ToggleGroupSizeContext);
+	const rung = size ?? groupSize ?? "md";
+	return /* @__PURE__ */ jsxs(Toggle, {
+		ref,
+		"data-slot": "toggle",
+		className: cn(toggleVariants({
+			size: rung,
+			square: children === void 0 || children === null || children === false
+		}), className),
+		...elementProps,
+		children: [Icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": "true",
+			className: cn("shrink-0", rung === "sm" ? "size-icon-sm" : "size-icon-md")
+		}), children]
+	});
+});
+//#endregion
+export { Toggle$1 as Toggle };

package/dist/index.d.ts

@@ -0,0 +1,112 @@
+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";
+import { TREE_GUIDE_GLYPHS, TreeGuide, TreeItem, TreeRow, flattenTree } from "./chrome/_tree.js";
+import { EmptyState, EmptyStateProps } from "./chrome/empty-state.js";
+import { Eyebrow, EyebrowProps } from "./chrome/eyebrow.js";
+import { NavigationMenu, NavigationMenuContentProps, NavigationMenuItemProps, NavigationMenuLinkProps, NavigationMenuListProps, NavigationMenuRootProps, NavigationMenuTriggerProps, NavigationMenuViewportProps } from "./chrome/navigation-menu.js";
+import { PageShell, PageShellProps, PageWidth } from "./chrome/page-shell.js";
+import { Panel, PanelHeader, PanelHeaderProps, PanelProps } from "./chrome/panel.js";
+import { Row, RowProps, SeamList, SeamListProps, rowVariants } from "./chrome/row.js";
+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 { 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";
+import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarRootProps, ToolbarSeparatorProps } from "./chrome/toolbar.js";
+import "./chrome/index.js";
+import { ControlVariantProps, FormControlSize, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants } from "./forms/_chassis.js";
+import { ResolvedMode, ThemeContextValue, ThemeProvider, ThemeProviderProps } from "./system/theme-provider.js";
+import { Autocomplete, AutocompleteProps } from "./forms/autocomplete.js";
+import { ButtonGroup, ButtonGroupOrientation, ButtonGroupProps } from "./forms/button-group.js";
+import { Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps } from "./forms/checkbox.js";
+import { Combobox, ComboboxOption, ComboboxProps } from "./forms/combobox.js";
+import { EnvVarInput, EnvVarInputProps, envReference, parseEnvReference } from "./forms/env-var-input.js";
+import { Field, FieldDescription, FieldDescriptionProps, FieldError, FieldErrorProps, FieldIssue, FieldLabel, FieldLabelProps, FieldProps } from "./forms/field.js";
+import { FilePartition, FilePartitionOptions, FileRejectReason, FileRejection, FileUpload, FileUploadProps, UploadFile, UploadStatus, partitionFiles } from "./forms/file-upload.js";
+import { Input, InputProps } from "./forms/input.js";
+import { InputGroup, InputGroupProps } from "./forms/input-group.js";
+import { MultiSelect, MultiSelectProps } from "./forms/multi-select.js";
+import { NumberField, NumberFieldProps } from "./forms/number-field.js";
+import { OTPField, OTPFieldProps } from "./forms/otp-field.js";
+import { PasswordInput, PasswordInputProps } from "./forms/password-input.js";
+import { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./forms/radio-group.js";
+import { Rating, RatingProps, RatingSize } from "./forms/rating.js";
+import { ScrubInput, ScrubInputProps } from "./forms/scrub-input.js";
+import { SearchInput, SearchInputProps } from "./forms/search-input.js";
+import { Select, SelectOption, SelectProps } from "./forms/select.js";
+import { Slider, SliderProps } from "./forms/slider.js";
+import { Switch, SwitchProps } from "./forms/switch.js";
+import { TagsInput, TagsInputProps } from "./forms/tags-input.js";
+import { Textarea, TextareaProps } from "./forms/textarea.js";
+import { Toggle, ToggleProps } from "./forms/toggle.js";
+import { ToggleGroup, ToggleGroupProps } from "./forms/toggle-group.js";
+import "./forms/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 { GroupBar, GroupBarItem, GroupBarProps, GroupBarTone } from "./instruments/group-bar.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, 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";
+import "./instruments/index.js";
+import { Accordion, AccordionHeaderProps, AccordionItemProps, AccordionPanelProps, AccordionRootProps, AccordionTriggerProps } from "./layout/accordion.js";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbProps } from "./layout/breadcrumb.js";
+import { Card, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardRootProps, CardTitleProps } from "./layout/card.js";
+import { Collapsible, CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps, Disclosure, DisclosureProps } from "./layout/collapsible.js";
+import { Container, ContainerProps, ContainerWidth } from "./layout/container.js";
+import { DescriptionList, DescriptionListDetailProps, DescriptionListLayout, DescriptionListRootProps, DescriptionListTermProps } from "./layout/description-list.js";
+import { SpaceStep, Stack, StackAlign, StackJustify, StackProps } from "./layout/stack.js";
+import { Grid, GridColumns, GridProps } from "./layout/grid.js";
+import { Item, ItemProps, itemVariants } from "./layout/item.js";
+import { Link, LinkProps, linkVariants } from "./layout/link.js";
+import { Pagination, PaginationEntry, PaginationProps, paginationRange } from "./layout/pagination.js";
+import { Sidebar, SidebarItemProps, SidebarRailProps, SidebarRootProps, SidebarSectionProps, useSidebar } from "./layout/sidebar.js";
+import { Stepper, StepperProps, StepperState, StepperStep } from "./layout/stepper.js";
+import { StatusDot, StatusDotProps, StatusTone } from "./primitives/status-dot.js";
+import { Timeline, TimelineContentProps, TimelineItemProps, TimelineMarkerProps, TimelineRootProps } from "./layout/timeline.js";
+import "./layout/index.js";
+import { OVERLAY_SIDE_OFFSET, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, scrimClasses } from "./overlays/_surface.js";
+import { AlertDialog, AlertDialogActionProps, AlertDialogCancelProps, AlertDialogContentProps, AlertDialogDescriptionProps, AlertDialogFooterProps, AlertDialogRootProps, AlertDialogTitleProps, AlertDialogTriggerProps } from "./overlays/alert-dialog.js";
+import { CommandPalette, CommandPaletteItem, CommandPaletteProps } from "./overlays/command-palette.js";
+import { DropdownMenu, DropdownMenuCheckboxItemProps, DropdownMenuContentProps, DropdownMenuGroupProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuRootProps, DropdownMenuSeparatorProps, DropdownMenuTriggerProps } from "./overlays/dropdown-menu.js";
+import { ContextMenu, ContextMenuContentProps, ContextMenuRootProps, ContextMenuTriggerProps } from "./overlays/context-menu.js";
+import { Dialog, DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogRootProps, DialogTitleProps, DialogTriggerProps } from "./overlays/dialog.js";
+import { Drawer, DrawerCloseProps, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerRootProps, DrawerSwipeDirection, DrawerTitleProps, DrawerTriggerProps } from "./overlays/drawer.js";
+import { HoverCard, HoverCardContentProps, HoverCardRootProps, HoverCardTriggerProps } from "./overlays/hover-card.js";
+import { Tooltip, TooltipContentProps, TooltipProviderProps, TooltipRootProps, TooltipTriggerProps } from "./overlays/tooltip.js";
+import { InfoTip, InfoTipProps } from "./overlays/info-tip.js";
+import { Menubar, MenubarContentProps, MenubarMenuProps, MenubarRootProps, MenubarTriggerProps } from "./overlays/menubar.js";
+import { Popover, PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverRootProps, PopoverTitleProps, PopoverTriggerProps } from "./overlays/popover.js";
+import { Sheet, SheetCloseProps, SheetContentProps, SheetDescriptionProps, SheetFooterProps, SheetRootProps, SheetTitleProps, SheetTriggerProps } from "./overlays/sheet.js";
+import { Toast, ToastManager, ToastOptions, ToastProviderProps, ToastTone, ToastViewportProps, useToast } from "./overlays/toast.js";
+import "./overlays/index.js";
+import { Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, AvatarSize } from "./primitives/avatar.js";
+import { Chip, ChipProps, chipVariants } from "./primitives/chip.js";
+import { IconButton, IconButtonProps } from "./primitives/icon-button.js";
+import { Kbd, KbdProps } from "./primitives/kbd.js";
+import { Separator, SeparatorProps } from "./primitives/separator.js";
+import { Skeleton, SkeletonProps } from "./primitives/skeleton.js";
+import { Spinner, SpinnerProps } from "./primitives/spinner.js";
+import "./primitives/index.js";
+import { Density, DensityProps } from "./system/density.js";
+import { CuePortalFrame, CuePortalFrameProps, useCuePortalProps } from "./system/portal.js";
+import { DEFAULT_STORAGE_KEY, PersistedPreferences, prepaintScript } from "./system/prepaint.js";
+import { ControlSize, useControlHeight, useDensity } from "./system/use-density.js";
+import { useTheme } from "./system/use-theme.js";
+import { DensityLevel, 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, 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, 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, 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 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, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, 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, 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

@@ -0,0 +1,104 @@
+import { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, agentColor, agentColorStyle } from "./chat/agent-color.js";
+import { AgentPile } from "./chat/agent-pile.js";
+import { Checkbox, CheckboxGroup } from "./forms/checkbox.js";
+import { bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants } from "./forms/_chassis.js";
+import { InputGroup } from "./forms/input-group.js";
+import { Input } from "./forms/input.js";
+import { NumberField } from "./forms/number-field.js";
+import { Radio, RadioGroup } from "./forms/radio-group.js";
+import { Button, buttonVariants } from "./primitives/button.js";
+import { Chip, chipVariants } from "./primitives/chip.js";
+import { AskBox } from "./chat/ask-box.js";
+import { Composer } from "./chat/composer.js";
+import { Spinner } from "./primitives/spinner.js";
+import { DelegationCard } from "./chat/delegation-card.js";
+import { Message } from "./chat/message.js";
+import { MessageList } from "./chat/message-list.js";
+import { TAB_FADE_PX, computeScrollEdges, edgeFadeMask } from "./chrome/_tabs-scroll.js";
+import { TREE_GUIDE_GLYPHS, flattenTree } from "./chrome/_tree.js";
+import { EmptyState } from "./chrome/empty-state.js";
+import { Eyebrow } from "./chrome/eyebrow.js";
+import { Density } from "./system/density.js";
+import { DEFAULT_STORAGE_KEY, prepaintScript } from "./system/prepaint.js";
+import { ThemeProvider } from "./system/theme-provider.js";
+import { CuePortalFrame, useCuePortalProps } from "./system/portal.js";
+import { OVERLAY_SIDE_OFFSET, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, scrimClasses } from "./overlays/_surface.js";
+import { NavigationMenu } from "./chrome/navigation-menu.js";
+import { PageShell } from "./chrome/page-shell.js";
+import { Panel, PanelHeader } from "./chrome/panel.js";
+import { Row, SeamList, rowVariants } from "./chrome/row.js";
+import { ScrollArea } from "./chrome/scroll-area.js";
+import { SectionHeader } from "./chrome/section-header.js";
+import { SegmentedControl } from "./chrome/segmented-control.js";
+import { StatusBar } from "./chrome/status-bar.js";
+import { ScrollableTabsList, Tabs } from "./chrome/tabs.js";
+import { TitleBar } from "./chrome/title-bar.js";
+import { Tree, TreeVisibilityToggle } from "./chrome/tree.js";
+import { Toolbar } from "./chrome/toolbar.js";
+import { Autocomplete } from "./forms/autocomplete.js";
+import { ButtonGroup } from "./forms/button-group.js";
+import { Combobox } from "./forms/combobox.js";
+import { PasswordInput } from "./forms/password-input.js";
+import { EnvVarInput, envReference, parseEnvReference } from "./forms/env-var-input.js";
+import { Field, FieldDescription, FieldError, FieldLabel } from "./forms/field.js";
+import { FileUpload, partitionFiles } from "./forms/file-upload.js";
+import { MultiSelect } from "./forms/multi-select.js";
+import { OTPField } from "./forms/otp-field.js";
+import { Rating } from "./forms/rating.js";
+import { ScrubInput } from "./forms/scrub-input.js";
+import { SearchInput } from "./forms/search-input.js";
+import { Select } from "./forms/select.js";
+import { Slider } from "./forms/slider.js";
+import { Switch } from "./forms/switch.js";
+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 { AppWindowFrame } from "./instruments/app-window-frame.js";
+import { CopyButton } from "./instruments/copy-button.js";
+import { GroupBar } from "./instruments/group-bar.js";
+import { Meter } from "./instruments/meter.js";
+import { Progress } from "./instruments/progress.js";
+import { SeamCell, SeamGrid } from "./instruments/seam-grid.js";
+import { Sparkline } from "./instruments/sparkline.js";
+import { Stat } from "./instruments/stat.js";
+import { Table } from "./instruments/table.js";
+import { TerminalFrame } from "./instruments/terminal-frame.js";
+import { TwoStepButton } from "./instruments/two-step-button.js";
+import { UsageChart } from "./instruments/usage-chart.js";
+import { Accordion } from "./layout/accordion.js";
+import { Breadcrumb } from "./layout/breadcrumb.js";
+import { Card } from "./layout/card.js";
+import { Collapsible, Disclosure } from "./layout/collapsible.js";
+import { Container } from "./layout/container.js";
+import { DescriptionList } from "./layout/description-list.js";
+import { Stack } from "./layout/stack.js";
+import { Grid } from "./layout/grid.js";
+import { Item, itemVariants } from "./layout/item.js";
+import { Link, linkVariants } from "./layout/link.js";
+import { IconButton } from "./primitives/icon-button.js";
+import { Pagination, paginationRange } from "./layout/pagination.js";
+import { Sidebar, useSidebar } from "./layout/sidebar.js";
+import { Stepper } from "./layout/stepper.js";
+import { StatusDot } from "./primitives/status-dot.js";
+import { Timeline } from "./layout/timeline.js";
+import { AlertDialog } from "./overlays/alert-dialog.js";
+import { CommandPalette } from "./overlays/command-palette.js";
+import { DropdownMenu } from "./overlays/dropdown-menu.js";
+import { ContextMenu } from "./overlays/context-menu.js";
+import { Dialog } from "./overlays/dialog.js";
+import { Drawer } from "./overlays/drawer.js";
+import { HoverCard } from "./overlays/hover-card.js";
+import { Tooltip } from "./overlays/tooltip.js";
+import { InfoTip } from "./overlays/info-tip.js";
+import { Menubar } from "./overlays/menubar.js";
+import { Popover } from "./overlays/popover.js";
+import { Sheet } from "./overlays/sheet.js";
+import { Toast, useToast } from "./overlays/toast.js";
+import { Avatar, AvatarGroup } from "./primitives/avatar.js";
+import { Kbd } from "./primitives/kbd.js";
+import { Separator } from "./primitives/separator.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, AppWindowFrame, AskBox, Autocomplete, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, Checkbox, CheckboxGroup, Chip, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CuePortalFrame, DEFAULT_STORAGE_KEY, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, 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, 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, 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/_ansi.js

@@ -0,0 +1,116 @@
+import Anser from "anser";
+//#region src/instruments/_ansi.ts
+/**
+* The eight ANSI hues on the system's tokens.
+*
+* `blue` and `cyan` share `info`, and `magenta` borrows `accent`: the palette
+* has one cool status colour and no sixth hue, and inventing two more would put
+* colours on screen that no theme controls. Bright variants resolve to the same
+* token — brightness in a terminal is an intensity, and intensity here is the
+* `bold` flag.
+*/
+const NAMED_COLORS = {
+	black: "var(--cue-fg-subtle)",
+	red: "var(--cue-danger)",
+	green: "var(--cue-ok)",
+	yellow: "var(--cue-warn)",
+	blue: "var(--cue-info)",
+	magenta: "var(--cue-accent)",
+	cyan: "var(--cue-info)",
+	white: "var(--cue-fg)",
+	"bright-black": "var(--cue-fg-muted)",
+	"bright-red": "var(--cue-danger)",
+	"bright-green": "var(--cue-ok)",
+	"bright-yellow": "var(--cue-warn)",
+	"bright-blue": "var(--cue-info)",
+	"bright-magenta": "var(--cue-accent)",
+	"bright-cyan": "var(--cue-info)",
+	"bright-white": "var(--cue-fg)"
+};
+/** The 256-colour palette's first sixteen slots, in index order. */
+const PALETTE_NAMES = [
+	"black",
+	"red",
+	"green",
+	"yellow",
+	"blue",
+	"magenta",
+	"cyan",
+	"white",
+	"bright-black",
+	"bright-red",
+	"bright-green",
+	"bright-yellow",
+	"bright-blue",
+	"bright-magenta",
+	"bright-cyan",
+	"bright-white"
+];
+/** The six levels each channel of the 6×6×6 cube can take. */
+const CUBE_LEVELS = [
+	0,
+	95,
+	135,
+	175,
+	215,
+	255
+];
+/** Resolve one of anser's class names into a CSS colour. */
+function resolveColor(name, truecolor) {
+	if (name === null) return void 0;
+	if (name === "ansi-truecolor") return truecolor === null ? void 0 : `rgb(${truecolor})`;
+	const palette = /^ansi-palette-(\d+)$/.exec(name);
+	if (palette !== null) {
+		const index = Number(palette[1]);
+		if (index < 16) return NAMED_COLORS[PALETTE_NAMES[index]];
+		if (index > 255) return void 0;
+		if (index >= 232) {
+			const level = 8 + (index - 232) * 10;
+			return `rgb(${level}, ${level}, ${level})`;
+		}
+		const offset = index - 16;
+		return `rgb(${CUBE_LEVELS[Math.floor(offset / 36)]}, ${CUBE_LEVELS[Math.floor(offset / 6) % 6]}, ${CUBE_LEVELS[offset % 6]})`;
+	}
+	return NAMED_COLORS[name.replace(/^ansi-/, "")];
+}
+/**
+* Parse one line of terminal output into styled spans.
+*
+* Always returns at least one span — an empty line still needs a row of the
+* right height — and never returns markup.
+*
+* @param text - One line, escape sequences and all.
+* @returns The runs, in order.
+* @example
+* ansiSpans("failed").map((span) => span.color); // ["var(--cue-danger)"]
+*/
+function ansiSpans(text) {
+	const spans = Anser.ansiToJson(text, {
+		use_classes: true,
+		remove_empty: true
+	}).map((entry) => {
+		const decorations = new Set(entry.decorations);
+		return {
+			text: entry.content,
+			color: resolveColor(entry.fg, entry.fg_truecolor),
+			background: resolveColor(entry.bg, entry.bg_truecolor),
+			bold: decorations.has("bold"),
+			dim: decorations.has("dim"),
+			italic: decorations.has("italic"),
+			underline: decorations.has("underline"),
+			strikethrough: decorations.has("strikethrough")
+		};
+	});
+	return spans.length > 0 ? spans : [{
+		text: "",
+		color: void 0,
+		background: void 0,
+		bold: false,
+		dim: false,
+		italic: false,
+		underline: false,
+		strikethrough: false
+	}];
+}
+//#endregion
+export { ansiSpans };