@datalayer/core 1.1.60 → 1.1.66

package/lib/components/principal/PrincipalHoverCard.d.ts

@@ -0,0 +1,31 @@
+/**
+ * A principal's details, shown from a hover on their avatar.
+ *
+ * The same {@link PrincipalDetailsCard} the click overlay uses, anchored on
+ * an avatar and opened by pointing at it — for the faces of a shared
+ * document, where there is no name to click, only a stack of avatars.
+ *
+ * The card stays open while the pointer is on the avatar OR on the card, so
+ * the "View Profile" button inside it can be reached: leaving the avatar
+ * starts a short countdown that entering the card cancels.
+ *
+ * The anchor forwards the class an `AvatarStack` clones onto its children
+ * (`pc-AvatarItem`, which sizes and overlaps the faces) so a hover card can
+ * wrap a face without breaking the stack.
+ *
+ * @module components/principal/PrincipalHoverCard
+ */
+import type { JSX } from 'react';
+import type { ReactNode } from 'react';
+import { type PrincipalDetailsOverlayProps } from './PrincipalDetailsOverlay';
+export type PrincipalHoverCardProps = PrincipalDetailsOverlayProps & {
+    /** The avatar the card hangs off — the anchor. */
+    children: ReactNode;
+    /**
+     * Cloned in by `AvatarStack` onto each child; forwarded to the anchor so
+     * the face keeps its size, overlap and mask inside the stack.
+     */
+    className?: string;
+};
+export declare function PrincipalHoverCard({ children, className, ...principal }: PrincipalHoverCardProps): JSX.Element;
+export default PrincipalHoverCard;

package/lib/components/principal/PrincipalHoverCard.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { AnchoredOverlay, Box, ThemeProvider } from '@primer/react';
+import { PrincipalDetailsCard, } from './PrincipalDetailsOverlay.js';
+/** How long the card lingers after the pointer leaves, to let it be entered. */
+const HIDE_DELAY_MS = 200;
+export function PrincipalHoverCard({ children, className, ...principal }) {
+    const [open, setOpen] = useState(false);
+    const hideTimeout = useRef(undefined);
+    const cancelHide = useCallback(() => {
+        if (hideTimeout.current !== undefined) {
+            window.clearTimeout(hideTimeout.current);
+            hideTimeout.current = undefined;
+        }
+    }, []);
+    const show = useCallback(() => {
+        cancelHide();
+        setOpen(true);
+    }, [cancelHide]);
+    const hide = useCallback(() => {
+        cancelHide();
+        hideTimeout.current = window.setTimeout(() => {
+            setOpen(false);
+            hideTimeout.current = undefined;
+        }, HIDE_DELAY_MS);
+    }, [cancelHide]);
+    useEffect(() => cancelHide, [cancelHide]);
+    return (_jsx(AnchoredOverlay, { open: open, onOpen: show, onClose: () => setOpen(false), side: "outside-bottom", align: "center", displayCloseButton: false, focusTrapSettings: { disabled: true }, focusZoneSettings: { disabled: true }, overlayProps: {
+            role: 'dialog',
+            onMouseEnter: show,
+            onMouseLeave: hide,
+            preventFocusOnOpen: true,
+        }, renderAnchor: anchorProps => (_jsx(Box, { ...anchorProps, className: [className, anchorProps.className]
+                .filter(Boolean)
+                .join(' '), onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                /*
+                 * Round, like the face it holds.
+                 *
+                 * This box stands between the stack and the avatar — it is the
+                 * element `AvatarStack` sizes and clips as one of its items — so a
+                 * square one clipped a round avatar into a square. It takes the
+                 * shape of what it wraps.
+                 */
+                borderRadius: '50%',
+                overflow: 'hidden',
+            }, children: children })), children: _jsx(ThemeProvider, { children: _jsx(PrincipalDetailsCard, { ...principal }) }) }));
+}
+export default PrincipalHoverCard;

package/lib/components/principal/PrincipalSwitcherMenu.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type PrincipalSwitcherMenuProps = {
     maxLabelChars?: number;
     fullWidth?: boolean;

package/lib/components/principal/PrincipalSwitcherMenu.js

@@ -1,10 +1,6 @@
 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 { useEffect, useMemo, useState } from 'react';
-import { ActionList, ActionMenu, Box, Button, Label, Text, ThemeProvider, } from '@primer/react';
+import { ActionList, ActionMenu, Box, Button, Text, ThemeProvider, } from '@primer/react';
 import { OrganizationIcon, PeopleIcon, PersonIcon, TriangleDownIcon, } from '@primer/octicons-react';
 import { useCache, useAuthorization } from '../../hooks/index.js';
 import { useCoreStore } from '../../state/index.js';
@@ -15,6 +11,7 @@ import { usePrincipalStore } from '../../hooks/usePrincipalStore.js';
 import { useBillingEntityStore } from '../../hooks/useBillingEntityStore.js';
 import { useSelectedPrincipal } from '../../hooks/useSelectedPrincipal.js';
 import { DisplayHandle, displayHandleText } from '../display/DisplayHandle.js';
+import { AdminLabel } from '../labels/StatusLabels.js';
 function truncatePrincipalLabel(label, maxChars) {
     const trimmed = (label || '').trim();
     if (!trimmed) {
@@ -201,12 +198,6 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
         color: 'accent.fg',
         fontWeight: 'semibold',
     };
-    const adminBadgeSx = {
-        bg: 'attention.subtle',
-        color: 'attention.fg',
-        textTransform: 'lowercase',
-        lineHeight: 1.2,
-    };
     return (_jsx(ThemeProvider, { children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: showClosedBorder ? (_jsxs(Box, { as: "button", type: "button", "aria-label": "Switch principal", sx: {
                             width: fullWidth ? '100%' : 'auto',
                             boxSizing: 'border-box',
@@ -251,7 +242,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                     flexShrink: 0,
                                     display: 'inline-flex',
                                     alignItems: 'center',
-                                }, children: _jsx(Label, { variant: "secondary", size: "small", sx: adminBadgeSx, children: "admin" }) })) : null, _jsx(Box, { sx: {
+                                }, children: _jsx(AdminLabel, {}) })) : null, _jsx(Box, { sx: {
                                     display: 'inline-flex',
                                     alignItems: 'center',
                                     color: 'fg.muted',
@@ -278,7 +269,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                     }, children: _jsx(Text, { sx: {
                                             color: 'accent.fg',
                                             fontWeight: 'semibold',
-                                        }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(Label, { variant: "secondary", size: "small", sx: adminBadgeSx, children: "admin" })) : null] }) })) }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsxs(ActionList, { selectionVariant: "single", children: [_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Personal" }), _jsxs(ActionList.Item, { disabled: isCurrentUserPrincipal, selected: isCurrentUserPrincipal, sx: isCurrentUserPrincipal ? selectedItemSx : undefined, onSelect: () => {
+                                        }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(AdminLabel, {})) : null] }) })) }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsxs(ActionList, { selectionVariant: "single", children: [_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Personal" }), _jsxs(ActionList.Item, { disabled: isCurrentUserPrincipal, selected: isCurrentUserPrincipal, sx: isCurrentUserPrincipal ? selectedItemSx : undefined, onSelect: () => {
                                             if (isCurrentUserPrincipal) {
                                                 return;
                                             }
@@ -294,7 +285,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                                 }, children: [String(user?.friendlyName ||
                                                         user?.displayName ||
                                                         personalHandle ||
-                                                        'Me').trim(), _jsxs(Box, { as: "span", sx: { color: 'fg.muted' }, children: [' ', "\u00B7 ", _jsx(DisplayHandle, { handle: personalHandle || 'me' })] })] }), isPlatformAdmin ? (_jsx(ActionList.TrailingVisual, { children: _jsx(Label, { variant: "secondary", size: "small", sx: adminBadgeSx, children: "admin" }) })) : null] })] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Organizations" }), organizations.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No organizations" })) : (organizations.map((organization) => {
+                                                        'Me').trim(), _jsxs(Box, { as: "span", sx: { color: 'fg.muted' }, children: [' ', "\u00B7 ", _jsx(DisplayHandle, { handle: personalHandle || 'me' })] })] }), isPlatformAdmin ? (_jsx(ActionList.TrailingVisual, { children: _jsx(AdminLabel, {}) })) : null] })] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Organizations" }), organizations.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No organizations" })) : (organizations.map((organization) => {
                                         const organizationUid = getOrganizationUid(organization);
                                         const isCurrentOrganizationPrincipal = selectedPrincipalKind === 'organization' &&
                                             selectedPrincipalUid === organizationUid;

package/lib/components/principal/index.d.ts

@@ -3,6 +3,7 @@ export * from './PrincipalAvatar';
 export * from './PrincipalAppearance';
 export * from './PrincipalBadge';
 export * from './PrincipalBanner';
-export { buildPrincipalProfilePath, PrincipalDetailsOverlay, } from './PrincipalDetailsOverlay';
+export { buildPrincipalProfilePath, PrincipalDetailsCard, PrincipalDetailsOverlay, } from './PrincipalDetailsOverlay';
 export type { PrincipalDetailsOverlayProps } from './PrincipalDetailsOverlay';
+export { PrincipalHoverCard, type PrincipalHoverCardProps, } from './PrincipalHoverCard';
 export * from './PrincipalSwitcherMenu';

package/lib/components/principal/index.js

@@ -7,5 +7,6 @@ export * from './PrincipalAvatar.js';
 export * from './PrincipalAppearance.js';
 export * from './PrincipalBadge.js';
 export * from './PrincipalBanner.js';
-export { buildPrincipalProfilePath, PrincipalDetailsOverlay, } from './PrincipalDetailsOverlay.js';
+export { buildPrincipalProfilePath, PrincipalDetailsCard, PrincipalDetailsOverlay, } from './PrincipalDetailsOverlay.js';
+export { PrincipalHoverCard, } from './PrincipalHoverCard.js';
 export * from './PrincipalSwitcherMenu.js';

package/lib/components/progress/ConsumptionBar.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 /**
  * Consumption progress bar properties
  */

package/lib/components/progress/ConsumptionBar.js

@@ -1,8 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
 import { useEffect, useMemo, useState } from 'react';
 import { useInterval } from 'usehooks-ts';
 import { ProgressBar, Tooltip, Button } from '@primer/react';

package/lib/components/progress/ProgressRing.d.ts

@@ -1,6 +1,7 @@
 /**
  * Progress ring segment properties
  */
+import type { JSX } from 'react';
 export interface IProgressRingItemProps {
     /**
      * Progress

package/lib/components/progress/SpinnerBar.d.ts

@@ -1,2 +1,2 @@
-export declare const SpinnerBar: () => import("react/jsx-runtime").JSX.Element;
+export declare const SpinnerBar: () => import("react").JSX.Element;
 export default SpinnerBar;

package/lib/components/progress/Timer.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 /**
  * Timer displaying the time as text.
  *

package/lib/components/progress/Timer.js

@@ -1,8 +1,4 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
 import { useState, useEffect } from 'react';
 import { Text } from '@primer/react';
 /**

package/lib/components/screencapture/ScreencaptureButton.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
-export declare const ScreencaptureButton: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const ScreencaptureButton: (props: PropsWithChildren) => import("react").JSX.Element;
 export default ScreencaptureButton;

package/lib/components/sharing/ShareAccessComponent.d.ts

@@ -1,8 +1,22 @@
+import type { JSX } from 'react';
 export type ItemAccessLevel = 'view' | 'update' | 'execute';
 type PrincipalKind = 'personal' | 'team' | 'organization';
+type SharingLevelPayload = {
+    userUids?: string[];
+    teamUids?: string[];
+    organizationUids?: string[];
+};
+type SharingPayload = {
+    access?: Partial<Record<ItemAccessLevel, SharingLevelPayload>>;
+};
+export type ShareAccessTransport = {
+    load: () => Promise<Record<string, any>>;
+    save: (sharing: SharingPayload) => Promise<void>;
+};
 export type ShareAccessComponentProps = {
     isOpen: boolean;
     requestUrl?: string;
+    transport?: ShareAccessTransport;
     resourceLabel: string;
     resourceName?: string;
     resourceDescription?: string;
@@ -13,7 +27,7 @@ export type ShareAccessComponentProps = {
     displayMode?: 'dialog' | 'inline';
     onClose: () => void;
 };
-export declare function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resourceName, resourceDescription: _resourceDescription, expanded, onSharingAccessRestrictedChange, defaultAccessLevel, principalKinds, displayMode, onClose, }: ShareAccessComponentProps): JSX.Element | null;
+export declare function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLabel, resourceName, resourceDescription: _resourceDescription, expanded, onSharingAccessRestrictedChange, defaultAccessLevel, principalKinds, displayMode, onClose, }: ShareAccessComponentProps): JSX.Element | null;
 export default ShareAccessComponent;
 export declare const ShareAccessDialog: typeof ShareAccessComponent;
 export type ShareAccessDialogProps = ShareAccessComponentProps;

package/lib/components/sharing/ShareAccessComponent.js

@@ -1,8 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ChevronDownIcon, ChevronUpIcon, KeyIcon, PersonIcon, OrganizationIcon, PeopleIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
@@ -382,7 +378,7 @@ function AccessPrincipalRow({ entry, cache, showAvatarSkeleton = false, isPlatfo
 // ---------------------------------------------------------------------------
 // Main component.
 // ---------------------------------------------------------------------------
-export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resourceName, resourceDescription: _resourceDescription, expanded = false, onSharingAccessRestrictedChange, defaultAccessLevel = 'view', principalKinds = DEFAULT_PRINCIPAL_KINDS, displayMode = 'dialog', onClose, }) {
+export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLabel, resourceName, resourceDescription: _resourceDescription, expanded = false, onSharingAccessRestrictedChange, defaultAccessLevel = 'view', principalKinds = DEFAULT_PRINCIPAL_KINDS, displayMode = 'dialog', onClose, }) {
     void _resourceDescription;
     const { token, user } = useIAMStore();
     const { configuration } = useCoreStore();
@@ -432,7 +428,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
         onSharingAccessRestrictedChange,
     ]);
     // ----- Derived -----
-    const canRequest = Boolean(requestUrl && token);
+    const canRequest = Boolean(token && (requestUrl || transport));
     const canSearchPrincipals = Boolean(configuration?.iamUrl && token);
     const iamUrl = configuration?.iamUrl;
     const principalKindsSet = useMemo(() => new Set(principalKinds), [principalKinds]);
@@ -492,7 +488,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
             userHydrationMissesRef.current = new Set();
             return;
         }
-        if (!canRequest || !requestUrl) {
+        if (!canRequest) {
             setIsLoading(false);
             setIsSharingAccessConfirmed(false);
             return;
@@ -507,14 +503,18 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
             setIsSharingAccessConfirmed(false);
             setSharingAccessMessage(null);
             try {
-                const response = await fetch(requestUrl, {
-                    method: 'GET',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        Authorization: `Bearer ${token}`,
-                    },
-                });
-                const payload = await response.json();
+                const response = transport
+                    ? null
+                    : await fetch(requestUrl, {
+                        method: 'GET',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            Authorization: `Bearer ${token}`,
+                        },
+                    });
+                const payload = transport
+                    ? await transport.load()
+                    : await response.json();
                 const message = payload?.detail ||
                     payload?.message ||
                     `Unable to load ${resourceLabel.toLowerCase()} sharing.`;
@@ -528,7 +528,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                     }
                     throw new Error(message);
                 }
-                if (!response.ok) {
+                if (response && !response.ok) {
                     if (response.status === 403 ||
                         isSharingAuthorizationMessage(message)) {
                         if (!cancelled) {
@@ -585,6 +585,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
         isOpen,
         canRequest,
         requestUrl,
+        transport,
         token,
         resourceLabel,
         resourceName,
@@ -1009,7 +1010,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
     ]);
     // ----- Auto-save on access change after hydration -----
     const saveAccess = useCallback(async (snapshot) => {
-        if (!canRequest || !requestUrl) {
+        if (!canRequest) {
             return;
         }
         setIsSaving(true);
@@ -1033,6 +1034,13 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                     },
                 },
             };
+            if (transport) {
+                await transport.save(body);
+                enqueueToastRef.current(`${resourceLabel} sharing updated.`, {
+                    variant: 'success',
+                });
+                return;
+            }
             const response = await fetch(requestUrl, {
                 method: 'PUT',
                 headers: {
@@ -1073,7 +1081,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
         finally {
             setIsSaving(false);
         }
-    }, [canRequest, requestUrl, token, resourceLabel]);
+    }, [canRequest, requestUrl, token, resourceLabel, transport]);
     useEffect(() => {
         if (!hasHydratedSharingRef.current) {
             return;
@@ -1262,7 +1270,9 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                             alignItems: 'flex-start',
                             justifyContent: 'space-between',
                             gap: 2,
-                        }, children: [_jsx(Box, { sx: { display: 'grid', gap: 1 }, children: _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Share ", resourceName || `this ${resourceLabel.toLowerCase()}`, ". Pick a principal below \u2014 they will be granted the selected access level."] }) }), _jsxs(ActionMenu, { children: [_jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(ActionMenu.Anchor, { children: _jsxs(Button, { variant: "default", size: "small", leadingVisual: KeyIcon, disabled: isSaving || isReadOnly, children: ["Access: ", ACCESS_LEVEL_LABELS[selectedAccessLevel]] }) }), _jsx(Button, { variant: "invisible", size: "small", leadingVisual: isExpanded ? ChevronUpIcon : ChevronDownIcon, onClick: () => setIsExpanded(previous => !previous), "aria-label": isExpanded ? 'Shrink sharing details' : 'Expand sharing details', children: isExpanded ? 'Shrink details' : 'Expand details' })] }), _jsx(ActionMenu.Overlay, { width: "small", children: _jsx(ActionList, { selectionVariant: "single", children: ACCESS_LEVELS.map(level => (_jsx(ActionList.Item, { selected: selectedAccessLevel === level, onSelect: () => setSelectedAccessLevel(level), children: ACCESS_LEVEL_LABELS[level] }, level))) }) })] })] }), !isExpanded && (_jsxs(Box, { sx: {
+                        }, children: [_jsx(Box, { sx: { display: 'grid', gap: 1 }, children: _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Share ", resourceName || `this ${resourceLabel.toLowerCase()}`, ". Pick a principal below \u2014 they will be granted the selected access level."] }) }), _jsxs(ActionMenu, { children: [_jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(ActionMenu.Anchor, { children: _jsxs(Button, { variant: "default", size: "small", leadingVisual: KeyIcon, disabled: isSaving || isReadOnly, children: ["Access: ", ACCESS_LEVEL_LABELS[selectedAccessLevel]] }) }), _jsx(Button, { variant: "invisible", size: "small", leadingVisual: isExpanded ? ChevronUpIcon : ChevronDownIcon, onClick: () => setIsExpanded(previous => !previous), "aria-label": isExpanded
+                                                    ? 'Shrink sharing details'
+                                                    : 'Expand sharing details', children: isExpanded ? 'Shrink details' : 'Expand details' })] }), _jsx(ActionMenu.Overlay, { width: "small", children: _jsx(ActionList, { selectionVariant: "single", children: ACCESS_LEVELS.map(level => (_jsx(ActionList.Item, { selected: selectedAccessLevel === level, onSelect: () => setSelectedAccessLevel(level), children: ACCESS_LEVEL_LABELS[level] }, level))) }) })] })] }), !isExpanded && (_jsxs(Box, { sx: {
                             px: 3,
                             py: 2,
                             borderRadius: 2,
@@ -1272,7 +1282,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                             bg: 'canvas.default',
                             display: 'grid',
                             gap: 1,
-                        }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Sharing details are collapsed." }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [aclEntries.length, " principal", aclEntries.length === 1 ? '' : 's', " currently granted access."] })] })), isExpanded && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                        }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Sharing details are collapsed." }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [aclEntries.length, " principal", aclEntries.length === 1 ? '' : 's', ' ', "currently granted access."] })] })), isExpanded && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
                                     px: 3,
                                     py: 2,
                                     borderRadius: 2,
@@ -1303,7 +1313,11 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                                             alignItems: 'center',
                                             justifyContent: 'space-between',
                                             gap: 2,
-                                        }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 600 }, children: "Share with\u2026" }), isLoadingShareable && (_jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Loading\u2026" })] }))] }), !isLoadingShareable &&
+                                        }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 600 }, children: "Share with\u2026" }), isLoadingShareable && (_jsxs(Box, { sx: {
+                                                    display: 'inline-flex',
+                                                    alignItems: 'center',
+                                                    gap: 1,
+                                                }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Loading\u2026" })] }))] }), !isLoadingShareable &&
                                         groupedShareable.self.length === 0 &&
                                         groupedShareable.otherUsers.length === 0 &&
                                         groupedShareable.orgs.length === 0 &&
@@ -1356,8 +1370,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                                                                     gap: 1,
                                                                     flexWrap: 'wrap',
                                                                 }, children: [_jsx(Text, { children: result.displayName }), result.kind === 'personal' && (_jsx(Label, { size: "small", variant: "secondary", children: result.origin ||
-                                                                            principalCache[principalKey('personal', result.uid)]
-                                                                                ?.origin ||
+                                                                            principalCache[principalKey('personal', result.uid)]?.origin ||
                                                                             'Datalayer' }))] }), _jsxs(ActionList.Description, { variant: "block", children: ["@", result.handle] })] }, principalKey(result.kind, result.uid)))) })) }))] })] }), _jsxs(Box, { sx: {
                                     px: 3,
                                     py: 2,

package/lib/components/sharing/SharingEditor.d.ts

@@ -1,3 +1,20 @@
+/**
+ * SharingEditor — inline editor for the sharing payload shape used by
+ * `ShareAccessComponent` ACL endpoints.
+ *
+ * Unlike `ShareAccessComponent` (which is bound to a server-side resource
+ * via `requestUrl`), this component edits a free-form
+ * `{ access: { view/update/execute: { userUids, teamUids, organizationUids } } }`
+ * blob in memory. It is intended for "create" flows where the resource does
+ * not yet exist and the sharing payload must be POSTed alongside the rest of
+ * the configuration.
+ *
+ * This is a scaffold: it currently exposes a structured JSON editor with
+ * validation and the canonical default shape. Future iterations can replace
+ * the textarea with the same principal-picker UI used by
+ * `ShareAccessComponent`.
+ */
+import type { JSX } from 'react';
 export type SharingAccessLevel = 'view' | 'update' | 'execute';
 export type SharingLevelPayload = {
     userUids?: string[];

package/lib/components/sharing/SharingEditor.js

@@ -1,28 +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.
- */
-/*
- * Copyright (c) 2023-2026 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-/**
- * SharingEditor — inline editor for the sharing payload shape used by
- * `ShareAccessComponent` ACL endpoints.
- *
- * Unlike `ShareAccessComponent` (which is bound to a server-side resource
- * via `requestUrl`), this component edits a free-form
- * `{ access: { view/update/execute: { userUids, teamUids, organizationUids } } }`
- * blob in memory. It is intended for "create" flows where the resource does
- * not yet exist and the sharing payload must be POSTed alongside the rest of
- * the configuration.
- *
- * This is a scaffold: it currently exposes a structured JSON editor with
- * validation and the canonical default shape. Future iterations can replace
- * the textarea with the same principal-picker UI used by
- * `ShareAccessComponent`.
- */
 import { useEffect, useMemo, useState } from 'react';
 import { Box } from '@datalayer/primer-addons';
 import { FormControl, Text, Textarea } from '@primer/react';

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.