@noya-app/noya-designsystem 0.1.47 → 0.1.49

package/dist/index.d.ts

@@ -1,14 +1,15 @@
-import * as React from 'react';
-import React__default, { ReactHTML, ReactNode, CSSProperties, HTMLAttributes, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, LabelHTMLAttributes, ForwardedRef, ComponentProps, SyntheticEvent } from 'react';
+import * as React$1 from 'react';
+import React__default, { ReactNode, ReactHTML, CSSProperties, HTMLAttributes, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, ForwardedRef, ComponentProps, SyntheticEvent, LabelHTMLAttributes } from 'react';
 import { IItemScore } from 'vscode-fuzzy-scorer';
 import * as Icons from '@noya-app/noya-icons';
 export { Icons };
+import * as tailwindcss_types_config from 'tailwindcss/types/config';
 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';
@@ -21,13 +22,126 @@ import { SelectProps } from '@radix-ui/react-select';
 import { ImperativePanelGroupHandle } from 'react-resizable-panels';
 import { RgbaColor } from '@noya-app/noya-colorpicker';
 
+declare function fuzzyScore({ item, query }: {
+    item: string;
+    query: string;
+}): IItemScore;
+type IScoredItem = IItemScore & {
+    index: number;
+};
+declare function fuzzyFilter({ items, query, scoreThreshold, }: {
+    items: string[];
+    query: string;
+    scoreThreshold?: number;
+}): IScoredItem[];
+type IToken = {
+    type: "text";
+    text: string;
+} | {
+    type: "match";
+    text: string;
+};
+type MatchRange = {
+    start: number;
+    end: number;
+};
+declare function fuzzyTokenize({ item, itemScore, }: {
+    item: string;
+    itemScore: IItemScore;
+}): IToken[];
+
+type IconName = keyof typeof Icons;
+
+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?: MenuItemIcon;
+    role?: MenuItemRole;
+    alwaysInclude?: boolean;
+    title: NonNullable<ReactNode>;
+};
+type SectionHeaderMenuItem = {
+    type: "sectionHeader";
+    id: string;
+    title: ReactNode;
+    maxVisibleItems?: number;
+    variant?: "normal" | "label";
+};
+type SelectableMenuItem<T extends string> = BaseMenuItem & {
+    type?: undefined;
+    shortcut?: string;
+    value: T;
+    testSelected?: boolean;
+};
+type SubMenuItem<T extends string> = BaseMenuItem & {
+    type: "submenu";
+    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 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;
+declare const isSelectableMenuItem: <T extends string>(item: MenuItem<T>) => item is SelectableMenuItem<T>;
+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 = 15;
+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;
+    itemIndicator: {
+        className: string;
+        style: {
+            marginRight: number;
+        };
+    };
+    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 ActionMenuProps<TMenu extends string> = {
+    menuItems: MenuItem<TMenu>[];
+    onSelect: (action: TMenu) => void;
+    selected: boolean;
+    onOpenChange: (open: boolean) => void;
+    className?: string;
+    style?: React__default.CSSProperties;
+};
+declare const ActionMenu: <TMenu extends string>(props: ActionMenuProps<TMenu>) => React__default.ReactElement | null;
+
 interface Props$e {
     size?: number;
     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;
@@ -111,6 +225,8 @@ declare const config: {
                 "secondary-bright": string;
                 "input-background": string;
                 "input-background-light": string;
+                "list-view-hover-background": string;
+                "list-view-thumbnail-background": string;
                 "code-background": string;
                 "code-background-dark": string;
                 "selected-background": string;
@@ -155,6 +271,8 @@ declare const config: {
                 "chip-error-shadow": string;
                 "chip-default-shadow": string;
                 "floating-button": string;
+                "block-border": string;
+                "block-highlight": string;
             };
             fontFamily: {
                 sans: [string, string, string, string, string, string, string, string, string, string];
@@ -220,6 +338,7 @@ declare const config: {
                 "inspector-h-separator": string;
                 "inspector-v-separator": string;
                 "dialog-padding": string;
+                "input-height": string;
             };
             keyframes: {
                 spin: {
@@ -251,6 +370,10 @@ declare const config: {
         };
     };
     safelist: string[];
+    plugins: {
+        handler: tailwindcss_types_config.PluginCreator;
+        config?: Partial<tailwindcss_types_config.Config> | undefined;
+    }[];
 };
 
 type Theme = (typeof config.theme)["extend"];
@@ -277,6 +400,8 @@ declare const cssVars: {
         secondaryBright: string;
         inputBackground: string;
         inputBackgroundLight: string;
+        listViewHoverBackground: string;
+        listViewThumbnailBackground: string;
         codeBackground: string;
         codeBackgroundDark: string;
         selectedBackground: string;
@@ -321,6 +446,8 @@ declare const cssVars: {
         chipErrorShadow: string;
         chipDefaultShadow: string;
         floatingButton: string;
+        blockBorder: string;
+        blockHighlight: string;
     };
     fontFamily: {
         sans: [string, string, string, string, string, string, string, string, string, string];
@@ -386,6 +513,7 @@ declare const cssVars: {
         inspectorHSeparator: string;
         inspectorVSeparator: string;
         dialogPadding: string;
+        inputHeight: string;
     };
     keyframes: {
         spin: {
@@ -415,6 +543,7 @@ declare const cssVars: {
         menu: string;
     };
 };
+declare const INPUT_HEIGHT = 27;
 
 type KebabToCamelCase<S extends string> = S extends `${infer First}-${infer Rest}` ? `${First}${Capitalize<KebabToCamelCase<Rest>>}` : S;
 
@@ -474,10 +603,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";
@@ -499,6 +628,7 @@ interface ChipProps {
     onHoverDeleteChange?: (hovering: boolean) => void;
     style?: React__default.CSSProperties;
     tabIndex?: number;
+    role?: string;
 }
 declare const Chip: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<ChipProps & React__default.RefAttributes<HTMLSpanElement>>>;
 
@@ -511,119 +641,53 @@ declare const Grid: <T, M extends string = string>(props: CollectionProps<T, M>
     ref?: React__default.ForwardedRef<CollectionRef>;
 } & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
 
-declare function fuzzyScore({ item, query }: {
-    item: string;
-    query: string;
-}): IItemScore;
-type IScoredItem = IItemScore & {
-    index: number;
-};
-declare function fuzzyFilter({ items, query, scoreThreshold, }: {
-    items: string[];
-    query: string;
-    scoreThreshold?: number;
-}): IScoredItem[];
-type IToken = {
-    type: "text";
-    text: string;
-} | {
-    type: "match";
-    text: string;
-};
-type MatchRange = {
-    start: number;
-    end: number;
-};
-declare function fuzzyTokenize({ item, itemScore, }: {
-    item: string;
-    itemScore: IItemScore;
-}): IToken[];
-
-type IconName = keyof typeof Icons;
-
-declare function renderIcon(iconName: Exclude<React.ReactNode, string> | IconName): React.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";
-};
-type BaseMenuItem = {
-    checked?: boolean;
-    disabled?: boolean;
-    icon?: Exclude<ReactNode, string> | IconName;
-    role?: MenuItemRole;
-    alwaysInclude?: boolean;
-    title: NonNullable<ReactNode>;
-};
-type SectionHeaderMenuItem = {
-    type: "sectionHeader";
-    id: string;
-    title: ReactNode;
-    maxVisibleItems?: number;
-    variant?: "normal" | "label";
-};
-type SelectableMenuItem<T extends string> = BaseMenuItem & {
-    type?: undefined;
-    shortcut?: string;
-    value: T;
+type RelativeDropPosition = "above" | "below" | "inside";
+type DropValidator = (sourceIndex: number, targetIndex: number, position: RelativeDropPosition) => boolean;
+declare const normalizeListTargetIndex: (index: number, position: "above" | "below") => number;
+declare const defaultAcceptsDrop: DropValidator;
+type SortableItemContextProps = {
+    keys: UniqueIdentifier[];
+    acceptsDrop: DropValidator;
+    axis: "x" | "y";
+    position: {
+        x: number;
+        y: number;
+    };
+    setActivatorEvent: (event: PointerEvent) => void;
+    getDropTargetParentIndex?: (index: number) => number | undefined;
 };
-type SubMenuItem<T extends string> = BaseMenuItem & {
-    type: "submenu";
-    items: MenuItem<T>[];
-    id: string;
+type ValidateDropIndicatorParams = {
+    acceptsDrop: DropValidator;
+    keys: UniqueIdentifier[];
+    activeId: UniqueIdentifier;
+    overId: UniqueIdentifier;
+    offsetStart: number;
+    elementStart: number;
+    elementSize: number;
 };
-type NonSelectableMenuItem<T extends string> = SeparatorItem | SectionHeaderMenuItem | SubMenuItem<T>;
-type MenuItem<T extends string> = SeparatorItem | SelectableMenuItem<T> | SectionHeaderMenuItem | SubMenuItem<T>;
-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;
-declare const isSelectableMenuItem: <T extends string>(item: MenuItem<T>) => item is SelectableMenuItem<T>;
-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 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 RelativeDropPosition = "above" | "below" | "inside";
-type DropValidator = (sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => boolean;
-declare const normalizeListDestinationIndex: (index: number, position: "above" | "below") => 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;
-    onMoveItem?: (sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => void;
-    acceptsDrop?: DropValidator;
-    axis?: "x" | "y";
+    keys: UniqueIdentifier[];
+    children: React$1.ReactNode;
+    renderOverlay?: (index: number) => React$1.ReactNode;
+    onMoveItem?: (sourceIndex: number, targetIndex: number, position: RelativeDropPosition) => void;
+    acceptsDrop?: SortableItemContextProps["acceptsDrop"];
+    axis?: SortableItemContextProps["axis"];
+    getDropTargetParentIndex?: SortableItemContextProps["getDropTargetParentIndex"];
 }
 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";
@@ -649,8 +713,9 @@ interface EditableRowProps {
     autoFocus: boolean;
     placeholder?: string;
     className?: string;
+    onKeyDown?: (e: React__default.KeyboardEvent) => void;
 }
-declare function ListViewEditableRowTitle({ value, onSubmitEditing, autoFocus, placeholder, className, }: EditableRowProps): React__default.JSX.Element;
+declare function ListViewEditableRowTitle({ value, onSubmitEditing, autoFocus, placeholder, className, onKeyDown, }: EditableRowProps): React__default.JSX.Element;
 interface ListViewClickInfo {
     shiftKey: boolean;
     altKey: boolean;
@@ -681,17 +746,20 @@ interface ListViewRowProps<MenuItemType extends string = string> {
     onKeyDown?: (event: React__default.KeyboardEvent) => void;
     style?: CSSProperties;
     className?: string;
-    dragIndicatorStyle?: CSSProperties | ((props: {
-        depth: number;
-        indentation: number;
-        position: RelativeDropPosition;
-    }) => CSSProperties);
+    dragIndicatorStyle?: CSSProperties | ((props: DragIndicatorStyleProps) => CSSProperties);
+    testRelativeDropPosition?: RelativeDropPosition;
 }
+type DragIndicatorStyleProps = {
+    depth: number;
+    indentation: number;
+    position: RelativeDropPosition;
+};
 interface IVirtualizedList {
     scrollToIndex(index: number): void;
 }
 type ListViewItemInfo = {
-    isDragging: boolean;
+    isDragOverlay: boolean;
+    activeDragIndex?: number;
 };
 type ChildrenProps = {
     children: ReactNode;
@@ -721,7 +789,7 @@ type ListViewRootProps = {
     onPress?: () => void;
     scrollable?: boolean;
     expandable?: boolean;
-    onMoveItem?: (sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => void;
+    onMoveItem?: (sourceIndex: number, targetIndex: number, position: RelativeDropPosition) => void;
     indentation?: number;
     acceptsDrop?: DropValidator;
     pressEventName?: PressEventName;
@@ -735,6 +803,8 @@ type ListViewRootProps = {
     onDragEnter?: React__default.DragEventHandler<HTMLDivElement>;
     onDragLeave?: React__default.DragEventHandler<HTMLDivElement>;
     onDrop?: React__default.DragEventHandler<HTMLDivElement>;
+    renderEmptyState?: () => ReactNode;
+    getDropTargetParentIndex?: SortableItemContextProps["getDropTargetParentIndex"];
 };
 declare namespace ListView {
     const RowTitle: React__default.MemoExoticComponent<({ className, children, ...props }: {
@@ -750,7 +820,7 @@ declare namespace ListView {
     type RowProps<MenuItemType extends string = string> = ListViewRowProps<MenuItemType>;
     type VirtualizedList = IVirtualizedList;
     const DragIndicator: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & {
-        $relativeDropPosition: RelativeDropPosition;
+        $relativeDropPosition?: RelativeDropPosition;
         $gap: number;
         $offsetLeft: number;
         $colorScheme: ListColorScheme;
@@ -761,19 +831,30 @@ declare namespace ListView {
         menuItemsCount: number;
         sectionHeaderCount: number;
     }) => number;
-    const normalizeDestinationIndex: (index: number, position: "above" | "below") => number;
+    const normalizeTargetIndex: (index: number, position: "above" | "below") => number;
 }
 
 type CollectionViewType = "grid" | "list";
+type CollectionThumbnailSize = "auto" | "custom";
 type CollectionRef = {
     editName: (id: string) => void;
 };
+type CollectionThumbnailProps<T> = {
+    item: T;
+    selected: boolean;
+};
+type CollectionRenderActionProps<T> = {
+    item: T;
+    selected: boolean;
+    onOpenChange: (open: boolean) => void;
+};
 interface CollectionProps<T, M extends string = string> {
     className?: string;
     items: T[];
     getId: (item: T) => string;
     getName: (item: T) => string;
     getExpanded?: (item: T) => boolean | undefined;
+    getPlaceholder?: (item: T) => string;
     /**
      * Whether directories should be expandable.
      * @default true
@@ -787,8 +868,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" | ((props: CollectionRenderActionProps<T>) => 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;
@@ -798,23 +879,34 @@ interface CollectionProps<T, M extends string = string> {
     detailPosition?: "end" | "below";
     /** Size of the list items. Defaults to 'medium'. */
     size?: GridViewSize;
+    /** Size of the thumbnail. Defaults to 'auto', which will be based on the size prop. */
+    thumbnailSize?: CollectionThumbnailSize;
     /** 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;
+    /** For testing: Override the drop indicator state with a specific item ID */
+    testShowDropIndicatorId?: string;
     setExpanded?: (item: T, expanded: boolean) => void;
     acceptsDrop?: ListViewRootProps["acceptsDrop"];
     onMoveItem?: ListViewRootProps["onMoveItem"];
+    getDropTargetParentIndex?: ListViewRootProps["getDropTargetParentIndex"];
     getDepth?: (item: T) => number;
     onFilesDrop?: (event: React__default.DragEvent<Element>) => void;
     getRenamable?: (item: T) => boolean;
     /** Currently selected file IDs */
     selectedIds?: string[];
     viewType?: CollectionViewType;
+    onClickItem?: (itemId: string) => void;
     onDoubleClickItem?: (itemId: string) => void;
+    renderEmptyState?: () => React__default.ReactElement;
+    /** @default false */
+    sortable?: boolean;
 }
 declare const Collection: <T, M extends string = string>(props: CollectionProps<T, M> & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
 
+type InputSize = "small" | "medium" | "large";
+
 type Props$d = {
     id?: string;
     style?: any;
@@ -848,47 +940,19 @@ type SubmittableProps = Props$d & {
 };
 type TextInputProps = ReadOnlyProps | ControlledProps | SubmittableProps;
 
-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;
-};
+    inputRef: ForwardedRef<HTMLInputElement>;
+    startRef: ForwardedRef<HTMLSpanElement>;
+    endRef: ForwardedRef<HTMLSpanElement>;
+    endWidth?: number;
+} & Pick<InputFieldRootProps, "endWidth" | "startWidth" | "size" | "id">;
 declare const useInputFieldContext: () => InputFieldContextValue;
-declare const getFieldSpacing: ({ buttonSize, labelSize, variant, }: {
-    buttonSize?: number;
-    labelSize?: number;
+declare const getFieldSpacing: ({ endWidth, startWidth, variant, }: {
+    endWidth?: number;
+    startWidth?: number;
     variant?: InputFieldVariant;
 }) => {
     paddingLeft: string;
@@ -922,10 +986,14 @@ declare function InputFieldNumberInput(props: InputFieldNumberInputProps): React
 interface InputFieldRootProps {
     id?: string;
     children?: ReactNode;
+    start?: ReactNode;
+    end?: ReactNode;
+    label?: ReactNode;
     width?: number;
-    labelSize?: number;
+    startWidth?: number;
+    endWidth?: number;
     /** @default medium */
-    size?: InputFieldSize;
+    size?: InputSize;
     renderPopoverContent?: (options: {
         width: number;
     }) => ReactNode;
@@ -938,7 +1006,7 @@ interface InputFieldRootProps {
     style?: React__default.CSSProperties;
     className?: string;
 }
-declare function InputFieldRoot({ id: idProp, children, width, sideOffset, labelSize, size, renderPopoverContent, onFocusChange, style, className, }: InputFieldRootProps): React__default.JSX.Element;
+declare function InputFieldRoot({ id, children, width, sideOffset, startWidth: startWidthProp, endWidth: endWidthProp, size, renderPopoverContent, onFocusChange, style, className, start, end, label: labelProp, }: 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>;
@@ -951,10 +1019,8 @@ declare const InputField: React__default.ForwardRefExoticComponent<InputFieldPro
     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>>>;
-    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;
@@ -1013,6 +1079,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 +1087,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 +1105,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 +1167,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>>;
@@ -1133,6 +1249,7 @@ type Props$b = {
     textClassName?: string;
     readOnly?: boolean;
     onBlur?: () => void;
+    tabIndex?: number;
     /**
      * If true, will render an unfocused input. This should only be used for visual regression tests.
      */
@@ -1176,7 +1293,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 +1301,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 +1331,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,9 +1350,10 @@ interface ItemProps<MenuItemType extends string = string> {
     onMenuOpenChange?: (open: boolean) => void;
     style?: CSSProperties;
     action?: ReactNode;
-    testHoveredId?: string;
     onKeyDown?: (event: React__default.KeyboardEvent) => void;
     hovered?: boolean;
+    testShowInsideDropIndicator?: boolean;
+    role?: string;
 }
 type GridViewContextValue = {
     minColumnWidth: string;
@@ -1249,30 +1367,37 @@ 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>;
+    role?: string;
+    renderEmptyState?: () => ReactNode;
+    contentClassName?: string;
 }
-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 | Iterable<React__default.ReactNode> | React__default.JSX.Element | 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" | "flex" | "children" | "variant"> & {
     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 +1421,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";
@@ -1326,14 +1452,19 @@ 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>>>;
+
 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 +1479,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";
@@ -1361,6 +1507,8 @@ type MessageProps = {
 };
 declare const Message: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<MessageProps & React__default.RefAttributes<HTMLDivElement>>>;
 
+declare const Logo: React__default.ForwardRefExoticComponent<Omit<React__default.SVGProps<SVGSVGElement>, "ref"> & React__default.RefAttributes<SVGSVGElement>>;
+
 type PopoverVariant = "normal" | "large";
 interface Props$7 extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content"]>, "onOpenAutoFocus" | "onCloseAutoFocus" | "onPointerDownOutside" | "onInteractOutside" | "onFocusOutside" | "side"> {
     children: React__default.ReactNode;
@@ -1381,12 +1529,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 +1597,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 +1609,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 +1646,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;
@@ -1518,9 +1666,7 @@ declare namespace TreeView {
         children: ReactNode;
     } | {
         data: T[];
-        renderItem: (item: T, index: number, info: {
-            isDragging: boolean;
-        }) => ReactNode;
+        renderItem: (item: T, index: number, info: ListViewItemInfo) => ReactNode;
         keyExtractor: (item: T, index: number) => string;
         sortable?: boolean;
         virtualized?: _noya_app_noya_geometry.Size;
@@ -1529,7 +1675,7 @@ declare namespace TreeView {
         className?: string;
         children: React__default.ReactNode;
     } & React__default.HTMLAttributes<HTMLSpanElement>) => React__default.JSX.Element>;
-    const EditableRowTitle: React__default.MemoExoticComponent<({ value, onSubmitEditing, autoFocus, placeholder, className, }: EditableRowProps) => React__default.JSX.Element>;
+    const EditableRowTitle: React__default.MemoExoticComponent<({ value, onSubmitEditing, autoFocus, placeholder, className, onKeyDown, }: 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>;
@@ -1552,16 +1698,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 +1712,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,54 +1736,49 @@ 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 = {
-    openDialog(options: {
-        title: string;
-        description?: ReactNode;
-        children: ReactNode;
+    openDialog(options: BaseDialogContents & {
+        children: ReactNode | ((props: RenderableProps) => ReactNode);
     }): Promise<void>;
-    openInputDialog(options: string | {
-        title: string;
-        description?: ReactNode;
+    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 useDialogContext(): DialogContextValue;
-declare function useOpenInputDialog(): (options: string | {
-    title: string;
-    description?: ReactNode;
+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 useOpenDialog(): (options: {
-    title: string;
-    description?: ReactNode;
-    children: ReactNode;
+declare function useOpenConfirmationDialog(): (options: string | BaseDialogContents) => Promise<boolean>;
+declare function useOpenDialog(): (options: BaseDialogContents & {
+    children: ReactNode | ((props: RenderableProps) => ReactNode);
 }) => Promise<void>;
 
 type FloatingWindowContextValue = {
@@ -1663,7 +1799,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
@@ -1678,8 +1814,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;
@@ -1706,7 +1842,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;
 }
 /**
@@ -1749,6 +1885,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";
 /**
@@ -1770,7 +1912,13 @@ declare const mediaQuery: {
     xlarge: string;
 };
 
-declare function cx(...args: Array<string | number | boolean | null | undefined>): string;
+type ClassNameItem = string | number | BigInt | boolean | null | undefined;
+type Category = "text" | "flex";
+type Options = {
+    categories?: Category[];
+};
+declare function cx(...args: ClassNameItem[]): string;
+declare function mergeConflictingClassNames(classNames: ClassNameItem | ClassNameItem[], options?: Options): string;
 
 type Optional<T> = T | false | null | undefined;
 type MenuConfig<T extends string> = Optional<Optional<MenuItem<T>>[]>[];
@@ -1854,7 +2002,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>>;
@@ -1920,4 +2068,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, useDialogContext, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useIndent, useInputFieldContext, useLabel, useLabelPosition, useLabelWidth, useOpenConfirmationDialog, useOpenDialog, useOpenInputDialog, usePlatform, usePlatformModKey, usePreservePanelSize, useTheme, withSeparatorElements };
+export { ActionMenu, 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 CollectionRenderActionProps, type CollectionThumbnailProps, type CollectionThumbnailSize, 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, type DragIndicatorStyleProps, 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, 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, Logo, 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, type SortableItemContextProps, 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, isMenuItemSectionHeader, isNonSelectableMenuItem, isSelectableMenuItem, isSelectableMenuItemWithScore, labeledFieldStyles, mediaQuery, mergeConflictingClassNames, normalizeListTargetIndex, 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 };