@datalayer/core 0.0.25 → 0.0.26

package/lib/models/EnvironmentDTO.d.ts

@@ -1,5 +1,5 @@
 /**
- * Environment domain model for the Datalayer SDK.
+ * Environment domain model for the Datalayer Client.
  *
  * @module models/EnvironmentDTO
  */
@@ -47,7 +47,7 @@ export interface EnvironmentData {
 }
 /**
  * Stable public interface for Environment data.
- * This is the contract that SDK consumers can rely on.
+ * This is the contract that Client consumers can rely on.
  * The raw API may change, but this interface remains stable.
  */
 export interface EnvironmentJSON {
@@ -92,7 +92,7 @@ export declare class EnvironmentDTO {
      * Create an Environment instance.
      *
      * @param data - Environment data from API
-     * @param _sdk - SDK instance (not currently used but kept for consistency)
+     * @param _sdk - Client instance (not currently used but kept for consistency)
      */
     constructor(data: EnvironmentData, _sdk: DatalayerClient);
     /** Human-readable title for the environment (e.g., 'AI Environment', 'Python CPU Environment'). */

package/lib/models/EnvironmentDTO.js

@@ -21,11 +21,11 @@ export class EnvironmentDTO {
      * Create an Environment instance.
      *
      * @param data - Environment data from API
-     * @param _sdk - SDK instance (not currently used but kept for consistency)
+     * @param _sdk - Client instance (not currently used but kept for consistency)
      */
     constructor(data, _sdk) {
         this._data = data;
-        // SDK instance not currently used but kept for future extensibility
+        // Client instance not currently used but kept for future extensibility
     }
     // ========================================================================
     // Properties

package/lib/models/HealthCheck.d.ts

@@ -11,7 +11,7 @@ export declare class HealthCheck {
     /**
      * Create a HealthCheck instance.
      * @param data - The health check data
-     * @param sdk - Reference to the SDK instance (unused but kept for consistency)
+     * @param sdk - Reference to the Client instance (unused but kept for consistency)
      */
     constructor(data: any, sdk: any);
     /**

package/lib/models/HealthCheck.js

@@ -17,7 +17,7 @@ export class HealthCheck {
     /**
      * Create a HealthCheck instance.
      * @param data - The health check data
-     * @param sdk - Reference to the SDK instance (unused but kept for consistency)
+     * @param sdk - Reference to the Client instance (unused but kept for consistency)
      */
     constructor(data, sdk) {
         // Initialize properties

package/lib/models/ItemDTO.d.ts

@@ -18,7 +18,7 @@ export declare abstract class ItemDTO<TData> {
     /**
      * Create an Item instance.
      * @param data - Item data from API
-     * @param sdk - SDK instance
+     * @param sdk - Client instance
      */
     constructor(data: TData, sdk: DatalayerClient);
     /** Check if this item has been deleted. */
@@ -65,7 +65,7 @@ export declare abstract class ItemDTO<TData> {
     abstract toJSON(): any;
     /** String representation of the item. */
     toString(): string;
-    /** Get SDK token for API calls. */
+    /** Get Client token for API calls. */
     protected _getToken(): string;
     /** Get spacer API URL for API calls. */
     protected _getSpacerRunUrl(): string;

package/lib/models/ItemDTO.js

@@ -17,7 +17,7 @@ export class ItemDTO {
     /**
      * Create an Item instance.
      * @param data - Item data from API
-     * @param sdk - SDK instance
+     * @param sdk - Client instance
      */
     constructor(data, sdk) {
         this._data = data;
@@ -171,7 +171,7 @@ export class ItemDTO {
     // ========================================================================
     // Protected Helper Methods
     // ========================================================================
-    /** Get SDK token for API calls. */
+    /** Get Client token for API calls. */
     _getToken() {
         return this._sdk.getToken();
     }

package/lib/models/LexicalDTO.d.ts

@@ -80,7 +80,7 @@ export interface UpdateLexicalResponse {
 }
 /**
  * Stable public interface for Lexical data.
- * This is the contract that SDK consumers can rely on.
+ * This is the contract that Client consumers can rely on.
  * The raw API may change, but this interface remains stable.
  */
 export interface LexicalJSON {
@@ -118,7 +118,7 @@ export declare class LexicalDTO extends ItemDTO<LexicalData> {
      * Create a Lexical instance.
      *
      * @param data - Lexical data from API
-     * @param sdk - SDK instance
+     * @param sdk - Client instance
      */
     constructor(data: LexicalData, sdk: DatalayerClient);
     /** Document type identifier. */

package/lib/models/LexicalDTO.js

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 /**
- * Lexical domain model for the Datalayer SDK.
+ * Lexical domain model for the Datalayer Client.
  *
  * @module models/LexicalDTO
  */
@@ -26,7 +26,7 @@ export class LexicalDTO extends ItemDTO {
      * Create a Lexical instance.
      *
      * @param data - Lexical data from API
-     * @param sdk - SDK instance
+     * @param sdk - Client instance
      */
     constructor(data, sdk) {
         super(data, sdk);

package/lib/models/NotebookDTO.d.ts

@@ -17,7 +17,7 @@ export interface NotebookData {
 }
 /**
  * Stable public interface for Notebook data.
- * This is the contract that SDK consumers can rely on.
+ * This is the contract that Client consumers can rely on.
  * The raw API may change, but this interface remains stable.
  */
 export interface NotebookJSON {
@@ -51,7 +51,7 @@ export declare class NotebookDTO extends ItemDTO<NotebookData> {
      * Create a Notebook instance.
      *
      * @param data - Notebook data from API
-     * @param sdk - SDK instance
+     * @param sdk - Client instance
      */
     constructor(data: NotebookData, sdk: DatalayerClient);
     /** Document type identifier. */

package/lib/models/NotebookDTO.js

@@ -21,7 +21,7 @@ export class NotebookDTO extends ItemDTO {
      * Create a Notebook instance.
      *
      * @param data - Notebook data from API
-     * @param sdk - SDK instance
+     * @param sdk - Client instance
      */
     constructor(data, sdk) {
         super(data, sdk);

package/lib/models/RuntimeDTO.d.ts

@@ -30,7 +30,7 @@ export interface RuntimeData {
 }
 /**
  * Stable public interface for Runtime data.
- * This is the contract that SDK consumers can rely on.
+ * This is the contract that Client consumers can rely on.
  * The raw API may change, but this interface remains stable.
  */
 export interface RuntimeJSON {
@@ -118,7 +118,7 @@ export declare class RuntimeDTO {
      * Create a Runtime instance.
      *
      * @param data - Runtime data from API
-     * @param sdk - SDK instance
+     * @param sdk - Client instance
      */
     constructor(data: RuntimeData, sdk: DatalayerClient);
     /**

package/lib/models/RuntimeDTO.js

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 /**
- * Runtime domain model for the Datalayer SDK.
+ * Runtime domain model for the Datalayer Client.
  *
  * @module models/RuntimeDTO
  */
@@ -28,7 +28,7 @@ export class RuntimeDTO {
      * Create a Runtime instance.
      *
      * @param data - Runtime data from API
-     * @param sdk - SDK instance
+     * @param sdk - Client instance
      */
     constructor(data, sdk) {
         this._data = data;

package/lib/models/RuntimeSnapshotDTO.d.ts

@@ -1,5 +1,5 @@
 /**
- * Snapshot domain model for the Datalayer SDK.
+ * Snapshot domain model for the Datalayer Client.
  *
  * @module models/RuntimeSnapshotDTO
  */
@@ -39,7 +39,7 @@ export interface RuntimeSnapshotData {
 }
 /**
  * Stable public interface for Snapshot data.
- * This is the contract that SDK consumers can rely on.
+ * This is the contract that Client consumers can rely on.
  * The raw API may change, but this interface remains stable.
  */
 export interface RuntimeSnapshotJSON {
@@ -122,7 +122,7 @@ export declare class RuntimeSnapshotDTO {
      * Create a Runtime Snapshot instance.
      *
      * @param data - Snapshot data from API
-     * @param sdk - SDK instance
+     * @param sdk - Client instance
      */
     constructor(data: RuntimeSnapshotData, sdk: DatalayerClient);
     /**

package/lib/models/RuntimeSnapshotDTO.js

@@ -22,7 +22,7 @@ export class RuntimeSnapshotDTO {
      * Create a Runtime Snapshot instance.
      *
      * @param data - Snapshot data from API
-     * @param sdk - SDK instance
+     * @param sdk - Client instance
      */
     constructor(data, sdk) {
         this._data = data;

package/lib/models/Secret.d.ts

@@ -50,7 +50,7 @@ export interface CreateSecretRequest {
     name: string;
     /** Human-readable description */
     description?: string;
-    /** Plain text value (will be Base64 encoded by SDK) */
+    /** Plain text value (will be Base64 encoded by Client) */
     value: string;
 }
 /**
@@ -111,7 +111,7 @@ export interface DeleteSecretResponse {
     message: string;
 }
 /**
- * Secret domain model for the Datalayer SDK.
+ * Secret domain model for the Datalayer Client.
  * Provides state management and operations for user secrets.
  *
  * @example
@@ -136,7 +136,7 @@ export declare class SecretDTO {
     /**
      * Create a Secret instance.
      * @param data - Secret data from API
-     * @param sdk - SDK instance
+     * @param sdk - Client instance
      */
     constructor(data: SecretData, sdk: DatalayerClient);
     private _checkDeleted;

package/lib/models/Secret.js

@@ -16,7 +16,7 @@ export const asSecret = (s) => {
 // ============================================================================
 import { validateJSON } from '../api/utils/validation';
 /**
- * Secret domain model for the Datalayer SDK.
+ * Secret domain model for the Datalayer Client.
  * Provides state management and operations for user secrets.
  *
  * @example
@@ -41,7 +41,7 @@ export class SecretDTO {
     /**
      * Create a Secret instance.
      * @param data - Secret data from API
-     * @param sdk - SDK instance
+     * @param sdk - Client instance
      */
     constructor(data, sdk) {
         this._data = data;

package/lib/models/SpaceDTO.d.ts

@@ -18,7 +18,7 @@ export interface SpaceData {
 }
 /**
  * Stable public interface for Space data.
- * This is the contract that SDK consumers can rely on.
+ * This is the contract that Client consumers can rely on.
  * The raw API may change, but this interface remains stable.
  */
 export interface SpaceJSON {
@@ -55,7 +55,7 @@ export declare class SpaceDTO {
      * Create a Space instance.
      *
      * @param data - Space data from API
-     * @param sdk - SDK instance
+     * @param sdk - Client instance
      */
     constructor(data: SpaceData, sdk: DatalayerClient);
     /**

package/lib/models/SpaceDTO.js

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 /**
- * Space domain model for the Datalayer SDK.
+ * Space domain model for the Datalayer Client.
  *
  * @module models/SpaceDTO
  */
@@ -36,7 +36,7 @@ export class SpaceDTO {
      * Create a Space instance.
      *
      * @param data - Space data from API
-     * @param sdk - SDK instance
+     * @param sdk - Client instance
      */
     constructor(data, sdk) {
         this._data = data;
@@ -109,7 +109,7 @@ export class SpaceDTO {
      */
     async _createItem(data) {
         this._checkDeleted();
-        // Get necessary configuration from SDK
+        // Get necessary configuration from Client
         const token = this._sdk.getToken();
         const spacerRunUrl = this._sdk.getSpacerRunUrl();
         if (data.type === ItemTypes.NOTEBOOK) {

package/lib/models/UserDTO.d.ts

@@ -1,5 +1,5 @@
 /**
- * User model for the Datalayer SDK with rich functionality.
+ * User model for the Datalayer Client with rich functionality.
  *
  * @module models/UserDTO
  */
@@ -54,7 +54,7 @@ export declare class UserDTO {
      * Create a User instance.
      *
      * @param data - User data from API
-     * @param sdk - SDK instance (currently unused but kept for compatibility)
+     * @param sdk - Client instance (currently unused but kept for compatibility)
      */
     constructor(data: UserData, sdk?: DatalayerClient);
     get id(): string;

package/lib/models/UserDTO.js

@@ -13,7 +13,7 @@ export class UserDTO {
      * Create a User instance.
      *
      * @param data - User data from API
-     * @param sdk - SDK instance (currently unused but kept for compatibility)
+     * @param sdk - Client instance (currently unused but kept for compatibility)
      */
     constructor(data, sdk) {
         this._data = data;

package/lib/models/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * Models definitions for all Datalayer API services.
  *
- * This module consolidates all type definitions used by the SDK, providing
+ * This module consolidates all type definitions used by the Client, providing
  * comprehensive TypeScript support for requests, responses, and data models
  * across all Datalayer services.
  *

package/lib/models/index.js

@@ -5,7 +5,7 @@
 /**
  * Models definitions for all Datalayer API services.
  *
- * This module consolidates all type definitions used by the SDK, providing
+ * This module consolidates all type definitions used by the Client, providing
  * comprehensive TypeScript support for requests, responses, and data models
  * across all Datalayer services.
  *

package/lib/state/substates/CoreState.js

@@ -61,7 +61,7 @@ try {
                 ...htmlOverridingConfiguration,
             };
             configLogger.info('Datalayer configuration loaded from HTML page', initialConfiguration);
-            window.document.title = `${initialConfiguration.brand.name} Ξ ${initialConfiguration.brand.about}`;
+            window.document.title = `${initialConfiguration.brand.name} ☰ ${initialConfiguration.brand.about}`;
         }
     }
 }

package/lib/theme/DatalayerThemeProvider.d.ts

@@ -1,9 +1,29 @@
 import { type CSSProperties } from 'react';
 import { ThemeProviderProps } from '@primer/react';
-export interface IDatalayerThemeProviderProps extends Omit<ThemeProviderProps, 'theme'> {
+export interface IDatalayerThemeProviderProps extends Omit<ThemeProviderProps, 'theme' | 'colorMode'> {
     /**
-     * Base styles.
+     * Color mode to use.
+     * - `'light'` / `'dark'` — explicit override
+     * - `'auto'` — follow the operating system preference (prefers-color-scheme)
+     * - Primer's `'day'` / `'night'` are still accepted.
+     */
+    colorMode?: 'light' | 'dark' | 'auto' | 'day' | 'night';
+    /**
+     * Additional base styles merged on top of theme defaults.
      */
     baseStyles?: CSSProperties;
+    /**
+     * Optional Primer theme object. Defaults to the built-in datalayerTheme.
+     */
+    theme?: Record<string, any>;
+    /**
+     * Optional per-mode style overrides (base + button CSS vars).
+     * When provided, these replace the built-in datalayer styles entirely.
+     * The `baseStyles` prop is still merged on top.
+     */
+    themeStyles?: {
+        light: CSSProperties;
+        dark: CSSProperties;
+    };
 }
 export declare function DatalayerThemeProvider(props: React.PropsWithChildren<IDatalayerThemeProviderProps>): JSX.Element;

package/lib/theme/DatalayerThemeProvider.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { BaseStyles, ThemeProvider } from '@primer/react';
 import { datalayerTheme, datalayerColors } from './DatalayerTheme';
+import { useSystemColorMode } from './useSystemColorMode';
 const baseStyleLight = {
     backgroundColor: datalayerColors.white,
     color: datalayerColors.black,
@@ -32,15 +33,22 @@ const primaryButtonVarsDark = {
     '--color-btn-primary-hover-bg': datalayerColors.greenBright,
 };
 export function DatalayerThemeProvider(props) {
-    const { children, colorMode, baseStyles, ...rest } = props;
-    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,
+    const { children, colorMode, baseStyles, theme, themeStyles, ...rest } = props;
+    // Resolve 'auto' → actual system preference ('light' or 'dark').
+    const systemMode = useSystemColorMode();
+    const resolvedColorMode = colorMode === 'auto' ? systemMode : (colorMode ?? 'light');
+    const isDark = resolvedColorMode === 'dark' || resolvedColorMode === 'night';
+    const resolvedTheme = theme ?? datalayerTheme;
+    const defaultStyles = isDark
+        ? { ...baseStyleDark, ...primaryButtonVarsDark }
+        : { ...baseStyleLight, ...primaryButtonVarsLight };
+    const resolvedStyles = themeStyles
+        ? isDark
+            ? themeStyles.dark
+            : themeStyles.light
+        : defaultStyles;
+    return (_jsx(ThemeProvider, { colorMode: resolvedColorMode, theme: resolvedTheme, ...rest, children: _jsx(BaseStyles, { style: {
+                ...resolvedStyles,
                 ...baseStyles,
             }, children: children }) }));
 }

package/lib/theme/index.d.ts

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

package/lib/theme/index.js

@@ -5,3 +5,4 @@
 export * from './DatalayerTheme';
 export * from './DatalayerThemeProvider';
 export * from './Palette';
+export * from './useSystemColorMode';

package/lib/theme/useSystemColorMode.d.ts

@@ -0,0 +1,9 @@
+type ResolvedColorMode = 'light' | 'dark';
+/**
+ * React hook that tracks the operating system's preferred color scheme.
+ *
+ * Listens to `prefers-color-scheme` media query changes and returns
+ * either `'light'` or `'dark'`.
+ */
+export declare function useSystemColorMode(): ResolvedColorMode;
+export default useSystemColorMode;

package/lib/theme/useSystemColorMode.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect, useState } from 'react';
+/**
+ * React hook that tracks the operating system's preferred color scheme.
+ *
+ * Listens to `prefers-color-scheme` media query changes and returns
+ * either `'light'` or `'dark'`.
+ */
+export function useSystemColorMode() {
+    const getMode = () => typeof window !== 'undefined' &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+    const [mode, setMode] = useState(getMode);
+    useEffect(() => {
+        const media = window.matchMedia('(prefers-color-scheme: dark)');
+        const listener = (e) => setMode(e.matches ? 'dark' : 'light');
+        media.addEventListener('change', listener);
+        return () => media.removeEventListener('change', listener);
+    }, []);
+    return mode;
+}
+export default useSystemColorMode;

package/lib/views/iam-tokens/IAMTokenNew.d.ts

@@ -1,2 +1,6 @@
-export declare const IAMTokenNew: () => import("react/jsx-runtime").JSX.Element;
+export type IAMTokenNewProps = {
+    /** Route to navigate when clicking "List my Tokens". Defaults to '/settings/iam/tokens'. */
+    tokensListRoute?: string;
+};
+export declare const IAMTokenNew: ({ tokensListRoute, }?: IAMTokenNewProps) => import("react/jsx-runtime").JSX.Element;
 export default IAMTokenNew;

package/lib/views/iam-tokens/IAMTokenNew.js

@@ -10,7 +10,7 @@ import { CopyIcon } from '@primer/octicons-react';
 import { Calendar, defaultCalendarStrings } from '@fluentui/react';
 import { useCache, useNavigate, useToast } from '../../hooks';
 import { useRunStore } from '../../state';
-export const IAMTokenNew = () => {
+export const IAMTokenNew = ({ tokensListRoute = '/settings/iam/tokens', } = {}) => {
     const runStore = useRunStore();
     const { useCreateToken } = useCache();
     const createTokenMutation = useCreateToken();
@@ -108,7 +108,7 @@ export const IAMTokenNew = () => {
                                                 variant: 'success',
                                             });
                                         }
-                                    } })] })] }), _jsx(Box, { mt: 3, children: _jsx(Button, { onClick: e => navigate('/settings/iam/tokens', e), children: "List my Tokens" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New IAM Token" }) }) }), _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: "Token type" }), _jsx(Select, { name: "type", value: formValues.variant, onChange: valueVariantChange, children: _jsx(Select.Option, { value: "user_token", children: "User Token" }) }), _jsx(FormControl.Caption, { children: "Pick the most appropriate token 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 token name is a short name that identifies in a unique way your token." }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name length must be between 2 and 32 characters." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Expiration day" }), _jsx(Calendar, { showGoToToday: true, onSelectDate: expirationDateChange, value: formValues.expirationDate, strings: defaultCalendarStrings }), validationResult.expirationDate !== true ? (_jsx(FormControl.Validation, { variant: "error", children: "Pick an expiration date in the future." })) : (_jsxs(FormControl.Validation, { variant: "success", children: ["Expiration date:", ' ', formValues.expirationDate?.toLocaleDateString(), "."] }))] }), _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.name ||
+                                    } })] })] }), _jsx(Box, { mt: 3, children: _jsx(Button, { onClick: e => navigate(tokensListRoute, e), children: "List my Tokens" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New IAM Token" }) }) }), _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: "Token type" }), _jsx(Select, { name: "type", value: formValues.variant, onChange: valueVariantChange, children: _jsx(Select.Option, { value: "user_token", children: "User Token" }) }), _jsx(FormControl.Caption, { children: "Pick the most appropriate token 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 token name is a short name that identifies in a unique way your token." }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name length must be between 2 and 32 characters." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Expiration day" }), _jsx(Calendar, { showGoToToday: true, onSelectDate: expirationDateChange, value: formValues.expirationDate, strings: defaultCalendarStrings }), validationResult.expirationDate !== true ? (_jsx(FormControl.Validation, { variant: "error", children: "Pick an expiration date in the future." })) : (_jsxs(FormControl.Validation, { variant: "success", children: ["Expiration date:", ' ', formValues.expirationDate?.toLocaleDateString(), "."] }))] }), _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.name ||
                                         !validationResult.description ||
                                         !validationResult.expirationDate, sx: { marginTop: 2 }, onClick: e => {
                                         e.preventDefault();

package/lib/views/iam-tokens/IAMTokens.d.ts

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

package/lib/views/iam-tokens/IAMTokens.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 TokensTable = () => {
+const TokensTable = ({ tokensListRoute }) => {
     const { useTokens } = useCache();
     const getTokensQuery = useTokens();
     const navigate = useNavigate();
@@ -42,12 +42,14 @@ const TokensTable = () => {
                     {
                         header: '',
                         field: 'id',
-                        renderCell: token => (_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(`${token.id}`, e) })),
+                        renderCell: token => (_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(tokensListRoute
+                                ? `${tokensListRoute}/${token.id}`
+                                : `${token.id}`, e) })),
                     },
                 ] })] }));
 };
-export const IAMTokens = () => {
+export const IAMTokens = ({ newTokenRoute = '/new/token', tokensListRoute, } = {}) => {
     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: "IAM Tokens" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate('/new/token', e), children: "New IAM token" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(TokensTable, {}) }) })] }));
+    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: "IAM Tokens" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate(newTokenRoute, e), children: "New IAM token" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(TokensTable, { tokensListRoute: tokensListRoute }) }) })] }));
 };
 export default IAMTokens;

package/package.json

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