@datalayer/core 0.0.26 → 0.0.27

package/lib/components/auth/Login.d.ts

@@ -31,6 +31,10 @@ export interface ILoginProps {
      * Show GitHub Login button
      */
     showGitHubLogin?: boolean;
+    /**
+     * Show Google Login button
+     */
+    showGoogleLogin?: boolean;
     /**
      * Show token Login buttons
      */

package/lib/components/auth/Login.js

@@ -14,8 +14,10 @@ import { CenteredSpinner } from '../display';
 import { isInsideJupyterLab, validateLength } from '../../utils';
 import { useNavigate, useCache, useToast, useIAM } from '../../hooks';
 import { LoginToken } from './LoginToken';
+/** Inline Google "G" icon for the login button. */
+const GoogleIcon = () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 48 48", children: [_jsx("path", { fill: "#EA4335", d: "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" }), _jsx("path", { fill: "#4285F4", d: "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" }), _jsx("path", { fill: "#FBBC05", d: "M10.53 28.59a14.5 14.5 0 0 1 0-9.18l-7.98-6.19a24.1 24.1 0 0 0 0 21.56l7.98-6.19z" }), _jsx("path", { fill: "#34A853", d: "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" })] }));
 export const Login = (props) => {
-    const { heading, homeRoute, loginRoute, showEmailLogin = true, showGitHubLogin = true, showTokenLogin = true, } = props;
+    const { heading, homeRoute, loginRoute, showEmailLogin = true, showGitHubLogin = true, showGoogleLogin = true, showTokenLogin = true, } = props;
     const { useLogin, useOAuth2AuthorizationURL } = useCache({ loginRoute });
     const loginMutation = useLogin();
     const getOAuth2URLMutation = useOAuth2AuthorizationURL();
@@ -68,6 +70,9 @@ export const Login = (props) => {
         if (!iamProvidersAuthorizationURL[IAMProvidersSpecs.GitHub.name]) {
             initIAMProvider(IAMProvidersSpecs.GitHub);
         }
+        if (!iamProvidersAuthorizationURL[IAMProvidersSpecs.Google.name]) {
+            initIAMProvider(IAMProvidersSpecs.Google);
+        }
         if (!iamProvidersAuthorizationURL[IAMProvidersSpecs.LinkedIn.name]) {
             initIAMProvider(IAMProvidersSpecs.LinkedIn);
         }
@@ -163,6 +168,7 @@ export const Login = (props) => {
                                                     : heading
                                                         ? 'Login with Datalayer'
                                                         : 'Login' }), _jsx(Box, { pt: 6 }), _jsx(Link, { href: "https://datalayer.app/password", target: "_blank", children: "Forgot password?" })] })] })), _jsx(Box, { children: _jsxs(Box, { display: "flex", flexDirection: "column", sx: { margin: 'auto' }, children: [showGitHubLogin &&
-                                            iamProvidersAuthorizationURL[IAMProvidersSpecs.GitHub.name] && (_jsx(Button, { leadingVisual: MarkGithubIcon, href: iamProvidersAuthorizationURL[IAMProvidersSpecs.GitHub.name], as: "a", style: { margin: '10px 0' }, children: "Login with GitHub" })), showTokenLogin && (_jsx(LoginToken, { homeRoute: homeRoute, style: { margin: '10px 0' } }))] }) })] }) })) : loadingWithToken ? (_jsx(CenteredSpinner, { message: "Checking authentication\u2026" })) : (_jsx(_Fragment, {})) })] }));
+                                            iamProvidersAuthorizationURL[IAMProvidersSpecs.GitHub.name] && (_jsx(Button, { leadingVisual: MarkGithubIcon, href: iamProvidersAuthorizationURL[IAMProvidersSpecs.GitHub.name], as: "a", style: { margin: '10px 0' }, children: "Login with GitHub" })), showGoogleLogin &&
+                                            iamProvidersAuthorizationURL[IAMProvidersSpecs.Google.name] && (_jsx(Button, { leadingVisual: GoogleIcon, href: iamProvidersAuthorizationURL[IAMProvidersSpecs.Google.name], as: "a", style: { margin: '10px 0' }, children: "Login with Google" })), showTokenLogin && (_jsx(LoginToken, { homeRoute: homeRoute, style: { margin: '10px 0' } }))] }) })] }) })) : loadingWithToken ? (_jsx(CenteredSpinner, { message: "Checking authentication\u2026" })) : (_jsx(_Fragment, {})) })] }));
 };
 export default Login;

package/lib/components/auth/Login.stories.d.ts

@@ -22,6 +22,7 @@ declare const meta: {
         passwordRoute?: string | undefined;
         showEmailLogin?: boolean | undefined;
         showGitHubLogin?: boolean | undefined;
+        showGoogleLogin?: boolean | undefined;
         showTokenLogin?: boolean | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
     tags: string[];

package/lib/components/progress/ConsumptionBar.js

@@ -57,11 +57,11 @@ export function ConsumptionBar(props) {
     const title = duration
         ? `${formatTimeRemaining(secondsRemaining)} left - ${((progress / 100) * burntCredits).toFixed(2)} / ${burntCredits.toFixed(2)} credits`
         : `Started at ${new Date(startedAt * 1000).toISOString()} - ${burntCredits.toFixed(2)} credits consumed`;
-    return (_jsx(_Fragment, { children: _jsx(Tooltip, { text: title, direction: "w", children: _jsx(Button, { variant: "invisible", children: _jsx(Box, { sx: { width: '70px' }, children: _jsx(ProgressBar, { tabIndex: onClick ? 0 : -1, style: style, animated: expiredAt ? false : true, bg: bg, progress: progress, onClick: onClick, onKeyDown: onClick
-                            ? event => {
-                                if (event.key === 'Enter' || event.key === 'Space') {
-                                    onClick();
-                                }
-                            }
-                            : undefined }) }) }) }) }));
+    return (_jsx(_Fragment, { children: _jsx(Tooltip, { text: title, direction: "w", children: _jsx(Button, { variant: "invisible", onClick: onClick, onKeyDown: onClick
+                    ? event => {
+                        if (event.key === 'Enter' || event.key === 'Space') {
+                            onClick();
+                        }
+                    }
+                    : undefined, tabIndex: onClick ? 0 : -1, sx: { cursor: onClick ? 'pointer' : 'default' }, children: _jsx(Box, { sx: { width: '70px' }, children: _jsx(ProgressBar, { style: style, animated: expiredAt ? false : true, bg: bg, progress: progress }) }) }) }) }));
 }

package/lib/components/progress/CreditsIndicator.d.ts

@@ -9,7 +9,13 @@ type ICreditsIndicatorProps = {
      */
     kernelId: string;
     /**
-     * Callback on progress bar click event
+     * Route to navigate to when the indicator is clicked.
+     * Ignored if `onClick` is provided.
+     */
+    navigateTo?: string;
+    /**
+     * Callback on progress bar click event.
+     * Takes precedence over `navigateTo`.
      */
     onClick?: () => void;
     /**

package/lib/components/progress/CreditsIndicator.js

@@ -6,16 +6,18 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import { Box } from '@datalayer/primer-addons';
 import { ConsumptionBar } from '../../components/progress';
+import useNavigate from '../../hooks/useNavigate';
 /**
  * Credits indicator component.
  */
 export function CreditsIndicator(props) {
-    const { serviceManager, kernelId, onClick, onUpdate } = props;
+    const { serviceManager, kernelId, navigateTo, onClick, onUpdate } = props;
+    const navigate = useNavigate();
     const [model, setModel] = useState();
     useEffect(() => {
         serviceManager.runtimesManager.findById(kernelId).then(model => {
             setModel(model);
         });
     }, [kernelId, serviceManager]);
-    return model ? (_jsx(Box, { display: "flex", style: { alignItems: 'center' }, children: _jsx(ConsumptionBar, { startedAt: parseFloat(model.started_at), expiredAt: model.expired_at ? parseFloat(model.expired_at) : undefined, burningRate: model.burning_rate, onClick: onClick, onUpdate: onUpdate, style: { cursor: 'pointer' } }) })) : (_jsx(_Fragment, {}));
+    return model ? (_jsx(Box, { display: "flex", style: { alignItems: 'center' }, children: _jsx(ConsumptionBar, { startedAt: parseFloat(model.started_at), expiredAt: model.expired_at ? parseFloat(model.expired_at) : undefined, burningRate: model.burning_rate, onClick: onClick ?? (navigateTo ? () => navigate(navigateTo) : undefined), onUpdate: onUpdate, style: { cursor: 'pointer' } }) })) : (_jsx(_Fragment, {}));
 }

package/lib/components/{screenshot/ScreenCapture.d.ts → screencapture/Screencapture.d.ts}

@@ -1,10 +1,10 @@
 import { Component, CSSProperties } from 'react';
-type ScreenCaptureProps = {
+type ScreencaptureProps = {
     children: any;
     onStartCapture?: () => void;
     onEndCapture: (url: string) => void;
 };
-type ScreenCaptureState = {
+type ScreencaptureState = {
     on: boolean;
     startX: number;
     startY: number;
@@ -22,8 +22,8 @@ type ScreenCaptureState = {
     cropHeigth: number;
     imageURL: string;
 };
-export declare class ScreenCapture extends Component<ScreenCaptureProps, ScreenCaptureState> {
-    state: ScreenCaptureState;
+export declare class Screencapture extends Component<ScreencaptureProps, ScreencaptureState> {
+    state: ScreencaptureState;
     handleWindowResize: () => void;
     componentDidMount: () => void;
     componentWillUnmount: () => void;
@@ -35,4 +35,4 @@ export declare class ScreenCapture extends Component<ScreenCaptureProps, ScreenC
     renderChild: () => any;
     render(): any;
 }
-export default ScreenCapture;
+export default Screencapture;

package/lib/components/{screenshot/ScreenCapture.js → screencapture/Screencapture.js}

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Component } from 'react';
 import html2canvas from 'html2canvas';
-export class ScreenCapture extends Component {
+export class Screencapture extends Component {
     state = {
         on: false,
         startX: 0,
@@ -167,4 +167,4 @@ export class ScreenCapture extends Component {
         return (_jsxs("div", { onMouseMove: this.handleMouseMove, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, children: [this.renderChild(), _jsx("div", { className: `overlay ${isMouseDown && 'highlighting'}`, style: { borderWidth: `${borderWidth}` } }), _jsx("div", { className: "crosshairs", style: { left: crossHairsLeft + 'px', top: crossHairsTop + 'px' } })] }));
     }
 }
-export default ScreenCapture;
+export default Screencapture;

package/lib/components/screencapture/ScreencaptureButton.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+export declare const ScreencaptureButton: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export default ScreencaptureButton;

package/lib/components/{screenshot/ScreenCaptureButton.js → screencapture/ScreencaptureButton.js}

@@ -4,16 +4,16 @@ import { ScreenFullIcon } from '@primer/octicons-react';
 import { lazyWithPreload, WithSuspense } from '../../utils';
 import { useToast } from '../../hooks';
 import { useLayoutStore } from '../../state';
-const ScreenCapture = WithSuspense(lazyWithPreload(() => import('../screenshot/ScreenCapture')));
-export const ScreenCaptureButton = (props) => {
+const Screencapture = WithSuspense(lazyWithPreload(() => import('./Screencapture')));
+export const ScreencaptureButton = (props) => {
     const { enqueueToast } = useToast();
-    const { setScreenCapture, hideScreenshot } = useLayoutStore();
-    const handleScreenCapture = (screenCapture) => {
-        setScreenCapture(screenCapture);
-        hideScreenshot();
+    const { setScreencapture, hideScreencapture } = useLayoutStore();
+    const handleScreencapture = (screenCapture) => {
+        setScreencapture(screenCapture);
+        hideScreencapture();
         enqueueToast('Screen is captured.', { variant: 'success' });
     };
-    return (_jsx(ScreenCapture, { onEndCapture: handleScreenCapture, children: ({ onStartCapture }) => (_jsx(Tooltip, { text: "Take a screen capture", direction: "s", children: _jsx(Button, { variant: "invisible", children: _jsx(Link, { href: "javascript: return false;", sx: {
+    return (_jsx(Screencapture, { onEndCapture: handleScreencapture, children: ({ onStartCapture }) => (_jsx(Tooltip, { text: "Take a screen capture", direction: "s", children: _jsx(Button, { variant: "invisible", children: _jsx(Link, { href: "javascript: return false;", sx: {
                         color: 'fg.muted',
                         ':hover, :focus, &[aria-expanded=true]': {
                             background: 'none !important',
@@ -24,4 +24,4 @@ export const ScreenCaptureButton = (props) => {
                         onStartCapture();
                     }, children: _jsx(ScreenFullIcon, {}) }) }) })) }));
 };
-export default ScreenCaptureButton;
+export default ScreencaptureButton;

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

@@ -0,0 +1,2 @@
+export * from './Screencapture';
+export * from './ScreencaptureButton';

package/lib/components/{screenshot → screencapture}/index.js

@@ -2,5 +2,5 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-export * from './ScreenCapture';
-export * from './ScreenCaptureButton';
+export * from './Screencapture';
+export * from './ScreencaptureButton';

package/lib/hooks/index.d.ts

@@ -19,7 +19,7 @@ export * from './useParams';
 export * from './useOnClickOutside';
 export * from './useRef';
 export * from './useRuntimes';
-export * from './useScreenshot';
+export * from './useScreencapture';
 export * from './useToast';
 export * from './useUpload';
 export * from './useUser';

package/lib/hooks/index.js

@@ -24,7 +24,7 @@ export * from './useParams';
 export * from './useOnClickOutside';
 export * from './useRef';
 export * from './useRuntimes';
-export * from './useScreenshot';
+export * from './useScreencapture';
 export * from './useToast';
 export * from './useUpload';
 export * from './useUser';

package/lib/hooks/layouts/{LayoutScreenshot.css → LayoutScreencapture.css}

@@ -22,14 +22,14 @@
 .crosshairs::before {
   height: 24px;
   width: 2px;
-  background: #000;
+  background: #fff;
   top: -11px;
 }
 
 .crosshairs::after {
   width: 24px;
   height: 2px;
-  background: #000;
+  background: #fff;
   left: -11px;
 }
 

package/lib/hooks/layouts/LayoutScreencapture.d.ts

@@ -0,0 +1,3 @@
+import '../../../style/screencapture/index.css';
+export declare const LayoutScreencapture: () => import("react/jsx-runtime").JSX.Element;
+export default LayoutScreencapture;

package/lib/hooks/layouts/{LayoutScreenshot.js → LayoutScreencapture.js}

@@ -5,11 +5,11 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
  */
 import { useEffect } from 'react';
 import { Box } from '@primer/react';
-import { useScreenshot, useToast } from '..';
+import { useScreencapture, useToast } from '..';
 import { lazyWithPreload, WithSuspense } from '../../utils';
 import { useLayoutStore } from '../../state';
-import './LayoutScreenshot.css';
-const ScreenCapture = WithSuspense(lazyWithPreload(() => import('../../components/screenshot/ScreenCapture')));
+import '../../../style/screencapture/index.css';
+const Screencapture = WithSuspense(lazyWithPreload(() => import('../../components/screencapture/Screencapture')));
 const Capture = (props) => {
     const { onStartCapture } = props;
     useEffect(() => {
@@ -17,28 +17,28 @@ const Capture = (props) => {
     }, []);
     return _jsx(_Fragment, {});
 };
-const ScreenshotContent = (props) => {
+const ScreencaptureContent = (props) => {
     //  const { screenshotDisplay } = props;
     const { enqueueToast } = useToast();
-    const { setScreenCapture, hideScreenshot } = useLayoutStore();
-    const handleScreenCapture = (screenCapture) => {
-        setScreenCapture(screenCapture);
-        hideScreenshot();
+    const { setScreencapture, hideScreencapture } = useLayoutStore();
+    const handleScreencapture = (screenCapture) => {
+        setScreencapture(screenCapture);
+        hideScreencapture();
         enqueueToast('Screen is captured.', { variant: 'success' });
     };
-    return (_jsx(Box, { children: _jsx(ScreenCapture, { onEndCapture: handleScreenCapture, children: ({ onStartCapture }) => _jsx(Capture, { onStartCapture: onStartCapture }) }) }));
+    return (_jsx(Box, { children: _jsx(Screencapture, { onEndCapture: handleScreencapture, children: ({ onStartCapture }) => _jsx(Capture, { onStartCapture: onStartCapture }) }) }));
 };
-export const LayoutScreenshot = () => {
+export const LayoutScreencapture = () => {
     const { screenshot } = useLayoutStore();
-    const { displayScreenshot, closeScreenshot } = useScreenshot();
+    const { displayScreencapture, closeScreencapture } = useScreencapture();
     useEffect(() => {
         if (screenshot && screenshot.open) {
-            displayScreenshot(() => (_jsx(ScreenshotContent, { screenshotDisplay: screenshot })));
+            displayScreencapture(() => (_jsx(ScreencaptureContent, { screenshotDisplay: screenshot })));
         }
         else {
-            closeScreenshot();
+            closeScreencapture();
         }
     }, [screenshot]);
     return _jsx(_Fragment, {});
 };
-export default LayoutScreenshot;
+export default LayoutScreencapture;

package/lib/hooks/layouts/index.d.ts

@@ -1,2 +1,2 @@
 export * from './LayoutBackdrop';
-export * from './LayoutScreenshot';
+export * from './LayoutScreencapture';

package/lib/hooks/layouts/index.js

@@ -3,4 +3,4 @@
  * Distributed under the terms of the Modified BSD License.
  */
 export * from './LayoutBackdrop';
-export * from './LayoutScreenshot';
+export * from './LayoutScreencapture';

package/lib/hooks/useCache.d.ts

@@ -316,6 +316,7 @@ export declare const useCache: ({ loginRoute }?: CacheProps) => {
         autorization_url: string;
     }, Error, Record<string, string>, unknown>;
     useGetGitHubProfile: () => import("@tanstack/react-query").UseMutationResult<any, Error, string, unknown>;
+    useGetGoogleProfile: () => import("@tanstack/react-query").UseMutationResult<any, Error, string, unknown>;
     useGetLinkedinProfile: () => import("@tanstack/react-query").UseMutationResult<any, Error, string, unknown>;
     usePostLinkedinShare: () => import("@tanstack/react-query").UseMutationResult<any, Error, {
         linkedinUserUrn: string;
@@ -325,7 +326,7 @@ export declare const useCache: ({ loginRoute }?: CacheProps) => {
     usePostLinkedinShareWithUpload: () => import("@tanstack/react-query").UseMutationResult<any, Error, {
         linkedinUserUrn: string;
         postText: string;
-        uploadObject: string;
+        uploadObject?: string;
         accessToken: string;
     }, unknown>;
     useRegisterToWaitingList: () => import("@tanstack/react-query").UseMutationResult<any, Error, {
@@ -544,6 +545,7 @@ export declare const useCache: ({ loginRoute }?: CacheProps) => {
         creditsLimit?: number;
         type?: string;
         editorVariant?: string;
+        enableCodemode?: boolean;
     }, unknown>;
     useDeleteAgentRuntime: () => import("@tanstack/react-query").UseMutationResult<any, Error, string, unknown>;
     useRefreshAgentRuntimes: () => () => void;

package/lib/hooks/useCache.js

@@ -1673,6 +1673,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
                         credits_limit: data.creditsLimit || 10,
                         type: data.type || 'notebook',
                         editor_variant: data.editorVariant || 'none',
+                        enable_codemode: data.enableCodemode ?? false,
                     },
                 });
             },
@@ -1710,10 +1711,21 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
                     method: 'DELETE',
                 });
             },
-            onSuccess: () => {
-                // Invalidate all agent runtime queries
+            onSuccess: (_data, podName) => {
+                // Cancel any in-flight queries for the deleted runtime so they
+                // don't re-fetch a resource that no longer exists.
+                queryClient.cancelQueries({
+                    queryKey: queryKeys.agentRuntimes.detail(podName),
+                });
+                // Remove the detail cache entry immediately — prevents React
+                // Query from triggering a stale re-fetch while the component
+                // unmounts.
+                queryClient.removeQueries({
+                    queryKey: queryKeys.agentRuntimes.detail(podName),
+                });
+                // Invalidate the list so the sidebar refreshes.
                 queryClient.invalidateQueries({
-                    queryKey: queryKeys.agentRuntimes.all(),
+                    queryKey: queryKeys.agentRuntimes.lists(),
                 });
             },
         });
@@ -5194,7 +5206,9 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
                 if (!resp.success) {
                     throw new Error(resp.message || 'Failed to search public items');
                 }
-                return resp.items || [];
+                return (resp.items || [])
+                    .map((item) => toItem(item))
+                    .filter(Boolean);
             },
         });
     };
@@ -5219,6 +5233,23 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
             },
         });
     };
+    /**
+     * Get Google profile from access token
+     */
+    const useGetGoogleProfile = () => {
+        return useMutation({
+            mutationFn: async (accessToken) => {
+                const response = await fetch('https://openidconnect.googleapis.com/v1/userinfo', {
+                    method: 'GET',
+                    headers: {
+                        Accept: 'application/json',
+                        Authorization: `Bearer ${accessToken}`,
+                    },
+                });
+                return response.json();
+            },
+        });
+    };
     /**
      * Get LinkedIn profile via proxy
      */
@@ -5275,68 +5306,87 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
     const usePostLinkedinShareWithUpload = () => {
         return useMutation({
             mutationFn: async ({ linkedinUserUrn, postText, uploadObject, accessToken, }) => {
-                // Step 1: Register upload
-                const registerUploadRequest = {
-                    registerUploadRequest: {
-                        recipes: ['urn:li:digitalmediaRecipe:feedshare-image'],
-                        owner: linkedinUserUrn,
-                        serviceRelationships: [
-                            {
-                                relationshipType: 'OWNER',
-                                identifier: 'urn:li:userGeneratedContent',
-                            },
-                        ],
-                    },
-                };
-                const registerResp = await requestDatalayer({
-                    url: `${configuration.iamRunUrl}/api/iam/v1/proxy/request`,
-                    method: 'POST',
-                    body: {
-                        request_method: 'POST',
-                        request_url: 'https://api.linkedin.com/v2/assets?action=registerUpload',
-                        request_token: accessToken,
-                        request_body: registerUploadRequest,
-                    },
-                });
-                const asset = registerResp.response.value.asset;
-                const uploadUrl = registerResp.response.value.uploadMechanism['com.linkedin.digitalmedia.uploading.MediaUploadHttpRequest'].uploadUrl;
-                // Step 2: Upload image
-                await requestDatalayer({
-                    url: `${configuration.iamRunUrl}/api/iam/v1/proxy/request`,
-                    method: 'POST',
-                    body: {
-                        request_method: 'PUT',
-                        request_url: uploadUrl,
-                        request_token: accessToken,
-                        request_body: {
-                            uploadURL: uploadUrl,
-                            content: uploadObject,
-                            userURN: linkedinUserUrn,
-                        },
-                    },
-                });
-                // Step 3: Create share with media
-                const shareRequest = {
-                    author: linkedinUserUrn,
-                    lifecycleState: 'PUBLISHED',
-                    specificContent: {
-                        'com.linkedin.ugc.ShareContent': {
-                            shareCommentary: { text: postText },
-                            shareMediaCategory: 'IMAGE',
-                            media: [
+                let shareRequest;
+                if (uploadObject) {
+                    // Step 1: Register upload
+                    const registerUploadRequest = {
+                        registerUploadRequest: {
+                            recipes: ['urn:li:digitalmediaRecipe:feedshare-image'],
+                            owner: linkedinUserUrn,
+                            serviceRelationships: [
                                 {
-                                    status: 'READY',
-                                    description: { text: 'Datalayer Notebook' },
-                                    media: asset,
-                                    title: { text: 'Datalayer Notebook' },
+                                    relationshipType: 'OWNER',
+                                    identifier: 'urn:li:userGeneratedContent',
                                 },
                             ],
                         },
-                    },
-                    visibility: {
-                        'com.linkedin.ugc.MemberNetworkVisibility': 'PUBLIC',
-                    },
-                };
+                    };
+                    const registerResp = await requestDatalayer({
+                        url: `${configuration.iamRunUrl}/api/iam/v1/proxy/request`,
+                        method: 'POST',
+                        body: {
+                            request_method: 'POST',
+                            request_url: 'https://api.linkedin.com/v2/assets?action=registerUpload',
+                            request_token: accessToken,
+                            request_body: registerUploadRequest,
+                        },
+                    });
+                    const asset = registerResp.response.value.asset;
+                    const uploadUrl = registerResp.response.value.uploadMechanism['com.linkedin.digitalmedia.uploading.MediaUploadHttpRequest'].uploadUrl;
+                    // Step 2: Upload image
+                    await requestDatalayer({
+                        url: `${configuration.iamRunUrl}/api/iam/v1/proxy/request`,
+                        method: 'POST',
+                        body: {
+                            request_method: 'PUT',
+                            request_url: uploadUrl,
+                            request_token: accessToken,
+                            request_body: {
+                                uploadURL: uploadUrl,
+                                content: uploadObject,
+                                userURN: linkedinUserUrn,
+                            },
+                        },
+                    });
+                    // Step 3: Create share with media
+                    shareRequest = {
+                        author: linkedinUserUrn,
+                        lifecycleState: 'PUBLISHED',
+                        specificContent: {
+                            'com.linkedin.ugc.ShareContent': {
+                                shareCommentary: { text: postText },
+                                shareMediaCategory: 'IMAGE',
+                                media: [
+                                    {
+                                        status: 'READY',
+                                        description: { text: 'Datalayer Notebook' },
+                                        media: asset,
+                                        title: { text: 'Datalayer Notebook' },
+                                    },
+                                ],
+                            },
+                        },
+                        visibility: {
+                            'com.linkedin.ugc.MemberNetworkVisibility': 'PUBLIC',
+                        },
+                    };
+                }
+                else {
+                    // Text-only share (no image upload)
+                    shareRequest = {
+                        author: linkedinUserUrn,
+                        lifecycleState: 'PUBLISHED',
+                        specificContent: {
+                            'com.linkedin.ugc.ShareContent': {
+                                shareCommentary: { text: postText },
+                                shareMediaCategory: 'NONE',
+                            },
+                        },
+                        visibility: {
+                            'com.linkedin.ugc.MemberNetworkVisibility': 'PUBLIC',
+                        },
+                    };
+                }
                 return requestDatalayer({
                     url: `${configuration.iamRunUrl}/api/iam/v1/proxy/request`,
                     method: 'POST',
@@ -6353,6 +6403,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
         useOAuth2AuthorizationURL,
         useOAuth2AuthorizationLinkURL,
         useGetGitHubProfile,
+        useGetGoogleProfile,
         useGetLinkedinProfile,
         usePostLinkedinShare,
         usePostLinkedinShareWithUpload,

package/lib/hooks/useCellOutputshot.js

@@ -4,13 +4,13 @@
  */
 import { useState } from 'react';
 import { useCellStore } from '../state';
-import { takeHTMLNodeScreenshot } from '../utils/Screenshot';
+import { takeHTMLNodeScreencapture } from '../utils/Screencapture';
 const useCellOutputshot = () => {
     const [outputshot, setOutputshot] = useState('');
     const [error, setError] = useState();
     const { update } = useCellStore();
     const takeOutputshot = (node) => {
-        takeHTMLNodeScreenshot(node)
+        takeHTMLNodeScreencapture(node)
             .then(outputshotData => {
             setOutputshot(outputshotData);
             update({

package/lib/hooks/useScreencapture.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export type ScreencaptureContextType = {
+    closeScreencapture: () => void;
+    displayScreencapture: (nextScreencapture: any) => void;
+};
+export declare const ScreencaptureContext: import("react").Context<ScreencaptureContextType>;
+export declare function useScreencapture(): ScreencaptureContextType;
+/**
+ * The type for the Screencapture context provider.
+ */
+export declare const ScreencaptureContextProvider: import("react").Provider<ScreencaptureContextType>;
+export type IScreencaptureProviderProps = {
+    children?: ReactNode;
+    zIndex?: number;
+    disableDarken?: boolean;
+    screenshotSurface?: (qfds: any) => JSX.Element;
+};
+export declare function ScreencaptureProvider({ children, zIndex, disableDarken, screenshotSurface, }: IScreencaptureProviderProps): import("react/jsx-runtime").JSX.Element;

package/lib/hooks/useScreencapture.js

@@ -0,0 +1,53 @@
+import { Fragment as _Fragment, 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 { createContext, useState, useContext } from 'react';
+import { LayoutScreencapture } from './layouts';
+export const ScreencaptureContext = createContext({
+    closeScreencapture: () => { },
+    displayScreencapture: (nextScreencapture) => { },
+});
+export function useScreencapture() {
+    const context = useContext(ScreencaptureContext);
+    if (!context)
+        throw new Error('useContext must be inside a provider with a value.');
+    return context;
+}
+/**
+ * The type for the Screencapture context provider.
+ */
+export const ScreencaptureContextProvider = ScreencaptureContext.Provider;
+export function ScreencaptureProvider({ children = null, zIndex = 9999, disableDarken = false, screenshotSurface = undefined, }) {
+    const defaultScreencaptureSurface = {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: disableDarken ? 'initial' : 'rgba(0, 0, 0, 0.5)',
+        zIndex,
+    };
+    const [screenshot, setScreencapture] = useState({
+        open: false,
+        render: (closeScreencapture) => _jsx(_Fragment, {}),
+    });
+    const displayScreencapture = (nextScreencapture) => {
+        setScreencapture({
+            open: true,
+            render: nextScreencapture,
+        });
+    };
+    const closeScreencapture = () => {
+        setScreencapture({
+            open: false,
+            render: (closeScreencapture) => _jsx(_Fragment, {}),
+        });
+    };
+    return (_jsxs(ScreencaptureContextProvider, { value: { closeScreencapture, displayScreencapture }, children: [_jsx(LayoutScreencapture, {}), children, screenshot.open &&
+                (screenshotSurface ? (screenshotSurface(screenshot.render(closeScreencapture))) : (_jsx("div", { style: defaultScreencaptureSurface, children: screenshot.render(closeScreencapture) })))] }));
+}

package/lib/models/IAMProviderUsers.d.ts

@@ -24,6 +24,17 @@ export type ILinkedInUser = {
     picture: string;
     getUrn(): string;
 };
+export type IGoogleUser = {
+    iamProvider: IIAMProviderName;
+    sub: string;
+    email_verified: boolean;
+    name: string;
+    given_name: string;
+    family_name: string;
+    email: string;
+    picture: string;
+    locale: string;
+};
 export type IXUser = {
     iamProvider: IIAMProviderName;
     sub: string;

package/lib/models/IAMProvidersSpecs.d.ts

@@ -1,5 +1,5 @@
 import { IUser } from './User';
-export type IIAMProviderName = 'bluesky' | 'discord' | 'github' | 'linkedin' | 'okta' | 'x';
+export type IIAMProviderName = 'bluesky' | 'discord' | 'github' | 'google' | 'linkedin' | 'okta' | 'x';
 export type IIAMProviderSpec = {
     name: IIAMProviderName;
     oauth2CallbackServerRoute: string;
@@ -16,6 +16,7 @@ export declare class IAMProvidersSpecs {
     static getProvider(providerIAMProvidersType: any): IIAMProviderSpec;
     static readonly Bluesky: IIAMProviderSpec;
     static readonly GitHub: IIAMProviderSpec;
+    static readonly Google: IIAMProviderSpec;
     static readonly LinkedIn: IIAMProviderSpec;
     static readonly Okta: IIAMProviderSpec;
 }

package/lib/models/IAMProvidersSpecs.js

@@ -12,6 +12,9 @@ export class IAMProvidersSpecs {
             case 'github': {
                 return this.GitHub;
             }
+            case 'google': {
+                return this.Google;
+            }
             case 'linkedin': {
                 return this.LinkedIn;
             }
@@ -46,6 +49,17 @@ export class IAMProvidersSpecs {
         postShareURL: '',
         registerUploadURL: '',
     };
+    static Google = {
+        name: 'google',
+        oauth2CallbackServerRoute: 'jupyter_iam/oauth2/callback',
+        oauth2CallbackUIRoute: '/iam/oauth2/google/callback',
+        accessTokenCookieName: (user) => `__datalayer__google_access_token_${user.id}`,
+        refreshTokenCookieName: '__datalayer__google_refresh_token',
+        userInfoURL: 'https://openidconnect.googleapis.com/v1/userinfo',
+        tokenRefreshURL: 'https://oauth2.googleapis.com/token',
+        postShareURL: '',
+        registerUploadURL: '',
+    };
     static LinkedIn = {
         name: 'linkedin',
         oauth2CallbackServerRoute: 'jupyter_iam/oauth2/callback',

package/lib/models/Page.js

@@ -13,7 +13,7 @@ export const asPage = (s) => {
         description: s.description_t,
         theme: s.theme_s,
         nbformat: s.nbformat_s ? JSON.parse(s.nbformat_s) : undefined,
-        screenCapture: s.screen_capture_s,
+        screenCapture: s.screen_capture_cdn_url_s || s.screen_capture_s,
         tags: s.tags_ss ?? [],
         creator: s.creator ? asUser(s.creator) : undefined,
         creatorId: s.creator_uid,

package/lib/models/PageTag.d.ts

@@ -4,7 +4,7 @@ type CardIconColorsType = (typeof CardIconColors)[number];
 export type PageTagMetadata = {
     fillColor: React.CSSProperties['backgroundColor'];
 };
-export type PageTagName = 'ai' | 'deep-learning' | 'example' | 'llm' | 'python' | 'pytorch' | 'spatial' | 'tutorial';
+export type PageTagName = 'agent' | 'ai' | 'ai-agent' | 'deep-learning' | 'example' | 'llm' | 'notebook' | 'python' | 'pytorch' | 'spatial' | 'tutorial';
 export type PageTag = {
     id: string;
     text?: PageTagName;

package/lib/models/PageTag.js

@@ -9,12 +9,24 @@ export const PAGE_TAGE_NONE = {
     Icon: CopilotIcon,
     color: 'pink',
 };
+const PAGE_TAGE_AGENT = {
+    id: '9',
+    text: 'agent',
+    Icon: CopilotIcon,
+    color: 'teal',
+};
 const PAGE_TAGE_AI = {
     id: '1',
     text: 'ai',
     Icon: CopilotIcon,
     color: 'pink',
 };
+const PAGE_TAGE_AI_AGENT = {
+    id: '10',
+    text: 'ai-agent',
+    Icon: CopilotIcon,
+    color: 'purple',
+};
 const PAGE_TAGE_DEEP_LEARNING = {
     id: '2',
     text: 'deep-learning',
@@ -33,6 +45,12 @@ const PAGE_TAGE_LLM = {
     Icon: CopilotIcon,
     color: 'coral',
 };
+const PAGE_TAGE_NOTEBOOK = {
+    id: '11',
+    text: 'notebook',
+    Icon: CopilotIcon,
+    color: 'blue',
+};
 const PAGE_TAGE_PYTHON = {
     id: '5',
     text: 'python',
@@ -60,10 +78,13 @@ const PAGE_TAGE_TUTORIAL = {
     metadata: { fillColor: 'yellow' },
 };
 export const PAGE_TAGS = [
+    PAGE_TAGE_AGENT,
     PAGE_TAGE_AI,
+    PAGE_TAGE_AI_AGENT,
     PAGE_TAGE_DEEP_LEARNING,
     PAGE_TAGE_EXAMPLE,
     PAGE_TAGE_LLM,
+    PAGE_TAGE_NOTEBOOK,
     PAGE_TAGE_PYTHON,
     PAGE_TAGE_PYTORCH,
     PAGE_TAGE_SPATIAL,

package/lib/state/substates/LayoutState.d.ts

@@ -15,7 +15,7 @@ export type PortalDisplay = {
     portal: ReactPortal;
     pinned: boolean;
 };
-export type ScreenshotDisplay = {
+export type ScreencaptureDisplay = {
     open: boolean;
     message?: string | void;
 };
@@ -30,13 +30,13 @@ export type ILayoutState = {
     organization?: IAnyOrganization;
     rightPortal?: PortalDisplay;
     screenCapture?: string;
-    screenshot?: ScreenshotDisplay;
+    screenshot?: ScreencaptureDisplay;
     space?: IAnySpace;
     team?: IAnyTeam;
 };
 export type LayoutState = ILayoutState & {
     hideBackdrop: () => void;
-    hideScreenshot: () => void;
+    hideScreencapture: () => void;
     reset: () => void;
     resetForcedLeftPortal: () => void;
     resetForcedRightPortal: () => void;
@@ -48,9 +48,9 @@ export type LayoutState = ILayoutState & {
     setLeftPortal: (leftPortal: PortalDisplay) => void;
     setLeftSidebarVariant: (leftSidebarVariant: LeftSidebarVariant) => void;
     setRightPortal: (rightPortal: PortalDisplay) => void;
-    setScreenCapture: (screenCapture?: string) => void;
+    setScreencapture: (screenCapture?: string) => void;
     showBackdrop: (message?: string) => void;
-    showScreenshot: (message?: string) => void;
+    showScreencapture: (message?: string) => void;
     triggerItemsRefresh: () => void;
     updateLayoutOrganization: (organization?: Partial<IAnyOrganization>) => void;
     updateLayoutSpace: (space?: Partial<IAnySpace>) => void;

package/lib/state/substates/LayoutState.js

@@ -20,12 +20,12 @@ export const layoutStore = createStore((set, get) => ({
     hideBackdrop: () => set((state) => ({
         backdrop: { open: false, message: undefined },
     })),
-    hideScreenshot: () => set((state) => ({
+    hideScreencapture: () => set((state) => ({
         screenshot: { open: false, message: undefined },
     })),
     setBootstrapped: (bootstrapped) => set((state) => ({ bootstrapped })),
     showBackdrop: (message) => set((state) => ({ backdrop: { open: true, message } })),
-    showScreenshot: (message) => set((state) => ({ screenshot: { open: true, message } })),
+    showScreencapture: (message) => set((state) => ({ screenshot: { open: true, message } })),
     setBanner: (bannerDisplay) => set((state) => ({
         banner: {
             timestamp: new Date(),
@@ -78,7 +78,7 @@ export const layoutStore = createStore((set, get) => ({
     triggerItemsRefresh: () => set((state) => ({
         itemsRefreshCount: state.itemsRefreshCount + 1,
     })),
-    setScreenCapture: (screenCapture) => set((state) => ({ screenCapture })),
+    setScreencapture: (screenCapture) => set((state) => ({ screenCapture })),
     reset: () => set((state) => ({ bootstrapped: false })),
 }));
 export function useLayoutStore(selector) {

package/lib/utils/Screencapture.d.ts

@@ -0,0 +1 @@
+export declare const takeHTMLNodeScreencapture: (node: HTMLDivElement) => Promise<string>;

package/lib/utils/{Screenshot.js → Screencapture.js}

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import html2canvas from 'html2canvas';
-export const takeHTMLNodeScreenshot = async (node) => {
+export const takeHTMLNodeScreencapture = async (node) => {
     const sc = html2canvas(node, {
         width: node.getBoundingClientRect().width,
         height: node.getBoundingClientRect().height,

package/lib/utils/index.js

@@ -23,7 +23,7 @@ export * from './Notebook';
 export * from './Number';
 export * from './Plots';
 export * from './Random';
-// export * from './Screenshot'; Do not export html2canvas for now.
+// export * from './Screencapture'; Do not export html2canvas for now.
 export * from './Sleep';
 export * from './Snapshot';
 export * from './String';

package/lib/views/datasources/DatasourceNew.d.ts

@@ -1,2 +1,8 @@
-export declare const DatasourceNew: () => import("react/jsx-runtime").JSX.Element;
+export type DatasourceNewProps = {
+    /** Route to navigate after creating a datasource. Defaults to '/settings/integrations/datasources'. */
+    datasourcesListRoute?: string;
+    /** Route to navigate to the secrets page. Defaults to '/settings/iam/secrets'. */
+    secretsRoute?: string;
+};
+export declare const DatasourceNew: ({ datasourcesListRoute, secretsRoute, }?: DatasourceNewProps) => import("react/jsx-runtime").JSX.Element;
 export default DatasourceNew;

package/lib/views/datasources/DatasourceNew.js

@@ -8,7 +8,7 @@ import { PageHeader, FormControl, Button, TextInput, Text, Textarea, Select, Fla
 import { Box } from '@datalayer/primer-addons';
 import { useCache, useNavigate, useToast } from '../../hooks';
 import { useRunStore } from '../../state';
-export const DatasourceNew = () => {
+export const DatasourceNew = ({ datasourcesListRoute = '/settings/integrations/datasources', secretsRoute = '/settings/iam/secrets', } = {}) => {
     const runStore = useRunStore();
     const { useCreateDatasource } = useCache();
     const createDatasourceMutation = useCreateDatasource();
@@ -99,7 +99,7 @@ export const DatasourceNew = () => {
             onSuccess: (resp) => {
                 if (resp.success) {
                     enqueueToast(resp.message, { variant: 'success' });
-                    navigate(`/settings/integrations/datasources`);
+                    navigate(datasourcesListRoute);
                 }
             },
             onSettled: () => {
@@ -107,7 +107,7 @@ export const DatasourceNew = () => {
             },
         });
     };
-    return (_jsxs(Box, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New Datasource" }) }) }), _jsxs(Flash, { variant: "warning", children: [formValues.variant === 'athena' && (_jsxs(Text, { children: ["For ", _jsx(Link, { href: "https://aws.amazon.com/athena", children: "Amazon Athena" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate('/settings/iam/secrets', e), children: "Secrets" }), ' ', "are available:", '  ', _jsx(Text, { as: "code", children: "AWS_SECRET_ACCESS_KEY" }), '  ', _jsx(Text, { as: "code", children: "AWS_ACCESS_KEY_ID" }), '  ', _jsx(Text, { as: "code", children: "AWS_DEFAULT_REGION" })] })), formValues.variant === 'bigquery' && (_jsxs(Text, { children: ["For", ' ', _jsx(Link, { href: "https://cloud.google.com/bigquery", children: "Google Big Query" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate('/settings/iam/secrets', e), children: "Secret" }), ' ', "is available:", '  ', _jsx(Text, { as: "code", children: "GOOGLE_APPLICATION_CREDENTIALS" })] })), formValues.variant === 'mssentinel' && (_jsxs(Text, { children: ["For", ' ', _jsx(Link, { href: "https://learn.microsoft.com/en-us/azure/sentinel/overview?tabs=defender-portaly", children: "Microsoft Sentinel" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate('/settings/iam/secrets', e), children: "Secret" }), ' ', "is available:", '  ', _jsx(Text, { as: "code", children: "AZURE_TENANT_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_CLIENT_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_CLIENT_SECRET" }), ` `, _jsx(Text, { as: "code", children: "AZURE_SUBSCRIPTION_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_RESOURCE_GROUP" }), ` `, _jsx(Text, { as: "code", children: "MSSENTINEL_WORKSPACE_ID" }), ` `, _jsx(Text, { as: "code", children: "MSSENTINEL_WORKSPACE_NAME" })] })), formValues.variant === 'splunk' && (_jsxs(Text, { children: ["For ", _jsx(Link, { href: "https://www.splunk.com/", children: "Splunk" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate('/settings/iam/secrets', e), children: "Secret" }), ' ', "is available:", '  ', _jsx(Text, { as: "code", children: "SPLUNK_HOST" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_PORT" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_USERNAME" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_PASSWORD" })] }))] }), _jsx(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", sx: { gap: 3 }, children: _jsx(Box, { children: _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Datasource type" }), _jsxs(Select, { name: "type", value: formValues.variant, onChange: valueVariantChange, children: [_jsx(Select.Option, { value: "athena", children: "Amazon Athena" }), _jsx(Select.Option, { value: "bigquery", children: "Google BigQuery" }), _jsx(Select.Option, { value: "mssentinel", children: "Microsoft Sentinel" }), _jsx(Select.Option, { value: "splunk", children: "Splunk" })] }), _jsx(FormControl.Caption, { children: "Pick the most appropriate datasource type." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: valueNameChange, autoFocus: true }), _jsx(FormControl.Caption, { children: "Hint: The datasource name is a short name that identifies in a unique way your datasource." }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name length must be between 2 and 32 characters." }))] }), formValues.variant === 'athena' && (_jsxs(_Fragment, { children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Database" }), _jsx(TextInput, { block: true, value: formValues.database, onChange: valueDatabaseChange }), validationResult.database === false && (_jsx(FormControl.Validation, { variant: "error", children: "Database must have more than 1." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Output Bucket" }), _jsx(TextInput, { block: true, value: formValues.outputBucket, onChange: valueOutputBucketChange }), validationResult.database === false && (_jsx(FormControl.Validation, { variant: "error", children: "Output bucket must have more than 1." }))] })] })), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: valueDescriptionChange }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsx(Button, { variant: "primary", disabled: !validationResult.database ||
+    return (_jsxs(Box, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New Datasource" }) }) }), _jsxs(Flash, { variant: "warning", children: [formValues.variant === 'athena' && (_jsxs(Text, { children: ["For ", _jsx(Link, { href: "https://aws.amazon.com/athena", children: "Amazon Athena" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate(secretsRoute, e), children: "Secrets" }), ' ', "are available:", '  ', _jsx(Text, { as: "code", children: "AWS_SECRET_ACCESS_KEY" }), '  ', _jsx(Text, { as: "code", children: "AWS_ACCESS_KEY_ID" }), '  ', _jsx(Text, { as: "code", children: "AWS_DEFAULT_REGION" })] })), formValues.variant === 'bigquery' && (_jsxs(Text, { children: ["For", ' ', _jsx(Link, { href: "https://cloud.google.com/bigquery", children: "Google Big Query" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate(secretsRoute, e), children: "Secret" }), ' ', "is available:", '  ', _jsx(Text, { as: "code", children: "GOOGLE_APPLICATION_CREDENTIALS" })] })), formValues.variant === 'mssentinel' && (_jsxs(Text, { children: ["For", ' ', _jsx(Link, { href: "https://learn.microsoft.com/en-us/azure/sentinel/overview?tabs=defender-portaly", children: "Microsoft Sentinel" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate(secretsRoute, e), children: "Secret" }), ' ', "is available:", '  ', _jsx(Text, { as: "code", children: "AZURE_TENANT_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_CLIENT_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_CLIENT_SECRET" }), ` `, _jsx(Text, { as: "code", children: "AZURE_SUBSCRIPTION_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_RESOURCE_GROUP" }), ` `, _jsx(Text, { as: "code", children: "MSSENTINEL_WORKSPACE_ID" }), ` `, _jsx(Text, { as: "code", children: "MSSENTINEL_WORKSPACE_NAME" })] })), formValues.variant === 'splunk' && (_jsxs(Text, { children: ["For ", _jsx(Link, { href: "https://www.splunk.com/", children: "Splunk" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate(secretsRoute, e), children: "Secret" }), ' ', "is available:", '  ', _jsx(Text, { as: "code", children: "SPLUNK_HOST" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_PORT" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_USERNAME" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_PASSWORD" })] }))] }), _jsx(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", sx: { gap: 3 }, children: _jsx(Box, { children: _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Datasource type" }), _jsxs(Select, { name: "type", value: formValues.variant, onChange: valueVariantChange, children: [_jsx(Select.Option, { value: "athena", children: "Amazon Athena" }), _jsx(Select.Option, { value: "bigquery", children: "Google BigQuery" }), _jsx(Select.Option, { value: "mssentinel", children: "Microsoft Sentinel" }), _jsx(Select.Option, { value: "splunk", children: "Splunk" })] }), _jsx(FormControl.Caption, { children: "Pick the most appropriate datasource type." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: valueNameChange, autoFocus: true }), _jsx(FormControl.Caption, { children: "Hint: The datasource name is a short name that identifies in a unique way your datasource." }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name length must be between 2 and 32 characters." }))] }), formValues.variant === 'athena' && (_jsxs(_Fragment, { children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Database" }), _jsx(TextInput, { block: true, value: formValues.database, onChange: valueDatabaseChange }), validationResult.database === false && (_jsx(FormControl.Validation, { variant: "error", children: "Database must have more than 1." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Output Bucket" }), _jsx(TextInput, { block: true, value: formValues.outputBucket, onChange: valueOutputBucketChange }), validationResult.database === false && (_jsx(FormControl.Validation, { variant: "error", children: "Output bucket must have more than 1." }))] })] })), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: valueDescriptionChange }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsx(Button, { variant: "primary", disabled: !validationResult.database ||
                                     !validationResult.outputBucket ||
                                     !validationResult.name ||
                                     !validationResult.description, sx: { marginTop: 2 }, onClick: e => {

package/lib/views/datasources/Datasources.d.ts

@@ -1,2 +1,8 @@
-export declare const Datasources: () => import("react/jsx-runtime").JSX.Element;
+export type DatasourcesProps = {
+    /** Route to navigate when clicking "New datasource" button. Defaults to '/new/datasource'. */
+    newDatasourceRoute?: string;
+    /** Base route for the datasources list (used for edit navigation). Defaults to current relative path. */
+    datasourcesListRoute?: string;
+};
+export declare const Datasources: ({ newDatasourceRoute, datasourcesListRoute, }?: DatasourcesProps) => import("react/jsx-runtime").JSX.Element;
 export default Datasources;

package/lib/views/datasources/Datasources.js

@@ -9,7 +9,7 @@ import { Blankslate, PageHeader, Table, DataTable, } from '@primer/react/experim
 import { Box } from '@datalayer/primer-addons';
 import { EditIcon } from '@datalayer/icons-react';
 import { useCache, useNavigate } from '../../hooks';
-const DatasourcesTable = () => {
+const DatasourcesTable = ({ datasourcesListRoute, }) => {
     const { useDatasources } = useCache();
     const datasourcesQuery = useDatasources();
     const navigate = useNavigate();
@@ -38,12 +38,14 @@ const DatasourcesTable = () => {
                     {
                         header: '',
                         field: 'id',
-                        renderCell: datasource => (_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(`${datasource.id}`, e) })),
+                        renderCell: datasource => (_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(datasourcesListRoute
+                                ? `${datasourcesListRoute}/${datasource.id}`
+                                : `${datasource.id}`, e) })),
                     },
                 ] })] }));
 };
-export const Datasources = () => {
+export const Datasources = ({ newDatasourceRoute = '/new/datasource', datasourcesListRoute, } = {}) => {
     const navigate = useNavigate();
-    return (_jsxs(PageLayout, { containerWidth: "full", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [_jsx(PageLayout.Header, { children: _jsxs(PageHeader, { children: [_jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "Datasources" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate('/new/datasource', e), children: "New datasource" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(DatasourcesTable, {}) }) })] }));
+    return (_jsxs(PageLayout, { containerWidth: "full", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [_jsx(PageLayout.Header, { children: _jsxs(PageHeader, { children: [_jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "Datasources" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate(newDatasourceRoute, e), children: "New datasource" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(DatasourcesTable, { datasourcesListRoute: datasourcesListRoute }) }) })] }));
 };
 export default Datasources;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/core",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "type": "module",
   "workspaces": [
     ".",

package/style/screencapture/index.css

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+.crosshairs {
+  position: fixed;
+  width: 100%;
+  z-index: 2147483645;
+}
+
+.crosshairs.hidden {
+  display: none;
+}
+
+.crosshairs::before,
+.crosshairs::after {
+  content: '';
+  position: absolute;
+}
+
+.crosshairs::before {
+  height: 24px;
+  width: 2px;
+  background: #fff;
+  top: -11px;
+}
+
+.crosshairs::after {
+  width: 24px;
+  height: 2px;
+  background: #fff;
+  left: -11px;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.overlay.highlighting {
+  background: none;
+  border-color: rgba(0, 0, 0, 0.5);
+  border-style: solid;
+}
+
+.crosshairs,
+.crosshairs:before,
+.crosshairs:after,
+.overlay,
+.overlay:before,
+.overlay:after {
+  box-sizing: border-box;
+}

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

@@ -1,3 +0,0 @@
-import { PropsWithChildren } from 'react';
-export declare const ScreenCaptureButton: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
-export default ScreenCaptureButton;

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

@@ -1,2 +0,0 @@
-export * from './ScreenCapture';
-export * from './ScreenCaptureButton';

package/lib/hooks/layouts/LayoutScreenshot.d.ts

@@ -1,3 +0,0 @@
-import './LayoutScreenshot.css';
-export declare const LayoutScreenshot: () => import("react/jsx-runtime").JSX.Element;
-export default LayoutScreenshot;

package/lib/hooks/useScreenshot.d.ts

@@ -1,18 +0,0 @@
-import { ReactNode } from 'react';
-export type ScreenshotContextType = {
-    closeScreenshot: () => void;
-    displayScreenshot: (nextScreenshot: any) => void;
-};
-export declare const ScreenshotContext: import("react").Context<ScreenshotContextType>;
-export declare function useScreenshot(): ScreenshotContextType;
-/**
- * The type for the Screenshot context provider.
- */
-export declare const ScreenshotContextProvider: import("react").Provider<ScreenshotContextType>;
-export type IScreenshotProviderProps = {
-    children?: ReactNode;
-    zIndex?: number;
-    disableDarken?: boolean;
-    screenshotSurface?: (qfds: any) => JSX.Element;
-};
-export declare function ScreenshotProvider({ children, zIndex, disableDarken, screenshotSurface, }: IScreenshotProviderProps): import("react/jsx-runtime").JSX.Element;

package/lib/hooks/useScreenshot.js

@@ -1,53 +0,0 @@
-import { Fragment as _Fragment, 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 { createContext, useState, useContext } from 'react';
-import { LayoutScreenshot } from './layouts';
-export const ScreenshotContext = createContext({
-    closeScreenshot: () => { },
-    displayScreenshot: (nextScreenshot) => { },
-});
-export function useScreenshot() {
-    const context = useContext(ScreenshotContext);
-    if (!context)
-        throw new Error('useContext must be inside a provider with a value.');
-    return context;
-}
-/**
- * The type for the Screenshot context provider.
- */
-export const ScreenshotContextProvider = ScreenshotContext.Provider;
-export function ScreenshotProvider({ children = null, zIndex = 9999, disableDarken = false, screenshotSurface = undefined, }) {
-    const defaultScreenshotSurface = {
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: disableDarken ? 'initial' : 'rgba(0, 0, 0, 0.5)',
-        zIndex,
-    };
-    const [screenshot, setScreenshot] = useState({
-        open: false,
-        render: (closeScreenshot) => _jsx(_Fragment, {}),
-    });
-    const displayScreenshot = (nextScreenshot) => {
-        setScreenshot({
-            open: true,
-            render: nextScreenshot,
-        });
-    };
-    const closeScreenshot = () => {
-        setScreenshot({
-            open: false,
-            render: (closeScreenshot) => _jsx(_Fragment, {}),
-        });
-    };
-    return (_jsxs(ScreenshotContextProvider, { value: { closeScreenshot, displayScreenshot }, children: [_jsx(LayoutScreenshot, {}), children, screenshot.open &&
-                (screenshotSurface ? (screenshotSurface(screenshot.render(closeScreenshot))) : (_jsx("div", { style: defaultScreenshotSurface, children: screenshot.render(closeScreenshot) })))] }));
-}

package/lib/utils/Screenshot.d.ts

@@ -1 +0,0 @@
-export declare const takeHTMLNodeScreenshot: (node: HTMLDivElement) => Promise<string>;