@exegia/corpora-ui 1.0.0 → 2.0.0

package/src/components/atoms/text-selection/selection-atom.ts

@@ -1,23 +1,23 @@
 import { atom } from "jotai"
 import type {
-  SelectionPosition,
-  SelectionState,
-  SelectionStateUpdate,
+  ISelectionPosition,
+  ISelectionState,
+  TSelectionStateUpdate,
 } from "./types"
 
-export const initialSelectionState: SelectionState = {
+export const initialSelectionState: ISelectionState = {
   selected: false,
   currentSelection: "",
   showPopover: false,
   popoverPosition: null,
 }
 
-export const selectionAtom = atom<SelectionState>(initialSelectionState)
+export const selectionAtom = atom<ISelectionState>(initialSelectionState)
 
 /** Update only the fields that changed, keeping selection state atomic. */
 export const updateSelectionAtom = atom(
   null,
-  (get, set, update: SelectionStateUpdate) => {
+  (get, set, update: TSelectionStateUpdate) => {
     const next =
       typeof update === "function" ? update(get(selectionAtom)) : update
     set(selectionAtom, { ...get(selectionAtom), ...next })
@@ -30,7 +30,7 @@ export const setSelectionAtom = atom(null, (_get, set, selection: string) => {
 
 export const setSelectionPositionAtom = atom(
   null,
-  (_get, set, popoverPosition: SelectionPosition) => {
+  (_get, set, popoverPosition: ISelectionPosition) => {
     set(updateSelectionAtom, { popoverPosition })
   }
 )

package/src/components/atoms/text-selection/selection.tsx

@@ -4,7 +4,7 @@ import type { ReactElement } from "react"
 import { HighlightPopover as HighlightPopoverPrimitive } from "@omsimos/react-highlight-popover"
 import { HighlightPopover } from "./popover"
 import { useSelection } from "./use-selection"
-import type { TextSelectionProps } from "./types"
+import type { ITextSelectionProps } from "./types"
 
 export function TextSelection({
   children,
@@ -20,7 +20,7 @@ export function TextSelection({
   onPopoverShow,
   onPopoverHide,
   ...props
-}: TextSelectionProps): ReactElement {
+}: ITextSelectionProps): ReactElement {
   const selection = useSelection({
     selected,
     onSelectionStart,

package/src/components/atoms/text-selection/types.ts

@@ -7,25 +7,25 @@ import type {
 } from "react"
 import type { HighlightPopover as HighlightPopoverPrimitive } from "@omsimos/react-highlight-popover"
 import type { PopoverPopup } from "@/components/ui/popover"
-import type { TextProps } from "../text/types"
+import type { TTextProps } from "../text/types"
 
-export interface SelectionPosition {
+export interface ISelectionPosition {
   top: number
   left: number
 }
 
-export interface SelectionState {
+export interface ISelectionState {
   selected: boolean
   currentSelection: string
   showPopover: boolean
-  popoverPosition: SelectionPosition | null
+  popoverPosition: ISelectionPosition | null
 }
 
-export type SelectionStateUpdate =
-  Partial<SelectionState> | ((state: SelectionState) => Partial<SelectionState>)
+export type TSelectionStateUpdate =
+  Partial<ISelectionState> | ((state: ISelectionState) => Partial<ISelectionState>)
 
-export interface SelectionRenderProps {
-  position: SelectionPosition
+export interface ISelectionRenderProps {
+  position: ISelectionPosition
   selection: string
   selected: boolean
   showPopover: boolean
@@ -34,13 +34,13 @@ export interface SelectionRenderProps {
   close: () => void
 }
 
-export type SelectionPopoverComponent = ComponentType<SelectionRenderProps>
+export type TSelectionPopoverComponent = ComponentType<ISelectionRenderProps>
 
-export type HighlightPopoverPrimitiveProps = ComponentProps<
+export type THighlightPopoverPrimitiveProps = ComponentProps<
   typeof HighlightPopoverPrimitive
 >
 
-export interface HighlightPopoverProps extends Omit<
+export interface IHighlightPopoverProps extends Omit<
   HTMLAttributes<HTMLElement>,
   "children"
 > {
@@ -50,11 +50,11 @@ export interface HighlightPopoverProps extends Omit<
   /** Props forwarded to the custom component. */
   componentProps?: Record<string, unknown>
   /** Render function for applications that need full control of the markup. */
-  render?: (props: SelectionRenderProps) => ReactNode
+  render?: (props: ISelectionRenderProps) => ReactNode
 }
 
-export interface TextSelectionProps extends Omit<
-  HighlightPopoverPrimitiveProps,
+export interface ITextSelectionProps extends Omit<
+  THighlightPopoverPrimitiveProps,
   | "children"
   | "renderPopover"
   | "onSelectionStart"
@@ -69,7 +69,7 @@ export interface TextSelectionProps extends Omit<
   componentProps?: Record<string, unknown>
   popoverComponent?: ElementType
   popoverProps?: Record<string, unknown>
-  renderPopover?: (props: SelectionRenderProps) => ReactNode
+  renderPopover?: (props: ISelectionRenderProps) => ReactNode
   onSelectionStart?: () => void
   onSelectionEnd?: (selection: string) => void
   onPopoverShow?: () => void
@@ -77,17 +77,17 @@ export interface TextSelectionProps extends Omit<
 }
 
 
-export interface TextPopoverRenderProps {
+export interface ITextPopoverRenderProps {
   open: boolean
   setOpen: (open: boolean) => void
   close: () => void
 }
 
-export interface TextClickPopoverProps extends Omit<TextProps, "popover"> {
+export interface ITextClickPopoverProps extends Omit<TTextProps, "popover"> {
   /** Popover content rendered when the text is clicked. */
   popover?: ReactNode
   /** Render function for applications that need full control of the markup. */
-  renderPopover?: (props: TextPopoverRenderProps) => ReactNode
+  renderPopover?: (props: ITextPopoverRenderProps) => ReactNode
   /** Props forwarded to the popup (side, align, className, …). */
   popoverProps?: ComponentProps<typeof PopoverPopup>
   open?: boolean
@@ -95,7 +95,7 @@ export interface TextClickPopoverProps extends Omit<TextProps, "popover"> {
   onOpenChange?: (open: boolean) => void
 }
 
-export interface UseSelectionOptions {
+export interface IUseSelectionOptions {
   selected?: boolean
   onSelectionStart?: () => void
   onSelectionEnd?: (selection: string) => void
@@ -103,18 +103,18 @@ export interface UseSelectionOptions {
   onPopoverHide?: () => void
 }
 
-export interface UseSelectionResult {
-  state: SelectionState
+export interface IUseSelectionResult {
+  state: ISelectionState
   selected: boolean
   currentSelection: string
   showPopover: boolean
-  popoverPosition: SelectionState["popoverPosition"]
+  popoverPosition: ISelectionState["popoverPosition"]
   setSelection: (selection: string) => void
   setPosition: (
-    position: NonNullable<SelectionState["popoverPosition"]>
+    position: NonNullable<ISelectionState["popoverPosition"]>
   ) => void
   setShowPopover: (show: boolean) => void
-  update: (update: SelectionStateUpdate) => void
+  update: (update: TSelectionStateUpdate) => void
   reset: () => void
   selectionProps: {
     onSelectionStart: () => void

package/src/components/atoms/text-selection/use-selection.ts

@@ -10,7 +10,7 @@ import {
   setSelectionPositionAtom,
   updateSelectionAtom,
 } from "./selection-atom"
-import type { UseSelectionOptions, UseSelectionResult } from "./types"
+import type { IUseSelectionOptions, IUseSelectionResult } from "./types"
 
 /**
  * Coordinates the third-party highlight popover callbacks with the shared
@@ -18,8 +18,8 @@ import type { UseSelectionOptions, UseSelectionResult } from "./types"
  * `@omsimos/react-highlight-popover`.
  */
 export function useSelection(
-  options: UseSelectionOptions = {}
-): UseSelectionResult {
+  options: IUseSelectionOptions = {}
+): IUseSelectionResult {
   const {
     selected: selectedProp,
     onSelectionStart: onSelectionStartProp,

package/src/components/atoms/types.ts

@@ -1,6 +1,12 @@
-export type AtomSize = "xs" | "sm" | "default" | "lg" | "xl" | "xxl"
+import type { TInputProps } from "../ui/input"
 
-export interface ReferenceProps {
+export type TAtomSize = "xs" | "sm" | "default" | "lg" | "xl" | "xxl"
+export type TAtomIconSize = "xs" | "sm" | "default" | "lg" | "xl" | "xxl"
+export type TMacroAtomSize = Exclude<TAtomSize, "xs" | "xl" | "xxl">
+export type TInputFieldSize = Record<"label" | "input" | "description" | "icon", Record<TMacroAtomSize, string>>
+
+
+export interface IReferenceProps {
   /** With an href the chip renders as a link, otherwise as a button. */
   href?: string
   target?: React.HTMLAttributeAnchorTarget
@@ -16,3 +22,25 @@ export interface ReferenceProps {
    */
   preview?: React.ReactNode
 }
+
+
+export interface IInputFieldProps extends Omit<TInputProps, "size"> {
+  label?: string
+  description?: string
+  error?: string
+  size?: TMacroAtomSize
+  invalid?: boolean
+}
+
+export type TLoaderType = "spinner" | "dots";
+export interface ILoaderProps {
+  type?: TLoaderType;
+  className?: string;
+  size?: TAtomSize;
+}
+
+export type * from "./avatar/types"
+export type * from "./background/type"
+export type * from "./bubble/types"
+export type * from "./text/types"
+export type * from "./text-selection/types"

package/src/components/blocks/auth/__tests__/auth-flow-block.test.tsx

@@ -12,17 +12,17 @@ import {
   goToAuthStepAtom,
   isAuthenticatedAtom,
 } from "../auth-state"
-import type { AuthUser } from "../auth-state"
+import type { IAuthUser } from "../type"
 
-const USER: AuthUser = {
+const USER: IAuthUser = {
   id: "u-1",
   name: "Yona Appletree",
   email: "yo@example.com",
 }
 
-type Store = ReturnType<typeof createStore>
+type TStore = ReturnType<typeof createStore>
 
-function mount(store: Store, ui: React.ReactElement) {
+function mount(store: TStore, ui: React.ReactElement) {
   return render(<ExegiaProvider store={store}>{ui}</ExegiaProvider>)
 }
 

package/src/components/blocks/auth/__tests__/auth-state-atom.test.tsx

@@ -28,9 +28,9 @@ import {
   useAuthFlow,
   useAuthFlowActions,
 } from "../auth-state"
-import type { AuthUser } from "../auth-state"
+import type { IAuthUser } from "../type"
 
-const USER: AuthUser = {
+const USER: IAuthUser = {
   id: "u-1",
   name: "Yona Appletree",
   email: "yo@example.com",

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

@@ -4,10 +4,10 @@ import userEvent from "@testing-library/user-event";
 
 import {
   LinkedAccountsBlock,
-  type LinkedIdentity,
 } from "../linked-accounts-block";
+import type { ILinkedIdentity } from "../type";
 
-const IDENTITIES: LinkedIdentity[] = [
+const IDENTITIES: ILinkedIdentity[] = [
   { id: "id-1", provider: "google", email: "reader@example.com" },
   { id: "id-2", provider: "github" },
 ];

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

@@ -1,14 +1,13 @@
 import { describe, expect, mock, test } from "bun:test";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import {
   OnboardingBlock,
-  type OnboardingBlockProps,
-  type OnboardingStepConfig,
 } from "../onboarding-block";
+import type { IOnboardingBlockProps, IOnboardingStepConfig } from "../type";
 
-const STEPS: OnboardingStepConfig[] = [
+const STEPS: IOnboardingStepConfig[] = [
   {
     id: "profile",
     title: "Your profile",
@@ -27,14 +26,42 @@ const STEPS: OnboardingStepConfig[] = [
 ];
 
 describe("OnboardingBlock", () => {
-  test("renders the declared steps as progress", () => {
+  test("embedded previews do not steal focus", () => {
+    render(<OnboardingBlock steps={STEPS} autoFocus={false} />);
+    expect(document.activeElement).not.toBe(
+      screen.getByRole("heading", { name: "Your profile" }),
+    );
+  });
+
+  test("focuses the current step by default", () => {
     render(<OnboardingBlock steps={STEPS} />);
+    expect(document.activeElement).toBe(
+      screen.getByRole("heading", { name: "Your profile" }),
+    );
+  });
 
-    const items = screen
-      .getByRole("navigation", { name: "Onboarding progress" })
-      .querySelectorAll("li");
-    expect(items).toHaveLength(2);
-    expect(items[0]?.getAttribute("aria-current")).toBe("step");
+  test("renders a step picker and prevents skipping required steps", async () => {
+    const user = userEvent.setup();
+    render(<OnboardingBlock steps={STEPS} autoFocus={false} />);
+    await user.click(screen.getByRole("combobox", { name: "Onboarding step" }));
+    expect(screen.getByRole("option", { name: "Your profile" })).toBeDefined();
+    expect(screen.getByRole("option", { name: "Your links" }).getAttribute("aria-disabled")).toBe("true");
+  });
+
+  test("the picker restores drafts when revisiting completed steps", async () => {
+    const user = userEvent.setup();
+    render(<OnboardingBlock steps={STEPS} autoFocus={false} />);
+    await user.type(screen.getByLabelText("Display name"), "Ada");
+    await user.click(screen.getByRole("button", { name: "Continue" }));
+    await user.type(await screen.findByLabelText("Website"), "https://example.com");
+    await waitFor(() => expect(screen.getAllByRole("combobox", { name: "Onboarding step" })).toHaveLength(1));
+    await user.click(screen.getByRole("combobox", { name: "Onboarding step" }));
+    await user.click(screen.getByRole("option", { name: "Your profile" }));
+    expect((await screen.findByLabelText("Display name") as HTMLInputElement).value).toBe("Ada");
+    await waitFor(() => expect(screen.getAllByRole("combobox", { name: "Onboarding step" })).toHaveLength(1));
+    await user.click(screen.getByRole("combobox", { name: "Onboarding step" }));
+    await user.click(screen.getByRole("option", { name: "Your links" }));
+    expect((await screen.findByLabelText("Website") as HTMLInputElement).value).toBe("https://example.com");
   });
 
   test("blocks advance on a missing required field", async () => {
@@ -64,9 +91,9 @@ describe("OnboardingBlock", () => {
   test("walks the steps and reports the merged profile once", async () => {
     const user = userEvent.setup();
     const onStepSubmit =
-      mock<NonNullable<OnboardingBlockProps["onStepSubmit"]>>(async () => {});
+      mock<NonNullable<IOnboardingBlockProps["onStepSubmit"]>>(async () => {});
     const onComplete =
-      mock<NonNullable<OnboardingBlockProps["onComplete"]>>(async () => {});
+      mock<NonNullable<IOnboardingBlockProps["onComplete"]>>(async () => {});
     render(
       <OnboardingBlock
         steps={STEPS}

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

@@ -4,10 +4,10 @@ import userEvent from "@testing-library/user-event";
 
 import {
   PasskeyManagerBlock,
-  type PasskeyRecord,
 } from "../passkey-manager-block";
+import type { IPasskeyRecord } from "../type";
 
-const PASSKEYS: PasskeyRecord[] = [
+const PASSKEYS: IPasskeyRecord[] = [
   { id: "pk-1", name: "MacBook", createdAt: "2026-01-05T00:00:00.000Z" },
   { id: "pk-2", name: "iPhone", lastUsedAt: "2026-02-01T00:00:00.000Z" },
 ];
@@ -44,7 +44,7 @@ describe("PasskeyManagerBlock", () => {
     const onRegister = mock(async () => {});
     render(<PasskeyManagerBlock onRegister={onRegister} />);
 
-    await user.click(screen.getByRole("button", { name: "Add a passkey" }));
+    await user.click(screen.getByRole("button", { name: "Add" }));
 
     expect(onRegister).toHaveBeenCalledTimes(1);
   });
@@ -122,7 +122,7 @@ describe("PasskeyManagerBlock", () => {
       />,
     );
 
-    await user.click(screen.getByRole("button", { name: "Add a passkey" }));
+    await user.click(screen.getByRole("button", { name: "Add" }));
 
     expect((await screen.findByRole("alert")).textContent).toBe(
       "Passkey registration is disabled.",

package/src/components/blocks/auth/auth-flow-atom.ts

@@ -20,17 +20,17 @@ import { atom } from "jotai"
 import type { Getter, Setter } from "jotai"
 
 import { signInAtom, signOutAtom } from "./auth-session-atom"
-import type { AuthStatus } from "./auth-shell"
 import type {
-  AuthFlowChannel,
-  AuthFlowId,
-  AuthFlowState,
-  AuthFlowStep,
-  AuthUser,
-  BeginAuthVerificationOptions,
-} from "./auth-state-type"
+  TAuthStatus,
+  TAuthFlowChannel,
+  TAuthFlowId,
+  IAuthFlowState,
+  TAuthFlowStep,
+  IAuthUser,
+  IBeginAuthVerificationOptions,
+} from "./type"
 
-export const DEFAULT_AUTH_FLOW_ID: AuthFlowId = "default"
+export const DEFAULT_AUTH_FLOW_ID: TAuthFlowId = "default"
 
 /**
  * A string-keyed atom family (same in-house shape as `tree-atom.ts`:
@@ -38,24 +38,24 @@ export const DEFAULT_AUTH_FLOW_ID: AuthFlowId = "default"
  * the string-keyed case with a `remove`). Dropping a key lets the store's
  * WeakMap release that instance's state.
  */
-type Family<AtomType> = ((id: AuthFlowId) => AtomType) & {
-  remove: (id: AuthFlowId) => void
+type TFamily<AtomType> = ((id: TAuthFlowId) => AtomType) & {
+  remove: (id: TAuthFlowId) => void
 }
 
 /** Every family, so `removeAuthFlowInstance` can drop an id from all. */
-const families: { remove: (id: AuthFlowId) => void }[] = []
+const families: { remove: (id: TAuthFlowId) => void }[] = []
 
-function keyed<AtomType>(create: (id: AuthFlowId) => AtomType) {
-  const cache = new Map<AuthFlowId, AtomType>()
-  const family = ((id: AuthFlowId) => {
+function keyed<AtomType>(create: (id: TAuthFlowId) => AtomType) {
+  const cache = new Map<TAuthFlowId, AtomType>()
+  const family = ((id: TAuthFlowId) => {
     let instance = cache.get(id)
     if (instance === undefined) {
       instance = create(id)
       cache.set(id, instance)
     }
     return instance
-  }) as Family<AtomType>
-  family.remove = (id: AuthFlowId) => {
+  }) as TFamily<AtomType>
+  family.remove = (id: TAuthFlowId) => {
     cache.delete(id)
   }
   families.push(family)
@@ -72,7 +72,7 @@ function stateFamily<Value>(name: string, initialValue: Value) {
 
 function readFamily<Value>(
   name: string,
-  read: (get: Getter, id: AuthFlowId) => Value
+  read: (get: Getter, id: TAuthFlowId) => Value
 ) {
   return keyed((id) => {
     const instance = atom((get) => read(get, id))
@@ -83,7 +83,7 @@ function readFamily<Value>(
 
 function actionFamily<Args extends unknown[]>(
   name: string,
-  write: (get: Getter, set: Setter, id: AuthFlowId, ...args: Args) => void
+  write: (get: Getter, set: Setter, id: TAuthFlowId, ...args: Args) => void
 ) {
   return keyed((id) => {
     const instance = atom(null, (get, set, ...args: Args) =>
@@ -113,7 +113,7 @@ export function maskAuthIdentifier(identifier: string): string {
 
 // ── primitives ───────────────────────────────────────────────────────────
 
-export const authFlowStepAtom = stateFamily<AuthFlowStep>("step", "login")
+export const authFlowStepAtom = stateFamily<TAuthFlowStep>("step", "login")
 
 /** An email or phone number in flight — never a password or a code. */
 export const authFlowIdentifierAtom = stateFamily<string | null>(
@@ -121,12 +121,12 @@ export const authFlowIdentifierAtom = stateFamily<string | null>(
   null
 )
 
-export const authFlowChannelAtom = stateFamily<AuthFlowChannel>(
+export const authFlowChannelAtom = stateFamily<TAuthFlowChannel>(
   "channel",
   "email"
 )
 
-export const authFlowStatusAtom = stateFamily<AuthStatus>("status", "idle")
+export const authFlowStatusAtom = stateFamily<TAuthStatus>("status", "idle")
 
 export const authFlowErrorAtom = stateFamily<string | null>("error", null)
 
@@ -141,7 +141,7 @@ export const authFlowMaskedIdentifierAtom = readFamily<string | null>(
   }
 )
 
-export const authFlowStateAtom = readFamily<AuthFlowState>(
+export const authFlowStateAtom = readFamily<IAuthFlowState>(
   "state",
   (get, id) => ({
     step: get(authFlowStepAtom(id)),
@@ -157,7 +157,7 @@ export const authFlowStateAtom = readFamily<AuthFlowState>(
 
 /** Show a step with a clean slate (`"idle"`, no error). Keeps the
  * identifier so "back to verify" flows don't lose the destination. */
-export const goToAuthStepAtom = actionFamily<[step: AuthFlowStep]>(
+export const goToAuthStepAtom = actionFamily<[step: TAuthFlowStep]>(
   "goToStep",
   (_get, set, id, step) => {
     set(authFlowStepAtom(id), step)
@@ -168,7 +168,7 @@ export const goToAuthStepAtom = actionFamily<[step: AuthFlowStep]>(
 
 /** Record the identifier in flight and move to the verification step. */
 export const beginAuthVerificationAtom = actionFamily<
-  [options: BeginAuthVerificationOptions]
+  [options: IBeginAuthVerificationOptions]
 >(
   "beginVerification",
   (_get, set, id, { identifier, channel = "email", step = "verify-code" }) => {
@@ -200,7 +200,7 @@ export const failAuthFlowAtom = actionFamily<[message: string]>(
 /** Mark the flow `"success"` and land on the success step. When `user` is
  * given, also sign the session in — one atomic write for the whole
  * "verification passed" transition. */
-export const completeAuthFlowAtom = actionFamily<[user?: AuthUser]>(
+export const completeAuthFlowAtom = actionFamily<[user?: IAuthUser]>(
   "complete",
   (_get, set, id, user) => {
     set(authFlowStatusAtom(id), "success")
@@ -233,6 +233,6 @@ endAuthSessionAtom.debugLabel = "auth-flow/endAuthSession"
 
 /** Drop every atom for `id`. Call on teardown of an explicit flow id; the
  * default flow usually just gets `resetAuthFlowAtom`. */
-export function removeAuthFlowInstance(id: AuthFlowId): void {
+export function removeAuthFlowInstance(id: TAuthFlowId): void {
   for (const family of families) family.remove(id)
 }