@datalayer/core 1.2.18 → 1.2.19

package/lib/components/progress/ConsumptionBar.js

@@ -66,5 +66,5 @@ export function ConsumptionBar(props) {
                     ...(paddingRight !== undefined ? { paddingRight } : {}),
                     ...(paddingTop !== undefined ? { paddingTop } : {}),
                     ...(paddingBottom !== undefined ? { paddingBottom } : {}),
-                }, children: _jsx(Box, { sx: { width: '70px' }, children: _jsx(ProgressBar, { style: style, animated: expiredAt ? false : true, bg: bg, progress: progress }) }) }) }) }));
+                }, children: _jsx(Box, { width: "70px", children: _jsx(ProgressBar, { style: style, animated: expiredAt ? false : true, bg: bg, progress: progress }) }) }) }) }));
 }

package/lib/components/sharing/ShareAccessComponent.js

@@ -314,13 +314,7 @@ export function hydrateAccessFromSharing(sharing, levels) {
 // Avatar shimmer (used while a user row is being hydrated).
 // ---------------------------------------------------------------------------
 function AvatarShimmer({ size = 20 }) {
-    return (_jsx(Box, { sx: {
-            width: size,
-            height: size,
-            borderRadius: '50%',
-            backgroundImage: 'linear-gradient(90deg, var(--bgColor-muted, #d0d7de) 25%, var(--bgColor-default, #ffffff) 50%, var(--bgColor-muted, #d0d7de) 75%)',
-            backgroundSize: '220% 100%',
-            animation: 'avatarShimmerAcl 1.2s ease-in-out infinite',
+    return (_jsx(Box, { width: size, height: size, borderRadius: "50%", backgroundImage: "linear-gradient(90deg, var(--bgColor-muted, #d0d7de) 25%, var(--bgColor-default, #ffffff) 50%, var(--bgColor-muted, #d0d7de) 75%)", backgroundSize: "220% 100%", animation: "avatarShimmerAcl 1.2s ease-in-out infinite", sx: {
             '@keyframes avatarShimmerAcl': {
                 '0%': { backgroundPosition: '100% 0' },
                 '100%': { backgroundPosition: '-100% 0' },
@@ -336,28 +330,12 @@ function AvatarShimmer({ size = 20 }) {
  * pushed through the personal/team/organization avatar system.
  */
 function AgentAvatar({ size = 20 }) {
-    return (_jsx(Box, { sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: size,
-            height: size,
-            borderRadius: 2,
-            bg: 'canvas.subtle',
-            color: 'fg.muted',
-            flexShrink: 0,
-        }, "aria-label": "Agent", children: _jsx(KeyIcon, { size: Math.max(12, Math.round(size * 0.6)) }) }));
+    return (_jsx(Box, { display: "inline-flex", alignItems: "center", justifyContent: "center", width: size, height: size, borderRadius: 2, bg: "canvas.subtle", color: "fg.muted", flexShrink: 0, "aria-label": "Agent", children: _jsx(KeyIcon, { size: Math.max(12, Math.round(size * 0.6)) }) }));
 }
 /** An agent as it appears in a row of principals: key, name, and the label
  * that says what it is, so an agent is never mistaken for a person. */
 function AgentPrincipalChip({ displayName, size = 20, }) {
-    return (_jsxs(Box, { sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 1,
-            minWidth: 0,
-            flexWrap: 'wrap',
-        }, children: [_jsx(AgentAvatar, { size: size }), _jsx(Text, { sx: { minWidth: 0 }, children: displayName }), _jsx(Label, { size: "small", children: "Agent" })] }));
+    return (_jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, minWidth: 0, flexWrap: "wrap", children: [_jsx(AgentAvatar, { size: size }), _jsx(Text, { sx: { minWidth: 0 }, children: displayName }), _jsx(Label, { size: "small", children: "Agent" })] }));
 }
 function OwnerPrincipalRow({ ownerPrincipal, cache, showAvatarSkeleton = false, isPlatformAdmin, }) {
     const entry = cache[principalKey(ownerPrincipal.kind, ownerPrincipal.uid)] || {};
@@ -373,12 +351,7 @@ function OwnerPrincipalRow({ ownerPrincipal, cache, showAvatarSkeleton = false,
     const resolvedOrigin = ownerPrincipal.origin ||
         entry.origin ||
         (ownerPrincipal.kind === 'personal' ? 'Datalayer' : undefined);
-    return (_jsx(Box, { sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 1,
-            flexWrap: 'wrap',
-        }, children: showAvatarSkeleton ? (_jsxs(_Fragment, { children: [_jsx(AvatarShimmer, { size: 20 }), _jsx(Text, { sx: { fontWeight: 'semibold' }, children: resolvedDisplayName })] })) : (_jsx(PrincipalBadge, { principal: {
+    return (_jsx(Box, { display: "inline-flex", alignItems: "center", gap: 1, flexWrap: "wrap", children: showAvatarSkeleton ? (_jsxs(_Fragment, { children: [_jsx(AvatarShimmer, { size: 20 }), _jsx(Text, { sx: { fontWeight: 'semibold' }, children: resolvedDisplayName })] })) : (_jsx(PrincipalBadge, { principal: {
                 kind: ownerPrincipal.kind,
                 uid: ownerPrincipal.uid,
                 displayName: resolvedDisplayName,
@@ -394,12 +367,7 @@ function AccessPrincipalRow({ entry, cache, showAvatarSkeleton = false, isPlatfo
     const safeCachedHandle = cachedHandle && cachedHandle !== entry.uid ? cachedHandle : '';
     const resolvedHandle = safeCachedHandle || cached.accountHandle;
     const resolvedDisplayName = ensurePrincipalDisplayName(entry.kind, cached.displayName, formatPrincipalHandle(entry.kind, resolvedHandle, cached.accountHandle), resolvedHandle, entry.uid);
-    return (_jsx(Box, { sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 1,
-            flexWrap: 'wrap',
-        }, children: showAvatarSkeleton ? (_jsxs(_Fragment, { children: [_jsx(AvatarShimmer, { size: 20 }), _jsx(Text, { children: resolvedDisplayName })] })) : entry.kind === 'agent' ? (_jsx(AgentPrincipalChip, { displayName: resolvedDisplayName })) : (_jsx(PrincipalBadge, { principal: {
+    return (_jsx(Box, { display: "inline-flex", alignItems: "center", gap: 1, flexWrap: "wrap", children: showAvatarSkeleton ? (_jsxs(_Fragment, { children: [_jsx(AvatarShimmer, { size: 20 }), _jsx(Text, { children: resolvedDisplayName })] })) : entry.kind === 'agent' ? (_jsx(AgentPrincipalChip, { displayName: resolvedDisplayName })) : (_jsx(PrincipalBadge, { principal: {
                 kind: entry.kind,
                 uid: entry.uid,
                 displayName: resolvedDisplayName,
@@ -1228,142 +1196,34 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
                 if (!alreadyAdded) {
                     addPrincipal(principal.kind, principal.uid);
                 }
-            }, disabled: alreadyAdded || isSaving || isReadOnly, sx: {
-                all: 'unset',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                gap: 2,
-                px: 2,
-                py: 2,
-                cursor: alreadyAdded || isSaving || isReadOnly ? 'not-allowed' : 'pointer',
-                opacity: alreadyAdded ? 0.55 : 1,
-                borderRadius: 2,
-                borderWidth: 1,
-                borderStyle: 'solid',
-                borderColor: 'border.default',
-                bg: 'canvas.default',
-                ':hover': {
-                    bg: alreadyAdded || isSaving || isReadOnly
-                        ? 'canvas.default'
-                        : 'canvas.subtle',
-                },
-            }, children: [_jsxs(Box, { sx: {
-                        display: 'inline-flex',
-                        alignItems: 'center',
-                        gap: 2,
-                        minWidth: 0,
-                    }, children: [principal.kind === 'agent' ? (_jsx(AgentAvatar, { size: 22 })) : (_jsx(PrincipalAvatar, { kind: principal.kind, avatarUrl: principal.avatarUrl || undefined, alt: displayName, size: 22 })), _jsxs(Box, { sx: { display: 'grid', minWidth: 0 }, children: [_jsxs(Box, { sx: {
-                                        display: 'inline-flex',
-                                        alignItems: 'center',
-                                        gap: 1,
-                                        flexWrap: 'wrap',
-                                    }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: displayName }), principal.kind === 'personal' &&
+            }, disabled: alreadyAdded || isSaving || isReadOnly, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, px: 2, py: 2, cursor: alreadyAdded || isSaving || isReadOnly ? 'not-allowed' : 'pointer', opacity: alreadyAdded ? 0.55 : 1, borderRadius: 2, borderWidth: 1, borderStyle: "solid", borderColor: "border.default", bg: "canvas.default", hover: {
+                bg: alreadyAdded || isSaving || isReadOnly
+                    ? 'canvas.default'
+                    : 'canvas.subtle',
+            }, all: "unset", children: [_jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 2, minWidth: 0, children: [principal.kind === 'agent' ? (_jsx(AgentAvatar, { size: 22 })) : (_jsx(PrincipalAvatar, { kind: principal.kind, avatarUrl: principal.avatarUrl || undefined, alt: displayName, size: 22 })), _jsxs(Box, { display: "grid", minWidth: 0, children: [_jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, flexWrap: "wrap", children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: displayName }), principal.kind === 'personal' &&
                                             user?.uid &&
-                                            principal.uid === user.uid && (_jsx(Label, { size: "small", variant: "accent", children: "You" }))] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["@", principal.handle, principal.kind === 'team' && principal.organizationHandle && (_jsxs(Text, { as: "span", sx: { color: 'fg.muted' }, children: [' · ', "org @", principal.organizationHandle] }))] })] })] }), _jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { size: 14 }), alreadyAdded ? (_jsx(Label, { size: "small", variant: "success", children: "Added" })) : (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Add" }))] })] }, principalKey(principal.kind, principal.uid)));
+                                            principal.uid === user.uid && (_jsx(Label, { size: "small", variant: "accent", children: "You" }))] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["@", principal.handle, principal.kind === 'team' && principal.organizationHandle && (_jsxs(Text, { as: "span", sx: { color: 'fg.muted' }, children: [' · ', "org @", principal.organizationHandle] }))] })] })] }), _jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, children: [_jsx(Icon, { size: 14 }), alreadyAdded ? (_jsx(Label, { size: "small", variant: "success", children: "Added" })) : (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Add" }))] })] }, principalKey(principal.kind, principal.uid)));
     };
     const renderShareableGroup = (label, items) => {
         if (items.length === 0) {
             return null;
         }
-        return (_jsxs(Box, { sx: { display: 'grid', gap: 1 }, children: [_jsx(Text, { sx: {
+        return (_jsxs(Box, { display: "grid", gap: 1, children: [_jsx(Text, { sx: {
                         fontSize: 0,
                         color: 'fg.muted',
                         textTransform: 'uppercase',
                         letterSpacing: 0.4,
-                    }, children: label }), _jsx(Box, { sx: { display: 'grid', gap: 1 }, children: items.map(renderShareablePrincipalRow) })] }));
+                    }, children: label }), _jsx(Box, { display: "grid", gap: 1, children: items.map(renderShareablePrincipalRow) })] }));
     };
-    const content = (_jsxs(Box, { sx: { p: 3, display: 'flex', flexDirection: 'column', gap: 3 }, children: [sharingAccessMessage && (_jsxs(Box, { sx: {
-                    px: 3,
-                    py: 3,
-                    borderRadius: 2,
-                    borderWidth: 1,
-                    borderStyle: 'solid',
-                    borderColor: 'attention.muted',
-                    bg: 'attention.subtle',
-                    display: 'grid',
-                    gap: 1,
-                }, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "Sharing access is restricted" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: sharingAccessMessage })] })), _jsxs(Box, { sx: {
-                    opacity: isReadOnly ? 0.6 : 1,
-                    pointerEvents: isReadOnly ? 'none' : 'auto',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 3,
-                }, "aria-disabled": isReadOnly, children: [_jsxs(Box, { sx: {
-                            px: 3,
-                            py: 2,
-                            borderRadius: 2,
-                            borderWidth: 1,
-                            borderStyle: 'solid',
-                            borderColor: 'border.default',
-                            bg: 'canvas.subtle',
-                            display: 'flex',
-                            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:", ' ', levelLabels[selectedAccessLevel] || selectedAccessLevel] }) }), _jsx(Button, { variant: "invisible", size: "small", leadingVisual: isExpanded ? ChevronUpIcon : ChevronDownIcon, onClick: () => setIsExpanded(previous => !previous), "aria-label": isExpanded
+    const content = (_jsxs(Box, { p: 3, display: "flex", flexDirection: "column", gap: 3, children: [sharingAccessMessage && (_jsxs(Box, { px: 3, py: 3, borderRadius: 2, borderWidth: 1, borderStyle: "solid", borderColor: "attention.muted", bg: "attention.subtle", display: "grid", gap: 1, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "Sharing access is restricted" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: sharingAccessMessage })] })), _jsxs(Box, { opacity: isReadOnly ? 0.6 : 1, pointerEvents: isReadOnly ? 'none' : 'auto', display: "flex", flexDirection: "column", gap: 3, "aria-disabled": isReadOnly, children: [_jsxs(Box, { px: 3, py: 2, borderRadius: 2, borderWidth: 1, borderStyle: "solid", borderColor: "border.default", bg: "canvas.subtle", display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 2, children: [_jsx(Box, { 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, { 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:", ' ', levelLabels[selectedAccessLevel] || 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: levels.map(({ level, label }) => (_jsx(ActionList.Item, { selected: selectedAccessLevel === level, onSelect: () => setSelectedAccessLevel(level), children: label }, level))) }) })] })] }), !isExpanded && (_jsxs(Box, { sx: {
-                            px: 3,
-                            py: 2,
-                            borderRadius: 2,
-                            borderWidth: 1,
-                            borderStyle: 'solid',
-                            borderColor: 'border.default',
-                            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: {
-                                    px: 3,
-                                    py: 2,
-                                    borderRadius: 2,
-                                    borderWidth: 1,
-                                    borderStyle: 'solid',
-                                    borderColor: 'border.default',
-                                    bg: 'canvas.default',
-                                    display: 'grid',
-                                    gap: 1,
-                                }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Owner" }), ownerPrincipals.length > 0 ? (_jsx(Box, { sx: { display: 'grid' }, children: ownerPrincipals.map((ownerPrincipal, index) => (_jsx(Box, { sx: {
-                                                py: 1,
-                                                borderTopWidth: index === 0 ? 0 : 1,
-                                                borderTopStyle: 'solid',
-                                                borderColor: 'border.subtle',
-                                            }, children: _jsx(OwnerPrincipalRow, { ownerPrincipal: ownerPrincipal, cache: principalCache, showAvatarSkeleton: ownerPrincipal.kind === 'personal' &&
-                                                    Boolean(hydratingUserUids[ownerPrincipal.uid]), isPlatformAdmin: isPlatformAdmin }) }, principalKey(ownerPrincipal.kind, ownerPrincipal.uid)))) })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Owner information is not available." }))] }), _jsxs(Box, { sx: {
-                                    px: 3,
-                                    py: 2,
-                                    borderRadius: 2,
-                                    borderWidth: 1,
-                                    borderStyle: 'solid',
-                                    borderColor: 'border.default',
-                                    bg: 'canvas.default',
-                                    display: 'grid',
-                                    gap: 2,
-                                }, children: [_jsxs(Box, { sx: {
-                                            display: 'flex',
-                                            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 &&
+                                                    : 'Expand sharing details', children: isExpanded ? 'Shrink details' : 'Expand details' })] }), _jsx(ActionMenu.Overlay, { width: "small", children: _jsx(ActionList, { selectionVariant: "single", children: levels.map(({ level, label }) => (_jsx(ActionList.Item, { selected: selectedAccessLevel === level, onSelect: () => setSelectedAccessLevel(level), children: label }, level))) }) })] })] }), !isExpanded && (_jsxs(Box, { px: 3, py: 2, borderRadius: 2, borderWidth: 1, borderStyle: "solid", borderColor: "border.default", 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, { px: 3, py: 2, borderRadius: 2, borderWidth: 1, borderStyle: "solid", borderColor: "border.default", bg: "canvas.default", display: "grid", gap: 1, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Owner" }), ownerPrincipals.length > 0 ? (_jsx(Box, { display: "grid", children: ownerPrincipals.map((ownerPrincipal, index) => (_jsx(Box, { py: 1, borderTopWidth: index === 0 ? 0 : 1, borderTopStyle: "solid", borderColor: "border.subtle", children: _jsx(OwnerPrincipalRow, { ownerPrincipal: ownerPrincipal, cache: principalCache, showAvatarSkeleton: ownerPrincipal.kind === 'personal' &&
+                                                    Boolean(hydratingUserUids[ownerPrincipal.uid]), isPlatformAdmin: isPlatformAdmin }) }, principalKey(ownerPrincipal.kind, ownerPrincipal.uid)))) })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Owner information is not available." }))] }), _jsxs(Box, { px: 3, py: 2, borderRadius: 2, borderWidth: 1, borderStyle: "solid", borderColor: "border.default", bg: "canvas.default", display: "grid", gap: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 600 }, children: "Share with\u2026" }), isLoadingShareable && (_jsxs(Box, { 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 &&
                                         groupedShareable.teams.length === 0 &&
-                                        groupedShareable.agents.length === 0 ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No principals available to share with." })) : (_jsxs(Box, { sx: { display: 'grid', gap: 2 }, children: [renderShareableGroup('You', groupedShareable.self), renderShareableGroup('Other users', groupedShareable.otherUsers), renderShareableGroup('Your organizations', groupedShareable.orgs), renderShareableGroup('Your teams', groupedShareable.teams), renderShareableGroup('Agents', groupedShareable.agents)] }))] }), _jsxs(Box, { sx: {
-                                    px: 3,
-                                    py: 2,
-                                    borderRadius: 2,
-                                    borderWidth: 1,
-                                    borderStyle: 'solid',
-                                    borderColor: 'border.subtle',
-                                    bg: 'canvas.subtle',
-                                    display: 'grid',
-                                    gap: 1,
-                                }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Or search for any user, team, or organization" }), _jsxs(Box, { sx: { position: 'relative' }, ref: searchContainerRef, children: [_jsx(TextInput, { ref: searchInputRef, block: true, value: searchQuery, onChange: e => {
+                                        groupedShareable.agents.length === 0 ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No principals available to share with." })) : (_jsxs(Box, { display: "grid", gap: 2, children: [renderShareableGroup('You', groupedShareable.self), renderShareableGroup('Other users', groupedShareable.otherUsers), renderShareableGroup('Your organizations', groupedShareable.orgs), renderShareableGroup('Your teams', groupedShareable.teams), renderShareableGroup('Agents', groupedShareable.agents)] }))] }), _jsxs(Box, { px: 3, py: 2, borderRadius: 2, borderWidth: 1, borderStyle: "solid", borderColor: "border.subtle", bg: "canvas.subtle", display: "grid", gap: 1, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Or search for any user, team, or organization" }), _jsxs(Box, { position: "relative", ref: searchContainerRef, children: [_jsx(TextInput, { ref: searchInputRef, block: true, value: searchQuery, onChange: e => {
                                                     const next = e.target.value;
                                                     setSearchQuery(next);
                                                     setIsSearchOverlayOpen(next.trim().length > 0);
@@ -1376,82 +1236,14 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
                                                         e.preventDefault();
                                                         setIsSearchOverlayOpen(false);
                                                     }
-                                                }, placeholder: "Search by handle, name, or email", "aria-label": "Search principals", disabled: isSaving }), canShowSearchResults && (_jsx(Box, { sx: {
-                                                    position: 'absolute',
-                                                    top: 'calc(100% + 8px)',
-                                                    left: 0,
-                                                    right: 0,
-                                                    zIndex: 100,
-                                                    borderWidth: 1,
-                                                    borderStyle: 'solid',
-                                                    borderColor: 'border.default',
-                                                    borderRadius: 2,
-                                                    maxHeight: '220px',
-                                                    overflowY: 'auto',
-                                                    bg: 'canvas.overlay',
-                                                    boxShadow: 'shadow.medium',
-                                                }, children: isSearching ? (_jsxs(Box, { sx: {
-                                                        px: 3,
-                                                        py: 2,
-                                                        display: 'inline-flex',
-                                                        alignItems: 'center',
-                                                        gap: 2,
-                                                    }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Searching\u2026" })] })) : searchResults.length === 0 ? (_jsx(Box, { sx: { px: 3, py: 2 }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No principals found." }) })) : (_jsx(ActionList, { children: searchResults.map(result => (_jsxs(ActionList.Item, { onSelect: () => handleSearchResultSelect(result), children: [_jsx(ActionList.LeadingVisual, { children: result.kind === 'agent' ? (_jsx(AgentAvatar, { size: 18 })) : (_jsx(PrincipalAvatar, { kind: result.kind, avatarUrl: result.avatarUrl, alt: result.displayName, size: 18 })) }), _jsxs(Box, { sx: {
-                                                                    display: 'inline-flex',
-                                                                    alignItems: 'center',
-                                                                    gap: 1,
-                                                                    flexWrap: 'wrap',
-                                                                }, children: [_jsx(Text, { children: result.displayName }), result.kind === 'personal' && (_jsx(Label, { size: "small", variant: "secondary", children: result.origin ||
+                                                }, placeholder: "Search by handle, name, or email", "aria-label": "Search principals", disabled: isSaving }), canShowSearchResults && (_jsx(Box, { position: "absolute", top: "calc(100% + 8px)", left: 0, right: 0, zIndex: 100, borderWidth: 1, borderStyle: "solid", borderColor: "border.default", borderRadius: 2, maxHeight: "220px", overflowY: "auto", bg: "canvas.overlay", boxShadow: "shadow.medium", children: isSearching ? (_jsxs(Box, { px: 3, py: 2, display: "inline-flex", alignItems: "center", gap: 2, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Searching\u2026" })] })) : searchResults.length === 0 ? (_jsx(Box, { px: 3, py: 2, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No principals found." }) })) : (_jsx(ActionList, { children: searchResults.map(result => (_jsxs(ActionList.Item, { onSelect: () => handleSearchResultSelect(result), children: [_jsx(ActionList.LeadingVisual, { children: result.kind === 'agent' ? (_jsx(AgentAvatar, { size: 18 })) : (_jsx(PrincipalAvatar, { kind: result.kind, avatarUrl: result.avatarUrl, alt: result.displayName, size: 18 })) }), _jsxs(Box, { display: "inline-flex", alignItems: "center", 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 ||
-                                                                            'Datalayer' }))] }), _jsxs(ActionList.Description, { variant: "block", children: ["@", result.handle] })] }, principalKey(result.kind, result.uid)))) })) }))] })] }), _jsxs(Box, { sx: {
-                                    px: 3,
-                                    py: 2,
-                                    borderRadius: 2,
-                                    borderWidth: 1,
-                                    borderStyle: 'solid',
-                                    borderColor: 'border.default',
-                                    bg: 'canvas.default',
-                                    display: 'grid',
-                                    gap: 1,
-                                }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Access Control List (ACL)" }), _jsx(Box, { sx: {
-                                            borderWidth: 1,
-                                            borderStyle: 'solid',
-                                            borderColor: 'border.default',
-                                            borderRadius: 2,
-                                            maxHeight: '220px',
-                                            overflowY: 'auto',
-                                            bg: 'canvas.subtle',
-                                        }, children: aclEntries.length === 0 ? (_jsx(Box, { sx: { px: 3, py: 2 }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No principals shared yet." }) })) : (_jsx(Box, { sx: { display: 'grid' }, children: aclEntries.map(entry => (_jsxs(Box, { sx: {
-                                                    px: 3,
-                                                    py: 2,
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    justifyContent: 'space-between',
-                                                    gap: 2,
-                                                    borderTopWidth: 1,
-                                                    borderTopStyle: 'solid',
-                                                    borderColor: 'border.subtle',
+                                                                            'Datalayer' }))] }), _jsxs(ActionList.Description, { variant: "block", children: ["@", result.handle] })] }, principalKey(result.kind, result.uid)))) })) }))] })] }), _jsxs(Box, { px: 3, py: 2, borderRadius: 2, borderWidth: 1, borderStyle: "solid", borderColor: "border.default", bg: "canvas.default", display: "grid", gap: 1, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Access Control List (ACL)" }), _jsx(Box, { borderWidth: 1, borderStyle: "solid", borderColor: "border.default", borderRadius: 2, maxHeight: "220px", overflowY: "auto", bg: "canvas.subtle", children: aclEntries.length === 0 ? (_jsx(Box, { px: 3, py: 2, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No principals shared yet." }) })) : (_jsx(Box, { display: "grid", children: aclEntries.map(entry => (_jsxs(Box, { px: 3, py: 2, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, borderTopWidth: 1, borderTopStyle: "solid", borderColor: "border.subtle", sx: {
                                                     '&:first-of-type': { borderTop: 'none' },
                                                 }, children: [_jsx(AccessPrincipalRow, { entry: entry, cache: principalCache, showAvatarSkeleton: entry.kind === 'personal' &&
-                                                            Boolean(hydratingUserUids[entry.uid]), isPlatformAdmin: isPlatformAdmin }), _jsx(Box, { sx: {
-                                                            display: 'flex',
-                                                            flexWrap: 'wrap',
-                                                            gap: 1,
-                                                            justifyContent: 'flex-end',
-                                                        }, children: entry.levels.map(level => (_jsx(Label, { size: "small", variant: "secondary", children: levelLabels[level] || level }, level))) }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => removePrincipal(entry.kind, entry.uid), disabled: isSaving, children: "Remove" })] }, principalKey(entry.kind, entry.uid)))) })) })] })] }))] }), _jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'flex-end',
-                    alignItems: 'center',
-                    gap: 2,
-                }, children: [isSaving && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Saving\u2026" })] })), displayMode === 'dialog' && (_jsx(Button, { onClick: onClose, disabled: isSaving, children: "Close" }))] }), isLoading && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Loading current sharing settings\u2026" }))] }));
+                                                            Boolean(hydratingUserUids[entry.uid]), isPlatformAdmin: isPlatformAdmin }), _jsx(Box, { display: "flex", flexWrap: "wrap", gap: 1, justifyContent: "flex-end", children: entry.levels.map(level => (_jsx(Label, { size: "small", variant: "secondary", children: levelLabels[level] || level }, level))) }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => removePrincipal(entry.kind, entry.uid), disabled: isSaving, children: "Remove" })] }, principalKey(entry.kind, entry.uid)))) })) })] })] }))] }), _jsxs(Box, { display: "flex", justifyContent: "flex-end", alignItems: "center", gap: 2, children: [isSaving && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Saving\u2026" })] })), displayMode === 'dialog' && (_jsx(Button, { onClick: onClose, disabled: isSaving, children: "Close" }))] }), isLoading && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Loading current sharing settings\u2026" }))] }));
     if (displayMode === 'inline') {
-        return (_jsx(Box, { sx: {
-                borderWidth: 1,
-                borderStyle: 'solid',
-                borderColor: 'border.default',
-                borderRadius: 2,
-                bg: 'canvas.default',
-            }, children: content }));
+        return (_jsx(Box, { borderWidth: 1, borderStyle: "solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.default", children: content }));
     }
     return (_jsx(Dialog, { title: `Share ${resourceLabel.toLowerCase()}`, onClose: onClose, 
         // Wider than any preset — Primer's `xlarge` stops at 640px, and the

package/lib/components/sharing/SharingEditor.js

@@ -45,6 +45,6 @@ export function SharingEditor({ value, onChange, label = 'Sharing', caption = 'E
                     catch (reason) {
                         setError(reason?.message || 'Invalid JSON');
                     }
-                }, sx: { width: '100%', fontFamily: 'mono' } }), _jsx(FormControl.Caption, { children: caption }), error && (_jsx(Box, { sx: { mt: 1 }, children: _jsx(Text, { sx: { color: 'danger.fg', fontSize: 1 }, children: error }) }))] }));
+                }, sx: { width: '100%', fontFamily: 'mono' } }), _jsx(FormControl.Caption, { children: caption }), error && (_jsx(Box, { mt: 1, children: _jsx(Text, { sx: { color: 'danger.fg', fontSize: 1 }, children: error }) }))] }));
 }
 export default SharingEditor;

package/lib/components/spaces/SpaceDetailsOverlay.js

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

package/lib/components/spaces/SpaceDisplay.js

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

package/lib/components/storage/ContentsBrowser.js

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

package/lib/components/storage/ContentsTable.js

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

package/lib/components/students/StudentResultCircle.js

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