@basictech/react 0.12.0-beta.1 → 0.12.0-beta.3

package/dist/index.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -30,10 +31,21 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AccountSettingsModal: () => AccountSettingsModal,
+  AuthStatus: () => AuthStatus,
+  BasicButton: () => BasicButton,
   BasicProvider: () => BasicProvider,
+  BasicUIProvider: () => BasicUIProvider,
   BrowserKeyValueStorage: () => BrowserKeyValueStorage,
   BrowserTokenStore: () => BrowserTokenStore,
   PersistenceStore: () => PersistenceStore,
+  SharesModal: () => SharesModal,
+  SignInButton: () => SignInButton,
+  SignOutButton: () => SignOutButton,
+  SyncStatus: () => SyncStatus,
+  UserAvatar: () => UserAvatar,
+  UserButton: () => UserButton,
+  UserMenu: () => UserMenu,
   browserCurrentUrl: () => browserCurrentUrl,
   browserNavigate: () => browserNavigate,
   browserReplaceUrl: () => browserReplaceUrl,
@@ -51,6 +63,7 @@ __export(index_exports, {
   useFiles: () => useFiles,
   useMounts: () => useMounts,
   useOutgoingShares: () => useOutgoingShares,
+  useProjectProfile: () => useProjectProfile,
   useQuery: () => useQuery,
   useRepos: () => useRepos,
   useSchemaStatus: () => useSchemaStatus,
@@ -784,7 +797,7 @@ function useAsyncResult(load, initialData, enabled, settled, dependencies) {
 function useAccountsFor(client) {
   const snapshot = useClientSnapshot(client);
   const switchAccount = (0, import_react4.useCallback)((id) => client.switchAccount(id), [client]);
-  const addAccount = (0, import_react4.useCallback)(() => client.addAccount(), [client]);
+  const addAccount = (0, import_react4.useCallback)((options) => client.addAccount(options), [client]);
   const removeAccount = (0, import_react4.useCallback)((id) => client.removeAccount(id), [client]);
   return (0, import_react4.useMemo)(() => ({
     accounts: snapshot.accounts,
@@ -1053,6 +1066,45 @@ function useQuery(collection, query = {}, options = {}) {
   return useQueryValueFor(useRequiredClient(), collection, query, options);
 }
 
+// src/hooks/profile.ts
+var import_core6 = require("@basictech/core");
+function useProjectProfileFor(client, enabled = true) {
+  const snapshot = useClientSnapshot(client);
+  const accountId = snapshot.activeAccount?.id;
+  const result = useAsyncResult(
+    async () => ({ accountId, profile: await client.getProjectProfile() }),
+    null,
+    enabled && snapshot.isReady && snapshot.isSignedIn,
+    snapshot.isReady,
+    [snapshot.activeAccount?.id]
+  );
+  const checkAccount = () => {
+    if (client.getSnapshot().activeAccount?.id !== accountId)
+      throw new import_core6.BasicError("ACCOUNT_CHANGED");
+  };
+  return {
+    ...result,
+    data: enabled && snapshot.isSignedIn && result.data && result.data.accountId === accountId ? result.data.profile : null,
+    async update(patch) {
+      checkAccount();
+      const profile = await client.updateProjectProfile(patch);
+      checkAccount();
+      result.refresh();
+      return profile;
+    },
+    async reset() {
+      checkAccount();
+      const profile = await client.resetProjectProfile();
+      checkAccount();
+      result.refresh();
+      return profile;
+    }
+  };
+}
+function useProjectProfile(enabled = true) {
+  return useProjectProfileFor(useRequiredClient(), enabled);
+}
+
 // src/create-basic.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function createBasic(config) {
@@ -1081,18 +1133,1086 @@ function createBasic(config) {
     useSyncStatus: (source) => useSyncStatusFor(useBound(), source),
     useSchemaStatus: (source = "default") => useSchemaStatusFor(useBound(), source),
     useRepos: () => useReposFor(useBound()),
+    useProjectProfile: (enabled) => useProjectProfileFor(useBound(), enabled),
     useFiles: (query = {}, options = {}) => useFilesFor(useBound(), query, options),
     useStorageInfo: () => useStorageInfoFor(useBound()),
     useMounts: (query = {}) => useMountsFor(useBound(), query),
     useOutgoingShares: () => useOutgoingSharesFor(useBound())
   };
 }
+
+// src/components.tsx
+var import_react13 = 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_jsx_runtime3 = require("react/jsx-runtime");
+var AppearanceContext = (0, import_react13.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.base ? { "--basic-surface": appearance.base } : {},
+    ...appearance.accent ? {
+      "--basic-accent": appearance.accent,
+      "--basic-accent-text": accentText(appearance.accent)
+    } : {},
+    ...appearance.radius ? { "--basic-radius": appearance.radius } : {}
+  };
+}
+function BasicUIProvider({
+  appearance = {},
+  children
+}) {
+  const parent = (0, import_react13.useContext)(AppearanceContext);
+  const value = { ...parent, ...appearance };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AppearanceContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: "basic-ui",
+      "data-theme": value.theme ?? "light",
+      "data-density": value.density ?? "comfortable",
+      style: appearanceStyle(value),
+      children
+    }
+  ) });
+}
+function useAppearanceProps() {
+  const appearance = (0, import_react13.useContext)(AppearanceContext);
+  return {
+    "data-theme": appearance.theme ?? "light",
+    "data-density": appearance.density ?? "comfortable",
+    style: appearanceStyle(appearance)
+  };
+}
+var BasicButton = (0, import_react13.forwardRef)(
+  function BasicButton2({ variant = "outline", className = "", type = "button", ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        ...props,
+        ref,
+        type,
+        className: `basic-button ${className}`,
+        "data-variant": variant
+      }
+    );
+  }
+);
+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)(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  async function run(action) {
+    if (busy.current) return;
+    busy.current = true;
+    setPending(true);
+    setError(null);
+    try {
+      await action();
+    } 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."
+        );
+    } finally {
+      busy.current = false;
+      if (mounted.current) setPending(false);
+    }
+  }
+  return { pending, error, run, clearError: () => setError(null) };
+}
+function AuthButton({
+  auth: supplied,
+  input,
+  signOut = false,
+  children,
+  disabled,
+  onClick,
+  ...props
+}) {
+  const live = useAuth();
+  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)(
+      BasicButton,
+      {
+        ...props,
+        disabled: disabled || !auth.isReady || action.pending || (signOut ? !auth.isSignedIn && !expired : auth.isSignedIn && !expired),
+        "aria-busy": action.pending,
+        onClick: (event) => {
+          onClick?.(event);
+          if (!event.defaultPrevented)
+            void action.run(
+              () => signOut ? auth.signOut() : auth.signIn(input)
+            );
+        },
+        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 })
+  ] });
+}
+function SignInButton(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AuthButton, { ...props });
+}
+function SignOutButton(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AuthButton, { ...props, signOut: true });
+}
+function UserAvatar({
+  accounts,
+  auth,
+  projectProfile,
+  allowAddAccount,
+  menuItems,
+  ...avatarProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    UserMenu,
+    {
+      accounts,
+      auth,
+      projectProfile,
+      allowAddAccount,
+      menuItems,
+      sync: avatarProps.sync,
+      showSyncBadge: avatarProps.showSyncBadge,
+      avatarProps
+    }
+  );
+}
+function AccountAvatar({
+  profile: supplied,
+  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)(
+    import_avatar.Avatar.Root,
+    {
+      ...props,
+      className: `basic-avatar ${className}`,
+      style: { width: size, height: size, ...style },
+      role: "img",
+      "aria-label": props["aria-label"] ?? name,
+      children: [
+        profile?.picture && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_avatar.Avatar.Image,
+          {
+            src: profile.picture,
+            alt: "",
+            className: "basic-avatar-image",
+            referrerPolicy: "no-referrer"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_avatar.Avatar.Fallback, { className: "basic-avatar-fallback", children: initials || "?" })
+      ]
+    }
+  );
+  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,
+  className = "",
+  ...props
+}) {
+  const live = useAuth();
+  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)(
+    "span",
+    {
+      ...props,
+      role: "status",
+      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" }),
+        label
+      ]
+    }
+  );
+}
+function SyncStatus({
+  sync: supplied,
+  source,
+  className = "",
+  ...props
+}) {
+  const live = useSyncStatus(source);
+  const client = useRequiredClient();
+  const sync = supplied ?? live;
+  if (client.mode === "rest") return null;
+  const issues = sync.rejected.length + sync.conflicts.length;
+  const labels = {
+    idle: "Idle",
+    bootstrapping: "Starting sync",
+    connecting: "Connecting",
+    online: "Synced",
+    offline: "Offline",
+    stopped: "Sync stopped",
+    error: "Sync error",
+    local: "Local only",
+    stale: "Sync stale",
+    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)(
+    "span",
+    {
+      ...props,
+      role: "status",
+      title: props.title ?? `${label}${sync.pendingCount > 0 ? ` \xB7 ${sync.pendingCount} pending` : ""}`,
+      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" }),
+        label,
+        sync.pendingCount > 0 && ` \xB7 ${sync.pendingCount} pending`
+      ]
+    }
+  );
+}
+function displayHandle(handle) {
+  return handle ? `@${handle.replace(/^@+/, "")}` : "";
+}
+function UserButton(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UserMenu, { ...props, trigger: "button" });
+}
+function UserMenu({
+  accounts: supplied,
+  auth: suppliedAuth,
+  sync,
+  showSyncStatus = true,
+  showSyncBadge,
+  shape = "rounded",
+  trigger = "avatar",
+  avatarProps,
+  projectProfile,
+  allowAddAccount = true,
+  className = "",
+  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 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)(
+        import_menu.Menu.Trigger,
+        {
+          ref: triggerRef,
+          className: `basic-button basic-account-trigger basic-trigger-${trigger}`,
+          "data-shape": shape,
+          disabled: !auth.isReady || action.pending,
+          "aria-label": "Open user menu",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              AccountAvatar,
+              {
+                profile: accounts.activeAccount,
+                sync,
+                showSyncBadge,
+                ...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) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "svg",
+                {
+                  className: "basic-chevron",
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.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)(
+            AccountAvatar,
+            {
+              profile: active,
+              size: 48,
+              sync,
+              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 })
+            ] })
+          ] })
+        ] }),
+        expired && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_menu.Menu.Item,
+          {
+            className: "basic-menu-item basic-menu-reauth",
+            disabled: action.pending,
+            onClick: () => void action.run(() => auth.signIn()),
+            children: "Sign in again"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          import_menu.Menu.Item,
+          {
+            className: "basic-menu-item basic-manage-account",
+            onClick: () => setSettingsOpen(true),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "svg",
+                {
+                  className: "basic-menu-icon",
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.75",
+                  strokeLinecap: "round",
+                  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" })
+                  ]
+                }
+              ),
+              "Manage account"
+            ]
+          }
+        ),
+        menuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          import_menu.Menu.Item,
+          {
+            className: "basic-menu-item",
+            render: item.href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.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_runtime3.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)(
+                "svg",
+                {
+                  className: "basic-menu-icon",
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.75",
+                  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" })
+                }
+              ),
+              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.map((account) => /* @__PURE__ */ (0, import_jsx_runtime3.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)(
+                AccountAvatar,
+                {
+                  profile: account,
+                  size: 32,
+                  sync,
+                  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_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 })
+            ]
+          },
+          account.id
+        )),
+        (allowAddAccount || !auth.isSignedIn && !expired) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          import_menu.Menu.Item,
+          {
+            className: "basic-menu-item",
+            disabled: action.pending,
+            onClick: () => void action.run(
+              () => allowAddAccount ? accounts.addAccount({ signIn: true }) : auth.signIn()
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)("path", { d: "M12 5v14M5 12h14" })
+                }
+              ),
+              "Add account"
+            ]
+          }
+        )
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      ActionError,
+      {
+        error: action.error,
+        onClose: action.clearError,
+        finalFocus: triggerRef
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Modal,
+      {
+        open: clearAccountId !== null,
+        onOpenChange: (open) => {
+          if (!open) setClearAccountId(null);
+        },
+        trigger: null,
+        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)(
+            BasicButton,
+            {
+              disabled: action.pending,
+              onClick: () => setClearAccountId(null),
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            BasicButton,
+            {
+              disabled: action.pending,
+              onClick: () => {
+                const id = clearAccountId;
+                if (!id) return;
+                setClearAccountId(null);
+                void action.run(() => accounts.removeAccount(id));
+              },
+              children: "Clear account"
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      AccountSettingsModal,
+      {
+        auth,
+        accounts,
+        open: settingsOpen,
+        onOpenChange: setSettingsOpen,
+        trigger: null,
+        finalFocus: triggerRef,
+        accountSettingsUrl,
+        projectProfile,
+        sync
+      }
+    )
+  ] });
+}
+function ActionError({
+  error,
+  onClose,
+  finalFocus
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    Modal,
+    {
+      open: !!error,
+      onOpenChange: (open) => {
+        if (!open) onClose();
+      },
+      trigger: null,
+      finalFocus,
+      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" })
+      ]
+    }
+  );
+}
+function Modal({
+  open,
+  onOpenChange,
+  trigger,
+  finalFocus,
+  title,
+  description,
+  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)(
+        import_dialog.Dialog.Popup,
+        {
+          ...appearance,
+          finalFocus,
+          className: "basic-ui basic-dialog",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "div",
+              {
+                className: `basic-dialog-heading${header ? " 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)(
+                    import_dialog.Dialog.Close,
+                    {
+                      className: "basic-button",
+                      "aria-label": `Close ${title.toLowerCase()}`,
+                      children: "\u2715"
+                    }
+                  )
+                ]
+              }
+            ),
+            header,
+            /* @__PURE__ */ (0, import_jsx_runtime3.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 }),
+            children
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function AccountSettingsModal({
+  auth: suppliedAuth,
+  accounts: suppliedAccounts,
+  accountSettingsUrl,
+  projectProfile,
+  sync,
+  children,
+  ...props
+}) {
+  const liveAuth = useAuth();
+  const liveAccounts = useAccounts();
+  const auth = suppliedAuth ?? liveAuth;
+  const accounts = suppliedAccounts ?? liveAccounts;
+  const liveSync = useSyncStatus();
+  const syncState = sync ?? liveSync;
+  const client = useRequiredClient();
+  const account = accounts.activeAccount;
+  const copyAction = useAction();
+  const [copied, setCopied] = (0, import_react13.useState)(null);
+  const details = [
+    [
+      "Account DID",
+      account?.kind === "anon" ? "Not assigned (local account)" : account?.did ?? auth.did ?? "Unavailable"
+    ],
+    [
+      "PDS URL",
+      account?.kind === "anon" ? "Not connected (local account)" : auth.user?.pds_url ?? "Unavailable"
+    ],
+    ["Local account ID", account?.id ?? "None"],
+    ["Account kind", account?.kind ?? "None"],
+    ["Storage prefix", account?.storagePrefix ?? "None"],
+    ["Client mode", client.mode],
+    ["Auth state", auth.status],
+    ["Ready", auth.isReady ? "Yes" : "No"],
+    ["Can write", auth.canWrite ? "Yes" : "No"],
+    ["Read-only reason", auth.readOnlyReason ?? "None"],
+    ["Auth error code", auth.error?.code ?? "None"],
+    ["Sync state", syncState.status],
+    ["Pending writes", String(syncState.pendingCount)],
+    ["Rejected writes", String(syncState.rejected.length)],
+    ["Conflicts", String(syncState.conflicts.length)]
+  ];
+  const diagnostics = JSON.stringify(Object.fromEntries(details), null, 2);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.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)(
+          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_runtime3.jsxs)(import_tabs.Tabs.Panel, { value: "profile", keepMounted: true, children: [
+          auth.isSignedIn && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            ProjectProfileEditor,
+            {
+              profile: projectProfile,
+              canWrite: auth.canWrite
+            },
+            accounts.activeAccount?.id ?? auth.did
+          ),
+          accountSettingsUrl && /* @__PURE__ */ (0, import_jsx_runtime3.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 }) })
+        ] }),
+        /* @__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 })
+          ] }, label)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "basic-actions", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              BasicButton,
+              {
+                disabled: copyAction.pending,
+                onClick: () => {
+                  setCopied(null);
+                  void copyAction.run(async () => {
+                    if (!navigator.clipboard?.writeText)
+                      throw new Error("Clipboard is unavailable in this browser.");
+                    await navigator.clipboard.writeText(diagnostics);
+                    setCopied(diagnostics);
+                  });
+                },
+                children: "Copy to clipboard"
+              }
+            ),
+            copied === diagnostics && /* @__PURE__ */ (0, import_jsx_runtime3.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 })
+        ] })
+      ] })
+    }
+  );
+}
+function AccountHeader({
+  account,
+  sync
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "basic-profile", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      AccountAvatar,
+      {
+        profile: account,
+        size: 72,
+        sync,
+        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 }) })
+    ] })
+  ] });
+}
+function ProjectProfileEditor({
+  profile: supplied,
+  canWrite
+}) {
+  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)(
+    "form",
+    {
+      className: "basic-profile-editor",
+      onSubmit: (event) => {
+        event.preventDefault();
+        if (!canWrite || !Object.keys(draft).length) return;
+        void action.run(async () => {
+          await profile.update(draft);
+          setDraft({});
+          setSaved(true);
+        });
+      },
+      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: [
+            "Display name",
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "input",
+              {
+                className: "basic-input",
+                type: "text",
+                maxLength: 64,
+                value: ("name" in draft ? draft.name : profile.data?.profile.name) ?? "",
+                onChange: (event) => {
+                  setSaved(false);
+                  setDraft((current) => ({
+                    ...current,
+                    name: event.target.value || null
+                  }));
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "basic-actions basic-modal-footer", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              BasicButton,
+              {
+                variant: "ghost",
+                onClick: () => {
+                  setDraft({});
+                  setSaved(false);
+                },
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              BasicButton,
+              {
+                type: "submit",
+                variant: "solid",
+                disabled: !Object.keys(draft).length,
+                children: "Save changes"
+              }
+            )
+          ] })
+        ] }),
+        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." })
+      ]
+    }
+  );
+}
+function SharesModal({
+  auth: supplied,
+  accounts: suppliedAccounts,
+  sync,
+  shares,
+  scope,
+  repo = "default",
+  ...props
+}) {
+  const live = useAuth();
+  const liveAccounts = useAccounts();
+  const auth = supplied ?? live;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Modal,
+    {
+      ...props,
+      title: "Shares",
+      description: "Manage incoming invitations and share access to selected data.",
+      header: /* @__PURE__ */ (0, import_jsx_runtime3.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)(
+        SharesContent,
+        {
+          shares,
+          scope,
+          repo,
+          canWrite: auth.canWrite
+        },
+        auth.did ?? "account"
+      )
+    }
+  );
+}
+function SharesContent({
+  shares: supplied,
+  scope,
+  repo,
+  canWrite
+}) {
+  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 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" })
+    ] }),
+    /* @__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: [
+          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)(
+        "form",
+        {
+          className: "basic-share-form",
+          onSubmit: (event) => {
+            event.preventDefault();
+            if (!recipient.trim() || !scopeValid || !canWrite) return;
+            void action.run(async () => {
+              await shares.create({
+                repo,
+                scope,
+                role,
+                ...recipient.trim().startsWith("did:") ? { recipientDid: recipient.trim() } : { recipientHandle: recipient.trim().replace(/^@+/, "") }
+              });
+              setRecipient("");
+              setMessage("Invitation sent.");
+              shares.refresh();
+            });
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "basic-field", children: [
+              "Recipient handle or DID",
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "input",
+                {
+                  className: "basic-input",
+                  value: recipient,
+                  onChange: (event) => setRecipient(event.target.value),
+                  placeholder: "@alex.basic.id",
+                  required: true,
+                  disabled: action.pending || !canWrite
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "basic-field", children: [
+              "Permission",
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "select",
+                {
+                  className: "basic-input",
+                  value: role,
+                  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_runtime3.jsx)(
+              BasicButton,
+              {
+                type: "submit",
+                variant: "solid",
+                disabled: action.pending || !canWrite || !scopeValid || !recipient.trim(),
+                children: action.pending ? "Please wait\u2026" : "Send invitation"
+              }
+            )
+          ]
+        }
+      ),
+      !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)(
+          BasicButton,
+          {
+            disabled: action.pending || shares.isLoading,
+            onClick: shares.refresh,
+            children: "Refresh"
+          }
+        )
+      ] }),
+      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: [
+            share.role === "viewer" ? "Can view" : "Can edit",
+            " \xB7",
+            " ",
+            share.effectiveState,
+            " \xB7",
+            " ",
+            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)(
+            BasicButton,
+            {
+              disabled: action.pending || !canWrite,
+              onClick: () => void action.run(async () => {
+                await (share.state === "pending" ? shares.cancel(share.id) : shares.revoke(share.id));
+                setConfirmation(null);
+                setMessage(
+                  share.state === "pending" ? "Invitation canceled." : "Access revoked."
+                );
+                shares.refresh();
+              }),
+              children: [
+                "Confirm",
+                " ",
+                share.state === "pending" ? "cancel" : "revoke"
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            BasicButton,
+            {
+              disabled: action.pending,
+              onClick: () => setConfirmation(null),
+              children: "Keep access"
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          BasicButton,
+          {
+            disabled: action.pending || !canWrite,
+            onClick: () => setConfirmation(share.id),
+            children: share.state === "pending" ? "Cancel invitation" : "Revoke access"
+          }
+        ))
+      ] }, share.id)) })
+    ] })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AccountSettingsModal,
+  AuthStatus,
+  BasicButton,
   BasicProvider,
+  BasicUIProvider,
   BrowserKeyValueStorage,
   BrowserTokenStore,
   PersistenceStore,
+  SharesModal,
+  SignInButton,
+  SignOutButton,
+  SyncStatus,
+  UserAvatar,
+  UserButton,
+  UserMenu,
   browserCurrentUrl,
   browserNavigate,
   browserReplaceUrl,
@@ -1110,6 +2230,7 @@ function createBasic(config) {
   useFiles,
   useMounts,
   useOutgoingShares,
+  useProjectProfile,
   useQuery,
   useRepos,
   useSchemaStatus,