@noya-app/noya-designsystem 0.1.46 → 0.1.48

package/dist/index.d.ts

@@ -1,14 +1,14 @@
-import * as React from 'react';
+import * as React$1 from 'react';
 import React__default, { ReactHTML, ReactNode, CSSProperties, HTMLAttributes, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, LabelHTMLAttributes, ForwardedRef, ComponentProps, SyntheticEvent } from 'react';
 import { IItemScore } from 'vscode-fuzzy-scorer';
 import * as Icons from '@noya-app/noya-icons';
 export { Icons };
 import * as _noya_app_noya_geometry from '@noya-app/noya-geometry';
 import { Size } from '@noya-app/noya-geometry';
+import { UniqueIdentifier } from '@dnd-kit/core';
 import { useSortable } from '@dnd-kit/sortable';
 import { Property } from 'csstype';
 import * as _noya_app_noya_designsystem from '@noya-app/noya-designsystem';
-import { SelectableMenuItem as SelectableMenuItem$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';
@@ -26,8 +26,9 @@ interface Props$e {
     opacity?: number;
     color?: string;
     trackColor?: string;
+    className?: string;
 }
-declare const ActivityIndicator: React.NamedExoticComponent<Props$e>;
+declare const ActivityIndicator: React$1.NamedExoticComponent<Props$e>;
 
 type AnimatePresenceProps = {
     children: React__default.ReactNode;
@@ -220,6 +221,7 @@ declare const config: {
                 "inspector-h-separator": string;
                 "inspector-v-separator": string;
                 "dialog-padding": string;
+                "input-height": string;
             };
             keyframes: {
                 spin: {
@@ -386,6 +388,7 @@ declare const cssVars: {
         inspectorHSeparator: string;
         inspectorVSeparator: string;
         dialogPadding: string;
+        inputHeight: string;
     };
     keyframes: {
         spin: {
@@ -474,10 +477,10 @@ interface ButtonRootProps {
 }
 declare const Button: React__default.ForwardRefExoticComponent<ButtonRootProps & React__default.RefAttributes<HTMLButtonElement>>;
 
-interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type"> {
     colorScheme?: "primary" | "secondary";
 }
-declare const Checkbox$1: React.MemoExoticComponent<React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>>;
+declare const Checkbox$1: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLInputElement>>>;
 
 type ChipColorScheme = "primary" | "secondary" | "error";
 type ChipSize = "small" | "medium" | "large";
@@ -541,16 +544,19 @@ declare function fuzzyTokenize({ item, itemScore, }: {
 
 type IconName = keyof typeof Icons;
 
-declare function renderIcon(iconName: Exclude<React.ReactNode, string> | IconName): React.ReactNode;
+declare function renderIcon(iconName: Exclude<React$1.ReactNode, string> | IconName): React$1.ReactNode;
 
 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 SeparatorItem = {
     type: "separator";
 };
+declare const separator: SeparatorItem;
+type FalsyReactNode = false | "" | null | undefined;
+type MenuItemIcon = IconName | React__default.ReactElement | FalsyReactNode;
 type BaseMenuItem = {
     checked?: boolean;
     disabled?: boolean;
-    icon?: Exclude<ReactNode, string> | IconName;
+    icon?: MenuItemIcon;
     role?: MenuItemRole;
     alwaysInclude?: boolean;
     title: NonNullable<ReactNode>;
@@ -566,6 +572,7 @@ type SelectableMenuItem<T extends string> = BaseMenuItem & {
     type?: undefined;
     shortcut?: string;
     value: T;
+    testSelected?: boolean;
 };
 type SubMenuItem<T extends string> = BaseMenuItem & {
     type: "submenu";
@@ -581,10 +588,14 @@ 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 getMenuItemKey: <T extends string>(item: MenuItem<T>, index: number) => string;
 declare const CHECKBOX_WIDTH = 16;
 declare const CHECKBOX_RIGHT_INSET = 8;
+declare const CHECKBOX_INDENT_WIDTH = 6;
 declare const styles: {
     separatorStyle: string;
+    selectedItemStyle: string;
+    testSelectedItemStyle: string;
     itemStyle: ({ disabled }: {
         disabled?: boolean;
     }) => string;
@@ -603,27 +614,38 @@ declare const SectionHeader$1: React__default.NamedExoticComponent<Omit<SectionH
 type RelativeDropPosition = "above" | "below" | "inside";
 type DropValidator = (sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => boolean;
 declare const normalizeListDestinationIndex: (index: number, position: "above" | "below") => number;
+declare const defaultAcceptsDrop: DropValidator;
+type ValidateDropIndicatorParams = {
+    acceptsDrop: DropValidator;
+    keys: UniqueIdentifier[];
+    activeId: UniqueIdentifier;
+    overId: UniqueIdentifier;
+    offsetStart: number;
+    elementStart: number;
+    elementSize: number;
+};
+declare function validateDropIndicator({ acceptsDrop, keys, activeId, overId, offsetStart, elementStart, elementSize, }: ValidateDropIndicatorParams): RelativeDropPosition | undefined;
 type UseSortableReturnType = ReturnType<typeof useSortable>;
 interface ItemProps$1<T> {
-    id: string;
+    id: UniqueIdentifier;
     disabled?: boolean;
     children: (props: {
-        ref: React.Ref<T>;
+        ref: React$1.Ref<T>;
         relativeDropPosition?: RelativeDropPosition;
-        [key: string]: any;
+        style?: React$1.CSSProperties;
     } & UseSortableReturnType["attributes"]) => JSX.Element;
 }
 interface RootProps {
-    keys: string[];
-    children: React.ReactNode;
-    renderOverlay?: (index: number) => React.ReactNode;
+    keys: UniqueIdentifier[];
+    children: React$1.ReactNode;
+    renderOverlay?: (index: number) => React$1.ReactNode;
     onMoveItem?: (sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => void;
     acceptsDrop?: DropValidator;
     axis?: "x" | "y";
 }
 declare namespace Sortable {
-    const Item: <T extends HTMLElement>(props: ItemProps$1<T>) => React.ReactElement | null;
-    const Root: (props: RootProps) => React.ReactElement | null;
+    const Item: <T extends HTMLElement>(props: ItemProps$1<T>) => React$1.ReactElement | null;
+    const Root: (props: RootProps) => React$1.ReactElement | null;
 }
 
 type ListRowMarginType = "none" | "top" | "bottom" | "vertical";
@@ -735,6 +757,7 @@ type ListViewRootProps = {
     onDragEnter?: React__default.DragEventHandler<HTMLDivElement>;
     onDragLeave?: React__default.DragEventHandler<HTMLDivElement>;
     onDrop?: React__default.DragEventHandler<HTMLDivElement>;
+    renderEmptyState?: () => ReactNode;
 };
 declare namespace ListView {
     const RowTitle: React__default.MemoExoticComponent<({ className, children, ...props }: {
@@ -768,6 +791,10 @@ type CollectionViewType = "grid" | "list";
 type CollectionRef = {
     editName: (id: string) => void;
 };
+type CollectionThumbnailProps<T> = {
+    item: T;
+    selected: boolean;
+};
 interface CollectionProps<T, M extends string = string> {
     className?: string;
     items: T[];
@@ -787,8 +814,8 @@ interface CollectionProps<T, M extends string = string> {
     menuItems?: MenuItem<M>[];
     onSelectMenuItem?: (action: M, selectedItems: T[]) => void;
     onRename?: (item: T, newName: string) => void;
-    renderThumbnail?: (item: T, selected: boolean) => React__default.ReactNode;
-    renderAction?: (item: T, selected: boolean) => React__default.ReactNode;
+    renderThumbnail?: ({ item, selected, }: CollectionThumbnailProps<T>) => React__default.ReactNode;
+    renderAction?: "menu" | ((item: T, selected: boolean) => React__default.ReactNode);
     renderDetail?: (item: T, selected: boolean) => React__default.ReactNode;
     /** Callback when selection changes. If not provided, selection will be disabled. */
     onSelectionChange?: (selectedItemIds: string[], event?: ListView.ClickInfo) => void;
@@ -811,7 +838,9 @@ interface CollectionProps<T, M extends string = string> {
     /** Currently selected file IDs */
     selectedIds?: string[];
     viewType?: CollectionViewType;
+    onClickItem?: (itemId: string) => void;
     onDoubleClickItem?: (itemId: string) => void;
+    renderEmptyState?: () => React__default.ReactElement;
 }
 declare const Collection: <T, M extends string = string>(props: CollectionProps<T, M> & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
 
@@ -857,7 +886,7 @@ 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;
+    buttonWidth?: 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";
@@ -865,30 +894,32 @@ declare const InsetLabel: React__default.MemoExoticComponent<React__default.Forw
     /** @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;
+    buttonWidth?: 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;
+    labelWidth?: number;
+    buttonWidth?: number;
+    startWidth?: 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;
+    inputRef: ForwardedRef<HTMLInputElement>;
+    buttonRef: ForwardedRef<HTMLButtonElement>;
+    labelRef: ForwardedRef<HTMLLabelElement>;
+    startRef: ForwardedRef<HTMLSpanElement>;
     id?: string;
     label?: ReactNode;
     labelPosition?: LabelPosition;
 };
 declare const useInputFieldContext: () => InputFieldContextValue;
-declare const getFieldSpacing: ({ buttonSize, labelSize, variant, }: {
-    buttonSize?: number;
-    labelSize?: number;
+declare const getFieldSpacing: ({ buttonWidth, labelWidth, startWidth, variant, }: {
+    buttonWidth?: number;
+    labelWidth?: number;
+    startWidth?: number;
     variant?: InputFieldVariant;
 }) => {
     paddingLeft: string;
@@ -923,7 +954,8 @@ interface InputFieldRootProps {
     id?: string;
     children?: ReactNode;
     width?: number;
-    labelSize?: number;
+    labelWidth?: number;
+    startWidth?: number;
     /** @default medium */
     size?: InputFieldSize;
     renderPopoverContent?: (options: {
@@ -937,8 +969,9 @@ interface InputFieldRootProps {
     onFocusChange?: (isFocused: boolean) => void;
     style?: React__default.CSSProperties;
     className?: string;
+    start?: ReactNode;
 }
-declare function InputFieldRoot({ id: idProp, children, width, sideOffset, labelSize, size, renderPopoverContent, onFocusChange, style, className, }: InputFieldRootProps): React__default.JSX.Element;
+declare function InputFieldRoot({ id: idProp, children, width, sideOffset, labelWidth, startWidth, size, renderPopoverContent, onFocusChange, style, className, start, }: 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>;
@@ -952,6 +985,7 @@ declare const InputField: React__default.ForwardRefExoticComponent<InputFieldPro
     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;
+        buttonStyle?: React__default.CSSProperties;
         variant?: "floating" | "normal";
     } & React__default.RefAttributes<HTMLButtonElement>>>;
     readonly Label: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<React__default.LabelHTMLAttributes<HTMLLabelElement> & React__default.RefAttributes<HTMLLabelElement>>>;
@@ -1013,6 +1047,7 @@ interface ComboboxMenuProps<T extends string> {
     onHoverIndex: (index: number) => void;
     listSize: Size;
     style?: React__default.CSSProperties;
+    indented?: boolean;
 }
 declare const ComboboxMenu: <T extends string>(props: ComboboxMenuProps<T> & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement | null;
 
@@ -1020,11 +1055,13 @@ interface ISearchCompletionMenu {
     focus: () => void;
 }
 declare const SearchCompletionMenu: React__default.ForwardRefExoticComponent<{
-    onSelect: (item: SelectableMenuItem$1<string>) => void;
-    onHover?: (item: SelectableMenuItem$1<string>) => void;
+    onSelect: (item: SelectableMenuItem<string>) => void;
+    onHover?: (item: SelectableMenuItem<string>) => void;
     onClose: () => void;
-    items: SelectableMenuItem$1<string>[];
+    items: SelectableMenuItem<string>[];
     width?: number;
+    testSelectedIndex?: number;
+    testSearch?: string;
 } & React__default.RefAttributes<ISearchCompletionMenu>>;
 
 declare const CommandPalette: React__default.NamedExoticComponent<{
@@ -1036,6 +1073,8 @@ declare const CommandPalette: React__default.NamedExoticComponent<{
     onClose: () => void;
     items: _noya_app_noya_designsystem.SelectableMenuItem<string>[];
     width?: number;
+    testSelectedIndex?: number;
+    testSearch?: string;
 } & React__default.RefAttributes<ISearchCompletionMenu>, "onSelect" | "items" | "onHover">>;
 
 interface MenuItemProps<T extends string> {
@@ -1096,6 +1135,51 @@ declare const DraggableMenuButton: <T extends string>(props: {
     isVisible?: boolean;
 }) => React__default.ReactElement | null;
 
+type SidebarRef = {
+    expand: () => void;
+    collapse: () => void;
+    isExpanded: () => boolean;
+};
+type PercentageSidebarOptions = {
+    minSize?: number;
+    maxSize?: number;
+    initialSize?: number;
+    resizable?: boolean;
+};
+type PanelLayoutState = {
+    leftSidebarCollapsed: boolean;
+    rightSidebarCollapsed: boolean;
+};
+type LayoutProps = {
+    leftPanel: React.ReactNode;
+    rightPanel: React.ReactNode;
+    centerPanel: React.ReactNode;
+    leftSidebarOptions: PercentageSidebarOptions;
+    rightSidebarOptions: PercentageSidebarOptions;
+    centerPanelPercentage: number;
+    autoSavePrefix?: string;
+    internalLayoutState: PanelLayoutState | null;
+    leftSidebarRef: React.RefObject<SidebarRef>;
+    rightSidebarRef: React.RefObject<SidebarRef>;
+    handleChangeLayoutState: (state: PanelLayoutState) => void;
+};
+
+type DrawerProps = {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger: React$1.ReactNode;
+    children: React$1.ReactNode;
+    title?: React$1.ReactNode;
+    className?: string;
+    id?: string;
+    style?: React$1.CSSProperties;
+    positioning?: "fixed" | "absolute";
+    side?: "left" | "right";
+    portalled?: boolean;
+    portalContainer?: HTMLElement | null;
+};
+declare const Drawer: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<DrawerProps & React$1.RefAttributes<SidebarRef>>>;
+
 type DropdownRootProps<T extends string> = MenuProps<T> & {
     open?: boolean;
     onCloseAutoFocus?: React__default.EventHandler<SyntheticEvent<unknown>>;
@@ -1176,7 +1260,7 @@ interface Props$a {
 }
 declare const FillInputField: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Props$a & React__default.RefAttributes<HTMLButtonElement>>>;
 
-declare const PatternPreviewBackground: React.NamedExoticComponent<{
+declare const PatternPreviewBackground: React$1.NamedExoticComponent<{
     fillType: Sketch.PatternFillType;
     tileScale: number;
     imageRef: string;
@@ -1184,7 +1268,7 @@ declare const PatternPreviewBackground: React.NamedExoticComponent<{
 interface Props$9 {
     value?: Sketch.Color | Sketch.Gradient | SketchPattern;
 }
-declare const FillPreviewBackground: React.NamedExoticComponent<Props$9>;
+declare const FillPreviewBackground: React$1.NamedExoticComponent<Props$9>;
 
 interface FloatingWindowProps {
     title?: string;
@@ -1214,7 +1298,7 @@ interface Props$8 {
     onDelete: () => void;
     onSelectStop: (index: number) => void;
 }
-declare const GradientPicker: React.NamedExoticComponent<Props$8>;
+declare const GradientPicker: React$1.NamedExoticComponent<Props$8>;
 
 interface ItemProps<MenuItemType extends string = string> {
     id: string;
@@ -1233,7 +1317,6 @@ interface ItemProps<MenuItemType extends string = string> {
     onMenuOpenChange?: (open: boolean) => void;
     style?: CSSProperties;
     action?: ReactNode;
-    testHoveredId?: string;
     onKeyDown?: (event: React__default.KeyboardEvent) => void;
     hovered?: boolean;
 }
@@ -1249,30 +1332,34 @@ interface GridViewRootProps extends Partial<GridViewContextValue> {
     onClick?: () => void;
     scrollable?: boolean;
     className?: string;
+    onDragOver?: React__default.DragEventHandler<HTMLDivElement>;
+    onDragEnter?: React__default.DragEventHandler<HTMLDivElement>;
+    onDragLeave?: React__default.DragEventHandler<HTMLDivElement>;
+    onDrop?: React__default.DragEventHandler<HTMLDivElement>;
 }
-declare function GridViewRoot({ minColumnWidth, gap, children, scrollable, onClick, textPosition, bordered, disabled, className, }: GridViewRootProps): React__default.JSX.Element;
-declare function GridViewSection({ children, className, }: {
+declare function GridViewSection({ children, className, renderEmptyState, }: {
     children?: ReactNode;
     className?: string;
-}): React__default.JSX.Element;
+    renderEmptyState?: () => ReactNode;
+}): string | number | boolean | React__default.JSX.Element | Iterable<React__default.ReactNode> | null | undefined;
 declare function GridViewSectionHeader({ title }: {
     title: string;
 }): React__default.JSX.Element;
 declare namespace GridView {
-    const Root: React__default.MemoExoticComponent<typeof GridViewRoot>;
+    const Root: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<GridViewRootProps & React__default.RefAttributes<HTMLDivElement>>>;
     const Item: <MenuItemType extends string>(props: ItemProps<MenuItemType> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
     const Section: React__default.MemoExoticComponent<typeof GridViewSection>;
     const SectionHeader: React__default.MemoExoticComponent<typeof GridViewSectionHeader>;
 }
 
-declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<ButtonRootProps, "size" | "children" | "variant" | "flex"> & {
+declare const IconButton: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Omit<ButtonRootProps, "size" | "children" | "variant" | "flex"> & {
     iconName: IconName;
     className?: string;
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
     selected?: boolean;
     color?: string;
     size?: number;
-} & React.RefAttributes<HTMLButtonElement>>>;
+} & React$1.RefAttributes<HTMLButtonElement>>>;
 
 declare const InspectorContainer: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
     header?: React__default.ReactNode;
@@ -1296,6 +1383,7 @@ type MenuItemComponent = React__default.ForwardRefExoticComponent<React__default
     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";
@@ -1327,13 +1415,13 @@ type MenuViewportProps<T extends string> = {
 declare const MenuViewport: <T extends string>({ items, Components, onSelect, }: MenuViewportProps<T>) => React__default.JSX.Element;
 
 interface ContainerProps {
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     renderLabel: (provided: {
         id: string;
         index: number;
-    }) => React.ReactNode;
+    }) => React$1.ReactNode;
 }
-declare const LabeledElementView: React.NamedExoticComponent<ContainerProps>;
+declare const LabeledElementView: React$1.NamedExoticComponent<ContainerProps>;
 
 declare const labeledFieldStyles: (labelPosition?: LabelPosition) => string;
 declare const LabeledField: React__default.NamedExoticComponent<{
@@ -1348,9 +1436,24 @@ declare const LabeledField: React__default.NamedExoticComponent<{
     minWidth?: number;
 }>;
 
-declare const List: <T, M extends string = string>(props: CollectionProps<T, M> & {
-    ref?: React__default.ForwardedRef<CollectionRef>;
-} & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
+declare const List: <T, M extends string = string>(props: CollectionProps<T, M> & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
+
+type ColorScheme$1 = "primary" | "icon" | "warning";
+type MediaThumbnailProps = {
+    contentType?: string;
+    url?: string;
+    selected?: boolean;
+    className?: string;
+    /** Color scheme for the thumbnail. Affects icon color and background.
+     * @default "icon"
+     */
+    colorScheme?: ColorScheme$1;
+    /**
+     * If provided, use this icon instead of the default one for the asset type
+     */
+    iconName?: IconName;
+};
+declare const MediaThumbnail: React__default.NamedExoticComponent<MediaThumbnailProps>;
 
 type MessageProps = {
     role: "user" | "assistant" | "system" | "data";
@@ -1381,12 +1484,12 @@ declare function Progress({ value, variant, className, }: {
     value: number;
     variant?: ProgressVariant;
     className?: string;
-}): React.JSX.Element;
+}): React$1.JSX.Element;
 
 interface Props$6 {
-    children?: React.ReactNode | ((scrollElementRef: HTMLDivElement) => React.ReactNode);
+    children?: React$1.ReactNode | ((scrollElementRef: HTMLDivElement) => React$1.ReactNode);
 }
-declare const ScrollArea: React.NamedExoticComponent<Props$6>;
+declare const ScrollArea: React$1.NamedExoticComponent<Props$6>;
 
 type SegmentedControlColorScheme = "primary" | "secondary";
 interface SegmentedControlProps<T extends string> {
@@ -1449,8 +1552,8 @@ interface Props$3 {
     inline?: boolean;
 }
 declare namespace Spacer {
-    const Vertical: React.ForwardRefExoticComponent<Props$3 & React.RefAttributes<HTMLSpanElement>>;
-    const Horizontal: React.ForwardRefExoticComponent<Props$3 & React.RefAttributes<HTMLSpanElement>>;
+    const Vertical: React$1.ForwardRefExoticComponent<Props$3 & React$1.RefAttributes<HTMLSpanElement>>;
+    const Horizontal: React$1.ForwardRefExoticComponent<Props$3 & React$1.RefAttributes<HTMLSpanElement>>;
 }
 
 type SwitchColorScheme = "primary" | "secondary";
@@ -1461,12 +1564,12 @@ interface Props$2 {
     /** @default normal */
     colorScheme?: SwitchColorScheme;
     disabled?: boolean;
-    onFocus?: React.FocusEventHandler;
-    onBlur?: React.FocusEventHandler;
+    onFocus?: React$1.FocusEventHandler;
+    onBlur?: React$1.FocusEventHandler;
     className?: string;
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
 }
-declare const Switch: ({ id, value, onChange, colorScheme, disabled, onFocus, onBlur, style, className, }: Props$2) => React.JSX.Element;
+declare const Switch: ({ id, value, onChange, colorScheme, disabled, onFocus, onBlur, style, className, }: Props$2) => React$1.JSX.Element;
 
 declare const useAutoResize: (value: string | undefined) => React__default.MutableRefObject<HTMLTextAreaElement | null>;
 declare const TextArea: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
@@ -1498,10 +1601,10 @@ declare const ToastProvider: ({ children }: {
 }) => React__default.JSX.Element;
 
 interface Props$1 {
-    children: React.ReactNode;
-    content: React.ReactNode;
+    children: React$1.ReactNode;
+    content: React$1.ReactNode;
 }
-declare const Tooltip: React.NamedExoticComponent<Props$1>;
+declare const Tooltip: React$1.NamedExoticComponent<Props$1>;
 
 type TreeRowBaseProps = {
     icon?: Exclude<ReactNode, string> | IconName;
@@ -1552,16 +1655,8 @@ type UserPointerProps = {
 };
 declare const UserPointer: React__default.NamedExoticComponent<UserPointerProps>;
 
-declare const EDITOR_PANEL_GROUP_ID = "editor-panel-group";
-declare const LEFT_SIDEBAR_ID = "editor-left-sidebar";
-declare const RIGHT_SIDEBAR_ID = "editor-right-sidebar";
-declare const CONTENT_AREA_ID = "editor-content-area";
-type PanelLayoutState = {
-    leftSidebarCollapsed: boolean;
-    rightSidebarCollapsed: boolean;
-};
-declare function usePreservePanelSize(panelGroupRef: React__default.RefObject<ImperativePanelGroupHandle | null>, setPanelLayoutState?: (state: PanelLayoutState) => void): void;
-
+type SideType = "auto" | "panel" | "drawer";
+type DetectSizeType = "container" | "window";
 interface WorkspaceLayoutProps {
     id?: string;
     className?: string;
@@ -1574,9 +1669,12 @@ interface WorkspaceLayoutProps {
     right?: React__default.ReactNode;
     rightOptions?: SideOptions;
     toolbar?: React__default.ReactNode;
+    sideType?: SideType;
+    sideTypeBreakpoint?: number;
+    detectSize?: DetectSizeType;
     onChangeLayoutState?: (layoutState: PanelLayoutState) => void;
 }
-type IWorkspaceLayout = {
+type WorkspaceLayoutRef = {
     setLeftExpanded: (expanded: boolean) => void;
     setRightExpanded: (expanded: boolean) => void;
     toggleSides: () => void;
@@ -1595,44 +1693,50 @@ type SideOptions = {
     minSize?: number | string;
     maxSize?: number | string;
 };
-declare const WorkspaceLayout: React__default.ForwardRefExoticComponent<WorkspaceLayoutProps & React__default.RefAttributes<IWorkspaceLayout>>;
+declare const WorkspaceLayout: React__default.ForwardRefExoticComponent<WorkspaceLayoutProps & React__default.RefAttributes<WorkspaceLayoutRef>>;
 
 type DesignSystemConfigurationContextValue = {
     platform: PlatformName;
 };
-declare const DesignSystemConfigurationProvider: React.NamedExoticComponent<{
-    children: React.ReactNode;
+declare const DesignSystemConfigurationProvider: React$1.NamedExoticComponent<{
+    children: React$1.ReactNode;
     platform?: PlatformName;
 }>;
 declare function useDesignSystemConfiguration(): DesignSystemConfigurationContextValue;
 
+type RenderableProps = {
+    close: () => void;
+};
 type DialogContextValue = {
-    openInputDialog(options: string | {
-        title: string;
-        description?: ReactNode;
+    openDialog(options: BaseDialogContents & {
+        children: ReactNode | ((props: RenderableProps) => ReactNode);
+    }): Promise<void>;
+    openInputDialog(options: string | (BaseDialogContents & {
         placeholder?: string;
         initialValue?: string;
-    }): Promise<string | undefined>;
-    openConfirmationDialog(options: string | {
-        title: string;
-        description?: ReactNode;
-    }): Promise<boolean>;
+    })): Promise<string | undefined>;
+    openConfirmationDialog(options: string | BaseDialogContents): Promise<boolean>;
     containsElement(element: HTMLElement): boolean;
 };
+type BaseDialogContents = {
+    style?: React__default.CSSProperties;
+    className?: string;
+    title: string;
+    description?: ReactNode;
+};
 declare const DialogProvider: ({ children, }: {
     children: ReactNode;
 }) => React__default.JSX.Element;
-declare function useOpenInputDialog(): (options: string | {
-    title: string;
-    description?: ReactNode;
+declare function useDialogContext(): DialogContextValue;
+declare function useOpenInputDialog(): (options: string | (BaseDialogContents & {
     placeholder?: string;
     initialValue?: string;
-}) => Promise<string | undefined>;
+})) => Promise<string | undefined>;
 declare function useDialogContainsElement(): (element: HTMLElement) => boolean;
-declare function useOpenConfirmationDialog(): (options: string | {
-    title: string;
-    description?: ReactNode;
-}) => Promise<boolean>;
+declare function useOpenConfirmationDialog(): (options: string | BaseDialogContents) => Promise<boolean>;
+declare function useOpenDialog(): (options: BaseDialogContents & {
+    children: ReactNode | ((props: RenderableProps) => ReactNode);
+}) => Promise<void>;
 
 type FloatingWindowContextValue = {
     createWindow: (element: React__default.ReactNode) => string;
@@ -1652,7 +1756,7 @@ type GlobalInputBlurContextValue = {
     removeListener: (f: () => void) => void;
     trigger: () => void;
 };
-declare const GlobalInputBlurProvider: React.Provider<GlobalInputBlurContextValue>;
+declare const GlobalInputBlurProvider: React$1.Provider<GlobalInputBlurContextValue>;
 /**
  * Some components store their editable state internally.
  * We trigger this event before selection changes so that they can commit their
@@ -1667,8 +1771,8 @@ declare function useGlobalInputBlurTrigger(): () => void;
 type ImageDataContextValue = {
     getImageData: (ref: string) => ArrayBuffer | undefined;
 };
-declare const ImageDataProvider: React.NamedExoticComponent<{
-    children: React.ReactNode;
+declare const ImageDataProvider: React$1.NamedExoticComponent<{
+    children: React$1.ReactNode;
     getImageData?: (ref: string) => ArrayBuffer | undefined;
 }>;
 declare function useImageData(ref: string): ArrayBuffer | undefined;
@@ -1695,7 +1799,7 @@ interface HoverProps extends HoverEvents {
 }
 interface HoverResult {
     /** Props to spread on the target element. */
-    hoverProps: React.HTMLAttributes<HTMLElement>;
+    hoverProps: React$1.HTMLAttributes<HTMLElement>;
     isHovered: boolean;
 }
 /**
@@ -1738,6 +1842,12 @@ declare function usePlatform(): _noya_app_noya_keymap.PlatformName;
  */
 declare function usePlatformModKey(): 'ctrlKey' | 'metaKey';
 
+declare const EDITOR_PANEL_GROUP_ID = "editor-panel-group";
+declare const LEFT_SIDEBAR_ID = "editor-left-sidebar";
+declare const RIGHT_SIDEBAR_ID = "editor-right-sidebar";
+declare const CONTENT_AREA_ID = "editor-content-area";
+declare function usePreservePanelSize(panelGroupRef: React__default.RefObject<ImperativePanelGroupHandle | null>, setPanelLayoutState?: (state: PanelLayoutState) => void): void;
+
 /** @default light */
 type UseThemeReturnType = "dark" | "light";
 /**
@@ -1843,7 +1953,7 @@ interface Props {
     disabled?: boolean;
     trigger?: "change" | "submit";
 }
-declare const DimensionInput: React.NamedExoticComponent<Props>;
+declare const DimensionInput: React$1.NamedExoticComponent<Props>;
 
 declare const Section: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
 declare const SectionHeader: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
@@ -1909,4 +2019,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, BreadcrumbText, Button, type ButtonRootProps, CHECKBOX_RIGHT_INSET, CHECKBOX_WIDTH, CONTENT_AREA_ID, Checkbox$1 as Checkbox, Chip, type ChipProps, Collection, type CollectionProps, type CollectionRef, type CollectionViewType, Combobox, ComboboxMenu, type ComboboxProps, type ComboboxRef, 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, EditableText, type EditableTextRef, type ExtractMenuItemType, Fade, type FadeDirection, type FadeProps, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, Grid, 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, Italic, KeyboardShortcut, LEFT_SIDEBAR_ID, Label, LabelContext, type LabelPosition, LabelPositionContext, type LabelPositionContextValue, type LabelProps, LabelWidthContext, type LabelWidthContextValue, LabeledElementView, LabeledField, List, 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 NonSelectableMenuItem, type OptionModeOnlyProps, type OptionModeProps, type Optional, type PanelLayoutState, PatternPreviewBackground, Popover, Progress, RIGHT_SIDEBAR_ID, type RelativeDropPosition, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, type ScoredMenuItem, ScrollArea, SearchCompletionMenu, SectionHeader$1 as SectionHeader, type SectionHeaderMenuItem, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectMenu, type SelectableMenuItem, type SeparatorItem, 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, type WorkspaceLayoutProps, colorForStringValues, colorFromString, createSectionedMenu, cssVars, cx, fuzzyFilter, fuzzyScore, fuzzyTokenize, getFieldSpacing, getGradientBackground, getGridSize, getKeyboardShortcutsForMenuItems, getNewValue, getNextIndex, insetLabelStyles, insetLabelTextStyles, isMenuItemSectionHeader, isNonSelectableMenuItem, isSelectableMenuItem, isSelectableMenuItemWithScore, 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 };
+export { ActivityIndicator, AnimatePresence, type AnimatePresenceProps, Avatar, type AvatarProps, AvatarStack, type BaseComboboxProps, BaseToolbar, type BaseToolbarProps, Body, BreadcrumbText, Button, type ButtonRootProps, CHECKBOX_INDENT_WIDTH, CHECKBOX_RIGHT_INSET, CHECKBOX_WIDTH, CONTENT_AREA_ID, Checkbox$1 as Checkbox, Chip, type ChipProps, Collection, type CollectionProps, type CollectionRef, type CollectionThumbnailProps, type CollectionViewType, Combobox, ComboboxMenu, type ComboboxProps, type ComboboxRef, ComboboxState, type ComboboxStateSnapshot, CommandPalette, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, type DetectSizeType, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, 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, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, Grid, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, type IScoredItem, type ISearchCompletionMenu, type IToken, type IVirtualizedList, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, IndentContext, InputField, type InputFieldInputProps, type InputFieldProps, type InputFieldSize, InsetLabel, type InsetLabelProps, 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 ListViewRootProps, type MatchRange, MediaThumbnail, type MenuComponents, type MenuConfig, type MenuItem, type MenuItemIcon, type MenuItemProps, type MenuItemRole, type MenuProps, MenuViewport, Message, type MessageProps, type NonSelectableMenuItem, type OptionModeOnlyProps, type OptionModeProps, type Optional, type PanelLayoutState, PatternPreviewBackground, type PercentageSidebarOptions, Popover, Progress, RIGHT_SIDEBAR_ID, type RelativeDropPosition, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, type ScoredMenuItem, ScrollArea, SearchCompletionMenu, SectionHeader$1 as SectionHeader, type SectionHeaderMenuItem, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectMenu, type SelectableMenuItem, type SeparatorItem, type SetNumberMode, type SideOptions, type SideType, type SidebarRef, 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, type WorkspaceLayoutRef, colorForStringValues, colorFromString, createSectionedMenu, cssVars, cx, defaultAcceptsDrop, fuzzyFilter, fuzzyScore, fuzzyTokenize, getFieldSpacing, getGradientBackground, getGridSize, getKeyboardShortcutsForMenuItems, getMenuItemKey, getNewValue, getNextIndex, insetLabelStyles, insetLabelTextStyles, isMenuItemSectionHeader, isNonSelectableMenuItem, isSelectableMenuItem, isSelectableMenuItemWithScore, labeledFieldStyles, mediaQuery, normalizeListDestinationIndex, renderIcon, rgbaToSketchColor, separator, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, styles, textStyles, updateSelection, useAutoResize, useComboboxState, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDialogContainsElement, useDialogContext, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useIndent, useInputFieldContext, useLabel, useLabelPosition, useLabelWidth, useOpenConfirmationDialog, useOpenDialog, useOpenInputDialog, usePlatform, usePlatformModKey, usePreservePanelSize, useTheme, validateDropIndicator, withSeparatorElements };