@semio/ui 0.0.0 → 0.1.0

package/dist/index.d.ts

@@ -1,11 +1,23 @@
-import * as react from 'react';
-import react__default, { ReactNode, MutableRefObject, CSSProperties, MouseEventHandler, MouseEvent as MouseEvent$1, RefObject, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, FocusEventHandler, ButtonHTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CollapsibleContentProps, CollapsibleTriggerProps, CollapsibleProps } from '@radix-ui/react-collapsible';
+import * as react from 'react';
+import react__default, { ReactNode, MouseEvent as MouseEvent$1, MouseEventHandler, AriaRole, AriaAttributes, KeyboardEventHandler, Ref, CSSProperties, RefObject, ForwardRefExoticComponent, RefAttributes, ChangeEvent, TouchEvent as TouchEvent$1, DragEvent, KeyboardEvent as KeyboardEvent$1, FocusEvent, InputHTMLAttributes, TextareaHTMLAttributes, ReactElement } from 'react';
+import { MotionValue } from 'motion/react';
+import * as zustand from 'zustand';
+import { StoreApi } from 'zustand';
+import * as THREE from 'three';
+import { ThreeEvent } from '@react-three/fiber';
+import * as jotai from 'jotai';
 import { RawColor } from '@semio/utils';
-import { ReferenceType, useFloating, VirtualElement } from '@floating-ui/react';
+export { ContextConfig, ContextSolutionConfig, OptionalContextProps, composeContexts, createContextChecker, createContextHook, createContextProvider, createContextSolution, useOptionalContext, withOptionalContext } from '@semio/utils';
+import { IconProps } from '@solar-icons/react-perf';
+import { IconProps as IconProps$1 } from '@tabler/icons-react';
+import { Collapsible } from 'radix-ui';
+import { RectReadOnly } from 'react-use-measure';
 import { Accept } from 'react-dropzone';
-import { TablerIconsProps } from '@tabler/icons-react';
+
+declare function CopyLinkButton({ link }: {
+    link: string;
+}): react_jsx_runtime.JSX.Element;
 
 /**
  * Theme options for the application's appearance.
@@ -74,19 +86,23 @@ declare enum Size {
     /**
      * Extra small size.
      */
-    Xs = "xs",
+    Xs = "size-xs",
     /**
      * Small size.
      */
-    Sm = "sm",
+    Sm = "size-sm",
     /**
      * Medium size (default).
      */
-    Md = "md",
+    Md = "size-md",
     /**
      * Large size.
      */
-    Lg = "lg"
+    Lg = "size-lg",
+    /**
+     * Extra large size.
+     */
+    Xl = "size-xl"
 }
 /**
  * Time display format options.
@@ -99,91 +115,153 @@ declare enum TimeDisplay {
      */
     Frames = "frames",
     /**
-     * Display time in seconds and milliseconds format.
+     * Display time in milliseconds only.
      */
-    SecondsPlusMilliseconds = "seconds+milliseconds",
+    Milliseconds = "milliseconds",
     /**
-     * Display time in minutes, seconds, and milliseconds format.
+     * Display time in seconds (milliseconds are decimals).
      */
-    MinutesPlusSecondsPlusMilliseconds = "minutes+seconds+milliseconds",
+    Seconds = "seconds",
     /**
      * Display time in seconds and frames format.
      */
-    SecondsPlusFrames = "seconds+frames",
-    /**
-     * Display time in seconds only.
-     */
-    Seconds = "seconds"
+    SecondsPlusFrames = "seconds+frames"
 }
-/**
- * Types of nested parent components.
- *
- * Includes Context and Dropdown parents
- */
-declare enum NestedParent {
-    /**
-     * Parent is a context component.
-     */
-    Context = "context",
-    /**
-     * Parent is a dropdown component.
-     */
-    Dropdown = "dropdown"
+interface ToolbarWidget {
+    id: string;
+    type: "toolbar-widget";
+    component: ReactNode;
+    mobileConfig?: {
+        location: "header" | "menu";
+        component?: ReactNode;
+    };
+}
+interface ToolbarSpacer {
+    id: string;
+    type: "toolbar-spacer";
+}
+type ToolbarItem = ToolbarWidget | ToolbarSpacer;
+type MenuItemClickFn = (id: string, event?: MouseEvent$1<HTMLButtonElement>) => Promise<void> | void;
+declare enum PaneRegion {
+    Footer = "footer",
+    Left = "left",
+    Right = "Right"
+}
+interface PaneSpec {
+    id: string;
+    name: string;
+    icon: ReactNode;
+    size: string | number;
+    clickFn?: MenuItemClickFn;
+    preventClose?: boolean;
+    content?: ReactNode;
+    inLeftMenu: boolean;
+    inRightMenu: boolean;
+    disabled?: boolean;
+    region?: PaneRegion;
+    shouldClose?: boolean;
 }
 
-declare function stampToVisualTime(stamp: number, duration: number, framerate: number, timeDisplay: TimeDisplay, showDetail?: boolean): string;
+interface AnchorProps {
+    onClick: () => void;
+    variant?: Variant;
+    children: string;
+}
+declare function Anchor({ onClick, variant, children }: AnchorProps): react_jsx_runtime.JSX.Element;
 
-interface LayoutProps {
-    menu: ReactNode;
-    leftSidebar?: ReactNode;
-    rightSidebar?: ReactNode;
-    bottomPanel?: ReactNode;
-    children: ReactNode;
-    menuRef?: MutableRefObject<HTMLDivElement | null>;
-    leftSidebarRef?: MutableRefObject<HTMLDivElement | null>;
-    rightSidebarRef?: MutableRefObject<HTMLDivElement | null>;
-    bottomPanelRef?: MutableRefObject<HTMLDivElement | null>;
-    style?: CSSProperties;
-    gradient?: boolean;
-    className?: string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: ReactNode;
+    altText?: string;
+    disabled?: boolean;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    variant?: Variant;
+    color?: string;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    size?: Size | "fit";
+    deemphasize?: boolean;
+    submit?: boolean;
+    visuals?: "default" | "inverted" | "inverted-border" | "call-to-action" | "list-item";
 }
 /**
- * Renders the inner layout of the application.
- *
- * TODO: Update with resizeable panes and pop out windows.
- *
- * @param menu - The menu component.
- * @param leftSidebar - The left sidebar component.
- * @param rightSidebar - The right sidebar component.
- * @param bottomPanel - The bottom panel component.
- * @param children - The content to be rendered in the main body.
+ * A button that displays text and/or icons. If no text and one icon is provided, the button will be a square with padding.
+ * @param children - The text to display on the button
+ * @param altText - The alt text to accompany the button
+ * @param disabled - Whether the button is disabled
+ * @param onClick - Optional click handler
+ * @param variant - Optional variant to apply to the button (default is "default")
+ * @param color - Optional custom color to apply to the button
+ * @param leftIcon - Optional left icon to add to the button
+ * @param rightIcon - Optional right icon to add to the button
+ * @param size - Optional size to apply to the button
+ * @param deemphasize - Whether to deemphasize the button (subtler background and colored text)
+ * @param invert - Whether to invert the button colors (no background and colored text)
+ * @param border - Whether to add a border to the button
  */
-declare function InnerLayout({ menu, leftSidebar, rightSidebar, bottomPanel, children, menuRef, leftSidebarRef, rightSidebarRef, bottomPanelRef, style, gradient, className, }: LayoutProps): react_jsx_runtime.JSX.Element;
-declare const Layout: react.MemoExoticComponent<typeof InnerLayout>;
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
-interface Step {
+interface HeaderButtonProps extends Omit<ButtonProps, "submit" | "color" | "deemphasize" | "invert" | "border" | "callToAction" | "leftIcon" | "rightIcon" | "alt" | "children"> {
     label: string;
-    completed: boolean;
-    disabled: boolean;
-    content?: ReactNode;
+    icon: ReactNode;
 }
-interface VerticalStepperProps {
-    steps: Step[];
-    activeStep?: number;
-    onStepChange: (step: number) => void;
+declare const HeaderButton: react.ForwardRefExoticComponent<HeaderButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface MenuButtonProps {
+    children: string;
+    altText?: string;
+    icon: ReactNode;
+    onClick?: MouseEventHandler;
+    active?: boolean;
+    hoverable?: boolean;
+    /**
+     * Show a subtle accent-tinted background on hover, and a darker tint when
+     * the button has `active` (i.e. `data-active`). Off by default — opt in
+     * for menu-style lists where rows should react visually to the cursor.
+     */
+    bg?: boolean;
+    /**
+     * When true, all visual active-state styling (background tint *and* the
+     * accent text/icon color from `variant-responsive-selectable-text`) only
+     * applies at the `desktop:` breakpoint. `aria-current` and `data-active`
+     * are unaffected so semantics stay correct.
+     *
+     * Useful for sidebars that drill-in on mobile — once the user navigates
+     * away from the list, a "selected" highlight on the sidebar is misleading.
+     */
+    activeOnDesktopOnly?: boolean;
+    variant?: Variant;
+    status?: {
+        variant?: Variant;
+        placement?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+        text?: string;
+    };
+    className?: string;
+    textClassName?: string;
+    /** Pass-through for native button focus/role/aria-* used by the tablist pattern. */
+    tabIndex?: number;
+    role?: AriaRole;
+    "aria-selected"?: AriaAttributes["aria-selected"];
+    "aria-controls"?: AriaAttributes["aria-controls"];
+    id?: string;
+    onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+    /** Ref to the underlying `<button>` element. */
+    ref?: Ref<HTMLButtonElement>;
 }
-declare function VerticalStepper({ steps, onStepChange, activeStep }: VerticalStepperProps): react_jsx_runtime.JSX.Element;
+declare function MenuButton({ children, altText, icon, onClick, active, hoverable, bg, activeOnDesktopOnly, status, variant, className, textClassName, tabIndex, role, "aria-selected": ariaSelected, "aria-controls": ariaControls, id, onKeyDown, ref, }: MenuButtonProps): react_jsx_runtime.JSX.Element;
 
-interface MenuProps {
-    header?: ReactNode;
-    footer?: ReactNode;
-    children: ReactNode;
+interface ProgressProps {
+    progress: number;
+    variant?: Variant;
+    size?: Size;
 }
-declare function Menu({ header, footer, children }: MenuProps): react_jsx_runtime.JSX.Element;
-declare function useMenu(): {
-    open: boolean;
-    setOpen: (open: boolean) => void;
-};
+declare function Progress({ progress, variant, size }: ProgressProps): react_jsx_runtime.JSX.Element;
+interface ProgressCircleProps {
+    progress: number | MotionValue<number>;
+    variant?: Variant;
+    size?: Size;
+    icon?: ReactNode;
+}
+declare function ProgressCircle({ size, progress, variant, icon }: ProgressCircleProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Renders a spinner component. If children are provided, the spinner will bounce and spin the child,
@@ -202,62 +280,109 @@ declare function Spinner({ children }: {
 
 interface StatusProps {
     variant?: Variant;
+    size?: Size;
     placement?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
     children: ReactNode;
     text?: string;
     hidden?: boolean;
+    className?: string;
 }
 declare const Status: react.ForwardRefExoticComponent<StatusProps & react.RefAttributes<HTMLDivElement>>;
 
-interface ProgressProps {
-    progress: number;
+interface ContextMenuProps {
+    content: ReactNode;
+    children: ReactNode;
+    variant?: Variant;
     color?: string;
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
 }
-declare function Progress({ progress, color }: ProgressProps): react_jsx_runtime.JSX.Element;
+declare function ContextMenu({ content, children, variant, color, disabled, onOpenChange }: ContextMenuProps): react_jsx_runtime.JSX.Element;
 
-interface SidebarChild {
-    title: string;
-    key: string;
-    content: ReactNode;
-}
-interface SidebarProps {
-    children: SidebarChild[];
-    sidebar: string | null;
-    side?: "left" | "right";
+interface DialogProps {
+    children: ReactNode;
+    open: boolean;
+    title?: ReactNode;
+    description?: string;
+    submitDisabled?: boolean;
+    submitText?: string;
+    cancelText?: string;
+    onStateChange: (open: boolean) => void;
+    onSubmit?: (event: MouseEvent$1 | KeyboardEvent) => void | Promise<void>;
+    onCancel?: (event: MouseEvent$1 | KeyboardEvent) => void;
+    variant?: Variant;
+    /**
+     * Whether clicking the submit button should close the dialog
+     * immediately. Default `true` — wraps the submit button in
+     * `AlertDialog.Action`, matching historic behavior. Set `false` for
+     * async submit handlers (e.g. delete that hits the network) so the
+     * dialog stays open while the work is in flight; the consumer is
+     * then responsible for calling `onStateChange(false)` after the
+     * promise resolves successfully and leaving the dialog open with an
+     * inline error / toast on failure. See `Modal.closeOnSubmitClick`
+     * for the same semantics.
+     */
+    closeOnSubmitClick?: boolean;
 }
-declare function Sidebar({ children, sidebar, side }: SidebarProps): react_jsx_runtime.JSX.Element;
+/**
+ * A confirmation/alert dialog built on Radix `AlertDialog`. Mirrors the
+ * structure of `Modal` — header (title + optional description + X close),
+ * optional body, optional footer (cancel/submit) — and shares its visual
+ * language (frosted card, `bg-black/40` overlay, hairline section dividers).
+ *
+ * Layout sections and dividers:
+ * - **Header** is always rendered. It carries title, description (subtitle),
+ *   and the X close button. Has `border-b` only when a body or footer
+ *   follows — a header by itself doesn't need a dangling underline.
+ * - **Body** is rendered only when `children` is truthy. When absent (the
+ *   common confirmation-only case), the empty padded area is skipped and
+ *   no body-adjacent dividers are drawn.
+ * - **Footer** is rendered when `onCancel` or `onSubmit` is set. It gets a
+ *   `border-t` only when a body sits above it; otherwise the header's
+ *   `border-b` already separates them and a second hairline would read as
+ *   a double line.
+ *
+ * @example Confirmation-only (no body)
+ * ```tsx
+ * <Dialog
+ *   open={open}
+ *   onStateChange={setOpen}
+ *   title="Delete project?"
+ *   description="This cannot be undone."
+ *   submitText="Delete"
+ *   variant={Variant.Error}
+ *   onSubmit={handleDelete}
+ *   onCancel={() => setOpen(false)}
+ * />
+ * ```
+ *
+ * @example With body content
+ * ```tsx
+ * <Dialog title="Remove items" submitText="Remove" {...handlers}>
+ *   <ul className="list-disc pl-5 text-sm">
+ *     {items.map((i) => <li key={i.id}>{i.name}</li>)}
+ *   </ul>
+ * </Dialog>
+ * ```
+ */
+declare function Dialog({ children, open, title, description, submitDisabled, submitText, cancelText, onStateChange, onSubmit, onCancel, variant, closeOnSubmitClick, }: DialogProps): react_jsx_runtime.JSX.Element;
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    children?: ReactNode;
-    altText?: string;
-    disabled?: boolean;
-    onClick?: MouseEventHandler<HTMLButtonElement>;
+interface DropdownProps {
+    trigger: ReactNode;
+    children: ReactNode;
     variant?: Variant;
     color?: string;
-    leftIcon?: ReactNode;
-    rightIcon?: ReactNode;
-    size?: Size | "fit";
-    deemphasize?: boolean;
-    invert?: boolean;
-    border?: boolean;
-    submit?: boolean;
+    header?: ReactNode;
+    side?: "left" | "right" | "top" | "bottom";
+    disabled?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onTriggerDoubleClick?: MouseEventHandler<HTMLElement>;
+    contentClassName?: string;
+    scrollOrientation?: "vertical" | "horizontal" | "both";
+    matchTriggerWidth?: boolean;
 }
-/**
- * A button that displays text and/or icons. If no text and one icon is provided, the button will be a square with padding.
- * @param children - The text to display on the button
- * @param altText - The alt text to accompany the button
- * @param disabled - Whether the button is disabled
- * @param onClick - Optional click handler
- * @param variant - Optional variant to apply to the button (default is "default")
- * @param color - Optional custom color to apply to the button
- * @param leftIcon - Optional left icon to add to the button
- * @param rightIcon - Optional right icon to add to the button
- * @param size - Optional size to apply to the button
- * @param deemphasize - Whether to deemphasize the button (subtler background and colored text)
- * @param invert - Whether to invert the button colors (no background and colored text)
- * @param border - Whether to add a border to the button
- */
-declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare const Dropdown: react.ForwardRefExoticComponent<DropdownProps & react.RefAttributes<HTMLButtonElement>>;
 
 interface ModalProps {
     children: ReactNode;
@@ -272,199 +397,386 @@ interface ModalProps {
     onSubmit?: (event: MouseEvent$1) => void;
     onCancel?: (event: MouseEvent$1) => void;
     variant?: Variant;
-    scrollDisabled?: boolean;
+    /**
+     * Whether clicking the submit button should close the modal immediately.
+     *
+     * - `true` (default) — the modal closes synchronously on click, regardless
+     *   of whether `onSubmit` is sync or async. Suitable for handlers that
+     *   don't need to keep the modal open (sync state writes, fire-and-forget
+     *   uploads).
+     * - `false` — the modal stays open after the click; the consumer is
+     *   responsible for eventually calling `onStateChange(false)` (typically
+     *   after a successful `await` of the submit work). On error, leave the
+     *   modal open and surface the error inline so the user can retry.
+     *
+     * Cancel and the X close button always close immediately regardless of
+     * this prop — async cancel is rare and "discard my work" should be
+     * instant. Use `dismissDisabled` to lock those out during an
+     * in-flight submit.
+     */
+    closeOnSubmitClick?: boolean;
 }
-declare function Modal({ children, open, title, description, headerBottom, dismissDisabled, submitDisabled, submitText, onStateChange, onSubmit, onCancel, variant, scrollDisabled, }: ModalProps): react_jsx_runtime.JSX.Element;
+/**
+ * A flexible modal dialog built on base-ui's `Dialog` primitive.
+ *
+ * Provides a full-screen overlay modal with customisable header, content
+ * area, and footer. Includes automatic scroll handling, responsive
+ * design, and smooth fade-and-slide animations. Submit/cancel actions
+ * are configurable; custom content can be slotted into the header area
+ * below the description.
+ *
+ * Why base-ui (not Radix): Radix's `DismissableLayer` treats clicks
+ * inside other portals (e.g. base-ui's `Autocomplete` popup) as
+ * "outside", which closed the modal *and* swallowed the popup's option
+ * `onClick`. base-ui's `Dialog` and `Autocomplete` coordinate via the
+ * `FloatingPortal` machinery and don't have that conflict.
+ *
+ * Features:
+ * - Full-screen dim overlay on every breakpoint; centred card on desktop
+ * - Responsive (full-bleed on mobile, fit-to-content on desktop)
+ * - Automatic scroll area with header/footer hairline dividers
+ * - Header with title, description, X close, and optional `headerBottom`
+ * - Optional submit/cancel footer with configurable close semantics
+ * - Keyboard (Esc) and click-away dismissal (configurable)
+ * - Variant-based styling
+ *
+ * @example
+ * ```tsx
+ * <Modal
+ *   open={isOpen}
+ *   onStateChange={setIsOpen}
+ *   title="Edit Settings"
+ *   description="Modify your application settings below"
+ *   submitText="Save Changes"
+ *   onSubmit={() => handleSave()}
+ *   onCancel={() => setIsOpen(false)}
+ *   variant={Variant.Primary}
+ * >
+ *   <SettingsForm />
+ * </Modal>
+ * ```
+ */
+declare function Modal({ children, open, title, description, headerBottom, dismissDisabled, submitDisabled, submitText, onStateChange, onSubmit, onCancel, variant, closeOnSubmitClick, }: ModalProps): react_jsx_runtime.JSX.Element;
 
-interface DialogProps {
+interface PopoverProps {
+    trigger: ReactNode;
     children: ReactNode;
-    open: boolean;
-    title?: ReactNode;
-    description?: string;
-    submitDisabled?: boolean;
-    submitText?: string;
-    onStateChange: (open: boolean) => void;
-    onSubmit?: (event: MouseEvent$1) => void;
-    onCancel?: (event: MouseEvent$1) => void;
+    open?: boolean;
+    onStateChange?: (open: boolean) => void;
     variant?: Variant;
 }
-declare function Dialog({ children, open, title, description, submitDisabled, submitText, onStateChange, onSubmit, onCancel, variant, }: DialogProps): react_jsx_runtime.JSX.Element;
+declare function Popover({ trigger, children, open, onStateChange, variant }: PopoverProps): react_jsx_runtime.JSX.Element;
 
-interface CheckboxProps {
-    id?: string;
-    checked: boolean;
-    onCheckedChange: (checked: boolean) => void;
-    variant?: Variant;
-    size?: Size;
+/**
+ * @param {string} label - The text to display in the option
+ * @param {string} value - The unique key to register and identify the option
+ * @param {boolean} disabled - Whether the option is disabled
+ * @param {string} color - The color of the option
+ * @param {ReactNode} icon - The icon to display in the option
+ */
+interface SelectOption {
+    label: string;
+    value: string;
     disabled?: boolean;
-    invert?: boolean;
+    color?: string;
+    variant?: Variant;
+    icon?: ReactNode;
 }
-declare function Checkbox({ id, checked, onCheckedChange, variant, size, disabled, invert, }: CheckboxProps): react_jsx_runtime.JSX.Element;
-
-interface AnchorProps {
-    onClick: () => void;
+type SelectVisuals = "icons" | "labels" | "both";
+type SelectSizing = "default" | "inner" | "list-item";
+/**
+ * @param {Variant} variant - The variant of the select (defines colors)
+ * @param {T} value - The value of the select
+ * @param {function} onChange - The function to call when the value changes
+ * @param {SelectOption[]} options - The options to display in the select
+ * @param {Size} size - The size of the select
+ * @param {string} label - The label of the select
+ * @param {SelectVisuals} visuals - How the trigger presents selected option data
+ */
+interface SelectProps<T extends string | string[]> {
+    value?: T;
+    onChange: (value: T) => void;
+    options: SelectOption[];
+    size?: Size;
+    sizing?: SelectSizing;
+    label?: string;
     variant?: Variant;
-    children: string;
+    className?: string;
+    showChips?: boolean;
+    visuals?: SelectVisuals;
+    side?: "left" | "right" | "top" | "bottom";
 }
-declare function Anchor({ onClick, variant, children }: AnchorProps): react_jsx_runtime.JSX.Element;
+/**
+ * A select component that allows users to choose from a list of options
+ * @param {Variant} variant - The variant of the select (defines colors)
+ * @param {T} value - The value of the select
+ * @param {function} onChange - The function to call when the value changes
+ * @param {SelectOption[]} options - The options to display in the select
+ * @param {Size} size - The size of the select
+ * @param {string} label - The label of the select
+ */
+declare function Select<T extends string | string[]>({ value, onChange, options, size, sizing, label, variant, className, showChips, visuals, side, }: SelectProps<T>): react_jsx_runtime.JSX.Element;
 
-interface ImageButtonProps {
-    imageUrl: string;
-    altText: string;
-    hoverText?: string;
-    dimensions?: {
-        width: string;
-        height: string;
-    };
-    onClick: () => void;
+/**
+ * An Option case for tree-like data
+ * @property value - The unique value of the option
+ * @property label - The display label of the option
+ * @property children - Optional nested children options
+ * @property disabled - Whether the option is disabled (disregarded if the option has children);
+ * @property variant - The variant style of the option (disregarded if the option has children);
+ * @property color - The color style of the option (disregarded if the option has children);
+ * @property icon - Optional custom icon to display instead of the default checkbox/indicator
+ */
+interface TreeOption {
+    value: string;
+    label: string;
+    children?: TreeOption[];
+    disabled?: boolean;
+    variant?: Variant;
+    color?: string;
+    icon?: React.ReactNode;
 }
-declare function ImageButton({ imageUrl, altText, hoverText, dimensions, onClick, }: ImageButtonProps): JSX.Element;
-
-interface MenuButtonProps {
-    id: string;
-    children: ReactNode;
-    title: ReactNode;
-    altLabel?: string;
-    variant?: Variant.Primary | Variant.Secondary | Variant.Tertiary | Variant.Default;
-    onClick?: MouseEventHandler;
-    active?: boolean;
-    status?: {
-        variant?: Variant;
-        placement?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
-        text?: string;
-    };
-    hoverable?: boolean;
+interface NestedCheckboxTreeProps {
+    variant?: Variant;
+    disabled?: boolean;
+    onChange?: (values: string[], changes: {
+        id: string;
+        operation: "add" | "remove";
+    }[]) => void;
+    values: string[];
+    options: TreeOption[];
 }
-declare function MenuButton({ id, children, title, altLabel, variant, onClick, active, status, hoverable, }: MenuButtonProps): react_jsx_runtime.JSX.Element;
+/**
+ * A component that renders a nested checkbox tree with hierarchical selection.
+ * Groups automatically infer their state from their children.
+ */
+declare function NestedCheckboxTree({ variant, disabled, onChange, values, options, }: NestedCheckboxTreeProps): react_jsx_runtime.JSX.Element;
 
-interface AvatarProps {
-    src?: string;
-    icon?: React.ReactNode;
-    alt: string;
+/**
+ * Props for the SelectTree component
+ * @param {TreeOption[]} options - The tree options to display in the select
+ * @param {string[]} value - The selected values
+ * @param {function} onChange - The function to call when the value changes
+ * @param {Size} size - The size of the select
+ * @param {string} label - The label of the select
+ * @param {Variant} variant - The variant of the select (defines colors)
+ * @param {string} className - Additional CSS classes
+ * @param {boolean} showChips - Whether to show chips for selected items
+ */
+interface SelectTreeProps {
+    options: TreeOption[];
+    value: string[];
+    onChange: (value: string[], changes: {
+        id: string;
+        operation: "add" | "remove";
+    }[]) => void;
     size?: Size;
-    rounded?: boolean;
-    onClick?: MouseEventHandler<HTMLSpanElement>;
+    label?: string;
     variant?: Variant;
-    border?: Variant;
-    noHover?: boolean;
-    status?: {
-        variant?: Variant;
-        placement?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
-        text?: string;
-    };
     className?: string;
+    showChips?: boolean;
 }
-declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
-
-interface CollapseProps {
-    title: string | ReactNode;
-    children: ReactNode;
-    onStateChange?: (open: boolean) => void;
-    open?: boolean;
-    direction?: "vertical" | "horizontal";
-    disabled?: boolean;
-    side?: "left" | "right";
-}
-declare function Collapse({ open, title, onStateChange, children, direction, disabled, side, }: CollapseProps): ReactNode;
-declare function CollapsibleContent(props: CollapsibleContentProps): react_jsx_runtime.JSX.Element;
-declare function CollapsibleTrigger(props: CollapsibleTriggerProps): react_jsx_runtime.JSX.Element;
-declare function CollapsibleRoot(props: CollapsibleProps): react_jsx_runtime.JSX.Element;
-
-interface AccordionProps {
-    sticky?: boolean;
-    stickyOffset?: number;
-    items: {
-        header: string;
-        content: react__default.ReactNode;
-        key: string;
-    }[];
-    defaultOpen?: boolean;
-}
-declare function Accordion({ items, defaultOpen, sticky, stickyOffset }: AccordionProps): react_jsx_runtime.JSX.Element;
+/**
+ * A tree select component that allows hierarchical multi-selection
+ */
+declare function SelectTree({ value, onChange, options, size, label, variant, className, showChips, }: SelectTreeProps): react_jsx_runtime.JSX.Element;
 
-interface PopoverProps {
-    title?: string;
-    trigger: ReactNode;
+interface SidebarTab {
+    key: string;
+    title: string;
+    icon?: ReactNode;
+    variant?: Variant;
     content: ReactNode;
-    open?: boolean;
-    onStateChange?: (open: boolean) => void;
+    /** Per-tab footer rendered at the bottom of the content pane. */
+    contentFooter?: ReactNode;
+}
+interface SidebarModalProps {
+    open: boolean;
+    onStateChange: (open: boolean) => void;
+    /** Modal title — rendered as the sidebar header. */
+    title: string | ReactNode;
+    tabs: SidebarTab[];
+    /** Controlled selected tab key. */
+    selected?: string;
+    onTabChange?: (key: string) => void;
+    /** Optional bottom-of-sidebar slot (modal-level footer). */
+    sidebarFooter?: ReactNode;
+    /**
+     * Icon shown in the sidebar header when the sidebar is collapsed on
+     * desktop. Swaps in for the title text in that one state. Use a small
+     * icon (e.g. `<IconSettings className={ICON_CLASS_NAME} />`) — the
+     * collapsed rail is narrow.
+     */
+    collapsedIcon?: ReactNode;
+    /**
+     * Optional content prepended to the desktop right-click context menu on
+     * the sidebar. The expand/collapse toggle is appended after these. Use
+     * the project's `Nested*` primitives (e.g. `NestedRadio`, `NestedSelect`,
+     * `NestedItem`) so styling matches.
+     *
+     * The context menu is disabled on mobile.
+     */
+    contextMenuExtras?: ReactNode;
     variant?: Variant;
+    dismissDisabled?: boolean;
 }
-declare function Popover({ title, trigger, content, open, onStateChange, variant }: PopoverProps): react_jsx_runtime.JSX.Element;
+/**
+ * A two-pane modal with a fixed-width sidebar of tabs on the left and the
+ * active tab's content on the right. Each tab supplies its own title (used
+ * both as the sidebar list label and the content-pane header), content, and
+ * optional content footer. The modal-level `sidebarFooter` slot renders below
+ * the sidebar tab list — analogous to the action items at the bottom of the
+ * main app menu.
+ *
+ * Built on base-ui's `Dialog` (not Radix). See `Modal` for the rationale —
+ * Radix's `DismissableLayer` interferes with base-ui's `Autocomplete`/
+ * `Combobox` clicks, which a settings-style modal commonly contains.
+ *
+ * Layout:
+ * - Desktop: both panes side-by-side at equal height. The modal is sized to a
+ *   viewport-relative `clamp(...)` width so it doesn't reflow when the active
+ *   tab's content changes; internals can react to the modal's width via
+ *   container queries (`@container` is set on the content pane body).
+ * - Mobile: sidebar fills the modal initially. Tapping a tab drills into the
+ *   content pane (with a back chevron in its header). X close stays available
+ *   on both views.
+ *
+ * Layout responsiveness uses the project's `desktop:` Tailwind variant
+ * (= `(width >= 48rem) and (height >= 48rem)`) — no app-level layout atoms
+ * are read, so the modal works in any context (Storybook, isolated renders).
+ *
+ * The sidebar tab buttons render via `MenuButton` inside a local
+ * `MenuButtonProvider` so the modal's expand/collapse is independent of the
+ * main app menu.
+ */
+declare function SidebarModal({ open, onStateChange, title, tabs, selected, onTabChange, sidebarFooter, collapsedIcon, contextMenuExtras, variant, dismissDisabled, }: SidebarModalProps): react_jsx_runtime.JSX.Element;
 
 interface TabChild {
     title: string;
     key: string;
+    variant?: Variant;
+    icon?: ReactNode;
     content: ReactNode;
 }
-interface TabsProps {
+/**
+ * Normalises a list of tab children, substituting a placeholder when the list
+ * is empty so consumers can always render at least one tab without a special
+ * case.
+ *
+ * @param children - The consumer-provided tabs.
+ * @param defaultContent - Body shown for the placeholder when `children` is
+ *   empty (defaults to a "No Contents" filler).
+ * @param emptyTabText - Title shown for the placeholder (defaults to "No tabs").
+ *
+ * @returns `{ childrenTabs }` — `children` if non-empty, otherwise an array
+ *   containing a single placeholder tab.
+ *
+ * @example
+ * ```tsx
+ * const { childrenTabs } = useTabsState(tabs, <div>Default</div>, "No tabs");
+ * ```
+ */
+declare function useTabsState(children: TabChild[], _selected: string | undefined, defaultContent?: ReactNode, emptyTabText?: string): {
+    childrenTabs: TabChild[];
+};
+
+interface TabbedModalProps {
     children: TabChild[];
+    open: boolean;
+    title?: string | ReactNode;
+    description?: string | ReactNode;
+    headerBottom?: ReactNode;
+    dismissDisabled?: boolean;
+    submitDisabled?: boolean;
+    submitText?: string;
+    onStateChange: (open: boolean) => void;
+    onTabChange?: (selected: string) => void;
     selected?: string;
-    onTabChange: (key: string) => void;
-    leftWidget?: ReactNode;
-    rightWidget?: ReactNode;
-    defaultContent?: ReactNode;
-    emptyTabText?: string;
-}
-declare function Tabs({ children, selected, onTabChange, leftWidget, rightWidget, defaultContent, emptyTabText, }: TabsProps): ReactNode;
-
-interface BasicRowData {
-    id: string;
-}
-interface ColumnDefinition<T extends BasicRowData> {
-    key: string;
-    header: ReactNode;
-    align?: "left" | "center" | "right";
-    flex?: boolean;
-    requiredSize?: Size;
-    render: (value: T) => ReactNode;
-}
-interface TableListProps<T extends BasicRowData> {
-    data: T[];
-    columns: ColumnDefinition<T>[];
-    headerOffset?: number;
-    noHeader?: boolean;
-    rowClassName?: string;
-    fullWidth?: boolean;
-    headerClassName?: string;
-    backgroundClassName?: string;
-    notFound?: ReactNode;
-    onFocusChange?: (focusedRow?: string) => void;
-    onRowEnter?: (row: string) => void;
-    onRowClick?: (row: string) => void;
-    selection?: string[];
-    transparentHeader?: boolean;
-}
-declare function TableList<T extends BasicRowData>({ data, columns, headerOffset, noHeader, rowClassName, headerClassName, backgroundClassName, notFound, onFocusChange, onRowEnter, onRowClick, selection, transparentHeader, }: TableListProps<T>): react_jsx_runtime.JSX.Element;
-
-interface DropdownProps {
-    trigger: ReactNode;
-    children: ReactNode;
+    onSubmit?: (event: MouseEvent$1) => void;
+    onCancel?: (event: MouseEvent$1) => void;
     variant?: Variant;
-    header?: ReactNode;
+    /** See `Modal.closeOnSubmitClick`. Forwarded as-is. */
+    closeOnSubmitClick?: boolean;
 }
-declare const Dropdown: react.ForwardRefExoticComponent<DropdownProps & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * A modal dialog with an integrated tabbed interface for organizing content.
+ *
+ * Composes our `Modal` (base-ui Dialog) with base-ui's `Tabs` primitive: the
+ * tab row renders in the modal header below the description, and the modal
+ * footer (cancel/submit) applies globally across tabs. Tab content swaps
+ * instantly when the selection changes — no slide animation.
+ *
+ * Features:
+ * - Automatic tab state management via `useTabsState`
+ * - Tab row rendered in the modal header (below `description`, above any
+ *   consumer-supplied `headerBottom`)
+ * - Icons, labels, or both on tabs
+ * - All standard modal functionality (submit/cancel, dismissal, scroll)
+ * - Automatic placeholder content when no tabs are provided
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ * const tabs = [
+ *   {
+ *     key: "general",
+ *     title: "General Settings",
+ *     icon: <IconSettings />,
+ *     content: <GeneralSettingsForm />
+ *   },
+ *   {
+ *     key: "advanced",
+ *     title: "Advanced",
+ *     icon: <IconCode />,
+ *     variant: Variant.Warning,
+ *     content: <AdvancedSettingsForm />
+ *   }
+ * ];
+ *
+ * <TabbedModal
+ *   open={isOpen}
+ *   onStateChange={setIsOpen}
+ *   title="Application Settings"
+ *   description="Configure your application settings"
+ *   children={tabs}
+ *   submitText="Save Settings"
+ *   onSubmit={(event) => handleSave()}
+ *   onCancel={(event) => setIsOpen(false)}
+ *   variant={Variant.Primary}
+ * />
+ * ```
+ *
+ * @param children - Array of tab objects, each containing key, title, content, and optional icon/variant
+ * @param open - Controls whether the modal is visible
+ * @param title - Optional title displayed in the modal header
+ * @param description - Optional description text below the title
+ * @param headerBottom - Optional additional content rendered below tabs but within header area
+ * @param dismissDisabled - When true, prevents closing modal via ESC key or click-away
+ * @param submitDisabled - When true, disables the submit button
+ * @param submitText - Text for the submit button (defaults to "Submit")
+ * @param onStateChange - Callback fired when modal should open/close
+ * @param onSubmit - Optional callback for submit button click (shows submit button when provided)
+ * @param onCancel - Optional callback for cancel button click (shows cancel button when provided)
+ * @param variant - Visual variant for styling the modal and buttons
+ */
+declare function TabbedModal({ children, open, title, description, headerBottom, dismissDisabled, submitDisabled, submitText, onStateChange, onTabChange, selected, onSubmit, onCancel, variant, closeOnSubmitClick, }: TabbedModalProps): react_jsx_runtime.JSX.Element;
 
 interface ToastState {
     toasts: ToastData[];
     addToast: (toast: ToastData) => void;
+    updateToast: (id: string, data: Partial<ToastData>) => void;
     removeToast: (id: string) => void;
     clear: () => void;
 }
 declare const ToastContext: react.Context<ToastState>;
 interface ToastManagerProps {
-    config?: {
-        tension: number;
-        friction: number;
-        precision: number;
-    };
     timeout?: number;
     children?: ReactNode;
 }
 interface ToastData {
     id: string;
     title: string;
-    content: string;
+    content?: string;
     variant?: Variant;
     dismiss?: {
         label: string;
@@ -477,175 +789,1228 @@ interface ToastContainerProps {
 declare function InnerToastManager({ children }: ToastContainerProps): react_jsx_runtime.JSX.Element;
 declare const ToastManager: react.MemoExoticComponent<typeof InnerToastManager>;
 
-interface ToggleGroupProps {
-    variant?: Variant;
-    value: string;
-    onChange: (value: string) => void;
-    label?: string;
-    options: {
-        label: string;
-        value: string;
-        disabled?: boolean;
-        color?: string;
-        icon?: ReactNode;
-    }[];
-    size?: Size;
-}
-declare function ToggleGroup({ variant, value, onChange, options, size, label }: ToggleGroupProps): react_jsx_runtime.JSX.Element;
-
-interface ToggleSquareProps {
+interface TooltipProps {
+    content: ReactNode;
+    children: ReactNode;
+    side?: "top" | "right" | "bottom" | "left";
+    controlledState?: [boolean, (value: boolean) => void];
     variant?: Variant;
-    value: boolean;
     disabled?: boolean;
-    onChange: (value: boolean) => void;
-    label?: string;
-    children?: ReactNode;
-    size?: Size;
+    invert?: boolean;
 }
-declare function ToggleSquare({ variant, value, disabled, onChange, size, label, children, }: ToggleSquareProps): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ content, children, side, controlledState, variant, disabled, invert, }: TooltipProps): react_jsx_runtime.JSX.Element;
 
-interface ContextMenuProps {
-    trigger: ReactNode;
+interface TrackedTooltipHookResult<T extends HTMLElement> {
+    /** Styles to apply to the tooltip container (position, transform) */
+    floatingStyles: CSSProperties;
+    /** Refs to attach to the trigger and floating elements */
+    elementRefs: {
+        triggerRef: RefObject<T | null>;
+        floatingRef: RefObject<HTMLDivElement | null>;
+    };
+    /** Context containing open state */
+    context: {
+        open: boolean;
+    };
+    /** Call on pointer move/leave to update tooltip position and visibility */
+    updateHoverState: (x: number | undefined, y: number | undefined, hovering: boolean) => void;
+}
+/**
+ * Lightweight cursor-following tooltip hook.
+ *
+ * Replaces the previous floating-ui based implementation which caused infinite
+ * re-render loops under React 19 due to setPositionReference triggering
+ * cascading state updates. This version uses direct DOM manipulation for
+ * position updates (no React state in the hot path) and only triggers
+ * re-renders when hover state transitions (enter/leave).
+ */
+declare function useTrackedTooltip<T extends HTMLElement = HTMLElement>(triggerRef: RefObject<T | null>, floatingRef: RefObject<HTMLDivElement | null>, side: "top" | "right" | "bottom" | "left", _axis: "x" | "y" | "both", sideOffset?: number): TrackedTooltipHookResult<T>;
+interface TrackedTooltipProps {
     children: ReactNode;
+    containerStyles: CSSProperties;
     variant?: Variant;
+    open?: boolean;
 }
-declare function ContextMenu({ trigger, children, variant }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+declare const TrackedTooltip: react.ForwardRefExoticComponent<TrackedTooltipProps & react.RefAttributes<HTMLDivElement>>;
 
-interface SeparatorProps {
-    children?: ReactNode;
-    variant?: Variant | "custom" | "layout";
-    color?: string;
-    orientation?: "horizontal" | "vertical";
-    className?: string;
+interface ScreenPosition {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+}
+interface CoordinateDebugInfo {
+    anchorId: string;
+    timestamp: number;
+    containerRect?: DOMRect;
+    canvasRect?: DOMRect;
+    worldPosition?: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    ndcPosition?: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    canvasPosition?: {
+        x: number;
+        y: number;
+    };
+    containerPosition?: {
+        x: number;
+        y: number;
+    };
+    frameOffset?: {
+        x: number;
+        y: number;
+    };
+    finalPosition?: ScreenPosition;
 }
-declare function Separator({ children, variant, color, orientation, className, }: SeparatorProps): react_jsx_runtime.JSX.Element;
+type AxisMode = "none" | "x" | "y" | "both";
+type TooltipSide = "top" | "right" | "bottom" | "left";
+type OverlayMode = "hover" | "click" | "context-menu";
+interface AnchorConfig {
+    id: string;
+    ref?: RefObject<THREE.Object3D | null>;
+    content: ReactNode | (() => ReactNode);
+    positioning: {
+        side?: TooltipSide;
+        offset?: number;
+        axis?: AxisMode;
+        clampToViewport?: boolean;
+    };
+    mode?: OverlayMode;
+    interactive?: boolean;
+    priority?: number;
+    group?: string;
+    isAvailable?: () => boolean;
+    screenPosition?: ScreenPosition;
+    cursorPosition?: ScreenPosition;
+}
+interface VisibilityState {
+    visible: boolean;
+    triggers: Set<string>;
+    lastTrigger?: string;
+    priority?: number;
+}
+interface TooltipStore {
+    anchors: Map<string, AnchorConfig>;
+    triggers: Map<string, Set<string>>;
+    positions: Map<string, ScreenPosition>;
+    cursorPositions: Map<string, ScreenPosition>;
+    visibility: Map<string, VisibilityState>;
+    hoveredAnchors: Set<string>;
+    _positionUpdateQueue: Map<string, ScreenPosition>;
+    _rafId: number | null;
+    debugMode: boolean;
+    debugHistory: CoordinateDebugInfo[];
+    _maxDebugHistory: number;
+    registerAnchor: (config: AnchorConfig) => void;
+    unregisterAnchor: (id: string) => void;
+    updateAnchorPosition: (id: string, position: ScreenPosition) => void;
+    updateCursorPosition: (id: string, position: ScreenPosition | null) => void;
+    updateAnchorContent: (id: string, content: ReactNode | (() => ReactNode)) => void;
+    setAnchorAvailability: (id: string, isAvailable: () => boolean) => void;
+    showTooltip: (anchorId: string, triggerId: string) => void;
+    hideTooltip: (anchorId: string, triggerId: string) => void;
+    toggleTooltip: (anchorId: string, triggerId: string) => void;
+    hideAll: () => void;
+    dismissOverlay: (anchorId: string) => void;
+    updatePositions: (updates: Map<string, ScreenPosition>) => void;
+    getVisibleTooltips: () => AnchorConfig[];
+    hasInteractiveOverlay: () => boolean;
+    isTooltipVisible: (anchorId: string) => boolean;
+    getTooltipPosition: (anchorId: string) => ScreenPosition | null;
+    getEffectivePosition: (anchorId: string) => ScreenPosition | null;
+    enableDebugMode: (enabled: boolean) => void;
+    logCoordinateDebug: (info: Partial<CoordinateDebugInfo>) => void;
+    getDebugHistory: (anchorId?: string) => CoordinateDebugInfo[];
+    clearDebugHistory: () => void;
+}
+declare const useTooltipStore: zustand.UseBoundStore<Omit<Omit<zustand.StoreApi<TooltipStore>, "setState" | "devtools"> & {
+    setState(partial: TooltipStore | Partial<TooltipStore> | ((state: TooltipStore) => TooltipStore | Partial<TooltipStore>), replace?: false | undefined, action?: (string | {
+        [x: string]: unknown;
+        [x: number]: unknown;
+        [x: symbol]: unknown;
+        type: string;
+    }) | undefined): void;
+    setState(state: TooltipStore | ((state: TooltipStore) => TooltipStore), replace: true, action?: (string | {
+        [x: string]: unknown;
+        [x: number]: unknown;
+        [x: symbol]: unknown;
+        type: string;
+    }) | undefined): void;
+    devtools: {
+        cleanup: () => void;
+    };
+}, "subscribe"> & {
+    subscribe: {
+        (listener: (selectedState: TooltipStore, previousSelectedState: TooltipStore) => void): () => void;
+        <U>(selector: (state: TooltipStore) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+            equalityFn?: ((a: U, b: U) => boolean) | undefined;
+            fireImmediately?: boolean;
+        } | undefined): () => void;
+    };
+}>;
 
-interface NestedItemProps {
-    left?: ReactNode;
-    children: ReactNode;
-    right?: ReactNode;
-    variant?: Variant;
-    disabled?: boolean;
-    onClick?: (event: React.MouseEvent) => void;
+interface UseTooltipAnchorOptions {
+    id?: string;
+    content: ReactNode | (() => ReactNode);
+    axis?: AxisMode;
+    offset?: number;
+    side?: TooltipSide;
+    isAvailable?: () => boolean;
+    /** Interaction mode: 'hover' (default), 'click', or 'context-menu'. */
+    mode?: OverlayMode;
+    /** When true, overlay content receives pointer events. Defaults to true for click/context-menu. */
+    interactive?: boolean;
+    /** Priority for group-based exclusion (higher wins). */
+    priority?: number;
+    /** Exclusion group: only highest-priority visible per group. */
+    group?: string;
+}
+interface UseTooltipAnchorResult {
+    ref: React.RefObject<THREE.Object3D | null>;
+    anchorId: string;
+    onPointerMove?: (event: ThreeEvent<PointerEvent>) => void;
+    onPointerLeave?: () => void;
+    /** Returned when mode === 'click'. Toggles overlay visibility. */
+    onClick?: (event: ThreeEvent<MouseEvent>) => void;
 }
-declare function NestedItem({ left, children, right, variant, disabled, onClick }: NestedItemProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to create a tooltip anchor that can be positioned in 3D space.
+ *
+ * The anchor handles position tracking and coordinate conversion from 3D to screen space.
+ * To control tooltip visibility with custom delays, use `useTooltipTrigger` with the returned `anchorId`.
+ *
+ * @param options Configuration options for the tooltip anchor
+ * @returns Anchor reference, ID, and optional event handlers
+ *
+ * @example
+ * ```tsx
+ * const { ref, anchorId, onPointerMove, onPointerLeave } = useTooltipAnchor({
+ *   content: <div>Tooltip content</div>,
+ *   side: "top"
+ * });
+ *
+ * const { show, hide } = useTooltipTrigger(anchorId, { showDelay: 100 });
+ *
+ * <mesh
+ *   ref={ref}
+ *   onPointerOver={() => show()}
+ *   onPointerOut={() => hide()}
+ *   onPointerMove={onPointerMove}
+ *   onPointerLeave={onPointerLeave}
+ * >
+ *   <boxGeometry />
+ * </mesh>
+ * ```
+ */
+declare function useTooltipAnchor(options: UseTooltipAnchorOptions): UseTooltipAnchorResult;
 
-interface NestedSeparatorProps {
-    variant?: Variant;
+interface UseTooltipTriggerOptions {
+    /** Delay in milliseconds before showing the tooltip. Defaults to 16ms (one frame). */
+    showDelay?: number;
 }
-declare function NestedSeparator({ variant }: NestedSeparatorProps): react_jsx_runtime.JSX.Element;
-
-interface NestedRadioProps {
-    variant?: Variant;
-    disabled?: boolean;
-    onChange?: (value: string) => void;
-    value?: string;
-    options: {
-        label: string;
-        value: string;
-        disabled?: boolean;
-        color?: string;
-        icon?: ReactNode;
-    }[];
+interface UseTooltipTriggerResult {
+    show: () => void;
+    hide: () => void;
+    toggle: () => void;
 }
-declare function NestedRadio({ variant, disabled, onChange, value, options }: NestedRadioProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to control tooltip visibility from any component.
+ * Multiple triggers can control the same tooltip anchor.
+ *
+ * The `showDelay` option is particularly useful for preventing tooltip spam during
+ * rapid mouse movements across multiple interactive elements.
+ *
+ * @param anchorId - The ID of the tooltip anchor to control
+ * @param options - Configuration options for the trigger
+ * @returns Object with show, hide, and toggle functions
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with delay for hover interactions
+ * const { ref, anchorId } = useTooltipAnchor({
+ *   content: <ViolationPanel data={violationData} />
+ * });
+ * const { show, hide } = useTooltipTrigger(anchorId, { showDelay: 100 });
+ *
+ * <mesh
+ *   ref={ref}
+ *   onPointerOver={() => show()}
+ *   onPointerOut={() => hide()}
+ * >
+ *   <boxGeometry />
+ * </mesh>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Different delays for different interaction types
+ * const quickTooltip = useTooltipTrigger(anchorId, { showDelay: 50 });  // Fast for buttons
+ * const slowTooltip = useTooltipTrigger(anchorId, { showDelay: 300 });  // Slow for complex content
+ * const immediateTooltip = useTooltipTrigger(anchorId, { showDelay: 0 }); // Immediate for focus
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Programmatic control with delay
+ * const { show, hide, toggle } = useTooltipTrigger(anchorId, { showDelay: 150 });
+ *
+ * useEffect(() => {
+ *   if (shouldShowTooltip) {
+ *     show(); // Will respect the 150ms delay
+ *   } else {
+ *     hide(); // Always immediate
+ *   }
+ * }, [shouldShowTooltip, show, hide]);
+ * ```
+ */
+declare function useTooltipTrigger(anchorId: string, options?: UseTooltipTriggerOptions): UseTooltipTriggerResult;
 
-interface NestedSelectProps {
+interface ShowTooltipOptions {
+    screenPosition?: ScreenPosition;
+    triggerId?: string;
+}
+interface UseTooltipControlsResult {
+    showTooltip: (anchorId: string, options?: ShowTooltipOptions) => void;
+    hideTooltip: (anchorId: string) => void;
+    dismissOverlay: (anchorId: string) => void;
+    hideAll: () => void;
+    isVisible: (anchorId: string) => boolean;
+    clearManualPosition: (anchorId: string) => void;
+}
+/**
+ * Hook that provides imperative control over tooltips.
+ * Useful for programmatically showing/hiding tooltips without direct user interaction.
+ *
+ * @returns Object with tooltip control functions
+ */
+declare function useTooltipControls(): UseTooltipControlsResult;
+
+interface TooltipProviderProps {
+    children: ReactNode;
+    store?: StoreApi<TooltipStore>;
+}
+declare const TooltipContext: react.Context<StoreApi<TooltipStore> | null>;
+/**
+ * Provider component that wraps the application or scene to enable the tooltip system.
+ * This component provides the tooltip store context to all child components.
+ *
+ * @param children - Child components that will have access to the tooltip system
+ * @param store - Optional custom store instance (for testing or multiple contexts)
+ */
+declare function TooltipProvider({ children, store }: TooltipProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access the tooltip store from context.
+ * Must be used within a TooltipProvider.
+ *
+ * @returns The tooltip store
+ * @throws Error if used outside of TooltipProvider
+ */
+declare function useTooltipContext(): StoreApi<TooltipStore>;
+/**
+ * Hook to use the tooltip store with a selector.
+ * Must be used within a TooltipProvider.
+ *
+ * @param selector - Function to select a slice of the store state
+ * @returns The selected state
+ */
+declare function useTooltip<T>(selector: (state: TooltipStore) => T): T;
+
+/**
+ * Portal component that renders all visible overlays (tooltips, popovers, context menus).
+ * Placed at the root level via TooltipHost.
+ */
+declare function TooltipPortal(): react_jsx_runtime.JSX.Element | null;
+
+interface TooltipHostProps {
+    children: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Component that wraps the Canvas to enable the tooltip system.
+ * This component manages the tooltip portal and handles global events.
+ *
+ * @param children - Should be a Canvas component from @react-three/fiber
+ * @param className - Optional CSS class for the wrapper
+ * @param style - Optional inline styles for the wrapper
+ */
+declare function TooltipHost({ children, className, style }: TooltipHostProps): react_jsx_runtime.JSX.Element;
+/**
+ * Higher-order component that wraps a Canvas component with TooltipHost.
+ * Useful for adding tooltip support to existing Canvas components.
+ *
+ * @param CanvasComponent - The Canvas component to wrap
+ * @returns Wrapped Canvas component with tooltip support
+ */
+declare function withTooltipHost<P extends object>(CanvasComponent: React.ComponentType<P>): React.ComponentType<P & {
+    tooltipHostClassName?: string;
+    tooltipHostStyle?: React.CSSProperties;
+}>;
+
+interface TooltipHostContextValue {
+    containerRef: RefObject<HTMLDivElement | null>;
+    frameOffset: {
+        x: number;
+        y: number;
+    };
+    parentContext?: TooltipHostContextValue | null;
+    level: number;
+}
+/**
+ * Hook to access the tooltip host context (for iframe positioning support).
+ * Returns null if not within a TooltipHost.
+ */
+declare function useTooltipHost(): TooltipHostContextValue | null;
+/**
+ * Hook to get the root (outermost) tooltip host context.
+ * This is useful for finding the best portal root for rendering tooltips.
+ */
+declare function useRootTooltipHost(): TooltipHostContextValue | null;
+
+interface TooltipDebugProps {
+    className?: string;
+    maxHistoryEntries?: number;
+    showVisualIndicators?: boolean;
+}
+/**
+ * Debug overlay component for the tooltip system.
+ * Shows coordinate transformation data and visual indicators for tooltip positions.
+ * Only renders when debug mode is enabled.
+ */
+declare function TooltipDebug({ className, maxHistoryEntries, showVisualIndicators, }: TooltipDebugProps): react_jsx_runtime.JSX.Element;
+
+interface CanvasContextMenuContext {
+    /** World-space intersection point from R3F raycaster. */
+    worldPosition: [number, number, number];
+    /** Screen position relative to the overlay host container. */
+    screenPosition: ScreenPosition;
+}
+interface UseCanvasContextMenuOptions {
+    /** Stable ID for the anchor. Auto-generated if omitted. */
+    id?: string;
+    /** Menu content builder. Receives the right-click context (world position, screen position). */
+    items: (ctx: CanvasContextMenuContext) => ReactNode;
+    /** Exclusion group for priority-based filtering. */
+    group?: string;
+    /** Priority within the group (higher wins). */
+    priority?: number;
+}
+interface UseCanvasContextMenuResult {
+    /** Attach to an R3F mesh's onContextMenu prop. */
+    onContextMenu: (event: ThreeEvent<PointerEvent>) => void;
+    /** The anchor ID, for imperative control if needed. */
+    anchorId: string;
+}
+/**
+ * Hook for right-click context menus on R3F meshes.
+ *
+ * Registers a context-menu anchor in the overlay store and returns an
+ * `onContextMenu` handler to attach to any R3F mesh. When triggered,
+ * the handler captures the world-space intersection point and screen
+ * position, then shows an interactive menu at the cursor location.
+ *
+ * @example
+ * ```tsx
+ * const { onContextMenu } = useCanvasContextMenu({
+ *   items: (ctx) => (
+ *     <>
+ *       <NestedItem onClick={() => paste(ctx.worldPosition)}>Paste</NestedItem>
+ *     </>
+ *   ),
+ * });
+ *
+ * <mesh onContextMenu={onContextMenu}>
+ *   <planeGeometry />
+ * </mesh>
+ * ```
+ */
+declare function useCanvasContextMenu(options: UseCanvasContextMenuOptions): UseCanvasContextMenuResult;
+
+declare function stampToVisualTime(stamp: number, _duration: number, framerate: number, timeDisplay: TimeDisplay, showDetail?: boolean): string;
+
+/**
+ * Default icon size class for controls/indicators across the UI package.
+ * This scales relative to the parent container, so it works across button/input sizes.
+ */
+declare const ICON_CLASS_NAME = "icon-standard";
+declare const ICON_LG_CLASS_NAME = "icon-larger";
+
+/**
+ * Layout state read by `MenuButton` to drive its expand/collapse behavior and
+ * tooltip suppression. The context is required — `MenuButton` always reads
+ * from it, and consumers pick the source of truth at the Provider site:
+ *
+ * - The main app menu wraps its `MenuButton`s in a Provider that pipes the
+ *   global jotai atoms (`useMenuState()` / `useDesktopState()`) through.
+ * - Modal sidebars (e.g. `SidebarModal`) wrap their `MenuButton`s in a
+ *   Provider whose values are local component state, so the modal's sidebar
+ *   expand/collapse is independent of the app menu.
+ */
+interface MenuButtonContextValue {
+    /** Whether the surrounding menu is in its labels-visible state. */
+    expanded: boolean;
+    /** Whether the layout is desktop-sized (controls tooltip side, etc.). */
+    desktop: boolean;
+    /**
+     * Tailwind class applied to the `MenuButton` element when expanded.
+     * The main menu uses `desktop:group-data-expanded/menu:w-47` (rigid).
+     * Sidebars that should size to content use `desktop:group-data-expanded/menu:w-auto`.
+     */
+    expandedWidthClassName: string;
+    /**
+     * Tailwind class applied to the inner label `<span>` when expanded.
+     * The main menu uses `w-37.5` (rigid). Content-sized sidebars pass `""`.
+     */
+    expandedLabelClassName: string;
+}
+declare function MenuButtonProvider({ value, children, }: {
+    value: MenuButtonContextValue;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useMenuButtonContext(): MenuButtonContextValue;
+
+/**
+ * Standard interface for components that might need tooltip context
+ */
+interface WithTooltipContextProps {
+    /** Skip providing tooltip context (assume parent provides) */
+    skipTooltipContext?: boolean;
+}
+
+/**
+ * Types of nested parent components.
+ *
+ * Includes Context and Dropdown parents
+ */
+declare enum NestedParent {
+    /**
+     * Parent is a context component.
+     */
+    Context = "context",
+    /**
+     * Parent is a dropdown component.
+     */
+    Dropdown = "dropdown"
+}
+/**
+ * @prop value: The value of the checkbox.
+ * @prop label: The label for the checkbox.
+ * @prop variant: The variant of the checkbox. Defaults to {@link Variant.Default}
+ * @prop onChange: The function to call when the checkbox changes.
+ * @prop closeOnSelect: Whether toggling the item closes the menu (defaults to true).
+ * @prop color: The color of the checkbox. Overridees styling from variants.
+ * @prop disabled: Whether the checkbox is disabled.
+ * @prop icon: The icon to display next to the checkbox.
+ */
+interface NestedCheckboxProps {
+    value: boolean;
+    label: string;
     variant?: Variant;
+    onChange?: (value: boolean) => void;
+    closeOnSelect?: boolean;
+    color?: string;
     disabled?: boolean;
-    onChange?: (value: string[]) => void;
-    values: string[];
-    options: {
-        label: string;
-        value: string;
-        disabled?: boolean;
-        color?: string;
-        icon?: ReactNode;
-    }[];
+    icon?: ReactNode;
 }
-declare function NestedSelect({ variant, disabled, onChange, values, options }: NestedSelectProps): react_jsx_runtime.JSX.Element;
-
+/**
+ * @prop value: The color in either {@link RawColor or string format}.
+ * @prop onChange: The function to call when the color changes.
+ * @prop disabled: Whether the color picker is disabled.
+ * @prop label: The label for the color picker.
+ * @prop variant: The variant of the color picker. Defaults to {@link Variant.Default}
+ */
+interface NestedColorPickerProps<T extends string | RawColor> {
+    value: T;
+    onChange: (value: T) => void;
+    disabled?: boolean;
+    label?: string;
+    variant?: Variant;
+    left?: ReactNode;
+}
+/**
+ * @prop left: The left-side icon or element.
+ * @prop children: The content of the item (usually text).
+ * @prop right: The right-side icon or element.
+ * @prop variant: The variant of the menu item. Defaults to {@link Variant.Default}
+ * @prop disabled: Whether the menu is disabled.
+ * @prop onClick: The function to call when the item is clicked.
+ * @prop closeOnSelect: Whether selecting the item closes the menu (defaults to true).
+ */
+interface NestedItemProps {
+    left?: ReactNode;
+    children: ReactNode;
+    right?: ReactNode;
+    variant?: Variant;
+    disabled?: boolean;
+    onClick?: (event: MouseEvent$1) => void;
+    closeOnSelect?: boolean;
+    /** Test ID for E2E targeting of portal-rendered dropdown items. */
+    testId?: string;
+}
+/**
+ * @prop children: The content of the element.
+ * @prop className: The class name for the wrapper of the element.
+ */
+interface NestedStaticProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * @prop children: The content of the label.
+ * @prop className: The class name for the label.
+ */
+interface NestedLabelProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * @prop left: The left-side icon or element.
+ * @prop children: The content of the menu item.
+ * @prop label: The label for the menu.
+ * @prop variant: The variant of the menu item. Defaults to {@link Variant.Default}
+ * @prop disabled: Whether the menu is disabled.
+ * @prop hideHeader: Whether to hide the header of the menu.
+ */
 interface NestedMenuProps {
     left?: ReactNode;
     children: ReactNode;
     label?: string;
     variant?: Variant;
-    labelVariant?: Variant;
     disabled?: boolean;
+    hideHeader?: boolean;
 }
-declare function NestedMenu({ left, children, label, variant, labelVariant, disabled, }: NestedMenuProps): react_jsx_runtime.JSX.Element;
+/**
+ * @prop label: [string] The label for the option
+ * @prop value: [string] The value for the option. This should match the value specified.
+ * @prop disabled: [boolean] Whether the option is disabled.
+ * @prop closeOnSelect: [boolean] Have the menu close after selecting this option
+ * @prop variant: [Variant] The variant of the option. Defaults to {@link Variant.Default}
+ * @prop color: [string] The color of the option. Overrides styling from variants.
+ * @prop icon: [ReactNode] The icon to display next to the option.
+ */
+interface NestedOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    closeOnSelect?: boolean;
+    variant?: Variant;
+    color?: string;
+    icon?: ReactNode;
+}
+/**
+ * @prop variant: The variant of the radio collection. Defaults to {@link Variant.Default}
+ * @prop disabled: Whether the radio collection is disabled.
+ * @prop onChange: The function to call when the radio collection changes.
+ * @prop value: The value of the radio collection.
+ * @prop options: The options for the radio collection (see {@link NestedOption}).
+ */
+interface NestedRadioProps {
+    variant?: Variant;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+    value?: string;
+    options: NestedOption[];
+}
+/**
+ * @prop variant: The variant of the select collection. Defaults to {@link Variant.Default}
+ * @prop disabled: Whether the select collection is disabled.
+ * @prop onChange: The function to call when the select collection changes.
+ * @prop values: The values of the select collection.
+ * @prop options: The options for the select collection (see {@link NestedOption}).
+ */
+interface NestedSelectProps {
+    variant?: Variant;
+    disabled?: boolean;
+    onChange?: (value: string[]) => void;
+    values: string[];
+    options: NestedOption[];
+}
+/**
+ * @prop variant: The variant of the separator. Defaults to {@link Variant.Default}
+ */
+interface NestedSeparatorProps {
+    variant?: Variant;
+}
+type ConfiguredNestedMenu = Omit<NestedMenuProps, "children"> & {
+    id: string;
+    children: ConfiguredNestedChild[];
+};
+type ConfiguredNestedChild = (NestedCheckboxProps & {
+    type: "checkbox";
+    id: string;
+}) | (NestedItemProps & {
+    type: "item";
+    id: string;
+}) | (NestedLabelProps & {
+    type: "label";
+    id: string;
+}) | (ConfiguredNestedMenu & {
+    type: "menu";
+    children: ConfiguredNestedChild[];
+}) | (NestedRadioProps & {
+    type: "radio";
+    id: string;
+}) | (NestedSelectProps & {
+    type: "select";
+    id: string;
+}) | (NestedSeparatorProps & {
+    type: "separator";
+    id: string;
+}) | (NestedStaticProps & {
+    type: "static";
+    id: string;
+});
 
-interface NestedLabelProps {
+interface ActionItemPlaceholder {
+    id: string;
+    type: "placeholder";
+}
+type ActionItem = ConfiguredNestedMenu | ActionItemPlaceholder;
+declare const isPlaceholder: (item: Partial<ActionItem> | ActionItem) => item is ActionItemPlaceholder;
+
+declare const menuStateAtom: jotai.PrimitiveAtom<boolean> & {
+    init: boolean;
+};
+declare const panesAtom: jotai.PrimitiveAtom<PaneSpec[]> & {
+    init: PaneSpec[];
+};
+declare const toolbarItemsAtom: jotai.PrimitiveAtom<ToolbarItem[]> & {
+    init: ToolbarItem[];
+};
+declare const actionItemsAtom: jotai.PrimitiveAtom<ActionItem[]> & {
+    init: ActionItem[];
+};
+declare const homeActionItemAtom: jotai.PrimitiveAtom<ActionItem | undefined> & {
+    init: ActionItem | undefined;
+};
+declare const desktopAtom: jotai.PrimitiveAtom<boolean> & {
+    init: boolean;
+};
+declare const activeLeftPaneAtom: jotai.Atom<string | undefined>;
+declare const activeRightPaneAtom: jotai.Atom<string | undefined>;
+declare const leftRegionActiveAtom: jotai.Atom<boolean>;
+declare const rightRegionActiveAtom: jotai.Atom<boolean>;
+declare const footerRegionActiveAtom: jotai.Atom<boolean>;
+declare const leftWidthAtom: jotai.Atom<string>;
+declare const rightWidthAtom: jotai.Atom<string>;
+declare const rightPaneIdsAtom: jotai.Atom<string[]>;
+declare const contentWidthAtom: jotai.Atom<string>;
+declare const leftMenuItemsAtom: jotai.Atom<PaneSpec[]>;
+declare const rightMenuItemsAtom: jotai.Atom<PaneSpec[]>;
+declare function useMenuState(): boolean;
+declare function usePanes(): PaneSpec[];
+declare function useToolbarItems(): ToolbarItem[];
+declare function useActionItems(): ActionItem[];
+declare function useHomeActionItem(): ActionItem | undefined;
+declare function useLeftMenuItems(): PaneSpec[];
+declare function useRightMenuItems(): PaneSpec[];
+declare function useRightPaneIds(): string[];
+declare function useLeftWidth(): string;
+declare function useRightWidth(): string;
+declare function useContentWidth(): string;
+declare function useActiveLeftPane(): string | undefined;
+declare function useActiveRightPane(): string | undefined;
+declare function useLeftRegionActive(): boolean;
+declare function useRightRegionActive(): boolean;
+declare function useFooterRegionActive(): boolean;
+declare function useDesktopState(): boolean;
+
+/**
+ * A hook used to add a toast to the toast context. Must be used within a ToastManager context.
+ * @returns A function that adds a toast to the toast context.
+ */
+declare function useAddToast(): (data: ToastData) => void;
+
+/**
+ * Custom hook to detect clicks outside a specified element.
+ * @param onClickAway - A callback function triggered when a click outside the element occurs.
+ * @param ref - An optional ref to be attached to the element you want to monitor.
+ */
+declare function useClickAway<T extends HTMLElement | null>(ref: React.RefObject<T>, onClickAway: (event: MouseEvent | TouchEvent) => void): void;
+
+declare function useDelayedBoolean(value: boolean, timeoutDuration: number): boolean;
+
+type ActionItemInput = ActionItem | ActionItemPlaceholder | (Partial<ActionItem> & {
+    id: string;
+});
+/**
+ * LayoutActions interface defines the actions that can be performed on the layout.
+ * @param setPane - Function to set a single pane's data.
+ * @param setPanes - Function to set multiple panes' data.
+ * @param removePane - Function to remove a single pane.
+ * @param setToolbarItem - Function to set a single toolbar item.
+ * @param setToolbarItems - Function to set multiple toolbar items.
+ * @param removeToolbarItem - Function to remove a single toolbar item.
+ * @param setActionItem - Function to set a single action item.
+ * @param setActionItems - Function to set multiple action items.
+ * @param removeActionItem - Function to remove a single action item.
+ * @param setHomeActionItem - Function to set the home action item.
+ * @param toggleMenu - Function to toggle the menu's width.
+ * @param togglePaneRegion - Function to toggle a pane region.
+ * @param completePanesClose - [INTERNAL ONLY] Function to complete the panes close.
+ */
+interface LayoutActions {
+    setPane: (pane: PaneSpec | Partial<PaneSpec>) => void;
+    setPanes: (panes: (PaneSpec | Partial<PaneSpec>)[], replace?: boolean) => void;
+    removePane: (id: string) => void;
+    removePanes: (ids: string[]) => void;
+    setToolbarItem: (item: Partial<ToolbarItem> & {
+        id: string;
+        type: "toolbar-widget" | "toolbar-spacer";
+    }) => void;
+    setToolbarItems: (items: (Partial<ToolbarItem> & {
+        id: string;
+        type: "toolbar-widget" | "toolbar-spacer";
+    })[], replace?: boolean) => void;
+    removeToolbarItem: (id: string) => void;
+    setActionItem: (item: ActionItemInput, index?: number) => void;
+    setActionItems: (panes: ActionItemInput[], replace?: boolean) => void;
+    removeActionItem: (id: string) => void;
+    setHomeActionItem: (item: ActionItem | undefined) => void;
+    toggleMenu: () => void;
+    togglePaneRegion: (pane: PaneRegion, id: string, preventSameClose?: boolean) => void;
+    completePanesClose: () => void;
+}
+/**
+ * Returns {@link LayoutActions}
+ */
+declare function useLayoutActions(): LayoutActions;
+
+interface LayoutState {
+    desktop: boolean;
+    menuExpanded: boolean;
+    leftWidth: string;
+    rightWidth: string;
+    contentWidth: string;
+    leftRegionActive: boolean;
+    rightRegionActive: boolean;
+    footerRegionActive: boolean;
+}
+declare function useLayoutState(): LayoutState;
+
+/**
+ * Custom hook that returns the preferred system theme.
+ *
+ * @returns The preferred system theme, either `Theme.Dark` or `Theme.Light`.
+ */
+declare function useSystemThemePreference(): Theme.Dark | Theme.Light;
+
+interface ThemeProviderProps {
     children: ReactNode;
 }
-declare function NestedLabel({ children }: NestedLabelProps): react_jsx_runtime.JSX.Element;
+interface ThemeContextValue {
+    explicitTheme: Theme;
+    systemPreference: Theme;
+    setExplicitTheme: (theme: Theme) => void;
+    resolvedTheme: Theme.Dark | Theme.Light;
+}
+/**
+ * The context for managing the theme in the application.
+ */
+declare const ThemeContext: react.Context<ThemeContextValue>;
 
-interface NestedColorPickerProps<T extends string | RawColor> {
-    value: T;
-    onChange: (value: T) => void;
+declare function useTheme(): ThemeContextValue;
+
+declare const Angle: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
+
+declare const Bounce: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
+
+declare const IconBox: react.ForwardRefExoticComponent<IconProps$1 & react.RefAttributes<SVGSVGElement>>;
+
+declare const IconBoxPlus: react.ForwardRefExoticComponent<IconProps$1 & react.RefAttributes<SVGSVGElement>>;
+
+declare const Eye: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
+
+declare const EyeOff: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
+
+declare const Fast: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
+
+declare const IconFileTypeAni: react.ForwardRefExoticComponent<IconProps$1 & react.RefAttributes<SVGSVGElement>>;
+
+declare const IconFileTypeMod: react.ForwardRefExoticComponent<IconProps$1 & react.RefAttributes<SVGSVGElement>>;
+
+declare const IconFileTypeFace: react.ForwardRefExoticComponent<IconProps$1 & react.RefAttributes<SVGSVGElement>>;
+
+declare const IconFilterBox: react.ForwardRefExoticComponent<IconProps$1 & react.RefAttributes<SVGSVGElement>>;
+
+declare const IconFilterX: react.ForwardRefExoticComponent<IconProps$1 & react.RefAttributes<SVGSVGElement>>;
+
+interface IconGraphViewProps extends IconProps$1 {
+    className?: string;
+}
+declare const IconGraphView: react.ForwardRefExoticComponent<IconGraphViewProps & react.RefAttributes<SVGSVGElement>>;
+
+interface IconHandleIndicatorProps extends IconProps$1 {
+    className?: string;
+    fillOpacity?: number;
+    handle: "diamond" | "circle" | "indeterminate";
+}
+declare const IconHandleIndicator: react.ForwardRefExoticComponent<IconHandleIndicatorProps & react.RefAttributes<SVGSVGElement>>;
+
+declare const IconHome: react.ForwardRefExoticComponent<IconProps$1 & react.RefAttributes<SVGSVGElement>>;
+
+interface IconKeyProps extends IconProps$1 {
+    fillOpacity?: number;
+    dashed?: boolean;
+    center?: "plus" | "minus";
+}
+declare const IconKey: react.ForwardRefExoticComponent<IconKeyProps & react.RefAttributes<SVGSVGElement>>;
+
+declare const IconKeyOutline: react.ForwardRefExoticComponent<IconProps$1 & react.RefAttributes<SVGSVGElement>>;
+
+declare const IconKeyOutlineDash: react.ForwardRefExoticComponent<IconProps$1 & react.RefAttributes<SVGSVGElement>>;
+
+declare const Lock: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
+
+declare const LockOff: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
+
+declare const MovePlayerEndBounds: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
+
+declare const MovePlayhead: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
+
+interface IconNormalizedProps extends IconProps$1 {
+    fillOpacity?: number;
+    dashed?: boolean;
+    center?: "play" | "pause";
+}
+declare const IconNormalized: react.ForwardRefExoticComponent<IconNormalizedProps & react.RefAttributes<SVGSVGElement>>;
+
+interface IconPlayPauseProps extends IconProps$1 {
+    fillOpacity?: number;
+    dashed?: boolean;
+    center?: "play" | "pause";
+}
+declare const IconPlayPause: react.ForwardRefExoticComponent<IconPlayPauseProps & react.RefAttributes<SVGSVGElement>>;
+
+declare const PlayerEndBounds: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
+
+declare const IconPlayerNextKey: react.ForwardRefExoticComponent<IconProps$1 & react.RefAttributes<SVGSVGElement>>;
+
+declare const IconPlayerPlay: react.ForwardRefExoticComponent<IconProps$1 & react.RefAttributes<SVGSVGElement>>;
+
+declare const IconPlayerPlay2: react.ForwardRefExoticComponent<IconProps$1 & react.RefAttributes<SVGSVGElement>>;
+
+interface IconProjectProps extends IconProps$1 {
+    className?: string;
+}
+declare const IconProject: react.ForwardRefExoticComponent<IconProjectProps & react.RefAttributes<SVGSVGElement>>;
+
+interface IconPreviewViewProps extends IconProps$1 {
+    className?: string;
+}
+declare const IconPreviewView: react.ForwardRefExoticComponent<IconPreviewViewProps & react.RefAttributes<SVGSVGElement>>;
+
+interface IconRobotProps extends IconProps$1 {
+    className?: string;
+}
+declare const IconRobot: react.ForwardRefExoticComponent<IconRobotProps & react.RefAttributes<SVGSVGElement>>;
+
+interface IconRobotPlusProps extends IconProps$1 {
+    className?: string;
+}
+declare const IconRobotPlus: react.ForwardRefExoticComponent<IconRobotPlusProps & react.RefAttributes<SVGSVGElement>>;
+
+declare const SelectClose: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
+
+declare const SelectCursor: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
+
+declare const Slow: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
+
+declare const Speaker: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
+
+declare const SpeakerOff: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
+
+interface StaticIconProps {
+    children: ReactNode;
+    variant?: Variant;
+    color?: string;
+    size?: Size | "fit";
+    deemphasize?: boolean;
+    className?: string;
+}
+declare function StaticIcon({ children, variant, size, color, deemphasize, className, }: StaticIconProps): react_jsx_runtime.JSX.Element;
+
+interface IconVectorAngledProps extends IconProps$1 {
+    className?: string;
+}
+declare const IconVectorAngled: react.ForwardRefExoticComponent<IconVectorAngledProps & react.RefAttributes<SVGSVGElement>>;
+
+interface IconVectorBezierProps extends IconProps$1 {
+    className?: string;
+}
+declare const IconVectorBezier: react.ForwardRefExoticComponent<IconVectorBezierProps & react.RefAttributes<SVGSVGElement>>;
+
+interface IconVectorBezierAutoClampProps extends IconProps$1 {
+    className?: string;
+}
+declare const IconVectorBezierAutoClamp: react.ForwardRefExoticComponent<IconVectorBezierAutoClampProps & react.RefAttributes<SVGSVGElement>>;
+
+interface IconVectorBezierHandlesProps extends IconProps$1 {
+    className?: string;
+}
+declare const IconVectorBezierHandles: react.ForwardRefExoticComponent<IconVectorBezierHandlesProps & react.RefAttributes<SVGSVGElement>>;
+
+interface IconVectorBezierInsertFlatProps extends IconProps$1 {
+    className?: string;
+}
+declare const IconVectorBezierInsertFlat: react.ForwardRefExoticComponent<IconVectorBezierInsertFlatProps & react.RefAttributes<SVGSVGElement>>;
+
+interface IconVectorBezierInsertSlopedProps extends IconProps$1 {
+    className?: string;
+}
+declare const IconVectorBezierInsertSloped: react.ForwardRefExoticComponent<IconVectorBezierInsertSlopedProps & react.RefAttributes<SVGSVGElement>>;
+
+interface IconVectorTransitionCurveProps extends IconProps$1 {
+    className?: string;
+}
+declare const IconVectorLinear: react.ForwardRefExoticComponent<IconVectorTransitionCurveProps & react.RefAttributes<SVGSVGElement>>;
+declare const IconVectorSine: react.ForwardRefExoticComponent<IconVectorTransitionCurveProps & react.RefAttributes<SVGSVGElement>>;
+declare const IconVectorQuad: react.ForwardRefExoticComponent<IconVectorTransitionCurveProps & react.RefAttributes<SVGSVGElement>>;
+declare const IconVectorCubic: react.ForwardRefExoticComponent<IconVectorTransitionCurveProps & react.RefAttributes<SVGSVGElement>>;
+declare const IconVectorQuart: react.ForwardRefExoticComponent<IconVectorTransitionCurveProps & react.RefAttributes<SVGSVGElement>>;
+declare const IconVectorQuint: react.ForwardRefExoticComponent<IconVectorTransitionCurveProps & react.RefAttributes<SVGSVGElement>>;
+declare const IconVectorCirc: react.ForwardRefExoticComponent<IconVectorTransitionCurveProps & react.RefAttributes<SVGSVGElement>>;
+declare const IconVectorExpo: react.ForwardRefExoticComponent<IconVectorTransitionCurveProps & react.RefAttributes<SVGSVGElement>>;
+declare const IconVectorBack: react.ForwardRefExoticComponent<IconVectorTransitionCurveProps & react.RefAttributes<SVGSVGElement>>;
+
+interface IconVectorFlatProps extends IconProps$1 {
+    className?: string;
+}
+declare const IconVectorFlat: react.ForwardRefExoticComponent<IconVectorFlatProps & react.RefAttributes<SVGSVGElement>>;
+
+interface IconVertexFreeProps extends IconProps$1 {
+    className?: string;
+}
+declare const IconVertexFree: react.ForwardRefExoticComponent<IconVertexFreeProps & react.RefAttributes<SVGSVGElement>>;
+
+interface IconVertexIndeterminateProps extends IconProps$1 {
+    className?: string;
+}
+declare const IconVertexIndeterminate: react.ForwardRefExoticComponent<IconVertexIndeterminateProps & react.RefAttributes<SVGSVGElement>>;
+
+interface IconVertexPairedProps extends IconProps$1 {
+    className?: string;
+}
+declare const IconVertexPaired: react.ForwardRefExoticComponent<IconVertexPairedProps & react.RefAttributes<SVGSVGElement>>;
+
+interface IconVerticalNormalizeProps extends IconProps$1 {
+    className?: string;
+}
+declare const IconVerticalNormalize: react.ForwardRefExoticComponent<IconVerticalNormalizeProps & react.RefAttributes<SVGSVGElement>>;
+
+interface IconVerticalUniformProps extends IconProps$1 {
+    className?: string;
+}
+declare const IconVerticalUniform: react.ForwardRefExoticComponent<IconVerticalUniformProps & react.RefAttributes<SVGSVGElement>>;
+
+declare function WorldElementIcon({ type }: {
+    type: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface AutocompleteItemState {
+    highlighted: boolean;
+    disabled: boolean;
+}
+interface AutocompleteProps<TItem> {
+    items: TItem[];
+    value: string;
+    onChange: (value: string) => void;
+    /**
+     * Fires after `value` has been stable for `debounceMs`. Useful for triggering
+     * a backend search without firing on every keystroke. When `debounceMs` is 0
+     * (the default), this fires synchronously alongside `onChange`. Pass a stable
+     * callback (e.g. from `useState`/`useCallback`) to avoid re-scheduling.
+     */
+    onDebouncedChange?: (value: string) => void;
+    /** Delay in milliseconds before `onDebouncedChange` fires. Defaults to 0. */
+    debounceMs?: number;
+    onSelect: (item: TItem) => void;
+    renderItem: (item: TItem, state: AutocompleteItemState) => ReactNode;
+    getItemKey: (item: TItem) => string;
+    getItemDisabled?: (item: TItem) => boolean;
+    /**
+     * Icon shown in the left indicator slot of each row. Mirrors the icon-slot
+     * styling used by `Select`/`NestedRadio` so popups feel consistent. If
+     * omitted, a small bullet renders in the indicator.
+     */
+    getItemIcon?: (item: TItem) => ReactNode;
+    /** Ref to the underlying input element (for programmatic focus, etc.). */
+    ref?: Ref<HTMLInputElement>;
+    placeholder?: string;
+    size?: Size;
+    variant?: Variant;
     disabled?: boolean;
-    label?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    /** Left-side icon. Defaults to a search icon. Pass `null` to omit. */
+    leftIcon?: ReactNode | null;
+    /** Background fill on the input. Defaults to true. */
+    bg?: boolean;
+    outline?: "hidden" | "interact" | "always";
+    /** Show a loading row while results are pending. */
+    loading?: boolean;
+    loadingContent?: ReactNode;
+    /** Shown when `items` is empty (and not loading). */
+    emptyContent?: ReactNode;
+    /** Externally controlled open state. If omitted, base-ui manages it. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    id?: string;
+    name?: string;
+    className?: string;
+    inputClassName?: string;
+    popupClassName?: string;
+    /** Custom container for the popup portal (e.g. inside a modal). */
+    portalContainer?: HTMLElement | null;
+}
+declare function Autocomplete<TItem>({ items, value, onChange, onDebouncedChange, debounceMs, onSelect, renderItem, getItemKey, getItemDisabled, getItemIcon, ref, placeholder, size, variant, disabled, readOnly, required, leftIcon, bg, outline, loading, loadingContent, emptyContent, open, defaultOpen, onOpenChange, id, name, className, inputClassName: inputClassNameProp, popupClassName: popupClassNameProp, portalContainer, }: AutocompleteProps<TItem>): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps {
+    id?: string;
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
     variant?: Variant;
+    size?: Size;
+    disabled?: boolean;
+    sizing?: "default" | "inner" | "list-item";
+    asIndicator?: boolean;
 }
-declare function NestedColorPicker<T extends string | RawColor>({ value, onChange, disabled, label, variant, }: NestedColorPickerProps<T>): react_jsx_runtime.JSX.Element;
+declare function Checkbox({ id, checked, onCheckedChange, variant, size, disabled, sizing, asIndicator, }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
-interface NestedCheckboxProps {
+interface ChipInputProps {
+    selectedValues: string[];
+    options: NestedOption[];
+    onChange?: (values: string[]) => void;
     variant?: Variant;
-    onChange?: (value: boolean) => void;
-    value: boolean;
+    size?: Size;
+    bg?: boolean;
+    outline?: "hidden" | "interact" | "always";
+    subtle?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    allowCustomValues?: boolean;
+}
+declare const ChipInput: react.NamedExoticComponent<ChipInputProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ColorPickerInputProps<T extends string | RawColor> {
+    value: T;
+    onChange: (color: T) => void;
+}
+declare function ColorPickerInput<T extends string | RawColor>({ value, onChange, }: ColorPickerInputProps<T>): react_jsx_runtime.JSX.Element;
+
+interface ComboboxOption<TValue extends string = string> {
     label: string;
-    color?: string;
+    value: TValue;
     disabled?: boolean;
+    color?: string;
+    variant?: Variant;
     icon?: ReactNode;
 }
-declare function NestedCheckbox({ variant, disabled, onChange, value, color, icon, label, }: NestedCheckboxProps): react_jsx_runtime.JSX.Element;
-
-interface TooltipProps {
-    content: ReactNode;
-    children: ReactNode;
-    side?: "top" | "right" | "bottom" | "left";
-    controlledState?: [boolean, (value: boolean) => void];
+interface ComboboxGroup<TValue extends string = string> {
+    label: string;
+    items: ComboboxOption<TValue>[];
+}
+type ComboboxItems<TValue extends string = string> = ComboboxOption<TValue>[] | ComboboxGroup<TValue>[];
+interface ComboboxItemState {
+    highlighted: boolean;
+    disabled: boolean;
+    selected: boolean;
+}
+interface ComboboxProps<TValue extends string = string> {
+    options: ComboboxItems<TValue>;
+    value: TValue | null;
+    onChange: (value: TValue | null) => void;
+    /** Ref to the underlying input element (for programmatic focus, etc.). */
+    ref?: Ref<HTMLInputElement>;
+    placeholder?: string;
+    size?: Size;
     variant?: Variant;
     disabled?: boolean;
-    invert?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    /** Show a left-side icon. Defaults to the selected option's icon (if any). */
+    leftIcon?: ReactNode | null;
+    bg?: boolean;
+    outline?: "hidden" | "interact" | "always";
+    emptyContent?: ReactNode;
+    /** Custom item renderer. Defaults to icon + label. */
+    renderItem?: (option: ComboboxOption<TValue>, state: ComboboxItemState) => ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    id?: string;
+    name?: string;
+    className?: string;
+    inputClassName?: string;
+    popupClassName?: string;
+    portalContainer?: HTMLElement | null;
 }
-declare function Tooltip({ content, children, side, controlledState, variant, disabled, invert, }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function Combobox<TValue extends string>({ options, value, onChange, ref, placeholder, size, variant, disabled, readOnly, required, leftIcon, bg, outline, emptyContent, renderItem, open, defaultOpen, onOpenChange, id, name, className, inputClassName: inputClassNameProp, popupClassName: popupClassNameProp, portalContainer, }: ComboboxProps<TValue>): react_jsx_runtime.JSX.Element;
 
-type FloatingResults = ReturnType<typeof useFloating>;
-interface ElementRefs {
-    triggerRef: ((instance: Element | VirtualElement | null) => void) | null;
-    floatingRef: ((instance: Element | VirtualElement | null) => void) | null;
-}
-interface TrackedTooltipResult extends FloatingResults {
-    elementRefs: ElementRefs;
-    updateHoverState: (x: number | undefined, y: number | undefined, hovering: boolean) => void;
+declare enum NumericStatus {
+    Below = "below",
+    LowerBound = "lower-bound",
+    Within = "within",
+    UpperBound = "upper-bound",
+    Above = "above",
+    Invalid = "invalid"
 }
-declare function useTrackedTooltip(triggerRef: RefObject<ReferenceType>, floatingRef: RefObject<ReferenceType>, side: "top" | "right" | "bottom" | "left", axis: "x" | "y" | "both", sideOffset?: number): TrackedTooltipResult;
-interface TrackedTooltipProps {
-    children: ReactNode;
-    containerStyles: CSSProperties;
+
+type ValidChangeEvent = ChangeEvent<HTMLInputElement> | PointerEvent | MouseEvent | TouchEvent$1 | DragEvent | KeyboardEvent$1 | FocusEvent<HTMLInputElement>;
+
+interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
+    onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
+    onClear?: (event: MouseEvent$1<HTMLButtonElement>) => void;
     variant?: Variant;
-    open?: boolean;
+    color?: string;
+    icon?: ReactNode;
+    size?: Size;
+    bg?: boolean;
+    outline?: "hidden" | "interact" | "always";
+    subtle?: boolean;
+    wrapperClassName?: string;
 }
-declare const TrackedTooltip: react.ForwardRefExoticComponent<TrackedTooltipProps & react.RefAttributes<HTMLDivElement>>;
+declare const TextField: react.NamedExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
 
-interface ColorPickerInputProps<T extends string | RawColor> {
-    value: T;
-    onChange: (color: T) => void;
+interface NumberFieldProps extends Omit<TextFieldProps, "onChange" | "value" | "onClear" | "icon"> {
+    value: number;
+    onChange: (value: number, event: ValidChangeEvent) => void;
+    min?: number;
+    max?: number;
+    units?: string;
+    strict?: boolean;
+    highlight?: boolean;
+    label?: string;
+    onLabelChange?: (label: string) => void;
+    onHighlightChange?: (isHighlighted: boolean) => void;
+    onStatusChange?: (status: NumericStatus) => void;
+    autoOverrideVariantOnWarning?: boolean;
 }
-declare function ColorPickerInput<T extends string | RawColor>({ value, onChange, }: ColorPickerInputProps<T>): react_jsx_runtime.JSX.Element;
+declare const NumberField: react.NamedExoticComponent<NumberFieldProps & react.RefAttributes<HTMLInputElement>>;
 
-interface ColorPickerPopoverProps<T extends string | RawColor> {
-    value: T;
-    onChange: (color: T) => void;
+type SliderNumberFieldDragMode = "absolute" | "relative";
+interface SliderNumberFieldProps extends Omit<NumberFieldProps, "strict"> {
+    visualMin?: number;
+    visualMax?: number;
+    relativeDragRange?: number;
+    strictSlider?: boolean;
+    strictText?: boolean;
+    dragMode?: SliderNumberFieldDragMode;
+    onStatusChange?: (status: NumericStatus) => void;
+    autoOverrideVariantOnWarning?: boolean;
+    onDragStartNative?: (event: MouseEvent | PointerEvent, value: number) => void;
+    onDragMoveNative?: (event: MouseEvent | PointerEvent, value: number) => void;
+    onDragEndNative?: (event: MouseEvent | PointerEvent, value: number) => void;
 }
-declare function ColorPickerPopover<T extends string | RawColor>({ value, onChange, }: ColorPickerPopoverProps<T>): react_jsx_runtime.JSX.Element;
-
-declare function NumberOrListInput({ value, onChange, title, }: {
-    value: number | number[];
-    onChange: (value: number | number[]) => void;
-    title?: string;
-}): react_jsx_runtime.JSX.Element;
+declare const SliderNumberField: react.NamedExoticComponent<SliderNumberFieldProps & react.RefAttributes<HTMLInputElement>>;
 
 interface EmailInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
     invalid?: boolean;
@@ -655,31 +2020,24 @@ interface EmailInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "s
 }
 declare const EmailInput: react.ForwardRefExoticComponent<EmailInputProps & react.RefAttributes<HTMLInputElement>>;
 
-interface FileInputProps {
-    fileObj: File | null;
-    setFile: (file: File | null) => void;
-    handleFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    types?: string;
-    inputTitle?: string;
-}
-declare function FileInput({ fileObj, setFile, handleFileChange, types, inputTitle, }: FileInputProps): react_jsx_runtime.JSX.Element;
-
-interface EmailsInputProps {
-    emails: string[];
-    fieldName?: string;
-    onEmailsChange: (emails: string[], field: string) => void;
-    inputPlaceholder?: string;
-    inputTitle?: string;
-}
-declare function EmailsInput({ emails: initialEmails, fieldName, onEmailsChange, inputTitle, inputPlaceholder, }: EmailsInputProps): react_jsx_runtime.JSX.Element;
-
 interface ImageInputProps {
-    imageUrl?: string;
+    src?: string;
+    fallback: string | ReactNode;
     onImageChange: (file: File | null) => void;
-    uploading?: boolean;
-    inputTitle?: string;
+    variant?: Variant;
+    className?: string;
+    size?: string;
 }
-declare function ImageInput({ imageUrl, onImageChange, uploading, inputTitle, }: ImageInputProps): react_jsx_runtime.JSX.Element;
+declare function ImageInput({ src, onImageChange, variant, fallback, size, className, }: ImageInputProps): react_jsx_runtime.JSX.Element;
+
+declare function Label({ children, variant, message, label, htmlFor, }: {
+    children: ReactNode;
+    variant?: Variant;
+    message?: string;
+    label: string;
+    /** Associates the label with an input element by id. */
+    htmlFor?: string;
+}): react_jsx_runtime.JSX.Element;
 
 interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
     invalid?: boolean;
@@ -690,26 +2048,12 @@ interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
 }
 declare const PasswordInput: react.ForwardRefExoticComponent<PasswordInputProps & react.RefAttributes<HTMLInputElement>>;
 
-interface SwitchProps {
-    value: boolean;
-    onChange: (value: boolean) => void;
-    disabled?: boolean;
-    variant?: Variant;
-    offVariant?: Variant;
-    onIcon?: ReactNode;
-    offIcon?: ReactNode;
-    size?: "sm" | "md" | "lg";
-    square?: boolean;
-}
-declare function Switch({ value, onChange, disabled, variant, size, onIcon, offIcon, offVariant, square, }: SwitchProps): react_jsx_runtime.JSX.Element;
-
-interface SearchAdditionalProps {
-    onChange?: (value: string) => void;
-    onSearch?: (value: string) => void;
+interface SearchProps extends TextFieldProps {
+    onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
+    onSearch?: (value: string, event: KeyboardEvent$1) => void;
     variant?: Variant;
     size?: Size;
 }
-type SearchProps = SearchAdditionalProps & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange">;
 /**
  * Inherits from standard Input HTML element
  * @param value - the value of the field
@@ -720,420 +2064,784 @@ type SearchProps = SearchAdditionalProps & Omit<InputHTMLAttributes<HTMLInputEle
 declare function InnerSearch({ size, onChange, onSearch, variant, ...forwardedProps }: SearchProps): ReactNode;
 declare const Search: react.MemoExoticComponent<typeof InnerSearch>;
 
-interface StringsInputProps {
-    strings: string[];
-    fieldName: string;
-    onStringsChange: (strings: string[], field: string) => void;
-    inputPlaceholder?: string;
-    inputTitle?: string;
+interface SwitchProps {
+    id?: string;
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    variant?: Variant;
+    size?: Size;
+    disabled?: boolean;
+    label?: string;
+    color?: string;
+    className?: string;
 }
-declare function StringsInput({ strings, fieldName, onStringsChange, inputTitle, inputPlaceholder, }: StringsInputProps): react_jsx_runtime.JSX.Element;
+declare function Switch({ id, checked, onCheckedChange, variant, size, disabled, label, color, className, }: SwitchProps): react_jsx_runtime.JSX.Element;
 
-interface TimeInputProps extends Omit<React.HTMLAttributes<HTMLInputElement>, "onChange"> {
+interface TimeInputProps extends Omit<NumberFieldProps, "value" | "onChange"> {
     value: number | undefined;
     onChange: (value: number) => void;
     framerate: number;
     display?: TimeDisplay;
-    disabled?: boolean;
-    min?: number;
-    max?: number;
-    variant: Variant;
-    size?: Size;
-    bg?: boolean;
-    label?: string;
-    hidden?: boolean;
 }
-declare function TimeInput({ value, onChange, framerate, display, disabled, variant, size, min, max, bg, label, hidden, }: TimeInputProps): react_jsx_runtime.JSX.Element;
+/**
+ * A wrapper around a number field that displays time in frames, seconds, or milliseconds.
+ */
+declare function TimeInput({ value, onChange, framerate, display, min, max, ...forwardedProps }: TimeInputProps): react_jsx_runtime.JSX.Element;
 
-interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
-    onChange?: (value: string) => void;
+interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "onChange"> {
+    onChange?: (value: string, event: ChangeEvent<HTMLTextAreaElement>) => void;
     variant?: Variant;
-    size?: Size;
+    color?: string;
     bg?: boolean;
-    outline?: boolean;
+    outline?: "hidden" | "interact" | "always";
     subtle?: boolean;
 }
-declare const TextField: react.MemoExoticComponent<react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>>;
+declare const TextArea: react.NamedExoticComponent<TextAreaProps & react.RefAttributes<HTMLTextAreaElement>>;
 
-interface InputProps {
-    size: Size;
-    focused?: boolean;
-    cursor?: string;
-    bold?: boolean;
+interface ToggleGroupProps {
+    visuals: "icons" | "labels" | "both";
+    bg?: boolean;
+    value: string;
+    onChange: (value: string) => void;
+    label?: string;
+    options: {
+        label: string;
+        value: string;
+        disabled?: boolean;
+        color?: string;
+        variant?: Variant;
+        icon?: ReactNode;
+    }[];
+    size?: Size;
     className?: string;
-    flex?: boolean;
-    subtle?: boolean;
 }
-declare const StyledInput: react.MemoExoticComponent<react.ForwardRefExoticComponent<InputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & react.RefAttributes<HTMLInputElement>>>;
+declare function ToggleGroup({ value, onChange, options, size, label, bg, visuals, className, }: ToggleGroupProps): react_jsx_runtime.JSX.Element;
 
-interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "onChange"> {
-    onChange?: (value: string) => void;
+interface ToggleSquareProps {
     variant?: Variant;
+    /** Custom color applied as CSS custom property for themed coloring. */
+    color?: string;
+    /**
+     * Toggle state:
+     * - `true` — on/checked (full color background)
+     * - `false` — off/unchecked (subtle or default background)
+     * - `"partial"` — indeterminate (off background + inset colored border)
+     */
+    value: boolean | "partial";
+    disabled?: boolean;
+    onChange: (value: boolean) => void;
+    label?: string;
+    children?: ReactNode;
     size?: Size;
-    bg?: boolean;
-    outline?: boolean;
-    subtle?: boolean;
+    sizing?: "default" | "inner" | "list-item";
+    asIndicator?: boolean;
 }
-declare const TextArea: react.MemoExoticComponent<react.ForwardRefExoticComponent<TextAreaProps & react.RefAttributes<HTMLTextAreaElement>>>;
-declare const StyledArea: react.MemoExoticComponent<react.ForwardRefExoticComponent<InputProps & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & react.RefAttributes<HTMLTextAreaElement>>>;
+declare function ToggleSquare({ variant, color, value, disabled, onChange, size, label, children, sizing, asIndicator, }: ToggleSquareProps): react_jsx_runtime.JSX.Element;
 
-interface TextInputProps {
-    textValue: string;
-    fieldName: string;
-    onTextChange: (value: string, field: string) => void;
-    inputTitle?: string;
-    inputPlaceholder?: string;
-    inputSize?: number;
+interface AccordionProps {
+    sticky?: boolean;
+    stickyOffset?: number;
+    items: {
+        header: string;
+        content: react__default.ReactNode;
+        key: string;
+        disabled?: boolean;
+    }[];
+    defaultOpen?: boolean | string[];
 }
-declare function TextInput({ textValue, fieldName, onTextChange, inputTitle, inputPlaceholder, inputSize, }: TextInputProps): react_jsx_runtime.JSX.Element;
+declare function Accordion({ items, defaultOpen, sticky, stickyOffset }: AccordionProps): react_jsx_runtime.JSX.Element;
 
-interface BasicNumberFieldProps {
-    id?: string;
-    value: number;
-    onChange: (value: number) => void;
-    min?: number;
-    max?: number;
-    units?: string;
-    color?: string;
-    strict?: boolean;
-    emphasis?: boolean;
-    size?: Size;
-    inactive?: boolean;
+interface BreadcrumbOptionElement {
+    id: string;
+    type: "option";
+    options: (SelectOption & {
+        children: BreadcrumbElement[];
+        default?: boolean;
+    })[];
+}
+interface BreadcrumbStaticElement {
+    id: string;
+    type: "static";
+    render: (value?: string) => ReactNode;
+    child?: BreadcrumbElement;
+}
+type BreadcrumbElement = BreadcrumbOptionElement | BreadcrumbStaticElement;
+interface BreadcrumbsProps {
+    size?: string;
+    variant?: Variant;
+    values: Record<string, string | undefined>;
+    elements: BreadcrumbElement[];
+    onChange?: (value: Record<string, string | undefined>) => void;
+    showIcons?: boolean;
+    elementClassName?: string;
+    separator?: ReactNode;
+}
+declare function InnerBreadcrumbs({ size, variant, values, elements, onChange, showIcons, elementClassName, separator, }: BreadcrumbsProps): react_jsx_runtime.JSX.Element | null;
+declare const Breadcrumbs: react.MemoExoticComponent<typeof InnerBreadcrumbs>;
+
+interface CollapseProps {
+    title: string | ReactNode;
+    children: ReactNode;
+    onStateChange?: (open: boolean) => void;
+    open?: boolean;
+    direction?: "vertical" | "horizontal";
     disabled?: boolean;
-    label?: string;
-    onLabelChange?: (label: string) => void;
-    onEmphasisChange?: (emphasis: boolean) => void;
-    onFocus?: FocusEventHandler;
-    onBlur?: FocusEventHandler;
-}
-/**
- * BasicNumberField
- * @param {string} id - the id of the field
- * @param {number} value:  - the value of the field
- * @param onChange: (value: number) => void - the function to call when the value changes
- * @param min?: number - the minimum value
- * @param max?: number - the maximum value
- * @param visualMin?: number - the minimum visual value
- * @param visualMax?: number - the maximum visual value
- * @param units?: string - the units to display
- * @param color?: string - the color of the slider
- * @param strictSlider?: boolean - whether to enforce the slider bounds
- * @param strictText?: boolean - whether to enforce the text bounds
- * @param emphasis?: boolean - whether the field is emphasized
- * @param size?: Size - the size of the field
- * @param inactive?: boolean - whether the field is inactive
- * @param disabled?: boolean - whether the field is disabled
- * @param label?: string - the label of the field
- * @param onLabelChange?: (label: string) => void - the function to call when the label changes
- * @param onEmphasisChange?: (emphasis: boolean) => void - the function to call when the emphasis changes
- * @param onFocus?: FocusEventHandler;
- * @param onBlur?: FocusEventHandler;
- */
-declare function InnerBasicNumberField({ value, onChange, min, max, units, color, strict, emphasis, size, inactive, disabled, onEmphasisChange, onBlur: onBlurExternal, onFocus: onFocusExternal, }: BasicNumberFieldProps): ReactNode;
-declare const BasicNumberField: react.MemoExoticComponent<typeof InnerBasicNumberField>;
-
-interface SliderNumberFieldProps {
+    side?: "left" | "right";
+}
+declare function Collapse({ open, title, onStateChange, children, direction, disabled, side, }: CollapseProps): ReactNode;
+declare const CollapsibleContent: react.ForwardRefExoticComponent<Collapsible.CollapsibleContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const CollapsibleTrigger: react.ForwardRefExoticComponent<Collapsible.CollapsibleTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const CollapsibleRoot: react.ForwardRefExoticComponent<Collapsible.CollapsibleProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ResizerProps {
+    orientation: "vertical" | "horizontal";
+    invert?: boolean;
     value: number;
-    onChange: (value: number) => void;
+    onDrag: (newValue: number) => void;
+    onRelease?: (newValue: number) => void;
+    onDoubleClick?: () => void;
+    disabled?: boolean;
     min?: number;
     max?: number;
-    visualMin?: number;
-    visualMax?: number;
-    units?: string;
-    color?: string;
-    strictSlider?: boolean;
-    strictText?: boolean;
-    emphasis?: boolean;
-    size?: Size;
-    inactive?: boolean;
-    disabled?: boolean;
-    label?: string;
-    onLabelChange?: (label: string) => void;
-    onEmphasisChange?: (emphasis: boolean) => void;
-    onFocus?: FocusEventHandler;
-    onBlur?: FocusEventHandler;
-}
-/**
- * SliderNumberField
- * @param {number} value:  - the value of the field
- * @param onChange: (value: number) => void - the function to call when the value changes
- * @param min?: number - the minimum value
- * @param max?: number - the maximum value
- * @param visualMin?: number - the minimum visual value
- * @param visualMax?: number - the maximum visual value
- * @param units?: string - the units to display
- * @param color?: string - the color of the slider
- * @param strictSlider?: boolean - whether to enforce the slider bounds
- * @param strictText?: boolean - whether to enforce the text bounds
- * @param emphasis?: boolean - whether the field is emphasized
- * @param size?: Size - the size of the field
- * @param inactive?: boolean - whether the field is inactive
- * @param disabled?: boolean - whether the field is disabled
- * @param label?: string - the label of the field
- * @param onLabelChange?: (label: string) => void - the function to call when the label changes
- * @param onEmphasisChange?: (emphasis: boolean) => void - the function to call when the emphasis changes
- * @param onFocus?: FocusEventHandler;
- * @param onBlur?: FocusEventHandler;
- */
-declare function InnerSliderNumberField({ value, onChange, min, max, visualMin, visualMax, units, color, strictText, strictSlider, emphasis, size, inactive, disabled, label, onLabelChange, onEmphasisChange, onBlur: onBlurExternal, onFocus: onFocusExternal, }: SliderNumberFieldProps): ReactNode;
-declare const SliderNumberField: react.MemoExoticComponent<typeof InnerSliderNumberField>;
-
-interface DropzoneProps<T extends BasicRowData> {
-    onDrop: (files: File[]) => void;
-    data: T[];
-    columns: ColumnDefinition<T>[];
-    rowClassName?: string;
-    headerClassName?: string;
-    multiple?: boolean;
-    accept?: Accept;
-    dropText?: string;
-    children?: ReactNode;
-    className?: string;
+    showEllipses?: boolean;
+    variant?: Variant;
 }
-declare function Dropzone<T extends BasicRowData>({ onDrop, data, columns, rowClassName, headerClassName, multiple, accept, children, className, dropText, }: DropzoneProps<T>): react_jsx_runtime.JSX.Element;
+declare function InnerResizer({ orientation, invert, onDrag, onRelease, value, min, max, onDoubleClick, disabled, showEllipses, variant, }: ResizerProps): react_jsx_runtime.JSX.Element;
+/**
+ * Resizer Component. Provides a singular way to attach drag handlers to a region for resizing
+ * @param orientation - "vertical" or "horizontal". The direction of the drag allowed.
+ * @param invert - Whether to invert the drag direction. Default is false.
+ * @param value - The current recorded value. Not used visually, but grounds the values sent in handlers.
+ * @param onDrag - The function to call when the drag is in progress. Receives the new value.
+ * @param onRelease - The function to call when the drag is released. Receives the new value.
+ * @param min - The minimum value allowed. Default is Number.NEGATIVE_INFINITY.
+ * @param max - The maximum value allowed. Default is Number.POSITIVE_INFINITY.
+ */
+declare const Resizer: react.MemoExoticComponent<typeof InnerResizer>;
 
+interface LayoutRootProps {
+    className?: string;
+    children?: ReactNode | ((contentBounds: RectReadOnly) => ReactNode);
+    homeIcon?: ReactNode;
+    homeText?: string;
+    homeClassName?: string;
+}
 /**
- * Renders a scrollable area with optional header and footer.
+ * Renders the inner layout of the application.
  *
- * @example
- * ```tsx
- * <InnerScrollArea>
- *   <div>Content goes here</div>
- * </InnerScrollArea>
- * ```
+ * TODO: Update with resizeable panes and pop out windows.
  *
- * @param children - The content to be rendered inside the scroll area.
- * @param header - The optional header component to be displayed at the top of the scroll area.
- * @param footer - The optional footer component to be displayed at the bottom of the scroll area.
- * @param className - The optional CSS class name for the scroll area container.
- * @param shrink - Determines whether the scroll area should shrink to fit its content.
- * @returns The rendered scroll area component.
+ * @param className - The class name applied to the root element.
  */
-declare function InnerScrollArea({ children, header, footer, className, style, shrink, orientation, }: {
+declare function InnerLayoutRoot({ className, homeIcon, homeText, children, homeClassName, }: LayoutRootProps): react_jsx_runtime.JSX.Element;
+declare const LayoutRoot: react.MemoExoticComponent<typeof InnerLayoutRoot>;
+
+interface ScrollInfo {
+    scrollTop: number;
+    scrollLeft: number;
+    scrollHeight: number;
+    scrollWidth: number;
+    clientHeight: number;
+    clientWidth: number;
+    isOverscrolling: boolean;
+}
+interface ViewportInfo {
+    visibleTop: number;
+    visibleBottom: number;
+    visibleLeft: number;
+    visibleRight: number;
+    totalHeight: number;
+    totalWidth: number;
+}
+interface ScrollAreaRef {
+    scrollTo: (options: {
+        top?: number;
+        left?: number;
+        behavior?: ScrollBehavior;
+    }) => void;
+    scrollIntoView: (element: Element, options?: ScrollIntoViewOptions) => void;
+    getScrollInfo: () => ScrollInfo | null;
+    getViewportInfo: () => ViewportInfo | null;
+}
+interface ScrollAreaProps {
     children: ReactNode;
     header?: ReactNode;
     footer?: ReactNode;
+    wrapperClassName?: string;
     className?: string;
-    style?: CSSProperties;
-    shrink?: boolean;
-    orientation?: "vertical" | "horizontal" | "both";
-}): react_jsx_runtime.JSX.Element;
-declare const ScrollArea: react.MemoExoticComponent<typeof InnerScrollArea>;
-
-interface ChipProps {
-    value: string;
-    variant?: Variant;
-    size?: Size;
-    color?: string;
-    icon?: ReactNode;
-    onDelete?: MouseEventHandler<HTMLButtonElement>;
-}
-declare function Chip({ value, variant, size, color, icon, onDelete }: ChipProps): react_jsx_runtime.JSX.Element;
-
-/**
- * @param {string} label - The text to display in the option
- * @param {string} value - The unique key to register and identify the option
- * @param {boolean} disabled - Whether the option is disabled
- * @param {string} color - The color of the option
- * @param {ReactNode} icon - The icon to display in the option
- */
-interface SelectOption {
-    label: string;
-    value: string;
-    disabled?: boolean;
-    color?: string;
-    icon?: ReactNode;
-}
-/**
- * @param {Variant} variant - The variant of the select (defines colors)
- * @param {T} value - The value of the select
- * @param {function} onChange - The function to call when the value changes
- * @param {SelectOption[]} options - The options to display in the select
- * @param {Size} size - The size of the select
- * @param {string} label - The label of the select
- */
-interface SelectProps<T extends string | string[]> {
-    variant?: Variant;
-    value?: T;
-    onChange: (value: T) => void;
-    options: {
-        label: string;
-        value: string;
-        disabled?: boolean;
-        color?: string;
-        icon?: ReactNode;
-    }[];
-    size?: Size;
-    label?: string;
-}
-/**
- * A select component that allows users to choose from a list of options
- * @param {Variant} variant - The variant of the select (defines colors)
- * @param {T} value - The value of the select
- * @param {function} onChange - The function to call when the value changes
- * @param {SelectOption[]} options - The options to display in the select
- * @param {Size} size - The size of the select
- * @param {string} label - The label of the select
- */
-declare function Select<T extends string | string[]>({ value, onChange, options, variant, size, label, }: SelectProps<T>): react_jsx_runtime.JSX.Element;
-
-declare function SelectList<T extends string | string[]>({ value, onChange, options, variant, size, notFound, }: SelectProps<T> & {
-    notFound?: ReactNode;
-}): react_jsx_runtime.JSX.Element;
-
-declare function FormBase({ children, title }: {
-    children: React.ReactNode;
-    title?: string;
-}): react_jsx_runtime.JSX.Element;
-
-interface IconRobotProps extends TablerIconsProps {
-    className?: string;
+    headerClassName?: string;
+    footerClassName?: string;
+    style?: CSSProperties;
+    shrinkHeight?: boolean;
+    shrinkWidth?: boolean;
+    orientation?: "vertical" | "horizontal" | "both";
+    showGutter?: boolean;
+    onScrollChange?: (scrollInfo: ScrollInfo) => void;
+    onViewportChange?: (viewportInfo: ViewportInfo) => void;
+    motionScrollY?: MotionValue<number>;
+    motionScrollX?: MotionValue<number>;
+    externalScrollTop?: number;
+    externalScrollLeft?: number;
+    onScrollSync?: (scrollTop: number, scrollLeft: number) => void;
 }
-declare const IconRobot: react.ForwardRefExoticComponent<Omit<IconRobotProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+/**
+ * Renders a scrollable area with natural overscroll behavior.
+ * Uses padding to create "real" overscroll space that can be synchronized between multiple areas.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ScrollArea onScrollChange={(info) => console.log(info)}>
+ *   <div>Content goes here</div>
+ * </ScrollArea>
+ * ```
+ *
+ * @example Synchronized scrolling
+ * ```tsx
+ * const [sharedScrollTop, setSharedScrollTop] = useState(0);
+ * <ScrollArea
+ *   externalScrollTop={sharedScrollTop}
+ *   onScrollSync={(scrollTop) => setSharedScrollTop(scrollTop)}
+ * >
+ *   <div>Content goes here</div>
+ * </ScrollArea>
+ * ```
+ */
+declare const InnerScrollArea: react.ForwardRefExoticComponent<ScrollAreaProps & react.RefAttributes<ScrollAreaRef>>;
+declare const ScrollArea: react.NamedExoticComponent<ScrollAreaProps & react.RefAttributes<ScrollAreaRef>>;
 
-interface IconRobotPlusProps extends TablerIconsProps {
+interface SeparatorProps {
+    children?: ReactNode;
+    variant?: Variant;
+    color?: string;
+    orientation?: "horizontal" | "vertical";
     className?: string;
 }
-declare const IconRobotPlus: react.ForwardRefExoticComponent<Omit<IconRobotPlusProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+declare function Separator({ children, variant, color, orientation, className, }: SeparatorProps): react_jsx_runtime.JSX.Element;
 
-interface IconFileTypeAniProps extends TablerIconsProps {
-    className?: string;
-}
-declare const IconFileTypeAni: react.ForwardRefExoticComponent<Omit<IconFileTypeAniProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+/**
+ * A component that renders a nested checkbox with optional child checkboxes.
+ *
+ * @param props - The props for the NestedCheckbox component ({@link NestedCheckboxProps}).
+ * @returns The rendered NestedCheckbox component.
+ */
+declare function NestedCheckbox({ variant, disabled, onChange, closeOnSelect, value, color, icon, label, }: NestedCheckboxProps): react_jsx_runtime.JSX.Element;
 
-interface IconFileTypeModProps extends TablerIconsProps {
-    className?: string;
-}
-declare const IconFileTypeMod: react.ForwardRefExoticComponent<Omit<IconFileTypeModProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+declare const NestedParentContext: react.Context<NestedParent>;
+declare const NestedParentProvider: react.Provider<NestedParent>;
+declare const useNestedParent: () => NestedParent;
 
-interface IconFileTypeVizijProps extends TablerIconsProps {
-    className?: string;
-}
-declare const IconFileTypeVizij: react.ForwardRefExoticComponent<Omit<IconFileTypeVizijProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+declare function NestedColorPicker<T extends string | RawColor>({ value, onChange, disabled, label, variant, left, }: NestedColorPickerProps<T>): react_jsx_runtime.JSX.Element;
 
-interface IconHomeProps extends TablerIconsProps {
-    className?: string;
-}
-declare const IconHome: react.ForwardRefExoticComponent<Omit<IconHomeProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+/**
+ * A component that renders any of the major nested elements in an abstracted way.
+ *
+ * @param props - The props for the NestedChild component ({@link ConfiguredNestedChild}).
+ * @returns The rendered NestedChild component.
+ */
+declare function NestedChild(props: ConfiguredNestedChild): ReactNode;
 
-interface IconBoxProps extends TablerIconsProps {
-    className?: string;
-}
-declare const IconBox: react.ForwardRefExoticComponent<Omit<IconBoxProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+declare function NestedItem({ left, children, right, variant, disabled, onClick, closeOnSelect, testId, }: NestedItemProps): react_jsx_runtime.JSX.Element;
 
-interface IconBoxPlusProps extends TablerIconsProps {
-    className?: string;
-}
-declare const IconBoxPlus: react.ForwardRefExoticComponent<Omit<IconBoxPlusProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+/**
+ * A component that renders a nested label with optional child labels.
+ *
+ * @param props - The props for the NestedLabel component ({@link NestedLabelProps}).
+ * @returns The rendered NestedLabel component.
+ */
+declare function NestedLabel({ children, className }: NestedLabelProps): react_jsx_runtime.JSX.Element;
 
-declare const IconPlayerNextKey: react.ForwardRefExoticComponent<Omit<TablerIconsProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+/**
+ * A component that renders a nested menu with optional sub-menus.
+ *
+ * @param props - The props for the NestedMenu component ({@link NestedMenuProps}).
+ * @returns The rendered NestedMenu component.
+ */
+declare function NestedMenu({ left, children, label, variant, disabled, hideHeader, }: NestedMenuProps): react_jsx_runtime.JSX.Element;
 
-declare const IconPlayerEndBounds: react.ForwardRefExoticComponent<Omit<TablerIconsProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+/**
+ * A component that renders a nested radio button with optional child radio buttons.
+ *
+ * @param props - The props for the NestedRadio component ({@link NestedRadioProps}).
+ * @returns The rendered NestedRadio component.
+ */
+declare function NestedRadio({ variant, disabled, onChange, value, options }: NestedRadioProps): react_jsx_runtime.JSX.Element;
 
-declare const IconPlayerPlay: react.ForwardRefExoticComponent<Omit<TablerIconsProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+/**
+ * A component that renders a select section in a nested menu.
+ *
+ * @param props - The props for the Select component ({@link NestedSelectProps}).
+ * @returns The rendered NestedSelect section component.
+ */
+declare function NestedSelect({ variant, disabled, onChange, values, options }: NestedSelectProps): react_jsx_runtime.JSX.Element;
 
-declare const IconPlayerPlay2: react.ForwardRefExoticComponent<Omit<TablerIconsProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+/**
+ * A component that renders a separator in a nested menu.
+ *
+ * @param props - The props for the NestedSeparator component ({@link NestedSeparatorProps}).
+ * @returns The rendered NestedSeparator component.
+ */
+declare function NestedSeparator({ variant }: NestedSeparatorProps): react_jsx_runtime.JSX.Element;
 
-interface IconPlayPauseProps extends TablerIconsProps {
-    fillOpacity?: number;
-    dashed?: boolean;
-    center?: "play" | "pause";
+interface Step {
+    label: string;
+    completed: boolean;
+    disabled: boolean;
+    content?: ReactNode;
+}
+interface VerticalStepperProps {
+    steps: Step[];
+    activeStep?: number;
+    onStepChange: (step: number) => void;
 }
-declare const IconPlayPause: react.ForwardRefExoticComponent<Omit<IconPlayPauseProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+declare function VerticalStepper({ steps, onStepChange, activeStep }: VerticalStepperProps): react_jsx_runtime.JSX.Element;
 
-declare const IconKeyOutline: react.ForwardRefExoticComponent<Omit<TablerIconsProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+type SelectionMode = "none" | "single" | "multiple";
+interface ListItem {
+    key: string;
+    disabled?: boolean;
+}
+interface UseListStateOptions<T extends ListItem> {
+    items: T[];
+    getSearchText?: (item: T) => string;
+    selectionMode?: SelectionMode;
+    selectedKeys?: Set<string>;
+    onSelectionChange?: (keys: Set<string>) => void;
+    defaultSelectedKeys?: Set<string>;
+    focusedKey?: string | null;
+    onFocusChange?: (key: string | null) => void;
+    defaultFocusedKey?: string | null;
+    disallowEmptySelection?: boolean;
+    allowTypeAhead?: boolean;
+    allowWrapNavigation?: boolean;
+    onAction?: (key: string, event: KeyboardEvent | MouseEvent) => void;
+    onKeyDown?: (key: string, event: KeyboardEvent) => void;
+}
+interface ListState<T extends ListItem> {
+    items: T[];
+    getItem: (key: string) => T | undefined;
+    getItemIndex: (key: string) => number;
+    selectedKeys: Set<string>;
+    selectionMode: SelectionMode;
+    focusedKey: string | null;
+    isSelected: (key: string) => boolean;
+    isFocused: (key: string) => boolean;
+    isDisabled: (key: string) => boolean;
+    select: (key: string) => void;
+    deselect: (key: string) => void;
+    toggle: (key: string) => void;
+    selectRange: (fromKey: string, toKey: string) => void;
+    selectAll: () => void;
+    clearSelection: () => void;
+    setFocusedKey: (key: string | null) => void;
+    focusNext: () => void;
+    focusPrevious: () => void;
+    focusFirst: () => void;
+    focusLast: () => void;
+    handleItemClick: (key: string, event: MouseEvent) => void;
+    handleItemKeyDown: (key: string, event: KeyboardEvent) => void;
+    handleItemFocus: (key: string) => void;
+    handleItemBlur: () => void;
+    getNavigationProps: () => Record<string, any>;
+    getItemProps: (key: string) => Record<string, any>;
+}
+declare function useListState<T extends ListItem>({ items, getSearchText, selectionMode, selectedKeys: controlledSelectedKeys, onSelectionChange, defaultSelectedKeys, focusedKey: controlledFocusedKey, onFocusChange, defaultFocusedKey, disallowEmptySelection, allowTypeAhead, allowWrapNavigation, onAction, onKeyDown, }: UseListStateOptions<T>): ListState<T>;
+/** @deprecated Use `ListItem` instead */
+type TableListItem = ListItem;
+/** @deprecated Use `useListState` instead */
+declare const useTableListState: typeof useListState;
 
-declare const IconKeyOutlineDash: react.ForwardRefExoticComponent<Omit<TablerIconsProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+/**
+ * Defines the structure and behavior of a table column.
+ *
+ * @template T - The type of table list items
+ * @property key - Unique identifier for the column, used for grid areas
+ * @property header - Content to display in the column header
+ * @property align - Text alignment within the column. Defaults to "left"
+ * @property flex - Whether the column should grow to fill available space
+ * @property requiredSize - Minimum screen size required to show this column
+ * @property render - Function to render the cell content for each row
+ */
+interface ColumnDefinition<T extends ListItem> {
+    key: string;
+    header: ReactNode;
+    align?: "left" | "center" | "right";
+    flex?: boolean;
+    requiredSize?: Size;
+    render: (value: T, elementFocused: boolean, elementSelected: boolean) => ReactNode;
+}
+/**
+ * Props for the TableList component.
+ *
+ * @template T - The type of table list items extending ListItem
+ * @property data - Array of data items to display in the table
+ * @property columns - Column definitions that specify how to render each column
+ * @property headerOffset - Offset from top for sticky header positioning. Defaults to 0
+ * @property noHeader - Whether to hide the header row. Defaults to false
+ * @property rowClassName - Additional CSS class for table rows
+ * @property fullWidth - Whether the table should take full width. Defaults to false
+ * @property headerClassName - Additional CSS class for the header
+ * @property backgroundClassName - Additional CSS class for the table background
+ * @property notFound - Content to show when no data is available
+ * @property size - Size variant for the table rows and header. Defaults to Size.Md
+ * @property variant - Visual variant for styling. Defaults to Variant.Default
+ * @property selectionMode - Selection mode: "none", "single", or "multiple". Defaults to "none"
+ * @property selectedKeys - Currently selected item keys (controlled mode)
+ * @property onSelectionChange - Callback when selection changes (controlled mode)
+ * @property defaultSelectedKeys - Default selected keys for uncontrolled mode
+ * @property focusedKey - Currently focused item key (controlled mode)
+ * @property onFocusChange - Callback when focus changes (controlled mode)
+ * @property defaultFocusedKey - Default focused key for uncontrolled mode
+ * @property disallowEmptySelection - Whether to prevent clearing all selections. Defaults to false
+ * @property allowTypeAhead - Enable type-ahead search functionality. Defaults to true
+ * @property allowWrapNavigation - Allow wrapping navigation at list boundaries. Defaults to true
+ * @property getSearchText - Custom function to extract search text from items
+ * @property onAction - Callback for item activation (Enter key or double-click equivalent)
+ * @property onKeyDown - Custom keydown handler for items
+ * @property transparentHeader - Whether the header should have a transparent background. Defaults to true
+ * @property showIndicators - Whether to show selection indicators (radio/checkbox) in first column. Defaults to false
+ */
+/**
+ * Appearance presets for common styling patterns.
+ *
+ * - `card`: Default — header, card-panel background, full padding. Used in dashboard.
+ * - `panel`: Transparent background, subtle hover, no header, compact. Used in sidebars and modals.
+ * - `inline`: Minimal styling, transparent, no padding. Used for embedded lists.
+ */
+type TableListAppearance = "card" | "panel" | "inline";
+interface TableListProps<T extends ListItem> {
+    data: T[];
+    columns: ColumnDefinition<T>[];
+    headerOffset?: number;
+    noHeader?: boolean;
+    rowClassName?: string;
+    fullWidth?: boolean;
+    headerClassName?: string;
+    backgroundClassName?: string;
+    notFound?: ReactNode;
+    size?: Size;
+    variant?: Variant;
+    appearance?: TableListAppearance;
+    selectionMode?: SelectionMode;
+    selectedKeys?: Set<string>;
+    onSelectionChange?: (keys: Set<string>) => void;
+    defaultSelectedKeys?: Set<string>;
+    focusedKey?: string | null;
+    onFocusChange?: (key: string | null) => void;
+    defaultFocusedKey?: string | null;
+    disallowEmptySelection?: boolean;
+    deselectOnClickAway?: boolean;
+    allowTypeAhead?: boolean;
+    allowWrapNavigation?: boolean;
+    getSearchText?: (item: T) => string;
+    onAction?: (key: string, event: KeyboardEvent | MouseEvent) => void;
+    onKeyDown?: (key: string, event: KeyboardEvent) => void;
+    showIndicators?: boolean;
+}
+/**
+ * A flexible, accessible table list component with built-in selection and keyboard navigation.
+ *
+ * Features:
+ * - Desktop-style selection behavior with CMD/CTRL+Click and Shift+Click support
+ * - Keyboard navigation with arrow keys, space, and enter
+ * - Type-ahead search functionality
+ * - Responsive column hiding based on screen size
+ * - Consecutive visual merging of selected/focused items
+ * - Controlled and uncontrolled selection modes
+ * - Customizable sizing and styling
+ *
+ * Selection Behavior:
+ * - Regular click: Select only clicked item
+ * - Cmd+Click: Toggle selection of clicked item
+ * - Shift+Click: Extend selection from anchor to clicked item (multiple mode only)
+ * - Arrow keys: Move focus and select item (single selection)
+ * - Cmd+Arrow: Move focus without changing selection
+ * - Shift+Arrow: Extend selection in direction (multiple mode only)
+ * - Space: Toggle selection of focused item
+ * - Enter: Activate item (calls onAction) or behaves like click if no onAction
+ * - Cmd+A: Select all items (multiple mode only)
+ * - Escape: Clear all selection
+ *
+ * @template T - The type of data items, must extend ListItem
+ * @param props - Configuration props for the table list
+ * @returns Rendered table list component
+ *
+ * @example
+ * ```tsx
+ * interface User extends ListItem {
+ *   key: string;
+ *   name: string;
+ *   email: string;
+ * }
+ *
+ * const columns: ColumnDefinition<User>[] = [
+ *   {
+ *     key: 'name',
+ *     header: 'Name',
+ *     render: (user) => user.name,
+ *     flex: true,
+ *   },
+ *   {
+ *     key: 'email',
+ *     header: 'Email',
+ *     render: (user) => user.email,
+ *   },
+ * ];
+ *
+ * <TableList
+ *   data={users}
+ *   columns={columns}
+ *   selectionMode="multiple"
+ *   onSelectionChange={setSelectedKeys}
+ *   onAction={(key) => openUser(key)}
+ * />
+ * ```
+ */
+declare function TableList<T extends ListItem>({ data, columns, headerOffset, noHeader, rowClassName, headerClassName, backgroundClassName, notFound, size, variant, selectionMode, selectedKeys, onSelectionChange, defaultSelectedKeys, focusedKey, onFocusChange, defaultFocusedKey, disallowEmptySelection, deselectOnClickAway, allowTypeAhead, allowWrapNavigation, getSearchText, onAction, onKeyDown, showIndicators, appearance, }: TableListProps<T>): react_jsx_runtime.JSX.Element;
 
-interface IconKeyProps extends TablerIconsProps {
-    fillOpacity?: number;
-    dashed?: boolean;
-    center?: "plus" | "minus";
+interface TabsProps {
+    visuals?: "icons" | "labels" | "both";
+    size?: Size;
+    children: TabChild[];
+    selected?: string;
+    onTabChange: (key: string) => void;
+    leftWidget?: ReactNode;
+    rightWidget?: ReactNode;
+    defaultContent?: ReactNode;
+    emptyTabText?: string;
+    tabsContainerClassName?: string;
 }
-declare const IconKey: react.ForwardRefExoticComponent<Omit<IconKeyProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+/**
+ * Internal tabs row component that renders the visual tab buttons with animated selection indicator.
+ * @requires Must be used within a `Tabs.Root` from `@base-ui/react/tabs` for proper functionality.
+ *
+ * Features:
+ * - Animated selection indicator driven by base-ui's `Tabs.Indicator` and the
+ *   CSS variables it publishes (`--active-tab-left`, `--active-tab-width`, ...).
+ *   Resize/layout changes are tracked internally by base-ui — no consumer wiring.
+ * - Support for icons, labels, or both visual modes
+ * - Configurable size and variant styling per tab
+ * - Tooltips displaying tab titles on hover
+ * - Left and right widget slots for additional controls
+ * - Responsive design with container queries
+ * - Automatic fallback icon for tabs without specified icons
+ */
+declare function InnerTabsRow({ visuals, size, children, selected, leftWidget, rightWidget, tabsContainerClassName, }: Omit<TabsProps, "onTabChange" | "defaultContent" | "emptyTabText">): ReactNode;
+declare const TabsRow: react.MemoExoticComponent<typeof InnerTabsRow>;
+/**
+ * Internal tabs content component. Renders one `Tabs.Panel` per tab; base-ui
+ * shows the active panel and unmounts the others.
+ */
+declare function InnerTabsContent({ childrenTabs, }: {
+    childrenTabs: TabChild[];
+}): ReactNode;
+declare const TabsContent: react.MemoExoticComponent<typeof InnerTabsContent>;
+/**
+ * Complete tabs component that combines tab navigation and content with smooth animations.
+ * Built on top of Base UI's `Tabs` primitive — `Tabs.Indicator` drives the moving
+ * background, eliminating the manual ref/spring/resize tracking the Radix-based
+ * version required.
+ *
+ * @example
+ * ```tsx
+ * const [selectedTab, setSelectedTab] = useState("tab1");
+ * const tabs = [
+ *   { key: "tab1", title: "First Tab", icon: <IconUser />, content: <div>...</div> },
+ *   { key: "tab2", title: "Second Tab", variant: Variant.Primary, content: <div>...</div> },
+ * ];
+ *
+ * <Tabs
+ *   visuals="both"
+ *   size="md"
+ *   children={tabs}
+ *   selected={selectedTab}
+ *   onTabChange={setSelectedTab}
+ * />
+ * ```
+ */
+declare function InnerTabs(props: TabsProps): ReactNode;
+declare const Tabs: react.MemoExoticComponent<typeof InnerTabs>;
 
-interface IconProjectProps extends TablerIconsProps {
+interface AvatarProps {
+    src?: string;
+    icon?: React.ReactNode;
+    alt: string;
+    /** Accessible label for the avatar when used as an interactive element. */
+    "aria-label"?: string;
+    size?: Size;
+    onClick?: MouseEventHandler<HTMLSpanElement>;
+    variant?: Variant;
+    visuals?: "default" | "border" | "inverted" | "inverted-border";
+    status?: {
+        variant?: Variant;
+        placement?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+        text?: string;
+    };
     className?: string;
 }
-declare const IconProject: react.ForwardRefExoticComponent<Omit<IconProjectProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+/**
+ * An avatar component that displays user images, icons, or initials with various visual styles.
+ * @param src - Optional source URL for the avatar image
+ * @param icon - Optional icon to display in the avatar
+ * @param alt - Alt text for the avatar (required for accessibility)
+ * @param size - Optional size to apply to the avatar
+ * @param onClick - Optional click handler
+ * @param variant - Optional variant to apply to the avatar (default is "default")
+ * @param visuals - Visual style of the avatar: "default", "border", "inverted", or "inverted-border"
+ * @param status - Optional status indicator with variant, placement, and text
+ * @param className - Optional additional CSS classes
+ */
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
 
-interface IconPreviewViewProps extends TablerIconsProps {
-    className?: string;
+interface ColorPickerPopoverProps<T extends string | RawColor> {
+    value: T;
+    onChange: (color: T) => void;
 }
-declare const IconPreviewView: react.ForwardRefExoticComponent<Omit<IconPreviewViewProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+declare function ColorPickerPopover<T extends string | RawColor>({ value, onChange, }: ColorPickerPopoverProps<T>): react_jsx_runtime.JSX.Element;
 
-declare function WorldElementIcon({ type }: {
-    type: string;
+declare function NumberOrListInput({ value, onChange, title, }: {
+    value: number | number[];
+    onChange: (value: number | number[]) => void;
+    title?: string;
 }): react_jsx_runtime.JSX.Element;
 
-interface IconFilterBoxProps extends TablerIconsProps {
-    className?: string;
-}
-declare const IconFilterBox: react.ForwardRefExoticComponent<Omit<IconFilterBoxProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
-
-interface IconFilterXProps extends TablerIconsProps {
+interface DropzoneProps<T extends ListItem> {
+    onDrop: (files: File[]) => void;
+    data: T[];
+    columns: ColumnDefinition<T>[];
+    rowClassName?: string;
+    headerClassName?: string;
+    multiple?: boolean;
+    accept?: Accept;
+    dropText?: string;
+    children?: ReactNode;
     className?: string;
 }
-declare const IconFilterX: react.ForwardRefExoticComponent<Omit<IconFilterXProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+declare function Dropzone<T extends ListItem>({ onDrop, data, columns, rowClassName, headerClassName, multiple, accept, children, className, dropText, }: DropzoneProps<T>): react_jsx_runtime.JSX.Element;
 
-interface StaticIconProps {
-    children: ReactNode;
+interface ChipProps {
+    children: string;
     variant?: Variant;
+    size?: Size;
     color?: string;
-    size?: Size | "fit";
-    deemphasize?: boolean;
-    className?: string;
-}
-declare function StaticIcon({ children, variant, size, color, deemphasize, className, }: StaticIconProps): react_jsx_runtime.JSX.Element;
-
-interface ButtonModalProps {
-    titleText: string;
-    onClick: () => void;
+    renderIcon?: (className: string) => ReactNode;
+    onDelete?: MouseEventHandler<HTMLButtonElement>;
 }
-declare function ButtonModal({ titleText, onClick }: ButtonModalProps): JSX.Element;
+declare function Chip({ children, variant, size, color, renderIcon, onDelete, }: ChipProps): react_jsx_runtime.JSX.Element;
 
-declare function CopyLinkButton({ link }: {
-    link: string;
+declare function SelectList<T extends string | string[]>({ value, onChange, options, variant, size, notFound, }: SelectProps<T> & {
+    notFound?: ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
-declare function ThemeToggleButton(): react_jsx_runtime.JSX.Element;
+declare function FormBase({ children, title }: {
+    children: React.ReactNode;
+    title?: string;
+}): react_jsx_runtime.JSX.Element;
 
-interface CallToActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant: Variant.Primary | Variant.Secondary | Variant.Tertiary;
-    size: Size.Lg | Size.Md | Size.Sm;
+interface ImageButtonProps {
+    imageUrl: string;
+    altText: string;
+    hoverText?: string;
+    dimensions?: {
+        width: string;
+        height: string;
+    };
+    onClick: () => void;
+}
+declare function ImageButton({ imageUrl, altText, hoverText, dimensions, onClick, }: ImageButtonProps): ReactElement;
+
+declare enum KeyCode {
+    Mod = "mod",
+    Shift = "shift",
+    Alt = "alt",
+    Ctrl = "ctrl",
+    Space = "space",
+    Delete = "delete",
+    Backspace = "backspace",
+    Enter = "enter",
+    Escape = "escape",
+    Tab = "tab",
+    ArrowUp = "arrowup",
+    ArrowDown = "arrowdown",
+    ArrowLeft = "arrowleft",
+    ArrowRight = "arrowright"
 }
-declare const CallToActionButton: react.ForwardRefExoticComponent<CallToActionButtonProps & react.RefAttributes<HTMLButtonElement>>;
-
 /**
- * Custom hook that returns the preferred system theme.
+ * Parse a Mantine hotkey combo string ("mod+x", "shift+ArrowLeft") into
+ * individual key parts suitable for rendering.
+ */
+declare function parseHotkeyCombo(combo: string): string[];
+/**
+ * Renders a keyboard shortcut as a compact inline sequence.
+ * Automatically adapts symbols for macOS (⌘⇧⌥) vs Windows/Linux (Ctrl+Shift+Alt).
  *
- * @returns The preferred system theme, either `Theme.Dark` or `Theme.Light`.
+ * Use `keys` for explicit key lists, or `combo` for Mantine hotkey syntax strings.
  */
-declare function useSystemThemePreference(): Theme.Dark | Theme.Light;
-
-declare function useDelayedBoolean(value: boolean, timeoutDuration: number): boolean;
+declare function Keybinding({ keys, combo, }: {
+    /** Explicit key list (e.g. [KeyCode.Mod, "x"]) */
+    keys?: (string | KeyCode)[];
+    /** Mantine hotkey syntax string (e.g. "mod+x") — parsed into keys automatically */
+    combo?: string;
+}): ReactNode;
+/**
+ * Displays the keybinding hint for a registered action, reading from KeybindingContext.
+ * Shows the first key combo of the action's binding. Returns null if the action isn't registered.
+ *
+ * @example
+ * ```tsx
+ * <NestedItem right={<KeybindingHint action="animation:delete" />}>Delete</NestedItem>
+ * ```
+ */
+declare function KeybindingHint({ action }: {
+    action: string;
+}): ReactNode;
 
-interface ThemeProviderProps {
-    children: ReactNode;
+/**
+ * A single keybinding definition: the key combo(s) and optional display label.
+ * Key combos use Mantine hotkey syntax: "mod+x", "space", "ArrowLeft", etc.
+ */
+interface KeybindingDefinition {
+    /** Key combo strings in Mantine hotkey syntax (e.g. ["mod+x"]). */
+    keys: string[];
+    /** Human-readable label for the action (e.g. "Cut"). */
+    label?: string;
 }
-interface ThemeContextValue {
-    explicitTheme: Theme;
-    systemPreference: Theme;
-    setExplicitTheme: (theme: Theme) => void;
-    resolvedTheme: Theme.Dark | Theme.Light;
+/**
+ * A map of namespaced action IDs to their keybinding definitions.
+ * Packages should namespace their actions (e.g. "animation:delete", "scene:focus").
+ */
+type KeybindingMap = Record<string, KeybindingDefinition>;
+interface KeybindingProviderProps {
+    /** Keybinding definitions to provide. Merged with any parent provider's bindings. */
+    value: KeybindingMap;
+    children: ReactNode;
 }
 /**
- * The context for managing the theme in the application.
+ * Provides keybinding definitions to descendant components.
+ * Inherits and merges with any parent KeybindingProvider — inner values override outer
+ * for the same action ID, and new action IDs are added.
+ *
+ * @example
+ * ```tsx
+ * // Studio root: provides all defaults + user overrides
+ * <KeybindingProvider value={{ ...animationKeybindings, ...userOverrides }}>
+ *   <App />
+ * </KeybindingProvider>
+ *
+ * // Nested override for a specific context
+ * <KeybindingProvider value={{ "animation:delete": { keys: ["backspace"] } }}>
+ *   <SpecialPanel />
+ * </KeybindingProvider>
+ * ```
  */
-declare const ThemeContext: react.Context<ThemeContextValue>;
-
-declare function useTheme(): ThemeContextValue;
-
+declare function KeybindingProvider({ value, children }: KeybindingProviderProps): react_jsx_runtime.JSX.Element;
 /**
- * A hook used to add a toast to the toast context. Must be used within a ToastManager context.
- * @returns A function that adds a toast to the toast context.
+ * Returns the full keybinding map from the nearest provider (including inherited bindings).
  */
-declare function useAddToast(): (data: ToastData) => void;
+declare function useKeybindingMap(): KeybindingMap;
+/**
+ * Returns the keybinding definition for a specific action ID, or undefined if not registered.
+ */
+declare function useKeybinding(actionId: string): KeybindingDefinition | undefined;
 
 /**
  * Renders a tree of nodes.
@@ -1147,13 +2855,6 @@ declare function NodeTree({ nodeList, renderNode, }: {
     renderNode: (node: any) => ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
-/**
- * Custom hook to detect clicks outside a specified element.
- * @param onClickAway - A callback function triggered when a click outside the element occurs.
- * @param ref - An optional ref to be attached to the element you want to monitor.
- */
-declare function useClickAway<T extends HTMLElement | null>(ref: React.RefObject<T>, onClickAway: (event: MouseEvent | TouchEvent) => void): void;
-
 interface MenuItemProps {
     children: ReactNode;
     variant: Variant;
@@ -1168,27 +2869,4 @@ interface SnippetProps {
 }
 declare function Snippet({ text, language, className }: SnippetProps): react_jsx_runtime.JSX.Element;
 
-declare function getHeight(size?: Size): string;
-declare function getWidth(size?: Size): string;
-declare function getChipInsertSize(size?: Size): string;
-declare function getFontSize(size?: Size): string;
-declare function getBorder(variant?: Variant): string;
-declare function getHoverBorder(variant?: Variant): string;
-declare function getReversibleBgText(variant?: Variant, active?: boolean): string;
-declare function getItemSideStyle(variant?: Variant | "custom"): string;
-declare function getItemStyle(variant?: Variant | "custom"): string;
-declare function getSeparatorStyle(variant?: Variant | "custom"): string;
-declare function getChipColor(variant?: Variant | "custom"): string;
-declare function getOutline(variant?: Variant): string;
-declare function getBasicTextColor(variant?: Variant | "custom"): string;
-declare function getTooltipTextColor(variant?: Variant | "custom", invert?: boolean): string;
-declare function getBasicBgColor(variant?: Variant | "custom"): string;
-declare function getTextCaretColor(variant?: Variant | "custom"): string;
-declare function getHoverTextStyles(variant?: Variant): string;
-declare function getHoverButtonStyles(variant?: Variant): string;
-declare function getCheckedBgStyles(variant?: Variant): string;
-declare function getToggleButtonStyles(variant: Variant): string;
-declare function getGradient(variant?: Variant): string;
-declare function getInputStyles(flex?: boolean, subtle?: boolean, bold?: boolean, size?: Size, disabled?: boolean, className?: string, cursor?: string, constrainHeight?: boolean): string;
-
-export { Accordion, type AccordionProps, Anchor, type AnchorProps, Avatar, type AvatarProps, BasicNumberField, type BasicNumberFieldProps, type BasicRowData, Button, ButtonModal, type ButtonModalProps, type ButtonProps, CallToActionButton, type CallToActionButtonProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Collapse, type CollapseProps, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, ColorPickerInput, type ColorPickerInputProps, ColorPickerPopover, type ColorPickerPopoverProps, type ColumnDefinition, ContextMenu, type ContextMenuProps, CopyLinkButton, Dialog, type DialogProps, Dropdown, type DropdownProps, Dropzone, type DropzoneProps, EmailInput, type EmailInputProps, EmailsInput, type EmailsInputProps, FileInput, type FileInputProps, FormBase, IconBox, IconBoxPlus, type IconBoxPlusProps, type IconBoxProps, IconFileTypeAni, type IconFileTypeAniProps, IconFileTypeMod, type IconFileTypeModProps, IconFileTypeVizij, type IconFileTypeVizijProps, IconFilterBox, type IconFilterBoxProps, IconFilterX, type IconFilterXProps, IconHome, type IconHomeProps, IconKey, IconKeyOutline, IconKeyOutlineDash, type IconKeyProps, IconPlayPause, type IconPlayPauseProps, IconPlayerEndBounds, IconPlayerNextKey, IconPlayerPlay, IconPlayerPlay2, IconPreviewView, type IconPreviewViewProps, IconProject, type IconProjectProps, IconRobot, IconRobotPlus, type IconRobotPlusProps, type IconRobotProps, ImageButton, type ImageButtonProps, ImageInput, type ImageInputProps, InnerLayout, InnerScrollArea, type InputProps, Layout, type LayoutProps, Menu, MenuButton, type MenuButtonProps, MenuItem, type MenuItemProps, type MenuProps, Modal, type ModalProps, NestedCheckbox, type NestedCheckboxProps, NestedColorPicker, type NestedColorPickerProps, NestedItem, type NestedItemProps, NestedLabel, type NestedLabelProps, NestedMenu, type NestedMenuProps, NestedParent, NestedRadio, type NestedRadioProps, NestedSelect, type NestedSelectProps, NestedSeparator, type NestedSeparatorProps, NodeTree, NumberOrListInput, PasswordInput, type PasswordInputProps, Popover, type PopoverProps, Progress, type ProgressProps, ScrollArea, Search, type SearchProps, Select, SelectList, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarChild, type SidebarProps, Size, SliderNumberField, type SliderNumberFieldProps, Snippet, Spinner, StaticIcon, type StaticIconProps, Status, type StatusProps, type Step, StringsInput, type StringsInputProps, StyledArea, StyledInput, Switch, type SwitchProps, type TabChild, TableList, type TableListProps, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, TextInput, type TextInputProps, Theme, ThemeContext, type ThemeContextValue, type ThemeProviderProps, ThemeToggleButton, TimeDisplay, TimeInput, type TimeInputProps, type ToastContainerProps, ToastContext, type ToastData, ToastManager, type ToastManagerProps, type ToastState, ToggleGroup, type ToggleGroupProps, ToggleSquare, type ToggleSquareProps, Tooltip, type TooltipProps, TrackedTooltip, type TrackedTooltipProps, Variant, VerticalStepper, type VerticalStepperProps, WorldElementIcon, getBasicBgColor, getBasicTextColor, getBorder, getCheckedBgStyles, getChipColor, getChipInsertSize, getFontSize, getGradient, getHeight, getHoverBorder, getHoverButtonStyles, getHoverTextStyles, getInputStyles, getItemSideStyle, getItemStyle, getOutline, getReversibleBgText, getSeparatorStyle, getTextCaretColor, getToggleButtonStyles, getTooltipTextColor, getWidth, stampToVisualTime, useAddToast, useClickAway, useDelayedBoolean, useMenu, useSystemThemePreference, useTheme, useTrackedTooltip };
+export { Accordion, type AccordionProps, type ActionItem, type ActionItemInput, type ActionItemPlaceholder, Anchor, type AnchorConfig, type AnchorProps, Angle, Autocomplete, type AutocompleteItemState, type AutocompleteProps, Avatar, type AvatarProps, type AxisMode, Bounce, type BreadcrumbElement, type BreadcrumbOptionElement, type BreadcrumbStaticElement, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type CanvasContextMenuContext, Checkbox, type CheckboxProps, Chip, ChipInput, type ChipInputProps, type ChipProps, Collapse, type CollapseProps, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, ColorPickerInput, type ColorPickerInputProps, ColorPickerPopover, type ColorPickerPopoverProps, type ColumnDefinition, Combobox, type ComboboxGroup, type ComboboxItemState, type ComboboxItems, type ComboboxOption, type ComboboxProps, type ConfiguredNestedChild, type ConfiguredNestedMenu, ContextMenu, type ContextMenuProps, type CoordinateDebugInfo, CopyLinkButton, Dialog, type DialogProps, Dropdown, type DropdownProps, Dropzone, type DropzoneProps, EmailInput, type EmailInputProps, Eye, EyeOff, Fast, FormBase, HeaderButton, type HeaderButtonProps, ICON_CLASS_NAME, ICON_LG_CLASS_NAME, IconBox, IconBoxPlus, IconFileTypeAni, IconFileTypeFace, IconFileTypeMod, IconFilterBox, IconFilterX, IconGraphView, type IconGraphViewProps, IconHandleIndicator, type IconHandleIndicatorProps, IconHome, IconKey, IconKeyOutline, IconKeyOutlineDash, type IconKeyProps, IconNormalized, type IconNormalizedProps, IconPlayPause, type IconPlayPauseProps, IconPlayerNextKey, IconPlayerPlay, IconPlayerPlay2, IconPreviewView, type IconPreviewViewProps, IconProject, type IconProjectProps, IconRobot, IconRobotPlus, type IconRobotPlusProps, type IconRobotProps, IconVectorAngled, type IconVectorAngledProps, IconVectorBack, IconVectorBezier, IconVectorBezierAutoClamp, type IconVectorBezierAutoClampProps, IconVectorBezierHandles, type IconVectorBezierHandlesProps, IconVectorBezierInsertFlat, type IconVectorBezierInsertFlatProps, IconVectorBezierInsertSloped, type IconVectorBezierInsertSlopedProps, type IconVectorBezierProps, IconVectorCirc, IconVectorCubic, IconVectorExpo, IconVectorFlat, type IconVectorFlatProps, IconVectorLinear, IconVectorQuad, IconVectorQuart, IconVectorQuint, IconVectorSine, type IconVectorTransitionCurveProps, IconVertexFree, type IconVertexFreeProps, IconVertexIndeterminate, type IconVertexIndeterminateProps, IconVertexPaired, type IconVertexPairedProps, IconVerticalNormalize, type IconVerticalNormalizeProps, IconVerticalUniform, type IconVerticalUniformProps, ImageButton, type ImageButtonProps, ImageInput, type ImageInputProps, InnerBreadcrumbs, InnerScrollArea, InnerTabs, InnerTabsRow, KeyCode, Keybinding, type KeybindingDefinition, KeybindingHint, type KeybindingMap, KeybindingProvider, type KeybindingProviderProps, Label, type LayoutActions, LayoutRoot, type LayoutRootProps, type LayoutState, type ListItem, type ListState, Lock, LockOff, MenuButton, type MenuButtonContextValue, type MenuButtonProps, MenuButtonProvider, MenuItem, type MenuItemClickFn, type MenuItemProps, Modal, type ModalProps, MovePlayerEndBounds, MovePlayhead, NestedCheckbox, type NestedCheckboxProps, NestedCheckboxTree, type NestedCheckboxTreeProps, NestedChild, NestedColorPicker, type NestedColorPickerProps, NestedItem, type NestedItemProps, NestedLabel, type NestedLabelProps, NestedMenu, type NestedMenuProps, type NestedOption, NestedParent, NestedParentContext, NestedParentProvider, NestedRadio, type NestedRadioProps, NestedSelect, type NestedSelectProps, NestedSeparator, type NestedSeparatorProps, type NestedStaticProps, NodeTree, NumberField, type NumberFieldProps, NumberOrListInput, type OverlayMode, PaneRegion, type PaneSpec, PasswordInput, type PasswordInputProps, PlayerEndBounds, Popover, type PopoverProps, Progress, ProgressCircle, type ProgressCircleProps, type ProgressProps, Resizer, type ResizerProps, type ScreenPosition, ScrollArea, type ScrollAreaRef, type ScrollInfo, Search, type SearchProps, Select, SelectClose, SelectCursor, SelectList, type SelectOption, type SelectProps, type SelectSizing, SelectTree, type SelectTreeProps, type SelectVisuals, type SelectionMode, Separator, type SeparatorProps, type ShowTooltipOptions, SidebarModal, type SidebarModalProps, type SidebarTab, Size, SliderNumberField, type SliderNumberFieldDragMode, type SliderNumberFieldProps, Slow, Snippet, type SnippetProps, Speaker, SpeakerOff, Spinner, StaticIcon, type StaticIconProps, Status, type StatusProps, type Step, Switch, type SwitchProps, type TabChild, TabbedModal, type TabbedModalProps, TableList, type TableListAppearance, type TableListItem, type TableListProps, Tabs, TabsContent, type TabsProps, TabsRow, TextArea, type TextAreaProps, TextField, type TextFieldProps, Theme, ThemeContext, type ThemeContextValue, type ThemeProviderProps, TimeDisplay, TimeInput, type TimeInputProps, type ToastContainerProps, ToastContext, type ToastData, ToastManager, type ToastManagerProps, type ToastState, ToggleGroup, type ToggleGroupProps, ToggleSquare, type ToggleSquareProps, type ToolbarItem, type ToolbarSpacer, type ToolbarWidget, Tooltip, TooltipContext, TooltipDebug, TooltipHost, type TooltipHostContextValue, type TooltipHostProps, TooltipPortal, type TooltipProps, TooltipProvider, type TooltipSide, type TooltipStore, TrackedTooltip, type TrackedTooltipProps, type TreeOption, type UseCanvasContextMenuOptions, type UseCanvasContextMenuResult, type UseListStateOptions, type UseTooltipAnchorOptions, type UseTooltipAnchorResult, type UseTooltipControlsResult, type UseTooltipTriggerOptions, type UseTooltipTriggerResult, Variant, VerticalStepper, type VerticalStepperProps, type ViewportInfo, type VisibilityState, type WithTooltipContextProps, WorldElementIcon, actionItemsAtom, activeLeftPaneAtom, activeRightPaneAtom, contentWidthAtom, desktopAtom, footerRegionActiveAtom, homeActionItemAtom, isPlaceholder, leftMenuItemsAtom, leftRegionActiveAtom, leftWidthAtom, menuStateAtom, panesAtom, parseHotkeyCombo, rightMenuItemsAtom, rightPaneIdsAtom, rightRegionActiveAtom, rightWidthAtom, stampToVisualTime, toolbarItemsAtom, useActionItems, useActiveLeftPane, useActiveRightPane, useAddToast, useCanvasContextMenu, useClickAway, useContentWidth, useDelayedBoolean, useDesktopState, useFooterRegionActive, useHomeActionItem, useKeybinding, useKeybindingMap, useLayoutActions, useLayoutState, useLeftMenuItems, useLeftRegionActive, useLeftWidth, useListState, useMenuButtonContext, useMenuState, useNestedParent, usePanes, useRightMenuItems, useRightPaneIds, useRightRegionActive, useRightWidth, useRootTooltipHost, useSystemThemePreference, useTableListState, useTabsState, useTheme, useToolbarItems, useTooltip, useTooltipAnchor, useTooltipContext, useTooltipControls, useTooltipHost, useTooltipStore, useTooltipTrigger, useTrackedTooltip, withTooltipHost };