@datalayer/core 1.2.18 → 1.2.20

package/lib/components/principal/PrincipalHoverCard.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { AnchoredOverlay, Box, ThemeProvider } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { AnchoredOverlay, 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;
@@ -30,23 +31,19 @@ export function PrincipalHoverCard({ children, className, ...principal }) {
             onMouseEnter: show,
             onMouseLeave: hide,
             preventFocusOnOpen: true,
-        }, renderAnchor: anchorProps => (_jsx(Box, { ...anchorProps, className: [className, anchorProps.className]
+        }, renderAnchor: anchorProps => (_jsx(Box
+        // Primer's anchor props, as the record of props Box takes.
+        , { ...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 }) }) }));
+                .join(' '), onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, 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.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { ActionList, ActionMenu, Box, Button, Text, ThemeProvider, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ActionList, ActionMenu, 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';
@@ -198,38 +199,12 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
         color: 'accent.fg',
         fontWeight: 'semibold',
     };
-    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',
-                            px: 2,
-                            py: 2,
-                            fontSize: 0,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            gap: 2,
+    return (_jsx(ThemeProvider, { children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: showClosedBorder ? (_jsxs(Box, { as: "button", type: "button", "aria-label": "Switch principal", width: fullWidth ? '100%' : 'auto', boxSizing: "border-box", px: 2, py: 2, fontSize: 0, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, bg: "canvas.subtle", border: "1px solid", borderColor: "border.default", borderRadius: 2, cursor: "pointer", textAlign: "left", transition: "background-color 120ms ease", hover: { bg: 'canvas.subtle' }, focusVisible: {
                             bg: 'canvas.subtle',
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            borderRadius: 2,
-                            cursor: 'pointer',
-                            textAlign: 'left',
-                            transition: 'background-color 120ms ease',
-                            ':hover': {
-                                bg: 'canvas.subtle',
-                            },
-                            ':focus-visible': {
-                                bg: 'canvas.subtle',
-                                outline: '2px solid',
-                                outlineColor: 'accent.emphasis',
-                                outlineOffset: '2px',
-                            },
-                        }, children: [_jsx(Box, { sx: {
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                    color: 'fg.muted',
-                                    flexShrink: 0,
-                                }, children: selectedPrincipalKind === 'organization' ? (_jsx(PeopleIcon, { size: 16 })) : selectedPrincipalKind === 'team' ? (_jsx(OrganizationIcon, { size: 16 })) : (_jsx(PersonIcon, { size: 16 })) }), _jsx(Box, { sx: { minWidth: 0, flex: 1 }, children: _jsx(Text, { sx: {
+                            outline: '2px solid',
+                            outlineColor: 'accent.emphasis',
+                            outlineOffset: '2px',
+                        }, children: [_jsx(Box, { display: "inline-flex", alignItems: "center", color: "fg.muted", flexShrink: 0, children: selectedPrincipalKind === 'organization' ? (_jsx(PeopleIcon, { size: 16 })) : selectedPrincipalKind === 'team' ? (_jsx(OrganizationIcon, { size: 16 })) : (_jsx(PersonIcon, { size: 16 })) }), _jsx(Box, { minWidth: 0, flex: 1, children: _jsx(Text, { sx: {
                                         display: 'block',
                                         color: 'accent.fg',
                                         fontWeight: 'semibold',
@@ -238,35 +213,10 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                         overflow: 'hidden',
                                         textOverflow: 'ellipsis',
                                         maxWidth: '100%',
-                                    }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(Box, { sx: {
-                                    flexShrink: 0,
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                }, children: _jsx(AdminLabel, {}) })) : null, _jsx(Box, { sx: {
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                    color: 'fg.muted',
-                                    flexShrink: 0,
-                                    ml: isPlatformAdmin && isCurrentUserPrincipal ? 1 : 0,
-                                }, children: _jsx(TriangleDownIcon, { size: 12 }) })] })) : (_jsx(Button, { variant: "invisible", size: "small", "aria-label": "Switch principal", trailingVisual: TriangleDownIcon, sx: {
+                                    }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(Box, { flexShrink: 0, display: "inline-flex", alignItems: "center", children: _jsx(AdminLabel, {}) })) : null, _jsx(Box, { display: "inline-flex", alignItems: "center", color: "fg.muted", flexShrink: 0, ml: isPlatformAdmin && isCurrentUserPrincipal ? 1 : 0, children: _jsx(TriangleDownIcon, { size: 12 }) })] })) : (_jsx(Button, { variant: "invisible", size: "small", "aria-label": "Switch principal", trailingVisual: TriangleDownIcon, sx: {
                             maxWidth: fullWidth ? '100%' : ['200px', '260px', '360px'],
                             width: fullWidth ? '100%' : 'auto',
-                        }, children: _jsxs(Box, { sx: {
-                                display: 'inline-flex',
-                                alignItems: 'center',
-                                gap: 1,
-                                minWidth: 0,
-                            }, children: [_jsx(Box, { sx: {
-                                        display: 'inline-flex',
-                                        alignItems: 'center',
-                                        color: 'fg.muted',
-                                        flexShrink: 0,
-                                    }, children: selectedPrincipalKind === 'organization' ? (_jsx(PeopleIcon, { size: 16 })) : selectedPrincipalKind === 'team' ? (_jsx(OrganizationIcon, { size: 16 })) : (_jsx(PersonIcon, { size: 16 })) }), _jsx(Box, { sx: {
-                                        minWidth: 0,
-                                        overflow: 'hidden',
-                                        textOverflow: 'ellipsis',
-                                        whiteSpace: 'nowrap',
-                                    }, children: _jsx(Text, { sx: {
+                        }, children: _jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, minWidth: 0, children: [_jsx(Box, { display: "inline-flex", alignItems: "center", color: "fg.muted", flexShrink: 0, children: selectedPrincipalKind === 'organization' ? (_jsx(PeopleIcon, { size: 16 })) : selectedPrincipalKind === 'team' ? (_jsx(OrganizationIcon, { size: 16 })) : (_jsx(PersonIcon, { size: 16 })) }), _jsx(Box, { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: _jsx(Text, { sx: {
                                             color: 'accent.fg',
                                             fontWeight: 'semibold',
                                         }, 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: () => {
@@ -276,16 +226,10 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                             if (personalUid && personalHandle) {
                                                 selectUser(personalUid, personalHandle);
                                             }
-                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(UserAvatar, { avatarUrl: user?.avatarUrl, avatarIcon: user?.avatarIcon, size: 16, square: false, ring: true }) }), _jsxs(Box, { as: "span", sx: {
-                                                    display: 'block',
-                                                    minWidth: 0,
-                                                    overflow: 'hidden',
-                                                    textOverflow: 'ellipsis',
-                                                    whiteSpace: 'nowrap',
-                                                }, children: [String(user?.friendlyName ||
+                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(UserAvatar, { avatarUrl: user?.avatarUrl, avatar: user?.avatarIcon, size: 16, square: false, ring: true }) }), _jsxs(Box, { as: "span", display: "block", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", 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(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) => {
+                                                        'Me').trim(), _jsxs(Box, { as: "span", 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;
@@ -298,17 +242,11 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                                 if (organizationUid && organization.handle) {
                                                     selectOrganization(organizationUid, organization.handle);
                                                 }
-                                            }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PeopleIcon, {}) }), _jsxs(Box, { as: "span", title: displayHandleText(organization.handle), sx: {
-                                                        display: 'block',
-                                                        minWidth: 0,
-                                                        overflow: 'hidden',
-                                                        textOverflow: 'ellipsis',
-                                                        whiteSpace: 'nowrap',
-                                                    }, children: [String(organization?.display_name ||
+                                            }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PeopleIcon, {}) }), _jsxs(Box, { as: "span", title: displayHandleText(organization.handle), display: "block", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: [String(organization?.display_name ||
                                                             organization?.displayName ||
                                                             organization?.name ||
                                                             organization?.handle ||
-                                                            'Organization').trim(), _jsxs(Box, { as: "span", sx: { color: 'fg.muted' }, children: [' ', "\u00B7 ", _jsx(DisplayHandle, { handle: organization.handle })] })] })] }, organizationUid));
+                                                            'Organization').trim(), _jsxs(Box, { as: "span", color: "fg.muted", children: [' ', "\u00B7 ", _jsx(DisplayHandle, { handle: organization.handle })] })] })] }, organizationUid));
                                     }))] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Teams" }), teams.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No teams" })) : (teams.map(team => {
                                         const isCurrentTeamPrincipal = selectedPrincipalKind === 'team' &&
                                             selectedPrincipalUid === team.uid;
@@ -320,16 +258,10 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                                     return;
                                                 }
                                                 selectTeam(team, orgHandle);
-                                            }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(OrganizationIcon, {}) }), _jsxs(Box, { as: "span", title: `${displayHandleText(orgHandle)}/${displayHandleText(team.handle, { withAt: false })}`, sx: {
-                                                        display: 'block',
-                                                        minWidth: 0,
-                                                        overflow: 'hidden',
-                                                        textOverflow: 'ellipsis',
-                                                        whiteSpace: 'nowrap',
-                                                    }, children: [String(team.displayName ||
+                                            }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(OrganizationIcon, {}) }), _jsxs(Box, { as: "span", title: `${displayHandleText(orgHandle)}/${displayHandleText(team.handle, { withAt: false })}`, display: "block", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: [String(team.displayName ||
                                                             team.name ||
                                                             team.handle ||
-                                                            'Team').trim(), _jsxs(Box, { as: "span", sx: { color: 'fg.muted' }, children: [' ', "\u00B7 ", _jsx(DisplayHandle, { handle: orgHandle }), "/", _jsx(DisplayHandle, { handle: team.handle, withAt: false })] })] })] }, team.uid));
+                                                            'Team').trim(), _jsxs(Box, { as: "span", color: "fg.muted", children: [' ', "\u00B7 ", _jsx(DisplayHandle, { handle: orgHandle }), "/", _jsx(DisplayHandle, { handle: team.handle, withAt: false })] })] })] }, team.uid));
                                     }))] })] }) })] }) }));
 }
 export default PrincipalSwitcherMenu;

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;