import { CSSProperties } from 'react';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { MouseEvent as MouseEvent_2 } from 'react';
import { ReactNode } from 'react';
import { ReactPortal } from 'react';

export declare function BrowserErrorPage({ url, onRefresh }: BrowserErrorPageProps): JSX_2.Element;

export declare interface BrowserErrorPageProps {
    url?: string;
    onRefresh?: () => void;
}

export declare function BrowserWindow({ url, canGoBack, canGoForward, status, history, onNavigate, onBack, onForward, onStop, onRefresh, onHome, backIcon, forwardIcon, stopIcon, refreshIcon, homeIcon, historyIcon, children, className, ...windowProps }: BrowserWindowProps): JSX_2.Element;

export declare interface BrowserWindowProps extends Omit<WindowProps, "children" | "scrollContent" | "bodyOverflow"> {
    url?: string;
    canGoBack?: boolean;
    canGoForward?: boolean;
    status?: string;
    history?: string[];
    onNavigate?: (url: string) => void;
    onBack?: () => void;
    onForward?: () => void;
    onStop?: () => void;
    onRefresh?: () => void;
    onHome?: () => void;
    backIcon?: string;
    forwardIcon?: string;
    stopIcon?: string;
    refreshIcon?: string;
    homeIcon?: string;
    historyIcon?: string;
    children?: ReactNode;
}

export declare function Button({ variant, size, disabled, action, minWidth, width, height, fontSize, px, py, onClick, children, className, style, }: ButtonProps): JSX_2.Element;

export declare interface ButtonProps {
    variant?: "primary" | "ghost" | "help" | "basic" | "iridescent";
    size?: "sm" | "md" | "lg";
    disabled?: boolean;
    action?: string;
    minWidth?: string;
    width?: string;
    height?: string;
    fontSize?: string;
    px?: string;
    py?: string;
    onClick?: React.MouseEventHandler<HTMLButtonElement>;
    children?: ReactNode;
    className?: string;
    style?: CSSProperties;
}

export declare function Checkbox({ checked, defaultChecked, indeterminate, disabled, label, onChange, className, style }: CheckboxProps): JSX_2.Element;

export declare interface CheckboxProps {
    checked?: boolean;
    defaultChecked?: boolean;
    indeterminate?: boolean;
    disabled?: boolean;
    label?: string;
    onChange?: (checked: boolean) => void;
    className?: string;
    style?: CSSProperties;
}

export declare function ContextMenu({ x, y, items, onClose }: ContextMenuProps): ReactPortal;

export declare type ContextMenuItem = {
    type?: "item";
    label: string;
    icon?: ReactNode;
    shortcut?: string;
    disabled?: boolean;
    onClick: () => void;
} | {
    type: "separator";
};

export declare interface ContextMenuProps {
    x: number;
    y: number;
    items: ContextMenuItem[];
    onClose: () => void;
}

export declare function Desktop({ children, className, style, taskbarHeight, contextMenuItems, compact }: DesktopProps): JSX_2.Element;

export declare function DesktopIcon({ label, icon, iconSize, onClick, className, style }: DesktopIconProps): JSX_2.Element;

export declare interface DesktopIconProps {
    label: string;
    icon?: string;
    iconSize?: number;
    onClick?: () => void;
    className?: string;
    style?: CSSProperties;
}

export declare interface DesktopProps {
    children?: ReactNode;
    className?: string;
    style?: CSSProperties;
    taskbarHeight?: number;
    contextMenuItems?: ContextMenuItem[];
    /**
     * Phone-style layout: every window fills the desktop above the taskbar, one
     * in front at a time, and can't be dragged or resized. Turn it on for small
     * screens.
     */
    compact?: boolean;
}

export declare function Dialog({ title, isOpen, onClose, actions, children, size, closeOnBackdrop, className, }: DialogProps): ReactPortal | null;

export declare interface DialogAction {
    label: string;
    variant?: "primary" | "ghost" | "help";
    onClick: () => void;
}

export declare interface DialogAPI {
    alert: (message: string, opts?: {
        title?: string;
        ok?: string;
    }) => Promise<void>;
    confirm: (message: string, opts?: {
        title?: string;
        ok?: string;
        cancel?: string;
    }) => Promise<boolean>;
    prompt: (message: string, opts?: {
        title?: string;
        ok?: string;
        cancel?: string;
        defaultValue?: string;
        placeholder?: string;
    }) => Promise<string | null>;
    /** Shows one button per choice and resolves to its value, or null if the dialog is dismissed. */
    choose: <T extends string>(message: string, opts: {
        title?: string;
        choices: DialogChoice<T>[];
    }) => Promise<T | null>;
}

export declare interface DialogChoice<T extends string = string> {
    label: string;
    value: T;
    primary?: boolean;
}

export declare interface DialogProps {
    title?: string;
    isOpen: boolean;
    onClose?: () => void;
    actions?: DialogAction[];
    children?: ReactNode;
    size?: "sm" | "md" | "lg";
    closeOnBackdrop?: boolean;
    className?: string;
}

export declare function DialogProvider({ children }: {
    children: ReactNode;
}): JSX_2.Element;

export declare type DreamDeskTheme = "pastelcore" | "dark" | "vista";

export declare function ExplorerWindow({ nodes, items, selectedNode, onNodeSelect, onItemOpen, mode: modeProp, className, ...props }: ExplorerWindowProps): JSX_2.Element;

export declare interface ExplorerWindowProps extends Omit<WindowProps, "children" | "bodyOverflow"> {
    nodes: TreeNode[];
    items?: ListViewItem[];
    selectedNode?: string;
    onNodeSelect?: (id: string) => void;
    onItemOpen?: (id: string) => void;
    mode?: ListViewMode;
    style?: CSSProperties;
}

export declare function Icon({ src, size, alt, className }: IconProps): JSX_2.Element | null;

export declare interface IconProps {
    src?: string;
    size?: number;
    alt?: string;
    className?: string;
}

export declare function Input({ type, label, layout, id: idProp, value, defaultValue, placeholder, disabled, onChange, className, style, }: InputProps): JSX_2.Element;

export declare interface InputProps {
    type?: "text" | "password" | "email" | "number" | "search";
    label?: string;
    layout?: "block" | "inline";
    id?: string;
    value?: string;
    defaultValue?: string;
    placeholder?: string;
    disabled?: boolean;
    onChange?: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void;
    className?: string;
    style?: CSSProperties;
}

export declare function ListView({ items, mode, selected, multiSelect, onSelect, onOpen, onItemContextMenu, columnLabels, className, style, }: ListViewProps): JSX_2.Element;

export declare interface ListViewItem {
    id: string;
    name: string;
    icon?: string;
    size?: string;
    type?: string;
    date?: string;
}

export declare type ListViewMode = "icons" | "details";

export declare interface ListViewProps {
    items: ListViewItem[];
    mode?: ListViewMode;
    selected?: string[];
    multiSelect?: boolean;
    onSelect?: (ids: string[]) => void;
    onOpen?: (id: string) => void;
    /**
     * Right-click on an item. An item that isn't already selected becomes the
     * selection first (like Windows). Call e.preventDefault() to show your own
     * menu, and e.stopPropagation() to keep a surrounding menu from opening.
     */
    onItemContextMenu?: (id: string, e: React.MouseEvent) => void;
    /**
     * Other headings for the details columns, e.g. { type: "Original Location" }
     * when that column holds something else. Sorting still uses the item's
     * size / type / date fields.
     */
    columnLabels?: Partial<Record<SortKey, string>>;
    className?: string;
    style?: CSSProperties;
}

export declare function Menu({ label, children, index }: MenuProps): JSX_2.Element;

export declare function MenuBar({ children, className, style }: MenuBarProps): JSX_2.Element;

export declare interface MenuBarProps {
    children?: ReactNode;
    className?: string;
    style?: CSSProperties;
}

export declare function MenuItem({ children, shortcut, checked, disabled, onClick }: MenuItemProps): JSX_2.Element;

export declare interface MenuItemProps {
    children?: ReactNode;
    shortcut?: string;
    checked?: boolean;
    disabled?: boolean;
    onClick?: () => void;
}

export declare interface MenuProps {
    label: string;
    children?: ReactNode;
    index?: number;
}

export declare function MenuSeparator(): JSX_2.Element;

export declare function NotepadWindow({ defaultValue, value, onChange, onSave, hideTabs, className, onBeforeClose, onClose, ...props }: NotepadWindowProps): JSX_2.Element;

export declare interface NotepadWindowProps extends Omit<WindowProps, "children" | "scrollContent" | "bodyOverflow"> {
    defaultValue?: string;
    value?: string;
    onChange?: (value: string) => void;
    /** Adds File > Save (and Ctrl/Cmd+S), called with the current text. */
    onSave?: (value: string) => void;
    hideTabs?: boolean;
    style?: CSSProperties;
}

export declare function ProgressBar({ value, blocky, gradient, className, style, }: ProgressBarProps): JSX_2.Element;

export declare interface ProgressBarProps {
    value?: number;
    blocky?: boolean;
    gradient?: boolean;
    className?: string;
    style?: CSSProperties;
}

export declare function Radio({ value, label, disabled: ownDisabled, className, style }: RadioProps): JSX_2.Element;

export declare function RadioGroup({ name, value, disabled, onChange, children, className, style }: RadioGroupProps): JSX_2.Element;

export declare interface RadioGroupProps {
    name?: string;
    value?: string;
    defaultValue?: string;
    disabled?: boolean;
    onChange?: (value: string) => void;
    children?: ReactNode;
    className?: string;
    style?: CSSProperties;
}

export declare interface RadioProps {
    value: string;
    label?: string;
    disabled?: boolean;
    className?: string;
    style?: CSSProperties;
}

export declare function Select({ options, value, defaultValue, placeholder, disabled, label, layout, onChange, className, style }: SelectProps): JSX_2.Element;

export declare interface SelectOption {
    value: string;
    label: string;
    disabled?: boolean;
}

export declare interface SelectProps {
    options: SelectOption[];
    value?: string;
    defaultValue?: string;
    placeholder?: string;
    disabled?: boolean;
    label?: string;
    layout?: "block" | "inline";
    onChange?: (value: string) => void;
    className?: string;
    style?: CSSProperties;
}

export declare function Slider({ value, defaultValue, min, max, step, disabled, label, showValue, onChange, className, style }: SliderProps): JSX_2.Element;

export declare interface SliderProps {
    value?: number;
    defaultValue?: number;
    min?: number;
    max?: number;
    step?: number;
    disabled?: boolean;
    label?: string;
    showValue?: boolean;
    onChange?: (value: number) => void;
    className?: string;
    style?: CSSProperties;
}

declare type SortKey = "name" | "size" | "type" | "date";

export declare function StartMenu({ label, items, onSelect, buttonLabel, buttonIcon, buttonIconSize, className }: StartMenuProps): JSX_2.Element;

export declare interface StartMenuItemDef {
    id: string;
    label: string;
    icon?: string;
    divider?: boolean;
}

export declare interface StartMenuProps {
    label?: string;
    items: StartMenuItemDef[];
    onSelect: (id: string) => void;
    buttonLabel?: string;
    /** An icon before the button's label, like the Windows logo on Start. */
    buttonIcon?: string;
    /** The icon's size in px (default 16); the button is about 28px tall. */
    buttonIconSize?: number;
    className?: string;
}

export declare function StatusBar({ children, className, style }: StatusBarProps): JSX_2.Element;

export declare interface StatusBarProps {
    children?: ReactNode;
    className?: string;
    style?: CSSProperties;
}

export declare function StatusBarSection({ children, flex, className }: StatusBarSectionProps): JSX_2.Element;

export declare interface StatusBarSectionProps {
    children?: ReactNode;
    flex?: boolean;
    className?: string;
}

export declare function Tab({ children, index, active, onClick }: TabProps): JSX_2.Element;

export declare function TabPanel({ children, active, style }: TabPanelProps): JSX_2.Element;

export declare interface TabPanelProps {
    children?: ReactNode;
    active?: boolean;
    style?: CSSProperties;
}

export declare interface TabProps {
    children?: ReactNode;
    index?: number;
    active?: boolean;
    onClick?: (index: number) => void;
}

export declare function Tabs({ defaultIndex, activeIndex: controlledIndex, onChange, children, className, style, }: TabsProps): JSX_2.Element;

export declare interface TabsProps {
    defaultIndex?: number;
    activeIndex?: number;
    onChange?: (index: number) => void;
    children?: ReactNode;
    className?: string;
    style?: CSSProperties;
}

/** A small label, e.g. for a list of technologies or categories. */
export declare function Tag({ children, iridescent, className, style }: TagProps): JSX_2.Element;

export declare interface TagProps {
    children: ReactNode;
    /** The theme's iridescent surface (a thin-film shimmer in Pastelcore). */
    iridescent?: boolean;
    className?: string;
    style?: CSSProperties;
}

export declare function Taskbar({ clock, className, startMenu }: TaskbarProps): JSX_2.Element;

export declare interface TaskbarProps {
    clock?: boolean;
    className?: string;
    startMenu?: ReactNode;
}

export declare function TerminalWindow({ children, className, ...props }: TerminalWindowProps): JSX_2.Element;

export declare interface TerminalWindowProps extends Omit<WindowProps, "children"> {
    children?: ReactNode;
    style?: CSSProperties;
}

declare interface ThemeContextValue {
    theme: DreamDeskTheme;
    setTheme: (theme: DreamDeskTheme) => void;
}

export declare function ThemeProvider({ children, defaultTheme }: {
    children: ReactNode;
    defaultTheme?: DreamDeskTheme;
}): JSX_2.Element;

export declare function Toast({ type, message, onClose }: ToastProps): JSX_2.Element | null;

export declare function ToastContainer({ position, maxStack }: ToastContainerProps): JSX_2.Element;

export declare interface ToastContainerProps {
    position?: ToastPosition;
    maxStack?: number;
}

export declare type ToastPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";

export declare interface ToastProps {
    type?: "alert" | "notification" | "warning";
    message?: ReactNode;
    onClose?: () => void;
}

export declare function Toggle({ checked, defaultChecked, onChange, style, className }: ToggleProps): JSX_2.Element;

export declare interface ToggleProps {
    checked?: boolean;
    defaultChecked?: boolean;
    onChange?: (checked: boolean) => void;
    style?: CSSProperties;
    className?: string;
}

export declare function Toolbar({ children, className, style }: ToolbarProps): JSX_2.Element;

export declare function ToolbarButton({ icon, label, disabled, active, onClick, className }: ToolbarButtonProps): JSX_2.Element;

export declare interface ToolbarButtonProps {
    icon?: string;
    label?: string;
    disabled?: boolean;
    active?: boolean;
    onClick?: () => void;
    className?: string;
}

export declare interface ToolbarProps {
    children?: ReactNode;
    className?: string;
    style?: CSSProperties;
}

export declare function ToolbarSeparator(): JSX_2.Element;

export declare interface TreeNode {
    id: string;
    label: string;
    icon?: string;
    children?: TreeNode[];
}

export declare function TreeView({ nodes, selected, defaultExpanded, onSelect, onOpen, className, style }: TreeViewProps): JSX_2.Element;

export declare interface TreeViewProps {
    nodes: TreeNode[];
    selected?: string;
    defaultExpanded?: string[];
    onSelect?: (id: string) => void;
    onOpen?: (id: string) => void;
    className?: string;
    style?: CSSProperties;
}

export declare function useContextMenu(items: ContextMenuItem[]): {
    onContextMenu: (e: MouseEvent_2) => void;
    contextMenu: JSX_2.Element | null;
};

/** Whether the surrounding Desktop is in compact (phone) mode. */
export declare function useDesktopCompact(): boolean;

export declare function useDialog(): DialogAPI;

export declare function useTheme(): ThemeContextValue;

export declare function useWindowManager(): WindowManager;

export declare function Wallpaper({ src, gradient, color, tile, tileSize, className }: WallpaperProps): JSX_2.Element;

export declare interface WallpaperProps {
    src?: string;
    gradient?: string;
    color?: string;
    tile?: boolean;
    tileSize?: number | string;
    className?: string;
}

declare function Window_2({ windowId: windowIdProp, title, icon, size, resizable: resizableProp, movable: movableProp, width, height, minimizeIcon, fullscreenIcon, closeIcon, disableMinimize, disableFullscreen, disableClose, fullscreenMode, bodyOverflow, scrollContent, onMove, disableSnap: disableSnapProp, keepOnScreen, onMinimize, onFullscreen, defaultFullscreen, compactLayout, fullscreenAnimation, defaultOpen, onBeforeClose, onClose, children, style, className, }: WindowProps): JSX_2.Element;
export { Window_2 as Window }

declare interface WindowEntry {
    id: string;
    title: string;
    icon?: string;
    el: HTMLElement;
    isMinimized: boolean;
    toggle: () => void;
}

declare class WindowManager {
    private _registry;
    private _zStack;
    private _listeners;
    private _openRegistry;
    private _closeRegistry;
    private _cascadeCount;
    getCascadeOffset(): {
        dx: number;
        dy: number;
    };
    private _notify;
    private _reassignZ;
    register(id: string, el: HTMLElement, title: string, options?: {
        icon?: string;
        toggle?: () => void;
    }): void;
    unregister(id: string): void;
    raise(id: string): void;
    minimize(id: string): void;
    restore(id: string): void;
    registerOpen(id: string, fn: () => void): void;
    registerClose(id: string, fn: () => void): void;
    close(id: string): void;
    open(id: string): void;
    getWindows(): WindowEntry[];
    subscribe(listener: () => void): () => void;
}

export declare interface WindowProps {
    windowId?: string;
    title?: string;
    icon?: string;
    size?: "sm" | "md" | "lg";
    resizable?: boolean;
    movable?: boolean;
    width?: string;
    height?: string;
    minimizeIcon?: string;
    fullscreenIcon?: string;
    closeIcon?: string;
    disableMinimize?: boolean | string;
    disableFullscreen?: boolean | string;
    disableClose?: boolean | string;
    fullscreenMode?: "expand";
    bodyOverflow?: "auto" | "hidden" | "scroll";
    scrollContent?: boolean;
    onMove?: (x: number, y: number) => void;
    disableSnap?: boolean;
    /**
     * When the window grows past the desktop's bottom or right edge (a panel
     * opening, content loading), move it back in, as Windows does, and report
     * the new place through onMove. Default true.
     */
    keepOnScreen?: boolean;
    onMinimize?: (isMinimized: boolean) => void;
    onFullscreen?: (isFullscreen: boolean) => void;
    /**
     * Start in fullscreen. Only applies with `fullscreenAnimation`, which owns the
     * fullscreen layout (e.g. `fullscreenMode="expand"`); a plain window would need
     * its pre-fullscreen size to restore, which isn't known on first render.
     */
    defaultFullscreen?: boolean;
    /**
     * How this window looks on a compact (phone) Desktop: "maximize" fills the
     * screen above the taskbar (default); "fit" keeps the window's own size,
     * centred, for small fixed-size windows like a media player.
     */
    compactLayout?: "maximize" | "fit";
    fullscreenAnimation?: (el: HTMLElement, opts: {
        isFullscreen: boolean;
        defaultFn: () => void;
    }) => void;
    defaultOpen?: boolean;
    /** Runs before the window closes; resolve false to keep it open (e.g. unsaved changes). */
    onBeforeClose?: () => boolean | Promise<boolean>;
    onClose?: () => void;
    children?: ReactNode;
    style?: CSSProperties;
    className?: string;
}

export { }