@datalayer/core 1.0.21 → 1.0.22

package/lib/components/sharing/ShareAccessComponent.js

@@ -0,0 +1,1368 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { KeyIcon, PersonIcon, OrganizationIcon, PeopleIcon, } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+import { ActionList, ActionMenu, Button, Dialog, Label, Spinner, Text, TextInput, } from '@primer/react';
+import { useToast } from '../../hooks/index.js';
+import { useCoreStore, useIAMStore } from '../../state/index.js';
+import { PrincipalAvatar } from '../principal/PrincipalAvatar.js';
+import { PrincipalBadge } from '../principal/PrincipalBadge.js';
+// ---------------------------------------------------------------------------
+// Constants.
+// ---------------------------------------------------------------------------
+const ACCESS_LEVELS = ['view', 'update', 'execute'];
+const DEFAULT_PRINCIPAL_KINDS = [
+    'user',
+    'team',
+    'organization',
+];
+const ACCESS_LEVEL_LABELS = {
+    view: 'Viewer',
+    update: 'Editor',
+    execute: 'Executor',
+};
+// ---------------------------------------------------------------------------
+// String / payload helpers.
+// ---------------------------------------------------------------------------
+function pickFirstString(...values) {
+    for (const value of values) {
+        if (typeof value === 'string' && value.trim()) {
+            return value.trim();
+        }
+    }
+    return '';
+}
+function normalizePrincipalKind(kindRaw) {
+    const kind = (kindRaw || '').trim().toLowerCase();
+    if (kind === 'team') {
+        return 'team';
+    }
+    if (kind === 'organization' || kind === 'org') {
+        return 'organization';
+    }
+    return 'user';
+}
+function toTitleCase(value) {
+    if (!value) {
+        return value;
+    }
+    return value.charAt(0).toUpperCase() + value.slice(1);
+}
+function normalizeUserOrigin(originRaw) {
+    const value = (originRaw || '').trim();
+    if (!value) {
+        return undefined;
+    }
+    const lower = value.toLowerCase();
+    if (lower === 'datalayer') {
+        return 'Datalayer';
+    }
+    const extPrefix = 'urn:dla:iam:ext::';
+    if (lower.startsWith(extPrefix)) {
+        const suffix = value.slice(extPrefix.length);
+        const provider = suffix.split(':')[0]?.trim();
+        if (!provider) {
+            return 'External';
+        }
+        return toTitleCase(provider.toLowerCase());
+    }
+    return toTitleCase(lower);
+}
+function ensurePrincipalDisplayName(kind, ...candidates) {
+    for (const candidate of candidates) {
+        if (typeof candidate === 'string' && candidate.trim()) {
+            return candidate.trim();
+        }
+    }
+    return kind === 'organization' ? 'Organization' : 'Principal';
+}
+function isSharingAuthorizationMessage(message) {
+    const normalized = (message || '').trim().toLowerCase();
+    return normalized.includes('not authorized');
+}
+function principalKey(kind, uid) {
+    return `${kind}:${uid.toLowerCase()}`;
+}
+// ---------------------------------------------------------------------------
+// Owner extraction (preserves all current fallbacks).
+// ---------------------------------------------------------------------------
+function extractOwnerPrincipals(payload) {
+    const ownersFromSharing = Array.isArray(payload?.sharing?.owners)
+        ? payload.sharing.owners
+        : [];
+    const ownersFromSpaceField = [
+        ...(Array.isArray(payload?.space?.shared_owner_user_uids_ss)
+            ? payload.space.shared_owner_user_uids_ss
+            : []),
+        ...(Array.isArray(payload?.space?.shared_ower_user_uids_ss)
+            ? payload.space.shared_ower_user_uids_ss
+            : []),
+    ];
+    const ownerPayload = payload?.owner ||
+        payload?.data?.owner ||
+        payload?.item?.owner ||
+        payload?.space?.owner ||
+        payload?.notebook?.owner ||
+        payload?.lexical?.owner ||
+        payload?.document?.owner ||
+        payload?.cell?.owner ||
+        payload?.resource?.owner ||
+        payload?.sharing?.owner ||
+        {};
+    const ownerUid = pickFirstString(ownerPayload?.uid, ownerPayload?.owner_uid, ownerPayload?.ownerUid, ownerPayload?.id, payload?.owner_uid, payload?.ownerUid);
+    const ownerHandle = pickFirstString(ownerPayload?.handle_s, ownerPayload?.handle, ownerPayload?.owner_handle, ownerPayload?.ownerHandle, payload?.owner_handle, payload?.ownerHandle);
+    const kindFromOwnerPayload = normalizePrincipalKind(pickFirstString(ownerPayload?.kind, ownerPayload?.type, ownerPayload?.principal_kind, ownerPayload?.principalKind, payload?.owner_kind, payload?.ownerKind, payload?.owner_type, payload?.ownerType));
+    const accountHandle = pickFirstString(ownerPayload?.organization_handle_s, ownerPayload?.organizationHandle, ownerPayload?.organization_handle, payload?.space?.organization_handle_s, payload?.space?.organizationHandle, payload?.space?.organization_handle);
+    const firstName = pickFirstString(ownerPayload?.first_name_t, ownerPayload?.firstName);
+    const lastName = pickFirstString(ownerPayload?.last_name_t, ownerPayload?.lastName);
+    const fullName = `${firstName} ${lastName}`.trim();
+    const displayName = fullName ||
+        pickFirstString(ownerPayload?.display_name_t, ownerPayload?.display_name, ownerPayload?.name_t, ownerPayload?.name, ownerHandle, ownerUid);
+    const origin = normalizeUserOrigin(pickFirstString(ownerPayload?.origin, ownerPayload?.origin_s, ownerPayload?.origin_t));
+    const fallbackOwner = ownerUid || ownerHandle
+        ? {
+            kind: kindFromOwnerPayload,
+            uid: ownerUid || ownerHandle,
+            handle: ownerHandle || accountHandle || ownerUid,
+            displayName,
+            avatarUrl: pickFirstString(ownerPayload?.avatar_url_s, ownerPayload?.avatarUrl, ownerPayload?.avatar_url, payload?.owner_avatar_url, payload?.owner_avatar_url_s, payload?.ownerAvatarUrl) || undefined,
+            origin,
+            accountHandle: accountHandle || undefined,
+        }
+        : null;
+    const ownersFromSharingMapped = ownersFromSharing
+        .map((entry) => {
+        if (typeof entry === 'string') {
+            const uid = entry.trim();
+            return uid
+                ? { kind: 'user', uid, handle: uid, displayName: uid }
+                : null;
+        }
+        const uid = pickFirstString(entry?.uid, entry?.owner_uid, entry?.id);
+        if (!uid) {
+            return null;
+        }
+        const handle = pickFirstString(entry?.handle_s, entry?.handle, uid);
+        const ownerKind = normalizePrincipalKind(pickFirstString(entry?.kind, entry?.type, entry?.principal_kind));
+        const ownerOrigin = normalizeUserOrigin(pickFirstString(entry?.origin, entry?.origin_s, entry?.origin_t));
+        const ownerDisplayName = pickFirstString(entry?.display_name_t, entry?.display_name, entry?.name_t, entry?.name, handle, uid) || uid;
+        const ownerAvatarUrl = pickFirstString(entry?.avatar_url_s, entry?.avatarUrl, entry?.avatar_url) || undefined;
+        return {
+            kind: ownerKind,
+            uid,
+            handle,
+            displayName: ownerDisplayName,
+            avatarUrl: ownerAvatarUrl,
+            origin: ownerOrigin,
+            accountHandle: pickFirstString(entry?.organization_handle_s, entry?.organization_handle, entry?.organizationHandle) || undefined,
+        };
+    })
+        .filter(Boolean);
+    const ownersFromSpaceMapped = ownersFromSpaceField
+        .map((uid) => {
+        if (typeof uid !== 'string' || !uid.trim()) {
+            return null;
+        }
+        const normalizedUid = uid.trim();
+        return {
+            kind: 'user',
+            uid: normalizedUid,
+            handle: normalizedUid,
+            displayName: normalizedUid,
+        };
+    })
+        .filter(Boolean);
+    const allOwners = [
+        ...ownersFromSharingMapped,
+        ...ownersFromSpaceMapped,
+        ...(fallbackOwner ? [fallbackOwner] : []),
+    ];
+    const deduped = new Map();
+    allOwners.forEach(owner => {
+        const key = principalKey(owner.kind, owner.uid);
+        if (!deduped.has(key)) {
+            deduped.set(key, owner);
+        }
+    });
+    return Array.from(deduped.values());
+}
+// ---------------------------------------------------------------------------
+// AccessByLevel helpers.
+// ---------------------------------------------------------------------------
+function emptyAccessByLevel() {
+    return {
+        view: { userUids: [], teamUids: [], organizationUids: [] },
+        update: { userUids: [], teamUids: [], organizationUids: [] },
+        execute: { userUids: [], teamUids: [], organizationUids: [] },
+    };
+}
+function bucketFor(kind) {
+    return kind === 'user'
+        ? 'userUids'
+        : kind === 'team'
+            ? 'teamUids'
+            : 'organizationUids';
+}
+function hasPrincipal(state, level, kind, uid) {
+    const lower = uid.toLowerCase();
+    return state[level][bucketFor(kind)].some(value => value.toLowerCase() === lower);
+}
+function withPrincipalAdded(state, level, kind, uid) {
+    if (hasPrincipal(state, level, kind, uid)) {
+        return state;
+    }
+    const bucket = bucketFor(kind);
+    return {
+        ...state,
+        [level]: {
+            ...state[level],
+            [bucket]: [...state[level][bucket], uid],
+        },
+    };
+}
+function withPrincipalRemoved(state, kind, uid) {
+    const lower = uid.toLowerCase();
+    const bucket = bucketFor(kind);
+    const next = {
+        view: { ...state.view },
+        update: { ...state.update },
+        execute: { ...state.execute },
+    };
+    for (const level of ACCESS_LEVELS) {
+        next[level][bucket] = next[level][bucket].filter(value => value.toLowerCase() !== lower);
+    }
+    return next;
+}
+function buildAclEntries(state, principalKinds) {
+    const allowed = new Set(principalKinds);
+    const byPrincipal = new Map();
+    const upsert = (kind, uid, level) => {
+        if (!allowed.has(kind)) {
+            return;
+        }
+        const key = principalKey(kind, uid);
+        const existing = byPrincipal.get(key);
+        if (!existing) {
+            byPrincipal.set(key, { kind, uid, levels: [level] });
+            return;
+        }
+        if (!existing.levels.includes(level)) {
+            existing.levels.push(level);
+        }
+    };
+    for (const level of ACCESS_LEVELS) {
+        state[level].userUids.forEach(uid => upsert('user', uid, level));
+        state[level].teamUids.forEach(uid => upsert('team', uid, level));
+        state[level].organizationUids.forEach(uid => upsert('organization', uid, level));
+    }
+    return Array.from(byPrincipal.values()).sort((a, b) => {
+        if (a.kind !== b.kind) {
+            return a.kind.localeCompare(b.kind);
+        }
+        return a.uid.localeCompare(b.uid);
+    });
+}
+function hydrateAccessFromSharing(sharing) {
+    const access = sharing.access || {};
+    const view = access.view || {};
+    const update = access.update || {};
+    const execute = access.execute || {};
+    return {
+        view: {
+            userUids: [...(view.userUids || [])],
+            teamUids: [...(view.teamUids || [])],
+            organizationUids: [...(view.organizationUids || [])],
+        },
+        update: {
+            userUids: [...(update.userUids || [])],
+            teamUids: [...(update.teamUids || [])],
+            organizationUids: [...(update.organizationUids || [])],
+        },
+        execute: {
+            userUids: [...(execute.userUids || [])],
+            teamUids: [...(execute.teamUids || [])],
+            organizationUids: [...(execute.organizationUids || [])],
+        },
+    };
+}
+// ---------------------------------------------------------------------------
+// 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',
+            '@keyframes avatarShimmerAcl': {
+                '0%': { backgroundPosition: '100% 0' },
+                '100%': { backgroundPosition: '-100% 0' },
+            },
+        } }));
+}
+function OwnerPrincipalRow({ ownerPrincipal, cache, showAvatarSkeleton = false, isPlatformAdmin, }) {
+    const entry = cache[principalKey(ownerPrincipal.kind, ownerPrincipal.uid)] || {};
+    const cachedHandle = entry.handle;
+    const safeCachedHandle = cachedHandle && cachedHandle !== ownerPrincipal.uid ? cachedHandle : '';
+    const safeOwnerHandle = ownerPrincipal.handle && ownerPrincipal.handle !== ownerPrincipal.uid
+        ? ownerPrincipal.handle
+        : '';
+    const resolvedHandle = safeCachedHandle || safeOwnerHandle || ownerPrincipal.accountHandle;
+    const resolvedAccountHandle = entry.accountHandle || ownerPrincipal.accountHandle;
+    const resolvedDisplayName = ensurePrincipalDisplayName(ownerPrincipal.kind, ownerPrincipal.displayName, entry.displayName, resolvedHandle, ownerPrincipal.handle, ownerPrincipal.accountHandle, ownerPrincipal.uid);
+    const resolvedAvatarUrl = ownerPrincipal.avatarUrl || entry.avatarUrl;
+    const resolvedOrigin = ownerPrincipal.origin ||
+        entry.origin ||
+        (ownerPrincipal.kind === 'user' ? '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: {
+                kind: ownerPrincipal.kind,
+                uid: ownerPrincipal.uid,
+                displayName: resolvedDisplayName,
+                handle: resolvedHandle,
+                accountHandle: resolvedAccountHandle,
+                avatarUrl: resolvedAvatarUrl,
+                origin: resolvedOrigin,
+            }, showPrincipalLabel: false, showApplyingToText: false, showOriginLabel: ownerPrincipal.kind === 'user', isAdmin: isPlatformAdmin, sx: { px: 0, py: 0, border: 'none', bg: 'transparent' } })) }));
+}
+function AccessPrincipalRow({ entry, cache, showAvatarSkeleton = false, isPlatformAdmin, }) {
+    const cached = cache[principalKey(entry.kind, entry.uid)] || {};
+    const cachedHandle = cached.handle;
+    const safeCachedHandle = cachedHandle && cachedHandle !== entry.uid ? cachedHandle : '';
+    const resolvedHandle = safeCachedHandle || cached.accountHandle;
+    const resolvedDisplayName = ensurePrincipalDisplayName(entry.kind, cached.displayName, 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 })] })) : (_jsx(PrincipalBadge, { principal: {
+                kind: entry.kind,
+                uid: entry.uid,
+                displayName: resolvedDisplayName,
+                handle: resolvedHandle,
+                accountHandle: cached.accountHandle,
+                avatarUrl: cached.avatarUrl,
+                origin: cached.origin || 'Datalayer',
+            }, showPrincipalLabel: false, showApplyingToText: false, showOriginLabel: entry.kind === 'user', isAdmin: isPlatformAdmin, sx: { px: 0, py: 0, border: 'none', bg: 'transparent' } })) }));
+}
+// ---------------------------------------------------------------------------
+// Main component.
+// ---------------------------------------------------------------------------
+export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resourceName, resourceDescription: _resourceDescription, onSharingAccessRestrictedChange, defaultAccessLevel = 'view', principalKinds = DEFAULT_PRINCIPAL_KINDS, displayMode = 'dialog', onClose, }) {
+    void _resourceDescription;
+    const { token, user } = useIAMStore();
+    const { configuration } = useCoreStore();
+    const { enqueueToast } = useToast();
+    const isPlatformAdmin = Boolean(Array.isArray(user?.roles) && user.roles.includes('platform_admin'));
+    // ----- State -----
+    const [isLoading, setIsLoading] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+    const [selectedAccessLevel, setSelectedAccessLevel] = useState(defaultAccessLevel);
+    const [access, setAccess] = useState(emptyAccessByLevel());
+    const [ownerPrincipals, setOwnerPrincipals] = useState([]);
+    const [shareablePrincipals, setShareablePrincipals] = useState([]);
+    const [isLoadingShareable, setIsLoadingShareable] = useState(false);
+    const [principalCache, setPrincipalCache] = useState({});
+    const [hydratingUserUids, setHydratingUserUids] = useState({});
+    const [searchQuery, setSearchQuery] = useState('');
+    const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
+    const [searchResults, setSearchResults] = useState([]);
+    const [isSearching, setIsSearching] = useState(false);
+    const [isSearchOverlayOpen, setIsSearchOverlayOpen] = useState(false);
+    const [sharingAccessMessage, setSharingAccessMessage] = useState(null);
+    const [isSharingAccessConfirmed, setIsSharingAccessConfirmed] = useState(false);
+    // ----- Refs -----
+    const hasLoadedForOpenRef = useRef(false);
+    const hasHydratedSharingRef = useRef(false);
+    const lastSavedSharingRef = useRef(null);
+    const autoSaveTimerRef = useRef(null);
+    const activeSearchRequestRef = useRef(0);
+    const searchContainerRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const userHydrationMissesRef = useRef(new Set());
+    const enqueueToastRef = useRef(enqueueToast);
+    useEffect(() => {
+        enqueueToastRef.current = enqueueToast;
+    }, [enqueueToast]);
+    // ----- Notify caller about restricted access state -----
+    useEffect(() => {
+        if (!onSharingAccessRestrictedChange) {
+            return;
+        }
+        const restricted = !isSharingAccessConfirmed || Boolean(sharingAccessMessage);
+        onSharingAccessRestrictedChange(restricted, sharingAccessMessage || undefined);
+    }, [
+        isSharingAccessConfirmed,
+        sharingAccessMessage,
+        onSharingAccessRestrictedChange,
+    ]);
+    // ----- Derived -----
+    const canRequest = Boolean(requestUrl && token);
+    const canSearchPrincipals = Boolean(configuration?.iamRunUrl && token);
+    const iamRunUrl = configuration?.iamRunUrl;
+    const principalKindsSet = useMemo(() => new Set(principalKinds), [principalKinds]);
+    const principalKindsKey = useMemo(() => [...principalKinds].sort().join('|'), [principalKinds]);
+    const aclEntries = useMemo(() => buildAclEntries(access, principalKinds), [access, principalKinds]);
+    const normalizedSearch = searchQuery.trim();
+    const normalizedDebouncedSearch = debouncedSearchQuery.trim();
+    const canShowSearchResults = isSearchOverlayOpen && normalizedSearch.length > 0;
+    // ----- Cache mutators (single consolidated record) -----
+    const mergePrincipalCacheEntry = useCallback((kind, uid, patch) => {
+        if (!uid) {
+            return;
+        }
+        const key = principalKey(kind, uid);
+        setPrincipalCache(prev => {
+            const existing = prev[key] || {};
+            const merged = { ...existing };
+            let changed = false;
+            Object.keys(patch).forEach(field => {
+                const value = patch[field];
+                if (typeof value === 'string') {
+                    const trimmed = value.trim();
+                    if (trimmed && existing[field] !== trimmed) {
+                        merged[field] = trimmed;
+                        changed = true;
+                    }
+                }
+            });
+            return changed ? { ...prev, [key]: merged } : prev;
+        });
+    }, []);
+    // ----- Reset on close / load on open -----
+    useEffect(() => {
+        if (isOpen) {
+            setSelectedAccessLevel(defaultAccessLevel);
+        }
+    }, [isOpen, defaultAccessLevel]);
+    useEffect(() => {
+        if (!isOpen) {
+            hasLoadedForOpenRef.current = false;
+            hasHydratedSharingRef.current = false;
+            lastSavedSharingRef.current = null;
+            if (autoSaveTimerRef.current) {
+                clearTimeout(autoSaveTimerRef.current);
+                autoSaveTimerRef.current = null;
+            }
+            setSearchQuery('');
+            setIsSearchOverlayOpen(false);
+            setSearchResults([]);
+            setIsSearching(false);
+            setSharingAccessMessage(null);
+            setIsSharingAccessConfirmed(false);
+            setPrincipalCache({});
+            setOwnerPrincipals([]);
+            setShareablePrincipals([]);
+            setHydratingUserUids({});
+            userHydrationMissesRef.current = new Set();
+            return;
+        }
+        if (!canRequest || !requestUrl) {
+            setIsLoading(false);
+            setIsSharingAccessConfirmed(false);
+            return;
+        }
+        if (hasLoadedForOpenRef.current) {
+            return;
+        }
+        hasLoadedForOpenRef.current = true;
+        let cancelled = false;
+        const run = async () => {
+            setIsLoading(true);
+            setIsSharingAccessConfirmed(false);
+            setSharingAccessMessage(null);
+            try {
+                const response = await fetch(requestUrl, {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        Authorization: `Bearer ${token}`,
+                    },
+                });
+                const payload = await response.json();
+                const message = payload?.detail ||
+                    payload?.message ||
+                    `Unable to load ${resourceLabel.toLowerCase()} sharing.`;
+                if (payload?.success === false) {
+                    if (!cancelled && isSharingAuthorizationMessage(message)) {
+                        setSharingAccessMessage(message);
+                        setIsSharingAccessConfirmed(true);
+                        setAccess(emptyAccessByLevel());
+                        setOwnerPrincipals([]);
+                        return;
+                    }
+                    throw new Error(message);
+                }
+                if (!response.ok) {
+                    if (response.status === 403 ||
+                        isSharingAuthorizationMessage(message)) {
+                        if (!cancelled) {
+                            setSharingAccessMessage(message);
+                            setIsSharingAccessConfirmed(true);
+                            setAccess(emptyAccessByLevel());
+                            setOwnerPrincipals([]);
+                        }
+                        return;
+                    }
+                    throw new Error(message);
+                }
+                if (cancelled) {
+                    return;
+                }
+                const sharing = (payload?.sharing || {});
+                const owners = extractOwnerPrincipals(payload);
+                const hydrated = hydrateAccessFromSharing(sharing);
+                setOwnerPrincipals(owners);
+                owners.forEach(owner => {
+                    mergePrincipalCacheEntry(owner.kind, owner.uid, {
+                        displayName: owner.displayName || owner.handle || owner.uid,
+                        handle: owner.handle || owner.uid,
+                        avatarUrl: owner.avatarUrl,
+                        accountHandle: owner.accountHandle,
+                        origin: owner.kind === 'user' ? owner.origin : undefined,
+                    });
+                });
+                setAccess(hydrated);
+                lastSavedSharingRef.current = JSON.stringify(hydrated);
+                hasHydratedSharingRef.current = true;
+                setIsSharingAccessConfirmed(true);
+            }
+            catch (error) {
+                if (cancelled) {
+                    return;
+                }
+                const message = error instanceof Error
+                    ? error.message
+                    : `Unable to load ${resourceLabel.toLowerCase()} sharing.`;
+                enqueueToastRef.current(message, { variant: 'error' });
+            }
+            finally {
+                if (!cancelled) {
+                    setIsLoading(false);
+                }
+            }
+        };
+        void run();
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        isOpen,
+        canRequest,
+        requestUrl,
+        token,
+        resourceLabel,
+        resourceName,
+        mergePrincipalCacheEntry,
+    ]);
+    // ----- Fetch shareable principals on open -----
+    useEffect(() => {
+        if (!isOpen || !canSearchPrincipals || !iamRunUrl || !token) {
+            return;
+        }
+        let cancelled = false;
+        const run = async () => {
+            setIsLoadingShareable(true);
+            try {
+                const response = await fetch(`${iamRunUrl}/api/iam/v1/principals/shareable`, {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        Authorization: `Bearer ${token}`,
+                    },
+                });
+                const payload = await response.json();
+                if (!response.ok || payload?.success === false) {
+                    const message = payload?.detail ||
+                        payload?.message ||
+                        'Unable to load shareable principals.';
+                    throw new Error(message);
+                }
+                if (cancelled) {
+                    return;
+                }
+                const raw = Array.isArray(payload?.principals)
+                    ? payload.principals
+                    : [];
+                const mapped = raw
+                    .map((entry) => {
+                    const uid = pickFirstString(entry?.uid);
+                    const handle = pickFirstString(entry?.handle, entry?.handle_s);
+                    if (!uid) {
+                        return null;
+                    }
+                    const kind = normalizePrincipalKind(pickFirstString(entry?.kind));
+                    return {
+                        kind,
+                        uid,
+                        handle: handle || uid,
+                        name: pickFirstString(entry?.name) || null,
+                        email: pickFirstString(entry?.email) || null,
+                        avatarUrl: pickFirstString(entry?.avatar_url, entry?.avatarUrl) || null,
+                        organizationUid: pickFirstString(entry?.organization_uid, entry?.organizationUid) || null,
+                        organizationHandle: pickFirstString(entry?.organization_handle, entry?.organizationHandle) || null,
+                    };
+                })
+                    .filter(Boolean);
+                setShareablePrincipals(mapped);
+                mapped.forEach(principal => {
+                    mergePrincipalCacheEntry(principal.kind, principal.uid, {
+                        displayName: principal.name || principal.handle,
+                        handle: principal.handle,
+                        avatarUrl: principal.avatarUrl || undefined,
+                        accountHandle: principal.organizationHandle || undefined,
+                        origin: principal.kind === 'user' ? 'Datalayer' : undefined,
+                    });
+                });
+            }
+            catch (error) {
+                if (cancelled) {
+                    return;
+                }
+                const message = error instanceof Error
+                    ? error.message
+                    : 'Unable to load shareable principals.';
+                enqueueToastRef.current(message, { variant: 'error' });
+            }
+            finally {
+                if (!cancelled) {
+                    setIsLoadingShareable(false);
+                }
+            }
+        };
+        void run();
+        return () => {
+            cancelled = true;
+        };
+    }, [isOpen, canSearchPrincipals, iamRunUrl, token, mergePrincipalCacheEntry]);
+    // ----- Debounce search query -----
+    useEffect(() => {
+        const timeout = window.setTimeout(() => {
+            setDebouncedSearchQuery(searchQuery);
+        }, 350);
+        return () => {
+            window.clearTimeout(timeout);
+        };
+    }, [searchQuery]);
+    // ----- Run search against /principals/search -----
+    useEffect(() => {
+        if (!isOpen || !canSearchPrincipals || !iamRunUrl || !token) {
+            setSearchResults([]);
+            return;
+        }
+        const query = normalizedDebouncedSearch;
+        if (!query || query.length < 2) {
+            setSearchResults([]);
+            setIsSearching(false);
+            return;
+        }
+        let cancelled = false;
+        const requestId = activeSearchRequestRef.current + 1;
+        activeSearchRequestRef.current = requestId;
+        const run = async () => {
+            setIsSearching(true);
+            try {
+                const controller = new AbortController();
+                const timeoutId = window.setTimeout(() => controller.abort(), 8000);
+                let response;
+                let payload;
+                try {
+                    response = await fetch(`${iamRunUrl}/api/iam/v1/principals/search`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            Authorization: `Bearer ${token}`,
+                        },
+                        body: JSON.stringify({
+                            query,
+                            principalTypes: [...principalKinds],
+                        }),
+                        signal: controller.signal,
+                    });
+                    payload = await response.json();
+                }
+                finally {
+                    window.clearTimeout(timeoutId);
+                }
+                if (requestId !== activeSearchRequestRef.current || cancelled) {
+                    return;
+                }
+                if (!response.ok || !payload?.success) {
+                    const message = payload?.detail ||
+                        payload?.message ||
+                        'Unable to search principals.';
+                    throw new Error(message);
+                }
+                const data = payload?.data && typeof payload.data === 'object'
+                    ? payload.data
+                    : payload;
+                const users = Array.isArray(data?.users) ? data.users : [];
+                const teams = Array.isArray(data?.teams) ? data.teams : [];
+                const organizations = Array.isArray(data?.organizations)
+                    ? data.organizations
+                    : [];
+                const mappedUsers = users
+                    .map((entry) => {
+                    const uid = pickFirstString(entry?.uid);
+                    const handle = pickFirstString(entry?.handle_s, entry?.handle);
+                    if (!uid) {
+                        return null;
+                    }
+                    const firstName = pickFirstString(entry?.first_name_t, entry?.firstName);
+                    const lastName = pickFirstString(entry?.last_name_t, entry?.lastName);
+                    const displayName = `${firstName} ${lastName}`.trim() ||
+                        pickFirstString(entry?.display_name_t, entry?.display_name, handle);
+                    const origin = normalizeUserOrigin(pickFirstString(entry?.origin, entry?.origin_s, entry?.origin_t));
+                    const avatarUrl = pickFirstString(entry?.avatar_url_s, entry?.avatarUrl, entry?.avatar_url);
+                    return {
+                        kind: 'user',
+                        uid,
+                        handle: handle || uid,
+                        displayName: displayName || handle || uid,
+                        avatarUrl: avatarUrl || undefined,
+                        origin,
+                    };
+                })
+                    .filter(Boolean);
+                const mappedTeams = teams
+                    .map((entry) => {
+                    const uid = pickFirstString(entry?.uid);
+                    const handle = pickFirstString(entry?.handle_s, entry?.handle);
+                    if (!uid) {
+                        return null;
+                    }
+                    return {
+                        kind: 'team',
+                        uid,
+                        handle: handle || uid,
+                        displayName: pickFirstString(entry?.name_t, entry?.name) || handle || uid,
+                        accountHandle: pickFirstString(entry?.organization_handle_s, entry?.organizationHandle, entry?.organization_handle) || undefined,
+                    };
+                })
+                    .filter(Boolean);
+                const mappedOrganizations = organizations
+                    .map((entry) => {
+                    const uid = pickFirstString(entry?.uid);
+                    const handle = pickFirstString(entry?.handle_s, entry?.handle);
+                    if (!uid) {
+                        return null;
+                    }
+                    return {
+                        kind: 'organization',
+                        uid,
+                        handle: handle || uid,
+                        displayName: pickFirstString(entry?.name_t, entry?.name) || handle || uid,
+                    };
+                })
+                    .filter(Boolean);
+                const filtered = [
+                    ...mappedUsers,
+                    ...mappedTeams,
+                    ...mappedOrganizations,
+                ].filter(result => principalKindsSet.has(result.kind));
+                filtered.forEach(result => {
+                    mergePrincipalCacheEntry(result.kind, result.uid, {
+                        displayName: result.displayName || result.handle,
+                        handle: result.handle,
+                        avatarUrl: result.avatarUrl,
+                        accountHandle: result.accountHandle,
+                        origin: result.kind === 'user' ? result.origin : undefined,
+                    });
+                });
+                setSearchResults(filtered);
+            }
+            catch (error) {
+                if (cancelled || requestId !== activeSearchRequestRef.current) {
+                    return;
+                }
+                setSearchResults([]);
+                const message = error instanceof Error
+                    ? error.message
+                    : 'Unable to search principals.';
+                enqueueToastRef.current(message, { variant: 'error' });
+            }
+            finally {
+                if (requestId === activeSearchRequestRef.current && !cancelled) {
+                    setIsSearching(false);
+                }
+            }
+        };
+        void run();
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        isOpen,
+        canSearchPrincipals,
+        iamRunUrl,
+        token,
+        normalizedDebouncedSearch,
+        principalKindsKey,
+        principalKinds,
+        principalKindsSet,
+        mergePrincipalCacheEntry,
+    ]);
+    // ----- Hydrate ACL user uids in bulk -----
+    useEffect(() => {
+        if (!isOpen || !canSearchPrincipals || !iamRunUrl || !token) {
+            return;
+        }
+        const userUids = Array.from(new Set([
+            ...aclEntries
+                .filter(e => e.kind === 'user')
+                .map(e => e.uid)
+                .filter(Boolean),
+            ...ownerPrincipals
+                .filter(o => o.kind === 'user')
+                .map(o => o.uid)
+                .filter(Boolean),
+        ]));
+        const unknown = userUids.filter(uid => {
+            if (!uid || userHydrationMissesRef.current.has(uid)) {
+                return false;
+            }
+            const cached = principalCache[principalKey('user', uid)] || {};
+            return (!cached.displayName ||
+                !cached.avatarUrl ||
+                !cached.origin ||
+                !cached.handle);
+        });
+        if (unknown.length === 0) {
+            setHydratingUserUids({});
+            return;
+        }
+        let cancelled = false;
+        const run = async () => {
+            setHydratingUserUids(unknown.reduce((acc, uid) => {
+                acc[uid] = true;
+                return acc;
+            }, {}));
+            try {
+                const response = await fetch(`${iamRunUrl}/api/iam/v1/users/bulk`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        Authorization: `Bearer ${token}`,
+                    },
+                    body: JSON.stringify({ userIds: unknown }),
+                });
+                const payload = await response.json();
+                if (!response.ok || !payload?.success || cancelled) {
+                    unknown.forEach(uid => userHydrationMissesRef.current.add(uid));
+                    return;
+                }
+                const data = payload?.data && typeof payload.data === 'object'
+                    ? payload.data
+                    : payload;
+                const users = Array.isArray(data?.users) ? data.users : [];
+                const hydratedSet = new Set();
+                users.forEach((entry) => {
+                    const uid = pickFirstString(entry?.uid);
+                    if (!uid) {
+                        return;
+                    }
+                    hydratedSet.add(uid);
+                    const handle = pickFirstString(entry?.handle_s, entry?.handle) || uid;
+                    const firstName = pickFirstString(entry?.first_name_t, entry?.firstName);
+                    const lastName = pickFirstString(entry?.last_name_t, entry?.lastName);
+                    const displayName = `${firstName} ${lastName}`.trim() ||
+                        pickFirstString(entry?.display_name_t, entry?.display_name) ||
+                        handle;
+                    const avatarUrl = pickFirstString(entry?.avatar_url_s, entry?.avatarUrl, entry?.avatar_url);
+                    const origin = normalizeUserOrigin(pickFirstString(entry?.origin, entry?.origin_s, entry?.origin_t));
+                    mergePrincipalCacheEntry('user', uid, {
+                        displayName,
+                        handle,
+                        avatarUrl: avatarUrl || undefined,
+                        origin,
+                    });
+                });
+                unknown.forEach(uid => {
+                    if (!hydratedSet.has(uid)) {
+                        userHydrationMissesRef.current.add(uid);
+                    }
+                });
+            }
+            catch {
+                unknown.forEach(uid => userHydrationMissesRef.current.add(uid));
+            }
+            finally {
+                if (!cancelled) {
+                    setHydratingUserUids({});
+                }
+            }
+        };
+        void run();
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        isOpen,
+        canSearchPrincipals,
+        iamRunUrl,
+        token,
+        aclEntries,
+        ownerPrincipals,
+        principalCache,
+        mergePrincipalCacheEntry,
+    ]);
+    // ----- Hydrate ACL team uids individually -----
+    useEffect(() => {
+        if (!isOpen || !canSearchPrincipals || !iamRunUrl || !token) {
+            return;
+        }
+        const unknownTeams = aclEntries.filter(entry => {
+            if (entry.kind !== 'team') {
+                return false;
+            }
+            const cached = principalCache[principalKey('team', entry.uid)] || {};
+            return !cached.displayName;
+        });
+        if (unknownTeams.length === 0) {
+            return;
+        }
+        let cancelled = false;
+        void Promise.all(unknownTeams.map(async (entry) => {
+            try {
+                const response = await fetch(`${iamRunUrl}/api/iam/v1/teams/${encodeURIComponent(entry.uid)}`, {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        Authorization: `Bearer ${token}`,
+                    },
+                });
+                const payload = await response.json();
+                if (!response.ok || !payload?.success || cancelled) {
+                    return;
+                }
+                const data = payload?.data && typeof payload.data === 'object'
+                    ? payload.data
+                    : payload;
+                const obj = data?.team || data;
+                const name = pickFirstString(obj?.name_t, obj?.name);
+                const handle = pickFirstString(obj?.handle_s, obj?.handle);
+                const accountHandle = pickFirstString(obj?.organization_handle_s, obj?.organizationHandle, obj?.organization_handle);
+                mergePrincipalCacheEntry('team', entry.uid, {
+                    displayName: name || handle,
+                    handle,
+                    accountHandle,
+                });
+            }
+            catch {
+                // Best effort.
+            }
+        }));
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        isOpen,
+        canSearchPrincipals,
+        iamRunUrl,
+        token,
+        aclEntries,
+        principalCache,
+        mergePrincipalCacheEntry,
+    ]);
+    // ----- Auto-save on access change after hydration -----
+    const saveAccess = useCallback(async (snapshot) => {
+        if (!canRequest || !requestUrl) {
+            return;
+        }
+        setIsSaving(true);
+        try {
+            const body = {
+                access: {
+                    view: {
+                        userUids: snapshot.view.userUids,
+                        teamUids: snapshot.view.teamUids,
+                        organizationUids: snapshot.view.organizationUids,
+                    },
+                    update: {
+                        userUids: snapshot.update.userUids,
+                        teamUids: snapshot.update.teamUids,
+                        organizationUids: snapshot.update.organizationUids,
+                    },
+                    execute: {
+                        userUids: snapshot.execute.userUids,
+                        teamUids: snapshot.execute.teamUids,
+                        organizationUids: snapshot.execute.organizationUids,
+                    },
+                },
+            };
+            const response = await fetch(requestUrl, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${token}`,
+                },
+                body: JSON.stringify(body),
+            });
+            const payload = await response.json();
+            const message = payload?.detail ||
+                payload?.message ||
+                `Unable to update ${resourceLabel.toLowerCase()} sharing.`;
+            if (payload?.success === false) {
+                if (isSharingAuthorizationMessage(message)) {
+                    setSharingAccessMessage(message);
+                    return;
+                }
+                throw new Error(message);
+            }
+            if (!response.ok) {
+                if (response.status === 403 ||
+                    isSharingAuthorizationMessage(message)) {
+                    setSharingAccessMessage(message);
+                    return;
+                }
+                throw new Error(message);
+            }
+            enqueueToastRef.current(`${resourceLabel} sharing updated.`, {
+                variant: 'success',
+            });
+        }
+        catch (error) {
+            const message = error instanceof Error
+                ? error.message
+                : `Unable to update ${resourceLabel.toLowerCase()} sharing.`;
+            enqueueToastRef.current(message, { variant: 'error' });
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }, [canRequest, requestUrl, token, resourceLabel]);
+    useEffect(() => {
+        if (!hasHydratedSharingRef.current) {
+            return;
+        }
+        if (!canRequest || !requestUrl) {
+            return;
+        }
+        if (!isSharingAccessConfirmed || sharingAccessMessage) {
+            return;
+        }
+        const serialized = JSON.stringify(access);
+        if (lastSavedSharingRef.current === serialized) {
+            return;
+        }
+        if (autoSaveTimerRef.current) {
+            clearTimeout(autoSaveTimerRef.current);
+        }
+        autoSaveTimerRef.current = setTimeout(() => {
+            autoSaveTimerRef.current = null;
+            lastSavedSharingRef.current = serialized;
+            void saveAccess(access);
+        }, 400);
+        return () => {
+            if (autoSaveTimerRef.current) {
+                clearTimeout(autoSaveTimerRef.current);
+                autoSaveTimerRef.current = null;
+            }
+        };
+    }, [
+        access,
+        canRequest,
+        requestUrl,
+        isSharingAccessConfirmed,
+        sharingAccessMessage,
+        saveAccess,
+    ]);
+    // ----- Action handlers -----
+    const addPrincipal = useCallback((kind, uid) => {
+        if (!principalKindsSet.has(kind)) {
+            return;
+        }
+        setAccess(prev => withPrincipalAdded(prev, selectedAccessLevel, kind, uid));
+    }, [principalKindsSet, selectedAccessLevel]);
+    const removePrincipal = useCallback((kind, uid) => {
+        setAccess(prev => withPrincipalRemoved(prev, kind, uid));
+    }, []);
+    const handleSearchResultSelect = useCallback((result) => {
+        addPrincipal(result.kind, result.uid);
+        setSearchQuery('');
+        setIsSearchOverlayOpen(false);
+        setSearchResults([]);
+    }, [addPrincipal]);
+    // ----- Search overlay outside-click + escape -----
+    useEffect(() => {
+        if (!isSearchOverlayOpen) {
+            return;
+        }
+        const handlePointer = (event) => {
+            const target = event.target;
+            if (target && searchContainerRef.current?.contains(target)) {
+                return;
+            }
+            setIsSearchOverlayOpen(false);
+        };
+        const handleEscape = (event) => {
+            if (event.key !== 'Escape') {
+                return;
+            }
+            event.preventDefault();
+            setIsSearchOverlayOpen(false);
+            searchInputRef.current?.focus();
+        };
+        document.addEventListener('mousedown', handlePointer);
+        document.addEventListener('keydown', handleEscape);
+        return () => {
+            document.removeEventListener('mousedown', handlePointer);
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [isSearchOverlayOpen]);
+    // ----- Shareable picker groupings -----
+    const groupedShareable = useMemo(() => {
+        const filtered = shareablePrincipals.filter(p => principalKindsSet.has(p.kind));
+        const selfUid = pickFirstString(user?.uid);
+        const self = filtered.filter(p => p.kind === 'user' && p.uid === selfUid);
+        const otherUsers = filtered.filter(p => p.kind === 'user' && p.uid !== selfUid);
+        const orgs = filtered.filter(p => p.kind === 'organization');
+        const teams = filtered.filter(p => p.kind === 'team');
+        return { self, otherUsers, orgs, teams };
+    }, [shareablePrincipals, principalKindsSet, user?.uid]);
+    if (!isOpen) {
+        return null;
+    }
+    const isReadOnly = !canRequest ||
+        !isSharingAccessConfirmed ||
+        isLoading ||
+        Boolean(sharingAccessMessage);
+    // ----- Sub-renderers (kept inline for locality) -----
+    const renderShareablePrincipalRow = (principal) => {
+        const alreadyAdded = hasPrincipal(access, selectedAccessLevel, principal.kind, principal.uid);
+        const cached = principalCache[principalKey(principal.kind, principal.uid)] || {};
+        const displayName = principal.name || cached.displayName || principal.handle || principal.uid;
+        const Icon = principal.kind === 'user'
+            ? PersonIcon
+            : principal.kind === 'organization'
+                ? OrganizationIcon
+                : PeopleIcon;
+        return (_jsxs(Box, { as: "button", type: "button", onClick: () => {
+                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: [_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 === 'user' &&
+                                            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)));
+    };
+    const renderShareableGroup = (label, items) => {
+        if (items.length === 0) {
+            return null;
+        }
+        return (_jsxs(Box, { sx: { 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) })] }));
+    };
+    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: [_jsx(ActionMenu.Anchor, { children: _jsxs(Button, { variant: "default", size: "small", leadingVisual: KeyIcon, disabled: isSaving || isReadOnly, children: ["Access: ", ACCESS_LEVEL_LABELS[selectedAccessLevel]] }) }), _jsx(ActionMenu.Overlay, { width: "small", children: _jsx(ActionList, { selectionVariant: "single", children: ACCESS_LEVELS.map(level => (_jsx(ActionList.Item, { selected: selectedAccessLevel === level, onSelect: () => setSelectedAccessLevel(level), children: ACCESS_LEVEL_LABELS[level] }, level))) }) })] })] }), _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 === 'user' &&
+                                            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 &&
+                                groupedShareable.self.length === 0 &&
+                                groupedShareable.otherUsers.length === 0 &&
+                                groupedShareable.orgs.length === 0 &&
+                                groupedShareable.teams.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)] }))] }), _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 => {
+                                            const next = e.target.value;
+                                            setSearchQuery(next);
+                                            setIsSearchOverlayOpen(next.trim().length > 0);
+                                        }, onFocus: () => {
+                                            if (searchQuery.trim().length > 0) {
+                                                setIsSearchOverlayOpen(true);
+                                            }
+                                        }, onKeyDown: e => {
+                                            if (e.key === 'Escape') {
+                                                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: _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 === 'user' && (_jsx(Label, { size: "small", variant: "secondary", children: result.origin ||
+                                                                    principalCache[principalKey('user', 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',
+                                            '&:first-of-type': { borderTop: 'none' },
+                                        }, children: [_jsx(AccessPrincipalRow, { entry: entry, cache: principalCache, showAvatarSkeleton: entry.kind === 'user' &&
+                                                    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: ACCESS_LEVEL_LABELS[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" }))] }));
+    if (displayMode === 'inline') {
+        return (_jsx(Box, { sx: {
+                borderWidth: 1,
+                borderStyle: 'solid',
+                borderColor: 'border.default',
+                borderRadius: 2,
+                bg: 'canvas.default',
+            }, children: content }));
+    }
+    return (_jsx(Dialog, { title: `Share ${resourceLabel.toLowerCase()}`, onClose: onClose, width: "large", children: content }));
+}
+export default ShareAccessComponent;
+// Backward-compatible aliases (deprecated: use ShareAccessComponent).
+export const ShareAccessDialog = ShareAccessComponent;