@datalayer/core 1.2.18 → 1.2.20

package/lib/components/spaces/SpaceDetailsOverlay.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ActionMenu, Box, Button, Label, Text, ThemeProvider, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ActionMenu, Button, Label, Text, ThemeProvider } from '@primer/react';
 import { SpaceIcon } from '@primer/octicons-react';
 import { useNavigate } from '../../hooks/index.js';
 import { buildSpaceDetailsPath } from './spaceDisplayModel.js';
@@ -31,22 +32,7 @@ export function SpaceDetailsCard({ uid, displayName, handle, accountHandle, desc
     const address = normalizedAccount && normalizedHandle
         ? `@${normalizedAccount}/${normalizedHandle}`
         : normalizedHandle;
-    return (_jsxs(Box, { sx: { display: 'grid', gap: 3, p: 4, minWidth: 360 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { "aria-hidden": "true", sx: {
-                            display: 'inline-flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            width: 40,
-                            height: 40,
-                            flexShrink: 0,
-                            borderRadius: 2,
-                            bg: 'accent.subtle',
-                            color: 'accent.fg',
-                        }, children: _jsx(SpaceIcon, { size: 20 }) }), _jsxs(Box, { sx: { display: 'grid', gap: 0.5, minWidth: 0 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: normalizedDisplayName }), address ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: address })) : null] })] }), _jsxs(Box, { sx: {
-                    display: 'grid',
-                    gridTemplateColumns: '110px 1fr',
-                    gap: 1,
-                    alignItems: 'baseline',
-                }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Kind" }), _jsx(Text, { sx: { fontSize: 1 }, children: "space" }), normalizedHandle ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Handle" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedHandle })] })) : null, normalizedAccount ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Account" }), _jsxs(Text, { sx: { fontSize: 1 }, children: ["@", normalizedAccount] })] })) : null, normalize(variant) ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Variant" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalize(variant) })] })) : null, typeof isPublic === 'boolean' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Visibility" }), _jsx(Label, { size: "small", variant: isPublic ? 'success' : 'secondary', sx: { justifySelf: 'start', width: 'fit-content' }, children: isPublic ? 'Public' : 'Private' })] })) : null, _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Description" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalize(description) || 'N/A' }), normalizedUid ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "UID" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedUid })] })) : null] }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 2 }, children: _jsx(Button, { size: "small", onClick: go, disabled: !targetPath, children: "View Space" }) })] }));
+    return (_jsxs(Box, { display: "grid", gap: 3, p: 4, minWidth: 360, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Box, { "aria-hidden": "true", display: "inline-flex", alignItems: "center", justifyContent: "center", width: 40, height: 40, flexShrink: 0, borderRadius: 2, bg: "accent.subtle", color: "accent.fg", children: _jsx(SpaceIcon, { size: 20 }) }), _jsxs(Box, { display: "grid", gap: 0.5, minWidth: 0, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: normalizedDisplayName }), address ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: address })) : null] })] }), _jsxs(Box, { display: "grid", gridTemplateColumns: "110px 1fr", gap: 1, alignItems: "baseline", children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Kind" }), _jsx(Text, { sx: { fontSize: 1 }, children: "space" }), normalizedHandle ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Handle" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedHandle })] })) : null, normalizedAccount ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Account" }), _jsxs(Text, { sx: { fontSize: 1 }, children: ["@", normalizedAccount] })] })) : null, normalize(variant) ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Variant" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalize(variant) })] })) : null, typeof isPublic === 'boolean' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Visibility" }), _jsx(Label, { size: "small", variant: isPublic ? 'success' : 'secondary', sx: { justifySelf: 'start', width: 'fit-content' }, children: isPublic ? 'Public' : 'Private' })] })) : null, _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Description" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalize(description) || 'N/A' }), normalizedUid ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "UID" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedUid })] })) : null] }), _jsx(Box, { display: "flex", justifyContent: "flex-end", gap: 2, children: _jsx(Button, { size: "small", onClick: go, disabled: !targetPath, children: "View Space" }) })] }));
 }
 /**
  * A space's details, shown from a click on its name.
@@ -58,23 +44,6 @@ export function SpaceDetailsOverlay(props) {
         normalize(props.handle) ||
         normalize(props.uid) ||
         'Space';
-    return (_jsx(ThemeProvider, { children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Box, { as: "button", type: "button", title: normalizedDisplayName, sx: {
-                            fontWeight: 'semibold',
-                            color: 'accent.fg',
-                            textDecoration: 'underline',
-                            background: 'transparent',
-                            border: 0,
-                            padding: 0,
-                            margin: 0,
-                            cursor: 'pointer',
-                            maxWidth: '100%',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                            textAlign: 'left',
-                            ':hover': {
-                                textDecoration: 'underline',
-                            },
-                        }, children: normalizedDisplayName }) }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsx(SpaceDetailsCard, { ...props }) })] }) }));
+    return (_jsx(ThemeProvider, { children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Box, { as: "button", type: "button", title: normalizedDisplayName, fontWeight: "semibold", color: "accent.fg", textDecoration: "underline", background: "transparent", border: 0, padding: 0, margin: 0, cursor: "pointer", maxWidth: "100%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", hover: { textDecoration: 'underline' }, children: normalizedDisplayName }) }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsx(SpaceDetailsCard, { ...props }) })] }) }));
 }
 export default SpaceDetailsOverlay;

package/lib/components/spaces/SpaceDisplay.js

@@ -80,13 +80,6 @@ export const SpaceDisplay = ({ space, showIcon = true, iconSize = 16, gap = 1, p
             Boolean(givenRootId || String(itemUid || '').trim());
         return (_jsx(Text, { sx: { color: 'fg.muted', ...sx }, children: waiting ? '…' : emptyText }));
     }
-    return (_jsxs(Box, { sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap,
-            minWidth: 0,
-            maxWidth: '100%',
-            ...sx,
-        }, children: [showIcon ? (_jsx(Box, { as: "span", "aria-hidden": "true", sx: { display: 'inline-flex', color: 'fg.muted', flexShrink: 0 }, children: _jsx(SpaceIcon, { size: iconSize }) })) : null, _jsx(SpaceDetailsOverlay, { uid: resolved.uid, displayName: resolved.displayName, handle: resolved.handle, accountHandle: resolved.accountHandle, description: resolved.description, variant: resolved.variant, isPublic: resolved.isPublic, onNavigate: onNavigate })] }));
+    return (_jsxs(Box, { display: "inline-flex", alignItems: "center", gap: gap, minWidth: 0, maxWidth: "100%", sx: sx, children: [showIcon ? (_jsx(Box, { as: "span", "aria-hidden": "true", display: "inline-flex", color: "fg.muted", flexShrink: 0, children: _jsx(SpaceIcon, { size: iconSize }) })) : null, _jsx(SpaceDetailsOverlay, { uid: resolved.uid, displayName: resolved.displayName, handle: resolved.handle, accountHandle: resolved.accountHandle, description: resolved.description, variant: resolved.variant, isPublic: resolved.isPublic, onNavigate: onNavigate })] }));
 };
 export default SpaceDisplay;

package/lib/components/storage/ContentsBrowser.js

@@ -41,7 +41,7 @@ export function ContentsBrowser(props) {
     // caller that has not resolved its sandbox yet must not appear to have.
     const contents = props.contents ?? (mock ? CONTENTS_BROWSER_MOCK_MANAGER : undefined);
     if (!contents) {
-        return (_jsxs(Box, { sx: { p: 3 }, children: [title, _jsx(Text, { sx: { display: 'block', color: 'fg.muted', fontSize: 1, mt: 2 }, children: "No filesystem is connected." })] }));
+        return (_jsxs(Box, { p: 3, children: [title, _jsx(Text, { sx: { display: 'block', color: 'fg.muted', fontSize: 1, mt: 2 }, children: "No filesystem is connected." })] }));
     }
     return (_jsx(ConnectedContentsBrowser, { ...props, contents: contents, mock: mock, title: title }));
 }
@@ -292,32 +292,9 @@ const ConnectedContentsBrowser = (props) => {
     const onSelect = useCallback((item, refresh) => {
         setSelectedItem(item.path === selectedItem?.path ? null : { ...item, refresh });
     }, [selectedItem]);
-    return (_jsxs(Box, { sx: {
-            display: 'grid',
-            gridTemplateAreas: `"header" "content"`,
-            overflow: 'hidden',
-        }, children: [_jsxs(Box, { sx: {
-                    gridArea: 'header',
-                    display: 'flex',
-                    alignItems: 'center',
-                    minWidth: 0,
-                    overflow: 'hidden',
-                }, children: [_jsx(Box, { sx: { flex: '1 1 auto', minWidth: 0, overflow: 'hidden' }, children: title }), _jsxs(Box, { sx: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            flexWrap: 'nowrap',
-                            flexShrink: 0,
-                        }, children: [_jsx(SegmentedControl, { "aria-label": "Contents view", size: "small", onChange: index => {
+    return (_jsxs(Box, { display: "grid", gridTemplateAreas: '"header" "content"', overflow: "hidden", children: [_jsxs(Box, { gridArea: "header", display: "flex", alignItems: "center", minWidth: 0, overflow: "hidden", children: [_jsx(Box, { flex: "1 1 auto", minWidth: 0, overflow: "hidden", children: title }), _jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", flexWrap: "nowrap", flexShrink: 0, children: [_jsx(SegmentedControl, { "aria-label": "Contents view", size: "small", onChange: index => {
                                     changeView(CONTENTS_BROWSER_VIEWS[index].value);
-                                }, children: CONTENTS_BROWSER_VIEWS.map(candidate => (_jsx(SegmentedControl.IconButton, { icon: candidate.icon, "aria-label": candidate.label, selected: candidate.value === view }, candidate.value))) }), _jsx(IconButton, { variant: "invisible", "aria-label": 'Refresh contents browser.', title: 'Refresh contents browser.', icon: SyncIcon, onClick: refreshView, disabled: mock }), !mock && (_jsx(UploadIconButton, { label: 'Upload a file', multiple: true, upload: upload }))] })] }), isLoading ? (_jsx(Box, { sx: {
-                    gridArea: 'content',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    minHeight: '40px',
-                    height: '100vh',
-                }, children: _jsx(Spinner, {}) })) : (_jsxs(Box, { sx: { gridArea: 'content' }, children: [view === 'table' ? (folderItems === null && !isFolderLoading ? (_jsx(Blankslate, { children: _jsx(Blankslate.Heading, { children: "No contents" }) })) : (_jsx(ContentsTable, { path: folderPath, items: folderItems ?? [], current: selectedItem, loading: isFolderLoading, onNavigate: navigateTo, onSelect: item => {
+                                }, children: CONTENTS_BROWSER_VIEWS.map(candidate => (_jsx(SegmentedControl.IconButton, { icon: candidate.icon, "aria-label": candidate.label, selected: candidate.value === view }, candidate.value))) }), _jsx(IconButton, { variant: "invisible", "aria-label": 'Refresh contents browser.', title: 'Refresh contents browser.', icon: SyncIcon, onClick: refreshView, disabled: mock }), !mock && (_jsx(UploadIconButton, { label: 'Upload a file', multiple: true, upload: upload }))] })] }), isLoading ? (_jsx(Box, { gridArea: "content", display: "flex", alignItems: "center", justifyContent: "center", minHeight: "40px", height: "100vh", children: _jsx(Spinner, {}) })) : (_jsxs(Box, { gridArea: "content", children: [view === 'table' ? (folderItems === null && !isFolderLoading ? (_jsx(Blankslate, { children: _jsx(Blankslate.Heading, { children: "No contents" }) })) : (_jsx(ContentsTable, { path: folderPath, items: folderItems ?? [], current: selectedItem, loading: isFolderLoading, onNavigate: navigateTo, onSelect: item => {
                             onSelect(item, refreshFolder);
                         }, onContextMenu: onContextMenu }))) : children ? (_jsx(TreeView, { children: children?.map(child => {
                             return child.type === 'directory' ? (_jsx(DirectoryItem, { item: child, contents: contents, current: selectedItem, documentRegistry: documentRegistry, onContextMenu: onContextMenu, onSelect: onSelect }, child.name)) : (_jsx(TreeItem, { item: child, current: selectedItem?.path === child.path, onSelect: item => {

package/lib/components/storage/ContentsTable.js

@@ -63,7 +63,7 @@ function ParentRow(props) {
                 event.preventDefault();
                 goUp();
             }
-        }, children: [_jsx(Table.Cell, { scope: "row", children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(FileDirectoryIcon, {}), _jsx("span", { children: ".." })] }) }), _jsx(Table.Cell, {}), _jsx(Table.Cell, {})] }));
+        }, children: [_jsx(Table.Cell, { scope: "row", children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(FileDirectoryIcon, {}), _jsx("span", { children: ".." })] }) }), _jsx(Table.Cell, {}), _jsx(Table.Cell, {})] }));
 }
 /**
  * A folder or file row.
@@ -92,7 +92,7 @@ function ContentsRow(props) {
                 onSelect(item);
             }
             onContextMenu(ref);
-        }, children: [_jsx(Table.Cell, { scope: "row", children: _jsxs(Box, { ref: ref, sx: { display: 'flex', alignItems: 'center', gap: 2, minWidth: 0 }, children: [isDirectory ? (_jsx(FileDirectoryFillIcon, {})) : icon ? (_jsx(icon.react, { tag: 'span' })) : (_jsx(FileIcon, {})), _jsx("span", { style: {
+        }, children: [_jsx(Table.Cell, { scope: "row", children: _jsxs(Box, { ref: ref, display: "flex", alignItems: "center", gap: 2, minWidth: 0, children: [isDirectory ? (_jsx(FileDirectoryFillIcon, {})) : icon ? (_jsx(icon.react, { tag: 'span' })) : (_jsx(FileIcon, {})), _jsx("span", { style: {
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',
                                 whiteSpace: 'nowrap',
@@ -108,27 +108,8 @@ export function ContentsTable(props) {
     const { path, items, current, loading = false, onNavigate, onSelect, onContextMenu, } = props;
     const segments = pathSegments(path);
     const label = path ? `Contents of ${path}` : 'Contents of the root folder';
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                    minWidth: 0,
-                    overflow: 'hidden',
-                }, children: _jsxs(Box, { role: "navigation", "aria-label": "Folder path", sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        flexWrap: 'wrap',
-                        gap: 1,
-                        minWidth: 0,
-                        fontSize: 1,
-                    }, children: [_jsx(PathSegment, { name: "/", path: "", current: segments.length === 0, title: "Go to the root folder.", onNavigate: onNavigate }), segments.map((segment, index) => (_jsxs(Fragment, { children: [index > 0 && _jsx(Text, { sx: { color: 'fg.muted' }, children: "/" }), _jsx(PathSegment, { name: segment.name, path: segment.path, current: index === segments.length - 1, title: index === segments.length - 1
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [_jsx(Box, { display: "flex", alignItems: "center", gap: 2, minWidth: 0, overflow: "hidden", children: _jsxs(Box, { role: "navigation", "aria-label": "Folder path", display: "flex", alignItems: "center", flexWrap: "wrap", gap: 1, minWidth: 0, fontSize: 1, children: [_jsx(PathSegment, { name: "/", path: "", current: segments.length === 0, title: "Go to the root folder.", onNavigate: onNavigate }), segments.map((segment, index) => (_jsxs(Fragment, { children: [index > 0 && _jsx(Text, { sx: { color: 'fg.muted' }, children: "/" }), _jsx(PathSegment, { name: segment.name, path: segment.path, current: index === segments.length - 1, title: index === segments.length - 1
                                         ? `Reload ${segment.path}`
-                                        : `Go to ${segment.path}`, onNavigate: onNavigate })] }, segment.path)))] }) }), loading ? (_jsx(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    minHeight: '40px',
-                    padding: 3,
-                }, children: _jsx(Spinner, { "aria-label": "Loading folder\u2026" }) })) : (_jsx(Table.Container, { children: _jsxs(Table, { "aria-label": label, cellPadding: "condensed", gridTemplateColumns: "minmax(0, 1fr) max-content max-content", children: [_jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.Header, { children: "Name" }), _jsx(Table.Header, { children: "Last modified" }), _jsx(Table.Header, { align: "end", children: "Size" })] }) }), _jsxs(Table.Body, { children: [path && (_jsx(ParentRow, { path: PathExt.dirname(path), onNavigate: onNavigate })), items.map(item => (_jsx(ContentsRow, { item: item, current: item.path === current?.path, onNavigate: onNavigate, onSelect: onSelect, onContextMenu: onContextMenu }, item.path)))] })] }) }))] }));
+                                        : `Go to ${segment.path}`, onNavigate: onNavigate })] }, segment.path)))] }) }), loading ? (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", minHeight: "40px", padding: 3, children: _jsx(Spinner, { "aria-label": "Loading folder\u2026" }) })) : (_jsx(Table.Container, { children: _jsxs(Table, { "aria-label": label, cellPadding: "condensed", gridTemplateColumns: "minmax(0, 1fr) max-content max-content", children: [_jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.Header, { children: "Name" }), _jsx(Table.Header, { children: "Last modified" }), _jsx(Table.Header, { align: "end", children: "Size" })] }) }), _jsxs(Table.Body, { children: [path && (_jsx(ParentRow, { path: PathExt.dirname(path), onNavigate: onNavigate })), items.map(item => (_jsx(ContentsRow, { item: item, current: item.path === current?.path, onNavigate: onNavigate, onSelect: onSelect, onContextMenu: onContextMenu }, item.path)))] })] }) }))] }));
 }
 export default ContentsTable;

package/lib/components/students/StudentResultCircle.js

@@ -26,34 +26,12 @@ export const StudentResultCircle = (props) => {
             }, onMouseDown: event => {
                 event.preventDefault();
                 event.stopPropagation();
-            }, sx: {
-                display: 'inline-block',
-                flex: 'none',
-                appearance: 'none',
-                p: 0,
-                bg: 'transparent',
-                cursor: 'default',
-                lineHeight: 0,
-                border: 'none',
-                outline: 'none',
-            }, children: _jsx(Box, { as: "span", role: "img", "aria-hidden": true, sx: {
-                    display: 'inline-block',
-                    flex: 'none',
-                    width: '14px',
-                    height: '14px',
-                    borderRadius: 3,
-                    ml: 1,
-                    pointerEvents: 'auto',
-                    boxSizing: 'border-box',
-                    backgroundColor: isNone
-                        ? 'transparent'
-                        : status === 'pass'
-                            ? okColor
-                            : status === 'partial'
-                                ? partialColor
-                                : nokColor,
-                    border: isNone ? '1px solid' : 'none',
-                    borderColor: isNone ? 'border.default' : 'transparent',
-                } }) }) }));
+            }, display: "inline-block", flex: "none", appearance: "none", p: 0, bg: "transparent", cursor: "default", lineHeight: 0, border: "none", outline: "none", children: _jsx(Box, { as: "span", role: "img", "aria-hidden": true, display: "inline-block", flex: "none", width: "14px", height: "14px", borderRadius: 3, ml: 1, pointerEvents: "auto", boxSizing: "border-box", backgroundColor: isNone
+                    ? 'transparent'
+                    : status === 'pass'
+                        ? okColor
+                        : status === 'partial'
+                            ? partialColor
+                            : nokColor, border: isNone ? '1px solid' : 'none', borderColor: isNone ? 'border.default' : 'transparent' }) }) }));
 };
 export default StudentResultCircle;

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/unlinkIAMProvider.d.ts

@@ -0,0 +1,22 @@
+import type { IIAMProviderName } from '../models/IAMProvidersSpecs';
+/** What `requestDatalayer` resolves: on failure, `success: false` and IAM's sentence. */
+type UnlinkResponse = {
+    success?: boolean;
+    message?: string;
+};
+type Request = (request: {
+    url: string;
+    method: 'DELETE';
+    notifyOnError: false;
+}) => Promise<UnlinkResponse>;
+/**
+ * Unlink a provider from the signed-in account
+ * (`DELETE /api/iam/v1/me/providers/{provider}`).
+ *
+ * IAM answers 409 when the provider is the account's only way to sign in and
+ * 404 when it is not linked; either way its sentence is thrown as the error's
+ * message for the page to show, and nothing is toasted. On success `refresh`
+ * reads the user again before this resolves.
+ */
+export declare function unlinkIAMProvider(request: Request, iamUrl: string, provider: IIAMProviderName, refresh: () => Promise<void>): Promise<void>;
+export {};

package/lib/hooks/unlinkIAMProvider.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Unlink a provider from the signed-in account
+ * (`DELETE /api/iam/v1/me/providers/{provider}`).
+ *
+ * IAM answers 409 when the provider is the account's only way to sign in and
+ * 404 when it is not linked; either way its sentence is thrown as the error's
+ * message for the page to show, and nothing is toasted. On success `refresh`
+ * reads the user again before this resolves.
+ */
+export async function unlinkIAMProvider(request, iamUrl, provider, refresh) {
+    const response = await request({
+        url: `${iamUrl}/api/iam/v1/me/providers/${encodeURIComponent(provider)}`,
+        method: 'DELETE',
+        notifyOnError: false,
+    });
+    if (!response?.success) {
+        throw new Error(response?.message || `The ${provider} account could not be unlinked.`);
+    }
+    await refresh();
+}

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/hooks/useCache.d.ts

@@ -33,7 +33,7 @@
  * ```
  */
 import { QueryClient, UseQueryOptions, UseMutationOptions } from '@tanstack/react-query';
-import { IAnyOrganization, IContact, IIAMToken, IOrganization, ISchool, ISecret, IStudent, ITeam, IUser, IUserOnboarding, IUserSettings } from '../models';
+import { IAnyOrganization, IContact, IIAMProviderName, IIAMToken, IOrganization, ISchool, ISecret, IStudent, ITeam, IUser, IUserOnboarding, IUserSettings } from '../models';
 type IAnySpace = any;
 export type CacheProps = {
     loginRoute?: string;
@@ -486,6 +486,7 @@ export declare const useCache: ({ loginRoute }?: CacheProps) => {
     useGetGitHubProfile: () => import("@tanstack/react-query").UseMutationResult<any, Error, string, unknown>;
     useGetGoogleProfile: () => import("@tanstack/react-query").UseMutationResult<any, Error, string, unknown>;
     useGetLinkedinProfile: () => import("@tanstack/react-query").UseMutationResult<any, Error, void, unknown>;
+    useUnlinkIAMProvider: () => import("@tanstack/react-query").UseMutationResult<void, Error, IIAMProviderName, unknown>;
     usePostLinkedinShare: () => import("@tanstack/react-query").UseMutationResult<any, Error, {
         postText: string;
     }, unknown>;
@@ -1015,6 +1016,12 @@ export declare const useCache: ({ loginRoute }?: CacheProps) => {
     useSecrets: (options?: {
         principalUid?: string;
         principalKind?: "personal" | "organization" | "team";
+    } & {
+        /**
+         * `false` reads nothing: a page a visitor opens signed out, whose 401
+         * would otherwise send them to the sign-in.
+         */
+        enabled?: boolean;
     }) => import("@tanstack/react-query").UseQueryResult<any, Error>;
     useCreateSecret: (options?: {
         principalUid?: string;

package/lib/hooks/useCache.js

@@ -40,6 +40,7 @@ import { useQuery, useQueries, useMutation, useQueryClient, } from '@tanstack/re
 import { BOOTSTRAP_USER_ONBOARDING, asContact, asInvite, asOrganization, asSecret, asTeam, asToken, asUser, } from '../models/index.js';
 import { asSpace } from './cacheConverters.js';
 import { libraryAppFieldsOf } from './libraryApp.js';
+import { unlinkIAMProvider } from './unlinkIAMProvider.js';
 import { useCoreStore, useIAMStore, profileStore } from '../state/index.js';
 import { asDisplayName, namesAsInitials, asArray } from '../utils/index.js';
 import { useDatalayer } from './useDatalayer.js';
@@ -2853,6 +2854,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
             },
             ...DEFAULT_QUERY_OPTIONS,
             refetchOnMount: true, // Override to refetch when stale after invalidation
+            enabled: options?.enabled ?? true,
         });
     };
     /**
@@ -5740,14 +5742,17 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
         });
     };
     /**
-     * Confirm password change with token
+     * Confirm password change with the token the reset email carried. The
+     * handle and token travel in the body, never in the URL: paths are written
+     * to access logs.
      */
     const useConfirmPasswordWithToken = () => {
         return useMutation({
             mutationFn: async ({ userHandle, token, }) => {
                 return requestDatalayer({
-                    url: `${configuration.iamUrl}/api/iam/v1/password/confirm/users/${userHandle}/tokens/${token}`,
-                    method: 'PUT',
+                    url: `${configuration.iamUrl}/api/iam/v1/password-reset/confirm`,
+                    method: 'POST',
+                    body: { handle: userHandle, token },
                 });
             },
         });
@@ -7273,13 +7278,38 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
             },
         });
     };
-    /** Get the server-connected LinkedIn profile. */
+    /**
+     * Unlink a provider (github, google, linkedin, x) from the signed-in
+     * account; IAM deletes the link and the tokens it holds for it.
+     *
+     * IAM's refusal (409: the provider is the account's only way to sign in)
+     * is the error's message, for the page to show: nothing is toasted. On
+     * success the signed-in user is read again, so the settings pages and the
+     * header's provider icons follow its linked providers.
+     */
+    const useUnlinkIAMProvider = () => {
+        const iamStore = useIAMStore();
+        return useMutation({
+            mutationFn: async (provider) => unlinkIAMProvider(requestDatalayer, configuration.iamUrl, provider, async () => {
+                queryClient.invalidateQueries({ queryKey: queryKeys.auth.me() });
+                await iamStore.refreshUser();
+            }),
+        });
+    };
+    /**
+     * Get the server-connected LinkedIn profile.
+     *
+     * IAM answers 404 when no LinkedIn posting account is connected: a state
+     * the caller shows (a link button), never an error toast. The resolved
+     * response then carries `success: false`, `status` and `message`.
+     */
     const useGetLinkedinProfile = () => {
         return useMutation({
             mutationFn: async () => {
                 return requestDatalayer({
                     url: `${configuration.iamUrl}/api/iam/v1/social/linkedin/profile`,
                     method: 'GET',
+                    notifyOnError: false,
                 });
             },
         });
@@ -8426,6 +8456,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
         useGetGitHubProfile,
         useGetGoogleProfile,
         useGetLinkedinProfile,
+        useUnlinkIAMProvider,
         usePostLinkedinShare,
         usePostLinkedinShareWithUpload,
         useGetBlueskyConnection,

package/lib/hooks/useNavigate.js

@@ -25,6 +25,7 @@
 import { useCallback, useMemo } from 'react';
 import { useLayoutStore } from '../state/index.js';
 import { navigationStore } from '../state/substates/NavigationState.js';
+import { iamStore } from '../state/substates/IAMState.js';
 import { createNativeNavigate } from '../navigation/adapters/native.js';
 // Import React Router hooks from our wrapper
 import { useNavigateRR } from '../navigation/adapters/react-router.js';
@@ -133,8 +134,13 @@ export const useNavigate = () => {
             document.body.scrollTop = 0;
         }
         // Where the reader is now, for the shell they are in. A new tab and a
-        // step back through history are both already past by here.
-        navigationStore.getState().rememberRoute(to);
+        // step back through history are both already past by here. Only for
+        // somebody signed in: the shells are theirs, and a page a visitor read
+        // signed out (`/features`) would otherwise come back as the Platform's
+        // last page after they sign in.
+        if (iamStore.getState().user) {
+            navigationStore.getState().rememberRoute(to);
+        }
         if (rrNavigate) {
             rrNavigate(to, { replace: options.replace, state: options.state });
             return;

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;