@datalayer/core 0.0.1 → 0.0.3

package/lib/components/runtimes/RuntimeSimplePicker.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { KernelIndicator } from '@datalayer/jupyter-react';
+import { ISanitizer } from '@jupyterlab/apputils';
+import { IMarkdownParser } from '@jupyterlab/rendermime';
+import { ActionList, ActionMenu, Box, Button, Tooltip } from '@primer/react';
+import { CloudIcon, EyeIcon, UnfoldIcon } from '@primer/octicons-react';
+import { BrowserIcon, PlusIcon } from '@datalayer/icons-react';
+import { ArtifactIcon } from '../../components/icons';
+import { KernelLauncherDialog } from '../../components/runtimes';
+import { useRuntimesStore } from '../../state';
+/**
+ * Cause to open the new runtime dialog.
+ */
+var RuntimeDialogCause;
+(function (RuntimeDialogCause) {
+    /**
+     * Don't open.
+     */
+    RuntimeDialogCause[RuntimeDialogCause["None"] = 0] = "None";
+    /**
+     * Launch a new Remote Runtime.
+     */
+    RuntimeDialogCause[RuntimeDialogCause["New"] = 1] = "New";
+    /**
+     * Transfer the state from the current Runtime to a new Remote Runtime.
+     */
+    RuntimeDialogCause[RuntimeDialogCause["Transfer"] = 2] = "Transfer";
+})(RuntimeDialogCause || (RuntimeDialogCause = {}));
+/**
+ * Runtime simple picker component.
+ */
+export function RuntimeSimplePicker(props) {
+    const { assignRuntime, sessionConnection } = props;
+    const { runtimeModels, multiServiceManager, jupyterLabAdapter } = useRuntimesStore();
+    const [runtimeLocation, setRuntimeLocation] = useState();
+    const [luminoServices, setLuminoServices] = useState({});
+    const [dialogCause, setDialogCause] = useState(RuntimeDialogCause.None);
+    const [status, setStatus] = useState('');
+    useEffect(() => {
+        if (sessionConnection) {
+            function onStatusChanged(connection) {
+                setStatus(`Runtime ${connection.kernel?.connectionStatus} - Status: ${connection.kernel?.status}`);
+            }
+            onStatusChanged(sessionConnection);
+            sessionConnection?.statusChanged.connect(onStatusChanged);
+            sessionConnection?.connectionStatusChanged.connect(onStatusChanged);
+            return () => {
+                sessionConnection?.statusChanged.disconnect(onStatusChanged);
+                sessionConnection?.connectionStatusChanged.disconnect(onStatusChanged);
+            };
+        }
+        else {
+            setStatus('No kernel');
+        }
+    }, [sessionConnection]);
+    const refreshRemoteKernels = useCallback(async () => {
+        if (multiServiceManager?.remote?.runtimesManager) {
+            await multiServiceManager.remote.runtimesManager.refresh();
+        }
+    }, [multiServiceManager?.remote?.runtimesManager]);
+    const handleLaunchRemoteKernel = useCallback(() => {
+        setDialogCause(RuntimeDialogCause.New);
+    }, []);
+    const handleCloseDialog = useCallback((runtimeDesc) => {
+        if (runtimeDesc) {
+            switch (dialogCause) {
+                case RuntimeDialogCause.New:
+                    refreshRemoteKernels().then(() => {
+                        setRuntimeLocation('remote');
+                        assignRuntime({
+                            runtimeDesc,
+                            runtimeModel: multiServiceManager?.remote?.runtimesManager
+                                .get()
+                                .find(model => model.id === runtimeDesc.kernelId)
+                        });
+                    });
+                    break;
+                case RuntimeDialogCause.Transfer:
+                    setRuntimeLocation('remote');
+                    assignRuntime({ runtimeDesc, transferState: true });
+                    break;
+            }
+        }
+        setDialogCause(RuntimeDialogCause.None);
+    }, [refreshRemoteKernels, multiServiceManager?.remote, dialogCause]);
+    useEffect(() => {
+        if (jupyterLabAdapter) {
+            Promise.all([
+                jupyterLabAdapter.jupyterLab.resolveOptionalService(IMarkdownParser),
+                jupyterLabAdapter.jupyterLab.resolveOptionalService(ISanitizer)
+            ]).then(services => {
+                setLuminoServices({
+                    [IMarkdownParser.name]: services[0],
+                    [ISanitizer.name]: services[1]
+                });
+            });
+        }
+        else {
+            setLuminoServices({});
+        }
+    }, [jupyterLabAdapter]);
+    return (_jsxs(_Fragment, { children: [_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { leadingVisual: () => {
+                            switch (runtimeLocation) {
+                                case 'browser':
+                                    return _jsx(BrowserIcon, {});
+                                case 'remote':
+                                    return _jsx(CloudIcon, {});
+                                case undefined:
+                                    return _jsx(EyeIcon, {});
+                            }
+                            return _jsx(ArtifactIcon, { type: "runtime" });
+                        }, trailingVisual: () => sessionConnection
+                            ?
+                                _jsx(Box, { sx: { paddingTop: '5px' }, children: _jsx(KernelIndicator, { kernel: sessionConnection.kernel }) })
+                            :
+                                _jsx(_Fragment, {}), size: "small", variant: "invisible", children: _jsx(Tooltip, { text: status, direction: "s", children: _jsx(Button, { variant: "invisible", size: "small", children: sessionConnection?.kernel?.name ?? 'Runtimes' }) }) }), _jsx(ActionMenu.Overlay, { width: "medium", children: _jsxs(ActionList, { selectionVariant: "single", showDividers: true, children: [_jsxs(ActionList.Group, { children: [_jsxs(ActionList.Item, { selected: runtimeLocation === undefined && sessionConnection === undefined, onSelect: () => {
+                                                setRuntimeLocation(undefined);
+                                                assignRuntime({ runtimeDesc: undefined });
+                                            }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(EyeIcon, {}) }), "Viewer", _jsx(ActionList.Description, { variant: "block", children: "A simple Notebook Viewer without Runtime." })] }), _jsxs(ActionList.Item, { selected: runtimeLocation === 'browser', onSelect: () => {
+                                                setRuntimeLocation('browser');
+                                                assignRuntime({
+                                                    runtimeDesc: {
+                                                        name: 'pyodide',
+                                                        location: 'browser',
+                                                        language: 'python'
+                                                    }
+                                                });
+                                            }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(BrowserIcon, {}) }), "Browser Runtime", _jsx(ActionList.Description, { variant: "block", children: "A Browser Runtime based on Pyodide." })] })] }), runtimeModels.length > 0 && (_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Cloud Runtimes" }), runtimeModels.map(kernelModel => {
+                                            return (_jsxs(ActionList.Item, { selected: sessionConnection?.kernel?.id === kernelModel.id, onSelect: () => {
+                                                    setRuntimeLocation('remote');
+                                                    assignRuntime({
+                                                        runtimeDesc: {
+                                                            name: kernelModel.environment_name,
+                                                            language: '',
+                                                            location: 'remote',
+                                                            displayName: kernelModel.given_name,
+                                                            kernelId: kernelModel.id,
+                                                            burningRate: kernelModel.burning_rate,
+                                                            podName: kernelModel.pod_name
+                                                        },
+                                                        runtimeModel: kernelModel
+                                                    });
+                                                }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(ArtifactIcon, { type: "runtime" }) }), kernelModel.given_name, _jsx(ActionList.Description, { variant: "block", children: kernelModel.environment_name })] }, kernelModel.id));
+                                        })] })), _jsx(ActionList.Divider, {}), _jsxs(ActionList.Group, { children: [_jsxs(ActionList.Item, { selected: false, onSelect: handleLaunchRemoteKernel, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PlusIcon, {}) }), "Launch a new Runtime\u2026"] }), _jsxs(ActionList.Item, { disabled: runtimeLocation !== 'browser', selected: false, onSelect: () => {
+                                                setDialogCause(RuntimeDialogCause.Transfer);
+                                            }, title: "Transfer the state of the current Runtime to a new Remote Runtime.", children: [_jsx(ActionList.LeadingVisual, { children: _jsx(UnfoldIcon, {}) }), "Transfer state to a new Runtime\u2026"] })] })] }) })] }), multiServiceManager?.remote && dialogCause > 0 && (_jsx(KernelLauncherDialog, { dialogTitle: dialogCause === RuntimeDialogCause.Transfer
+                    ? 'Switch to a new Cloud Runtime'
+                    : undefined, manager: multiServiceManager.remote, onSubmit: handleCloseDialog, markdownParser: luminoServices[IMarkdownParser.name], sanitizer: luminoServices[ISanitizer.name], startKernel: dialogCause === RuntimeDialogCause.Transfer
+                    ? 'defer'
+                    : dialogCause === RuntimeDialogCause.New }))] }));
+}

package/lib/components/runtimes/RuntimeTransfer.d.ts

@@ -0,0 +1,16 @@
+import { type IRuntimeOptions } from '../../api';
+export interface RuntimeTransfer {
+    /**
+     * Selected Kernel.
+     */
+    kernel: Partial<Omit<IRuntimeOptions, 'kernelType'> & {
+        id: string;
+    }> | null;
+    /**
+     * List of selected variables
+     *
+     * It may differ with the serialized variables if
+     * some serialization failed.
+     */
+    selectedVariables: string[];
+}

package/lib/components/runtimes/RuntimeTransfer.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export {};

package/lib/components/runtimes/RuntimeUtils.d.ts

@@ -0,0 +1,17 @@
+import { SessionContext } from '@jupyterlab/apputils';
+import { ITranslator } from '@jupyterlab/translation';
+import { IMultiServiceManager } from '../../api';
+import { IRuntimeDesc } from '../../models';
+export type IDatalayerRuntimeDesc = IRuntimeDesc & {
+    gpu?: string;
+};
+/**
+ * Create the grouped runtime descriptions.
+ */
+export declare function getGroupedRuntimeDescs(multiServiceManager: IMultiServiceManager, kernelId?: string, translator?: ITranslator, filterKernels?: (desc: IDatalayerRuntimeDesc) => boolean, variant?: 'document' | 'cell'): {
+    [g: string]: IDatalayerRuntimeDesc[];
+} | undefined;
+/**
+ * Get the default kernel name given a selector.
+ */
+export declare function getDefaultKernelName(selector: SessionContext.IKernelSearch): string | null;

package/lib/components/runtimes/RuntimeUtils.js

@@ -0,0 +1,168 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { PathExt } from '@jupyterlab/coreutils';
+import { nullTranslator } from '@jupyterlab/translation';
+const ASSIGN_NEW_RUNTIME_LABEL = 'Assign a new Runtime';
+const ASSIGN_EXISTING_REMOTE_RUNTIME_LABEL = 'Assign an existing Remote Runtime';
+const ASSIGN_EXISTING_RUNTIME_LABEL = 'Assign an existing Runtime';
+/**
+ * Create the grouped runtime descriptions.
+ */
+export function getGroupedRuntimeDescs(multiServiceManager, kernelId, translator, filterKernels = () => true, variant) {
+    translator = translator ?? nullTranslator;
+    const trans = translator.load('jupyterlab');
+    const specs = multiServiceManager.local.kernelspecs.specs;
+    const sessions = multiServiceManager.local.sessions.running();
+    const kernels = {};
+    // Add the sessions.
+    const runningSessions = Array.from(sessions)
+        .filter(session => session.kernel &&
+        session.kernel.id !== kernelId &&
+        specs.kernelspecs[session.kernel.name])
+        .map(session => {
+        const spec = specs.kernelspecs[session.kernel.name];
+        return {
+            kernelId: session.kernel.id,
+            name: spec.name,
+            language: spec.language,
+            displayName: session.name || PathExt.basename(session.path),
+            location: 'local',
+        };
+    })
+        .concat(Array.from(multiServiceManager.browser?.sessions.running() ?? [])
+        .filter(session => session.kernel && session.kernel.id !== kernelId)
+        .map(session => {
+        const spec = multiServiceManager.browser.kernelspecs.specs.kernelspecs[session.kernel.name];
+        return {
+            id: "", // TODO Assign a proper ID.
+            kernelId: session.kernel.id,
+            name: spec.name,
+            language: spec.language,
+            displayName: session.name || PathExt.basename(session.path),
+            location: 'browser',
+        };
+    }))
+        .filter(filterKernels);
+    // Add the running runtimes.
+    const listedAsSession = runningSessions.map(s => s.kernelId);
+    const runningKernels = Array.from(multiServiceManager.local.kernels.running())
+        .filter(k => !listedAsSession.includes(k.id))
+        .map(k => {
+        const spec = specs.kernelspecs[k.name];
+        return {
+            kernelId: k.id,
+            name: spec.name,
+            language: spec.language,
+            displayName: spec.display_name,
+            location: 'local',
+        };
+    })
+        .concat((multiServiceManager.remote?.runtimesManager.get() ?? [])
+        .filter(k => k.id && !listedAsSession.includes(k.id))
+        .map(runtime => {
+        const environment = multiServiceManager.remote.environments.get().find(env => env.name === runtime.environment_name);
+        return {
+            kernelId: runtime.id,
+            name: environment.name,
+            language: environment.language,
+            displayName: runtime.given_name ?? environment.title,
+            location: 'remote',
+            podName: runtime.pod_name,
+            gpu: environment.resources?.['nvidia.com/gpu'],
+        };
+    }))
+        .concat(Array.from(multiServiceManager.browser?.kernels.running() ?? [])
+        .filter(k => !listedAsSession.includes(k.id))
+        .map(k => {
+        const spec = multiServiceManager.browser.kernelspecs.specs.kernelspecs[k.name];
+        return {
+            kernelId: k.id,
+            name: spec.name,
+            language: spec.language,
+            displayName: spec.display_name,
+            location: 'browser'
+        };
+    }))
+        .filter(filterKernels);
+    runningSessions.push(...runningKernels);
+    if (runningSessions.length) {
+        const key = (variant === 'cell') ?
+            ASSIGN_EXISTING_REMOTE_RUNTIME_LABEL
+            :
+                ASSIGN_EXISTING_RUNTIME_LABEL;
+        kernels[key] = runningSessions;
+    }
+    // Environments.
+    const environments = Object.values(specs.kernelspecs)
+        .filter(spec => !!spec)
+        .map(spec => ({
+        name: spec.name,
+        language: spec.language,
+        displayName: spec.display_name,
+        gpu: spec.resources?.['nvidia.com/gpu'],
+        location: 'local',
+    }))
+        .filter(filterKernels);
+    environments.push(...(multiServiceManager.remote?.environments
+        .get()
+        .map(spec => ({
+        name: spec.name,
+        language: spec.language,
+        displayName: spec.title,
+        location: 'remote',
+        gpu: spec.resources?.['nvidia.com/gpu'],
+        burningRate: spec.burning_rate
+    }))
+        .filter(filterKernels) ?? []));
+    environments.push(...Object.values(multiServiceManager.browser?.kernelspecs.specs?.kernelspecs ?? {}).filter(spec => !!spec).map(spec => ({
+        name: spec.name,
+        language: spec.language,
+        displayName: spec.display_name,
+        location: 'browser'
+    })).filter(filterKernels));
+    if (environments.length) {
+        kernels[trans.__(ASSIGN_NEW_RUNTIME_LABEL)] = environments;
+    }
+    return kernels;
+}
+/**
+ * Get the default kernel name given a selector.
+ */
+export function getDefaultKernelName(selector) {
+    const { specs, preference } = selector;
+    const { name, language, canStart, autoStartDefault } = preference;
+    if (!specs || canStart === false) {
+        return null;
+    }
+    const defaultName = autoStartDefault ? specs.default : null;
+    if (!name && !language) {
+        return defaultName;
+    }
+    // Look for an exact match of a spec name.
+    for (const specName in specs.kernelspecs) {
+        if (specName === name) {
+            return name;
+        }
+    }
+    // Bail if there is no language.
+    if (!language) {
+        return defaultName;
+    }
+    // Check for a single kernel matching the language.
+    const matches = [];
+    for (const specName in specs.kernelspecs) {
+        const kernelLanguage = specs.kernelspecs[specName]?.language;
+        if (language === kernelLanguage) {
+            matches.push(specName);
+        }
+    }
+    if (matches.length === 1) {
+        const specName = matches[0];
+        console.warn('No exact match found for ' + specName + ', using runtime ' + specName + ' that matches ' + 'language=' + language);
+        return specName;
+    }
+    // No matches found.
+    return defaultName;
+}

package/lib/components/runtimes/RuntimeVariables.d.ts

@@ -0,0 +1,38 @@
+import { ReactElement } from 'react';
+import { ITranslator } from '@jupyterlab/translation';
+/**
+ * {@link RuntimeVariables} properties
+ */
+export interface IRuntimeVariablesProps {
+    /**
+     * Component class name
+     */
+    className?: string;
+    /**
+     * Available kernel variables
+     *
+     * Mapping (variable name, variable type)
+     */
+    kernelVariables?: {
+        [name: string]: string;
+    };
+    /**
+     * Kernel variables to be transferred.
+     */
+    selectedVariables: string[];
+    setSelectVariable: (l: string[]) => void;
+    /**
+     * Whether to transfer the variable from the current
+     * to the selected kernel or not.
+     */
+    transferVariables: boolean;
+    setTransferVariable: (v: boolean) => void;
+    /**
+     * Application translator
+     */
+    translator?: ITranslator;
+}
+/**
+ * Runtime variables selector component.
+ */
+export declare function RuntimeVariables(props: IRuntimeVariablesProps): ReactElement;

package/lib/components/runtimes/RuntimeVariables.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useMemo } from 'react';
+import { IconButton, ToggleSwitch, FormControl } from '@primer/react';
+import { Box } from "@datalayer/primer-addons";
+import { Blankslate, DataTable, Table } from '@primer/react/experimental';
+import { nullTranslator } from '@jupyterlab/translation';
+import { checkIcon } from '@jupyterlab/ui-components';
+/**
+ * Runtime variables selector component.
+ */
+export function RuntimeVariables(props) {
+    const { className, translator, selectedVariables, setSelectVariable, transferVariables, setTransferVariable, kernelVariables } = props;
+    const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
+    const nRows = Object.keys(kernelVariables ?? {}).length;
+    // Sorting and actions does not play nice together :'(
+    const columns = [
+        {
+            header: trans.__('Name'),
+            field: 'name',
+            rowHeader: true
+        },
+        {
+            header: trans.__('Type'),
+            field: 'type'
+        },
+        {
+            id: 'select',
+            maxWidth: '70px',
+            header: () => (_jsx(IconButton, { "aria-label": selectedVariables.length === nRows
+                    ? trans.__('Deselect all')
+                    : trans.__('Select all'), title: selectedVariables.length === nRows
+                    ? trans.__('Deselect all')
+                    : trans.__('Select all'), icon: selectedVariables.length === nRows
+                    ? checkIcon.react
+                    : () => _jsx("span", {}), variant: "default", size: "small", onClick: e => {
+                    e.preventDefault();
+                    if (selectedVariables.length === nRows) {
+                        setSelectVariable([]);
+                    }
+                    else {
+                        setSelectVariable(Object.keys(kernelVariables ?? {}));
+                    }
+                } })),
+            renderCell: (row) => {
+                const isSelected = selectedVariables.includes(row.name);
+                return (_jsx(IconButton, { "aria-label": isSelected
+                        ? trans.__('Deselect: %1', row.name)
+                        : trans.__('Select: %1', row.name), title: isSelected
+                        ? trans.__('Deselect: %1', row.name)
+                        : trans.__('Select: %1', row.name), icon: isSelected ? checkIcon.react : () => _jsx("span", {}), variant: "default", size: "small", onClick: e => {
+                        e.preventDefault();
+                        const index = selectedVariables.findIndex(v => v === row.name);
+                        if (index >= 0) {
+                            const copy = [...selectedVariables];
+                            copy.splice(index, 1);
+                            setSelectVariable(copy);
+                        }
+                        else {
+                            setSelectVariable([...selectedVariables, row.name]);
+                        }
+                    } }));
+            }
+        }
+    ];
+    return (_jsxs(Box, { className: className, sx: { paddingTop: "10px" }, children: [_jsxs(FormControl, { layout: "horizontal", children: [_jsx(FormControl.Label, { children: trans.__('Transfer variables') }), _jsx(ToggleSwitch, { checked: transferVariables, size: "small", onClick: (e) => {
+                            e.preventDefault();
+                            setTransferVariable(!transferVariables);
+                        }, "aria-labelledby": "kernel-toggle-variables" })] }), transferVariables && (_jsxs(Table.Container, { sx: { flex: '1 1 auto', marginTop: 3 }, children: [_jsx(Table.Subtitle, { as: "p", id: "dla-kernel-variables-subtitle", children: trans.__('The list of transferable runtime variables.') }), kernelVariables ? (Object.keys(kernelVariables ?? {}).length ? (_jsx(DataTable, { "aria-labelledby": "dla-kernel-variables", "aria-describedby": "dla-kernel-variables-subtitle", data: Object.entries(kernelVariables ?? {})
+                            .map(([name, type], id) => ({ id, name, type }))
+                            .sort((a, b) => (a.name > b.name ? 1 : -1)), columns: columns, cellPadding: "condensed" })) : (_jsx(Box, { sx: { gridArea: 'table' }, children: _jsx(Blankslate, { border: true, children: _jsx(Blankslate.Heading, { children: trans.__('No eligible variables.') }) }) }))) : (_jsx(Table.Skeleton, { "aria-labelledby": "dla-kernel-variables", "aria-describedby": "dla-kernel-variables-subtitle", columns: columns, rows: 5 }))] }))] }));
+}

package/lib/components/runtimes/index.d.ts

@@ -0,0 +1,11 @@
+export * from './RuntimeCellVariables';
+export * from './RuntimeCellVariablesDialog';
+export * from './RuntimeLauncherDialog';
+export * from './RuntimePickerBase';
+export * from './RuntimePickerCell';
+export * from './RuntimePickerNotebook';
+export * from './RuntimeReservationControl';
+export * from './RuntimeSimplePicker';
+export * from './RuntimeTransfer';
+export * from './RuntimeUtils';
+export * from './RuntimeVariables';

package/lib/components/runtimes/index.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './RuntimeCellVariables';
+export * from './RuntimeCellVariablesDialog';
+export * from './RuntimeLauncherDialog';
+export * from './RuntimePickerBase';
+export * from './RuntimePickerCell';
+export * from './RuntimePickerNotebook';
+export * from './RuntimeReservationControl';
+export * from './RuntimeSimplePicker';
+export * from './RuntimeTransfer';
+export * from './RuntimeUtils';
+export * from './RuntimeVariables';

package/lib/components/screenshot/ScreenCapture.d.ts

@@ -0,0 +1,38 @@
+import { Component, CSSProperties } from 'react';
+type ScreenCaptureProps = {
+    children: any;
+    onStartCapture?: () => void;
+    onEndCapture: (url: string) => void;
+};
+type ScreenCaptureState = {
+    on: boolean;
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+    crossHairsTop: number;
+    crossHairsLeft: number;
+    isMouseDown: boolean;
+    windowWidth: number;
+    windowHeight: number;
+    borderWidth: number | string | CSSProperties;
+    cropPositionTop: number;
+    cropPositionLeft: number;
+    cropWidth: number;
+    cropHeigth: number;
+    imageURL: string;
+};
+export declare class ScreenCapture extends Component<ScreenCaptureProps, ScreenCaptureState> {
+    state: ScreenCaptureState;
+    handleWindowResize: () => void;
+    componentDidMount: () => void;
+    componentWillUnmount: () => void;
+    handStartCapture: () => void;
+    handleMouseMove: (e: any) => void;
+    handleMouseDown: (e: any) => void;
+    handleMouseUp: () => void;
+    handleClickTakeScreenShot: () => void;
+    renderChild: () => any;
+    render(): any;
+}
+export default ScreenCapture;