@datalayer/core 1.0.1 → 1.0.3

package/lib/views/iam/index.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export { SignInSimple } from './SignInSimple';

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

@@ -8,29 +8,33 @@ import { useParams } from 'react-router-dom';
 import { PageHeader, Heading, Text, Button, TextInput, FormControl, Textarea, Label, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { BoringAvatar } from '../../components/avatars';
-import { useCache, useToast } from '../../hooks';
+import { useCache, useNavigate, useToast } from '../../hooks';
 import { useRunStore } from '../../state';
 export const IAMTokenEdit = () => {
     const { tokenId } = useParams();
     const runStore = useRunStore();
+    const navigate = useNavigate();
     const { enqueueToast } = useToast();
-    const { useUpdateToken, useToken } = useCache();
+    const { useUpdateToken, useToken, useDeleteToken } = useCache();
     const getTokenQuery = useToken(tokenId);
     const updateTokenMutation = useUpdateToken();
+    const deleteTokenMutation = useDeleteToken();
     const [token, setToken] = useState();
     const [formValues, setFormValues] = useState({
         name: token?.name,
+        nameConfirm: '',
         description: token?.description,
     });
     const [validationResult, setValidationResult] = useState({
         name: undefined,
+        nameConfirm: undefined,
         description: undefined,
     });
     useEffect(() => {
         if (getTokenQuery.data) {
             const token = getTokenQuery.data;
             setToken(token);
-            setFormValues({ ...token });
+            setFormValues({ ...token, nameConfirm: '' });
         }
     }, [getTokenQuery.data]);
     const nameNameChange = (event) => {
@@ -39,6 +43,12 @@ export const IAMTokenEdit = () => {
             name: event.target.value,
         }));
     };
+    const nameConfirmChange = (event) => {
+        setFormValues(prevFormValues => ({
+            ...prevFormValues,
+            nameConfirm: event.target.value,
+        }));
+    };
     const nameDescriptionChange = (event) => {
         setFormValues(prevFormValues => ({
             ...prevFormValues,
@@ -53,6 +63,7 @@ export const IAMTokenEdit = () => {
                 : formValues.name.length > 2
                     ? true
                     : false,
+            nameConfirm: formValues.nameConfirm === token?.name ? true : false,
             description: formValues.description === undefined
                 ? undefined
                 : formValues.description.length > 2
@@ -81,6 +92,44 @@ export const IAMTokenEdit = () => {
             },
         });
     };
-    return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(Heading, { sx: { fontSize: 3 }, children: "IAM Token" }) }), _jsxs(Box, { display: "flex", children: [_jsxs(Box, { children: [_jsx(BoringAvatar, { displayName: token?.name, size: 100, style: { paddingRight: 10 } }), _jsx(Text, { as: "h2", sx: { paddingTop: 3 }, children: token?.name }), _jsx(Box, { mt: 3, children: _jsx(Label, { size: "large", children: token?.variant }) })] }), _jsx(Box, { ml: 10, children: _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: nameNameChange }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name must have more than 2 characters." }))] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: nameDescriptionChange, rows: 5 }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Expiration date" }), _jsx(TextInput, { block: true, value: token?.expirationDate.toLocaleDateString(), onChange: nameNameChange, disabled: true })] }), _jsx(Button, { variant: "primary", disabled: !validationResult.name || !validationResult.description, sx: { marginTop: 3 }, onClick: nameSubmit, children: "Update token" })] }) })] })] }));
+    const handleDelete = async () => {
+        runStore.layout().showBackdrop('Deleting the token...');
+        deleteTokenMutation.mutate(token.id, {
+            onSuccess: (resp) => {
+                if (resp.success) {
+                    enqueueToast('The token is successfully deleted.', {
+                        variant: 'success',
+                    });
+                    navigate('/settings/iam/tokens');
+                }
+                else {
+                    enqueueToast(resp.message || 'Failed to delete token.', {
+                        variant: 'error',
+                    });
+                }
+            },
+            onError: () => {
+                enqueueToast('Failed to delete token.', { variant: 'error' });
+            },
+            onSettled: () => {
+                runStore.layout().hideBackdrop();
+            },
+        });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(Heading, { sx: { fontSize: 3 }, children: "IAM Token" }) }), _jsxs(Box, { display: "flex", children: [_jsxs(Box, { children: [_jsx(BoringAvatar, { displayName: token?.name, size: 100, style: { paddingRight: 10 } }), _jsx(Text, { as: "h2", sx: { paddingTop: 3 }, children: token?.name }), _jsx(Box, { mt: 3, children: _jsx(Label, { size: "large", children: token?.variant }) })] }), _jsxs(Box, { ml: 10, children: [_jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: nameNameChange }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name must have more than 2 characters." }))] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: nameDescriptionChange, rows: 5 }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Expiration date" }), _jsx(TextInput, { block: true, value: token?.expirationDate.toLocaleDateString(), onChange: nameNameChange, disabled: true })] }), _jsx(Button, { variant: "primary", disabled: !validationResult.name || !validationResult.description, sx: { marginTop: 3 }, onClick: nameSubmit, children: "Update token" })] }), _jsxs(Box, { sx: { marginTop: 3 }, children: [_jsx(Heading, { as: "h2", sx: {
+                                            fontSize: 4,
+                                            fontWeight: 'normal',
+                                            color: 'danger.fg',
+                                            mb: 2,
+                                        }, children: "Danger zone" }), _jsxs(Box, { sx: {
+                                            border: '1px solid',
+                                            borderColor: 'danger.emphasis',
+                                            borderRadius: 2,
+                                            p: 3,
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'space-between',
+                                            gap: 3,
+                                        }, children: [_jsxs(Box, { sx: { display: 'grid', gap: 1 }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', color: 'danger.fg' }, children: "Confirm the token name to delete" }), _jsx(FormControl, { children: _jsx(TextInput, { block: true, value: formValues.nameConfirm, onChange: nameConfirmChange }) }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "This operation is not reversible." })] }), _jsx(Button, { variant: "danger", disabled: !validationResult.nameConfirm, onClick: handleDelete, children: "Delete token" })] })] })] })] })] }));
 };
 export default IAMTokenEdit;

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

@@ -1,52 +1,84 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /*
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useState, useEffect } from 'react';
-import { PageLayout, Button, IconButton, Text, Label, RelativeTime, } from '@primer/react';
+import { useState, useEffect, useRef } from 'react';
+import { PageLayout, Button, IconButton, Text, Label, RelativeTime, ConfirmationDialog, } from '@primer/react';
 import { Blankslate, PageHeader, Table, DataTable, } from '@primer/react/experimental';
 import { Box } from '@datalayer/primer-addons';
 import { EditIcon } from '@datalayer/icons-react';
-import { useCache, useNavigate } from '../../hooks';
+import { TrashIcon } from '@primer/octicons-react';
+import { useCache, useNavigate, useToast } from '../../hooks';
 const TokensTable = ({ tokensListRoute }) => {
-    const { useTokens } = useCache();
+    const { useTokens, useDeleteToken } = useCache();
+    const { enqueueToast } = useToast();
     const getTokensQuery = useTokens();
+    const deleteTokenMutation = useDeleteToken();
     const navigate = useNavigate();
     const [tokens, setTokens] = useState([]);
+    const [deletingToken, setDeletingToken] = useState(null);
+    const returnFocusRef = useRef(null);
     useEffect(() => {
         if (getTokensQuery.data) {
             setTokens(getTokensQuery.data);
         }
     }, [getTokensQuery.data]);
-    return tokens.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Heading, { children: "IAM Tokens" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No IAM Tokens found." }) })] })) : (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h2", id: "tokens", children: "IAM Tokens" }), _jsx(Table.Subtitle, { as: "p", id: "tokens-subtitle", children: "Your tokens." }), _jsx(DataTable, { "aria-labelledby": "teams", "aria-describedby": "teams-subtitle", data: tokens, columns: [
-                    {
-                        header: 'Type',
-                        field: 'variant',
-                        renderCell: token => _jsx(Label, { children: token.variant }),
-                    },
-                    {
-                        header: 'Name',
-                        field: 'name',
-                        rowHeader: true,
-                    },
-                    {
-                        header: 'Description',
-                        field: 'description',
-                    },
-                    {
-                        header: 'Expiration date',
-                        field: 'expirationDate',
-                        renderCell: token => (_jsx(RelativeTime, { date: new Date(token.expirationDate) })),
-                    },
-                    {
-                        header: '',
-                        field: 'id',
-                        renderCell: token => (_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(tokensListRoute
-                                ? `${tokensListRoute}/${token.id}`
-                                : `${token.id}`, e) })),
-                    },
-                ] })] }));
+    const handleDeleteConfirm = () => {
+        if (!deletingToken)
+            return;
+        deleteTokenMutation.mutate(deletingToken.id, {
+            onSuccess: (resp) => {
+                if (resp.success) {
+                    enqueueToast(`Token "${deletingToken.name}" deleted.`, {
+                        variant: 'success',
+                    });
+                }
+                else {
+                    enqueueToast(resp.message || 'Failed to delete token.', {
+                        variant: 'error',
+                    });
+                }
+            },
+            onError: () => {
+                enqueueToast('Failed to delete token.', { variant: 'error' });
+            },
+            onSettled: () => setDeletingToken(null),
+        });
+    };
+    return tokens.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Heading, { children: "IAM Tokens" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No IAM Tokens found." }) })] })) : (_jsxs(_Fragment, { children: [_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h2", id: "tokens", children: "IAM Tokens" }), _jsx(Table.Subtitle, { as: "p", id: "tokens-subtitle", children: "Your tokens." }), _jsx(DataTable, { "aria-labelledby": "teams", "aria-describedby": "teams-subtitle", data: tokens, columns: [
+                            {
+                                header: 'Type',
+                                field: 'variant',
+                                renderCell: token => _jsx(Label, { children: token.variant }),
+                            },
+                            {
+                                header: 'Name',
+                                field: 'name',
+                                rowHeader: true,
+                            },
+                            {
+                                header: 'Description',
+                                field: 'description',
+                            },
+                            {
+                                header: 'Expiration date',
+                                field: 'expirationDate',
+                                renderCell: token => (_jsx(RelativeTime, { date: new Date(token.expirationDate) })),
+                            },
+                            {
+                                header: '',
+                                field: 'id',
+                                renderCell: token => (_jsxs(Box, { display: "flex", sx: { gap: 1 }, children: [_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(tokensListRoute
+                                                ? `${tokensListRoute}/${token.id}`
+                                                : `${token.id}`, e) }), _jsx(IconButton, { ref: returnFocusRef, icon: TrashIcon, "aria-label": "Delete", size: "small", variant: "invisible", sx: { color: 'danger.fg' }, onClick: () => setDeletingToken(token) })] })),
+                            },
+                        ] })] }), deletingToken && (_jsxs(ConfirmationDialog, { title: "Delete token", onClose: gesture => {
+                    if (gesture === 'confirm')
+                        handleDeleteConfirm();
+                    else
+                        setDeletingToken(null);
+                }, confirmButtonContent: "Delete", confirmButtonType: "danger", children: ["Are you sure you want to delete the token", ' ', _jsx("strong", { children: deletingToken.name }), "? This action cannot be undone."] }))] }));
 };
 export const IAMTokens = ({ newTokenRoute = '/new/token', tokensListRoute, } = {}) => {
     const navigate = useNavigate();

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

@@ -1,53 +1,85 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /*
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useState, useEffect } from 'react';
-import { PageLayout, Button, IconButton, Text, Label, RelativeTime, } from '@primer/react';
+import { useState, useEffect, useRef } from 'react';
+import { PageLayout, Button, IconButton, Text, Label, RelativeTime, ConfirmationDialog, } from '@primer/react';
 import { Blankslate, PageHeader, Table, DataTable, } from '@primer/react/experimental';
 import { Box } from '@datalayer/primer-addons';
 import { EditIcon } from '@datalayer/icons-react';
-import { useCache, useNavigate } from '../../hooks';
+import { TrashIcon } from '@primer/octicons-react';
+import { useCache, useNavigate, useToast } from '../../hooks';
 const TokensTable = () => {
-    const { useTokens } = useCache();
+    const { useTokens, useDeleteToken } = useCache();
+    const { enqueueToast } = useToast();
     const getTokensQuery = useTokens();
+    const deleteTokenMutation = useDeleteToken();
     const navigate = useNavigate();
     const [tokens, setTokens] = useState([]);
+    const [deletingToken, setDeletingToken] = useState(null);
+    const returnFocusRef = useRef(null);
     useEffect(() => {
         if (getTokensQuery.data) {
             setTokens(getTokensQuery.data);
         }
     }, [getTokensQuery.data]);
-    return tokens.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Heading, { children: "Tokens" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No Tokens found." }) })] })) : (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h2", id: "tokens", children: "Tokens" }), _jsx(Table.Subtitle, { as: "p", id: "tokens-subtitle", children: "Your tokens." }), _jsx(DataTable, { "aria-labelledby": "teams", "aria-describedby": "teams-subtitle", data: tokens, columns: [
-                    {
-                        header: 'Type',
-                        field: 'variant',
-                        renderCell: token => _jsx(Label, { children: token.variant }),
-                    },
-                    {
-                        header: 'Name',
-                        field: 'name',
-                        rowHeader: true,
-                    },
-                    {
-                        header: 'Description',
-                        field: 'description',
-                    },
-                    {
-                        header: 'Expiration date',
-                        field: 'expirationDate',
-                        renderCell: token => (_jsx(RelativeTime, { date: new Date(token.expirationDate) })),
-                    },
-                    {
-                        header: '',
-                        field: 'id',
-                        renderCell: token => (_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(`${token.id}`, e) })),
-                    },
-                ] })] }));
+    const handleDeleteConfirm = () => {
+        if (!deletingToken)
+            return;
+        deleteTokenMutation.mutate(deletingToken.id, {
+            onSuccess: (resp) => {
+                if (resp.success) {
+                    enqueueToast(`Token "${deletingToken.name}" deleted.`, {
+                        variant: 'success',
+                    });
+                }
+                else {
+                    enqueueToast(resp.message || 'Failed to delete token.', {
+                        variant: 'error',
+                    });
+                }
+            },
+            onError: () => {
+                enqueueToast('Failed to delete token.', { variant: 'error' });
+            },
+            onSettled: () => setDeletingToken(null),
+        });
+    };
+    return tokens.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Heading, { children: "Tokens" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No Tokens found." }) })] })) : (_jsxs(_Fragment, { children: [_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h2", id: "tokens", children: "Tokens" }), _jsx(Table.Subtitle, { as: "p", id: "tokens-subtitle", children: "Your tokens." }), _jsx(DataTable, { "aria-labelledby": "teams", "aria-describedby": "teams-subtitle", data: tokens, columns: [
+                            {
+                                header: 'Type',
+                                field: 'variant',
+                                renderCell: token => _jsx(Label, { children: token.variant }),
+                            },
+                            {
+                                header: 'Name',
+                                field: 'name',
+                                rowHeader: true,
+                            },
+                            {
+                                header: 'Description',
+                                field: 'description',
+                            },
+                            {
+                                header: 'Expiration date',
+                                field: 'expirationDate',
+                                renderCell: token => (_jsx(RelativeTime, { date: new Date(token.expirationDate) })),
+                            },
+                            {
+                                header: '',
+                                field: 'id',
+                                renderCell: token => (_jsxs(Box, { display: "flex", sx: { gap: 1 }, children: [_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(`${token.id}`, e) }), _jsx(IconButton, { ref: returnFocusRef, icon: TrashIcon, "aria-label": "Delete", size: "small", variant: "invisible", sx: { color: 'danger.fg' }, onClick: () => setDeletingToken(token) })] })),
+                            },
+                        ] })] }), deletingToken && (_jsxs(ConfirmationDialog, { title: "Delete token", onClose: gesture => {
+                    if (gesture === 'confirm')
+                        handleDeleteConfirm();
+                    else
+                        setDeletingToken(null);
+                }, confirmButtonContent: "Delete", confirmButtonType: "danger", children: ["Are you sure you want to delete the token", ' ', _jsx("strong", { children: deletingToken.name }), "? This action cannot be undone."] }))] }));
 };
 export const Tokens = () => {
     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: "Tokens" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate('/new/token', e), children: "New 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: "Tokens" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate('/tokens/new', e), children: "New token" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(TokensTable, {}) }) })] }));
 };
 export default Tokens;

package/lib/views/index.d.ts

@@ -1 +1,2 @@
-export {};
+export * from './iam';
+export * from './profile';

package/lib/views/index.js

@@ -1,5 +1,6 @@
-export {};
 /*
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
+export * from './iam';
+export * from './profile';

package/lib/views/profile/UserBadge.d.ts

@@ -0,0 +1,18 @@
+/**
+ * UserBadge – Shows the authenticated user's display name.
+ *
+ * On hover, reveals a JWT details popover with email, handle, UID,
+ * issued/expiry timestamps, roles, and the raw decoded claims.
+ *
+ * The trigger text and the popover share a single container so the
+ * popover stays open while the mouse travels from the label into it.
+ *
+ * @module views/profile
+ */
+import React from 'react';
+export interface UserBadgeProps {
+    /** Raw JWT bearer token. */
+    token: string;
+}
+export declare const UserBadge: React.FC<UserBadgeProps>;
+export default UserBadge;

package/lib/views/profile/UserBadge.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * UserBadge – Shows the authenticated user's display name.
+ *
+ * On hover, reveals a JWT details popover with email, handle, UID,
+ * issued/expiry timestamps, roles, and the raw decoded claims.
+ *
+ * The trigger text and the popover share a single container so the
+ * popover stays open while the mouse travels from the label into it.
+ *
+ * @module views/profile
+ */
+import { useState, useRef, useCallback } from 'react';
+import { Box, Text } from '@primer/react';
+import { parseJwtPayload, getDatalayerJwtUser, getDatalayerDisplayName, } from '../../utils/Jwt';
+// ── Component ─────────────────────────────────────────────────────
+export const UserBadge = ({ token }) => {
+    const [open, setOpen] = useState(false);
+    const closeTimer = useRef(null);
+    const handleEnter = useCallback(() => {
+        if (closeTimer.current)
+            clearTimeout(closeTimer.current);
+        setOpen(true);
+    }, []);
+    const handleLeave = useCallback(() => {
+        // Small delay so the mouse can travel from the label into the popover
+        // without it closing.
+        closeTimer.current = setTimeout(() => setOpen(false), 120);
+    }, []);
+    const user = getDatalayerJwtUser(token);
+    const displayName = getDatalayerDisplayName(user, user?.handle ?? '');
+    const claims = parseJwtPayload(token);
+    return (_jsxs(Box, { sx: { position: 'relative' }, onMouseEnter: handleEnter, onMouseLeave: handleLeave, children: [_jsx(Text, { sx: {
+                    fontSize: 1,
+                    color: 'fg.muted',
+                    cursor: 'default',
+                    borderBottom: '1px dashed',
+                    borderColor: 'border.muted',
+                    pb: '1px',
+                    userSelect: 'none',
+                }, children: displayName }), open && claims && (_jsxs(Box, { sx: {
+                    position: 'absolute',
+                    top: 'calc(100% + 4px)',
+                    right: 0,
+                    zIndex: 100,
+                    width: '400px',
+                    bg: 'canvas.overlay',
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    boxShadow: 'shadow.large',
+                    overflow: 'hidden',
+                }, children: [_jsx(Box, { sx: {
+                            px: 3,
+                            py: 2,
+                            bg: 'canvas.subtle',
+                            borderBottom: '1px solid',
+                            borderColor: 'border.default',
+                        }, children: _jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: "JWT Claims" }) }), claims.user && (_jsx(Box, { sx: {
+                            px: 3,
+                            py: 2,
+                            borderBottom: '1px solid',
+                            borderColor: 'border.muted',
+                        }, children: _jsxs(Box, { sx: {
+                                display: 'grid',
+                                gridTemplateColumns: '90px 1fr',
+                                gap: 1,
+                                fontSize: 0,
+                            }, children: [claims.user.email && (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { color: 'fg.muted' }, children: "Email" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.email })] })), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Handle" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.handle }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "UID" }), _jsx(Text, { sx: { fontFamily: 'mono', wordBreak: 'break-all' }, children: claims.user.uid }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Issued" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: new Date(claims.iat * 1000).toISOString() }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Expires" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: new Date(claims.exp * 1000).toISOString() })] }) })), (claims.user?.roles ?? claims.roles ?? []).length > 0 && (_jsxs(Box, { sx: {
+                            px: 3,
+                            py: 2,
+                            borderBottom: '1px solid',
+                            borderColor: 'border.muted',
+                        }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block', mb: 1 }, children: "Roles" }), _jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1 }, children: (claims.user?.roles ?? claims.roles ?? []).map(r => (_jsx(Box, { sx: {
+                                        fontSize: 0,
+                                        fontFamily: 'mono',
+                                        px: 1,
+                                        py: '1px',
+                                        bg: 'accent.subtle',
+                                        color: 'accent.fg',
+                                        borderRadius: 1,
+                                        border: '1px solid',
+                                        borderColor: 'accent.muted',
+                                    }, children: r }, r))) })] })), _jsx(Box, { as: "pre", sx: {
+                            m: 0,
+                            px: 3,
+                            py: 2,
+                            fontFamily: 'mono',
+                            fontSize: 0,
+                            color: 'fg.default',
+                            bg: 'canvas.inset',
+                            overflow: 'auto',
+                            maxHeight: '220px',
+                            whiteSpace: 'pre',
+                        }, children: JSON.stringify(claims, null, 2) })] }))] }));
+};
+export default UserBadge;

package/lib/views/profile/index.d.ts

@@ -0,0 +1,2 @@
+export { UserBadge } from './UserBadge';
+export type { UserBadgeProps } from './UserBadge';

package/lib/views/profile/index.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export { UserBadge } from './UserBadge';

package/lib/views/secrets/Secrets.js

@@ -43,6 +43,6 @@ const SecretsTable = () => {
 };
 export const Secrets = () => {
     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: "Secrets" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate('/new/secret', e), children: "New secret" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(SecretsTable, {}) }) })] }));
+    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: "Secrets" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate('/secrets/new', e), children: "New secret" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(SecretsTable, {}) }) })] }));
 };
 export default Secrets;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/core",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "workspaces": [
     ".",
@@ -28,6 +28,30 @@
   ],
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./otel": {
+      "types": "./lib/otel/index.d.ts",
+      "default": "./lib/otel/index.js"
+    },
+    "./views/iam": {
+      "types": "./lib/views/iam/index.d.ts",
+      "default": "./lib/views/iam/index.js"
+    },
+    "./views/profile": {
+      "types": "./lib/views/profile/index.d.ts",
+      "default": "./lib/views/profile/index.js"
+    },
+    "./utils/jwt": {
+      "types": "./lib/utils/Jwt.d.ts",
+      "default": "./lib/utils/Jwt.js"
+    },
+    "./style/*": "./style/*",
+    "./*": "./*"
+  },
   "style": "style/index.css",
   "repository": {
     "type": "git",
@@ -54,7 +78,7 @@
     "build": "npm run clean && gulp resources-to-lib && tsc -b && vite build",
     "build:lib": "npm run clean:lib && gulp resources-to-lib && tsc -b && node scripts/fix-esm-imports.cjs",
     "build:types": "npm run clean:lib && tsc -b",
-    "build:nextjs": "npm run build --workspace=nextjs-notebook-example",
+    "build:nextjs": "npm run build --workspace=nextjj-example",
     "build:examples": "npm run build:nextjs",
     "build:all": "npm run build && npm run build:examples",
     "lint": "eslint . --quiet",
@@ -90,7 +114,7 @@
     "type-check:watch": "tsc -b -w --noEmit",
     "examples": "run-p jupyter:start examples:vite",
     "examples:vite": "VITE_DATALAYER_RUN_URL=http://localhost:8888 vite --config vite.examples.config.ts",
-    "examples:nextjs": "npm run dev --workspace=nextjs-notebook-example",
+    "examples:nextjs": "npm run dev --workspace=nextjj-example",
     "jupyter:start": "./dev/sh/start-jupyter-server.sh",
     "prepare": "husky || true",
     "kill": "./dev/sh/kill.sh || true",