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

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,
@@ -59,10 +72,21 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/create-basic.tsx
+var import_react12 = require("react");
+
+// src/context.ts
+var import_react = require("react");
+var BasicClientContext = (0, import_react.createContext)(null);
+
 // src/create-client.ts
 var import_core4 = require("@basictech/core");
 
 // src/adapters/broadcast-channel.ts
+function supportsAccessTokenAdoption(store) {
+  const candidate = store;
+  return typeof candidate?.accessToken === "function" && typeof candidate?.adoptAccessToken === "function";
+}
 function createBrowserMessageChannel(name) {
   const channel = new BroadcastChannel(name);
   const adapter = {
@@ -73,12 +97,11 @@ function createBrowserMessageChannel(name) {
   channel.onmessage = (event) => adapter.onmessage?.({ data: event.data });
   return adapter;
 }
-function createBrowserAuthChannelFactory(clientId, tokenStore) {
-  const prefix = `basic_auth:${clientId}:`;
-  return (name) => {
+function createBrowserAuthChannelFactory(tokenStore) {
+  return (name, context) => {
     const channel = createBrowserMessageChannel(name);
-    const profileId = name.startsWith(prefix) ? name.slice(prefix.length) : "";
-    const tokenKey = `u:${profileId}:basic_tokens`;
+    if (!context) return channel;
+    const { tokenKey } = context;
     const adapter = {
       postMessage: (message) => {
         const outgoing = message;
@@ -620,32 +643,27 @@ function browserReconcileTrigger(listener) {
 function createBasicClient(config) {
   const local = browserStorage("localStorage") ?? new import_core4.MemoryKeyValueStorage();
   const session = browserStorage("sessionStorage") ?? new import_core4.MemoryKeyValueStorage();
-  const defaultTokenStore = config.tokenStore ? null : new BrowserTokenStore(local);
+  const tokenStore = config.tokenStore ?? new BrowserTokenStore(local);
   const canBroadcast = typeof BroadcastChannel !== "undefined";
   const canPersistReplica = typeof indexedDB !== "undefined";
+  const messageChannel = !canBroadcast ? void 0 : supportsAccessTokenAdoption(tokenStore) ? createBrowserAuthChannelFactory(tokenStore) : createBrowserMessageChannel;
   return (0, import_core4.createBasicClient)({
     ...config,
     kv: config.kv ?? local,
-    tokenStore: config.tokenStore ?? defaultTokenStore,
+    tokenStore,
     sessionStorage: config.sessionStorage ?? session,
     replicaStore: config.replicaStore ?? (canPersistReplica ? new PersistenceStore(config.clientId) : new import_core4.MemoryReplicaStoreFactory()),
     navigate: config.navigate ?? browserNavigate,
     currentUrl: config.currentUrl ?? browserCurrentUrl,
     replaceUrl: config.replaceUrl ?? browserReplaceUrl,
     reconcileTrigger: config.reconcileTrigger ?? browserReconcileTrigger,
-    createMessageChannel: config.createMessageChannel ?? (canBroadcast && defaultTokenStore ? createBrowserAuthChannelFactory(config.clientId, defaultTokenStore) : void 0),
+    createMessageChannel: config.createMessageChannel ?? messageChannel,
     uploadTransport: config.uploadTransport ?? (typeof XMLHttpRequest === "undefined" ? void 0 : browserUploadTransport)
   });
 }
 
 // src/provider.tsx
 var import_react2 = require("react");
-
-// src/context.ts
-var import_react = require("react");
-var BasicClientContext = (0, import_react.createContext)(null);
-
-// src/provider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var clientLifecycles = /* @__PURE__ */ new WeakMap();
 function retainClient(client) {
@@ -727,6 +745,10 @@ function useRequiredClient() {
 function useClientSnapshot(client) {
   return (0, import_react3.useSyncExternalStore)(client.subscribe, client.getSnapshot, client.getSnapshot);
 }
+function useSignInGate(snapshot) {
+  const code = snapshot.isReady && !snapshot.isSignedIn ? snapshot.readOnlyReason ?? "AUTHORIZATION_REQUIRED" : null;
+  return (0, import_react3.useMemo)(() => code === null ? null : new import_core5.BasicError(code, code === "AUTH_EXPIRED" ? "Session expired. Sign in again to load this list." : "Sign in to load this list."), [code]);
+}
 function toBasicError(error, fallback = "UNKNOWN_ERROR") {
   if (error instanceof import_core5.BasicError) return error;
   return new import_core5.BasicError(fallback, error instanceof Error ? error.message : String(error));
@@ -775,15 +797,15 @@ 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,
-    active: snapshot.activeProfile,
+    activeAccount: snapshot.activeAccount,
     switchAccount,
     addAccount,
     removeAccount
-  }), [snapshot.accounts, snapshot.activeProfile, switchAccount, addAccount, removeAccount]);
+  }), [snapshot.accounts, snapshot.activeAccount, switchAccount, addAccount, removeAccount]);
 }
 function useAccounts() {
   return useAccountsFor(useRequiredClient());
@@ -791,7 +813,6 @@ function useAccounts() {
 
 // src/hooks/auth.ts
 var import_react5 = require("react");
-var import_core6 = require("@basictech/core");
 function useAuthFor(client) {
   const snapshot = useClientSnapshot(client);
   const signIn = (0, import_react5.useCallback)((input) => client.signIn(input), [client]);
@@ -804,7 +825,7 @@ function useAuthFor(client) {
     canWrite: snapshot.canWrite,
     readOnlyReason: snapshot.readOnlyReason,
     status: snapshot.authStatus,
-    error: snapshot.authErrorCode ? new import_core6.BasicError(snapshot.authErrorCode) : null,
+    error: snapshot.authError,
     user: snapshot.user,
     did: snapshot.did,
     handle: snapshot.handle,
@@ -817,6 +838,9 @@ function useAuth() {
   return useAuthFor(useRequiredClient());
 }
 
+// src/hooks/basic.ts
+var import_react8 = require("react");
+
 // src/hooks/db.ts
 function useDbFor(client, source = "default") {
   return client.db(source);
@@ -893,51 +917,41 @@ function useBasicFor(client) {
   const auth = useAuthFor(client);
   const accounts = useAccountsFor(client);
   const sync = useSyncStatusFor(client);
-  const repos = useReposFor(client);
-  return {
+  const repos = useReposFor(client).repos;
+  const db = useDbFor(client);
+  return (0, import_react8.useMemo)(() => ({
     ...auth,
     client,
-    db: useDbFor(client),
+    db,
     accounts,
     sync,
-    repos: repos.repos
-  };
+    repos
+  }), [auth, client, db, accounts, sync, repos]);
 }
 function useBasic() {
   return useBasicFor(useRequiredClient());
 }
 
 // src/hooks/files.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 var zero = () => 0;
 function useFilesFor(client, query = {}, options = {}) {
   const source = options.source ?? "default";
   const sourceKey = JSON.stringify(source);
   const queryKey = JSON.stringify(query);
   const snapshot = useClientSnapshot(client);
-  const subscription = (0, import_react8.useMemo)(
+  const subscription = (0, import_react9.useMemo)(
     () => client.queryStore.collection(source, "_files"),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [client, sourceKey]
   );
-  const version = (0, import_react8.useSyncExternalStore)(subscription.subscribe, subscription.getSnapshot, zero);
+  const version = (0, import_react9.useSyncExternalStore)(subscription.subscribe, subscription.getSnapshot, zero);
   return useAsyncResult(
-    async () => {
-      const files = client.db(source).files;
-      if (source !== "default" && "mountId" in source) {
-        const page = await files.list({
-          ...query.prefix !== void 0 ? { prefix: query.prefix } : {},
-          ...query.limit !== void 0 ? { limit: query.limit } : {},
-          ...query.cursor !== void 0 ? { cursor: query.cursor } : {}
-        });
-        return page.data;
-      }
-      return (await files.list(query)).data;
-    },
+    async () => (await client.db(source).files.list(query)).data,
     [],
     snapshot.isReady,
     snapshot.isReady,
-    [sourceKey, queryKey, version, snapshot.activeProfile?.id]
+    [sourceKey, queryKey, version, snapshot.activeAccount?.id]
   );
 }
 function useFiles(query = {}, options = {}) {
@@ -945,61 +959,62 @@ function useFiles(query = {}, options = {}) {
 }
 function useStorageInfoFor(client) {
   const snapshot = useClientSnapshot(client);
-  return useAsyncResult(
+  const gate = useSignInGate(snapshot);
+  const result = useAsyncResult(
     () => client.storageInfo(client.resolveRepoId()),
     null,
     snapshot.isReady && snapshot.isSignedIn,
     snapshot.isReady,
-    [snapshot.activeProfile?.id]
+    [snapshot.activeAccount?.id]
   );
+  return { ...result, error: result.error ?? gate };
 }
 function useStorageInfo() {
   return useStorageInfoFor(useRequiredClient());
 }
 
 // src/hooks/mounts.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 function useMountsFor(client, query = {}) {
   const snapshot = useClientSnapshot(client);
+  const gate = useSignInGate(snapshot);
   const queryKey = JSON.stringify(query);
   const result = useAsyncResult(
     () => client.shares.mounts(query),
     [],
     snapshot.isReady && snapshot.isSignedIn,
     snapshot.isReady,
-    [queryKey, snapshot.activeProfile?.id]
+    [queryKey, snapshot.activeAccount?.id]
   );
-  const open = (0, import_react9.useCallback)(
+  const open = (0, import_react10.useCallback)(
     (mountId) => client.shares.mount(mountId),
     [client]
   );
-  const manageUrl = (0, import_react9.useCallback)(() => client.shares.manageUrl(), [client]);
-  const { data: mounts, ...state } = result;
-  return { data: mounts, mounts, ...state, open, manageUrl };
+  const manageUrl = (0, import_react10.useCallback)(() => client.shares.manageUrl(), [client]);
+  return { ...result, error: result.error ?? gate, open, manageUrl };
 }
 function useMounts(query = {}) {
   return useMountsFor(useRequiredClient(), query);
 }
 function useOutgoingSharesFor(client) {
   const snapshot = useClientSnapshot(client);
+  const gate = useSignInGate(snapshot);
   const result = useAsyncResult(
     () => client.shares.listOutgoing(),
     [],
     snapshot.isReady && snapshot.isSignedIn,
     snapshot.isReady,
-    [snapshot.activeProfile?.id]
+    [snapshot.activeAccount?.id]
   );
-  const create = (0, import_react9.useCallback)((input) => client.shares.createOutgoing(input), [client]);
-  const get = (0, import_react9.useCallback)((id) => client.shares.getOutgoing(id), [client]);
-  const cancel = (0, import_react9.useCallback)((id) => client.shares.cancel(id), [client]);
-  const revoke = (0, import_react9.useCallback)((id) => client.shares.revoke(id), [client]);
-  const getContactHandle = (0, import_react9.useCallback)((did) => client.shares.getContactHandle(did), [client]);
-  const manageUrl = (0, import_react9.useCallback)(() => client.shares.manageUrl(), [client]);
-  const { data: outgoingShares, ...state } = result;
+  const create = (0, import_react10.useCallback)((input) => client.shares.createOutgoing(input), [client]);
+  const get = (0, import_react10.useCallback)((id) => client.shares.getOutgoing(id), [client]);
+  const cancel = (0, import_react10.useCallback)((id) => client.shares.cancel(id), [client]);
+  const revoke = (0, import_react10.useCallback)((id) => client.shares.revoke(id), [client]);
+  const getContactHandle = (0, import_react10.useCallback)((did) => client.shares.getContactHandle(did), [client]);
+  const manageUrl = (0, import_react10.useCallback)(() => client.shares.manageUrl(), [client]);
   return {
-    data: outgoingShares,
-    outgoingShares,
-    ...state,
+    ...result,
+    error: result.error ?? gate,
     create,
     get,
     cancel,
@@ -1013,58 +1028,35 @@ function useOutgoingShares() {
 }
 
 // src/hooks/query.ts
-var import_react10 = require("react");
-var subscribeNever = () => () => {
-};
-var zero2 = () => 0;
+var import_react11 = require("react");
 function useQueryValueFor(client, collection, query = {}, options = {}) {
   const source = options.source ?? "default";
   const sourceKey = JSON.stringify(source);
   const queryKey = JSON.stringify(query);
   const snapshot = useClientSnapshot(client);
-  const subscription = (0, import_react10.useMemo)(
-    () => client.queryStore.collection(source, collection),
-    // sourceKey captures semantic source identity rather than object identity.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [client, sourceKey, collection]
-  );
-  const version = (0, import_react10.useSyncExternalStore)(
-    subscription?.subscribe ?? subscribeNever,
-    subscription?.getSnapshot ?? zero2,
-    zero2
-  );
-  const [result, setResult] = (0, import_react10.useState)({
+  const [result, setResult] = (0, import_react11.useState)({
     data: [],
     isLoading: true,
     error: null
   });
-  (0, import_react10.useEffect)(() => {
-    let active = true;
-    if (!snapshot.isReady) {
-      setResult((current) => ({ ...current, isLoading: true, error: null }));
-      return () => {
-        active = false;
-      };
-    }
+  (0, import_react11.useEffect)(() => {
     setResult((current) => ({ ...current, isLoading: true, error: null }));
-    const collectionApi = client.db(source).collection(collection);
-    const list = collectionApi.list;
-    void list.call(collectionApi, query).then(
-      (page) => {
-        if (active) setResult({ data: page.data, isLoading: false, error: null });
-      },
-      (error) => {
-        if (active) setResult((current) => ({
+    if (!snapshot.isReady) return;
+    try {
+      return client.db(source).collection(collection).watch(
+        query,
+        (page) => setResult({ data: page.data, isLoading: false, error: null }),
+        (error) => setResult((current) => ({
           ...current,
           isLoading: false,
           error: toBasicError(error, "QUERY_FAILED")
-        }));
-      }
-    );
-    return () => {
-      active = false;
-    };
-  }, [client, collection, sourceKey, queryKey, version, snapshot.isReady]);
+        }))
+      );
+    } catch (error) {
+      setResult((current) => ({ ...current, isLoading: false, error: toBasicError(error, "QUERY_FAILED") }));
+      return;
+    }
+  }, [client, collection, sourceKey, queryKey, snapshot.isReady]);
   return result;
 }
 function useQueryFor(client, collection, query = {}, options = {}) {
@@ -1074,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,33 +1112,1058 @@ function createBasic(config) {
   function Provider({ children, renderWhileLoading }) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BasicProvider, { client, renderWhileLoading, children });
   }
+  function useBound() {
+    if ((0, import_react12.useContext)(BasicClientContext) !== client) {
+      throw new Error("Bound Basic hooks must be used within their own <basic.Provider>");
+    }
+    return client;
+  }
   function useBoundDb(source = "default") {
-    return client.db(source);
+    return useBound().db(source);
   }
   return {
     client,
     Provider,
-    useBasic: () => useBasicFor(client),
-    useAuth: () => useAuthFor(client),
-    useAccounts: () => useAccountsFor(client),
+    useBasic: () => useBasicFor(useBound()),
+    useAuth: () => useAuthFor(useBound()),
+    useAccounts: () => useAccountsFor(useBound()),
     useDb: useBoundDb,
-    useCollection: (name, options = {}) => useCollectionFor(client, name, options),
-    useQuery: (collection, query = {}, options = {}) => useQueryFor(client, collection, query, options),
-    useSyncStatus: (source) => useSyncStatusFor(client, source),
-    useSchemaStatus: (source = "default") => useSchemaStatusFor(client, source),
-    useRepos: () => useReposFor(client),
-    useFiles: (query = {}, options = {}) => useFilesFor(client, query, options),
-    useStorageInfo: () => useStorageInfoFor(client),
-    useMounts: (query = {}) => useMountsFor(client, query),
-    useOutgoingShares: () => useOutgoingSharesFor(client)
+    useCollection: (name, options = {}) => useCollectionFor(useBound(), name, options),
+    useQuery: (collection, query = {}, options = {}) => useQueryFor(useBound(), collection, query, options),
+    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 appearanceStyle(appearance) {
+  return {
+    ...appearance.accent ? { "--basic-accent": 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,
+  ...avatarProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    UserMenu,
+    {
+      accounts,
+      auth,
+      projectProfile,
+      allowAddAccount,
+      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
+}) {
+  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"
+            ]
+          }
+        ),
+        (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.jsx)(
+          import_menu.Menu.Item,
+          {
+            className: "basic-menu-item",
+            disabled: action.pending,
+            onClick: () => void action.run(
+              () => allowAddAccount ? accounts.addAccount({ signIn: true }) : auth.signIn()
+            ),
+            children: "\uFF0B 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,
@@ -1125,6 +2181,7 @@ function createBasic(config) {
   useFiles,
   useMounts,
   useOutgoingShares,
+  useProjectProfile,
   useQuery,
   useRepos,
   useSchemaStatus,