@nextlyhq/ui 0.0.2-alpha.6 → 0.0.2-alpha.62

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as react from 'react';
-import { ButtonHTMLAttributes, ComponentProps, TextareaHTMLAttributes, HTMLAttributes, ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ButtonHTMLAttributes, ComponentProps, TextareaHTMLAttributes, HTMLAttributes, ReactNode, ComponentPropsWithoutRef } from 'react';
 import * as class_variance_authority from 'class-variance-authority';
 import { VariantProps } from 'class-variance-authority';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -13,7 +13,7 @@ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { Content, Item, Root as Root$2, Trigger } from '@radix-ui/react-accordion';
 import * as _radix_ui_react_tabs from '@radix-ui/react-tabs';
-import { Content as Content$1, List, Root as Root$3, Trigger as Trigger$1 } from '@radix-ui/react-tabs';
+import { Content as Content$1, Root as Root$3 } from '@radix-ui/react-tabs';
 import * as _radix_ui_react_tooltip from '@radix-ui/react-tooltip';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -24,8 +24,11 @@ import { Command as Command$1 } from 'cmdk';
 import { LucideProps } from 'lucide-react';
 import { ToasterProps } from 'sonner';
 export { ToasterProps, toast } from 'sonner';
-import { ClassValue } from 'clsx';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import * as ResizablePrimitive from 'react-resizable-panels';
+import * as SliderPrimitive from '@radix-ui/react-slider';
 
+/** @public */
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
 }
@@ -45,11 +48,13 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantPr
  * - link: Link-style button (underlined text)
  *
  * Note: 'primary' is a semantic alias for 'default' variant for better code readability
+ * @experimental
  */
 declare const buttonVariants: (props?: ({
     variant?: "default" | "primary" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
     size?: "default" | "sm" | "md" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+/** @public */
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 /**
@@ -66,15 +71,15 @@ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAtt
  * - Placeholder text for guidance (not a replacement for labels)
  *
  * Design Specs:
- * - Height: sm=32px, default=40px, lg=44px
+ * - Height: sm=36px, default=40px, lg=44px
  * - Padding: Horizontal varies by size (sm=10px, default=12px, lg=16px)
- * - Border radius: 0px (rounded-none)
+ * - Border radius: `rounded-md`, the control step of the `--radius` scale
  * - Border: 1px solid, changes on focus/error
  * - Transition: 150ms (consistent with design system)
  * - Font size: sm/default=14px (text-sm), lg=16px (text-base)
  *
  * Size Variants:
- * - sm: Height 32px (h-8) - Compact forms, filters
+ * - sm: Height 36px - Compact forms and filters, matching a small Button
  * - default: Height 40px (h-10) - Standard forms
  * - lg: Height 44px (h-11) - Prominent inputs, marketing forms
  *
@@ -86,18 +91,34 @@ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAtt
  * - tel: Phone number input
  * - url: URL validation
  * - search: Search input with clear button
+ * @experimental
  */
 declare const inputVariants: (props?: ({
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+/** @public */
 interface InputProps extends Omit<ComponentProps<"input">, "size">, VariantProps<typeof inputVariants> {
 }
+/** @public */
 declare const Input: react.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 
+/** @public */
 declare const Textarea: react.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & react.RefAttributes<HTMLTextAreaElement>>;
 
+/** @public */
 declare function Label({ className, ...props }: ComponentProps<typeof Root>): react_jsx_runtime.JSX.Element;
 
+/** @public */
+interface FormLabelWithTooltipProps extends react.ComponentPropsWithoutRef<typeof Label> {
+    label: react.ReactNode;
+    description?: react.ReactNode;
+    required?: boolean;
+    labelClassName?: string;
+    tooltipClassName?: string;
+}
+/** @public */
+declare const FormLabelWithTooltip: react.ForwardRefExoticComponent<FormLabelWithTooltipProps & react.RefAttributes<HTMLLabelElement>>;
+
 /**
  * Badge Component - Design System Specification
  *
@@ -124,13 +145,16 @@ declare function Label({ className, ...props }: ComponentProps<typeof Root>): re
  * - success: Light green background
  * - warning: Light amber background
  * - destructive: Light red background
- * - outline: Transparent background with  border border-primary/5
+ * - outline: Transparent background with  border border-border
+ * @experimental
  */
 declare const badgeVariants: (props?: ({
     variant?: "default" | "primary" | "destructive" | "outline" | "success" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+/** @public */
 interface BadgeProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }
+/** @public */
 declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
 
 /**
@@ -140,14 +164,14 @@ declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_
  * Cards provide a structured layout with header, content, and footer sections.
  *
  * Design Specs:
- * - Border radius: 0px (rounded-none)
+ * - Border radius: `rounded-lg`, the container step of the `--radius` scale
  * - Padding: 24px (p-6) for header/content, 16px 24px for footer
  * - Shadow: sm (default), md (hover/elevated)
- * - Border: 1px solid  border border-primary/5 color
+ * - Border: 1px solid  border border-border color
  *
  * Variants:
  * - default: Standard card with subtle shadow
- * - interactive: Hover effects for clickable cards  (border border-primary/5 highlight, shadow increase)
+ * - interactive: Hover effects for clickable cards  (border border-border highlight, shadow increase)
  *   ⚠️ IMPORTANT: When using the interactive variant, you MUST add appropriate
  *   accessibility attributes:
  *   - Add role="button" or use an actual <button> wrapper
@@ -182,33 +206,89 @@ declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_
  * - Interactive cards MUST have role, tabIndex, and keyboard handlers (see above)
  * - Ensure sufficient color contrast for all text (WCAG 2.2 AA minimum)
  * - Use aria-label or aria-labelledby for cards without visible text labels
+ * @experimental
  */
 declare const cardVariants: (props?: ({
     variant?: "default" | "interactive" | "elevated" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+/** @experimental */
 type CardProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants>;
+/** @experimental */
 declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
     variant?: "default" | "interactive" | "elevated" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * Whether to hide the bottom  border border-primary/5 separator between header and content.
-     * Default: false  (border border-primary/5 is shown per design spec)
+     * Whether to hide the bottom  border border-border separator between header and content.
+     * Default: false  (border border-border is shown per design spec)
      */
     noBorder?: boolean;
 }
+/** @experimental */
 declare const CardHeader: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 type CardTitleProps = HTMLAttributes<HTMLHeadingElement>;
+/** @experimental */
 declare const CardTitle: react.ForwardRefExoticComponent<CardTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+/** @experimental */
 type CardDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+/** @experimental */
 declare const CardDescription: react.ForwardRefExoticComponent<CardDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+/** @experimental */
 type CardActionProps = HTMLAttributes<HTMLDivElement>;
+/** @experimental */
 declare const CardAction: react.ForwardRefExoticComponent<CardActionProps & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 type CardContentProps = HTMLAttributes<HTMLDivElement>;
+/** @experimental */
 declare const CardContent: react.ForwardRefExoticComponent<CardContentProps & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 type CardFooterProps = HTMLAttributes<HTMLDivElement>;
+/** @experimental */
 declare const CardFooter: react.ForwardRefExoticComponent<CardFooterProps & react.RefAttributes<HTMLDivElement>>;
 
+type Gap = 0 | 1 | 2 | 3 | 4 | 6 | 8;
+type Cols = 1 | 2 | 3 | 4 | 6;
+/** @experimental */
+interface StackProps extends HTMLAttributes<HTMLDivElement> {
+    /** Main-axis direction. Default `col`. */
+    direction?: "col" | "row";
+    /** Gap between children (Tailwind spacing step). Default `4`. */
+    gap?: Gap;
+}
+/** Flex stack: vertical by default, horizontal with `direction="row"`.
+ * @experimental
+ */
+declare const Stack: react.ForwardRefExoticComponent<StackProps & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
+interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    /** Column count. Default `2`. */
+    cols?: Cols;
+    /** Gap between cells. Default `4`. */
+    gap?: Gap;
+    /**
+     * Collapse to one column in a narrow container. Off by default so existing
+     * callers keep the fixed column count they were written against.
+     */
+    responsive?: boolean;
+}
+/** Simple fixed-column grid, or a container-responsive one via `responsive`.
+ * @experimental
+ */
+declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
+interface StatProps extends HTMLAttributes<HTMLDivElement> {
+    /** Muted label above the value. */
+    label: string;
+    /** The emphasized value (string or node). */
+    value: ReactNode;
+}
+/** Labelled metric block for dashboard-style plugin widgets.
+ * @experimental
+ */
+declare const Stat: react.ForwardRefExoticComponent<StatProps & react.RefAttributes<HTMLDivElement>>;
+
 /**
  * Alert Component - Design System Specification
  *
@@ -217,7 +297,7 @@ declare const CardFooter: react.ForwardRefExoticComponent<CardFooterProps & reac
  *
  * Design Specs:
  * - Padding: 16px (p-4)
- * - Border radius: 0px (rounded-none) - intentionally smaller than Card (12px)
+ * - Border radius: `rounded-md`, one step tighter than Card's `rounded-lg`
  *   for inline/flow content vs. larger container components
  * - Border: 1px solid matching variant color
  * - Shadow: sm (subtle elevation)
@@ -276,10 +356,12 @@ declare const CardFooter: react.ForwardRefExoticComponent<CardFooterProps & reac
  * - Success: <CheckCircle2 className="h-4 w-4" />
  * - Warning: <AlertTriangle className="h-4 w-4" />
  * - Destructive: <XCircle className="h-4 w-4" />
+ * @experimental
  */
 declare const alertVariants: (props?: ({
     variant?: "destructive" | "success" | "warning" | "info" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+/** @experimental */
 type AlertProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>;
 /**
  * Alert - Root container for alert messages
@@ -292,10 +374,12 @@ type AlertProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVari
  *   <CheckCircle2 className="h-4 w-4" />
  *   <AlertDescription>Operation completed successfully</AlertDescription>
  * </Alert>
+ * @experimental
  */
 declare const Alert: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
     variant?: "destructive" | "success" | "warning" | "info" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 type AlertTitleProps = HTMLAttributes<HTMLHeadingElement>;
 /**
  * AlertTitle - Heading text for alert message
@@ -305,8 +389,10 @@ type AlertTitleProps = HTMLAttributes<HTMLHeadingElement>;
  *
  * @example
  * <AlertTitle>Payment Successful</AlertTitle>
+ * @experimental
  */
 declare const AlertTitle: react.ForwardRefExoticComponent<AlertTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+/** @experimental */
 type AlertDescriptionProps = HTMLAttributes<HTMLDivElement>;
 /**
  * AlertDescription - Supporting detail text for alert message
@@ -318,9 +404,11 @@ type AlertDescriptionProps = HTMLAttributes<HTMLDivElement>;
  * <AlertDescription>
  *   Your changes have been saved. <a href="/view">View details</a>
  * </AlertDescription>
+ * @experimental
  */
 declare const AlertDescription: react.ForwardRefExoticComponent<AlertDescriptionProps & react.RefAttributes<HTMLDivElement>>;
 
+/** @experimental */
 declare function Separator({ className, orientation, decorative, ...props }: react.ComponentProps<typeof SeparatorPrimitive.Root>): react_jsx_runtime.JSX.Element;
 
 /**
@@ -332,7 +420,7 @@ declare function Separator({ className, orientation, decorative, ...props }: rea
  * @design_specs
  * - Background: bg-accent (slate-100 in light mode, slate-800 in dark mode)
  * - Animation: animate-pulse with motion-reduce:animate-none (respects prefers-reduced-motion)
- * - Border-radius: 0px (rounded-none)
+ * - Border-radius: `rounded-md` by default; override per placeholder shape
  * - Contrast: 3:1 minimum for WCAG 1.4.11 (Non-text Contrast) compliance
  *
  * @accessibility
@@ -352,13 +440,13 @@ declare function Separator({ className, orientation, decorative, ...props }: rea
  *
  * **Avatar Skeleton:**
  * ```tsx
- * <Skeleton className="h-12 w-12 rounded-none" />
+ * <Skeleton className="h-12 w-12 rounded-md" />
  * ```
  *
  * **Card Skeleton:**
  * ```tsx
  * <div className="space-y-3">
- *   <Skeleton className="h-[125px] w-[250px] rounded-none" />
+ *   <Skeleton className="h-[125px] w-[250px] rounded-lg" />
  *   <div className="space-y-2">
  *     <Skeleton className="h-4 w-[250px]" />
  *     <Skeleton className="h-4 w-[200px]" />
@@ -372,7 +460,7 @@ declare function Separator({ className, orientation, decorative, ...props }: rea
  *   {isLoading ? (
  *     <>
  *       <span className="sr-only">Loading user profile...</span>
- *       <Skeleton className="h-12 w-12 rounded-none" />
+ *       <Skeleton className="h-12 w-12 rounded-md" />
  *       <Skeleton className="h-4 w-[200px]" />
  *     </>
  *   ) : (
@@ -395,20 +483,25 @@ declare function Separator({ className, orientation, decorative, ...props }: rea
  *
  * @see {@link https://ui.shadcn.com/docs/components/skeleton shadcn/ui Skeleton}
  * @see {@link https://adrianroselli.com/2020/11/more-accessible-skeletons.html More Accessible Skeletons}
+ * @experimental
  */
 declare const Skeleton: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 type SkeletonProps = react.ComponentProps<"div">;
 
 /**
  * Progress variants using CVA
  *
  * Defines color variants for different progress states.
+ *
+ * @experimental
  */
 declare const progressVariants: (props?: ({
     variant?: "default" | "success" | "error" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**
  * Progress component props
+ * @experimental
  */
 type ProgressProps = {
     /**
@@ -433,7 +526,7 @@ type ProgressProps = {
      * Visual variant for different states
      *
      * - `default`: Primary blue (bg-primary-500)
-     * - `success`: Green (bg-green-500)
+     * - `success`: Green (bg-success-500)
      * - `error`: Red (bg-destructive)
      *
      * @default "default"
@@ -476,6 +569,7 @@ type ProgressProps = {
  *   );
  * }
  * ```
+ * @experimental
  */
 declare const Progress: react.ForwardRefExoticComponent<{
     /**
@@ -500,7 +594,7 @@ declare const Progress: react.ForwardRefExoticComponent<{
      * Visual variant for different states
      *
      * - `default`: Primary blue (bg-primary-500)
-     * - `success`: Green (bg-green-500)
+     * - `success`: Green (bg-success-500)
      * - `error`: Red (bg-destructive)
      *
      * @default "default"
@@ -523,6 +617,7 @@ declare const Progress: react.ForwardRefExoticComponent<{
     "aria-label"?: string;
 } & react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
 
+/** @public */
 declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
     indeterminate?: boolean;
 } & react.RefAttributes<HTMLButtonElement>>;
@@ -542,40 +637,58 @@ declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.C
  * Design Specs:
  * - Size: 16px (h-4 w-4) - Fixed size matching Checkbox
  * - Border: 1px solid, expands to 5px when checked (visual indicator)
- * - Border radius: Full (rounded-none)
+ * - Border radius: `rounded-full`. Round means "pick one" and square means
+ *   "pick many"; a square radio would announce the wrong behaviour, so the
+ *   shape is fixed and deliberately outside the `--radius` scale. Checkbox
+ *   keeps the derived radius for the same reason.
  * - Transition: 150ms (consistent with design system)
  * - Focus ring: 2px ring with 2px offset
  *
  * Implementation Notes:
  * - Uses Radix UI primitives for robust accessibility
- * - Visual "checked" state achieved via  border border-primary/5 expansion (border-[5px])
- * - No inner indicator needed -  border border-primary/5 expansion provides clear visual feedback
- * - Hover state changes  border border-primary/5 color for better interactivity
+ * - Visual "checked" state achieved via  border border-border expansion (border-[5px])
+ * - No inner indicator needed -  border border-border expansion provides clear visual feedback
+ * - Hover state changes  border border-border color for better interactivity
+ * @public
  */
 declare const RadioGroup: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/** @public */
 declare const RadioGroupItem: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * A pill track carrying a circular thumb is how a toggle is recognised, so both
+ * parts use `rounded-full` and stay outside the `--radius` scale: at any theme
+ * radius the switch must still read as a switch and not as a small checkbox.
+ * @public
+ */
 declare function Switch({ className, ...props }: ComponentProps<typeof Root$1>): react_jsx_runtime.JSX.Element;
 
+/** @experimental */
 declare const Collapsible: react.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 declare const CollapsibleTrigger: react.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+/** @experimental */
 declare const CollapsibleContent: react.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & react.RefAttributes<HTMLDivElement>>;
 
 /**
  * Props for the Accordion root component
  * @see https://www.radix-ui.com/primitives/docs/components/accordion
+ * @experimental
  */
 type AccordionProps = ComponentPropsWithoutRef<typeof Root$2>;
 /**
  * Props for the AccordionItem component (container for trigger and content)
+ * @experimental
  */
 type AccordionItemProps = ComponentPropsWithoutRef<typeof Item>;
 /**
  * Props for the AccordionTrigger component (clickable header button)
+ * @experimental
  */
 type AccordionTriggerProps = ComponentPropsWithoutRef<typeof Trigger>;
 /**
  * Props for the AccordionContent component (collapsible content panel)
+ * @experimental
  */
 type AccordionContentProps = ComponentPropsWithoutRef<typeof Content>;
 
@@ -586,7 +699,7 @@ type AccordionContentProps = ComponentPropsWithoutRef<typeof Content>;
  * Built on Radix UI primitives with WAI-ARIA compliance.
  *
  * Design Specs:
- * - AccordionItem border: 1px bottom  border border-primary/5 (border-b)
+ * - AccordionItem border: 1px bottom  border border-border (border-b)
  * - AccordionTrigger padding: 16px vertical (py-4)
  * - AccordionTrigger font: font-medium (500 weight)
  * - AccordionContent padding: 16px bottom, 0 top (pb-4 pt-0)
@@ -671,18 +784,20 @@ type AccordionContentProps = ComponentPropsWithoutRef<typeof Content>;
  * ```
  *
  * @see https://www.radix-ui.com/primitives/docs/components/accordion
+ * @experimental
  */
 declare const Accordion: react.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & react.RefAttributes<HTMLDivElement>>;
 /**
  * AccordionItem - Container for trigger and content
  *
  * Design Specs:
- * - Border: 1px bottom  border border-primary/5 (border-b) for visual separation
+ * - Border: 1px bottom  border border-border (border-b) for visual separation
  * - Each item represents a collapsible section
  *
  * Accessibility:
  * - Each item requires a unique value prop for identification
  * - Disabled state can be set via disabled prop
+ * @experimental
  */
 declare const AccordionItem: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 /**
@@ -707,6 +822,7 @@ declare const AccordionItem: react.ForwardRefExoticComponent<Omit<AccordionPrimi
  * - The ChevronDown icon is included by default
  * - Icon rotates 180° when item is expanded ([data-state=open])
  * - Trigger includes AccordionPrimitive.Header wrapper for proper semantics
+ * @experimental
  */
 declare const AccordionTrigger: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 /**
@@ -728,6 +844,7 @@ declare const AccordionTrigger: react.ForwardRefExoticComponent<Omit<AccordionPr
  * - data-state="open": animate-accordion-down (Tailwind built-in)
  * - data-state="closed": animate-accordion-up (Tailwind built-in)
  * - Height transitions smoothly from 0 to auto
+ * @experimental
  */
 declare const AccordionContent: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
@@ -750,7 +867,9 @@ declare const AccordionContent: react.ForwardRefExoticComponent<Omit<AccordionPr
  * - 2xl: 80px (h-20 w-20) - For profile headers, large avatars
  *
  * **Design Specs**:
- * - Border radius: rounded-none (circular)
+ * - Border radius: `rounded-full`. A person's avatar is read as a circle, so it
+ *   sits outside the `--radius` scale and stays circular at any theme radius.
+ *   Non-identity content (media thumbnails) overrides back to a scale step.
  * - Background: bg-accent (slate-100 light, slate-800 dark)
  * - Text color: text-accent-foreground (slate-900 light, slate-100 dark)
  * - Fallback text scales with avatar size (text-xs to text-2xl)
@@ -790,6 +909,7 @@ declare const AccordionContent: react.ForwardRefExoticComponent<Omit<AccordionPr
  *
  * @see {@link https://www.radix-ui.com/primitives/docs/components/avatar Radix UI Avatar}
  * @see {@link https://github.com/nextlyhq/nextly/blob/main/ui-revamp/04-design-system-specification.md Design System Specification}
+ * @experimental
  */
 declare const avatarVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
@@ -800,6 +920,7 @@ declare const avatarVariants: (props?: ({
  * Container element for avatar image and fallback. Provides consistent sizing
  * and styling across the application. Uses React Context to pass size to
  * AvatarFallback for reliable text scaling.
+ * @experimental
  */
 declare const Avatar: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & class_variance_authority.VariantProps<(props?: ({
     size?: "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
@@ -819,6 +940,7 @@ declare const Avatar: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLPro
  *
  * @example
  * <AvatarImage src="/users/john-doe.jpg" alt="John Doe" />
+ * @experimental
  */
 declare const AvatarImage: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & react.RefAttributes<HTMLImageElement>>;
 /**
@@ -851,6 +973,7 @@ declare const AvatarImage: react.ForwardRefExoticComponent<Omit<react.DetailedHT
  * @example
  * // Custom delay before showing fallback
  * <AvatarFallback delayMs={300}>AB</AvatarFallback>
+ * @experimental
  */
 declare const AvatarFallback: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     delayMs?: number;
@@ -861,6 +984,7 @@ declare const AvatarFallback: react.ForwardRefExoticComponent<Omit<react.Detaile
  *
  * Root container for displaying user avatars with image and fallback support.
  * Extends Radix UI Avatar.Root props with size variants.
+ * @experimental
  */
 type AvatarProps = ComponentPropsWithoutRef<"span"> & VariantProps<typeof avatarVariants> & {
     /**
@@ -882,6 +1006,7 @@ type AvatarProps = ComponentPropsWithoutRef<"span"> & VariantProps<typeof avatar
  *
  * Note: Both src and alt are optional to support dynamic loading scenarios.
  * When src is undefined/empty, the AvatarFallback will be displayed instead.
+ * @experimental
  */
 type AvatarImageProps = ComponentPropsWithoutRef<"img">;
 /**
@@ -889,6 +1014,7 @@ type AvatarImageProps = ComponentPropsWithoutRef<"img">;
  *
  * Displays fallback content (typically user initials) when image fails to load.
  * Extends Radix UI Avatar.Fallback props.
+ * @experimental
  */
 type AvatarFallbackProps = ComponentPropsWithoutRef<"span"> & {
     /**
@@ -901,18 +1027,12 @@ type AvatarFallbackProps = ComponentPropsWithoutRef<"span"> & {
 /**
  * Props for the Tabs root component
  * @see https://www.radix-ui.com/primitives/docs/components/tabs
+ * @public
  */
 type TabsProps = ComponentPropsWithoutRef<typeof Root$3>;
-/**
- * Props for the TabsList component (container for tab triggers)
- */
-type TabsListProps = ComponentPropsWithoutRef<typeof List>;
-/**
- * Props for the TabsTrigger component (clickable tab button)
- */
-type TabsTriggerProps = ComponentPropsWithoutRef<typeof Trigger$1>;
 /**
  * Props for the TabsContent component (content panel for each tab)
+ * @public
  */
 type TabsContentProps = ComponentPropsWithoutRef<typeof Content$1>;
 
@@ -923,8 +1043,9 @@ type TabsContentProps = ComponentPropsWithoutRef<typeof Content$1>;
  * Built on Radix UI primitives with WAI-ARIA compliance.
  *
  * Design Specs:
- * - TabsList border-radius: 0px (rounded-none)
- * - TabsTrigger border-radius: 0px (rounded-none)
+ * - TabsList border-radius: square, independent of `--radius`
+ * - TabsTrigger border-radius: square, independent of `--radius`; the active
+ *   state is a 2px bottom border that has to stay flush with the tab edges
  * - TabsList height: 40px (h-10)
  * - TabsTrigger padding: 12px 24px (px-3 py-1.5)
  * - Transition duration: 150ms (design system standard)
@@ -992,6 +1113,7 @@ type TabsContentProps = ComponentPropsWithoutRef<typeof Content$1>;
  * ```
  *
  * @see https://www.radix-ui.com/primitives/docs/components/tabs
+ * @public
  */
 declare const Tabs: react.ForwardRefExoticComponent<_radix_ui_react_tabs.TabsProps & react.RefAttributes<HTMLDivElement>>;
 /**
@@ -1002,8 +1124,34 @@ declare const Tabs: react.ForwardRefExoticComponent<_radix_ui_react_tabs.TabsPro
  * - Border-radius: none (for underline style)
  * - Background: transparent
  * - Layout: inline-flex (horizontal by default, use orientation="vertical" on Tabs root for vertical)
+ * @public
  */
-declare const TabsList: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const TabsList: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "ghost" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    /**
+     * Let a strip too wide for its container scroll sideways.
+     *
+     * The scroll container is a WRAPPER, never the list, and that is why this
+     * prop exists rather than callers reaching for `overflow-x-auto`
+     * themselves. Two things go wrong when the list is the scroller, and the
+     * second is why the obvious remedy is also wrong:
+     *
+     *  - Per the CSS overflow rules, `visible` computes to `auto` when the
+     *    other axis is neither `visible` nor `clip`, so `overflow-x` alone
+     *    always makes the element a VERTICAL scroll container too.
+     *  - `TabsTrigger` carries `-mb-0.5` so its 2px underline lands ON this
+     *    list's rail rather than below it. That pull-up puts content past the
+     *    content-box edge, which the new scroll container reports as vertical
+     *    overflow — so `overflow-y-hidden` would clip the 2px the underline is
+     *    made of, silencing a scrollbar by deleting the indicator.
+     *
+     * With the wrapper scrolling instead, the list keeps its rail and
+     * `w-max min-w-full` makes that rail span the full scroll width rather
+     * than stopping where the triggers do.
+     */
+    scrollable?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
 /**
  * TabsTrigger - Clickable tab button
  *
@@ -1012,8 +1160,8 @@ declare const TabsList: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tab
  * - Padding: 6px 16px (px-4 py-2)
  * - Font: text-sm (14px), font-medium (500)
  * - Transition: 150ms (design system standard)
- * - Active state: blue text with blue bottom  border border-primary/5 (2px)
- * - Hover: blue text with blue bottom  border border-primary/5
+ * - Active state: the accent colour on the text and on the 2px trailing border
+ * - Hover: the same accent, so the target reads before it is chosen
  * - Gmail-inspired clean underline style
  *
  * Accessibility:
@@ -1021,8 +1169,11 @@ declare const TabsList: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tab
  * - Focus ring: 2px with offset (WCAG 2.2 compliant)
  * - Disabled state: pointer-events-none, opacity-50
  * - Data attributes: [data-state="active|inactive"], [data-disabled]
+ * @public
  */
-declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    size?: "default" | "sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLButtonElement>>;
 /**
  * TabsContent - Content panel for each tab
  *
@@ -1034,17 +1185,46 @@ declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<_radix_ui_react_
  * - Focus indicator when navigating with Tab key
  * - Data attributes: [data-state="active|inactive"], [data-orientation]
  * - Only active content is visible, inactive content is hidden
+ * @public
  */
 declare const TabsContent: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
+/**
+ * The public prop types, DERIVED from the components rather than restated.
+ *
+ * `../types/tabs` describes the Radix props alone, so an alias taken from there
+ * rejects `variant` and `size` — and a consumer typing a wrapper around
+ * `TabsList` would be told the prop it can see in the signature does not exist.
+ * Reading the component's own props keeps the two from drifting: a variant
+ * added later reaches every consumer without a second edit.
+ */
+/**
+ * The list's props, including its `variant`.
+ * @public
+ */
+type TabsListProps = ComponentPropsWithoutRef<typeof TabsList>;
+/**
+ * The trigger's props, including its `size`.
+ * @public
+ */
+type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsTrigger>;
+
+/** @experimental */
 declare const TooltipProvider: react.FC<_radix_ui_react_tooltip.TooltipProviderProps>;
+/** @public */
 declare const Tooltip: react.FC<_radix_ui_react_tooltip.TooltipProps>;
+/** @public */
 declare const TooltipTrigger: react.ForwardRefExoticComponent<_radix_ui_react_tooltip.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+/** @public */
 declare const TooltipContent: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tooltip.TooltipContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
+/** @experimental */
 declare const Popover: react.FC<PopoverPrimitive.PopoverProps>;
+/** @experimental */
 declare const PopoverTrigger: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+/** @experimental */
 declare const PopoverAnchor: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 declare const PopoverContent: react.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
 /**
@@ -1078,9 +1258,9 @@ declare const PopoverContent: react.ForwardRefExoticComponent<Omit<PopoverPrimit
  * ```
  *
  * @design-spec
- * - Border-radius: 0px (rounded-none) per design system spec
+ * - Border-radius: `rounded-lg`, the container step of the `--radius` scale
  * - Max-width: 512px (default), responsive sizes available
- * - Backdrop: black/80 with blur effect
+ * - Backdrop: the `--nx-overlay` scrim with blur effect
  * - Padding: 24px (p-6)
  * - Shadow: xl for prominence (elevation level 4)
  * - Transition: 150ms per design system
@@ -1093,15 +1273,22 @@ declare const PopoverContent: react.ForwardRefExoticComponent<Omit<PopoverPrimit
  * - Includes ARIA labels and descriptions
  * - Screen reader announcements via role="dialog"
  * - Close button has sr-only text for screen readers
+ * @public
  */
 declare const Dialog: react.FC<DialogPrimitive.DialogProps>;
+/** @experimental */
 declare const DialogTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+/** @experimental */
 declare const DialogPortal: react.FC<DialogPrimitive.DialogPortalProps>;
+/** @experimental */
 declare const DialogClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+/** @experimental */
 type DialogOverlayProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
 /**
  * DialogOverlay - The backdrop overlay behind the dialog content.
- * Renders with black/80 opacity and blur effect per design spec.
+ * Renders the `--nx-overlay` scrim with a blur effect. The opacity is the
+ * token's, not a literal: it differs by mode and a host can retheme it.
+ * @experimental
  */
 declare const DialogOverlay: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 /**
@@ -1112,10 +1299,12 @@ declare const DialogOverlay: react.ForwardRefExoticComponent<Omit<DialogPrimitiv
  * @variant lg - Large dialog (672px / max-w-2xl) - complex forms, data tables
  * @variant xl - Extra large dialog (896px / max-w-4xl) - content editors, media galleries
  * @variant full - Full width with margin (responsive) - fullscreen on mobile
+ * @experimental
  */
 declare const dialogContentVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+/** @public */
 type DialogContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & VariantProps<typeof dialogContentVariants>;
 /**
  * DialogContent - The main dialog content container.
@@ -1128,16 +1317,20 @@ type DialogContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Conten
  *   Your content here
  * </DialogContent>
  * ```
+ * @public
  */
 declare const DialogContent: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
     size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLDivElement>>;
+/** @public */
 type DialogHeaderProps = HTMLAttributes<HTMLDivElement>;
 /**
  * DialogHeader - Container for dialog title and description.
  * Provides consistent spacing and alignment (centered on mobile, left-aligned on desktop).
+ * @public
  */
 declare const DialogHeader: react.ForwardRefExoticComponent<DialogHeaderProps & react.RefAttributes<HTMLDivElement>>;
+/** @public */
 type DialogFooterProps = HTMLAttributes<HTMLDivElement>;
 /**
  * DialogFooter - Container for dialog action buttons.
@@ -1150,16 +1343,20 @@ type DialogFooterProps = HTMLAttributes<HTMLDivElement>;
  *   <Button type="submit">Save Changes</Button>
  * </DialogFooter>
  * ```
+ * @public
  */
 declare const DialogFooter: react.ForwardRefExoticComponent<DialogFooterProps & react.RefAttributes<HTMLDivElement>>;
+/** @public */
 type DialogTitleProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
 /**
  * DialogTitle - The title of the dialog.
  * Uses text-lg (18px) with semibold weight per design system.
  *
  * @accessibility Required for screen readers. Always include a DialogTitle.
+ * @public
  */
 declare const DialogTitle: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+/** @public */
 type DialogDescriptionProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
 /**
  * DialogDescription - The description text of the dialog.
@@ -1167,52 +1364,72 @@ type DialogDescriptionProps = ComponentPropsWithoutRef<typeof DialogPrimitive.De
  *
  * @accessibility Provides additional context for screen readers.
  * If not needed visually, you can use sr-only class.
+ * @public
  */
 declare const DialogDescription: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
 
+/** @experimental */
 declare const AlertDialog: react.FC<AlertDialogPrimitive.AlertDialogProps>;
+/** @experimental */
 declare const AlertDialogTrigger: react.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+/** @experimental */
 declare const AlertDialogPortal: react.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+/** @experimental */
 type AlertDialogOverlayProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>;
 /**
  * AlertDialogOverlay - The backdrop overlay behind the dialog content.
+ * @experimental
  */
 declare const AlertDialogOverlay: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 type AlertDialogContentProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>;
 /**
  * AlertDialogContent - The main dialog content container.
+ * @experimental
  */
 declare const AlertDialogContent: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 type AlertDialogHeaderProps = HTMLAttributes<HTMLDivElement>;
 /**
  * AlertDialogHeader - Container for dialog title and description.
+ * @experimental
  */
 declare const AlertDialogHeader: react.ForwardRefExoticComponent<AlertDialogHeaderProps & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 type AlertDialogFooterProps = HTMLAttributes<HTMLDivElement>;
 /**
  * AlertDialogFooter - Container for dialog action buttons.
+ * @experimental
  */
 declare const AlertDialogFooter: react.ForwardRefExoticComponent<AlertDialogFooterProps & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 type AlertDialogTitleProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>;
 /**
  * AlertDialogTitle - The title of the alert dialog.
+ * @experimental
  */
 declare const AlertDialogTitle: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+/** @experimental */
 type AlertDialogDescriptionProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>;
 /**
  * AlertDialogDescription - The description text of the alert dialog.
+ * @experimental
  */
 declare const AlertDialogDescription: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+/** @experimental */
 type AlertDialogActionProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>;
 /**
  * AlertDialogAction - The primary action button (e.g., "Delete", "Confirm").
  * Styled as destructive by default.
+ * @experimental
  */
 declare const AlertDialogAction: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+/** @experimental */
 type AlertDialogCancelProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>;
 /**
  * AlertDialogCancel - The cancel button.
  * Styled as outline variant.
+ * @experimental
  */
 declare const AlertDialogCancel: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
@@ -1223,7 +1440,7 @@ declare const AlertDialogCancel: react.ForwardRefExoticComponent<Omit<AlertDialo
  * Provides context menus, action menus, and navigation menus with full keyboard support.
  *
  * **Design Specifications**:
- * - Border-radius: 0px (rounded-none) - consistent with Dialog, Select
+ * - Border-radius: `rounded-lg` for the menu surface, `rounded-sm` for items
  * - Padding: 4px (p-1) - compact spacing for menu items
  * - Shadow: shadow-md - floating element elevation
  * - Z-index: z-50 - above most content, below modals
@@ -1312,30 +1529,46 @@ declare const AlertDialogCancel: react.ForwardRefExoticComponent<Omit<AlertDialo
  * @see https://www.radix-ui.com/docs/primitives/components/dropdown-menu - Radix UI DropdownMenu
  */
 
+/** @public */
 declare const DropdownMenu: react.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+/** @public */
 declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+/** @experimental */
 declare const DropdownMenuGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 declare const DropdownMenuPortal: react.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+/** @experimental */
 declare const DropdownMenuSub: react.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+/** @experimental */
 declare const DropdownMenuRadioGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 declare const DropdownMenuSubTrigger: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
 } & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 declare const DropdownMenuSubContent: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/** @public */
 declare const DropdownMenuContent: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/** @public */
 declare const DropdownMenuItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
 } & react.RefAttributes<HTMLDivElement>>;
+/** @public */
 declare const DropdownMenuCheckboxItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 declare const DropdownMenuRadioItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 declare const DropdownMenuLabel: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
 } & react.RefAttributes<HTMLDivElement>>;
+/** @public */
 declare const DropdownMenuSeparator: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 declare const DropdownMenuShortcut: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
 
 /**
  * Props for the DropdownMenuSubTrigger component
+ * @experimental
  */
 type DropdownMenuSubTriggerProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
     /**
@@ -1345,14 +1578,17 @@ type DropdownMenuSubTriggerProps = react.ComponentPropsWithoutRef<typeof Dropdow
 };
 /**
  * Props for the DropdownMenuSubContent component
+ * @experimental
  */
 type DropdownMenuSubContentProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>;
 /**
  * Props for the DropdownMenuContent component
+ * @public
  */
 type DropdownMenuContentProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>;
 /**
  * Props for the DropdownMenuItem component
+ * @public
  */
 type DropdownMenuItemProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     /**
@@ -1362,14 +1598,17 @@ type DropdownMenuItemProps = react.ComponentPropsWithoutRef<typeof DropdownMenuP
 };
 /**
  * Props for the DropdownMenuCheckboxItem component
+ * @public
  */
 type DropdownMenuCheckboxItemProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>;
 /**
  * Props for the DropdownMenuRadioItem component
+ * @experimental
  */
 type DropdownMenuRadioItemProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>;
 /**
  * Props for the DropdownMenuLabel component
+ * @experimental
  */
 type DropdownMenuLabelProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
     /**
@@ -1379,10 +1618,12 @@ type DropdownMenuLabelProps = react.ComponentPropsWithoutRef<typeof DropdownMenu
 };
 /**
  * Props for the DropdownMenuSeparator component
+ * @public
  */
 type DropdownMenuSeparatorProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>;
 /**
  * Props for the DropdownMenuShortcut component
+ * @experimental
  */
 type DropdownMenuShortcutProps = react.HTMLAttributes<HTMLSpanElement>;
 
@@ -1400,15 +1641,15 @@ type DropdownMenuShortcutProps = react.HTMLAttributes<HTMLSpanElement>;
  * - Disabled state support
  *
  * Design Specs:
- * - Height: sm=32px, default=40px, lg=44px (matches Input component)
+ * - Height: sm=36px, default=40px, lg=44px (matches Input component)
  * - Padding: Horizontal 12px, vertical varies by size
- * - Border radius: 0px (rounded-none)
+ * - Border radius: `rounded-md` on the trigger, `rounded-lg` on the panel
  * - Border: 1px solid, changes on focus/error
  * - Transition: 150ms (consistent with design system)
  * - Font size: sm/default=14px (text-sm), lg=16px (text-base)
  *
  * Size Variants:
- * - sm: Height 32px (h-8) - Compact forms, filters
+ * - sm: Height 36px - Compact forms and filters, matching a small Button
  * - default: Height 40px (h-10) - Standard forms
  * - lg: Height 44px (h-11) - Prominent selects
  *
@@ -1419,23 +1660,101 @@ type DropdownMenuShortcutProps = react.HTMLAttributes<HTMLSpanElement>;
  * - Grouping support with labels
  * - Placeholder text support
  * - Error state via aria-invalid
+ * @public
  */
 declare function Select({ ...props }: ComponentProps<typeof SelectPrimitive.Root>): react_jsx_runtime.JSX.Element;
+/** @experimental */
 declare function SelectGroup({ ...props }: ComponentProps<typeof SelectPrimitive.Group>): react_jsx_runtime.JSX.Element;
+/** @public */
 declare function SelectValue({ ...props }: ComponentProps<typeof SelectPrimitive.Value>): react_jsx_runtime.JSX.Element;
+/** @experimental */
 declare const selectTriggerVariants: (props?: ({
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+/** @public */
 interface SelectTriggerProps extends ComponentProps<typeof SelectPrimitive.Trigger>, VariantProps<typeof selectTriggerVariants> {
 }
+/** @public */
 declare const SelectTrigger: react.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+/** @public */
 declare function SelectContent({ className, children, position, ...props }: ComponentProps<typeof SelectPrimitive.Content>): react_jsx_runtime.JSX.Element;
+/** @experimental */
 declare function SelectLabel({ className, ...props }: ComponentProps<typeof SelectPrimitive.Label>): react_jsx_runtime.JSX.Element;
+/** @public */
 declare function SelectItem({ className, children, ...props }: ComponentProps<typeof SelectPrimitive.Item>): react_jsx_runtime.JSX.Element;
+/** @experimental */
 declare function SelectSeparator({ className, ...props }: ComponentProps<typeof SelectPrimitive.Separator>): react_jsx_runtime.JSX.Element;
+/** @experimental */
 declare function SelectScrollUpButton({ className, ...props }: ComponentProps<typeof SelectPrimitive.ScrollUpButton>): react_jsx_runtime.JSX.Element;
+/** @experimental */
 declare function SelectScrollDownButton({ className, ...props }: ComponentProps<typeof SelectPrimitive.ScrollDownButton>): react_jsx_runtime.JSX.Element;
 
+/**
+ * Sheet Component Types
+ *
+ * TypeScript type definitions for the Sheet component (Dialog variant).
+ */
+
+/**
+ * Sheet root component props
+ * Extends Radix UI Dialog.Root props
+ * @public
+ */
+type SheetProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
+/**
+ * Sheet trigger component props
+ * Extends Radix UI Dialog.Trigger props
+ * @experimental
+ */
+type SheetTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
+/**
+ * Sheet close component props
+ * Extends Radix UI Dialog.Close props
+ * @experimental
+ */
+type SheetCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
+/**
+ * Sheet overlay component props
+ * Extends Radix UI Dialog.Overlay props
+ * @experimental
+ */
+type SheetOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
+/**
+ * Sheet header component props
+ * Standard div props
+ * @public
+ */
+type SheetHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Sheet footer component props
+ * Standard div props
+ * @experimental
+ */
+type SheetFooterProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Sheet title component props
+ * Extends Radix UI Dialog.Title props
+ * @public
+ */
+type SheetTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
+/**
+ * Sheet description component props
+ * Extends Radix UI Dialog.Description props
+ * @public
+ */
+type SheetDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
+/**
+ * Sheet component refs
+ * @experimental
+ */
+type SheetOverlayRef = React.ElementRef<typeof DialogPrimitive.Overlay>;
+/** @experimental */
+type SheetContentRef = React.ElementRef<typeof DialogPrimitive.Content>;
+/** @experimental */
+type SheetTitleRef = React.ElementRef<typeof DialogPrimitive.Title>;
+/** @experimental */
+type SheetDescriptionRef = React.ElementRef<typeof DialogPrimitive.Description>;
+
 /**
  * Sheet Component
  *
@@ -1448,7 +1767,7 @@ declare function SelectScrollDownButton({ className, ...props }: ComponentProps<
  *
  * - **Width**: 320px (sm), 400px (default), 512px (lg), 672px (xl), 100% (full)
  * - **Animation**: Slide-in from side (150ms duration)
- * - **Backdrop**: Semi-transparent overlay (50% opacity with backdrop blur)
+ * - **Backdrop**: the `--nx-overlay` scrim, with backdrop blur
  * - **z-index**: 50 (both overlay and content - content renders on top via DOM order)
  * - **Border-radius**: 0 (full-screen edges)
  *
@@ -1488,29 +1807,39 @@ declare function SelectScrollDownButton({ className, ...props }: ComponentProps<
  * ```
  *
  * @see https://www.radix-ui.com/primitives/docs/components/dialog
+ * @public
  */
-declare const Sheet: react.FC<DialogPrimitive.DialogProps>;
+declare const Sheet: {
+    ({ modal, children, ...props }: SheetProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/** @experimental */
 declare const SheetTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+/** @experimental */
 declare const SheetClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+/** @experimental */
 declare const SheetPortal: react.FC<DialogPrimitive.DialogPortalProps>;
 /**
  * SheetOverlay
  *
  * Semi-transparent backdrop that appears behind the sheet.
  *
- * - **Background**: Black with 50% opacity + backdrop blur
+ * - **Background**: the `--nx-overlay` scrim + backdrop blur
  * - **Animation**: Fade in/out (150ms)
  * - **z-index**: 50
+ * @experimental
  */
 declare const SheetOverlay: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 /**
  * Sheet Content Variants
  *
  * Defines slide-in animations for each side and size options.
+ * @experimental
  */
 declare const sheetVariants: (props?: ({
     side?: "top" | "right" | "bottom" | "left" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+/** @public */
 interface SheetContentProps extends react.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
 /**
@@ -1525,6 +1854,7 @@ interface SheetContentProps extends react.ComponentPropsWithoutRef<typeof Dialog
  * - **Close Button**: Positioned in top-right corner (16px from edges)
  *
  * @param side - Which edge to slide in from: "left", "right", "top", "bottom"
+ * @public
  */
 declare const SheetContent: react.ForwardRefExoticComponent<SheetContentProps & react.RefAttributes<HTMLDivElement>>;
 /**
@@ -1534,6 +1864,7 @@ declare const SheetContent: react.ForwardRefExoticComponent<SheetContentProps &
  *
  * - **Layout**: Flex column with 6px gap
  * - **Text Alignment**: Left (default) or center
+ * @public
  */
 declare const SheetHeader: {
     ({ className, ...props }: react.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
@@ -1546,6 +1877,7 @@ declare const SheetHeader: {
  *
  * - **Layout**: Flex row on desktop, column on mobile
  * - **Alignment**: Right-aligned on desktop, stretched on mobile
+ * @experimental
  */
 declare const SheetFooter: {
     ({ className, ...props }: react.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
@@ -1559,6 +1891,7 @@ declare const SheetFooter: {
  * - **Font**: text-lg font-semibold
  * - **Color**: text-foreground
  * - **Required**: For accessibility (screen readers)
+ * @public
  */
 declare const SheetTitle: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
 /**
@@ -1569,63 +1902,10 @@ declare const SheetTitle: react.ForwardRefExoticComponent<Omit<DialogPrimitive.D
  * - **Font**: text-sm
  * - **Color**: text-muted-foreground
  * - **Purpose**: Provide context for screen readers
+ * @public
  */
 declare const SheetDescription: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
 
-/**
- * Sheet Component Types
- *
- * TypeScript type definitions for the Sheet component (Dialog variant).
- */
-
-/**
- * Sheet root component props
- * Extends Radix UI Dialog.Root props
- */
-type SheetProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
-/**
- * Sheet trigger component props
- * Extends Radix UI Dialog.Trigger props
- */
-type SheetTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
-/**
- * Sheet close component props
- * Extends Radix UI Dialog.Close props
- */
-type SheetCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
-/**
- * Sheet overlay component props
- * Extends Radix UI Dialog.Overlay props
- */
-type SheetOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
-/**
- * Sheet header component props
- * Standard div props
- */
-type SheetHeaderProps = React.HTMLAttributes<HTMLDivElement>;
-/**
- * Sheet footer component props
- * Standard div props
- */
-type SheetFooterProps = React.HTMLAttributes<HTMLDivElement>;
-/**
- * Sheet title component props
- * Extends Radix UI Dialog.Title props
- */
-type SheetTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
-/**
- * Sheet description component props
- * Extends Radix UI Dialog.Description props
- */
-type SheetDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
-/**
- * Sheet component refs
- */
-type SheetOverlayRef = React.ElementRef<typeof DialogPrimitive.Overlay>;
-type SheetContentRef = React.ElementRef<typeof DialogPrimitive.Content>;
-type SheetTitleRef = React.ElementRef<typeof DialogPrimitive.Title>;
-type SheetDescriptionRef = React.ElementRef<typeof DialogPrimitive.Description>;
-
 /**
  * Command Component
  *
@@ -1651,7 +1931,7 @@ type SheetDescriptionRef = React.ElementRef<typeof DialogPrimitive.Description>;
  * @design-spec
  * - Input height: 48px (h-12) - larger for prominence
  * - Item height: 36px (h-9) desktop, 44px (h-11) mobile for touch
- * - Border radius: 0px (rounded-none) for items
+ * - Border radius: `rounded-lg` for the panel, `rounded-sm` for items
  * - Max list height: 400px (max-h-[400px])
  * - Transition: 150ms per design system
  *
@@ -1661,11 +1941,13 @@ type SheetDescriptionRef = React.ElementRef<typeof DialogPrimitive.Description>;
  * - Screen reader announcements for results
  * - Focus management and visual focus indicators
  * - WCAG 2.2 AA compliant (verified contrast ratios)
+ * @experimental
  */
 type CommandProps = ComponentPropsWithoutRef<typeof Command$1>;
 /**
  * Command - Root container for the command palette.
  * Handles filtering, keyboard navigation, and accessibility.
+ * @experimental
  */
 declare const Command: react.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
@@ -1684,7 +1966,31 @@ declare const Command: react.ForwardRefExoticComponent<Omit<{
     disablePointerSelection?: boolean;
     vimBindings?: boolean;
 } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-type CommandDialogProps = DialogPrimitive.DialogProps;
+/** @experimental */
+interface CommandDialogProps extends DialogPrimitive.DialogProps {
+    /**
+     * Passed to the command root this dialog renders internally.
+     *
+     * A seam rather than a list of forwarded props, because the settings a caller needs from the
+     * root are the ones this component happens not to have thought of: `label`, which supplies the
+     * search input's accessible name (cmdk renders an EMPTY hidden label without it, and an empty
+     * `aria-labelledby` reference is worse than none — it stops the placeholder naming the field);
+     * `filter` and `shouldFilter`, which decide match order; and `vimBindings`, which claims Ctrl+K
+     * and Ctrl+N inside the list.
+     *
+     * `children` is excluded because this component owns the dialog's contents.
+     */
+    commandProps?: Omit<ComponentPropsWithoutRef<typeof Command>, "children">;
+    /**
+     * Passed to the dialog content this component renders internally.
+     *
+     * The seam that matters here is `onCloseAutoFocus`: this dialog has no trigger, so Radix has
+     * nothing to hand focus back to, and it fires this at the point focus is actually being
+     * returned — after the exit animation, which a timer set at close time cannot know the length
+     * of. `className` is excluded because this component owns the dialog's own layout.
+     */
+    contentProps?: Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, "children" | "className">;
+}
 /**
  * CommandDialog - Command palette in a modal dialog.
  * Use this variant for Cmd+K keyboard shortcut pattern.
@@ -1711,12 +2017,15 @@ type CommandDialogProps = DialogPrimitive.DialogProps;
  *   </CommandDialog>
  * )
  * ```
+ * @experimental
  */
-declare const CommandDialog: ({ children, ...props }: CommandDialogProps) => react_jsx_runtime.JSX.Element;
+declare const CommandDialog: ({ children, commandProps, contentProps, ...props }: CommandDialogProps) => react_jsx_runtime.JSX.Element;
+/** @experimental */
 type CommandInputProps = ComponentPropsWithoutRef<typeof Command$1.Input>;
 /**
  * CommandInput - Search input field for filtering commands.
  * Includes search icon and styled per design system.
+ * @experimental
  */
 declare const CommandInput: react.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof react.InputHTMLAttributes<HTMLInputElement>> & {
     ref?: React.Ref<HTMLInputElement>;
@@ -1726,10 +2035,12 @@ declare const CommandInput: react.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     value?: string;
     onValueChange?: (search: string) => void;
 } & react.RefAttributes<HTMLInputElement>, "ref"> & react.RefAttributes<HTMLInputElement>>;
+/** @experimental */
 type CommandListProps = ComponentPropsWithoutRef<typeof Command$1.List>;
 /**
  * CommandList - Scrollable container for command results.
  * Max height 400px per design spec to prevent tall dialogs.
+ * @experimental
  */
 declare const CommandList: react.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
@@ -1740,10 +2051,12 @@ declare const CommandList: react.ForwardRefExoticComponent<Omit<{
 }, "asChild" | "key" | keyof HTMLAttributes<HTMLDivElement>> & {
     label?: string;
 } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 type CommandEmptyProps = ComponentPropsWithoutRef<typeof Command$1.Empty>;
 /**
  * CommandEmpty - Empty state message when no results found.
  * Centered text with muted color per design spec.
+ * @experimental
  */
 declare const CommandEmpty: react.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
@@ -1752,10 +2065,12 @@ declare const CommandEmpty: react.ForwardRefExoticComponent<Omit<{
 } & {
     asChild?: boolean;
 }, "asChild" | "key" | keyof HTMLAttributes<HTMLDivElement>> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 type CommandGroupProps = ComponentPropsWithoutRef<typeof Command$1.Group>;
 /**
  * CommandGroup - Grouped section of commands with optional heading.
  * Heading styled as uppercase, small, semibold per design spec.
+ * @experimental
  */
 declare const CommandGroup: react.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
@@ -1768,10 +2083,12 @@ declare const CommandGroup: react.ForwardRefExoticComponent<Omit<{
     value?: string;
     forceMount?: boolean;
 } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 type CommandSeparatorProps = ComponentPropsWithoutRef<typeof Command$1.Separator>;
 /**
  * CommandSeparator - Visual divider between command groups.
- * 1px line with  border border-primary/5 color, 8px margin top/bottom.
+ * 1px line with  border border-border color, 8px margin top/bottom.
+ * @experimental
  */
 declare const CommandSeparator: react.ForwardRefExoticComponent<Omit<Pick<Pick<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
@@ -1780,11 +2097,13 @@ declare const CommandSeparator: react.ForwardRefExoticComponent<Omit<Pick<Pick<r
 }, "asChild" | "key" | keyof HTMLAttributes<HTMLDivElement>> & {
     alwaysRender?: boolean;
 } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 type CommandItemProps = ComponentPropsWithoutRef<typeof Command$1.Item>;
 /**
  * CommandItem - Individual selectable command item.
  * Height: 36px desktop, 44px mobile per design spec.
  * Includes hover, focus, and selected states.
+ * @experimental
  */
 declare const CommandItem: react.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
@@ -1799,13 +2118,69 @@ declare const CommandItem: react.ForwardRefExoticComponent<Omit<{
     keywords?: string[];
     forceMount?: boolean;
 } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
 type CommandShortcutProps = HTMLAttributes<HTMLSpanElement>;
 /**
  * CommandShortcut - Keyboard shortcut display (e.g., "⌘K", "↵ Enter").
  * Monospace font, subtle background, right-aligned per design spec.
+ * @experimental
  */
 declare const CommandShortcut: react.ForwardRefExoticComponent<CommandShortcutProps & react.RefAttributes<HTMLSpanElement>>;
 
+/**
+ * The command palette's default match scorer, re-exported.
+ *
+ * A caller that overrides `filter` — to keep an opaque item value out of the scoring, say — still
+ * wants the ranking that comes for free, and reaching for `cmdk` directly is not open to every
+ * package here.
+ *
+ * Bound to a declaration rather than re-exported with `export { x as y }`: the bundler keeps a doc
+ * comment attached to a declaration and drops one attached to an export statement, so the release
+ * tag would not reach the published types.
+ *
+ * @experimental
+ */
+declare const commandDefaultFilter: (value: string, search: string, keywords?: string[]) => number;
+/**
+ * The value of the item the palette has HIGHLIGHTED, from a component inside
+ * it.
+ *
+ * The palette owns which item is highlighted, and it moves that highlight for
+ * reasons a caller never sees: a pointer crossing an item, an arrow key, and a
+ * filter that removes the item the highlight was on. Anything outside wanting
+ * to follow it — a preview pane, a description strip, a status line — needs to
+ * read that rather than keep a copy.
+ *
+ * Reading beats mirroring here for a specific reason rather than on principle.
+ * The palette's controlled `value` sets which item is MARKED, and does not move
+ * the internal cursor that `aria-activedescendant` and the scroll follow. So a
+ * caller that writes the value to steer the highlight desynchronises the two:
+ * the item drawn as current and the option announced as current stop agreeing,
+ * and after a filter the announcement can name an element that has been
+ * removed. A read leaves one owner and takes a derived view.
+ *
+ * NARROWED to the one field deliberately. The underlying library exposes its
+ * whole store through a selector — the raw search text, its internal item and
+ * group maps, the id it uses for `aria-activedescendant` — and publishing that
+ * selector would make every one of those part of this kit's public API and its
+ * generated declarations. A dependency upgrade could then reshape what callers
+ * can reach without any export changing name, which is exactly what the
+ * surface snapshot cannot see. This returns a string.
+ *
+ * Empty string means nothing is highlighted, which is the library's own
+ * spelling and a different answer from "an item whose value is unknown".
+ *
+ * Must be called from inside the palette, since that is where the state lives.
+ *
+ * Bound to a declaration rather than re-exported with `export { x as y }`: the
+ * bundler keeps a doc comment attached to a declaration and drops one attached
+ * to an export statement, so the release tag would not reach the published
+ * types.
+ *
+ * @experimental
+ */
+declare const useCommandHighlight: () => string;
+
 /**
  * Spinner Component - Design System Specification
  *
@@ -1849,6 +2224,7 @@ declare const CommandShortcut: react.ForwardRefExoticComponent<CommandShortcutPr
  * @example
  * // Custom color
  * <Spinner className="text-primary" />
+ * @experimental
  */
 declare const spinnerVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
@@ -1858,6 +2234,7 @@ declare const spinnerVariants: (props?: ({
  *
  * Extends LucideProps to support all standard SVG attributes (data-*, id, etc.)
  * while providing size variants and accessibility features.
+ * @experimental
  */
 type SpinnerProps = Omit<LucideProps, "size"> & VariantProps<typeof spinnerVariants> & {
     /**
@@ -1868,6 +2245,7 @@ type SpinnerProps = Omit<LucideProps, "size"> & VariantProps<typeof spinnerVaria
 };
 /**
  * Spinner component for loading states
+ * @experimental
  */
 declare const Spinner: react.ForwardRefExoticComponent<Omit<SpinnerProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
 
@@ -1936,9 +2314,9 @@ declare const Spinner: react.ForwardRefExoticComponent<Omit<SpinnerProps, "ref">
  *
  * Customization:
  * All styling uses CSS variables from the design system:
- * - --normal-bg: Background color (uses --popover with fallback)
- * - --normal-text: Text color (uses --popover-foreground with fallback)
- * - --normal-border: Border color (uses --border with fallback)
+ * - --normal-bg: Background color (uses --nx-popover with fallback)
+ * - --normal-text: Text color (uses --nx-popover-foreground with fallback)
+ * - --normal-border: Border color (uses --nx-border with fallback)
  * - --border-radius: Border radius (uses --radius with fallback)
  *
  * Security:
@@ -1960,20 +2338,30 @@ declare const Spinner: react.ForwardRefExoticComponent<Omit<SpinnerProps, "ref">
  *
  * @see https://sonner.emilkowal.ski/ - Sonner documentation
  * @see https://ui.shadcn.com/docs/components/sonner - shadcn/ui integration guide
+ * @experimental
  */
 declare function Toaster({ theme, ...props }: ToasterProps): react_jsx_runtime.JSX.Element;
 
+/** @experimental */
 declare const Table: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableElement> & react.RefAttributes<HTMLTableElement>>;
+/** @experimental */
 declare const TableHeader: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+/** @experimental */
 declare const TableBody: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+/** @experimental */
 declare const TableFooter: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+/** @experimental */
 declare const TableRow: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableRowElement> & react.RefAttributes<HTMLTableRowElement>>;
+/** @experimental */
 declare const TableHead: react.ForwardRefExoticComponent<react.ThHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
+/** @experimental */
 declare const TableCell: react.ForwardRefExoticComponent<react.TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
+/** @experimental */
 declare const TableCaption: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableCaptionElement> & react.RefAttributes<HTMLTableCaptionElement>>;
 
 /**
  * Props for TableSearch component
+ * @experimental
  */
 interface TableSearchProps {
     /** Current search value */
@@ -2008,11 +2396,13 @@ interface TableSearchProps {
  *   isLoading={loading}
  * />
  * ```
+ * @experimental
  */
 declare function TableSearch({ value, onChange, onClear, placeholder, isLoading, inputRef, }: TableSearchProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Props for TableError component
+ * @experimental
  */
 interface TableErrorProps {
     /** Error message to display */
@@ -2020,14 +2410,17 @@ interface TableErrorProps {
 }
 /**
  * Error state component for tables
+ * @experimental
  */
 declare function TableError({ message, }: TableErrorProps): react_jsx_runtime.JSX.Element;
 /**
  * Loading state component for tables
+ * @experimental
  */
 declare function TableLoading(): react_jsx_runtime.JSX.Element;
 /**
  * Props for TableEmpty component
+ * @experimental
  */
 interface TableEmptyProps {
     /** Custom message to display when no data */
@@ -2035,9 +2428,97 @@ interface TableEmptyProps {
 }
 /**
  * Empty state component for tables
+ * @experimental
  */
 declare function TableEmpty({ message }: TableEmptyProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * TableSkeleton Component
+ *
+ * Generic loading skeleton for data tables.
+ * Renders header, body, and footer skeleton bars inside a card.
+ * Unified with EntryTable skeleton pattern for consistency across all tables.
+ */
+
+/** @experimental */
+interface TableSkeletonProps {
+    columns?: number;
+    rowCount?: number;
+    hideWrapper?: boolean;
+    hideFooter?: boolean;
+}
+/** @experimental */
+declare const TableSkeleton: react.FC<TableSkeletonProps>;
+
+/**
+ * One preset a host offers.
+ *
+ * `color` is what the swatch is PAINTED with. `value` is what `onSwatchSelect`
+ * hands back, unread by this component — a host storing design tokens puts its
+ * own token reference there and receives it unchanged, so choosing a swatch
+ * never resolves a token into the colour it currently happens to be. Without
+ * that, re-theming stops moving the values that pointed at it.
+ *
+ * @experimental
+ */
+interface ColorSwatch<TValue = string> {
+    id: string;
+    label: string;
+    color: string;
+    value?: TValue;
+}
+/**
+ * Props for ColorPicker.
+ * @experimental
+ */
+interface ColorPickerProps<TValue = string> {
+    /** The colour shown on the surface, as hex. */
+    color: string;
+    /** A colour was chosen by editing — surface, hue, alpha or the hex field. */
+    onColorChange: (color: string) => void;
+    /** Presets. Painted from `color`, returned by `value`. */
+    swatches?: ColorSwatch<TValue>[];
+    /**
+     * A preset was chosen. Separate from `onColorChange` because only the host
+     * can say what a swatch MEANS: the two are different events, and collapsing
+     * them is what loses a token reference.
+     */
+    onSwatchSelect?: (swatch: ColorSwatch<TValue>) => void;
+    /**
+     * Recently used colours. Owned by the host, never by this component — the
+     * admin scopes them per user, and a component writing `localStorage` at
+     * render is unusable on a server and untestable without a DOM.
+     */
+    recentColors?: string[];
+    /** Alpha channel. Off by default: most call sites want an opaque colour. */
+    showAlpha?: boolean;
+    className?: string;
+}
+/**
+ * A colour control: a saturation square, a hue strip, optional alpha, a hex
+ * field, and any presets the host supplies.
+ *
+ * Deliberately knows nothing about design tokens. A swatch carries an opaque
+ * `value` this component never reads and hands back untouched, so a host can
+ * store a token reference and keep it. That is what lets one component serve
+ * both a plain colour field and a token-aware surface without either learning
+ * about the other.
+ *
+ * @experimental
+ *
+ * @example
+ * ```tsx
+ * <ColorPicker
+ *   color={color}
+ *   onColorChange={setColor}
+ *   swatches={tokens.map(t => ({ id: t.name, label: t.name, color: t.value, value: { $token: t.name } }))}
+ *   onSwatchSelect={s => store(s.value)}
+ * />
+ * ```
+ */
+declare function ColorPicker<TValue = string>({ color, onColorChange, swatches, onSwatchSelect, recentColors, showAlpha, className, }: ColorPickerProps<TValue>): react_jsx_runtime.JSX.Element;
+
+/** @experimental */
 interface PaginationMeta {
     total: number;
     page: number;
@@ -2046,14 +2527,17 @@ interface PaginationMeta {
     hasNext: boolean;
     hasPrev: boolean;
 }
+/** @experimental */
 interface SortInfo {
     field: string;
     direction: "asc" | "desc";
 }
+/** @experimental */
 interface FilterInfo {
     search?: string;
     filters?: Record<string, unknown>;
 }
+/** @experimental */
 interface TableParams {
     pagination: {
         page: number;
@@ -2062,258 +2546,934 @@ interface TableParams {
     sorting?: SortInfo[];
     filters?: FilterInfo;
 }
+/** @experimental */
 interface ListResponse<TData> {
     items: TData[];
     meta: PaginationMeta;
 }
+/** @experimental */
 interface PaginationConfig {
     pageSize?: number;
     pageSizeOptions?: number[];
     showPageSizeSelector?: boolean;
     maxVisiblePages?: number;
 }
+/** @experimental */
 interface ActionCallbacks<TData = unknown> {
     onEdit?: (item: TData) => void;
     onDelete?: (item: TData) => void;
     onView?: (item: TData) => void;
 }
+/** @experimental */
 type DataFetcher<TData> = (params: TableParams) => Promise<ListResponse<TData>>;
 
-/**
- * Props for TablePagination component
- */
-interface TablePaginationProps {
-    /** Pagination metadata from server */
-    meta: PaginationMeta;
-    /** Callback when page changes */
-    onPageChange: (page: number) => void;
-    /** Callback when page size changes */
-    onPageSizeChange: (pageSize: number) => void;
-    /** Pagination configuration */
-    config?: Required<PaginationConfig>;
-    /** Whether data is currently loading */
-    isLoading?: boolean;
+interface PortalProviderProps {
+    /** The DOM element to portal overlay content into. Defaults to document.body (Radix default). */
+    container: HTMLElement | null;
+    children: ReactNode;
 }
+/** @public */
+declare function PortalProvider({ container, children }: PortalProviderProps): react_jsx_runtime.JSX.Element;
+/** @public */
+declare function usePortalContainer(): HTMLElement | undefined;
+
+/** @experimental */
+declare const ContextMenu: react.FC<ContextMenuPrimitive.ContextMenuProps>;
+/** @experimental */
+declare const ContextMenuTrigger: react.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & react.RefAttributes<HTMLSpanElement>>;
+/** @experimental */
+declare const ContextMenuGroup: react.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
+declare const ContextMenuSub: react.FC<ContextMenuPrimitive.ContextMenuSubProps>;
+/** @experimental */
+declare const ContextMenuRadioGroup: react.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
+declare const ContextMenuSubTrigger: react.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
+declare const ContextMenuSubContent: react.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
+declare const ContextMenuContent: react.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
+declare const ContextMenuItem: react.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
+declare const ContextMenuCheckboxItem: react.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
+declare const ContextMenuRadioItem: react.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
+declare const ContextMenuLabel: react.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
+declare const ContextMenuSeparator: react.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 /**
- * Pagination controls for tables
+ * A keyboard shortcut hint, right-aligned in the item.
+ *
+ * @experimental
  */
-declare function TablePagination({ meta, onPageChange, onPageSizeChange, config, isLoading, }: TablePaginationProps): react_jsx_runtime.JSX.Element;
+declare const ContextMenuShortcut: {
+    ({ className, ...props }: react.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 /**
- * TableSkeleton Component
+ * A splitter's accessible name, which the caller must supply one way or the
+ * other.
+ *
+ * REQUIRED rather than documented, because the handle is focusable: a keyboard
+ * user lands on it whether or not anyone remembered, and an unnamed separator
+ * announces its position — "74" — with nothing saying what is at 74. The
+ * caller is the only one who can name it, since only the caller knows what the
+ * two panels hold, so the type is the only place the requirement can live.
+ *
+ * Either attribute satisfies it and neither may be paired with the other: two
+ * names on one element is not a stronger label, it is an ambiguity resolved by
+ * precedence rules nobody writing the call site is thinking about.
+ */
+type SplitterName = {
+    "aria-label": string;
+    "aria-labelledby"?: never;
+} | {
+    "aria-labelledby": string;
+    "aria-label"?: never;
+};
+/**
+ * A group of resizable panels, laid out horizontally or vertically.
  *
- * Generic loading skeleton for data tables.
- * Renders header, body, and footer skeleton bars inside a card.
- * Unified with EntryTable skeleton pattern for consistency across all tables.
+ * @experimental
  */
-
-interface TableSkeletonProps {
-    columns?: number;
-    rowCount?: number;
-    hideWrapper?: boolean;
-    hideFooter?: boolean;
-}
-declare const TableSkeleton: react.FC<TableSkeletonProps>;
+declare const ResizablePanelGroup: ({ className, ...props }: react.ComponentProps<typeof ResizablePrimitive.Group>) => react_jsx_runtime.JSX.Element;
+/**
+ * One region of a panel group.
+ *
+ * @experimental
+ */
+declare const ResizablePanel: typeof ResizablePrimitive.Panel;
+/**
+ * The draggable divider between two panels.
+ *
+ * The visible line is 1px; the element around it is wider and transparent, so the pointer target
+ * is comfortably larger than the line it appears to grab. `withGrip` adds a visible handle, which
+ * is worth it on a divider people are meant to discover rather than one they already expect.
+ *
+ * @experimental
+ */
+declare const ResizableHandle: ({ withGrip, className, children, ...props }: Omit<react.ComponentProps<typeof ResizablePrimitive.Separator>, "aria-label" | "aria-labelledby"> & SplitterName & {
+    withGrip?: boolean;
+}) => react_jsx_runtime.JSX.Element;
 
 /**
- * Column definition for ResponsiveTable
+ * TreeView
+ *
+ * A keyboard-operable, virtualized tree. The layers panel of an editor is this control: a
+ * hierarchy that can hold thousands of nodes, that someone navigates with arrow keys as much as
+ * with a pointer, and that has to stay responsive while they do.
  *
- * Provides type-safe column definitions with proper type narrowing for render functions.
+ * **Why virtualized, and why that decides the markup.** A document of a few thousand blocks
+ * renders a few thousand rows, and the cost is not the React work — it is layout and paint on
+ * every expand, scroll and selection. Only the visible window is rendered here.
  *
- * @template T - The data type of items in the table
- * @template K - The specific key from T (defaults to any key of T)
+ * That has a consequence the accessibility notes below depend on: with only a window in the DOM,
+ * the nested `role="group"` markup the tree pattern usually uses **cannot be built**, because an
+ * item's children may not be rendered at all. The APG covers this exact case by allowing a FLAT
+ * set of `treeitem`s that describe the hierarchy through `aria-level`, `aria-setsize` and
+ * `aria-posinset` instead of through nesting. A screen reader reads depth and position from those
+ * attributes, so they are not decoration — without them a virtualized tree announces itself as a
+ * flat list of whatever happens to be on screen.
+ *
+ * **Why a headless virtualizer.** The markup above is the requirement, so anything that owns the
+ * DOM is unusable. `@tanstack/react-virtual` computes offsets and renders nothing.
+ *
+ * **State is controllable, not controlled.** `expandedIds`/`selectedId` may be passed with their
+ * `onChange` partners to drive the tree from a store — which an editor will do, since selection is
+ * shared with the canvas and the inspector — or omitted entirely, in which case the tree keeps its
+ * own. Requiring a store for a tree in a settings dialog would be a poor trade.
+ *
+ * **Design specifications**:
+ * - Row height: fixed 28px (`--tree-row`), so the virtualizer needs no measurement pass
+ * - Indent: 12px per level, applied as padding so the whole row stays a hit target
+ * - Selection: `bg-muted`, matching the menu highlight rather than a full-contrast flip
+ * - Focus: `focus-visible` ring in the focus token
+ *
+ * **Accessibility**:
+ * - `role="tree"` with flat `role="treeitem"` children carrying `aria-level`, `aria-setsize`,
+ *   `aria-posinset`, and `aria-expanded` on anything with children
+ * - Roving tabindex: exactly one row is in the tab order, so Tab enters and leaves the tree once
+ *   rather than walking every node
+ * - Arrow keys move and expand, per the APG tree pattern: Right expands then descends, Left
+ *   collapses then ascends, Home/End jump to the ends, `*` expands every sibling
+ * - Typeahead focuses the next row whose label starts with what was typed
+ * - Moving focus scrolls the row into view, which virtualization would otherwise prevent: a row
+ *   outside the window has no element to focus
  *
  * @example
  * ```tsx
- * interface User {
- *   id: string;
- *   name: string;
- *   age: number;
- * }
- *
- * // Type-safe column definition with proper inference
- * const columns: Column<User>[] = [
- *   {
- *     key: "name",
- *     label: "Name",
- *     // value is inferred as string, not string | number
- *     render: (value, user) => <strong>{value}</strong>
- *   },
- *   {
- *     key: "age",
- *     label: "Age",
- *     // value is inferred as number, not string | number
- *     render: (value) => `${value} years old`
- *   }
- * ];
+ * <TreeView
+ *   nodes={layers}
+ *   aria-label="Layers"
+ *   selectedId={selected}
+ *   onSelectedChange={setSelected}
+ *   className="h-full"
+ * />
  * ```
+ *
+ * @module
  */
-type Column<T, K extends keyof T = keyof T> = {
-    /** Unique key for the column (must match a property in T) */
-    key: K;
-    /** Display label for the column header */
-    label: react.ReactNode;
-    /** Optional custom renderer for cell content with type-safe value */
-    render?: (value: T[K], item: T) => react.ReactNode;
-    /** Hide column on mobile card view (optional, default: false) */
-    hideOnMobile?: boolean;
-    /** Hide the label on mobile card view (optional, default: false) */
-    hideLabelOnMobile?: boolean;
-    /** Optional custom className for the table header cell */
-    headerClassName?: string;
-    /** Optional custom className for the table body cell */
-    cellClassName?: string;
-};
+
 /**
- * Props for ResponsiveTable component
+ * One node of the tree. Children are omitted or empty for a leaf.
  *
- * @template T - The data type of items in the table, must have an 'id' property
+ * @experimental
  */
-type ResponsiveTableProps<T extends {
+interface TreeNode {
+    /** Stable identity. What selection and expansion are keyed by. */
     id: string;
-}> = {
-    /** Array of data items to display */
-    data: T[];
-    /** Array of column definitions */
-    columns: Column<T>[];
-    /** Optional callback when a row/card is clicked */
-    onRowClick?: (item: T) => void;
-    /** Optional custom renderer for mobile card view */
-    renderMobileCard?: (item: T, columns: Column<T>[]) => react.ReactNode;
-    /** Optional custom className for the container */
-    className?: string;
-    /** Optional empty state message */
-    emptyMessage?: string;
-    /** Optional ARIA label for the table (improves screen reader experience) */
-    ariaLabel?: string;
-    /** Optional custom className for the internal desktop table wrapper */
-    tableWrapperClassName?: string;
-    /** Optional footer content rendered inside the table card (e.g. Pagination) */
-    footer?: react.ReactNode;
+    /** What the row shows. A string also feeds typeahead; anything else needs `textValue`. */
+    label: react.ReactNode;
+    /**
+     * The text typeahead matches on, when `label` is not a string.
+     *
+     * Without it a row rendered as markup cannot be typed to, and a keyboard user loses the fastest
+     * way through a long tree.
+     */
+    textValue?: string;
+    /** Children, if any. An empty array still marks the node as a parent. */
+    children?: readonly TreeNode[];
+    /** Shown before the label, after the twisty. */
+    icon?: react.ReactNode;
+    /** Skipped by every keyboard move and not selectable. */
+    disabled?: boolean;
+}
+/**
+ * Which gesture a row's modifiers meant.
+ *
+ * Named by the same three words the rest of the system uses, so a caller maps
+ * them onto its own selection rules without translating. Both Meta and Control
+ * mean toggle: a Mac author presses Command and a Windows author presses
+ * Control, and neither ever presses the other's.
+ *
+ * Shift outranks the toggle modifier — a shift+mod click is a slip rather than
+ * a fourth gesture, and extending is the one whose result is visible and undone
+ * by a plain click.
+ *
+ * @experimental
+ */
+type TreeSelectionMode = "replace" | "toggle" | "extend";
+/** @experimental */
+interface TreeViewProps extends Omit<react.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** The roots of the tree. */
+    nodes: readonly TreeNode[];
+    /** Expanded node ids, if the caller owns them. */
+    expandedIds?: readonly string[];
+    /** Which ids start expanded when the caller does not own expansion. */
+    defaultExpandedIds?: readonly string[];
+    /** Called with the full next set whenever a branch opens or closes. */
+    onExpandedChange?: (ids: string[]) => void;
+    /**
+     * The selected node id, if the caller owns it.
+     *
+     * With `selectedIds` also supplied this is the PRIMARY — the row a detail
+     * panel answers for. Drawn at a heavier weight so a reader can tell which
+     * member of a multi-row selection the rest of the screen describes.
+     */
+    selectedId?: string | null;
+    /**
+     * Every selected id, when the caller holds more than one.
+     *
+     * Additive: omit it and the tree behaves exactly as it did. Supplying it also
+     * makes the tree announce itself as `aria-multiselectable`, which is why it
+     * is a separate prop rather than inferred — a single-select tree claiming to
+     * be multi-selectable is wrong in a way a screen-reader user acts on.
+     */
+    selectedIds?: readonly string[];
+    /** Which id starts selected when the caller does not own selection. */
+    defaultSelectedId?: string | null;
+    /** Called when a row is chosen, by pointer or by Enter. */
+    onSelectedChange?: (id: string, mode: TreeSelectionMode) => void;
+    /**
+     * Names the tree for a screen reader. One of this or `aria-labelledby` is required: a tree
+     * announced only as "tree" tells a user nothing about which one they are in.
+     */
+    "aria-label"?: string;
+}
+/**
+ * A virtualized tree.
+ *
+ * @experimental
+ */
+declare const TreeView: react.ForwardRefExoticComponent<TreeViewProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * The assistive-technology attributes a single thumb can carry.
+ *
+ * @experimental
+ */
+interface SliderThumbProps {
+    /** The thumb's accessible name. */
+    "aria-label"?: string;
+    /** An element naming the thumb, when the name is already on screen. */
+    "aria-labelledby"?: string;
+    /**
+     * What the value MEANS, when the number alone does not say it — "40
+     * percent", "Medium". Announced in place of the raw number.
+     */
+    "aria-valuetext"?: string;
+    /** An element carrying help text for this thumb. */
+    "aria-describedby"?: string;
+}
+/**
+ * The slider's props, mirroring the Radix root.
+ *
+ * @experimental
+ */
+type SliderProps = Omit<react.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, "asChild"> & {
+    /**
+     * Assistive-technology attributes per thumb, in value order.
+     *
+     * The reason this exists at all: the focusable element with the `slider`
+     * role is the THUMB, and none of these attributes are inherited from the
+     * root. Anything a caller puts on the root is therefore announced by
+     * nothing, and the thumbs are generated internally so they cannot be
+     * reached any other way.
+     *
+     * Deliberately a curated set rather than the thumb's full prop type. This
+     * is the surface assistive technology reads; opening it to arbitrary props
+     * would let a caller replace the class names or the role the control
+     * depends on, and every escape hatch in a design system eventually gets
+     * used that way.
+     *
+     * Required for a RANGE: two thumbs sharing one name are announced
+     * identically, so nothing says which end is held. A single thumb falls back
+     * to the root's `aria-label`/`aria-labelledby`, so the one-thumb API stays
+     * as documented.
+     */
+    thumbs?: readonly SliderThumbProps[];
 };
 /**
- * Ref type for ResponsiveTable component
+ * A bounded numeric value chosen by dragging.
+ *
+ * @experimental
  */
-type ResponsiveTableRef = HTMLDivElement;
+declare const Slider: react.ForwardRefExoticComponent<Omit<Omit<SliderPrimitive.SliderProps & react.RefAttributes<HTMLSpanElement>, "ref">, "asChild"> & {
+    /**
+     * Assistive-technology attributes per thumb, in value order.
+     *
+     * The reason this exists at all: the focusable element with the `slider`
+     * role is the THUMB, and none of these attributes are inherited from the
+     * root. Anything a caller puts on the root is therefore announced by
+     * nothing, and the thumbs are generated internally so they cannot be
+     * reached any other way.
+     *
+     * Deliberately a curated set rather than the thumb's full prop type. This
+     * is the surface assistive technology reads; opening it to arbitrary props
+     * would let a caller replace the class names or the role the control
+     * depends on, and every escape hatch in a design system eventually gets
+     * used that way.
+     *
+     * Required for a RANGE: two thumbs sharing one name are announced
+     * identically, so nothing says which end is held. A single thumb falls back
+     * to the root's `aria-label`/`aria-labelledby`, so the one-thumb API stays
+     * as documented.
+     */
+    thumbs?: readonly SliderThumbProps[];
+} & react.RefAttributes<HTMLSpanElement>>;
 
-declare const ResponsiveTable: <T extends {
-    id: string;
-}>(props: ResponsiveTableProps<T> & {
-    ref?: react.ForwardedRef<HTMLDivElement>;
-}) => react.ReactElement;
+/**
+ * The single owner of keyboard shortcuts for an application.
+ *
+ * ## Why this exists
+ *
+ * Shortcuts are usually registered by whoever needs them, each component adding its own
+ * `document` listener. That works until two of them want the same key, and then it fails in a way
+ * that is very hard to see: `stopPropagation()` does NOT stop other listeners on the same node —
+ * that requires `stopImmediatePropagation()`, and even then only for listeners registered later.
+ * So every global handler runs, in mount order, and mount order is not something a developer
+ * chose. Pressing Escape during a drag can cancel the drag AND navigate away from the page,
+ * because two independent listeners each believed they owned the key.
+ *
+ * This module replaces that with one listener and an explicit precedence rule.
+ *
+ * ## The model: a stack of layers
+ *
+ * A **layer** is a set of bindings belonging to one interactive context — the application shell,
+ * a dialog, an editor canvas mid-drag. Layers are ordered, the topmost is offered each keystroke
+ * first, and the first binding that matches consumes it.
+ *
+ * Precedence is `(depth, sequence)`: the deeper layer wins, and between layers at equal depth the
+ * more recently registered wins.
+ *
+ * Of those two, **depth is declared and sequence is incidental** — and only declared properties
+ * survive a refactor. A layer that unmounts and remounts takes a fresh sequence number, so a
+ * subtree rebuilt for unrelated reasons can change equal-depth ordering. The guidance that falls
+ * out: if relative order matters to you, express it as depth, because depth is the part of the
+ * tuple you control. Equal-depth ordering is for stacking things that arrive in genuine
+ * mount order, such as one dialog over another. Depth comes from how the application nests, so precedence
+ * follows the component tree rather than a set of coordinated numbers — the z-index problem,
+ * avoided. Equal-depth ordering is what stacks a second dialog above the first.
+ *
+ * A layer may be **blocking**, meaning it also swallows the keys it does NOT bind. That is the
+ * property a drag or a modal needs: while it is up, nothing beneath it can act. This is the same
+ * shape as a window manager's keyboard grab, and as the dismissable-layer stack this kit's
+ * dialogs already sit on.
+ *
+ * ## What it deliberately does not do
+ *
+ * It listens in the BUBBLE phase, so a focused component that handles its own keys and calls
+ * `stopPropagation()` wins without needing to know this module exists. React attaches its
+ * handlers at the app root, below `document`, so an `onKeyDown` prop is a sufficient opt-out.
+ * Capturing instead would make this module outrank every component in the tree, including the
+ * kit's own dialogs, and there would be no way for a component to decline.
+ *
+ * @module lib/shortcuts/manager
+ */
+/**
+ * One shortcut and what it does.
+ *
+ * @experimental
+ */
+interface ShortcutBinding {
+    /** The keys, as understood by `parseKeys` — `"mod+s"`, `"Escape"`, `"g d"`. */
+    keys: string;
+    /**
+     * What this does, in words, for a shortcuts help panel. Required because an undiscoverable
+     * shortcut helps only the person who wrote it.
+     */
+    description: string;
+    /** Runs when the shortcut fires. */
+    run: (event: KeyboardEvent) => void;
+    /** Checked at press time; a binding whose condition is false is skipped and passes the key on. */
+    when?: () => boolean;
+    /**
+     * Whether this fires while the user is typing in a field.
+     *
+     * Defaults to true for bindings whose FIRST chord carries a non-shift modifier or is Escape,
+     * and false otherwise — the rule nearly every application converges on. `mod+s` must save
+     * mid-sentence and Escape must dismiss, while a bare `n` must be able to be the letter n.
+     *
+     * The first chord decides because it is the keystroke that has to be taken from the field.
+     * `mod+k c` is a command from its opening chord, so its bare `c` completes it in an input. A
+     * sequence that OPENS on a plain character cannot fire while typing whatever it ends with:
+     * allowing `g Escape` would mean swallowing the `g` of every word containing one.
+     */
+    whenTyping?: boolean;
+    /** Whether to call `preventDefault()` when it fires. Defaults to true. */
+    preventDefault?: boolean;
+}
+/**
+ * How a layer behaves for keys it does not bind.
+ *
+ * @experimental
+ */
+interface ShortcutLayerOptions {
+    /** Identifies the layer in diagnostics and in a help panel. */
+    name: string;
+    /** Precedence: deeper layers are offered keystrokes first. */
+    depth: number;
+    /**
+     * Whether unmatched keys stop here instead of reaching layers beneath.
+     *
+     * The reason a drag can be interrupted safely: everything below is inert for as long as this
+     * is set, so no other context can act on a keystroke aimed at this one.
+     */
+    blocking?: boolean;
+    /**
+     * Sorted ABOVE depth, so a layer can outrank one nested deeper than itself.
+     *
+     * Depth alone cannot express a modal. A modal wants to sit above every ordinary layer, but the
+     * host chooses how deeply its own shortcuts are scoped, so any depth a modal picks can be tied
+     * or beaten by a scope the host nests one level further. Priority is the axis the host does not
+     * control: ordinary layers leave it at 0 and a modal raises it.
+     *
+     * KNOWN LIMIT, stated so it is not discovered: layers at EQUAL priority still compare depth
+     * before registration order. Two modals therefore stack by how deeply each is scoped rather
+     * than by which opened last, so a modal opened later at a shallower depth can sit under one
+     * opened earlier and nested deeper — while whatever renders them puts the newer on top.
+     *
+     * Fixing it needs the manager to record when a layer is ACTIVATED, which registration order
+     * does not capture: `useShortcuts` registers once at mount and updates its options in place, so
+     * a layer enabled later still carries its mount-time sequence. Not attempted here because
+     * nothing reaches it yet — `priority` is new and one layer sets it, so no two layers currently
+     * share a nonzero value.
+     */
+    priority?: number;
+    /** Whether the layer participates at all. A disabled layer neither matches nor blocks. */
+    enabled?: boolean;
+}
+/**
+ * A layer's registration, held by whoever created it.
+ *
+ * @experimental
+ */
+interface ShortcutRegistration {
+    /** Replace this layer's bindings and options without changing its precedence. */
+    update: (bindings: readonly ShortcutBinding[], options: ShortcutLayerOptions) => void;
+    /** Remove the layer. */
+    dispose: () => void;
+}
+/**
+ * Options for creating a manager.
+ *
+ * @experimental
+ */
+interface ShortcutManagerOptions {
+    /** Whether `mod` means Command. Detected from the platform when omitted. */
+    isApple?: boolean;
+    /** How long a partially typed sequence waits for its next key, in milliseconds. */
+    sequenceTimeoutMs?: number;
+    /** Clock source, for tests that need to control sequence expiry. */
+    now?: () => number;
+}
+/**
+ * A shortcut manager: the registry, the matcher, and the one listener.
+ *
+ * @experimental
+ */
+interface ShortcutManager {
+    /** Add a layer. */
+    register: (bindings: readonly ShortcutBinding[], options: ShortcutLayerOptions) => ShortcutRegistration;
+    /**
+     * Offer a keystroke to the stack. Returns whether it was consumed.
+     *
+     * Public so the behaviour can be tested without a DOM, and so a host that already owns its
+     * event plumbing can drive the manager itself.
+     */
+    handle: (event: KeyboardEvent) => boolean;
+    /** Install the single listener on a target, returning a function that removes it. */
+    attach: (target: Pick<EventTarget, "addEventListener" | "removeEventListener">) => () => void;
+    /**
+     * Every active binding, most-precedent layer first, for a shortcuts help panel.
+     *
+     * The same array is returned until the layer stack changes, so it is safe to use as an external
+     * store snapshot without re-rendering on every read.
+     */
+    activeBindings: () => readonly ActiveShortcut[];
+    /**
+     * Watch for changes to the layer stack.
+     *
+     * A help panel mounting alongside the components that register shortcuts would otherwise read
+     * BEFORE their effects run and show nothing, with no later render to correct it.
+     */
+    subscribe: (onChange: () => void) => () => void;
+}
+/**
+ * A binding as presented to a help panel, with the layer it came from.
+ *
+ * @experimental
+ */
+interface ActiveShortcut {
+    keys: string;
+    description: string;
+    layer: string;
+}
+/**
+ * Create a shortcut manager.
+ *
+ * @experimental
+ */
+declare function createShortcutManager(options?: ShortcutManagerOptions): ShortcutManager;
 
-interface PortalProviderProps {
-    /** The DOM element to portal overlay content into. Defaults to document.body (Radix default). */
-    container: HTMLElement | null;
-    children: ReactNode;
+/**
+ * Props for {@link ShortcutProvider}.
+ *
+ * @experimental
+ */
+interface ShortcutProviderProps extends ShortcutManagerOptions {
+    children?: react.ReactNode;
+    /**
+     * Where the listener is installed. Defaults to `document`.
+     *
+     * The bubble phase is deliberate: a component that handles its own keys and calls
+     * `stopPropagation` wins without knowing this exists, because React attaches its handlers
+     * below `document`.
+     */
+    target?: Pick<EventTarget, "addEventListener" | "removeEventListener"> | null;
 }
-declare function PortalProvider({ container, children }: PortalProviderProps): react_jsx_runtime.JSX.Element;
-declare function usePortalContainer(): HTMLElement | undefined;
+/**
+ * Installs the application's one keydown listener and roots the layer stack.
+ *
+ * @experimental
+ */
+declare function ShortcutProvider({ children, target, ...managerOptions }: ShortcutProviderProps): react.JSX.Element;
+/**
+ * Raises the precedence of everything inside it by one level.
+ *
+ * @experimental
+ */
+declare function ShortcutScope({ children, }: {
+    children?: react.ReactNode;
+}): react.JSX.Element;
+/**
+ * Options for {@link useShortcuts}, minus the depth, which comes from the tree.
+ *
+ * @experimental
+ */
+interface UseShortcutsOptions {
+    /** Identifies this layer in a help panel. */
+    name: string;
+    /** Whether the layer participates. A disabled layer neither matches nor blocks. */
+    enabled?: boolean;
+    /**
+     * Whether unmatched keys stop here rather than reaching layers beneath.
+     *
+     * Set this while a drag or a modal interaction owns the keyboard.
+     */
+    blocking?: boolean;
+    /**
+     * Sorted ABOVE depth, so a layer can outrank one nested deeper than itself.
+     *
+     * For a modal, whose hold must not be tied or beaten by a host scoping its own shortcuts one
+     * level further. Ordinary layers leave this alone.
+     */
+    priority?: number;
+}
+/**
+ * Register shortcuts for as long as the calling component is mounted.
+ *
+ * The bindings array may be rebuilt on every render; it is re-read in place rather than
+ * re-registered, so inline closures are fine and the layer keeps its position in the stack.
+ *
+ * @experimental
+ */
+declare function useShortcuts(bindings: readonly ShortcutBinding[], options: UseShortcutsOptions): void;
+/**
+ * The manager itself, for a help panel that lists what is currently bound.
+ *
+ * @experimental
+ */
+declare function useShortcutManager(): ShortcutManager;
+/**
+ * The shortcuts currently in effect, most precedent first.
+ *
+ * SUBSCRIBED rather than read once. A help panel mounting alongside the components that register
+ * shortcuts reads before their effects have run, so a one-time read returns an empty list and no
+ * later render corrects it — the panel simply shows nothing. The same applies whenever a layer is
+ * enabled, disabled or replaced while the panel is open.
+ *
+ * The manager returns the same array until its stack changes, so this re-renders when the
+ * shortcuts change and not on every read.
+ *
+ * @experimental
+ */
+declare function useActiveShortcuts(): readonly ActiveShortcut[];
 
 /**
- * Utility function to merge class names with Tailwind CSS support.
+ * Parsing and matching for keyboard shortcut specifications.
  *
- * Combines clsx for conditional class names with tailwind-merge
- * to properly handle Tailwind CSS class conflicts.
+ * A spec is written the way it is spoken: `"mod+s"`, `"Escape"`, `"shift+alt+f"`, and — for a
+ * sequence — `"g d"`, meaning `g` then `d`. Steps are separated by spaces; within a step,
+ * modifiers are joined to the key with `+`.
  *
- * @example
- * ```typescript
- * cn('px-2 py-1', 'px-4') // => 'py-1 px-4'
- * cn('text-red-500', condition && 'text-blue-500')
- * ```
+ * The space bar is written `"Space"`, because the character the browser reports for it is `" "`
+ * and a spec split on whitespace has no way to carry that.
+ *
+ * **`mod` is the point of this module.** It resolves to Command on Apple platforms and Control
+ * everywhere else, so a binding is written once. Writing `ctrl` or `meta` explicitly is still
+ * possible and then means exactly that, which is what lets a platform-specific binding coexist
+ * with a portable one — a distinction lost by any implementation that treats the two as
+ * interchangeable.
+ *
+ * @module lib/shortcuts/key-spec
+ */
+/**
+ * One keystroke: a key plus the modifier state required with it.
+ *
+ * @experimental
+ */
+interface KeyChord {
+    /** The `KeyboardEvent.key` value, normalized to lower case for single characters. */
+    readonly key: string;
+    /** Command on Apple platforms, Control elsewhere. */
+    readonly mod: boolean;
+    readonly ctrl: boolean;
+    readonly meta: boolean;
+    readonly alt: boolean;
+    readonly shift: boolean;
+}
+/**
+ * A shortcut: one chord, or several pressed in order.
+ *
+ * @experimental
+ */
+type KeySequence = readonly KeyChord[];
+/**
+ * Parse a spec into the sequence of chords it describes.
+ *
+ * @param spec - For example `"mod+s"`, `"Escape"`, or `"g d"`.
+ * @throws If the spec is empty, or a step names modifiers but no key.
+ *
+ * @experimental
+ */
+declare function parseKeys(spec: string): KeySequence;
+/**
+ * The modifier state an event carries, with `mod` already resolved for the platform.
+ *
+ * @experimental
+ */
+interface ModifierState {
+    readonly ctrlKey: boolean;
+    readonly metaKey: boolean;
+    readonly altKey: boolean;
+    readonly shiftKey: boolean;
+    /** Optional, so a caller driving the matcher by hand need not synthesise one. */
+    readonly getModifierState?: (key: string) => boolean;
+}
+/**
+ * Whether a chord describes the given keystroke.
+ *
+ * Modifiers are matched EXACTLY rather than as a minimum: a binding for `s` must not fire on
+ * `mod+s`, which is a different shortcut and very often a destructive one.
+ *
+ * @param chord - The chord to test.
+ * @param key - The event's `key`.
+ * @param state - The event's modifier flags.
+ * @param isApple - Whether `mod` should resolve to Command rather than Control.
+ *
+ * @experimental
+ */
+declare function chordMatches(chord: KeyChord, key: string, state: ModifierState, isApple: boolean): boolean;
+/**
+ * Whether this platform uses Command as its primary modifier.
+ *
+ * Reads the modern `userAgentData` hint before the deprecated `navigator.platform`, and answers
+ * `false` when neither exists — the non-Apple default is also the correct answer for a server
+ * render, where no keystroke can arrive.
+ *
+ * @experimental
  */
-declare function cn(...inputs: ClassValue[]): string;
+declare function detectApplePlatform(): boolean;
 
 /**
- * Tailwind CSS preset for @nextlyhq/ui components.
- *
- * Defines the CSS custom property contract that all UI components expect.
- * Consumers must provide the actual CSS variable values in their stylesheets.
- *
- * Usage (Tailwind v3):
- *   // tailwind.config.ts
- *   import uiPreset from "@nextlyhq/ui/tailwind-preset";
- *   export default { presets: [uiPreset], ... };
- *
- * Usage (Tailwind v4 with @config):
- *   Consumers define the equivalent @theme tokens in their CSS.
- *   This file serves as the reference contract.
- */
-declare const uiPreset: {
-    theme: {
-        extend: {
-            colors: {
-                border: string;
-                input: string;
-                ring: string;
-                background: string;
-                foreground: string;
-                primary: {
-                    DEFAULT: string;
-                    foreground: string;
-                };
-                secondary: {
-                    DEFAULT: string;
-                    foreground: string;
-                };
-                destructive: {
-                    DEFAULT: string;
-                    foreground: string;
-                };
-                success: {
-                    DEFAULT: string;
-                    foreground: string;
-                };
-                warning: {
-                    DEFAULT: string;
-                    foreground: string;
-                };
-                muted: {
-                    DEFAULT: string;
-                    foreground: string;
-                };
-                accent: {
-                    DEFAULT: string;
-                    foreground: string;
-                };
-                popover: {
-                    DEFAULT: string;
-                    foreground: string;
-                };
-                card: {
-                    DEFAULT: string;
-                    foreground: string;
-                };
-            };
-            borderRadius: {
-                lg: string;
-                md: string;
-                sm: string;
-            };
-            keyframes: {
-                "accordion-down": {
-                    from: {
-                        height: string;
-                    };
-                    to: {
-                        height: string;
-                    };
-                };
-                "accordion-up": {
-                    from: {
-                        height: string;
-                    };
-                    to: {
-                        height: string;
-                    };
-                };
-            };
-            animation: {
-                "accordion-down": string;
-                "accordion-up": string;
-            };
-        };
-    };
-};
+ * How wide a field's CONTROL may grow.
+ *
+ * Named rather than measured so a page cannot invent a one-off width, which is
+ * how the eight admin forms diverged. The caps read from custom properties with
+ * literal fallbacks, so a theme can retune them centrally without this file
+ * changing and without a page overriding them locally.
+ * @experimental
+ */
+type FieldWidth = "half" | "full" | "fill";
+/**
+ * The wiring `FieldShell` computes for its control: the id to attach, the
+ * composed `aria-describedby` (`undefined` when nothing is rendered to point
+ * at), and whether a rendered `error` forces the control invalid (`undefined`
+ * when there is no error to force one way or the other).
+ *
+ * A render-function `children` (see `FieldShellProps`) receives exactly this
+ * object — the SAME computation the element-clone path derives its
+ * `cloneElement` overrides from — so a caller wiring a compound control (a
+ * Radix `Select`'s trigger, for example) gets precisely the values the
+ * simple, single-element case would have applied.
+ * @experimental
+ */
+interface FieldShellRenderProps {
+    id: string;
+    describedBy: string | undefined;
+    invalid: boolean | undefined;
+}
+/** @experimental */
+interface FieldShellProps {
+    label?: React.ReactNode;
+    /** Helper text under the control. Rendered only when present. */
+    description?: React.ReactNode;
+    /** Validation message under the control. Rendered only when present. */
+    error?: React.ReactNode;
+    /** Defaults to "half": most admin inputs are short values. */
+    width?: FieldWidth;
+    htmlFor?: string;
+    className?: string;
+    /**
+     * Either a single element to clone, or a function that receives the
+     * computed wiring and applies it itself.
+     *
+     * The element form is `FieldShell` cloning it with `cloneElement` to
+     * attach the id, `aria-describedby` and `aria-invalid` it computes —
+     * unchanged from before, and still the right choice for an atomic control
+     * (`Input`, `Textarea`, `Switch`) that spreads its own props onto a real
+     * DOM node. Typing this branch as `ReactNode` would let a composite field
+     * (two inputs with a unit between them, for example) compile and then
+     * crash on mount, so it stays a single `ReactElement` — wrap several
+     * elements in one real element, a `<div>`, not a `<Fragment>`: a Fragment
+     * forwards none of those props to what is inside it.
+     *
+     * The function form exists for a compound control built on a Radix `Root`
+     * (`Select`, and by the same shape `RadioGroup`): `Root` destructures a
+     * fixed, named prop list and never spreads the remainder, so `id` handed
+     * to it via `cloneElement` is silently dropped rather than reaching the
+     * actual focusable element two levels down (`Select` > `SelectTrigger` >
+     * `SelectValue`). A render function is called with `FieldShellRenderProps`
+     * and applies `id`/`describedBy`/`invalid` to whichever nested element is
+     * the real control, instead of relying on a single top-level clone that
+     * can never reach it.
+     */
+    children: React.ReactElement | ((field: FieldShellRenderProps) => React.ReactNode);
+}
+/** @experimental */
+interface FormActionsProps {
+    /**
+     * Whether the form has unsaved changes. Supplied by the page from the form
+     * state that already tracks it; never computed here.
+     */
+    dirty?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+
+/** @experimental */
+declare function FieldShell({ label, description, error, width, htmlFor, className, children, }: FieldShellProps): react_jsx_runtime.JSX.Element;
+
+/** @experimental */
+interface FormSectionProps {
+    /** Short label above the card, rendered uppercase. */
+    label: string;
+    /** Optional sentence under the label. */
+    description?: react.ReactNode;
+    className?: string;
+    children: react.ReactNode;
+}
+/**
+ * A labelled card holding a group of fields.
+ *
+ * Composes `Card` rather than hand-rolling its own border and background, so
+ * a section carries the CONTAINER radius tier `Card` already defines instead
+ * of a second, drifting copy of the same chrome. There is deliberately no
+ * footer slot. A form commits as one document, so its action belongs to the
+ * page rather than to a section.
+ * @experimental
+ */
+declare function FormSection({ label, description, className, children, }: FormSectionProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * One action bar per form, at the end of the page's measure.
+ *
+ * A form commits as a single document, so there is one place to commit it. The
+ * dirty flag arrives from the page because the form state already answers that
+ * question, and a second implementation of it here would disagree with the
+ * first as soon as either changed.
+ * @experimental
+ */
+declare function FormActions({ dirty, className, children }: FormActionsProps): react_jsx_runtime.JSX.Element;
+
+/** @experimental */
+interface PageShellProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Which measure the content column is bounded to. `full` removes the cap so
+     * the column takes whatever the panel gives it, while KEEPING the gutter — a
+     * full-width page is still inset from the panel's edge.
+     */
+    width?: "form" | "wide" | "full";
+}
+/**
+ * What each named width resolves to, owned here because this is what applies it.
+ *
+ * Declared as a lookup rather than branched at the call site so the three arms
+ * are one list. A `switch` here would let a fourth width be added to the type
+ * and forgotten in the mapping, which the checker cannot see through a
+ * `default` arm.
+ *
+ * Exported because a caller whose CONTENT carries the measure needs the same
+ * value as a length, and the alternative is a second table naming the same
+ * tokens — which drifts silently, since both look correct beside their own
+ * neighbours. Reading it here means there is one answer rather than two that
+ * agree today.
+ *
+ * @experimental
+ */
+declare const SHELL_MEASURE: Record<NonNullable<PageShellProps["width"]>, string>;
+/**
+ * The page's inset and measure, owned in one place and spent as GRID COLUMNS.
+ *
+ * This replaces a pairing in which an outer container padded the panel and an
+ * inner one padded again while capping the width. That shape had three
+ * defects, and all three are structural rather than cosmetic:
+ *
+ *  - The two insets ADDED, because padding is not something a descendant can
+ *    cancel. Measured on the settings page, the header sat at x=360 and the
+ *    form card at x=384 — a 24px disagreement between two elements that are
+ *    supposed to share a left edge. Here the inset is a column, so there is one
+ *    declaration and no second site to disagree with it.
+ *  - A measure applied INSIDE a form component lets anything the page renders
+ *    beside that form escape it. With the page owning the shell, a sibling is
+ *    inside the measure by default and leaves it only by saying `Bleed`.
+ *  - Centring by `mx-auto` on a max-width box does nothing at panel widths
+ *    where the cap does not bind. Here the two outer tracks are equal and
+ *    flexible, so the content column is centred at every width and no
+ *    `justify-content` is declared — with flexible tracks the grid fills its
+ *    container and there is no free space for one to distribute.
+ *
+ * Vertical padding stays ordinary `padding-block`: it is not in tension with
+ * the columns, and keeping it here means one component answers the whole of
+ * "how far is content from the panel's edge".
+ * @experimental
+ */
+declare const PageShell: react.ForwardRefExoticComponent<PageShellProps & react.RefAttributes<HTMLDivElement>>;
+/** @experimental */
+type BleedProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * Opts one child out of the measure, edge to edge across the shell's gutter.
+ *
+ * The sanctioned form of something that previously only happened by accident.
+ * A wide data table, a delivery log or a toolbar declares that it wants the
+ * full panel, so a reviewer can see the intent — and, just as usefully, a block
+ * that is merely in the wrong place no longer LOOKS like a deliberate
+ * full-bleed.
+ *
+ * Valid only as a DIRECT child of `PageShell`. The `full-start`/`full-end`
+ * lines are named on the shell's own grid, so they are in scope for its
+ * children and nowhere else; nested inside a `FormSection` this renders a plain
+ * block and the `grid-column` is inert. That is a real constraint rather than a
+ * stylistic preference, and `page-shell.test.tsx` pins both halves: that a
+ * `Bleed` rendered directly under the shell is its child, and that one nested a
+ * level deeper does NOT receive the full column.
+ *
+ * It forwards its ref and any div attributes for the same reason: a consumer
+ * cannot reach for the usual remedy of wrapping it, because a wrapper is
+ * precisely what makes it stop working.
+ * @experimental
+ */
+declare const Bleed: react.ForwardRefExoticComponent<BleedProps & react.RefAttributes<HTMLDivElement>>;
+
+/** @experimental */
+interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** The page's name, rendered as its `h1`. */
+    title: string;
+    /**
+     * A sentence under the title. A `ReactNode` rather than a string because a
+     * description carrying a link or an inline code span is ordinary here, and
+     * typing it narrowly would push those pages back to hand-rolling the header.
+     */
+    description?: ReactNode;
+    /** The trail above the title. The page supplies it; this only places it. */
+    breadcrumbs?: ReactNode;
+    /** Page-level actions, trailing the title on one line where there is room. */
+    actions?: ReactNode;
+}
+/**
+ * A page's own identity — its trail, its name, its one-line summary and its
+ * actions — rendered once instead of at every page that needs one.
+ *
+ * Every value arrives as a PROP, and that is the point rather than an
+ * implementation detail. The markup this replaces was written out by hand on 22
+ * pages, and the settings pages took their title from a ~130-line chain that
+ * matched `window.location.pathname` in a file none of them import. Both are
+ * the same defect from opposite ends: a page knows what it is, and nothing let
+ * it say so — so the title lived either in 22 copies or in one foreign file
+ * that had to be edited whenever a route was added.
+ *
+ * The route registry already made this decision for the sidebar. A private
+ * route must DECLARE the rail section it belongs to, because the sidebar reads
+ * that declaration rather than matching the URL, which makes a route added
+ * without one a compile error instead of a page that silently highlights the
+ * wrong entry. A title derived from a pathname is the same defect in the half
+ * nobody had covered.
+ *
+ * It also makes a plugin's page indistinguishable from a first-party one: a
+ * plugin cannot add a branch to an if-chain it does not ship, but it can pass a
+ * prop.
+ * @experimental
+ */
+declare const PageHeader: react.ForwardRefExoticComponent<PageHeaderProps & react.RefAttributes<HTMLElement>>;
 
-export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type ActionCallbacks, Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, type Column, Command, CommandDialog, type CommandDialogProps, CommandEmpty, type CommandEmptyProps, CommandGroup, type CommandGroupProps, CommandInput, type CommandInputProps, CommandItem, type CommandItemProps, CommandList, type CommandListProps, type CommandProps, CommandSeparator, type CommandSeparatorProps, CommandShortcut, type CommandShortcutProps, type DataFetcher, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type FilterInfo, Input, type InputProps, Label, type ListResponse, type PaginationConfig, type PaginationMeta, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalProvider, Progress, type ProgressProps, RadioGroup, RadioGroupItem, ResponsiveTable, type ResponsiveTableProps, type ResponsiveTableRef, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, type SheetContentRef, SheetDescription, type SheetDescriptionProps, type SheetDescriptionRef, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, SheetOverlay, type SheetOverlayProps, type SheetOverlayRef, SheetPortal, type SheetProps, SheetTitle, type SheetTitleProps, type SheetTitleRef, SheetTrigger, type SheetTriggerProps, Skeleton, type SkeletonProps, type SortInfo, Spinner, type SpinnerProps, Switch, Table, TableBody, TableCaption, TableCell, TableEmpty, type TableEmptyProps, TableError, type TableErrorProps, TableFooter, TableHead, TableHeader, TableLoading, TablePagination, type TablePaginationProps, type TableParams, TableRow, TableSearch, type TableSearchProps, TableSkeleton, type TableSkeletonProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, dialogContentVariants, inputVariants, progressVariants, selectTriggerVariants, sheetVariants, spinnerVariants, uiPreset, usePortalContainer };
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type ActionCallbacks, type ActiveShortcut, Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Bleed, type BleedProps, Button, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, type ColorPickerProps, type ColorSwatch, Command, CommandDialog, type CommandDialogProps, CommandEmpty, type CommandEmptyProps, CommandGroup, type CommandGroupProps, CommandInput, type CommandInputProps, CommandItem, type CommandItemProps, CommandList, type CommandListProps, type CommandProps, CommandSeparator, type CommandSeparatorProps, CommandShortcut, type CommandShortcutProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type DataFetcher, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, FieldShell, type FieldShellProps, type FieldShellRenderProps, type FieldWidth, type FilterInfo, FormActions, type FormActionsProps, FormLabelWithTooltip, type FormLabelWithTooltipProps, FormSection, type FormSectionProps, Grid, type GridProps, Input, type InputProps, type KeyChord, type KeySequence, Label, type ListResponse, type ModifierState, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, type PaginationConfig, type PaginationMeta, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalProvider, Progress, type ProgressProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, SHELL_MEASURE, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, type SheetContentRef, SheetDescription, type SheetDescriptionProps, type SheetDescriptionRef, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, SheetOverlay, type SheetOverlayProps, type SheetOverlayRef, SheetPortal, type SheetProps, SheetTitle, type SheetTitleProps, type SheetTitleRef, SheetTrigger, type SheetTriggerProps, type ShortcutBinding, type ShortcutLayerOptions, type ShortcutManager, type ShortcutManagerOptions, ShortcutProvider, type ShortcutProviderProps, type ShortcutRegistration, ShortcutScope, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderThumbProps, type SortInfo, Spinner, type SpinnerProps, Stack, type StackProps, Stat, type StatProps, Switch, Table, TableBody, TableCaption, TableCell, TableEmpty, type TableEmptyProps, TableError, type TableErrorProps, TableFooter, TableHead, TableHeader, TableLoading, type TableParams, TableRow, TableSearch, type TableSearchProps, TableSkeleton, type TableSkeletonProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeNode, TreeView, type TreeViewProps, type UseShortcutsOptions, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, chordMatches, commandDefaultFilter, createShortcutManager, detectApplePlatform, dialogContentVariants, inputVariants, parseKeys, progressVariants, selectTriggerVariants, sheetVariants, spinnerVariants, useActiveShortcuts, useCommandHighlight, usePortalContainer, useShortcutManager, useShortcuts };