@agent-native/core 0.22.34 → 0.22.36

package/dist/client/sharing/ShareButton.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState, } from "react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import { IconLock, IconBuilding, IconWorld, IconTrash, IconCheck, IconChevronDown, IconCopy, IconSearchOff, } from "@tabler/icons-react";
+import { IconLock, IconBuilding, IconWorld, IconTrash, IconCheck, IconChevronDown, IconCopy, IconLoader2, IconSearch, IconSearchOff, } from "@tabler/icons-react";
 import * as Select from "@radix-ui/react-select";
-import { Popover, PopoverContent, PopoverTrigger, } from "../components/ui/popover.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, } from "../components/ui/popover.js";
 import { useActionQuery, useActionMutation } from "../use-action.js";
 import { cn } from "../utils.js";
 import { agentNativePath } from "../api-path.js";
@@ -14,6 +14,8 @@ const BUTTON_OUTLINE_SM = cn(BUTTON_BASE, "h-9 px-3 border border-[hsl(var(--sid
 const BUTTON_PRIMARY_SM = cn(BUTTON_BASE, "h-9 px-4 bg-primary text-primary-foreground hover:bg-primary/90");
 const BUTTON_GHOST_ICON = cn(BUTTON_BASE, "h-7 w-7 p-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground");
 const SHARE_POPOVER_SURFACE = "border-[hsl(var(--sidebar-border,var(--border)))] bg-[hsl(var(--sidebar-background,var(--popover)))]";
+const MEMBER_SUGGESTION_LIMIT = 25;
+const MEMBER_SEARCH_DEBOUNCE_MS = 140;
 const VIS_META = {
     private: {
         label: "Private",
@@ -134,29 +136,136 @@ export function ShareButton(props) {
             : IconLock;
     return (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: BUTTON_OUTLINE_SM, children: [loaded ? (_jsx(TriggerIcon, { size: 16, strokeWidth: 1.75 })) : (_jsx("span", { "aria-hidden": true, className: "inline-block h-4 w-4 rounded-sm bg-muted animate-pulse" })), _jsx("span", { children: "Share" })] }) }), _jsx(PopoverContent, { align: "end", sideOffset: 6, className: cn("z-[2000] w-[min(460px,92vw)] rounded-lg p-4 shadow-lg", SHARE_POPOVER_SURFACE), onOpenAutoFocus: (e) => e.preventDefault(), children: _jsx(SharePanel, { ...props, sharesQuery: sharesQuery, visibilityOverride: pendingVisibility, onVisibilityChange: handleVisibilityChange, onClose: () => handleOpenChange(false) }) })] }));
 }
-function useOrgMembers() {
+function useOrgMemberSearch(query, enabled) {
+    const search = query.trim();
     const [members, setMembers] = useState([]);
-    useEffect(() => {
-        let cancelled = false;
-        fetch(agentNativePath("/_agent-native/org/members"))
-            .then((r) => (r.ok ? r.json() : null))
+    const [nextOffset, setNextOffset] = useState(null);
+    const [hasMore, setHasMore] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+    const [error, setError] = useState(false);
+    const requestIdRef = useRef(0);
+    const abortRef = useRef(null);
+    const fetchPage = useCallback((offset, append) => {
+        if (!enabled)
+            return;
+        const requestId = ++requestIdRef.current;
+        abortRef.current?.abort();
+        const controller = new AbortController();
+        abortRef.current = controller;
+        if (append) {
+            setIsLoadingMore(true);
+        }
+        else {
+            setIsLoading(true);
+            setMembers([]);
+            setNextOffset(null);
+            setHasMore(false);
+        }
+        setError(false);
+        const params = new URLSearchParams();
+        if (search)
+            params.set("search", search);
+        params.set("limit", String(MEMBER_SUGGESTION_LIMIT));
+        params.set("offset", String(offset));
+        fetch(`${agentNativePath("/_agent-native/org/members")}?${params}`, {
+            credentials: "include",
+            signal: controller.signal,
+        })
+            .then((response) => {
+            if (!response.ok)
+                throw new Error("Could not load people");
+            return response.json();
+        })
             .then((data) => {
-            if (cancelled || !data)
+            if (controller.signal.aborted || requestId !== requestIdRef.current)
                 return;
-            const list = Array.isArray(data?.members) ? data.members : [];
-            setMembers(list
-                .map((m) => ({
-                email: typeof m?.email === "string" ? m.email : "",
-                name: typeof m?.name === "string" ? m.name : null,
-            }))
-                .filter((m) => m.email));
+            const nextMembers = normalizeMembers(data?.members);
+            setMembers((prev) => append ? mergeMembers(prev, nextMembers) : nextMembers);
+            setHasMore(data?.hasMore === true);
+            setNextOffset(typeof data?.nextOffset === "number" ? data.nextOffset : null);
         })
-            .catch(() => { });
+            .catch((err) => {
+            if (controller.signal.aborted || requestId !== requestIdRef.current)
+                return;
+            setError(true);
+            setHasMore(false);
+            setNextOffset(null);
+            if (!append)
+                setMembers([]);
+            if (process.env.NODE_ENV === "development") {
+                console.warn("[ShareButton] org member search failed", err);
+            }
+        })
+            .finally(() => {
+            if (controller.signal.aborted || requestId !== requestIdRef.current)
+                return;
+            if (append)
+                setIsLoadingMore(false);
+            else
+                setIsLoading(false);
+        });
+    }, [enabled, search]);
+    useEffect(() => {
+        if (!enabled) {
+            abortRef.current?.abort();
+            setMembers([]);
+            setNextOffset(null);
+            setHasMore(false);
+            setIsLoading(false);
+            setIsLoadingMore(false);
+            setError(false);
+            return;
+        }
+        const timeout = setTimeout(() => fetchPage(0, false), search ? MEMBER_SEARCH_DEBOUNCE_MS : 0);
         return () => {
-            cancelled = true;
+            clearTimeout(timeout);
+            abortRef.current?.abort();
         };
-    }, []);
-    return members;
+    }, [enabled, fetchPage, search]);
+    const loadMore = useCallback(() => {
+        if (!enabled || !hasMore || nextOffset === null)
+            return;
+        if (isLoading || isLoadingMore)
+            return;
+        fetchPage(nextOffset, true);
+    }, [enabled, fetchPage, hasMore, isLoading, isLoadingMore, nextOffset]);
+    return {
+        members,
+        isLoading,
+        isLoadingMore,
+        hasMore,
+        error,
+        loadMore,
+    };
+}
+function normalizeMembers(value) {
+    if (!Array.isArray(value))
+        return [];
+    return value
+        .map((m) => ({
+        email: typeof m?.email === "string" ? m.email : "",
+        name: typeof m?.name === "string" ? m.name : null,
+        role: typeof m?.role === "string" ? m.role : null,
+        joinedAt: typeof m?.joinedAt === "number"
+            ? m.joinedAt
+            : typeof m?.joined_at === "number"
+                ? m.joined_at
+                : null,
+    }))
+        .filter((m) => m.email);
+}
+function mergeMembers(existing, next) {
+    const seen = new Set(existing.map((m) => m.email.toLowerCase()));
+    const merged = [...existing];
+    for (const member of next) {
+        const key = member.email.toLowerCase();
+        if (seen.has(key))
+            continue;
+        seen.add(key);
+        merged.push(member);
+    }
+    return merged;
 }
 function SharePanel(props) {
     const { resourceType, resourceId, resourceTitle, sharesQuery, visibilityOverride, onVisibilityChange, onClose, } = props;
@@ -166,9 +275,8 @@ function SharePanel(props) {
     const [role, setRole] = useState("viewer");
     const [notifyPeople, setNotifyPeople] = useState(true);
     const [shareError, setShareError] = useState(null);
+    const [suggestionsOpen, setSuggestionsOpen] = useState(false);
     const hasInviteEmail = email.trim().length > 0;
-    const orgMembers = useOrgMembers();
-    const datalistId = `share-autocomplete-${resourceType}-${resourceId}`;
     // Optimistic overlays so clicks feel instant.
     const [pendingAdds, setPendingAdds] = useState([]);
     const [pendingRemoves, setPendingRemoves] = useState(new Set());
@@ -198,6 +306,13 @@ function SharePanel(props) {
     const visibility = visibilityOverride ?? data?.visibility ?? "private";
     const canManage = data?.role === "owner" || data?.role === "admin";
     const meta = visibilityMeta(visibility, props.visibilityCopy);
+    const peopleAccessLabel = props.peopleAccessLabel ?? "People with access";
+    const generalAccessLabel = props.generalAccessLabel ?? "General access";
+    const shareLinks = (_jsxs(_Fragment, { children: [props.shareUrl ? (_jsx(CopyLinkField, { value: props.shareUrl, label: props.shareUrlLabel, description: props.shareUrlDescription })) : props.shareUrlPlaceholder ? (_jsxs("div", { className: "mb-4 rounded-md border border-dashed border-border bg-muted/20 px-3 py-2.5 text-xs text-muted-foreground", children: [props.shareUrlLabel ? (_jsx("div", { className: "mb-0.5 font-medium text-foreground", children: props.shareUrlLabel })) : null, props.shareUrlPlaceholder] })) : null, props.secondaryShareUrl ? (_jsx(CopyLinkField, { value: props.secondaryShareUrl, label: props.secondaryShareUrlLabel, description: props.secondaryShareUrlDescription })) : null] }));
+    const showShareLinks = Boolean(props.shareUrl) ||
+        Boolean(props.shareUrlPlaceholder) ||
+        Boolean(props.secondaryShareUrl);
+    const shareUrlPlacement = props.shareUrlPlacement ?? "bottom";
     const serverShares = data?.shares ?? [];
     const shares = [
         ...serverShares
@@ -205,6 +320,17 @@ function SharePanel(props) {
             .map((s) => ({ ...s, role: roleOverrides[keyOf(s)] ?? s.role })),
         ...pendingAdds,
     ];
+    const memberSearch = useOrgMemberSearch(email, canManage && suggestionsOpen);
+    const excludedMemberEmails = new Set();
+    if (data?.ownerEmail)
+        excludedMemberEmails.add(data.ownerEmail.toLowerCase());
+    for (const s of shares) {
+        if (s.principalType === "user") {
+            excludedMemberEmails.add(s.principalId.toLowerCase());
+        }
+    }
+    const memberSuggestions = memberSearch.members.filter((m) => !excludedMemberEmails.has(m.email.toLowerCase()));
+    const knownMembers = memberSearch.members;
     const handleVisibility = (next) => {
         if (next === visibility)
             return;
@@ -244,6 +370,7 @@ function SharePanel(props) {
         setShareError(null);
         setPendingAdds((p) => [...p, optimistic]);
         setEmail("");
+        setSuggestionsOpen(false);
         addInFlight(k);
         share.mutate({
             resourceType,
@@ -352,29 +479,125 @@ function SharePanel(props) {
         ? `Share "${resourceTitle}"`
         : `Share ${resourceType}`;
     if (isLoading) {
-        return (_jsxs("div", { children: [_jsx("div", { className: "mb-3 truncate text-base font-semibold", title: titleText, children: titleText }), _jsx("div", { className: "mb-4 h-9 rounded-md bg-muted animate-pulse" }), _jsx("div", { className: "mb-2 text-sm font-semibold", children: "People with access" }), _jsx("div", { className: "mb-4 h-7 rounded-md bg-muted animate-pulse" }), _jsx("div", { className: "mb-2 text-sm font-semibold", children: "General access" }), _jsx("div", { className: "mb-4 h-9 rounded-md bg-muted animate-pulse" }), _jsx("div", { className: "mt-2 flex justify-end", children: _jsx("button", { type: "button", onClick: onClose, className: BUTTON_PRIMARY_SM, children: "Done" }) })] }));
+        return (_jsxs("div", { children: [_jsx("div", { className: "mb-3 truncate text-base font-semibold", title: titleText, children: titleText }), _jsx("div", { className: "mb-4 h-9 rounded-md bg-muted animate-pulse" }), _jsx("div", { className: "mb-2 text-sm font-semibold", children: peopleAccessLabel }), _jsx("div", { className: "mb-4 h-7 rounded-md bg-muted animate-pulse" }), _jsx("div", { className: "mb-2 text-sm font-semibold", children: generalAccessLabel }), _jsx("div", { className: "mb-4 h-9 rounded-md bg-muted animate-pulse" }), _jsx("div", { className: "mt-2 flex justify-end", children: _jsx("button", { type: "button", onClick: onClose, className: BUTTON_PRIMARY_SM, children: "Done" }) })] }));
     }
-    return (_jsxs("div", { children: [_jsx("div", { className: "mb-3 truncate text-base font-semibold", title: titleText, children: titleText }), canManage ? (_jsxs("div", { className: "mb-4 space-y-2", children: [_jsxs("div", { className: "flex items-stretch gap-2", children: [_jsx("input", { type: "email", placeholder: policy.requireOrgMemberForUserShares
-                                    ? "Add people from your organization"
-                                    : "Add people by email", value: email, onChange: (e) => {
-                                    setEmail(e.target.value);
+    return (_jsxs("div", { children: [_jsx("div", { className: "mb-3 truncate text-base font-semibold", title: titleText, children: titleText }), showShareLinks && shareUrlPlacement === "top" ? shareLinks : null, canManage ? (_jsxs("div", { className: "mb-4 space-y-2", children: [_jsxs("div", { className: "flex items-stretch gap-2", children: [_jsx(MemberAutocomplete, { value: email, open: suggestionsOpen, onOpenChange: setSuggestionsOpen, onValueChange: (next) => {
+                                    setEmail(next);
                                     if (shareError)
                                         setShareError(null);
-                                }, onKeyDown: (e) => {
-                                    if (e.key === "Enter")
-                                        handleAdd();
-                                }, list: orgMembers.length > 0 ? datalistId : undefined, autoComplete: "off", className: "flex-1 min-w-0 h-9 rounded-md border border-input bg-background px-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background" }), orgMembers.length > 0 ? (_jsx("datalist", { id: datalistId, children: orgMembers
-                                    .filter((m) => m.email !== sharesQuery.data?.ownerEmail &&
-                                    !(sharesQuery.data?.shares ?? []).some((s) => s.principalType === "user" &&
-                                        s.principalId === m.email))
-                                    .map((m) => (_jsx("option", { value: m.email, label: m.name ?? undefined }, m.email))) })) : null, _jsx(RoleSelect, { value: role, onChange: setRole })] }), shareError ? (_jsx("div", { role: "alert", className: "rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: shareError })) : null, hasInviteEmail ? (_jsxs("label", { className: "inline-flex items-center gap-2 text-xs text-muted-foreground", children: [_jsx("input", { type: "checkbox", checked: notifyPeople, onChange: (e) => setNotifyPeople(e.target.checked), className: "h-4 w-4 rounded border-input accent-primary" }), "Notify people"] })) : null] })) : null, _jsx("div", { className: "mb-2 text-sm font-semibold", children: "People with access" }), _jsxs("ul", { className: "mb-4 flex flex-col gap-1 list-none p-0 m-0", children: [data?.ownerEmail ? (_jsxs("li", { className: "flex items-center gap-3 px-1 py-1.5 text-sm", children: [_jsx(Avatar, { label: displayName(data.ownerEmail, orgMembers) }), _jsx("span", { className: "flex-1 min-w-0 truncate", children: displayName(data.ownerEmail, orgMembers) }), _jsx("span", { className: "text-xs text-muted-foreground", children: "Owner" })] })) : null, shares.map((s) => (_jsxs("li", { className: cn("flex items-center gap-3 px-1 py-1.5 text-sm", inFlight.has(keyOf(s)) && "opacity-60"), children: [_jsx(Avatar, { label: s.principalType === "org"
+                                }, onSelectMember: (member) => {
+                                    setEmail(member.email);
+                                    setSuggestionsOpen(false);
+                                    if (shareError)
+                                        setShareError(null);
+                                }, onSubmit: handleAdd, placeholder: policy.requireOrgMemberForUserShares
+                                    ? "Add people from your organization"
+                                    : "Add people by email", suggestions: memberSuggestions, search: memberSearch }), _jsx(RoleSelect, { value: role, onChange: setRole })] }), shareError ? (_jsx("div", { role: "alert", className: "rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: shareError })) : null, hasInviteEmail ? (_jsxs("label", { className: "inline-flex items-center gap-2 text-xs text-muted-foreground", children: [_jsx("input", { type: "checkbox", checked: notifyPeople, onChange: (e) => setNotifyPeople(e.target.checked), className: "h-4 w-4 rounded border-input accent-primary" }), "Notify people"] })) : null] })) : null, _jsx("div", { className: "mb-2 text-sm font-semibold", children: peopleAccessLabel }), _jsxs("ul", { className: "mb-4 flex flex-col gap-1 list-none p-0 m-0", children: [data?.ownerEmail ? (_jsxs("li", { className: "flex items-center gap-3 px-1 py-1.5 text-sm", children: [_jsx(Avatar, { label: displayName(data.ownerEmail, knownMembers) }), _jsx("span", { className: "flex-1 min-w-0 truncate", children: displayName(data.ownerEmail, knownMembers) }), _jsx("span", { className: "text-xs text-muted-foreground", children: "Owner" })] })) : null, shares.map((s) => (_jsxs("li", { className: cn("flex items-center gap-3 px-1 py-1.5 text-sm", inFlight.has(keyOf(s)) && "opacity-60"), children: [_jsx(Avatar, { label: s.principalType === "org"
                                     ? s.principalId
-                                    : displayName(s.principalId, orgMembers), org: s.principalType === "org" }), _jsx("span", { className: "flex-1 min-w-0 truncate", children: s.principalType === "org"
+                                    : displayName(s.principalId, knownMembers), org: s.principalType === "org" }), _jsx("span", { className: "flex-1 min-w-0 truncate", children: s.principalType === "org"
                                     ? s.principalId
-                                    : displayName(s.principalId, orgMembers) }), canManage ? (_jsx(RoleSelect, { value: s.role, onChange: (r) => handleChangeRole(s, r), disabled: inFlight.has(keyOf(s)), plain: true })) : (_jsx("span", { className: "text-xs text-muted-foreground", children: cap(s.role) })), canManage ? (_jsx("button", { type: "button", "aria-label": "Remove", onClick: () => handleRemove(s), disabled: inFlight.has(keyOf(s)), className: BUTTON_GHOST_ICON, children: _jsx(IconTrash, { size: 14 }) })) : null] }, keyOf(s)))), !shares.length && !data?.ownerEmail ? (_jsx("li", { className: "px-1 py-1.5 text-sm text-muted-foreground", children: "No one has access yet." })) : null] }), _jsx("div", { className: "mb-2 text-sm font-semibold", children: "General access" }), _jsxs("div", { className: "mb-4 flex items-center gap-3", children: [_jsx("span", { "aria-hidden": true, className: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground", children: _jsx(meta.Icon, { size: 16, strokeWidth: 1.75 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(VisibilitySelect, { value: visibility, onChange: handleVisibility, disabled: !canManage, visibilityCopy: props.visibilityCopy, allowPublic: policy.allowPublic }), _jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: meta.description })] })] }), visibility === "org" && props.hideInSearchControl ? (_jsxs("button", { type: "button", role: "switch", "aria-checked": props.hideInSearchControl.checked, disabled: !canManage || props.hideInSearchControl.pending, onClick: handleHideInSearch, className: cn("mb-4 flex w-full items-center gap-3 rounded-md border border-border/70 bg-muted/25 px-3 py-2.5 text-left transition-colors hover:bg-accent/45 disabled:cursor-not-allowed disabled:opacity-60", props.hideInSearchControl.checked &&
+                                    : displayName(s.principalId, knownMembers) }), canManage ? (_jsx(RoleSelect, { value: s.role, onChange: (r) => handleChangeRole(s, r), disabled: inFlight.has(keyOf(s)), plain: true })) : (_jsx("span", { className: "text-xs text-muted-foreground", children: cap(s.role) })), canManage ? (_jsx("button", { type: "button", "aria-label": "Remove", onClick: () => handleRemove(s), disabled: inFlight.has(keyOf(s)), className: BUTTON_GHOST_ICON, children: _jsx(IconTrash, { size: 14 }) })) : null] }, keyOf(s)))), !shares.length && !data?.ownerEmail ? (_jsx("li", { className: "px-1 py-1.5 text-sm text-muted-foreground", children: "No one has access yet." })) : null] }), _jsx("div", { className: "mb-2 text-sm font-semibold", children: generalAccessLabel }), _jsxs("div", { className: "mb-4 flex items-center gap-3", children: [_jsx("span", { "aria-hidden": true, className: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground", children: _jsx(meta.Icon, { size: 16, strokeWidth: 1.75 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(VisibilitySelect, { value: visibility, onChange: handleVisibility, disabled: !canManage, visibilityCopy: props.visibilityCopy, allowPublic: policy.allowPublic }), _jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: meta.description })] })] }), visibility === "org" && props.hideInSearchControl ? (_jsxs("button", { type: "button", role: "switch", "aria-checked": props.hideInSearchControl.checked, disabled: !canManage || props.hideInSearchControl.pending, onClick: handleHideInSearch, className: cn("mb-4 flex w-full items-center gap-3 rounded-md border border-border/70 bg-muted/25 px-3 py-2.5 text-left transition-colors hover:bg-accent/45 disabled:cursor-not-allowed disabled:opacity-60", props.hideInSearchControl.checked &&
                     "border-border bg-accent/35 text-foreground"), children: [_jsx("span", { "aria-hidden": true, className: cn("relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-border bg-muted-foreground/25 transition-colors", props.hideInSearchControl.checked &&
                             "border-primary/70 bg-primary"), children: _jsx("span", { className: cn("ml-0.5 size-4 rounded-full bg-background shadow-sm transition-transform", props.hideInSearchControl.checked && "translate-x-4") }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex items-center gap-1.5 text-sm font-medium text-foreground", children: [_jsx(IconSearchOff, { size: 14, strokeWidth: 1.8 }), props.hideInSearchControl.label ?? "Hide in search"] }), _jsx("span", { className: "mt-0.5 block text-xs leading-5 text-muted-foreground", children: props.hideInSearchControl.description ??
-                                    "People with the link can still open this." })] })] })) : null, props.accessNote ? (_jsx("div", { className: "mb-4 rounded-md border border-border bg-muted/35 p-3 text-xs text-muted-foreground", children: props.accessNote })) : null, props.shareUrl ? (_jsx(CopyLinkField, { value: props.shareUrl, label: props.shareUrlLabel, description: props.shareUrlDescription })) : props.shareUrlPlaceholder ? (_jsxs("div", { className: "mb-4 rounded-md border border-dashed border-border bg-muted/20 px-3 py-2.5 text-xs text-muted-foreground", children: [props.shareUrlLabel ? (_jsx("div", { className: "mb-0.5 font-medium text-foreground", children: props.shareUrlLabel })) : null, props.shareUrlPlaceholder] })) : null, props.secondaryShareUrl ? (_jsx(CopyLinkField, { value: props.secondaryShareUrl, label: props.secondaryShareUrlLabel, description: props.secondaryShareUrlDescription })) : null, _jsx("div", { className: "mt-2 flex justify-end", children: _jsx("button", { type: "button", onClick: handleDone, className: BUTTON_PRIMARY_SM, children: "Done" }) })] }));
+                                    "People with the link can still open this." })] })] })) : null, props.accessNote ? (_jsx("div", { className: "mb-4 rounded-md border border-border bg-muted/35 p-3 text-xs text-muted-foreground", children: props.accessNote })) : null, showShareLinks && shareUrlPlacement === "bottom" ? shareLinks : null, _jsx("div", { className: "mt-2 flex justify-end", children: _jsx("button", { type: "button", onClick: handleDone, className: BUTTON_PRIMARY_SM, children: "Done" }) })] }));
+}
+function MemberAutocomplete({ value, open, onOpenChange, onValueChange, onSelectMember, onSubmit, placeholder, suggestions, search, }) {
+    const rawListboxId = useId();
+    const listboxId = rawListboxId.replace(/:/g, "");
+    const inputRef = useRef(null);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const activeMember = activeIndex >= 0 && activeIndex < suggestions.length
+        ? suggestions[activeIndex]
+        : null;
+    useEffect(() => {
+        setActiveIndex(-1);
+    }, [value]);
+    useEffect(() => {
+        if (activeIndex >= suggestions.length) {
+            setActiveIndex(suggestions.length > 0 ? suggestions.length - 1 : -1);
+        }
+    }, [activeIndex, suggestions.length]);
+    useEffect(() => {
+        if (activeIndex < 0)
+            return;
+        document
+            .getElementById(optionId(listboxId, activeIndex))
+            ?.scrollIntoView({ block: "nearest" });
+    }, [activeIndex, listboxId]);
+    const chooseMember = (member) => {
+        onSelectMember(member);
+        onOpenChange(false);
+        inputRef.current?.focus();
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            onOpenChange(true);
+            if (suggestions.length === 0)
+                return;
+            setActiveIndex((prev) => {
+                if (prev >= suggestions.length - 1) {
+                    if (search.hasMore && !search.isLoadingMore)
+                        search.loadMore();
+                    return suggestions.length - 1;
+                }
+                return prev + 1;
+            });
+            return;
+        }
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            onOpenChange(true);
+            if (suggestions.length === 0)
+                return;
+            setActiveIndex((prev) => (prev <= 0 ? suggestions.length - 1 : prev - 1));
+            return;
+        }
+        if (event.key === "Enter") {
+            if (open && activeMember) {
+                event.preventDefault();
+                chooseMember(activeMember);
+                return;
+            }
+            if (value.trim()) {
+                event.preventDefault();
+                onSubmit();
+            }
+            return;
+        }
+        if (event.key === "Escape" && open) {
+            event.preventDefault();
+            event.stopPropagation();
+            onOpenChange(false);
+            setActiveIndex(-1);
+        }
+    };
+    const handleScroll = (event) => {
+        const target = event.currentTarget;
+        if (search.hasMore &&
+            !search.isLoadingMore &&
+            target.scrollTop + target.clientHeight >= target.scrollHeight - 24) {
+            search.loadMore();
+        }
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverAnchor, { asChild: true, children: _jsxs("div", { className: "relative flex-1 min-w-0", children: [_jsx(IconSearch, { "aria-hidden": true, size: 15, strokeWidth: 1.8, className: "pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" }), _jsx("input", { ref: inputRef, type: "email", role: "combobox", "aria-autocomplete": "list", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": activeIndex >= 0 ? optionId(listboxId, activeIndex) : undefined, placeholder: placeholder, value: value, onChange: (event) => {
+                                onValueChange(event.target.value);
+                                onOpenChange(true);
+                            }, onFocus: () => onOpenChange(true), onBlur: () => {
+                                setTimeout(() => {
+                                    if (document.activeElement !== inputRef.current) {
+                                        onOpenChange(false);
+                                    }
+                                }, 0);
+                            }, onKeyDown: handleKeyDown, autoComplete: "off", className: "h-9 w-full min-w-0 rounded-md border border-input bg-background pl-8 pr-8 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background" }), search.isLoading ? (_jsx(IconLoader2, { "aria-hidden": true, size: 15, strokeWidth: 1.8, className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 animate-spin text-muted-foreground" })) : null] }) }), _jsx(PopoverContent, { align: "start", sideOffset: 4, onOpenAutoFocus: (event) => event.preventDefault(), className: cn("z-[2200] w-[var(--radix-popper-anchor-width)] min-w-[18rem] rounded-md p-1 shadow-lg", SHARE_POPOVER_SURFACE), children: _jsxs("div", { id: listboxId, role: "listbox", className: "max-h-56 overflow-y-auto overflow-x-hidden", onScroll: handleScroll, children: [suggestions.map((member, index) => {
+                            const active = index === activeIndex;
+                            return (_jsxs("div", { id: optionId(listboxId, index), role: "option", "aria-selected": active, onMouseDown: (event) => event.preventDefault(), onMouseEnter: () => setActiveIndex(index), onClick: () => chooseMember(member), className: cn("flex cursor-pointer select-none flex-col rounded-sm px-3 py-2 text-sm outline-none", active
+                                    ? "bg-accent text-accent-foreground"
+                                    : "text-foreground hover:bg-accent hover:text-accent-foreground"), children: [_jsx("span", { className: "truncate font-medium", children: member.name?.trim() || member.email }), member.name?.trim() ? (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: member.email })) : null] }, member.email));
+                        }), search.isLoading && suggestions.length === 0 ? (_jsx("div", { className: "px-3 py-3 text-sm text-muted-foreground", children: "Searching..." })) : null, search.error ? (_jsx("div", { className: "px-3 py-3 text-sm text-muted-foreground", children: "Could not load people." })) : null, !search.isLoading && !search.error && suggestions.length === 0 ? (_jsx("div", { className: "px-3 py-3 text-sm text-muted-foreground", children: value.trim() ? "No matches." : "No people found." })) : null, search.isLoadingMore ? (_jsxs("div", { className: "flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground", children: [_jsx(IconLoader2, { "aria-hidden": true, size: 14, strokeWidth: 1.8, className: "animate-spin" }), "Loading..."] })) : null, search.hasMore && !search.isLoadingMore ? (_jsx("button", { type: "button", onMouseDown: (event) => event.preventDefault(), onClick: search.loadMore, className: "mt-1 flex w-full items-center justify-center rounded-sm px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: "Load more" })) : null] }) })] }));
+}
+function optionId(baseId, index) {
+    return `${baseId}-option-${index}`;
 }
 function CopyLinkField({ value, label = "Share link", description, }) {
     const [copied, setCopied] = useState(false);