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

package/dist/index.js

@@ -39,6 +39,11 @@ __export(index_exports, {
   BrowserKeyValueStorage: () => BrowserKeyValueStorage,
   BrowserTokenStore: () => BrowserTokenStore,
   PersistenceStore: () => PersistenceStore,
+  ShareInvites: () => ShareInvites,
+  ShareInvitesModal: () => ShareInvitesModal,
+  ShareRecipientAvatar: () => ShareRecipientAvatar,
+  ShareRecipientAvatars: () => ShareRecipientAvatars,
+  ShareRecipientLabel: () => ShareRecipientLabel,
   SharesModal: () => SharesModal,
   SignInButton: () => SignInButton,
   SignOutButton: () => SignOutButton,
@@ -67,13 +72,15 @@ __export(index_exports, {
   useQuery: () => useQuery,
   useRepos: () => useRepos,
   useSchemaStatus: () => useSchemaStatus,
+  useShareInvites: () => useShareInvites,
+  useShareRecipients: () => useShareRecipients,
   useStorageInfo: () => useStorageInfo,
   useSyncStatus: () => useSyncStatus
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/create-basic.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/context.ts
 var import_react = require("react");
@@ -1105,6 +1112,118 @@ function useProjectProfile(enabled = true) {
   return useProjectProfileFor(useRequiredClient(), enabled);
 }
 
+// src/hooks/invites.ts
+var import_react12 = require("react");
+var import_core7 = require("@basictech/core");
+function useShareInvitesFor(client, enabled = true) {
+  const snapshot = useClientSnapshot(client);
+  const accountId = snapshot.activeAccount?.id;
+  const currentClient = (0, import_react12.useRef)(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 = (0, import_react12.useCallback)(
+    (did) => client.shares.resolveContactHandle(did),
+    [client]
+  );
+  const checkAccount = () => {
+    if (currentClient.current !== client || client.getSnapshot().activeAccount?.id !== accountId)
+      throw new import_core7.BasicError("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
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function createBasic(config) {
@@ -1113,7 +1232,7 @@ function createBasic(config) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BasicProvider, { client, renderWhileLoading, children });
   }
   function useBound() {
-    if ((0, import_react12.useContext)(BasicClientContext) !== client) {
+    if ((0, import_react13.useContext)(BasicClientContext) !== client) {
       throw new Error("Bound Basic hooks must be used within their own <basic.Provider>");
     }
     return client;
@@ -1137,22 +1256,145 @@ 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)
   };
 }
 
 // src/components.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 var import_avatar = require("@base-ui/react/avatar");
 var import_dialog = require("@base-ui/react/dialog");
 var import_menu = require("@base-ui/react/menu");
 var import_tabs = require("@base-ui/react/tabs");
-var import_core7 = require("@basictech/core");
+var import_core8 = require("@basictech/core");
+
+// src/avatar-marble.tsx
+var import_react14 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var AppearanceContext = (0, import_react13.createContext)({});
+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 = (0, import_react14.useId)().replaceAll(":", "");
+  const maskId = `basic-avatar-mask-${instanceId}`;
+  const filterId = `basic-avatar-filter-${instanceId}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(
+          "mask",
+          {
+            id: maskId,
+            maskUnits: "userSpaceOnUse",
+            x: "0",
+            y: "0",
+            width: SIZE,
+            height: SIZE,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: SIZE, height: SIZE, rx: SIZE * 2, fill: "#FFFFFF" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { mask: `url(#${maskId})`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: SIZE, height: SIZE, fill: properties[0].color }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "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__ */ (0, import_jsx_runtime3.jsx)(
+            "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__ */ (0, import_jsx_runtime3.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "filter",
+          {
+            id: filterId,
+            filterUnits: "userSpaceOnUse",
+            colorInterpolationFilters: "sRGB",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "feBlend",
+                {
+                  in: "SourceGraphic",
+                  in2: "BackgroundImageFix",
+                  result: "shape"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("feGaussianBlur", { stdDeviation: "7", result: "effect1_foregroundBlur" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var AppearanceContext = (0, import_react15.createContext)({});
+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 } : {}
   };
 }
@@ -1160,9 +1402,9 @@ function BasicUIProvider({
   appearance = {},
   children
 }) {
-  const parent = (0, import_react13.useContext)(AppearanceContext);
+  const parent = (0, import_react15.useContext)(AppearanceContext);
   const value = { ...parent, ...appearance };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AppearanceContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AppearanceContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
       className: "basic-ui",
@@ -1174,16 +1416,16 @@ function BasicUIProvider({
   ) });
 }
 function useAppearanceProps() {
-  const appearance = (0, import_react13.useContext)(AppearanceContext);
+  const appearance = (0, import_react15.useContext)(AppearanceContext);
   return {
     "data-theme": appearance.theme ?? "light",
     "data-density": appearance.density ?? "comfortable",
     style: appearanceStyle(appearance)
   };
 }
-var BasicButton = (0, import_react13.forwardRef)(
+var BasicButton = (0, import_react15.forwardRef)(
   function BasicButton2({ variant = "outline", className = "", type = "button", ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "button",
       {
         ...props,
@@ -1196,11 +1438,11 @@ var BasicButton = (0, import_react13.forwardRef)(
   }
 );
 function useAction() {
-  const [pending, setPending] = (0, import_react13.useState)(false);
-  const [error, setError] = (0, import_react13.useState)(null);
-  const busy = (0, import_react13.useRef)(false);
-  const mounted = (0, import_react13.useRef)(true);
-  (0, import_react13.useEffect)(() => {
+  const [pending, setPending] = (0, import_react15.useState)(false);
+  const [error, setError] = (0, import_react15.useState)(null);
+  const busy = (0, import_react15.useRef)(false);
+  const mounted = (0, import_react15.useRef)(true);
+  (0, import_react15.useEffect)(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
@@ -1216,7 +1458,7 @@ function useAction() {
     } catch (cause) {
       if (mounted.current)
         setError(
-          cause instanceof import_core7.BasicError && 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 import_core8.BasicError && 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;
@@ -1238,8 +1480,8 @@ function AuthButton({
   const auth = supplied ?? live;
   const action = useAction();
   const expired = auth.status === "expired";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "basic-action", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "basic-action", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       BasicButton,
       {
         ...props,
@@ -1255,29 +1497,44 @@ function AuthButton({
         children: action.pending ? "Please wait\u2026" : children ?? (signOut ? "Sign out" : expired ? "Sign in again" : "Sign in")
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ActionError, { error: action.error, onClose: action.clearError })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActionError, { error: action.error, onClose: action.clearError })
   ] });
 }
 function SignInButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AuthButton, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AuthButton, { ...props });
 }
 function SignOutButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AuthButton, { ...props, signOut: true });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(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__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     UserMenu,
     {
       accounts,
       auth,
       projectProfile,
+      invites,
+      showInvites,
       allowAddAccount,
+      menuItems,
       sync: avatarProps.sync,
       showSyncBadge: avatarProps.showSyncBadge,
       avatarProps
@@ -1289,25 +1546,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__ */ (0, import_jsx_runtime3.jsxs)(
+  const avatar = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProfileAvatar, { ...props, profile, size });
+  return showSyncBadge ?? client.mode === "sync" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "basic-avatar-container", children: [
+    avatar,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SyncStatus, { sync, className: "basic-avatar-sync" })
+  ] }) : avatar;
+}
+function ProfileAvatar({
+  profile,
+  size = 32,
+  className = "",
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     import_avatar.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__ */ (0, import_jsx_runtime3.jsx)(
+        profile?.picture && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           import_avatar.Avatar.Image,
           {
             src: profile.picture,
@@ -1316,14 +1582,100 @@ function AccountAvatar({
             referrerPolicy: "no-referrer"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_avatar.Avatar.Fallback, { className: "basic-avatar-fallback", children: initials || "?" })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_avatar.Avatar.Fallback, { className: "basic-avatar-fallback", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MarbleAvatar, { seed: avatarSeed(profile) }) })
+      ]
+    }
+  );
+}
+function ShareRecipientAvatar({
+  recipient,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    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__ */ (0, import_jsx_runtime4.jsxs)(
+    "span",
+    {
+      title: recipient.did,
+      ...props,
+      className: `basic-recipient-label ${className}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          ShareRecipientAvatar,
+          {
+            recipient,
+            size,
+            "aria-hidden": "true",
+            title: void 0
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsxs)(
+    "span",
+    {
+      ...props,
+      className: `basic-recipient-avatars ${className}`,
+      role: "group",
+      "aria-label": props["aria-label"] ?? `Shared with ${unique.length} recipients`,
+      children: [
+        visible.map((recipient) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          ShareRecipientAvatar,
+          {
+            recipient,
+            size
+          },
+          recipient.did
+        )),
+        remaining > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "span",
+          {
+            className: "basic-recipient-overflow",
+            "aria-label": `${remaining} more recipients`,
+            children: [
+              "+",
+              remaining
+            ]
+          }
+        )
       ]
     }
   );
-  return showSyncBadge ?? client.mode === "sync" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "basic-avatar-container", children: [
-    avatar,
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SyncStatus, { sync, className: "basic-avatar-sync" })
-  ] }) : avatar;
 }
 function AuthStatus({
   auth: supplied,
@@ -1334,7 +1686,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__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "span",
     {
       ...props,
@@ -1342,7 +1694,7 @@ function AuthStatus({
       className: `basic-status ${className}`,
       "data-tone": expired || auth.error ? "warning" : auth.isSignedIn ? "success" : "neutral",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "basic-dot" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "basic-dot" }),
         label
       ]
     }
@@ -1372,7 +1724,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__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "span",
     {
       ...props,
@@ -1381,7 +1733,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__ */ (0, import_jsx_runtime3.jsx)("span", { className: "basic-dot" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "basic-dot" }),
         label,
         sync.pendingCount > 0 && ` \xB7 ${sync.pendingCount} pending`
       ]
@@ -1392,7 +1744,7 @@ function displayHandle(handle) {
   return handle ? `@${handle.replace(/^@+/, "")}` : "";
 }
 function UserButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UserMenu, { ...props, trigger: "button" });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UserMenu, { ...props, trigger: "button" });
 }
 function UserMenu({
   accounts: supplied,
@@ -1404,28 +1756,31 @@ function UserMenu({
   trigger = "avatar",
   avatarProps,
   projectProfile,
+  invites,
+  showInvites,
   allowAddAccount = true,
   className = "",
-  accountSettingsUrl
+  accountSettingsUrl,
+  menuItems = []
 }) {
   const liveAccounts = useAccounts();
   const liveAuth = useAuth();
   const accounts = supplied ?? liveAccounts;
   const auth = suppliedAuth ?? liveAuth;
   const action = useAction();
-  const [settingsOpen, setSettingsOpen] = (0, import_react13.useState)(false);
-  const [clearAccountId, setClearAccountId] = (0, import_react13.useState)(null);
-  const triggerRef = (0, import_react13.useRef)(null);
+  const [settingsOpen, setSettingsOpen] = (0, import_react15.useState)(false);
+  const [clearAccountId, setClearAccountId] = (0, import_react15.useState)(null);
+  const triggerRef = (0, import_react15.useRef)(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__ */ (0, import_jsx_runtime3.jsxs)("span", { className: `basic-action ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_menu.Menu.Root, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  const name = active ? accountName(active) : "Local account";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: `basic-action ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_menu.Menu.Root, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         import_menu.Menu.Trigger,
         {
           ref: triggerRef,
@@ -1434,7 +1789,7 @@ function UserMenu({
           disabled: !auth.isReady || action.pending,
           "aria-label": "Open user menu",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               AccountAvatar,
               {
                 profile: accounts.activeAccount,
@@ -1443,12 +1798,12 @@ function UserMenu({
                 ...avatarProps
               }
             ),
-            trigger === "button" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "basic-identity", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: name }),
-                active?.kind !== "anon" && active?.handle && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("small", { children: displayHandle(active.handle) })
+            trigger === "button" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "basic-identity", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: name }),
+                active?.kind !== "anon" && active?.handle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("small", { children: displayHandle(active.handle) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "svg",
                 {
                   className: "basic-chevron",
@@ -1461,16 +1816,16 @@ function UserMenu({
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 9 6 6 6-6" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m6 9 6 6 6-6" })
                 }
               )
             ] })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_menu.Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_menu.Menu.Positioner, { sideOffset: 8, className: "basic-positioner", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_menu.Menu.Popup, { ...appearance, className: "basic-ui basic-menu", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "basic-menu-profile", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_menu.Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_menu.Menu.Positioner, { sideOffset: 8, className: "basic-positioner", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_menu.Menu.Popup, { ...appearance, className: "basic-ui basic-menu", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "basic-menu-profile", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             AccountAvatar,
             {
               profile: active,
@@ -1479,16 +1834,16 @@ function UserMenu({
               showSyncBadge: false
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "basic-identity", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: active ? name : "No active account" }),
-            active?.kind !== "anon" && active?.handle && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("small", { children: displayHandle(active.handle) }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "basic-account-statuses", children: [
-              expired && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "basic-status", "data-tone": "warning", children: "Expired" }),
-              showSyncStatus && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SyncStatus, { sync })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "basic-identity", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: active ? name : "No active account" }),
+            active?.kind !== "anon" && active?.handle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("small", { children: displayHandle(active.handle) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "basic-account-statuses", children: [
+              expired && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "basic-status", "data-tone": "warning", children: "Expired" }),
+              showSyncStatus && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SyncStatus, { sync })
             ] })
           ] })
         ] }),
-        expired && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        expired && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           import_menu.Menu.Item,
           {
             className: "basic-menu-item basic-menu-reauth",
@@ -1497,13 +1852,13 @@ function UserMenu({
             children: "Sign in again"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           import_menu.Menu.Item,
           {
             className: "basic-menu-item basic-manage-account",
             onClick: () => setSettingsOpen(true),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                 "svg",
                 {
                   className: "basic-menu-icon",
@@ -1517,8 +1872,8 @@ function UserMenu({
                   strokeLinejoin: "round",
                   "aria-hidden": "true",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "7", r: "4" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" })
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "7", r: "4" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" })
                   ]
                 }
               ),
@@ -1526,14 +1881,30 @@ function UserMenu({
             ]
           }
         ),
-        (auth.isSignedIn || expired || active?.kind === "anon") && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          import_menu.Menu.Item,
+          {
+            className: "basic-menu-item",
+            render: item.href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { href: item.href }) : void 0,
+            disabled: item.disabled || action.pending,
+            onClick: () => {
+              if (item.onClick) void action.run(item.onClick);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "basic-menu-icon", "aria-hidden": "true", children: item.icon }),
+              item.label
+            ]
+          },
+          item.id
+        )),
+        (auth.isSignedIn || expired || active?.kind === "anon") && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           import_menu.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__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "svg",
                 {
                   className: "basic-menu-icon",
@@ -1546,25 +1917,25 @@ function UserMenu({
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_menu.Menu.Separator, { className: "basic-separator" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "basic-menu-heading", children: "Switch accounts" })
+        otherAccounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_menu.Menu.Separator, { className: "basic-separator" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "basic-menu-heading", children: "Switch accounts" })
         ] }),
-        otherAccounts.map((account) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        otherAccounts.map((account) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           import_menu.Menu.Item,
           {
             className: "basic-menu-item",
             disabled: action.pending,
             onClick: () => void action.run(() => accounts.switchAccount(account.id)),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 AccountAvatar,
                 {
                   profile: account,
@@ -1573,16 +1944,16 @@ function UserMenu({
                   showSyncBadge: false
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "basic-identity", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: account.name || account.kind !== "anon" && displayHandle(account.handle) || (account.kind === "anon" ? "Local account" : "Account") }),
-                account.kind !== "anon" && account.handle && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("small", { children: displayHandle(account.handle) })
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "basic-identity", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: accountName(account, "Account") }),
+                account.kind !== "anon" && account.handle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("small", { children: displayHandle(account.handle) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "basic-account-statuses", children: account.auth.status === "expired" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "basic-status", "data-tone": "warning", children: "Expired" }) : null })
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "basic-account-statuses", children: account.auth.status === "expired" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "basic-status", "data-tone": "warning", children: "Expired" }) : null })
             ]
           },
           account.id
         )),
-        (allowAddAccount || !auth.isSignedIn && !expired) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        (allowAddAccount || !auth.isSignedIn && !expired) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           import_menu.Menu.Item,
           {
             className: "basic-menu-item",
@@ -1590,12 +1961,29 @@ function UserMenu({
             onClick: () => void action.run(
               () => allowAddAccount ? accounts.addAccount({ signIn: true }) : auth.signIn()
             ),
-            children: "\uFF0B Add account"
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "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__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 5v14M5 12h14" })
+                }
+              ),
+              "Add account"
+            ]
           }
         )
       ] }) }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       ActionError,
       {
         error: action.error,
@@ -1603,7 +1991,7 @@ function UserMenu({
         finalFocus: triggerRef
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Modal,
       {
         open: clearAccountId !== null,
@@ -1614,8 +2002,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__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "basic-actions", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "basic-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             BasicButton,
             {
               disabled: action.pending,
@@ -1623,7 +2011,7 @@ function UserMenu({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             BasicButton,
             {
               disabled: action.pending,
@@ -1639,7 +2027,7 @@ function UserMenu({
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       AccountSettingsModal,
       {
         auth,
@@ -1650,6 +2038,8 @@ function UserMenu({
         finalFocus: triggerRef,
         accountSettingsUrl,
         projectProfile,
+        invites,
+        showInvites,
         sync
       }
     )
@@ -1660,7 +2050,7 @@ function ActionError({
   onClose,
   finalFocus
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     Modal,
     {
       open: !!error,
@@ -1672,8 +2062,8 @@ function ActionError({
       title: "Unable to complete action",
       description: "Your request could not be completed.",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { role: "alert", className: "basic-error", children: error }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BasicButton, { onClick: onClose, children: "Dismiss" })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { role: "alert", className: "basic-error", children: error }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BasicButton, { onClick: onClose, children: "Dismiss" })
       ]
     }
   );
@@ -1685,29 +2075,36 @@ function Modal({
   finalFocus,
   title,
   description,
+  hideTitle = false,
   header,
   sectionLabel,
   children
 }) {
   const appearance = useAppearanceProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_dialog.Dialog.Root, { open, onOpenChange, children: [
-    trigger !== null && ((0, import_react13.isValidElement)(trigger) ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog.Dialog.Trigger, { render: trigger }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog.Dialog.Trigger, { render: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BasicButton, {}), children: trigger ?? title })),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_dialog.Dialog.Portal, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog.Dialog.Backdrop, { className: "basic-backdrop" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_dialog.Dialog.Root, { open, onOpenChange, children: [
+    trigger !== null && ((0, import_react15.isValidElement)(trigger) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_dialog.Dialog.Trigger, { render: trigger }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_dialog.Dialog.Trigger, { render: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BasicButton, {}), children: trigger ?? title })),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_dialog.Dialog.Portal, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_dialog.Dialog.Backdrop, { className: "basic-backdrop" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         import_dialog.Dialog.Popup,
         {
           ...appearance,
           finalFocus,
           className: "basic-ui basic-dialog",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "div",
               {
-                className: `basic-dialog-heading${header ? " basic-dialog-heading-overlay" : ""}`,
+                className: `basic-dialog-heading${header || hideTitle ? " basic-dialog-heading-overlay" : ""}`,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog.Dialog.Title, { className: header ? "basic-sr-only" : "basic-title", children: title }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    import_dialog.Dialog.Title,
+                    {
+                      className: header || hideTitle ? "basic-sr-only" : "basic-title",
+                      children: title
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     import_dialog.Dialog.Close,
                     {
                       className: "basic-button",
@@ -1719,14 +2116,14 @@ function Modal({
               }
             ),
             header,
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               import_dialog.Dialog.Description,
               {
                 className: header ? "basic-sr-only" : "basic-muted",
                 children: description
               }
             ),
-            sectionLabel && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "basic-modal-section", children: sectionLabel }),
+            sectionLabel && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "basic-modal-section", children: sectionLabel }),
             children
           ]
         }
@@ -1739,6 +2136,8 @@ function AccountSettingsModal({
   accounts: suppliedAccounts,
   accountSettingsUrl,
   projectProfile,
+  invites,
+  showInvites = true,
   sync,
   children,
   ...props
@@ -1752,7 +2151,7 @@ function AccountSettingsModal({
   const client = useRequiredClient();
   const account = accounts.activeAccount;
   const copyAction = useAction();
-  const [copied, setCopied] = (0, import_react13.useState)(null);
+  const [copied, setCopied] = (0, import_react15.useState)(null);
   const details = [
     [
       "Account DID",
@@ -1777,27 +2176,28 @@ function AccountSettingsModal({
     ["Conflicts", String(syncState.conflicts.length)]
   ];
   const diagnostics = JSON.stringify(Object.fromEntries(details), null, 2);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Modal,
     {
       ...props,
       title: "Account settings",
       description: "Your identity and session on this device.",
-      header: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AccountHeader, { account: accounts.activeAccount, sync }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_tabs.Tabs.Root, { defaultValue: "profile", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      header: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AccountHeader, { account: accounts.activeAccount, sync }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_tabs.Tabs.Root, { defaultValue: "profile", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           import_tabs.Tabs.List,
           {
             className: "basic-tabs",
             "aria-label": "Account settings sections",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_tabs.Tabs.Tab, { value: "profile", children: "Profile" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_tabs.Tabs.Tab, { value: "advanced", children: "Advanced" })
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tabs.Tabs.Tab, { value: "profile", children: "Profile" }),
+              showInvites && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tabs.Tabs.Tab, { value: "invites", children: "Share Invites" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tabs.Tabs.Tab, { value: "advanced", children: "Advanced" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_tabs.Tabs.Panel, { value: "profile", keepMounted: true, children: [
-          auth.isSignedIn && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_tabs.Tabs.Panel, { value: "profile", keepMounted: true, children: [
+          auth.isSignedIn && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             ProjectProfileEditor,
             {
               profile: projectProfile,
@@ -1805,18 +2205,19 @@ function AccountSettingsModal({
             },
             accounts.activeAccount?.id ?? auth.did
           ),
-          accountSettingsUrl && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { className: "basic-link", href: accountSettingsUrl, children: "Manage profile and security \u2197" }),
+          accountSettingsUrl && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { className: "basic-link", href: accountSettingsUrl, children: "Manage profile and security \u2197" }),
           children,
-          !auth.isSignedIn && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "basic-actions", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SignInButton, { auth }) })
+          !auth.isSignedIn && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "basic-actions", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SignInButton, { auth }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_tabs.Tabs.Panel, { value: "advanced", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "basic-muted", children: "Read-only diagnostics for this account." }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dl", { className: "basic-details", children: details.map(([label, value]) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react13.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dt", { children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("dd", { children: value })
+        showInvites && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tabs.Tabs.Panel, { value: "invites", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ShareInvites, { auth, accounts, invites }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_tabs.Tabs.Panel, { value: "advanced", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "basic-muted", children: "Read-only diagnostics for this account." }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dl", { className: "basic-details", children: details.map(([label, value]) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react15.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dt", { children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dd", { children: value })
           ] }, label)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "basic-actions", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "basic-actions", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               BasicButton,
               {
                 disabled: copyAction.pending,
@@ -1832,9 +2233,9 @@ function AccountSettingsModal({
                 children: "Copy to clipboard"
               }
             ),
-            copied === diagnostics && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { role: "status", className: "basic-muted", children: "Copied" })
+            copied === diagnostics && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { role: "status", className: "basic-muted", children: "Copied" })
           ] }),
-          copyAction.error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { role: "alert", className: "basic-error", children: copyAction.error })
+          copyAction.error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { role: "alert", className: "basic-error", children: copyAction.error })
         ] })
       ] })
     }
@@ -1844,8 +2245,8 @@ function AccountHeader({
   account,
   sync
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "basic-profile", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "basic-profile", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       AccountAvatar,
       {
         profile: account,
@@ -1854,10 +2255,10 @@ function AccountHeader({
         showSyncBadge: false
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "basic-identity", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: account?.name || account?.kind !== "anon" && displayHandle(account?.handle) || "Local account" }),
-      account?.kind !== "anon" && account?.handle && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("small", { children: displayHandle(account.handle) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "basic-account-statuses", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SyncStatus, { sync }) })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "basic-identity", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: account ? accountName(account) : "Local account" }),
+      account?.kind !== "anon" && account?.handle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("small", { children: displayHandle(account.handle) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "basic-account-statuses", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SyncStatus, { sync }) })
     ] })
   ] });
 }
@@ -1868,9 +2269,9 @@ function ProjectProfileEditor({
   const live = useProjectProfile(supplied === void 0);
   const profile = supplied ?? live;
   const action = useAction();
-  const [draft, setDraft] = (0, import_react13.useState)({});
-  const [saved, setSaved] = (0, import_react13.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  const [draft, setDraft] = (0, import_react15.useState)({});
+  const [saved, setSaved] = (0, import_react15.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "form",
     {
       className: "basic-profile-editor",
@@ -1884,15 +2285,15 @@ function ProjectProfileEditor({
         });
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "basic-section-label", children: "Personal information" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "basic-muted", children: "Only this app sees these overrides. Clear a field to use your universal profile value." }),
-        profile.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { role: "status", children: "Loading project profile\u2026" }) : profile.error ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { role: "alert", className: "basic-error", children: profile.error.message }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BasicButton, { onClick: profile.refresh, children: "Retry profile" })
-        ] }) : profile.data && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("fieldset", { disabled: !canWrite || action.pending, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "basic-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "basic-section-label", children: "Personal information" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "basic-muted", children: "Only this app sees these overrides. Clear a field to use your universal profile value." }),
+        profile.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { role: "status", children: "Loading project profile\u2026" }) : profile.error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { role: "alert", className: "basic-error", children: profile.error.message }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BasicButton, { onClick: profile.refresh, children: "Retry profile" })
+        ] }) : profile.data && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("fieldset", { disabled: !canWrite || action.pending, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "basic-field", children: [
             "Display name",
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "input",
               {
                 className: "basic-input",
@@ -1909,8 +2310,8 @@ function ProjectProfileEditor({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "basic-actions basic-modal-footer", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "basic-actions basic-modal-footer", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               BasicButton,
               {
                 variant: "ghost",
@@ -1921,7 +2322,7 @@ function ProjectProfileEditor({
                 children: "Cancel"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               BasicButton,
               {
                 type: "submit",
@@ -1932,17 +2333,205 @@ function ProjectProfileEditor({
             )
           ] })
         ] }),
-        action.error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { role: "alert", className: "basic-error", children: action.error }),
-        saved && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { role: "status", children: "Project profile saved." })
+        action.error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { role: "alert", className: "basic-error", children: action.error }),
+        saved && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsxs)(
+    "section",
+    {
+      ...props,
+      className: `basic-invites ${className}`,
+      "aria-label": props["aria-label"] ?? "Share Invites",
+      children: [
+        (!auth.isReady || !auth.isSignedIn) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "basic-title", children: "Share Invites" }),
+        !auth.isReady ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { role: "status", children: "Checking session\u2026" }) : !auth.isSignedIn ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "basic-muted", children: "Sign in to view invites." }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SignInButton, { auth })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          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] = (0, import_react15.useState)("");
+  const visible = invites.data.filter((invite) => invite.state !== "deleted");
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "basic-section-heading", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "basic-title", children: "Share Invites" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        BasicButton,
+        {
+          disabled: invites.isLoading || action.pending,
+          onClick: invites.refresh,
+          children: "Refresh"
+        }
+      )
+    ] }),
+    !canWrite && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "basic-error", children: "Read-only session. Invite changes are disabled." }),
+    action.error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { role: "alert", className: "basic-error", children: action.error }),
+    message && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { role: "status", children: message }),
+    action.pending && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { role: "status", children: "Updating invite\u2026" }),
+    invites.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { role: "status", children: "Loading invites\u2026" }) : invites.error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { role: "alert", className: "basic-error", children: invites.error.message }) : !visible.length ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "basic-empty", children: "No share invites." }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "basic-share-list basic-invite-list", children: visible.map((invite) => {
+      const title = invite.display.shareName || invite.display.repoName || "Shared data";
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        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] = (0, import_react15.useState)(null);
+  (0, import_react15.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime4.jsxs)("li", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ShareRecipientAvatar,
+      {
+        recipient: {
+          did,
+          name: handle ? displayHandle(handle) : "Unknown sender"
+        },
+        size: 32
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "basic-identity", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("small", { children: handle ? displayHandle(handle) : "Unknown sender" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("small", { children: invite.role === "editor" ? "Can edit" : "Can view" }),
+      status && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "basic-invite-state", children: status }),
+      blocked && (pending || accepting) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "basic-error", children: blocked })
+    ] }),
+    (pending || accepting) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "basic-invite-actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        BasicButton,
+        {
+          variant: "solid",
+          disabled: disabled || expired || !!blocked,
+          onClick: () => onDecision("accept"),
+          children: accepting ? "Retry acceptance" : "Accept"
+        }
+      ),
+      pending && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        BasicButton,
+        {
+          disabled,
+          onClick: () => onDecision("decline"),
+          children: "Decline"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("details", { className: "basic-invite-details", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("summary", { children: "Details" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "basic-invite-scope", children: [
+        invite.scope.map((scope, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: scope.table }),
+          " \xB7",
+          " ",
+          scope.recordIds ? `${scope.recordIds.length} selected records` : "all records",
+          scope.recordIds && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", { children: scope.recordIds.join(", ") })
+        ] }, index)),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("small", { children: [
+          "Sender DID: ",
+          did
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("small", { children: [
+          "Expires",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("time", { dateTime: invite.acceptBy, children: [
+            expiresAt.toLocaleString("en-US", {
+              dateStyle: "medium",
+              timeStyle: "short",
+              timeZone: "UTC"
+            }),
+            " ",
+            "UTC"
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ShareInvitesModal({
+  auth,
+  accounts,
+  invites,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Modal, { ...props, title: "Share Invites", hideTitle: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ShareInvites, { auth, accounts, invites }) });
+}
 function SharesModal({
   auth: supplied,
   accounts: suppliedAccounts,
   sync,
   shares,
+  invites,
   scope,
   repo = "default",
   ...props
@@ -1950,37 +2539,43 @@ function SharesModal({
   const live = useAuth();
   const liveAccounts = useAccounts();
   const auth = supplied ?? live;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Modal,
     {
       ...props,
       title: "Shares",
       description: "Manage incoming invitations and share access to selected data.",
-      header: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      header: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         AccountHeader,
         {
           account: (suppliedAccounts ?? liveAccounts).activeAccount,
           sync
         }
       ),
-      children: !auth.isReady ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { role: "status", children: "Checking session\u2026" }) : !auth.isSignedIn ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "basic-muted", children: "Sign in to share data." }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SignInButton, { auth })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      children: !auth.isReady ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { role: "status", children: "Checking session\u2026" }) : !auth.isSignedIn ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "basic-muted", children: "Sign in to share data." }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SignInButton, { auth })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         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
@@ -1988,36 +2583,32 @@ function SharesContent({
   const live = useOutgoingShares();
   const shares = supplied ?? live;
   const action = useAction();
-  const [recipient, setRecipient] = (0, import_react13.useState)("");
-  const [role, setRole] = (0, import_react13.useState)("viewer");
-  const [confirmation, setConfirmation] = (0, import_react13.useState)(null);
-  const [message, setMessage] = (0, import_react13.useState)("");
+  const [recipient, setRecipient] = (0, import_react15.useState)("");
+  const [role, setRole] = (0, import_react15.useState)("viewer");
+  const [confirmation, setConfirmation] = (0, import_react15.useState)(null);
+  const [message, setMessage] = (0, import_react15.useState)("");
   const scopeValid = scope.length > 0 && scope.every(
     (item) => item.table.trim() && (item.recordIds === void 0 || item.recordIds.length > 0)
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_tabs.Tabs.Root, { defaultValue: "outgoing", className: "basic-shares", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_tabs.Tabs.List, { className: "basic-tabs", "aria-label": "Share direction", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_tabs.Tabs.Tab, { value: "outgoing", children: "Outgoing" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_tabs.Tabs.Tab, { value: "incoming", children: "Incoming invitations" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_tabs.Tabs.Root, { defaultValue: "outgoing", className: "basic-shares", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_tabs.Tabs.List, { className: "basic-tabs", "aria-label": "Share direction", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tabs.Tabs.Tab, { value: "outgoing", children: "Outgoing" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tabs.Tabs.Tab, { value: "incoming", children: "Share Invites" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_tabs.Tabs.Panel, { value: "incoming", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { "aria-label": "Incoming invitations", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "basic-title", children: "Incoming invitations" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "basic-muted", children: "View, accept, or decline incoming invitations in Basic ID. Your app session cannot access the account-wide inbox." }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { className: "basic-link", href: shares.manageUrl(), children: "Open incoming invitations in Basic ID \u2197" })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_tabs.Tabs.Panel, { value: "outgoing", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "basic-muted", children: "Revoking access stops future requests. It cannot retract data the recipient already downloaded." }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "basic-scope", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "New invitation permissions" }),
-        scope.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tabs.Tabs.Panel, { value: "incoming", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ShareInvites, { invites, auth, accounts }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_tabs.Tabs.Panel, { value: "outgoing", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "basic-muted", children: "Revoking access stops future requests. It cannot retract data the recipient already downloaded." }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "basic-scope", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: "New invitation permissions" }),
+        scope.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
           item.table,
           " \xB7",
           " ",
           item.recordIds ? `${item.recordIds.length} selected records` : "all records"
         ] }, index))
       ] }),
-      !canWrite && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "basic-error", children: "This session is read only. Sharing changes are disabled." }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      !canWrite && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "basic-error", children: "This session is read only. Sharing changes are disabled." }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "form",
         {
           className: "basic-share-form",
@@ -2037,9 +2628,9 @@ function SharesContent({
             });
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "basic-field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "basic-field", children: [
               "Recipient handle or DID",
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 {
                   className: "basic-input",
@@ -2051,9 +2642,9 @@ function SharesContent({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "basic-field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "basic-field", children: [
               "Permission",
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                 "select",
                 {
                   className: "basic-input",
@@ -2061,13 +2652,13 @@ function SharesContent({
                   onChange: (event) => setRole(event.target.value),
                   disabled: action.pending || !canWrite,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "viewer", children: "Can view" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "editor", children: "Can edit" })
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "viewer", children: "Can view" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "editor", children: "Can edit" })
                   ]
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               BasicButton,
               {
                 type: "submit",
@@ -2079,12 +2670,12 @@ function SharesContent({
           ]
         }
       ),
-      !scopeValid && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { role: "alert", className: "basic-error", children: "Select at least one table or record to share." }),
-      action.error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { role: "alert", className: "basic-error", children: action.error }),
-      message && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { role: "status", className: "basic-muted", children: message }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "basic-section-heading", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "basic-title", children: "Outgoing shares \xB7 all permissions" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      !scopeValid && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { role: "alert", className: "basic-error", children: "Select at least one table or record to share." }),
+      action.error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { role: "alert", className: "basic-error", children: action.error }),
+      message && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { role: "status", className: "basic-muted", children: message }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "basic-section-heading", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "basic-title", children: "Outgoing shares \xB7 all permissions" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           BasicButton,
           {
             disabled: action.pending || shares.isLoading,
@@ -2093,10 +2684,15 @@ function SharesContent({
           }
         )
       ] }),
-      shares.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { role: "status", children: "Loading shares\u2026" }) : shares.error ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { role: "alert", className: "basic-error", children: shares.error.message }) : !shares.data.length ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "basic-empty", children: "No outgoing shares yet." }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "basic-share-list", children: shares.data.map((share) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "basic-identity", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: share.display.shareName || share.recipientDid }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("small", { children: [
+      shares.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { role: "status", children: "Loading shares\u2026" }) : shares.error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { role: "alert", className: "basic-error", children: shares.error.message }) : !shares.data.length ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "basic-empty", children: "No outgoing shares yet." }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "basic-share-list", children: shares.data.map((share) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ShareRecipientAvatar, { recipient: { did: share.recipientDid } }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "basic-identity", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: share.display.shareName || share.recipientDid }),
+          share.display.shareName && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("small", { children: [
+            "To ",
+            share.recipientDid
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("small", { children: [
             share.role === "viewer" ? "Can view" : "Can edit",
             " \xB7",
             " ",
@@ -2106,9 +2702,9 @@ function SharesContent({
             share.scope.map((item) => item.table).join(", ")
           ] })
         ] }),
-        share.state !== "ended" && (confirmation === share.id ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "basic-actions", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Remove access?" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        share.state !== "ended" && (confirmation === share.id ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "basic-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Remove access?" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             BasicButton,
             {
               disabled: action.pending || !canWrite,
@@ -2127,7 +2723,7 @@ function SharesContent({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             BasicButton,
             {
               disabled: action.pending,
@@ -2135,7 +2731,7 @@ function SharesContent({
               children: "Keep access"
             }
           )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           BasicButton,
           {
             disabled: action.pending || !canWrite,
@@ -2157,6 +2753,11 @@ function SharesContent({
   BrowserKeyValueStorage,
   BrowserTokenStore,
   PersistenceStore,
+  ShareInvites,
+  ShareInvitesModal,
+  ShareRecipientAvatar,
+  ShareRecipientAvatars,
+  ShareRecipientLabel,
   SharesModal,
   SignInButton,
   SignOutButton,
@@ -2185,6 +2786,8 @@ function SharesContent({
   useQuery,
   useRepos,
   useSchemaStatus,
+  useShareInvites,
+  useShareRecipients,
   useStorageInfo,
   useSyncStatus
 });