@noya-app/noya-designsystem 0.1.62 → 0.1.63

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { ReactNode, CSSProperties, ReactHTML, HTMLAttributes, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, ForwardedRef, ComponentProps, SyntheticEvent, LabelHTMLAttributes } from 'react';
+import React__default, { ReactNode, CSSProperties, ReactHTML, HTMLAttributes, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, ForwardedRef, ComponentProps, SyntheticEvent, LabelHTMLAttributes, DetailedHTMLProps } from 'react';
 import { IItemScore } from 'vscode-fuzzy-scorer';
 import * as Icons from '@noya-app/noya-icons';
 export { Icons };
@@ -18,8 +18,10 @@ import { KeyModifiers, PlatformName } from '@noya-app/noya-keymap';
 import * as RadixContextMenu from '@radix-ui/react-context-menu';
 import { MultiplayerUser } from '@noya-app/noya-multiplayer-react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as PopperPrimitive from '@radix-ui/react-popper';
 import { SelectProps } from '@radix-ui/react-select';
 import { useSortable } from '@dnd-kit/sortable';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { ImperativePanelGroupHandle } from 'react-resizable-panels';
 import { RgbaColor } from '@noya-app/noya-colorpicker';
 
@@ -89,8 +91,17 @@ type SubMenuItem<T extends string> = BaseMenuItem & {
     items: MenuItem<T>[];
     id: string;
 };
-type NonSelectableMenuItem<T extends string> = SeparatorItem | SectionHeaderMenuItem | SubMenuItem<T>;
-type MenuItem<T extends string> = SeparatorItem | SelectableMenuItem<T> | SectionHeaderMenuItem | SubMenuItem<T>;
+type PopoverMenuItem = BaseMenuItem & {
+    type: "popover";
+    id: string;
+    content: ReactNode | ((props: {
+        close: () => void;
+    }) => ReactNode);
+    shortcut?: string;
+    tooltip?: ReactNode;
+};
+type NonSelectableMenuItem<T extends string> = SeparatorItem | SectionHeaderMenuItem | SubMenuItem<T> | PopoverMenuItem;
+type MenuItem<T extends string> = SeparatorItem | SelectableMenuItem<T> | SectionHeaderMenuItem | SubMenuItem<T> | PopoverMenuItem;
 type ScoredSelectableMenuItem<T extends string> = SelectableMenuItem<T> & IScoredItem;
 type ScoredMenuItem<T extends string> = ScoredSelectableMenuItem<T> | SectionHeaderMenuItem;
 type ExtractMenuItemType<T> = T extends SelectableMenuItem<infer U> ? U : never;
@@ -98,6 +109,7 @@ declare const isSelectableMenuItem: <T extends string>(item: MenuItem<T>) => ite
 declare const isNonSelectableMenuItem: <T extends string>(item: MenuItem<T>) => item is NonSelectableMenuItem<T>;
 declare const isMenuItemSectionHeader: (item: MenuItem<string>) => item is SectionHeaderMenuItem;
 declare const isSelectableMenuItemWithScore: (item: MenuItem<string>) => item is ScoredSelectableMenuItem<string>;
+declare const isPopoverMenuItem: (item: MenuItem<string>) => item is PopoverMenuItem;
 declare const getMenuItemKey: <T extends string>(item: MenuItem<T>, index: number) => string;
 declare const CHECKBOX_WIDTH = 15;
 declare const CHECKBOX_RIGHT_INSET = 6;
@@ -139,14 +151,14 @@ type ActionMenuProps<TMenu extends string> = {
 };
 declare const ActionMenu: <TMenu extends string>(props: ActionMenuProps<TMenu>) => React__default.ReactElement | null;
 
-interface Props$e {
+interface Props$f {
     size?: number;
     opacity?: number;
     color?: string;
     trackColor?: string;
     className?: string;
 }
-declare const ActivityIndicator: React$1.NamedExoticComponent<Props$e>;
+declare const ActivityIndicator: React$1.NamedExoticComponent<Props$f>;
 
 declare const AIAssistantLoadingIndicator: () => React__default.JSX.Element;
 type AIAssistantInputProps = {
@@ -275,6 +287,7 @@ declare const cssVars: {
         listviewEditingBackground: string;
         sliderThumbBackground: string;
         sliderBorder: string;
+        sliderActiveBackground: string;
         segmentedControlItem: string;
         segmentedControlItemActiveBackground: string;
         segmentedControlItemActiveText: string;
@@ -429,6 +442,7 @@ declare const cssVars: {
         activeInput: string;
         segment: string;
         sliderThumb: string;
+        tooltip: string;
     };
 };
 declare const cssVarNames: {
@@ -476,6 +490,7 @@ declare const cssVarNames: {
         listviewEditingBackground: string;
         sliderThumbBackground: string;
         sliderBorder: string;
+        sliderActiveBackground: string;
         segmentedControlItem: string;
         segmentedControlItemActiveBackground: string;
         segmentedControlItemActiveText: string;
@@ -630,6 +645,7 @@ declare const cssVarNames: {
         activeInput: string;
         segment: string;
         sliderThumb: string;
+        tooltip: string;
     };
 };
 declare const INPUT_HEIGHT = 27;
@@ -669,18 +685,20 @@ type BreadcrumbTextProps = Omit<TextProps, "variant" | "whiteSpace" | "lineHeigh
 declare const BreadcrumbText: React__default.ForwardRefExoticComponent<BreadcrumbTextProps & React__default.RefAttributes<HTMLSpanElement>>;
 declare const BreadcrumbSlash: () => React__default.JSX.Element;
 
-type ButtonVariant = "normal" | "primary" | "secondary" | "secondaryBright" | "thin" | "floating" | "none";
+type ButtonVariant = "normal" | "thin" | "floating" | "none";
 type ButtonSize = "small" | "normal" | "large" | "floating";
-interface ButtonRootProps {
+type ButtonColorScheme = "primary" | "secondary";
+interface ButtonProps extends React__default.DetailedHTMLProps<React__default.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     id?: string;
     className?: string;
     style?: CSSProperties;
     tabIndex?: number;
     icon?: MenuItemIcon;
     iconRight?: MenuItemIcon;
-    children: ReactNode;
+    children?: ReactNode;
     active?: boolean;
     disabled?: boolean;
+    colorScheme?: ButtonColorScheme;
     variant?: ButtonVariant;
     size?: ButtonSize;
     tooltip?: ReactNode;
@@ -694,7 +712,7 @@ interface ButtonRootProps {
     rel?: string;
     download?: string;
 }
-declare const Button: React__default.ForwardRefExoticComponent<ButtonRootProps & React__default.RefAttributes<HTMLButtonElement>>;
+declare const Button: React__default.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
 
 interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type"> {
     colorScheme?: "primary" | "secondary";
@@ -1067,7 +1085,7 @@ declare function ColorSwatchControl(props: ColorSwatchControlProps): React__defa
 
 type InputSize = "small" | "medium" | "large";
 
-type Props$d = {
+type Props$e = {
     id?: string;
     style?: any;
     className?: string;
@@ -1085,15 +1103,15 @@ type Props$d = {
     onFocusChange?: (isFocused: boolean) => void;
     onBlur?: FocusEventHandler;
 } & Pick<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "autoCapitalize" | "autoCorrect" | "spellCheck" | "autoFocus">;
-type ReadOnlyProps = Props$d & {
+type ReadOnlyProps = Props$e & {
     readOnly: true;
 };
-type ControlledProps = Props$d & {
+type ControlledProps = Props$e & {
     onChange: (value: string) => void;
     onFocus?: FocusEventHandler;
     onBlur?: FocusEventHandler;
 };
-type SubmittableProps = Props$d & {
+type SubmittableProps = Props$e & {
     onSubmit: (value: string) => void;
     allowSubmittingWithSameValue?: boolean;
     submitAutomaticallyAfterDelay?: number;
@@ -1182,9 +1200,9 @@ declare const InputField: React__default.ForwardRefExoticComponent<InputFieldPro
     }) => React__default.JSX.Element>;
     readonly NumberInput: React__default.MemoExoticComponent<typeof InputFieldNumberInput>;
     readonly DropdownMenu: <T extends string>(props: InputFieldDropdownProps<T>) => React__default.ReactElement | null;
-    readonly Button: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<React__default.ButtonHTMLAttributes<HTMLButtonElement> & ButtonRootProps & {
+    readonly Button: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement> & ButtonProps & {
         variant?: "floating" | "normal";
-    } & React__default.RefAttributes<HTMLButtonElement>>>;
+    }, "ref"> & React__default.RefAttributes<HTMLButtonElement>>>;
     readonly PrimitiveElement: ({ readOnly, disabled, className, style, ...props }: {
         readOnly?: boolean;
         disabled?: boolean;
@@ -1307,7 +1325,7 @@ declare const StyledContent: React__default.ForwardRefExoticComponent<Omit<Dialo
 interface IDialog {
     containsElement: (element: HTMLElement) => boolean;
 }
-interface Props$c {
+interface Props$d {
     title?: ReactNode;
     description?: ReactNode;
     children?: ReactNode;
@@ -1319,8 +1337,8 @@ interface Props$c {
     showCloseButton?: boolean;
     className?: string;
 }
-declare const Dialog: React__default.ForwardRefExoticComponent<Props$c & React__default.RefAttributes<IDialog>>;
-declare const FullscreenDialog: React__default.ForwardRefExoticComponent<Props$c & React__default.RefAttributes<IDialog>>;
+declare const Dialog: React__default.ForwardRefExoticComponent<Props$d & React__default.RefAttributes<IDialog>>;
+declare const FullscreenDialog: React__default.ForwardRefExoticComponent<Props$d & React__default.RefAttributes<IDialog>>;
 
 type DividerVariant = "normal" | "subtle" | "strong";
 interface DividerProps {
@@ -1336,13 +1354,15 @@ declare const DividerVertical: React__default.NamedExoticComponent<DividerProps>
  * A button that opens a menu when clicked, but also allows dragging the
  */
 declare const DraggableMenuButton: <T extends string>(props: {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
     items?: MenuItem<T>[];
     onSelect?: (value: T) => void;
     onClick?: () => void;
     isVisible?: boolean;
     className?: string;
     style?: React__default.CSSProperties;
-}) => React__default.ReactElement | null;
+} & Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onSelect">) => React__default.ReactElement | null;
 
 type SidebarRef = {
     expand: () => void;
@@ -1359,9 +1379,18 @@ type PanelLayoutState = {
     leftSidebarCollapsed: boolean;
     rightSidebarCollapsed: boolean;
 };
-type LayoutProps = {
-    leftPanel: React.ReactNode;
-    rightPanel: React.ReactNode;
+type RenderPanel<TabValue extends string> = ReactNode | ((props: {
+    activeTabValue: TabValue;
+}) => ReactNode);
+type LayoutProps<LeftTab extends string = string, RightTab extends string = string> = {
+    leftPanel: ReactNode;
+    leftTabItems?: MenuItem<LeftTab>[];
+    leftTabValue?: LeftTab;
+    onChangeLeftTab?: (value: LeftTab) => void;
+    rightPanel: ReactNode;
+    rightTabItems?: MenuItem<RightTab>[];
+    rightTabValue?: RightTab;
+    onChangeRightTab?: (value: RightTab) => void;
     centerPanel: React.ReactNode;
     leftSidebarOptions: PercentageSidebarOptions;
     rightSidebarOptions: PercentageSidebarOptions;
@@ -1389,18 +1418,28 @@ type DrawerProps = {
 };
 declare const Drawer: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<DrawerProps & React$1.RefAttributes<SidebarRef>>>;
 
-type DropdownRootProps<T extends string> = MenuProps<T> & {
+type DropdownRootProps<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 RadixDropdownMenu.Content>, "side" | "sideOffset" | "align" | "alignOffset" | "collisionPadding">;
-declare const DropdownMenu: <T extends string>(props: MenuProps<T> & {
+declare const DropdownMenu: <T extends string>(props: 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<RadixDropdownMenu.DropdownMenuContentProps & React__default.RefAttributes<HTMLDivElement>, "align" | "sideOffset" | "side" | "alignOffset" | "collisionPadding"> & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
+} & Pick<RadixDropdownMenu.DropdownMenuContentProps & React__default.RefAttributes<HTMLDivElement>, "align" | "side" | "sideOffset" | "alignOffset" | "collisionPadding"> & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
 
 type RenderPreviewProps = {
     children: string;
@@ -1411,7 +1450,7 @@ type RenderPreviewProps = {
     style?: React__default.CSSProperties;
     className?: string;
 };
-type Props$b = {
+type Props$c = {
     value: string;
     children?: (props: RenderPreviewProps) => React__default.ReactNode;
     placeholder?: string;
@@ -1435,7 +1474,7 @@ type Props$b = {
 interface EditableTextRef {
     startEditing: () => void;
 }
-declare const EditableText: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Props$b & React__default.RefAttributes<EditableTextRef>>>;
+declare const EditableText: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Props$c & React__default.RefAttributes<EditableTextRef>>>;
 
 type FadeDirection = "left" | "right" | "top" | "bottom";
 type FadeProps = {
@@ -1454,9 +1493,10 @@ type FadeProps = {
 declare const Fade: ({ children, direction, width, height, className, zIndex, position, }: FadeProps) => React__default.JSX.Element;
 
 declare const FileExplorerLayout: ({ children, className, ...props }: SectionProps$1) => React__default.JSX.Element;
-declare const FileExplorerUploadButton: ({ showUploadButton, onUpload, children, }: {
+declare const FileExplorerUploadButton: ({ showUploadButton, onUpload, isUploading, children, }: {
     showUploadButton?: boolean;
     onUpload?: () => void;
+    isUploading?: boolean;
     children?: React__default.ReactNode;
 }) => React__default.JSX.Element;
 declare const FileExplorerCollection: <T, M extends string = string>(props: CollectionProps<T, M> & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
@@ -1478,21 +1518,21 @@ type SketchPattern = {
     patternTileScale: number;
 };
 
-interface Props$a {
+interface Props$b {
     id?: string;
     value?: Sketch.Color | Sketch.Gradient | SketchPattern;
 }
-declare const FillInputField: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Props$a & React__default.RefAttributes<HTMLButtonElement>>>;
+declare const FillInputField: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Props$b & React__default.RefAttributes<HTMLButtonElement>>>;
 
 declare const PatternPreviewBackground: React$1.NamedExoticComponent<{
     fillType: Sketch.PatternFillType;
     tileScale: number;
     imageRef: string;
 }>;
-interface Props$9 {
+interface Props$a {
     value?: Sketch.Color | Sketch.Gradient | SketchPattern;
 }
-declare const FillPreviewBackground: React$1.NamedExoticComponent<Props$9>;
+declare const FillPreviewBackground: React$1.NamedExoticComponent<Props$a>;
 
 interface FloatingWindowProps {
     title?: string;
@@ -1513,7 +1553,7 @@ interface FloatingWindowProps {
 }
 declare const FloatingWindow: React__default.FC<FloatingWindowProps>;
 
-interface Props$8 {
+interface Props$9 {
     value: Sketch.GradientStop[];
     selectedStop: number;
     onChangeColor: (color: Sketch.Color) => void;
@@ -1522,7 +1562,7 @@ interface Props$8 {
     onDelete: () => void;
     onSelectStop: (index: number) => void;
 }
-declare const GradientPicker: React$1.NamedExoticComponent<Props$8>;
+declare const GradientPicker: React$1.NamedExoticComponent<Props$9>;
 
 declare const getGridSize: (size: CollectionItemSize) => {
     minColumnWidth: string;
@@ -1589,14 +1629,15 @@ declare namespace GridView {
     const SectionHeader: React__default.MemoExoticComponent<typeof GridViewSectionHeader>;
 }
 
-declare const IconButton: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Omit<ButtonRootProps, "size" | "flex" | "children" | "variant"> & {
+type Props$8 = Omit<ButtonProps, "children" | "variant" | "flex" | "size"> & {
     iconName: IconName;
     className?: string;
     style?: React$1.CSSProperties;
     selected?: boolean;
     color?: string;
     size?: number;
-} & React$1.RefAttributes<HTMLButtonElement>>>;
+};
+declare const IconButton: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Omit<Props$8, "ref"> & React$1.RefAttributes<HTMLButtonElement>>>;
 
 declare const InspectorContainer: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
     header?: React__default.ReactNode;
@@ -1651,7 +1692,6 @@ type MenuViewportProps<T extends string> = {
 };
 declare const MenuViewport: <T extends string>({ items, Components, onSelect, }: MenuViewportProps<T>) => React__default.JSX.Element;
 
-type LabelPosition = "inset" | "start" | "end" | "above";
 interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
 }
 declare const Label: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<LabelProps & React__default.RefAttributes<HTMLLabelElement>>>;
@@ -1665,11 +1705,35 @@ interface ContainerProps {
 }
 declare const LabeledElementView: React$1.NamedExoticComponent<ContainerProps>;
 
-declare const labeledFieldStyles: (labelPosition?: LabelPosition) => string;
+type LabelType = "inset" | "start" | "end" | "above" | "none";
+declare const LabelContext: React__default.Context<{
+    fieldId?: string;
+    label?: React__default.ReactNode;
+}>;
+type UseLabelParams = {
+    label?: ReactNode;
+    fieldId?: string;
+};
+declare const useLabel: ({ label, fieldId }: UseLabelParams) => {
+    label: React__default.ReactNode;
+    fieldId: string | undefined;
+};
+declare const LabelTypeContext: React__default.Context<LabelTypeContextValue>;
+declare const useLabelType: () => LabelType;
+type LabelTypeContextValue = {
+    type: LabelType;
+};
+type LabelWidthContextValue = {
+    width: number;
+};
+declare const LabelWidthContext: React__default.Context<LabelWidthContextValue>;
+declare const useLabelWidth: () => number;
+
+declare const labeledFieldStyles: (labelType?: LabelType) => string;
 declare const LabeledField: React__default.NamedExoticComponent<{
     children: React__default.ReactNode;
     label: React__default.ReactNode;
-    labelPosition?: LabelPosition;
+    labelType?: LabelType;
     labelStyle?: React__default.CSSProperties;
     /** Used for both the `id` of the field and the `htmlFor` of the label, unless `id` and `htmlFor` are explicitly provided */
     fieldId?: string;
@@ -1727,7 +1791,9 @@ declare function getPipelineResultLink(value: unknown): {
 
 type PopoverVariant = "normal" | "large";
 interface Props$7 extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content"]>, "onOpenAutoFocus" | "onCloseAutoFocus" | "onPointerDownOutside" | "onInteractOutside" | "onFocusOutside" | "side"> {
-    children: React__default.ReactNode;
+    children: React__default.ReactNode | ((props: {
+        close: () => void;
+    }) => React__default.ReactNode);
     trigger: React__default.ReactNode;
     variant?: PopoverVariant;
     closable?: boolean;
@@ -1803,10 +1869,14 @@ type SegmentedControlItemProps<T extends string> = {
 } & Pick<SelectableMenuItem<T>, "value" | "disabled" | "icon" | "role" | "title">;
 declare const SegmentedControl: <T extends string>(props: SegmentedControlProps<T>) => React__default.ReactElement | null;
 
-type SelectionToolbarContainerProps = {
+type PopperPrimitiveContentProps = ComponentProps<typeof PopperPrimitive.Content>;
+type SelectionToolbarContainerProps = Pick<PopperPrimitiveContentProps, "side" | "sideOffset" | "align"> & {
     rect: Rect;
     children: React__default.ReactNode;
     portalContainer?: HTMLElement | null;
+    containerClassName?: string;
+    containerStyle?: React__default.CSSProperties;
+    transitionDuration?: number;
 };
 declare const SelectionToolbarContainer: React__default.NamedExoticComponent<SelectionToolbarContainerProps>;
 
@@ -1922,6 +1992,16 @@ interface Props$2 {
 }
 declare const Switch: ({ id, value, onChange, colorScheme, disabled, onFocus, onBlur, style, className, }: Props$2) => React$1.JSX.Element;
 
+type TabsProps<T extends string = string> = {
+    value?: T;
+    onValueChange?: (value: T) => void;
+    items: MenuItem<T>[];
+    renderContent: ({ value }: {
+        value: T;
+    }) => React$1.ReactNode;
+} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+declare function Tabs<T extends string = string>({ value, onValueChange, items, renderContent, ...props }: TabsProps<T>): React$1.JSX.Element;
+
 declare const useAutoResize: (value: string | undefined) => React__default.MutableRefObject<HTMLTextAreaElement | null>;
 declare const TextArea: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
     onChangeText?: (value: string) => void;
@@ -1955,6 +2035,8 @@ interface Props$1 {
     children: React$1.ReactNode;
     content: React$1.ReactNode;
     sideOffset?: number;
+    side?: ComponentProps<typeof TooltipPrimitive.Content>["side"];
+    portalContainer?: HTMLElement | null;
 }
 declare const Tooltip: React$1.NamedExoticComponent<Props$1>;
 
@@ -2007,16 +2089,16 @@ declare const UserPointer: React__default.NamedExoticComponent<UserPointerProps>
 
 type SideType = "auto" | "panel" | "drawer";
 type DetectSizeType = "container" | "window";
-interface WorkspaceLayoutProps {
+interface WorkspaceLayoutProps<LeftTab extends string, RightTab extends string> extends Pick<LayoutProps<LeftTab, RightTab>, "leftTabItems" | "leftTabValue" | "rightTabItems" | "rightTabValue" | "onChangeLeftTab" | "onChangeRightTab"> {
     id?: string;
     className?: string;
     style?: React__default.CSSProperties;
     theme?: "light" | "dark";
     autoSavePrefix?: string;
-    left?: React__default.ReactNode;
+    left?: RenderPanel<LeftTab>;
     leftOptions?: SideOptions;
     children?: React__default.ReactNode;
-    right?: React__default.ReactNode;
+    right?: RenderPanel<RightTab>;
     rightOptions?: SideOptions;
     toolbar?: React__default.ReactNode;
     sideType?: SideType;
@@ -2042,8 +2124,9 @@ type SideOptions = {
     initialSize?: number | string;
     minSize?: number | string;
     maxSize?: number | string;
+    defaultCollapsed?: boolean;
 };
-declare const WorkspaceLayout: React__default.ForwardRefExoticComponent<WorkspaceLayoutProps & React__default.RefAttributes<WorkspaceLayoutRef>>;
+declare const WorkspaceLayout: <LeftTab extends string = string, RightTab extends string = string>(props: WorkspaceLayoutProps<LeftTab, RightTab> & React__default.RefAttributes<WorkspaceLayoutRef>) => React__default.ReactElement | null;
 
 type DesignSystemConfigurationContextValue = {
     platform: PlatformName;
@@ -2195,29 +2278,6 @@ declare const IndentContext: React__default.Context<{
 }>;
 declare const useIndent: () => number;
 
-declare const LabelContext: React__default.Context<{
-    fieldId?: string;
-    label?: React__default.ReactNode;
-}>;
-type UseLabelParams = {
-    label?: ReactNode;
-    fieldId?: string;
-};
-declare const useLabel: ({ label, fieldId }: UseLabelParams) => {
-    label: React__default.ReactNode;
-    fieldId: string | undefined;
-};
-declare const LabelPositionContext: React__default.Context<LabelPositionContextValue>;
-declare const useLabelPosition: () => LabelPosition;
-type LabelPositionContextValue = {
-    position: LabelPosition;
-};
-type LabelWidthContextValue = {
-    width: number;
-};
-declare const LabelWidthContext: React__default.Context<LabelWidthContextValue>;
-declare const useLabelWidth: () => number;
-
 declare function usePlatform(): _noya_app_noya_keymap.PlatformName;
 /**
  * Either ctrl or meta, depending on the platform
@@ -2314,6 +2374,8 @@ declare function getNextIndex<T>({ items, currentIndex, direction, isDisabled, }
 }): number;
 declare function useComboboxState<T extends string>(state: ComboboxState<T>): ComboboxStateSnapshot<T>;
 
+declare const editableBlockStyles: (viewType?: "editable" | "readOnly" | "preview") => string;
+
 type MoveOptions = {
     paths: number[][];
     to: number[];
@@ -2429,20 +2491,36 @@ declare const ToolbarMenuDropdown: <T extends string>(props: {
     item: SubMenuItem<T>;
     onSelectMenuItem?: (value: T) => void;
 }) => React__default.ReactElement | null;
+declare const ToolbarShortcut: ({ shortcut, label, }: {
+    shortcut: string;
+    label?: ReactNode;
+}) => React__default.JSX.Element;
+declare const ToolbarMenuPopover: (props: {
+    item: PopoverMenuItem;
+    portalContainer?: HTMLElement | null;
+}) => React__default.ReactElement | null;
 declare const ToolbarMenuButton: <T extends string>(props: {
     item: SelectableMenuItem<T>;
     onSelectMenuItem?: (value: T) => void;
     as?: ComponentProps<typeof Button>["as"];
+    activeValue?: T;
+    tooltipSide?: ComponentProps<typeof Tooltip>["side"];
 }) => React__default.ReactElement | null;
 declare const ToolbarMenuItem: <T extends string>(props: {
     item: MenuItem<T>;
     onSelectMenuItem?: (value: T) => void;
     buttonAs?: ComponentProps<typeof Button>["as"];
+    activeValue?: T;
+    tooltipSide?: ComponentProps<typeof Tooltip>["side"];
+    portalContainer?: HTMLElement | null;
 }) => React__default.ReactElement | null;
 declare const ToolbarMenu: <T extends string>(props: {
     items: MenuItem<T>[];
     onSelectMenuItem?: (value: T) => void;
     buttonAs?: ComponentProps<typeof Button>["as"];
+    activeValue?: T;
+    tooltipSide?: ComponentProps<typeof Tooltip>["side"];
+    portalContainer?: HTMLElement | null;
 }) => React__default.ReactElement | null;
 interface ToolbarProps<T extends string = string> {
     children?: React__default.ReactNode;
@@ -2455,4 +2533,4 @@ interface ToolbarProps<T extends string = string> {
 }
 declare function Toolbar<T extends string = string>({ children, logo, leftMenuItems, rightMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts, }: ToolbarProps<T>): React__default.JSX.Element;
 
-export { AIAssistantInput, AIAssistantLayout, AIAssistantLoadingIndicator, type AcceptsDrop, type AcceptsDropOptions, type AcceptsFromList, ActionMenu, ActivityIndicator, AnimatePresence, type AnimatePresenceProps, Avatar, type AvatarProps, AvatarStack, Banner, type BannerProps, type BaseComboboxProps, BaseToolbar, type BaseToolbarProps, Body, BreadcrumbSlash, BreadcrumbText, Button, type ButtonRootProps, CHECKBOX_INDENT_WIDTH, CHECKBOX_RIGHT_INSET, CHECKBOX_WIDTH, CONTENT_AREA_ID, 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 DragIndicatorStyleProps, type DragItem, type DragState, DraggableMenuButton, Drawer, type DrawerProps, type DropValidator, DropdownMenu, type DropdownRootProps, EDITOR_PANEL_GROUP_ID, type EditableRowProps, EditableText, type EditableTextRef, type ExtractMenuItemType, Fade, type FadeDirection, type FadeProps, FileExplorerCollection, FileExplorerDetail, FileExplorerEmptyState, FileExplorerLayout, FileExplorerUploadButton, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, 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, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, IndentContext, InputField, type InputFieldInputProps, type InputFieldProps, type InputFieldSize, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, LEFT_SIDEBAR_ID, Label, LabelContext, type LabelPosition, LabelPositionContext, type LabelPositionContextValue, type LabelProps, LabelWidthContext, type LabelWidthContextValue, LabeledElementView, LabeledField, type LayoutProps, List, type ListRowMarginType, type ListRowPosition, ListView, type ListViewItemInfo, type ListViewRootProps, type ListViewRowProps, Logo, type MatchRange, MediaThumbnail, type MenuComponents, type MenuConfig, type MenuItem, type MenuItemIcon, type MenuItemProps, type MenuItemRole, type MenuProps, MenuViewport, Message, type MessageProps, type MoveDragItemHandler, type MoveDragItemParameters, type MoveTreeItemOptions, type NonSelectableMenuItem, type OpenPortalControlsContextValue, type OpenPortalsContextValue, OpenPortalsProvider, type OptionModeOnlyProps, type OptionModeProps, type Optional, type PanelLayoutState, PatternPreviewBackground, type PercentageSidebarOptions, PipelineResultLayout, PipelineResultLink, Popover, type PortalScopeContextValue, PortalScopeProvider, Progress, RIGHT_SIDEBAR_ID, type RelativeDropPosition, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, type ScoredMenuItem, ScrollArea, SearchCompletionMenu, Section$1 as Section, SectionHeader$1 as SectionHeader, type SectionHeaderMenuItem, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectMenu, type SelectableMenuItem, SelectionToolbarContainer, type SeparatorItem, type SetNumberMode, SharedDragProvider, type SideOptions, type SideType, type SidebarRef, type SketchPattern, Slider, Small, Sortable, SortableItemContext, type SortableItemContextProps, type SortableProps, Spacer, type StringModeOnlyProps, type StringModeProps, type SubMenuItem, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, TextArea, TextAreaRow, type TextProps, type Theme, type ThemeColor, Toast, ToastProvider, type TokenValue, Toolbar, ToolbarMenu, ToolbarMenuButton, ToolbarMenuDropdown, ToolbarMenuItem, type ToolbarProps, Tooltip, TreeView, type UseThemeReturnType, UserAvatar, UserPointer, type UserPointerProps, type ValidateDropIndicatorParams, WorkspaceLayout, type WorkspaceLayoutProps, type WorkspaceLayoutRef, acceptsDrop, colorForStringValues, colorFromString, colorSwatchSizeMap, createDragItemKey, createSectionedMenu, createSharedDrag, cssVarNames, cssVars, cx, defaultAcceptsDrop, dragItemKeySeparator, filterWithGroupedSections, fuzzyFilter, fuzzyScore, fuzzyTokenize, getClosestPortalScope, getFieldSpacing, getGradientBackground, getGridSize, getItemFirstCollisionDetection, getKeyboardShortcutsForMenuItems, getMenuItemKey, getNewValue, getNextIndex, getPipelineResultLink, getThumbnailColors, isMenuItemSectionHeader, isNonSelectableMenuItem, isSelectableMenuItem, isSelectableMenuItemWithScore, labeledFieldStyles, mediaQuery, mergeConflictingClassNames, moveTreeItem, normalizeListTargetIndex, parseDragItemKey, popoverStyle, portalScopeDataSetName, portalScopePropName, portalScopeProps, renderIcon, rgbaToSketchColor, separator, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, styles, textStyles, updateSelection, useAutoResize, useComboboxState, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDialogContainsElement, useDialogContext, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHasOpenPortals, useHover, useImageData, useIndent, useInputFieldContext, useLabel, useLabelPosition, useLabelWidth, useOpenConfirmationDialog, useOpenDialog, useOpenInputDialog, useOpenPortalsControls, usePlatform, usePlatformModKey, usePortalScopeId, usePreservePanelSize, useTheme, validateDropIndicator, withDragProvider, withSeparatorElements };
+export { AIAssistantInput, AIAssistantLayout, AIAssistantLoadingIndicator, type AcceptsDrop, type AcceptsDropOptions, type AcceptsFromList, ActionMenu, ActivityIndicator, AnimatePresence, type AnimatePresenceProps, Avatar, type AvatarProps, AvatarStack, Banner, type BannerProps, type BaseComboboxProps, BaseToolbar, type BaseToolbarProps, Body, BreadcrumbSlash, BreadcrumbText, Button, type ButtonProps, CHECKBOX_INDENT_WIDTH, CHECKBOX_RIGHT_INSET, CHECKBOX_WIDTH, CONTENT_AREA_ID, 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 DragIndicatorStyleProps, type DragItem, type DragState, DraggableMenuButton, Drawer, type DrawerProps, type DropValidator, DropdownMenu, type DropdownRootProps, EDITOR_PANEL_GROUP_ID, type EditableRowProps, EditableText, type EditableTextRef, type ExtractMenuItemType, Fade, type FadeDirection, type FadeProps, FileExplorerCollection, FileExplorerDetail, FileExplorerEmptyState, FileExplorerLayout, FileExplorerUploadButton, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, 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, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, IndentContext, InputField, type InputFieldInputProps, type InputFieldProps, type InputFieldSize, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, LEFT_SIDEBAR_ID, Label, LabelContext, type LabelProps, type LabelType, LabelTypeContext, type LabelTypeContextValue, LabelWidthContext, type LabelWidthContextValue, LabeledElementView, LabeledField, type LayoutProps, List, type ListRowMarginType, type ListRowPosition, ListView, type ListViewItemInfo, type ListViewRootProps, type ListViewRowProps, Logo, type MatchRange, MediaThumbnail, type MenuComponents, type MenuConfig, type MenuItem, type MenuItemIcon, type MenuItemProps, type MenuItemRole, type MenuProps, MenuViewport, Message, type MessageProps, type MoveDragItemHandler, type MoveDragItemParameters, type MoveTreeItemOptions, type NonSelectableMenuItem, type OpenPortalControlsContextValue, type OpenPortalsContextValue, OpenPortalsProvider, type OptionModeOnlyProps, type OptionModeProps, type Optional, type PanelLayoutState, PatternPreviewBackground, type PercentageSidebarOptions, PipelineResultLayout, PipelineResultLink, Popover, type PopoverMenuItem, type PortalScopeContextValue, PortalScopeProvider, Progress, RIGHT_SIDEBAR_ID, type RelativeDropPosition, type RenderPanel, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, type ScoredMenuItem, ScrollArea, SearchCompletionMenu, Section$1 as Section, SectionHeader$1 as SectionHeader, type SectionHeaderMenuItem, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectMenu, type SelectableMenuItem, SelectionToolbarContainer, type SeparatorItem, type SetNumberMode, SharedDragProvider, type SideOptions, type SideType, type SidebarRef, type SketchPattern, Slider, Small, Sortable, SortableItemContext, type SortableItemContextProps, type SortableProps, Spacer, 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, ToolbarMenu, ToolbarMenuButton, ToolbarMenuDropdown, ToolbarMenuItem, ToolbarMenuPopover, type ToolbarProps, ToolbarShortcut, Tooltip, TreeView, type UseThemeReturnType, UserAvatar, UserPointer, type UserPointerProps, type ValidateDropIndicatorParams, WorkspaceLayout, type WorkspaceLayoutProps, type WorkspaceLayoutRef, acceptsDrop, colorForStringValues, colorFromString, colorSwatchSizeMap, createDragItemKey, createSectionedMenu, createSharedDrag, cssVarNames, cssVars, cx, defaultAcceptsDrop, dragItemKeySeparator, editableBlockStyles, filterWithGroupedSections, fuzzyFilter, fuzzyScore, fuzzyTokenize, getClosestPortalScope, getFieldSpacing, getGradientBackground, getGridSize, getItemFirstCollisionDetection, getKeyboardShortcutsForMenuItems, getMenuItemKey, getNewValue, getNextIndex, getPipelineResultLink, getThumbnailColors, isMenuItemSectionHeader, isNonSelectableMenuItem, isPopoverMenuItem, isSelectableMenuItem, isSelectableMenuItemWithScore, labeledFieldStyles, mediaQuery, mergeConflictingClassNames, moveTreeItem, normalizeListTargetIndex, parseDragItemKey, popoverStyle, portalScopeDataSetName, portalScopePropName, portalScopeProps, renderIcon, rgbaToSketchColor, separator, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, styles, textStyles, updateSelection, useAutoResize, useComboboxState, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDialogContainsElement, useDialogContext, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHasOpenPortals, useHover, useImageData, useIndent, useInputFieldContext, useLabel, useLabelType, useLabelWidth, useOpenConfirmationDialog, useOpenDialog, useOpenInputDialog, useOpenPortalsControls, usePlatform, usePlatformModKey, usePortalScopeId, usePreservePanelSize, useTheme, validateDropIndicator, withDragProvider, withSeparatorElements };