@datalayer/core 1.2.18 → 1.2.19

package/lib/components/timeline/Timeline.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text } from '@primer/react';
 const statusStyles = {
     done: {
         dotBackground: 'success.emphasis',
@@ -42,44 +43,11 @@ export const Timeline = ({ items, renderTimestamp }) => {
     if (!items.length) {
         return null;
     }
-    return (_jsx(Box, { sx: {
-            overflowX: 'auto',
-            pb: 1,
-        }, children: _jsx(Box, { sx: {
-                display: 'flex',
-                alignItems: 'stretch',
-                minWidth: 'max-content',
-            }, children: items.map((item, index) => {
+    return (_jsx(Box, { overflowX: "auto", pb: 1, children: _jsx(Box, { display: "flex", alignItems: "stretch", minWidth: "max-content", children: items.map((item, index) => {
                 const status = item.status || 'neutral';
                 const style = statusStyles[status];
                 const hasNext = index < items.length - 1;
-                return (_jsxs(Box, { sx: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        minWidth: 220,
-                        flex: hasNext ? '0 0 220px' : '0 0 auto',
-                        pr: hasNext ? 0 : 1,
-                    }, children: [_jsxs(Box, { sx: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                minHeight: 28,
-                                mb: 2,
-                            }, children: [_jsx(Box, { sx: {
-                                        width: 16,
-                                        height: 16,
-                                        borderRadius: '50%',
-                                        border: '2px solid',
-                                        borderColor: style.dotBorder,
-                                        bg: style.dotBackground,
-                                        boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.2)',
-                                    } }), hasNext ? (_jsx(Box, { sx: {
-                                        flex: 1,
-                                        height: 4,
-                                        ml: 2,
-                                        mr: 2,
-                                        borderRadius: 999,
-                                        bg: style.lineColor,
-                                    } })) : null] }), _jsx(Text, { as: "p", sx: { fontWeight: 600, color: style.titleColor, mb: 1 }, children: item.title }), _jsx(Text, { as: "p", sx: {
+                return (_jsxs(Box, { display: "flex", flexDirection: "column", minWidth: 220, flex: hasNext ? '0 0 220px' : '0 0 auto', pr: hasNext ? 0 : 1, children: [_jsxs(Box, { display: "flex", alignItems: "center", minHeight: 28, mb: 2, children: [_jsx(Box, { width: 16, height: 16, borderRadius: "50%", border: "2px solid", borderColor: style.dotBorder, bg: style.dotBackground, boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.2)" }), hasNext ? (_jsx(Box, { flex: 1, height: 4, ml: 2, mr: 2, borderRadius: 999, bg: style.lineColor })) : null] }), _jsx(Text, { as: "p", sx: { fontWeight: 600, color: style.titleColor, mb: 1 }, children: item.title }), _jsx(Text, { as: "p", sx: {
                                 fontSize: 0,
                                 color: 'fg.muted',
                                 mb: item.subtitle ? 1 : 0,

package/lib/hooks/layouts/LayoutBackdrop.js

@@ -4,7 +4,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Distributed under the terms of the Modified BSD License.
  */
 import { useEffect } from 'react';
-import { Heading, Box, Spinner } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Heading, Spinner } from '@primer/react';
 import { useBackdrop } from '../index.js';
 import { useLayoutStore } from '../../state/index.js';
 const BackdropContent = (props) => {

package/lib/hooks/layouts/LayoutScreencapture.js

@@ -4,7 +4,7 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
  * Distributed under the terms of the Modified BSD License.
  */
 import { useEffect } from 'react';
-import { Box } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { useScreencapture, useToast } from '../index.js';
 import { lazyWithPreload, WithSuspense } from '../../utils/index.js';
 import { useLayoutStore } from '../../state/index.js';

package/lib/hooks/libraryApp.d.ts

@@ -6,7 +6,10 @@
  * projection carries them: `face_s` (the JSON of its `id`, `emoji`, `avatar`
  * and `banner`, each only when set), `app_kind_s` and `runs_live_b` — an app
  * that runs live can be tried before it is cloned: not a decision, and naming
- * the agent it runs on.
+ * the agent it runs on. One of Datalayer's examples, published from the
+ * catalogue, also says which (`catalogue_example_s`), beside `publisher_s:
+ * datalayer` — the Library projects both only for an item of the `datalayer`
+ * organization's spaces whose metadata says `catalogueExample` (STUDIO E-10).
  *
  * @module hooks/libraryApp
  */
@@ -30,6 +33,8 @@ export type LibraryAppFields = {
     appKind?: LibraryAppKind;
     /** Whether it can be tried before it is cloned. */
     runsLive: boolean;
+    /** The example of the catalogue it is, when it is one of Datalayer's. */
+    catalogueExample?: string;
 };
 /** The face `face_s` carries; a value that is not a face's JSON is refused. */
 export declare function libraryAppFaceOf(value: unknown): LibraryAppFace | undefined;

package/lib/hooks/libraryApp.js

@@ -10,7 +10,10 @@
  * projection carries them: `face_s` (the JSON of its `id`, `emoji`, `avatar`
  * and `banner`, each only when set), `app_kind_s` and `runs_live_b` — an app
  * that runs live can be tried before it is cloned: not a decision, and naming
- * the agent it runs on.
+ * the agent it runs on. One of Datalayer's examples, published from the
+ * catalogue, also says which (`catalogue_example_s`), beside `publisher_s:
+ * datalayer` — the Library projects both only for an item of the `datalayer`
+ * organization's spaces whose metadata says `catalogueExample` (STUDIO E-10).
  *
  * @module hooks/libraryApp
  */
@@ -50,10 +53,16 @@ export function libraryAppFieldsOf(raw) {
         !LIBRARY_APP_KINDS.includes(kind)) {
         throw new Error(`An app's kind is not one of ${LIBRARY_APP_KINDS}: ${String(kind)}`);
     }
+    const example = raw.catalogue_example_s;
+    if (example !== undefined &&
+        (typeof example !== 'string' || example.trim() === '')) {
+        throw new Error(`An app's example is not an example's id: ${String(example)}`);
+    }
     const face = libraryAppFaceOf(raw.face_s);
     return {
         ...(face ? { face } : {}),
         ...(kind ? { appKind: kind } : {}),
         runsLive: raw.runs_live_b === true,
+        ...(example ? { catalogueExample: example } : {}),
     };
 }

package/lib/hooks/useAuthorization.js

@@ -35,8 +35,13 @@ export const useAuthorization = () => {
     const checkIsPlatformMember = (user) => {
         return user.roles.includes(PlatformRoles.Member.handle);
     };
+    /**
+     * Whether the user sees the features that are not released yet: a Platform
+     * Features Previewer, or a Platform Admin — an admin previews everything.
+     */
     const checkIsPlatformFeaturesPreviewer = (user) => {
-        return user.roles.includes(PlatformRoles.FeaturesPreviewer.handle);
+        return (user.roles.includes(PlatformRoles.FeaturesPreviewer.handle) ||
+            checkIsPlatformAdmin(user));
     };
     const checkIsPlatformUsageReviewer = (user) => {
         return user.roles.includes(PlatformRoles.UsageReviewer.handle);

package/lib/mocks/components/FlashMock.js

@@ -4,16 +4,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Distributed under the terms of the Modified BSD License.
  */
 import { AlertIcon } from '@primer/octicons-react';
-import { Box, Button, Flash } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Button, Flash } from '@primer/react';
 import { useNavigate } from '../../hooks/index.js';
 export const FlashMock = () => {
     const navigate = useNavigate();
-    return (_jsx(Flash, { variant: "warning", style: { marginBottom: 10 }, children: _jsxs(Box, { sx: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                gap: 3,
-                width: '100%',
-            }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(AlertIcon, {}), _jsx("span", { children: "This is placeholder content. Contact us to learn more about this feature." })] }), _jsx(Button, { size: "small", onClick: () => navigate('/contact'), children: "Contact Us" })] }) }));
+    return (_jsx(Flash, { variant: "warning", style: { marginBottom: 10 }, children: _jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 3, width: "100%", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(AlertIcon, {}), _jsx("span", { children: "This is placeholder content. Contact us to learn more about this feature." })] }), _jsx(Button, { size: "small", onClick: () => navigate('/contact'), children: "Contact Us" })] }) }));
 };
 export default FlashMock;

package/lib/mocks/views/DashboardMock.js

@@ -3,36 +3,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { Box, Link, Text, LabelGroup, Label, ActionMenu, ActionList, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Link, Text, LabelGroup, Label, ActionMenu, ActionList, } from '@primer/react';
 import { ArrowRightIcon, CloudIcon, StarIcon, DotFillIcon, RepoForkedIcon, LinkIcon, } from '@primer/octicons-react';
 import { ReactJsIcon } from '@datalayer/icons-react';
 import { lazyWithPreload, WithSuspense } from '../../utils/index.js';
 import { ECHART_MOCK_1, ECHART_MOCK_2, ECHART_MOCK_3, FlashMock, } from '../../mocks/index.js';
 const ReactECharts = WithSuspense(lazyWithPreload(() => import('echarts-for-react')), true);
 export const DashboardMock = () => {
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { mb: 3, children: _jsx(FlashMock, {}) }), _jsxs(Box, { sx: {
-                    display: 'grid',
-                    gridTemplateColumns: '1fr 1fr 1fr',
-                    gap: 4,
-                }, children: [_jsxs(Box, { sx: {
-                            gridColumn: '1 / 3',
-                            minHeight: '200px',
-                        }, children: [_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'space-between',
-                                    paddingRight: 4,
-                                }, children: [_jsx(Text, { as: "h2", sx: { borderLeft: '4px solid #28b899', paddingLeft: 2 }, children: "My latest work" }), _jsxs(Link, { children: ["View all work", _jsx(ArrowRightIcon, {})] })] }), _jsxs(Box, { sx: {
-                                    display: 'grid',
-                                    gridTemplateColumns: '1fr 1fr',
-                                    gap: 4,
-                                }, children: [_jsxs(Box, { sx: {
-                                            borderColor: 'border.default',
-                                            borderStyle: 'solid',
-                                            borderWidth: '1',
-                                            borderRadius: '2',
-                                            padding: 4,
-                                        }, children: [_jsxs(Text, { as: "h3", sx: { paddingBottom: 2 }, children: ["clouder ", _jsx(Label, { children: "Public" })] }), _jsxs(Text, { as: "p", sx: { color: 'fg.subtle', fontWeight: 'semibold' }, children: [_jsx(CloudIcon
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { mb: 3, children: _jsx(FlashMock, {}) }), _jsxs(Box, { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 4, children: [_jsxs(Box, { gridColumn: "1 / 3", minHeight: "200px", children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", paddingRight: 4, children: [_jsx(Text, { as: "h2", sx: { borderLeft: '4px solid #28b899', paddingLeft: 2 }, children: "My latest work" }), _jsxs(Link, { children: ["View all work", _jsx(ArrowRightIcon, {})] })] }), _jsxs(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 4, children: [_jsxs(Box, { borderColor: "border.default", borderStyle: "solid", borderWidth: "1", borderRadius: "2", padding: 4, children: [_jsxs(Text, { as: "h3", sx: { paddingBottom: 2 }, children: ["clouder ", _jsx(Label, { children: "Public" })] }), _jsxs(Text, { as: "p", sx: { color: 'fg.subtle', fontWeight: 'semibold' }, children: [_jsx(CloudIcon
                                                     //                  sx={{ margin: "0 4px" }}
                                                     , {}), "Create, manage and share Kubernetes clusters."] }), _jsxs(LabelGroup, { sx: { paddingTop: 2, paddingBottom: 2 }, children: [_jsx(Label, { variant: "accent", children: "Kubernetes" }), _jsx(Label, { variant: "accent", children: "cloud" }), _jsx(Label, { variant: "accent", children: "kubernets-cluster" }), _jsx(Label, { variant: "accent", children: "datalayer" })] }), _jsxs(Text, { as: "p", sx: {
                                                     color: 'fg.subtle',
@@ -47,13 +26,7 @@ export const DashboardMock = () => {
                                                             //                    sx={{ marginRight: 1, marginBottom: "3px" }}
                                                             , {}), "3"] }), _jsxs(Text, { children: [_jsx(StarIcon
                                                             //                    sx={{ marginRight: 1, marginBottom: "3px" }}
-                                                            , {}), "11"] })] })] }), _jsxs(Box, { sx: {
-                                            borderColor: 'border.default',
-                                            borderStyle: 'solid',
-                                            borderWidth: '1',
-                                            borderRadius: '2',
-                                            padding: 4,
-                                        }, children: [_jsxs(Text, { as: "h3", sx: { paddingBottom: 2 }, children: ["jupyter-ui ", _jsx(Label, { children: "Public" })] }), _jsxs(Text, { as: "p", children: [_jsx(ReactJsIcon, { style: { margin: '0 4px' } }), "React.js components 100% compatible with Jupyter.", ' ', _jsx(Link, { href: "https://jupyter-ui-storybook.datalayer.tech", children: "https://jupyter-ui-storybook.datalayer.tech" })] }), _jsxs(LabelGroup, { sx: { paddingTop: 2, paddingBottom: 2 }, children: [_jsx(Label, { variant: "accent", children: "data-science" }), _jsx(Label, { variant: "accent", children: "data" }), _jsx(Label, { variant: "accent", children: "ui" }), _jsx(Label, { variant: "accent", children: "jupyter" }), _jsx(Label, { children: "+4" })] }), _jsxs(Text, { as: "p", sx: {
+                                                            , {}), "11"] })] })] }), _jsxs(Box, { borderColor: "border.default", borderStyle: "solid", borderWidth: "1", borderRadius: "2", padding: 4, children: [_jsxs(Text, { as: "h3", sx: { paddingBottom: 2 }, children: ["jupyter-ui ", _jsx(Label, { children: "Public" })] }), _jsxs(Text, { as: "p", children: [_jsx(ReactJsIcon, { style: { margin: '0 4px' } }), "React.js components 100% compatible with Jupyter.", ' ', _jsx(Link, { href: "https://jupyter-ui-storybook.datalayer.tech", children: "https://jupyter-ui-storybook.datalayer.tech" })] }), _jsxs(LabelGroup, { sx: { paddingTop: 2, paddingBottom: 2 }, children: [_jsx(Label, { variant: "accent", children: "data-science" }), _jsx(Label, { variant: "accent", children: "data" }), _jsx(Label, { variant: "accent", children: "ui" }), _jsx(Label, { variant: "accent", children: "jupyter" }), _jsx(Label, { children: "+4" })] }), _jsxs(Text, { as: "p", sx: {
                                                     color: 'fg.subtle',
                                                     '> *': { paddingLeft: 1, paddingRight: 1 },
                                                 }, children: [_jsxs(Text, { children: [_jsx(DotFillIcon
@@ -68,51 +41,12 @@ export const DashboardMock = () => {
                                                             //                    sx={{ marginRight: 1, marginBottom: "3px" }}
                                                             , {}), "3"] }), _jsxs(Text, { children: [_jsx(StarIcon
                                                             //                    sx={{ marginRight: 1, marginBottom: "3px" }}
-                                                            , {}), "11"] })] })] })] })] }), _jsxs(Box, { sx: {
-                            gridColumn: '3 / 4',
-                            gridRow: '1 / 3',
-                            minHeight: '200px',
-                        }, children: [_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'space-between',
-                                    paddingRight: 4,
-                                }, children: [_jsx(Text, { as: "h2", sx: { borderLeft: '4px solid #28b899', paddingLeft: 2 }, children: "Usage" }), _jsxs(Link, { children: ["More Usage", _jsx(ArrowRightIcon, {})] })] }), _jsxs(Box, { sx: {
-                                    borderColor: 'border.default',
-                                    borderStyle: 'solid',
-                                    borderWidth: '1',
-                                    borderRadius: '2',
-                                    padding: 4,
-                                }, children: [_jsxs(Box, { sx: {
-                                            display: 'inline-flex',
-                                            flexDirection: 'row',
-                                            alignItems: 'center',
-                                        }, children: [_jsx(Text, { as: "h3", sx: { marginRight: '20px' }, children: "Kernels Activity" }), _jsxs(ActionMenu, { children: [_jsxs(ActionMenu.Button, { children: [_jsx(Box, { sx: { color: 'fg.muted', display: 'inline-block' }, children: "View:" }), ' ', 'All kernels'] }), _jsx(ActionMenu.Overlay, { width: "auto", children: _jsx(ActionList, { selectionVariant: "single", children: _jsx(ActionList.Item, { selected: true, children: "All kernels" }) }) })] })] }), _jsx(Text, { as: "h3", children: "Credits usage" }), _jsx(Text, { as: "p", sx: { color: 'fg.subtle' }, children: "Amount today" }), _jsx(Text, { as: "p", sx: { color: 'fg.subtle' }, children: "Balance yesterday" }), _jsx(Text, { as: "h3", children: "Last invoice" }), _jsx(Text, { as: "p", sx: { color: 'fg.subtle', fontSize: '3', fontWeight: 'bold' }, children: "$216" })] })] }), _jsxs(Box, { sx: {
-                            gridColumn: '1 / 3',
-                            minHeight: '200px',
-                        }, children: [_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'space-between',
-                                    paddingRight: 4,
-                                }, children: [_jsx(Text, { as: "h2", sx: { borderLeft: '4px solid #28b899', paddingLeft: 2 }, children: "Trending Notebooks" }), _jsxs(Link, { children: ["All Notebooks", _jsx(ArrowRightIcon, {})] })] }), _jsxs(Box, { sx: {
-                                    borderColor: 'border.default',
-                                    borderStyle: 'solid',
-                                    borderWidth: '1',
-                                    borderRadius: '2',
-                                    display: 'grid',
-                                    gridTemplateColumns: '1fr 1fr',
+                                                            , {}), "11"] })] })] })] })] }), _jsxs(Box, { gridColumn: "3 / 4", gridRow: "1 / 3", minHeight: "200px", children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", paddingRight: 4, children: [_jsx(Text, { as: "h2", sx: { borderLeft: '4px solid #28b899', paddingLeft: 2 }, children: "Usage" }), _jsxs(Link, { children: ["More Usage", _jsx(ArrowRightIcon, {})] })] }), _jsxs(Box, { borderColor: "border.default", borderStyle: "solid", borderWidth: "1", borderRadius: "2", padding: 4, children: [_jsxs(Box, { display: "inline-flex", flexDirection: "row", alignItems: "center", children: [_jsx(Text, { as: "h3", sx: { marginRight: '20px' }, children: "Kernels Activity" }), _jsxs(ActionMenu, { children: [_jsxs(ActionMenu.Button, { children: [_jsx(Box, { color: "fg.muted", display: "inline-block", children: "View:" }), ' ', 'All kernels'] }), _jsx(ActionMenu.Overlay, { width: "auto", children: _jsx(ActionList, { selectionVariant: "single", children: _jsx(ActionList.Item, { selected: true, children: "All kernels" }) }) })] })] }), _jsx(Text, { as: "h3", children: "Credits usage" }), _jsx(Text, { as: "p", sx: { color: 'fg.subtle' }, children: "Amount today" }), _jsx(Text, { as: "p", sx: { color: 'fg.subtle' }, children: "Balance yesterday" }), _jsx(Text, { as: "h3", children: "Last invoice" }), _jsx(Text, { as: "p", sx: { color: 'fg.subtle', fontSize: '3', fontWeight: 'bold' }, children: "$216" })] })] }), _jsxs(Box, { gridColumn: "1 / 3", minHeight: "200px", children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", paddingRight: 4, children: [_jsx(Text, { as: "h2", sx: { borderLeft: '4px solid #28b899', paddingLeft: 2 }, children: "Trending Notebooks" }), _jsxs(Link, { children: ["All Notebooks", _jsx(ArrowRightIcon, {})] })] }), _jsxs(Box, { borderColor: "border.default", borderStyle: "solid", borderWidth: "1", borderRadius: "2", display: "grid", gridTemplateColumns: "1fr 1fr", sx: {
                                     '> :not(:last-child)': {
                                         borderRightColor: 'border.default',
                                         borderRightStyle: 'solid',
                                         borderRightWidth: '1',
                                     },
-                                }, children: [_jsxs(Box, { sx: {
-                                            padding: 4,
-                                        }, children: [_jsx(Text, { as: "h3", children: "Notebook name abc" }), _jsx(Text, { sx: { color: 'fg.subtle' }, children: "Subtitle comes here" }), _jsxs(Box, { sx: { height: '300px', maxWidth: '380px' }, children: [_jsx(ReactECharts, { option: ECHART_MOCK_1 }), ";"] }), _jsxs(Text, { as: "p", sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx(Link, { children: "Link to somewhere" }), _jsxs(Link, { children: ["Second link", _jsx(LinkIcon, {})] })] })] }), _jsxs(Box, { sx: {
-                                            padding: 4,
-                                        }, children: [_jsx(Text, { as: "h3", children: "Notebook name abc" }), _jsx(Text, { sx: { color: 'fg.subtle' }, children: "Subtitle comes here" }), _jsxs(Box, { sx: { height: '300px', maxWidth: '380px' }, children: [_jsx(ReactECharts, { option: ECHART_MOCK_3 }), ";"] }), _jsxs(Text, { as: "p", sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx(Link, { children: "Link to somewhere" }), _jsxs(Link, { children: ["Second link", _jsx(LinkIcon, {})] })] })] }), _jsxs(Box, { sx: {
-                                            padding: 4,
-                                        }, children: [_jsx(Text, { as: "h3", children: "Notebook name abc" }), _jsx(Text, { sx: { color: 'fg.subtle' }, children: "Subtitle comes here" }), _jsxs(Box, { sx: { height: '300px', maxWidth: '380px' }, children: [_jsx(ReactECharts, { option: ECHART_MOCK_2 }), ";"] }), _jsxs(Text, { as: "p", sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx(Link, { children: "Link to somewhere" }), _jsxs(Link, { children: ["Second link", _jsx(LinkIcon, {})] })] })] })] })] })] })] }));
+                                }, children: [_jsxs(Box, { padding: 4, children: [_jsx(Text, { as: "h3", children: "Notebook name abc" }), _jsx(Text, { sx: { color: 'fg.subtle' }, children: "Subtitle comes here" }), _jsxs(Box, { height: "300px", maxWidth: "380px", children: [_jsx(ReactECharts, { option: ECHART_MOCK_1 }), ";"] }), _jsxs(Text, { as: "p", sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx(Link, { children: "Link to somewhere" }), _jsxs(Link, { children: ["Second link", _jsx(LinkIcon, {})] })] })] }), _jsxs(Box, { padding: 4, children: [_jsx(Text, { as: "h3", children: "Notebook name abc" }), _jsx(Text, { sx: { color: 'fg.subtle' }, children: "Subtitle comes here" }), _jsxs(Box, { height: "300px", maxWidth: "380px", children: [_jsx(ReactECharts, { option: ECHART_MOCK_3 }), ";"] }), _jsxs(Text, { as: "p", sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx(Link, { children: "Link to somewhere" }), _jsxs(Link, { children: ["Second link", _jsx(LinkIcon, {})] })] })] }), _jsxs(Box, { padding: 4, children: [_jsx(Text, { as: "h3", children: "Notebook name abc" }), _jsx(Text, { sx: { color: 'fg.subtle' }, children: "Subtitle comes here" }), _jsxs(Box, { height: "300px", maxWidth: "380px", children: [_jsx(ReactECharts, { option: ECHART_MOCK_2 }), ";"] }), _jsxs(Text, { as: "p", sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx(Link, { children: "Link to somewhere" }), _jsxs(Link, { children: ["Second link", _jsx(LinkIcon, {})] })] })] })] })] })] })] }));
 };
 export default DashboardMock;

package/lib/mocks/views/FormMock.js

@@ -4,7 +4,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Distributed under the terms of the Modified BSD License.
  */
 import { useState } from 'react';
-import { Box, FormControl, TextInputWithTokens, Autocomplete, Select, Textarea, Heading, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { FormControl, TextInputWithTokens, Autocomplete, Select, Textarea, Heading, } from '@primer/react';
 export const FormMock = (props) => {
     const { title } = props;
     const [tokens, setTokens] = useState([
@@ -15,7 +16,7 @@ export const FormMock = (props) => {
     const onTokenRemove = tokenId => {
         setTokens(tokens.filter(token => token.id !== tokenId));
     };
-    return (_jsxs(Box, { display: "grid", sx: { gap: 3 }, children: [_jsx(Heading, { children: title }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "TextInputWithTokens" }), _jsx(TextInputWithTokens, { onTokenRemove: onTokenRemove, tokens: tokens })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Autocomplete" }), _jsxs(Autocomplete, { children: [_jsx(Autocomplete.Input, { block: true }), _jsx(Autocomplete.Overlay, { children: _jsx(Autocomplete.Menu, { items: [
+    return (_jsxs(Box, { display: "grid", gap: 3, children: [_jsx(Heading, { children: title }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "TextInputWithTokens" }), _jsx(TextInputWithTokens, { onTokenRemove: onTokenRemove, tokens: tokens })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Autocomplete" }), _jsxs(Autocomplete, { children: [_jsx(Autocomplete.Input, { block: true }), _jsx(Autocomplete.Overlay, { children: _jsx(Autocomplete.Menu, { items: [
                                         { text: 'css', id: '0' },
                                         { text: 'css-in-js', id: '1' },
                                         { text: 'styled-system', id: '2' },

package/lib/mocks/views/TableMock.js

@@ -3,7 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { Box, LabelGroup, ActionMenu, ActionList, IconButton, Label, RelativeTime, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { LabelGroup, ActionMenu, ActionList, IconButton, Label, RelativeTime, } from '@primer/react';
 import { Table, DataTable } from '@primer/react/experimental';
 import { KebabHorizontalIcon, DownloadIcon } from '@primer/octicons-react';
 import { VisuallyHidden } from './../../components/display/index.js';
@@ -101,7 +102,7 @@ function uppercase(input) {
 }
 export const TableMock = (props) => {
     const { title } = props;
-    return (_jsx(Box, { display: "grid", sx: { gap: 3 }, children: _jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h2", id: "repositories", children: title }), _jsx(Table.Subtitle, { as: "p", id: "repositories-subtitle", children: "A subtitle could appear here to give extra context to the data." }), _jsx(DataTable, { "aria-labelledby": "repositories", "aria-describedby": "repositories-subtitle", data: data, columns: [
+    return (_jsx(Box, { display: "grid", gap: 3, children: _jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h2", id: "repositories", children: title }), _jsx(Table.Subtitle, { as: "p", id: "repositories-subtitle", children: "A subtitle could appear here to give extra context to the data." }), _jsx(DataTable, { "aria-labelledby": "repositories", "aria-describedby": "repositories-subtitle", data: data, columns: [
                         {
                             header: 'Repository',
                             field: 'name',

package/lib/mocks/views/WipMock.js

@@ -3,7 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { Box, PageHeader, Flash, PageLayout } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { PageHeader, Flash, PageLayout } from '@primer/react';
 import { ConstructionIcon } from '@datalayer/icons-react';
 export const WipMock = (props) => {
     const { title } = props;

package/lib/models/Person.d.ts

@@ -0,0 +1,9 @@
+/** The signed-in person, as a shell needs one. */
+export type Person = {
+    uid: string;
+    handle: string;
+    displayName: string;
+    avatarIcon?: string;
+};
+/** The person in IAM's `GET /api/iam/v1/me` answer (`me`); undefined without a uid and a handle. */
+export declare function personOf(raw: unknown): Person | undefined;

package/lib/models/Person.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/** The person in IAM's `GET /api/iam/v1/me` answer (`me`); undefined without a uid and a handle. */
+export function personOf(raw) {
+    if (!raw || typeof raw !== 'object') {
+        return undefined;
+    }
+    const user = raw;
+    const handle = typeof user.handle_s === 'string' ? user.handle_s : '';
+    const uid = typeof user.uid === 'string' ? user.uid : '';
+    if (!handle || !uid) {
+        return undefined;
+    }
+    const names = [user.first_name_t, user.last_name_t].filter((part) => typeof part === 'string' && part.trim() !== '');
+    return {
+        uid,
+        handle,
+        displayName: names.length ? names.join(' ') : handle,
+        avatarIcon: typeof user.avatar_icon_s === 'string' ? user.avatar_icon_s : undefined,
+    };
+}

package/lib/otel/views/OtelLive.js

@@ -13,7 +13,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * @module otel/OtelLive
  */
 import { useState, useCallback, useMemo, useEffect, useRef, } from 'react';
-import { Box, Text, Button, Label } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text, Button, Label } from '@primer/react';
 import { GitBranchIcon, ClockIcon } from '@primer/octicons-react';
 import { getOtelConsumeUrl } from '../../state/substates/CoreState.js';
 import { useOtelTraces, useOtelTrace, useOtelLogs, useOtelMetrics, useOtelServices, useOtelWebSocket, } from '../hooks/index.js';
@@ -287,70 +288,11 @@ export const OtelLive = ({ baseUrl = getOtelConsumeUrl(), wsBaseUrl, token, auto
             return ts >= s && ts <= e;
         });
     }, [metrics, isRangeActive, rangeStart, rangeEnd]);
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            flex: 1,
-            minHeight: 0,
-            height: '100%',
-            color: 'fg.default',
-            bg: 'canvas.default',
-            border: '1px solid',
-            borderColor: 'border.default',
-            borderRadius: 2,
-            overflow: 'hidden',
-        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0 }, children: [_jsx(Box, { sx: { flex: 1 }, children: _jsx(OtelSearchBar, { signal: signal, onSignalChange: setSignal, services: effectiveServices, selectedService: service, onServiceChange: setService, query: query, onQueryChange: setQuery, onRefresh: handleRefresh, loading: signal === 'traces'
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", flex: 1, minHeight: 0, height: "100%", color: "fg.default", bg: "canvas.default", border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "hidden", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 0, children: [_jsx(Box, { flex: 1, children: _jsx(OtelSearchBar, { signal: signal, onSignalChange: setSignal, services: effectiveServices, selectedService: service, onServiceChange: setService, query: query, onQueryChange: setQuery, onRefresh: handleRefresh, loading: signal === 'traces'
                                 ? tracesLoading
                                 : signal === 'logs'
                                     ? logsLoading
-                                    : metricsLoading }) }), _jsx(Box, { sx: { pr: 2, flexShrink: 0 }, children: _jsx(Label, { variant: wsConnected ? 'success' : 'secondary', size: "small", children: wsConnected ? '● Live' : '○ Polling' }) })] }), timelineBounds && rangeStart && rangeEnd && (_jsx(Box, { sx: {
-                    px: 3,
-                    pt: 2,
-                    pb: 1,
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                    bg: 'canvas.subtle',
-                    flexShrink: 0,
-                    position: 'relative',
-                    zIndex: 0,
-                }, children: _jsx(OtelTimelineRangeSlider, { timelineStart: timelineBounds.start, timelineEnd: timelineBounds.end, selectedStart: rangeStart, selectedEnd: rangeEnd, onRangeChange: handleRangeChange, histogram: histogram, height: 48, tickCount: 6 }) })), _jsxs(Box, { sx: { display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }, children: [_jsxs(Box, { sx: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            flex: hasDetail ? '0 0 55%' : '1 1 100%',
-                            minHeight: 0,
-                            overflow: 'hidden',
-                        }, children: [signal === 'traces' && (_jsx(OtelTracesList, { spans: filteredTraces, loading: tracesLoading, selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect })), signal === 'logs' && (_jsx(OtelLogsList, { logs: filteredLogs, loading: logsLoading, selectedLogIndex: selectedLogIdx, onSelectLog: handleLogSelect })), signal === 'metrics' && (_jsx(OtelMetricsList, { metrics: filteredMetrics, loading: metricsLoading }))] }), hasDetail && (_jsxs(Box, { sx: {
-                            flex: '0 0 45%',
-                            minHeight: 0,
-                            overflow: 'auto',
-                            borderLeft: '1px solid',
-                            borderColor: 'border.default',
-                        }, children: [signal === 'traces' && selectedSpan && (_jsx(OtelSpanDetail, { span: selectedSpan, traceSpans: traceSpans ?? undefined, onClose: handleCloseDetail })), signal === 'logs' && selectedLogIdx !== null && logs && (_jsxs(Box, { sx: { p: 3 }, children: [_jsxs(Box, { sx: {
-                                            display: 'flex',
-                                            justifyContent: 'space-between',
-                                            mb: 3,
-                                        }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: "Log Detail" }), _jsx(Button, { size: "small", variant: "invisible", onClick: handleCloseDetail, children: "\u2715" })] }), _jsx(Box, { as: "pre", sx: {
-                                            m: 0,
-                                            fontSize: 1,
-                                            fontFamily: 'mono',
-                                            whiteSpace: 'pre-wrap',
-                                            wordBreak: 'break-word',
-                                        }, children: JSON.stringify(logs[selectedLogIdx], null, 2) })] }))] }))] }), signal === 'traces' && selectedSpan && spanTree.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
-                            display: 'flex',
-                            gap: 1,
-                            px: 3,
-                            py: 1,
-                            bg: 'canvas.subtle',
-                            borderTop: '1px solid',
-                            borderColor: 'border.default',
-                            flexShrink: 0,
-                        }, children: [_jsx(Button, { size: "small", variant: bottomPane === 'timeline' ? 'primary' : 'invisible', leadingVisual: ClockIcon, onClick: () => toggleBottomPane('timeline'), children: "Timeline" }), _jsx(Button, { size: "small", variant: bottomPane === 'tree' ? 'primary' : 'invisible', leadingVisual: GitBranchIcon, onClick: () => toggleBottomPane('tree'), children: "Span Tree" })] }), bottomPane && (_jsxs(Box, { sx: {
-                            height: 260,
-                            overflow: 'auto',
-                            borderTop: '1px solid',
-                            borderColor: 'border.default',
-                            flexShrink: 0,
-                        }, children: [bottomPane === 'timeline' && (_jsx(OtelTimeline, { spans: traceSpans ?? [], selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect })), bottomPane === 'tree' && (_jsx(OtelSpanTree, { spans: spanTree, selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect, defaultExpandDepth: 3 }))] }))] }))] }));
+                                    : metricsLoading }) }), _jsx(Box, { pr: 2, flexShrink: 0, children: _jsx(Label, { variant: wsConnected ? 'success' : 'secondary', size: "small", children: wsConnected ? '● Live' : '○ Polling' }) })] }), timelineBounds && rangeStart && rangeEnd && (_jsx(Box, { px: 3, pt: 2, pb: 1, borderBottom: "1px solid", borderColor: "border.default", bg: "canvas.subtle", flexShrink: 0, position: "relative", zIndex: 0, children: _jsx(OtelTimelineRangeSlider, { timelineStart: timelineBounds.start, timelineEnd: timelineBounds.end, selectedStart: rangeStart, selectedEnd: rangeEnd, onRangeChange: handleRangeChange, histogram: histogram, height: 48, tickCount: 6 }) })), _jsxs(Box, { display: "flex", flex: 1, minHeight: 0, overflow: "hidden", children: [_jsxs(Box, { display: "flex", flexDirection: "column", flex: hasDetail ? '0 0 55%' : '1 1 100%', minHeight: 0, overflow: "hidden", children: [signal === 'traces' && (_jsx(OtelTracesList, { spans: filteredTraces, loading: tracesLoading, selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect })), signal === 'logs' && (_jsx(OtelLogsList, { logs: filteredLogs, loading: logsLoading, selectedLogIndex: selectedLogIdx, onSelectLog: handleLogSelect })), signal === 'metrics' && (_jsx(OtelMetricsList, { metrics: filteredMetrics, loading: metricsLoading }))] }), hasDetail && (_jsxs(Box, { flex: "0 0 45%", minHeight: 0, overflow: "auto", borderLeft: "1px solid", borderColor: "border.default", children: [signal === 'traces' && selectedSpan && (_jsx(OtelSpanDetail, { span: selectedSpan, traceSpans: traceSpans ?? undefined, onClose: handleCloseDetail })), signal === 'logs' && selectedLogIdx !== null && logs && (_jsxs(Box, { p: 3, children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", mb: 3, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: "Log Detail" }), _jsx(Button, { size: "small", variant: "invisible", onClick: handleCloseDetail, children: "\u2715" })] }), _jsx(Box, { as: "pre", m: 0, fontSize: 1, fontFamily: "mono", whiteSpace: "pre-wrap", wordBreak: "break-word", children: JSON.stringify(logs[selectedLogIdx], null, 2) })] }))] }))] }), signal === 'traces' && selectedSpan && spanTree.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", gap: 1, px: 3, py: 1, bg: "canvas.subtle", borderTop: "1px solid", borderColor: "border.default", flexShrink: 0, children: [_jsx(Button, { size: "small", variant: bottomPane === 'timeline' ? 'primary' : 'invisible', leadingVisual: ClockIcon, onClick: () => toggleBottomPane('timeline'), children: "Timeline" }), _jsx(Button, { size: "small", variant: bottomPane === 'tree' ? 'primary' : 'invisible', leadingVisual: GitBranchIcon, onClick: () => toggleBottomPane('tree'), children: "Span Tree" })] }), bottomPane && (_jsxs(Box, { height: 260, overflow: "auto", borderTop: "1px solid", borderColor: "border.default", flexShrink: 0, children: [bottomPane === 'timeline' && (_jsx(OtelTimeline, { spans: traceSpans ?? [], selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect })), bottomPane === 'tree' && (_jsx(OtelSpanTree, { spans: spanTree, selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect, defaultExpandDepth: 3 }))] }))] }))] }));
 };
 // ── Client-side filter helpers ──────────────────────────────────────
 function filterSpans(spans, q) {

package/lib/otel/views/OtelLiveSpans.js

@@ -16,7 +16,8 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
  * @module otel/views/OtelLiveSpans
  */
 import { useMemo, useState } from 'react';
-import { ActionList, ActionMenu, Box, Button, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ActionList, ActionMenu, Button, Text } from '@primer/react';
 import { DownloadIcon, PauseIcon, PlayIcon, TrashIcon, } from '@primer/octicons-react';
 import { toMs } from '../utils.js';
 import { spansOfService } from '../live/filter.js';
@@ -93,22 +94,7 @@ export const OtelLiveSpans = ({ tracer, spans: given, service, facets = DEFAULT_
         ? everything.filter(span => span.trace_id === selectedSpan.trace_id)
         : [], [everything, selectedSpan]);
     const side = detailPlacement === 'side' && !compact;
-    return (_jsxs(Box, { "data-otel-live-spans": "", sx: {
-            border: '1px solid',
-            borderColor: 'border.default',
-            borderRadius: 2,
-            bg: 'canvas.default',
-            color: 'fg.default',
-            minWidth: 0,
-        }, children: [_jsxs(Box, { role: "toolbar", "aria-label": label, sx: {
-                    display: 'flex',
-                    flexWrap: 'wrap',
-                    gap: 2,
-                    alignItems: 'center',
-                    p: 2,
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                }, children: [facets.map((facet, index) => (_jsx(FacetMenu, { facet: facet, options: options[index] ?? [], selected: selected[index] ?? new Set(), onChange: next => setSelected(prev => facets.map((_, at) => at === index ? next : (prev[at] ?? new Set()))) }, facet.label))), _jsx(Box, { sx: { flex: 1 } }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, "data-otel-span-count": "", children: [rows.length === shown.length
+    return (_jsxs(Box, { "data-otel-live-spans": "", border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.default", color: "fg.default", minWidth: 0, children: [_jsxs(Box, { role: "toolbar", "aria-label": label, display: "flex", flexWrap: "wrap", gap: 2, alignItems: "center", p: 2, borderBottom: "1px solid", borderColor: "border.default", children: [facets.map((facet, index) => (_jsx(FacetMenu, { facet: facet, options: options[index] ?? [], selected: selected[index] ?? new Set(), onChange: next => setSelected(prev => facets.map((_, at) => at === index ? next : (prev[at] ?? new Set()))) }, facet.label))), _jsx(Box, { flex: 1 }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, "data-otel-span-count": "", children: [rows.length === shown.length
                                 ? `${rows.length} ${rows.length === 1 ? 'span' : 'spans'}`
                                 : `${rows.length} of ${shown.length}`, waiting > 0 ? ` · ${waiting} new` : ''] }), _jsx(Button, { size: "small", leadingVisual: held ? PlayIcon : PauseIcon, "aria-pressed": held !== null, onClick: () => setHeld(held ? null : recorded), "data-otel-pause": "", children: held ? 'Resume' : 'Pause' }), _jsx(Button, { size: "small", leadingVisual: TrashIcon, onClick: () => {
                             setHeld(null);
@@ -123,17 +109,6 @@ export const OtelLiveSpans = ({ tracer, spans: given, service, facets = DEFAULT_
                         }, "data-otel-clear": "", children: "Clear" }), _jsx(Button, { size: "small", leadingVisual: DownloadIcon, disabled: !recorded.length, onClick: () => download(exportName, {
                             exportedAt: new Date().toISOString(),
                             spans: [...recorded],
-                        }), "data-otel-export": "", children: "Export" })] }), _jsxs(Box, { sx: {
-                    display: side ? 'grid' : 'block',
-                    gridTemplateColumns: side
-                        ? 'minmax(0, 3fr) minmax(0, 2fr)'
-                        : undefined,
-                }, children: [_jsx(Box, { sx: { maxHeight, overflowY: 'auto', minWidth: 0 }, children: _jsx(OtelTracesList, { spans: rows, selectedSpanId: selectedSpanId, onSelectSpan: span => setSelectedSpanId(span.span_id), emptyText: emptyText, compact: compact, defaultExpanded: true, renderSpanMark: renderSpanMark, describeSpan: describeSpan }) }), selectedSpan && (_jsx(Box, { "data-otel-live-detail": "", sx: {
-                            maxHeight,
-                            overflowY: 'auto',
-                            minWidth: 0,
-                            borderTop: side ? 'none' : '1px solid',
-                            borderColor: 'border.default',
-                        }, children: _jsx(OtelSpanDetail, { span: selectedSpan, traceSpans: traceSpans, onClose: () => setSelectedSpanId(null) }) }))] })] }));
+                        }), "data-otel-export": "", children: "Export" })] }), _jsxs(Box, { display: side ? 'grid' : 'block', gridTemplateColumns: side ? 'minmax(0, 3fr) minmax(0, 2fr)' : undefined, children: [_jsx(Box, { maxHeight: maxHeight, overflowY: "auto", minWidth: 0, children: _jsx(OtelTracesList, { spans: rows, selectedSpanId: selectedSpanId, onSelectSpan: span => setSelectedSpanId(span.span_id), emptyText: emptyText, compact: compact, defaultExpanded: true, renderSpanMark: renderSpanMark, describeSpan: describeSpan }) }), selectedSpan && (_jsx(Box, { "data-otel-live-detail": "", maxHeight: maxHeight, overflowY: "auto", minWidth: 0, borderTop: side ? 'none' : '1px solid', borderColor: "border.default", children: _jsx(OtelSpanDetail, { span: selectedSpan, traceSpans: traceSpans, onClose: () => setSelectedSpanId(null) }) }))] })] }));
 };
 export default OtelLiveSpans;