@datalayer/core 1.2.18 → 1.2.20

package/lib/views/mcp/ToolAccess.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Button, Heading, Label, Spinner, Text, Truncate, } from '@primer/react';
-import { Box } from '@datalayer/primer-addons';
+import { Button, Heading, Label, Spinner, Text, Truncate } from '@primer/react';
+import { Box, Card } from '@datalayer/primer-addons';
 import { McpErrorBlankslate } from '../../components/mcp/index.js';
 import { useContentSources, useMcpSessions, useMcpTools, useRevokeMcpSession, } from '../../hooks/useContents.js';
 /**
@@ -14,7 +14,9 @@ import { useContentSources, useMcpSessions, useMcpTools, useRevokeMcpSession, }
  */
 export const effectiveTools = (sessionAllowed, sourceAllowed) => {
     const source = new Set(sourceAllowed ?? []);
-    return [...new Set(sessionAllowed ?? [])].filter(tool => source.has(tool)).sort();
+    return [...new Set(sessionAllowed ?? [])]
+        .filter(tool => source.has(tool))
+        .sort();
 };
 /**
  * The tools a session still lists that its source has stopped allowing.
@@ -25,7 +27,9 @@ export const effectiveTools = (sessionAllowed, sourceAllowed) => {
  */
 export const withdrawnTools = (sessionAllowed, sourceAllowed) => {
     const source = new Set(sourceAllowed ?? []);
-    return [...new Set(sessionAllowed ?? [])].filter(tool => !source.has(tool)).sort();
+    return [...new Set(sessionAllowed ?? [])]
+        .filter(tool => !source.has(tool))
+        .sort();
 };
 /** How a source's approval policy reads to somebody deciding whether to trust it. */
 export const APPROVAL_POLICY_LOOK = {
@@ -52,13 +56,7 @@ export const mcpConfigOf = (source) => source.kind === 'mcp'
 const SessionRow = ({ session, sourceTools, mayRevoke, onRevoke, revoking, }) => {
     const effective = effectiveTools(session.allowedTools, sourceTools);
     const withdrawn = withdrawnTools(session.allowedTools, sourceTools);
-    return (_jsxs(Box, { sx: {
-            display: 'grid',
-            gap: 1,
-            py: 2,
-            borderTop: '1px solid',
-            borderColor: 'border.muted',
-        }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }, children: [_jsx(Label, { size: "small", variant: session.status === 'active' ? 'success' : 'secondary', children: session.status }), _jsx(Truncate, { title: session.actorUid, sx: { fontSize: 0, fontFamily: 'mono', maxWidth: '16rem' }, children: session.actorUid }), session.status === 'active' && mayRevoke && (_jsx(Button, { size: "small", variant: "danger", disabled: revoking, onClick: onRevoke, children: revoking ? 'Revoking…' : 'Revoke' }))] }), effective.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'attention.fg' }, children: "This session can call nothing. An empty allowlist allows no tool \u2014 it does not mean unrestricted." })) : (_jsx(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: effective.map(tool => (_jsx(Label, { size: "small", variant: "secondary", children: tool }, tool))) })), withdrawn.length > 0 && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Refused at every call, because the source no longer allows", ' ', withdrawn.join(', '), " \u2014 the session still lists it."] }))] }));
+    return (_jsxs(Box, { display: "grid", gap: 1, py: 2, borderTop: "1px solid", borderColor: "border.muted", children: [_jsxs(Box, { display: "flex", gap: 2, alignItems: "center", flexWrap: "wrap", children: [_jsx(Label, { size: "small", variant: session.status === 'active' ? 'success' : 'secondary', children: session.status }), _jsx(Truncate, { title: session.actorUid, sx: { fontSize: 0, fontFamily: 'mono', maxWidth: '16rem' }, children: session.actorUid }), session.status === 'active' && mayRevoke && (_jsx(Button, { size: "small", variant: "danger", disabled: revoking, onClick: onRevoke, children: revoking ? 'Revoking…' : 'Revoke' }))] }), effective.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'attention.fg' }, children: "This session can call nothing. An empty allowlist allows no tool \u2014 it does not mean unrestricted." })) : (_jsx(Box, { display: "flex", gap: 1, flexWrap: "wrap", children: effective.map(tool => (_jsx(Label, { size: "small", variant: "secondary", children: tool }, tool))) })), withdrawn.length > 0 && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Refused at every call, because the source no longer allows", ' ', withdrawn.join(', '), " \u2014 the session still lists it."] }))] }));
 };
 const SourceCard = ({ source, permissions, errorState, }) => {
     const config = mcpConfigOf(source);
@@ -69,17 +67,9 @@ const SourceCard = ({ source, permissions, errorState, }) => {
     const [revoking, setRevoking] = useState('');
     const look = config ? APPROVAL_POLICY_LOOK[config.approvalPolicy] : undefined;
     const offered = manifest.data?.tools?.length ?? 0;
-    return (_jsxs(Box, { sx: {
-            border: '1px solid',
-            borderColor: 'border.default',
-            borderRadius: 2,
-            p: 3,
-            display: 'grid',
-            gap: 2,
-            minWidth: 0,
-        }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 1 }, children: source.name }), look && (_jsx(Label, { size: "small", variant: look.variant, children: look.label })), config?.transport && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: config.transport }))] }), look && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: look.note })), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: sourceTools.length === 0
+    return (_jsxs(Card, { border: true, shadow: "none", p: 3, display: "grid", gap: 2, minWidth: 0, children: [_jsxs(Box, { display: "flex", gap: 2, alignItems: "center", flexWrap: "wrap", children: [_jsx(Heading, { as: "h3", sx: { fontSize: 1 }, children: source.name }), look && (_jsx(Label, { size: "small", variant: look.variant, children: look.label })), config?.transport && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: config.transport }))] }), look && _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: look.note }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: sourceTools.length === 0
                     ? 'No tool is allowed on this source, so an agent can call none of it.'
-                    : `${sourceTools.length} of ${offered || sourceTools.length} tools allowed to agents.` }), sourceTools.length > 0 && (_jsx(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: [...sourceTools].sort().map(tool => (_jsx(Label, { size: "small", variant: "accent", children: tool }, tool))) })), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: { fontSize: 0, color: 'fg.muted', mb: 1 }, children: "Open sessions" }), sessions.isError ? (_jsx(McpErrorBlankslate, { state: errorState(sessions.error, 'The sessions'), onRetry: () => sessions.refetch() })) : sessions.isPending ? (_jsx(Spinner, { size: "small" })) : (sessions.data?.items.length ?? 0) === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No agent has opened this source." })) : ((sessions.data?.items ?? []).map(session => (_jsx(SessionRow, { session: session, sourceTools: sourceTools, 
+                    : `${sourceTools.length} of ${offered || sourceTools.length} tools allowed to agents.` }), sourceTools.length > 0 && (_jsx(Box, { display: "flex", gap: 1, flexWrap: "wrap", children: [...sourceTools].sort().map(tool => (_jsx(Label, { size: "small", variant: "accent", children: tool }, tool))) })), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: { fontSize: 0, color: 'fg.muted', mb: 1 }, children: "Open sessions" }), sessions.isError ? (_jsx(McpErrorBlankslate, { state: errorState(sessions.error, 'The sessions'), onRetry: () => sessions.refetch() })) : sessions.isPending ? (_jsx(Spinner, { size: "small" })) : (sessions.data?.items.length ?? 0) === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No agent has opened this source." })) : ((sessions.data?.items ?? []).map(session => (_jsx(SessionRow, { session: session, sourceTools: sourceTools, 
                         // Revoking a session withdraws an agent's access to this
                         // source, so it follows the source's own write permission
                         // rather than being offered to everyone who can read the page.
@@ -91,11 +81,14 @@ const SourceCard = ({ source, permissions, errorState, }) => {
                         } }, session.uid))))] })] }));
 };
 export const ToolAccess = ({ errorState, spaceUid, }) => {
-    const sources = useContentSources({ kind: 'mcp', ...(spaceUid ? { spaceUid } : {}) });
+    const sources = useContentSources({
+        kind: 'mcp',
+        ...(spaceUid ? { spaceUid } : {}),
+    });
     // The listing wraps each source with what this caller may do with it, and
     // both halves are used: the source to read the allowlist, the permissions
     // to decide whether revoking is offered at all.
     const items = (sources.data?.items ?? []);
-    return (_jsxs(Box, { sx: { display: 'grid', gap: 3, minWidth: 0 }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Tools" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: "The MCP sources your agents may reach, the tools allowed on each, and the sessions open against them. A session can only narrow what the source allows, never widen it." })] }), sources.isError ? (_jsx(McpErrorBlankslate, { state: errorState(sources.error, 'The sources'), onRetry: () => sources.refetch() })) : sources.isPending ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 5 }, children: _jsx(Spinner, {}) })) : items.length === 0 ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No MCP source is connected here. A source has to be created before its tools can be offered to an agent." })) : (items.map(entry => (_jsx(SourceCard, { source: entry.source, permissions: entry.permissions, errorState: errorState }, entry.source.uid))))] }));
+    return (_jsxs(Box, { display: "grid", gap: 3, minWidth: 0, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Tools" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: "The MCP sources your agents may reach, the tools allowed on each, and the sessions open against them. A session can only narrow what the source allows, never widen it." })] }), sources.isError ? (_jsx(McpErrorBlankslate, { state: errorState(sources.error, 'The sources'), onRetry: () => sources.refetch() })) : sources.isPending ? (_jsx(Box, { display: "flex", justifyContent: "center", py: 5, children: _jsx(Spinner, {}) })) : items.length === 0 ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No MCP source is connected here. A source has to be created before its tools can be offered to an agent." })) : (items.map(entry => (_jsx(SourceCard, { source: entry.source, permissions: entry.permissions, errorState: errorState }, entry.source.uid))))] }));
 };
 export default ToolAccess;

package/lib/views/mcp/TraceTimeline.js

@@ -93,7 +93,8 @@ export const SERVICE_TONE = {
 };
 /** The bar colour of a span, by the service that emitted it and how it ended. */
 export const toneOf = (span) => {
-    if (span.status_code === 'STATUS_CODE_ERROR' || span.status_code === 'ERROR') {
+    if (span.status_code === 'STATUS_CODE_ERROR' ||
+        span.status_code === 'ERROR') {
         return 'danger.emphasis';
     }
     return SERVICE_TONE[span.service_name] ?? 'neutral.emphasis';
@@ -105,28 +106,12 @@ export const TraceTimeline = ({ tree, traceId, live = false, }) => {
                 ? 'No spans yet. They arrive as the services report them.'
                 : 'This run reported no spans. A run started before tracing reached the service that ran it has none.' }));
     }
-    return (_jsxs(Box, { sx: { display: 'grid', gap: 1, minWidth: 0 }, children: [traceId && (_jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0, color: 'fg.muted' }, children: traceId })), rows.map(row => (_jsxs(Box, { sx: {
-                    display: 'grid',
-                    gridTemplateColumns: 'minmax(0, 14rem) 1fr auto',
-                    gap: 2,
-                    alignItems: 'center',
-                    minWidth: 0,
-                }, children: [_jsx(Box, { sx: { pl: row.depth, minWidth: 0 }, children: _jsx(Truncate, { title: `${row.span.span_name} · ${row.span.service_name}`, sx: { fontSize: 0, maxWidth: '100%' }, children: row.span.span_name }) }), _jsx(Box, { sx: {
-                            position: 'relative',
-                            height: '0.75rem',
-                            bg: 'canvas.subtle',
-                            borderRadius: 1,
-                            minWidth: 0,
-                        }, children: _jsx(Box, { sx: {
-                                position: 'absolute',
-                                top: 0,
-                                bottom: 0,
-                                left: `${row.left}%`,
-                                width: `${row.width}%`,
-                                bg: toneOf(row.span),
-                                borderRadius: 1,
-                            }, title: `${row.span.service_name} · ${durationLabel(row.span.duration_ms)}` }) }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontVariantNumeric: 'tabular-nums' }, children: durationLabel(row.span.duration_ms) })] }, row.span.span_id)))] }));
+    return (_jsxs(Box, { display: "grid", gap: 1, minWidth: 0, children: [traceId && (_jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0, color: 'fg.muted' }, children: traceId })), rows.map(row => (_jsxs(Box, { display: "grid", gridTemplateColumns: "minmax(0, 14rem) 1fr auto", gap: 2, alignItems: "center", minWidth: 0, children: [_jsx(Box, { pl: row.depth, minWidth: 0, children: _jsx(Truncate, { title: `${row.span.span_name} · ${row.span.service_name}`, sx: { fontSize: 0, maxWidth: '100%' }, children: row.span.span_name }) }), _jsx(Box, { position: "relative", height: "0.75rem", bg: "canvas.subtle", borderRadius: 1, minWidth: 0, children: _jsx(Box, { position: "absolute", top: 0, bottom: 0, left: `${row.left}%`, width: `${row.width}%`, bg: toneOf(row.span), borderRadius: 1, title: `${row.span.service_name} · ${durationLabel(row.span.duration_ms)}` }) }), _jsx(Text, { sx: {
+                            fontSize: 0,
+                            color: 'fg.muted',
+                            fontVariantNumeric: 'tabular-nums',
+                        }, children: durationLabel(row.span.duration_ms) })] }, row.span.span_id)))] }));
 };
 /** The timeline under its own heading, as the Runs detail draws it. */
-export const TraceTimelineSection = (props) => (_jsxs(Box, { children: [_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center', mb: 2 }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 1 }, children: "Where the time went" }), props.live && (_jsx(Label, { size: "small", variant: "success", children: "Live" }))] }), _jsx(TraceTimeline, { ...props })] }));
+export const TraceTimelineSection = (props) => (_jsxs(Box, { children: [_jsxs(Box, { display: "flex", gap: 2, alignItems: "center", mb: 2, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 1 }, children: "Where the time went" }), props.live && (_jsx(Label, { size: "small", variant: "success", children: "Live" }))] }), _jsx(TraceTimeline, { ...props })] }));
 export default TraceTimeline;

package/lib/views/otel/DashboardView.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { OtelLive } from '../../otel/index.js';
-export const DashboardView = ({ baseUrl = '', wsBaseUrl, token, autoRefreshMs = 5000, defaultSignal = 'traces', limit = 200, onSignalRef, }) => (_jsx(Box, { sx: { display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }, children: _jsx(OtelLive, { baseUrl: baseUrl, wsBaseUrl: wsBaseUrl, token: token, autoRefreshMs: autoRefreshMs, defaultSignal: defaultSignal, limit: limit, onSignalRef: onSignalRef }) }));
+export const DashboardView = ({ baseUrl = '', wsBaseUrl, token, autoRefreshMs = 5000, defaultSignal = 'traces', limit = 200, onSignalRef, }) => (_jsx(Box, { display: "flex", flex: 1, minHeight: 0, overflow: "hidden", children: _jsx(OtelLive, { baseUrl: baseUrl, wsBaseUrl: wsBaseUrl, token: token, autoRefreshMs: autoRefreshMs, defaultSignal: defaultSignal, limit: limit, onSignalRef: onSignalRef }) }));

package/lib/views/otel/LogsView.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { OtelLive } from '../../otel/index.js';
-export const LogsView = ({ baseUrl = '', token, autoRefreshMs = 5000, limit = 200, }) => (_jsx(Box, { sx: { display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }, children: _jsx(OtelLive, { baseUrl: baseUrl, token: token, autoRefreshMs: autoRefreshMs, defaultSignal: "logs", limit: limit }) }));
+export const LogsView = ({ baseUrl = '', token, autoRefreshMs = 5000, limit = 200, }) => (_jsx(Box, { display: "flex", flex: 1, minHeight: 0, overflow: "hidden", children: _jsx(OtelLive, { baseUrl: baseUrl, token: token, autoRefreshMs: autoRefreshMs, defaultSignal: "logs", limit: limit }) }));

package/lib/views/otel/MetricsView.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { OtelLive } from '../../otel/index.js';
-export const MetricsView = ({ baseUrl = '', token, autoRefreshMs = 5000, limit = 200, }) => (_jsx(Box, { sx: { display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }, children: _jsx(OtelLive, { baseUrl: baseUrl, token: token, autoRefreshMs: autoRefreshMs, defaultSignal: "metrics", limit: limit }) }));
+export const MetricsView = ({ baseUrl = '', token, autoRefreshMs = 5000, limit = 200, }) => (_jsx(Box, { display: "flex", flex: 1, minHeight: 0, overflow: "hidden", children: _jsx(OtelLive, { baseUrl: baseUrl, token: token, autoRefreshMs: autoRefreshMs, defaultSignal: "metrics", limit: limit }) }));

package/lib/views/otel/OtelHeader.js

@@ -11,7 +11,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * pass `onSignOut` to wire up your own logout action.
  */
 import { useState, useCallback, useRef } from 'react';
-import { Box, Text, Button, Dialog } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text, Button, Dialog } from '@primer/react';
 import { TelescopeIcon, SignOutIcon } from '@primer/octicons-react';
 import { UserBadge } from '../profile/index.js';
 export const OtelHeader = ({ baseUrl = '', token, trailing, onNavigate, onSignOut, showGenerateButtons = true, showAccountControls = true, }) => {
@@ -58,48 +59,13 @@ export const OtelHeader = ({ baseUrl = '', token, trailing, onNavigate, onSignOu
             setDialogOpen(true);
         }
     }, [baseUrl, token, onNavigate]);
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { as: "header", sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 3,
-                    px: 3,
-                    py: 2,
-                    bg: 'canvas.inset',
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                    flexShrink: 0,
-                    // Allow overflow visible so the JWT popover can extend below the header.
-                    overflow: 'visible',
-                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(TelescopeIcon, { size: 20 }), _jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: "Datalayer OTEL" })] }), _jsx(Box, { sx: { flex: 1 } }), showGenerateButtons && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: returnFocusRef, size: "small", variant: "primary", disabled: generating, onClick: () => generate('traces', 3), children: "+ Traces" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('ai-traces', 3), children: "+ AI Traces" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('logs', 10), children: "+ Logs" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('metrics', 5), children: "+ Metrics" })] })), trailing, showAccountControls && token && _jsx(UserBadge, { token: token }), showAccountControls && onSignOut && (_jsx(Button, { size: "small", variant: "invisible", onClick: onSignOut, sx: { color: 'fg.muted' }, leadingVisual: SignOutIcon, children: "Sign out" }))] }), dialogOpen && (_jsxs(Dialog, { title: dialogTitle, onClose: () => setDialogOpen(false), footerButtons: [
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { as: "header", display: "flex", alignItems: "center", gap: 3, px: 3, py: 2, bg: "canvas.inset", borderBottom: "1px solid", borderColor: "border.default", flexShrink: 0, 
+                // Allow overflow visible so the JWT popover can extend below the header.
+                overflow: "visible", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(TelescopeIcon, { size: 20 }), _jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: "Datalayer OTEL" })] }), _jsx(Box, { flex: 1 }), showGenerateButtons && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: returnFocusRef, size: "small", variant: "primary", disabled: generating, onClick: () => generate('traces', 3), children: "+ Traces" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('ai-traces', 3), children: "+ AI Traces" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('logs', 10), children: "+ Logs" }), _jsx(Button, { size: "small", variant: "primary", disabled: generating, onClick: () => generate('metrics', 5), children: "+ Metrics" })] })), trailing, showAccountControls && token && _jsx(UserBadge, { token: token }), showAccountControls && onSignOut && (_jsx(Button, { size: "small", variant: "invisible", onClick: onSignOut, sx: { color: 'fg.muted' }, leadingVisual: SignOutIcon, children: "Sign out" }))] }), dialogOpen && (_jsxs(Dialog, { title: dialogTitle, onClose: () => setDialogOpen(false), footerButtons: [
                     {
                         content: 'Close',
                         onClick: () => setDialogOpen(false),
                         buttonType: 'default',
                     },
-                ], children: [_jsxs(Box, { sx: { mb: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1, color: 'fg.muted' }, children: "Request" }), _jsx(Box, { as: "pre", sx: {
-                                    fontFamily: 'mono',
-                                    fontSize: 1,
-                                    p: 2,
-                                    mt: 1,
-                                    bg: 'canvas.inset',
-                                    borderRadius: 2,
-                                    overflow: 'auto',
-                                    color: 'fg.default',
-                                    whiteSpace: 'pre-wrap',
-                                    wordBreak: 'break-all',
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                }, children: dialogRequest })] }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1, color: 'fg.muted' }, children: "Response" }), _jsx(Box, { as: "pre", sx: {
-                                    fontFamily: 'mono',
-                                    fontSize: 1,
-                                    p: 2,
-                                    mt: 1,
-                                    bg: 'canvas.subtle',
-                                    borderRadius: 2,
-                                    overflow: 'auto',
-                                    maxHeight: 300,
-                                    color: dialogVariant === 'error' ? 'danger.fg' : 'fg.default',
-                                    whiteSpace: 'pre-wrap',
-                                    wordBreak: 'break-all',
-                                }, children: dialogBody })] })] }))] }));
+                ], children: [_jsxs(Box, { mb: 2, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1, color: 'fg.muted' }, children: "Request" }), _jsx(Box, { as: "pre", fontFamily: "mono", fontSize: 1, p: 2, mt: 1, bg: "canvas.inset", borderRadius: 2, overflow: "auto", color: "fg.default", whiteSpace: "pre-wrap", wordBreak: "break-all", border: "1px solid", borderColor: "border.default", children: dialogRequest })] }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1, color: 'fg.muted' }, children: "Response" }), _jsx(Box, { as: "pre", fontFamily: "mono", fontSize: 1, p: 2, mt: 1, bg: "canvas.subtle", borderRadius: 2, overflow: "auto", maxHeight: 300, color: dialogVariant === 'error' ? 'danger.fg' : 'fg.default', whiteSpace: "pre-wrap", wordBreak: "break-all", children: dialogBody })] })] }))] }));
 };

package/lib/views/otel/SqlView.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { OtelSqlView } from '../../otel/index.js';
-export const SqlView = ({ baseUrl = '', token }) => (_jsx(Box, { sx: { display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }, children: _jsx(OtelSqlView, { baseUrl: baseUrl, token: token }) }));
+export const SqlView = ({ baseUrl = '', token }) => (_jsx(Box, { display: "flex", flex: 1, minHeight: 0, overflow: "hidden", children: _jsx(OtelSqlView, { baseUrl: baseUrl, token: token }) }));

package/lib/views/otel/SystemView.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { OtelSystemView } from '../../otel/index.js';
-export const SystemView = ({ baseUrl = '', token, }) => (_jsx(Box, { sx: { display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }, children: _jsx(OtelSystemView, { baseUrl: baseUrl, token: token }) }));
+export const SystemView = ({ baseUrl = '', token, }) => (_jsx(Box, { display: "flex", flex: 1, minHeight: 0, overflow: "hidden", children: _jsx(OtelSystemView, { baseUrl: baseUrl, token: token }) }));

package/lib/views/otel/TracesView.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { OtelLive } from '../../otel/index.js';
-export const TracesView = ({ baseUrl = '', token, autoRefreshMs = 5000, limit = 200, }) => (_jsx(Box, { sx: { display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }, children: _jsx(OtelLive, { baseUrl: baseUrl, token: token, autoRefreshMs: autoRefreshMs, defaultSignal: "traces", limit: limit }) }));
+export const TracesView = ({ baseUrl = '', token, autoRefreshMs = 5000, limit = 200, }) => (_jsx(Box, { display: "flex", flex: 1, minHeight: 0, overflow: "hidden", children: _jsx(OtelLive, { baseUrl: baseUrl, token: token, autoRefreshMs: autoRefreshMs, defaultSignal: "traces", limit: limit }) }));

package/lib/views/profile/UserBadge.js

@@ -15,7 +15,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * @module views/profile
  */
 import { useState, useRef, useCallback, useEffect } from 'react';
-import { Box, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text } from '@primer/react';
 import { parseJwtPayload, getDatalayerJwtUser, getDatalayerDisplayName, } from '../../utils/Jwt.js';
 import { getRelativeTime } from '../../utils/Date.js';
 // ── Component ─────────────────────────────────────────────────────
@@ -64,7 +65,7 @@ export const UserBadge = ({ token, variant = 'full', showExpandToggle = true, ex
         expiredNotifiedForTokenRef.current = token;
         onTokenExpired();
     }, [expired, onTokenExpired, open, token]);
-    return (_jsxs(Box, { sx: { position: 'relative' }, onMouseEnter: handleEnter, onMouseLeave: handleLeave, children: [_jsx(Text, { sx: {
+    return (_jsxs(Box, { position: "relative", onMouseEnter: handleEnter, onMouseLeave: handleLeave, children: [_jsx(Text, { sx: {
                     fontSize: 1,
                     color: triggerColor,
                     cursor: 'default',
@@ -72,63 +73,7 @@ export const UserBadge = ({ token, variant = 'full', showExpandToggle = true, ex
                     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: [_jsxs(Box, { sx: {
-                            px: 3,
-                            py: 2,
-                            bg: 'canvas.inset',
-                            borderBottom: '1px solid',
-                            borderColor: 'border.default',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            gap: 2,
-                        }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: popoverDisplayName || 'User' }), variant === 'small' && showExpandToggle && (_jsx(Box, { as: "button", type: "button", onClick: () => setExpanded(v => !v), "aria-label": expanded ? 'Hide full JWT claims' : 'Show full JWT claims', "aria-expanded": expanded, title: expanded ? 'Hide full JWT claims' : 'Show full JWT claims', sx: {
-                                    appearance: 'none',
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                    borderRadius: 1,
-                                    bg: 'canvas.default',
-                                    color: 'fg.default',
-                                    fontSize: 1,
-                                    lineHeight: 1,
-                                    width: '20px',
-                                    height: '20px',
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    cursor: 'pointer',
-                                    p: 0,
-                                    '&:hover': {
-                                        bg: 'canvas.subtle',
-                                    },
-                                }, children: expanded ? '−' : '+' }))] }), 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: [_jsx(Text, { sx: { color: 'fg.muted' }, children: "First name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.firstName }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Last name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.lastName }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Display name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: getDatalayerDisplayName(claims.user, claims.user.handle) }), 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" }), _jsxs(Box, { sx: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        gap: 2,
-                                        minWidth: 0,
-                                    }, children: [_jsx(Text, { sx: {
+                }, children: displayName }), open && claims && (_jsxs(Box, { 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: [_jsxs(Box, { px: 3, py: 2, bg: "canvas.inset", borderBottom: "1px solid", borderColor: "border.default", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: popoverDisplayName || 'User' }), variant === 'small' && showExpandToggle && (_jsx(Box, { as: "button", type: "button", onClick: () => setExpanded(v => !v), "aria-label": expanded ? 'Hide full JWT claims' : 'Show full JWT claims', "aria-expanded": expanded, title: expanded ? 'Hide full JWT claims' : 'Show full JWT claims', appearance: "none", border: "1px solid", borderColor: "border.default", borderRadius: 1, bg: "canvas.default", color: "fg.default", fontSize: 1, lineHeight: 1, width: "20px", height: "20px", display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", p: 0, hover: { bg: 'canvas.subtle' }, children: expanded ? '−' : '+' }))] }), claims.user && (_jsx(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.muted", children: _jsxs(Box, { display: "grid", gridTemplateColumns: "90px 1fr", gap: 1, fontSize: 0, children: [_jsx(Text, { sx: { color: 'fg.muted' }, children: "First name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.firstName }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Last name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.lastName }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Display name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: getDatalayerDisplayName(claims.user, claims.user.handle) }), 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" }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, minWidth: 0, children: [_jsx(Text, { sx: {
                                                 fontFamily: 'mono',
                                                 overflow: 'hidden',
                                                 textOverflow: 'ellipsis',
@@ -153,44 +98,7 @@ export const UserBadge = ({ token, variant = 'full', showExpandToggle = true, ex
                                                 : warning
                                                     ? 'attention.muted'
                                                     : 'success.muted';
-                                            return (_jsx(Box, { sx: {
-                                                    flexShrink: 0,
-                                                    fontSize: 0,
-                                                    px: 1,
-                                                    py: '1px',
-                                                    bg,
-                                                    color: fg,
-                                                    borderRadius: 1,
-                                                    border: '1px solid',
-                                                    borderColor: border,
-                                                    whiteSpace: 'nowrap',
-                                                }, children: getRelativeTime(expDate) }));
-                                        })()] })] }) })), (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))) })] })), (variant === 'full' || expanded) && (_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) }))] }))] }));
+                                            return (_jsx(Box, { flexShrink: 0, fontSize: 0, px: 1, py: "1px", bg: bg, color: fg, borderRadius: 1, border: "1px solid", borderColor: border, whiteSpace: "nowrap", children: getRelativeTime(expDate) }));
+                                        })()] })] }) })), (claims.user?.roles ?? claims.roles ?? []).length > 0 && (_jsxs(Box, { 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, { display: "flex", flexWrap: "wrap", gap: 1, children: (claims.user?.roles ?? claims.roles ?? []).map(r => (_jsx(Box, { 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))) })] })), (variant === 'full' || expanded) && (_jsx(Box, { as: "pre", 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/secrets/SecretEdit.js

@@ -131,20 +131,11 @@ export const SecretEdit = ({ secretsListRoute = '/settings/secrets', } = {}) =>
     };
     return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(Heading, { sx: { fontSize: 3 }, children: "Secret" }) }), _jsxs(Box, { display: "flex", children: [_jsxs(Box, { children: [_jsx(BoringAvatar, { displayName: secret?.name, size: 100, style: { paddingRight: 10 } }), _jsx(Text, { as: "h2", sx: { paddingTop: 3 }, children: secret?.name }), _jsx(Box, { mt: 3, children: _jsx(Label, { size: "large", children: secret?.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: secretNameChanged }), 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: secretDescriptionChanged, 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: "Value" }), _jsx(TextInput, { placeholder: "Value", monospace: true, size: "large", contrast: !passwordVisible, disabled: !passwordVisible, onChange: secretValueChanged, type: passwordVisible ? 'text' : 'password', value: formValues.value, trailingAction: _jsx(TextInput.Action, { onClick: () => {
                                                         setPasswordVisible(!passwordVisible);
-                                                    }, icon: passwordVisible ? EyeClosedIcon : EyeIcon, "aria-label": passwordVisible ? 'Hide secret' : 'Reveal secret', sx: { color: 'var(--fgColor-muted)' } }), sx: { overflow: 'visible' } }), validationResult.value === false && (_jsx(FormControl.Validation, { variant: "error", children: "Value must have more than 1 and less than 4096 characters." }))] }), _jsx(Box, { sx: { marginTop: 3 }, children: _jsx(Button, { variant: "primary", disabled: !validationResult.name || !validationResult.description, onClick: submitUpdate, children: "Update secret" }) })] }), _jsxs(Box, { sx: { marginTop: 3 }, children: [_jsx(Heading, { as: "h2", sx: {
+                                                    }, icon: passwordVisible ? EyeClosedIcon : EyeIcon, "aria-label": passwordVisible ? 'Hide secret' : 'Reveal secret', sx: { color: 'var(--fgColor-muted)' } }), sx: { overflow: 'visible' } }), validationResult.value === false && (_jsx(FormControl.Validation, { variant: "error", children: "Value must have more than 1 and less than 4096 characters." }))] }), _jsx(Box, { marginTop: 3, children: _jsx(Button, { variant: "primary", disabled: !validationResult.name || !validationResult.description, onClick: submitUpdate, children: "Update secret" }) })] }), _jsxs(Box, { 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 secret name to delete" }), _jsx(FormControl, { children: _jsx(TextInput, { block: true, value: formValues.nameConfirm, onChange: secretNameConfirmChanged }) }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "This operation is not reversible." })] }), _jsx(Button, { variant: "danger", disabled: !validationResult.nameConfirm, onClick: submitDelete, children: "Delete secret" })] })] })] })] })] }));
+                                        }, children: "Danger zone" }), _jsxs(Box, { border: "1px solid", borderColor: "danger.emphasis", borderRadius: 2, p: 3, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 3, children: [_jsxs(Box, { display: "grid", gap: 1, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', color: 'danger.fg' }, children: "Confirm the secret name to delete" }), _jsx(FormControl, { children: _jsx(TextInput, { block: true, value: formValues.nameConfirm, onChange: secretNameConfirmChanged }) }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "This operation is not reversible." })] }), _jsx(Button, { variant: "danger", disabled: !validationResult.nameConfirm, onClick: submitDelete, children: "Delete secret" })] })] })] })] })] }));
 };
 export default SecretEdit;

package/lib/views/secrets/SecretNew.js

@@ -93,7 +93,7 @@ export const SecretNew = ({ secretsListRoute = '/settings/secrets', } = {}) => {
             },
         });
     };
-    return (_jsxs(Box, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New Secret" }) }) }), _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: "Secret type" }), _jsxs(Select, { name: "type", value: formValues.variant, onChange: secretVariantChanged, children: [_jsx(Select.Option, { value: "generic", children: "Generic" }), _jsx(Select.Option, { value: "password", children: "Password" }), _jsx(Select.Option, { value: "key", children: "Key" }), _jsx(Select.Option, { value: "token", children: "Token" })] }), _jsx(FormControl.Caption, { children: "Pick the most appropriate secret type." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: secretNameChanged, autoFocus: true }), _jsx(FormControl.Caption, { children: "Hint: The secret name is a short name that identifies in a unique way your secret." }), 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: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: secretDescriptionChanged, rows: 3 }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Value" }), _jsx(Textarea, { block: true, value: formValues.value, onChange: secretValueChanged, rows: 5 }), validationResult.value === false && (_jsx(FormControl.Validation, { variant: "error", children: "Value must have more than 1 and less than 4096 characters." }))] }), _jsx(Button, { variant: "primary", disabled: !validationResult.value ||
+    return (_jsxs(Box, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New Secret" }) }) }), _jsx(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 3, children: _jsx(Box, { children: _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Secret type" }), _jsxs(Select, { name: "type", value: formValues.variant, onChange: secretVariantChanged, children: [_jsx(Select.Option, { value: "generic", children: "Generic" }), _jsx(Select.Option, { value: "password", children: "Password" }), _jsx(Select.Option, { value: "key", children: "Key" }), _jsx(Select.Option, { value: "token", children: "Token" })] }), _jsx(FormControl.Caption, { children: "Pick the most appropriate secret type." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: secretNameChanged, autoFocus: true }), _jsx(FormControl.Caption, { children: "Hint: The secret name is a short name that identifies in a unique way your secret." }), 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: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: secretDescriptionChanged, rows: 3 }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Value" }), _jsx(Textarea, { block: true, value: formValues.value, onChange: secretValueChanged, rows: 5 }), validationResult.value === false && (_jsx(FormControl.Validation, { variant: "error", children: "Value must have more than 1 and less than 4096 characters." }))] }), _jsx(Button, { variant: "primary", disabled: !validationResult.value ||
                                     !validationResult.name ||
                                     !validationResult.description, sx: { marginTop: 2 }, onClick: e => {
                                     e.preventDefault();

package/package.json

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