@exegia/corpora-ui 0.10.0 → 0.12.0

package/src/components/blocks/auth/linked-accounts-block.tsx

@@ -1,55 +1,55 @@
-"use client";
+"use client"
 
-import { AnimatePresence, MotionConfig, motion } from "motion/react";
-import * as React from "react";
+import { AnimatePresence, MotionConfig, motion } from "motion/react"
+import * as React from "react"
 
 import {
   SOCIAL_PROVIDERS,
   type SocialProvider,
-} from "@/components/composed/social-providers";
-import { Button } from "@/components/ui/button";
+} from "@/components/composed/social-providers"
+import { Button } from "@/components/ui/button"
 import {
   Card,
   CardDescription,
   CardHeader,
   CardPanel,
   CardTitle,
-} from "@/components/ui/card";
-import { Spinner } from "@/components/ui/spinner";
-import { cn } from "@/lib/utils";
-import { AuthError, EASE } from "./auth-shell";
+} from "@/components/ui/card"
+import { Spinner } from "@/components/ui/spinner"
+import { cn } from "@/lib/utils"
+import { AuthError, EASE } from "./auth-shell"
 
 /** One sign-in identity attached to the account. */
 export interface LinkedIdentity {
-  id: string;
-  provider: SocialProvider;
+  id: string
+  provider: SocialProvider
   /** Account address shown under the provider name, when known. */
-  email?: string | null;
+  email?: string | null
 }
 
 export interface LinkedAccountsBlockProps {
-  title?: string;
-  description?: string;
+  title?: string
+  description?: string
   /** Identities already attached to the account. */
-  identities?: LinkedIdentity[];
+  identities?: LinkedIdentity[]
   /** Providers offered as connect candidates; connected ones are filtered out. */
-  providers?: SocialProvider[];
+  providers?: SocialProvider[]
   /** Shows the loading row instead of the list. */
-  loading?: boolean;
+  loading?: boolean
   /**
    * The account can also sign in through a method that has no row in this
    * list — an email/password credential, say. Lifts the last-method guard,
    * which otherwise refuses to disconnect the final listed identity.
    */
-  hasOtherSignInMethods?: boolean;
+  hasOtherSignInMethods?: boolean
   /** Reject (or throw) to show the inline error. */
-  onLink?: (provider: SocialProvider) => Promise<void> | void;
-  onUnlink?: (id: string) => Promise<void> | void;
-  className?: string;
+  onLink?: (provider: SocialProvider) => Promise<void> | void
+  onUnlink?: (id: string) => Promise<void> | void
+  className?: string
 }
 
 const LAST_METHOD_EXPLANATION =
-  "This is your only way to sign in, so it can't be disconnected.";
+  "This is your only way to sign in, so it can't be disconnected."
 
 /**
  * Settings panel for the sign-in identities attached to an account: lists the
@@ -68,48 +68,46 @@ export function LinkedAccountsBlock({
   onUnlink,
   className,
 }: LinkedAccountsBlockProps) {
-  const noteId = React.useId();
-  const [error, setError] = React.useState<string | null>(null);
-  const [linking, setLinking] = React.useState<SocialProvider | null>(null);
-  const [unlinking, setUnlinking] = React.useState<string | null>(null);
+  const noteId = React.useId()
+  const [error, setError] = React.useState<string | null>(null)
+  const [linking, setLinking] = React.useState<SocialProvider | null>(null)
+  const [unlinking, setUnlinking] = React.useState<string | null>(null)
 
-  const connected = new Set(identities.map((identity) => identity.provider));
-  const connectable = providers.filter((provider) => !connected.has(provider));
-  const busy = linking !== null || unlinking !== null;
+  const connected = new Set(identities.map((identity) => identity.provider))
+  const connectable = providers.filter((provider) => !connected.has(provider))
+  const busy = linking !== null || unlinking !== null
   // The backend rule, enforced here so we never fire a request that would
   // remove the account's only way in. An off-list method (a password) keeps
   // the account reachable, so it lifts the guard.
-  const lastMethod = !hasOtherSignInMethods && identities.length <= 1;
+  const lastMethod = !hasOtherSignInMethods && identities.length <= 1
 
   async function connect(provider: SocialProvider) {
-    if (busy) return;
-    setError(null);
-    setLinking(provider);
+    if (busy) return
+    setError(null)
+    setLinking(provider)
     try {
-      await onLink?.(provider);
+      await onLink?.(provider)
     } catch (cause) {
       setError(
-        cause instanceof Error ? cause.message : "Unable to connect account.",
-      );
+        cause instanceof Error ? cause.message : "Unable to connect account."
+      )
     } finally {
-      setLinking(null);
+      setLinking(null)
     }
   }
 
   async function disconnect(id: string) {
-    if (busy || lastMethod) return;
-    setError(null);
-    setUnlinking(id);
+    if (busy || lastMethod) return
+    setError(null)
+    setUnlinking(id)
     try {
-      await onUnlink?.(id);
+      await onUnlink?.(id)
     } catch (cause) {
       setError(
-        cause instanceof Error
-          ? cause.message
-          : "Unable to disconnect account.",
-      );
+        cause instanceof Error ? cause.message : "Unable to disconnect account."
+      )
     } finally {
-      setUnlinking(null);
+      setUnlinking(null)
     }
   }
 
@@ -141,9 +139,8 @@ export function LinkedAccountsBlock({
                 >
                   <AnimatePresence initial={false}>
                     {identities.map((identity, index) => {
-                      const { label, Icon } = SOCIAL_PROVIDERS[
-                        identity.provider
-                      ];
+                      const { label, BrandIcon, brandClassName } =
+                        SOCIAL_PROVIDERS[identity.provider]
                       return (
                         <motion.li
                           key={identity.id}
@@ -161,12 +158,12 @@ export function LinkedAccountsBlock({
                           }}
                         >
                           <div className="flex min-w-0 items-center gap-2.5">
-                            <Icon
+                            <BrandIcon
                               aria-hidden="true"
-                              className="size-4 text-muted-foreground"
+                              className={cn("size-4", brandClassName)}
                             />
                             <div className="flex min-w-0 flex-col">
-                              <span className="font-medium text-sm">
+                              <span className="text-sm font-medium">
                                 {label}
                               </span>
                               {identity.email && (
@@ -189,7 +186,7 @@ export function LinkedAccountsBlock({
                             Disconnect
                           </Button>
                         </motion.li>
-                      );
+                      )
                     })}
                   </AnimatePresence>
                 </ul>
@@ -206,7 +203,8 @@ export function LinkedAccountsBlock({
               )}
 
               {connectable.map((provider) => {
-                const { label, Icon } = SOCIAL_PROVIDERS[provider];
+                const { label, BrandIcon, brandClassName } =
+                  SOCIAL_PROVIDERS[provider]
                 return (
                   <Button
                     key={provider}
@@ -217,15 +215,15 @@ export function LinkedAccountsBlock({
                     loading={linking === provider}
                     onClick={() => void connect(provider)}
                   >
-                    <Icon aria-hidden="true" />
+                    <BrandIcon aria-hidden="true" className={brandClassName} />
                     <span className="flex-1">Connect {label}</span>
                   </Button>
-                );
+                )
               })}
             </motion.div>
           )}
         </CardPanel>
       </Card>
     </MotionConfig>
-  );
+  )
 }

package/src/components/blocks/auth/passkey-manager-block.tsx

@@ -1,60 +1,61 @@
-"use client";
+"use client"
 
-import { AnimatePresence, MotionConfig, motion } from "motion/react";
-import * as React from "react";
+import { KeyRoundIcon } from "lucide-react"
+import { AnimatePresence, MotionConfig, motion } from "motion/react"
+import * as React from "react"
 
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button"
 import {
   Card,
   CardDescription,
   CardHeader,
   CardPanel,
   CardTitle,
-} from "@/components/ui/card";
-import { Field, FieldError, FieldLabel } from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/spinner";
-import { cn } from "@/lib/utils";
-import { AuthError, EASE, Reveal } from "./auth-shell";
+} from "@/components/ui/card"
+import { Field, FieldError, FieldLabel } from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+import { Spinner } from "@/components/ui/spinner"
+import { cn } from "@/lib/utils"
+import { AuthError, EASE, Reveal } from "./auth-shell"
 
 /** One registered passkey, as rendered by {@link PasskeyManagerBlock}. */
 export interface PasskeyRecord {
-  id: string;
+  id: string
   /** Server-derived name; falls back to "Passkey" when absent. */
-  name?: string | null;
+  name?: string | null
   /** ISO timestamps. Unparseable values are simply not shown. */
-  createdAt?: string | null;
-  lastUsedAt?: string | null;
+  createdAt?: string | null
+  lastUsedAt?: string | null
 }
 
 export interface PasskeyManagerBlockProps {
-  title?: string;
-  description?: string;
+  title?: string
+  description?: string
   /** The account's passkeys, newest first. */
-  passkeys?: PasskeyRecord[];
+  passkeys?: PasskeyRecord[]
   /** Whether this device can register passkeys at all. */
-  available?: boolean;
+  available?: boolean
   /** Shows the loading row instead of the list. */
-  loading?: boolean;
+  loading?: boolean
   /**
    * Reject (or throw) to show the error. Resolving with `{ cancelled: true }`
    * returns silently to idle — a dismissed OS prompt is not a failure.
    */
-  onRegister?: () => Promise<{ cancelled?: boolean } | void> | void;
-  onRename?: (id: string, name: string) => Promise<void> | void;
-  onDelete?: (id: string) => Promise<void> | void;
-  className?: string;
+  onRegister?: () => Promise<{ cancelled?: boolean } | void> | void
+  onRename?: (id: string, name: string) => Promise<void> | void
+  onDelete?: (id: string) => Promise<void> | void
+  className?: string
 }
 
-const NAME_MAX = 120;
+const NAME_MAX = 120
 
 const LAST_PASSKEY_WARNING =
-  "This is your last passkey. After deleting it you won't be able to sign in with a passkey until you register a new one.";
+  "This is your last passkey. After deleting it you won't be able to sign in with a passkey until you register a new one."
 
 function formatDate(iso: string | null | undefined): string | null {
-  if (!iso) return null;
-  const date = new Date(iso);
-  return Number.isNaN(date.getTime()) ? null : date.toLocaleDateString();
+  if (!iso) return null
+  const date = new Date(iso)
+  return Number.isNaN(date.getTime()) ? null : date.toLocaleDateString()
 }
 
 /**
@@ -75,63 +76,61 @@ export function PasskeyManagerBlock({
   onDelete,
   className,
 }: PasskeyManagerBlockProps) {
-  const [error, setError] = React.useState<string | null>(null);
-  const [busy, setBusy] = React.useState(false);
-  const [registering, setRegistering] = React.useState(false);
-  const [renamingId, setRenamingId] = React.useState<string | null>(null);
-  const [renameValue, setRenameValue] = React.useState("");
-  const [renameError, setRenameError] = React.useState<string | null>(null);
-  const [confirmingId, setConfirmingId] = React.useState<string | null>(null);
+  const [error, setError] = React.useState<string | null>(null)
+  const [busy, setBusy] = React.useState(false)
+  const [registering, setRegistering] = React.useState(false)
+  const [renamingId, setRenamingId] = React.useState<string | null>(null)
+  const [renameValue, setRenameValue] = React.useState("")
+  const [renameError, setRenameError] = React.useState<string | null>(null)
+  const [confirmingId, setConfirmingId] = React.useState<string | null>(null)
 
-  const lastPasskey = passkeys.length === 1;
+  const lastPasskey = passkeys.length === 1
 
   async function run(action: () => Promise<unknown> | unknown) {
-    if (busy) return { ok: false } as const;
-    setError(null);
-    setBusy(true);
+    if (busy) return { ok: false } as const
+    setError(null)
+    setBusy(true)
     try {
-      const result = await action();
-      return { ok: true, result } as const;
+      const result = await action()
+      return { ok: true, result } as const
     } catch (cause) {
-      setError(
-        cause instanceof Error ? cause.message : "Something went wrong.",
-      );
-      return { ok: false } as const;
+      setError(cause instanceof Error ? cause.message : "Something went wrong.")
+      return { ok: false } as const
     } finally {
-      setBusy(false);
+      setBusy(false)
     }
   }
 
   async function handleRegister() {
-    setRegistering(true);
-    await run(() => onRegister?.());
-    setRegistering(false);
+    setRegistering(true)
+    await run(() => onRegister?.())
+    setRegistering(false)
   }
 
   function startRename(passkey: PasskeyRecord) {
-    setConfirmingId(null);
-    setRenamingId(passkey.id);
-    setRenameValue(passkey.name ?? "");
-    setRenameError(null);
+    setConfirmingId(null)
+    setRenamingId(passkey.id)
+    setRenameValue(passkey.name ?? "")
+    setRenameError(null)
   }
 
   async function submitRename(id: string) {
-    const name = renameValue.trim();
+    const name = renameValue.trim()
     if (name.length < 1 || name.length > NAME_MAX) {
-      setRenameError(`Name must be between 1 and ${NAME_MAX} characters.`);
-      return;
+      setRenameError(`Name must be between 1 and ${NAME_MAX} characters.`)
+      return
     }
-    const outcome = await run(() => onRename?.(id, name));
-    if (!outcome.ok) return;
-    setRenamingId(null);
-    setRenameError(null);
+    const outcome = await run(() => onRename?.(id, name))
+    if (!outcome.ok) return
+    setRenamingId(null)
+    setRenameError(null)
   }
 
   async function confirmDelete(id: string) {
-    const outcome = await run(() => onDelete?.(id));
-    setConfirmingId(null);
-    if (!outcome.ok) return;
-    if (renamingId === id) setRenamingId(null);
+    const outcome = await run(() => onDelete?.(id))
+    setConfirmingId(null)
+    if (!outcome.ok) return
+    if (renamingId === id) setRenamingId(null)
   }
 
   return (
@@ -164,9 +163,9 @@ export function PasskeyManagerBlock({
                 <ul aria-label="Passkeys" className="flex flex-col gap-2">
                   <AnimatePresence initial={false}>
                     {passkeys.map((passkey, index) => {
-                      const name = passkey.name ?? "Passkey";
-                      const created = formatDate(passkey.createdAt);
-                      const lastUsed = formatDate(passkey.lastUsedAt);
+                      const name = passkey.name ?? "Passkey"
+                      const created = formatDate(passkey.createdAt)
+                      const lastUsed = formatDate(passkey.lastUsedAt)
                       return (
                         <motion.li
                           key={passkey.id}
@@ -184,15 +183,23 @@ export function PasskeyManagerBlock({
                           }}
                         >
                           <div className="flex items-center justify-between gap-3">
-                            <div className="flex min-w-0 flex-col">
-                              <span className="truncate font-medium text-sm">
-                                {name}
-                              </span>
-                              <span className="text-xs text-muted-foreground">
-                                {created ? `Added ${created}` : null}
-                                {created && lastUsed ? " · " : null}
-                                {lastUsed ? `Last used ${lastUsed}` : null}
+                            <div className="flex min-w-0 items-center gap-2.5">
+                              <span
+                                aria-hidden="true"
+                                className="grid size-8 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground"
+                              >
+                                <KeyRoundIcon className="size-4" />
                               </span>
+                              <div className="flex min-w-0 flex-col">
+                                <span className="truncate text-sm font-medium">
+                                  {name}
+                                </span>
+                                <span className="text-xs text-muted-foreground">
+                                  {created ? `Added ${created}` : null}
+                                  {created && lastUsed ? " · " : null}
+                                  {lastUsed ? `Last used ${lastUsed}` : null}
+                                </span>
+                              </div>
                             </div>
                             <div className="flex shrink-0 gap-2">
                               <Button
@@ -212,8 +219,8 @@ export function PasskeyManagerBlock({
                                 variant="destructive-outline"
                                 disabled={busy}
                                 onClick={() => {
-                                  setRenamingId(null);
-                                  setConfirmingId(passkey.id);
+                                  setRenamingId(null)
+                                  setConfirmingId(passkey.id)
                                 }}
                               >
                                 Delete
@@ -225,8 +232,8 @@ export function PasskeyManagerBlock({
                             <form
                               className="flex items-start gap-2 pt-1"
                               onSubmit={(event) => {
-                                event.preventDefault();
-                                void submitRename(passkey.id);
+                                event.preventDefault()
+                                void submitRename(passkey.id)
                               }}
                             >
                               <Field
@@ -304,7 +311,7 @@ export function PasskeyManagerBlock({
                             </div>
                           </Reveal>
                         </motion.li>
-                      );
+                      )
                     })}
                   </AnimatePresence>
                 </ul>
@@ -330,5 +337,5 @@ export function PasskeyManagerBlock({
         </CardPanel>
       </Card>
     </MotionConfig>
-  );
+  )
 }

package/src/components/blocks/auth/signup-block.tsx

@@ -38,19 +38,19 @@ export interface SignupBlockProps {
   termsComponent?: React.ReactNode;
   /** Brand mark rendered above the title. Omit for no logo row at all. */
   logo?: React.ReactNode;
-  /** Brand accent for the primary action. Omit to keep the default primary. */
+  /** Brand accent for the primary action. Omit keeping the default primary. */
   accent?: AuthAccent;
   providers?: SocialProvider[];
   showNameField?: boolean;
-  /** Require the terms checkbox before submitting. */
+  /** Require the term checkbox before submitting. */
   showTerms?: boolean;
   /**
-   * Controls the terms checkbox. Pass it with `onTermsCheckedChange` when
+   * Controls the term checkbox. Pass it with `onTermsCheckedChange` when
    * something outside the block has to tick the box — an "I agree" action in
-   * your own terms dialog, say. Omit to let the block own the state.
+   * your own terms dialog, say. Omit letting the block own the state.
    */
   termsChecked?: boolean;
-  /** Starting state of the terms checkbox while it is uncontrolled. */
+  /** Starting state of the term checkbox while it is uncontrolled. */
   defaultTermsChecked?: boolean;
   /** Fires on every change, controlled or not. */
   onTermsCheckedChange?: (checked: boolean) => void;
@@ -122,7 +122,7 @@ export function SignupBlock({
   const emailPathComplete =
     (!showNameField || nameValid) && emailValid && passwordValid;
 
-  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+  async function handleSubmit(event: React.SubmitEvent<HTMLFormElement>) {
     event.preventDefault();
     setError(null);
     if (!strongEnough) {