@noya-app/noya-designsystem 0.1.76 → 0.1.78

package/dist/index.d.ts

@@ -1,21 +1,23 @@
 import * as React$1 from 'react';
-import React__default, { ReactNode, ComponentProps, CSSProperties, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, ForwardedRef, SyntheticEvent, LabelHTMLAttributes, DetailedHTMLProps, HTMLAttributes } from 'react';
+import React__default, { ReactNode, ComponentProps, CSSProperties, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, ForwardedRef, LabelHTMLAttributes, DetailedHTMLProps, HTMLAttributes } from 'react';
 import { IItemScore } from 'vscode-fuzzy-scorer';
 import * as Icons from '@noya-app/noya-icons';
 import { IconProps } from '@noya-app/noya-icons';
 export { Icons };
 import tailwindConfig from '@noya-app/noya-tailwind-config';
 import { UniqueIdentifier, ClientRect, CollisionDetection } from '@dnd-kit/core';
-import { Point as Point$1, Insets, Size, Rect } from '@noya-app/noya-geometry';
+import { Point as Point$1, Insets, Size, AffineTransform, Rect } from '@noya-app/noya-geometry';
 import { Property } from 'csstype';
 import * as _noya_app_noya_designsystem from '@noya-app/noya-designsystem';
 import { SectionProps as SectionProps$1, BannerProps as BannerProps$1, IconName as IconName$1, OptionModeProps as OptionModeProps$1 } from '@noya-app/noya-designsystem';
-import { Dialog as Dialog$1, DropdownMenu as DropdownMenu$1, ContextMenu as ContextMenu$1, Popover as Popover$1, Tooltip as Tooltip$1 } from 'radix-ui';
+import * as _base_ui_react_menu from '@base-ui/react/menu';
+import { Menu } from '@base-ui/react/menu';
+import { Gemoji } from 'gemoji';
+export { Gemoji } from 'gemoji';
 import * as _noya_app_noya_keymap from '@noya-app/noya-keymap';
 import { KeyModifiers, PlatformName } from '@noya-app/noya-keymap';
 import { MultiplayerUser } from '@noya-app/noya-multiplayer-react';
 import * as PopperPrimitive from '@radix-ui/react-popper';
-import { SelectProps } from '@radix-ui/react-select';
 import { useSortable } from '@dnd-kit/sortable';
 import { Sketch } from '@noya-app/noya-file-format';
 
@@ -91,6 +93,10 @@ type PopoverMenuItem = BaseMenuItem & {
     }) => ReactNode);
     shortcut?: string;
     tooltip?: ReactNode;
+    /** Class name applied to the popover container (not used for dialogs on small screens) */
+    popoverClassName?: string;
+    /** Extra props to pass to the trigger button (e.g., data attributes) */
+    triggerProps?: Record<string, unknown>;
 };
 type NonSelectableMenuItem<T extends string> = SeparatorItem | SectionHeaderMenuItem | SubMenuItem<T> | PopoverMenuItem;
 type MenuItem<T extends string> = SeparatorItem | SelectableMenuItem<T> | SectionHeaderMenuItem | SubMenuItem<T> | PopoverMenuItem;
@@ -151,7 +157,7 @@ type ActionMenuProps<TMenu extends string> = {
 };
 declare const ActionMenu: <TMenu extends string>(props: ActionMenuProps<TMenu>) => React__default.ReactElement<any> | null;
 
-interface Props$d {
+interface Props$c {
     size?: number;
     opacity?: number;
     color?: string;
@@ -159,7 +165,7 @@ interface Props$d {
     className?: string;
     style?: React$1.CSSProperties;
 }
-declare const ActivityIndicator: React$1.NamedExoticComponent<Props$d>;
+declare const ActivityIndicator: React$1.NamedExoticComponent<Props$c>;
 
 type ActivityIconSemanticColor = "add" | "remove" | "update";
 type ActivityUser = {
@@ -194,7 +200,8 @@ type AIAssistantInputProps = {
     onChange: (e: React__default.ChangeEvent<HTMLTextAreaElement>) => void;
     onSubmitClick: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
     onKeyDown: (e: React__default.KeyboardEvent<HTMLTextAreaElement>) => void;
-    disabled: boolean;
+    disabled?: boolean;
+    submitDisabled?: boolean;
 };
 declare const AIAssistantInput: React__default.ForwardRefExoticComponent<AIAssistantInputProps & React__default.RefAttributes<HTMLDivElement>>;
 type AIAssistantLayoutProps = {
@@ -490,6 +497,8 @@ declare const cssVars: {
         inspectorVSeparator: string;
         dialogPadding: string;
         inputHeight: string;
+        inputPaddingX: string;
+        inputPaddingY: string;
     };
     keyframes: {
         spin: {
@@ -721,6 +730,8 @@ declare const cssVarNames: {
         inspectorVSeparator: string;
         dialogPadding: string;
         inputHeight: string;
+        inputPaddingX: string;
+        inputPaddingY: string;
     };
     keyframes: {
         spin: {
@@ -868,8 +879,23 @@ type ListRowContextValue = {
     isSectionHeader: boolean;
 };
 
+type ScrollToIndexAlign = "auto" | "start" | "center" | "end";
+type ScrollToIndexPadding = number | {
+    top?: number;
+    bottom?: number;
+};
+interface ScrollToIndexOptions {
+    align?: ScrollToIndexAlign;
+    /**
+     * Extra padding to include when scrolling. When scrolling to "start",
+     * this adds space above the item. When scrolling to "end", this adds
+     * space below. For "auto", it applies the appropriate padding based
+     * on scroll direction. A number applies to both directions.
+     */
+    padding?: ScrollToIndexPadding;
+}
 interface IVirtualizedList {
-    scrollToIndex(index: number): void;
+    scrollToIndex(index: number, options?: ScrollToIndexOptions): void;
 }
 
 type RelativeDropPosition = "above" | "below" | "inside";
@@ -1233,7 +1259,7 @@ declare function ColorSwatchControl(props: ColorSwatchControlProps): React__defa
 
 type InputSize = "small" | "medium" | "large";
 
-type Props$c = {
+type Props$b = {
     id?: string;
     style?: any;
     className?: string;
@@ -1251,15 +1277,15 @@ type Props$c = {
     onFocusChange?: (isFocused: boolean) => void;
     onBlur?: FocusEventHandler;
 } & Pick<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "autoCapitalize" | "autoCorrect" | "spellCheck" | "autoFocus">;
-type ReadOnlyProps = Props$c & {
+type ReadOnlyProps = Props$b & {
     readOnly: true;
 };
-type ControlledProps = Props$c & {
+type ControlledProps = Props$b & {
     onChange: (value: string) => void;
     onFocus?: FocusEventHandler;
     onBlur?: FocusEventHandler;
 };
-type SubmittableProps = Props$c & {
+type SubmittableProps = Props$b & {
     onSubmit: (value: string) => void;
     allowSubmittingWithSameValue?: boolean;
     submitAutomaticallyAfterDelay?: number;
@@ -1479,24 +1505,22 @@ interface MenuProps<T extends string> {
 }
 declare const ContextMenu: <T extends string>(props: MenuProps<T>) => React__default.ReactElement<any> | null;
 
-declare const StyledContent: React__default.ForwardRefExoticComponent<Omit<Dialog$1.DialogContentProps & React__default.RefAttributes<HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 interface IDialog {
     containsElement: (element: HTMLElement) => boolean;
 }
-interface Props$b {
+interface Props$a {
     title?: ReactNode;
     description?: ReactNode;
     children?: ReactNode;
-    style?: ComponentProps<typeof StyledContent>["style"];
-    open: ComponentProps<typeof Dialog$1.Root>["open"];
-    onOpenChange?: ComponentProps<typeof Dialog$1.Root>["onOpenChange"];
-    onOpenAutoFocus?: ComponentProps<typeof Dialog$1.Content>["onOpenAutoFocus"];
+    style?: React__default.CSSProperties;
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
     closeOnInteractOutside?: boolean;
     showCloseButton?: boolean;
     className?: string;
 }
-declare const Dialog: React__default.ForwardRefExoticComponent<Props$b & React__default.RefAttributes<IDialog>>;
-declare const FullscreenDialog: React__default.ForwardRefExoticComponent<Props$b & React__default.RefAttributes<IDialog>>;
+declare const Dialog: React__default.ForwardRefExoticComponent<Props$a & React__default.RefAttributes<IDialog>>;
+declare const FullscreenDialog: React__default.ForwardRefExoticComponent<Props$a & React__default.RefAttributes<IDialog>>;
 
 type DividerVariant = "normal" | "subtle" | "strong";
 interface DividerProps {
@@ -1528,7 +1552,10 @@ type SidebarRef = {
     collapse: () => void;
     isExpanded: () => boolean;
 };
-type PercentageSidebarOptions = {
+/**
+ * Sidebar options with pixel-based sizing.
+ */
+type SidebarOptions = {
     minSize?: number;
     maxSize?: number;
     initialSize?: number;
@@ -1558,9 +1585,8 @@ type LayoutProps<LeftTab extends string = string, RightTab extends string = stri
     rightTabValue?: RightTab;
     onChangeRightTab?: (value: RightTab) => void;
     centerPanel: React.ReactNode;
-    leftSidebarOptions: PercentageSidebarOptions;
-    rightSidebarOptions: PercentageSidebarOptions;
-    centerPanelPercentage: number;
+    leftSidebarOptions: SidebarOptions;
+    rightSidebarOptions: SidebarOptions;
     autoSavePrefix?: string;
     leftSidebarRef: React.RefObject<SidebarRef | null>;
     rightSidebarRef: React.RefObject<SidebarRef | null>;
@@ -1593,20 +1619,21 @@ type DrawerProps = {
     side?: "left" | "right";
     portalled?: boolean;
     portalContainer?: HTMLElement | null;
+    modal?: boolean;
 };
 declare const Drawer: React$1.NamedExoticComponent<DrawerProps & React$1.RefAttributes<SidebarRef>>;
 
-type DropdownRootProps<T extends string> = Omit<MenuProps<T>, "children"> & {
+type DropdownMenuProps<T extends string> = Omit<MenuProps<T>, "children"> & {
     children?: ReactNode | ((props: {
         open: boolean;
     }) => ReactNode);
     title?: ReactNode;
     icon?: ButtonProps["icon"];
     open?: boolean;
-    onCloseAutoFocus?: React__default.EventHandler<SyntheticEvent<unknown>>;
     emptyState?: React__default.ReactNode;
     contentStyle?: React__default.CSSProperties;
-} & Pick<ComponentProps<typeof DropdownMenu$1.Content>, "side" | "sideOffset" | "align" | "alignOffset" | "collisionPadding">;
+    modal?: boolean;
+} & Pick<ComponentProps<typeof Menu.Positioner>, "side" | "sideOffset" | "align" | "alignOffset" | "collisionPadding">;
 declare const DropdownMenu: <T extends string>(props: Omit<MenuProps<T>, "children"> & {
     children?: ReactNode | ((props: {
         open: boolean;
@@ -1614,10 +1641,10 @@ declare const DropdownMenu: <T extends string>(props: Omit<MenuProps<T>, "childr
     title?: ReactNode;
     icon?: ButtonProps["icon"];
     open?: boolean;
-    onCloseAutoFocus?: React__default.EventHandler<SyntheticEvent<unknown>>;
     emptyState?: React__default.ReactNode;
     contentStyle?: React__default.CSSProperties;
-} & Pick<DropdownMenu$1.DropdownMenuContentProps & React__default.RefAttributes<HTMLDivElement>, "side" | "sideOffset" | "align" | "alignOffset" | "collisionPadding"> & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any> | null;
+    modal?: boolean;
+} & Pick<_base_ui_react_menu.MenuPositionerProps & React__default.RefAttributes<HTMLDivElement>, "sideOffset" | "side" | "align" | "alignOffset" | "collisionPadding"> & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any> | null;
 
 type RenderPreviewProps = {
     children: string;
@@ -1628,7 +1655,7 @@ type RenderPreviewProps = {
     style?: React__default.CSSProperties;
     className?: string;
 };
-type Props$a = {
+type Props$9 = {
     value: string;
     children?: (props: RenderPreviewProps) => React__default.ReactNode;
     placeholder?: string;
@@ -1652,7 +1679,32 @@ type Props$a = {
 interface EditableTextRef {
     startEditing: () => void;
 }
-declare const EditableText: React__default.NamedExoticComponent<Props$a & React__default.RefAttributes<EditableTextRef>>;
+declare const EditableText: React__default.NamedExoticComponent<Props$9 & React__default.RefAttributes<EditableTextRef>>;
+
+declare const SKIN_TONES: {
+    readonly default: "";
+    readonly light: "🏻";
+    readonly "medium-light": "🏼";
+    readonly medium: "🏽";
+    readonly "medium-dark": "🏾";
+    readonly dark: "🏿";
+};
+type SkinTone = keyof typeof SKIN_TONES;
+
+interface EmojiPickerStorage {
+    getSkinTone: () => SkinTone | null;
+    setSkinTone: (tone: SkinTone) => void;
+}
+interface EmojiPickerProps {
+    size: {
+        width: number;
+        height: number;
+    };
+    emojis: Gemoji[];
+    onSelect: (emoji: string) => void;
+    storage?: EmojiPickerStorage;
+}
+declare const EmojiPicker: React__default.NamedExoticComponent<EmojiPickerProps>;
 
 type FadeDirection = "left" | "right" | "top" | "bottom";
 type FadeProps = {
@@ -1727,6 +1779,14 @@ declare const Grid: <T, M extends string = string>(props: CollectionProps<T, M>
     ref?: React__default.ForwardedRef<CollectionRef>;
 } & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement<any> | null;
 
+interface GridBackgroundProps {
+    transform?: AffineTransform;
+    /** @default 10 */
+    gridSize?: number;
+    dotSize?: number;
+}
+declare const GridBackground: ({ transform, gridSize: gridSizeProp, dotSize, }: GridBackgroundProps) => React__default.JSX.Element;
+
 interface ItemProps<MenuItemType extends string = string> {
     id: string;
     href?: string;
@@ -1791,7 +1851,7 @@ declare namespace GridView {
     const SectionHeader: React__default.MemoExoticComponent<typeof GridViewSectionHeader>;
 }
 
-type Props$9 = Omit<ButtonProps, "children" | "variant" | "flex" | "size"> & {
+type Props$8 = Omit<ButtonProps, "children" | "variant" | "flex" | "size"> & {
     iconName: IconName;
     className?: string;
     style?: React$1.CSSProperties;
@@ -1799,7 +1859,7 @@ type Props$9 = Omit<ButtonProps, "children" | "variant" | "flex" | "size"> & {
     color?: string;
     size?: number;
 };
-declare const IconButton: React$1.NamedExoticComponent<Omit<Props$9, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const IconButton: React$1.NamedExoticComponent<Omit<Props$8, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const InspectorContainer: React__default.NamedExoticComponent<{
     header?: React__default.ReactNode;
@@ -1811,49 +1871,6 @@ declare const InspectorContainer: React__default.NamedExoticComponent<{
     style?: React__default.CSSProperties;
 } & React__default.RefAttributes<HTMLDivElement>>;
 
-type MenuSeparatorComponent = React__default.FC<{
-    className?: string;
-}>;
-type MenuItemTextComponent = React__default.FC<{
-    children?: React__default.ReactNode;
-}>;
-type MenuItemComponent = React__default.ForwardRefExoticComponent<React__default.RefAttributes<HTMLDivElement> & React__default.PropsWithoutRef<{
-    className?: string;
-    disabled?: boolean;
-    children?: React__default.ReactNode;
-    value: string;
-    onSelect?: (event: any) => void;
-    onClick?: (event: React__default.MouseEvent<any>) => void;
-}>>;
-type MenuCheckboxItemComponent = React__default.FC<{
-    checked?: boolean | "indeterminate";
-    disabled?: boolean;
-    onSelect?: (event: any) => void;
-    className?: string;
-    children?: React__default.ReactNode;
-}>;
-type MenuItemIndicatorComponent = React__default.FC<{
-    className?: string;
-    children?: React__default.ReactNode;
-}>;
-type MenuComponents = {
-    Separator: MenuSeparatorComponent;
-    ItemText: MenuItemTextComponent;
-    Item: MenuItemComponent;
-    CheckboxItem?: MenuCheckboxItemComponent;
-    ItemIndicator?: MenuItemIndicatorComponent;
-    Sub?: typeof DropdownMenu$1.Sub | typeof ContextMenu$1.Sub;
-    SubTrigger?: typeof DropdownMenu$1.SubTrigger | typeof ContextMenu$1.SubTrigger;
-    SubContent?: typeof DropdownMenu$1.SubContent | typeof ContextMenu$1.SubContent;
-    Portal?: typeof DropdownMenu$1.Portal | typeof ContextMenu$1.Portal;
-};
-type MenuViewportProps<T extends string> = {
-    items: MenuItem<T>[];
-    Components: MenuComponents;
-    onSelect?: (value: any) => void;
-};
-declare const MenuViewport: <T extends string>({ items, Components, onSelect, }: MenuViewportProps<T>) => React__default.JSX.Element;
-
 interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
 }
 declare const Label: React__default.NamedExoticComponent<LabelProps & React__default.RefAttributes<HTMLLabelElement>>;
@@ -2084,7 +2101,7 @@ declare function getPipelineResultLink(value: unknown): {
 } | undefined;
 
 type PopoverVariant = "normal" | "large";
-interface Props$8 extends Pick<ComponentProps<(typeof Popover$1)["Content"]>, "onOpenAutoFocus" | "onCloseAutoFocus" | "onPointerDownOutside" | "onInteractOutside" | "onFocusOutside" | "side"> {
+interface Props$7 {
     children: React__default.ReactNode | ((props: {
         close: () => void;
     }) => React__default.ReactNode);
@@ -2099,13 +2116,19 @@ interface Props$8 extends Pick<ComponentProps<(typeof Popover$1)["Content"]>, "o
     className?: string;
     style?: React__default.CSSProperties;
     portalContainer?: HTMLElement | null;
+    side?: "top" | "bottom" | "left" | "right";
+    /**
+     * Called when an interaction outside the popover occurs.
+     * Return false to prevent the popover from closing.
+     */
+    shouldCloseOnInteractOutside?: (event: PointerEvent) => boolean;
 }
 declare const popoverStyle: {
     base: string;
     large: string;
     normal: string;
 };
-declare function Popover({ children, trigger, variant, closable, open, side, sideOffset, showArrow, onOpenChange, onOpenAutoFocus, onCloseAutoFocus, onPointerDownOutside, onInteractOutside, onFocusOutside, onClickClose, className, portalContainer, style, }: Props$8): React__default.JSX.Element;
+declare function Popover({ children, trigger, variant, closable, open, side, sideOffset, showArrow, onOpenChange, onClickClose, className, portalContainer, style, shouldCloseOnInteractOutside, }: Props$7): React__default.JSX.Element;
 
 type ColorScheme$3 = "normal" | "warning" | "primary" | "secondary";
 declare function Progress({ value, colorScheme, color, className, style: styleProp, }: {
@@ -2158,15 +2181,10 @@ declare function ScrollableSidebar({ children }: {
     children: React__default.ReactNode;
 }): React__default.JSX.Element;
 
-interface Props$7 {
-    children?: React$1.ReactNode | ((scrollElementRef: HTMLDivElement) => React$1.ReactNode);
-}
-declare const ScrollArea: React$1.NamedExoticComponent<Props$7>;
-
 type ScrollAreaViewportProps = React$1.HTMLAttributes<HTMLDivElement> & {
     ref?: React$1.Ref<HTMLDivElement>;
 };
-declare function ScrollArea2({ children, className, viewportClassName, orientation, style, viewportProps, }: {
+declare function ScrollArea({ children, className, viewportClassName, orientation, style, viewportProps, }: {
     children: React$1.ReactNode;
     className?: string;
     viewportClassName?: string;
@@ -2210,6 +2228,7 @@ declare const Section$1: React__default.NamedExoticComponent<{
 
 type SegmentedControlColorScheme = "primary" | "secondary";
 type SegmentedControlVariant = "default" | "tabs" | "buttons";
+type SegmentedControlItemWidth = "auto" | "equal" | "fit";
 interface SegmentedControlProps<T extends string> {
     id?: string;
     value?: T;
@@ -2221,6 +2240,14 @@ interface SegmentedControlProps<T extends string> {
     className?: string;
     style?: React__default.CSSProperties;
     variant?: SegmentedControlVariant;
+    /**
+     * Controls item width distribution.
+     * - "auto": Items try to be equal width, but won't shrink below their content
+     * - "equal": Items are always equal width (may truncate content)
+     * - "fit": Items fit their content
+     * @default "auto"
+     */
+    itemWidth?: SegmentedControlItemWidth;
 }
 type SegmentedControlItemProps<T extends string> = {
     title?: ReactNode;
@@ -2256,7 +2283,9 @@ type Props$6<T extends string> = {
     onFocus?: FocusEventHandler;
     onBlur?: FocusEventHandler;
     contentStyle?: React__default.CSSProperties;
-} & Pick<SelectProps, "open" | "onOpenChange">;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
 declare const SelectMenu: <T extends string = string>(props: Props$6<T>) => React__default.ReactElement<any> | null;
 
 type ColorScheme$1 = "primary" | "secondary";
@@ -2413,20 +2442,29 @@ declare const TextAreaRow: React__default.NamedExoticComponent<Omit<{
     autoResize?: boolean;
 } & React__default.TextareaHTMLAttributes<HTMLTextAreaElement> & React__default.RefAttributes<HTMLTextAreaElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
-declare const Toast: ({ title, content, children, ...props }: {
+interface ToastData {
     title?: string;
     content: ReactNode;
-    children?: React__default.ReactNode;
-}) => React__default.JSX.Element;
+    action?: ReactNode;
+}
+interface ToastContextValue {
+    showToast: (data: ToastData) => void;
+}
+declare function useToast(): ToastContextValue;
 declare const ToastProvider: ({ children }: {
     children: React__default.ReactNode;
 }) => React__default.JSX.Element;
+declare const Toast: ({ title, content, children, }: {
+    title?: string;
+    content: ReactNode;
+    children?: React__default.ReactNode;
+}) => React__default.JSX.Element;
 
 interface Props$1 {
     children: React$1.ReactNode;
     content: React$1.ReactNode;
     sideOffset?: number;
-    side?: ComponentProps<typeof Tooltip$1.Content>["side"];
+    side?: "top" | "bottom" | "left" | "right";
     portalContainer?: HTMLElement | null;
 }
 declare const Tooltip: React$1.NamedExoticComponent<Props$1>;
@@ -2480,7 +2518,7 @@ type UserPointerProps = {
     name?: string;
     /** label to display in the tooltip next to the Pointer */
     visible?: boolean;
-    point: Point;
+    point?: Point;
     /** defaults to a random color based on the key, but can optionally be overridden */
     backgroundColor?: string;
     style?: React__default.CSSProperties;
@@ -2529,18 +2567,35 @@ type VirtualizedProps = {
      */
     gap?: number;
     /**
-     * Render content inside ScrollArea2 instead of a plain div.
+     * Render content inside ScrollArea instead of a plain div.
      */
     useScrollArea?: boolean;
     /**
      * Optional class applied to the ScrollArea viewport when `useScrollArea` is true.
      */
     scrollAreaViewportClassName?: string;
+    /**
+     * Callback to determine if a row should be sticky.
+     * Only one sticky row is shown at a time. When the next sticky row approaches,
+     * it pushes the current one up and out of view.
+     */
+    isStickyRow?: (index: number) => boolean;
 };
 declare const Virtualized: React__default.NamedExoticComponent<VirtualizedProps & React__default.RefAttributes<IVirtualizedList>>;
 
+type OverlayLayout = "bottomCenterTopRight" | "topLeftTopRight";
+interface OverlayToolbarProps {
+    left?: React__default.ReactNode;
+    right?: React__default.ReactNode;
+    overlayLayout?: OverlayLayout;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+declare function OverlayToolbar({ left, right, overlayLayout, className, style, }: OverlayToolbarProps): React__default.JSX.Element;
+
 type SideType = "auto" | "panel" | "drawer";
 type DetectSizeType = "container" | "window";
+type ToolbarVariant = "default" | "overlay";
 interface WorkspaceLayoutProps<LeftTab extends string, RightTab extends string> extends Pick<LayoutProps<LeftTab, RightTab>, "leftTabItems" | "leftTabValue" | "rightTabItems" | "rightTabValue" | "onChangeLeftTab" | "onChangeRightTab"> {
     id?: string;
     className?: string;
@@ -2553,6 +2608,24 @@ interface WorkspaceLayoutProps<LeftTab extends string, RightTab extends string>
     right?: RenderPanel<RightTab>;
     rightOptions?: SideOptions;
     toolbar?: React__default.ReactNode;
+    /**
+     * Toolbar variant - "default" renders above content, "overlay" renders floating panels
+     * @default "default"
+     */
+    toolbarVariant?: ToolbarVariant;
+    /**
+     * Content for the left/bottom-center overlay panel (when toolbarVariant is "overlay")
+     */
+    overlayToolbarLeft?: React__default.ReactNode;
+    /**
+     * Content for the right overlay panel (when toolbarVariant is "overlay")
+     */
+    overlayToolbarRight?: React__default.ReactNode;
+    /**
+     * Layout configuration for overlay toolbar
+     * @default "bottomCenterTopRight"
+     */
+    overlayLayout?: OverlayLayout;
     sideType?: SideType;
     sideTypeBreakpoint?: number;
     detectSize?: DetectSizeType;
@@ -2766,6 +2839,7 @@ type UseThemeReturnType = "dark" | "light";
 declare function useTheme(): UseThemeReturnType;
 
 declare const proseTheme = "n-prose n-prose-sm n-max-w-none [[data-theme='dark']_&]:n-prose-invert prose-a:n-text-blue-600";
+declare const whiteboardProseTheme: (isDark: boolean) => string;
 
 type ClassNameItem = string | number | BigInt | boolean | null | undefined;
 type Category = "text" | "color" | "font" | "flex" | "position" | "textAlign" | "rounded";
@@ -2952,7 +3026,13 @@ interface BaseToolbarProps {
     className?: string;
     innerClassName?: string;
     enableAbsoluteBreakpoint?: boolean;
+    /** Whether to enable container query classes. @default true */
+    enableContainerQuery?: boolean;
 }
+/** Shared toolbar style that sets button and input backgrounds to transparent */
+declare const toolbarTransparentStyle: {
+    readonly [x: string]: "transparent";
+};
 declare function BaseToolbarContainer({ children, showDivider, className, innerClassName, enableAbsoluteBreakpoint, }: {
     children: React__default.ReactNode;
     showDivider?: boolean;
@@ -2960,14 +3040,29 @@ declare function BaseToolbarContainer({ children, showDivider, className, innerC
     innerClassName?: string;
     enableAbsoluteBreakpoint?: boolean;
 }): React__default.JSX.Element;
-declare function BaseToolbar({ children, left, right, logo, showDivider, className, innerClassName, enableAbsoluteBreakpoint, }: BaseToolbarProps): React__default.JSX.Element;
+declare function BaseToolbar({ children, left, right, logo, showDivider, className, innerClassName, enableAbsoluteBreakpoint, enableContainerQuery, }: BaseToolbarProps): React__default.JSX.Element;
 
 declare const ToolbarMenuContext: React__default.Context<{
     dividerOverflow?: number;
+    /** When true, PopoverMenuItem items show as dialogs on small screens */
+    useDialogOnSmallScreen?: boolean;
+    /** Function to detect if screen is small. Required when useDialogOnSmallScreen is true */
+    isSmallScreen?: boolean;
+    /** Function to open a dialog. Required when useDialogOnSmallScreen is true */
+    openDialog?: (options: {
+        title: ReactNode;
+        className?: string;
+        children: ReactNode | ((props: {
+            close: () => void;
+        }) => ReactNode);
+    }) => Promise<void> & {
+        close: () => void;
+    };
 }>;
 declare const ToolbarMenuDropdown: <T extends string>(props: {
     item: SubMenuItem<T>;
     onSelectMenuItem?: (value: T) => void;
+    onPopoverOpenChange?: (open: boolean) => void;
 }) => React__default.ReactElement<any> | null;
 declare const ToolbarShortcut: ({ shortcut, label, }: {
     shortcut: string;
@@ -2976,6 +3071,7 @@ declare const ToolbarShortcut: ({ shortcut, label, }: {
 declare const ToolbarMenuPopover: (props: {
     item: PopoverMenuItem;
     portalContainer?: HTMLElement | null;
+    onPopoverOpenChange?: (open: boolean) => void;
 }) => React__default.ReactElement<any> | null;
 declare const ToolbarMenuButton: <T extends string>(props: {
     item: SelectableMenuItem<T>;
@@ -2994,6 +3090,7 @@ declare const ToolbarMenuItem: <T extends string>(props: {
     portalContainer?: HTMLElement | null;
     displayFilter?: DisplayFilter;
     dividerOverflow?: number;
+    onPopoverOpenChange?: (open: boolean) => void;
 }) => React__default.ReactElement<any> | null;
 type DisplayFilter = "iconOnly" | "iconAndText" | "textOnly";
 declare const ToolbarMenu: <T extends string>(props: {
@@ -3005,6 +3102,7 @@ declare const ToolbarMenu: <T extends string>(props: {
     portalContainer?: HTMLElement | null;
     displayFilter?: DisplayFilter;
     dividerOverflow?: number;
+    onPopoverOpenChange?: (open: boolean) => void;
 }) => React__default.ReactElement<any> | null;
 interface ToolbarProps<T extends string = string> {
     children?: React__default.ReactNode;
@@ -3016,6 +3114,7 @@ interface ToolbarProps<T extends string = string> {
     shouldBindKeyboardShortcuts?: boolean;
     dividerOverflow?: number;
 }
+declare function useBindKeyboardShortcutsForMenuItems<T extends string>(items: MenuItem<T>[], onSelectMenuItem?: (value: T) => void): void;
 declare function Toolbar<T extends string = string>({ children, logo, leftMenuItems, rightMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts, dividerOverflow, }: ToolbarProps<T>): React__default.JSX.Element;
 
 type ToolbarDrawerProps = {
@@ -3025,4 +3124,4 @@ type ToolbarDrawerProps = {
 };
 declare const ToolbarDrawer: React__default.NamedExoticComponent<ToolbarDrawerProps & React__default.RefAttributes<HTMLDivElement>>;
 
-export { AIAssistantInput, AIAssistantLayout, AIAssistantLoadingIndicator, type AcceptsDrop, type AcceptsDropOptions, type AcceptsFromList, ActionMenu, type ActivityIconSemanticColor, ActivityIndicator, ActivityLog, type ActivityLogItem, Anchor, AnimatePresence, type AnimatePresenceChildState, type AnimatePresenceProps, Avatar, type AvatarProps, AvatarStack, Banner, type BannerProps, type BaseComboboxProps, BaseToolbar, BaseToolbarContainer, type BaseToolbarProps, Body, BreadcrumbSlash, BreadcrumbText, Button, type ButtonProps, CHECKBOX_INDENT_WIDTH, CHECKBOX_RIGHT_INSET, CHECKBOX_WIDTH, Checkbox$1 as Checkbox, Chip, type ChipProps, Collection, type CollectionItemSize, type CollectionProps, type CollectionRef, type CollectionRenderActionProps, type CollectionThumbnailProps, type CollectionThumbnailSize, type CollectionViewType, ColorSwatch, ColorSwatchControl, type ColorSwatchSize, Combobox, ComboboxMenu, type ComboboxProps, type ComboboxRef, ComboboxState, type ComboboxStateSnapshot, CommandPalette, ConnectedUsersMenuLayout, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, type DetectSizeType, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, type DragItem, type DragState, DraggableMenuButton, Drawer, type DrawerProps, type DropValidator, DropdownMenu, type DropdownRootProps, EditableText, type EditableTextRef, ExtraSmall, type ExtractMenuItemType, Fade, type FadeDirection, type FadeProps, FileExplorerCollection, FileExplorerDetail, FileExplorerEmptyState, FileExplorerLayout, FileExplorerUploadButton, FileUploadIndicator, FileUploadList, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, Grid, GridView, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, INPUT_HEIGHT, type IScoredItem, type ISearchCompletionMenu, type IToken, type IVirtualizedList, Icon, IconButton, type IconName, type IconProp, ImageBlockComponent, type ImageDataContextValue, ImageDataProvider, IndentContext, InputField, type InputFieldInputProps, type InputFieldProps, type InputFieldSize, InspectorContainer, InspectorPrimitives, Italic, type ItemChildrenExtraProps, type ItemChildrenProps, KeyboardShortcut, Label, LabelContext, type LabelProps, type LabelType, LabelTypeContext, type LabelTypeContextValue, LabelWidthContext, type LabelWidthContextValue, LabeledElementView, LabeledField, type LayoutProps, type LinkComponent, LinkComponentProvider, List, ListMenu, type ListMenuProps, ListNavigator, type ListNavigatorProps, ListView, Logo, type MatchRange, MediaThumbnail, type MediaThumbnailProps, type MenuComponents, type MenuConfig, type MenuItem, type MenuItemIcon, type MenuItemProps, type MenuItemRole, type MenuProps, MenuViewport, Message, type MessageProps, type MoveDragItemHandler, type MoveDragItemParameters, type MoveTreeItemOptions, Navigator, type NavigatorHeaderProps, type NavigatorNavigation, type NavigatorParams, type NavigatorProps, type NavigatorPushFunction, type NavigatorRenderContext, type NavigatorRenderHeader, type NavigatorReplaceFunction, type NavigatorRoute, type NavigatorRoutesConfig, type NavigatorScreenProps, type NavigatorStackEntry, type NonSelectableMenuItem, type OpenPortalControlsContextValue, type OpenPortalsContextValue, OpenPortalsProvider, type OptionModeOnlyProps, type OptionModeProps, type Optional, type PanelLayoutState, type PercentageSidebarOptions, PipelineResultLayout, PipelineResultLink, Popover, type PopoverMenuItem, type PortalScopeContextValue, PortalScopeProvider, Progress, type RelativeDropPosition, type RenderPanel, type RenderThumbnailIconProps, ResizableContainer, RingProgress, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, type ScoredMenuItem, ScrollArea, ScrollArea2, ScrollableSidebar, SearchCompletionMenu, Section$1 as Section, SectionHeader$1 as SectionHeader, SectionHeaderMenuItem, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectMenu, type SelectableMenuItem, SelectionToolbarContainer, type SeparatorItem, type SetNumberMode, SharedDragProvider, type SharedDragProviderProps, type SideOptions, type SideType, type SidebarRef, type SketchPattern, Slider, Small, Sortable, SortableItemContext, type SortableItemContextProps, type SortableProps, Spacer, type StackItem, StackNavigator, type StackNavigatorHeaderProps, type StackNavigatorProps, type StackNavigatorRenderHeader, Stepper, type StringModeOnlyProps, type StringModeProps, type SubMenuItem, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Tabs, type TabsProps, Text$1 as Text, TextArea, TextAreaRow, type TextProps, type Theme, type ThemeColor, Toast, ToastProvider, type TokenValue, Toolbar, ToolbarDrawer, ToolbarMenu, ToolbarMenuButton, ToolbarMenuContext, ToolbarMenuDropdown, ToolbarMenuItem, ToolbarMenuPopover, type ToolbarProps, ToolbarShortcut, Tooltip, TreeView, type UseThemeReturnType, UserAvatar, UserPicker, type UserPickerProps, type UserPickerUser, UserPointer, type UserPointerProps, type ValidateDropIndicatorParams, Virtualized, type VirtualizedProps, type VirtualizedRenderItem, WorkspaceLayout, type WorkspaceLayoutGroup, type WorkspaceLayoutProps, type WorkspaceLayoutRef, type WorkspaceLayoutState, type WorkspaceSideContextValue, WorkspaceSideProvider, acceptsDrop, colorForStringValues, colorFromString, colorSwatchSizeMap, createDragItemKey, createNavigator, createSectionedMenu, createSharedDrag, cssVarNames, cssVars, cx, decodeImageSrc, defaultAcceptsDrop, dragItemKeySeparator, editableBlockStyles, filterWithGroupedSections, formatByteSize, fuzzyFilter, fuzzyScore, fuzzyTokenize, getClosestPortalScope, getFieldSpacing, getGridSize, getItemFirstCollisionDetection, getKeyboardShortcutsForMenuItems, getMenuItemKey, getNewValue, getNextIndex, getPipelineResultLink, getThumbnailColors, getUserDisplayName, isMenuItemSectionHeader, isNonSelectableMenuItem, isPopoverMenuItem, isSelectableMenuItem, isSelectableMenuItemWithScore, isSubMenuItem, labeledFieldStyles, mergeConflictingClassNames, moveTreeItem, normalizeListTargetIndex, parseDragItemKey, popoverStyle, portalScopeDataSetName, portalScopePropName, portalScopeProps, proseTheme, renderIcon, separator, styles, textStyles, updateSelection, useAutoResize, useComboboxState, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDialogContainsElement, useDialogContext, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHasOpenPortals, useHover, useImageData, useIndent, useInputFieldContext, useLabel, useLabelType, useLabelWidth, useLinkComponent, useNavigator, useNavigatorRoute, useOpenConfirmationDialog, useOpenDialog, useOpenInputDialog, useOpenPortalsControls, usePlatform, usePlatformModKey, usePortalScopeId, useTheme, useWorkspaceSide, validateDropIndicator, withDragProvider, withSeparatorElements };
+export { AIAssistantInput, AIAssistantLayout, AIAssistantLoadingIndicator, type AcceptsDrop, type AcceptsDropOptions, type AcceptsFromList, ActionMenu, type ActivityIconSemanticColor, ActivityIndicator, ActivityLog, type ActivityLogItem, Anchor, AnimatePresence, type AnimatePresenceChildState, type AnimatePresenceProps, Avatar, type AvatarProps, AvatarStack, Banner, type BannerProps, type BaseComboboxProps, BaseToolbar, BaseToolbarContainer, type BaseToolbarProps, Body, BreadcrumbSlash, BreadcrumbText, Button, type ButtonProps, CHECKBOX_INDENT_WIDTH, CHECKBOX_RIGHT_INSET, CHECKBOX_WIDTH, Checkbox$1 as Checkbox, Chip, type ChipProps, Collection, type CollectionItemSize, type CollectionProps, type CollectionRef, type CollectionRenderActionProps, type CollectionThumbnailProps, type CollectionThumbnailSize, type CollectionViewType, ColorSwatch, ColorSwatchControl, type ColorSwatchSize, Combobox, ComboboxMenu, type ComboboxProps, type ComboboxRef, ComboboxState, type ComboboxStateSnapshot, CommandPalette, ConnectedUsersMenuLayout, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, type DetectSizeType, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, type DragItem, type DragState, DraggableMenuButton, Drawer, type DrawerProps, type DropValidator, DropdownMenu, type DropdownMenuProps, EditableText, type EditableTextRef, EmojiPicker, type EmojiPickerStorage, ExtraSmall, type ExtractMenuItemType, Fade, type FadeDirection, type FadeProps, FileExplorerCollection, FileExplorerDetail, FileExplorerEmptyState, FileExplorerLayout, FileExplorerUploadButton, FileUploadIndicator, FileUploadList, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, Grid, GridBackground, GridView, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, INPUT_HEIGHT, type IScoredItem, type ISearchCompletionMenu, type IToken, type IVirtualizedList, Icon, IconButton, type IconName, type IconProp, ImageBlockComponent, type ImageDataContextValue, ImageDataProvider, IndentContext, InputField, type InputFieldInputProps, type InputFieldProps, type InputFieldSize, InspectorContainer, InspectorPrimitives, Italic, type ItemChildrenExtraProps, type ItemChildrenProps, KeyboardShortcut, Label, LabelContext, type LabelProps, type LabelType, LabelTypeContext, type LabelTypeContextValue, LabelWidthContext, type LabelWidthContextValue, LabeledElementView, LabeledField, type LayoutProps, type LinkComponent, LinkComponentProvider, List, ListMenu, type ListMenuProps, ListNavigator, type ListNavigatorProps, ListView, Logo, type MatchRange, MediaThumbnail, type MediaThumbnailProps, type MenuConfig, type MenuItem, type MenuItemIcon, type MenuItemProps, type MenuItemRole, type MenuProps, Message, type MessageProps, type MoveDragItemHandler, type MoveDragItemParameters, type MoveTreeItemOptions, Navigator, type NavigatorHeaderProps, type NavigatorNavigation, type NavigatorParams, type NavigatorProps, type NavigatorPushFunction, type NavigatorRenderContext, type NavigatorRenderHeader, type NavigatorReplaceFunction, type NavigatorRoute, type NavigatorRoutesConfig, type NavigatorScreenProps, type NavigatorStackEntry, type NonSelectableMenuItem, type OpenPortalControlsContextValue, type OpenPortalsContextValue, OpenPortalsProvider, type OptionModeOnlyProps, type OptionModeProps, type Optional, type OverlayLayout, OverlayToolbar, type OverlayToolbarProps, type PanelLayoutState, PipelineResultLayout, PipelineResultLink, Popover, type PopoverMenuItem, type PortalScopeContextValue, PortalScopeProvider, Progress, type RelativeDropPosition, type RenderPanel, type RenderThumbnailIconProps, ResizableContainer, RingProgress, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, type ScoredMenuItem, ScrollArea, type ScrollToIndexAlign, type ScrollToIndexOptions, type ScrollToIndexPadding, ScrollableSidebar, SearchCompletionMenu, Section$1 as Section, SectionHeader$1 as SectionHeader, SectionHeaderMenuItem, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectMenu, type SelectableMenuItem, SelectionToolbarContainer, type SeparatorItem, type SetNumberMode, SharedDragProvider, type SharedDragProviderProps, type SideOptions, type SideType, type SidebarOptions, type SidebarRef, type SketchPattern, Slider, Small, Sortable, SortableItemContext, type SortableItemContextProps, type SortableProps, Spacer, type StackItem, StackNavigator, type StackNavigatorHeaderProps, type StackNavigatorProps, type StackNavigatorRenderHeader, Stepper, type StringModeOnlyProps, type StringModeProps, type SubMenuItem, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Tabs, type TabsProps, Text$1 as Text, TextArea, TextAreaRow, type TextProps, type Theme, type ThemeColor, Toast, ToastProvider, type TokenValue, Toolbar, ToolbarDrawer, ToolbarMenu, ToolbarMenuButton, ToolbarMenuContext, ToolbarMenuDropdown, ToolbarMenuItem, ToolbarMenuPopover, type ToolbarProps, ToolbarShortcut, type ToolbarVariant, Tooltip, TreeView, type UseThemeReturnType, UserAvatar, UserPicker, type UserPickerProps, type UserPickerUser, UserPointer, type UserPointerProps, type ValidateDropIndicatorParams, Virtualized, type VirtualizedProps, type VirtualizedRenderItem, WorkspaceLayout, type WorkspaceLayoutGroup, type WorkspaceLayoutProps, type WorkspaceLayoutRef, type WorkspaceLayoutState, type WorkspaceSideContextValue, WorkspaceSideProvider, acceptsDrop, colorForStringValues, colorFromString, colorSwatchSizeMap, createDragItemKey, createNavigator, createSectionedMenu, createSharedDrag, cssVarNames, cssVars, cx, decodeImageSrc, defaultAcceptsDrop, dragItemKeySeparator, editableBlockStyles, filterWithGroupedSections, formatByteSize, fuzzyFilter, fuzzyScore, fuzzyTokenize, getClosestPortalScope, getFieldSpacing, getGridSize, getItemFirstCollisionDetection, getKeyboardShortcutsForMenuItems, getMenuItemKey, getNewValue, getNextIndex, getPipelineResultLink, getThumbnailColors, getUserDisplayName, isMenuItemSectionHeader, isNonSelectableMenuItem, isPopoverMenuItem, isSelectableMenuItem, isSelectableMenuItemWithScore, isSubMenuItem, labeledFieldStyles, mergeConflictingClassNames, moveTreeItem, normalizeListTargetIndex, parseDragItemKey, popoverStyle, portalScopeDataSetName, portalScopePropName, portalScopeProps, proseTheme, renderIcon, separator, styles, textStyles, toolbarTransparentStyle, updateSelection, useAutoResize, useBindKeyboardShortcutsForMenuItems, useComboboxState, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDialogContainsElement, useDialogContext, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHasOpenPortals, useHover, useImageData, useIndent, useInputFieldContext, useLabel, useLabelType, useLabelWidth, useLinkComponent, useNavigator, useNavigatorRoute, useOpenConfirmationDialog, useOpenDialog, useOpenInputDialog, useOpenPortalsControls, usePlatform, usePlatformModKey, usePortalScopeId, useTheme, useToast, useWorkspaceSide, validateDropIndicator, whiteboardProseTheme, withDragProvider, withSeparatorElements };