@datalayer/core 0.0.25 → 0.0.27

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/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/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/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.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;