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

package/dist/index.mjs

@@ -1,3 +1,5 @@
+'use client';
+
 // src/create-basic.tsx
 import { useContext as useContext2 } from "react";
 
@@ -734,7 +736,7 @@ function useAsyncResult(load, initialData, enabled, settled, dependencies) {
 function useAccountsFor(client) {
   const snapshot = useClientSnapshot(client);
   const switchAccount = useCallback((id) => client.switchAccount(id), [client]);
-  const addAccount = useCallback(() => client.addAccount(), [client]);
+  const addAccount = useCallback((options) => client.addAccount(options), [client]);
   const removeAccount = useCallback((id) => client.removeAccount(id), [client]);
   return useMemo2(() => ({
     accounts: snapshot.accounts,
@@ -1003,6 +1005,47 @@ function useQuery(collection, query = {}, options = {}) {
   return useQueryValueFor(useRequiredClient(), collection, query, options);
 }
 
+// src/hooks/profile.ts
+import {
+  BasicError as BasicError5
+} from "@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 BasicError5("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
 import { jsx as jsx2 } from "react/jsx-runtime";
 function createBasic(config) {
@@ -1031,17 +1074,1094 @@ 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
+import {
+  createContext as createContext2,
+  Fragment,
+  forwardRef,
+  isValidElement,
+  useContext as useContext3,
+  useEffect as useEffect4,
+  useRef as useRef3,
+  useState as useState4
+} from "react";
+import { Avatar } from "@base-ui/react/avatar";
+import { Dialog } from "@base-ui/react/dialog";
+import { Menu } from "@base-ui/react/menu";
+import { Tabs } from "@base-ui/react/tabs";
+import { BasicError as BasicError6 } from "@basictech/core";
+import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var AppearanceContext = createContext2({});
+function accentText(accent) {
+  if (!/^#([\da-f]{3}|[\da-f]{6})$/i.test(accent)) return "#fff";
+  const hex = accent.length === 4 ? accent.slice(1).split("").map((digit) => digit + digit).join("") : accent.slice(1);
+  const [red, green, blue] = [0, 2, 4].map((offset) => {
+    const channel = parseInt(hex.slice(offset, offset + 2), 16) / 255;
+    return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * red + 0.7152 * green + 0.0722 * blue > 0.179 ? "#000" : "#fff";
+}
+function appearanceStyle(appearance) {
+  return {
+    ...appearance.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 = useContext3(AppearanceContext);
+  const value = { ...parent, ...appearance };
+  return /* @__PURE__ */ jsx3(AppearanceContext.Provider, { value, children: /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: "basic-ui",
+      "data-theme": value.theme ?? "light",
+      "data-density": value.density ?? "comfortable",
+      style: appearanceStyle(value),
+      children
+    }
+  ) });
+}
+function useAppearanceProps() {
+  const appearance = useContext3(AppearanceContext);
+  return {
+    "data-theme": appearance.theme ?? "light",
+    "data-density": appearance.density ?? "comfortable",
+    style: appearanceStyle(appearance)
+  };
+}
+var BasicButton = forwardRef(
+  function BasicButton2({ variant = "outline", className = "", type = "button", ...props }, ref) {
+    return /* @__PURE__ */ jsx3(
+      "button",
+      {
+        ...props,
+        ref,
+        type,
+        className: `basic-button ${className}`,
+        "data-variant": variant
+      }
+    );
+  }
+);
+function useAction() {
+  const [pending, setPending] = useState4(false);
+  const [error, setError] = useState4(null);
+  const busy = useRef3(false);
+  const mounted = useRef3(true);
+  useEffect4(() => {
+    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 BasicError6 && cause.code === "REDIRECT_URI_NOT_REGISTERED" ? "Sign-in is unavailable on this URL. Ask the app owner to register its callback URL in project settings." : cause instanceof Error ? cause.message : "The action failed. Please try again."
+        );
+    } 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__ */ jsxs("span", { className: "basic-action", children: [
+    /* @__PURE__ */ jsx3(
+      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__ */ jsx3(ActionError, { error: action.error, onClose: action.clearError })
+  ] });
+}
+function SignInButton(props) {
+  return /* @__PURE__ */ jsx3(AuthButton, { ...props });
+}
+function SignOutButton(props) {
+  return /* @__PURE__ */ jsx3(AuthButton, { ...props, signOut: true });
+}
+function UserAvatar({
+  accounts,
+  auth,
+  projectProfile,
+  allowAddAccount,
+  menuItems,
+  ...avatarProps
+}) {
+  return /* @__PURE__ */ jsx3(
+    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__ */ jsxs(
+    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__ */ jsx3(
+          Avatar.Image,
+          {
+            src: profile.picture,
+            alt: "",
+            className: "basic-avatar-image",
+            referrerPolicy: "no-referrer"
+          }
+        ),
+        /* @__PURE__ */ jsx3(Avatar.Fallback, { className: "basic-avatar-fallback", children: initials || "?" })
+      ]
+    }
+  );
+  return showSyncBadge ?? client.mode === "sync" ? /* @__PURE__ */ jsxs("span", { className: "basic-avatar-container", children: [
+    avatar,
+    /* @__PURE__ */ jsx3(SyncStatus, { sync, className: "basic-avatar-sync" })
+  ] }) : avatar;
+}
+function AuthStatus({
+  auth: supplied,
+  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__ */ jsxs(
+    "span",
+    {
+      ...props,
+      role: "status",
+      className: `basic-status ${className}`,
+      "data-tone": expired || auth.error ? "warning" : auth.isSignedIn ? "success" : "neutral",
+      children: [
+        /* @__PURE__ */ jsx3("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__ */ 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__ */ jsx3("span", { className: "basic-dot" }),
+        label,
+        sync.pendingCount > 0 && ` \xB7 ${sync.pendingCount} pending`
+      ]
+    }
+  );
+}
+function displayHandle(handle) {
+  return handle ? `@${handle.replace(/^@+/, "")}` : "";
+}
+function UserButton(props) {
+  return /* @__PURE__ */ jsx3(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] = useState4(false);
+  const [clearAccountId, setClearAccountId] = useState4(null);
+  const triggerRef = useRef3(null);
+  const appearance = useAppearanceProps();
+  const expired = auth.status === "expired";
+  const active = accounts.activeAccount;
+  const otherAccounts = accounts.accounts.filter(
+    (account) => account.id !== active?.id
+  );
+  const name = active?.name || active?.kind !== "anon" && displayHandle(active?.handle) || "Local account";
+  return /* @__PURE__ */ jsxs("span", { className: `basic-action ${className}`, children: [
+    /* @__PURE__ */ jsxs(Menu.Root, { children: [
+      /* @__PURE__ */ jsxs(
+        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__ */ jsx3(
+              AccountAvatar,
+              {
+                profile: accounts.activeAccount,
+                sync,
+                showSyncBadge,
+                ...avatarProps
+              }
+            ),
+            trigger === "button" && /* @__PURE__ */ jsxs(Fragment2, { children: [
+              /* @__PURE__ */ jsxs("span", { className: "basic-identity", children: [
+                /* @__PURE__ */ jsx3("strong", { children: name }),
+                active?.kind !== "anon" && active?.handle && /* @__PURE__ */ jsx3("small", { children: displayHandle(active.handle) })
+              ] }),
+              /* @__PURE__ */ jsx3(
+                "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__ */ jsx3("path", { d: "m6 9 6 6 6-6" })
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx3(Menu.Portal, { children: /* @__PURE__ */ jsx3(Menu.Positioner, { sideOffset: 8, className: "basic-positioner", children: /* @__PURE__ */ jsxs(Menu.Popup, { ...appearance, className: "basic-ui basic-menu", children: [
+        /* @__PURE__ */ jsxs("div", { className: "basic-menu-profile", children: [
+          /* @__PURE__ */ jsx3(
+            AccountAvatar,
+            {
+              profile: active,
+              size: 48,
+              sync,
+              showSyncBadge: false
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "basic-identity", children: [
+            /* @__PURE__ */ jsx3("strong", { children: active ? name : "No active account" }),
+            active?.kind !== "anon" && active?.handle && /* @__PURE__ */ jsx3("small", { children: displayHandle(active.handle) }),
+            /* @__PURE__ */ jsxs("span", { className: "basic-account-statuses", children: [
+              expired && /* @__PURE__ */ jsx3("span", { className: "basic-status", "data-tone": "warning", children: "Expired" }),
+              showSyncStatus && /* @__PURE__ */ jsx3(SyncStatus, { sync })
+            ] })
+          ] })
+        ] }),
+        expired && /* @__PURE__ */ jsx3(
+          Menu.Item,
+          {
+            className: "basic-menu-item basic-menu-reauth",
+            disabled: action.pending,
+            onClick: () => void action.run(() => auth.signIn()),
+            children: "Sign in again"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Menu.Item,
+          {
+            className: "basic-menu-item basic-manage-account",
+            onClick: () => setSettingsOpen(true),
+            children: [
+              /* @__PURE__ */ 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__ */ jsx3("circle", { cx: "12", cy: "7", r: "4" }),
+                    /* @__PURE__ */ jsx3("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" })
+                  ]
+                }
+              ),
+              "Manage account"
+            ]
+          }
+        ),
+        menuItems.map((item) => /* @__PURE__ */ jsxs(
+          Menu.Item,
+          {
+            className: "basic-menu-item",
+            render: item.href !== void 0 ? /* @__PURE__ */ jsx3("a", { href: item.href }) : void 0,
+            disabled: item.disabled || action.pending,
+            onClick: () => {
+              if (item.onClick) void action.run(item.onClick);
+            },
+            children: [
+              /* @__PURE__ */ jsx3("span", { className: "basic-menu-icon", "aria-hidden": "true", children: item.icon }),
+              item.label
+            ]
+          },
+          item.id
+        )),
+        (auth.isSignedIn || expired || active?.kind === "anon") && /* @__PURE__ */ jsxs(
+          Menu.Item,
+          {
+            className: "basic-menu-item basic-menu-signout",
+            disabled: action.pending,
+            onClick: () => active?.kind === "anon" ? setClearAccountId(active.id) : void action.run(() => auth.signOut()),
+            children: [
+              /* @__PURE__ */ jsx3(
+                "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__ */ jsx3("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" })
+                }
+              ),
+              active?.kind === "anon" ? "Clear account" : "Sign out"
+            ]
+          }
+        ),
+        otherAccounts.length > 0 && /* @__PURE__ */ jsxs(Fragment2, { children: [
+          /* @__PURE__ */ jsx3(Menu.Separator, { className: "basic-separator" }),
+          /* @__PURE__ */ jsx3("div", { className: "basic-menu-heading", children: "Switch accounts" })
+        ] }),
+        otherAccounts.map((account) => /* @__PURE__ */ jsxs(
+          Menu.Item,
+          {
+            className: "basic-menu-item",
+            disabled: action.pending,
+            onClick: () => void action.run(() => accounts.switchAccount(account.id)),
+            children: [
+              /* @__PURE__ */ jsx3(
+                AccountAvatar,
+                {
+                  profile: account,
+                  size: 32,
+                  sync,
+                  showSyncBadge: false
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "basic-identity", children: [
+                /* @__PURE__ */ jsx3("strong", { children: account.name || account.kind !== "anon" && displayHandle(account.handle) || (account.kind === "anon" ? "Local account" : "Account") }),
+                account.kind !== "anon" && account.handle && /* @__PURE__ */ jsx3("small", { children: displayHandle(account.handle) })
+              ] }),
+              /* @__PURE__ */ jsx3("span", { className: "basic-account-statuses", children: account.auth.status === "expired" ? /* @__PURE__ */ jsx3("span", { className: "basic-status", "data-tone": "warning", children: "Expired" }) : null })
+            ]
+          },
+          account.id
+        )),
+        (allowAddAccount || !auth.isSignedIn && !expired) && /* @__PURE__ */ jsxs(
+          Menu.Item,
+          {
+            className: "basic-menu-item",
+            disabled: action.pending,
+            onClick: () => void action.run(
+              () => allowAddAccount ? accounts.addAccount({ signIn: true }) : auth.signIn()
+            ),
+            children: [
+              /* @__PURE__ */ jsx3(
+                "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__ */ jsx3("path", { d: "M12 5v14M5 12h14" })
+                }
+              ),
+              "Add account"
+            ]
+          }
+        )
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ jsx3(
+      ActionError,
+      {
+        error: action.error,
+        onClose: action.clearError,
+        finalFocus: triggerRef
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      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__ */ jsxs("div", { className: "basic-actions", children: [
+          /* @__PURE__ */ jsx3(
+            BasicButton,
+            {
+              disabled: action.pending,
+              onClick: () => setClearAccountId(null),
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            BasicButton,
+            {
+              disabled: action.pending,
+              onClick: () => {
+                const id = clearAccountId;
+                if (!id) return;
+                setClearAccountId(null);
+                void action.run(() => accounts.removeAccount(id));
+              },
+              children: "Clear account"
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      AccountSettingsModal,
+      {
+        auth,
+        accounts,
+        open: settingsOpen,
+        onOpenChange: setSettingsOpen,
+        trigger: null,
+        finalFocus: triggerRef,
+        accountSettingsUrl,
+        projectProfile,
+        sync
+      }
+    )
+  ] });
+}
+function ActionError({
+  error,
+  onClose,
+  finalFocus
+}) {
+  return /* @__PURE__ */ 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__ */ jsx3("p", { role: "alert", className: "basic-error", children: error }),
+        /* @__PURE__ */ jsx3(BasicButton, { onClick: onClose, children: "Dismiss" })
+      ]
+    }
+  );
+}
+function Modal({
+  open,
+  onOpenChange,
+  trigger,
+  finalFocus,
+  title,
+  description,
+  header,
+  sectionLabel,
+  children
+}) {
+  const appearance = useAppearanceProps();
+  return /* @__PURE__ */ jsxs(Dialog.Root, { open, onOpenChange, children: [
+    trigger !== null && (isValidElement(trigger) ? /* @__PURE__ */ jsx3(Dialog.Trigger, { render: trigger }) : /* @__PURE__ */ jsx3(Dialog.Trigger, { render: /* @__PURE__ */ jsx3(BasicButton, {}), children: trigger ?? title })),
+    /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+      /* @__PURE__ */ jsx3(Dialog.Backdrop, { className: "basic-backdrop" }),
+      /* @__PURE__ */ jsxs(
+        Dialog.Popup,
+        {
+          ...appearance,
+          finalFocus,
+          className: "basic-ui basic-dialog",
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `basic-dialog-heading${header ? " basic-dialog-heading-overlay" : ""}`,
+                children: [
+                  /* @__PURE__ */ jsx3(Dialog.Title, { className: header ? "basic-sr-only" : "basic-title", children: title }),
+                  /* @__PURE__ */ jsx3(
+                    Dialog.Close,
+                    {
+                      className: "basic-button",
+                      "aria-label": `Close ${title.toLowerCase()}`,
+                      children: "\u2715"
+                    }
+                  )
+                ]
+              }
+            ),
+            header,
+            /* @__PURE__ */ jsx3(
+              Dialog.Description,
+              {
+                className: header ? "basic-sr-only" : "basic-muted",
+                children: description
+              }
+            ),
+            sectionLabel && /* @__PURE__ */ jsx3("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] = useState4(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__ */ jsx3(
+    Modal,
+    {
+      ...props,
+      title: "Account settings",
+      description: "Your identity and session on this device.",
+      header: /* @__PURE__ */ jsx3(AccountHeader, { account: accounts.activeAccount, sync }),
+      children: /* @__PURE__ */ jsxs(Tabs.Root, { defaultValue: "profile", children: [
+        /* @__PURE__ */ jsxs(
+          Tabs.List,
+          {
+            className: "basic-tabs",
+            "aria-label": "Account settings sections",
+            children: [
+              /* @__PURE__ */ jsx3(Tabs.Tab, { value: "profile", children: "Profile" }),
+              /* @__PURE__ */ jsx3(Tabs.Tab, { value: "advanced", children: "Advanced" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(Tabs.Panel, { value: "profile", keepMounted: true, children: [
+          auth.isSignedIn && /* @__PURE__ */ jsx3(
+            ProjectProfileEditor,
+            {
+              profile: projectProfile,
+              canWrite: auth.canWrite
+            },
+            accounts.activeAccount?.id ?? auth.did
+          ),
+          accountSettingsUrl && /* @__PURE__ */ jsx3("a", { className: "basic-link", href: accountSettingsUrl, children: "Manage profile and security \u2197" }),
+          children,
+          !auth.isSignedIn && /* @__PURE__ */ jsx3("div", { className: "basic-actions", children: /* @__PURE__ */ jsx3(SignInButton, { auth }) })
+        ] }),
+        /* @__PURE__ */ jsxs(Tabs.Panel, { value: "advanced", children: [
+          /* @__PURE__ */ jsx3("p", { className: "basic-muted", children: "Read-only diagnostics for this account." }),
+          /* @__PURE__ */ jsx3("dl", { className: "basic-details", children: details.map(([label, value]) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx3("dt", { children: label }),
+            /* @__PURE__ */ jsx3("dd", { children: value })
+          ] }, label)) }),
+          /* @__PURE__ */ jsxs("div", { className: "basic-actions", children: [
+            /* @__PURE__ */ jsx3(
+              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__ */ jsx3("span", { role: "status", className: "basic-muted", children: "Copied" })
+          ] }),
+          copyAction.error && /* @__PURE__ */ jsx3("p", { role: "alert", className: "basic-error", children: copyAction.error })
+        ] })
+      ] })
+    }
+  );
+}
+function AccountHeader({
+  account,
+  sync
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "basic-profile", children: [
+    /* @__PURE__ */ jsx3(
+      AccountAvatar,
+      {
+        profile: account,
+        size: 72,
+        sync,
+        showSyncBadge: false
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "basic-identity", children: [
+      /* @__PURE__ */ jsx3("strong", { children: account?.name || account?.kind !== "anon" && displayHandle(account?.handle) || "Local account" }),
+      account?.kind !== "anon" && account?.handle && /* @__PURE__ */ jsx3("small", { children: displayHandle(account.handle) }),
+      /* @__PURE__ */ jsx3("span", { className: "basic-account-statuses", children: /* @__PURE__ */ jsx3(SyncStatus, { sync }) })
+    ] })
+  ] });
+}
+function ProjectProfileEditor({
+  profile: supplied,
+  canWrite
+}) {
+  const live = useProjectProfile(supplied === void 0);
+  const profile = supplied ?? live;
+  const action = useAction();
+  const [draft, setDraft] = useState4({});
+  const [saved, setSaved] = useState4(false);
+  return /* @__PURE__ */ 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__ */ jsx3("h3", { className: "basic-section-label", children: "Personal information" }),
+        /* @__PURE__ */ jsx3("p", { className: "basic-muted", children: "Only this app sees these overrides. Clear a field to use your universal profile value." }),
+        profile.isLoading ? /* @__PURE__ */ jsx3("p", { role: "status", children: "Loading project profile\u2026" }) : profile.error ? /* @__PURE__ */ jsxs(Fragment2, { children: [
+          /* @__PURE__ */ jsx3("p", { role: "alert", className: "basic-error", children: profile.error.message }),
+          /* @__PURE__ */ jsx3(BasicButton, { onClick: profile.refresh, children: "Retry profile" })
+        ] }) : profile.data && /* @__PURE__ */ jsxs("fieldset", { disabled: !canWrite || action.pending, children: [
+          /* @__PURE__ */ jsxs("label", { className: "basic-field", children: [
+            "Display name",
+            /* @__PURE__ */ jsx3(
+              "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__ */ jsxs("div", { className: "basic-actions basic-modal-footer", children: [
+            /* @__PURE__ */ jsx3(
+              BasicButton,
+              {
+                variant: "ghost",
+                onClick: () => {
+                  setDraft({});
+                  setSaved(false);
+                },
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              BasicButton,
+              {
+                type: "submit",
+                variant: "solid",
+                disabled: !Object.keys(draft).length,
+                children: "Save changes"
+              }
+            )
+          ] })
+        ] }),
+        action.error && /* @__PURE__ */ jsx3("p", { role: "alert", className: "basic-error", children: action.error }),
+        saved && /* @__PURE__ */ jsx3("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__ */ jsx3(
+    Modal,
+    {
+      ...props,
+      title: "Shares",
+      description: "Manage incoming invitations and share access to selected data.",
+      header: /* @__PURE__ */ jsx3(
+        AccountHeader,
+        {
+          account: (suppliedAccounts ?? liveAccounts).activeAccount,
+          sync
+        }
+      ),
+      children: !auth.isReady ? /* @__PURE__ */ jsx3("p", { role: "status", children: "Checking session\u2026" }) : !auth.isSignedIn ? /* @__PURE__ */ jsxs(Fragment2, { children: [
+        /* @__PURE__ */ jsx3("p", { className: "basic-muted", children: "Sign in to share data." }),
+        /* @__PURE__ */ jsx3(SignInButton, { auth })
+      ] }) : /* @__PURE__ */ jsx3(
+        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] = useState4("");
+  const [role, setRole] = useState4("viewer");
+  const [confirmation, setConfirmation] = useState4(null);
+  const [message, setMessage] = useState4("");
+  const scopeValid = scope.length > 0 && scope.every(
+    (item) => item.table.trim() && (item.recordIds === void 0 || item.recordIds.length > 0)
+  );
+  return /* @__PURE__ */ jsxs(Tabs.Root, { defaultValue: "outgoing", className: "basic-shares", children: [
+    /* @__PURE__ */ jsxs(Tabs.List, { className: "basic-tabs", "aria-label": "Share direction", children: [
+      /* @__PURE__ */ jsx3(Tabs.Tab, { value: "outgoing", children: "Outgoing" }),
+      /* @__PURE__ */ jsx3(Tabs.Tab, { value: "incoming", children: "Incoming invitations" })
+    ] }),
+    /* @__PURE__ */ jsx3(Tabs.Panel, { value: "incoming", children: /* @__PURE__ */ jsxs("section", { "aria-label": "Incoming invitations", children: [
+      /* @__PURE__ */ jsx3("h3", { className: "basic-title", children: "Incoming invitations" }),
+      /* @__PURE__ */ jsx3("p", { className: "basic-muted", children: "View, accept, or decline incoming invitations in Basic ID. Your app session cannot access the account-wide inbox." }),
+      /* @__PURE__ */ jsx3("a", { className: "basic-link", href: shares.manageUrl(), children: "Open incoming invitations in Basic ID \u2197" })
+    ] }) }),
+    /* @__PURE__ */ jsxs(Tabs.Panel, { value: "outgoing", children: [
+      /* @__PURE__ */ jsx3("p", { className: "basic-muted", children: "Revoking access stops future requests. It cannot retract data the recipient already downloaded." }),
+      /* @__PURE__ */ jsxs("div", { className: "basic-scope", children: [
+        /* @__PURE__ */ jsx3("strong", { children: "New invitation permissions" }),
+        scope.map((item, index) => /* @__PURE__ */ jsxs("span", { children: [
+          item.table,
+          " \xB7",
+          " ",
+          item.recordIds ? `${item.recordIds.length} selected records` : "all records"
+        ] }, index))
+      ] }),
+      !canWrite && /* @__PURE__ */ jsx3("p", { className: "basic-error", children: "This session is read only. Sharing changes are disabled." }),
+      /* @__PURE__ */ jsxs(
+        "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__ */ jsxs("label", { className: "basic-field", children: [
+              "Recipient handle or DID",
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  className: "basic-input",
+                  value: recipient,
+                  onChange: (event) => setRecipient(event.target.value),
+                  placeholder: "@alex.basic.id",
+                  required: true,
+                  disabled: action.pending || !canWrite
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "basic-field", children: [
+              "Permission",
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  className: "basic-input",
+                  value: role,
+                  onChange: (event) => setRole(event.target.value),
+                  disabled: action.pending || !canWrite,
+                  children: [
+                    /* @__PURE__ */ jsx3("option", { value: "viewer", children: "Can view" }),
+                    /* @__PURE__ */ jsx3("option", { value: "editor", children: "Can edit" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx3(
+              BasicButton,
+              {
+                type: "submit",
+                variant: "solid",
+                disabled: action.pending || !canWrite || !scopeValid || !recipient.trim(),
+                children: action.pending ? "Please wait\u2026" : "Send invitation"
+              }
+            )
+          ]
+        }
+      ),
+      !scopeValid && /* @__PURE__ */ jsx3("p", { role: "alert", className: "basic-error", children: "Select at least one table or record to share." }),
+      action.error && /* @__PURE__ */ jsx3("p", { role: "alert", className: "basic-error", children: action.error }),
+      message && /* @__PURE__ */ jsx3("p", { role: "status", className: "basic-muted", children: message }),
+      /* @__PURE__ */ jsxs("div", { className: "basic-section-heading", children: [
+        /* @__PURE__ */ jsx3("h3", { className: "basic-title", children: "Outgoing shares \xB7 all permissions" }),
+        /* @__PURE__ */ jsx3(
+          BasicButton,
+          {
+            disabled: action.pending || shares.isLoading,
+            onClick: shares.refresh,
+            children: "Refresh"
+          }
+        )
+      ] }),
+      shares.isLoading ? /* @__PURE__ */ jsx3("p", { role: "status", children: "Loading shares\u2026" }) : shares.error ? /* @__PURE__ */ jsx3("p", { role: "alert", className: "basic-error", children: shares.error.message }) : !shares.data.length ? /* @__PURE__ */ jsx3("p", { className: "basic-empty", children: "No outgoing shares yet." }) : /* @__PURE__ */ jsx3("ul", { className: "basic-share-list", children: shares.data.map((share) => /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "basic-identity", children: [
+          /* @__PURE__ */ jsx3("strong", { children: share.display.shareName || share.recipientDid }),
+          /* @__PURE__ */ jsxs("small", { children: [
+            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__ */ jsxs("div", { className: "basic-actions", children: [
+          /* @__PURE__ */ jsx3("span", { children: "Remove access?" }),
+          /* @__PURE__ */ 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__ */ jsx3(
+            BasicButton,
+            {
+              disabled: action.pending,
+              onClick: () => setConfirmation(null),
+              children: "Keep access"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx3(
+          BasicButton,
+          {
+            disabled: action.pending || !canWrite,
+            onClick: () => setConfirmation(share.id),
+            children: share.state === "pending" ? "Cancel invitation" : "Revoke access"
+          }
+        ))
+      ] }, share.id)) })
+    ] })
+  ] });
+}
 export {
+  AccountSettingsModal,
+  AuthStatus,
+  BasicButton,
   BasicProvider,
+  BasicUIProvider,
   BrowserKeyValueStorage,
   BrowserTokenStore,
   PersistenceStore,
+  SharesModal,
+  SignInButton,
+  SignOutButton,
+  SyncStatus,
+  UserAvatar,
+  UserButton,
+  UserMenu,
   browserCurrentUrl,
   browserNavigate,
   browserReplaceUrl,
@@ -1059,6 +2179,7 @@ export {
   useFiles,
   useMounts,
   useOutgoingShares,
+  useProjectProfile,
   useQuery,
   useRepos,
   useSchemaStatus,