@exegia/corpora-ui 1.0.0 → 3.0.0

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

@@ -2,65 +2,19 @@
 
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
-import type { AuthAccent } from "@/lib/auth-accent";
+import { Select, SelectTrigger, SelectValue, SelectPopup, SelectItem } from "@/components/ui/select";
 import {
   AuthCard,
   AuthError,
   AuthSuccess,
   MorphStep,
-  type AuthStatus,
 } from "./auth-shell";
 import { ProfileStep } from "./onboarding/profile-step";
+import type { IOnboardingBlockProps, IOnboardingStepConfig, TOnboardingValue, TAuthStatus } from "./type";
 
-/** Value a single onboarding field can hold. */
-export type OnboardingValue = string | boolean;
-
-export interface OnboardingSelectOption {
-  value: string;
-  label: string;
-}
-
-interface OnboardingFieldBase {
-  /** Key the value is collected under; unique within the flow. */
-  name: string;
-  label: string;
-  /** Required fields gate the step's advance. */
-  required?: boolean;
-  placeholder?: string;
-  /** Extra validation; return a message to reject, `null` to accept. */
-  validate?: (value: string) => string | null;
-}
-
-export interface OnboardingTextField extends OnboardingFieldBase {
-  kind: "text" | "textarea" | "url";
-}
-
-export interface OnboardingCheckboxField extends OnboardingFieldBase {
-  kind: "checkbox";
-}
-
-export interface OnboardingSelectField extends OnboardingFieldBase {
-  kind: "select";
-  options: OnboardingSelectOption[];
-}
-
-/** Discriminated on `kind`. */
-export type OnboardingFieldConfig =
-  | OnboardingTextField
-  | OnboardingCheckboxField
-  | OnboardingSelectField;
-
-export interface OnboardingStepConfig {
-  /** Unique within the flow and stable across releases. */
-  id: string;
-  title: string;
-  description?: string;
-  fields: OnboardingFieldConfig[];
-}
 
 /** Default configuration: a single required display-name step. */
-export const DEFAULT_ONBOARDING_STEPS: OnboardingStepConfig[] = [
+export const DEFAULT_ONBOARDING_STEPS: IOnboardingStepConfig[] = [
   {
     id: "profile",
     title: "Your profile",
@@ -70,27 +24,7 @@ export const DEFAULT_ONBOARDING_STEPS: OnboardingStepConfig[] = [
   },
 ];
 
-export interface OnboardingBlockProps {
-  /** Declared profile steps. */
-  steps?: OnboardingStepConfig[];
-  /** 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. */
-  accent?: AuthAccent;
-  /**
-   * Fires per step as it is submitted. Reject (or throw) to keep the user on
-   * the step and show the error.
-   */
-  onStepSubmit?: (
-    stepId: string,
-    values: Record<string, OnboardingValue>,
-  ) => Promise<void> | void;
-  /** Fires once, after the final step is accepted, with the merged profile. */
-  onComplete?: (profile: Record<string, OnboardingValue>) => Promise<void> | void;
-  /** Shows a brief success screen once onboarding completes. */
-  showCompleteScreen?: boolean;
-  className?: string;
-}
+
 
 /**
  * Multi-step profile onboarding: a declared `steps` config renders as
@@ -109,24 +43,26 @@ export function OnboardingBlock({
   onStepSubmit,
   onComplete,
   showCompleteScreen = true,
+  autoFocus = true,
   className,
-}: OnboardingBlockProps) {
+}: IOnboardingBlockProps) {
   const headingRef = React.useRef<HTMLHeadingElement>(null);
   // Unsubmitted per-step drafts. Accumulated in a ref so a keystroke does not
   // re-render the whole flow, then published to state at each navigation —
   // the only moment the seed values are actually read.
   const draftsRef = React.useRef<
-    Record<string, Record<string, OnboardingValue>>
+    Record<string, Record<string, TOnboardingValue>>
   >({});
   const [drafts, setDrafts] = React.useState<
-    Record<string, Record<string, OnboardingValue>>
+    Record<string, Record<string, TOnboardingValue>>
   >({});
 
   const [index, setIndex] = React.useState(0);
-  const [values, setValues] = React.useState<Record<string, OnboardingValue>>(
+  const [furthestIndex, setFurthestIndex] = React.useState(0);
+  const [values, setValues] = React.useState<Record<string, TOnboardingValue>>(
     {},
   );
-  const [status, setStatus] = React.useState<AuthStatus>("idle");
+  const [status, setStatus] = React.useState<TAuthStatus>("idle");
   const [error, setError] = React.useState<string | null>(null);
 
   const done = status === "success";
@@ -136,11 +72,11 @@ export function OnboardingBlock({
   // Focus the step heading on advance; on error the alert carries the message
   // and stealing focus would talk over it.
   React.useEffect(() => {
-    if (error) return;
+    if (error || !autoFocus) return;
     headingRef.current?.focus();
-  }, [index, done, error]);
+  }, [index, done, error, autoFocus]);
 
-  async function handleStepSubmit(stepValues: Record<string, OnboardingValue>) {
+  async function handleStepSubmit(stepValues: Record<string, TOnboardingValue>) {
     if (!step) return;
     const merged = { ...values, ...stepValues };
     setError(null);
@@ -152,7 +88,10 @@ export function OnboardingBlock({
       delete draftsRef.current[step.id];
       setDrafts({ ...draftsRef.current });
       setStatus(last ? "success" : "idle");
-      if (!last) setIndex((current) => current + 1);
+      if (!last) {
+        setFurthestIndex((current) => Math.max(current, index + 1));
+        setIndex((current) => current + 1);
+      }
     } catch (cause) {
       setStatus("idle");
       setError(
@@ -182,23 +121,27 @@ export function OnboardingBlock({
         ) : step ? (
           <div className="flex flex-col gap-4">
             <nav aria-label="Onboarding progress">
-              <ol className="flex flex-wrap gap-x-3 gap-y-1 text-xs">
-                {steps.map((item, itemIndex) => (
-                  <li
-                    key={item.id}
-                    aria-current={itemIndex === index ? "step" : undefined}
-                    className={cn(
-                      "text-muted-foreground",
-                      itemIndex === index && "font-medium text-foreground",
-                    )}
-                  >
-                    {item.title}
-                    {itemIndex < index && (
-                      <span className="sr-only"> (completed)</span>
-                    )}
-                  </li>
-                ))}
-              </ol>
+              <Select
+                items={steps.map((item) => ({ value: item.id, label: item.title }))}
+                value={step.id}
+                disabled={status === "loading"}
+                onValueChange={(id) => {
+                  const next = steps.findIndex((item) => item.id === id);
+                  if (next < 0 || next > furthestIndex) return;
+                  setError(null);
+                  setDrafts({ ...draftsRef.current });
+                  setIndex(next);
+                }}
+              >
+                <SelectTrigger aria-label="Onboarding step"><SelectValue /></SelectTrigger>
+                <SelectPopup>
+                  {steps.map((item, itemIndex) => (
+                    <SelectItem key={item.id} value={item.id} disabled={itemIndex > furthestIndex}>
+                      {item.title}
+                    </SelectItem>
+                  ))}
+                </SelectPopup>
+              </Select>
             </nav>
 
             {/* The AuthCard title is the visible heading; this one exists to

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

@@ -1,6 +1,6 @@
 "use client"
 
-import { KeyRoundIcon } from "lucide-react"
+import { Fingerprint, KeyRoundIcon, Plus } from "lucide-react"
 import { AnimatePresence, MotionConfig, motion } from "motion/react"
 import * as React from "react"
 
@@ -17,35 +17,9 @@ import { Input } from "@/components/ui/input"
 import { Spinner } from "@/components/ui/spinner"
 import { cn } from "@/lib/utils"
 import { AuthError, EASE, Reveal } from "./auth-shell"
+import type { IPasskeyManagerBlockProps, IPasskeyRecord } from "./type"
 
-/** One registered passkey, as rendered by {@link PasskeyManagerBlock}. */
-export interface PasskeyRecord {
-  id: string
-  /** Server-derived name; falls back to "Passkey" when absent. */
-  name?: string | null
-  /** ISO timestamps. Unparseable values are simply not shown. */
-  createdAt?: string | null
-  lastUsedAt?: string | null
-}
 
-export interface PasskeyManagerBlockProps {
-  title?: string
-  description?: string
-  /** The account's passkeys, newest first. */
-  passkeys?: PasskeyRecord[]
-  /** Whether this device can register passkeys at all. */
-  available?: boolean
-  /** Shows the loading row instead of the list. */
-  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
-}
 
 const NAME_MAX = 120
 
@@ -75,7 +49,7 @@ export function PasskeyManagerBlock({
   onRename,
   onDelete,
   className,
-}: PasskeyManagerBlockProps) {
+}: IPasskeyManagerBlockProps) {
   const [error, setError] = React.useState<string | null>(null)
   const [busy, setBusy] = React.useState(false)
   const [registering, setRegistering] = React.useState(false)
@@ -107,7 +81,7 @@ export function PasskeyManagerBlock({
     setRegistering(false)
   }
 
-  function startRename(passkey: PasskeyRecord) {
+  function startRename(passkey: IPasskeyRecord) {
     setConfirmingId(null)
     setRenamingId(passkey.id)
     setRenameValue(passkey.name ?? "")
@@ -137,7 +111,7 @@ export function PasskeyManagerBlock({
     <MotionConfig reducedMotion="user">
       <Card className={cn("w-full", className)} data-slot="auth-block">
         <CardHeader>
-          <CardTitle>{title}</CardTitle>
+          <CardTitle className="inline-flex items-center gap-1"><Fingerprint size={18} /> {title}</CardTitle>
           <CardDescription>{description}</CardDescription>
         </CardHeader>
         <CardPanel>
@@ -325,12 +299,13 @@ export function PasskeyManagerBlock({
               <Button
                 className="w-full"
                 type="button"
-                variant="outline"
+                variant="ghost"
                 disabled={busy}
                 loading={registering}
                 onClick={() => void handleRegister()}
               >
-                Add a passkey
+                <Plus />
+                Add
               </Button>
             </motion.div>
           )}

package/src/components/blocks/auth/passkey-sign-in-block.tsx

@@ -6,25 +6,8 @@ import * as React from "react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { AuthError, Reveal } from "./auth-shell";
+import type { IPasskeySignInBlockProps } from "./type";
 
-export interface PasskeySignInBlockProps {
-  /**
-   * Whether this device can use passkeys. `false` renders nothing at all —
-   * a passkey button that is guaranteed to fail is worse than no button.
-   */
-  available?: boolean;
-  /** Button label. */
-  label?: string;
-  /**
-   * Reject (or throw) to show the inline error. Resolving with
-   * `{ cancelled: true }` returns silently to idle — a dismissed OS prompt is
-   * not a failure and must not surface an error.
-   */
-  onSignIn?: () => Promise<{ cancelled?: boolean } | void> | void;
-  /** Hint shown under an error, pointing at the remaining sign-in methods. */
-  fallbackHint?: React.ReactNode;
-  className?: string;
-}
 
 /**
  * Passkey sign-in entry point — a single button plus its error state, sized
@@ -37,7 +20,7 @@ export function PasskeySignInBlock({
   onSignIn,
   fallbackHint = "You can still sign in with your other methods below.",
   className,
-}: PasskeySignInBlockProps) {
+}: IPasskeySignInBlockProps) {
   const [error, setError] = React.useState<string | null>(null);
   const [loading, setLoading] = React.useState(false);
 
@@ -69,7 +52,10 @@ export function PasskeySignInBlock({
         loading={loading}
         onClick={() => void handleClick()}
       >
-        <FingerprintIcon aria-hidden="true" />
+        <FingerprintIcon
+          className="stroke-pink-700 dark:stroke-pink-400"
+          aria-hidden="true"
+        />
         <span className="flex-1">{label}</span>
       </Button>
       <AuthError message={error} />

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

@@ -9,14 +9,13 @@ import {
 } from "@/components/composed/password-input";
 import {
   SocialProviders,
-  type SocialProvider,
 } from "@/components/composed/social-providers";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Field, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { type AuthAccent, authAccentActionStyles } from "@/lib/auth-accent";
+import { authAccentActionStyles } from "@/lib/auth-accent";
 import { cn } from "@/lib/utils";
 import {
   AuthCard,
@@ -25,46 +24,10 @@ import {
   AuthSuccess,
   MorphStep,
   Reveal,
-  type AuthStatus,
 } from "./auth-shell";
+import type { ISignupBlockProps, TAuthStatus } from "./type";
+import type { TSocialProvider } from "@/components/composed/types";
 
-export interface SignupBlockProps {
-  title?: string;
-  description?: string;
-  /**
-   * Replaces the built-in "terms" link inside the consent label — pass your
-   * own dialog trigger to render it inline instead of wiring `onTerms`.
-   */
-  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 keeping the default primary. */
-  accent?: AuthAccent;
-  providers?: SocialProvider[];
-  showNameField?: boolean;
-  /** Require the term checkbox before submitting. */
-  showTerms?: boolean;
-  /**
-   * 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 letting the block own the state.
-   */
-  termsChecked?: boolean;
-  /** Starting state of the term checkbox while it is uncontrolled. */
-  defaultTermsChecked?: boolean;
-  /** Fires on every change, controlled or not. */
-  onTermsCheckedChange?: (checked: boolean) => void;
-  /** Block submission until every password requirement is met. */
-  enforceStrongPassword?: boolean;
-  onSubmit?: (data: {
-    name: string;
-    email: string;
-    password: string;
-  }) => Promise<void> | void;
-  onProviderSelect?: (provider: SocialProvider) => Promise<void> | void;
-  onLogin?: () => void;
-  onTerms?: () => void;
-}
 
 export function SignupBlock({
   title = "Create your account",
@@ -83,15 +46,15 @@ export function SignupBlock({
   onProviderSelect,
   onLogin,
   onTerms,
-}: SignupBlockProps) {
+}: ISignupBlockProps) {
   const nameId = React.useId();
   const emailId = React.useId();
   const passwordId = React.useId();
   const termsId = React.useId();
-  const [status, setStatus] = React.useState<AuthStatus>("idle");
+  const [status, setStatus] = React.useState<TAuthStatus>("idle");
   const [error, setError] = React.useState<string | null>(null);
   const [loadingProvider, setLoadingProvider] =
-    React.useState<SocialProvider | null>(null);
+    React.useState<TSocialProvider | null>(null);
   const [password, setPassword] = React.useState("");
   // Controlled when `termsChecked` is passed, uncontrolled otherwise. The
   // internal state is kept either way, so a block that switches between the
@@ -150,7 +113,7 @@ export function SignupBlock({
     }
   }
 
-  async function handleProvider(provider: SocialProvider) {
+  async function handleProvider(provider: TSocialProvider) {
     setError(null);
     setLoadingProvider(provider);
     try {