@datalayer/core 1.1.59 → 1.1.66

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';

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

@@ -0,0 +1,50 @@
+import type { JSX } from 'react';
+import { type MutableRefObject } from 'react';
+import { IContentsView } from './ContentsItems';
+/**
+ * Contents table component properties.
+ */
+export interface IContentsTableProps {
+    /**
+     * Path of the folder listed by the table; the empty string is the root.
+     */
+    path: string;
+    /**
+     * Items of the listed folder.
+     */
+    items: IContentsView[];
+    /**
+     * Currently selected item.
+     */
+    current: IContentsView | null;
+    /**
+     * Whether the folder content is being (re)fetched; a spinner replaces the
+     * rows while it is.
+     */
+    loading?: boolean;
+    /**
+     * Callback when a folder is opened, either from a row, the `..` row or the
+     * path bar. Navigating to the listed folder reloads it.
+     */
+    onNavigate: (path: string) => void;
+    /**
+     * Callback on item selection.
+     */
+    onSelect: (item: IContentsView) => void;
+    /**
+     * Callback on context menu event.
+     */
+    onContextMenu: (ref: MutableRefObject<HTMLElement | null>) => void;
+}
+/**
+ * Format a byte count for display.
+ */
+export declare function formatSize(size?: number | null): string;
+/**
+ * Table listing the content of one folder.
+ *
+ * Folder rows open the folder, the `..` row goes to the parent folder and
+ * the path bar jumps to any ancestor (or reloads the listed folder).
+ */
+export declare function ContentsTable(props: IContentsTableProps): JSX.Element;
+export default ContentsTable;

package/lib/components/storage/ContentsTable.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useRef, } from 'react';
+import { PathExt } from '@jupyterlab/coreutils';
+import { Link, RelativeTime, Spinner, Text } from '@primer/react';
+import { Table } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { FileDirectoryFillIcon, FileDirectoryIcon, FileIcon, } from '@primer/octicons-react';
+const SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB'];
+/**
+ * Format a byte count for display.
+ */
+export function formatSize(size) {
+    if (size === undefined || size === null) {
+        return '';
+    }
+    let value = size;
+    let unit = 0;
+    while (value >= 1024 && unit < SIZE_UNITS.length - 1) {
+        value /= 1024;
+        unit += 1;
+    }
+    return `${unit === 0 ? value : value.toFixed(1)} ${SIZE_UNITS[unit]}`;
+}
+/**
+ * Split a folder path into its ancestors, root first.
+ */
+function pathSegments(path) {
+    const segments = [];
+    if (path) {
+        path.split('/').forEach(name => {
+            const parent = segments[segments.length - 1]?.path ?? '';
+            segments.push({
+                name,
+                path: parent ? PathExt.join(parent, name) : name,
+            });
+        });
+    }
+    return segments;
+}
+/**
+ * One clickable part of the path bar.
+ */
+function PathSegment(props) {
+    const { name, path, current, title, onNavigate } = props;
+    return (_jsx(Link, { as: "button", type: "button", title: title, "aria-current": current ? 'location' : undefined, onClick: () => onNavigate(path), sx: current ? { color: 'fg.default', fontWeight: 'semibold' } : undefined, children: name }));
+}
+const ROW_STYLE = { cursor: 'pointer' };
+const SELECTED_ROW_STYLE = {
+    ...ROW_STYLE,
+    backgroundColor: 'var(--bgColor-accent-muted)',
+};
+function isActivationKey(event) {
+    return event.key === 'Enter' || event.key === ' ';
+}
+/**
+ * The `..` row navigating to the parent folder.
+ */
+function ParentRow(props) {
+    const { path, onNavigate } = props;
+    const goUp = () => onNavigate(path);
+    return (_jsxs(Table.Row, { tabIndex: 0, style: ROW_STYLE, title: "Go to the parent folder.", onClick: goUp, onKeyDown: event => {
+            if (isActivationKey(event)) {
+                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, {})] }));
+}
+/**
+ * A folder or file row.
+ */
+function ContentsRow(props) {
+    const { item, current, onNavigate, onSelect, onContextMenu } = props;
+    const ref = useRef(null);
+    const isDirectory = item.type === 'directory';
+    const icon = item.fileType?.icon;
+    const activate = () => {
+        if (isDirectory) {
+            onNavigate(item.path);
+        }
+        else {
+            onSelect(item);
+        }
+    };
+    return (_jsxs(Table.Row, { tabIndex: 0, "aria-selected": current, style: current ? SELECTED_ROW_STYLE : ROW_STYLE, title: isDirectory ? `Open ${item.path}` : item.path, onClick: activate, onKeyDown: event => {
+            if (isActivationKey(event)) {
+                event.preventDefault();
+                activate();
+            }
+        }, onContextMenu: (event) => {
+            event.preventDefault();
+            if (!current) {
+                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: {
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                            }, children: item.name })] }) }), _jsx(Table.Cell, { children: item.last_modified ? (_jsx(RelativeTime, { date: new Date(item.last_modified) })) : null }), _jsx(Table.Cell, { align: "end", children: isDirectory ? '' : formatSize(item.size) })] }));
+}
+/**
+ * Table listing the content of one folder.
+ *
+ * Folder rows open the folder, the `..` row goes to the parent folder and
+ * the path bar jumps to any ancestor (or reloads the listed folder).
+ */
+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
+                                        ? `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)))] })] }) }))] }));
+}
+export default ContentsTable;