@lessly/ui 0.27.0 → 1.0.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { ClassValue } from 'clsx';
-import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React$1 from 'react';
 import { ComponentProps } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as class_variance_authority from 'class-variance-authority';
 import { VariantProps } from 'class-variance-authority';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -31,6 +31,7 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { Command as Command$1 } from 'cmdk';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import { Toaster as Toaster$1 } from 'sonner';
 export { toast } from 'sonner';
@@ -41,18 +42,110 @@ import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
 
 declare function cn(...inputs: ClassValue[]): string;
 
+type AutoHeightProps = React$1.HTMLAttributes<HTMLDivElement>;
+/**
+ * Eases its own height as the content inside it changes size — a dialog body that swaps between two
+ * layouts, a panel that reveals a section — so the container grows or shrinks smoothly instead of
+ * jumping. The content's height is measured with a ResizeObserver and written straight onto the
+ * wrapper; routing it through React state instead lands a re-render between the measure and the
+ * paint, which swallows the transition. The transition itself is the `.motion-auto-height` class
+ * (shipped in styles.css): it is motion-token driven, so it inherits the viewer's reduce-motion
+ * preference (the duration resolves to 0ms then).
+ *
+ * Wrap the changing content directly; anything that resizes it — a conditional branch, added rows,
+ * a data update — animates. Extra props and `className` land on the outer element.
+ *
+ * This is for size changes of content that stays mounted (a dialog body swapping layouts). For a
+ * show/hide reveal where the content mounts/unmounts (`{open ? <block/> : null}`), use `Collapsible`
+ * instead: AutoHeight flashes the block for a frame on show and can't animate the unmount on hide.
+ *
+ * Three things to know as a consumer: it owns `height` imperatively, so a `style={{ height }}` or
+ * `maxHeight` you pass is overwritten; it clips overflow *while animating* and gives your own
+ * `overflow` back at rest, so anything inside that must escape the box mid-ease — a tooltip, a
+ * non-portaled dropdown — should portal to the body; and the content sits in a block formatting
+ * context, so a vertical margin on a direct child is measured inside the box instead of collapsing
+ * out of it.
+ */
+declare const AutoHeight: React$1.ForwardRefExoticComponent<AutoHeightProps & React$1.RefAttributes<HTMLDivElement>>;
+
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "destructive-ghost" | "destructive-solid" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "xs" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+type ButtonBase = Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & VariantProps<typeof buttonVariants>;
+/**
+ * The labelled form. With the `icon` prop the component renders and sizes the glyph and marks it
+ * `aria-hidden`, because the label beside it already carries the meaning.
+ *
+ * `asChild` hands the element to the consumer, which leaves nowhere to put an `icon` — passing both
+ * warns in dev and renders the child untouched.
+ */
+type ButtonLabelledProps = ButtonBase & {
+    children: React$1.ReactNode;
+    icon?: React$1.ReactNode;
+    iconPosition?: 'leading' | 'trailing';
     asChild?: boolean;
-}
+};
+/**
+ * Icon-only: an icon and no children, and the type is what enforces the accessible name.
+ *
+ * It owes a **tooltip** as well, and that half is not enforced here on purpose: `Tooltip.Root`
+ * throws without a `TooltipProvider` above it, and one provider is mounted per canvas — never one
+ * per icon — so a Button that mounted its own would crash any consumer rendering outside an
+ * `AppShell`. Wrap the call site instead.
+ *
+ * Known consequence: the base class sets `disabled:pointer-events-none`, so a **disabled** icon-only
+ * button fires no hover and its tooltip never opens — on exactly the button whose disabled reason
+ * most needs explaining. Put the trigger on a wrapping element when the hint has to survive the
+ * disabled state (`Button --disabled-with-tooltip` shows both).
+ */
+type ButtonIconOnlyProps = ButtonBase & {
+    children?: never;
+    icon: React$1.ReactNode;
+    iconPosition?: never;
+    asChild?: never;
+} & ({
+    'aria-label': string;
+} | {
+    'aria-labelledby': string;
+});
+/**
+ * No label and no icon. Nonsense to render, but it is what `<Button />` typed as before the union
+ * landed, and this arm is what keeps that true.
+ */
+type ButtonEmptyProps = ButtonBase & {
+    children?: never;
+    icon?: never;
+    iconPosition?: never;
+    asChild?: boolean;
+};
+type ButtonProps = ButtonLabelledProps | ButtonIconOnlyProps | ButtonEmptyProps;
 declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
-declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+interface CardProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /**
+     * A title bar: a heading left, one action right, over a hairline. With neither a title nor an
+     * action no bar is drawn at all, so a list starts at the top of the card.
+     */
+    title?: React$1.ReactNode;
+    action?: React$1.ReactNode;
+    /**
+     * `list` clips to the card's radius and hairlines between children.
+     * `nested` is the quiet inner box: a smaller radius, sunk a step, no shadow.
+     */
+    variant?: 'default' | 'list' | 'nested';
+}
+declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
-declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+interface CardTitleProps extends React$1.HTMLAttributes<HTMLElement> {
+    /**
+     * The tag the title emits, so the card can take the outline level the page around it leaves
+     * free. A title that isn't a section heading — inside a dialog, or a card whose heading is
+     * already stated — takes `p`, `div` or `span` instead of a level nobody wanted.
+     */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
+}
+declare const CardTitle: React$1.ForwardRefExoticComponent<CardTitleProps & React$1.RefAttributes<HTMLElement>>;
 declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
@@ -62,7 +155,20 @@ declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.D
 declare const DialogPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
 declare const DialogClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface DialogContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /**
+     * Whether the corner ✕ is drawn. On by default — a dialog someone opened is one they can shut,
+     * and the mark is where every dialog in the console keeps it.
+     *
+     * Turn it off for a surface that is not the console's to close: a step mocking an OS sheet, whose
+     * real counterpart has no web close affordance. **Escape and the overlay still dismiss the
+     * dialog** — Radix owns both and neither is touched here — so this removes an affordance, never
+     * the only way out. A step whose only exit should be its own footer is a different thing again,
+     * and it is built by holding `open` yourself, not by hiding this.
+     */
+    showClose?: boolean;
+}
+declare const DialogContent: React$1.ForwardRefExoticComponent<DialogContentProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: {
     ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
     displayName: string;
@@ -75,11 +181,51 @@ declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitiv
 declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
 
 declare const DropdownMenu: React$1.FC<DropdownMenuPrimitive.DropdownMenuProps>;
-declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const DropdownMenuGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuPortal: React$1.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
 declare const DropdownMenuSub: React$1.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
 declare const DropdownMenuRadioGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+type DropdownMenuTriggerBaseProps = React$1.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>;
+/**
+ * `quiet` appends the chevron as a second child, so it cannot be combined with `asChild`: a Radix
+ * `Slot` takes exactly one and throws on two. `asChild?: never` is what makes that a compile error
+ * rather than a runtime one. `bare` hands `children` straight through untouched, so a `false` from
+ * the unrendered chevron never reaches `Slot` and counts as that second child.
+ */
+type DropdownMenuTriggerProps = (DropdownMenuTriggerBaseProps & {
+    variant?: 'bare';
+    chevron?: never;
+}) | (Omit<DropdownMenuTriggerBaseProps, 'asChild'> & {
+    variant: 'quiet';
+    asChild?: never;
+    /**
+     * Whether the trigger wears its chevron. That mark means "there is something to pick here"
+     * (Guidelines/Controls/Stated, not picked), so a menu that only explains — a role a group
+     * carries, a reader who may not act — sets it `false` and stays pressable without promising a
+     * choice. Defaults to `true`.
+     */
+    chevron?: boolean;
+});
+/**
+ * `bare` is the Radix trigger with nothing added — whatever it wraps is the whole control, which is
+ * what `asChild` around a `Button` wants and what every trigger shipped before this prop existed
+ * got. It stays the default, and it stays byte-identical: `className` is left inside the spread
+ * rather than destructured and re-passed, so a trigger given none renders with no `class` attribute
+ * at all. Handing Radix an explicit `className={undefined}` is not the same thing — its `Slot`
+ * copies the key because the key is present, and writes `class=""`.
+ *
+ * `quiet` is the trigger that answers a row rather than a form: no border, sized to the words it
+ * happens to be showing, with the hover fill saying it can be pressed and the chevron saying a menu
+ * is behind it. A row's answer is already labelled by the row, so a bordered box beside it marks
+ * nothing, and a column of them down a list reads as a form put inside a list.
+ *
+ * **One `quiet`, one box.** It is spelled to match `Select variant="quiet"` step for step, because
+ * the two answer rows on the same screens and a word that meant three sizes was a word that meant
+ * nothing. The 36px floor is not decoration: a 20px control fails WCAG 2.5.8's 24px target size.
+ * A caption-scale handle inside a sub-line takes `min-h-6 text-xs` on top — smaller type in a
+ * smaller row, still on the floor.
+ */
+declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>>;
@@ -100,7 +246,14 @@ declare const DropdownMenuShortcut: {
     displayName: string;
 };
 
-type InputProps = React$1.InputHTMLAttributes<HTMLInputElement>;
+interface InputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * The unit the value is in — a currency, a period, a rate. It sits inside the field's border, on
+     * the side the number ends, because a unit set outside the box reads as the next word of the row
+     * rather than as part of the answer. It is text, never a control: nothing here is pressable.
+     */
+    suffix?: React$1.ReactNode;
+}
 declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
 
 type InputGroupProps = React$1.HTMLAttributes<HTMLDivElement>;
@@ -141,9 +294,13 @@ interface PageHeaderProps {
 }
 /**
  * The standard page header for Organization and Product screens. Encodes the medallion↔subtitle
- * pair rule (Guidelines/Page headers): a decorative section medallion earns its place only beside a
- * subtitle, so keep both or drop both — you cannot render a lone medallion. An entity glyph (`media`)
- * is identity and always stays.
+ * pair rule (Guidelines/Page headers): a section medallion earns its place only beside a subtitle,
+ * so keep both or drop both — you cannot render a lone medallion. Cut a filler subtitle and the
+ * medallion goes with it, leaving a bare `<h2>`. An entity glyph (`media`) is identity, not
+ * decoration, and always stays.
+ *
+ * A header carrying a leading glyph indents its title past the content edge; a bare title sits on
+ * it. That difference is deliberate — it is what tells you a page has a mark.
  */
 declare function PageHeader({ title, subtitle, icon: Icon, media, badge, actions, id }: PageHeaderProps): React$1.JSX.Element;
 
@@ -156,6 +313,9 @@ declare function SectionIntro({ what, when }: SectionIntroProps): React$1.JSX.El
 interface SelectOption {
     value: string;
     label: string;
+    /** The line under the label, saying what choosing it does. Off the trigger — it belongs to the
+     *  choice, not to the answer. */
+    description?: string;
 }
 interface SelectProps {
     value?: string;
@@ -169,8 +329,51 @@ interface SelectProps {
     'aria-label'?: string;
     'aria-labelledby'?: string;
     optionTestId?: (value: string) => string;
+    /**
+     * `quiet` is the select that answers a row rather than a form: no field border, no fixed height,
+     * sized to the word it is showing. A row's answer is already labelled by the row, so the box a
+     * field draws to say "type here" marks nothing — and a column of them down a list reads as a form
+     * put inside a list. Use it inside a row or a line of prose; keep `field` anywhere a label sits
+     * above the control.
+     */
+    variant?: 'field' | 'quiet';
+}
+declare function Select({ value, onValueChange, options, placeholder, disabled, className, 'data-testid': testId, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, optionTestId, variant, }: SelectProps): React$1.JSX.Element;
+
+interface SettingRowProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Leading glyph. Absent, the label starts at the row's left edge. */
+    icon?: LucideIcon;
+    label: React$1.ReactNode;
+    /** The second line under the label. */
+    description?: React$1.ReactNode;
+    /**
+     * Which side of the row carries the answer. `primary` is the settings row — the label names the
+     * thing and the control is whatever you set it to. `secondary` is the row that states a fact — a
+     * plan, a spend cap — where the value is what you came to read and the label only says what it is.
+     * Secondary also holds the label at the body weight under a description, because a quiet label
+     * does not become a heading by growing a second line, and it tops the value against that label
+     * rather than centring it: the right side is a string the reader baselines against the left, not
+     * an object beside a block.
+     */
+    labelTone?: 'primary' | 'secondary';
+    /** Names the control this row carries; renders <label>, otherwise <span>. */
+    htmlFor?: string;
+    /** The right-hand side — a Switch, a Select, a Button, or the value the row states. */
+    children: React$1.ReactNode;
 }
-declare function Select({ value, onValueChange, options, placeholder, disabled, className, 'data-testid': testId, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, optionTestId, }: SelectProps): React$1.JSX.Element;
+/**
+ * One `label … value` line inside a card — where the value is a control you set, or a fact you read.
+ *
+ * `description` decides the row's shape, and that is a rule rather than an accident: a bare
+ * `label … control` line is a field caption, so it takes the body weight and centres on its
+ * control, while a label carrying a second line is the heading of a small block, so the two lines
+ * align to the top of the glyph beside them.
+ *
+ * `labelTone` decides which side the reader's eye lands on, and it is the one thing `description`
+ * does not settle: a row stating a plan or a spend cap wants a quiet label whether or not a second
+ * line explains who may change it.
+ */
+declare const SettingRow: React$1.ForwardRefExoticComponent<SettingRowProps & React$1.RefAttributes<HTMLDivElement>>;
 
 interface SwitchProps {
     checked: boolean;
@@ -189,29 +392,95 @@ declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimi
 declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 type TextareaProps = React$1.TextareaHTMLAttributes<HTMLTextAreaElement>;
+/** The same field edge an `Input` takes, for the same reason (`Guidelines/Look/Borders`, #417). */
 declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
 
 declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 
+/**
+ * Two signals on two channels that never touch (#446), and two treatments for two shapes.
+ *
+ * **Fill means the pointer is here.** Selection reads as an edge, and `ToggleGroup` picks which
+ * edge from its `type` — the question being "can nothing be selected?".
+ *
+ * - `frame` (a standalone `Toggle`, and every `type="multiple"` group): each item carries its own
+ *   1px hairline and selection steps it up to `border-strong` — 5.17:1 against the page in light and
+ *   5.47:1 in dark, and 3.63:1 / 4.31:1 above the resting hairline it replaces. Fill used to say both
+ *   things at 1.07:1, which is why a filter row could not say which of its filters were applied.
+ * - `track` (every `type="single"` group): the group draws the track and the selected slot takes the
+ *   selection pair (#452) — `bg-bg-selected` filled inside a `ring-border-selected` edge. The fill is
+ *   1.08:1 against the page in dark and 1.04:1 in light, so it is the **edge** that carries the
+ *   reading: 3.81:1 above the slot's own fill in dark and 3.75:1 in light, against 1.07:1 / 1.53:1
+ *   for the `border-subtle` ring over `bg-bg-overlay` it replaces. A fill that faint is only placed
+ *   at all against the track's own frame, which is why the track belongs to the component and not to
+ *   the call site.
+ *
+ * The mark is a **ring**, not a border: a ring is a box-shadow, so it costs no layout and an
+ * icon-only toggle stays square at the height its `size` declares. It is also the whole mark —
+ * `track` carries no `shadow-sm`. The shadow was the raised reading a 1.18:1 fill could not give
+ * alone; under a 3.81:1 edge it is a second, weaker statement of one state, its blur compositing to
+ * 1.11:1 against the page in dark and 1.14:1 in light, and `shadow-sm` is the one dark step
+ * `@lessly/tokens@0.7.0` leaves without a rim, so in dark it can only darken.
+ *
+ * Focus is an **outline held 2px off the box** — a flush ring painted over the selection mark, and
+ * focused-selected and focused-unselected measured 1.55:1 apart, which is #446 on the keyboard.
+ *
+ * **An icon-only box drops its horizontal padding** (`ICON_ONLY_BOX` below), the same trade
+ * `Button`'s icon-only box makes with `p-0`. Padding is the whole of the intrinsic width when the
+ * only content is a 16px glyph, so `min-w-*` binds only while it stays under it: `sm` and `default`
+ * cleared that by coincidence (10+16+10 = 36, 12+16+12 = 40) and `lg` did not — `px-5` around a
+ * glyph is 56 against `h-12`, and an icon-only `lg` shipped 56&times;48. A **text** toggle is
+ * untouched at every size.
+ */
 declare const toggleVariants: (props?: ({
+    treatment?: "track" | "frame" | null | undefined;
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Toggle: React$1.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    treatment?: "track" | "frame" | null | undefined;
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * `type` answers "can nothing be selected?", and that is what decides how selection reads (#446).
+ *
+ * `multiple` is a set of independent chips — a filter row, where nothing need be on — so each chip
+ * carries its own edge and selection steps that edge up. `single` is one object with a moving part,
+ * so it takes the segmented-control treatment (#346): the group draws the **track** — a hairline
+ * frame with no fill — and the selected slot is the only filled thing in the row.
+ *
+ * The track is the component's, not the call site's: the slot fill measures 1.04:1 against the page
+ * in light and 1.08:1 in dark, so without the track's edge a selected slot reads as nothing at all —
+ * the defect #446 reports. A component cannot own half of a two-part signal.
+ */
 declare const ToggleGroup: React$1.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React$1.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React$1.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
+    treatment?: "track" | "frame" | null | undefined;
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string>) & React$1.RefAttributes<HTMLDivElement>>;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    /**
+     * The selection mark is one element that slides between slots on the motion tokens, rather
+     * than appearing on each. The group makes its slots equal-width to carry it; the width of the
+     * **track** is still the caller's, and defaults to the width of whatever holds it.
+     */
+    sliding?: boolean;
+}) & React$1.RefAttributes<HTMLDivElement>>;
 declare const ToggleGroupItem: React$1.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    treatment?: "track" | "frame" | null | undefined;
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLButtonElement>>;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    /**
+     * Holds its column without being selectable — a rung that does not apply to this row, so a
+     * ladder of levels still lines up down a long list. Renders non-focusable and aria-hidden at
+     * the same width, with its label kept for the width and hidden from view.
+     */
+    inert?: boolean;
+} & React$1.RefAttributes<HTMLButtonElement>>;
 
-declare const InputOTP: React$1.ForwardRefExoticComponent<(Omit<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
+declare const InputOTP: React$1.ForwardRefExoticComponent<(Omit<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
     value?: string;
     onChange?: (newValue: string) => unknown;
     maxLength: number;
@@ -224,7 +493,7 @@ declare const InputOTP: React$1.ForwardRefExoticComponent<(Omit<Omit<React$1.Inp
 } & {
     render: (props: input_otp.RenderProps) => React$1.ReactNode;
     children?: never;
-} & React$1.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
+} & React$1.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
     value?: string;
     onChange?: (newValue: string) => unknown;
     maxLength: number;
@@ -250,9 +519,26 @@ declare const PopoverAnchor: React$1.ForwardRefExoticComponent<PopoverPrimitive.
 declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
-declare const Tooltip: React$1.FC<TooltipPrimitive.TooltipProps>;
-declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const Tooltip: {
+    ({ children, ...props }: React$1.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>): React$1.JSX.Element;
+    displayName: string;
+};
+declare const TooltipTrigger: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+type TooltipPrimitiveContentProps = React$1.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>;
+interface TooltipContentProps extends TooltipPrimitiveContentProps {
+    /**
+     * Which side of the trigger the tooltip sits on. Physical: `left` and `right`
+     * are screen edges and stay where they are in a right-to-left layout.
+     */
+    side?: TooltipPrimitiveContentProps['side'];
+    /**
+     * Which end of the trigger the tooltip lines up with. Logical: `start` is the
+     * end the text starts at — the left in a left-to-right layout, the right in a
+     * right-to-left one.
+     */
+    align?: TooltipPrimitiveContentProps['align'];
+}
+declare const TooltipContent: React$1.ForwardRefExoticComponent<TooltipContentProps & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const HoverCard: React$1.FC<HoverCardPrimitive.HoverCardProps>;
 declare const HoverCardTrigger: React$1.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React$1.RefAttributes<HTMLAnchorElement>>;
@@ -264,7 +550,7 @@ declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.Dial
 declare const SheetPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const SheetContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
-    side?: "top" | "right" | "bottom" | "left" | null | undefined;
+    side?: "bottom" | "left" | "right" | "top" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const SheetHeader: {
     ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
@@ -369,28 +655,129 @@ declare const MenubarShortcut: {
     displayName: string;
 };
 
+/**
+ * `status` (#359) is the console's state pill: borderless, filled with `bg-bg-sunken`.
+ * `outline` gives a status the same hairline frame a button has — and since a ghost button carries
+ * no border at rest, the status pill ended up the most button-shaped object in a row. A fill with no
+ * frame reads as a label rather than a control. It is deliberately *not* `secondary`: that's the
+ * attribute chip (scope, auth method), so a status painted with it reads as an attribute. Under the
+ * cursor no neutral fill carries the pill's shape at all: `EntityRow` washes to `bg-bg-elevated`,
+ * and `bg-bg-sunken` measures 1.12:1 against it in light, `bg-bg-secondary` 1.01:1, where a non-text
+ * mark needs 3:1. `bg-bg-sunken` is the convention, not the measurement — there is no better fill in
+ * the ramp to go looking for.
+ *
+ * `danger-subtle`, `warning-subtle` and `neutral-subtle` are the three rungs of a severity ladder —
+ * critical, important, and the rung that is only worth knowing. They are the one place colour marks
+ * a state rather than an action, and *subtle* is the whole permission: the solid `destructive` and
+ * `warning` fills belong to a thing you must act on, and three of those read as three shouting
+ * pills. See Guidelines/Colour marks actions.
+ *
+ * The bottom rung is its own variant rather than the `status` pill because the three have to be read
+ * as one ladder: `bg-bg-sunken` is the strongest plate of the three in light, so a ladder resting on
+ * it puts its heaviest mark under its two lightest and reads upside down.
+ */
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "success" | "warning" | null | undefined;
+    variant?: "status" | "default" | "destructive" | "outline" | "secondary" | "danger-subtle" | "warning-subtle" | "neutral-subtle" | "success" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }
 declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLDivElement>>;
 
-declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & React$1.RefAttributes<HTMLTableElement>>;
+interface TableProps extends React$1.HTMLAttributes<HTMLTableElement> {
+    /**
+     * Name the table. Three tables on one page announce identically without a name,
+     * and a screen-reader user picking one out of the list has nothing to pick by.
+     * A `TableCaption` names it visibly and is the first choice; use this when the
+     * name is already on the page as a heading — then prefer `aria-labelledby`.
+     */
+    'aria-label'?: string;
+    /** Names the table from a heading already on the page. See `aria-label`. */
+    'aria-labelledby'?: string;
+}
+/**
+ * A data table. Give every one of them a name — a `TableCaption`, or
+ * `aria-label` / `aria-labelledby` when the name is already on the page.
+ */
+declare const Table: React$1.ForwardRefExoticComponent<TableProps & React$1.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
 declare const TableBody: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
 declare const TableFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
 declare const TableRow: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableRowElement> & React$1.RefAttributes<HTMLTableRowElement>>;
 declare const TableHead: React$1.ForwardRefExoticComponent<React$1.ThHTMLAttributes<HTMLTableCellElement> & React$1.RefAttributes<HTMLTableCellElement>>;
 declare const TableCell: React$1.ForwardRefExoticComponent<React$1.TdHTMLAttributes<HTMLTableCellElement> & React$1.RefAttributes<HTMLTableCellElement>>;
+/** The table's visible name. Ends up as the table's accessible name. */
 declare const TableCaption: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableCaptionElement> & React$1.RefAttributes<HTMLTableCaptionElement>>;
 
 declare const Skeleton: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 
+/**
+ * @deprecated Use `PersonAvatar` for a person, `GlyphAvatar` for an agent or a group, or
+ * `EntityTile` for an object. Those three share one size scale, a tint family that holds contrast in
+ * both themes, and a fallback that survives a 404. `Avatar` will be removed in 1.0.
+ */
 declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
 declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 
+/**
+ * The box every identity mark is drawn in. Internal on purpose: it is the only place that knows
+ * about `shape`, and keeping it unexported is what makes a round product unspellable. Import one of
+ * `PersonAvatar`, `GlyphAvatar` or `EntityTile` instead.
+ */
+type MarkSize = 'xs' | 'sm' | 'md' | 'lg';
+
+/**
+ * A person's mark: their photo, or their initials on a colour picked from their id so the same
+ * person is the same colour on every screen.
+ *
+ * Round, because a circle is a principal (`Guidelines/Avatars`). Pass `id` rather than relying on the
+ * name if the colour should survive a rename.
+ */
+interface PersonAvatarProps {
+    name: string;
+    /** Seeds the tint. Falls back to the name, which is stable until the person is renamed. */
+    id?: string;
+    src?: string;
+    size?: MarkSize;
+    /** Opt into the accessibility tree. Omit beside a row title that already names the person. */
+    label?: string;
+}
+declare function PersonAvatar({ name, id, src, size, label }: PersonAvatarProps): React$1.JSX.Element;
+
+/**
+ * The mark for a principal with no photo and no initials — an agent or a group.
+ *
+ * Round, like every principal. Never tinted: a tint follows a name, and `agent` is a kind rather than
+ * an identity, so colouring it would say nothing. Its job is to settle which glyph an agent gets, so
+ * two screens cannot pick different ones.
+ */
+interface GlyphAvatarProps {
+    kind: 'agent' | 'group';
+    size?: MarkSize;
+    label?: string;
+}
+declare function GlyphAvatar({ kind, size, label }: GlyphAvatarProps): React$1.JSX.Element;
+
+/**
+ * The mark for an object — a product, a connector, an API key, a device, a passkey.
+ *
+ * A rounded square, because a square is an object and a circle is a principal
+ * (`Guidelines/Avatars`). You can tell what a row is about before reading a word of it.
+ *
+ * **A tint follows a name, not a type.** A named thing you re-recognise across screens gets a colour;
+ * a thing identified only by what it is stays neutral. So a product tints and an API key does not.
+ */
+interface EntityTileProps {
+    /** The object's own name. Its presence is what earns a tint, and its first letter is the fallback. */
+    name?: string;
+    /** A type glyph. Wins over the initial, and never tints. */
+    glyph?: React$1.ReactNode;
+    src?: string;
+    size?: MarkSize;
+    label?: string;
+}
+declare function EntityTile({ name, glyph, src, size, label }: EntityTileProps): React$1.JSX.Element;
+
 declare const Separator: React$1.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const Progress: React$1.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -417,9 +804,16 @@ declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimit
 declare const alertVariants: (props?: ({
     variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const Alert: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
+interface AlertProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
+    /**
+     * The value the alert is about — a secret, an id, an endpoint. It gets its own line below the
+     * words, in monospace, and truncates instead of running off the edge of the card.
+     */
+    value?: React$1.ReactNode;
+    /** What to do with that value — copy it, dismiss it. Sits at the end of the value's line, at full width. */
+    action?: React$1.ReactNode;
+}
+declare const Alert: React$1.ForwardRefExoticComponent<AlertProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const AlertTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 
@@ -489,7 +883,7 @@ declare const CommandInput: React$1.ForwardRefExoticComponent<Omit<Omit<Pick<Pic
     ref?: React$1.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React$1.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+}, "asChild" | "key" | keyof React$1.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React$1.RefAttributes<HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
@@ -515,7 +909,7 @@ declare const CommandGroup: React$1.ForwardRefExoticComponent<Omit<{
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
     heading?: React$1.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -527,19 +921,13 @@ declare const CommandSeparator: React$1.ForwardRefExoticComponent<Omit<Pick<Pick
 }, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
     alwaysRender?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const CommandItem: React$1.ForwardRefExoticComponent<Omit<{
-    children?: React$1.ReactNode;
-} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React$1.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
-    disabled?: boolean;
-    onSelect?: (value: string) => void;
-    value?: string;
-    keywords?: string[];
-    forceMount?: boolean;
-} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface CommandItemProps extends React$1.ComponentPropsWithoutRef<typeof Command$1.Item> {
+    /** Leading mark — an avatar or tile. Does not shrink; the item switches to top alignment. */
+    mark?: React$1.ReactNode;
+    /** The second line under the label. */
+    sub?: React$1.ReactNode;
+}
+declare const CommandItem: React$1.ForwardRefExoticComponent<CommandItemProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const CommandShortcut: {
     ({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): React$1.JSX.Element;
     displayName: string;
@@ -586,6 +974,40 @@ declare namespace DatePicker {
     var displayName: string;
 }
 
+interface AddPickerItem {
+    id: string;
+    name: string;
+    /** Second line under the name. */
+    sub?: string;
+    /** Leading mark — an avatar or a tile. */
+    mark?: React$1.ReactNode;
+}
+interface AddPickerProps {
+    /** Trigger label after the `+`. "Product" → "+ Product". */
+    label: string;
+    /** Plural noun for the search field: "Search 100 products". */
+    noun: string;
+    items: AddPickerItem[];
+    /** Ids already taken. Filtered out of the list, still counted in the placeholder. */
+    exclude?: string[];
+    onPick: (id: string) => void;
+    className?: string;
+}
+/**
+ * The quiet `+ Label` that picks something that already exists, and behind it a search you type into
+ * rather than a list you scroll (Guidelines/Controls/Add & search). The trigger is four lines; what
+ * this owns is the forty under it — the open state, the query, the reset on both ways out of it, and
+ * the filter.
+ *
+ * The count in the placeholder is the whole set, not what is left: it says how big the thing you are
+ * searching is, which is why `exclude` leaves the list and not the number.
+ *
+ * `shouldFilter={false}` and our own `includes`: cmdk scores what it filters and reorders the list as
+ * you type, and a reader looking for a name they can already see is helped by it shortening and not
+ * by it rearranging.
+ */
+declare const AddPicker: React$1.ForwardRefExoticComponent<AddPickerProps & React$1.RefAttributes<HTMLButtonElement>>;
+
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 type CarouselOptions = UseCarouselParameters[0];
@@ -634,32 +1056,89 @@ declare const FormControl: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAt
 declare const FormDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 declare const FormMessage: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 
+/**
+ * A dot is a small mark on a surface, so it paints from the theme-aware `--icon-*` status
+ * tokens rather than the `--bg-*` fills, which exist to sit solid behind text and are not all
+ * overridden per theme. Every variant clears 3:1 against `--bg-surface` in both themes —
+ * `status-dot.test.tsx` pins that, reading the token straight off these class names.
+ */
 declare const statusDotVariants: (props?: ({
-    status?: "success" | "warning" | "brand" | "danger" | "neutral" | null | undefined;
+    status?: "success" | "warning" | "neutral" | "brand" | "danger" | null | undefined;
     size?: "sm" | "lg" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface StatusDotProps extends React$1.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof statusDotVariants> {
     pulse?: boolean;
+    /**
+     * What the dot means, for the case where the dot is the only signal. Say the state in the
+     * product's own words — "Blocked", "Awaiting review" — never the variant name, which is a
+     * palette token the design system may rename without telling anyone downstream.
+     *
+     * Leave it off whenever a text label sits beside the dot. That is nearly every real usage,
+     * and the dot then stays out of the accessibility tree so the label reads alone.
+     */
+    label?: string;
 }
+/**
+ * @deprecated A coloured circle that marks state. The console reads state as `Badge
+ * variant="status"` — a borderless fill on `bg-bg-sunken`, no colour — because colour marks
+ * actions there, never state, and decorative circles are banned outright. #334 took the last
+ * three published components off this. It stays exported for the reference app's demo pages,
+ * where a coloured dot on a campaign status is data, not console chrome. Reach for
+ * `Badge variant="status"` in anything console-shaped.
+ *
+ * The dot is decorative unless you pass `label`, so a text label beside it reads on its own.
+ */
 declare const StatusDot: React$1.ForwardRefExoticComponent<StatusDotProps & React$1.RefAttributes<HTMLSpanElement>>;
 
 interface DocsLinkProps extends React$1.AnchorHTMLAttributes<HTMLAnchorElement> {
     href?: string;
     label?: string;
+    /**
+     * Show the leading `BookOpen` glyph. Defaults to `true` — the docs affordance. Set it `false`
+     * where the target isn't documentation (a legal document, a status page): the book would either
+     * mislabel the link or repeat a book already on screen, while the trailing `ExternalLink` mark,
+     * the new-tab target and the `rel` are exactly what such a link still wants.
+     */
+    showLeadingIcon?: boolean;
 }
 declare const DocsLink: React$1.ForwardRefExoticComponent<DocsLinkProps & React$1.RefAttributes<HTMLAnchorElement>>;
 
 interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'title'> {
     icon?: LucideIcon;
     title: React$1.ReactNode;
+    /**
+     * The tag the title emits. It defaults to `p` because an empty state usually sits inside a card
+     * that already holds the heading; a page whose only text is an empty state names a level here so
+     * the page has an outline at all.
+     */
+    titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
     description?: React$1.ReactNode;
     action?: React$1.ReactNode;
 }
+/**
+ * The empty state for any list, table or panel that can be empty (#356).
+ *
+ * It draws no frame and no fill of its own, because an empty state lives inside a Card and a second
+ * border 16px in from the first is the same edge drawn twice. The glyph is bare for that same
+ * reason, and only that one: it is already inside a frame. A plate is not decoration everywhere —
+ * `PageHeader` gives the identical section glyph a medallion, because there the mark appears once
+ * and stands alone on the page (Guidelines/Section glyphs). Standing on its own, wrap it in a Card.
+ *
+ * `title` states what is missing; `description` says what to do about it, and only earns its line
+ * when it carries a fact the title doesn't; `action` is that step inline, so the way forward is
+ * where the eye already is.
+ */
 declare const EmptyState: React$1.ForwardRefExoticComponent<EmptyStateProps & React$1.RefAttributes<HTMLDivElement>>;
 
-interface CopyButtonProps extends Omit<ButtonProps, 'value'> {
+interface CopyButtonProps extends Omit<ButtonProps, 'value' | 'children' | 'icon' | 'iconPosition' | 'asChild'> {
     value: string;
     label?: string;
+    /**
+     * The value is a secret. Show it in front of the button as a fixed run of dots and its last four
+     * characters — enough to tell two secrets apart, never enough to read one — and name the button by
+     * that tail, so a screen reader says "Copy ending 7f3a" instead of reading out the dots.
+     */
+    masked?: boolean;
 }
 declare const CopyButton: React$1.ForwardRefExoticComponent<CopyButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -679,10 +1158,140 @@ interface StatCardProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 declare const StatCard: React$1.ForwardRefExoticComponent<StatCardProps & React$1.RefAttributes<HTMLDivElement>>;
 
+/** The factors this challenge can present. Order in `methods` is preference, not availability. */
+type StepUpMethod = 'passkey' | 'code';
+/**
+ * The events that carry the digits of a one-time code. They are refused at compile time and stopped
+ * at the field, so the code does not bubble out to a parent by the ordinary React route.
+ */
+type CodeBearingHandler = 'onChange' | 'onChangeCapture' | 'onInput' | 'onInputCapture' | 'onBeforeInput' | 'onBeforeInputCapture' | 'onKeyDown' | 'onKeyDownCapture' | 'onKeyUp' | 'onKeyUpCapture' | 'onKeyPress' | 'onKeyPressCapture' | 'onPaste' | 'onPasteCapture' | 'onCopy' | 'onCopyCapture' | 'onCut' | 'onCutCapture' | 'onDrop' | 'onDropCapture';
+interface StepUpChallengeProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, CodeBearingHandler> {
+    /**
+     * What this person can actually use, strongest first. `['code']` is the user with no passkey
+     * enrolled — the passkey route then isn't offered at all, rather than offered and failing.
+     */
+    methods?: readonly StepUpMethod[];
+    /**
+     * Which factor to open on, when it shouldn't be the first in `methods` — resuming a flow that had
+     * already fallen back to the code, say. Ignored if it isn't one of `methods`.
+     */
+    defaultMethod?: StepUpMethod;
+    /** Fires when the user changes factor. The switch itself is handled here. */
+    onMethodChange?: (method: StepUpMethod) => void;
+    /** Digits in the one-time code. 6 is TOTP's norm; some issuers use 8. */
+    codeLength?: number;
+    /**
+     * A verification is out. Both actions freeze. It is the honest signal and worth wiring, but it is
+     * not what makes one press one attempt — the component latches that itself, because a handler
+     * that awaits a nonce before setting this leaves a window where it is still `false`.
+     */
+    verifying?: boolean;
+    /**
+     * What the user is told about a failed attempt, in the product's own words. Repeat the same
+     * string as often as you like: nothing here keys off its identity, so one constant "That code is
+     * not right" for every wrong code — which is what a server that doesn't leak *why* it failed
+     * sends — behaves exactly like a message that changes every time.
+     */
+    error?: string;
+    /** The confirm's label. The caller names the action its window is about, e.g. `Archive product`. */
+    confirmLabel?: string;
+    /**
+     * The confirm rests filled red. For the window whose confirm **is** the destructive act — a dialog
+     * asking for a code before it turns two-factor authentication off — where a dialog's confirm is
+     * the one place red rests (Guidelines/Destructive actions). Leave it off when the challenge only
+     * guards a step on the way somewhere: a red button there paints the verification as the damage.
+     *
+     * It changes the button and nothing else. **It does not turn the challenge into a confirmation**
+     * — the question is still who you are, never whether you meant it, so no "are you sure?" appears
+     * beside it and the window above still owes the stakes in its own words.
+     */
+    destructive?: boolean;
+    /** The way back's label. `Cancel` when it closes the window, `Back` when it steps back. */
+    backLabel?: string;
+    /** Omit it and there is no way back — an inline challenge on a page has nowhere to go. */
+    onBack?: () => void;
+    /** The user asked to use their passkey. Perform the WebAuthn call here. */
+    onVerifyPasskey?: () => void;
+    /** The user submitted a complete code. Verify it here. It is handed over exactly once. */
+    onVerifyCode?: (code: string) => void;
+}
+/**
+ * Prove it's you before something serious happens: a passkey by preference, a one-time code as the
+ * way out when the passkey can't answer.
+ *
+ * **A step-up is orthogonal to a confirm.** It asks *who you are*, never *whether you meant it*, so
+ * it neither replaces an Undo nor is replaced by one — every Danger-zone action proves it's you, and
+ * Archive passes its step-up and then fires with an Undo (Guidelines/Undo over confirmation). This
+ * component must not grow a "are you sure?" question: that belongs to the window around it.
+ *
+ * **Where the boundary sits.** This renders the challenge and reports which factor the user reached
+ * for; the product performs the verification. `onVerifyPasskey` is where a real consumer calls
+ * `navigator.credentials.get()`; `onVerifyCode` is where it posts the code. Neither is awaited here.
+ * The outcome comes back as props — `verifying` while the call is out, `error` when it failed — so
+ * the component never stringifies an exception and the product owns every word a user is told about
+ * a failure. The caller also owns the window: the `Dialog`, its title, and what happens on success.
+ *
+ * **Nothing keys off the identity of a message.** A product sends one constant string for every
+ * wrong code, precisely so the wording doesn't leak which factor failed or why, and `Object.is`
+ * cannot tell two of those apart. So the code is dropped the moment it is handed over rather than
+ * when a new `error` arrives, and an error is hidden by *which factor it belongs to* rather than by
+ * a latch some prop change has to clear. A caller owes nothing here: it need not vary the message,
+ * and it need not pass an attempt token.
+ *
+ * **The code never leaves except on submit.** There is deliberately no `value`, no `defaultValue`
+ * and no `onChange`, and the handlers that would see the digits — change, input, key, clipboard —
+ * are omitted from the props type *and* stopped at the field, so a parent can neither seed a
+ * one-time code nor watch one being typed by the ordinary React route. It reaches the caller once,
+ * in `onVerifyCode`, and the boxes empty in the same breath: a code the server refused can never be
+ * sent twice, and a challenge that passed leaves nothing behind in a mounted instance. The field
+ * carries no `name`, so a surrounding form never serializes it, and every control here is
+ * `type="button"`, so none of them submits that form either.
+ *
+ * **Two things it does not defend against, and the consumer owes both.** A parent that reaches the
+ * DOM node through a `ref`, or listens on `document` in the capture phase, still sees the
+ * keystrokes — the fence above is against the accidental route, not a hostile parent. And the
+ * digits render as **text nodes** inside the slots, not as an input value: session-replay tools
+ * mask `<input>` values by default and do not mask arbitrary text, so a product that records
+ * sessions must exclude this subtree explicitly (PostHog `ph-no-capture`, FullStory
+ * `data-fs-exclude`, Datadog `data-dd-privacy="mask"`). The code pane carries
+ * `data-sensitive="one-time-code"` so one rule can find it.
+ *
+ * **A failed passkey does not fall back on the user's behalf.** The challenge holds the passkey
+ * pane and leaves the code one press away. Downgrading someone to the weaker factor because the
+ * strong one didn't answer is a decision about their security posture, and it belongs to them —
+ * a cancelled prompt and a missing authenticator look identical from here. For the same reason the
+ * WebAuthn ceremony never auto-starts and a complete code never auto-submits: every attempt is a
+ * press the user made.
+ */
+declare const StepUpChallenge: React$1.ForwardRefExoticComponent<StepUpChallengeProps & React$1.RefAttributes<HTMLDivElement>>;
+
 interface InlineErrorProps extends React$1.HTMLAttributes<HTMLDivElement> {
     children: React$1.ReactNode;
 }
 declare const InlineError: React$1.ForwardRefExoticComponent<InlineErrorProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * What the user did to prove it was them, handed to `onConfirm` so the product can verify it. Only a
+ * dialog carrying `stepUp` sends one; every other confirm calls `onConfirm` with nothing.
+ */
+type StepUpProof = {
+    method: 'passkey';
+} | {
+    method: 'code';
+    code: string;
+};
+/**
+ * The identity challenge a `ConfirmDialog` puts in place of its footer, and the words above it.
+ *
+ * The four factor settings are the caller's. Everything else the challenge takes is the dialog's,
+ * because the dialog is the thing that knows the answer: the confirm's label, the way back, and
+ * whether a verification is out or has failed all come from the confirm it replaced.
+ */
+interface ConfirmDialogStepUp extends Pick<StepUpChallengeProps, 'methods' | 'defaultMethod' | 'codeLength' | 'onMethodChange'> {
+    /** The panel's own title, when proving it's you is a different question from the one asked first. */
+    title?: React$1.ReactNode;
+    /** The panel's own description. Say what is about to happen, not how the challenge works. */
+    description?: React$1.ReactNode;
+}
 interface ConfirmDialogProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -692,14 +1301,35 @@ interface ConfirmDialogProps {
     confirmLabel?: string;
     cancelLabel?: string;
     destructive?: boolean;
-    onConfirm: () => void | Promise<void>;
+    /**
+     * The words the user has to type before the confirm will fire — a product's name, `DELETE`. For an
+     * action whose cost is that it cannot be taken back by the person taking it.
+     */
+    confirmPhrase?: string;
+    /**
+     * Prove it's you before this fires. The challenge takes the footer's place, so there is no live
+     * confirm sitting over an unanswered one. Orthogonal to `confirmPhrase`: that asks whether you
+     * meant it, this asks who you are, and an action can want both.
+     */
+    stepUp?: ConfirmDialogStepUp;
+    onConfirm: (proof?: StepUpProof) => void | Promise<void>;
+    /**
+     * Turns whatever `onConfirm` threw into the line the dialog shows. Without it the dialog shows
+     * `CONFIRM_FAILED` and nothing else — a thrown value is written for whoever reads the logs, and
+     * `e.message` on the screen has already put a host, a port and an internal id in front of a user
+     * (#473). The product owns that translation because only it knows which failures it can name.
+     */
+    onError?: (error: unknown) => string;
 }
-declare function ConfirmDialog({ open, onOpenChange, trigger, title, description, confirmLabel, cancelLabel, destructive, onConfirm, }: ConfirmDialogProps): React$1.JSX.Element;
+declare function ConfirmDialog({ open, onOpenChange, trigger, title, description, confirmLabel, cancelLabel, destructive, confirmPhrase, stepUp, onConfirm, onError, }: ConfirmDialogProps): React$1.JSX.Element;
 
 interface UserMenuUser {
     name: string;
-    /** Second line of the row. The shipped rail shows the org name here. */
+    /** Seeds the avatar tint, so the colour survives a rename. Optional; falls back to the name. */
+    id?: string;
+    /** Overrides the second line where a rail needs something other than the email there. */
     subtitle?: string;
+    /** Second line of the row: the address this person signs in with. */
     email?: string;
     avatarUrl?: string;
 }
@@ -755,42 +1385,950 @@ interface ExtensionIconProps extends LucideProps {
  */
 declare const ExtensionIcon: React$1.ForwardRefExoticComponent<Omit<ExtensionIconProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
 
-/** True when the viewport is narrower than the `md` breakpoint (768px). SSR-safe. */
-declare function useIsMobile(): boolean;
-
-interface UseSidebarOptions {
-    /** Controlled collapsed value. When provided, the hook does not own state. */
-    collapsed?: boolean;
-    /** Initial collapsed value in uncontrolled mode. Default false (expanded). */
-    defaultCollapsed?: boolean;
-    /** Called whenever the collapsed value should change (both modes). */
-    onCollapsedChange?: (collapsed: boolean) => void;
-}
-interface UseSidebarResult {
-    collapsed: boolean;
-    setCollapsed: (collapsed: boolean) => void;
-    toggle: () => void;
-}
 /**
- * Controllable sidebar collapse state. Controlled when `collapsed` is passed,
- * otherwise internal state seeded by `defaultCollapsed`. Pure — no persistence
- * or context; the host app owns persistence.
+ * A glyph that stands on its own — a warning triangle in a summary line, a lock beside a group
+ * name, an info mark in a row — and explains itself.
+ *
+ * **Reach for this one when nothing else on screen says what the glyph means.** Its sibling
+ * {@link DecorativeIcon} is for the opposite case, a glyph inside a control that already has a
+ * name; the two render identically and differ only in the accessibility tree, which is why they
+ * ship together and why the names have to carry the condition — picking the wrong one is not
+ * visible in a screenshot.
+ *
+ * Four things it owns, and each of them is a bug you get composing `Tooltip` by hand:
+ *
+ * - **A role.** `aria-label` on a bare `<span>` is not reliably exposed. `role="img"` is what makes
+ *   the name count, and it is honest: the glyph *is* an image carrying meaning.
+ * - **A tab stop, with a ring on it.** A tooltip only reachable by pointer is an explanation
+ *   keyboard and screen reader users never get. The trigger is focusable, focus opens the tooltip,
+ *   and `focus-visible` draws the ring — a tab stop nobody can see is not a tab stop.
+ * - **One announcement.** Radix does two things with the sentence: it points the trigger's
+ *   `aria-describedby` at the open bubble, and it renders a `VisuallyHidden role="tooltip"` copy of
+ *   the text *inside* that bubble. With the sentence already serving as the accessible name, both
+ *   are duplicates — and suppressing only the relation leaves the copy orphaned, referenced by
+ *   nothing and still read. So the relation is suppressed **and** the bubble is `aria-hidden`: it
+ *   is a picture of the name, drawn for the people who can see it. WAI-ARIA APG: a tooltip that
+ *   supplies the name labels; it does not also describe.
+ * - **Pointer events of its own.** A `disabled` control sets `pointer-events: none` over its whole
+ *   subtree (the kit `Button` does), which is exactly when a glyph explaining *why* it is disabled
+ *   matters most — and exactly when it would otherwise fall out of the hit stack. The trigger
+ *   re-enables its own. The trade-off is real and worth stating: one small part of a disabled
+ *   control now answers the pointer.
+ *
+ * **`label` is one string on purpose.** Splitting the name from the tooltip text would let them
+ * drift, and drifting is the failure this component exists to stop. A blank one is a bug, not a
+ * variant: a focusable `role="img"` with no name is a WCAG 4.1.2 failure and the bubble would open
+ * empty. A blank `label` therefore renders the glyph as decorative — `aria-hidden`, no role, no tab
+ * stop, no tooltip — and warns in development. Keep the sentence short, too: the bubble sets no
+ * maximum width, so a paragraph runs off the edge of the viewport.
+ *
+ * **The component's own attributes win, not the call site's.** `role`, `aria-label`, `aria-hidden`,
+ * `aria-describedby` and `tabIndex` are applied *after* your props are spread, so passing your own
+ * cannot quietly undo any of the above. The `Omit` below stops `role` and `tabIndex` at compile
+ * time; it cannot
+ * stop `aria-*`, because TypeScript exempts hyphenated JSX attributes from excess-property
+ * checking — which is why the ordering, and not the type, is the guarantee.
+ *
+ * **Requires a `TooltipProvider` above it.** One per app, near the root — never one per icon, which
+ * puts every glyph in its own delay group so moving between two of them re-waits the full delay.
+ * With none mounted, Radix throws ``\`Tooltip\` must be used within \`TooltipProvider\``` — and
+ * because `@lessly/ui` re-exports those names verbatim, that message names two things you can
+ * import from this package. See `Guidelines/Icons & tooltips`.
  */
-declare function useSidebar(options?: UseSidebarOptions): UseSidebarResult;
-
-type NavRowVariant = 'rail' | 'menu';
-interface NavRowOwnProps {
-    /** Leading glyph. Rendered in a fixed 20px box; SVGs are normalized to 18px.
-     *  A falsy value (`null`/`false`/`0`/`''`) renders nothing — there is no reserved
-     *  empty slot, so the row's content shifts left when `icon` is falsy. */
-    icon?: React$1.ReactNode;
+interface IconHintProps extends Omit<React$1.ComponentPropsWithoutRef<'span'>, 'role' | 'tabIndex' | 'children'> {
+    /** The glyph. Size and colour it at the call site — this component owns behaviour, not looks. */
+    children: React$1.ReactNode;
+    /** The sentence. It is both the tooltip text and the glyph's accessible name. */
     label: string;
-    active?: boolean;
-    variant: NavRowVariant;
-    /** Right-aligned adornment: chevron, checkmark, action. Keeps its own size.
+    /** Which edge the tooltip lands on. */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** How the tooltip lines up along that edge — for a glyph pinned to the edge of a narrow column. */
+    align?: 'start' | 'center' | 'end';
+}
+declare const IconHint: React$1.ForwardRefExoticComponent<IconHintProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * A glyph *inside* something that already has a name — a flag in a `Report` button, an info mark
+ * after a role's label — with a hover hint for sighted users and nothing else.
+ *
+ * **Reach for this one when the text or control around the glyph already says what it means.** Its
+ * sibling {@link IconHint} is for a glyph that stands alone. The two render identically; only the
+ * accessibility tree tells them apart, which is why the name has to carry the condition for
+ * choosing it — *decorative* is the term for a glyph that carries no meaning of its own, and that
+ * is the whole test. (It was called `IconTip` and the name said nothing: both are icons, both are
+ * tips.)
+ *
+ * Naming this glyph and giving it a tab stop — the obvious thing, and what you get by copying
+ * `IconHint` — is wrong twice over:
+ *
+ * - **The name announces nothing.** The host's own `aria-label` halts descendant traversal, so a
+ *   name here is never read. Where the host is named by its text instead, the name *does* get
+ *   through and corrupts it: the control stops announcing "Report" and starts announcing "Report,
+ *   we'll sign this device out".
+ * - **The tab stop is a stray one.** A focusable child inside a button makes the control take two
+ *   tabs, and the first lands somewhere that does nothing. A focusable `aria-hidden` element is an
+ *   ARIA violation in its own right.
+ *
+ * So the trigger is `aria-hidden` and takes no focus, and the bubble is `aria-hidden` too — Radix
+ * renders a `VisuallyHidden role="tooltip"` copy of the text inside it, and leaving that in the
+ * tree would put a loose sentence next to a glyph that is meant to be silent. `label` is hover
+ * text, never a name. If a keyboard or screen reader user needs the sentence, that is the signal
+ * that the glyph is not decorative and the wrong component is in use.
+ *
+ * **It keeps its own pointer events.** A `disabled` control sets `pointer-events: none` over its
+ * whole subtree (the kit `Button` does), and that is the one moment the glyph's sentence matters
+ * most — it is usually what says *why* the control is disabled. The trigger re-enables its own so a
+ * disabled control can still explain itself. The trade-off is real and worth stating: one small
+ * part of a disabled control now answers the pointer.
+ *
+ * A blank `label` leaves nothing to show, so it renders the bare glyph with no tooltip at all
+ * rather than an empty bubble, and warns in development. Keep the sentence short: the bubble sets
+ * no maximum width, so a paragraph runs off the edge of the viewport.
+ *
+ * **The component's own attributes win, not the call site's.** `aria-hidden` is applied *after*
+ * your props are spread, and no `role`, `aria-label` or `tabIndex` is passed through, so a call
+ * site cannot turn this back into an `IconHint`. The `Omit` below stops `role` and `tabIndex` at
+ * compile time; it cannot stop `aria-*`, because TypeScript exempts hyphenated JSX attributes from
+ * excess-property checking — which is why the ordering, and not the type, is the guarantee.
+ *
+ * **Requires a `TooltipProvider` above it** — one per app, near the root. See
+ * `Guidelines/Icons & tooltips`.
+ */
+interface DecorativeIconProps extends Omit<React$1.ComponentPropsWithoutRef<'span'>, 'role' | 'tabIndex' | 'children'> {
+    /** The glyph. Hidden from assistive technology whatever it is. */
+    children: React$1.ReactNode;
+    /** The hover text. Not an accessible name — the host control owns that. */
+    label: string;
+    /** Which edge the tooltip lands on. */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** How the tooltip lines up along that edge. */
+    align?: 'start' | 'center' | 'end';
+}
+declare const DecorativeIcon: React$1.ForwardRefExoticComponent<DecorativeIconProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+type ImageCropShape = 'square' | 'circle';
+type ImageCropType = 'image/png' | 'image/jpeg' | 'image/webp';
+interface ImageCropperProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'onError' | 'onLoad'> {
+    /** The image to crop: a data URL, an object URL, or a URL the browser can fetch. */
+    src: string;
+    /**
+     * The mask. `square` is the default because a logo is the commoner case and a rectangle is what an
+     * image already is; `circle` is the avatar case and is baked into the export, not just previewed.
+     */
+    shape?: ImageCropShape;
+    /** Edge of the exported square, in pixels. 256 covers every avatar slot the console draws. */
+    outputSize?: number;
+    /**
+     * `image/jpeg` is the one format with no alpha channel, so it alone gets a ground painted under
+     * the crop. PNG and WebP both carry alpha — including the canvas encoder that writes them — so a
+     * circle exported as either comes back genuinely transparent in the corners.
+     */
+    outputType?: ImageCropType;
+    /** 0–1, for the lossy formats. Ignored by `image/png`. */
+    outputQuality?: number;
+    /**
+     * What is painted over the whole canvas before the crop, and before any mask. Defaults to white
+     * for `image/jpeg` and to nothing for the two formats that can be transparent. Pass a colour to
+     * flatten a PNG or WebP onto a ground, or `null` to let a JPEG's empty pixels fall to black.
+     */
+    background?: string | null;
+    /** The smallest crop, in stage pixels, so the four corner grips never blanket the move region. */
+    minCropSize?: number;
+    /**
+     * Set it when the image is served from another origin. Without it the image loads perfectly and
+     * taints the canvas, so the failure arrives on Save as `exportErrorMessage`, not on load.
+     */
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    /** The cropped region, as a data URL of `outputType`. */
+    onCrop: (dataUrl: string) => void;
+    /** Omit it and no Cancel renders — for a cropper embedded in a page that owns its own way out. */
+    onCancel?: () => void;
+    saveLabel?: string;
+    cancelLabel?: string;
+    /** The line under the stage. Pass `null` to drop it. */
+    hint?: React$1.ReactNode;
+    /** Shown in place of the image when the source cannot be read. */
+    errorMessage?: React$1.ReactNode;
+    /**
+     * Shown under a stage that still holds the photo, when the *export* was refused. A cross-origin
+     * image with no `crossOrigin` loads perfectly and taints the canvas, so the failure arrives on
+     * Save and the load copy would be describing something that never happened.
+     */
+    exportErrorMessage?: React$1.ReactNode;
+}
+declare const ImageCropper: React$1.ForwardRefExoticComponent<ImageCropperProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * `ImageCropper` in a window, which is where a crop step almost always happens: a file is picked,
+ * and the crop is the one thing between picking it and saving it.
+ *
+ * It is small on purpose, and it exists for one reason — **it takes the caller's word for the thing
+ * being cropped and puts it in the title**, so a logo is never called an avatar. `label` is the
+ * whole feature; `title` is there for a sentence the "Crop <thing>" pattern does not fit.
+ *
+ * Controlled only. There is no uncontrolled form because a crop window has nothing to show until
+ * the caller has a file in hand, so the caller already owns the open state.
+ */
+interface ImageCropDialogProps extends Omit<ImageCropperProps, 'src' | 'onCancel' | 'className' | 'title'> {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /**
+     * The picked image, or `null` before anything has been picked — the window then renders its frame
+     * and no cropper, rather than a cropper pointed at nothing.
+     */
+    src: string | null;
+    /** The thing being cropped, in the caller's own words: `Logo`, `Avatar`, `Cover image`. */
+    label?: string;
+    /** Overrides the whole title. Use it when `Crop <label>` is not the sentence you want. */
+    title?: React$1.ReactNode;
+    /** A crop window usually has nothing to add beyond its title; say something only when it does. */
+    description?: React$1.ReactNode;
+}
+declare function ImageCropDialog({ open, onOpenChange, src, label, title, description, onCrop, ...cropperProps }: ImageCropDialogProps): React$1.JSX.Element;
+declare namespace ImageCropDialog {
+    var displayName: string;
+}
+
+/**
+ * Pick an image, see it, crop it, keep it — an account photo, a product logo, an organization logo.
+ * Without this a product gets the browser's bare file input, which is why every one of them would
+ * otherwise install a package on day one.
+ *
+ * The value is a data URL, so it renders straight into an `<img>` and uploads with one line
+ * (`await (await fetch(value)).blob()`). `onChange(null)` is the removal.
+ *
+ * **The word for the thing is the caller's.** `label` names it in the file input, the preview and
+ * the crop window's title, so an organization logo is never called an avatar.
+ */
+type ImageUploadSize = 'sm' | 'md' | 'lg';
+interface ImageUploadProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onError'> {
+    /** The image, as a data URL or any src the browser can render. `null` is "nothing set yet". */
+    value: string | null;
+    /** The cropped image, or `null` when it is removed. */
+    onChange: (value: string | null) => void;
+    /**
+     * What is being uploaded, in the caller's own words: `Logo`, `Avatar`, `Organization logo`. It
+     * names the file input, the preview and the crop window.
+     */
+    label?: string;
+    /**
+     * A circle is a principal, a rounded square is an object (Guidelines/Avatars) — and the same
+     * shape masks the crop, so what you see in the tile is what was saved.
+     */
+    shape?: ImageCropShape;
+    /** The preview tile: 32, 48 or 64px. */
+    size?: ImageUploadSize;
+    /**
+     * What the tile shows before anything is picked. Supply one and you own its frame — the tile
+     * draws no ring of its own, so a `PersonAvatar` here doesn't end up double-ringed.
+     */
+    fallback?: React$1.ReactNode;
+    /** A line under the buttons. There is no default: only the caller knows the real constraint. */
+    hint?: React$1.ReactNode;
+    /** The file input's filter. Anything that isn't an image is refused regardless. */
+    accept?: string;
+    /** In bytes. A picker with no ceiling is a bug waiting on the first 40MB photo. */
+    maxFileSize?: number;
+    /** Skip the crop step and take the file as it was picked. */
+    crop?: boolean;
+    disabled?: boolean;
+    /** Edge of the stored square, in pixels. */
+    outputSize?: number;
+    outputType?: ImageCropType;
+    outputQuality?: number;
+    /** Called with the same sentence the control shows, for a caller that reports errors its own way. */
+    onError?: (message: string) => void;
+    uploadLabel?: string;
+    changeLabel?: string;
+    removeLabel?: string;
+}
+declare const ImageUpload: React$1.ForwardRefExoticComponent<ImageUploadProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * What opening this row does. The row's trailing column is a promise, and this states it.
+ *
+ * This is the set of **values**, for a caller's own data model — not a prop bag. `opens` lives in a
+ * discriminated union with `expanded` (see `EntityRowOpensProps`), so a variable typed as this one
+ * widens across both arms and satisfies neither: `<EntityRow opens={row.opens} />` does not compile.
+ * A config-driven list narrows to `EntityRowOpensProps` and spreads that instead.
+ */
+type EntityRowOpens = 'page' | 'modal' | 'disclosure' | 'none';
+interface EntityRowOwnProps {
+    /**
+     * Leading mark — who or what the row is about. Round for a principal (a person, an agent, a
+     * group), a rounded square for an object (a product, a connector, a key). `PersonAvatar`,
+     * `GlyphAvatar` and `EntityTile` are the three that ship; each is already `shrink-0`, which a
+     * hand-rolled mark has to be too or a long title will squash it.
+     */
+    mark?: React$1.ReactNode;
+    /**
+     * The name of the thing this row is — a string in almost every list, and any node where the name
+     * is built out of parts: an activity log's sentence with the agent's name a link inside it.
+     *
+     * A **focusable** node here is legal only on `opens="none"`, which renders a `<div>` and is not a
+     * target — which is exactly how the activity log gets a link into the sentence. On the other three
+     * the row is itself the control, so a control in the title nests one button inside another: broken
+     * tab order, invalid HTML, and a hydration mismatch on the server.
+     *
+     * **The DOM `title` attribute is not in this component's type.** A row's name is content, not a
+     * tooltip, and nothing here sets the attribute: a tooltip that only appears on hover, after a
+     * delay, and never for a keyboard, is not where a row's name goes.
+     */
+    title: React$1.ReactNode;
+    /**
+     * A small chip beside the title — `You`, `Guest`, `Synced from Okta`. It sits in a slot that does
+     * not shrink, so a long title truncates and the chip stays whole rather than the other way round.
+     */
+    badge?: React$1.ReactNode;
+    /** The second line under the title: an email, a device, a count. Drops a type step (#364). */
+    sub?: React$1.ReactNode;
+    /**
+     * The trailing value before the reserved column — a role name, a status `Badge`, an expiry. It is
+     * the answer to the row, not a caption, so it holds `text-sm` (#364). Text and non-focusable
+     * marks only on a row that opens something: the row is one target, so nothing focusable may sit
+     * inside it. `opens="none"` is the exception — that row is not a target, so a control belongs here.
+     */
+    meta?: React$1.ReactNode;
+    /**
+     * A line under the whole row at full width — the row's question answered without opening it.
+     * Unlike `sub` it does not share a line with `meta`, so a long summary is not truncated by the
+     * trailing value. Inert content only: the row is one target.
+     */
+    summary?: React$1.ReactNode;
+}
+/**
+ * What the trailing column promises, and — for the one value that has a state — which state the row
+ * is in. Press Esc: if nothing is lost it is a modal, if something is it is a page, and "lost"
+ * includes your place (#361).
+ *
+ * `expanded` is required by `disclosure` and rejected by the other two, so a row cannot claim a
+ * state it does not have and a disclosure cannot forget to say which one it is in.
+ */
+type EntityRowOpensProps = {
+    /**
+     * `page` (the default) is what opening an entity does, and it wears the `ChevronRight`. That
+     * mark means an entity opening as a **page** and nothing else in this console carries one, so
+     * it is stated here rather than passed in as an icon (#363, #411).
+     *
+     * `modal` opens a detail in place over the list and wears nothing: a modal moves you nowhere,
+     * so a mark would promise travel that never happens.
+     *
+     * `disclosure` grows the detail underneath the row, and wears the caret the kit already gives
+     * every disclosure — `Accordion`, `ConnectorCard` — a `ChevronDown` turning 180° (#401). It
+     * takes `expanded`.
+     *
+     * The 16px column stays reserved whichever it is, so a list mixing them keeps one right edge
+     * for its `meta`.
+     */
+    opens?: 'page' | 'modal';
+    expanded?: never;
+} | {
+    opens: 'disclosure';
+    /**
+     * Whether the block below the row is open. It drives the caret's rotation **and**
+     * `aria-expanded`, so the mark and the accessibility tree cannot drift apart.
+     */
+    expanded: boolean;
+} | {
+    /**
+     * `none` opens nothing: the row is a line in a list you read, and whatever can be done to it
+     * sits in `meta` as its own control — a role picker on a grant, a ✕. It is the same row
+     * geometry and the same slots, with the three things that follow from "a row is something you
+     * click" taken back off: no element to press, so no `<button>`, no `onClick` and no `asChild`;
+     * no reserved trailing column, because there is no mark it could ever hold and a static list
+     * has no chevron to line up with; and no hover plate, which on a row with nothing to press
+     * promises a click that never happens. The title drops to the regular weight the rest of the
+     * row already reads at.
+     */
+    opens: 'none';
+    expanded?: never;
+    onClick?: never;
+    asChild?: never;
+};
+/**
+ * Render the single child element instead of a button — a router `<Link>`, an `<a>`. The row builds
+ * its content from props, so the child's own children are replaced; `children` is therefore only
+ * accepted when `asChild` is true, and rejected at the type level otherwise rather than silently
+ * dropped at render time.
+ *
+ * `title` is omitted from the button props alongside `children` for the same reason: the row owns
+ * both slots. See `EntityRowOwnProps['title']`.
+ */
+type EntityRowProps = EntityRowOwnProps & EntityRowOpensProps & Omit<React$1.ComponentPropsWithoutRef<'button'>, 'children' | 'title'> & ({
+    asChild: true;
+    children: React$1.ReactElement;
+} | {
+    asChild?: false;
+    children?: never;
+});
+/**
+ * The console's one list item. Members, groups, products, roles and keys all render through it, so
+ * the lists read the same from screen to screen.
+ *
+ * The whole row is the click target and it carries **no** inline action and no overflow menu —
+ * entity actions live in the detail, where there is room to confirm and explain. A row that is not
+ * navigable at all (a pending invite with Approve / Deny) is a different pattern and does not use
+ * this. See `Guidelines/List items`.
+ *
+ * `opens="none"` is the one form that is not a target: a static line in a list, rendered as a `<div>`
+ * with its controls in `meta`. Everything below is about the other three.
+ *
+ * **Hover and focus are one plate, and it is paint.** The fill and the focus ring share one
+ * `::after`, inset from the row's box (see `rowClass` for the numbers). The row's own box, padding
+ * and hit area are untouched, so do not shrink a row to match what it paints.
+ *
+ * Five consequences for a caller:
+ *
+ * 1. The row is `position: relative` and `isolation: isolate`.
+ * 2. Being a stacking context, the row can no longer be painted over by a non-portaled popover
+ *    inside `mark`, `badge` or `meta` — such a popover is now trapped above this row and below the
+ *    next. Portal it, as the kit's own overlays do.
+ * 3. `::before` is deliberately left free, for a caller stretching the row's hit area over a box
+ *    bigger than the button (#409).
+ * 4. A caller whose row is bigger than this button needs **both** `static` **and** `isolation-auto`
+ *    on the button. `relative` alone is not a stacking context, so the `-z-10` plate escapes and
+ *    paints behind the host `Card` — hover fill and focus ring both vanish; `static` alone without
+ *    `isolation-auto` gives the mirror bug, a giant unclipped plate.
+ * 5. The fill moved merge groups. A caller who used to override it with `className="hover:bg-…"`
+ *    now replaces nothing, because the fill is `hover:after:bg-…`. Turn this one off with
+ *    `hover:after:bg-transparent` and paint your own.
+ */
+declare const EntityRow: React$1.ForwardRefExoticComponent<((EntityRowOwnProps & {
+    /**
+     * `page` (the default) is what opening an entity does, and it wears the `ChevronRight`. That
+     * mark means an entity opening as a **page** and nothing else in this console carries one, so
+     * it is stated here rather than passed in as an icon (#363, #411).
+     *
+     * `modal` opens a detail in place over the list and wears nothing: a modal moves you nowhere,
+     * so a mark would promise travel that never happens.
+     *
+     * `disclosure` grows the detail underneath the row, and wears the caret the kit already gives
+     * every disclosure — `Accordion`, `ConnectorCard` — a `ChevronDown` turning 180° (#401). It
+     * takes `expanded`.
+     *
+     * The 16px column stays reserved whichever it is, so a list mixing them keeps one right edge
+     * for its `meta`.
+     */
+    opens?: "page" | "modal";
+    expanded?: never;
+} & Omit<Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "title" | "children"> & {
+    asChild: true;
+    children: React$1.ReactElement;
+}) | (EntityRowOwnProps & {
+    /**
+     * `page` (the default) is what opening an entity does, and it wears the `ChevronRight`. That
+     * mark means an entity opening as a **page** and nothing else in this console carries one, so
+     * it is stated here rather than passed in as an icon (#363, #411).
+     *
+     * `modal` opens a detail in place over the list and wears nothing: a modal moves you nowhere,
+     * so a mark would promise travel that never happens.
+     *
+     * `disclosure` grows the detail underneath the row, and wears the caret the kit already gives
+     * every disclosure — `Accordion`, `ConnectorCard` — a `ChevronDown` turning 180° (#401). It
+     * takes `expanded`.
+     *
+     * The 16px column stays reserved whichever it is, so a list mixing them keeps one right edge
+     * for its `meta`.
+     */
+    opens?: "page" | "modal";
+    expanded?: never;
+} & Omit<Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "title" | "children"> & {
+    asChild?: false;
+    children?: never;
+}) | (EntityRowOwnProps & {
+    opens: "disclosure";
+    /**
+     * Whether the block below the row is open. It drives the caret's rotation **and**
+     * `aria-expanded`, so the mark and the accessibility tree cannot drift apart.
+     */
+    expanded: boolean;
+} & Omit<Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "title" | "children"> & {
+    asChild: true;
+    children: React$1.ReactElement;
+}) | (EntityRowOwnProps & {
+    opens: "disclosure";
+    /**
+     * Whether the block below the row is open. It drives the caret's rotation **and**
+     * `aria-expanded`, so the mark and the accessibility tree cannot drift apart.
+     */
+    expanded: boolean;
+} & Omit<Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "title" | "children"> & {
+    asChild?: false;
+    children?: never;
+}) | (EntityRowOwnProps & {
+    /**
+     * `none` opens nothing: the row is a line in a list you read, and whatever can be done to it
+     * sits in `meta` as its own control — a role picker on a grant, a ✕. It is the same row
+     * geometry and the same slots, with the three things that follow from "a row is something you
+     * click" taken back off: no element to press, so no `<button>`, no `onClick` and no `asChild`;
+     * no reserved trailing column, because there is no mark it could ever hold and a static list
+     * has no chevron to line up with; and no hover plate, which on a row with nothing to press
+     * promises a click that never happens. The title drops to the regular weight the rest of the
+     * row already reads at.
+     */
+    opens: "none";
+    expanded?: never;
+    onClick?: never;
+    asChild?: never;
+} & Omit<Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "title" | "children"> & {
+    asChild?: false;
+    children?: never;
+})) & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface BackLinkProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /**
+     * The name of the page this returns to — `Members`, `Roles`, `Agents & API`. It names the parent
+     * so the control reads without the trail above it; never the bare word "Back".
+     */
+    parent: string;
+    /**
+     * Hand the element to a router's own link (`<Link>`, `<a href>`): the component keeps the arrow,
+     * the label and the geometry, the consumer keeps the URL. Pass exactly one element as `children`.
+     */
+    asChild?: boolean;
+    /** The router link to slot. Only read when `asChild` is set. */
+    children?: React$1.ReactNode;
+}
+/**
+ * The way back from a sub-page (#362) — a member, a group, a product, a credential, a role, a
+ * provider's configuration. **One** control, above the page title, on the content column's left
+ * edge, naming the parent rather than saying "Back".
+ *
+ * It is not a second trail: the top bar keeps the whole breadcrumb, and the back/forward history
+ * arrows are gone (#337), which is what leaves this the one control that walks. A **wizard gets
+ * none** — its steps are the navigation. See `Guidelines/Second level navigation`.
+ *
+ * **Two ways to spell the destination, and one of them is required.**
+ *
+ * ```tsx
+ * <BackLink parent="Members" onClick={() => attemptLeave(onBack)} />   // no router
+ * <BackLink parent="Members" asChild><Link to="/org/members" /></BackLink>  // a router
+ * ```
+ *
+ * A product with a router should reach for `asChild`: the parent has a URL, so the way back is a
+ * real link — Cmd-click opens the list in a new tab, the status bar previews it, and the router
+ * navigates on the client. `onClick` is the form for a screen with no URL for its parent, which is
+ * every prototype and any panel routed by component state.
+ *
+ * Where a guard stands between the reader and the parent — unsaved changes on the role editor — the
+ * handler must be the *same* one the second-to-last crumb carries (`attemptLeave(onBack)`, not
+ * `onBack`). Under `asChild`, that guard is the link's own `onClick` calling `preventDefault`.
+ *
+ * **No destination means no control.** Some detail views are reachable in a mode with no way back
+ * wired, and the crumb above goes inert in exactly that case; a button that looks like an exit and
+ * does nothing is worse than no button, so this renders `null` rather than a dead or disabled one.
+ */
+declare const BackLink: React$1.ForwardRefExoticComponent<BackLinkProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface CardNoteProps extends React$1.HTMLAttributes<HTMLParagraphElement> {
+    /** One sentence. Who may change what's above, or why nobody can right now. */
+    children: React$1.ReactNode;
+}
+/**
+ * The one-line constraint a card states at its foot: who may change what the card holds, or which
+ * state has taken its controls away (#372).
+ *
+ * **It speaks for the card, not for one control on it.** A sentence about a single row belongs on
+ * that row, as a second line under its label, where the reader meets it with the value it governs.
+ * This is for the line that covers everything the card offers — a Danger zone's actions, a list's
+ * add, a profile's name and logo together.
+ *
+ * **The line looks the same either way, and that is the component.** A card whose field has just
+ * been frozen must not grow a box it didn't have when the field was live — so this takes no tone,
+ * no severity and no variant, and there is deliberately no way to make the frozen sentence louder
+ * than the permission one. Reaching for `Alert` here is the regression it exists to prevent:
+ * `Alert` is a filled, four-sided, `role="alert"` box, and it shouts over the field it is about.
+ *
+ * A lock and one sentence. The glyph is fixed, because every line this component carries is about
+ * permission — if a card's foot wants to say something else, it is not a `CardNote`.
+ *
+ * It draws one edge, the seam at the card's foot, and takes the card's own 16px inset, so it sits
+ * flush at the bottom of a `Card` with no wrapper:
+ *
+ * ```tsx
+ * <Card title="Danger zone">
+ *   {rows}
+ *   <CardNote>These actions come back when the block is lifted.</CardNote>
+ * </Card>
+ * ```
+ *
+ * The sentence itself follows `Guidelines/State with a reason`: it names the way back, or names
+ * that there isn't one — an archived product's name points at Restore, a blocked one names nothing,
+ * because the organization has nothing to name.
+ */
+declare const CardNote: React$1.ForwardRefExoticComponent<CardNoteProps & React$1.RefAttributes<HTMLParagraphElement>>;
+
+/** The three scales a remove ✕ rides at: 28px in a card header, 36px in a list row, 40px beside a
+ *  default-size text button. Literal strings, resolved by `Button` — this component never sizes a
+ *  box with a `className`. `lg` and the legacy `icon` size are deliberately not offered: nothing in
+ *  the console removes a row at 44px, and `icon` predates the icon-only form. */
+type RemoveButtonSize = 'xs' | 'sm' | 'default';
+interface RemoveButtonProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /**
+     * The whole sentence: `"Remove Ana Ruiz"`, not `"Ana Ruiz"`. It is **both** the tooltip text and
+     * the button's accessible name, deliberately one string — splitting them would let the hint a
+     * sighted user reads and the name a screen reader hears drift apart, and drifting is one of the
+     * two failures this component exists to stop.
+     */
+    label: string;
+    /** Required. A ✕ with no handler is a button that lies about being one. */
+    onClick: React$1.MouseEventHandler<HTMLButtonElement>;
+    /** The square box. `sm` (36px) is the list-row scale and the default. */
+    size?: RemoveButtonSize;
+    /** Which edge the tooltip lands on. Radix pushes it off a viewport edge on its own. */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+}
+/**
+ * A ✕ that removes a row, **shipped already wearing its tooltip**.
+ *
+ * The kit `Button` has had the right style for this all along — `variant="destructive-ghost"` rests
+ * neutral and reddens only under the pointer (Guidelines/Destructive actions), borderless because a
+ * column of framed ✕ buttons is a wall (Guidelines/Button pairs). What `Button` cannot ship is the
+ * tooltip: it never mounts one, so every call site has to remember to compose `Tooltip` +
+ * `TooltipTrigger asChild` + `TooltipContent` around it, and that is exactly the step people skip.
+ * A ✕ with an `aria-label` and no tooltip is a control that explains itself to a screen reader and
+ * to nobody else. So the pairing is the component.
+ *
+ * **What "paired" can mean, and what it can't.** It cannot mean owning a `TooltipProvider`. One
+ * provider is mounted per canvas — never one per control, which puts every ✕ in its own delay group
+ * so moving between two of them re-waits the full delay — and a component that mounted its own
+ * would be a second provider inside every app that already has one. So this owns the *pairing* and
+ * requires the *provider*, and with none mounted Radix throws
+ * ``` `Tooltip` must be used within `TooltipProvider` ```. That message is a usable instruction
+ * rather than a puzzle here, because `@lessly/ui` re-exports Radix's names verbatim: both symbols
+ * it names are importable from this package. Mount `TooltipProvider` once near your root — `AppShell`
+ * already does.
+ *
+ * **Disabled.** `Button`'s base class sets `disabled:pointer-events-none`, which would kill the
+ * hover on exactly the button whose reason most needs explaining ("you can't remove the last
+ * owner"). When `disabled` is set, the tooltip trigger moves to a wrapping `<span>` so the hint
+ * survives; the wrapper is `inline-flex`, so it disappears into a flex row. It costs one layout
+ * node, and only in the state that needs it. There is no keyboard path to it — a disabled button
+ * is not a tab stop, by design — so if the reason has to reach a keyboard user, say it in the text
+ * nearby (Guidelines/Button forms).
+ *
+ * **One announcement.** The sentence is the button's *name*, so it must not also be its
+ * *description*. Radix does two things with the text: it points the trigger's `aria-describedby` at
+ * the open bubble, and it renders a `VisuallyHidden role="tooltip"` copy inside it. Chrome's
+ * accessibility tree showed the result as `button name="Remove Ana Ruiz" desc="Remove Ana Ruiz"`
+ * plus an orphan tooltip node — the same words twice. Suppressing only the relation would leave the
+ * copy referenced by nothing and still read, so the relation is suppressed **and** the bubble is
+ * `aria-hidden`: it is a picture of the name, drawn for the people who can see it. WAI-ARIA APG: a
+ * tooltip that supplies the name labels; it does not also describe.
+ *
+ * **The component's own attributes win.** `aria-label`, `aria-describedby`, `type` and the variant
+ * are applied *after* your props are spread, so a caller's `aria-label` cannot quietly replace the
+ * label the tooltip is showing. An `Omit` would not have done this: TypeScript exempts hyphenated
+ * JSX attributes from excess-property checking, so every `aria-*` entry in an `Omit` is inert and
+ * the ordering is the only real guard.
+ *
+ * Its sibling is {@link RemovableChip}, whose ✕ deliberately does *not* redden — see there.
+ */
+declare const RemoveButton: React$1.ForwardRefExoticComponent<RemoveButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * A role a grant can name, as this control takes one. Roles are data rather than a fixed ladder,
+ * because a console that lets an admin define a role has no enum to type against.
+ */
+interface GrantRole {
+    id: string;
+    name: string;
+    /** The line under the name in the menu: what choosing it does. */
+    hint?: string;
+    /**
+     * Where this role sits on the power ladder. Drawn as monochrome weight and nothing else — colour
+     * marks an action, never a state (Guidelines/Look/Colour marks actions). Defaults to `normal`.
+     */
+    weight?: 'faint' | 'normal' | 'strong';
+    /** The band this role is listed under. Roles with no band are listed first, unbanded. */
+    group?: string;
+}
+/**
+ * How a role name is drawn, wherever one is drawn: the trigger, the rungs in the menu, and the
+ * stated role on a `GrantRow` that offers no picker. One recipe, because a reader compares role
+ * names down a card and a shape that dropped the ladder would rank them by which control happened
+ * to draw them. Literal strings, so the scanner sees every step.
+ */
+declare const WEIGHT_TONE: Record<NonNullable<GrantRole['weight']>, string>;
+/** A value naming no role is a broken grant needing attention, so it reads noticeably rather than
+ *  quietly — never the faint tone, which is what "reads everything, changes nothing" looks like. */
+declare const MISSING_TONE = "italic text-text-primary";
+/**
+ * The removal's sentence: the words the control shows, then the caller's detail. One function
+ * because `GrantRow` puts the same act on a trailing ✕ in its other shapes, and because a control
+ * whose accessible name does not contain the words on screen cannot be fired by speech control
+ * (WCAG 2.5.3) — which holds here by construction rather than by every caller remembering to write
+ * the right opening.
+ */
+declare const grantRemoveLabel: (detail: string | undefined, notInForce: boolean) => string;
+/**
+ * The lines the menu states in place of a choice it cannot offer. The component decides which one
+ * applies, because only it knows what it drew; the words are the caller's, because only the caller
+ * knows what its roles are called and why its cap is where it is.
+ *
+ * Each is an imposed state and owes its reason on the spot, in one line
+ * (Guidelines/Controls/State with a reason).
+ */
+interface GrantRoleNotes {
+    /** Nothing to pick, no group to name and nothing to clear. Without it the menu opens on a box. */
+    empty?: React$1.ReactNode;
+    /** The role in force is one `allow` excludes, so it is on the trigger and not in the list. */
+    aboveCap?: React$1.ReactNode;
+    /** `value` names no role in `roles` — a grant left pointing at one that was deleted. */
+    missing?: React$1.ReactNode;
+}
+interface GrantRolePickerProps {
+    /** The role in force. It displays even when `allow` excludes it. */
+    value: string;
+    roles: GrantRole[];
+    onChange: (id: string) => void;
+    /** The row this control answers for. The role in force is appended, so the name a screen reader
+     *  hears out of the row's context says both what is being set and what it is set to. */
+    ariaLabel?: string;
+    align?: 'start' | 'end';
+    /**
+     * Caps what may be picked. The current value still displays on the trigger even outside the cap,
+     * so a capped grant can only be changed down rather than being silently re-pointed.
+     */
+    allow?: (r: GrantRole) => boolean;
+    /**
+     * The group whose grant is the one standing. Present means no rungs at all: a group's grant wins
+     * outright, so no rung on this row would change anything, and the menu names the group instead
+     * (Guidelines/Controls/Stated, not picked).
+     */
+    via?: string;
+    /** A direct grant the group's grant overtook: the role id, struck through, with the caller's
+     *  reason beside it. */
+    notInForce?: {
+        role: string;
+        why: string;
+    };
+    /** The row's removal, as a menu item rather than a trailing ✕, so the row ends in one control
+     *  whatever state it is in. Absent where there is nothing to clear. */
+    onRemove?: () => void;
+    /**
+     * What the removal's sentence says *after* its visible words — `"Acme Store"`, or
+     * `"the direct grant on Acme Store, which is not in force. Ana keeps Admin via Engineers"` minus
+     * its opening. This component owns the opening, because which words the item shows depends on
+     * `notInForce` and only the component knows that: handed the whole sentence, a caller has to
+     * guess which opening to write, and a name that does not contain its own visible label is a
+     * control a speech-control user cannot fire (WCAG 2.5.3).
+     */
+    removeDetail?: string;
+    /** The reader may not pick here. */
+    readOnly?: boolean;
+    /** What the menu says where it has no choice to offer. Owed by any caller that can reach one of
+     *  those states. */
+    notes?: GrantRoleNotes;
+    /** What the trigger shows when `value` names no role in `roles`. */
+    missingLabel?: string;
+    className?: string;
+}
+/**
+ * The one control a grant row ends in: it states the role, and everything there is to do or to know
+ * about that role is behind it.
+ *
+ * It is a picker wherever the reader can choose, and a menu that **explains rather than offers**
+ * where there is nothing to choose. Four things can be in it, and at least one of them always is:
+ * the group carrying the row (`via`), the rungs, the direct grant that group overtook
+ * (`notInForce`), and the row's removal (`onRemove`). Where it has no choice to offer it says why,
+ * through `notes`, and the trigger drops its chevron — that mark means "there is something to pick
+ * here" (Guidelines/Controls/Stated, not picked), so a menu that only explains must not wear it.
+ *
+ * It is not a `Select`. A select answers with one of its options; this one can also take the thing
+ * it describes away, and a command sitting among options is neither a listbox nor a set of radios.
+ * So it is a menu, and the removal is a menu item (Guidelines/Controls/When it isn't a Button),
+ * which reddens under the pointer or the keyboard and drops the red frame a destructive `Button`
+ * rests on, because a row repeated down a menu would shout (Guidelines/Controls/Destructive
+ * actions).
+ */
+declare const GrantRolePicker: React$1.ForwardRefExoticComponent<GrantRolePickerProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+/** What every shape of the row takes. The three that differ are split below. */
+interface GrantRowBase {
+    /** What the grant is on — a product, a workspace, whatever the row lists. */
+    name: string;
+    /** The role in force, by id. */
+    role: string;
+    roles: GrantRole[];
+    /** Absent = nothing here to remove, so no remove control. */
+    onRemove?: () => void;
+    /** What the picker's trigger is named after, where the row draws one. Defaults to `name`, which
+     *  is the row the trigger belongs to — pass this only to say it some other way. */
+    ariaLabel?: string;
+    /**
+     * What the removal's sentence says *after* the words the control shows. The row owns the opening
+     * — `"Remove"`, or `"Remove the direct grant"` where a group's grant overtook one — so the ✕ and
+     * the menu item word one act one way, and the menu item's name contains its own visible label
+     * (WCAG 2.5.3). Defaults to `name`.
+     */
+    removeDetail?: string;
+    /** The group this row's standing role comes from, `''` when the direct grant stands. */
+    via?: string;
+    /** A direct grant the group's grant overtook: the role id and the reason it does nothing. */
+    notInForce?: {
+        role: string;
+        why: string;
+    };
+    /** The reader may not manage this row: the role is stated and the controls go with it. Implies
+     *  `stated`. */
+    readOnly?: boolean;
+    /** Caps which roles the picker offers. The role in force still displays. */
+    allow?: (r: GrantRole) => boolean;
+    /** What the menu says where it has no choice to offer. */
+    notes?: GrantRoleNotes;
+    /** What a role naming nothing in `roles` reads as. */
+    missingLabel?: string;
+    className?: string;
+}
+/**
+ * The row ends in the role control and everything it can do is inside it. The three props below are
+ * `never` rather than ignored: under one control there is no second column to hold open, so a
+ * reservation lines up against nothing, and `stated` names a shape this one already derives from
+ * `via` — passing either used to compile and do nothing.
+ */
+interface GrantRowOneControl extends GrantRowBase {
+    actionsInMenu: true;
+    /** This shape always draws the picker, so it always has somewhere to send the change. */
+    onChange: (id: string) => void;
+    stated?: never;
+    reserveRemove?: never;
+    reserveChevron?: never;
+}
+/** The role control sits beside the row's other trailing marks, or the role is stated in its place. */
+interface GrantRowControlsBeside extends GrantRowBase {
+    actionsInMenu?: false;
+    /** Absent = nothing here to change, so the role is stated rather than picked. */
+    onChange?: (id: string) => void;
+    /** The role is stated, not picked — a group carries this row and its role is not this row's to
+     *  change (Guidelines/Controls/Stated, not picked). */
+    stated?: boolean;
+    /** This row carries no ✕, but a sibling row does — hold the width, so the card reads as one right
+     *  edge rather than two. */
+    reserveRemove?: boolean;
+    /** This row states its role, but a sibling row picks one — hold the picker's chevron, for the same
+     *  reason. */
+    reserveChevron?: boolean;
+}
+type GrantRowProps = GrantRowOneControl | GrantRowControlsBeside;
+/**
+ * One grant, as a row: what it is on, the role it confers, and the way to change or clear it.
+ *
+ * The three shapes it takes are three answers to one question — whose the role is and whether the
+ * reader may act on it.
+ *
+ * * **Picked** is the default: the role is this row's to set, and a ✕ beside it clears the grant.
+ * * **Stated** (`stated`, `readOnly` which implies it, or no `onChange` at all) prints the role
+ *   instead of offering it, with `via` and `notInForce` under it. A group's grant wins outright, so
+ *   a row a group carries has nothing on it to choose; `readOnly` answers the different question of
+ *   whether the *reader* may act, and a carried row can still carry the ✕ that clears a direct
+ *   grant sitting under the group's.
+ * * **One control** (`actionsInMenu`) ends the row at the role control and puts the group, the
+ *   overtaken grant and the removal inside it. Every row is then one line tall and none holds a
+ *   column open against a control a sibling might have — which is why `reserveRemove` and
+ *   `reserveChevron` belong to the other two shapes and not to this one.
+ */
+declare const GrantRow: React$1.ForwardRefExoticComponent<GrantRowProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface RemovableChipProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The name on the chip. Also the thing the ✕ says it removes, so the two cannot drift. */
+    label: string;
+    /** Required. A chip you cannot unpick is a `Badge`. */
+    onRemove: React$1.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * The avatar or glyph. Consumer-owned on purpose: the chip needn't know a person from a group
+     * from an agent — the frame and the ✕ are the same either way, and the mark that says which is a
+     * decision the consuming console already made elsewhere.
+     */
+    leading?: React$1.ReactNode;
+    /** Replaces the generated `Remove {label}` accessible name, for a console that isn't English. */
+    removeLabel?: string;
+}
+/**
+ * A principal you have **picked but not yet saved** — the chips that fill the recipient field of an
+ * invite dialog or the member field of a new group — with a ✕ to unpick them.
+ *
+ * **Why it is not a `Badge`.** `Badge` renders nearly the same pixels and is a label: there is
+ * nothing in it to click. This carries a control, and everything below follows from that.
+ *
+ * **The ✕ stays grey on hover, and that is the point.** Every other remove in this console wears its
+ * danger — `Button variant="destructive"` rests on a red frame and reddens under the pointer, which
+ * is how a revoke or a teardown announces what it costs (Guidelines/Destructive actions). This one does
+ * not, because **taking someone out of a draft has not done anything yet**: nothing is revoked,
+ * nothing is saved, and the only state it changes is a list you are still assembling. Red here
+ * would charge the price of a destructive act for editing a field. It is `variant="ghost"` for that
+ * reason and not by omission — if you are here to make it consistent with the other removes,
+ * that consistency is the bug.
+ *
+ * **It needs no `TooltipProvider`.** Its ✕ sits beside the name that says what it removes, and
+ * Guidelines/Icons & tooltips is explicit that an icon already next to its own label gets no
+ * tooltip. So unlike {@link RemoveButton}, this renders anywhere — including a dialog a consumer
+ * mounted outside an `AppShell`.
+ *
+ * **The frame is the chip; the fill is a plane.** `bg-bg-sunken` is the one surface token that sits
+ * *below* the ground in both themes, so a chip reads as recessed on a page (`bg-bg-primary`) and
+ * inside a dialog (`bg-bg-elevated`) alike — where `bg-bg-secondary`, the obvious choice, is within
+ * 1.01:1 of a light dialog and disappears. The ✕'s hover plate then has to move up with it, which
+ * is the one class this component sets on the kit `Button` (see the note at the call below).
+ *
+ * **Long names truncate rather than overflow.** The chip caps at its container's width and the
+ * label truncates inside it; wrapping a row of them is the call site's job (`flex flex-wrap
+ * gap-2`).
+ */
+declare const RemovableChip: React$1.ForwardRefExoticComponent<RemovableChipProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+/** True when the viewport is narrower than the `md` breakpoint (768px). SSR-safe. */
+declare function useIsMobile(): boolean;
+
+interface UseSidebarOptions {
+    /** Controlled collapsed value. When provided, the hook does not own state. */
+    collapsed?: boolean;
+    /** Initial collapsed value in uncontrolled mode. Default false (expanded). */
+    defaultCollapsed?: boolean;
+    /** Called whenever the collapsed value should change (both modes). */
+    onCollapsedChange?: (collapsed: boolean) => void;
+}
+interface UseSidebarResult {
+    collapsed: boolean;
+    setCollapsed: (collapsed: boolean) => void;
+    toggle: () => void;
+}
+/**
+ * Controllable sidebar collapse state. Controlled when `collapsed` is passed,
+ * otherwise internal state seeded by `defaultCollapsed`. Pure — no persistence
+ * or context; the host app owns persistence.
+ */
+declare function useSidebar(options?: UseSidebarOptions): UseSidebarResult;
+
+/** `rail` is the sidebar, `menu` a popup surface, `card` a settings line inside a `Card`. */
+type NavRowVariant = 'rail' | 'menu' | 'card';
+interface NavRowOwnProps {
+    /** Leading glyph. Rendered in a fixed 20px box with SVGs normalized to 18px — 16px and 16px on
+     *  `card`, where the row sits beside body text rather than in a rail.
+     *  A falsy value (`null`/`false`/`0`/`''`) renders nothing — there is no reserved
+     *  empty slot, so the row's content shifts left when `icon` is falsy. */
+    icon?: React$1.ReactNode;
+    label: string;
+    /** A second line under `label`, in the same column: the source a row is fed from, the owner
+     *  behind a setting — the fact that would otherwise be crammed into the label or dropped.
+     *  `card` only; `rail` and `menu` are one line and ignore it.
+     *
+     *  Dropped at render time rather than refused at the type level, unlike `children` below.
+     *  Refusing it means discriminating `NavRowProps` on `variant`, and that stops
+     *  `<NavRow variant={v} />` compiling for anyone who types `v` as the exported
+     *  `NavRowVariant` — the ordinary shape of a rendered nav array. A prop that is quietly
+     *  ignored costs less than a variant that cannot be held in a variable. */
+    sub?: React$1.ReactNode;
+    /** Marks the row as the current destination. `card` has no selected form — a settings line is
+     *  never where you are — so it reads the same either way. */
+    active?: boolean;
+    variant: NavRowVariant;
+    /** Right-aligned adornment: chevron, checkmark, action. Keeps its own size.
      *  A falsy value (`null`/`false`/`0`/`''`) renders nothing — e.g. passing
      *  `trailing={count}` with `count === 0` produces no adornment, not a "0". */
     trailing?: React$1.ReactNode;
+    /** The trailing value is an absence ("None yet") — a step quieter. */
+    mutedTrailing?: boolean;
     /** Icon-only row (collapsed rails). `label` becomes the aria-label. */
     hideLabel?: boolean;
 }
@@ -805,9 +2343,13 @@ type NavRowProps = NavRowOwnProps & Omit<React$1.ComponentPropsWithoutRef<'butto
     asChild?: false;
     children?: never;
 });
-/** Nav row primitive (rail and menu variants). Composes an icon, label and trailing slot
+/** Nav row primitive (rail, menu and card variants). Composes an icon, label and trailing slot
  *  into a button, or into a single child via `asChild` (e.g. a router `<Link>`).
  *
+ *  The `card` variant is the settings line that leaves the page for another section — People →
+ *  Members, Security → Identity. It carries no trailing mark and no underline: a section jump is
+ *  not an entity opening as a page, so the hover fill is the whole affordance.
+ *
  *  Rail rows are designed for the `bg-surface` canvas. In the light theme `--hov-bg` is an
  *  opaque `#ffffff` plate, so a rail `NavRow` has no hover contrast on a surface that is
  *  already white — notably a `--menu-bg` plate. Use the `menu` variant there; its
@@ -877,7 +2419,7 @@ interface AppSidebarProps {
      *  `collapsible`. A collapsible rail should supply this (or `logo`): `header` is expanded-only
      *  and is never read while collapsed, so without a mark the collapsed rail shows just the pin. */
     logoCollapsed?: React$1.ReactNode;
-    /** Identity slot above the rail — e.g. a <SidebarProductHeader/>. Falls back to `logo`.
+    /** Identity slot above the rail — e.g. an <OrgProductSwitcher/> (#266). Falls back to `logo`.
      *  Expanded-only: rendering it in the 52px collapsed rail would overflow, so the collapsed
      *  branch never reads it — supply `logoCollapsed` (or `logo`) for that state instead. */
     header?: React$1.ReactNode;
@@ -916,6 +2458,10 @@ type SidebarProductHeaderProps = SidebarProductHeaderOwnProps & Omit<React$1.Com
     children?: never;
 });
 /** Identity row for the sidebar header slot: product tile + name, opening the product menu.
+ *
+ *  @deprecated Use {@link OrgProductSwitcher} for the sidebar header slot (#266). It is the single,
+ *  redesigned org·product switcher and supports both an org-level and an org/product trigger. This
+ *  component is kept for backward compatibility and will be removed in a future major.
  *
  *  Deliberately inert on hover — no background, no transition — unlike the rail rows below
  *  it. `rounded-xl` is not dead weight despite nothing tinting the box: this declares no
@@ -947,14 +2493,17 @@ interface OrgProductSwitcherProps {
     organizations: OrgProductSwitcherItem[];
     activeOrgId: string;
     onOrgSelect: (id: string) => void;
-    /** Products for the ACTIVE org. The consumer re-supplies these when the org changes. */
-    products: OrgProductSwitcherItem[];
-    activeProductId: string;
-    onProductSelect: (id: string) => void;
+    /** Products for the ACTIVE org. The consumer re-supplies these when the org changes. Omit (or
+     *  leave `activeProductId` unset) for an org-level context — the trigger then shows just the org,
+     *  and the menu still lists any products so you can jump into one. */
+    products?: OrgProductSwitcherItem[];
+    activeProductId?: string;
+    onProductSelect?: (id: string) => void;
     /** Footer actions below the products (Create product, Product settings, …). The group and
      *  its divider render only when this is non-empty — the consumer owns which rows appear. */
     actions?: OrgProductSwitcherAction[];
-    /** Accessible name for the trigger. Defaults to `"<org> / <product>"`. */
+    /** Accessible name for the trigger. Defaults to `"<org> / <product>"`, and to whatever the
+     *  trigger reads before an org resolves. */
     'aria-label'?: string;
     className?: string;
 }
@@ -1083,20 +2632,32 @@ declare const Col: React$1.ForwardRefExoticComponent<ColProps & React$1.RefAttri
 /**
  * Dependency-free syntax highlighter for docs/consumer code snippets. A single
  * ordered-alternation regex per language tokenizes the source into typed runs;
- * no prism/shiki. Fidelity is "good enough for short snippets", and the public
- * API is stable so the engine can be swapped later. Generalized from the
- * landing page's local highlighter (ui.lessly.com #62).
+ * no prism/shiki, so nothing ships to a consumer's browser but this file.
+ * Fidelity is "good enough for short snippets", and the public API is stable so
+ * the engine can be swapped later. Generalized from the landing page's local
+ * highlighter (ui.lessly.com #62).
+ *
+ * Rendering is line-based so the block can carry line numbers, a per-line
+ * highlight wash, and the diff/terminal variants — the polish the docs' Shiki
+ * block has, brought here without the build-time dependency (#263).
  */
 type CodeLang = 'tsx' | 'ts' | 'bash' | 'json' | 'css';
+type CodeVariant = 'default' | 'diff' | 'terminal';
 interface CodeBlockProps extends React$1.HTMLAttributes<HTMLPreElement> {
     code: string;
     lang?: CodeLang;
-    /** Show a copy button in the header (frames the block). */
+    /** `default` plain, `diff` tints `+`/`-` lines, `terminal` dims the `$` prompt and drops copy. */
+    variant?: CodeVariant;
+    /** Show a copy control — in the filename header, or as an overlay in the corner when there's none. */
     copy?: boolean;
-    /** Optional filename caption in the header (frames the block). */
+    /** Optional filename caption in a header row above the code. */
     filename?: string;
     /** Scroll long lines instead of wrapping (default: wrap). */
     scroll?: boolean;
+    /** Lines to wash for emphasis, e.g. `"1,3-5"`. */
+    highlightLines?: string;
+    /** Show a line-number gutter. */
+    showLineNumbers?: boolean;
 }
 declare const CodeBlock: React$1.ForwardRefExoticComponent<CodeBlockProps & React$1.RefAttributes<HTMLPreElement>>;
 type CodeProps = React$1.HTMLAttributes<HTMLElement>;
@@ -1111,65 +2672,79 @@ interface GridOverlayProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 declare const GridOverlay: React$1.ForwardRefExoticComponent<GridOverlayProps & React$1.RefAttributes<HTMLDivElement>>;
 
-declare const segmentChipVariants: (props?: ({
-    kind?: "granted" | "own" | "pending" | "available" | null | undefined;
+declare const attachmentChipVariants: (props?: ({
+    state?: "attached" | "requested" | "available" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface SegmentChipProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, 'children' | 'resource'>, VariantProps<typeof segmentChipVariants> {
-    /** The resource this segment points at, e.g. "a GitHub repo", "Ads account 123-456". */
-    resource: React$1.ReactNode;
-    /** Override the leading icon; defaults to a glyph derived from `kind`. */
+type AttachmentState = NonNullable<VariantProps<typeof attachmentChipVariants>['state']>;
+interface AttachmentChipProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, 'children'>, VariantProps<typeof attachmentChipVariants> {
+    /**
+     * The sub-account this attachment points at, in the provider's own words — the attachment's
+     * `customerId` + `descriptiveName`, e.g. "Ads account 762-703-9086, Acme Store EU". Providers
+     * without a sub-account have nothing to name here; render a status `Badge` instead of a chip.
+     */
+    account: React$1.ReactNode;
+    /** Override the leading icon; defaults to a glyph derived from `state`. */
     icon?: LucideIcon;
     /** Hide the leading icon entirely. */
     hideIcon?: boolean;
 }
-declare const SegmentChip: React$1.ForwardRefExoticComponent<SegmentChipProps & React$1.RefAttributes<HTMLSpanElement>>;
+declare const AttachmentChip: React$1.ForwardRefExoticComponent<AttachmentChipProps & React$1.RefAttributes<HTMLSpanElement>>;
 
-type ConnectionScope = 'org' | 'org/product' | 'product';
-type ConnectionAuth = 'app' | 'oauth' | 'token';
-type ConnectionStatus = 'connected' | 'error' | 'disconnected';
-interface ConnectionCardProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /** Display name, e.g. "GitHub — apliteni". */
+/** Who attached the connector to the product this card is shown on. Both sides say *attached*. */
+type ConnectorOrigin = 'org' | 'product';
+/**
+ * `active` is the resting state and shows no badge — almost every connector is active, so a pill on
+ * it states nothing and stacks a column of identical marks down a list (#343). The two states worth
+ * a badge are the ones that stop a product using the account.
+ */
+type ConnectorStatus = 'active' | 'needs-reconnect' | 'not-connected';
+interface ConnectorCardProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The account name — what this connector is linked WITH, never a bare provider name and never a
+     * bare "Connected" (#270). E.g. "GitHub — acme", "Google Ads — ads@acme.com".
+     */
     name: string;
-    scope: ConnectionScope;
-    auth: ConnectionAuth;
-    status: ConnectionStatus;
+    /** What kind of external account this is, in the provider's words: "GitHub organization". */
+    kind?: string;
+    /** Who attached it, on a surface where that is a fact — a product's own list. Omit on the org roster. */
+    origin?: ConnectorOrigin;
+    status: ConnectorStatus;
     /** Provider mark; falls back to a monogram box derived from `name`. */
     glyph?: React$1.ReactNode;
-    /** Override the default status label (e.g. "Token expired" for `error`). */
+    /** Override the status label (e.g. "Authorisation expired" for `needs-reconnect`). */
     statusLabel?: string;
     /**
-     * How many products hold a segment of this connection. `undefined` renders the
-     * "Not granted to any product yet" default — pass it ONLY on a surface where
-     * that claim is true and knowable (the org roster); on a product surface pass
-     * neither `grantedCount` nor a footer `action` to render no footer at all.
+     * How many products this connector is attached to. `undefined` renders the "Not attached to any
+     * product yet" default — pass it ONLY on a surface where that claim is true and knowable (the org
+     * roster); on a product surface pass neither `attachedCount` nor a footer `action` to render no
+     * footer at all.
      */
-    grantedCount?: number;
+    attachedCount?: number;
     /**
      * Footer action — typically a <Button> ("Manage", "Reconnect", "Connect").
-     * Flat mode: a disconnected card shows it in the header. Collapsible mode: the
-     * header is a disclosure trigger (nesting a button would be invalid), so the
-     * action always renders in the expanded footer instead.
+     * Flat mode: a not-connected card shows it in the header. Collapsible mode: the header is a
+     * disclosure trigger (nesting a button would be invalid), so the action always renders in the
+     * expanded footer instead.
      */
     action?: React$1.ReactNode;
     /**
-     * Blast-radius disclosure. Some providers (GitHub, ClickUp) grant all-or-nothing
-     * access to the whole external org — there is no per-repo/per-space permission,
-     * and the vended credential genuinely reaches the whole external org. Copy passed
-     * here must state that blast radius honestly (e.g. "Full org access — any product
-     * granted this connection can reach every repository"); do NOT claim the segment
-     * is enforced by Lessly — for these providers it is not.
+     * Blast-radius disclosure. Some providers (GitHub, ClickUp) hand out all-or-nothing access to the
+     * whole external org — there is no per-repo/per-space permission, and the vended credential
+     * genuinely reaches everything. Copy passed here must state that blast radius honestly (e.g.
+     * "Full org access — any product this connector is attached to can reach every repository"); do
+     * NOT claim Lessly narrows it, because for these providers it does not.
      */
     access?: React$1.ReactNode;
     /**
-     * Drawer content rendered below the card body — the per-product grants roster,
-     * inline requests, "+ Grant to a product". Flat mode: the caller owns visibility,
-     * pass children only while open (unchanged behavior). Collapsible mode: pass
-     * children unconditionally — the card shows them while expanded.
+     * Drawer content rendered below the card body — the per-product attachment roster, inline
+     * requests, "+ Attach to a product". Flat mode: the caller owns visibility, pass children only
+     * while open. Collapsible mode: pass children unconditionally — the card shows them while
+     * expanded.
      */
     children?: React$1.ReactNode;
     /**
-     * Disclosure mode: the header row toggles the card open/closed; the access
-     * notice, footer, and drawer render only while open. Collapsed by default.
+     * Disclosure mode: the header row toggles the card open/closed; the access notice, footer, and
+     * drawer render only while open. Collapsed by default.
      */
     collapsible?: boolean;
     /** Uncontrolled initial state (collapsible mode). Default: false (collapsed). */
@@ -1178,10 +2753,18 @@ interface ConnectionCardProps extends React$1.HTMLAttributes<HTMLDivElement> {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
 }
-declare const ConnectionCard: React$1.ForwardRefExoticComponent<ConnectionCardProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const ConnectorCard: React$1.ForwardRefExoticComponent<ConnectorCardProps & React$1.RefAttributes<HTMLDivElement>>;
 
 type RequestSurface = 'org' | 'product';
-type RequestState = 'available' | 'pending' | 'granted';
+/**
+ * Where this product stands with one connector: the org holds it and this product has not asked
+ * (`available`), it has asked (`pending`), an admin said no (`denied`), or it is attached and in use
+ * (`attached`).
+ *
+ * `sent` is the other end of the same handshake — a request this side made, waiting on someone
+ * else's answer. It is the sender's own row, so the only thing it can do is take the request back.
+ */
+type RequestState = 'available' | 'pending' | 'denied' | 'attached' | 'sent';
 interface RequestRowProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'children'> {
     surface: RequestSurface;
     /** Provider display name, e.g. "Google Ads". */
@@ -1189,16 +2772,22 @@ interface RequestRowProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, '
     state: RequestState;
     /** Provider mark; falls back to a monogram box derived from `name`. */
     glyph?: React$1.ReactNode;
-    /** Secondary line — requester + resource (org), or availability (product). */
+    /** Secondary line — requester + account (org), or where the connector stands (product). */
     subtitle?: React$1.ReactNode;
-    /** The granted resource label; renders a <SegmentChip> when `state` is `granted`. */
-    grantedResource?: React$1.ReactNode;
+    /**
+     * The sub-account the attachment points at — the attachment's `customerId` + `descriptiveName`,
+     * e.g. "Ads account 762-703-9086, Acme Store EU". Renders an <AttachmentChip> when `state` is
+     * `attached`; providers without a sub-account leave it unset and get an "In use" status badge.
+     */
+    account?: React$1.ReactNode;
     /** Approve an org-side request. */
     onApprove?: () => void;
     /** Deny an org-side request. */
     onDeny?: () => void;
-    /** Request an available connection from the product side. */
+    /** Request a connector the organization holds, from the product side. */
     onRequest?: () => void;
+    /** Withdraw a request this side sent. Drawn for `state: 'sent'`, on either surface. */
+    onRevoke?: () => void;
     /** Override the trailing controls entirely. */
     action?: React$1.ReactNode;
 }
@@ -1237,60 +2826,10 @@ interface FeedbackButtonProps {
 }
 declare function FeedbackButton({ onSubmit, labels, className }: FeedbackButtonProps): React$1.JSX.Element;
 
-interface CreateProductWindowOrganization {
-    id: string;
-    name: string;
-}
-interface CreateProductWindowProduct {
-    id: string;
-    name: string;
-    slug: string;
-}
-type CreateProductSubmit = {
-    name: string;
-    organizationId: string;
-}
-/** @deprecated Emitted only by the deprecated create-new-org mode — see
- *  `CreateProductWindowProps.selectedOrgId`. Use `OrganizationCreateScreen` instead. */
- | {
-    name: string;
-    organizationName: string;
-};
-interface CreateProductWindowProps {
-    organizations: CreateProductWindowOrganization[];
-    /**
-     * null => create-new-org mode.
-     *
-     * @deprecated The create-new-org mode is deprecated. Organization creation now goes
-     * through `OrganizationCreateScreen`, which collects the legal details the API needs
-     * (legal name, country of incorporation, beneficial owners) — this window only ever
-     * sends a bare `organizationName`. Pass a real org id and let the onboarding screens
-     * handle the org-first flow. Selecting an existing org here is unaffected.
-     */
-    selectedOrgId: string | null;
-    /** products of the selected org */
-    products: CreateProductWindowProduct[];
-    productsLoading?: boolean;
-    submitting?: boolean;
-    error?: string | null;
-    /** null when "+ Create new organization" chosen */
-    onOrganizationChange: (orgId: string | null) => void;
-    onEnterProduct: (product: CreateProductWindowProduct) => void;
-    onSubmit: (data: CreateProductSubmit) => void;
-}
-/**
- * The legacy first-run window: pick an organization and name a product, in one panel.
- *
- * Still supported for picking an existing organization. Its **create-new-org mode**
- * (`selectedOrgId: null`, or an empty `organizations` list) is deprecated — org creation
- * now goes through `OrganizationCreateScreen`, followed by `ProductCreateScreen`.
- */
-declare function CreateProductWindow({ organizations, selectedOrgId, products, productsLoading, submitting, error, onOrganizationChange, onEnterProduct, onSubmit, }: CreateProductWindowProps): React$1.JSX.Element;
-
 /** FYI / Important / Critical — the one severity vocabulary. */
 type NotificationSeverity = 'critical' | 'important' | 'fyi';
 /**
- * How the item behaves, not how loud it is. `informational` settles when read,
+ * How the item behaves, not how loud it is. `informational` is a statement,
  * `actionable` waits on a decision, `ephemeral` is ambient progress and never
  * settles.
  */
@@ -1310,7 +2849,14 @@ interface NotificationAction {
      */
     variant?: 'primary' | 'destructive' | 'link';
 }
-/** A durable destination. Survives into the archive after the row settles. */
+/**
+ * A durable destination. Survives into the archive after the row settles.
+ *
+ * `href` makes the control an anchor, so middle-click, open-in-new-tab and the
+ * status-bar target come with it, and the surface's click handler fires beside it
+ * rather than instead of it — the same contract `OrgProductSwitcherAction` and
+ * `UserMenu` hold. Without an `href` the handler is the only thing that happens.
+ */
 interface NotificationDeepLink {
     label: string;
     href?: string;
@@ -1324,10 +2870,15 @@ interface NotificationItem {
     body?: string;
     /** Default `informational`. */
     cls?: NotificationClass;
+    /**
+     * You have seen it. Independent of the receipt: a read row quietens and drops
+     * its own mark-read control, and keeps every action it came with.
+     */
     read?: boolean;
     /**
      * The receipt for a handled item, e.g. "Approved by artur". Its presence is
-     * what makes a row settled: the row dims and one-time actions drop off.
+     * what makes a row settled: the row quietens further and one-time actions drop
+     * off.
      */
     receipt?: string;
     createdAt?: string | Date;
@@ -1370,12 +2921,17 @@ declare const TOAST_DWELL: NotificationToastDwell;
  * Reads a stamp as a relative age. `now` is injectable so the components stay
  * testable and consumers can substitute an absolute or localized formatter; the
  * default reads the clock once during render, which is not a timer.
+ *
+ * Relative up to a week, then the date. Past that "how long ago" stops being the
+ * question a reader is asking, and a running count answers it with a number that
+ * only ever grows.
  */
 declare function formatRelativeAge(createdAt: string | Date, now?: Date): string;
 /**
- * A settled item is one that has been dealt with: it dims, keeps its deep link
- * and drops its one-time actions. Ephemeral items are ambient progress — they
- * are never "handled", so they never settle.
+ * A settled item is one that has been dealt with: it quietens, keeps its deep link
+ * and drops its one-time actions. The receipt is what says so — seeing an item is
+ * not handling it, so a read row is still a row you can act on. Ephemeral items are
+ * ambient progress and are never handled, so they never settle.
  */
 declare function isNotificationSettled(item: NotificationItem): boolean;
 
@@ -1397,6 +2953,17 @@ interface NotificationBellProps {
     onOpenSettings?(): void;
     /** Footer link. Rendered only when supplied and there is at least one item. */
     onOpenArchive?(): void;
+    /**
+     * A node at the foot of the panel, above the archive row and outside the region
+     * the rows scroll in, so it stays reachable whatever the list is doing. Absent by
+     * default; muted to match the archive row unless your node says otherwise.
+     *
+     * It composes with `onOpenArchive` rather than replacing it — supply either or
+     * both. What it is for is a fact about the list that is not one of its rows: a
+     * count the panel's own scope excludes, for one, which otherwise has to be
+     * smuggled in as a synthetic `items` entry that the row semantics then apply to.
+     */
+    footer?: React$1.ReactNode;
     open?: boolean;
     onOpenChange?(open: boolean): void;
     /** Override the default relative-age label. */
@@ -1430,6 +2997,26 @@ interface NotificationCenterProps {
 }
 declare const NotificationCenter: React$1.ForwardRefExoticComponent<NotificationCenterProps & React$1.RefAttributes<HTMLDivElement>>;
 
+interface NotificationRowProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    item: NotificationItem;
+    onItemClick?(item: NotificationItem): void;
+    onActionClick?(item: NotificationItem, action: NotificationAction): void;
+    /**
+     * Marks the item read. Supplying it puts a quiet check control on the row when
+     * the item is not read and not ephemeral.
+     */
+    onMarkRead?(id: string): void;
+    /** Override the default relative-age label. */
+    formatAge?(createdAt: Date): string;
+    /**
+     * The card rests on `bg-bg-surface`, which assumes an elevated parent — it is the
+     * step the bell's panel gives it. On a page, whose ground is `bg-bg-primary`, that
+     * step inverts sign: pass `bg-bg-elevated` to keep the row reading as raised.
+     */
+    className?: string;
+}
+declare const NotificationRow: React$1.ForwardRefExoticComponent<NotificationRowProps & React$1.RefAttributes<HTMLDivElement>>;
+
 interface NotificationSettingsProps {
     subscriptions: NotificationSubscription[];
     /** Keyed by product id, plus the required `default` key. */
@@ -1452,6 +3039,19 @@ interface NotificationToastProps {
     showSource?: boolean;
     /** A short state line under the body, e.g. "Awaiting your decision — expires in 20s." */
     note?: React$1.ReactNode;
+    /** The card's own controls: mute the source, turn its pushes off. Sits before the dismiss ✕. */
+    overflow?: React$1.ReactNode;
+    /** Ambient progress, 0 to 100. An ephemeral card is never handled, so it carries no actions.
+     *  Out of range is clamped, and a non-finite number counts as no progress at all — `done / total`
+     *  with `total === 0` draws no bar rather than a full one. */
+    progress?: number;
+    /**
+     * The line under the bar. A slot, not a string, because the bar is the component's
+     * and the wording is the consumer's — theirs is the run that knows whether it is
+     * counting steps, bytes or minutes, and theirs is the language it is read in.
+     * Defaults to `"live, n%"`; pass `null` for a bar with no line at all.
+     */
+    progressLabel?: React$1.ReactNode;
     onItemClick?(item: NotificationItem): void;
     onAction?(action: NotificationAction, item: NotificationItem): void;
     onDismiss?(item: NotificationItem): void;
@@ -1478,6 +3078,21 @@ interface NotificationToasterProps {
     onAction?(action: NotificationAction, item: NotificationItem): void;
     /** Per-item state line, e.g. a TTL countdown the consumer already tracks. */
     renderNote?(item: NotificationItem): React$1.ReactNode;
+    /** Per-item card controls — a source menu beside the dismiss ✕. */
+    renderOverflow?(item: NotificationItem): React$1.ReactNode;
+    /**
+     * Per-item ambient progress, 0 to 100. Read here rather than carried on the item
+     * because it moves while the card is on screen, where `NotificationItem` is stable
+     * data the bell and the centre read too — and neither of those draws a bar.
+     */
+    progressOf?(item: NotificationItem): number | undefined;
+    /**
+     * Per-item wording for the line under the bar. Unlike `renderNote`, whose `undefined` means
+     * no note, `undefined` here means *take the card's default* `"live, n%"` — there is no way to
+     * tell "this hook has no opinion about this item" apart from "this item wants no line". Return
+     * `null` for a bar with no line at all.
+     */
+    renderProgressLabel?(item: NotificationItem): React$1.ReactNode;
     className?: string;
 }
 declare const NotificationToaster: React$1.ForwardRefExoticComponent<NotificationToasterProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -1490,98 +3105,6 @@ declare const NotificationToaster: React$1.ForwardRefExoticComponent<Notificatio
  */
 declare const COUNTRY_OPTIONS: SelectOption[];
 
-interface BetaGateScreenProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'title' | 'onSubmit'> {
-    /** Fires with the trimmed code. The screen never checks it — the caller does. */
-    onSubmit: (code: string) => void;
-    defaultCode?: string;
-    /** Fires with the raw field value on every keystroke — the seam a caller uses to clear
-     *  its own `error` as the user starts correcting the code. */
-    onCodeChange?: (code: string) => void;
-    /** Focuses the access-code field on mount. On by default: the screen is one field, so
-     *  that is where the caret belongs. Pass `false` to leave the focus alone. */
-    autoFocus?: boolean;
-    /** Disables the submit button and swaps its label while the caller's check is in flight. */
-    submitting?: boolean;
-    /** Rendered as an alert above the field — typically a rejected code. */
-    error?: string | null;
-    /** Social sign-in buttons, rendered above an "or" divider. Without it there is no divider. */
-    socialAuth?: React$1.ReactNode;
-    /** Target of the waitlist link in the default description. */
-    waitlistHref?: string;
-    /** Renders "Already have an account? Sign in" as a link. */
-    signInHref?: string;
-    /** Renders the same affordance as a button. Ignored when `signInHref` is given. */
-    onSignIn?: () => void;
-    submitLabel?: React$1.ReactNode;
-    /** Brand mark above the headline. */
-    logo?: React$1.ReactNode;
-    /** Rendered top-right. Defaults to the kit's own `ThemeToggle`; pass your own node to
-     *  replace it, or `null` to drop it. */
-    themeToggle?: React$1.ReactNode;
-    /** Pass `null` to render no page heading — same meaning as on `SignupScreen`. */
-    title?: React$1.ReactNode;
-    description?: React$1.ReactNode;
-    /** Muted footer signature. Absent by default; pass a node to render one. */
-    footer?: React$1.ReactNode;
-}
-/**
- * The gate in front of registration while the product is in closed beta: a single access
- * code, optionally preceded by social sign-in. Presentational and self-contained — it never
- * validates the code, never calls an API and never navigates; the caller handles the
- * outcome of `onSubmit`.
- */
-declare function BetaGateScreen({ onSubmit, defaultCode, onCodeChange, autoFocus, submitting, error, socialAuth, waitlistHref, signInHref, onSignIn, submitLabel, logo, themeToggle, title, description, footer, ...props }: BetaGateScreenProps): React$1.JSX.Element;
-
-/** The submit payload — what a registration endpoint takes, minus anything the caller owns
- *  (the beta code, the invite, the return URL). */
-interface SignupScreenSubmit {
-    name: string;
-    email: string;
-    password: string;
-}
-interface SignupScreenProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'title' | 'onSubmit'> {
-    onSubmit: (payload: SignupScreenSubmit) => void;
-    defaultValues?: Partial<SignupScreenSubmit>;
-    /** Disables the submit button and swaps its label while the caller's request is in flight. */
-    submitting?: boolean;
-    serverError?: string | null;
-    /** Field-level messages returned alongside a server error. */
-    violations?: string[];
-    /** Social sign-in buttons, rendered above an "or continue with email" divider. Not shown
-     *  when `children` take over the body. */
-    socialAuth?: React$1.ReactNode;
-    /** Renders "Use a different code" under the form — the way back to the beta gate. */
-    onEditCode?: () => void;
-    /** Renders "Already have an account? Sign in" as a link. */
-    signInHref?: string;
-    /** Renders the same affordance as a button. Ignored when `signInHref` is given. */
-    onSignIn?: () => void;
-    submitLabel?: React$1.ReactNode;
-    /**
-     * Replaces the whole body — social auth, divider, register form and all. This is the seam
-     * the consumer uses to host steps the kit deliberately does not know about (MFA challenge,
-     * TOTP enrolment) inside the same window.
-     */
-    children?: React$1.ReactNode;
-    /** Brand mark above the headline. */
-    logo?: React$1.ReactNode;
-    /** Rendered top-right. Defaults to the kit's own `ThemeToggle`; pass your own node to
-     *  replace it, or `null` to drop it. */
-    themeToggle?: React$1.ReactNode;
-    /** Pass `null` to render no page heading — for a body (MFA steps) that brings its own. */
-    title?: React$1.ReactNode;
-    description?: React$1.ReactNode;
-    /** Muted footer signature. Absent by default; pass a node to render one. */
-    footer?: React$1.ReactNode;
-}
-/**
- * The registration window: social sign-in, then name / email / password. Presentational and
- * self-contained — it never calls an API and never navigates; the caller handles the outcome
- * of `onSubmit`. Password rules are checked here because they are the same rules the
- * registration endpoint enforces, and failing them client-side saves a round trip.
- */
-declare function SignupScreen({ onSubmit, defaultValues, submitting, serverError, violations, socialAuth, onEditCode, signInHref, onSignIn, submitLabel, children, logo, themeToggle, title, description, footer, ...props }: SignupScreenProps): React$1.JSX.Element;
-
 /** One beneficial owner, in the shape the organization API takes it. */
 interface BeneficialOwnerPayload {
     name: string;
@@ -1633,137 +3156,200 @@ interface OrganizationOnboardingFormProps {
  */
 declare function OrganizationOnboardingForm({ requireSanctionsFields, onSubmit, defaultValues, submitting, serverError, violations, countries, submitLabel, onCancel, className, }: OrganizationOnboardingFormProps): React$1.JSX.Element;
 
-interface OrganizationCreateScreenProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'title' | 'onSubmit'> {
-    /** Makes the country of incorporation — and the ownership confirmation, where it is
-     *  shown — mandatory. Mirrors the server-side requirement the consumer runs under. */
-    requireSanctionsFields: boolean;
-    onSubmit: (payload: OrganizationOnboardingPayload) => void;
-    defaultValues?: OrganizationOnboardingDefaults;
-    /** Disables the submit button and swaps its label while the caller's request is in flight. */
-    submitting?: boolean;
-    serverError?: string | null;
-    /** Field-level messages returned alongside a server error. */
-    violations?: string[];
-    /** Defaults to the built-in ISO 3166-1 alpha-2 list. */
-    countries?: SelectOption[];
-    submitLabel?: string;
-    /** Renders a Cancel button in the form when provided. */
-    onCancel?: () => void;
-    /** Brand mark above the headline. */
-    logo?: React$1.ReactNode;
-    /** Rendered top-right. Defaults to the kit's own `ThemeToggle`; pass your own node to
-     *  replace it, or `null` to drop it. */
-    themeToggle?: React$1.ReactNode;
-    title?: React$1.ReactNode;
-    description?: React$1.ReactNode;
-    /** Muted footer signature. Absent by default; pass a node to render one. */
-    footer?: React$1.ReactNode;
+/**
+ * The width steps a trailing cell may take, as literal classes. A width is picked from this map and
+ * never assembled — `` `w-${n}` `` is a string Tailwind's scanner never sees, so the class would
+ * never be generated and the cell would size to its content instead.
+ */
+declare const CELL_WIDTH: {
+    readonly 20: "w-20";
+    readonly 24: "w-24";
+    readonly 28: "w-28";
+    readonly 32: "w-32";
+};
+/** 5rem to 8rem: a date, a relative time, a short phrase like "Renews itself". */
+type ListColumnWidth = keyof typeof CELL_WIDTH;
+/**
+ * One trailing column of a list, declared once and handed to both the header and every row — which
+ * is the whole point of the pair. A cell that cannot ask its header for a width is two literals kept
+ * in step by hand, and they drift the first time one list is edited and the one below it is not.
+ */
+interface ListColumn {
+    /** Which value in a row's `values` this column draws. */
+    key: string;
+    /** What the header says over it. */
+    label: React$1.ReactNode;
+    width: ListColumnWidth;
+    /**
+     * Drawn when the row says nothing here — a missing key, `null`, or an empty string. "Never"
+     * rather than an empty cell the eye reads as a gap.
+     */
+    fallback?: React$1.ReactNode;
+    /** One tone quieter — a column that qualifies the row rather than answering it. */
+    quiet?: boolean;
+}
+interface ListHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** The label over the flexible name column — what the rows below are a list of. */
+    lead: React$1.ReactNode;
+    columns: readonly ListColumn[];
+    /**
+     * Reserve the `size-8` leading column `EntityRow` gives its `mark`. Off for a list whose rows
+     * carry no mark, where the reserve would push the lead 44px off the card's own padding.
+     */
+    mark?: boolean;
+    /**
+     * Reserve the `size-4` trailing column `EntityRow` keeps for its chevron. Off for a list of
+     * `opens="none"` rows, which is the one form that reserves nothing.
+     */
+    trailing?: boolean;
 }
 /**
- * Full-page first step of the org-first onboarding flow: the screen a user lands on when
- * they have no organization yet. It is the screen wrapper around
- * `OrganizationOnboardingForm` — presentational and self-contained, it never calls an API
- * and never navigates; the caller handles the outcome of `onSubmit`.
+ * The column header over a list of `EntityRow`s. It is not a table head: the rows stay rows you open,
+ * with their hover plate, their focus ring and their one target.
+ *
+ * It takes the same `columns` array the rows' `ListCells` takes, so the widths are declared once and
+ * two lists on one page rule their trailing columns at the same x.
  */
-declare function OrganizationCreateScreen({ requireSanctionsFields, onSubmit, defaultValues, submitting, serverError, violations, countries, submitLabel, onCancel, logo, themeToggle, title, description, footer, ...props }: OrganizationCreateScreenProps): React$1.JSX.Element;
-
-interface OrganizationUnderReviewScreenProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'title'> {
-    /** The only always-present action: the user cannot go anywhere else from this screen. */
-    onLogout: () => void;
-    /** Renders the secondary "Send feedback" button when provided. */
-    onFeedback?: () => void;
-    logoutLabel?: string;
-    feedbackLabel?: string;
-    /** Brand mark above the headline. */
-    logo?: React$1.ReactNode;
-    /** Rendered top-right. Defaults to the kit's own `ThemeToggle`; pass your own node to
-     *  replace it, or `null` to drop it. */
-    themeToggle?: React$1.ReactNode;
-    title?: React$1.ReactNode;
-    description?: React$1.ReactNode;
-    /** Muted footer signature. Absent by default; pass a node to render one. */
-    footer?: React$1.ReactNode;
-    /** Extra content between the header copy and the actions — a support link, a reference
-     *  number, whatever the product needs to add. */
-    children?: React$1.ReactNode;
+declare const ListHeader: React$1.ForwardRefExoticComponent<ListHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
+interface ListCellsProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+    columns: readonly ListColumn[];
+    /** This row's answer per column `key`. A key with no value draws that column's `fallback`. */
+    values: Record<string, React$1.ReactNode>;
 }
 /**
- * The waiting room of the org-first onboarding flow: the screen a user lands on once their
- * organization has been submitted and is not usable yet. Same login-card format as
- * `OrganizationCreateScreen`.
+ * A row's trailing cells, for `EntityRow`'s `meta` slot — spans rather than divs, because `meta`
+ * renders inside the row's own inline content.
  *
- * The copy is deliberately neutral — it states that a review is in progress and how long it
- * usually takes, and nothing about why or against what. Keep it that way; the reason for the
- * wait is never the user-facing story here.
+ * It reads the widths off the same `columns` the header was given, so a column that changes width
+ * changes in both places or in neither.
+ */
+declare const ListCells: React$1.ForwardRefExoticComponent<ListCellsProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+type ThemePickerBaseProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>;
+/**
+ * Controlled or wired, and the union is what makes a caller say which.
+ *
+ * `value` alone used to compile: three cards that look pressable, and pressing one changed nothing,
+ * because the only thing that could have moved was the handler that was not passed. So the arm that
+ * takes `value` takes `onValueChange` with it.
  *
- * Presentational and self-contained: it never calls an API and never navigates; the caller
- * handles `onLogout` and `onFeedback`.
+ * The other arm takes neither, and is the console's own setting — it reads and writes `useTheme()`,
+ * so picking repaints the surface you are standing on, which is what a settings page wants.
+ * `onValueChange` is still allowed there, as a notification after the console has been set.
+ *
+ * What the union does not catch is `value={prefs?.theme}`: a `Theme | undefined` satisfies the second
+ * arm, so the call compiles and the picker is wired until the value lands. That is the call that
+ * writes `<html>` behind a caller who thinks they are holding the value, and it is why `ThemePicker`
+ * settles its mode at mount and warns — the type cannot reach this one, so the runtime does.
  */
-declare function OrganizationUnderReviewScreen({ onLogout, onFeedback, logoutLabel, feedbackLabel, logo, themeToggle, title, description, footer, children, ...props }: OrganizationUnderReviewScreenProps): React$1.JSX.Element;
+type ThemePickerProps = ThemePickerBaseProps & ({
+    /** The chosen theme. Nothing outside the component moves: no `<html>` class, no localStorage. */
+    value: Theme;
+    onValueChange: (theme: Theme) => void;
+} | {
+    value?: undefined;
+    onValueChange?: (theme: Theme) => void;
+});
+/**
+ * Choosing the console's theme, by looking at it: Light and Dark are miniatures of the console they
+ * offer, and Auto is the `Monitor` glyph, because it follows the machine and has no one console to
+ * show. Auto is `system`, and it is here because `ThemeToggle` already cycles through it — a picker
+ * offering only light and dark would contradict the console's own control.
+ */
+declare const ThemePicker: React$1.ForwardRefExoticComponent<ThemePickerProps & React$1.RefAttributes<HTMLDivElement>>;
 
-/** One organization the user can create the product in. */
-interface ProductCreateScreenOrganization {
-    id: string;
-    name: string;
-}
-/** One product already living in the target organization. */
-interface ProductCreateScreenProduct {
-    id: string;
-    name: string;
-    slug?: string;
-}
-/** The submit payload. The organization is implied — the screen only ever creates inside
- *  the organization it was given. */
-interface ProductCreateScreenSubmit {
-    name: string;
-}
-interface ProductCreateScreenProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'title' | 'onSubmit'> {
-    /**
-     * @deprecated No longer rendered. The first-product screen shows no organization
-     * context at all, and where the user does have a choice the screen renders the
-     * `organizations` select instead. Kept so existing callers still type-check.
-     */
-    organizationName?: string;
-    /** The organizations the user can pick between. Omit (or pass an empty list) for the
-     *  first-product screen, which shows no organization UI. Passing organizations switches
-     *  the screen to the picker layout: select on top, that org's products, then the name. */
-    organizations?: ProductCreateScreenOrganization[];
-    /** The organization currently selected in the picker layout. */
-    selectedOrganizationId?: string;
-    /** Fires with the picked organization id. Without it the select is read-only. */
-    onOrganizationChange?: (organizationId: string) => void;
-    /** Shows a loading note in place of the products list while the caller fetches them. */
-    productsLoading?: boolean;
-    onSubmit: (data: ProductCreateScreenSubmit) => void;
-    defaultName?: string;
-    /** Disables the submit button and swaps its label while the caller's request is in flight. */
-    submitting?: boolean;
-    serverError?: string | null;
-    /** Products the organization already has. Omit (or pass an empty list) to hide the
-     *  "Your products" section entirely. */
-    existingProducts?: ProductCreateScreenProduct[];
-    /** Makes each existing product a button. Without it the list is read-only. */
-    onOpenProduct?: (product: ProductCreateScreenProduct) => void;
-    /** Heading above the existing-products list. */
-    existingProductsLabel?: React$1.ReactNode;
-    submitLabel?: React$1.ReactNode;
-    /** Renders a Cancel button when provided. */
-    onCancel?: () => void;
-    /** Brand mark above the headline. */
-    logo?: React$1.ReactNode;
-    /** Rendered top-right. Defaults to the kit's own `ThemeToggle`; pass your own node to
-     *  replace it, or `null` to drop it. */
-    themeToggle?: React$1.ReactNode;
-    title?: React$1.ReactNode;
-    description?: React$1.ReactNode;
-    /** Muted footer signature. Absent by default; pass a node to render one. */
-    footer?: React$1.ReactNode;
+interface MedallionProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The glyph. The medallion owns its 24px sizing, so a caller can never leave one at the wrong step. */
+    icon: LucideIcon;
+    /** The payoff tone: an inverted plate for the end of a flow, not a resting state. */
+    filled?: boolean;
 }
 /**
- * Full-page second step of the org-first onboarding flow: create the first product inside
- * an organization that already exists. Presentational and self-contained — it never calls
- * an API and never navigates; the caller handles the outcome of `onSubmit`.
+ * The circle that stands for nothing — a section, a screen or a step, never a principal. That is why
+ * it is neither `GlyphAvatar` nor a `Mark`: `Guidelines/Avatars` maps person, agent and group to a
+ * circle and every object to `EntityTile`'s rounded square, and an arbitrary glyph on the principal
+ * mark would make a round object spellable.
+ *
+ * The plate is the same geometry as an `lg` `Mark` — same box, same neutral tone — because the two sit
+ * side by side on a page and a reader takes a difference in either as meaning something. Each file
+ * writes its own; `medallion.test.tsx` holds them together.
+ *
+ * One size, because every place that draws it is 48px. A size prop would only offer a smaller box
+ * around the same 24px glyph.
+ *
+ * `filled` marks a payoff — "you're in" at the end of a challenge — with weight rather than colour,
+ * so success does not reach for green (Guidelines/Colour marks actions). It is the end of a flow,
+ * never a resting state, which is why a page header has no use for it. It is local to the medallion:
+ * `Mark`'s tones are the identity tints, and no avatar has a filled step.
+ *
+ * It is a mark, not a control: no role, no name, nothing to press. A medallion that wants a click
+ * wants a button around the thing it marks.
  */
-declare function ProductCreateScreen({ organizationName: _organizationName, organizations, selectedOrganizationId, onOrganizationChange, productsLoading, onSubmit, defaultName, submitting, serverError, existingProducts, onOpenProduct, existingProductsLabel, submitLabel, onCancel, logo, themeToggle, title, description, footer, ...props }: ProductCreateScreenProps): React$1.JSX.Element;
+declare const Medallion: React$1.ForwardRefExoticComponent<MedallionProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * A secret the console will never show again — recovery codes, a provisioning token, an agent secret
+ * — held in an inset well until the person confirms they have taken it.
+ *
+ * The well is the emphasis and it does not fade: a sunken tone behind a `border-border-strong`
+ * outline, which `Guidelines/Look/Borders` gives to an edge that is itself the point. Monochrome
+ * throughout, no icon on the container, because `Guidelines/Look/Colour marks actions` leaves colour
+ * to actions and this is a state.
+ *
+ * **The confirm is never disabled.** Before the secret has been taken it rests `ghost` on the holding
+ * word; once Copy or Download has succeeded it settles to the `secondary` fill carrying the
+ * affirmative the call site asked for. Both words are the same exit and both call `onConfirm`, so the
+ * holding word has to name what leaving now does.
+ *
+ * `Copy` and `Download` are peers, not a ranked pair, so both stay `outline`
+ * (`Guidelines/Controls/Button pairs`).
+ *
+ * Nothing here writes a file or raises a toast: `onCopied` and `onDownload` fire so the call site
+ * names what was taken in its own words, and the clipboard is the one side effect the component owns.
+ */
+interface SecretRevealProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** One value on a line, or several in two columns. */
+    value: string | string[];
+    /** The prose above the value: what it is, and that it will not be shown again. */
+    caption: string;
+    /** The affirmative, once the secret has been taken: "Done", "Done, turn on". */
+    confirmLabel: string;
+    /** Both words are one exit — pressed before the secret is taken, and after. */
+    onConfirm: () => void;
+    /**
+     * The holding word, before the secret has been taken. Required, and where leaving now has a
+     * consequence the word has to name it: the exit is live either way. Where closing the block is all
+     * it does, `Dismiss` says so.
+     */
+    dismissLabel: string;
+    /** Fires once the value has reached the clipboard, for the call site's own toast. */
+    onCopied?: () => void;
+    /**
+     * Draws the Download control, and fires when it is pressed. Omit it and there is no second control:
+     * recovery codes are the only secret with a file to save, so the presence of a handler is the
+     * question "is there a file?" already answered.
+     */
+    onDownload?: () => void;
+    /** Defaults to `Copy`, or `Copy all` when the value is a list. */
+    copyLabel?: string;
+    downloadLabel?: string;
+    /**
+     * Move focus to the copy control on arrival. Off by default: a page holding more than one of these
+     * would fight over the focus, and a focus scrolls the page to whatever received it. Pass it where
+     * the reveal is the thing that just happened.
+     */
+    autoFocus?: boolean;
+    /**
+     * A class for the layer between the well's tone and its outline, for a highlight that marks the
+     * block as newly arrived. It exists as a layer of its own because such a wash typically ends on
+     * `background-color: transparent` and holds it, so an element carrying both the wash and a resting
+     * tone is painted transparent through the fade — the tone is on the well, the wash goes here, the
+     * outline and content sit above it.
+     */
+    highlightClassName?: string;
+    /** The same layer, for a hook that needs the element — a scroll-into-view on arrival. */
+    highlightRef?: React$1.Ref<HTMLDivElement>;
+}
+declare const SecretReveal: React$1.ForwardRefExoticComponent<SecretRevealProps & React$1.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, type AppShellProps, AppSidebar, type AppSidebarProps, AspectRatio, AuthenticatedLayout, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, type BeneficialOwnerPayload, BetaGateScreen, type BetaGateScreenProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, COUNTRY_OPTIONS, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, Checkbox, Code, CodeBlock, type CodeBlockProps, type CodeLang, type CodeProps, Col, type ColProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, type ConnectionAuth, ConnectionCard, type ConnectionCardProps, type ConnectionScope, type ConnectionStatus, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, type CreateProductSubmit, CreateProductWindow, type CreateProductWindowOrganization, type CreateProductWindowProduct, type CreateProductWindowProps, DatePicker, type DatePickerProps, type DeltaDirection, type DeltaTone, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocsLink, type DocsLinkProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExtensionIcon, type ExtensionIconProps, ExtensionLink, type ExtensionLinkProps, type ExtensionLinkUiMode, FeedbackButton, type FeedbackButtonLabels, type FeedbackButtonProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, GridOverlay, type GridOverlayProps, type GridProps, HoverCard, HoverCardContent, HoverCardTrigger, InlineError, type InlineErrorProps, Input, InputAddon, type InputAddonProps, InputGroup, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, MenuDivider, MenuPopup, type MenuPopupProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type NavItem, type NavLinkComponent, NavRow, type NavRowProps, type NavRowVariant, NavSectionLabel, type NavSectionLabelProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, type NotifClass, type NotificationAction, NotificationBell, type NotificationBellProps, NotificationCenter, type NotificationCenterProps, type NotificationClass, type NotificationDeepLink, type NotificationItem, type NotificationMute, type NotificationPreferences, type NotificationProduct, NotificationSettings, type NotificationSettingsProps, type NotificationSeverity, type NotificationSubscription, type NotificationThreshold, NotificationToast, type NotificationToastDwell, type NotificationToastProps, NotificationToaster, type NotificationToasterPosition, type NotificationToasterProps, OrgProductSwitcher, type OrgProductSwitcherAction, type OrgProductSwitcherItem, type OrgProductSwitcherProps, OrganizationCreateScreen, type OrganizationCreateScreenProps, type OrganizationOnboardingDefaults, OrganizationOnboardingForm, type OrganizationOnboardingFormProps, type OrganizationOnboardingPayload, OrganizationUnderReviewScreen, type OrganizationUnderReviewScreenProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProductCreateScreen, type ProductCreateScreenOrganization, type ProductCreateScreenProduct, type ProductCreateScreenProps, type ProductCreateScreenSubmit, Progress, RadioGroup, RadioGroupItem, RequestRow, type RequestRowProps, type RequestState, type RequestSurface, type ResolvedTheme, type Responsive, ScrollArea, ScrollBar, SectionIntro, type SectionIntroProps, SegmentChip, type SegmentChipProps, Select, type SelectOption, type SelectProps, Separator, type Severity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarBackHeader, type SidebarBackHeaderProps, SidebarNav, SidebarNavLink, type SidebarNavLinkProps, type SidebarNavProps, SidebarProductHeader, type SidebarProductHeaderProps, SignupScreen, type SignupScreenProps, type SignupScreenSubmit, Skeleton, Slider, StatCard, type StatCardProps, StatusDot, type StatusDotProps, Switch, type SwitchProps, TOAST_DWELL, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseSidebarOptions, type UseSidebarResult, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, alertVariants, badgeVariants, buttonVariants, cn, formatRelativeAge, isKnownExtensionIcon, isNotificationSettled, navigationMenuTriggerStyle, segmentChipVariants, severityBadgeVariant, severityLabels, statusDotVariants, toggleVariants, useCarousel, useFormField, useIsMobile, useSidebar, useTheme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddPicker, type AddPickerItem, type AddPickerProps, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, type AppShellProps, AppSidebar, type AppSidebarProps, AspectRatio, AttachmentChip, type AttachmentChipProps, type AttachmentState, AuthenticatedLayout, AutoHeight, type AutoHeightProps, Avatar, AvatarFallback, AvatarImage, BackLink, type BackLinkProps, Badge, type BadgeProps, type BeneficialOwnerPayload, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, COUNTRY_OPTIONS, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNote, type CardNoteProps, type CardProps, CardTitle, type CardTitleProps, Carousel, type CarouselApi, CarouselContent, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, Checkbox, Code, CodeBlock, type CodeBlockProps, type CodeLang, type CodeProps, type CodeVariant, Col, type ColProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, type CommandItemProps, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogStepUp, ConnectorCard, type ConnectorCardProps, type ConnectorOrigin, type ConnectorStatus, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, DecorativeIcon, type DecorativeIconProps, type DeltaDirection, type DeltaTone, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocsLink, type DocsLinkProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, EntityRow, type EntityRowOpens, type EntityRowOpensProps, type EntityRowProps, EntityTile, type EntityTileProps, ExtensionIcon, type ExtensionIconProps, ExtensionLink, type ExtensionLinkProps, type ExtensionLinkUiMode, FeedbackButton, type FeedbackButtonLabels, type FeedbackButtonProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GlyphAvatar, type GlyphAvatarProps, type GrantRole, type GrantRoleNotes, GrantRolePicker, type GrantRolePickerProps, GrantRow, type GrantRowProps, Grid, GridOverlay, type GridOverlayProps, type GridProps, HoverCard, HoverCardContent, HoverCardTrigger, IconHint, type IconHintProps, ImageCropDialog, type ImageCropDialogProps, type ImageCropShape, type ImageCropType, ImageCropper, type ImageCropperProps, ImageUpload, type ImageUploadProps, type ImageUploadSize, InlineError, type InlineErrorProps, Input, InputAddon, type InputAddonProps, InputGroup, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, ListCells, type ListCellsProps, type ListColumn, type ListColumnWidth, ListHeader, type ListHeaderProps, MISSING_TONE, Medallion, type MedallionProps, MenuDivider, MenuPopup, type MenuPopupProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type NavItem, type NavLinkComponent, NavRow, type NavRowProps, type NavRowVariant, NavSectionLabel, type NavSectionLabelProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, type NotifClass, type NotificationAction, NotificationBell, type NotificationBellProps, NotificationCenter, type NotificationCenterProps, type NotificationClass, type NotificationDeepLink, type NotificationItem, type NotificationMute, type NotificationPreferences, type NotificationProduct, NotificationRow, type NotificationRowProps, NotificationSettings, type NotificationSettingsProps, type NotificationSeverity, type NotificationSubscription, type NotificationThreshold, NotificationToast, type NotificationToastDwell, type NotificationToastProps, NotificationToaster, type NotificationToasterPosition, type NotificationToasterProps, OrgProductSwitcher, type OrgProductSwitcherAction, type OrgProductSwitcherItem, type OrgProductSwitcherProps, type OrganizationOnboardingDefaults, OrganizationOnboardingForm, type OrganizationOnboardingFormProps, type OrganizationOnboardingPayload, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, PersonAvatar, type PersonAvatarProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, RemovableChip, type RemovableChipProps, RemoveButton, type RemoveButtonProps, RequestRow, type RequestRowProps, type RequestState, type RequestSurface, type ResolvedTheme, type Responsive, ScrollArea, ScrollBar, SecretReveal, type SecretRevealProps, SectionIntro, type SectionIntroProps, Select, type SelectOption, type SelectProps, Separator, SettingRow, type SettingRowProps, type Severity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarBackHeader, type SidebarBackHeaderProps, SidebarNav, SidebarNavLink, type SidebarNavLinkProps, type SidebarNavProps, SidebarProductHeader, type SidebarProductHeaderProps, Skeleton, Slider, StatCard, type StatCardProps, StatusDot, type StatusDotProps, StepUpChallenge, type StepUpChallengeProps, type StepUpMethod, type StepUpProof, Switch, type SwitchProps, TOAST_DWELL, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemePicker, type ThemePickerProps, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseSidebarOptions, type UseSidebarResult, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, WEIGHT_TONE, alertVariants, attachmentChipVariants, badgeVariants, buttonVariants, cn, formatRelativeAge, grantRemoveLabel, isKnownExtensionIcon, isNotificationSettled, navigationMenuTriggerStyle, severityBadgeVariant, severityLabels, statusDotVariants, toggleVariants, useCarousel, useFormField, useIsMobile, useSidebar, useTheme };