@basictech/react 0.12.0-beta.2 → 0.12.0-beta.4

package/dist/index.mjs

@@ -1046,6 +1046,120 @@ function useProjectProfile(enabled = true) {
   return useProjectProfileFor(useRequiredClient(), enabled);
 }
 
+// src/hooks/invites.ts
+import { useCallback as useCallback6, useRef as useRef3 } from "react";
+import {
+  BasicError as BasicError6
+} from "@basictech/core";
+function useShareInvitesFor(client, enabled = true) {
+  const snapshot = useClientSnapshot(client);
+  const accountId = snapshot.activeAccount?.id;
+  const currentClient = useRef3(client);
+  currentClient.current = client;
+  const gate = useSignInGate(snapshot);
+  const canLoad = enabled && snapshot.isReady && snapshot.isSignedIn;
+  const result = useAsyncResult(
+    async () => {
+      try {
+        return {
+          client,
+          accountId,
+          data: await client.shares.listInvites(),
+          error: null
+        };
+      } catch (error) {
+        return {
+          client,
+          accountId,
+          data: [],
+          error: toBasicError(error)
+        };
+      }
+    },
+    null,
+    canLoad,
+    !enabled || snapshot.isReady,
+    [client, accountId]
+  );
+  const current = result.data?.client === client && result.data.accountId === accountId ? result.data : null;
+  const resolveContactHandle = useCallback6(
+    (did) => client.shares.resolveContactHandle(did),
+    [client]
+  );
+  const checkAccount = () => {
+    if (currentClient.current !== client || client.getSnapshot().activeAccount?.id !== accountId)
+      throw new BasicError6("ACCOUNT_CHANGED");
+  };
+  async function run(action, refresh = true) {
+    checkAccount();
+    try {
+      const value = await action();
+      checkAccount();
+      return value;
+    } catch (error) {
+      checkAccount();
+      throw error;
+    } finally {
+      if (refresh && currentClient.current === client && client.getSnapshot().activeAccount?.id === accountId)
+        result.refresh();
+    }
+  }
+  return {
+    data: canLoad ? current?.data ?? [] : [],
+    isLoading: enabled && (!snapshot.isReady || canLoad && (result.isLoading || !current)),
+    error: enabled ? gate ?? (canLoad ? current?.error ?? null : null) : null,
+    refresh: result.refresh,
+    get: (id) => run(() => client.shares.getInvite(id), false),
+    accept: (id) => run(() => client.shares.acceptInvite(id)),
+    decline: (id) => run(() => client.shares.declineInvite(id)),
+    delete: (id) => run(() => client.shares.deleteInvite(id)),
+    resolveContactHandle
+  };
+}
+function useShareInvites(enabled = true) {
+  return useShareInvitesFor(useRequiredClient(), enabled);
+}
+
+// src/hooks/recipients.ts
+function useShareRecipientsFor(client, dids) {
+  const unique = [...new Set(dids)];
+  const key = JSON.stringify(unique);
+  const result = useAsyncResult(
+    async () => {
+      const handles = await Promise.allSettled(
+        unique.map((did) => client.shares.resolveContactHandle(did))
+      );
+      const failed = handles.find((handle) => handle.status === "rejected");
+      return {
+        client,
+        key,
+        data: unique.map((did, index) => {
+          const handle = handles[index];
+          return {
+            did,
+            handle: handle.status === "fulfilled" ? handle.value : null
+          };
+        }),
+        error: failed ? toBasicError(failed.reason) : null
+      };
+    },
+    null,
+    unique.length > 0,
+    true,
+    [client, key]
+  );
+  const current = result.data?.client === client && result.data.key === key ? result.data : null;
+  return {
+    data: current?.data ?? unique.map((did) => ({ did, handle: null })),
+    isLoading: unique.length > 0 && (result.isLoading || !current),
+    error: result.isLoading ? null : current?.error ?? null,
+    refresh: result.refresh
+  };
+}
+function useShareRecipients(dids) {
+  return useShareRecipientsFor(useRequiredClient(), dids);
+}
+
 // src/create-basic.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 function createBasic(config) {
@@ -1078,7 +1192,9 @@ function createBasic(config) {
     useFiles: (query = {}, options = {}) => useFilesFor(useBound(), query, options),
     useStorageInfo: () => useStorageInfoFor(useBound()),
     useMounts: (query = {}) => useMountsFor(useBound(), query),
-    useOutgoingShares: () => useOutgoingSharesFor(useBound())
+    useOutgoingShares: () => useOutgoingSharesFor(useBound()),
+    useShareInvites: (enabled) => useShareInvitesFor(useBound(), enabled),
+    useShareRecipients: (dids) => useShareRecipientsFor(useBound(), dids)
   };
 }
 
@@ -1090,19 +1206,140 @@ import {
   isValidElement,
   useContext as useContext3,
   useEffect as useEffect4,
-  useRef as useRef3,
+  useRef as useRef4,
   useState as useState4
 } from "react";
 import { Avatar } from "@base-ui/react/avatar";
 import { Dialog } from "@base-ui/react/dialog";
 import { Menu } from "@base-ui/react/menu";
 import { Tabs } from "@base-ui/react/tabs";
-import { BasicError as BasicError6 } from "@basictech/core";
-import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { BasicError as BasicError7 } from "@basictech/core";
+
+// src/avatar-marble.tsx
+import { useId } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var ELEMENTS = 3;
+var SIZE = 80;
+var COLORS = ["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"];
+function hashCode(value) {
+  let hash = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = (hash << 5) - hash + value.charCodeAt(index);
+    hash &= hash;
+  }
+  return Math.abs(hash);
+}
+function getDigit(value, position) {
+  return Math.floor(value / 10 ** position % 10);
+}
+function getUnit(value, range, position) {
+  const unit = value % range;
+  return position && getDigit(value, position) % 2 === 0 ? -unit : unit;
+}
+function generateProperties(seed) {
+  const value = hashCode(seed);
+  return Array.from({ length: ELEMENTS }, (_, index) => ({
+    color: COLORS[(value + index) % COLORS.length],
+    translateX: getUnit(value * (index + 1), SIZE / 10, 1),
+    translateY: getUnit(value * (index + 1), SIZE / 10, 2),
+    scale: 1.2 + getUnit(value * (index + 1), SIZE / 20) / 10,
+    rotate: getUnit(value * (index + 1), 360, 1)
+  }));
+}
+function MarbleAvatar({ seed }) {
+  const properties = generateProperties(seed);
+  const instanceId = useId().replaceAll(":", "");
+  const maskId = `basic-avatar-mask-${instanceId}`;
+  const filterId = `basic-avatar-filter-${instanceId}`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: `0 0 ${SIZE} ${SIZE}`,
+      width: "100%",
+      height: "100%",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx3(
+          "mask",
+          {
+            id: maskId,
+            maskUnits: "userSpaceOnUse",
+            x: "0",
+            y: "0",
+            width: SIZE,
+            height: SIZE,
+            children: /* @__PURE__ */ jsx3("rect", { width: SIZE, height: SIZE, rx: SIZE * 2, fill: "#FFFFFF" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("g", { mask: `url(#${maskId})`, children: [
+          /* @__PURE__ */ jsx3("rect", { width: SIZE, height: SIZE, fill: properties[0].color }),
+          /* @__PURE__ */ jsx3(
+            "path",
+            {
+              filter: `url(#${filterId})`,
+              d: "M32.414 59.35L50.376 70.5H72.5v-71H33.728L26.5 13.381l19.057 27.08L32.414 59.35z",
+              fill: properties[1].color,
+              transform: `translate(${properties[1].translateX} ${properties[1].translateY}) rotate(${properties[1].rotate} ${SIZE / 2} ${SIZE / 2}) scale(${properties[2].scale})`
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "path",
+            {
+              filter: `url(#${filterId})`,
+              style: { mixBlendMode: "overlay" },
+              d: "M22.216 24L0 46.75l14.108 38.129L78 86l-3.081-59.276-22.378 4.005 12.972 20.186-23.35 27.395L22.215 24z",
+              fill: properties[2].color,
+              transform: `translate(${properties[2].translateX} ${properties[2].translateY}) rotate(${properties[2].rotate} ${SIZE / 2} ${SIZE / 2}) scale(${properties[2].scale})`
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsxs(
+          "filter",
+          {
+            id: filterId,
+            filterUnits: "userSpaceOnUse",
+            colorInterpolationFilters: "sRGB",
+            children: [
+              /* @__PURE__ */ jsx3("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+              /* @__PURE__ */ jsx3(
+                "feBlend",
+                {
+                  in: "SourceGraphic",
+                  in2: "BackgroundImageFix",
+                  result: "shape"
+                }
+              ),
+              /* @__PURE__ */ jsx3("feGaussianBlur", { stdDeviation: "7", result: "effect1_foregroundBlur" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var AppearanceContext = createContext2({});
+function accentText(accent) {
+  if (!/^#([\da-f]{3}|[\da-f]{6})$/i.test(accent)) return "#fff";
+  const hex = accent.length === 4 ? accent.slice(1).split("").map((digit) => digit + digit).join("") : accent.slice(1);
+  const [red, green, blue] = [0, 2, 4].map((offset) => {
+    const channel = parseInt(hex.slice(offset, offset + 2), 16) / 255;
+    return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * red + 0.7152 * green + 0.0722 * blue > 0.179 ? "#000" : "#fff";
+}
 function appearanceStyle(appearance) {
   return {
-    ...appearance.accent ? { "--basic-accent": appearance.accent } : {},
+    ...appearance.base ? { "--basic-surface": appearance.base } : {},
+    ...appearance.accent ? {
+      "--basic-accent": appearance.accent,
+      "--basic-accent-text": accentText(appearance.accent)
+    } : {},
     ...appearance.radius ? { "--basic-radius": appearance.radius } : {}
   };
 }
@@ -1112,7 +1349,7 @@ function BasicUIProvider({
 }) {
   const parent = useContext3(AppearanceContext);
   const value = { ...parent, ...appearance };
-  return /* @__PURE__ */ jsx3(AppearanceContext.Provider, { value, children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(AppearanceContext.Provider, { value, children: /* @__PURE__ */ jsx4(
     "div",
     {
       className: "basic-ui",
@@ -1133,7 +1370,7 @@ function useAppearanceProps() {
 }
 var BasicButton = forwardRef(
   function BasicButton2({ variant = "outline", className = "", type = "button", ...props }, ref) {
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx4(
       "button",
       {
         ...props,
@@ -1148,8 +1385,8 @@ var BasicButton = forwardRef(
 function useAction() {
   const [pending, setPending] = useState4(false);
   const [error, setError] = useState4(null);
-  const busy = useRef3(false);
-  const mounted = useRef3(true);
+  const busy = useRef4(false);
+  const mounted = useRef4(true);
   useEffect4(() => {
     mounted.current = true;
     return () => {
@@ -1166,7 +1403,7 @@ function useAction() {
     } catch (cause) {
       if (mounted.current)
         setError(
-          cause instanceof BasicError6 && cause.code === "REDIRECT_URI_NOT_REGISTERED" ? "Sign-in is unavailable on this URL. Ask the app owner to register its callback URL in project settings." : cause instanceof Error ? cause.message : "The action failed. Please try again."
+          cause instanceof BasicError7 && cause.code === "REDIRECT_URI_NOT_REGISTERED" ? "Sign-in is unavailable on this URL. Ask the app owner to register its callback URL in project settings." : cause instanceof Error ? cause.message : "The action failed. Please try again."
         );
     } finally {
       busy.current = false;
@@ -1188,8 +1425,8 @@ function AuthButton({
   const auth = supplied ?? live;
   const action = useAction();
   const expired = auth.status === "expired";
-  return /* @__PURE__ */ jsxs("span", { className: "basic-action", children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2("span", { className: "basic-action", children: [
+    /* @__PURE__ */ jsx4(
       BasicButton,
       {
         ...props,
@@ -1205,29 +1442,44 @@ function AuthButton({
         children: action.pending ? "Please wait\u2026" : children ?? (signOut ? "Sign out" : expired ? "Sign in again" : "Sign in")
       }
     ),
-    /* @__PURE__ */ jsx3(ActionError, { error: action.error, onClose: action.clearError })
+    /* @__PURE__ */ jsx4(ActionError, { error: action.error, onClose: action.clearError })
   ] });
 }
 function SignInButton(props) {
-  return /* @__PURE__ */ jsx3(AuthButton, { ...props });
+  return /* @__PURE__ */ jsx4(AuthButton, { ...props });
 }
 function SignOutButton(props) {
-  return /* @__PURE__ */ jsx3(AuthButton, { ...props, signOut: true });
+  return /* @__PURE__ */ jsx4(AuthButton, { ...props, signOut: true });
+}
+var ANONYMOUS_ACCOUNT_NAME = "Local User";
+function accountName(profile, emptyFallback = "Guest") {
+  if (!profile) return emptyFallback;
+  return profile.name || (profile.kind === "anon" ? ANONYMOUS_ACCOUNT_NAME : displayHandle(profile.handle) || profile.email || "Account");
+}
+function avatarSeed(profile) {
+  if (!profile) return "guest";
+  return profile.did || profile.id && `account:${profile.id}` || profile.handle || profile.email || profile.name || "guest";
 }
 function UserAvatar({
   accounts,
   auth,
   projectProfile,
+  invites,
+  showInvites,
   allowAddAccount,
+  menuItems,
   ...avatarProps
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     UserMenu,
     {
       accounts,
       auth,
       projectProfile,
+      invites,
+      showInvites,
       allowAddAccount,
+      menuItems,
       sync: avatarProps.sync,
       showSyncBadge: avatarProps.showSyncBadge,
       avatarProps
@@ -1239,25 +1491,34 @@ function AccountAvatar({
   size = 32,
   showSyncBadge,
   sync,
-  className = "",
-  style,
   ...props
 }) {
   const accounts = useAccounts();
   const client = useRequiredClient();
   const profile = supplied === void 0 ? accounts.activeAccount : supplied;
-  const name = profile?.name || (profile?.kind === "anon" ? "Local account" : profile?.handle || profile?.email || "Guest");
-  const initials = name.trim().split(/\s+/).slice(0, 2).map((part) => Array.from(part)[0]).join("").toUpperCase();
-  const avatar = /* @__PURE__ */ jsxs(
+  const avatar = /* @__PURE__ */ jsx4(ProfileAvatar, { ...props, profile, size });
+  return showSyncBadge ?? client.mode === "sync" ? /* @__PURE__ */ jsxs2("span", { className: "basic-avatar-container", children: [
+    avatar,
+    /* @__PURE__ */ jsx4(SyncStatus, { sync, className: "basic-avatar-sync" })
+  ] }) : avatar;
+}
+function ProfileAvatar({
+  profile,
+  size = 32,
+  className = "",
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(
     Avatar.Root,
     {
       ...props,
       className: `basic-avatar ${className}`,
       style: { width: size, height: size, ...style },
       role: "img",
-      "aria-label": props["aria-label"] ?? name,
+      "aria-label": props["aria-label"] ?? accountName(profile),
       children: [
-        profile?.picture && /* @__PURE__ */ jsx3(
+        profile?.picture && /* @__PURE__ */ jsx4(
           Avatar.Image,
           {
             src: profile.picture,
@@ -1266,14 +1527,100 @@ function AccountAvatar({
             referrerPolicy: "no-referrer"
           }
         ),
-        /* @__PURE__ */ jsx3(Avatar.Fallback, { className: "basic-avatar-fallback", children: initials || "?" })
+        /* @__PURE__ */ jsx4(Avatar.Fallback, { className: "basic-avatar-fallback", children: /* @__PURE__ */ jsx4(MarbleAvatar, { seed: avatarSeed(profile) }) })
+      ]
+    }
+  );
+}
+function ShareRecipientAvatar({
+  recipient,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    ProfileAvatar,
+    {
+      title: displayHandle(recipient.handle) || recipient.name || recipient.did,
+      ...props,
+      profile: {
+        ...recipient,
+        name: recipient.name || displayHandle(recipient.handle) || recipient.did,
+        kind: "account"
+      }
+    }
+  );
+}
+function ShareRecipientLabel({
+  recipient,
+  size = 24,
+  className = "",
+  ...props
+}) {
+  const label = displayHandle(recipient.handle) || recipient.name || "Unknown user";
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      title: recipient.did,
+      ...props,
+      className: `basic-recipient-label ${className}`,
+      children: [
+        /* @__PURE__ */ jsx4(
+          ShareRecipientAvatar,
+          {
+            recipient,
+            size,
+            "aria-hidden": "true",
+            title: void 0
+          }
+        ),
+        /* @__PURE__ */ jsx4("span", { className: "basic-recipient-handle", children: label })
+      ]
+    }
+  );
+}
+function ShareRecipientAvatars({
+  recipients,
+  size = 32,
+  max = 4,
+  className = "",
+  ...props
+}) {
+  const unique = [
+    ...new Map(
+      recipients.map((recipient) => [recipient.did, recipient])
+    ).values()
+  ];
+  const visible = unique.slice(0, Math.max(1, max));
+  const remaining = unique.length - visible.length;
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      ...props,
+      className: `basic-recipient-avatars ${className}`,
+      role: "group",
+      "aria-label": props["aria-label"] ?? `Shared with ${unique.length} recipients`,
+      children: [
+        visible.map((recipient) => /* @__PURE__ */ jsx4(
+          ShareRecipientAvatar,
+          {
+            recipient,
+            size
+          },
+          recipient.did
+        )),
+        remaining > 0 && /* @__PURE__ */ jsxs2(
+          "span",
+          {
+            className: "basic-recipient-overflow",
+            "aria-label": `${remaining} more recipients`,
+            children: [
+              "+",
+              remaining
+            ]
+          }
+        )
       ]
     }
   );
-  return showSyncBadge ?? client.mode === "sync" ? /* @__PURE__ */ jsxs("span", { className: "basic-avatar-container", children: [
-    avatar,
-    /* @__PURE__ */ jsx3(SyncStatus, { sync, className: "basic-avatar-sync" })
-  ] }) : avatar;
 }
 function AuthStatus({
   auth: supplied,
@@ -1284,7 +1631,7 @@ function AuthStatus({
   const auth = supplied ?? live;
   const expired = auth.status === "expired";
   const label = !auth.isReady || auth.status === "bootstrapping" ? "Checking session" : expired ? "Session expired" : auth.status === "recovering" ? "Reconnecting session" : auth.isSignedIn ? "Signed in" : auth.isAnonymous ? "Guest \xB7 local only" : "Signed out";
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "span",
     {
       ...props,
@@ -1292,7 +1639,7 @@ function AuthStatus({
       className: `basic-status ${className}`,
       "data-tone": expired || auth.error ? "warning" : auth.isSignedIn ? "success" : "neutral",
       children: [
-        /* @__PURE__ */ jsx3("span", { className: "basic-dot" }),
+        /* @__PURE__ */ jsx4("span", { className: "basic-dot" }),
         label
       ]
     }
@@ -1322,7 +1669,7 @@ function SyncStatus({
     ended: "Access ended"
   };
   const label = issues ? `${issues} sync ${issues === 1 ? "issue" : "issues"}` : sync.status === "online" && sync.pendingCount ? "Syncing" : labels[sync.status];
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "span",
     {
       ...props,
@@ -1331,7 +1678,7 @@ function SyncStatus({
       className: `basic-status ${className}`,
       "data-tone": issues || ["error", "stale", "ended"].includes(sync.status) ? "warning" : sync.status === "online" && !sync.pendingCount ? "success" : ["bootstrapping", "connecting"].includes(sync.status) || sync.status === "online" && sync.pendingCount > 0 ? "progress" : "neutral",
       children: [
-        /* @__PURE__ */ jsx3("span", { className: "basic-dot" }),
+        /* @__PURE__ */ jsx4("span", { className: "basic-dot" }),
         label,
         sync.pendingCount > 0 && ` \xB7 ${sync.pendingCount} pending`
       ]
@@ -1342,7 +1689,7 @@ function displayHandle(handle) {
   return handle ? `@${handle.replace(/^@+/, "")}` : "";
 }
 function UserButton(props) {
-  return /* @__PURE__ */ jsx3(UserMenu, { ...props, trigger: "button" });
+  return /* @__PURE__ */ jsx4(UserMenu, { ...props, trigger: "button" });
 }
 function UserMenu({
   accounts: supplied,
@@ -1354,9 +1701,12 @@ function UserMenu({
   trigger = "avatar",
   avatarProps,
   projectProfile,
+  invites,
+  showInvites,
   allowAddAccount = true,
   className = "",
-  accountSettingsUrl
+  accountSettingsUrl,
+  menuItems = []
 }) {
   const liveAccounts = useAccounts();
   const liveAuth = useAuth();
@@ -1365,17 +1715,17 @@ function UserMenu({
   const action = useAction();
   const [settingsOpen, setSettingsOpen] = useState4(false);
   const [clearAccountId, setClearAccountId] = useState4(null);
-  const triggerRef = useRef3(null);
+  const triggerRef = useRef4(null);
   const appearance = useAppearanceProps();
   const expired = auth.status === "expired";
   const active = accounts.activeAccount;
   const otherAccounts = accounts.accounts.filter(
     (account) => account.id !== active?.id
   );
-  const name = active?.name || active?.kind !== "anon" && displayHandle(active?.handle) || "Local account";
-  return /* @__PURE__ */ jsxs("span", { className: `basic-action ${className}`, children: [
-    /* @__PURE__ */ jsxs(Menu.Root, { children: [
-      /* @__PURE__ */ jsxs(
+  const name = active ? accountName(active) : "Local account";
+  return /* @__PURE__ */ jsxs2("span", { className: `basic-action ${className}`, children: [
+    /* @__PURE__ */ jsxs2(Menu.Root, { children: [
+      /* @__PURE__ */ jsxs2(
         Menu.Trigger,
         {
           ref: triggerRef,
@@ -1384,7 +1734,7 @@ function UserMenu({
           disabled: !auth.isReady || action.pending,
           "aria-label": "Open user menu",
           children: [
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               AccountAvatar,
               {
                 profile: accounts.activeAccount,
@@ -1393,12 +1743,12 @@ function UserMenu({
                 ...avatarProps
               }
             ),
-            trigger === "button" && /* @__PURE__ */ jsxs(Fragment2, { children: [
-              /* @__PURE__ */ jsxs("span", { className: "basic-identity", children: [
-                /* @__PURE__ */ jsx3("strong", { children: name }),
-                active?.kind !== "anon" && active?.handle && /* @__PURE__ */ jsx3("small", { children: displayHandle(active.handle) })
+            trigger === "button" && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+              /* @__PURE__ */ jsxs2("span", { className: "basic-identity", children: [
+                /* @__PURE__ */ jsx4("strong", { children: name }),
+                active?.kind !== "anon" && active?.handle && /* @__PURE__ */ jsx4("small", { children: displayHandle(active.handle) })
               ] }),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 "svg",
                 {
                   className: "basic-chevron",
@@ -1411,16 +1761,16 @@ function UserMenu({
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx3("path", { d: "m6 9 6 6 6-6" })
+                  children: /* @__PURE__ */ jsx4("path", { d: "m6 9 6 6 6-6" })
                 }
               )
             ] })
           ]
         }
       ),
-      /* @__PURE__ */ jsx3(Menu.Portal, { children: /* @__PURE__ */ jsx3(Menu.Positioner, { sideOffset: 8, className: "basic-positioner", children: /* @__PURE__ */ jsxs(Menu.Popup, { ...appearance, className: "basic-ui basic-menu", children: [
-        /* @__PURE__ */ jsxs("div", { className: "basic-menu-profile", children: [
-          /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(Menu.Portal, { children: /* @__PURE__ */ jsx4(Menu.Positioner, { sideOffset: 8, className: "basic-positioner", children: /* @__PURE__ */ jsxs2(Menu.Popup, { ...appearance, className: "basic-ui basic-menu", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "basic-menu-profile", children: [
+          /* @__PURE__ */ jsx4(
             AccountAvatar,
             {
               profile: active,
@@ -1429,16 +1779,16 @@ function UserMenu({
               showSyncBadge: false
             }
           ),
-          /* @__PURE__ */ jsxs("span", { className: "basic-identity", children: [
-            /* @__PURE__ */ jsx3("strong", { children: active ? name : "No active account" }),
-            active?.kind !== "anon" && active?.handle && /* @__PURE__ */ jsx3("small", { children: displayHandle(active.handle) }),
-            /* @__PURE__ */ jsxs("span", { className: "basic-account-statuses", children: [
-              expired && /* @__PURE__ */ jsx3("span", { className: "basic-status", "data-tone": "warning", children: "Expired" }),
-              showSyncStatus && /* @__PURE__ */ jsx3(SyncStatus, { sync })
+          /* @__PURE__ */ jsxs2("span", { className: "basic-identity", children: [
+            /* @__PURE__ */ jsx4("strong", { children: active ? name : "No active account" }),
+            active?.kind !== "anon" && active?.handle && /* @__PURE__ */ jsx4("small", { children: displayHandle(active.handle) }),
+            /* @__PURE__ */ jsxs2("span", { className: "basic-account-statuses", children: [
+              expired && /* @__PURE__ */ jsx4("span", { className: "basic-status", "data-tone": "warning", children: "Expired" }),
+              showSyncStatus && /* @__PURE__ */ jsx4(SyncStatus, { sync })
             ] })
           ] })
         ] }),
-        expired && /* @__PURE__ */ jsx3(
+        expired && /* @__PURE__ */ jsx4(
           Menu.Item,
           {
             className: "basic-menu-item basic-menu-reauth",
@@ -1447,13 +1797,13 @@ function UserMenu({
             children: "Sign in again"
           }
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs2(
           Menu.Item,
           {
             className: "basic-menu-item basic-manage-account",
             onClick: () => setSettingsOpen(true),
             children: [
-              /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsxs2(
                 "svg",
                 {
                   className: "basic-menu-icon",
@@ -1467,8 +1817,8 @@ function UserMenu({
                   strokeLinejoin: "round",
                   "aria-hidden": "true",
                   children: [
-                    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "7", r: "4" }),
-                    /* @__PURE__ */ jsx3("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" })
+                    /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "7", r: "4" }),
+                    /* @__PURE__ */ jsx4("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" })
                   ]
                 }
               ),
@@ -1476,14 +1826,30 @@ function UserMenu({
             ]
           }
         ),
-        (auth.isSignedIn || expired || active?.kind === "anon") && /* @__PURE__ */ jsxs(
+        menuItems.map((item) => /* @__PURE__ */ jsxs2(
+          Menu.Item,
+          {
+            className: "basic-menu-item",
+            render: item.href !== void 0 ? /* @__PURE__ */ jsx4("a", { href: item.href }) : void 0,
+            disabled: item.disabled || action.pending,
+            onClick: () => {
+              if (item.onClick) void action.run(item.onClick);
+            },
+            children: [
+              /* @__PURE__ */ jsx4("span", { className: "basic-menu-icon", "aria-hidden": "true", children: item.icon }),
+              item.label
+            ]
+          },
+          item.id
+        )),
+        (auth.isSignedIn || expired || active?.kind === "anon") && /* @__PURE__ */ jsxs2(
           Menu.Item,
           {
             className: "basic-menu-item basic-menu-signout",
             disabled: action.pending,
             onClick: () => active?.kind === "anon" ? setClearAccountId(active.id) : void action.run(() => auth.signOut()),
             children: [
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 "svg",
                 {
                   className: "basic-menu-icon",
@@ -1496,25 +1862,25 @@ function UserMenu({
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx3("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" })
+                  children: /* @__PURE__ */ jsx4("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" })
                 }
               ),
               active?.kind === "anon" ? "Clear account" : "Sign out"
             ]
           }
         ),
-        otherAccounts.length > 0 && /* @__PURE__ */ jsxs(Fragment2, { children: [
-          /* @__PURE__ */ jsx3(Menu.Separator, { className: "basic-separator" }),
-          /* @__PURE__ */ jsx3("div", { className: "basic-menu-heading", children: "Switch accounts" })
+        otherAccounts.length > 0 && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx4(Menu.Separator, { className: "basic-separator" }),
+          /* @__PURE__ */ jsx4("div", { className: "basic-menu-heading", children: "Switch accounts" })
         ] }),
-        otherAccounts.map((account) => /* @__PURE__ */ jsxs(
+        otherAccounts.map((account) => /* @__PURE__ */ jsxs2(
           Menu.Item,
           {
             className: "basic-menu-item",
             disabled: action.pending,
             onClick: () => void action.run(() => accounts.switchAccount(account.id)),
             children: [
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 AccountAvatar,
                 {
                   profile: account,
@@ -1523,16 +1889,16 @@ function UserMenu({
                   showSyncBadge: false
                 }
               ),
-              /* @__PURE__ */ jsxs("span", { className: "basic-identity", children: [
-                /* @__PURE__ */ jsx3("strong", { children: account.name || account.kind !== "anon" && displayHandle(account.handle) || (account.kind === "anon" ? "Local account" : "Account") }),
-                account.kind !== "anon" && account.handle && /* @__PURE__ */ jsx3("small", { children: displayHandle(account.handle) })
+              /* @__PURE__ */ jsxs2("span", { className: "basic-identity", children: [
+                /* @__PURE__ */ jsx4("strong", { children: accountName(account, "Account") }),
+                account.kind !== "anon" && account.handle && /* @__PURE__ */ jsx4("small", { children: displayHandle(account.handle) })
               ] }),
-              /* @__PURE__ */ jsx3("span", { className: "basic-account-statuses", children: account.auth.status === "expired" ? /* @__PURE__ */ jsx3("span", { className: "basic-status", "data-tone": "warning", children: "Expired" }) : null })
+              /* @__PURE__ */ jsx4("span", { className: "basic-account-statuses", children: account.auth.status === "expired" ? /* @__PURE__ */ jsx4("span", { className: "basic-status", "data-tone": "warning", children: "Expired" }) : null })
             ]
           },
           account.id
         )),
-        (allowAddAccount || !auth.isSignedIn && !expired) && /* @__PURE__ */ jsx3(
+        (allowAddAccount || !auth.isSignedIn && !expired) && /* @__PURE__ */ jsxs2(
           Menu.Item,
           {
             className: "basic-menu-item",
@@ -1540,12 +1906,29 @@ function UserMenu({
             onClick: () => void action.run(
               () => allowAddAccount ? accounts.addAccount({ signIn: true }) : auth.signIn()
             ),
-            children: "\uFF0B Add account"
+            children: [
+              /* @__PURE__ */ jsx4(
+                "svg",
+                {
+                  className: "basic-menu-icon",
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.75",
+                  strokeLinecap: "round",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx4("path", { d: "M12 5v14M5 12h14" })
+                }
+              ),
+              "Add account"
+            ]
           }
         )
       ] }) }) })
     ] }),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       ActionError,
       {
         error: action.error,
@@ -1553,7 +1936,7 @@ function UserMenu({
         finalFocus: triggerRef
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       Modal,
       {
         open: clearAccountId !== null,
@@ -1564,8 +1947,8 @@ function UserMenu({
         finalFocus: triggerRef,
         title: "Clear local account?",
         description: "This deletes this account\u2019s local data, including unsynced changes. This cannot be undone.",
-        children: /* @__PURE__ */ jsxs("div", { className: "basic-actions", children: [
-          /* @__PURE__ */ jsx3(
+        children: /* @__PURE__ */ jsxs2("div", { className: "basic-actions", children: [
+          /* @__PURE__ */ jsx4(
             BasicButton,
             {
               disabled: action.pending,
@@ -1573,7 +1956,7 @@ function UserMenu({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             BasicButton,
             {
               disabled: action.pending,
@@ -1589,7 +1972,7 @@ function UserMenu({
         ] })
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       AccountSettingsModal,
       {
         auth,
@@ -1600,6 +1983,8 @@ function UserMenu({
         finalFocus: triggerRef,
         accountSettingsUrl,
         projectProfile,
+        invites,
+        showInvites,
         sync
       }
     )
@@ -1610,7 +1995,7 @@ function ActionError({
   onClose,
   finalFocus
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     Modal,
     {
       open: !!error,
@@ -1622,8 +2007,8 @@ function ActionError({
       title: "Unable to complete action",
       description: "Your request could not be completed.",
       children: [
-        /* @__PURE__ */ jsx3("p", { role: "alert", className: "basic-error", children: error }),
-        /* @__PURE__ */ jsx3(BasicButton, { onClick: onClose, children: "Dismiss" })
+        /* @__PURE__ */ jsx4("p", { role: "alert", className: "basic-error", children: error }),
+        /* @__PURE__ */ jsx4(BasicButton, { onClick: onClose, children: "Dismiss" })
       ]
     }
   );
@@ -1635,29 +2020,36 @@ function Modal({
   finalFocus,
   title,
   description,
+  hideTitle = false,
   header,
   sectionLabel,
   children
 }) {
   const appearance = useAppearanceProps();
-  return /* @__PURE__ */ jsxs(Dialog.Root, { open, onOpenChange, children: [
-    trigger !== null && (isValidElement(trigger) ? /* @__PURE__ */ jsx3(Dialog.Trigger, { render: trigger }) : /* @__PURE__ */ jsx3(Dialog.Trigger, { render: /* @__PURE__ */ jsx3(BasicButton, {}), children: trigger ?? title })),
-    /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
-      /* @__PURE__ */ jsx3(Dialog.Backdrop, { className: "basic-backdrop" }),
-      /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(Dialog.Root, { open, onOpenChange, children: [
+    trigger !== null && (isValidElement(trigger) ? /* @__PURE__ */ jsx4(Dialog.Trigger, { render: trigger }) : /* @__PURE__ */ jsx4(Dialog.Trigger, { render: /* @__PURE__ */ jsx4(BasicButton, {}), children: trigger ?? title })),
+    /* @__PURE__ */ jsxs2(Dialog.Portal, { children: [
+      /* @__PURE__ */ jsx4(Dialog.Backdrop, { className: "basic-backdrop" }),
+      /* @__PURE__ */ jsxs2(
         Dialog.Popup,
         {
           ...appearance,
           finalFocus,
           className: "basic-ui basic-dialog",
           children: [
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsxs2(
               "div",
               {
-                className: `basic-dialog-heading${header ? " basic-dialog-heading-overlay" : ""}`,
+                className: `basic-dialog-heading${header || hideTitle ? " basic-dialog-heading-overlay" : ""}`,
                 children: [
-                  /* @__PURE__ */ jsx3(Dialog.Title, { className: header ? "basic-sr-only" : "basic-title", children: title }),
-                  /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsx4(
+                    Dialog.Title,
+                    {
+                      className: header || hideTitle ? "basic-sr-only" : "basic-title",
+                      children: title
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4(
                     Dialog.Close,
                     {
                       className: "basic-button",
@@ -1669,14 +2061,14 @@ function Modal({
               }
             ),
             header,
-            /* @__PURE__ */ jsx3(
+            description && /* @__PURE__ */ jsx4(
               Dialog.Description,
               {
                 className: header ? "basic-sr-only" : "basic-muted",
                 children: description
               }
             ),
-            sectionLabel && /* @__PURE__ */ jsx3("div", { className: "basic-modal-section", children: sectionLabel }),
+            sectionLabel && /* @__PURE__ */ jsx4("div", { className: "basic-modal-section", children: sectionLabel }),
             children
           ]
         }
@@ -1689,6 +2081,8 @@ function AccountSettingsModal({
   accounts: suppliedAccounts,
   accountSettingsUrl,
   projectProfile,
+  invites,
+  showInvites = true,
   sync,
   children,
   ...props
@@ -1727,27 +2121,28 @@ function AccountSettingsModal({
     ["Conflicts", String(syncState.conflicts.length)]
   ];
   const diagnostics = JSON.stringify(Object.fromEntries(details), null, 2);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     Modal,
     {
       ...props,
       title: "Account settings",
       description: "Your identity and session on this device.",
-      header: /* @__PURE__ */ jsx3(AccountHeader, { account: accounts.activeAccount, sync }),
-      children: /* @__PURE__ */ jsxs(Tabs.Root, { defaultValue: "profile", children: [
-        /* @__PURE__ */ jsxs(
+      header: /* @__PURE__ */ jsx4(AccountHeader, { account: accounts.activeAccount, sync }),
+      children: /* @__PURE__ */ jsxs2(Tabs.Root, { defaultValue: "profile", children: [
+        /* @__PURE__ */ jsxs2(
           Tabs.List,
           {
             className: "basic-tabs",
             "aria-label": "Account settings sections",
             children: [
-              /* @__PURE__ */ jsx3(Tabs.Tab, { value: "profile", children: "Profile" }),
-              /* @__PURE__ */ jsx3(Tabs.Tab, { value: "advanced", children: "Advanced" })
+              /* @__PURE__ */ jsx4(Tabs.Tab, { value: "profile", children: "Profile" }),
+              showInvites && /* @__PURE__ */ jsx4(Tabs.Tab, { value: "invites", children: "Share Invites" }),
+              /* @__PURE__ */ jsx4(Tabs.Tab, { value: "advanced", children: "Advanced" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(Tabs.Panel, { value: "profile", keepMounted: true, children: [
-          auth.isSignedIn && /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs2(Tabs.Panel, { value: "profile", keepMounted: true, children: [
+          auth.isSignedIn && /* @__PURE__ */ jsx4(
             ProjectProfileEditor,
             {
               profile: projectProfile,
@@ -1755,18 +2150,19 @@ function AccountSettingsModal({
             },
             accounts.activeAccount?.id ?? auth.did
           ),
-          accountSettingsUrl && /* @__PURE__ */ jsx3("a", { className: "basic-link", href: accountSettingsUrl, children: "Manage profile and security \u2197" }),
+          accountSettingsUrl && /* @__PURE__ */ jsx4("a", { className: "basic-link", href: accountSettingsUrl, children: "Manage profile and security \u2197" }),
           children,
-          !auth.isSignedIn && /* @__PURE__ */ jsx3("div", { className: "basic-actions", children: /* @__PURE__ */ jsx3(SignInButton, { auth }) })
+          !auth.isSignedIn && /* @__PURE__ */ jsx4("div", { className: "basic-actions", children: /* @__PURE__ */ jsx4(SignInButton, { auth }) })
         ] }),
-        /* @__PURE__ */ jsxs(Tabs.Panel, { value: "advanced", children: [
-          /* @__PURE__ */ jsx3("p", { className: "basic-muted", children: "Read-only diagnostics for this account." }),
-          /* @__PURE__ */ jsx3("dl", { className: "basic-details", children: details.map(([label, value]) => /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx3("dt", { children: label }),
-            /* @__PURE__ */ jsx3("dd", { children: value })
+        showInvites && /* @__PURE__ */ jsx4(Tabs.Panel, { value: "invites", children: /* @__PURE__ */ jsx4(ShareInvites, { auth, accounts, invites }) }),
+        /* @__PURE__ */ jsxs2(Tabs.Panel, { value: "advanced", children: [
+          /* @__PURE__ */ jsx4("p", { className: "basic-muted", children: "Read-only diagnostics for this account." }),
+          /* @__PURE__ */ jsx4("dl", { className: "basic-details", children: details.map(([label, value]) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx4("dt", { children: label }),
+            /* @__PURE__ */ jsx4("dd", { children: value })
           ] }, label)) }),
-          /* @__PURE__ */ jsxs("div", { className: "basic-actions", children: [
-            /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsxs2("div", { className: "basic-actions", children: [
+            /* @__PURE__ */ jsx4(
               BasicButton,
               {
                 disabled: copyAction.pending,
@@ -1782,9 +2178,9 @@ function AccountSettingsModal({
                 children: "Copy to clipboard"
               }
             ),
-            copied === diagnostics && /* @__PURE__ */ jsx3("span", { role: "status", className: "basic-muted", children: "Copied" })
+            copied === diagnostics && /* @__PURE__ */ jsx4("span", { role: "status", className: "basic-muted", children: "Copied" })
           ] }),
-          copyAction.error && /* @__PURE__ */ jsx3("p", { role: "alert", className: "basic-error", children: copyAction.error })
+          copyAction.error && /* @__PURE__ */ jsx4("p", { role: "alert", className: "basic-error", children: copyAction.error })
         ] })
       ] })
     }
@@ -1794,8 +2190,8 @@ function AccountHeader({
   account,
   sync
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "basic-profile", children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2("div", { className: "basic-profile", children: [
+    /* @__PURE__ */ jsx4(
       AccountAvatar,
       {
         profile: account,
@@ -1804,10 +2200,10 @@ function AccountHeader({
         showSyncBadge: false
       }
     ),
-    /* @__PURE__ */ jsxs("span", { className: "basic-identity", children: [
-      /* @__PURE__ */ jsx3("strong", { children: account?.name || account?.kind !== "anon" && displayHandle(account?.handle) || "Local account" }),
-      account?.kind !== "anon" && account?.handle && /* @__PURE__ */ jsx3("small", { children: displayHandle(account.handle) }),
-      /* @__PURE__ */ jsx3("span", { className: "basic-account-statuses", children: /* @__PURE__ */ jsx3(SyncStatus, { sync }) })
+    /* @__PURE__ */ jsxs2("span", { className: "basic-identity", children: [
+      /* @__PURE__ */ jsx4("strong", { children: account ? accountName(account) : "Local account" }),
+      account?.kind !== "anon" && account?.handle && /* @__PURE__ */ jsx4("small", { children: displayHandle(account.handle) }),
+      /* @__PURE__ */ jsx4("span", { className: "basic-account-statuses", children: /* @__PURE__ */ jsx4(SyncStatus, { sync }) })
     ] })
   ] });
 }
@@ -1820,7 +2216,7 @@ function ProjectProfileEditor({
   const action = useAction();
   const [draft, setDraft] = useState4({});
   const [saved, setSaved] = useState4(false);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "form",
     {
       className: "basic-profile-editor",
@@ -1834,15 +2230,15 @@ function ProjectProfileEditor({
         });
       },
       children: [
-        /* @__PURE__ */ jsx3("h3", { className: "basic-section-label", children: "Personal information" }),
-        /* @__PURE__ */ jsx3("p", { className: "basic-muted", children: "Only this app sees these overrides. Clear a field to use your universal profile value." }),
-        profile.isLoading ? /* @__PURE__ */ jsx3("p", { role: "status", children: "Loading project profile\u2026" }) : profile.error ? /* @__PURE__ */ jsxs(Fragment2, { children: [
-          /* @__PURE__ */ jsx3("p", { role: "alert", className: "basic-error", children: profile.error.message }),
-          /* @__PURE__ */ jsx3(BasicButton, { onClick: profile.refresh, children: "Retry profile" })
-        ] }) : profile.data && /* @__PURE__ */ jsxs("fieldset", { disabled: !canWrite || action.pending, children: [
-          /* @__PURE__ */ jsxs("label", { className: "basic-field", children: [
+        /* @__PURE__ */ jsx4("h3", { className: "basic-section-label", children: "Personal information" }),
+        /* @__PURE__ */ jsx4("p", { className: "basic-muted", children: "Only this app sees these overrides. Clear a field to use your universal profile value." }),
+        profile.isLoading ? /* @__PURE__ */ jsx4("p", { role: "status", children: "Loading project profile\u2026" }) : profile.error ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx4("p", { role: "alert", className: "basic-error", children: profile.error.message }),
+          /* @__PURE__ */ jsx4(BasicButton, { onClick: profile.refresh, children: "Retry profile" })
+        ] }) : profile.data && /* @__PURE__ */ jsxs2("fieldset", { disabled: !canWrite || action.pending, children: [
+          /* @__PURE__ */ jsxs2("label", { className: "basic-field", children: [
             "Display name",
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               "input",
               {
                 className: "basic-input",
@@ -1859,8 +2255,8 @@ function ProjectProfileEditor({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "basic-actions basic-modal-footer", children: [
-            /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsxs2("div", { className: "basic-actions basic-modal-footer", children: [
+            /* @__PURE__ */ jsx4(
               BasicButton,
               {
                 variant: "ghost",
@@ -1871,7 +2267,7 @@ function ProjectProfileEditor({
                 children: "Cancel"
               }
             ),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               BasicButton,
               {
                 type: "submit",
@@ -1882,17 +2278,205 @@ function ProjectProfileEditor({
             )
           ] })
         ] }),
-        action.error && /* @__PURE__ */ jsx3("p", { role: "alert", className: "basic-error", children: action.error }),
-        saved && /* @__PURE__ */ jsx3("p", { role: "status", children: "Project profile saved." })
+        action.error && /* @__PURE__ */ jsx4("p", { role: "alert", className: "basic-error", children: action.error }),
+        saved && /* @__PURE__ */ jsx4("p", { role: "status", children: "Project profile saved." })
       ]
     }
   );
 }
+function ShareInvites({
+  auth: suppliedAuth,
+  accounts: suppliedAccounts,
+  invites,
+  className = "",
+  ...props
+}) {
+  const liveAuth = useAuth();
+  const liveAccounts = useAccounts();
+  const auth = suppliedAuth ?? liveAuth;
+  const accounts = suppliedAccounts ?? liveAccounts;
+  return /* @__PURE__ */ jsxs2(
+    "section",
+    {
+      ...props,
+      className: `basic-invites ${className}`,
+      "aria-label": props["aria-label"] ?? "Share Invites",
+      children: [
+        (!auth.isReady || !auth.isSignedIn) && /* @__PURE__ */ jsx4("h3", { className: "basic-title", children: "Share Invites" }),
+        !auth.isReady ? /* @__PURE__ */ jsx4("p", { role: "status", children: "Checking session\u2026" }) : !auth.isSignedIn ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx4("p", { className: "basic-muted", children: "Sign in to view invites." }),
+          /* @__PURE__ */ jsx4(SignInButton, { auth })
+        ] }) : /* @__PURE__ */ jsx4(
+          ShareInvitesContent,
+          {
+            invites,
+            canWrite: auth.canWrite
+          },
+          accounts.activeAccount?.id ?? auth.did
+        )
+      ]
+    }
+  );
+}
+function ShareInvitesContent({
+  invites: supplied,
+  canWrite
+}) {
+  const live = useShareInvites(supplied === void 0);
+  const invites = supplied ?? live;
+  const action = useAction();
+  const [message, setMessage] = useState4("");
+  const visible = invites.data.filter((invite) => invite.state !== "deleted");
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsxs2("div", { className: "basic-section-heading", children: [
+      /* @__PURE__ */ jsx4("h3", { className: "basic-title", children: "Share Invites" }),
+      /* @__PURE__ */ jsx4(
+        BasicButton,
+        {
+          disabled: invites.isLoading || action.pending,
+          onClick: invites.refresh,
+          children: "Refresh"
+        }
+      )
+    ] }),
+    !canWrite && /* @__PURE__ */ jsx4("p", { className: "basic-error", children: "Read-only session. Invite changes are disabled." }),
+    action.error && /* @__PURE__ */ jsx4("p", { role: "alert", className: "basic-error", children: action.error }),
+    message && /* @__PURE__ */ jsx4("p", { role: "status", children: message }),
+    action.pending && /* @__PURE__ */ jsx4("p", { role: "status", children: "Updating invite\u2026" }),
+    invites.isLoading ? /* @__PURE__ */ jsx4("p", { role: "status", children: "Loading invites\u2026" }) : invites.error ? /* @__PURE__ */ jsx4("p", { role: "alert", className: "basic-error", children: invites.error.message }) : !visible.length ? /* @__PURE__ */ jsx4("p", { className: "basic-empty", children: "No share invites." }) : /* @__PURE__ */ jsx4("ul", { className: "basic-share-list basic-invite-list", children: visible.map((invite) => {
+      const title = invite.display.shareName || invite.display.repoName || "Shared data";
+      return /* @__PURE__ */ jsx4(
+        ShareInviteRow,
+        {
+          invite,
+          title,
+          resolveContactHandle: invites.resolveContactHandle,
+          disabled: !canWrite || action.pending,
+          onDecision: (decision) => void action.run(async () => {
+            setMessage("");
+            await invites[decision](invite.id);
+            setMessage(
+              `${decision === "accept" ? "Accepted" : "Declined"} \u201C${title}\u201D.`
+            );
+          })
+        },
+        invite.id
+      );
+    }) })
+  ] });
+}
+function ShareInviteRow({
+  invite,
+  title,
+  resolveContactHandle,
+  disabled,
+  onDecision
+}) {
+  const did = invite.originOwnerDid;
+  const [sender, setSender] = useState4(null);
+  useEffect4(() => {
+    let active = true;
+    void resolveContactHandle(did).then(
+      (handle2) => {
+        if (active) setSender({ did, handle: handle2 });
+      },
+      () => {
+        if (active) setSender({ did, handle: null });
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [did, resolveContactHandle]);
+  const handle = sender?.did === did ? sender.handle : null;
+  const pending = invite.state === "pending";
+  const accepting = invite.state === "accepting";
+  const expiresAt = new Date(invite.acceptBy);
+  const expired = expiresAt.getTime() <= Date.now();
+  const blocked = invite.compatibility.state === "app_connection_required" ? "Connect this app to accept." : invite.compatibility.state === "compatible_repo_required" ? "A compatible repository is required." : null;
+  const status = pending && !expired ? null : (pending || accepting) && expired ? "Expired" : accepting ? "Retry to finish accepting" : invite.state === "accepted" ? "Accepted" : invite.state === "declined" ? "Declined" : "Acceptance rejected";
+  return /* @__PURE__ */ jsxs2("li", { children: [
+    /* @__PURE__ */ jsx4(
+      ShareRecipientAvatar,
+      {
+        recipient: {
+          did,
+          name: handle ? displayHandle(handle) : "Unknown sender"
+        },
+        size: 32
+      }
+    ),
+    /* @__PURE__ */ jsxs2("div", { className: "basic-identity", children: [
+      /* @__PURE__ */ jsx4("strong", { children: title }),
+      /* @__PURE__ */ jsx4("small", { children: handle ? displayHandle(handle) : "Unknown sender" }),
+      /* @__PURE__ */ jsx4("small", { children: invite.role === "editor" ? "Can edit" : "Can view" }),
+      status && /* @__PURE__ */ jsx4("span", { className: "basic-invite-state", children: status }),
+      blocked && (pending || accepting) && /* @__PURE__ */ jsx4("p", { className: "basic-error", children: blocked })
+    ] }),
+    (pending || accepting) && /* @__PURE__ */ jsxs2("div", { className: "basic-invite-actions", children: [
+      /* @__PURE__ */ jsx4(
+        BasicButton,
+        {
+          variant: "solid",
+          disabled: disabled || expired || !!blocked,
+          onClick: () => onDecision("accept"),
+          children: accepting ? "Retry acceptance" : "Accept"
+        }
+      ),
+      pending && /* @__PURE__ */ jsx4(
+        BasicButton,
+        {
+          disabled,
+          onClick: () => onDecision("decline"),
+          children: "Decline"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("details", { className: "basic-invite-details", children: [
+      /* @__PURE__ */ jsx4("summary", { children: "Details" }),
+      /* @__PURE__ */ jsxs2("div", { className: "basic-invite-scope", children: [
+        invite.scope.map((scope, index) => /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx4("strong", { children: scope.table }),
+          " \xB7",
+          " ",
+          scope.recordIds ? `${scope.recordIds.length} selected records` : "all records",
+          scope.recordIds && /* @__PURE__ */ jsx4("code", { children: scope.recordIds.join(", ") })
+        ] }, index)),
+        /* @__PURE__ */ jsxs2("small", { children: [
+          "Sender DID: ",
+          did
+        ] }),
+        /* @__PURE__ */ jsxs2("small", { children: [
+          "Expires",
+          " ",
+          /* @__PURE__ */ jsxs2("time", { dateTime: invite.acceptBy, children: [
+            expiresAt.toLocaleString("en-US", {
+              dateStyle: "medium",
+              timeStyle: "short",
+              timeZone: "UTC"
+            }),
+            " ",
+            "UTC"
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ShareInvitesModal({
+  auth,
+  accounts,
+  invites,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(Modal, { ...props, title: "Share Invites", hideTitle: true, children: /* @__PURE__ */ jsx4(ShareInvites, { auth, accounts, invites }) });
+}
 function SharesModal({
   auth: supplied,
   accounts: suppliedAccounts,
   sync,
   shares,
+  invites,
   scope,
   repo = "default",
   ...props
@@ -1900,37 +2484,43 @@ function SharesModal({
   const live = useAuth();
   const liveAccounts = useAccounts();
   const auth = supplied ?? live;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     Modal,
     {
       ...props,
       title: "Shares",
       description: "Manage incoming invitations and share access to selected data.",
-      header: /* @__PURE__ */ jsx3(
+      header: /* @__PURE__ */ jsx4(
         AccountHeader,
         {
           account: (suppliedAccounts ?? liveAccounts).activeAccount,
           sync
         }
       ),
-      children: !auth.isReady ? /* @__PURE__ */ jsx3("p", { role: "status", children: "Checking session\u2026" }) : !auth.isSignedIn ? /* @__PURE__ */ jsxs(Fragment2, { children: [
-        /* @__PURE__ */ jsx3("p", { className: "basic-muted", children: "Sign in to share data." }),
-        /* @__PURE__ */ jsx3(SignInButton, { auth })
-      ] }) : /* @__PURE__ */ jsx3(
+      children: !auth.isReady ? /* @__PURE__ */ jsx4("p", { role: "status", children: "Checking session\u2026" }) : !auth.isSignedIn ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx4("p", { className: "basic-muted", children: "Sign in to share data." }),
+        /* @__PURE__ */ jsx4(SignInButton, { auth })
+      ] }) : /* @__PURE__ */ jsx4(
         SharesContent,
         {
           shares,
+          invites,
+          auth,
+          accounts: suppliedAccounts ?? liveAccounts,
           scope,
           repo,
           canWrite: auth.canWrite
         },
-        auth.did ?? "account"
+        (suppliedAccounts ?? liveAccounts).activeAccount?.id ?? auth.did
       )
     }
   );
 }
 function SharesContent({
   shares: supplied,
+  invites,
+  auth,
+  accounts,
   scope,
   repo,
   canWrite
@@ -1945,29 +2535,25 @@ function SharesContent({
   const scopeValid = scope.length > 0 && scope.every(
     (item) => item.table.trim() && (item.recordIds === void 0 || item.recordIds.length > 0)
   );
-  return /* @__PURE__ */ jsxs(Tabs.Root, { defaultValue: "outgoing", className: "basic-shares", children: [
-    /* @__PURE__ */ jsxs(Tabs.List, { className: "basic-tabs", "aria-label": "Share direction", children: [
-      /* @__PURE__ */ jsx3(Tabs.Tab, { value: "outgoing", children: "Outgoing" }),
-      /* @__PURE__ */ jsx3(Tabs.Tab, { value: "incoming", children: "Incoming invitations" })
+  return /* @__PURE__ */ jsxs2(Tabs.Root, { defaultValue: "outgoing", className: "basic-shares", children: [
+    /* @__PURE__ */ jsxs2(Tabs.List, { className: "basic-tabs", "aria-label": "Share direction", children: [
+      /* @__PURE__ */ jsx4(Tabs.Tab, { value: "outgoing", children: "Outgoing" }),
+      /* @__PURE__ */ jsx4(Tabs.Tab, { value: "incoming", children: "Share Invites" })
     ] }),
-    /* @__PURE__ */ jsx3(Tabs.Panel, { value: "incoming", children: /* @__PURE__ */ jsxs("section", { "aria-label": "Incoming invitations", children: [
-      /* @__PURE__ */ jsx3("h3", { className: "basic-title", children: "Incoming invitations" }),
-      /* @__PURE__ */ jsx3("p", { className: "basic-muted", children: "View, accept, or decline incoming invitations in Basic ID. Your app session cannot access the account-wide inbox." }),
-      /* @__PURE__ */ jsx3("a", { className: "basic-link", href: shares.manageUrl(), children: "Open incoming invitations in Basic ID \u2197" })
-    ] }) }),
-    /* @__PURE__ */ jsxs(Tabs.Panel, { value: "outgoing", children: [
-      /* @__PURE__ */ jsx3("p", { className: "basic-muted", children: "Revoking access stops future requests. It cannot retract data the recipient already downloaded." }),
-      /* @__PURE__ */ jsxs("div", { className: "basic-scope", children: [
-        /* @__PURE__ */ jsx3("strong", { children: "New invitation permissions" }),
-        scope.map((item, index) => /* @__PURE__ */ jsxs("span", { children: [
+    /* @__PURE__ */ jsx4(Tabs.Panel, { value: "incoming", children: /* @__PURE__ */ jsx4(ShareInvites, { invites, auth, accounts }) }),
+    /* @__PURE__ */ jsxs2(Tabs.Panel, { value: "outgoing", children: [
+      /* @__PURE__ */ jsx4("p", { className: "basic-muted", children: "Revoking access stops future requests. It cannot retract data the recipient already downloaded." }),
+      /* @__PURE__ */ jsxs2("div", { className: "basic-scope", children: [
+        /* @__PURE__ */ jsx4("strong", { children: "New invitation permissions" }),
+        scope.map((item, index) => /* @__PURE__ */ jsxs2("span", { children: [
           item.table,
           " \xB7",
           " ",
           item.recordIds ? `${item.recordIds.length} selected records` : "all records"
         ] }, index))
       ] }),
-      !canWrite && /* @__PURE__ */ jsx3("p", { className: "basic-error", children: "This session is read only. Sharing changes are disabled." }),
-      /* @__PURE__ */ jsxs(
+      !canWrite && /* @__PURE__ */ jsx4("p", { className: "basic-error", children: "This session is read only. Sharing changes are disabled." }),
+      /* @__PURE__ */ jsxs2(
         "form",
         {
           className: "basic-share-form",
@@ -1987,9 +2573,9 @@ function SharesContent({
             });
           },
           children: [
-            /* @__PURE__ */ jsxs("label", { className: "basic-field", children: [
+            /* @__PURE__ */ jsxs2("label", { className: "basic-field", children: [
               "Recipient handle or DID",
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   className: "basic-input",
@@ -2001,9 +2587,9 @@ function SharesContent({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs("label", { className: "basic-field", children: [
+            /* @__PURE__ */ jsxs2("label", { className: "basic-field", children: [
               "Permission",
-              /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsxs2(
                 "select",
                 {
                   className: "basic-input",
@@ -2011,13 +2597,13 @@ function SharesContent({
                   onChange: (event) => setRole(event.target.value),
                   disabled: action.pending || !canWrite,
                   children: [
-                    /* @__PURE__ */ jsx3("option", { value: "viewer", children: "Can view" }),
-                    /* @__PURE__ */ jsx3("option", { value: "editor", children: "Can edit" })
+                    /* @__PURE__ */ jsx4("option", { value: "viewer", children: "Can view" }),
+                    /* @__PURE__ */ jsx4("option", { value: "editor", children: "Can edit" })
                   ]
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               BasicButton,
               {
                 type: "submit",
@@ -2029,12 +2615,12 @@ function SharesContent({
           ]
         }
       ),
-      !scopeValid && /* @__PURE__ */ jsx3("p", { role: "alert", className: "basic-error", children: "Select at least one table or record to share." }),
-      action.error && /* @__PURE__ */ jsx3("p", { role: "alert", className: "basic-error", children: action.error }),
-      message && /* @__PURE__ */ jsx3("p", { role: "status", className: "basic-muted", children: message }),
-      /* @__PURE__ */ jsxs("div", { className: "basic-section-heading", children: [
-        /* @__PURE__ */ jsx3("h3", { className: "basic-title", children: "Outgoing shares \xB7 all permissions" }),
-        /* @__PURE__ */ jsx3(
+      !scopeValid && /* @__PURE__ */ jsx4("p", { role: "alert", className: "basic-error", children: "Select at least one table or record to share." }),
+      action.error && /* @__PURE__ */ jsx4("p", { role: "alert", className: "basic-error", children: action.error }),
+      message && /* @__PURE__ */ jsx4("p", { role: "status", className: "basic-muted", children: message }),
+      /* @__PURE__ */ jsxs2("div", { className: "basic-section-heading", children: [
+        /* @__PURE__ */ jsx4("h3", { className: "basic-title", children: "Outgoing shares \xB7 all permissions" }),
+        /* @__PURE__ */ jsx4(
           BasicButton,
           {
             disabled: action.pending || shares.isLoading,
@@ -2043,10 +2629,15 @@ function SharesContent({
           }
         )
       ] }),
-      shares.isLoading ? /* @__PURE__ */ jsx3("p", { role: "status", children: "Loading shares\u2026" }) : shares.error ? /* @__PURE__ */ jsx3("p", { role: "alert", className: "basic-error", children: shares.error.message }) : !shares.data.length ? /* @__PURE__ */ jsx3("p", { className: "basic-empty", children: "No outgoing shares yet." }) : /* @__PURE__ */ jsx3("ul", { className: "basic-share-list", children: shares.data.map((share) => /* @__PURE__ */ jsxs("li", { children: [
-        /* @__PURE__ */ jsxs("div", { className: "basic-identity", children: [
-          /* @__PURE__ */ jsx3("strong", { children: share.display.shareName || share.recipientDid }),
-          /* @__PURE__ */ jsxs("small", { children: [
+      shares.isLoading ? /* @__PURE__ */ jsx4("p", { role: "status", children: "Loading shares\u2026" }) : shares.error ? /* @__PURE__ */ jsx4("p", { role: "alert", className: "basic-error", children: shares.error.message }) : !shares.data.length ? /* @__PURE__ */ jsx4("p", { className: "basic-empty", children: "No outgoing shares yet." }) : /* @__PURE__ */ jsx4("ul", { className: "basic-share-list", children: shares.data.map((share) => /* @__PURE__ */ jsxs2("li", { children: [
+        /* @__PURE__ */ jsx4(ShareRecipientAvatar, { recipient: { did: share.recipientDid } }),
+        /* @__PURE__ */ jsxs2("div", { className: "basic-identity", children: [
+          /* @__PURE__ */ jsx4("strong", { children: share.display.shareName || share.recipientDid }),
+          share.display.shareName && /* @__PURE__ */ jsxs2("small", { children: [
+            "To ",
+            share.recipientDid
+          ] }),
+          /* @__PURE__ */ jsxs2("small", { children: [
             share.role === "viewer" ? "Can view" : "Can edit",
             " \xB7",
             " ",
@@ -2056,9 +2647,9 @@ function SharesContent({
             share.scope.map((item) => item.table).join(", ")
           ] })
         ] }),
-        share.state !== "ended" && (confirmation === share.id ? /* @__PURE__ */ jsxs("div", { className: "basic-actions", children: [
-          /* @__PURE__ */ jsx3("span", { children: "Remove access?" }),
-          /* @__PURE__ */ jsxs(
+        share.state !== "ended" && (confirmation === share.id ? /* @__PURE__ */ jsxs2("div", { className: "basic-actions", children: [
+          /* @__PURE__ */ jsx4("span", { children: "Remove access?" }),
+          /* @__PURE__ */ jsxs2(
             BasicButton,
             {
               disabled: action.pending || !canWrite,
@@ -2077,7 +2668,7 @@ function SharesContent({
               ]
             }
           ),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             BasicButton,
             {
               disabled: action.pending,
@@ -2085,7 +2676,7 @@ function SharesContent({
               children: "Keep access"
             }
           )
-        ] }) : /* @__PURE__ */ jsx3(
+        ] }) : /* @__PURE__ */ jsx4(
           BasicButton,
           {
             disabled: action.pending || !canWrite,
@@ -2106,6 +2697,11 @@ export {
   BrowserKeyValueStorage,
   BrowserTokenStore,
   PersistenceStore,
+  ShareInvites,
+  ShareInvitesModal,
+  ShareRecipientAvatar,
+  ShareRecipientAvatars,
+  ShareRecipientLabel,
   SharesModal,
   SignInButton,
   SignOutButton,
@@ -2134,6 +2730,8 @@ export {
   useQuery,
   useRepos,
   useSchemaStatus,
+  useShareInvites,
+  useShareRecipients,
   useStorageInfo,
   useSyncStatus
 };