@datalayer/core 1.2.17 → 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/index.d.ts

@@ -13,6 +13,8 @@
  */
 export type { OtelSpan, OtelLog, OtelMetric, OtelSpanEvent, OtelSpanLink, SignalType, OtelLiveProps, OtelTracesListProps, OtelSpanDetailProps, OtelTimelineProps, OtelLogsListProps, OtelMetricsListProps, OtelSpanTreeProps, OtelSearchBarProps, OtelTimelineRangeSliderProps, OtelQueryRow, OtelQueryResult, } from './types';
 export { toMs, formatDuration, formatTime, serviceColor, kindColor, severityColor, severityVariant, buildSpanTree, flattenSpanTree, } from './utils';
+export { createOtelLiveTracer, traceparentOf, PEER_SERVICE, spanConcerns, spansOfService, useOtelLiveSpans, useOtelLiveTracer, } from './live';
+export type { OtelAttributeValue, OtelAttributes, OtelLiveExport, OtelLiveSpan, OtelLiveTracer, OtelLiveTracerOptions, OtelSpanContext, OtelSpanKindName, OtelStartSpanOptions, } from './live';
 export { resolveOtelAuth, resolveOtelUserUid, buildOtelWebSocketUrl, } from './auth';
 export type { ResolvedOtelAuth } from './auth';
 export { useOtelTraces, useOtelTrace, useOtelLogs, useOtelMetrics, useOtelServices, useOtelStats, useOtelQuery, useOtelSystem, useOtelWebSocket, setOtelOnUnauthorized, } from './hooks';
@@ -29,6 +31,8 @@ export { OtelMetricsList } from './views';
 export { OtelMetricsChart } from './views';
 export type { OtelMetricsChartProps } from './views';
 export { OtelTimeline } from './views';
+export { OtelLiveSpans, DEFAULT_SPAN_FACETS, filterSpansByFacets, unfoldedValue, } from './views';
+export type { OtelLiveSpansProps, OtelSpanFacet } from './views';
 export { OtelTimelineRangeSlider } from './views';
 export { OtelSqlView } from './views';
 export type { OtelSqlViewProps } from './views';

package/lib/otel/index.js

@@ -4,6 +4,8 @@
  */
 // ── Utils ─────────────────────────────────────────────────────────────────────
 export { toMs, formatDuration, formatTime, serviceColor, kindColor, severityColor, severityVariant, buildSpanTree, flattenSpanTree, } from './utils.js';
+// ── In the page ───────────────────────────────────────────────────────────────
+export { createOtelLiveTracer, traceparentOf, PEER_SERVICE, spanConcerns, spansOfService, useOtelLiveSpans, useOtelLiveTracer, } from './live/index.js';
 // ── Auth helpers ──────────────────────────────────────────────────────────────
 export { resolveOtelAuth, resolveOtelUserUid, buildOtelWebSocketUrl, } from './auth.js';
 // ── Hooks ─────────────────────────────────────────────────────────────────────
@@ -20,6 +22,7 @@ export { OtelSearchBar } from './views/index.js';
 export { OtelMetricsList } from './views/index.js';
 export { OtelMetricsChart } from './views/index.js';
 export { OtelTimeline } from './views/index.js';
+export { OtelLiveSpans, DEFAULT_SPAN_FACETS, filterSpansByFacets, unfoldedValue, } from './views/index.js';
 export { OtelTimelineRangeSlider } from './views/index.js';
 export { OtelSqlView } from './views/index.js';
 export { OtelSystemView } from './views/index.js';

package/lib/otel/live/filter.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Which spans concern a service: those it did, and those done toward it — a
+ * client span whose `peer.service` names it (the OpenTelemetry attribute for
+ * the remote service a call goes to). One message between two services shows
+ * in both: sent in one, received in the other.
+ *
+ * @module otel/live/filter
+ */
+import type { OtelSpan } from '../types';
+/** The OpenTelemetry attribute naming the service a call goes to. */
+export declare const PEER_SERVICE = "peer.service";
+/** Whether a span concerns a service: done by it, or toward it. */
+export declare function spanConcerns(span: OtelSpan, service: string): boolean;
+/** The spans that concern a service; every span without one. */
+export declare function spansOfService(spans: readonly OtelSpan[], service: string | undefined): OtelSpan[];

package/lib/otel/live/filter.js

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/** The OpenTelemetry attribute naming the service a call goes to. */
+export const PEER_SERVICE = 'peer.service';
+/** Whether a span concerns a service: done by it, or toward it. */
+export function spanConcerns(span, service) {
+    return (span.service_name === service || span.attributes?.[PEER_SERVICE] === service);
+}
+/** The spans that concern a service; every span without one. */
+export function spansOfService(spans, service) {
+    return service
+        ? spans.filter(span => spanConcerns(span, service))
+        : [...spans];
+}

package/lib/otel/live/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * OpenTelemetry in the page: a tracer whose spans the OTEL views draw as
+ * they happen, and which of them concern a service. Light: no view, no
+ * client, nothing sent.
+ *
+ * @module otel/live
+ */
+export { createOtelLiveTracer, traceparentOf, type OtelAttributeValue, type OtelAttributes, type OtelLiveExport, type OtelLiveSpan, type OtelLiveTracer, type OtelLiveTracerOptions, type OtelSpanContext, type OtelSpanKindName, type OtelStartSpanOptions, } from './tracer';
+export { PEER_SERVICE, spanConcerns, spansOfService } from './filter';
+export { useOtelLiveSpans, useOtelLiveTracer } from './useOtelLiveSpans';

package/lib/otel/live/index.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * OpenTelemetry in the page: a tracer whose spans the OTEL views draw as
+ * they happen, and which of them concern a service. Light: no view, no
+ * client, nothing sent.
+ *
+ * @module otel/live
+ */
+export { createOtelLiveTracer, traceparentOf, } from './tracer.js';
+export { PEER_SERVICE, spanConcerns, spansOfService } from './filter.js';
+export { useOtelLiveSpans, useOtelLiveTracer } from './useOtelLiveSpans.js';

package/lib/otel/live/tracer.d.ts

@@ -0,0 +1,94 @@
+/**
+ * A tracer that lives in the page: spans started and ended in the browser,
+ * kept as the OTEL views draw them (`OtelSpan`), as they happen — a span is
+ * there from its start (`in_progress`), its events added as they come, its
+ * end and status when it ends.
+ *
+ * What it records is OpenTelemetry: W3C trace and span ids, a span kind, a
+ * status, attributes of primitive values (structured values as JSON text, as
+ * the GenAI semantic conventions carry arguments and results), events, and an
+ * `exception` event for an error. Nothing is sent anywhere: the record is the
+ * page's, read by `useOtelLiveSpans` and drawn by `OtelLiveSpans`.
+ *
+ * A span started without a parent continues the innermost span still open
+ * of the same service — what one agent of the page is doing — so a tool call
+ * nests under its turn without the caller carrying a context; `parent: null`
+ * starts a trace of its own.
+ *
+ * @module otel/live/tracer
+ */
+import type { OtelSpan, OtelSpanLink } from '../types';
+/** What identifies a span: its trace and itself. */
+export interface OtelSpanContext {
+    trace_id: string;
+    span_id: string;
+}
+/** An attribute's value, as OpenTelemetry allows it. */
+export type OtelAttributeValue = string | number | boolean | readonly string[] | readonly number[] | readonly boolean[];
+/** Attributes; an `undefined` value is left out. */
+export type OtelAttributes = Record<string, OtelAttributeValue | undefined>;
+/** A span's kind, as the OTEL views name it. */
+export type OtelSpanKindName = 'INTERNAL' | 'SERVER' | 'CLIENT' | 'PRODUCER' | 'CONSUMER';
+export interface OtelStartSpanOptions {
+    /** The service that does it: the tracer's own unless said. */
+    serviceName?: string;
+    kind?: OtelSpanKindName;
+    attributes?: OtelAttributes;
+    /**
+     * The span it is part of. Left out: the innermost span still open of the
+     * same service; `null`: a trace of its own.
+     */
+    parent?: OtelSpanContext | null;
+    /** When it started, in ms since the epoch: now unless said. */
+    startTime?: number;
+    /** The instrumentation scope: the tracer's own unless said. */
+    scopeName?: string;
+    links?: OtelSpanLink[];
+}
+/** A span being recorded. */
+export interface OtelLiveSpan {
+    readonly context: OtelSpanContext;
+    /** Whether it has ended. */
+    readonly ended: boolean;
+    setAttribute(key: string, value: OtelAttributeValue | undefined): void;
+    setAttributes(attributes: OtelAttributes): void;
+    addEvent(name: string, attributes?: OtelAttributes, time?: number): void;
+    setStatus(code: 'OK' | 'ERROR', message?: string): void;
+    /** An `exception` event, and the status `ERROR`. */
+    recordException(error: unknown, time?: number): void;
+    updateName(name: string): void;
+    /** End it; a second end is ignored. */
+    end(time?: number): void;
+}
+/** The record, saved. */
+export interface OtelLiveExport {
+    exportedAt: string;
+    spans: OtelSpan[];
+}
+export interface OtelLiveTracer {
+    /** The service a span is done by unless it says. */
+    readonly serviceName: string;
+    startSpan(name: string, options?: OtelStartSpanOptions): OtelLiveSpan;
+    /** The innermost span still open of a service (the tracer's own unless said). */
+    activeSpan(serviceName?: string): OtelSpanContext | undefined;
+    /** The spans, oldest first: a new array each time one changes. */
+    spans(): readonly OtelSpan[];
+    subscribe(listener: () => void): () => void;
+    /** Forget every span; those still open are recorded no more. */
+    clear(): void;
+    exportSpans(): OtelLiveExport;
+}
+export interface OtelLiveTracerOptions {
+    serviceName?: string;
+    scopeName?: string;
+    /** The clock: `Date.now` unless a test sets it. */
+    now?: () => number;
+    /** The most spans kept: the oldest ended ones go first. Default 2000. */
+    limit?: number;
+    /** Random bytes as hex, for ids: `crypto.getRandomValues` unless a test sets it. */
+    randomHex?: (bytes: number) => string;
+}
+/** A W3C `traceparent` header for a span: `00-<trace>-<span>-01`. */
+export declare function traceparentOf(context: OtelSpanContext): string;
+/** Make a tracer for the page. */
+export declare function createOtelLiveTracer(options?: OtelLiveTracerOptions): OtelLiveTracer;