lens-convex-auth 0.1.0

package/dist/react/index.js

@@ -0,0 +1,1271 @@
+"use client";
+import {
+  CHALLENGE_MAX_AGE_MS,
+  CHALLENGE_REFRESH_MS,
+  OnboardingError,
+  TOKENS_CHANGED_EVENT,
+  authenticateOnboarding,
+  checkUsername,
+  createLensAccount,
+  createOnboardingClient,
+  isUsernameTaken,
+  opensWalletWithDeepLink,
+  requestOnboardingChallenge,
+  signInToCreatedAccount,
+  signLensChallenge,
+  uploadAccountMetadata,
+  usernameFormatError
+} from "../chunk-2UCSL2CL.js";
+
+// src/react/provider.tsx
+import * as React4 from "react";
+import { LensProvider } from "@lens-protocol/react";
+import { ThirdwebProvider, useActiveAccount as useActiveAccount2, useActiveWallet as useActiveWallet2, useDisconnect } from "thirdweb/react";
+import { ConvexProviderWithAuth, useConvexAuth } from "convex/react";
+
+// src/react/AccountDialog.tsx
+import * as React3 from "react";
+import { useAccountsAvailable } from "@lens-protocol/react";
+import { evmAddress } from "@lens-protocol/client";
+import { Loader2 as Loader22 } from "lucide-react";
+
+// src/react/CreateAccountForm.tsx
+import * as React from "react";
+import { useActiveAccount, useActiveWallet } from "thirdweb/react";
+import { Check, Loader2 } from "lucide-react";
+
+// src/react/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/react/ui/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        xl: "h-[50px] rounded-md px-8 has-[>svg]:px-6",
+        icon: "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/react/ui/input.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/react/ui/textarea.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/react/ui/avatar.tsx
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Avatar({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    AvatarPrimitive.Root,
+    {
+      "data-slot": "avatar",
+      className: cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    AvatarPrimitive.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn("aspect-square size-full", className),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    AvatarPrimitive.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/react/ui/field.tsx
+import { useMemo } from "react";
+import { cva as cva2 } from "class-variance-authority";
+
+// src/react/ui/label.tsx
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Label({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    LabelPrimitive.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/react/ui/field.tsx
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-slot": "field-group",
+      className: cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var fieldVariants = cva2(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ],
+        responsive: [
+          "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ]
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  }
+);
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: cn(fieldVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function FieldContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-slot": "field-content",
+      className: cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    Label,
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "p",
+    {
+      "data-slot": "field-description",
+      className: cn(
+        "text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/react/ui/input-group.tsx
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: cn(
+        "group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30",
+        "h-9 min-w-0 has-[>textarea]:h-auto",
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var inputGroupAddonVariants = cva3(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start": "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
+        "block-end": "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: cn(inputGroupAddonVariants({ align }), className),
+      onClick: (e) => {
+        if (e.target.closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+var inputGroupButtonVariants = cva3(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+        "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+      }
+    },
+    defaultVariants: {
+      size: "xs"
+    }
+  }
+);
+function InputGroupText({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "span",
+    {
+      className: cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    Input,
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/react/CreateAccountForm.tsx
+import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+var STEP_LABELS = {
+  signing: "Waiting for signature\u2026",
+  sign: "Sign in wallet",
+  checking: "Checking username\u2026",
+  uploading: "Uploading profile\u2026",
+  creating: "Creating account\u2026",
+  "signing-in": "Signing in\u2026"
+};
+var USERNAME_DEBOUNCE_MS = 300;
+var MAX_PICTURE_BYTES = 10 * 1024 * 1024;
+function CreateAccountForm({ ownerAddress, onCreated, onBack }) {
+  const { auth } = useLensAuth();
+  const activeAccount = useActiveAccount();
+  const wallet = useActiveWallet();
+  const [client] = React.useState(() => createOnboardingClient(auth));
+  const session = React.useRef(null);
+  const created = React.useRef(null);
+  const pictureInput = React.useRef(null);
+  const [username, setUsername] = React.useState("");
+  const [debouncedUsername, setDebouncedUsername] = React.useState("");
+  const [name, setName] = React.useState("");
+  const [bio, setBio] = React.useState("");
+  const [picture, setPicture] = React.useState(null);
+  const [pictureUrl, setPictureUrl] = React.useState(null);
+  const [availability, setAvailability] = React.useState(null);
+  const [usernameError, setUsernameError] = React.useState(null);
+  const [step, setStep] = React.useState(null);
+  const [error, setError] = React.useState(null);
+  const [prefetched, setPrefetched] = React.useState(null);
+  const formatError = username ? usernameFormatError(username) : null;
+  const busy = step !== null && step.status !== "sign";
+  React.useEffect(() => {
+    const refresh = () => {
+      if (document.visibilityState !== "visible" || session.current) return;
+      requestOnboardingChallenge(auth, client, ownerAddress).then((challenge) => setPrefetched({ challenge, fetchedAt: Date.now() })).catch(() => {
+      });
+    };
+    refresh();
+    const interval = setInterval(refresh, CHALLENGE_REFRESH_MS);
+    document.addEventListener("visibilitychange", refresh);
+    return () => {
+      clearInterval(interval);
+      document.removeEventListener("visibilitychange", refresh);
+    };
+  }, [auth, client, ownerAddress]);
+  React.useEffect(() => () => {
+    if (!created.current) void session.current?.logout();
+  }, []);
+  React.useEffect(() => {
+    if (!picture) return setPictureUrl(null);
+    const url = URL.createObjectURL(picture);
+    setPictureUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [picture]);
+  React.useEffect(() => {
+    const timeout = setTimeout(() => setDebouncedUsername(username), USERNAME_DEBOUNCE_MS);
+    return () => clearTimeout(timeout);
+  }, [username]);
+  React.useEffect(() => {
+    if (!debouncedUsername || usernameFormatError(debouncedUsername)) return;
+    let cancelled = false;
+    setAvailability({ localName: debouncedUsername, status: "checking" });
+    isUsernameTaken(auth, debouncedUsername).then((taken) => !cancelled && setAvailability({ localName: debouncedUsername, status: taken ? "taken" : "available" })).catch(() => !cancelled && setAvailability({ localName: debouncedUsername, status: "unknown" }));
+    return () => {
+      cancelled = true;
+    };
+  }, [auth, debouncedUsername]);
+  const fail = (e) => {
+    setStep(null);
+    if (e?.name === "UnauthenticatedError") session.current = null;
+    setError(e instanceof OnboardingError ? e.message : "Couldn\u2019t create your account. Please try again.");
+  };
+  const create = async (onboarding) => {
+    const localName = username;
+    if (!created.current) {
+      setStep({ status: "checking" });
+      const reason = await checkUsername(onboarding, localName);
+      if (reason) {
+        setUsernameError({ localName, message: reason });
+        setStep(null);
+        return;
+      }
+      setStep({ status: "uploading" });
+      const metadataUri = await uploadAccountMetadata(auth, { name: name.trim(), bio: bio.trim(), picture });
+      setStep({ status: "creating" });
+      if (!wallet) throw new OnboardingError("Connect your wallet");
+      const account = await createLensAccount(auth, onboarding, wallet, { localName, metadataUri });
+      created.current = { address: account.address, localName: account.username?.localName ?? localName };
+    }
+    setStep({ status: "signing-in" });
+    await signInToCreatedAccount(auth, onboarding, created.current.address);
+    await onCreated(created.current);
+  };
+  const continueWith = (authenticating) => {
+    authenticating.then(async (onboarding) => {
+      if (!onboarding) return;
+      session.current = onboarding;
+      await create(onboarding);
+    }).catch(fail);
+  };
+  const readyChallenge = () => {
+    if (step?.status === "sign") return step.challenge;
+    if (!prefetched || Date.now() - prefetched.fetchedAt >= CHALLENGE_MAX_AGE_MS) return null;
+    return prefetched.challenge;
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (busy || !activeAccount) return;
+    if (!username) return setUsernameError({ localName: username, message: "Choose a username" });
+    if (formatError || availability?.status === "taken") return;
+    setError(null);
+    setUsernameError(null);
+    if (session.current) {
+      setStep({ status: "checking" });
+      create(session.current).catch(fail);
+      return;
+    }
+    const challenge = readyChallenge();
+    if (challenge) {
+      const signing = signLensChallenge(challenge, activeAccount);
+      setPrefetched(null);
+      setStep({ status: "signing" });
+      continueWith(signing.then((signature) => authenticateOnboarding(client, challenge, signature)));
+      return;
+    }
+    setStep({ status: "signing" });
+    continueWith((async () => {
+      const fetched = await requestOnboardingChallenge(auth, client, ownerAddress);
+      if (opensWalletWithDeepLink()) {
+        setStep({ status: "sign", challenge: fetched });
+        return null;
+      }
+      const signature = await signLensChallenge(fetched, activeAccount);
+      return authenticateOnboarding(client, fetched, signature);
+    })());
+  };
+  const handlePictureChange = (e) => {
+    const file = e.target.files?.[0] ?? null;
+    e.target.value = "";
+    if (file && file.size > MAX_PICTURE_BYTES) return setError("Choose a picture under 10 MB");
+    setError(null);
+    setPicture(file);
+  };
+  const usernameMessage = (() => {
+    if (formatError) return { text: formatError, isError: true };
+    if (usernameError?.localName === username) return { text: usernameError.message, isError: true };
+    if (availability?.localName !== username) return null;
+    switch (availability.status) {
+      case "checking":
+        return { text: "Checking availability\u2026", isError: false };
+      case "available":
+        return { text: "Available", isError: false };
+      case "taken":
+        return { text: "This username is taken", isError: true };
+      default:
+        return null;
+    }
+  })();
+  const fallbackInitial = (name.trim() || username || "?").charAt(0).toUpperCase();
+  const usernameStatus = availability?.localName === username && !formatError ? availability.status : null;
+  return /* @__PURE__ */ jsx8("form", { className: "py-4", onSubmit: handleSubmit, noValidate: true, children: /* @__PURE__ */ jsxs2(FieldGroup, { className: "gap-5", children: [
+    /* @__PURE__ */ jsxs2(Field, { orientation: "horizontal", children: [
+      /* @__PURE__ */ jsxs2(Avatar, { className: "size-16", children: [
+        pictureUrl && /* @__PURE__ */ jsx8(AvatarImage, { src: pictureUrl, alt: "", className: "object-cover" }),
+        /* @__PURE__ */ jsx8(AvatarFallback, { className: "text-lg font-semibold", children: fallbackInitial })
+      ] }),
+      /* @__PURE__ */ jsxs2(FieldContent, { children: [
+        /* @__PURE__ */ jsxs2(FieldLabel, { htmlFor: "create-account-picture", children: [
+          "Profile picture ",
+          /* @__PURE__ */ jsx8("span", { className: "font-normal text-muted-foreground", children: "(optional)" })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx8(Button, { type: "button", variant: "outline", size: "sm", onClick: () => pictureInput.current?.click(), disabled: busy, children: picture ? "Change" : "Add photo" }),
+          picture && /* @__PURE__ */ jsx8(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setPicture(null), disabled: busy, children: "Remove" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx8(
+        "input",
+        {
+          ref: pictureInput,
+          id: "create-account-picture",
+          type: "file",
+          accept: "image/*",
+          className: "sr-only",
+          onChange: handlePictureChange,
+          disabled: busy
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2(Field, { "data-invalid": usernameMessage?.isError || void 0, children: [
+      /* @__PURE__ */ jsx8(FieldLabel, { htmlFor: "create-account-username", children: "Username" }),
+      /* @__PURE__ */ jsxs2(InputGroup, { children: [
+        /* @__PURE__ */ jsx8(InputGroupAddon, { children: /* @__PURE__ */ jsx8(InputGroupText, { children: "@" }) }),
+        /* @__PURE__ */ jsx8(
+          InputGroupInput,
+          {
+            id: "create-account-username",
+            value: username,
+            onChange: (e) => setUsername(e.target.value.trim().toLowerCase()),
+            autoComplete: "off",
+            autoCapitalize: "none",
+            autoCorrect: "off",
+            spellCheck: false,
+            "aria-invalid": usernameMessage?.isError || void 0,
+            "aria-describedby": "create-account-username-status",
+            disabled: busy
+          }
+        ),
+        /* @__PURE__ */ jsxs2(InputGroupAddon, { align: "inline-end", children: [
+          usernameStatus === "checking" && /* @__PURE__ */ jsx8(Loader2, { className: "animate-spin" }),
+          usernameStatus === "available" && /* @__PURE__ */ jsx8(Check, {})
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx8(
+        FieldDescription,
+        {
+          id: "create-account-username-status",
+          "aria-live": "polite",
+          className: cn("min-h-5 leading-5", usernameMessage?.isError && "text-destructive"),
+          children: usernameMessage?.text
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2(Field, { children: [
+      /* @__PURE__ */ jsxs2(FieldLabel, { htmlFor: "create-account-name", children: [
+        "Name ",
+        /* @__PURE__ */ jsx8("span", { className: "font-normal text-muted-foreground", children: "(optional)" })
+      ] }),
+      /* @__PURE__ */ jsx8(Input, { id: "create-account-name", value: name, onChange: (e) => setName(e.target.value), maxLength: 100, disabled: busy })
+    ] }),
+    /* @__PURE__ */ jsxs2(Field, { children: [
+      /* @__PURE__ */ jsxs2(FieldLabel, { htmlFor: "create-account-bio", children: [
+        "Bio ",
+        /* @__PURE__ */ jsx8("span", { className: "font-normal text-muted-foreground", children: "(optional)" })
+      ] }),
+      /* @__PURE__ */ jsx8(
+        Textarea,
+        {
+          id: "create-account-bio",
+          value: bio,
+          onChange: (e) => setBio(e.target.value),
+          maxLength: 300,
+          rows: 3,
+          className: "resize-none",
+          disabled: busy
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2(Field, { className: "gap-2", children: [
+      /* @__PURE__ */ jsxs2(Button, { type: "submit", className: "w-full", disabled: busy || !activeAccount, children: [
+        busy && /* @__PURE__ */ jsx8(Loader2, { className: "animate-spin" }),
+        step ? STEP_LABELS[step.status] : "Create account"
+      ] }),
+      /* @__PURE__ */ jsx8(FieldDescription, { "aria-live": "polite", className: cn("min-h-5 leading-5", error && "text-destructive"), children: error ?? (step?.status === "sign" ? "Tap again to sign in your wallet." : "You\u2019ll sign a message in your wallet. It\u2019s free.") }),
+      onBack && /* @__PURE__ */ jsx8(Button, { type: "button", variant: "ghost", className: "w-full", onClick: onBack, disabled: busy, children: "Back to your accounts" })
+    ] })
+  ] }) });
+}
+
+// src/react/dom.ts
+import * as React2 from "react";
+function useMediaQuery(query) {
+  return React2.useSyncExternalStore(
+    (onChange) => {
+      const media = window.matchMedia(query);
+      media.addEventListener("change", onChange);
+      return () => media.removeEventListener("change", onChange);
+    },
+    () => window.matchMedia(query).matches,
+    () => false
+  );
+}
+function readTheme() {
+  const classes = document.documentElement.classList;
+  if (classes.contains("dark")) return "dark";
+  if (classes.contains("light")) return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function useDocumentTheme() {
+  return React2.useSyncExternalStore(
+    (onChange) => {
+      const observer = new MutationObserver(onChange);
+      observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+      const media = window.matchMedia("(prefers-color-scheme: dark)");
+      media.addEventListener("change", onChange);
+      return () => {
+        observer.disconnect();
+        media.removeEventListener("change", onChange);
+      };
+    },
+    readTheme,
+    () => "light"
+  );
+}
+
+// src/react/ui/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs3(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx9(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs3(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs3(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx9(XIcon, {}),
+                /* @__PURE__ */ jsx9("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+
+// src/react/ui/drawer.tsx
+import { Drawer as DrawerPrimitive } from "vaul";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+function Drawer({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx10(DrawerPrimitive.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx10(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx10(
+    DrawerPrimitive.Overlay,
+    {
+      "data-slot": "drawer-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs4(DrawerPortal, { "data-slot": "drawer-portal", children: [
+    /* @__PURE__ */ jsx10(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs4(
+      DrawerPrimitive.Content,
+      {
+        "data-slot": "drawer-content",
+        className: cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx10("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx10(
+    DrawerPrimitive.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn("text-foreground font-semibold", className),
+      ...props
+    }
+  );
+}
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx10(
+    DrawerPrimitive.Description,
+    {
+      "data-slot": "drawer-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+
+// src/react/AccountDialog.tsx
+import { Fragment, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+function AccountDialog() {
+  const { wallet, signOut } = useLensAuth();
+  const { open, required, setOpen } = useAccountDialogState();
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+  const [creating, setCreating] = React3.useState(false);
+  React3.useEffect(() => {
+    if (!open) setCreating(false);
+  }, [open]);
+  const handleOpenChange = (next) => {
+    if (!next && required) return;
+    setOpen(next);
+  };
+  const body = wallet ? /* @__PURE__ */ jsx11(AccountDialogBody, { wallet, creating, setCreating }, wallet.address) : null;
+  const disconnect = /* @__PURE__ */ jsx11(Button, { onClick: signOut, variant: "outline", className: "w-full", children: "Disconnect Wallet" });
+  if (isDesktop) {
+    return /* @__PURE__ */ jsx11(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs5(
+      DialogContent,
+      {
+        className: "sm:max-w-[425px] max-h-[80vh] overflow-y-auto",
+        showCloseButton: !required,
+        onEscapeKeyDown: (e) => required && e.preventDefault(),
+        onPointerDownOutside: (e) => required && e.preventDefault(),
+        children: [
+          body,
+          /* @__PURE__ */ jsx11("div", { className: "mt-4", children: disconnect })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx11(Drawer, { open, onOpenChange: handleOpenChange, dismissible: !required, children: /* @__PURE__ */ jsxs5(DrawerContent, { className: "max-h-[80vh] overflow-y-auto", children: [
+    body,
+    /* @__PURE__ */ jsx11("div", { className: "p-4", children: disconnect })
+  ] }) });
+}
+function AccountDialogBody({ wallet, creating, setCreating }) {
+  const { auth } = useLensAuth();
+  const { completeSignIn } = useAccountDialogState();
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+  const { data, loading } = useAccountsAvailable({ managedBy: evmAddress(wallet.address), includeOwned: true });
+  const accounts = data?.items;
+  const hasAccounts = !!accounts?.some((item) => item.account.username?.localName);
+  const showCreate = creating || !loading && !hasAccounts;
+  const signIn = async (account, challenge) => {
+    const signature = await auth.signChallenge(challenge, wallet);
+    await auth.authenticate(challenge, signature);
+    completeSignIn({ address: account.address.toLowerCase(), username: account.username?.localName ?? null });
+  };
+  const handleCreated = async (created) => {
+    completeSignIn({ address: created.address.toLowerCase(), username: created.localName });
+  };
+  const title = showCreate ? "Create Account" : "Select Account";
+  const description = showCreate ? hasAccounts ? "Pick a username for your new Lens account." : "You don\u2019t have a Lens account yet. Create one to continue." : "Select an account to continue.";
+  const Header = isDesktop ? DialogHeader : DrawerHeader;
+  const Title2 = isDesktop ? DialogTitle : DrawerTitle;
+  const Description2 = isDesktop ? DialogDescription : DrawerDescription;
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    /* @__PURE__ */ jsxs5(Header, { className: isDesktop ? void 0 : "text-left", children: [
+      /* @__PURE__ */ jsx11(Title2, { children: title }),
+      /* @__PURE__ */ jsx11(Description2, { children: description })
+    ] }),
+    /* @__PURE__ */ jsx11("div", { className: isDesktop || !showCreate ? void 0 : "px-4", children: showCreate ? /* @__PURE__ */ jsx11(
+      CreateAccountForm,
+      {
+        ownerAddress: wallet.address,
+        onCreated: handleCreated,
+        onBack: hasAccounts ? () => setCreating(false) : void 0
+      }
+    ) : /* @__PURE__ */ jsx11(AccountList, { auth, accounts, loading, ownerAddress: wallet.address, onSign: signIn, onCreate: () => setCreating(true) }) })
+  ] });
+}
+function fetchChallenge(auth, acc, ownerAddress) {
+  return auth.requestChallenge({
+    role: acc.isOwner ? "ACCOUNT_OWNER" : "ACCOUNT_MANAGER",
+    account: acc.address,
+    signer: ownerAddress
+  });
+}
+function AccountList({ auth, accounts, loading, ownerAddress, onSign, onCreate }) {
+  const [step, setStep] = React3.useState(null);
+  const [errorId, setErrorId] = React3.useState(null);
+  const [challenges, setChallenges] = React3.useState({});
+  const selectable = React3.useMemo(() => (accounts ?? []).map((item, index) => {
+    const acc = { ...item.account, isOwner: item.__typename === "AccountOwned" };
+    return { acc, id: `${acc.address}-${index}` };
+  }), [accounts]);
+  const prefetch = React3.useCallback((acc, id) => {
+    fetchChallenge(auth, acc, ownerAddress).then((challenge) => setChallenges((prev) => ({ ...prev, [id]: { owner: ownerAddress, challenge, fetchedAt: Date.now() } }))).catch(() => {
+    });
+  }, [auth, ownerAddress]);
+  React3.useEffect(() => {
+    const refresh = () => {
+      if (document.visibilityState !== "visible") return;
+      for (const { acc, id } of selectable) {
+        if (acc.username?.localName) prefetch(acc, id);
+      }
+    };
+    refresh();
+    const interval = setInterval(refresh, CHALLENGE_REFRESH_MS);
+    document.addEventListener("visibilitychange", refresh);
+    return () => {
+      clearInterval(interval);
+      document.removeEventListener("visibilitychange", refresh);
+    };
+  }, [selectable, prefetch]);
+  const readyChallenge = (id) => {
+    if (step?.id === id && step.status === "sign") return step.challenge;
+    const prefetched = challenges[id];
+    if (!prefetched || prefetched.owner !== ownerAddress) return null;
+    return Date.now() - prefetched.fetchedAt < CHALLENGE_MAX_AGE_MS ? prefetched.challenge : null;
+  };
+  const handleClick = (acc, id) => {
+    setErrorId(null);
+    const fail = () => {
+      setStep(null);
+      setErrorId(id);
+      prefetch(acc, id);
+    };
+    const challenge = readyChallenge(id);
+    if (challenge) {
+      const signing = onSign(acc, challenge);
+      setChallenges(({ [id]: _used, ...rest }) => rest);
+      setStep({ id, status: "loading" });
+      signing.then(() => setStep(null), fail);
+      return;
+    }
+    setStep({ id, status: "loading" });
+    (async () => {
+      const fetched = await fetchChallenge(auth, acc, ownerAddress);
+      if (opensWalletWithDeepLink()) return setStep({ id, status: "sign", challenge: fetched });
+      await onSign(acc, fetched);
+      setStep(null);
+    })().catch(fail);
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx11("div", { className: "p-4", children: /* @__PURE__ */ jsx11("p", { className: "text-sm text-muted-foreground", children: "Loading available profiles\u2026" }) });
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: "py-4 space-y-3", children: [
+    /* @__PURE__ */ jsx11("ul", { className: "space-y-2 max-h-80 overflow-y-auto", children: selectable.map(({ acc, id }) => {
+      const username = acc.username?.localName;
+      if (!username) return null;
+      const isLoading = step?.id === id && step.status === "loading";
+      const awaitingSignature = step?.id === id && step.status === "sign";
+      return /* @__PURE__ */ jsxs5("li", { children: [
+        /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            type: "button",
+            className: "w-full text-left px-3 py-2 rounded-md border hover:bg-accent/50 flex items-center justify-between cursor-pointer disabled:cursor-default",
+            onClick: () => handleClick(acc, id),
+            disabled: step?.status === "loading",
+            children: [
+              /* @__PURE__ */ jsx11("span", { className: "truncate", children: username }),
+              isLoading && /* @__PURE__ */ jsx11(Loader22, { className: "size-4 animate-spin text-muted-foreground" }),
+              awaitingSignature && /* @__PURE__ */ jsx11("span", { className: "text-sm font-medium text-primary", children: "Sign in" })
+            ]
+          }
+        ),
+        awaitingSignature && /* @__PURE__ */ jsx11("p", { className: "px-1 pt-1 text-xs text-muted-foreground", children: "Tap again to sign the message in your wallet." }),
+        errorId === id && /* @__PURE__ */ jsx11("p", { className: "px-1 pt-1 text-xs text-destructive", children: "Couldn\u2019t sign in. Please try again." })
+      ] }, id);
+    }) }),
+    /* @__PURE__ */ jsx11(Button, { variant: "ghost", className: "w-full", onClick: onCreate, disabled: step?.status === "loading", children: "Create a new account" })
+  ] });
+}
+
+// src/react/provider.tsx
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var LensAuthContext = React4.createContext(null);
+var AccountDialogContext = React4.createContext(null);
+function useLensAuth() {
+  const ctx = React4.useContext(LensAuthContext);
+  if (!ctx) throw new Error("useLensAuth must be used within <LensAuthProvider>");
+  return ctx;
+}
+function useAccountDialogState() {
+  const ctx = React4.useContext(AccountDialogContext);
+  if (!ctx) throw new Error("<AccountDialog> must be used within <LensAuthProvider>");
+  return ctx;
+}
+function subscribeToTokens(onChange) {
+  window.addEventListener(TOKENS_CHANGED_EVENT, onChange);
+  window.addEventListener("storage", onChange);
+  return () => {
+    window.removeEventListener(TOKENS_CHANGED_EVENT, onChange);
+    window.removeEventListener("storage", onChange);
+  };
+}
+function useSessionKey(auth) {
+  return React4.useSyncExternalStore(
+    subscribeToTokens,
+    () => {
+      const session = auth.getSession();
+      return session ? `${session.sessionId}:${session.account}` : null;
+    },
+    () => void 0
+  );
+}
+function createUseConvexAuth(auth) {
+  return function useLensConvexAuth() {
+    const sessionKey = useSessionKey(auth);
+    const fetchAccessToken = React4.useCallback(
+      async ({ forceRefreshToken }) => sessionKey ? auth.fetchConvexToken(forceRefreshToken) : null,
+      [sessionKey]
+    );
+    return { isLoading: sessionKey === void 0, isAuthenticated: !!sessionKey, fetchAccessToken };
+  };
+}
+function LensAuthProvider({ auth, convex, onSignIn, accountDialog = true, children }) {
+  const [useConvexAuthHook] = React4.useState(() => createUseConvexAuth(auth));
+  const content = /* @__PURE__ */ jsxs6(LensAuthState, { auth, onSignIn, withConvex: !!convex, children: [
+    children,
+    accountDialog && /* @__PURE__ */ jsx12(AccountDialog, {})
+  ] });
+  return /* @__PURE__ */ jsx12(ThirdwebProvider, { children: /* @__PURE__ */ jsx12(LensProvider, { client: auth.lensClient, children: convex ? /* @__PURE__ */ jsx12(ConvexProviderWithAuth, { client: convex, useAuth: useConvexAuthHook, children: content }) : content }) });
+}
+function readSelectedAccount(auth, address) {
+  try {
+    const stored = JSON.parse(localStorage.getItem(`${auth.storagePrefix}account`) ?? "null");
+    return stored?.address === address && typeof stored.username === "string" ? stored.username : null;
+  } catch {
+    return null;
+  }
+}
+function writeSelectedAccount(auth, account) {
+  try {
+    const key = `${auth.storagePrefix}account`;
+    if (account) localStorage.setItem(key, JSON.stringify(account));
+    else localStorage.removeItem(key);
+  } catch {
+  }
+}
+function LensAuthState({ auth, onSignIn, withConvex, children }) {
+  const wallet = useActiveAccount2();
+  const activeWallet = useActiveWallet2();
+  const { disconnect } = useDisconnect();
+  const sessionKey = useSessionKey(auth);
+  const [manualOpen, setManualOpen] = React4.useState(false);
+  const [pendingSignIn, setPendingSignIn] = React4.useState(null);
+  const account = React4.useMemo(() => {
+    if (!sessionKey) return null;
+    const address = sessionKey.slice(sessionKey.lastIndexOf(":") + 1);
+    return { address, username: readSelectedAccount(auth, address) };
+  }, [auth, sessionKey]);
+  const status = sessionKey === void 0 ? "loading" : sessionKey ? "signed-in" : wallet ? "choosing-account" : "signed-out";
+  useBackgroundRefresh(auth);
+  React4.useEffect(() => {
+    if (wallet) void auth.resumeSession().catch(() => {
+    });
+  }, [auth, wallet?.address]);
+  const signOut = React4.useCallback(async () => {
+    setManualOpen(false);
+    writeSelectedAccount(auth, null);
+    try {
+      await auth.logout();
+    } finally {
+      if (activeWallet) disconnect(activeWallet);
+    }
+  }, [auth, activeWallet, disconnect]);
+  const value = React4.useMemo(() => ({
+    auth,
+    status,
+    isLoading: status === "loading",
+    isSignedIn: status === "signed-in",
+    wallet,
+    account,
+    signOut,
+    openAccountDialog: () => setManualOpen(true)
+  }), [auth, status, wallet, account, signOut]);
+  const required = status === "choosing-account";
+  const dialog = React4.useMemo(() => ({
+    open: required || manualOpen && !!wallet,
+    required,
+    setOpen: (open) => {
+      if (open) setManualOpen(true);
+      else if (!required) setManualOpen(false);
+    },
+    completeSignIn: (signedIn) => {
+      writeSelectedAccount(auth, signedIn);
+      setManualOpen(false);
+      if (onSignIn) setPendingSignIn(signedIn);
+    }
+  }), [auth, required, manualOpen, wallet, onSignIn]);
+  return /* @__PURE__ */ jsx12(LensAuthContext.Provider, { value, children: /* @__PURE__ */ jsxs6(AccountDialogContext.Provider, { value: dialog, children: [
+    children,
+    pendingSignIn && onSignIn && (withConvex ? /* @__PURE__ */ jsx12(ConvexSignInCallback, { account: pendingSignIn, onSignIn, done: () => setPendingSignIn(null) }) : /* @__PURE__ */ jsx12(SignInCallback, { account: pendingSignIn, onSignIn, done: () => setPendingSignIn(null) }))
+  ] }) });
+}
+function SignInCallback({ account, onSignIn, done }) {
+  React4.useEffect(() => {
+    Promise.resolve(onSignIn(account)).catch((err) => console.error("lens-convex-auth: onSignIn failed", err)).finally(done);
+  }, [account]);
+  return null;
+}
+function ConvexSignInCallback(props) {
+  const { isAuthenticated, isLoading } = useConvexAuth();
+  return isAuthenticated && !isLoading ? /* @__PURE__ */ jsx12(SignInCallback, { ...props }) : null;
+}
+function useBackgroundRefresh(auth) {
+  React4.useEffect(() => {
+    let timeout;
+    let stopped = false;
+    const schedule = () => {
+      if (timeout) clearTimeout(timeout);
+      timeout = void 0;
+      const tokens = auth.tokens.getStoredTokens();
+      if (stopped || !tokens?.expiresAt) return;
+      const delay = Math.max(1e3, tokens.expiresAt - Date.now() - 60 * 1e3);
+      timeout = setTimeout(() => void auth.tokens.refreshTokens(), delay);
+    };
+    const unsubscribe = subscribeToTokens(schedule);
+    (async () => {
+      try {
+        await auth.resumeSession();
+      } catch {
+      }
+      schedule();
+    })();
+    return () => {
+      stopped = true;
+      unsubscribe();
+      if (timeout) clearTimeout(timeout);
+    };
+  }, [auth]);
+}
+
+// src/react/SignInButton.tsx
+import * as React5 from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var ConnectButton = React5.lazy(() => import("thirdweb/react").then((m) => ({ default: m.ConnectButton })));
+function SignInButton({ label = "Sign in", signOutLabel = "Logout", theme, className, connectButtonProps }) {
+  const { auth, wallet, status, signOut } = useLensAuth();
+  const documentTheme = useDocumentTheme();
+  const [mounted, setMounted] = React5.useState(false);
+  React5.useEffect(() => setMounted(true), []);
+  const placeholder = /* @__PURE__ */ jsx13(Button, { variant: "outline", size: "xl", className: cn("min-w-[165px] px-0", className), disabled: true, children: "Loading..." });
+  if (!mounted) return placeholder;
+  if (!wallet) {
+    return /* @__PURE__ */ jsx13(React5.Suspense, { fallback: placeholder, children: /* @__PURE__ */ jsx13(
+      ConnectButton,
+      {
+        client: auth.thirdwebClient,
+        chain: auth.chain,
+        theme: theme ?? documentTheme,
+        ...connectButtonProps,
+        connectButton: {
+          label,
+          ...connectButtonProps?.connectButton,
+          style: { height: "50px", minWidth: "165px", ...connectButtonProps?.connectButton?.style }
+        }
+      }
+    ) });
+  }
+  if (status !== "signed-in") return placeholder;
+  return /* @__PURE__ */ jsx13(Button, { variant: "ghost", size: "xl", className: cn("min-w-[165px] px-0", className), onClick: signOut, children: signOutLabel });
+}
+export {
+  AccountDialog,
+  CreateAccountForm,
+  LensAuthProvider,
+  SignInButton,
+  useLensAuth
+};
+//# sourceMappingURL=index.js.map