@datalayer/core 0.0.1 → 0.0.3

package/lib/theme/DatalayerTheme.d.ts

@@ -0,0 +1,37 @@
+declare const theme: {
+    animation: {
+        easeOutCubic: string;
+    };
+    borderWidths: (string | number)[];
+    breakpoints: string[];
+    fonts: {
+        normal: any;
+        mono: string;
+    };
+    fontSizes: string[];
+    fontWeights: {
+        light: number;
+        normal: number;
+        semibold: number;
+        bold: number;
+    };
+    lineHeights: {
+        condensedUltra: number;
+        condensed: number;
+        default: number;
+    };
+    radii: string[];
+    sizes: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    space: string[];
+} & {
+    colorSchemes: {
+        light: {};
+        dark: {};
+    };
+};
+export { theme as datalayerTheme };

package/lib/theme/DatalayerTheme.js

@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { theme as primerTheme } from '@primer/react';
+import cloneDeep from 'lodash/cloneDeep.js';
+import merge from 'lodash/merge.js';
+/**
+ * Datalayer Theme for Primer React.
+ */
+const datalayerThemeDefs = {
+    colorSchemes: {
+        light: {
+            colors: {
+                btn: {
+                    //          text: 'var(--jp-ui-font-color1, rgba(0, 0, 0, 0.87))',
+                    //          bg: 'var(--jp-layout-color1, white)',
+                    //          border: 'var(--jp-border-color1, #bdbdbd)',
+                    //          hoverBg: 'var(--jp-layout-color2, #eee)',
+                    //          hoverBorder: 'var(--jp-border-color1, #bdbdbd)',
+                    //          activeBg: 'var(--jp-layout-color3, #bdbdbd)',
+                    //          activeBorder: 'var(--jp-border-color1, #bdbdbd)',
+                    //          selectedBg: 'var(--jp-layout-color0, white)',
+                    //          counterBg: 'var(--jp-layout-color4, #757575)',
+                    primary: {
+                        //            text: 'var(--jp-ui-inverse-font-color1, rgba(255, 255, 255, 1))',
+                        bg: 'var(--dla-color-green-dark)',
+                        //            border: 'var(--dla-color-green-light)',
+                        hoverBg: 'var(--dla-color-grey)',
+                        //            hoverBorder: 'var(--dla-color-green-light)',
+                        selectedBg: 'var(--dla-color-black)',
+                        //            disabledText: 'var(--jp-ui-inverse-font-color2, rgba(255, 255, 255, 0.7))',
+                        //            disabledBg: 'var(--jp-brand-color3, #c8e6c9)',
+                        //            disabledBorder: 'var(--jp-border-color1, #bdbdbd)',
+                        //            icon: 'var(--jp-ui-inverse-font-color2, rgba(255, 255, 255, 0.7))',
+                        //            counterBg: 'var(--jp-inverse-layout-color3, #616161)',
+                    },
+                },
+            },
+            shadows: {},
+        },
+        dark: {
+            colors: {},
+            shadows: {},
+        }
+    },
+};
+const { colorSchemes: primerSchemes, ...primerOthers } = cloneDeep(primerTheme);
+const { colorSchemes: jupyterSchemes, ...datalayerOthers } = datalayerThemeDefs;
+// Merge with the light theme to ensure all variables are defined (although the style may be ugly).
+const theme = merge(primerOthers, datalayerOthers, {
+    colorSchemes: { light: {}, dark: {} },
+});
+theme.colorSchemes.light = {
+    colors: merge(primerSchemes.light.colors, jupyterSchemes.light.colors),
+    shadows: merge(primerSchemes.light.shadows, jupyterSchemes.light.shadows),
+};
+theme.colorSchemes.dark = {
+    colors: merge(primerSchemes.dark.colors, jupyterSchemes.dark.colors),
+    shadows: merge(primerSchemes.dark.shadows, jupyterSchemes.dark.shadows),
+};
+export { theme as datalayerTheme };

package/lib/theme/DatalayerThemeProvider.d.ts

@@ -0,0 +1,17 @@
+import { type CSSProperties } from 'react';
+import { ThemeProviderProps } from '@primer/react';
+export interface IDatalayerThemeProviderProps extends ThemeProviderProps {
+    /**
+     * Whether the components is embedded in Jupyter UI or not.
+     */
+    inJupyterLab?: boolean;
+    /**
+     * Base styles
+     */
+    baseStyles?: CSSProperties;
+}
+/**
+ * ThemeProvider component changing color mode with JupyterLab theme
+ * if embedded in Jupyter or with the browser color scheme preference.
+ */
+export declare function DatalayerThemeProvider(props: React.PropsWithChildren<IDatalayerThemeProviderProps>): JSX.Element;

package/lib/theme/DatalayerThemeProvider.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect, useState } from 'react';
+import { BaseStyles, ThemeProvider as PrimerThemeProvider } from '@primer/react';
+import { loadJupyterConfig, jupyterLabTheme } from '@datalayer/jupyter-react';
+import { datalayerTheme } from '../theme';
+import { useRuntimesStore } from '../state';
+/**
+ * ThemeProvider component changing color mode with JupyterLab theme
+ * if embedded in Jupyter or with the browser color scheme preference.
+ */
+export function DatalayerThemeProvider(props) {
+    const { children, colorMode: colorModeProps, 
+    //    inJupyterLab,
+    baseStyles, ...rest } = props;
+    const { jupyterLabAdapter } = useRuntimesStore();
+    const [colorMode, setColorMode] = useState(colorModeProps ?? 'light');
+    const [inJupyterLab, setInJupterLab] = useState(undefined);
+    useEffect(() => {
+        setInJupterLab(loadJupyterConfig().insideJupyterLab);
+    }, []);
+    useEffect(() => {
+        if (inJupyterLab !== undefined) {
+            function colorSchemeFromMedia({ matches }) {
+                setColorMode(matches ? 'dark' : 'light');
+            }
+            function updateColorMode(themeManager) {
+                setColorMode(themeManager.theme && !themeManager.isLight(themeManager.theme) ? 'dark' : 'light');
+            }
+            if (inJupyterLab) {
+                // TODO remove the try/catch for JupyterLab > 4.1.
+                try {
+                    const themeManager = jupyterLabAdapter?.service('@jupyterlab/apputils-extension:themes');
+                    if (themeManager) {
+                        updateColorMode(themeManager);
+                        themeManager.themeChanged.connect(updateColorMode);
+                        return () => {
+                            themeManager.themeChanged.disconnect(updateColorMode);
+                        };
+                    }
+                }
+                catch (e) {
+                    console.error('Error while setting the theme', e);
+                }
+            }
+            else {
+                colorSchemeFromMedia({
+                    matches: window.matchMedia('(prefers-color-scheme: dark)').matches
+                });
+                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', colorSchemeFromMedia);
+                return () => {
+                    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', colorSchemeFromMedia);
+                };
+            }
+        }
+    }, [inJupyterLab, jupyterLabAdapter]);
+    return (inJupyterLab !== undefined ?
+        _jsx(PrimerThemeProvider, { colorMode: colorMode, theme: inJupyterLab ? jupyterLabTheme : datalayerTheme, ...rest, children: _jsx(BaseStyles, { style: {
+                    backgroundColor: 'var(--bgColor-default)',
+                    color: 'var(--fgColor-default)',
+                    fontSize: 'var(--text-body-size-medium)',
+                    ...baseStyles
+                }, children: children }) })
+        :
+            _jsx(_Fragment, {}));
+}

package/lib/theme/Palette.d.ts

@@ -0,0 +1,5 @@
+export declare const jpCssToColor: (cssVariableName: string) => any;
+export declare const RESERVATION_CIRCLE_COLOR = "#656D76";
+export declare const CREDITS_CIRCLE_COLOR = "#16A085";
+export declare const JOINED_INVITE_COLOR = "#0366d6";
+export declare const PENDING_INVITE_COLOR = "#cfd3d7";

package/lib/theme/Palette.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+const JUPYTERLAB_COLLABORATORS_COLORS = {
+    '--jp-collaborator-color1': '#ffad8e',
+    '--jp-collaborator-color2': '#dac83d',
+    '--jp-collaborator-color3': '#72dd76',
+    '--jp-collaborator-color4': '#00e4d0',
+    '--jp-collaborator-color5': '#45d4ff',
+    '--jp-collaborator-color6': '#e2b1ff',
+    '--jp-collaborator-color7': '#ff9de6'
+};
+export const jpCssToColor = (cssVariableName) => {
+    return JUPYTERLAB_COLLABORATORS_COLORS[cssVariableName.replaceAll('var(', '').replaceAll(')', '')];
+};
+// export const RESERVATION_CIRCLE_COLOR_VAR = '--data-yellow-color';
+export const RESERVATION_CIRCLE_COLOR = '#656D76';
+// export const CREDITS_CIRCLE_COLOR_VAR = '--data-blue-color';
+export const CREDITS_CIRCLE_COLOR = '#16A085';
+export const JOINED_INVITE_COLOR = '#0366d6';
+export const PENDING_INVITE_COLOR = '#cfd3d7';

package/lib/theme/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DatalayerTheme';
+export * from './DatalayerThemeProvider';
+export * from './Palette';

package/lib/theme/index.js

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './DatalayerTheme';
+export * from './DatalayerThemeProvider';
+export * from './Palette';

package/lib/utils/Array.d.ts

@@ -0,0 +1,2 @@
+export declare const asArray: (obj: any) => any[];
+export declare const shuffleArray: (array: Array<any>) => void;

package/lib/utils/Array.js

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export const asArray = (obj) => {
+    if (Array.isArray(obj)) {
+        return obj;
+    }
+    return [obj];
+};
+export const shuffleArray = (array) => {
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+    }
+};

package/lib/utils/Avatar.d.ts

@@ -0,0 +1,9 @@
+export declare const DEFAULT_AVATAR_URL = "https://avatars.githubusercontent.com/u/70511875?s=200&v=4";
+export declare const DEFAULT_AVATAR_URL_ENCODED: string;
+export declare function stringAvatar(name: string): {
+    sx: {
+        bgcolor: string;
+    };
+    children: string;
+};
+export declare function getAvatarURL(url?: string): string;

package/lib/utils/Avatar.js

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export const DEFAULT_AVATAR_URL = 'https://avatars.githubusercontent.com/u/70511875?s=200&v=4';
+export const DEFAULT_AVATAR_URL_ENCODED = encodeURIComponent(DEFAULT_AVATAR_URL);
+function stringToColor(string) {
+    let hash = 0;
+    let i;
+    for (i = 0; i < string.length; i += 1) {
+        hash = string.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    let color = '#';
+    for (i = 0; i < 3; i += 1) {
+        const value = (hash >> (i * 8)) & 0xff;
+        color += `00${value.toString(16)}`.substr(-2);
+    }
+    return color;
+}
+export function stringAvatar(name) {
+    return {
+        sx: {
+            bgcolor: stringToColor(name),
+        },
+        children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
+    };
+}
+export function getAvatarURL(url) {
+    return url ?
+        url.startsWith('https://www.gravatar.com/avatar')
+            ? `${url}?v=4&s=200&d=${DEFAULT_AVATAR_URL_ENCODED}` // Use gravatar syntax - sizing works for Gravatar and GitHub
+            : url
+        : DEFAULT_AVATAR_URL; // This fallback should barely be used - hence we allow decoding the URI.
+}

package/lib/utils/Browser.d.ts

@@ -0,0 +1,3 @@
+export declare const detectBrowser: () => any;
+export declare function getBrowserType(): "Opera" | "Microsoft Edge" | "Google Chrome" | "Mozilla Firefox" | "Apple Safari" | "Microsoft Internet Explorer" | "UC Browser" | "Samsung Browser" | "Unknown browser";
+export default detectBrowser;

package/lib/utils/Browser.js

@@ -0,0 +1,63 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+// https://stackoverflow.com/questions/49328382/browser-detection-in-reactjs
+// https://codepedia.info/detect-browser-in-javascript
+export const detectBrowser = () => {
+    const userAgent = navigator.userAgent;
+    let browserName;
+    if (userAgent.match(/chrome|chromium|crios/i)) {
+        browserName = "chrome";
+    }
+    else if (userAgent.match(/firefox|fxios/i)) {
+        browserName = "firefox";
+    }
+    else if (userAgent.match(/safari/i)) {
+        browserName = "safari";
+    }
+    else if (userAgent.match(/opr\//i)) {
+        browserName = "opera";
+    }
+    else if (userAgent.match(/edg/i)) {
+        browserName = "edge";
+    }
+    else {
+        browserName = "Unknow browser.";
+    }
+    return browserName;
+};
+// TODO Is this a duplicate of detectBrowser ?
+export function getBrowserType() {
+    const test = (regexp) => {
+        return regexp.test(navigator.userAgent);
+    };
+    if (test(/opr\//i)) {
+        return 'Opera';
+    }
+    else if (test(/edg/i)) {
+        return 'Microsoft Edge';
+    }
+    else if (test(/chrome|chromium|crios/i)) {
+        return 'Google Chrome';
+    }
+    else if (test(/firefox|fxios/i)) {
+        return 'Mozilla Firefox';
+    }
+    else if (test(/safari/i)) {
+        return 'Apple Safari';
+    }
+    else if (test(/trident/i)) {
+        return 'Microsoft Internet Explorer';
+    }
+    else if (test(/ucbrowser/i)) {
+        return 'UC Browser';
+    }
+    else if (test(/samsungbrowser/i)) {
+        return 'Samsung Browser';
+    }
+    else {
+        return 'Unknown browser';
+    }
+}
+export default detectBrowser;

package/lib/utils/Cells.d.ts

@@ -0,0 +1,2 @@
+import { IDataset } from "../models";
+export declare const getDatasetCell: (dataset: IDataset) => string;

package/lib/utils/Cells.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export const getDatasetCell = (dataset) => {
+    switch (dataset.contentType) {
+        case 'application/vnd.ms-excel':
+        case 'text/csv':
+            return `# --- ✅ Load the ${dataset.fileName}.${dataset.datasetExtension} dataset (${dataset.mimeType})
+import pandas as pd
+${dataset.fileName}_${dataset.datasetExtension} = pd.read_csv("${dataset.cdnUrl}")
+${dataset.fileName}_${dataset.datasetExtension}
+
+`;
+        case 'image/png':
+        case 'image/jpg':
+        case 'image/jpeg':
+            return `# --- ✅ Display the ${dataset.fileName}.${dataset.datasetExtension} dataset (${dataset.mimeType})
+from IPython.display import Image
+url = "${dataset.cdnUrl}"
+Image(url, width=300)
+
+`;
+        default:
+            return `# --- 😞 File of type ${dataset.contentType} is not supported for now.
+`;
+    }
+};

package/lib/utils/Cookie.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Get a cookie from the document.
+ */
+export declare function getCookie(cname: string): string | undefined;
+/**
+ * Set a cookie in the document.
+ */
+export declare function setCookie(name: string, value: string, path?: string): void;
+/**
+ * Set a cookie in the document.
+ */
+export declare function deleteCookie(name: string): void;

package/lib/utils/Cookie.js

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Get a cookie from the document.
+ */
+export function getCookie(cname) {
+    // From http://www.tornadoweb.org/en/stable/guide/security.html
+    let cookie;
+    try {
+        cookie = document.cookie;
+    }
+    catch (e) {
+        // e.g. SecurityError in case of CSP Sandbox
+        return cookie;
+    }
+    // From https://www.w3schools.com/js/js_cookies.asp
+    const name = cname + "=";
+    const decodedCookie = decodeURIComponent(document.cookie);
+    const ca = decodedCookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) === ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) === 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+}
+/**
+ * Set a cookie in the document.
+ */
+export function setCookie(name, value, path = '/') {
+    //  document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
+    const expire = new Date();
+    const time = expire.getTime();
+    const expireTime = time + 1000 * 36000;
+    expire.setTime(expireTime);
+    document.cookie = `${name}=${value}; expires=${expire.toUTCString()}; SameSite=Lax; path=${path}`;
+}
+/**
+ * Set a cookie in the document.
+ */
+export function deleteCookie(name) {
+    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+}

package/lib/utils/Date.d.ts

@@ -0,0 +1,2 @@
+export declare const getRelativeTime: (d1: Date, d2?: Date) => string;
+export declare const timeSince: (date: Date) => string;

package/lib/utils/Date.js

@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+//- Taken from https://stackoverflow.com/questions/6108819/javascript-timestamp-to-relative-time
+// in miliseconds
+const units = {
+    year: 24 * 60 * 60 * 1000 * 365,
+    month: (24 * 60 * 60 * 1000 * 365) / 12,
+    day: 24 * 60 * 60 * 1000,
+    hour: 60 * 60 * 1000,
+    minute: 60 * 1000,
+    second: 1000
+};
+const rtf = new Intl.RelativeTimeFormat(undefined, {
+    numeric: 'auto',
+    style: 'short'
+});
+export const getRelativeTime = (d1, d2 = new Date()) => {
+    const elapsed = d1.getTime() - d2.getTime();
+    // "Math.abs" accounts for both "past" & "future" scenarios
+    for (const u in units)
+        if (Math.abs(elapsed) > units[u] || u === 'second')
+            return rtf.format(Math.round(elapsed / units[u]), u);
+    return 'now';
+};
+//-
+const p = (i) => {
+    return i > 1 ? 's' : '';
+};
+export const timeSince = (date) => {
+    const seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000);
+    let interval = seconds / 31536000;
+    if (interval > 1) {
+        const i = Math.floor(interval);
+        return i + ` year${p(i)}`;
+    }
+    interval = seconds / 2592000;
+    if (interval > 1) {
+        const i = Math.floor(interval);
+        return i + ` month${p(i)}`;
+    }
+    interval = seconds / 86400;
+    if (interval > 1) {
+        const i = Math.floor(interval);
+        return i + ` day${p(i)}`;
+    }
+    interval = seconds / 3600;
+    if (interval > 1) {
+        const i = Math.floor(interval);
+        return i + ` hour${p(i)}`;
+    }
+    interval = seconds / 60;
+    if (interval > 1) {
+        const i = Math.floor(interval);
+        return i + ` minute${p(i)}`;
+    }
+    const i = Math.floor(interval);
+    return i + ` second${p(i)}`;
+};

package/lib/utils/Download.d.ts

@@ -0,0 +1,3 @@
+export declare function jsonToCSVString(json: any): string;
+export declare const downloadJson: (data: any, fileName: string, extension: string) => void;
+export declare const downloadCSV: (data: any, fileName: string) => void;

package/lib/utils/Download.js

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export function jsonToCSVString(json) {
+    const headers = Object.keys(json[0]);
+    let csvString = '';
+    csvString += headers.join(',') + '\n';
+    json.forEach(obj => {
+        const rowCells = headers.map(header => {
+            const val = obj[header];
+            if (typeof val === "number") {
+                return val;
+            }
+            if (typeof val === "string") {
+                return val;
+            }
+            if (val instanceof Date) {
+                return val.toISOString();
+            }
+            return '';
+        });
+        const row = rowCells.join(',');
+        csvString += row + '\n';
+    });
+    return csvString;
+}
+export const downloadJson = (data, fileName, extension) => {
+    const jsonData = new Blob([JSON.stringify(data)], { type: 'application/json' });
+    const jsonURL = URL.createObjectURL(jsonData);
+    const jsonLink = document.createElement('a');
+    jsonLink.href = jsonURL;
+    jsonLink.download = `${fileName}.${extension}`;
+    document.body.appendChild(jsonLink);
+    jsonLink.click();
+    document.body.removeChild(jsonLink);
+};
+export const downloadCSV = (data, fileName) => {
+    const csvString = jsonToCSVString(data);
+    const csvData = new Blob([csvString], { type: 'text/csv' });
+    const csvURL = URL.createObjectURL(csvData);
+    const csvLink = document.createElement('a');
+    csvLink.href = csvURL;
+    csvLink.download = `${fileName}.csv`;
+    document.body.appendChild(csvLink);
+    csvLink.click();
+    document.body.removeChild(csvLink);
+};

package/lib/utils/DownloadFile.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @param data
+ * @param filename
+ * @param mime See https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+ * @param bom A byte order mark (BOM) is a sequence of bytes used to indicate Unicode encoding of a text file. The underlying character code, U+FEFF , takes one of the following forms depending on the character encoding.
+ *
+ * .zip	ZIP archive	application/zip
+ */
+export declare const downloadFile: (data: any, filename: string, mime?: any, bom?: any) => void;
+export default downloadFile;

package/lib/utils/DownloadFile.js

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * @param data
+ * @param filename
+ * @param mime See https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+ * @param bom A byte order mark (BOM) is a sequence of bytes used to indicate Unicode encoding of a text file. The underlying character code, U+FEFF , takes one of the following forms depending on the character encoding.
+ *
+ * .zip	ZIP archive	application/zip
+ */
+export const downloadFile = (data, filename, mime, bom) => {
+    const blobData = (typeof bom !== 'undefined') ? [bom, data] : [data];
+    const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });
+    const blobURL = (window.URL && window.URL.createObjectURL) ? window.URL.createObjectURL(blob) : window.webkitURL.createObjectURL(blob);
+    const tempLink = document.createElement('a');
+    tempLink.style.display = 'none';
+    tempLink.href = blobURL;
+    tempLink.setAttribute('download', filename);
+    // Safari thinks _blank anchor are pop ups. We only want to set _blank
+    // target if the browser does not support the HTML5 download attribute.
+    // This allows you to download files in desktop safari if pop up blocking
+    // is enabled.
+    if (typeof tempLink.download === 'undefined') {
+        tempLink.setAttribute('target', '_blank');
+    }
+    document.body.appendChild(tempLink);
+    tempLink.click();
+    // Fixes "webkit blob resource error 1"
+    setTimeout(function () {
+        document.body.removeChild(tempLink);
+        window.URL.revokeObjectURL(blobURL);
+    }, 200);
+};
+export default downloadFile;

package/lib/utils/Env.d.ts

@@ -0,0 +1 @@
+export declare const isDevDeployment: () => boolean;

package/lib/utils/Env.js

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export const isDevDeployment = () => {
+    return location.hostname.startsWith('dev') || location.hostname.startsWith('localhost');
+};

package/lib/utils/File.d.ts

@@ -0,0 +1,7 @@
+/**
+ * creates name of file.
+ *
+ * @param {string} extension
+ * @param {string[]} parts of file name
+ */
+export declare const createFileName: (extension?: string, ...names: any[]) => string;