@noya-app/noya-designsystem 0.1.43 → 0.1.45

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { CSSProperties, ReactNode, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, HTMLAttributes, ComponentProps, SyntheticEvent, ReactHTML } from 'react';
+import React__default, { CSSProperties, ReactNode, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, LabelHTMLAttributes, ForwardedRef, HTMLAttributes, ComponentProps, SyntheticEvent, ReactHTML } from 'react';
 import { IItemScore } from 'vscode-fuzzy-scorer';
 import { Property } from 'csstype';
 import * as Icons from '@noya-app/noya-icons';
@@ -7,24 +7,27 @@ export { Icons };
 import * as _noya_app_noya_geometry from '@noya-app/noya-geometry';
 import { Size } from '@noya-app/noya-geometry';
 import { useSortable } from '@dnd-kit/sortable';
+import * as _noya_app_noya_designsystem from '@noya-app/noya-designsystem';
+import { ComboboxOption as ComboboxOption$1 } from '@noya-app/noya-designsystem';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Sketch } from '@noya-app/noya-file-format';
 import * as _noya_app_noya_keymap from '@noya-app/noya-keymap';
 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 { SelectProps } from '@radix-ui/react-select';
 import { ImperativePanelGroupHandle } from 'react-resizable-panels';
 import { RgbaColor } from '@noya-app/noya-colorpicker';
 
-interface Props$e {
+interface Props$d {
     size?: number;
     opacity?: number;
     color?: string;
     trackColor?: string;
 }
-declare const ActivityIndicator: React.NamedExoticComponent<Props$e>;
+declare const ActivityIndicator: React.NamedExoticComponent<Props$d>;
 
 type AnimatePresenceProps = {
     children: React__default.ReactNode;
@@ -49,8 +52,9 @@ type AnimatePresenceProps = {
      * "crossfade" - crossfade between the previous and next animation
      */
     mode?: "wait" | "crossfade";
+    className?: string;
 };
-declare const AnimatePresence: ({ children, duration, animationStyles, skipInitialAnimation, mode, }: AnimatePresenceProps) => React__default.JSX.Element;
+declare const AnimatePresence: ({ children, duration, animationStyles, skipInitialAnimation, mode, className, }: AnimatePresenceProps) => React__default.JSX.Element;
 
 type AvatarProps = {
     image?: string;
@@ -164,7 +168,10 @@ type ComboboxOption = {
     id: string;
     name: string;
     icon?: ReactNode;
+    shortcut?: string;
+    disabled?: boolean;
     alwaysInclude?: boolean;
+    checked?: boolean;
 };
 type ComboboxSectionHeader = {
     type: "sectionHeader";
@@ -207,13 +214,16 @@ declare class ComboboxState {
     setSelectedIndex(index: number): void;
     submitArbitraryFilter(filter: string): void;
 }
+declare function getNextIndex<T>(items: T[], currentIndex: number, direction: "next" | "previous", isDisabled: (item: T) => boolean): number;
 declare function useComboboxState(state: ComboboxState): ComboboxStateSnapshot;
 
 type IconName = keyof typeof Icons;
 
 declare function renderIcon(iconName: Exclude<React.ReactNode, string> | IconName): React.ReactNode;
 
-declare const SEPARATOR_ITEM = "separator";
+type SeparatorItem = {
+    type: "separator";
+};
 type MenuItemRole = "undo" | "redo" | "cut" | "copy" | "paste" | "pasteAndMatchStyle" | "delete" | "selectAll" | "reload" | "forceReload" | "toggleDevTools" | "resetZoom" | "zoomIn" | "zoomOut" | "toggleSpellChecker" | "togglefullscreen" | "window" | "minimize" | "close" | "help" | "about" | "services" | "hide" | "hideOthers" | "unhide" | "quit" | "showSubstitutions" | "toggleSmartQuotes" | "toggleSmartDashes" | "toggleTextReplacement" | "startSpeaking" | "stopSpeaking" | "zoom" | "front" | "appMenu" | "fileMenu" | "editMenu" | "viewMenu" | "shareMenu" | "recentDocuments" | "toggleTabBar" | "selectNextTab" | "selectPreviousTab" | "mergeAllWindows" | "clearRecentDocuments" | "moveTabToNewWindow" | "windowMenu";
 type RegularMenuItem<T extends string> = {
     value?: T;
@@ -224,15 +234,38 @@ type RegularMenuItem<T extends string> = {
     icon?: Exclude<ReactNode, string> | IconName;
     items?: MenuItem<T>[];
     role?: MenuItemRole;
+    type?: undefined;
+    alwaysInclude?: boolean;
 };
-type MenuItem<T extends string> = typeof SEPARATOR_ITEM | RegularMenuItem<T>;
+type SectionHeaderMenuItem = {
+    type: "sectionHeader";
+    id: string;
+    title: string;
+    maxVisibleItems?: number;
+    variant?: "normal" | "label";
+};
+type MenuItem<T extends string> = SeparatorItem | RegularMenuItem<T> | SectionHeaderMenuItem;
 type ExtractMenuItemType<T> = T extends RegularMenuItem<infer U> ? U : never;
+declare const CHECKBOX_WIDTH = 16;
+declare const CHECKBOX_RIGHT_INSET = 8;
+declare const styles: {
+    separatorStyle: string;
+    itemStyle: ({ disabled }: {
+        disabled?: boolean;
+    }) => string;
+    itemIndicatorStyle: string;
+    contentStyle: string;
+};
 declare function getKeyboardShortcutsForMenuItems<T extends string>(menuItems: MenuItem<T>[], onSelect: (type: T) => void): Record<string, () => void>;
 declare const KeyboardShortcut: React__default.NamedExoticComponent<{
     shortcut: string;
 }>;
+declare const SectionHeader$1: React__default.NamedExoticComponent<Omit<SectionHeaderMenuItem, "type" | "maxVisibleItems"> & {
+    isFirst?: boolean;
+    indented?: boolean;
+}>;
 
-type Props$d = {
+type Props$c = {
     id?: string;
     style?: any;
     className?: string;
@@ -250,29 +283,74 @@ type Props$d = {
     onFocusChange?: (isFocused: boolean) => void;
     onBlur?: FocusEventHandler;
 } & Pick<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "autoCapitalize" | "autoCorrect" | "spellCheck" | "autoFocus">;
-type ReadOnlyProps = Props$d & {
+type ReadOnlyProps = Props$c & {
     readOnly: true;
 };
-type ControlledProps = Props$d & {
+type ControlledProps = Props$c & {
     onChange: (value: string) => void;
     onFocus?: FocusEventHandler;
     onBlur?: FocusEventHandler;
 };
-type SubmittableProps = Props$d & {
+type SubmittableProps = Props$c & {
     onSubmit: (value: string) => void;
     allowSubmittingWithSameValue?: boolean;
     submitAutomaticallyAfterDelay?: number;
 };
 type TextInputProps = ReadOnlyProps | ControlledProps | SubmittableProps;
 
-type LabelPosition = "start" | "end";
+type LabelPosition = "inset" | "start" | "end" | "above";
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    /** @default start */
+    position?: Exclude<LabelPosition, "inset">;
+}
+type InsetLabelProps = {
+    /** @default medium */
+    size?: InputFieldSize;
+    /** when used with an InputField.Root and label position is inset, it will add padding to the right of the label to account for the button */
+    buttonSize?: number;
+} & LabelHTMLAttributes<HTMLLabelElement>;
+declare const insetLabelTextStyles = "font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%] truncate pointer-events-none text-right";
+declare const insetLabelStyles = "flex items-center absolute top-0 bottom-0 z-label";
+declare const InsetLabel: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
+    /** @default medium */
+    size?: InputFieldSize;
+    /** when used with an InputField.Root and label position is inset, it will add padding to the right of the label to account for the button */
+    buttonSize?: number;
+} & React__default.LabelHTMLAttributes<HTMLLabelElement> & React__default.RefAttributes<HTMLLabelElement>>>;
+declare const Label: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<LabelProps & React__default.RefAttributes<HTMLLabelElement>>>;
+
 type InputFieldSize = "small" | "medium" | "large";
+type InputFieldContextValue = {
+    labelSize?: number;
+    buttonSize?: number;
+    /** @default medium */
+    size: InputFieldSize;
+    isFocused: boolean;
+    onFocusChange: (isFocused: boolean) => void;
+    inputRef?: ForwardedRef<HTMLInputElement>;
+    setInputRef?: (ref: ForwardedRef<HTMLInputElement>) => void;
+    setLabelWidth?: (width: number) => void;
+    setButtonWidth?: (width: number) => void;
+    id?: string;
+    label?: ReactNode;
+    labelPosition?: LabelPosition;
+};
+declare const useInputFieldContext: () => InputFieldContextValue;
+declare const getFieldSpacing: ({ buttonSize, labelSize, variant, }: {
+    buttonSize?: number;
+    labelSize?: number;
+    variant?: InputFieldVariant;
+}) => {
+    paddingLeft: string;
+    paddingRight: string;
+};
 interface InputFieldDropdownProps<T extends string> {
     id?: string;
     items: MenuItem<T>[];
     onSelect: (value: T) => void;
     children?: ReactNode;
 }
+type InputFieldVariant = "normal" | "bare";
 type InputFieldInputProps = TextInputProps & {
     textAlign?: Property.TextAlign;
     variant?: "bare";
@@ -284,6 +362,7 @@ type InputFieldNumberInputProps = Omit<TextInputProps, "value" | "onChange" | "o
     onFocus?: FocusEventHandler;
     onBlur?: FocusEventHandler;
     readOnly?: boolean;
+    className?: string;
 } & ({
     onChange: (value: number) => void;
 } | {
@@ -294,8 +373,6 @@ interface InputFieldRootProps {
     id?: string;
     children?: ReactNode;
     width?: number;
-    /** @default end */
-    labelPosition?: LabelPosition;
     labelSize?: number;
     /** @default medium */
     size?: InputFieldSize;
@@ -311,27 +388,28 @@ interface InputFieldRootProps {
     style?: React__default.CSSProperties;
     className?: string;
 }
-declare function InputFieldRoot({ id, children, width, labelPosition, sideOffset, labelSize, size, renderPopoverContent, onFocusChange, style, className, }: InputFieldRootProps): React__default.JSX.Element;
-declare namespace InputField {
-    const Root: React__default.MemoExoticComponent<typeof InputFieldRoot>;
-    const Input: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<InputFieldInputProps & React__default.RefAttributes<HTMLInputElement>>>;
-    const Typeahead: React__default.MemoExoticComponent<(props: {
+declare function InputFieldRoot({ id: idProp, children, width, sideOffset, labelSize, size, renderPopoverContent, onFocusChange, style, className, }: InputFieldRootProps): React__default.JSX.Element;
+type InputFieldProps = InputFieldRootProps & InputFieldInputProps;
+declare const InputField: React__default.ForwardRefExoticComponent<InputFieldProps & React__default.RefAttributes<HTMLInputElement>> & {
+    readonly Root: React__default.MemoExoticComponent<typeof InputFieldRoot>;
+    readonly Input: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<InputFieldInputProps & React__default.RefAttributes<HTMLInputElement>>>;
+    readonly Typeahead: React__default.MemoExoticComponent<(props: {
         prefix: string;
         value: string;
         isFocused: boolean;
     }) => React__default.JSX.Element>;
-    const NumberInput: React__default.MemoExoticComponent<typeof InputFieldNumberInput>;
-    const DropdownMenu: <T extends string>(props: InputFieldDropdownProps<T>) => React__default.ReactElement | null;
-    const Button: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<React__default.ButtonHTMLAttributes<HTMLButtonElement> & {
+    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 & {
         buttonClassName?: string;
         variant?: "floating" | "normal";
     } & React__default.RefAttributes<HTMLButtonElement>>>;
-    const Label: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<React__default.LabelHTMLAttributes<HTMLLabelElement> & React__default.RefAttributes<HTMLLabelElement>>>;
-    const PrimitiveElement: ({ readOnly, disabled, className, style, ...props }: {
+    readonly Label: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<React__default.LabelHTMLAttributes<HTMLLabelElement> & React__default.RefAttributes<HTMLLabelElement>>>;
+    readonly PrimitiveElement: ({ readOnly, disabled, className, style, ...props }: {
         readOnly?: boolean;
         disabled?: boolean;
     } & React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => React__default.JSX.Element;
-}
+};
 
 type BaseComboboxProps = {
     id?: string;
@@ -352,7 +430,7 @@ type BaseComboboxProps = {
 };
 type StringModeOnlyProps = {
     mode: "string";
-    initialValue?: string;
+    value?: string;
     onChange?: (value: string) => void;
     onSelectItem?: (value: string) => void;
     onBlur?: (didSubmit: boolean, value: string) => void;
@@ -362,7 +440,7 @@ type StringModeOnlyProps = {
 type StringModeProps = BaseComboboxProps & StringModeOnlyProps;
 type OptionModeOnlyProps = {
     mode?: "option";
-    initialValue?: ComboboxOption;
+    value?: ComboboxOption;
     onChange?: (value: ComboboxOption) => void;
     onSelectItem?: (value: ComboboxOption) => void;
     onBlur?: (didSubmit: boolean, value: ComboboxOption) => void;
@@ -426,8 +504,9 @@ interface EditableRowProps {
     onSubmitEditing: (value: string) => void;
     autoFocus: boolean;
     placeholder?: string;
+    className?: string;
 }
-declare function ListViewEditableRowTitle({ value, onSubmitEditing, autoFocus, placeholder, }: EditableRowProps): React__default.JSX.Element;
+declare function ListViewEditableRowTitle({ value, onSubmitEditing, autoFocus, placeholder, className, }: EditableRowProps): React__default.JSX.Element;
 interface ListViewClickInfo {
     shiftKey: boolean;
     altKey: boolean;
@@ -437,6 +516,7 @@ interface ListViewClickInfo {
 interface ListViewRowProps<MenuItemType extends string = string> {
     id?: string;
     tabIndex?: number;
+    role?: string;
     selected?: boolean;
     /** @default 0 */
     depth?: number;
@@ -484,12 +564,16 @@ type RenderProps<T> = {
     sortable?: boolean;
     virtualized?: Size;
 };
-type ListViewVariant = "normal" | "padded" | "bare";
+type ListViewVariant = "normal" | "bare";
 type ListViewSectionHeaderVariant = "normal" | "label";
 type ListViewRootProps = {
     id?: string;
     className?: string;
     style?: CSSProperties;
+    role?: string;
+    "aria-labelledby"?: string;
+    "aria-orientation"?: "vertical" | "horizontal";
+    "aria-multiselectable"?: boolean;
     onPress?: () => void;
     scrollable?: boolean;
     expandable?: boolean;
@@ -502,6 +586,11 @@ type ListViewRootProps = {
     divider?: boolean;
     gap?: number;
     colorScheme?: ListColorScheme;
+    containerRef?: React__default.RefObject<HTMLDivElement>;
+    onDragOver?: React__default.DragEventHandler<HTMLDivElement>;
+    onDragEnter?: React__default.DragEventHandler<HTMLDivElement>;
+    onDragLeave?: React__default.DragEventHandler<HTMLDivElement>;
+    onDrop?: React__default.DragEventHandler<HTMLDivElement>;
 };
 declare namespace ListView {
     const RowTitle: React__default.MemoExoticComponent<({ className, children, ...props }: {
@@ -538,6 +627,28 @@ interface ComboboxMenuProps {
 }
 declare const ComboboxMenu: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<ComboboxMenuProps & React__default.RefAttributes<IVirtualizedList>>>;
 
+interface ISearchCompletionMenu {
+    focus: () => void;
+}
+declare const SearchCompletionMenu: React__default.ForwardRefExoticComponent<{
+    onSelect: (item: ComboboxOption$1) => void;
+    onHover?: (item: ComboboxOption$1) => void;
+    onClose: () => void;
+    items: ComboboxOption$1[];
+    width?: number;
+} & React__default.RefAttributes<ISearchCompletionMenu>>;
+
+declare const CommandPalette: React__default.NamedExoticComponent<{
+    showCommandPalette: boolean;
+    setShowCommandPalette: (value: boolean) => void;
+} & Pick<{
+    onSelect: (item: _noya_app_noya_designsystem.ComboboxOption) => void;
+    onHover?: (item: _noya_app_noya_designsystem.ComboboxOption) => void;
+    onClose: () => void;
+    items: _noya_app_noya_designsystem.ComboboxOption[];
+    width?: number;
+} & React__default.RefAttributes<ISearchCompletionMenu>, "onSelect" | "items" | "onHover">>;
+
 interface MenuItemProps<T extends string> {
     value?: T;
     children: ReactNode;
@@ -553,7 +664,6 @@ interface MenuProps<T extends string> {
     children: ReactNode;
     items: MenuItem<T>[];
     onSelect: (value: T) => void;
-    isNested?: boolean;
     shouldBindKeyboardShortcuts?: boolean;
     onOpenChange?: (open: boolean) => void;
 }
@@ -563,7 +673,7 @@ declare const StyledContent: React__default.ForwardRefExoticComponent<Omit<Dialo
 interface IDialog {
     containsElement: (element: HTMLElement) => boolean;
 }
-interface Props$c {
+interface Props$b {
     title?: ReactNode;
     description?: ReactNode;
     children?: ReactNode;
@@ -575,8 +685,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$b & React__default.RefAttributes<IDialog>>;
+declare const FullscreenDialog: React__default.ForwardRefExoticComponent<Props$b & React__default.RefAttributes<IDialog>>;
 
 type DividerVariant = "normal" | "subtle" | "strong";
 interface DividerProps {
@@ -597,12 +707,35 @@ declare const DraggableMenuButton: <T extends string>(props: {
     isVisible?: boolean;
 }) => React__default.ReactElement | null;
 
+type DropdownRootProps<T extends string> = MenuProps<T> & {
+    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> & {
     open?: boolean;
     onCloseAutoFocus?: React__default.EventHandler<SyntheticEvent<unknown>>;
     emptyState?: React__default.ReactNode;
+    contentStyle?: React__default.CSSProperties;
 } & Pick<RadixDropdownMenu.DropdownMenuContentProps & React__default.RefAttributes<HTMLDivElement>, "align" | "side" | "sideOffset" | "alignOffset" | "collisionPadding"> & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
 
+type FadeDirection = "left" | "right" | "top" | "bottom";
+type FadeProps = {
+    children: ReactNode;
+    direction?: FadeDirection;
+    width?: number;
+    height?: number;
+    className?: string;
+    zIndex?: number;
+    /**
+     * @default "front"
+     * If "back", the fade will be positioned behind the children
+     */
+    position?: "front" | "back";
+};
+declare const Fade: ({ children, direction, width, height, className, zIndex, position, }: FadeProps) => React__default.JSX.Element;
+
 declare const SUPPORTED_IMAGE_UPLOAD_TYPES: ("image/png" | "image/jpeg" | "image/webp" | "image/svg+xml" | "application/pdf")[];
 declare const SUPPORTED_CANVAS_UPLOAD_TYPES: ("" | "image/png" | "image/jpeg" | "image/webp" | "image/svg+xml" | "application/pdf")[];
 type SupportedImageUploadType = (typeof SUPPORTED_IMAGE_UPLOAD_TYPES)[number];
@@ -614,21 +747,21 @@ type SketchPattern = {
     patternTileScale: number;
 };
 
-interface Props$b {
+interface Props$a {
     id?: string;
     value?: Sketch.Color | Sketch.Gradient | SketchPattern;
 }
-declare const FillInputField: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Props$b & React__default.RefAttributes<HTMLButtonElement>>>;
+declare const FillInputField: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Props$a & React__default.RefAttributes<HTMLButtonElement>>>;
 
 declare const PatternPreviewBackground: React.NamedExoticComponent<{
     fillType: Sketch.PatternFillType;
     tileScale: number;
     imageRef: string;
 }>;
-interface Props$a {
+interface Props$9 {
     value?: Sketch.Color | Sketch.Gradient | SketchPattern;
 }
-declare const FillPreviewBackground: React.NamedExoticComponent<Props$a>;
+declare const FillPreviewBackground: React.NamedExoticComponent<Props$9>;
 
 interface FloatingWindowProps {
     title?: string;
@@ -649,7 +782,7 @@ interface FloatingWindowProps {
 }
 declare const FloatingWindow: React__default.FC<FloatingWindowProps>;
 
-interface Props$9 {
+interface Props$8 {
     value: Sketch.GradientStop[];
     selectedStop: number;
     onChangeColor: (color: Sketch.Color) => void;
@@ -658,7 +791,7 @@ interface Props$9 {
     onDelete: () => void;
     onSelectStop: (index: number) => void;
 }
-declare const GradientPicker: React.NamedExoticComponent<Props$9>;
+declare const GradientPicker: React.NamedExoticComponent<Props$8>;
 
 type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
 interface ItemProps<MenuItemType extends string = string> {
@@ -722,9 +855,47 @@ declare const InspectorContainer: React__default.MemoExoticComponent<React__defa
     style?: React__default.CSSProperties;
 } & React__default.RefAttributes<HTMLDivElement>>>;
 
-interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
-}
-declare const Label: React.MemoExoticComponent<React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>>;
+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;
+}>>;
+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 RadixDropdownMenu.Sub | typeof RadixContextMenu.Sub;
+    SubTrigger?: typeof RadixDropdownMenu.SubTrigger | typeof RadixContextMenu.SubTrigger;
+    SubContent?: typeof RadixDropdownMenu.SubContent | typeof RadixContextMenu.SubContent;
+    Portal?: typeof RadixDropdownMenu.Portal | typeof RadixContextMenu.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 ContainerProps {
     children: React.ReactNode;
@@ -735,6 +906,19 @@ interface ContainerProps {
 }
 declare const LabeledElementView: React.NamedExoticComponent<ContainerProps>;
 
+declare const labeledFieldStyles: (labelPosition?: LabelPosition) => string;
+declare const LabeledField: React__default.NamedExoticComponent<{
+    children: React__default.ReactNode;
+    label: React__default.ReactNode;
+    labelPosition?: LabelPosition;
+    /** Used for both the `id` of the field and the `htmlFor` of the label, unless `id` and `htmlFor` are explicitly provided */
+    fieldId?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+    /** @default 100 */
+    minWidth?: number;
+}>;
+
 type MessageProps = {
     role: "user" | "assistant" | "system" | "data";
     children?: React__default.ReactNode;
@@ -745,7 +929,7 @@ type MessageProps = {
 declare const Message: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<MessageProps & React__default.RefAttributes<HTMLDivElement>>>;
 
 type PopoverVariant = "normal" | "large";
-interface Props$8 extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content"]>, "onOpenAutoFocus" | "onCloseAutoFocus" | "onPointerDownOutside" | "onInteractOutside" | "onFocusOutside" | "side"> {
+interface Props$7 extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content"]>, "onOpenAutoFocus" | "onCloseAutoFocus" | "onPointerDownOutside" | "onInteractOutside" | "onFocusOutside" | "side"> {
     children: React__default.ReactNode;
     trigger: React__default.ReactNode;
     variant?: PopoverVariant;
@@ -755,8 +939,9 @@ interface Props$8 extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content
     sideOffset?: number;
     onClickClose?: () => void;
     showArrow?: boolean;
+    className?: string;
 }
-declare function Popover({ children, trigger, variant, closable, open, side, sideOffset, showArrow, onOpenChange, onOpenAutoFocus, onCloseAutoFocus, onPointerDownOutside, onInteractOutside, onFocusOutside, onClickClose, }: Props$8): React__default.JSX.Element;
+declare function Popover({ children, trigger, variant, closable, open, side, sideOffset, showArrow, onOpenChange, onOpenAutoFocus, onCloseAutoFocus, onPointerDownOutside, onInteractOutside, onFocusOutside, onClickClose, className, }: Props$7): React__default.JSX.Element;
 
 type ProgressVariant = "normal" | "warning" | "primary" | "secondary";
 declare function Progress({ value, variant, className, }: {
@@ -765,10 +950,10 @@ declare function Progress({ value, variant, className, }: {
     className?: string;
 }): React.JSX.Element;
 
-interface Props$7 {
+interface Props$6 {
     children?: React.ReactNode | ((scrollElementRef: HTMLDivElement) => React.ReactNode);
 }
-declare const ScrollArea: React.NamedExoticComponent<Props$7>;
+declare const ScrollArea: React.NamedExoticComponent<Props$6>;
 
 type SegmentedControlColorScheme = "primary" | "secondary";
 interface SegmentedControlProps<T extends string> {
@@ -789,13 +974,13 @@ type SegmentedControlItemProps<T extends string> = {
     style?: React__default.CSSProperties;
     tooltip?: ReactNode;
 } & Pick<RegularMenuItem<T>, "value" | "disabled" | "icon" | "role">;
-declare const SegmentedControl: React__default.MemoExoticComponent<(<T extends string>({ id, value, onValueChange, colorScheme, allowEmpty, items, separator, className, style, }: SegmentedControlProps<T>) => React__default.JSX.Element)>;
+declare const SegmentedControl: React__default.MemoExoticComponent<(<T extends string>({ id: idProp, value, onValueChange, colorScheme, allowEmpty, items, separator, className, style, }: SegmentedControlProps<T>) => React__default.JSX.Element)>;
 
-type Props$6<T extends string> = {
+type Props$5<T extends string> = {
     id?: string;
     style?: React__default.CSSProperties;
     className?: string;
-    menuItems: MenuItem<T>[];
+    items: MenuItem<T>[];
     value: T;
     onSelect?: (value: T) => void;
     placeholder?: string;
@@ -804,12 +989,44 @@ type Props$6<T extends string> = {
     label?: React__default.ReactNode;
     onFocus?: FocusEventHandler;
     onBlur?: FocusEventHandler;
+    contentStyle?: React__default.CSSProperties;
 } & Pick<SelectProps, "open" | "onOpenChange">;
-declare const labelTextStyles = "font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%]";
-declare const SelectMenu: <T extends string = string>(props: Props$6<T>) => React__default.ReactElement | null;
+declare const SelectMenu: <T extends string = string>(props: Props$5<T>) => React__default.ReactElement | null;
+
+interface SidebarListProps<T, M extends string = string> {
+    className?: string;
+    items: T[];
+    getId: (item: T) => string;
+    getName: (item: T) => string;
+    getExpanded?: (item: T) => boolean | undefined;
+    expandable?: boolean;
+    menuItems?: MenuItem<M>[];
+    onSelectMenuItem?: (action: M, selectedItems: T[]) => void;
+    onRename?: (itemId: string, newName: string) => void;
+    renderThumbnail?: (item: T) => React__default.ReactNode;
+    renderHoverAction?: (item: T, selected: boolean) => React__default.ReactNode;
+    renderDetail?: (item: T) => React__default.ReactNode;
+    onSelectionChange?: (selectedItems: T[]) => void;
+    scrollable?: boolean;
+    itemRoleDescription?: string;
+    /** Position of the detail content. Defaults to 'end'. */
+    detailPosition?: "end" | "below";
+    /** Size of the list items. Defaults to 'medium'. */
+    size?: "medium" | "large";
+    /** For testing: Override the hover state with a specific item ID */
+    testHoveredId?: string;
+    /** For testing: Override the renaming state with a specific item ID */
+    testRenamingId?: string;
+    setExpanded?: (item: T, expanded: boolean) => void;
+    acceptsDrop?: ListViewRootProps["acceptsDrop"];
+    onMoveItem?: ListViewRootProps["onMoveItem"];
+    getDepth?: (item: T) => number;
+    onFilesDrop?: (event: React__default.DragEvent<Element>) => void;
+}
+declare function SidebarList<T, M extends string = string>({ className, items, getId, getName, expandable, getExpanded, getDepth, setExpanded, menuItems, onSelectMenuItem, onRename, renderThumbnail, renderHoverAction, renderDetail, onSelectionChange, itemRoleDescription, detailPosition, size, testHoveredId, testRenamingId, scrollable, acceptsDrop, onMoveItem, onFilesDrop, }: SidebarListProps<T, M>): React__default.JSX.Element;
 
 type ColorScheme = "primary" | "secondary";
-interface Props$5 {
+interface Props$4 {
     id?: string;
     style?: React__default.CSSProperties;
     className?: string;
@@ -824,19 +1041,19 @@ interface Props$5 {
     onBlur?: FocusEventHandler;
     readOnly?: boolean;
 }
-declare const Slider: React__default.NamedExoticComponent<Props$5>;
+declare const Slider: React__default.NamedExoticComponent<Props$4>;
 
-interface Props$4 {
+interface Props$3 {
     size?: number | string;
     inline?: boolean;
 }
 declare namespace Spacer {
-    const Vertical: React.ForwardRefExoticComponent<Props$4 & React.RefAttributes<HTMLSpanElement>>;
-    const Horizontal: React.ForwardRefExoticComponent<Props$4 & React.RefAttributes<HTMLSpanElement>>;
+    const Vertical: React.ForwardRefExoticComponent<Props$3 & React.RefAttributes<HTMLSpanElement>>;
+    const Horizontal: React.ForwardRefExoticComponent<Props$3 & React.RefAttributes<HTMLSpanElement>>;
 }
 
 type SwitchColorScheme = "primary" | "secondary";
-interface Props$3 {
+interface Props$2 {
     id?: string;
     value: boolean;
     onChange: (value: boolean) => void;
@@ -848,7 +1065,7 @@ interface Props$3 {
     className?: string;
     style?: React.CSSProperties;
 }
-declare const Switch: ({ id, value, onChange, colorScheme, disabled, onFocus, onBlur, style, className, }: Props$3) => React.JSX.Element;
+declare const Switch: ({ id, value, onChange, colorScheme, disabled, onFocus, onBlur, style, className, }: Props$2) => React.JSX.Element;
 
 declare const config: {
     content: string[];
@@ -1195,6 +1412,7 @@ type TextProps = {
     variant: Variant;
     color?: KebabToCamelCase<ThemeColor>;
     children: ReactNode;
+    id?: string;
     onClick?: () => void;
     onDoubleClick?: () => void;
     onKeyDown?: (event: React__default.KeyboardEvent<HTMLSpanElement>) => void;
@@ -1242,15 +1460,16 @@ declare const ToastProvider: ({ children }: {
     children: React__default.ReactNode;
 }) => React__default.JSX.Element;
 
-interface Props$2 {
+interface Props$1 {
     children: React.ReactNode;
     content: React.ReactNode;
 }
-declare const Tooltip: React.NamedExoticComponent<Props$2>;
+declare const Tooltip: React.NamedExoticComponent<Props$1>;
 
 type TreeRowBaseProps = {
     icon?: Exclude<ReactNode, string> | IconName;
     expanded?: boolean;
+    chevronClassName?: string;
     onClickChevron?: ({ altKey }: {
         altKey: boolean;
     }) => void;
@@ -1267,28 +1486,12 @@ declare namespace TreeView {
         keyExtractor: (item: T, index: number) => string;
         sortable?: boolean;
         virtualized?: _noya_app_noya_geometry.Size;
-    }) & {
-        id?: string;
-        className?: string;
-        style?: React__default.CSSProperties;
-        onPress?: () => void;
-        scrollable?: boolean;
-        expandable?: boolean;
-        onMoveItem?: (sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => void;
-        indentation?: number;
-        acceptsDrop?: DropValidator;
-        pressEventName?: "onClick" | "onPointerDown";
-        variant?: "normal" | "bare" | "padded";
-        sectionHeaderVariant?: "normal" | "label";
-        divider?: boolean;
-        gap?: number;
-        colorScheme?: "primary" | "secondary";
-    }) & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement | null;
+    }) & ListViewRootProps) & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement | null;
     const RowTitle: React__default.MemoExoticComponent<({ className, children, ...props }: {
         className?: string;
         children: React__default.ReactNode;
     } & React__default.HTMLAttributes<HTMLSpanElement>) => React__default.JSX.Element>;
-    const EditableRowTitle: React__default.MemoExoticComponent<({ value, onSubmitEditing, autoFocus, placeholder, }: EditableRowProps) => React__default.JSX.Element>;
+    const EditableRowTitle: React__default.MemoExoticComponent<({ value, onSubmitEditing, autoFocus, placeholder, className, }: EditableRowProps) => React__default.JSX.Element>;
     const Row: <MenuItemType extends string>(props: ListView.RowProps<MenuItemType> & TreeRowBaseProps & React__default.RefAttributes<HTMLLIElement>) => React__default.ReactElement | null;
     type ClickInfo = ListView.ClickInfo;
     type RowProps<MenuItemType extends string> = TreeViewRowProps<MenuItemType>;
@@ -1321,10 +1524,11 @@ type PanelLayoutState = {
 };
 declare function usePreservePanelSize(panelGroupRef: React__default.RefObject<ImperativePanelGroupHandle | null>, setPanelLayoutState?: (state: PanelLayoutState) => void): void;
 
-interface Props$1 {
+interface WorkspaceLayoutProps {
     id?: string;
     className?: string;
     style?: React__default.CSSProperties;
+    theme?: "light" | "dark";
     autoSavePrefix?: string;
     left?: React__default.ReactNode;
     leftOptions?: SideOptions;
@@ -1351,8 +1555,9 @@ type SideOptions = {
      */
     initialSize?: number | string;
     minSize?: number | string;
+    maxSize?: number | string;
 };
-declare const WorkspaceLayout: React__default.ForwardRefExoticComponent<Props$1 & React__default.RefAttributes<IWorkspaceLayout>>;
+declare const WorkspaceLayout: React__default.ForwardRefExoticComponent<WorkspaceLayoutProps & React__default.RefAttributes<IWorkspaceLayout>>;
 
 type DesignSystemConfigurationContextValue = {
     platform: PlatformName;
@@ -1461,6 +1666,34 @@ interface HoverResult {
  */
 declare function useHover(props?: HoverProps): HoverResult;
 
+declare const IndentContext: React__default.Context<{
+    indentLevel: number;
+}>;
+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
@@ -1503,6 +1736,16 @@ declare const colorForStringValues: Record<string, string>;
  */
 declare function colorFromString(str: string): string;
 
+/**
+ * Updates the selection state based on user interaction.
+ * Handles single selection, multi-selection with meta/ctrl, and range selection with shift.
+ */
+declare function updateSelection(allIds: string[], selectedIds: string[], clickedId: string, event?: {
+    shiftKey?: boolean;
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+}): string[];
+
 declare function sketchColorToRgba(value: Sketch.Color): RgbaColor;
 declare function sketchColorToRgbaString(value: Sketch.Color): string;
 declare function rgbaToSketchColor(value: RgbaColor): Sketch.Color;
@@ -1592,4 +1835,4 @@ declare function ToolbarMenu<T extends string>({ items, onSelectMenuItem, }: {
     onSelectMenuItem?: (value: T) => void;
 }): React__default.JSX.Element;
 
-export { ActivityIndicator, AnimatePresence, type AnimatePresenceProps, Avatar, type AvatarProps, AvatarStack, type BaseComboboxProps, BaseToolbar, type BaseToolbarProps, Body, Button, type ButtonRootProps, CONTENT_AREA_ID, Checkbox$1 as Checkbox, Chip, type ChipProps, Combobox, type ComboboxItem, ComboboxMenu, type ComboboxOption, type ComboboxProps, type ComboboxRef, type ComboboxSectionHeader, ComboboxState, type ComboboxStateSnapshot, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, DraggableMenuButton, type DropValidator, DropdownMenu, EDITOR_PANEL_GROUP_ID, type EditableRowProps, type ExtractMenuItemType, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, type IScoredItem, type IToken, type IVirtualizedList, type IWorkspaceLayout, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, InputField, type InputFieldInputProps, type InputFieldSize, InspectorContainer, InspectorPrimitives, type InternalComboboxItem, Italic, KeyboardShortcut, LEFT_SIDEBAR_ID, Label, LabeledElementView, type ListRowMarginType, type ListRowPosition, ListView, type MatchRange, type MenuConfig, type MenuItem, type MenuItemProps, type MenuProps, Message, type MessageProps, type OptionModeOnlyProps, type OptionModeProps, type Optional, type PanelLayoutState, PatternPreviewBackground, Popover, Progress, RIGHT_SIDEBAR_ID, type RegularMenuItem, type RelativeDropPosition, SEPARATOR_ITEM, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, ScrollArea, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectMenu, type SetNumberMode, type SideOptions, type SketchPattern, Slider, Small, Sortable, Spacer, type StringModeOnlyProps, type StringModeProps, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, TextArea, TextAreaRow, type TextProps, type Theme, type ThemeColor, Toast, ToastProvider, Toolbar, ToolbarMenu, type ToolbarProps, Tooltip, TreeView, type UseThemeReturnType, UserPointer, type UserPointerProps, WorkspaceLayout, colorForStringValues, colorFromString, createSectionedMenu, cssVars, cx, fuzzyFilter, fuzzyScore, fuzzyTokenize, getGradientBackground, getKeyboardShortcutsForMenuItems, getNewValue, labelTextStyles, mediaQuery, normalizeListDestinationIndex, renderIcon, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, textStyles, useAutoResize, useComboboxState, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenConfirmationDialog, useOpenInputDialog, usePlatform, usePlatformModKey, usePreservePanelSize, useTheme, withSeparatorElements };
+export { ActivityIndicator, AnimatePresence, type AnimatePresenceProps, Avatar, type AvatarProps, AvatarStack, type BaseComboboxProps, BaseToolbar, type BaseToolbarProps, Body, Button, type ButtonRootProps, CHECKBOX_RIGHT_INSET, CHECKBOX_WIDTH, CONTENT_AREA_ID, Checkbox$1 as Checkbox, Chip, type ChipProps, Combobox, type ComboboxItem, ComboboxMenu, type ComboboxOption, type ComboboxProps, type ComboboxRef, type ComboboxSectionHeader, ComboboxState, type ComboboxStateSnapshot, CommandPalette, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, DraggableMenuButton, type DropValidator, DropdownMenu, type DropdownRootProps, EDITOR_PANEL_GROUP_ID, type EditableRowProps, type ExtractMenuItemType, Fade, type FadeDirection, type FadeProps, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, type IScoredItem, type ISearchCompletionMenu, type IToken, type IVirtualizedList, type IWorkspaceLayout, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, IndentContext, InputField, type InputFieldInputProps, type InputFieldProps, type InputFieldSize, InsetLabel, type InsetLabelProps, InspectorContainer, InspectorPrimitives, type InternalComboboxItem, Italic, KeyboardShortcut, LEFT_SIDEBAR_ID, Label, LabelContext, type LabelPosition, LabelPositionContext, type LabelPositionContextValue, type LabelProps, LabelWidthContext, type LabelWidthContextValue, LabeledElementView, LabeledField, type ListRowMarginType, type ListRowPosition, ListView, type ListViewRootProps, type MatchRange, type MenuComponents, type MenuConfig, type MenuItem, type MenuItemProps, type MenuItemRole, type MenuProps, MenuViewport, Message, type MessageProps, type OptionModeOnlyProps, type OptionModeProps, type Optional, type PanelLayoutState, PatternPreviewBackground, Popover, Progress, RIGHT_SIDEBAR_ID, type RegularMenuItem, type RelativeDropPosition, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, ScrollArea, SearchCompletionMenu, SectionHeader$1 as SectionHeader, type SectionHeaderMenuItem, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectMenu, type SeparatorItem, type SetNumberMode, type SideOptions, SidebarList, type SketchPattern, Slider, Small, Sortable, Spacer, type StringModeOnlyProps, type StringModeProps, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, TextArea, TextAreaRow, type TextProps, type Theme, type ThemeColor, Toast, ToastProvider, Toolbar, ToolbarMenu, type ToolbarProps, Tooltip, TreeView, type UseThemeReturnType, UserPointer, type UserPointerProps, WorkspaceLayout, type WorkspaceLayoutProps, colorForStringValues, colorFromString, createSectionedMenu, cssVars, cx, fuzzyFilter, fuzzyScore, fuzzyTokenize, getFieldSpacing, getGradientBackground, getKeyboardShortcutsForMenuItems, getNewValue, getNextIndex, insetLabelStyles, insetLabelTextStyles, labeledFieldStyles, mediaQuery, normalizeListDestinationIndex, renderIcon, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, styles, textStyles, updateSelection, useAutoResize, useComboboxState, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useIndent, useInputFieldContext, useLabel, useLabelPosition, useLabelWidth, useOpenConfirmationDialog, useOpenInputDialog, usePlatform, usePlatformModKey, usePreservePanelSize, useTheme, withSeparatorElements };