@datalayer/core 0.0.23 → 0.0.25

package/lib/client/auth/storage.js

@@ -112,22 +112,30 @@ export class NodeStorage {
     serviceUrl;
     constructor(serviceUrl = 'https://prod1.datalayer.run') {
         this.serviceUrl = serviceUrl;
-        try {
-            // Load keytar for system keyring access
-            // VS Code bundles keytar, but require path may vary
-            // Try multiple possible paths for compatibility
+        // Only load keytar in Node.js environment, never in browser
+        if (typeof window === 'undefined' &&
+            typeof process !== 'undefined' &&
+            process.versions?.node) {
             try {
-                this.keytar = require('keytar');
+                // Use eval to hide require from bundlers (Vite/Rollup/webpack)
+                const nodeRequire = eval('require');
+                try {
+                    this.keytar = nodeRequire('keytar');
+                }
+                catch {
+                    try {
+                        this.keytar = nodeRequire('@vscode/keytar');
+                    }
+                    catch {
+                        // Keyring not available
+                    }
+                }
             }
-            catch {
-                // Try alternate path for VS Code bundled keytar
-                this.keytar = require('@vscode/keytar');
+            catch (e) {
+                // Keyring not available, tokens will not persist across sessions
+                console.warn('keytar not available, tokens will not persist');
             }
         }
-        catch (e) {
-            // Keyring not available, tokens will not persist across sessions
-            console.warn('keytar not available, tokens will not persist');
-        }
     }
     /**
      * Get token from keyring, environment variable, or memory

package/lib/hooks/useCache.d.ts

@@ -297,7 +297,10 @@ export declare const useCache: ({ loginRoute }?: CacheProps) => {
         token: string;
     }, unknown>;
     useOAuth2AuthorizationURL: () => import("@tanstack/react-query").UseMutationResult<string, Error, Record<string, string>, unknown>;
-    useOAuth2AuthorizationLinkURL: () => import("@tanstack/react-query").UseMutationResult<string, Error, Record<string, string>, unknown>;
+    useOAuth2AuthorizationLinkURL: () => import("@tanstack/react-query").UseMutationResult<{
+        success: boolean;
+        autorization_url: string;
+    }, Error, Record<string, string>, unknown>;
     useGetGitHubProfile: () => 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, {
@@ -655,7 +658,9 @@ export declare const useCache: ({ loginRoute }?: CacheProps) => {
     useUpdateDatasource: () => import("@tanstack/react-query").UseMutationResult<any, Error, IDatasource, unknown>;
     useSecret: (secretId: string, options?: {
         enabled?: boolean;
-        refetchOnMount?: boolean;
+        refetchOnMount?: boolean | "always";
+        staleTime?: number;
+        gcTime?: number;
     }) => import("@tanstack/react-query").UseQueryResult<ISecret | null | undefined, Error>;
     useSecrets: () => import("@tanstack/react-query").UseQueryResult<any, Error>;
     useCreateSecret: () => import("@tanstack/react-query").UseMutationResult<any, Error, Omit<ISecret, "id">, unknown>;

package/lib/hooks/useCache.js

@@ -1834,6 +1834,10 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
     /**
      * Get all secrets
      */
+    // TODO: Previously this hook pre-populated individual secret caches with setQueryData,
+    // but this prevented useSecret from fetching fresh data (e.g., the value field).
+    // Consider re-adding cache pre-population if the list endpoint returns full secret data,
+    // or use a different query key pattern for partial vs full secret data.
     const useSecrets = () => {
         return useQuery({
             queryKey: queryKeys.secrets.all(),
@@ -1844,13 +1848,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
                 });
                 if (resp.success && resp.secrets) {
                     const secrets = resp.secrets
-                        .map((s) => {
-                        const secret = toSecret(s);
-                        if (secret) {
-                            queryClient.setQueryData(queryKeys.secrets.detail(secret.id), secret);
-                        }
-                        return secret;
-                    })
+                        .map((s) => toSecret(s))
                         .filter(Boolean);
                     return secrets;
                 }
@@ -2208,6 +2206,8 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
             ...DEFAULT_QUERY_OPTIONS,
             enabled: options?.enabled ?? !!secretId,
             refetchOnMount: options?.refetchOnMount ?? DEFAULT_QUERY_OPTIONS.refetchOnMount,
+            staleTime: options?.staleTime ?? DEFAULT_QUERY_OPTIONS.staleTime,
+            gcTime: options?.gcTime ?? DEFAULT_QUERY_OPTIONS.gcTime,
         });
     };
     /**
@@ -4485,7 +4485,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
                 const resp = await requestDatalayer({
                     url: `${configuration.iamRunUrl}/api/iam/v1/oauth2/authz/url/link?${queryString}`,
                 });
-                return resp.autorization_url;
+                return resp;
             },
         });
     };
@@ -4835,7 +4835,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
                     method: 'POST',
                     body: {
                         request_method: 'GET',
-                        request_url: 'https://api.linkedin.com/v2/me',
+                        request_url: 'https://api.linkedin.com/v2/userinfo',
                         request_token: accessToken,
                     },
                 });

package/lib/hooks/useNavigate.d.ts

@@ -2,5 +2,5 @@
  * Main navigation hook that provides a universal navigate function
  * Works with React Router, Next.js, or native browser navigation
  */
-export declare const useNavigate: () => (location: string, optionsOrEvent?: any, resetPortals?: boolean, extraOptions?: any) => void;
+export declare const useNavigate: () => (location: string | number, optionsOrEvent?: any, resetPortals?: boolean, extraOptions?: any) => void;
 export default useNavigate;

package/lib/hooks/useNavigate.js

@@ -36,7 +36,12 @@ export const useNavigate = () => {
     if (isReactRouter && rrNavigate) {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         return useCallback((to, options) => {
-            // For React Router, just pass through directly without side effects
+            // Scroll to top when navigating (except for history navigation)
+            if (typeof to === 'string') {
+                window.scrollTo(0, 0);
+                document.body.scrollTop = 0;
+            }
+            // For React Router, pass through directly
             return rrNavigate(to, options);
         }, [rrNavigate]);
     }
@@ -45,6 +50,11 @@ export const useNavigate = () => {
     // Wrap with our custom behavior for native navigation
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const navigate = useCallback((location, optionsOrEvent, resetPortals = true, extraOptions) => {
+        // Handle number for history navigation (e.g., -1 to go back)
+        if (typeof location === 'number') {
+            window.history.go(location);
+            return;
+        }
         // Handle different call signatures for native navigation
         let options = undefined;
         let event = undefined;

package/lib/theme/DatalayerTheme.d.ts

@@ -1,4 +1,19 @@
-declare const datalayerTheme: {
+/**
+ * Datalayer Accessible Color System
+ * Based on Datalayer's brand manual - WCAG AA/AAA compliant
+ */
+export declare const datalayerColors: {
+    black: string;
+    gray: string;
+    white: string;
+    greenBrand: string;
+    greenAccent: string;
+    greenText: string;
+    greenTint: string;
+    greenBright: string;
+    greenHover: string;
+};
+export declare const datalayerTheme: {
     animation: {
         easeOutCubic: string;
     };
@@ -34,4 +49,4 @@ declare const datalayerTheme: {
         dark: {};
     };
 };
-export { datalayerTheme };
+export default datalayerTheme;

package/lib/theme/DatalayerTheme.js

@@ -5,58 +5,224 @@
 import { theme as primerTheme } from '@primer/react';
 import cloneDeep from 'lodash/cloneDeep.js';
 import merge from 'lodash/merge.js';
+/**
+ * Datalayer Accessible Color System
+ * Based on Datalayer's brand manual - WCAG AA/AAA compliant
+ */
+export const datalayerColors = {
+    // Core Neutrals
+    black: '#000000', // Primary text - AAA on white
+    gray: '#59595C', // Secondary text - AA on white
+    white: '#FFFFFF', // Background
+    // Greens (Brand & Accessibility)
+    greenBrand: '#16A085', // Brand accent, icons, dividers, headings
+    greenAccent: '#1ABC9C', // Icons, charts, highlights on dark surfaces
+    greenText: '#117A65', // Accessible green for text & buttons (AA+ on white)
+    greenTint: '#E9F7F1', // Soft background for success / callouts
+    greenBright: '#2ECC71', // Highlights and glow on dark backgrounds
+    greenHover: '#0E6655', // Primary button hover
+};
 /**
  * Datalayer Theme for Primer React.
+ *
+ * Uses accessible color palette from Datalayer's brand manual.
  */
 const datalayerThemeDefs = {
     colorSchemes: {
         light: {
             colors: {
+                // Canvas colors
+                canvas: {
+                    default: datalayerColors.white,
+                    // subtle: datalayerColors.greenTint,
+                },
+                // Foreground colors
+                fg: {
+                    default: datalayerColors.black,
+                    muted: datalayerColors.gray,
+                    onEmphasis: datalayerColors.white,
+                },
+                // Accent colors (brand green)
+                accent: {
+                    fg: datalayerColors.greenText,
+                    emphasis: datalayerColors.greenBrand,
+                    muted: datalayerColors.greenAccent,
+                    // subtle: datalayerColors.greenTint,
+                },
+                // Success colors (green)
+                success: {
+                    fg: datalayerColors.greenText,
+                    emphasis: datalayerColors.greenBrand,
+                    muted: datalayerColors.greenAccent,
+                    // subtle: datalayerColors.greenTint,
+                },
+                // Button 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)',
+                    text: datalayerColors.black,
+                    bg: datalayerColors.white,
+                    border: datalayerColors.gray,
+                    hoverBg: datalayerColors.greenTint,
+                    hoverBorder: datalayerColors.gray,
+                    activeBg: datalayerColors.greenTint,
+                    activeBorder: datalayerColors.gray,
+                    selectedBg: datalayerColors.white,
+                    counterBg: datalayerColors.gray,
                     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)',
+                        text: datalayerColors.white,
+                        bg: datalayerColors.greenText,
+                        border: datalayerColors.greenText,
+                        hoverBg: datalayerColors.greenHover,
+                        hoverBorder: datalayerColors.greenHover,
+                        selectedBg: datalayerColors.greenHover,
+                        disabledText: 'rgba(255, 255, 255, 0.7)',
+                        disabledBg: datalayerColors.gray,
+                        disabledBorder: datalayerColors.gray,
+                        icon: datalayerColors.white,
+                        counterBg: 'rgba(0, 0, 0, 0.2)',
+                    },
+                    outline: {
+                        text: datalayerColors.greenText,
+                        hoverText: datalayerColors.white,
+                        hoverBg: datalayerColors.greenText,
+                        hoverBorder: datalayerColors.greenText,
+                        hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+                        selectedText: datalayerColors.white,
+                        selectedBg: datalayerColors.greenHover,
+                        selectedBorder: datalayerColors.greenHover,
+                        disabledText: datalayerColors.gray,
+                        disabledBg: datalayerColors.greenTint,
+                        disabledCounterBg: 'rgba(0, 0, 0, 0.05)',
+                        counterBg: 'rgba(0, 0, 0, 0.05)',
+                        counterFg: datalayerColors.greenText,
+                        hoverCounterFg: datalayerColors.white,
+                        disabledCounterFg: datalayerColors.gray,
+                    },
+                    danger: {
+                        text: '#d32f2f',
+                        hoverText: datalayerColors.white,
+                        hoverBg: '#d32f2f',
+                        hoverBorder: '#d32f2f',
+                        hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+                        selectedText: datalayerColors.white,
+                        selectedBg: '#b71c1c',
+                        selectedBorder: '#b71c1c',
+                        disabledText: 'rgba(211, 47, 47, 0.5)',
+                        disabledBg: datalayerColors.greenTint,
+                        disabledCounterBg: 'rgba(211, 47, 47, 0.05)',
+                        counterBg: 'rgba(211, 47, 47, 0.1)',
+                        counterFg: '#d32f2f',
+                        hoverCounterFg: datalayerColors.white,
+                        disabledCounterFg: 'rgba(211, 47, 47, 0.5)',
+                        icon: '#d32f2f',
                     },
                 },
             },
             shadows: {},
         },
         dark: {
-            colors: {},
+            colors: {
+                // Canvas colors
+                canvas: {
+                    default: datalayerColors.black,
+                    subtle: '#0d1117',
+                },
+                // Foreground colors
+                fg: {
+                    default: datalayerColors.white,
+                    muted: '#8b949e',
+                    onEmphasis: datalayerColors.white,
+                },
+                // Accent colors (bright greens for dark mode)
+                accent: {
+                    fg: datalayerColors.greenAccent,
+                    emphasis: datalayerColors.greenBright,
+                    muted: datalayerColors.greenBrand,
+                    subtle: '#1f352d',
+                },
+                // Success colors
+                success: {
+                    fg: datalayerColors.greenAccent,
+                    emphasis: datalayerColors.greenBright,
+                    muted: datalayerColors.greenBrand,
+                    subtle: '#1f352d',
+                },
+                // Button colors for dark mode
+                btn: {
+                    text: '#c9d1d9',
+                    bg: '#21262d',
+                    border: 'rgba(240, 246, 252, 0.1)',
+                    hoverBg: '#30363d',
+                    hoverBorder: '#8b949e',
+                    activeBg: 'hsla(212, 12%, 18%, 1)',
+                    activeBorder: '#6e7681',
+                    selectedBg: '#161b22',
+                    counterBg: '#30363d',
+                    primary: {
+                        text: datalayerColors.white,
+                        bg: datalayerColors.greenAccent,
+                        border: 'rgba(240, 246, 252, 0.1)',
+                        hoverBg: datalayerColors.greenBright,
+                        hoverBorder: 'rgba(240, 246, 252, 0.1)',
+                        selectedBg: datalayerColors.greenBright,
+                        disabledText: 'rgba(255, 255, 255, 0.5)',
+                        disabledBg: 'rgba(22, 160, 133, 0.6)',
+                        disabledBorder: 'rgba(240, 246, 252, 0.1)',
+                        icon: datalayerColors.white,
+                        counterBg: 'rgba(0, 0, 0, 0.2)',
+                    },
+                    outline: {
+                        text: datalayerColors.greenAccent,
+                        hoverText: datalayerColors.white,
+                        hoverBg: datalayerColors.greenAccent,
+                        hoverBorder: datalayerColors.greenAccent,
+                        hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+                        selectedText: datalayerColors.white,
+                        selectedBg: datalayerColors.greenBright,
+                        selectedBorder: datalayerColors.greenBright,
+                        disabledText: 'rgba(26, 188, 156, 0.5)',
+                        disabledBg: 'rgba(26, 188, 156, 0.1)',
+                        disabledCounterBg: 'rgba(26, 188, 156, 0.05)',
+                        counterBg: 'rgba(26, 188, 156, 0.1)',
+                        counterFg: datalayerColors.greenAccent,
+                        hoverCounterFg: datalayerColors.white,
+                        disabledCounterFg: 'rgba(26, 188, 156, 0.5)',
+                    },
+                    danger: {
+                        text: '#f85149',
+                        hoverText: datalayerColors.white,
+                        hoverBg: '#da3633',
+                        hoverBorder: '#f85149',
+                        hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+                        selectedText: datalayerColors.white,
+                        selectedBg: '#b62324',
+                        selectedBorder: '#ff7b72',
+                        disabledText: 'rgba(248, 81, 73, 0.5)',
+                        disabledBg: 'rgba(248, 81, 73, 0.1)',
+                        disabledCounterBg: 'rgba(248, 81, 73, 0.05)',
+                        counterBg: 'rgba(248, 81, 73, 0.1)',
+                        counterFg: '#f85149',
+                        hoverCounterFg: datalayerColors.white,
+                        disabledCounterFg: 'rgba(248, 81, 73, 0.5)',
+                        icon: '#f85149',
+                    },
+                },
+            },
             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 datalayerTheme = merge(primerOthers, datalayerOthers, {
+const { colorSchemes: datalayerSchemes, ...datalayerOthers } = datalayerThemeDefs;
+// Merge with the light theme to ensure all variables are defined.
+export const datalayerTheme = merge(primerOthers, datalayerOthers, {
     colorSchemes: { light: {}, dark: {} },
 });
 datalayerTheme.colorSchemes.light = {
-    colors: merge(primerSchemes.light.colors, jupyterSchemes.light.colors),
-    shadows: merge(primerSchemes.light.shadows, jupyterSchemes.light.shadows),
+    colors: merge(primerSchemes.light.colors, datalayerSchemes.light.colors),
+    shadows: merge(primerSchemes.light.shadows, datalayerSchemes.light.shadows),
 };
 datalayerTheme.colorSchemes.dark = {
-    colors: merge(primerSchemes.dark.colors, jupyterSchemes.dark.colors),
-    shadows: merge(primerSchemes.dark.shadows, jupyterSchemes.dark.shadows),
+    colors: merge(primerSchemes.dark.colors, datalayerSchemes.dark.colors),
+    shadows: merge(primerSchemes.dark.shadows, datalayerSchemes.dark.shadows),
 };
-export { datalayerTheme };
+export default datalayerTheme;

package/lib/theme/DatalayerThemeProvider.d.ts

@@ -1,6 +1,6 @@
 import { type CSSProperties } from 'react';
 import { ThemeProviderProps } from '@primer/react';
-export interface IDatalayerThemeProviderProps extends ThemeProviderProps {
+export interface IDatalayerThemeProviderProps extends Omit<ThemeProviderProps, 'theme'> {
     /**
      * Base styles.
      */

package/lib/theme/DatalayerThemeProvider.js

@@ -1,11 +1,46 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { BaseStyles, ThemeProvider } from '@primer/react';
+import { datalayerTheme, datalayerColors } from './DatalayerTheme';
+const baseStyleLight = {
+    backgroundColor: datalayerColors.white,
+    color: datalayerColors.black,
+    fontSize: 'var(--text-body-size-medium)',
+};
+const baseStyleDark = {
+    backgroundColor: datalayerColors.black,
+    color: datalayerColors.white,
+    fontSize: 'var(--text-body-size-medium)',
+};
+const primaryButtonVarsLight = {
+    '--button-primary-bgColor-rest': datalayerColors.greenText,
+    '--button-primary-bgColor-hover': datalayerColors.greenHover,
+    '--button-primary-bgColor-active': datalayerColors.greenHover,
+    '--button-primary-fgColor-rest': datalayerColors.white,
+    '--button-primary-borderColor-rest': datalayerColors.greenText,
+    '--button-primary-borderColor-hover': datalayerColors.greenHover,
+    '--color-btn-primary-bg': datalayerColors.greenText,
+    '--color-btn-primary-hover-bg': datalayerColors.greenHover,
+};
+const primaryButtonVarsDark = {
+    '--button-primary-bgColor-rest': datalayerColors.greenAccent,
+    '--button-primary-bgColor-hover': datalayerColors.greenBright,
+    '--button-primary-bgColor-active': datalayerColors.greenBright,
+    '--button-primary-fgColor-rest': datalayerColors.white,
+    '--button-primary-borderColor-rest': datalayerColors.greenAccent,
+    '--button-primary-borderColor-hover': datalayerColors.greenBright,
+    '--color-btn-primary-bg': datalayerColors.greenAccent,
+    '--color-btn-primary-hover-bg': datalayerColors.greenBright,
+};
 export function DatalayerThemeProvider(props) {
     const { children, colorMode, baseStyles, ...rest } = props;
-    return (_jsx(ThemeProvider, { colorMode: colorMode, ...rest, children: _jsx(BaseStyles, { style: {
-                backgroundColor: 'var(--bgColor-default)',
-                color: 'var(--fgColor-default)',
-                fontSize: 'var(--text-body-size-medium)',
+    const isDark = colorMode === 'dark' || colorMode === 'night';
+    const baseStyleDefaults = isDark ? baseStyleDark : baseStyleLight;
+    const primaryButtonVars = isDark
+        ? primaryButtonVarsDark
+        : primaryButtonVarsLight;
+    return (_jsx(ThemeProvider, { colorMode: colorMode, theme: datalayerTheme, ...rest, children: _jsx(BaseStyles, { style: {
+                ...baseStyleDefaults,
+                ...primaryButtonVars,
                 ...baseStyles,
             }, children: children }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/core",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "type": "module",
   "workspaces": [
     ".",
@@ -103,7 +103,7 @@
   },
   "dependencies": {
     "@datalayer/icons-react": "^1.0.6",
-    "@datalayer/jupyter-lexical": "^1.0.8",
+    "@datalayer/jupyter-lexical": "^1.0.9",
     "@datalayer/jupyter-react": "^2.0.2",
     "@datalayer/primer-addons": "^1.0.4",
     "@datalayer/primer-rjsf": "^1.0.1",
@@ -125,7 +125,7 @@
     "@lumino/disposable": "^2.1.5",
     "@lumino/polling": "^2.1.5",
     "@lumino/signaling": "^2.1.5",
-    "@lumino/widgets": "^2.7.2",
+    "@lumino/widgets": "^2.7.3",
     "@primer/behaviors": "^1.8.4",
     "@primer/brand-primitives": "^0.51.0",
     "@primer/css": "^21.5.1",