@datalayer/core 1.1.60 → 1.2.10

package/lib/components/spaces/spaceDisplayModel.js

@@ -0,0 +1,170 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+const DEFAULT_PLACEHOLDER_MAX_LENGTH = 12;
+const text = (value) => typeof value === 'string'
+    ? value.trim()
+    : value === null || value === undefined
+        ? ''
+        : String(value).trim();
+const bareHandle = (value) => text(value).replace(/^@+/, '');
+const firstText = (...values) => {
+    for (const value of values) {
+        const candidate = text(value);
+        if (candidate) {
+            return candidate;
+        }
+    }
+    return '';
+};
+const truncate = (value, maxLength) => maxLength > 0 && value.length > maxLength
+    ? `${value.slice(0, maxLength)}…`
+    : value;
+/** The uid of a space as the spacer API returns it, raw or converted. */
+export const spaceUidOf = (space) => firstText(space?.uid, space?.uid_s, space?.id);
+/**
+ * The account a space is addressed under: its organization, else its owner.
+ *
+ * The same order the web application's `resolveSpaceAccountHandle` reads, so
+ * a link built here and a link built there go to the same page.
+ */
+export const spaceAccountHandleOf = (space) => bareHandle(firstText(space?.accountHandle, space?.organization?.handle, space?.organization?.handle_s, space?.organization_handle, space?.organization_handle_s, space?.account_handle, space?.account_handle_s, space?.owner?.handle, space?.owner?.handle_s, space?.owner_handle, space?.owner_handle_s));
+/** A space as the cache keeps it, out of a spacer payload, raw or converted. */
+export const toCachedSpace = (space) => {
+    const raw = space;
+    const uid = spaceUidOf(raw);
+    if (!uid) {
+        return undefined;
+    }
+    const isPublic = raw?.public_b ?? raw?.public;
+    return {
+        uid,
+        rootId: text(raw?.id) || undefined,
+        handle: firstText(raw?.handle_s, raw?.handle) || undefined,
+        displayName: firstText(raw?.name_t, raw?.name) || undefined,
+        description: firstText(raw?.description_t, raw?.description) || undefined,
+        variant: firstText(raw?.variant_s, raw?.variant) || undefined,
+        isPublic: typeof isPublic === 'boolean' ? isPublic : undefined,
+        accountHandle: spaceAccountHandleOf(raw) || undefined,
+    };
+};
+const EMPTY_SPACES = Object.freeze([]);
+const INDEXES = new WeakMap();
+/**
+ * Index loaded spaces by uid, Solr id, the uids of their items, and
+ * account/handle.
+ *
+ * Memoised on the array: a query answers with the same array until it
+ * refetches, so a table of a hundred rows builds the index once, not a hundred
+ * times.
+ */
+export const indexSpaces = (spaces) => {
+    const list = Array.isArray(spaces) ? spaces : EMPTY_SPACES;
+    const known = INDEXES.get(list);
+    if (known) {
+        return known;
+    }
+    const byUid = new Map();
+    const byRootId = new Map();
+    const byItemUid = new Map();
+    const byAccountAndHandle = new Map();
+    for (const space of list) {
+        const raw = space;
+        const uid = spaceUidOf(raw);
+        if (!uid) {
+            continue;
+        }
+        byUid.set(uid, space);
+        const rootId = text(raw?.id);
+        if (rootId) {
+            byRootId.set(rootId, space);
+        }
+        const handle = firstText(raw?.handle_s, raw?.handle);
+        const account = spaceAccountHandleOf(raw);
+        if (handle && account) {
+            byAccountAndHandle.set(`${account}/${handle}`, space);
+        }
+        // The spaces listing carries each space's items as children, which is the
+        // only place a row from the cross-space listing can learn its space from
+        // when it did not keep `_root_`.
+        if (Array.isArray(raw?.items)) {
+            for (const item of raw.items) {
+                const itemUid = text(item?.uid);
+                if (itemUid) {
+                    byItemUid.set(itemUid, space);
+                }
+            }
+        }
+    }
+    const index = {
+        byUid,
+        byRootId,
+        byItemUid,
+        byAccountAndHandle,
+    };
+    INDEXES.set(list, index);
+    return index;
+};
+/** The loaded space a descriptor names, if any. */
+export const findSpace = (index, descriptor) => {
+    const uid = text(descriptor.uid);
+    if (uid && index.byUid.has(uid)) {
+        return index.byUid.get(uid);
+    }
+    const rootId = text(descriptor.rootId);
+    if (rootId && index.byRootId.has(rootId)) {
+        return index.byRootId.get(rootId);
+    }
+    const itemUid = text(descriptor.itemUid);
+    if (itemUid && index.byItemUid.has(itemUid)) {
+        return index.byItemUid.get(itemUid);
+    }
+    // A uid is authoritative: when one was given and is not loaded, a space
+    // that merely shares its handle is not the same space.
+    const handle = text(descriptor.handle);
+    const account = bareHandle(descriptor.accountHandle);
+    if (!uid && handle && account) {
+        return index.byAccountAndHandle.get(`${account}/${handle}`);
+    }
+    return undefined;
+};
+/** Where a space's page is: `/<account>/<space>`, or nothing without both. */
+export const buildSpaceDetailsPath = ({ accountHandle, handle, }) => {
+    const account = bareHandle(accountHandle);
+    const space = text(handle);
+    if (!account || !space) {
+        return null;
+    }
+    return `/${encodeURIComponent(account)}/${encodeURIComponent(space)}`;
+};
+/**
+ * What a display shows for a descriptor, given what is known of its space.
+ *
+ * The space's own fields win over the snapshot remembered from an earlier
+ * view, which win over what the row said; the row's name is shown only until
+ * the space's own is known, and a handle or uid stands in before either.
+ */
+export const resolveSpace = ({ descriptor, found, cached, placeholderMaxLength = DEFAULT_PLACEHOLDER_MAX_LENGTH, }) => {
+    const uid = firstText(descriptor.uid, found?.uid, cached?.uid) || undefined;
+    const handle = firstText(found?.handle, cached?.handle, descriptor.handle) || undefined;
+    const accountHandle = bareHandle(firstText(found?.accountHandle, cached?.accountHandle, descriptor.accountHandle)) || undefined;
+    const ownName = firstText(found?.displayName, cached?.displayName);
+    const displayName = ownName ||
+        text(descriptor.displayName) ||
+        truncate(firstText(handle, uid), placeholderMaxLength) ||
+        'Space';
+    const isPublic = typeof found?.isPublic === 'boolean' ? found.isPublic : cached?.isPublic;
+    return {
+        uid,
+        rootId: firstText(found?.rootId, cached?.rootId, descriptor.rootId) || undefined,
+        handle,
+        accountHandle,
+        displayName,
+        description: firstText(found?.description, cached?.description) || undefined,
+        variant: firstText(found?.variant, cached?.variant) || undefined,
+        isPublic,
+        path: buildSpaceDetailsPath({ accountHandle, handle }),
+        resolved: Boolean(ownName),
+    };
+};

package/lib/components/sparklines/Sparklines.js

@@ -3,10 +3,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2025-2026 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
 import React, { useMemo } from 'react';
 import { dataToPoints } from './dataProcessing.js';
 /**
@@ -54,6 +50,9 @@ export const Sparklines = ({ data = [], width = 240, height = 60, svgWidth, svgH
         svgProps.height = svgHeight;
     }
     return (_jsx("svg", { ...svgProps, children: React.Children.map(children, child => {
+            // React 19 types element props as `unknown` rather than `any`. Each
+            // child is a series component that takes the shared scale below and may
+            // override any of it with props of its own, so keep the shape open.
             if (React.isValidElement(child)) {
                 return React.cloneElement(child, {
                     data,

package/lib/components/sparklines/index.js

@@ -2,10 +2,6 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2025-2026 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
 export { Sparklines } from './Sparklines.js';
 export { SparklinesLine } from './SparklinesLine.js';
 export { dataToPoints, min, max } from './dataProcessing.js';

package/lib/components/storage/ContentsBrowser.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { type ReactNode } from 'react';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { Contents } from '@jupyterlab/services';
@@ -9,6 +10,14 @@ export declare const LARGE_FILE_SIZE: number;
  * The size (in bytes) of the biggest chunk we should upload at once.
  */
 export declare const CHUNK_SIZE: number;
+/**
+ * How the contents browser renders the contents.
+ *
+ * - `tree`: an expandable tree of folders and files.
+ * - `table`: a table listing one folder at a time; folder rows open the
+ *   folder and a `..` row goes back to the parent folder.
+ */
+export type ContentsBrowserView = 'tree' | 'table';
 /**
  * Storage browser component properties
  */
@@ -16,7 +25,11 @@ export interface IContentsBrowserProps {
     /**
      * Contents manager.
      */
-    contents: Contents.IManager;
+    contents?: Contents.IManager;
+    /**
+     * Render an invented Code Sandbox filesystem for documentation and stories.
+     */
+    mock?: boolean;
     /**
      * Contents manager.
      */
@@ -30,6 +43,17 @@ export interface IContentsBrowserProps {
      * Defaults to "Contents Browser".
      */
     title?: ReactNode;
+    /**
+     * How the contents are rendered: as a tree (default) or as a table.
+     *
+     * The user can switch views from the header toggle; changing this prop
+     * applies the requested view.
+     */
+    view?: ContentsBrowserView;
+    /**
+     * Callback when the user switches views from the header toggle.
+     */
+    onViewChange?: (view: ContentsBrowserView) => void;
 }
 /**
  * Storage browser component.

package/lib/components/storage/ContentsBrowser.js

@@ -1,19 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-import { useCallback, useEffect, useState, } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, } from 'react';
 import { PathExt } from '@jupyterlab/coreutils';
 import { PromiseDelegate } from '@lumino/coreutils';
-import { ActionList, ActionMenu, Heading, IconButton, Spinner, TreeView, } from '@primer/react';
+import { ActionList, ActionMenu, Heading, IconButton, SegmentedControl, Spinner, TreeView, Text, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { Blankslate, Dialog } from '@primer/react/experimental';
-import { SyncIcon } from '@primer/octicons-react';
+import { ListUnorderedIcon, SyncIcon, TableIcon } from '@primer/octicons-react';
 import { useIsMounted } from 'usehooks-ts';
 import { useToast } from '../../hooks/index.js';
 import { UploadIconButton } from '../buttons/index.js';
 import { DirectoryItem, TreeItem, modelToView, } from './ContentsItems.js';
+import { CONTENTS_BROWSER_MOCK_MANAGER } from './ContentsBrowserMock.js';
+import { ContentsTable } from './ContentsTable.js';
 /**
  * The maximum upload size (in bytes) for notebook version < 5.1.0
  */
@@ -22,15 +20,33 @@ export const LARGE_FILE_SIZE = 15 * 1024 * 1024;
  * The size (in bytes) of the biggest chunk we should upload at once.
  */
 export const CHUNK_SIZE = 1024 * 1024;
+/**
+ * Views offered by the header toggle.
+ */
+const CONTENTS_BROWSER_VIEWS = [
+    { value: 'tree', label: 'Tree view', icon: ListUnorderedIcon },
+    { value: 'table', label: 'Table view', icon: TableIcon },
+];
 /**
  * Storage browser component.
  */
 export function ContentsBrowser(props) {
-    const { contents, localContents, documentRegistry, title = (_jsx(Heading, { as: "h4", sx: {
+    const { mock = false, title = (_jsx(Heading, { as: "h4", sx: {
             fontSize: 'var(--text-title-size-small)',
             lineHeight: 'var(--text-title-lineHeight-medium)',
             fontWeight: 'var(--text-title-weight-medium)',
         }, children: "Contents Browser" })), } = props;
+    // A browser with nothing behind it shows nothing — never the sample tree.
+    // The sample is for a documentation preview that asks for it by name; a
+    // 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 (_jsx(ConnectedContentsBrowser, { ...props, contents: contents, mock: mock, title: title }));
+}
+const ConnectedContentsBrowser = (props) => {
+    const { contents, mock, title, localContents, documentRegistry, onViewChange, } = props;
     const isMounted = useIsMounted();
     const { trackAsyncTask } = useToast();
     const [children, setChildren] = useState(null);
@@ -39,6 +55,21 @@ export function ContentsBrowser(props) {
     const [contextMenuAnchor, setContextMenuAnchor] = useState(null);
     const [openDeleteConfirmation, setOpenDeleteConfirmation] = useState(false);
     const [copyToLocalConfirmation, setCopyToLocalConfirmation] = useState(false);
+    const [view, setView] = useState(props.view ?? 'tree');
+    /**
+     * Folder listed by the table view; the empty string is the root.
+     */
+    const [folderPath, setFolderPath] = useState('');
+    const [folderItems, setFolderItems] = useState(null);
+    const [isFolderLoading, setIsFolderLoading] = useState(false);
+    /**
+     * Identifier of the latest folder request, so that a slow response for a
+     * folder the user already left is dropped.
+     */
+    const folderRequest = useRef(0);
+    useEffect(() => {
+        setView(props.view ?? 'tree');
+    }, [props.view]);
     const refresh = useCallback(() => {
         contents
             .get('')
@@ -54,6 +85,56 @@ export function ContentsBrowser(props) {
     useEffect(() => {
         refresh();
     }, [refresh]);
+    const refreshFolder = useCallback(() => {
+        const request = ++folderRequest.current;
+        setIsFolderLoading(true);
+        contents
+            .get(folderPath)
+            .then(model => {
+            if (request !== folderRequest.current || !isMounted()) {
+                return;
+            }
+            setIsFolderLoading(false);
+            setFolderItems(modelToView(model.content, documentRegistry));
+        })
+            .catch(reason => {
+            if (request !== folderRequest.current || !isMounted()) {
+                return;
+            }
+            setIsFolderLoading(false);
+            console.error(`Failed to fetch folder '${folderPath}' content for manager ${contents.serverSettings.appUrl}.`, reason);
+        });
+    }, [contents, folderPath, documentRegistry]);
+    useEffect(() => {
+        if (view === 'table') {
+            refreshFolder();
+        }
+    }, [view, refreshFolder]);
+    /**
+     * Refresh whatever the active view displays.
+     */
+    const refreshView = view === 'table' ? refreshFolder : refresh;
+    const changeView = useCallback((next) => {
+        if (next === view) {
+            return;
+        }
+        // The selection belongs to the view being left.
+        setSelectedItem(null);
+        setContextMenuAnchor(null);
+        setView(next);
+        onViewChange?.(next);
+    }, [view, onViewChange]);
+    const navigateTo = useCallback((path) => {
+        setSelectedItem(null);
+        setContextMenuAnchor(null);
+        if (path === folderPath) {
+            // Already there: reload the folder instead.
+            refreshFolder();
+        }
+        else {
+            setFolderPath(path);
+        }
+    }, [folderPath, refreshFolder]);
     const upload = useCallback(
     /**
      * @param file File to upload
@@ -70,7 +151,9 @@ export function ContentsBrowser(props) {
             ? selectedItem.type === 'directory'
                 ? selectedItem.path
                 : PathExt.dirname(selectedItem.path)
-            : '';
+            : view === 'table'
+                ? folderPath
+                : '';
         const path = currentDirectory
             ? PathExt.join(currentDirectory, file.name)
             : file.name;
@@ -127,7 +210,7 @@ export function ContentsBrowser(props) {
                     selectedItem.refresh();
                 }
                 else {
-                    refresh();
+                    refreshView();
                 }
                 return finalModel;
             }
@@ -144,12 +227,12 @@ export function ContentsBrowser(props) {
                     selectedItem.refresh();
                 }
                 else {
-                    refresh();
+                    refreshView();
                 }
             });
             return task;
         }
-    }, [contents, selectedItem, refresh]);
+    }, [contents, selectedItem, refreshView, view, folderPath]);
     const onContextMenu = useCallback((ref) => {
         if (contextMenuAnchor === ref) {
             setContextMenuAnchor(null);
@@ -225,53 +308,63 @@ export function ContentsBrowser(props) {
                             alignItems: 'center',
                             flexWrap: 'nowrap',
                             flexShrink: 0,
-                        }, children: [_jsx(IconButton, { variant: "invisible", "aria-label": 'Refresh contents browser.', title: 'Refresh contents browser.', icon: SyncIcon, onClick: refresh }), _jsx(UploadIconButton, { label: 'Upload a file', multiple: true, upload: upload })] })] }), isLoading ? (_jsx(Box, { sx: {
+                        }, 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, {}) })) : (_jsx(Box, { sx: { gridArea: 'content' }, children: children ? (_jsxs(_Fragment, { 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 => {
-                                        onSelect(item, refresh);
-                                    }, onContextMenu: onContextMenu }, child.name));
-                            }) }), contextMenuAnchor !== null && (_jsx(ActionMenu, { anchorRef: contextMenuAnchor ?? undefined, open: contextMenuAnchor?.current !== null, onOpenChange: () => {
-                                setContextMenuAnchor(null);
-                            }, children: _jsx(ActionMenu.Overlay, { children: _jsxs(ActionList, { children: [_jsx(ActionList.Item, { title: "Delete the active item.", onSelect: onSelectDelete, children: "Delete\u2026" }), localContents && (_jsx(ActionList.Item, { title: "Copy the active item to the local drive.", onSelect: onSelectCopyToLocal, children: "Copy to local drive\u2026" }))] }) }) })), openDeleteConfirmation && (_jsx(Dialog, { title: _jsx("span", { style: { color: 'var(--fgColor-default)' }, children: "Confirm deletion" }), onClose: () => {
-                                setOpenDeleteConfirmation(false);
-                            }, footerButtons: [
-                                {
-                                    buttonType: 'default',
-                                    content: 'Cancel',
-                                    onClick: () => {
-                                        setOpenDeleteConfirmation(false);
-                                    },
+                }, 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 => {
+                            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 => {
+                                    onSelect(item, refresh);
+                                }, onContextMenu: onContextMenu }, child.name));
+                        }) })) : (_jsx(Blankslate, { children: _jsx(Blankslate.Heading, { children: "No contents" }) })), !mock && contextMenuAnchor !== null && (_jsx(ActionMenu
+                    // Primer 37 types `anchorRef` with React 18's non-nullable
+                    // `RefObject<HTMLElement>`; the anchor this menu tracks is nullable.
+                    , { 
+                        // Primer 37 types `anchorRef` with React 18's non-nullable
+                        // `RefObject<HTMLElement>`; the anchor this menu tracks is nullable.
+                        anchorRef: (contextMenuAnchor ?? undefined), open: contextMenuAnchor?.current !== null, onOpenChange: () => {
+                            setContextMenuAnchor(null);
+                        }, children: _jsx(ActionMenu.Overlay, { children: _jsxs(ActionList, { children: [_jsx(ActionList.Item, { title: "Delete the active item.", onSelect: onSelectDelete, children: "Delete\u2026" }), localContents && (_jsx(ActionList.Item, { title: "Copy the active item to the local drive.", onSelect: onSelectCopyToLocal, children: "Copy to local drive\u2026" }))] }) }) })), openDeleteConfirmation && (_jsx(Dialog, { title: _jsx("span", { style: { color: 'var(--fgColor-default)' }, children: "Confirm deletion" }), onClose: () => {
+                            setOpenDeleteConfirmation(false);
+                        }, footerButtons: [
+                            {
+                                buttonType: 'default',
+                                content: 'Cancel',
+                                onClick: () => {
+                                    setOpenDeleteConfirmation(false);
                                 },
-                                {
-                                    buttonType: 'danger',
-                                    content: 'Delete',
-                                    onClick: () => {
-                                        deleteItem();
-                                    },
+                            },
+                            {
+                                buttonType: 'danger',
+                                content: 'Delete',
+                                onClick: () => {
+                                    deleteItem();
                                 },
-                            ], children: `Are you sure you want to delete ${selectedItem?.path}?` })), copyToLocalConfirmation && (_jsx(Dialog, { title: _jsx("span", { style: { color: 'var(--fgColor-default)' }, children: "Confirm copy to local" }), onClose: () => {
-                                setCopyToLocalConfirmation(false);
-                            }, footerButtons: [
-                                {
-                                    buttonType: 'default',
-                                    content: 'Cancel',
-                                    onClick: () => {
-                                        setCopyToLocalConfirmation(false);
-                                    },
+                            },
+                        ], children: `Are you sure you want to delete ${selectedItem?.path}?` })), copyToLocalConfirmation && (_jsx(Dialog, { title: _jsx("span", { style: { color: 'var(--fgColor-default)' }, children: "Confirm copy to local" }), onClose: () => {
+                            setCopyToLocalConfirmation(false);
+                        }, footerButtons: [
+                            {
+                                buttonType: 'default',
+                                content: 'Cancel',
+                                onClick: () => {
+                                    setCopyToLocalConfirmation(false);
                                 },
-                                {
-                                    buttonType: 'danger',
-                                    content: 'Copy to local',
-                                    onClick: () => {
-                                        copyToLocal();
-                                    },
+                            },
+                            {
+                                buttonType: 'danger',
+                                content: 'Copy to local',
+                                onClick: () => {
+                                    copyToLocal();
                                 },
-                            ], children: `Are you sure you want to copy to local ${selectedItem?.path}?` }))] })) : (_jsx(Blankslate, { children: _jsx(Blankslate.Heading, { children: "No contents" }) })) }))] }));
-}
+                            },
+                        ], children: `Are you sure you want to copy to local ${selectedItem?.path}?` }))] }))] }));
+};
 export default ContentsBrowser;

package/lib/components/storage/ContentsBrowserMock.d.ts

@@ -0,0 +1,3 @@
+import { Contents } from '@jupyterlab/services';
+/** Invented sandbox filesystem used by documentation previews. */
+export declare const CONTENTS_BROWSER_MOCK_MANAGER: Contents.IManager;

package/lib/components/storage/ContentsBrowserMock.js

@@ -0,0 +1,75 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+const timestamp = '2026-08-24T08:00:00.000Z';
+function directory(name, path, content) {
+    return {
+        name,
+        path,
+        type: 'directory',
+        writable: true,
+        created: timestamp,
+        last_modified: timestamp,
+        mimetype: '',
+        content,
+        format: 'json',
+    };
+}
+function file(name, path) {
+    return {
+        name,
+        path,
+        type: 'file',
+        writable: true,
+        created: timestamp,
+        last_modified: timestamp,
+        mimetype: 'application/octet-stream',
+        content: null,
+        format: null,
+    };
+}
+const entries = new Map();
+const workspace = directory('workspace', 'workspace', [
+    file('analysis.ipynb', 'workspace/analysis.ipynb'),
+    file('prepare_data.py', 'workspace/prepare_data.py'),
+    directory('results', 'workspace/results', [
+        file('summary.parquet', 'workspace/results/summary.parquet'),
+    ]),
+]);
+const data = directory('data', 'data', [
+    directory('earth-observation', 'data/earth-observation', [
+        file('manifest.json', 'data/earth-observation/manifest.json'),
+        file('observations.parquet', 'data/earth-observation/observations.parquet'),
+    ]),
+    directory('model-artifacts', 'data/model-artifacts', [
+        file('checkpoint.bin', 'data/model-artifacts/checkpoint.bin'),
+    ]),
+]);
+const environment = directory('environment', 'environment', [
+    directory('tutorials', 'environment/tutorials', [
+        file('README.md', 'environment/tutorials/README.md'),
+        file('example.ipynb', 'environment/tutorials/example.ipynb'),
+    ]),
+    directory('reference-data', 'environment/reference-data', [
+        file('sentinel-catalog.json', 'environment/reference-data/sentinel-catalog.json'),
+    ]),
+]);
+const root = directory('', '', [workspace, data, environment]);
+function index(model) {
+    entries.set(model.path, model);
+    if (model.type === 'directory' && Array.isArray(model.content)) {
+        model.content.forEach(index);
+    }
+}
+index(root);
+/** Invented sandbox filesystem used by documentation previews. */
+export const CONTENTS_BROWSER_MOCK_MANAGER = {
+    serverSettings: { appUrl: 'mock://code-sandbox/' },
+    get: async (path) => entries.get(path) ?? root,
+    save: async (path, model) => ({
+        ...file(model.name ?? path, path),
+        ...model,
+    }),
+    delete: async () => undefined,
+};

package/lib/components/storage/ContentsItems.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { MutableRefObject } from 'react';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { Contents } from '@jupyterlab/services';
@@ -54,5 +55,5 @@ export declare function modelToView(models: Contents.IModel[], docRegistry?: Doc
  * Directory tree item component
  */
 export declare function DirectoryItem(props: IDirectoryItemProps): JSX.Element;
-export declare function TreeItem(props: ITreeItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function TreeItem(props: ITreeItemProps): JSX.Element;
 export {};

package/lib/components/storage/ContentsItems.js

@@ -1,8 +1,4 @@
 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 { useCallback, useRef, useState } from 'react';
 import { TreeView } from '@primer/react';
 import { FileIcon } from '@primer/octicons-react';