@carto/ps-react-ui 5.3.0 → 6.1.0

package/dist/types/widgets/timeseries/style.d.ts

@@ -1,38 +0,0 @@
-import { Theme } from '@mui/material';
-export declare const styles: {
-    skeleton: {
-        graph: {
-            container: {
-                position: "relative";
-                display: "flex";
-                alignItems: "center";
-                justifyContent: "space-between";
-                flexDirection: "column";
-                gap: ({ spacing }: Theme) => string;
-                height: ({ spacing }: Theme) => string;
-            };
-            grid: {
-                display: "flex";
-                justifyContent: "space-between";
-                flex: "1 1 auto";
-                alignItems: "flex-end";
-                width: "100%";
-            };
-        };
-        histogram: {
-            item: {
-                flex: number;
-                maxWidth: ({ spacing }: Theme) => string;
-                '& + &': {
-                    marginLeft: string;
-                };
-            };
-        };
-        legend: {
-            display: "flex";
-            alignItems: "center";
-            gap: ({ spacing }: Theme) => string;
-            height: ({ spacing }: Theme) => string;
-        };
-    };
-};

package/dist/types/widgets/toolbar-actions/index.d.ts

@@ -1,2 +0,0 @@
-export type { ToolbarAction, ToolbarActionsLabels, ToolbarActionsProps, } from './types.js';
-export { ToolbarActions } from './toolbar-actions.js';

package/dist/types/widgets/toolbar-actions/styles.d.ts

@@ -1,37 +0,0 @@
-import { Theme } from '@mui/material';
-export declare const styles: {
-    root: {
-        display: "flex";
-        alignItems: "center";
-        width: string;
-        overflow: "hidden";
-        borderRadius: ({ spacing }: Theme) => string;
-        gap: ({ spacing }: Theme) => string;
-    };
-    preview: {
-        display: "flex";
-        alignItems: "center";
-        gap: ({ spacing }: Theme) => string;
-    };
-    actionsContainer: {
-        position: "absolute";
-        display: "flex";
-        alignItems: "center";
-        backgroundColor: ({ palette }: Theme) => string;
-        padding: ({ spacing }: Theme) => string;
-        gap: ({ spacing }: Theme) => string;
-    };
-    iconButton: {
-        width: ({ spacing }: Theme) => string;
-        height: ({ spacing }: Theme) => string;
-        borderRadius: number;
-        '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
-            borderRadius: number;
-        };
-    };
-    triggerButton: {
-        '&[data-active="true"]': {
-            backgroundColor: ({ palette }: Theme) => string;
-        };
-    };
-};

package/dist/types/widgets/toolbar-actions/toolbar-actions.d.ts

@@ -1,17 +0,0 @@
-import { JSX } from 'react';
-import { ToolbarActionsProps } from './types.js';
-/**
- * A floating toolbar component that displays action buttons.
- * Shows a trigger button when there are more visible actions than the visibleCount,
- * which expands to reveal all actions with a close button.
- * When visibleCount is undefined, all actions are shown without overflow.
- *
- * Children with the `data-toolbar-hidden` attribute are ignored when counting
- * visible actions but are included in the preview. This is useful for elements
- * like Dividers that should appear between actions but not count toward the limit.
- *
- * Example: With visibleCount=2 and children [Action1, Divider, Action2, Divider, Action3]:
- * - Preview shows: Action1, Divider, Action2 (2 visible actions + divider)
- * - Hidden: Divider, Action3
- */
-export declare function ToolbarActions({ children: _children, visibleCount, direction, labels, sx, IconButtonProps, TooltipProps, }: ToolbarActionsProps): JSX.Element | null;

package/dist/types/widgets/toolbar-actions/types.d.ts

@@ -1,52 +0,0 @@
-import { IconButtonProps, SxProps, Theme, TooltipProps } from '@mui/material';
-import { ReactNode } from 'react';
-/**
- * Represents a single action in the toolbar
- */
-export interface ToolbarAction {
-    /** Unique identifier for the action */
-    id: string;
-    /** Icon to display for the action */
-    icon: ReactNode;
-    /** Label displayed in tooltip */
-    label: string;
-    /** Callback when action is clicked */
-    onClick: () => void;
-    /** Whether the action is disabled */
-    disabled?: boolean;
-}
-/**
- * Labels for toolbar UI elements
- */
-export interface ToolbarActionsLabels {
-    /** Tooltip for the trigger button */
-    trigger?: string;
-    /** Tooltip for the close button */
-    close?: string;
-}
-/**
- * Props for the ToolbarActions component
- */
-export interface ToolbarActionsProps {
-    /**
-     * Array of React elements (typically IconButtons) to display in the toolbar.
-     * Elements with `data-toolbar-hidden` attribute are ignored when counting visible
-     * actions and excluded from the collapsed preview (e.g., Dividers).
-     */
-    children: ReactNode[] | ReactNode;
-    /** Direction in which the toolbar expands */
-    direction?: 'left' | 'right';
-    /**
-     * Number of visible actions to show in collapsed mode.
-     * When undefined, shows all actions without overflow.
-     */
-    visibleCount?: number;
-    /** Custom labels for UI elements */
-    labels?: ToolbarActionsLabels;
-    /** Custom styles for the root container */
-    sx?: SxProps<Theme>;
-    /** Props passed to action IconButtons */
-    IconButtonProps?: Omit<IconButtonProps, 'onClick' | 'disabled'>;
-    /** Props passed to Tooltips */
-    TooltipProps?: Omit<TooltipProps, 'title' | 'children'>;
-}

package/dist/types/widgets/utils/chart-config/config-factory.d.ts

@@ -1,38 +0,0 @@
-import { EchartOptionsProps, EchartWidgetData } from '../../echart/index.js';
-/**
- * Base configuration interface for chart widgets
- */
-export interface ChartWidgetBaseConfig<TData = EchartWidgetData> {
-    data?: TData;
-}
-/**
- * Parameters for creating a chart widget configuration
- */
-export interface CreateChartWidgetConfigParams<TData = EchartWidgetData, TConfig extends ChartWidgetBaseConfig<TData> = ChartWidgetBaseConfig<TData>, TType extends string = string> {
-    /** Widget type identifier (e.g., 'bar', 'pie', 'histogram') */
-    type: TType;
-    /** Function to get EChart options from config */
-    getOptions: (config: TConfig) => EchartOptionsProps;
-}
-/**
- * Return type of the chart widget config function
- */
-export type ChartWidgetConfigResult<TData = EchartWidgetData, TConfig extends ChartWidgetBaseConfig<TData> = ChartWidgetBaseConfig<TData>, TType extends string = string> = TConfig & {
-    type: TType;
-};
-/**
- * Factory function to create a standardized chart widget config function.
- * This eliminates duplication across chart widgets by providing a common structure.
- *
- * @example
- * ```ts
- * export const barConfig = createChartWidgetConfig({
- *   type: 'bar' as const,
- *   getOptions: ({ data, theme }) => ({
- *     // EChart configuration
- *   }),
- *   csvModifier: (data) => flattenObjectArrayToCSV(data),
- * })
- * ```
- */
-export declare function createChartWidgetConfig<TData = EchartWidgetData, TConfig extends ChartWidgetBaseConfig<TData> = ChartWidgetBaseConfig<TData>, TType extends string = string>({ type, getOptions, }: CreateChartWidgetConfigParams<TData, TConfig, TType>): (config: TConfig) => ChartWidgetConfigResult<TData, TConfig, TType>;

package/dist/types/widgets/utils/chart-config/csv-modifiers.d.ts

@@ -1,19 +0,0 @@
-/**
- * Shared CSV export modifiers for chart widgets
- */
-/**
- * Flattens object array data into CSV-ready rows.
- * Used by bar, pie, histogram, and timeseries widgets.
- *
- * @param data - Array of series, where each series is an array of data objects
- * @returns CSV rows with headers and values
- */
-export declare function flattenObjectArrayToCSV<T extends Record<string, unknown>>(data: T[][]): string[][];
-/**
- * Creates CSV rows for scatterplot data.
- * Scatterplot uses array format [x, y] instead of objects.
- *
- * @param data - Array of series, where each series is an array of [x, y] tuples
- * @returns CSV rows with ['x', 'y'] headers
- */
-export declare function scatterplotDataToCSV(data: number[][][]): string[][];

package/dist/types/widgets/utils/chart-config/download-config.d.ts

@@ -1,3 +0,0 @@
-import { DownloadItem } from '../../actions/index.js';
-import { ConfigProps } from '../../loader/types.js';
-export declare function createChartDownloadConfig<TData>(csvModifier: (data: TData) => string[][]): ({ refUI }: ConfigProps) => DownloadItem<TData>[];

package/dist/types/widgets/utils/chart-config/index.d.ts

@@ -1,9 +0,0 @@
-/**
- * Shared utilities for chart widget configuration
- */
-export { defaultFormatter, defaultLabelFormatter } from '../formatter.js';
-export { createChartWidgetConfig } from './config-factory.js';
-export type { ChartWidgetBaseConfig, CreateChartWidgetConfigParams, } from './config-factory.js';
-export { flattenObjectArrayToCSV, scatterplotDataToCSV } from './csv-modifiers.js';
-export { buildLegendConfig, buildGridConfig, buildAxisLabelStyle, createTooltipPositioner, createAxisLabelFormatter, createTooltipFormatter, applyXAxisFormatter, applyYAxisFormatter, niceNum, buildSeriesLabelConfig, buildHistogramSeriesLabelConfig, } from './option-builders.js';
-export { createChartDownloadConfig } from './download-config.js';

package/dist/types/widgets/utils/formatter.d.ts

@@ -1,2 +0,0 @@
-export declare const defaultFormatter: (value: number) => string;
-export declare const defaultLabelFormatter: (value: string | number) => string | number;

package/dist/types/widgets/utils/skeleton/index.d.ts

@@ -1,4 +0,0 @@
-/**
- * Shared skeleton styles for chart widgets
- */
-export { baseSkeletonStyles } from './styles.js';

package/dist/types/widgets/utils/skeleton/styles.d.ts

@@ -1,19 +0,0 @@
-import { Theme } from '@mui/material';
-/**
- * Base skeleton styles shared across all chart widgets
- */
-export declare const baseSkeletonStyles: {
-    readonly graph: {
-        /**
-         * Common container style for chart widget skeletons
-         */
-        readonly container: {
-            readonly display: "flex";
-            readonly alignItems: "center";
-            readonly justifyContent: "space-between";
-            readonly flexDirection: "column";
-            readonly gap: ({ spacing }: Theme) => string;
-            readonly height: ({ spacing }: Theme) => string;
-        };
-    };
-};

package/dist/types/widgets/wrapper/components/actions.d.ts

@@ -1,5 +0,0 @@
-import { WrapperActionsProps } from '../types.js';
-/**
- * Renders action buttons in the widget wrapper header. Each action click event is stopped from propagating to the accordion.
- */
-export declare function Actions({ actions }: WrapperActionsProps): import('react').JSX.Element;

package/dist/types/widgets/wrapper/components/options.d.ts

@@ -1,5 +0,0 @@
-import { WrapperOptionsProps } from '../types.js';
-/**
- * Renders a dropdown options menu in the widget wrapper header, triggered by a vertical ellipsis icon button.
- */
-export declare function Options({ labels, options, }: WrapperOptionsProps): import('react').JSX.Element;

package/dist/types/widgets/wrapper/components/title.d.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from 'react';
-import { WrapperOptionsProps } from '../types.js';
-/**
- * Renders the widget title text inside the wrapper header with smart tooltip support for truncated titles.
- */
-export declare function Title({ label, children, }: {
-    children: ReactNode;
-    label?: NonNullable<WrapperOptionsProps['labels']>['title'];
-}): import('react').JSX.Element;

package/dist/types/widgets/wrapper/styles.d.ts

@@ -1,89 +0,0 @@
-import { Theme } from '@mui/material';
-export declare const styles: {
-    root: {
-        '.Mui-disabled .MuiAccordionSummary-expandIconWrapper': {
-            display: "none";
-        };
-        '.widget-wrapper-actions > *': {
-            opacity: number;
-            transition: ({ transitions }: Theme) => string;
-            '@media (hover: hover)': {
-                opacity: number;
-            };
-            '&:has(.active)': {
-                opacity: number;
-            };
-        };
-        '&:hover': {
-            '& .widget-wrapper-actions > *': {
-                opacity: number;
-            };
-        };
-        '&.collapsed .widget-wrapper-actions > *': {
-            opacity: number;
-            pointerEvents: "none";
-            '&:has(.active)': {
-                opacity: number;
-            };
-        };
-    };
-    summary: {
-        minHeight: ({ spacing }: Theme) => string;
-        '& .MuiAccordionSummary-content': {
-            gap: ({ spacing }: Theme) => string;
-            paddingInlineEnd: ({ spacing }: Theme) => string;
-        };
-    };
-    loading: {
-        height: ({ spacing }: Theme) => string;
-        left: number;
-        position: "absolute";
-        top: number;
-        width: string;
-        zIndex: number;
-    };
-    title: {
-        wrapper: {
-            flexGrow: number;
-            flexShrink: number;
-            minWidth: number;
-            display: "flex";
-            justifyContent: "center";
-            flexDirection: "column";
-        };
-        container: {
-            display: "flex";
-            alignItems: "center";
-            flexGrow: number;
-            minHeight: ({ spacing }: Theme) => string;
-        };
-        text: {
-            wordBreak: "break-word";
-            overflow: "hidden";
-            display: "-webkit-box";
-            WebkitLineClamp: number;
-            WebkitBoxOrient: "vertical";
-        };
-    };
-    actions: {
-        display: "flex";
-        gap: ({ spacing }: Theme) => string;
-        alignItems: "center";
-        flexShrink: number;
-        justifyContent: "flex-end";
-        '& > div': {
-            pointerEvents: "auto";
-        };
-    };
-    options: {
-        trigger: {
-            pointerEvents: "auto";
-        };
-    };
-    detail: {
-        display: "flex";
-        flexDirection: "column";
-        gap: ({ spacing }: Theme) => string;
-        paddingTop: ({ spacing }: Theme) => string;
-    };
-};

package/dist/types/widgets/wrapper/types.d.ts

@@ -1,37 +0,0 @@
-import { ReactNode, SyntheticEvent } from 'react';
-import { SxProps, Theme } from '@mui/material';
-import { BaseWidgetState } from '../stores/types.js';
-export interface WrapperProps extends Pick<WrapperUIProps, 'sx' | 'actions' | 'options' | 'labels' | 'children' | 'onChangeCollapsed'>, Pick<WrapperState, 'disabled' | 'title'> {
-    id: WrapperState['id'];
-    defaultCollapsed?: boolean;
-}
-export type WrapperState<T = unknown> = BaseWidgetState<T & {
-    title: string;
-    disabled?: boolean;
-    collapsed?: boolean;
-    isLoading?: boolean;
-}>;
-export interface WrapperUIProps extends WrapperActionsProps, Omit<WrapperOptionsProps, 'labels' | ''> {
-    id: WrapperState['id'];
-    children: ReactNode;
-    sx?: SxProps<Theme>;
-    labels?: {
-        options?: WrapperOptionsProps['labels'];
-    };
-    onChangeCollapsed?: (event: SyntheticEvent<Element, Event>, collapsed: boolean) => void;
-}
-export interface WrapperActionsProps {
-    actions?: ReactNode[];
-}
-export interface WrapperOptionsProps {
-    labels?: {
-        title: string;
-    };
-    options?: WrapperOption[];
-}
-export interface WrapperOption {
-    label: string;
-    disabled?: boolean;
-    icon?: ReactNode;
-    onClick: () => void;
-}

package/dist/types/widgets/wrapper/wrapper-ui.d.ts

@@ -1,16 +0,0 @@
-import { WrapperUIProps } from './types.js';
-/**
- * Presentational wrapper component that renders the widget accordion UI with title, actions, options menu, and loading indicator. For uncontrolled usage without automatic widget store synchronization, use this instead of WidgetWrapper.
- *
- * @example
- * ```tsx
- * <WrapperUI
- *   id="my-widget"
- *   actions={[<Download key="download" id="my-widget" />]}
- *   onChangeCollapsed={(e, collapsed) => console.log(collapsed)}
- * >
- *   <div>Content</div>
- * </WrapperUI>
- * ```
- */
-export declare function WrapperUI({ children, id, actions, sx, labels, options, onChangeCollapsed, }: WrapperUIProps): import('react').JSX.Element;

package/dist/types/widgets/wrapper/wrapper.d.ts

@@ -1,16 +0,0 @@
-import { WrapperProps } from './types.js';
-/**
- * Container component providing a collapsible header with title, action buttons, and options menu for widgets. Syncs collapse, disabled, and title state with the widget store.
- *
- * @example
- * ```tsx
- * <WidgetWrapper
- *   id="my-widget"
- *   title="Sales Overview"
- *   actions={[<Download key="download" id="my-widget" items={downloads} />]}
- * >
- *   {children}
- * </WidgetWrapper>
- * ```
- */
-export declare function WidgetWrapper({ id, title, defaultCollapsed, disabled, sx, actions, options, labels, children, onChangeCollapsed, }: WrapperProps): import('react').JSX.Element;

package/dist/types/widgets-v2/actions/brush-toggle/brush-toggle.d.ts

@@ -1,56 +0,0 @@
-import { ComponentType } from 'react';
-import { SvgIconProps } from '@mui/material';
-import { BrushToggleLabels } from './labels.js';
-export interface BrushToggleProps {
-    initialEnabled?: boolean;
-    /**
-     * ECharts brush type. `'lineX'` (default) selects a range on the
-     * x-axis — appropriate for bar / histogram / timeseries. `'rect'`
-     * selects a 2-D rectangle — use for scatterplot. Other ECharts
-     * brush types (`'lineY'`, `'polygon'`) are also accepted.
-     */
-    brushType?: 'lineX' | 'lineY' | 'rect' | 'polygon';
-    /**
-     * `'multiple'` (default) lets the user draw additional brushes on
-     * top of existing ones. `'single'` replaces the previous brush on
-     * each new draw.
-     */
-    brushMode?: 'multiple' | 'single';
-    /**
-     * Optional view of the consumer-owned selection. When provided and
-     * the array is empty (`[]`), any brush rectangles currently drawn on
-     * the chart are wiped — keeps the UI in sync when the parent clears
-     * the selection externally (e.g. via `Widget.SelectionSummary`'s
-     * `onClear`). Pass the same array that drives `useChartSelection` /
-     * the option factory's `selection` input.
-     *
-     * Leave `undefined` to opt out — the sync effect becomes a no-op.
-     */
-    selection?: readonly unknown[] | null;
-    labels?: Partial<BrushToggleLabels>;
-    icon?: ComponentType<SvgIconProps>;
-    iconProps?: SvgIconProps;
-}
-/**
- * Toggle ECharts' brush selection mode. Two-part wiring:
- *
- *   1. The config transform (`addBrush`) installs the `brush`
- *      component on the option so brushed items get the
- *      `outOfBrush` dim treatment.
- *   2. ECharts only enters "brush cursor" mode when something
- *      dispatches `takeGlobalCursor({ key: 'brush', ... })`. This
- *      component drives that dispatch via {@link useEchartInstance},
- *      reacting when the chart instance becomes available (the
- *      `BrushToggle` mounts before `Widget.Echart` in tree order, so
- *      on first mount the chart isn't ready yet).
- *
- *   3. ECharts clears the global cursor on every `setOption`, so we
- *      re-dispatch on each `'finished'` event — required for
- *      `brushMode: 'multiple'` to keep working across selection-driven
- *      re-renders, RelativeData toggles, etc.
- *
- * Selection events (`brushSelected` / `brushEnd`) flow through the
- * existing `useChartSelection` wiring at the consumer level — no extra
- * plumbing here.
- */
-export declare function BrushToggle({ initialEnabled, brushType, brushMode, selection, labels, icon: Icon, iconProps, }: BrushToggleProps): import('react').JSX.Element;

package/dist/types/widgets-v2/actions/change-column/change-column-icon.d.ts

@@ -1,2 +0,0 @@
-import { SvgIconProps } from '@mui/material';
-export declare function ChangeColumnIcon(props: SvgIconProps): import('react').JSX.Element;

package/dist/types/widgets-v2/actions/change-column/change-column.d.ts

@@ -1,29 +0,0 @@
-import { ComponentType, ReactNode } from 'react';
-import { SvgIconProps } from '@mui/material';
-import { ChangeColumnLabels } from './labels.js';
-export interface ChangeColumnItem {
-    id: string;
-    label: ReactNode;
-}
-export interface ChangeColumnProps {
-    /**
-     * Master list of columns (id + label) in their default order. The current
-     * effective order is derived by combining this list with the widget's
-     * `columnOrder` extension state.
-     */
-    columns: readonly ChangeColumnItem[];
-    labels?: Partial<ChangeColumnLabels>;
-    icon?: ComponentType<SvgIconProps>;
-    iconProps?: SvgIconProps;
-    dragHandleIcon?: ComponentType<SvgIconProps>;
-}
-/**
- * Action that lets users reorder columns via drag-and-drop. The new order is
- * persisted on the widget store as `columnOrder` (an array of ids) on the
- * {@link ChangeColumnWidgetState} extension. `<Table>` (and other column-aware
- * bridges) merge that order with their own `columns` prop via
- * `resolveColumns()` from the table primitives.
- *
- * Returns `null` when there are fewer than two columns to reorder.
- */
-export declare function ChangeColumn({ columns, labels, icon: Icon, iconProps, dragHandleIcon, }: ChangeColumnProps): import('react').JSX.Element | null;

package/dist/types/widgets-v2/actions/change-column/sortable-column-item.d.ts

@@ -1,14 +0,0 @@
-import { ComponentType, ReactNode } from 'react';
-import { SvgIconProps } from '@mui/material';
-export interface SortableColumnItemProps {
-    id: string;
-    label: ReactNode;
-    dragHandleIcon?: ComponentType<SvgIconProps>;
-}
-/**
- * Draggable menu item used inside ChangeColumn's `<DndContext>`. Wraps a
- * MUI `<MenuItem>` so it inherits keyboard / theming behavior, and exposes
- * the dnd-kit listeners on the whole row so the user can grab anywhere on
- * the row to reorder.
- */
-export declare function SortableColumnItem({ id, label, dragHandleIcon: HandleIcon, }: SortableColumnItemProps): import('react').JSX.Element;

package/dist/types/widgets-v2/actions/change-column/types.d.ts

@@ -1,10 +0,0 @@
-import { WidgetState } from '../../stores/index.js';
-/**
- * State extension owned by the ChangeColumn action. Stored on the per-widget
- * Zustand store; read by `<Table>` (and any other column-aware bridge) to
- * resolve the effective column order.
- */
-export interface ChangeColumnWidgetState extends WidgetState {
-    /** Ordered list of column ids. Empty / unset means "use props order". */
-    columnOrder?: readonly string[];
-}

package/dist/types/widgets-v2/actions/download/download.d.ts

@@ -1,18 +0,0 @@
-import { ComponentType } from 'react';
-import { SvgIconProps } from '@mui/material';
-import { DownloadItem } from './types.js';
-import { DownloadLabels } from './labels.js';
-export interface DownloadProps {
-    items: readonly DownloadItem[];
-    labels?: Partial<DownloadLabels>;
-    icon?: ComponentType<SvgIconProps>;
-    iconProps?: SvgIconProps;
-    /**
-     * Fires when an item's `resolve()` rejects (or any step in the click-through
-     * path throws). The error is normalised to a real `Error` first. Surface
-     * to your telemetry / toast layer here; the trigger already shows a visual
-     * error indicator independently.
-     */
-    onError?: (err: Error) => void;
-}
-export declare function Download({ items, labels, icon: Icon, iconProps, onError, }: DownloadProps): import('react').JSX.Element;

package/dist/types/widgets-v2/actions/download/exports.d.ts

@@ -1,37 +0,0 @@
-/**
- * Pure download helpers — no React, no DOM lifecycle outside the link click.
- * Component layer in {@link ./download.tsx} orchestrates these.
- */
-export interface DownloadHandle {
-    url: string;
-    revoke: () => void;
-}
-export declare function toCsvString(rows: readonly (readonly unknown[])[]): string;
-export declare function downloadToCSV(rows: readonly (readonly unknown[])[]): DownloadHandle;
-export declare function sanitizeFilename(name: string): string;
-/**
- * Triggers a browser download for the given URL by synthesizing an anchor,
- * clicking it, and removing it. Pure DOM — no React. The filename is run
- * through {@link sanitizeFilename} before being assigned to `a.download`.
- */
-export declare function triggerLinkDownload(args: {
-    url: string;
-    filename: string;
-}): void;
-export interface DownloadDOMToPNGOptions {
-    element: HTMLElement;
-    /** html2canvas `scale`. Default 2 — crisp on hi-DPI displays. */
-    pixelRatio?: number;
-    /**
-     * html2canvas `backgroundColor`. Default `null` (transparent) so the PNG
-     * inherits whatever surface it lands on when the user pastes it.
-     */
-    backgroundColor?: string | null;
-}
-/**
- * Rasterise an HTMLElement to PNG via `html2canvas` and wrap the result in
- * a `DownloadHandle`. The caller is responsible for calling `handle.revoke`
- * after the link click is dispatched. Used by per-widget download configs
- * to power the PNG menu item.
- */
-export declare function downloadDOMToPNG(opts: DownloadDOMToPNGOptions): Promise<DownloadHandle>;